/* Hack the Planet Pinball by the numbers (/pinball/numbers.html), written by
   tools/pinball-numbers.py. One dark card in the game's phosphor palette, so it reads the
   same under every site theme. The CSP allows no inline styles, so bar lengths and column
   heights are the classes at the end (w0-w100, h0-h100, in percent). Chart marks are a
   cyan validated against the card (#229dc4: OKLCH L 0.6, 3:1+ on #0b0f0b); hover brightens
   to the game's cyan. Text never takes the mark colour. */
.pbn{--n-card:#070a07;--n-panel:#0b0f0b;--n-edge:#15351f;--n-hair:#21402b;--n-text:#bfeaca;--n-muted:#7fae8c;
  --n-green:#39ff8c;--n-mark:#229dc4;--n-mark-hi:#59e0ff;
  --n-disp:"VT323","JetBrains Mono",monospace;--n-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  box-sizing:border-box;max-width:760px;margin:0 auto 24px;padding:18px 16px 20px;background:var(--n-card);
  border:1px solid var(--n-edge);border-radius:12px;color:var(--n-text);font-family:var(--n-mono);font-size:14px;line-height:1.55}
.pbn *{box-sizing:border-box}
.pbn a{color:var(--n-green)}
.pbn a:hover,.pbn a:focus-visible{color:#9dffc8}
.pbn h2{font-family:var(--n-disp);font-size:24px;font-weight:normal;letter-spacing:.06em;color:var(--n-green);margin:0 0 2px;text-transform:uppercase}
.pbn .lede{margin:0 0 14px;color:var(--n-text)}
.pbn .sub{margin:0 0 12px;color:var(--n-muted);font-size:12.5px}
.pbn .note{margin:8px 0 18px;color:var(--n-muted);font-size:12.5px}
.pbn .foot{margin:18px 0 0;color:var(--n-muted);font-size:12.5px}

/* the hero figure, then the totals */
.pbn .hero{text-align:center;margin:4px 0 12px}
.pbn .hv{font-family:var(--n-disp);font-size:72px;line-height:.9;color:var(--n-green);text-shadow:0 0 14px rgba(57,255,140,.35)}
.pbn .hl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--n-muted)}
.pbn .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.pbn .tile{background:var(--n-panel);border:1px solid var(--n-edge);border-radius:10px;padding:10px 12px}
.pbn .tv{font-family:var(--n-disp);font-size:30px;line-height:1;color:var(--n-text)}
.pbn .tl{margin-top:4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--n-muted)}

/* each chart sits in a panel */
.pbn .block{background:var(--n-panel);border:1px solid var(--n-edge);border-radius:10px;padding:14px 14px 10px;margin:0 0 12px}

/* bars: label, the bar from a hairline baseline, the value at its tip */
.pbn .bars{list-style:none;margin:0;padding:0}
.pbn .bars li{display:grid;grid-template-columns:minmax(8em,12.5em) 1fr 4.2em;align-items:center;gap:8px;padding:3px 0}
.pbn .bl{font-size:12.5px;color:var(--n-text);overflow-wrap:anywhere}
.pbn .bt{display:block;height:16px;border-left:1px solid var(--n-hair)}
.pbn .b{display:block;height:16px;background:var(--n-mark);border-radius:0 4px 4px 0;min-width:2px}
.pbn .bars li:hover .b{background:var(--n-mark-hi)}
.pbn .bv{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--n-text)}

/* columns: games by hour, on one baseline; the busiest one wears its value */
.pbn .cols{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:150px;border-bottom:1px solid var(--n-hair);padding-top:18px}
.pbn .col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.pbn .c{position:relative;display:block;flex:none;width:100%;max-width:24px;background:var(--n-mark);border-radius:4px 4px 0 0}
.pbn .col:hover .c{background:var(--n-mark-hi)}
.pbn .cap{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;font-size:11px;color:var(--n-text);line-height:1;font-variant-numeric:tabular-nums}
.pbn .xs{display:grid;grid-template-columns:repeat(8,1fr);margin:4px 0 6px;font-size:11px;color:var(--n-muted)}

