/* Shared watercolor kit (Wave 1 round 2). Painted washes, tinted by the active theme.
   Masks live in assets/wash/ (made by scripts/make-washes.py). URLs are relative to dist/,
   where the bundled stylesheet sits next to assets/.
   Usage: add class "wc" to an element and it gets a painted wash behind it.
     variants: wc-bloom (default, wide soft bloom), wc-round, wc-stroke, wc-splash
     colors:   wc-accent (default), wc-soft, wc-gold, wc-paper
     tune with --wc-inset (how far the paint spills past the box) and --wc-alpha. */
#stage{
  --wash-accent:color-mix(in srgb,var(--accent) 46%,transparent);
  --wash-soft:color-mix(in srgb,var(--accent-2) 34%,transparent);
  --wash-gold:rgba(236,180,80,.5);
  --wash-paper:rgba(255,252,247,.82);
  --paper:#fffaf5; --paper-ink:var(--ink);
}
#stage[data-theme="night"]{ --wash-paper:rgba(48,40,78,.78); --paper:#2c2547; }
.wc{position:relative;isolation:isolate;}
.wc::before{
  content:'';position:absolute;inset:var(--wc-inset,-12px -20px);z-index:-1;pointer-events:none;
  background:var(--wc-color,var(--wash-accent));opacity:var(--wc-alpha,1);
  -webkit-mask:var(--wc-mask,url(assets/wash/bloom-wide.png)) center/100% 100% no-repeat;
          mask:var(--wc-mask,url(assets/wash/bloom-wide.png)) center/100% 100% no-repeat;
}
.wc-round{--wc-mask:url(assets/wash/bloom-1.png);}
.wc-round.wc-alt{--wc-mask:url(assets/wash/bloom-2.png);}
.wc-stroke{--wc-mask:url(assets/wash/stroke-1.png);--wc-inset:-6px -18px;}
.wc-stroke.wc-alt{--wc-mask:url(assets/wash/stroke-2.png);}
.wc-splash{--wc-mask:url(assets/wash/splash-1.png);}
.wc-soft{--wc-color:var(--wash-soft);}
.wc-gold{--wc-color:var(--wash-gold);}
.wc-paper{--wc-color:var(--wash-paper);}
/* Season theme tokens (:root is Spring, plus Lucas, Summer, Fall, Night). */
:root{
  /* Spring (default) */
  --bg-top:#fdf6f4; --bg-bot:#f3e9f2;
  --accent:#c76a92; --accent-2:#e0a0bf;
  --btn-a:#f3a7c4; --btn-b:#e98bb0; --btn-text:#8a2c52;
  --ink:#6b5560; --ink-soft:#a58a97;
  --line:#e08aa2; --line-hot:#d8547a;
  --glass:rgba(255,255,255,0.34);
  --glass-edge:rgba(255,255,255,0.6);
  --shadow:rgba(150,110,130,0.18);
  --jar-top:rgba(255,255,255,0.30); --jar-bot:rgba(236,220,232,0.32);
  --jar-floor:rgba(233,169,196,0.20);
  --petal-a:#f3c6da; --petal-b:#f7d9a8; --petal-c:#e9b6d0;
}
#stage[data-theme="lucas"]{
  /* Lucas Mode - Corbin brand red/blue, kept pastel & light */
  --bg-top:#fef4f3; --bg-bot:#eef6ff;
  --accent:#cd4236; --accent-2:#00a3ff;
  --btn-a:#f4a9a1; --btn-b:#e87b70; --btn-text:#7a1d15;
  --ink:#3c4a57; --ink-soft:#9aacbc;
  --line:#e88a82; --line-hot:#cd4236;
  --glass:rgba(255,255,255,0.40);
  --glass-edge:rgba(255,255,255,0.7);
  --shadow:rgba(120,90,110,0.16);
  --jar-top:rgba(255,255,255,0.34); --jar-bot:rgba(224,238,252,0.34);
  --jar-floor:rgba(0,163,255,0.12);
  --petal-a:#f4b0a8; --petal-b:#a9d8ff; --petal-c:#ffffff;
}
#stage[data-theme="summer"]{
  --bg-top:#fef9ec; --bg-bot:#eaf6ec;
  --accent:#e08a3c; --accent-2:#f2b45e;
  --btn-a:#ffcf6b; --btn-b:#f4a63c; --btn-text:#8a4a12;
  --ink:#5f5a3e; --ink-soft:#a89b74;
  --line:#f0b24a; --line-hot:#e07a2c;
  --glass:rgba(255,255,255,0.34); --glass-edge:rgba(255,255,255,0.6);
  --shadow:rgba(150,130,80,0.18);
  --jar-top:rgba(255,255,255,0.30); --jar-bot:rgba(226,238,222,0.34);
  --jar-floor:rgba(246,207,142,0.22);
  --petal-a:#ffe3a0; --petal-b:#c8e6b0; --petal-c:#f6cf8e;
}
#stage[data-theme="fall"]{
  --bg-top:#fcefe2; --bg-bot:#f2e2d0;
  --accent:#b85c34; --accent-2:#d98a52;
  --btn-a:#e79a5c; --btn-b:#c96a38; --btn-text:#5a2410;
  --ink:#5c4636; --ink-soft:#a3846d;
  --line:#d98a52; --line-hot:#b8482a;
  --glass:rgba(255,250,244,0.30); --glass-edge:rgba(255,240,224,0.6);
  --shadow:rgba(120,80,50,0.20);
  --jar-top:rgba(255,248,240,0.30); --jar-bot:rgba(238,214,190,0.34);
  --jar-floor:rgba(210,130,70,0.20);
  --petal-a:#e8a86a; --petal-b:#d98a52; --petal-c:#c96a38;
}
#stage[data-theme="night"]{
  --bg-top:#2b2740; --bg-bot:#1d1a30;
  --accent:#c9a7e8; --accent-2:#9d86c9;
  --btn-a:#a98bd6; --btn-b:#7d64b0; --btn-text:#ffffff;
  --ink:#e6def2; --ink-soft:#a89bc4;
  --line:#b79ae0; --line-hot:#e0709c;
  --glass:rgba(255,255,255,0.10); --glass-edge:rgba(200,180,240,0.35);
  --shadow:rgba(10,5,25,0.45);
  --jar-top:rgba(180,160,220,0.12); --jar-bot:rgba(120,100,170,0.14);
  --jar-floor:rgba(160,130,210,0.18);
  --petal-a:#b79ae0; --petal-b:#8f78c0; --petal-c:#d6a0d0;
}

/* ---------- season stage backgrounds (board backdrop) ----------
   Round 2: painted watercolor paper. Each season is one pre-painted JPEG (soft washes in
   the season's flower colors, made by scripts/jar/make-backdrops.py) under a tiny tiling
   paper-grain layer, so it costs one static background per frame. --bg-bot matches the
   lowest painted color so the html/body sync in theme.js hides any safe-area strip.
   URLs are relative to dist/, where the bundled stylesheet sits next to assets/. */
:root{
  --bg-bot:#e9dad3;
  --paper-grain:url(assets/wash/jar/grain.png) 0 0 / 128px 128px repeat;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-spring.jpg) center bottom / cover no-repeat, #f9eef0;
}
#stage[data-theme="summer"]{
  --bg-bot:#c9e3b3;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-summer.jpg) center bottom / cover no-repeat, #f8f6dc;
}
#stage[data-theme="fall"]{
  --bg-bot:#e5b489;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-fall.jpg) center bottom / cover no-repeat, #f9e6d0;
}
#stage[data-theme="night"]{
  --bg-bot:#201b43;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-night.jpg) center bottom / cover no-repeat, #262148;
}
#stage[data-theme="lucas"]{
  --bg-bot:#d7dded;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-lucas.jpg) center bottom / cover no-repeat, #f6f2f6;
}
/* summer sun rays, faded out with distance from the sun */
#stage[data-theme="summer"]::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 26px, rgba(255,232,160,0) 0deg, rgba(255,236,170,.16) 4deg, rgba(255,232,160,0) 8deg, rgba(255,232,160,0) 16deg);
  -webkit-mask-image:radial-gradient(circle at 50% 26px, #000 0, rgba(0,0,0,.45) 150px, rgba(0,0,0,0) 330px);
  mask-image:radial-gradient(circle at 50% 26px, #000 0, rgba(0,0,0,.45) 150px, rgba(0,0,0,0) 330px);
}

/* ---------- Wave 2 buyable themes (palette, board backdrop, painted controls) ----------
   Light watercolor palettes in the same token set as the seasons. Backdrops are repainted
   from a season's paper by scripts/make-themes.py; --bg-bot is the painted bottom row. */
#stage[data-theme="blossom"]{ /* Cherry Blossom: soft pinks and whites */
  --bg-top:#fff7f8; --bg-bot:#e7bcc8;
  --accent:#c4577f; --accent-2:#eba3bc;
  --btn-a:#f6b8cc; --btn-b:#e48aa8; --btn-text:#7e2648;
  --ink:#6a4f5b; --ink-soft:#ae8d9b;
  --line:#e892ad; --line-hot:#d24a72;
  --glass:rgba(255,255,255,0.38); --glass-edge:rgba(255,255,255,0.66);
  --shadow:rgba(160,100,124,0.18);
  --jar-top:rgba(255,255,255,0.32); --jar-bot:rgba(246,222,230,0.34);
  --jar-floor:rgba(240,170,196,0.20);
  --petal-a:#ffd6e2; --petal-b:#ffffff; --petal-c:#f4b4c8;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-blossom.jpg) center bottom / cover no-repeat, #fbeef2;
  --paint-a:#ec9db8; --paint-b:#cf6690;
}
#stage[data-theme="lavender"]{ /* Lavender Fields: purples and lilacs */
  --bg-top:#faf7ff; --bg-bot:#c1b6d5;
  --accent:#8a62b8; --accent-2:#bba3dc;
  --btn-a:#cdb6ea; --btn-b:#a585d2; --btn-text:#4a2a72;
  --ink:#574d68; --ink-soft:#9d91b2;
  --line:#b195dc; --line-hot:#8e4fc4;
  --glass:rgba(255,255,255,0.36); --glass-edge:rgba(255,255,255,0.62);
  --shadow:rgba(110,90,150,0.18);
  --jar-top:rgba(255,255,255,0.30); --jar-bot:rgba(228,220,244,0.34);
  --jar-floor:rgba(180,150,220,0.20);
  --petal-a:#d9c8f2; --petal-b:#b9a0e0; --petal-c:#f1e8fb;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-lavender.jpg) center bottom / cover no-repeat, #f3eefa;
  --paint-a:#b497de; --paint-b:#8a62b8;
}
#stage[data-theme="tropic"]{ /* Tropical Bloom: coral, teal and sunny yellow */
  --bg-top:#fffaf0; --bg-bot:#afd7bc;
  --accent:#e0644a; --accent-2:#4fb3a6;
  --btn-a:#ffb48f; --btn-b:#f0805e; --btn-text:#7a2a14;
  --ink:#4c5650; --ink-soft:#8fa199;
  --line:#f5a05a; --line-hot:#e2462a;
  --glass:rgba(255,255,255,0.34); --glass-edge:rgba(255,255,255,0.62);
  --shadow:rgba(80,120,110,0.18);
  --jar-top:rgba(255,255,255,0.30); --jar-bot:rgba(214,240,232,0.34);
  --jar-floor:rgba(250,200,110,0.22);
  --petal-a:#ffc9a8; --petal-b:#9fdcd0; --petal-c:#ffe08a;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-tropic.jpg) center bottom / cover no-repeat, #fdf6e6;
  --paint-a:#f79a72; --paint-b:#e0644a;
}
#stage[data-theme="frost"]{ /* Winter Frost: icy blues, silver and white */
  --bg-top:#f7fbff; --bg-bot:#b3c4d8;
  --accent:#4f7fb4; --accent-2:#9fbcdc;
  --btn-a:#b4cdea; --btn-b:#7fa3cf; --btn-text:#1f3f66;
  --ink:#465566; --ink-soft:#8c9bad;
  --line:#8fb2da; --line-hot:#d8547a;
  --glass:rgba(255,255,255,0.40); --glass-edge:rgba(255,255,255,0.72);
  --shadow:rgba(70,100,140,0.18);
  --jar-top:rgba(255,255,255,0.34); --jar-bot:rgba(222,234,246,0.36);
  --jar-floor:rgba(150,185,225,0.20);
  --petal-a:#ffffff; --petal-b:#d6e6f6; --petal-c:#b8cfe8;
  --stage-bg:var(--paper-grain), url(assets/wash/jar/bg-frost.jpg) center bottom / cover no-repeat, #eef4fa;
  --paint-a:#8fb0d8; --paint-b:#4f7fb4;
}
/* frost drifts snow instead of petals */
#stage[data-theme="frost"] .bg-petals span{width:.24em;height:.24em;border-radius:50%;opacity:.85;
  background:radial-gradient(circle,#fff 0 40%,currentColor 80%);box-shadow:0 0 5px 1px rgba(255,255,255,.7);}
/* Reset, html/body, phone stage, screens, background petals. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;}
body{
  font-family:'Quicksand',system-ui,sans-serif;
  background:linear-gradient(170deg,var(--bg-top),var(--bg-bot));
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;
}
/* Phone stage: pinned to all four screen edges so it fills the viewport exactly
   with no gap (works identically in Safari and standalone home-screen mode). */
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--bg-bot);}
#stage{
  position:fixed;
  top:0;left:0;right:0;bottom:0;   /* pinned to all four edges: reaches the physical bottom (home indicator area) in standalone */
  width:100%;
  height:100vh;                 /* fallback */
  height:-webkit-fill-available;
  height:auto;                  /* with bottom:0 this spans the whole layout viewport; a fixed 100dvh stopped short of the safe area on iPhone */
  background:linear-gradient(175deg,var(--bg-top) 0%,var(--bg-bot) 100%);
  background:var(--stage-bg);   /* per-season layered backdrop, see 01-themes.css */
  background-color:var(--bg-bot);
  isolation:isolate;            /* own stacking context so the summer ray layer (z-index:-1) stays visible on desktop */
  overflow:hidden;transition:background-color .5s ease;
}
/* On wide screens (desktop), constrain to a centered phone-shaped frame. */
@media (min-aspect-ratio:520/852){
  #stage{
    position:relative;inset:auto;margin:0 auto;
    width:min(430px, calc(100dvh * 430/852));
    height:100dvh;
    box-shadow:0 20px 60px rgba(150,110,130,0.25);
  }
  body{display:flex;align-items:center;justify-content:center;}
}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;}
.hidden{display:none!important;}

/* drifting season motes in the bg: petals (spring), pollen (summer), leaves (fall),
   fireflies (night). Each starts at its own height (--y, set in theme.js) so a still
   frame shows them spread out instead of stacked along the top edge. */
.bg-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.bg-petals span{position:absolute;top:calc(var(--y,0) * 1vh);font-size:22px;width:.5em;height:.72em;
  border-radius:85% 0 85% 0;background:currentColor;opacity:.42;animation:drift linear infinite;}
@keyframes drift{
  0%{transform:translateY(calc(var(--y,0) * -1vh - 40px)) rotate(0deg);opacity:0;}
  12%{opacity:.5;}
  88%{opacity:.5;}
  100%{transform:translateY(calc(100vh - var(--y,0) * 1vh + 40px)) rotate(320deg);opacity:0;}
}
#stage[data-theme="summer"] .bg-petals span{width:.26em;height:.26em;border-radius:50%;opacity:.8;
  background:radial-gradient(circle,#fffbe6 0 35%,currentColor 75%);box-shadow:0 0 6px 1px rgba(255,236,150,.55);}
#stage[data-theme="fall"] .bg-petals span{width:.62em;height:.62em;border-radius:0 78% 0 78%;opacity:.55;}
#stage[data-theme="night"] .bg-petals span{width:.2em;height:.2em;border-radius:50%;opacity:.9;background:#fff3a8;
  box-shadow:0 0 6px 2px rgba(255,232,120,.55),0 0 16px 5px rgba(255,232,120,.16);animation-direction:reverse;}
@media (prefers-reduced-motion: reduce){ .bg-petals span{animation:none;} }


/* ---------- UI tokens, shared buttons, type scale, screen transitions (screens) ---------- */
#stage{
  --fs-display:62px; --fs-h1:30px; --fs-h2:20px; --fs-body:16px; --fs-small:13.5px; --fs-micro:11px;
  --card:rgba(255,255,255,.9); --card-edge:rgba(255,255,255,.96); --card-ink:var(--ink);
  --label:color-mix(in srgb,var(--ink) 72%,var(--accent));
  --divider:color-mix(in srgb,var(--accent) 16%,transparent);
  --tile:color-mix(in srgb,var(--accent-2) 12%,#fff);
  --btn-lip:color-mix(in srgb,var(--btn-b) 68%,#4a1830);
  --btn-glow:color-mix(in srgb,var(--btn-b) 40%,transparent);
  --btn-ts:rgba(255,255,255,.4);
  --ghost-bg:rgba(255,255,255,.86); --ghost-ink:var(--accent);
  --ghost-edge:color-mix(in srgb,var(--accent) 20%,#fff);
  --ghost-lip:color-mix(in srgb,var(--accent) 22%,#e9dde3);
  --scrim:color-mix(in srgb,var(--bg-bot) 42%,rgba(60,30,50,.34));
  --ease-out:cubic-bezier(.2,.8,.25,1); --ease-spring:cubic-bezier(.18,1.25,.4,1);
}
#stage[data-theme="night"]{
  --card:rgba(50,44,80,.95); --card-edge:rgba(200,180,255,.26); --card-ink:#efe8fb;
  --label:#cfc2ea; --divider:rgba(200,180,255,.16); --tile:rgba(255,255,255,.07);
  --btn-lip:#4f3c80; --btn-glow:rgba(130,100,200,.45); --btn-ts:rgba(40,20,80,.35);
  --ghost-bg:rgba(255,255,255,.1); --ghost-ink:#eee4ff; --ghost-edge:rgba(210,190,255,.32); --ghost-lip:rgba(10,5,30,.45);
  --scrim:rgba(14,10,30,.5);
}
#stage[data-theme="lucas"]{ --btn-lip:#b8463b; }
#stage[data-theme="summer"]{ --btn-lip:#c97a22; }
#stage[data-theme="fall"]{ --btn-lip:#8f4520; --btn-ts:rgba(255,230,200,.3); }

/* buttons: rounded, chunky, with a lip that compresses when pressed */
.btn{
  position:relative;border:none;border-radius:999px;min-height:54px;padding:0 24px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Quicksand',system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1;letter-spacing:.2px;
  cursor:pointer;-webkit-touch-callout:none;
  transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out),filter .12s;
}
.btn:active{transform:translateY(3px) scale(.985);}
.btn-primary{
  background:linear-gradient(180deg,color-mix(in srgb,var(--btn-a) 80%,#fff) 0%,var(--btn-a) 38%,var(--btn-b) 100%);
  color:var(--btn-text,#7a3d18);text-shadow:0 1px 0 var(--btn-ts);
  box-shadow:0 5px 0 var(--btn-lip),0 12px 22px var(--btn-glow),inset 0 1.5px 0 rgba(255,255,255,.55);
}
.btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--btn-lip),0 4px 10px var(--btn-glow),inset 0 1.5px 0 rgba(255,255,255,.4);filter:brightness(.97);}
.btn-ghost{
  background:var(--ghost-bg);color:var(--ghost-ink);
  box-shadow:inset 0 0 0 1.5px var(--ghost-edge),0 4px 0 var(--ghost-lip),0 8px 18px var(--shadow);
}
.btn-ghost:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--ghost-edge),0 1px 0 var(--ghost-lip),0 3px 8px var(--shadow);}
.btn-text{background:none;color:var(--label);min-height:46px;font-size:15px;font-weight:700;}
.btn-text:active{transform:scale(.95);opacity:.75;}
.btn-gold{
  background:linear-gradient(180deg,#fff0b8 0%,#ffd469 40%,#f4ac32 100%);color:#6e3d05;text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:0 5px 0 #c27712,0 12px 22px rgba(230,150,30,.38),inset 0 1.5px 0 rgba(255,255,255,.75);
}
.btn-gold:active{transform:translateY(4px);box-shadow:0 1px 0 #c27712,0 4px 10px rgba(230,150,30,.3);}
.btn-lg{min-height:58px;font-size:18px;}
.btn-xl{min-height:66px;font-size:21px;letter-spacing:.3px;}
.btn-block{width:100%;}
.btn-svg{width:20px;height:20px;flex:0 0 auto;}
.btn-play{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);flex:0 0 auto;}
.btn-play svg{width:17px;height:17px;margin-left:2px;}
.btn-lg .btn-play{width:26px;height:26px;}
.btn-lg .btn-play svg{width:15px;height:15px;}

/* ---------- screen transitions ---------- */
/* entering: children ease in (the #game screen never animates) */
.screen.scr-in > *{animation:scrIn .34s var(--ease-spring) both;}
/* leaving: root counts as hidden at once, children play a short exit, then display:none */
.screen.scr-out{visibility:hidden;pointer-events:none;}
.screen.scr-out > *{visibility:visible;animation:scrOut .12s cubic-bezier(.4,0,1,1) both;}
/* #game never moves (pointer x maps from its rect); when it comes in from a full screen its
   children only fade, after the outgoing screen has cleared, so the two never overlap */
#game.scr-fade > *{animation:fadeIn .2s ease-out .1s both;}
/* kept rendering under an overlay (game under pause/game over, home under the season picker) */
.screen.behind{visibility:hidden;}
.screen.behind > *{visibility:visible;pointer-events:none;}
@keyframes scrIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes scrOut{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-6px) scale(.98);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .screen.scr-in > *, .screen.scr-in::before{animation:fadeIn .2s ease both !important;}
  .screen.scr-out > *, .screen.scr-out::before{animation:fadeOut .16s ease both !important;}
}
.sr-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ---------- Round 2: painted controls (no lips, no plastic) ---------- */
#stage{--paint-a:color-mix(in srgb,var(--btn-a) 70%,var(--accent));--paint-b:var(--accent);--paint-ink:#fff;}
#stage[data-theme="summer"]{--paint-ink:#5a3208;--paint-a:#ffd36e;--paint-b:#f3a43a;}
#stage[data-theme="fall"]{--paint-a:#e79a5c;--paint-b:#c2602e;}
#stage[data-theme="night"]{--paint-a:#9d86e0;--paint-b:#6f58b8;--paint-ink:#fbf7ff;}
#stage[data-theme="lucas"]{--paint-a:#e0584a;--paint-b:#cd4236;}
.btn{isolation:isolate;border-radius:0;min-height:52px;font-weight:600;letter-spacing:.3px;
  transition:transform .16s var(--ease-out),opacity .16s;}
.btn:active{transform:scale(.97);}
.btn-primary,.btn-gold{background:none;box-shadow:none;text-shadow:none;color:var(--paint-ink);}
.btn-primary::before,.btn-gold::before{content:'';position:absolute;inset:-8px -16px;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,var(--paint-a),var(--paint-b));
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-3.png) center/100% 100% no-repeat;
          mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-3.png) center/100% 100% no-repeat;
  filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--paint-b) 28%,transparent));transition:transform .2s var(--ease-out);}
.btn-gold{color:#5e3305;}
.btn-gold::before{background:linear-gradient(100deg,#ffe38f,#f2ad3c);}
.btn-primary:active,.btn-gold:active{transform:scale(.97);box-shadow:none;filter:none;}
.btn-primary:active::before{transform:scale(1.03,.94);}
.btn-ghost{background:none;box-shadow:none;color:var(--ghost-ink);font-weight:600;}
.btn-ghost:active{transform:scale(.96);box-shadow:none;opacity:.7;}
.btn-text{font-weight:600;}
.btn-xl{font-family:'Fraunces',serif;font-weight:500;font-size:25px;letter-spacing:.2px;}
.btn-lg{font-size:18px;}
.btn-play{width:auto;height:auto;background:none;box-shadow:none;}
.btn-play svg,.btn-lg .btn-play svg{width:15px;height:15px;margin-left:0;}
/* Home: title screen. */
/* ---------- HOME ---------- */
#home{align-items:center;text-align:center;z-index:2;
  padding:calc(env(safe-area-inset-top) + 14px) 24px calc(env(safe-area-inset-bottom) + 26px);}
.home-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 8px;border-radius:999px;
  background:var(--ghost-bg);box-shadow:inset 0 0 0 1.5px var(--ghost-edge),0 4px 12px var(--shadow);
  font-weight:700;font-size:15px;color:var(--card-ink);}
.chip-ico{width:22px;height:22px;color:#e2a93a;padding:2px;}
.chip-lbl{font-size:var(--fs-micro);letter-spacing:1.5px;text-transform:uppercase;color:var(--label);font-weight:700;}
.chip-val{font-variant-numeric:tabular-nums;font-weight:800;}
.home-coins .chip-val{color:#c8892a;}
#stage[data-theme="night"] .home-coins .chip-val{color:#ffd57a;}
.coin-ico{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(160,110,30,.35));}

.home-head{margin-top:clamp(12px,4vh,40px);}
.home-title{font-family:'Fraunces',serif;font-weight:600;font-size:var(--fs-display);line-height:1;letter-spacing:-1px;
  color:var(--accent);display:flex;align-items:baseline;justify-content:center;gap:12px;
  text-shadow:0 2px 0 rgba(255,255,255,.9),0 4px 0 color-mix(in srgb,var(--accent) 22%,transparent),0 12px 24px color-mix(in srgb,var(--accent) 22%,transparent);}
.home-title .ht-b{color:var(--accent-2);}
#stage[data-theme="night"] .home-title{text-shadow:0 3px 0 rgba(20,10,45,.6),0 0 26px rgba(200,170,255,.35);}
.home-sub{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:var(--label);font-weight:700;}
.home-sub i{display:block;width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent-2));}
.home-sub i:last-child{transform:scaleX(-1);}

/* painted flower field: one pre-rendered canvas (screens.js) filling the lower screen behind
   the UI, plus the swaying daisy (#homeMark, tap it for a secret coin) planted in it */
.home-hero{flex:1 1 auto;min-height:0;width:100%;pointer-events:none;}
.home-field{position:absolute;left:0;right:0;top:27%;bottom:0;z-index:-1;pointer-events:none;}
.field-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.field-sway{position:absolute;left:50%;top:var(--mark-top,40%);width:var(--mh,66px);height:calc(var(--mh,66px) + var(--stem,64px));
  margin-left:calc(var(--mh,66px) / -2);transform-origin:50% 100%;animation:fieldSway 6s ease-in-out infinite;}
