/* Approved white narrative concept. Scoped to expedition and its sheets. */
#game-screen, body.sheet-open .sheet {
  --paper: #f8f6f0; --paper-2: #eeebe4; --paper-3: #fffdf8;
  --ink: #302d2b; --ink-2: #827c74; --rule: #c7c0b6;
  --blood: #9c383d; --gold: #aa8b55; --hp: #42a37d;
  --f-num: 'Gowun Batang', Georgia, serif;
}
#app:has(#game-screen:not([hidden])) { background: #f8f6f0; box-shadow: 0 0 45px #0003; }
#game-screen { min-height: 100svh; padding: 24px 20px 108px; background: url('../assets/ui/white-narrative/botanical.svg') no-repeat right 24px top 490px / 88px auto, radial-gradient(ellipse at 15% 0%, #fffaf280, transparent 45%), #f8f6f0; }
#game-screen::before { content: ''; display: block; height: 18px; margin-bottom: 22px; background: url('../assets/ui/white-narrative/divider.svg') center / 64% 18px no-repeat; opacity: .6; }
#game-screen .hud { grid-template-columns: 64px minmax(0,1fr) auto; gap: 10px; padding-bottom: 20px; }
#game-screen .hud-portrait { width: 64px; height: 76px; border: 1px solid #514b44; padding: 3px; background: #eae5dc; box-shadow: none; }
#game-screen .hud-portrait canvas { object-fit: cover; }
#game-screen .hud-name { font-size: 22px; gap: 9px; }
#game-screen .hud-main { gap: 8px; }
#game-screen .mor-chip { font-size: 11px; border-color: #aaa399; padding: 3px 7px; }
#game-screen .hp-ic { display: none; }
#game-screen .hpbar { gap: 7px; }
#game-screen .hpbar-track { height: 10px; border: 1px solid #494941; border-radius: 3px; background: #e1ded5; overflow: hidden; }
#game-screen .hpbar-track i { background: linear-gradient(90deg,#76bd98,#3ca57b); transition: width .3s; }
#game-screen .num { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
#game-screen .hud-res { gap: 18px; }
#game-screen .hud-stats { border-left: 1px solid #c4bfb7; gap: 9px 10px; padding-left: 10px; }
#game-screen .stat, #game-screen .res { gap: 5px; }
#game-screen .hud-stats b, #game-screen .hud-res b { font-weight: 700; }
.narrative-icon { display: block; width: 19px; height: 19px; object-fit: contain; }
#game-screen .journey { gap: 9px; padding: 5px 0 24px; font-size: 12px; }
#game-screen .jr-region { font-size: 14px; }
#game-screen .journey .num { font-size: 11px; }
#game-screen .rod { height: 1px; background: #aaa399; border: 0; min-width: 25px; }
#game-screen .rod::before, #game-screen .rod::after { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #aaa399; background: #f8f6f0; transform: translateY(-50%); }
#game-screen .rod::before { left: 0; width: 9px; height: 9px; background: #9c383d; box-shadow: 0 0 0 2px #f8f6f0,0 0 0 3px #aaa399; }
#game-screen .rod::after { right: 0; }
.chapter-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 17px; min-height: 52px; }
.chapter-heading { border-left: 1px solid #c7c0b6; padding-left: 12px; min-width: 0; }
.chapter-eyebrow { display: block; font: 8px Georgia,serif; letter-spacing: .4em; margin-bottom: 6px; }
#game-screen .ev-title { font-size: 19px; margin: 0; line-height: 1.35; }
.chapter-heading::after { content:''; display:block; width:58px; height:2px; margin-top:7px; background:#9c383d; transform:rotate(-2deg); }
.chapter-aside { margin:0; border-left:1px solid #d3cdc4; padding-left:12px; color:#948d84; font-size:10px; line-height:1.8; flex-shrink:0; }
#game-screen .illus-frame { margin:0; padding:4px; background:#f8f6f0; border:1px solid #aaa196; outline:1px solid #d3cbc0; outline-offset:3px; clip-path:none !important; border-radius:12px 2px; }
#game-screen .illus-frame::after { content:''; position:absolute; z-index:3; left:calc(50% - 12px); bottom:-15px; width:24px; height:28px; background:transparent url('../assets/ui/white-narrative/compass.svg') center / 24px no-repeat; pointer-events:none; }
#game-screen .illus-frame > canvas:first-child { border-radius:8px 0; }
#game-screen .ev-text { font-size:15px; line-height:1.95; margin-top:30px; }
#game-screen .ev-text p { margin-bottom:1.1em; }
#game-screen .divider { height:18px; margin:12px 0 18px; background:url('../assets/ui/white-narrative/divider.svg') center/80% 18px no-repeat; }
#game-screen .divider::before, #game-screen .divider::after { display:none; }
#game-screen .divider span:not(:empty) { background:#f8f6f0; padding:0 10px; margin:auto; }
#game-screen .choices { gap:10px; padding-bottom:22px; }
#game-screen .choice { position:relative; grid-template-columns:28px minmax(0,1fr) 12px; align-items:center; gap:12px; padding:17px 20px; border:1px solid #bbaaa3; background:#fffaf780; border-radius:10px 1px; color:#423934; min-height:62px; }
#game-screen .choice::after { content:'›'; font:28px Georgia,serif; color:inherit; }
#game-screen .choice .mark { width:27px; height:32px; margin:0; transform:none; border:0; box-shadow:none; background:url('../assets/ui/white-narrative/compass.svg') center/contain no-repeat; }
#game-screen .choice.go { color:#fff8ee; background:linear-gradient(110deg,#8e3037,#ad4448 60%,#96373c); border:1px solid #8f3439; outline:1px solid #a3484b; outline-offset:3px; box-shadow:inset 0 0 0 3px #f8eee6; }
#game-screen .choice.go .mark { filter:brightness(0) invert(1); }
#game-screen .choice.go .choice-t { font-size:23px; font-weight:400; letter-spacing:.06em; }
#game-screen .choice.go .choice-sub, #game-screen .choice.go .check { color:#f1d9cf; }
#game-screen .choice:hover:not(:disabled) { filter:brightness(1.04); }
#game-screen .choice:active:not(:disabled) { transform:translateY(1px); }
#game-screen .choice:focus-visible, #game-screen .dock button:focus-visible { outline:2px solid #9c383d; outline-offset:4px; }
#game-screen .choice.locked { opacity:.48; }
#game-screen .dock { background:#f8f6f0f5; border-top:1px solid #d4cec4; padding:12px 10px calc(13px + env(safe-area-inset-bottom,0px)); box-shadow:0 -4px 16px #5c493908; }
#game-screen .dock button { position:relative; color:#4a4540; font-size:13px; gap:5px; min-height:56px; border-right:1px solid #d6d0c7; }
#game-screen .dock button:last-child { border-right:0; }
#game-screen .dock .narrative-icon { width:30px; height:30px; }
#game-screen .dock button[aria-expanded=true] { color:#9c383d; }
#game-screen .dock button[aria-expanded=true] .narrative-icon { filter:invert(25%) sepia(45%) saturate(1100%) hue-rotate(312deg); }
#game-screen .dock button[aria-expanded=true]::after { content:'◆'; color:#9c383d; position:absolute; bottom:-12px; font-size:8px; }
body.sheet-open .sheet-panel { background:#f8f6f0; border-top:1px solid #bdb2a6; border-radius:14px 14px 0 0; box-shadow:0 -12px 40px #30252420; }
body.sheet-open .sheet-head { border-bottom:1px solid #d4cec4; }
@media(max-width:390px) {
  #game-screen { padding:15px 15px 105px; }
  #game-screen::before { margin-bottom:16px; }
  #game-screen .hud { grid-template-columns:49px minmax(0,1fr) auto; gap:7px; }
  #game-screen .hud-portrait { width:49px; height:65px; }
  #game-screen .hud-name { font-size:19px; }
  #game-screen .hud-stats { gap:8px 6px; padding-left:7px; }
  #game-screen .hud-stats .narrative-icon { width:15px; height:15px; }
  #game-screen .num { font-size:11px; }
  #game-screen .hpbar { flex-wrap:wrap; gap:3px 5px; }
  #game-screen .hpbar-track { flex-basis:55%; }
  #game-screen .journey { gap:7px; }
  #game-screen .journey .num { font-size:10px; }
  #game-screen .jr-region { font-size:12px; }
  .chapter-aside { font-size:9px; padding-left:8px; }
  #game-screen .ev-title { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) { #game-screen .choice { transition:none; } }

/* Nine-slice ornament preserves corner detail at any scene size. */
#game-screen .illus-frame { border:8px solid transparent; border-image:url(../assets/ui/white-narrative/frame.svg) 20 stretch; outline:0; padding:0; border-radius:0; }
#game-screen .illus-frame > canvas:first-child { border-radius:2px; }
#game-screen .illus-frame::after { bottom:-20px; }
#game-screen .illus-frame { padding:3px; }
/* Reference fidelity pass: actual marginal illustrations and scalloped ornaments. */
#game-screen { position:relative; isolation:isolate; background:radial-gradient(ellipse at 30% 5%,#fffdfa80,transparent 65%),#f8f6f0; padding-top:17px; }
#game-screen::before { display:none; }
.page-marginalia { position:absolute; inset:0 0 auto; height:130px; z-index:-1; pointer-events:none; overflow:hidden; }
.corner-foliage { position:absolute; width:108px; height:108px; object-fit:contain; left:-10px; top:-22px; transform:rotate(83deg); opacity:.28; }
.castle-note { position:absolute; right:2px; top:9px; width:111px; text-align:center; }
.castle-note span { display:block; font:14px/1.15 'Segoe Script','Brush Script MT',cursive; color:#a59f94; opacity:.68; transform:rotate(-8deg); }
.castle-note span i { margin-left:25px; }
.castle-note img { width:119px; height:76px; object-fit:contain; margin-top:-5px; opacity:.3; }
.edition-heading { position:relative; display:flex; align-items:center; gap:8px; width:58%; margin:0 auto 27px; color:#827a71; font-size:10px; letter-spacing:.16em; height:19px; }
.edition-heading::before,.edition-heading::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,#b4aaa0); }
.edition-heading::after { transform:rotate(180deg); }
.edition-heading span { white-space:nowrap; }
.edition-heading span::after { content:''; position:absolute; width:48px; height:20px; top:22px; left:calc(50% - 24px); background:url('../assets/ui/white-narrative/divider.svg') center/100% 18px no-repeat; opacity:.7; }
#game-screen .hud { position:relative; padding-top:13px; }
#game-screen .hud-stats { align-self:end; margin-bottom:8px; }
#game-screen .rod { display:flex; align-items:center; justify-content:space-evenly; }
#game-screen .rod i { display:block; width:5px; height:5px; border:1px solid #aaa399; border-radius:50%; background:#f8f6f0; }
.chapter-aside { position:relative; }
.chapter-aside::before { content:'✧'; position:absolute; left:-5px; top:calc(50% - 7px); font-size:13px; background:#f8f6f0; line-height:14px; }
#game-screen .illus-frame { border:0; border-image:none; outline:0; padding:3px; border-radius:0; margin:0; }
#game-screen .illus-frame > canvas:first-child { border-radius:0; }
.ornament-frame { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
#game-screen .illus-frame::after { z-index:5; bottom:-12px; height:25px; background-image:url('../assets/ui/white-narrative/starburst.svg'); }
.scene-motto { position:absolute; top:18px; right:17px; z-index:3; text-align:center; font:6px/2.1 Georgia,serif; letter-spacing:.35em; color:#554545; pointer-events:none; }
.scene-motto::after { content:''; display:block; width:25px; margin:7px auto 0; border-top:1px solid #8b6966; }
.story-layout { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 57px; gap:12px; margin-top:29px; }
#game-screen .story-layout .ev-text { margin:0; font-size:14px; line-height:1.95; }
.story-marginalia { align-self:start; margin-top:-9px; text-align:center; color:#958d81; pointer-events:none; }
.story-marginalia img { width:70px; max-width:none; height:94px; margin-left:-7px; object-fit:contain; opacity:.44; }
#game-screen .divider { background:none; margin:0; height:9px; }
#game-screen .divider span:empty { display:none; }
#game-screen .choices { margin-top:15px; padding:0 4px; }
#game-screen .choice.go { grid-template-columns:39px auto 15px; justify-content:center; column-gap:17px; border:0; border-radius:0; outline:none; box-shadow:none; background:none; padding:17px 20px; min-height:70px; }
#game-screen .choice.go > :not(.ornament-frame) { position:relative; z-index:5; }
#game-screen .choice.go .mark { background-image:url('../assets/ui/white-narrative/compass-fine.svg'); width:33px; height:37px; overflow:visible; }
#game-screen .choice.go .mark::after { content:''; position:absolute; right:-9px; top:5px; bottom:5px; border-right:1px solid #e0b8ae; }
#game-screen .choice.go .choice-t { font-size:23px; letter-spacing:.12em; }
#game-screen .choice.go::after { position:relative; z-index:5; font-size:26px; font-weight:400; }
.journey-signoff { display:flex; align-items:center; justify-content:center; gap:10px; color:#9a8d80; font:6px/1 Georgia,serif; letter-spacing:.35em; margin:19px auto 22px; width:78%; }
.journey-signoff::before,.journey-signoff::after { content:''; height:1px; background:#c6bdb1; flex:1; }
.journey-signoff span { white-space:nowrap; }
#game-screen .dock button[data-sheet=codex] { color:#9c383d; }
#game-screen .dock button[data-sheet=codex] .narrative-icon { filter:invert(25%) sepia(45%) saturate(1100%) hue-rotate(312deg); }
#game-screen .dock button[data-sheet=codex]::after { content:'◆'; position:absolute; bottom:-11px; font-size:7px; color:#9c383d; width:65%; background:linear-gradient(#b87b7480,#b87b7480) center/100% 1px no-repeat; }
@media(max-width:390px) {
  #game-screen { padding-top:12px; }
  .edition-heading { font-size:9px; margin-bottom:25px; }
  .corner-foliage { width:90px; height:90px; }
  .castle-note { width:86px; top:8px; }
  .castle-note span { font-size:11px; }
  .castle-note img { width:91px; height:60px; }
  .story-layout { grid-template-columns:minmax(0,1fr) 48px; gap:9px; }
  #game-screen .story-layout .ev-text { font-size:13px; }
  .story-marginalia img { width:60px; height:86px; }
  #game-screen .choice.go { column-gap:13px; }
  #game-screen .choice.go .choice-t { font-size:21px; }
}
#game-screen { background-image:url('../assets/ui/white-narrative/paper-grain.svg'),radial-gradient(ellipse at 30% 5%,#fffdfa80,transparent 65%); background-color:#f8f6f0; }
#game-screen .dock button[data-sheet=codex] .narrative-icon { filter:none; }
#game-screen .dock:has(button[aria-expanded=true]:not([data-sheet=codex])) button[data-sheet=codex]::after { display:none; }
#game-screen .choice.go .mark { filter:none; }
.corner-foliage { width:130px; height:130px; left:-12px; top:-26px; opacity:.3; }
@media(max-width:390px) { .corner-foliage { width:108px; height:108px; left:-12px; top:-24px; } }
@media(max-width:390px) {
  #game-screen .hud { padding-bottom:14px; }
  #game-screen .journey { padding-bottom:18px; }
  .chapter-header { min-height:44px; margin-bottom:12px; }
  .story-layout { margin-top:20px; }
  .story-marginalia img { height:74px; }
  #game-screen .choices { margin-top:8px; }
  .journey-signoff { margin-top:12px; margin-bottom:15px; }
}