/* =================================================================
   حديقة الشكر — Garden of Gratitude
   Style: Flat Design + soft garden motifs (indigo · coral · sage)
   Fonts: Baloo Bhaijaan 2 (display) + Tajawal (body) + Amiri Quran (verse)
   ================================================================= */

:root{
  /* Brand — maroon/cream Islamic aesthetic */
  --maroon:        #8B1538;
  --maroon-deep:   #6B0F2B;
  --maroon-darker: #4A0A1E;
  --maroon-50:     #FCE4EC;
  --maroon-100:    #F8D0DC;
  --maroon-200:    #F0B0C2;

  /* Legacy "indigo" tokens now mapped to maroon for compatibility */
  --indigo:        var(--maroon);
  --indigo-deep:   var(--maroon-deep);
  --indigo-darker: var(--maroon-darker);
  --indigo-50:     var(--maroon-50);
  --indigo-100:    var(--maroon-100);
  --indigo-200:    var(--maroon-200);

  --coral:         #C7456A;   /* warmer rose */
  --coral-deep:    #9B2C4D;
  --coral-50:      #FCE4EC;

  --amber:         #D4AF37;   /* gold */
  --amber-deep:    #A88828;
  --amber-50:      #FAF3DC;

  --emerald:       #2E7D55;
  --emerald-soft:  #DCF0E2;
  --emerald-deep:  #1F5E3F;

  --sky:           #5B8DBE;
  --sky-50:        #E8EFF7;

  --lavender:      #FAF5F8;     /* very light maroon tint */
  --cream:         #FFF8F0;
  --cream-deep:    #F8F4F5;     /* page bg */

  --ink:           #1F2937;
  --ink-soft:      #374151;
  --muted:         #6B7280;
  --muted-soft:    #9CA3AF;
  --line:          #E5E7EB;
  --line-soft:     #F3F4F6;
  --white:         #FFFFFF;

  --success: var(--emerald);
  --success-50: var(--emerald-soft);
  --error:   var(--coral-deep);
  --error-50: var(--coral-50);

  /* Type — Cairo for everything (matches source) */
  --font-display: "Cairo","Tajawal",system-ui,sans-serif;
  --font-body:    "Cairo","Tajawal",system-ui,sans-serif;
  --font-quran:   "Amiri Quran","Cairo",serif;

  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem;
  --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.25rem;
  --fs-4xl:3rem;   --fs-5xl:3.75rem;

  /* Spacing (4/8 system) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;

  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-full: 9999px;

  --shadow-soft: 0 6px 24px -8px #6366f126, 0 2px 6px -2px #6366f114;
  --shadow-card: 0 12px 40px -12px #6366f133, 0 4px 12px -4px #6366f11a;
  --shadow-pop:  0 24px 60px -16px #6366f140, 0 8px 20px -8px #6366f126;
  --shadow-coral:0 8px 20px -6px #fb71854d;
  --shadow-amber:0 8px 20px -6px #fbbf244d;

  --t-fast: 150ms ease;
  --t-base: 220ms cubic-bezier(.34,1.4,.64,1);
  --t-slow: 380ms cubic-bezier(.34,1.4,.64,1);
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(at 12% 8%,  #FCE4EC55 0%, transparent 50%),
    radial-gradient(at 88% 92%, #FCE4EC55 0%, transparent 50%),
    radial-gradient(at 50% 50%, #FAF3DC55 0%, transparent 70%),
    var(--cream-deep);
  background-attachment:fixed;
  color:var(--ink);
  direction:rtl;text-align:right;
  min-height:100vh;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit;background:none;border:none;outline:none;cursor:pointer;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:8px}

/* ----------- Decorative scene (hidden in maroon theme) ----------- */
.scene{display:none}
.scene__sun,.scene__cloud,.scene__leaf{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* ----------- Shell ----------- */
.shell{
  max-width:880px;margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-12);
  width:100%;min-height:100vh;
  display:flex;flex-direction:column;
}

/* =================================================================
   LANDING SCREEN
   ================================================================= */
.landing{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--s-8) var(--s-4);
  animation:rise .6s var(--t-slow) both;
}
.landing__badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--white);border:2px solid var(--indigo-100);
  padding:var(--s-2) var(--s-5);border-radius:var(--r-full);
  color:var(--indigo-deep);font-weight:700;font-size:var(--fs-sm);
  box-shadow:var(--shadow-soft);margin-bottom:var(--s-6);
}
.landing__badge svg{width:18px;height:18px;color:var(--coral)}

.landing__title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 7vw, 4rem);
  font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.1;
  margin-bottom:var(--s-3);
}
.landing__title em{font-style:normal;color:var(--coral);position:relative;display:inline-block}
.landing__title em::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-6px;height:8px;
  background:var(--amber);border-radius:var(--r-full);opacity:.55;z-index:-1;
}
.landing__subtitle{
  font-size:var(--fs-md);color:var(--muted);
  max-width:520px;margin:0 auto var(--s-8);line-height:1.85;
}

/* Hero illustration */
.hero{
  position:relative;width:min(420px,82vw);aspect-ratio:1;
  margin:var(--s-4) auto var(--s-6);
}
.hero__ring{position:absolute;inset:8%;border-radius:50%;
  background:conic-gradient(from 200deg, var(--coral) 0deg, var(--amber) 90deg, var(--emerald) 180deg, var(--sky) 270deg, var(--coral) 360deg);
  filter:blur(28px);opacity:.45;animation:spin 24s linear infinite;
}
.hero__disc{
  position:absolute;inset:12%;border-radius:50%;
  background:linear-gradient(135deg,#fff,var(--lavender));
  box-shadow:var(--shadow-pop);
  display:flex;align-items:center;justify-content:center;
}
.hero__emoji{font-size:clamp(4rem,16vw,7rem);animation:bobble 4s ease-in-out infinite}
.hero__petal{position:absolute;font-size:2rem;animation:bobble 4s ease-in-out infinite}
.hero__petal--1{top:4%;right:30%;animation-delay:.2s}
.hero__petal--2{top:30%;right:0;animation-delay:.6s}
.hero__petal--3{bottom:5%;right:35%;animation-delay:1s}
.hero__petal--4{top:30%;left:0;animation-delay:1.4s}
@keyframes bobble{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}

.landing__verse{
  background:var(--white);border:2px solid var(--indigo-100);
  border-radius:var(--r-xl);padding:var(--s-6) var(--s-8);
  max-width:560px;width:100%;margin-bottom:var(--s-8);
  box-shadow:var(--shadow-soft);position:relative;
}
.landing__verse::before{
  content:"";position:absolute;top:-12px;right:32px;width:24px;height:24px;
  background:var(--white);border:2px solid var(--indigo-100);
  border-bottom:none;border-left:none;transform:rotate(-45deg);
}
.landing__verse-text{
  font-family:var(--font-quran);
  font-size:var(--fs-lg);color:var(--ink-soft);
  line-height:2.2;font-weight:400;
}
.landing__verse-source{
  display:block;margin-top:var(--s-3);
  font-family:var(--font-body);font-size:var(--fs-sm);color:var(--coral);
  font-weight:700;
}

.landing__features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--s-3);max-width:560px;width:100%;margin-bottom:var(--s-8);
}
.feature{
  background:var(--white);border-radius:var(--r-lg);
  padding:var(--s-4);text-align:center;
  border:2px solid var(--line-soft);
  transition:transform var(--t-base),border-color var(--t-base);
}
.feature:hover{transform:translateY(-4px);border-color:var(--indigo-100)}
.feature__icon{
  width:48px;height:48px;margin:0 auto var(--s-2);
  border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
}
.feature--rose .feature__icon{background:var(--coral-50);color:var(--coral-deep)}
.feature--amber .feature__icon{background:var(--amber-50);color:var(--amber-deep)}
.feature--emerald .feature__icon{background:var(--emerald-soft);color:var(--emerald-deep)}
.feature--indigo .feature__icon{background:var(--indigo-50);color:var(--indigo-deep)}
.feature__label{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s-2);min-height:52px;padding:var(--s-3) var(--s-6);
  border-radius:var(--r-full);font-weight:700;font-size:var(--fs-base);
  font-family:inherit;border:2px solid transparent;
  transition:transform var(--t-base),box-shadow var(--t-base),background var(--t-base),color var(--t-base);
  white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn--primary{background:linear-gradient(135deg, var(--maroon), var(--maroon-deep));color:var(--white);box-shadow:0 6px 16px -4px #8b153866}
.btn--primary:hover{background:linear-gradient(135deg, var(--maroon-deep), var(--maroon-darker));transform:translateY(-2px);box-shadow:0 10px 24px -6px #8b153888}
.btn--coral{background:var(--coral);color:var(--white);box-shadow:var(--shadow-coral)}
.btn--coral:hover{background:var(--coral-deep);transform:translateY(-2px)}
.btn--amber{background:var(--amber);color:var(--ink);box-shadow:var(--shadow-amber)}
.btn--amber:hover{background:var(--amber-deep);color:var(--white);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--muted)}
.btn--ghost:hover{background:var(--white);color:var(--ink)}
.btn--outline{background:var(--white);color:var(--indigo-deep);border-color:var(--indigo-100)}
.btn--outline:hover{border-color:var(--indigo);background:var(--indigo-50)}
.btn--lg{min-height:60px;padding:var(--s-4) var(--s-8);font-size:var(--fs-lg);border-radius:var(--r-full)}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn svg{width:20px;height:20px}

/* =================================================================
   GAME HEADER + GARDEN PROGRESS
   ================================================================= */
.game-top{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--white);border:2px solid var(--line-soft);
  border-radius:var(--r-full);padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  box-shadow:var(--shadow-soft);margin-bottom:var(--s-6);
}
.game-top__brand{display:flex;align-items:center;gap:var(--s-3)}
.game-top__logo{
  width:42px;height:42px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--coral),var(--amber));
  display:flex;align-items:center;justify-content:center;color:var(--white);
  font-size:1.4rem;
}
.game-top__name{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:var(--fs-md);line-height:1}
.game-top__name small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:500;font-family:var(--font-body);margin-top:2px}
.game-top__count{
  background:var(--indigo-50);color:var(--indigo-deep);font-weight:700;
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  font-size:var(--fs-sm);
}

