/* =============================================================================
   Paint by Numbers — the look.
   One design language for the whole app: candy-pastel surfaces, chunky toy
   buttons with a hard bottom edge, sticker-white outlines, and a springy pop
   on everything a small finger touches. Every size, colour, radius and shadow
   comes from the tokens below — change a token, the whole app follows.
   ========================================================================== */

:root{
  /* ---- ink & surfaces ---- */
  --ink:#5e4a6b;                 /* soft plum text                      */
  --ink-soft:#8d7a9b;            /* secondary text                      */
  --card:#fffdff;
  --card-2:#f7f0fd;
  --line:#ece2f6;

  /* ---- the candy five ---- */
  --pink:#ff8fc0;
  --rose:#f0619b;
  --grape:#a97ce0;
  --mint:#6fe0bd;
  --sun:#ffd166;
  --sky:#7fc9f5;

  /* ---- page background ---- */
  --bg1:#fdf1fb;
  --bg2:#efe6fb;
  --bg3:#e6f2fd;

  /* ---- shape ---- */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* ---- depth: a soft ambient shadow + the toy "edge" under buttons ---- */
  --sh-1:0 2px 0 rgba(94,74,107,.10), 0 6px 16px rgba(94,74,107,.10);
  --sh-2:0 4px 0 rgba(94,74,107,.12), 0 14px 30px rgba(94,74,107,.16);
  --sh-3:0 18px 50px rgba(78,63,90,.34);
  --edge:0 5px 0;                /* pair with a darker colour            */

  /* ---- motion ---- */
  --pop:cubic-bezier(.2,1.4,.4,1);
  --tap:.12s cubic-bezier(.2,1.4,.4,1);

  /* ---- layout ---- */
  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:"Baloo 2","Comic Sans MS","Segoe UI Rounded","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg2);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

/* ---------------------------------------------------------------------------
   the sky: three slow drifting colour clouds behind everything. Pure CSS, so
   it costs nothing per frame and still makes the app feel alive on the shelf.
   ------------------------------------------------------------------------ */
#sky{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:linear-gradient(165deg,var(--bg1),var(--bg2) 55%,var(--bg3));
}
#sky .cloud{
  position:absolute; border-radius:50%; filter:blur(46px); opacity:.55;
  will-change:transform;
}
#sky .c1{ width:58vmin; height:58vmin; left:-12vmin; top:-10vmin;
  background:radial-gradient(circle,#ffc7e6,#ffc7e600 70%); animation:drift1 26s ease-in-out infinite; }
#sky .c2{ width:66vmin; height:66vmin; right:-16vmin; top:18%;
  background:radial-gradient(circle,#bfe0ff,#bfe0ff00 70%); animation:drift2 32s ease-in-out infinite; }
#sky .c3{ width:52vmin; height:52vmin; left:20%; bottom:-16vmin;
  background:radial-gradient(circle,#d5ffe9,#d5ffe900 70%); animation:drift3 29s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1) }   50%{ transform:translate(8vmin,6vmin) scale(1.15) } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1.1) } 50%{ transform:translate(-9vmin,8vmin) scale(1) } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1) }   50%{ transform:translate(6vmin,-7vmin) scale(1.2) } }

#app{ position:fixed; inset:0; display:flex; flex-direction:column; z-index:1; }

/* ---------------------------------------------------------------------------
   header — a floating glass bar so the picture is the only solid thing
   ------------------------------------------------------------------------ */
header{
  display:flex; align-items:center; gap:8px;
  padding:calc(var(--safe-t) + 8px) 12px 4px;
  flex:0 0 auto;
}
.brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.brand .drop{
  font-size:26px; line-height:1; display:block;
  animation:wobble 3.6s ease-in-out infinite; transform-origin:60% 90%;
  filter:drop-shadow(0 2px 3px rgba(94,74,107,.25));
}
@keyframes wobble{ 0%,100%{ transform:rotate(-9deg) } 50%{ transform:rotate(9deg) } }
header h1{
  margin:0; font-weight:800; letter-spacing:.4px;
  font-size:clamp(17px,4.2vw,26px); white-space:nowrap;
  background:linear-gradient(100deg,var(--rose),var(--grape) 35%,var(--sky) 65%,var(--mint));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hueslide 9s linear infinite;
}
@keyframes hueslide{ to{ background-position:220% 0 } }
header .spacer{ flex:1 1 auto; }

/* the star jar — every minigame win drops one in */
.stars{
  display:flex; align-items:center; gap:5px; font-weight:800; font-size:15px;
  background:linear-gradient(180deg,#fff,#fdf4ff);
  border:2px solid #fff; box-shadow:var(--sh-1);
  border-radius:var(--r-pill); padding:5px 12px 5px 9px; color:#b07fd8;
}
.stars .s{ font-size:16px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.stars.bump{ animation:starbump .5s var(--pop); }
@keyframes starbump{ 0%{ transform:scale(1) } 40%{ transform:scale(1.3) rotate(-6deg) } 100%{ transform:scale(1) } }

.iconbtn{
  border:none; background:linear-gradient(180deg,#fff,#f6eefc); color:var(--ink);
  width:44px; height:44px; border-radius:var(--r-sm); font-size:21px;
  box-shadow:var(--edge) rgba(157,133,180,.35), var(--sh-1); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:transform var(--tap), box-shadow var(--tap);
}
.iconbtn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(157,133,180,.35); }

/* ---------------------------------------------------------------------------
   progress — a rainbow river with a star surfing the leading edge
   ------------------------------------------------------------------------ */
#progress{ display:flex; align-items:center; gap:10px; padding:2px 16px 4px; flex:0 0 auto; }
#progressBar{
  position:relative; flex:1 1 auto; height:16px; border-radius:var(--r-pill);
  background:#ffffffb0; box-shadow:inset 0 2px 4px rgba(110,90,121,.16), 0 1px 0 #fff;
  overflow:visible;
}
#progressTrack{ position:absolute; inset:0; border-radius:var(--r-pill); overflow:hidden; }
#progressFill{
  position:relative; overflow:hidden;
  height:100%; width:0%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--sun),var(--pink) 40%,var(--grape) 70%,var(--mint));
  background-size:200% 100%;
  transition:width .3s var(--pop);
  animation:hueslide 5s linear infinite;
}
/* a light streak that keeps sliding along the filled part */
#progressFill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,#fff0 40%,#ffffffcc 50%,#fff0 60%);
  background-size:220% 100%; animation:sheen 2.4s linear infinite; border-radius:var(--r-pill);
}
@keyframes sheen{ from{ background-position:-120% 0 } to{ background-position:220% 0 } }
#progressStar{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%); font-size:19px;
  transition:left .3s var(--pop); filter:drop-shadow(0 2px 2px rgba(94,74,107,.3));
  pointer-events:none;
}
#progressPct{ font-weight:800; min-width:46px; text-align:right; font-size:15px; color:var(--ink-soft); }

