:root{
  --purple:#5b3cc4; --purple-d:#3f2a8f; --pink:#ff5d8f; --orange:#ff9f1c; --yellow:#ffd23f;
  --green:#2ec27e; --green-d:#1f9a62; --red:#ef476f; --blue:#3a86ff; --teal:#06d6a0;
  --ink:#24193f; --muted:#5d5478; --card:#ffffff; --bg1:#7b5cff; --bg2:#ff7eb3;
  --radius:22px; --shadow:0 10px 30px rgba(40,20,90,.18);
}
*{box-sizing:border-box}
html{min-height:100%;background:linear-gradient(160deg,#7b5cff 0%,#9b6bff 45%,#ff7eb3 100%);scrollbar-width:none}
html::-webkit-scrollbar{display:none}
html,body{margin:0}
body{min-height:100vh;
  font-family:"Segoe UI","Noto Sans Arabic","Geeza Pro","Arabic UI Text",Tahoma,system-ui,-apple-system,sans-serif;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent; overflow-x:hidden; line-height:1.55;
}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.math{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* floating background shapes */
.bg-shapes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-shapes span{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);animation:float 14s ease-in-out infinite}
.bg-shapes span:nth-child(1){width:140px;height:140px;top:6%;left:-40px}
.bg-shapes span:nth-child(2){width:90px;height:90px;top:40%;right:-25px;animation-delay:-4s}
.bg-shapes span:nth-child(3){width:200px;height:200px;bottom:-70px;left:20%;animation-delay:-7s}
.bg-shapes span:nth-child(4){width:60px;height:60px;top:18%;right:22%;animation-delay:-2s;border-radius:14px}
.bg-shapes span:nth-child(5){width:70px;height:70px;bottom:22%;right:8%;animation-delay:-9s;border-radius:18px}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(20deg)}}

