/* 2BIT base: reset, type scale and every shared component.
   Tokens come from tokens.css; no raw colours here.

   INDEX (search for the "== name ==" banner)
   -------------------------------------------------------------------------
   reset        box model, [hidden], focus ring, selection, scrollbars
   type         body · h1 (page title) · .h-display (+ .accent) · h2 · h3 ·
                .lede · .small · .micro · .mono · .pix · .log · .link · .key
   colour       .muted .dim .up .down .coin
   a11y         .sr-only · .skip
   buttons      .btn  + .btn-primary .btn-secondary .btn-money
                      + .btn-lg .btn-sm .btn-icon .btn-block
                      states: :hover :active :focus-visible :disabled
                              [aria-disabled=true] [aria-pressed=true]
   chips        .chip (+ .is-on / [aria-pressed=true]) · .tag ·
                .cab-chip (swatch <i> + ticker) · .pips (<i class="on">)
   demo         .demo  (the one sticker; never restyle it)
   cards        .card  + .card-h (h3 row) + .card-b
   sections     .sec + .sec-h (h2 with the --house tick, then a <p>)
                .page (+ .page-h) container for the non-floor views
   grid         .grid12 > *   style="--span:4"   optional --span-md (below
                1180px, default 12) and --rows (row span, desktop only)
   kpi          .kpi + .kpi-n + .kpi-l   (.kpi-sm for 20px numbers)
   meter        .meter + .meter-fill   style="--v:.42"
                fill colour: .is-coin (pots) .is-sel .is-up .is-down
   tabs         .tabs + .tab [aria-selected=true]
   seg          .seg > button[aria-pressed|aria-checked=true] | .is-on
                .seg > label > input + span   (radio flavour)
   fields       .field (+ .is-err) > label | .field-l, input / textarea /
                select, .field-hint, .field-err
   tables       .tbl-wrap > table.tbl   th / td.num, .tbl-sort, tr.is-me
   screens      .screen (CRT glass) + .scanlines (static overlay div)
   empty        .empty
   feed         .row-in  (fade + rise, then a --sel-wash that decays)
   toasts       #toasts > .toast (+ .toast-good .toast-bad)
   popover      .pop · .menu > .menu-i
   modal        .modal-scrim > .modal (+ .modal-x)   html.is-locked
   ------------------------------------------------------------------------- */

/* == reset == */
*, *::before, *::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + var(--s-4));
  scrollbar-color:var(--line-2) var(--bg-page);
  font-synthesis:none; /* the pixel face has one weight: never smear it into a fake bold */
}
html.is-locked{ overflow:hidden; }
body{
  background:var(--bg-page); color:var(--tx-1);
  font:400 15px/1.6 var(--f-ui); letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
[hidden]{ display:none !important; }
img, canvas, video{ display:block; max-width:100%; }
svg{ flex:none; }
button, input, select, textarea{ font:inherit; letter-spacing:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
ul[role="list"], ol[role="list"], ul[role="listbox"], menu{ list-style:none; padding:0; }
a{ color:inherit; }
table{ border-collapse:collapse; }
::selection{ background:var(--sel); color:var(--tx-ink); }
::placeholder{ color:var(--tx-3); opacity:1; }
*{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }

/* One focus ring for everything (token --focus). Components that already
   carry a box-shadow re-state it together with the ring. */
:focus{ outline:none; }
:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus); }

/* == type == */
h1, h2, h3, h4{ text-wrap:balance; }
h1{
  font:400 48px/1 var(--f-pix); letter-spacing:.01em; text-transform:uppercase;
}
.h-display{
  font:400 clamp(40px, 5.2vw, 72px)/.95 var(--f-pix); letter-spacing:.01em; text-transform:uppercase;
}
/* the one glowing word of the display h1 */
.h-display .accent, .h-display em{ font-style:normal; color:var(--hot); text-shadow:var(--tglow-hot); }
h2{
  font:700 28px/1.1 var(--f-ui); letter-spacing:.02em; text-transform:uppercase;
}
h3{
  font:700 17px/1.2 var(--f-ui); letter-spacing:.03em; text-transform:uppercase;
}
h4{ font:700 15px/1.3 var(--f-ui); letter-spacing:.02em; }
.lede{ font:400 17px/1.5 var(--f-ui); letter-spacing:0; color:var(--tx-2); }
small, .small{ font:500 13px/1.45 var(--f-ui); letter-spacing:.01em; }
.micro{
  font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3);
}
.mono{ font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:0; }
.pix{ font-family:var(--f-pix); font-weight:400; letter-spacing:.04em; }
.log{ font:500 12px/1.5 var(--f-mono); letter-spacing:0; }
strong, b{ font-weight:700; }

