:root{
  --ink:#f3eee6;
  --muted:#a89f92;
  --ground:#151312;
  --ground2:#211d1a;
  --panel:rgba(255,255,255,.045);
  --line:rgba(201,169,106,.22);
  --gold:#c9a96a;
  --gold-bright:#e3c88c;
  --green:#7cc08a;
  --red:#d9776b;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:radial-gradient(120% 90% at 50% 0%,var(--ground2) 0%,var(--ground) 60%) fixed;
  color:var(--ink);
  font-family:Jost,"Helvetica Neue",Arial,sans-serif;
  font-weight:300;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;margin:0}
h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.06;letter-spacing:.01em}
h1 em{font-style:italic;color:var(--gold)}
a{color:var(--gold)}

.brand{
  font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin:0 0 22px;font-weight:400;
}
.rule{width:56px;height:1px;background:var(--gold);opacity:.75;margin:22px 0}
.muted{color:var(--muted)}
.small{font-size:.85rem}

.wrap{max-width:34rem;margin:0 auto;padding:40px 24px 64px}
.wrap.wide{max-width:76rem}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.card + .card{margin-top:16px}

label{display:block;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}

input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%;padding:13px 14px;
  background:rgba(0,0,0,.3);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  font-family:inherit;font-size:1rem;font-weight:300;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;min-height:80px;line-height:1.5}
select option{background:#1b1815;color:var(--ink)}

button{
  font-family:inherit;font-size:.95rem;font-weight:400;
  padding:12px 18px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
button:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:var(--gold)}
button:disabled{opacity:.35;cursor:not-allowed}
button.primary{background:var(--gold);border-color:var(--gold);color:#1a1613;font-weight:400}
button.primary:hover:not(:disabled){background:var(--gold-bright);border-color:var(--gold-bright)}
button.good{border-color:rgba(124,192,138,.5);color:var(--green)}
button.bad{border-color:rgba(217,119,107,.5);color:var(--red)}
button.tiny{padding:6px 10px;font-size:.8rem;border-radius:8px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:0 0 auto}
.grow{flex:1 1 auto;min-width:0}

.notice{
  margin-top:14px;padding:11px 13px;border-radius:10px;font-size:.9rem;line-height:1.45;
  border:1px solid rgba(217,119,107,.4);background:rgba(217,119,107,.1);color:#f0b9b1;
}
.notice.ok{border-color:rgba(124,192,138,.4);background:rgba(124,192,138,.1);color:#b6e0c0}
.notice[hidden]{display:none}

ol.steps{margin:0;padding-left:1.25rem;line-height:1.75;color:var(--muted)}
ol.steps strong{color:var(--ink);font-weight:400}

.pill{
  display:inline-block;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.pill.live{border-color:var(--gold);color:var(--gold)}

.players{list-style:none;margin:0;padding:0}
.players li{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.players li:last-child{border-bottom:0}
.players .dot{width:7px;height:7px;border-radius:50%;background:#4b443c;flex:0 0 auto}
.players .dot.on{background:var(--green);box-shadow:0 0 8px rgba(124,192,138,.6)}
.players .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players .sc{font-variant-numeric:tabular-nums;color:var(--gold)}
.players li.me .nm{color:var(--gold)}
.players li.buzzed{background:rgba(201,169,106,.08)}

.qtext{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,4.6vw,2.2rem);
  line-height:1.28;margin:0;text-wrap:balance;
}
.atext{color:var(--green);font-size:1.15rem;line-height:1.45;margin:14px 0 0}

@media (prefers-reduced-motion:no-preference){
  .fade{animation:fade .5s ease-out both}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}