/* Chalkboard Imposter (Beta) — CSS */
:root{
  --bg:#070707;
  --panel:#0c0c0c;
  --chalk:#ffffff;
  --chalk2:#dadada;
  --muted:#a9a9a9;
  --green:#9ee493;
  --red:#f27b7b;
  --yellow:#ffd166;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --radius: 22px;
  --cardW: 260px;
  --cardH: 340px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 900px at 40% 30%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 700px at 70% 80%, rgba(158,228,147,.05), transparent 65%),
              linear-gradient(180deg, #050505, #090909);
  color:var(--chalk);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015), rgba(255,255,255,.015) 1px, transparent 1px, transparent 5px),
    radial-gradient(1200px 900px at 20% 10%, rgba(255,255,255,.03), transparent 55%),
    radial-gradient(800px 700px at 80% 30%, rgba(255,255,255,.02), transparent 60%);
  mix-blend-mode:overlay;
  opacity:.55;
}

.chalky{ font-family: "Chalkboard SE", "Bradley Hand", "Comic Sans MS", "Segoe Print", cursive; letter-spacing:.4px; }
.muted{ color: rgba(255,255,255,.65); }

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(5,5,5,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:1200px; margin:0 auto; padding: 14px 16px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.brand{ display:flex; gap:12px; align-items:center; user-select:none; }
.logo{
  width:38px; height:38px; border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(0,0,0,.0) 80%),
              linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  position:relative;
}
.logo:after{ content:"✎"; position:absolute; inset:0; display:grid; place-items:center; font-size:18px; opacity:.85; }
.brand h1{ margin:0; font-size:16px; letter-spacing:.6px; font-weight:800; }
.sub{ margin:0; font-size:12px; color: rgba(255,255,255,.62); }
.badge{ font-size:10px; padding: 3px 6px; border-radius: 999px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); }
.right{ display:flex; gap:10px; align-items:center; }

.main{ max-width:1200px; margin:0 auto; width:100%; padding: 18px 16px 36px; }

.card{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.08));
  box-shadow: var(--shadow);
  padding: 18px;
}

.form{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 10px; }
label span{ display:block; font-size:12px; color: rgba(255,255,255,.70); margin-bottom:6px; }
input{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--chalk);
  padding: 12px 12px;
  outline:none;
}
input:focus{ border-color: rgba(158,228,147,.45); box-shadow: 0 0 0 4px rgba(158,228,147,.08); }

.row{ display:flex; gap:10px; align-items:center; margin-top: 12px; flex-wrap:wrap; }

.btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--chalk);
  padding: 9px 12px;
  border-radius: 14px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  font-weight:800;
  letter-spacing:.2px;
  font-size:13px;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20);} 
.btn:active{ transform: translateY(0px); }
.btn.primary{ background: rgba(158,228,147,.16); border-color: rgba(158,228,147,.35);} 
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding: 8px 10px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
  font-size:12px;
  color: rgba(255,255,255,.75);
  user-select:none;
}
.dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.35); box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset; }
.dot.green{ background: var(--green); }
.dot.red{ background: var(--red); }
.dot.yellow{ background: var(--yellow); }

.hint{ margin-top: 10px; font-size:12px; color: rgba(255,255,255,.65); }

.lobby-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.players{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }

/* stage */
.stage{ border-radius: 28px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.08)); box-shadow: var(--shadow); padding: 18px; }

.arena{ position:relative; display:grid; gap: 16px; align-items:center; justify-items:center; min-height: 640px; padding: 8px; }

@media (max-width: 980px){ :root{ --cardW: 230px; --cardH: 320px; } .arena{ min-height: 720px; } }
@media (max-width: 720px){
  :root{ --cardW: 100%; --cardH: 280px; }
  .form{ grid-template-columns: 1fr; }
  .arena{ grid-template-columns: 1fr; grid-template-areas: "question" "p1" "p2" "p3" "p4" "p5" "p6"; min-height:auto; }
  .player-card{ width: 100% !important; }
}

.players-3{ grid-template-columns: 1fr 1.2fr 1fr; grid-template-areas: "p1 question p2" "p3 question p2"; }
.players-4{ grid-template-columns: 1fr 1.2fr 1fr; grid-template-areas: "p1 question p2" "p3 question p4"; }
.players-5{ grid-template-columns: 1fr 1.2fr 1fr; grid-template-areas: "p1 question p2" "p3 question p4" "p5 question p4"; }
.players-6{ grid-template-columns: 1fr 1.2fr 1fr; grid-template-areas: "p1 question p2" "p4 question p5" "p3 question p6"; }

