/* SORTIE: UI tokens, page frame and every DOM screen (spec §7.2, §7.10, §5). Square corners, flat fills, no gradient.
   Display sizes are whole multiples of Jersey 10's native size u = 18.667 px (README). */

@font-face {
  font-family: 'Jersey 10';
  src: url('fonts/Jersey10-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('fonts/PixelifySans-Medium.woff') format('woff');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {                      /* digits in text: Jersey 10 at 1 u (Pixelify's 5 reads as S, §7.12) */
  font-family: 'Pixelify Sans';
  src: url('fonts/Jersey10-Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0030-0039;
  size-adjust: 116.667%;
}

:root {
  --ink: #0d0b14; --night: #17142a; --floor: #241f3d; --slate: #352e57; --dusk: #4d4677;
  --dim: #6f6aa0; --ash: #a8a3c7; --bone: #efe6d2; --sodium: #ffa62b; --alert: #ff5a36;
  --jade: #3ee0a1; --gold: #ffd84f; --ice: #5cc8ff; --teal: #1d4e5c; --violet: #a07bff;
  --f-disp: 'Jersey 10', 'Pixelify Sans', ui-monospace, monospace;
  --f-text: 'Pixelify Sans', ui-monospace, monospace;
  --u: 18.6667px;
  --d16: var(--u); --d24: var(--u); --d32: calc(var(--u) * 2); --d40: calc(var(--u) * 2); --d48: calc(var(--u) * 3);
  --t: 16px;                      /* Pixelify Sans: 16 px, 20 px with Large text */
  --night85: rgba(23, 20, 42, .85); --night90: rgba(23, 20, 42, .9);
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}
html.large {
  --t: 20px;
  /* headings one class up */
  --d16: var(--u); --d24: calc(var(--u) * 2); --d32: calc(var(--u) * 2); --d40: calc(var(--u) * 3); --d48: calc(var(--u) * 3);
}
/* labels of the 16 px display class: Pixelify 20 px (§5.10) */
html.large :is(.d16, .btn, .btn .lbl, .icon, .newtag, .screen-head .count, table.floors td.g, #hint.tag, #tlabels .tl) { font-family: var(--f-text); font-size: var(--t); }

*, *::before, *::after { box-sizing: border-box; }
html, body {
  position: fixed; inset: 0; margin: 0; overflow: hidden; overscroll-behavior: none;
  background: var(--ink); color: var(--bone);
  font-family: var(--f-text); font-size: var(--t); line-height: 1.25;
  font-synthesis: none; font-variant-ligatures: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ---------- stage and canvas (§4.9, §7.1) */
#stage {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; background: var(--ink);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#view {
  position: absolute; left: 0; top: 0; display: block; background: var(--ink);
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#stage.mode-desktop.playing #view { cursor: none; }
#safe {
  position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------- typography classes */
.d16, .d24, .d32, .d40, .d48 { font-family: var(--f-disp); font-weight: 400; line-height: 1; letter-spacing: 0; }
.d16 { font-size: var(--d16); }
.d24 { font-size: var(--d24); }
.d32 { font-size: var(--d32); }
.d40 { font-size: var(--d40); }
.d48 { font-size: var(--d48); }
p, li, dd, dt, td, th, legend, label, summary { text-wrap: balance; }

/* ---------- frame style (§7.10) */
.panel, .panel-plate {
  background: var(--night);
  border: 2px solid var(--ink);
  outline: 2px solid var(--slate);
  box-shadow: inset 2px 2px 0 var(--dusk), inset -2px -2px 0 var(--floor);
  padding: 20px 16px;
}
.panel-plate { background: var(--night90); }   /* the tower stays faint behind the text (§7.10 panel fill, 90 %) */

.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 48px; padding: 8px 12px; margin: 0;
  border: 0; border-radius: 0; cursor: pointer; text-align: center;
  font-family: var(--f-disp); font-size: var(--d16); line-height: 1;
  touch-action: manipulation;
}
.btn.primary {
  min-height: 56px; background: var(--sodium); color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28);
}
.btn.primary.big { min-height: 64px; }
.btn.primary:active { box-shadow: none; padding-top: 10px; padding-bottom: 6px; }
.btn.secondary { background: var(--slate); color: var(--bone); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28); }
.btn.secondary:active { box-shadow: none; padding-top: 10px; padding-bottom: 6px; }
.btn.secondary.big { min-height: 56px; }
.btn.danger { color: var(--alert); }
.btn.secondary.danger { background: var(--night); border: 2px solid var(--alert); }
.btn .lbl { font-family: var(--f-disp); font-size: var(--d16); }
.btn .sub { font-family: var(--f-text); font-size: var(--t); line-height: 1.1; }
.btn.primary .sub { color: var(--ink); }
.btn.secondary .sub { color: var(--ash); }
/* the first-visit pulse: 85 to 100 % at 1 Hz, as a colour over the night plate so the scene never shows through */
.btn.pulse { animation: pulse 1s ease-in-out infinite alternate; }
html.reduced .btn.pulse { animation: none; }
@keyframes pulse { from { background-color: color-mix(in srgb, var(--sodium) 85%, var(--night)); } to { background-color: var(--sodium); } }