.garden-bed{
  background:var(--white);border:2px solid var(--line-soft);
  border-radius:var(--r-xl);padding:var(--s-4) var(--s-5);
  margin-bottom:var(--s-6);box-shadow:var(--shadow-soft);
}
.garden-bed__title{
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-sm);color:var(--muted);font-weight:600;margin-bottom:var(--s-3);
}
.garden-bed__title strong{color:var(--ink);font-weight:700}
.garden-bed__row{
  display:grid;grid-template-columns:repeat(8,1fr);gap:var(--s-2);
}
.garden-spot{
  aspect-ratio:1;border-radius:var(--r-md);
  background:var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:all var(--t-base);
}
.garden-spot--current{background:var(--indigo-50);box-shadow:0 0 0 3px var(--indigo)}
.garden-spot--done{background:var(--emerald-soft)}
.garden-spot--miss{background:var(--coral-50)}
.garden-spot svg{width:60%;height:60%;animation:bloom .5s var(--t-slow) both}
.garden-spot--done svg{color:var(--coral)}
.garden-spot__miss{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--coral);font-size:1.4rem;line-height:1;animation:bloom .5s var(--t-slow) both}
@keyframes bloom{0%{transform:scale(0) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* =================================================================
   ACTIVITY CARD
   ================================================================= */
.activity{
  background:var(--white);border-radius:var(--r-lg);
  padding:var(--s-8);box-shadow:0 4px 20px #8b15381a;
  border:1px solid var(--maroon-100);
  position:relative;animation:rise .4s var(--t-slow) both;
}
@keyframes rise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}

.activity__chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--indigo-50);color:var(--indigo-deep);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:700;margin-bottom:var(--s-3);
}
.activity__chip svg{width:14px;height:14px}

.activity__title{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);color:var(--maroon-deep);font-weight:800;
  line-height:1.3;margin-bottom:var(--s-2);
}
.activity__hint{
  font-size:var(--fs-base);color:var(--muted);
  margin-bottom:var(--s-6);line-height:1.8;
}

/* Question banner */
.qbanner{
  background:linear-gradient(135deg,var(--lavender),var(--white));
  border:2px dashed var(--indigo-200);
  border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-6);
  margin-bottom:var(--s-6);
  font-size:var(--fs-lg);font-weight:600;color:var(--ink);
  text-align:center;line-height:1.8;
}

/* Mascot bubble (Sara) */
.mascot{
  display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-6);
}
.mascot__avatar{
  width:64px;height:64px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--coral),var(--amber));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;flex-shrink:0;box-shadow:var(--shadow-coral);
  animation:bobble 4s ease-in-out infinite;
}
.mascot__bubble{
  flex:1;background:var(--cream);border:2px solid var(--amber);
  border-radius:var(--r-lg);border-top-right-radius:6px;
  padding:var(--s-4) var(--s-5);position:relative;
}
.mascot__bubble::before{
  content:"";position:absolute;top:14px;right:-10px;width:18px;height:18px;
  background:var(--cream);border-top:2px solid var(--amber);border-right:2px solid var(--amber);
  transform:rotate(45deg);
}
.mascot__name{font-size:var(--fs-xs);color:var(--coral-deep);font-weight:800;margin-bottom:2px}
.mascot__text{font-weight:500;color:var(--ink);line-height:1.7}

/* =================================================================
   OPTIONS (single choice)
   ================================================================= */
