/* Today's best (#best, todays-best.js): one score display mounted under the cartridge wall. Quiet on purpose: black and
   grey hardware, warm off-white type, muted medal colours, no glow. Numbers are JetBrains Mono, names Big Shoulders.
   The record and board rows share their table's columns through subgrid, so every row lines up whatever its content
   (browsers without subgrid fall back to fixed columns). */
.best-sec{position:relative;padding:44px 0 8px}
/* the plate here is a light bone plate that cab.js does not tone yet: dark ink, as .plate.tone-light */
#best-h:not(.tone-dark):not(.tone-light)>span{color:#2b1806;text-shadow:0 1px 0 rgba(255,236,190,.55),0 -1px 0 rgba(0,0,0,.3)}
.tb-intro{text-align:center;color:var(--ink-2);max-width:70ch;margin:14px auto 0;font-size:16.5px}

.tb{--tb-ink:#ece7de;--tb-ink2:#b7b0b9;--tb-dim:#8c8590;--tb-rule:rgba(255,255,255,.06);--tb-head:rgba(255,255,255,.1);
  --k-bronze:#b88a67;--k-silver:#aeb3b9;--k-gold:#c9ae6b;--k-dev:#93b3a6;
  max-width:1100px;margin:32px auto 0;color:var(--tb-ink)}
.tb-case{position:relative;padding:14px 20px 12px;border-radius:16px;background:linear-gradient(180deg,#1f1d23,#161419 55%,#121015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.6),0 0 0 1px #050407,0 20px 36px rgba(0,0,0,.55)}
.tb-screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6d1db,#7b7584 48%,#322e38 82%);box-shadow:0 1px 1px rgba(0,0,0,.65)}
.tb-screw::after{content:"";position:absolute;left:1px;right:1px;top:4px;height:1px;background:rgba(18,16,22,.75);transform:rotate(-35deg)}
.tb-screw.s1{left:8px;top:8px}.tb-screw.s2{right:8px;top:8px}.tb-screw.s3{left:8px;bottom:8px}.tb-screw.s4{right:8px;bottom:8px}

/* silk-screened labels on the case */
.tb-strip{display:flex;align-items:center;justify-content:space-between;gap:6px 20px;flex-wrap:wrap;min-height:30px;padding:0 10px}
.tb-silk{font:600 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tb-dim)}
.tb-count{display:inline-block;min-width:36px;margin-left:8px;padding:5px 7px 4px;border-radius:4px;background:#09080b;color:var(--tb-ink);text-align:center;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.07)}
.tb-all{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 4px;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--tb-ink2)}
.tb a.tb-all:hover{color:var(--tb-ink)}

/* the display: recessed, nearly black, a faint line texture and no glow */
.tb-screen{position:relative;margin:8px 0;padding:16px 22px 18px;min-height:220px;border-radius:10px;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.014) 0 1px,rgba(255,255,255,0) 1px 3px),linear-gradient(180deg,#0f0e12,#09080b);
  box-shadow:inset 0 0 0 1px #000,inset 0 3px 14px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
.tb-wait{padding:6px 10px;font:500 13px/1.4 var(--f-mono);letter-spacing:.08em;color:var(--tb-dim)}
.tb-msg{padding:6px 10px 22px}
.tb-big{font:900 clamp(24px,2.6vw,32px)/1.05 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--tb-ink)}
.tb-small{margin-top:8px;max-width:72ch;color:var(--tb-ink2);font-size:15px;line-height:1.5}
.tb-msg.quiet{padding-top:2px;padding-bottom:16px}
.tb-msg.quiet .tb-small{margin-top:0;color:var(--tb-dim);font-size:14px}
.tb-note{margin:12px 10px 0;font-size:13.5px;line-height:1.45;color:var(--tb-dim)}
.tb a{color:inherit}
.tb-note a{color:var(--tb-ink2);text-underline-offset:3px}

