:root {
  --grass-a: #4c9a3d;
  --grass-b: #55a847;
  --accent: #e8e024;
  --accent2: #ffd75e;
  --ink: #eef3ff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Rajdhani', system-ui, sans-serif;
  background: #0b1020;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#game { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- Top scoreboard bar ---------- */
#hudTop {
  position: absolute; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(rgba(6,10,18,0.92), rgba(6,10,18,0.55));
  border-bottom: 1px solid rgba(255,255,255,0.12);
  z-index: 20;
}
.score-block { display: flex; align-items: center; gap: 8px; min-width: 0; }
.score-block.right { flex-direction: row-reverse; }
.score-name {
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; color: rgba(238,243,255,0.85);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.score-val {
  font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900;
  color: var(--accent2); font-variant-numeric: tabular-nums; min-width: 40px; text-align: center;
}
.serve-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.serve-dot.on {
  background: var(--accent); box-shadow: 0 0 10px rgba(232,224,36,0.8);
}
.score-center { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.match-point {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 900;
  letter-spacing: 2px; color: #ff5a4a; text-shadow: 0 0 10px rgba(255,90,74,0.7);
  animation: pulse 0.9s ease-in-out infinite;
}
.rally-label {
  font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 2px;
  color: rgba(238,243,255,0.5);
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- Bottom control bar ---------- */
#hudBottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: linear-gradient(rgba(6,10,18,0.55), rgba(6,10,18,0.92));
  border-top: 1px solid rgba(255,255,255,0.12);
  z-index: 20;
}
.bottom-hint {
  flex: 1; font-family: 'Orbitron', sans-serif; font-size: 10px;
  letter-spacing: 2px; color: rgba(238,243,255,0.5); text-align: center;
}
.serve-btn {
  font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 900;
  letter-spacing: 2px; color: #10131c;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  border: none; border-radius: 12px; padding: 13px 26px;
  cursor: pointer; box-shadow: 0 4px 18px rgba(232,224,36,0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.serve-btn:active { transform: scale(0.95); }
.serve-btn:disabled { filter: grayscale(0.7); opacity: 0.5; cursor: default; }
.serve-btn.ready { animation: pulse 1s ease-in-out infinite; }
.bottom-actions { display: flex; flex-direction: column; gap: 6px; }
.ctl-btn {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; color: rgba(238,243,255,0.9);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px; padding: 6px 12px; cursor: pointer;
  transition: all 0.12s ease; white-space: nowrap;
}
.ctl-btn:hover { background: rgba(255,255,255,0.18); }
.ctl-btn:active { transform: scale(0.96); }
.ctl-btn.off { opacity: 0.4; }
.icon-btn {
  font-family: 'Orbitron', sans-serif; font-size: 12px; color: rgba(238,243,255,0.85);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,0.16); }
.icon-btn.off { opacity: 0.4; }
.sound-toggle { margin-top: 10px; }

/* ---------- Banner ---------- */
#banner {
  position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Orbitron', sans-serif; font-size: 34px; font-weight: 900;
  letter-spacing: 4px; color: var(--accent2);
  text-shadow: 0 3px 18px rgba(0,0,0,0.6);
  z-index: 30; text-align: center; pointer-events: none;
  animation: bannerIn 0.45s ease;
}
#banner.lose { color: #ff6a5a; }
@keyframes bannerIn { from { transform: translate(-50%,-50%) scale(0.7); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,18,0.72); backdrop-filter: blur(3px);
}
.card {
  width: min(420px, 92vw); max-height: 92vh; overflow-y: auto;
  background: rgba(13,20,34,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px; padding: 30px 28px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.card.small { width: min(340px, 90vw); }
.title {
  font-family: 'Orbitron', sans-serif; font-size: 40px; font-weight: 900;
  letter-spacing: 3px; color: var(--ink);
}
.title span { color: var(--accent2); }
.tagline { margin-top: 8px; font-size: 16px; letter-spacing: 1px; color: rgba(238,243,255,0.6); }
.controls {
  list-style: none; margin: 18px 0; padding: 0;
  text-align: left; display: flex; flex-direction: column; gap: 8px;
}
.controls li { font-size: 15px; letter-spacing: 0.5px; color: rgba(238,243,255,0.75); }
.controls b { color: var(--accent2); font-weight: 700; }

.options { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.opt-row { display: flex; align-items: center; gap: 12px; }
.opt-label {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; color: rgba(238,243,255,0.55); min-width: 84px; text-align: right;
}
.opt-group { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.opt-btn {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; color: rgba(238,243,255,0.8);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 8px 14px; cursor: pointer; transition: all 0.12s ease;
}
.opt-btn:hover { background: rgba(255,255,255,0.14); }
.opt-btn.active { color: #10131c; background: linear-gradient(120deg, var(--accent), var(--accent2)); border-color: transparent; }

.name-input {
  flex: 1; min-width: 0; font-family: 'Orbitron', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: 2px; color: var(--ink);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 8px 14px; outline: none; text-transform: uppercase;
}
.name-input::placeholder { color: rgba(238,243,255,0.35); }
.name-input:focus { border-color: var(--accent2); }

.big-btn {
  font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 900;
  letter-spacing: 2px; color: #10131c;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  border: none; border-radius: 12px; padding: 14px 30px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(232,224,36,0.3); margin-top: 8px;
}
.ghost-btn {
  font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 2px; color: rgba(238,243,255,0.8);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px; padding: 14px 26px; cursor: pointer; margin-top: 8px;
}
.ghost-btn:hover { background: rgba(255,255,255,0.14); }
.ghost-btn.off { opacity: 0.45; }
.over-btns { display: flex; gap: 12px; justify-content: center; }
.portal-link {
  margin-top: 14px; display: inline-block;
  font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-decoration: none; color: rgba(238,243,255,0.6);
  padding: 8px 12px; border-radius: 10px; transition: color 0.12s ease, background 0.12s ease;
}
.portal-link:hover { color: #ffffff; background: rgba(255,255,255,0.1); }
.record { margin-top: 12px; font-size: 14px; letter-spacing: 1px; color: rgba(238,243,255,0.5); }

#overTitle.win { color: var(--accent2); }
#overTitle.lose { color: #ff6a5a; }

@media (max-width: 520px) {
  .title { font-size: 30px; }
  .card { padding: 22px 18px; }
  .score-name { font-size: 11px; max-width: 90px; }
  .score-val { font-size: 18px; min-width: 32px; }
  #banner { font-size: 24px; }
  .bottom-hint { font-size: 8px; }
}