/* Fraudle. A gallery wall by day (light) and after hours (dark), following the device; a data-theme on <html> wins. */

:root {
  --sans: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: 'Lora', Georgia, "Times New Roman", serif;

  --wall: #ebe4d8; --wall-lit: #f6f1e7; --bar: rgba(235, 228, 216, .9);
  --ink: #2b241c; --muted: #6b5e4f; --faint: #978873; --line: #d3c6b1; --line-strong: #bba98e;
  --card: #f8f4ec; --plaque: #efe6d4; --plaque-ink: #3a2f22;
  --accent: #7b1e3a; --accent-hover: #93284a; --on-accent: #fff;
  --forgery: #b0261c; --right: #1c6a54;
  --gold-text: #9a6f12; --track: #ddd2bf; --pill-fill: #f0d385; --pill-ink: #3a2a08;
  --tile: #efebe0; --tile-edge: #d6ccb8; --tile-ink: #1f1a14;
  --gallery: #e7e0d3; --gallery-spot: rgba(255, 251, 240, .8); --rail: #8a6a3a; --skirting: #d2c9b8;
  --frame: #b48a3c; --frame-edge: #6b4f1d;
  --machine: #2f2a27; --machine-lit: #4b443f; --silver: #7f8890;
  --glass: rgba(150, 190, 205, .3); --glass-edge: rgba(255, 255, 255, .75); --glass-shine: rgba(255, 255, 255, .42); --glass-glint: rgba(255, 255, 255, .2);
  --card-shadow: 0 1px 2px rgba(48, 30, 10, .12), 0 6px 18px rgba(48, 30, 10, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: #1a171e; --wall-lit: #262029; --bar: rgba(26, 23, 30, .88);
    --ink: #eee5d6; --muted: #b4a893; --faint: #807562; --line: #383241; --line-strong: #4d4556;
    --card: #241f29; --plaque: #d9cdb4; --plaque-ink: #2b2219;
    --accent: #d4ae5c; --accent-hover: #e3c278; --on-accent: #1e1709;
    --forgery: #e2584c; --right: #4cb493;
    --gold-text: #dfbb6a; --track: #312b36; --pill-fill: #6e5420; --pill-ink: #f6e7c0;
    --tile: #2b2631; --tile-edge: #433b4c; --tile-ink: #f1e9dc;
    --frame: #9c7733; --frame-edge: #3d2c10;
    --machine: #3b3542; --machine-lit: #575060; --silver: #aeb6bd;
    --glass: rgba(150, 190, 215, .14); --glass-edge: rgba(255, 255, 255, .3); --glass-shine: rgba(255, 255, 255, .13); --glass-glint: rgba(255, 255, 255, .06);
    --gallery: #38332f; --gallery-spot: rgba(255, 226, 170, .13); --rail: #5e4826; --skirting: #2b2724;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wall: #1a171e; --wall-lit: #262029; --bar: rgba(26, 23, 30, .88);
  --ink: #eee5d6; --muted: #b4a893; --faint: #807562; --line: #383241; --line-strong: #4d4556;
  --card: #241f29; --plaque: #d9cdb4; --plaque-ink: #2b2219;
  --accent: #d4ae5c; --accent-hover: #e3c278; --on-accent: #1e1709;
  --forgery: #e2584c; --right: #4cb493;
  --gold-text: #dfbb6a; --track: #312b36; --pill-fill: #6e5420; --pill-ink: #f6e7c0;
  --tile: #2b2631; --tile-edge: #433b4c; --tile-ink: #f1e9dc;
  --frame: #9c7733; --frame-edge: #3d2c10;
  --machine: #3b3542; --machine-lit: #575060; --silver: #aeb6bd;
  --glass: rgba(150, 190, 215, .14); --glass-edge: rgba(255, 255, 255, .3); --glass-shine: rgba(255, 255, 255, .13); --glass-glint: rgba(255, 255, 255, .06);
  --gallery: #38332f; --gallery-spot: rgba(255, 226, 170, .13); --rail: #5e4826; --skirting: #2b2724;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  background: radial-gradient(130% 60% at 50% -10%, var(--wall-lit), transparent 70%) no-repeat, var(--wall);
  padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main:focus, h1:focus { outline: none; }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 3px;
  border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); font: 700 14px/1.2 var(--sans);
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .08s, opacity .15s;
}
.btn:hover:not(:disabled) { border-color: var(--muted); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--line); }
.btn.big { padding: 12px 24px; font-size: 16px; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* --- top: the wordmark, help; the rooms of the day --- */
.top { padding: calc(10px + env(safe-area-inset-top, 0)) 16px 6px; }
.top-row { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.top-link {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 4px 8px; border: none;
  border-radius: 3px; background: none; color: var(--muted); font: 700 13px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.top-link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.help-btn { width: 34px; justify-content: center; border: 1.5px solid var(--line-strong); font-size: 15px; }
.top-right { justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.icon-btn { width: 34px; height: 34px; padding: 0; justify-content: center; }
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.wordmark-name { font: 600 22px/1.1 var(--serif); letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; color: inherit; text-decoration: none; }
.wordmark-day { font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: .06em; }
.rooms { list-style: none; display: flex; justify-content: center; gap: 5px; margin: 10px auto 0; padding: 0; }
.room {
  width: 26px; height: 19px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 2px;
  color: var(--faint); font: 800 9px/1 var(--sans); letter-spacing: .02em; transition: background .3s, border-color .3s;
}
.room.current { border-color: var(--gold-text); color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-text) 22%, transparent); }
.room.done { background: var(--muted); border-color: var(--muted); color: var(--wall); }
.room.flawless { background: linear-gradient(135deg, #a87a22, #ecd08a 50%, #b4852a); border-color: #a87a22; color: #3a2a08; }

/* --- the meter: today's score, filling live, with the stars along it --- */
.meter-bar {
  position: sticky; top: 0; z-index: 20; padding: 10px 18px 20px; background: var(--bar);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.meter-bar > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.meter-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#score { font: 700 20px/1.1 var(--serif); }
.meter-of { font-size: 12px; color: var(--faint); font-weight: 700; }
.meter-stars { color: var(--gold-text); font-size: 15px; letter-spacing: .08em; }
/* the time bonus: a gold pill by the score, pulsing while the clock runs; once the points start to shrink its outline
   (an SVG path, .ring) is wiped away clockwise from the top, the same length every second, until 0:00 */
.timer {
  position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 9px; border-radius: 999px;
  background: var(--pill-fill); color: var(--pill-ink); font: 800 13.5px/1.1 var(--sans); font-variant-numeric: tabular-nums;
}
.timer-icon { position: relative; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#timer-text { position: relative; }
.timer-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.timer-ring path { fill: none; }
.ring-track { stroke: color-mix(in srgb, var(--gold-text) 22%, transparent); stroke-width: 1.5; }
.ring { stroke: var(--gold-text); stroke-width: 2.2; stroke-linecap: round; }
.timer.ticking { animation: pill-pulse 1s ease-in-out infinite; transform-origin: right center; } /* (it grows inwards, not past the bar's edge) */
@keyframes pill-pulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-text) 20%, transparent); } }
.timer.lost { background: transparent; color: var(--faint); }
.timer.lost .ring-track { stroke: var(--line-strong); stroke-dasharray: 5 4; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.meter { position: relative; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--track); }
.meter-fill {
  width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a87a22, #e9c46a 60%, #f3dc9a);
  box-shadow: 0 0 10px rgba(233, 196, 106, .45); transition: width 1s cubic-bezier(.2, .7, .2, 1);
}
.tick { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--wall); }
.tick-star { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); font-size: 10.5px; line-height: 1; color: var(--faint); white-space: nowrap; letter-spacing: -.04em; transition: color .3s; }
.tick.lit .tick-star { color: var(--gold-text); }
/* the perfect day's wreathed star, at the end of the track: faint until 10,000, then gold */
/* (the track stops short of the bar's end, its left edge still under the score, and the wreath sits just past it) */
.meter-bar > .meter { width: calc(100% - 42px); max-width: 718px; margin-left: max(0px, calc((100% - 760px) / 2)); margin-right: 0; }
.perfect-mark {
  position: absolute; left: calc(100% + 8px); top: 50%; width: 32px; transform: translateY(-52%);
  color: var(--line-strong); transition: color .5s, filter .5s;
}
.perfect-mark svg { display: block; width: 100%; height: auto; }
.perfect-mark.lit { color: var(--gold-text); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold-text) 60%, transparent)); }
.perfect-mark.pop { animation: wreath-pop 1s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wreath-pop { 40% { transform: translateY(-52%) scale(1.7) rotate(-10deg); } }
.closing-wreath { display: block; width: 96px; margin: 6px 0 2px; color: var(--gold-text);
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--gold-text) 45%, transparent)); animation: wreath-in .9s cubic-bezier(.3, 1.5, .5, 1) both; }
.closing-wreath svg { display: block; width: 100%; height: auto; }
@keyframes wreath-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
.tick.pop .tick-star { animation: pop .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(2.1); } 100% { transform: translateX(-50%) scale(1); } }

main { max-width: 1080px; margin: 0 auto; padding: 22px 16px 28px; }

.eyebrow { font: 800 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* --- the intro --- */
.intro { max-width: 560px; margin: 8px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.intro-wall { display: flex; justify-content: center; align-items: flex-end; gap: 18px; margin: 4px 0 10px; }
.mini-piece { width: 86px; container-type: inline-size; }
.mini-piece.m1 { width: 104px; }
.mini-piece .label { font-size: 9.5cqi; }
.intro-title { font: 600 clamp(28px, 6.4vw, 42px)/1.12 var(--serif); text-wrap: balance; }
.intro-lede { font-size: 16.5px; color: var(--muted); text-wrap: pretty; }
.intro-lede b { color: var(--ink); }
.intro-points { text-align: left; margin: 2px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.intro-points li::marker { font-weight: 800; color: var(--faint); }
.intro-stars { color: var(--muted); font-size: 14px; }
.intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* --- an exhibition --- */
.ex-head { text-align: center; max-width: 640px; margin: 0 auto 34px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ex-title { font: 600 clamp(26px, 5.4vw, 40px)/1.12 var(--serif); text-wrap: balance; }
/* the title's plaque: plain for now ([data-level] is there for a design of each level's own); light in both themes */
.title-plaque {
  --accent: #7b1e3a; --forgery: #b0261c; --line-strong: #a8977a;
  position: relative; max-width: 100%; margin: 2px 0 4px; padding: 14px 30px 16px; border-radius: 2px; background: var(--plaque); color: var(--plaque-ink);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 15, .35), inset 0 0 0 5px var(--plaque), inset 0 0 0 6px rgba(60, 40, 15, .18),
    0 1px 2px rgba(40, 25, 5, .25), 0 8px 18px -10px rgba(40, 25, 5, .45);
}
.title-plaque::before { /* (its four screws) */
  --screw: radial-gradient(circle, rgba(60, 40, 15, .55) 0 1.6px, transparent 2.2px);
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  background: var(--screw) 0 0 / 6px 6px no-repeat, var(--screw) 100% 0 / 6px 6px no-repeat, var(--screw) 0 100% / 6px 6px no-repeat, var(--screw) 100% 100% / 6px 6px no-repeat;
}
/* the job: what to find, in red, by a small shredder */
.ex-note { font: italic 15px/1.4 var(--serif); color: var(--muted); }
.neg { color: var(--forgery); font-weight: 700; }
.ex-task {
  display: flex; align-items: center; gap: 11px; max-width: 520px; margin: 8px 0 2px; padding: 9px 18px 10px 11px; text-align: left;
  border: 2px solid var(--forgery); border-radius: 3px; background: color-mix(in srgb, var(--forgery) 8%, var(--card)); box-shadow: var(--card-shadow);
}
.ex-task-icon { flex: none; width: 34px; height: 34px; color: var(--forgery); }
.ex-task-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ex-task p { display: flex; flex-direction: column; gap: 2px; }
.ex-task-kicker { font: 900 16px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--forgery); }
.ex-task-text { font: 600 13.5px/1.35 var(--sans); color: var(--muted); }
.ex-stakes { font-size: 12.5px; color: var(--faint); font-weight: 700; }
.ex-stakes b { color: var(--muted); }
.exhibition.enter .ex-head, .exhibition.enter .piece { animation: rise .5s both cubic-bezier(.2, .7, .2, 1); }
.exhibition.enter .piece { animation-delay: calc(80ms + var(--d) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 26px; isolation: isolate; }
.wall.n3 { --w: 210px; }
.wall.n4 { --w: 196px; }
.wall.n5 { --w: 178px; }
.wall.n6 { --w: 152px; }
.piece { position: relative; flex: 0 1 var(--w); min-width: 0; container-type: inline-size; display: flex; flex-direction: column; }
.piece { position: relative; flex: 0 1 var(--w); min-width: 0; container-type: inline-size; display: flex; flex-direction: column; }

/* the frame: a plain moulding (one flat gilt, a dark edge outside, a light bevel line just in from it, a dark lip
   against the canvas) and a soft shadow on the wall */
.frame {
  position: relative; display: block; padding: 5.5%; border-radius: 2px; background: var(--frame);
  box-shadow: inset 0 0 0 1px var(--frame-edge), inset 0 0 0 2.5px rgba(255, 236, 190, .3), 0 1px 2px rgba(40, 25, 5, .25), 0 8px 16px -8px rgba(40, 25, 5, .45);
}
/* the canvas: the item on a plain field in the middle, with the proportions of a word-game tile (15:8) so names short
   and long fit, and art only in the strips above and below (3:8:3 of its height). (It clips its art; the reveal's
   ribbon and verdict hang over the frame's edges.) */
.canvas {
  position: relative; display: grid; grid-template-rows: 3fr 8fr 3fr; aspect-ratio: 15 / 14; overflow: hidden;
  background: var(--tile); box-shadow: 0 0 0 1px var(--frame-edge); container-type: inline-size;
}
.canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.field {
  grid-row: 2; position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em;
  padding: 0 7%; background: var(--tile); color: var(--tile-ink); text-align: center; box-shadow: 0 -1px 0 var(--tile-edge), 0 1px 0 var(--tile-edge);
}
.label { font: 800 clamp(11px, 11cqi, 22px)/1.1 var(--sans); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.field.long .label { font-size: clamp(9px, 9.5cqi, 19px); }
.field.xlong .label { font-size: clamp(9px, 8.5cqi, 17px); }
.kicker { font: 700 clamp(8.5px, 6cqi, 12px)/1 var(--sans); letter-spacing: .1em; color: var(--muted); }
.picture .field { padding: 0; }
.picture .field svg { display: block; width: 100%; height: 100%; }
/* a card still face down */
.covered { background: repeating-linear-gradient(45deg, var(--tile-edge) 0 1.5px, transparent 1.5px 7px), var(--tile); }
.covered .field { font: 800 clamp(18px, 24cqi, 40px)/1 var(--sans); color: var(--faint); }

/* on the board the framed card is the button: press it (or drag it) to send it to the shredder, or back */
button.frame { width: 100%; margin: 0; border: none; font: inherit; color: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
button.frame:active:not(:disabled) { transform: scale(.985); }
button.frame:disabled { cursor: default; }
button.frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  button.frame:hover:not(:disabled) { transform: translateY(-3px); }
}
/* a card that went through the shredder: its frame is gone (a line is left where it hung) and the picture is in nine
   strips, their ends uneven. Each cut is a thin dark line and a gap in the wall's colour; the cut-off ends are in the
   wall's colour too. They are painted over the art (.canvas::before, which leaves the field out) and on the field
   itself, under its text, so a name is never cut through. A picture has no text: its cuts go right across. (The
   cuts' layer is one gap wider than the canvas: no cut down its edge.) */
.shredded .frame { background: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.shredded .canvas {
  --gap: 3px; --shade: color-mix(in srgb, var(--wall) 55%, #1a1208);
  --cuts: repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - var(--gap)), var(--shade) calc(100% / 9 - var(--gap)) calc(100% / 9 - var(--gap) + 1px), var(--wall) calc(100% / 9 - var(--gap) + 1px) calc(100% / 9));
  box-shadow: none;
}
.shredded .canvas::before {
  --end: linear-gradient(var(--wall), var(--wall));
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    var(--end) 0 0 / 11.4% 3.5% no-repeat, var(--end) 37.5% 0 / 11.4% 6% no-repeat, var(--end) 75% 0 / 11.4% 2.5% no-repeat, var(--end) 100% 0 / 11.4% 5% no-repeat,
    var(--end) 12.5% 100% / 11.4% 5.5% no-repeat, var(--end) 50% 100% / 11.4% 3% no-repeat, var(--end) 62.5% 100% / 11.4% 6.5% no-repeat, var(--end) 87.5% 100% / 11.4% 4% no-repeat,
    var(--cuts) 0 0 / calc(100% + var(--gap)) 100% no-repeat;
  -webkit-mask-image: linear-gradient(#000 0 21.43%, transparent 21.43% 78.57%, #000 78.57%); mask-image: linear-gradient(#000 0 21.43%, transparent 21.43% 78.57%, #000 78.57%);
}
.shredded .canvas.picture::before { -webkit-mask-image: none; mask-image: none; }
.shredded .canvas:not(.picture) .field { background-image: var(--cuts); background-size: calc(100% + var(--gap)) 100%; background-repeat: no-repeat; box-shadow: none; }
.shredded .canvas > svg { filter: saturate(.7) brightness(.9); }
b.say-fake { color: var(--forgery); }


/* the plaque under a flag: its country, once revealed (until then it keeps its place, unseen) */
.plaque {
  align-self: center; max-width: 100%; margin-top: 12px; padding: 5px 11px 6px; border-radius: 2px; background: var(--plaque); color: var(--plaque-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 3px rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25;
}
.piece:not(.revealed) .plaque { visibility: hidden; }
.plaque-title { font: 600 13px/1.3 var(--serif); }
/* the briefing: the cards face down, as many as there are; a compact row, so Start stays in view */
.brief .piece { pointer-events: none; }
.brief .wall { flex-wrap: nowrap; gap: 12px; margin-top: 4px; }
.brief .wall .piece { flex: 0 0 auto; width: 96px; }
.brief-clock { font-size: 13.5px; color: var(--muted); max-width: 440px; }
.brief-clock b { color: var(--gold-text); }

/* --- a category partly hidden: a cell per letter, the hidden ones blank until they come back --- */
.ex-title.masked { text-transform: uppercase; letter-spacing: .02em; font-size: clamp(22px, 4.8vw, 34px); line-height: 1.35; }
.ex-title.masked .word { display: inline-block; margin: 0 .1em; white-space: nowrap; }
.cell.blank { display: inline-block; min-width: .62em; margin: 0 .04em; text-align: center; border-bottom: .09em solid var(--line-strong); color: var(--accent); }
.cell.blank:empty::before { content: '\00a0'; }
.cell.back { animation: letter-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.ex-title.masked .word.done .cell.blank { display: inline; min-width: 0; margin: 0; border-bottom: 0; color: inherit; } /* (a whole word: plain text again) */
@keyframes letter-in { from { opacity: 0; transform: translateY(-.35em) scale(1.4); } }
.veil-note { font-size: 13px; color: var(--faint); font-weight: 700; }

/* --- the board: the items on the gallery wall, and under it the Fakes, standing in the slot of their shredder --- */
.board { flex: 1 0 auto; display: flex; flex-direction: column; }
.board .ex-head { margin-bottom: 16px; }
.board-zones { width: 100%; max-width: 980px; margin: 0 auto; }
.zone { position: relative; min-width: 0; }
.zone.lifting { z-index: 15; } /* (a card dragged out of it passes over the other one; still under the score bar, 20) */
.board-hint { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.zone-label { margin: 0; text-align: center; font: 900 15px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.zone-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; }
.zone-items.n3 { --w: 176px; }
.zone-items.n4 { --w: 164px; }
.zone-items.n5, .zone-items.n6 { --w: 152px; }
.zone-empty { padding: 10px 8px; text-align: center; color: var(--muted); font: italic 15px/1.4 var(--serif); }
.board .piece { flex: 0 0 var(--w); width: var(--w); transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.board.enter .piece .frame { animation: rise .45s both cubic-bezier(.2, .7, .2, 1); animation-delay: calc(60ms + var(--d) * 60ms); }
.board button.frame { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.board .piece.dragging { z-index: 30; transition: none; }
.board .piece.dragging button.frame { cursor: grabbing; transform: scale(1.06) rotate(-2deg); box-shadow: inset 0 0 0 1px var(--frame-edge), 0 20px 34px -12px rgba(0, 0, 0, .45); }

/* the wall: painted plaster under three spotlights, a picture rail, a skirting board, the title's plaque hung on it.
   (No outline of its own; it lights up at the edge only while a card is dragged back over it.) */
.zone-real {
  min-height: 240px; padding: 32px 14px 42px; border-radius: 2px; text-align: center; transition: box-shadow .15s;
  background:
    radial-gradient(30% 75% at 18% 0, var(--gallery-spot), transparent 72%),
    radial-gradient(30% 75% at 50% 0, var(--gallery-spot), transparent 72%),
    radial-gradient(30% 75% at 82% 0, var(--gallery-spot), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--gallery), color-mix(in srgb, var(--gallery) 86%, #000));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .07), var(--card-shadow);
}
.zone-real::before { /* (the picture rail) */
  content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 5px;
  background: linear-gradient(color-mix(in srgb, var(--rail) 60%, #fff), var(--rail)); box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
}
.zone-real::after { /* (the skirting board) */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: linear-gradient(color-mix(in srgb, var(--skirting) 55%, #fff) 0 2px, var(--skirting) 2px); box-shadow: 0 -1px 3px rgba(0, 0, 0, .12);
}
.zone-real.over { box-shadow: inset 0 0 40px rgba(0, 0, 0, .07), var(--card-shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.zone-real .title-plaque { position: relative; width: fit-content; margin: 0 auto 4px; }
.zone-real .ex-note { margin: 2px 0 6px; }
/* what holds cards has a dashed outline, of long dashes (.dash: an SVG rectangle, so its corners stay round): on the
   wall, the place the cards hang in; under it, the Fakes */
.dash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dash svg { position: absolute; left: 1.5px; top: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); overflow: visible; }
.dash rect { fill: none; stroke: var(--dash, var(--line-strong)); stroke-width: 3; stroke-dasharray: 24 12; stroke-linecap: round; }
.wall-box { --dash: color-mix(in srgb, var(--ink) 38%, var(--gallery)); position: relative; width: min(100%, 860px); margin: 12px auto 0; padding: 16px 14px; }
.zone-real.over .wall-box .dash rect { stroke-dasharray: none; }

/* the Fakes: a container under the wall, as wide as the wall's own, but only an outline: red dashes, round at the top
   and open at the foot, where it runs off the page (the demo note makes way). No wall, no light, smaller cards (--w).
   The shredder stands in it, at the bottom. Where the window is tall enough it stays at the window's foot, so the
   shredder's button is always at hand (its ground is the page's, so nothing shows through from behind). */
body.bin-foot { display: flex; flex-direction: column; overflow-x: clip; }
body.bin-foot main { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
body.bin-foot .demo-note { display: none; }
.zone-fake {
  --w: 112px; --dash: var(--forgery);
  flex: 1 0 auto; display: flex; flex-direction: column; width: min(100%, 860px); margin: 20px auto 0; padding: 13px 16px 0;
  border-radius: 28px 28px 0 0; background: var(--wall); transition: background .15s;
}
.zone-fake > .dash svg { height: calc(100% + 80px); } /* (no foot: the dashes run on below it) */
@media (min-height: 560px) {
  .zone-fake { position: sticky; bottom: 0; z-index: 10; }
}
.zone-fake.over { background: color-mix(in srgb, var(--forgery) 10%, var(--wall)); }
.zone-fake.over > .dash rect { stroke-dasharray: none; }
.zone-fake .zone-label { margin-bottom: 9px; color: var(--forgery); font-size: 13px; letter-spacing: .2em; }
.zone-fake .zone-items { gap: 12px; }
.zone-fake .canvas > svg { filter: saturate(.75) brightness(.92); }
/* (empty, they're as tall as with a row of cards: the first card moves nothing) */
.zone-fake .zone-empty { min-height: calc(var(--w) * .94); padding: 0 8px; display: flex; align-items: center; justify-content: center; }
/* the shredder: its head, a dark machine with the inlet along the top, its button in the middle and a lamp that's
   green when it can run; under the head its glass body, cut off by the foot of the window, where the strips land */
.shredder {
  position: relative; z-index: 2; flex: none; align-self: center; width: min(100%, 420px); margin-top: 10px; padding: 15px 16px 11px;
  display: flex; justify-content: center; align-items: center; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(var(--machine-lit), var(--machine)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 8px rgba(0, 0, 0, .3);
}
.shredder::before { /* (the inlet) */
  content: ''; position: absolute; left: 12px; right: 12px; top: 4px; height: 5px; border-radius: 3px; background: #0c0a09;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .13);
}
.shredder-name { position: absolute; left: 16px; top: 50%; transform: translateY(-40%); color: rgba(255, 255, 255, .5); font: 800 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.shredder-led { position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -2px; border-radius: 50%; background: #6a625b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); transition: background .2s, box-shadow .2s; }
.zone-fake.ready .shredder-led { background: #5fd083; box-shadow: 0 0 8px #5fd083; }
.zone-fake.shredding .shredder-led { background: #ff6a55; box-shadow: 0 0 8px #ff6a55; }
.shredder .btn { min-width: 168px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.shredder .btn:disabled { opacity: 1; background: #5a524c; border-color: #5a524c; color: #b5aa9e; box-shadow: none; }
.zone-fake.shredding .shredder { animation: shred-shake .09s linear infinite; }
@keyframes shred-shake { 50% { transform: translate(1px, .5px); } }
.shredder-tray { /* (the glass: a cool tint, streaks of light across it, the head's shadow at the top) */
  position: relative; flex: 1 0 36px; align-self: center; width: min(calc(100% - 18px), 402px); margin-top: -3px; overflow: hidden;
  border: solid var(--glass-edge); border-width: 0 2px; padding-bottom: env(safe-area-inset-bottom, 0);
  background:
    linear-gradient(104deg, transparent 0 5%, var(--glass-shine) 5% 8.5%, transparent 8.5% 12%, var(--glass-shine) 12% 13.5%, transparent 13.5% 74%, var(--glass-glint) 74% 82%, transparent 82%),
    linear-gradient(rgba(10, 16, 22, .3), rgba(10, 16, 22, 0) 16px),
    var(--glass);
  box-shadow: inset 0 0 0 1px rgba(30, 50, 60, .1), inset 9px 0 12px -8px rgba(255, 255, 255, .5), inset -9px 0 12px -8px rgba(30, 50, 60, .25);
}
/* (a few strips left hanging from last time, of uneven lengths: what says "shredder" before anything is shredded) */
.shredder-tray::before {
  --paper: color-mix(in srgb, var(--tile) 70%, var(--forgery));
  content: ''; position: absolute; left: 50%; top: 0; width: min(46%, 240px); height: 34px; transform: translateX(-50%); opacity: .8;
  background:
    repeating-linear-gradient(90deg, var(--paper) 0 6px, transparent 6px 23px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, var(--paper) 8px 14px, transparent 14px 31px) 0 0 / 100% 62% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 15px, var(--paper) 15px 21px, transparent 21px 37px) 0 0 / 100% 36% no-repeat;
}
.zone-fake.shredding .shredder-tray::before { display: none; }
.strips { position: absolute; top: 0; display: flex; align-items: flex-start; gap: 2px; }
.strips i {
  flex: 1; height: 100%; transform-origin: 50% 0; rotate: var(--turn); animation: strip-out .78s cubic-bezier(.45, 0, .9, .7) both;
  background: linear-gradient(var(--c) 0 21%, var(--tile) 21% 79%, var(--c) 79%);
}
@keyframes strip-out { from { transform: translateY(-102%); } to { transform: translateY(var(--stop)); } }

/* the practice round: the coach's line, by what's in the shredder */
.coach {
  max-width: 520px; margin-top: 4px; padding: 10px 18px 11px; border: 2px solid var(--line-strong); border-radius: 3px; background: var(--card);
  box-shadow: var(--card-shadow); font-size: 16px; line-height: 1.4; text-wrap: pretty; transition: border-color .2s;
}
.coach.wrong { border-color: var(--forgery); }
.coach.wrong b { color: var(--forgery); }
.coach.right { border-color: var(--right); }
.coach.right b { color: var(--right); }
.grace form { text-align: center; gap: 12px; }
.grace p { font-size: 16px; text-wrap: pretty; }
.grace .grace-note { font-size: 14px; color: var(--muted); }
.grace .help-actions { justify-content: center; }

/* the reveal: every piece gets its verdict, wrong calls as loudly as right ones */
.verdict {
  position: absolute; z-index: 3; bottom: -10px; right: -10px; width: 28px; height: 28px; border-radius: 2px; display: grid; place-items: center;
  font: 900 16px/1 var(--sans); color: #fff; box-shadow: 0 0 0 2px var(--wall), 0 3px 8px rgba(0, 0, 0, .35);
}
.right .verdict { background: var(--right); }
.wrong .verdict { background: var(--forgery); }
.ribbon { /* (across the top of the frame, like a tag hung on it) */
  position: absolute; z-index: 2; left: 5%; right: 5%; top: 0; transform: translateY(-38%); padding: .4em .5em .45em; border-radius: 3px; display: flex; flex-direction: column; align-items: center;
  color: #fff; text-align: center; line-height: 1.15; font: 700 clamp(10.5px, 6.6cqi, 14px)/1.15 var(--sans); box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.ribbon b { font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 1.12em; }
.right .ribbon { background: color-mix(in srgb, #1c6a54 92%, transparent); }
.wrong .ribbon { background: color-mix(in srgb, #b0261c 94%, transparent); }
.wrong .canvas::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(176, 38, 28, .22) 0 6px, transparent 6px 14px); }
.piece.flip .frame { animation: appraise .5s cubic-bezier(.3, 1.4, .5, 1); }
.piece.flip .verdict { animation: rise .35s both; }
.piece.flip .ribbon { animation: drop .4s both cubic-bezier(.3, 1.4, .5, 1); }
@keyframes drop { from { opacity: 0; transform: translateY(-110%); } }
@keyframes appraise { 40% { transform: scale(1.04); } }

.provenance {
  margin-top: 14px; padding: 8px 10px 9px; border-radius: 3px; background: var(--card); box-shadow: var(--card-shadow);
  border-left: 3px solid var(--right); font-size: 13px; line-height: 1.4; animation: rise .35s both;
}
.wrong .provenance { border-left-color: var(--forgery); }
.prov-head { display: flex; align-items: baseline; gap: 6px; font-weight: 800; }
.prov-mark { color: var(--right); }
.wrong .prov-mark { color: var(--forgery); }
.prov-pts { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.right .prov-pts { color: var(--gold-text); }
.prov-why { color: var(--muted); margin-top: 3px; text-wrap: pretty; }

/* --- the foot of an exhibition: submit, then the result --- */
.ex-foot { margin: 34px auto 0; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.foot-status { color: var(--muted); font: italic 15px/1.4 var(--serif); min-height: 1.4em; }
.foot-status.ready { color: var(--ink); }
.foot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* the round's result: a little sum (right answers, Perfect!, × the time bonus), then the total */
.result-card {
  width: min(340px, 100%); padding: 14px 20px 12px; border-radius: 3px; background: var(--card); box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 4px; text-align: left; animation: rise .4s both;
}
.tally { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.tally-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14.5px; }
.tally-row dt { color: var(--muted); }
.tally-row dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tally-row.perfect dt {
  font: 900 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #a87a22, #e9c46a, #b4852a, #f3dc9a, #a87a22); background-size: 200% 100%; animation: shimmer 2.4s linear infinite;
}
.tally-row.perfect dd, .tally-row.fast dt, .tally-row.fast dd { color: var(--gold-text); }
.tally-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 8px; border-top: 1.5px solid var(--line); font: 600 17px/1.2 var(--serif); }
.tally-total b { font: 700 22px/1 var(--serif); font-variant-numeric: tabular-nums; }
.result-card.flawless { box-shadow: 0 0 0 1.5px #d2a94c, var(--card-shadow); }
.result-sub { margin-top: 2px; font-size: 13px; color: var(--faint); text-align: center; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- closing time --- */
.closing { max-width: 600px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.closing-score { font: 700 clamp(52px, 13vw, 84px)/1 var(--serif); font-variant-numeric: tabular-nums; margin-top: 6px; }
.closing-of { font-size: .3em; color: var(--faint); font-weight: 600; }
.closing-stars { font-size: 34px; letter-spacing: .14em; margin-right: -.14em; color: var(--gold-text); line-height: 1.1; }
.closing-next { color: var(--muted); font-size: 14px; }
.ledger { list-style: none; width: 100%; margin: 14px 0 6px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.ledger-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 4px 12px; padding: 6px 2px; font-size: 14px; }
.ledger-row + .ledger-row { border-top: 1px dashed var(--line); }
.ledger-no { font: 800 11px/1 var(--sans); color: var(--faint); letter-spacing: .04em; }
.ledger-title { min-width: 0; font-family: var(--serif); }
.ledger-key { margin: -2px 0 6px; font-size: 12px; color: var(--faint); }
.ledger-dots { display: flex; gap: 3px; }
.dot { width: 9px; height: 9px; border-radius: 2px; }
.dot.right { background: var(--right); }
.dot.wrong { background: var(--forgery); }
.ledger-pts { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; text-align: right; min-width: 88px; }
.share { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.share-text { margin: 0; padding: 12px 18px; border-radius: 3px; background: var(--card); box-shadow: var(--card-shadow); font: 14px/1.45 var(--sans); white-space: pre; text-align: left; }
.countdown { color: var(--faint); font-size: 13px; margin-top: 6px; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

/* --- silver: a game from the archive (gold is the day itself) --- */
.stars { color: var(--gold-text); letter-spacing: .06em; white-space: nowrap; }
.stars.silver, .closing-stars.silver, .closing-wreath.silver { color: var(--silver); filter: none; }
.closing-note { max-width: 440px; font-size: 13.5px; color: var(--muted); text-wrap: pretty; }
a.btn { text-decoration: none; }
.btn.danger { color: var(--forgery); }

/* --- the archive and the history --- */
.page { max-width: 760px; margin: 4px auto 0; display: flex; flex-direction: column; gap: 10px; }
.page-title { font: 600 clamp(26px, 5.6vw, 38px)/1.15 var(--serif); text-wrap: balance; }
.page-lede { font-size: 15.5px; color: var(--muted); }
.page-lede a, .account a:not(.btn) { color: var(--accent); }
.page-h2 { margin-top: 14px; font: 800 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.day-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.day-tile {
  height: 100%; padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 1px; border: 1.5px solid var(--line); border-radius: 3px;
  background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .08s;
}
.day-tile:hover { border-color: var(--muted); transform: translateY(-1px); }
.day-tile.today { border-color: var(--gold-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-text) 22%, transparent); }
.day-no { font: 800 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.day-date { font: 600 16px/1.25 var(--serif); }
.day-tile .stars { margin-top: 4px; font-size: 15px; }
.day-score { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-play { margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0; }
.stat { padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 3px; background: var(--card); box-shadow: var(--card-shadow); text-align: center; }
.stat b { font: 700 22px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.account { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; border: 1.5px solid var(--line); border-radius: 3px; font-size: 14.5px; }
.account-fine { font-size: 13px; color: var(--muted); }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.games { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line); }
.game-row { display: grid; grid-template-columns: 62px 1fr auto 130px auto; align-items: center; gap: 4px 12px; padding: 8px 2px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.game-no { font: 800 11px/1 var(--sans); letter-spacing: .04em; color: var(--faint); }
.game-date { font-family: var(--serif); }
.game-score { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.game-open { color: var(--accent); font-weight: 800; font-size: 13px; }

/* --- how to play --- */
.help {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: none; border-radius: 3px;
  background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .35);
}
.help::backdrop { background: rgba(20, 14, 8, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.help form { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.help h2 { font: 600 26px/1.2 var(--serif); }
.help h3 { font: 800 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.help-lede { color: var(--muted); }
.help-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; }
.help-table { border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; width: 100%; }
.help-table th, .help-table td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.help-table th:first-child, .help-table td:first-child { text-align: left; }
.help-table th { font-size: 11.5px; color: var(--faint); font-weight: 800; }
.help-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0)); z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 3px; background: #1f1a14; color: #f3dc9a; font: 800 14px/1.3 var(--sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: opacity .25s, transform .25s; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.demo-note { max-width: 560px; margin: 0 auto; padding: 8px 16px 26px; text-align: center; font-size: 12px; color: var(--faint); }
.demo-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* --- phones --- */
@media (max-width: 560px) {
  .wall { gap: 26px 14px; }
  .wall.n3, .wall.n4, .wall.n5, .wall.n6 { --w: calc(50% - 7px); }
  .verdict { width: 26px; height: 26px; font-size: 14px; bottom: -8px; right: -6px; }
  .meter-bar { padding: 10px 16px 19px; }
  .ledger-row { grid-template-columns: 24px 1fr auto; }
  .ledger-pts { grid-column: 2 / -1; text-align: left; min-width: 0; font-size: 12px; margin-top: -2px; }
  .ledger-dots { grid-column: 3; grid-row: 1; }
  .help form { padding: 18px 16px 16px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .game-row { grid-template-columns: 54px 1fr auto; }
  .game-score { grid-column: 2; text-align: left; font-size: 12.5px; }
  .game-open { grid-column: 3; grid-row: 1 / span 2; }
  .perfect-mark { width: 30px; }
  .brief .wall { gap: 8px; }
  .brief .wall .piece { width: min(64px, calc((100% - 40px) / 6)); }
  /* (three to a row on the wall, four in the shredder) */
  .zone-items { gap: 12px 10px; }
  .zone-real .zone-items { --w: calc((100% - 20px) / 3); }
  .board .ex-head { margin-bottom: 10px; }
  .zone-real { min-height: 0; padding: 28px 6px 30px; }
  .zone-real::after { height: 16px; }
  /* (--w in vw, not %, so the empty Fakes can be as tall as a card: the page's margins, theirs, three gaps) */
  .wall-box { margin-top: 10px; padding: 13px 10px; }
  .zone-real { padding-bottom: 26px; }
  /* (--w in vw, not %, so the empty Fakes can be as tall as a card: the page's margins, theirs, three gaps) */
  .zone-fake { --w: calc((100vw - 84px) / 4); margin-top: 14px; padding: 10px 11px 0; }
  .zone-fake .zone-items { gap: 10px; }
  .zone-fake .zone-label { margin-bottom: 7px; }
  .shredder { margin-top: 8px; padding: 13px 14px 9px; }
  .shredder-tray { flex-basis: 26px; }
  .dash rect { stroke-dasharray: 18 10; }
  .shredder-name { display: none; }
  .title-plaque { padding: 12px 20px 14px; }
}

/* (narrow phones: the pill keeps just the clock, so the score row stays on one line; its aria-label says what it is) */
@media (max-width: 379px) { .timer-label { display: none; } }

/* (short phones: the row of round numbers goes, so a round's screens fit) */
@media (max-height: 620px) { .rooms { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}