.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  background: var(--night); color: var(--bone); border: 2px solid var(--slate); border-radius: 0; cursor: pointer;
  font-family: var(--f-disp); font-size: var(--d16); line-height: 1;
}
.icon svg { display: block; width: 16px; height: 16px; }
.link { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* focus: 3 px bone outline 2 px away, then a 5 px ink ring outside it (§5.14) */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; box-shadow: 0 0 0 10px var(--ink); }
.btn.primary:focus-visible, .btn.secondary:focus-visible { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), 0 0 0 10px var(--ink); }
.link:focus-visible { outline-offset: 4px; }

/* ---------- screens */
.screen {
  position: absolute; inset: 0; z-index: 20;
  overflow-x: hidden; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
}
.overlay { position: absolute; z-index: 18; }
.screen-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; margin-bottom: 16px; }
.screen-head h2 { text-align: center; }
.screen-head .count { font-family: var(--f-disp); font-size: var(--d16); color: var(--ash); min-width: 44px; text-align: right; }

/* ---------- title (§5.3): a plate column over the code-drawn tower; landscape and desktop in two halves */
#title { display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--sat) + 60px); background: transparent; }
.title-col { width: 100%; max-width: 352px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 16px; }
.title-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.title-actions { display: flex; flex-direction: column; gap: 8px; }
.logo { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.logo-plate {
  display: flex; align-items: center; font-family: var(--f-disp); font-size: calc(var(--u) * 5); line-height: .8; color: var(--jade);
  background: var(--ink); border: 2px solid var(--jade); padding: 10px 12px 6px;
  text-shadow: 1px 0 0 var(--teal), -1px 0 0 var(--teal), 0 1px 0 var(--teal), 0 -1px 0 var(--teal), 1px 1px 0 var(--ink);
}
.logo-chev { display: inline-flex; color: var(--jade); margin-left: 6px; }
.logo-chev svg { width: 32px; height: 32px; }
.sent { display: inline-block; }
.tagline { color: var(--bone); }
.story, .first-line, .record, .install-ios { color: var(--ash); text-align: center; }
.title-foot {
  width: 100%; max-width: 352px; margin: auto 0 2px; padding: 10px 12px 0; text-align: center; color: var(--ash);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--night85); border: 2px solid var(--ink); outline: 2px solid var(--slate);
}
.foot-text { display: flex; flex-direction: column; gap: 4px; }
.byline .part { white-space: nowrap; }
#stage:not([data-layout="D"]) .byline .part { display: block; }
#stage:not([data-layout="D"]) .byline .dsep { display: none; }
.title-foot .links { display: flex; justify-content: center; align-items: center; gap: 12px; }
.title-foot .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.title-foot .sep { color: var(--dim); }
.title-util { position: absolute; top: calc(var(--sat) + 8px); right: calc(var(--sar) + 8px); display: flex; gap: 8px; }
#stage:not([data-layout="P"]) #title { padding-top: calc(var(--sat) + 16px); }
#stage:not([data-layout="P"]) .title-col { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; margin-top: auto; }
#stage:not([data-layout="P"]) .title-foot { max-width: 760px; flex-direction: row; align-items: center; justify-content: center; gap: 24px; padding: 6px 12px; }
#stage:not([data-layout="P"]) .foot-text { text-align: left; }
/* landscape phones: the plate keeps clear of the language and sound buttons */
#stage[data-layout="L"] .title-col, #stage[data-layout="L"] .title-foot { max-width: min(760px, calc(100% - 240px)); }
@media (max-height: 740px) {        /* short portrait screens (phones with browser toolbars) */
  #stage[data-layout="P"] #title { padding-top: calc(var(--sat) + 56px); }
  #stage[data-layout="P"] .title-col { gap: 14px; padding: 14px 12px; margin-bottom: 10px; }
  #stage[data-layout="P"] .title-head { gap: 6px; }
  #stage[data-layout="P"] .logo-plate { font-size: calc(var(--u) * 4); padding: 8px 10px 4px; }
}
@media (max-height: 680px) {        /* 360 x 640 class: the plate and the footer fit without a scroll for a returning player */
  #stage[data-layout="P"] .logo-plate { font-size: calc(var(--u) * 3); }
  #stage[data-layout="P"] .title-col { gap: 10px; padding: 10px 12px; margin-bottom: 6px; }
  #stage[data-layout="P"] .title-head { gap: 4px; }
  #stage[data-layout="P"] .title-actions { gap: 6px; }
}
@media (max-height: 520px) {
  #stage[data-layout="L"] #title { padding-top: calc(var(--sat) + 8px); padding-bottom: calc(var(--sab) + 8px); }
  #stage[data-layout="L"] .title-col { grid-template-columns: 1.2fr 1fr; padding: 10px 16px; gap: 8px 20px; margin-bottom: 8px; }
  #stage[data-layout="L"] .title-head { gap: 6px; }
  #stage[data-layout="L"] .logo-plate { font-size: calc(var(--u) * 4); padding: 8px 10px 4px; }
  #stage[data-layout="L"] .btn.primary.big { min-height: 56px; }
  #stage[data-layout="L"] .title-foot { padding: 2px 12px; }
  #stage[data-layout="L"] .foot-text { gap: 0; }
}

