/* ARM — Arithmetic Mastery — fresh, energetic, game-like UI */
:root{
  /* vivid accents — identical in both themes */
  --violet:#7c5cff;
  --cyan:#12b6d6;
  --cyan-b:#22d3ee;
  --mint:#1fb883;
  --mint-b:#34e0a1;
  --pink:#ff5d8f;
  --amber:#ffb020;
  --lime:#8fd400;
  --danger:#ff5a5a;
  --radius:20px;
  --shadow:0 18px 50px rgba(4,8,30,.55);
}
/* accents used on colored buttons stay bright in both themes */
:root{--cyan:#22d3ee;--mint:#34e0a1;}

:root[data-theme="dark"]{
  --bg:#0b1024;
  --panel:rgba(255,255,255,.05);
  --panel-solid:#161d40;
  --stroke:rgba(255,255,255,.10);
  --hair:rgba(255,255,255,.06);
  --field:#0c1230;
  --ink:#eef1ff;
  --muted:#9aa3d0;
  --fx-alpha:1;
  --shadow:0 18px 50px rgba(4,8,30,.55);
  --bg-layers:
    radial-gradient(1200px 700px at 15% -10%, #221a5c 0%, transparent 55%),
    radial-gradient(1000px 600px at 100% 0%, #0e3b5c 0%, transparent 50%),
    radial-gradient(900px 700px at 50% 120%, #3a1450 0%, transparent 55%),
    var(--bg);
}
:root[data-theme="light"]{
  --bg:#eaf0fb;
  --panel:rgba(28,40,95,.045);
  --panel-solid:#ffffff;
  --stroke:rgba(28,40,95,.13);
  --hair:rgba(28,40,95,.09);
  --field:#f1f5ff;
  --ink:#16204a;
  --muted:#5c6796;
  --fx-alpha:.62;
  --shadow:0 18px 45px rgba(60,80,160,.20);
  --bg-layers:
    radial-gradient(1200px 700px at 12% -12%, #e3d9ff 0%, transparent 55%),
    radial-gradient(1000px 640px at 100% -5%, #cdeefb 0%, transparent 52%),
    radial-gradient(950px 720px at 55% 120%, #ffdcec 0%, transparent 55%),
    var(--bg);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  font-family:"Baloo 2",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg-layers);
  background-attachment:fixed;
  overflow-x:hidden;
  transition:color .25s;
}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:var(--fx-alpha)}
main,.topbar,.site-footer{position:relative;z-index:1}
h1,h2,h3{margin:0;line-height:1.05;font-weight:800;letter-spacing:-.02em}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.accent{color:var(--cyan)}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(1rem,4vw,2.4rem);
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:900;font-size:1.4rem}
.brand-mark{
  display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;
  background:#0b1024;border:1px solid rgba(124,92,255,.4);
  box-shadow:0 8px 22px rgba(124,92,255,.35);
}
.brand-mark svg{animation:spinMark 26s linear infinite}
@keyframes spinMark{to{transform:rotate(360deg)}}
.brand-word{
  background:linear-gradient(100deg,var(--violet),var(--cyan-b) 60%,var(--mint-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.01em;
}
.brand-word .accent{-webkit-text-fill-color:currentColor}
.top-links{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.tl{
  background:transparent;border:0;color:var(--muted);font-weight:700;font-size:1rem;
  padding:.5rem .8rem;border-radius:12px;transition:.15s;
}
.tl:hover{color:var(--ink);background:var(--panel)}
.tl.active{color:#08122b;background:linear-gradient(135deg,var(--cyan),var(--mint));box-shadow:0 8px 20px rgba(34,224,161,.28)}
.user-slot{display:flex;align-items:center;gap:.5rem;margin-left:.4rem}
.btn-mini{
  border:1px solid var(--stroke);background:var(--panel);color:var(--ink);
  padding:.5rem .9rem;border-radius:12px;font-weight:800;font-size:.92rem;transition:.15s;
}
.btn-mini:hover{border-color:var(--violet)}
.user-pill{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:800;
  padding:.45rem .5rem .45rem .85rem;border-radius:14px;
  background:var(--panel);border:1px solid var(--stroke);
}
.user-pill .ava{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#08122b;font-weight:900;
  background:linear-gradient(135deg,var(--mint),var(--cyan));font-size:.85rem;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:0;border-radius:14px;padding:.85rem 1.4rem;font-weight:800;font-size:1.02rem;
  text-decoration:none;transition:transform .12s, box-shadow .2s, filter .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#0a0f26;background:linear-gradient(135deg,var(--cyan),var(--mint));box-shadow:0 12px 30px rgba(34,224,161,.35)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-violet{color:#fff;background:linear-gradient(135deg,var(--violet),var(--pink));box-shadow:0 12px 30px rgba(124,92,255,.4)}
.btn-ghost{color:var(--ink);background:var(--panel);border:1px solid var(--stroke)}
.btn-ghost:hover{border-color:var(--cyan)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.link-btn{background:none;border:0;color:var(--cyan);font-weight:800;padding:0;text-decoration:underline}

/* ---- layout ---- */
main{max-width:1080px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) 4rem}
.section-eyebrow{color:var(--cyan);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin:0 0 .5rem}

/* ---- hero / home ---- */
.hero{text-align:center;padding:2.5rem 0 1rem}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:900}
.hero .grad{
  background:linear-gradient(100deg,var(--cyan),var(--mint) 45%,var(--lime));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{color:var(--muted);font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:640px;margin:1.1rem auto 1.6rem;font-weight:600}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.stats-strip{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
.stat{
  background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:1rem 1.5rem;min-width:150px;backdrop-filter:blur(8px);
}
.stat b{display:block;font-size:1.8rem;font-weight:900;
  background:linear-gradient(120deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-weight:700;font-size:.9rem}

.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.6rem}
@media(max-width:640px){.mode-cards{grid-template-columns:1fr}}
.mode-card{
  text-align:left;border-radius:var(--radius);padding:1.6rem;border:1px solid var(--stroke);
  background:var(--panel);backdrop-filter:blur(10px);transition:transform .15s,border-color .2s;
  position:relative;overflow:hidden;color:var(--ink);
}
.mode-card:hover{transform:translateY(-4px);border-color:var(--cyan)}
.mode-card .ic{font-size:2rem;margin-bottom:.6rem}
.mode-card h3{font-size:1.5rem;margin-bottom:.4rem}
.mode-card p{color:var(--muted);font-weight:600;margin:0 0 1.1rem}
.mode-card.compete{background:linear-gradient(160deg,rgba(124,92,255,.18),rgba(255,93,143,.10))}
.mode-card.train{background:linear-gradient(160deg,rgba(34,211,238,.16),rgba(52,224,161,.10))}

/* ---- page heading ---- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1rem 0 1.6rem}
.page-head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.page-head p{color:var(--muted);font-weight:600;margin:.3rem 0 0}

/* ---- level grid ---- */
.op-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.op-tab{
  border:1px solid var(--stroke);background:var(--panel);color:var(--muted);
  padding:.6rem 1.1rem;border-radius:14px;font-weight:800;font-size:1rem;transition:.15s;
  display:flex;align-items:center;gap:.5rem;
}
.op-tab .sym{font-size:1.2rem;line-height:1}
.op-tab:hover{color:var(--ink)}
.op-tab.active{color:#08122b;background:linear-gradient(135deg,var(--cyan),var(--mint));border-color:transparent}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.level-card{
  text-align:left;border-radius:18px;padding:1.2rem;border:1px solid var(--stroke);
  background:var(--panel-solid);transition:transform .14s,border-color .2s;position:relative;overflow:hidden;
}
.level-card:hover{transform:translateY(-3px);border-color:var(--violet)}
.level-card .tier{
  display:inline-block;font-weight:900;font-size:.8rem;padding:.2rem .6rem;border-radius:8px;color:#08122b;
  background:linear-gradient(135deg,var(--amber),var(--lime));margin-bottom:.7rem;
}
.level-card h4{font-size:1.25rem;margin:0 0 .25rem}
.level-card .ex{color:var(--muted);font-weight:700;font-family:"Baloo 2",monospace;margin:.1rem 0 1rem;font-size:1rem}
.level-card .lc-actions{display:flex;gap:.5rem}
.level-card .lc-actions .btn{padding:.55rem .9rem;font-size:.9rem;border-radius:12px;flex:1}
.best-flag{position:absolute;top:.8rem;right:.8rem;font-size:.72rem;font-weight:800;color:var(--mint)}

/* ---- game screen ---- */
.game{max-width:680px;margin:0 auto;text-align:center}
.game-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.timer-wrap{flex:1;text-align:left}
.timer{font-size:2rem;font-weight:900;font-variant-numeric:tabular-nums}
.timer.warn{color:var(--amber)}
.timer.crit{color:var(--danger);animation:pulseT 1s infinite}
@keyframes pulseT{50%{opacity:.55}}
.progress-txt{color:var(--muted);font-weight:800;font-size:1rem}
.pbar{height:10px;border-radius:99px;background:var(--panel);overflow:hidden;margin-bottom:1.8rem;border:1px solid var(--stroke)}
.pbar > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--mint));transition:width .2s}
.q-card{
  background:var(--panel-solid);border:1px solid var(--stroke);border-radius:26px;
  padding:2.2rem 1.5rem;box-shadow:var(--shadow);
}
.q-index{color:var(--muted);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}
.q-eq{font-size:clamp(2.4rem,9vw,4rem);font-weight:900;margin:.6rem 0 1.4rem;font-variant-numeric:tabular-nums}
.q-eq .eq{color:var(--cyan)}
.answer-in{
  width:100%;max-width:340px;text-align:center;font-size:2.4rem;font-weight:900;
  padding:.6rem 1rem;border-radius:16px;border:2px solid var(--stroke);
  background:var(--field);color:var(--ink);outline:none;font-variant-numeric:tabular-nums;
}
.answer-in:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.18)}
.answer-in.good{border-color:var(--mint);box-shadow:0 0 0 4px rgba(52,224,161,.22)}
.answer-in.bad{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,90,90,.22);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.game-actions{margin-top:1.5rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.mini-stats{display:flex;gap:1.4rem;justify-content:center;margin-top:1.4rem;color:var(--muted);font-weight:800}
.mini-stats b{color:var(--mint)}
.mini-stats .miss{color:var(--pink)}

/* keypad (touch) */
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:340px;margin:1.4rem auto 0}
.keypad button{
  border:1px solid var(--stroke);background:var(--panel-solid);color:var(--ink);
  font-size:1.6rem;font-weight:900;padding:.7rem;border-radius:14px;transition:.1s;
}
.keypad button:active{background:var(--violet);color:#fff;transform:scale(.96)}
.keypad .k-wide{grid-column:span 1}
.keypad .k-act{background:linear-gradient(135deg,var(--cyan),var(--mint));color:#08122b}

/* ---- results ---- */
.result{max-width:620px;margin:0 auto;text-align:center}
.result-ring{position:relative;width:210px;height:210px;margin:1rem auto 1.4rem}
.result-ring svg{transform:rotate(-90deg)}
.result-ring .rc-num{position:absolute;inset:0;display:grid;place-content:center}
.result-ring .rc-num b{font-size:3.4rem;font-weight:900;line-height:1}
.result-ring .rc-num span{color:var(--muted);font-weight:800}
.result h2{font-size:2.2rem}
.result .verdict{color:var(--cyan);font-weight:800;font-size:1.2rem;margin:.3rem 0 1.2rem}
.res-stats{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.4rem 0}
.res-stats .rs{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:.9rem 1.3rem;min-width:110px}
.res-stats .rs b{display:block;font-size:1.5rem;font-weight:900}
.res-stats .rs span{color:var(--muted);font-weight:700;font-size:.85rem}
.rank-badge{display:inline-flex;align-items:center;gap:.5rem;font-weight:900;font-size:1.1rem;
  padding:.5rem 1.1rem;border-radius:99px;color:#08122b;background:linear-gradient(135deg,var(--amber),var(--lime));margin-bottom:1rem}

/* ---- leaderboard ---- */
.lb-controls{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem;align-items:center}
.lb-select{
  background:var(--panel-solid);border:1px solid var(--stroke);color:var(--ink);
  padding:.6rem 1rem;border-radius:12px;font-weight:800;font-size:1rem;
}
.lb-table{width:100%;border-collapse:collapse;background:var(--panel-solid);border-radius:18px;overflow:hidden;border:1px solid var(--stroke)}
.lb-table th,.lb-table td{padding:.85rem 1rem;text-align:left}
.lb-table th{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--stroke)}
.lb-table td{font-weight:700;border-bottom:1px solid var(--hair)}
.lb-table tr:last-child td{border-bottom:0}
.lb-table .rk{font-weight:900;width:56px}
.lb-table tr.me{background:linear-gradient(90deg,rgba(124,92,255,.18),transparent)}
.lb-table .medal{font-size:1.15rem}
.lb-score{color:var(--mint);font-weight:900}
.lb-empty{text-align:center;color:var(--muted);padding:2.5rem;font-weight:700}

/* ---- modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,7,24,.72);backdrop-filter:blur(4px);z-index:40}
.auth-modal{
  position:fixed;z-index:41;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(420px,92vw);background:var(--panel-solid);border:1px solid var(--stroke);
  border-radius:24px;padding:1.8rem;box-shadow:var(--shadow);
}
.auth-modal h3{font-size:1.6rem}
.auth-sub{color:var(--muted);font-weight:600;margin:.35rem 0 1.3rem}
.modal-x{position:absolute;top:1rem;right:1rem;background:var(--panel);border:1px solid var(--stroke);
  color:var(--ink);width:34px;height:34px;border-radius:10px;font-weight:800}
#auth-form label{display:block;font-weight:800;margin-bottom:.9rem;font-size:.95rem}
#auth-form input{
  display:block;width:100%;margin-top:.35rem;padding:.75rem .9rem;border-radius:12px;
  border:1px solid var(--stroke);background:var(--field);color:var(--ink);font-size:1.05rem;font-weight:700;
}
#auth-form input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.16)}
.auth-err{color:var(--danger);font-weight:800;margin:.2rem 0 1rem;font-size:.95rem}
.auth-switch{text-align:center;color:var(--muted);font-weight:700;margin:1.1rem 0 0}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);
  background:var(--panel-solid);border:1px solid var(--stroke);color:var(--ink);
  padding:.8rem 1.3rem;border-radius:14px;font-weight:800;box-shadow:var(--shadow);
  opacity:0;transition:.25s;z-index:60;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--danger)}

/* ---- footer ---- */
.site-footer{text-align:center;padding:2.5rem 1rem 2rem;color:var(--muted)}
.foot-brand{font-weight:900;font-size:1.2rem}
.foot-sub{font-weight:700;color:var(--muted);font-size:.95rem}
.powered{margin:.5rem 0 0;font-weight:700}
.powered a{color:var(--cyan);text-decoration:none;font-weight:800}
.powered a:hover{text-decoration:underline}

.muted-note{color:var(--muted);font-weight:600;text-align:center;margin-top:1rem}
.center-cta{text-align:center;margin-top:2rem}

/* ---- profile ---- */
.user-pill.clickable{cursor:pointer;transition:.15s}
.user-pill.clickable:hover{border-color:var(--violet);transform:translateY(-1px)}
.profile-id{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--stroke);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin-bottom:1.2rem}
.profile-ava{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#08122b;
  font-weight:900;font-size:1.7rem;background:linear-gradient(135deg,var(--mint),var(--cyan));flex:none}
.profile-name{font-size:1.5rem}
.profile-sec{font-size:1.15rem;margin:0 0 .9rem}
.card-lite{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:1.6rem}
.hist-list{display:flex;flex-direction:column;gap:.6rem}
.hist-item{display:flex;align-items:center;gap:1rem;background:var(--panel-solid);border:1px solid var(--stroke);
  border-radius:14px;padding:.8rem 1rem}
.hist-score{flex:none;width:56px;height:56px;border-radius:12px;display:grid;place-items:center;
  font-weight:900;font-size:1.5rem;background:var(--field);font-variant-numeric:tabular-nums}
.hist-main{flex:1;min-width:0}
.hist-level{font-weight:800;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.hist-meta{font-size:.9rem;font-weight:700;margin-top:.15rem}
.hist-badge{font-size:.72rem;font-weight:800;padding:.12rem .5rem;border-radius:7px}
.hist-badge.best{color:#08122b;background:linear-gradient(135deg,var(--amber),var(--lime))}
.hist-badge.to{color:#fff;background:rgba(255,90,90,.25);border:1px solid var(--danger)}

/* ---- theme toggle ---- */
.theme-toggle{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--stroke);
  background:var(--panel);color:var(--ink);font-size:1.15rem;line-height:1;
  display:grid;place-items:center;transition:.15s;margin-left:.2rem;
}
.theme-toggle:hover{border-color:var(--violet);transform:translatey(-1px)}
:root[data-theme="dark"] .theme-toggle::before{content:"🌙"}
:root[data-theme="light"] .theme-toggle::before{content:"☀️"}

/* ---- "alive" hero: self-solving equation ticker ---- */
.solve-ticker{
  display:inline-flex;align-items:center;gap:.6rem;margin:1.4rem auto 0;
  padding:.6rem 1.2rem;border-radius:16px;border:1px solid var(--stroke);
  background:var(--panel);backdrop-filter:blur(8px);font-weight:900;
  font-size:clamp(1.2rem,3.4vw,1.7rem);font-variant-numeric:tabular-nums;
  box-shadow:var(--shadow);min-height:2.6em;
}
.solve-ticker .st-eq{color:var(--ink)}
.solve-ticker .st-op{color:var(--violet);padding:0 .1em}
.solve-ticker .st-eqsign{color:var(--muted);padding:0 .15em}
.solve-ticker .st-ans{
  min-width:1.6em;text-align:left;
  background:linear-gradient(120deg,var(--cyan-b),var(--mint-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.solve-ticker .st-ans.flip{animation:answerPop .5s ease}
@keyframes answerPop{0%{transform:translateY(6px) scale(.7);opacity:0}60%{transform:translateY(-2px) scale(1.12)}100%{transform:none;opacity:1}}
.st-caret{width:.5rem;height:1.2em;border-radius:2px;background:var(--cyan-b);animation:blink 1s steps(2) infinite;display:inline-block}
@keyframes blink{50%{opacity:0}}

/* count-up number in stats */
.stat b.counting{font-variant-numeric:tabular-nums}

/* ---- light-mode contrast touch-ups ---- */
:root[data-theme="light"] .section-eyebrow,
:root[data-theme="light"] .accent{color:#0a97b8}
:root[data-theme="light"] .hero .grad{
  background:linear-gradient(100deg,#6a45ff,#0a97b8 55%,#1f9d6d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-theme="light"] .stat b{background:linear-gradient(120deg,#6a45ff,#0a97b8);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .link-btn{color:#0a97b8}
:root[data-theme="light"] .powered a{color:#0a97b8}
:root[data-theme="light"] .q-eq .eq,
:root[data-theme="light"] .solve-ticker .st-op{color:#6a45ff}
:root[data-theme="light"] .lb-score{color:#1f9d6d}
:root[data-theme="light"] .mode-card.compete{background:linear-gradient(160deg,rgba(124,92,255,.14),rgba(255,93,143,.10))}
:root[data-theme="light"] .mode-card.train{background:linear-gradient(160deg,rgba(18,182,214,.14),rgba(31,184,131,.12))}
:root[data-theme="light"] .btn-primary{color:#04222b}
:root[data-theme="light"] .op-tab.active,
:root[data-theme="light"] .tl.active{color:#04222b}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .brand-mark svg{animation:none !important}
}