:root{
  --panel:rgba(18,24,37,.82);
  --text:#f5f7fb;
  --muted:#9ba7bd;
  --accent:#6f7cff;
  --accent2:#995cff;
  --danger:#ef4e6f;
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;min-height:100%;
  background:
  radial-gradient(circle at top, rgba(111,124,255,.15), transparent 28%),
  linear-gradient(180deg,#09101a,#0d1320);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
}
button{font:inherit;border:0;cursor:pointer;color:var(--text)}
.shell{max-width:1500px;margin:0 auto;padding:24px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.topbar h1{margin:0;font-size:clamp(28px,3vw,42px)}
.eyebrow{margin:0 0 6px;color:#a9b6ff;letter-spacing:.18em;text-transform:uppercase;font-size:12px}
.top-actions{display:flex;gap:12px}
.glass,.primary,.ctl{
  padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.08);
  box-shadow:var(--shadow);backdrop-filter:blur(18px);
  transition:transform .15s ease, opacity .15s ease;
}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ctl.action{background:linear-gradient(135deg,#295dff,#7b45ff)}
.ctl.special{background:linear-gradient(135deg,#db385b,#ff7a3f)}
.glass:hover,.primary:hover,.ctl:hover{transform:translateY(-1px)}
.glass:active,.primary:active,.ctl:active{transform:translateY(1px) scale(.99)}
.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(320px,.8fr);gap:22px}
.game-card,.panel{
  background:var(--panel);border:1px solid var(--border);
  border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(14px)
}
.game-card{padding:16px}
.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:14px}
.status .line{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px;margin-bottom:8px}
.status strong{color:var(--text);letter-spacing:.08em}
.status.right{text-align:right}
.center{text-align:center}
.round{color:#b5c2ff;font-weight:800;letter-spacing:.12em;font-size:13px}
.timer{font-size:clamp(36px,4vw,58px);font-weight:900;line-height:1}
.bar{
  height:18px;background:rgba(255,255,255,.08);border-radius:999px;
  overflow:hidden;border:1px solid rgba(255,255,255,.05)
}
.energy{margin-top:8px;height:10px}
.fill{height:100%;width:100%;transition:width .15s ease}
.hp{background:linear-gradient(90deg,#20c867,#43f3a2)}
.hp.enemy{background:linear-gradient(90deg,#ffa245,#ff4f6b)}
.mp{background:linear-gradient(90deg,#4ed3ff,#7e7cff)}
.mp.enemy{background:linear-gradient(90deg,#8d7aff,#d565ff)}
.arena-wrap{
  position:relative;overflow:hidden;border-radius:24px;
  aspect-ratio:16/9;background:#0f1524
}
.arena-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,10,16,.6);backdrop-filter:blur(6px)}
.hidden{display:none}
.modal{
  width:min(92%,480px);padding:28px;border-radius:28px;text-align:center;
  background:linear-gradient(180deg,rgba(18,24,37,.95),rgba(10,14,24,.98));
  border:1px solid var(--border);box-shadow:var(--shadow)
}
.modal h2{margin:0 0 10px;font-size:clamp(28px,4vw,42px)}
.modal p{color:var(--muted)}
.wide{width:100%;margin-top:12px}
.side{display:grid;gap:18px}
.panel{padding:20px}
.panel h3{margin:0 0 16px}
.buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.span2{grid-column:span 2}
.ctl{min-height:66px;font-weight:800}
.list{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:10px}
.compact li{margin-left:0}
@media (max-width:1080px){.layout{grid-template-columns:1fr}}
@media (max-width:720px){
  .shell{padding:14px}
  .topbar{flex-direction:column;align-items:stretch}
  .hud{grid-template-columns:1fr}
}