/* ─── Player screen styles (mobile optimised) ────────────────────────────── */

html, body { height:100%; }
#app { min-height:100%; display:flex; flex-direction:column; }

/* ─── Panic / Emergency button ────────────────────────────────────────── */

.panic-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.panic-btn:active { transform: scale(.88); }
.panic-btn.panic-active {
  background: rgba(255,60,60,.25);
  border-color: rgba(255,60,60,.5);
  box-shadow: 0 0 16px rgba(255,60,60,.3);
  animation: panicPulse 1.5s ease-in-out infinite;
}
@keyframes panicPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,60,60,.3); }
  50%      { box-shadow: 0 0 28px rgba(255,60,60,.5); }
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ─── Join ─────────────────────────────────────────────────────────────── */

#screen-join h1 {
  font-size:2.8rem; margin-bottom:1.5rem;
  font-family:'Fredoka','Nunito',sans-serif;
}
#screen-join .splash {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.join-form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.join-form input {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Fredoka','Nunito',sans-serif;
  padding: 1rem;
  border-radius: var(--radius);
}
#input-code {
  font-size: 2rem;
  letter-spacing: .8rem;
  text-transform: uppercase;
}
.btn-block {
  width:100%; padding:1.1rem; font-size:1.3rem;
  border-radius: 16px;
  font-family: 'Fredoka','Nunito',sans-serif;
}
.error-text { color:var(--accent-pink); font-weight:700; font-size:.95rem; }

/* ─── Lobby ───────────────────────────────────────────────────────────── */

#screen-lobby h2 {
  font-size:2rem; margin-bottom:.5rem;
  font-family:'Fredoka','Nunito',sans-serif;
}
.player-name {
  font-size:1.5rem; font-weight:800;
  font-family:'Fredoka','Nunito',sans-serif;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:.5rem;
}
.audience-badge {
  font-size:1rem; font-weight:700; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.lobby-player-list {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  max-width: 340px;
  margin: 1rem 0;
}
.lobby-player-list .lp-card {
  background: var(--bg-card);
  border: 2px solid rgba(255,255,255,.1);
  padding: .6rem .7rem .5rem;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 70px;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1) both;
  transition: border-color .3s, box-shadow .3s;
}
.lobby-player-list .lp-card .avatar-lobby {
  width: 48px;
  height: 48px;
}
.lobby-player-list .lp-card .lp-name {
  font-size: .75rem;
}
.waiting-msg { color:var(--text-dim); font-size:.95rem; }

/* Lobby share QR */
.lobby-share { margin:.5rem 0; text-align:center; }
.lobby-qr-player { width:120px; height:120px; border-radius:8px; }
.lobby-share-text { font-size:.75rem; color:var(--text-dim); word-break:break-all; margin-top:.3rem; }

/* ─── Answer prompts ──────────────────────────────────────────────────── */

#screen-answer { justify-content:flex-start; padding-top:1rem; }
.timer-text-small {
  font-size:2rem; font-weight:900; margin:.3rem 0 .8rem;
  font-family:'Fredoka','Nunito',sans-serif;
  color: var(--accent-blue);
  text-shadow: 0 0 15px rgba(0,229,255,.3);
}