/* ---------- masks (§5.4) */
#masks { background: var(--ink); display: flex; flex-direction: column; }
.masks-wrap { width: 100%; max-width: 720px; margin: 0 auto; flex: 1 0 auto; display: flex; flex-direction: column; }
.masks-wrap .mgrid { margin-top: auto; }
.masks-wrap .mright { margin-bottom: auto; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.mcard {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  height: 128px; padding: 6px 4px; background: var(--night); border: 4px solid var(--slate); cursor: pointer; text-align: center;
}
.mcard.worn { border-color: var(--sodium); }
.mcard.locked { border-color: var(--floor); cursor: default; }
.mcard.fresh::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--jade); pointer-events: none; }
.mcard .mname { color: var(--bone); }
.mcard .mstate { font-size: var(--t); color: var(--ash); line-height: 1.1; }
.mcard .mstate.worn { color: var(--sodium); }
.mcard .newtag { font-family: var(--f-disp); font-size: var(--d16); line-height: 1; color: var(--ink); background: var(--jade); padding: 2px 4px 0; }
.mcard.sel:not(.worn) { border-color: var(--bone); }
.mask-icon { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.mright { display: flex; flex-direction: column; gap: 16px; }
.mdetails { min-height: 268px; display: flex; flex-direction: column; gap: 6px; }
.mdetails .perk { color: var(--sodium); }
.mdetails .desc { color: var(--bone); }
.mdetails .mbest { color: var(--ash); }
.btn.wide { min-height: 56px; }
html.large .mdetails { min-height: 320px; }
@media (min-width: 720px) {
  .masks-wrap { display: grid; grid-template-columns: auto minmax(280px, 1fr); grid-template-rows: auto auto; column-gap: 24px; align-content: center; flex: 0 1 auto; margin: auto; }
  .masks-wrap .screen-head { grid-column: 1 / -1; }
  .masks-wrap .mgrid, .masks-wrap .mright { margin: 0; }
  .mgrid { grid-template-columns: repeat(3, 120px); align-content: start; }
  .mcard { height: 136px; }
}

/* ---------- pause (§5.6) */
#pause { display: flex; align-items: center; justify-content: center; background: rgba(13, 11, 20, .6); }
.pause-panel { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; margin: auto; }
.pause-panel h2 { text-align: center; }
.pause-panel .status { text-align: center; color: var(--ash); }
/* wide screens, controls open (first run): the key table sits beside the buttons instead of below the fold */
#stage:not([data-layout="P"]) .pause-panel:has(details.controls[open]) { max-width: 712px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
#stage:not([data-layout="P"]) .pause-panel:has(details.controls[open]) > :not(.pause-btns):not(.controls) { grid-column: 1 / -1; }
#stage:not([data-layout="P"]) .pause-panel:has(details.controls[open]) .controls { border-top: 0; padding-top: 0; }
@media (max-height: 520px) {        /* landscape phones: Pause fits without a scroll (44 px stays the touch minimum) */
  #stage[data-layout="L"] #pause { padding-top: calc(var(--sat) + 6px); padding-bottom: calc(var(--sab) + 6px); }
  #stage[data-layout="L"] .pause-panel { gap: 8px; padding: 12px 16px; }
  #stage[data-layout="L"] .pause-btns { gap: 6px; }
  #stage[data-layout="L"] .pause-btns .btn { min-height: 44px; }
}
.pause-btns { display: flex; flex-direction: column; gap: 8px; }
.pause-btns .btn { min-height: 56px; }
.pause-btns .confirm, .confirm { text-align: center; color: var(--bone); margin: 4px 0; }
.btn.two .sub { font-size: var(--t); }
details.controls { border-top: 2px solid var(--slate); padding-top: 8px; }
details.controls summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style: none; color: var(--bone); }
details.controls summary::-webkit-details-marker { display: none; }
details.controls summary::before { content: '›'; font-family: var(--f-disp); color: var(--sodium); margin-right: 8px; display: inline-block; }
details.controls[open] summary::before { transform: rotate(90deg); }
.ctl p { color: var(--ash); margin: 4px 0; }
table.keys { width: 100%; border-collapse: collapse; }
table.keys th, table.keys td { text-align: left; padding: 4px 0; vertical-align: top; border-bottom: 1px solid var(--slate); }
table.keys th { color: var(--ash); font-weight: 400; padding-right: 12px; width: 44%; }
table.keys td { color: var(--bone); }

