/* ============================================================
   Bloom — Reader Fan Live shared design system stylesheet
   One stylesheet shared by index.html, app.html and every
   journey gallery. Tokens (light + dark), typography, every
   reusable component class, plus the prototype chrome.
   ============================================================ */

:root{
  /* hero */
  --guava-600:#F03E6E; --guava-500:#FF5C86; --guava-300:#FFB0C4; --guava-100:#FFE7EE;
  /* accents */
  --peri-500:#6B74F2; --peri-100:#E7E8FE; --sun-500:#FFC24B; --sun-100:#FFF3D6;
  /* semantic */
  --success-500:#1FBE8F; --success-100:#D7F6EC; --warn-500:#FF9A2E; --warn-100:#FFEBD2;
  --danger-500:#F5455A; --danger-100:#FFE0E3;
  /* neutrals light */
  --ink-900:#231821; --ink-700:#4E4048; --ink-500:#867680; --ink-300:#C9BEC5;
  --surface-2:#FBEFF2; --surface-1:#FFFFFF; --bg:#FFF7F4; --paper:#FFFBF7;
  /* radii */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --r-blob:42% 58% 60% 40% / 45% 42% 58% 55%;
  /* shadow */
  --shadow-1:0 2px 6px rgba(53,20,35,.08);
  --shadow-2:0 8px 20px rgba(53,20,35,.12);
  --shadow-3:0 16px 36px rgba(53,20,35,.16);
  --press-guava:0 5px 0 #C42B54;
  --press-neutral:0 5px 0 #C9BEC5;
  --press-success:0 5px 0 #148B68;
  /* motion */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
  /* solid press underside colors (for reuse in JS-built markup) */
  --press-guava-c:#C42B54;
  --press-peri-c:#4750C4;
  --press-sun-c:#D69B1E;
  --press-danger-c:#C42433;
}
:root[data-theme="dark"]{
  --guava-600:#FF87A6; --guava-500:#FF7095; --guava-300:#B5567A; --guava-100:#3A2230;
  --peri-500:#8A92FF; --peri-100:#2B2C4A; --sun-500:#FFCF6E; --sun-100:#3E3320;
  --success-500:#3AD3A5; --success-100:#173A31; --warn-500:#FFB05C; --warn-100:#3D2E17;
  --danger-500:#FF6274; --danger-100:#3E1F25;
  --ink-900:#FDF3F6; --ink-700:#D9C9D1; --ink-500:#9C8A94; --ink-300:#463A41;
  --surface-2:#2C2029; --surface-1:#241A22; --bg:#1B131A; --paper:#221A20;
  --shadow-1:0 2px 6px rgba(0,0,0,.4);
  --shadow-2:0 8px 20px rgba(0,0,0,.5);
  --shadow-3:0 16px 36px rgba(0,0,0,.6);
  --press-guava:0 5px 0 #B5567A;
  --press-neutral:0 5px 0 #463A41;
  --press-success:0 5px 0 #1FBE8F;
  --press-guava-c:#B5567A;
  --press-peri-c:#565FD6;
  --press-sun-c:#C79A45;
  --press-danger-c:#B0454F;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
/* native-app feel: no blue tap box, no long-press callout, no accidental text-selection on controls, no tap delay */
button,a,[data-goto],.chip-tag,.tab,.tab .it,.bookcard,.opt-card,.badge,.switch,.segmented button,.notch,.appbar .title,.wordmark,.tagline{
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;
  user-select:none;-webkit-user-select:none}
:focus{outline:none}
:focus-visible{outline:3px solid var(--guava-300);outline-offset:2px}
/* keep text selectable where reading matters */
.reader-body,.prose,.field input{user-select:text;-webkit-user-select:text}
/* tactile + selection feedback (like a real app) */
.chip-tag,.opt-card,.bookcard,.segmented button{transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .1s}
.chip-tag:active,.opt-card:active,.bookcard:active{transform:scale(.97)}
.opt-card:not(.sel) .opt-check{display:none}
/* reward badge pop */
.pop-in{animation:popIn .55s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes popIn{0%{transform:scale(0)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
body{
  background:var(--bg);color:var(--ink-900);
  font-family:"Nunito Sans",system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease-standard),color .3s;
}
h1,h2,h3,h4{font-family:"Baloo 2",sans-serif;margin:0;line-height:1.15}
a{color:inherit}

/* ============================================================
   BRAND MARK / DOT / SPROUT
   ============================================================ */
.brandmark{display:flex;align-items:center;gap:10px;font-family:"Baloo 2";font-weight:700;font-size:20px}
.brand-dot{width:30px;height:30px;border-radius:var(--r-blob);
  background:linear-gradient(135deg,var(--guava-500),var(--sun-500));box-shadow:var(--shadow-1);flex:0 0 auto}

/* Sprout mascot — pure CSS */
.sprout{position:relative;width:150px;height:170px;flex:0 0 auto}
.sprout .body{position:absolute;bottom:10px;left:15px;width:120px;height:110px;background:var(--guava-500);
  border-radius:14px 22px 22px 14px;box-shadow:inset -14px 0 0 rgba(0,0,0,.08),var(--shadow-2)}
.sprout .pages{position:absolute;bottom:16px;left:22px;width:98px;height:98px;background:var(--paper);border-radius:8px 16px 16px 8px}
.sprout .spine{position:absolute;bottom:10px;left:12px;width:10px;height:110px;background:var(--guava-600);border-radius:8px 0 0 8px}
.sprout .leaf{position:absolute;top:0;left:22px;width:26px;height:40px;background:var(--success-500);
  border-radius:0 100% 0 100%;transform:rotate(-18deg);transform-origin:bottom;animation:leafbob 3s var(--ease-standard) infinite}
.sprout .leaf::after{content:"";position:absolute;top:6px;left:11px;width:2px;height:26px;background:rgba(255,255,255,.5);transform:rotate(14deg)}
.sprout .flower{position:absolute;top:-6px;left:34px;width:16px;height:16px;border-radius:50%;background:var(--sun-500);box-shadow:0 0 0 4px var(--guava-300);opacity:0;transition:opacity .3s}
.sprout.cheer .flower{opacity:1}
@keyframes leafbob{50%{transform:rotate(-10deg)}}
.sprout .eye{position:absolute;top:52px;width:16px;height:18px;background:var(--ink-900);border-radius:50%}
.sprout .eye.l{left:52px}.sprout .eye.r{left:82px}
.sprout .eye::after{content:"";position:absolute;top:2px;left:3px;width:5px;height:5px;background:#fff;border-radius:50%}
.sprout .cheek{position:absolute;top:70px;width:14px;height:9px;background:var(--guava-300);border-radius:50%;opacity:.85}
.sprout .cheek.l{left:44px}.sprout .cheek.r{left:88px}
.sprout .foot{position:absolute;bottom:0;width:20px;height:12px;background:var(--guava-600);border-radius:0 0 10px 10px}
.sprout .foot.l{left:40px}.sprout .foot.r{left:78px}
.sprout .mouth{position:absolute;top:76px;left:63px;width:16px;height:8px;border:2.5px solid var(--ink-900);border-top:none;border-radius:0 0 12px 12px}
.sprout.idle{animation:breathe 3.6s var(--ease-standard) infinite}
/* tiny bob that PRESERVES the scale (plain translateY would clobber it and balloon the sprout) */
@keyframes breathe{0%,100%{transform:translateY(0) scale(calc(var(--s,1) * var(--sf,1)))}50%{transform:translateY(-1.5px) scale(calc(var(--s,1) * var(--sf,1)))}}
/* Sprout at scaled sizes — set --s and the sprout renders at that pixel width.
   Uses transform:scale so all internal proportions are preserved. */
/* global mascot size factor (--sf) keeps Sprout scene-appropriate everywhere */
.sprout-scale{--sf:.8;width:calc(150px * var(--s,1) * var(--sf));height:calc(170px * var(--s,1) * var(--sf))}
.sprout-scale .sprout{position:absolute;top:0;left:0;transform:scale(calc(var(--s,1) * var(--sf)));transform-origin:top left;z-index:1}
/* shiny pulsing halo behind the mascot — the main "alive" cue (theme-safe pink glow) */
.sprout-scale::before{content:"";position:absolute;left:50%;top:46%;width:165%;height:165%;
  transform:translate(-50%,-50%) scale(1);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,92,134,.30) 0%,rgba(255,92,134,.12) 46%,transparent 70%);
  animation:halo 3.6s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.09)}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{font-family:"Nunito Sans";font-weight:700;font-size:16px;border:none;cursor:pointer;
  border-radius:var(--r-md);padding:14px 24px;text-align:center;text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;
  transition:transform .12s var(--ease-spring),box-shadow .12s,filter .12s}
.btn:active{transform:translateY(4px)}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--guava-500);color:#fff;box-shadow:var(--press-guava)}
.btn-primary:active{box-shadow:0 1px 0 var(--press-guava-c)}
.btn-secondary{background:var(--surface-1);color:var(--ink-900);border:1.5px solid var(--ink-300);box-shadow:var(--press-neutral)}
.btn-secondary:active{box-shadow:0 1px 0 var(--ink-300)}
.btn-ghost{background:transparent;color:var(--guava-600);padding:14px 16px}
.btn-ghost:active{transform:translateY(2px)}
.btn-danger{background:var(--danger-500);color:#fff;box-shadow:0 5px 0 var(--press-danger-c)}
.btn-danger:active{box-shadow:0 1px 0 var(--press-danger-c)}
.btn-disabled,.btn:disabled{background:var(--surface-2);color:var(--ink-300);box-shadow:none;cursor:not-allowed;transform:none}
.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-700);
  box-shadow:var(--shadow-1);display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:none}
.btn-lg{padding:16px 24px;font-size:17px}

/* ============================================================
   CHIPS / TAGS
   ============================================================ */
.chip-tag{font-weight:600;font-size:13px;border-radius:var(--r-pill);padding:7px 14px;border:1.5px solid transparent;
  background:var(--surface-2);color:var(--ink-700);cursor:pointer;display:inline-flex;gap:6px;align-items:center;
  transition:transform .12s var(--ease-spring),background .15s,color .15s,border-color .15s}
.chip-tag:active{transform:translateY(2px)}
.chip-tag.sel{background:var(--guava-100);color:var(--guava-600);border-color:var(--guava-300)}
.chip-tag.peri{background:var(--peri-100);color:var(--peri-500)}
.chip-tag.sun{background:var(--sun-100);color:#B27A17}

/* ============================================================
   INPUTS / FIELDS
   ============================================================ */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-700);margin-bottom:6px}
.field input,.field select{width:100%;font-family:"Nunito Sans";font-size:16px;color:var(--ink-900);background:var(--surface-1);
  border:1.5px solid var(--ink-300);border-radius:var(--r-sm);padding:14px 16px;outline:none;
  transition:border .15s,box-shadow .15s}
/* native-select styling: remove default chrome, add a custom caret */
.field select{-webkit-appearance:none;appearance:none;cursor:pointer;font-weight:700;
  padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-500) 50%),linear-gradient(135deg,var(--ink-500) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input::placeholder{color:var(--ink-500)}
.field input:focus,.field select:focus{border-color:var(--guava-500);box-shadow:0 0 0 4px var(--guava-100)}
.field input:focus-visible,.field select:focus-visible{outline:none}
.field.err input{border-color:var(--danger-500)}
.field .help{font-size:12px;margin-top:6px;color:var(--danger-500);display:flex;gap:6px;align-items:center}
.field .help.ok{color:var(--success-500)}
.field.search input{border-radius:var(--r-pill);padding-left:42px;background-image:none}
.field.search{position:relative}
.field.search .mag{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-500);font-size:15px;line-height:1;pointer-events:none}
/* input with a leading affix (e.g. @username) */
.field .affix{position:relative;display:flex;align-items:center}
.field .affix .pre{position:absolute;left:16px;font-weight:700;color:var(--ink-500);font-size:16px;pointer-events:none}
.field .affix input{padding-left:34px}
/* segmented control (Email | Phone, Read | Listen) */
.segmented{display:inline-flex;background:var(--surface-2);border-radius:var(--r-pill);padding:3px;width:100%}
.segmented button{flex:1;border:none;background:transparent;font-family:"Nunito Sans";font-weight:700;font-size:14px;
  padding:9px 14px;border-radius:var(--r-pill);cursor:pointer;color:var(--ink-500);transition:background .15s,color .15s}