/* tables: the charts' data, and the record history */
.pbn details.tbl{margin:8px 0 2px}
.pbn details.tbl summary{cursor:pointer;color:var(--n-muted);font-size:12px}
.pbn table{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:12.5px;font-variant-numeric:tabular-nums}
.pbn th{text-align:left;font-weight:normal;color:var(--n-muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--n-hair);padding:4px 6px}
.pbn td{padding:4px 6px;border-bottom:1px solid rgba(33,64,43,.5)}
.pbn td+td,.pbn th+th{text-align:right}
.pbn table.rec td:last-child,.pbn table.rec th:last-child{text-align:left}

/* secrets found */
.pbn .secrets{list-style:none;margin:0;padding:0}
.pbn .secrets li{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px solid rgba(33,64,43,.5);color:var(--n-muted);font-size:12.5px}
.pbn .secrets li span{flex:1;color:var(--n-text)}
.pbn .secrets b{font-family:var(--n-disp);font-size:20px;font-weight:normal;color:var(--n-text)}

@media (max-width:480px){
  .pbn{padding:14px 12px 16px;border-radius:10px}
  .pbn .hv{font-size:60px}
  .pbn .bars li{grid-template-columns:minmax(6.5em,9em) 1fr 3.8em;gap:6px}
  .pbn .cols{height:120px;gap:1px}
}
/* bar lengths and column heights, in percent */
.pbn .w0{width:0%}.pbn .w1{width:1%}.pbn .w2{width:2%}.pbn .w3{width:3%}.pbn .w4{width:4%}.pbn .w5{width:5%}.pbn .w6{width:6%}.pbn .w7{width:7%}.pbn .w8{width:8%}.pbn .w9{width:9%}.pbn .w10{width:10%}.pbn .w11{width:11%}.pbn .w12{width:12%}.pbn .w13{width:13%}.pbn .w14{width:14%}.pbn .w15{width:15%}.pbn .w16{width:16%}.pbn .w17{width:17%}.pbn .w18{width:18%}.pbn .w19{width:19%}.pbn .w20{width:20%}.pbn .w21{width:21%}.pbn .w22{width:22%}.pbn .w23{width:23%}.pbn .w24{width:24%}.pbn .w25{width:25%}.pbn .w26{width:26%}.pbn .w27{width:27%}.pbn .w28{width:28%}.pbn .w29{width:29%}.pbn .w30{width:30%}.pbn .w31{width:31%}.pbn .w32{width:32%}.pbn .w33{width:33%}.pbn .w34{width:34%}.pbn .w35{width:35%}.pbn .w36{width:36%}.pbn .w37{width:37%}.pbn .w38{width:38%}.pbn .w39{width:39%}.pbn .w40{width:40%}.pbn .w41{width:41%}.pbn .w42{width:42%}.pbn .w43{width:43%}.pbn .w44{width:44%}.pbn .w45{width:45%}.pbn .w46{width:46%}.pbn .w47{width:47%}.pbn .w48{width:48%}.pbn .w49{width:49%}.pbn .w50{width:50%}.pbn .w51{width:51%}.pbn .w52{width:52%}.pbn .w53{width:53%}.pbn .w54{width:54%}.pbn .w55{width:55%}.pbn .w56{width:56%}.pbn .w57{width:57%}.pbn .w58{width:58%}.pbn .w59{width:59%}.pbn .w60{width:60%}.pbn .w61{width:61%}.pbn .w62{width:62%}.pbn .w63{width:63%}.pbn .w64{width:64%}.pbn .w65{width:65%}.pbn .w66{width:66%}.pbn .w67{width:67%}.pbn .w68{width:68%}.pbn .w69{width:69%}.pbn .w70{width:70%}.pbn .w71{width:71%}.pbn .w72{width:72%}.pbn .w73{width:73%}.pbn .w74{width:74%}.pbn .w75{width:75%}.pbn .w76{width:76%}.pbn .w77{width:77%}.pbn .w78{width:78%}.pbn .w79{width:79%}.pbn .w80{width:80%}.pbn .w81{width:81%}.pbn .w82{width:82%}.pbn .w83{width:83%}.pbn .w84{width:84%}.pbn .w85{width:85%}.pbn .w86{width:86%}.pbn .w87{width:87%}.pbn .w88{width:88%}.pbn .w89{width:89%}.pbn .w90{width:90%}.pbn .w91{width:91%}.pbn .w92{width:92%}.pbn .w93{width:93%}.pbn .w94{width:94%}.pbn .w95{width:95%}.pbn .w96{width:96%}.pbn .w97{width:97%}.pbn .w98{width:98%}.pbn .w99{width:99%}.pbn .w100{width:100%}
.pbn .h0{height:0%}.pbn .h1{height:1%}.pbn .h2{height:2%}.pbn .h3{height:3%}.pbn .h4{height:4%}.pbn .h5{height:5%}.pbn .h6{height:6%}.pbn .h7{height:7%}.pbn .h8{height:8%}.pbn .h9{height:9%}.pbn .h10{height:10%}.pbn .h11{height:11%}.pbn .h12{height:12%}.pbn .h13{height:13%}.pbn .h14{height:14%}.pbn .h15{height:15%}.pbn .h16{height:16%}.pbn .h17{height:17%}.pbn .h18{height:18%}.pbn .h19{height:19%}.pbn .h20{height:20%}.pbn .h21{height:21%}.pbn .h22{height:22%}.pbn .h23{height:23%}.pbn .h24{height:24%}.pbn .h25{height:25%}.pbn .h26{height:26%}.pbn .h27{height:27%}.pbn .h28{height:28%}.pbn .h29{height:29%}.pbn .h30{height:30%}.pbn .h31{height:31%}.pbn .h32{height:32%}.pbn .h33{height:33%}.pbn .h34{height:34%}.pbn .h35{height:35%}.pbn .h36{height:36%}.pbn .h37{height:37%}.pbn .h38{height:38%}.pbn .h39{height:39%}.pbn .h40{height:40%}.pbn .h41{height:41%}.pbn .h42{height:42%}.pbn .h43{height:43%}.pbn .h44{height:44%}.pbn .h45{height:45%}.pbn .h46{height:46%}.pbn .h47{height:47%}.pbn .h48{height:48%}.pbn .h49{height:49%}.pbn .h50{height:50%}.pbn .h51{height:51%}.pbn .h52{height:52%}.pbn .h53{height:53%}.pbn .h54{height:54%}.pbn .h55{height:55%}.pbn .h56{height:56%}.pbn .h57{height:57%}.pbn .h58{height:58%}.pbn .h59{height:59%}.pbn .h60{height:60%}.pbn .h61{height:61%}.pbn .h62{height:62%}.pbn .h63{height:63%}.pbn .h64{height:64%}.pbn .h65{height:65%}.pbn .h66{height:66%}.pbn .h67{height:67%}.pbn .h68{height:68%}.pbn .h69{height:69%}.pbn .h70{height:70%}.pbn .h71{height:71%}.pbn .h72{height:72%}.pbn .h73{height:73%}.pbn .h74{height:74%}.pbn .h75{height:75%}.pbn .h76{height:76%}.pbn .h77{height:77%}.pbn .h78{height:78%}.pbn .h79{height:79%}.pbn .h80{height:80%}.pbn .h81{height:81%}.pbn .h82{height:82%}.pbn .h83{height:83%}.pbn .h84{height:84%}.pbn .h85{height:85%}.pbn .h86{height:86%}.pbn .h87{height:87%}.pbn .h88{height:88%}.pbn .h89{height:89%}.pbn .h90{height:90%}.pbn .h91{height:91%}.pbn .h92{height:92%}.pbn .h93{height:93%}.pbn .h94{height:94%}.pbn .h95{height:95%}.pbn .h96{height:96%}.pbn .h97{height:97%}.pbn .h98{height:98%}.pbn .h99{height:99%}.pbn .h100{height:100%}