/* ============ Base ============ */
:root{
  --paper:#FFF7E8;
  --card:#FFFFFF;
  --ink:#2D3142;
  --ink-soft:#5A6076;
  --sky:#2E86DE;
  --sun:#FFC93C;
  --mint:#26C485;
  --coral:#FF6B6B;
  --violet:#7A5CFA;
  --orange:#FF9F1C;
  --teal:#17C3B2;
  --pink:#EF476F;
  --night:#3D5A80;
  --shadow:6px 6px 0 var(--ink);
  --radius:24px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(45,49,66,0.04) 0 1px, transparent 1.2px),
    radial-gradient(circle at 70% 65%, rgba(45,49,66,0.04) 0 1px, transparent 1.2px),
    radial-gradient(circle at 45% 90%, rgba(45,49,66,0.035) 0 1px, transparent 1.2px);
  background-size:22px 22px, 34px 34px, 27px 27px;
  color:var(--ink);
  font-family:'Baloo Bhaijaan 2','Noto Kufi Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  user-select:none;
  -webkit-user-select:none;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;user-select:none;}
button:focus-visible, input:focus-visible{outline:3px solid var(--violet);outline-offset:3px;}
.hidden{display:none !important;}

.app-shell{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:760px;
  margin:0 auto;
  padding:0 16px calc(96px + env(safe-area-inset-bottom,0px));
  position:relative;
}

/* ============ Topbar ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:12px 4px 10px;
  background:linear-gradient(180deg,var(--paper) 62%,rgba(255,247,232,0.6) 100%);
  backdrop-filter:blur(2px);
}
.topbar-title{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0;}
#topTitle{
  font-family:'Noto Kufi Arabic','Baloo Bhaijaan 2',sans-serif;
  font-weight:800;font-size:17px;letter-spacing:-0.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-sub{font-size:11.5px;color:var(--ink-soft);font-weight:600;}
.topbar-stars{
  display:flex;align-items:center;gap:4px;
  background:var(--card);border:3px solid var(--ink);border-radius:999px;
  padding:3px 10px 3px 8px;font-weight:800;font-size:15px;
  box-shadow:3px 3px 0 var(--ink);
}
.icon-btn{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;
  background:var(--card);border:3px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);color:var(--ink);
  transition:transform .1s ease, box-shadow .1s ease;
  transform:rotate(0deg);
}
.icon-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
/* back arrow points right in RTL */
#btnBack svg{transform:scaleX(-1);}

/* ============ Screens ============ */
.screen{flex:1;display:flex;flex-direction:column;gap:14px;padding-top:2px;}
.screen-title{
  font-family:'Noto Kufi Arabic','Baloo Bhaijaan 2',sans-serif;
  font-weight:800;font-size:24px;margin:0;line-height:1.3;
}
.screen-lead{font-size:14.5px;color:var(--ink-soft);margin:2px 0 0;line-height:1.65;font-weight:500;}

