/* ==========================================================================
   LearnTalkGo — design system + app styles
   Mobile-first. Desktop layout kicks in at 1024px.
   ========================================================================== */

:root{
  /* palette */
  --blue:#3b82f6; --blue-d:#2563eb;
  --green:#58cc02; --green-d:#46a302;
  --red:#ff4b4b;   --red-d:#e03e3e;
  --orange:#ff9600; --gold:#ffc800;
  --purple:#8b5cf6; --purple-d:#7c3aed;
  --pink:#ec4899;
  --cyan:#22d3ee;

  --ink:#1f2340;
  --ink-2:#5b6084;
  --ink-3:#9aa0c0;
  --line:#e6e8f5;
  --card:#ffffff;
  --bg:#f2f5ff;
  --bg-2:#e8ecfb;

  /* 8px grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px;

  --shadow:0 4px 0 rgba(31,35,64,.12), 0 8px 24px rgba(31,35,64,.10);
  --shadow-sm:0 2px 0 rgba(31,35,64,.10), 0 4px 12px rgba(31,35,64,.08);
  --shadow-lg:0 10px 30px rgba(31,35,64,.16);

  /* Toast needs its own pair. It must NOT reuse --ink as a background:
     --ink inverts in dark mode, which turned the toast white-on-white. */
  --toast-bg:#1f2340; --toast-fg:#ffffff;

  --spring:cubic-bezier(.34,1.56,.64,1);
  --dur:280ms;

  --font:'Baloo 2','Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-ui:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --safe-b:env(safe-area-inset-bottom,0px);
  --tab-h:76px;
}

html[data-theme="dark"]{
  --ink:#eef0ff; --ink-2:#b3b8dd; --ink-3:#7b81ab;
  --line:#2c3157; --card:#1e2242; --bg:#12142b; --bg-2:#191d3a;
  --toast-bg:#3b4278; --toast-fg:#ffffff;   /* raised, still white-on-dark */
  --shadow:0 4px 0 rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45);
  --shadow-sm:0 2px 0 rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 10px 30px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-ui); color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:var(--font); margin:0; letter-spacing:-.01em}
button{font-family:inherit; color:inherit; border:0; background:none; cursor:pointer}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:12px}

html[data-fontsize="large"]{font-size:19px}
html[data-fontsize="large"] body{font-size:1.05rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation:none !important; transition:none !important;
}

/* ============================ App shell =================================== */
.app{
  position:relative; min-height:100dvh; max-width:520px; margin:0 auto;
  background:var(--bg);
}
.screen{display:none; padding-bottom:calc(var(--tab-h) + var(--safe-b) + 16px)}
.screen.is-active{display:block; animation:fadeUp var(--dur) var(--spring)}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--s2) 10px; background:var(--card);
  border-bottom:1px solid var(--line);
}
html[data-theme="dark"] .topbar{background:var(--card)}
.brand{font-family:var(--font); font-weight:800; font-size:26px; letter-spacing:-.5px}
.brand .b1{color:var(--blue)} .brand .b2{color:var(--orange)} .brand .b3{color:var(--green)}
.iconbtn{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font-size:20px; color:var(--ink-2); transition:transform 160ms var(--spring), background 160ms;
}
.iconbtn:active{transform:scale(.9); background:var(--bg-2)}

