/* ============================================================
   DINOBID — see DESIGN.md for the system this implements.
   1. Tokens
   ============================================================ */
:root{
  /* --- surface --- */
  --sand:       #E4CFA0;   /* day background */
  --dune:       #C9A66B;   /* mid ground, shadows, secondary fills */
  --paper:      #F6ECD9;   /* card surface */
  --ink:        #2B1B14;   /* text, borders, sprites */
  --dusk:       #241812;   /* night background */
  --dusk-line:  #4A3A31;   /* rules and keylines on dusk */

  /* --- rust: primary action + dino accent + rank --- */
  --rust:       #B8481F;   /* fills, large numerals, the dinosaur */
  --rust-deep:  #AB431D;   /* button fill: paper text clears 5.0:1 */
  --rust-ink:   #993C1A;   /* rust as small text on paper/sand */
  --rust-glow:  #DB592A;   /* rust as text on dusk */

  /* --- sage: cactus, live, verified --- */
  --sage:       #6E7D54;
  --sage-deep:  #5D6947;
  --sage-ink:   #535E40;   /* sage as small text on paper/sand */
  --sage-glow:  #79895C;   /* sage as text on dusk */

  /* --- derived neutrals --- */
  --dune-ink:   #705529;   /* muted text on paper/sand — 5.9:1 / 4.6:1 */
  --paper-dim:  #C9B89A;   /* muted text on dusk */
  --line:       var(--ink);

  /* --- type --- */
  /* Same pairing as the reference: VT323 carries text and numbers,
     Press Start 2P is the pixel display face. Both single-weight. */
  --ff-ui:   "VT323", ui-monospace, "Courier New", monospace;
  --ff-data: "VT323", ui-monospace, "Courier New", monospace;
  --ff-bit:  "Press Start 2P", "VT323", ui-monospace, monospace;

  --fs-display: 1.5rem;      /* Press Start 2P — wide, so it stays modest */
  --fs-h2:      1rem;        /* Press Start 2P */
  --fs-h3:      0.875rem;    /* Press Start 2P */
  --fs-body:    1.1875rem;   /* VT323 reads ~0.8x its em */
  --fs-sm:      1.0625rem;
  --fs-label:   0.9375rem;
  --fs-data:    1.125rem;

  /* --- space --- */
  --s-xs: 4px;  --s-sm: 8px;  --s-md: 12px;
  --s-lg: 20px; --s-xl: 32px; --s-section: 44px;

  --header-h: 52px;
  --shell: 1280px;

  /* pixel-border thickness */
  --px: 4px;

  /* z-scale — semantic */
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 400;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 160ms;
}

/* ============================================================
   2. Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--ff-ui);
  font-size:var(--fs-body);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0}
img,canvas{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
::selection{background:var(--rust);color:var(--paper)}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--s-lg)}
@media (max-width:600px){.shell{padding-inline:var(--s-md)}}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--s-md);top:-100px;z-index:var(--z-modal);
  background:var(--ink);color:var(--paper);padding:12px 16px;
  font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;transition:top var(--dur) var(--ease)}
.skip:focus{top:var(--s-md)}

.label{font-family:var(--ff-data);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dune-ink)}
.data{font-family:var(--ff-data);font-variant-numeric:tabular-nums;font-weight:500}

/* ============================================================
   3. PIXEL BORDERS
   Four offset copies of the box draw the edges; the corners stay
   empty, which is what makes the outline read as pixel art rather
   than a rounded card. No blur anywhere.
   ============================================================ */
.pxl, .pxl-2{
  position:relative;
  border:0;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px)            0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),
    var(--px)            0 0 0 var(--ink);
}
/* raised: the same outline plus a hard offset block beneath */
.pxl-raise{
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px)            0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),
    var(--px)            0 0 0 var(--ink),
    var(--px) var(--px)    0 0 var(--ink);
}
/* thin variant for dense furniture (chips, fields, small controls) */
.pxl-2{ --px:2px; }
/* on dusk the ink outline disappears, so the edge switches to sand */
.pxl-night{
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--sand),
    0 var(--px)            0 0 var(--sand),
    calc(var(--px) * -1) 0 0 0 var(--sand),
    var(--px)            0 0 0 var(--sand);
}
/* pixel boxes need room for the outline to sit in */
.pxl, .pxl-2, .pxl-raise, .pxl-night{ margin:var(--px) }

