/* dadops.gg/supply-run (SUPPLY-RUN.md, supabase/168-supply-run.sql).
   Everything is scoped to the game box (#srun-app) so the site's own styles
   don't leak in. Its own dark olive look, on purpose, in light and dark. */
#srun-app{
  --ink:#14170f; --panel:#1f2418; --panel-2:#2a3020; --line:#3a4229;
  --sand:#e7dcc0; --khaki:#c8b98a; --muted:#b3a679;
  --amber:#e0a526; --amber-hi:#f2c25a; --olive:#4b5320; --ok:#8fbf5a; --danger:#ff7a6a;
  --display:'Black Ops One',Impact,'Arial Black',sans-serif;
  --cond:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:Barlow,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
  position:relative;width:100%;height:min(78vh,760px);min-height:540px;overflow:hidden;background:var(--ink);color:var(--sand);
  font-family:var(--body);font-size:15px;line-height:1.4;-webkit-user-select:none;user-select:none;
  border:1px solid var(--line);border-radius:8px;box-sizing:border-box
}
#srun-app.srun-playing{touch-action:none}
#srun-app:fullscreen{height:100vh;min-height:0;border:0;border-radius:0}
#srun-app *,#srun-app *::before,#srun-app *::after{box-sizing:border-box}
#srun-view{display:block;width:100%;height:100%}
#srun-app button{font:inherit;color:inherit;margin:0}
#srun-app button:focus-visible,#srun-app a:focus-visible{outline:3px solid var(--amber-hi);outline-offset:3px}
#srun-app kbd{font-family:var(--mono);font-size:12px;color:var(--sand);padding:3px 7px;border:1px solid #5a6440;border-radius:3px;white-space:nowrap;background:none}
.srun-lbl{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--khaki);text-transform:uppercase}
.srun-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* HUD */
#srun-hud{position:absolute;inset:0;pointer-events:none}
#srun-hud[hidden]{display:none!important}
.srun-hud-tl{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));top:12px;display:flex;flex-direction:column;gap:8px;width:210px}
.srun-hud-tc{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;gap:22px;align-items:center;padding:8px 18px;background:rgba(20,23,15,.84);border:1px solid var(--line);border-radius:6px}
.srun-hud-tr{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.srun-big{font-family:var(--mono);font-size:36px;line-height:1;font-variant-numeric:tabular-nums}
.srun-stack{display:flex;flex-direction:column;align-items:center;gap:3px}
.srun-panel{background:rgba(20,23,15,.86);border:1px solid var(--line);border-radius:6px}
.srun-armor{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.srun-armor .srun-row{display:flex;justify-content:space-between;align-items:baseline}
.srun-bar{height:9px;background:#2e3523;border-radius:5px;overflow:hidden}
#srun-hArmorBar{height:100%;width:100%;background:var(--ok);transition:width .2s}
.srun-pips{display:flex;gap:4px}
.srun-pip{width:18px;height:18px;border:2px dashed #6b7a3a}
.srun-pip.srun-on{background:#a07a45;border:2px solid var(--amber)}
#srun-hPallet{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--ink);background:var(--ok);padding:2px 8px;border-radius:3px}
#srun-mini{display:block;width:180px;height:auto;border-radius:6px;border:1px solid var(--line);background:rgba(20,23,15,.9)}
.srun-hud-btns{display:flex;gap:6px;pointer-events:auto}
.srun-hud-btns button{height:34px;padding:0 12px;border-radius:4px;border:1px solid var(--line);background:rgba(20,23,15,.86);font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.06em;cursor:pointer}
.srun-hud-btns button:hover{border-color:var(--khaki)}
#srun-radio{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(620px,calc(100% - 32px));padding:12px 16px;display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4;transition:opacity .3s}
#srun-radio .srun-tag{flex:none;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--khaki);padding:2px 6px;border-radius:2px;margin-top:2px}
#srun-radio strong{color:var(--amber)}
#srun-radio.srun-off{opacity:0}

/* touch */
#srun-touch{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;padding:0 calc(14px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));pointer-events:none}
#srun-touch .srun-grp{display:flex;gap:10px;pointer-events:auto}
#srun-touch button{width:72px;height:72px;border-radius:12px;border:2px solid var(--line);background:rgba(20,23,15,.72);display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.08em;touch-action:none}
#srun-touch button.srun-gas{background:rgba(224,165,38,.85);color:var(--ink);border-color:var(--amber);width:84px;height:84px}
#srun-touch button.srun-down{border-color:var(--amber-hi);background:rgba(224,165,38,.35)}
#srun-touch button.srun-gas.srun-down{background:var(--amber-hi)}
.srun-touch #srun-touch{display:flex}
.srun-touch #srun-radio{bottom:calc(112px + env(safe-area-inset-bottom,0px))}

/* overlays */
.srun-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:22px 18px;background:rgba(14,16,10,.74);overflow-y:auto;pointer-events:auto}
.srun-overlay[hidden]{display:none!important}
.srun-sheet{width:min(1120px,100%);margin:auto;display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
.srun-hero{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px}
.srun-eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:.2em;color:var(--amber)}
h1.srun-title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(48px,7vw,84px);line-height:.9;letter-spacing:.02em;color:var(--sand);text-wrap:balance}
.srun-lede{margin:0;font-size:19px;line-height:1.5;color:#d4c7a1;max-width:34em}
.srun-btns{display:flex;gap:12px;flex-wrap:wrap}
.srun-btn{height:54px;padding:0 30px;border-radius:4px;border:1.5px solid #6b7a3a;background:transparent;font-family:var(--cond);font-weight:600;font-size:20px;letter-spacing:.08em;cursor:pointer;text-transform:uppercase}
.srun-btn:hover{border-color:var(--khaki)}
.srun-btn.srun-primary{background:var(--amber);border-color:var(--amber);color:var(--ink);font-weight:700}
.srun-btn.srun-primary:hover{background:var(--amber-hi)}
.srun-horton{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;background:var(--panel);border:1px solid var(--line);border-radius:6px;max-width:600px}
.srun-badge{flex:none;width:42px;height:42px;border-radius:21px;background:var(--olive);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px}
.srun-horton p{margin:0;font-size:16px;line-height:1.45}
.srun-horton .srun-who{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.08em;color:var(--khaki);margin-bottom:3px}
.srun-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.srun-mapc{display:flex;flex-direction:column;gap:6px;padding:10px;text-align:left;background:var(--panel);border:1.5px solid var(--line);border-radius:6px;cursor:pointer}
.srun-mapc:hover{border-color:#6b7a3a}
.srun-mapc[aria-pressed="true"]{border-color:var(--amber);background:#2a2814}
.srun-mapc canvas{display:block;width:100%;height:auto;border-radius:4px;background:#14170f}
.srun-mapc .srun-nm{font-family:var(--cond);font-weight:700;font-size:19px;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.srun-diff{font-size:12px;letter-spacing:.1em;padding:1px 6px;border-radius:3px;color:var(--ink)}
.srun-diff.srun-e{background:var(--ok)} .srun-diff.srun-m{background:var(--amber)} .srun-diff.srun-h{background:var(--danger)}
.srun-mapc .srun-bl{font-size:13.5px;line-height:1.4;color:#d4c7a1}
.srun-mapc .srun-bs{font-size:12.5px;color:var(--muted)}
.srun-mapc .srun-bs .srun-num{color:var(--amber)}
.srun-side{flex:1 1 320px;max-width:420px;min-width:0;padding:22px;background:rgba(31,36,24,.95);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;gap:14px}
.srun-side h2,.srun-card h2{margin:0;font-family:var(--cond);font-weight:700;font-size:21px;letter-spacing:.08em}
.srun-keys{display:grid;grid-template-columns:auto 1fr;gap:9px 12px;align-items:center;font-size:15px;color:#d4c7a1}
.srun-rules{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.45;color:#d4c7a1}
.srun-fine{font-size:13px;color:var(--muted);line-height:1.45;border-top:1px solid var(--line);padding-top:12px}
.srun-best{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--khaki);gap:10px}
.srun-best .srun-num{font-size:22px;color:var(--amber)}

.srun-card{padding:22px 26px;background:var(--panel);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;gap:4px}
.srun-deb{width:min(1000px,100%);margin:auto;display:flex;flex-direction:column;gap:22px}
.srun-deb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.srun-deb-head h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(44px,7vw,64px);line-height:1}
.srun-chips{display:flex;gap:8px;flex-wrap:wrap}
.srun-chip{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--ink);background:var(--amber);padding:5px 11px;border-radius:3px}
.srun-chip.srun-ok{background:var(--ok)}
.srun-chip.srun-map{background:var(--khaki)}
.srun-deb-body{display:flex;gap:24px;flex-wrap:wrap}
.srun-deb-body .srun-card{flex:1 1 420px;min-width:0}
.srun-deb-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:18px}
.srun-srow{display:grid;grid-template-columns:1fr auto 90px;gap:10px;padding:10px 0;border-bottom:1px solid #2e3523;font-size:17px;align-items:baseline}
.srun-srow .srun-x{color:var(--muted)}
.srun-srow .srun-v{text-align:right}
.srun-srow.srun-total{border:0;font-size:21px;font-weight:600;padding-top:14px}
.srun-srow.srun-total .srun-v{color:var(--amber);font-size:30px}
.srun-neg{color:var(--danger)}
.srun-stats{display:flex;gap:20px;flex-wrap:wrap;font-size:15px;color:var(--khaki);padding-top:14px}
.srun-stats strong{color:var(--sand)}
.srun-copyfall{width:100%;font-family:var(--mono);font-size:13px;background:var(--ink);color:var(--sand);border:1px solid var(--line);border-radius:4px;padding:8px;-webkit-user-select:text;user-select:text}
.srun-pause-box{width:min(420px,100%);margin:auto;padding:28px;display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:center}
.srun-pause-box h1{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:48px}

@media (max-width:700px){
  #srun-app{height:78vh;min-height:520px}
  .srun-hud-tl{width:150px}
  .srun-big{font-size:26px}
  .srun-hud-tc{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:14px;padding:6px 12px}
  #srun-radio{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .srun-touch .srun-hud-tc{bottom:calc(108px + env(safe-area-inset-bottom,0px))}
  .srun-touch #srun-radio{bottom:calc(178px + env(safe-area-inset-bottom,0px))}
  .srun-armor .srun-row:last-child{display:none}
  .srun-hud-tc .srun-big{font-size:22px}
  #srun-mini{width:120px}
  .srun-armor{padding:8px 10px}
  .srun-lede{font-size:17px}
  .srun-maps{grid-template-columns:1fr}
  .srun-mapc{flex-direction:row;align-items:center}
  .srun-mapc canvas{width:110px;flex:none}
  .srun-mapc .srun-txt{min-width:0}
}
@media (prefers-reduced-motion:reduce){ #srun-radio,#srun-hArmorBar{transition:none} }

#srun-app h1,#srun-app h2,#srun-app p,#srun-app ul{text-transform:none}
#srun-app .srun-side h2,#srun-app .srun-card h2{font-family:var(--cond);color:var(--sand)}
#srun-app .srun-res{font-size:14px;line-height:1.45;color:var(--khaki)}
#srun-app .srun-res b{color:var(--sand)}

/* The page around the game, in the site's own look */
.srun-page .prose{margin-bottom:18px}
.srun-boardwrap{margin-top:30px;display:flex;flex-direction:column;gap:10px}
.srun-boardwrap h2{margin:0}
table.srun-board tr.srun-mine td{background:var(--surface-2)}
table.srun-board td .rank{margin-left:6px}