#answer-forms { width:100%; max-width:500px; }
.answer-group {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 1.3rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(6px);
}
.answer-group label {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: 'Fredoka','Nunito',sans-serif;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom: .6rem;
  line-height: 1.3;
}
.answer-group textarea {
  width: 100%;
  font-size: 1.1rem;
  min-height: 60px;
  max-height: 120px;
  font-family: 'Nunito',sans-serif;
}
.answer-group .char-count {
  text-align: right;
  font-size: .75rem;
  color: var(--text-dim);
  margin-top: .3rem;
}
.answer-submit-wrap { margin-top:.5rem; }
.answer-submitted-msg {
  color:var(--accent-green); font-weight:700; font-size:1.1rem; margin-top:.5rem;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* ─── Waiting ─────────────────────────────────────────────────────────── */

.waiting-icon, .watching-icon { font-size:3.5rem; margin-bottom:1rem; animation: float 3s ease-in-out infinite; }
.waiting-message, .watching-message { font-size:1.2rem; color:var(--text-dim); font-family:'Fredoka','Nunito',sans-serif; }

/* ─── Voting ──────────────────────────────────────────────────────────── */

.vote-prompt {
  font-size:1.3rem; font-weight:700; margin-bottom:.8rem; line-height:1.3;
  font-family:'Fredoka','Nunito',sans-serif;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.vote-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  margin-bottom: .3rem;
  font-size: .8rem;
  color: var(--text-dim);
  font-weight: 700;
}

.vote-buttons {
  display: flex;
  gap: .8rem;
  width: 100%;
  max-width: 500px;
}
.vote-btn {
  flex: 1;
  background: var(--bg-card);
  border: 3px solid transparent;
  border-radius: var(--radius);
  padding: 1.3rem 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: 'Fredoka','Nunito',sans-serif;
  color: var(--text-main);
  cursor: pointer;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  line-height: 1.3;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-word;
  backdrop-filter: blur(6px);
}
.vote-btn:active { transform:scale(.92); }
.vote-btn-left:hover, .vote-btn-left.selected {
  border-color:var(--accent-blue); background:rgba(0,229,255,.1);
  box-shadow: 0 0 20px rgba(0,229,255,.2);
  transform: scale(1.03);
}
.vote-btn-right:hover, .vote-btn-right.selected {
  border-color:var(--accent-pink); background:rgba(255,61,127,.1);
  box-shadow: 0 0 20px rgba(255,61,127,.2);
  transform: scale(1.03);
}
.vote-btn:disabled { opacity:.5; cursor:default; transform:none; box-shadow:none; }

.vote-submitted {
  color:var(--accent-green); font-weight:700; margin-top:1rem; font-size:1.1rem;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* ─── Final voting ────────────────────────────────────────────────────── */

.final-vote-options {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.final-vote-btn {
  background: var(--bg-card);
  border: 3px solid transparent;
  border-radius: var(--radius);
  padding: 1.1rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Fredoka','Nunito',sans-serif;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  word-break: break-word;
  line-height: 1.3;
  backdrop-filter: blur(6px);
}
.final-vote-btn:active { transform:scale(.95); }
.final-vote-btn:hover, .final-vote-btn.selected {
  border-color:var(--accent-yellow); background:rgba(255,225,77,.08);
  box-shadow: 0 0 20px rgba(255,225,77,.15);
  transform: scale(1.02);
}
.final-vote-btn:disabled { opacity:.5; cursor:default; transform:none; box-shadow:none; }
.final-vote-btn .aud-tag {
  font-size:.75rem; margin-left:.5rem;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-weight:800;
}

/* Ranked voting */
.rank-instruction {
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Fredoka','Nunito',sans-serif;
  color: var(--accent-yellow);
  text-align: center;
  margin-bottom: .3rem;
  animation: fadeIn .4s both;
}
.rank-badge {
  display: inline-block;
  margin-left: .6rem;
  font-size: 1.3rem;
  vertical-align: middle;
  animation: bounceIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
.final-vote-btn.rank-1.selected { border-color: #ffd700; background: rgba(255,215,0,.12); box-shadow: 0 0 20px rgba(255,215,0,.2); }
.final-vote-btn.rank-2.selected { border-color: #c0c0c0; background: rgba(192,192,192,.08); box-shadow: 0 0 15px rgba(192,192,192,.15); }
.final-vote-btn.rank-3.selected { border-color: #cd7f32; background: rgba(205,127,50,.08); box-shadow: 0 0 15px rgba(205,127,50,.15); }

/* ─── Mini result ─────────────────────────────────────────────────────── */

.mini-result { width:100%; max-width:400px; }
.mini-result-names {
  display:flex; justify-content:space-between; margin-bottom:.5rem;
  font-weight:700; font-family:'Fredoka','Nunito',sans-serif; font-size:1.1rem;
}
.mini-left { color:var(--accent-blue); text-shadow:0 0 10px rgba(0,229,255,.25); }
.mini-right { color:var(--accent-pink); text-shadow:0 0 10px rgba(255,61,127,.25); }
.mini-vs { color:var(--text-dim); }
.mini-splash {
  font-size:2rem; font-weight:900; margin-top:1rem;
  font-family:'Fredoka','Nunito',sans-serif;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange), var(--accent-pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation: shitsplash 1s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 0 15px rgba(255,225,77,.3));
}
@keyframes shitsplash {
  0%   { transform:scale(0) rotate(-15deg); opacity:0; }
  50%  { transform:scale(1.4) rotate(5deg); opacity:1; }
  70%  { transform:scale(.9) rotate(-2deg); }
  100% { transform:scale(1) rotate(0); opacity:1; }
}

/* ─── Look at the big screen ──────────────────────────────────────────── */

.look-at-screen {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:2rem;
}
.look-at-screen-icon {
  font-size:5rem;
  animation: lookPulse 2s ease-in-out infinite;
}
@keyframes lookPulse {
  0%, 100% { transform:scale(1); opacity:.85; }
  50%      { transform:scale(1.1); opacity:1; }
}
.look-at-screen-text {
  font-size:1.4rem; font-weight:700;
  font-family:'Fredoka','Nunito',sans-serif;
  color:var(--text-dim);
  letter-spacing:.02em;
}
.game-over-player-btns {
  width:100%; max-width:320px; margin-top:1rem;
  display:flex; flex-direction:column; gap:.5rem;
}

/* ─── Scores ──────────────────────────────────────────────────────────── */

.my-score {
  font-size:2.5rem; font-weight:900; margin:.5rem 0 1rem;
  font-family:'Fredoka','Nunito',sans-serif;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 15px rgba(255,225,77,.3));
}
.mini-leaderboard { width:100%; max-width:360px; display:flex; flex-direction:column; gap:.5rem; }
.mlb-row {
  display:flex; align-items:center; gap:.5rem;
  background:var(--bg-card); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:.55rem .9rem;
  font-family:'Fredoka','Nunito',sans-serif;
  animation: slideUp .4s cubic-bezier(.22,1,.36,1) both;
}
.mlb-rank {
  font-weight:900; min-width:28px;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.mlb-name { flex:1; text-align:left; font-weight:700; }
.mlb-score { font-weight:800; color:var(--accent-blue); text-shadow:0 0 8px rgba(0,229,255,.2); }

/* ─── Round announce ──────────────────────────────────────────────────── */

.round-announce h2 {
  font-size: 2.8rem;
  font-weight: 900;
  font-family: 'Fredoka','Nunito',sans-serif;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-pink), var(--accent-purple));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
.round-announce p { font-size:1.1rem; color:var(--text-dim); margin-top:.5rem; }

/* ─── Game over ───────────────────────────────────────────────────────── */

#screen-game-over h2 {
  font-size:2.5rem;
  font-family:'Fredoka','Nunito',sans-serif;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-pink), var(--accent-purple));
  background-size: 200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation: gradientShift 3s ease infinite;
  margin-bottom:.5rem;
}
.winner-text {
  font-size:1.6rem; font-weight:800; margin-bottom:1.5rem;
  font-family:'Fredoka','Nunito',sans-serif;
}
.winner-text .wn {
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 10px rgba(255,225,77,.3));
}

/* ─── Selfie capture ──────────────────────────────────────────────────── */

#screen-selfie h2 {
  font-family:'Fredoka','Nunito',sans-serif;
  font-size: 2rem;
  margin-bottom: .3rem;
}
.selfie-subtitle {
  color: var(--text-dim);
  font-size: 1rem;
  margin-bottom: 1.2rem;
}
.selfie-video {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent-purple);
  box-shadow: 0 0 30px rgba(212,125,255,.25);
  margin-bottom: 1rem;
  transform: scaleX(-1);
}
.selfie-preview {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent-green);
  box-shadow: 0 0 30px rgba(105,240,174,.25);
  margin-bottom: 1rem;
  animation: bounceIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.selfie-buttons {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
  max-width: 260px;
}
.selfie-fallback-text {
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

/* ─── Drawing interface ───────────────────────────────────────────────── */

.draw-canvas-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: .6rem;
}

