:root{
  --bg-0:#090b1e;
  --bg-1:#12163a;
  --cyan:#00e5ff;
  --magenta:#ff2e88;
  --amber:#ffb800;
  --ink:#eef1ff;
  --ink-dim:#9aa3c7;
  --danger:#ff3b3b;
  --good:#37ffb0;
  --radius:14px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
}

canvas{position:fixed; inset:0; width:100%; height:100%; display:block;}
#fx{pointer-events:none; z-index:5;}

.hidden{display:none !important;}

/* ---------- HUD ---------- */
#hud{position:fixed; inset:0; z-index:10; pointer-events:none;}
.hud-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px 16px; gap:8px;
}
.hud-block{
  background:rgba(9,11,30,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  border-radius:10px;
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.03em;
}
.device-id{color:var(--ink-dim);}
.phase-label{
  color:var(--cyan); font-weight:700; text-align:center;
  min-width:90px;
}
.hearts{display:flex; gap:4px; font-size:16px;}

.hud-mid{
  position:absolute; top:70px; left:0; right:0;
  display:flex; justify-content:center;
}
.score-wrap{text-align:center;}
.score-num{
  font-family:var(--font-mono);
  font-size:56px; font-weight:700;
  color:var(--ink);
  text-shadow:0 0 18px rgba(0,229,255,.55);
  line-height:1;
}
.combo-tag{
  margin-top:4px; font-family:var(--font-mono); font-size:14px;
  color:var(--amber); font-weight:700; opacity:0; transform:translateY(-4px);
  transition:opacity .15s, transform .15s;
}
.combo-tag.show{opacity:1; transform:translateY(0);}

.hud-bottom{position:absolute; bottom:18px; left:16px; right:16px;}
.phase-timer-track{
  height:5px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden;
}
.phase-timer-fill{
  height:100%; width:100%; background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transform-origin:left; transition:transform .1s linear;
}

.event-banner{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%) scale(.9);
  font-family:var(--font-display); font-weight:700; font-size:26px;
  padding:10px 22px; border-radius:12px;
  background:rgba(9,11,30,.75); border:1px solid rgba(255,255,255,.12);
  opacity:0; transition:opacity .2s, transform .2s;
  text-align:center; white-space:nowrap;
}
.event-banner.show{opacity:1; transform:translate(-50%,-50%) scale(1);}

/* ---------- Screens ---------- */
.screen{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, #171c46 0%, #090b1e 70%);
  padding:24px;
}
.screen-inner{
  width:100%; max-width:420px;
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
  text-align:center;
}
.logo{
  font-size:52px; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,229,255,.35));
}
.tagline{color:var(--ink-dim); margin:0 0 10px; font-size:15px;}

.id-row{
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 14px; font-family:var(--font-mono); font-size:13px;
}
.id-row-label{color:var(--ink-dim);}
.id-row-value{color:var(--cyan); font-weight:700;}

#nicknameInput{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--ink); border-radius:10px; padding:12px 14px;
  font-family:var(--font-display); font-size:15px; outline:none;
}
#nicknameInput:focus{border-color:var(--cyan);}

.btn{
  border:none; border-radius:12px; padding:15px 18px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  cursor:pointer; letter-spacing:.01em;
}
.btn-primary{
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  color:#0a0b1e;
  box-shadow:0 8px 24px rgba(255,46,136,.25);
}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{
  background:transparent; color:var(--ink-dim);
  border:1px solid rgba(255,255,255,.14);
}
.btn-ghost:active{transform:scale(.98);}

.howto{
  margin-top:8px; display:flex; flex-direction:column; gap:6px;
  text-align:left; color:var(--ink-dim); font-size:13px;
}
.howto-item span{margin-right:8px;}
.conn-status{font-size:11px; color:var(--ink-dim); font-family:var(--font-mono); min-height:14px;}

/* ---------- Game over ---------- */
.go-title{color:var(--danger); font-weight:700; font-size:22px; letter-spacing:.05em;}
.go-score{font-family:var(--font-mono); font-size:64px; font-weight:700; text-shadow:0 0 20px rgba(255,46,136,.4);}
.go-best{color:var(--ink-dim); font-family:var(--font-mono); font-size:14px;}
.go-newbest{color:var(--amber); font-weight:700; font-size:18px;}

/* ---------- Leaderboard ---------- */
.board-inner{max-width:520px;}
.board-title{font-size:26px; font-weight:700; color:var(--amber);}
.board-list{
  display:flex; flex-direction:column; gap:6px;
  max-height:50vh; overflow-y:auto; padding:4px;
}
.board-row{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:10px; padding:9px 12px; font-family:var(--font-mono); font-size:14px;
}
.board-row.me{border-color:var(--cyan); background:rgba(0,229,255,.08);}
.board-rank{width:26px; font-weight:700; color:var(--ink-dim);}
.board-row:nth-child(1) .board-rank{color:#ffd54a;}
.board-row:nth-child(2) .board-rank{color:#c9d3e0;}
.board-row:nth-child(3) .board-rank{color:#e08a4f;}
.board-name{flex:1; text-align:left; color:var(--ink);}
.board-name small{color:var(--ink-dim); display:block; font-size:10px;}
.board-score{font-weight:700; color:var(--cyan);}

/* ---------- Confetti ---------- */
#confettiLayer{position:fixed; inset:0; pointer-events:none; z-index:30; overflow:hidden;}
.confetti-piece{
  position:absolute; top:-10px; width:8px; height:14px; opacity:.9;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  to{ transform:translateY(110vh) rotate(540deg); opacity:0; }
}

/* ---------- Board mode (smart board) tweaks ---------- */
body.board-mode .screen{background:radial-gradient(circle at 50% 20%, #1a2050 0%, #05060f 75%);}
body.board-mode .board-title{font-size:38px;}
body.board-mode .board-row{font-size:20px; padding:14px 18px;}
body.board-mode .board-list{max-height:74vh;}

@media (max-width:420px){
  .score-num{font-size:44px;}
  .logo{font-size:40px;}
}