:root{color-scheme:dark;--bg:#071627;--panel:#102b42;--line:#2d607d;--text:#f5f6fb;--muted:#b9d0df;--accent:#ffd277;--cyan:#78e2dc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#385064 0,#071627 62%);color:var(--text)}body{min-height:100dvh}.shell{width:min(100%,920px);margin:auto;min-height:100dvh;padding:18px;display:flex;flex-direction:column}.screen{width:100%;min-height:calc(100dvh - 36px)}[hidden]{display:none!important}button,select{font:inherit}button{cursor:pointer}.topbar,.section-head{display:flex;align-items:center;gap:14px;padding:4px 0 18px}.topbar>div:nth-child(2),.section-head>div:nth-child(2){flex:1}.brand-back,.icon-btn{display:grid;place-items:center;text-decoration:none;color:var(--text);background:#173853;border:1px solid var(--line);border-radius:14px;min-width:48px;min-height:48px;font-weight:900}.brand-back img{display:block;width:30px;height:30px;object-fit:contain}.eyebrow{margin:0;color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.topbar h1,.section-head h2{margin:3px 0 0;font-size:clamp(1.45rem,4vw,2.25rem)}.locale{display:grid;gap:5px;color:var(--muted);font-size:.78rem}.locale select{min-height:42px;max-width:150px;border-radius:10px;border:1px solid var(--line);background:#0b2035;color:var(--text);padding:0 10px}.main-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:20px;align-items:center;background:rgba(16,43,66,.85);border:1px solid var(--line);border-radius:24px;padding:clamp(18px,4vw,38px);box-shadow:0 24px 60px #02091380}.coming{display:inline-flex;margin:0 0 10px;border:1px solid #7f6840;border-radius:999px;padding:6px 11px;color:var(--accent);font-size:.75rem;font-weight:800}.lede,.objective,.guide p,.stage-help,.battle-status,.control-hint,.result-copy{color:var(--muted);line-height:1.6}.lede{font-size:1.05rem;margin:0 0 18px}.objective{border-left:3px solid var(--accent);background:#ffd27712;border-radius:10px;padding:12px 14px;margin:0 0 16px}.poster{position:relative;aspect-ratio:1;min-height:0;border:1px solid #4f7890;border-radius:22px;overflow:hidden;background:linear-gradient(165deg,#385b72,#071628 72%);box-shadow:inset 0 0 0 1px #ffffff12}.main-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.42}.poster:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 72% 25%,#78e2dc 0 3px,transparent 4px),radial-gradient(circle at 46% 68%,#ffd277 0 2px,transparent 3px);opacity:.8}.lane{position:absolute;left:8%;right:8%;height:48px;border:4px solid #7aa6b5;border-radius:30px;transform:skewY(-8deg);background:#17374a;box-shadow:0 0 20px #78e2dc33}.lane-one{top:28%}.lane-two{top:58%;transform:skewY(8deg);border-color:#cc9e69}.animal{position:absolute;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-size:2rem;z-index:2;box-shadow:0 10px 22px #02091388}.otter{left:22%;top:35%;background:#bf7862;color:#f9c488}.goat{left:22%;top:65%;background:#e3dfd1;color:#526376;border-radius:40% 55% 35% 60%}.shard{position:absolute;color:var(--accent);font-size:2rem;text-shadow:0 0 18px #ffd277}.shard-a{left:57%;top:26%}.shard-b{left:72%;top:66%;color:var(--cyan);text-shadow:0 0 18px #78e2dc}.main-copy{display:grid;gap:12px}.primary,.secondary,.control,.restart{border:1px solid var(--line);border-radius:13px;min-height:48px;padding:10px 16px;color:var(--text);font-weight:800;background:#ffffff0b}.primary{min-height:52px;background:linear-gradient(135deg,#ffe29a,#ffb95e);border-color:#ffe4a6;color:#152438;box-shadow:0 10px 24px #ffbd5e33}.secondary:hover,.control:hover,.restart:hover,.icon-btn:hover{border-color:var(--accent)}.guide{border-top:1px solid #ffffff16;margin-top:6px;padding-top:13px}.guide h2{font-size:1rem;margin:0 0 5px}.guide p{font-size:.88rem;margin:5px 0}.section-head{border-bottom:1px solid #ffffff17}.compact{min-height:42px;padding:8px 12px}.stage-screen,.battle-screen{background:#0d2438;border:1px solid var(--line);border-radius:22px;padding:clamp(14px,3vw,24px)}.stage-help{margin:16px 0}.stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stage-card{text-align:left;min-height:150px;border:1px solid var(--line);border-radius:16px;padding:16px;background:linear-gradient(150deg,#184763,#102d45);color:var(--text);display:grid;align-content:space-between;gap:8px}.stage-card strong{font-size:1.1rem}.stage-card small{color:var(--muted);line-height:1.4}.stage-card:hover{transform:translateY(-2px);border-color:var(--accent)}.stage-card.locked{opacity:.6}.hud{display:flex;gap:12px;color:var(--accent);font-weight:800;font-size:.85rem;white-space:nowrap}.battle-status{margin:0 0 10px;min-height:26px}.canvas-wrap{width:100%;display:grid;place-items:center;background:#061321;border:1px solid #285673;border-radius:18px;padding:8px;overflow:hidden}.canvas-wrap canvas{display:block;width:min(100%,960px);height:auto;aspect-ratio:16/9;border-radius:12px;background:#07182a;touch-action:none}.touch-controls{display:grid;grid-template-columns:72px minmax(150px,1fr) 72px;gap:10px;align-items:center;margin:12px auto 0;width:min(100%,560px)}.control{min-height:52px}.jump{background:linear-gradient(135deg,#78e2dc,#38a9bc);color:#06202b;border-color:#a4fff3}.control-hint{text-align:center;margin:9px 0 4px;font-size:.82rem}.restart{display:block;margin:0 auto;min-height:42px}.result-screen{display:grid;place-items:center}.result-card{width:min(100%,650px);background:#102b42;border:1px solid var(--line);border-radius:22px;padding:clamp(22px,5vw,46px);box-shadow:0 20px 50px #02091380}.result-card h2{font-size:clamp(1.8rem,5vw,3rem);margin:5px 0 8px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.stats span{display:grid;gap:5px;border:1px solid #ffffff16;border-radius:12px;padding:12px;color:var(--muted);font-size:.8rem}.stats strong{font-size:1.25rem;color:var(--text)}.result-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-actions button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:720px){.shell{padding:10px}.screen{min-height:calc(100dvh - 20px)}.topbar{gap:9px}.topbar h1{font-size:1.35rem}.locale select{max-width:120px}.main-grid{grid-template-columns:1fr;padding:16px;gap:16px}.poster{min-height:0}.stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-card{min-height:128px;padding:12px}.hud{font-size:.72rem;gap:6px}.battle-head{gap:8px}.battle-head h2{font-size:1.1rem}.touch-controls{grid-template-columns:64px minmax(120px,1fr) 64px}.result-actions{grid-template-columns:1fr}.stats{gap:6px}.stats span{padding:9px 8px}}@media(max-height:520px) and (orientation:landscape){.shell{padding:6px}.battle-screen{padding:9px}.battle-status,.control-hint{display:none}.canvas-wrap{padding:4px}.touch-controls{margin:5px auto;grid-template-columns:60px minmax(140px,280px) 60px}.restart{min-height:36px}.canvas-wrap canvas{max-height:calc(100dvh - 108px);width:auto;max-width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.stage-card:hover{transform:none}}
:root{--twin-cover:url("cover-v2.webp")}.poster{background-image:var(--twin-cover),linear-gradient(165deg,#385b72,#071628 72%);background-size:cover,auto;background-position:center,center;background-blend-mode:screen,normal}.main-poster{position:static!important;inset:auto!important}.twin-poster>span{display:none}
:root{--twin-cover:url("cover-v2.webp")}.poster{background-image:var(--twin-cover),linear-gradient(165deg,#385b72,#071628 72%);background-size:cover,auto;background-position:center,center;background-blend-mode:screen,normal}.main-poster{position:static!important;inset:auto!important}.main-howto{border-top:1px solid #ffffff16;margin-top:6px;padding-top:13px}.main-howto h2{font-size:1rem;margin:0 0 5px}.main-howto p{font-size:.88rem;margin:5px 0;color:var(--muted);line-height:1.6}.twin-poster>span{display:none}

/* Keep Stage and Battle as full logical surfaces. The shared shell supplies
   the responsive envelope; these tracks keep the authored controls and play
   surface inside it instead of leaving a large unowned lower gap. */
.stage-screen{position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden;background-image:linear-gradient(180deg,rgba(7,22,38,.42),rgba(7,22,38,.9)),url("cover-v2.webp");background-size:cover;background-position:center}.stage-screen .stage-help{margin:0;flex:0 0 auto}.stage-screen .stage-grid{flex:1 1 auto;min-height:190px;align-items:center}.stage-screen .stage-tabs{position:absolute;left:0;right:0;bottom:0;height:56px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;border-top:1px solid #ffffff24;background:rgba(7,22,38,.96);z-index:5}.stage-screen .stage-tabs button{grid-column:2;border:0;border-radius:0;background:transparent;color:var(--text);font-weight:900}.stage-screen .stage-tabs button[aria-current="page"]{color:var(--accent);box-shadow:inset 0 -3px var(--accent)}.stage-screen{padding-bottom:72px!important}
.battle-screen{display:flex;flex-direction:column;gap:8px;min-height:0;height:100%;overflow:hidden;background:#071b2c}.battle-screen .canvas-wrap{flex:1 1 auto;min-height:0;align-items:center}.battle-screen .canvas-wrap canvas{width:min(100%,960px);height:auto;max-height:100%;object-fit:contain}.battle-screen .touch-controls{flex:0 0 auto}.battle-screen .control-hint{flex:0 0 auto}.battle-screen>#restartBtn{flex:0 0 auto}
@media(max-width:560px){.stage-screen{padding-inline:10px!important}.stage-screen .stage-grid{min-height:190px}.battle-screen{padding:10px!important}.battle-screen .canvas-wrap{padding:6px}.battle-screen .battle-head{padding-bottom:12px}}

/* The shared shell moves the Stage title into the header grid and retires the
   game's old sound button. Keep one title track so the title never sits under
   a second control on a phone. */
.stage-header{grid-template-columns:48px minmax(0,1fr) 48px!important;min-width:0!important}
.stage-header>#stageSoundBtn,.stage-header>.wp-shell-legacy-control{display:none!important}
.stage-header>#stageTitle{grid-column:2!important;grid-row:1!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:center!important;line-height:1.2!important}
.stage-header>.wp-shell-settings{grid-column:3!important;grid-row:1!important}

/* The game keeps a small eyebrow node for the shared shell, but Stage owns a
   single readable title line. Hiding that duplicate eyebrow prevents the
   long owner-preview label from colliding with the localized Stage title. */
.stage-header>div{display:grid!important;min-width:0!important;gap:2px!important;overflow:hidden!important;text-align:center!important}
.stage-header>div>#stageEyebrow{display:none!important}
.stage-header>div>#stageTitle{display:block!important;min-width:0!important;margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font:800 22px/1.2 system-ui,sans-serif!important;text-align:center!important}

/* Keep long localized objective copy in its own bounded row. The shared
   selector fixes the card envelope; these rows stop CJK copy from painting
   over the card marker or the selected outline on narrow phones. */
.stage-card{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:10px!important;overflow:hidden!important;line-height:1.25!important}
.stage-card>strong{display:block!important;flex:0 0 auto!important;line-height:1.2!important;white-space:nowrap!important}
.stage-card>small{display:-webkit-box!important;flex:0 0 auto!important;min-height:3.9em!important;overflow:hidden!important;line-height:1.3!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important}
.stage-card>span{display:block!important;flex:0 0 auto!important;margin-top:auto!important;line-height:1!important}

/* A selected Stage is persistent state, not just a transient pointer hover. */
.stage-card.selected,.stage-card[aria-current="true"]{border:2px solid #ffe8a9!important;outline:3px solid var(--accent)!important;outline-offset:-3px!important;box-shadow:0 0 0 3px var(--accent),0 0 24px #ffd27788,inset 0 0 0 1px #fff8!important;background:linear-gradient(150deg,#245a78,#163b58)!important;transform:translateY(-1px)}
.stage-card.selected:hover,.stage-card[aria-current="true"]:hover{border-color:#fff!important;outline-color:#fff!important;box-shadow:0 0 0 3px #ffe8a9,0 0 28px #ffd277aa,inset 0 0 0 1px #fff!important}
.stage-card.selected:focus-visible,.stage-card[aria-current="true"]:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media(max-width:699px){.stage-header>div>#stageTitle{font-size:20px!important}}