/* ============================================================
   4. Controls
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-sm);
  min-height:38px;padding:0 16px;cursor:pointer;
  font-family:var(--ff-data);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  background:var(--paper);color:var(--ink);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn--primary{background:var(--rust-deep);color:var(--paper)}
.btn--primary:hover{background:var(--rust-ink)}
.btn--ghost{background:var(--paper)}
.btn--ghost:hover{background:var(--dune)}
/* pressing pushes the box into its own offset shadow */
.btn.pxl-raise:active{transform:translate(var(--px),var(--px));
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn--lg{min-height:46px;padding:0 22px;font-size:var(--fs-data)}

.field{
  min-height:46px;width:100%;padding:0 14px;
  background:var(--paper);color:var(--ink);border:0;
  font-family:var(--ff-data);font-size:var(--fs-data);
}
.field::placeholder{color:var(--dune-ink);opacity:1}
.field:focus{outline:3px solid var(--rust);outline-offset:0}
.field[aria-invalid="true"]{background:#F3DCCF}

/* ============================================================
   5. Header — compact, sits on dune so paper boxes read against it
   ============================================================ */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:var(--dune);
  border-bottom:var(--px) solid var(--ink)}
.hdr__in{min-height:var(--header-h);display:flex;align-items:center;gap:var(--s-lg)}

.brand{display:flex;align-items:center;gap:var(--s-sm);text-decoration:none;flex-shrink:0}
/* Same reason as the stage: the mark keeps its baked-in background. */
.brand canvas{width:44px;height:47px;image-rendering:pixelated;background:#F7F7F7}
.brand__name{font-family:var(--ff-bit);font-size:.8125rem;letter-spacing:.02em;
  line-height:1.3;color:var(--ink)}

.nav{display:flex;align-items:center;gap:var(--s-xs);margin-right:auto}
.nav a{padding:7px 11px;text-decoration:none;font-family:var(--ff-data);
  font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);transition:background-color var(--dur) var(--ease)}
.nav a:hover{background:var(--sand)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--sand)}

.hdr__right{display:flex;align-items:center;gap:var(--s-md);flex-shrink:0}
.live{display:flex;align-items:center;gap:7px;font-family:var(--ff-data);
  font-size:var(--fs-label);letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.live__dot{width:8px;height:8px;background:var(--sage-deep);flex-shrink:0}
.burger{display:none;width:40px;height:38px;align-items:center;justify-content:center;
  background:var(--paper);cursor:pointer}
.burger span{display:block;width:18px;height:3px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:3px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

.drawer{border:0;padding:0;max-width:none;width:100%;margin:0 0 0 auto;height:100%;
  max-height:none;background:var(--sand);color:var(--ink)}
.drawer::backdrop{background:rgba(36,24,18,.8)}
.drawer__in{padding:var(--s-lg);display:flex;flex-direction:column;gap:var(--s-md);height:100%}
.drawer a{padding:16px;background:var(--paper);text-decoration:none;
  font-family:var(--ff-data);font-size:var(--fs-data);letter-spacing:.06em;text-transform:uppercase}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-sm)}

@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__in{gap:var(--s-md);justify-content:space-between}
  .brand{margin-right:auto}
}
@media (max-width:600px){
  :root{--header-h:48px}
  .live{display:none}
  .brand__name{font-size:.8125rem}
}

/* ============================================================
   6. Champion strip — the night surface, one line
   ============================================================ */
.champ{background:var(--dusk);color:var(--paper);border-bottom:var(--px) solid var(--ink)}
.champ__in{min-height:58px;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--s-sm) var(--s-md);padding-block:var(--s-sm)}
.champ canvas.crown{width:22px;height:17px;flex-shrink:0}
.champ__tag{font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--rust-glow);white-space:nowrap}
.champ__link{display:inline-flex;align-items:center;gap:7px;color:var(--paper);
  font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 var(--paper-dim);
  transition:box-shadow var(--dur) var(--ease)}
