/* App shell (spec 2026-10-11-app-shell). Palette: navy #0d2340 · amber #f2b134 · white.
   Every .sh-screen starts display:none; js/shell.js shows/hides them with an opacity fade (.sh-vis). */
:root { --navy: #0d2340; --navy2: #16335a; --amber: #f2b134; --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }

.sh-screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; padding: calc(24px + var(--sat)) calc(20px + var(--sar)) calc(24px + var(--sab)) calc(20px + var(--sal));
  color: #fff; text-align: center; opacity: 0; transition: opacity 0.4s ease; -webkit-tap-highlight-color: transparent; }
.sh-screen.sh-vis { opacity: 1; }
.sh-screen button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#sh-bar, #sh-exit, #sh-lost { display: none; }

/* ---------- 1. splash (white, like the Unity splash) ---------- */
#sh-splash { z-index: 70; background: #fff; color: #23301f; gap: 18px; transition-duration: 0.3s; }
#sh-splash:not(.sh-vis) { transition-duration: 0.4s; }
#sh-splash .sh-stories { width: min(62vw, 300px); height: auto; }
#sh-splash .sh-hcp { width: min(34vw, 150px); height: auto; }
.sh-vatts { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; letter-spacing: 0.04em; color: #3c4650; }
.sh-vatts img { width: auto; height: 60px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); } /* VATTS card logo is 4:3 (J 10-12 21:26), never crop it to a circle */

/* ---------- 2. menu ---------- */
#sh-menu, #sh-exp { z-index: 60; background: radial-gradient(120% 80% at 50% 0%, #1b3c66 0%, var(--navy) 60%); gap: 44px; }
.sh-menu-head { margin-top: -4vh; }
.sh-kicker { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.sh-menuscreen h1 { margin: 8px 0 10px; font-size: clamp(30px, 9vw, 44px); line-height: 1.1; font-family: Georgia, "Times New Roman", serif; font-weight: 600; text-wrap: balance; }
.sh-menuscreen .sh-menu-head p { margin: 0; font-size: 16px; opacity: 0.8; }
.sh-choices { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 440px; }
.sh-choice { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 96px; padding: 18px 18px; box-sizing: border-box;
  border: 2px solid rgba(242,177,52,0.55); border-radius: 18px; background: rgba(255,255,255,0.07); color: #fff; text-align: left; }
.sh-choice:first-child { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.sh-choice:active { transform: scale(0.98); }
.sh-choice svg { flex: 0 0 40px; width: 40px; height: 40px; }
.sh-choice b { display: block; font-size: 19px; margin-bottom: 4px; }
.sh-choice small { display: block; font-size: 14px; line-height: 1.35; opacity: 0.85; }
.sh-foot { position: absolute; left: 16px; right: 16px; bottom: calc(14px + var(--sab)); margin: 0 auto; font-size: 11px; color: rgba(255,255,255,0.6); max-width: 360px; }
.sh-foot a { color: inherit; }
/* experience → view step (Crossing Game, spec 2026-10-12-crossing-game §1) */
#sh-exp { z-index: 61; }
/* iter4 §3: real Back button (menu + both tutorials) — round like #sh-exp, pill with a label on ≥ 360 px screens */
.sh-round.sh-backbtn { position: absolute; z-index: 3; top: calc(8px + var(--sat)); left: calc(8px + var(--sal)); gap: 4px;
  background: rgba(5,12,24,0.6); border: 1.5px solid rgba(255,255,255,0.35) !important; font-size: 16px !important; font-weight: 600; }
.sh-backbtn .sh-backlbl { display: none; }
.sh-backbtn:active { transform: scale(0.96); }
@media (min-width: 360px) {
  .sh-round.sh-backbtn { width: auto; padding: 0 16px 0 8px; border-radius: 24px; }
  .sh-backbtn .sh-backlbl { display: inline; }
}
/* iter4 §2: Normal / Hard (Game menu only) */
.sh-diff { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 440px; margin: -20px 0 -16px; }
.sh-diff[hidden] { display: none; }
.sh-diff-label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; font-weight: 600; }
.sh-seg { display: flex; padding: 3px; border-radius: 26px; border: 1.5px solid rgba(242,177,52,0.55); background: rgba(255,255,255,0.06); }
.sh-seg button { min-width: 112px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: transparent; color: #fff;
  font-size: 17px !important; font-weight: 600; }
.sh-seg button[aria-checked="true"] { background: var(--amber); color: var(--navy); }
.sh-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sh-diff-hint { font-size: 13px; opacity: 0.7; }
/* iter4 §4: HCP credit under the main-menu title */
.sh-credits { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; }
.sh-hcplink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 12px 2px 4px; border-radius: 22px;
  color: #fff; text-decoration: underline; text-decoration-color: rgba(242,177,52,0.7); text-underline-offset: 3px; }
.sh-hcplink img { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; }
.sh-hcplink span { max-width: 250px; text-align: left; }
.sh-hcplink:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sh-byvatts { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.75; }
.sh-byvatts img { width: auto; height: 44px; border-radius: 5px; }
.sh-choice.sh-unavail, .sh-choice.sh-unavail:first-child { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.62);
  border: 2px dashed rgba(255,255,255,0.28); cursor: not-allowed; }
.sh-choice.sh-unavail:active { transform: none; }
.sh-choice.sh-unavail + .sh-choice { background: var(--amber); color: var(--navy); border-color: var(--amber); }
@media (max-height: 520px) and (orientation: landscape) {
  .sh-menuscreen { gap: 18px; padding-top: calc(10px + var(--sat)); padding-bottom: calc(10px + var(--sab)); }
  .sh-menuscreen .sh-menu-head { margin-top: 0; }
  .sh-menuscreen h1 { margin: 2px 0 4px; font-size: 28px; }
  .sh-menuscreen .sh-choices { flex-direction: row; max-width: 760px; }
  .sh-menuscreen .sh-choice { min-height: 84px; }
  .sh-menuscreen .sh-foot { display: none; }
  .sh-menuscreen .sh-menu-head p { font-size: 14px; }
  .sh-diff { flex-direction: row; gap: 12px; margin: -6px 0 -8px; }
  .sh-seg button { min-height: 44px; min-width: 96px; }
  .sh-credits { flex-direction: row; gap: 14px; margin-top: 4px; }
  .sh-hcplink img { width: 32px; height: 32px; }
}

.sh-ic-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shared buttons ---------- */
.sh-primary { min-height: 52px; min-width: 160px; padding: 12px 32px; border: 0; border-radius: 28px;
  background: var(--amber); color: var(--navy); font-size: 18px !important; font-weight: 700; }
.sh-link { min-height: 44px; padding: 10px 14px; border: 0; background: none; color: #fff; font-size: 15px !important; text-decoration: underline; opacity: 0.9; }

/* ---------- 3. tutorial ---------- */
#sh-tut, #sh-gtut { z-index: 55; background: var(--navy); justify-content: space-between; touch-action: pan-y; user-select: none; }
#sh-tut-skip, #sh-gtut-skip { position: absolute; z-index: 2; top: calc(8px + var(--sat)); right: calc(8px + var(--sar)); }
.sh-cards { position: relative; flex: 1; width: 100%; max-width: 420px; }
.sh-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; opacity: 0; pointer-events: none; }
.sh-card.sh-cur { opacity: 1; pointer-events: auto; }
.sh-card h2 { margin: 18px 0 0; font-size: 24px; line-height: 1.25; max-width: 320px; }
.sh-card p { margin: 0; font-size: 16px; line-height: 1.4; max-width: 320px; opacity: 0.85; }
.sh-card p.sh-hint { font-size: 13px; opacity: 0.55; }
.sh-card .sh-primary { margin-top: 22px; }
.sh-ill { width: min(52vw, 220px); height: auto; }
.sh-ph { fill: none; stroke: #fff; stroke-width: 2.5; }
.sh-scr { fill: rgba(255,255,255,0.08); }
.sh-dot { fill: var(--amber); stroke: #fff; stroke-width: 1.5; }
.sh-trail { fill: none; stroke: rgba(242,177,52,0.45); stroke-width: 2; stroke-dasharray: 3 4; }
.sh-ill-pinch .sh-d1 { animation: sh-pinch1 2s ease-in-out infinite; }
.sh-ill-pinch .sh-d2 { animation: sh-pinch2 2s ease-in-out infinite; }
@keyframes sh-pinch1 { 0%, 15% { transform: translate(-4px, 4px) } 60%, 100% { transform: translate(-18px, 18px) } }
@keyframes sh-pinch2 { 0%, 15% { transform: translate(4px, -4px) } 60%, 100% { transform: translate(18px, -18px) } }
.sh-ill-orbit .sh-d1 { animation: sh-orbit 2.2s ease-in-out infinite alternate; }
@keyframes sh-orbit { 0% { transform: translate(-18px, 10px) } 50% { transform: translate(0, -2px) } 100% { transform: translate(18px, 10px) } }
.sh-ill-pan .sh-dot { animation: sh-pan 2.2s ease-in-out infinite alternate; }
@keyframes sh-pan { 0% { transform: translate(-6px, 22px) } 100% { transform: translate(6px, -22px) } }
.sh-minibar { fill: rgba(0,0,0,0.55); }
.sh-minifill { fill: var(--amber); }
.sh-miniic { fill: #fff; }
.sh-minicap { fill: rgba(255,255,255,0.35); }
.sh-tut-nav { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.sh-dots { display: flex; gap: 10px; }
.sh-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: background 0.2s, transform 0.2s; }
.sh-dots i.sh-on { background: var(--amber); transform: scale(1.25); }

/* ---------- 4. loading ---------- */
#sh-loading { z-index: 50; background: var(--navy); gap: 20px; }
#sh-load-logo { width: min(40vw, 170px); height: auto; }
.sh-progress { width: min(64vw, 260px); height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); overflow: hidden; margin-top: 8px; }
#sh-load-fill { height: 100%; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.25s ease-out; }
.sh-pulse { display: flex; gap: 8px; }
.sh-pulse i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: sh-pulse 1.2s ease-in-out infinite; }
.sh-pulse i:nth-child(2) { animation-delay: 0.2s; }
.sh-pulse i:nth-child(3) { animation-delay: 0.4s; }
@keyframes sh-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8) } 50% { opacity: 1; transform: scale(1.1) } }
#sh-load-step { font-size: 13px; opacity: 0.75; min-height: 1.3em; }

