/* Make 10! — mobile-first styles.
   Everything is sized in rem; 1rem = 4% of the game column's width, so the whole UI scales together. */

:root {
  --u: min(1vw, 0.62vh);
  --ink: #3a2c4e;
  --gold: #ffce3c;
  --green: #2ecc71;   --green-d: #1f9b53;
  --orange: #ff9f43;  --orange-d: #d27a1f;
  --coral: #ff6b6b;   --coral-d: #d44848;
  --blue: #54a0ff;    --blue-d: #3377d4;
  --pink: #ff78be;    --pink-d: #d4529a;
  --purple: #a269ff;
  --white: #ffffff;   --white-d: #c9c3d6;
  --so: var(--ink);
  --bg1: #cef4d0;
  --bg2: #fff6c4;
  --font: "Fredoka", "Fredoka One", "Baloo 2", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@supports (height: 1dvh) {
  :root { --u: min(1vw, 0.62dvh); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(var(--u) * 4); height: 100%; overscroll-behavior: none; }
body {
  margin: 0; height: 100%; overflow: hidden; font-family: var(--font); font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: background .4s;
}
button { font: inherit; color: inherit; touch-action: manipulation; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- animated backdrop ---------- */
#bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#bg .deco { position: absolute; color: #fff; opacity: .5; animation: drift linear infinite; will-change: transform; }
#bg .deco.dot { border-radius: 50%; background: #fff; opacity: .4; }
@keyframes drift { from { transform: translateY(0) rotate(0); } to { transform: translateY(-120vh) rotate(180deg); } }

/* ---------- column ---------- */
#app {
  position: relative; z-index: 1; width: 25rem; max-width: 100vw; height: 100%; margin: 0 auto; overflow: hidden;
}
#app.bump { animation: bump .3s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.025); } 100% { transform: scale(1); } }

.screen {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; gap: .55rem;
  padding: calc(env(safe-area-inset-top, 0px) + .8rem) 1rem calc(env(safe-area-inset-bottom, 0px) + .8rem);
}
.screen.active { display: flex; animation: screenIn .22s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes screenIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

.slot { container-type: size; display: grid; place-items: center; position: relative; }
.slot.grow { flex: 1 1 0; min-height: 5rem; width: 100%; }
.slot > .mascot { width: min(94cqw, 94cqh); height: min(94cqw, 94cqh); margin-top: 4cqh; }

/* ---------- text outline helpers ---------- */
.o, .btn.big > span {
  color: #fff;
  text-shadow: -.06em -.06em 0 var(--so), .06em -.06em 0 var(--so), -.06em .06em 0 var(--so), .06em .06em 0 var(--so),
               0 -.08em 0 var(--so), 0 .08em 0 var(--so), -.08em 0 0 var(--so), .08em 0 0 var(--so), 0 .13em 0 var(--so);
}
.o2 {
  color: #fff;
  text-shadow: -.045em -.045em 0 var(--so), .045em -.045em 0 var(--so), -.045em .045em 0 var(--so), .045em .045em 0 var(--so),
               0 -.06em 0 var(--so), 0 .06em 0 var(--so), -.06em 0 0 var(--so), .06em 0 0 var(--so), 0 .1em 0 var(--so);
}
.gold { color: var(--gold) !important; }

/* ---------- icons ---------- */
.ic { width: 1.5rem; height: 1.5rem; flex: none; }
.c-green { color: #1fb865; } .c-coral { color: var(--coral); } .c-orange { color: var(--orange); }
.c-blue { color: var(--blue); } .c-purple { color: var(--purple); } .c-red { color: #e65a78; }

/* ---------- buttons ---------- */
.btn {
  --c: var(--green); --cd: var(--green-d); --so: var(--cd);
  position: relative; border: 0; cursor: pointer; color: #fff; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,0) 58%), var(--c);
  border-radius: 1.4rem; box-shadow: 0 .38rem 0 var(--cd);
  transition: transform .08s, box-shadow .08s; margin-bottom: .38rem;
}
.btn:active { transform: translateY(.26rem) scale(.97); box-shadow: 0 .12rem 0 var(--cd); }
.btn:focus-visible { outline: .2rem solid var(--ink); outline-offset: .2rem; }
.btn.green { --c: var(--green); --cd: var(--green-d); }
.btn.orange { --c: var(--orange); --cd: var(--orange-d); }
.btn.blue { --c: var(--blue); --cd: var(--blue-d); }
.btn.white { --c: #fff; --cd: var(--white-d); color: var(--ink); }
.btn.round { width: 3.1rem; height: 3.1rem; border-radius: 50%; }
.btn.round .ic { width: 1.6rem; height: 1.6rem; }
.btn.big { height: 4.4rem; min-width: 15rem; padding: 0 1.6rem; font-size: 2rem; border-radius: 1.6rem; }
.btn.big .ic { width: 1.9rem; height: 1.9rem; filter: drop-shadow(0 .1rem 0 var(--cd)); }
.btn.pillbtn { height: 3rem; padding: 0 1.1rem; border-radius: 1.5rem; }
.btn.pillbtn .ic { width: 1.5rem; height: 1.5rem; }
.btn.card { width: 100%; height: 7.6rem; padding: 0 1.1rem; justify-content: flex-start; gap: 1rem; border-radius: 2.2rem; text-align: left; }
.cicon { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: rgba(255,255,255,.82); display: grid; place-items: center; flex: none; color: var(--cd); }
.cicon .ic { width: 2.7rem; height: 2.7rem; }
.ctext { display: flex; flex-direction: column; gap: .2rem; }
.ctext b { font-size: 1.9rem; line-height: 1; }
.ctext small { font-size: 1.1rem; line-height: 1.12; font-weight: 700; }

.topline { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem; }
.soundBtn .ic { width: 1.6rem; height: 1.6rem; }

/* ---------- home ---------- */
.title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; font-weight: 700; }
.tword { font-size: 3.1rem; line-height: 1; letter-spacing: .08em; }
.ttiles { display: flex; align-items: center; gap: .7rem; }
.tt {
  width: 4.6rem; height: 4.6rem; display: grid; place-items: center; font-size: 3.5rem; line-height: 1; color: #fff; font-weight: 800;
  border-radius: 1.3rem; border: .22rem solid #fff; box-shadow: 0 .3rem 0 rgba(0,0,0,.12);
  text-shadow: -.05em -.05em 0 var(--ink), .05em -.05em 0 var(--ink), -.05em .05em 0 var(--ink), .05em .05em 0 var(--ink), 0 .1em 0 var(--ink);
}
.tt.t1 { background: var(--coral); transform: rotate(-7deg); animation: wob1 2.2s ease-in-out infinite alternate; }
.tt.t2 { background: var(--blue); transform: rotate(7deg); animation: wob2 2.2s ease-in-out infinite alternate; }
@keyframes wob1 { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } }
@keyframes wob2 { from { transform: rotate(7deg); } to { transform: rotate(-5deg); } }
.tbang { font-size: 3.4rem; color: var(--gold); }
.hint-pill {
  background: rgba(255,255,255,.75); border-radius: 2rem; padding: .3rem 1.4rem; font-size: 1.3rem; letter-spacing: .04em; margin-bottom: .1rem;
}
.hint-pill.pop { animation: pillpop .25s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pillpop { from { transform: scale(1.15); } to { transform: scale(1); } }
.statsline { display: flex; gap: 1.6rem; font-size: 1.35rem; }
.statsline .sp { display: inline-flex; align-items: center; gap: .35rem; }
.statsline .ic { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 .08rem 0 var(--ink)); }
.animal-row { display: flex; gap: .75rem; justify-content: center; padding-bottom: .2rem; }
.abtn { --c: #fff; --cd: var(--white-d); width: 3.9rem; height: 3.9rem; border-radius: 50%; margin-bottom: .38rem; }
.abtn .slot { position: absolute; inset: .25rem; }
.abtn.sel { box-shadow: 0 .38rem 0 var(--cd), 0 0 0 .2rem var(--ink); }
.abtn.sel:active { box-shadow: 0 .12rem 0 var(--cd), 0 0 0 .2rem var(--ink); }
.abtn .lockov {
  position: absolute; inset: 0; border-radius: 50%; background: rgba(58,44,78,.62); display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: .05rem; color: #fff; font-size: .9rem; line-height: 1;
}
.abtn.locked .lockov { display: flex; }
.lockov .ic { width: 1.2rem; height: 1.2rem; color: var(--gold); }
.lockov span { display: inline-flex; align-items: center; gap: .1rem; }
.lockov span .ic { width: .8rem; height: .8rem; }

.bubble {
  position: absolute; z-index: 20; background: #fff; border-radius: 1.3rem; padding: .55rem .9rem; font-size: 1.25rem; line-height: 1.1; text-align: center;
  color: var(--ink); box-shadow: 0 .2rem 0 rgba(0,0,0,.12); transform: scale(0); transform-origin: left center; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
  max-width: 14rem; pointer-events: none;
}
.bubble.show { transform: scale(1); }
.bubble::before {
  content: ""; position: absolute; left: -.4rem; top: 50%; width: .9rem; height: .9rem; background: #fff; transform: translateY(-50%) rotate(45deg); border-radius: .15rem;
}
.homebubble { right: 1rem; top: 40%; transform-origin: right center; }
.homebubble::before { left: auto; right: -.4rem; }

/* ---------- mode selection ---------- */
#modes { gap: 1.1rem; }
.modes-mascot { flex: 1 1 0; min-height: 6rem; width: 100%; max-height: 14rem; }

/* ---------- play screen ---------- */
.topbar { width: 100%; display: flex; align-items: center; gap: .7rem; min-height: 3.5rem; }
.ptitle { flex: 1; font-size: 2rem; line-height: 1; letter-spacing: .04em; }
.score { flex: 1; font-size: 2.6rem; line-height: 1; text-align: left; display: none; font-variant-numeric: tabular-nums; }
.pill {
  display: none; align-items: center; gap: .4rem; background: #fff; color: var(--ink); border-radius: 2rem; padding: 0 1.1rem; height: 3rem; min-width: 6.4rem; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 .25rem 0 var(--white-d); margin-bottom: .25rem;
}
.pill .ic { width: 1.4rem; height: 1.4rem; color: var(--gold); }
.pill.timer .ic { color: var(--ink); }
.pill b { font-variant-numeric: tabular-nums; }
.pill.tick, .score.pop { animation: pillpop .25s cubic-bezier(.34, 1.56, .64, 1); }
.score { transform-origin: left center; }
.pill .streak[hidden] { display: none; }
.pill .streak { display: inline-flex; align-items: center; gap: .15rem; color: var(--orange); margin-left: .35rem; }
.pill .streak .ic { color: var(--orange); width: 1.1rem; height: 1.1rem; }
#skipBtn { display: none; }
.psub { font-size: 1.15rem; text-align: center; line-height: 1; margin-top: -.15rem; }
.timebar { width: 100%; height: .85rem; background: rgba(255,255,255,.6); border-radius: 1rem; overflow: hidden; display: none; flex: none; }
.timebar i { display: block; height: 100%; width: 100%; background: var(--green); border-radius: 1rem; transition: background .3s; }
.timebar i.mid { background: var(--orange); } .timebar i.low { background: var(--coral); }

.mode-tut #skipBtn { display: inline-flex; }
.mode-tut #ptitle, .mode-practice #ptitle { display: block; }
.mode-practice #pill { display: inline-flex; }
.mode-comp #ptitle, .mode-comp #psub, .mode-comp #eq { display: none; }
.mode-comp #score { display: block; }
.mode-comp #pill { display: inline-flex; }
.mode-comp .timebar { display: block; }
.mode-tut #pill { display: none; }

.mrow { position: relative; width: 100%; height: 7.4rem; flex: none; }
.mslot { position: absolute; left: 0; top: 0; width: 7.4rem; height: 100%; }
.mrow .bubble { left: 7.6rem; top: .6rem; }
.combo {
  position: absolute; right: .2rem; top: 50%; width: 9.2rem; padding: .35rem .6rem .55rem; border-radius: 1.5rem; border: .2rem solid #fff;
  background: var(--orange); color: #fff; transform: translateY(-50%) scale(0); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s; display: none;
}
.mode-comp .combo { display: block; }
.combo.on { transform: translateY(-50%) scale(1); }
.combo.pop { animation: combopop .22s ease-out; }
@keyframes combopop { 0% { transform: translateY(-50%) scale(1.14); } 100% { transform: translateY(-50%) scale(1); } }
.crow { display: flex; align-items: center; justify-content: space-between; gap: .35rem; font-size: 1.5rem; line-height: 1.2; }
.crow #comboN { flex: 1; text-align: left; }
.crow .ic { width: 1.6rem; height: 1.6rem; }
.cbar { height: .5rem; border-radius: 1rem; background: rgba(58,44,78,.35); margin-top: .2rem; overflow: hidden; }
.cbar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 1rem; transition: width .15s; }

.eq { height: 3rem; line-height: 3rem; font-size: 2.2rem; flex: none; text-align: center; width: 100%; white-space: nowrap; margin-top: -.3rem; }
.eq.pop { animation: eqpop .25s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes eqpop { from { transform: scale(1.25); } to { transform: scale(1); } }

.board-wrap { flex: 1 1 0; min-height: 0; width: 100%; background: rgba(255,255,255,.5); border-radius: 2rem; position: relative; }
#board { position: absolute; inset: .4rem; }

.tile {
  position: absolute; border: 0; padding: 0; background: none; cursor: pointer; font: inherit;
  aspect-ratio: 1 / 1; container-type: inline-size;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--s, 1)); transition: transform .14s cubic-bezier(.34, 1.56, .64, 1);
}
.tile:focus-visible { outline: .2rem dashed var(--ink); outline-offset: .3rem; }
.tin { position: absolute; inset: 0; animation: tileIn .24s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--d, 0s); }
.tshadow { position: absolute; inset: 0; border-radius: 30%; background: var(--cd); transform: translateY(8%); }
.tface {
  position: absolute; inset: 0; border-radius: 30%; display: grid; place-items: center;
  background: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,0) 58%), var(--c); transition: transform .1s, box-shadow .1s;
}
.tface::before { content: ""; position: absolute; left: 14%; top: 9%; width: 26%; height: 9%; border-radius: 1rem; background: rgba(255,255,255,.55); }
.tnum {
  color: #fff; font-weight: 800; line-height: 1; transform: translateY(4%); font-size: 64cqw;
  text-shadow: -.05em -.05em 0 var(--ink), .05em -.05em 0 var(--ink), -.05em .05em 0 var(--ink), .05em .05em 0 var(--ink), 0 -.07em 0 var(--ink), 0 .07em 0 var(--ink), -.07em 0 0 var(--ink), .07em 0 0 var(--ink), 0 .1em 0 var(--ink);
}
.tile.sel { --s: 1.12; }
.tile.sel .tface { transform: translateY(-6%); box-shadow: 0 0 0 .22rem var(--ink); }
.tile.shake .tface { animation: shake .3s; }
.tile.pop .tin { animation: tilePop .26s ease-in forwards; }
.tile.pop .tface { filter: brightness(1.3); }
.tile.out .tin { animation: tileOut .12s ease-in forwards; }
.tile { pointer-events: auto; }
.tile.pop, .tile.out { pointer-events: none; }
@keyframes tileIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tilePop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(0); } }
@keyframes tileOut { to { transform: scale(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7%); } 40% { transform: translateX(7%); } 60% { transform: translateX(-5%); } 80% { transform: translateX(4%); } }