/* ---------- death card (§5.7): DOM text, no buttons, never over the killer */
#death { left: 0; right: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; padding: 8px 16px; }
#death .death-box {
  max-width: 92%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--night90); border: 2px solid var(--slate); padding: 10px 14px;
}
#death .retry { color: var(--bone); }
#death .cause { color: var(--ash); }
#death .tip { color: var(--sodium); }
#death .mercy { color: var(--jade); }
#death.in-band { padding-bottom: calc(var(--sab) + 8px); }

/* ---------- floor card (§5.8) */
#floorcard { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13, 11, 20, .55);
  overflow-y: auto; touch-action: pan-y; padding: calc(var(--sat) + 12px) calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px); }
.fc-panel { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; margin: auto; }
.fc-col { display: flex; flex-direction: column; gap: 10px; }
.fc-panel h2, .fc-floor { text-align: center; }
.fc-floor { color: var(--ash); }
.fc-graderow, .end-graderow { display: flex; align-items: center; gap: 16px; }
.grade {
  flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-disp); font-size: var(--d48); line-height: 1; background: var(--ink); border: 2px solid currentColor; padding-top: 4px;
}
.grade.big { width: 72px; height: 72px; }
.g-s { color: var(--gold); } .g-a { color: var(--jade); } .g-b { color: var(--ice); } .g-c { color: var(--ash); } .g-d { color: var(--dim); }
dl.stats { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 2px; flex: 1; }
dl.stats dt { color: var(--ash); }
dl.stats dd { color: var(--bone); text-align: right; font-variant-numeric: tabular-nums; }
.bonus { color: var(--ash); }
.fc-unlock { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 2px solid var(--jade); padding: 10px; }
.jade { color: var(--jade); }
.fc-unlock .sub { color: var(--ash); }
.next { color: var(--ash); }
.fi { color: var(--bone); }
.rowlbl { color: var(--ash); }
.mrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mslot { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--night); border: 2px solid var(--slate); cursor: pointer; }
.mslot.worn { border-color: var(--sodium); }
.mslot.locked { border-style: dashed; border-color: var(--dim); cursor: default; }
.pd { color: var(--ash); min-height: 2.5em; }
.fc-continue { position: sticky; bottom: 0; z-index: 1; }
@media (max-height: 700px) {
  .fc-panel :is(.fc-unlock .mask-icon, .fc-unlock .sub, .bonus) { display: none; }
  .fc-panel { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .fc-col { gap: 8px; }
}
@media (max-width: 380px) { .mrow { gap: 5px; } }
@media (min-width: 640px) and (max-height: 479px) {
  .fc-panel { max-width: 680px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ---------- run end (§5.9) */
#end { background: var(--ink); display: flex; justify-content: center; }
.end-panel { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; margin: 0 auto auto; }
.end-col { display: flex; flex-direction: column; gap: 12px; }
.end-panel h2 { color: var(--jade); }
.end-panel .story, .end-panel .outline { color: var(--ash); text-align: left; }
.newbest { color: var(--sodium); }
table.floors { width: 100%; border-collapse: collapse; }
table.floors th { text-align: left; color: var(--ash); font-weight: 400; padding: 0 4px 4px 0; border-bottom: 2px solid var(--slate); }
table.floors td { height: 32px; padding: 0 4px 0 0; border-bottom: 1px solid var(--slate); font-variant-numeric: tabular-nums; }
table.floors td.g { font-family: var(--f-disp); font-size: var(--d16); }
table.floors td.g-d { color: var(--ash); }
table.floors th:nth-child(1) { width: 34%; } table.floors th:nth-child(2) { width: 22%; } table.floors th:nth-child(3) { width: 26%; }
table.floors td.m { width: 40px; }
table.floors td.m .mask-icon { margin: 0; }
.share-preview {
  margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--f-text); font-size: var(--t); line-height: 1.3;
  background: var(--ink); border: 2px solid var(--slate); padding: 10px 12px; user-select: text; -webkit-user-select: text; color: var(--bone);
}
.copyhand { color: var(--sodium); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 720px) {
  .end-panel { max-width: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin: auto; }
}

/* ---------- settings (§5.10) */
#settings { background: var(--ink); display: flex; justify-content: center; }
.set-panel { width: 100%; max-width: 420px; margin: 0 auto auto; padding-bottom: 24px; }
@media (min-width: 720px) { .set-panel { max-width: 560px; } }
.set-scroll { display: flex; flex-direction: column; gap: 24px; }
.set-group { display: flex; flex-direction: column; gap: 12px; }
.set-group h3 { color: var(--sodium); border-bottom: 2px solid var(--slate); padding-bottom: 6px; }
fieldset.setting { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
fieldset.setting legend { padding: 0; margin-bottom: 8px; color: var(--bone); }
.segs { display: flex; gap: 0; }
.seg {
  flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 4px; border: 2px solid var(--slate); margin-left: -2px; cursor: pointer; color: var(--bone); background: var(--night);
}
.seg:first-of-type { margin-left: 0; }
input:checked + .seg { border-color: var(--sodium); background: rgba(255, 166, 43, .14); color: var(--sodium); position: relative; z-index: 1; }
input:focus-visible + .seg { outline: 3px solid var(--bone); outline-offset: 2px; box-shadow: 0 0 0 10px var(--ink); z-index: 2; position: relative; }
.note { color: var(--ash); }
.confirm-box { display: flex; flex-direction: column; gap: 8px; }
.set-foot { color: var(--ash); display: flex; flex-direction: column; gap: 4px; }
.set-foot .link { display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 600px) {
  fieldset.setting { grid-template-columns: 150px 1fr; align-items: center; column-gap: 16px; }
  fieldset.setting legend { float: left; margin: 0; }
  fieldset.setting .note { grid-column: 2; }
}

/* ---------- in play: pause button, hint bar, banner, labels (§5.2, §5.5, §5.13) */
#btn-pause { position: absolute; z-index: 16; top: calc(var(--sat) + 4px); right: calc(var(--sar) + 8px); background: rgba(23, 20, 42, .7); }
#hint {
  position: absolute; z-index: 14; left: 50%; top: 64px; transform: translateX(-50%);
  max-width: 92%; width: max-content; text-align: center; pointer-events: none;
  color: var(--bone); background: var(--night90); border: 2px solid var(--slate); padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none;
}
#hint.on { display: block; }
#hint.two { white-space: normal; text-wrap: balance; }
#hint.tag { color: var(--sodium); font-family: var(--f-disp); font-size: var(--d16); }
#banner {
  position: absolute; z-index: 15; left: 0; right: 0; top: 40px; pointer-events: none; text-align: center;
  font-family: var(--f-disp); font-size: var(--d24); line-height: 1; color: var(--bone);
  background: var(--night85); padding: 8px 16px 6px; display: none; opacity: 1; transition: opacity .15s linear;
}
#banner.on { display: block; }
#banner.fade { opacity: 0; }
#banner.jade { color: var(--jade); }
#banner.gold { color: var(--gold); }
html.reduced #banner { transition: none; }
#tlabels { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
#tlabels .tl { position: absolute; transform: translateX(-50%); font-family: var(--f-disp); font-size: var(--d16); color: var(--bone);
  background: rgba(13, 11, 20, .6); padding: 2px 4px 0; white-space: nowrap; line-height: 1; }