/* records: rank, game, player, score, when, play */
.tb-ol,.tb-ul{list-style:none;margin:0;padding:0}
.tb-tbl{display:grid;grid-template-columns:58px minmax(0,1.5fr) minmax(0,1fr) auto 92px auto;column-gap:18px}
.tb-tbl>.tb-rh,.tb-tbl>.tb-ol,.tb-ol>.tb-row{grid-column:1/-1;display:grid;align-items:center;
  grid-template-columns:58px minmax(0,1.5fr) minmax(0,1fr) minmax(128px,.8fr) 92px 96px;grid-template-columns:subgrid}
.tb-rh,.tb-oh{padding:0 10px 9px;border-bottom:1px solid var(--tb-head)}
.tb-rh>span,.tb-oh>span{font:600 10.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tb-dim)}
.tb-rh .r,.tb-oh>span{text-align:right}
.tb-row,.tb-orow{min-height:64px;padding:10px;border-bottom:1px solid var(--tb-rule);transition:background .15s}
.tb-row:last-child,.tb-orow:last-child{border-bottom:0}
.tb-row:hover,.tb-orow:hover{background:rgba(255,255,255,.022)}
.tb-rk{font:900 26px/1 var(--f-display);color:#d3cabb;white-space:nowrap}
.tb-rk small{margin-left:1px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--tb-dim)}
.tb-row:first-child .tb-rk{color:#f0e7d6}
.tb-game{justify-self:start;display:flex;align-items:center;gap:14px;min-width:0;max-width:100%;border-radius:6px;text-decoration:none}
.tb-th{position:relative;flex:none;width:72px;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#050407;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(255,255,255,.07)}
.tb-th img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.95);transition:filter .2s}
.tb-th.none img{display:none}
.tb-game:hover .tb-th img{filter:none}
.tb-gt{display:grid;min-width:0}
.tb-gt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 18px/1.1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--tb-ink)}
.tb-gt small{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12.5px/1.3 var(--f-body);color:var(--tb-dim)}
.tb-game:hover b{color:#fff}
.tb-pl{display:grid;min-width:0;font:600 15px/1.25 var(--f-mono);color:#ddd6cb}
.tb-pn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-pl.hid{color:var(--tb-dim)}
.tb-at-m{display:none;margin-top:3px;white-space:nowrap;font:500 12px/1.25 var(--f-mono);color:var(--tb-dim)}
.tb-sc{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;white-space:nowrap}
.tb-v{font:600 19px/1 var(--f-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--tb-ink)}
.tb-at{font:500 12.5px/1 var(--f-mono);text-align:right;white-space:nowrap;color:var(--tb-dim)}

/* medals: a small stamped letter in a muted metal colour */
.tb-md{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:4px;font:600 11px/1 var(--f-mono);font-style:normal;color:var(--c);
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--c)}
.k-bronze{--c:var(--k-bronze)}.k-silver{--c:var(--k-silver)}.k-gold{--c:var(--k-gold)}.k-dev{--c:var(--k-dev)}

/* the play key: a small dark push button */
.tb-play{justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:7px;text-decoration:none;white-space:nowrap;
  font:800 14px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#e6dcc8;background:linear-gradient(180deg,#2c2931,#1f1d23);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.5),0 2px 0 #08070a,0 3px 8px rgba(0,0,0,.45);transition:background .15s,transform .06s,box-shadow .06s}
.tb-play svg{width:10px;height:10px;fill:currentColor}
.tb a.tb-play:hover{color:#f6eedf;background:linear-gradient(180deg,#36333c,#26242b)}
.tb-play:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 #08070a,0 1px 3px rgba(0,0,0,.45)}

/* boards to try: the medal lines in their own aligned columns */
.tb-open{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(84px,auto)) auto;column-gap:18px;margin-top:2px}
.tb-tbl+.tb-open,.tb-note+.tb-open{margin-top:26px}
.tb-open>.tb-oh,.tb-open>.tb-ul,.tb-ul>.tb-orow{grid-column:1/-1;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) repeat(3,minmax(84px,120px)) 96px;grid-template-columns:subgrid}
.tb-sub{font:600 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tb-ink2)}
.tb-oh>span[class^="k-"]::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;vertical-align:1px;background:var(--c)}
.tb-ln{text-align:right;white-space:nowrap;font:500 15px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:#d6cfc4}
.tb-ln i{display:none;font-style:normal}

/* the coin door's old static "High-score table: empty" block: this section replaces it; the prize counter stays */
#door .scores{grid-template-columns:minmax(0,1fr)}
#door .scores>.board,#door .scores>.scores-t{display:none}

/* narrower: the time moves under the player's name */
@media (max-width:1000px){
  .tb-tbl{grid-template-columns:44px minmax(0,1.4fr) minmax(0,1fr) auto auto;column-gap:14px}
  .tb-tbl>.tb-rh,.tb-tbl>.tb-ol,.tb-ol>.tb-row{grid-template-columns:44px minmax(0,1.4fr) minmax(0,1fr) minmax(120px,.8fr) 88px;grid-template-columns:subgrid}
  .tb-rh .tb-wh,.tb-at{display:none}
  .tb-at-m{display:block}
  .tb-open{column-gap:14px;grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,auto)) auto}
  .tb-open>.tb-oh,.tb-open>.tb-ul,.tb-ul>.tb-orow{grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,100px)) 88px;grid-template-columns:subgrid}
  .tb-rk{font-size:22px}
}
/* phones: each row is its own small block (title and label, score and time, player and Play) */
@media (max-width:760px){
  .tb{margin-top:24px}
  .tb-case{padding:12px 10px 8px;border-radius:14px}
  .tb-strip{padding:0 8px}
  .tb-screen{margin:6px 0;padding:10px 10px 12px;min-height:180px}
  .tb-msg{padding:6px 4px 16px}
  .tb-small{font-size:14.5px}
  .tb-note{margin:10px 4px 0}
  .tb-tbl,.tb-tbl>.tb-ol,.tb-open,.tb-open>.tb-ul{display:block}
  .tb-tbl>.tb-rh,.tb-oh>span{display:none}
  .tb-open>.tb-oh{display:block;padding:0 4px 8px}
  .tb-ol>.tb-row{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"rk gm sc" "rk gm at" "rk pl pa";gap:4px 10px;min-height:0;padding:12px 4px}
  .tb-rk{grid-area:rk;align-self:start;padding-top:4px;font-size:19px}
  .tb-rk small{font-size:11px}
  .tb-row .tb-game{grid-area:gm;align-self:start}
  .tb-game{gap:10px}
  .tb-th{width:48px}
  .tb-gt b{font-size:16px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .tb-gt small{font-size:12px}
  .tb-sc{grid-area:sc;gap:8px}
  .tb-v{font-size:16px}
  .tb-md{width:18px;height:18px;font-size:10px}
  .tb-at{display:block;grid-area:at;align-self:start;font-size:11.5px}
  .tb-at-m{display:none}
  .tb-pl{grid-area:pl;padding-left:58px;font-size:13.5px}
  .tb-row .tb-play{grid-area:pa}
  .tb-play{height:32px;padding:0 11px 0 10px;font-size:13px}
  .tb-ul>.tb-orow{grid-template-columns:repeat(3,minmax(0,1fr)) auto;grid-template-areas:"gm gm gm pa" "lb ls lg .";gap:8px 10px;min-height:0;padding:12px 4px}
  .tb-orow .tb-game{grid-area:gm}
  .tb-orow .tb-play{grid-area:pa}
  .tb-orow .k-bronze{grid-area:lb}.tb-orow .k-silver{grid-area:ls}.tb-orow .k-gold{grid-area:lg}
  .tb-ln{display:flex;align-items:center;gap:6px;text-align:left;font-size:13px}
  .tb-ln i{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:3px;font:600 9.5px/1 var(--f-mono);color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
}
@media (prefers-reduced-motion:reduce){.tb *{transition:none!important}}