#hand {
  position: absolute; width: 3.4rem; height: 3.4rem; z-index: 40; pointer-events: none; border-radius: 50%;
  background: rgba(255,255,255,.88); border: .3rem solid var(--ink); box-shadow: 0 .25rem 0 rgba(0,0,0,.18);
  transition: left .35s ease, top .35s ease, transform .1s; transform: translate(-50%, -50%);
}
#hand::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--ink); opacity: .75; }
#hand::after { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; border: .22rem solid #fff; opacity: 0; }
#hand.press { transform: translate(-50%, -50%) scale(.78); }
#hand.press::after { animation: ripple .5s ease-out; }
@keyframes ripple { from { transform: scale(1); opacity: .95; } to { transform: scale(2.3); opacity: 0; } }
#hand[hidden] { display: none; }
.float { position: absolute; transform: translate(-50%, -50%); z-index: 30; pointer-events: none; font-size: 1.8rem; white-space: nowrap; animation: floatUp .85s ease-out forwards; }
@keyframes floatUp { 0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1); opacity: 0; } }
.spark { position: absolute; pointer-events: none; z-index: 25; }

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.banner { position: absolute; left: 50%; font-size: 4.2rem; white-space: nowrap; transform: translate(-50%, -50%); animation: bannerIn var(--dur, .7s) cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes bannerIn { 0% { transform: translate(-50%, -50%) scale(.3) rotate(var(--r, 0deg)); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg)); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.25) rotate(var(--r, 0deg)); opacity: 0; } }

