/* Bag Bridge - a PC-98 night adventure screen. 16 colours only, square corners, integer pixel scale, no gradients, no glow. */
@font-face { font-family: "PM12"; src: url(/assets/fonts/PixelMplus12-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PM12"; src: url(/assets/fonts/PixelMplus12-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PM10"; src: url(/assets/fonts/PixelMplus10-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #000011; --night: #111133; --indigo: #222255; --indigo-2: #333377; --violet: #445599; --steel: #7788BB; --pale: #BBCCDD;
  --white: #FFFFEE; --plum: #553366; --maroon: #331122; --brown: #663333; --rust: #AA5522; --sodium-deep: #EE8822; --sodium: #FFAA33;
  --sodium-lt: #FFDD88; --skin: #EEAA88;
  --px: 3px; --hs: 3; --k: 2;
  --body: 24px; --lh: 36px; --small: 20px;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pix: "PM12", ui-monospace, monospace;
  --wrap: 1248px;
  --hdr: 78px;
  color-scheme: dark;
}
@media (max-width: 760px) { :root { --px: 2px; --body: 20px; --lh: 30px; --small: 20px; --k: 1; --hdr: 66px; } }
@media (max-width: 1151px) { :root { --hs: 2; } }
@media (min-width: 761px) and (max-height: 733px) { :root { --hs: 2; } }
@media (min-width: 1536px) and (min-height: 950px) { :root { --hs: 4; } }
@media (min-width: 1920px) and (min-height: 1166px) { :root { --hs: 5; } }
@media (min-width: 2304px) and (min-height: 1382px) { :root { --hs: 6; } }

* { box-sizing: border-box; }
html { background: var(--night); scrollbar-color: var(--violet) var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
body {
  margin: 0; min-height: 100vh; color: var(--pale); font: 400 var(--body)/var(--lh) var(--pix);
  background: var(--night) url(/assets/art/tiles/stars.png) 0 0 / calc(128 * var(--px)) calc(128 * var(--px)) repeat; image-rendering: pixelated;
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smooth: never; text-rendering: optimizeSpeed;
  cursor: url(/assets/cur.png) 0 0, default; overflow-x: hidden;
}
@media (max-width: 760px) { body { font-family: "PM10", var(--pix); } }
a, button, [role=button], [onclick], summary, label, select, .ca, [data-ca], input[type=range] { cursor: url(/assets/cur-hand.png) 9 0, pointer; }
input, textarea { cursor: url(/assets/cur-text.png) 7 14, text; }
.busy, .busy * { cursor: url(/assets/cur-wait.png) 9 14, wait !important; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
img.spr { image-rendering: pixelated; display: block; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
a { color: var(--sodium); text-decoration: none; }
b, strong, h1, h2, h3 { font-family: "PM12", var(--pix); font-weight: 700; }
::selection { background: var(--sodium); color: var(--ink); }
:focus-visible { outline: var(--px) solid var(--sodium-lt); outline-offset: var(--px); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 18px; line-height: 1.45; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.num.big { font-size: 20px; }
.st { color: var(--steel); } .so { color: var(--sodium); } .wh { color: var(--white); } .sk { color: var(--skin); }
.drop { text-shadow: var(--px) var(--px) 0 var(--ink); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- PC-98 window: ink / violet / ink / gap / steel */
.win {
  position: relative; background: var(--indigo); border: var(--px) solid var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--violet), inset 0 0 0 calc(2 * var(--px)) var(--ink), inset 0 0 0 calc(4 * var(--px)) var(--indigo), inset 0 0 0 calc(5 * var(--px)) var(--steel);
  padding: calc(8 * var(--px)) calc(9 * var(--px));
}
.win.dark { background: var(--night); box-shadow: inset 0 0 0 var(--px) var(--violet), inset 0 0 0 calc(2 * var(--px)) var(--ink), inset 0 0 0 calc(4 * var(--px)) var(--night), inset 0 0 0 calc(5 * var(--px)) var(--steel); }
.win > .tb { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: calc(-2 * var(--px)) 0 calc(5 * var(--px)); padding-bottom: calc(3 * var(--px)); border-bottom: var(--px) solid var(--violet); }
.win > .tb > b, .win > .tb > h2, .win > .tb > h1 { color: var(--sodium); font-size: 24px; line-height: 36px; }
.tb .meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--steel); }
.tb .meta .num { font-size: 16px; }
.tb .meta .num b { color: var(--white); font-family: var(--mono); font-weight: 500; }
.cgwin { padding: calc(7 * var(--px)); }
.cg { position: relative; display: block; overflow: hidden; background: var(--ink); }
.cg img, .cg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg canvas { pointer-events: none; }
.cg320 { width: calc(320px * var(--k)); max-width: 100%; aspect-ratio: 320 / 200; }

/* dialogue box */
.dlg-box { position: relative; min-height: calc(3 * var(--lh) + 16 * var(--px)); }
.dlg-box .who { color: var(--sodium-lt); display: block; }
.dlg-box .line { color: var(--white); cursor: url(/assets/cur-hand.png) 9 0, pointer; }
.dlg-box .line .cur { display: inline-block; width: 18px; height: 12px; margin-left: 8px; vertical-align: -1px; background: url(/assets/ic/step.png) 0 0 / 18px 12px no-repeat; animation: bob .9s steps(1) infinite; }
@keyframes step { 50% { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(2px); } }

/* ---------------------------------------------------------------- command items (menus, buttons) */
.cmd {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 1.15em; margin: 0;
  font: inherit; color: var(--white); background: none; border: 0; text-align: left; white-space: nowrap; user-select: none;
}
.cmd::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 18px; margin-top: -10px; background: url(/assets/ic/sel.png) 0 0 / 12px 18px no-repeat; visibility: hidden; }
.cmd:hover, .cmd:focus-visible, .cmd.on { color: var(--sodium-lt); }
.cmd:hover::before, .cmd:focus-visible::before, .cmd.on::before, .cmd[aria-current]::before { visibility: visible; }
.cmd:hover::before, .cmd:focus-visible::before { animation: nudge .56s steps(1) infinite; }
.cmd:focus-visible { outline: none; }
.cmd:active { transform: translateY(var(--px)); }
.cmd.pri { color: var(--sodium); }
.cmd.pri:hover { color: var(--sodium-lt); }
.cmd[disabled], .cmd.off { color: var(--steel); pointer-events: none; background: url(/assets/art/tiles/dither-indigo-50.png) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); }
.cmd[disabled]::before { visibility: hidden; }
.cmd.busy { color: var(--sodium-lt); pointer-events: none; }
.cmd.busy::before { visibility: visible; animation: nudge .28s steps(1) infinite; }
.cmd svg { display: block; }
@keyframes nudge { 50% { transform: translateX(-2px); } }
.menu-col { display: grid; justify-items: start; gap: 2px; }
.menu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }

/* inputs: inset window, block caret, numbers in mono */
.field { display: grid; gap: 6px; }
.field > span { color: var(--steel); font-size: var(--small); line-height: 28px; font-family: "PM10", var(--pix); }
.in {
  width: 100%; min-height: 44px; padding: 6px 12px; color: var(--white); background: var(--night); border: 0; border-radius: 0;
  box-shadow: inset var(--px) var(--px) 0 var(--ink), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--indigo-2);
  font-family: var(--mono); font-weight: 500; font-size: 18px; font-variant-numeric: tabular-nums; caret-color: var(--sodium); caret-shape: block;
  -webkit-appearance: none; appearance: none;
}
.in::placeholder { color: var(--violet); }
.in:focus { outline: none; box-shadow: inset var(--px) var(--px) 0 var(--ink), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--sodium-deep); }
.in.word { font-family: var(--pix); font-size: var(--body); }
.tog { display: inline-flex; gap: 0; padding: calc(1 * var(--px)); background: var(--night); box-shadow: inset var(--px) var(--px) 0 var(--ink), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--indigo-2); justify-self: start; }
.tog .cmd { padding: 0 14px 0 26px; min-height: 40px; }
.tog .cmd::before { left: 8px; }
.tog .cmd[aria-pressed=true] { color: var(--ink); background: var(--sodium); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--sodium-deep), inset 0 var(--px) 0 var(--sodium-lt); }
.tog .cmd[aria-pressed=true]::before { visibility: hidden; }
.tog .cmd[aria-pressed=true]:hover::before { visibility: hidden; }

