:root {
  --blue: #3a6bff;
  --blue-deep: #1b2f7a;
  --gold: #ffc23a;
  --gold-deep: #7a5a14;
  --ink: #0a0a14;
  --panel: #14162b;
  --panel-light: #232744;
  --cloud: #8c8cf0;
  --sky-top: #b86a5a;
  --sky-bot: #e8d2a6;
  --pink: #ff5d8f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  color: #fff;
  font-family: "DotGothic16", monospace;
  overflow: hidden;
  image-rendering: pixelated;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hidden { display: none !important; }

/* ---------- LOBBY ---------- */
#lobby {
  background:
    radial-gradient(circle at 20% 15%, rgba(140,140,240,.18), transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(255,93,143,.14), transparent 45%),
    linear-gradient(160deg, #0a0a14 0%, #161634 60%, #241b3a 100%);
}

.lobby-frame {
  width: min(880px, 94vw);
  background: var(--panel);
  border: 4px solid #000;
  box-shadow: 0 0 0 4px var(--panel-light), 0 24px 60px rgba(0,0,0,.6);
  padding: 38px 34px 30px;
  position: relative;
}
.lobby-frame::before {
  content: "";
  position: absolute; inset: 8px;
  border: 2px dashed rgba(255,255,255,.08);
  pointer-events: none;
}

.logo {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(28px, 6vw, 52px);
  text-align: center;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 4px 4px 0 #000, 0 0 18px rgba(255,194,58,.4);
  line-height: 1.1;
}
.logo span {
  display: block;
  color: var(--blue);
  text-shadow: 4px 4px 0 #000, 0 0 18px rgba(58,107,255,.5);
}
.tagline {
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  text-align: center;
  color: var(--pink);
  margin: 14px 0 26px;
  letter-spacing: 3px;
}

.join-row { display: flex; gap: 12px; justify-content: center; }
#name-input {
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  padding: 14px 16px;
  background: #0c0d1c;
  border: 3px solid #000;
  box-shadow: inset 0 0 0 2px var(--panel-light);
  color: #fff;
  width: 280px;
  outline: none;
}
#name-input:focus { box-shadow: inset 0 0 0 2px var(--gold); }

.btn {
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  padding: 14px 18px;
  background: var(--blue);
  color: #fff;
  border: 3px solid #000;
  box-shadow: 0 5px 0 #000, inset 0 0 0 2px rgba(255,255,255,.25);
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform .05s, box-shadow .05s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #000, inset 0 0 0 2px rgba(255,255,255,.25); }
.btn.big { font-size: 16px; padding: 20px 40px; background: var(--gold); color: #2a1c00; }
.btn.tiny { font-size: 8px; padding: 8px 10px; box-shadow: 0 3px 0 #000; }
.btn.forfeit { position: absolute; bottom: 14px; right: 14px; background: #6e2430; }

.lobby-body { margin-top: 26px; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.team {
  background: #0c0d1c;
  border: 3px solid #000;
  padding: 16px;
  min-height: 220px;
}
.team h2 {
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  margin-bottom: 14px;
  text-align: center;
}
.team-blue h2 { color: var(--blue); }
.team-gold h2 { color: var(--gold); }
.team-blue { box-shadow: inset 0 0 0 2px var(--blue-deep); }
.team-gold { box-shadow: inset 0 0 0 2px var(--gold-deep); }

.roster { list-style: none; min-height: 130px; }
.roster li {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; padding: 6px 4px;
  border-bottom: 1px dotted rgba(255,255,255,.12);
}
.roster li .crown { font-size: 14px; }
.roster li .me { color: var(--pink); }
.roster li .rdy { margin-left: auto; font-size: 10px; font-family: "Press Start 2P", monospace; }
.roster li .rdy.yes { color: #6dffa0; }
.roster li .rdy.no { color: #ff7a7a; }
.roster li .wants { font-size: 9px; color: #ffd86b; font-family: "Press Start 2P", monospace; }
.roster li .lat { margin-left: auto; font-size: 9px; font-family: "Press Start 2P", monospace; }
.roster li .lat + .rdy { margin-left: 10px; }
.roster li .lat.ok { color: #6dffa0; }
.roster li .lat.mid { color: #ffd23c; }
.roster li .lat.bad { color: #ff7a7a; }
.banner .stats {
  display: flex; justify-content: center; gap: 40px;
  margin-top: 30px; font-family: "DotGothic16", monospace;
  font-size: 24px; line-height: 1.7; text-align: left;
  text-shadow: 2px 2px 0 #000;
}
.banner .stats .col {
  min-width: 300px;
  background: rgba(12, 13, 28, 0.8); /* lobby team-panel look, semi-transparent */
  border: 3px solid #000;
  padding: 16px 20px 18px;
}
.banner .stats .col-head { font-family: "Press Start 2P", monospace; font-size: 18px; margin-bottom: 12px; text-align: center; }
.banner .stats .col.blue { color: #9db8ff; box-shadow: inset 0 0 0 2px var(--blue-deep); }
.banner .stats .col.gold { color: #ffd86b; box-shadow: inset 0 0 0 2px var(--gold-deep); }
.banner .stats .stat-row { display: flex; justify-content: space-between; gap: 24px; }
.banner .stats .nums { white-space: nowrap; }
.banner #score-done { margin-top: 30px; font-size: 12px; pointer-events: auto; } /* .banner is pointer-events:none */
.banner .waitq { margin-top: 30px; font-size: 15px; color: #bfb8d8; font-family: "DotGothic16", monospace; }
.map-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.map-row .map-label { font-family: "Press Start 2P", monospace; font-size: 10px; color: #bfb8d8; }
.map-row .mappick.sel { outline: 2px solid var(--pink, #ff5d8f); }
.map-row .mappick[disabled] { opacity: .55; cursor: default; }
.roster li .accept { margin-left: 6px; padding: 5px 7px; font-size: 7px; }
#queen-btn[disabled] { opacity: .6; cursor: default; }

.pick { display: block; width: 100%; margin-top: 12px; background: var(--panel-light); font-size: 9px; }
.team-blue .pick { background: var(--blue-deep); }
.team-gold .pick { background: var(--gold-deep); }

.controls { text-align: center; margin-top: 24px; }
.audio-hint {
  margin-top: 20px;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  color: #6f6a8a;
}
#ready-btn.on { background: #6dffa0; color: #06200f; }
.hint { font-size: 13px; color: #b9b9d6; margin-top: 14px; }

.status {
  position: fixed; bottom: 12px; left: 14px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px; color: #6b6b8c;
}
.status.ok { color: #6dffa0; }
.status.bad { color: #ff7a7a; }

/* ---------- GAME ---------- */
#game { background: #000; }
#view {
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto;
  image-rendering: pixelated;
  border: 2px solid #000;
}
.banner {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(20px, 4vw, 44px);
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(0,0,0,.55);
  text-align: center;
  line-height: 1.2;
  animation: banner-pop .35s ease-out;
  pointer-events: none;
}
@keyframes banner-pop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}