/* ============================================================
   ILMU — Learn • Discover • Grow — Design System
   Playful, warm, mobile-first. TikTok/Duolingo energy.
   Brand palette: teal #2EA59E · coral #E7736F · purple #7F62B4
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  /* Brand core (Ilmu) */
  --teal:        #2EA59E;
  --teal-deep:   #1F7D74;
  --mint:        #69C3B2;
  --coral:       #E7736F;
  --coral-deep:  #d6534f;
  --orange:      #E7736F;
  --orange-deep: #d6534f;
  --sun:         #ffce3a;
  --grape:       #7F62B4;
  --grape-deep:  #5f4493;
  --pink:        #E7736F;
  --sky:         #4fb6ff;
  --ilmu-grad:   linear-gradient(120deg,#2EA59E 0%,#E7736F 55%,#7F62B4 100%);
  --ink:         #2c2243;
  --ink-soft:    #5b5170;
  --cloud:       #fff7ef;
  --paper:       #ffffff;

  /* Age-band themes (default = Explorer) */
  --c1: var(--teal);
  --c2: var(--orange);
  --accent: var(--sun);
  --bg-grad: radial-gradient(120% 120% at 0% 0%, #fff3e3 0%, #ffe9f3 45%, #e8fbf8 100%);
  --hero-grad: linear-gradient(135deg, #16c2b3 0%, #4fd6c9 60%, #ffce3a 130%);

  /* UI */
  --radius:   26px;
  --radius-l: 36px;
  --radius-s: 16px;
  --shadow:   0 14px 34px -12px rgba(44,34,67,.28);
  --shadow-lg:0 26px 60px -18px rgba(44,34,67,.40);
  --ring:     0 0 0 4px rgba(255,255,255,.7);

  --safe-bottom: max(env(safe-area-inset-bottom), 0px);
}

/* Theme: Explorer (5-7) — Nuri, teal */
[data-band="explorer"] {
  --c1:#2EA59E; --c2:#E7736F; --accent:#69C3B2;
  --bg-grad: radial-gradient(120% 120% at 0% 0%, #eafaf7 0%, #fdeef0 50%, #f2ecfb 100%);
  --hero-grad: linear-gradient(135deg,#2EA59E 0%,#69C3B2 55%,#E7736F 135%);
}
/* Theme: Adventurer (8-12) — Baraq, coral */
[data-band="adventurer"] {
  --c1:#E7736F; --c2:#2EA59E; --accent:#ffce3a;
  --bg-grad: radial-gradient(120% 120% at 100% 0%, #fdeef0 0%, #fff4e6 55%, #eafaf7 100%);
  --hero-grad: linear-gradient(135deg,#E7736F 0%,#f0938f 50%,#7F62B4 135%);
}
/* Theme: Pathfinder (13+) — Hikmah, purple */
[data-band="pathfinder"] {
  --c1:#7F62B4; --c2:#2EA59E; --accent:#E7736F;
  --bg-grad: radial-gradient(120% 120% at 0% 0%, #f2ecfb 0%, #eafaf7 55%, #fdeef0 100%);
  --hero-grad: linear-gradient(135deg,#7F62B4 0%,#9b80c9 50%,#2EA59E 135%);
}

/* ---------- Reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg-grad);
  overflow:hidden;            /* the app-shell owns all scrolling */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display { font-family:'Baloo 2',cursive; line-height:1.05; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img { display:block; max-width:100%; }
::selection { background:var(--accent); }

/* ---------- App Shell (phone frame on desktop) ----------
   The shell is a FIXED-HEIGHT box that owns all scrolling.
   Each .view scrolls inside it, so feed snap works on mobile + desktop. */
.app-shell {
  position:relative;
  width:100%;
  max-width:460px;
  height:100dvh;              /* fill the device on mobile */
  margin:0 auto;
  background:var(--bg-grad);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(44,34,67,.04);
}
@media (min-width:520px){
  body{ background:#15102a; display:flex; align-items:center; justify-content:center; padding:24px 0;
        background-image:radial-gradient(1200px 600px at 50% -10%, #2a1f4d 0%, #15102a 60%); }
  .app-shell{
    height:min(880px, calc(100vh - 48px)); border-radius:48px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 12px #0d0a1c, 0 0 0 13px #2a2547;
    overflow:hidden;
  }
  .app-shell::before{ /* notch */
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:140px; height:26px; background:#0d0a1c; border-radius:0 0 18px 18px; z-index:200;
  }
}

/* ---------- Floating blobs background ---------- */
.blobs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.app-shell .blobs{ position:absolute; }
.blob{ position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; animation:floaty 9s ease-in-out infinite; }
.blob.b1{ width:200px;height:200px; background:var(--c1); top:-60px; left:-50px; }
.blob.b2{ width:160px;height:160px; background:var(--c2); top:30%; right:-50px; animation-delay:-3s; }
.blob.b3{ width:120px;height:120px; background:var(--accent); bottom:18%; left:-40px; animation-delay:-5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-26px) scale(1.06);} }

/* ---------- Screen-host + views (internal scrolling) ---------- */
.screen-host{ position:absolute; inset:0; z-index:1; }

/* every view fills the shell; non-feed views scroll vertically inside it */
.view{
  display:none; position:absolute; inset:0; z-index:1;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:viewIn .42s cubic-bezier(.2,.9,.3,1.2);
}
.view::-webkit-scrollbar{ display:none; }
.view{ scrollbar-width:none; }
.view.active{ display:block; }
.view.chat-screen.active{ display:flex; }
/* content padding for scrolling card views (home, achievements) */
#view-home, #view-ach{ padding:0 18px calc(120px + var(--safe-bottom)); }
@keyframes viewIn{ from{ opacity:0; transform:translateY(14px) scale(.985);} to{ opacity:1; transform:none; } }

/* padded content area for Home / Game views */
.screen{ position:relative; z-index:1; padding:0 18px calc(120px + var(--safe-bottom)); min-height:100%; }
.screen.feed-screen{ padding:0; height:100%; }
.view.feed-screen{ overflow:hidden; }   /* feed manages its own inner scroll */

/* ---------- Top bar ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 4px 8px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:'Baloo 2'; font-weight:800; font-size:20px; color:var(--ink);}
.brand .logo{ width:38px;height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--hero-grad); color:#fff; font-size:20px; box-shadow:var(--shadow); }
.brand small{ display:block; font-family:'Nunito'; font-weight:700; font-size:10px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase; }
.pill{ display:inline-flex; align-items:center; gap:7px; background:var(--paper); padding:9px 14px; border-radius:999px;
  font-weight:800; font-size:14px; box-shadow:var(--shadow); }
.pill.streak{ color:var(--orange-deep); }
.pill.gems{ color:var(--grape-deep); }
.pill i{ font-size:15px; }

/* ---------- Hero greeting card ---------- */
.hero{
  position:relative; margin-top:8px; border-radius:var(--radius-l);
  background:var(--hero-grad); color:#fff; padding:22px 22px 24px; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hero::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120px 120px at 88% 18%, rgba(255,255,255,.35), transparent 70%); }
.hero .eyebrow{ font-weight:800; opacity:.9; font-size:13px; letter-spacing:.04em; }
.hero h1{ font-size:30px; margin:2px 0 4px; text-shadow:0 2px 0 rgba(0,0,0,.06); }
.hero p{ font-weight:700; opacity:.95; font-size:14px; max-width:62%; }
.hero .mentor-pop{
  position:absolute; right:-6px; bottom:-10px; width:138px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.25));
  animation:bobble 4s ease-in-out infinite;
}
@keyframes bobble{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-10px) rotate(2deg);} }

/* ---------- Big primary button ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Baloo 2'; font-weight:800; font-size:17px; color:#fff;
  background:var(--c2); padding:15px 22px; border-radius:18px; width:100%;
  box-shadow:0 6px 0 0 var(--orange-deep), var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 0 var(--orange-deep), var(--shadow); }
.btn.teal{ background:var(--c1); box-shadow:0 6px 0 0 var(--teal-deep), var(--shadow); }
.btn.teal:active{ box-shadow:0 2px 0 0 var(--teal-deep), var(--shadow); }
.btn.grape{ background:var(--grape); box-shadow:0 6px 0 0 var(--grape-deep), var(--shadow); }
.btn.grape:active{ box-shadow:0 2px 0 0 var(--grape-deep), var(--shadow); }
.btn.ghost{ background:rgba(255,255,255,.22); backdrop-filter:blur(6px); box-shadow:none; border:2px solid rgba(255,255,255,.5); }
.btn.sm{ width:auto; padding:11px 18px; font-size:15px; border-radius:14px; }

/* ---------- Section heads ---------- */
.sec-head{ display:flex; align-items:center; justify-content:space-between; margin:24px 4px 12px; }
.sec-head h2{ font-size:20px; display:flex; align-items:center; gap:8px; }
.sec-head a{ font-weight:800; font-size:13px; color:var(--c1); text-decoration:none; }

/* ---------- Cards ---------- */
.card{ background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }

/* Journey card */
.journey{ display:flex; gap:14px; align-items:center; position:relative; overflow:hidden; }
.journey .thumb{ width:74px;height:74px; border-radius:20px; flex:none; display:grid; place-items:center; font-size:30px; color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:var(--shadow); }
.journey .meta{ flex:1; min-width:0; }
.journey .tag{ font-size:11px; font-weight:800; color:var(--c2); letter-spacing:.06em; text-transform:uppercase; }
.journey h3{ font-size:18px; margin:1px 0 8px; }
.bar{ height:11px; border-radius:999px; background:#eee6f1; overflow:hidden; }
.bar > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c1),var(--accent));
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.06); transition:width 1s cubic-bezier(.2,.9,.3,1.2); }
.journey .pct{ font-weight:800; font-size:12px; color:var(--ink-soft); margin-top:5px; }
.journey .go{ width:46px;height:46px; border-radius:16px; flex:none; display:grid; place-items:center; color:#fff; font-size:18px;
  background:var(--c2); box-shadow:0 5px 0 var(--orange-deep); }
.journey .go:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--orange-deep); }

/* Curiosity prompts — horizontal scroll */
.hscroll{ display:flex; gap:12px; overflow-x:auto; padding:4px 4px 8px; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.prompt{ scroll-snap-align:start; flex:none; width:172px; border-radius:24px; padding:16px; color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--shadow); }
.prompt.p1{ background:linear-gradient(150deg,#ff6fa5,#ff8a3d); }
.prompt.p2{ background:linear-gradient(150deg,#4fb6ff,#8b5cf6); }
.prompt.p3{ background:linear-gradient(150deg,#22d3a8,#16c2b3); }
.prompt .q{ font-size:30px; }
.prompt h4{ font-size:16px; margin:8px 0 4px; }
.prompt p{ font-size:12px; font-weight:700; opacity:.92; }
.prompt .spark{ position:absolute; right:10px; top:10px; font-size:14px; opacity:.7; }

/* Subject grid */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tile{ background:var(--paper); border-radius:22px; padding:14px 10px; text-align:center; box-shadow:var(--shadow);
  transition:transform .12s ease; }
.tile:active{ transform:scale(.94); }
.tile .ic{ width:50px;height:50px;margin:0 auto 8px; border-radius:16px; display:grid; place-items:center; font-size:23px; color:#fff; }
.tile .name{ font-weight:800; font-size:13px; }
.tile .sub{ font-size:10px; font-weight:700; color:var(--ink-soft); }
.ic.s1{background:linear-gradient(135deg,#ff8a3d,#ff6fa5);}
.ic.s2{background:linear-gradient(135deg,#16c2b3,#4fd6c9);}
.ic.s3{background:linear-gradient(135deg,#8b5cf6,#4fb6ff);}
.ic.s4{background:linear-gradient(135deg,#22d3a8,#16c2b3);}
.ic.s5{background:linear-gradient(135deg,#ffce3a,#ff8a3d);}
.ic.s6{background:linear-gradient(135deg,#ff6fa5,#8b5cf6);}

/* Achievements strip */
.ach-row{ display:flex; gap:12px; overflow-x:auto; padding:4px; scrollbar-width:none; }
.ach-row::-webkit-scrollbar{ display:none; }
.medal{ flex:none; width:78px; text-align:center; }
.medal .disc{ width:70px;height:70px; border-radius:50%; display:grid; place-items:center; font-size:30px; color:#fff;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #ffce3a 60%, #f0a91e); box-shadow:var(--shadow), inset 0 -4px 0 rgba(0,0,0,.1);
  border:4px solid #fff; }
.medal.locked .disc{ background:#e9e2ef; color:#b9aecb; filter:grayscale(1); }
.medal small{ display:block; font-weight:800; font-size:10px; margin-top:5px; color:var(--ink-soft); }

/* ============================================================
   LEARNING FEED (TikTok style)
   ============================================================ */
.feed{ height:100%; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.feed::-webkit-scrollbar{ display:none; }
.slide{ position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; }
/* solid colour fallback that sits BEHIND the video (only seen while it loads) */
.slide .bg{ position:absolute; inset:0; z-index:0; }
.slide-grad-1{ background:linear-gradient(160deg,#2EA59E,#1F7D74 70%,#0a7a70); }
.slide-grad-2{ background:linear-gradient(160deg,#E7736F,#d6534f 70%,#b03c39); }
.slide-grad-3{ background:linear-gradient(160deg,#7F62B4,#5f4493 70%,#4a27a8); }
.slide-grad-4{ background:linear-gradient(160deg,#4fb6ff,#2f7ce0 70%,#1f5bb0); }
.slide-grad-5{ background:linear-gradient(160deg,#ff6fa5,#e84d8a 70%,#c12f6c); }

/* real autoplaying video fills the slide, ON TOP of the fallback gradient */
.slide-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:#000; }
/* legibility wash sits ABOVE the video but is fully transparent in the middle
   so the video is clearly visible; only darkens top & bottom for text. */
.vid-wash{ z-index:2; background:transparent !important; pointer-events:none; }
.vid-wash::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%); }

/* tap layer for play/pause */
.tap-layer{ position:absolute; inset:0; z-index:3; width:100%; height:100%; background:transparent; }
.play-badge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6);
  width:84px;height:84px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:30px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(4px); opacity:0; transition:.25s; }
.slide.paused .play-badge{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* sound toggle (top-right, global) */
.sound-toggle{ position:absolute; top:16px; right:16px; z-index:30; width:42px;height:42px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-size:16px; background:rgba(0,0,0,.4); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); }
.app-shell .sound-toggle{ position:absolute; }

/* floating fact bubble that pops in while watching — sits high, never over the caption */
.fact-pop{ position:absolute; z-index:5; top:74px; left:16px; right:70px; color:var(--ink);
  background:rgba(255,255,255,.96); border-radius:18px 18px 18px 4px; padding:11px 14px; font-weight:800; font-size:13.5px;
  box-shadow:var(--shadow-lg); display:flex; gap:9px; align-items:flex-start; transform:translateX(-120%); opacity:0;
  border:2px solid var(--accent); pointer-events:none; }
.fact-pop i{ color:var(--orange); margin-top:2px; }
.slide.show-fact .fact-pop{ animation:factIn .5s cubic-bezier(.2,.9,.3,1.4) forwards; }
@keyframes factIn{ to{ transform:translateX(0); opacity:1; } }

/* creator-style caption */
.slide .content{ position:relative; z-index:6; color:#fff; padding:0 84px 132px 18px; margin-top:auto; }
.creator{ display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.creator-ava{ width:34px;height:34px;border-radius:50%; border:2px solid #fff; background:#fff; object-fit:cover; }
.handle{ font-weight:900; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.kind-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.22); backdrop-filter:blur(8px);
  padding:5px 11px; border-radius:999px; font-weight:800; font-size:11px; border:1px solid rgba(255,255,255,.3); }
.caption{ font-weight:700; font-size:14px; line-height:1.35; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.caption b{ font-family:'Baloo 2'; font-weight:800; }
.hashtags{ font-weight:800; font-size:13px; margin-top:5px; opacity:.95; color:#bdfff6; text-shadow:0 1px 4px rgba(0,0,0,.4); }

/* side action rail */
.rail{ position:absolute; right:10px; bottom:140px; z-index:6; display:flex; flex-direction:column; gap:16px; align-items:center; }
.rail .act{ display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; }
.rail .act .ring{ width:48px;height:48px; border-radius:50%; display:grid; place-items:center; font-size:19px;
  background:rgba(0,0,0,.28); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28);
  transition:transform .12s ease; }
.rail .act:active .ring{ transform:scale(.84); }
.rail .act small{ font-weight:800; font-size:11px; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.rail .act.liked .ring{ background:var(--pink); border-color:var(--pink); transform:scale(1.05); }
/* spinning "audio disc" like tiktok */
.disc-spin{ width:46px;height:46px;border-radius:50%; border:3px solid rgba(255,255,255,.5); overflow:hidden;
  animation:spin 6s linear infinite; box-shadow:var(--shadow); margin-top:2px; }
.disc-spin img{ width:100%;height:100%; object-fit:cover; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* video scrub bar */
.vid-scrub{ position:absolute; left:0; right:0; bottom:0; z-index:7; height:3px; background:rgba(255,255,255,.2); }
.vid-scrub > span{ display:block; height:100%; width:0; background:#fff; }

/* progress dots at top of feed */
.feed-progress{ position:absolute; top:14px; left:14px; right:14px; z-index:6; display:flex; gap:5px; }
.feed-progress span{ flex:1; height:4px; border-radius:999px; background:rgba(255,255,255,.35); overflow:hidden; }
.feed-progress span.done{ background:#fff; }
.feed-progress span.cur::after{ content:""; display:block; height:100%; width:40%; background:#fff; border-radius:999px;
  animation:grow 1s ease forwards; }
@keyframes grow{ to{ width:100%; } }

/* "knowledge check coming" banner */
.checkpoint{ position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:#fff; padding:30px; }
.checkpoint .pulse{ font-size:80px; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
.checkpoint h2{ font-size:30px; margin:14px 0 6px; }
.checkpoint p{ font-weight:700; opacity:.95; max-width:280px; margin-bottom:22px; }

/* ============================================================
   MINI-GAME
   ============================================================ */
.game-wrap{ padding-top:14px; }
.game-head{ text-align:center; margin:8px 0 6px; }
.game-head .crumb{ font-weight:800; font-size:12px; color:var(--c1); letter-spacing:.08em; text-transform:uppercase; }
.game-head h2{ font-size:24px; margin-top:4px; }
.lives{ display:flex; justify-content:center; gap:6px; margin:10px 0 4px; font-size:18px; color:var(--pink); }
.qcard{ background:var(--paper); border-radius:var(--radius-l); box-shadow:var(--shadow-lg); padding:22px 18px; margin-top:14px; text-align:center; }
.qcard .mentor-mini{ width:64px; margin:-46px auto 6px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.18)); }
.qcard .ask{ font-size:13px; font-weight:800; color:var(--c2); }
.qcard .question{ font-family:'Baloo 2'; font-size:22px; margin:6px 0 4px; }

/* drag-match zone */
.match-target{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.drop{ aspect-ratio:1; border-radius:20px; border:3px dashed #d9cfe6; display:grid; place-items:center; font-size:32px;
  background:#faf6ff; position:relative; transition:.15s; }
.drop .label{ position:absolute; bottom:6px; font-size:11px; font-weight:800; color:var(--ink-soft); }
.drop.over{ border-color:var(--c1); background:#e9fffb; transform:scale(1.04); }
.drop.filled{ border-style:solid; border-color:var(--c1); }
.drop.correct{ animation:pop .4s ease; border-color:#22c55e; background:#e9fff0; }
@keyframes pop{ 0%{transform:scale(.8);} 60%{transform:scale(1.15);} 100%{transform:scale(1);} }

.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.chip{ padding:12px 16px; border-radius:16px; font-weight:800; font-size:17px; background:var(--paper);
  box-shadow:0 5px 0 #e5dcef, var(--shadow); touch-action:none; user-select:none; transition:transform .1s; }
.chip:active{ transform:scale(1.08) rotate(-2deg); }
.chip.used{ opacity:.25; pointer-events:none; }
.chip.dragging{ position:fixed; z-index:999; pointer-events:none; box-shadow:var(--shadow-lg); transform:scale(1.12) rotate(-3deg); }

/* tap-quiz options */
.options{ display:grid; gap:12px; margin-top:18px; }
.opt{ display:flex; align-items:center; gap:12px; background:var(--paper); border-radius:18px; padding:14px 16px; text-align:left;
  font-weight:800; font-size:16px; box-shadow:0 5px 0 #e5dcef, var(--shadow); transition:transform .1s; width:100%; }
.opt:active{ transform:scale(.97); }
.opt .key{ width:34px;height:34px;border-radius:12px; display:grid; place-items:center; background:#f1ebf8; color:var(--grape-deep); font-size:15px; flex:none; }
.opt.correct{ background:#e9fff0; box-shadow:0 5px 0 #b6f0c6; }
.opt.correct .key{ background:#22c55e; color:#fff; }
.opt.wrong{ background:#fff0f3; box-shadow:0 5px 0 #f6c2cf; animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }

/* result overlay */
.result{ position:absolute; inset:0; z-index:50; display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:var(--hero-grad); color:#fff; padding:30px; }
.result.show{ display:flex; animation:viewIn .4s ease; }
.result .big{ font-size:90px; animation:pop .5s ease; }
.result h2{ font-size:34px; margin:10px 0 4px; }
.result p{ font-weight:700; opacity:.95; margin-bottom:8px; }
.result .reward{ display:flex; gap:18px; margin:14px 0 24px; }
.result .reward div{ background:rgba(255,255,255,.2); border-radius:18px; padding:12px 18px; font-weight:900; font-size:20px;
  border:1px solid rgba(255,255,255,.3); }
.result .reward small{ display:block; font-size:11px; font-weight:800; opacity:.9; }

/* ---------- Bottom Nav ---------- */
.nav{ position:absolute; bottom:0; left:0; right:0; width:100%; z-index:100;
  padding:10px 14px calc(10px + var(--safe-bottom)); }
.nav-inner{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-radius:26px; box-shadow:var(--shadow-lg);
  display:flex; justify-content:space-around; align-items:center; padding:8px 6px; border:1px solid rgba(255,255,255,.6); }
.nav-btn{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink-soft); font-weight:800; font-size:10px;
  padding:6px 10px; border-radius:16px; transition:.18s; position:relative; }
.nav-btn i{ font-size:19px; }
.nav-btn.active{ color:var(--c1); }
.nav-btn.active .ico{ transform:translateY(-2px); }
.nav-btn.center{ }
.nav-btn.center .ico{ width:54px;height:54px; border-radius:20px; display:grid; place-items:center; color:#fff; font-size:24px;
  background:var(--hero-grad); box-shadow:0 8px 18px -4px var(--c1); margin-top:-26px; border:4px solid #fff; }
.nav-btn .ico{ transition:transform .18s; }

/* confetti */
.confetti{ position:fixed; top:-12px; width:10px;height:14px; z-index:9999; border-radius:2px; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(110vh) rotate(720deg); opacity:.9; } }

/* utility */
.center{ text-align:center; }
.mt{ margin-top:14px; } .mt2{ margin-top:24px; }
.muted{ color:var(--ink-soft); font-weight:700; }
.hidden{ display:none !important; }

/* ============================================================
   ILMU branding + new components
   ============================================================ */

/* Logo mark + wordmark */
.ilmu-mark{ display:block; }
.brand .logo{ width:32px;height:32px; background:#fff; border-radius:11px; display:grid; place-items:center;
  box-shadow:0 6px 14px -6px rgba(46,165,158,.6); }
.wordmark{ font-family:'Baloo 2',cursive; font-weight:800; font-size:24px; letter-spacing:-.5px; line-height:1; }
.wordmark .wm-i{ color:#2EA59E; } .wordmark .wm-l{ color:#69C3B2; }
.wordmark .wm-m{ color:#E7736F; } .wordmark .wm-u{ color:#7F62B4; }
.brand{ display:flex; align-items:center; gap:8px; }
.band-name{ color:var(--ink-soft); font-weight:800; font-size:11px; margin-left:-2px; }
.brand-tag{ text-align:center; letter-spacing:3px; font-weight:800; font-size:10px; color:var(--ink-soft);
  margin:22px 0 8px; opacity:.7; }
.brand-tag::before{ content:''; }

/* Age-band / mentor switcher */
.band-switch{ display:flex; gap:10px; padding:2px 2px 4px; }
.band-chip{ flex:1; background:#fff; border-radius:20px; padding:12px 6px 10px; text-align:center;
  box-shadow:var(--shadow); border:2.5px solid transparent; transition:.2s; position:relative; overflow:hidden; }
.band-chip img{ width:48px;height:48px; object-fit:contain; margin:0 auto 4px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
.band-chip .bc-name{ display:block; font-family:'Baloo 2',cursive; font-weight:800; font-size:14px; color:var(--ink); }
.band-chip .bc-age{ display:block; font-size:10px; font-weight:800; color:var(--ink-soft); }
.band-chip.on{ border-color:var(--chip); box-shadow:0 12px 24px -10px var(--chip); transform:translateY(-2px); }
.band-chip.on::after{ content:''; position:absolute; inset:0; background:var(--chip); opacity:.07; }

/* AI helper call-to-action */
.ai-helper-cta{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--ilmu-grad); color:#fff; border-radius:24px; padding:14px 16px; margin:6px 0 2px;
  box-shadow:0 16px 30px -14px rgba(127,98,180,.7); }
.ai-helper-cta img{ width:48px;height:48px; object-fit:contain; background:rgba(255,255,255,.22); border-radius:14px; padding:3px; }
.ai-helper-cta .txt{ flex:1; }
.ai-helper-cta .txt strong{ display:block; font-family:'Baloo 2',cursive; font-size:16px; }
.ai-helper-cta .txt span{ font-size:12px; opacity:.92; font-weight:700; }
.ai-helper-cta > i{ font-size:22px; opacity:.95; }

/* Parent CTA */
.parent-cta{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; margin-top:14px;
  background:#fff; border-radius:22px; padding:14px 16px; box-shadow:var(--shadow); border:1px solid rgba(46,165,158,.14); }
.parent-cta > i:first-child{ width:42px;height:42px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#2EA59E,#7F62B4); font-size:18px; }
.parent-cta .txt{ flex:1; }
.parent-cta .txt strong{ display:block; font-family:'Baloo 2',cursive; font-size:15px; }
.parent-cta .txt span{ font-size:11.5px; color:var(--ink-soft); font-weight:700; }
.parent-cta > i:last-child{ color:var(--ink-soft); }

/* "Ask mentor about this" in feed */
.ask-mentor{ margin-top:8px; display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:800; font-size:12.5px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4);
  padding:7px 12px; border-radius:14px; }

/* ============================================================
   CHAT / TALKING AVATAR
   ============================================================ */
.chat-screen{ flex-direction:column; background:var(--bg-grad); }
.chat-top{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(46,165,158,.12); }
.chat-title{ display:flex; align-items:center; gap:9px; flex:1; }
.chat-title img{ width:38px;height:38px; object-fit:contain; background:#fff; border-radius:12px; padding:2px; box-shadow:var(--shadow); }
.chat-title strong{ display:block; font-family:'Baloo 2',cursive; font-size:15px; }
.chat-title small{ color:var(--ink-soft); font-weight:700; font-size:11px; }
.speak-toggle.on{ color:var(--c1); }
.speak-toggle.off{ color:var(--ink-soft); opacity:.6; }

.chat-thread{ flex:1; overflow-y:auto; padding:16px 14px 6px; display:flex; flex-direction:column; gap:12px; }
.msg{ display:flex; gap:9px; max-width:88%; align-items:flex-end; }
.msg .av{ width:30px;height:30px; object-fit:contain; background:#fff; border-radius:10px; padding:2px; flex:none; box-shadow:var(--shadow); }
.msg .bubble{ padding:11px 14px; border-radius:18px; font-weight:700; font-size:14.5px; line-height:1.4;
  box-shadow:0 8px 18px -12px rgba(44,34,67,.4); }
.msg.bot .bubble{ background:#fff; color:var(--ink); border-bottom-left-radius:6px; }
.msg.me{ align-self:flex-end; flex-direction:row-reverse; }
.msg.me .bubble{ background:var(--c1); color:#fff; border-bottom-right-radius:6px; }
.msg.bot .bubble.speaking{ box-shadow:0 0 0 3px color-mix(in srgb, var(--c1) 35%, transparent); }
.typing{ display:inline-flex; gap:4px; }
.typing span{ width:7px;height:7px; border-radius:50%; background:var(--ink-soft); opacity:.5; animation:tdot 1s infinite; }
.typing span:nth-child(2){ animation-delay:.15s; } .typing span:nth-child(3){ animation-delay:.3s; }
@keyframes tdot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

.chat-starters{ display:flex; gap:8px; overflow-x:auto; padding:4px 14px 8px; scrollbar-width:none; }
.chat-starters::-webkit-scrollbar{ display:none; }
.starter{ flex:none; background:#fff; border:1px solid rgba(46,165,158,.2); color:var(--ink); font-weight:800; font-size:12.5px;
  padding:9px 14px; border-radius:16px; box-shadow:var(--shadow); white-space:nowrap; }

.chat-bar{ display:flex; align-items:center; gap:8px; padding:10px 12px calc(12px + var(--safe-bottom));
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-top:1px solid rgba(46,165,158,.12); }
.chat-bar input{ flex:1; border:none; background:#f2f0f7; border-radius:18px; padding:13px 16px; font-size:15px; font-weight:700;
  color:var(--ink); outline:none; }
.mic-btn,.send-btn{ width:46px;height:46px; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:17px; flex:none; }
.mic-btn{ background:linear-gradient(135deg,#2EA59E,#69C3B2); }
.mic-btn.live{ background:#E7736F; animation:micpulse 1s infinite; }
@keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(231,115,111,.5);} 50%{ box-shadow:0 0 0 10px rgba(231,115,111,0);} }
.send-btn{ background:var(--ilmu-grad); }
.mic-listening{ display:none; align-items:center; justify-content:center; gap:4px; padding:8px; font-weight:800; color:var(--c1); font-size:13px; }
.mic-listening.show{ display:flex; }
.mic-listening span{ width:4px; background:var(--c1); border-radius:3px; animation:wave .9s infinite ease-in-out; }
.mic-listening span:nth-child(1){height:10px;} .mic-listening span:nth-child(2){height:18px;animation-delay:.1s;}
.mic-listening span:nth-child(3){height:24px;animation-delay:.2s;} .mic-listening span:nth-child(4){height:16px;animation-delay:.3s;}
.mic-listening span:nth-child(5){height:10px;animation-delay:.4s;}
@keyframes wave{ 0%,100%{ transform:scaleY(.5);} 50%{ transform:scaleY(1.4);} }

/* ============================================================
   ACHIEVEMENTS SCREEN
   ============================================================ */
.ach-screen{ overflow-y:auto; padding-bottom:120px; }
.ach-screen .topbar strong{ font-family:'Baloo 2',cursive; }
.ach-hero{ text-align:center; padding:18px 16px 6px; }
.ach-star{ width:120px;height:120px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(from 0deg,#ffce3a,#E7736F,#7F62B4,#2EA59E,#ffce3a); color:#fff; font-size:48px;
  box-shadow:0 18px 40px -14px rgba(231,115,111,.6); position:relative; }
.ach-star::after{ content:''; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.ach-star i{ position:relative; z-index:1; color:#7F62B4; }
.ach-hero h2{ font-size:22px; } .ach-hero p{ color:var(--ink-soft); font-weight:700; }
.ach-tag{ display:inline-block; margin-top:8px; background:#fde9e6; color:#d6534f; font-weight:800; font-size:13px;
  padding:6px 16px; border-radius:14px; }
.ach-stats{ display:flex; gap:10px; padding:0 4px; }
.ach-stats > div{ flex:1; background:#fff; border-radius:18px; padding:14px; text-align:center; box-shadow:var(--shadow); }
.ach-stats b{ display:block; font-family:'Baloo 2',cursive; font-size:24px; color:var(--c1); }
.ach-stats small{ color:var(--ink-soft); font-weight:800; font-size:11px; }
.badge-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:2px 4px; }
.badge-coin{ text-align:center; }
.badge-coin span{ width:58px;height:58px; margin:0 auto 5px; display:grid; place-items:center; font-size:26px;
  background:linear-gradient(135deg,#fff,#fdeef0); border-radius:50%; box-shadow:var(--shadow); border:3px solid #fff; }
.badge-coin small{ font-size:9.5px; font-weight:800; color:var(--ink-soft); display:block; line-height:1.1; }
.badge-coin.locked span{ filter:grayscale(1); opacity:.55; }

/* ============================================================
   PARENT DASHBOARD
   ============================================================ */
.parent-screen{ overflow-y:auto; padding:0 14px 120px; background:var(--bg-grad); }
.parent-top{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  margin:0 -14px; padding-left:14px; padding-right:14px; border-bottom:1px solid rgba(46,165,158,.12); }
.parent-top strong{ font-family:'Baloo 2',cursive; font-size:16px; }
.parent-top strong i{ color:#7F62B4; }
.parent-card{ background:#fff; border-radius:22px; padding:16px; margin-top:14px; box-shadow:var(--shadow); }
.parent-card.summary{ background:linear-gradient(135deg,#f3eefb,#eafaf7); }
.pc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pc-head h3{ font-family:'Baloo 2',cursive; font-size:15px; display:flex; align-items:center; gap:8px; }
.pc-head h3 i{ color:var(--c1); } .pc-head span{ font-weight:800; font-size:12.5px; color:var(--ink-soft); }
.child-head{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.child-ava{ width:48px;height:48px; border-radius:16px; display:grid; place-items:center; color:#fff; font-family:'Baloo 2';
  font-size:22px; background:var(--ilmu-grad); }
.child-head strong{ display:block; font-family:'Baloo 2',cursive; font-size:17px; }
.child-head small{ color:var(--ink-soft); font-weight:700; font-size:12px; }
.bar.big{ height:12px; }
.parent-card .summary p, .parent-card.summary p{ font-weight:700; line-height:1.5; color:var(--ink); font-size:13.5px; }
.week-chart{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; height:84px; margin-top:14px; }
.wc-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; justify-content:flex-end; }
.wc-bar{ width:60%; border-radius:7px 7px 4px 4px; background:linear-gradient(180deg,#2EA59E,#69C3B2); min-height:8px; }
.wc-col small{ font-size:10px; font-weight:800; color:var(--ink-soft); }
.skill-row{ display:flex; align-items:flex-start; gap:11px; margin:12px 0; }
.sk-ic{ width:38px;height:38px; border-radius:13px; display:grid; place-items:center; font-size:15px; color:#fff; flex:none; }
.sk-ic.strong{ background:linear-gradient(135deg,#2EA59E,#69C3B2); }
.sk-ic.grow{ background:linear-gradient(135deg,#E7736F,#ffb07a); }
.sk-meta{ flex:1; }
.sk-top{ display:flex; justify-content:space-between; font-weight:800; font-size:13.5px; margin-bottom:5px; }
.bar span.green{ background:linear-gradient(90deg,#2EA59E,#69C3B2); }
.bar span.amber{ background:linear-gradient(90deg,#E7736F,#ffc06a); }
.sk-note{ display:block; color:var(--ink-soft); font-weight:700; font-size:11.5px; margin-top:4px; }
.values-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.val-chip{ text-align:center; background:#faf8fd; border-radius:14px; padding:9px 4px; }
.val-stars{ color:#ffce3a; font-size:12px; letter-spacing:-1px; }
.val-chip small{ display:block; font-size:9px; font-weight:800; color:var(--ink-soft); margin-top:3px; line-height:1.1; }
.activity-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid rgba(44,34,67,.06); }
.activity-row:last-child{ border-bottom:none; }
.ar-ic{ width:38px;height:38px; border-radius:12px; display:grid; place-items:center; font-size:18px; background:#f3eefb; flex:none; }
.activity-row strong{ display:block; font-size:13px; font-weight:800; }
.activity-row small{ color:var(--ink-soft); font-weight:700; font-size:11px; }
.ctrl-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(44,34,67,.06); }
.ctrl-row:last-child{ border-bottom:none; }
.ctrl-row span{ font-weight:800; font-size:13.5px; display:flex; align-items:center; gap:9px; }
.ctrl-row span i{ color:var(--c1); width:18px; text-align:center; }
.ctrl-row b{ font-family:'Baloo 2',cursive; color:var(--c1); }
.switch{ position:relative; width:46px;height:26px; display:inline-block; }
.switch input{ display:none; }
.switch .slider{ position:absolute; inset:0; background:#d8d3e2; border-radius:20px; transition:.2s; }
.switch .slider::before{ content:''; position:absolute; width:20px;height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.switch input:checked + .slider{ background:var(--c1); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

/* ===================== Language picker ===================== */
.lang-btn{ cursor:pointer; border:none; font-weight:800; font-size:12px; letter-spacing:.3px; }
.lang-btn #langCode{ font-size:12px; }
.lang-sheet{ position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center;
  background:rgba(20,16,40,.45); backdrop-filter:blur(3px); padding:0 0 max(18px,var(--safe-bottom)); }
.lang-sheet.open{ display:flex; animation:langfade .18s ease; }
@keyframes langfade{ from{ opacity:0 } to{ opacity:1 } }
.lang-card{ width:min(440px,94vw); background:var(--paper,#fff); border-radius:22px 22px 18px 18px;
  padding:14px; box-shadow:0 -10px 40px rgba(0,0,0,.25); animation:langslide .24s cubic-bezier(.2,.9,.3,1.2); }
@keyframes langslide{ from{ transform:translateY(40px) } to{ transform:translateY(0) } }
.lang-card-head{ font-weight:800; font-size:15px; text-align:center; padding:6px 0 12px; color:var(--ink,#241b3a); }
.lang-opt{ display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; margin:6px 0;
  border:2px solid transparent; border-radius:14px; background:rgba(46,165,158,.07); font-size:16px; font-weight:700;
  color:var(--ink,#241b3a); cursor:pointer; transition:.15s; text-align:left; }
.lang-opt:hover{ background:rgba(46,165,158,.14); }
.lang-opt.on{ border-color:var(--c1,#2EA59E); background:rgba(46,165,158,.16); }
.lang-opt .lang-flag{ font-size:22px; line-height:1; }