/* ===========================================================
   Sugarfall — a match-3 candy puzzle
   =========================================================== */

:root {
  /* candy world */
  --sky-1: #5b2a8c;
  --sky-2: #3a1a63;
  --sky-3: #22103f;
  --panel: rgba(44, 18, 74, .72);
  --panel-edge: #ff8ad0;
  --board-bg: rgba(29, 12, 54, .62);
  --cell-a: rgba(255, 255, 255, .10);
  --cell-b: rgba(255, 255, 255, .05);
  --ink: #ffffff;
  --ink-soft: #d6bcf3;
  --gold: #ffc93c;

  /* candies */
  --c-red:    #ff4d5e; --d-red:    #bb1431; --l-red:    #ff9aa5;
  --c-orange: #ff9b21; --d-orange: #c45c00; --l-orange: #ffc46b;
  --c-yellow: #ffdd33; --d-yellow: #cf9c00; --l-yellow: #fff09a;
  --c-green:  #4fd44f; --d-green:  #1a8c27; --l-green:  #a6f0a0;
  --c-blue:   #37b6ff; --d-blue:   #0668b4; --l-blue:   #9adcff;
  --c-purple: #b95cff; --d-purple: #6f1dba; --l-purple: #dca8ff;

  --syrup-1: rgba(255, 150, 212, .40);
  --syrup-2: rgba(226, 84, 170, .40);
  --syrup-3: rgba(255, 118, 196, .78);
  --syrup-4: rgba(188, 36, 130, .78);

  --radius: 20px;
  --t-move: 240ms;
  --t-pop: 230ms;

  --font-ui: "Baloo 2", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Luckiest Guy", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(120% 80% at 50% -10%, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 100%),
    var(--sky-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* soft candy-coloured glow blobs behind everything */
.backdrop { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .5; }
.b1 { width: 300px; height: 300px; left: -90px; top: -60px;  background: #ff5ea8; }
.b2 { width: 260px; height: 260px; right: -80px; top: 12%;   background: #3fb6ff; }
.b3 { width: 320px; height: 320px; left: -110px; bottom: 4%; background: #8a4cff; }
.b4 { width: 240px; height: 240px; right: -70px; bottom: -60px; background: #ffb13f; }

#app {
  position: relative;
  height: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
  overflow: hidden;
}
#game { padding-left: 8px; padding-right: 8px; }
.screen.is-active { display: flex; }

/* chunky outlined display text, the way candy games shout numbers */
.shout {
  font-family: var(--font-display);
  letter-spacing: .02em;
  text-shadow:
    -2px -2px 0 #2b1340, 2px -2px 0 #2b1340, -2px 2px 0 #2b1340, 2px 2px 0 #2b1340,
     0 4px 0 rgba(43, 19, 64, .55);
}

/* --------------------------------------------------------- buttons */

.btn {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px 13px;
  color: #fff;
  background: linear-gradient(#8ae84f, #46b61c);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 #2c7a10, 0 7px 12px rgba(0,0,0,.35);
  text-shadow: 0 2px 0 rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform 90ms, box-shadow 90ms;
  touch-action: manipulation;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #2c7a10, 0 3px 7px rgba(0,0,0,.3);
}
.btn.blue {
  background: linear-gradient(#67cdff, #1f8fe0);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 #0d5f9c, 0 7px 12px rgba(0,0,0,.35);
}
.btn.blue:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #0d5f9c, 0 3px 7px rgba(0,0,0,.3); }
.btn.pink {
  background: linear-gradient(#ff8fd0, #e03d9b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 #a52168, 0 7px 12px rgba(0,0,0,.35);
}
.btn.pink:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #a52168, 0 3px 7px rgba(0,0,0,.3); }
.btn.flat {
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
  text-shadow: none;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 11px 16px;
}
.btn.flat:active { transform: translateY(2px); }
.btn.small { font-size: 14px; padding: 10px 20px 12px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.icon-btn {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.26), 0 3px 0 rgba(0,0,0,.3);
  cursor: pointer;
  touch-action: manipulation;
}
.icon-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.26); }

/* ----------------------------------------------------- level select */

.brand { text-align: center; padding: 4px 0 12px; }
.brand-mark { display: flex; justify-content: center; gap: 2px; margin-bottom: 2px; }
.brand-mark svg { width: 40px; height: 40px; filter: drop-shadow(0 4px 5px rgba(0,0,0,.45)); }
.brand-mark svg:nth-child(1) { transform: rotate(-14deg) translateY(3px); }
.brand-mark svg:nth-child(3) { transform: rotate(14deg) translateY(3px); }

.brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 13vw, 60px);
  line-height: 1;
  letter-spacing: .01em;
  background: linear-gradient(#fff9d6 32%, #ffc93c 62%, #ff8f2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #4a1c2e;
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 rgba(74,28,46,.85)) drop-shadow(0 9px 14px rgba(0,0,0,.5));
}
.tagline { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); letter-spacing: .04em; }

.panel {
  flex: 1;
  min-height: 0;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), 0 10px 28px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 12px 12px 4px;
  display: flex;
  flex-direction: column;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; }
.panel-head h2 { margin: 0; font-family: var(--font-display); font-size: 19px; letter-spacing: .03em; }
.stars-total { margin: 0; font-size: 15px; font-weight: 800; color: var(--gold); }
.stars-total .slash { color: rgba(255,255,255,.3); margin: 0 2px; }

.level-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  padding: 2px 2px 14px;
  -webkit-overflow-scrolling: touch;
}

.lv {
  position: relative;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(#ff9ad8, #e0459f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #9c1f64, 0 6px 12px rgba(0,0,0,.35);
  padding: 9px 6px 9px;
  font-family: var(--font-ui);
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}
.lv:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #9c1f64; }
.lv .n {
  display: block;
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.lv .t {
  display: block; font-size: 10px; font-weight: 600; margin-top: 2px; min-height: 13px;
  color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv .st { display: flex; justify-content: center; gap: 2px; margin-top: 5px; font-size: 12px; }
.lv .st i { font-style: normal; color: rgba(0,0,0,.28); }
.lv .st i.on { color: var(--gold); text-shadow: 0 0 6px rgba(255,201,60,.9); }
.lv.cleared { background: linear-gradient(#8ae84f, #3fae1c); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #2c7a10, 0 6px 12px rgba(0,0,0,.35); }
.lv.cleared:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #2c7a10; }
.lv.locked {
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
  color: rgba(255,255,255,.35);
}
.lv.locked .n { text-shadow: none; }
.lv.locked::after {
  content: "🔒";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 24px; opacity: .6;
}
.lv.locked .st, .lv.locked .t { visibility: hidden; }

.home-actions { display: flex; gap: 8px; justify-content: center; padding: 14px 0 2px; flex-wrap: wrap; }
.credit { text-align: center; font-size: 10px; color: var(--ink-soft); opacity: .65; margin: 8px 0 0; }

/* ------------------------------------------------------ game screen */

.topbar { display: flex; align-items: center; gap: 10px; }
.stage-title { flex: 1; min-width: 0; text-align: center; line-height: 1.1; }
.stage-title .no { display: block; font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }
.stage-title .no b { font-size: 13px; color: #fff; }
.stage-title .nm {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .02em;
  color: #ffe9a8;
  text-shadow: 0 2px 0 rgba(43,19,64,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hud { display: flex; gap: 8px; margin-top: 10px; }
.hud-box {
  flex: 1;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), 0 4px 10px rgba(0,0,0,.3);
  padding: 5px 12px 7px;
  display: flex; align-items: center; justify-content: space-between;
}
.hud-box .label { font-size: 11px; color: var(--ink-soft); letter-spacing: .09em; text-transform: uppercase; }
.hud-box strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(43,19,64,.8);
}
.hud-box.moves.low strong { color: #ff6d6d; }
.hud-box.moves.low { animation: nudge .5s ease-in-out 2; }

.goals {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin: 9px 0 2px;
  min-height: 36px;
}
.goal {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), 0 3px 8px rgba(0,0,0,.3);
  padding: 4px 13px 4px 5px;
  font-size: 14px; font-weight: 800;
  transition: background 200ms;
}
.goal .num { font-variant-numeric: tabular-nums; }
.goal.done { background: linear-gradient(#8ae84f, #46b61c); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.goal.done .num::after { content: " ✓"; }

.board-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px 0;
}

.board {
  position: relative;
  background: var(--board-bg);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.1),
    inset 0 4px 14px rgba(0,0,0,.4),
    0 0 0 4px rgba(255,138,208,.35),
    0 12px 30px rgba(0,0,0,.45);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.layer { position: absolute; inset: 0; }
.layer.tiles, .layer.fx { pointer-events: none; }

.cell, .tile, .ice {
  position: absolute;
  width: var(--cs);
  height: var(--cs);
  transform: translate(calc(var(--c) * var(--cs)), calc(var(--r) * var(--cs)));
}

/* chequerboard, the classic sweet-shop tablecloth */
.cell::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 9px;
  background: var(--cell-a);
}
.cell.odd::before { background: var(--cell-b); }

/* syrup pools under the candy: translucent so they read as a coating on the
   board rather than as another candy colour */
.cell.d1::before {
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.3) 0 9%, transparent 10%),
    radial-gradient(circle at 74% 72%, rgba(255,255,255,.2) 0 7%, transparent 8%),
    linear-gradient(145deg, var(--syrup-1), var(--syrup-2));
  box-shadow: inset 0 0 0 2px rgba(255,190,225,.4);
}
.cell.d2::before {
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.34) 0 9%, transparent 10%),
    radial-gradient(circle at 74% 72%, rgba(255,255,255,.22) 0 7%, transparent 8%),
    linear-gradient(145deg, var(--syrup-3), var(--syrup-4));
  box-shadow: inset 0 0 0 2px rgba(255,210,235,.75), inset 0 -5px 10px rgba(90,0,55,.35);
}

/* -------------------------------------------------------------- candies */

.tile { z-index: 1; transition: transform var(--t-move) cubic-bezier(.34, .07, .4, 1); }
.tile .m {
  position: absolute; inset: 2.5%;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.45));
  transition: filter 150ms;
}
.tile .m svg { width: 100%; height: 100%; display: block; }

.tile.f0 { --pc: var(--c-red);    --pd: var(--d-red);    --pl: var(--l-red); }
.tile.f1 { --pc: var(--c-orange); --pd: var(--d-orange); --pl: var(--l-orange); }
.tile.f2 { --pc: var(--c-yellow); --pd: var(--d-yellow); --pl: var(--l-yellow); }
.tile.f3 { --pc: var(--c-green);  --pd: var(--d-green);  --pl: var(--l-green); }
.tile.f4 { --pc: var(--c-blue);   --pd: var(--d-blue);   --pl: var(--l-blue); }
.tile.f5 { --pc: var(--c-purple); --pd: var(--d-purple); --pl: var(--l-purple); }

.mk { position: absolute; inset: 0; pointer-events: none; }

/* side / down sparkler: glowing stripes along the line it clears */
.tile.sp1 .mk, .tile.sp2 .mk {
  background: repeating-linear-gradient(0deg,
      rgba(255,255,255,.95) 0 3px, rgba(255,255,255,0) 3px 8px);
  mask: radial-gradient(circle at 50% 50%, #000 0 40%, transparent 45%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 40%, transparent 45%);
}
.tile.sp2 .mk { background: repeating-linear-gradient(90deg,
      rgba(255,255,255,.95) 0 3px, rgba(255,255,255,0) 3px 8px); }
.tile.sp1 .m, .tile.sp2 .m {
  filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 3px 3px rgba(0,0,0,.45));
}

/* bonbon bomb */
.tile.sp3 .mk {
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.95), 0 0 14px 3px rgba(255,170,40,.9);
  animation: throb 1.1s ease-in-out infinite;
}
/* rainbow drop */
.tile.sp4 .m {
  animation: spinslow 5s linear infinite;
  filter: drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(0 3px 3px rgba(0,0,0,.45));
}

