@font-face {
  font-family: "Cubic 11";
  src: url("../assets/fonts/Cubic_11.woff2") format("woff2");
  font-display: block;
}
/* Characters of real shop names that Cubic 11 lacks, drawn to match it (tools/extra-font.py): 溙 */
@font-face {
  font-family: "Cubic 11";
  src: url("../assets/fonts/Cubic_11-extra.woff2") format("woff2");
  unicode-range: U+6E99;
  font-display: block;
}

:root {
  --g-night: #01215b;
  --g-gold: #f8b800;
  --g-navy: #24188c;
  --g-white: #fcfcfc;
  --g-red: #d82800;
  --g-gray: #bcbcbc;
  --g-dim: #7c7c7c;
  --g-green: #58d854;
  --g-blue: #3cbcfc;
  --g-line: #3c3c3c;
  /* The bitmap font is drawn on a 12px grid: stick to sizes that land on whole device pixels. */
  --t-tiny: 12px;
  --t-body: 12px;
  --t-main: 18px;
  --t-head: 24px;
  --t-big: 36px;
  --ico: 24px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
@media (max-resolution: 1.49dppx) {
  :root { --t-main: 24px; --t-head: 24px; --ico: 24px; }
}

* { box-sizing: border-box; }
/* the bitmap font only looks right at the sizes above: keep phones from inflating text on their own */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* a finger on the screen is the game's business: no double-tap zoom, no selecting, no press-and-hold menus */
html, body { height: 100%; margin: 0; background: #000; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { overflow: hidden; position: fixed; inset: 0; }

.game-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: var(--g-white);
  background: var(--g-night);
  font-family: "Cubic 11", "PingFang TC", "Noto Sans TC", sans-serif;
  font-size: var(--t-main);
  line-height: 1.4;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
.game-root button, .game-root input, .game-root select { font-family: inherit; }
:where(.game-root) button { color: inherit; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.game-root [hidden] { display: none !important; }
/* pictures are never the thing being pressed: no "save image" sheet, no dragging one off the page */
.game-root img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }

#stage { position: absolute; left: 0; top: 0; display: block; touch-action: none; image-rendering: pixelated; }

/* ---- shared pieces (same vocabulary as the reference game) ---- */
.game-btn {
  background: var(--g-white);
  color: #000;
  border: 3px solid #000;
  border-radius: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 48px;
  padding: 0 16px;
  font-size: var(--t-main);
  line-height: 1;
  text-decoration: none;
  box-shadow: 4px 4px #000;
  white-space: nowrap;
}
.game-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px #000; }
.game-btn:disabled { cursor: default; opacity: .55; }
.game-btn:disabled:active { transform: none; box-shadow: 4px 4px #000; }
.game-btn--gold { background: var(--g-gold); }
.game-btn--red { background: var(--g-red); color: var(--g-white); }
.game-btn--sm { min-height: 44px; padding: 0 10px; }
.game-btn--block { display: flex; width: 100%; }
/* the one button a newcomer is being pointed at */
.game-btn.pulse { animation: game-pulse 1s ease-in-out infinite; }
@keyframes game-pulse { 0%, to { box-shadow: 4px 4px #000, 0 0 0 0 var(--g-gold); } 50% { box-shadow: 4px 4px #000, 0 0 0 6px var(--g-gold); } }
.note.guide { border-color: var(--g-gold); margin-bottom: 8px; color: var(--g-white); }
.game-btn:focus-visible, .tab:focus-visible, .diff:focus-visible, .paint:focus-visible, .radar:focus-visible { outline: 3px solid var(--g-gold); outline-offset: 2px; }

.game-panel { border: 4px solid var(--g-white); background: #000; border-radius: 0; }
.game-logo { color: var(--g-gold); text-shadow: 4px 4px 0 var(--g-navy), 8px 8px 0 var(--g-navy), 12px 12px 0 #000; margin: 0; font-weight: normal; line-height: 1; }
.game-caret { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--g-white); flex: none; }
.game-input {
  background: var(--g-white); color: #000; border: 3px solid #000; border-radius: 0; outline: none;
  width: 100%; min-height: 52px; padding: 0 14px; font-size: var(--t-head);
  -webkit-user-select: text; user-select: text;
}
.game-input:focus { box-shadow: 0 0 0 3px var(--g-gold); }
.gold { color: var(--g-gold); }
.gray { color: var(--g-gray); }
.dim { color: var(--g-dim); }
.green { color: var(--g-green); }
.red { color: #f87858; }
.blue { color: var(--g-blue); }
.nw { white-space: nowrap; }
.tiny { font-size: var(--t-tiny); }
.ico { width: var(--ico); height: var(--ico); image-rendering: pixelated; flex: none; display: block; }
.ico--lg { width: 36px; height: 36px; }

@keyframes game-shake { 0%, to { transform: translate(0); } 20% { transform: translate(-5px); } 40% { transform: translate(5px); } 60% { transform: translate(-3px); } 80% { transform: translate(3px); } }
.game-shake { animation: .3s game-shake; }
@keyframes game-slide-up { 0% { transform: translateY(100%); } to { transform: translateY(0); } }
.game-sheet { animation: .18s ease-out game-slide-up; }
@keyframes game-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.15); } to { transform: scale(1); } }
.game-pop { animation: .35s ease-out game-pop; }
@keyframes trophy-toast { 0% { opacity: 0; transform: translate(120%); } 10% { opacity: 1; transform: translate(0); } 88% { opacity: 1; transform: translate(0); } to { opacity: 0; transform: translate(120%); } }
.trophy-toast { animation: 4s ease-in-out forwards trophy-toast; }
@keyframes blink { 50% { opacity: .25; } }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top {
  background: rgba(0, 0, 0, .74);
  border-bottom: 3px solid #000;
  padding: calc(6px + var(--sat)) calc(12px + var(--sar)) 8px calc(12px + var(--sal));
  pointer-events: auto; position: relative;
}
.hud-row { display: flex; align-items: center; gap: 12px; }
.hud-row + .hud-row { margin-top: 4px; }
.hud-title { color: var(--g-gold); font-size: var(--t-main); text-shadow: 2px 2px #000; }
.hud-co { margin-left: auto; color: var(--g-gray); font-size: var(--t-tiny); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hud-co.gold { color: var(--g-gold); } /* 土地公保佑 / 爐主 and the time left */
.hud-co.red { color: var(--g-red, #f04838); } /* 熱度 (build 36) */
.hud-co.in-row { display: none; }
.hud-money { color: var(--g-gold); font-size: var(--t-big); line-height: 1; text-shadow: 3px 3px #000; white-space: nowrap; }
.hud-money.bump { animation: .3s ease-out game-pop; }
.hud-btns { margin-left: auto; display: flex; gap: 10px; }
.hud-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
.hud-btn img { width: 24px; height: 24px; image-rendering: pixelated; }
.hud-stats { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.hud-stat { display: flex; align-items: center; gap: 6px; text-shadow: 2px 2px #000; white-space: nowrap; }
.hud-stat b { font-weight: normal; }
.hud-stat.warn b { color: #f87858; }
.hud-stat.full b { color: var(--g-gold); }
.hud-stat.over b { color: #f87858; } /* 超載 (build 47) */
.hud-bar { display: flex; align-items: center; gap: 10px; font-size: var(--t-tiny); color: var(--g-gray); text-shadow: 2px 2px #000; }
.hud-bar .lbl { flex: none; min-width: 9em; }
.hud-row.r-bars { display: block; }
.r-bars .hud-bar + .hud-bar { margin-top: 4px; }
.bar { flex: 1; height: 9px; background: #3c3c3c; border: 0; position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--g-gold); }
.bar.hp i { background: var(--g-green); }
.bar.low i { background: var(--g-red); animation: blink .5s steps(1) infinite; }
/* On the road (ui.js, updateHud: #hud.drive, build 37, the owner: 「開車的時候上方金錢跟按鈕可以縮起只要看油料車體還能載幾台」):
   the top panel folds down to one line, the fuel, the truck's state and how many more bikes the bed takes; the money,
   the buttons, the yard and the boxes are back when the truck stands, or for a few seconds when the line is pressed. */
.d-ico, .hud-load, .hud-peek { display: none; }
.hud-load b { font-weight: normal; }
#hud.drive .hud-row.r-title, #hud.drive .hud-row.r-money, #hud.drive .hud-row.r-stats, #hud.drive .hud-btns.side, #hud.drive .hud-bar .lbl { display: none !important; }
#hud.drive .hud-top { padding-top: calc(5px + var(--sat)); padding-bottom: 5px; }
#hud.drive .hud-row.r-bars { display: flex; align-items: center; gap: 14px; margin-top: 0 !important; }
#hud.drive .r-bars .hud-bar { flex: 1; min-width: 0; gap: 6px; }
#hud.drive .r-bars .hud-bar + .hud-bar { margin-top: 0; }
#hud.drive .d-ico { display: block; }
#hud.drive .hud-load { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; text-shadow: 2px 2px #000; }
#hud.drive .hud-load.full b { color: var(--g-gold); }
#hud.drive .hud-load.over b { color: #f87858; }
#hud.drive .hud-peek { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
/* ...and the task keeps only its title, a while after it was given */
#hud.brief .quest .q-no, #hud.brief .quest .q-hint { display: none; }
#hud.brief .quest { padding-top: 3px; padding-bottom: 3px; }

.hud-mid { display: flex; align-items: flex-start; gap: 10px; padding: 10px calc(10px + var(--sar)) 0 calc(10px + var(--sal)); }
.quest {
  flex: 1; min-width: 0; background: rgba(0, 0, 0, .74); border: 3px solid var(--g-gold); padding: 6px 10px;
  pointer-events: auto;
}
.quest .q-no { color: var(--g-gold); font-size: var(--t-tiny); }
.quest .q-title { color: var(--g-white); line-height: 1.25; }
.quest .q-hint { color: var(--g-gray); font-size: var(--t-tiny); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.quest.done { border-color: var(--g-green); }
.radar { flex: none; border: 3px solid var(--g-white); background: #000; line-height: 0; pointer-events: auto; cursor: pointer; }
.radar.big { position: relative; z-index: 3; box-shadow: 4px 6px 0 rgba(0, 0, 0, .5); } /* (sideways, tapped: larger for a few seconds, over what is under it, ui.zoomRadar) */
.radar canvas { display: block; image-rendering: pixelated; }
.event {
  margin: 8px calc(10px + var(--sar)) 0 calc(10px + var(--sal)); background: rgba(0, 0, 0, .74); border: 3px solid var(--g-green);
  padding: 4px 10px; font-size: var(--t-tiny); display: flex; gap: 8px; align-items: center;
}
.event.bad { border-color: var(--g-red); }
.event b { font-weight: normal; color: var(--g-gold); white-space: nowrap; }
.event .ev-d { min-width: 0; }
.event .ev-t { margin-left: auto; color: var(--g-gray); white-space: nowrap; }

.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: calc(18px + var(--sab)); display: flex; justify-content: center; gap: 12px;
  padding: 0 12px; flex-wrap: wrap;
}
.hud-bottom .game-btn { pointer-events: auto; }
#bFly { touch-action: none; } /* (火箭跑車, build 56: pressed by a second finger while the first drives; js/ui.js takes it at pointerdown) */
/* (build 56: a greyed button over the moving street stays solid, its colours dulled: see-through, the signs behind ran into 「飛 3」「飛行中」) */
.hud-bottom .game-btn:disabled { opacity: 1; filter: grayscale(.7) brightness(.92); }
/* 空白鍵 (build 51): the button the space bar presses now, on a computer, until it has been used that way: a key cap */
.hud-bottom .game-btn[data-key]::after, .tabs .go[data-key]::after { content: attr(data-key); display: inline-block; margin-left: 8px; padding: 1px 5px; font-size: var(--t-tiny); line-height: 1.25; border: 2px solid currentColor; vertical-align: middle; }
.tabs .go[data-key] { flex: none; min-width: max-content; padding: 0 10px; } /* (build 58: 出發 with its key cap takes the room it needs; the tabs share the rest) */
@media (max-width: 519px) { .tabs .go[data-key] { flex: none; min-width: 52px; padding: 0 8px; } .tabs .go[data-key]::after { display: none; } } /* (a window that narrow: no room for the cap; the space bar still works) */

/* (where: ui.measure(), beside the panels at the top or under them; one at a time: ui.toast) */
#toasts { position: absolute; left: var(--toast-l, 16px); right: var(--toast-r, 16px); top: var(--toast-top, calc(var(--hud-h, 170px) + var(--quest-h, 80px) + 56px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 30; transition: top .25s ease; }
#toasts.held { visibility: hidden; } /* (2026-10-17: while the factory, the map or a menu is open the line waits out of sight; it was left showing, half under the panel) */
.toast { background: #000; border: 3px solid var(--g-white); padding: 6px 12px; text-align: center; max-width: 420px; animation: .35s ease-out game-pop; }
.toast.gold { border-color: var(--g-gold); color: var(--g-gold); }
.toast.bad { border-color: var(--g-red); color: #f87858; }
.toast.out { opacity: 0; transition: opacity .4s; }
#trophies { position: absolute; right: calc(10px + var(--sar)); bottom: calc(86px + var(--sab)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 40; align-items: flex-end; }
.trophy { background: #000; border: 3px solid var(--g-gold); padding: 6px 10px; display: flex; gap: 10px; align-items: center; max-width: 300px; }
.trophy .t-name { color: var(--g-gold); }

/* floating joystick */
#stick { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 3px solid rgba(252, 252, 252, .75); background: rgba(0, 0, 0, .28); border-radius: 50%; pointer-events: none; z-index: 5; }
#stick i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--g-gold); border: 3px solid #000; border-radius: 50%; }
/* how to drive, shown until the truck has been driven: the stick's own knob sliding to one side, and a line of words */
#drive { position: absolute; left: 0; right: 0; bottom: 14%; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; z-index: 4; padding: 0 16px; }
#drive[hidden] { display: none; }
#drive i { width: 44px; height: 44px; background: var(--g-gold); border: 3px solid #000; border-radius: 50%; box-shadow: 0 0 0 3px rgba(252, 252, 252, .75); animation: 1.6s ease-in-out infinite drive-hint; }
#drive.keys i { display: none; }
#drive b { font-weight: normal; background: #000; border: 3px solid var(--g-gold); padding: 6px 12px; text-align: center; }
@keyframes drive-hint { 0% { transform: translate(-60px); opacity: 0; } 15% { transform: translate(-60px); opacity: 1; } 75% { transform: translate(60px); opacity: 1; } to { transform: translate(60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #drive i { animation: none; } }

/* ---- full screens ---- */
.screen { position: absolute; inset: 0; background: var(--g-night); overflow-y: auto; overflow-x: hidden; z-index: 50; -webkit-overflow-scrolling: touch; }
/* The page while the game's files come in. A file that never arrives is told by js/core.js. The second line is for
   when not even that one got here: it shows itself after a while, and its link needs no script. */
#boot { flex-direction: column; gap: 14px; padding: 24px; text-align: center; }
#boot a { color: var(--g-gold); }
.boot-slow { visibility: hidden; animation: boot-slow 0s linear 12s forwards; }
.hd .boot-slow { animation-delay: 30s; } /* (the painted version fetches its pictures first) */
@keyframes boot-slow { to { visibility: visible; } }
/* the street scene: held at the foot of the window while the page scrolls over it (ui.paintScene sets the holder's height) */
.screen-bgw { position: sticky; top: 0; height: 100%; margin-bottom: -100vh; pointer-events: none; overflow: hidden; }
.screen-bg { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; image-rendering: pixelated; display: block; }
.screen-in {
  position: relative; min-height: 100%; display: flex; flex-direction: column; margin: 0 auto; width: 100%; max-width: 520px;
  padding: calc(16px + var(--sat)) calc(20px + var(--sar)) calc(24px + var(--sab)) calc(20px + var(--sal));
}
.title-logo { margin-top: 40px; text-align: center; }
.title-logo h1 { font-size: 96px; line-height: 1.12; }
.title-logo h1 span { display: inline-block; white-space: nowrap; } /* each half of the name stays whole; they stack where one line has no room */
.menu { margin-top: 28px; display: flex; flex-direction: column; align-items: center; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; font-size: var(--t-head); text-shadow: 2px 2px #000; text-align: left; }
.menu-item .game-caret { visibility: hidden; }
.menu-item.on .game-caret { visibility: visible; }
.menu-item.on { color: var(--g-gold); }
.menu-item:focus-visible { outline: none; }
.record { margin: 26px auto 0; width: 100%; max-width: 320px; border-width: 3px; background: rgba(0, 0, 0, .75); padding: 10px 14px; font-size: var(--t-tiny); line-height: 1.8; }
.record .r-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-main); line-height: 1.5; }
.record .r-row > :first-child { flex: none; } /* (2026-10-17: a long value squeezed its label, 「上工」, into one character a line) */
/* (up to build 24 this line stood 240 pixels under the rest, to clear the street scene: a screenful of nothing to scroll through on a phone. It sits at the foot of the page now, over the scene.) */
.credit { margin-top: auto; margin-bottom: -16px; align-self: center; padding: 3px 10px; border-top: 16px solid transparent; background: rgba(4, 6, 30, .66); background-clip: padding-box; border-radius: 4px; text-align: center; color: var(--g-white); font-size: var(--t-tiny); text-shadow: 2px 2px #000; position: relative; } /* (a label of its own: whatever of the street scene is behind it, it can be read) */

.screen h2 { color: var(--g-gold); font-size: var(--t-big); font-weight: normal; text-align: center; margin: 24px 0 20px; text-shadow: 3px 3px #000; line-height: 1.1; }
.field-label { color: var(--g-white); margin: 6px 0 8px; text-shadow: 2px 2px #000; }
.name-row { display: flex; gap: 12px; }
.name-row .game-btn { min-height: 52px; }
.diffs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diff { text-align: left; border: 3px solid var(--g-white); background: #000814; padding: 14px; min-height: 130px; display: block; }
.diff.on { border-color: var(--g-gold); background: var(--g-navy); box-shadow: 4px 4px #000; }
.diff .d-name { font-size: var(--t-head); display: block; margin-bottom: 6px; }
.diff.on .d-name { color: var(--g-gold); }
.diff span { display: block; font-size: var(--t-tiny); line-height: 1.6; }
/* (2026-10-17, design check) a button centres what is in it: the shorter card's name sat lower than the other's; and a
   wrapped note lines up under its words, not under the dot */
.diff:not(.heir) { display: flex; flex-direction: column; justify-content: flex-start; }
.diff:not(.heir) > span { padding-left: 1em; text-indent: -1em; }
@media (max-width: 380px) { .diffs { grid-template-columns: 1fr; } .diff:not(.heir) { min-height: 0; } } /* (side by side on the narrowest phones a note had no room for its words: one above the other there) */
/* 接班人三選一 (build 36): three cards of the same make as the difficulty's, a picture over who they are and what they bring */
.heirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.diff.heir { text-align: center; padding: 8px 6px 10px; min-height: 0; }
.heir .h-pic { display: block; height: 84px; width: auto; max-width: 100%; margin: 0 auto 4px; object-fit: contain; }
.heir .d-name { font-size: var(--t-body); margin-bottom: 2px; }
.heir span { line-height: 1.45; }
/* 挑戰連結 (build 36): a friend's challenge on the title screen */
.vs-box { margin: 10px 0; text-align: left; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }

.cards { display: flex; flex-direction: column; gap: 12px; }
.card { border-width: 3px; padding: 12px; display: flex; gap: 12px; align-items: center; }
.card .c-pic { width: 56px; height: 56px; flex: none; background: #1c1c1c; display: flex; align-items: center; justify-content: center; }
.card .c-pic img, .card .c-pic canvas { image-rendering: pixelated; }
.card .c-t { font-size: var(--t-main); }
.card .c-t b { color: var(--g-gold); font-weight: normal; margin-right: 6px; }
.card .c-d { color: var(--g-gray); font-size: var(--t-tiny); line-height: 1.6; }
.card.locked { border-color: var(--g-dim); }
.card.locked .c-t { color: var(--g-dim); }
/* sponsors (特約車行) */
.sponsor-strip { margin: 12px auto 0; width: 100%; max-width: 320px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; padding: 8px 10px; min-height: 44px; align-items: center;
  border: 3px solid var(--g-gold); background: rgba(0, 0, 0, .75); color: var(--g-white); font: inherit; font-size: var(--t-tiny); line-height: 1.5; cursor: pointer; position: relative; }
.sponsor-strip:focus-visible { outline: 3px solid var(--g-gold); outline-offset: 2px; }
.sponsor-strip .gold { flex-basis: 100%; }
.ad-card { border-color: var(--g-gold); align-items: flex-start; }
.ad-card .c-d.w { color: var(--g-white); }
.ad-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.note { border-width: 3px; padding: 12px 14px; font-size: var(--t-tiny); line-height: 1.8; color: var(--g-gray); }
.note b { color: var(--g-gold); font-weight: normal; display: block; font-size: var(--t-main); }
.note .w { color: var(--g-white); }
/* 遊玩方式: a keyword and one short line each */
.how { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 6px; }
.how .w { white-space: nowrap; }
/* 貢獻者們: names in columns, as many as the page is wide for; none is broken in two */
.names { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2em, 1fr)); gap: 4px 12px; margin-top: 6px; color: var(--g-white); font-size: var(--t-main); line-height: 1.7; }
.names span { white-space: nowrap; }
.back-row { margin-top: 20px; }
/* The last row of buttons on a page stays at the foot of the window while the page scrolls (2026-10-17, design check:
   on a phone held sideways 「出發」 and 「同意並繼續」 were under the fold). At the page's end it is back in its place; a
   band of the page's own colour keeps what scrolls behind it from showing between the buttons. */
.screen-in > .btn-row:last-child, .screen-in > .back-row:last-child {
  position: sticky; bottom: 0; z-index: 2; margin-top: 12px; margin-bottom: calc(-10px - var(--sab)); padding: 14px 0 calc(10px + var(--sab));
  background: linear-gradient(180deg, rgba(10, 58, 120, 0), rgba(10, 58, 120, .9) 14px);
}
/* 收藏冊 (build 39): its five pages' tabs, a stamp for every real shop (a seal a little askew, as one is pressed by
   hand; one not had yet is a dashed ring with the name), the hidden rides (one still locked is a dark shape) */
.book-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
.book-tabs .game-btn { padding-left: 2px; padding-right: 2px; white-space: nowrap; }
.book-sub { text-align: center; margin: -4px 0 12px; line-height: 1.6; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; }
.stamp { aspect-ratio: 1; border: 3px solid #e04030; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #f87858; background: rgba(224, 64, 48, .12); transform: rotate(-6deg); padding: 6px; line-height: 1.3; font-size: var(--t-tiny); }
.stamp:nth-child(3n) { transform: rotate(4deg); }
.stamp:nth-child(3n+1) { transform: rotate(-2deg); }
.stamp span { font-size: 14px; word-break: keep-all; }
.stamp small { color: var(--g-gray); margin-top: 2px; }
.stamp.off { border-style: dashed; border-color: var(--g-dim); color: var(--g-dim); background: none; transform: none; }
/* 賭城 (build 40, js/casino.js; build 41 a table that fills the screen, after casino apps; laid out again after Apple's
   HIG at the owner's word, 「賭城內似乎沒有針對平板跟手機設計，請優化一下」, developer.apple.com/design/human-interface-guidelines).
   The page never scrolls, and it is laid out by the space there is, not by the device (HIG: size classes):
   - narrow (under 600 wide: a phone held upright, a narrow window): one bar at the top with the way out, the four games
     (a segmented control: words only) and 「紀錄」, what is pressed now and then; the table; at the foot, under the
     thumb, the money and what is on the table, the chips with 復原・清除, the big button. What happened shows over the
     top of the table for a few seconds.
   - short (on its side and under 500 high, or on its side and under 1000 wide: a phone on its side, a small window):
     that top bar, the table on the left, the money, chips and buttons in a column on the right.
   - roomy and upright (600 wide and 500 high or more, held upright: a tablet upright, a tall window): the top bar, the
     table, what came up in a band of columns, the controls in one row.
   - roomy and wide (1000 wide, 500 high or more, on its side: a tablet on its side, a computer): the games in a sidebar
     with their pictures, the table with its controls under it, what came up on the right.
   Sizes from HIG: text 17 by default and never under 11 (15 in a phone's bar, where room is short); what is pressed
   44 each way (輪盤's spots 28 at least, HIG's least, on the shortest phones); 8 to 12 between controls; every control
   shows that it is pressed. The 經典 look's bitmap face is sharp at 12, 18 and 24 only: it takes the nearest of those. */
.screen.casino { --cz-tx: 15px; --cz-tx2: 17px; --cz-big: 20px; --cz-small: 13px; --cz-chip: 48px; --cz-btn: 50px; --cz-gap: 8px; background-color: #3a0812; overflow: hidden; }
html:not(.hd) .screen.casino { --cz-tx: 12px; --cz-tx2: 18px; --cz-big: 18px; --cz-small: 12px; }
.screen.casino .screen-in.cz {
  height: 100%; min-height: 0; max-width: none; position: relative; display: grid; gap: var(--cz-gap);
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top games more" "table table table" "bar bar bar";
  padding: calc(6px + var(--sat)) calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal));
}
.cz-top { grid-area: top; display: flex; align-items: center; gap: 12px; min-width: 0; }
.cz-top .cz-leave { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: var(--cz-tx); }
.screen.casino .cz-name { display: none; margin: 0; font-size: var(--cz-big); }
/* the four games: a segmented control, equal parts, words only (pictures only in a computer's sidebar) */
.cz-games { grid-area: games; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; border: 3px solid #000; background: #1a040c; box-shadow: 2px 2px #000; }
.cz-game { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 2px; color: var(--g-gray); font-size: var(--cz-tx); line-height: 1.1; white-space: nowrap; }
.cz-game + .cz-game { border-left: 2px solid #000; }
.cz-game[aria-selected="true"] { background: var(--g-gold); color: #000; }
.cz-game:active { filter: brightness(1.25); }
.cz-ico { display: none; width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.cz-more { grid-area: more; min-height: 44px; padding: 0 12px; font-size: var(--cz-tx); }

/* the table: felt inside a gold edge; what is on it sizes itself to it (container units) */
.cz-table { grid-area: table; position: relative; min-width: 0; min-height: 0; overflow: hidden; container-type: size; border: 3px solid var(--g-gold); box-shadow: inset 0 0 0 3px #000; background-color: #0a5a2a; background-image: radial-gradient(rgba(0, 0, 0, .22) 1px, transparent 1.4px); background-size: 4px 4px; }
.cz-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.cz-win { position: absolute; left: 50%; top: 45%; z-index: 7; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; color: var(--g-gold); font-size: var(--t-big); line-height: 1.1; text-shadow: 3px 3px #000, -2px -2px #000; }
.cz-win small { display: block; margin-top: 4px; font-size: var(--cz-tx2); color: var(--g-white); }
.cz-win.on { animation: cz-pop 1.9s ease-out forwards; }
@keyframes cz-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 22% { transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -62%); } }

/* what came up and what pays: over the table on a phone (「紀錄」), a band on an upright tablet, beside the table on a computer */
.cz-side { grid-area: side; display: none; min-height: 0; overflow-y: auto; padding: 12px 14px; font-size: var(--cz-tx); line-height: 1.5; background: rgba(26, 4, 12, .96); border: 3px solid var(--g-gold); }
.cz.side-open .cz-side { display: block; grid-area: table; z-index: 8; }
.cz-sec + .cz-sec { margin-top: 16px; }
.cz-sec.cont { margin-top: 4px; }
.cz-sec.cont .cz-h { display: none; }
.cz-h { margin: 0 0 8px; font-size: var(--cz-tx); font-weight: normal; color: var(--g-gold); }
.cz-count { margin: 8px 0 0; color: var(--g-gray); }
.pt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pt li { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.pt li b { margin-left: auto; flex: none; white-space: nowrap; color: var(--g-gold); font-weight: normal; }
.pt li small { color: var(--g-gray); font-size: var(--cz-small); }
.pt.rules li { min-height: 0; }
.pt-f { display: flex; gap: 2px; }
.pt-f img { width: 28px; height: 28px; image-rendering: pixelated; }

/* the bar: the money and what is on the table, what happened, the chips with 復原・清除, the buttons */
/* (two rows on every screen but a phone on its side: the money and what is on the table with 復原・清除, then the chips
   and the big button, on the right where the thumb is) */
.cz-bar { grid-area: bar; display: grid; gap: var(--cz-gap) 10px; align-items: center; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info tools" "chips go"; padding: 8px 10px; background: rgba(26, 4, 12, .94); border: 3px solid var(--g-gold); } /* (a ground of its own: the hall's picture is busy behind it) */
.cz-info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; font-size: var(--cz-tx); color: var(--g-gray); white-space: nowrap; line-height: 1.25; }
.cz-cash { position: relative; }
.cz-info b { color: var(--g-white); font-weight: normal; }
.cz-cash .c-money { color: var(--g-gold); font-size: var(--cz-big); }
.cz-delta { position: absolute; left: 0; bottom: 100%; z-index: 9; margin-bottom: 4px; padding: 0 6px; font-style: normal; font-size: var(--cz-tx); white-space: nowrap; opacity: 0; pointer-events: none; background: rgba(0, 0, 0, .75); } /* (floats up over the table's edge: the line it is on has no room) */
.cz-delta.up { color: var(--g-gold); }
.cz-delta.down { color: #f87858; }
.cz-delta.go { animation: cz-rise 1.5s ease-out; }
@keyframes cz-rise { 0% { opacity: 0; transform: translateY(6px); } 15%, 70% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
/* what happened: over the top of the table for a few seconds (.cz-toast; not 百家樂's hands, whose board says them),
   the bar's line kept for screen readers only; a phone on its side has room for the line in its column instead */
.c-said { grid-area: said; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-said.gold, .cz-toast.gold { color: var(--g-gold); }
.c-said.gray, .cz-toast.gray { color: var(--g-gray); }
.c-said.red, .cz-toast.red { color: #f87858; }
.cz-toast { position: absolute; z-index: 9; left: 50%; top: 10px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 6px 14px; font-size: var(--cz-tx); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--g-white); background: rgba(10, 2, 6, .88); border: 2px solid var(--g-gold); pointer-events: none; opacity: 0; transition: opacity .25s; }
.cz-toast.show { opacity: 1; }
.cz-chips { grid-area: chips; display: flex; gap: 8px; }
.cz-chip { width: var(--cz-chip); height: var(--cz-chip); flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--cz-small); color: #000; border: 4px dashed #fcfcfc; box-shadow: 0 0 0 2px #000; transition: transform .08s; }
.cz-chip.k0 { background: #bcbcbc; }
.cz-chip.k1 { background: #3cbcfc; }
.cz-chip.k2 { background: #d82800; color: #fcfcfc; }
.cz-chip.k3 { background: #24242c; color: var(--g-gold); border-color: var(--g-gold); }
.cz-chip[aria-checked="true"] { transform: translateY(-3px); box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--g-gold); }
.cz-chip:active { transform: scale(.92); }
.cz-chip:disabled { opacity: .3; }
.cz-chip:focus-visible, .cz-game:focus-visible, .rl-c:focus-visible, .bc-spot:focus-visible { outline: 3px solid var(--g-gold); outline-offset: 2px; z-index: 3; }
.cz-tools { grid-area: tools; display: flex; gap: 8px; justify-content: flex-end; }
.cz-tools:empty { display: none; }
.cz-tools .game-btn { min-height: 40px; min-width: 52px; padding: 0 10px; font-size: var(--cz-tx); }
.cz-go { grid-area: go; display: flex; gap: 10px; min-width: 120px; }
.cz-go .game-btn { flex: 1; min-height: var(--cz-btn); font-size: var(--cz-tx2); }
/* (a hand of 射龍門 dealt: its stake is set, the chips make room for 射門・不射 or 猜大・猜小・不射) */
.cz.dg-open .cz-chips { display: none; }
.cz.dg-open .cz-go { grid-column: 1 / -1; }
.cz-go .game-btn[aria-disabled="true"] { opacity: .55; }
.cz-play { flex-direction: column; gap: 2px; }
.cz-play small { font-size: var(--cz-small); }
/* chips on a spot: one pile, its amount, in the colour of its largest chip */
.cz-stack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; line-height: 1; color: #000; border: 2px dashed #fcfcfc; box-shadow: 0 0 0 2px #000; pointer-events: none; }
.cz-stack.k0 { background: #bcbcbc; }
.cz-stack.k1 { background: #3cbcfc; }
.cz-stack.k2 { background: #d82800; color: #fcfcfc; }
.cz-stack.k3 { background: #24242c; color: var(--g-gold); }

/* cards, as large as the table they are on lets them be (--cw, set by the table) */
.pcard { position: relative; width: var(--cw, 44px); aspect-ratio: 5 / 7; flex: none; border-radius: 4px; background: #fcfcfc; color: #101018; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.pcard b { position: absolute; left: 8%; top: 4%; font-weight: normal; line-height: 1; font-size: max(12px, calc(var(--cw, 44px) * .3)); font-size: max(12px, round(down, calc(var(--cw, 44px) * .3), 6px)); }
.pcard i { font-style: normal; line-height: 1; margin-top: 14%; font-size: max(12px, calc(var(--cw, 44px) * .5)); font-size: max(12px, round(down, calc(var(--cw, 44px) * .5), 6px)); }
.pcard.red { color: #d82800; }
.pcard.back { background: repeating-linear-gradient(45deg, #a82640 0 4px, #8a1830 4px 8px); box-shadow: inset 0 0 0 2px #f8b800; }
.pcard.slot { background: none; border: 2px dashed rgba(252, 252, 252, .45); box-shadow: none; }
.pcard.deal { animation: card-in .35s ease-out; }
@keyframes card-in { from { transform: translate(40%, -60%) rotate(8deg) scaleX(.1); opacity: 0; } 60% { transform: scaleX(.2); opacity: 1; } to { transform: none; } }

/* 拉霸機 */
.sl { position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center; }
.sl canvas { display: block; }

/* 輪盤: on a tablet or computer the wheel large above the table; on a phone the numbers that came up in a strip above
   it (when the spots stay big enough with it) and the wheel coming up large over the table for the spin */
.rl { position: absolute; inset: 6px; display: grid; gap: 6px; grid-template-rows: auto minmax(0, 1fr); }
.rl[data-mode="stack"] { grid-template-rows: minmax(0, 50%) minmax(0, 1fr); }
.rl[data-mode="stack"] .rl-top { justify-content: center; } /* (2026-10-17, design check: on a tablet the wheel stood small in the band's left corner) */
.rl-top { display: flex; align-items: center; gap: 10px; min-height: 0; }
.rl-wheel { flex: none; }
.rl[data-mode="stack"] .rl-wheel { width: auto; height: 100%; aspect-ratio: 1; }
.rl:not([data-mode="stack"]) .rl-wheel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; overflow: hidden; visibility: hidden; }
.rl-wheel canvas { display: block; }
.rl-last { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-height: 100%; overflow: hidden; align-content: center; }
.rl:not([data-mode="stack"]) .rl-last { flex-wrap: nowrap; }
.rl.nostrip .rl-last { display: none; }
.cz-table:has(.cz-toast.show) .rl:not([data-mode="stack"]) .rl-last { visibility: hidden; } /* (2026-10-17, design check: the words sat over 「還沒轉過」 and the numbers) */
.rl-b { min-width: 30px; height: 26px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--cz-small); color: #fcfcfc; border: 2px solid #000; }
.rl-b.pk-red { background: #d82800; }
.rl-b.pk-black { background: #24242c; }
.rl-b.pk-green { background: #00a800; }
.rl-b.now { box-shadow: 0 0 0 2px var(--g-gold); }
.rl-none { color: var(--g-gray); font-size: var(--cz-small); }
.rl-hist { display: flex; flex-wrap: wrap; gap: 4px; }
.rl-board { display: grid; gap: 2px; min-height: 0; }
.rl[data-mode="tall"] .rl-board { grid-template-columns: 1.15fr .95fr 1fr 1fr 1fr; grid-template-rows: repeat(14, minmax(0, 1fr)); }
.rl:not([data-mode="tall"]) .rl-board { grid-template-columns: .85fr repeat(12, minmax(0, 1fr)) .85fr; grid-template-rows: repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, .75fr)); }
.rl-c { position: relative; min-width: 0; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: var(--cz-tx); color: #fcfcfc; border: 2px solid rgba(252, 252, 252, .55); }
.rl-c.pk-red { background: #a81000; }
.rl-c.pk-black { background: #1a1a22; }
.rl-c.pk-green { background: #006800; }
.rl-c.out { background: rgba(0, 0, 0, .18); }
.rl-c.out.pk-red { background: #a81000; }
.rl-c.out.pk-black { background: #1a1a22; }
.rl-c.win { box-shadow: inset 0 0 0 3px var(--g-gold); }
.rl-c.hit { background: var(--g-gold); color: #000; }
.rl-c:active { filter: brightness(1.35); }
.rl-veil { display: none; }
.rl.spin .rl-veil { display: block; position: absolute; inset: -6px; z-index: 4; background: rgba(0, 0, 0, .55); }
.rl.spin .rl-wheel { visibility: visible; overflow: visible; z-index: 5; transform: translate(-50%, -50%); width: min(88cqw, 88cqh); height: min(88cqw, 88cqh); pointer-events: none; }

/* 百家樂: the two hands, the spots to bet on, the road */
.bc { position: absolute; inset: 6px; display: flex; flex-direction: column; gap: 8px; }
.bc-deal { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bc-hand { --cw: clamp(30px, min(17cqw, 22cqh), 112px); min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; border: 2px solid rgba(252, 252, 252, .35); }
.bc-label { display: flex; gap: 8px; align-items: baseline; font-size: var(--cz-tx2); color: var(--g-white); }
.bc-hand.player .bc-label { color: #3cbcfc; }
.bc-hand.banker .bc-label { color: #f87858; }
.bc-pts { color: var(--g-white); font-weight: normal; font-size: var(--cz-tx); }
.bc-cards { display: flex; align-items: center; min-height: calc(var(--cw) * 1.4); }
.bc-cards .pcard + .pcard { margin-left: calc(var(--cw) * -.28); } /* (fanned, as on a table: a third card still fits the box) */
.bc-cards .pcard.slot + .pcard.slot { margin-left: 6px; }
.bc-hand.won { border-color: var(--g-gold); box-shadow: inset 0 0 0 2px var(--g-gold); }
.bc-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 6px 14px; border: 3px solid #000; font-size: var(--cz-tx2); white-space: nowrap; color: #fcfcfc; box-shadow: 3px 3px #000; }
.bc-banner.player { background: #0058f8; }
.bc-banner.banker { background: #d82800; }
.bc-banner.tie { background: #00a800; }
.bc-spots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bc-spot { position: relative; grid-column: span 2; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 3px solid rgba(252, 252, 252, .6); color: #fcfcfc; font-size: var(--cz-tx2); line-height: 1.1; background: rgba(0, 0, 0, .2); }
.bc-spot.player, .bc-spot.banker { grid-column: span 3; min-height: 60px; }
.bc-spot.player { border-color: #3cbcfc; }
.bc-spot.banker { border-color: #f87858; }
.bc-spot.tie { border-color: #58d854; }
.bc-spot small { font-size: var(--cz-small); color: var(--g-gray); }
.bc-spot:active { filter: brightness(1.3); }
.bc-spot.win { box-shadow: inset 0 0 0 3px var(--g-gold); }
.bc-spot .cz-stack { left: auto; right: 6px; transform: translateY(-50%); }
.bc-road { --bd: 16px; display: grid; grid-template-rows: repeat(6, var(--bd)); grid-auto-columns: var(--bd); gap: 2px; overflow: hidden; }
@container (min-height: 440px) { .bc > .bc-road { --bd: 18px; } }
.bc-road i { position: relative; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; line-height: 1; color: #fcfcfc; border-radius: 50%; }
.bd.banker { background: #d82800; }
.bd.player { background: #0058f8; }
.bd.tie { background: #00a800; }
html:not(.hd) .bc-road .bd { font-size: 0; } /* (經典: its face has no letters that small: the colours say it) */
.br { border: 2px solid; }
.br.banker { border-color: #f87858; }
.br.player { border-color: #3cbcfc; }
.br.tie::after { content: ""; position: absolute; left: -2px; right: -2px; top: calc(50% - 1px); height: 2px; background: #58d854; transform: rotate(-45deg); }
.bc-road.side { --bd: 20px; margin-bottom: 4px; }
@container (max-height: 400px) { .bc > .bc-road { display: none; } }

/* 射龍門: two posts and the gate between them */
.dg { position: absolute; inset: 6px; display: flex; flex-direction: column; gap: 8px; }
.dg-gate { --cw: clamp(46px, min(24cqw, 36cqh), 150px); flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 4cqw, 40px); }
.dg-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dg-gap { font-size: var(--cz-tx2); color: var(--g-gold); text-shadow: 2px 2px #000; white-space: nowrap; }
.pcard.gate { border-color: var(--g-gold); }
.pcard.shot { animation: dg-shot .5s cubic-bezier(.2, .8, .3, 1); }
@keyframes dg-shot { from { transform: translateY(-140%) scale(.6) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.pcard.res-in, .pcard.res-right { box-shadow: 0 0 0 3px var(--g-gold), 0 0 18px var(--g-gold); }
.pcard.res-post, .pcard.res-three { box-shadow: 0 0 0 3px #f87858; }
.pcard.shot.res-post, .pcard.shot.res-three { animation: dg-shot .5s cubic-bezier(.2, .8, .3, 1), dg-hit .45s ease-out .5s; }
.pcard.res-out, .pcard.res-wrong { opacity: .75; }
@keyframes dg-hit { 0%, 100% { translate: 0; } 25% { translate: -8px; } 50% { translate: 7px; } 75% { translate: -4px; } }
.dg[data-res="post"] .dg-post .pcard, .dg[data-res="three"] .dg-post .pcard { box-shadow: 0 0 0 3px #f87858; }
.dg-log { display: flex; flex-wrap: wrap; gap: 6px; max-height: 64px; overflow: hidden; }
.dg-e { padding: 3px 8px; font-size: var(--cz-small); white-space: nowrap; border: 2px solid rgba(252, 252, 252, .4); color: var(--g-gray); }
.dg-e.in, .dg-e.right { color: var(--g-gold); border-color: var(--g-gold); }
.dg-e.post, .dg-e.three { color: #f87858; border-color: #f87858; }
.dg-log.side { max-height: none; }

/* narrow and small (phones under 370 wide, phones under 620 high): a little less of everything, the spots still 28 */
@media (max-width: 369px) { .screen.casino { --cz-tx: 13px; --cz-chip: 42px; } html:not(.hd) .screen.casino { --cz-tx: 12px; } .cz-tools .game-btn { min-width: 48px; padding: 0 6px; } .cz-top .cz-leave { padding: 0 6px; } }
@media (max-width: 599px) and (max-height: 620px) { .screen.casino { --cz-btn: 46px; --cz-chip: 44px; --cz-gap: 6px; } .cz-bar { padding-top: 6px; padding-bottom: 6px; } }
/* short: the table on the left, the money, chips and buttons in a column on the right */
@media (orientation: landscape) and (max-height: 499px), (orientation: landscape) and (max-width: 999px) {
  .screen.casino .screen-in.cz { grid-template-columns: auto minmax(0, 1fr) auto clamp(220px, 30vw, 300px); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top games more bar" "table table table bar"; }
  .cz-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "said" "chips" "tools" "go"; align-content: end; }
  .cz.dg-open .cz-go { grid-column: auto; }
  .cz-tools .game-btn { min-height: 44px; }
  .c-said { position: static; width: auto; height: auto; overflow: hidden; clip-path: none; min-width: 0; font-size: var(--cz-tx); line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cz-toast { display: none; }
  .cz-chips { flex-wrap: wrap; }
  .cz-tools { justify-content: flex-start; }
}
/* roomy and upright: what came up in a band of columns between the table and the bar */
@media (orientation: portrait) and (min-width: 600px) and (min-height: 500px) {
  .screen.casino { --cz-tx: 17px; --cz-tx2: 20px; --cz-big: 24px; --cz-small: 15px; --cz-chip: 60px; --cz-btn: 56px; --cz-gap: 12px; }
  html:not(.hd) .screen.casino { --cz-tx: 18px; --cz-tx2: 18px; --cz-big: 24px; --cz-small: 12px; }
  .screen.casino .screen-in.cz { grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top games more" "table table table" "side side side" "bar bar bar"; padding: calc(12px + var(--sat)) calc(20px + var(--sar)) calc(12px + var(--sab)) calc(20px + var(--sal)); }
  .cz-games { width: 100%; max-width: 620px; justify-self: center; }
  .cz-more { display: none; }
  .cz-side { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; max-height: 26vh; overflow: hidden; padding: 14px 20px; }
  .cz-sec + .cz-sec, .cz-sec.cont { margin-top: 0; }
  .cz-sec.cont .cz-h { display: block; visibility: hidden; }
  .cz-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "info info tools" "chips . go"; padding: 12px 18px; gap: 10px 16px; }
  .cz-info { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
  .cz-tools .game-btn { min-height: 44px; }
  .cz-chips { gap: 12px; }
  .cz-go .game-btn { min-width: 200px; }
  .pt li { min-height: 34px; }
  .pt-f img { width: 32px; height: 32px; }
  .rl-b { min-width: 38px; height: 32px; }
  .bc-road.side { --bd: 22px; }
}
/* roomy and wide: the games in a sidebar, the table with its controls under it, what came up on the right */
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 500px) {
  .screen.casino { --cz-tx: 17px; --cz-tx2: 20px; --cz-big: 24px; --cz-small: 15px; --cz-chip: 54px; --cz-btn: 56px; --cz-gap: 12px; }
  html:not(.hd) .screen.casino { --cz-tx: 18px; --cz-tx2: 18px; --cz-big: 24px; --cz-small: 12px; }
  .screen.casino .screen-in.cz { max-width: 1600px; margin: 0 auto; grid-template-columns: 176px minmax(0, 1fr) clamp(250px, 24vw, 340px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top top" "games table side" "games bar side"; padding: calc(12px + var(--sat)) calc(20px + var(--sar)) calc(12px + var(--sab)) calc(20px + var(--sal)); }
  .screen.casino .cz-name { display: block; }
  .cz-games { grid-template-columns: 1fr; align-content: start; gap: 10px; border: 0; background: none; box-shadow: none; }
  .cz-game { min-height: 100px; border: 3px solid #000; background: #1a040c; box-shadow: 2px 2px #000; }
  .cz-game + .cz-game { border-left: 3px solid #000; }
  .cz-ico { display: block; }
  .cz-more { display: none; }
  .cz-side { display: block; max-height: none; padding: 16px 18px; }
  .cz-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "info info tools" "chips . go"; padding: 10px 16px; gap: 10px 16px; }
  .cz-info { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
  .cz-tools .game-btn { min-height: 44px; }
  .cz-chips { gap: 12px; }
  .cz-go .game-btn { min-width: 180px; }
  .pt li { min-height: 34px; }
  .pt-f img { width: 32px; height: 32px; }
  .rl-b { min-width: 38px; height: 32px; }
  .bc-road.side { --bd: 22px; }
}
@media (prefers-reduced-motion: reduce) { .cz-delta.go, .pcard.deal, .pcard.shot { animation: none; } .cz-win.on { animation: none; opacity: 1; } .cz-toast { transition: none; } }
html:not(.hd) .stamp { background: #1a0c30; } /* (經典: the night street shows behind the page; a stamp is read on a ground of its own) */
html:not(.hd) .stamp.off { background: rgba(4, 8, 30, .88); color: #9a9ab4; }
.card .c-pic.wide { width: 80px; }
.card .grow { flex: 1; min-width: 0; }
img.shadow { filter: brightness(0) opacity(.45); }
.ride-row .ride-pic { flex: none; width: 68px; height: 44px; image-rendering: pixelated; object-fit: contain; }
.ride-row.on .r-name { color: var(--g-gold); }
.city-swap { display: block; margin-top: 10px; }
.record .r-row.news .gold { text-align: right; }

/* ---- overlays: sheets and modals ---- */
.veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.veil.center { align-items: center; padding: 16px; }
.sheet {
  width: 100%; max-width: 720px; height: min(88%, 760px); display: flex; flex-direction: column;
  border-width: 4px; border-bottom-width: 0; padding-bottom: var(--sab);
}
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }
.sheet-head .s-title { color: var(--g-gold); font-size: var(--t-head); line-height: 1; }
.sheet-head .s-sub { color: var(--g-gray); font-size: var(--t-tiny); }
.sheet-head .s-money { margin-left: auto; color: var(--g-gold); font-size: var(--t-head); white-space: nowrap; }
/* Who and how much at the top, the page in the middle and, at the foot, one bar with the five pages and the way back
   to the road: what is pressed on every visit is under the thumb. (Until 2026-10-12 the pages ran along the top and
   the way out sat in the top corner, the far end of a tall phone.) The bar comes first in the page for a keyboard
   and a screen reader; css puts it last on the screen. */
.tabs { order: 3; display: flex; gap: 6px; padding: 8px 10px 10px; }
.tab { flex: 1; min-height: 48px; border: 3px solid var(--g-white); background: #000; font-size: var(--t-main); padding: 0 2px; position: relative; white-space: nowrap; }
.tab.on { background: var(--g-gold); color: #000; border-color: var(--g-gold); }
.tab .dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; background: var(--g-red); }
.tab .dot.can { background: var(--g-gold); }
.tab.on .dot.can { background: #000; }
.tab.want { animation: tab-want 1s ease-in-out infinite; }
@keyframes tab-want { 0%, to { box-shadow: 0 0 0 0 var(--g-gold); } 50% { box-shadow: 0 0 0 5px var(--g-gold); } }
.tabs .go { flex: none; min-width: 64px; min-height: 48px; padding: 0 8px; }
.sheet-body { order: 2; flex: 1; overflow-y: auto; border-top: 3px solid var(--g-white); border-bottom: 3px solid var(--g-white); padding: 4px 12px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sec { color: var(--g-gold); font-size: var(--t-tiny); margin: 14px 0 2px; display: flex; gap: 8px; align-items: baseline; }
.sec .dim { margin-left: auto; }
html:not(.hd) .sec .dim { color: var(--g-gray); } /* (build 60: the 經典 grey on its blue panels was 2.6:1; the 改裝車行's rules are written there) */
.row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 2px solid var(--g-line); min-height: 62px; }
.row:last-child { border-bottom: 0; }
.row .r-main { flex: 1; min-width: 0; }
.row .r-name { line-height: 1.25; }
.row .r-name small { font-size: var(--t-tiny); color: var(--g-gray); margin-left: 6px; }
.r-desc { font-size: var(--t-tiny); color: var(--g-gray); line-height: 1.5; }
.r-desc.red { color: #f87858; }
.row .r-act { flex: none; display: flex; gap: 8px; align-items: center; }
.row .r-two { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } /* 分批收購 (build 36): the next stake over the rest in one go */
.row .r-price { text-align: right; white-space: nowrap; line-height: 1.25; }
.row .r-price small { display: block; font-size: var(--t-tiny); }
.pbar { height: 9px; background: #3c3c3c; position: relative; margin-top: 4px; overflow: hidden; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--g-gold); }
.pips { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.pips i { width: 9px; height: 6px; background: #3c3c3c; }
.pips i.on { background: var(--g-gold); }
.paints { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding: 8px 4px 12px 0; border-bottom: 2px solid var(--g-line); }
.paint { border: 3px solid var(--g-white); background: #000814; color: var(--g-white); min-height: 44px; padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; font-size: var(--t-tiny); line-height: 1.5; }
.paint.on { border-color: var(--g-gold); background: var(--g-navy); box-shadow: 4px 4px #000; }
.paint:disabled { opacity: .55; }
.paint img { margin-bottom: 4px; }
/* 改裝車行 (build 60): its page has no tabs, only 出發, which takes the whole bar; the 霓虹 colours as swatches */
.tune-sheet .tabs .go { flex: 1; }
.tune-sheet .tabs { grid-template-columns: 1fr; align-content: end; } /* (a phone on its side: 出發 at the foot of the left column, by the thumb) */
.glow-dot { display: block; width: 32px; height: 14px; border-radius: 7px; margin: 6px 0 8px; box-shadow: 0 0 10px 2px currentColor; }
.sum { display: flex; align-items: center; gap: 12px; padding: 12px 0 4px; }
.sum .game-btn { flex: 1; }
.empty { color: var(--g-gray); font-size: var(--t-tiny); padding: 18px 0; text-align: center; line-height: 1.8; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-tiny); color: var(--g-gray); margin-top: 2px; }

.modal { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; padding: 18px 16px 16px; text-align: center; }
.modal .m-small { color: var(--g-gray); font-size: var(--t-tiny); }
.modal .m-title { color: var(--g-gold); font-size: var(--t-big); line-height: 1.15; margin: 4px 0 12px; }
.modal .m-pic { display: flex; justify-content: center; margin: 6px 0 12px; }
.modal .m-pic canvas { image-rendering: pixelated; }
.modal .card-img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 12px; image-rendering: pixelated; border: 3px solid var(--g-white); }
.modal ul { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; line-height: 1.6; }
.modal li { padding-left: 1em; text-indent: -1em; margin-bottom: 4px; }
.modal li::before { content: "・"; }
.modal .m-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
/* the pause menu: one to a row, the two sound switches side by side */
.modal .m-btns.pause { display: grid; grid-template-columns: 1fr 1fr; }
.modal .m-btns.pause .game-btn { grid-column: 1 / -1; }
.modal .m-btns.pause .game-btn.half { grid-column: auto; }
/* the ending (build 46): one to a row, the two for friends side by side */
.modal .m-btns.grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal .m-btns.grid .game-btn { grid-column: 1 / -1; }
.modal .m-btns.grid .game-btn.half { grid-column: auto; }
/* 精彩瞬間 (build 48): the run's moments, three across, each its picture and what it was; pressing one shares it */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.shot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 4px; background: #000; border: 2px solid var(--g-gold); color: #fcfcfc; font: inherit; text-align: center; cursor: pointer; }
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.shot span { font-size: var(--t-tiny); line-height: 1.35; text-wrap: balance; } /* (no character left alone on a line) */
.shot small { color: var(--g-gold); font-size: var(--t-tiny); }
/* a field among buttons: outlined, not filled, so it is not taken for one of them; and small enough for eight characters in one look with a phone's text enlarged */
.modal .game-input { font-size: var(--t-main); text-align: center; background: #000; color: var(--g-white); border-color: var(--g-gold); }
.modal .m-btns .game-btn { white-space: normal; line-height: 1.3; padding: 8px 12px; }
.modal .m-btns .game-btn small { display: block; font-size: var(--t-tiny); }
.modal .m-stats { text-align: left; margin: 0 0 14px; }
.modal .m-stats div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--g-line); padding: 4px 0; }

.mapwrap { position: relative; width: 100%; max-width: 860px; max-height: 100%; display: flex; flex-direction: column; padding: 10px; }
.mapwrap canvas { display: block; width: 100%; image-rendering: pixelated; border: 3px solid var(--g-white); cursor: pointer; } /* (a click puts a mark, build 52) */
/* a wide, low screen (a phone on its side): the map down the left at the full height, the rest beside it */
.mapwrap.side { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 12px; }
.mapwrap.side canvas { grid-column: 1; grid-row: 1 / 4; width: auto; align-self: center; }
.mapwrap.side .map-head { grid-column: 2; grid-row: 1; }
.mapwrap.side .legend { grid-column: 2; grid-row: 2; overflow-y: auto; align-content: flex-start; margin-top: 0; }
.mapwrap.side .map-foot { grid-column: 2; grid-row: 3; }
.map-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.map-head .s-title { flex: none; white-space: nowrap; color: var(--g-gold); font-size: var(--t-head); }
.map-head #mFound { min-width: 0; } /* (build 68: beside a narrow legend the title went one character a line, 「地／圖」; the count wraps instead) */
.map-head .game-btn { margin-left: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-tiny); color: var(--g-gray); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border: 2px solid #000; outline: 1px solid var(--g-dim); display: inline-block; }
.legend img.lg { width: 16px; height: 16px; flex: none; image-rendering: pixelated; } /* (the map's own marks, 2026-10-17) */
/* (2026-10-17) the legend scrolls inside the panel, as it does beside the map on a low screen: grown by its marks, it
   pushed 「打聽」 off an upright phone */
.mapwrap:not(.side) .legend { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.mapwrap:not(.side) canvas, .mapwrap:not(.side) .map-head, .mapwrap:not(.side) .map-foot { flex: none; }
.map-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.map-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.map-foot .gray { flex: 1; font-size: var(--t-tiny); }
.map-foot .gray.red { color: #f87858; }
/* 地圖標記 (build 52): how to put one, over the map the first few times it is opened (taps go through to the map) */
.map-coach { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; pointer-events: none; z-index: 2; }
.map-coach i { width: 36px; height: 36px; background: var(--g-gold); border: 3px solid #000; border-radius: 50%; box-shadow: 0 0 0 3px rgba(252, 252, 252, .75); animation: 1.2s ease-in-out infinite map-tap; }
.map-coach b { font-weight: normal; background: #000; border: 3px solid var(--g-gold); padding: 6px 12px; text-align: center; line-height: 1.5; }
@keyframes map-tap { 0%, to { transform: scale(1); } 45% { transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) { .map-coach i { animation: none; } }

/* ---- responsive ---- */
@media (max-width: 380px) {
  .hud-btns { gap: 6px; }
  .tabs { gap: 4px; padding-left: 6px; padding-right: 6px; }
  .tab { font-size: var(--t-tiny); }
  .tabs .go { min-width: 52px; }
}
@media (max-width: 480px) {
  .title-logo h1 { font-size: 72px; }
  .row .game-btn--sm { padding: 0 8px; }
}
/* (build 68: from 640 wide, it was 700: iPhone Duo's inner display held upright is 669×867 in Safari, a tablet's screen,
   and Apple has it laid out as one, its outer display as a phone. Between 640 and 759 the card is 400 wide and the
   minimap 200 by 150, js/ui.js fitRadar, so the two stay apart.) */
@media (min-width: 640px) and (min-height: 560px) {
  /* a computer's or a tablet's corner card: a card of its own, clear of the edges like the task under it, its line all
     round in each look's own way (HD/hd.css; the pixel look's below). Since build 37 in HD, build 38 in both: up to then
     it stood flush in the corner with a black line down its right side (the owner: 「平板與PC版的左上資訊卡，邊緣有
     黑色的邊匡很突兀」), and in the pixel look a white one along its foot. The task below it and the banner under that
     move down by the card's own margin; a little less room inside it at the top and the foot pays for its frame and
     margin (the panels may not cover more of the screen than before: tests/browser/hud.py). */
  .hud-top { display: inline-block; min-width: 420px; max-width: 480px; margin: 6px 0 0 10px; padding-top: calc(4px + var(--sat)); padding-bottom: 6px; }
  .hud-mid { position: absolute; left: 0; right: 0; top: 0; padding-top: calc(10px + var(--sat)); justify-content: flex-end; pointer-events: none; }
  .hud-mid .quest { position: absolute; left: calc(10px + var(--sal)); top: var(--hud-h, 190px); width: 460px; flex: none; margin-top: 16px; }
  .event { position: absolute; left: 0; top: calc(var(--hud-h, 190px) + var(--quest-h, 80px) + 18px); width: 460px; }
  .veil { align-items: center; padding: 20px; }
  .sheet { border-bottom-width: 4px; height: min(86%, 780px); }
  #hud.drive .hud-top { min-width: 420px; max-width: 420px; }
  #hud.drive .bar { height: 10px; } /* (2026-10-17, design check: folded to 360 wide the two gauges were 58 by 6 pixels on a large screen) */
  .tabs .go { flex: 1; min-width: 0; } /* (…and 「出發」 was a narrow tab beside five wide ones) */
}
@media (min-width: 640px) and (max-width: 759px) and (min-height: 560px) {
  .hud-top, #hud.drive .hud-top { min-width: 400px; max-width: 400px; }
  .hud-mid .quest, .event { width: 400px; }
}
/* phones held upright: the panels keep to about a third of the screen and the road gets the rest.
   The title row goes (as it does sideways), the two bars share a row and the money is one size smaller. */
@media (max-width: 639px) and (min-height: 521px) {
  .hud-row.r-title { display: none; }
  .hud-co.in-row { display: block; flex: 1; }
  .hud-money { font-size: var(--t-head); }
  .hud-row.r-bars { display: flex; gap: 12px; }
  .r-bars .hud-bar { flex: 1; min-width: 0; }
  .r-bars .hud-bar + .hud-bar { margin-top: 0; }
  .hud-bar .lbl { min-width: 0; }
}
/* phones held sideways: squeeze the HUD into one strip */
@media (max-height: 520px) {
  .hud-top { display: flex; align-items: center; gap: 14px; padding-top: calc(4px + var(--sat)); padding-bottom: 4px; }
  .hud-row { margin-top: 0 !important; }
  .hud-row.r-title { display: none; }
  .hud-row.r-money { order: 1; flex: none; }
  .hud-row.r-stats { order: 2; flex: none; }
  .hud-row.r-bars { order: 3; flex: 2; display: flex; gap: 14px; min-width: 120px; }
  .r-bars .hud-bar { flex: 1; min-width: 0; }
  .r-bars .hud-bar + .hud-bar { margin-top: 0; }
  .hud-row.r-money .hud-btns { display: none; }
  .hud-btns.side { display: flex !important; order: 5; margin-left: 0; }
  .hud-money { font-size: var(--t-head); }
  .hud-bar .lbl { min-width: 0; }
  .hud-bar .lbl span { display: none; }
  .quest .q-hint { display: none; }
  .quest { flex: 0 1 380px; }
  .hud-mid { padding-top: 6px; justify-content: space-between; }
  /* the sheet: who, the pages and the way out down the left side, the page itself at the full height beside them */
  .sheet { height: 100%; max-width: none; display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sheet-head { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 4px; }
  .sheet-head .s-money { margin-left: 0; }
  .tabs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px; padding: 4px 8px 8px calc(8px + var(--sal)); }
  .tab, .tabs .go { min-height: 44px; min-width: 0; }
  .sheet-body { grid-column: 2; grid-row: 1 / 3; border-top: 0; border-bottom: 0; border-left: 3px solid var(--g-white); }
  /* the pause menu: two to a row, so the whole of it is on the screen */
  .modal { max-width: 600px; }
  .modal .m-title { margin-bottom: 6px; }
  .modal .m-btns { gap: 8px; }
  .modal .m-btns.pause .game-btn { grid-column: auto; }
  /* (the way back in the right-hand column, by the thumb, beside the button before it when there is room: since build 38's
     畫風 a row of its own would put the last row off a phone's low screen) */
  .modal .m-btns.pause .game-btn--gold { grid-column: -2 / -1; }
  .title-logo { margin-top: 8px; }
  .title-logo h1 { font-size: 48px; } /* sideways: small enough for the whole name on one line */
  .menu { margin-top: 14px; }
  .menu-item { min-height: 44px; }
  .credit { padding-top: 120px; }
}
.hud-btns.side { display: none; }
/* iPhone Duo's outer display held sideways (594×368 in Safari, build 68), or any screen as narrow on its side: the strip
   had no room for the three round buttons and the pause button went off the right edge, out of reach. They stand in a
   column down the right edge under the minimap instead, as iPhone Duo puts its own bars down the side of that display
   (Apple's HIG, 「垂直控制」): pause at the top, where the way out goes, then the map, then the sound. On the road they
   fold away with the strip, as before (a tap on the strip brings them back for a few seconds). */
@media (max-height: 520px) and (max-width: 699px) {
  .hud-btns.side { position: absolute; right: calc(10px + var(--sar)); top: calc(var(--radar-b, 130px) + 8px); flex-direction: column-reverse; gap: 8px; }
}
/* A wide screen that is low, and no phone on its side: iPhone Duo's inner display held sideways (951×585 in Safari) or a
   laptop's browser (1280×567), build 68. The factory as on a phone on its side, the pages and the way out down the left
   and the page at the full height beside them; as a centred panel the page was 333 pixels high there, less than on a
   phone. (Down the side is also where iPhone Duo keeps its bars in landscape.) Not when folded like a book: then the
   factory has one page of the two (below). (:where: as weighty as the rules for a phone on its side, so each look's own
   colours come through the same way.) */
@media (orientation: landscape) and (min-height: 521px) and (max-height: 640px) {
  :where(.game-root:not(.fold-x)) .sheet { height: 100%; max-width: 960px; display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  :where(.game-root:not(.fold-x)) .sheet-head { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 4px; }
  :where(.game-root:not(.fold-x)) .sheet-head .s-money { margin-left: 0; }
  :where(.game-root:not(.fold-x)) .tabs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px; padding: 4px 8px 8px calc(8px + var(--sal)); }
  :where(.game-root:not(.fold-x)) .tab, :where(.game-root:not(.fold-x)) .tabs .go { min-height: 44px; min-width: 0; }
  :where(.game-root:not(.fold-x)) .sheet-body { grid-column: 2; grid-row: 1 / 3; border-top: 0; border-bottom: 0; border-left: 3px solid var(--g-white); }
  :where(.game-root:not(.fold-x)) .veil:not(.center) { padding-top: 0; padding-bottom: 0; } /* (the whole height, as on a phone on its side: a 20-pixel band above it showed half the corner card's words) */
  :where(.game-root:not(.fold-x)) .sheet { border-bottom-width: 0; }
  /* the pixel look's name on one line (two of 96 pixels put its menu and records under the window's foot, 621 of 585) */
  html:not(.hd) .title-logo h1 { font-size: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-shake, .game-pop, .game-sheet, .toast, .hud-money.bump { animation: none !important; }
  .tab.want { animation: none; box-shadow: 0 0 0 3px var(--g-gold); }
  #toasts { transition: none; }
  .trophy-toast { animation: 4s linear forwards trophy-fade; }
  .bar.low i { animation: none; }
}
@keyframes trophy-fade { 0%, 88% { opacity: 1; } to { opacity: 0; } }

/* ---- the 16-bit look (build 23): the windows of the consoles after the first. Up to build 22 every panel was a
   flat black box in a white line and every button a white slab with a hard shadow. Now a panel is deep blue, lit
   from the top, in a double line; a button is raised, with a lit upper edge and a shaded lower one; a bar is a
   glossy tube. Not for the painted version (html.hd), which has its own (HD/hd.css). ---- */
html:not(.hd) {
  --w-top: #2a3c94; --w-mid: #1a2870; --w-low: #0c1444; --w-edge: #f4f4fc; --w-in: #7f8fe0; --w-out: #05061a;
}
html:not(.hd) .game-panel, html:not(.hd) .toast, html:not(.hd) .trophy, html:not(.hd) .quest, html:not(.hd) .event,
html:not(.hd) .sponsor-strip, html:not(.hd) #drive b, html:not(.hd) .map-coach b {
  background: linear-gradient(180deg, var(--w-top), var(--w-mid) 42%, var(--w-low));
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--w-out), inset 0 0 0 1px var(--w-in), 3px 4px 0 2px rgba(0, 0, 0, .45);
}
html:not(.hd) .game-panel { border: 2px solid var(--w-edge); }
html:not(.hd) .toast, html:not(.hd) .trophy, html:not(.hd) .quest, html:not(.hd) .event, html:not(.hd) .sponsor-strip, html:not(.hd) #drive b, html:not(.hd) .map-coach b { border-width: 2px; }
/* (what lies over the street lets it show through a little, as it did) */
html:not(.hd) .quest, html:not(.hd) .event { background: linear-gradient(180deg, rgba(42, 60, 148, .9), rgba(26, 40, 112, .88) 42%, rgba(12, 20, 68, .88)); }
html:not(.hd) .toast.gold, html:not(.hd) .trophy, html:not(.hd) .quest { box-shadow: 0 0 0 2px var(--w-out), inset 0 0 0 1px #fce0a8, 3px 4px 0 2px rgba(0, 0, 0, .45); }
html:not(.hd) .toast.bad { background: linear-gradient(180deg, #7a1c24, #501018 42%, #2c0810); box-shadow: 0 0 0 2px var(--w-out), inset 0 0 0 1px #f8a088, 3px 4px 0 2px rgba(0, 0, 0, .45); }
html:not(.hd) .sheet { border-radius: 8px 8px 0 0; border-width: 2px; border-bottom-width: 0; box-shadow: 0 0 0 2px var(--w-out), inset 0 0 0 1px var(--w-in); }
html:not(.hd) .hud-top {
  background: linear-gradient(180deg, rgba(30, 44, 118, .93), rgba(14, 22, 74, .9) 60%, rgba(8, 12, 48, .88));
  border-bottom: 2px solid var(--w-edge);
  box-shadow: 0 2px 0 var(--w-out), inset 0 -1px 0 var(--w-in);
}
@media (min-width: 640px) and (min-height: 560px) {
  html:not(.hd) .hud-top { border: 2px solid var(--w-edge); border-radius: 5px; box-shadow: 0 0 0 2px var(--w-out), inset 0 0 0 1px var(--w-in), 3px 4px 0 2px rgba(0, 0, 0, .45); }
}
/* 接班人 (build 38): the pixel drawings, three times their size, kept sharp */
html:not(.hd) .heir .h-pic { image-rendering: pixelated; }
/* buttons: raised, lit from above */
html:not(.hd) .game-btn {
  background: linear-gradient(180deg, #ffffff, #e6eaf6 45%, #b9c2dc);
  border: 2px solid #14162c;
  border-radius: 5px;
  box-shadow: inset 0 2px 0 #ffffff, inset 0 -3px 0 rgba(56, 66, 110, .38), 0 4px 0 #070818, 0 4px 0 2px rgba(0, 0, 0, .35);
}
html:not(.hd) .game-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #ffffff, inset 0 -2px 0 rgba(56, 66, 110, .38), 0 1px 0 #070818; }
html:not(.hd) .game-btn:disabled:active { transform: none; box-shadow: inset 0 2px 0 #ffffff, inset 0 -3px 0 rgba(56, 66, 110, .38), 0 4px 0 #070818, 0 4px 0 2px rgba(0, 0, 0, .35); }
html:not(.hd) .game-btn--gold { background: linear-gradient(180deg, #ffe680, #f8b800 50%, #c88a00); box-shadow: inset 0 2px 0 #fff4c0, inset 0 -3px 0 rgba(120, 70, 0, .4), 0 4px 0 #070818, 0 4px 0 2px rgba(0, 0, 0, .35); }
html:not(.hd) .game-btn--red { background: linear-gradient(180deg, #f8785c, #d82800 50%, #981800); box-shadow: inset 0 2px 0 #fcb8a4, inset 0 -3px 0 rgba(80, 0, 0, .4), 0 4px 0 #070818, 0 4px 0 2px rgba(0, 0, 0, .35); }
@keyframes game-pulse16 { 0%, to { box-shadow: inset 0 2px 0 #fff4c0, inset 0 -3px 0 rgba(120, 70, 0, .4), 0 4px 0 #070818, 0 0 0 0 var(--g-gold); } 50% { box-shadow: inset 0 2px 0 #fff4c0, inset 0 -3px 0 rgba(120, 70, 0, .4), 0 4px 0 #070818, 0 0 0 6px var(--g-gold); } }
html:not(.hd) .game-btn.pulse { animation-name: game-pulse16; }
html:not(.hd) .game-input { border: 2px solid #14162c; border-radius: 5px; box-shadow: inset 0 3px 0 rgba(40, 50, 100, .22); }
html:not(.hd) .modal .game-input { background: #060a2c; border-color: var(--g-gold); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .5); }
/* bars: a dark groove with a glossy fill */
html:not(.hd) .bar, html:not(.hd) .pbar { background: #0a0e2a; border-radius: 3px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(140, 156, 230, .45); }
html:not(.hd) .bar i, html:not(.hd) .pbar i { background: linear-gradient(180deg, #fff0a0, #f8b800 45%, #b87c00); border-radius: 3px; }
html:not(.hd) .bar.hp i { background: linear-gradient(180deg, #c4f8b0, #58d854 45%, #1c8c2c); }
html:not(.hd) .bar.low i { background: linear-gradient(180deg, #fcb0a0, #e83818 45%, #981000); }
html:not(.hd) .pips i { border-radius: 2px; background: #0a0e2a; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .6); }
html:not(.hd) .pips i.on { background: linear-gradient(180deg, #fff0a0, #f8b800 55%, #b87c00); box-shadow: none; }
/* the pieces inside a page */
html:not(.hd) .tab { border: 2px solid var(--w-in); border-radius: 5px; background: linear-gradient(180deg, #24348a, #0e1648); box-shadow: 0 0 0 1px var(--w-out); }
html:not(.hd) .tab.on { background: linear-gradient(180deg, #ffe680, #f8b800 50%, #c88a00); border-color: #fff4c0; }
html:not(.hd) .tab .dot { border-radius: 50%; box-shadow: 0 0 0 1px var(--w-out); }
html:not(.hd) .diff, html:not(.hd) .paint { border: 2px solid var(--w-in); border-radius: 5px; background: linear-gradient(180deg, #1c2a78, #0a1040); box-shadow: 0 0 0 1px var(--w-out); }
html:not(.hd) .diff.on, html:not(.hd) .paint.on { border-color: var(--g-gold); background: linear-gradient(180deg, #34249c, #1a1260); box-shadow: 0 0 0 1px var(--w-out), 3px 4px 0 1px rgba(0, 0, 0, .45); }
html:not(.hd) .card .c-pic { background: linear-gradient(180deg, #0a0e30, #141c58); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--w-in); }
html:not(.hd) .card.locked { box-shadow: 0 0 0 2px var(--w-out), inset 0 0 0 1px #50587c; }
html:not(.hd) .radar { border: 2px solid var(--w-edge); border-radius: 5px; box-shadow: 0 0 0 2px var(--w-out), 3px 4px 0 2px rgba(0, 0, 0, .45); overflow: hidden; }
html:not(.hd) .mapwrap canvas, html:not(.hd) .modal .card-img { border: 2px solid var(--w-edge); border-radius: 5px; box-shadow: 0 0 0 2px var(--w-out); }
html:not(.hd) .veil { background: rgba(4, 6, 30, .66); }
html:not(.hd) .screen { background: linear-gradient(180deg, #030a3a, var(--g-night) 45%, #0a3a78); }
/* the name of the game: gold, lit from above, on a deep shadow */
html:not(.hd) .game-logo { background: linear-gradient(180deg, #fff6b0 8%, #f8c820 46%, #e89000 54%, #a85800 96%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(3px 3px 0 #24188c) drop-shadow(4px 4px 0 #05061a); }
html:not(.hd) #stick { background: radial-gradient(circle at 40% 35%, rgba(60, 80, 170, .45), rgba(4, 6, 30, .4)); border-width: 2px; }
html:not(.hd) #stick i, html:not(.hd) #drive i, html:not(.hd) .map-coach i { background: radial-gradient(circle at 38% 30%, #fff0a0, #f8b800 55%, #a86800); border-width: 2px; }
/* (the name stands in two lines on the title page: each is lit from its own top) */
html:not(.hd) .title-logo h1 { background: none; }
html:not(.hd) .title-logo h1 span { background: linear-gradient(180deg, #fff6b0 8%, #f8c820 46%, #e89000 54%, #a85800 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 特別任務 (build 31): the task box's last line is the special task, in gold */
.quest.special .q-hint { color: var(--g-gold); }
/* ---- 連線共玩 (build 28; js/together.js): the room, the sides, the chat, the strip during a game ---- */
/* the door (build 30): what is wrong with a field, said under it; the list of rooms with its button; a room's code as typed */
.field-say { color: #ff8a78; font-size: var(--t-tiny); line-height: 1.6; margin-top: 6px; text-shadow: 2px 2px #000; }
.field-say:empty { display: none; }
.game-input[aria-invalid="true"] { outline: 3px solid #ff5a44; }
.game-input:disabled { opacity: .55; }
.game-select { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; padding-right: 40px; font-size: var(--t-main); text-overflow: ellipsis; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 14px) 55%; background-size: 8px 8px; background-repeat: no-repeat; }
.game-select option { color: #000; background: #fff; }
.room-again { flex: none; width: 52px; padding: 0; }
.room-again.spin .ico { animation: room-again 1s steps(8); }
@keyframes room-again { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .room-again.spin .ico { animation: none; } }
.room-in { margin-top: 10px; text-transform: uppercase; }
.room-in::placeholder { text-transform: none; }
.enter-room label[for="mpPass"] { margin-top: 22px; }
.door-hint { margin-top: 8px; line-height: 1.6; text-shadow: 2px 2px #000; }
.room-code { color: var(--g-gold); letter-spacing: .18em; }
.mp-say { min-height: 1.4em; margin-top: 12px; }
.members .r-row, .chat + .btn-row { align-items: center; }
.members .r-row, .modal .r-row, .result .r-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; line-height: 1.9; text-align: left; }
h2 .gray { font-size: var(--t-main); }
.members .game-btn, .modal .r-row .game-btn { padding: 2px 10px; min-height: 0; font-size: var(--t-small, 12px); }
/* (build 32) a room's players, a card each: the factory's name large, the side and who they are under it, the host's
   請出 at the right, big enough for a thumb; one's own card in gold; a dashed card for the seats still free */
.members .member { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; text-align: left; }
.members .member .m-main { flex: 1; min-width: 0; }
.members .member .m-name { font-size: var(--t-main); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members .member .m-tags { margin-top: 2px; font-size: var(--t-small, 12px); line-height: 1.6; color: var(--g-gray); }
.members .member.me { border-color: var(--g-gold); }
.members .member.away .m-name, .members .member.away .ico { opacity: .55; }
.members .member .m-kick { flex: none; min-height: 44px; padding: 0 14px; font-size: var(--t-small, 12px); }
.members .member.empty { justify-content: center; border: 2px dashed var(--g-dim); border-radius: 6px; background: rgba(6, 10, 44, .6); color: var(--g-gray); font-size: var(--t-small, 12px); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.picks .pick { padding: 6px 12px; min-height: 0; }
.picks .pick.on { outline: 3px solid var(--g-gold); outline-offset: 1px; }
.side-chip { display: inline-block; padding: 0 8px; border-radius: 4px; color: #000; font-size: var(--t-small, 12px); line-height: 1.6; }
.side-0 { background: #6c9cf8; } .side-1 { background: #f8d848; } .side-2 { background: #58e0d0; } .side-3 { background: #f8a0e8; } .side-4 { background: #f0f0f0; } .side-5 { background: #8a8a9a; }
.picks .pick.side-0, .picks .pick.side-1, .picks .pick.side-2, .picks .pick.side-3, .picks .pick.side-4, .picks .pick.side-5 { color: #000; text-shadow: none; }
.chat { margin-top: 14px; }
.chat-log { height: 7.5em; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 8px; text-align: left; line-height: 1.5; word-break: break-word; }
.chat-line b { color: var(--g-gold); font-weight: normal; }
.chat-line.sys { color: var(--g-gray); } /* (build 31) somebody came, went, dropped out or is back */
.chat .name-row .game-input { flex: 1; min-width: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } /* (build 32) a word with one press */
.quick .game-btn { min-height: 40px; padding: 0 12px; font-size: var(--t-small, 12px); }
.mp-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); z-index: 6; padding: 4px 12px; border: 2px solid var(--g-gold); border-radius: 6px;
  background: rgba(6, 10, 44, .86); color: var(--g-white); font: inherit; font-size: var(--t-small, 12px); line-height: 1.5; white-space: nowrap; }
.mp-bar.late .mp-rank { color: #ff7a6a; }
/* (build 31) the strip is a button: what it opens is on its right, gold, with a count of chat lines not yet read */
.mp-bar { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.mp-bar .mp-open { padding: 2px 8px; border-radius: 4px; background: var(--g-gold); color: #000; text-shadow: none; flex-shrink: 0; }
/* (build 32) the amount says what it is (團隊共賺 / 價值): should the line ever be too long for the screen (連線不穩…), its
   left part is cut short and the button stays whole */
.mp-bar { max-width: calc(100vw - 16px); }
.mp-bar .mp-rank { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mp-bar .mp-open.new { background: #f87858; color: #fff; }

/* ---- 監理站 (build 43, js/exam.js) ----
   The ten tests as a list of cards, then the test ground: the whole ground at once, as large as the screen lets it be,
   with its name and what it asks over it and the way back under it, where the thumb is. Nothing scrolls while driving
   (the list scrolls on a small screen). Sizes after HIG as the 賭城's: words 15 on a phone, controls 44 high. */
.screen.exam { --ex-tx: 15px; --ex-big: 20px; --ex-small: 13px; overflow: hidden; }
html:not(.hd) .screen.exam { --ex-tx: 12px; --ex-big: 18px; --ex-small: 12px; }
.screen.exam .screen-in.ex { height: 100%; min-height: 0; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding: calc(6px + var(--sat)) calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal)); }
.ex-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ex-top .ex-leave { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: var(--ex-tx); }
.screen.exam .ex-name { flex: 1; min-width: 0; margin: 0; font-size: var(--ex-big); text-align: left; }
.ex-tally { font-size: var(--ex-tx); color: var(--g-gold); white-space: nowrap; }
.ex-say { margin: 0; font-size: var(--ex-tx); line-height: 1.4; color: var(--g-gold); } /* (build 59: why the test under way is gone) */
.ex-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; align-content: start; padding: 2px; }
.ex-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t m" "n r r"; gap: 2px 10px; align-items: center; min-height: 64px; padding: 10px 12px; text-align: left; color: var(--g-white); background: var(--g-navy); border: 3px solid #000; box-shadow: 2px 2px #000; }
.ex-n { grid-area: n; width: 1.6em; text-align: center; font-size: var(--ex-big); color: var(--g-gray); }
.ex-t { grid-area: t; font-size: var(--ex-tx); }
.ex-r { grid-area: r; font-size: var(--ex-small); line-height: 1.35; color: var(--g-gray); }
.ex-m { grid-area: m; font-size: var(--ex-small); color: var(--g-dim); white-space: nowrap; }
.ex-card.m1 .ex-m { color: #f0a868; }
.ex-card.m2 .ex-m { color: #dce4f0; }
.ex-card.m3 .ex-m { color: var(--g-gold); }
.ex-card:active { filter: brightness(1.2); }
.ex-card:focus-visible { outline: 3px solid var(--g-gold); outline-offset: 2px; }
.ex-run { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ex-head .ex-test { font-size: var(--ex-big); font-weight: normal; color: var(--g-gold); }
.ex-rule { font-size: var(--ex-small); line-height: 1.4; color: var(--g-gray); }
.ex-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; }
.ex-canvas { display: block; max-width: 100%; max-height: 100%; border: 3px solid #000; image-rendering: pixelated; touch-action: none; }
.ex-hud { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 4px 12px; font-size: var(--ex-tx); white-space: nowrap; color: #fcfcfc; background: rgba(0, 0, 0, .7); pointer-events: none; }
.ex-hud:empty { display: none; }
.ex-res { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 24px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 22px; text-align: center; color: #fcfcfc; background: rgba(0, 0, 0, .85); border: 3px solid var(--g-gold); pointer-events: none; }
.ex-res b { font-size: var(--t-big); font-weight: normal; line-height: 1.1; color: var(--g-gold); }
.ex-res.fail { border-color: #f87858; }
.ex-res.fail b { color: #f87858; }
.ex-res.m1 b { color: #f0a868; }
.ex-res.m2 b { color: #dce4f0; }
.ex-res span { font-size: var(--ex-tx); }
.ex-res .ex-note { font-size: var(--ex-small); color: var(--g-gold); }
.ex-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.ex-hint { font-size: var(--ex-small); color: var(--g-gray); }
.ex-btns { display: flex; gap: 8px; margin-left: auto; }
.ex-btns .game-btn { min-height: 44px; padding: 0 14px; font-size: var(--ex-tx); }

/* ---- 業績考核 (build 44, js/ui.js showQuota): the month's ten best alone and as allies, side by side where there is room ---- */
.q-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-top: 12px; }
.q-tops > .game-panel { padding: 10px 14px; text-align: left; }
.q-tops b { display: block; margin-bottom: 4px; font-weight: normal; color: var(--g-gold); }
.q-top .r-row { display: flex; justify-content: space-between; gap: 10px; line-height: 1.7; }
.back-row .game-btn--block + .game-btn--block { margin-top: 10px; }

/* The title page on a wide screen (2026-10-17, design check: on a computer the panel of records was cut at the window's
   foot): the menu and the panel side by side under the name, as tall as each other, and the font's line at the foot as
   before (tests/browser/title.py: it follows what is above it, or stands at the window's foot). (Build 68: from 900 wide,
   it was 1000: iPhone Duo's inner display held sideways is 951 wide, and the panel of records was below the window's foot.
   Folded like a book the title page is one column on the right-hand page, below.) */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 500px) {
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 32px; }
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) > * { grid-column: 1 / -1; }
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) > .title-logo { grid-row: 1; }
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) > .menu { grid-column: 1; grid-row: 2; }
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) > .record { grid-column: 2; grid-row: 2; align-self: stretch; }
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) > .vs-box { grid-row: 3; }
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) > .sponsor-strip { grid-row: 4; }
  :where(.game-root:not(.fold-x)) .screen-in:has(.title-logo) > .credit { grid-row: 5; align-self: end; justify-self: center; }
}

/* ---- iPhone Duo held part folded (build 68) ----
   Like a book (the fold runs down the screen: .fold-x) or a laptop (across it, the upper half standing: .fold-y), and
   only where the browser says where the fold is (js/ui.js fold(): the Viewport Segments API, Safari 27.1 behind a
   feature flag, Chrome 138 and later on folding Android phones); --fold-a and --fold-b are where the fold begins and
   ends. Apple's guidelines for it: what matters keeps off the fold, and nothing else moves. The road and the truck keep
   to the part before the fold (left, upper: js/render.js, with the guide arrows and the words that come and go); what
   opens over the road, the factory, the map and the menus, goes to the part after it, as the system's own sheets do;
   the button at the foot (進工廠…) stays under the truck like a book, at the foot of the lower half like a laptop. Pages of their own (the title, how to
   play, the name…) go on the right-hand page, the street picture behind both; the 賭城 and the 監理站 lay themselves out. */
/* (held like a laptop the panels on the road go to the lower half too, the part that lies flat under the thumbs: in the
   standing half they took six tenths of it, and the guide arrows had no room left but over the truck; the upper half is
   all road, the truck in its middle. Like a book they stay with the road on the left-hand page, which is as wide as a
   tablet's corner card wants.) */
.fold-y #hud { top: var(--fold-b); }
.fold-x .veil { padding-left: calc(var(--fold-b) + 16px); padding-right: 16px; }
.fold-y .veil { padding-top: calc(var(--fold-b) + 16px); }
.fold-x .sheet, .fold-y .sheet { height: 100%; }
.fold-x .hud-bottom, .fold-x #drive { right: calc(100% - var(--fold-a)); }
.fold-x .screen-in:not(.cz):not(.ex) { margin-left: calc(var(--fold-b) + 16px); margin-right: 16px; width: auto; }
/* (the corner card and the task under it end short of the fold: as wide as before, or as the left-hand page allows) */
@media (min-width: 640px) and (min-height: 560px) {
  .fold-x #hud .hud-top, .fold-x #hud.drive .hud-top { min-width: min(420px, calc(var(--fold-a) - 20px)); max-width: min(480px, calc(var(--fold-a) - 20px)); }
  .fold-x .hud-mid .quest, .fold-x .event { width: min(460px, calc(var(--fold-a) - 20px)); }
}
/* (held like a laptop, the title page's name fills the standing half and the menu starts on the half that lies flat,
   under the thumbs, as the factory and the menus do) */
.fold-y .screen-in:has(.title-logo) > .title-logo { margin-top: 0; min-height: calc(var(--fold-a) - 16px - var(--sat)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fold-y .screen-in:has(.title-logo) > .menu { margin-top: calc(var(--fold-b) - var(--fold-a) + 20px); }
/* (the title page's name on the right-hand page: one size smaller, it reached the screen's edge) */
.fold-x .title-logo h1 { font-size: 72px; }
/* The 賭城 folded: like a book, the table on the left-hand page and the games, the chips and 轉！ on the right; like a laptop,
   the table on the upper half and all that is pressed on the lower one, under the thumbs (the columns and rows meet the
   fold, the table's own drawing follows its box: js/casino.js). What came up (賠率, 紀錄) opens over the table, as on a phone. */
.fold-x .screen.casino .screen-in.cz { grid-template-columns: calc(var(--fold-a) - 20px) calc(var(--fold-b) - var(--fold-a) + 22px - 2 * var(--cz-gap)) minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "table . top more" "table . games games" "table . bar bar"; }
.fold-y .screen.casino .screen-in.cz { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: calc(var(--fold-a) - 20px - var(--sat)) calc(var(--fold-b) - var(--fold-a) + 22px - 2 * var(--cz-gap)) auto minmax(0, 1fr); grid-template-areas: "table table table" ". . ." "top games more" "bar bar bar"; }
.fold-y .cz-side { display: none; }
.fold-y .cz.side-open .cz-side { display: block; grid-area: table; }
.fold-y .cz-more { display: block; }
/* The 監理站 folded: like a book, on the right-hand page; like a laptop, the list of tests on the lower half, and in a test
   the course on the upper half with its buttons on the lower one. */
.fold-x .screen.exam .screen-in.ex { max-width: none; margin-left: calc(var(--fold-b) + 8px); margin-right: 8px; width: auto; }
.fold-y .screen.exam .screen-in.ex:has(.ex-list:not([hidden])) { padding-top: calc(var(--fold-b) + 8px); }
.fold-y .screen.exam .screen-in.ex:has(.ex-run:not([hidden])) { height: var(--fold-a); }
.fold-y .screen.exam .ex-run .ex-bar { position: absolute; left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); top: calc(var(--fold-b) + 8px); }
/* 進入房間 held like a laptop (2026-10-26, the owner: 「密碼欄改成和房號並排」): the code and the password side by side under
   the title, the list of rooms under them, 返回 and 進入 under the fold (js/ui.js placeScreen, .fold-under). Held like a
   laptop the keyboard comes up to 88 px over the fold, and Safari moves the page to put a focused field's middle at the
   middle of what is left over it (WebKit's _zoomToRevealFocusedElement): under the list the code field would move it
   133 px and the password, under the fold, moved it 317, the title and the code out of sight; up here 41 px in the HD
   look and 13 in the 經典 look, the title to the list in view (Device Hub, 2026-10-25 and 26).
   As wide as the two fields' words need (或輸入房號（5 個字）, 有密碼的房間才要填: 290 and 268 px in the 經典 look with their
   padding, the columns in that proportion); a narrower folding phone keeps the page as it is. */
@media (min-width: 640px) {
  .fold-y .screen.enter-room .screen-in { max-width: min(640px, calc(100% - 28px)); display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 12fr); column-gap: 12px; align-content: start;
    grid-template-areas: "head head" "code-label pass-label" "code pass" "code-say pass-say" "list list" "hint hint" "act act" "say say"; }
  .fold-y .screen.enter-room h2 { grid-area: head; }
  .fold-y .screen.enter-room label[for="mpCode"] { grid-area: code-label; }
  .fold-y .screen.enter-room label[for="mpPass"] { grid-area: pass-label; margin-top: 6px; }
  .fold-y .screen.enter-room #mpCode { grid-area: code; margin-top: 0; }
  .fold-y .screen.enter-room #mpPass { grid-area: pass; }
  .fold-y .screen.enter-room #mpCodeSay { grid-area: code-say; }
  .fold-y .screen.enter-room #mpPassSay { grid-area: pass-say; }
  .fold-y .screen.enter-room .name-row { grid-area: list; margin-top: 14px; }
  .fold-y .screen.enter-room #mpListSay { grid-area: hint; }
  .fold-y .screen.enter-room .btn-row { grid-area: act; }
  .fold-y .screen.enter-room #mpSay { grid-area: say; }
}