/* ============================================================
   TagArcade Now — shared kit CSS (design tokens + retro components)
   Ported from raiders2/style.css :root + panel system, generalized.
   Every game <link>s this first, then its own game.css on top.
   ============================================================ */
:root{
  --bg0:#04070f; --bg1:#0a0f1e;
  --blue:#4a7bff; --blue2:#2f5bff; --cyan:#22d3ee; --sky:#7aa2ff;
  --ink:#dbe7ff; --dim:#9bafff; --faint:#5a6b96;
  --ok:#44ff88; --warn:#ffd23c; --bad:#ff5a6a;
  /* per-cabinet accents (also used by games as their theme color) */
  --a-raiders:#4a7bff; --a-snake:#44ff44; --a-bricks:#ffaa44;
  --a-gemfall:#ff44aa; --a-dig:#c9884a; --a-isles:#22d3ee; --a-parlor:#aa44ff;
  /* retro panel system: flat near-black fill, solid blue edge, hard blue glow (no glass blur) */
  --panel:#05070f; --edge:#4a7bff; --edge-soft:rgba(74,123,255,.55);
  --glow:0 0 0 1px rgba(74,123,255,.22), 0 0 20px rgba(74,123,255,.20);
  /* type: Press Start 2P = chunky marquees only; VT323 = everything else */
  --f-pixel:'Press Start 2P',monospace; --f-ui:'VT323','Courier New',monospace;
  /* accent slot a game overrides: :root{ --accent:var(--a-snake) } */
  --accent:var(--blue);
}
*{margin:0;padding:0;box-sizing:border-box;}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:var(--f-ui);cursor:pointer;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg0);color:var(--ink);
  font-family:var(--f-ui);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:none;}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges;}

/* safe-area probe: JS reads its computed padding for the real camera-cutout / notch insets */
#sa-probe{position:fixed;top:0;left:0;width:0;height:0;visibility:hidden;pointer-events:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}

/* scanline + noise overlays (arcade CRT vibe) */
.scan{position:fixed;inset:0;pointer-events:none;z-index:901;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.13) 2px 3px);}
@media (prefers-reduced-motion: reduce){ .scan{opacity:.12;} }

/* ---------- retro panels ---------- */
.panel{background:var(--panel);border:2px solid var(--edge);box-shadow:var(--glow);border-radius:0;}
.panel.soft{border-color:var(--edge-soft);}

/* ---------- retro buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-ui);font-size:20px;letter-spacing:1px;color:var(--ink);
  background:#0a1224;border:2px solid var(--edge);box-shadow:0 2px 0 #02040a,var(--glow);
  padding:10px 18px;min-height:46px;border-radius:0;}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #02040a,var(--glow);}
.btn.primary{background:linear-gradient(180deg,#12244e,#0a1428);border-color:var(--accent);color:#fff;}
.btn.ghost{background:rgba(10,16,30,.5);border-color:var(--edge-soft);color:var(--dim);}
.btn.small{font-size:15px;min-height:34px;padding:6px 12px;}

/* pixel headings */
h1.pix,h2.pix,.pix{font-family:var(--f-pixel);color:#fff;text-shadow:0 0 16px rgba(74,123,255,.6);}

/* ---------- kit overlays (ui.js) ---------- */
#kit-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:1200;background:#050a16;border:2px solid var(--accent);box-shadow:var(--glow);
  padding:10px 16px;font-size:17px;color:#eaf2ff;max-width:88vw;text-align:center;opacity:0;
  transition:opacity .2s, transform .2s;pointer-events:none;}
#kit-toast.on{opacity:1;transform:translateX(-50%) translateY(-4px);}

#kit-banner{position:fixed;left:0;right:0;top:34%;z-index:1150;text-align:center;pointer-events:none;
  font-family:var(--f-pixel);font-size:clamp(18px,6vw,42px);color:#fff;
  text-shadow:0 0 22px var(--accent),0 4px 0 #02040a;opacity:0;transform:scale(.8);}
#kit-banner.on{animation:kitBanner 1.6s ease-out forwards;}
@keyframes kitBanner{0%{opacity:0;transform:scale(.7)}15%{opacity:1;transform:scale(1.05)}
  30%{transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}

/* pause / back overlay */
#kit-pause{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;
  background:rgba(2,4,10,.82);}
#kit-pause.on{display:flex;}
#kit-pause .card{width:min(340px,86vw);padding:22px 18px;text-align:center;}
#kit-pause .card h2{font-family:var(--f-pixel);font-size:18px;color:#fff;margin-bottom:18px;text-shadow:0 0 14px var(--accent);}
#kit-pause .card .btn{width:100%;margin:7px 0;}

/* floating pause chip (top-right, in every game) */
#kit-pausebtn{position:fixed;top:calc(8px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
  z-index:60;width:42px;height:42px;display:grid;place-items:center;font-size:17px;color:var(--dim);
  background:rgba(6,10,20,.6);border:2px solid var(--edge-soft);border-radius:0;}
#kit-pausebtn:active{color:#fff;border-color:var(--accent);}

/* settings rows (shared) */
.set-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid rgba(74,123,255,.14);}
.set-row label{flex:1;font-size:18px;color:var(--dim);}
.set-row input[type=range]{flex:1;accent-color:var(--accent);height:26px;}
.set-row .val{width:46px;text-align:right;font-size:16px;color:#eaf2ff;}

/* screen-mode pills (shared, raiders pattern) */
.sm-pill{font-family:var(--f-ui);font-size:15px;padding:6px 10px;color:var(--dim);
  background:#0a1224;border:2px solid var(--edge-soft);border-radius:0;}
.sm-pill.on{color:#fff;border-color:var(--accent);background:#12244e;}