/* Story shell only. Training mechanics and screenshot geometry stay in game.js. */
body {overflow:hidden}
#story-root {position:fixed;inset:0;background:#03070e;overflow:hidden}
#story-start {position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(90deg,#020813ed,#08121aaa),url('assets/story/scene5.png') center/cover}
.start-card {max-width:690px;padding:32px 38px;background:#06101ee8;border:1px solid #355366;border-radius:12px;box-shadow:0 24px 100px #0009;text-align:center}
.start-card img {width:150px;height:auto;border-radius:8px}
.story-eyebrow {color:#ffcc91;letter-spacing:3px;font-size:12px;font-weight:bold;margin:16px 0}
.start-card h1 {color:#e5f6ff;font-size:clamp(30px,4vw,52px);line-height:1.1;letter-spacing:-1px}
.start-card p:not(.story-eyebrow) {font-size:18px;line-height:1.6;color:#c3d2df}
#start-story {font-size:21px;padding:14px 30px;margin:8px}
#preload-status {min-height:1.5em;font-size:14px!important;margin:10px 0 0}
#story-stage {position:absolute;inset:58px 18px 44px;display:grid;place-items:center}
#story-image-box {position:relative;width:100%;height:100%;display:grid;place-items:center}
.story-image {position:absolute;max-width:100%;max-height:100%;width:auto;height:auto;opacity:0;transition:opacity 250ms ease;object-fit:contain;pointer-events:none}
.story-image.active {opacity:1}
#story-root.sign-transition .story-image {transition-duration:150ms}
#story-hotspot {position:absolute;display:block;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;color:transparent;font-size:0;touch-action:manipulation}
#story-hotspot:hover {background:transparent;box-shadow:none;border:0}
#story-hotspot:focus-visible {outline:3px solid #ffcf91;outline-offset:2px;background:#ffc56714}
#story-root.debug-story #story-hotspot {outline:2px dashed #6efaff;background:#58ebff18}
#story-prompt {position:absolute;top:5%;right:5%;max-width:45%;padding:18px 26px;text-align:center;font-family:Georgia,serif;font-size:clamp(24px,3vw,44px);color:#f3f5fc;line-height:1.25;text-shadow:0 0 10px #a1b9d9,0 0 25px #385b8a;pointer-events:none;background:radial-gradient(ellipse,#152539ab,transparent 72%);border-radius:50%}
#story-prompt.reveal {animation:mist-reveal 600ms ease-out both}
#story-root[data-scene=scene6] #story-prompt {top:auto;bottom:9%;right:5%}
#story-root[data-scene=scene10] #story-prompt {top:auto;bottom:8%;right:auto;left:5%}
@keyframes mist-reveal {from{opacity:0;filter:blur(9px);transform:translateY(5px)}to{opacity:1;filter:blur(0);transform:none}}
.story-toolbar {position:absolute;inset:0 0 auto;min-height:54px;padding:9px 24px;display:flex;align-items:center;gap:12px;background:#030a12d9;z-index:5}
#story-chapter {margin-right:auto;color:#b7c8dc;font-size:14px;letter-spacing:.4px}
.story-toolbar button {font-size:15px;padding:8px 16px}
#story-audio-message {position:absolute;bottom:50px;left:50%;transform:translateX(-50%);max-width:90%;text-align:center;background:#0b152af2;padding:14px 20px;border:1px solid #6689a8;border-radius:8px;z-index:6}
#story-audio-message p {margin:0 0 8px;font-size:16px}
#story-caption {position:absolute;left:22px;bottom:13px;font-size:14px;color:#95aac1;margin:0}
.attribution {position:fixed;bottom:0;left:0;right:0;min-height:32px;display:flex;align-items:center;justify-content:center;background:#030a14f5;border-top:1px solid #263a50;z-index:10001;font-size:13px;letter-spacing:.3px}
.attribution a {color:#a6edff;text-decoration:none;padding:7px 12px}
.attribution a:hover {text-decoration:underline}
#scene11-shell {position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,calc((100svh - 32px) * 1360 / 765));aspect-ratio:1360/765}
#scene11-art {display:block;width:100%;height:auto}
/* Exact white browser-content rectangle in supplied 1360 × 765 art. */
#laptop-screen-viewport {position:absolute;left:7.647059%;top:16.339869%;width:85.955882%;height:71.764706%;overflow:auto;background:#060c19;overscroll-behavior:contain}
#training-game-root {width:100%;min-height:100%;background:#060c19}
body:not(.training-fullscreen) #training-game-root .heading,
body:not(.training-fullscreen) #training-game-root .course-tag,
body:not(.training-fullscreen) #training-game-root footer {display:none}
body:not(.training-fullscreen) #training-game-root .masthead {padding:3px 12px;gap:10px;height:44px}
body:not(.training-fullscreen) #training-game-root .brand-logo {width:52px}
body:not(.training-fullscreen) #training-game-root #sound {margin-left:auto}
body:not(.training-fullscreen) #training-game-root main {padding:5px 10px 10px;max-width:none}
body:not(.training-fullscreen) #training-game-root .lesson-bar {padding:7px 12px;gap:12px;min-height:40px}
body:not(.training-fullscreen) #training-game-root #progress {gap:4px;flex-wrap:nowrap}
body:not(.training-fullscreen) #training-game-root #progress li {width:6px;height:6px;border-width:1px}
body:not(.training-fullscreen) #training-game-root .instruction {padding:8px 12px;min-height:64px}
body:not(.training-fullscreen) #training-game-root #instruction {font-size:24px}
body:not(.training-fullscreen) #training-game-root #detail {margin-top:5px}
body:not(.training-fullscreen) #training-game-root .feedback-bar {padding:8px 12px;min-height:84px;gap:8px;flex-wrap:nowrap}
body:not(.training-fullscreen) #training-game-root .feedback-stack {min-width:0}
body:not(.training-fullscreen) #training-game-root .controls {width:auto}
body:not(.training-fullscreen) #training-game-root .frame #stage {min-width:0;max-width:100%;width:var(--embedded-stage-width,500px);margin:auto}
body.training-fullscreen #scene11-art {display:none}
body.training-fullscreen #scene11-shell {position:static;transform:none;width:auto;aspect-ratio:auto}
body.training-fullscreen #laptop-screen-viewport {position:fixed;inset:0;width:100vw;height:100vh;padding-bottom:32px;z-index:9999;overflow:auto;background:#060c19}
body.training-fullscreen #training-game-root {width:100%;min-height:100%}
body.training-fullscreen #training-game-root main {max-width:1600px;padding-left:24px;padding-right:24px}
body.training-fullscreen .frame #stage {max-width:100%;min-width:0;width:100%;margin:auto}
body.training-fullscreen .masthead {padding:5px 24px}
body.training-fullscreen .brand-logo {width:84px}
body.training-fullscreen .heading {margin-bottom:14px}
#offline-message {display:none;min-height:100vh;place-items:center;padding:24px;text-align:center}
.offline-blocked #offline-message {display:grid}
.offline-blocked #story-root,.offline-blocked #scene11-shell,.offline-blocked .attribution {display:none!important}
#offline-message a {color:#9deeff}
@media(max-width:600px) {
  .story-toolbar{padding:8px 10px;gap:6px} .story-toolbar button{font-size:13px;padding:8px}
  #story-chapter{font-size:12px} #story-stage{inset:58px 0 38px} #story-prompt{padding:10px;font-size:24px}
  .start-card{padding:22px 16px}.start-card img{width:110px}.start-card p:not(.story-eyebrow){font-size:16px}
  body.training-fullscreen #training-game-root main{padding:14px 10px}
  body:not(.training-fullscreen) #training-game-root #progress{display:none}
  body:not(.training-fullscreen) #training-game-root #instruction{font-size:20px}
  body:not(.training-fullscreen) #training-game-root .feedback-bar{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.story-image,#story-prompt{animation:none!important;transition:none!important}}