/* THE DUNK CONTEST — arcade chrome. */

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

:root {
  --gold: #ffc928;
  --gold-dark: #b8860b;
  --ink: #0b0d14;
  --panel: rgba(8, 10, 18, 0.92);
  --red: #e8432e;
  --font: 'Verdana', 'Tahoma', sans-serif;
  --display: 'Arial Black', 'Verdana', sans-serif;
}

html, body { height: 100%; overflow: hidden; background: var(--ink); }
body { font-family: var(--font); color: #fff; }

#game, #game canvas { position: fixed; inset: 0; display: block; }

/* ---- HUD ---- */

#gameUI { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

#connectionStatus {
  position: absolute; top: 12px; left: 14px;
  font-size: 11px; font-weight: bold; letter-spacing: 1px;
  padding: 6px 10px; background: var(--panel); border-radius: 4px;
}
#connectionStatus.on { color: #51e87f; }
#connectionStatus.off { color: #ff5a4e; }

#courtName {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 15px; letter-spacing: 2px;
  padding: 7px 18px; background: var(--panel);
  border: 2px solid var(--gold); border-radius: 4px; color: var(--gold);
  white-space: nowrap;
}
#courtName .loc { color: #9aa3b8; font-size: 11px; margin-left: 8px; letter-spacing: 1px; }
#courtName .flag { margin-right: 6px; }

#scoreBoard {
  position: absolute; top: 12px; right: 14px; min-width: 200px;
  background: var(--panel); border: 2px solid var(--gold); border-radius: 6px;
  padding: 10px 12px;
}
#scoreBoard h3 {
  font-family: var(--display); color: var(--gold); font-size: 12px;
  letter-spacing: 3px; text-align: center; margin-bottom: 8px;
}
.scoreEntry {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 12px; padding: 3px 4px; border-radius: 3px;
}
.scoreEntry .pt { font-weight: bold; color: var(--gold); }
.scoreEntry.me { background: rgba(255, 201, 40, 0.14); }
.scoreEntry.fire .nm { color: #ff9a3c; }

#fireBadge {
  display: none;
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 18px; letter-spacing: 2px;
  color: #ff9a3c; text-shadow: 0 0 18px #ff6a00, 2px 2px 0 #000;
  animation: firePulse 0.5s ease-in-out infinite alternate;
}
@keyframes firePulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.12); } }

#announcement {
  position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%) scale(0.85);
  font-family: var(--display); font-size: 44px; letter-spacing: 2px;
  color: var(--gold); text-shadow: 3px 3px 0 #000, 0 0 30px rgba(255, 201, 40, 0.45);
  opacity: 0; transition: opacity 0.12s, transform 0.15s;
  text-align: center; white-space: nowrap;
}
#announcement.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#announcement.show.dunk { color: #ff7a3c; text-shadow: 3px 3px 0 #000, 0 0 36px rgba(255, 110, 30, 0.7); }
#announcement.show.fire { color: #ff5a1e; text-shadow: 3px 3px 0 #000, 0 0 40px #ff3c00; }
#announcement.show.minor { font-size: 24px; color: #cfd6e6; text-shadow: 2px 2px 0 #000; }

#turboMeter {
  position: absolute; bottom: 14px; left: 14px;
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); padding: 8px 12px; border-radius: 4px;
}
#turboMeter span {
  font-family: var(--display); font-size: 9px; letter-spacing: 2px; color: #8d96ad;
}
#turboBar {
  width: 110px; height: 10px; background: #060810;
  border: 1px solid #2a3046; border-radius: 5px; overflow: hidden;
}
#turboFill {
  height: 100%; width: 100%; background: linear-gradient(90deg, #2e6fe8, #54f0ff);
  transition: width 0.1s linear;
}
#turboFill.burning { background: linear-gradient(90deg, #ff7a3c, #ffc928); }
#turboFill.full { box-shadow: 0 0 8px #54f0ff; }

#instructions {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 1px; color: #b9c0d2;
  background: var(--panel); padding: 8px 16px; border-radius: 4px;
}
#instructions b { color: var(--gold); }

/* ---- Lobby ---- */

#lobby {
  position: fixed; inset: 0; z-index: 10; overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 201, 40, 0.16), transparent 55%),
    linear-gradient(170deg, #11141f 0%, #0b0d14 60%, #151022 100%);
}
#lobby.hidden { display: none; }

.lobbyInner { max-width: 980px; margin: 0 auto; padding: 36px 24px 48px; text-align: center; }

#lobby h1 {
  font-family: var(--display); font-size: 56px; line-height: 0.95; letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--red), 7px 7px 0 #000;
  margin-bottom: 10px;
}
#lobby .tag { font-size: 11px; letter-spacing: 3px; color: #8d96ad; margin-bottom: 28px; }

