/* Shared by every Tinpot Wars demo page: the palette, and the two things both pages
   draw -- a tank's stat sheet and its driver program. Extracted from demo.html when
   the garage needed the same cards; one card style, not two that drift apart. */
:root{--bg:#1D1B33;--panel:#2A2746;--ink:#F1EEFF;--muted:#B3ADD6;--line:#0C0A1C;--acc:#C6DC2E;--hot:#E8458F}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Atkinson Hyperlegible',system-ui,sans-serif;line-height:1.45}
h1{font-family:Bungee,Impact,sans-serif;font-weight:400;font-size:clamp(1.5rem,5vw,2.4rem);margin:0 0 2px;
   text-shadow:3px 3px 0 var(--acc),6px 6px 0 var(--hot)}
.sub{color:var(--muted);margin:0 0 14px;font-size:.92rem}
.muted{color:var(--muted)}

button,select,input,textarea{font:inherit;font-weight:700;color:var(--ink);background:var(--panel);
  border:2px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
select,input,textarea{border-radius:9px;cursor:auto}
button[aria-pressed=true]{background:var(--acc);color:#231F3A}
button[disabled]{opacity:.5;cursor:default}

.panel{background:var(--panel);border:3px solid var(--line);border-radius:12px;padding:12px}
.panel h2{margin:0 0 8px;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}

/* --- tank card ------------------------------------------------------------- */
.card{border-width:3px;font-size:.84rem}
.ch{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.ch b{font-size:1rem}
.sheet{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.stat{display:grid;grid-template-columns:62px 1fr 18px;align-items:center;gap:6px}
.stat .k{color:var(--muted);font-size:.74rem}
.stat .v{text-align:right;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pips{display:flex;gap:2px}
.pips i{flex:1;height:8px;border-radius:2px;background:rgba(241,238,255,.12)}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 8px}
.tag{background:rgba(241,238,255,.1);border-radius:99px;padding:2px 8px;font-size:.7rem}
.tag.over{background:var(--hot);color:#fff;font-weight:700}

/* The driver program. Monospace because it is code, even though an AI wrote it. */
ol.rules{list-style:none;margin:0;padding:0;max-height:none;font-size:.76rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
ol.rules li{padding:2px 6px;border:0;border-left:3px solid transparent;border-radius:3px;
  color:var(--muted);transition:background .1s}
ol.rules li.dflt{opacity:.75}
ol.rules li.now{background:rgba(198,220,46,.16);border-left-color:var(--acc);color:var(--ink)}