/* Dissidium's game interface. The painting is the stage; the interface lives
   only on its architecture: a stage front along the bottom edge (your people,
   your records, time itself), an inscription across the top (the place), and
   a margin on the right (the question, and in a fight the account of it).
   Warm black fields that fall away into the painting, one ochre hairline,
   red lead reserved for blood and commitment. No boxes floating on the scene. */
@font-face { font-family:'Castoro Titling'; font-weight:400; font-display:swap; src:url('fonts/castoro-titling-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Castoro'; font-weight:400; font-display:swap; src:url('fonts/castoro-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Castoro'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/castoro-latin-400-italic.woff2') format('woff2'); }

:root {
  color-scheme:dark; --text-scale:1;
  --night:#0b0806; --night-2:#16100c; --night-3:#231a13;
  --ink:#efe6d3; --ink-2:#c2b296; --ink-3:#958670;
  --ochre:#c9a56b; --ochre-hi:#ecd19a; --rule:#c9a56b5c; --rule-faint:#c9a56b2b;
  --minium:#c9492f; --minium-deep:#5e1c12; --joint:#d9d4c7;
  --display:'Castoro Titling','Castoro',Georgia,serif; --body:'Castoro',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --field:linear-gradient(180deg,#130e0bf2,#0b0806f5);
  /* Names older surfaces still read. */
  --brass:var(--ochre); --gold:var(--ochre-hi); --dim:var(--ink-2); --bronze:#7d6240; --edge:var(--rule); --blood:var(--minium);
  --panel-bg:var(--field); --paper:var(--field);
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--night); color:var(--ink); font:400 calc(16px * var(--text-scale))/1.45 var(--body); font-variant-numeric:lining-nums; overflow:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:#c9a56b55; color:#fff8ea; }
button,select,input { font:inherit; }
button,select { color:var(--ink); background:#1a130ee6; border:1px solid var(--rule); padding:7px 14px; border-radius:2px; cursor:pointer; transition:color .2s, background-color .2s, border-color .2s; }
button:hover:not(:disabled),select:hover:not(:disabled) { border-color:var(--ochre); color:#fff6e4; background:#2a1f16; }
button:active:not(:disabled) { translate:0 1px; }
button:disabled { opacity:.42; cursor:default; }
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible { outline:1px solid var(--ochre-hi); outline-offset:3px; }
#viewport:focus-visible { outline:none; }
[hidden] { display:none !important; }
p { margin:0 0 .6rem; }
h1,h2,h3 { font-weight:400; }
h2 { font:400 calc(15px * var(--text-scale)) var(--display); letter-spacing:.12em; margin:0 0 8px; color:var(--ochre); }
h3 { font:400 calc(13px * var(--text-scale)) var(--display); letter-spacing:.14em; color:var(--ochre); margin:16px 0 8px; }
small { display:block; color:var(--ink-2); font-size:calc(13px * var(--text-scale)); line-height:1.35; }
kbd { font:400 calc(10px * var(--text-scale))/1 var(--display); letter-spacing:.08em; color:var(--ink-3); }
.eyebrow { font:400 calc(11px * var(--text-scale)) var(--display); color:var(--ochre); text-transform:uppercase; letter-spacing:.2em; }
.fine { color:var(--ink-2); font-size:calc(13px * var(--text-scale)); }
* { scrollbar-width:thin; scrollbar-color:#6d5536 transparent; }

/* Panels that do open over the scene (the codex, conversation, menus) are one
   warm field with a single hairline. */
.sheet,#dialogue,#shell-dialog { position:relative; background:var(--field); border:1px solid var(--rule-faint); box-shadow:0 24px 60px #000c; }

/* ── The stage ─────────────────────────────────────────────────────────── */
.stage { position:fixed; inset:0; overflow:clip; }
.viewport-wrap { position:absolute; inset:0; overflow:clip; isolation:isolate; display:grid; grid-template: minmax(0,1fr) / minmax(0,1fr); place-items:center; container-type:size; background:var(--night); }
/* The painting covers the screen, cropping a little top and bottom on wide screens rather than showing bars; very wide screens get narrow side bars instead of losing the floor. */
#viewport { width:min(max(100cqw,160cqh),180cqh); aspect-ratio:1280/800; }
#viewport canvas { display:block; width:100%; height:auto; transition:filter .9s var(--ease); }
#play[data-over=true] #viewport canvas { filter:brightness(.42) saturate(.7); transition:filter 1.6s ease-in .9s; } /* your own death: the scene dims before the card */
/* The architecture: the stage front rises from the bottom edge, the lintel shades the top, the right margin holds the record. */
.vignette { position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(0deg,#0b0806 0,#0b0806e6 64px,#0b080699 120px,#0b080600 210px),
  linear-gradient(180deg,#0b0806b3 0,#0b080640 90px,#0b080600 150px),
  radial-gradient(ellipse 36% 52% at 100% 0,#0b0806d9 30%,#0b080600 100%),
  radial-gradient(ellipse 80% 75% at 50% 46%,transparent 58%,#0b080680 100%); }
/* The lip of the stage: one hairline across the whole width. */
.vignette::before { content:''; position:absolute; left:0; right:0; bottom:var(--lip,92px); height:1px; background:linear-gradient(90deg,#c9a56b00,#c9a56b45 14%,#c9a56b45 86%,#c9a56b00); transition:background .6s; }
/* Held time: the house lights come down and a frame closes round the tableau. */
.vignette::after { content:''; position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease); background:radial-gradient(ellipse 66% 62% at 50% 46%,transparent 30%,#0b0806d9 100%); box-shadow:inset 0 0 0 10px #0b080680, inset 0 0 0 11px #c9a56b40; }
#play[data-paused=true]:not([data-over=true]) .vignette::after { opacity:1; }
#play[data-paused=true]:not([data-over=true]) .vignette::before { background:linear-gradient(90deg,#c9a56b00,#c9a56bb0 14%,#c9a56bb0 86%,#c9a56b00); }
#play[data-paused=true]:not([data-over=true]) #viewport canvas { filter:saturate(.55) brightness(.86); }

/* ── The inscription: the place, cut across the top. ───────────────────── */
.location { position:absolute; top:16px; left:50%; translate:-50% 0; width:min(560px,52vw); text-align:center; pointer-events:none; display:grid; justify-items:center; gap:3px; z-index:2; }
.location::after { content:''; width:120px; height:7px; margin-top:6px; background:linear-gradient(var(--rule),var(--rule)) left center/52px 1px no-repeat, linear-gradient(var(--rule),var(--rule)) right center/52px 1px no-repeat, linear-gradient(45deg,transparent 2.5px,var(--ochre) 2.5px,var(--ochre) 4.5px,transparent 4.5px) center/7px 7px no-repeat; opacity:.9; }
.cartouche { display:none; }
#area-name { margin:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:400 calc(11px * var(--text-scale))/1.2 var(--display); letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--ochre); text-shadow:0 1px 8px #000; }
#beat-name { margin:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:400 calc(27px * var(--text-scale))/1.1 var(--display); letter-spacing:.1em; text-indent:.1em; text-transform:uppercase; color:var(--ink); text-shadow:0 2px 14px #000, 0 0 2px #000; }
#beat-name[data-length=mid] { font-size:calc(23px * var(--text-scale)); }
#beat-name[data-length=long] { font-size:calc(20px * var(--text-scale)); letter-spacing:.07em; }
.location.reveal #beat-name { animation:inscribe 1.3s var(--ease) both; }
.location.reveal #area-name { animation:inscribe 1.3s var(--ease) .18s both; }
.location.reveal::after { animation:rule-in 1.1s var(--ease) .3s both; }
@keyframes inscribe { from { opacity:0; clip-path:inset(0 50% 0 50%); } to { opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes rule-in { from { opacity:0; scale:.3 1; } }

#pause-banner { position:absolute; top:94px; left:50%; translate:-50% 0; display:flex; align-items:center; gap:14px; width:max-content; max-width:min(820px,calc(100vw - 680px)); margin:0; font:italic 400 calc(15px * var(--text-scale))/1.35 var(--body); text-align:center; text-wrap:balance; color:var(--ochre-hi); text-shadow:0 1px 6px #000, 0 0 14px #000; pointer-events:none; z-index:2; }
#pause-banner::before,#pause-banner::after { content:''; flex:0 0 28px; height:1px; background:var(--rule); }

/* ── The right margin: the unresolved question. ────────────────────────── */
.tracker { position:absolute; top:18px; right:24px; width:min(318px,27vw); z-index:2; text-shadow:0 1px 6px #000; }
.tracker-open { all:unset; display:flex; gap:10px; align-items:baseline; justify-content:flex-end; width:100%; cursor:pointer; }
.tracker-open .eyebrow { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.tracker-open { position:absolute; top:9px; right:0; width:auto; padding:2px 0 2px 8px; }
.tracker-open kbd { color:var(--ochre); }
.tracker-open:hover kbd { color:var(--ochre-hi); }
.goal { padding-right:18px; }
.tracker-open:hover .eyebrow,.tracker-open:focus-visible .eyebrow { color:var(--ochre-hi); }
.tracker-open:focus-visible { outline:1px solid var(--ochre-hi); outline-offset:4px; }
.goal { margin:7px 0 0; text-align:right; font:italic 400 calc(18px * var(--text-scale))/1.3 var(--body); color:var(--ink); text-wrap:balance; }
.leads { padding:0; margin:8px 0 0; list-style:none; display:grid; gap:6px; }
.leads li { font-size:calc(14px * var(--text-scale)); line-height:1.25; overflow-wrap:anywhere; }
.leads strong { display:block; font-weight:400; }
.leads span { display:block; color:var(--ink-2); font-size:.88em; }
.leads button { width:100%; text-align:left; padding:10px 12px; background:none; border:0; border-bottom:1px solid var(--rule-faint); border-radius:0; line-height:1.3; }
.leads button[aria-pressed=true] { background:#c9a56b14; box-shadow:inset 2px 0 var(--ochre); }
.leads button span { margin-top:4px; }
.tracker .leads { margin-top:10px; gap:0; justify-items:end; }
.tracker .leads li:nth-child(n+4) { display:none; }
.tracker .leads button { display:grid; justify-items:end; text-align:right; padding:5px 0; border:0; color:var(--ink-2); background:none; box-shadow:none; }
.tracker .leads button strong { color:inherit; }
.tracker .leads button:is(:hover,[aria-pressed=true]) { color:var(--ochre-hi); background:none; }
.tracker .leads button span { color:var(--ink-3); font-size:calc(12.5px * var(--text-scale)); margin-top:1px; }
.trail-direction { margin:6px 0 10px; font-size:calc(15px * var(--text-scale)); line-height:1.35; }
#trail-hud { display:grid; justify-items:end; text-align:right; margin-top:8px; padding-top:9px; border-top:1px solid var(--rule-faint); }
#trail-hud .trail-direction { margin:0 0 4px; font-size:calc(13.5px * var(--text-scale)); color:var(--ink-2); }
#trail-hud > button { display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:6px 0; background:none; border:0; font:400 calc(16px * var(--text-scale))/1.25 var(--body); color:var(--ochre-hi); text-align:right; }
#trail-hud > button::after { content:''; flex:none; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; rotate:45deg; transition:translate .3s var(--ease); }
#trail-hud > button:hover:not(:disabled) { background:none; color:#fff3d8; }
#trail-hud > button:hover:not(:disabled)::after { translate:3px 0; }
.trail-links { display:flex; justify-content:flex-end; gap:18px; margin-top:2px; }
.trail-links button { min-height:32px; padding:4px 0; border:0; background:none; font:400 calc(10.5px * var(--text-scale)) var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.trail-links button:hover:not(:disabled) { background:none; color:var(--ochre-hi); }
#play:has(#dialogue:not([hidden]),#companion-parting:not([hidden])) #trail-hud { display:none; }
#play:has(#dialogue:not([hidden])) #hover-label { display:none; }
#play:has(#codex:not([hidden])) #soundscape { display:none; }

/* ── Notices arrive in the upper left, where the scene is quietest. ────── */
.toast { position:absolute; left:24px; top:22px; display:flex; gap:12px; align-items:center; max-width:340px; padding:4px 0; text-shadow:0 1px 6px #000; z-index:3; animation:toast-in .6s var(--ease) both; }
.toast > div:last-child { border-left:1px solid var(--rule); padding-left:12px; }
.toast .eyebrow { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.toast p { margin-top:0 !important; }
.toast p { margin:3px 0 0; font-size:calc(15px * var(--text-scale)); line-height:1.3; color:var(--ink); overflow-wrap:anywhere; }
.toast .seal { width:46px; height:46px; flex:none; border-radius:50%; background:radial-gradient(circle at 40% 35%,#b84a33,#5e1c12 72%); box-shadow:inset 0 0 0 3px #7b2a1c, 0 3px 8px #000a; }
.toast .seal.rive { background:none; box-shadow:none; }
.toast .seal canvas { width:100%; height:100%; display:block; }
.toast.leaving { animation:toast-out .45s ease-in both; }
@keyframes toast-in { from { opacity:0; translate:-14px 0; } }
@keyframes toast-out { to { opacity:0; translate:-14px 0; } }

/* Subtitles: one line low in the frame, above the stage front. */
#subtitle { position:absolute; bottom:136px; left:50%; translate:-50% 0; width:max-content; max-width:min(720px,56vw); margin:0; padding:6px 28px; text-align:center; font-size:calc(17px * var(--text-scale)); line-height:1.4; color:#fbf1dc; background:radial-gradient(closest-side,#0b0806c4 30%,#0b080600); text-shadow:0 1px 3px #000, 0 0 12px #000; pointer-events:none; max-height:30%; overflow:hidden; z-index:3; }
/* Narration is a caption, set as prose, not a spoken line. */
#subtitle.narration { width:min(620px,52vw); text-align:left; font-style:italic; color:#eadfc8; background:linear-gradient(90deg,#0b0806d9,#0b0806a6 85%,#0b080600); padding:10px 20px; box-shadow:inset 1px 0 var(--ochre); max-height:none; }
[data-subtitles=false] :is(#subtitle,#soundscape) { display:none !important; }
#action-bar #soundscape { width:max-content; max-width:min(560px,calc(100vw - 32px)); margin:0 0 2px; padding:0 12px; text-align:center; font-size:calc(13px * var(--text-scale)); line-height:1.3; font-style:italic; color:var(--ink-2); text-shadow:0 1px 4px #000, 0 0 10px #000; pointer-events:none; }

/* ── The opening (opening.ts): the HUD waits while the scene fades up under letterbox bars, narration and a lower third, then returns. */
#play[data-opening] .viewport-wrap > :not(#viewport,.vignette),#play[data-opening] #action-bar { opacity:0 !important; pointer-events:none; }
#play[data-hud-in] .viewport-wrap > :not(#viewport,.vignette,.opening-hint),#play[data-hud-in] #action-bar { animation:hud-in 1.1s var(--ease) both; }
@keyframes hud-in { from { opacity:0; } }
.opening { position:fixed; inset:0; z-index:40; cursor:pointer; }
.opening-veil { position:absolute; inset:0; background:var(--night); transition:opacity 1.6s ease-in; }
.opening.short .opening-veil { transition-duration:1s; }
.opening.lifted .opening-veil { opacity:0; }
.opening-bar { position:absolute; left:0; right:0; top:0; height:9vh; background:#050403; transition:translate .7s ease-in-out; }
.opening-bar.bottom { top:auto; bottom:0; }
.opening.ending { pointer-events:none; }
.opening.ending .opening-bar { translate:0 -100%; }
.opening.ending .opening-bar.bottom { translate:0 100%; }
.opening.ending > :not(.opening-bar) { opacity:0 !important; transition:opacity .4s; }
.opening-line { position:absolute; left:50%; bottom:calc(9vh + 26px); translate:-50% 0; width:max-content; max-width:min(820px,72vw); margin:0; text-align:center; font:italic 400 calc(22px * var(--text-scale))/1.45 var(--body); color:#f8eedb; text-shadow:0 1px 3px #000,0 0 16px #000,0 0 30px #000; opacity:0; transition:opacity .4s; }
.opening-line.shown { opacity:1; }
.opening-third { position:absolute; left:5vw; bottom:calc(9vh + 96px); display:flex; gap:16px; align-items:center; opacity:0; translate:-14px 0; transition:opacity .7s, translate .7s var(--ease); }
.opening-third.shown { opacity:1; translate:0 0; }
.opening-third img { width:68px; height:86px; object-fit:cover; object-position:50% 22%; border-radius:34px 34px 2px 2px; box-shadow:0 0 0 1px var(--rule), 0 6px 18px #000; }
.opening-third p { margin:0; padding-left:16px; border-left:1px solid var(--rule); text-shadow:0 1px 3px #000,0 0 12px #000; }
.opening-third strong { display:block; font:400 calc(24px * var(--text-scale))/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.opening-third span { color:var(--ochre-hi); font-style:italic; font-size:calc(16px * var(--text-scale)); }
/* Skip is an inscribed command in the lower letterbox bar: it never covers the subtitle or boxes the painting. */
.opening-skip { position:absolute; right:22px; bottom:max(0px,calc(4.5vh - 22px)); min-height:44px; padding:10px 2px; background:none; border:0; border-radius:0; box-shadow:inset 0 -1px var(--rule); color:var(--ink-2); font:400 calc(11px * var(--text-scale)) var(--display); letter-spacing:.16em; text-transform:uppercase; }
.opening-skip:hover:not(:disabled) { background:none; color:var(--ochre-hi); box-shadow:inset 0 -1px var(--ochre-hi); }
.opening-skip kbd { margin-left:6px; }
.opening-hint { position:absolute; left:50%; top:118px; translate:-50% 0; margin:0; padding:6px 20px; font-size:calc(15px * var(--text-scale)); font-style:italic; color:var(--ink); background:radial-gradient(closest-side,#0b0806d9 40%,#0b080600); text-shadow:0 1px 4px #000; white-space:nowrap; pointer-events:none; z-index:4; transition:opacity .6s; }
.opening-hint.leaving { opacity:0; }
.opening-before { position:absolute; left:5vw; top:calc(9vh + 20px); display:flex; align-items:center; gap:16px; max-width:85vw; }
.opening-before img { width:68px; height:86px; object-fit:cover; border-radius:34px 34px 2px 2px; box-shadow:0 0 0 1px var(--rule); }
.opening-before p { margin:0; text-shadow:0 2px 5px #000,0 0 18px #000; }
.opening-before strong { display:block; font:400 calc(22px * var(--text-scale))/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); overflow-wrap:anywhere; }
.opening-before span { display:block; color:var(--ochre-hi); font-style:italic; font-size:calc(16px * var(--text-scale)); }
@media (max-height:500px) { .opening-before { top:5vh; left:5vw; } .opening-before img { width:40px; height:50px; } .opening-before strong { font-size:calc(17px * var(--text-scale)); } .opening-before span { font-size:calc(12px * var(--text-scale)); } }

/* ── Things in the world ───────────────────────────────────────────────── */
#hover-label { position:absolute; top:100px; left:50%; translate:-50% 0; margin:0; padding:3px 18px; font:italic 400 calc(15px * var(--text-scale)) var(--body); color:var(--ochre-hi); background:radial-gradient(closest-side,#0b0806d9 40%,#0b080600); text-shadow:0 1px 4px #000; pointer-events:none; z-index:2; }
#world-controls,#combat-tags,#combat-floats { position:absolute; inset:0; pointer-events:none; }
#combat-floats { overflow:hidden; z-index:2; }
/* An unmarked spot on the painting until hovered, focused, near, or Alt is held. */
#world-controls .mark { position:absolute; width:calc(var(--r) * 2px * var(--s,1)); height:calc(var(--r) * 2px * var(--s,1)); min-width:28px; min-height:28px; translate:-50% -50%; padding:0; border:0; border-radius:50%; background:none; box-shadow:none; pointer-events:auto; cursor:pointer; }
#world-controls[data-held] { display:none; }
#world-controls .mark::before { content:''; position:absolute; inset:-35%; border-radius:50%; background:radial-gradient(circle,#ffd98a59 0%,#e9b85a2e 38%,#e9b85a00 70%); mix-blend-mode:screen; opacity:0; transition:opacity .25s; pointer-events:none; }
#world-controls .mark:is(:hover,:focus-visible,.glint)::before { opacity:1; }
#world-controls .mark.idle::before { filter:grayscale(.7); }
#world-controls .mark:hover,#world-controls .mark:focus-visible { box-shadow:none; outline:none; background:none; translate:-50% -50%; }
/* A person is clicked on the body: a narrow upright shape, so neighbours never share a spot. */
#world-controls .mark.person { height:calc(var(--r) * 4.6px * var(--s,1)); border-radius:45%; }
/* The name sits on a small plate with a stem down to the thing it names. */
#world-controls .mark .tag { position:absolute; left:50%; bottom:calc(100% + 10px + var(--lift,0px)); translate:var(--tagx,-50%) 0; padding:4px 12px 5px; background:#0b0806e0; border-radius:2px; box-shadow:0 4px 14px #0009; font:400 calc(11.5px * var(--text-scale))/1.3 var(--display); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; text-align:center; color:var(--ink); opacity:0; transition:opacity .2s, translate .25s var(--ease); pointer-events:none; }
#world-controls .mark .tag::after { content:''; position:absolute; left:calc(50% - .5px); top:100%; width:1px; height:9px; background:linear-gradient(var(--ochre),#c9a56b00); }
#world-controls .mark .tag small { display:block; max-width:300px; overflow:hidden; text-overflow:ellipsis; font:italic 400 calc(12.5px * var(--text-scale)) var(--body); letter-spacing:0; text-transform:none; color:var(--ochre-hi); }
#world-controls .mark:is(:hover,:focus-visible,.glint) .tag,[data-world-labels] #world-controls .mark .tag { opacity:1; z-index:1; }
#world-controls .mark:is(:hover,:focus-visible) { z-index:2; }
#world-controls .mark[data-vside=t] .tag { bottom:auto; top:calc(100% + 10px + var(--lift,0px)); }
#world-controls .mark[data-vside=t] .tag::after { top:auto; bottom:100%; background:linear-gradient(0deg,var(--ochre),#c9a56b00); }
/* A way out always shows a small chevron at its threshold. */
#world-controls .mark.exit::after { content:''; position:absolute; left:50%; top:50%; width:8px; height:8px; translate:-50% -30%; rotate:-45deg; border-top:1.5px solid var(--ochre-hi); border-right:1.5px solid var(--ochre-hi); filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 6px #000); opacity:.85; }
#world-controls .mark.exit.idle::after { border-color:var(--ink-3); }
/* Out of view, a thing waits at the edge: named only while Alt is held or it has focus; a way out keeps its chevron. */
#world-controls .mark.edge:not(.exit):not(.guided):not(:focus-visible) { opacity:0; }
[data-world-labels] #world-controls .mark.edge { opacity:1; }
#world-controls .mark.guided { opacity:1; z-index:2; }
#world-controls .mark.guided::before { opacity:.7; animation:guide-breathe 3.2s ease-in-out infinite; }
#world-controls .mark.guided .tag { opacity:1; box-shadow:0 4px 14px #0009, inset 0 -1px var(--ochre); }
#world-controls .mark.guided:not(.exit)::after { content:''; position:absolute; inset:-6px; border:1px solid #ecd19a8c; border-radius:50%; pointer-events:none; }
#world-controls .mark.exit.guided::after { border-color:var(--ochre-hi); opacity:1; }
#world-controls .mark.edge::before { inset:0; }
@keyframes guide-breathe { 50% { opacity:.35; } }
.glint::before { animation:world-glint 2.4s ease-out; }
@keyframes world-glint { 0% { opacity:0; scale:.4; } 20% { opacity:1; scale:1.25; } 100% { opacity:0; scale:1; } }
.mark.dangerous .tag { box-shadow:0 4px 14px #0009, inset 0 -1px var(--minium); }
.mark.dangerous .tag small { color:#efb39c; }
#world-menu { position:absolute; z-index:4; translate:-50% calc(-100% - 18px); min-width:230px; max-width:330px; padding:12px 14px 14px; background:var(--field); border-top:1px solid var(--ochre); box-shadow:0 14px 34px #000c; }
#world-menu .menu-name { margin:0 0 4px; font:400 calc(12.5px * var(--text-scale)) var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-hi); }
#world-menu .menu-look { margin:0 0 8px; font-size:calc(14px * var(--text-scale)); font-style:italic; color:var(--ink-2); }
#world-menu .menu-verbs { display:grid; gap:2px; }
#world-menu button { width:100%; min-height:40px; text-align:left; font-size:calc(15px * var(--text-scale)); padding:7px 10px; background:none; border:0; border-bottom:1px solid var(--rule-faint); border-radius:0; }
#world-menu button:hover:not(:disabled),#world-menu button:focus-visible { background:#c9a56b17; box-shadow:inset 2px 0 var(--ochre); }
#world-menu small { font-size:calc(12.5px * var(--text-scale)); color:var(--ink-3); }
#scene-notice { position:absolute; width:270px; max-width:60%; padding:12px 16px 13px; pointer-events:none; font-size:calc(14px * var(--text-scale)); z-index:1; background:#0b0806d4; border-top:1px solid var(--ochre); box-shadow:0 10px 30px #0009; }
#scene-notice strong { display:block; font:400 calc(14px * var(--text-scale))/1.3 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:5px 0 6px; }
#scene-notice p { margin:0; font-style:italic; color:var(--ink-2); }
.viewport-wrap:has(#dialogue:not([hidden])) #scene-notice,.viewport-wrap:has(#codex:not([hidden])) #scene-notice { visibility:hidden; }

/* ── The stage front: your people, left. ───────────────────────────────── */
.party-frames { position:absolute; left:22px; bottom:14px; display:grid; gap:7px; justify-items:start; z-index:4; }
#party { display:flex; flex-direction:column-reverse; align-items:flex-start; gap:9px; }
.frame { display:flex; align-items:flex-end; gap:12px; }
/* Each person stands in a niche: a round-headed portrait, as in a wall of the forum. */
.medallion { position:relative; flex:none; width:60px; height:76px; border-radius:30px 30px 2px 2px; overflow:hidden; background:var(--night-3); box-shadow:0 0 0 1px #c9a56b70, 0 6px 16px #000b; }
.medallion img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.medallion::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(0deg,#0b080699,#0b080600 45%); pointer-events:none; }
.medallion .ring,.medallion canvas { display:none; }
.frame.companion .medallion { width:42px; height:54px; border-radius:21px 21px 2px 2px; box-shadow:0 0 0 1px #c9a56b4d, 0 4px 12px #000b; }
.frame-text { display:grid; gap:4px; min-width:0; padding-bottom:2px; text-shadow:0 1px 4px #000; }
.frame-text strong { font:400 calc(13.5px * var(--text-scale))/1.15 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.frame.companion .frame-text strong { font-size:calc(11.5px * var(--text-scale)); color:var(--ink-2); }
.frame-text .hpbar { display:block; width:150px; height:3px; background:#2b1611; box-shadow:0 0 0 1px #0b0806; }
.frame.companion .frame-text .hpbar { width:96px; height:2px; }
.frame-text .hpbar i { display:block; height:100%; background:var(--minium); transform-origin:left; transform:scaleX(var(--share,1)); transition:transform .45s var(--ease); }
.frame-text small { font-size:calc(12.5px * var(--text-scale)); color:var(--ink-2); line-height:1; }
.frame.dead { filter:grayscale(1) brightness(.55); }
.frame.dead .medallion { box-shadow:0 0 0 1px #6b625a; }
.frame.low .hpbar i { animation:low-pulse 1.4s ease-in-out infinite; }
.frame.low .medallion { box-shadow:0 0 0 1px var(--minium), 0 6px 16px #000b; }
@keyframes low-pulse { 50% { filter:brightness(1.7); } }
.frame.hit .medallion::before { content:''; position:absolute; inset:0; z-index:1; background:#c9492f; mix-blend-mode:multiply; animation:struck .6s ease-out forwards; }
.frame.heal .medallion::before { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 50% 70%,#e9e2b8aa,#e9e2b800 70%); mix-blend-mode:screen; animation:struck 1s ease-out forwards; }
@keyframes struck { to { opacity:0; } }
#kit { margin:0; font-size:calc(14px * var(--text-scale)); color:var(--ink-2); }
/* Preparation is a quiet part of the party: one line under your name that opens the kit. */
#readiness { max-width:150px; min-height:28px; padding:2px 0; font:italic 400 calc(13px * var(--text-scale))/1.3 var(--body); color:var(--ink-2); background:none; border:0; text-align:left; text-shadow:0 1px 4px #000; }
#readiness:hover:not(:disabled) { background:none; color:var(--ochre-hi); }

/* ── The stage front: records and time, centre. ────────────────────────── */
#action-bar { position:absolute; left:50%; bottom:12px; translate:-50% 0; display:grid; justify-items:center; gap:8px; z-index:4; pointer-events:none; }
#action-bar > * { pointer-events:auto; }
.action-buttons { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:10px; }
/* left:50% + width:auto sizes the row against the right half of the window. The
   side columns (minmax(0,1fr)) then collapse and the labels paint over the party
   niches. Size the row to its labels instead. From 901px up, keep it right of
   the niches and centre the dial when the window has room. 216px clears the
   niche below 1100px (22+60+12+110 plus a 12px gap); 256px clears the wider
   health stroke above that. Phone and fight keep their own rules. */
@media (min-width:681px) {
  #play:not([data-fighting=true]) .action-buttons { grid-template-columns:max-content auto max-content; width:max-content; }
  #play:not([data-fighting=true]) #action-bar { width:max-content; max-width:calc(100% - 24px); }
}
@media (min-width:681px) and (max-width:900px) {
  #play:not([data-fighting=true]) #action-bar { left:max(96px, calc(50% - 283px)); right:auto; translate:none; }
}
@media (min-width:901px) {
  #play:not([data-fighting=true]) #action-bar { left:max(216px, calc(50% - 446px)); right:auto; width:max-content; max-width:calc(100% - 228px); translate:none; }
}
@media (min-width:1101px) {
  #play:not([data-fighting=true]) #action-bar { left:max(256px, calc(50% - 446px)); max-width:calc(100% - 268px); }
}
@media (max-width:1100px) and (min-width:901px) and (min-height:601px) {
  #play:not([data-fighting=true]) .action-buttons { gap:6px; }
  #play:not([data-fighting=true]) .action-buttons button { padding-inline:4px; letter-spacing:.06em; }
}
@media (max-width:1599px) {
  [data-text-large=true] #play:not([data-fighting=true]) #action-bar { left:50%; width:max-content; max-width:calc(100% - 24px); translate:-50% 0; }
}
.tools,.tools-right { display:flex; align-items:flex-end; gap:2px; }
.tools { justify-self:end; }
.tools-right { justify-self:start; }
.action-buttons button { position:relative; display:grid; justify-items:center; align-content:end; gap:5px; min-width:52px; height:58px; padding:4px 6px 6px; background:none; border:0; border-radius:0; font:400 calc(9.5px * var(--text-scale)) var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); text-shadow:0 1px 4px #000; }
.action-buttons button::after { content:''; position:absolute; left:16px; right:16px; bottom:0; height:1px; background:var(--ochre); scale:0 1; transition:scale .3s var(--ease); }
.action-buttons button:hover:not(:disabled) { background:none; color:var(--ink); }
.action-buttons button:hover:not(:disabled)::after,.action-buttons [aria-current=true]::after { scale:1 1; }
.action-buttons [aria-current=true] { color:var(--ochre-hi); }
.action-buttons svg { width:22px; height:22px; fill:none; stroke:var(--ochre); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px #000); transition:stroke .2s, translate .3s var(--ease); }
.action-buttons button:hover:not(:disabled) svg { stroke:var(--ochre-hi); translate:0 -1px; }
.action-buttons button:not(#pause) { grid-template-columns:auto auto; column-gap:5px; }
.action-buttons button:not(#pause) svg { grid-column:1 / -1; }
.action-buttons button:not(#pause) kbd { font-size:calc(8.5px * var(--text-scale)); color:var(--ochre); opacity:.75; }

#journal-count:not(:empty) { position:absolute; top:0; left:calc(50% + 8px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; font:400 10px/16px var(--body); text-align:center; color:#fff1dc; background:var(--minium); box-shadow:0 0 0 2px var(--night); }
/* Time itself sits at the centre of the stage front: a dial you press to hold it. */
#pause { width:74px; min-width:74px; height:74px; margin:0 6px 2px; padding:0; border-radius:50%; align-content:center; gap:2px; background:radial-gradient(circle at 50% 40%,#1f1711,#0b0806 70%); box-shadow:0 0 0 1px var(--rule), 0 0 0 5px #0b0806cc, 0 0 0 6px var(--rule-faint), 0 8px 22px #000c; color:var(--ink); }
/* Its face is a sundial: twelve engraved hours, and a shadow that travels while time runs and stops when you hold it. */
#pause::before { content:''; position:absolute; inset:4px; border-radius:50%; background:repeating-conic-gradient(from -1deg,#c9a56b8c 0 2deg,#c9a56b00 2deg 30deg); -webkit-mask:radial-gradient(closest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px)); mask:radial-gradient(closest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px)); transition:background .5s; }
#pause::after { content:''; position:absolute; left:calc(50% - .5px); right:auto; top:7px; bottom:50%; width:1px; height:auto; scale:1; background:linear-gradient(#c9a56b00,#c9a56b99); transform-origin:50% 100%; animation:gnomon 60s linear infinite; }
@keyframes gnomon { to { rotate:1turn; } }
#pause svg { position:relative; width:20px; height:20px; stroke:var(--ink); }
#pause :is(span,kbd) { position:relative; }
#pause .sweep { position:absolute; inset:3px; border-radius:50%; background:conic-gradient(var(--minium) calc(var(--arc,0) * 1turn),#0000 0); -webkit-mask:radial-gradient(closest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px)); mask:radial-gradient(closest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px)); pointer-events:none; filter:drop-shadow(0 0 3px #c9492f99); }
#pause kbd { position:static; font-size:calc(8.5px * var(--text-scale)); }
#pause span { font-size:calc(9.5px * var(--text-scale)); }
#pause:hover:not(:disabled) { box-shadow:0 0 0 1px var(--ochre), 0 0 0 5px #0b0806cc, 0 0 0 6px var(--rule), 0 8px 22px #000c; }
[data-paused=true] #pause { color:var(--ochre-hi); background:radial-gradient(circle at 50% 40%,#3a2a19,#140e09 72%); box-shadow:0 0 0 1px var(--ochre-hi), 0 0 0 5px #0b0806cc, 0 0 0 6px var(--rule), 0 0 26px #c9a56b40; }
[data-paused=true] #pause::before { background:repeating-conic-gradient(from -1deg,#ecd19a 0 2deg,#ecd19a00 2deg 30deg); }
[data-paused=true] #pause::after { animation-play-state:paused; background:linear-gradient(#ecd19a00,#ecd19a); }
[data-paused=true] #pause svg { stroke:var(--ochre-hi); }
#purse { align-self:center; margin:0 0 6px 12px; padding-left:14px; border-left:1px solid var(--rule-faint); font:400 calc(12px * var(--text-scale)) var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ochre-hi); white-space:nowrap; text-shadow:0 1px 4px #000; }
[data-fighting=true] .tools,[data-fighting=true] #purse { visibility:hidden; }

/* ── The stage front: the view, right. ─────────────────────────────────── */
#viewport,#world-controls,#combat-tags { touch-action:none; }
#camera-controls { position:absolute; right:22px; bottom:16px; z-index:3; max-width:calc(100% - 24px); display:grid; justify-items:end; gap:4px; text-shadow:0 1px 4px #000; }
#camera-controls p { margin:0; text-align:right; font:italic 400 calc(12.5px * var(--text-scale)) var(--body); color:var(--ink-3); }
#camera-controls > div { display:flex; align-items:center; }
#camera-controls button { min-width:40px; min-height:40px; padding:6px 10px; background:none; border:0; border-radius:0; font:400 calc(10.5px * var(--text-scale)) var(--display); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--ink-2); }
#camera-controls > div { border-top:1px solid var(--rule); }
#camera-controls kbd { color:var(--ochre); opacity:.75; }
#camera-controls :is([data-camera=in],[data-camera=out]) { font:400 calc(18px * var(--text-scale))/1 var(--body); }
#camera-controls button:hover:not(:disabled) { background:none; color:var(--ink); }
#camera-controls button[aria-pressed=true] { color:var(--ochre-hi); box-shadow:inset 0 -1px var(--ochre); }
#camera-controls kbd { margin-left:5px; }
#play[data-camera-free] [data-camera=follow] { color:var(--ochre-hi); }
#play[data-camera-drag] #viewport,#play[data-camera-drag] .mark { cursor:grabbing; }
#play[data-survey] .tracker,#play[data-survey] #scene-notice,#play[data-survey] #companion-remark { visibility:hidden; }

/* ── A fight ───────────────────────────────────────────────────────────── */
/* Seven orders rise onto the stage front: one row, divided like an inscription's columns, never cards. */
#tactical-actions { display:flex; align-items:stretch; padding:0 6px; background:radial-gradient(closest-side,#0b0806b3 55%,#0b080600); }
#tactical-actions:empty { display:none; }
#tactical-actions .quiet { display:none; }
#tactical-actions button { position:relative; display:grid; grid-template-rows:auto auto 1fr; justify-items:center; align-content:start; width:96px; min-height:96px; padding:10px 6px 9px; text-align:center; background:none; border:0; border-radius:0; text-shadow:0 1px 4px #000; transition:color .2s, background-color .25s; }
#tactical-actions button + button { box-shadow:-1px 0 var(--rule-faint); }
#tactical-actions button::after { content:''; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--ochre-hi); scale:0 1; transition:scale .3s var(--ease); }
#tactical-actions button:hover:not(:disabled) { background:linear-gradient(0deg,#c9a56b1f,#c9a56b00); }
#tactical-actions button:hover:not(:disabled)::after { scale:.6 1; opacity:.6; }
#tactical-actions img { display:block; width:50px; height:58px; object-fit:cover; object-position:50% 45%; border-radius:25px 25px 2px 2px; box-shadow:0 0 0 1px #c9a56b59, 0 6px 14px #000c; filter:saturate(.9); transition:box-shadow .25s, filter .25s, translate .3s var(--ease); }
#tactical-actions button:hover:not(:disabled) img { box-shadow:0 0 0 1px var(--ochre), 0 8px 18px #000c; translate:0 -2px; }
#tactical-actions strong { display:block; margin-top:6px; font:400 calc(12px * var(--text-scale)) var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
/* What an order does opens above it on hover or focus, as a tip; an unavailable order keeps its reason in view. */
#tactical-actions small { position:absolute; left:50%; bottom:calc(100% + 10px); translate:-50% 4px; width:220px; padding:9px 12px 10px; font:italic 400 calc(13.5px * var(--text-scale))/1.3 var(--body); color:var(--ink); text-align:left; text-shadow:none; background:#0b0806f2; border-top:1px solid var(--ochre); box-shadow:0 10px 26px #000c; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, translate .25s var(--ease), visibility 0s .2s; z-index:2; }
#tactical-actions small span { display:block; margin-top:5px; font-style:normal; font-size:calc(12.5px * var(--text-scale)); color:var(--ink-2); }
#tactical-actions button:is(:hover,:focus-visible) small { opacity:1; visibility:visible; translate:-50% 0; transition-delay:0s; }
#tactical-actions button:disabled small span { display:none; }
#tactical-actions .key { position:absolute; top:5px; left:9px; font:400 calc(10px * var(--text-scale)) var(--display); color:var(--ink-3); }
#tactical-actions [aria-pressed=true] { background:linear-gradient(0deg,#c9a56b33,#c9a56b00 90%); }
#tactical-actions [aria-pressed=true]::after { scale:1 1; }
#tactical-actions [aria-pressed=true] img { box-shadow:0 0 0 1px var(--ochre-hi), 0 0 22px #ecd19a59; filter:saturate(1.05) brightness(1.08); }
#tactical-actions [aria-pressed=true] strong { color:var(--ochre-hi); }
#tactical-actions button:disabled { opacity:1; }
#tactical-actions button:disabled strong { opacity:.45; }
#tactical-actions button:disabled img { filter:grayscale(1) brightness(.5); box-shadow:0 0 0 1px #6b625a66; }
#combat-strip { display:none; }
[data-fighting=true] #combat-strip { display:grid; justify-items:center; gap:3px; padding:4px 28px; background:radial-gradient(closest-side,#0b0806cc 40%,#0b080600); text-shadow:0 1px 3px #000; }
#queue { display:flex; gap:26px; margin:0; font-size:calc(13.5px * var(--text-scale)); white-space:nowrap; }
#queue > span { display:flex; align-items:baseline; gap:8px; }
#queue strong { font-weight:400; color:var(--ink); }
#queue small { display:inline; font:400 calc(10px * var(--text-scale)) var(--display); text-transform:uppercase; letter-spacing:.16em; color:var(--ochre); }
#queue > span > span { color:var(--ink-2); font-style:italic; font-size:.92em; }
#target-hint { margin:0; font-size:calc(13px * var(--text-scale)); font-style:italic; color:var(--ink-2); }
#intentions { display:flex; flex-wrap:wrap; justify-content:center; gap:3px 20px; font-size:calc(13px * var(--text-scale)); color:#e3a08c; }
#intentions strong { font-weight:400; color:#f0b9a8; }
[data-fighting=true] #intentions { display:none; }
/* Fighters carry a slim inscription over their heads: the name, a thin stroke of health, the count. No plate.
   Allies are bone and ochre; foes are red lead. A foe you can pick is a button; the one you have picked is marked beneath. */
#combat-tags button { position:absolute; transform:translate(-50%,-100%); display:grid; justify-items:center; gap:3px; padding:2px 4px 6px; background:none; border:0; border-radius:0; font:400 calc(11px * var(--text-scale))/1.15 var(--display); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; pointer-events:auto; box-shadow:none; color:var(--ink); text-shadow:0 0 3px #000, 0 0 8px #000, 0 1px 2px #000; }
#combat-tags button::after { content:''; display:block; order:1; width:100%; min-width:46px; height:2px; background:linear-gradient(90deg,var(--bar,var(--ochre-hi)) calc(var(--share,1) * 100%),#0b0806b3 0); box-shadow:0 0 0 1px #0b080680, 0 1px 4px #000; }
#combat-tags button span { order:2; color:var(--ink-2); font:400 calc(11.5px * var(--text-scale))/1 var(--body); letter-spacing:0; }
#combat-tags button.enemy { --bar:var(--minium); color:#f3c0ad; }
#combat-tags button.companion { --bar:#d8ccb0; }
#combat-tags button:hover:not(:disabled) { background:none; color:#fff3e8; }
#combat-tags button.enemy:hover:not(:disabled)::after { box-shadow:0 0 0 1px #c9492f99, 0 1px 6px #000; }
#combat-tags button[aria-pressed=true]::before { content:''; position:absolute; left:50%; bottom:-6px; width:7px; height:7px; translate:-50% 0; rotate:45deg; border-right:1.5px solid var(--minium); border-bottom:1.5px solid var(--minium); filter:drop-shadow(0 0 3px #000); }
#combat-tags button[aria-pressed=true] { color:#ffd6c6; }
#combat-tags button:disabled { opacity:1; color:var(--ink); cursor:default; }
#combat-floats .float { position:absolute; transform:translate(-50%,-100%); font:400 calc(24px * var(--text-scale)) var(--display); text-shadow:0 2px 3px #000, 0 0 10px #000; animation:float-up 1.8s var(--ease) forwards; }
#combat-floats .heal { color:#e2d8bd; }
#combat-floats .break { color:#f2c46b; }
#combat-floats .damage { color:#f08a6c; font-size:calc(20px * var(--text-scale)); }
@keyframes float-up { from { opacity:1; margin-top:0; } 70% { opacity:1; } to { opacity:0; margin-top:-36px; } }
@keyframes float-still { 0%,80% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { #combat-floats .float { animation:float-still 1.8s linear forwards; } }
[data-motion=reduced] #combat-floats .float { animation:float-still 1.8s linear forwards !important; }
[data-paused=true] #combat-floats .float,[data-paused=true] .frame.low .hpbar i { animation-play-state:paused !important; }
/* The fight's account lives in the right margin: what is about to land, then what happened. */
[data-fighting=true] .tracker { display:none; }
#combat-reading { position:absolute; right:22px; top:20px; width:228px; max-height:calc(100% - 220px); overflow:auto; padding:0 0 0 16px; border-left:1px solid var(--rule); z-index:3; text-shadow:0 1px 5px #000; }
#combat-reading header { padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid var(--rule-faint); }
#combat-reading header > :is(.eyebrow,small) { display:none; }
#combat-reading h2 { margin:0; font:400 calc(12px * var(--text-scale)) var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
#combat-reading ol { list-style:none; margin:0; padding:0; }
#combat-reading header > small { color:var(--ink-3); font-size:calc(12px * var(--text-scale)); font-style:italic; }
#combat-reading li { padding:0; margin:0 0 9px; }
.reading-who { display:flex; align-items:baseline; justify-content:space-between; gap:10px; line-height:1.2; }
.reading-who strong { font:400 calc(10px * var(--text-scale)) var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
#combat-reading li.enemy .reading-who strong { color:#f0b9a8; }
.reading-who > span { color:var(--ochre-hi); font-size:calc(12px * var(--text-scale)); white-space:nowrap; }
#combat-reading li p { margin:2px 0; font-size:calc(13.5px * var(--text-scale)); line-height:1.25; }
#combat-reading li small { display:block; font-size:calc(11.5px * var(--text-scale)); font-style:italic; color:#d4c6ab; line-height:1.3; }
.commitment-meter { display:block; height:2px; margin:5px 0; background:#c9a56b26; }
.commitment-meter i { display:block; height:100%; background:var(--ochre-hi); }
.enemy .commitment-meter i { background:var(--minium); }
.reading-advice { margin:2px 0 0; padding-top:8px; border-top:1px solid var(--rule-faint); font-size:calc(12.5px * var(--text-scale)); font-style:italic; line-height:1.3; color:var(--ink); }
.reading-advice span { display:block; margin-top:8px; font:400 calc(10px * var(--text-scale)) var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
[data-paused=false] #combat-reading li:not(.committed),[data-paused=false] #combat-reading li small { display:none; }
/* Recent events, beneath the account. The subtitle carries the newest line, so the feed starts at the one before. */
.log { position:absolute; left:24px; bottom:190px; width:min(250px,22vw); max-height:none; overflow:hidden; display:flex; flex-direction:column-reverse; gap:4px; padding-left:14px; border-left:1px solid var(--rule-faint); pointer-events:none; font-size:calc(12.5px * var(--text-scale)); color:var(--ink-2); text-shadow:0 1px 3px #000, 0 0 10px #000; z-index:1; }
.log p { margin:0; line-height:1.3; }
.log p:first-child { color:var(--ink); }
.log p.held { display:none; }
.log p:nth-child(n+5) { display:none; }
#play:not([data-fighting=true]) .log { display:none; }
[data-fighting=true] #camera-controls p { display:none; }
/* In a fight the newest line speaks above the orders, not through them. */
[data-fighting=true] :is(#subtitle,#target-hint,#combat-strip) { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important; padding:0 !important; margin:0 !important; }
[data-fighting=true] #action-bar #soundscape { display:none; }
[data-text-large=true] [data-fighting=true] .log { bottom:236px; }
[data-text-large=true] [data-fighting=true] #camera-controls { bottom:96px; }
/* A fight's one pause statement heads the command row, where the next decision is made. */
[data-fighting=true] #pause-banner { top:auto; bottom:var(--held-at,108px); max-width:min(640px,60vw); font-size:calc(13.5px * var(--text-scale)); color:var(--ochre-hi); }
/* Legibility: in a fight the architecture closes in. The margins become real fields and the stage front rises behind the orders. */
[data-fighting=true] .vignette { background:
  linear-gradient(0deg,#0b0806 0,#0b0806e6 64px,#0b080699 120px,#0b080600 200px),
  radial-gradient(ellipse min(360px,32vw) min(560px,76vh) at 100% 0,#0b0806f2 55%,#0b080600 100%),
  radial-gradient(ellipse min(340px,30vw) min(320px,44vh) at 0 100%,#0b0806eb 55%,#0b080600 100%),
  linear-gradient(180deg,#0b0806b3 0,#0b080600 130px); }
[data-fighting=true] .party-frames { bottom:12px; }
/* A fight keeps the stage front's height: the seven orders sit beside the dial as a compact row of painted
   niches, like the genre's ability bar. Names and descriptions open in the tip; touch screens keep the names. */
[data-fighting=true] #action-bar { grid-template-columns:auto auto; grid-template-areas:"orders bar"; align-items:end; gap:16px; }
[data-fighting=true] #tactical-actions { grid-area:orders; gap:3px; padding:0 0 4px; background:none; }
[data-fighting=true] .action-buttons { grid-area:bar; grid-template-columns:auto auto; }
[data-fighting=true] .tools { display:none; }
[data-fighting=true] #pause { width:62px; min-width:62px; height:62px; }
[data-fighting=true] #tactical-actions button { width:44px; min-height:0; padding:12px 0 6px; box-shadow:none; background:none; }
[data-fighting=true] #tactical-actions img { width:40px; height:48px; border-radius:20px 20px 2px 2px; }
[data-fighting=true] #tactical-actions strong { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
[data-fighting=true] #tactical-actions .key { top:0; left:2px; font-size:calc(9.5px * var(--text-scale)); text-shadow:0 0 3px #000; }
[data-fighting=true] #tactical-actions button::after { left:10px; right:10px; }
[data-fighting=true] #tactical-actions button:hover:not(:disabled) { background:none; }
[data-fighting=true] #tactical-actions small::before { content:attr(data-label); display:block; margin-bottom:3px; font:400 calc(11px * var(--text-scale)) var(--display); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-hi); }
[data-fighting=true] #tactical-actions button:disabled small { position:absolute; translate:-50% 4px; width:220px; color:#e5a48d; padding:9px 12px 10px; background:#0b0806f2; border-top:1px solid var(--minium); box-shadow:0 10px 26px #000c; opacity:0; visibility:hidden; text-align:left; font-size:calc(13px * var(--text-scale)); }
[data-fighting=true] #tactical-actions button:disabled:is(:hover,:focus-visible) small { opacity:1; visibility:visible; translate:-50% 0; }
@media (hover:none) {
  [data-fighting=true] #tactical-actions button { width:52px; }
  [data-fighting=true] #tactical-actions strong { position:static; width:auto; height:auto; clip-path:none; margin-top:3px; font-size:calc(8.5px * var(--text-scale)); letter-spacing:.06em; }
}
/* A companion falls: the notice takes the upper left, and nothing else speaks there. */
#fallen { position:absolute; left:24px; top:22px; width:270px; padding:2px 0 2px 16px; border-left:1px solid var(--minium); z-index:3; pointer-events:none; text-shadow:0 1px 5px #000; }
#fallen > div { display:flex; align-items:center; gap:14px; margin:10px 0; }
#fallen img { width:46px; height:58px; object-fit:cover; border-radius:23px 23px 2px 2px; filter:grayscale(.9) brightness(.8); box-shadow:0 0 0 1px #6b625a; }
#fallen strong { font:400 calc(16px * var(--text-scale)) var(--display); letter-spacing:.1em; text-transform:uppercase; color:#e6ddcb; }
#fallen p { margin:0; color:var(--ink-2); font-style:italic; }
[data-fighting=true]:has(#fallen:not([hidden])) :is(#toast,.log) { display:none; }
/* A conversation owns the lower screen: nothing else speaks over it. */
#play:has(#dialogue:not([hidden]),#companion-parting:not([hidden])) :is(.log,#subtitle,#action-bar,.party-frames,#camera-controls) { visibility:hidden; }

/* ── Conversation ──────────────────────────────────────────────────────── */
#dialogue { position:absolute; left:50%; bottom:18px; translate:-50% 0; width:min(1080px,94%); max-height:78%; display:grid; grid-template-columns:216px minmax(0,1fr); gap:32px; padding:28px 32px; overflow:auto; overscroll-behavior:contain; scroll-padding-bottom:28px; z-index:6; border:0; border-top:1px solid var(--rule); background:linear-gradient(180deg,#140e0bf7,#0b0806fa); animation:rise .45s var(--ease) both; }
@keyframes rise { from { opacity:0; translate:-50% 18px; } }
.dialogue-portrait { align-self:start; }
#dialogue-portrait { display:block; width:216px; height:256px; object-fit:cover; object-position:50% 22%; border-radius:108px 108px 2px 2px; box-shadow:0 0 0 1px var(--rule), 0 10px 30px #000a; }
#dialogue-bearing,.bearing { color:var(--ink-2); font-style:italic; font-size:calc(14px * var(--text-scale)); }
#dialogue-bearing { margin:16px 0 10px; }
#dialogue-pledge { border-top:1px solid var(--rule-faint); padding-top:12px; color:var(--ink-2); font-size:calc(14.5px * var(--text-scale)); line-height:1.5; }
#dialogue header { display:flex; align-items:flex-start; gap:12px; }
#dialogue header button { margin-left:auto; }
.speaker-title .eyebrow { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#dialogue-line .their-words strong { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#dialogue-speaker { margin:0; font:400 calc(26px * var(--text-scale)) var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
#dialogue-line { margin:18px 0; font-size:calc(21px * var(--text-scale)); line-height:1.5; max-width:64ch; outline:none; }
#dialogue-line p { margin:8px 0; }
#dialogue-line .your-words { color:var(--ink-2); font-size:calc(15px * var(--text-scale)); font-style:italic; border-left:1px solid var(--rule); padding-left:12px; margin-bottom:18px; }
#dialogue-line strong { display:block; font:400 calc(10.5px * var(--text-scale)) var(--display); letter-spacing:.18em; text-transform:uppercase; color:var(--ochre); font-style:normal; }
#dialogue-line strong + br { display:none; }
#dialogue-options { display:grid; gap:0; margin:0; padding:10px 0 0; list-style:none; border-top:1px solid var(--rule-faint); }
#dialogue-options button { width:100%; min-height:44px; text-align:left; font-size:calc(16.5px * var(--text-scale)); padding:8px 14px; background:transparent; border:0; border-radius:0; color:#eadfc6; }
#dialogue-options button:hover:not(:disabled),#dialogue-options button:focus-visible { background:linear-gradient(90deg,#c9a56b24,#c9a56b00); box-shadow:inset 2px 0 var(--ochre-hi); color:#fff6e4; outline:none; }
#dialogue-options button:disabled { color:var(--ink-3); }
#dialogue-options small { padding:0 14px 6px 30px; font-size:calc(13.5px * var(--text-scale)); font-style:italic; }
.budget { border-block:1px solid var(--rule-faint); padding:6px 0; margin:14px 0; font-size:calc(14px * var(--text-scale)); }
.budget h3 { margin-top:4px; }
.budget strong { white-space:nowrap; color:var(--ochre-hi); font-weight:400; }
#dialogue-budget .budget { margin-bottom:0; }
#dialogue-terms { margin-top:14px; color:var(--ink-2); font-size:calc(15px * var(--text-scale)); }
#dialogue-terms summary { cursor:pointer; min-height:44px; padding:8px 0; color:var(--ochre); }
.companion-terms { margin:12px 0 0; }
.companion-terms dt { font:400 calc(10px * var(--text-scale)) var(--display); letter-spacing:.14em; color:var(--ochre); text-transform:uppercase; margin:12px 0 4px; }
.companion-terms dd { margin:0; }
.companion-card blockquote { margin:10px 0; color:var(--ink); font-size:calc(18px * var(--text-scale)); font-style:italic; }
#companion-remark { position:absolute; left:24px; bottom:118px; width:min(500px,62%); display:flex; gap:16px; align-items:center; padding:4px 0; z-index:5; pointer-events:none; text-shadow:0 1px 5px #000, 0 0 14px #000; }
#companion-remark img { width:56px; height:70px; object-fit:cover; object-position:50% 22%; border-radius:28px 28px 2px 2px; box-shadow:0 0 0 1px var(--rule); }
#companion-remark > div { border-left:1px solid var(--rule); padding-left:14px; }
#companion-remark p { font-size:calc(17px * var(--text-scale)); font-style:italic; line-height:1.4; margin:4px 0 0; }
#companion-parting { position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(800px,94%); max-height:92%; overflow:auto; padding:30px; background:var(--field); border-top:1px solid var(--minium); box-shadow:0 0 0 100vmax #0b0806a6,0 20px 80px #000; z-index:9; }
#companion-parting-scene { display:grid; grid-template-columns:192px minmax(0,1fr); gap:28px; }
#companion-parting img { width:192px; height:230px; object-fit:cover; object-position:50% 22%; border-radius:96px 96px 2px 2px; box-shadow:0 0 0 1px var(--rule); }
#companion-parting h2 { font:400 calc(26px * var(--text-scale)) var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:6px 0 18px; }
#companion-parting blockquote { font-size:calc(22px * var(--text-scale)); font-style:italic; line-height:1.5; margin:0 0 18px; }
#companion-parting-close { display:block; margin:20px 0 0 auto; min-height:44px; }

/* ── The codex: journal, character, companions and world. ──────────────── */
#codex { position:absolute; inset:0; z-index:8; display:grid; grid-template-rows:auto 1fr; justify-items:center; gap:16px; padding:22px 4% 110px; background:radial-gradient(ellipse at center,#0b0806c4,#0b0806f2); backdrop-filter:blur(4px) saturate(.6); animation:fade .3s var(--ease) both; }
@keyframes fade { from { opacity:0; } }
.codex-tabs { display:flex; gap:6px; padding:0; }
.codex-tabs button { position:relative; background:none; border:0; border-radius:0; padding:10px 18px 9px; font:400 calc(13px * var(--text-scale)) var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.codex-tabs button::after { content:''; position:absolute; left:18px; right:18px; bottom:0; height:1px; background:var(--ochre-hi); scale:0 1; transition:scale .3s var(--ease); }
.codex-tabs button:hover:not(:disabled) { background:none; color:var(--ink); }
.codex-tabs button kbd { margin-left:8px; }
.codex-tabs [aria-current=true] { color:var(--ink); }
.codex-tabs [aria-current=true]::after { scale:1 1; }
.sheet { align-self:start; width:min(1180px,100%); min-height:min(420px,100%); max-height:100%; overflow:auto; padding:28px 36px 32px; border:0; border-top:1px solid var(--rule); }
.sheet > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.sheet > header h2 { margin:0; font-size:calc(22px * var(--text-scale)); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.sheet > header button,#dialogue header button { min-height:44px; padding:6px 0 6px 12px; border:0; font:400 calc(10.5px * var(--text-scale)) var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); background:none; }
.sheet > header button:hover:not(:disabled),#dialogue header button:hover:not(:disabled) { background:none; color:var(--ochre-hi); }
.sheet > header button:focus-visible,#dialogue header button:focus-visible { outline:none; color:var(--ochre-hi); box-shadow:inset 0 -1px var(--ochre-hi); }
.columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:36px; }
.columns > div > h3:first-child { margin-top:0; }
.journal-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:36px; }
.journal-layout .question { padding-right:32px; border-right:1px solid var(--rule-faint); }
.journal-layout .question h3:first-child { margin-top:0; }
.journal-layout .objective { font-size:calc(22px * var(--text-scale)); font-style:italic; line-height:1.3; color:var(--ink); margin:6px 0 12px; }
.journal-layout .leads li { font-size:calc(16px * var(--text-scale)); }
.journal-layout .personal { font-style:italic; font-size:calc(16px * var(--text-scale)); color:var(--ink-2); }
.trail-place { position:relative; margin:0 0 18px; height:190px; overflow:hidden; }
.trail-place img { width:100%; height:100%; object-fit:cover; }
.trail-place figcaption { position:absolute; inset:auto 0 0; padding:28px 18px 12px; background:linear-gradient(#0b080600,#0b0806); font:400 calc(18px * var(--text-scale))/1.2 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
#journal-trail h3 { font:italic 400 calc(21px * var(--text-scale))/1.25 var(--body); letter-spacing:0; color:var(--ochre-hi); }
.itinerary { padding:0 0 0 18px; margin:20px 0; list-style:none; border-left:1px solid var(--rule); }
.itinerary li { position:relative; padding:0 0 16px 10px; font-size:calc(17px * var(--text-scale)); }
.itinerary li:last-child { padding-bottom:0; }
.itinerary li::before { content:''; position:absolute; left:-23px; top:8px; width:7px; height:7px; background:var(--night); border:1px solid var(--ochre); rotate:45deg; }
.itinerary .here::before { background:var(--ochre); }
.itinerary .shut::before { background:var(--minium-deep); border-color:#e09a85; }
.itinerary .shut p { color:#e8b19c; font-size:calc(15px * var(--text-scale)); margin:4px 0 0; }
.trail-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:12px; }
.trail-actions button { min-height:44px; padding:8px 0; background:none; border:0; border-radius:0; font:400 calc(11px * var(--text-scale)) var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.trail-actions button:first-child { display:inline-flex; align-items:center; gap:10px; font:400 calc(17px * var(--text-scale))/1.25 var(--body); letter-spacing:0; text-transform:none; color:var(--ochre-hi); }
.trail-actions button:first-child::after { content:''; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; rotate:45deg; transition:translate .3s var(--ease); }
.trail-actions button:hover:not(:disabled) { background:none; color:#fff3d8; }
.trail-actions button:first-child:hover:not(:disabled)::after { translate:3px 0; }
/* Disclosures open with a chevron, not the browser's triangle. */
#codex summary,#dialogue-terms summary,.life-record summary,.ember-dead summary { list-style:none; display:flex; align-items:center; gap:10px; }
#codex summary::-webkit-details-marker,#dialogue-terms summary::-webkit-details-marker,.life-record summary::-webkit-details-marker,.ember-dead summary::-webkit-details-marker { display:none; }
#codex summary::before,#dialogue-terms summary::before,.life-record summary::before,.ember-dead summary::before { content:''; flex:none; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; rotate:-45deg; transition:rotate .25s var(--ease); }
#codex details[open] > summary::before,#dialogue-terms[open] > summary::before,.life-record details[open] > summary::before,.ember-dead[open] > summary::before { rotate:45deg; }
.journal-entries { border-top:1px solid var(--rule-faint); margin-top:24px; padding-top:16px; }
.journal-entries summary { cursor:pointer; color:var(--ochre); padding:6px 0 12px; }
.journal-purpose { margin-top:24px; }
.journal-purpose summary { cursor:pointer; color:var(--ochre); padding:8px 0; }
.comparison-book { margin-top:24px; border-top:1px solid var(--rule-faint); padding-top:12px; }
.comparison-book summary { cursor:pointer; min-height:44px; padding:10px 0; color:var(--joint); overflow-wrap:anywhere; }
.comparison-book summary > span { display:block; color:var(--ink-2); font-size:calc(13px * var(--text-scale)); margin-top:4px; }
.comparison-intro,.comparison-progress { font-size:calc(14px * var(--text-scale)); line-height:1.5; }
.comparison-progress { border-left:1px solid var(--joint); padding-left:12px; color:var(--ink); }
.comparison-next { margin:18px 0; }
.comparison-next button { width:100%; min-height:44px; text-align:left; white-space:normal; padding:10px 12px; line-height:1.4; }
.comparison-next small { margin-top:6px; }
.comparison-finding { border-top:1px solid var(--rule-faint); padding-bottom:8px; }
.comparison-finding p { font-size:calc(14px * var(--text-scale)); line-height:1.5; overflow-wrap:anywhere; }
.comparison-finding p > strong { display:block; color:var(--joint); font-weight:400; margin-bottom:4px; }
.comparison-fact { border-left:1px solid #a8b791; padding-left:12px; }
.comparison-inference { border-left:1px dashed var(--ochre); padding-left:12px; color:var(--ink-2); }
.comparison-source { padding-top:8px; color:var(--ink-2); }
.entries { display:grid; gap:0; }
.entries h3 { margin-top:0; }
.entry { display:grid; grid-template-columns:30px 1fr; gap:4px 14px; padding:12px 0; border-bottom:1px solid var(--rule-faint); }
.entry svg { width:22px; height:22px; margin-top:3px; fill:none; stroke:var(--ochre); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.entry p { margin:2px 0 0; font-size:calc(15.5px * var(--text-scale)); line-height:1.45; }
.entry.choice .eyebrow { color:#cfa9dc; } .entry.cost .eyebrow { color:#e2b45e; } .entry.aftermath .eyebrow { color:#e3a08c; }
.entry:first-of-type p { color:#fff5e2; }
.character { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:36px; }
.character .portrait { width:100%; max-width:240px; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; border-radius:120px 120px 2px 2px; box-shadow:0 0 0 1px var(--rule), 0 12px 30px #000a; }
.character dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:14px 0; font-size:calc(15px * var(--text-scale)); }
.character dt { font:400 calc(10.5px * var(--text-scale))/1.9 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); }
.character dd { margin:0; }
.character .name { margin:16px 0 0; font:400 calc(21px * var(--text-scale)) var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
#equipment p { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; margin:0; border-bottom:1px solid var(--rule-faint); font-size:calc(15.5px * var(--text-scale)); }
#equipment small { display:inline; }
#companion { display:grid; gap:12px; }
#companion:empty::before { content:'No one walks with you. People you hire keep their own counsel here.'; color:var(--ink-2); font-style:italic; }
.companion-card { display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:start; padding:14px 0; border-bottom:1px solid var(--rule-faint); }
.companion-card img { width:64px; height:80px; object-fit:cover; object-position:50% 22%; border-radius:32px 32px 2px 2px; box-shadow:0 0 0 1px var(--rule); }
.companion-card p { margin:0 0 4px; }
.companion-card strong { font:400 calc(15px * var(--text-scale)) var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.companion-card .status { font-style:italic; color:var(--ochre); }
.companion-card.dead,.companion-card.departed { opacity:.7; }
#legacy { margin:0; font-size:calc(15px * var(--text-scale)); }
#legacy h2 { font-size:calc(13px * var(--text-scale)); margin-top:0; }
#legacy:empty::before { content:'Yours is the first life recorded in this account.'; color:var(--ink-2); font-style:italic; }
#legacy p { padding:8px 0; border-bottom:1px solid var(--rule-faint); }
.atlas-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px; }
.basin { position:relative; margin:0 auto; max-width:520px; aspect-ratio:1536/1024; box-shadow:0 0 0 1px var(--rule), 0 12px 30px #000a; }
.basin img,.basin svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.basin .here { fill:#b2412e; stroke:#fff1d0; stroke-width:7; }
.atlas-road { fill:none; stroke:#7c2416; stroke-width:9; stroke-linecap:round; }
.atlas-road.halo { stroke:#f3e8cd; stroke-width:20; }
.atlas-road.shut { stroke-dasharray:12 18; }
.atlas-map-key,.atlas-back { display:none; }
.atlas-pin { position:absolute; translate:-50% -50%; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:0; background:none; font:400 26px var(--display); color:#1a110a; text-shadow:0 0 2px #f6ead0, 0 0 4px #f6ead0, 0 0 8px #f6ead0cc; box-shadow:none; }
.atlas-pin:hover:not(:disabled) { background:none; color:#5e1c12; }
.atlas-pin[aria-pressed=true] { color:var(--minium-deep); background:none; text-decoration:underline 2px var(--minium-deep); text-underline-offset:4px; outline:none; }
.atlas-regions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin-top:16px; }
.atlas-regions button { display:flex; gap:10px; align-items:center; text-align:left; font-size:calc(15px * var(--text-scale)); line-height:1.15; min-height:44px; padding:8px 2px; background:none; border:0; border-bottom:1px solid var(--rule-faint); border-radius:0; }
.atlas-regions button:hover:not(:disabled) { background:none; color:var(--ochre-hi); }
.atlas-regions button[aria-pressed=true] { color:var(--ochre-hi); background:none; box-shadow:inset 0 -1px var(--ochre-hi); }
.atlas-number { flex:0 0 auto; min-width:16px; font:400 13px var(--display); color:var(--ochre); }
.atlas-regions small { margin-top:3px; font-size:calc(12px * var(--text-scale)); }
.atlas-legend { margin-top:10px; }
.atlas-details { min-width:0; padding-left:24px; border-left:1px solid var(--rule-faint); }
#atlas-heading { margin:6px 0 16px; font:400 calc(21px * var(--text-scale))/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.atlas-place-label { display:block; color:var(--ink-2); font-size:calc(14px * var(--text-scale)); margin-bottom:4px; }
#atlas-place,#shell-dialog select { width:100%; min-height:44px; padding:8px 26px 8px 2px; font-size:calc(16px * var(--text-scale)); -webkit-appearance:none; appearance:none; background:linear-gradient(45deg,transparent 50%,var(--ochre) 50%) calc(100% - 9px) 52%/6px 6px no-repeat, linear-gradient(-45deg,transparent 50%,var(--ochre) 50%) calc(100% - 3px) 52%/6px 6px no-repeat, #0b0806; border:0; border-bottom:1px solid var(--ochre); border-radius:0; }
#atlas-place option,#shell-dialog select option { background:#16100c; color:var(--ink); }
.atlas-status { border-block:1px solid var(--rule-faint); padding:12px 0; margin:16px 0 12px; }
.atlas-status > p:first-child { color:var(--ochre-hi); font-size:calc(18px * var(--text-scale)); }
.atlas-status p:last-child { margin:0; }
.atlas-barrier { color:#e8b19c; line-height:1.4; }
.atlas-step { width:100%; max-width:none; margin-bottom:8px; text-align:left; color:var(--ochre-hi); }
.atlas-leads { margin-top:20px; }
.atlas-leads button { width:100%; max-width:none; text-align:left; margin-bottom:6px; }
.atlas-leads button span { float:right; color:var(--ochre-hi); }
.atlas-itinerary { margin-top:14px; }
.atlas-footer { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:20px; padding-top:6px; border-top:1px solid var(--rule-faint); }
.atlas-footer > div:last-child { align-self:center; }
#world-status { font-size:calc(15px * var(--text-scale)); }
#world-status p { padding-bottom:8px; border-bottom:1px solid var(--rule-faint); }
.settlement { color:var(--ochre-hi); }
#clock { font-size:calc(13px * var(--text-scale)); color:var(--ink-2); }
.purpose-status { color:var(--ochre-hi); font-size:calc(14px * var(--text-scale)); }
.bequest-note { color:#e09a85 !important; }
@media (min-width:1100px) { .atlas-regions { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) {
  .atlas-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
  .atlas-details { padding-left:16px; }
  .atlas-pin { width:30px; height:30px; font-size:13px; }
  .atlas-regions { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .atlas-layout,.atlas-footer { grid-template-columns:1fr; gap:16px; }
  .atlas-details { padding:16px 0 0; border-left:0; border-top:1px solid var(--rule-faint); }
  .atlas-regions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .atlas-pin { display:none; }
  .atlas-map-key { display:initial; }
  .atlas-map-key circle { fill:var(--night); stroke:var(--ochre-hi); stroke-width:5; }
  .atlas-map-key text { fill:var(--ochre-hi); font:400 44px var(--display); }
  .atlas-map-key.selected circle { fill:var(--ochre-hi); stroke:#5c301d; }
  .atlas-map-key.selected text { fill:var(--night); }
  .atlas-back { display:block; min-height:44px; margin-bottom:16px; }
}
@media (max-height:550px) {
  #play:has(#world-panel:not([hidden])) #action-bar { display:none; }
  #codex:has(#world-panel:not([hidden])) { padding:8px 2%; gap:6px; grid-template-rows:auto minmax(0,1fr); }
  #codex:has(#world-panel:not([hidden])) .codex-tabs button { padding:5px 12px; font-size:calc(11px * var(--text-scale)); }
  #world-panel { padding:12px 18px; }
  #world-panel > header { margin-bottom:10px; }
  #world-panel > header h2 { font-size:calc(18px * var(--text-scale)); }
}

/* ── Danger: the held decision before you commit. ──────────────────────── */
.preparation-summary { color:var(--ochre-hi); line-height:1.4; }
.preparation-kit { list-style:none; padding:0; margin:0; }
.preparation-kit li { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--rule-faint); }
.preparation-kit strong { font-weight:400; font-family:var(--display); letter-spacing:.08em; text-transform:uppercase; font-size:.9em; }
.preparation-kit span { margin-left:.7em; color:var(--ochre-hi); font-size:.85em; }
.preparation-kit p { margin:.35em 0 0; line-height:1.4; color:var(--ink-2); }
.preparation-kit button,.atlas-step,.atlas-leads button,#companion-parting-close { flex-shrink:0; min-height:44px; max-width:45%; padding:8px 0; white-space:normal; background:none; border:0; border-radius:0; box-shadow:inset 0 -1px var(--rule); font:400 calc(11px * var(--text-scale)) var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.preparation-kit button:hover:not(:disabled),.atlas-step:hover:not(:disabled),.atlas-leads button:hover:not(:disabled),#companion-parting-close:hover { background:none; color:var(--ochre-hi); box-shadow:inset 0 -1px var(--ochre-hi); }
#danger { width:min(1060px,calc(100vw - 32px)); max-height:calc(100dvh - 124px); margin-top:108px; padding:0; border:0; border-top:1px solid var(--minium); background:var(--field); color:var(--ink); font:400 calc(17px * var(--text-scale))/1.5 var(--body); overflow:auto; box-shadow:0 24px 80px #000; }
#danger::backdrop { background:#0b0806e6; }
#danger header { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 28px; border-bottom:1px solid var(--rule-faint); }
#danger h2 { margin:0; font:400 calc(21px * var(--text-scale))/1.2 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
#danger h3 { margin:0 0 18px; font:italic 400 calc(21px * var(--text-scale))/1.35 var(--body); letter-spacing:0; color:var(--ink); text-wrap:balance; }
#danger h4 { font:400 .8em var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); margin:30px 0 12px; }
#danger button { min-height:44px; padding:9px 4px; background:none; border:0; border-radius:0; box-shadow:inset 0 -1px var(--rule); font:400 calc(11px * var(--text-scale)) var(--display); letter-spacing:.16em; text-transform:uppercase; white-space:normal; color:var(--ink); }
#danger button:hover:not(:disabled) { background:none; color:var(--ochre-hi); box-shadow:inset 0 -1px var(--ochre-hi); }
.danger-layout { display:grid; grid-template-columns:1fr 1fr; }
.danger-scene { padding:30px 28px; background:linear-gradient(#0b0806a8,#0b0806f5 72%),var(--danger-plate) center/cover; }
.danger-tell { font-size:1.1em; line-height:1.5; }
.danger-alternative { margin-top:24px; color:var(--ochre-hi); }
.danger-company { list-style:none; padding:0; }
.danger-company p { margin:.3em 0 1em; color:var(--ink-2); }
.danger-ready { padding:30px 28px; }
.preparation-person { display:flex; gap:16px; align-items:center; }
.preparation-person img { width:64px; height:80px; object-fit:cover; border-radius:32px 32px 2px 2px; box-shadow:0 0 0 1px var(--rule); }
#danger .preparation-person h3 { margin:0; }
.preparation-person p { margin:5px 0 0; }
#danger footer { position:sticky; bottom:0; padding:14px 28px 18px; border-top:1px solid var(--rule-faint); background:#0e0a08; }
#danger footer p { margin:0 0 14px; color:#efb39c; }
#danger footer div { display:flex; gap:12px; justify-content:flex-end; }
#danger .danger-commit { padding:9px 18px; color:#fff1e4; background:var(--minium-deep); box-shadow:inset 0 0 0 1px var(--minium); }
#danger .danger-commit:hover:not(:disabled) { background:#7a2618; color:#fff1e4; box-shadow:inset 0 0 0 1px #e0705a; }

/* ── Smaller screens ───────────────────────────────────────────────────── */
/* Below 1440px the stage front tightens; its words stay. */
@media (max-width:1439px) {
  #tactical-actions button { width:92px; }
}
@media (max-width:1599px) {
  [data-text-large=true] .action-buttons button:not(#pause) span { display:none; }
  [data-text-large=true] .action-buttons button:not(#pause) { min-width:46px; padding-inline:4px; }
  [data-text-large=true] #camera-controls p { display:none; }
  [data-text-large=true] #tactical-actions small { display:none; }
  [data-text-large=true] #tactical-actions button { width:auto; min-width:76px; padding-inline:10px; }
}
/* Enlarged text (the settings slider's 140%) below the 1600px shelf: the place-sound line and
   the opening tip are words without a band of their own, and once the words grow they painted
   over the view controls and the narration (measured 1024×550, 1024×600, 900×600, 945×973 and
   844×390). Shed them exactly as the tool words and tactical tips already are; the place line
   returns at 1600px, where the stage front has room for it. */
@media (max-width:1599px) and (min-width:681px) {
  [data-text-large=true] #action-bar #soundscape { display:none; }
  [data-text-large=true] .opening-hint { display:none; }
}
/* Enlarged text on the widths where the view controls lift above the stage front
   (top:100% - lip - 70px): at 140% the narration's own 136px band runs into them (measured
   945×973 and 1024×600). The shortest windows stack differently; see the rules below. */
@media (max-width:1240px) and (min-width:681px) and (min-height:551px) {
  [data-text-large=true] #subtitle { bottom:164px; }
}
@media (max-width:1100px) {
  .tracker { width:260px; }
  #pause-banner { max-width:min(560px,calc(100vw - 48px)); }
  .frame-text .hpbar { width:110px; }
  #tactical-actions button { width:78px; min-height:72px; }
  #tactical-actions small { display:none; }
  #camera-controls { bottom:auto; top:calc(100% - var(--lip,92px) - 70px); }
}
/* The view controls share the stage front until 1100px. Between there and 1240px
   the label-sized tool row cannot sit between the party and those controls, so
   lift the controls with the same rule the narrower window already uses. */
@media (max-width:1240px) and (min-width:1101px) and (min-height:601px) {
  #camera-controls { bottom:auto; top:calc(100% - var(--lip,92px) - 70px); }
}
@media (max-width:900px) {
  .journal-layout,.columns,.character { grid-template-columns:1fr; }
  .journal-layout .question { border:0; padding:0; }
  .action-buttons span { display:none; }
  .action-buttons button { width:46px; height:48px; }
  #pause { width:58px; height:58px; }
  .frame-text,#readiness { display:none; }
  #combat-reading { right:12px; top:110px; width:220px; max-height:calc(100% - 330px); }
  #combat-reading h2 { font-size:15px; }
  .log { display:none; }
  #fallen { left:12px; width:210px; }
}
@media (max-height:800px) {
  .medallion { width:54px; height:68px; border-radius:27px 27px 2px 2px; }
  .frame.companion .medallion { width:38px; height:48px; border-radius:19px 19px 2px 2px; }
  #beat-name { font-size:calc(24px * var(--text-scale)); }
  #codex { padding-bottom:96px; }
}
@media (max-height:650px) {
  #combat-reading { max-height:calc(100% - 260px); }
  #combat-reading header { margin-bottom:7px; padding-bottom:5px; }
  #combat-reading li { margin-bottom:9px; }
}
@media (max-width:900px),(max-height:550px) {
  #dialogue { bottom:10px; max-height:calc(100% - 24px); grid-template-columns:136px minmax(0,1fr); gap:20px; padding:18px 22px; }
  #dialogue-portrait { width:136px; height:164px; border-radius:68px 68px 2px 2px; }
  #dialogue-speaker { font-size:calc(20px * var(--text-scale)); }
  #dialogue-line { font-size:calc(18px * var(--text-scale)); margin:12px 0; }
  #dialogue-pledge { font-size:calc(13px * var(--text-scale)); }
  #companion-parting-scene { grid-template-columns:136px minmax(0,1fr); gap:20px; }
  #companion-parting img { width:136px; height:164px; border-radius:68px 68px 2px 2px; }
  #companion-parting blockquote { font-size:calc(18px * var(--text-scale)); }
  #companion-remark { left:12px; bottom:96px; width:min(480px,72%); gap:12px; }
  #companion-remark img { width:44px; height:56px; }
  #companion-remark p { font-size:calc(15px * var(--text-scale)); }
}
@media (max-width:540px) {
  #dialogue { grid-template-columns:1fr; }
  .dialogue-portrait { display:grid; grid-template-columns:80px 1fr; gap:14px; align-items:center; }
  #dialogue-portrait { width:80px; height:100px; border-radius:40px 40px 2px 2px; grid-row:span 2; }
  #dialogue-bearing,#dialogue-pledge { margin:0; padding:0; border:0; }
  #dialogue header { flex-wrap:wrap; }
  #companion-parting-scene { grid-template-columns:1fr; }
}
/* A phone: the place across the top, the next step beneath it, the stage front as one full-width row. The painting keeps its centre. */
@media (max-width:680px) {
  .vignette { --lip:70px; background:
    linear-gradient(0deg,#0b0806 0,#0b0806e6 56px,#0b080600 150px),
    linear-gradient(180deg,#0b0806f2 0,#0b0806b3 150px,#0b080600 210px); }
  .location { top:12px; left:auto; right:12px; translate:none; width:calc(100% - 84px); justify-items:end; text-align:right; }
  .location::after { display:none; }
  #area-name { letter-spacing:.24em; text-indent:0; }
  #beat-name,#beat-name[data-length=mid],#beat-name[data-length=long] { font-size:calc(17px * var(--text-scale)); letter-spacing:.06em; text-indent:0; }
  .party-frames { top:12px; bottom:auto; left:10px; }
  #party { flex-direction:row; align-items:flex-start; gap:8px; }
  .frame { flex-direction:column; align-items:center; gap:3px; }
  .frame-text,.frame.companion .frame-text { display:grid; justify-items:center; gap:2px; max-width:58px; }
  .frame-text strong,.frame.companion .frame-text strong { max-width:60px; white-space:normal; text-align:center; line-height:1.15; font-size:calc(8.5px * var(--text-scale)); letter-spacing:.06em; }
  .frame-text .hpbar,.frame.companion .frame-text .hpbar { width:40px; height:2px; }
  .frame-text small { font-size:calc(10px * var(--text-scale)); }
  .medallion,.frame.companion .medallion { width:40px; height:50px; border-radius:20px 20px 2px 2px; }
  .frame .medallion::after { background:linear-gradient(0deg,#0b0806,#0b080600 30%); }
  #readiness { max-width:150px; font-size:calc(11.5px * var(--text-scale)); }
  .tracker { top:132px; left:12px; right:12px; width:auto; }
  [data-fighting=true] #area-name { display:none; }
  #combat-reading li:not(:first-of-type),#combat-reading li small,.reading-advice { display:none; }
  #pause-banner,[data-fighting=true] #pause-banner { top:134px; bottom:auto; max-width:calc(100vw - 24px); font-size:calc(13px * var(--text-scale)); }
  #pause-banner::before,#pause-banner::after { display:none; }
  /* The narration grows upward from the stage front; the first-life tip takes the free band under the lead links,
     following them down when the question wraps or the pause line pushes them (250px where anchors are unsupported). */
  .tracker { anchor-name:--tracker; }
  .opening-hint { top:250px; top:calc(anchor(--tracker bottom) + 8px); bottom:auto; width:calc(100% - 32px); white-space:normal; text-align:center; }
  /* The arrival's name card stood on the narration's first and second lines (measured 390×844);
     it takes the top of the picture instead, under the one who came before when they are shown. */
  .opening-third { top:calc(9vh + 20px); bottom:auto; }
  .opening-before + .opening-third { top:calc(9vh + 130px); }
  .tracker-open,.tracker .leads { display:none; }
  /* The open question stays on screen at every size: one line over the trail on a phone. */
  .tracker .goal { margin:0; padding:0; text-align:left; font-size:calc(15px * var(--text-scale)); }
  #trail-hud { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px; justify-items:start; text-align:left; margin:0; padding-top:8px; }
  #trail-hud .trail-direction { margin:0; font-size:calc(13.5px * var(--text-scale)); }
  #trail-hud > button { max-width:160px; min-height:44px; font-size:calc(14.5px * var(--text-scale)); }
  .trail-links { grid-column:1 / -1; justify-content:flex-start; margin:0; }
  .toast { top:auto; bottom:236px; left:12px; right:12px; max-width:none; }
  #play:has(#dialogue:not([hidden])) .toast { top:64px; bottom:auto; }
  .toast .seal { width:36px; height:36px; }
  #action-bar { width:calc(100% - 12px); bottom:6px; }
  .action-buttons { width:100%; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:4px; }
  .tools,.tools-right { gap:0; min-width:0; }
  .tools { justify-self:stretch; justify-content:space-around; }
  .tools-right { justify-self:stretch; justify-content:space-around; }
  .action-buttons button,[data-text-large=true] .action-buttons button:not(#pause) { width:auto; min-width:0; flex:1; height:48px; padding:4px 2px 10px; }
  #danger { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); margin-top:8px; }
  .danger-layout { grid-template-columns:1fr; }
  #danger header,.danger-scene,.danger-ready,#danger footer { padding:16px; }
  #danger footer div { flex-wrap:wrap; }
  .preparation-kit li { gap:10px; }
  .action-buttons kbd { display:none; }
  #pause { flex:none; width:58px; height:58px; margin:0 2px; }
  #pause span { display:none; }
  .action-buttons #purse { display:none; }
  #subtitle,#play:not([data-fighting=true]) #subtitle { bottom:210px; max-width:calc(100vw - 32px); }
  #camera-controls { top:auto; bottom:140px; right:8px; }
  #camera-controls kbd { display:none; }
  #camera-controls p { max-width:calc(100vw - 24px); font-size:calc(11.5px * var(--text-scale)); }
  #camera-controls button { min-width:44px; min-height:44px; }
  #play[data-survey] #readiness { visibility:hidden; }
  #play[data-fighting=true] #camera-controls { top:64px; bottom:auto; right:8px; }
  [data-fighting=true] #action-bar { grid-template-columns:auto; grid-template-areas:"orders" "bar"; justify-items:center; gap:4px; }
  [data-fighting=true] .action-buttons { width:auto; }
  [data-fighting=true] #pause-banner { bottom:auto; }
  #queue { gap:14px; font-size:calc(12.5px * var(--text-scale)); flex-wrap:wrap; justify-content:center; }
  /* A phone fight keeps the heads clear: the one account line sits just above the orders, the view controls go to the top right. */
  #combat-reading { top:auto; bottom:150px; left:12px; right:12px; width:auto; max-height:none; padding-left:12px; }
  #combat-reading header { display:none; }
  [data-paused=true] .tracker { top:178px; }
  #codex { gap:10px; padding:10px 10px 76px; }
  .codex-tabs { width:100%; gap:0; }
  .codex-tabs kbd { display:none; }
  .codex-tabs button { flex:1; padding:12px 2px; font-size:calc(10px * var(--text-scale)); letter-spacing:.06em; }
  .sheet { padding:16px; }
  .journal-layout { gap:22px; }
  .trail-place { height:140px; }
  #play:has(#dialogue:not([hidden]),#companion-parting:not([hidden])) .tracker { display:none; }
  .location .cartouche.rive { inset:-10px -8px; }
}
/* A short, wide window (a landscape phone, a small laptop): the record moves into the upper corners and everything tightens. */
@media (max-height:600px) and (min-width:681px) {
  .location { top:8px; width:min(520px, max(360px, 40vw)); }
  .location::after { margin-top:3px; }
  #beat-name,#beat-name[data-length=mid],#beat-name[data-length=long] { font-size:calc(18px * var(--text-scale)); }
  #pause-banner { top:64px; }
  #hover-label { top:66px; }
  /* These windows lift the view controls above the stage front, so the narration and the
     opening tip take bands of their own instead of the controls' (measured 900×600 and
     1024×550 at both text scales). The lead column's scroll box stops above that narration
     (measured 844×390 and 900×600). */
  #subtitle { bottom:176px; }
  .tracker { top:10px; max-height:calc(100% - 310px); overflow:hidden auto; }
  .tracker .goal { font-size:calc(15px * var(--text-scale)); }
  .trail-links { margin:0; }
  .opening-hint { top:auto; bottom:245px; white-space:normal; width:min(640px,80vw); text-align:center; }
  .trail-place { height:130px; }
  #scene-notice { left:12px !important; top:auto !important; bottom:110px; width:200px; padding:8px 12px; }
  #scene-notice :is(.eyebrow,p) { display:none; }
  #scene-notice strong { margin:0; font-size:calc(12px * var(--text-scale)); }
  .log { max-width:220px; max-height:3em; }
  #action-bar #soundscape { max-width:min(560px,calc(100vw - 480px)); }
  .party-frames { bottom:8px; left:12px; }
  #party { flex-direction:row; align-items:flex-end; }
  .frame.companion .frame-text .hpbar { width:70px; }
  .medallion { width:44px; height:56px; border-radius:22px 22px 2px 2px; }
  .frame.companion .medallion { width:34px; height:44px; border-radius:17px 17px 2px 2px; }
  #readiness { max-width:190px; font-size:calc(11.5px * var(--text-scale)); min-height:24px; }
  #fallen { top:10px; }
  .toast { top:10px; }
  #combat-reading { top:66px; }
  #danger header,.danger-scene,.danger-ready,#danger footer { padding:14px 20px; }
}
@media (max-height:600px) and (max-width:900px) { #readiness { display:none; } }
/* On those windows the ambient place line has no band left once the view controls stand
   above the stage front: it painted under Survey/± and over the narration (measured 844×390,
   901×560 and 1024×550). Above 1240px wide the controls still share the front row, so the
   place line stays. */
@media (max-height:600px) and (min-width:681px) and (max-width:1240px) {
  #action-bar #soundscape { display:none; }
}
@media (max-height:550px) and (min-width:681px) {
  .vignette { --lip:70px; }
  #camera-controls { bottom:8px; right:12px; }
  #camera-controls p { display:none; }
  #camera-controls button { min-height:36px; padding:4px 8px; }
  #subtitle { bottom:96px; max-width:50vw; }
  /* The shortest windows keep the scroll box's place; enlarged text lifts the narration further,
     so the box stops above it (measured 844×390). */
  .tracker { max-height:calc(100% - 140px); }
  /* The narration grows upward from 96px and covered the opening tip there (measured 844×390), so
     the tip stands under the place name, between the trail column and its mirror on the left. */
  .opening-hint { top:66px; bottom:auto; width:min(560px, calc(100vw - 2 * (min(318px,27vw) + 40px))); }
  [data-text-large=true] .tracker { max-height:calc(100% - 240px); }
  .action-buttons button { height:50px; }
  #pause { width:58px; height:58px; }
  #action-bar { bottom:6px; }
}
@media (max-height:500px) {
  [data-fighting=true] #action-bar #soundscape { max-width:min(380px,calc(100vw - 32px)); }
  [data-fighting=true] .location { top:4px; }
  [data-fighting=true] .location::after,[data-fighting=true] #area-name { display:none; }
  [data-fighting=true] #beat-name { font-size:15px; }
  [data-fighting=true] #pause-banner { top:30px; bottom:auto; font-size:11px; }
  [data-fighting=true] #action-bar { bottom:4px; gap:10px; }
  [data-fighting=true] #combat-strip { padding:0 8px; }
  [data-fighting=true] #target-hint { display:none; }
  #queue { font-size:12px; gap:16px; }
  [data-fighting=true] #tactical-actions img { width:34px; height:40px; border-radius:17px 17px 2px 2px; }
  [data-fighting=true] #tactical-actions button { width:40px; padding-top:10px; }
  [data-fighting=true] .action-buttons button { height:44px; }
  [data-fighting=true] #pause { width:50px; height:50px; }
  [data-fighting=true] .party-frames { bottom:auto; top:8px; }
  #combat-reading { top:52px; right:8px; width:210px; max-height:calc(100% - 190px); }
  [data-fighting=true] #camera-controls { bottom:auto; top:4px; right:8px; }
  [data-fighting=true] #subtitle { bottom:150px; }
  #combat-reading header > :is(.eyebrow,small) { display:none; }
  #combat-reading h2 { font-size:13px; }
  #combat-reading li { margin-bottom:6px; }
  #combat-reading .reading-who strong { font-size:10.5px; }
  #combat-reading li p { font-size:13px; line-height:1.15; margin:2px 0; }
  #combat-reading li:not(.committed) small { display:none; }
  #fallen { top:60px; width:200px; }
  #fallen img { width:30px; height:38px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
[data-motion=reduced] *,[data-motion=reduced] *::before,[data-motion=reduced] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
/* The World page's leads and next step are full-width ruled lines, not the kit's half-width commands. */
#atlas .atlas-leads button,#atlas .atlas-step { width:100%; max-width:none; display:flex; justify-content:space-between; gap:12px; }
/* A held decision owns the screen: only the place stays legible behind it. */
#play:has(#danger[open]) :is(.tracker,.toast,#pause-banner,.party-frames,#action-bar,#camera-controls,#scene-notice,#world-controls,#combat-tags) { opacity:.06; }