.lobbyCols { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; text-align: left; }
.lobbyCol { flex: 1 1 360px; max-width: 460px; }
.lobbyCol h2 {
  font-family: var(--display); font-size: 14px; letter-spacing: 3px;
  color: #fff; border-bottom: 2px solid var(--gold); padding-bottom: 6px; margin-bottom: 14px;
}

#nameInput {
  width: 100%; padding: 11px 14px; margin-bottom: 14px;
  font-family: var(--display); font-size: 16px; letter-spacing: 2px;
  color: var(--gold); background: #060810; border: 2px solid #2a3046; border-radius: 6px;
  outline: none; text-transform: uppercase;
}
#nameInput:focus { border-color: var(--gold); }

/* Creator */
.creator { display: flex; gap: 16px; }
.previewBox {
  flex: 0 0 200px; background: #060810; border: 2px solid #2a3046; border-radius: 8px;
  padding: 4px; text-align: center;
}
#charPreview { image-rendering: pixelated; width: 192px; height: 256px; }
.previewBtns { display: flex; gap: 6px; padding: 4px; }
.mini {
  flex: 1; font-size: 10px; font-weight: bold; letter-spacing: 1px; padding: 7px 4px;
  background: #1a2030; color: #cfd6e6; border: 1px solid #38415c; border-radius: 4px; cursor: pointer;
}
.mini:hover { background: #242c42; }

.knobs { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.knobRow { display: flex; align-items: center; gap: 8px; }
.knobRow label { flex: 0 0 84px; font-size: 9px; font-weight: bold; letter-spacing: 1px; color: #8d96ad; }
.swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.swatch {
  width: 20px; height: 20px; border-radius: 4px; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.swatch.sel { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 201, 40, 0.6); }
.cycle {
  flex: 1; text-align: left; padding: 6px 10px; font-size: 11px; font-weight: bold;
  background: #1a2030; color: #fff; border: 1px solid #38415c; border-radius: 4px; cursor: pointer;
}
.cycle:hover { background: #242c42; }
#numInput {
  width: 70px; padding: 6px 8px; font-family: var(--display); font-size: 14px;
  color: var(--gold); background: #060810; border: 2px solid #2a3046; border-radius: 4px;
}

/* Court grid */
#courtGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.courtCard {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; text-align: left;
  background: #10141f; border: 2px solid #2a3046; border-radius: 8px; cursor: pointer;
  color: #fff; transition: transform 0.08s, border-color 0.08s;
}
.courtCard:hover { transform: translateY(-2px); border-color: #56618a; }
.courtCard.sel { border-color: var(--gold); background: #181a10; box-shadow: 0 0 14px rgba(255, 201, 40, 0.25); }
.cFlag { font-size: 20px; }
.cName { font-family: var(--display); font-size: 13px; letter-spacing: 1px; color: var(--gold); }
.cLoc { font-size: 10px; letter-spacing: 1px; color: #8d96ad; }

/* Leaderboard */
#leaderboardMount { margin-top: 18px; }
.lbTitle {
  font-family: var(--display); font-size: 14px; letter-spacing: 3px;
  color: #fff; border-bottom: 2px solid var(--gold); padding-bottom: 6px; margin-bottom: 10px;
}
.lbHead, .lbRow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 11px; }
.lbHead { color: #8d96ad; font-weight: bold; letter-spacing: 1px; font-size: 9px; }
.lbRow { background: #10141f; border-radius: 4px; margin-bottom: 3px; }
.lbRow.me { background: rgba(255, 201, 40, 0.12); border: 1px solid rgba(255, 201, 40, 0.4); }
.lbRow:nth-child(3) .lbRank { color: var(--gold); }
.lbRank { flex: 0 0 22px; color: #8d96ad; font-weight: bold; }
.lbName { flex: 1; font-weight: bold; }
.lbStat { flex: 0 0 52px; text-align: right; color: var(--gold); font-weight: bold; }
.lbStat.sm { flex: 0 0 44px; color: #b9c0d2; font-weight: normal; }
.lbEmpty { padding: 10px 6px; font-size: 11px; color: #8d96ad; }
.lbMe {
  margin-top: 8px; padding: 8px 10px; font-size: 10px; letter-spacing: 1px;
  color: var(--gold); background: #10141f; border-radius: 4px; border: 1px solid #2a3046;
}

.lobbyActions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; }
#playBtn {
  font-family: var(--display); font-size: 22px; letter-spacing: 4px;
  padding: 14px 56px; color: #0b0d14; background: var(--gold);
  border: none; border-radius: 8px; cursor: pointer;
  box-shadow: 0 5px 0 var(--gold-dark), 0 10px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.07s, box-shadow 0.07s;
}
#playBtn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--gold-dark); }
#playBtn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--gold-dark); }
.ghost {
  font-family: var(--display); font-size: 13px; letter-spacing: 2px; padding: 12px 22px;
  background: transparent; color: #8d96ad; border: 2px solid #2a3046; border-radius: 8px; cursor: pointer;
}
.ghost:hover { color: #fff; border-color: #56618a; }