/* ---------- 5. AR scan prompt ---------- */
#sh-scan { z-index: 40; background: rgba(13,35,64,0.45); pointer-events: none; }
.sh-scan-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 18px;
  border-radius: 22px; background: rgba(13,35,64,0.72); max-width: 340px; }
.sh-scan-frame { padding: 6px; border: 3px solid var(--amber); border-radius: 18px; animation: sh-breathe 2.4s ease-in-out infinite; }
.sh-scan-frame img { display: block; width: min(64vw, 260px); height: auto; border-radius: 12px; }
@keyframes sh-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242,177,52,0.0) } 50% { transform: scale(1.03); box-shadow: 0 0 24px 4px rgba(242,177,52,0.45) } }
.sh-scan-card h2 { margin: 10px 0 0; font-size: 21px; }
.sh-scan-card p { margin: 0; font-size: 15px; opacity: 0.85; }
.sh-pill { position: fixed; left: 50%; top: calc(60px + var(--sat)); transform: translateX(-50%); z-index: 41; align-items: center;
  padding: 8px 16px; border-radius: 20px; background: rgba(13,35,64,0.85); border: 1.5px solid var(--amber); color: #fff;
  font-size: 14px; pointer-events: none; white-space: nowrap; }

/* ---------- error (on top of everything) ---------- */
#sh-error { z-index: 90; background: var(--navy); gap: 12px; }
#sh-error h2 { margin: 0; font-size: 22px; color: var(--amber); }
#sh-error p { margin: 0; max-width: 340px; font-size: 16px; line-height: 1.4; }
#sh-error #err { font-size: 13px; opacity: 0.7; color: #ffd0d0; }
#sh-error .sh-primary { margin-top: 12px; }