.segmented button.on{background:var(--surface-1);color:var(--guava-600);box-shadow:var(--shadow-1)}
/* segmented panel swap — hidden inactive panels stay hidden even if .field sets display */
[hidden]{display:none!important}
/* OTP boxes */
.otp{display:flex;gap:10px;justify-content:center}
.otp .box{width:52px;height:60px;border:1.5px solid var(--ink-300);border-radius:var(--r-sm);background:var(--surface-1);
  display:flex;align-items:center;justify-content:center;font-family:"Baloo 2";font-weight:700;font-size:26px;color:var(--ink-900)}
.otp .box.filled{border-color:var(--guava-500);box-shadow:0 0 0 4px var(--guava-100)}
.otp .box.caret{border-color:var(--guava-500)}
/* DOB three-field row */
.dob-row{display:flex;gap:10px}
.dob-row .field{flex:1;margin-bottom:0}
.dob-row input{text-align:center}
/* generic fine print */
.fineprint{font-size:12px;color:var(--ink-500);line-height:1.5}
.fineprint a{color:var(--guava-600);font-weight:700;text-decoration:none}

/* ============================================================
   PROGRESS
   ============================================================ */
.track{height:10px;background:var(--guava-100);border-radius:var(--r-pill);overflow:hidden}
.track .fill{height:100%;background:linear-gradient(90deg,var(--guava-500),var(--guava-300));border-radius:var(--r-pill);position:relative}
.track .fill::after{content:"";position:absolute;inset:0 0 50% 0;background:rgba(255,255,255,.3);border-radius:var(--r-pill)}
.track.sun .fill{background:linear-gradient(90deg,var(--sun-500),#FFD98A)}
.track.slim{height:6px}
.seg{display:flex;gap:6px}
.seg .s{flex:1;height:8px;border-radius:var(--r-pill);background:var(--ink-300)}
.seg .s.on{background:var(--guava-500)}
/* slim loading bar (splash) */
.loadbar{height:6px;border-radius:var(--r-pill);background:var(--guava-100);overflow:hidden;position:relative}
.loadbar::before{content:"";position:absolute;inset:0;width:38%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--guava-500),var(--sun-500));animation:load 1.6s var(--ease-standard) infinite}
@keyframes load{0%{left:-40%}100%{left:100%}}

/* ============================================================
   BADGES · STREAK · COINS · XP RING
   ============================================================ */
.badge{width:64px;height:64px;border-radius:var(--r-blob);display:flex;align-items:center;justify-content:center;
  font-size:28px;position:relative;box-shadow:var(--shadow-1);flex:0 0 auto}
.badge.bud{background:radial-gradient(circle at 35% 30%,#FFE0A8,var(--sun-500));border:3px solid #E9A93B}
.badge.bloom{background:radial-gradient(circle at 35% 30%,#EAECFF,var(--peri-500));border:3px solid #565FD6}
.badge.full{background:radial-gradient(circle at 35% 30%,#FFD9E4,var(--guava-500));border:3px solid var(--guava-600);box-shadow:0 0 0 4px var(--guava-100),var(--shadow-1)}
.badge.locked{background:var(--surface-2);border:3px solid var(--ink-300);color:var(--ink-300);filter:grayscale(1)}
.badge.sm{width:48px;height:48px;font-size:22px}

.streak{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:var(--r-pill);padding:8px 16px;font-family:"Baloo 2";font-weight:700}
.flame{font-size:20px;filter:drop-shadow(0 0 6px var(--warn-100));animation:flick 1.6s ease-in-out infinite}
@keyframes flick{50%{transform:scale(1.12) rotate(-3deg)}}
.streak.risk{color:var(--warn-500)}
.streak.risk .flame{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

.coin-pill{display:inline-flex;align-items:center;gap:7px;background:var(--sun-100);color:#B27A17;font-family:"Baloo 2";font-weight:700;border-radius:var(--r-pill);padding:8px 15px}
.coin{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE29A,var(--sun-500));border:2px solid #E9A93B;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#8a5f12;flex:0 0 auto}

.xpring{width:120px;height:120px;position:relative}
.xpring svg{transform:rotate(-90deg)}
.xpring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.xpring .lbl b{font-family:"Baloo 2";font-size:26px}
.xpring .lbl span{font-size:11px;color:var(--ink-500);font-weight:700}

/* mini pills used in app bars */
.mini-pill{display:inline-flex;align-items:center;gap:5px;font-family:"Baloo 2";font-weight:700;font-size:13px;padding:5px 10px;border-radius:var(--r-pill)}
.mini-streak{background:var(--warn-100);color:var(--warn-500)}
.mini-coin{background:var(--sun-100);color:#B27A17}

/* ============================================================
   CARDS
   ============================================================ */
.card{background:var(--surface-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:18px}
.card-wash-peri{background:var(--peri-100)}
.card-wash-guava{background:var(--guava-100)}
.card-wash-sun{background:var(--sun-100)}
.card-wash-success{background:var(--success-100)}
/* selectable plan / option card */
.opt-card{background:var(--surface-1);border-radius:var(--r-lg);border:2px solid var(--ink-300);padding:16px;
  box-shadow:var(--shadow-1);cursor:pointer;position:relative;transition:border-color .15s,transform .12s var(--ease-spring)}
.opt-card:active{transform:translateY(2px)}
.opt-card.sel{border-color:var(--guava-500);box-shadow:0 0 0 4px var(--guava-100),var(--shadow-1)}
.opt-card .opt-badge{position:absolute;top:-11px;right:16px;background:var(--guava-500);color:#fff;font-family:"Baloo 2";
  font-weight:700;font-size:11px;padding:3px 12px;border-radius:var(--r-pill);box-shadow:var(--shadow-1)}
.opt-card .opt-check{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;
  background:var(--guava-500);color:#fff;display:none;align-items:center;justify-content:center;font-size:14px}
.opt-card.sel .opt-check{display:flex}
/* quiz answer list — even spacing + compact answer cards */
.list{display:flex;flex-direction:column;gap:10px}
.list .opt-card{padding:13px 46px 13px 15px;border-radius:16px;font-size:14.5px;line-height:1.3}

/* ============================================================
   BOOK CARD / COVERS
   ============================================================ */
.bookcard{width:100%}
.cover{aspect-ratio:3/4;border-radius:var(--r-md);box-shadow:var(--shadow-2);display:flex;flex-direction:column;
  justify-content:flex-end;padding:12px;color:#fff;position:relative;overflow:hidden;background:var(--surface-2)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.cover .ct{font-family:"Baloo 2";font-weight:700;font-size:15px;line-height:1.1;z-index:1}
.cover .cby{font-size:11px;opacity:.85;z-index:1;margin-top:3px}
.bookcard .bt{font-weight:700;font-size:13px;margin-top:8px}
.bookcard .ba{font-size:12px;color:var(--ink-500)}
.cv1{background:linear-gradient(150deg,var(--peri-500),#3E46B8)}
.cv2{background:linear-gradient(150deg,var(--guava-500),var(--sun-500))}
.cv3{background:linear-gradient(150deg,var(--success-500),#0E7A5B)}
.cv4{background:linear-gradient(150deg,var(--sun-500),var(--guava-500))}
.cv5{background:linear-gradient(150deg,#3E46B8,var(--guava-500))}
.cv6{background:linear-gradient(150deg,var(--guava-600),var(--peri-500))}
/* decorative corner blob inside covers */
.cover .cblob{position:absolute;right:-24px;top:-24px;width:80px;height:80px;border-radius:var(--r-blob);background:rgba(255,255,255,.18)}

/* ============================================================
   PHONE FRAME + APP CHROME (inside a screen)
   ============================================================ */
/* one fixed logical device size everywhere (gallery + prototype); the prototype scales the whole device to fit */
.phone{width:320px;height:694px;flex:0 0 auto;background:var(--surface-1);border-radius:46px;
  box-shadow:var(--shadow-3),0 0 0 9px var(--ink-900);overflow:hidden;position:relative;display:flex;flex-direction:column}
:root[data-theme="dark"] .phone{box-shadow:var(--shadow-3),0 0 0 10px #000}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:26px;background:var(--ink-900);border-radius:0 0 16px 16px;z-index:20}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;display:flex;flex-direction:column;background:var(--bg)}
/* mobile-app feel: hide every scrollbar inside the phone (swipe is enough) */
.screen,.screen *{scrollbar-width:none;-ms-overflow-style:none}
.screen::-webkit-scrollbar,.screen *::-webkit-scrollbar{width:0;height:0;display:none}
/* every registered screen's inner root is a full-height flex column */
.screen-inner{flex:1;display:flex;flex-direction:column;min-height:100%}
.pcap{text-align:center;font-weight:700;margin-top:12px;color:var(--ink-700)}

/* app bar inside phone */
.appbar{display:flex;align-items:center;gap:8px;padding:34px 16px 10px;flex:0 0 auto}
.appbar.flat{padding-top:20px}
.appbar .title{font-family:"Baloo 2";font-weight:700;font-size:20px;flex:1}
.appbar .back{width:38px;height:38px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-700);
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:none;flex:0 0 auto}
.appbar .iconbtn{width:38px;height:38px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-700);
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;cursor:pointer;border:none;flex:0 0 auto}

/* generic screen body padding */
.sbody{padding:8px 20px 22px;display:flex;flex-direction:column;flex:1}
/* bottom-anchored action group so screens fill the phone height */
.sactions{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:18px}
.sactions .center-link{margin:2px 0 0}
.sbody.center{justify-content:center;align-items:center;text-align:center}
.sbody h1.screen-title{font-family:"Baloo 2";font-weight:700;font-size:26px;margin:0 0 6px}
.sbody h2.screen-title{font-family:"Baloo 2";font-weight:700;font-size:22px;margin:0 0 6px}
.sbody .sub{color:var(--ink-700);font-size:15px;margin:0 0 18px}
.spacer{flex:1}
.stack{display:flex;flex-direction:column;gap:12px}
.wordmark{font-family:"Baloo 2";font-weight:700;font-size:28px;letter-spacing:-.01em}
.wordmark .accent{background:linear-gradient(120deg,var(--guava-500),var(--sun-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{font-family:"Baloo 2";font-weight:600;color:var(--guava-600);font-size:15px;letter-spacing:.02em}
.link{color:var(--guava-600);font-weight:700;cursor:pointer;text-decoration:none}
.center-link{text-align:center;font-size:14px;margin-top:14px}

/* reward chips row (done screen) */
.reward-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.reward{background:var(--surface-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px 16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;min-width:120px}
.reward b{font-family:"Baloo 2";font-size:15px}
.reward span{font-size:12px;color:var(--ink-500)}

/* bottom tab bar (used inside app screens where relevant) */
/* clean modern pill nav — inactive tabs are icons; the active tab expands into a guava pill with its label */
/* bottom tab bar — labeled tabs with a raised center action (Live PK) */
.tabbar{position:relative;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-around;
  gap:2px;margin:0 10px 10px;padding:9px 6px 10px;background:var(--surface-1);
  border-radius:24px;box-shadow:0 10px 26px rgba(53,20,35,.16),inset 0 0 0 1px var(--surface-2);
  overflow:visible;z-index:10}
.tabbar .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:5px;flex:1;padding:4px 2px;color:var(--ink-500);cursor:pointer;
  font-family:"Baloo 2",sans-serif;font-weight:700;font-size:10.5px;line-height:1;
  transition:color .18s,transform .12s var(--ease-spring)}
.tabbar .tab .ico{font-size:21px;line-height:1;transition:transform .2s var(--ease-spring);opacity:.62}
.tabbar .tab .lbl{white-space:nowrap;letter-spacing:.01em}
.tabbar .tab.on{color:var(--ink-900)}
.tabbar .tab.on .ico{transform:translateY(-1px) scale(1.08);opacity:1}
.tabbar .tab:active{transform:scale(.9)}
/* raised center action (Live / Reader PK) */
.tabbar .tab.center{gap:7px}
.tabbar .tab.center .ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-top:-30px;font-size:23px;opacity:1;
  background:linear-gradient(150deg,var(--guava-500),var(--guava-600));
  box-shadow:0 9px 18px rgba(255,92,134,.5),0 0 0 5px var(--surface-1);
  transition:transform .22s var(--ease-spring),box-shadow .2s}
.tabbar .tab.center .lbl{color:var(--ink-900);font-weight:800}
.tabbar .tab.center:active .ico{transform:scale(.93)}
.tabbar .tab.center.on .ico{transform:none;box-shadow:0 11px 22px rgba(255,92,134,.6),0 0 0 5px var(--surface-1)}

/* reader screen (Lora body + drop cap) */
.reader{background:var(--paper);color:var(--ink-900);flex:1;display:flex;flex-direction:column}
.reader-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:26px 14px 4px}
.reader-top .r-back,.reader-top .r-aa{width:30px;height:30px;border-radius:10px;background:var(--surface-2);
  color:var(--ink-700);display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;border:none;font-size:14px;flex:0 0 auto}
/* compact, less-round Read|Listen toggle in the reader */
.reader-top .segmented{padding:2px;border-radius:11px;width:auto}
.reader-top .segmented button{padding:6px 15px;font-size:13px;border-radius:9px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.reader-body{padding:6px 22px 16px;flex:1}
.reader-body .chap{font-size:12px;color:var(--ink-500);font-weight:700;margin:10px 0 14px}
.reader-body p{font-family:"Lora";font-size:18px;line-height:1.72;margin:0 0 15px}
.reader-body p .drop{float:left;font-family:"Baloo 2";font-weight:700;font-size:52px;line-height:.8;padding:4px 8px 0 0;color:var(--guava-500)}
.reader-foot{padding:10px 22px 18px;display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.reader-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-500);font-weight:600}

/* checkout / summary rows */
.sum-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--surface-2)}
.sum-row:last-child{border-bottom:none}
.sum-row .k{font-size:14px;color:var(--ink-700)}
.sum-row .v{font-weight:700;font-size:14px}
.pay-row{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:var(--r-md);padding:12px 14px}
.pay-row .picon{width:36px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--peri-500),var(--guava-500));flex:0 0 auto}
.due{font-family:"Baloo 2";font-weight:700;font-size:15px}

/* book grid (choose first book) */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.book-grid .bookcard{cursor:pointer}

/* ============================================================
   PROTOTYPE CHROME (app.html) — top bar, flow panel, engine
   ============================================================ */
.proto-body{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(120% 90% at 12% -5%,var(--guava-100),transparent 45%),
  radial-gradient(120% 90% at 95% 0%,var(--sun-100),transparent 40%),var(--bg)}

/* top bar */
.proto-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;height:60px;padding:0 16px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink-300)}
.proto-topbar .menu{width:44px;height:44px;border-radius:var(--r-pill);background:var(--surface-1);border:1.5px solid var(--ink-300);
  box-shadow:var(--shadow-1);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-900)}
.proto-title{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.proto-title .t-name{font-family:"Baloo 2";font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proto-title .t-code{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--guava-600);text-transform:uppercase}
.proto-counter{font-family:"Baloo 2";font-weight:700;font-size:14px;color:var(--ink-700);padding:6px 12px;
  background:var(--surface-1);border:1.5px solid var(--ink-300);border-radius:var(--r-pill);white-space:nowrap}
.proto-nav{display:flex;gap:8px}
.proto-nav button{width:44px;height:44px;border-radius:var(--r-pill);background:var(--surface-1);border:1.5px solid var(--ink-300);
  box-shadow:var(--press-neutral);font-size:18px;cursor:pointer;color:var(--ink-900);transition:transform .12s var(--ease-spring),box-shadow .12s}
.proto-nav button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink-300)}
.proto-nav button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

/* stage that holds the phone */
.proto-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 16px 40px}
.proto-stage{padding:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;height:calc(100dvh - 58px)}
.proto-stage .phone{transform:scale(var(--fit,1));transform-origin:center center}

/* ===== Mobile: full-screen at natural size (no shrink), navbar pinned. The desktop
   bezel would force the whole mock to scale down on a phone-sized screen (cramped),
   so on real phones we drop the bezel and fill the viewport instead. ===== */
@media (max-width:600px){
  .proto-topbar{height:52px}
  .proto-stage{padding:0;height:calc(100dvh - 52px);overflow:hidden}
  .proto-stage .phone{transform:none!important;width:100vw;height:100%;max-width:100vw;
    border-radius:0;box-shadow:none;border:none}
  :root[data-theme="dark"] .phone{box-shadow:none}
  .phone .notch{display:none}
  .phone .appbar{padding-top:14px}
  .home-head{padding-top:16px}
}

/* screen transitions */
.screen-inner.enter-right{animation:slideInRight .32s var(--ease-standard)}
.screen-inner.enter-left{animation:slideInLeft .32s var(--ease-standard)}
.screen-inner.enter-fade{animation:fadeIn .28s var(--ease-standard)}
@keyframes slideInRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* flow panel (floating) */
.flow-scrim{position:fixed;inset:0;background:rgba(35,24,33,.4);z-index:70;opacity:0;pointer-events:none;transition:opacity .25s}
.flow-scrim.open{opacity:1;pointer-events:auto}
.flow-panel{position:fixed;top:0;left:0;height:100%;width:320px;max-width:88vw;z-index:80;background:var(--surface-1);
  box-shadow:var(--shadow-3);border-right:1.5px solid var(--ink-300);transform:translateX(-104%);transition:transform .32s var(--ease-out-soft);
  display:flex;flex-direction:column;padding:22px 20px}
.flow-panel.open{transform:translateX(0)}
.flow-panel .fp-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.flow-panel .fp-brand .brand-dot{width:34px;height:34px}
.flow-panel .fp-brand b{font-family:"Baloo 2";font-weight:700;font-size:18px;display:block}
.flow-panel .fp-brand span{font-size:12px;color:var(--ink-500);font-weight:700}
.fp-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin:6px 0 8px}
.fp-select{width:100%;font-family:"Nunito Sans";font-weight:700;font-size:15px;color:var(--ink-900);background:var(--surface-1);
  border:1.5px solid var(--ink-300);border-radius:var(--r-sm);padding:13px 14px;outline:none;cursor:pointer;margin-bottom:22px}
.fp-select:focus{border-color:var(--guava-500);box-shadow:0 0 0 4px var(--guava-100)}
.fp-toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:22px}
.fp-toggle-row span{font-weight:700;font-size:14px}
.switch{position:relative;width:50px;height:28px;border-radius:var(--r-pill);background:var(--ink-300);border:none;cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s var(--ease-spring)}
.switch.on{background:var(--guava-500)}
.switch.on::after{transform:translateX(22px)}
.fp-spacer{flex:1}
.fp-steprow{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1.5px solid var(--surface-2);padding-top:16px}
.fp-steprow button{width:44px;height:44px;border-radius:var(--r-pill);background:var(--surface-1);border:1.5px solid var(--ink-300);
  box-shadow:var(--press-neutral);font-size:18px;cursor:pointer;color:var(--ink-900);transition:transform .12s var(--ease-spring),box-shadow .12s}
.fp-steprow button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink-300)}
.fp-steprow .fp-count{font-family:"Baloo 2";font-weight:700;font-size:15px}

/* ============================================================
   GALLERY PAGE (journeys/*.html) + HUB (index.html)
   ============================================================ */
.page-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.page-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;height:64px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink-300);
  padding:0 24px}
.page-topbar .nav-spacer{flex:1}
.themebtn{font-family:"Nunito Sans";font-weight:700;cursor:pointer;border:1.5px solid var(--ink-300);
  background:var(--surface-1);color:var(--ink-900);border-radius:var(--r-pill);padding:9px 16px;font-size:14px;
  box-shadow:var(--press-neutral);transition:transform .12s var(--ease-spring),box-shadow .12s}
.themebtn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink-300)}

.page-head{padding:48px 0 12px}
.page-head .eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--guava-600);background:var(--guava-100);padding:6px 14px;border-radius:var(--r-pill)}
.page-head h1{font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.02em;margin:16px 0 10px}
.page-head p{font-size:17px;color:var(--ink-700);max-width:60ch;margin:0}
.page-head .accent{background:linear-gradient(120deg,var(--guava-500),var(--sun-500));-webkit-background-clip:text;background-clip:text;color:transparent}