/* slider: dither track + briefcase thumb */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; margin: 0; }
.slider::-webkit-slider-runnable-track { height: calc(4 * var(--px)); background: url(/assets/art/tiles/dither-fog-50.png) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); box-shadow: 0 0 0 var(--px) var(--ink); }
.slider::-moz-range-track { height: calc(4 * var(--px)); background: url(/assets/art/tiles/dither-fog-50.png) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); box-shadow: 0 0 0 var(--px) var(--ink); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 64px; height: 64px; margin-top: -26px; background: url(/assets/art/icon-case.png) 0 0 / 64px 64px no-repeat; border: 0; image-rendering: pixelated; }
.slider:focus { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { filter: none; outline: var(--px) solid var(--sodium-lt); outline-offset: 2px; }
.slider:active { cursor: url(/assets/cur-hand.png) 9 0, grabbing; }
.slider::-moz-range-thumb { width: 64px; height: 64px; background: url(/assets/art/icon-case.png) 0 0 / 64px 64px no-repeat; border: 0; border-radius: 0; image-rendering: pixelated; }

/* dither bars (river / bridge) */
.bar { position: relative; height: calc(8 * var(--px)); background: var(--night); box-shadow: inset 0 0 0 var(--px) var(--ink); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); transition: width .48s steps(8); background-size: calc(4 * var(--px)) calc(4 * var(--px)); }
.bar.river i { background-image: url(/assets/art/tiles/dither-fog-75.png); }
.bar.bridge i { background-image: url(/assets/art/tiles/dither-sodium-50.png); }

/* 10 coin slots: full = still on the bridge, empty = already crossed */
.slots { display: inline-flex; gap: var(--px); }
.slots i { width: calc(3 * var(--px)); height: calc(4 * var(--px)); background: var(--sodium); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--sodium-deep); }
.slots i.e { background: url(/assets/art/tiles/dither-indigo-50.png) 0 0 / calc(2 * var(--px)) calc(2 * var(--px)); box-shadow: none; }
.slots.env i { background: var(--white); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--steel); }
.slots.env i.e { background: url(/assets/art/tiles/dither-indigo-50.png) 0 0 / calc(2 * var(--px)) calc(2 * var(--px)); box-shadow: none; }

/* CA row */
.carow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; }
.carow .cl { color: var(--steel); }
.carow .cv { color: var(--white); overflow-wrap: anywhere; word-break: break-all; font-size: 16px; }
.carow.pre .cv { font-family: var(--pix); font-size: var(--body); color: var(--steel); }
.carow .cmd.done { color: var(--sodium-lt); }

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px 22px; min-height: var(--hdr); padding: 6px 24px;
  background: var(--ink); border-bottom: var(--px) solid var(--violet);
}
.hdr .home { display: flex; align-items: center; gap: 12px; color: var(--white); flex: none; }
.hdr .home img { width: 67px; height: 60px; }
.hdr .home b { font-size: 24px; }
.hdr .tk { color: var(--sodium); font-size: 16px; }
.hdr .nav { display: flex; gap: 2px 14px; margin-left: 12px; flex-wrap: wrap; }
.hdr .nav .cmd[aria-current] { color: var(--sodium); }
.hdr .side { margin-left: auto; display: flex; align-items: center; gap: 4px 12px; }
.hdr .wal { color: var(--sodium); }
.burger { display: none; }
.menu { position: fixed; top: calc(var(--hdr) + 6px); right: 12px; z-index: 50; display: grid; justify-items: start; min-width: 220px; animation: dith-in .24s steps(1) both; }
@media (max-width: 1100px) { .hdr .nav { display: none; } .burger { display: inline-flex; } }
@media (max-width: 760px) {
  .hdr { padding: 3px 10px; gap: 8px; }
  .hdr .home b, .hdr .pumpc { display: none; }
  .hdr .side { gap: 0 2px; }
  .hdr .cmd { padding-left: 1em; }
}

/* ---------------------------------------------------------------- layout */
main { display: block; }
.sec { position: relative; z-index: 0; width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; padding: 80px 0; }
/* section heading = a PC-98 location plate: reverse-video "Scene N" tab + title in a window frame, then the subtitle
   and a dither rail running to the edge of the column (the plate's title bar carried on) */
main { counter-reset: scene; }
.sec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 28px; }
.sec-h > h2, .sec-h > h1:not(.vh) {
  display: inline-flex; align-items: stretch; margin: 0; color: var(--white); font-size: 36px !important; line-height: 48px !important;
  background: var(--indigo); border: var(--px) solid var(--ink); padding: calc(4 * var(--px)) calc(8 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px));
  box-shadow: inset 0 0 0 var(--px) var(--violet), inset 0 0 0 calc(2 * var(--px)) var(--ink), inset 0 0 0 calc(3 * var(--px)) var(--indigo), inset 0 0 0 calc(4 * var(--px)) var(--steel);
  text-shadow: var(--px) var(--px) 0 var(--ink);
}
.sec-h .scn { counter-increment: scene; display: inline-flex; align-items: center; gap: 8px; margin: calc(-1 * var(--px)) 18px calc(-1 * var(--px)) 0; padding: 0 14px;
  color: var(--ink); background: var(--sodium); font: 400 20px/1 "PM10", var(--pix); text-shadow: none; }
.sec-h .scn::after { content: counter(scene); font-family: var(--mono); font-weight: 500; font-size: 20px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.sec-h > .st { flex: 0 1 auto; min-width: 0; font-size: var(--small); line-height: 28px; font-family: "PM10", var(--pix); }
.sec-h::after { content: ""; flex: 1 1 40px; min-width: 40px; height: calc(4 * var(--px)); background: url(/assets/art/tiles/dither-indigo-50.png) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); box-shadow: 0 calc(-1 * var(--px)) 0 var(--violet); }
@media (max-width: 760px) {
  .sec { width: calc(100% - 32px); padding: 48px 0; }
  .sec-h { gap: 10px 12px; margin-bottom: 20px; }
  .sec-h > h2, .sec-h > h1:not(.vh) { font-size: 24px !important; line-height: 36px !important; }
  .sec-h .scn { font-size: 20px; margin-right: 12px; padding: 0 10px; }
  .sec-h .scn::after { font-size: 16px; }
  .sec-h > .st { flex-basis: 100%; }
  .sec-h::after { display: none; }
  .till .tillrow { grid-template-columns: 48px minmax(0, 1fr); }
  .till .tillrow img { width: 48px; height: 48px; }
  .till .tl { grid-column: 2; }
  .posewrap.compact .lcol { width: 100%; }
}

/* ---------------------------------------------------------------- 1 hero = CG screen
   Full-bleed: the art is drawn at an integer scale that COVERS the first screen (--hs = ceil(max(w/384, h/216)), set by
   home.js from the real box; media queries below are the no-JS fallback) and is centred on whole pixels (--sx/--sy).
   Words and the command window use the fit scale --ts = floor(min(w/384, h/216)) so they never outgrow the screen. */
.hero { position: relative; height: calc(100svh - var(--hdr)); min-height: 520px; overflow: hidden; background: var(--ink); --ts: var(--hs); }
.scene { position: absolute; left: var(--sx, calc(50% - 192px * var(--hs))); top: var(--sy, calc(50% - 108px * var(--hs))); width: calc(384px * var(--hs)); height: calc(216px * var(--hs)); background: var(--ink); }
.scene > img, .scene > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .tall { display: none; }
.sky { position: absolute; left: 0; right: 0; top: calc(var(--sy, 0px) + 13px * var(--hs)); text-align: center; pointer-events: none; }
.sky h1 { color: var(--white); font-size: calc(24px * var(--ts)); line-height: 1.25; text-shadow: var(--px) var(--px) 0 var(--ink); letter-spacing: 0; }
.sky p { color: var(--pale); font-size: calc(12px * var(--ts)); line-height: 1.5; margin-top: calc(2px * var(--ts)); text-shadow: var(--px) var(--px) 0 var(--ink); }
.hcmd { position: absolute; left: 50%; bottom: calc(8px * var(--ts)); transform: translateX(-50%); width: min(calc(232px * var(--ts)), calc(100% - 24px)); }
.hcmd .menu-row { margin-bottom: 6px; }
.hcmd .carow { padding-top: 6px; border-top: var(--px) solid var(--indigo-2); }
.demo { display: inline-block; padding: 0 8px; color: var(--ink); background: var(--steel); font-family: "PM10", var(--pix); font-size: 20px; line-height: 28px; }
@media (min-width: 761px) { .sky { top: max(12px, calc(var(--sy, 0px) + 13px * var(--hs))); } }
@media (max-width: 760px) {
  .hero { display: block; height: auto; min-height: 0; padding: 0 0 4px; overflow: hidden; background: transparent; }
  .scene { position: relative; left: auto; top: auto; width: 100%; height: auto; background: transparent; display: block; }
  .scene > img.wide, .scene > canvas { display: none; }
  .scene > img.tall { display: block; position: relative; inset: auto; width: 390px; height: 520px; max-width: none; margin: 0 auto; left: 50%; transform: translateX(-50%); }
  .sky { top: 22px; padding: 0 12px; }
  .sky h1 { font-size: 48px; }
  .sky p { font-size: 20px; line-height: 30px; font-family: "PM10", var(--pix); max-width: 300px; margin: 6px auto 0; }
  .hcmd { position: relative; left: auto; bottom: auto; transform: none; width: calc(100% - 24px); margin: -72px auto 0; }
  .hcmd .tb .meta { gap: 4px 14px; }
}