.link{
  color:var(--tx-1); text-decoration:underline; text-decoration-color:var(--hot);
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.link:hover{ text-decoration-thickness:2px; }

/* key-cap hint: <kbd class="key">P</kbd> */
.key{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  font:700 12px/1 var(--f-mono); letter-spacing:0; color:var(--tx-2);
  background:var(--bg-raise); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:var(--r-1);
}

@media (max-width: 899px){
  h1{ font-size:28px; }
  .h-display{ font-size:34px; }
  h2{ font-size:22px; }
}
@media (max-width: 559px){
  .h-display{ font-size:30px; }
}

/* == colour == */
.muted{ color:var(--tx-2); }
.dim{ color:var(--tx-3); }
.up{ color:var(--up); }
.down{ color:var(--down); }
.coin{ color:var(--coin); }   /* SOL amounts only */

/* == a11y == */
.sr-only{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:fixed; left:var(--s-2); top:var(--s-2); z-index:calc(var(--z-toast) + 1);
  display:inline-flex; align-items:center; height:44px; padding:0 var(--s-4);
  background:var(--sel); color:var(--tx-ink); border-radius:var(--r-2);
  font:700 14px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  transform:translateY(-72px);
}
.skip:focus{ transform:none; box-shadow:var(--focus); }

/* == buttons ==
   44px, radius 8, 2px border, a hard pressed-plastic shelf underneath.
   --_lo is the shelf colour, --_d its depth, --_ring what the ::after layer
   paints (a glow for primary / money, a cyan border for the neutral ones).
   Only transform and the ::after opacity are ever transitioned. */
.btn{
  --_lo:var(--shelf); --_d:4px; --_ring:inset 0 0 0 2px var(--sel);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:44px; padding:0 var(--s-4); flex:none;
  background:var(--bg-raise); color:var(--tx-1);
  border:2px solid var(--line-2); border-radius:var(--r-2);
  box-shadow:0 var(--_d) 0 0 var(--_lo);
  font:700 14px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform var(--d-1) var(--e-press);
}
.btn::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:var(--_ring); opacity:0; transition:opacity var(--d-2) linear;
}
.btn svg{ width:20px; height:20px; }

.btn-primary{
  --_lo:var(--hot-lo); --_ring:var(--glow-hot);
  background:var(--hot); color:var(--tx-ink); border-color:var(--hot-hi);
}
.btn-secondary{ background:transparent; }
.btn-money{
  --_lo:var(--coin-lo); --_ring:var(--glow-coin);
  background:var(--coin); color:var(--tx-ink); border-color:var(--coin);
}

.btn-lg{ height:56px; padding:0 var(--s-5); font-size:16px; }
.btn-sm{ --_d:3px; height:32px; padding:0 var(--s-3); font-size:13px; border-radius:var(--r-1); }
.btn-sm svg{ width:16px; height:16px; }
.btn-icon{ width:44px; padding:0; }
.btn-icon.btn-lg{ width:56px; }
.btn-icon.btn-sm{ width:32px; }
.btn-block{ display:flex; width:100%; }

@media (hover: hover){
  .btn:not(:disabled):not([aria-disabled="true"]):hover{ transform:translateY(-1px); }
  .btn:not(:disabled):not([aria-disabled="true"]):hover::after{ opacity:1; }
  .btn[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover{ transform:translateY(2px); }
}
.btn:not(:disabled):not([aria-disabled="true"]):active{
  transform:translateY(calc(var(--_d) - 1px));
  box-shadow:0 1px 0 0 var(--_lo);
}
/* a latched toggle (sound on, calm on, CRT on): held down, cyan edge */
.btn[aria-pressed="true"]{
  transform:translateY(2px);
  box-shadow:0 calc(var(--_d) - 2px) 0 0 var(--_lo);
  border-color:var(--sel);
}
.btn:focus-visible{ box-shadow:var(--focus), 0 var(--_d) 0 0 var(--_lo); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }

/* small controls keep a 44px touch target below 900px */
@media (max-width: 899px){
  .btn-sm::before, .chip::before, .cab-chip::before{
    content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);
  }
  /* a 32px square icon button is short of 44px both ways */
  .btn-icon.btn-sm::before{ left:50%; right:auto; width:44px; transform:translate(-50%, -50%); }
}