/* gallery grid of phone frames */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 24px;
  justify-items:center;padding:36px 0 64px}
.gallery-cell{display:flex;flex-direction:column;align-items:center}
.gallery-cell .phone{width:320px;height:694px}
.gallery-cell .cap{margin-top:14px;text-align:center}
.gallery-cell .cap .code{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--guava-600)}
.gallery-cell .cap .name{font-family:"Baloo 2";font-weight:600;font-size:15px}

/* hub */
.hub-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:44px 0 8px}
.hub-hero .sprout-scale{--s:.8}
.hub-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--guava-100),var(--peri-100));border-radius:var(--r-xl);padding:26px 28px;
  box-shadow:var(--shadow-1);position:relative;overflow:hidden;margin:24px 0 8px;text-decoration:none;color:inherit;
  border:1.5px solid transparent;transition:transform .18s var(--ease-spring),box-shadow .18s}
.hub-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.hub-cta .hc-txt h2{font-size:24px;margin:0 0 6px}
.hub-cta .hc-txt p{margin:0;color:var(--ink-700);font-size:15px;max-width:52ch}
.hub-cta .hc-go{font-family:"Baloo 2";font-weight:700;font-size:16px;color:#fff;background:var(--guava-500);
  padding:14px 22px;border-radius:var(--r-md);box-shadow:var(--press-guava);white-space:nowrap;flex:0 0 auto}