.champ__link:hover{box-shadow:inset 0 -2px 0 var(--paper)}
.champ__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-sm) var(--s-md);
  margin-left:auto;font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.06em;color:var(--paper-dim)}
.champ__meta b{color:var(--paper);font-weight:500}
.champ__sep{color:var(--paper-dim);opacity:.5}
.champ :focus-visible{outline-color:var(--rust-glow)}
@media (max-width:780px){ .champ__meta{margin-left:0;width:100%} }

/* ============================================================
   7. Page head + entry
   ============================================================ */
.page{padding-block:var(--s-xl) var(--s-section)}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-lg);flex-wrap:wrap;margin-bottom:var(--s-lg)}
.pagehead h1{font-family:var(--ff-bit);font-size:var(--fs-display);font-weight:400;
  letter-spacing:0;line-height:1.45;text-wrap:balance}
.pagehead p{color:var(--ink);font-size:var(--fs-sm);max-width:58ch;margin-top:var(--s-sm)}
.reset{display:flex;align-items:baseline;gap:var(--s-sm);white-space:nowrap}
.reset__t{font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:1.75rem;font-weight:400;letter-spacing:0}

.entry{background:var(--paper);padding:var(--s-lg)}
.entry__row{display:flex;gap:var(--s-md)}
.entry__row .field{flex:1;min-width:0}
.entry__hint{margin-top:var(--s-md);font-size:var(--fs-sm);color:var(--dune-ink);max-width:68ch}
.entry__hint b{color:var(--ink);font-weight:600}
.entry__msg{margin-top:var(--s-sm);font-size:var(--fs-sm);display:none;align-items:center;gap:7px}
.entry__msg[data-show]{display:flex}
.entry__msg[data-tone="error"]{color:var(--rust-ink);font-weight:600}
.entry__msg[data-tone="ok"]{color:var(--sage-ink);font-weight:600}
@media (max-width:600px){
  .entry__row{flex-direction:column}
  .entry__row .btn{width:100%}
}

/* ============================================================
   8. Columns
   ============================================================ */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:var(--s-xl);
  align-items:start;margin-top:var(--s-xl)}
@media (max-width:1100px){.cols{grid-template-columns:minmax(0,1fr);gap:var(--s-section)}}

/* ============================================================
   9. The board — the densest thing on the page
   ============================================================ */
.board{background:var(--paper)}
.board__bar{display:flex;align-items:center;gap:var(--s-md);padding:var(--s-md) var(--s-lg);
  background:var(--dune);border-bottom:var(--px) solid var(--ink);flex-wrap:wrap}
.board__bar h2{font-family:var(--ff-bit);font-size:var(--fs-h2);font-weight:400;line-height:1.4}
.board__count{margin-left:auto;font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.filters{display:flex;gap:var(--s-sm)}
.chip{min-height:30px;padding:0 12px;background:var(--paper);cursor:pointer;
  font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chip:hover{background:var(--sand)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--sand)}

table.bd{width:100%;border-collapse:collapse;table-layout:fixed}
table.bd th{font-family:var(--ff-data);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dune-ink);
  text-align:left;padding:var(--s-sm) var(--s-md);
  border-bottom:2px solid var(--ink);white-space:nowrap}
table.bd td{padding:0 var(--s-md);height:52px;vertical-align:middle;
  border-bottom:2px solid var(--dune)}
table.bd tr:last-child td{border-bottom:0}
.bd tbody tr{transition:background-color var(--dur) var(--ease)}
.bd tbody tr:hover{background:var(--sand)}

.c-rank{width:70px;text-align:right}
.c-runs{width:66px;text-align:right}
.c-time{width:88px;text-align:right}
.c-clicks{width:78px;text-align:right}
.c-score{width:118px;text-align:right}

.rank{font-family:var(--ff-data);font-variant-numeric:tabular-nums;font-size:var(--fs-data);
  color:var(--dune-ink);display:inline-flex;align-items:center;gap:7px;
  justify-content:flex-end;width:100%}
.rank--1{color:var(--rust-ink);font-weight:500;font-size:1.125rem}
.rank--top{color:var(--ink);font-weight:500}
.rank canvas{width:15px;height:12px;flex-shrink:0}