.options{display:flex;flex-direction:column;gap:var(--s-3)}
.opt{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  background:var(--white);border:2px solid var(--line);
  border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:500;
  text-align:right;width:100%;color:var(--ink);
  transition:all var(--t-base);
}
.opt:hover{border-color:var(--indigo);background:var(--indigo-50);transform:translateX(-4px)}
.opt[aria-pressed="true"]{border-color:var(--indigo-deep);background:var(--indigo-50);box-shadow:0 0 0 4px #6366f126}
.opt--correct{border-color:var(--success);background:var(--success-50);color:var(--emerald-deep);animation:pulse-correct .5s}
.opt--wrong{border-color:var(--error);background:var(--error-50);color:var(--coral-deep);animation:shake .45s}
.opt--locked{pointer-events:none}
.opt__bullet{
  flex-shrink:0;width:36px;height:36px;border-radius:var(--r-full);
  background:var(--indigo-50);color:var(--indigo-deep);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--fs-sm);font-family:var(--font-display);
  transition:all var(--t-base);
}
.opt[aria-pressed="true"] .opt__bullet{background:var(--indigo-deep);color:var(--white)}
.opt--correct .opt__bullet{background:var(--success);color:var(--white)}
.opt--wrong .opt__bullet{background:var(--error);color:var(--white)}
@keyframes pulse-correct{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* =================================================================
   MULTISELECT (checkboxes)
   ================================================================= */
.checks{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.check{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  background:var(--white);border:2px solid var(--line);
  border-radius:var(--r-lg);font-weight:500;color:var(--ink);
  text-align:right;transition:all var(--t-base);
}
.check:hover{border-color:var(--emerald);background:var(--emerald-soft)}
.check[aria-pressed="true"]{border-color:var(--emerald-deep);background:var(--emerald-soft);box-shadow:0 0 0 4px #10b9811f}
.check--correct{border-color:var(--success);background:var(--success-50)}
.check--wrong{border-color:var(--error);background:var(--error-50)}
.check__box{
  flex-shrink:0;width:28px;height:28px;border-radius:8px;
  border:2px solid var(--muted-soft);
  display:flex;align-items:center;justify-content:center;
  background:var(--white);transition:all var(--t-base);color:transparent;
}
.check[aria-pressed="true"] .check__box{background:var(--emerald-deep);border-color:var(--emerald-deep);color:var(--white)}
.check--correct .check__box{background:var(--success);border-color:var(--success);color:var(--white)}
.check--wrong .check__box{background:var(--error);border-color:var(--error);color:var(--white)}
.check__box svg{width:18px;height:18px}

/* =================================================================
   MATCHING (two columns)
   ================================================================= */
.match{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.match__col{display:flex;flex-direction:column;gap:var(--s-3)}
.match__head{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:var(--s-2);border-bottom:2px dashed var(--line);
}
.match__card{
  padding:var(--s-3) var(--s-4);background:var(--white);
  border:2px solid var(--line);border-radius:var(--r-md);
  text-align:center;font-weight:500;line-height:1.6;
  font-size:var(--fs-sm);color:var(--ink);
  transition:all var(--t-base);min-height:54px;
  display:flex;align-items:center;justify-content:center;
}
.match__card:hover{border-color:var(--indigo);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.match__card[aria-pressed="true"]{border-color:var(--indigo-deep);background:var(--indigo-50);box-shadow:0 0 0 4px #6366f126;transform:scale(1.02)}
.match__card--matched{border-color:var(--success);background:var(--success-50);color:var(--emerald-deep);pointer-events:none}
.match__card--matched::after{content:"✓";color:var(--success);font-weight:800;margin-right:var(--s-2)}
.match__card--wrong{border-color:var(--error);background:var(--error-50);animation:shake .45s}

/* =================================================================
   VERSE FILL-IN
   ================================================================= */
.verse{
  background:linear-gradient(135deg,var(--cream),var(--amber-50));
  border:2px solid var(--amber);border-radius:var(--r-xl);
  padding:var(--s-8) var(--s-6);text-align:center;margin-bottom:var(--s-6);
  position:relative;
}
.verse::before,.verse::after{
  content:"﴿";position:absolute;font-family:var(--font-quran);
  font-size:3rem;color:var(--amber-deep);opacity:.4;
}
.verse::before{top:8px;right:16px}
.verse::after{content:"﴾";bottom:8px;left:16px}
.verse__text{
  font-family:var(--font-quran);font-size:clamp(1.4rem,4vw,1.85rem);
  color:var(--ink);line-height:2.4;font-weight:400;
}
.verse__blank{
  display:inline-block;min-width:140px;
  padding:0 var(--s-3);margin:0 var(--s-2);
  border-bottom:3px dashed var(--coral);color:var(--coral-deep);font-weight:700;
  font-family:var(--font-quran);
}
.verse__blank--filled{border-style:solid;border-color:var(--indigo-deep);color:var(--indigo-deep);cursor:pointer}
.verse__blank--correct{color:var(--emerald-deep);border-color:var(--emerald-deep)}
.verse__blank--wrong{color:var(--coral-deep);border-color:var(--coral-deep)}
.verse__chips{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;
  margin-top:var(--s-4);
}
.chip{
  padding:var(--s-2) var(--s-5);background:var(--white);
  border:2px solid var(--coral);color:var(--coral-deep);
  border-radius:var(--r-full);font-weight:700;font-size:var(--fs-base);
  font-family:var(--font-quran);min-height:48px;
  transition:all var(--t-base);
}
.chip:hover{background:var(--coral);color:var(--white);transform:translateY(-2px)}
.chip--used{opacity:.35;pointer-events:none}

/* =================================================================
   CLASSIFY (drag/drop or tap-cycle)
   ================================================================= */
.classify{display:flex;flex-direction:column;gap:var(--s-5)}
.classify__pool{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  padding:var(--s-4);background:var(--lavender);
  border:2px dashed var(--indigo-200);border-radius:var(--r-lg);
  min-height:88px;align-items:center;justify-content:center;
}
.classify__pool:empty::after{content:"تم توزيع جميع النعم ✓";color:var(--emerald-deep);font-weight:700}
.cls-item{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);background:var(--white);
  border:2px solid var(--line);border-radius:var(--r-full);
  font-weight:600;font-size:var(--fs-sm);color:var(--ink);
  cursor:grab;user-select:none;min-height:44px;
  transition:all var(--t-base);
  box-shadow:var(--shadow-soft);
}
.cls-item:hover{border-color:var(--indigo);transform:translateY(-2px)}
.cls-item:active{cursor:grabbing}
.cls-item--dragging{opacity:.4;transform:scale(.95)}
.cls-item--ok{border-color:var(--success);background:var(--success-50);color:var(--emerald-deep)}
.cls-item--bad{border-color:var(--error);background:var(--error-50);color:var(--coral-deep)}

.classify__bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4)}
.bin{
  border-radius:var(--r-lg);padding:var(--s-4);
  border:2px dashed var(--line);min-height:140px;
  background:var(--white);transition:all var(--t-base);
}
.bin--coral{border-color:#fda4af;background:#fff5f6}
.bin--sky{border-color:#bae6fd;background:#f0f9ff}
.bin--emerald{border-color:#a7f3d0;background:#f0fdf4}
.bin.drag-over{border-style:solid;box-shadow:0 0 0 4px var(--indigo-100);transform:scale(1.02)}
.bin__head{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);
  margin-bottom:var(--s-3);padding-bottom:var(--s-2);
  border-bottom:2px solid;
}
.bin--coral .bin__head{color:var(--coral-deep);border-color:#fda4af}
.bin--sky .bin__head{color:#0369a1;border-color:#bae6fd}
.bin--emerald .bin__head{color:var(--emerald-deep);border-color:#a7f3d0}
.bin__items{display:flex;flex-wrap:wrap;gap:var(--s-2);min-height:48px}

/* =================================================================
   TRUE / FALSE
   ================================================================= */
.tf{display:flex;flex-direction:column;align-items:center;gap:var(--s-5)}
.tf__progress{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.tf__card{
  width:100%;background:var(--white);
  border:2px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-8) var(--s-6);text-align:center;
  box-shadow:var(--shadow-card);
  transition:all var(--t-slow);
}
.tf__card--ok{border-color:var(--success);background:var(--success-50)}
.tf__card--bad{border-color:var(--error);background:var(--error-50)}
.tf__emoji{font-size:3rem;margin-bottom:var(--s-3)}
.tf__text{font-size:var(--fs-md);font-weight:600;line-height:2;color:var(--ink);margin-bottom:var(--s-6)}
.tf__buttons{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap}
.tf__btn{
  min-width:140px;padding:var(--s-3) var(--s-6);
  border-radius:var(--r-full);font-weight:800;font-size:var(--fs-md);
  border:2px solid;display:inline-flex;align-items:center;gap:var(--s-2);
  justify-content:center;font-family:var(--font-display);min-height:56px;
  transition:all var(--t-base);
}
.tf__btn svg{width:22px;height:22px}
.tf__btn--true{background:var(--success-50);color:var(--emerald-deep);border-color:var(--success)}
.tf__btn--true:hover{background:var(--success);color:var(--white);transform:translateY(-3px)}
.tf__btn--false{background:var(--error-50);color:var(--coral-deep);border-color:var(--error)}
.tf__btn--false:hover{background:var(--error);color:var(--white);transform:translateY(-3px)}

/* =================================================================
   ORDERING
   ================================================================= */
.steps{display:flex;flex-direction:column;gap:var(--s-3)}
.step{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);background:var(--white);
  border:2px solid var(--line);border-radius:var(--r-lg);
  user-select:none;cursor:grab;
  transition:all var(--t-base);
}
.step:hover{border-color:var(--indigo);box-shadow:var(--shadow-soft);transform:translateY(-2px)}
.step--ok{border-color:var(--success);background:var(--success-50)}
.step--bad{border-color:var(--error);background:var(--error-50)}
.step--dragging{opacity:.5}
.step__num{
  flex-shrink:0;width:42px;height:42px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--indigo),var(--indigo-deep));
  color:var(--white);font-family:var(--font-display);font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);
}
.step--ok .step__num{background:linear-gradient(135deg,var(--emerald),var(--emerald-deep))}
.step--bad .step__num{background:linear-gradient(135deg,var(--coral),var(--coral-deep))}
.step__emoji{font-size:1.6rem;flex-shrink:0}
.step__text{flex:1;font-weight:500;color:var(--ink);line-height:1.6}
.step__nav{display:flex;flex-direction:column;gap:4px}
.step__nav button{
  width:30px;height:26px;border-radius:8px;background:var(--indigo-50);
  color:var(--indigo-deep);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t-fast);
}
.step__nav button:hover:not(:disabled){background:var(--indigo);color:var(--white)}
.step__nav button:disabled{opacity:.3;cursor:not-allowed}

/* =================================================================
   CHALKBOARD (custom whiteboard look)
   ================================================================= */
.board{
  background:linear-gradient(180deg,#0f3a2e 0%, #0d3329 100%);
  border-radius:var(--r-xl);padding:var(--s-8) var(--s-6);
  border:6px solid #92400e;
  box-shadow:0 12px 40px -12px rgba(0,0,0,.4),inset 0 0 60px #ffffff14;
  position:relative;text-align:center;color:#fef3c7;
}
.board::before{
  content:"";position:absolute;top:8px;right:8px;left:8px;bottom:8px;
  border:1px dashed #ffffff20;border-radius:var(--r-lg);pointer-events:none;
}
.board__hint{font-size:var(--fs-sm);color:#fde68a;font-weight:600;margin-bottom:var(--s-3);font-family:var(--font-body)}
.board__q{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1.7;color:#fef3c7;font-weight:700}
.chalk-options{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-3);margin-top:var(--s-5);
}
.chalk-opt{
  padding:var(--s-4);background:rgba(255,255,255,.08);
  border:2px dashed rgba(255,255,255,.25);border-radius:var(--r-md);
  color:#fef3c7;font-weight:600;font-size:var(--fs-base);text-align:center;
  transition:all var(--t-base);min-height:60px;
  display:flex;align-items:center;justify-content:center;line-height:1.5;
}
.chalk-opt:hover{background:rgba(255,255,255,.15);border-style:solid;border-color:#fbbf24;transform:translateY(-2px)}
.chalk-opt[aria-pressed="true"]{background:rgba(251,191,36,.2);border-color:#fbbf24;border-style:solid}
.chalk-opt--correct{background:rgba(16,185,129,.25);border-color:#10b981;border-style:solid;color:#a7f3d0}
.chalk-opt--wrong{background:rgba(225,29,72,.25);border-color:#fb7185;border-style:solid;color:#fecdd3}

/* =================================================================
   FEEDBACK
   ================================================================= */
.fbk{
  display:flex;align-items:flex-start;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);
  margin-top:var(--s-5);font-weight:600;line-height:1.7;
  animation:rise .4s var(--t-slow) both;
}
.fbk--ok{background:var(--success-50);color:var(--emerald-deep);border:2px solid #a7f3d0}
.fbk--bad{background:var(--error-50);color:var(--coral-deep);border:2px solid #fecdd3}
.fbk__icon{flex-shrink:0;width:40px;height:40px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.fbk--ok .fbk__icon{background:var(--success);color:var(--white)}
.fbk--bad .fbk__icon{background:var(--error);color:var(--white)}
.fbk__yousef{
  flex-shrink:0;width:64px;height:64px;border-radius:var(--r-full);
  background:var(--white);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:3px solid currentColor;
  animation:yousefBob .9s ease-in-out infinite;
}
.fbk__yousef svg{width:90%;height:90%}
.fbk__msg{flex:1;min-width:200px}
@keyframes yousefBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Streak badge — pops in when combo reaches 3+ */
.streak-pop{
  position:fixed;top:18%;left:50%;
  background:linear-gradient(135deg,#FB7185,#F59E0B);
  color:#fff;padding:var(--s-3) var(--s-5);border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);
  display:flex;align-items:center;gap:var(--s-2);
  box-shadow:0 12px 28px rgba(251,113,133,.5),0 0 0 4px rgba(255,255,255,.4);
  z-index:9000;
  opacity:1;transform:translateX(-50%);
  animation:streakIn .35s cubic-bezier(.34,1.7,.64,1);
}
.streak-pop--exit{animation:streakOut .3s ease forwards}
.streak-pop__fire{font-size:1.6rem;display:inline-block;animation:streakFire .5s ease-in-out infinite alternate}
.streak-pop__bonus{font-size:.85em;opacity:.95;background:rgba(255,255,255,.2);padding:2px 10px;border-radius:var(--r-full)}
@keyframes streakIn{0%{transform:translateX(-50%) scale(.4) rotate(-12deg)}60%{transform:translateX(-50%) scale(1.15) rotate(2deg)}100%{transform:translateX(-50%) scale(1) rotate(0)}}
@keyframes streakOut{0%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(.7) translateY(-30px)}}
@keyframes streakFire{0%{transform:scale(1) rotate(-6deg)}100%{transform:scale(1.15) rotate(6deg)}}

/* =================================================================
   NAV
   ================================================================= */
.nav{
  margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:2px dashed var(--line);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-3);flex-wrap:wrap;
}

/* =================================================================
   COMPLETION SCREEN
   ================================================================= */
.complete{text-align:center;padding:var(--s-8) var(--s-4);animation:rise .6s var(--t-slow) both}
.complete__hero{
  display:inline-flex;align-items:center;justify-content:center;
  width:140px;height:140px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--coral),var(--amber));
  color:var(--white);font-size:5rem;
  box-shadow:var(--shadow-pop);margin-bottom:var(--s-6);
  animation:bobble 3s ease-in-out infinite;
}
.complete__title{
  font-family:var(--font-display);font-size:var(--fs-3xl);
  color:var(--ink);font-weight:800;margin-bottom:var(--s-3);
}
.complete__subtitle{
  font-size:var(--fs-md);color:var(--muted);
  max-width:520px;margin:0 auto var(--s-6);line-height:1.85;
}
.score-card{
  background:linear-gradient(135deg,var(--indigo-deep),var(--indigo-darker));
  color:var(--white);border-radius:var(--r-xl);padding:var(--s-8);
  max-width:380px;margin:0 auto var(--s-6);box-shadow:var(--shadow-pop);
}
.score-card__label{font-size:var(--fs-sm);opacity:.85;font-weight:600;margin-bottom:var(--s-2)}
.score-card__big{font-family:var(--font-display);font-size:var(--fs-5xl);font-weight:800;line-height:1}
.score-card__sub{font-size:var(--fs-md);margin-top:var(--s-2);opacity:.9}
.complete__stars{display:flex;justify-content:center;gap:var(--s-3);margin:var(--s-4) 0 var(--s-6)}
.star{font-size:2.4rem;filter:grayscale(1) opacity(.3);transition:all .5s var(--t-slow)}
.star--on{filter:none;animation:starpop .7s var(--t-slow)}
@keyframes starpop{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(20deg)}100%{transform:scale(1) rotate(0)}}
.complete__msg{
  background:var(--cream);border:2px solid var(--amber);border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-5);max-width:560px;margin:var(--s-6) auto;
  font-weight:600;color:var(--amber-deep);line-height:1.85;
}
.complete__actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6)}

/* Garden showcase on completion */
.garden-final{
  display:grid;grid-template-columns:repeat(8,1fr);gap:var(--s-2);
  max-width:520px;margin:var(--s-6) auto;padding:var(--s-4);
  background:linear-gradient(180deg,#fff,#f0fdf4);
  border-radius:var(--r-xl);border:2px solid var(--emerald-soft);
}
.garden-final .garden-spot{aspect-ratio:1}

/* Confetti */
.confetti{position:fixed;top:-20px;font-size:1.6rem;animation:fall 3.2s linear forwards;z-index:1000;pointer-events:none}
@keyframes fall{0%{opacity:1;transform:translateY(-20px) rotate(0)}100%{opacity:0;transform:translateY(110vh) rotate(720deg)}}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:768px){
  html{font-size:15px}
  .activity{padding:var(--s-5)}
  .match{grid-template-columns:1fr;gap:var(--s-3)}
  .checks{grid-template-columns:1fr}
  .nav{flex-direction:column-reverse}
  .nav .btn{width:100%}
  .complete__actions .btn{width:100%}
  .garden-bed__row{grid-template-columns:repeat(8,1fr);gap:6px}
  .scene__sun{width:100px;height:100px;top:-20px;left:-20px}
  .scene__cloud{width:110px}
}
@media (max-width:480px){
  html{font-size:14px}
  .mascot{flex-direction:column;align-items:center;text-align:center}
  .mascot__bubble{border-top-right-radius:var(--r-lg)}
  .mascot__bubble::before{display:none}
  .activity{padding:var(--s-4)}
  .verse__text{font-size:1.2rem;line-height:2.2}
  .complete__hero{width:110px;height:110px;font-size:3.5rem}
  .tf__buttons{flex-direction:column;width:100%}
  .tf__btn{width:100%}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .scene{display:none}
}

/* =================================================================
   HOME PAGE — maroon/cream Islamic aesthetic (mirrors source)
   ================================================================= */
.home{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--s-8) var(--s-4) var(--s-6);
  animation:rise .6s var(--t-slow) both;
  position:relative;
}

.home__back{
  position:absolute;top:var(--s-5);inset-inline-start:var(--s-5);
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  background:var(--white);border:1px solid var(--maroon-100);
  color:var(--maroon-deep);font-family:var(--font-display);
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  box-shadow:0 2px 8px #8b15381a;
  transition:transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.home__back:hover{
  transform:translateY(-2px);
  background:var(--maroon);color:var(--white);
  box-shadow:0 6px 16px #8b153833;
}
.home__back-arrow{display:inline-block;transition:transform var(--t-base);font-size:1.1em;line-height:1}
.home__back:hover .home__back-arrow{transform:translateX(-3px)}

/* Bismillah pill */
.home__bismillah{
  font-family:var(--font-quran);font-size:var(--fs-md);
  color:var(--maroon-deep);margin-bottom:var(--s-5);
  background:var(--white);
  padding:var(--s-2) var(--s-6);border-radius:var(--r-full);
  border:1px solid var(--maroon-100);
  box-shadow:0 2px 8px #8b15381a;
  letter-spacing:.02em;
}

/* Big title */
.home__title{
  font-family:"Reem Kufi","Amiri",var(--font-display);
  font-size:clamp(2.6rem, 8vw, 4.4rem);
  font-weight:700;color:var(--maroon);
  letter-spacing:0;line-height:1.4;
  margin-bottom:var(--s-3);
  margin-top:var(--s-4);
}
.home__title em{
  font-style:normal;color:var(--maroon-deep);
  position:relative;display:inline-block;
}
.home__title em::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-4px;height:6px;
  background:var(--amber);border-radius:var(--r-full);opacity:.7;z-index:-1;
}

.home__welcome{
  font-size:var(--fs-md);color:var(--ink-soft);
  max-width:520px;margin:0 auto var(--s-8);line-height:1.95;
  font-weight:500;
}

/* Teacher card — elegant maroon style */
.teacher-card{
  display:flex;align-items:center;gap:var(--s-4);
  background:var(--white);
  border:2px solid var(--maroon-100);
  border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-5);
  margin-bottom:var(--s-8);
  box-shadow:0 4px 16px #8b15381a;
  position:relative;overflow:hidden;
  max-width:440px;width:100%;
  transition:transform var(--t-base), box-shadow var(--t-base);
}
.teacher-card::before{
  content:"";position:absolute;top:0;right:0;bottom:0;width:6px;
  background:linear-gradient(180deg, var(--maroon), var(--maroon-deep));
}
.teacher-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #8b153833}
.teacher-card__avatar{
  width:56px;height:56px;border-radius:var(--r-full);
  background:linear-gradient(135deg, var(--maroon), var(--maroon-deep));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
  box-shadow:0 2px 8px #8b153866;
}
.teacher-card__svg{width:90%;height:90%}
.teacher-card__info{flex:1;text-align:right;padding-right:var(--s-2)}
.teacher-card__label{
  font-size:var(--fs-xs);color:var(--muted);
  font-weight:600;margin-bottom:2px;letter-spacing:.05em;
}
.teacher-card__name{
  font-family:var(--font-display);font-weight:800;
  color:var(--maroon-deep);font-size:var(--fs-lg);
}
.teacher-card__deco{
  font-size:1.4rem;color:var(--amber);
}

/* Section grid */
.section-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--s-4);max-width:760px;width:100%;margin-bottom:var(--s-8);
}
.section-card{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  text-align:right;gap:var(--s-2);
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);
  cursor:pointer;
  box-shadow:0 2px 12px #8b15380f;
  transition:all var(--t-base);
  animation:rise .5s var(--t-slow) both;
  min-height:170px;
  overflow:hidden;
}
.section-card::before{
  content:"";position:absolute;top:0;right:0;left:0;height:5px;
  background:linear-gradient(90deg, var(--maroon), var(--coral-deep));
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-base);
}
.section-card:hover{
  transform:translateY(-4px);
  border-color:var(--maroon);
  box-shadow:0 12px 30px #8b153826;
}
.section-card:hover::before{transform:scaleX(1)}

