*{box-sizing:border-box}html,body{margin:0;overflow:hidden;width:100%;height:100%;font-family:Arial,sans-serif;background:#293638;color:#fff0d3}button,input{font:inherit}button{color:inherit;cursor:pointer;min-height:42px;padding:10px 16px;background:#253331de;border:1px solid #fff0d344;border-radius:5px;font-size:14px;font-weight:700}button:hover{background:#496059}button:focus-visible{outline:3px solid #f6c770;outline-offset:3px}main{position:relative;width:100vw;height:100svh}canvas{display:block;width:100%;height:100%;outline:0;touch-action:none;cursor:crosshair}header{position:absolute;top:22px;left:26px;right:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;pointer-events:none;text-shadow:0 2px 10px #172322}header strong{font-size:30px;font-style:italic;letter-spacing:-1px;display:block}header span{display:block;font-size:13px;margin-top:3px;color:#f4debb}nav{display:flex;gap:8px;align-items:center;pointer-events:auto}nav label{font-size:13px;background:#253331cf;border-radius:5px;padding:12px;display:flex;align-items:center;gap:6px}input{accent-color:#e4b568}footer{position:absolute;left:18px;right:18px;bottom:15px;display:flex;flex-wrap:wrap;gap:13px;align-items:center;justify-content:center;background:#253331dc;padding:12px 16px;font-size:12px;border:1px solid #fff0d329;border-radius:6px;pointer-events:none}footer span{white-space:nowrap}kbd{font:700 12px Arial,sans-serif;color:#f8c777}#aim{position:absolute;left:50%;top:45%;pointer-events:none;transform:translate(-50%,-50%);color:#eee6ce}#aim i{display:block;width:12px;height:12px;border:2px solid currentColor;border-radius:50%;box-shadow:0 1px 3px #0008}#aim.valid{color:#ffde89}#aim.attached{color:#fff8dd}#aim span{position:absolute;left:50%;top:23px;transform:translateX(-50%);font-size:12px;font-weight:bold;text-shadow:0 1px 4px #18221f;white-space:nowrap}#telemetry{position:absolute;right:25px;bottom:86px;display:grid;grid-template-columns:auto auto;gap:3px 7px;text-align:right;text-shadow:0 2px 5px #23302b;pointer-events:none}#telemetry span{font-size:21px;font-weight:bold}#telemetry small{align-self:center;font-size:12px}#ropeState{grid-column:1/3;font-size:11px;color:#f8d58a;margin-top:6px;letter-spacing:1px}#toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);max-width:80%;padding:10px 15px;border-radius:5px;background:#23332cea;text-align:center;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}#intro,#paused,#error{position:absolute;inset:0;background:linear-gradient(90deg,#172725e6,#17272577 55%,#17272511);display:flex;align-items:center;padding:7%;z-index:4}#intro>div{max-width:560px}#intro h1{font-size:clamp(48px,7vw,94px);font-style:italic;line-height:.94;letter-spacing:-4px;margin:20px 0;color:#f6d18e}#intro p{font-size:17px;line-height:1.5}#intro .eyebrow{font-size:11px;letter-spacing:2px;color:#b4c9bc}#intro button,#paused button{background:#e4b568;color:#253331;padding:16px 24px;margin-top:12px;letter-spacing:1px}#intro small{display:block;margin-top:17px;font-size:12px;color:#c6cabe}#paused{justify-content:center;text-align:center;background:#172725bf;backdrop-filter:blur(6px)}#paused h2{font-size:32px}#error{background:#28302f;display:block;padding-top:20vh}[hidden]{display:none!important}#touch{display:none;position:absolute;bottom:15px;left:15px;right:15px;align-items:flex-end;gap:10px}.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:44px 44px;gap:5px}.dpad button{padding:8px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}#touchLeft,#touchRight{margin-left:auto;background:#e4b568;color:#253331;min-height:74px;min-width:90px;font-size:12px;line-height:1.5;touch-action:none}#touchJump{touch-action:none}.dpad button{touch-action:none}@media(pointer:coarse){#touch{display:flex}footer{display:none}#telemetry{bottom:126px}#toast{bottom:130px}}@media(max-width:650px){header{left:17px;right:17px;top:17px}header strong{font-size:25px}header span{font-size:11px}nav{gap:5px}nav label{font-size:11px;padding:10px 7px}nav button{font-size:12px;padding:8px 10px}footer{gap:9px;padding:9px;font-size:11px}#intro h1{letter-spacing:-2px}#intro p{font-size:15px}#telemetry{right:15px}#toast{width:max-content}}@media(max-height:480px){header{top:12px}header strong{font-size:23px}header span{display:none}#intro h1{font-size:46px;margin:8px 0}#intro p{font-size:14px;margin:8px 0}#intro small{margin-top:10px}footer{bottom:8px;padding:8px}#telemetry{bottom:65px}}
#armGuide{position:absolute;left:24px;bottom:88px;max-width:min(620px,70vw);pointer-events:none;background:#253331e8;border:1px solid #fff0d32b;border-radius:6px;padding:12px 15px}#armStatus{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;font-weight:bold;color:#bac8bf}#armStatus .gripped{color:#ffda88}#coach{font-size:13px;line-height:1.45;margin:8px 0 0;color:#fff0d3}#toast{bottom:190px}#touchLeft,#touchRight{margin-left:0;min-width:70px}#touchLeft{margin-left:auto}@media(pointer:coarse){#armGuide{bottom:135px;left:15px;max-width:80vw}#armStatus{font-size:10px}#coach{font-size:12px}#toast{bottom:240px}}@media(max-width:650px){#armGuide{bottom:130px;max-width:70vw;padding:8px}#armStatus{gap:7px;font-size:10px}#coach{font-size:12px}}
/* Controller and landscape touch layouts. */
#controllerStatus{max-width:480px;font-size:11px;line-height:1.35;color:#e6d6b7;margin-top:8px}.padInstructions{font-size:14px!important;line-height:1.5!important;color:#f0dfbf}.touchInstructions,#rotateHint{display:none}#touch{display:none;pointer-events:none;padding-bottom:env(safe-area-inset-bottom)}body.touch-mode:not(.using-pad) #touch{display:flex}body.touch-mode footer,body.using-pad footer{display:none}body.touch-mode .touchInstructions{display:block}body.touch-mode .padInstructions{display:none}body.touch-mode #intro p:not(.touchInstructions):not(.eyebrow){display:none}.thumbstick{position:relative;width:112px;height:112px;flex:0 0 112px;border-radius:50%;border:2px solid #f1d39d77;background:#203b38b8;touch-action:none;pointer-events:auto;user-select:none}.thumbstick i{position:absolute;width:44px;height:44px;left:32px;top:32px;border-radius:50%;background:#efc980bf;border:2px solid #fff1c1;pointer-events:none}.thumbstick span{position:absolute;bottom:8px;width:100%;text-align:center;font-size:10px;font-weight:bold;pointer-events:none}.touchActions{display:flex;flex:1;justify-content:center;align-items:flex-end;gap:8px;pointer-events:none}.touchActions button{pointer-events:auto;touch-action:manipulation;min-height:55px!important;min-width:70px!important;margin:0!important;font-size:11px!important;padding:8px!important;user-select:none}#touchJump{background:#2a4a45}#lookStick{margin-left:auto}body.touch-mode header{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}body.touch-mode #touch{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}body.touch-mode #armGuide{bottom:145px}body.using-pad #armGuide{bottom:24px}body.using-pad #telemetry{bottom:30px}
@media(max-height:540px){#controllerStatus{font-size:10px;max-width:330px}header strong{font-size:21px}nav button,nav label{min-height:34px;font-size:11px;padding:7px}#intro{padding:20px 5%;overflow:auto;align-items:flex-start}#intro h1{font-size:42px;line-height:1;margin:8px 0}#intro .eyebrow{display:none}#intro p{font-size:13px;line-height:1.4;margin:8px 0}#intro .padInstructions{font-size:12px!important;line-height:1.4!important}#intro button{padding:10px 18px;margin:4px 0}#intro small{font-size:10px;margin-top:8px}body.touch-mode #intro{align-items:center}body.touch-mode #armGuide{left:50%;transform:translateX(-50%);top:78px;bottom:auto;padding:6px 10px;max-width:70vw}body.touch-mode #coach{display:none}body.touch-mode #armStatus{font-size:10px;gap:12px}body.touch-mode #telemetry{top:120px;bottom:auto;font-size:10px}body.touch-mode #telemetry span{font-size:16px}body.touch-mode #toast{bottom:145px;max-width:65%;font-size:12px}#touch{bottom:10px}.thumbstick{width:100px;height:100px;flex-basis:100px}.thumbstick i{left:26px;top:26px}.touchActions button{min-height:48px!important}}
@media(orientation:portrait){body.touch-mode #rotateHint{display:block;position:absolute;top:145px;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;text-align:center;padding:8px 12px;background:#203b38e8;border-radius:6px;font-size:12px;pointer-events:none}body.touch-mode #touch{flex-wrap:wrap;justify-content:space-between;gap:12px}body.touch-mode .touchActions{order:-1;flex-basis:100%;justify-content:center}body.touch-mode #armGuide{bottom:220px}header{flex-wrap:wrap}#controllerStatus{max-width:90vw}}
.armAim{position:absolute;transform:translate(-50%,-50%);pointer-events:none;text-align:center;color:#91e9ed;z-index:2}.armAim.rightAim{color:#ffb687}.armAim i{display:grid;place-items:center;width:30px;height:30px;font:700 14px Arial;border:2px dashed currentColor;border-radius:50%;background:#17272580;box-shadow:0 1px 5px #0008}.armAim.valid i{border-style:solid;box-shadow:0 0 10px currentColor}.armAim.attached i{background:#172725e8}.armAim span{position:absolute;left:50%;top:36px;transform:translateX(-50%);font-size:11px;font-weight:bold;white-space:nowrap;text-shadow:0 2px 4px #000}header>div{max-width:35%}header nav{flex-wrap:wrap;justify-content:flex-end;max-width:65%}#controllerStatus{max-width:310px}#controllerLayout{font-size:12px}body.touch-mode:not(.using-pad) #controllerLayout{display:none}@media(max-width:650px){header>div{max-width:100%}header nav{max-width:100%}}@media(max-height:540px){#controllerLayout{font-size:10px;padding:7px}}
#targetPoint{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);border:2px solid #ffe291;border-radius:50%;box-shadow:0 0 12px #ffe29199,inset 0 0 7px #ffe29166;pointer-events:none}#targetPoint:after{content:'';position:absolute;width:4px;height:4px;left:8px;top:8px;background:#ffe291;border-radius:50%}#aim.unreachable{color:#edb59f}
/* The selection screen shows the same 3D models used in the playground. */
body.choosing #game> :not(#intro){visibility:hidden}
#intro{padding:clamp(18px,4vw,56px);background:radial-gradient(ellipse at 24% 45%,#496157 0,#263c37 48%,#172b29 100%);overflow:auto;align-items:center}
#intro>.selectionShell{max-width:1280px;width:100%;margin:auto}
.selectionHeading{display:flex;align-items:center;justify-content:space-between;gap:20px}
#intro .eyebrow{font-size:14px;letter-spacing:5px;font-weight:bold;color:#efbd70;margin:0 0 14px}
#intro h1{font-size:clamp(30px,4vw,56px);letter-spacing:-1.8px;line-height:1.05;margin:0 0 24px;color:#fff0d3}
.selectionBody{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,4vw,65px);align-items:center}
.selectedCharacter{min-width:0;text-align:center}
#characterPreview{width:100%;height:clamp(200px,33vw,370px);cursor:default}
#intro .characterCopy p{font-size:15px;line-height:1.5;margin:8px 0;color:#dfdacc}
#intro #selectedFamily{font-size:12px;letter-spacing:3px;color:#eab972;font-weight:700}
#selectedName{font-size:clamp(34px,4vw,56px);font-style:italic;margin:0;line-height:1.1}
#characterGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#intro .characterCard{background:#14272366;border:2px solid #82918a44;color:#fff0d3;border-radius:12px;margin:0;padding:8px 5px 12px;min-width:0;letter-spacing:0;transition:background .15s,border-color .15s}
.characterCard img{display:block;width:100%;height:auto;aspect-ratio:260/190;object-fit:contain}
.characterCard span{display:block;font-size:18px;font-weight:bold}
#intro .characterCard small{font-size:10px;letter-spacing:1px;margin:5px 0 0;color:#c5cbbf}
#intro .characterCard:hover{background:#52635988}
#intro .characterCard[aria-pressed=true]{border-color:#f5cb82;background:#8b6b3755;box-shadow:0 0 0 2px #f5cb8222}
#intro .equalMovement{font-size:14px;color:#d0d6cb;margin:18px 0 8px;text-align:center}
#intro #start{display:block;width:100%;background:#efbd70;border:2px solid #f5d79e;color:#253331;border-radius:8px;font-size:17px;min-height:54px;margin:12px 0}
#intro #selectionControls{font-size:13px;text-align:center;color:#b8c8be;line-height:1.5;margin:12px 0}
#intro #cancelCharacter{margin:0;background:#263c37;color:#fff0d3;padding:12px;font-size:12px;white-space:nowrap}
.movementHelp{font-size:13px;color:#b8c8be;text-align:center;margin-top:15px}.movementHelp summary{cursor:pointer;padding:5px}#intro .movementHelp p{font-size:13px;line-height:1.5}
#pausedCharacter{display:block;margin:15px auto 0!important}
body.touch-mode #intro .selectionShell p{display:block!important}
@media(max-width:700px){.selectionBody{grid-template-columns:1fr;gap:20px}.selectedCharacter{display:grid;grid-template-columns:1fr 1fr;align-items:center}#characterPreview{height:200px}.characterCopy{text-align:left}#intro h1{margin-bottom:8px}#intro .characterCard{padding:4px 3px 8px}.selectionHeading{align-items:flex-start}.characterCard span{font-size:16px}#intro{align-items:flex-start}}
@media(max-height:560px) and (min-width:701px){#intro{padding:18px 28px}.selectionBody{grid-template-columns:.85fr 1.15fr;gap:24px}#intro h1{font-size:32px;margin:0 0 12px}#intro .eyebrow{display:block;font-size:12px;margin-bottom:8px}#characterPreview{height:190px}#selectedName{font-size:30px}#characterGrid{gap:7px}.characterCard img{max-height:75px}#intro .characterCard{padding:3px 3px 7px}#intro .characterCard small{display:none}#intro #start{min-height:42px;padding:8px;margin:8px 0}#intro #selectionControls{margin:5px 0}.movementHelp{margin-top:5px}#intro .equalMovement{margin:8px 0;font-size:12px}}
@media(max-height:440px) and (min-width:701px){#intro{padding:12px 24px}#intro h1{font-size:28px;margin-bottom:10px}#intro .eyebrow{font-size:11px;margin-bottom:6px}.characterCard img{max-height:56px}.characterCard span{font-size:15px}#characterPreview{height:145px}#intro .selectionShell p.equalMovement{display:none!important}#intro #selectionControls{font-size:12px;margin:5px 0}#intro #start{font-size:15px}#intro .characterCopy p{font-size:13px}}
#routeHud{position:absolute;top:132px;left:26px;width:min(355px,45vw);padding:12px 15px;background:#253331df;border:1px solid #fff0d333;border-radius:7px;pointer-events:none}#routeHud>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:12px}#routeStage{font-size:13px;letter-spacing:1px;color:#f6ce86}#routeDistance{font-size:13px}#routeArrow{display:inline-block;font-size:21px;font-style:normal;color:#f6ce86}#routeHint{font-size:13px;line-height:1.4;margin:7px 0 10px}.routeTrack{height:3px;background:#ffffff20;border-radius:3px;overflow:hidden}#routeProgress{display:block;height:100%;width:0;background:#ecc271}
#victory{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;background:#172725cc;backdrop-filter:blur(4px);padding:24px}#victory h2{font-size:clamp(50px,9vw,100px);font-style:italic;letter-spacing:-4px;color:#f6ce86;margin:15px 0}#victory .eyebrow{letter-spacing:3px;font-size:13px}#finishStats{margin-bottom:25px}#victory button{margin:6px;background:#e4b568;color:#253331}#victory #replay{background:#263c37;color:#fff0d3}
@media(max-height:540px){#routeHud{top:80px;left:18px;width:260px;padding:7px 10px}#routeHint{font-size:11px;margin:4px 0 6px}#routeStage{font-size:11px}#routeArrow{font-size:16px}}@media(max-width:600px) and (orientation:portrait){#routeHud{top:185px;left:15px;width:75vw}}
#boostHud{position:fixed;right:22px;bottom:190px;width:205px;padding:12px 14px;border-radius:8px;background:#233c39e8;color:#ffdf83;pointer-events:none;font-size:12px}#boostHud>div:first-child{display:flex;justify-content:space-between;gap:10px}.boostTrack{height:8px;margin:9px 0;background:#101e1c;border-radius:9px;overflow:hidden}#boostFill{display:block;height:100%;width:100%;background:#efbf5c}#boostHint{font-size:10px;color:#f3e3be}.boosting #boostHud{box-shadow:0 0 18px #edbe5544}.boosting #speed{color:#ffda75}#touchBoost{color:#ffda75!important;border-color:#d5a349!important}@media(max-height:520px){#boostHud{bottom:91px;right:16px;width:165px;padding:8px}.touch-mode #boostHud{bottom:auto;top:105px;right:16px}.touchActions{gap:5px}#touchBoost{padding:8px;font-size:11px}}
#trackGoal{margin:5px 0 3px;padding:6px 10px;font:700 10px system-ui;letter-spacing:.06em;color:#e8cd8d;background:#233c39;border:1px solid #758976;border-radius:4px;pointer-events:auto}#routeHud{pointer-events:auto}
#chaseMap{position:absolute;top:calc(100% + 8px);left:0;width:126px;height:165px;border-radius:6px;background:#233c39ed;border:1px solid #a1a783;pointer-events:none}@media(max-height:550px){#chaseMap{left:calc(100% + 8px);top:0;width:84px;height:110px}}
#boostSwitch{pointer-events:auto;display:block;width:100%;margin:7px 0;padding:6px;border:1px solid #dfb652;background:#263d37;color:#ffdf83;border-radius:4px;font:bold 10px system-ui}#boostSwitch[aria-pressed=true]{background:#efbf5c;color:#1b332c}
#pigeonWarning{position:fixed;top:110px;left:50%;transform:translateX(-50%);padding:10px 15px;background:#3d332ae8;color:#ffdb91;border:1px solid #c99b55;border-radius:6px;font-size:12px;font-weight:800;pointer-events:none;max-width:36vw;text-align:center;z-index:3}#pigeonWarning[hidden]{display:none}@media(max-height:550px){#pigeonWarning{top:66px;font-size:10px;padding:6px}}
#slingshotHud{position:fixed;left:50%;bottom:155px;transform:translateX(-50%);width:min(430px,75vw);padding:14px;background:#263c39ed;border:1px solid #f1ca75;border-radius:8px;color:#ffe2a0;pointer-events:none;z-index:4;text-align:center}#slingshotHud[hidden]{display:none}#slingshotHud p{margin:7px 0;font-size:13px}#slingshotHud small{font-size:11px}#slingPower{display:block;height:100%;background:#ffd676;width:0}@media(max-height:550px){#slingshotHud{bottom:90px;padding:8px;width:310px}#slingshotHud p{margin:3px}}
#slingshotHud{top:132px;right:24px;left:auto;bottom:auto;transform:none;width:min(260px,36vw);padding:12px}#slingshotHud small{display:block;line-height:1.4}@media(max-height:550px){#slingshotHud{top:100px;right:16px;bottom:auto;width:240px;padding:8px}}