/* ============================================================
   OptiDice Arcade — "The Optimizer"
   Retro / neon CRT theme. No build step, no framework.
   ============================================================ */

:root {
  --bg:        #070a11;
  --bg-2:      #0c1322;
  --panel:     #111a2c;
  --panel-2:   #0c1626;
  --panel-3:   #0a1120;
  --ink:       #e3ecff;
  --ink-dim:   #8aa0c8;
  --ink-faint: #5a6e94;
  --line:      #1c2a44;

  --cyan:   #21e6c1;
  --pink:   #ff3caa;
  --lime:   #9bff5a;
  --gold:   #ffd23c;   /* OptiDice brand nod */
  --purple: #b06cff;
  --blue:   #46b1ff;
  --red:    #ff4d5e;

  --ok:   var(--lime);
  --warn: var(--gold);
  --bad:  var(--red);

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-term:  "VT323", "Courier New", monospace;

  --glow-cyan: 0 0 8px rgba(33,230,193,.55), 0 0 22px rgba(33,230,193,.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-term);
  font-size: 20px;            /* VT323 reads small; bump base up */
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Animated starfield-ish background grid + vignette */
body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(176,108,255,.12), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(33,230,193,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}
body::before {
  /* perspective grid floor */
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}
/* CRT scanlines + flicker */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9998;
  animation: crt-flicker 6s infinite steps(60);
}
@keyframes crt-flicker { 0%,97%{opacity:1;} 98%{opacity:.86;} 99%{opacity:.97;} 100%{opacity:1;} }
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-shadow: var(--glow-cyan); }

.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }

/* ---------- Pixel headings ---------- */
.pixel { font-family: var(--font-pixel); letter-spacing: .5px; line-height: 1.5; }
h1.title {
  font-family: var(--font-pixel);
  font-size: 30px;
  margin: 6px 0 4px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255,210,60,.5), 3px 3px 0 #5b3d00;
}
.subtitle {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  letter-spacing: 2px;
}

/* ---------- Top HUD bar ---------- */
.hud {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 6px 24px rgba(0,0,0,.4);
}
.hud .brand { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 220px; }
.hud .score-box {
  font-family: var(--font-pixel); font-size: 13px; color: var(--gold);
  border: 2px solid var(--gold); border-radius: 8px; padding: 8px 14px;
  background: rgba(255,210,60,.06); white-space: nowrap;
  box-shadow: 0 0 12px rgba(255,210,60,.18);
}
.hud .score-box .big { font-size: 18px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-pixel); font-size: 12px;
  color: var(--ink); background: var(--panel);
  border: 2px solid var(--cyan); border-radius: 8px;
  padding: 12px 16px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 1px;
  transition: transform .05s, box-shadow .15s, background .15s, color .15s;
  box-shadow: 0 4px 0 rgba(33,230,193,.25);
}
.btn:hover { box-shadow: var(--glow-cyan), 0 4px 0 rgba(33,230,193,.25); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(33,230,193,.25); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; border-color: var(--ink-faint); }
.btn.primary { border-color: var(--gold); color: var(--gold); box-shadow: 0 4px 0 rgba(255,210,60,.3); }
.btn.primary:hover { box-shadow: 0 0 10px rgba(255,210,60,.6), 0 4px 0 rgba(255,210,60,.3); }
.btn.ghost { border-color: var(--line); color: var(--ink-dim); box-shadow: none; }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-dim); box-shadow: none; }
.btn.small { font-size: 10px; padding: 8px 10px; }

/* ---------- Cabinet grid (hub) ---------- */
.intro {
  border: 2px dashed var(--line); border-radius: 10px; padding: 14px 18px;
  margin-bottom: 22px; color: var(--ink-dim); background: rgba(13,19,32,.5);
}
.intro b { color: var(--cyan); }