.section-kicker{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--guava-600);margin:36px 0 16px}
.journey-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding-bottom:64px}
.journey-card{background:var(--surface-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:22px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
  border:1.5px solid transparent;transition:transform .18s var(--ease-spring),box-shadow .18s,border-color .18s}
.journey-card:not(.soon):hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--guava-300)}
.journey-card .jnum{width:42px;height:42px;border-radius:var(--r-blob);background:linear-gradient(135deg,var(--guava-500),var(--sun-500));
  color:#fff;font-family:"Baloo 2";font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
.journey-card h3{font-size:19px;margin:2px 0 0}
.journey-card .jmeta{font-size:13px;color:var(--ink-500);font-weight:700}
.journey-card .jgo{margin-top:auto;font-weight:700;color:var(--guava-600);font-size:14px}
.journey-card.soon{opacity:.55;filter:saturate(.7)}
.journey-card.soon .jnum{background:var(--surface-2);color:var(--ink-500)}
.journey-card.soon .jgo{color:var(--ink-500)}
.soon-tag{position:absolute;top:16px;right:16px;background:var(--surface-2);color:var(--ink-500);font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.04em}

.page-foot{padding:28px 0 56px;text-align:center;color:var(--ink-500);font-size:13px;border-top:1.5px dashed var(--ink-300)}

@media(max-width:640px){
  .proto-title .t-name{max-width:120px}
  .hub-cta .hc-txt{flex:1 1 100%}
}
/* ===== Updated Bloom — cuter, interactive Sprout ===== */
.sprout{cursor:pointer}
.sprout-scale{position:relative}
/* keep the mascot cute & consistent in BOTH themes — these tokens flip in dark mode and made the eyes look eerie */
.sprout .pages{background:#fffaf3}
.sprout .eye{background:#39304f}
.sprout .mouth{border-color:#39304f}
.sprout .cheek{background:#ffb3c6}
/* nub hands via pseudo-elements (no markup change) */
.sprout::before,.sprout::after{content:"";position:absolute;width:16px;height:16px;background:var(--guava-600);border-radius:50%;bottom:32px;z-index:2;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.sprout::before{left:8px}.sprout::after{right:8px}
.sprout.idle::before{animation:handbob 3.2s var(--ease-standard) infinite}
.sprout.idle::after{animation:handbob 3.2s var(--ease-standard) .2s infinite}
@keyframes handbob{50%{transform:translateY(-2px)}}
/* bigger sparkly eyes + animated blush */
.sprout .eye{width:17px;height:19px}
.sprout .eye::after{width:6px;height:6px;box-shadow:0 8px 0 -3px rgba(255,255,255,.6)}
.sprout.idle .cheek{animation:blush 3.4s var(--ease-standard) infinite}
@keyframes blush{50%{opacity:.55;transform:scale(1.12)}}
/* happy squint state on tap */
.sprout.happy .eye{height:8px;background:transparent;border-radius:0 0 12px 12px;border-bottom:4px solid #39304f}
.sprout.happy .eye::after{display:none}
.sprout.happy .cheek{opacity:1;transform:scale(1.28)}
.sprout.happy .flower{opacity:1}
.sprout.happy .mouth{width:22px;height:12px;left:60px}
/* floating hearts + speech bubble (spawned by the engine on tap) */
.emote{position:absolute;top:22%;font-size:20px;pointer-events:none;z-index:6;opacity:0;will-change:transform,opacity;
  animation:emotefloat 1.15s cubic-bezier(.22,1,.36,1) forwards}
@keyframes emotefloat{0%{opacity:0;transform:translate(-50%,4px) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-70px) scale(1.1)}}
.sbubble{position:absolute;top:-16px;left:50%;white-space:nowrap;background:var(--surface-1);color:var(--guava-600);
  font-family:"Baloo 2";font-weight:700;font-size:12px;padding:5px 11px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-2);z-index:7;border:2px solid var(--guava-300);transform:translateX(-50%) scale(0)}
.sbubble::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:var(--surface-1);border-right:2px solid var(--guava-300);border-bottom:2px solid var(--guava-300)}
.sbubble.show{transform:translateX(-50%) scale(1);animation:sbub 1.5s var(--ease-spring) forwards}
@keyframes sbub{0%{transform:translateX(-50%) scale(0)}16%{transform:translateX(-50%) scale(1.1)}30%{transform:translateX(-50%) scale(1)}82%{transform:translateX(-50%) scale(1)}100%{transform:translateX(-50%) scale(0)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   ===== Bloom Component Library (extended) =====
   Append-only, reusable, on-brand components. All tokens only,
   so every class is light + dark safe. New names are prefixed
   `b-` to avoid collisions with the classes above. Mobile-first;
   sized to fit a ~320px phone. Grouped by category.
   ============================================================ */

/* ------------------------------------------------------------
   CARDS & CONTAINERS
   ------------------------------------------------------------ */
/* base surface card */
.b-card{background:var(--surface-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  padding:16px;border:1.5px solid transparent;position:relative}
.b-card-pad-sm{padding:12px}
.b-card-pad-lg{padding:20px}
.b-card-outline{background:transparent;box-shadow:none;border-color:var(--ink-300)}
.b-card-inset{background:var(--surface-2);box-shadow:none}

/* horizontal combo card: cover + body + optional footer */
.b-card-media{display:flex;gap:14px;background:var(--surface-1);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:12px;align-items:center;overflow:hidden}
.b-card-media .bcm-cover{flex:0 0 62px;width:62px;aspect-ratio:3/4;border-radius:var(--r-sm);
  overflow:hidden;box-shadow:var(--shadow-1);background:var(--surface-2);position:relative}
.b-card-media .bcm-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.b-card-media .bcm-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.b-card-media .bcm-title{font-family:"Baloo 2";font-weight:700;font-size:15px;line-height:1.2}
.b-card-media .bcm-sub{font-size:12px;color:var(--ink-500);font-weight:600}
.b-card-media .bcm-foot{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}

/* gradient hero card with an accent glow */
.b-card-feature{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:20px;color:#fff;
  background:linear-gradient(135deg,var(--guava-500),var(--peri-500));box-shadow:var(--shadow-2)}
.b-card-feature::before{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;
  border-radius:var(--r-blob);background:radial-gradient(circle,rgba(255,255,255,.32),transparent 70%);pointer-events:none}
.b-card-feature h3,.b-card-feature .bcf-title{font-family:"Baloo 2";font-weight:700;font-size:20px;margin:0 0 6px;position:relative}
.b-card-feature p,.b-card-feature .bcf-sub{margin:0;font-size:13px;opacity:.92;position:relative}
.b-card-feature.sun{background:linear-gradient(135deg,var(--sun-500),var(--guava-500))}
.b-card-feature.peri{background:linear-gradient(135deg,var(--peri-500),var(--guava-500))}
/* .light = feature card on a LIGHT background → dark text (not white) */
.b-card-feature.light{color:var(--ink-900)}
.b-card-feature.light::before{display:none}
.b-card-feature.light .bcf-sub,.b-card-feature.light p{opacity:1;color:var(--ink-500)}

/* subtle frosted card */
.b-card-glass{border-radius:var(--r-lg);padding:16px;position:relative;
  background:color-mix(in srgb,var(--surface-1) 62%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid color-mix(in srgb,var(--ink-300) 55%,transparent);box-shadow:var(--shadow-1)}

/* KPI stat tiles: big number + label + delta */
.b-stat-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.b-stat{background:var(--surface-1);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:11px 8px;
  display:flex;flex-direction:column;gap:2px;min-width:0;text-align:center;align-items:center}
.b-stat .bs-num{font-family:"Baloo 2";font-weight:700;font-size:21px;line-height:1;color:var(--ink-900)}
.b-stat .bs-label{font-size:11px;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:.04em}
.b-stat .bs-delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;margin-top:2px}
.b-stat .bs-delta.up{color:var(--success-500)}
.b-stat .bs-delta.down{color:var(--danger-500)}
.b-stat .bs-delta.flat{color:var(--ink-500)}
.b-stat.accent{background:var(--guava-100)}
.b-stat.accent .bs-num{color:var(--guava-600)}

/* list with icon + title/sub + trailing chevron/value */
.b-list{display:flex;flex-direction:column;background:var(--surface-1);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);overflow:hidden}
.b-list-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--surface-2);
  cursor:pointer;background:transparent;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;
  color:inherit;font:inherit;transition:background .15s}
.b-list-item:last-child{border-bottom:none}
.b-list-item:active{background:var(--surface-2)}
.b-list-item .bli-ico{width:38px;height:38px;border-radius:var(--r-sm);flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:18px;background:var(--guava-100);color:var(--guava-600)}
.b-list-item .bli-ico.peri{background:var(--peri-100);color:var(--peri-500)}
.b-list-item .bli-ico.sun{background:var(--sun-100);color:#B27A17}
.b-list-item .bli-ico.success{background:var(--success-100);color:var(--success-500)}
.b-list-item .bli-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.b-list-item .bli-title{font-weight:700;font-size:14px;color:var(--ink-900)}
.b-list-item .bli-sub{font-size:12px;color:var(--ink-500)}
.b-list-item .bli-val{font-weight:700;font-size:14px;color:var(--ink-700);flex:0 0 auto}
.b-list-item .bli-chev{color:var(--ink-300);font-size:16px;flex:0 0 auto}

/* callout / announcement banner: icon + text + action */
.b-banner{display:flex;align-items:center;gap:12px;background:var(--peri-100);border-radius:var(--r-lg);
  padding:14px;position:relative;overflow:hidden}
.b-banner .bb-ico{width:40px;height:40px;border-radius:var(--r-blob);flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:20px;background:var(--peri-500);color:#fff;box-shadow:var(--shadow-1)}
.b-banner .bb-body{flex:1;min-width:0}
.b-banner .bb-title{font-family:"Baloo 2";font-weight:700;font-size:14px;line-height:1.2}
.b-banner .bb-text{font-size:12px;color:var(--ink-700);margin-top:2px}
.b-banner .bb-action{flex:0 0 auto;font-weight:700;font-size:13px;color:var(--peri-500);cursor:pointer;
  background:none;border:none;padding:6px 8px}
.b-banner.guava{background:var(--guava-100)}.b-banner.guava .bb-ico{background:var(--guava-500)}.b-banner.guava .bb-action{color:var(--guava-600)}
.b-banner.sun{background:var(--sun-100)}.b-banner.sun .bb-ico{background:var(--sun-500)}.b-banner.sun .bb-action{color:#B27A17}
.b-banner.success{background:var(--success-100)}.b-banner.success .bb-ico{background:var(--success-500)}.b-banner.success .bb-action{color:var(--success-500)}
.b-banner.warn{background:var(--warn-100)}.b-banner.warn .bb-ico{background:var(--warn-500)}.b-banner.warn .bb-action{color:var(--warn-500)}
.b-banner.danger{background:var(--danger-100)}.b-banner.danger .bb-ico{background:var(--danger-500)}.b-banner.danger .bb-action{color:var(--danger-500)}

/* mission / quest card with progress + reward */
.b-quest{background:var(--surface-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px;
  border:1.5px solid var(--surface-2);display:flex;flex-direction:column;gap:10px}
.b-quest .bq-head{display:flex;align-items:center;gap:10px}
.b-quest .bq-ico{width:44px;height:44px;border-radius:var(--r-blob);flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:22px;background:linear-gradient(135deg,var(--guava-500),var(--sun-500));color:#fff;box-shadow:var(--shadow-1)}
.b-quest .bq-info{flex:1;min-width:0}
.b-quest .bq-title{font-family:"Baloo 2";font-weight:700;font-size:15px;line-height:1.15}
.b-quest .bq-sub{font-size:12px;color:var(--ink-500)}
.b-quest .bq-reward{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:"Baloo 2";font-weight:700;
  font-size:12px;color:#B27A17;background:var(--sun-100);padding:5px 10px;border-radius:var(--r-pill)}
.b-quest .bq-bar{height:8px;background:var(--guava-100);border-radius:var(--r-pill);overflow:hidden}
.b-quest .bq-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--guava-500),var(--guava-300));border-radius:var(--r-pill)}
.b-quest.done{border-color:var(--success-500)}
.b-quest.done .bq-ico{background:var(--success-500)}

/* section header: eyebrow + title + see all */
.b-section{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 12px}
.b-section .bsec-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--guava-600)}
.b-section .bsec-title{font-family:"Baloo 2";font-weight:700;font-size:19px;line-height:1.1;margin:2px 0 0}
.b-section .bsec-all{flex:0 0 auto;font-weight:700;font-size:13px;color:var(--guava-600);cursor:pointer;
  background:none;border:none;padding:4px 0;display:inline-flex;align-items:center;gap:3px}

/* ------------------------------------------------------------
   INPUTS & CONTROLS
   ------------------------------------------------------------ */
/* styled dropdown / combobox look with a caret */
.b-select{position:relative;display:inline-flex;align-items:center;width:100%}
.b-select select,.b-select .bsel-face{width:100%;font-family:"Nunito Sans";font-weight:700;font-size:15px;color:var(--ink-900);
  background:var(--surface-1);border:1.5px solid var(--ink-300);border-radius:var(--r-sm);padding:13px 40px 13px 14px;
  outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
.b-select select:focus,.b-select.open .bsel-face{border-color:var(--guava-500);box-shadow:0 0 0 4px var(--guava-100)}
.b-select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:2.5px solid var(--ink-500);border-bottom:2.5px solid var(--ink-500);
  transform:translateY(-70%) rotate(45deg);border-radius:1px}

/* menu panel */
.b-dropdown{background:var(--surface-1);border-radius:var(--r-md);box-shadow:var(--shadow-3);
  border:1.5px solid var(--surface-2);padding:6px;min-width:180px;display:flex;flex-direction:column;gap:2px}
.b-dropdown .bdd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;
  font-weight:600;font-size:14px;color:var(--ink-900);background:none;border:none;width:100%;text-align:left;transition:background .12s}
.b-dropdown .bdd-item:hover,.b-dropdown .bdd-item:active{background:var(--surface-2)}
.b-dropdown .bdd-item.sel{color:var(--guava-600);background:var(--guava-100)}
.b-dropdown .bdd-item .bdd-ico{font-size:16px;width:20px;text-align:center}
.b-dropdown .bdd-sep{height:1px;background:var(--surface-2);margin:4px 6px}

/* accordion — expand / collapse (checkbox or [hidden] toggle friendly) */
.b-accordion{background:var(--surface-1);border-radius:var(--r-md);box-shadow:var(--shadow-1);
  border:1.5px solid var(--surface-2);overflow:hidden}
.b-accordion .bac-head{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;
  font-family:"Baloo 2";font-weight:700;font-size:15px;color:var(--ink-900);background:none;border:none;width:100%;text-align:left}
.b-accordion .bac-head .bac-caret{margin-left:auto;flex:0 0 auto;color:var(--ink-500);font-size:14px;
  transition:transform .22s var(--ease-standard)}
.b-accordion .bac-body{padding:0 14px;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .28s var(--ease-standard),opacity .2s,padding .28s var(--ease-standard)}
.b-accordion.open .bac-body{max-height:400px;opacity:1;padding:0 14px 14px}
.b-accordion.open .bac-caret{transform:rotate(180deg)}
.b-accordion .bac-body>*{font-size:13px;color:var(--ink-700)}
/* checkbox-driven variant: <input class="bac-toggle" hidden> right before .b-accordion, or wrap with label */
.b-accordion>.bac-toggle{display:none}
.b-accordion>.bac-toggle:checked~.bac-body{max-height:400px;opacity:1;padding:0 14px 14px}
.b-accordion>.bac-toggle:checked~.bac-head .bac-caret{transform:rotate(180deg)}

/* toggle switch (distinct from prototype .switch) */
.b-switch{position:relative;display:inline-block;width:52px;height:30px;flex:0 0 auto;cursor:pointer}
.b-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.b-switch .bsw-track{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--ink-300);transition:background .2s}
.b-switch .bsw-thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-1);transition:transform .22s var(--ease-spring)}
.b-switch input:checked~.bsw-track{background:var(--success-500)}
.b-switch input:checked~.bsw-thumb{transform:translateX(22px)}
.b-switch input:focus-visible~.bsw-track{box-shadow:0 0 0 4px var(--guava-100)}
.b-switch.guava input:checked~.bsw-track{background:var(--guava-500)}

/* top segmented tabs with animated active indicator */
.b-tabs{position:relative;display:flex;background:var(--surface-2);border-radius:var(--r-pill);padding:4px;gap:2px}
.b-tabs .bt-btn{flex:1;position:relative;z-index:1;border:none;background:none;font-family:"Nunito Sans";font-weight:700;
  font-size:14px;padding:9px 10px;border-radius:var(--r-pill);cursor:pointer;color:var(--ink-500);transition:color .2s;white-space:nowrap}
.b-tabs .bt-btn.on{color:var(--guava-600)}
.b-tabs .bt-ind{position:absolute;top:4px;bottom:4px;z-index:0;border-radius:var(--r-pill);background:var(--surface-1);
  box-shadow:var(--shadow-1);transition:left .28s var(--ease-spring),width .28s var(--ease-spring)}
/* underline variant */
.b-tabs.line{background:none;border-radius:0;border-bottom:1.5px solid var(--surface-2);padding:0;gap:14px}
.b-tabs.line .bt-btn{flex:0 0 auto;padding:10px 2px;border-radius:0}
.b-tabs.line .bt-ind{top:auto;bottom:-1.5px;height:3px;border-radius:var(--r-pill);background:var(--guava-500);box-shadow:none}

/* search field variant */
.b-search{position:relative;display:flex;align-items:center}
.b-search input{width:100%;font-family:"Nunito Sans";font-size:15px;color:var(--ink-900);background:var(--surface-2);
  border:1.5px solid transparent;border-radius:var(--r-pill);padding:12px 16px 12px 42px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.b-search input::placeholder{color:var(--ink-500)}
.b-search input:focus{background:var(--surface-1);border-color:var(--guava-500);box-shadow:0 0 0 4px var(--guava-100)}
.b-search .bsr-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-500);font-size:15px;pointer-events:none}
.b-search .bsr-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
  background:var(--ink-300);color:var(--surface-1);border:none;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}