.field-sway::before{content:'';position:absolute;left:50%;top:calc(var(--mh,66px) * .78);bottom:0;width:3px;margin-left:-1.5px;border-radius:3px;
  background:linear-gradient(var(--stem-c,#8db27a),color-mix(in srgb,var(--stem-c,#8db27a) 70%,transparent));opacity:.85;}
.field-sway::after{content:'';position:absolute;left:50%;bottom:calc(var(--stem,64px) * .34);width:22px;height:11px;margin-left:1px;
  border-radius:0 100% 0 100%;background:var(--stem-c,#8db27a);opacity:.7;transform:rotate(-24deg);transform-origin:0 100%;}
@keyframes heroSpin{to{transform:rotate(360deg);}}   /* also used by 06-overlays.css */
@keyframes fieldSway{0%,100%{transform:rotate(-3.5deg);}50%{transform:rotate(3.5deg);}}
.home-mark{position:absolute;left:0;top:0;width:var(--mh,66px);height:var(--mh,66px);object-fit:contain;cursor:pointer;pointer-events:auto;
  filter:drop-shadow(0 5px 8px color-mix(in srgb,var(--accent) 26%,transparent));}
#stage[data-theme="night"] .home-mark{filter:drop-shadow(0 0 12px rgba(220,200,255,.35));}
.home-mark.tapped{animation:tapPulse .35s ease-out;}
@keyframes tapPulse{0%{transform:scale(1) rotate(0deg);}35%{transform:scale(1.2) rotate(4deg);}70%{transform:scale(.92) rotate(-2deg);}100%{transform:scale(1) rotate(0deg);}}

.home-actions{margin-top:10px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:300px;}
.home-actions #startBtn{width:100%;}
.home-row{display:flex;gap:12px;width:100%;}
.home-row .btn{flex:1;padding:0 10px;}
.btn-tile{min-height:52px;font-size:16px;}

/* home entry: staggered rise, the field fades up from below; exit: field sinks away */
#home.scr-in > .home-top{animation-delay:0s;}
#home.scr-in > .home-head{animation-delay:.03s;}
#home.scr-in > .home-field{animation:fieldIn .5s var(--ease-out) both;}
#home.scr-in > .home-actions{animation-delay:.07s;}
@keyframes fieldIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
#home.scr-out > .home-field{animation:fieldOut .24s cubic-bezier(.4,0,.7,.6) both;}
#home.scr-out > .home-actions{animation:actOut .2s ease-in both;}
#home.scr-out > .home-head,#home.scr-out > .home-top{animation:headOut .2s ease-in both;}
@keyframes fieldOut{to{opacity:0;transform:translateY(40px);}}
@keyframes actOut{to{opacity:0;transform:translateY(40px);}}
@keyframes headOut{to{opacity:0;transform:translateY(-24px);}}
@media (prefers-reduced-motion: reduce){
  .field-sway{animation:none;}
}

/* ---------- Round 2: floating type on soft washes ---------- */
.chip{background:none;box-shadow:none;padding:0 6px;height:32px;font-weight:600;}
.chip-ico{color:color-mix(in srgb,#e2a93a 80%,var(--accent));}
.home-head{position:relative;isolation:isolate;margin-top:clamp(18px,5vh,48px);}
.home-head::before{content:'';position:absolute;left:50%;top:50%;width:340px;height:190px;margin:-100px 0 0 -170px;z-index:-1;pointer-events:none;
  background:var(--wash-soft);-webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
.home-head::after{content:'';position:absolute;left:58%;top:30%;width:150px;height:110px;z-index:-1;pointer-events:none;opacity:.55;
  background:var(--wash-accent);-webkit-mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;}
.home-title{font-weight:500;letter-spacing:-1.5px;text-shadow:0 1px 0 rgba(255,255,255,.7);}
#stage[data-theme="night"] .home-title{text-shadow:0 0 24px rgba(200,170,255,.3);}
.home-sub{font-weight:600;letter-spacing:4px;font-size:11.5px;}
.home-sub i{height:1px;width:24px;}
.home-actions{gap:8px;max-width:260px;}
.home-row{justify-content:center;gap:28px;}
.home-row .btn{flex:0 0 auto;padding:0 4px;}
.btn-tile{min-height:44px;font-size:15px;color:var(--label);}
.btn-tile .btn-svg{width:17px;height:17px;opacity:.75;}
#startNewBtn{min-height:40px;font-size:14px;color:var(--label);}
/* Shared card panel, settings rows and toggles, stats. */
/* ---------- PANEL (shared card) ---------- */
#settings{z-index:3;align-items:center;justify-content:center;padding:0 24px;text-align:center;}
.panel{position:relative;background:var(--card);border:1.5px solid var(--card-edge);border-radius:30px;
  padding:28px 24px 22px;width:100%;max-width:330px;color:var(--card-ink);
  box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 18px 44px var(--shadow),0 4px 12px var(--shadow);}
#stage[data-theme="night"] .panel{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 44px rgba(5,2,15,.55);}
.panel h2{font-family:'Fraunces',serif;font-weight:600;font-size:var(--fs-h1);line-height:1.1;color:var(--accent);margin-bottom:18px;text-align:center;letter-spacing:-.3px;}
#stage[data-theme="night"] .panel h2{color:#e2cdfb;}

/* art that sits on the top edge of a card */
.card-art{position:relative;width:96px;height:96px;margin:-80px auto 2px;pointer-events:none;}
.card-art img{position:relative;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(80,40,60,.25));}
.art-halo{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-48px 0 0 -60px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,color-mix(in srgb,var(--petal-a) 60%,transparent) 45%,transparent 70%);}
#stage[data-theme="night"] .art-halo{background:radial-gradient(circle,rgba(215,195,255,.45) 0%,rgba(150,120,220,.2) 45%,transparent 70%);}

/* ---------- SETTINGS ---------- */
.set-group{background:var(--tile);border-radius:20px;padding:2px 14px;}
.setting-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--divider);}
.setting-row:last-child{border-bottom:none;}
.row-ico{width:32px;height:32px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:var(--btn-text);box-shadow:0 2px 0 var(--btn-lip);}
.row-ico svg{width:19px;height:19px;}
.row-lbl{flex:1;text-align:left;font-weight:700;font-size:var(--fs-body);color:var(--card-ink);}
.toggle{width:54px;height:32px;border-radius:999px;position:relative;cursor:pointer;flex:0 0 auto;
  background:color-mix(in srgb,var(--ink) 18%,#fff);box-shadow:inset 0 2px 4px rgba(0,0,0,.12);transition:background .22s var(--ease-out);}
#stage[data-theme="night"] .toggle:not(.on){background:rgba(255,255,255,.16);}
.toggle.on{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#f4eef2);box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .24s var(--ease-spring);}
.toggle.on::after{transform:translateX(22px);}
.toggle:active::after{width:30px;}
.toggle.on:active::after{transform:translateX(18px);}

.theme-block{padding:18px 0 4px;}
.theme-label{font-size:var(--fs-micro);letter-spacing:2px;text-transform:uppercase;color:var(--label);font-weight:800;margin-bottom:12px;text-align:center;}
.danger-link{display:block;margin:16px auto 14px;padding:6px 10px;font-size:var(--fs-small);color:var(--label);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;background:none;border:none;font-family:'Quicksand';font-weight:700;}
.danger-link:active{opacity:.6;}

/* ---------- STATS ---------- */
#stats{z-index:3;align-items:center;justify-content:center;padding:0 24px;text-align:center;}
.stats-panel{margin-top:40px;}
.stats-panel h2{margin-bottom:10px;}
.stats-best{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;}
.sb-lbl{font-size:var(--fs-micro);letter-spacing:2px;text-transform:uppercase;color:var(--label);font-weight:800;}
.sb-val{font-family:'Fraunces',serif;font-weight:600;font-size:44px;line-height:1.05;color:var(--accent-2);font-variant-numeric:tabular-nums;}
#stage[data-theme="night"] .sb-val{color:#f0dcff;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.stat-tile{background:var(--tile);border-radius:18px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.st-ico{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:var(--btn-text);box-shadow:0 2px 0 var(--btn-lip);margin-bottom:4px;}
.st-ico svg{width:17px;height:17px;}
.stat-val{font-family:'Fraunces',serif;font-weight:600;font-size:28px;line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums;}
#stage[data-theme="night"] .stat-val{color:#e8d6ff;}
.st-lbl{font-size:12.5px;font-weight:700;color:var(--label);}

/* ---------- Round 2: paper sheet with a watercolor edge, quiet lists ---------- */
.panel{background:none;border:none;box-shadow:none;isolation:isolate;}
#stage[data-theme="night"] .panel{box-shadow:none;}
.panel::before,.panel::after{content:'';position:absolute;z-index:-1;pointer-events:none;}
.panel::before{inset:-24% -26%;background:var(--paper);opacity:.96;
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-4.png) center/100% 100% no-repeat,url(assets/wash/bloom-2.png) center/100% 100% no-repeat;
          mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-4.png) center/100% 100% no-repeat,url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.panel::after{left:-30px;top:-34px;width:66%;height:46%;opacity:.4;background:var(--wash-accent);
  -webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.panel h2{font-weight:500;letter-spacing:-.5px;}
.set-group{background:none;padding:0 2px;}
.setting-row{padding:13px 0;border-bottom:1px solid var(--divider);}
.row-ico{background:none;box-shadow:none;color:var(--accent);width:24px;height:24px;}
#stage[data-theme="night"] .row-ico{color:#cdb8f5;}
.row-lbl{font-weight:600;}
.toggle{width:46px;height:28px;box-shadow:none;background:color-mix(in srgb,var(--ink) 14%,transparent);}
.toggle.on{background:var(--accent);}
#stage[data-theme="night"] .toggle.on{background:#8d74d6;}
.toggle::after{width:22px;height:22px;background:#fffdfb;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.toggle.on::after{transform:translateX(18px);}
.toggle:active::after{width:26px;}
.toggle.on:active::after{transform:translateX(14px);}
.theme-label{font-weight:700;letter-spacing:2.5px;}
.danger-link{font-weight:600;text-decoration-thickness:1px;opacity:.8;}
.stats-best{margin-bottom:10px;}
.sb-val{font-weight:500;}
.stat-grid{gap:0;margin-bottom:22px;}
.stat-tile{background:none;border-radius:0;padding:12px 6px 10px;border-bottom:1px solid var(--divider);}
.stat-tile:nth-child(odd){border-right:1px solid var(--divider);}
.stat-tile:nth-child(n+3){border-bottom:none;}
.st-ico{background:none;box-shadow:none;color:var(--accent-2);width:22px;height:22px;margin-bottom:0;}
#stage[data-theme="night"] .st-ico{color:#cdb8f5;}
.stat-val{font-weight:500;}
.st-lbl{font-weight:600;}

/* ---------- Round 4: no hard band at the foot of full-screen sheets ----------
   The season paper ends in a painted ground strip made for the jar; on settings and stats it
   read as an unblended band. A soft paper veil fades it out from mid-screen down. */
#settings::after,#stats::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--paper) 70%,transparent) 76%,var(--paper) 94%);}
#settings,#stats{isolation:isolate;}
/* Game HUD: top bar, power-ups, bubbles, charge intro, combo pop, next, progress bar, action band, board, hint. */
/* ---------- GAME ---------- */
#game{z-index:1;
  /* HUD tokens: frosted cards that read on every season without backdrop-filter
     (the canvas under the HUD repaints every frame, so a live blur would cost frames) */
  --hud-card:rgba(255,255,255,.80); --hud-card-2:rgba(255,255,255,.60);
  --hud-edge:rgba(255,255,255,.95);
  --hud-depth:color-mix(in srgb, var(--btn-b) 68%, #3a1a2a);
  --hud-depth-soft:color-mix(in srgb, var(--btn-b) 30%, transparent);
  --hud-hi:rgba(255,255,255,.75);
  --bubble-bg:#fffdfd;
  --badge-ring:#fff;
}
#stage[data-theme="night"] #game{
  --hud-card:rgba(66,57,102,.86); --hud-card-2:rgba(52,45,84,.78);
  --hud-edge:rgba(206,186,248,.30);
  --hud-depth:#2c2348; --hud-depth-soft:rgba(10,6,28,.55);
  --hud-hi:rgba(255,255,255,.12);
  --bubble-bg:#3b3460;
  --badge-ring:#2b2740;
}

/* ---------- top bar: score card, coins, NEXT card, pause ---------- */
.topbar{position:absolute;top:0;left:0;right:0;height:calc(96px + env(safe-area-inset-top));display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 16px 8px;z-index:5;}
/* soft header wash so drifting background petals never sit on top of the HUD text */
.topbar::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-16px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg-top) 0%,color-mix(in srgb,var(--bg-top) 88%,transparent) 62%,transparent 100%);}
.hud-card,.score-wrap,.next-wrap,.coin-chip,.pause-btn{
  background:linear-gradient(180deg,var(--hud-card),var(--hud-card-2));
  border:1.5px solid var(--hud-edge);
  box-shadow:0 8px 20px var(--shadow), inset 0 1px 0 var(--hud-hi);
}
.score-wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:0 0 auto;min-width:104px;border-radius:20px;padding:7px 16px 8px 14px;}
.score-label{font-size:10px;line-height:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
.score-line{display:flex;align-items:flex-end;}
/* one theme-aware score color for the whole run (overrides the old per-1000 inline color) */
.score-val{display:inline-block;font-family:'Fraunces',serif;font-size:32px;font-weight:600;line-height:1.04;letter-spacing:-.4px;color:var(--accent)!important;
  font-variant-numeric:lining-nums tabular-nums;transform-origin:0 80%;transition:none;text-shadow:0 1px 0 var(--hud-hi);}
.score-val.hud-tick{animation:scoreTick .42s cubic-bezier(.25,1.7,.45,1);}
@keyframes scoreTick{0%{transform:scale(1);}35%{transform:scale(1.16);}100%{transform:scale(1);}}
.score-gain{position:absolute;top:6px;right:12px;font-family:'Quicksand';font-weight:800;font-size:12.5px;line-height:14px;color:var(--accent);white-space:nowrap;opacity:0;pointer-events:none;}
.score-gain.hud-go{animation:scoreGain .9s ease-out forwards;}
@keyframes scoreGain{0%{opacity:0;transform:translateY(6px) scale(.7);}18%{opacity:1;transform:translateY(-2px) scale(1.08);}70%{opacity:1;transform:translateY(-8px) scale(1);}100%{opacity:0;transform:translateY(-14px) scale(1);}}
.best-mini{display:flex;align-items:center;gap:4px;font-size:11px;line-height:14px;color:var(--ink-soft);font-weight:700;margin-top:1px;}
.best-mini::before{content:'';width:11px;height:11px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 3.5L12 4l4.5 7.5L21 8l-2 11H5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 3.5L12 4l4.5 7.5L21 8l-2 11H5z'/%3E%3C/svg%3E") center/contain no-repeat;}
/* Lucas Mode: 3x scoring tag on the score card */
#stage[data-theme="lucas"] .score-wrap::after{content:'3x';position:absolute;top:-8px;right:-8px;padding:3px 7px;border-radius:10px;
  background:linear-gradient(135deg,#e2574b,#cd4236);color:#fff;font-family:'Quicksand';font-weight:800;font-size:11px;letter-spacing:.3px;
  box-shadow:0 3px 8px rgba(205,66,54,.35), inset 0 0 0 1.5px rgba(255,255,255,.55);}

.coin-chip{display:flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;margin-left:auto;align-self:center;height:32px;padding:0 11px 0 5px;border-radius:15px;
  font-family:'Quicksand';font-weight:800;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;}
.coin-chip-ico{width:20px;height:20px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(120,80,0,.25));}
.coin-chip.hud-bump .coin-chip-ico{animation:coinBump .5s cubic-bezier(.25,1.7,.45,1);}
@keyframes coinBump{0%{transform:scale(1) rotate(0);}40%{transform:scale(1.35) rotate(-14deg);}100%{transform:scale(1) rotate(0);}}

/* ---------- power-up buttons (shuffle, delete) in the bottom band ---------- */
.pu-btn{display:none;position:relative;grid-row:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:64px;height:54px;padding:0;
  border-radius:18px;border:1.5px solid var(--hud-edge);cursor:pointer;font-family:'Quicksand';
  background:linear-gradient(180deg,var(--hud-card),var(--hud-card-2));
  box-shadow:0 3px 0 var(--hud-depth-soft), 0 8px 18px var(--shadow), inset 0 1px 0 var(--hud-hi);
  transition:transform .08s ease-out, box-shadow .08s ease-out;}
.pu-btn.show{display:flex;}
.pu-shuffle{grid-column:1;}
.pu-delete{grid-column:3;}
.pu-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--hud-depth-soft), 0 3px 8px var(--shadow), inset 0 1px 0 var(--hud-hi);}
.pu-ico{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:0 2px 0 rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.5);}
.pu-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.pu-shuffle .pu-ico{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--btn-text,#fff);}
.pu-delete .pu-ico{background:linear-gradient(135deg,#ec7a90,#c8465f);color:#fff;}
.pu-btn.pulse .pu-ico{animation:puPulse .5s cubic-bezier(.25,1.6,.45,1);}
@keyframes puPulse{0%,100%{transform:scale(1);}45%{transform:scale(1.32) rotate(-8deg);}}
.pu-cap{font-size:9.5px;line-height:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-soft);}
.pu-price{display:none;align-items:center;gap:2px;color:var(--ink);letter-spacing:.2px;font-size:10.5px;}
.pu-price img{width:11px;height:11px;object-fit:contain;}
.pu-btn.empty .pu-name{display:none;}
.pu-btn.empty .pu-price{display:inline-flex;}
.pu-btn.empty .pu-ico{filter:saturate(.8);}
.pu-btn.armed .pu-name,.pu-btn.armed .pu-price{display:none;}
.pu-btn.armed .pu-cap::after{content:'Cancel';}
/* count badge on the top-right corner; hidden at zero (the price shows instead) */
.pu-n{position:absolute;top:-8px;right:-8px;min-width:23px;height:23px;padding:0 6px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#3a1a2a));color:#fff;
  font-family:'Quicksand';font-weight:800;font-size:12.5px;line-height:1;box-shadow:0 0 0 2px var(--badge-ring), 0 3px 8px var(--shadow);}
.pu-btn.empty .pu-n{visibility:hidden;}
.pu-n.hud-pop{animation:badgePop .42s cubic-bezier(.25,1.8,.45,1);}
@keyframes badgePop{0%{transform:scale(.4);}60%{transform:scale(1.25);}100%{transform:scale(1);}}
/* armed delete: red face plus a pulsing ring drawn on a pseudo element (button box never moves) */
.pu-btn.armed{border-color:#e2647e;background:linear-gradient(180deg,#ffeef2,#ffd9e1);}
#stage[data-theme="night"] .pu-btn.armed{background:linear-gradient(180deg,#6a3a5e,#4e2c4a);}
.pu-btn.armed .pu-cap{color:#c8465f;}
.pu-btn.armed::after{content:'';position:absolute;inset:-6px;border-radius:23px;border:2.5px solid rgba(216,60,90,.75);pointer-events:none;animation:armedRing 1.1s ease-out infinite;}
@keyframes armedRing{0%{opacity:.9;transform:scale(.94);}100%{opacity:0;transform:scale(1.14);}}

/* claim bubble */
.claim-bubble{position:absolute;top:calc(96px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1.5px solid var(--glass-edge);border-radius:20px;padding:16px 18px;width:280px;box-shadow:0 12px 34px var(--shadow);text-align:center;animation:bubbleIn .3s cubic-bezier(.2,1.3,.5,1);}
.claim-bubble.hidden{display:none;}
.claim-arrow{position:absolute;top:-9px;left:40px;width:18px;height:18px;background:rgba(255,255,255,.95);border-left:1.5px solid var(--glass-edge);border-top:1.5px solid var(--glass-edge);transform:rotate(45deg);}
@keyframes bubbleIn{from{opacity:0;transform:translateX(-50%) scale(.8) translateY(-8px);}to{opacity:1;transform:translateX(-50%) scale(1) translateY(0);}}
.claim-text{font-family:'Quicksand';font-weight:700;font-size:15px;color:#5a4650;margin-bottom:14px;line-height:1.3;}
.claim-actions{display:flex;gap:10px;}
.claim-btn{flex:1;border:none;border-radius:16px;padding:11px 0;font-family:'Quicksand';font-weight:700;font-size:14px;cursor:pointer;transition:transform .1s;}
.claim-btn:active{transform:scale(.95);}
.claim-yes{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--btn-text,#7a3d18);}
.claim-no{background:rgba(0,0,0,0.05);color:#8a5a72;border:1.5px solid rgba(160,120,150,.3);}

/* delete-armed toast: sits above the action band (never over the NEXT preview) */
.delete-armed{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:auto;bottom:calc(66px + env(safe-area-inset-bottom));z-index:7;
  display:flex;align-items:center;gap:8px;padding:5px 5px 5px 7px;border-radius:999px;
  background:linear-gradient(135deg,#e8697f,#c8465f);color:#fff;font-family:'Quicksand';font-weight:700;font-size:13.5px;white-space:nowrap;
  box-shadow:0 10px 24px rgba(180,60,90,.38), inset 0 1px 0 rgba(255,255,255,.35);
  animation:toastIn .34s cubic-bezier(.2,1.5,.45,1);}
.delete-armed.hidden{display:none;}
.da-ico{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.da-ico svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.delete-armed #deleteCancel{background:#fff;color:#c8465f;padding:6px 13px;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 2px 0 rgba(120,20,40,.25);}
.delete-armed #deleteCancel:active{transform:translateY(1px);box-shadow:none;}
@keyframes toastIn{0%{opacity:0;transform:translateY(14px) scale(.85);}100%{opacity:1;transform:none;}}

/* buy bubble: positioned by offerBuy() above the button that opened it; --tail is the button center */
.buy-bubble{position:absolute;top:auto;left:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:9;width:292px;padding:15px 16px 14px;
  border-radius:22px;background:var(--bubble-bg);border:1.5px solid var(--hud-edge);text-align:left;color:var(--ink);
  box-shadow:0 18px 44px rgba(60,30,50,.24), 0 2px 8px rgba(60,30,50,.10);
  transform-origin:var(--tail,40px) calc(100% + 12px);animation:buyIn .34s cubic-bezier(.2,1.45,.45,1);}
.buy-bubble.hidden{display:none;}
.buy-bubble .claim-arrow{top:auto;bottom:-9px;left:calc(var(--tail,40px) - 9px);width:18px;height:18px;background:var(--bubble-bg);
  border:none;border-right:1.5px solid var(--hud-edge);border-bottom:1.5px solid var(--hud-edge);border-bottom-right-radius:4px;transform:rotate(45deg);}
@keyframes buyIn{0%{opacity:0;transform:translateY(10px) scale(.6);}100%{opacity:1;transform:none;}}
.buy-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-soft);}
.buy-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;}
.buy-close:active{transform:scale(.9);}
.buy-head{display:flex;align-items:center;gap:11px;padding-right:30px;margin-bottom:11px;}
.buy-ico{width:40px;height:40px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.5);}
.buy-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.buy-ico.k-shuffle{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--btn-text,#fff);}
.buy-ico.k-delete{background:linear-gradient(135deg,#ec7a90,#c8465f);color:#fff;}
.buy-title{font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.15;color:var(--ink);}
.buy-desc{font-family:'Quicksand';font-weight:600;font-size:12.5px;line-height:1.3;color:var(--ink-soft);margin-top:2px;}
.buy-text{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:'Quicksand';font-weight:700;font-size:13px;color:var(--ink-soft);
  padding:8px 11px;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,transparent);margin-bottom:12px;line-height:1.2;}
.buy-text .bt-g{display:flex;flex-direction:column;align-items:flex-start;gap:1px;font-size:10px;letter-spacing:.8px;text-transform:uppercase;}
.buy-text .bt-g.r{align-items:flex-end;}
.buy-text b{display:inline-flex;letter-spacing:0;text-transform:none;align-items:center;gap:4px;color:var(--ink);font-size:15px;font-weight:800;}
.buy-text img{width:16px;height:16px;object-fit:contain;}
.buy-text.cant b.have{color:#c8465f;}
.buy-meter{display:none;height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin:-4px 0 13px;}
.buy-meter-fill{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#f2c45a,#d8a53c);}
.buy-bubble.cant .buy-meter{display:block;}
.buy-bubble .claim-actions{display:flex;gap:9px;}
.buy-bubble .claim-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:42px;padding:0 10px;border-radius:14px;font-size:14px;font-weight:800;
  transition:transform .08s ease-out, box-shadow .08s ease-out;}
.buy-bubble .claim-btn img{width:16px;height:16px;object-fit:contain;}
.buy-bubble .claim-yes{flex:1.35;border:none;background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:var(--btn-text,#7a3d18);
  box-shadow:0 3px 0 var(--hud-depth), inset 0 1px 0 rgba(255,255,255,.5);}
.buy-bubble .claim-no{background:transparent;color:var(--ink-soft);border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent);}
.buy-bubble .claim-yes:active{transform:translateY(3px);box-shadow:0 0 0 var(--hud-depth), inset 0 1px 0 rgba(255,255,255,.5);}
.buy-bubble .claim-no:active{transform:scale(.96);}
/* can't afford: the close action becomes the primary "Got it" button */
.buy-bubble.cant .claim-no{border:none;background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:var(--btn-text,#7a3d18);box-shadow:0 3px 0 var(--hud-depth), inset 0 1px 0 rgba(255,255,255,.5);}
.buy-bubble.cant .claim-no:active{transform:translateY(3px);box-shadow:0 0 0 var(--hud-depth);}

/* first-run charge explainer */
#chargeIntro{position:absolute;inset:0;z-index:11;display:flex;align-items:center;justify-content:center;background:rgba(30,20,40,.4);backdrop-filter:blur(6px);padding:0 34px;}
#chargeIntro.hidden{display:none;}
.charge-intro-card{background:rgba(255,255,255,.62);backdrop-filter:blur(10px);border:1.5px solid var(--glass-edge);border-radius:26px;padding:28px 24px;max-width:300px;text-align:center;box-shadow:0 16px 40px var(--shadow);}
.charge-intro-spark{font-size:42px;color:var(--btn-b);margin-bottom:8px;animation:sparkPulse 1.6s ease-in-out infinite;}
@keyframes sparkPulse{0%,100%{transform:scale(1) rotate(-6deg);}50%{transform:scale(1.18) rotate(6deg);}}
.charge-intro-text{font-family:'Quicksand';font-weight:600;font-size:15px;color:var(--ink);line-height:1.45;}

/* combo popup */
.combo-pop{position:absolute;z-index:8;font-family:'Fraunces',serif;font-weight:700;pointer-events:none;text-align:center;animation:comboAnim 1s ease-out forwards;text-shadow:0 2px 10px rgba(255,255,255,.9);}
@keyframes comboAnim{0%{transform:translate(-50%,0) scale(.4) rotate(-8deg);opacity:0;}25%{opacity:1;transform:translate(-50%,-10px) scale(1.15) rotate(4deg);}60%{transform:translate(-50%,-18px) scale(1) rotate(-2deg);}100%{transform:translate(-50%,-54px) scale(1) rotate(0);opacity:0;}}
.pause-btn{width:44px;height:44px;border-radius:50%;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;
  transition:transform .08s ease-out;}
.pause-btn svg{width:20px;height:20px;fill:currentColor;}
.pause-btn:active{transform:scale(.9);}
.topbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.next-wrap{display:flex;flex-direction:column;align-items:center;width:60px;height:72px;padding-top:7px;border-radius:19px;}
.next-label{font-size:9px;line-height:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-soft);font-weight:800;}
.next-img{width:44px;height:44px;margin-top:3px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(90,50,70,.18));}
.next-img.hud-swap{animation:nextSwap .46s cubic-bezier(.25,1.6,.45,1);}
@keyframes nextSwap{0%{transform:scale(.25) rotate(-30deg);opacity:0;}55%{transform:scale(1.14) rotate(5deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}

/* ---------- evolution strip: a tray of the 10 tiers, unfound tiers as silhouettes ---------- */
.progress-bar{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 24px);
  top:auto!important;bottom:calc(65px + env(safe-area-inset-bottom))!important;
  display:flex;justify-content:center;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,var(--hud-card-2),color-mix(in srgb,var(--hud-card-2) 70%,transparent));border:1px solid var(--hud-edge);
  box-shadow:0 4px 12px var(--shadow), inset 0 1px 0 var(--hud-hi);}
.prog-flower{width:24px;height:24px;object-fit:contain;border-radius:50%;transition:opacity .3s, filter .3s, transform .3s cubic-bezier(.25,1.6,.45,1);}
.prog-flower.locked{opacity:.20;filter:brightness(0) saturate(0);}
#stage[data-theme="night"] .prog-flower.locked{opacity:.24;filter:brightness(0) invert(1);}
.prog-flower.unlocked{opacity:1;filter:drop-shadow(0 1px 1px rgba(90,50,70,.18));}
/* highest tier found so far gets a soft halo */
.prog-flower.unlocked:has(+ .locked){background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent) 0 55%,transparent 72%);}
.prog-flower.justmade{transform:scale(1.4);}

/* ---------- bottom action band: fixed 3-column grid so nothing shifts when counts change ---------- */
.action-band{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:64px minmax(0,186px) 64px;justify-content:center;align-items:center;gap:14px;z-index:6;padding:0 16px;}
.shake-btn{grid-column:2;grid-row:1;position:relative;border:none;border-radius:20px;padding:0;width:100%;height:54px;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));font-family:'Quicksand';
  box-shadow:0 4px 0 var(--hud-depth), 0 10px 22px var(--shadow), inset 0 1.5px 0 rgba(255,255,255,.55);
  transition:transform .08s ease-out, box-shadow .08s ease-out;}
.shake-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--hud-depth), 0 4px 10px var(--shadow), inset 0 1.5px 0 rgba(255,255,255,.55);}
/* glint sweeping across the ready button (pseudo element, so the button box stays put) */
.shake-btn::after{content:'';position:absolute;top:0;bottom:0;left:-35%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(0) skewX(-18deg);animation:shakeGlint 3.4s ease-in-out 1s infinite;}
@keyframes shakeGlint{0%,70%{transform:translateX(0) skewX(-18deg);}100%{transform:translateX(560%) skewX(-18deg);}}
/* cooling: the face empties to glass and the theme color refills LEFT -> RIGHT as it recharges */
.shake-btn.cooling{cursor:default;background:linear-gradient(180deg,var(--hud-card),var(--hud-card-2));
  box-shadow:0 2px 0 var(--hud-depth-soft), 0 6px 14px var(--shadow), inset 0 0 0 1.5px var(--hud-edge);}
.shake-btn.cooling::after{display:none;}
.shake-fill{position:absolute;top:0;left:0;bottom:0;width:0%;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--btn-a) 55%,transparent),color-mix(in srgb,var(--btn-b) 75%,transparent));
  box-shadow:inset -2px 0 0 rgba(255,255,255,.7);}
.shake-label{position:relative;z-index:1;color:var(--btn-text,#7a3d18);font-weight:800;font-size:17px;letter-spacing:.4px;
  display:flex;align-items:center;justify-content:center;gap:6px;height:100%;}
.shake-wave{width:9px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:.7;}
.shake-wave.r{transform:scaleX(-1);}
.shake-btn:not(.cooling) .shake-label{animation:shakeReady .5s cubic-bezier(.25,1.7,.45,1);}
@keyframes shakeReady{0%{transform:scale(.8);}50%{transform:scale(1.12);}100%{transform:scale(1);}}
.shake-btn.cooling .shake-label{color:var(--ink);text-shadow:0 1px 0 var(--hud-hi);}
.shake-btn.cooling .shake-wave{display:none;}
.shake-sec{display:none;position:absolute;z-index:1;top:50%;right:10px;transform:translateY(-50%);min-width:30px;height:22px;padding:0 7px;border-radius:11px;
  align-items:center;justify-content:center;font-family:'Quicksand';font-weight:800;font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;
  background:var(--hud-card);box-shadow:0 1px 3px var(--shadow);}
.shake-btn.cooling .shake-sec{display:flex;}

#board{position:absolute;top:0;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));z-index:1;}
canvas{display:block;width:100%;height:100%;}
#board.wobble{animation:jarWobble .55s ease-in-out;}
@keyframes jarWobble{0%{transform:rotate(0deg);}15%{transform:rotate(-2.5deg);}40%{transform:rotate(2.2deg);}65%{transform:rotate(-1.4deg);}85%{transform:rotate(.8deg);}100%{transform:rotate(0deg);}}

/* start hint: a pill in the empty jar (clear of the evolution strip), gone after the first drop */
.hint{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:54%;z-index:4;pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:999px;
  background:linear-gradient(180deg,var(--hud-card),var(--hud-card-2));border:1.5px solid var(--hud-edge);box-shadow:0 8px 20px var(--shadow);
  font-size:13px;color:var(--ink);font-weight:700;letter-spacing:.2px;white-space:nowrap;
  transition:opacity .4s, visibility 0s;animation:hintIn .5s cubic-bezier(.2,1.4,.45,1) .15s backwards;}
.hint[style*="opacity: 0"]{visibility:hidden;transition:opacity .4s, visibility 0s .4s;}
.hint[style*="opacity: 0"] .hint-dot{animation:none;}
@keyframes hintIn{0%{opacity:0;transform:translateY(10px) scale(.92);}100%{opacity:1;transform:none;}}
.hint-track{position:relative;width:46px;height:22px;border-radius:11px;flex:0 0 auto;background:color-mix(in srgb,var(--accent) 16%,transparent);}
.hint-dot{position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);animation:hintSlide 1.8s ease-in-out infinite;}
@keyframes hintSlide{0%,100%{transform:translateX(0);}50%{transform:translateX(24px);}}

@media (prefers-reduced-motion: reduce){
  .shake-btn::after,.hint-dot,.pu-btn.armed::after{animation:none;}
  .score-val.hud-tick,.next-img.hud-swap,.shake-btn:not(.cooling) .shake-label{animation-duration:.01s;}
}

/* =====================================================================
   Round 2 polish: watercolor HUD. Cards and lipped buttons give way to
   type floating on soft painted washes (masks from the shared kit).
   Everything below only restyles; ids, classes and states are unchanged.
   ===================================================================== */
#game{
  --hud-wash:color-mix(in srgb,var(--accent-2) 30%,transparent);
  --hud-wash-strong:color-mix(in srgb,var(--accent) 40%,transparent);
  --hud-paper:rgba(255,252,247,.78);
  --hud-ink:var(--ink);
}
#stage[data-theme="night"] #game{--hud-paper:rgba(46,38,76,.80);--hud-wash:color-mix(in srgb,var(--accent-2) 34%,transparent);}