.draw-canvas {
  width: 256px;
  height: 256px;
  border-radius: 12px;
  border: 3px solid rgba(255,255,255,.15);
  box-shadow: 0 0 30px rgba(212,125,255,.2);
  cursor: crosshair;
  touch-action: none; /* prevent scroll while drawing */
  background: #1a1030;
  /* Ensure crisp pixels (no browser smoothing) */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.draw-colors {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  justify-content: center;
  margin-top: .2rem;
}

.draw-color-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.draw-color-btn:active { transform: scale(.85); }
.draw-color-btn.draw-color-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.25);
  transform: scale(1.15);
}
.draw-eraser-btn {
  background: #1a1030 !important;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.draw-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  margin-bottom: .6rem;
}

.draw-size-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.draw-size-btn:active { transform: scale(.88); }
.draw-size-btn.draw-size-active {
  border-color: var(--accent-purple);
  box-shadow: 0 0 12px rgba(212,125,255,.35);
}

.draw-size-dot {
  display: block;
  border-radius: 50%;
  background: #fff;
}
.draw-size-dot-sm { width: 6px;  height: 6px; }
.draw-size-dot-lg { width: 16px; height: 16px; }

.draw-tool-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.draw-tool-btn:active { transform: scale(.88); }
.draw-tool-btn:hover {
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 0 10px rgba(255,255,255,.1);
}