#tlabels .tl.ghost { color: var(--bone); transform: translate(-50%, -50%); background: none; }
#tlabels .tl.perk { transform: none; border: 1px solid var(--slate); }
#stage:not(.playing) #tlabels, #stage[data-screen="death"] #tlabels { display: none; }

/* ---------- toast and crash (§5.11) */
#toast {
  position: absolute; z-index: 40; left: 50%; bottom: calc(var(--sab) + 16px); transform: translateX(-50%);
  max-width: 92%; width: max-content; text-align: center; background: var(--night); border: 2px solid var(--slate);
  padding: 8px 12px; color: var(--bone); display: none; pointer-events: none;
}
#toast.on { display: block; }
.crash {
  position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, 92vw);
  display: flex; flex-direction: column; gap: 16px; text-align: center;
  background: var(--night); border: 2px solid var(--ink); outline: 2px solid var(--alert);
  box-shadow: inset 2px 2px 0 var(--dusk), inset -2px -2px 0 var(--floor); padding: 20px 16px; color: var(--bone);
}

/* ---------- debug overlay (?debug=1) */
.debug-overlay { position: absolute; z-index: 12; pointer-events: none; }
.debug-panel { position: absolute; z-index: 12; left: 4px; bottom: 4px; margin: 0; pointer-events: none; font: 11px/1.3 ui-monospace, monospace; color: var(--jade); background: rgba(13, 11, 20, .75); padding: 4px 6px; white-space: pre; }