/* ---------------------------------------------------------------- 2 the crossing */
/* VN screen: CG left, status window right (same height), the dialogue box across both underneath */
.crossing { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cg talk" "dlg dlg"; gap: 0; align-items: stretch; }
.crossing .cgwin { grid-area: cg; padding: calc(6 * var(--px)); }
.crossing .cg { width: calc(320px * 2); aspect-ratio: 320 / 200; }
.crossing .talk { grid-area: talk; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; margin-left: calc(-1 * var(--px)); }
.crossing .xdlg { grid-area: dlg; margin-top: calc(-1 * var(--px)); min-height: calc(2 * var(--lh) + 16 * var(--px)); }
.cmp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.cmp .lb { font-family: "PM10", var(--pix); font-size: var(--small); color: var(--steel); white-space: nowrap; }
.cmp .lb.so { color: var(--sodium); }
.cmp .v { grid-column: 1 / -1; margin-top: -6px; text-align: right; }
.size { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.size .num { color: var(--white); }
.src { color: var(--steel); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 28px; }
@media (min-width: 1440px) { .crossing .cg { width: calc(320px * 2); } }
@media (max-width: 1151px) { .crossing { grid-template-columns: 1fr; grid-template-areas: "cg" "talk" "dlg"; } .crossing .cgwin { justify-self: center; max-width: 100%; } .crossing .talk { margin: calc(-1 * var(--px)) 0 0; } }
@media (max-width: 760px) { .crossing .cgwin, .how .cgwin { justify-self: stretch; } .crossing .cg, .how .cg { width: 100%; } .sec-h .st { flex-basis: 100%; } }

/* ---------------------------------------------------------------- 3 the board */
.board { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch; }
.board .win { min-height: 220px; }
.board > .win { display: flex; flex-direction: column; }
.board > .win > .rows { flex: 1; align-content: start; }
.bside { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bside > .win + .win { margin-top: calc(-1 * var(--px)); }
.bside > [data-col=envs]:only-child, .bside:has(> .till[hidden]) > [data-col=envs] { flex: 1; }
.till { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.till .tillrow { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: center; gap: 4px 16px; }
.till .tillrow img { width: 64px; height: 64px; }
.till .tillrow .num { font-size: 20px; white-space: nowrap; }
.till .tl { color: var(--steel); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 28px; }
.till .menu-col { margin-top: auto; padding-top: 8px; border-top: var(--px) solid var(--indigo-2); }
.more { margin: 8px 0 0 6px; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 6px; color: var(--pale); border-top: var(--px) solid var(--indigo-2); position: relative; }
.row:first-child { border-top: 0; }
.row::before { content: ""; position: absolute; left: -18px; top: 50%; width: 12px; height: 18px; margin-top: -9px; background: url(/assets/ic/sel.png) 0 0 / 12px 18px no-repeat; visibility: hidden; }
.row:hover, .row:focus-visible { background: var(--indigo-2); outline: none; }
.row:hover::before, .row:focus-visible::before { visibility: visible; animation: nudge .56s steps(1) infinite; }
.row img { width: 64px; height: 64px; }
.row .nm { color: var(--white); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.row .nm .num { color: var(--steel); font-size: 15px; }
.row .facts { display: flex; flex-wrap: wrap; gap: 0 16px; }
.row .facts .num { font-size: 16px; }
.row .rt { display: grid; justify-items: end; gap: 6px; text-align: right; }
.row .rt .num { font-size: 18px; }
.row .rt .cmd { min-height: 32px; }
.tag { font-family: "PM10", var(--pix); font-size: 20px; line-height: 24px; padding: 0 6px; color: var(--ink); background: var(--steel); }
.tag.so { background: var(--sodium); }
.tag.dim { background: var(--violet); color: var(--pale); }
.empty { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 8px 0 4px; }
.empty .cg { width: calc(320px * var(--k)); max-width: 100%; aspect-ratio: 320 / 200; }
@media (max-width: 1151px) { .board { grid-template-columns: 1fr; } .till { min-height: 0; } }
@media (max-width: 760px) {
  .row { grid-template-columns: 48px minmax(0, 1fr); padding: 12px 2px; }
  .row img { width: 32px; height: 32px; }
  .row .rt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 14px; text-align: left; }
}

/* ---------------------------------------------------------------- 4 pose card */
.pose { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px; align-items: start; }
.pose .cg { width: calc(320px * 2); aspect-ratio: 320 / 200; }
.pose .facts { display: grid; gap: 10px; align-content: start; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.kv dt { color: var(--steel); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 28px; white-space: nowrap; }
.kv dd { margin: 0; color: var(--white); min-width: 0; }
.kv dd .num { font-size: 17px; }
.kv dd small { display: block; color: var(--steel); font-family: "PM10", var(--pix); font-size: 20px; line-height: 26px; }
.posewrap { display: grid; gap: calc(-1 * var(--px)); }
/* home preview: CG with its dialogue box under it on the left, the facts on the right - both columns end together */
.posewrap.compact .pose { align-items: stretch; }
.posewrap.compact .lcol { display: flex; flex-direction: column; width: calc(320px * 2); max-width: 100%; min-width: 0; }
.posewrap.compact .lcol .cg { width: 100%; }
.dlg-in { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-top: calc(4 * var(--px)); padding: calc(5 * var(--px)) calc(6 * var(--px)); background: var(--night);
  box-shadow: inset var(--px) var(--px) 0 var(--ink), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--indigo-2); }
.dlg-in .line { color: var(--white); min-height: calc(2 * var(--lh)); cursor: url(/assets/cur-hand.png) 9 0, pointer; }
.dlg-in .line .cur { display: inline-block; width: 18px; height: 12px; margin-left: 8px; vertical-align: -1px; background: url(/assets/ic/step.png) 0 0 / 18px 12px no-repeat; animation: bob .9s steps(1) infinite; }
.dlg-in .menu-row { margin-top: auto; }
.posewrap.compact .facts { padding-top: 2px; }
.posewrap > .win + .win { margin-top: calc(-1 * var(--px)); }
.acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: start; }
.part { display: none; gap: 10px; align-items: end; grid-template-columns: minmax(0, 1fr) auto; margin-top: 8px; }
.part.open { display: grid; }
.note { color: var(--skin); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 28px; }
.note.st { color: var(--steel); }
.coinid { display: grid; gap: 6px; }
.coinid .links { display: flex; gap: 0 18px; flex-wrap: wrap; }
@media (max-width: 1151px) { .pose { grid-template-columns: minmax(0, 1fr); gap: 18px; } .pose .cg { justify-self: center; } .posewrap.compact .lcol { justify-self: center; } }
@media (max-width: 760px) { .pose .cg { width: 100%; } .pose .tb .meta { flex-basis: 100%; } .acts { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; gap: 0 0; } .kv dd { margin-bottom: 8px; } }

/* ---------------------------------------------------------------- 5 how a deal goes (chapter select) */
.how { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; align-items: stretch; }
.how .cg { width: calc(320px * 2); aspect-ratio: 320 / 200; }
.how .talk { margin-left: calc(-1 * var(--px)); display: grid; align-content: space-between; gap: 18px; }
.chap { display: grid; gap: 4px; }
.chap .cmd { white-space: normal; line-height: 30px; padding-top: 6px; padding-bottom: 6px; }
.chap .cmd .n { font-family: var(--mono); font-size: 16px; color: var(--steel); }
.chap .cmd.on { color: var(--white); }
.fee { color: var(--steel); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 28px; }
@media (max-width: 1151px) { .how { grid-template-columns: 1fr; } .how .cgwin { justify-self: center; } .how .talk { margin: calc(-1 * var(--px)) 0 0; } }

/* "How it works" film: our own player (lib/film.js). Screen = the CG frame; under it a command row:
   Play / dither timeline (night track, fog = loaded, sodium = watched, sodium-lt knob) / clock / Sound / Full */
.pl { position: relative; }
.pl:focus { outline: none; }
.pl-scr { position: relative; aspect-ratio: 16 / 9; background: var(--ink); box-shadow: 0 0 0 var(--px) var(--ink); cursor: url(/assets/cur-hand.png) 9 0, pointer; }
.pl-scr video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); image-rendering: auto; }
.pl-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: calc(4 * var(--px));
  min-height: 48px; padding: calc(3 * var(--px)) calc(8 * var(--px)) calc(3 * var(--px)) calc(6 * var(--px)); font: 700 24px/36px "PM12", var(--pix); color: var(--white);
  background: var(--indigo); border: var(--px) solid var(--ink); box-shadow: inset 0 0 0 var(--px) var(--violet), var(--px) var(--px) 0 0 var(--ink); }