/* == chips == */
.chip{
  position:relative; display:inline-flex; align-items:center; gap:6px; flex:none;
  height:32px; padding:0 var(--s-3);
  background:var(--bg-card); color:var(--tx-2);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font:700 13px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
@media (hover: hover){
  .chip:hover{ color:var(--tx-1); background:var(--bg-raise); }
}
.chip.is-on, .chip[aria-pressed="true"], .chip[aria-checked="true"]{
  color:var(--tx-1); background:var(--bg-raise); border-color:var(--sel);
  box-shadow:inset 0 0 0 1px var(--sel);
}
.chip:focus-visible{ box-shadow:var(--focus); }
.chip:disabled{ opacity:.45; cursor:not-allowed; }

/* a label, not a control */
.tag{
  display:inline-flex; align-items:center; height:20px; padding:0 6px;
  background:var(--bg-raise); color:var(--tx-2); border-radius:var(--r-1);
  font:700 12px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}

/* "$TICKER" with the cabinet's colour swatch: <button class="cab-chip"><i style="background:…"></i>$GLORP</button> */
.cab-chip{
  position:relative; display:inline-flex; align-items:center; gap:6px; flex:none;
  height:24px; padding:0 var(--s-2) 0 6px; vertical-align:middle;
  background:var(--bg-raise); color:var(--tx-1);
  border:1px solid var(--line-1); border-radius:var(--r-1);
  font:700 13px/1 var(--f-mono); letter-spacing:0; text-decoration:none; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cab-chip > i{ width:8px; height:8px; flex:none; border-radius:1px; background:var(--tx-3); }
@media (hover: hover){
  .cab-chip:hover{ border-color:var(--sel); }
}
.cab-chip:focus-visible{ box-shadow:var(--focus); }

/* tier pips: four squares, tier + 1 of them lit */
.pips{ display:inline-flex; align-items:center; gap:2px; flex:none; vertical-align:middle; }
.pips > i{ width:6px; height:6px; background:var(--line-2); }
.pips > i.on{ background:var(--tx-1); }

/* == demo sticker ==
   Sits exactly where a status dot would. One look, everywhere; it never
   collapses to a dot. */
.demo{
  display:inline-block; flex:none; vertical-align:middle;
  padding:3px 7px; margin:0 2px;
  background:var(--demo); color:var(--tx-ink);
  border-radius:var(--r-1);
  outline:1px dashed var(--tx-ink); outline-offset:-3px;
  font:700 12px/1.25 var(--f-ui); letter-spacing:.08em; text-transform:none; text-shadow:none; white-space:nowrap;
  transform:rotate(-2deg);
}

/* == cards == */
.card{
  background:var(--bg-card);
  border:1px solid var(--line-1); border-radius:var(--r-3);
  box-shadow:var(--sh-card);
  min-width:0;
}
.card-h{
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
  min-height:48px; padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line-1);
}
.card-h h3{ margin-right:auto; }
.card-b{ padding:var(--s-4); }

/* == sections == */
.sec{
  max-width:var(--page-max); margin:var(--s-8) auto 0; padding:0 var(--s-4);
}
.sec-h{ margin-bottom:var(--s-5); }
.sec-h h2{ position:relative; padding-left:15px; }
.sec-h h2::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px; background:var(--house);
}
.sec-h h2 .demo{ margin-left:var(--s-2); }
.sec-h p{
  margin-top:6px; padding-left:15px; max-width:68ch;
  font:500 13px/1.45 var(--f-ui); letter-spacing:.01em; color:var(--tx-2);
}

/* container for Launch / Cabinets / High Scores */
.page{ max-width:var(--page-max); margin:0 auto; padding:var(--s-6) var(--s-4) 0; }
.page-h{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-5); }

