:root{
  --paper:#F3F3F0; --card:#FFFFFF; --ink:#1B1C38; --muted:#5C5E7C; --line:#D6D6E0;
  --blue:#2F4CF5; --pink:#FF4D8D; --yellow:#FFE14D; --ok:#138A5B; --bad:#C8364F;
  --on-accent:#FFFFFF;
  --display:"Bowlby One","Arial Black",Impact,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141529; --card:#1D1F3B; --ink:#F1F0F8; --muted:#A4A6C6; --line:#30324F;
    --blue:#7188FF; --pink:#FF6FA5; --yellow:#FFE36A; --ok:#4FD39A; --bad:#FF7A90; --on-accent:#141529;
  }
}
:root[data-theme="dark"]{
  --paper:#141529; --card:#1D1F3B; --ink:#F1F0F8; --muted:#A4A6C6; --line:#30324F;
  --blue:#7188FF; --pink:#FF6FA5; --yellow:#FFE36A; --ok:#4FD39A; --bad:#FF7A90; --on-accent:#141529;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;padding-inline:16px;padding-block:20px 40px}
#app{max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* riso misregistration: the "double" */
.riso{font-family:var(--display);font-weight:400;color:var(--blue);text-shadow:.055em .045em 0 var(--pink);letter-spacing:.005em;line-height:1.02}
.wordmark{font-size:1.15rem}
.hero{font-size:clamp(2.6rem,12vw,4rem)}
.big-name{font-size:clamp(2.4rem,13vw,3.6rem);word-break:break-word}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:1.15rem;max-width:36ch}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:2rem 1fr;gap:10px;align-items:baseline}
.steps b.n{font-family:var(--display);font-weight:400;color:var(--pink);font-size:1.3rem}

.panel{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.field-label{font-weight:700}
.players{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;gap:8px}
input[type=text],textarea{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:10px 12px}
input[type=text]:focus,textarea:focus{border-color:var(--blue);outline:none}
textarea{min-height:92px;resize:vertical}
.icon-btn{flex:none;width:46px;border:2px solid var(--line);background:transparent;color:var(--muted);border-radius:10px;font-size:1.3rem;line-height:1}
.icon-btn:hover{color:var(--bad);border-color:var(--bad)}
.link-btn{align-self:flex-start;background:none;border:0;padding:4px 0;color:var(--blue);font-weight:700}
.tag{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--yellow);color:#1B1C38}

.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:6px 14px;font-weight:700;font-size:.95rem}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.opt{display:flex;flex-direction:column;gap:6px}

.status{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--pink)}

.cta{border:2px solid var(--ink);background:var(--blue);color:var(--on-accent);font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:.02em;padding:14px 20px;border-radius:14px;box-shadow:5px 5px 0 var(--pink);transition:transform .12s,box-shadow .12s}
.cta:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--pink)}
.cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--pink)}
.cta:disabled{opacity:.4;cursor:not-allowed;transform:none}
.ghost{border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;padding:12px 18px;border-radius:14px}
.actions{display:flex;flex-direction:column;gap:12px}
.hint{font-size:.9rem;color:var(--bad);min-height:1.2em}

/* pass-the-phone curtain */
.curtain{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:18px;text-align:left}
.curtain .who{display:flex;flex-direction:column;gap:6px}

.question{font-size:1.45rem;font-weight:700;line-height:1.3;text-wrap:balance}
.qbox{border-left:6px solid var(--pink);padding:4px 0 4px 14px;display:flex;flex-direction:column;gap:6px}

/* answer cards */
.answers{display:grid;gap:18px}
.ans{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.ans.a{box-shadow:6px 6px 0 var(--blue)}
.ans.b{box-shadow:6px 6px 0 var(--pink)}
.ans .letter{font-family:var(--display);font-size:1.6rem;line-height:1}
.ans.a .letter{color:var(--blue)} .ans.b .letter{color:var(--pink)}
.ans .txt{font-size:1.12rem;white-space:pre-wrap;overflow-wrap:anywhere}
.stamp{position:absolute;top:12px;right:12px;font-family:var(--display);font-size:.95rem;padding:3px 10px;border:3px solid currentColor;border-radius:6px;transform:rotate(-6deg);background:var(--card)}
.stamp.real{color:var(--ok)} .stamp.fake{color:var(--bad)}
.ans.dim{opacity:.55}

.votes{display:flex;flex-direction:column;gap:8px}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow .nm{font-weight:700;overflow-wrap:anywhere}
.vbtns{display:flex;gap:6px;flex:none}
.vbtns button{width:52px;height:44px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--display);font-size:1.1rem;border-radius:10px}
.vbtns button.a[aria-pressed="true"]{background:var(--blue);color:var(--on-accent)}
.vbtns button.b[aria-pressed="true"]{background:var(--pink);color:var(--on-accent)}

.result-list{display:flex;flex-direction:column;gap:6px}
.result-list .row{display:flex;justify-content:space-between;gap:10px}
.pts{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.pts.plus{color:var(--ok)}

.board{display:flex;flex-direction:column}
.brow{display:grid;grid-template-columns:2.2rem 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:0}
.brow .rk{font-family:var(--display);color:var(--muted)}
.brow.first .rk{color:var(--pink)}
.brow.double .nm{font-family:var(--display);color:var(--blue);text-shadow:.05em .04em 0 var(--pink)}
.brow .pts{font-size:1.15rem}
.versus{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}
.versus .score{font-family:var(--display);font-size:2.6rem;line-height:1}
.versus .h{color:var(--ok)} .versus .d{color:var(--blue);text-shadow:.05em .04em 0 var(--pink)}

.progress{display:flex;gap:4px}
.progress span{flex:1;height:6px;border-radius:3px;background:var(--line)}
.progress span.on{background:var(--pink)}

.spinner{width:56px;height:56px;border-radius:50%;border:6px solid var(--line);border-top-color:var(--blue);border-right-color:var(--pink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation:none}.cta{transition:none}}

/* site additions */
.foot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;font-size:.85rem;color:var(--muted);padding-top:8px;border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
.note{background:var(--yellow);color:#1B1C38;border-radius:10px;padding:10px 14px;font-size:.95rem}
.install{display:flex;align-items:center;justify-content:space-between;gap:12px}