.pl.fresh .pl-big { display: inline-flex; }
.pl-big:hover, .pl-big:focus-visible { color: var(--sodium-lt); background: var(--indigo-2); outline: none; }
.pl-big:active { transform: translate(-50%, calc(-50% + var(--px))); }
.pl-tri { width: 10px; height: 18px; background: var(--sodium); -webkit-mask: url(/assets/ic/play.png) 0 0 / 10px 18px; mask: url(/assets/ic/play.png) 0 0 / 10px 18px; }
.pl-bar { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px 16px;
  margin-top: calc(4 * var(--px)); padding-top: calc(2 * var(--px)); border-top: var(--px) solid var(--violet); }
.pl-bar .cmd { min-height: 44px; }
.pl-tl { height: 44px; display: flex; align-items: center; touch-action: none; user-select: none; cursor: url(/assets/cur-hand.png) 9 0, pointer; }
.pl-tl:focus { outline: none; }
.pl-tl:focus-visible .pl-tr { outline: var(--px) solid var(--sodium-lt); outline-offset: calc(2 * var(--px)); }
.pl-tr { position: relative; display: block; width: 100%; height: calc(4 * var(--px)); background: url(/assets/art/tiles/dither-night-50.png) 0 0 / calc(4 * var(--px)) calc(4 * var(--px));
  box-shadow: 0 0 0 var(--px) var(--ink); }
