:root{
  --bg0:#070a12;
  --bg1:#0b1020;
  --glass:rgba(16,24,38,.68);
  --glass2:rgba(16,24,38,.82);
  --stroke:rgba(255,255,255,.12);
  --stroke2:rgba(255,255,255,.20);
  --txt:#e9edf5;
  --muted:#a5b0c7;
  --accent:#6d5efc;
  --accent2:#6ee7ff;
  --warning:#ff9f4d;
  --good:#2dff72;
  --bad:#ff4d6d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Press Start 2P", system-ui;
  color:var(--txt);
  background:
    radial-gradient(900px 420px at 15% 15%, rgba(109,94,252,.25), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(110,231,255,.18), transparent 62%),
    radial-gradient(900px 620px at 50% 95%, rgba(255,47,214,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

/* Top bar */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  z-index:5;
}
.brand .brand-name{font-size:18px; letter-spacing:1px}
.brand .brand-sub{font-size:10px; color:var(--muted); margin-top:4px}

.hud{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}
.hud-item{font-size:10px; color:var(--muted)}
.hud-k{opacity:.9}
.hud-v{color:var(--txt)}

.top-actions{display:flex; gap:10px}
.pill-btn{
  font-family:inherit;
  font-size:11px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--txt);
  cursor:pointer;
}
.pill-btn:hover{border-color:var(--stroke2)}
.pill-btn.is-off{opacity:.55}

/* Layout */
#game-container{
  position:relative;
  justify-content: center;
  width:min(1100px, calc(100vw - 48px));
  margin:0 auto;
  padding-top:86px;
  display:grid;
  grid-template-columns: 270px auto 270px;
  gap:18px;
  align-items:start;
}

.panel{
  border:1px solid var(--stroke);
  background:var(--glass);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.panel-title{font-size:14px; margin-bottom:10px}
.panel-text{font-size:10px; line-height:1.35; color:var(--muted)}
.panel-text.tiny{font-size:9px}

/* Preview grids */
.preview-grid{
  width:110px;
  height:110px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap:6px;
  padding:10px;
  border-radius:16px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
}
.preview-cell{
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}

/* Game grid */
#game-wrap{display:flex; justify-content:center}
#game{
  display:grid;
  grid-template-columns: repeat(10, 28px);
  grid-template-rows: repeat(20, 28px);
  gap:2px;
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  box-shadow:
    0 0 0 2px rgba(255,159,77,.35),
    0 20px 60px rgba(0,0,0,.45);
}
.cell{
  border-radius:7px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

/* Ready panel */
.ready-text{
  font-size:12px;
  text-align:center;
  color:var(--warning);
}

/* Controls list */
.controls{
  display:grid;
  gap:6px;
  font-size:10px;
  color:var(--muted);
}
.controls b{color:var(--txt)}

/* Run list */
.runbox{
  font-size:10px;
  color:var(--muted);
  display:grid;
  gap:6px;
}

/* Overlays */
#start-overlay,
#powerup-overlay,
#end-overlay{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:22px;
  z-index:20;
  background:rgba(0,0,0,.60);
  backdrop-filter: blur(10px);
}

.overlay-card{
  width:min(860px, 100%);
  max-height:min(86vh, 760px);
  overflow:auto;
  border-radius:22px;
  border:1px solid var(--stroke);
  background:var(--glass2);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  padding:18px;
}
.overlay-wide{width:min(980px, 100%)}
.title{margin:0; font-size:22px; text-align:center}
.subtitle{margin:10px 0 0; text-align:center; color:var(--muted); font-size:11px}
.tiny{font-size:10px; color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.btn{
  font-family:inherit;
  font-size:12px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(109,94,252,.85), rgba(110,231,255,.50));
  color:#0b1020;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.06)}

.char-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.character-card{
  text-align:left;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  color:var(--txt);
  cursor:pointer;
}
.character-card:hover{border-color:rgba(255,255,255,.22)}
.character-card.selected{outline:2px solid rgba(110,231,255,.55)}
.character-card h3{margin:0 0 8px; font-size:14px}
.character-card p{margin:6px 0; font-size:10px; color:var(--muted); line-height:1.35}

.start-row{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.footer-hint{margin-top:14px; text-align:center}

/* Draft cards */
.draft-grid{margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px}
.draft-card{
  font-family:inherit;
  text-align:left;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  color:var(--txt);
  cursor:pointer;
}
.draft-card:hover{border-color:rgba(255,255,255,.22)}
.d-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.d-name{font-size:12px}
.d-tag{font-size:9px; color:var(--muted)}
.d-desc{margin-top:10px; font-size:10px; color:var(--muted); line-height:1.35}
.d-foot{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.pill{font-size:9px; padding:6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.10); color:var(--muted)}
.r-common{box-shadow:none}
.r-rare{box-shadow:0 0 0 2px rgba(110,231,255,.18) inset}
.r-epic{box-shadow:0 0 0 2px rgba(255,47,214,.18) inset}

/* FX */
@keyframes shake {
  0%{transform:translate(0,0)}
  20%{transform:translate(-5px,5px)}
  40%{transform:translate(5px,-5px)}
  60%{transform:translate(-5px,5px)}
  80%{transform:translate(5px,-5px)}
  100%{transform:translate(0,0)}
}
.shake{animation:shake .5s}

@keyframes flash {
  0%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
  100%{filter:brightness(1)}
}
.flash{animation:flash .14s}

@keyframes pulse {
  0%{transform:scale(1)}
  50%{transform:scale(1.01)}
  100%{transform:scale(1)}
}
.pulse{animation:pulse .11s}

/* Responsive */
@media (max-width: 980px){
  #game-container{grid-template-columns: 1fr; justify-items:center; padding-top:96px}
  #left-panel, #right-panel{width:min(520px, 100%); display:grid; grid-template-columns: 1fr 1fr; gap:12px}
  #game{grid-template-columns: repeat(10, 26px); grid-template-rows: repeat(20, 26px)}
  .hud{display:none}
}

@media (max-width: 520px){
  #left-panel, #right-panel{grid-template-columns: 1fr}
  .draft-grid{grid-template-columns: 1fr}
  .char-grid{grid-template-columns: 1fr}
}