/* numbered progress steps */
.b-stepper{display:flex;align-items:center;width:100%}
.b-stepper .bstp{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;position:relative}
.b-stepper .bstp .bstp-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2";font-weight:700;font-size:14px;background:var(--surface-2);color:var(--ink-500);
  border:2px solid var(--surface-2);transition:background .2s,color .2s,border-color .2s}
.b-stepper .bstp .bstp-cap{font-size:10px;font-weight:700;color:var(--ink-500);white-space:nowrap}
.b-stepper .bstp-line{flex:1;height:3px;background:var(--surface-2);margin:0 4px;border-radius:var(--r-pill);margin-bottom:19px;transition:background .2s}
.b-stepper .bstp.done .bstp-dot{background:var(--success-500);border-color:var(--success-500);color:#fff}
.b-stepper .bstp.on .bstp-dot{background:var(--guava-500);border-color:var(--guava-500);color:#fff;box-shadow:0 0 0 4px var(--guava-100)}
.b-stepper .bstp.on .bstp-cap,.b-stepper .bstp.done .bstp-cap{color:var(--ink-900)}
.b-stepper .bstp-line.done{background:var(--success-500)}

/* chip variants (distinct from .chip-tag) */
.b-chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;border-radius:var(--r-pill);
  padding:7px 13px;border:1.5px solid transparent;background:var(--guava-500);color:#fff;cursor:pointer;
  transition:transform .12s var(--ease-spring),filter .15s}
.b-chip:active{transform:scale(.95)}
.b-chip.outline{background:transparent;color:var(--ink-700);border-color:var(--ink-300)}
.b-chip.accent{background:var(--peri-100);color:var(--peri-500)}
.b-chip.sun{background:var(--sun-100);color:#B27A17}
.b-chip.success{background:var(--success-100);color:var(--success-500)}
.b-chip.ghost{background:var(--surface-2);color:var(--ink-700)}
.b-chip .bchip-x{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.35);display:flex;align-items:center;
  justify-content:center;font-size:11px;margin-right:-3px;cursor:pointer}
.b-chip.outline .bchip-x,.b-chip.ghost .bchip-x{background:var(--ink-300);color:var(--surface-1)}

/* ------------------------------------------------------------
   GAMIFICATION
   ------------------------------------------------------------ */
/* labeled XP progress bar with fill + shimmer */
.b-xpbar{display:flex;flex-direction:column;gap:6px}
.b-xpbar .bxp-top{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:12px}
.b-xpbar .bxp-top .bxp-lbl{color:var(--ink-700);display:inline-flex;align-items:center;gap:5px}
.b-xpbar .bxp-top .bxp-val{color:var(--guava-600);font-family:"Baloo 2"}
.b-xpbar .bxp-track{height:12px;background:var(--peri-100);border-radius:var(--r-pill);overflow:hidden;position:relative}
.b-xpbar .bxp-fill{height:100%;border-radius:var(--r-pill);position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--peri-500),var(--guava-500))}
.b-xpbar .bxp-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-100%);animation:bXpShimmer 2s var(--ease-standard) infinite}
@keyframes bXpShimmer{100%{transform:translateX(100%)}}

/* progress ring wrapper + label (wrap an inline SVG) */
.b-ring{position:relative;width:104px;height:104px;flex:0 0 auto}
.b-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.b-ring .bring-track{fill:none;stroke:var(--surface-2);stroke-width:10}
.b-ring .bring-fill{fill:none;stroke:var(--guava-500);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease-out-soft)}
.b-ring .bring-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.b-ring .bring-lbl b{font-family:"Baloo 2";font-size:24px;color:var(--ink-900)}
.b-ring .bring-lbl span{font-size:10px;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:.04em}
.b-ring.peri .bring-fill{stroke:var(--peri-500)}
.b-ring.sun .bring-fill{stroke:var(--sun-500)}
.b-ring.success .bring-fill{stroke:var(--success-500)}

/* level badge / card with tier */
.b-level{display:inline-flex;align-items:center;gap:10px;background:var(--surface-1);border-radius:var(--r-md);
  box-shadow:var(--shadow-1);padding:8px 14px 8px 8px;border:1.5px solid var(--surface-2)}
.b-level .blv-badge{width:44px;height:44px;border-radius:var(--r-blob);flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-family:"Baloo 2";font-weight:700;font-size:18px;color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--sun-500),var(--guava-500));box-shadow:0 0 0 3px var(--guava-100)}
.b-level .blv-info{display:flex;flex-direction:column;line-height:1.1}
.b-level .blv-tier{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--guava-600)}
.b-level .blv-name{font-family:"Baloo 2";font-weight:700;font-size:15px;color:var(--ink-900)}

/* 7-day streak calendar with lit/unlit days + flame */
.b-streak-cal{display:flex;gap:6px;justify-content:space-between}
.b-streak-cal .bsc-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.b-streak-cal .bsc-dot{width:30px;height:30px;border-radius:var(--r-blob);display:flex;align-items:center;justify-content:center;
  font-size:14px;background:var(--surface-2);color:var(--ink-300);border:2px solid transparent;transition:transform .15s var(--ease-spring)}
.b-streak-cal .bsc-lbl{font-size:10px;font-weight:700;color:var(--ink-500)}
.b-streak-cal .bsc-day.lit .bsc-dot{background:linear-gradient(135deg,var(--warn-500),var(--guava-500));color:#fff;
  box-shadow:0 3px 8px rgba(255,92,134,.4)}
.b-streak-cal .bsc-day.today .bsc-dot{border-color:var(--guava-500);color:var(--guava-600);background:var(--guava-100)}
.b-streak-cal .bsc-day.today.lit .bsc-dot{color:#fff}

/* unlockable achievement card: locked vs unlocked */
.b-achievement{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--surface-1);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px 12px;border:1.5px solid var(--surface-2);position:relative}
.b-achievement .bach-medal{width:56px;height:56px;border-radius:var(--r-blob);display:flex;align-items:center;justify-content:center;
  font-size:26px;background:radial-gradient(circle at 35% 30%,var(--sun-100),var(--sun-500));color:#fff;box-shadow:var(--shadow-1)}
.b-achievement .bach-name{font-family:"Baloo 2";font-weight:700;font-size:13px;color:var(--ink-900);line-height:1.15}
.b-achievement .bach-desc{font-size:11px;color:var(--ink-500)}
.b-achievement.unlocked{border-color:var(--sun-500)}
.b-achievement.locked{filter:none}
.b-achievement.locked .bach-medal{background:var(--surface-2);color:var(--ink-300);box-shadow:none}
.b-achievement.locked .bach-name{color:var(--ink-500)}
.b-achievement.locked::after{content:"\1F512";position:absolute;top:10px;right:10px;font-size:13px;opacity:.6}

/* reward pill / card for XP / coins / gems */
.b-reward{display:inline-flex;align-items:center;gap:7px;font-family:"Baloo 2";font-weight:700;font-size:13px;
  border-radius:var(--r-pill);padding:7px 14px;background:var(--guava-100);color:var(--guava-600)}
.b-reward .brw-ico{font-size:15px;line-height:1}
.b-reward.xp{background:var(--peri-100);color:var(--peri-500)}
.b-reward.coin{background:var(--sun-100);color:#B27A17}
.b-reward.gem{background:var(--success-100);color:var(--success-500)}
.b-reward-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface-1);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:14px 18px;min-width:96px;border:1.5px solid var(--surface-2)}
.b-reward-card b{font-family:"Baloo 2";font-size:18px;color:var(--ink-900)}
.b-reward-card span{font-size:11px;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:.04em}

/* gem + coin counters */
.b-gem,.b-coin{display:inline-flex;align-items:center;gap:6px;font-family:"Baloo 2";font-weight:700;font-size:14px;
  border-radius:var(--r-pill);padding:6px 12px 6px 6px}
.b-gem{background:var(--success-100);color:var(--success-500)}
.b-coin{background:var(--sun-100);color:#B27A17}
.b-gem .bg-ico{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#8DF0D2,var(--success-500));border-radius:4px 8px 4px 8px;transform:rotate(45deg)}
.b-gem .bg-ico>span{transform:rotate(-45deg);font-size:10px;color:#0c5a43}
.b-coin .bc-ico{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#8a5f12;background:radial-gradient(circle at 35% 30%,#FFE29A,var(--sun-500));border:2px solid #E9A93B}

/* hype / energy meter */
.b-meter{display:flex;flex-direction:column;gap:6px}
.b-meter .bm-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500)}
.b-meter .bm-track{height:14px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;position:relative;
  border:1.5px solid var(--surface-2)}
.b-meter .bm-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--sun-500),var(--guava-500),var(--danger-500));
  background-size:200% 100%;transition:width .4s var(--ease-out-soft)}
.b-meter.hot .bm-fill{animation:bMeterPulse 1s ease-in-out infinite}
@keyframes bMeterPulse{50%{filter:brightness(1.15) saturate(1.2)}}

/* rank / tier pill */
.b-rank{display:inline-flex;align-items:center;gap:6px;font-family:"Baloo 2";font-weight:700;font-size:12px;
  border-radius:var(--r-pill);padding:5px 12px;text-transform:uppercase;letter-spacing:.04em;
  background:var(--surface-2);color:var(--ink-700);border:1.5px solid transparent}
