:root{--space:#102a43;--sky:#6fc8e8;--station:#dce8f2;--coral:#f36f45}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit}
.game-shell{width:100%;margin:0 auto 40px}
body.is-playing{overflow:hidden}
.screen{min-width:0}
.intro{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);align-items:stretch}
.hero-stage{margin:24px 0 24px 24px;min-height:520px;background:#dce8f2}
.hero-stage>svg{position:absolute;inset:0;width:100%;height:100%}
.hero-bubble{width:29%!important;height:auto!important;inset:auto!important;left:17%!important;top:35%!important;animation:hero-float 2.6s ease-in-out infinite}
.hero-roster{width:47%!important;height:auto!important;inset:auto!important;right:3%!important;top:4%!important}
.intro-copy{display:flex;flex-direction:column;justify-content:center}
.intro h1{margin:8px 0 6px;font-size:clamp(3rem,7vw,6.8rem);line-height:.86;letter-spacing:-.065em}
html:lang(ja) .intro h1{font-size:clamp(2.7rem,5.9vw,5.5rem)}
.eyebrow{margin:0;font-size:.78rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.dek{margin:0 0 12px;color:#36566d;font-size:clamp(1.05rem,2vw,1.55rem);font-weight:850;line-height:1.25}
.primary,.secondary,.pause-button{min-height:50px;padding:12px 18px;border:2px solid #071323;border-radius:11px;font-weight:950;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.primary{color:#071323;background:#f8c35a;box-shadow:0 5px 0 #071323}
.secondary,.pause-button{color:#071323;background:#fff;box-shadow:0 3px 0 #071323}
.primary:hover,.secondary:hover,.pause-button:hover{filter:brightness(.97)}
.primary:active,.secondary:active,.pause-button:active{transform:translateY(3px);box-shadow:0 1px 0 #071323}
:where(button,a):focus-visible{outline:4px solid #0086ff;outline-offset:3px}
.key-help{margin:12px 0 0;color:#526477;font-size:.75rem;text-align:center}
.play{width:min(1180px,calc(100% - 28px));margin:12px auto 28px;border:4px solid #071323;border-radius:24px;background:#fffaf0;box-shadow:0 10px 0 #07132324;overflow:hidden}
.play-hud{height:58px;padding:7px 10px;display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:8px;background:#fffaf0;border-bottom:2px solid #a9b8c5}
.play-hud>div{min-width:0;display:flex;flex-direction:column;align-items:center;color:#526477;font-size:.65rem;font-weight:900;letter-spacing:.07em}
.play-hud b{color:#071323;font-size:1.08rem;letter-spacing:0;white-space:nowrap}
.pause-button{min-width:48px;min-height:44px;padding:7px 10px;font-size:.74rem}
.flight-world{position:relative;height:min(69svh,650px);min-height:410px;overflow:hidden;background:#dce8f2;touch-action:none;user-select:none;isolation:isolate;cursor:pointer}
.corridor-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.flight-world:before,.flight-world:after{content:"";position:absolute;left:0;right:0;height:7%;z-index:5;pointer-events:none;background:linear-gradient(#f36f45aa,#f8c35a44)}
.flight-world:before{top:0}.flight-world:after{bottom:0;transform:scaleY(-1)}
.objects{position:absolute;inset:0;z-index:6;pointer-events:none}
.gate{--x:100%;--y:50%;--gate-h:44%;position:absolute;left:var(--x);top:var(--y);width:clamp(88px,12%,142px);height:var(--gate-h);transform:translate(-50%,-50%);transition:opacity .18s}
.gate svg{width:100%;height:100%;filter:drop-shadow(7px 7px 0 #07132322)}
.gate i{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:#f8c35a;border:4px solid #17324d;transform:translate(-50%,-50%) scale(.65);opacity:.45}
.gate b{position:absolute;left:50%;top:50%;padding:3px 7px;transform:translate(-50%,-50%);color:#071323;background:#fffaf0e8;border:2px solid #17324d;border-radius:5px;box-shadow:0 3px 0 #17324d;font-size:clamp(.5rem,1.2vw,.68rem);font-weight:1000;letter-spacing:.06em;white-space:nowrap}
.gate.passed{opacity:.28}.gate.passed i{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
.gate.passed b{display:none}
.gate.missed{opacity:.58;filter:grayscale(.7)}
.gate.missed i{background:#f36f45;opacity:1}
.gate.missed b{color:#fff;background:#b62b1f;border-color:#fffaf0;box-shadow:0 3px 0 #071323}
.gate-clear-burst{--x:50%;--y:50%;position:absolute;left:var(--x);top:var(--y);z-index:18;width:112px;height:112px;display:grid;place-items:center;transform:translate(-50%,-50%);pointer-events:none;animation:gate-clear-burst .72s ease-out forwards}
.gate-clear-burst i{position:absolute;inset:12px;border:8px solid #f8c35a;border-radius:50%;box-shadow:0 0 0 5px #fffaf0,0 0 24px #f8c35a;animation:gate-clear-ring .72s ease-out forwards}
.gate-clear-burst:after{content:"";width:11px;height:11px;border-radius:50%;background:#fffaf0;box-shadow:0 -62px 0 #f8c35a,44px -44px 0 #fffaf0,62px 0 0 #f8c35a,44px 44px 0 #fffaf0,0 62px 0 #f8c35a,-44px 44px 0 #fffaf0,-62px 0 0 #f8c35a,-44px -44px 0 #fffaf0}
.gate-clear-burst b{position:relative;padding:5px 9px;color:#071323;background:#f8c35a;border:3px solid #fffaf0;border-radius:6px;box-shadow:0 3px 0 #17324d;font-size:.68rem;font-weight:1000;white-space:nowrap}
.hazard{--x:120%;--y:50%;position:absolute;left:var(--x);top:var(--y);width:clamp(64px,9%,96px);height:clamp(64px,9vw,96px);display:grid;place-items:center;transform:translate(-50%,-50%);border:4px solid #b62b1f;border-radius:50%;background:repeating-linear-gradient(135deg,#fffaf0e8 0 8px,#f8c35acc 8px 16px);box-shadow:0 0 0 4px #fffaf0,5px 6px 0 #07132338}
.hazard svg{width:100%;height:100%;overflow:visible}
.hazard b{position:absolute;left:50%;bottom:-21px;padding:2px 5px;transform:translateX(-50%);color:#fff;background:#b62b1f;border:2px solid #fffaf0;border-radius:4px;font-size:clamp(.48rem,1.2vw,.65rem);line-height:1;letter-spacing:.04em;white-space:nowrap}
.hazard-warning{position:absolute;right:-8px;top:-12px;z-index:2;width:27px;height:27px;display:grid;place-items:center;color:#fff;background:#b62b1f;border:3px solid #fffaf0;border-radius:50%;box-shadow:2px 2px 0 #071323;font-size:.95rem;font-weight:1000;line-height:1}
.hazard.is-bounced{animation:hazard-bounce .24s ease-out}
.crew{--bubble-y:50%;position:absolute;left:26%;top:var(--bubble-y);width:clamp(90px,17%,170px);aspect-ratio:320/250;z-index:11;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(6px 7px 0 #07132320)}
.crew svg{width:100%;height:100%}
.crew.is-lifting svg{transform:translateY(-2px);filter:drop-shadow(0 5px 0 #6fc8e866)}
.crew.is-clearing svg{filter:drop-shadow(0 0 13px #f8c35a) drop-shadow(0 0 5px #fffaf0)}
.roster-panel{position:absolute;right:2.2%;top:2.5%;width:min(44%,420px);z-index:13;pointer-events:none}
.roster-panel svg{display:block;width:100%;height:auto}
.roster-panel b{position:absolute;right:7%;bottom:9%;padding:2px 6px;color:#fffaf0;background:#102a43cc;border-radius:3px;font-size:clamp(.55rem,1.5vw,.78rem);letter-spacing:.04em}
.coach{position:absolute;left:5%;bottom:10%;z-index:14;padding:7px 12px;color:#071323;background:#f8c35a;border:2px solid #071323;border-radius:8px;box-shadow:0 3px 0 #071323;font-size:.82rem;font-weight:950;pointer-events:none;animation:coach-pulse 1s ease-in-out infinite}
.feedback{position:absolute;left:50%;bottom:4%;z-index:14;max-width:70%;margin:0;padding:7px 12px;transform:translateX(-50%);color:#071323;background:#fffaf0e8;border-left:5px solid #28527a;border-radius:6px;font-size:clamp(.72rem,2vw,.95rem);font-weight:950;text-align:center;pointer-events:none}
.feedback[data-mode="bump"]{border-left-color:#f36f45}.feedback[data-mode="center"]{border-left-color:#f8c35a}
.pause-layer{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;background:#102a43e8}
.pause-layer b{font-size:clamp(1.2rem,4vw,2.2rem)}
.error{width:min(720px,calc(100% - 28px));margin:30px auto;padding:30px;background:#fffaf0;border:4px solid #071323;border-radius:24px;text-align:center}
.result{width:min(1180px,calc(100% - 28px));margin:12px auto 30px;display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);background:#fffaf0;border:4px solid #071323;border-radius:28px;box-shadow:0 10px 0 #07132324;overflow:hidden}
.result-art{min-height:520px;display:flex;align-items:center;background:#dce8f2}
.result-art svg{width:100%;height:auto}
.result-copy{padding:28px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.result-copy h2{margin:5px 0 8px;font-size:clamp(1.55rem,3vw,3rem);line-height:1.05}
.score-line{display:flex;align-items:baseline;gap:7px}.score-line strong{font-size:clamp(4rem,9vw,7.2rem);line-height:.9}.score-line span{font-weight:900;color:#526477}
.rank-line{margin:8px 0 14px;font-weight:850}.rank-line b{display:inline-block;margin:0 8px;padding:3px 7px;color:#fff;background:#28527a;border-radius:4px}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.result-stats p{margin:0;padding:8px 10px;color:#36566d;background:#edf3f7;border-left:4px solid #6fc8e8;border-radius:5px;font-size:.82rem;font-weight:800}
.result-stats p:last-child{grid-column:1/-1;background:#fff7dc;border-left-color:#f8c35a}
.result-actions{display:grid;gap:9px}.news-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.news-links a{color:#28527a;font-weight:850;text-underline-offset:3px}.disclaimer{color:#526477;font-size:.72rem;line-height:1.5}
@keyframes hero-float{50%{transform:translateY(-12px)}}
@keyframes coach-pulse{50%{transform:translateY(-3px)}}
@keyframes hazard-bounce{50%{scale:1.1;rotate:7deg}}
@keyframes gate-clear-burst{0%{opacity:0;scale:.55}20%{opacity:1;scale:1.08}100%{opacity:0;scale:1.35}}
@keyframes gate-clear-ring{from{scale:.45}to{scale:1.25}}
@media(max-width:760px){.intro{display:block}.hero-stage{margin:12px 12px 0;min-height:0;aspect-ratio:16/9}.intro-copy{display:block}.intro h1{font-size:clamp(2.65rem,14vw,4.2rem);line-height:.96}.result{display:block}.result-art{min-height:0}.result-copy{padding:24px}.flight-world{height:calc(100svh - 146px);min-height:390px}.play-hud{height:54px}.roster-panel{width:50%;right:1%;top:2%}.feedback{bottom:3%;max-width:76%}.coach{bottom:11%;left:3%}.result-stats{grid-template-columns:1fr}}
@media(max-width:390px){.play{width:calc(100% - 16px);margin-top:8px;border-width:3px}.play-hud{padding:5px 6px;gap:4px}.play-hud>div{font-size:.57rem}.play-hud b{font-size:.87rem}.pause-button{padding:6px;font-size:.65rem}.crew{width:23%}.gate{width:16%}.feedback{font-size:.68rem}.roster-panel b{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}