/* ---------- static pages: privacy.html, 404.html (scrolling documents, same tokens and fonts) */
html.page, html.page body { position: static; overflow: auto; height: auto; min-height: 100%; }
html.page body { background: var(--ink); }
.doc {
  max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px;
  padding: calc(var(--sat) + 24px) calc(var(--sar) + 16px) calc(var(--sab) + 32px) calc(var(--sal) + 16px);
}
.doc-logo { text-align: center; }
.doc-plate {
  display: inline-block; font-family: var(--f-disp); font-size: calc(var(--u) * 3); line-height: .8; color: var(--jade); text-decoration: none;
  background: var(--ink); border: 2px solid var(--jade); padding: 8px 10px 4px;
}
.doc-langs { text-align: center; color: var(--ash); }
.doc-panel { display: flex; flex-direction: column; gap: 12px; }
.doc-panel h1 { color: var(--bone); }
.doc-panel h2 { color: var(--sodium); margin-top: 8px; }
.doc-panel p, .doc-panel li { color: var(--bone); line-height: 1.4; text-wrap: pretty; }
.doc-panel ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.doc-panel code { font-family: ui-monospace, monospace; font-size: .9em; color: var(--ice); }
.doc-date { color: var(--ash) !important; }
.doc-foot { color: var(--ash); display: flex; flex-direction: column; gap: 8px; text-align: center; }
.doc-404 { min-height: 100vh; justify-content: center; }
.doc-404 .doc-panel { align-items: center; text-align: center; }
.doc-404 .btn { width: auto; display: inline-flex; padding: 8px 24px; text-decoration: none; }
.note:empty { display: none; }
@media (max-height: 740px) { #stage[data-layout="P"] #title:not(.first) .story { display: none; } } /* returning players on short phones: the buttons stay above the fold */