:root{
  --bg:#101626;--panel:#1a2439;--ink:#f5f6fb;--muted:#bfc9de;--line:#76829e;
  --accent:#ffdb79;--math:#8293ff;--physics:#ffab72;--chemistry:#67dfcd;--biology:#a9df71;
  --danger:#ff8f8f;--ok:#8dffb0;font:17px/1.5 system-ui,-apple-system,sans-serif;color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100dvh}
a{color:#b9d6ff}
img.logo{height:36px;width:auto;display:block}
.wrap{max-width:820px;margin:auto;padding:16px}
.wrap.wide{max-width:1200px}
header.app{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #2a3550;position:sticky;top:0;background:#101626ee;backdrop-filter:blur(8px);z-index:20}
header.app nav{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.notice{border-left:4px solid var(--accent);padding:10px 14px;background:#1c2438;border-radius:0 12px 12px 0;margin:12px 0}
.notice.host-trust{border-left-color:#ff9f6b}
.panel{padding:18px;background:var(--panel);border-radius:16px;margin:14px 0}
h1{font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.15;margin:.2em 0}
h2{font-size:1.15rem;margin:1em 0 .4em}
button,.btn{
  font:inherit;min-height:48px;min-width:48px;padding:12px 16px;border:1px solid var(--line);
  border-radius:12px;background:#202c46;color:inherit;cursor:pointer;text-align:left;touch-action:manipulation;
}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}
button[aria-pressed=true]{border:3px solid var(--accent);background:#344467;padding:10px 14px}
button:disabled{opacity:.55;cursor:default}
.primary{background:var(--accent);color:#161d2f;font-weight:750;border-color:var(--accent);text-align:center}
.primary.block,.block{width:100%;display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
input,select{
  font:inherit;min-height:48px;width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:#121a2c;color:var(--ink);
}
label{display:block;font-size:.9rem;margin:10px 0 6px;color:var(--muted)}
.slot{padding:12px;border:1px dashed #3a4866;border-radius:12px;min-height:64px}
.slot.filled{border-style:solid;background:#222c44}
.slot .nick{font-weight:700}
.slot .meta{font-size:.85rem;color:var(--muted)}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#666;margin-right:6px}
.status-dot.on{background:var(--ok)}
.status-dot.warn{background:var(--accent)}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.concept{border-top:5px solid var(--accent-subj,var(--accent));min-height:88px}
.math{--accent-subj:var(--math)}.physics{--accent-subj:var(--physics)}
.chemistry{--accent-subj:var(--chemistry)}.biology{--accent-subj:var(--biology)}
.options{display:grid;gap:10px;margin-top:12px}
#live{min-height:1.2em}
.score-table{width:100%;border-collapse:collapse}
.score-table th,.score-table td{text-align:left;padding:10px 8px;border-bottom:1px solid #2a3550}
.big-code{font-size:clamp(2.5rem,10vw,5rem);letter-spacing:.2em;font-weight:800;text-align:center;margin:24px 0}
.tv body,.tv{font-size:clamp(20px,2.4vw,36px)}
.tv .wrap{max-width:1400px}
.tv h1{font-size:clamp(2rem,5vw,3.5rem)}
.tv button{font-size:inherit;min-height:64px}
.tv .concept{min-height:120px}
.skin-bar{display:flex;gap:8px;flex-wrap:wrap;padding:6px;border:1px solid var(--line);border-radius:12px}
.skin-bar button{flex:1;text-align:center}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin:16px 0}
.sparkon-orig{width:100%;max-width:220px;margin:auto}
.sparkon-orig .card{width:100%;height:auto;aspect-ratio:63/88;transform-origin:center}
.sparkon-orig.compact{max-width:160px}
/* Premium/Hero science-card (from Astra v6, scoped) */
.science-card{overflow:hidden;border-radius:13px;border:1px solid #303030;background:#0d0d0d;color:#f5f5f3;aspect-ratio:5/7;position:relative;min-width:0}
.science-card .card-hit{position:absolute;inset:0;display:grid;grid-template-rows:8% 48% 36% 8%;padding:0;border:0;background:transparent;color:inherit;width:100%;text-align:left}
.science-card .card-top{display:flex;justify-content:space-between;align-items:center;padding:0 6%;font-size:clamp(8px,3.3cqw,11px);font-weight:700;letter-spacing:.07em}
.science-card .art{overflow:hidden;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,var(--c1,#555),var(--c2,#222))}
.science-card .art img{position:absolute;width:443.5%;max-width:none;top:-73%;left:var(--crop);pointer-events:none}
.science-card .art .symbol{font-size:28cqw;color:#fff}
.science-card .hero-art{background-repeat:no-repeat}
.subject-math{--c1:#8cb1ec;--c2:#5454b1}.subject-physics{--c1:#efcb78;--c2:#d9676a}
.subject-chemistry{--c1:#a1dec3;--c2:#328a87}.subject-biology{--c1:#bce78b;--c2:#4d9b6a}
.science-card .card-copy{padding:5% 6%;overflow:hidden}
.science-card .card-copy h3{font-size:clamp(14px,7cqw,22px);margin:0 0 6px;line-height:1.1}
.science-card .formula{font-size:clamp(12px,5.5cqw,18px);margin:0}
.science-card .card-foot{padding:0 6%;display:flex;justify-content:space-between;align-items:center;font-size:clamp(8px,2.8cqw,10px);text-transform:uppercase;border-top:1px solid #303030}
.science-card.premium{border-color:#b59661}.science-card.hero{border:2px solid #c8a66a}
html[data-theme=premium] body,html[data-theme=hero] body{background:#000}
html[data-theme=premium] .logo-swap,html[data-theme=hero] .logo-swap{content:url('/games/assets/logo.svg')}
.reconnecting{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:#3a2a10;color:var(--accent);padding:10px 18px;border-radius:999px;z-index:50;font-weight:700}
@media(max-width:380px){.wrap{padding:12px}.grid2{gap:8px}button{padding:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;animation:none!important;transition:none!important}}

.spark-on {
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #ffd76a, #ff7ad9 45%, #7ad7ff);
  color: #111;
  font-weight: 700;
  letter-spacing: .02em;
}

.account-chip{
  display:inline-flex;align-items:center;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:#1c2740;color:var(--ink);min-height:36px;
}
.play-theme-panel{padding:12px 14px;margin:10px 0}
.play-theme-panel h2{margin:0}
.hand-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0;
}
.hand-pick{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px;background:#161f33;border:1px solid var(--line);border-radius:14px;
  min-height:0;text-align:center;
}
.hand-pick[aria-pressed=true]{border:3px solid var(--accent);background:#2a3858;padding:6px}
.hand-pick .sparkon-orig{max-width:100%;width:100%;pointer-events:none}
.hand-pick .science-card{width:100%;max-width:170px;pointer-events:none;margin:0 auto}
.hand-caption{font-size:.75rem;line-height:1.2}
.reveal-card,.tv-reveal-card{max-width:200px;margin:14px auto}
.tv-reveal-card .sparkon-orig{max-width:220px}
@media(max-width:380px){
  .hand-cards{gap:8px}
  .account-chip{max-width:100px;font-size:.7rem;padding:4px 8px}
}