/* ===================== الأساس ===================== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --cream:#F5E9DA;
  --sand:#E8D3B9;
  --olive:#6B8F71;
  --turq:#1F6F6B;
  --clay:#C96F4A;
  --ink:#2B3A42;
  --gold:#E4B363;
  --paper:#FFFBF3;
  --ok:#4C8A5B;
  --bad:#BF5340;
  --r:20px;
  --shadow:0 10px 26px -16px rgba(43,58,66,.75);
}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100dvh;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  overflow-x:hidden;
}
button{font-family:inherit;color:inherit;cursor:pointer}
p{margin:0}
b{font-weight:700}
.hidden{display:none !important}
.screen{display:none;min-height:100dvh}
.screen.active{display:block}
.phase.enter{animation:riseIn .34s cubic-bezier(.22,.9,.3,1) both}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===================== أزرار ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:12px 26px;
  border:3px solid var(--ink);border-radius:16px;
  font-family:'Cairo',sans-serif;font-weight:800;font-size:17px;line-height:1.3;
  transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease;
  user-select:none;
}
.btn-primary{background:var(--gold);color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink);box-shadow:0 5px 0 rgba(43,58,66,.28)}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(43,58,66,.28)}
.btn:focus-visible,.icon-btn:focus-visible,.pill:focus-visible,.listen-btn:focus-visible,.choice:focus-visible,.listen-dl:focus-visible{
  outline:3px solid var(--turq);outline-offset:3px;
}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:0 5px 0 rgba(43,58,66,.2)}

.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--paper);border:3px solid var(--ink);border-radius:13px;color:var(--ink);
  transition:transform .12s ease,background-color .15s ease;
}
.icon-btn:active{transform:scale(.94)}
.icon-btn.muted{background:var(--clay);color:#fff;border-color:var(--ink)}

.pill{
  border:2.5px solid var(--ink);border-radius:999px;background:var(--gold);
  padding:6px 14px;font-family:'Cairo',sans-serif;font-weight:700;font-size:13px;
  min-height:38px;transition:transform .12s ease,filter .15s ease;
}
.pill:active{transform:scale(.96)}

.chip{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:13px;
  border:2.5px solid var(--ink);background:var(--sand);color:var(--ink);
  white-space:nowrap;
}
.chip-gold{background:var(--gold)}
.chip-ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ===================== الشاشة الأولى ===================== */
.menu-wrap{
  max-width:560px;margin:0 auto;padding:22px 16px 38px;
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:0;
}
.hero-scene{
  position:relative;height:150px;border:3px solid var(--ink);border-bottom:none;
  border-radius:26px 26px 0 0;overflow:hidden;background:var(--sand);
}
.hero-scene svg{width:100%;height:100%;display:block}
.menu-card{
  background:var(--paper);border:3px solid var(--ink);border-radius:0 0 26px 26px;
  padding:22px 20px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.menu-card h1{
  font-family:'Cairo',sans-serif;font-weight:900;letter-spacing:-.3px;
  font-size:clamp(26px,7.6vw,38px);line-height:1.25;margin:0;
}
.lede{font-size:15px;line-height:1.75;color:#435459;max-width:42ch}
.facts{display:flex;gap:8px;list-style:none;margin:2px 0 0;padding:0;width:100%}
.facts li{
  flex:1;background:var(--cream);border:2.5px solid var(--ink);border-radius:14px;
  padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:0;
}
.facts b{font-family:'Cairo',sans-serif;font-weight:800;font-size:19px;line-height:1.2}
.facts span{font-size:11.5px;color:#5b6a6f;line-height:1.4}
#btn-start{width:100%;margin-top:4px}
.credit{font-size:12.5px;line-height:1.8;color:#617075}
.credit b{color:var(--ink)}
.credit.small{text-align:center;margin-top:4px;font-size:11.5px}

/* ===================== شريط الحالة ===================== */
.hud{
  position:sticky;top:0;z-index:30;
  background:rgba(245,233,218,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink);
  padding:8px 12px 10px;
}
.hud-row{display:flex;align-items:center;gap:10px;max-width:720px;margin:0 auto}
.meter{flex:1;min-width:0}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:700;line-height:1.3}
.meter-top strong{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums}
.meter-track{height:13px;background:var(--sand);border:2.5px solid var(--ink);border-radius:999px;overflow:hidden;margin-top:3px}
.meter-fill{
  height:100%;width:50%;border-radius:999px 0 0 999px;
  background:var(--olive);
  transition:width .55s cubic-bezier(.22,.9,.3,1),background-color .4s ease;
}
.meter-fill.low{background:var(--clay)}
.meter-fill.mid{background:var(--gold)}
.meter-fill.high{background:var(--olive)}
.hud-side{display:flex;align-items:center;gap:8px}
.streak{
  font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:700;line-height:1.25;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;
  padding:5px 8px;text-align:center;max-width:96px;
}
.streak.hot{background:var(--gold)}

/* ===================== المسرح ===================== */
.stage{
  max-width:720px;margin:0 auto;padding:12px 12px 28px;
  display:flex;flex-direction:column;gap:12px;
}
.scene{
  position:relative;width:100%;aspect-ratio:16/10;
  border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:var(--sand);box-shadow:var(--shadow);
}
.scene-art,.scene-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(43,58,66,.18),rgba(43,58,66,0) 42%);
}
.sprite{
  position:absolute;bottom:0;height:52%;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 6px rgba(43,58,66,.22));
  pointer-events:none;
  transform-origin:bottom center;
  transition:transform .3s ease,opacity .3s ease;
}
.sprite-neighbor{left:5%}
.sprite-player{right:5%;height:47%}
.sprite.angry{animation:shakeIt .45s ease-in-out 2}
.sprite.soft{animation:bobIt 2.6s ease-in-out infinite}
.sprite.away{opacity:.55;transform:scale(.94)}
@keyframes shakeIt{
  0%,100%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-5px) rotate(-2deg)}
  50%{transform:translateX(5px) rotate(2deg)}
  80%{transform:translateX(-3px) rotate(-1deg)}
}
@keyframes bobIt{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ===================== اللوحة ===================== */
.panel{
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);
  padding:14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.scene-tag{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:12.5px;color:var(--turq);
  background:rgba(31,111,107,.1);border-radius:999px;padding:3px 11px;
  border:2px solid rgba(31,111,107,.35);
}
.advisor{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(107,143,113,.13);border:2.5px dashed var(--olive);
  border-radius:15px;padding:10px;
  animation:riseIn .28s ease both;
}
.advisor-avatar{
  width:52px;height:52px;object-fit:contain;flex:none;
  background:var(--cream);border:2.5px solid var(--ink);border-radius:50%;
}
.advisor-body b{font-family:'Cairo',sans-serif;font-size:13px;color:var(--turq);display:block}
.advisor-body p{font-size:13.5px;line-height:1.6}
.narration{font-size:16px;line-height:1.8;font-weight:500}

/* الخيارات */
.choices{display:flex;flex-direction:column;gap:10px}
.choice{
  display:flex;align-items:center;gap:11px;text-align:start;
  width:100%;min-height:58px;padding:11px 13px;
  background:#fff;border:3px solid var(--ink);border-radius:16px;
  font-family:'Cairo',sans-serif;font-weight:600;font-size:15px;line-height:1.5;
  box-shadow:0 4px 0 rgba(43,58,66,.2);
  transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease;
  animation:riseIn .3s cubic-bezier(.22,.9,.3,1) both;
}
.choice:nth-child(2){animation-delay:.06s}
.choice:nth-child(3){animation-delay:.12s}
.choice:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,58,66,.2)}
.choice .num{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--cream);border:2.5px solid var(--ink);
  display:grid;place-items:center;font-size:14px;font-weight:800;
}
.choice.picked{background:var(--gold)}
.choice.dim{opacity:.45}
@media (hover:hover){
  .choice:hover{background:#FFF6E4;transform:translateY(-2px);box-shadow:0 6px 0 rgba(43,58,66,.24)}
  .btn-primary:hover{filter:brightness(1.04)}
  .btn-ghost:hover{background:#F3EADA}
  .pill:hover{filter:brightness(1.05)}
  .listen-btn:hover{filter:brightness(1.05)}
}

/* النتيجة */
.bubble{
  position:relative;background:#fff;border:3px solid var(--ink);border-radius:16px;
  padding:12px 14px;font-size:15px;line-height:1.7;
  box-shadow:0 4px 0 rgba(43,58,66,.18);
}
.bubble::after{
  content:'';position:absolute;bottom:-13px;left:26px;
  width:16px;height:16px;background:#fff;border-right:3px solid var(--ink);
  border-bottom:3px solid var(--ink);transform:rotate(45deg);
}
.bubble .who{
  display:block;font-family:'Cairo',sans-serif;font-weight:800;font-size:12.5px;
  color:var(--clay);margin-bottom:2px;
}
.result{font-size:15px;line-height:1.8;margin-top:12px;color:#33464d}
.delta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.delta{
  font-family:'Cairo',sans-serif;font-weight:900;font-size:15px;
  padding:5px 14px;border-radius:999px;border:2.5px solid var(--ink);
  background:var(--ok);color:#fff;
}
.delta.neg{background:var(--bad)}
.delta.flat{background:var(--sand);color:var(--ink)}
.delta-bonus{
  font-family:'Cairo',sans-serif;font-weight:800;font-size:13px;
  padding:5px 13px;border-radius:999px;border:2.5px solid var(--ink);
  background:var(--gold);color:var(--ink);
  animation:pulseGold 1.1s ease-in-out 3;
}
@keyframes pulseGold{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* بطاقة الدرس */
.lesson{
  margin-top:14px;padding:16px 15px 14px;border-radius:18px;
  background:linear-gradient(180deg,#FDF6E6,#F7EBD6);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 4px rgba(228,179,99,.3);
  position:relative;text-align:center;
}
.lesson-label{
  position:absolute;top:-13px;right:50%;transform:translateX(50%);
  background:var(--turq);color:#fff;border:2.5px solid var(--ink);
  font-family:'Cairo',sans-serif;font-weight:700;font-size:11.5px;
  padding:2px 13px;border-radius:999px;white-space:nowrap;
}
.lesson h3{
  font-family:'Amiri',serif;font-weight:700;font-size:23px;margin:6px 0 4px;
  color:var(--turq);
}
.lesson-text{
  font-family:'Amiri',serif;font-size:19px;line-height:1.85;color:#33464d;
  max-width:38ch;margin:0 auto;
}
.lesson-source{
  display:block;font-family:'Cairo',sans-serif;font-size:11.5px;color:#83908f;
  margin-top:6px;
}
.reflect{
  margin-top:12px;padding-top:11px;border-top:2px dashed rgba(43,58,66,.28);
  font-size:14px;line-height:1.7;color:#6a5a45;font-weight:500;
}
.reflect::before{content:'ماذا لو فعلت العكس؟ ';font-family:'Cairo',sans-serif;font-weight:800;color:var(--clay)}

/* شريط الصوت */
.listen-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:11px;border-top:2px dashed rgba(43,58,66,.2);
  min-height:44px;
}
.listen-btn{
  min-height:44px;border:2.5px solid var(--ink);border-radius:13px;
  background:var(--turq);color:#fff;padding:8px 16px;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:13.5px;
  box-shadow:0 3px 0 rgba(43,58,66,.35);
  transition:transform .12s ease,box-shadow .12s ease,opacity .2s ease;
}
.listen-btn:active{transform:translateY(3px);box-shadow:0 0 0 rgba(43,58,66,.35)}
.listen-btn:disabled{opacity:.6;background:#6f8a8f}
.listen-status{font-size:12.5px;color:#7a868a;line-height:1.5;flex:1;min-width:110px}
.listen-status.err{color:var(--bad)}
.listen-dl{font-size:12.5px;color:var(--turq);font-weight:700;text-decoration:underline}

.panel-actions{display:flex;gap:10px}
.panel-actions .btn{flex:1}

/* ===================== شاشة النتيجة ===================== */
.result-wrap{
  max-width:560px;margin:0 auto;padding:26px 16px 40px;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.medal-wrap{position:relative}
.medal{width:118px;height:118px;display:block;animation:medalPulse 2.2s ease-in-out infinite}
@keyframes medalPulse{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.06) rotate(2deg)}}
#result-title{
  font-family:'Cairo',sans-serif;font-weight:900;font-size:clamp(24px,7vw,34px);
  margin:0;line-height:1.25;
}
.score-big{
  font-family:'Cairo',sans-serif;font-weight:900;font-size:clamp(40px,12vw,58px);
  line-height:1;color:var(--turq);display:flex;align-items:baseline;gap:6px;
  font-variant-numeric:tabular-nums;
}
.score-big small{font-size:18px;color:#7a868a;font-weight:700}
.result-sub{font-size:14.5px;color:#54656a;line-height:1.7;max-width:36ch}
.card{
  width:100%;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);text-align:start;
}
.card h3{
  font-family:'Cairo',sans-serif;font-weight:800;font-size:16px;margin:0 0 10px;
  color:var(--turq);
}
.learn-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.learn-card li{
  display:flex;gap:9px;font-size:14px;line-height:1.65;
  background:var(--cream);border:2.5px solid var(--ink);border-radius:13px;padding:9px 11px;
}
.learn-card li span.mark{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);
  border:2.5px solid var(--ink);display:grid;place-items:center;
  font-family:'Cairo',sans-serif;font-weight:800;font-size:12.5px;
}
.board-status{font-size:13.5px;color:#5f6f74;margin:0 0 8px;line-height:1.6}
.board-status.err{color:var(--bad)}
.board-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.board-list li{
  display:flex;align-items:center;gap:9px;
  background:var(--cream);border:2.5px solid rgba(43,58,66,.35);border-radius:12px;
  padding:7px 10px;font-size:13.5px;
}
.board-list li.you{background:var(--gold);border-color:var(--ink);font-weight:700}
.board-list .rk{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--paper);
  border:2px solid var(--ink);display:grid;place-items:center;
  font-family:'Cairo',sans-serif;font-weight:800;font-size:11.5px;
}
.board-list .hd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list .sc{font-family:'Cairo',sans-serif;font-weight:800;font-variant-numeric:tabular-nums}
.board-card .btn{width:100%;font-size:14px;min-height:46px;padding:8px 14px;margin-top:6px}
.result-actions{display:flex;gap:10px;width:100%;margin-top:6px}
.result-actions .btn{flex:1;font-size:15px;padding:12px 10px}

/* ===================== استجابة ===================== */
@media (max-width:430px){
  .streak{max-width:76px;font-size:10.5px;padding:4px 6px}
  .chip-ink{font-size:12px;padding:3px 9px}
  .panel{padding:12px}
  .narration{font-size:15px}
  .choice{font-size:14px;min-height:56px}
  .sprite{height:50%}
  .sprite-player{height:45%}
  .lesson-text{font-size:17.5px}
}
@media (min-width:760px){
  .stage{padding-top:18px}
  .scene{aspect-ratio:16/8.6}
  .panel{padding:18px}
  .narration{font-size:17px}
  .choice{font-size:16px;min-height:62px}
  .menu-wrap{padding-top:34px}
  .hero-scene{height:190px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}