/* One quiet reading surface: illustration, scene, and clearly paired dialogue. */
@font-face { font-family:'Story Sans'; src:url('/assets/fonts/StorySans-v1.woff2') format('woff2'); font-style:normal; font-weight:100 900; font-display:swap; }
#story-reader {
  --reader-font:'Story Sans','Apple SD Gothic Neo','Malgun Gothic','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;
  position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:16px 24px 12px; overflow:hidden; background:#101c23; color:#edf0ed;
  font-family:var(--reader-font); font-synthesis:none; color-scheme:dark;
}
#story-reader .reader-shell { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:'toolbar' 'pages' 'footer'; gap:0; width:min(1600px,100%); height:100%; min-height:0; margin:auto; }
#story-reader .reader-toolbar { grid-area:toolbar; position:static; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:0 0 12px; border:0; background:none; }
#story-reader .reader-toolbar h2 { margin:0; font:500 16px/1.4 var(--reader-font); letter-spacing:-.02em; color:#bdc9ce; }
#story-reader .reader-kicker { display:none; }
#story-reader .reader-actions { display:flex; gap:8px; flex-shrink:0; }
#story-reader button { font-family:var(--reader-font); }
#story-reader .reader-actions button { min-width:44px; min-height:44px; padding:8px 12px; font-size:13px; color:#bac7ce; border:0; border-radius:8px; background:transparent; }
#story-reader .reader-sound span { display:none; }
#story-reader .reader-sound[aria-pressed='true'] { color:#e4c48d; background:#e4c48d0d; }
#story-reader .reader-actions svg { display:block; width:19px; height:19px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#story-reader .reader-pages { grid-area:pages; display:block; min-height:0; height:100%; padding:0; overflow:hidden; border:1px solid #ffffff12; border-radius:12px; background:#0a141b; }
#story-reader .book-spread { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); width:100%; height:100%; min-height:0; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; box-shadow:none; background:none; }
#story-reader .book-spread::before,#story-reader .book-spread::after { display:none; }
#story-reader .book-left { position:relative; grid-area:1/1; align-self:stretch; width:100%; height:100%; min-width:0; min-height:0; padding:12px; overflow:hidden; background:#0a141b; }
#story-reader .book-illustration { position:relative; display:block; width:100%; height:100%; min-height:0; margin:0; padding:0; background:none; }
#story-reader .book-illustration>img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:100%; max-height:100%; margin:0; object-fit:contain; object-position:center; filter:none; border:0; border-radius:0; }
#story-reader .book-page { position:relative; grid-area:1/2; display:grid; grid-template-rows:96px minmax(0,1fr); align-self:stretch; width:100%; height:100%; min-width:0; min-height:0; margin:0; padding:0; overflow:hidden; background:#15242c; color:#e8e7e2; border-left:1px solid #ffffff0e; }
/* A two-line title fits this fixed header without letting short titles add empty space. */
#story-reader .story-page-heading { display:grid; grid-template-rows:18px minmax(0,1fr); gap:4px; width:100%; min-width:0; margin:0; padding:10px clamp(28px,4vw,64px); border-bottom:2px solid #70858e; background:#15242c; }
#story-reader .story-copy { display:flex; flex-direction:column; justify-content:flex-start; min-height:0; max-height:none; width:100%; margin:0; padding:24px clamp(28px,4vw,64px) 36px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#657b86 #15242c; }
#story-reader .story-page-heading>h3,#story-reader .story-page-heading>.page-eyebrow,#story-reader .story-lines,#story-reader .story-gate { width:100%; max-width:28rem; margin-inline:auto; }
#story-reader .page-eyebrow { grid-row:1; align-self:start; margin-block:0; color:#aabcc5; font:500 13px/1.35 var(--reader-font); text-transform:none; letter-spacing:0; }
#story-reader .story-page-heading h3 { grid-row:2; align-self:start; margin-block:0; font:600 22px/1.2 var(--reader-font); letter-spacing:-.025em; color:#eee7d9; word-break:keep-all; overflow-wrap:break-word; }
#story-reader .story-lines { font:400 20px/1.7 var(--reader-font); letter-spacing:-.015em; white-space:normal; word-break:normal; overflow-wrap:break-word; }
#story-reader:lang(ko) .story-lines { word-break:keep-all; }
#story-reader .story-lines p { max-width:none; margin:0 0 20px; white-space:pre-line; color:#e3e6e5; }
#story-reader .story-lines p[data-speaker] { display:grid; grid-template-columns:6.25rem minmax(0,1fr); column-gap:20px; }
#story-reader .story-lines .dialogue-text { min-width:0; }
#story-reader .story-lines .narration { color:#b3c1c7; font-size:16px; line-height:1.85; }
#story-reader .story-lines .narration:has(+p[data-speaker]),#story-reader .story-lines p[data-speaker]:has(+.narration) { margin-bottom:28px; }
#story-reader .story-lines:not(:has([data-speaker])) .narration { font-size:20px; line-height:1.85; color:#d3dde0; }
#story-reader .story-lines p:last-child { margin-bottom:0; }
#story-reader .story-lines .speaker { display:block; min-width:0; margin:0; padding-top:2px; font:650 20px/1.55 var(--reader-font); letter-spacing:0; white-space:normal; overflow-wrap:break-word; color:var(--speaker-color,#d9c398); }
#story-reader .folio,#story-reader .art-chapter,#story-reader .story-art-shade,#story-reader .page-ornament,#story-reader .book-gesture-hint { display:none; }
#story-reader .reader-footer { grid-area:footer; position:relative; display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:12px; margin:0; padding:12px 0 0; border:0; background:none; }
#story-reader .reader-footer>button { width:auto; min-width:88px; min-height:44px; padding:10px 16px; font:500 14px/1.5 var(--reader-font); border:0; border-radius:8px; }
#story-reader [data-story-prev] { justify-self:start; background:transparent; color:#b2c1c8; }
#story-reader [data-story-next] { justify-self:end; background:#dfc89d; color:#19232a; }
#story-reader .page-progress { font:400 12px/1.5 var(--reader-font); font-variant-numeric:tabular-nums; color:#a3b4bc; }
#story-reader .reader-settings { position:relative; display:block; justify-self:end; width:44px; min-height:44px; padding:0; font:13px/1.5 var(--reader-font); }
#story-reader .reader-settings summary { display:grid; place-items:center; width:44px; min-height:44px; list-style:none; cursor:pointer; color:#bbc9d0; border:1px solid #ffffff18; border-radius:8px; font-size:24px; }
#story-reader .reader-settings summary::-webkit-details-marker { display:none; }
#story-reader .reader-settings-panel { position:absolute; z-index:25; right:0; bottom:calc(100% + 12px); display:grid; gap:8px; width:min(280px,calc(100vw - 24px)); padding:16px; border:1px solid #40535d; border-radius:12px; background:#182a33; box-shadow:0 12px 36px #0005; }
#story-reader .reader-settings:not([open]) .reader-settings-panel { display:none; }
#story-reader .reader-settings label { justify-content:space-between; min-height:44px; gap:12px; }
#story-reader .reader-settings input { width:112px; }
#story-reader .reader-settings a,#story-reader .reader-settings .reader-resume { display:flex; align-items:center; min-height:44px; margin:0; padding:8px; border:0; background:transparent; color:#d3dde0; font:inherit; text-align:left; text-decoration:none; white-space:normal; border-radius:6px; }
#story-reader .story-contents { position:absolute; inset:56px 0 auto auto; z-index:20; width:min(620px,100%); max-height:65%; margin:0; padding:16px; overflow-y:auto; border:1px solid #61737a; border-radius:10px; background:#142630; box-shadow:0 12px 32px #0008; grid-template-columns:repeat(2,minmax(0,1fr)); }
#story-reader .story-contents h3 { font:600 16px/1.5 var(--reader-font); }
#story-reader .story-contents button { min-height:44px; font-size:15px; line-height:1.5; }
#story-reader .story-gate { font:16px/1.8 var(--reader-font); color:#c2cfd4; }
#story-reader .story-gate button,#story-reader .story-gate a { font:16px/1.5 var(--reader-font); min-height:48px; border-radius:8px; }
#story-reader .story-copy:focus { outline:none; }
#story-reader button:focus-visible,#story-reader a:focus-visible,#story-reader summary:focus-visible { outline:2px solid #ffda91; outline-offset:3px; }
@media(hover:hover) { #story-reader .reader-actions button:hover,#story-reader .reader-settings summary:hover,#story-reader .reader-settings a:hover,#story-reader .reader-settings .reader-resume:hover { background:#ffffff0a; } }
@media(max-width:699px) {
 #story-reader { padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
 #story-reader .reader-toolbar { min-height:58px; padding:6px 12px; gap:8px; }
 #story-reader .reader-toolbar h2 { font-size:14px; }
 #story-reader .reader-actions { gap:6px; }
 #story-reader .reader-actions button { padding:8px; font-size:13px; }
 #story-reader .reader-pages { border-inline:0; border-radius:0; }
 #story-reader .book-spread { grid-template-columns:1fr; grid-template-rows:minmax(0,30dvh) minmax(0,1fr); }
 #story-reader .book-left { grid-area:1/1; padding:8px 12px; }
 #story-reader .book-page { grid-area:2/1; grid-template-rows:88px minmax(0,1fr); border-left:0; border-top:1px solid #ffffff0e; }
 #story-reader .story-page-heading { padding:8px 22px; }
 #story-reader .story-copy { padding:20px 22px 28px; }
 #story-reader .story-page-heading h3 { font-size:20px; }
 #story-reader .story-lines { font-size:18px; line-height:1.75; }
 #story-reader .story-lines p { margin-bottom:18px; }
 #story-reader .story-lines p[data-speaker] { grid-template-columns:5rem minmax(0,1fr); column-gap:16px; }
 #story-reader .story-lines .speaker { font-size:18px; padding-top:1px; }
 #story-reader .story-lines .narration { font-size:15px; }
 #story-reader .story-lines:not(:has([data-speaker])) .narration { font-size:18px; }
 #story-reader .reader-footer { padding:8px 12px; gap:8px; }
 #story-reader .reader-footer>button { min-width:0; min-height:44px; padding:9px 12px; font-size:13px; }
 #story-reader .story-contents { top:58px; max-height:70%; border-radius:0 0 10px 10px; }
}
@media(max-height:500px) and (min-width:700px) {
 #story-reader { padding:6px 12px; }
 #story-reader .reader-toolbar { min-height:44px; padding-bottom:6px; }
 #story-reader .book-left { padding:8px; }
 #story-reader .book-page { grid-template-rows:88px minmax(0,1fr); }
 #story-reader .story-page-heading { padding:8px 28px; }
 #story-reader .story-copy { padding:20px 28px; }
 #story-reader .story-page-heading h3 { font-size:20px; }
 #story-reader .story-lines { font-size:18px; }
 #story-reader .reader-footer { padding-top:6px; }
}
/* Short, user-entered interludes reuse game art; they never advance the story. */
#story-reader .story-vignette { position:absolute; inset:20px; display:grid; place-items:center; overflow:hidden; }
#story-reader .vignette-frame { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; }
#story-reader .vignette-frame img { position:absolute; object-fit:contain; max-width:100%; max-height:100%; }
#story-reader .vignette-forge { background:radial-gradient(ellipse at 50% 54%,#61462b66,transparent 60%); }
#story-reader .vignette-anvil { width:65%; height:55%; left:17.5%; top:36%; animation:forge-rest 3.4s both; image-rendering:pixelated; }
#story-reader .vignette-hammer { width:38%; height:35%; left:38%; top:17%; opacity:0; transform-origin:30% 80%; animation:forge-strike 2.2s both; image-rendering:pixelated; }
#story-reader .vignette-ring { width:56%; height:56%; left:22%; top:13%; transform:rotate(-30deg); animation:forge-reveal 3.4s both; }
@keyframes forge-strike { 0%,20% { opacity:0;transform:rotate(-35deg); } 30%,55%,80% { opacity:1;transform:translateY(25%) rotate(20deg); } 42%,67% { opacity:1;transform:rotate(-35deg); } 90%,100% { opacity:0;transform:rotate(20deg); } }
@keyframes forge-reveal { 0%,60% { opacity:0; } 100% { opacity:1; } }
@keyframes forge-rest { 0%,60% { opacity:1; } 100% { opacity:.45; } }
body:has(.world.motion-paused) #story-reader .vignette-frame * { animation:none; }
@media(prefers-reduced-motion:reduce) { #story-reader .vignette-frame * { animation:none; } }
@media(max-width:699px) {
 #story-reader .story-vignette { inset:8px 12px; }
 #story-reader .vignette-forge { width:min(100%,300px); }
}