/* All cards now share maroon palette — no per-color variants */
.section-card--indigo,.section-card--coral,.section-card--amber,.section-card--emerald{
  background:var(--white);border-color:var(--line);
}

.section-card--primary{
  background:linear-gradient(135deg, var(--white), var(--maroon-50));
  border-color:var(--maroon);
}
.section-card--primary::before{transform:scaleX(1)}
@keyframes primaryPulse{0%,100%{box-shadow:0 2px 12px #8b15381f}50%{box-shadow:0 0 0 4px #8b15381f, 0 6px 18px #8b153833}}
.section-card--primary{animation:rise .5s var(--t-slow) both, primaryPulse 2.4s ease-in-out 1s infinite}

.section-card__icon{
  font-size:2.2rem;width:56px;height:56px;
  background:var(--maroon-50);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s-2);
  color:var(--maroon-deep);
}
.section-card__title{
  font-family:var(--font-display);font-weight:800;
  color:var(--maroon-deep);font-size:var(--fs-lg);
}
.section-card__desc{
  font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.7;
  flex:1;font-weight:500;
}
.section-card__arrow{
  position:absolute;top:var(--s-4);left:var(--s-4);
  width:32px;height:32px;border-radius:var(--r-full);
  background:var(--maroon-50);color:var(--maroon-deep);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.1rem;
  transition:all var(--t-base);
}
.section-card:hover .section-card__arrow{
  background:var(--maroon);color:var(--white);
  transform:translateX(-3px);
}

/* Footer verse — elegant maroon framed */
.home__verse{
  background:var(--white);
  border:1px solid var(--maroon-100);
  border-right:4px solid var(--maroon);
  border-radius:var(--r-md);
  padding:var(--s-4) var(--s-6);max-width:480px;
  text-align:center;width:100%;
  box-shadow:0 2px 8px #8b15381a;
}
.home__verse-text{
  font-family:var(--font-quran);font-size:var(--fs-lg);
  color:var(--maroon-deep);line-height:2;font-weight:400;
}
.home__verse-source{
  display:block;margin-top:var(--s-2);
  font-size:var(--fs-sm);color:var(--coral-deep);font-weight:700;
}

/* =================================================================
   SUBPAGES (Lessons, Verses, Achievements)
   ================================================================= */
.subpage{
  display:flex;flex-direction:column;
  padding:var(--s-4) var(--s-3);
  animation:rise .5s var(--t-slow) both;
}
.subpage__head{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  background:var(--white);
  border:1px solid var(--maroon-100);
  border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);
  margin-bottom:var(--s-6);box-shadow:0 4px 16px #8b15381a;
  position:relative;overflow:hidden;
}
.subpage__head::before{
  content:"";position:absolute;top:0;right:0;left:0;height:5px;
  background:linear-gradient(90deg, var(--maroon), var(--coral-deep), var(--amber));
}
.subpage__back{
  position:absolute;top:var(--s-4);right:var(--s-4);
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--maroon-50);border:1px solid var(--maroon-100);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-full);
  color:var(--maroon-deep);font-weight:700;font-size:var(--fs-sm);
  font-family:var(--font-display);
  transition:all var(--t-base);
}
.subpage__back:hover{background:var(--maroon);color:var(--white);transform:translateX(3px)}
.subpage__title-wrap{margin-top:var(--s-4)}
.subpage__icon{
  width:64px;height:64px;border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--maroon), var(--maroon-deep));
  color:var(--white);font-size:1.8rem;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--s-3);box-shadow:0 4px 12px #8b153866;
}
.subpage__title{
  font-family:var(--font-display);font-weight:900;
  color:var(--maroon-deep);font-size:var(--fs-2xl);margin-bottom:var(--s-2);
}
.subpage__subtitle{font-size:var(--fs-md);color:var(--muted);max-width:480px;margin:0 auto;line-height:1.7}
.subpage__sub{
  font-family:var(--font-display);font-weight:800;color:var(--ink);
  font-size:var(--fs-xl);margin:var(--s-6) 0 var(--s-4);
  display:flex;align-items:center;gap:var(--s-3);justify-content:center;
}
.subpage__foot{
  display:flex;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:2px dashed var(--line);flex-wrap:wrap;
}