.pl-tr i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-size: calc(4 * var(--px)) calc(4 * var(--px)); }
.pl-buf { background-image: url(/assets/art/tiles/dither-fog-50.png); }
.pl-pos { background-image: url(/assets/art/tiles/dither-sodium-50.png); }
.pl-kn { position: absolute; left: 0; top: 50%; width: calc(3 * var(--px)); height: calc(8 * var(--px)); transform: translate(-50%, -50%); background: var(--sodium-lt); box-shadow: 0 0 0 var(--px) var(--ink); }
.pl.drag .pl-kn, .pl-tl:hover .pl-kn { background: var(--white); }
.pl-t { color: var(--pale); white-space: nowrap; font-size: 16px; }
.pl-t [data-cur] { color: var(--white); }
.pl.full { display: flex; flex-direction: column; background: var(--ink); }
.pl.full .pl-scr { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.pl.full .pl-bar { margin: 0; padding: 0 24px; background: var(--indigo); border-top-color: var(--violet); }
@media (max-width: 760px) {
  .pl-bar { grid-template-columns: 5em minmax(0, 1fr) auto auto; grid-template-areas: "tl tl tl t" "pp . mu fs"; gap: 0 8px; }
  .pl-t { justify-self: end; font-size: 15px; }
  .pl-tl { grid-area: tl; } .pl-pp { grid-area: pp; } .pl-t { grid-area: t; } .pl-mu { grid-area: mu; } .pl-fs { grid-area: fs; }
  .pl-big { font-size: 20px; line-height: 30px; min-height: 44px; }
}
@media (max-width: 359px) { .pl-bar { gap: 0 4px; } .pl-bar .cmd { padding-right: 2px; } .pl-tot { display: none; }
}

/* ---------------------------------------------------------------- 6 ending: the side view of the bridge as a full-bleed
   band (integer scale --es that covers the width, set by home.js; media queries are the fallback), the Save / Load window
   laid over the dark water under the arches */
.ending { position: relative; padding: 64px 0 56px; }
.ending .band { position: relative; height: calc(125px * var(--es, 3)); overflow: hidden; background: var(--ink); box-shadow: 0 calc(-1 * var(--px)) 0 var(--ink), 0 calc(-2 * var(--px)) 0 var(--violet); }
.ending .band .cg { position: absolute; top: 0; left: var(--ex, calc(50% - 187.5px * var(--es, 3))); width: calc(375px * var(--es, 3)); height: calc(125px * var(--es, 3)); }
.ending .save { position: relative; z-index: 1; width: min(760px, calc(100% - 32px)); margin: calc(-30px * var(--es, 3)) auto 0; }
body[data-page=home] .foot .fl { display: none; }
@media (min-width: 1153px) { .ending { --es: 4; } }
@media (min-width: 1501px) { .ending { --es: 5; } }
@media (max-width: 1151px) { .ending { --es: 3; } }
@media (max-width: 760px) { .ending { --es: 2; padding-top: 40px; } .ending .save { margin-top: -24px; } }

/* ---------------------------------------------------------------- forms (put) */
.put { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.tabs { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.tabs .cmd[aria-selected=true] { color: var(--sodium); }
.tabs .cmd[aria-selected=true]::before { visibility: visible; }
.tabs .cmd[aria-selected=true]::after { content: ""; position: absolute; left: 1.15em; right: 6px; bottom: 0; height: calc(2 * var(--px)); background: url(/assets/art/tiles/dither-sodium-50.png) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); }
.form { display: grid; gap: 18px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.coinline { min-height: 28px; color: var(--steel); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 28px; }
.coinline .num { font-size: 15px; }
.quick { display: flex; flex-wrap: wrap; gap: 0 14px; }
.quick .cmd { min-height: 34px; font-size: var(--small); font-family: "PM10", var(--pix); }
.quick .cmd .num { font-size: 15px; }
.preview { display: grid; gap: 8px; }
.side-cg .cg { width: 100%; aspect-ratio: 320 / 200; }
@media (max-width: 1151px) { .put { grid-template-columns: 1fr; } .side-cg { display: none; } }
@media (max-width: 760px) { .form .two { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- mine / stats / docs / 404 */
.stack { display: grid; gap: 24px; }
.list { display: grid; }
.li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 12px 0; border-top: var(--px) solid var(--indigo-2); }
.li:first-child { border-top: 0; }
.li .nm { color: var(--white); }
.li .ac { display: flex; flex-wrap: wrap; gap: 0 14px; justify-content: end; }
@media (max-width: 760px) { .li { grid-template-columns: 1fr; } .li .ac { justify-content: start; } }
.killer { color: var(--white); font-size: 36px; line-height: 54px; }
.killer .num { font-size: 40px; color: var(--sodium); line-height: 1.2; }
@media (max-width: 760px) { .killer { font-size: 24px; line-height: 36px; } .killer .num { font-size: 28px; } }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.figs > div { padding: 14px 18px; border-left: var(--px) solid var(--indigo-2); display: grid; gap: 2px; }
.figs > div:first-child { border-left: 0; }
.figs .num { font-size: 24px; color: var(--white); }
.figs span { color: var(--steel); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 26px; }
@media (max-width: 760px) { .figs { grid-template-columns: 1fr 1fr; } .figs > div:nth-child(3) { border-left: 0; } }
.feed .li .num { font-size: 15px; }
.doc { display: grid; gap: 24px; max-width: 980px; margin: 0 auto; }
.doc h2 { color: var(--sodium); font-size: 24px; line-height: 36px; }
.doc p, .doc li { color: var(--pale); }
.doc ol, .doc ul { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.doc ul { list-style: none; padding-left: 0; }
.doc ul li { position: relative; padding-left: 1.2em; }
.doc ul li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; background: var(--sodium-deep); -webkit-mask: url(/assets/ic/dot.png) 0 0 / 8px 8px; mask: url(/assets/ic/dot.png) 0 0 / 8px 8px; }
.doc .num { font-size: 17px; color: var(--white); }
.doc code { font-family: var(--mono); font-size: 15px; color: var(--white); overflow-wrap: anywhere; }
table.params { width: 100%; border-collapse: collapse; }
table.params th, table.params td { text-align: left; padding: 8px 10px; border-top: var(--px) solid var(--indigo-2); vertical-align: top; }
table.params th { color: var(--steel); font-weight: 400; font-family: "PM10", var(--pix); font-size: var(--small); }
table.params td .num { font-size: 16px; }
@media (max-width: 760px) { table.params, table.params tbody, table.params tr, table.params td, table.params th { display: block; } table.params thead { display: none; } table.params tr { border-top: var(--px) solid var(--indigo-2); padding: 6px 0; } table.params td { border: 0; padding: 2px 0; } }
.lost { display: grid; justify-items: center; gap: 22px; text-align: center; padding: 64px 0; }
.lost .cg { width: calc(320px * var(--k)); max-width: calc(100vw - 32px); }
.lost h1 { color: var(--white); font-size: 36px; line-height: 48px; }
@media (max-width: 760px) { .lost h1 { font-size: 24px; line-height: 36px; } }
.prelaunch { display: grid; justify-items: center; gap: 16px; text-align: center; max-width: 760px; margin: 0 auto; }
.prelaunch .cg { width: calc(320px * var(--k)); max-width: 100%; }

/* ---------------------------------------------------------------- footer = the PC-98 function-key line */
.foot { display: grid; gap: 16px; padding: 18px max(16px, calc((100% - var(--wrap)) / 2)) 28px; background: var(--ink); border-top: var(--px) solid var(--violet); }
.fkeys { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(2 * var(--px)); }
.fkeys a { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; padding: 0 12px; color: var(--pale); background: var(--indigo);
  box-shadow: inset 0 0 0 var(--px) var(--violet), inset 0 calc(-2 * var(--px)) 0 var(--indigo-2); white-space: nowrap; overflow: hidden; }
.fkeys .fk { flex: none; padding: 0 5px; color: var(--ink); background: var(--steel); font-family: var(--mono); font-weight: 500; font-size: 14px; line-height: 22px; -webkit-font-smoothing: antialiased; }
.fkeys a:hover, .fkeys a:focus-visible { color: var(--sodium-lt); background: var(--indigo-2); outline: none; }
.fkeys a:hover .fk, .fkeys a:focus-visible .fk { background: var(--sodium); }
.fkeys a:active { transform: translateY(var(--px)); }
.foot .fine { color: var(--steel); font-family: "PM10", var(--pix); font-size: var(--small); line-height: 28px; }
.foot .fl { max-width: 820px; }
@media (max-width: 1100px) { .fkeys { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fkeys { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .fkeys a { padding: 0 10px; gap: 8px; } }
.toasts { position: fixed; z-index: 90; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; gap: 8px; width: min(640px, calc(100% - 24px)); pointer-events: none; }
.toast { position: relative; pointer-events: auto; color: var(--white); background: var(--indigo); border: var(--px) solid var(--ink); padding: 12px 18px 12px 52px; overflow-wrap: anywhere; font-family: "PM10", var(--pix); font-size: 20px; line-height: 28px;
  box-shadow: inset 0 0 0 var(--px) var(--violet), inset 0 0 0 calc(2 * var(--px)) var(--ink), inset 0 0 0 calc(3 * var(--px)) var(--indigo), inset 0 0 0 calc(4 * var(--px)) var(--steel), var(--px) var(--px) 0 0 var(--ink);
  animation: dith-in .24s steps(1) both; }
.toast::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 18px; margin-top: -9px; background: url(/assets/ic/sel.png) 0 0 / 12px 18px no-repeat; }
.toast.ok::before { width: 16px; height: 10px; margin-top: -5px; background: var(--sodium); -webkit-mask: url(/assets/ic/ok.png) 0 0 / 16px 10px; mask: url(/assets/ic/ok.png) 0 0 / 16px 10px; }
.toast.err { color: var(--skin); }
.toast.err::before { left: 24px; width: 4px; height: 14px; margin-top: -7px; background: var(--skin); -webkit-mask: url(/assets/ic/bang.png) 0 0 / 4px 14px; mask: url(/assets/ic/bang.png) 0 0 / 4px 14px; }
.toast.out { animation: dith-out .24s steps(1) both; }
@keyframes dith-in { 0% { -webkit-mask: url(/assets/art/tiles/m25.png) 0 0 / calc(4 * var(--px)); mask: url(/assets/art/tiles/m25.png) 0 0 / calc(4 * var(--px)); }
  33% { -webkit-mask: url(/assets/art/tiles/m50.png) 0 0 / calc(4 * var(--px)); mask: url(/assets/art/tiles/m50.png) 0 0 / calc(4 * var(--px)); }
  66% { -webkit-mask: url(/assets/art/tiles/m75.png) 0 0 / calc(4 * var(--px)); mask: url(/assets/art/tiles/m75.png) 0 0 / calc(4 * var(--px)); }
  100% { -webkit-mask: none; mask: none; } }
@keyframes dith-out { 0% { -webkit-mask: url(/assets/art/tiles/m75.png) 0 0 / calc(4 * var(--px)); mask: url(/assets/art/tiles/m75.png) 0 0 / calc(4 * var(--px)); }
  33% { -webkit-mask: url(/assets/art/tiles/m50.png) 0 0 / calc(4 * var(--px)); mask: url(/assets/art/tiles/m50.png) 0 0 / calc(4 * var(--px)); }
  66% { -webkit-mask: url(/assets/art/tiles/m25.png) 0 0 / calc(4 * var(--px)); mask: url(/assets/art/tiles/m25.png) 0 0 / calc(4 * var(--px)); }
  100% { opacity: 0; } }
.toast a { color: var(--sodium); }
dialog.dlg { color: var(--pale); background: var(--indigo); border: var(--px) solid var(--ink); padding: 28px 28px 24px; width: min(460px, calc(100% - 24px)); font: inherit;
  box-shadow: inset 0 0 0 var(--px) var(--violet), inset 0 0 0 calc(2 * var(--px)) var(--ink), inset 0 0 0 calc(4 * var(--px)) var(--indigo), inset 0 0 0 calc(5 * var(--px)) var(--steel); }
dialog.dlg::backdrop { background: url(/assets/art/tiles/veil.png) 0 0 / calc(2 * var(--px)) calc(2 * var(--px)); image-rendering: pixelated; }
dialog.dlg[open] { animation: dith-in .24s steps(1) both; }
dialog.dlg h2 { font-family: "PM12", var(--pix); }
dialog.dlg h2 { color: var(--sodium); font-size: 24px; margin-bottom: 14px; }
.dlg-x { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; color: var(--pale); background: none; border: 0; font-size: 0; }
.dlg-x::before { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; background: currentColor; -webkit-mask: url(/assets/ic/close.png) 0 0 / 16px 16px; mask: url(/assets/ic/close.png) 0 0 / 16px 16px; }
.dlg-x:hover, .dlg-x:focus-visible { color: var(--sodium-lt); outline: none; }
.dlg-x:active::before { transform: translateY(2px); }
.wp-list { display: grid; gap: 6px; }
.wp-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; color: var(--white); background: var(--night); border: 0; font: inherit; text-align: left; box-shadow: inset 0 0 0 var(--px) var(--indigo-2); }
.wp-item { position: relative; padding-left: 34px; cursor: url(/assets/cur-hand.png) 9 0, pointer; }
.wp-item::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 18px; margin-top: -9px; background: url(/assets/ic/sel.png) 0 0 / 12px 18px no-repeat; visibility: hidden; }
.wp-item:hover, .wp-item:focus-visible { color: var(--sodium-lt); background: var(--indigo-2); outline: none; box-shadow: inset 0 0 0 var(--px) var(--violet); }
.wp-item:hover::before, .wp-item:focus-visible::before { visibility: visible; animation: nudge .56s steps(1) infinite; }
.wp-item:active { transform: translateY(var(--px)); }
.wp-get a { color: var(--steel); } .wp-get a:hover { color: var(--sodium-lt); }
.wp-off { color: var(--white); position: relative; } .wp-off:hover { color: var(--sodium-lt); }
.wp-item img { width: 32px; height: 32px; image-rendering: auto; }
.wp-dot { width: 32px; height: 32px; background: url(/assets/art/icon-case.png) 0 0 / 32px 32px; }
.wp-get { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-family: "PM10", var(--pix); font-size: 20px; }
.wp-cur .mono { font-family: var(--mono); font-size: 15px; }
.wp-err { color: var(--skin); margin-top: 10px; }
.wp-off { margin-top: 12px; color: var(--white); background: none; border: 0; font: inherit; padding-left: 1.15em; min-height: 40px; }
.wp-none { color: var(--steel); }
@media (prefers-reduced-motion: reduce) { .dlg-in .line .cur, .dlg-box .line .cur, .cmd.busy::before, .cmd::before, .row::before, .wp-item::before, .toast, .toast.out, dialog.dlg[open], .menu, .ld::after, body::before, .bgx i, .bgx i::before, [data-tip]::after { animation: none !important; } .bar i { transition: none; } }
@media (max-width: 760px) { .how .cgwin { justify-self: stretch; } .how .cg { width: 100%; } }

/* ---------------------------------------------------------------- the night itself
   body = starfield tile; a second, fixed sheet of brighter stars blinks in whole steps (opacity only).
   Each scene carries its own scenery behind the windows (.bgx, injected by main.js from data-bg): fog banks, the river
   with the far shore's lamps and their broken reflections, rain. All ordered dither in the 16 colours, every band fades
   out in Bayer steps inside its own tile, so scenes flow into one continuous night. */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url(/assets/art/tiles/twinkle.png) calc(37 * var(--px)) calc(53 * var(--px)) / calc(128 * var(--px)) calc(128 * var(--px)); animation: twinkle 7s steps(1) infinite; }
@keyframes twinkle { 0%, 38% { opacity: 1; } 40% { opacity: 0; } 43% { opacity: 1; } 71% { opacity: 0; } 76%, 100% { opacity: 1; } }
.bgx { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; pointer-events: none; }
.bgx i { position: absolute; left: 0; right: 0; display: block; background-repeat: repeat-x; }
.bgx .fog { top: calc(4 * var(--px)); height: calc(48 * var(--px)); background-image: url(/assets/art/tiles/fog.png); background-size: calc(256 * var(--px)) calc(48 * var(--px)); background-position: calc(-61 * var(--px)) 0; }
.bgx .fog.lo { top: auto; bottom: calc(-6 * var(--px)); background-image: url(/assets/art/tiles/fog-2.png); background-position: calc(-170 * var(--px)) 0; }
.bgx .fog.mid { top: 42%; background-image: url(/assets/art/tiles/fog-2.png); }
/* the river at the foot of a scene: far shore + lamp reflections (two frames that trade places = flicker), ripples drift */
.bgx .river { bottom: 0; height: calc(40 * var(--px)); overflow: hidden; background: var(--night); }
.bgx .river::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-128 * var(--px)); right: 0; background: url(/assets/art/tiles/water.png) 0 0 / calc(128 * var(--px)) calc(40 * var(--px)) repeat-x; animation: drift 24s steps(64) infinite; will-change: transform; }
.bgx .shore { bottom: 0; height: calc(44 * var(--px)); background-image: url(/assets/art/tiles/shore-a.png); background-size: calc(160 * var(--px)) calc(40 * var(--px)); background-position: calc(-23 * var(--px)) 0; }
.bgx .shore.b { background-image: url(/assets/art/tiles/shore-b.png); animation: flick 5.3s steps(1) infinite; }
.bgx .shore.a { animation: flick 5.3s steps(1) infinite reverse; }
@keyframes drift { to { transform: translateX(calc(128 * var(--px))); } }
@keyframes flick { 0%, 46% { opacity: 1; } 48%, 52% { opacity: 0; } 54%, 80% { opacity: 1; } 82%, 100% { opacity: 0; } }
/* rain: one sheet longer than its box falls a tile per loop; the box fades in and out in Bayer steps */
.bgx .rain { top: 0; bottom: 0; overflow: hidden;
  -webkit-mask: url(/assets/art/tiles/fade-t.png) 0 0 / calc(4 * var(--px)) calc(32 * var(--px)) repeat-x, url(/assets/art/tiles/fade-b.png) 0 100% / calc(4 * var(--px)) calc(32 * var(--px)) repeat-x, url(/assets/art/tiles/solid.png) 0 50% / 100% calc(100% - 64 * var(--px)) no-repeat;
  mask: url(/assets/art/tiles/fade-t.png) 0 0 / calc(4 * var(--px)) calc(32 * var(--px)) repeat-x, url(/assets/art/tiles/fade-b.png) 0 100% / calc(4 * var(--px)) calc(32 * var(--px)) repeat-x, url(/assets/art/tiles/solid.png) 0 50% / 100% calc(100% - 64 * var(--px)) no-repeat; }