.prod{display:flex;align-items:center;gap:var(--s-md);min-width:0}
.prod canvas{width:28px;height:28px;flex-shrink:0;background:var(--sand);
  box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink);
  margin:2px}
.prod__txt{min-width:0}
.prod__name{display:inline-flex;align-items:center;gap:6px;font-weight:600;
  font-size:var(--fs-body);text-decoration:none;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  box-shadow:inset 0 -2px 0 transparent;transition:box-shadow var(--dur) var(--ease)}
.prod__name:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.prod__name svg{flex-shrink:0;opacity:.45}
.prod__meta{display:none;font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.04em;color:var(--dune-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.you{display:inline-flex;align-items:center;height:19px;padding:0 6px;
  background:var(--rust);color:var(--paper);font-family:var(--ff-data);font-size:10px;
  font-weight:500;letter-spacing:.09em;flex-shrink:0}
.verified{color:var(--sage-ink);flex-shrink:0}

.num{font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:var(--fs-data);color:var(--dune-ink)}
.scorecell{text-align:right}
.scorecell .v{display:block;font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:1.3125rem;font-weight:400;color:var(--ink);line-height:1.2}
.scorecell .bar{display:block;height:5px;margin:4px 0 0 auto;background:var(--sage);
  transition:width 240ms var(--ease)}

tr.is-you{background:#F0D9BE}
tr.is-you:hover{background:#EBCFAE}
tr.is-you .rank{color:var(--rust-ink);font-weight:500}

.board__foot{padding:var(--s-md);display:flex;align-items:center;justify-content:center;
  background:var(--dune);border-top:var(--px) solid var(--ink)}
.board__empty{padding:var(--s-xl) var(--s-md);text-align:center;color:var(--dune-ink)}
.sk{height:10px;background-image:repeating-linear-gradient(to right,var(--dune) 0 4px,transparent 4px 8px)}

@media (max-width:780px){
  .c-runs,.c-time{display:none}
  .prod__meta{display:block}
  table.bd td{height:auto;padding-block:var(--s-md)}
  .c-rank{width:48px}
  .c-clicks{width:62px}
  .c-score{width:92px}
  .prod{gap:var(--s-sm)}
}
@media (max-width:430px){
  .c-clicks{display:none}
  .prod__meta .m-t{display:none}
  /* the meta line is the only place clicks appear on a phone, so it must not clip */
  .prod__meta{font-size:10px;letter-spacing:0}
  table.bd td{padding-inline:var(--s-sm)}
}


/* ============================================================
   11. Footer
   ============================================================ */
.ftr{border-top:var(--px) solid var(--ink);background:var(--dune);padding-block:var(--s-lg)}
.ftr__in{display:flex;align-items:center;gap:var(--s-md) var(--s-lg);flex-wrap:wrap;
  font-size:var(--fs-sm);color:var(--ink)}
.ftr a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 transparent}
.ftr a:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.ftr__spacer{margin-left:auto}

/* ============================================================
   12. Game modal — larger stage; the run is the point
   ============================================================ */
dialog.game{
  padding:0;border:0;background:var(--paper);color:var(--ink);
  width:min(1120px, calc(100vw - 32px));
  max-width:none;max-height:calc(100dvh - 32px);
  box-shadow:
    0 -6px 0 0 var(--ink), 0 6px 0 0 var(--ink),
    -6px 0 0 0 var(--ink), 6px 0 0 0 var(--ink);
}
dialog.game::backdrop{background:rgba(36,24,18,.9)}
dialog.game[open]{animation:pop 200ms var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

.g__bar{display:flex;align-items:center;gap:var(--s-md);min-height:52px;
  padding:var(--s-sm) var(--s-md);background:var(--dune);
  border-bottom:var(--px) solid var(--ink)}
.g__title{font-family:var(--ff-bit);font-size:.6875rem;letter-spacing:.04em;color:var(--ink)}
.g__chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;
  background:var(--paper);font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.04em;max-width:min(380px,44vw);overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.g__chip b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.g__chip--none{color:var(--dune-ink)}
.g__x{margin-left:auto;width:36px;height:32px;display:flex;align-items:center;
  justify-content:center;background:var(--paper);cursor:pointer;color:var(--ink)}
.g__x:hover{background:var(--rust);color:var(--paper)}

/* The sprites carry the Chromium page's own background baked into their
   bounding boxes (#f7f7f7 fill, #dadada clouds, #b9b9b9 stars). Painting the
   stage that exact colour is what lets them render untouched — on any other
   ground the baked-in pixels show as a halo. Night is the original's own
   trick: invert the canvas over near-black. */
.g__stage{position:relative;background:#F7F7F7;
  transition:background-color 420ms var(--ease)}
.g__stage[data-night="1"]{background:#080808}
.g__stage canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
/* Night mode inverts the rendered canvas rather than recolouring sprites —
   the same trick the original game uses. Transparent pixels keep their alpha,
   so only the sprite ink flips: #535353 becomes #ACACAC on the dusk ground. */
.g__stage[data-night="1"] canvas{filter:invert(1)}
.g__stage:focus{outline:none}

.g__hud{position:absolute;top:14px;right:18px;display:flex;gap:var(--s-lg);
  font-family:var(--ff-bit);font-size:12px;color:var(--ink);letter-spacing:.05em;
  pointer-events:none}
.g__stage[data-night="1"] .g__hud{color:#F7F7F7}
.g__hud .hi{opacity:.6}

.g__overlay{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s-md);text-align:center;
  padding:var(--s-lg)}
.g__overlay[hidden]{display:none}
.g__big{font-family:var(--ff-bit);font-size:clamp(11px,1.9vw,17px);
  color:var(--rust-ink);letter-spacing:.06em;line-height:1.7}
.g__stage[data-night="1"] .g__big{color:var(--rust-glow)}
.g__sub{font-family:var(--ff-data);font-size:var(--fs-sm);color:var(--ink);max-width:52ch}
.g__stage[data-night="1"] .g__sub{color:var(--paper-dim)}
.g__actions{display:flex;gap:var(--s-md);flex-wrap:wrap;justify-content:center;margin-top:var(--s-xs)}

.g__foot{display:flex;align-items:center;gap:var(--s-md);padding:var(--s-md);
  background:var(--paper);border-top:var(--px) solid var(--ink);flex-wrap:wrap}
.g__keys{display:flex;align-items:center;gap:var(--s-sm);font-family:var(--ff-data);
  font-size:var(--fs-label);letter-spacing:.05em;color:var(--dune-ink);flex-wrap:wrap}
kbd{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;
  background:var(--sand);font-family:var(--ff-data);font-size:11px;color:var(--ink);
  box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),
             2px 0 0 0 var(--ink),2px 2px 0 0 var(--ink);margin:2px 4px}
.g__fair{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.05em;color:var(--sage-ink)}

.g__touch{display:none;gap:var(--s-md);padding:0 var(--s-md) var(--s-md);background:var(--paper)}
.g__touch .btn{flex:1;min-height:58px;font-size:var(--fs-data)}
@media (pointer:coarse){.g__touch{display:flex}}

@media (max-width:780px){
  dialog.game[open]{width:100vw;height:100dvh;max-height:100dvh;
    display:flex;flex-direction:column;box-shadow:none}
  dialog.game[open]{animation:none}
  .g__stage{flex:1;display:flex;flex-direction:column;justify-content:center}
  .g__fair{margin-left:0;width:100%}
  .g__hud{font-size:12px;top:10px;right:12px}
}

/* ============================================================
   13. Reduced motion — decoration only. Game timing is untouched,
   because changing it would change difficulty.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  dialog.game[open]{animation:none}
  .btn.pxl-raise:active{transform:none}
}

/* ============================================================
   14. Rail "more" link
   ============================================================ */
.rail__more{margin-top:var(--s-md);padding-top:var(--s-md);border-top:2px solid var(--dune)}
.rail__more a{font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rust-ink);text-decoration:none;font-weight:500}
.rail__more a:hover{box-shadow:inset 0 -2px 0 var(--rust-ink)}

/* ============================================================
   15. Document pages (Rules) — sticky contents + prose blocks
   ============================================================ */
.cols--doc{grid-template-columns:232px minmax(0,1fr)}
@media (max-width:1000px){.cols--doc{grid-template-columns:minmax(0,1fr);gap:var(--s-xl)}}

.toc{background:var(--paper);padding:var(--s-lg);position:sticky;top:calc(var(--header-h) + 20px)}
.toc ol{margin:0;padding-left:1.3em;counter-reset:none}
.toc li{margin-bottom:9px;font-size:var(--fs-sm)}
.toc a{color:var(--dune-ink);text-decoration:none;box-shadow:inset 0 -2px 0 transparent}
.toc a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
@media (max-width:1000px){.toc{position:static}}

.doc{display:flex;flex-direction:column;gap:var(--s-lg)}
.doc__s{background:var(--paper);padding:var(--s-xl)}
.doc__s h2{font-family:var(--ff-bit);font-size:var(--fs-h2);font-weight:400;letter-spacing:0;
  line-height:1.5;margin-bottom:var(--s-lg);text-wrap:balance}
.doc__s p{margin-bottom:var(--s-md);max-width:60ch;line-height:1.4}
.doc__s p:last-child{margin-bottom:0}
.doc__s b{font-weight:700}
.doc__s ul{margin:0 0 var(--s-md);padding-left:1.2em;max-width:68ch}
.doc__s li{margin-bottom:9px}
.doc__s a{color:var(--rust-ink);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--rust-ink)}
.doc__s a:hover{background:var(--sand)}
.doc__s kbd{margin:0 2px}
.doc__foot{font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.04em;
  color:var(--dune-ink);padding:var(--s-md) var(--s-xs) 0}
@media (max-width:600px){.doc__s{padding:var(--s-lg)}}

/* ============================================================
   16. Records strip (Hall of fame)
   ============================================================ */
.records{margin-bottom:var(--s-xl)}
.records__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-lg);margin:0}
.rec{background:var(--paper);padding:var(--s-md) var(--s-lg)}
.rec__k{font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--dune-ink)}
.rec__v{margin:6px 0 0;font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:1.625rem;font-weight:400;color:var(--ink);line-height:1.15}
.rec__who{display:block;margin-top:5px;font-family:var(--ff-ui);font-size:var(--fs-sm);
  font-weight:600;color:var(--rust-ink);letter-spacing:0}

