/* Otherside design system — palette/typography from yuga-otherside-ui */
:root {
  --bg: #000000;
  --bg-deep: #0a0618;
  --bg-indigo: #271e62;
  --accent: #6d59ff;
  --accent-soft: rgba(164, 144, 255, 0.6);
  --accent-glow: rgba(109, 89, 255, 0.4);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-dim: rgba(255, 255, 255, 0.3);
  --border: rgba(109, 89, 255, 0.25);
  --win: #4ade80;
  --lose: #f87171;
  --font-body: 'Space Grotesk', Arial, sans-serif;
  --font-tech: 'Chakra Petch', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -15%, rgba(39, 30, 98, 0.55) 0%, transparent 65%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
#app { display: flex; flex-direction: column; height: 100vh; max-width: 1200px; margin: 0 auto; padding: 12px 20px; }

header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
.brand {
  font-family: var(--font-tech); font-size: 20px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-soft);
}
.brand span { color: var(--text); }
.identity { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-muted); font-family: var(--font-tech); }
.identity img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent); }
.identity .badge {
  padding: 3px 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-dim);
}
.identity .badge.hub { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.hud-right { display: flex; align-items: center; }
.mute-btn {
  margin-left: 12px; padding: 6px 8px; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; border-radius: 6px; transition: border-color 0.15s ease, color 0.15s ease;
}
.mute-btn svg { display: block; }
.mute-btn:hover { border-color: var(--accent); color: var(--accent); }
.mute-btn.off { opacity: 0.55; }

main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 90% 70% at 50% 25%, rgba(39, 30, 98, 0.45) 0%, transparent 75%),
    var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: inset 0 0 80px rgba(109, 89, 255, 0.06);
}
.stage { position: relative; flex: 1; min-height: 0; cursor: crosshair; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- overlay (start / game over) ---- */
.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 2, 12, 0.82);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.overlay-inner {
  display: flex; gap: 44px; align-items: stretch; justify-content: center;
  width: 100%; max-width: 900px; padding: 20px;
}
.title-block { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.ov-eyebrow {
  font-family: var(--font-tech); font-size: 13px; letter-spacing: 0.3em;
  color: var(--text-dim); text-transform: uppercase;
}
.ov-title {
  font-family: var(--font-tech); font-size: 44px; font-weight: 700; line-height: 1.02;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 0 30px var(--accent-glow);
}
.ov-title span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
.ov-stats { display: flex; gap: 22px; }
.ov-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.ov-stats .k { font-family: var(--font-tech); font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); }
.ov-stats .v { font-family: var(--font-tech); font-size: 28px; font-weight: 700; color: var(--accent-soft); }
.ov-rank { font-family: var(--font-tech); font-size: 15px; letter-spacing: 0.1em; color: var(--win); min-height: 20px; }
.ov-hint { font-family: var(--font-tech); font-size: 12px; letter-spacing: 0.18em; color: var(--text-dim); }

button {
  font-family: var(--font-tech); font-size: 16px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 26px; cursor: pointer;
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  transition: background .15s, color .15s, box-shadow .15s;
}
button:hover { background: var(--accent); color: var(--bg); box-shadow: 0 0 18px var(--accent-glow); }
button.primary { background: var(--accent); color: var(--bg); }
button.primary:hover { background: var(--accent-soft); border-color: transparent; }
button.big { font-size: 18px; padding: 15px 38px; }
button.primary.alt { background: transparent; color: var(--accent); border-color: var(--accent); }
button.primary.alt:hover { background: var(--accent); color: var(--bg); box-shadow: 0 0 18px var(--accent-glow); }
.ov-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---- co-op status bar ---- */
.coop-bar {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 4;
  display: flex; align-items: center; gap: 16px;
  padding: 7px 12px;
  background: rgba(10, 6, 24, 0.72); border: 1px solid var(--border); border-radius: 8px;
  backdrop-filter: blur(2px);
  font-family: var(--font-tech); font-size: 13px; letter-spacing: 0.14em; color: var(--text-muted);
}
.coop-bar .cb-item b { color: var(--accent-soft); font-weight: 700; margin-left: 4px; }
.coop-bar .cb-status { flex: 1; text-align: center; color: var(--accent); letter-spacing: 0.16em; }
.coop-bar .cb-leave { padding: 5px 14px; font-size: 12px; }

/* ---- leaderboard ---- */
.board-block {
  flex: 0 0 320px; display: flex; flex-direction: column;
  border: 1px solid var(--border); background: rgba(10, 6, 24, 0.75);
  padding: 16px 14px; max-height: 420px;
}
.board-head {
  font-family: var(--font-tech); font-size: 14px; font-weight: 700;
  letter-spacing: 0.25em; color: var(--accent-soft); text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
  text-align: center;
}
.board { list-style: none; overflow-y: auto; flex: 1; min-height: 120px; }
.board::-webkit-scrollbar { width: 4px; }
.board::-webkit-scrollbar-thumb { background: var(--border); }
.board li {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 4px; border-bottom: 1px solid rgba(109, 89, 255, 0.08);
  font-size: 14px;
}
.board li.empty { color: var(--text-dim); justify-content: center; font-family: var(--font-tech); font-size: 12px; letter-spacing: .12em; border: none; }
.board .rk { font-family: var(--font-tech); font-weight: 700; color: var(--text-dim); width: 26px; text-align: right; flex: none; }
.board li:nth-child(1) .rk { color: var(--accent); }
.board li:nth-child(2) .rk, .board li:nth-child(3) .rk { color: var(--accent-soft); }
.board img, .board .pfp-fallback {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 1px solid var(--border); object-fit: cover;
}
.board .pfp-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-indigo); font-family: var(--font-tech); font-size: 12px; color: var(--accent-soft);
}
.board .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.board li.you .nm { color: var(--accent); }
.board .sc { font-family: var(--font-tech); font-weight: 700; color: var(--text); flex: none; }
.board .wv { font-family: var(--font-tech); font-size: 11px; color: var(--text-dim); flex: none; width: 34px; text-align: right; }

/* ---- HUD footer ---- */
footer { padding-top: 10px; }
.hud { display: flex; justify-content: center; gap: 46px; }
.hud-item { display: flex; align-items: baseline; gap: 10px; }
.hud .k { font-family: var(--font-tech); font-size: 12px; letter-spacing: 0.22em; color: var(--text-dim); }
.hud .v { font-family: var(--font-tech); font-size: 24px; font-weight: 700; color: var(--accent-soft); min-width: 60px; }
.hud-item.lives .v { letter-spacing: 4px; color: var(--accent); font-size: 18px; }

@media (max-width: 860px) {
  .overlay-inner { flex-direction: column; gap: 18px; align-items: center; overflow-y: auto; }
  .board-block { flex: none; width: min(92%, 360px); max-height: 220px; }
  .ov-title { font-size: 32px; }
  .hud { gap: 24px; }
}