:root {
  --bg1: #1a1140;
  --bg2: #3a1d6e;
  --bg3: #0e2a4a;
  --accent: #ffd23f;
  --accent2: #ff4d6d;
  --good: #7be07b;
  --bad: #ff6b6b;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --text: #f4f1ff;
}

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

html, body {
  height: 100%;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--text);
  overflow: hidden;
}

body {
  background: linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3));
  background-attachment: fixed;
}

#app { height: 100vh; width: 100vw; position: relative; }

/* ---------- Screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.screen.active { display: flex; }

.panel {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 34px 36px;
  width: min(440px, 94vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hero { text-align: center; }
.title {
  font-family: "Baloo 2", cursive;
  font-size: 52px;
  line-height: 1;
  background: linear-gradient(90deg, var(--accent), var(--accent2), #4dd2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 24px rgba(255, 100, 180, 0.25);
}
.title span { -webkit-text-fill-color: var(--accent); }
.subtitle { margin: 12px 0 26px; opacity: 0.85; font-weight: 700; }

h2 { font-family: "Baloo 2", cursive; font-size: 28px; margin-bottom: 18px; }

label { display: block; margin: 14px 0; font-weight: 700; font-size: 14px; }
label.checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; }
label.checkbox span { font-weight: 700; }

input[type="text"], select {
  width: 100%;
  margin-top: 6px;
  padding: 13px 15px;
  font-size: 17px;
  font-family: inherit;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.25); }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent2); }
select option { color: #222; }

/* ---------- Buttons ---------- */
.btn {
  font-family: "Baloo 2", cursive;
  font-size: 17px;
  padding: 12px 22px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s, filter 0.2s, box-shadow 0.2s;
  border: 1px solid var(--glass-border);
}
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(135deg, var(--accent2), #ff8a3d);
  box-shadow: 0 8px 22px rgba(255, 77, 109, 0.4);
  border: none;
}
.btn.big { font-size: 20px; padding: 15px 30px; }
.btn.tiny { font-size: 13px; padding: 7px 13px; border-radius: 10px; }
.btn.ghost { background: transparent; }
.btn.mic { background: linear-gradient(135deg, #4dd2ff, #6a8cff); border: none; }
.btn.mic.recording { background: linear-gradient(135deg, #ff4d6d, #ff2d55); animation: pulse 0.8s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.6); } 50% { box-shadow: 0 0 0 14px rgba(255,77,109,0); } }

.btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.hint { text-align: center; opacity: 0.7; font-size: 13px; margin-top: 14px; }

/* ---------- Lobby ---------- */
.gameid-box {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  background: rgba(0,0,0,0.3); padding: 14px; border-radius: 16px; margin-bottom: 8px;
}
.gameid-box span { font-size: 13px; opacity: 0.7; }
.gameid-box strong { font-family: "Baloo 2"; font-size: 34px; letter-spacing: 6px; color: var(--accent); }

.player-list { list-style: none; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.player-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: 14px; background: rgba(255,255,255,0.07);
  font-weight: 700;
}
.player-list li .dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px currentColor; }
.player-list li .score { margin-left: auto; font-family: "Baloo 2"; font-size: 18px; color: var(--accent); }
.player-list li .tag { font-size: 11px; opacity: 0.7; background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 8px; }

/* ---------- Game screen ---------- */
#scene-container { position: absolute; inset: 0; }

#hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  z-index: 5; pointer-events: none;
}
#hud-top > * { pointer-events: auto; }
.level-badge {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  padding: 8px 16px; border-radius: 14px; backdrop-filter: blur(10px);
}
.level-badge #level-num { font-family: "Baloo 2"; font-size: 22px; color: var(--accent); }
.level-badge #level-name { font-weight: 900; }
#turn-banner {
  margin: 0 auto; font-family: "Baloo 2"; font-size: 20px;
  background: var(--glass); border: 1px solid var(--glass-border);
  padding: 8px 22px; border-radius: 14px; backdrop-filter: blur(10px);
}
.hud-actions { display: flex; gap: 8px; }

#scoreboard {
  position: absolute; top: 76px; right: 18px; z-index: 5;
  display: flex; flex-direction: column; gap: 7px; width: 210px;
}
.score-card {
  display: flex; align-items: center; gap: 9px;
  background: var(--glass); border: 1px solid var(--glass-border);
  padding: 8px 12px; border-radius: 12px; backdrop-filter: blur(10px);
  font-weight: 700; font-size: 14px; transition: transform 0.2s, box-shadow 0.2s;
}
.score-card.active { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.04); }
.score-card .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.score-card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
.score-card .pos { margin-left: auto; opacity: 0.6; font-size: 12px; }
.score-card .sc { font-family: "Baloo 2"; color: var(--accent); }
.score-card.done { opacity: 0.6; }

#commentary {
  position: absolute; bottom: 116px; left: 50%; transform: translateX(-50%);
  z-index: 5; max-width: 80vw;
  background: rgba(0,0,0,0.45); border: 1px solid var(--glass-border);
  padding: 10px 22px; border-radius: 30px; backdrop-filter: blur(10px);
  font-weight: 700; text-align: center; transition: opacity 0.3s;
}
#commentary.flash { animation: commentaryPop 0.5s; }
@keyframes commentaryPop { 0% { transform: translateX(-50%) scale(0.85); } 60% { transform: translateX(-50%) scale(1.06); } 100% { transform: translateX(-50%) scale(1); } }
#commentary-agent {
  display: inline-block; margin-right: 8px; font-weight: 800; font-size: 0.82em;
  opacity: 0.9; letter-spacing: 0.3px;
}
#commentary-agent:empty { display: none; }
#commentary[data-agent="commentator"] #commentary-agent { color: #ffd23f; }
#commentary[data-agent="bot"] #commentary-agent { color: #4dd2ff; }
#commentary[data-agent="coach"] #commentary-agent { color: #7be07b; }
#commentary[data-agent="analyst"] #commentary-agent { color: #c77dff; }
#btn-music.muted { opacity: 0.55; }

#hud-bottom {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 16px;
}
#dice-face {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, #fff, #dcd6ff);
  color: #2a1a5e; font-family: "Baloo 2"; font-size: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

/* ---------- Overlay ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
}
.result { text-align: center; }
.result h2 { font-size: 34px; }
.winner-name { color: var(--accent); }

/* ---------- Toast ---------- */
.toast {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: var(--bad); color: #fff; padding: 12px 22px; border-radius: 14px;
  z-index: 40; font-weight: 800; box-shadow: 0 8px 22px rgba(0,0,0,0.4);
  animation: pop 0.3s;
}

.hidden { display: none !important; }

@media (max-width: 600px) {
  .title { font-size: 40px; }
  #scoreboard { width: 150px; top: 70px; right: 8px; }
  #turn-banner { font-size: 15px; padding: 6px 12px; }
  #commentary { bottom: 150px; font-size: 13px; }
}