#app{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px max(20px,env(safe-area-inset-bottom))}
.screen{display:none;animation:pop .35s ease}
.screen.active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- home ---------- */
.hero{text-align:center;color:#fff;padding:14px 4px 6px}
.hero-pizza{font-size:64px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));animation:wobble 3s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.hero h1{margin:6px 0 2px;font-size:clamp(30px,8.5vw,44px);font-weight:900;text-shadow:0 4px 0 rgba(0,0,0,.15)}
.tagline{margin:0 0 12px;font-size:16px;opacity:.95}
.rule-chip{display:inline-flex;gap:6px;background:rgba(255,255,255,.2);padding:6px 8px;border-radius:999px;flex-wrap:wrap;justify-content:center}
.rule-chip span{background:#fff;color:var(--purple-d);font-weight:800;border-radius:999px;padding:4px 12px;font-size:15px}
.section-label{color:#fff;font-size:18px;margin:18px 4px 8px;font-weight:800}
.levels{display:grid;gap:12px}
.level-card{display:flex;align-items:center;gap:14px;width:100%;text-align:start;border:0;border-radius:var(--radius);padding:16px;background:var(--card);box-shadow:var(--shadow);border-bottom:6px solid;transition:transform .12s}
.level-card:active{transform:scale(.97)}
.lvl-easy{border-color:var(--green)} .lvl-medium{border-color:var(--blue)} .lvl-hard{border-color:var(--orange)}
.lvl-emoji{font-size:38px;width:56px;height:56px;display:grid;place-items:center;border-radius:16px;flex:none}
.lvl-easy .lvl-emoji{background:#dcf8ea} .lvl-medium .lvl-emoji{background:#dde9ff} .lvl-hard .lvl-emoji{background:#ffeccf}
.lvl-text{display:flex;flex-direction:column;flex:1;min-width:0}
.lvl-text strong{font-size:22px}
.lvl-text small{font-size:14px;color:var(--muted)}
.lvl-best{font-size:13px;font-weight:700;color:var(--purple);white-space:nowrap}
.home-actions{display:flex;gap:10px;margin-top:16px}
.home-actions .btn-ghost{flex:1}

/* ---------- buttons ---------- */
.btn{border:0;border-radius:18px;padding:14px 18px;font-size:18px;font-weight:800;transition:transform .1s,filter .1s}
.btn:active{transform:translateY(2px) scale(.98)}
.btn-primary{background:linear-gradient(180deg,#ffb84d,var(--orange));color:#3a2000;box-shadow:0 6px 0 #c76f00}
.btn-primary:active{box-shadow:0 2px 0 #c76f00}
.btn-ghost{background:rgba(255,255,255,.92);color:var(--purple-d);box-shadow:0 5px 0 rgba(63,42,143,.35)}
.btn-block{display:block;width:100%;margin-top:14px}
.btn-icon{border:0;background:rgba(255,255,255,.92);border-radius:16px;width:56px;font-size:24px;box-shadow:0 5px 0 rgba(63,42,143,.35)}
.btn-icon.small{width:40px;height:40px;font-size:18px;border-radius:12px;box-shadow:none;background:rgba(255,255,255,.25);color:#fff}

/* ---------- card ---------- */
.card{background:var(--card);border-radius:var(--radius);padding:20px 18px;box-shadow:var(--shadow)}
.card h2{margin:0 0 6px;font-size:24px;color:var(--purple-d)}
.card h3{margin:18px 0 6px;font-size:19px;color:var(--purple-d)}
.lead{margin:0 0 10px;color:var(--muted)}
.rule-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rule-steps li{display:flex;gap:10px;align-items:flex-start;background:#f6f2ff;border-radius:16px;padding:10px 12px;font-size:16px}
.step-badge{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900}
.s1{background:var(--blue)} .s2{background:var(--pink)} .s3{background:var(--green)}
.tips{padding-inline-start:20px;margin:0;display:grid;gap:6px;font-size:16px}
.example{margin:14px 0 4px;background:linear-gradient(135deg,#fff7e0,#ffe9f1);border-radius:18px;padding:12px 8px;display:flex;justify-content:center}

/* ---------- fractions ---------- */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;margin:0 .12em}
.frac .num{padding:0 .18em .06em}
.frac .den{padding:.06em .18em 0;border-top:.09em solid currentColor;align-self:stretch;text-align:center}
.mixedn{display:inline-flex;align-items:center;gap:.06em;vertical-align:middle}
.mixedn .wh{font-size:1.25em}
.wholen{display:inline-block;vertical-align:middle;font-size:1.25em;padding:0 .1em}
.op{display:inline-block;vertical-align:middle;margin:0 .28em;font-weight:900}
.op-div{color:var(--pink)} .op-mul{color:var(--green-d)} .op-eq{color:var(--muted)}
.flip{color:var(--pink)}
.mrow{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;font-size:20px;font-weight:700;gap:2px}

/* ---------- game ---------- */
.hud{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800}
.hearts{font-size:22px;letter-spacing:2px;flex:1;white-space:nowrap}
.hearts .lost{filter:grayscale(1);opacity:.35}
.hearts .pop{display:inline-block;animation:heartpop .5s}
@keyframes heartpop{50%{transform:scale(1.6)}}
.qcount{background:rgba(255,255,255,.22);border-radius:999px;padding:4px 12px;font-size:16px}
.score{background:#fff;color:var(--purple-d);border-radius:999px;padding:4px 12px;font-size:17px;min-width:70px;text-align:center}
.score.bump{animation:heartpop .4s}
.timer{height:12px;background:rgba(255,255,255,.3);border-radius:999px;margin:12px 0 6px;overflow:hidden}
.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--yellow));border-radius:999px;transition:width .25s linear;margin-inline-start:auto}
.timer-fill.low{background:linear-gradient(90deg,var(--red),var(--orange))}
.streak{min-height:28px;text-align:center;color:#fff;font-weight:900;font-size:17px}
.streak.hot{animation:heartpop .5s}
.question-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 12px 22px;text-align:center}
.question-card.shake{animation:shake .45s}
.question-card.glow{box-shadow:0 0 0 6px var(--green),var(--shadow)}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.q-label{margin:0 0 6px;color:var(--muted);font-size:16px}
.expr{font-size:clamp(34px,10vw,48px);font-weight:800;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--ink)}
.expr .q{color:var(--purple);margin-inline-start:.15em}

.choices{display:none;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.choices.on{display:grid}
.choice{border:0;background:#fff;border-radius:20px;min-height:104px;font-size:32px;font-weight:800;box-shadow:0 6px 0 #d6cdf5;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.choice:active{transform:translateY(3px);box-shadow:0 3px 0 #d6cdf5}
.choice.right{background:#d9f9e8;box-shadow:0 6px 0 var(--green)}
.choice.wrong{background:#ffe0e7;box-shadow:0 6px 0 var(--red)}
.choice[disabled]{cursor:default}

.answer-area{display:none;margin-top:14px}
.answer-area.on{display:block}
.answer-boxes{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff;border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.answer-frac{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.answer-bar{width:86px;height:5px;background:var(--ink);border-radius:3px}
.abox{width:86px;height:58px;border:3px dashed #b9acee;border-radius:14px;background:#faf8ff;font-size:30px;font-weight:800;display:grid;place-items:center;padding:0}
.abox-whole{height:76px;width:74px}
.abox.active{border:3px solid var(--purple);background:#efe9ff;box-shadow:0 0 0 4px rgba(91,60,196,.18)}
.abox.active .abox-val:empty::after{content:"";display:inline-block;width:3px;height:30px;background:var(--purple);animation:blink 1s steps(1) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
.answer-hint{text-align:center;color:#fff;font-size:14px;margin:8px 0;opacity:.95}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keypad button{border:0;background:rgba(255,255,255,.95);border-radius:14px;height:52px;font-size:24px;font-weight:800;color:var(--purple-d);box-shadow:0 4px 0 rgba(63,42,143,.35)}
.keypad button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(63,42,143,.35)}
.keypad .k-del{background:#ffe0e7;color:var(--red)}
.keypad .k-next{background:#e0f0ff;color:var(--blue)}
#answer-area .btn-block{margin-top:12px}
.answer-msg{min-height:22px;text-align:center;color:#fff;font-weight:800;margin:8px 0 0}

/* ---------- feedback sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(20,10,50,.45);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:560px;margin:0 auto;background:#fff;border-radius:26px 26px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.25);max-height:86vh;overflow-y:auto;animation:slideup .3s ease}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.sheet.good{border-top:8px solid var(--green)} .sheet.bad{border-top:8px solid var(--red)}
.sheet-head{display:flex;align-items:center;gap:10px}
.sheet-emoji{font-size:40px}
.sheet h2{margin:0;font-size:24px}
.sheet.good h2{color:var(--green-d)} .sheet.bad h2{color:var(--red)}
.sheet-sub{margin:4px 0 10px;color:var(--muted);font-size:16px}
.solution{display:grid;gap:8px}
.sol-step{background:#f6f2ff;border-radius:16px;padding:10px 12px}
.sol-step .st-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--purple-d);margin-bottom:4px}
.sol-step .st-title .step-badge{width:24px;height:24px;font-size:13px}
.sol-step .mrow{font-size:22px}
.sol-final{background:linear-gradient(135deg,#d9f9e8,#e8fff5);border:2px solid var(--green)}
.s4{background:var(--orange)} .s5{background:var(--purple)}
.cancel{color:var(--muted);font-size:14px}

/* ---------- end ---------- */
.end-card{text-align:center;margin-top:30px}
.end-stars{font-size:54px;letter-spacing:6px;min-height:70px}
.end-stars .s-off{filter:grayscale(1);opacity:.3}
.end-stars span{display:inline-block;animation:starin .5s backwards}
.end-stars span:nth-child(2){animation-delay:.25s} .end-stars span:nth-child(3){animation-delay:.5s}
@keyframes starin{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.end-msg{font-size:18px;color:var(--muted);margin:4px 0 14px}
.end-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.end-stats div{background:#f6f2ff;border-radius:16px;padding:10px 4px;display:flex;flex-direction:column}
.stat-num{font-size:28px;font-weight:900;color:var(--purple-d)}
.stat-lbl{font-size:13px;color:var(--muted)}
.new-best{font-weight:900;color:var(--orange);font-size:19px;margin:12px 0 0}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (max-width:360px){
  .choice{min-height:92px;font-size:28px}
  .abox{width:74px;height:52px}
  .answer-bar{width:74px}
  .keypad button{height:48px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- v2: levels + topics + rule cards ---------- */
.t1{--c:#2f6fdb;--cl:#e3edff} .t2{--c:#23964a;--cl:#dff6e7} .t3{--c:#e07b00;--cl:#fff0d9}
.t4{--c:#8a3fd1;--cl:#f1e5ff} .t5{--c:#0a9a9a;--cl:#dcf6f6} .t6{--c:#e0457b;--cl:#ffe3ed} .t-all{--c:#5b3cc4;--cl:#fff4cc}
.grade-pill{display:inline-block;background:var(--yellow);color:#4a3200;font-weight:900;border-radius:999px;padding:3px 14px;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lvl{border:0;border-radius:16px;padding:12px 4px;font-size:18px;font-weight:900;background:rgba(255,255,255,.35);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.12);transition:transform .1s}
.lvl.selected{background:#fff;color:var(--purple-d);box-shadow:0 4px 0 rgba(63,42,143,.45),0 0 0 3px var(--yellow)}
.lvl:active{transform:scale(.96)}
.lvl-hint{color:#fff;text-align:center;margin:8px 0 0;font-size:15px;opacity:.95;min-height:24px}
.topics{display:grid;gap:10px}
.topic-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;border:0;border-radius:18px;background:#fff;padding:10px 12px;text-align:start;box-shadow:0 5px 0 var(--c);border-inline-start:8px solid var(--c);min-height:66px;transition:transform .1s}
.topic-card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--c)}
.topic-num{width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;font-weight:900;display:grid;place-items:center;font-size:18px}
.t-all .topic-num{background:var(--cl);font-size:22px}
.t-all{background:linear-gradient(135deg,#fff,#fff7d6)}
.topic-title{font-weight:900;font-size:17px;color:var(--c)}
.topic-ex{background:var(--cl);border-radius:12px;padding:4px 6px;color:var(--ink)}
.topic-ex .mrow{font-size:16px}
.topic-ex-text{font-size:13px;font-weight:700;color:var(--purple-d)}
.rules-head{text-align:center;color:#fff;margin:6px 0 12px}
.rules-head h2{margin:0 0 6px;font-size:clamp(24px,7vw,32px);font-weight:900;text-shadow:0 3px 0 rgba(0,0,0,.15)}
.rule-cards{display:grid;gap:12px}
.rule-card{background:#fff;border-radius:20px;padding:12px 14px;border:3px solid var(--c);box-shadow:var(--shadow)}
.rule-card h3{margin:0 0 6px}
.rule-pill{display:inline-block;background:var(--c);color:#fff;border-radius:999px;padding:3px 14px;font-size:17px;font-weight:900}
.rule-card p{margin:0 0 8px;font-size:16px}
.rule-card .ex{background:var(--cl);border-radius:14px;padding:8px 4px;text-align:center}
.rule-card .ex .mrow{font-size:19px}
.ex-pair{display:grid;gap:8px}
.ex-lbl{font-size:14px;font-weight:800;color:var(--c)}
.rule-foot{background:var(--yellow);color:#4a3200;font-weight:900;text-align:center;border-radius:16px;padding:10px;margin:0;font-size:18px}
.card.how{margin-top:14px}
.card.how h3{margin-top:0}
.q-label{font-weight:800}
.q-topic{display:inline-block;background:var(--cl);color:var(--c);border-radius:999px;padding:2px 12px;font-size:15px;font-weight:900}
.end-sub{margin:0;font-weight:800;color:var(--purple)}
#btn-next{position:sticky;bottom:0;z-index:2}
.sheet{scrollbar-width:thin}
#qcount,.score{direction:ltr;unicode-bidi:isolate}