/* On larger screens, show the canvas a bit bigger */
@media (min-width: 480px) {
  .draw-canvas { width: 300px; height: 300px; }
}

/* ─── Color Picker ────────────────────────────────────────────────────── */

#screen-color-pick h2 {
  font-family:'Fredoka','Nunito',sans-serif;
  font-size: 2rem;
  margin-bottom: .3rem;
}
.color-subtitle {
  color: var(--text-dim);
  font-size: 1rem;
  margin-bottom: 1.2rem;
}
.color-preview-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
  background: var(--bg-card);
}
.color-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.color-preview-initial {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: 'Fredoka',sans-serif;
  color: var(--text-main);
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  max-width: 260px;
  margin-bottom: 1.2rem;
}
.color-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s;
}
.color-swatch:hover {
  transform: scale(1.15);
}
.color-swatch.selected {
  border-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 18px rgba(255,255,255,.35);
}
.color-swatch.taken {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
  position: relative;
}
.color-swatch.taken::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  pointer-events: none;
}
.color-swatch.previewing {
  opacity: 0.55;
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}

/* ─── Leader Controls ─────────────────────────────────────────────────── */

.leader-controls {
  width: 100%; max-width: 320px; margin-top: 1.2rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.btn-start-game { font-size: 1.2rem; padding: 1rem; }
.leader-controls .btn-start-wrap {
  position: relative; width: 100%;
}
.start-hint { font-size: .85rem; color: var(--text-dim); margin: 0;
  position: absolute; top: 100%; padding-top: .25rem;
  left: 0; right: 0; text-align: center; white-space: nowrap;
}
.leader-controls .start-hint {
  position: static; white-space: normal;
  padding-top: .25rem; text-align: center;
}
.leader-settings {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg); padding: 1rem; margin-top: .5rem;
}
.leader-settings .field { margin-bottom: .6rem; }
.leader-settings label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--text-dim);
  margin-bottom: .2rem; font-weight: 600;
}
.leader-settings input[type="range"],
.leader-settings select { width: 100%; }
.setting-val {
  display: inline-block;
  min-width: 2.6rem;
  text-align: right;
  font-weight: 700;
  color: var(--accent-yellow);
  font-size: .8rem;
  margin-left: auto;
}
.setting-hint {
  display: block;
  font-size: .7rem;
  color: var(--text-dim);
  opacity: .7;
  margin-top: .1rem;
  margin-bottom: .1rem;
}
.leader-settings input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.15);
  outline: none;
  cursor: pointer;
}
.leader-settings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-yellow);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255,225,77,.4);
}
.leader-settings input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-yellow);
  border: none;
  cursor: pointer;
}

/* ─── Pack Picker (leader / mobile) ───────────────────────────────────── */

.pack-picker-grid {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .3rem;
  max-height: 200px;
  overflow-y: auto;
}
.pack-picker-card {
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .55rem .7rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
}
.pack-picker-card:active { background: rgba(255,255,255,.12); }
.pack-picker-card.selected {
  background: rgba(255,225,77,.1);
  border-color: var(--accent-yellow);
}
.ppc-top { display: flex; align-items: center; gap: .4rem; }
.ppc-name { font-size: .85rem; font-weight: 700; font-family: 'Fredoka','Nunito',sans-serif; flex: 1; }
.ppc-badge {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: .12rem .4rem;
  border-radius: 6px;
  flex-shrink: 0;
}
.ppc-badge--builtin { background: rgba(0,229,255,.2); color: var(--accent-blue); }
.ppc-badge--custom { background: rgba(212,125,255,.2); color: var(--accent-purple); }
.ppc-desc {
  font-size: .72rem;
  color: var(--text-dim);
  margin-top: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ppc-count { font-size: .68rem; color: var(--text-dim); margin-top: .15rem; }

.btn-skip {
  margin-top: 1rem; font-size: .9rem; opacity: .7;
  transition: opacity .2s;
}
.btn-skip:hover { opacity: 1; }

/* ─── Pack Editor (player screen) ─────────────────────────────────────── */

#screen-pack-editor {
  justify-content: flex-start;
  padding-top: 1.5rem;
  min-height: 100vh; min-height: 100dvh;
}
#screen-pack-editor h2 { font-size: 1.8rem; margin-bottom: .3rem; }
.pe-player-role { color: var(--accent-purple); font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.pe-player-count { color: var(--text-dim); font-size: .85rem; margin-bottom: 1rem; }

.pe-meta {
  width: 100%; max-width: 360px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg); padding: 1rem; margin-bottom: 1rem;
  text-align: left;
}
.pe-meta .field { margin-bottom: .6rem; }
.pe-meta label {
  display: block; font-size: .8rem; color: var(--text-dim);
  margin-bottom: .2rem; font-weight: 600;
}
.pe-meta input[type="text"] { width: 100%; }
.pe-save-status { font-size: .85rem; margin-top: .4rem; font-weight: 600; min-height: 1.2em; }