@media (max-width: 899px){
  .sec{ margin-top:var(--s-7); padding:0 var(--s-3); }
  .sec-h{ margin-bottom:var(--s-4); }
  .page{ padding:var(--s-5) var(--s-3) 0; }
}

/* == grid ==  12 columns, 16px gap. §5.4: below 1180px a child spans
   --span-md (12 when not given); below 900px everything spans 12. */
.grid12{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--s-4); }
.grid12 > *{ grid-column:span var(--span, 12); grid-row:span var(--rows, 1); min-width:0; }
@media (max-width: 1179px){
  .grid12 > *{ grid-column:span var(--span-md, 12); grid-row:auto; }
}
@media (max-width: 899px){
  .grid12{ gap:var(--s-3); }
  .grid12 > *{ grid-column:1 / -1; }
}

/* == kpi == */
.kpi{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:var(--s-3); background:var(--bg-raise); border-radius:var(--r-2);
}
.kpi-n{
  font:700 30px/1 var(--f-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:var(--tx-1); white-space:nowrap;
}
.kpi-l{
  font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3);
}
.kpi-sm .kpi-n{ font-size:20px; }

/* == meter ==  <div class="meter is-coin" style="--v:.42"><div class="meter-fill"></div></div> */
.meter{
  --meter-c:var(--tx-2);
  position:relative; height:10px; overflow:hidden;
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-1);
}
.meter-fill{
  position:absolute; inset:0; background:var(--meter-c);
  transform:scaleX(var(--v, 0)); transform-origin:0 50%;
  transition:transform var(--d-4) var(--e-out);
}
.meter.is-coin{ --meter-c:var(--coin); }   /* pots only */
.meter.is-sel{ --meter-c:var(--sel); }
.meter.is-up{ --meter-c:var(--up); }
.meter.is-down{ --meter-c:var(--down); }
:root[data-calm="1"] .meter-fill{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .meter-fill{ transition:none; }
}

/* == tabs == */
.tabs{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line-1);
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 var(--s-3);
  color:var(--tx-2); border-radius:var(--r-1) var(--r-1) 0 0;
  font:700 13px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.tab::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--sel);
  opacity:0; transition:opacity var(--d-2) linear;
}
@media (hover: hover){
  .tab:hover{ color:var(--tx-1); }
}
.tab[aria-selected="true"]{ color:var(--tx-1); background:var(--bg-raise); }
.tab[aria-selected="true"]::after{ opacity:1; }
.tab:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }
@media (max-width: 899px){
  .tab{ height:44px; }
}

/* == seg == */
.seg{
  display:inline-flex; gap:2px; padding:2px; max-width:100%;
  background:var(--bg-screen); border:1px solid var(--line-2); border-radius:var(--r-2);
}
.seg > button, .seg > label > span{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 var(--s-3);
  color:var(--tx-2); border-radius:var(--r-1);
  font:700 13px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.seg > label{ display:inline-flex; position:relative; }
.seg > label > input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
@media (hover: hover){
  .seg > button:hover, .seg > label:hover > span{ color:var(--tx-1); }
}
.seg > button[aria-pressed="true"], .seg > button[aria-checked="true"], .seg > button[aria-selected="true"],
.seg > button.is-on, .seg > label > input:checked + span{
  color:var(--tx-1); background:var(--bg-raise); box-shadow:inset 0 0 0 2px var(--sel);
}
.seg > button:focus-visible, .seg > label > input:focus-visible + span{ box-shadow:var(--focus); }
.seg > button:disabled{ opacity:.45; cursor:not-allowed; }
@media (max-width: 899px){
  .seg > button, .seg > label > span{ height:44px; }
  .seg{ padding:1px; }
}

/* == fields == */
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label, .field-l{
  display:flex; align-items:center; gap:var(--s-2);
  font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2);
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.field textarea, .field select{
  width:100%; min-width:0; height:44px; padding:0 var(--s-3);
  background:var(--bg-raise); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  font:400 15px/1.4 var(--f-ui); letter-spacing:.005em;
  appearance:none; -webkit-appearance:none;
}
.field textarea{ height:auto; min-height:96px; padding:10px var(--s-3); line-height:1.5; resize:vertical; }
.field select{
  padding-right:36px; cursor:pointer;
  background-image:var(--ico-chev); background-repeat:no-repeat; background-position:right 12px center; background-size:12px 12px;
}
.field input.mono, .field input[inputmode="decimal"], .field input[type="number"]{
  font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:0;
}
/* 1px border + 1px ring reads as the 2px focus border without moving the layout */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{
  border-color:var(--sel); box-shadow:0 0 0 1px var(--sel);
}
.field input:disabled, .field textarea:disabled, .field select:disabled{ opacity:.5; cursor:not-allowed; }
.field-hint{ font:500 13px/1.45 var(--f-ui); letter-spacing:.01em; color:var(--tx-3); }
.field-err{ font:500 13px/1.45 var(--f-ui); letter-spacing:.01em; color:var(--down); }
.field-err:empty{ display:none; }
.field.is-err input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.field.is-err textarea, .field.is-err select,
.field [aria-invalid="true"]{
  border-color:var(--down); box-shadow:0 0 0 1px var(--down);
}
/* the text-input rule and the error ring both out-specify the focus rule above:
   restate the focus border, and keep a focus ring on a field that is in error */
.field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select):focus-visible{
  border-color:var(--sel);
}
.field.is-err :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select):focus-visible,
.field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select)[aria-invalid="true"]:focus-visible{
  border-color:var(--down); box-shadow:0 0 0 1px var(--down), var(--focus);
}
@media (max-width: 899px){
  /* 16px stops iOS zooming the page on focus */
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  .field textarea, .field select{ font-size:16px; }
}

