@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,700;0,900;1,900&family=Inter:wght@400;600&display=swap');

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

:root {
  --green:  #2ecc40;
  --yellow: #f4b400;
  --pink:   #e91e8c;
  --dark:   #06060f;
  --tile:   #0e0e22;
  --border: #2a2a50;
  --sub:    #7777aa;
  --font-d: 'Exo 2', sans-serif;
  --font-b: 'Inter', sans-serif;
}

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

/* ── Screens ─────────────────────────────────────── */
.screen { display:none; width:100vw; height:100vh; }
.screen.active { display:flex; }

/* ── Lobby ───────────────────────────────────────── */
#screen-lobby {
  align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 35%, #18083a 0%, var(--dark) 65%);
}
.lobby-inner {
  display:flex; flex-direction:column; align-items:center;
  gap:20px; width:100%; max-width:460px; padding:40px 24px;
}
.logo {
  font-family:var(--font-d); font-weight:900;
  font-size:clamp(54px,9vw,90px); letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(135deg, var(--green) 0%, var(--yellow) 50%, var(--pink) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
#join-form { display:flex; gap:8px; width:100%; }
input[type="text"] {
  flex:1; padding:12px 16px; background:var(--tile);
  border:2px solid var(--border); border-radius:8px;
  color:#fff; font-size:16px; font-family:var(--font-b); outline:none;
  transition:border-color .2s;
}
input[type="text"]:focus { border-color:var(--green); }
button {
  padding:11px 22px; border:none; border-radius:8px;
  font-family:var(--font-d); font-weight:700; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:opacity .15s, transform .1s;
}
button:active { transform:scale(.96); }
button:disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
#btn-join  { background:var(--green); color:#000; }
#btn-start { background:var(--pink); color:#fff; width:100%; font-size:17px; padding:15px; }
.section-label {
  font-family:var(--font-d); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sub); text-align:center; width:100%;
}
#lobby-players { display:flex; flex-direction:column; gap:8px; width:100%; }
#player-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
#player-list li {
  background:var(--tile); border:1px solid var(--border);
  border-radius:6px; padding:9px 14px; font-size:14px;
  display:flex; align-items:center; gap:8px;
}
.slot-badge {
  font-family:var(--font-d); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:4px;
}
.slot-badge.green  { background:var(--green);  color:#000; }
.slot-badge.yellow { background:var(--yellow); color:#000; }
.slot-badge.pink   { background:var(--pink);   color:#fff; }
#admin-panel {
  display:flex; flex-direction:column; gap:10px; width:100%;
  background:#0d0d1e; border:1px solid var(--border); border-radius:12px; padding:18px;
}
.slot-row { display:flex; align-items:center; gap:10px; }
.slot-label { font-family:var(--font-d); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; width:56px; flex-shrink:0; }
.slot-label.green  { color:var(--green); }
.slot-label.yellow { color:var(--yellow); }
.slot-label.pink   { color:var(--pink); }
select { flex:1; padding:8px 10px; background:var(--tile); border:1px solid var(--border); border-radius:6px; color:#fff; font-size:13px; }

/* ── Game screen ─────────────────────────────────── */
#screen-game { position:relative; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:12px; gap:8px; }
#canvas-container { position:absolute; inset:0; }
#canvas-container canvas { display:block; width:100% !important; height:100% !important; }

/* ── Turn banner ─────────────────────────────────── */
#turn-banner {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  font-family:var(--font-d); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(10,10,25,.85); border:1px solid var(--border);
  backdrop-filter:blur(8px); border-radius:6px; padding:7px 20px;
  color:var(--sub); z-index:20; pointer-events:none; white-space:nowrap;
  transition:color .3s, border-color .3s;
}
#turn-banner.my-turn { color:var(--green); border-color:var(--green); }

/* ── Scorebar ────────────────────────────────────── */
#scorebar {
  position:relative; z-index:20; display:flex; gap:8px; justify-content:center;
}
.score-chip {
  display:flex; align-items:center; gap:7px;
  background:rgba(14,14,34,.8); backdrop-filter:blur(8px);
  border:2px solid var(--border); border-radius:8px; padding:6px 14px;
  transition:border-color .3s;
}
.score-chip.green  { border-color:var(--green); }
.score-chip.yellow { border-color:var(--yellow); }
.score-chip.pink   { border-color:var(--pink); }
.score-chip.active { border-color:rgba(255,255,255,.6); }
.s-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.s-dot.green  { background:var(--green); }
.s-dot.yellow { background:var(--yellow); }
.s-dot.pink   { background:var(--pink); }
.s-name { font-size:12px; font-weight:600; }
.s-pts  { font-family:var(--font-d); font-weight:900; font-size:18px; margin-left:2px; }
.s-lock { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--yellow); }