/* ---------- 6. playback bar + exit ---------- */
.sh-round { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.sh-round svg { width: 26px; height: 26px; }
.sh-round:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#sh-exit { position: fixed; z-index: 46; top: calc(8px + var(--sat)); left: calc(8px + var(--sal)); background: rgba(5,12,24,0.6);
  transition: opacity 0.3s; }
#sh-bar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  padding: 18px calc(10px + var(--sar)) calc(6px + var(--sab)) calc(10px + var(--sal)); color: #fff;
  background: linear-gradient(to top, rgba(5,12,24,0.88) 0%, rgba(5,12,24,0.78) 70%, rgba(5,12,24,0) 100%);
  transition: transform 0.35s ease, opacity 0.4s; }
#sh-bar::before { content: ''; position: absolute; left: 50%; top: 4px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px;
  background: rgba(255,255,255,0.45); opacity: 0; transition: opacity 0.3s; }
body.sh-barhidden #sh-bar { transform: translateY(calc(100% - 10px)); }
body.sh-barhidden #sh-bar::before { opacity: 1; }
body.sh-barhidden #sh-exit { opacity: 0; pointer-events: none; }
/* iter3 §5: Story 3D view (orbit camera) only — never in AR (no sh-nocam) or the game (g-game) */
#sh-resetview { display: none; position: fixed; z-index: 46; top: calc(8px + var(--sat)); right: calc(8px + var(--sar));
  background: rgba(5,12,24,0.6); transition: opacity 0.3s; }