.cabinets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}
.cabinet {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--line); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  transition: transform .12s, border-color .15s, box-shadow .15s;
  text-align: left;
}
.cabinet:hover { transform: translateY(-4px); border-color: var(--accent, var(--cyan)); box-shadow: 0 0 0 1px var(--accent, var(--cyan)), 0 10px 30px rgba(0,0,0,.5); }
.cabinet .screen {
  height: 92px; display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--accent, var(--cyan)) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border-bottom: 2px solid var(--line);
}
.cabinet .ico { font-size: 44px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent,var(--cyan)) 60%, transparent)); }
.cabinet h3 { font-family: var(--font-pixel); font-size: 14px; margin: 0 0 2px; color: var(--ink); }
.cabinet .dom { font-size: 17px; color: var(--accent, var(--cyan)); }
.cabinet .body { padding: 12px 18px 16px; }
.cabinet .blurb { color: var(--ink-dim); font-size: 18px; min-height: 48px; }
.cabinet .meta-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--font-pixel); font-size: 8px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; letter-spacing: .5px;
}
.tag.real {
  color: var(--lime); border-color: var(--lime);
  background: rgba(155,255,90,.07);
}
.cabinet .play-hint {
  font-family: var(--font-pixel); font-size: 9px; color: var(--accent, var(--cyan));
  opacity: 0; transition: opacity .15s;
}
.cabinet:hover .play-hint { opacity: 1; }

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1; }
.stars .s { color: var(--ink-faint); }
.stars .s.on { color: var(--gold); text-shadow: 0 0 6px rgba(255,210,60,.7); }
.tier-stars { display: flex; gap: 12px; flex-wrap: wrap; }
.tier-stars .ts { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tier-stars .ts .lbl { font-family: var(--font-pixel); font-size: 7px; color: var(--ink-faint); letter-spacing: 1px; }

/* ============================================================
   PLAY SCREEN
   ============================================================ */
.play-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.play-top .lvl-ico { font-size: 34px; }
.play-top .lvl-name { font-family: var(--font-pixel); font-size: 16px; color: var(--ink); }
.play-top .lvl-dom { font-size: 17px; color: var(--accent, var(--cyan)); }
.play-top .spacer { flex: 1 1 auto; }

/* Tier selector */
.tier-select { display: flex; gap: 8px; }
.tier-select .tbtn {
  font-family: var(--font-pixel); font-size: 10px; cursor: pointer;
  border: 2px solid var(--line); background: var(--panel-2); color: var(--ink-dim);
  border-radius: 8px; padding: 9px 12px; letter-spacing: 1px;
}
.tier-select .tbtn[data-on="1"] { color: var(--bg); border-color: var(--accent,var(--cyan)); background: var(--accent,var(--cyan)); }

/* main 2-col layout */
.play-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
@media (max-width: 920px) { .play-grid { grid-template-columns: 1fr; } }

.panel-box {
  border: 2px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  padding: 16px;
}
.panel-box h2 {
  font-family: var(--font-pixel); font-size: 11px; color: var(--ink-dim);
  margin: 0 0 12px; letter-spacing: 1px; text-transform: uppercase;
}

/* Canvas stage */
.stage-wrap { position: relative; }
canvas#scene {
  width: 100%; height: 300px; display: block; border-radius: 8px;
  background: #05080f;
  border: 1px solid var(--line);
}
@media (max-width: 920px) { canvas#scene { height: 240px; } }
.scenario-line { margin-top: 10px; color: var(--ink-dim); font-size: 17px; }
.scenario-line b { color: var(--gold); }

.scene-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255,255,255,.02);
}
.scene-legend .li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.scene-legend .li i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; box-shadow: 0 0 4px currentColor; }
@media (max-width: 640px) { .scene-legend .li { font-size: 11px; } }

/* Controls */
.control { margin-bottom: 16px; }
.control .clabel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 7px;
}
.control .clabel .name { font-family: var(--font-pixel); font-size: 10px; color: var(--ink); letter-spacing: .5px; }
.control .clabel .val  { font-family: var(--font-pixel); font-size: 11px; color: var(--accent,var(--cyan)); }
.control .chint { color: var(--ink-faint); font-size: 15px; margin-top: 5px; }