.bgx .rain::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-96 * var(--px)); bottom: 0; background: url(/assets/art/tiles/rain.png) 0 0 / calc(64 * var(--px)) calc(96 * var(--px)); animation: fall .8s steps(16) infinite; will-change: transform; }
@keyframes fall { to { transform: translate(calc(-32 * var(--px)), calc(96 * var(--px))); } }
.hero + script + .sec { padding-top: 96px; }
.sec[data-bg~=river] { padding-bottom: calc(44 * var(--px) + 48px); }

/* ---------------------------------------------------------------- pixel icons (masks, take the text colour) */
.ic { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; }
.ic-x { --m: url(/assets/ic/x.png); width: 16px; height: 14px; }
.cmd .ic-x { margin: 0 2px; }

/* ---------------------------------------------------------------- tooltips: a small PC-98 window under the item */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 60; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 2px 10px;
  color: var(--white); background: var(--ink); white-space: nowrap; font: 400 20px/28px "PM10", var(--pix); pointer-events: none;
  box-shadow: inset 0 0 0 var(--px) var(--violet), var(--px) var(--px) 0 0 var(--ink); animation: dith-in .18s steps(1) both; }
.hdr [data-tip]:hover::after, .hdr [data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.slots[data-tip] { cursor: url(/assets/cur.png) 0 0, help; }

/* ---------------------------------------------------------------- loader: the line plus three blocks counting up */
.ld::after { content: ""; display: inline-block; width: calc(3 * var(--px)); height: calc(3 * var(--px)); margin: 0 calc(8 * var(--px) + 8px) 0 8px; vertical-align: middle;
  background: var(--sodium); box-shadow: calc(4 * var(--px)) 0 0 var(--sodium), calc(8 * var(--px)) 0 0 var(--sodium); clip-path: inset(0 0 0 0); animation: ld 1.2s steps(1) infinite; }
@keyframes ld { 0% { clip-path: inset(0 100% 0 0); } 25% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 calc(-4 * var(--px)) 0 0); } 75% { clip-path: inset(0 calc(-8 * var(--px)) 0 0); } }

/* ---------------------------------------------------------------- scrollbars: a dither track and an indigo window thumb */
::-webkit-scrollbar { width: 14px; height: 14px; background: var(--ink); }
::-webkit-scrollbar-track { background: var(--ink) url(/assets/art/tiles/dither-night-50.png) 0 0 / 6px 6px; }
::-webkit-scrollbar-thumb { background: var(--indigo-2); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--violet), inset -2px -2px 0 var(--indigo); }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }
::-webkit-scrollbar-corner { background: var(--ink); }

/* ================================================================ STRUCTURE v2
   Home = a walk across one long night bridge (lib/pan.js): wide screens scroll the camera SIDEWAYS, every lamp is a
   station, the VN dialogue box (name plate) sits at the bottom and the command menu on the right. Phones, short screens
   and reduced motion get the same stations as full-screen frames. Sub pages = one VN screen each: the CG fills the
   screen behind (whole-number scale), status windows over it, dialogue at the bottom, commands on the right. */
:root { --menu-w: 300px; --pad: 24px; --s: 3; }
@media (max-width: 760px) { :root { --pad: 16px; --s: 2; --menu-w: 100%; } }

/* --- the VN screen grid (station frames + sub pages) */
.stn, .vn-page { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--menu-w); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage menu" "dlg menu"; gap: 16px 24px; min-height: calc(100svh - var(--hdr-h, var(--hdr))); padding: var(--pad) max(var(--pad), calc((100% - 1680px) / 2)); }
.vn-app, .vnz, .posewrap:not(.compact) { display: contents; }
.vn-stage { grid-area: stage; min-width: 0; display: grid; gap: 16px; align-content: start; }
.vn-dlg { grid-area: dlg; align-self: end; min-width: 0; padding-top: calc(8 * var(--px) + 14px); }
.vn-menu { grid-area: menu; align-self: end; min-width: 0; }
.vn-menu .menu-col { gap: 0; }
.vn-menu .menu-col .cmd { width: 100%; white-space: normal; line-height: 30px; padding-top: 5px; padding-bottom: 5px; }
.vn-menu .carow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cl cp" "cv cv"; gap: 0 10px; margin-top: 8px; padding-top: 8px; border-top: var(--px) solid var(--indigo-2); }
.vn-menu .carow .cl { grid-area: cl; } .vn-menu .carow .cv { grid-area: cv; font-size: 15px; } .vn-menu .carow .cmd { grid-area: cp; width: auto; justify-self: end; }
.vn-menu .tb .meta { gap: 2px 12px; }
.vn-menu .tb .meta .num { font-size: 15px; }
/* name plate on the top border of the dialogue box, as in a PC-98 novel */
.vn-dlg .who { position: absolute; left: calc(9 * var(--px)); top: -20px; padding: 0 12px; line-height: 36px; font-size: 24px; color: var(--sodium-lt); background: var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--violet), var(--px) var(--px) 0 0 var(--ink); letter-spacing: 1px; }
.vn-dlg .line { display: block; color: var(--white); cursor: url(/assets/cur-hand.png) 9 0, pointer; }
.vn-dlg .line .cur { display: inline-block; width: 18px; height: 12px; margin-left: 8px; vertical-align: -1px; background: url(/assets/ic/step.png) 0 0 / 18px 12px no-repeat; animation: bob .9s steps(1) infinite; }
.vn-dlg .note, .vn-dlg .fee { margin-top: 6px; }
.vn-dlg .killer { font-size: 24px; line-height: 36px; }
.vn-dlg .killer .num { font-size: 28px; }
.vn-dlg .part { margin-top: 10px; }
.swap { animation: dith-in .24s steps(1) both; }
.vn-title { justify-self: start; display: inline-block; color: var(--white); font: 700 36px/48px "PM12", var(--pix); background: var(--indigo); border: var(--px) solid var(--ink);
  padding: calc(4 * var(--px)) calc(8 * var(--px)); text-shadow: var(--px) var(--px) 0 var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--violet), inset 0 0 0 calc(2 * var(--px)) var(--ink), inset 0 0 0 calc(3 * var(--px)) var(--indigo), inset 0 0 0 calc(4 * var(--px)) var(--steel); }