/* ---- hero card ---- */
.hero{
  margin:var(--s2); padding:var(--s2); border-radius:var(--r-lg);
  background:linear-gradient(150deg,#dff1ff,#f4e9ff 60%,#ffeef6);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
html[data-theme="dark"] .hero{background:linear-gradient(150deg,#243056,#2c2450 60%,#3a2444)}
.hero-row{display:flex; gap:var(--s2); align-items:center}
.mascot-ring{
  width:76px; height:76px; flex:0 0 76px; border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#fff,#e8f3ff);
  border:4px solid #fff; box-shadow:var(--shadow-sm);
  display:grid; place-items:center; font-size:40px; position:relative;
}
html[data-theme="dark"] .mascot-ring{background:radial-gradient(circle at 40% 30%,#3a4272,#252b52); border-color:#3a4272}
.mascot-ring .m{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.hero h2{font-size:22px; line-height:1.2}
.hero p{margin:2px 0 0; color:var(--ink-2); font-size:14px; font-weight:600}

.hero-stats{display:flex; gap:var(--s1); margin-top:var(--s2)}
.pill{
  flex:1; display:flex; align-items:center; gap:8px; background:var(--card);
  border-radius:999px; padding:8px 12px; box-shadow:var(--shadow-sm); min-width:0;
}
.pill .em{font-size:20px; flex:0 0 auto}
.pill .lbl{font-size:12px; font-weight:800; color:var(--ink-2); line-height:1.1}
.pill .val{font-size:15px; font-weight:800; line-height:1.15}
.xpbar{height:8px; border-radius:99px; background:var(--bg-2); overflow:hidden; margin-top:3px}
.xpbar > i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width 700ms var(--spring)}
.addbtn{
  width:30px; height:30px; border-radius:50%; background:var(--green); color:#fff;
  font-size:20px; font-weight:800; display:grid; place-items:center; box-shadow:0 3px 0 var(--green-d);
}
.addbtn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--green-d)}

/* ---- language switcher ---- */
.langbar{display:flex; gap:8px; padding:0 var(--s2); align-items:center}
.langpick{
  display:inline-flex; align-items:center; gap:8px; background:var(--card);
  padding:10px 14px; border-radius:999px; box-shadow:var(--shadow-sm);
  font-weight:800; font-size:15px;
}
.langpick .fl{font-size:20px}
.langpick .cv{color:var(--ink-3); font-size:12px}
.langmenu{
  position:absolute; z-index:60; margin-top:6px; background:var(--card); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:6px; display:none; min-width:190px;
}
.langmenu.open{display:block; animation:pop 220ms var(--spring)}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(-6px)}to{opacity:1; transform:none}}
.langmenu button{display:flex; width:100%; gap:10px; align-items:center; padding:11px 12px; border-radius:14px; font-weight:800; font-size:15px}
.langmenu button:hover{background:var(--bg-2)}

/* ============================ World map =================================== */
.mapwrap{
  position:relative; margin:var(--s2); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); background:#57c4e5; aspect-ratio:3/4;
}
.mapwrap svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.shimmer{animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.35; transform:translateX(0)}50%{opacity:.7; transform:translateX(10px)}}
.cloud{animation:drift 40s linear infinite; opacity:.85}
.cloud.c2{animation-duration:56s; animation-delay:-14s}
.cloud.c3{animation-duration:70s; animation-delay:-30s}
@keyframes drift{from{transform:translateX(-30%)}to{transform:translateX(130%)}}
.sway{transform-origin:center bottom; animation:sway 5s ease-in-out infinite}
.sway.s2{animation-delay:-1.6s} .sway.s3{animation-delay:-3.1s}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