/* ── Action bar ──────────────────────────────────── */
#action-bar {
  position:relative; z-index:20; display:flex; align-items:center;
  gap:10px; min-height:52px; flex-wrap:wrap; justify-content:center;
}
#btn-roll {
  background:var(--green); color:#000; font-size:17px; padding:13px 40px;
  border-radius:10px; animation:pulse-g 1.8s ease-in-out infinite;
}
#btn-roll.yellow-roll { background:var(--yellow); animation-name:pulse-y; }
#btn-roll.pink-roll   { background:var(--pink); color:#fff; animation-name:pulse-p; }
@keyframes pulse-g { 0%,100%{box-shadow:0 0 0 0 rgba(46,204,64,.5)} 50%{box-shadow:0 0 0 12px rgba(46,204,64,0)} }
@keyframes pulse-y { 0%,100%{box-shadow:0 0 0 0 rgba(244,180,0,.5)} 50%{box-shadow:0 0 0 12px rgba(244,180,0,0)} }
@keyframes pulse-p { 0%,100%{box-shadow:0 0 0 0 rgba(233,30,140,.5)} 50%{box-shadow:0 0 0 12px rgba(233,30,140,0)} }

#dice-display {
  font-family:var(--font-d); font-weight:900; font-size:46px;
  min-width:54px; text-align:center; animation:pop .25s ease-out;
}
@keyframes pop { from{transform:scale(.3);opacity:0} 70%{transform:scale(1.3)} to{transform:scale(1);opacity:1} }

.action-label { font-size:12px; color:var(--sub); letter-spacing:.05em; }
#peek-panel, #reveal-panel, #lockin-panel { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }

.opt-btn {
  background:var(--tile); border:2px solid var(--border);
  color:#fff; padding:8px 16px; border-radius:8px; font-size:14px;
}
.opt-btn:hover { border-color:rgba(255,255,255,.5); }
.btn-lockin {
  background:var(--tile); border:2px solid var(--yellow);
  color:var(--yellow); padding:9px 22px; border-radius:8px; font-size:15px;
  font-family:var(--font-d); font-weight:700;
}
.btn-lockin:hover { background:#1a1400; }
.btn-secondary { background:transparent; border:2px solid var(--border); color:var(--sub); }
.btn-secondary:hover { border-color:rgba(255,255,255,.4); color:#fff; }
.btn-danger { background:#3a0808; color:#f87171; border:1px solid #6a1818; }

/* ── Void overlay ────────────────────────────────── */
#void-overlay {
  position:absolute; inset:0; z-index:40;
  background:radial-gradient(ellipse at 50% 50%, #08082a 0%, #020208 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
.void-inner { display:flex; flex-direction:column; align-items:center; gap:12px; }
.void-title {
  font-family:var(--font-d); font-weight:900; font-size:clamp(36px,6vw,64px);
  text-align:center; color:#1e1e44; letter-spacing:.1em; text-transform:uppercase; line-height:1.1;
}
.void-sub { font-size:13px; color:#1e1e44; letter-spacing:.14em; text-transform:uppercase; }
#void-scores { display:flex; gap:10px; margin-top:6px; }
.void-chip {
  font-family:var(--font-d); font-size:13px; font-weight:700;
  padding:5px 14px; border-radius:6px; background:#0a0a1e; border:1px solid #1a1a38; color:#333355;
}

/* ── Admin game panel ────────────────────────────── */
#admin-game {
  position:absolute; top:10px; right:10px; z-index:30;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(10,10,24,.9); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:10px; padding:10px;
}
#btn-next-loop { background:var(--pink); color:#fff; }

/* ── End screen ──────────────────────────────────── */
#screen-end {
  align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, #18083a 0%, var(--dark) 65%);
}
.end-inner { display:flex; flex-direction:column; align-items:center; gap:28px; }
#final-scores { display:flex; flex-direction:column; gap:10px; min-width:300px; }
.final-row {
  display:flex; align-items:center; gap:16px;
  background:var(--tile); border:1px solid var(--border);
  border-radius:10px; padding:14px 22px;
}
.final-row.first { border-color:var(--yellow); }
.final-row .place { font-size:20px; }
.final-row .f-name { font-family:var(--font-d); font-weight:700; font-size:18px; flex:1; }
.final-row .f-pts  { font-family:var(--font-d); font-weight:900; font-size:28px; }

/* ── Toast ───────────────────────────────────────── */
#toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(20,20,40,.95); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:8px; padding:10px 22px;
  font-size:14px; font-weight:600; pointer-events:none;
  opacity:0; transition:opacity .25s; z-index:100;
  white-space:nowrap; max-width:90vw; text-align:center;
}
#toast.show { opacity:1; }

.hidden { display:none !important; }