:root{
  --paper:#FBFCFF; --card:#FFFFFF; --rule:#CFDBF5; --margin:#E4574A;
  --ink:#1C2748; --muted:#5E6A8A; --honey:#F2B632; --honey-ink:#3A2A00;
  --good:#2E9E6B; --bad:#D64B3F; --line:#DCE3F2;
  --ui:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --read:"Andika","Verdana",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{--paper:#131A2D;--card:#1B2440;--rule:#2A3659;--ink:#EEF1FA;--muted:#A3AECB;--line:#2C3860;--good:#45C08A;--bad:#EE6A5E}
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}
html{height:100%}
body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--ui);-webkit-tap-highlight-color:transparent}
main{max-width:460px;margin:0 auto;padding:18px 16px 28px}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0}
button:focus-visible,input:focus-visible{outline:3px solid var(--honey);outline-offset:2px}

h1{font-weight:700;font-size:2.2rem;line-height:1;margin:8px 0 10px}
.bee{display:inline-block;transform:rotate(-8deg)}
.lede{color:var(--muted);margin:0 0 18px;font-size:1.05rem;line-height:1.4}
.hint{color:var(--muted);text-align:center}

.field{display:block;color:var(--muted);font-size:.9rem;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 14px}
.field input{display:block;width:100%;font-weight:600;font-size:1.25rem;background:transparent;border:0;border-bottom:2px dashed var(--rule);padding:4px 0 6px;margin-top:4px;color:var(--ink)}

.big{display:block;width:100%;padding:16px;border-radius:16px;background:var(--ink);color:var(--paper);font-weight:700;font-size:1.2rem;margin-top:14px}
.big.honey{background:var(--honey);color:var(--honey-ink)}
.or{text-align:center;color:var(--muted);margin:22px 0 4px}
.join{display:flex;gap:10px;align-items:stretch}
.join input{flex:1;min-width:0;text-align:center;font:700 1.6rem var(--read);letter-spacing:.3em;text-transform:uppercase;background:var(--card);border:2px solid var(--line);border-radius:16px;margin-top:14px;color:var(--ink)}
.join .big{width:auto;padding:16px 22px}

.sheet{position:relative;background:var(--card);border-radius:6px 20px 20px 6px;padding:26px 18px 22px 44px;
  background-image:repeating-linear-gradient(to bottom,transparent 0 35px,var(--rule) 35px 37px);background-position:0 20px;
  box-shadow:0 2px 0 var(--line),0 10px 24px -14px rgba(28,39,72,.35)}
.sheet::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:2px;background:var(--margin);opacity:.7}
.code{font:700 4rem/1 var(--read);letter-spacing:.2em;text-align:center;margin:10px 0}

.who{font-size:1.2rem;margin:0 0 14px}
.meter-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:10px;margin:12px 0;color:var(--muted)}
.meter{height:14px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--good);transition:width .08s linear}

.status{display:grid;grid-template-columns:100px 1fr;gap:8px 10px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px;margin:18px 0}
.status dt{color:var(--muted)}
.status dd{margin:0;font-weight:600}
.ok{color:var(--good)} .warn{color:var(--margin)}

.ghost{display:block;width:100%;padding:14px;border-radius:16px;background:transparent;border:2px solid var(--line);font-weight:600;font-size:1.05rem;margin-top:10px}
.danger{color:var(--bad);border-color:var(--bad)}
.error{background:var(--bad);color:#fff;padding:12px 14px;border-radius:14px;margin-top:18px;font-weight:600}
@media (prefers-reduced-motion: reduce){.meter i{transition:none}}

/* call bar */
.callbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.callbar .with{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.callbar .with b{color:var(--ink)}
.dot{width:12px;height:12px;border-radius:50%;background:var(--rule);flex:none}
.dot.ok{background:var(--good)} .dot.warn{background:var(--margin)}
.chip{padding:8px 12px;border-radius:12px;background:var(--card);border:2px solid var(--line);font-weight:600;font-size:.9rem}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.danger{color:var(--bad);border-color:var(--bad)}
.diag{margin-top:26px;color:var(--muted)}
.diag summary{cursor:pointer;font-weight:600}

/* scoreboard */
.board{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.score{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px;position:relative}
.score.spelling{border-color:var(--honey)}
.score .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score .nm small{color:var(--muted);font-weight:500}
.score .pts{font-size:2.1rem;font-weight:700;line-height:1.1}
.score .pts small{font-size:.95rem;color:var(--muted);font-weight:500}
.dots{display:flex;gap:4px;margin-top:2px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
.dots i.on{background:var(--honey)}
.tag{position:absolute;top:-10px;right:10px;background:var(--honey);color:var(--honey-ink);font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:99px}

/* setup */
.step{font-size:1.3rem;margin:4px 0 12px}
.player{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px;margin-bottom:12px}
.lbl{font-size:.9rem;color:var(--muted);margin:0 0 6px}
.seg{display:flex;gap:6px;background:var(--paper);border-radius:12px;padding:4px}
.seg button{flex:1;padding:9px 6px;border-radius:9px;background:transparent;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--honey);color:var(--honey-ink)}

/* picking */
.cards{display:grid;gap:10px}
.card{display:block;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 14px}
.card:active{border-color:var(--honey)}
.card .w{display:block;font:700 1.6rem var(--read)}
.card .s{display:block;color:var(--muted);font-family:var(--read);margin-top:2px}
.custom{display:flex;gap:8px;margin-top:14px}
.custom input{flex:1;min-width:0;font:600 1.1rem var(--read);padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink)}

/* word sheet */
.sheet.hidden{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:200px}
.sheet.hidden .eyes{font-size:3rem;margin-bottom:6px}
.sheet.hidden p{font-size:1.2rem;margin:0;max-width:24ch}
.word{font:700 clamp(2rem,10vw,2.9rem)/1.15 var(--read);margin:0 0 8px;overflow-wrap:anywhere}
.sentence{font:400 1.2rem/37px var(--read);margin:0}
.syl{font:700 1.2rem var(--read);color:var(--margin);letter-spacing:.04em;margin-bottom:6px}
.tools{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tool{padding:9px 14px;border-radius:12px;background:var(--paper);border:2px solid var(--line);font-weight:600;font-size:.95rem}
.who{font-size:1.15rem;margin:4px 2px 12px;line-height:1.35}

/* typing */
.timer{font:700 4.5rem/1 var(--ui);text-align:center;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.timer.low{color:var(--bad)}
.answer{display:block;width:100%;font:700 2rem var(--read);text-align:center;padding:14px;border-radius:16px;border:3px solid var(--honey);background:var(--card);color:var(--ink)}

/* result */
.verdict-banner{padding:14px;border-radius:16px;font-weight:700;font-size:1.25rem;text-align:center;color:#fff;margin-bottom:12px}
.verdict-banner.good{background:var(--good)} .verdict-banner.bad{background:var(--bad)}
.diff .hit{color:var(--good)} .diff .miss{color:var(--bad);text-decoration:underline wavy;text-underline-offset:6px}

/* winner */
.win{text-align:center;padding-top:20px}
.win .trophy{font-size:4.5rem}
.win h2{font-size:2.2rem;margin:6px 0}
.final{font-size:1.2rem;color:var(--muted)}