/* --- full-screen CG behind a sub page: whole-number cover scale (--cs, set by main.js), a 25 % ink screen over it */
.vn-cg.cg { position: fixed; z-index: -1; left: 0; right: 0; top: var(--hdr-h, var(--hdr)); bottom: 0; overflow: hidden; background: var(--ink); pointer-events: none; }
.vn-cg.cg img, .vn-cg.cg canvas { inset: auto; left: var(--cx, calc(50% - 160px * var(--cs, 5))); top: var(--cy, calc(50% - 100px * var(--cs, 5))); width: calc(320px * var(--cs, 5)); height: calc(200px * var(--cs, 5)); }
.vn-cg.cg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: url(/assets/art/pano/veil25.png) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); }

/* sub page stages: status windows side by side over the CG, never a column of cards */
.pose2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pose2 .kv { gap: 4px 18px; }
.coinw .coinid .links { margin-top: 4px; }
.put2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.put2 .recw .preview { min-height: 120px; }
.ledger .cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger .col { min-width: 0; padding: 0 18px; border-left: var(--px) solid var(--indigo-2); }
.ledger .col:first-child { padding-left: 0; border-left: 0; } .ledger .col:last-child { padding-right: 0; }
.ledger .ch { display: flex; align-items: center; gap: 10px; color: var(--sodium); font-size: 24px; line-height: 36px; margin-bottom: 6px; }
.ledger .ch img { width: 32px; height: 32px; }
.ledger .li { grid-template-columns: minmax(0, 1fr); }
.ledger .li .ac { justify-content: start; }
.ledger .tb h2 { color: var(--sodium); font-size: 24px; line-height: 36px; }
.stats2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.stats2 .figs { grid-template-columns: 1fr 1fr; }
.stats2 .figs > div:nth-child(3) { border-left: 0; } .stats2 .figs > div:nth-child(n+3) { border-top: var(--px) solid var(--indigo-2); }
.docs2 .book { display: grid; gap: 16px; max-width: 1000px; }
.book.paged > .ch:not([data-on]) { display: none; }
.book .ch h2 { color: var(--sodium); font-size: 24px; line-height: 36px; }
.book .ch p, .book .ch li { color: var(--pale); }
.book .ch ol, .book .ch ul { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.book .ch ul { list-style: none; padding-left: 0; }
.book .ch ul li { position: relative; padding-left: 1.2em; }
.book .ch ul li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; background: var(--sodium-deep); -webkit-mask: url(/assets/ic/dot.png) 0 0 / 8px 8px; mask: url(/assets/ic/dot.png) 0 0 / 8px 8px; }
.book .ch .num { font-size: 17px; color: var(--white); }
.book .ch code { font-family: var(--mono); font-size: 15px; color: var(--white); overflow-wrap: anywhere; }
.docs2 .vn-dlg .line { font-size: var(--small); line-height: 30px; font-family: "PM10", var(--pix); }
.docs2 .menu-col .cmd.on { color: var(--sodium); }
.docs2 .menu-col .cmd.on::before { visibility: visible; }

/* --- the walk: station frames (default) */
.pan { position: relative; }
.pan-far, .pan-deck, .pan-meet, .pan-near, .hud { display: none; }
.stn { z-index: 0; }
.stn > .vn-stage { align-self: start; }
.stn-view { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(125px * var(--s)); pointer-events: none;
  background: url(/assets/art/pano/span.png) calc(var(--i, 1) * -67px * var(--s)) 100% / calc(198px * var(--s)) calc(125px * var(--s)) repeat-x,
    url(/assets/art/pano/city.png) calc(var(--i, 1) * -23px * var(--s)) calc(100% - 45px * var(--s)) / calc(396px * var(--s)) calc(64px * var(--s)) repeat-x; }
.stn-view.meet { background: url(/assets/art/pano/meet.png) 50% 100% / calc(198px * var(--s)) calc(125px * var(--s)) no-repeat,
    url(/assets/art/pano/span.png) 50% 100% / calc(198px * var(--s)) calc(125px * var(--s)) repeat-x,
    url(/assets/art/pano/city.png) 50% calc(100% - 45px * var(--s)) / calc(396px * var(--s)) calc(64px * var(--s)) repeat-x; }
.stn .crossing { grid-template-areas: "cg talk"; }
.stn .crossing .cg { width: calc(320px * var(--cgk, 2)); }
.stn .crossing .talk { min-width: 260px; }
.howcg { justify-self: start; }
.howcg .cg { width: calc(320px * var(--cgk1, 2)); max-width: 100%; aspect-ratio: 320 / 200; }
.putst { display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: 0; align-items: stretch; }
.putst .cg { width: calc(320px * var(--cgk, 2)); max-width: 100%; aspect-ratio: 320 / 200; }
.putst .till { margin-left: calc(-1 * var(--px)); justify-content: center; }
.stn .board { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.stn .posewrap.compact .lcol { width: calc(320px * var(--cgk, 2)); }
.stn .notes .note { margin-top: 4px; }
.chap .cmd.on { color: var(--sodium-lt); }
.ending > .vn-stage { grid-area: 1 / 1 / 2 / 3; justify-items: center; }
.sign { color: var(--white); font: 700 72px/1.2 "PM12", var(--pix); text-shadow: var(--px) var(--px) 0 var(--ink); margin-top: 6vh; }
.stn.ending { min-height: calc(100svh - var(--hdr-h, var(--hdr))); padding: var(--pad) max(var(--pad), calc((100% - 1680px) / 2)); }
.ending .save { width: auto; margin: 0; }

/* hero = the start of the bridge: CG cover behind, the name in its sky, dialogue + Command over it */
.stn.hero { height: calc(100svh - var(--hdr-h, var(--hdr))); min-height: 520px; overflow: hidden; background: var(--ink); }
.stn.hero > .vn-dlg, .stn.hero > .vn-menu { z-index: 1; }
.hcmd { position: relative; left: auto; bottom: auto; transform: none; width: auto; }
.hcmd .menu-row { margin: 0; }

/* --- the walk: pan mode (wide screens, motion allowed) */
.pan-on { height: var(--pan-h); }
.pan-on .pan-st { position: sticky; top: var(--hdr-h, var(--hdr)); height: calc(100vh - var(--hdr-h, var(--hdr))); overflow: hidden; overflow: clip; }
.pan-on .pan-far { display: block; position: absolute; left: 0; bottom: calc(45px * var(--s)); width: var(--far-w); height: calc(64px * var(--s)); background: url(/assets/art/pano/city.png) 0 0 / calc(396px * var(--s)) calc(64px * var(--s)) repeat-x; will-change: transform; }
.pan-on .pan-br { position: absolute; left: 0; top: 0; bottom: 0; width: var(--br-w); will-change: transform; }
.pan-on .pan-deck { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: calc(125px * var(--s)); background: url(/assets/art/pano/span.png) var(--deck-x) 0 / calc(198px * var(--s)) calc(125px * var(--s)) repeat-x; }
.pan-on .pan-meet { display: block; position: absolute; bottom: 0; left: var(--meet-x); width: calc(198px * var(--s)); height: calc(125px * var(--s)); background: url(/assets/art/pano/meet.png) 0 0 / 100% 100%; }
.pan-on .stn { position: absolute; z-index: 1; display: block; top: var(--pad); left: calc(var(--x) + var(--pad)); width: var(--stw); height: var(--sth); min-height: 0; padding: 0; }
.pan-on .stn > .stn-view { display: none; }
.pan-on .stn > .vn-stage { height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.pan-on .stn .sec-h { margin-bottom: 0; flex: none; }
.pan-on .stn .board { flex: 1; min-height: 0; }
.pan-on .stn .board > .win { min-height: 0; overflow: hidden; }
.pan-on .stn .board .rows { min-height: 0; overflow-y: auto; }
.pan-on .stn.hero { top: 0; left: 0; width: var(--vw); height: 100%; overflow: hidden;
  -webkit-mask: url(/assets/art/pano/fade-r.png) 100% 0 / calc(32px * var(--s)) calc(4px * var(--s)) repeat-y, url(/assets/art/tiles/solid.png) 0 0 / calc(100% - 32px * var(--s)) 100% no-repeat;
  mask: url(/assets/art/pano/fade-r.png) 100% 0 / calc(32px * var(--s)) calc(4px * var(--s)) repeat-y, url(/assets/art/tiles/solid.png) 0 0 / calc(100% - 32px * var(--s)) 100% no-repeat; }
.pan-on .stn.hero .sky { right: calc(var(--menu-w) + 2 * var(--pad)); }
.pan-on .stn.ending > .vn-stage { overflow: visible; }
.pan-on .sign { position: absolute; left: var(--meet-c); top: 6%; margin: 0; transform: translateX(-50%); white-space: nowrap; }
.pan-on .pan-near { display: block; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 1px; will-change: transform; pointer-events: none; }
.pan-near i { position: absolute; bottom: 0; width: calc(24px * var(--s)); height: calc(200px * var(--s)); background: url(/assets/art/pano/near.png) 0 0 / 100% 100%; }
.pan-on .hud { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud-dlg { position: absolute; left: var(--pad); right: calc(2 * var(--pad) + var(--menu-w)); bottom: var(--pad); height: var(--dlg-h); }
.hud-menu { position: absolute; right: var(--pad); bottom: var(--pad); width: var(--menu-w); }
.hud-dlg > *, .hud-menu > * { display: none !important; pointer-events: auto; }
.hud-dlg > [data-on] { display: block !important; height: 100%; }
.hud-menu > [data-on] { display: block !important; }
.hud-map { position: absolute; top: var(--pad); right: var(--pad); display: flex; gap: 2px; padding: 2px 4px; pointer-events: auto; background: var(--ink); box-shadow: inset 0 0 0 var(--px) var(--violet); }
.hud-map button { position: relative; width: 36px; height: 40px; padding: 0; border: 0; background: none; color: var(--violet); }
.hud-map button i { position: absolute; left: 11px; top: 9px; width: 14px; height: 22px; background: currentColor; -webkit-mask: url(/assets/art/pano/lamp.png) 0 0 / 14px 22px; mask: url(/assets/art/pano/lamp.png) 0 0 / 14px 22px; }
.hud-map button:hover, .hud-map button:focus-visible { color: var(--sodium-lt); outline: none; }
.hud-map button[aria-current=step] { color: var(--sodium); }
.hud-map [data-tip]:hover::after, .hud-map [data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }

/* --- phones: the same stations as frames; strip of the bridge under the stage, dialogue, then the commands */
@media (max-width: 760px) {
  .stn, .vn-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "stage" "view" "dlg" "menu"; gap: 12px; padding: var(--pad); align-content: start; }
  .stn-view { position: relative; z-index: 0; grid-area: view; height: calc(125px * var(--s)); margin: 0 calc(-1 * var(--pad)) -64px; }
  .stn-view.meet { margin-top: 0; }
  .vn-dlg { position: relative; z-index: 1; padding-top: calc(8 * var(--px) + 12px); }
  .vn-dlg .who { font-size: 20px; line-height: 30px; top: -16px; }
  .vn-dlg .killer { font-size: 20px; line-height: 30px; } .vn-dlg .killer .num { font-size: 22px; }
  .vn-menu { align-self: start; }
  .vn-title { font-size: 24px; line-height: 36px; }
  .stn .crossing { grid-template-columns: 1fr; grid-template-areas: "cg" "talk"; }
  .stn .crossing .cg, .howcg .cg, .putst .cg { width: 100%; }
  .stn .crossing .talk { min-width: 0; margin: calc(-1 * var(--px)) 0 0; }
  .howcg { justify-self: stretch; }
  .putst { grid-template-columns: 1fr; } .putst .till { margin: calc(-1 * var(--px)) 0 0; }
  .stn .board { grid-template-columns: 1fr; }
  .stn .posewrap.compact .lcol { width: 100%; }
  .pose2, .put2, .stats2 { grid-template-columns: minmax(0, 1fr); }
  .ledger .cols3 { grid-template-columns: minmax(0, 1fr); }
  .ledger .col { padding: 12px 0 0; border-left: 0; border-top: var(--px) solid var(--indigo-2); margin-top: 12px; }
  .ledger .col:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
  .ending > .vn-stage { grid-area: stage; }
  .sign { font-size: 48px; margin-top: 12px; }
  .stn.hero { display: block; height: auto; min-height: 0; padding: 0 0 var(--pad); background: transparent; overflow: hidden; }
  .stn.hero > .vn-dlg { margin: -136px 12px 0; }
  .stn.hero > .vn-menu { margin: 10px 12px 0; }
  .vn-cg.cg img, .vn-cg.cg canvas { left: var(--cx, calc(50% - 160px * var(--cs, 3))); top: var(--cy, calc(50% - 100px * var(--cs, 3))); width: calc(320px * var(--cs, 3)); height: calc(200px * var(--cs, 3)); }
}
@media (min-width: 761px) and (max-width: 1151px) {
  .stn, .vn-page { --menu-w: 260px; }
  .pose2, .put2, .stats2 { grid-template-columns: minmax(0, 1fr); }
  .stn .crossing { grid-template-columns: 1fr; grid-template-areas: "cg" "talk"; }
  .stn .board { grid-template-columns: 1fr; }
  .putst { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .swap, .vn-dlg .line .cur { animation: none !important; } }
/* v2 fixes after the first look */
.vn-menu .carow.pre .cv { font-size: 20px; font-family: "PM10", var(--pix); }
.stn .crossing { align-items: start; }
.stn .crossing .talk { align-self: stretch; }
.pan-on .stn > .vn-stage > .howcg, .pan-on .stn > .vn-stage > .putst, .pan-on .stn > .vn-stage > .crossing { align-self: flex-start; }
.stn .row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 4px; }
.stn .row img { width: 48px; height: 48px; }
.stn .row .nm .num, .stn .row .facts .num, .stn .row .rt .num, .stn .row .rt .cmd { white-space: nowrap; }
.stn [data-col=envs] .row .rt .cmd { display: none; }
.stn .posewrap.compact .kv dd small { display: none; }
.stn .posewrap.compact .kv { gap: 2px 18px; }
.pan-on .film .cgwin { width: min(100%, calc((var(--sth) - 100px) * 16 / 9 + 40px)); }
@media (max-width: 760px) {
  .stn.hero .hcmd .menu-col { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .stn.hero .hcmd .menu-col .cmd { width: auto; }
  .stn.hero .hcmd .carow { margin-top: 4px; padding-top: 4px; }
  .stn .board .rows { max-height: 62svh; overflow-y: auto; }
}
/* the CG sits on z 0 (a negative z would paint under the body's own night background) and the windows over it */
.vn-cg.cg { z-index: 0; }
.vn-page .vn-stage, .vn-page .vn-dlg, .vn-page .vn-menu { position: relative; z-index: 1; }
@media (min-width: 1300px) {
  .pose2 { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
  .pose2 > .win:first-child .kv { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 16px; }
}
.vn-stage > .win.empty { justify-self: start; width: min(640px, 100%); }
@media (min-width: 761px) { .stats2 .feed .list { max-height: calc(100svh - var(--hdr-h, var(--hdr)) - 320px); min-height: 240px; overflow-y: auto; } }
/* board rows on the bridge: icon + facts, the price line under them across the row */
.stn .row { grid-template-columns: 48px minmax(0, 1fr); }
.stn .row .rt { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 14px; text-align: left; }
.stn .row .facts { gap: 0 12px; }
#say-how { min-height: calc(2 * var(--lh)); }
@media (max-width: 760px) { .stn [data-pose]:has(.ld) { min-height: 640px; } }
@media (max-height: 760px) and (min-width: 1024px) { .pan-on .hud-dlg .vn-dlg { padding-top: calc(6 * var(--px) + 12px); padding-bottom: calc(6 * var(--px)); } .pan-on .stn .sec-h > .st { display: none; } }
@media (max-height: 760px) and (min-width: 1024px) { .pan-on .crossing .talk { gap: 6px; } .pan-on .crossing .cmp { gap: 2px 12px; } .pan-on .crossing .cmp .v { margin-top: -4px; } .pan-on .crossing .src { line-height: 24px; } }
.stn .cmp { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.stn .cmp .v { margin-top: 0; margin-bottom: 6px; }