/* View-only tutorial and out-of-arena score presentation. */
#game-guide .dialog-top{gap:12px;align-items:center}
#game-guide .guide-close{min-height:44px;min-width:60px;border:1px solid #35515e;border-radius:5px;font-size:12px;padding:8px}
#guide-counter{font-size:11px;line-height:1.5;color:#c5dcdf}
#growth-demonstration{margin:12px 0 18px}
#growth-demonstration[hidden]{display:none}
.gt-diagram{background:#08131d;border:1px solid #35515e;border-radius:8px;overflow:hidden}
.gt-diagram svg{display:block;width:100%;max-height:240px;margin:auto;overflow:visible}
.gt-diagram text{fill:#d5e9eb;text-anchor:middle;font:12px system-ui,sans-serif;font-weight:600;letter-spacing:.1px}
.gt-well{fill:#10232c;stroke:#8deee4;stroke-width:2}.gt-well-dot{fill:#8deee4}
.gt-core{fill:#fff;stroke:#77eee1;stroke-width:2}.gt-orbit{fill:none;stroke:#68969c;stroke-width:1.5;stroke-dasharray:4 5}
.gt-arrow,.gt-leader{fill:none;stroke:#bad5dd;stroke-width:2}.gt-leader{stroke-width:1}
.gt-food circle{fill:#183d37;stroke:#9deac9;stroke-width:2}.gt-food path{fill:none;stroke:#c6ffe6;stroke-width:2}
.gt-danger path{fill:#492c2e;stroke:#ffb2a3;stroke-width:2}.gt-danger text{fill:#ffd9cd;font-size:17px;font-weight:750}
.gt-target{fill:none;stroke:#b7d7ed;stroke-width:2;stroke-dasharray:3 2}
.gt-frame{fill:#0a1721;stroke:#48717b}.gt-grid{fill:none;stroke:#26434f;stroke-width:1}
#game-guide .gt-caption{margin:10px 0;font-size:13px;line-height:1.5;color:#c4d8dd}
.gt-demo-controls{display:flex;align-items:center;gap:12px}
.gt-motion{min-width:135px;min-height:44px;padding:8px 12px;border:1px solid #507580;border-radius:5px;font-size:12px}
.gt-motion:disabled{color:#bacbd0;cursor:default}.gt-demo-note{font-size:11px;line-height:1.5;color:#a7bec7}
#growth-demonstration .gt-rotating{animation:gt-orbit 6s linear infinite}
#growth-demonstration .gt-steer{animation:gt-steer 6s ease-in-out infinite}
#growth-demonstration .gt-food-to-well{animation:gt-absorb-well 5s ease-in-out infinite}
#growth-demonstration .gt-food-to-core{animation:gt-absorb-core 5s ease-in-out infinite}
#growth-demonstration .gt-pulled{animation:gt-pull 6s ease-in-out infinite}
#growth-demonstration .gt-world-reveal{animation:gt-reveal 5s ease-in-out infinite}
#growth-demonstration[data-playing="false"] *{animation:none!important}
@keyframes gt-orbit{to{transform:rotate(360deg)}}
@keyframes gt-steer{0%,15%,100%{transform:translateX(0)}60%,80%{transform:translateX(40px)}}
@keyframes gt-absorb-well{0%,15%,100%{transform:translateX(0);opacity:1}65%,85%{transform:translateX(53px);opacity:0}}
@keyframes gt-absorb-core{0%,15%,100%{transform:translateX(0);opacity:1}65%,85%{transform:translateX(-37px);opacity:0}}
@keyframes gt-pull{0%,15%,100%{transform:translateX(0)}60%,80%{transform:translateX(30px)}}
@keyframes gt-reveal{0%,100%{opacity:.35}35%,80%{opacity:1}}
@media(prefers-reduced-motion:reduce){#growth-demonstration *{animation:none!important}}
@media(max-height:500px) and (orientation:landscape){#game-guide{max-width:700px;padding:16px;max-height:94dvh}.gt-diagram svg{max-height:156px}#game-guide h2{font-size:23px}#game-guide #guide-body{margin-bottom:12px}.gt-demo-controls{gap:8px}}
#game-hud.hud{position:static;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%;max-width:560px;min-height:48px;margin:0 auto 8px;padding:6px 12px;border:1px solid #35515e;border-radius:5px;background:#0b1721;pointer-events:auto;flex-shrink:0}
#game-hud[hidden]{display:none!important}
#game-hud strong{font-size:22px;line-height:1.05;white-space:nowrap;overflow-wrap:normal;letter-spacing:0;font-variant-numeric:tabular-nums}
#game-hud span{font-size:9px;line-height:1.3;letter-spacing:.8px}#game-hud .combo-values{flex-wrap:wrap}#game-hud .combo-decay{width:min(136px,100%)}
#game-section.fullscreen-active #game-hud{margin:0}
#game-section.fullscreen-active:has(#game-hud:not([hidden])) .play-stage>.arena{width:min(calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((var(--view-height) - 164px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*480/680))}
@media(max-width:620px){.game-column:has(#game-hud:not([hidden])) .play-stage>.arena{width:min(100%,calc(max(120px,100svh - 253px)*480/680))}}
@media(orientation:landscape) and (max-height:600px){#game-hud.hud{min-height:40px;padding:4px 10px;margin-bottom:4px}#game-hud strong{font-size:18px}.game-column:has(#game-hud:not([hidden])) .play-stage>.arena{width:min(100%,calc(max(120px,100svh - 218px)*480/680))}}

/* Static Growth legend participates in layout, never overlays the canvas. */
#growth-legend{position:static;flex-shrink:0;max-width:560px;margin:0 auto 6px;padding:0 8px;text-align:center;font-size:10px;line-height:1.25;color:#c5dcdf;letter-spacing:.4px}
#growth-legend[hidden]{display:none!important}
@media(orientation:landscape) and (max-height:600px){#growth-legend{margin-bottom:2px;font-size:9px}#game-hud.hud{margin-bottom:2px;padding-top:2px;padding-bottom:2px}}

/* Side rail is structural only; world/canvas remain the same 480:680 ratio. */
.play-rail{display:contents}
#game-section #game-status{position:static;inset:auto;width:100%;max-width:560px;margin:0 auto 6px;padding:0 8px;grid-template-columns:auto minmax(0,1fr) auto;font-size:10px;line-height:1.4;gap:8px}
#game-status[hidden]{display:none!important}
/* The outside status row needs its own height in narrow portrait play. */
@media(max-width:620px) and (orientation:portrait){#game-section:has(#game-hud:not([hidden])) #play-stage>#arena{width:min(calc(100% - 2px),calc(max(120px,100svh - 279px)*480/680))}}
#game-section.fullscreen-active:has(#game-hud:not([hidden])) #play-stage>#arena{width:min(calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((var(--view-height) - 236px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*480/680))}
@media(orientation:landscape) and (max-height:600px){
  .shell>.topbar{height:44px}
  .shell>main{padding-top:8px;padding-bottom:16px}
  #game-section{--rail-height:calc(100svh - 68px);display:grid;grid-template-columns:minmax(156px,min(32vw,240px)) minmax(0,1fr);grid-template-rows:var(--rail-height);gap:12px;align-items:stretch;max-width:960px;margin:0 auto}
  #game-section>#play-rail{display:flex;flex-direction:column;grid-column:1;grid-row:1;min-width:0;max-height:var(--rail-height);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;gap:8px;padding:0 2px}
  #play-rail>.arena-header{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;min-height:0;padding:0;background:#070c14}
  #play-rail>.arena-header>span{font-size:10px;line-height:1.4;padding:2px 0}
  #play-rail .arena-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  #play-rail .arena-actions button{min-width:44px;min-height:44px;font-size:10px;padding:6px;letter-spacing:0}
  #play-rail .arena-actions kbd{display:none}
  #play-rail>#game-hud{display:grid;grid-template-columns:1fr;gap:10px;min-height:0;margin:0;padding:8px 10px;max-width:none}
  #play-rail #game-hud strong{font-size:22px}
  #play-rail #game-hud .hud-right{text-align:left}
  #play-rail #game-hud .combo-values{justify-content:flex-start;gap:4px}
  #play-rail #game-hud .combo-decay{margin-left:0}
  #play-rail #combo-timer{font-size:11px;white-space:normal;line-height:1.3}
  #play-rail>#growth-legend{margin:0;padding:0;font-size:11px;line-height:1.5;text-align:left;letter-spacing:0}
  #game-section #game-status{grid-template-columns:1fr;margin:0;padding:0;font-size:11px;line-height:1.5;gap:3px;max-width:none}
  #game-section #game-status>span{text-align:left;max-width:none}
  #play-rail>#fullscreen-note{margin:0;text-align:left;font-size:10px;line-height:1.4}
  #game-section>#play-stage{grid-column:2;grid-row:1;align-self:stretch;height:var(--rail-height);max-height:none;width:100%;min-height:0}
  #game-section #play-stage>#arena,#game-section.fullscreen-active #play-stage>#arena,#game-section.fullscreen-active:has(#game-hud:not([hidden])) #play-stage>#arena{width:min(calc(100% - 2px),calc((var(--rail-height) - 2px)*480/680));height:auto;min-height:0;max-height:none;aspect-ratio:480/680;margin:0}
  #game-section>#play-stage>.overlay{inset:0;max-height:100%;padding:12px}
  #game-section>.challenge,#game-section>.challenge-track,#game-section>.goal-details{grid-column:1/-1;grid-row:auto}
  #game-section.fullscreen-active{--rail-height:calc(var(--view-height) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));display:grid;grid-template-columns:minmax(156px,min(32vw,240px)) minmax(0,1fr);grid-template-rows:var(--rail-height);justify-content:normal;align-items:stretch;gap:12px;width:100%;max-width:none;height:var(--view-height);padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
}


/* Fit expanded portrait to the real remaining stage, including wrapped status. */
@supports(width:1cqh){
  #game-section.fullscreen-active #play-stage{container-type:size}
  #game-section.fullscreen-active:has(#game-hud:not([hidden])) #play-stage>#arena{width:min(calc(100cqw - 2px),calc((100cqh - 2px)*480/680));height:auto;aspect-ratio:480/680}
}