* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --stick: 192px;
  --knob: 68px;
}
html, body {
  height: 100%;
  overflow: hidden;
  background: #070b14;
  color: #f4efe4;
  font-family: Nunito, ui-rounded, "Segoe UI", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button, input { font: inherit; touch-action: manipulation; }
#game, #demo {
  display: block;
  width: 100%;
  height: 100%;
}
#game { position: fixed; inset: 0; z-index: 0; touch-action: none; }
#demo {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
}

#hud {
  position: fixed;
  top: max(8px, var(--sat));
  left: 0; right: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.hud-center {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}
.hud-chip {
  min-width: 42px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.62);
  border: 1px solid rgba(255, 209, 102, 0.28);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
}
#board {
  position: absolute;
  right: 10px;
  top: 0;
  list-style: none;
  min-width: 84px;
  padding: 5px 8px;
  border-radius: 12px;
  background: rgba(7, 11, 20, 0.62);
  border: 1px solid rgba(255, 209, 102, 0.18);
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
#board .you { color: #ffd166; }
#board .dead { opacity: 0.45; }
#board .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

#dead-banner {
  position: fixed;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.62);
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: auto;
}
#dead-banner .ghost {
  padding: 8px 14px;
  font-size: 14px;
}

#boost-hint {
  position: fixed;
  left: 50%;
  bottom: max(18px, calc(var(--sab) + 10px));
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.45);
  color: rgba(255, 246, 216, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#boost-zap {
  position: fixed;
  z-index: 5;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffd166, #f4a261);
  color: #1b1206;
  box-shadow: 0 8px 22px rgba(244, 162, 97, 0.4);
}
#boost-zap:active, #boost-zap.held {
  transform: scale(0.96);
  background: linear-gradient(180deg, #fff3c4, #ff9f1c);
}

#hub, #wait, #colors {
  position: fixed;
  inset: 0;
  z-index: 5;
  touch-action: pan-y;
}
#hub, #colors { background: transparent; }
.hub-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: min(78vh, 640px);
  padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.72) 0%, rgba(7, 11, 20, 0.94) 18%);
  border-top: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 22px 22px 0 0;
}
.brand {
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #ffd166;
}
#hub-nick { margin-top: 2px; font-size: 20px; font-weight: 800; line-height: 1.15; }
#hub-bal { color: rgba(244, 239, 228, 0.72); margin-bottom: 6px; font-size: 13px; }
.tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.tab, .ghost, .cta {
  border: 0;
  border-radius: 14px;
  padding: 8px 12px;
}
.tab {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}
.tab.on { background: rgba(255, 209, 102, 0.22); color: #ffd166; }
.label {
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 4px 0 4px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
}
.chip.on {
  border-color: #ffd166;
  background: rgba(255, 209, 102, 0.18);
  color: #ffd166;
}
.econ {
  margin: 6px 0 2px;
  color: #fff6d8;
  line-height: 1.35;
  font-size: 12px;
  white-space: pre-line;
}
.cta {
  background: linear-gradient(180deg, #ffd166, #f4a261);
  color: #1b1206;
  font-weight: 800;
}
.go-cta {
  display: block;
  width: 76%;
  max-width: 420px;
  height: 52px;
  margin: 10px auto 0;
  font-size: 18px;
  border-radius: 18px;
}
.ghost {
  background: transparent;
  color: rgba(244, 239, 228, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hint {
  margin-top: 8px;
  text-align: center;
  color: #fff6d8;
  font-size: 12px;
  line-height: 1.3;
}
#close-hub, #open-colors { margin-top: 6px; padding: 8px 12px; width: 100%; }
.shop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
}
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  background: #333;
  position: relative;
}
.swatch.on { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.35); }
.swatch.have::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd166;
}
.swatch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}
.swatch-wrap .swatch {
  width: 34px;
  height: 34px;
  pointer-events: none;
}
.swatch-price {
  font-size: 11px;
  font-weight: 700;
  color: rgba(244, 239, 228, 0.72);
}
#color-title {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 800;
}
#color-bal {
  color: rgba(244, 239, 228, 0.72);
  margin-bottom: 8px;
  font-size: 13px;
}
#color-note { margin: 6px 0 8px; }
#color-confirm {
  margin: 8px 0 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.28);
  text-align: center;
}
#color-confirm-text {
  font-weight: 800;
  margin-bottom: 10px;
}
#color-confirm .cta,
#color-confirm .ghost,
#color-back { width: 100%; margin-top: 6px; }
#stick {
  position: fixed;
  z-index: 4;
  width: var(--stick);
  height: var(--stick);
  pointer-events: none;
}
#stick-base {
  width: var(--stick);
  height: var(--stick);
  border-radius: 50%;
  background: rgba(7, 11, 20, 0.45);
  border: 1px solid rgba(255, 209, 102, 0.28);
  position: relative;
}
#stick-knob {
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd166, #f4a261);
  position: absolute;
  left: calc((var(--stick) - var(--knob)) / 2);
  top: calc((var(--stick) - var(--knob)) / 2);
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(244, 162, 97, 0.35);
}
#cheat {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  background: rgba(90, 0, 8, 0.72);
  padding: 24px;
  overflow: auto;
}
.cheat-card {
  width: min(88vw, 360px);
  padding: 22px 18px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, #7a1018, #3a070c);
  border: 1px solid rgba(255, 80, 80, 0.55);
  color: #ffe8e8;
}
.cheat-kicker {
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 800;
  color: #ffb4b4;
}
.cheat-title {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 900;
}
.cheat-body {
  margin-top: 10px;
  line-height: 1.4;
  color: rgba(255, 232, 232, 0.86);
}
.cheat-refund {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 800;
  color: #fff3c4;
}
.cheat-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.cheat-actions .cta,
.cheat-actions .ghost { width: 100%; }
.cheat-actions .ghost {
  color: #ffe8e8;
  border-color: rgba(255, 180, 180, 0.38);
}
#code {
  width: 100%;
  margin: 8px 0 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 209, 102, 0.28);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  text-align: center;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

#wait {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: transparent;
}
.wait-top { padding: 22px 18px; text-align: center; }
#wait-status { margin-top: 10px; font-size: 28px; font-weight: 800; }
#wait-meta { margin-top: 8px; color: rgba(244, 239, 228, 0.72); }
#roster { margin: 12px auto 0; max-width: 280px; text-align: left; line-height: 1.55; }
#roster .you { color: #ffd166; }
#lobby-actions, #cancel-wait { margin-top: 16px; }
#lobby-actions { display: flex; flex-direction: column; gap: 8px; }

.hud-chip.quiet { opacity: 0; }

#hurry {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  font-size: min(32vw, 168px);
  font-weight: 900;
  color: #ff2d3d;
  text-shadow:
    0 0 18px rgba(255, 30, 50, 0.95),
    0 0 48px rgba(255, 40, 60, 0.7),
    0 4px 0 rgba(80, 0, 10, 0.45);
  pointer-events: none;
  animation: hurryPulse 0.55s ease-in-out infinite;
}
@keyframes hurryPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.18); }
}

#cd {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  font-size: 22vw;
  font-weight: 900;
  color: #ffd166;
  text-shadow: 0 0 40px rgba(255, 209, 102, 0.45);
  pointer-events: none;
}

#over, #gate, #dead-panel {
  position: fixed;
  inset: 0;
  z-index: 8;
}
#gate {
  display: grid;
  place-items: center;
  background: rgba(4, 7, 14, 0.72);
}
#over {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(4, 7, 14, 0.4);
  padding: max(24px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
}
#over-finale {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: min(92vw, 420px);
  pointer-events: none;
}
#over-kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffd166;
  opacity: 0;
}
#over-win {
  margin-top: 10px;
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: #ffe08a;
  text-shadow:
    0 0 28px rgba(255, 209, 102, 0.7),
    0 6px 0 rgba(80, 40, 0, 0.28);
  opacity: 0;
}
#over-winner {
  margin-top: 16px;
  font-size: clamp(18px, 5.2vw, 24px);
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
}
#over-winner .win-color {
  font-weight: 900;
}
#over-ask {
  margin-top: 14px;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 800;
  color: rgba(244, 239, 228, 0.92);
  opacity: 0;
}
.over-actions {
  width: min(92vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  opacity: 0;
}
.over-actions .cta, .over-actions .ghost { width: 100%; }
#over.on #over-kicker { animation: fadeUp 0.5s 0.1s forwards; }
#over.is-win.on #over-win { animation: popWin 0.75s 0.38s forwards; }
#over.is-win.on #over-winner { animation: fadeUp 0.55s 0.9s forwards; }
#over.is-win.on #over-ask { animation: fadeUp 0.5s 1.15s forwards; }
#over.is-win.on .over-actions { animation: fadeUp 0.5s 1.4s forwards; }
#over.is-loss.on #over-winner { animation: fadeUp 0.55s 0.48s forwards; }
#over.is-loss.on #over-ask { animation: fadeUp 0.55s 0.9s forwards; }
#over.is-loss.on .over-actions { animation: fadeUp 0.5s 1.2s forwards; }
#over.is-void #over-kicker,
#over.is-void #over-winner,
#over.is-void .over-actions {
  opacity: 1;
  animation: none;
}
#over.is-void #over-winner {
  color: rgba(244, 239, 228, 0.82);
  font-size: 16px;
  font-weight: 600;
  max-width: 360px;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes popWin {
  0% { opacity: 0; transform: scale(0.72); }
  58% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.over-card {
  width: min(88vw, 360px);
  padding: 24px 20px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 28, 46, 0.96), rgba(8, 12, 22, 0.96));
  border: 1px solid rgba(255, 209, 102, 0.28);
}
#over-title { font-size: 24px; font-weight: 800; }
#over-sub, #dead-sub, .muted { margin: 10px 0 14px; color: rgba(244, 239, 228, 0.72); line-height: 1.4; }
.over-card .cta, .over-card .ghost { width: 100%; margin-top: 8px; }
#dead-panel {
  display: grid;
  background: rgba(4, 7, 14, 0.45);
  place-items: end center;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.dead-card { margin-bottom: 8px; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 9;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,0.72);
  font-size: 14px;
}
[hidden] { display: none !important; }