/* bl-spark-reward.css - the Sparks look (owner, 8 Oct 2026: "Sparks need to give the user dopamine, therefore its
   presentation really matters"). One identity everywhere a Spark is earned, shown or arrives:
     .spk-stage   a deep navy-indigo stage the bulb shines on (the same in light and dark: a lit shop window)
     .spk-bulb    the Spark with its glow in three flat steps (FX bible 2.18: crisp discs, never a blur)
     .spk-pill    the balance: the bulb and a big tabular number
     .spk-strip   the Sparks card on the Shop home
     .spk-gift    the free daily gift card on the Sparks page
     .spk-reveal  the moment bought Sparks arrive (assets/js/bl-spark-reward.js plays it)
   The dopamine goes into earning and arriving, never into buying: no countdowns, no urgency, the price in pounds stays
   beside every amount (docs/plans/SHOP_SPARKS.md). Reduced motion and the minimal study mode: a still glow and the number. */
:root{
  --spk-gold:#ffc23d; --spk-amber:#ff9a1f; --spk-hi:#ffe08a; --spk-num:#ffd24d;
  --spk-navy:#15365a; --spk-deep:#101b44; --spk-indigo:#1f2b78; --spk-text:#eef3ff; --spk-text-2:#c4cdea;
}
.spk-stage{position:relative;isolation:isolate;overflow:hidden;color:var(--spk-text);border-radius:20px;
  background:radial-gradient(130% 120% at 18% 0%,#2a3a8f 0%,var(--spk-indigo) 28%,#142257 58%,var(--spk-deep) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,194,61,.38),inset 0 2px 0 rgba(255,255,255,.12),0 10px 28px rgba(16,27,68,.28)}
/* the painted grain of a game-shop panel: two soft diagonal sheens, very low */
.spk-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.07) 0 22%,transparent 22% 58%,rgba(255,255,255,.04) 58% 64%,transparent 64%)}
.spk-stage :is(h2,h3,b,strong){color:#fff}
.spk-stage p{color:var(--spk-text-2)}
.spk-stage a:not(.b){color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.spk-stage :focus-visible{outline:3px solid var(--spk-hi);outline-offset:3px}

/* the gold button: the one call to action on a stage */
.b.spk-cta{background:linear-gradient(180deg,var(--spk-hi),var(--spk-gold) 55%,var(--spk-amber));color:#3a2200;font-weight:800;
  box-shadow:0 3px 0 #b86a00,inset 0 1px 0 rgba(255,255,255,.6);border-radius:var(--r2,14px)}
.b.spk-cta:hover{filter:brightness(1.05)}
.b.spk-quiet{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);border-radius:var(--r2,14px)}

/* the bulb on its glow: three flat discs (100, 70 and 42 % radii), brightest in the middle; it breathes 5 % */
.spk-bulb{--s:72px;position:relative;display:grid;place-items:center;width:var(--s);height:var(--s);flex:none}
.spk-bulb::before,.spk-bulb::after,.spk-bulb i{content:"";position:absolute;border-radius:50%;pointer-events:none}
.spk-bulb::before{inset:-34%;background:rgba(255,194,61,.13)}
.spk-bulb::after{inset:-12%;background:rgba(255,194,61,.2)}
.spk-bulb i{inset:12%;background:rgba(255,224,138,.34)}
.spk-bulb img{position:relative;width:78%;height:auto;display:block;filter:drop-shadow(0 3px 0 rgba(10,18,50,.45))}
.spk-bulb.is-glint i{animation:spk-glint .36s cubic-bezier(.22,1,.36,1)}   /* the one secondary action of an earn */
@keyframes spk-glint{30%{background:rgba(255,246,214,.9)}}
.spk-bulb.is-live::before{animation:spk-breathe 2s cubic-bezier(.37,0,.63,1) infinite alternate}
@keyframes spk-breathe{to{transform:scale(1.05)}}
/* switched off (before the reveal): the glass dark, the glow gone */
.spk-bulb.is-off img{filter:grayscale(1) brightness(.5)}
.spk-bulb.is-off::before,.spk-bulb.is-off::after,.spk-bulb.is-off i{transform:scale(0)}

/* the balance */
.spk-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:6px;background:linear-gradient(180deg,#1d2a6e,var(--spk-deep));
  box-shadow:inset 0 0 0 2px rgba(255,194,61,.5),0 4px 14px rgba(16,27,68,.25);color:#fff;white-space:nowrap}
.spk-pill img{width:34px;height:34px}
.spk-pill b{font:800 30px/1 var(--f-display);color:var(--spk-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.spk-pill span{font-size:14px;font-weight:700;color:var(--spk-text-2)}
.spk-pill.is-pop{animation:spk-pop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes spk-pop{12%{transform:scale(1.06,.94)}45%{transform:scale(1.12)}}   /* the Spark lands: a one-beat squash, then the pop (objects may squash, Noodle never) */
.spk-pill-note{margin:8px 0 0;font-size:14px;color:var(--ink-3)}

/* the Shop home card */
.spk-strip{display:grid;grid-template-columns:auto 1fr auto;gap:18px 26px;align-items:center;margin:44px 0 0;padding:24px 28px}
.spk-strip .spk-bulb{--s:80px;margin:0 22px 0 26px}
.spk-strip h2{margin:0 0 4px;font-size:22px}
.spk-strip p{margin:0;max-width:58ch}
.spk-strip-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.spk-chip{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:5px 12px;border-radius:10px;font-size:14px;font-weight:800;background:rgba(255,194,61,.18);color:var(--spk-hi)}
.spk-chip.is-done{background:rgba(255,255,255,.1);color:var(--spk-text-2)}
@media (max-width:760px){.spk-strip{grid-template-columns:auto 1fr;gap:14px 18px;padding:22px 20px;align-items:start}.spk-strip .spk-bulb{--s:48px;margin:14px 10px 0 12px}.spk-strip h2{font-size:20px}.spk-strip-side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}}

/* the free daily gift on the Sparks page */
.spk-gift{display:flex;gap:20px;align-items:center;padding:22px 24px}
.spk-gift h2{margin:0 0 4px;font-size:20px}
.spk-gift p{margin:0 0 12px}
.spk-gift .sk-done{color:var(--spk-hi);font-weight:800}
.spk-plus-n{display:inline-block;font:800 22px/1 var(--f-display);color:var(--spk-num);font-variant-numeric:tabular-nums}

/* the reveal: bought Sparks arrive */
.spk-reveal{margin:24px 0 0;padding:34px 24px 30px;text-align:center}
.spk-reveal::after{content:"";position:absolute;left:50%;top:118px;width:760px;height:760px;margin:-380px 0 0 -380px;z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,77,.09) 0 9deg,transparent 9deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 0 34%,transparent 62%);mask:radial-gradient(circle,#000 0 34%,transparent 62%);opacity:0;transition:opacity .4s cubic-bezier(.22,1,.36,1)}
.spk-reveal.is-lit::after{opacity:1;animation:spk-turn 48s linear infinite}
@keyframes spk-turn{to{transform:rotate(360deg)}}
.spk-reveal .spk-bulb{--s:132px;margin:8px auto 18px}
.spk-reveal h2{margin:0;font-size:22px}
.spk-big{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:6px 0 2px}
.spk-big b{font:800 clamp(56px,11vw,84px)/1 var(--f-display);color:var(--spk-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 4px 0 rgba(10,18,50,.5)}
.spk-big span{font-size:20px;font-weight:800;color:#fff}
.spk-receipt{margin:6px 0 0;font-size:14.5px}
.spk-reveal-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 0}
.spk-reveal-act[hidden]{display:none}
.spk-skip{position:absolute;top:12px;right:12px;border:0;border-radius:10px;padding:8px 12px;font:700 14px/1 var(--f-body);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.spk-skip[hidden]{display:none}

/* a Spark in flight (into the balance) and the "+n" that rises from an earn */
.spk-fly{position:fixed;z-index:80;pointer-events:none;width:30px;height:30px;margin:-15px 0 0 -15px;will-change:transform,opacity}
.spk-plus{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:800 24px/1 var(--f-display);color:var(--spk-num);text-shadow:0 3px 0 rgba(10,18,50,.5);pointer-events:none;white-space:nowrap}

@media (prefers-reduced-motion:reduce){.spk-bulb.is-live::before,.spk-reveal.is-lit::after,.spk-pill.is-pop,.spk-bulb.is-glint i{animation:none!important}}
:root[data-motion="off"] .spk-bulb.is-live::before,:root[data-motion="off"] .spk-reveal.is-lit::after{animation:none!important}