.pe-add-form {
  width: 100%; max-width: 360px; margin-bottom: 1rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg); padding: .8rem;
  transition: border-color .3s, box-shadow .3s;
}
.pe-add-form.pe-added {
  border-color: var(--accent-green);
  box-shadow: 0 0 12px rgba(105,240,174,.2);
}
.pe-hint {
  font-size: .75rem; color: var(--text-dim); margin-bottom: .4rem;
  font-style: italic;
}
.pe-input-wrap { position: relative; margin-bottom: .5rem; }
.pe-input-wrap input[type="text"] { width: 100%; padding-right: 3.5rem; }
.pe-char-count {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  font-size: .7rem; color: var(--text-dim); font-weight: 600;
  pointer-events: none;
}
.pe-add-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.pe-add-btn { min-width: 5rem; }

.pe-my-count {
  font-size: .85rem; color: var(--text-dim); font-weight: 700;
  margin-bottom: .4rem; width: 100%; max-width: 360px; text-align: left;
}

.pe-my-prompts {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: .4rem;
  max-height: 45vh; overflow-y: auto;
  padding-right: .3rem;
}
.pe-prompt-row {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px; padding: .5rem .7rem;
  animation: peSlideIn .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes peSlideIn {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.pe-pr-text { flex: 1; font-size: .9rem; text-align: left; word-break: break-word; }
.pe-pr-tag {
  font-size: .6rem; padding: .1rem .35rem; border-radius: 6px;
  font-weight: 800; text-transform: uppercase; flex-shrink: 0;
}
.pe-pr-tag.family { background: var(--accent-green); color: #0d0b1a; }
.pe-pr-tag.adult { background: var(--accent-pink); color: #fff; }
.pe-pr-btn {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: .9rem; padding: .2rem; border-radius: 4px;
  transition: all .2s; flex-shrink: 0;
}
.pe-pr-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.pe-pr-btn.delete:hover { color: var(--accent-pink); }

.pe-empty-msg {
  color: var(--text-dim); text-align: center; padding: 1rem;
  font-style: italic; font-size: .9rem;
}

.pack-saved-icon { font-size: 4rem; margin-bottom: 1rem; }

/* ─── Host disconnected notice ──────────────────────────────────────────── */
.host-disconnected-notice {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(220, 80, 30, 0.92);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  padding: .55rem 1rem;
  pointer-events: none;
}

/* ─── Mini-Game Overlay ─────────────────────────────────────────────────── */

.mg-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.mg-overlay.mg-visible {
  pointer-events: auto;
  opacity: 1;
}
.mg-sheet {
  width: 100%;
  max-height: 70vh;
  background: #1a1530;
  border-radius: 20px 20px 0 0;
  border-top: 2px solid var(--accent-yellow);
  box-shadow: 0 -8px 40px rgba(0,0,0,.6);
  padding: 1rem 1rem 1.5rem;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  touch-action: pan-y;
}
.mg-overlay.mg-visible .mg-sheet {
  transform: translateY(0);
}

/* Header */
.mg-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mg-waiting-text {
  font-size: .9rem;
  color: var(--text-dim);
  font-weight: 700;
}
.mg-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: 8px;
  line-height: 1;
  transition: color .2s, background .2s;
}
.mg-close-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Picker */
.mg-tagline {
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  margin: 0;
  margin-bottom: .2rem;
}
.mg-no-points {
  font-size: .72rem;
  color: var(--text-dim);
  text-align: center;
  margin: 0 0 .5rem;
  opacity: .7;
}
.mg-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.mg-option-btn {
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: #fff;
  font-size: 1.6rem;
  padding: .7rem .3rem .5rem;
  cursor: pointer;
  text-align: center;
  transition: background .2s, transform .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  line-height: 1;
}
.mg-option-btn span {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mg-option-btn:hover, .mg-option-btn:active {
  background: rgba(255,225,77,.15);
  border-color: var(--accent-yellow);
  transform: scale(1.05);
}

/* Active game area */
#mg-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.mg-back-btn { align-self: flex-start; }

/* Shared game styles */
.mg-score {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-yellow);
  text-align: center;
}
.mg-score small { font-size: .7rem; font-weight: 600; color: var(--text-dim); }
.mg-hint {
  font-size: .75rem;
  color: var(--text-dim);
  text-align: center;
  margin: 0;
  margin-top: .5rem;
}

/* ── Cookie Clicker ── */
.mg-clicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.mg-multiplier-badge {
  background: var(--accent-yellow);
  color: #0d0b1a;
  font-weight: 800;
  font-size: .85rem;
  padding: .2rem .6rem;
  border-radius: 20px;
  animation: pulse .6s ease infinite alternate;
}
.mg-cookie-btn {
  background: none;
  border: none;
  font-size: 5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform .1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.mg-cookie-btn:active { transform: scale(.9); }
@keyframes mg-cookie-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25) rotate(-8deg); }
  100% { transform: scale(1); }
}
.mg-cookie-pop { animation: mg-cookie-pop .2s ease both; }

/* ── Mole Zap ── */
.mg-molezap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.mg-mole-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  width: 100%;
  max-width: 240px;
}
.mg-mole-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.08);
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mg-mole-cell:active { background: rgba(255,225,77,.2); }
.mg-mole-up { transition: opacity .15s; }

