/* ============ MATHFABLE ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
/* ---- MathFable "Lantern & Parchment" theme ----
   Twilight-indigo night sky (the Storywood at dusk) + lantern-gold gilding.
   Display type is a system serif stack (offline game — no webfonts);
   all reading/UI text stays in the friendly sans for young readers. */
:root {
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", "Iowan Old Style", serif;
  --gold: #f2b84b;          /* lantern gold — headings, gilded edges */
  --gold-soft: rgba(242,184,75,.16);  /* gilded hairline borders */
  --lavender: #c4b5fd;      /* moonlight accents (pre-rebrand tint, kept) */
  --night: #1b1730;         /* deep night */
  --twilight: #2a2440;      /* twilight indigo */
}
body {
  font-family: "Trebuchet MS", "Comic Sans MS", Verdana, sans-serif;
  background:
    /* soft vignette — makes every screen read like an illustration plate */
    radial-gradient(ellipse at 50% 38%, transparent 52%, rgba(9,6,20,.5) 100%),
    /* a scatter of tiny stars over the Storywood */
    radial-gradient(1.6px 1.6px at 11% 19%, rgba(255,244,214,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 8%,  rgba(255,255,255,.4),  transparent 60%),
    radial-gradient(1.8px 1.8px at 46% 14%, rgba(255,236,190,.5),  transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 6%,  rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 17%, rgba(255,244,214,.5),  transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 10%, rgba(255,255,255,.4),  transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 30%, rgba(255,236,190,.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 8% 38%,  rgba(255,255,255,.3),  transparent 60%),
    /* the night itself */
    radial-gradient(circle at 50% -20%, #3a2f63 0%, var(--twilight) 45%, var(--night) 100%);
  background-attachment: fixed;
  color:#fff; overflow-x:hidden;
  user-select:none; -webkit-user-select:none;
}
button { font-family:inherit; cursor:pointer; border:none; }
.hidden { display:none !important; }

#app {
  max-width:520px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; padding:12px 14px 28px;
  position:relative;
}
#app.shake-sm { animation: shakeS .18s linear; }
#app.shake-lg { animation: shakeL .32s linear; }
@keyframes shakeS { 25%{transform:translate(3px,-2px)} 50%{transform:translate(-3px,2px)} 75%{transform:translate(2px,2px)} }
@keyframes shakeL { 20%{transform:translate(7px,-5px)} 40%{transform:translate(-7px,5px)} 60%{transform:translate(5px,4px)} 80%{transform:translate(-4px,-4px)} }

.screen { display:none; flex-direction:column; gap:12px; flex:1; }
.screen.active { display:flex; }

/* ---------- shared bits ---------- */
.card {
  background:rgba(255,251,240,.07); border:2px solid var(--gold-soft);
  border-radius:18px; padding:14px;
  box-shadow:0 1px 0 rgba(255,236,190,.06) inset;
}
.card h2 { margin-bottom:8px; }
.card h3 { margin-bottom:8px; font-size:15px; letter-spacing:.5px; }
/* storybook display type — headings only, never reading text */
.card h2, .card h3, .sub-head h2, .modal-card h2, .runend-card h2 {
  font-family:var(--serif); letter-spacing:.4px;
}

.big-btn {
  font-size:21px; font-weight:bold; color:#fff; padding:15px 18px;
  border-radius:18px; background:linear-gradient(180deg,#8b5cf6,#6d28d9);
  border-bottom:4px solid #4c1d95; letter-spacing:.5px;
  transition: transform .08s;
}
.big-btn:active { transform:scale(.96); }
.run-btn { background:linear-gradient(180deg,#f59e0b,#ea580c); border-bottom-color:#9a3412; font-size:24px;
  box-shadow:0 0 18px rgba(242,184,75,.28); } /* lantern glow — the hero button */
.med-btn {
  flex:1; font-size:16px; font-weight:bold; color:#fff; padding:11px 12px;
  border-radius:14px; background:linear-gradient(180deg,#4f46e5,#3730a3);
  border-bottom:3px solid #1e1b6e; position:relative;
}
.med-btn:active { transform:scale(.96); }
.med-btn.danger { background:linear-gradient(180deg,#ef4444,#b91c1c); border-bottom-color:#7f1d1d; }
.btn-row { display:flex; gap:10px; }
.icon-btn {
  font-size:19px; background:rgba(255,255,255,.12); color:#fff;
  border-radius:12px; padding:7px 11px;
}
.alert-dot {
  position:absolute; top:-6px; right:-6px; background:#f43f5e; color:#fff;
  border-radius:50%; width:22px; height:22px; line-height:22px; font-size:14px;
  animation:pulse 1s infinite;
}
@keyframes pulse { 50% { transform:scale(1.25); } }

.xpbar { flex:1; height:12px; background:rgba(0,0,0,.45); border-radius:8px; overflow:hidden; }
.xpbar.wide { width:100%; height:16px; margin:8px 0 4px; }
.xpbar > div { height:100%; width:0%; background:linear-gradient(90deg,#34d399,#10b981); border-radius:8px; transition:width .4s ease; }
.xpbar.gold > div { background:linear-gradient(90deg,#fde047,#f59e0b); }

.coin-chip { background:rgba(0,0,0,.35); padding:6px 12px; border-radius:999px; font-weight:bold; font-size:17px; color:#fde047; }
.coin-chip.small { font-size:14px; padding:4px 9px; }

/* ---------- title ---------- */
.logo-wrap { text-align:center; margin-top:14px; }
.once-upon {
  font-family:var(--serif); font-style:italic; font-size:15px;
  color:var(--lavender); letter-spacing:1px; margin-bottom:6px; opacity:.9;
}
.logo-book { font-size:64px; animation:bob 2.4s ease-in-out infinite; position:relative; display:inline-block; }
.logo-spark { position:absolute; font-size:20px; animation:twinkle 1.8s ease-in-out infinite; }
.logo-spark.s1 { top:-6px; left:-18px; }
.logo-spark.s2 { bottom:2px; right:-20px; animation-delay:.9s; }
@keyframes twinkle { 0%,100% { opacity:.25; transform:scale(.8); } 50% { opacity:1; transform:scale(1.15); } }
@keyframes bob { 50% { transform:translateY(-8px); } }
.logo {
  font-family:var(--serif); font-weight:bold;
  font-size:46px; line-height:1.0; letter-spacing:1px;
  background:linear-gradient(180deg,#f8dc8e 10%,var(--gold) 55%,#d98c2b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 rgba(43,26,10,.45)) drop-shadow(0 0 18px rgba(242,184,75,.25));
}
.tagline { font-family:var(--serif); font-style:italic; color:var(--lavender); margin-top:8px; font-size:16px; }
#profile-list { display:flex; flex-direction:column; gap:8px; }
/* returning players = ribbon bookmarks into their saved tale */
.profile-btn {
  display:flex; justify-content:space-between; align-items:center;
  font-size:18px; font-weight:bold; color:#fff; padding:13px 16px 13px 12px;
  border-radius:14px; background:linear-gradient(180deg,#2e6b44,#245536);
  border-bottom:3px solid #163823; border-left:5px solid var(--gold);
}
.profile-btn small { font-weight:normal; color:#bbf7d0; font-size:13px; }
#np-name {
  width:100%; font-size:19px; padding:10px 12px; border-radius:12px; border:none;
  margin-bottom:8px; font-family:inherit; text-align:center;
}
.np-label { margin:8px 0 6px; color:#c4b5fd; font-size:14px; }
.np-error { color:#fda4af; font-size:14px; min-height:18px; margin:4px 0; }
#grade-row { display:flex; gap:6px; }
.grade-btn {
  flex:1; font-size:17px; font-weight:bold; padding:10px 0; border-radius:12px;
  background:rgba(255,255,255,.12); color:#fff; border:2px solid transparent;
}
.grade-btn.sel { background:#7c3aed; border-color:#fde047; }
#starter-row { display:flex; gap:8px; }
.starter-btn {
  flex:1; padding:10px 4px; border-radius:14px; background:rgba(255,255,255,.1);
  color:#fff; border:2px solid transparent; font-size:13px;
}
.starter-btn .s-emoji { font-size:40px; display:block; }
.starter-btn.sel { background:rgba(124,58,237,.55); border-color:#fde047; }

/* ---------- home ---------- */
.home-head { display:flex; align-items:center; gap:10px; }
.home-id { flex:1; }
#home-name { font-size:20px; font-weight:bold; }
.rank-chip { display:inline-block; font-size:12px; background:linear-gradient(180deg,#a16207,#854d0e); padding:2px 10px; border-radius:999px; }
.boost-badge {
  background:linear-gradient(90deg,#f59e0b,#ef4444); text-align:center;
  border-radius:12px; padding:7px; font-size:14px; font-weight:bold;
  animation:pulse 2s infinite;
}
.pet-stage { display:flex; align-items:center; gap:6px; }
.cycle-btn { font-size:22px; background:rgba(255,255,255,.1); color:#fff; border-radius:12px; padding:14px 10px; }
.pet-center { flex:1; text-align:center; }
.element-chip { display:inline-block; font-size:12px; background:rgba(0,0,0,.35); padding:3px 10px; border-radius:999px; margin-bottom:4px; }
.pet-big { font-size:84px; line-height:1.1; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.pet-name { font-size:20px; font-weight:bold; margin:2px 0 6px; }
.pet-lvl-row { display:flex; align-items:center; gap:8px; padding:0 10px; font-size:14px; font-weight:bold; color:#a7f3d0; }
.pet-next-row { margin-top:8px; font-size:13px; color:#c4b5fd; display:flex; align-items:center; justify-content:center; gap:8px; }
.silhouette { font-size:30px; filter:brightness(0) opacity(.55); }
.missions-card h3 span { font-size:11px; color:#c4b5fd; font-weight:normal; }
.mission-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; }
.mission-row .m-txt { flex:1.6; }
.mission-row .m-done { color:#4ade80; font-weight:bold; }
.mission-row .xpbar { flex:1; }
.mission-reward { font-size:12px; color:#fde047; white-space:nowrap; }
#stamp-row { display:flex; gap:6px; justify-content:space-between; }
.stamp { flex:1; aspect-ratio:1; border-radius:12px; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; font-size:22px; border:2px dashed rgba(255,255,255,.2); }
.stamp.got { background:rgba(16,185,129,.35); border-style:solid; border-color:#34d399; }
.stamp.last { border-color:#fde047; }
.stamp-note { font-size:13px; color:#c4b5fd; margin-top:8px; text-align:center; }
.home-best { text-align:center; color:#a5b4fc; font-size:14px; }

/* ---------- run ---------- */
.run-head { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.hearts { font-size:17px; letter-spacing:1px; }
.shield-chip { font-size:16px; background:rgba(59,130,246,.35); border-radius:999px; padding:3px 8px; }
.shield-chip.used { opacity:.25; filter:grayscale(1); }
.depth-chip, .mult-chip { background:rgba(0,0,0,.35); border-radius:999px; padding:4px 10px; font-weight:bold; font-size:14px; }
.mult-chip { color:#fde047; }
.mult-chip.hot { background:rgba(245,158,11,.5); animation:pulse 1s infinite; }
.depth-track { position:relative; height:14px; background:rgba(0,0,0,.4); border-radius:8px; }
#depth-fill { height:100%; width:0%; background:linear-gradient(90deg,#38bdf8,#818cf8); border-radius:8px; transition:width .3s; }
.depth-pb { position:absolute; top:-8px; font-size:16px; transform:translateX(-50%); }
/* chapter heading — "Chapter 2 · 💎 Crystal Cave" reads like a storybook page header */
.theme-name {
  text-align:center; font-size:14.5px; color:var(--lavender);
  font-family:var(--serif); font-style:italic; letter-spacing:.6px;
}

#scene {
  position:relative; min-height:210px; border-radius:18px;
  background:rgba(0,0,0,.28); border:2px solid var(--gold-soft);
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  transition: background .5s;
}
#scene.fever { background:rgba(245,158,11,.22); border-color:#fde047; box-shadow:0 0 24px rgba(253,224,71,.35) inset; }
#enemy-box { text-align:center; padding-top:8px; }
.enemy-emoji { font-size:72px; line-height:1.1; display:inline-block; filter:drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.enemy-emoji.boss { font-size:110px; }
.enemy-emoji.hurt { animation:hurt .35s; }
@keyframes hurt { 30% { transform:translateX(10px) rotate(6deg); filter:brightness(2); } 60% { transform:translateX(-7px); } }
.enemy-emoji.charge { animation:charge .5s infinite; }
@keyframes charge { 50% { transform:scale(1.12); filter:drop-shadow(0 0 14px #f43f5e) brightness(1.4); } }
.enemy-emoji.die { animation:die .55s forwards; }
@keyframes die { to { transform:scale(.1) rotate(220deg); opacity:0; } }
.enemy-name { font-size:15px; font-weight:bold; color:#fca5a5; margin-top:2px; }
.boss-hpbar { width:82%; margin:0 auto 6px; height:18px; background:rgba(0,0,0,.55); border-radius:9px; border:2px solid rgba(255,255,255,.25); overflow:hidden; }
#boss-hpfill { height:100%; width:100%; background:linear-gradient(90deg,#f43f5e,#dc2626); transition:width .35s; }
.block-warn { text-align:center; color:#fde047; font-weight:bold; font-size:15px; animation:pulse .5s infinite; margin-bottom:4px; }
#pet-box { position:absolute; left:14px; bottom:8px; }
.run-pet { font-size:54px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.5)); transition:transform .15s; }
.run-pet.attack { animation:atk .4s; }
@keyframes atk { 35% { transform:translate(46px,-24px) scale(1.15) rotate(-12deg); } }
.run-pet.sad { animation:sad .5s; }
@keyframes sad { 40% { transform:translateY(6px) rotate(-10deg); filter:grayscale(.8); } }
.fever-banner {
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font-size:19px; font-weight:bold; color:#fde047; z-index:3;
  animation:pulse .6s infinite; text-shadow:0 2px 4px rgba(0,0,0,.6);
}
.run-banner {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:bold; text-align:center; z-index:5;
  background:rgba(0,0,0,.45); text-shadow:0 3px 6px rgba(0,0,0,.7);
  animation:bannerIn .35s;
  padding:0 16px; line-height:1.25;
}
@keyframes bannerIn { from { transform:scale(.4); opacity:0; } }
.rival-panel { position:absolute; inset:0; background:rgba(20,10,40,.92); z-index:4; padding:18px 16px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.rival-row { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:bold; }
.rival-row span { width:74px; }
.racebar { flex:1; height:18px; background:rgba(0,0,0,.5); border-radius:9px; overflow:hidden; }
#rival-me-fill { height:100%; width:0%; background:linear-gradient(90deg,#34d399,#10b981); transition:width .3s; }
#rival-zib-fill { height:100%; width:0%; background:linear-gradient(90deg,#f43f5e,#dc2626); transition:width .3s; }
.rival-text { text-align:center; font-size:14px; color:#fbcfe8; min-height:20px; }

.problem-card {
  background:rgba(255,251,240,.09); border:2px solid rgba(242,184,75,.22);
  border-radius:18px; padding:12px 14px 10px; text-align:center;
}
#problem-text { font-size:38px; font-weight:bold; letter-spacing:2px; }
#problem-text .typed { color:#fde047; border-bottom:4px solid #fde047; padding:0 2px; min-width:24px; display:inline-block; }
#problem-text.pop { animation:popIn .25s; }
@keyframes popIn { from { transform:scale(.6); opacity:0; } }
#problem-text.wrongshake { animation:shakeS .3s; color:#fca5a5; }
.timerbar { height:9px; background:rgba(0,0,0,.4); border-radius:6px; margin-top:9px; overflow:hidden; }
#timer-fill { height:100%; width:100%; background:linear-gradient(90deg,#4ade80,#22d3ee); border-radius:6px; }
#timer-fill.urgent { background:linear-gradient(90deg,#f59e0b,#ef4444); }

/* ---------- The Helper: in-run mini-lesson takeover of the problem card ---------- */
.problem-card.lesson { border-color:rgba(52,211,153,.55); background:rgba(52,211,153,.08); }
.problem-card.lesson .timerbar, .problem-card.lesson .timer-cap { display:none; }  /* lessons are untimed */
.lesson-msg { font-size:15px; color:#fef3c7; margin-top:8px; font-weight:600; line-height:1.45; }
.lesson-msg small { color:#cbd5e1; font-weight:normal; }
.lesson-steps { font-size:13.5px; color:#a7f3d0; margin-top:6px; font-weight:600;
  background:rgba(0,0,0,.25); border-radius:10px; padding:7px 9px; }
#lesson-btn { margin-top:9px; }

/* ---------- visual math models (CRA picture helpers) ---------- */
.problem-viz { display:flex; flex-direction:column; align-items:center; margin-bottom:9px;
  max-height:40vh; overflow:auto; transition:opacity .3s; }
.problem-viz:empty { margin:0; }
.problem-viz.fade-faint { opacity:.4; }
.problem-viz.reveal { opacity:1; }
.viz { max-width:100%; }
.viz-cap { font-size:11px; color:#9aa3c7; margin-top:3px; }
.viz-strategy { font-size:13.5px; color:#a7f3d0; margin-top:5px; font-weight:600; }

/* ten-frame */
.tf-wrap { display:flex; gap:8px; justify-content:center; }
.tenframe { display:grid; grid-template-columns:repeat(5,20px); gap:3px; background:rgba(0,0,0,.25); padding:4px; border-radius:8px; }
.tf-cell { width:20px; height:20px; border:2px solid rgba(255,255,255,.28); border-radius:5px; box-sizing:border-box; }
.tf-a { background:#38bdf8; border-color:#7dd3fc; }
.tf-b { background:#34d399; border-color:#6ee7b7; }
.tf-x { background:#475569; border-color:#94a3b8; position:relative; }
.tf-x::after { content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fca5a5; font-size:12px; font-weight:bold; }

/* base-10 blocks */
.b10 { display:inline-flex; flex-direction:column; gap:4px; align-items:flex-start; }
.b10-row { display:flex; align-items:center; gap:7px; }
.b10-num { font-size:16px; font-weight:bold; color:#fde047; min-width:36px; text-align:right; }
.b10-blocks { font-size:19px; line-height:1.05; word-break:break-all; }
.b10-op { color:#fff; font-weight:bold; font-size:18px; padding-left:42px; }
.b10-key { font-size:11px; color:#9aa3c7; margin-top:2px; }

/* number line */
.nline { position:relative; height:50px; width:min(280px,80vw); margin:6px 12px 0; }
.nl-track { position:absolute; left:0; right:0; top:32px; height:3px; background:rgba(255,255,255,.35); border-radius:2px; }
.nl-jump { position:absolute; top:32px; height:3px; background:#fbbf24; border-radius:2px; }
.nl-jlbl { position:absolute; top:10px; transform:translateX(-50%); font-size:12px; color:#fbbf24; font-weight:bold; white-space:nowrap; }
.nl-pt { position:absolute; top:27px; transform:translateX(-50%); text-align:center; }
.nl-pt i { display:block; width:11px; height:11px; border-radius:50%; background:#38bdf8; margin:0 auto; border:2px solid #fff; }
.nl-pt.end i { background:#64748b; }
.nl-pt.end.got i { background:#34d399; }
.nl-pt span { display:block; font-size:12px; margin-top:3px; color:#e5e7eb; }
.nl-pt.end span { color:#fde047; font-weight:bold; }

/* array (multiplication) */
.arr { display:inline-grid; gap:4px; padding:5px; background:rgba(0,0,0,.2); border-radius:8px; }
.arr-dot { width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b); }

/* area model (multi-digit multiplication / distributive) */
.area { display:grid; gap:4px; width:min(200px,72vw); height:100px; margin:2px auto; }
.area-cell { background:rgba(56,189,248,.16); border:1.5px solid rgba(56,189,248,.5); border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; color:#e0f2fe; }
.area-cell small { font-size:11px; color:#bae6fd; }
.area-cell b { font-size:15px; color:#fde047; }

/* equal groups (division) */
.grp { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:min(300px,86vw); }
.grp-box { min-width:32px; min-height:32px; border:2px dashed rgba(255,255,255,.4); border-radius:8px; padding:4px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(10px,1fr)); gap:3px; align-content:center; justify-items:center; }
.grp-dot { width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#6ee7b7,#10b981); }
.grp-q { color:#9aa3c7; font-weight:bold; align-self:center; padding:0 4px; }

/* number bond (missing addend / part-whole) */
.bond { display:flex; flex-direction:column; align-items:center; }
.bond-whole { width:42px; height:42px; border-radius:50%; background:#7c3aed; border:2px solid #fde047;
  display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:18px; color:#fff; }
.bond-legs { position:relative; height:18px; width:80px; }
.bond-legs i { position:absolute; top:0; left:39px; width:2px; height:22px; background:rgba(255,255,255,.5); transform-origin:top center; }
.bond-legs i:first-child { transform:rotate(38deg); }
.bond-legs i:last-child { transform:rotate(-38deg); }
.bond-parts { display:flex; gap:26px; }
.bond-part { width:36px; height:36px; border-radius:50%; background:#334155; border:2px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:16px; color:#e5e7eb; }
.bond-part.unk { border-color:#fde047; color:#fde047; }

#keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.key {
  font-size:27px; font-weight:bold; color:#fff; padding:13px 0; border-radius:16px;
  background:linear-gradient(180deg,#334155,#1e293b); border-bottom:4px solid #0f172a;
  transition:transform .05s;
}
.key:active { transform:scale(.94); background:#4f46e5; }
.key.util { background:linear-gradient(180deg,#7c3aed,#5b21b6); border-bottom-color:#3b0764; font-size:22px; }
/* ± key (Gr7/8 integer answers): appears as a full-width bar under the pad only when the current
   problem can go negative, so the 3-col grid stays a clean 4 rows on every other problem. */
.key.key-pm { grid-column:1 / -1; padding:8px 0; }

/* ---------- run end ---------- */
.runend-card { text-align:center; margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.runend-card h2 { font-size:30px; }
.re-near { font-size:18px; color:#fde047; font-weight:bold; min-height:24px; }
#re-stats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.re-stat { background:rgba(0,0,0,.35); border-radius:12px; padding:8px 13px; font-size:15px; }
.re-stat b { color:#a7f3d0; }
#re-extras { display:flex; flex-direction:column; gap:6px; font-size:15px; }
.re-extra { background:rgba(124,58,237,.3); border-radius:10px; padding:7px; }
.re-extra.done { background:rgba(16,185,129,.3); }

/* ---------- dex ---------- */
.sub-head { display:flex; align-items:center; gap:12px; }
.dex-summary { text-align:center; color:#c4b5fd; font-size:15px; }
#dex-sets { display:flex; flex-direction:column; gap:14px; }
.dex-set h3 { margin:0 0 6px; font-size:16px; }
.dex-set .set-bar { margin-bottom:8px; }
.dex-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.dex-cell {
  background:rgba(0,0,0,.3); border-radius:14px; padding:7px 2px; text-align:center;
  border:2px solid #64748b; font-size:11px; color:#cbd5e1;
}
.dex-cell .d-emoji { font-size:32px; display:block; line-height:1.2; }
.dex-cell.unknown .d-emoji { filter:brightness(0) opacity(.5); }
.dex-cell.r-common { border-color:#94a3b8; }
.dex-cell.r-uncommon { border-color:#4ade80; }
.dex-cell.r-rare { border-color:#38bdf8; box-shadow:0 0 8px rgba(56,189,248,.3); }
.dex-cell.r-legendary { border-color:#fde047; box-shadow:0 0 10px rgba(253,224,71,.45); }
.dex-stages { font-size:15px; letter-spacing:2px; margin-top:2px; }
.dex-stages .st-locked { filter:brightness(0) opacity(.45); }

/* ---------- eggs ---------- */
.egg-active-card { text-align:center; }
.egg-big { font-size:76px; display:inline-block; }
.egg-big.wobble { animation:wobble 1.6s infinite; }
@keyframes wobble { 20% { transform:rotate(-10deg); } 40% { transform:rotate(9deg); } 60% { transform:rotate(-6deg);} 80% { transform:rotate(0);} }
.egg-big.crack { animation:crack .3s infinite; }
@keyframes crack { 25% { transform:translateX(-5px) rotate(-8deg);} 75% { transform:translateX(5px) rotate(8deg);} }
.egg-text { font-size:14px; color:#c4b5fd; }
.egg-none { color:#c4b5fd; padding:12px 0; }
#egg-inv { display:flex; gap:10px; flex-wrap:wrap; }
.egg-inv-item { text-align:center; background:rgba(0,0,0,.3); border-radius:14px; padding:10px 14px; color:#fff; border:2px solid rgba(255,255,255,.15); font-size:13px; }
.egg-inv-item .e-emoji { font-size:36px; display:block; }
.egg-shop-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.egg-shop-row .e-info { flex:1; font-size:14px; }
.egg-shop-row .e-info small { color:#a5b4fc; display:block; }
.buy-btn { background:linear-gradient(180deg,#059669,#047857); color:#fff; font-weight:bold; border-radius:12px; padding:9px 14px; font-size:15px; border-bottom:3px solid #064e3b; }
.buy-btn:disabled { opacity:.4; }
.pity-wrap { margin-top:10px; }
.pity-label { font-size:13px; color:#fde047; }

/* ---------- modals ---------- */
.modal {
  position:fixed; inset:0; background:rgba(10,5,25,.82); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-card {
  background:linear-gradient(180deg,#3a2d5c,#241b40); border:2px solid rgba(242,184,75,.28);
  border-radius:22px; padding:22px; width:100%; max-width:420px; text-align:center;
  display:flex; flex-direction:column; gap:12px; max-height:88vh; overflow-y:auto;
  animation:bannerIn .3s;
  box-shadow:0 0 0 4px rgba(20,13,38,.6), 0 12px 40px rgba(0,0,0,.5);
}
.rarity-chip { display:inline-block; margin:0 auto; font-weight:bold; padding:4px 16px; border-radius:999px; background:#64748b; }
.rarity-chip.r-uncommon { background:#16a34a; }
.rarity-chip.r-rare { background:#0284c7; }
.rarity-chip.r-legendary { background:linear-gradient(90deg,#f59e0b,#fde047); color:#451a03; }
.hatch-extra { font-size:15px; color:#c4b5fd; min-height:20px; }
.evo-row { display:flex; align-items:center; justify-content:center; gap:16px; }
.evo-arrow { font-size:34px; color:#fde047; }
.evo-glow { animation:evoGlow 1.2s infinite; }
@keyframes evoGlow { 50% { filter:drop-shadow(0 0 22px #fde047) brightness(1.3); transform:scale(1.08); } }
.rank-big { font-size:34px; font-weight:bold; color:#fde047; }
.rank-bonus { color:#c4b5fd; font-size:15px; }
#leader-table { display:flex; flex-direction:column; gap:6px; }
.leader-row { display:flex; justify-content:space-between; background:rgba(0,0,0,.3); border-radius:10px; padding:8px 12px; font-size:15px; }
.leader-row.me { border:2px solid #fde047; }
.grown-card { text-align:left; }
.grown-row { display:flex; justify-content:space-between; align-items:center; font-size:15px; gap:10px; }
.grown-row select { font-size:15px; padding:6px; border-radius:8px; }
#grown-stats { display:flex; flex-direction:column; gap:7px; }
.gstat { font-size:14px; }
.gstat .xpbar { height:10px; margin-top:2px; }
.grown-hint { font-size:13px; color:#9aa3c7; margin:2px 0 8px; line-height:1.35; }
.grown-btn-row { display:flex; gap:10px; margin-bottom:6px; }
.grown-btn-row .med-btn { flex:1; }
.ghost-btn { display:block; margin:14px auto 4px; background:transparent; border:1px solid rgba(255,255,255,.18);
  color:#9aa3c7; font-size:13px; padding:8px 14px; border-radius:10px; cursor:pointer; }
.ghost-btn:active { transform:translateY(1px); }

/* ---------- fx ---------- */
#fx-canvas { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:60; }
#popups { position:fixed; inset:0; pointer-events:none; z-index:61; }
.popup {
  position:absolute; font-weight:bold; font-size:22px; text-shadow:0 2px 4px rgba(0,0,0,.7);
  animation:floatUp 1s ease-out forwards; white-space:nowrap; transform:translateX(-50%);
}
.popup.big { font-size:30px; }
@keyframes floatUp { to { transform:translate(-50%,-70px); opacity:0; } }

@media (max-height:740px) {
  .pet-big { font-size:64px; }
  #scene { min-height:170px; }
  .enemy-emoji { font-size:58px; }
  .enemy-emoji.boss { font-size:84px; }
  #problem-text { font-size:31px; }
  .key { font-size:23px; padding:10px 0; }
}

/* ---------- operation focus picker (home) ---------- */
.focus-card { padding:10px 12px; }
.focus-label { font-size:13px; color:#c4b5fd; margin-bottom:8px; font-weight:bold; }
.focus-label small { font-weight:normal; color:#8b8fc0; }
.focus-row { display:flex; gap:6px; }
.focus-chip {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 2px; border-radius:12px; background:rgba(255,255,255,.08);
  color:#fff; border:2px solid transparent; font-weight:bold; transition:transform .06s;
}
.focus-chip .fc-icon { font-size:22px; line-height:1; }
.focus-chip .fc-lbl { font-size:13px; }
.focus-chip.sel { background:rgba(124,58,237,.55); border-color:#fde047; }
.focus-chip:active { transform:scale(.94); }

/* ---------- timer caption (run) ---------- */
.timer-cap { font-size:11px; color:#8b8fc0; margin-top:5px; letter-spacing:.3px; }
#review-next { margin-top:12px; animation:reviewNextIn .28s ease-out; }
@keyframes reviewNextIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
#timer-fill.expired { background:rgba(148,163,184,.45); }

/* ---------- family report / heat matrix ---------- */
.report-who { display:flex; gap:6px; flex-wrap:wrap; }
.rep-who-btn { font-size:14px; font-weight:bold; color:#fff; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.1); border:2px solid transparent; }
.rep-who-btn.sel { background:rgba(124,58,237,.55); border-color:#fde047; }
.report-summary { display:flex; gap:8px; flex-wrap:wrap; }
.rep-tile { flex:1; min-width:70px; text-align:center; background:rgba(0,0,0,.3); border-radius:14px; padding:10px 6px; }
.rep-tile b { display:block; font-size:19px; color:#a7f3d0; }
.rep-tile small { font-size:11px; color:#c4b5fd; }
.rep-hint { font-size:12px; color:#a5b4fc; margin-bottom:10px; line-height:1.35; }

.heat-grid { display:flex; flex-direction:column; gap:6px; }
.heat-row { display:flex; gap:6px; align-items:center; }
.heat-rowlab { width:34px; font-size:12px; color:#c4b5fd; font-weight:bold; flex-shrink:0; }
.heat-cell {
  flex:1; min-width:0; aspect-ratio:1.7; border-radius:8px; border:1.5px solid;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:13px; font-weight:bold; line-height:1.05;
}
.heat-cell small { font-size:9px; font-weight:normal; opacity:.85; }
.heat-cell.cur { outline:2px solid #fde047; outline-offset:1px; }
.heat-legend { display:flex; align-items:center; gap:8px; margin-top:9px; font-size:11px; color:#c4b5fd; justify-content:center; }
.legend-bar { flex:0 0 130px; height:10px; border-radius:6px;
  background:linear-gradient(90deg,hsl(0,66%,42%),hsl(62,66%,42%),hsl(125,66%,42%)); }

.fact-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fact-toggle { display:flex; gap:4px; }
.fact-toggle button { font-size:15px; padding:4px 10px; border-radius:10px; color:#fff; background:rgba(255,255,255,.1); border:2px solid transparent; }
.fact-toggle button.sel { background:rgba(124,58,237,.55); border-color:#fde047; }
.fact-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fact-grid { display:flex; flex-direction:column; gap:3px; min-width:360px; }
.fact-row { display:flex; gap:3px; }
.fact-lab { flex:1; min-width:22px; text-align:center; font-size:11px; color:#c4b5fd; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.fact-lab.corner { color:#fde047; }
.fact-cell {
  flex:1; min-width:22px; aspect-ratio:1; border-radius:5px; border:1px solid;
  display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:bold;
}
.gstat-lab { display:inline-block; }
.gstat-num { float:right; color:#a5b4fc; }
.rep-rec { background:rgba(124,58,237,.28); border-radius:10px; padding:9px 11px; font-size:14px; margin-bottom:6px; }
.rep-rec:last-child { margin-bottom:0; }
.rep-rec b { color:#fde047; }

/* ---------- Discovery Map (explore overworld) ---------- */
.map-btn { background:linear-gradient(180deg,#10b981,#0f766e); border-bottom-color:#134e4a; font-size:22px; position:relative; }
.explore-intro { text-align:center; font-size:13px; color:#a7f3d0; line-height:1.35; margin:-2px 0 2px; }
.explore-progress { display:flex; gap:10px; }
.exp-tile { flex:1; text-align:center; background:rgba(0,0,0,.3); border-radius:14px; padding:9px 6px; }
.exp-tile b { display:block; font-size:20px; color:#fde047; }
.exp-tile small { font-size:11px; color:#c4b5fd; }
#explore-map { display:flex; flex-direction:column; gap:12px; }

.biome {
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12);
  border-left:6px solid var(--biome,#8b5cf6); border-radius:16px; padding:12px;
}
.biome.clear { box-shadow:0 0 14px color-mix(in srgb, var(--biome,#8b5cf6) 45%, transparent); }
.biome.locked { opacity:.72; filter:saturate(.5); }
.biome-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.biome-icon { font-size:30px; line-height:1; }
.biome-id { flex:1; }
.biome-id b { font-size:16px; }
.biome-id small { display:block; font-size:11.5px; color:#c4b5fd; margin-top:2px; line-height:1.3; }
.biome-count { font-size:13px; font-weight:bold; color:#fde047; background:rgba(0,0,0,.35); border-radius:999px; padding:3px 10px; white-space:nowrap; }

.spot-row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.spot {
  display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
  background:rgba(0,0,0,.28); border:2px solid rgba(255,255,255,.14); border-radius:13px;
  padding:8px 3px 6px; color:#e5e7eb; min-height:78px; justify-content:flex-start;
  transition:transform .08s;
}
.spot:active { transform:scale(.94); }
.spot .spot-face { font-size:30px; line-height:1.05; }
.spot .spot-name { font-size:9.5px; line-height:1.15; color:#c4b5fd; }
.spot.done { background:rgba(16,185,129,.22); border-color:#34d399; }
.spot.done .spot-name { color:#a7f3d0; }
.spot-check { position:absolute; top:-6px; right:-4px; font-size:14px; }
.spot.shroud { background:rgba(0,0,0,.35); border-style:dashed; border-color:rgba(255,255,255,.12); }
.spot.shroud .spot-face { filter:grayscale(1) opacity(.4); }
.spot.shroud .spot-name { color:#5b6488; }
.spot.target { border-color:#fde047; animation:spotPulse 1.3s infinite; }
.spot.target .spot-face { animation:bob 1.6s ease-in-out infinite; }
@keyframes spotPulse { 50% { box-shadow:0 0 12px rgba(253,224,71,.6); } }

/* ---------- Encounter (a single discovery spot) ---------- */
.enc-stage { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:14px; }
.enc-creature { font-size:74px; line-height:1.05; filter:drop-shadow(0 6px 7px rgba(0,0,0,.5)); }
.enc-creature.curious { animation:wobble 1.8s infinite; }
.enc-creature.celebrate { animation:encHop .6s ease-in-out infinite; }
@keyframes encHop { 40% { transform:translateY(-14px) scale(1.06); } }
/* creature speech on parchment — every encounter reads like a page from the fable */
.enc-speech {
  background:linear-gradient(180deg,#f6ecd9,#ecdcbd); border:1.5px solid #b98a3e; border-radius:14px;
  padding:9px 13px; font-size:15px; line-height:1.35; color:#3b2a20;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.enc-speech b { color:#7a3e10; }
.enc-speech small { color:#8a6a42; font-size:12px; }
.enc-body { text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 12px; }
.enc-body .problem-viz { max-height:32vh; }
.enc-problem { font-size:34px; font-weight:bold; letter-spacing:2px; min-height:40px; }
.enc-problem .typed { color:#fde047; border-bottom:4px solid #fde047; padding:0 2px; min-width:22px; display:inline-block; }
.enc-problem.wrongshake { animation:shakeS .3s; color:#fca5a5; }
.enc-worked b { color:#a7f3d0; }
.enc-dots { display:flex; gap:8px; }
.enc-dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.25); }
.enc-dot.on { background:#34d399; border-color:#6ee7b7; }
.enc-dot.cur { border-color:#fde047; animation:pulse 1s infinite; }
.enc-msg { font-size:14px; color:#fbcfe8; min-height:20px; font-weight:600; }
#enc-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.enc-actions { display:flex; flex-direction:column; gap:8px; }
.enc-actions .med-btn { flex:none; }

@media (max-height:740px) {
  .enc-creature { font-size:56px; }
  .enc-problem { font-size:28px; }
  .spot .spot-face { font-size:26px; }
}

/* ==================== DEPTH PASS (Modules A/B/D/E/F) ==================== */
/* ---- Tricky Ten & Daily Ten home buttons ---- */
.tricky-btn { background:linear-gradient(180deg,#7c3aed,#4c1d95); border-bottom-color:#2e1065; position:relative; }
.tricky-btn.done { background:linear-gradient(180deg,#475569,#334155); border-bottom-color:#1e293b; opacity:.85; cursor:default; }
.tricky-btn small { display:block; font-size:12px; font-weight:600; opacity:.9; }
.chal-badge {
  display:inline-block; background:#f472b6; color:#fff; font-size:14px;
  min-width:22px; height:22px; line-height:22px; border-radius:50%; margin-left:6px;
  animation:pulse 1.4s infinite;
}
.daily-btn { background:linear-gradient(180deg,#0ea5e9,#0369a1); border-bottom-color:#075985; }
.daily-btn small { display:block; font-size:12px; font-weight:600; opacity:.92; letter-spacing:0; }

/* ---- challenge backdrop tint (phase shifts every ~3 problems) ---- */
#screen-encounter { transition:background .6s; border-radius:18px; }
#screen-encounter.chal-t0 { background:radial-gradient(circle at 50% 0%, rgba(124,58,237,.25), transparent 70%); }
#screen-encounter.chal-t1 { background:radial-gradient(circle at 50% 0%, rgba(14,165,233,.25), transparent 70%); }
#screen-encounter.chal-t2 { background:radial-gradient(circle at 50% 0%, rgba(244,114,182,.25), transparent 70%); }
#screen-encounter.chal-t3 { background:radial-gradient(circle at 50% 0%, rgba(52,211,153,.28), transparent 70%); }

/* ---- badge wall ---- */
.badges-card { max-height:82vh; overflow-y:auto; }
.badge-summary { font-size:13px; color:#c4b5fd; margin-bottom:10px; }
.badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; margin-bottom:12px; }
.badge-cell {
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14);
  border-radius:14px; padding:10px 6px;
}
.badge-cell.got { border-color:#fde047; background:rgba(253,224,71,.10); }
.badge-emoji { font-size:30px; }
.badge-cell.locked .badge-emoji { filter:grayscale(1) brightness(.45); opacity:.7; }
.badge-name { font-size:11px; font-weight:700; line-height:1.2; }
.badge-cell.locked .badge-name { color:#8b93b8; font-weight:600; }
.badge-date { font-size:10px; color:#a7f3d0; }

/* ---- report: smart-review line + practice calendar ---- */
.report-srs {
  font-size:13px; font-weight:600; color:#c4b5fd;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.10);
  border-radius:12px; padding:8px 12px;
}
.cal-scroll { overflow-x:auto; padding-bottom:4px; }
.cal-grid { display:grid; grid-template-rows:repeat(7,11px); grid-auto-flow:column; grid-auto-columns:11px; gap:2px; width:max-content; }
.cal-cell { width:11px; height:11px; border-radius:3px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); }
.cal-cell.future { background:transparent; border-color:transparent; }
.cal-cell.q1 { background:hsla(140,60%,30%,.85); border-color:hsla(140,60%,40%,.9); }
.cal-cell.q2 { background:hsla(140,62%,40%,.9);  border-color:hsla(140,62%,50%,.9); }
.cal-cell.q3 { background:hsla(140,64%,50%,.95); border-color:hsla(140,64%,60%,.95); }
.cal-cell.q4 { background:hsla(140,70%,62%,1);   border-color:hsla(140,70%,72%,1); }
.rep-streak { font-size:13px; font-weight:700; color:#fde047; margin-top:8px; }