.lessons-list{display:flex;flex-direction:column;gap:var(--s-4)}

/* Verses page */
.verses-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.big-verse{
  background:linear-gradient(135deg,var(--cream),var(--amber-50));
  border:3px solid var(--amber);border-radius:var(--r-xl);
  padding:var(--s-6) var(--s-5);text-align:center;
  position:relative;box-shadow:var(--shadow-soft);
}
.big-verse--hadith{
  background:linear-gradient(135deg,var(--white),var(--emerald-soft));
  border-color:var(--emerald);
}
.big-verse__ar{
  font-family:var(--font-quran);font-size:var(--fs-xl);
  color:var(--ink);line-height:2.2;font-weight:400;
  margin-bottom:var(--s-3);
}
.big-verse__src{
  font-size:var(--fs-sm);color:var(--coral-deep);
  font-weight:700;margin-bottom:var(--s-3);
}
.big-verse--hadith .big-verse__src{color:var(--emerald-deep)}
.big-verse__mean{
  font-size:var(--fs-base);color:var(--muted);
  line-height:1.85;font-weight:500;
  background:var(--white);padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
}

/* Achievements */
.ach-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-6);
}
.ach-stat{
  background:var(--white);border:2px solid;border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-3);text-align:center;
  box-shadow:var(--shadow-soft);
}
.ach-stat--coins{border-color:var(--amber);background:linear-gradient(135deg,#FFFFFF,#FEF3C7)}
.ach-stat--combo{border-color:var(--coral);background:linear-gradient(135deg,#FFFFFF,var(--coral-50))}
.ach-stat--done{border-color:var(--emerald);background:linear-gradient(135deg,#FFFFFF,var(--emerald-soft))}
.ach-stat__icon{font-size:2rem;margin-bottom:var(--s-2)}
.ach-stat__value{font-family:var(--font-display);font-weight:800;font-size:var(--fs-2xl);color:var(--ink)}
.ach-stat__label{font-size:var(--fs-sm);color:var(--muted);font-weight:600;margin-top:2px}

.ach-activities{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-6)}
.ach-row{
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--white);border:2px solid var(--line);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-md);
  text-align:right;cursor:pointer;
  transition:all var(--t-base);
}
.ach-row:hover{border-color:var(--indigo);transform:translateX(-4px)}
.ach-row--done{border-color:var(--emerald);background:var(--emerald-soft)}
.ach-row--miss{border-color:var(--coral);background:var(--coral-50)}
.ach-row__num{
  width:32px;height:32px;border-radius:var(--r-full);
  background:var(--indigo-50);color:var(--indigo-deep);
  font-weight:800;font-family:var(--font-display);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ach-row--done .ach-row__num{background:var(--emerald);color:var(--white)}
.ach-row--miss .ach-row__num{background:var(--coral);color:var(--white)}
.ach-row__title{flex:1;font-weight:600;color:var(--ink);font-size:var(--fs-base)}
.ach-row__status{font-size:1.4rem}

.ach-progress{
  background:var(--white);border:2px solid var(--indigo-100);
  border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);
  box-shadow:var(--shadow-soft);
}
.ach-progress__label{
  font-family:var(--font-display);font-weight:700;
  color:var(--ink);text-align:center;margin-bottom:var(--s-3);
}
.ach-progress__bar{
  height:14px;background:var(--line);border-radius:var(--r-full);
  overflow:hidden;
}
.ach-progress__fill{
  height:100%;
  background:linear-gradient(90deg,var(--coral),var(--amber),var(--emerald));
  border-radius:var(--r-full);
  transition:width .8s cubic-bezier(.34,1.4,.64,1);
}

@media (max-width:480px){
  .section-grid{grid-template-columns:1fr}
  .subpage__back{position:static;margin-bottom:var(--s-3);align-self:flex-start}
  .subpage__head{padding:var(--s-4)}
  .subpage__foot{flex-direction:column-reverse}
  .subpage__foot .btn{width:100%}
}

/* =================================================================
   GAMING HUD — coins, combo, sound, reactions
   ================================================================= */
.hud{
  display:flex;align-items:center;gap:var(--s-2);
  background:linear-gradient(135deg,#FFFFFF 0%, #FAF5FF 100%);
  border:2px solid var(--indigo-100);
  border-radius:var(--r-full);
  padding:var(--s-2) var(--s-3);
  box-shadow:var(--shadow-card);
  margin-bottom:var(--s-5);
  position:relative;overflow:visible;
  flex-wrap:wrap;
}
.hud__home{
  width:42px;height:42px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--indigo),var(--indigo-deep));
  color:var(--white);display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0;
  transition:all var(--t-base);
  box-shadow:0 4px 12px -4px #6366f180;
}
.hud__home:hover{transform:scale(1.08) rotate(-5deg);box-shadow:0 6px 18px -4px #6366f1aa}

/* Coin counter — big and obvious */
.hud__coins{
  display:flex;align-items:center;gap:var(--s-2);
  background:linear-gradient(135deg,#FEF3C7,#FBBF24);
  padding:var(--s-1) var(--s-4);border-radius:var(--r-full);
  border:2px solid #F59E0B;
  box-shadow:0 4px 12px -4px #fbbf2480, inset 0 1px 0 #FFFFFF99;
  font-family:var(--font-display);font-weight:800;color:#7C2D12;
  font-size:var(--fs-md);min-width:80px;justify-content:center;
  transition:transform var(--t-base);
}
.hud__coins--pop{animation:coinPop .55s cubic-bezier(.34,1.6,.64,1)}
@keyframes coinPop{
  0%{transform:scale(1)}
  30%{transform:scale(1.25) rotate(-4deg);box-shadow:0 8px 24px -4px #fbbf24cc}
  60%{transform:scale(1.1) rotate(2deg)}
  100%{transform:scale(1)}
}
.hud__coin-icon{width:24px;height:24px;flex-shrink:0;animation:spin 6s linear infinite}
.hud__coin-num{min-width:30px;text-align:left}

/* Combo badge — fire effect */
.hud__combo{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#FB7185,#E11D48);
  padding:var(--s-1) var(--s-4);border-radius:var(--r-full);
  color:var(--white);font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-md);
  box-shadow:0 4px 14px -4px #fb7185aa, inset 0 1px 0 #FFFFFF40;
  animation:fireWiggle .6s ease-in-out infinite alternate, fireGlow 1.4s ease-in-out infinite;
}
@keyframes fireWiggle{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes fireGlow{
  0%,100%{box-shadow:0 4px 14px -4px #fb7185aa}
  50%{box-shadow:0 4px 24px -2px #fb7185ee, 0 0 0 4px #fb718533}
}
.hud__combo-icon{width:22px;height:22px;animation:spin 1s linear infinite}

/* Activity counter */
.hud__count{
  margin-right:auto;
  background:var(--indigo-50);color:var(--indigo-deep);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-full);
  font-weight:700;font-size:var(--fs-sm);font-family:var(--font-display);
}

/* Sound toggle */
.hud__sound{
  width:38px;height:38px;border-radius:var(--r-full);
  background:var(--lavender);font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t-base);
}
.hud__sound:hover{background:var(--indigo-100);transform:scale(1.1)}

/* Yousef reaction popup — body overlay, floats top-center to avoid garden overlap */
.reaction-pop{
  position:fixed;
  top:50%;left:50%;
  transform-origin:center center;
  transform:translate(-50%,-50%) scale(0);
  width:140px;height:140px;border-radius:var(--r-full);
  background:linear-gradient(135deg,#FFFFFF,var(--maroon-50));
  border:5px solid;padding:0;overflow:hidden;z-index:1500;
  pointer-events:none;
  box-shadow:0 20px 60px -8px rgba(139,21,56,.4);
  animation:reactionPop .4s cubic-bezier(.34,1.6,.64,1) both;
}
.reaction-pop--happy{border-color:var(--success)}
.reaction-pop--think{border-color:var(--amber)}
.reaction-pop--exit{animation:reactionOut .25s ease-in forwards}
.reaction-pop__svg{width:100%;height:100%;display:block}
@keyframes reactionPop{
  0%{transform:translate(-50%,-50%) scale(0) rotate(-180deg);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.15) rotate(8deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
}
@keyframes reactionOut{
  to{transform:translate(-50%,-50%) scale(0) rotate(180deg);opacity:0}
}
.reaction-pop__svg{width:100%!important;height:100%!important;display:block}
@media (max-width:480px){
  .reaction-pop{width:110px;height:110px}
}

/* Catch item exit animation */
.catch__item--gone{animation:catchPop .2s ease-out forwards!important}
@keyframes catchPop{
  to{transform:scale(1.4) rotate(15deg);opacity:0}
}

/* Coin burst animation */
.coin-burst{
  position:fixed;top:50%;left:50%;
  pointer-events:none;z-index:999;
}
.coin-float{
  position:absolute;font-size:1.5rem;
  animation:coinFly 1.4s cubic-bezier(.5,-0.5,.5,1.5) forwards;
}
@keyframes coinFly{
  0%{transform:translate(0,0) scale(0);opacity:0}
  20%{transform:translate(0,-20px) scale(1.4);opacity:1}
  100%{transform:translate(var(--dx,0),-180px) scale(.6);opacity:0}
}

/* =================================================================
   MEMORY MATCH GAME — 3D card flip
   ================================================================= */
.mem__stats{
  display:flex;justify-content:center;gap:var(--s-4);
  margin-bottom:var(--s-5);flex-wrap:wrap;
}
.mem__stat{
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--white);border:2px solid var(--indigo-100);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:700;color:var(--ink);
  box-shadow:var(--shadow-soft);font-size:var(--fs-base);
}
.mem__stat span{font-size:1.3rem}
.mem__stat strong{color:var(--indigo-deep)}

.mem__grid{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap:var(--s-3);max-width:560px;margin:0 auto;
  perspective:1000px;
}
@media (max-width:480px){
  .mem__grid{grid-template-columns:repeat(3, 1fr);gap:var(--s-2)}
}

.mem__card{
  aspect-ratio:1;background:transparent;
  border:none;padding:0;cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.34,1.4,.64,1);
  position:relative;
}
.mem__card:hover .mem__back{transform:scale(1.05)}
.mem__card--face{transform:rotateY(180deg)}
.mem__card[disabled]{cursor:default}

.mem__inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
}
.mem__back, .mem__front{
  position:absolute;inset:0;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform var(--t-base);
  text-align:center;padding:var(--s-2);
}
.mem__back{
  background:linear-gradient(135deg,var(--maroon),var(--maroon-deep));
  border:3px solid var(--maroon-deep);
  box-shadow:var(--shadow-card),inset 0 0 30px rgba(255,255,255,.12);
}
.mem__back::before{
  /* clean Islamic-style inset border — no icon */
  content:"";position:absolute;inset:8px;
  border:1.5px dashed rgba(255,255,255,.28);
  border-radius:calc(var(--r-lg) - 6px);
}

.mem__front{
  background:linear-gradient(135deg,#FFFFFF,#FAF5FF);
  border:3px solid var(--maroon-100);
  transform:rotateY(180deg);box-shadow:var(--shadow-pop);
  font-family:var(--font-display);
  font-weight:700;color:var(--ink);
  overflow:hidden;
}
.mem__front--img{
  background:#FAF3EC;
  border-color:var(--maroon-100);
  padding:0;
}
.mem__img{
  width:100%;height:100%;object-fit:contain;display:block;
  border-radius:calc(var(--r-lg) - 6px);
}
.mem__front--text{
  background:linear-gradient(135deg,#FCE7E9,#FBE3E6);
  border-color:var(--maroon);
  color:var(--maroon-deep);
  font-size:var(--fs-md);line-height:1.3;
}

.mem__card--matched .mem__front{
  background:linear-gradient(135deg,var(--emerald-soft),#A7F3D0);
  border-color:var(--success);
  animation:matchedGlow 1s ease-in-out;
  box-shadow:0 0 0 4px #10b98144, var(--shadow-pop);
}
@keyframes matchedGlow{
  0%{transform:rotateY(180deg) scale(1)}
  50%{transform:rotateY(180deg) scale(1.15);box-shadow:0 0 30px #10b981aa, 0 0 60px #fbbf2455}
  100%{transform:rotateY(180deg) scale(1)}
}
.mem__card--matched{animation:matchPulse .9s ease-out}
@keyframes matchPulse{
  0%,100%{filter:none}
  50%{filter:brightness(1.2) saturate(1.3)}
}

/* =================================================================
   CATCH THE BLESSINGS — falling items mini-game
   ================================================================= */
.catch{display:flex;flex-direction:column;gap:var(--s-4)}
.catch__hud{
  display:flex;justify-content:center;gap:var(--s-3);
  flex-wrap:wrap;
}
.catch__stat{
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-md);min-width:80px;justify-content:center;
  border:2px solid;
}
.catch__stat span{font-size:1.2rem}
.catch__stat--time{
  background:linear-gradient(135deg,#FEF3C7,#FBBF24);
  border-color:#F59E0B;color:#7C2D12;
  animation:pulse-time 1s ease-in-out infinite;
}
@keyframes pulse-time{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
.catch__stat--hits{
  background:linear-gradient(135deg,var(--emerald-soft),#A7F3D0);
  border-color:var(--success);color:var(--emerald-deep);
}
.catch__stat--miss{
  background:linear-gradient(135deg,var(--coral-50),#FECDD3);
  border-color:var(--error);color:var(--coral-deep);
}

.catch__arena{
  position:relative;width:100%;height:480px;max-height:60vh;
  background:
    radial-gradient(ellipse at top, #DBEAFE 0%, transparent 60%),
    linear-gradient(180deg, #BFDBFE 0%, #DDD6FE 50%, #FCE7F3 100%);
  border:3px solid var(--indigo-200);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:inset 0 -40px 60px -20px rgba(252,231,243,.5),
             inset 0 30px 60px -20px rgba(191,219,254,.5),
             var(--shadow-card);
}
/* Decorative clouds */
.catch__arena::before, .catch__arena::after{
  content:"☁️";position:absolute;font-size:2.5rem;
  opacity:.55;pointer-events:none;
  animation:cloudFloat 8s ease-in-out infinite;
}
.catch__arena::before{top:5%;left:8%;animation-delay:0s}
.catch__arena::after{top:15%;right:8%;animation-delay:2s;font-size:2rem}
@keyframes cloudFloat{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}

/* Overlay (start/end) */
.catch__overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  text-align:center;padding:var(--s-6);
  animation:fadeUp .4s ease-out;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.catch__big{font-size:5rem;margin-bottom:var(--s-3);animation:bobble 2s ease-in-out infinite}

/* Falling items */
.catch__item{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--white);border:3px solid;border-radius:var(--r-lg);
  padding:var(--s-2) var(--s-3);min-width:80px;
  cursor:pointer;
  animation-name:fallDown;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
  box-shadow:var(--shadow-card);
  transition:transform .15s ease;
  font-family:var(--font-display);font-weight:700;
  user-select:none;-webkit-user-select:none;
}
.catch__item:hover{transform:scale(1.1)}
.catch__item:active{transform:scale(.92)}
.catch__item--good{
  border-color:var(--success);color:var(--emerald-deep);
  background:linear-gradient(135deg,#FFFFFF,var(--emerald-soft));
}
.catch__item--bad{
  border-color:var(--error);color:var(--coral-deep);
  background:linear-gradient(135deg,#FFFFFF,var(--coral-50));
}
.catch__emoji{font-size:1.8rem;line-height:1}
.catch__label{font-size:.85rem;margin-top:2px}

@keyframes fallDown{
  from{top:-10%;transform:rotate(-5deg)}
  to{top:110%;transform:rotate(5deg)}
}

/* =================================================================
   LEARN MODAL — full educational content
   ================================================================= */
.learn-overlay{
  position:fixed;inset:0;z-index:1800;
  background:radial-gradient(circle at center, rgba(99,102,241,.55), rgba(30,27,75,.85));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-3);
  animation:mysteryIn .3s cubic-bezier(.34,1.4,.64,1) both;
}
.learn-overlay--exit{animation:mysteryOut .25s ease-out forwards}

.learn-modal{
  background:linear-gradient(180deg,#FFFFFF,var(--lavender));
  width:100%;max-width:760px;max-height:92vh;
  border-radius:var(--r-xl);
  display:flex;flex-direction:column;
  border:3px solid var(--indigo);
  box-shadow:0 30px 80px -16px rgba(0,0,0,.5);
  animation:boxBounceIn .5s cubic-bezier(.34,1.6,.64,1) both;
  overflow:hidden;
}

.learn-modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-5) var(--s-6);
  background:linear-gradient(135deg,var(--indigo-deep),var(--indigo-darker));
  color:var(--white);flex-shrink:0;
}
.learn-modal__title{
  display:flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);
}
.learn-modal__close{
  width:38px;height:38px;border-radius:var(--r-full);
  background:rgba(255,255,255,.15);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:800;
  transition:all var(--t-base);
}
.learn-modal__close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}

.learn-modal__body{
  flex:1;overflow-y:auto;padding:var(--s-5) var(--s-6);
  display:flex;flex-direction:column;gap:var(--s-4);
}

.learn-modal__foot{
  padding:var(--s-4) var(--s-6);
  border-top:2px solid var(--line-soft);
  display:flex;justify-content:center;
  background:var(--white);flex-shrink:0;
}

/* Learn cards — each section */
.learn-card{
  background:var(--white);border:2px solid var(--indigo-100);
  border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:var(--shadow-soft);
  animation:rise .4s var(--t-slow) both;
}
.learn-card:nth-child(2n){border-color:#FCE7F3;background:linear-gradient(135deg,#FFFFFF,#FFF1F2)}
.learn-card:nth-child(3n){border-color:#FEF3C7;background:linear-gradient(135deg,#FFFFFF,#FEF3C7)}
.learn-card:nth-child(4n){border-color:#A7F3D0;background:linear-gradient(135deg,#FFFFFF,#D1FAE5)}

.learn-card__head{
  display:flex;align-items:center;gap:var(--s-3);
  margin-bottom:var(--s-3);padding-bottom:var(--s-3);
  border-bottom:2px dashed var(--line);
}
.learn-card__icon{
  font-size:2rem;width:52px;height:52px;
  background:var(--lavender);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.learn-card__head h3{
  font-family:var(--font-display);font-weight:800;
  color:var(--ink);font-size:var(--fs-lg);
}
.learn-card__body{
  color:var(--ink);font-size:var(--fs-base);line-height:1.95;
  white-space:pre-line;
}
.learn-card__sub{
  font-family:var(--font-display);font-weight:700;
  color:var(--indigo-deep);font-size:var(--fs-md);
  margin:var(--s-3) 0 var(--s-2);
}
.learn-card__list{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding-right:var(--s-2);
}
.learn-card__list li{
  position:relative;padding:var(--s-2) var(--s-3) var(--s-2) var(--s-3);
  padding-right:var(--s-6);
  background:var(--white);border-radius:var(--r-sm);
  font-weight:500;color:var(--ink);
  border:1px solid var(--line-soft);
  font-size:var(--fs-base);line-height:1.7;
}
.learn-card__list li::before{
  content:"✿";position:absolute;right:var(--s-3);top:50%;
  transform:translateY(-50%);color:var(--coral);font-weight:800;
}

/* Verse styling within learn cards */
.learn-verse{
  background:linear-gradient(135deg,var(--cream),var(--amber-50));
  border:2px solid var(--amber);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5);margin:var(--s-3) 0;
  text-align:center;
}
.learn-verse__ar{
  font-family:var(--font-quran);
  font-size:var(--fs-lg);color:var(--ink);font-weight:400;
  line-height:2.2;margin-bottom:var(--s-2);
}
.learn-verse__src{
  font-size:var(--fs-sm);color:var(--coral-deep);
  font-weight:700;margin-bottom:var(--s-2);
}
.learn-verse__mean{
  font-size:var(--fs-sm);color:var(--muted);
  font-style:italic;line-height:1.7;
}

/* HUD Learn button */
.hud__learn{
  width:38px;height:38px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--amber),var(--amber-deep));
  color:var(--white);font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all var(--t-base);
  box-shadow:0 4px 10px -3px #fbbf2480;
}
.hud__learn:hover{transform:scale(1.1) rotate(-5deg)}

/* Landing CTA row (Learn + Play) */
.landing__cta-row{
  display:flex;gap:var(--s-3);justify-content:center;
  flex-wrap:wrap;width:100%;
}

@media (max-width:480px){
  .learn-modal__head{padding:var(--s-4)}
  .learn-modal__body{padding:var(--s-3)}
  .learn-card{padding:var(--s-4)}
  .learn-card__icon{width:42px;height:42px;font-size:1.5rem}
  .landing__cta-row .btn{width:100%}
}

/* =================================================================
   MYSTERY BOX (interstitial)
   ================================================================= */
.mystery{
  position:fixed;inset:0;z-index:2000;
  background:radial-gradient(circle at center, rgba(99,102,241,.6), rgba(30,27,75,.85));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-4);
  animation:mysteryIn .35s cubic-bezier(.34,1.4,.64,1) both;
}
.mystery--exit{animation:mysteryOut .25s ease-out forwards}
@keyframes mysteryIn{from{opacity:0}to{opacity:1}}
@keyframes mysteryOut{from{opacity:1}to{opacity:0;transform:scale(.95)}}

.mystery__box{
  background:linear-gradient(135deg,#FFFFFF,var(--cream));
  border-radius:var(--r-xl);
  padding:var(--s-8);max-width:480px;width:100%;
  text-align:center;position:relative;
  box-shadow:0 20px 60px -12px rgba(0,0,0,.5);
  border:4px solid var(--amber);
  animation:boxBounceIn .55s cubic-bezier(.34,1.6,.64,1) both;
}
@keyframes boxBounceIn{
  0%{transform:scale(0) rotate(-30deg);opacity:0}
  60%{transform:scale(1.1) rotate(8deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}

.mystery__box--closed .mystery__lid{
  font-size:7rem;display:block;margin-bottom:var(--s-4);
  animation:wiggle 1.6s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(251,191,36,.6));
}
@keyframes wiggle{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(6deg) translateY(-8px)}
}

.mystery__sparkle{
  position:absolute;font-size:1.8rem;
  animation:sparkleFloat 2s ease-in-out infinite;
}
.mystery__sparkle--1{top:20px;left:30px;animation-delay:0s}
.mystery__sparkle--2{top:30px;right:30px;animation-delay:.4s}
.mystery__sparkle--3{bottom:120px;right:50px;animation-delay:.8s}
@keyframes sparkleFloat{
  0%,100%{opacity:0;transform:scale(.5) translateY(0)}
  50%{opacity:1;transform:scale(1.2) translateY(-12px)}
}

.mystery__open-btn{
  font-size:var(--fs-lg);
  animation:btnPulse 1.4s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 4px 12px -4px var(--amber)}
  50%{box-shadow:0 8px 24px -4px var(--amber),0 0 0 8px #fbbf2433}
}

.mystery__box--open{
  animation:boxOpen .6s cubic-bezier(.34,1.6,.64,1) both;
}
@keyframes boxOpen{
  0%{transform:scale(.8) rotate(-2deg)}
  60%{transform:scale(1.08)}
  100%{transform:scale(1) rotate(0)}
}
.mystery__emoji{font-size:5rem;margin-bottom:var(--s-3);animation:bobble 2s ease-in-out infinite}
.mystery__title{
  font-family:var(--font-display);font-weight:800;
  color:var(--coral-deep);font-size:var(--fs-xl);margin-bottom:var(--s-3);
}
.mystery__text{
  color:var(--ink);font-size:var(--fs-md);line-height:1.85;
  margin-bottom:var(--s-4);font-weight:500;
}
.mystery__reward{
  display:inline-block;
  background:linear-gradient(135deg,#FEF3C7,#FBBF24);
  color:#7C2D12;font-weight:800;font-family:var(--font-display);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  border:2px solid #F59E0B;margin-bottom:var(--s-5);
  animation:coinPop .8s cubic-bezier(.34,1.6,.64,1);
}

/* =================================================================
   SCENE BANNER (day journey)
   ================================================================= */
.activity--scene{
  position:relative;overflow:hidden;
}
.activity--scene::before{
  content:"";position:absolute;top:0;left:0;right:0;height:120px;
  background:var(--scene-grad,linear-gradient(180deg,#FCE7F3,#FFFFFF));
  z-index:0;border-radius:var(--r-xl) var(--r-xl) 0 0;
  opacity:.55;
}
.activity--scene > *{position:relative;z-index:1}

/* Photographic scene background — full-bleed under the activity card */
.activity--has-bg::before{
  height:260px;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 75%,#fff 100%),
    var(--scene-bg) center/cover no-repeat;
  opacity:1;
}
@media (min-width:720px){
  .activity--has-bg::before{ height:340px; }
}

.scene-banner{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--white);border:2px solid var(--indigo-100);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  box-shadow:var(--shadow-soft);
  margin-bottom:var(--s-4);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  color:var(--ink);
  animation:rise .5s var(--t-slow) both;
}
.scene-banner__emoji{font-size:1.5rem;animation:bobble 3s ease-in-out infinite}
.scene-banner__label{color:var(--ink-soft)}

/* =================================================================
   GROWING FLOWER (verse activity)
   ================================================================= */
.grow-flower{
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,#DBEAFE 0%,#A7F3D0 100%);
  border:3px solid var(--emerald-soft);
  border-radius:var(--r-xl);
  padding:var(--s-4);margin-bottom:var(--s-5);
  position:relative;overflow:hidden;
}
.grow-flower::before{
  content:"☀️";position:absolute;top:8px;left:8px;font-size:1.8rem;
  animation:bobble 3s ease-in-out infinite;
}
.grow-flower::after{
  content:"☁️";position:absolute;top:8px;right:8px;font-size:1.5rem;
  opacity:.7;animation:float 6s ease-in-out infinite;
}
.grow-flower__svg{
  width:160px;height:200px;display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));
}
.grow-flower__progress{
  background:var(--white);border:2px solid var(--emerald);
  padding:var(--s-1) var(--s-4);border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:800;color:var(--emerald-deep);
  margin-top:var(--s-3);font-size:var(--fs-sm);
  box-shadow:var(--shadow-soft);
}
.grow-flower__sparkle{
  animation:sparkle 1.4s ease-in-out infinite;
  transform-origin:center;
}
@keyframes sparkle{
  0%,100%{opacity:0;transform:scale(0.6) rotate(0deg)}
  50%{opacity:1;transform:scale(1.2) rotate(20deg)}
}

/* =================================================================
   YOUSEF MASCOT (SVG)
   ================================================================= */
.hero__disc--yousef{padding:0;overflow:hidden;background:linear-gradient(135deg,#EEF2FF,#FFFBEB)}
.hero__yousef{width:88%;height:88%;display:block;margin:8% auto 0}
.mascot__avatar{padding:0;background:linear-gradient(135deg,#EEF2FF,#FFFBEB);overflow:hidden;border:2px solid var(--indigo-100)}
.mascot__svg{width:100%;height:100%;display:block}
.complete__hero{padding:0;background:linear-gradient(135deg,#FEF3C7,#FECDD3);overflow:visible;position:relative}
.complete__yousef{width:90%;height:90%;display:block;margin:5% auto 0;animation:bobble 3s ease-in-out infinite}

/* Home button (top left) */
.game-top__home{
  width:42px;height:42px;border-radius:var(--r-full);
  background:var(--indigo-50);color:var(--indigo-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;border:2px solid transparent;
  transition:all var(--t-base);flex-shrink:0;
}
.game-top__home:hover{background:var(--indigo);color:var(--white);transform:scale(1.05)}

/* Verse source label */
.verse__source{
  text-align:center;font-size:var(--fs-sm);color:var(--coral-deep);
  font-weight:700;margin-top:var(--s-3);
}

/* Classify — two-tap UX */
.classify__instruction{
  text-align:center;font-size:var(--fs-base);color:var(--indigo-deep);
  font-weight:700;padding:var(--s-3);background:var(--indigo-50);
  border-radius:var(--r-md);margin-bottom:var(--s-2);
  transition:all var(--t-base);
}
.classify__instruction--active{
  background:var(--amber);color:var(--ink);
  animation:pulse-glow 1.4s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 #fbbf2466}
  50%{box-shadow:0 0 0 8px #fbbf2400}
}
.classify__empty{
  width:100%;text-align:center;color:var(--emerald-deep);
  font-weight:700;padding:var(--s-2);
}

/* Selected item — strong highlight */
.cls-item--selected{
  border-color:var(--indigo-deep)!important;
  background:var(--amber)!important;color:var(--ink)!important;
  box-shadow:0 0 0 4px #fbbf2466,0 6px 20px -6px #fbbf2480!important;
  transform:scale(1.08);
}

/* Bin in waiting state — show as "drop target" */
.bin{cursor:default;transition:all var(--t-base)}
.bin--waiting{
  cursor:pointer;border-style:solid;
  animation:bin-pulse 1.6s ease-in-out infinite;
}
.bin--waiting:hover{
  transform:scale(1.03);box-shadow:0 8px 24px -6px #fbbf2466;
  border-color:var(--amber)!important;
}
@keyframes bin-pulse{
  0%,100%{box-shadow:0 0 0 0 #6366f133}
  50%{box-shadow:0 0 0 6px #6366f100}
}
.bin__hint{
  text-align:center;color:var(--amber-deep);font-weight:700;
  margin-top:var(--s-2);padding:var(--s-2);
  background:var(--amber-50);border-radius:var(--r-md);
  font-size:var(--fs-sm);animation:bobble 1s ease-in-out infinite;
}

/* Clickable garden spots */
.garden-spot--clickable{
  cursor:pointer;border:2px solid transparent;
  font-family:var(--font-display);font-weight:800;
  color:var(--muted-soft);font-size:.85rem;
  transition:all var(--t-base);
}
.garden-spot--clickable:hover{transform:scale(1.1);border-color:var(--indigo)}
.garden-spot--current.garden-spot--clickable{border-color:transparent}
.garden-spot__num{display:block;line-height:1}

/* Larger touch targets for kids */
.opt,.check,.match__card,.cls-item,.chalk-opt{min-height:54px}
.tf__btn{min-height:60px;font-size:var(--fs-lg)}

/* Make Next button extra obvious */
.btn--lg{font-size:var(--fs-lg)}
.nav .btn--primary,.nav .btn--amber{min-width:160px}

/* Selection + scrollbar */
::selection{background:var(--coral);color:var(--white)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--lavender)}
::-webkit-scrollbar-thumb{background:var(--indigo-200);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--indigo)}