body.sh-nocam.sh-playing:not(.g-game) #sh-resetview { display: flex; }
body.sh-barhidden #sh-resetview { opacity: 0; pointer-events: none; }
.sh-row { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; }
.sh-btns { gap: 4px; }
.sh-grow { flex: 1; }
#sh-time { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 78px; text-align: right; opacity: 0.9; }
#sh-play .sh-i-play, #sh-play.sh-paused .sh-i-pause { display: none; }
#sh-play.sh-paused .sh-i-play { display: inline; }
#sh-play path { fill: #fff; }
#sh-play { background: rgba(255,255,255,0.12); }
.sh-cc-box { fill: #fff; stroke: #fff; stroke-width: 1.8; }
.sh-cc-c { fill: none; stroke: #0b1726; stroke-width: 2; stroke-linecap: round; }
.sh-slash { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; display: none; }
#sh-cc.sh-off .sh-cc-box { fill: none; }
#sh-cc.sh-off .sh-cc-c { stroke: #fff; }
#sh-cc.sh-off .sh-slash { display: inline; }
.sh-spk { fill: #fff; }
.sh-waves { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.sh-x { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; display: none; }
#sh-mute.sh-off .sh-waves { display: none; }
#sh-mute.sh-off .sh-x { display: inline; }
.sh-credit { text-align: right; font-size: 10px; color: rgba(255,255,255,0.55); max-width: 760px; margin: 0 auto; }
.sh-credit a { color: inherit; }

/* scrub: 44 px tall touch target, thin amber-filled track, 22 px thumb */
#sh-scrub { --fill: 0%; flex: 1; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: none; }
#sh-scrub::-webkit-slider-runnable-track { height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--amber) var(--fill), rgba(255,255,255,0.3) var(--fill)); }
#sh-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8.5px; border-radius: 50%;
  background: #fff; border: 3px solid var(--amber); box-sizing: border-box; }
#sh-scrub::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.3); }
#sh-scrub::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--amber); }
#sh-scrub::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); box-sizing: border-box; }

/* ---------- existing app elements, restyled only in shell mode (autoplay/probes keep today's look) ---------- */
body.shell #status { left: 64px; right: 64px; top: calc(12px + var(--sat)); margin: 0 auto; width: fit-content; max-width: calc(100% - 128px);
  padding: 6px 12px; border-radius: 16px; font-size: 13px; z-index: 45; }
body.shell.sh-nocam #status { display: none; }
body.shell #credit, body.shell #replay { display: none !important; }
body.shell #audiobtn { bottom: auto; top: 42%; z-index: 37; font-size: 18px; padding: 14px 28px; border-radius: 28px; }
body.shell #caption { left: 12px; right: 12px; transform: none; margin: 0 auto; width: fit-content; }
body.shell.sh-playing #caption { bottom: calc(132px + var(--sab)); transition: bottom 0.35s ease; }
body.shell.sh-playing.sh-barhidden #caption { bottom: calc(22px + var(--sab)); }
body.cc-off #caption, body.shell:not(.sh-playing) #caption { display: none !important; } /* no captions under scan/loading */
body.shell #debug { top: calc(64px + var(--sat)); z-index: 36; }

@media (min-width: 700px) {
  .sh-choices { max-width: 480px; }
  #sh-splash .sh-stories { width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-screen, .sh-card, #sh-bar, #sh-exit, #sh-resetview, #caption { transition: none !important; }
  .sh-dot, .sh-scan-frame, .sh-pulse i { animation: none !important; }
}

/* ---------- Crossing Game (js/game/game.js) ---------- */
body.g-game #camerafeed { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#g-orientation { box-sizing: border-box; width: min(88vw, 360px); max-height: 88dvh; overflow: auto;
  padding: 24px; border: 2px solid var(--amber); border-radius: 22px; background: var(--navy); color: #fff;
  text-align: center; font-family: system-ui, sans-serif; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
#g-orientation::backdrop { background: rgba(5,12,24,0.7); }
#g-orientation h2 { margin: 8px 0 12px; font-size: 23px; }
#g-orientation p { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
#g-orientation button { display: block; width: 100%; margin-top: 10px; }
.g-orientation-icon { font-size: 48px; color: var(--amber); line-height: 1; }
#g-hud, #g-banner, #g-results { display: none; }
body.g-playing #g-hud { display: block; }
#g-hud { position: fixed; z-index: 44; top: calc(8px + var(--sat)); left: 0; right: 0; height: 0; pointer-events: none; }
.g-pill { padding: 8px 16px; border-radius: 20px; background: rgba(13,35,64,0.86); border: 1.5px solid var(--amber); color: #fff;
  font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; }
#g-tally { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
#g-tally.g-bump { animation: g-bump 0.35s cubic-bezier(.2,.9,.3,1.4); }
@keyframes g-bump { 0% { transform: translateX(-50%) scale(1) } 45% { transform: translateX(-50%) scale(1.16) } 100% { transform: translateX(-50%) scale(1) } }
#g-mute { position: absolute; top: 0; right: calc(8px + var(--sar)); background: rgba(5,12,24,0.6); pointer-events: auto; }
#g-mute.sh-off .sh-waves { display: none; }
#g-mute.sh-off .sh-x { display: inline; }
#g-preset { position: absolute; top: 52px; right: calc(10px + var(--sar)); font: 600 11px system-ui, sans-serif; letter-spacing: 0.08em;
  color: var(--navy); background: #ff9c66; padding: 3px 8px; border-radius: 10px; }
#g-banner { position: fixed; z-index: 43; left: 50%; top: calc(60px + var(--sat)); transform: translate(-50%, -6px); opacity: 0;
  transition: opacity 0.3s, transform 0.3s; pointer-events: none; white-space: normal; text-align: center;
  max-width: min(86vw, 460px); font-weight: 500; font-size: 15px; }
#g-banner.g-on { opacity: 1; transform: translate(-50%, 0); }
#g-banner.g-warn { border-color: #ff8a5c; }
body.g-playing #g-banner { display: block; }
#g-results { z-index: 58; background: rgba(5,12,24,0.55); }
.g-res-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px 24px; border-radius: 24px;
  background: var(--navy); border: 2px solid var(--amber); max-width: 380px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.g-res-card h2 { margin: 0; font-size: 26px; line-height: 1.2; font-family: Georgia, "Times New Roman", serif; }
.g-res-hist { margin: 0; font-size: 15px; line-height: 1.4; opacity: 0.85; max-width: 320px; }
.g-res-btns { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.g-res-btns .sh-primary { min-width: 130px; }
.sh-secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); }
@media (max-height: 520px) { .g-res-card { padding: 18px 20px; gap: 8px; } .g-res-card h2 { font-size: 22px; } }

/* game tutorial illustrations */
.sh-river { fill: #2b5f80; }
.sh-gboat { fill: #b88a55; stroke: #6b4a27; stroke-width: 1.5; }
.sh-gboat.sh-fixed { fill: #8e6a42; }
.sh-ghost { fill: rgba(255,255,255,0.12); stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 3; }
.sh-log { fill: #7a5634; stroke: #4a321c; stroke-width: 1; }
.sh-sol { fill: #c0392b; } .sh-solh { fill: #f1d2b6; }
.sh-ill-gdrag .sh-gmove { animation: g-tdrag 2.4s ease-in-out infinite; }
@keyframes g-tdrag { 0%, 15% { transform: translate(0, 0) } 65%, 100% { transform: translate(0, -24px) } }
.sh-ill-gmarch .sh-gsol { animation: g-tmarch 2.6s linear infinite; }
@keyframes g-tmarch { 0% { transform: translate(0, 0) } 100% { transform: translate(-92px, 0) } }
.sh-ill-glog .sh-glogm { animation: g-tlog 2.6s ease-in infinite; }
@keyframes g-tlog { 0% { transform: translate(0, 0) } 45% { transform: translate(0, 26px) } 100% { transform: translate(0, 52px); opacity: 0 } }
.sh-ill-glog .sh-gshove { animation: g-tshove 2.6s ease-out infinite; }
@keyframes g-tshove { 0%, 42% { transform: translate(0, 0) } 60%, 100% { transform: translate(0, 18px) } }
@media (prefers-reduced-motion: reduce) {
  .sh-ill-gdrag .sh-gmove, .sh-ill-gmarch .sh-gsol, .sh-ill-glog .sh-glogm, .sh-ill-glog .sh-gshove, #g-tally.g-bump { animation: none !important; }
}

/* ---------- iter5 §2: Controls help (#sh-help, #sh-helpdlg) + game resume countdown (#g-countdown) ---------- */
#sh-help { background: rgba(255,255,255,0.08); }
/* Game: the button is moved to <body> (game.js) and sits bottom-centre; hidden during results / orientation prompt. */
body > #sh-help { display: none; }
body.g-playing:not(.g-helpoff) > #sh-help { display: flex; position: fixed; z-index: 44; left: 50%; bottom: calc(12px + var(--sab));
  transform: translateX(-50%); background: rgba(5,12,24,0.6); border: 1.5px solid rgba(242,177,52,0.7); }
#sh-helpdlg { box-sizing: border-box; width: min(94vw, 880px); max-height: 92dvh; padding: 0; border: 2px solid var(--amber);
  border-radius: 22px; background: var(--navy); color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.45); overflow: hidden; }
#sh-helpdlg[open] { display: flex; }
#sh-helpdlg::backdrop { background: rgba(5,12,24,0.72); }
.sh-help-in { display: flex; flex-direction: column; align-items: center; width: 100%; max-height: 92dvh; box-sizing: border-box;
  padding: 18px 16px calc(16px + var(--sab)); }
#sh-help-title { margin: 0 0 8px; font-size: 24px; }
.sh-help-cards { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr; gap: 12px; padding: 4px 2px; -webkit-overflow-scrolling: touch; }
@media (min-width: 700px) { .sh-help-cards { grid-template-columns: 1fr 1fr; } }
.sh-card.sh-helpcard { position: static; inset: auto; opacity: 1; transform: none; pointer-events: auto; transition: none;
  gap: 6px; padding: 12px 10px 14px; border-radius: 16px; background: rgba(255,255,255,0.06); }
.sh-card.sh-helpcard .sh-ill { width: min(34vw, 130px); }
.sh-card.sh-helpcard h2 { margin: 6px 0 0; font-size: 18px; }
.sh-card.sh-helpcard p { font-size: 14px; }
#sh-help-ok { margin-top: 14px; min-width: 160px; }
#g-countdown { display: none; position: fixed; z-index: 47; left: 50%; top: 50%; width: max-content; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6); }
#g-countdown.g-cd-on { display: block; }
#g-countdown { font: 800 96px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--amber);
  -webkit-text-stroke: 3px #0d2340; paint-order: stroke fill; text-shadow: 0 4px 18px rgba(0,0,0,0.55); }
#g-countdown.g-cd-on { animation: g-cd 1s ease-in-out both; }
/* centred on the point via translate; grow 0.6 → 1.25 over 0.5 s, shrink back over 0.5 s (one cycle per number) */
@keyframes g-cd { 0% { transform: translate(-50%, -50%) scale(0.6) } 50% { transform: translate(-50%, -50%) scale(1.25) } 100% { transform: translate(-50%, -50%) scale(0.6) } }
@keyframes g-cd-fade { 0% { opacity: 0; transform: translate(-50%, -50%) } 30%, 70% { opacity: 1; transform: translate(-50%, -50%) } 100% { opacity: 0; transform: translate(-50%, -50%) } }
@media (prefers-reduced-motion: reduce) { #g-countdown.g-cd-on { animation-name: g-cd-fade; } }
/* landscape phones: compact cards (illustration beside the text) so more than one card fits without scrolling */
@media (max-height: 520px) {
  .sh-help-in { padding: 10px 14px calc(10px + var(--sab)); }
  #sh-help-title { font-size: 20px; margin-bottom: 6px; }
  .sh-card.sh-helpcard { display: grid; grid-template-columns: 84px 1fr; grid-auto-rows: min-content; column-gap: 12px; row-gap: 2px;
    align-items: center; justify-items: start; text-align: left; padding: 8px 12px; }
  .sh-card.sh-helpcard .sh-ill { width: 84px; grid-row: 1 / span 4; }
  .sh-card.sh-helpcard h2 { margin: 0; font-size: 16px; }
  .sh-card.sh-helpcard p { font-size: 13px; }
  #sh-help-ok { margin-top: 8px; }
}

/* ---------- transitions v1 (spec 2026-10-13-transitions-v1) ---------- */
/* §1 / §4 full-viewport fade overlay. Classes on <html> (js/early.js before first paint, then js/shell.js):
   sh-fade-on = opaque · sh-fade-white (splash) / sh-fade-bg (menu ↔ Story / Game: the menu navy — every screen on
   either side of that cut is navy: menu, tutorial, loading). Never intercepts a tap, even when opaque. */
#sh-fade { position: fixed; inset: 0; z-index: 100; display: none; pointer-events: none; opacity: 0; background: var(--navy);
  transition: opacity 0.5s ease; }
html.sh-fade-white #sh-fade, html.sh-fade-bg #sh-fade { display: block; } /* not in the layout until first used (autoplay: never) */
html.sh-fade-white #sh-fade { background: #fff; }
html.sh-fade-on #sh-fade { opacity: 1; }
#sh-splash.sh-now { transition: none; } /* splash appears under the white overlay; the overlay does the fading */

/* §3 managed pop transitions (shell.js show / hide / swap): out = shrink to 0 (ease-in 180 ms), then in = grow from 0
   with an overshoot and a bounce (320 ms). The screen's own opacity is 1 for the whole pop (no fade on top). */
.sh-screen.pop-in, .sh-screen.pop-out { transition: none; }
.pop-in { animation: sh-popin 0.32s ease-out both; transform-origin: center; }
.pop-out { animation: sh-popout 0.18s ease-in both; transform-origin: center; pointer-events: none; }
/* Full-screen panels whose background stays put (menus share one navy gradient): only their content pops. */
.sh-popkids.pop-in, .sh-popkids.pop-out { animation: none; }
.sh-popkids.pop-in > * { animation: sh-popin 0.32s ease-out both; transform-origin: center; }
.sh-popkids.pop-out > * { animation: sh-popout 0.18s ease-in both; transform-origin: center; }
/* dimmed-backdrop panels (results): the dim fades with the pop instead of cutting in */
#g-results.pop-in { animation: sh-dimin 0.32s ease-out both; }
#g-results.pop-out { animation: sh-dimout 0.18s ease-in both; }
#g-results.pop-in > .g-res-card { animation: sh-popin 0.32s ease-out both; }
#g-results.pop-out > .g-res-card { animation: sh-popout 0.18s ease-in both; }
@keyframes sh-popin { 0% { transform: scale(0) } 55% { transform: scale(1.06) } 78% { transform: scale(0.98) } 100% { transform: scale(1) } }
@keyframes sh-popout { 0% { transform: scale(1) } 100% { transform: scale(0) } }
@keyframes sh-dimin { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes sh-dimout { 0% { opacity: 1 } 100% { opacity: 0 } }
/* tutorial steps: the leaving card shrinks away (180 ms), then the new one pops in */
.sh-card { transform: scale(0); transition: transform 0.18s ease-in, opacity 0.18s ease-in; transform-origin: center; }
.sh-card.sh-cur { transform: none; transition: none; animation: sh-popin 0.32s ease-out 0.18s both; }
.sh-card.sh-helpcard { animation: none; }
/* dialogs (Controls help, orientation prompt): pop in on open */
dialog.pop-in { animation: sh-popin 0.32s ease-out both; }
/* AR "find the sign" pill */
#sh-lost.pop-in { animation: sh-pillin 0.32s ease-out both; }
@keyframes sh-pillin { 0% { transform: translateX(-50%) scale(0) } 55% { transform: translateX(-50%) scale(1.06) }
  78% { transform: translateX(-50%) scale(0.98) } 100% { transform: translateX(-50%) scale(1) } }

/* §2 no orphan words on button labels: balanced wrapping + a slightly smaller label so most fit one line */
.sh-choice b, .sh-choice small, .sh-primary, .sh-link, .sh-hcplink span, #g-orientation p { text-wrap: balance; }
.sh-choice { gap: 14px; padding: 16px 16px; }
.sh-choice b { font-size: 18px; }
.sh-choice small { font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  #sh-fade { transition-duration: 1ms !important; }
  .pop-in, .pop-out, .sh-popkids.pop-in > *, .sh-popkids.pop-out > *, #g-results.pop-in > .g-res-card, #g-results.pop-out > .g-res-card,
  .sh-card.sh-cur, #sh-lost.pop-in { animation-duration: 1ms !important; animation-delay: 0s !important; }
  .sh-card { transition-duration: 1ms !important; }
}