/* Beauty Brain (DECISIONS.md 198, 204–207), the first test game: trivia on a 7-rung ladder.
   Classified THEMEABLE (RULES.md): every colour comes from the lobby's tokens (--t-*, --seg0..3), and the
   ones that carry text are made readable in game.js / quiz-logic.js and handed over as --bb-* / --k-*.
   Built from the preview the founder approved on their phone (2026-10-11): a game-show stage lit in the
   brand's own deep rim colour, glossy candy tiles in the brand's wheel colours. The material is the house
   toolkit (DESIGN-PRINCIPLES.md): ONE key light from the upper left, a broad soft highlight plus a small
   hard sparkle, colour ramps instead of flat fills, a contact shadow under anything that stands. Every
   class is bb-* (the namespace rule). Right / wrong green and red are the only fixed colours: they are
   meaning, not brand, and they always carry ✓ / ✕ as well. */

.bb-head{ padding:2px 0 10px 52px; min-height:50px; display:flex; flex-direction:column; justify-content:center; }
.bb-headline{ margin:0; font:600 19px/1.15 var(--t-font); letter-spacing:-.3px; color:var(--t-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-subline{ margin:2px 0 0; font:400 12.5px/1.35 var(--t-font); color:var(--t-ink2); }

.bb-fit{ flex:1; min-height:0; position:relative; margin-bottom:8px; }
.bb-canvas{ --bb-tap:calc(41px / var(--bb-s, 1)); position:absolute; left:0; top:0; width:343px; height:500px; border-radius:var(--t-r-card); overflow:hidden; isolation:isolate;
  background:var(--bb-night, #191926); -webkit-user-select:none; user-select:none;
  box-shadow:0 10px 16px -10px rgba(0,0,0,.5); }   /* short: a longer one darkened the credit below to 3.9:1 */

/* ---- the stage ---- */
.bb-bg{ position:absolute; inset:0;
  background:radial-gradient(120% 72% at 50% 0%, var(--bb-night-hi) 0%, var(--bb-night) 56%, color-mix(in srgb, var(--bb-night) 72%, #000) 100%); }
/* two coloured lights from the top corners; they brighten as the climb goes up (--bb-heat 0..1) */
.bb-beams{ position:absolute; inset:0; pointer-events:none; opacity:calc(.6 + .4 * var(--bb-heat, 0)); transition:opacity .6s ease; }
.bb-beam{ position:absolute; top:-24px; width:300px; height:700px; transform-origin:50% 0; will-change:transform;
  background:conic-gradient(from 166deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--c) 24%, transparent) 9deg, color-mix(in srgb, var(--c) 24%, transparent) 19deg, transparent 28deg);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%); }
.bb-beam.is-l{ left:-118px; --c:var(--bb-b1); transform:rotate(-19deg); }
.bb-beam.is-r{ right:-118px; --c:var(--bb-b2); transform:rotate(17deg); }
.bb-floorglow{ position:absolute; left:50%; bottom:-70px; width:440px; height:200px; margin-left:-220px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--bb-gold) 22%, transparent), transparent); }
.bb-motes{ position:absolute; inset:0; pointer-events:none; }
.bb-mote{ position:absolute; width:9px; height:9px; fill:#FFF6EC; opacity:.35; }
/* the last seconds and a wrong answer: the stage's edges flush red (opacity only) */
.bb-alarm{ position:absolute; inset:0; opacity:0; pointer-events:none; z-index:1; border-radius:inherit;
  box-shadow:inset 0 0 56px 14px rgba(255,64,52,.8); }

.bb-screen{ position:absolute; inset:0; display:flex; flex-direction:column; gap:9px; padding:14px 14px 16px; z-index:2; }
.bb-fx{ position:absolute; inset:0; pointer-events:none; z-index:6; }

/* ---- the call to action: a glossy coin-coloured bar with a passing sheen ---- */
.bb-cta{ position:relative; overflow:hidden; isolation:isolate; width:100%; height:52px; flex:none; border:0; cursor:pointer;
  border-radius:max(var(--t-r-btn), 14px); color:var(--bb-cta-ink); font:800 17px/1 var(--t-font); letter-spacing:-.1px;
  background-color:var(--bb-cta); background-image:linear-gradient(176deg, var(--bb-cta-hi) 0%, var(--bb-cta) 50%, var(--bb-cta-lo) 100%);
  box-shadow:inset 0 2px 0 rgba(255,246,236,.6), inset 0 -4px 0 color-mix(in srgb, var(--bb-cta-lo) 72%, #000),
             0 12px 22px -8px color-mix(in srgb, var(--bb-cta) 65%, transparent);
  -webkit-tap-highlight-color:transparent; transition:transform .14s cubic-bezier(.23,1,.32,1); }
.bb-cta:active{ transform:scale(.97); }
.bb-cta-t{ position:relative; z-index:1; }
.bb-sheen{ position:absolute; top:0; bottom:0; left:-60%; width:45%; transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(100deg, rgba(255,246,236,0), rgba(255,246,236,.55), rgba(255,246,236,0)); }
.bb-foot{ margin-top:auto; flex:none; }
.bb-next{ margin-top:auto; }
/* a guest's result: "Save my number" (the way to start earning, decision 113) beside "Play again" */
.bb-foot.is-pair{ display:flex; gap:10px; }
.bb-foot.is-pair > *{ flex:1 1 0; min-width:0; }
.bb-save{ height:52px; border:0; cursor:pointer; border-radius:max(var(--t-r-btn), 14px); font:700 15px/1.1 var(--t-font); color:var(--bb-text);
  background:color-mix(in srgb, var(--bb-text) 11%, transparent); -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bb-text) 24%, transparent), inset 0 2px 0 color-mix(in srgb, var(--bb-text) 14%, transparent);
  transition:transform .14s cubic-bezier(.23,1,.32,1); }
.bb-save:active{ transform:scale(.97); }

/* ---- start and result: words on the stage, the ladder, the button ---- */
.bb-hero{ flex:none; text-align:center; padding:4px 6px 0; }
.bb-eyebrow{ margin:0; font:800 12px/1.3 var(--t-font); letter-spacing:1.4px; text-transform:uppercase; color:var(--bb-gold); }
.bb-title{ margin:6px 0 6px; font:800 23px/1.13 var(--t-font); letter-spacing:-.5px; color:var(--bb-text); text-wrap:balance; }
.bb-rules{ margin:0 auto; max-width:300px; font:500 13px/1.42 var(--t-font); color:var(--bb-text2); text-wrap:balance; }
.bb-big{ margin:2px 0 0; font:900 50px/1 var(--t-font); letter-spacing:-2px; color:var(--bb-text); }
.bb-big small{ font:700 16px/1 var(--t-font); letter-spacing:0; color:var(--bb-text2); }
.bb-rank{ margin:6px 0 0; font:800 16px/1.3 var(--t-font); color:var(--bb-gold); text-wrap:balance; }
.bb-coin{ flex:none; margin:0; padding:8px 12px; border-radius:12px; text-align:center; font:500 12px/1.4 var(--t-font); color:var(--bb-text2);
  background:var(--bb-night-hi); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bb-text) 14%, transparent); }

/* the ladder: 7 rungs that take the room that is left (22–38 px each), Tara standing beside them */
.bb-towerwrap{ position:relative; flex:1 1 auto; min-height:0; display:flex; justify-content:center; }
.bb-tower{ position:relative; z-index:1; width:230px; margin-left:44px; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.bb-rung{ position:relative; flex:1 1 0; min-height:22px; max-height:38px; display:flex; align-items:center; gap:9px; padding:0 12px 0 4px; border-radius:999px;
  background:color-mix(in srgb, var(--bb-text) 9%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bb-text) 18%, transparent); }
.bb-rung-n{ width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; font:800 12px/1 var(--t-font);
  color:var(--bb-text); background:color-mix(in srgb, var(--bb-text) 14%, transparent); }
.bb-rung-t{ font:650 13px/1 var(--t-font); color:var(--bb-text2); white-space:nowrap; }
.bb-crown{ width:14px; height:14px; margin-left:auto; flex:none; fill:var(--bb-gold); }
.bb-rung.is-lit{ background-color:var(--bb-cta); background-image:linear-gradient(176deg, var(--bb-cta-hi) 0%, var(--bb-cta) 50%, var(--bb-cta-lo) 100%);
  box-shadow:inset 0 2px 0 rgba(255,246,236,.55), 0 0 16px -2px color-mix(in srgb, var(--bb-cta) 70%, transparent); }
.bb-rung.is-lit .bb-rung-n{ background:rgba(255,246,236,.88); color:#111114; }
.bb-rung.is-lit .bb-rung-t{ color:var(--bb-cta-ink); }
.bb-rung.is-lit .bb-crown{ fill:var(--bb-cta-ink); }
.bb-climber{ position:absolute; left:50%; top:0; margin-left:-137px; width:46px; height:46px; z-index:2; pointer-events:none; will-change:transform; }
.bb-tara-host, .bb-tara-host svg{ display:block; width:46px; height:46px; }
/* the top of the ladder: light rays turning behind it (the turn lives on ::before, so GSAP can scale
   the wrapper without fighting a CSS animation for its transform) */
.bb-rays{ position:absolute; left:50%; top:50%; width:520px; height:520px; margin:-260px 0 0 -260px; opacity:0; pointer-events:none; z-index:0; }
.bb-rays.is-on{ opacity:1; }
.bb-rays::before{ content:''; position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--bb-gold) 34%, transparent) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 14%, rgba(0,0,0,.4) 44%, transparent 72%); mask-image:radial-gradient(closest-side, #000 14%, rgba(0,0,0,.4) 44%, transparent 72%);
  animation:bbRays 24s linear infinite; }
@keyframes bbRays{ to{ transform:rotate(360deg); } }

/* ---- the question: the top bar (rung gems and the clock) ---- */
.bb-hud{ flex:none; display:flex; align-items:center; gap:12px; height:44px; }
.bb-gems{ flex:1; display:flex; align-items:center; gap:6px; padding-left:2px; }
.bb-gem{ position:relative; width:18px; height:18px; flex:none; }
.bb-gem::before{ content:''; position:absolute; inset:3px; border-radius:3px; transform:rotate(45deg);
  background:color-mix(in srgb, var(--bb-text) 12%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bb-text) 30%, transparent); }
.bb-gem.is-now::before{ box-shadow:inset 0 0 0 2px var(--bb-text); animation:bbNow 1.1s ease-in-out infinite alternate; }
@keyframes bbNow{ from{ opacity:.5; } to{ opacity:1; } }
.bb-gem.is-lit::before{ animation:none; opacity:1; background:linear-gradient(135deg, var(--bb-cta-hi) 0%, var(--bb-cta) 55%, var(--bb-cta-lo) 100%);
  box-shadow:0 0 10px color-mix(in srgb, var(--bb-cta) 80%, transparent), inset 0 1px 0 rgba(255,246,236,.75); }
.bb-gem-fly{ position:absolute; z-index:7; }
.bb-clock{ position:relative; width:44px; height:44px; flex:none; display:grid; place-items:center; }
.bb-clock-svg{ position:absolute; inset:0; width:44px; height:44px; transform:rotate(-90deg); }
.bb-clock-track{ fill:color-mix(in srgb, var(--bb-text) 8%, transparent); stroke:color-mix(in srgb, var(--bb-text) 18%, transparent); stroke-width:4; }
.bb-clock-fill{ fill:none; stroke:var(--bb-gold); stroke-width:4; stroke-linecap:round; stroke-dasharray:100 100; stroke-dashoffset:0; }
.bb-clock.is-late .bb-clock-fill{ stroke:#FF5A4E; }
.bb-clock.is-static .bb-clock-fill{ display:none; }
.bb-secs{ position:relative; display:block; font:800 16px/1 var(--t-font); color:var(--bb-text); font-variant-numeric:tabular-nums; }
.bb-clock.is-late .bb-secs{ color:#FF9A90; }

/* ---- the question card: paper, lit from the upper left ---- */
.bb-card{ position:relative; isolation:isolate; border-radius:calc(var(--t-r-card) * .8);
  background-color:var(--t-paper);
  background-image:linear-gradient(170deg, color-mix(in srgb, var(--t-paper) 75%, #FFF6EC) 0%, var(--t-paper) 40%, color-mix(in srgb, var(--t-paper) 92%, var(--t-bg2)) 100%);
  box-shadow:inset 0 2px 0 rgba(255,246,236,.9), inset 0 -4px 0 color-mix(in srgb, var(--t-ink) 9%, transparent), 0 16px 26px -12px rgba(0,0,0,.65); }
/* the broad soft highlight sits UNDER the words (z-index 0, content at 1): laid over them it washed out
   the top-left of every question and answer (found in the 360x640 screenshots, 2026-10-11) */
.bb-card::after, .bb-opt::after{ content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,246,236,.5) 0%, rgba(255,246,236,0) 36%); }
/* gentler under white words: game.js measures their contrast with this strength (--k-wash) */
.bb-opt::after{ background:linear-gradient(115deg, rgba(255,246,236,var(--k-wash, .5)) 0%, rgba(255,246,236,0) 36%); }
.bb-card > *, .bb-opt > *{ position:relative; z-index:1; }
.bb-qcard{ flex:none; margin-top:2px; padding:12px 14px 14px; }
.bb-qhead{ display:flex; align-items:center; gap:10px; padding-right:54px; margin-bottom:8px; }
.bb-sticker{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #FFFFFF 0%, color-mix(in srgb, var(--t-bg2) 55%, #FFFFFF) 68%, color-mix(in srgb, var(--t-bg2) 85%, var(--t-ink)) 100%);
  box-shadow:0 4px 8px -3px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.08); }
.bb-sticker svg{ width:24px; height:24px; overflow:visible; }
.bb-i1{ fill:var(--t-coin); stroke:color-mix(in srgb, var(--t-coin) 55%, #000); stroke-width:1.2; }
.bb-i1s{ fill:none; stroke:var(--t-coin); stroke-width:2.2; stroke-linecap:round; }
.bb-i2{ fill:var(--seg3, #3DEFFF); stroke:color-mix(in srgb, var(--seg3, #3DEFFF) 50%, #000); stroke-width:1.3; }
.bb-i3{ fill:var(--seg0, #FF2E52); stroke:color-mix(in srgb, var(--seg0, #FF2E52) 50%, #000); stroke-width:1.2; }
.bb-i4{ fill:#FFF6EC; stroke:color-mix(in srgb, var(--seg0, #FF2E52) 50%, #000); stroke-width:1.2; }
.bb-i5{ fill:var(--seg2, #B06AFF); }
.bb-il{ fill:none; stroke:color-mix(in srgb, var(--t-ink) 80%, transparent); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.bb-qmeta{ min-width:0; }
.bb-step{ margin:0; font:800 11.5px/1.2 var(--t-font); letter-spacing:.8px; text-transform:uppercase; color:var(--t-badge-ink, var(--t-ink)); }
.bb-topic{ margin:2px 0 0; font:500 12px/1.25 var(--t-font); color:var(--t-dim); }
.bb-q{ margin:0; font:750 18px/1.28 var(--t-font); letter-spacing:-.3px; color:var(--t-ink); text-wrap:balance; }
.bb-bubble{ margin:8px 0 0; padding:7px 10px; border-radius:12px 12px 12px 4px; font:600 12.5px/1.35 var(--t-font); color:var(--t-ink);
  background:color-mix(in srgb, var(--gold, #FFC83D) 30%, var(--t-paper)); }
.bb-tara{ position:absolute; z-index:3; pointer-events:none; }
.bb-tara svg{ display:block; }
.bb-tara-q{ right:12px; top:40px; width:60px; height:60px; }

/* the verdict, in the same card */
.bb-vrow{ display:flex; align-items:center; gap:12px; padding-right:54px; }
.bb-vicon{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font:800 22px/1 var(--t-font); color:#fff;
  background-color:#117F49; background-image:linear-gradient(170deg, #117F49 0%, #0B5F35 100%); box-shadow:0 4px 10px -3px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,246,236,.45); }
.bb-qcard.is-no .bb-vicon{ background-color:#D2392F; background-image:linear-gradient(170deg, #D2392F 0%, #A3221B 100%); }
.bb-clockicon{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.bb-vwords{ min-width:0; }
.bb-verdict{ margin:0; font:800 20px/1.15 var(--t-font); letter-spacing:-.3px; color:var(--t-ink); }
.bb-qcard.is-ok .bb-verdict{ color:#13703F; }
.bb-qcard.is-no .bb-verdict{ color:#A12A22; }
.bb-vsub{ margin:3px 0 0; font:600 13px/1.3 var(--t-font); color:var(--t-ink2); }
.bb-fact{ margin:10px 0 0; padding:9px 11px; border-radius:12px; font:400 13px/1.45 var(--t-font); color:var(--t-ink2);
  background:color-mix(in srgb, var(--t-bg2) 55%, var(--t-paper)); }

/* ---- the answers: glossy candy tiles in the brand's wheel colours (ink chosen in game.js) ---- */
/* the answers take the room between the card and the lifelines: 48–60 px each, centred in it */
.bb-opts{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:9px; }
.bb-opt{ position:relative; isolation:isolate; display:flex; align-items:center; gap:11px; flex:1 1 0; min-height:max(48px, var(--bb-tap)); max-height:max(60px, var(--bb-tap)); padding:5px 10px 5px 6px; border:0; border-radius:999px;
  cursor:pointer; text-align:left; font:700 15.5px/1.22 var(--t-font); color:var(--k-ink); -webkit-tap-highlight-color:transparent;
  background-color:var(--k); background-image:linear-gradient(176deg, var(--k-hi) 0%, var(--k) 46%, var(--k-lo) 100%);
  box-shadow:inset 0 2px 0 rgba(255,246,236,.55), inset 0 -3px 0 color-mix(in srgb, var(--k-lo) 78%, #000), 0 8px 14px -6px rgba(0,0,0,.6);
  transition:transform .12s cubic-bezier(.23,1,.32,1), opacity .25s ease, box-shadow .2s ease; }
/* the small hard sparkle that makes the gloss read as wet (one highlight alone reads as merely lit) */
.bb-opt::before{ content:''; position:absolute; left:52px; top:5px; width:15px; height:5px; border-radius:50%; z-index:2; pointer-events:none;
  background:#FFF6EC; opacity:.75; transform:rotate(-7deg); }
.bb-opt:active:not(:disabled){ transform:scale(.97); }
.bb-opt:disabled{ cursor:default; }
.bb-key{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font:800 15px/1 var(--t-font); color:#111114;
  background-color:#F3EEE8; background-image:radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F3EEE8 68%, #D9D1C9 100%); box-shadow:0 2px 4px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.08); }
.bb-opt-t{ flex:1; min-width:0; padding:6px 0; }
.bb-mark{ width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; font:800 16px/1 var(--t-font); }
.bb-opt.is-dim{ color:var(--bb-text2); background:var(--bb-night-hi); background-image:none;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--k) 60%, transparent); }
.bb-opt.is-dim::before, .bb-opt.is-dim::after{ opacity:0; }
.bb-opt.is-dim .bb-key{ color:var(--bb-text2); background:var(--bb-night); background-image:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bb-text) 22%, transparent); }
.bb-opt.is-locked{ box-shadow:0 0 0 3px var(--bb-text), 0 0 22px 3px color-mix(in srgb, var(--bb-text) 40%, transparent), inset 0 2px 0 rgba(255,246,236,.55), 0 8px 14px -6px rgba(0,0,0,.6); }
.bb-opt.is-right{ box-shadow:0 0 0 3px #2EE68A, 0 0 24px 4px rgba(46,230,138,.55), inset 0 2px 0 rgba(255,246,236,.55), 0 8px 14px -6px rgba(0,0,0,.6); }
.bb-opt.is-right .bb-mark{ color:#fff; background:#0E7A45; box-shadow:0 0 0 2.5px #fff, 0 3px 8px rgba(0,0,0,.35); }
.bb-opt.is-wrong{ box-shadow:0 0 0 3px #FF5A4E, inset 0 2px 0 rgba(255,246,236,.55), 0 8px 14px -6px rgba(0,0,0,.6); }
.bb-opt.is-wrong .bb-mark{ color:#fff; background:#C8322A; box-shadow:0 0 0 2.5px #fff, 0 3px 8px rgba(0,0,0,.35); }
.bb-opt.is-gone{ pointer-events:none; }
/* the verdict card is taller than the question: the tiles give back the room (still 40 px+) */
.bb-screen.is-reveal .bb-opts{ gap:7px; }
.bb-screen.is-reveal .bb-opt{ min-height:max(42px, var(--bb-tap)); }

/* tighter steps, taken only when the words outgrow the card (game.js tighten); buttons stay 40 px+ */
.bb-screen.is-tight{ gap:7px; padding-top:10px; padding-bottom:12px; }
.bb-screen.is-tight .bb-hud{ height:38px; }
.bb-screen.is-tight .bb-qcard{ padding:10px 12px 12px; }
.bb-screen.is-tight .bb-qhead{ margin-bottom:5px; }
.bb-screen.is-tight .bb-q{ font-size:16.5px; }
.bb-screen.is-tight .bb-bubble{ margin-top:6px; padding:5px 9px; }
.bb-screen.is-tight .bb-opts{ gap:6px; }
.bb-screen.is-tight .bb-opt{ min-height:max(44px, var(--bb-tap)); font-size:14.5px; }
.bb-screen.is-tight .bb-opt-t{ padding:4px 0; }
.bb-screen.is-tight .bb-life{ height:max(42px, var(--bb-tap)); }
.bb-screen.is-tight .bb-fact{ margin-top:7px; padding:7px 10px; font-size:12.5px; }
.bb-screen.is-tighter .bb-qhead{ display:none; }
.bb-screen.is-tighter .bb-q{ font-size:15.5px; padding-right:40px; }
.bb-screen.is-tighter .bb-opt{ min-height:max(42px, var(--bb-tap)); font-size:14px; }
.bb-screen.is-tighter .bb-key{ width:32px; height:32px; }

/* ---- lifelines: glass on the stage ---- */
.bb-lifes{ flex:none; display:flex; gap:10px; margin-top:auto; }
.bb-life{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:max(46px, var(--bb-tap)); border:0; border-radius:999px; cursor:pointer;
  font:700 14px/1 var(--t-font); color:var(--bb-text); -webkit-tap-highlight-color:transparent;
  background:color-mix(in srgb, var(--bb-text) 11%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bb-text) 24%, transparent), inset 0 2px 0 color-mix(in srgb, var(--bb-text) 14%, transparent);
  transition:transform .12s cubic-bezier(.23,1,.32,1), opacity .2s ease; }
.bb-life:active:not(:disabled){ transform:scale(.96); }
.bb-life-i{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; font:800 13px/1 var(--t-font); color:#3A2200;
  background-color:var(--gold, #FFC83D); background-image:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold, #FFC83D) 40%, #FFF6EC) 0%, var(--gold, #FFC83D) 60%, color-mix(in srgb, var(--gold, #FFC83D) 75%, #7A4A00) 100%);
  box-shadow:0 2px 6px -1px rgba(0,0,0,.4); }
.bb-life.is-used{ cursor:default; color:var(--bb-text2); background:transparent; text-decoration:line-through;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bb-text) 16%, transparent); }
.bb-life.is-used .bb-life-i{ color:var(--bb-text2); background:var(--bb-night); background-image:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bb-text) 22%, transparent); }
.bb-life:disabled:not(.is-used){ cursor:default; }

/* ---- effects: transforms and opacity only ---- */
.bb-spark{ position:absolute; width:16px; height:16px; overflow:visible; will-change:transform, opacity; }
.bb-cf{ position:absolute; left:50%; top:40%; display:block; will-change:transform, opacity; }
.bb-cf.is-star svg{ display:block; width:14px; height:14px; fill:currentColor; }
.bb-flash{ position:absolute; inset:0; background:var(--bb-gold); opacity:0; }

@media (prefers-reduced-motion: reduce){
  .bb-opt, .bb-life, .bb-cta, .bb-save, .bb-beams{ transition:none; }
  .bb-opt:active:not(:disabled), .bb-life:active:not(:disabled), .bb-cta:active, .bb-save:active{ transform:none; }
  .bb-gem.is-now::before, .bb-rays::before{ animation:none; }
}