/* Segmented choice */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg .opt {
  flex: 1 1 auto; text-align: center; cursor: pointer;
  border: 2px solid var(--line); background: var(--panel-2); color: var(--ink-dim);
  border-radius: 7px; padding: 9px 8px; font-size: 16px; min-width: 70px;
  transition: all .12s;
}
.seg .opt:hover { border-color: var(--ink-dim); color: var(--ink); }
.seg .opt[data-on="1"] {
  border-color: var(--accent,var(--cyan)); color: var(--bg);
  background: var(--accent,var(--cyan)); font-weight: 700;
}

/* Range slider (retro) */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
  background: var(--panel-3); border: 2px solid var(--line); border-radius: 6px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  background: var(--accent,var(--cyan)); border: 2px solid #04210f; border-radius: 4px;
  cursor: pointer; box-shadow: 0 0 8px color-mix(in srgb, var(--accent,var(--cyan)) 70%, transparent);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; background: var(--accent,var(--cyan));
  border: 2px solid #04210f; border-radius: 4px; cursor: pointer;
}

/* KPI gauges */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  background: var(--panel-3);
}
.kpi .k-name { font-family: var(--font-pixel); font-size: 8px; color: var(--ink-faint); letter-spacing: .5px; }
.kpi .k-val { font-family: var(--font-pixel); font-size: 16px; margin: 6px 0 8px; color: var(--ink); }
.kpi .k-val small { font-size: 9px; color: var(--ink-dim); }
.kpi .bar { height: 7px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.kpi .bar > i { display: block; height: 100%; width: 0%; border-radius: 4px; transition: width .25s, background .25s; }
.kpi .k-band { margin-top: 6px; font-size: 12px; color: var(--ink-faint); min-height: 14px; letter-spacing: .3px; }

/* Budget meter */
.budget {
  border: 2px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 4px;
  background: var(--panel-3);
}
.budget .b-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.budget .b-head .b-title { font-family: var(--font-pixel); font-size: 10px; color: var(--ink-dim); letter-spacing: 1px; }
.budget .b-head .b-num { font-family: var(--font-pixel); font-size: 13px; color: var(--ok); }
.budget.over .b-head .b-num { color: var(--bad); }
.budget .b-bar { height: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; position: relative; }
.budget .b-bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--lime), var(--cyan)); transition: width .2s, background .2s; }
.budget.over .b-bar > i { background: linear-gradient(90deg, var(--gold), var(--red)); }
.budget .b-msg { margin-top: 8px; font-size: 15px; color: var(--ink-faint); min-height: 20px; }
.budget.over .b-msg { color: var(--bad); }

.action-row { display: flex; gap: 10px; margin-top: 14px; }
.action-row .btn { flex: 1 1 auto; }

/* ---------- Results modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,5,10,.78); backdrop-filter: blur(3px);
}
.overlay.show { display: flex; animation: fade .2s ease; }
@keyframes fade { from{opacity:0;} to{opacity:1;} }
.result {
  width: min(560px, 96vw);
  border: 2px solid var(--accent,var(--cyan)); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  box-shadow: 0 0 0 1px var(--accent,var(--cyan)), 0 20px 60px rgba(0,0,0,.6);
  padding: 26px 24px; text-align: center;
}
.result h2 { font-family: var(--font-pixel); font-size: 18px; margin: 0 0 6px; }
.result .grade { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 1px; }
.result .big-stars { font-size: 52px; margin: 14px 0 6px; letter-spacing: 6px; }
.result .big-stars .s { color: #2a3550; }
.result .big-stars .s.on { color: var(--gold); text-shadow: 0 0 16px rgba(255,210,60,.8); animation: pop .4s ease backwards; }
.result .big-stars .s.on:nth-child(1){ animation-delay:.05s;}
.result .big-stars .s.on:nth-child(2){ animation-delay:.25s;}
.result .big-stars .s.on:nth-child(3){ animation-delay:.45s;}
@keyframes pop { 0%{ transform: scale(0) rotate(-30deg); opacity:0;} 70%{ transform: scale(1.4) rotate(8deg);} 100%{ transform: scale(1) rotate(0);} }
.result .scoreline { font-family: var(--font-pixel); font-size: 13px; color: var(--ink); margin: 10px 0; }
.result .scoreline .you { color: var(--cyan); }
.result .scoreline .par { color: var(--gold); }
.result .takeaway {
  border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px;
  color: var(--ink-dim); font-size: 17px; margin: 14px 0; text-align: left;
}
.result .takeaway b { color: var(--lime); }
.result .res-actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

/* score pop floaters */
.floater {
  position: absolute; font-family: var(--font-pixel); font-size: 14px; pointer-events: none;
  color: var(--gold); text-shadow: 0 0 8px rgba(255,210,60,.6); z-index: 50;
  animation: floatup 1s ease-out forwards;
}
@keyframes floatup { from{ transform: translateY(0); opacity:1;} to{ transform: translateY(-46px); opacity:0;} }