.nodes{position:absolute; inset:0}
.node{
  position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column;
  align-items:center; gap:4px; width:112px;
}
.node .dot{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:19px; color:#fff; border:4px solid #fff;
  background:linear-gradient(180deg,#4aa3f5,#2f7fe0); box-shadow:0 4px 0 rgba(0,0,0,.18);
  transition:transform 200ms var(--spring);
}
.node.done .dot{background:linear-gradient(180deg,#7ee04a,#4caf13)}
.node.locked .dot{background:linear-gradient(180deg,#b9c0d8,#98a0bd); color:#f3f5ff}
.node.current .dot{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1); box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 0 rgba(255,255,255,.7)}50%{transform:scale(1.08); box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 12px rgba(255,255,255,0)}}
.node:active .dot{transform:scale(.92)}
.node .plate{
  background:var(--card); border-radius:14px; padding:5px 10px; box-shadow:var(--shadow-sm);
  text-align:center; max-width:112px;
}
.node .plate b{display:block; font-size:12.5px; font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stars{font-size:11px; letter-spacing:1px; color:var(--gold)}
.stars .off{color:var(--ink-3); opacity:.45}
.node.locked .plate{opacity:.72}
.node .lock{font-size:16px}

.chest{position:absolute; right:6%; bottom:9%; font-size:34px; animation:bob 4s ease-in-out infinite; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}

/* ---- continue CTA ---- */
.cta{
  /* always reachable: rides just above the tab bar while the map scrolls */
  position:sticky; bottom:calc(var(--tab-h) + var(--safe-b) + 8px); z-index:30;
  display:flex; align-items:center; gap:12px; margin:0 var(--s2) var(--s2);
  background:var(--green); color:#fff; padding:16px; border-radius:var(--r);
  box-shadow:0 5px 0 var(--green-d); font-weight:900; font-size:17px; width:calc(100% - var(--s3));
  transition:transform 140ms var(--spring), box-shadow 140ms;
}
.cta:active{transform:translateY(4px); box-shadow:0 1px 0 var(--green-d)}
.cta .go{margin-left:auto; font-size:20px}
.cta .txt b{display:block; font-size:17px; line-height:1.2}
.cta .txt small{display:block; font-size:12.5px; font-weight:800; opacity:.85; margin-top:1px}

/* ============================ Tab bar ==================================== */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:50; max-width:520px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
  background:var(--card); border-top:1px solid var(--line);
  padding:8px 4px calc(8px + var(--safe-b));
}
.tab{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border-radius:16px; color:var(--ink-3); font-size:11px; font-weight:800}
.tab .ti{font-size:23px; transition:transform 220ms var(--spring); filter:grayscale(.55) opacity(.75)}
.tab.is-active{color:var(--purple)}
.tab.is-active .ti{transform:translateY(-3px) scale(1.16); filter:none}

/* ============================ Lesson ===================================== */
#lesson{
  position:fixed; inset:0; z-index:100; background:var(--card); display:none;
  max-width:520px; margin:0 auto; flex-direction:column;
}
#lesson.open{display:flex; animation:slideUp 320ms var(--spring)}
@keyframes slideUp{from{transform:translateY(24px); opacity:0}to{transform:none; opacity:1}}

.lhead{display:flex; align-items:center; gap:12px; padding:14px var(--s2) 8px}
.lbar{flex:1; height:14px; border-radius:99px; background:var(--bg-2); overflow:hidden}
.lbar > i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),#8fe34a); transition:width 420ms var(--spring)}
.combo{font-weight:900; color:var(--orange); font-size:13px; white-space:nowrap}
.hearts{font-weight:900; color:var(--red); font-size:14px; white-space:nowrap}
.lbody{flex:1; overflow-y:auto; padding:var(--s2) var(--s2) 180px; text-align:center}
.lq{font-size:24px; font-weight:900; font-family:var(--font); margin-bottom:var(--s3)}

.bubblewrap{display:flex; align-items:flex-end; gap:10px; margin:0 auto var(--s3); max-width:420px}
.speaker{
  flex:0 0 86px; height:86px; border-radius:26px; display:grid; place-items:center; font-size:44px;
  background:linear-gradient(160deg,#e7ecff,#dbe4ff); box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .speaker{background:linear-gradient(160deg,#2b3260,#242a52)}
.speaker .m{animation:bob 3s ease-in-out infinite}
.bubble{
  position:relative; flex:1; background:var(--card); border:3px solid var(--line);
  border-radius:24px; padding:16px 14px; text-align:center; box-shadow:var(--shadow-sm);
}
.bubble::after{content:''; position:absolute; left:-12px; bottom:22px; width:0; height:0;
  border:10px solid transparent; border-right-color:var(--line)}
.bubble .tt{font-family:var(--font); font-size:26px; font-weight:800; line-height:1.15; color:var(--blue-d)}
html[data-theme="dark"] .bubble .tt{color:#8ab4ff}
.bubble .rr{font-size:13px; color:var(--ink-3); font-weight:700; margin-top:2px}
.bubble .ee{font-size:15px; color:var(--ink-2); font-weight:700; margin-top:6px}
.playbtn{
  position:absolute; right:-10px; bottom:-10px; width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:20px; display:grid; place-items:center;
  box-shadow:0 4px 0 var(--blue-d);
}
.playbtn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--blue-d)}
.playbtn.speaking{animation:ring 1s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 4px 0 var(--blue-d),0 0 0 0 rgba(59,130,246,.5)}50%{box-shadow:0 4px 0 var(--blue-d),0 0 0 14px rgba(59,130,246,0)}}

/* mic */
.mic{
  width:132px; height:132px; border-radius:50%; margin:var(--s2) auto 8px; display:grid; place-items:center;
  font-size:52px; color:#fff; background:linear-gradient(160deg,#c04af0,#ff4bb0);
  box-shadow:0 8px 0 #9a2fc4, 0 14px 30px rgba(192,74,240,.4);
  transition:transform 160ms var(--spring);
}
.mic:active{transform:translateY(5px) scale(.97)}
.mic.listening{animation:mic 1.2s ease-in-out infinite}
@keyframes mic{0%,100%{box-shadow:0 8px 0 #9a2fc4,0 0 0 0 rgba(255,75,176,.55)}50%{box-shadow:0 8px 0 #9a2fc4,0 0 0 26px rgba(255,75,176,0)}}
.mic-label{font-weight:900; color:var(--purple); font-size:17px}
.heard{margin-top:10px; font-weight:800; color:var(--ink-2); min-height:22px; font-size:15px}

/* choices */
.choices{display:grid; gap:12px; max-width:420px; margin:0 auto}
.choice{
  padding:16px; border-radius:var(--r); background:var(--card); border:2px solid var(--line);
  box-shadow:0 4px 0 var(--line); font-weight:800; font-size:17px; text-align:center;
  transition:transform 140ms var(--spring), border-color 140ms, background 140ms;
}
.choice:active{transform:translateY(3px); box-shadow:0 1px 0 var(--line)}
.choice.sel{border-color:var(--blue); background:rgba(59,130,246,.09); box-shadow:0 4px 0 var(--blue-d)}
.choice.good{border-color:var(--green); background:rgba(88,204,2,.14); box-shadow:0 4px 0 var(--green-d)}
.choice.bad{border-color:var(--red); background:rgba(255,75,75,.12); box-shadow:0 4px 0 var(--red-d)}
.choice .sub{display:block; font-size:12.5px; color:var(--ink-3); font-weight:700; margin-top:2px}

/* An option that's been ruled out: struck through, dimmed, no longer tappable. */
.choice.struck{
  border-color:var(--red); background:rgba(255,75,75,.07); box-shadow:none;
  opacity:.5; pointer-events:none; transform:none;
}
.choice.struck .ctext{text-decoration:line-through; text-decoration-thickness:2px}
.choice.struck .say{display:none}
.choice.struck::after{
  content:'✕'; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--red); font-weight:900; font-size:18px;
}
.choice:disabled{cursor:default}

/* between-strike nudge */
.strikebar{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.strikebar .fm{font-size:30px}
.strikebar b{display:block; font-family:var(--font); font-size:17px; color:var(--orange)}
.strikebar small{color:var(--ink-2); font-weight:800; font-size:13.5px}
.shake{animation:shake 380ms ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}
/* The speaker badge is a separate tap target: it plays the phrase and
   deliberately does NOT select the answer. */
.choice.has-say{position:relative; padding-right:58px}
.choice .ctext{display:block}
.choice .say{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-size:17px; opacity:.55; background:var(--bg-2); cursor:pointer;
}
.choice .say:hover,.choice .say:focus-visible{opacity:1}
.choice.speaking .say{opacity:1; animation:spk .9s ease-in-out infinite}
@keyframes spk{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.18)}}
.lq .hint{display:block; font-family:var(--font-ui); font-size:13.5px; font-weight:800; color:var(--ink-3); margin-top:4px}

/* word bank */
.answerline{
  min-height:66px; border-top:3px dashed var(--line); border-bottom:3px dashed var(--line);
  display:flex; flex-wrap:wrap; gap:8px; padding:12px 6px; justify-content:center; margin-bottom:var(--s3);
}
.bank{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.word{
  padding:11px 15px; border-radius:16px; background:var(--card); border:2px solid var(--line);
  box-shadow:0 3px 0 var(--line); font-weight:800; font-size:16px;
  transition:transform 120ms var(--spring), opacity 120ms;
}
.word:active{transform:translateY(2px)}
.word.used{opacity:.25; pointer-events:none}

/* feedback footer */
.lfoot{
  position:absolute; left:0; right:0; bottom:0; padding:var(--s2) var(--s2) calc(var(--s2) + var(--safe-b));
  background:var(--card); border-top:1px solid var(--line);
}
.lfoot.good{background:#e8f9d5; border-top-color:#c9ee9c}
.lfoot.bad{background:#ffe9e9; border-top-color:#ffc4c4}
html[data-theme="dark"] .lfoot.good{background:#1f3a12} html[data-theme="dark"] .lfoot.bad{background:#42191c}
.fbrow{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.fbrow .fm{font-size:34px; animation:cheer 700ms var(--spring)}
@keyframes cheer{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
.fbrow b{font-family:var(--font); font-size:19px; display:block}
.fbrow small{color:var(--ink-2); font-weight:700; font-size:13.5px}
.rewards{margin-left:auto; display:flex; gap:8px; font-weight:900; white-space:nowrap; font-size:14px}
.btn{
  display:block; width:100%; padding:16px; border-radius:var(--r); font-weight:900; font-size:17px;
  color:#fff; background:var(--green); box-shadow:0 5px 0 var(--green-d);
  transition:transform 130ms var(--spring), box-shadow 130ms;
}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--green-d)}
.btn.blue{background:var(--blue); box-shadow:0 5px 0 var(--blue-d)}
.btn.blue:active{box-shadow:0 1px 0 var(--blue-d)}
.btn.purple{background:var(--purple); box-shadow:0 5px 0 var(--purple-d)}
.btn.purple:active{box-shadow:0 1px 0 var(--purple-d)}
.btn.ghost{background:transparent; color:var(--ink-2); box-shadow:none; border:2px solid var(--line)}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ============================ Generic sections =========================== */
.sec{padding:0 var(--s2)}
.sec h3{font-size:19px; margin:var(--s3) 0 var(--s2)}
.card{background:var(--card); border-radius:var(--r-lg); padding:var(--s2); box-shadow:var(--shadow-sm); margin-bottom:12px}
.row{display:flex; align-items:center; gap:12px}
.row .em{font-size:28px; flex:0 0 auto}
.row b{font-size:15.5px; display:block}
.row small{color:var(--ink-2); font-size:13px; font-weight:700}
.tag{margin-left:auto; font-weight:900; font-size:13px; color:var(--orange); white-space:nowrap}
.progress{height:10px; border-radius:99px; background:var(--bg-2); overflow:hidden; margin-top:8px}
.progress > i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--orange),var(--gold)); transition:width 600ms var(--spring)}

.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.tile{
  aspect-ratio:1; border-radius:var(--r); background:var(--card); box-shadow:var(--shadow-sm);
  display:grid; place-items:center; font-size:34px; position:relative; border:3px solid transparent;
  transition:transform 160ms var(--spring);
}
.tile:active{transform:scale(.94)}
.tile.sel{border-color:var(--green)}
.tile.sel::after{content:'✓'; position:absolute; right:-6px; bottom:-6px; width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; font-size:14px; display:grid; place-items:center; font-weight:900}
.tile.locked{color:var(--ink-3); background:var(--bg-2)}
.tile .nm{position:absolute; bottom:5px; font-size:10.5px; font-weight:800; color:var(--ink-2)}
.tile .pr{position:absolute; top:5px; right:7px; font-size:11px; font-weight:900; color:var(--orange)}

.segs{display:flex; gap:6px; background:var(--bg-2); padding:5px; border-radius:999px; margin-bottom:var(--s2)}
.seg{flex:1; padding:9px; border-radius:999px; font-weight:800; font-size:14px; color:var(--ink-2); text-align:center}
.seg.on{background:var(--purple); color:#fff; box-shadow:var(--shadow-sm)}

/* profile header */
.phead{
  background:linear-gradient(160deg,var(--purple),#a855f7 60%,var(--pink));
  border-radius:0 0 var(--r-xl) var(--r-xl); padding:var(--s2) var(--s2) var(--s3);
  color:#fff; position:relative; overflow:hidden; text-align:center;
}
.phead .spark{position:absolute; font-size:16px; opacity:.5; animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2; transform:scale(.8)}50%{opacity:.85; transform:scale(1.15)}}
.pavatar{
  width:118px; height:118px; margin:var(--s2) auto 10px; border-radius:32px; border:5px solid #fff;
  background:radial-gradient(circle at 40% 30%,#fff,#e9f5ff); display:grid; place-items:center; font-size:62px;
  box-shadow:var(--shadow-lg); position:relative;
}
.pavatar .edit{position:absolute; right:-8px; bottom:-8px; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--purple); display:grid; place-items:center; font-size:15px; box-shadow:var(--shadow-sm)}
.phead h2{font-size:26px}
/* Background is hard-coded white, so the text colour must be too — var(--ink)
   inverts in dark mode and made this read white-on-white. */
.lvlchip{display:inline-flex; gap:6px; align-items:center; background:#fff; color:#1f2340; padding:5px 14px; border-radius:999px; font-weight:900; font-size:14px; margin-top:6px}
.phead .xpbar{background:rgba(255,255,255,.3); height:10px; max-width:280px; margin:12px auto 4px}
.phead .xpbar > i{background:linear-gradient(90deg,var(--gold),#ffe066)}
.phead .xptxt{font-size:12px; font-weight:800; opacity:.9}
.statrow{
  display:grid; grid-template-columns:repeat(3,1fr); background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--shadow); margin:-20px var(--s2) var(--s2); padding:var(--s2) 0; position:relative; z-index:2;
}
.statrow div{text-align:center; border-right:1px solid var(--line)}
.statrow div:last-child{border-right:0}
.statrow .v{font-size:20px; font-weight:900; font-family:var(--font)}
.statrow .k{font-size:11.5px; color:var(--ink-2); font-weight:800}

/* toast / overlays */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tab-h) + 20px); transform:translateX(-50%) translateY(20px);
  background:var(--toast-bg); color:var(--toast-fg); box-shadow:var(--shadow-lg);
  padding:12px 18px; border-radius:999px; font-weight:800; font-size:14px;
  opacity:0; pointer-events:none; transition:all 300ms var(--spring); z-index:200; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%)}
/* keep achievement toasts clear of an open celebration sheet */
.sheet.open ~ .toast{bottom:auto; top:24px; transform:translateX(-50%) translateY(-20px)}
.sheet.open ~ .toast.show{transform:translateX(-50%)}

.sheet{position:fixed; inset:0; z-index:150; display:none; align-items:flex-end; justify-content:center; background:rgba(20,22,45,.55); backdrop-filter:blur(3px)}
.sheet.open{display:flex; animation:fadeUp 220ms ease}
.sheet-in{background:var(--card); width:100%; max-width:520px; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--s3) var(--s2) calc(var(--s3) + var(--safe-b)); animation:slideUp 320ms var(--spring); max-height:88dvh; overflow-y:auto}
.grab{width:44px; height:5px; border-radius:99px; background:var(--line); margin:-10px auto var(--s2)}
.sheet h3{text-align:center; font-size:22px; margin-bottom:6px}
.sheet .sub{text-align:center; color:var(--ink-2); font-weight:700; font-size:14px; margin-bottom:var(--s2)}
.bigmascot{font-size:80px; text-align:center; animation:cheer 800ms var(--spring)}