.b-rank.bronze{background:#F5E3D5;color:#9A5B2E;border-color:#D8A878}
.b-rank.silver{background:#E9ECF1;color:#5C6470;border-color:#B9C1CC}
.b-rank.gold{background:var(--sun-100);color:#B27A17;border-color:var(--sun-500)}
.b-rank.diamond{background:var(--peri-100);color:var(--peri-500);border-color:var(--peri-500)}
:root[data-theme="dark"] .b-rank.bronze{background:#3A2A1E;color:#E0A876}
:root[data-theme="dark"] .b-rank.silver{background:#2B2F36;color:#B9C1CC}

/* leaderboard row: rank + avatar + name + score + medal */
.b-leaderboard-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface-1);
  border-radius:var(--r-md);box-shadow:var(--shadow-1);border:1.5px solid transparent}
.b-leaderboard-row .blb-rank{width:24px;flex:0 0 auto;text-align:center;font-family:"Baloo 2";font-weight:700;font-size:15px;color:var(--ink-500)}
.b-leaderboard-row .blb-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-family:"Baloo 2";font-weight:700;color:var(--ink-700)}
.b-leaderboard-row .blb-av img{width:100%;height:100%;object-fit:cover}
.b-leaderboard-row .blb-name{flex:1;min-width:0;font-weight:700;font-size:14px;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-leaderboard-row .blb-score{flex:0 0 auto;font-family:"Baloo 2";font-weight:700;font-size:14px;color:var(--guava-600)}
.b-leaderboard-row .blb-medal{flex:0 0 auto;font-size:18px}
.b-leaderboard-row.me{border-color:var(--guava-300);background:var(--guava-100)}
.b-leaderboard-row.top .blb-rank{color:var(--sun-500)}

/* ------------------------------------------------------------
   MEDIA & MISC
   ------------------------------------------------------------ */
/* avatar with optional ring / status */
.b-avatar{position:relative;width:48px;height:48px;border-radius:50%;flex:0 0 auto;overflow:visible;display:inline-flex}
.b-avatar img,.b-avatar .bav-fallback{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-family:"Baloo 2";font-weight:700;color:var(--ink-700)}
.b-avatar.ring{padding:3px;background:linear-gradient(135deg,var(--guava-500),var(--sun-500))}
.b-avatar.ring img,.b-avatar.ring .bav-fallback{border:2px solid var(--surface-1)}
.b-avatar .bav-status{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--surface-1);background:var(--ink-300)}
.b-avatar .bav-status.online{background:var(--success-500)}
.b-avatar .bav-status.busy{background:var(--danger-500)}
.b-avatar.sm{width:32px;height:32px}.b-avatar.lg{width:64px;height:64px}

/* star rating */
.b-rating{display:inline-flex;align-items:center;gap:4px}
.b-rating .brt-star{font-size:16px;color:var(--ink-300);line-height:1}
.b-rating .brt-star.on{color:var(--sun-500)}
.b-rating .brt-num{margin-left:4px;font-weight:700;font-size:13px;color:var(--ink-700)}
.b-rating.sm .brt-star{font-size:13px}
.b-rating.lg .brt-star{font-size:22px}

/* book cover frame with badge slot */
.b-cover{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-2);
  background:var(--surface-2);display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#fff}
.b-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.b-cover .bcv-title{font-family:"Baloo 2";font-weight:700;font-size:14px;line-height:1.1;z-index:1;position:relative}
.b-cover .bcv-badge{position:absolute;top:8px;left:8px;z-index:2;background:var(--guava-500);color:#fff;font-family:"Baloo 2";
  font-weight:700;font-size:10px;padding:3px 9px;border-radius:var(--r-pill);box-shadow:var(--shadow-1)}
.b-cover .bcv-badge.sun{background:var(--sun-500);color:#5a3d08}
.b-cover .bcv-badge.success{background:var(--success-500)}
.b-cover::after{content:"";position:absolute;inset:40% 0 0 0;z-index:0;background:linear-gradient(transparent,rgba(0,0,0,.55))}

/* carousel dots */
.b-carousel-dots{display:flex;gap:7px;justify-content:center;align-items:center}
.b-carousel-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-300);transition:width .25s var(--ease-spring),background .2s}
.b-carousel-dots i.on{width:22px;border-radius:var(--r-pill);background:var(--guava-500)}

/* progress dots (sequential, filled) */
.b-progress-dots{display:flex;gap:8px;align-items:center}
.b-progress-dots i{width:10px;height:10px;border-radius:50%;background:var(--surface-2);border:2px solid var(--surface-2)}
.b-progress-dots i.done{background:var(--success-500);border-color:var(--success-500)}
.b-progress-dots i.on{background:var(--guava-500);border-color:var(--guava-500);box-shadow:0 0 0 3px var(--guava-100)}

/* divider */
.b-divider{height:1px;background:var(--surface-2);border:none;margin:14px 0}
.b-divider.dashed{height:0;background:none;border-top:1.5px dashed var(--ink-300)}
.b-divider.text{display:flex;align-items:center;gap:12px;background:none;height:auto;color:var(--ink-500);font-size:12px;font-weight:700}
.b-divider.text::before,.b-divider.text::after{content:"";flex:1;height:1px;background:var(--surface-2)}

/* tooltip (wrap a trigger, add [data-tip]) */
.b-tooltip{position:relative;display:inline-flex}
.b-tooltip .btt-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.9);
  background:var(--ink-900);color:var(--surface-1);font-size:12px;font-weight:600;padding:6px 10px;border-radius:var(--r-sm);
  white-space:nowrap;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s var(--ease-spring);z-index:30}
.b-tooltip .btt-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink-900)}
.b-tooltip:hover .btt-bubble,.b-tooltip:focus-within .btt-bubble{opacity:1;transform:translateX(-50%) scale(1)}

/* toast / notification */
.b-toast{display:flex;align-items:center;gap:12px;background:var(--surface-1);border-radius:var(--r-md);
  box-shadow:var(--shadow-3);padding:12px 14px;border-left:4px solid var(--guava-500);max-width:100%}
.b-toast .btst-ico{width:32px;height:32px;border-radius:var(--r-blob);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:16px;background:var(--guava-100);color:var(--guava-600)}
.b-toast .btst-body{flex:1;min-width:0}
.b-toast .btst-title{font-weight:700;font-size:13px;color:var(--ink-900)}
.b-toast .btst-text{font-size:12px;color:var(--ink-500)}
.b-toast .btst-close{flex:0 0 auto;background:none;border:none;color:var(--ink-500);font-size:16px;cursor:pointer;padding:4px}
.b-toast.success{border-left-color:var(--success-500)}.b-toast.success .btst-ico{background:var(--success-100);color:var(--success-500)}
.b-toast.warn{border-left-color:var(--warn-500)}.b-toast.warn .btst-ico{background:var(--warn-100);color:var(--warn-500)}
.b-toast.danger{border-left-color:var(--danger-500)}.b-toast.danger .btst-ico{background:var(--danger-100);color:var(--danger-500)}

/* bottom-sheet container + handle */
.b-sheet{background:var(--surface-1);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-3);
  padding:8px 20px 22px;display:flex;flex-direction:column;gap:12px}
.b-sheet .bsh-handle{width:40px;height:5px;border-radius:var(--r-pill);background:var(--ink-300);margin:2px auto 8px;flex:0 0 auto}
.b-sheet .bsh-title{font-family:"Baloo 2";font-weight:700;font-size:19px;text-align:center;margin:0}

/* shimmer skeleton placeholder */
.b-skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-sm)}
.b-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface-1) 70%,transparent),transparent);
  animation:bShimmer 1.5s infinite}
.b-skeleton.line{height:12px;border-radius:var(--r-pill)}
.b-skeleton.line.short{width:55%}
.b-skeleton.circle{border-radius:50%}
.b-skeleton.block{height:100px;border-radius:var(--r-md)}
@keyframes bShimmer{100%{transform:translateX(100%)}}

/* small tag / pill / callout */
.b-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.02em;
  border-radius:var(--r-xs);padding:3px 8px;background:var(--surface-2);color:var(--ink-700)}
.b-tag.guava{background:var(--guava-100);color:var(--guava-600)}
.b-tag.peri{background:var(--peri-100);color:var(--peri-500)}
.b-tag.sun{background:var(--sun-100);color:#B27A17}
.b-tag.success{background:var(--success-100);color:var(--success-500)}
.b-tag.danger{background:var(--danger-100);color:var(--danger-500)}
.b-pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;border-radius:var(--r-pill);
  padding:6px 14px;background:var(--surface-2);color:var(--ink-700)}
