@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy-deep:#0F2530;
  --navy:#173647;
  --navy-card:#122C3B;
  --cyan:#06ABF6;
  --coral:#E59385;
  --coral-deep:#C96B5A;
  --gold:#F0C24B;
  --ink-100:#F3F7FA;
  --ink-300:#C7D6DE;
  --ink-500:#8FA6B8;
  --line:#2A4757;
  --focus:#8FD8FF;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(ellipse 900px 600px at 85% -10%, rgba(6,171,246,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, rgba(229,147,133,0.08), transparent 60%),
    var(--navy-deep);
  color:var(--ink-100);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:17px;
}

.wrap{
  width:100%;
  max-width:640px;
  padding:24px 20px 32px;
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0 auto;
}

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:28px; width:auto; display:block; }
.eyebrow{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-500);
}
.topbar-actions{ display:flex; gap:8px; flex-wrap:wrap; }

h1.title{
  font-family:"Poppins",sans-serif; font-weight:800;
  font-size:clamp(24px,5.4vw,30px); line-height:1.14; margin:0; text-wrap:balance;
}
h1.title span{ color:var(--coral); }
.sub{ color:var(--ink-300); font-size:15.5px; line-height:1.5; margin:0; max-width:56ch; }

.card{
  position:relative; background:var(--navy); border:1px solid var(--line);
  border-radius:18px; padding:26px 24px 24px; box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.ring{
  position:absolute; top:-32px; right:-32px; width:104px; height:104px;
  border-radius:50%; border:2px dashed var(--cyan); opacity:0.3; pointer-events:none;
}

/* forms */
.add-row{ display:flex; gap:10px; }
input.text-input, input.name-input{
  flex:1; min-width:0; font-family:"Inter",sans-serif; font-size:16.5px; color:var(--ink-100);
  background:var(--navy-card); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px;
}
input.text-input:focus, input.name-input:focus{ outline:none; border-color:var(--cyan); }
input.text-input::placeholder, input.name-input::placeholder{ color:var(--ink-500); }

button{ font-family:"Poppins",sans-serif; }
button.primary-btn, button.add-btn{
  font-weight:700; font-size:15px; color:var(--navy-deep); background:var(--cyan);
  border:none; border-radius:12px; padding:15px 20px; cursor:pointer;
}
button.primary-btn:hover, button.add-btn:hover{ background:#3cc0ff; }
button.primary-btn:disabled{ opacity:0.45; cursor:not-allowed; }

button.secondary-btn{
  font-weight:700; font-size:14.5px; color:var(--navy-deep); background:var(--coral);
  border:none; border-radius:12px; padding:13px 20px; cursor:pointer;
}
button.secondary-btn:hover{ background:#eea495; }

button.ghost-btn{
  font-weight:700; font-size:13.5px; color:var(--ink-300); background:transparent;
  border:1.5px solid var(--line); border-radius:12px; padding:11px 18px; cursor:pointer;
}
button.ghost-btn:hover{ border-color:var(--cyan); color:var(--ink-100); }
button.ghost-btn:disabled{ opacity:0.35; cursor:not-allowed; }

button.chip-btn{
  font-weight:700; font-size:13px; color:var(--ink-100); background:var(--navy-card);
  border:1.5px solid var(--line); border-radius:99px; padding:9px 15px; cursor:pointer;
}
button.chip-btn:hover{ border-color:var(--cyan); }

.error-msg{ color:#F3B9AC; font-size:14px; margin:2px 0 0; }
.hint{ color:var(--ink-500); font-size:13px; text-align:center; margin:2px 0 0; }

/* progress + badges */
.progress-row{ display:flex; align-items:center; gap:10px; }
.progress-count{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:14px; color:var(--ink-500);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.segments{ display:flex; gap:5px; flex:1; }
.segments .seg{ height:6px; flex:1; border-radius:99px; background:var(--line); overflow:hidden; }
.segments .seg i{ display:block; height:100%; width:0%; background:var(--cyan); border-radius:99px; }
.segments .seg.done i{ width:100%; }
.segments .seg.current i{ width:100%; opacity:.35; }

.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:"Poppins",sans-serif; font-weight:700;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:7px 13px; border-radius:99px; margin-bottom:18px;
}
.badge.tf{ background:rgba(6,171,246,0.16); color:#7FD4FF; }
.badge.mc{ background:rgba(229,147,133,0.18); color:#F3B9AC; }
.badge.fib{ background:rgba(255,255,255,0.10); color:var(--ink-300); }

.qtext{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:clamp(21px,4.8vw,26px);
  line-height:1.3; margin:0 0 20px; text-wrap:balance;
}

/* answer options */
.options{ display:flex; flex-direction:column; gap:11px; }
.tf-row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }

button.opt{
  font-family:"Inter",sans-serif; font-size:16.5px; font-weight:600; color:var(--ink-100);
  text-align:left; background:var(--navy-card); border:1.5px solid var(--line); border-radius:12px;
  padding:16px 17px; cursor:pointer; display:flex; align-items:center; gap:11px;
}
button.opt .k{ font-family:"Poppins",sans-serif; font-weight:800; font-size:14px; color:var(--ink-500); min-width:20px; }
.tf-row button.opt{ justify-content:center; text-align:center; }
button.opt:hover:not(:disabled){ border-color:var(--cyan); }
button.opt:disabled{ cursor:default; opacity:0.55; }
button.opt.picked{ border-color:var(--cyan); background:rgba(6,171,246,0.16); }

.opt-static{
  font-family:"Inter",sans-serif; font-size:16.5px; font-weight:600; color:var(--ink-300);
  background:var(--navy-card); border:1.5px solid var(--line); border-radius:12px;
  padding:16px 17px; display:flex; align-items:center; gap:11px;
}
.tf-row .opt-static{ justify-content:center; text-align:center; }
.opt-static .k{ font-family:"Poppins",sans-serif; font-weight:800; font-size:14px; color:var(--ink-500); min-width:20px; }
.opt-static.reveal-correct{ border-color:var(--cyan); background:rgba(6,171,246,0.16); color:var(--ink-100); }
.opt-static.reveal-correct .k{ color:var(--cyan); }
.opt-static.reveal-wrong{ border-color:var(--coral-deep); background:rgba(201,107,90,0.18); color:var(--ink-100); }

.explain{
  margin-top:16px; padding:15px 17px; border-radius:12px; font-size:15.5px; line-height:1.55;
  background:rgba(6,171,246,0.10); border:1px solid rgba(6,171,246,0.3); color:var(--ink-300);
}
.explain.wrong{ background:rgba(201,107,90,0.12); border-color:rgba(201,107,90,0.35); }
.explain .verdict{
  font-family:"Poppins",sans-serif; font-weight:800; font-size:13.5px; letter-spacing:0.03em;
  text-transform:uppercase; display:block; margin-bottom:5px; color:#7FD4FF;
}
.explain.wrong .verdict{ color:#F3B9AC; }

.status-line{ color:var(--ink-300); font-size:15.5px; line-height:1.55; text-align:center; padding:10px 0; }
.status-line b{ color:var(--ink-100); }

/* roster / chips */
.roster{ display:flex; flex-wrap:wrap; gap:8px; max-height:180px; overflow-y:auto; }
.roster-empty{ color:var(--ink-500); font-size:14px; font-style:italic; }
.player-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--navy-card); border:1px solid var(--line); border-radius:10px;
}
.player-row .name{ flex:1; font-weight:600; font-size:15px; }
.player-row .score{ font-family:"Poppins",sans-serif; font-weight:800; color:var(--cyan); font-variant-numeric:tabular-nums; }
.player-row .flag{ font-size:12px; color:var(--ink-500); }
.player-row.answered{ border-color:rgba(6,171,246,0.4); }
.player-row .kick{
  width:22px; height:22px; border-radius:50%; border:none; background:rgba(229,147,133,0.16);
  color:var(--coral); font-size:13px; cursor:pointer; flex:none;
}

/* leaderboard */
.lb-row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
.lb-row:last-child{ border-bottom:none; }
.lb-rank{ font-family:"Poppins",sans-serif; font-weight:800; font-size:15px; color:var(--ink-500); width:26px; }
.lb-name{ flex:1; font-weight:700; font-size:16px; }
.lb-score{ font-family:"Poppins",sans-serif; font-weight:800; color:var(--cyan); font-variant-numeric:tabular-nums; font-size:16px; }
.lb-row.top1{ border-color:var(--gold); }
.lb-row.me{ background:rgba(6,171,246,0.08); border-radius:10px; }

footer{ text-align:center; color:var(--ink-500); font-size:13px; padding-top:6px; }
footer b{ color:var(--ink-300); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }