/* ============================================================
   Gita Guru — the "Sacred Play" voice.
   Everything vivid lives here: chunky 3D-press buttons, jewel
   category theming, springy motion, celebrations. The scholarly
   reading surfaces keep using styles.css untouched.

   Category indirection: game screens set --cat-main / --cat-deep /
   --cat-soft inline on their root element; every component below is
   written once against those three variables.
   ============================================================ */

/* ── type utilities ── */
.t-display-xl { font-family: var(--round); font-weight: 800; font-size: 2.1rem; line-height: 1.1; }
.t-display    { font-family: var(--round); font-weight: 700; font-size: 1.55rem; line-height: 1.2; }
.t-title      { font-family: var(--round); font-weight: 700; font-size: 1.18rem; line-height: 1.3; }
.t-label      { font-family: var(--round); font-weight: 700; font-size: 0.7rem; line-height: 1.2;
                letter-spacing: 0.14em; text-transform: uppercase; }
/* any string containing IAST renders in the scripture voice */
.skt { font-family: var(--serif) !important; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ── .btn3d — the chunky press button ──
   Flat face + hard bottom edge drawn as a zero-blur shadow; pressing
   sinks the face flush. Transform + shadow only — layout never moves. */
.btn3d {
  --face: var(--ink);
  --edge: #181009;
  --btxt: #fdfbf7;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 13px 20px;
  background: var(--face); color: var(--btxt);
  font-family: var(--round); font-weight: 700; font-size: 1.02rem; line-height: 1.2;
  border: 0; border-radius: var(--r-l); cursor: pointer;
  box-shadow: 0 4px 0 var(--edge);
  transform: translateY(0);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.15s;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .btn3d:hover { filter: brightness(1.05); } }
.btn3d:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.btn3d:disabled, .btn3d.disabled {
  --face: #ece5d6; --edge: #d9cfba; --btxt: var(--ink-faint);
  pointer-events: none; cursor: default;
}
.btn3d:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--accent-soft); outline-offset: 2px;
}
.btn3d.cat   { --face: var(--cat-main, var(--accent)); --edge: var(--cat-deep, var(--accent-deep)); }
.btn3d.gold  { --face: var(--accent); --edge: var(--accent-deep); }
.btn3d.good  { --face: var(--good); --edge: var(--good-deep); }
.btn3d.bad   { --face: var(--bad); --edge: var(--bad-deep); }
.btn3d.quiet {
  --face: #ffffff; --edge: var(--line); --btxt: var(--ink);
  border: 1px solid var(--line);
}
.btn3d.small { min-height: 0; width: auto; padding: 9px 14px; font-size: 0.88rem;
               border-radius: var(--r-s); box-shadow: 0 3px 0 var(--edge); }
.btn3d.small:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.btn3d.xl { min-height: 58px; font-size: 1.1rem; box-shadow: 0 6px 0 var(--edge); }
.btn3d.xl:active { transform: translateY(6px); box-shadow: 0 0 0 var(--edge); }
.btn3d svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

/* busy state: inline spinner replaces the label's leading icon */
.btn3d.busy { pointer-events: none; filter: saturate(0.85) brightness(0.97); }
.spin {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── cards ── */
.card.elevated { box-shadow: var(--e2); }
.card.cat {
  background: var(--cat-soft, var(--accent-soft));
  border-color: color-mix(in srgb, var(--cat-main, var(--accent)) 22%, #fff);
}

/* ── arena header band (game screens) ── */
.arena-head {
  background: var(--cat-soft, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--cat-main, var(--accent)) 20%, #fff);
  border-top: 3px solid var(--cat-main, var(--accent));
  border-radius: var(--r-l);
  padding: 12px 14px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 11px;
}
.arena-head .back {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 1.2rem; cursor: pointer;
}
.arena-head .gico {
  flex: 0 0 38px; height: 38px; border-radius: 11px;
  background: var(--cat-main, var(--accent)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.arena-head .gico svg { width: 22px; height: 22px; fill: currentColor; }
.arena-head .gt { flex: 1; min-width: 0; }
.arena-head .gt b { display: block; font-family: var(--round); font-weight: 700; font-size: 1.05rem;
                    color: var(--ink); }
.arena-head .gt span { font-size: 0.76rem; color: var(--ink-dim); }
.arena-head .gscore { font-family: var(--round); font-weight: 800; font-size: 0.95rem;
                      color: var(--cat-deep, var(--accent-deep)); white-space: nowrap; }

/* ── segmented progress (tests) ── */
.segbar { display: flex; gap: 4px; margin: 4px 0 14px; }
.segbar i { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--well); }
.segbar i.cur { background: var(--cat-soft, var(--accent-soft));
                outline: 2px solid var(--cat-main, var(--accent)); outline-offset: -2px; }
.segbar i.ok { background: var(--good); }
.segbar i.no { background: var(--bad); }

/* ── combo pill ── */
.combo {
  position: fixed; bottom: calc(var(--nav-h) + 74px); left: 50%; transform: translateX(-50%);
  z-index: 45; display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 14px; box-shadow: var(--e3);
  font-family: var(--round); font-weight: 800; font-size: 1.05rem; color: var(--accent-deep);
}
.combo svg { width: 18px; height: 22px; }
.combo.t2 { color: var(--cat-quick); }
.combo.t3 { color: var(--bad); box-shadow: var(--e3), 0 0 14px rgba(194, 65, 12, 0.35); }
.combo.bump { animation: combo-pulse 0.18s var(--ease-spring); }

/* ── XP bar (large variant) ── */
.xpbar.lg { height: 10px; }
.xpbar i { transition: width 0.6s var(--ease-out); position: relative; }
.xpbar.sheen i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-100%); animation: sheen-sweep 0.7s var(--ease-out) 0.15s forwards;
}

/* ── result stars ── */
.starsrow { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.starsrow svg { width: 44px; height: 44px; fill: #e4dac4; }
.starsrow .lit svg { fill: var(--accent); }
.starsrow .s { opacity: 0; }
.starsrow .s.in { animation: star-pop 0.42s var(--ease-spring) forwards; }

/* ── header pills (dīyā + XP) ── */
.pill svg { width: 14px; height: 18px; display: block; }
.pill .num { font-family: var(--round); font-weight: 800; color: var(--accent-deep); }
.pill.tappable { cursor: pointer; }
.pill.bump { animation: count-pop 0.24s var(--ease-spring); }

/* ── bottom-nav active pill ── */
.nav-item .navwrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 28px; border-radius: var(--r-pill);
  transition: background 0.15s;
}
.nav-item.active .navwrap { background: var(--accent-soft); animation: pop-in 0.24s var(--ease-spring); }
.nav-item span { font-family: var(--round); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   BOOT + WELCOME + AUTH
   ════════════════════════════════════════════════════════════ */

/* boot moment: shown in static HTML until the first route renders */
.boot {
  position: fixed; inset: 0; z-index: 80; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.boot .tilakmark { width: 44px; height: 57px; color: var(--accent); }
.boot .tilakmark path, .boot .tilakmark rect { animation: boot-ink 0.9s var(--ease-out) both; }
.boot .bootflame { width: 26px; height: 32px; transform-origin: 50% 90%; animation: boot-kindle 0.8s var(--ease-spring) 0.35s both; }
.boot h1 { font-family: var(--serif); font-size: 1.6rem; margin: 8px 0 0; color: var(--ink); }
.boot p { font-family: var(--serif); font-style: italic; color: var(--ink-faint); font-size: 0.9rem; }
.boot.out { animation: boot-out 0.3s ease forwards; }
@keyframes boot-ink { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-kindle { 0% { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }

/* welcome story slides */
.story { display: flex; flex-direction: column; min-height: calc(100vh - var(--head-h) - var(--nav-h) - 40px); }
.story .skip {
  align-self: flex-end; background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-family: var(--round); font-weight: 700; font-size: 0.85rem; padding: 8px;
}
.story .beat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
               text-align: center; padding: 8px 6px; }
.story .art { width: 200px; height: 170px; margin-bottom: 14px; }
.story h1 { font-size: 1.6rem; }
.story .tag { color: var(--ink-dim); font-family: var(--serif); font-style: italic; max-width: 38ch; }
.story .dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0 18px; }
.story .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all 0.2s; }
.story .dots i.on { background: var(--accent); width: 22px; border-radius: 99px; }

/* auth card */
.auth { padding: 6px 2px; }
.auth .brandrow { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 4px; }
.auth .brandrow .tilakmark { width: 34px; height: 44px; }
.auth h1 { text-align: center; font-size: 1.65rem; margin-bottom: 4px; }
.auth .tag { text-align: center; color: var(--ink-dim); font-family: var(--serif); font-style: italic; margin-bottom: 18px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-dim); margin: 0 2px 5px; }
.field .inwrap { position: relative; }
.field input {
  width: 100%; min-height: 52px; padding: 13px 14px; border-radius: var(--r-s);
  background: var(--card); border: 1.5px solid var(--line);
  color: var(--ink); font-size: 1rem; font-family: var(--sans); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.bad input { border-color: var(--bad); }
.field.bad input:focus { box-shadow: 0 0 0 3px var(--bad-soft); }
.field .err { display: none; color: var(--bad); font-size: 0.78rem; margin: 4px 2px 0; }
.field.bad .err { display: block; }
.field .hint { color: var(--ink-faint); font-size: 0.75rem; margin: 4px 2px 0; }
.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ink-faint); border-radius: 50%;
}
.eye svg { width: 21px; height: 21px; fill: currentColor; }
.eye:active { color: var(--accent-deep); }
.meter { display: flex; gap: 4px; margin: 6px 2px 0; }
.meter i { flex: 1; height: 4px; border-radius: 99px; background: var(--well); }
.meter i.on { background: var(--good); }
.authlinks { text-align: center; margin-top: 12px; }
.authlinks button { background: none; border: 0; cursor: pointer; color: var(--accent-deep);
                    font-weight: 700; font-size: 0.88rem; font-family: var(--sans); padding: 8px; }

/* ── directional tab slides (drill-ins keep the default fade) ── */
@media (prefers-reduced-motion: no-preference) {
  .screen[data-dir="fwd"] { animation: slide-in-right var(--dur-2) var(--ease-out); }
  .screen[data-dir="back"] { animation: slide-in-left var(--dur-2) var(--ease-out); }
}

/* ── small shared bits ── */
.icon.inl { vertical-align: -3px; }
.catlab { display: flex; align-items: center; gap: 6px; }
.scopechip { display: inline-flex; align-items: center; gap: 6px; }
.scopechip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.daily .sun {
  flex: 0 0 38px; height: 38px; border-radius: 11px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.gamecard .ico { display: flex; justify-content: center; margin-bottom: 6px; }

/* ════════════════════════════════════════════════════════════
   TEST HUB
   ════════════════════════════════════════════════════════════ */
.testhead { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 12px; }
.testhead h1 { margin: 0; }
.testhero { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.modegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.modecard {
  position: relative; background: var(--cat-soft, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--cat-main, var(--accent)) 18%, #fff);
  border-radius: var(--r-m); padding: 13px 12px; cursor: pointer;
}
.modecard .mico {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 8px;
  background: var(--cat-main, var(--accent)); color: #fff;
}
.modecard b { display: block; font-family: var(--round); font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.modecard .md { font-size: 0.75rem; color: var(--ink-dim); }
.modecard .chip { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.7); }
.modecard.soon { cursor: default; }
.modecard.soon .mico { opacity: 0.75; }
.deckline { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.deckline .dico {
  flex: 0 0 36px; height: 36px; border-radius: 10px;
  background: var(--well); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
}
.deckline .chev { color: var(--ink-faint); font-size: 1.4rem; }
.deckline:active { border-color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   GAME JUICE — mālā thread, water, flames, yantra
   ════════════════════════════════════════════════════════════ */
/* builder: the golden thread strings flawless slots like a mālā */
.slotline.mala .slot.threaded { position: relative; border-color: var(--accent); }
.slotline.mala .slot.threaded::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 9px; height: 2px;
  background: var(--accent); transform: translateY(-50%);
}
.slotline.mala .slot.threaded:last-child::after { display: none; }
.slotline.mala.strung .slot.threaded {
  background: var(--accent-soft); animation: count-pop 0.4s var(--ease-spring);
}
/* gap: the unlit lamp where the word belongs */
.gapword.gapdiya { border-bottom: 0; display: inline-flex; align-items: center; gap: 4px; min-width: 28px; }
/* hints: the smṛti flame */
.smrtirow { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
/* pairs + memoryflip: bead strips */
.malastrip { display: flex; gap: 7px; justify-content: center; margin: 4px 0 10px; }
.malastrip i {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--well); border: 1px solid var(--line); transition: all 0.2s;
}
.malastrip i.on { background: var(--accent); border-color: var(--accent-deep); animation: pop-in 0.3s var(--ease-spring); }
.malastrip.prana i { width: 9px; height: 9px; }
.malastrip.prana i.on { background: var(--cat-listen); border-color: var(--cat-listen-deep); animation: none; }
/* echo: conch budget */
.conchrow { display: inline-flex; gap: 3px; margin-right: 6px; color: var(--cat-listen); }
/* word rain: rising water + combo + splash */
.waterrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.waterbar { flex: 1; height: 10px; border-radius: 99px; background: var(--well); overflow: hidden; }
.waterbar i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--cat-listen), var(--cat-listen-deep));
  transition: width 0.45s var(--ease-out); }
.lotuslot { flex: 0 0 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.rcombo {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font-family: var(--round); font-weight: 800; font-size: 1.1rem; color: var(--accent-deep);
}
.rcombo.t2 { color: var(--cat-quick); }
.rcombo.t3 { color: var(--bad); text-shadow: 0 0 10px rgba(194, 65, 12, 0.4); }
.raindrop.caught { animation: none; transform: scale(1.25); opacity: 0; transition: transform 0.25s, opacity 0.25s; background: var(--accent-soft); border-color: var(--accent); }
.rainfield.splash { box-shadow: inset 0 -14px 18px -10px rgba(15, 118, 110, 0.45); }
/* lightning: flames on the timer */
.countbar.flame i { background: linear-gradient(90deg, var(--accent), var(--cat-quick)); }
.countbar.feed { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 99px; }
/* typeit: locked words pop */
@media (prefers-reduced-motion: no-preference) {
  .typetarget .tw.hit { animation: count-pop 0.28s var(--ease-spring); }
}
/* kurukṣetra yantra */
.yantra { display: flex; justify-content: center; margin: 4px 0 6px; }
.yantra .yring { transition: opacity 0.8s ease, stroke-width 0.8s ease; }
.yantra .yring.shed { opacity: 0.12; stroke-width: 1; }
.yantra.won .yring { opacity: 0.05; }

/* ════════════════════════════════════════════════════════════
   TEST TAKEOVER + CELEBRATION
   ════════════════════════════════════════════════════════════ */
.qhead { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.closex {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center;
}
.grade.suggest { border: 2px solid var(--accent); background: var(--accent-soft); }
.hintline { font-family: var(--serif); color: var(--ink-faint); line-height: 2; letter-spacing: 0.02em; margin: 8px 0 0; }
.reciteword.missmark { background: var(--bad-soft); color: var(--bad); border-radius: 5px; }
.speedscore { text-align: center; margin: 2px 0 10px; color: var(--ink); }
.charrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.chark {
  min-width: 38px; padding: 7px 0; border-radius: 9px; cursor: pointer;
  background: var(--well); border: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.02rem; color: var(--accent-deep);
}
.chark:active { background: var(--accent-soft); }
.lotuscell { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; }
.lockedrow { opacity: 0.55; cursor: default; }
.chtop { display: flex; align-items: center; justify-content: space-between; }

/* ── daily quests ── */
.questcard { padding: 13px 16px 8px; }
.questrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--well); }
.questrow:last-child { border-bottom: 0; }
.questrow .qico {
  flex: 0 0 30px; height: 30px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
}
.questrow .qmid { flex: 1; min-width: 0; font-size: 0.88rem; }
.questrow .qbar { height: 4px; border-radius: 99px; background: var(--well); overflow: hidden; margin-top: 4px; }
.questrow .qbar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.4s var(--ease-out); }
.questrow .qcheck { font-family: var(--round); font-weight: 700; font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; }
.questrow.qdone .qico { background: var(--good-soft); color: var(--good); }
.questrow.qdone .qcheck { color: var(--good); }
.questrow.qdone .qbar i { background: var(--good); }
.questrow.qdone .qmid > span { color: var(--ink-faint); text-decoration: line-through; }

/* ── records strip + lotus shelf ── */
.recstrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.reccell {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 86px; padding: 10px 8px; border-radius: var(--r-m);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--e1);
  color: var(--accent-deep);
}
.reccell b { font-family: var(--round); font-size: 0.95rem; color: var(--ink); }
.reccell span { font-size: 0.66rem; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.lotusshelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.lotusmini {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: none; border: 0; cursor: pointer; padding: 6px 2px; border-radius: 9px;
}
.lotusmini:active { background: var(--accent-soft); }
.lotusmini span { font-size: 0.62rem; font-weight: 700; color: var(--ink-faint); }
.trialbanner { border-left: 3px solid var(--cat-quick); }

/* ── sangha podium ── */
.lbrow.podium { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, #fff); }
.lbmedal { display: inline-flex; }
.lbmedal.p1 { color: var(--accent); }
.lbmedal.p2 { color: #8d8d94; }
.lbmedal.p3 { color: #b45309; }
.lbrow .faint { display: inline-flex; align-items: center; gap: 2px; }

/* ── streak sheet week strip ── */
.weekstrip { display: flex; gap: 6px; justify-content: center; margin: 6px 0 14px; }
.weekstrip .wday {
  flex: 0 0 38px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0; border-radius: 10px; background: var(--well);
  font-size: 0.62rem; font-weight: 700; color: var(--ink-faint);
}
.weekstrip .wday.lit { background: var(--accent-soft); color: var(--accent-deep); }
.weekstrip .wday i { width: 14px; height: 17px; border-radius: 50%; opacity: 0.25; background: var(--line); }

.celebrate {
  position: fixed; inset: 0; z-index: 65; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 28%, rgba(124, 74, 5, 0.96), rgba(43, 33, 24, 0.985) 70%);
  animation: fadein 0.25s ease;
}
.celebrate .rays {
  position: absolute; left: 50%; top: 28%; width: 160vmax; height: 160vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(rgba(255, 244, 214, 0.07) 0 10deg, transparent 10deg 30deg,
    rgba(255, 244, 214, 0.07) 30deg 40deg, transparent 40deg 60deg,
    rgba(255, 244, 214, 0.07) 60deg 70deg, transparent 70deg 90deg,
    rgba(255, 244, 214, 0.07) 90deg 100deg, transparent 100deg 120deg,
    rgba(255, 244, 214, 0.07) 120deg 130deg, transparent 130deg 150deg,
    rgba(255, 244, 214, 0.07) 150deg 160deg, transparent 160deg 180deg,
    rgba(255, 244, 214, 0.07) 180deg 190deg, transparent 190deg 210deg,
    rgba(255, 244, 214, 0.07) 210deg 220deg, transparent 220deg 240deg,
    rgba(255, 244, 214, 0.07) 240deg 250deg, transparent 250deg 270deg,
    rgba(255, 244, 214, 0.07) 270deg 280deg, transparent 280deg 300deg,
    rgba(255, 244, 214, 0.07) 300deg 310deg, transparent 310deg 330deg,
    rgba(255, 244, 214, 0.07) 330deg 340deg, transparent 340deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 58%);
  mask-image: radial-gradient(circle, #000 0%, transparent 58%);
}
@media (prefers-reduced-motion: no-preference) {
  .celebrate .rays { animation: ray-spin 40s linear infinite; }
}
.celebrate .cwrap {
  position: relative; z-index: 1; text-align: center; padding: 24px;
  width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center;
}
.celebrate .csym { margin-bottom: 8px; }
.celebrate .ctitle { color: #fff; font-family: var(--serif); font-size: 1.5rem; margin: 0 0 4px; }
.celebrate .cxp { color: #ffd479; margin-bottom: 14px; }
.celebrate .crows { width: 100%; max-width: 320px; margin-bottom: 20px; }
.celebrate .crow {
  display: flex; justify-content: space-between; gap: 12px;
  color: rgba(255, 248, 235, 0.85); font-size: 0.92rem; padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 248, 235, 0.14);
}
.celebrate .crow b { color: #fff; font-family: var(--round); }

/* ════════════════════════════════════════════════════════════
   KEYFRAME LIBRARY + STAGGER (motion lives behind reduced-motion)
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .stagger > * { opacity: 0; animation: slide-up-in var(--dur-2) var(--ease-out) forwards;
                 animation-delay: calc(var(--i, 0) * 40ms); }
  .fx-bounce-in { animation: bounce-in var(--dur-3) var(--ease-bounce) both; }
  .fx-pop-in { animation: pop-in var(--dur-2) var(--ease-spring) both; }
  .fx-slide-up { animation: slide-up-in var(--dur-2) var(--ease-out) both; }
  .fx-flicker { transform-origin: 50% 92%; animation: flame-flicker 1.6s ease-in-out infinite; }
  .fx-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1; }
  .screen, .sheet-panel, .toast, .sparkle, .boot .tilakmark path,
  .boot .tilakmark rect, .boot .bootflame, .nav-item.active .navwrap,
  .combo.bump, .pill.bump, .starsrow .s.in, .xpbar.sheen i::after { animation: none !important; }
  .starsrow .s { opacity: 1; }
  .xpbar i { transition: none; }
  .boot .bootflame, .boot .tilakmark path, .boot .tilakmark rect { opacity: 1; }
}
/* in-app toggle mirror of the OS setting (set on <html>) */
html[data-fx="off"] .stagger > *, html[data-fx="off"] .starsrow .s { opacity: 1; animation: none !important; }
html[data-fx="off"] .fx-bounce-in, html[data-fx="off"] .fx-pop-in, html[data-fx="off"] .fx-slide-up,
html[data-fx="off"] .fx-flicker, html[data-fx="off"] .fx-glow,
html[data-fx="off"] .combo.bump, html[data-fx="off"] .pill.bump,
html[data-fx="off"] .sparkle, html[data-fx="off"] .xpbar.sheen i::after { animation: none !important; }

@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.08); }
  82% { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-up-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(1.06) skewX(1.5deg); }
  60% { transform: scaleY(0.97) skewX(-1.5deg); }
}
@keyframes glow-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
@keyframes star-pop {
  0% { opacity: 0; transform: scale(0) rotate(-12deg); }
  70% { opacity: 1; transform: scale(1.25) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes count-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes combo-pulse { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.18); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes sheen-sweep { to { transform: translateX(100%); } }
@keyframes petal-fall {
  0% { opacity: 0; transform: translateY(-10vh) rotate(0); }
  10% { opacity: 1; }
  100% { opacity: 0.9; transform: translateY(110vh) rotate(540deg); }
}
@keyframes ray-spin { to { transform: rotate(360deg); } }