/* top bar: no cards, just type on paint */
.topbar{gap:4px;padding-left:18px;padding-right:12px;}
.score-wrap,.next-wrap,.coin-chip,.pause-btn{background:none;border:none;box-shadow:none;}
.score-wrap{isolation:isolate;padding:4px 18px 6px 4px;min-width:0;}
.score-wrap::before{content:'';position:absolute;inset:-14px -26px -16px -22px;z-index:-1;pointer-events:none;background:var(--hud-paper);
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
.score-wrap::after{content:'';position:absolute;left:-6px;right:4px;bottom:16px;height:20px;z-index:-1;pointer-events:none;background:var(--hud-wash);opacity:.9;
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
.score-label{font-size:9.5px;letter-spacing:2.6px;font-weight:700;opacity:.8;}
.score-val{font-size:38px;font-weight:500;letter-spacing:-.8px;line-height:1;text-shadow:none;}
.best-mini{font-size:11.5px;font-weight:600;opacity:.85;margin-top:2px;}
.best-mini::before{width:10px;height:10px;opacity:.8;}
#stage[data-theme="lucas"] .score-wrap::after{content:'';top:auto;right:4px;padding:0;border-radius:0;box-shadow:none;background:var(--hud-wash);}

.coin-chip{height:30px;padding:0 4px;gap:4px;font-size:15px;font-weight:700;margin-right:4px;}
.coin-chip-ico{width:19px;height:19px;}

.next-wrap{position:relative;isolation:isolate;width:62px;height:70px;padding-top:4px;}
.next-wrap::before{content:'';position:absolute;left:2px;right:2px;top:13px;bottom:-2px;z-index:-1;pointer-events:none;background:var(--hud-wash);
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.next-label{font-size:8.5px;letter-spacing:2.2px;font-weight:700;opacity:.85;}
.next-img{width:42px;height:42px;margin-top:5px;}

.pause-btn{width:40px;height:44px;border-radius:12px;color:var(--ink-soft);}
.pause-btn svg{width:18px;height:18px;opacity:.85;}

/* bottom band: three calm controls on washes */
.action-band{grid-template-columns:66px minmax(0,190px) 66px;gap:12px;}
.pu-btn{isolation:isolate;background:none;border:none;box-shadow:none;height:58px;border-radius:50%;gap:2px;transition:transform .12s ease-out;}
.pu-btn::before{content:'';position:absolute;inset:-6px -8px;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--accent-2) 26%,var(--hud-paper));
  -webkit-mask:url(assets/wash/hud/pu-bloom.png) center/100% 100% no-repeat;mask:url(assets/wash/hud/pu-bloom.png) center/100% 100% no-repeat;}
.pu-delete::before{background:color-mix(in srgb,#ec7a90 20%,var(--hud-paper));-webkit-mask-image:url(assets/wash/hud/pu-bloom-2.png);mask-image:url(assets/wash/hud/pu-bloom-2.png);}
.pu-btn:active{transform:scale(.92);box-shadow:none;}
.pu-ico{width:30px;height:28px;border-radius:0;box-shadow:none;background:none!important;}
.pu-ico svg{width:22px;height:22px;stroke-width:2;}
.pu-shuffle .pu-ico{color:var(--accent);}
.pu-delete .pu-ico{color:#c8566c;}
#stage[data-theme="night"] .pu-delete .pu-ico{color:#f08ea2;}
.pu-cap{font-size:9px;letter-spacing:1px;font-weight:700;}
.pu-n{top:-2px;right:0;min-width:20px;height:20px;padding:0 5px;font-size:11.5px;font-weight:800;background:var(--accent);
  box-shadow:0 0 0 2px var(--hud-paper), 0 2px 6px var(--shadow);}
#stage[data-theme="night"] .pu-n{color:#2b2740;}
.pu-btn.armed{background:none;}
#stage[data-theme="night"] .pu-btn.armed{background:none;}
.pu-btn.armed::before{background:rgba(236,122,144,.34);}
.pu-btn.armed::after{inset:-2px;border-radius:50%;border-width:2px;}

/* Shake!: a brush stroke of theme color, masked so fill and glint follow the paint */
.shake-btn{height:56px;border-radius:0;background:linear-gradient(180deg,color-mix(in srgb,var(--btn-a) 92%,#fff),var(--btn-b));box-shadow:none;
  -webkit-mask:url(assets/wash/hud/shake-stroke.png) center/100% 100% no-repeat;mask:url(assets/wash/hud/shake-stroke.png) center/100% 100% no-repeat;transition:transform .1s ease-out, filter .1s;}
.shake-btn:active{transform:scale(.95);box-shadow:none;filter:brightness(.96);}
.shake-btn.cooling{background:color-mix(in srgb,var(--btn-a) 18%,var(--hud-paper));box-shadow:none;}
.shake-btn.cooling .shake-label{opacity:.75;}
.shake-fill{box-shadow:none;}
.shake-label{font-size:18px;font-weight:700;letter-spacing:.6px;}
.shake-sec{right:22px;height:20px;background:var(--hud-paper);box-shadow:none;font-weight:700;}

/* evolution strip: a delicate row on a faint stroke */
.progress-bar{background:none;border:none;box-shadow:none;isolation:isolate;gap:3px;padding:2px 14px;}
.progress-bar::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;pointer-events:none;background:var(--hud-paper);opacity:.8;
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
.prog-flower{width:22px;height:22px;}
.prog-flower.locked{opacity:.14;}

/* start hint on paper wash */
.hint{background:none;border:none;box-shadow:none;isolation:isolate;font-weight:600;}
.hint::before{content:'';position:absolute;inset:-10px -18px;z-index:-1;pointer-events:none;background:var(--hud-paper);
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}

/* buy bubble and delete toast: paper, no plastic */
.buy-bubble{border:none;border-radius:26px;background:var(--bubble-bg);box-shadow:0 20px 50px rgba(60,30,50,.20);}
.buy-bubble .claim-arrow{border:none;}
.buy-ico{background:none!important;box-shadow:none;position:relative;isolation:isolate;}
.buy-ico::before{content:'';position:absolute;inset:-4px;z-index:-1;background:var(--hud-wash);
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.buy-ico.k-shuffle{color:var(--accent);}
.buy-ico.k-delete{color:#c8566c;}
.buy-text{background:none;padding:6px 2px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:0;}
.buy-bubble .claim-btn{border-radius:999px;}
.buy-bubble .claim-yes,.buy-bubble.cant .claim-no{box-shadow:0 6px 14px color-mix(in srgb,var(--btn-b) 35%,transparent);}
.buy-bubble .claim-yes:active,.buy-bubble.cant .claim-no:active{transform:scale(.96);box-shadow:none;}
.buy-bubble .claim-no{border:none;background:color-mix(in srgb,var(--ink) 6%,transparent);}
.delete-armed{background:linear-gradient(135deg,#e47a8d,#cc5a70);box-shadow:0 10px 24px rgba(180,60,90,.26);font-weight:600;}
.delete-armed #deleteCancel{box-shadow:none;font-weight:700;}

/* Lucas Mode: a quiet tag under Best instead of a pill over the score; coins live in the coin chip only */
#game .lucas-hud{top:calc(84px + env(safe-area-inset-top));left:20px;right:auto;margin:0;height:22px;padding:0;gap:6px;background:none;border:none;box-shadow:none;}
#game .lucas-hud .lh-coins{display:none;}
#game .lucas-hud .lh-logo{height:16px;}
#game .lucas-hud .lh-name{font-size:9.5px;letter-spacing:1.6px;}
#game .lucas-hud .lh-x{font-size:11px;padding:0 6px;border-radius:7px;}
/* watercolor flare tucked behind the buy bubble's top corner */
.buy-bubble{isolation:isolate;}
.buy-bubble::before{content:'';position:absolute;top:-18px;left:-20px;width:150px;height:110px;z-index:-1;pointer-events:none;background:var(--hud-wash);
  -webkit-mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;}
.buy-bubble::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--bubble-bg);z-index:-1;opacity:.72;pointer-events:none;}

/* ---------- Round 4: bubbles on painted paper, one quiet cancel, delta clear of the label ---------- */
/* score delta sits beside the number (never touches the SCORE label above) */
.score-line{position:relative;}
.score-gain{top:auto;right:auto;left:100%;bottom:5px;margin-left:5px;font-size:13px;}
/* buy / can't afford / delete buy: a soft paper wash anchored to its button */
.buy-bubble{background:var(--paper);border-radius:46px;box-shadow:0 0 30px 12px var(--paper);border:none;filter:drop-shadow(0 8px 18px rgba(70,35,55,.07));padding:16px 18px 12px;}
.buy-bubble::after{inset:-12% -8% -14%;border-radius:0;opacity:1;background:var(--paper);
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-4.png) center/100% 100% no-repeat,url(assets/wash/bloom-2.png) center/100% 100% no-repeat;
          mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-4.png) center/100% 100% no-repeat,url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.buy-bubble::before{opacity:.55;}
.buy-bubble .claim-arrow{bottom:-26px;left:calc(var(--tail,40px) - 17px);width:34px;height:30px;transform:none;border:none;border-radius:0;background:var(--paper);opacity:1;
  -webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.buy-close{background:none;top:8px;right:6px;opacity:.7;}
.buy-text{border:none;padding:4px 2px 2px;margin-bottom:10px;}
.buy-meter{height:6px;margin:0 2px 12px;background:color-mix(in srgb,var(--ink) 8%,transparent);}
.buy-bubble .claim-actions{align-items:center;gap:6px;}
/* quiet text "Not now" */
.buy-bubble .claim-no{flex:0 0 auto;height:44px;padding:0 14px;background:none;border:none;box-shadow:none;color:var(--ink-soft);font-weight:600;font-size:14.5px;}
.buy-bubble .claim-no:active{transform:scale(.96);opacity:.7;}
/* brush-stroke primary (Buy, or Got it when the jar can't be afforded) */
.buy-bubble .claim-yes,.buy-bubble.cant .claim-no{position:relative;isolation:isolate;flex:1;height:46px;background:none;border:none;box-shadow:none;
  color:var(--paint-ink);font-weight:700;font-size:15px;letter-spacing:.2px;}
.buy-bubble .claim-yes::before,.buy-bubble.cant .claim-no::before{content:'';position:absolute;inset:-5px -10px;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,var(--paint-a),var(--paint-b));
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-3.png) center/100% 100% no-repeat;
          mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-3.png) center/100% 100% no-repeat;
  transition:transform .16s ease-out;}
.buy-bubble .claim-yes:active,.buy-bubble.cant .claim-no:active{transform:scale(.97);box-shadow:none;opacity:1;}
.buy-bubble .claim-yes:active::before,.buy-bubble.cant .claim-no:active::before{transform:scale(1.03,.94);}
.buy-bubble.cant .claim-no{margin:0 10px;}
/* delete armed: a painted hint with the one Cancel; the trash button just glows */
.delete-armed{background:var(--paper);box-shadow:0 0 16px 8px var(--paper);isolation:isolate;color:var(--ink);font-weight:600;gap:6px;padding:6px 6px 6px 12px;bottom:calc(70px + env(safe-area-inset-bottom));}
.delete-armed::before{content:'';position:absolute;inset:-10px -16px;z-index:-1;pointer-events:none;background:var(--paper);opacity:.96;
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;
  filter:drop-shadow(0 6px 12px rgba(70,35,55,.10));}
.da-ico{background:none;width:22px;height:22px;}
.da-ico svg{stroke:#c8566c;}
#stage[data-theme="night"] .da-ico svg{stroke:#f08ea2;}
.delete-armed #deleteCancel{position:relative;isolation:isolate;background:none;box-shadow:none;color:#b8475f;font-weight:700;font-size:13.5px;padding:7px 14px;}
.delete-armed #deleteCancel::before{content:'';position:absolute;inset:1px -2px;z-index:-1;pointer-events:none;background:rgba(236,122,144,.26);
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
#stage[data-theme="night"] .delete-armed #deleteCancel{color:#f6a9b9;}
.delete-armed #deleteCancel:active{transform:scale(.95);}
.pu-btn.armed .pu-cap::after{content:none;}
.pu-btn.armed .pu-name{display:inline;}
.pu-btn.armed::before{background:rgba(236,122,144,.42);}
.pu-btn.armed::after{inset:-10px;border:none;border-radius:50%;transform:none;
  z-index:-1;background:radial-gradient(closest-side,rgba(244,150,170,.42),rgba(244,150,170,0));animation:armedGlow 1.8s ease-in-out infinite;}
@keyframes armedGlow{0%,100%{opacity:.45;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){ .pu-btn.armed::after{animation:none;opacity:.8;} }
/* Game over, pause, theme picker, first-run season picker. */
/* overlay screens: a scrim that dims and blurs the live jar underneath */
#over::before,#pause::before,#firstRun::before{content:"";position:absolute;inset:0;
  background:var(--scrim);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);}
.screen.scr-in::before{animation:fadeIn .24s ease-out both;}
.screen.scr-out::before{visibility:visible;animation:fadeOut .14s ease-in both;}

/* ---------- GAME OVER ---------- */
#over{z-index:8;align-items:center;justify-content:center;text-align:center;padding:0 22px;}
.over-card{max-width:330px;padding:22px 22px 14px;}
#over.scr-in > .over-card{animation:overIn .4s var(--ease-spring) both;}
@keyframes overIn{0%{opacity:0;transform:translateY(60px) scale(.9);}60%{opacity:1;}100%{opacity:1;transform:none;}}
.over-art{position:relative;width:104px;height:104px;margin:-92px auto 6px;pointer-events:none;}
.over-art .art-halo{width:160px;height:160px;margin:-80px 0 0 -80px;}
.over-rays{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;opacity:.55;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--accent-2) 40%,transparent) 0deg 10deg,transparent 10deg 24deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);
  animation:heroSpin 24s linear infinite;}
.over-bloom{position:relative;width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(80,40,60,.3));
  animation:bloomPop .5s var(--ease-spring) .08s both;}
@keyframes bloomPop{0%{opacity:0;transform:scale(.3) rotate(-20deg);}100%{opacity:1;transform:none;}}
.over-title{font-family:'Fraunces',serif;font-weight:600;font-size:32px;line-height:1.1;color:var(--accent);letter-spacing:-.3px;}
#stage[data-theme="night"] .over-title{color:#e2cdfb;}
.over-sub{font-size:var(--fs-small);color:var(--label);font-weight:700;margin:2px 0 10px;}
.over-score{position:relative;font-family:'Fraunces',serif;font-size:66px;font-weight:600;line-height:1;color:var(--accent-2);
  font-variant-numeric:tabular-nums;text-shadow:0 3px 0 color-mix(in srgb,var(--accent) 18%,transparent);}
#stage[data-theme="night"] .over-score{color:#f2e2ff;text-shadow:0 0 24px rgba(200,170,255,.45);}
.over-card.is-best .over-score{background:linear-gradient(180deg,#ffd76a,#f0a12a 60%,#e2852a);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 3px 0 rgba(190,110,20,.25));}
.over-score-label{font-size:var(--fs-micro);letter-spacing:2.5px;text-transform:uppercase;color:var(--label);font-weight:800;margin-top:6px;}
.new-best{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 18px;border-radius:999px;
  background:linear-gradient(180deg,#ffe08a,#f5a93a);color:#6e3d05;font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  box-shadow:0 3px 0 #c97a14,0 8px 18px rgba(240,160,40,.4);animation:nbStamp .42s var(--ease-spring) .5s both;}
.nb-star{font-size:12px;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.9);}
@keyframes nbStamp{0%{opacity:0;transform:scale(2.2) rotate(-8deg);}100%{opacity:1;transform:scale(1) rotate(-2deg);}}
.over-best{margin:10px 0 0;font-size:14px;font-weight:700;color:var(--label);}
.over-coins{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 4px;}
.oc-earn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px 0 8px;border-radius:999px;
  background:linear-gradient(180deg,#fff7dc,#ffe9ad);box-shadow:inset 0 0 0 1.5px #f3d27c,0 3px 0 #e6b64e;}
.oc-earn img{width:26px;height:26px;object-fit:contain;animation:coinSpin .9s var(--ease-out) .12s both;}
@keyframes coinSpin{0%{transform:scale(.2) rotateY(0);}60%{transform:scale(1.15) rotateY(360deg);}100%{transform:scale(1) rotateY(360deg);}}
.oc-earn b{font-size:19px;font-weight:800;color:#a8650d;font-variant-numeric:tabular-nums;}
.oc-total{font-size:var(--fs-small);font-weight:700;color:var(--label);}
.over-actions{display:flex;flex-direction:column;gap:14px;margin-top:16px;}
#keepPlayingBtn{justify-content:space-between;padding:0 10px 0 22px;}
.kp-lbl{font-size:17px;}
.kp-price{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px 0 6px;border-radius:999px;
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1.5px rgba(200,130,30,.35);font-weight:800;font-size:16px;color:#7a4306;}
.kp-price img{width:22px;height:22px;object-fit:contain;}
.over-actions .btn-text{min-height:40px;margin-top:-4px;}
/* confetti burst from the score on a new best */
.over-confetti{position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none;z-index:2;}
.oc-pc{position:absolute;left:0;top:0;display:block;border-radius:2px;opacity:.95;
  transform:translate(var(--x),calc(var(--y) + 30px)) rotate(calc(var(--r) * .6));
  animation:ocBurst 3.6s cubic-bezier(.2,.6,.4,1) infinite backwards;}
.oc-pc.oc-round{border-radius:50%;}
/* one visible burst per cycle (0-55%); pieces are removed before a second cycle */
@keyframes ocBurst{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0);}
  4%{opacity:1;}
  18%{opacity:1;transform:translate(var(--x),var(--y)) scale(1) rotate(calc(var(--r) * .5));}
  55%{opacity:0;transform:translate(calc(var(--x) * 1.15),calc(var(--y) + 240px)) scale(.9) rotate(var(--r));}
  100%{opacity:0;transform:translate(calc(var(--x) * 1.15),calc(var(--y) + 240px)) scale(.9) rotate(var(--r));}
}

/* ---------- PAUSE ---------- */
#pause{z-index:9;align-items:center;justify-content:center;text-align:center;padding:0 22px;}
.pause-panel{max-width:300px;padding-top:24px;}
.pause-panel h2{margin-bottom:6px;}
.pause-score{display:inline-flex;align-items:baseline;gap:8px;margin-bottom:20px;padding:6px 16px;border-radius:999px;background:var(--tile);}
.pause-score span{font-size:var(--fs-micro);letter-spacing:2px;text-transform:uppercase;color:var(--label);font-weight:800;}
.pause-score b{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums;}
#stage[data-theme="night"] .pause-score b{color:#ead9ff;}
#pause.scr-in > .panel,#firstRun.scr-in > .panel{animation:popIn .36s var(--ease-spring) both;}
@keyframes popIn{0%{opacity:0;transform:scale(.86);}100%{opacity:1;transform:none;}}
.panel .card-art + h2{margin-top:0;}

/* ---------- THEME PICKER (settings) ---------- */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.theme-chip{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:8px;height:52px;padding:0 10px 0 6px;border-radius:16px;
  border:none;background:var(--ghost-bg);color:var(--card-ink);font-family:'Quicksand';font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--ghost-edge),0 3px 0 var(--ghost-lip);transition:transform .12s var(--ease-out),box-shadow .12s;}
.theme-chip:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--ghost-edge),0 1px 0 var(--ghost-lip);}
.theme-chip.sel{background:color-mix(in srgb,var(--btn-a) 26%,var(--ghost-bg));box-shadow:inset 0 0 0 2.5px var(--btn-b),0 3px 0 var(--btn-lip);}
.theme-chip.sel::after{content:"";position:absolute;right:9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
  background:var(--btn-b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;}
.sw{width:40px;height:40px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(80,40,60,.2));}

/* ---------- FIRST-RUN SEASON PICKER ---------- */
#firstRun{z-index:12;align-items:center;justify-content:center;padding:0 20px;text-align:center;}
#firstRun::before{background:color-mix(in srgb,var(--bg-bot) 40%,rgba(50,25,45,.38));}
.fr-panel{max-width:350px;padding:26px 18px 12px;}
#firstRun h2{margin-bottom:6px;}
.fr-sub{font-size:14px;line-height:1.4;color:var(--card-ink);opacity:.82;font-weight:600;margin:0 8px 18px;}
.fr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fr-card{position:relative;border-radius:22px;overflow:hidden;cursor:pointer;aspect-ratio:1/1.05;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 4px 0 var(--fr-lip),0 10px 18px rgba(80,40,60,.18);
  transition:transform .12s var(--ease-out),box-shadow .12s;}
.fr-card:active{transform:translateY(3px) scale(.98);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 1px 0 var(--fr-lip),0 4px 8px rgba(80,40,60,.18);}
.fr-art{position:absolute;left:0;right:0;top:6px;bottom:34px;}
.fr-art img{position:absolute;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(60,30,40,.28));}
.fr-a{width:64%;left:18%;top:14%;}
.fr-b{width:44%;left:2%;top:2%;transform:rotate(-14deg);}
.fr-c{width:42%;right:2%;top:4%;transform:rotate(14deg);}
.fr-name{position:relative;font-family:'Fraunces',serif;font-size:19px;font-weight:600;line-height:1;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.88);color:var(--fr-ink);box-shadow:0 2px 6px rgba(60,30,40,.15);}
.fr-spring{--fr-lip:#d58fb0;--fr-ink:#b0507c;background:radial-gradient(circle at 50% 38%,#fff 0%,#fde3ee 45%,#f2b5cf 100%);}
.fr-summer{--fr-lip:#e0a040;--fr-ink:#b06a10;background:radial-gradient(circle at 50% 38%,#fffbea 0%,#fbe8b0 45%,#a8d9a8 100%);}
.fr-fall{--fr-lip:#b86a3a;--fr-ink:#9a4a20;background:radial-gradient(circle at 50% 38%,#fff6ea 0%,#f6d2ac 45%,#d98a52 100%);}
.fr-night{--fr-lip:#3a2f60;--fr-ink:#5d4a92;background:radial-gradient(circle at 50% 38%,#6a5a9e 0%,#3e3566 50%,#231e3e 100%);}
#firstRun.scr-in .fr-card{animation:frIn .3s var(--ease-spring) both;}
#firstRun.scr-in .fr-card:nth-child(2){animation-delay:.03s;}
#firstRun.scr-in .fr-card:nth-child(3){animation-delay:.06s;}
#firstRun.scr-in .fr-card:nth-child(4){animation-delay:.09s;}
@keyframes frIn{0%{opacity:0;transform:translateY(16px) scale(.9);}100%{opacity:1;transform:none;}}
#firstRunBack{margin-top:8px;width:100%;}
@media (prefers-reduced-motion: reduce){ .over-rays{animation:none;} }

/* ---------- Round 2: game over on a painted wash, quiet pills ---------- */
.over-card{z-index:3;}
.over-title{font-weight:500;}
.over-score{font-weight:500;text-shadow:none;}
.new-best{position:relative;isolation:isolate;background:none;box-shadow:none;color:#7a4306;font-weight:700;padding:7px 22px;}
.new-best::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;background:linear-gradient(100deg,#ffe596,#f6b748);
  -webkit-mask:url(assets/wash/stroke-3.png) center/100% 100% no-repeat,url(assets/wash/stroke-3.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-3.png) center/100% 100% no-repeat,url(assets/wash/stroke-3.png) center/100% 100% no-repeat;}
.oc-earn{background:none;box-shadow:none;height:34px;padding:0 4px;}
.over-actions{gap:10px;margin-top:18px;}
.over-actions .btn-text{min-height:38px;margin-top:0;}
#keepPlayingBtn{justify-content:center;gap:12px;padding:0 22px;min-height:48px;}
.kp-price{background:none;box-shadow:none;height:auto;padding:0;font-weight:700;}
/* confetti falls behind the sheet so it never covers the coin total */
.over-confetti{z-index:1;}
.pause-score{background:none;padding:2px 8px;}
.pause-panel .over-actions{gap:6px;}
/* theme chips: flower on a soft bloom when picked, no box */
.theme-grid{gap:4px 10px;}
.theme-chip{isolation:isolate;background:none;box-shadow:none;border-radius:0;height:50px;font-weight:600;color:var(--label);}
.theme-chip:active{transform:scale(.96);box-shadow:none;}
.theme-chip.sel{background:none;box-shadow:none;color:var(--card-ink);}
.theme-chip.sel::after{content:'';position:absolute;inset:0 -6px;width:auto;height:auto;margin:0;border-radius:0;z-index:-1;
  background:var(--wash-accent);opacity:.9;-webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
/* first-run season picker: each season a painted bloom, not a box */
.fr-card{isolation:isolate;background:none!important;box-shadow:none;border-radius:0;overflow:visible;}
.fr-card:active{transform:scale(.97);box-shadow:none;}
.fr-card::before{content:'';position:absolute;inset:-4px;z-index:-1;background:var(--fr-bg);
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.fr-card:nth-child(even)::before{-webkit-mask-image:url(assets/wash/bloom-2.png);mask-image:url(assets/wash/bloom-2.png);}
.fr-spring{--fr-bg:radial-gradient(circle at 50% 40%,#fff4f8 0%,#fbd3e4 50%,#ef9fc2 100%);}
.fr-summer{--fr-bg:radial-gradient(circle at 50% 40%,#fffbea 0%,#fbe6a6 50%,#9fd49f 100%);}
.fr-fall{--fr-bg:radial-gradient(circle at 50% 40%,#fff6ea 0%,#f6cfa4 50%,#d6834a 100%);}
.fr-night{--fr-bg:radial-gradient(circle at 50% 40%,#7363aa 0%,#40376b 55%,#262043 100%);}
.fr-name{background:none;box-shadow:none;padding:4px 8px;font-weight:500;}
.fr-night .fr-name{color:#f1e8ff;}
#stage[data-theme="night"] .theme-chip.sel::after{background:rgba(176,150,245,.6);}
#stage[data-theme="night"] .theme-chip.sel{color:#fff;}

/* ---------- Round 4: one primary action, theme-tinted dim, legible labels ---------- */
/* game over: Plant Again is the one primary; Keep Playing is a quiet gold-accent text control with its price */
#over .over-actions #againBtn{order:1;}
#over .over-actions #keepPlayingBtn{order:2;}
#over .over-actions #homeBtn{order:3;}
#keepPlayingBtn.btn-gold{min-height:40px;padding:0 14px;gap:8px;font-size:15px;font-weight:600;color:#9a5a0c;}
#keepPlayingBtn.btn-gold::before{display:none;}
#keepPlayingBtn .kp-lbl{font-size:15px;text-decoration:underline;text-decoration-color:rgba(214,150,40,.55);text-decoration-thickness:1.5px;text-underline-offset:4px;}
#keepPlayingBtn .kp-price{font-size:15px;font-weight:700;color:#a8650d;gap:4px;}
#keepPlayingBtn .kp-price img{width:18px;height:18px;}
#keepPlayingBtn.btn-gold:active{transform:scale(.95);opacity:.75;}
#stage[data-theme="night"] #keepPlayingBtn.btn-gold,#stage[data-theme="night"] #keepPlayingBtn .kp-price{color:#ffd98a;}
/* the dim over the jar leans toward the season's own color instead of grey-mauve */
#stage:not([data-theme="night"]) #over::before{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,rgba(255,250,245,.30)) 0%,color-mix(in srgb,var(--bg-bot) 46%,color-mix(in srgb,var(--accent) 20%,transparent)) 100%);
  -webkit-backdrop-filter:blur(6px) saturate(1.3);backdrop-filter:blur(6px) saturate(1.3);}
/* first-run picker: the Night label sits on the pale scrim below its wash, so it takes the night ink */
.fr-night .fr-name{color:#4b3c88;}
/* screen changes: the incoming screen waits for the outgoing one to clear (no double exposure).
   Same specificity as the per-screen entrance rules above, so only the delay is added. */
#stage .screen.scr-in > *{animation-delay:.12s;}
.over-best[hidden]{display:none;}
/* Merge callouts, jar-full warning, confetti and gold toss. */
/* ---------- merge callouts (juice) ----------
   One element per merge event (fx.js mergeCallout). It is a zero-size anchor at the clamped
   point above the flower; .co-inner sits centred on top of it. #board scoping outranks the
   older .combo-pop and .newflower-badge rules, which only remain as harness hooks. */
.pop{position:absolute;z-index:6;font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--line-hot);pointer-events:none;animation:popup .8s ease-out forwards;text-shadow:0 2px 6px rgba(255,255,255,.8);}
@keyframes popup{0%{transform:translateY(0) scale(.6);opacity:0;}20%{opacity:1;transform:translateY(-6px) scale(1);}100%{transform:translateY(-46px) scale(1);opacity:0;}}
#board .callout{position:absolute;width:0;height:0;z-index:8;pointer-events:none;animation:none;transform:none;text-shadow:none;-webkit-text-stroke:0;color:inherit;font-size:16px;opacity:1;}
#board .co-inner{position:absolute;left:0;bottom:0;translate:-50% 0;transform-origin:50% 100%;animation:coIn .38s cubic-bezier(.2,1.5,.4,1) both;}
#board .co-out .co-inner{animation:coOut .24s ease-in forwards;}
@keyframes coIn{0%{transform:scale(.35);opacity:0;}45%{opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes coOut{0%{transform:translateY(0) scale(1);opacity:1;}100%{transform:translateY(-16px) scale(.9);opacity:0;}}
#board .co-stack{display:flex;flex-direction:column;align-items:center;gap:0;transform-origin:50% 100%;white-space:nowrap;transition:scale .26s cubic-bezier(.2,1.5,.4,1);
  --co-ink:color-mix(in srgb,var(--line-hot) 70%,var(--ink));--co-halo:var(--paper,#fffaf5);}
#stage[data-theme="night"] #board .co-stack{--co-ink:#fff4fb;}
/* every callout word sits on a small painted wash (shared kit masks), never a pill */
#board .co-val,#board .co-title,#board .co-tag{position:relative;isolation:isolate;line-height:1;margin:-3px 0;}
#board .co-val::before,#board .co-title::before,#board .co-tag::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  background:var(--co-wash,var(--wash-soft));-webkit-mask:var(--co-mask) center/100% 100% no-repeat;mask:var(--co-mask) center/100% 100% no-repeat;}
#board .co-val{font-family:'Fraunces',serif;font-weight:700;font-size:23px;letter-spacing:.2px;color:var(--co-ink);padding:6px 14px 7px;
  text-shadow:0 0 6px var(--co-halo),0 0 2px var(--co-halo);font-variant-numeric:lining-nums;}
#board .co-val::before{inset:-6px -10px;--co-mask:url(assets/wash/bloom-1.png);opacity:.9;}
#board .co-title{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:20px;color:var(--co-ink);padding:7px 22px 8px;
  text-shadow:0 0 6px var(--co-halo),0 0 2px var(--co-halo);}
#board .co-title::before{inset:-2px -8px;--co-mask:url(assets/wash/stroke-1.png);--co-wash:var(--wash-accent);}
#board .co-chain .co-val{font-size:25px;}
#board .co-lvl-3 .co-title{font-size:23px;}
#board .co-lvl-3 .co-title::before{--co-mask:url(assets/wash/stroke-2.png);--co-wash:color-mix(in srgb,var(--line-hot) 52%,transparent);}
#board .co-lvl-3 .co-val{font-size:27px;}
/* big chains warm up: gold wash and a little more size, no extra chrome */
#board .co-lvl-4 .co-title,#board .co-lvl-5 .co-title{color:#7a4a0e;}
#board .co-lvl-4 .co-title::before,#board .co-lvl-5 .co-title::before{--co-mask:url(assets/wash/stroke-2.png);--co-wash:rgba(240,176,70,.62);inset:-5px -12px;}
#board .co-lvl-4 .co-title{font-size:26px;}
#board .co-lvl-5 .co-title{font-size:29px;}
#board .co-lvl-4 .co-val,#board .co-lvl-5 .co-val{font-size:29px;color:#9a5a14;}
#board .co-lvl-4 .co-val::before,#board .co-lvl-5 .co-val::before{--co-wash:rgba(246,200,110,.55);}
/* round 4: fx.js scales the whole stack per chain level; each step also warms the wash */
#board .co-lvl-2 .co-title::before{--co-wash:color-mix(in srgb,var(--line-hot) 34%,var(--wash-accent));}
#board .co-lvl-5 .co-title::before{--co-wash:rgba(242,164,52,.78);}
#board .co-lvl-5 .co-val::before{--co-wash:rgba(248,196,96,.7);}
#board .co-lvl-4 .co-title,#board .co-lvl-5 .co-title{text-shadow:0 0 8px rgba(255,236,196,.95),0 0 2px rgba(255,248,232,.95);}
#board .co-tag{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:21px;letter-spacing:.3px;color:#7a4a0e;padding:9px 22px 10px;
  text-shadow:0 0 6px rgba(255,248,232,.95),0 0 2px rgba(255,248,232,.95);}
#board .co-tag::before{inset:-4px -8px;--co-mask:url(assets/wash/bloom-2.png);--co-wash:rgba(242,178,64,.78);animation:coBloom .7s ease-out both;}
@keyframes coBloom{0%{transform:scale(.4);opacity:0;}60%{opacity:1;}100%{transform:scale(1);opacity:1;}}
#stage[data-theme="night"] #board .co-lvl-4 .co-title,#stage[data-theme="night"] #board .co-lvl-5 .co-title,
#stage[data-theme="night"] #board .co-tag{color:#5a3608;}
#stage[data-theme="night"] #board .co-lvl-4 .co-val,#stage[data-theme="night"] #board .co-lvl-5 .co-val{color:#ffd98a;}
/* Lucas ad card rules live in 09-ads.css (adslucas). */

/* ---------- jar almost full warning (juice) ----------
   A compact red pill in the held-flower zone (drops are blocked while it shows), so it
   never sits over the busy flowers. fx.js sets .warn-card top to the drop line. The ring
   drains over 4 s to match WARN_MS in config.js; the number ticks once per second. */
.warn-overlay{position:absolute;left:0;right:0;top:0;bottom:calc(96px + env(safe-area-inset-bottom));z-index:9;pointer-events:none;}
.warn-overlay.hidden{display:none;}
/* round 2: no red pill. The card is a soft paper bloom with a rose wash bleeding through,
   deep rose ink, and a thin brushed ring that drains over 4 s. */
.warn-card{position:absolute;left:50%;top:150px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;
  padding:14px 30px 14px 22px;white-space:nowrap;color:#9c2f45;isolation:isolate;
  background:radial-gradient(closest-side,rgba(255,250,245,.97) 62%,rgba(255,250,245,0) 100%) center/100% 100% no-repeat;
  animation:warnIn .42s cubic-bezier(.2,1.4,.4,1) both;}
.warn-card::before,.warn-card::after{content:'';position:absolute;z-index:-1;pointer-events:none;}
.warn-card::before{inset:-20px -34px;background:rgba(255,250,245,.99);
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
.warn-card::after{inset:-4px -6px;background:rgba(226,82,104,.34);
  -webkit-mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;
  animation:warnBreath 1s ease-out .42s infinite;}
@keyframes warnIn{0%{transform:translate(-50%,-50%) scale(.6);opacity:0;}100%{transform:translate(-50%,-50%) scale(1);opacity:1;}}
@keyframes warnBreath{0%{opacity:1;transform:scale(1.04);}70%,100%{opacity:.55;transform:scale(1);}}
.warn-ring{position:relative;width:46px;height:46px;flex:0 0 auto;}
.warn-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.warn-track{fill:rgba(255,255,255,.55);stroke:rgba(214,74,98,.18);stroke-width:3;}
.warn-prog{fill:none;stroke:#d84a64;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:0;animation:warnRing 4s linear forwards;}
@keyframes warnRing{to{stroke-dashoffset:125.66;}}
.warn-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:24px;line-height:1;color:#b8324d;animation:warnTick 1s cubic-bezier(.2,1.6,.4,1) infinite;}
@keyframes warnTick{0%{transform:scale(1.4);}40%,100%{transform:scale(1);}}
.warn-text{display:flex;flex-direction:column;gap:3px;text-align:left;}
.warn-title{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:21px;line-height:1.05;letter-spacing:.1px;color:#9c2f45;text-shadow:0 0 6px rgba(255,250,245,.9);}
.warn-sub{font-family:'Quicksand',sans-serif;font-weight:700;font-size:12.5px;line-height:1.2;color:#7e4a56;text-shadow:0 0 5px rgba(255,250,245,.95);}
#stage[data-theme="night"] .warn-card::before{background:rgba(44,37,71,.94);}
#stage[data-theme="night"] .warn-card{background-image:radial-gradient(closest-side,rgba(44,37,71,.9) 58%,rgba(44,37,71,0) 100%);}
#stage[data-theme="night"] .warn-card::after{background:rgba(232,102,140,.4);}
#stage[data-theme="night"] .warn-title,#stage[data-theme="night"] .warn-count{color:#ffd0dc;}
#stage[data-theme="night"] .warn-sub{color:#e6c8d6;}
#stage[data-theme="night"] .warn-title,#stage[data-theme="night"] .warn-sub{text-shadow:0 0 6px rgba(30,24,52,.9);}
#stage[data-theme="night"] .warn-track{fill:rgba(255,255,255,.08);stroke:rgba(255,190,210,.25);}
#stage[data-theme="night"] .warn-prog{stroke:#ff9db4;}

/* ---------- celebration confetti + gold toss ---------- */
.fx-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:12;}
.fx-pc{position:absolute;top:-14px;width:9px;height:13px;border-radius:2px;will-change:transform;animation:fxFall linear forwards;}
@keyframes fxFall{0%{transform:translateY(-14px) rotate(0);opacity:1;}100%{transform:translateY(105vh) rotate(var(--rot,540deg));opacity:.9;}}
.fx-gold{position:absolute;width:16px;height:16px;object-fit:contain;will-change:transform;animation:fxGold cubic-bezier(.2,.7,.5,1) forwards;}
@keyframes fxGold{0%{transform:translate(0,0) scale(.6);opacity:1;}30%{transform:translate(var(--gx,0),var(--gy,-70px)) scale(1.1);opacity:1;}100%{transform:translate(calc(var(--gx,0)*1.4),120px) scale(.9);opacity:0;}}
/* Lucas chip, ad burst, ads confirm overlay, New! badge, stats, add-to-home-screen steps. */
/* Lucas Mode settings chip */
.lucas-chip{width:100%;min-height:50px;margin-top:10px;padding:12px;border-radius:16px;border:none;cursor:pointer;font-family:'Quicksand';font-weight:800;font-size:15px;letter-spacing:.3px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);background:linear-gradient(120deg,#cd4236,#00a3ff);box-shadow:0 4px 0 #2b5f9e,0 10px 18px rgba(205,66,54,.28);transition:transform .12s,box-shadow .12s;display:flex;align-items:center;justify-content:center;gap:8px;}
.lucas-chip:active{transform:translateY(3px);box-shadow:0 1px 0 #2b5f9e,0 4px 8px rgba(205,66,54,.25);}
.lucas-chip.sel{outline:2px solid #fff;outline-offset:-4px;}
.lucas-chip.hidden{display:none;}

.ad-burst-pc{position:absolute;border-radius:2px;will-change:transform;animation:adBurst ease-in forwards;}
@keyframes adBurst{0%{transform:translateY(0) rotate(0);opacity:1;}100%{transform:translate(var(--dx,0),140px) rotate(var(--rot,540deg));opacity:0;}}

/* ---------- shared modal frame (charge intro, Lucas, A2HS, ads confirm) ---------- */
.ads-confirm-overlay{position:absolute;inset:0;z-index:13;display:flex;align-items:center;justify-content:center;padding:0 28px;}
.ads-confirm-overlay.hidden{display:none;}
.ads-confirm-overlay,.modal-overlay{background:var(--scrim);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);
  animation:fadeIn .22s ease-out both;}
.modal-overlay{position:absolute;inset:0;z-index:11;display:flex;align-items:center;justify-content:center;padding:0 28px;}
.modal-overlay.hidden{display:none;}
#chargeIntro.modal-overlay{background:var(--scrim);padding:0 28px;}
.ads-confirm-overlay .charge-intro-card,.modal-overlay .charge-intro-card{
  position:relative;width:100%;max-width:320px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:28px;
  padding:26px 20px 20px;color:var(--card-ink);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 20px 46px var(--shadow),0 4px 12px var(--shadow);
  animation:modalPop .38s var(--ease-spring) both;}
#stage[data-theme="night"] .ads-confirm-overlay .charge-intro-card,#stage[data-theme="night"] .modal-overlay .charge-intro-card{box-shadow:0 20px 46px rgba(5,2,15,.6);}
@keyframes modalPop{0%{opacity:0;transform:translateY(24px) scale(.88);}100%{opacity:1;transform:none;}}
.charge-intro-card .charge-intro-text{color:var(--card-ink);font-size:15px;line-height:1.45;}
.charge-intro-card > div:not(.hidden):not(.card-art){animation:fadeIn .2s ease-out both;}
.charge-intro-card .card-art{margin-top:-76px;}
.modal-title{font-family:'Fraunces',serif;font-weight:600;font-size:24px;line-height:1.15;color:var(--accent);margin-bottom:10px;}
#stage[data-theme="night"] .modal-title{color:#e2cdfb;}
.modal-badge{width:64px;height:64px;margin:-58px auto 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));box-shadow:0 4px 0 var(--btn-lip),0 10px 20px var(--btn-glow),inset 0 0 0 3px rgba(255,255,255,.55);}
.modal-badge .charge-intro-spark{margin:0;font-size:34px;line-height:1;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.12);}
.ci-row{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;margin-bottom:8px;border-radius:16px;background:var(--tile);}
.ci-row .charge-intro-text{font-size:14px;line-height:1.35;}
.ci-ico{width:36px;height:36px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:18px;}
.ci-shuffle{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));box-shadow:0 2px 0 var(--btn-lip);}
.ci-delete{background:linear-gradient(180deg,#ee7d93,#c8465f);box-shadow:0 2px 0 #9c3046;}
.ci-foot{font-size:var(--fs-small);font-weight:700;color:var(--label);margin:6px 0 16px;}
.a2hs-card .modal-title{font-size:22px;}
/* exit: a pointer-transparent copy fades out after a modal is closed */
.modal-ghost{pointer-events:none !important;animation:fadeOut .2s ease-in both !important;}
.modal-ghost .charge-intro-card{animation:modalOut .2s ease-in both !important;}
@keyframes modalOut{to{opacity:0;transform:translateY(14px) scale(.94);}}
@media (prefers-reduced-motion: reduce){
  .ads-confirm-overlay .charge-intro-card,.modal-overlay .charge-intro-card{animation:fadeIn .2s ease both;}
}
/* ---------- new flower unlocked toast ---------- */
.newflower-badge{position:absolute;z-index:8;transform:translate(-50%,-50%);pointer-events:none;font-family:'Fraunces',serif;font-weight:700;font-size:22px;color:#fff;-webkit-text-stroke:1px var(--accent);text-shadow:0 2px 8px rgba(0,0,0,.28);animation:nfBadge 1.2s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes nfBadge{0%{opacity:0;transform:translate(-50%,-50%) scale(.3);}22%{opacity:1;transform:translate(-50%,-58%) scale(1.15);}45%{transform:translate(-50%,-62%) scale(1);}80%{opacity:1;transform:translate(-50%,-64%) scale(1);}100%{opacity:0;transform:translate(-50%,-74%) scale(.95);}}
.nf-confetti{position:absolute;z-index:8;border-radius:2px;transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity;animation:nfConf ease-out forwards;}
@keyframes nfConf{0%{opacity:1;transform:translate(-50%,-50%) rotate(0);}100%{opacity:0;transform:translate(calc(-50% + var(--nx,0)),calc(-50% + var(--ny,0))) rotate(var(--nr,180deg));}}
.a2hs-steps{text-align:left;margin:0;padding-left:20px;font-family:'Quicksand';font-weight:600;font-size:14px;color:var(--card-ink);line-height:1.6;}
.a2hs-steps li{margin-bottom:6px;}

/* ---------- Round 2: modal as a soft paper sheet with a watercolor edge ---------- */
.ads-confirm-overlay .charge-intro-card,.modal-overlay .charge-intro-card{background:none;border:none;box-shadow:none;isolation:isolate;}
#stage[data-theme="night"] .ads-confirm-overlay .charge-intro-card,#stage[data-theme="night"] .modal-overlay .charge-intro-card{box-shadow:none;}
.ads-confirm-overlay .charge-intro-card::before,.modal-overlay .charge-intro-card::before{content:'';position:absolute;inset:-22% -26%;z-index:-1;pointer-events:none;
  background:var(--paper);opacity:.97;
  -webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat,url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-3.png) center/100% 100% no-repeat;
          mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat,url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-3.png) center/100% 100% no-repeat;}
.ads-confirm-overlay .charge-intro-card::after,.modal-overlay .charge-intro-card::after{content:'';position:absolute;right:-30px;top:-30px;width:60%;height:40%;z-index:-1;pointer-events:none;
  background:var(--wash-soft);opacity:.8;-webkit-mask:url(assets/wash/bloom-4.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-4.png) center/100% 100% no-repeat;}
.modal-title{font-weight:500;}
.modal-badge{background:none;box-shadow:none;position:relative;isolation:isolate;}
.modal-badge::before{content:'';position:absolute;inset:-6px;z-index:-1;background:var(--wash-accent);
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.modal-badge .charge-intro-spark{text-shadow:none;}
.ci-row{background:none;border-radius:0;padding:10px 2px;margin-bottom:0;border-bottom:1px solid var(--divider);}
.ci-row:nth-of-type(2){border-bottom:none;}
.ci-ico{background:none!important;box-shadow:none!important;color:var(--accent);font-size:22px;}
.ci-delete{color:#c8465f;}
.lucas-chip{box-shadow:0 6px 14px rgba(205,66,54,.22);}
.lucas-chip:active{transform:scale(.97);box-shadow:0 3px 8px rgba(205,66,54,.2);}

/* ---------- Round 4 ---------- */
/* merge-triggered modals wait for the merge celebration; taps pass through to the jar meanwhile */
.modal-overlay.modal-wait,.ads-confirm-overlay.modal-wait,
.modal-overlay.modal-wait .charge-intro-card,.ads-confirm-overlay.modal-wait .charge-intro-card{animation-delay:.9s;}
.modal-wait.modal-inert{pointer-events:none;}
.modal-wait.modal-inert button{pointer-events:auto;}
/* charge intro: the same line icons as the action band, and a real flower in the badge */
.ci-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.modal-badge .ci-bloom{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(80,40,60,.22));}
.modal-badge::before{opacity:.7;}
/* Lucas Mode chip: a painted wash with Lucas red and blue, not a plastic button */
#settings .lucas-chip{isolation:isolate;overflow:visible;background:none;box-shadow:none;border-radius:0;outline:none;text-shadow:none;
  min-height:50px;color:#c23a2f;gap:10px;font-weight:600;}
#settings .lucas-chip::after{display:none;}
#settings .lucas-chip::before{content:'';position:absolute;inset:-2px -10px;z-index:-1;pointer-events:none;opacity:.5;
  background:linear-gradient(100deg,rgba(226,92,78,.55),rgba(255,236,230,.4) 52%,rgba(10,150,232,.4));
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;
  transition:opacity .2s var(--ease-out);}
#settings .lucas-chip.sel{box-shadow:none;outline:none;color:#a92c22;}
#settings .lucas-chip.sel::before{opacity:1;}
#settings .lucas-chip:active{transform:scale(.97);box-shadow:none;}
#settings .lucas-chip .lc-logo{height:22px;background:none;box-shadow:none;padding:0;border-radius:0;}
#settings .lucas-chip .lc-name{font-weight:500;color:inherit;}
#settings .lucas-chip .lc-tag{background:none;box-shadow:none;color:#0a7fc8;font-weight:700;font-size:13px;padding:0 2px;border-bottom:1.5px solid rgba(10,150,232,.45);border-radius:0;}
#stage[data-theme="night"] #settings .lucas-chip{color:#ff9a8c;}
#stage[data-theme="night"] #settings .lucas-chip .lc-tag{color:#7cc8ff;}
/* adslucas: Lucas sponsor card, Lucas Mode HUD badge, mode transition, unlock and intro
   modal contents, ads setting note, Lucas chip, FX canvas. Loaded last (build.mjs). */

/* ---------- FX canvas (ad confetti, coin toss, celebrations) ---------- */
.lucas-fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:15;}

/* the sponsor ad (polaroid Lucas, taped on, speech bubble) lives in 5x-polish.css */

/* ---------- Lucas Mode HUD badge (top center while Lucas Mode rules are active) ---------- */
.lucas-hud{position:absolute;top:calc(6px + env(safe-area-inset-top));left:0;right:0;margin:0 auto;width:max-content;z-index:6;display:none;align-items:center;gap:5px;height:28px;padding:0 4px 0 7px;border-radius:16px;pointer-events:none;
  font-family:'Quicksand',sans-serif;border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#cd4236,#00a3ff) border-box;
  box-shadow:0 5px 14px rgba(205,66,54,.18);}
.lucas-hud.on{display:flex;animation:lhIn .5s cubic-bezier(.2,1.3,.4,1) both;}
.lucas-hud.bump{animation:lhBump .38s cubic-bezier(.2,1.4,.4,1);}
.lh-logo{height:18px;width:auto;}
.lh-name{font-weight:800;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#cd4236;
  background:linear-gradient(90deg,#cd4236,#e0605a 40%,#00a3ff 60%,#cd4236);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lhShimmer 4s linear infinite;}
.lh-x{font-family:'Fraunces',serif;font-weight:600;font-size:12px;line-height:16px;color:#fff;background:linear-gradient(135deg,#cd4236,#ec6a59);border-radius:8px;padding:1px 6px;}
.lh-coins{display:flex;align-items:center;gap:3px;height:22px;padding:0 8px 0 3px;border-radius:11px;background:rgba(232,184,68,.18);}
.lh-coins img{width:16px;height:16px;object-fit:contain;}
.lh-coins b{font-size:12px;font-weight:800;color:#a8740f;min-width:8px;text-align:center;}
@keyframes lhIn{0%{transform:translateY(-12px) scale(.8);opacity:0;}100%{transform:none;opacity:1;}}
@keyframes lhBump{0%{transform:scale(1);}40%{transform:scale(1.13);}100%{transform:scale(1);}}
@keyframes lhShimmer{0%{background-position:0% 0;}100%{background-position:-220% 0;}}

/* ---------- Lucas Mode start ribbon (sweeps across the empty jar top) ---------- */
.lucas-ribbon{position:absolute;left:0;right:0;top:31%;height:58px;z-index:7;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;
  background:linear-gradient(90deg,rgba(205,66,54,0) 0%,rgba(205,66,54,.94) 16%,rgba(214,90,120,.94) 50%,rgba(0,163,255,.94) 84%,rgba(0,163,255,0) 100%);
  box-shadow:0 8px 24px rgba(0,80,140,.18);}
.lucas-ribbon.hidden{display:none;}
.lucas-ribbon img{height:34px;width:34px;object-fit:contain;background:#fff;border-radius:50%;padding:4px;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.lucas-ribbon span{font-family:'Fraunces',serif;font-weight:600;font-size:24px;text-shadow:0 2px 8px rgba(0,0,0,.18);}
.lucas-ribbon b{font-family:'Quicksand',sans-serif;font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;background:rgba(255,255,255,.22);border-radius:10px;padding:3px 9px;}
.lucas-ribbon.go{animation:lrSweep 1.6s cubic-bezier(.3,.9,.3,1) both;}
@keyframes lrSweep{0%{transform:translateX(-105%);opacity:0;}20%{transform:translateX(0);opacity:1;}78%{transform:translateX(0);opacity:1;}100%{transform:translateX(105%);opacity:0;}}

/* ---------- Lucas Mode transition (settings chip turns it on) ---------- */
.lucas-swoosh{position:absolute;inset:0;z-index:14;pointer-events:none;overflow:hidden;}
.lucas-swoosh.hidden{display:none;}
.ls-band{position:absolute;top:-20%;bottom:-20%;width:82%;}
.ls-red{left:-22%;background:linear-gradient(160deg,#e05a4c,#cd4236);transform:translateX(-140%) skewX(-12deg);}
.ls-blue{right:-22%;background:linear-gradient(160deg,#2db4ff,#0090e6);transform:translateX(140%) skewX(-12deg);}
.ls-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;opacity:0;}
.ls-logo{width:108px;height:108px;object-fit:contain;background:#fff;border-radius:50%;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.25);}
.ls-title{font-family:'Fraunces',serif;font-weight:600;font-size:40px;line-height:1;text-shadow:0 3px 14px rgba(0,0,0,.25);}
.ls-sub{font-family:'Quicksand',sans-serif;font-weight:800;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;background:rgba(255,255,255,.2);padding:5px 12px;border-radius:12px;}
.lucas-swoosh.go .ls-red{animation:lsRed 1.45s cubic-bezier(.6,0,.3,1) both;}
.lucas-swoosh.go .ls-blue{animation:lsBlue 1.45s cubic-bezier(.6,0,.3,1) both;}
.lucas-swoosh.go .ls-center{animation:lsCenter 1.45s ease both;}
@keyframes lsRed{0%{transform:translateX(-140%) skewX(-12deg);}30%,70%{transform:translateX(0) skewX(-12deg);}100%{transform:translateX(-140%) skewX(-12deg);}}
@keyframes lsBlue{0%{transform:translateX(140%) skewX(-12deg);}30%,70%{transform:translateX(0) skewX(-12deg);}100%{transform:translateX(140%) skewX(-12deg);}}
@keyframes lsCenter{0%,18%{opacity:0;transform:scale(.6);}34%{opacity:1;transform:scale(1.06);}44%{transform:scale(1);}70%{opacity:1;transform:scale(1);}86%,100%{opacity:0;transform:scale(1.04);}}

/* ---------- Lucas unlock + intro + ads question modal contents ---------- */
.lucas-card{position:relative;overflow:hidden;width:100%;max-width:318px;text-align:center;padding:24px 20px 20px;
  background:linear-gradient(180deg,#fff8f4 0%,#ffffff 38%,#f3f9ff 100%);border-color:#ffffff;box-shadow:0 22px 50px rgba(30,20,50,.32);}
#stage[data-theme="night"] .lucas-card{background:linear-gradient(180deg,#3e375e,#2b2740);border-color:rgba(200,180,240,.35);}
.lucas-card > *:not(.lu-rays){position:relative;z-index:1;}
/* the entrance class is lu-in, not pop: .pop is the score popup and sets pointer-events:none, which soft-locked the Nice button */
.lucas-card.lu-in{animation:luCardIn .55s cubic-bezier(.2,1.3,.4,1) both;}
.lu-rays{position:absolute;left:50%;top:110px;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,196,80,.30) 0deg 9deg,rgba(255,255,255,0) 9deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 22%,transparent 62%);mask:radial-gradient(circle,#000 0,#000 22%,transparent 62%);
  animation:luSpin 16s linear infinite;}
.lu-kicker{display:inline-block;font-family:'Quicksand',sans-serif;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#cd4236,#00a3ff);padding:5px 13px;border-radius:12px;box-shadow:0 4px 12px rgba(205,66,54,.25);}
.lu-medal{width:104px;height:104px;margin:14px auto 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 210deg,#cd4236,#ff8a7a,#00a3ff,#7fd0ff,#cd4236) border-box;
  box-shadow:0 12px 26px rgba(0,100,180,.22),0 0 0 6px rgba(255,255,255,.6);}
.lu-medal img{width:68%;height:auto;object-fit:contain;}
.lucas-card.lu-in .lu-medal{animation:luMedal .75s cubic-bezier(.2,1.5,.4,1) .12s both;}
.lu-title{font-family:'Fraunces',serif;font-weight:600;font-size:34px;line-height:1.08;padding:0 4px;color:#cd4236;}
.lu-title .lu-r{color:#cd4236;}
.lu-title .lu-b{color:#0a96e8;}
.lu-title-sm{color:var(--ink);}
.lu-title-sm{font-size:22px;margin-bottom:8px;}
.lu-copy{font-family:'Quicksand',sans-serif;font-weight:600;font-size:14px;color:var(--ink);margin-top:6px;}
.lu-stickers{display:flex;justify-content:center;gap:4px;margin:12px 0 12px;}
.lu-stickers img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(40,30,60,.18));}
.lu-stickers img:nth-child(odd){transform:rotate(-7deg);}
.lu-stickers img:nth-child(even){transform:rotate(6deg) translateY(4px);}
.lucas-card.lu-in .lu-stickers img{animation:luSticker .5s cubic-bezier(.2,1.6,.4,1) both;}
.lucas-card.lu-in .lu-stickers img:nth-child(1){animation-delay:.32s;}
.lucas-card.lu-in .lu-stickers img:nth-child(2){animation-delay:.40s;}
.lucas-card.lu-in .lu-stickers img:nth-child(3){animation-delay:.48s;}
.lucas-card.lu-in .lu-stickers img:nth-child(4){animation-delay:.56s;}
.lu-perks{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left;}
.lu-perks li{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;background:rgba(255,255,255,.82);box-shadow:0 2px 8px rgba(60,40,70,.07);
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;color:#3c4a57;}
.lu-perks b{flex:0 0 auto;min-width:42px;text-align:center;font-family:'Fraunces',serif;font-weight:600;font-size:17px;line-height:24px;color:#fff;background:linear-gradient(135deg,#cd4236,#ef6f5f);border-radius:10px;}
.lu-perks li:nth-child(2) b{background:linear-gradient(135deg,#d99a22,#f2c24f);}
.lu-perks li:nth-child(3) b{background:linear-gradient(135deg,#0a92e0,#46bfff);}
.lucas-card.lu-in .lu-perks li{animation:luPerk .45s cubic-bezier(.2,1.2,.4,1) both;}
.lucas-card.lu-in .lu-perks li:nth-child(1){animation-delay:.55s;}
.lucas-card.lu-in .lu-perks li:nth-child(2){animation-delay:.63s;}
.lucas-card.lu-in .lu-perks li:nth-child(3){animation-delay:.71s;}
.lu-hint{font-family:'Quicksand',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:14px;}
.lucas-card .btn{width:100%;}
.lu-avatar{width:76px;height:76px;border-radius:50%;margin:0 auto 10px;display:block;box-shadow:0 8px 18px rgba(0,0,0,.14);}
.lu-pair{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px;}
.lu-pair .lu-avatar{margin:0;}
.lu-pair-logo{width:62px;height:62px;object-fit:contain;}
@keyframes luCardIn{0%{transform:translateY(24px) scale(.82);opacity:0;}100%{transform:none;opacity:1;}}
@keyframes luMedal{0%{transform:scale(0) rotate(-35deg);}100%{transform:none;}}
@keyframes luSticker{0%{transform:scale(0) rotate(-40deg);opacity:0;}100%{opacity:1;}}
@keyframes luPerk{0%{transform:translateX(-18px);opacity:0;}100%{transform:none;opacity:1;}}
@keyframes luSpin{to{transform:rotate(360deg);}}
#stage[data-theme="night"] .lu-perks li{background:rgba(255,255,255,.14);color:var(--ink);}

/* ---------- round 2: Lucas modals float on a painted paper bloom, no white box ---------- */
.lucas-card{overflow:visible;background:transparent!important;border:none!important;box-shadow:none!important;padding:30px 26px 24px;}
.lucas-card::before{content:"";position:absolute;inset:-60px -56px;z-index:0;pointer-events:none;background:var(--paper);
  /* the same mask stacked three times deepens the paper so the copy reads over the scrim */
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat,url(assets/wash/bloom-wide.png) center/100% 100% no-repeat,url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat,url(assets/wash/bloom-wide.png) center/100% 100% no-repeat,url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
.lucas-card::after{content:"";position:absolute;left:50%;top:40px;width:220px;height:170px;margin-left:-110px;z-index:0;pointer-events:none;background:rgba(0,163,255,.16);
  -webkit-mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;}
.lucas-card .lu-rays{top:118px;width:420px;height:420px;margin:-210px 0 0 -210px;opacity:.55;
  -webkit-mask:radial-gradient(circle,#000 0,#000 18%,transparent 52%);mask:radial-gradient(circle,#000 0,#000 18%,transparent 52%);}
.lu-kicker{background:none;box-shadow:none;padding:0;color:var(--ink-soft);font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:15px;letter-spacing:.2px;text-transform:none;}
.lu-medal{width:96px;height:96px;margin:10px auto 6px;border:none;background:none;box-shadow:none;position:relative;}
.lu-medal::before{content:"";position:absolute;inset:-14px;background:rgba(205,66,54,.20);
  -webkit-mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;}
.lu-medal img{position:relative;width:76%;}
.lu-title{font-size:36px;letter-spacing:-.3px;}
.lu-copy{font-weight:500;color:var(--ink-soft);}
.lu-stickers{gap:0;margin:10px 0 8px;}
.lu-stickers img{width:58px;height:58px;filter:drop-shadow(0 3px 5px rgba(40,30,60,.12));margin:0 -3px;}
.lu-perks{gap:2px;margin:4px auto 10px;width:max-content;max-width:100%;}
.lu-perks li{background:none;box-shadow:none;padding:3px 0;gap:12px;font-weight:600;font-size:14.5px;color:var(--ink);}
.lu-perks b,.lu-perks li:nth-child(2) b,.lu-perks li:nth-child(3) b{background:none;min-width:34px;text-align:right;font-size:20px;color:#cd4236;}
.lu-perks li:nth-child(2) b{color:#c48a17;}
.lu-perks li:nth-child(3) b{color:#0a8fd8;}
.lu-hint{font-size:12.5px;margin-bottom:16px;}
#stage[data-theme="night"] .lucas-card{background:transparent!important;}
#stage[data-theme="night"] .lu-perks li{background:none;}
#stage[data-theme="night"] .lu-perks b{filter:brightness(1.35);}

/* ---------- settings: ads note, Lucas chip ---------- */
.ads-label{text-align:left;}
.ads-note{display:block;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--ink-soft);letter-spacing:0;}
.lucas-chip{position:relative;overflow:hidden;background:linear-gradient(120deg,#c93b30 0%,#dd5547 55%,#ec7a62 100%);}
.lucas-chip::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-18deg);animation:lcShine 4.5s ease-in-out 1s infinite;pointer-events:none;}
.lucas-chip .lc-logo{height:24px;width:auto;background:#fff;border-radius:8px;padding:2px 4px;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.lucas-chip .lc-name{font-family:'Fraunces',serif;font-weight:600;font-size:17px;letter-spacing:.2px;}
.lucas-chip .lc-tag{font-family:'Quicksand',sans-serif;font-weight:800;font-size:12px;color:#fff;background:#0a96e8;border-radius:9px;padding:2px 8px;box-shadow:0 2px 6px rgba(0,80,140,.25);}
.lucas-chip.sel{outline:none;box-shadow:0 0 0 3px #fff inset,0 0 0 2px #0a96e8,0 6px 18px rgba(205,66,54,.32);}
@keyframes lcShine{0%{transform:translateX(0) skewX(-18deg);}35%,100%{transform:translateX(700%) skewX(-18deg);}}

/* Lucas theme: the third background petal color is white, which read as faint ghosts */
#stage[data-theme="lucas"] .bg-petals span:nth-child(3n){color:#9fd3f7!important;}

@media (prefers-reduced-motion: reduce){
  .lu-rays,.lh-name,.lucas-chip::after{animation:none;}
  .lucas-ribbon.go{animation:lrFade 1.6s ease both;}
  .lucas-swoosh.go .ls-red,.lucas-swoosh.go .ls-blue{animation:none;opacity:0;}
  @keyframes lrFade{0%,100%{opacity:0;}20%,80%{opacity:1;}}
}
.lucas-ads-q .btn{font-size:15px;padding-left:8px;padding-right:8px;white-space:nowrap;}

/* ---------- fix round: Lucas presentation ---------- */
/* NEXT preview: Lucas photos fill their whole sprite box (other themes' art leaves air
   around the bloom), so the preview is scaled down to read like the held piece */
#stage[data-theme="lucas"] .next-img{width:32px;height:32px;margin-top:9px;margin-bottom:6px;}
/* evolution strip: unseen tiers become a silhouette of the person, not a grey disc.
   High contrast turns the light photo backdrop white and the subject dark, and multiply
   drops the white, leaving only the figure, like the flower silhouettes elsewhere */
#stage[data-theme="lucas"] .prog-flower.locked{opacity:.30;filter:grayscale(1) brightness(1.25) contrast(9);mix-blend-mode:multiply;border-radius:0;}
/* unlock / intro modals: the primary button paints in the Lucas red-to-blue */
.lucas-card .btn-primary{--paint-a:#d9493c;--paint-b:#1d8fe0;--paint-ink:#fff;}
/* Wave 2 shop: "the Market" stall (#shop) and the home entry row (nav.home-nav).
   Built on the shared watercolor kit (00-watercolor.css) and the Round 2 tokens:
   painted washes, Fraunces display, Quicksand UI, no boxed cards, no lipped buttons. */

/* ---------- home entry row: four quiet painted icon links ---------- */
.home-nav{display:flex;justify-content:space-between;gap:0;width:calc(100% + 16px);margin:0 -8px -6px;}
.hn-btn{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1 1 0;min-width:0;padding:4px 0 2px;
  background:none;border:none;font-family:'Quicksand',sans-serif;color:var(--label);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--ease-out),opacity .16s;}
.hn-btn:active{transform:scale(.94);opacity:.75;}
.hn-ico{position:relative;width:40px;height:40px;display:block;}
.hn-ico::before{content:'';position:absolute;inset:-4px -6px;z-index:-1;background:var(--wash-soft);opacity:.75;
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.hn-btn:nth-child(2) .hn-ico::before,.hn-btn:nth-child(4) .hn-ico::before{-webkit-mask-image:url(assets/wash/bloom-2.png);mask-image:url(assets/wash/bloom-2.png);}
.hn-ico::after{content:'';position:absolute;inset:7px;background:linear-gradient(150deg,var(--accent-2),var(--accent) 70%);opacity:.92;
  -webkit-mask:var(--hn-svg) center/contain no-repeat;mask:var(--hn-svg) center/contain no-repeat;}
#stage[data-theme="night"] .hn-ico::after{background:linear-gradient(150deg,#f1e4ff,#b79be8 75%);}
/* a hand-placed tilt so the four icons read as painted, not stamped */
.hn-btn:nth-child(odd) .hn-ico::after{transform:rotate(-4deg);}
.hn-btn:nth-child(even) .hn-ico::after{transform:rotate(3deg);}
.hn-lbl{font-size:12px;font-weight:600;letter-spacing:.2px;white-space:nowrap;}
/* painted silhouettes: market stall, sun, open book, a flag on a hill */
#homeShopBtn{--hn-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 3.6h15.6l1.9 5.6c0 1.6-1.3 2.9-2.9 2.9-1.3 0-2.3-.8-2.7-1.9-.4 1.1-1.5 1.9-2.8 1.9h-2.6c-1.3 0-2.4-.8-2.8-1.9-.4 1.1-1.4 1.9-2.7 1.9-1.6 0-2.9-1.3-2.9-2.9z'/%3E%3Cpath d='M5 13.2c.7.3 1.4.4 2.2.3V19h3v-4.2h3.6V19h3v-5.5c.8.1 1.5 0 2.2-.3v6.4c0 .8-.6 1.4-1.4 1.4H6.4c-.8 0-1.4-.6-1.4-1.4z'/%3E%3C/svg%3E");}
#homeDailyBtn{--hn-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.2'/%3E%3Cg stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 2.4v2.2M12 19.4v2.2M2.4 12h2.2M19.4 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M5.2 18.8l1.6-1.6M17.2 6.8l1.6-1.6'/%3E%3C/g%3E%3C/svg%3E");}
#homeBookBtn{--hn-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 6.4C9.2 4.9 6.3 4.3 2.8 4.7c-.4 0-.7.4-.7.8v12.9c0 .5.4.8.9.8 3.3-.3 6 .3 8.2 1.7z'/%3E%3Cpath d='M12.8 6.4c2-1.5 4.9-2.1 8.4-1.7.4 0 .7.4.7.8v12.9c0 .5-.4.8-.9.8-3.3-.3-6 .3-8.2 1.7z'/%3E%3C/svg%3E");}
#homeMissionsBtn{--hn-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.2c.6 0 1.1.5 1.1 1.1v15.6H5V4.3c0-.6.5-1.1 1-1.1z'/%3E%3Cpath d='M7.1 4.4c3.4-1.9 6.2 1.6 10.8-.2.5-.2 1 .2 1 .7v7.6c0 .3-.2.6-.5.7-4.6 1.8-7.6-1.7-11.3.3z'/%3E%3Cpath d='M3 19.6c3-1.4 6-1.4 9 0z' /%3E%3C/svg%3E");}

/* Settings and Stats: a quiet footnote line under the nav, so Start stays the one obvious action
   (styling hook only; the buttons and their handlers belong to ui.js and 03-home.css) */
#home .home-row{gap:30px;margin-top:-4px;}
#home .home-row .btn-tile{min-height:34px;font-size:13.5px;font-weight:600;gap:6px;opacity:.8;}
#home .home-row .btn-tile .btn-svg{width:14px;height:14px;}

/* ---------- the Market screen ---------- */
#shop{z-index:3;align-items:stretch;overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 14px);}
#shop.hidden{display:none;}

/* painted awning: soft stripes with a scalloped hem, washed over with a bloom */
.mk-awning{position:absolute;left:-6px;right:-6px;top:0;height:calc(env(safe-area-inset-top) + 92px);pointer-events:none;z-index:0;}
.mk-stripes{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 34%,transparent) 0 28px,color-mix(in srgb,var(--paper) 70%,transparent) 28px 56px);
  -webkit-mask:radial-gradient(circle at 28px 0,#000 27px,transparent 28.5px) 0 100%/56px 30px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 22px) no-repeat;
          mask:radial-gradient(circle at 28px 0,#000 27px,transparent 28.5px) 0 100%/56px 30px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 22px) no-repeat;}
.mk-awning::after{content:'';position:absolute;left:-10%;right:-10%;top:-30%;bottom:10%;background:var(--wash-soft);opacity:.55;
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
#stage[data-theme="night"] .mk-stripes{background:repeating-linear-gradient(90deg,rgba(185,155,235,.3) 0 28px,rgba(40,33,66,.6) 28px 56px);}

.mk-head{position:relative;z-index:1;display:grid;grid-template-columns:76px 1fr 76px;align-items:center;padding:96px 12px 0;}
.mk-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--label);cursor:pointer;}
.mk-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.mk-back:active{opacity:.6;transform:scale(.94);}
.mk-title{text-align:center;}
.mk-title h2{font-family:'Fraunces',serif;font-weight:500;font-size:34px;line-height:1.05;letter-spacing:-.6px;color:var(--accent);}
#stage[data-theme="night"] .mk-title h2{color:#e2cdfb;}
.mk-sub{display:block;margin-top:4px;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--label);}
.mk-coins{justify-self:end;display:flex;align-items:center;gap:5px;margin-top:-22px;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:#b97c20;}
#stage[data-theme="night"] .mk-coins{color:#ffd57a;}
.mk-coins img{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(160,110,30,.35));}
.mk-coins.spend img{animation:mkCoinFlip .6s var(--ease-out);}
@keyframes mkCoinFlip{0%{transform:none;}40%{transform:translateY(-6px) scaleX(-1);}100%{transform:none;}}

.mk-tabs{position:relative;z-index:1;display:flex;justify-content:center;gap:4px;margin:16px 0 4px;padding:0 10px;}
.mk-tab{position:relative;isolation:isolate;background:none;border:none;padding:8px 10px;font-family:'Quicksand',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--label);opacity:.7;cursor:pointer;transition:opacity .2s,color .2s;}
.mk-tab.on{opacity:1;color:var(--ink);}
.mk-tab::before{content:'';position:absolute;inset:2px -4px;z-index:-1;background:var(--wash-accent);opacity:0;transform:scale(.8);transition:opacity .25s,transform .3s var(--ease-out);
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
.mk-tab.on::before{opacity:.7;transform:none;}

/* one shelf per swipe page, native momentum and snap */
.mk-track{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;}
.mk-track::-webkit-scrollbar{display:none;}
.mk-page{flex:0 0 100%;display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overscroll-behavior-y:contain;padding:10px 18px 18px;scrollbar-width:none;}
.mk-page::-webkit-scrollbar{display:none;}
.mk-shelf{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;width:100%;max-width:340px;margin:clamp(6px,3vh,30px) auto 0;}
.mk-page[data-shelf="skins"] .mk-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;max-width:360px;}
/* three goods per plank: the painted pill alone says buy, and the dense page needs no crate */
.mk-page[data-shelf="skins"] .mk-buylbl,.mk-page[data-shelf="skins"] .mk-crate-slot{display:none;}
.mk-page[data-shelf="skins"] .mk-tag.is-buy .mk-price{padding:5px 12px;font-size:14px;}
.mk-page[data-shelf="skins"] .mk-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.mk-page[data-shelf="skins"] .mk-name{font-size:13.5px;}
.mk-page[data-shelf="modes"] .mk-shelf{grid-template-columns:1fr;max-width:270px;}
/* the stall counter: one soft paper wash behind each shelf */
.mk-shelf{position:relative;isolation:isolate;}
.mk-shelf::before{content:'';position:absolute;inset:-34px -30px;z-index:-1;pointer-events:none;background:var(--wash-paper);opacity:.55;
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
/* roomy shelves (power-ups, modes) get bigger goods */
.mk-page[data-shelf="power"] .mk-prev,.mk-page[data-shelf="modes"] .mk-prev{height:96px;}
.mk-page[data-shelf="power"] .mk-ico,.mk-page[data-shelf="modes"] .mk-ico{width:76px;height:76px;}
.mk-page[data-shelf="power"] .mk-ico svg,.mk-page[data-shelf="modes"] .mk-ico svg{width:42px;height:42px;}
.mk-page[data-shelf="power"] .mk-name,.mk-page[data-shelf="modes"] .mk-name{font-size:18px;}
.mk-note{max-width:210px;margin:2px 0 4px;font-size:13px;line-height:1.35;font-weight:500;color:var(--label);text-align:center;}

/* a painted price tag hanging on the stall */
.mk-tag{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 8px 14px;
  background:none;border:none;font-family:'Quicksand',sans-serif;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease-out);}
.mk-tag::before{content:'';position:absolute;inset:-6px -8px;z-index:-1;background:var(--wash-soft);opacity:.8;
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.mk-tag:nth-of-type(even)::before{-webkit-mask-image:url(assets/wash/bloom-2.png);mask-image:url(assets/wash/bloom-2.png);}
.mk-tag:nth-of-type(3n)::before{-webkit-mask-image:url(assets/wash/bloom-4.png);mask-image:url(assets/wash/bloom-4.png);}
#stage[data-theme="night"] .mk-tag::before{background:rgba(150,125,215,.28);opacity:1;}
.mk-tag:nth-of-type(odd){transform:rotate(-1.2deg);}
.mk-tag:nth-of-type(even){transform:rotate(1deg);}
.mk-tag:active{transform:scale(.96) rotate(0deg);}

.mk-prev{height:64px;display:flex;align-items:center;justify-content:center;position:relative;}
.mk-bunch{display:flex;align-items:flex-end;}
.mk-bunch img{width:38px;height:38px;object-fit:contain;margin:0 -5px;filter:drop-shadow(0 3px 4px color-mix(in srgb,var(--accent) 22%,transparent));}
.mk-bunch img:nth-child(2){width:50px;height:50px;position:relative;z-index:1;}
.mk-jar{width:46px;height:54px;filter:drop-shadow(0 4px 6px rgba(80,60,70,.16));}
.mk-ico{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--accent);}
#stage[data-theme="night"] .mk-ico{color:#dcc8fb;}
.mk-ico::before{content:'';position:absolute;inset:-6px;z-index:-1;background:var(--wash-soft);
  -webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.mk-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mk-qty{position:absolute;right:-9px;bottom:-5px;min-width:28px;height:28px;padding:0 5px;display:flex;align-items:center;justify-content:center;isolation:isolate;
  font-family:'Fraunces',serif;font-size:14px;font-weight:600;line-height:1;color:#fff;}
.mk-qty::before{content:'';position:absolute;inset:-2px;z-index:-1;background:linear-gradient(135deg,var(--accent-2),var(--accent));
  -webkit-mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;}

.mk-name{font-family:'Fraunces',serif;font-weight:500;font-size:16px;line-height:1.15;text-align:center;}
.mk-price,.mk-use,.mk-state{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:3px 12px;
  font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;}
.mk-price{color:#a86a14;}
#stage[data-theme="night"] .mk-price{color:#ffd57a;}
.mk-price img{width:17px;height:17px;}
.mk-price::before,.mk-use::before{content:'';position:absolute;inset:-2px -6px;z-index:-1;background:var(--wash-gold);opacity:.55;
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.mk-use{color:var(--paint-ink);}
.mk-tag.is-buy .mk-price{margin-top:6px;padding:6px 16px 6px 14px;gap:5px;font-size:15px;color:var(--paint-ink);}
.mk-tag.is-buy .mk-price::before{inset:-3px -8px;background:linear-gradient(100deg,var(--paint-a),var(--paint-b));opacity:1;}
.mk-tag.is-buy .mk-price img{filter:drop-shadow(0 1px 1px rgba(90,40,30,.25));}
.mk-buylbl{margin-right:2px;font-size:14px;letter-spacing:.3px;}
.mk-tag.is-buy:active .mk-price::before{filter:brightness(.94);}
.mk-use::before{background:linear-gradient(100deg,var(--paint-a),var(--paint-b));opacity:1;}
.mk-state{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--label);font-weight:700;}
.mk-short{font-size:11.5px;font-weight:600;color:var(--label);}
.mk-tag.is-short .mk-prev,.mk-tag.is-short .mk-name{opacity:.55;}
.mk-tag.is-short .mk-price{color:var(--label);}
.mk-tag.is-short .mk-price::before{opacity:.25;}
.mk-tag.is-short.nudge{animation:mkNudge .38s ease;}
@keyframes mkNudge{20%{transform:translateX(-4px);}40%{transform:translateX(4px);}60%{transform:translateX(-2px);}80%{transform:translateX(2px);}}
.mk-tag.is-equipped .mk-name{color:var(--accent);}
#stage[data-theme="night"] .mk-tag.is-equipped .mk-name{color:#e2cdfb;}

/* purchase moment: a painted bloom stamp lands on the tag */
.mk-stamp{position:absolute;right:0;top:6px;padding:4px 9px;font-family:'Fraunces',serif;font-style:italic;font-size:14px;font-weight:500;color:#fff;
  opacity:0;transform:rotate(-14deg) scale(1.8);pointer-events:none;isolation:isolate;}
.mk-stamp::before{content:'';position:absolute;inset:-8px -10px;z-index:-1;background:var(--accent);
  -webkit-mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;}
.mk-tag.stamped .mk-stamp{animation:mkStamp 1.6s var(--ease-out) both;}
.mk-tag.stamped .mk-prev{animation:mkBloom .7s var(--ease-spring);}
@keyframes mkStamp{0%{opacity:0;transform:rotate(-14deg) scale(1.8);}18%{opacity:1;transform:rotate(-10deg) scale(1);}75%{opacity:1;transform:rotate(-10deg) scale(1);}100%{opacity:0;transform:rotate(-10deg) scale(.96);}}
@keyframes mkBloom{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}}

.mk-basket{grid-column:1 / -1;margin-top:6px;text-align:center;font-size:13px;font-weight:600;color:var(--label);}

.mk-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;padding:6px 0 2px;}
.mk-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--label) 40%,transparent);transition:transform .25s var(--ease-out),background .25s;}
.mk-dots i.on{background:var(--accent);transform:scale(1.35);}

/* gentle confirm: one obvious Buy button on a paper sheet */
.mk-confirm{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:0 34px;visibility:hidden;pointer-events:none;}
.mk-confirm.open{visibility:visible;pointer-events:auto;}
.mk-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--bg-bot) 55%,transparent);opacity:0;transition:opacity .22s;}
.mk-confirm.open .mk-scrim{opacity:1;}
.mk-sheet{max-width:290px;padding:26px 22px 14px;text-align:center;opacity:0;transform:translateY(18px) scale(.96);transition:opacity .22s,transform .32s var(--ease-spring);}
.mk-confirm.open .mk-sheet{opacity:1;transform:none;}
.mk-sheet-prev{height:76px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:6px;}
.mk-sheet-prev .mk-bunch img{width:46px;height:46px;}
.mk-sheet-prev .mk-bunch img:nth-child(2){width:62px;height:62px;}
.mk-sheet h3{font-family:'Fraunces',serif;font-weight:500;font-size:24px;line-height:1.15;color:var(--accent);}
#stage[data-theme="night"] .mk-sheet h3{color:#e2cdfb;}
.mk-sheet-blurb{margin:6px 4px 18px;font-size:14px;line-height:1.4;font-weight:500;color:var(--label);}
.mk-buy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:17px;}
.mk-buy img{width:20px;height:20px;}
.mk-notnow{display:block;margin:10px auto 0;padding:8px 14px;background:none;border:none;font-family:'Quicksand',sans-serif;font-size:14px;font-weight:600;color:var(--label);cursor:pointer;}
.mk-notnow:active{opacity:.6;}

/* in-game basket notice: never blocks a tap, gone after a few seconds */
.mk-toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 200px);z-index:6;display:none;pointer-events:none;white-space:nowrap;
  padding:6px 16px;font-family:'Quicksand',sans-serif;font-size:14px;font-weight:700;color:var(--ink);isolation:isolate;transform:translateX(-50%);}
.mk-toast::before{content:'';position:absolute;inset:-6px -14px;z-index:-1;background:var(--wash-paper);
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
.mk-toast.show{display:block;animation:mkToast 3.2s var(--ease-out) both;}
@keyframes mkToast{0%{opacity:0;transform:translate(-50%,10px);}10%,80%{opacity:1;transform:translate(-50%,0);}100%{opacity:0;transform:translate(-50%,-6px);}}

@media (prefers-reduced-motion: reduce){
  .mk-tag.stamped .mk-stamp{animation:fadeIn .2s ease both;opacity:1;transform:rotate(-10deg);}
  .mk-tag.stamped .mk-prev,.mk-coins.spend img,.mk-tag.is-short.nudge{animation:none;}
}

/* ---------- the stall: painted wooden planks under each row, and a crate of flowers ---------- */
#shop{--wood-a:#e2bf93;--wood-b:#c0915f;--wood-c:#94663d;}
#stage[data-theme="night"] #shop{--wood-a:#9583c4;--wood-b:#6d5ca6;--wood-c:#463a78;}
.mk-plank{grid-column:1 / -1;position:relative;z-index:-1;display:block;height:26px;margin:-24px -18px 30px;pointer-events:none;
  background:
    radial-gradient(circle at 9% 62%,var(--wood-c) 0 2.4px,transparent 3px),
    radial-gradient(circle at 91% 62%,var(--wood-c) 0 2.4px,transparent 3px),
    linear-gradient(180deg,var(--wood-a) 0 52%,var(--wood-b) 52% 100%);
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
.mk-plank::after{content:'';position:absolute;left:6%;right:6%;top:100%;height:14px;background:var(--wood-c);opacity:.22;
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.mk-page[data-shelf="skins"] .mk-plank{margin-bottom:24px;}
.mk-page[data-shelf="modes"] .mk-plank{margin-left:-40px;margin-right:-40px;}

.mk-crate-slot{display:flex;flex:1 0 auto;align-items:center;justify-content:center;padding:10px 0 4px;}
.mk-crate{position:relative;width:min(270px,100%);height:136px;pointer-events:none;}
.mk-crate-fl{position:absolute;left:8px;right:8px;top:0;height:76px;display:flex;justify-content:center;align-items:flex-end;}
.mk-cf{width:50px;height:50px;object-fit:contain;margin:0 -7px;filter:drop-shadow(0 3px 4px rgba(60,40,50,.18));}
.mk-cf1,.mk-cf4{width:60px;height:60px;margin-bottom:6px;}
.mk-cf2{width:72px;height:72px;margin-bottom:10px;z-index:1;}
.mk-cf0{transform:rotate(-14deg);}
.mk-cf5{transform:rotate(12deg);}
.mk-crate-box{position:absolute;left:-6px;right:-6px;top:58px;height:74px;
  background:
    linear-gradient(90deg,transparent 0 7%,var(--wood-c) 7% 9%,transparent 9% 91%,var(--wood-c) 91% 93%,transparent 93%),
    repeating-linear-gradient(180deg,var(--wood-a) 0 17px,var(--wood-b) 17px 20px,var(--wood-a) 20px 21px);
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
.mk-crate .mk-basket{position:absolute;left:50%;top:80px;margin:0;transform:translateX(-50%) rotate(-1.5deg);white-space:nowrap;isolation:isolate;
  padding:4px 14px;font-size:12.5px;font-weight:700;color:var(--ink);}
.mk-crate .mk-basket::before{content:'';position:absolute;inset:-3px -6px;z-index:-1;background:var(--paper);opacity:.92;
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
#stage[data-theme="night"] .mk-crate .mk-basket{color:#efe8fb;}
.mk-page[data-shelf="power"] .mk-crate{transform:scale(1.12);}

/* the Night moon is painted into the season backdrop: keep it clear of the Market header
   and the Book by repainting the backdrop scaled up from the bottom, so the moon sits off screen */
#stage[data-theme="night"] #shop::after,#stage[data-theme="night"] #book::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--paper-grain),url(assets/wash/jar/bg-night.jpg) center bottom / auto calc(100% + 300px) no-repeat,#262148;}
/* Wave 2: the Collection Book. A pressed-flower album, one painted page per theme,
   swiped with scroll-snap. Reuses the watercolor kit tokens (--paper, --wash-*). */
#book{z-index:3;align-items:stretch;padding:calc(env(safe-area-inset-top) + 14px) 0 calc(env(safe-area-inset-bottom) + 18px);color:var(--card-ink);}
.bk-head{position:relative;isolation:isolate;text-align:center;padding:6px 64px 0;}
.bk-head::before{content:'';position:absolute;left:50%;top:50%;width:300px;height:130px;margin:-70px 0 0 -150px;z-index:-1;pointer-events:none;
  background:var(--wash-soft);-webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
.bk-title{font-family:'Fraunces',serif;font-weight:500;font-size:30px;line-height:1.1;letter-spacing:-.6px;color:var(--accent);}
#stage[data-theme="night"] .bk-title{color:#e2cdfb;}
.bk-sub{margin-top:4px;font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--label);}
.bk-back{position:absolute;left:14px;top:4px;width:44px;height:44px;border:none;background:none;color:var(--label);cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.bk-back svg{width:24px;height:24px;}
.bk-back:active{opacity:.6;transform:scale(.94);}

/* pages: horizontal scroll-snap, one theme per page */
.bk-pages{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;}
.bk-pages::-webkit-scrollbar{display:none;}
.bk-page{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:18px 34px 8px;min-height:0;}

/* the album sheet: paper wash with a painted edge, like the settings sheet */
.bk-sheet{position:relative;isolation:isolate;width:100%;max-width:340px;max-height:100%;display:flex;flex-direction:column;padding:16px 6px 8px;}
.bk-sheet::before,.bk-sheet::after{content:'';position:absolute;z-index:-1;pointer-events:none;}
.bk-sheet::before{inset:-9% -12%;background:var(--paper);opacity:.95;
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-4.png) center/100% 100% no-repeat,url(assets/wash/bloom-2.png) center/100% 100% no-repeat;
          mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat,url(assets/wash/bloom-4.png) center/100% 100% no-repeat,url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.bk-sheet::after{right:-26px;top:-28px;width:58%;height:30%;opacity:.38;background:var(--wash-accent);
  -webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.bk-ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 10px 6px;border-bottom:1px solid var(--divider);}
.bk-name{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:22px;letter-spacing:-.3px;color:var(--card-ink);}
.bk-prog{font-size:12.5px;font-weight:700;color:var(--label);white-space:nowrap;}

/* ten flowers laid out 3 / 4 / 3 on a 12-column grid, so no flower sits alone on a row */
.bk-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(6px,2.4vh,22px) 2px;padding:clamp(12px,2.4vh,22px) 0 4px;}
.bk-cell{grid-column:span 4;position:relative;margin:0;display:flex;flex-direction:column;align-items:center;padding:8px 0 4px;transform:rotate(-2deg);}
.bk-cell:nth-child(n+4):nth-child(-n+7){grid-column:span 3;}
.bk-cell:nth-child(n+4):nth-child(-n+7) .bk-slot{width:min(16vw,64px);height:min(16vw,64px);}
.bk-cell:nth-child(3n+2){transform:rotate(1.6deg) translateY(4px);}
.bk-cell:nth-child(3n){transform:rotate(-.8deg);}
.bk-slot{position:relative;display:block;width:min(19vw,74px);height:min(19vw,74px);}
.bk-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s;}
.bk-cell.found .bk-slot img{opacity:1;filter:drop-shadow(0 4px 5px rgba(70,40,55,.18));}
/* unpressed: a soft watercolor stain in the flower's shape, pressed faintly into the paper */
.bk-slot{filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));}
.bk-ghost{position:absolute;inset:4%;opacity:.55;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--label) 12%,var(--paper)) 45%,color-mix(in srgb,var(--label) 34%,var(--paper)) 100%),
    color-mix(in srgb,var(--label) 26%,var(--paper));
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;}
/* paper grain: two offset wash blooms lift pigment out of the stain */
.bk-ghost::before,.bk-ghost::after{content:'';position:absolute;background:var(--paper);}
.bk-ghost::before{inset:-6% 20% 30% -14%;opacity:.6;-webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.bk-ghost::after{inset:40% -10% -10% 30%;opacity:.45;-webkit-mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;mask:url(assets/wash/splash-1.png) center/100% 100% no-repeat;}
#stage[data-theme="night"] .bk-slot{filter:none;}
#stage[data-theme="night"] .bk-ghost{opacity:.42;background:radial-gradient(closest-side,rgba(150,130,210,.35) 40%,rgba(205,188,250,.75) 100%);}
#stage[data-theme="night"] .bk-ghost::before,#stage[data-theme="night"] .bk-ghost::after{background:#1f1a40;}
.bk-cell.found .bk-ghost{display:none;}
.bk-cell figcaption{margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--label);opacity:.5;white-space:nowrap;}
.bk-cell.found figcaption{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:13px;letter-spacing:-.1px;text-transform:none;color:var(--card-ink);opacity:1;}
#stage[data-theme="night"] .bk-cell.found figcaption{color:#f3eaff;}
/* paper tape across the top of a pressed flower (light themes only; on Night it read as a grey smudge) */
.bk-tape{position:absolute;top:2px;left:50%;width:30px;height:11px;margin-left:-15px;transform:rotate(-8deg);opacity:0;
  background:color-mix(in srgb,var(--accent-2) 22%,rgba(255,250,240,.85));border-radius:1px;
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
#stage[data-theme="night"] .bk-tape{display:none;}
.bk-cell.found .bk-tape{opacity:.9;}
.bk-cell:nth-child(even) .bk-tape{transform:rotate(7deg);}

/* newly pressed: a gold wash under the flower, a slow shimmer and a tiny New label */
.bk-cell.fresh::before{content:'';position:absolute;left:50%;top:44%;width:118px;height:104px;margin:-52px 0 0 -59px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,224,138,.95),rgba(246,183,72,.55) 60%,transparent);opacity:.85;
  -webkit-mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;
  animation:bkFresh 2.6s ease-in-out infinite;}
.bk-cell.fresh{isolation:isolate;}
.bk-cell.fresh .bk-slot img{filter:drop-shadow(0 0 8px rgba(255,214,120,.85)) drop-shadow(0 4px 5px rgba(70,40,55,.18));}
.bk-cell.fresh figcaption::after{content:'New';display:block;margin-top:1px;font-family:'Quicksand',sans-serif;font-style:normal;font-weight:700;font-size:9.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:#b0670c;text-align:center;}
#stage[data-theme="night"] .bk-cell.fresh figcaption::after{color:#ffd88a;}
.bk-cell.fresh .bk-slot::after{content:'';position:absolute;inset:-6%;pointer-events:none;opacity:.9;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) -120% 0/250% 100% no-repeat;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;animation:bkSheen 2.6s ease-in-out infinite;}
@keyframes bkFresh{0%,100%{opacity:.7;transform:scale(.96);}50%{opacity:1;transform:scale(1.05);}}
@keyframes bkSheen{0%{background-position:-120% 0;}60%,100%{background-position:220% 0;}}

/* a finished set: every flower sits in a faint gold wash */
.bk-page.done .bk-cell.found::before{content:'';position:absolute;left:50%;top:42%;width:110px;height:96px;margin:-48px 0 0 -55px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,220,130,.55),rgba(255,214,120,.22) 60%,transparent);}
#stage[data-theme="night"] .bk-page.done .bk-cell.found::before{background:radial-gradient(closest-side,rgba(255,214,120,.34),rgba(255,214,120,.1) 60%,transparent);}
/* the finished-set ribbon carries a soft gold halo so it reads in a still */
.bk-done::after{content:'';position:absolute;inset:-18px -30px;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,110,.55),rgba(255,214,110,0));}
.bk-page.done .bk-cell{isolation:isolate;}
.bk-page.done .bk-prog{color:#b0670c;}

.bk-foot{min-height:34px;margin-top:clamp(0px,1.6vh,14px);display:flex;align-items:center;justify-content:center;padding:6px 8px 0;text-align:center;}
.bk-hint{font-size:13px;font-weight:600;color:var(--label);}
.bk-done{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:6px 20px;
  font-family:'Fraunces',serif;font-weight:500;font-size:17px;color:#7a4306;}
.bk-done::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;background:linear-gradient(100deg,#ffe596,#f6b748);
  -webkit-mask:url(assets/wash/stroke-3.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-3.png) center/100% 100% no-repeat;}
.bk-claim,.bk-paid{border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.bk-claim{font-weight:600;font-size:18px;padding:8px 24px;}
.bk-claim:active,.bk-paid:active{transform:scale(.96);}
.bk-claim .bk-bloom{opacity:.55;animation:bkBreathe 2.6s ease-in-out infinite;}
.bk-paid .bk-bloom{opacity:.3;width:200px;height:120px;margin:-60px 0 0 -100px;}
.bk-page.celebrate .bk-paid .bk-bloom,.bk-page.celebrate .bk-claim .bk-bloom{animation:bkBloom 2.4s var(--ease-out,ease-out) both;}
@keyframes bkBreathe{0%,100%{transform:scale(.9);opacity:.4;}50%{transform:scale(1.05);opacity:.7;}}
.bk-flycoin{position:absolute;width:18px;height:18px;z-index:8;pointer-events:none;opacity:0;}
.bk-coin{display:inline-flex;align-items:center;gap:4px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;}
.bk-coin img{width:17px;height:17px;}
.bk-bloom{position:absolute;left:50%;top:50%;width:260px;height:200px;margin:-100px 0 0 -130px;z-index:-2;pointer-events:none;opacity:0;
  background:var(--wash-gold);-webkit-mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;}
.bk-page.celebrate .bk-bloom{animation:bkBloom 2.4s var(--ease-out,ease-out) both;}
.bk-page.celebrate .bk-done{animation:bkPop .6s var(--ease-spring,ease-out) .15s both;}
.bk-page.celebrate .bk-cell .bk-slot img{animation:bkGlow 1.2s ease-out both;}
@keyframes bkBloom{0%{opacity:0;transform:scale(.3);}35%{opacity:.95;}100%{opacity:0;transform:scale(1.5);}}
@keyframes bkPop{0%{transform:scale(.6);opacity:0;}100%{transform:none;opacity:1;}}
@keyframes bkGlow{0%{transform:scale(.9);}50%{transform:scale(1.08);}100%{transform:none;}}

/* a theme the player does not own yet: a faded teaser page */
.bk-page.locked .bk-grid{opacity:.7;}
.bk-page.locked .bk-name{opacity:.6;}

/* page dots */
.bk-dots{display:flex;justify-content:center;gap:2px;padding-top:6px;}
.bk-dot-btn{width:22px;height:22px;border:none;background:none;padding:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;}
.bk-dot-btn::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--label);opacity:.32;transition:transform .25s var(--ease-out,ease-out),opacity .25s;}
.bk-dot-btn.on::after{opacity:.95;background:var(--accent);transform:scale(1.35);}
#stage[data-theme="night"] .bk-dot-btn.on::after{background:#cdb8f5;}

/* short screens: tighten the album */
@media (max-height:700px){
  .bk-slot,.bk-cell:nth-child(n+4):nth-child(-n+7) .bk-slot{width:min(14vw,52px);height:min(14vw,52px);}
  .bk-grid{gap:0 6px;padding-top:8px;}
  .bk-title{font-size:26px;}
}

/* home button: a quiet dot when something new was pressed */
#homeBookBtn{position:relative;}
#homeBookBtn.bk-dot::after{content:'';position:absolute;top:2px;left:calc(50% + 14px);width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--paper) 80%,transparent);pointer-events:none;}

/* in-game toast: tiny, non-blocking */
.bk-toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 92px);z-index:6;pointer-events:none;isolation:isolate;
  padding:6px 18px;font-size:13px;font-weight:600;color:var(--card-ink);white-space:nowrap;
  opacity:0;transform:translate(-50%,-6px);transition:opacity .3s,transform .3s var(--ease-out,ease-out);}
.bk-toast::before{content:'';position:absolute;inset:-4px -10px;z-index:-1;background:var(--wash-paper);
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.bk-toast.on{opacity:1;transform:translate(-50%,0);}
/* Wave 2 missions: the Missions sheet, the in-game toast, the home badge and the
   game-over line. Built on the Round 2 paper panel (04-settings.css) and the wash kit. */
#missions{z-index:3;align-items:center;justify-content:center;padding:0 16px;text-align:center;}
.ms-panel{margin-top:40px;}
.ms-panel h2{margin-bottom:6px;}
.ms-art{filter:drop-shadow(0 8px 12px rgba(80,40,60,.22));}

/* balance: a quiet coin line that ticks up on claim */
.ms-bal{display:inline-flex;align-items:center;gap:6px;margin:0 auto 10px;padding:2px 10px;font-family:'Quicksand';font-weight:700;
  font-size:15px;color:var(--card-ink);font-variant-numeric:tabular-nums;transition:transform .2s var(--ease-out);}
.ms-bal img{width:18px;height:18px;object-fit:contain;}
.ms-bal.is-tick{transform:scale(1.08);}

/* mission tags: no boxes, hairline dividers, a painted progress stroke */
.ms-list{list-style:none;margin:0 0 4px;padding:0 2px;text-align:left;}
.ms-row{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--divider);
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out);}
.ms-row:last-child{border-bottom:none;}
.ms-ico{width:24px;height:24px;flex:0 0 auto;color:var(--accent);}
.ms-fl{width:30px;height:30px;margin:-3px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(60,30,50,.2));}
.ms-ico svg{width:100%;height:100%;display:block;}
#stage[data-theme="night"] .ms-ico{color:#cdb8f5;}
.ms-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.ms-title{font-family:'Quicksand';font-weight:600;font-size:var(--fs-body);line-height:1.2;color:var(--card-ink);text-wrap:pretty;text-wrap:balance;}
.ms-bar{position:relative;display:block;height:7px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 9%,transparent);}
#stage[data-theme="night"] .ms-bar{background:rgba(255,255,255,.12);}
.ms-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--accent);opacity:.75;
  -webkit-mask:url(assets/wash/stroke-1.png) left center/100% 140% no-repeat;mask:url(assets/wash/stroke-1.png) left center/100% 140% no-repeat;
  transition:width .5s var(--ease-out);}
#stage[data-theme="night"] .ms-bar i{background:#a98ef0;opacity:.9;}
.ms-row.is-done .ms-bar i,#stage[data-theme="night"] .ms-row.is-done .ms-bar i{background:linear-gradient(90deg,#f6c25a,#e9a032);opacity:1;}
/* claimable: a warm gold wash under the whole row, a full painted bar and a gold title */
.ms-row.is-done{position:relative;isolation:isolate;border-bottom-color:transparent;}
.ms-row.is-done::before{content:'';position:absolute;inset:2px -22px;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,226,140,.5),rgba(246,183,72,.28));
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
#stage[data-theme="night"] .ms-row.is-done::before{background:linear-gradient(100deg,rgba(255,214,120,.42),rgba(246,183,72,.24));}
.ms-row.is-done .ms-bar{height:8px;background:color-mix(in srgb,#f2b24a 22%,transparent);}
.ms-row.is-done .ms-sub{color:#a85f0a;}
#stage[data-theme="night"] .ms-row.is-done .ms-sub,#stage[data-theme="night"] .ms-row.is-done .ms-ico{color:#ffd88a;}
.ms-row.is-done .ms-ico{color:#d98f1c;}
.ms-sub{display:flex;gap:8px;align-items:baseline;font-size:12px;font-weight:600;color:var(--label);font-variant-numeric:tabular-nums;}
.ms-sub em{font-style:normal;opacity:.75;}
.ms-rew{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-family:'Quicksand';font-weight:700;font-size:14px;color:var(--label);white-space:nowrap;}
.ms-rew img,.ms-claim img{width:16px;height:16px;object-fit:contain;}

/* claim: the one obvious action, on a gold wash stroke */
.ms-claim{position:relative;isolation:isolate;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 14px;
  border:none;background:none;cursor:pointer;font-family:'Quicksand';font-weight:700;font-size:14px;color:#6e3d07;
  transition:transform .14s var(--ease-out);animation:msReady 2.4s ease-in-out infinite;}
.ms-claim::before{content:'';position:absolute;inset:-2px -8px;z-index:-1;pointer-events:none;background:linear-gradient(100deg,#ffe08a,#f2b24a);
  -webkit-mask:url(assets/wash/stroke-3.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-3.png) center/100% 100% no-repeat;}
.ms-claim:active{transform:scale(.94);}
.ms-claim b{font-variant-numeric:tabular-nums;}
/* the brush stroke glows: a soft gold halo that breathes behind it */
.ms-claim::after{content:'';position:absolute;inset:-12px -18px;z-index:-2;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,206,92,.7),rgba(255,206,92,0));animation:msGlow 2.4s ease-in-out infinite;}
@keyframes msGlow{0%,100%{opacity:.55;}50%{opacity:1;}}
#stage[data-theme="night"] .ms-claim{color:#5a3104;}
#stage[data-theme="night"] .ms-claim::before{background:linear-gradient(100deg,#ffe596,#f6b748);opacity:1;}
@keyframes msReady{0%,100%{transform:none;}50%{transform:scale(1.04);}}
.ms-row.is-claimed{opacity:0;transform:translateX(18px);}
.ms-row.is-new{animation:msIn .42s var(--ease-out);}
@keyframes msIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.ms-note{margin:8px 0 14px;font-size:12px;font-weight:600;color:var(--label);opacity:.8;}

/* claim burst: soft painted dots */
.ms-burst{position:absolute;width:0;height:0;z-index:2;pointer-events:none;}
.ms-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;opacity:0;
  animation:msDot .7s cubic-bezier(.2,.8,.3,1) forwards;}
.ms-burst i:nth-child(3n){width:7px;height:7px;left:-3.5px;top:-3.5px;}
@keyframes msDot{0%{opacity:1;transform:translate(0,0) scale(.4);}60%{opacity:.95;}100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(1.1);}}

/* in-game toast: top of the stage, above the score row, never touchable */
.ms-toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 92px);   /* below the score row so it never covers the score */z-index:12;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:1px;max-width:calc(100% - 48px);padding:8px 22px 9px;
  font-family:'Quicksand';color:var(--ink);text-align:center;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translate(-50%,-14px);transition:opacity .3s var(--ease-out),transform .34s var(--ease-out),visibility 0s .34s;isolation:isolate;}
.ms-toast::before{content:'';position:absolute;inset:-14px -34px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse closest-side,var(--paper) 62%,color-mix(in srgb,var(--paper) 70%,transparent) 82%,transparent 100%);}
.ms-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s var(--ease-out),transform .34s var(--ease-out),visibility 0s;}
.ms-toast b{font-family:'Fraunces',serif;font-weight:500;font-size:15px;color:var(--accent);letter-spacing:-.2px;}
.ms-toast span{font-size:12px;font-weight:600;color:var(--label);overflow:hidden;text-overflow:ellipsis;max-width:100%;}
#stage[data-theme="night"] .ms-toast{color:#f1e8ff;}
#stage[data-theme="night"] .ms-toast b{color:#e2cdfb;}

/* home badge on the Missions entry */
#homeMissionsBtn{position:relative;}
.ms-count{position:absolute;top:-7px;right:-7px;z-index:1;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-family:'Quicksand';font-weight:700;font-size:11px;line-height:1;
  color:#6e3d07;background:linear-gradient(135deg,#ffe08a,#f2b24a);box-shadow:0 2px 6px rgba(180,110,20,.3);pointer-events:none;}

/* game-over line */
.over-missions{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;font-size:13px;font-weight:600;color:var(--label);}
.over-missions[hidden]{display:none;}
.om-dot{width:8px;height:8px;border-radius:50%;background:#f2b24a;box-shadow:0 0 0 3px color-mix(in srgb,#f2b24a 25%,transparent);}
/* Wave 2: Daily Challenge. The screen reuses the Round 2 paper panel (04-settings.css),
   the in-game tag is a small painted stroke that never takes input, and the game-over
   line sits under the coins as quiet text. */
#daily{z-index:3;align-items:center;justify-content:center;padding:0 24px;text-align:center;}
.daily-panel{margin-top:40px;padding-bottom:14px;}
.dl-kicker{font-family:'Quicksand';font-size:var(--fs-micro,11px);letter-spacing:2.5px;text-transform:uppercase;color:var(--label,var(--ink-soft));font-weight:700;margin-top:2px;}
.dl-date{font-family:'Quicksand';font-size:13px;font-weight:600;color:var(--ink-soft);margin-top:2px;}
.daily-panel h2.dl-name{margin:10px 0 6px;}
.dl-mode{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-soft);margin:-2px 0 8px;}
.dl-later{font-family:'Fraunces',serif;font-style:italic;font-size:19px;line-height:1.35;color:var(--card-ink,var(--ink));margin:4px auto 14px;max-width:270px;text-wrap:balance;}
.dl-line{font-family:'Quicksand';font-size:15px;line-height:1.4;font-weight:600;color:var(--card-ink,var(--ink));margin:0 auto 16px;max-width:280px;text-wrap:balance;}
.dl-best{margin-bottom:12px;}
.dl-best .sb-val.dl-empty{font-family:'Fraunces',serif;font-size:22px;line-height:1.4;font-style:italic;color:var(--ink-soft);}
.dl-reward{display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Quicksand';font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0 auto 18px;max-width:260px;line-height:1.3;}
.dl-reward img{width:18px;height:18px;flex:none;}
.daily-panel .btn-text{min-height:38px;margin-top:6px;}
.dl-reset{font-family:'Quicksand';font-size:11.5px;font-weight:600;color:var(--ink-soft);opacity:.85;margin-top:2px;}

/* home: a small painted dot on the Daily button until today's challenge is played */
#homeDailyBtn{position:relative;}
#homeDailyBtn.daily-new::after{content:'';position:absolute;top:2px;right:calc(50% - 20px);   /* on the icon, not the wide button's corner */width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--paper,#fff) 85%,transparent);pointer-events:none;}
#stage[data-theme="night"] #homeDailyBtn.daily-new::after{background:#e2cdfb;}

/* in game: twist name and timer under the score bar. Never blocks the board. */
.daily-tag{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 90px);transform:translateX(-50%);z-index:6;
  display:none;align-items:center;gap:8px;padding:3px 16px;pointer-events:none;isolation:isolate;white-space:nowrap;
  font-family:'Quicksand';font-weight:700;font-size:12px;letter-spacing:.3px;color:var(--ink);}
.daily-tag::before{content:'';position:absolute;inset:-5px -10px;z-index:-1;background:var(--wash-paper);opacity:.9;
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
#stage.mode-daily .daily-tag{display:flex;}
.dt-name{font-family:'Fraunces',serif;font-weight:500;font-size:13px;color:var(--accent);}
#stage[data-theme="night"] .dt-name{color:#e2cdfb;}
.dt-time{display:none;font-variant-numeric:tabular-nums;font-weight:700;}
#stage.daily-timed .dt-time{display:inline;}
.daily-tag.dt-low .dt-time{color:#d0473c;}
#stage[data-theme="night"] .daily-tag.dt-low .dt-time{color:#ff9a8f;}
.dt-flash{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);opacity:0;font-size:12px;font-weight:700;color:var(--ink-soft);}
.daily-tag.dt-pop .dt-flash{animation:dtFlash 1.8s var(--ease-out,ease-out) both;}
@keyframes dtFlash{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1;transform:translate(-50%,4px)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,8px)}}

/* Calm Hands: Shake rests for the day */
#stage.daily-calm #shakeBtn{opacity:.38;filter:saturate(.3);pointer-events:none;}
/* a daily run ends at game over: no Keep Playing */
#stage.mode-daily #keepPlayingBtn{display:none!important;}

/* game over: the daily result under the coins */
.over-daily{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:8px;font-family:'Quicksand';}
.over-daily[hidden]{display:none;}
.od-k{font-size:var(--fs-micro,11px);letter-spacing:2.2px;text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
.od-v{font-size:14px;font-weight:600;color:var(--card-ink,var(--ink));}
.od-v b{display:inline-flex;align-items:center;gap:3px;font-weight:700;}
.od-v b img{width:15px;height:15px;}

.od-later{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-soft);margin-top:4px;text-wrap:balance;max-width:260px;}

/* daily prize: what was won (end screen and daily screen), a jar swatch for jar colors */
.dl-won{display:flex;justify-content:center;font-family:'Quicksand';font-size:14px;color:var(--card-ink,var(--ink));margin:-2px 0 8px;}
.dl-won b,.od-v b{display:inline-flex;align-items:center;gap:5px;font-weight:700;}
.od-swatch{display:inline-block;width:12px;height:16px;border-radius:3px 3px 6px 6px;background:linear-gradient(180deg,#fff 0,var(--sw) 100%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sw) 70%,#000 30%);}
.od-equip{min-height:34px;margin-top:2px;pointer-events:auto;}
.od-equip:disabled{opacity:.6;}
/* Wave 2: Zen Garden mode. Home option, HUD tag, and the calm jar-full sheet.
   Uses the shared watercolor kit masks and theme tokens; nothing here is boxy. */

/* ---- home: a quiet painted option under Start ---- */
.zen-start{position:relative;isolation:isolate;align-self:center;display:inline-flex;align-items:center;gap:8px;
  margin:2px auto 0;padding:8px 22px;min-height:40px;border:0;background:none;cursor:pointer;
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:17px;letter-spacing:.01em;color:var(--ink);
  -webkit-tap-highlight-color:transparent;}
.zen-start::before{content:'';position:absolute;inset:-4px -10px;z-index:-1;pointer-events:none;
  background:var(--wash-soft);opacity:.8;
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;
          mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;transition:opacity .2s;}
.zen-start:active::before{opacity:1;}
.zen-start:active{transform:scale(.97);}
.zs-leaf{width:14px;height:14px;border-radius:2px 12px 2px 12px;background:var(--accent);opacity:.75;transform:rotate(-8deg);}

/* ---- HUD: softer score, small Zen tag ---- */
.zen-tag{display:none;}
#stage.is-zen .zen-tag{display:block;font-family:'Fraunces',serif;font-style:italic;font-size:13px;line-height:1;
  color:var(--accent);letter-spacing:.04em;margin-bottom:2px;}
#stage.is-zen #scoreWrap .score-label,
#stage.is-zen #bestMini{display:none;}
#stage.is-zen #scoreVal{opacity:.62;font-size:.82em;}

/* ---- jar-full sheet ---- */
.zen-sheet{display:none;}
.zen-sheet.on{display:flex;position:absolute;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));z-index:30;
  justify-content:center;align-items:flex-end;padding:90px 0 22px;pointer-events:none;animation:zenIn .42s cubic-bezier(.2,.8,.2,1) both;
  /* soft paper mist over the lower jar so the choices read on a busy jar; feathered, no edges */
  background:linear-gradient(to top,color-mix(in srgb,var(--paper) 92%,transparent) 0%,color-mix(in srgb,var(--paper) 78%,transparent) 55%,transparent 100%);}
.zen-card{position:relative;isolation:isolate;pointer-events:auto;text-align:center;padding:20px 22px 18px;max-width:340px;width:calc(100% - 48px);}
.zen-card::before{content:'';position:absolute;inset:-18px -26px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,var(--paper) 40%,color-mix(in srgb,var(--paper) 70%,transparent) 62%,transparent 74%);}
.zen-card::after{content:'';position:absolute;inset:-6px -10px;z-index:-1;pointer-events:none;background:var(--wash-soft);opacity:.55;
  -webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;
          mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.zen-title{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--ink);line-height:1.15;}
.zen-sub{font-family:'Quicksand',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-top:4px;}
.zen-acts{display:flex;justify-content:center;gap:10px;margin-top:14px;}
.zen-act{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;border:0;background:none;cursor:pointer;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);-webkit-tap-highlight-color:transparent;}
.za-ico{position:relative;isolation:isolate;width:46px;height:46px;display:grid;place-items:center;color:var(--btn-text);}
.za-ico::before{content:'';position:absolute;inset:-6px;z-index:-1;background:var(--wash-accent);
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;
          mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.zen-act:nth-child(2) .za-ico::before{-webkit-mask-image:url(assets/wash/bloom-2.png);mask-image:url(assets/wash/bloom-2.png);}
.za-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.zen-act:active .za-ico{transform:scale(.93);}
#stage[data-theme="night"] .za-ico{color:var(--ink);}
@keyframes zenIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.zen-sheet.on{animation:none;}}
/* Fast Mode: hidden debug panel ("Workshop"). A cozy paper sheet from the bottom; painted
   wash behind the title. Uses theme tokens from #stage. Never shown unless opened. */
.dbg-panel{position:absolute;inset:0;z-index:300;pointer-events:none;visibility:hidden;}
.dbg-panel.on{pointer-events:auto;visibility:visible;}
.dbg-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 30%,transparent);opacity:0;transition:opacity .25s;}
.dbg-panel.on .dbg-scrim{opacity:1;}
.dbg-sheet{position:absolute;left:0;right:0;bottom:0;max-height:78vh;max-height:78dvh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);border-radius:26px 26px 0 0;
  box-shadow:0 -10px 40px color-mix(in srgb,var(--ink) 28%,transparent);
  transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.8,.2,1);
  padding-bottom:env(safe-area-inset-bottom);font-family:'Quicksand',sans-serif;
  -webkit-user-select:text;user-select:text;}
.dbg-panel.on .dbg-sheet{transform:none;}
.dbg-bar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;}
.dbg-bar::before{content:'';position:absolute;left:8px;top:2px;width:150px;height:56px;z-index:-1;pointer-events:none;background:var(--wash-soft);opacity:.8;
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.dbg-title{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:22px;color:var(--ink);}
.dbg-done{border:0;background:none;cursor:pointer;font-family:'Fraunces',serif;font-weight:600;font-size:17px;color:var(--accent);padding:8px 4px;}
.dbg-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:0 20px 18px;}
.dbg-sec{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.dbg-head{width:100%;display:flex;align-items:center;gap:8px;padding:13px 0;border:0;background:none;cursor:pointer;color:var(--ink);text-align:left;}
.dbg-h{font-family:'Fraunces',serif;font-weight:600;font-size:17px;}
.dbg-n{font-size:12px;font-weight:700;color:var(--ink-soft);}
.dbg-chev{margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:transform .2s;}
.dbg-sec.shut .dbg-chev{transform:rotate(-45deg);}
.dbg-sec.shut .dbg-list{display:none;}
.dbg-list{display:flex;flex-direction:column;gap:14px;padding-bottom:14px;}
.dbg-top{display:flex;align-items:center;gap:10px;}
.dbg-lbl{flex:1;font-weight:700;font-size:15px;}
.dbg-val{font-weight:700;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums;}
.dbg-help{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-top:3px;}
.dbg-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:4px 0 0;background:none;touch-action:pan-y;}
.dbg-range::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:color-mix(in srgb,var(--accent-2) 55%,transparent);}
.dbg-range::-moz-range-track{height:5px;border-radius:3px;background:color-mix(in srgb,var(--accent-2) 55%,transparent);}
.dbg-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9.5px;border-radius:50%;background:var(--accent);border:3px solid var(--paper);box-shadow:0 1px 5px color-mix(in srgb,var(--ink) 35%,transparent);}
.dbg-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--paper);}
.dbg-tog{width:46px;height:28px;border-radius:14px;border:0;position:relative;cursor:pointer;background:color-mix(in srgb,var(--ink) 16%,transparent);transition:background .2s;}
.dbg-tog::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;}
.dbg-tog.on{background:var(--accent);}
.dbg-tog.on::after{transform:translateX(18px);}
.dbg-sel{margin-top:6px;width:100%;padding:9px 10px;font:600 15px 'Quicksand',sans-serif;color:var(--ink);background:color-mix(in srgb,var(--accent-2) 18%,var(--paper));border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:12px;}
.dbg-btn{display:block;width:100%;text-align:left;padding:11px 14px;border:0;border-radius:14px;cursor:pointer;
  font:700 15px 'Quicksand',sans-serif;color:var(--ink);background:color-mix(in srgb,var(--accent-2) 22%,var(--paper));-webkit-tap-highlight-color:transparent;}
.dbg-btn:active{background:color-mix(in srgb,var(--accent-2) 45%,var(--paper));}
.dbg-foot{display:flex;flex-direction:column;gap:10px;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding-top:14px;}
.dbg-warn{color:var(--accent);}
.dbg-export{display:none;flex-direction:column;gap:8px;}
.dbg-export.on{display:flex;}
.dbg-ta{width:100%;font:13px/1.4 ui-monospace,Menlo,monospace;color:var(--ink);background:color-mix(in srgb,var(--paper) 70%,var(--accent-2));border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:12px;padding:10px;resize:none;}
.dbg-toast{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%,10px);padding:8px 16px;border-radius:999px;
  background:var(--ink);color:var(--paper);font:700 14px 'Quicksand',sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;}
.dbg-toast.on{opacity:.95;transform:translate(-50%,0);}
/* dev mode: a small painted Dev button that opens the panel (only when dev mode is on) */
.dbg-devbtn{position:absolute;left:10px;top:calc(50% - 18px);z-index:60;height:30px;padding:0 12px;border:0;border-radius:999px;cursor:pointer;
  font:700 12px/1 'Quicksand',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--btn-text,#8a2c52);
  background:color-mix(in srgb,var(--accent-2) 55%,var(--paper,#fffaf5));opacity:.8;-webkit-tap-highlight-color:transparent;}
.dbg-devbtn:active{transform:scale(.94);}
/* a quick note on the home screen ("Dev mode on") without opening the sheet */
.dbg-panel.toast-only{visibility:visible;pointer-events:none;}
.dbg-panel.toast-only .dbg-scrim,.dbg-panel.toast-only .dbg-sheet{visibility:hidden;}
.dbg-panel.toast-only .dbg-toast{visibility:visible;}
/* fast/fixes: the daily clock. Every daily run shows a calm timer beside the twist name. */
#stage.mode-daily .dt-time{display:inline;font-family:'Quicksand';font-size:15px;font-weight:700;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;letter-spacing:.4px;}
#stage.mode-daily .dt-time:not(:empty)::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.45;margin-right:8px;vertical-align:middle;}
.daily-tag .dt-time{transition:color .6s ease;}
.dl-clock{font-family:'Quicksand';font-size:12.5px;font-weight:700;letter-spacing:.3px;color:var(--ink-soft);margin:-8px auto 14px;}

/* Shake! invisible on iPhone (WebKit): defensive hardening, not reproduced headless (WebKit hangs in the build sandbox).
   Suspects: a masked, overflow:hidden button holding an animated, skewed transform child can drop out of WebKit's compositor.
   The mask already clips the glint, so overflow:hidden goes; the glint slides by background-position (no transform on a
   child of a masked layer); the mask longhands are explicit; the button gets its own stacking layer. */
.shake-btn{overflow:visible;isolation:isolate;-webkit-transform:translateZ(0);
  -webkit-mask-image:url(assets/wash/hud/shake-stroke.png);-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
  mask-image:url(assets/wash/hud/shake-stroke.png);mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;
  -webkit-appearance:none;appearance:none;opacity:1;visibility:visible;}
.shake-btn::after{left:0;width:100%;top:0;bottom:0;transform:none;
  background:linear-gradient(100deg,transparent 0 40%,rgba(255,255,255,.5) 50%,transparent 60% 100%) -150% 0/60% 100% no-repeat;
  animation:shakeGlint2 3.4s ease-in-out 1s infinite;}
@keyframes shakeGlint2{0%,70%{background-position:-150% 0;}100%{background-position:350% 0;}}
.shake-label{z-index:2;}
/* Fast Mode shop: the Market as a painted wooden storefront.
   One swipeable row of goods on a wood counter (scroll-snap, one centered, neighbors peeking).
   Builds on 11-shop.css (awning, header, coins, confirm sheet) and the shared watercolor kit. */

#shop{--wood-tint:#fff;--chalk:#f6efe0;--chalk-bg:#3c4a43;}
#stage[data-theme="night"] #shop{--wood-tint:#8f83c2;--chalk-bg:#2a2447;}

/* the sign: a chalkboard hung from the awning on two cords */
.mk-head{padding-top:100px;}
.mk-title{position:relative;isolation:isolate;padding:9px 16px 10px;white-space:nowrap;}
.mk-title::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:9px;border:5px solid transparent;
  background:radial-gradient(120% 140% at 30% 20%,color-mix(in srgb,var(--chalk-bg) 88%,#fff),var(--chalk-bg)) padding-box,url(assets/shop/wood.png) center/220px auto border-box;
  box-shadow:0 4px 8px rgba(60,40,30,.25),inset 0 0 14px rgba(0,0,0,.28);}
.mk-title::after{content:'';position:absolute;left:20%;right:20%;top:-16px;height:18px;z-index:-2;
  background:linear-gradient(#a98354,#a98354) left/2px 100% no-repeat,linear-gradient(#a98354,#a98354) right/2px 100% no-repeat;}
.mk-title h2,#stage[data-theme="night"] .mk-title h2{color:var(--chalk);font-size:30px;letter-spacing:-.3px;}
.mk-sub{color:color-mix(in srgb,var(--chalk) 70%,transparent);margin-top:2px;font-size:9.5px;letter-spacing:2px;white-space:nowrap;}

/* the stall: two wooden posts, a back wall wash, a counter along the bottom */
.mk-stall{position:relative;z-index:1;flex:1 1 auto;min-height:0;max-height:560px;margin:auto 10px 0;display:flex;}
.mk-stall::before{content:'';position:absolute;inset:0 6px 30px;z-index:0;pointer-events:none;background:var(--wash-paper);opacity:.6;
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
.mk-post{position:absolute;top:-8px;bottom:6px;width:16px;z-index:2;pointer-events:none;border-radius:3px;
  background:url(assets/shop/wood-v.png) center/32px auto repeat-y;background-color:var(--wood-tint);background-blend-mode:multiply;
  box-shadow:inset -3px 0 0 rgba(90,55,25,.28),inset 2px 0 0 rgba(255,235,200,.35),0 3px 5px rgba(70,45,25,.2);}
.mk-post-l{left:0;}.mk-post-r{right:0;}
.mk-stall::after{content:'';position:absolute;left:-4px;right:-4px;top:-14px;height:20px;z-index:3;pointer-events:none;border-radius:5px;
  background:url(assets/shop/wood.png) 30% center/300px auto repeat-x;background-color:var(--wood-tint);background-blend-mode:multiply;filter:brightness(.96);
  box-shadow:inset 0 2px 0 rgba(255,240,210,.5),inset 0 -3px 0 rgba(90,55,25,.25),0 4px 7px rgba(70,45,25,.2);}

.mk-counter{position:absolute;left:-4px;right:-4px;bottom:0;height:58px;z-index:0;pointer-events:none;}
.mk-counter-top,.mk-counter-face{position:absolute;left:0;right:0;display:block;
  background:url(assets/shop/wood.png) center/340px auto repeat-x;background-color:var(--wood-tint);background-blend-mode:multiply;}
.mk-counter-top{top:0;height:20px;border-radius:6px 6px 2px 2px;filter:brightness(1.07);box-shadow:inset 0 2px 0 rgba(255,240,210,.55);}
.mk-counter-face{top:20px;height:38px;background-position:40% center;border-radius:0 0 6px 6px;filter:brightness(.88);
  box-shadow:inset 0 3px 4px rgba(70,40,20,.28),0 6px 10px rgba(70,45,25,.18);}

/* the scroll area: a vertical list inside the stall, two goods per row */
.mk-track{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:block;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none;margin-bottom:56px;padding:20px 16px 22px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent);}
.mk-track::-webkit-scrollbar{display:none;}
.mk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;align-items:stretch;}
.mk-card .mk-act{margin-top:auto;}   /* lead: Spend pills line up across a row */
.mk-card{position:relative;isolation:isolate;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:12px 6px 10px;color:var(--ink);cursor:default;-webkit-tap-highlight-color:transparent;}
.mk-card::before{content:'';position:absolute;inset:-2px -6px 0;z-index:-1;background:var(--wash-paper);opacity:.8;
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.mk-card:nth-child(even)::before{-webkit-mask-image:url(assets/wash/bloom-2.png);mask-image:url(assets/wash/bloom-2.png);}
.mk-card:nth-child(3n)::before{-webkit-mask-image:url(assets/wash/bloom-4.png);mask-image:url(assets/wash/bloom-4.png);}
.mk-card .mk-prev{height:84px;margin-top:0;}
.mk-card .mk-bunch img{width:38px;height:38px;margin:0 -6px;}
.mk-card .mk-bunch img:nth-child(2){width:52px;height:52px;}
.mk-card .mk-jar,.mk-card .mk-swatch canvas{width:58px;height:72px;}
.mk-swatch{position:relative;isolation:isolate;display:block;line-height:0;}
.mk-swatch canvas{filter:drop-shadow(0 0 1px rgba(120,80,90,.55)) drop-shadow(0 3px 4px rgba(80,60,70,.2));}
/* lead: a wash in the jar's own color behind the pale glass, so each jar reads at a glance */
.mk-swatch::before{content:"";position:absolute;inset:-16px -40px -10px;z-index:-1;background:var(--jc,#f4c9da);opacity:1;
  -webkit-mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-3.png) center/100% 100% no-repeat;}
.mk-card .mk-ico{width:64px;height:64px;}
.mk-card .mk-ico svg{width:34px;height:34px;}
.mk-card .mk-qty{right:-12px;bottom:-6px;min-width:26px;height:26px;font-size:13px;}
.mk-card.is-daily .mk-prev{opacity:.7;}
.mk-card.is-daily .mk-name{opacity:.6;}
.mk-teaser{grid-column:1 / -1;}
.mk-card .mk-name{margin-top:4px;font-size:17px;letter-spacing:-.3px;color:var(--accent);}
#stage[data-theme="night"] .mk-card .mk-name{color:#e2cdfb;}
.mk-desc{margin:3px 0 0;min-height:32px;max-width:150px;font-size:12px;line-height:1.3;font-weight:500;color:var(--label);}
.mk-act{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px;margin-top:6px;justify-content:center;}

/* Spend / Use: one painted pill, the single obvious action on the card */
.mk-spend{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:5px;padding:7px 16px 7px 15px;border:0;background:none;cursor:pointer;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;color:var(--paint-ink);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;
  transition:transform .15s var(--ease-out);}
.mk-spend::before{content:'';position:absolute;inset:-3px -8px;z-index:-1;background:linear-gradient(100deg,var(--paint-a),var(--paint-b));
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.mk-spend:active{transform:scale(.96);}
.mk-spend img{width:17px;height:17px;filter:drop-shadow(0 1px 1px rgba(90,40,30,.25));}
.mk-spend.is-short{color:var(--label);}
.mk-spend.is-short::before{background:var(--wash-gold);opacity:.35;}
.mk-spend.is-short img{opacity:.6;}
.mk-card .mk-state{margin-top:0;font-size:13px;}
.mk-card .mk-short{font-size:12.5px;}
.mk-card.hush{animation:mkHush .5s ease;}
@keyframes mkHush{40%{opacity:.7;}}

/* teaser card: the next arrival */
.mk-teaser .mk-name{color:var(--label);}
#stage[data-theme="night"] .mk-teaser .mk-name{color:#cbbde8;}
.mk-teaser .mk-ico{color:var(--label);opacity:.7;}
.mk-next{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:15px;color:#a86a14;}
#stage[data-theme="night"] .mk-next{color:#ffd57a;}
.mk-next img{width:19px;height:19px;}

/* "New" ribbon on a freshly arrived good, gone once it has been looked at */
.mk-new{position:absolute;right:-2px;top:-6px;z-index:2;padding:5px 12px;isolation:isolate;font-family:'Fraunces',serif;font-style:italic;font-size:15px;font-weight:500;color:#fff;
  transform:rotate(8deg);transition:opacity .45s,transform .45s;}
.mk-new::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;background:linear-gradient(110deg,var(--accent-2),var(--accent));
  -webkit-mask:url(assets/wash/splash-2.png) center/100% 100% no-repeat;mask:url(assets/wash/splash-2.png) center/100% 100% no-repeat;}
.mk-new.gone{opacity:0;transform:rotate(8deg) translateY(-6px) scale(.9);}

/* purchase stamp (reuses the .mk-stamp art from 11-shop.css) */
.mk-card.stamped .mk-prev{animation:mkBloom .7s var(--ease-spring);}

/* basket note and dots under the stall */
#shop .mk-basket{position:relative;z-index:1;grid-column:auto;margin:10px 0 0;min-height:18px;}
#shop .mk-basket:empty{min-height:0;margin:0;}

@media (prefers-reduced-motion: reduce){
  .mk-card{transition:none;}
  .mk-card.hush,.mk-card.stamped .mk-prev{animation:none;}
  .mk-new{transition:none;}
}

/* section signs: three painted wooden planks hung above the stall; the lit one is the open section */
.mk-signs{position:relative;z-index:4;display:flex;justify-content:center;gap:7px;padding:2px 12px 12px;flex:0 0 auto;}
.mk-sign{position:relative;isolation:isolate;flex:1 1 0;min-width:0;max-width:128px;padding:9px 4px 10px;border:0;background:none;cursor:pointer;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:12px;line-height:1.15;letter-spacing:0;white-space:nowrap;color:color-mix(in srgb,var(--chalk) 72%,transparent);
  -webkit-tap-highlight-color:transparent;transform:translateY(0) rotate(var(--tilt,0deg));transition:transform .25s var(--ease-out),color .25s;}
.mk-sign:nth-child(1){--tilt:-1.2deg;}.mk-sign:nth-child(2){--tilt:.8deg;}.mk-sign:nth-child(3){--tilt:-.6deg;}
.mk-sign::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:6px;
  background:url(assets/shop/wood.png) var(--wx,30%) center/240px auto repeat-x;background-color:var(--wood-tint);background-blend-mode:multiply;filter:brightness(.78) saturate(.9);
  box-shadow:inset 0 2px 0 rgba(255,240,210,.35),inset 0 -3px 0 rgba(60,35,18,.3),0 3px 6px rgba(70,45,25,.22);transition:filter .25s;}
.mk-sign:nth-child(2)::before{--wx:60%;background-position:60% center;}.mk-sign:nth-child(3)::before{background-position:10% center;}
.mk-sign::after{content:'';position:absolute;left:50%;top:-9px;width:30%;height:9px;transform:translateX(-50%);
  background:linear-gradient(#a98354,#a98354) left/2px 100% no-repeat,linear-gradient(#a98354,#a98354) right/2px 100% no-repeat;pointer-events:none;}
.mk-sign.on{color:var(--chalk);transform:translateY(3px) rotate(0deg);text-shadow:0 1px 0 rgba(0,0,0,.25);}
.mk-sign.on::before{filter:brightness(1.02);}
.mk-sign:active{transform:translateY(2px) rotate(var(--tilt,0deg)) scale(.97);}
.mk-sign-new{position:absolute;right:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--accent-2);opacity:0;transition:opacity .3s;box-shadow:0 0 0 2px rgba(255,255,255,.55);}
.mk-sign.has-new .mk-sign-new{opacity:1;}
#shop .mk-head{padding-bottom:8px;}
.mk-track.swap{animation:mkSwap .35s var(--ease-out);}
@keyframes mkSwap{from{opacity:.2;}to{opacity:1;}}
@media (max-height:700px){.mk-sign{padding:7px 6px 8px;font-size:12px;}.mk-head{padding-top:84px;}}
/* Fast Mode: Wilt mode. Just a small HUD tag, in the same quiet voice as the Zen tag. */
.wilt-tag{display:none;}
#stage.is-wilt .wilt-tag{display:block;font-family:'Fraunces',serif;font-style:italic;font-size:13px;line-height:1;
  color:var(--accent);letter-spacing:.04em;margin-bottom:2px;opacity:.85;}

/* combo clock: a small calm leaf meter beside the Wilt tag, only while a big flower is in the jar */
.wilt-meter{display:none;}
#stage.is-wilt .wilt-meter.on{display:inline-flex;vertical-align:middle;align-items:center;gap:6px;margin-left:10px;white-space:nowrap;font-family:'Fraunces',serif;font-style:italic;font-size:11.5px;color:var(--ink-soft);}
.wm-leaf{display:block;width:34px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--accent) 16%,transparent);overflow:hidden;}
.wm-leaf i{display:block;height:100%;border-radius:3px;background:var(--accent);opacity:.7;transition:width .4s ease;}
.wilt-meter.late b{color:#b4662c;}
.wilt-meter.late .wm-leaf i{background:#c98a3c;}
/* fast3/bee: the rare bee visitor. Reuses the sneak-in boost look; a quicker buzz and flapping wings. */
.pbk-bee{--pb-wash:rgba(246,199,68,.5);}
.bv-bee .pb-bob{animation-duration:.9s;}
.bv-bee .bv-wings{transform-origin:19px 20px;animation:bvFlap .09s ease-in-out infinite alternate;}
@keyframes bvFlap{from{transform:scaleY(1);}to{transform:scaleY(.7);}}
@media (prefers-reduced-motion:reduce){.bv-bee .bv-wings{animation:none;}}
/* fast/passives: sneak-in boosts. Painted wash under a small icon; nothing boxy, no shake. */
.pb-layer{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;}
.pb-boost{position:absolute;left:0;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.pb-fly{display:block;width:100%;height:100%;animation:pbFly var(--life,6000ms) cubic-bezier(.3,.7,.3,1) both;}
.pb-boost.paused .pb-fly,.pb-boost.paused .pb-bob{animation-play-state:paused;}
.pb-bob{position:relative;isolation:isolate;display:block;width:100%;height:100%;animation:pbBob 1.7s ease-in-out infinite alternate;}
.pb-bob svg{position:absolute;inset:4px;width:40px;height:40px;filter:drop-shadow(0 2px 2px rgba(90,50,70,.22));}
.pb-wash{position:absolute;inset:-6px;z-index:-1;pointer-events:none;background:var(--pb-wash,var(--wash-accent));opacity:.85;
  -webkit-mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-2.png) center/100% 100% no-repeat;}
.pbk-fert{--pb-wash:rgba(150,200,110,.55);}
.pbk-clover{--pb-wash:rgba(120,200,140,.55);}
.pbk-preview{--pb-wash:rgba(190,150,225,.5);}
.pbk-sun{--pb-wash:rgba(250,205,90,.6);}
@keyframes pbFly{
  0%{transform:translateX(var(--x0));opacity:0;}
  14%{transform:translateX(var(--x1));opacity:1;}
  86%{transform:translateX(var(--x1));opacity:1;}
  100%{transform:translateX(var(--x0));opacity:0;}
}
@keyframes pbBob{from{transform:translateY(-5px) rotate(-5deg);}to{transform:translateY(5px) rotate(5deg);}}

.pb-spark{position:absolute;width:var(--sz,6px);height:var(--sz,6px);margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0 30%,rgba(255,226,140,.95) 60%,rgba(255,200,120,0) 100%);animation:pbSpark .7s ease-out forwards;}
@keyframes pbSpark{from{transform:translate(0,0) scale(1);opacity:1;}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0;}}

/* HUD badges: a quiet row just under the top bar, left side */
.pb-badges{position:absolute;left:16px;top:calc(92px + env(safe-area-inset-top));z-index:6;display:flex;gap:8px;pointer-events:none;}
.pb-badge{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 10px 0 4px;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:13px;color:var(--ink);animation:pbPop .35s cubic-bezier(.2,1.4,.4,1) both;}
.pb-badge::before{content:'';position:absolute;inset:-3px -5px;z-index:-1;background:var(--pb-bw,var(--wash-soft));
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.pb-badge svg{width:22px;height:22px;}
.pb-badge b{font-family:'Fraunces',serif;font-weight:600;font-size:14px;}
.pb-badge em{font-style:normal;opacity:.75;font-size:12px;min-width:8px;}
.pb-b-fert{--pb-bw:rgba(150,200,110,.5);}
.pb-b-clover{--pb-bw:rgba(120,200,140,.5);}
.pb-b-sun{--pb-bw:rgba(250,205,90,.55);}
@keyframes pbPop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Preview: three small flowers beside NEXT, with the drops left */
.pb-preview{display:none;position:absolute;right:16px;top:calc(92px + env(safe-area-inset-top));z-index:6;pointer-events:none;
  align-items:center;gap:6px;padding:2px 8px;isolation:isolate;}
.pb-preview.on{display:flex;animation:pbPop .35s cubic-bezier(.2,1.4,.4,1) both;}
.pb-preview::before{content:'';position:absolute;inset:-3px -6px;z-index:-1;background:rgba(190,150,225,.42);
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.pb-pv-lbl{font-family:'Fraunces',serif;font-style:italic;font-size:12px;color:var(--ink-soft);}
.pb-pv-row{display:inline-flex;align-items:center;gap:2px;}
.pb-pv-row img{width:26px;height:26px;object-fit:contain;}
.pb-pv-row em{font-style:normal;font-family:'Quicksand',sans-serif;font-weight:700;font-size:12px;opacity:.7;margin-left:3px;}

.pb-toast{position:absolute;left:50%;top:calc(120px + env(safe-area-inset-top));z-index:8;pointer-events:none;isolation:isolate;
  padding:6px 18px;font-family:'Quicksand',sans-serif;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;
  opacity:0;transform:translate(-50%,-6px);transition:opacity .3s,transform .3s ease-out;}
.pb-toast::before{content:'';position:absolute;inset:-4px -12px;z-index:-1;background:var(--wash-paper);
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.pb-toast.on{opacity:1;transform:translate(-50%,0);}
@media (prefers-reduced-motion:reduce){.pb-bob,.pb-badge,.pb-preview.on{animation:none;}}
/* Fast Mode: new power-ups (Bee, Rainbow, Undo) and the arc picker. Painted washes, no boxes. */
.pw-ov{position:absolute;left:0;top:0;pointer-events:none;z-index:4;}
.pw-banner,.pw-toast{display:none;}
.pw-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}

/* ---------- bottom band: [power slot] [power slot] [arrow] ........ [Shake!] ----------
   Shake! sits on the right, the two slots on the left. Without new powers it is just Shuffle, Delete, Shake!. */
.action-band{grid-template-columns:66px 66px minmax(0,1fr);gap:12px;}
.action-band .pu-shuffle{grid-column:1;}
.action-band .pu-delete{grid-column:2;}
.action-band .shake-btn{grid-column:3;justify-self:end;max-width:196px;}
.action-band.pw-has{grid-template-columns:66px 66px 30px minmax(0,1fr);gap:7px;}
.action-band.pw-has .shake-btn{grid-column:4;max-width:178px;}
/* slots */
.pu-power{grid-row:1;display:none;}
.pu-power.show{display:flex;}
#pwSlotA{grid-column:1;}
#pwSlotB{grid-column:2;}
.pu-power.blank{visibility:hidden;pointer-events:none;}
.pu-power .pu-ico{color:var(--accent);}
.pu-power.pw-bee .pu-ico{color:#c9961f;}
.pu-power.pw-bee::before{background:color-mix(in srgb,#f6c744 30%,var(--hud-paper));}
.pu-power.pw-rainbow::before{background:linear-gradient(120deg,color-mix(in srgb,#ec7a90 34%,var(--hud-paper)),color-mix(in srgb,#8fc5e8 38%,var(--hud-paper)));}
.pu-power.pw-undo .pu-ico{color:#6a8fb5;}
.pu-power.pw-undo::before{background:color-mix(in srgb,#8fb4d8 30%,var(--hud-paper));}
.pu-power.empty .pu-name{display:inline;opacity:.55;}
.pu-power.empty .pu-ico{opacity:.5;}
.pu-power.armed .pu-name{display:inline;}
/* band layout: classic buttons hide while a power page is showing */
.action-band[data-pg="2"] #puShuffle,.action-band[data-pg="2"] #puDelete,
.action-band[data-pg="3"] #puShuffle,.action-band[data-pg="3"] #puDelete{display:none!important;}
/* arrow: a small painted chevron on a wash, with page dots */
.pw-arrow{display:none;grid-column:3;grid-row:1;position:relative;isolation:isolate;width:30px;height:54px;padding:0;border:0;background:none;
  align-items:center;justify-content:center;color:var(--accent);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out;}
.pw-arrow::before{content:'';position:absolute;inset:6px -2px;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--accent) 22%,var(--hud-paper));
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.pw-arrow::after{content:'';position:absolute;inset:-4px -6px;}
.pw-arrow:active{transform:scale(.9);}
.action-band.pw-has .pw-arrow{display:flex;}
.pw-chev svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block;}
.pw-dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;pointer-events:none;}
.pw-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.28;}
.pw-dots i.on{opacity:.9;}
/* emergency: while the jar-almost-full warning is up, the arrow and slots glow gently */
@keyframes pwGlow{0%,100%{filter:drop-shadow(0 0 3px rgba(232,120,142,.5));}50%{filter:drop-shadow(0 0 10px rgba(232,120,142,.95));}}
.action-band.pw-urgent .pw-arrow,.action-band.pw-urgent .pu-btn.show{animation:pwGlow 2.2s ease-in-out infinite;}

.pw-banner.on{display:flex;position:absolute;left:50%;bottom:calc(132px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:13;align-items:center;gap:14px;
  padding:9px 22px;isolation:isolate;font:italic 500 16px 'Fraunces',serif;color:var(--ink);white-space:nowrap;}
.pw-banner.on::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;pointer-events:none;background:var(--wash-paper,rgba(255,252,247,.85));
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.pw-cancel{font:700 12px 'Quicksand',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:pointer;}
.pw-toast{position:absolute;left:50%;bottom:calc(330px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:14;white-space:nowrap;pointer-events:none;
  padding:6px 18px;isolation:isolate;font:italic 500 15px 'Fraunces',serif;color:var(--ink);opacity:0;transition:opacity .25s;}
.pw-toast.on{display:block;opacity:1;}
.pw-toast::before{content:'';position:absolute;inset:-2px -8px;z-index:-1;background:var(--wash-paper,rgba(255,252,247,.85));
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
@media (prefers-reduced-motion:reduce){.action-band.pw-urgent .pw-arrow,.action-band.pw-urgent .pu-btn.show{animation:none;filter:drop-shadow(0 0 6px rgba(232,120,142,.7));}}
/* Fast Mode: Mini Garden. A small italic tag beside the score; everything else is painted on the canvas. */
.mini-tag{display:none;}
#stage.is-mini .mini-tag{display:block;font-family:'Fraunces',serif;font-style:italic;font-size:13px;line-height:1;
  color:var(--accent);letter-spacing:.04em;margin-bottom:2px;}
/* only reachable flowers show in the bottom strip: tiers 0..MINI_TOP (3) are children 1-4 */
#stage.is-mini .progress-bar .prog-flower:nth-child(n+5){display:none;}
/* Fast Mode: Vines HUD tag and the Garden cleared moment. Painted, quiet; nothing here moves the board. */
.weeds-tag{display:none;}
#stage.is-weeds .weeds-tag{display:block;margin-bottom:3px;min-width:92px;}
#stage.is-weeds #scoreWrap .score-label,
#stage.is-weeds #bestMini{display:none;}
.wd-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.wd-name{font-family:'Fraunces',serif;font-style:italic;font-size:13px;line-height:1;color:var(--accent);letter-spacing:.04em;}
.wd-pips{display:inline-flex;gap:3px;}
.wd-pips b{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink-soft) 28%,transparent);transition:background .25s,transform .25s;}
.wd-pips b.on{background:#5d9e4e;transform:scale(1.15);}
.wd-pips.hot b.on{background:#c9803a;animation:wdPulse 1s ease-in-out infinite;}
.wd-meter{position:relative;height:5px;margin-top:5px;border-radius:3px;background:color-mix(in srgb,var(--ink-soft) 20%,transparent);overflow:hidden;}
.wd-meter i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--wd-p,0) * 100%);border-radius:3px;background:linear-gradient(90deg,#7fb35c,#5d9e4e);transition:width .3s ease-out,background .4s;}
.weeds-tag.danger .wd-meter i{background:linear-gradient(90deg,#d98a4a,#d04a4a);animation:wdPulse 1.1s ease-in-out infinite;}
.weeds-tag.danger .wd-name{color:#c24a4a;}
@keyframes wdPulse{0%,100%{opacity:1;}50%{opacity:.55;}}

/* Garden cleared: a painted wash with a soft title, floats up and fades. Never blocks input, never moves the board. */
.vines-clear{position:absolute;left:0;right:0;top:34%;z-index:30;display:flex;justify-content:center;pointer-events:none;opacity:0;}
.vines-clear.on{animation:vcRise 2.6s ease-out forwards;}
.vc-wash{--wc-inset:-26px -44px;--wc-color:color-mix(in srgb,var(--accent-2) 55%,rgba(255,252,247,.8));text-align:center;padding:14px 26px;}
.vc-title{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:30px;line-height:1.1;color:var(--ink);letter-spacing:.01em;}
.vc-sub{margin-top:6px;font-family:'Quicksand',sans-serif;font-weight:600;font-size:14px;color:var(--ink-soft);}
@keyframes vcRise{0%{opacity:0;transform:translateY(14px) scale(.96);}16%{opacity:1;transform:translateY(0) scale(1);}78%{opacity:1;transform:translateY(-6px);}100%{opacity:0;transform:translateY(-18px);}}
/* Fast Mode: Co-Op (pass and play). Setup sheet, turn banner, scoreboard, ranking.
   Painted washes from the shared kit; --pc is the current player's color. */

/* ---- home: quiet painted option, shown once unlocked ---- */
.coop-start{position:relative;isolation:isolate;align-self:center;display:inline-flex;align-items:center;gap:9px;
  margin:2px auto 0;padding:8px 22px;min-height:40px;border:0;background:none;cursor:pointer;
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:17px;letter-spacing:.01em;color:var(--ink);
  -webkit-tap-highlight-color:transparent;}
.coop-start::before{content:'';position:absolute;inset:-4px -10px;z-index:-1;pointer-events:none;background:var(--wash-soft);opacity:.8;
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;transition:opacity .2s;}
.coop-start:active{transform:scale(.97);}
.cp-dots{display:inline-flex;}
.cp-dots i{width:11px;height:11px;border-radius:50%;margin-left:-3px;opacity:.85;}
.cp-dots i:nth-child(1){background:#e0607e;margin-left:0;}
.cp-dots i:nth-child(2){background:#3f8fd6;}
.cp-dots i:nth-child(3){background:#e8a53a;}

/* ---- setup sheet ---- */
.coop-setup{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 97%,transparent);animation:coopIn .35s cubic-bezier(.2,.8,.2,1) both;}
.coop-setup[hidden]{display:none;}
.coop-card{position:relative;isolation:isolate;width:100%;max-width:340px;margin:auto;text-align:center;padding:10px 4px;}
.coop-card::before{content:'';position:absolute;inset:-30px -34px;z-index:-1;pointer-events:none;background:var(--wash-soft);opacity:.5;
  -webkit-mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-wide.png) center/100% 100% no-repeat;}
.coop-kicker{font-family:'Quicksand',sans-serif;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
.coop-title{font-family:'Fraunces',serif;font-weight:600;font-size:34px;line-height:1.1;color:var(--ink);margin-top:2px;}
.coop-sub{font-family:'Quicksand',sans-serif;font-size:14px;font-weight:600;color:var(--ink-soft);margin:6px auto 0;max-width:260px;}
.coop-count{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 10px;}
.coop-n{font-family:'Fraunces',serif;font-style:italic;font-size:18px;color:var(--ink);min-width:110px;}
.coop-n b{font-weight:600;font-style:normal;font-size:24px;color:var(--accent);}
.coop-step{position:relative;isolation:isolate;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--btn-text);
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:26px;line-height:1;-webkit-tap-highlight-color:transparent;}
.coop-step::before{content:'';position:absolute;inset:-3px;z-index:-1;background:var(--wash-accent);
  -webkit-mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;mask:url(assets/wash/bloom-1.png) center/100% 100% no-repeat;}
.coop-step:active{transform:scale(.92);}
#stage[data-theme="night"] .coop-step{color:var(--ink);}
.coop-names{display:flex;flex-direction:column;gap:7px;margin:4px 0 18px;}
.coop-chip{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 16px;min-height:46px;cursor:text;}
.coop-chip::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--pc) 24%,transparent);
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.coop-dot{width:16px;height:16px;border-radius:50%;background:var(--pc);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 28%,transparent);}
.coop-chip input{flex:1 1 auto;min-width:0;border:0;background:none;outline:0;font-family:'Quicksand',sans-serif;font-weight:700;font-size:17px;color:var(--ink);padding:4px 0;
  border-bottom:1.5px dashed color-mix(in srgb,var(--ink) 22%,transparent);text-align:left;}
.coop-chip input:focus{border-bottom-color:var(--pc);}

/* ---- turn banner + scoreboard: one slim block in the top bar, between the score card and Next.
   Nothing sits over the jar or the held flower, and it never blocks touches. ---- */
.coop-hud{display:none;}
#stage.is-coop .coop-hud{display:flex;position:absolute;z-index:6;pointer-events:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  left:104px;right:108px;top:calc(10px + env(safe-area-inset-top));height:76px;}
.coop-banner{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:7px;max-width:100%;height:26px;}
.coop-banner::before{content:'';position:absolute;left:-10px;right:-10px;top:-4px;bottom:-4px;z-index:-1;
  background:color-mix(in srgb,var(--pc) 30%,transparent);
  -webkit-mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-2.png) center/100% 100% no-repeat;}
.cb-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 30%,transparent);}
.cb-txt{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:16px;color:var(--ink);letter-spacing:.01em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.coop-banner.cb-pop{animation:coopPop .5s cubic-bezier(.25,1.6,.45,1);}
.coop-board{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;max-width:100%;}
.cs-chip{display:flex;align-items:center;gap:3px;padding:1px 5px 1px 2px;border-radius:11px;opacity:.7;transition:opacity .25s,background .25s;}
.cs-chip.cs-on{opacity:1;background:color-mix(in srgb,var(--pc) 20%,transparent);box-shadow:inset 0 -2px 0 var(--pc);}
.cs-dot{flex:0 0 auto;width:15px;height:15px;border-radius:50%;background:var(--pc);color:#fff;display:grid;place-items:center;
  font-family:'Quicksand',sans-serif;font-weight:800;font-size:9px;line-height:1;}
.cs-val{font-family:'Fraunces',serif;font-weight:600;font-size:13px;line-height:16px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;}
.cs-val.cs-tick{animation:coopTick .42s cubic-bezier(.25,1.7,.45,1);}
/* a calmer top bar during pass and play: no Best line, no coin chip (ids stay in the DOM) */
#stage.is-coop #hudCoins{visibility:hidden;}
#stage.is-coop #bestMini{display:none;}

/* ---- game-over ranking ---- */
.over-coop{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px;font-family:'Quicksand',sans-serif;}
.over-coop[hidden]{display:none;}
.oc-k{font-size:var(--fs-micro,11px);letter-spacing:2.2px;text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
.oc-v{font-size:14px;font-weight:600;color:var(--card-ink,var(--ink));}
.oc-rank{list-style:none;margin:2px 0 0;padding:0;width:100%;max-width:260px;display:flex;flex-direction:column;gap:3px;}
.oc-rank li{display:flex;align-items:center;gap:9px;padding:3px 10px;border-radius:12px;background:color-mix(in srgb,var(--pc) 14%,transparent);}
.oc-rank li:first-child{background:color-mix(in srgb,var(--pc) 28%,transparent);}
.oc-pos{width:14px;font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--ink-soft);text-align:center;}
.oc-dot{width:10px;height:10px;border-radius:50%;background:var(--pc);flex:0 0 auto;}
.oc-name{flex:1 1 auto;min-width:0;text-align:left;font-weight:700;font-size:15px;color:var(--card-ink,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.oc-pts{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--card-ink,var(--ink));font-variant-numeric:lining-nums tabular-nums;}

@keyframes coopIn{from{opacity:0;}to{opacity:1;}}
@keyframes coopPop{0%{transform:scale(.9);opacity:.4;}100%{transform:none;opacity:1;}}
@keyframes coopTick{0%{transform:scale(1);}35%{transform:scale(1.2);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.coop-setup,.coop-banner.cb-pop,.cs-val.cs-tick{animation:none;}}
/* Fast Mode: game mode picker. A paper sheet rising from the bottom, painted washes behind the
   icons, the last-picked mode first with a soft brush stroke. No boxes, no chunky buttons. */
.mp{position:absolute;inset:0;z-index:70;pointer-events:none;visibility:hidden;}
.mp.on{pointer-events:auto;visibility:visible;}
.mp-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 30%,transparent);opacity:0;transition:opacity .28s;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.mp.on .mp-scrim{opacity:1;}
.mp-sheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--paper);color:var(--ink);border-radius:28px 28px 0 0;text-align:center;
  padding:12px 22px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px color-mix(in srgb,var(--ink) 26%,transparent);
  transform:translateY(105%);transition:transform .36s cubic-bezier(.2,.8,.2,1);}
.mp.on .mp-sheet{transform:none;}
.mp-grab{width:38px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,transparent);margin:0 auto 12px;}
.mp-kicker{font-family:'Quicksand',sans-serif;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
.mp-title{font-family:'Fraunces',serif;font-weight:600;font-size:28px;line-height:1.15;color:var(--ink);margin:4px 0 16px;}
.mp-list{display:flex;flex-direction:column;gap:6px;text-align:left;max-width:340px;margin:0 auto;}
.mp-row{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;width:100%;padding:12px 14px;min-height:64px;border:0;background:none;
  cursor:pointer;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent;font:inherit;}
.mp-row:active{transform:scale(.985);}
.mp-first::before{content:'';position:absolute;inset:-2px -8px;z-index:-1;pointer-events:none;background:var(--wash-soft);opacity:.85;
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.mp-ico{position:relative;isolation:isolate;flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;color:var(--btn-text);}
.mp-ico::before{content:'';position:absolute;inset:-5px;z-index:-1;background:var(--wash-accent);
  -webkit-mask:var(--mpw,url(assets/wash/bloom-1.png)) center/100% 100% no-repeat;mask:var(--mpw,url(assets/wash/bloom-1.png)) center/100% 100% no-repeat;}
.mp-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
#stage[data-theme="night"] .mp-ico{color:var(--ink);}
.mp-txt{display:flex;flex-direction:column;min-width:0;}
.mp-name{font-family:'Fraunces',serif;font-weight:600;font-size:21px;line-height:1.2;}
.mp-first .mp-name{font-size:23px;}
.mp-cancel{margin:12px auto 0;padding:10px 18px;border:0;background:none;cursor:pointer;font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:16px;color:var(--ink-soft);-webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion:reduce){.mp-sheet,.mp-scrim{transition:none;}}
/* fast4: Jar sort demo. Tag under the score; jars, labels and hint are painted on the canvas. */
.js-tag{display:none;}
#stage.is-jarsort .js-tag{display:block;font-family:'Fraunces',serif;font-style:italic;font-size:13px;line-height:1;
  color:var(--accent);letter-spacing:.04em;margin-bottom:2px;}
/* Merge is the one obvious action: no shuffle, delete or power carousel, no progress strip */
#stage.is-jarsort .pu-btn,
#stage.is-jarsort .pw-arrow,
#stage.is-jarsort .pw-banner,
#stage.is-jarsort #progressBar{display:none !important;}
#stage.is-jarsort .hint{display:none;}
/* Fast Mode TEST: Vines (vertical test) HUD tag. Same quiet painted look as the Vines tag. */
.v2-tag{display:none;}
#stage.is-vines2 .v2-tag{display:block;margin-bottom:3px;min-width:92px;}
#stage.is-vines2 #scoreWrap .score-label,
#stage.is-vines2 #bestMini{display:none;}
.v2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.v2-name{font-family:'Fraunces',serif;font-style:italic;font-size:13px;line-height:1;color:var(--accent);letter-spacing:.04em;}
.v2-pips{display:inline-flex;gap:3px;}
.v2-pips b{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink-soft) 28%,transparent);transition:background .25s,transform .25s;}
.v2-pips b.on{background:#5d9e4e;transform:scale(1.15);}
.v2-pips.hot b.on{background:#c9803a;}
.v2-meter{position:relative;height:5px;margin-top:5px;border-radius:3px;background:color-mix(in srgb,var(--ink-soft) 20%,transparent);overflow:hidden;}
.v2-meter i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v2-p,0) * 100%);border-radius:3px;background:linear-gradient(90deg,#7fb35c,#5d9e4e);transition:width .3s ease-out,background .4s;}
.v2-tag.danger .v2-meter i{background:linear-gradient(90deg,#d98a4a,#d04a4a);}
.v2-tag.danger .v2-name{color:#c24a4a;}
/* fast5: the Lucas ad (taped polaroid + speech bubble) and the Mini Garden tutorial. Painted washes, no boxes. */

/* ---------- the ad: top left, just under the HUD ---------- */
.ad-banner{position:absolute;left:12px;right:12px;top:calc(98px + env(safe-area-inset-top));z-index:7;pointer-events:none;
  display:flex;align-items:flex-start;gap:12px;transition:opacity .28s ease;}
.ad-banner.hidden{display:none;}
.ad-banner.quiet{opacity:.14;}
.ad-polaroid{position:relative;flex:0 0 auto;width:100px;padding:6px 6px 22px;border:0;border-radius:3px;background:#fffdf8;cursor:default;
  box-shadow:0 6px 14px rgba(70,40,50,.22),0 1px 2px rgba(70,40,50,.2);transform:rotate(-4deg);transform-origin:50% 0;pointer-events:none;
  -webkit-tap-highlight-color:transparent;opacity:0;}
.ad-photo{display:block;width:88px;height:88px;overflow:hidden;background:linear-gradient(160deg,#cfe6f8,#f4e3ea);}
.ad-avatar{display:block;width:100%;height:100%;object-fit:cover;}
.ad-tape{position:absolute;width:44px;height:16px;opacity:0;pointer-events:none;
  background:color-mix(in srgb,var(--accent) 34%,rgba(255,250,240,.82));box-shadow:0 1px 2px rgba(70,40,50,.16);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 3px,#000 calc(100% - 3px),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 3px,#000 calc(100% - 3px),transparent 100%);
  clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,100% 0,100% 100%,18% 100%,12% 90%,6% 100%,0 92%);}
.ad-tape.t1{left:-14px;top:-4px;transform:rotate(-38deg);}
.ad-tape.t2{right:-14px;top:-4px;transform:rotate(38deg);}
.ad-tap{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);font-family:'Fraunces',serif;font-style:italic;font-size:11px;line-height:14px;color:var(--accent);opacity:0;}
.ad-banner.in .ad-polaroid{animation:adSlide .6s cubic-bezier(.2,1.1,.3,1) both;}
.ad-banner.tape1 .ad-tape.t1{animation:tapeSlap .3s cubic-bezier(.2,1.6,.4,1) both;}
.ad-banner.tape2 .ad-tape.t2{animation:tapeSlap2 .3s cubic-bezier(.2,1.6,.4,1) both;}
.ad-banner.done .ad-polaroid{pointer-events:auto;cursor:pointer;animation:adPulse 1.2s ease-in-out infinite;opacity:1;}
.ad-banner.quiet .ad-polaroid{pointer-events:none;}
.ad-banner.done .ad-tap{opacity:.85;}
.ad-banner.out .ad-polaroid{opacity:1;animation:adFlip .6s cubic-bezier(.5,0,.8,.4) both;}
.ad-banner.out .ad-tape{animation:tapePeel .26s ease-in forwards;}
.ad-banner.out .ad-bubble{opacity:0;transition:opacity .25s ease;}
@keyframes adSlide{0%{transform:translateY(-130px) rotate(8deg);opacity:1;}60%{transform:translateY(6px) rotate(-6deg);opacity:1;}100%{transform:translateY(0) rotate(-4deg);opacity:1;}}
@keyframes tapeSlap{0%{opacity:0;transform:translate(-14px,-14px) rotate(-38deg) scale(1.5);}60%{opacity:1;transform:translate(0,0) rotate(-38deg) scale(.92);}100%{opacity:1;transform:rotate(-38deg) scale(1);}}
@keyframes tapeSlap2{0%{opacity:0;transform:translate(14px,-14px) rotate(38deg) scale(1.5);}60%{opacity:1;transform:translate(0,0) rotate(38deg) scale(.92);}100%{opacity:1;transform:rotate(38deg) scale(1);}}
@keyframes adPulse{0%,100%{transform:rotate(-4deg) scale(1);box-shadow:0 6px 14px rgba(70,40,50,.22),0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent);}
  50%{transform:rotate(-4deg) scale(1.04);box-shadow:0 8px 16px rgba(70,40,50,.24),0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent);}}
@keyframes tapePeel{0%{opacity:1;}100%{opacity:0;transform:translateY(-10px) rotate(-70deg);}}
@keyframes adFlip{0%{transform:translateY(0) rotate(-4deg) rotateY(0);opacity:1;}25%{transform:translateY(6px) rotate(-4deg) rotateY(0);}100%{transform:translateY(-190px) rotate(20deg) rotateY(540deg);opacity:0;}}

/* the speech bubble: a painted wash with a little tail toward him */
.ad-bubble{position:relative;flex:1 1 auto;min-width:0;margin-top:8px;padding:9px 40px 10px 14px;min-height:58px;isolation:isolate;opacity:0;transform:translateX(-6px);}
.ad-bubble::before{content:"";position:absolute;inset:-6px -6px;z-index:-1;background:var(--wash-paper);
  -webkit-mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-1.png) center/100% 100% no-repeat;mask:url(assets/wash/stroke-1.png) center/100% 100% no-repeat,url(assets/wash/stroke-1.png) center/100% 100% no-repeat;}
.ad-bubble::after{content:"";position:absolute;left:-10px;top:16px;width:14px;height:14px;z-index:-1;background:var(--wash-paper);clip-path:polygon(0 50%,100% 0,100% 100%);}
.ad-banner.say .ad-bubble,.ad-banner.done .ad-bubble{opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease;}
.ad-kicker{display:flex;align-items:baseline;gap:6px;font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:11.5px;line-height:14px;color:var(--accent);white-space:nowrap;}
#adKicker{overflow:hidden;text-overflow:ellipsis;}
.ad-tag{flex:0 0 auto;font-family:'Quicksand',sans-serif;font-style:normal;font-weight:700;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);opacity:.8;}
.ad-msg{margin-top:3px;font-family:'Quicksand',sans-serif;font-weight:600;font-size:13px;line-height:17px;color:var(--ink);min-height:51px;}
.ad-line{display:block;}
.ad-logo{position:absolute;right:10px;top:10px;height:22px;width:auto;max-width:28px;object-fit:contain;opacity:.9;}
#stage[data-theme="night"] .ad-logo{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);}
#stage[data-theme="lucas"] .ad-tape{background:rgba(205,66,54,.4);}
@media (prefers-reduced-motion: reduce){
  .ad-banner.in .ad-polaroid{animation-duration:.2s;}
  .ad-banner.done .ad-polaroid{animation:none;}
  .ad-banner.out .ad-polaroid{animation-duration:.25s;}
}

/* ---------- Mini Garden tutorial ---------- */
.js-tut{position:absolute;inset:0;z-index:12;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.js-tut-card{position:absolute;width:236px;padding:12px 18px 12px;text-align:center;transform:translate(-50%,calc(-100% - 12px));isolation:isolate;opacity:0;}
.js-tut-card.in{animation:jtIn .4s cubic-bezier(.2,1.3,.4,1) both;}
.js-tut-card::before{content:"";position:absolute;inset:-16px -22px;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--wash-paper) 0,var(--wash-paper) 52%,transparent 74%);filter:blur(2px);}
.js-tut-card::after{content:"";position:absolute;left:50%;bottom:-24px;width:18px;height:18px;margin-left:-9px;z-index:-1;background:var(--wash-paper);opacity:.95;clip-path:polygon(0 0,100% 0,50% 100%);}
.js-tut.pt2 .js-tut-card::after,.js-tut.pt3 .js-tut-card::after{bottom:-20px;}
.jt-step{font-family:'Quicksand',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);}
.jt-text{margin-top:3px;font-family:'Fraunces',serif;font-weight:500;font-size:16px;line-height:20px;color:var(--ink);}
.jt-go{margin-top:6px;font-family:'Fraunces',serif;font-style:italic;font-size:12px;color:var(--accent);}
@keyframes jtIn{0%{opacity:0;transform:translate(-50%,calc(-100% - 2px)) scale(.9);}100%{opacity:1;transform:translate(-50%,calc(-100% - 12px));}}
/* the ghost finger drags a ghost flower from one jar to the next, on a loop */
.js-tut-ghost{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;}
.js-tut-ghost img{position:absolute;left:-17px;top:-17px;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(60,40,50,.3));}
.jt-finger{position:absolute;left:2px;top:6px;width:34px;height:34px;fill:#fff;stroke:rgba(70,40,50,.55);stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(60,40,50,.3));}
.js-tut-ghost.on{opacity:1;animation:jtDrag 2.6s ease-in-out .3s infinite;}
@keyframes jtDrag{
  0%{transform:translate(var(--x0),var(--y0)) scale(1);opacity:0;}
  10%{transform:translate(var(--x0),var(--y0)) scale(1);opacity:1;}
  20%{transform:translate(var(--x0),var(--y0)) scale(.92);}
  70%{transform:translate(var(--x1),var(--y1)) scale(.92);opacity:1;}
  80%{transform:translate(var(--x1),var(--y1)) scale(1);opacity:1;}
  100%{transform:translate(var(--x1),var(--y1)) scale(1);opacity:0;}}
@media (prefers-reduced-motion: reduce){ .js-tut-ghost.on{animation:none;transform:translate(var(--x0),var(--y0));} }
/* Vine tangle demo: the one-line hint near the top of the stage, fades after a few seconds. */
.v2-hint{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 74px);z-index:25;text-align:center;pointer-events:none;opacity:0;transition:opacity .6s;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--ink-soft);}
.v2-hint.on{opacity:.9;}