.tile.sel .m { animation: wobble .55s ease-in-out infinite; }
.tile.sel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 18px 5px rgba(255,220,120,.9);
}
.tile.hint .m { animation: hint 900ms ease-in-out 3; }
.tile.drop .m { animation: drop var(--t-move) cubic-bezier(.2,.7,.4,1.1); }
.tile.born .m { animation: born 280ms cubic-bezier(.2,1.5,.5,1); }
.tile.pop { z-index: 3; }
.tile.pop .m { animation: pop var(--t-pop) ease-out forwards; }

/* ------------------------------------------------------------------ ice */

.ice { z-index: 2; }
.ice::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(228,248,255,.3), rgba(120,195,255,.2));
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.8),
    inset 0 -5px 12px rgba(20,90,160,.3),
    0 2px 6px rgba(0,0,0,.3);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.ice::after {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 9px;
  background:
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.55) 40%, transparent 43%),
    linear-gradient(62deg, transparent 62%, rgba(255,255,255,.42) 64%, transparent 67%);
}
.ice svg { position: absolute; inset: 14%; width: 72%; height: 72%; opacity: 0; z-index: 1; }
.ice.cracked svg { opacity: .95; }
.ice.hit { animation: shake 260ms ease-out; }

/* -------------------------------------------------------- combo badge */