.question{
  grid-area: question;
  width: min(560px, 100%);
  border-radius: 26px;
  border: 2px dashed rgba(255,255,255,.35);
  background: rgba(12,12,12,.68);
  padding: 18px 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}
.question:before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(500px 200px at 50% 15%, rgba(255,255,255,.08), transparent 70%),
              radial-gradient(420px 240px at 85% 85%, rgba(255,255,255,.05), transparent 72%);
  opacity:.8;
  pointer-events:none;
}
.labelrow{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; position:relative; z-index:1; }
.big{ margin: 10px 0 4px; font-weight: 900; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.05; letter-spacing: .6px; text-shadow: 0 2px 0 rgba(0,0,0,.55); position:relative; z-index:1; }
.phase{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top: 10px; position:relative; z-index:1; }

.player-card{
  width: var(--cardW);
  height: var(--cardH);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(12,12,12,.92), rgba(8,8,8,.86));
  box-shadow: 0 18px 54px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 14px 14px 12px;
  transform: rotate(var(--tilt, -0.6deg));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.player-card:before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(420px 260px at 50% 10%, rgba(255,255,255,.06), transparent 72%),
    radial-gradient(420px 260px at 15% 85%, rgba(255,255,255,.04), transparent 72%),
    repeating-linear-gradient(18deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 7px);
  opacity:.7;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.player-card.active{ border-color: rgba(158,228,147,.55); box-shadow: 0 20px 64px rgba(158,228,147,.08), 0 18px 54px rgba(0,0,0,.55); transform: translateY(-2px) rotate(calc(var(--tilt, -0.6deg) * -1)); }
.player-card.eliminated{ opacity:.40; filter: grayscale(1); transform: scale(.98); }

.avatar{
  width: 110px; height: 110px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.06) 45%, rgba(0,0,0,.05) 70%),
              linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.0));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22);
  display:grid; place-items:center;
  margin-top: 4px;
  position:relative;
  z-index:1;
}
.avatar .initials{ font-size: 32px; font-weight: 900; letter-spacing: 1px; opacity:.9; text-shadow: 0 2px 0 rgba(0,0,0,.4); }

.mic{
  position:absolute; top: 10px; right: 12px;
  display:flex; align-items:center; gap:8px;
  z-index:2; user-select:none;
}
.mic .icon{ width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); display:grid; place-items:center; font-weight: 900; font-size: 15px; }
.mic .state{ font-size: 11px; color: rgba(255,255,255,.78); line-height: 1.1; max-width: 90px; text-align:right; }
.mic.allowed .icon{ border-color: rgba(158,228,147,.50); background: rgba(158,228,147,.12); box-shadow: 0 0 0 6px rgba(158,228,147,.07); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }

.username{ margin: 10px 0 4px; font-size: 15px; font-weight: 800; color: rgba(255,255,255,.9); position:relative; z-index:1; }
.answer{ margin-top: 8px; flex: 1; width: 100%; display:flex; align-items:center; justify-content:center; text-align:center; padding: 10px 8px; position:relative; z-index:1; }
.answer .text{ font-size: 34px; font-weight: 900; line-height: 1.06; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.55); filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.answer.small .text{ font-size: 24px; text-transform:none; }
.answer.number .text{ font-size: 48px; }

.footer{ display:flex; gap:10px; align-items:center; justify-content:space-between; width:100%; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.78); font-size: 12px; position:relative; z-index:1; }
.stats{ display:flex; gap:10px; align-items:center; }

.p1{ grid-area:p1; }
.p2{ grid-area:p2; }
.p3{ grid-area:p3; }
.p4{ grid-area:p4; }
.p5{ grid-area:p5; }
.p6{ grid-area:p6; }

.actionbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top: 14px; flex-wrap:wrap; }
.actionbar .center{ display:flex; gap:10px; align-items:center; flex:1; justify-content:center; }
.actionbar .left,.actionbar .right{ display:flex; gap:10px; align-items:center; }

.panel{ margin-top: 12px; border-radius: 22px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); padding: 14px; }
.chatlog{ max-height: 240px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right: 6px; }
.chatmsg{ border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.25); border-radius: 14px; padding: 8px 10px; }
.chatmsg .who{ font-size:12px; color: rgba(255,255,255,.72); }
.chatmsg .txt{ margin-top: 2px; }

.voteRow{ display:flex; gap:10px; flex-wrap:wrap; }

.toast{
  position:fixed; bottom:16px; left:50%; transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-2px); }