.b-pill.solid{background:var(--guava-500);color:#fff}
.b-callout{display:flex;gap:10px;background:var(--surface-2);border-radius:var(--r-md);padding:12px 14px;
  border-left:4px solid var(--guava-500);font-size:13px;color:var(--ink-700)}
.b-callout .bco-ico{flex:0 0 auto;font-size:16px;color:var(--guava-600)}
.b-callout.peri{border-left-color:var(--peri-500)}.b-callout.peri .bco-ico{color:var(--peri-500)}
.b-callout.success{border-left-color:var(--success-500)}.b-callout.success .bco-ico{color:var(--success-500)}
.b-callout.warn{border-left-color:var(--warn-500)}.b-callout.warn .bco-ico{color:var(--warn-500)}

/* ------------------------------------------------------------
   ANIMATIONS / UTILITIES
   ------------------------------------------------------------ */
/* hover-lift */
.b-hover{transition:transform .18s var(--ease-spring),box-shadow .18s}
.b-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
/* smooth book tile hover — shadow rides the rounded cover only (no square halo) */
.book-tile{cursor:pointer;transition:transform .22s var(--ease-spring)}
.book-tile .b-cover,.book-tile .cover{transition:box-shadow .24s var(--ease-standard),transform .24s var(--ease-spring)}
.book-tile:hover{transform:translateY(-5px)}
.book-tile:hover .b-cover,.book-tile:hover .cover{box-shadow:0 16px 28px rgba(53,20,35,.24)}
.book-tile:active{transform:scale(.96)}
/* home — continue-reading hero */
.cr-hero{display:flex;gap:14px;align-items:center;border:1.5px solid var(--surface-2);
  border-radius:var(--r-lg);padding:14px;cursor:pointer;background:
  linear-gradient(135deg,var(--guava-100),var(--sun-100));
  box-shadow:var(--shadow-1);transition:transform .18s var(--ease-spring),box-shadow .18s}
.cr-hero:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.cr-hero:active{transform:scale(.985)}
.cr-cover{flex:0 0 60px;width:60px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;position:relative;box-shadow:var(--shadow-2)}
.cr-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-body{min-width:0;flex:1}
.cr-kicker{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--guava-600)}
.cr-title{font-family:"Baloo 2";font-weight:700;font-size:16px;line-height:1.15;margin:2px 0 1px;color:var(--ink-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-auth{font-size:12px;color:var(--ink-500);margin-bottom:8px}
.cr-prog{display:flex;align-items:center;gap:8px}
.cr-prog .track{flex:1}
.cr-prog .cr-pct{font-size:11px;font-weight:800;color:var(--ink-700);flex:0 0 auto}
.cr-go{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--guava-500);color:#fff;font-size:15px;box-shadow:0 6px 14px rgba(255,92,134,.42)}
/* Home — Continue Reading card (compact, professional) */
.cr-hero.feature{gap:13px;padding:13px;border:none;position:relative;overflow:hidden;align-items:center;
  background:radial-gradient(120% 130% at 100% 0%,var(--sun-100),transparent 52%),
    linear-gradient(135deg,var(--guava-100),var(--peri-100));
  box-shadow:0 10px 22px rgba(120,60,160,.16)}
.cr-hero.feature .cr-cover{flex:0 0 60px;width:60px;border-radius:12px;box-shadow:0 8px 16px rgba(40,20,50,.28)}
.cr-hero.feature .cr-kicker{color:var(--guava-600);font-size:10.5px}
.cr-hero.feature .cr-title{font-size:17px;line-height:1.15;margin:2px 0 1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-hero.feature .cr-auth{font-size:12px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-hero.feature .cr-prog .track{height:8px}
.cr-hero.feature .cr-go{width:46px;height:46px;font-size:17px;background:var(--guava-500);
  box-shadow:0 7px 15px rgba(255,92,134,.46)}
/* Home — compact secondary promo tiles (2-up, clearly smaller than the hero) */
.home-promos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.promo-tile{position:relative;overflow:hidden;border-radius:18px;padding:13px 13px 14px;cursor:pointer;color:#fff;
  min-height:106px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 8px 18px rgba(40,20,50,.16);transition:transform .14s var(--ease-spring),box-shadow .14s}
.promo-tile:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(40,20,50,.2)}
.promo-tile:active{transform:scale(.96)}
.promo-tile .pt-ico{font-size:27px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.promo-tile .pt-title{font-family:"Baloo 2";font-weight:800;font-size:15px;line-height:1.1}
.promo-tile .pt-sub{font-size:11px;opacity:.92;margin-top:2px;line-height:1.25}
.promo-tile .pt-go{position:absolute;top:10px;right:13px;font-family:"Baloo 2";font-weight:800;font-size:16px;opacity:.85}
.promo-tile.pk{background:linear-gradient(150deg,var(--peri-500),#4b3fb0)}
.promo-tile.plus{background:linear-gradient(150deg,var(--sun-500),#e0872a)}
/* home — greeting header */
.home-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:30px 18px 8px;background:var(--bg);flex:0 0 auto}
.home-head .hh-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.home-head .hh-hi{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.home-head .hh-sub{font-size:12px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-head .hh-name{font-family:"Baloo 2";font-weight:700;font-size:18px;color:var(--ink-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-head .hh-right{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.hh-stat{display:inline-flex;align-items:center;gap:4px;font-family:"Baloo 2";font-weight:800;font-size:12.5px;
  line-height:1;padding:6px 10px;border-radius:var(--r-pill);white-space:nowrap}
.hh-stat .hs-ico{font-size:13px;line-height:1}
.hh-stat.hh-bell{padding:6px 9px;font-size:15px;background:var(--surface-2)}
.hh-stat.streak{color:#C4442E;background:#FFE4D6}
.hh-stat.coinstat{color:#8A5A00;background:var(--sun-100)}
.hh-stat.coinstat .hs-coin{width:17px;height:17px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#7a4d00;background:linear-gradient(150deg,#FFDC5E,#F0A81E);
  box-shadow:inset 0 -1.5px 0 rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.5)}
/* home — consistent vertical rhythm + full-bleed shelves */
.sbody.home{display:flex;flex-direction:column;gap:16px}
.sbody.home .b-section{margin:0 0 -6px}
.shelf-scroll{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:2px 20px 8px}
.shelf-scroll.last{padding-bottom:2px}
/* simple reward pill (toned-down onboarding celebration) */
.pill-reward{display:inline-flex;align-items:center;gap:5px;font-family:"Baloo 2";font-weight:800;font-size:13px;
  color:var(--ink-900);background:var(--surface-1);border:1.5px solid var(--surface-2);
  padding:8px 13px;border-radius:var(--r-pill);box-shadow:var(--shadow-1)}

/* ===== Duolingo-style Explore tiles (chunky, colored, bouncy) ===== */
.explore-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.xp-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  border-radius:20px;padding:12px 4px 10px;color:#fff;text-align:center;
  background:var(--xpt-bg,var(--guava-500));box-shadow:0 5px 0 var(--xpt-sh,var(--guava-600));
  transition:transform .1s var(--ease-spring),box-shadow .1s}
.xp-tile:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--xpt-sh,var(--guava-600))}
.xp-tile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--xpt-sh,var(--guava-600))}
.xp-tile .xpt-ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:21px;background:rgba(255,255,255,.24)}
.xp-tile .xpt-ic span{display:inline-block;animation:xpBob 2.6s ease-in-out infinite}
.xp-tile .xpt-lbl{font-family:"Baloo 2";font-weight:800;font-size:11.5px;line-height:1;letter-spacing:.01em}
@keyframes xpBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}

/* ===== professional social sign-in buttons ===== */
.btn-social{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--surface-1);color:var(--ink-900);border:1.5px solid var(--ink-300);
  box-shadow:0 2px 0 var(--surface-2);font-weight:700}
.btn-social:active{transform:translateY(2px);box-shadow:none}
.btn-social svg{width:17px;height:17px;flex:0 0 auto}
.btn-social.apple{background:#000;color:#fff;border-color:#000;box-shadow:0 2px 0 #333}
.btn-social.apple svg{fill:#fff}

/* ===== live "gift" motion for reward tiles (wobble + shine) ===== */
@keyframes giftWobble{0%,100%{transform:translateY(0) rotate(-5deg)}25%{transform:translateY(-4px) rotate(3deg)}
  50%{transform:translateY(0) rotate(-3deg)}75%{transform:translateY(-2px) rotate(5deg)}}
.gift-bob{display:inline-block;animation:giftWobble 2.4s ease-in-out infinite;transform-origin:50% 80%}
.gift-bob.d1{animation-delay:.2s}.gift-bob.d2{animation-delay:.4s}.gift-bob.d3{animation-delay:.6s}
.gift-bob.d4{animation-delay:.8s}.gift-bob.d5{animation-delay:1s}
.gift-bob.d6{animation-delay:1.2s}.gift-bob.d7{animation-delay:1.4s}.gift-bob.d8{animation-delay:1.6s}

/* ===== Reading Passport — full-page, gamified, immersive ===== */
.pp-page{background:
  radial-gradient(150% 55% at 50% -6%,var(--peri-100),transparent 62%),
  radial-gradient(120% 46% at 100% 8%,var(--guava-100),transparent 55%),
  radial-gradient(120% 40% at 0% 16%,var(--sun-100),transparent 55%),var(--bg)}
.pp-hero{text-align:center;padding:4px 0 6px}
.pp-av{position:relative;width:96px;height:96px;margin:0 auto;border-radius:50%;
  background:linear-gradient(135deg,var(--guava-500),var(--sun-500));padding:4px;
  box-shadow:0 12px 26px rgba(255,92,134,.36)}
.pp-av .pp-face{width:100%;height:100%;border-radius:50%;background:var(--surface-1);
  display:flex;align-items:center;justify-content:center;font-size:42px}
.pp-av .pp-lvl{position:absolute;right:-3px;bottom:-3px;width:36px;height:36px;border-radius:50%;
  background:var(--peri-500);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2";font-weight:800;font-size:15px;border:3px solid var(--surface-1);box-shadow:0 4px 9px rgba(0,0,0,.18)}
.pp-handle{font-family:"Baloo 2";font-weight:800;font-size:22px;margin-top:12px;color:var(--ink-900)}
.pp-stamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px}
.pp-stamp{display:flex;flex-direction:column;align-items:center;gap:7px}
.pp-stamp .pps-badge{position:relative;width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:31px;background:var(--sg,var(--sun-100));
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.09),inset 0 4px 0 rgba(255,255,255,.6),0 7px 15px rgba(40,20,50,.16)}
.pp-stamp .pps-name{font-family:"Baloo 2";font-weight:700;font-size:10.5px;color:var(--ink-700);text-align:center;line-height:1.15}
.pp-stamp.locked .pps-badge{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--surface-2);filter:grayscale(.9);opacity:.55}
.pp-stamp.locked .pps-name{color:var(--ink-300)}
.pp-stamp.locked .gift-bob{animation:none}

/* ===== Arcade / game effects (immersive, playful) ===== */
.gm-stage{position:relative;border-radius:var(--r-lg);padding:13px 14px;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--peri-500),#3730a3);box-shadow:0 10px 22px rgba(55,48,163,.32)}
.gm-stage.guava{background:linear-gradient(150deg,var(--guava-500),var(--guava-600))}
.gm-stage.sun{background:linear-gradient(150deg,#f5a623,#e07e20)}
.gm-stage::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(60% 60% at 30% 10%,rgba(255,255,255,.28),transparent 60%);animation:gmGlow 4s ease-in-out infinite}
@keyframes gmGlow{0%,100%{opacity:.45;transform:translateX(-6%)}50%{opacity:.9;transform:translateX(6%)}}
.gm-timer{height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.25);overflow:hidden}
.gm-timer > i{display:block;height:100%;border-radius:var(--r-pill);transform-origin:left;
  background:linear-gradient(90deg,#fff,#ffd98a);animation:gmTick var(--gm-dur,8s) linear forwards}
@keyframes gmTick{from{transform:scaleX(1)}to{transform:scaleX(.02)}}
.gm-answer{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;color:var(--ink-900);
  background:var(--surface-1);border-radius:var(--r-md);padding:11px 13px;font-weight:700;font-family:"Baloo 2";font-size:13.5px;line-height:1.2;
  border:2px solid var(--surface-2);box-shadow:0 4px 0 var(--surface-2);transition:transform .1s var(--ease-spring),box-shadow .1s}
.gm-answer:active{transform:translateY(3px);box-shadow:0 1px 0 var(--surface-2)}
.gm-answer .gm-key{width:26px;height:26px;border-radius:8px;background:var(--peri-100);color:var(--peri-500);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:13px;font-weight:800}
.gm-answer.correct{border-color:var(--success-500);box-shadow:0 4px 0 var(--success-500);background:var(--success-100)}
.gm-answer.correct .gm-key{background:var(--success-500);color:#fff}
.gm-answer.wrong{border-color:var(--danger-500);box-shadow:0 4px 0 var(--danger-500);background:var(--danger-100);animation:gmShake .32s}
@keyframes gmShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.gm-combo{display:inline-flex;align-items:center;gap:5px;font-family:"Baloo 2";font-weight:800;color:var(--guava-500);
  animation:gmPop .4s var(--ease-spring)}
@keyframes gmPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.gm-plus{display:inline-block;font-family:"Baloo 2";font-weight:800;color:var(--success-500);animation:gmFloat 1.2s ease-out infinite}
@keyframes gmFloat{0%{opacity:0;transform:translateY(6px) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(1.1)}}
.gm-score{font-family:"Baloo 2";font-weight:800;font-size:34px;line-height:1;animation:gmPop .5s var(--ease-spring)}
.gm-tile-lg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:1;
  border-radius:20px;color:#fff;font-family:"Baloo 2";font-weight:800;cursor:pointer;text-align:center;padding:10px;
  box-shadow:0 6px 0 rgba(0,0,0,.16);transition:transform .1s var(--ease-spring),box-shadow .1s}
.gm-tile-lg:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.16)}
.gm-tile-lg .gm-emo{font-size:34px;animation:xpBob 2.6s ease-in-out infinite}
/* a game "next" button stays locked until the round is finished */
.btn.is-locked{opacity:.42;pointer-events:none;filter:grayscale(.35);box-shadow:none}
.kid-cta.is-locked{opacity:.42;pointer-events:none;filter:grayscale(.35);box-shadow:none}
.gm-answer.done{cursor:default}
/* consistent breathing room on every celebration / reward screen (fixes squished stacks) */
/* Reward/celebration screens — compress vertically so BOTH actions always fit on-screen (no scroll) */
.sbody.center[data-celebrate]{gap:9px}
.sbody.center[data-celebrate] > .spacer{flex:1 1 2px;min-height:2px}
.sbody.center[data-celebrate] .sprout-scale{transform:scale(.82);margin:-8px 0 -4px}
.sbody.center[data-celebrate] .b-achievement{padding:11px 14px}
.sbody.center[data-celebrate] .ach-hero{transform:scale(.86);margin:-10px 0}
.sbody.center[data-celebrate] .screen-title{margin-top:4px!important;font-size:22px!important}
.sbody.center[data-celebrate] .sub{margin-top:2px!important}
/* any centered screen with actions keeps its buttons pinned & visible (no cut / no hunt-scroll) */
.sbody.center .sactions{margin-top:auto;gap:8px;position:sticky;bottom:0;z-index:5;
  padding-top:10px;padding-bottom:8px;background:linear-gradient(transparent,var(--bg) 42%)}
.sbody.center[data-celebrate] .sactions .btn-lg{padding:14px}
/* kids playable picture answers */
.kid-answer.wrong{border-color:var(--danger-500);box-shadow:0 5px 0 var(--danger-500);background:var(--danger-100);animation:gmShake .34s}
.kid-answer.done{cursor:default}
/* kids spelling mini-game */
.sp-word{display:flex;gap:8px;justify-content:center;margin-top:14px}
.sp-slot{width:36px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2";font-weight:800;font-size:24px;color:var(--sun-500);background:var(--surface-2);border:2px dashed var(--ink-300)}
.sp-slot.filled{background:var(--sun-100);border:2px solid var(--sun-500);animation:gmPop .3s var(--ease-spring)}
.kid-letter.sp-wrong{animation:gmShake .34s;border-color:var(--danger-500);color:var(--danger-500)}
.kid-letter.on{pointer-events:none}

/* ===== Live Reading Room — immersive "you joined a live room" ===== */
.lr-stage{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:252px;padding:12px 14px 13px;margin-bottom:14px;
  display:flex;flex-direction:column;color:#fff;
  background:radial-gradient(120% 90% at 18% 0%,#4c2a58,transparent 60%),
    radial-gradient(120% 90% at 100% 100%,#221a4c,transparent 55%),#150f28}
.lr-top{display:flex;align-items:center;justify-content:space-between;z-index:3}
.lr-live{display:inline-flex;align-items:center;gap:6px;font-family:"Baloo 2";font-weight:800;font-size:11.5px;
  background:var(--guava-500);color:#fff;padding:4px 10px;border-radius:var(--r-pill)}
.lr-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:lrBlink 1s infinite}
@keyframes lrBlink{0%,100%{opacity:1}50%{opacity:.25}}
.lr-views{font-family:"Baloo 2";font-weight:800;font-size:11.5px;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:var(--r-pill)}
.lr-host{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;z-index:3}
.lr-ring{position:relative;width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lr-ring::before,.lr-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--guava-500);animation:lrPulse 2.2s ease-out infinite}
.lr-ring::after{animation-delay:1.1s}
@keyframes lrPulse{0%{transform:scale(.82);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.lr-ring .b-avatar{width:78px;height:78px}
.lr-name{font-family:"Baloo 2";font-weight:800;font-size:18px}
.lr-sub{font-size:12px;color:rgba(255,255,255,.74)}
.lr-wave{display:flex;align-items:flex-end;gap:3px;height:20px;margin-top:3px}
.lr-wave i{width:3px;height:5px;border-radius:2px;background:linear-gradient(var(--sun-500),var(--guava-500));animation:lrWave 1s ease-in-out infinite}
.lr-wave i:nth-child(odd){animation-duration:.8s}.lr-wave i:nth-child(3n){animation-duration:1.25s}.lr-wave i:nth-child(3n+1){animation-delay:.15s}
@keyframes lrWave{0%,100%{height:5px}50%{height:20px}}
.lr-bottom{display:flex;align-items:center;gap:9px;z-index:3}
.lr-book{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;background:rgba(255,255,255,.14);
  padding:4px 10px 4px 4px;border-radius:var(--r-pill);flex:0 0 auto;white-space:nowrap}
.lr-hype{flex:1;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800}
.lr-hype .lr-htrack{flex:1;height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);overflow:hidden}
.lr-hype .lr-hfill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--sun-500),var(--guava-500));animation:bMeterPulse 1s ease-in-out infinite}
.lr-react{position:absolute;bottom:64px;font-size:20px;z-index:2;opacity:0;pointer-events:none;
  animation:lrRise 3.4s ease-in infinite}
@keyframes lrRise{0%{opacity:0;transform:translateY(0) scale(.6)}12%{opacity:1}100%{opacity:0;transform:translateY(-160px) translateX(var(--drift,12px)) scale(1.25)}}
/* live-room bottom action bar */
.lr-actionbar{display:flex;align-items:center;gap:9px;margin-top:16px}
.lr-input{flex:1;display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:var(--r-pill);
  padding:12px 16px;color:var(--ink-500);font-size:13px;font-weight:600;cursor:pointer}
.lr-cbtn{width:47px;height:47px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;
  flex:0 0 auto;cursor:pointer;border:none;transition:transform .1s var(--ease-spring)}
.lr-cbtn:active{transform:scale(.9)}
.lr-cbtn.heart{background:var(--guava-100)}
.lr-cbtn.gift{background:linear-gradient(150deg,var(--guava-500),var(--guava-600));box-shadow:0 6px 15px rgba(255,92,134,.45)}

/* ===== Kids mode — cartoonish, Duolingo-ABC (bright, bouncy, illustrated) ===== */
.kid-tile{cursor:pointer;transition:transform .12s var(--ease-spring)}
.kid-tile:active{transform:scale(.94)}
.kid-cover{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  isolation:isolate;
  background:
    radial-gradient(58% 40% at 50% 40%, rgba(255,255,255,.42), transparent 62%),
    radial-gradient(46% 13% at 50% 80%, rgba(255,255,255,.34), transparent 72%),
    radial-gradient(130% 78% at 50% 118%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(120% 70% at 50% -12%, rgba(255,255,255,.30), transparent 55%),
    var(--kc,linear-gradient(150deg,#ffd36e,#ff8a5b));
  box-shadow:0 7px 0 rgba(0,0,0,.10),0 12px 22px rgba(40,20,50,.16),inset 0 1px 0 rgba(255,255,255,.4)}
/* playful floating bubbles that gently drift upward */
.kid-cover::before{content:"";position:absolute;inset:-24% -12% -12%;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 23%, transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 20%, transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.65) 16%, transparent 20%);
  background-size:30px 30px,48px 48px,66px 66px;
  background-position:2px 0,20px 26px,38px 12px;
  opacity:.45;animation:kidBubble 8s linear infinite}
@keyframes kidBubble{from{background-position:2px 0,20px 26px,38px 12px}
  to{background-position:2px -60px,20px -70px,38px -66px}}
/* twinkling sparkle stars scattered around the avatar */
.kid-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.7 3.7 3.6 6.6 8 8-4.4 1.4-7.3 4.3-8 8-.7-3.7-3.6-6.6-8-8 4.4-1.4 7.3-4.3 8-8z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.7 3.7 3.6 6.6 8 8-4.4 1.4-7.3 4.3-8 8-.7-3.7-3.6-6.6-8-8 4.4-1.4 7.3-4.3 8-8z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.7 3.7 3.6 6.6 8 8-4.4 1.4-7.3 4.3-8 8-.7-3.7-3.6-6.6-8-8 4.4-1.4 7.3-4.3 8-8z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.7 3.7 3.6 6.6 8 8-4.4 1.4-7.3 4.3-8 8-.7-3.7-3.6-6.6-8-8 4.4-1.4 7.3-4.3 8-8z' fill='white'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:15% 20%,83% 15%,74% 72%,22% 78%;
  background-size:13px,8px,11px,7px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));
  animation:kidTwinkle 2.8s ease-in-out infinite}
@keyframes kidTwinkle{0%,100%{opacity:.35}50%{opacity:1}}
.kid-cover .kc-emoji{position:relative;z-index:2;font-size:52px;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.22)) drop-shadow(0 0 12px rgba(255,255,255,.4));
  animation:xpBob 2.8s ease-in-out infinite}
.kid-cover .kc-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 8px 9px;font-family:"Baloo 2";font-weight:800;
  font-size:13px;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.35);
  background:linear-gradient(transparent,rgba(0,0,0,.42))}