.combo {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  font-family: var(--font-display);
  font-size: 32px;
  color: #fff;
  text-shadow:
    -2px -2px 0 #2b1340, 2px -2px 0 #2b1340, -2px 2px 0 #2b1340, 2px 2px 0 #2b1340,
    0 0 22px rgba(255,180,60,.95);
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}
.combo.show { animation: comboIn 850ms ease-out; }

.bottombar { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.tip { margin: 0; flex: 1; font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }

/* ------------------------------------------------------------ overlay */

.overlay {
  position: fixed; inset: 0;
  background: rgba(16, 6, 32, .68);
  display: grid; place-items: center;
  padding: 18px;
  z-index: 50;
  animation: fade 180ms ease-out;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }
.dialog {
  width: 100%;
  max-width: 340px;
  max-height: 86vh;
  overflow-y: auto;
  background: linear-gradient(#5a2a94, #3a1a63);
  border-radius: 26px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), 0 20px 46px rgba(0,0,0,.6);
  padding: 22px 18px 18px;
  text-align: center;
  animation: popin 280ms cubic-bezier(.2,1.4,.5,1);
}
.dialog h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: .02em;
  color: #ffe9a8;
  text-shadow: 0 3px 0 rgba(43,19,64,.85);
}
.dialog p { margin: 6px 0; font-size: 14px; line-height: 1.5; color: #f0e4ff; }
.dialog .big {
  font-family: var(--font-display);
  font-size: 40px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 3px 0 rgba(43,19,64,.85);
  margin: 2px 0 4px;
}
.dialog small { color: var(--ink-soft); }
.dialog-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.dialog-actions .btn { width: 100%; }

.star-row { display: flex; justify-content: center; gap: 10px; font-size: 42px; margin: 4px 0 8px; }
.star-row i { font-style: normal; color: rgba(0,0,0,.3); transform: scale(.82); }
.star-row i.on {
  color: var(--gold);
  animation: starPop 440ms cubic-bezier(.2,1.6,.4,1) backwards;
  text-shadow: 0 0 18px rgba(255,201,60,.95);
}
.star-row i.on:nth-child(1) { animation-delay: 120ms; }
.star-row i.on:nth-child(2) { animation-delay: 300ms; }
.star-row i.on:nth-child(3) { animation-delay: 480ms; }

.how { text-align: left; }
.how h3 {
  margin: 16px 0 6px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .04em;
  color: #ffc93c;
}
.how p { margin: 3px 0; font-size: 13px; }
.how ul { margin: 4px 0; padding-left: 18px; font-size: 13px; line-height: 1.65; color: #f0e4ff; }
.how .row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.how .row span { font-size: 12.5px; color: #f0e4ff; }
.how .row b { color: #fff; }

/* ------------------------------------------------------- goal icons */

.ic { width: 24px; height: 24px; display: block; flex: 0 0 auto; }
.ic.chip { position: relative; border-radius: 8px; }
.ic.chip.dust {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.45) 0 11%, transparent 12%),
    linear-gradient(145deg, var(--syrup-3), var(--syrup-4));
  box-shadow: inset 0 0 0 2px rgba(255,210,235,.7);
}
.ic.chip.ice {
  background: linear-gradient(145deg, rgba(235,250,255,.95), rgba(130,200,255,.8));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9);
}
.ic.chip.pt {
  background: linear-gradient(145deg, #ffe680, var(--gold));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.ic.chip.pt::after {
  content: "★";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 13px; color: #8a5c00;
}
.how .row .ic { width: 30px; height: 30px; }

/* ------------------------------------------------------------- anims */

@keyframes pop {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(.1) rotate(25deg); opacity: 0; }
}
@keyframes drop {
  0%   { transform: translateY(-130%) scale(.9); }
  70%  { transform: translateY(7%) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes born {
  0%   { transform: scale(.2) rotate(-50deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes wobble {
  0%, 100% { transform: rotate(-8deg) scale(1.08); }
  50%      { transform: rotate(8deg)  scale(1.08); }
}
@keyframes hint {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2) rotate(7deg); }
}
@keyframes throb {
  0%, 100% { opacity: .7; transform: scale(.95); }
  50%      { opacity: 1;  transform: scale(1.05); }
}
@keyframes spinslow { to { transform: rotate(360deg); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-3deg); }
  75% { transform: translateX(3px) rotate(3deg); }
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}
@keyframes comboIn {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.5); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  70%  { opacity: 1; transform: translate(-50%, -55%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(.95); }
}
@keyframes popin {
  0% { transform: scale(.85) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes starPop {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@media (max-height: 700px) {
  .brand-mark svg { width: 32px; height: 32px; }
  .tagline { display: none; }
  .credit { display: none; }
  .goals { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .tile { transition-duration: 60ms; }
}