/* ── Number Rush ── */
.mg-numberrush {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.mg-num-instr {
  font-size: .85rem;
  color: var(--text-dim);
  margin: 0;
  text-align: center;
}
.mg-num-instr strong { color: var(--accent-yellow); }
.mg-num-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  width: 100%;
  max-width: 240px;
}
.mg-num-btn {
  aspect-ratio: 1;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mg-num-btn:active { transform: scale(.92); }
.mg-num-correct {
  background: var(--accent-green) !important;
  color: #0d0b1a !important;
  transform: scale(1.1);
}
.mg-num-wrong {
  background: var(--accent-pink) !important;
  animation: shake .3s ease both;
}

/* ─── Answer drawing overlay ───────────────────────────────────────────── */

.answer-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.answer-draw-sheet {
  background: var(--card-bg, #1e1a35);
  border-radius: 20px;
  padding: 1.2rem;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  border: 1px solid rgba(255,255,255,.1);
}
.answer-draw-title {
  margin: 0;
  font-size: 1.2rem;
  font-family: 'Fredoka','Nunito',sans-serif;
  color: var(--accent-yellow, #ffe14d);
}
.answer-draw-btns {
  display: flex;
  gap: .8rem;
  width: 100%;
}
.answer-draw-btns .btn {
  flex: 1;
  padding: .75rem;
  font-size: 1rem;
}

/* ─── Answer draw button & preview row ─────────────────────────────────── */

.answer-draw-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.answer-draw-btn {
  font-size: .78rem;
  padding: .22rem .6rem;
  border-radius: 20px;
  opacity: .7;
  transition: opacity .2s;
}
.answer-draw-btn:hover { opacity: 1; }
.answer-drawing-preview {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.answer-drawing-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 2px solid var(--accent-purple, #d47dff);
  object-fit: cover;
}
.remove-drawing-btn {
  background: none;
  border: none;
  color: var(--text-dim, rgba(255,255,255,.5));
  font-size: 1rem;
  cursor: pointer;
  padding: .2rem;
  line-height: 1;
  border-radius: 50%;
  transition: color .2s;
}
.remove-drawing-btn:hover { color: var(--accent-pink, #ff4466); }

/* ─── Vote button drawing thumbnails ────────────────────────────────────── */

.vote-drawing-thumb {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto .4rem;
  border: 2px solid rgba(255,255,255,.2);
}
.vote-btn-text {
  display: block;
  font-size: .9em;
  opacity: .9;
}

/* ─── Final vote drawing thumbnails ─────────────────────────────────────── */

.final-vote-drawing {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto .4rem;
  border: 2px solid rgba(255,255,255,.2);
}
.final-vote-text {
  display: block;
}