.switchrow{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.switchrow:last-child{border-bottom:0}
.switchrow b{font-size:15px}
.sw{margin-left:auto; width:52px; height:30px; border-radius:99px; background:var(--line); position:relative; transition:background 200ms; flex:0 0 auto}
.sw::after{content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform 220ms var(--spring)}
.sw.on{background:var(--green)}
.sw.on::after{transform:translateX(22px)}

/* confetti */
#confetti{position:fixed; inset:0; pointer-events:none; z-index:300}
.cf{position:absolute; width:10px; height:14px; border-radius:2px; animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg); opacity:0}}
.coinfly{position:fixed; z-index:300; font-size:24px; pointer-events:none; animation:fly 850ms cubic-bezier(.4,0,.5,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(.5); opacity:0}}

/* ============================ Desktop ==================================== */
.deskonly{display:none}
@media (min-width:1024px){
  body{background:
    radial-gradient(1200px 600px at 15% -10%, #dbeafe 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #fae8ff 0%, transparent 60%),
    var(--bg);
    background-attachment:fixed;
  }
  html[data-theme="dark"] body{background:
    radial-gradient(1200px 600px at 15% -10%, #1e2a58 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #34204f 0%, transparent 60%), var(--bg)}

  .deskonly{display:block}
  .app{
    max-width:1240px; display:grid; grid-template-columns:248px minmax(0,520px) 1fr;
    gap:var(--s3); padding:var(--s3) var(--s3) var(--s5); background:transparent; overflow:visible;
    align-items:start;
  }
  .screen{padding-bottom:0}
  .app > .topbar{display:none}

  /* left rail */
  .rail{
    position:sticky; top:var(--s3); background:var(--card); border-radius:var(--r-lg);
    padding:var(--s2); box-shadow:var(--shadow-sm);
  }
  .rail .brand{display:block; font-size:28px; padding:6px 8px var(--s2)}
  .rail .tab{flex-direction:row; gap:12px; justify-content:flex-start; padding:13px 14px; font-size:16px; border-radius:18px; margin-bottom:4px}
  .rail .tab .ti{font-size:24px}
  .rail .tab.is-active{background:rgba(139,92,246,.12)}
  .rail .tab:hover{background:var(--bg-2)}

  .center{min-width:0; background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow); overflow:hidden; padding-bottom:var(--s2)}
  .center .hero,.center .mapwrap{margin-left:var(--s2); margin-right:var(--s2)}

  /* right panel */
  .aside{position:sticky; top:var(--s3); display:flex; flex-direction:column; gap:var(--s2)}
  .tabbar{display:none}
  #lesson{position:relative; inset:auto; max-width:none; margin:0; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); min-height:640px; overflow:hidden}
  #lesson.open{display:flex}
  .lbody{padding-bottom:200px}
  .mapwrap{aspect-ratio:4/5}
  .cta{position:static}
  .hero h2{font-size:24px}
}
@media (max-width:1023px){ .rail,.aside{display:none} }