/* == tables == */
.tbl-wrap{
  overflow:auto; background:var(--bg-card);
  border:1px solid var(--line-1); border-radius:var(--r-3);
}
.tbl{ width:100%; border-collapse:separate; border-spacing:0; font:400 14px/1.4 var(--f-ui); }
.tbl th, .tbl td{ padding:10px var(--s-3); text-align:left; vertical-align:middle; }
.tbl th{
  position:sticky; top:var(--tbl-top, 0); z-index:1;
  background:var(--bg-card); color:var(--tx-3);
  border-bottom:1px solid var(--line-2);
  font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.tbl td{ border-bottom:1px solid var(--line-1); color:var(--tx-1); }
.tbl tbody tr:last-child > td{ border-bottom:0; }
.tbl td.num{
  text-align:right; white-space:nowrap;
  font:500 14px/1.4 var(--f-mono); letter-spacing:0; font-variant-numeric:tabular-nums;
}
.tbl th.num{ text-align:right; }
@media (hover: hover){
  .tbl tbody tr:hover > td{ background:var(--bg-raise); }
}
.tbl tbody tr.is-me > td{ background:var(--sel-wash); }
.tbl tbody tr:focus-within > td{ background:var(--bg-raise); }
/* sortable header: <th aria-sort="descending"><button class="tbl-sort">Pot</button></th> */
.tbl-sort{
  display:inline-flex; align-items:center; gap:var(--s-1);
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer;
}
.tbl-sort::after{ content:"▾"; font-size:12px; opacity:0; }
@media (hover: hover){
  .tbl-sort:hover{ color:var(--tx-1); }
}
.tbl th[aria-sort="ascending"], .tbl th[aria-sort="descending"]{ color:var(--tx-1); }
.tbl th[aria-sort="ascending"] .tbl-sort::after{ content:"▴"; opacity:1; }
.tbl th[aria-sort="descending"] .tbl-sort::after{ opacity:1; }

/* == screens ==  CRT glass around any game canvas */
.screen{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg-screen); border-radius:var(--r-2);
}
.screen::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; box-shadow:var(--sh-screen);
}
.screen canvas{ display:block; image-rendering:pixelated; }
/* static overlay, real screens only: <div class="scanlines"></div> as the last child */
.scanlines{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; background:var(--scanlines);
}

/* == empty == */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-3);
  padding:var(--s-6) var(--s-4); text-align:center;
  color:var(--tx-2); font:400 15px/1.5 var(--f-ui);
  border:1px dashed var(--line-2); border-radius:var(--r-2);
}
.empty h3{ color:var(--tx-1); }

