:root{
  /* Arcade brand accents */
  --brand:#ffb43a;        /* warm amber */
  --brand-2:#00e6ff;      /* neon cyan */

  --bg:#0b0f14;           /* deep slate */
  --panel:#121922;        /* card */
  --ink:#e9f1ff;          /* text */
  --muted:#8aa0bd;        /* subtext */
  --x:#7ee787;            /* X tint */
  --o:#ff9cf0;            /* O tint */
  --accent:var(--brand-2);
  --warn:#ffd166;         /* highlight */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:500 16px/1.4 system-ui,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--ink); background:radial-gradient(1200px 600px at 10% -10%,#1b2430,transparent 60%),
                    radial-gradient(800px 400px at 110% 10%,#0c1622,transparent 60%),
                    var(--bg);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem 1.25rem; background:rgba(12,18,30,.6);
  backdrop-filter:saturate(140%) blur(8px); position:sticky; top:0; z-index:5;
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 1px 12px rgba(0,0,0,.4);
  border-bottom:1px solid #253956;
}
.topbar .left{display:flex; align-items:center; gap:.75rem}
.topbar h1{margin:0; font-size:1.2rem; letter-spacing:.3px; opacity:.95}
.controls{display:flex; flex-wrap:wrap; gap:.5rem}
button, select{
  color:var(--ink); background:var(--panel); border:1px solid #2a3a52;
  padding:.5rem .75rem; border-radius:.75rem; cursor:pointer;
}
button:hover, select:hover{border-color:#3c5275}
button:disabled{opacity:.55; cursor:not-allowed}
.select-wrap{display:flex; align-items:center; gap:.4rem; color:var(--muted)}

/* Back to Arcade pill */
.back-btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.5rem .9rem; border-radius:999px; font-weight:800; letter-spacing:.25px;
  border:1px solid #2b425f; color:var(--ink);
  background:
    radial-gradient(60% 120% at -10% 120%, rgba(255,180,58,.25), transparent 70%),
    radial-gradient(80% 140% at 110% -20%, rgba(0,230,255,.25), transparent 70%),
    linear-gradient(180deg,#0f1824,#0a121c);
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.back-btn:hover{ border-color:#3b5c88; transform:translateY(-1px); box-shadow:0 8px 26px rgba(0,0,0,.45) }
.back-btn::before{ content:'\2190'; font-weight:900; opacity:.9 }

/* Timer pill */
.timer-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border-radius:999px; font-weight:800; letter-spacing:.25px;
  border:1px solid #2b425f; color:#e5f3ff; background:#0f1824;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  min-width: 130px; justify-content:center;
}

.stage{max-width:980px; margin:1.25rem auto; padding:0 1rem}
.status{
  margin:0 0 .75rem; color:var(--muted); font-size:.95rem; min-height:1.4em
}

/* Ultimate board grid */
.ultimate{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem;
}
.mini{
  position:relative; aspect-ratio:1/1; background:linear-gradient(180deg,#0e1520,#0a1018);
  border:1px solid #213048; border-radius:1rem; padding:.5rem; display:grid;
  grid-template-columns:repeat(3,1fr); gap:.4rem; transition:transform .15s ease, box-shadow .15s ease;
}
.mini.playable{ box-shadow:0 0 0 2px var(--warn) inset, 0 0 28px rgba(255,209,102,.15); transform:translateY(-1px); }
.mini.locked{ opacity:.45; filter:saturate(.7)}

.cell{
  position:relative; aspect-ratio:1/1; border:1px dashed #22324a; border-radius:.6rem;
  background:#0e1622; display:grid; place-items:center; overflow:hidden;
}
.cell button{
  all:unset; width:100%; height:100%; display:grid; place-items:center; cursor:pointer;
}
.cell button:focus{outline:2px solid var(--accent); outline-offset:2px}

.mark{ font-weight:800; font-size:clamp(16px, 5.6vw, 34px); letter-spacing:.5px }
.mark.x{ color:var(--x); text-shadow:0 0 12px rgba(126,231,135,.25)}
.mark.o{ color:var(--o); text-shadow:0 0 12px rgba(255,156,240,.25)}

/* Mini winner overlay */
.mini .winner{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:clamp(26px, 8vw, 56px); font-weight:900; mix-blend-mode:screen;
}
.mini.won-x .winner{ color:var(--x); opacity:.95 }
.mini.won-o .winner{ color:var(--o); opacity:.95 }
.mini.draw .winner{ color:var(--muted); opacity:.35 }

/* Game over banner */
.banner{
  position:fixed; inset:auto 0 24px; display:flex; justify-content:center; z-index:10;
}
.banner .card{
  background:linear-gradient(180deg,#111a28,#0b111b); border:1px solid #264061; border-radius:1rem;
  padding:.75rem 1rem; box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.banner .who{ font-weight:800 }

@media (max-width:680px){
  .topbar{flex-direction:column; align-items:flex-start}
  .controls{width:100%}
}