/* ============================================================
   17. The permanent record — night language, per DESIGN.md
   ============================================================ */
.hall{background:var(--dusk);color:var(--paper)}
.hall__bar{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;
  padding:var(--s-md) var(--s-lg);border-bottom:var(--px) solid var(--dusk-line)}
.hall__bar h2{font-family:var(--ff-bit);font-size:var(--fs-h2);font-weight:400;line-height:1.4;color:var(--paper)}
.hall__count{margin-left:auto;font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.06em;color:var(--paper-dim);white-space:nowrap}

table.hl{width:100%;border-collapse:collapse;table-layout:fixed}
table.hl th{font-family:var(--ff-data);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--paper-dim);text-align:left;
  padding:var(--s-sm) var(--s-md);border-bottom:2px solid var(--dusk-line);white-space:nowrap}
table.hl td{padding:0 var(--s-md);height:58px;vertical-align:middle;
  border-bottom:2px solid var(--dusk-line)}
table.hl tr:last-child td{border-bottom:0}
.hl tbody tr{transition:background-color var(--dur) var(--ease)}
.hl tbody tr:hover{background:#2E211A}

.h-date{width:86px}
.h-runs{width:66px;text-align:right}
.h-margin{width:82px;text-align:right}
.h-clicks{width:104px;text-align:right}
.h-score{width:112px;text-align:right}

.hl__date{display:block;font-family:var(--ff-data);font-size:var(--fs-data);
  font-weight:500;color:var(--paper)}
.hl__yr{display:block;font-family:var(--ff-data);font-size:10px;letter-spacing:.08em;
  color:var(--paper-dim);margin-top:2px}
.hl__who{display:flex;align-items:center;gap:var(--s-md);min-width:0}
.hl__who canvas{width:28px;height:28px;flex-shrink:0;background:var(--dusk);margin:2px;
  box-shadow:0 -2px 0 0 var(--dusk-line),0 2px 0 0 var(--dusk-line),
             -2px 0 0 0 var(--dusk-line),2px 0 0 0 var(--dusk-line)}
.hl__txt{min-width:0}
.hl__name{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--paper);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  box-shadow:inset 0 -2px 0 transparent;transition:box-shadow var(--dur) var(--ease)}
.hl__name:hover{box-shadow:inset 0 -2px 0 var(--paper)}
.hl__name svg{flex-shrink:0;opacity:.55}
.hl__name .verified{color:var(--sage-glow);opacity:1}
.hl__meta{display:block;font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.04em;color:var(--paper-dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;margin-top:2px}
.hl__score{font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:1.3125rem;font-weight:400;color:var(--rust-glow)}
.hl .num{color:var(--paper-dim)}

.hall__foot{padding:var(--s-md);display:flex;justify-content:center;
  border-top:var(--px) solid var(--dusk-line)}
.hall__foot .btn--ghost{background:var(--dusk);color:var(--paper)}
.hall__foot .btn--ghost:hover{background:#2E211A}
.hall__foot .pxl-raise{box-shadow:
  0 calc(var(--px) * -1) 0 0 var(--sand), 0 var(--px) 0 0 var(--sand),
  calc(var(--px) * -1) 0 0 0 var(--sand), var(--px) 0 0 0 var(--sand),
  var(--px) var(--px) 0 0 var(--sand)}
.hall :focus-visible{outline-color:var(--rust-glow)}

.hall__note{margin-top:var(--s-lg);font-size:var(--fs-sm);color:var(--dune-ink);max-width:68ch}
.hall__note a{color:var(--rust-ink);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--rust-ink)}

@media (max-width:820px){
  .h-runs,.h-margin{display:none}
  table.hl td{height:auto;padding-block:var(--s-md)}
  /* runs and margin are hidden here, so the traffic label keeps its full width */
  .h-clicks{width:112px}
  .h-score{width:100px}
}
@media (max-width:520px){
  .h-clicks{display:none}
  .h-date{width:64px}
  table.hl td{padding-inline:var(--s-sm)}
  .hl__meta{font-size:10px;letter-spacing:0}
}

/* ============================================================
   18. The sponsor board
   The board on the left cannot be bought; this one is nothing but.
   It deliberately avoids the earned-rank vocabulary — no rust rank
   numerals, no sage score bars — so the two are never confused.
   ============================================================ */
.rail{display:block}
.spon{background:var(--paper)}

.spon__bar{background:var(--ink);color:var(--paper);padding:var(--s-md) var(--s-lg)}
.spon__bar h2{font-family:var(--ff-bit);font-size:var(--fs-h3);font-weight:400;
  line-height:1.4;color:var(--paper)}
.spon__tag{margin-top:6px;font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--dune)}

