:root{font-family:Arial,"Noto Sans JP",system-ui,sans-serif;color:#f5f8f3;background:#071324;color-scheme:dark;--mint:#b9ffad;--line:#ffffff30}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{touch-action:manipulation;font:inherit;cursor:pointer;border:0}button:disabled{opacity:.55}button:focus-visible{outline:2px solid var(--mint);outline-offset:4px}[hidden]{display:none!important}
#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}#view{display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#07152855,transparent 20%,transparent 70%,#07152888)}
header{position:absolute;top:calc(env(safe-area-inset-top) + 20px);left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;height:36px;z-index:6;pointer-events:none}.brand{font-size:12px;letter-spacing:2px;font-weight:600}.icon-btn{pointer-events:auto;color:white;background:#101b2d77;border:1px solid var(--line);width:36px;height:36px;border-radius:50%;font-size:17px}
.hud{position:absolute;top:calc(env(safe-area-inset-top) + 77px);left:22px;pointer-events:none}.metric-label{font-size:9px;color:#dae5e8}.hud strong{display:block;font:32px monospace;font-variant-numeric:tabular-nums}.hud small{font-size:11px;margin-left:5px;color:#c5d7d9}.rope-state{position:absolute;top:calc(env(safe-area-inset-top) + 139px);left:22px;display:flex;gap:6px;align-items:center;font-size:9px;pointer-events:none;text-shadow:0 1px 4px #102430}.state-dot{width:5px;height:5px;border-radius:50%;background:#f8c68d}.rope-state.connected{color:var(--mint)}.connected .state-dot{background:var(--mint)}
.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:17px;height:17px;border:1px solid #e5ffdbb3;border-radius:50%;pointer-events:none;box-shadow:0 1px 3px #102430}.crosshair i{position:absolute;top:50%;left:50%;width:3px;height:3px;background:white;border-radius:50%;transform:translate(-50%,-50%)}.crosshair.ready{border-color:#c5e7c599}.crosshair.ready i{background:#d2ecd2}.crosshair.attached{border-color:#ffc789}.crosshair.attached i{background:#ffc789}
#aimLabel{position:absolute;top:calc(50% + 32px);left:15%;right:15%;text-align:center;font-size:9px;pointer-events:none;color:#edffe7;text-shadow:0 1px 4px #091a26}
.flight-hud{position:absolute;top:50%;left:12px;right:12px;height:clamp(190px,40vh,330px);transform:translateY(-50%);pointer-events:none;color:#cee8ced9;filter:none}.flight-hud svg{display:block;width:100%;height:100%;overflow:visible}.flight-hud svg path{fill:none;stroke:#c5e7c580;stroke-width:1;vector-effect:non-scaling-stroke}.flight-hud svg text{fill:currentColor;font:12px monospace;font-variant-numeric:tabular-nums}.flight-hud .negative path{stroke-dasharray:5 3}.flight-hud .tape-axis{opacity:.5}.flight-hud .reading-box{fill:#102521b0;stroke:#c5e7c599;stroke-width:1}.flight-hud svg .reading{font-size:17px;font-weight:600}.flight-hud svg .instrument-title text{font:10px Arial,sans-serif}.flight-hud .attitude-mark{stroke-width:1.2}.pitch-readout{position:absolute;bottom:0;left:27%;right:27%;text-align:center;text-shadow:0 1px 2px #09201b40}.pitch-readout span{font:15px monospace}.pitch-readout small{display:block;font-size:8px;margin-top:4px}.flight-hud.boosted .pitch-readout{color:#d9ecc0}
.mini-map{position:absolute;right:22px;top:calc(env(safe-area-inset-top) + 80px);width:73px;height:85px;pointer-events:none;opacity:.85}.mini-map svg{width:100%;height:100%}.mini-map path{fill:none;stroke:#d3e2e555;stroke-width:38;stroke-linecap:round}#mapPlayer{fill:white;stroke:#20303d;stroke-width:9}#mapGoal{fill:var(--mint);stroke:#b9ffad66;stroke-width:18}
.mission-hud{position:absolute;left:22px;right:22px;bottom:calc(env(safe-area-inset-bottom) + 143px);display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;text-shadow:0 1px 5px #071529}.mission-hud b{font-size:10px;font-weight:500;color:var(--mint)}.mission-hud small{font-size:10px;color:#d3e5e8}.mission-hud #goalArrow{display:none;color:var(--mint);font:23px monospace}.mission-hud.stage #goalArrow{display:inline-block}
#toast{position:absolute;top:28%;left:22px;right:22px;text-align:center;font-size:11px;line-height:1.7;pointer-events:none;text-shadow:0 2px 5px #000;opacity:0;color:#f0ffec}#toast.visible{opacity:1}
#touchGuide{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 23px);left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none}#touchGuide strong{font-size:10px;display:block;margin-top:8px;font-weight:500}#touchGuide small{font-size:8px;display:block;color:#b5c8ce;margin-top:5px}.left-guide,.right-guide{text-align:center;width:115px}.right-guide{align-self:flex-end;padding-bottom:2px}.right-guide>svg{height:28px;width:28px;fill:none;stroke:#d3e3e7;stroke-width:1}.grip{width:56px;height:56px;margin:auto;border:1px solid #b9ffad66;border-radius:50%;background:#10233720;display:grid;place-items:center}.grip.active{background:#b9ffad30;border-color:var(--mint)}.grip svg{width:26px;height:26px;fill:none;stroke:var(--mint);stroke-width:1.2}
.sheet{position:absolute;inset:0;z-index:5;background:#071324d9;backdrop-filter:blur(8px);display:flex;align-items:center;padding:calc(env(safe-area-inset-top) + 70px) 28px calc(env(safe-area-inset-bottom) + 24px);overflow:auto;touch-action:pan-y}.panel{max-width:360px;width:100%;margin:auto;text-align:center}h2{font-size:25px;font-weight:600;margin:18px 0}.eyebrow{font-size:11px;color:#bed1d8}.primary{width:100%;padding:17px;margin-top:18px;color:#14291e;background:var(--mint);border-radius:3px;font-size:14px;font-weight:600}.secondary{width:100%;padding:16px;margin-top:12px;color:#e5eff1;background:transparent;border:1px solid var(--line);border-radius:3px;font-size:13px}.result-distance{font:72px monospace;color:var(--mint);line-height:1.4}.result-distance small{font-size:18px;margin-left:8px}.result-stats{display:flex;justify-content:space-around;border-block:1px solid var(--line);padding:16px 0}.result-stats small{display:block;font-size:10px;color:#b5c6ce}.result-stats b{display:block;font:17px monospace;margin-top:8px}.panel>p:not(.eyebrow){font-size:11px;line-height:1.8;color:#c5d5dc}.result-tip{margin-top:18px}
@media(max-height:620px){header{top:calc(env(safe-area-inset-top) + 12px)}.hud{top:65px}.hud strong{font-size:25px}.rope-state{top:113px}.mini-map{top:65px;width:60px;height:68px}.flight-hud{height:190px}.ready-modes{top:65px}.ready-modes .mode-picker button{padding:8px 6px}.ready-modes .mode-description{display:none}.mission-hud{bottom:112px}#touchGuide{bottom:13px}.grip{width:42px;height:42px}.tap-start{top:calc(50% + 34px);padding:9px 15px}}
@media(min-width:700px){.flight-hud{max-width:620px;left:50%;right:auto;width:75%;transform:translate(-50%,-50%)}#touchGuide{left:8%;right:8%}.ready-modes{width:280px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.header-controls{display:flex;align-items:center;gap:10px;pointer-events:auto}.instrument-toggle{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:3px;background:#101b2d77;color:#d3ded5;font-size:11px}.instrument-toggle[aria-pressed="true"]{color:#cee8ce;border-color:#c5e7c580}


.home-screen{position:absolute;inset:0;z-index:7;background:linear-gradient(#071324dd,#071324ef);overflow-y:auto;touch-action:pan-y;padding:calc(env(safe-area-inset-top) + 30px) 22px calc(env(safe-area-inset-bottom) + 26px);display:flex;align-items:center}
.home-panel{width:100%;max-width:420px;margin:auto}.home-panel>.eyebrow{margin:0 0 8px;color:#c0d2d8}.home-panel h1{font-size:28px;letter-spacing:3px;margin:0 0 24px}.home-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.home-modes button{min-height:78px;font-size:14px;font-weight:600;padding:14px 8px;border:1px solid var(--line);border-radius:4px;background:#132331;color:#e5eff1}.home-modes button.selected{border-color:var(--mint);background:#b9ffad20;color:var(--mint)}.home-modes small{display:block;font-size:10px;margin-top:8px;font-weight:400;color:#c7d6d9}.mode-description{font-size:11px;margin:12px 0 22px;color:#d1e4da;min-height:17px}
.how-to{border-top:1px solid var(--line);padding-top:17px}.how-to h2{font-size:14px;margin:0 0 14px}.how-to ol{padding-left:22px;margin:0;display:grid;gap:13px}.how-to li{padding-left:4px;font-size:12px;color:var(--mint)}.how-to b{display:block;color:#f5f8f3;font-size:12px}.how-to span{display:block;font-size:11px;color:#bed0d7;margin-top:4px;line-height:1.6}.how-to p{font-size:10px;line-height:1.8;color:#c4d6da;margin:18px 0 0}.home-panel .primary{font-size:15px;min-height:52px;margin-top:22px}#loadError{color:#ffd0ad;font-size:12px;line-height:1.6}
.points-hud{font:9px monospace;letter-spacing:1px;color:#d4e4dc;margin-top:6px}.points-hud b{font-size:16px;color:var(--mint);margin-left:5px}.rope-state{top:calc(env(safe-area-inset-top) + 166px)}.score-gain{position:absolute;top:43%;left:50%;transform:translateX(-50%);font:bold 22px monospace;color:var(--mint);text-shadow:0 1px 5px #071324;pointer-events:none}.result-points{font:60px monospace;line-height:1.25;color:var(--mint)}.result-points small{display:block;font:10px Arial;letter-spacing:3px;margin:4px 0 14px}.result-stats{padding:12px 0}.result-tip{margin:12px 0 0}#adStatus{min-height:18px;margin:10px 0 0;color:#ffd4a3}.sheet{z-index:7;padding:calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 22px)}.sheet .primary,.sheet .secondary{padding:14px;margin-top:10px;min-height:46px}
@media(max-height:680px){.home-screen{align-items:flex-start;padding-top:22px}.home-panel h1{font-size:24px;margin-bottom:17px}.home-modes button{min-height:65px}.how-to ol{gap:8px}.how-to p{margin-top:12px}.mode-description{margin-bottom:15px}.result-points{font-size:44px}.sheet h2{font-size:23px;margin:8px 0}.result-stats{padding:8px 0}.rope-state{top:151px}}

.time-picker{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:11px;color:#c7d6d9}
.time-picker span{margin-right:4px;letter-spacing:1px}
.time-picker button{min-width:64px;padding:9px 14px;border:1px solid var(--line);border-radius:4px;background:#132331;color:#e5eff1;font-size:13px;font-weight:600}
.time-picker button.selected{border-color:var(--mint);background:#b9ffad20;color:var(--mint)}
.time-toggle{min-width:40px}

/* PC / landscape: keep the portrait game composition in a centered column. */
@media (min-aspect-ratio:4/5){
 html,body{background:#03070d}
 #game{width:min(100vw,calc(100dvh*.5625));margin:0 auto;box-shadow:0 0 0 1px #ffffff14}
}
.pc-howto{font-size:11px!important;line-height:1.8;color:#d6e7dc!important;background:#b9ffad14;border:1px solid #b9ffad40;border-radius:4px;padding:8px 10px}
.pc-howto b{color:var(--mint)}

/* Fast reel: sits above the thread control; hold to wind three times faster. */
.left-guide{display:flex;flex-direction:column;align-items:center}
.fast-reel{pointer-events:auto;touch-action:none;width:58px;height:58px;margin-bottom:14px;border-radius:50%;border:1px solid #ffc78999;background:#2a1d1066;color:#ffd7a8;display:grid;place-items:center;align-content:center;gap:1px;padding:0;-webkit-user-select:none;user-select:none}
.fast-reel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fast-reel span{font-size:8px;letter-spacing:.5px}
.fast-reel.active{background:#ffc78955;border-color:#ffc789;color:#fff3e0;transform:scale(1.06)}
.fast-reel.idle{opacity:.55}

/* Home over the third-person opening: the character stays visible above a bottom sheet. */
.home-screen{background:linear-gradient(to bottom,transparent 0%,transparent 40%,#071324b8 60%,#071324f0 100%);align-items:flex-end;padding-top:calc(env(safe-area-inset-top) + 60px);transition:opacity .25s}
.home-panel>.eyebrow{margin-bottom:4px}
.home-panel h1{margin-bottom:12px}
.how-to{margin-top:14px;padding-top:12px}
.how-to summary{cursor:pointer;font-size:13px;font-weight:600;color:#e5eff1;list-style:none}
.how-to summary::-webkit-details-marker{display:none}
.how-to summary::after{content:'＋';float:right;color:var(--mint)}
.how-to[open] summary::after{content:'－'}
.how-to[open] ol{margin-top:12px}
.home-screen.entering .home-panel{opacity:0;transform:translateY(18px);pointer-events:none}
.home-screen .home-panel{transition:opacity .45s ease-out,transform .45s ease-out}
.home-screen.running{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.home-screen,.home-screen .home-panel{transition:none}}
.home-screen .home-panel{margin:auto auto 0}

.opening-loader{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 18%);margin:0;text-align:center;font-size:12px;letter-spacing:2px;color:#d6e7dc;opacity:0;transition:opacity .3s;pointer-events:none}
.home-screen.loading .opening-loader{opacity:.9;animation:loaderPulse 1.4s ease-in-out infinite}
@keyframes loaderPulse{50%{opacity:.4}}
.home-screen .home-panel{max-height:60%;overflow-y:auto;overscroll-behavior:contain}
@media (prefers-reduced-motion:reduce){.home-screen.loading .opening-loader{animation:none}}

/* Header (sound toggle) stays above the home sheet */
header{z-index:8}

/* Fast move: the thread button and the fast button sit on one rail; chevrons climb it to show the slide. */
.reel-track{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:5px;border-radius:40px;border:1px solid #ffffff22;background:linear-gradient(to top,#b9ffad14,#ffc78922);pointer-events:none}
.reel-track .fast-reel{margin-bottom:0}
.reel-track .grip{margin:0}
.reel-rail{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:2px;height:34px}
.reel-rail i{display:block;width:12px;height:12px;border-left:2px solid #ffd7a8;border-top:2px solid #ffd7a8;transform:translateY(3px) rotate(45deg);opacity:.25}
.reel-track.ready{border-color:#ffc78977}
.reel-track.ready .reel-rail i{animation:reel-climb 1.1s infinite}
.reel-track.ready .reel-rail i:nth-child(2){animation-delay:.18s}
.reel-track.ready .reel-rail i:nth-child(3){animation-delay:.36s}
.reel-track.active{border-color:#ffc789;background:linear-gradient(to top,#b9ffad22,#ffc78955)}
.reel-track.active .reel-rail i{opacity:1;animation-duration:.45s}
@keyframes reel-climb{0%,100%{opacity:.2}35%{opacity:1}}
@media(max-height:620px){.reel-rail{height:24px}.reel-rail i{width:9px;height:9px}}

/* Waiting for the first tap so the entrance can play with sound */
.home-screen.tap .opening-loader{opacity:1;font-size:14px;letter-spacing:3px;color:#e9fff2;animation:loaderPulse 1.6s ease-in-out infinite}

/* Morning / night switch inside the pause sheet */
.settings-row{justify-content:center;margin:0 0 6px}

/* The title doubles as the hidden frame-rate switch (5 quick taps) */
header .brand{pointer-events:auto;-webkit-user-select:none;user-select:none}

/* Browser version: the ad-continue button stays visible but marked app-only */
#continueAd.app-only{background:#2b3a44;color:#a9bcc4}