:root{
  --night:#0d1317;
  --desk:#131c22;
  --panel:#18242b;
  --rule:rgba(240,226,199,.14);
  --paper:#f0e2c7;
  --dim:rgba(240,226,199,.45);
  --ghost:rgba(240,226,199,.2);
  --ember:#e8913c;
  --hot:#ffb257;
  --mint:#2fcf85;
  --sky:#4aa8e0;
  --rose:#e0526b;
  --display:"Copperplate","Copperplate Gothic Light","Optima","Trajan Pro",Georgia,serif;
  --type:"American Typewriter","Courier New",ui-monospace,Menlo,monospace;
  --ui:"Avenir Next","Futura","Gill Sans",-apple-system,system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}   /* class rules like .hero{display:flex} would otherwise win */
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(232,145,60,.20), transparent 62%),
    radial-gradient(90% 60% at 50% 110%, rgba(47,207,133,.07), transparent 60%),
    var(--night);
  color:var(--paper);font-family:var(--ui);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh;
}
h1,h2,h3{margin:0;font-weight:400}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

.mark{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

.btn{
  font-family:var(--ui);font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(240,226,199,.06);border:1px solid var(--rule);border-radius:999px;
  padding:12px 20px;transition:background .18s,border-color .18s,transform .08s;
}
.btn:hover{background:rgba(232,145,60,.16);border-color:rgba(232,145,60,.5)}
.btn:active{transform:translateY(1px)}
.btn.big{padding:16px 30px;font-size:15px;background:rgba(232,145,60,.18);border-color:rgba(232,145,60,.55)}
.btn.ghost{background:none;border-color:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--paper);background:none}

/* the four answers, colour + shape so nobody has to rely on colour alone */
.a0{--tint:var(--ember);--ink:#2a1608}
.a1{--tint:var(--mint);--ink:#04231a}
.a2{--tint:var(--sky);--ink:#04202f}
.a3{--tint:var(--rose);--ink:#2c0912}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:color-mix(in srgb, var(--tint) 17%, transparent);
  border:2px solid color-mix(in srgb, var(--tint) 55%, transparent);
  border-radius:14px;padding:18px 20px;color:var(--paper);
  transition:transform .12s,background .18s,border-color .18s,opacity .25s;
}
.opt .glyph{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--tint);color:var(--ink);font-size:15px;font-weight:700;
}
.opt .label{font-size:clamp(15px,2vw,21px);line-height:1.3}
/* a lone emoji or number is the whole answer - make it readable across the room */
.opt.pict .label{font-size:clamp(34px,7vw,60px);line-height:1.05}
.opt:hover{background:color-mix(in srgb, var(--tint) 26%, transparent)}
.opt:active{transform:scale(.985)}
.opt.hit{border-color:var(--mint);background:color-mix(in srgb, var(--mint) 30%, transparent);
  box-shadow:0 0 0 3px rgba(47,207,133,.25)}
.opt.fade{opacity:.28}
.opt.mine{box-shadow:0 0 0 3px rgba(240,226,199,.35)}
.opt:disabled{cursor:default}

.bar{height:8px;border-radius:99px;background:rgba(240,226,199,.1);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--ember));
  border-radius:99px;transition:width .25s linear}
.bar.low i{background:linear-gradient(90deg,#ff8a5c,var(--rose))}

.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--rule);background:rgba(240,226,199,.04);font-size:13px;
}
.chip .em{font-size:18px;line-height:1}

@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 rgba(47,207,133,0)}50%{box-shadow:0 0 40px rgba(47,207,133,.5)}}
.pop{animation:pop .3s ease-out both}
.rise{animation:rise .35s ease-out both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}