:root { --bg:#0f1115; --card:#181b22; --text:#e8eaf0; --muted:#8b92a5; --accent:#e1306c; --border:#2a2f3a; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; font:16px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
h1 { margin:0; font-size:1.25rem; }
h2 { margin-top:2rem; font-size:1.05rem; }
nav button { background:none; border:0; color:var(--muted); font:inherit; padding:.4rem .8rem; cursor:pointer; border-radius:.5rem; }
nav button.active { color:var(--text); background:var(--card); }
main { max-width:56rem; margin:0 auto; padding:1.25rem; }
.muted { color:var(--muted); font-size:.9rem; }
#drop { border:2px dashed var(--border); border-radius:1rem; padding:2rem 1.25rem; text-align:center; }
#drop.over { border-color:var(--accent); background:var(--card); }
.btn { display:inline-block; margin:.25rem; padding:.5rem 1rem; background:var(--accent); color:#fff; border-radius:.5rem; cursor:pointer; }
code { background:var(--card); padding:.1rem .35rem; border-radius:.3rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.75rem; margin-top:1.25rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:.9rem 1rem; }
.card b { display:block; font-size:1.5rem; }
ol { padding-left:1.25rem; }
li span { color:var(--muted); }
.bars { display:flex; align-items:flex-end; gap:3px; height:9rem; }
.bars div { flex:1; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; position:relative; }
.bars div::after { content:attr(data-h); position:absolute; bottom:-1.3rem; left:50%; transform:translateX(-50%); font-size:.65rem; color:var(--muted); }
#by-hour { margin-bottom:2rem; }
.panel { background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem 1.25rem; margin-bottom:1.25rem; }
.panel h2 { margin:0 0 .5rem; }
.row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.source { margin-top:1.25rem; }
input { font:inherit; padding:.5rem .75rem; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:.5rem; }
button.btn { border:0; font:inherit; }
button:disabled { opacity:.6; cursor:default; }
.btn.small { padding:.25rem .7rem; font-size:.85rem; }
.btn.danger { background:#7a1f2b; }
.link { background:none; border:0; color:var(--muted); font:inherit; cursor:pointer; text-decoration:underline; }
.error { color:#ff6b81; margin-left:.5rem; }
.rows { list-style:none; padding:0; margin:0; }
.rows li { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.5rem 0; border-top:1px solid var(--border); }
details { margin-top:2rem; }
summary { cursor:pointer; color:var(--muted); }
#thread-list { max-height:24rem; overflow:auto; margin-top:.5rem; }
.rows li span { color:inherit; }

/* ---------- games ---------- */
:root { --grad:linear-gradient(135deg,#833ab4,#e1306c 55%,#f77737); --good:#2ecc71; --bad:#ff6b81; --gold:#fcaf45; }
.gtabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.gtab { font:inherit; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer; transition:color .2s, transform .15s; }
.gtab:hover { color:var(--text); transform:translateY(-1px); }
.gtab.active { color:#fff; background:var(--grad); border-color:transparent; }
.big-btn { font:600 1rem system-ui,sans-serif; padding:.75rem 1.5rem; border:0; border-radius:.8rem; cursor:pointer; color:#fff; background:var(--grad); transition:transform .12s, filter .15s; }
.big-btn:hover { transform:translateY(-2px); filter:brightness(1.1); }
.big-btn:active { transform:scale(.97); }
.big-btn.ghost { background:var(--card); border:1px solid var(--border); color:var(--text); }
.actions { margin-top:.75rem; min-height:3rem; }

.modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.75rem; }
.mode { display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; text-align:left; font:inherit; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem 1.1rem; cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .2s; animation:rise .4s both; animation-delay:var(--d,0ms); }
.mode:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 10px 30px #e1306c33; }
.mode-icon { font-size:2rem; }
.mode b { font-size:1.1rem; }
.mode small { color:var(--muted); }
.mode .best { color:var(--gold); }

.hud { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.5rem; font-variant-numeric:tabular-nums; }
.hud-score { font-size:1.7rem; font-weight:800; min-width:5rem; }
.hud-meta { color:var(--muted); min-width:5rem; text-align:right; font-weight:600; }
.streak { color:#f77737; font-weight:700; }
.heart { display:inline-block; margin-left:.15rem; color:var(--bad); transition:opacity .4s, filter .4s, transform .4s; }
.heart.lost { opacity:.25; filter:grayscale(1); transform:scale(.8); }
.timer { height:6px; background:var(--card); border-radius:3px; overflow:hidden; margin-bottom:1rem; }
#quiz-timer { height:100%; background:var(--grad); transform-origin:left; }
#quiz-timer.low { background:var(--bad); animation:blink .45s infinite alternate; }

.qcard { background:var(--card); border:1px solid var(--border); border-radius:1.25rem; padding:1.25rem; min-height:20rem; }
.chip { display:inline-block; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--gold); border:1px solid #fcaf4555; border-radius:999px; padding:.15rem .6rem; }
.question { font-size:1.25rem; font-weight:600; margin:.6rem 0 .2rem; }
.hint { color:var(--muted); font-size:.85rem; margin:.1rem 0 .5rem; }
.big-word { font-size:clamp(2.2rem,8vw,3.6rem); font-weight:800; text-align:center; margin:.75rem 0 .5rem; overflow-wrap:anywhere; text-shadow:0 0 28px #e1306c88; animation:pop .55s cubic-bezier(.2,1.6,.4,1) both; animation-delay:.1s; }
blockquote { margin:1rem 0 .25rem; padding:.85rem 1.1rem; border-left:3px solid var(--accent); background:var(--bg); border-radius:.6rem; white-space:pre-wrap; overflow-wrap:anywhere; font-size:1.1rem; animation:rise .45s both; animation-delay:.1s; }

.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.6rem; margin:1rem 0 .5rem; }
.choice { display:flex; align-items:center; gap:.65rem; text-align:left; font:inherit; padding:.8rem .9rem; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:.75rem; cursor:pointer; overflow-wrap:anywhere; transition:transform .12s, border-color .15s, background .25s, opacity .25s; animation:rise .35s both; animation-delay:calc(var(--i,0) * 70ms + 150ms); }
.choice:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--accent); }
.choice:active:not(:disabled) { transform:scale(.97); }
.choice:disabled { opacity:1; cursor:default; }
.choice kbd { font:600 .72rem system-ui,sans-serif; color:var(--muted); border:1px solid var(--border); border-radius:.35rem; padding:.05rem .4rem; }
.choice.right { border-color:var(--good); background:#123d26; animation:pop .4s; }
.choice.wrong { border-color:var(--bad); background:#4a1620; }
.choice.dim { opacity:.4; }

.reveal:empty { display:none; }
.reveal { border-top:1px solid var(--border); margin-top:.75rem; padding-top:.5rem; }
.verdict { font-size:1.15rem; font-weight:700; margin:.5rem 0; animation:pop .4s both; }
.verdict.good { color:var(--good); }
.verdict.bad { color:var(--bad); }

.hbars { display:grid; gap:.45rem; margin:.75rem 0; }
.bar-row { display:grid; grid-template-columns:minmax(6rem,11rem) 1fr auto; align-items:center; gap:.6rem; font-size:.92rem; }
.bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { height:1.1rem; background:var(--bg); border-radius:.55rem; overflow:hidden; }
.bar-fill { height:100%; width:0; border-radius:.55rem; background:#4b5263; transition:width .9s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0ms); }
.bar-row.win .bar-fill { background:var(--grad); }
.bar-row.win .bar-label { font-weight:700; }
.bar-val { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:.85rem; }

.cloud { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.2rem .9rem; padding:1rem; min-height:8rem; background:var(--bg); border-radius:1rem; margin:.75rem 0; }
.cloud span { font-size:calc(.85rem + var(--w,.5) * 1.6rem); font-weight:700; line-height:1.25; opacity:0; transform:scale(.3) rotate(-8deg); transition:opacity .35s, transform .5s cubic-bezier(.2,1.6,.4,1); transition-delay:var(--d,0ms); }
.cloud span.shown { opacity:1; transform:none; }
.cloud span:nth-child(3n) { color:var(--gold); }
.cloud span:nth-child(3n+1) { color:#f06292; }
.cloud span:nth-child(3n+2) { color:#b388ff; }
.emoji-line { font-size:1.4rem; }
.emoji-line small { font-size:.8rem; color:var(--muted); margin:0 .8rem 0 .2rem; }

.end { text-align:center; padding:2rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:1.25rem; animation:pop .5s cubic-bezier(.2,1.4,.4,1); }
.end h2 { margin:0; }
.end-score { font-size:clamp(3rem,12vw,4.5rem); font-weight:800; font-variant-numeric:tabular-nums; margin:.5rem 0; }
.record { display:inline-block; margin:.25rem 0 .75rem; padding:.3rem 1rem; border-radius:999px; background:#fcaf4522; color:var(--gold); font-weight:700; animation:pulse 1.1s infinite; }
.end .row { justify-content:center; margin-top:1rem; }

.hl-score { display:flex; justify-content:space-between; font-weight:600; margin-bottom:.75rem; }
.hl-score b { font-size:1.3rem; }
.hl-cards { display:grid; grid-template-columns:1fr auto 1fr; gap:.75rem; align-items:stretch; }
.hl-card { background:var(--card); border:1px solid var(--border); border-radius:1.25rem; padding:1.5rem 1rem; text-align:center; display:flex; flex-direction:column; justify-content:center; gap:.35rem; min-height:13rem; transition:border-color .3s, box-shadow .3s; }
.hl-card .who { color:var(--muted); overflow-wrap:anywhere; }
.hl-word { font-size:clamp(1.7rem,5vw,2.5rem); font-weight:800; overflow-wrap:anywhere; }
.hl-count { font-size:1.9rem; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
.hl-count.unknown { color:var(--muted); }
.hl-card.right { border-color:var(--good); box-shadow:0 0 0 4px #2ecc7133; }
.hl-card.wrong { border-color:var(--bad); box-shadow:0 0 0 4px #ff6b8133; }
.hl-vs { align-self:center; font-weight:800; color:var(--muted); width:2.6rem; height:2.6rem; line-height:2.6rem; text-align:center; border-radius:50%; background:var(--card); border:1px solid var(--border); }
.hl-actions { display:flex; justify-content:center; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
.hl-over { text-align:center; margin-top:1rem; }

.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.75rem 0 1rem; }
.chips button { font:inherit; font-size:.9rem; padding:.3rem .75rem; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; transition:transform .12s, border-color .15s; animation:rise .3s both; animation-delay:var(--d,0ms); }
.chips button small { color:var(--muted); margin-left:.3rem; }
.chips button:hover, .chips button.active { border-color:var(--accent); transform:translateY(-1px); }
#word-form { justify-content:flex-start; margin:.75rem 0 0; }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:.6rem; overflow:hidden; }
.seg button { font:inherit; font-size:.85rem; padding:.35rem .8rem; background:none; border:0; color:var(--muted); cursor:pointer; }
.seg button.active { background:var(--card); color:var(--text); }
select { font:inherit; padding:.45rem .7rem; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:.5rem; max-width:100%; }

.confetti { position:fixed; width:8px; height:12px; border-radius:2px; pointer-events:none; z-index:50; animation:fly 1s cubic-bezier(.1,.7,.3,1) forwards; }
.float { position:fixed; transform:translate(-50%,-50%); font-weight:800; font-size:1.5rem; pointer-events:none; z-index:51; animation:float-up 1.1s ease-out forwards; text-shadow:0 2px 10px #000a; }
.float.good { color:var(--good); }
.float.bad { color:var(--bad); }

.enter { animation:enter .4s cubic-bezier(.2,.8,.2,1); }
.shake { animation:shake .45s; }
.pulse { display:inline-block; animation:pulse .45s; }
@keyframes enter { from { opacity:0; transform:translateX(40px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pop { 0% { opacity:0; transform:scale(.6); } 70% { opacity:1; transform:scale(1.07); } 100% { transform:scale(1); } }
@keyframes shake { 0%,100% { transform:none; } 20% { transform:translateX(-10px); } 40% { transform:translateX(9px); } 60% { transform:translateX(-6px); } 80% { transform:translateX(4px); } }
@keyframes pulse { 50% { transform:scale(1.25); } }
@keyframes blink { to { opacity:.45; } }
@keyframes fly { to { transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:0; } }
@keyframes float-up { to { transform:translate(-50%,-140%); opacity:0; } }

@media (max-width:560px) {
  .hl-cards { grid-template-columns:1fr; }
  .hl-vs { justify-self:center; }
  .hl-card { min-height:9rem; }
  .bar-row { grid-template-columns:minmax(4.5rem,7rem) 1fr auto; }
  .choices { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}