/* ---------------------------------------------------------------------------
   the picture
   ------------------------------------------------------------------------ */
#stage{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:6px 10px; min-height:0; position:relative; }
#boardWrap{ position:relative; border-radius:var(--r-lg); }
#board{
  touch-action:none; display:block; border-radius:var(--r-lg);
  background:#fff; box-shadow:0 10px 30px rgba(110,90,121,.22), 0 0 0 4px #fff;
}
/* the frame glows in the colour being painted */
#boardWrap::after{
  content:''; position:absolute; inset:-6px; border-radius:calc(var(--r-lg) + 6px);
  box-shadow:0 0 0 3px var(--glowcol,#fff0), 0 0 26px 4px var(--glowcol,#fff0);
  opacity:.0; transition:opacity .4s ease; pointer-events:none;
}
#boardWrap.lit::after{ opacity:.85; }

/* ---------------------------------------------------------------------------
   palette — big glossy buttons; the shiny colours actually shimmer
   ------------------------------------------------------------------------ */
#palette{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:6px 12px calc(var(--safe-b) + 10px);
}
.swatch{
  position:relative; border:none; cursor:pointer; padding:0; background:transparent;
  width:54px; height:62px; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  transition:transform var(--tap);
}
.swatch .chip{
  position:relative; overflow:hidden;
  width:48px; height:48px; border-radius:16px;
  box-shadow:var(--edge) rgba(94,74,107,.22), inset 0 0 0 3px #ffffffd9;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px; line-height:1;
}
/* glass highlight across the top of every chip */
.swatch .chip::before{
  content:''; position:absolute; left:0; right:0; top:0; height:46%;
  background:linear-gradient(180deg,#ffffff8c,#ffffff00);
  border-radius:16px 16px 40% 40%; pointer-events:none;
}
.swatch .num{ position:relative; z-index:2; text-shadow:0 1px 1px rgba(0,0,0,.12); }
.swatch.sel{ transform:translateY(-9px) scale(1.07); animation:bob 1.6s ease-in-out infinite .2s; }
@keyframes bob{ 0%,100%{ margin-top:0 } 50%{ margin-top:-4px } }
.swatch.sel .chip{
  box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--rose), var(--edge) rgba(94,74,107,.22), inset 0 0 0 3px #ffffffd9;
}
.swatch .done{
  position:absolute; top:-3px; right:-2px; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(180deg,#8fe7bb,#5fcf9b); color:#fff; font-size:15px; font-weight:800;
  display:none; align-items:center; justify-content:center; z-index:3;
  box-shadow:0 2px 5px rgba(0,0,0,.18), inset 0 0 0 2px #ffffffcc;
}
.swatch.complete .done{ display:flex; animation:pop .35s var(--pop); }
.swatch.complete .chip{ opacity:.42; }
.swatch.complete{ animation:none; }

/* the five shiny finishes, as a sheen layer inside the chip */
.swatch .sheen{ position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:16px; }
.swatch.fx .chip{ box-shadow:var(--edge) rgba(94,74,107,.22), inset 0 0 0 3px #fff, 0 0 12px var(--fxglow,#fff0); }
.swatch.fx .spark{
  position:absolute; top:-6px; left:-5px; font-size:15px; z-index:3;
  animation:twinkle 1.7s ease-in-out infinite; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
@keyframes twinkle{ 0%,100%{ transform:scale(.7) rotate(-12deg); opacity:.65 } 50%{ transform:scale(1.15) rotate(12deg); opacity:1 } }

.fx-gold .sheen{ background:linear-gradient(112deg,#fff0 30%,#fff9d9cc 45%,#ffffffee 50%,#ffe9a8cc 56%,#fff0 72%);
  background-size:260% 100%; animation:sheen 2.2s linear infinite; }
.fx-gold{ --fxglow:#ffd98a99; }
.fx-gem .sheen{ background:
    linear-gradient(60deg,#fff0 42%,#ffffffcc 50%,#fff0 58%),
    linear-gradient(-55deg,#fff0 40%,#ffffff99 50%,#fff0 60%);
  background-size:200% 100%,200% 100%; animation:sheen 1.9s linear infinite, sheen 3.1s linear infinite reverse; }
.fx-gem{ --fxglow:#bff3ffaa; }
.fx-aqua .sheen{ background:
    radial-gradient(120% 60% at 20% 120%,#ffffffb0,#fff0 60%),
    linear-gradient(100deg,#fff0 35%,#eaffffcc 50%,#fff0 65%);
  background-size:100% 100%,240% 100%; animation:sheen 2.8s linear infinite; }
.fx-aqua{ --fxglow:#9fe8ffaa; }
.fx-glow .sheen{ background:radial-gradient(circle at 50% 55%,#ffffffcc,#ffffff22 45%,#fff0 72%); animation:breathe 1.9s ease-in-out infinite; }
.fx-glow{ --fxglow:#ffd6f5cc; }
@keyframes breathe{ 0%,100%{ opacity:.35; transform:scale(.9) } 50%{ opacity:1; transform:scale(1.12) } }
.fx-iris .sheen{
  background:linear-gradient(100deg,#ff9ecb99,#ffd9669e 20%,#8ff0c69e 40%,#8fd3f49e 60%,#c9a9e89e 80%,#ff9ecb99);
  background-size:300% 100%; animation:hueslide 3.4s linear infinite; mix-blend-mode:screen; opacity:.85;
}
.fx-iris{ --fxglow:#e0b8ffaa; }

/* ---------------------------------------------------------------------------
   overlays & panels
   ------------------------------------------------------------------------ */
.overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(70,55,84,.40); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  z-index:20; padding:18px;
}
.overlay.show{ display:flex; animation:fadein .2s ease both; }
@keyframes fadein{ from{ opacity:0 } to{ opacity:1 } }
.panel{
  position:relative; background:linear-gradient(180deg,var(--card),var(--card-2));
  border-radius:var(--r-xl); padding:26px 22px 24px; text-align:center;
  max-width:560px; width:100%; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:var(--sh-3), inset 0 0 0 3px #fff;
  animation:pop .38s var(--pop) both;
}
@keyframes pop{ from{ transform:scale(.86) translateY(10px); opacity:0 } to{ transform:scale(1) translateY(0); opacity:1 } }
/* candy ribbon along the top edge of every panel — the one motif that ties
   the gallery, the win screen and the minigames together */
.panel::before{
  content:''; position:absolute; left:0; right:0; top:0; height:8px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,var(--sun),var(--pink) 30%,var(--grape) 55%,var(--sky) 78%,var(--mint));
  background-size:200% 100%; animation:hueslide 6s linear infinite;
}
.panel h2{ margin:.1em 0 .05em; font-size:clamp(23px,5.6vw,32px); font-weight:800; }
.panel p{ margin:.2em 0 1em; color:var(--ink-soft); font-size:16px; }
.subtitle{ color:var(--ink-soft); font-weight:700; font-size:15px; margin:0 0 14px; }

.bigbtn{
  border:none; cursor:pointer; font-family:inherit; font-weight:800;
  font-size:20px; color:#fff; padding:14px 26px; border-radius:var(--r); margin:6px 5px;
  background:linear-gradient(180deg,#ff9ecb,#f36ea8);
  box-shadow:var(--edge) #d94e8b, 0 10px 18px rgba(217,78,139,.28);
  position:relative; overflow:hidden;
  transition:transform var(--tap), box-shadow var(--tap);
}
.bigbtn::after{                     /* slow gloss sweep so buttons look alive */
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,#fff0 40%,#ffffff4d 50%,#fff0 60%);
  background-size:250% 100%; animation:sheen 3.4s linear infinite;
}
.bigbtn:active{ transform:translateY(4px); box-shadow:0 1px 0 #d94e8b; }
.bigbtn.ghost{ background:linear-gradient(180deg,#f2eafc,#ddd0f0); color:var(--ink);
  box-shadow:var(--edge) #b9a9cf, 0 8px 14px rgba(157,133,180,.20); }
.bigbtn.ghost:active{ box-shadow:0 1px 0 #b9a9cf; }
.bigbtn.play{ background:linear-gradient(180deg,#8ce9c6,#4fd3a5); box-shadow:var(--edge) #2fae84, 0 10px 18px rgba(47,174,132,.28); }
.bigbtn.play:active{ box-shadow:0 1px 0 #2fae84; }
.bigbtn.wiggle{ animation:nudge 2.6s ease-in-out infinite; }
@keyframes nudge{ 0%,88%,100%{ transform:rotate(0) } 92%{ transform:rotate(-2.5deg) scale(1.03) } 96%{ transform:rotate(2.5deg) scale(1.03) } }

/* ---------------------------------------------------------------------------
   gallery
   ------------------------------------------------------------------------ */
#galleryGrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:11px; margin-top:10px;
}
/* the picker is the front door — a bright veil, not the dark scrim the other
   overlays use, so the app opens looking like candy instead of a dialog */
#gallery{ background:rgba(233,222,246,.55); }
#gallery .panel{ max-width:620px; }
.pick{
  position:relative; border:none; cursor:pointer;
  background:linear-gradient(180deg,#fff,#f4ecfb);
  border-radius:var(--r); padding:8px 6px 6px; display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:var(--edge) rgba(94,74,107,.14), var(--sh-1);
  transition:transform var(--tap), box-shadow var(--tap);
  overflow:hidden;
}
.pick:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(94,74,107,.14); }
.pick canvas{ image-rendering:pixelated; width:82px; height:82px; border-radius:var(--r-sm); background:#eae2f6; }
.pick .plabel{ font-weight:800; font-size:13.5px; color:var(--ink); }
/* a shine sweeps across the cards, one after another */
.pick::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,#fff0 42%,#ffffff8c 50%,#fff0 58%);
  background-size:260% 100%; background-position:-140% 0;
  animation:sheen 5.5s linear infinite; animation-delay:var(--d,0s);
}
.pick.done{ background:linear-gradient(180deg,#fffdf2,#fdf0d8); }
.pick .star{
  position:absolute; top:3px; right:5px; font-size:19px; display:none; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); animation:twinkle 2.4s ease-in-out infinite;
}
.pick.done .star{ display:block; }
/* the shiny-colour tell: a tiny ✨ badge so she can spot the sparkly pictures */
.pick .fxdot{ position:absolute; top:4px; left:6px; font-size:13px; z-index:2; opacity:.9;
  animation:twinkle 2s ease-in-out infinite; }

/* the games shelf inside the gallery */
.shelf{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:4px 0 8px; }
.gamebtn{
  border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:13px; color:var(--ink);
  background:linear-gradient(180deg,#fff,#f2e9fb); border-radius:var(--r-sm);
  padding:8px 12px 7px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:84px;
  box-shadow:var(--edge) rgba(94,74,107,.14), var(--sh-1);
  transition:transform var(--tap), box-shadow var(--tap);
}
.gamebtn .ge{ font-size:24px; line-height:1; }
.gamebtn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(94,74,107,.14); }
.shelfTitle{ font-weight:800; font-size:14px; color:var(--ink-soft); margin:14px 0 2px; }

/* ---------------------------------------------------------------------------
   grown-ups-only bits
   ------------------------------------------------------------------------ */
.supportLink{
  margin-top:16px; border:none; background:transparent; cursor:pointer;
  color:#b79ecf; font-family:inherit; font-weight:700; font-size:14px;
  text-decoration:underline; text-underline-offset:3px;
}
.supportLink:active{ color:#8f76b0; }
#gateInput{
  font-family:inherit; font-size:26px; font-weight:800; text-align:center;
  width:130px; padding:10px; border-radius:var(--r-sm); border:3px solid var(--line);
  color:var(--ink); outline:none; user-select:auto; -webkit-user-select:auto;
}
#gateInput:focus{ border-color:var(--pink); }
#gateErr{ color:var(--rose); font-weight:700; min-height:1.2em; margin:.4em 0 0; }

/* ---------------------------------------------------------------------------
   the win screen — the biggest moment in the app, so it gets the most paint
   ------------------------------------------------------------------------ */
#win .panel{ background:linear-gradient(180deg,#fffdff,#fdf1fb); }
.trophy{ font-size:56px; line-height:1; animation:trophyIn .8s var(--pop) both, wobble 3s ease-in-out 1s infinite; }
@keyframes trophyIn{ from{ transform:scale(0) rotate(-40deg) } to{ transform:scale(1) rotate(0) } }
.reward{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:#b07fd8;
  background:linear-gradient(180deg,#fff,#faf1ff); border:2px solid #fff;
  border-radius:var(--r-pill); padding:7px 16px; margin:2px 0 10px; box-shadow:var(--sh-1);
  animation:pop .5s var(--pop) .3s both;
}

/* ---------------------------------------------------------------------------
   minigames
   ------------------------------------------------------------------------ */
#minigame .panel{ max-width:600px; padding:20px 16px 18px; }
.mgHead{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.mgHead h2{ flex:1 1 auto; margin:0; font-size:clamp(19px,4.6vw,26px); }
.mgClose{
  border:none; background:linear-gradient(180deg,#fff,#f1e8fa); color:var(--ink-soft);
  width:36px; height:36px; border-radius:var(--r-sm); font-size:17px; font-weight:800; cursor:pointer;
  box-shadow:var(--edge) rgba(94,74,107,.14); flex:0 0 auto;
}
.mgClose:active{ transform:translateY(3px); box-shadow:none; }
#mgCanvas{
  display:block; width:100%; border-radius:var(--r-lg); touch-action:none;
  background:#f3ecfb; box-shadow:inset 0 0 0 3px #fff, 0 6px 18px rgba(94,74,107,.18);
}
#mgHint{ font-weight:800; color:var(--ink-soft); font-size:15px; margin-top:10px; min-height:1.3em; }
.mgMeter{
  height:14px; border-radius:var(--r-pill); background:#ffffffb8; margin:10px 4px 0;
  box-shadow:inset 0 2px 4px rgba(110,90,121,.16); overflow:hidden;
}
.mgMeter i{
  display:block; height:100%; width:0%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--mint),var(--sun),var(--pink));
  background-size:200% 100%; animation:hueslide 3s linear infinite; transition:width .18s ease-out;
}

/* the big centred shout ("YOU WIN!", "GLITTER TIME!") */
#shout{
  position:fixed; left:0; right:0; top:34%; z-index:40; pointer-events:none;
  text-align:center; font-weight:800; font-size:clamp(34px,11vw,74px); letter-spacing:1px;
  color:#fff; opacity:0;
  text-shadow:0 4px 0 #e070ae, 0 8px 0 #b95cd8, 0 14px 26px rgba(80,40,110,.45);
}
#shout.go{ animation:shout 1.5s var(--pop) both; }
@keyframes shout{
  0%{ opacity:0; transform:scale(.3) rotate(-8deg) }
  22%{ opacity:1; transform:scale(1.12) rotate(2deg) }
  36%{ transform:scale(1) rotate(0) }
  78%{ opacity:1; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.25) translateY(-30px) }
}

/* a little toast for "Shiny colour finished!" style news */
#toast{
  position:fixed; left:50%; top:calc(var(--safe-t) + 62px); transform:translateX(-50%) translateY(-20px);
  z-index:35; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,#fff,#fdf2ff); color:var(--ink);
  font-weight:800; font-size:15px; padding:10px 18px; border-radius:var(--r-pill);
  border:2px solid #fff; box-shadow:var(--sh-2); white-space:nowrap;
}
#toast.go{ animation:toast 2.2s ease both; }
@keyframes toast{
  0%{ opacity:0; transform:translateX(-50%) translateY(-20px) scale(.8) }
  12%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) }
  82%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) }
  100%{ opacity:0; transform:translateX(-50%) translateY(-14px) scale(.95) }
}

/* the effects canvas floats above everything and never eats a tap */
#fxlayer{ position:fixed; inset:0; pointer-events:none; z-index:30; }

/* glitter time paints the screen edges gold */
#glitterEdge{
  position:fixed; inset:0; z-index:29; pointer-events:none; opacity:0; transition:opacity .5s ease;
  /* an edge tint, not a filter over the painting — the picture stays true */
  box-shadow:inset 0 0 44px 4px #ffd98a66, inset 0 0 110px 14px #ff9ecb33;
}
#glitterEdge.on{ opacity:1; animation:edgepulse 1.8s ease-in-out infinite; }
@keyframes edgepulse{ 0%,100%{ opacity:.65 } 50%{ opacity:1 } }

/* --- narrow phones: the wordmark steps aside so the tools always fit ------ */
@media (max-width:540px){
  header h1{ display:none; }
  .iconbtn{ width:40px; height:40px; font-size:19px; border-radius:12px; }
  .stars{ padding:4px 10px 4px 8px; font-size:14px; }
  .swatch{ width:48px; height:56px; }
  .swatch .chip{ width:44px; height:44px; }
  /* keep the three bonus games on one shelf instead of wrapping 2 + 1 */
  .gamebtn{ min-width:70px; padding:7px 8px 6px; font-size:12px; }
  .gamebtn .ge{ font-size:21px; }
  .shelf{ gap:7px; }
}

@media (prefers-reduced-motion:reduce){
  #sky .cloud, .brand .drop, .bigbtn::after, .pick::after, #progressFill::after{ animation:none; }
}