/* footer note */
.note { margin-top: 26px; color: var(--ink-faint); font-size: 15px; border-top: 1px solid var(--line); padding-top: 14px; }
.note b { color: var(--ink-dim); }

.toggle-audio { cursor: pointer; user-select: none; }
.badge-model {
  display: inline-block; font-family: var(--font-pixel); font-size: 8px;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 7px; letter-spacing: .5px;
}
.badge-model.real {
  color: var(--lime); border-color: var(--lime);
  background: rgba(155,255,90,.07);
  text-shadow: 0 0 8px rgba(155,255,90,.45);
}

/* ============================================================
   Phase A — Optimizer's solution, share row, lead capture
   ============================================================ */
.result { max-height: 90vh; overflow-y: auto; }

.sol-block {
  margin: 14px 0 4px; padding: 10px 12px; text-align: left;
  border: 1px dashed rgba(255,255,255,.18); border-radius: 10px;
  background: rgba(10,14,24,.6);
}
.sol-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1px;
  color: var(--accent); margin-bottom: 8px;
}
.sol-head .sol-cols { display: grid; grid-template-columns: 86px 20px 86px; text-align: center; color: #8fa3c8; }
.sol-row {
  display: grid; grid-template-columns: 1fr 86px 20px 86px; gap: 4px;
  align-items: center; padding: 4px 2px;
  font-family: var(--font-crt); font-size: 17px; color: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sol-row:last-of-type { border-bottom: 0; }
.sol-row .sol-name { color: #8fa3c8; }
.sol-row .sol-you, .sol-row .sol-par { text-align: center; }
.sol-row .sol-arrow { text-align: center; color: #5c6f96; }
.sol-row.diff .sol-par { color: var(--gold); text-shadow: 0 0 8px rgba(255,210,60,.5); }
.sol-row.diff .sol-arrow { color: var(--gold); }
.sol-row.diff { background: rgba(255,210,60,.05); border-radius: 6px; }
.sol-note {
  margin-top: 8px; font-family: var(--font-crt); font-size: 15px; color: #8fa3c8;
}
.sol-note.nailed { color: var(--lime); }

.share-row {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 12px 0 0;
}
.share-row #liBtn { color: #8fe3ff; border-color: rgba(143,227,255,.5); }

.lead-block {
  margin: 14px 0 2px; padding: 12px 14px;
  border: 1px solid rgba(255,210,60,.35); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,210,60,.07), rgba(255,210,60,.02));
  font-family: var(--font-crt); font-size: 17px; line-height: 1.45;
  color: var(--ink); text-align: left;
}
.lead-block b { color: var(--gold); }
.lead-block .btn { display: block; margin: 10px auto 0; width: max-content; }

/* hub footer CTA */
.hub-cta {
  margin-top: 26px; padding: 18px 20px; text-align: center;
  border: 1px solid rgba(255,210,60,.35); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,210,60,.06), rgba(255,210,60,.02));
}
.hub-cta .pitch {
  font-family: var(--font-crt); font-size: 19px; color: var(--ink);
  max-width: 760px; margin: 0 auto 12px; line-height: 1.5;
}
.hub-cta .pitch b { color: var(--gold); }
.hub-cta .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }