/* Hack the Planet Pinball: https://magikh0e.pl/pinball/
   Copyright (C) 2026 magikh0e. SPDX-License-Identifier: GPL-3.0-only
   (https://www.gnu.org/licenses/gpl-3.0.html) */

/* ===== Hack the Planet Pinball (/pinball/): page-local styles =====
   Everything is scoped under .pb. magik.css owns --green, --cyan, --bg and
   friends on :root, so the game's phosphor palette lives in its own --pb-*
   tokens and never recolours the site chrome. */
.pb{
  --pb-panel:#0b0f0b; --pb-edge:#15351f;
  --pb-green:#39ff8c; --pb-green-dim:#1f7a46; --pb-cyan:#59e0ff; --pb-amber:#ffb347;
  --pb-text:#bfeaca; --pb-muted:#5a8a67;
  --pb-disp:"VT323","JetBrains Mono",monospace;
  --pb-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  box-sizing:border-box;width:100%;max-width:420px;margin:0 auto;padding:0 12px;
  display:flex;flex-direction:column;gap:8px;color:var(--pb-text);font-family:var(--pb-mono)}
.pb *{box-sizing:border-box}

.pb .hud{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;line-height:1.1}
.pb .hud .block{min-width:0}
.pb .hud .lbl{font-size:10px;letter-spacing:.22em;color:var(--pb-muted);text-transform:uppercase}
.pb .hud .score{font-family:var(--pb-disp);font-size:40px;color:var(--pb-green);
  text-shadow:0 0 10px rgba(57,255,140,.5);line-height:.9;font-variant-numeric:tabular-nums}
.pb .hud .right{text-align:right}
.pb .hud .balls{font-family:var(--pb-disp);font-size:30px;color:var(--pb-cyan);line-height:.9}
.pb .hud .mult{font-family:var(--pb-disp);font-size:24px;color:var(--pb-amber);line-height:.9}

.pb .lanes{display:flex;gap:6px;justify-content:center;font-family:var(--pb-disp);font-size:24px}
.pb .lanes span{width:30px;text-align:center;color:var(--pb-green-dim);border:1px solid var(--pb-edge);
  border-radius:4px;background:var(--pb-panel);transition:all .12s}
.pb .lanes span.on{color:#061006;background:var(--pb-green);box-shadow:0 0 12px rgba(57,255,140,.7)}

.pb .stage{position:relative;width:100%;border:1px solid var(--pb-edge);border-radius:10px;overflow:hidden;
  background:#070b07;box-shadow:0 18px 50px -18px rgba(0,0,0,.8),0 0 0 1px rgba(57,255,140,.05) inset}
.pb canvas{display:block;width:100%;height:auto;touch-action:none}

.pb .msg{font-family:var(--pb-disp);font-size:20px;color:var(--pb-amber);text-align:center;min-height:24px;
  text-shadow:0 0 8px rgba(255,179,71,.4)}

.pb .overlay{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;
  background:rgba(4,8,5,.84);backdrop-filter:blur(2px);text-align:center;padding:18px 16px}
.pb .ov-inner{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:300px}
.pb .ov-title{font-family:var(--pb-disp);font-size:clamp(34px,10vw,52px);color:var(--pb-green);
  letter-spacing:.04em;text-shadow:0 0 16px rgba(57,255,140,.5);line-height:.95}
.pb .overlay p{margin:0;padding:0;max-width:30ch;color:var(--pb-text);font-size:14px;line-height:1.5}
.pb .btn{font-family:var(--pb-disp);font-size:26px;letter-spacing:.06em;color:#061006;background:var(--pb-green);
  border:none;border-radius:8px;padding:6px 26px;cursor:pointer;box-shadow:0 0 18px rgba(57,255,140,.5)}
.pb .btn:focus-visible{outline:3px solid var(--pb-cyan);outline-offset:2px}
.pb .hint{color:var(--pb-muted);font-size:12px;line-height:1.6;text-align:center}
.pb .hint b{color:var(--pb-green)}
.pb .hl{color:var(--pb-green)}
.pb .hidden{display:none!important}
.pb .license{color:var(--pb-muted);font-size:10px;letter-spacing:.12em;text-align:center;opacity:.8}

/* score card: a secondary button on the game-over screen and a preview layer */
.pb .ghost{font-family:var(--pb-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pb-green);
  background:transparent;border:1px solid var(--pb-green-dim);border-radius:999px;padding:5px 14px;cursor:pointer}
.pb .ghost:hover{border-color:var(--pb-green)}
.pb .ghost:focus-visible{outline:2px solid var(--pb-cyan);outline-offset:2px}
.pb .cardview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,5,.94);padding:14px;overflow-y:auto}
.pb .card-inner{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.pb .card-inner img{display:block;width:100%;height:auto;border:1px solid var(--pb-edge);border-radius:6px;
  box-shadow:0 0 24px rgba(57,255,140,.15)}
.pb .card-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pb .card-note{color:var(--pb-muted);font-size:11px;text-align:center;min-height:1em}

/* sound toggles */
.pb .ctrls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pb .chip{font-family:var(--pb-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pb-green);
  background:var(--pb-panel);border:1px solid var(--pb-green-dim);border-radius:999px;padding:4px 12px;cursor:pointer}
.pb .chip[aria-pressed="false"]{color:var(--pb-muted);border-color:var(--pb-edge)}
.pb .chip:focus-visible{outline:2px solid var(--pb-cyan);outline-offset:2px}

/* full screen (real, or the CSS fallback): the column fills the screen and every
   row takes the table's width, which is sized from the screen height */
.pb:fullscreen,.pb.is-full{--pb-fw:min(calc(100vw - 32px),calc((100vh - 200px) / 1.5));
  justify-content:center;align-items:center;margin:0;padding:10px 16px;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 0%,#0a140d 0%,#060806 70%)}
@supports (height:100dvh){.pb:fullscreen,.pb.is-full{--pb-fw:min(calc(100vw - 32px),calc((100dvh - 200px) / 1.5))}}
.pb.is-full{position:fixed;inset:0;z-index:10000;max-width:none}
.pb:fullscreen>*,.pb.is-full>*{width:var(--pb-fw);max-width:100%}
.pb:fullscreen .hint,.pb.is-full .hint,.pb:fullscreen .license,.pb.is-full .license{display:none}
html.pb-noscroll,html.pb-noscroll body{overflow:hidden}

/* high score table / lifetime stats (two tabs) + handle entry */
.pb .hs-wrap{width:100%}
.pb .hs-tabs{display:flex;justify-content:center;gap:16px;margin-bottom:4px}
.pb .hs-tab{font-family:var(--pb-disp);font-size:20px;letter-spacing:.14em;color:var(--pb-muted);
  background:none;border:none;padding:0;cursor:pointer}
.pb .hs-tab[aria-selected="true"]{color:var(--pb-cyan);text-shadow:0 0 8px rgba(89,224,255,.45)}
.pb .hs-tab:focus-visible{outline:2px solid var(--pb-cyan);outline-offset:2px}
.pb .st{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;margin:0;font-family:var(--pb-mono);font-size:12px;
  line-height:1.6;font-variant-numeric:tabular-nums;text-align:left}
.pb .st div{display:flex;justify-content:space-between;gap:8px;min-width:0}
.pb .st dt{color:var(--pb-text);white-space:nowrap}
.pb .st dd{margin:0;color:var(--pb-green);text-align:right;white-space:nowrap}
.pb .st .none{grid-column:1/-1;justify-content:center;color:var(--pb-muted)}
.pb .st .rank{grid-column:1/-1;flex-direction:column;align-items:center;gap:0;margin-bottom:4px;text-align:center}
.pb .st .rank dt{color:var(--pb-muted);font-size:10px;letter-spacing:.2em}
.pb .st .rank dd{font-family:var(--pb-disp);font-size:22px;line-height:1;color:var(--pb-amber);text-align:center}
.pb .st .rank .next{color:var(--pb-muted);font-size:10px}

/* today's mission, under the intro on the title / game-over screen */
.pb .overlay p.mission{font-size:12px;line-height:1.45;color:var(--pb-amber);border:1px dashed rgba(255,179,71,.45);
  border-radius:6px;padding:4px 10px}
.pb .overlay p.mission b{display:block;font-size:10px;letter-spacing:.22em;color:var(--pb-muted);font-weight:400}
.pb .overlay p.mission.done{color:var(--pb-green);border-color:rgba(57,255,140,.45)}
/* worldwide counter */
.pb .overlay p.world{max-width:none;font-size:11px;letter-spacing:.14em;color:var(--pb-cyan)}
.pb .st .world{grid-column:1/-1;flex-direction:column;align-items:center;gap:0;margin-bottom:6px;text-align:center}
.pb .st .world dt{color:var(--pb-muted);font-size:10px;letter-spacing:.2em}
.pb .st .world dd{color:var(--pb-cyan);text-align:center;white-space:normal}
.pb .hs{list-style:none;margin:0;padding:0;font-family:var(--pb-mono);font-size:12px;line-height:1.6;
  font-variant-numeric:tabular-nums;text-align:left}
.pb .hs li{display:grid;grid-template-columns:2.8ch 1fr auto;gap:8px;padding:0 6px;border-radius:3px;color:var(--pb-text)}
.pb .hs .rk{color:var(--pb-muted);text-align:right}
.pb .hs .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb .hs .sc{text-align:right;color:var(--pb-green)}
.pb .hs li.cpu{color:var(--pb-muted)}
.pb .hs li.cpu .sc{color:var(--pb-green-dim)}
.pb .hs li.you{background:rgba(57,255,140,.14);color:#eafff1;box-shadow:inset 0 0 0 1px rgba(57,255,140,.5);
  animation:pbHsPulse 1.2s ease-in-out infinite}
.pb .hs li.you .rk{color:var(--pb-green)}
@keyframes pbHsPulse{50%{background:rgba(57,255,140,.3)}}
.pb .entry{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.pb .entry label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--pb-muted)}
.pb .entry input{width:100%;max-width:240px;font-family:var(--pb-disp);font-size:28px;line-height:1.1;text-align:center;
  text-transform:uppercase;letter-spacing:.08em;color:var(--pb-green);background:#050905;
  border:1px solid var(--pb-green-dim);border-radius:6px;padding:4px 8px;caret-color:var(--pb-green);outline:none}
.pb .entry input::placeholder{color:var(--pb-green-dim);opacity:.6}
.pb .entry input:focus-visible{border-color:var(--pb-cyan);box-shadow:0 0 0 2px rgba(89,224,255,.35)}
/* phones: the stage is short, so tighten the overlay to keep LAUNCH and most of the table in view */
@media (max-width:420px){
  .pb .overlay{padding:12px}
  .pb .ov-inner{gap:8px}
  .pb .overlay p{font-size:13px;line-height:1.4}
  .pb .hs,.pb .st{line-height:1.45}
}
@media (prefers-reduced-motion:reduce){.pb *{transition:none!important;animation:none!important}}