/* == feed rows ==  add .row-in to a freshly inserted row */
.row-in{ position:relative; isolation:isolate; animation:row-in var(--d-3) var(--e-out) both; }
.row-in::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--sel-wash); opacity:0; animation:wash-out var(--d-live) linear both;
}
@keyframes row-in{ from{ opacity:0; transform:translateY(var(--rise)); } }
@keyframes wash-out{ from{ opacity:1; } to{ opacity:0; } }

/* == toasts ==  bottom-right on desktop, top-centre below 900px */
#toasts{
  position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:var(--z-toast);
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-2);
  width:min(400px, calc(100vw - 2 * var(--s-4)));
  pointer-events:none;
}
.toast{
  --toast-c:var(--tx-3);
  position:relative; display:flex; align-items:center; gap:var(--s-3);
  max-width:100%; min-height:48px; padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background:var(--bg-card); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  box-shadow:0 2px 0 0 var(--shelf), var(--sh-float);
  font:500 14px/1.4 var(--f-ui);
  pointer-events:auto;
  animation:toast-in var(--d-route) var(--e-out) both;
}
.toast::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--toast-c);
}
.toast-good{ --toast-c:var(--up); }
.toast-bad{ --toast-c:var(--down); }
.toast-msg{ flex:1 1 auto; min-width:0; padding:var(--s-1) 0; }
.toast-msg .demo{ margin-left:6px; }
.toast-x{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; color:var(--tx-3); border-radius:var(--r-1);
  font:700 16px/1 var(--f-mono);
}
@media (hover: hover){
  .toast-x:hover{ color:var(--tx-1); background:var(--bg-raise); }
}
.toast.is-out{ animation:toast-out var(--d-2) linear both; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(var(--rise)); } }
@keyframes toast-out{ to{ opacity:0; } }
@media (max-width: 899px){
  #toasts{
    left:var(--s-2); right:var(--s-2); bottom:auto;
    top:calc(var(--header-h) + var(--s-2) + env(safe-area-inset-top, 0px));
    width:auto; align-items:center; flex-direction:column-reverse;
  }
  .toast{ width:100%; max-width:440px; }
  .toast-x{ width:44px; height:44px; }
}

/* == popover == */
.pop{
  position:fixed; left:0; top:0; z-index:var(--z-pop);
  max-width:min(320px, calc(100vw - 2 * var(--s-2)));
  padding:var(--s-3) var(--s-4);
  background:var(--bg-card); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  box-shadow:0 2px 0 0 var(--shelf), var(--sh-float);
  font:400 14px/1.5 var(--f-ui);
  animation:toast-in var(--d-2) var(--e-out) both;
}
.pop:focus-visible{ box-shadow:0 2px 0 0 var(--shelf), var(--sh-float); }
.pop p + p{ margin-top:var(--s-2); }

.menu{ display:flex; flex-direction:column; gap:2px; min-width:200px; margin:calc(var(--s-1) * -1) calc(var(--s-2) * -1); }
.menu-i{
  display:flex; align-items:center; gap:var(--s-2); width:100%; min-height:40px; padding:0 var(--s-3);
  color:var(--tx-1); border-radius:var(--r-1); text-align:left; text-decoration:none;
  font:700 13px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase;
}
@media (hover: hover){
  .menu-i:hover{ background:var(--bg-raise); }
}
.menu-i:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }
@media (max-width: 899px){
  .menu-i{ min-height:44px; }
}

/* == modal ==  the generic focus-trapped frame; skins go on the content */
.modal-scrim{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-4); background:var(--scrim);
  animation:scrim-in var(--d-2) linear both;
}
.modal{
  position:relative; width:min(560px, 100%); max-height:90vh; max-height:90dvh; overflow:auto;
  overscroll-behavior:contain;
  background:var(--bg-card); color:var(--tx-1);
  border:2px solid var(--line-2); border-radius:var(--r-3);
  box-shadow:0 2px 0 0 var(--shelf), var(--sh-float);
  animation:toast-in var(--d-route) var(--e-out) both;
}
.modal:focus-visible{ box-shadow:0 2px 0 0 var(--shelf), var(--sh-float); }
.modal-x{ position:absolute; right:var(--s-3); top:var(--s-3); z-index:2; }
@keyframes scrim-in{ from{ opacity:0; } }
@media (max-width: 559px){
  .modal-scrim{ padding:var(--s-2); }
}