.kid-cover .kc-new{position:absolute;top:7px;left:7px;background:var(--success-500);color:#fff;font-family:"Baloo 2";
  font-weight:800;font-size:10px;padding:3px 8px;border-radius:var(--r-pill);z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.22)}
.kid-cover .kc-star{position:absolute;top:7px;right:7px;font-size:16px;z-index:3;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));animation:kidTwinkle 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .kid-cover::before,.kid-cover::after,.kid-cover .kc-emoji,.kid-cover .kc-star{animation:none}}
/* big friendly kid card + CTA */
.kid-card{background:var(--surface-1);border-radius:24px;padding:16px;border:2px solid var(--surface-2);
  box-shadow:0 6px 0 var(--surface-2)}
.kid-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;border:none;
  font-family:"Baloo 2";font-weight:800;font-size:17px;color:#fff;border-radius:20px;padding:15px;
  background:linear-gradient(150deg,var(--guava-500),var(--guava-600));box-shadow:0 6px 0 var(--guava-700,#c93b60);
  transition:transform .1s var(--ease-spring),box-shadow .1s}
.kid-cta:active{transform:translateY(5px);box-shadow:0 1px 0 var(--guava-700,#c93b60)}
.kid-cta.sun{background:linear-gradient(150deg,var(--sun-500),#e08a1a);box-shadow:0 6px 0 #b06d10}
.kid-cta.success{background:linear-gradient(150deg,var(--success-500),#0e9e73);box-shadow:0 6px 0 #0b7a58}
.kid-cta.peri{background:linear-gradient(150deg,var(--peri-500),#4b3fb0);box-shadow:0 6px 0 #3730a3}
/* letter/word tiles for spelling games — chunky */
.kid-letter{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  font-family:"Baloo 2";font-weight:800;font-size:22px;color:var(--ink-900);cursor:pointer;background:var(--surface-1);
  border:2px solid var(--surface-2);box-shadow:0 4px 0 var(--surface-2);transition:transform .1s var(--ease-spring),box-shadow .1s}
.kid-letter:active,.kid-letter.on{transform:translateY(3px);box-shadow:0 1px 0 var(--surface-2)}
.kid-letter.on{background:var(--sun-500);border-color:var(--sun-500);color:#fff}
/* big picture-answer tile for kid quizzes */
.kid-answer{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:14px 8px;border-radius:20px;
  background:var(--surface-1);border:2px solid var(--surface-2);box-shadow:0 5px 0 var(--surface-2);
  font-family:"Baloo 2";font-weight:800;font-size:13px;transition:transform .1s var(--ease-spring),box-shadow .1s}
.kid-answer:active{transform:translateY(4px);box-shadow:0 1px 0 var(--surface-2)}
.kid-answer .ka-emo{font-size:38px;animation:xpBob 2.6s ease-in-out infinite}
.kid-answer.correct{border-color:var(--success-500);box-shadow:0 5px 0 var(--success-500);background:var(--success-100)}
/* bobbing/wiggle helpers for cartoonish life */
.kid-wiggle{animation:kidWiggle 2.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes kidWiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ===== Big achievement celebration (spinning sunburst + glossy medal) ===== */
.ach-hero{position:relative;display:flex;align-items:center;justify-content:center;width:186px;height:186px;margin:0 auto}
.ach-hero .ach-rays{position:absolute;inset:-16px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,201,74,.55) 0deg 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,transparent 40%,#000 42%,#000 74%,transparent 76%);
  mask:radial-gradient(circle,transparent 40%,#000 42%,#000 74%,transparent 76%);
  animation:achSpin 18s linear infinite}
@keyframes achSpin{to{transform:rotate(360deg)}}
.ach-hero .ach-glow{position:absolute;inset:26px;border-radius:50%;
  box-shadow:0 0 55px 18px rgba(255,190,60,.5);animation:achGlow 2.2s ease-in-out infinite}
@keyframes achGlow{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}}
.ach-medal{position:relative;z-index:2;width:130px;height:130px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#7a4d00;text-align:center;
  background:radial-gradient(circle at 40% 30%,#FFEEB0,#F5B72E 68%,#E09A18);border:5px solid #fff;
  box-shadow:0 14px 30px rgba(224,154,24,.5),inset 0 -6px 0 rgba(0,0,0,.12),inset 0 4px 0 rgba(255,255,255,.55)}
.ach-medal .ach-emoji{font-size:50px;line-height:1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18));animation:xpBob 2.6s ease-in-out infinite}
.ach-medal .ach-lbl{font-family:"Baloo 2";font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
/* little sparkles around the medal */
.ach-hero .ach-spark{position:absolute;font-size:18px;z-index:3;animation:achTwinkle 1.8s ease-in-out infinite}
@keyframes achTwinkle{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
/* press scale */
.b-press{transition:transform .1s var(--ease-standard)}
.b-press:active{transform:scale(.96)}
/* shine sweep across an element */
.b-shine{position:relative;overflow:hidden}
.b-shine::before{content:"";position:absolute;top:0;left:0;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-160%) skewX(-18deg);animation:bShine 3.2s var(--ease-standard) infinite}
@keyframes bShine{0%,60%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
/* gentle pulse */
.b-pulse{animation:bPulse 1.8s ease-in-out infinite}
@keyframes bPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.85}}
/* float bob */
.b-float{animation:bFloat 3.4s var(--ease-standard) infinite}
@keyframes bFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* pop-in entrance */
.b-pop{animation:bPop .5s var(--ease-spring) both}
@keyframes bPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
/* shimmer utility (reuse skeleton keyframes for a standalone element) */
.b-shimmer{position:relative;overflow:hidden}
.b-shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:bShimmer 1.5s infinite}
/* animated gradient ring / border */
.b-gradient-border{position:relative;border-radius:var(--r-lg);padding:2px;
  background:linear-gradient(135deg,var(--guava-500),var(--sun-500),var(--peri-500),var(--guava-500));
  background-size:300% 300%;animation:bGradShift 4s ease infinite}
.b-gradient-border>*{background:var(--surface-1);border-radius:calc(var(--r-lg) - 2px);display:block}
@keyframes bGradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* reveal — a from-visible entrance you trigger by adding .in */
.b-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out-soft),transform .5s var(--ease-out-soft)}
.b-reveal.in{opacity:1;transform:none}