/* ---------- results ---------- */
#results { gap: .5rem; }
.rmascot { flex: 1 1 0; min-height: 4.5rem; max-height: 9rem; width: 100%; }
.rstars { display: flex; align-items: flex-end; justify-content: center; gap: .4rem; height: 4.6rem; flex: none; }
.rstar { width: 3.6rem; height: 3.6rem; color: #e2dcec; stroke: var(--ink); stroke-width: 1px; filter: drop-shadow(0 .15rem 0 rgba(58,44,78,.35)); transition: color .2s; }
.rstar.s2 { width: 4.6rem; height: 4.6rem; }
.rstar.s1 { transform: rotate(-12deg); } .rstar.s3 { transform: rotate(12deg); }
.rstar.on { color: var(--gold); animation: starpop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes starpop { 0% { scale: 1.6; } 100% { scale: 1; } }
.rscore { font-size: 3.6rem; line-height: 1; font-variant-numeric: tabular-nums; flex: none; }
.newbest { display: none; align-items: center; gap: .4rem; background: var(--pink); border: .18rem solid #fff; border-radius: 2rem; padding: .2rem 1rem; font-size: 1.2rem; transform: rotate(-4deg); flex: none; --so: var(--pink-d); }
.newbest.show { display: inline-flex; animation: starpop .4s cubic-bezier(.34, 1.56, .64, 1); }
.newbest .ic { width: 1.2rem; height: 1.2rem; color: var(--gold); }
.statgrid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; flex: none; }
.stat { background: rgba(255,255,255,.85); border-radius: 1.1rem; padding: .45rem .2rem .4rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.stat .ic { width: 1.5rem; height: 1.5rem; }
.stat b { font-size: 1.55rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: 4.6rem; background: rgba(255,255,255,.6); border-radius: 1.2rem; display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; flex: none; }
.chart > .ic { width: 1.6rem; height: 1.6rem; }
.bars { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: space-around; gap: .2rem; }
.bar { flex: 1; max-width: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar span { font-size: .85rem; line-height: 1; margin-bottom: .1rem; color: var(--ink); }
.bar i { display: block; width: 100%; border-radius: .5rem; background: var(--blue); height: 0; transition: height .5s cubic-bezier(.34, 1.56, .64, 1); }
.bar.last i { background: var(--gold); }
.unlockrow { width: 100%; height: 3rem; background: rgba(255,255,255,.6); border-radius: 2rem; display: flex; align-items: center; gap: .6rem; padding: 0 .9rem 0 1.1rem; flex: none; --so: var(--ink); }
.utext { font-size: 1.15rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .2rem; }
.ubar { flex: 1; height: .8rem; border-radius: 1rem; background: rgba(58,44,78,.22); overflow: hidden; }
.ubar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 1rem; transition: width .6s ease-out; }
.uslot { width: 3.4rem; height: 3.4rem; margin-top: -.3rem; }
.rbtns { width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: auto; flex: none; }
.rbtns .btn.big { flex: 1; min-width: 0; max-width: 14rem; }
.rbtns .btn.round { width: 4.4rem; height: 4.4rem; border-radius: 1.4rem; }
.rbtns .btn.round .ic { width: 2.2rem; height: 2.2rem; }

/* ---------- popup ---------- */
.popup { position: absolute; inset: 0; z-index: 80; background: rgba(58,44,78,.55); display: flex; align-items: center; justify-content: center; }
.popup[hidden] { display: none; }
.popup .card {
  width: 20rem; background: #fff; border-radius: 2.2rem; padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  animation: cardIn .3s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 .5rem 0 rgba(0,0,0,.15);
}
@keyframes cardIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.popup h2 { margin: 0; font-size: 2.2rem; line-height: 1.1; color: var(--gold); }
.popup h2.plain { color: #fff; }
.popslot { width: 11rem; height: 11rem; }
.ppill { position: relative; width: 100%; height: 2.6rem; border-radius: 2rem; background: #e2dcec; overflow: hidden; display: none; align-items: center; justify-content: center; }
.ppill.show { display: flex; }
.ppill i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); border-radius: 2rem; transition: width .5s ease-out; }
.ppill span { position: relative; display: inline-flex; align-items: center; gap: .3rem; font-size: 1.4rem; color: var(--ink); }
.ppill .ic { width: 1.3rem; height: 1.3rem; color: var(--ink); }
.popup .btn.big { min-width: 10rem; height: 3.8rem; }
.grey { filter: grayscale(1) brightness(.92) contrast(.95); }

/* ---------- mascots ---------- */
.mascot { position: relative; }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.mbob { animation: bob 2.6s ease-in-out infinite; }
.mascot.energy2 .mbob { animation-duration: .7s; }
.mascot.static .mbob { animation: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mbody { transform-origin: 100px 178px; }
.mascot.mood-happy .mbody { animation: hop .45s ease-out; }
.mascot.mood-excited .mbody { animation: hopbig .7s ease-out; }
.mascot.mood-celebrate .mbody { animation: hop .42s ease-out 3; }
.mascot.mood-encourage .mbody { animation: tilt .25s ease-out forwards; }
@keyframes hop { 0% { transform: translateY(0) scale(1.04, .96); } 40% { transform: translateY(-14px) scale(.97, 1.03); } 100% { transform: translateY(0) scale(1); } }
@keyframes hopbig { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-26px) rotate(-10deg); } 45% { transform: translateY(0) rotate(8deg); } 65% { transform: translateY(-14px) rotate(-6deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes tilt { to { transform: rotate(9deg); } }
.eye .e-open, .eye .e-shine { transition: transform .06s; transform-box: fill-box; transform-origin: center; }
.eye .e-happy { display: none; }
.mascot.blink .e-open, .mascot.blink .e-shine { transform: scaleY(.12); }
.mascot.squint .e-open, .mascot.squint .e-shine { display: none; }
.mascot.squint .e-happy { display: block; }
.mouth .m-open { display: none; }
.mascot.open .mouth .m-open { display: block; }
.mascot.open .mouth .m-closed { display: none; }

/* ---------- short / wide screens ---------- */
@media (prefers-reduced-motion: reduce) {
  #bg .deco, .tt, .mbob { animation: none !important; }
  .screen.active { animation: none; }
}

/* ---------- smooth text outlines (generated: 16/12 shadow directions so edges aren't jagged) ---------- */
.o, .btn.big > span { text-shadow: 0.075em 0.000em 0 var(--so),
    0.069em 0.029em 0 var(--so),
    0.053em 0.053em 0 var(--so),
    0.029em 0.069em 0 var(--so),
    0.000em 0.075em 0 var(--so),
    -0.029em 0.069em 0 var(--so),
    -0.053em 0.053em 0 var(--so),
    -0.069em 0.029em 0 var(--so),
    -0.075em 0.000em 0 var(--so),
    -0.069em -0.029em 0 var(--so),
    -0.053em -0.053em 0 var(--so),
    -0.029em -0.069em 0 var(--so),
    -0.000em -0.075em 0 var(--so),
    0.029em -0.069em 0 var(--so),
    0.053em -0.053em 0 var(--so),
    0.069em -0.029em 0 var(--so),
    0 0.13em 0 var(--so); }
.o2 { text-shadow: 0.050em 0.000em 0 var(--so),
    0.043em 0.025em 0 var(--so),
    0.025em 0.043em 0 var(--so),
    0.000em 0.050em 0 var(--so),
    -0.025em 0.043em 0 var(--so),
    -0.043em 0.025em 0 var(--so),
    -0.050em 0.000em 0 var(--so),
    -0.043em -0.025em 0 var(--so),
    -0.025em -0.043em 0 var(--so),
    -0.000em -0.050em 0 var(--so),
    0.025em -0.043em 0 var(--so),
    0.043em -0.025em 0 var(--so),
    0 0.09em 0 var(--so); }
.tt { text-shadow: 0.055em 0.000em 0 var(--ink),
    0.051em 0.021em 0 var(--ink),
    0.039em 0.039em 0 var(--ink),
    0.021em 0.051em 0 var(--ink),
    0.000em 0.055em 0 var(--ink),
    -0.021em 0.051em 0 var(--ink),
    -0.039em 0.039em 0 var(--ink),
    -0.051em 0.021em 0 var(--ink),
    -0.055em 0.000em 0 var(--ink),
    -0.051em -0.021em 0 var(--ink),
    -0.039em -0.039em 0 var(--ink),
    -0.021em -0.051em 0 var(--ink),
    -0.000em -0.055em 0 var(--ink),
    0.021em -0.051em 0 var(--ink),
    0.039em -0.039em 0 var(--ink),
    0.051em -0.021em 0 var(--ink),
    0 0.1em 0 var(--ink); }
.tnum { text-shadow: 0.070em 0.000em 0 var(--ink),
    0.065em 0.027em 0 var(--ink),
    0.049em 0.049em 0 var(--ink),
    0.027em 0.065em 0 var(--ink),
    0.000em 0.070em 0 var(--ink),
    -0.027em 0.065em 0 var(--ink),
    -0.049em 0.049em 0 var(--ink),
    -0.065em 0.027em 0 var(--ink),
    -0.070em 0.000em 0 var(--ink),
    -0.065em -0.027em 0 var(--ink),
    -0.049em -0.049em 0 var(--ink),
    -0.027em -0.065em 0 var(--ink),
    -0.000em -0.070em 0 var(--ink),
    0.027em -0.065em 0 var(--ink),
    0.049em -0.049em 0 var(--ink),
    0.065em -0.027em 0 var(--ink),
    0 0.1em 0 var(--ink); }