/* ============ Cards / Buttons ============ */
.card{
  background:var(--card);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:10px 18px;
  font-weight:800;font-size:16px;
  border:3px solid var(--ink);border-radius:16px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease, background .15s ease;
  background:var(--card);color:var(--ink);
}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);}
.btn-wide{width:100%;}
.btn-ink{background:var(--ink);color:#FFF7E8;}
.btn-ink:active{background:var(--ink);}
.btn-paper{background:var(--paper);}
.btn-ghost{background:transparent;border-style:dashed;box-shadow:none;color:var(--ink-soft);font-size:14.5px;font-weight:700;}
.btn-ghost:active{transform:translate(0,2px);}
.btn-big{min-height:60px;font-size:19px;background:var(--mint);color:#08301F;box-shadow:5px 5px 0 var(--ink);}
.btn:disabled{opacity:.45;box-shadow:3px 3px 0 var(--ink);}

/* ============ Map ============ */
.map-head{padding:4px 2px 0;}
.progress-wrap{margin-top:14px;}
.progress-track{
  height:18px;background:var(--card);border:3px solid var(--ink);border-radius:999px;overflow:hidden;
  box-shadow:3px 3px 0 var(--ink);
}
.progress-fill{
  height:100%;background:repeating-linear-gradient(45deg,var(--mint) 0 10px,#1FAF74 10px 20px);
  transition:width .5s cubic-bezier(.34,1.4,.5,1);
}
.progress-meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--ink-soft);margin-top:7px;padding:0 4px;}

.station-path{position:relative;display:flex;flex-direction:column;gap:12px;padding:10px 0 6px;}
.station-path::before{
  content:'';position:absolute;inset-inline-start:38px;top:20px;bottom:20px;
  border-inline-start:4px dashed rgba(45,49,66,0.22);
}
.station{
  position:relative;display:flex;align-items:center;gap:12px;
  background:var(--card);border:3px solid var(--ink);border-radius:22px;
  padding:12px 14px;box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  text-align:start;width:100%;
}
.station:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);}
.station.locked{background:#F1EDE2;color:var(--ink-soft);box-shadow:4px 4px 0 rgba(45,49,66,0.35);border-color:rgba(45,49,66,0.45);}
.station.locked .station-bubble{filter:grayscale(1);opacity:.6;}
.station-bubble{
  flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:19px;
  border:3px solid var(--ink);color:#fff;
  box-shadow:0 0 0 4px var(--card),0 0 0 7px rgba(45,49,66,0.12);
  position:relative;z-index:2;
}
.station-info{flex:1;min-width:0;}
.station-name{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:16.5px;line-height:1.3;}
.station-sub{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-top:2px;}
.station.locked .station-sub{color:#8A8F9E;}
.station-stars{display:flex;gap:3px;margin-top:5px;}
.st-star{width:16px;height:16px;display:block;}
.st-star path{fill:#E8E2D2;stroke:rgba(45,49,66,.5);stroke-width:1.6;stroke-linejoin:round;}
.st-star.on path{fill:var(--sun);stroke:var(--ink);}
.station-arrow{flex:0 0 auto;color:var(--ink);opacity:.45;transform:scaleX(-1);}
.station.locked .station-arrow{opacity:.25;}

.map-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:10px;}

/* ============ Station screen ============ */
.station-head{display:flex;align-items:center;gap:12px;padding-top:4px;}
.station-badge{
  flex:0 0 56px;width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:800;font-size:19px;color:#fff;border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.station-head-text{flex:1;min-width:0;}
.stars-row{display:flex;gap:4px;margin-top:5px;}
.stars-row .st-star{width:20px;height:20px;}

.mode{display:flex;flex-direction:column;gap:12px;}

/* Explain */
.explain-card{padding:16px;display:flex;flex-direction:column;gap:14px;}
.fact-line{display:flex;align-items:center;justify-content:center;gap:10px;direction:ltr;flex-wrap:wrap;}
.fact-num,.fact-op,.fact-res{
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;line-height:1;
}
.fact-num{font-size:52px;}
.fact-op{font-size:34px;color:var(--ink-soft);}
.fact-res{font-size:60px;color:var(--stationColor,var(--sky));}
.dot-matrix{display:grid;gap:9px;justify-content:center;padding:6px 0;direction:ltr;}
.dot-row{display:flex;gap:9px;}
.dot{
  width:22px;height:22px;border-radius:50%;
  background:var(--stationColor,var(--sky));
  border:2.5px solid var(--ink);
  opacity:0;transform:scale(.2);
  transition:opacity .18s ease, transform .28s cubic-bezier(.34,1.6,.5,1);
}
.dot.in{opacity:1;transform:scale(1);}
.grid-rule{
  text-align:center;font-size:13.5px;font-weight:700;color:var(--ink-soft);
  background:var(--paper);border:2px dashed rgba(45,49,66,.28);
  border-radius:14px;padding:8px 12px;line-height:1.6;
}
.swap-box{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;padding:12px;}
.swap-label{font-size:12px;font-weight:800;color:var(--ink-soft);display:block;margin-bottom:6px;}
.swap-row{display:flex;align-items:center;gap:8px;direction:ltr;flex-wrap:wrap;}
.swap-fact{
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:17px;
  background:var(--card);border:2.5px solid var(--ink);border-radius:12px;padding:3px 10px;
}
.swap-eq{font-weight:800;color:var(--ink-soft);}
.swap-check{color:var(--mint);font-weight:800;font-size:20px;}
.numberline{
  position:relative;height:34px;margin-top:12px;border-radius:10px;
  background:var(--card);border:2.5px solid var(--ink);overflow:hidden;
}
.nl-tick{position:absolute;top:0;bottom:0;width:2px;background:rgba(45,49,66,.14);}
.nl-fill{position:absolute;top:0;bottom:0;inset-inline-start:0;background:var(--stationColor,var(--sky));opacity:.28;transition:width .5s ease;}
.nl-jump{
  position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--stationColor,var(--sky));border:2.5px solid var(--ink);
  transform:translate(-50%,-50%);
  transition:inset-inline-start .5s cubic-bezier(.34,1.4,.5,1);
  z-index:2;
}
.explain-nav{display:flex;align-items:center;gap:10px;}
.explain-nav .btn{flex:1;}
.ex-counter{
  font-weight:800;font-size:14px;color:var(--ink-soft);
  min-width:58px;text-align:center;flex:0 0 auto;
  font-family:'Noto Kufi Arabic',sans-serif;
}
.ex-dots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.ex-dot{width:9px;height:9px;border-radius:50%;background:rgba(45,49,66,.18);border:1.5px solid rgba(45,49,66,.25);}
.ex-dot.on{background:var(--stationColor,var(--sky));border-color:var(--ink);transform:scale(1.25);}

/* Practice */
.practice-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px;}
.practice-stars{display:flex;gap:5px;}
.practice-count{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:15px;color:var(--ink-soft);}
.q-card{padding:18px 16px;display:flex;flex-direction:column;gap:14px;}
.q-prompt{text-align:center;font-size:14px;font-weight:800;color:var(--ink-soft);}
.q-fact{
  display:flex;align-items:center;justify-content:center;gap:10px;direction:ltr;
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;
  font-size:clamp(40px,13vw,58px);line-height:1.05;
}
.q-op{color:var(--ink-soft);font-size:.66em;}
.q-mark{color:var(--stationColor,var(--sky));}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.answers-quick{grid-template-columns:1fr 1fr;}
.ans-btn{
  min-height:64px;border:3px solid var(--ink);border-radius:18px;
  background:var(--paper);font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:800;font-size:26px;color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s ease,box-shadow .1s ease,background .15s ease;
  display:grid;place-items:center;
}
.ans-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);}
.ans-btn.correct{background:var(--mint);color:#07301E;}
.ans-btn.wrong{background:var(--coral);color:#3A0A0A;}
.ans-btn.dim{opacity:.4;}
.matrix-hint{
  display:grid;gap:6px;justify-content:center;direction:ltr;
  padding:8px;background:var(--paper);border:2.5px dashed rgba(45,49,66,.3);border-radius:16px;
}
.matrix-hint .dot{width:14px;height:14px;opacity:1;transform:scale(1);transition:none;}
.matrix-hint .dot-row{gap:6px;}
.feedback{
  border-radius:16px;padding:10px 14px;font-weight:800;font-size:14.5px;
  text-align:center;line-height:1.5;
}
.feedback.ok{background:#DFF7EA;color:#0B5B37;border:2.5px solid var(--mint);}
.feedback.no{background:#FFE6E6;color:#8A1B1B;border:2.5px solid var(--coral);}

/* Result */
.result-card{padding:20px 16px;text-align:center;display:flex;flex-direction:column;gap:12px;}
.result-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:25px;font-weight:800;margin:0;}
.result-stars{display:flex;justify-content:center;gap:10px;}
.result-stars .st-star{width:44px;height:44px;}
.result-stars .st-star path{fill:#E8E2D2;}
.result-stars .st-star.on path{fill:var(--sun);}
.result-stars .st-star.pop{animation:starPop .5s cubic-bezier(.34,1.7,.5,1) both;}
@keyframes starPop{0%{transform:scale(0) rotate(-40deg);}100%{transform:scale(1) rotate(0);}}
.result-text{font-size:15px;font-weight:700;color:var(--ink-soft);margin:0;line-height:1.6;}
.review-label{font-size:13.5px;font-weight:800;color:var(--ink-soft);text-align:start;}
.review-list{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:8px;}
.review-chip{
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:14px;
  background:var(--paper);border:2.5px solid var(--coral);border-radius:12px;padding:3px 10px;
}
.result-actions{display:flex;flex-direction:column;gap:10px;}

/* ============ Quick challenge ============ */
.quick-intro{display:flex;flex-direction:column;gap:14px;}
.quick-card{padding:18px 16px;display:flex;flex-direction:column;gap:12px;}
.quick-desc{font-size:14px;font-weight:600;color:var(--ink-soft);line-height:1.7;margin:0;}
.quick-rules{display:flex;flex-direction:column;gap:8px;}
.rule{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink-soft);}
.rule-n{
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:13px;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;
  padding:2px 10px;color:var(--ink);min-width:52px;text-align:center;
}
.quick-locked{background:#FFE6E6;border:2.5px solid var(--coral);color:#8A1B1B;border-radius:14px;padding:10px;font-size:13.5px;font-weight:800;text-align:center;}

.quick-play{display:flex;flex-direction:column;gap:12px;}
.quick-hud{display:flex;align-items:center;gap:10px;}
.quick-score{
  display:flex;flex-direction:column;align-items:center;line-height:1.05;
  background:var(--card);border:3px solid var(--ink);border-radius:16px;
  padding:5px 12px;box-shadow:3px 3px 0 var(--ink);min-width:62px;
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:20px;
}
.quick-score-lbl{font-size:9.5px;color:var(--ink-soft);font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:700;}
.quick-timer{
  flex:1;position:relative;height:26px;border:3px solid var(--ink);border-radius:999px;
  background:var(--card);overflow:hidden;box-shadow:3px 3px 0 var(--ink);
}
.quick-timer-bar{
  position:absolute;inset-block:0;inset-inline-start:0;width:100%;
  background:repeating-linear-gradient(45deg,var(--sun) 0 8px,#FFB915 8px 16px);
  transition:width .25s linear, background .3s ease;
}
.quick-timer-bar.low{background:repeating-linear-gradient(45deg,var(--coral) 0 8px,#E13B3B 8px 16px);}
.quick-timer span{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:13px;
  color:var(--ink);z-index:2;
}
.quick-best{
  font-size:11.5px;font-weight:800;color:var(--ink-soft);text-align:center;
  min-width:52px;line-height:1.3;
}

/* ============ Stats ============ */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat-card{padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:2px;border-radius:20px;}
.stat-num{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:27px;line-height:1.15;}
.stat-lbl{font-size:11.5px;font-weight:700;color:var(--ink-soft);line-height:1.35;}
.stats-detail{padding:14px;display:flex;flex-direction:column;gap:10px;}
.detail-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:15px;font-weight:800;margin:0;}
.per-table{display:flex;flex-direction:column;gap:8px;}
.per-row{display:flex;align-items:center;gap:8px;}
.per-chip{
  flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:13px;color:#fff;
  border:2.5px solid var(--ink);
}
.per-stars{display:flex;gap:3px;}
.per-stars .st-star{width:15px;height:15px;}
.per-status{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-inline-start:auto;}
.empty-hint{text-align:center;font-size:13.5px;font-weight:700;color:var(--ink-soft);margin:0;line-height:1.6;}

/* ============ Parent ============ */
.parent-card{padding:18px 16px;display:flex;flex-direction:column;gap:12px;}
.parent-q{
  text-align:center;font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;
  font-size:32px;direction:ltr;
}
.parent-input{
  width:100%;min-height:56px;border:3px solid var(--ink);border-radius:16px;
  background:var(--paper);text-align:center;
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:24px;color:var(--ink);
  padding:6px 12px;
}
.parent-error{font-size:13px;font-weight:800;color:#8A1B1B;text-align:center;}

/* ============ Midad character ============ */
.midad{
  position:fixed;inset-block-end:calc(8px + env(safe-area-inset-bottom,0px));
  inset-inline-start:10px;width:86px;height:108px;z-index:60;
  pointer-events:none;
  filter:drop-shadow(0 3px 0 rgba(45,49,66,.08));
}
.midad.idle #midadBody{animation:midadBob 2.6s ease-in-out infinite;transform-origin:60px 134px;}
@keyframes midadBob{0%,100%{transform:rotate(-2deg) translateY(0);}50%{transform:rotate(2deg) translateY(-3px);}}
.midad.happy #midadBody{animation:midadCheer .55s cubic-bezier(.34,1.7,.5,1) 2;transform-origin:60px 134px;}
@keyframes midadCheer{0%,100%{transform:translateY(0) rotate(0);}40%{transform:translateY(-14px) rotate(-6deg);}70%{transform:translateY(-4px) rotate(4deg);}}
.midad.sad #midadBody{animation:midadShake .38s ease 2;transform-origin:60px 134px;}
@keyframes midadShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.midad.think #midadArmR{animation:midadThink 1.8s ease-in-out infinite;}
@keyframes midadThink{0%,100%{transform:rotate(0);transform-origin:82px 76px;}50%{transform:rotate(-24deg);transform-origin:82px 76px;}}
.midad.point #midadArmL{animation:midadPoint .8s ease-in-out infinite alternate;}
@keyframes midadPoint{from{transform:rotate(0);transform-origin:38px 76px;}to{transform:rotate(30deg) translateX(-4px);transform-origin:38px 76px;}}
.midad.happy #midadArmL{animation:midadUpL .6s ease 2;transform-origin:38px 76px;}
.midad.happy #midadArmR{animation:midadUpR .6s ease 2;transform-origin:82px 76px;}
@keyframes midadUpL{0%,100%{transform:rotate(0);}50%{transform:rotate(38deg);}}
@keyframes midadUpR{0%,100%{transform:rotate(0);}50%{transform:rotate(-38deg);}}
.midad-bubble{
  position:absolute;inset-block-end:100%;inset-inline-start:0;
  background:var(--card);border:3px solid var(--ink);border-radius:14px 14px 14px 4px;
  padding:5px 10px;font-size:12px;font-weight:800;white-space:nowrap;
  box-shadow:3px 3px 0 var(--ink);
  animation:bubbleIn .25s ease both;
}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px) scale(.9);}to{opacity:1;transform:none;}}
.midad-bubble.hidden{display:none;}

/* ============ Confetti ============ */
.confetti-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:70;
}

/* ============ Responsive ============ */
@media (min-width:640px){
  .app-shell{padding-inline:24px;}
  .screen-title{font-size:28px;}
  .answers{grid-template-columns:1fr 1fr;}
  .dot{width:26px;height:26px;}
  .dot-matrix{gap:11px;}
  .dot-row{gap:11px;}
  .midad{width:104px;height:130px;inset-inline-start:18px;}
  .stats-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-height:680px){
  .fact-num{font-size:42px;}
  .fact-res{font-size:46px;}
  .dot{width:17px;height:17px;}
  .dot-matrix{gap:6px;}
  .dot-row{gap:6px;}
  .midad{width:66px;height:84px;}
  .screen-title{font-size:20px;}
  .q-card{padding:12px;}
  .ans-btn{min-height:54px;font-size:22px;}
  .station-bubble{width:46px;height:46px;flex:0 0 46px;font-size:16px;}
  .station-path::before{inset-inline-start:33px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ============================================================
   v2 — وضع اللعبة
   ============================================================ */
.hero-card{
  display:flex;flex-direction:column;gap:12px;
  padding:18px 16px;
  background:var(--card);
  border:3px solid var(--ink);border-radius:26px;
  box-shadow:var(--shadow);
}
.hero-kicker{
  align-self:flex-start;
  font-size:11.5px;font-weight:800;color:var(--ink-soft);
  background:var(--paper);border:2px solid rgba(45,49,66,.25);
  border-radius:999px;padding:2px 10px;
}
.hero-title{
  font-family:'Noto Kufi Arabic','Baloo Bhaijaan 2',sans-serif;
  font-weight:800;font-size:26px;line-height:1.3;margin:0;
}
.hero-sub{font-size:13.5px;font-weight:600;color:var(--ink-soft);line-height:1.65;margin:0;}
.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hero-mini{min-height:46px;font-size:14px;padding:8px 10px;border-radius:14px;}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px;margin-top:2px;}
.section-title{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:17px;margin:0;}
.section-note{font-size:11px;font-weight:700;color:var(--ink-soft);}

.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.level{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px 4px;min-height:96px;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s ease,box-shadow .1s ease;
}
.level:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);}
.lv-num{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:20px;
  border:3px solid var(--ink);
}
.lv-stars{display:flex;gap:2px;}
.lv-stars .st-star{width:12px;height:12px;}
.level.locked{
  background:#F1EDE2;border-color:rgba(45,49,66,.4);
  box-shadow:3px 3px 0 rgba(45,49,66,.26);
}
.level.locked .lv-num{filter:grayscale(1);opacity:.42;}
.lv-lock{position:absolute;top:5px;inset-inline-end:7px;font-size:12px;opacity:.85;}

.home-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:12px;}

/* ---------- HUD اللعبة ---------- */
.game-hud{display:flex;align-items:center;gap:8px;}
.hud-box{
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:3px solid var(--ink);border-radius:14px;
  padding:5px 10px;box-shadow:3px 3px 0 var(--ink);
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:16px;
  color:var(--ink);min-height:44px;
}
.hud-hearts{gap:3px;padding:5px 8px;}
.heart{width:20px;height:20px;display:block;transition:transform .2s ease;}
.heart svg{width:100%;height:100%;display:block;}
.heart path{fill:#FF6B6B;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;}
.heart.off path{fill:#E4DECE;}
.heart.off{transform:scale(.85);opacity:.8;}
.hud-lbl{font-size:10.5px;font-weight:700;color:var(--ink-soft);}
.hud-score{margin-inline-start:auto;}
.hud-streak{transition:opacity .2s ease;gap:4px;}
.hud-streak.dim{opacity:.35;}

.qprogress{
  height:14px;background:var(--card);border:3px solid var(--ink);
  border-radius:999px;overflow:hidden;box-shadow:2px 2px 0 var(--ink);
}
#qProgressBar{
  height:100%;width:0;
  background:repeating-linear-gradient(45deg,var(--mint) 0 8px,#1FAF74 8px 16px);
  transition:width .35s cubic-bezier(.34,1.3,.5,1);
}
.q-count{
  text-align:center;font-family:'Noto Kufi Arabic',sans-serif;
  font-size:12px;font-weight:800;color:var(--ink-soft);
}
.q-card.shake{animation:midadShake .35s ease 2;}

.answers.answers-3{grid-template-columns:repeat(3,1fr);}
.answers-3 .ans-btn{min-height:72px;font-size:clamp(22px,7.5vw,32px);padding:0 4px;}

.play-foot{display:flex;gap:10px;align-items:center;}
.play-foot #btnHint{flex:1;}
.play-foot #btnQuit{flex:0 0 auto;min-width:96px;}

.result-emoji{font-size:40px;line-height:1;}

/* ---------- Learn ---------- */
.table-chips{
  display:flex;gap:8px;overflow-x:auto;
  padding:2px 2px 6px;scrollbar-width:none;
}
.table-chips::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;min-width:52px;min-height:46px;
  display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:14px;background:var(--card);
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:17px;color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s ease,box-shadow .1s ease,background .15s ease,color .15s ease;
}
.chip:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.chip.on{background:var(--ink);color:#FFF7E8;}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .answers-3 .ans-btn{min-height:84px;}
  .level{min-height:108px;}
  .lv-num{width:52px;height:52px;font-size:22px;}
  .hero-title{font-size:30px;}
}
@media (max-height:700px){
  .hero-card{padding:14px;gap:10px;}
  .hero-title{font-size:22px;}
  .level{min-height:80px;padding:8px 4px;}
  .lv-num{width:40px;height:40px;font-size:18px;}
  .q-card{padding:14px 12px;gap:10px;}
  .answers-3 .ans-btn{min-height:60px;}
  .q-fact{font-size:clamp(34px,11vw,48px);}
}