.spon__intro{padding:var(--s-md) var(--s-lg);font-size:var(--fs-sm);color:var(--dune-ink);
  line-height:1.4;border-bottom:2px solid var(--dune)}

.spon__list{list-style:none;margin:0;padding:0}
.sp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  grid-template-areas:"claim claim claim" "rank body paid";
  gap:4px var(--s-md);padding:9px var(--s-lg);
  border-bottom:2px solid var(--dune);transition:background-color var(--dur) var(--ease)}
.sp__claim{grid-area:claim;justify-self:start;cursor:pointer;padding:1px 0;
  font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.07em;
  text-transform:uppercase;color:var(--dune-ink);
  box-shadow:inset 0 -2px 0 transparent;transition:color var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease)}
.sp__claim:hover{color:var(--rust-ink);box-shadow:inset 0 -2px 0 var(--rust-ink)}
.sp__rank{grid-area:rank}
.sp__body{grid-area:body}
.sp__paid{grid-area:paid}
.sp:last-child{border-bottom:0}
.sp:hover{background:var(--sand)}
.sp__rank{font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:var(--fs-data);color:var(--dune-ink);min-width:1.2em;text-align:right}
.sp__body{min-width:0}
.sp__name{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--ink);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  box-shadow:inset 0 -2px 0 transparent;transition:box-shadow var(--dur) var(--ease)}
.sp__name:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.sp__name svg{flex-shrink:0;opacity:.4}
.sp__meta{display:block;font-family:var(--ff-data);font-size:var(--fs-label);
  letter-spacing:.03em;color:var(--dune-ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.sp__paid{font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:1.125rem;color:var(--ink);white-space:nowrap}
.spon__empty{padding:var(--s-xl) var(--s-lg);text-align:center;color:var(--dune-ink);
  font-size:var(--fs-sm)}

.spon__foot{padding:var(--s-md);display:flex;justify-content:center;
  border-top:2px solid var(--dune);background:var(--sand)}

.spon__bid{padding:var(--s-lg);border-top:var(--px) solid var(--ink);background:var(--sand)}
.spon__h{font-family:var(--ff-data);font-size:var(--fs-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);margin-bottom:var(--s-md)}
.spon__bid .field{margin-bottom:var(--s-md)}
.spon__row{display:flex;align-items:center;gap:var(--s-sm)}
.spon__row .field{margin-bottom:0;min-width:0}
.spon__cur{font-family:var(--ff-data);font-size:1.125rem;color:var(--ink);flex-shrink:0}
.spon__note{margin-top:var(--s-md);font-size:var(--fs-label);font-family:var(--ff-data);
  color:var(--dune-ink);line-height:1.5;letter-spacing:.02em}
.spon__note b{color:var(--ink)}

.spon__totals{margin:0;padding:var(--s-md) var(--s-lg);background:var(--dune);
  border-top:var(--px) solid var(--ink);
  display:grid;grid-template-columns:1fr auto;gap:8px var(--s-md)}
.spon__totals dt{font-size:var(--fs-sm);color:var(--ink)}
.spon__totals dd{margin:0;font-family:var(--ff-data);font-variant-numeric:tabular-nums;
  font-size:var(--fs-data);text-align:right;color:var(--ink)}

@media (max-width:1100px){
  .spon__intro{max-width:68ch}
}

/* ============================================================
   19. Board hero
   The dinosaur, the promise, and the clock. The canvas keeps the
   #F7F7F7 ground the sprites were drawn for (see section 6), so it
   reads as a small game screen rather than a floating cut-out.
   ============================================================ */
.hero{text-align:center;padding-block:var(--s-md) var(--s-lg)}

.hero__top{display:flex;align-items:center;justify-content:center;
  gap:var(--s-lg);flex-wrap:wrap}

.hero__dino{width:208px;height:64px;background:#F7F7F7;
  image-rendering:pixelated;flex-shrink:0}

.hero__h{font-family:var(--ff-bit);font-size:2rem;font-weight:400;
  line-height:1.4;letter-spacing:0;color:var(--ink);text-wrap:balance}
/* rust-ink, not rust: it stays above 4.5:1 on sand at every size the
   headline shrinks to, where the brighter rust would not */
.hero__accent{color:var(--rust-ink)}

.hero__sub{margin:var(--s-md) auto 0;max-width:74ch;
  font-size:var(--fs-body);line-height:1.6;color:var(--ink)}

/* the clock rides on the same line as the promise, highlighted rather than
   given a block of its own */
.hero__reset{display:inline-block;margin-left:var(--s-sm);padding:1px 8px;
  background:var(--dune);box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),
  -2px 0 0 0 var(--ink),2px 0 0 0 var(--ink);
  font-family:var(--ff-data);font-size:var(--fs-sm);color:var(--ink);white-space:nowrap}
.hero__reset b{font-weight:400;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .hero__h{font-size:1.5rem}
  .hero__dino{width:176px;height:54px}
}
@media (max-width:600px){
  .hero{padding-block:var(--s-sm) var(--s-md)}
  .hero__top{gap:var(--s-md)}
  .hero__h{font-size:1.0625rem;line-height:1.5}
  .hero__dino{width:148px;height:46px}
  .hero__sub{font-size:var(--fs-sm)}
  .hero__reset .reset__t{font-size:1.25rem}
}

/* keeps a clock or a figure from being split across a line break */
.nowrap{white-space:nowrap}