/* ===== Theme: Bake & Bloom (swap these to re-theme the game) ===== */
:root {
  --page-bg:
    linear-gradient(rgba(255, 247, 234, 0.30), rgba(255, 247, 234, 0.55)),
    url("assets/bg.jpg") center / cover no-repeat,
    #f5e2c6;
  --text: #5a3a24;
  --text-dim: #8a6a50;
  --title: #c0573e;
  --title-shadow: #f0c6a2;
  --panel: rgba(255, 252, 245, 0.75);
  --panel-border: rgba(160, 100, 60, 0.22);
  --frame-light: #dcaa72;
  --frame-dark: #a9713f;
  --board-bg: #fbf3e3;
  --cell-line: rgba(120, 80, 40, 0.08);
  --board-inset: rgba(120, 70, 30, 0.28);
  --accent: #e98466;
  --accent-dark: #cf6247;
  --accent-deep: #94402a;
  --on-accent: #fffaf3;
  --popup: #ffffff;
  --heart: #e0475b;
  --gold: #ffc93c;
  --gold-dark: #f9a03f;
  --star-off: #d8c6ae;
  --good: #4f9a3c;
  --bad: #d9534f;
  --ribbon: #e2485f;
  --frost-1: #fcd3e3;
  --frost-2: #ee8db4;
  --frost-edge: #e77ea8;
  --card: #fffaf2;

  /* Leaves room above the board for the top bar, HUD, and goal on short screens. */
  --board-size: min(92vw, 480px, max(280px, calc(100vh - 290px)));
  --frame: 10px; /* wooden border around the board */
  --cell: calc(var(--board-size) / 8);
  --tile-pad: calc(var(--cell) * 0.07);
  --radius: calc(var(--cell) * 0.28);

  --move-ms: 200ms;
  --fall-ms: 340ms;
  --shuffle-ms: 600ms;
}

/* ===== Page ===== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  color: var(--text);
  background: #f5e2c6;
  touch-action: manipulation; /* no double-tap zoom */
  -webkit-tap-highlight-color: transparent;
}

/* The page background lives on a fixed layer so it stays put while scrolling,
   including on iOS, which ignores background-attachment: fixed. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-bg);
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 12px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ===== Top bar: hearts and mute ===== */
.topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  font-weight: bold;
  font-size: 1.1rem;
}

.heart { color: var(--heart); font-size: 1.3rem; }
.life-timer { margin-left: 4px; font-weight: normal; font-size: 0.85rem; color: var(--text-dim); }

.icon-btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 1.3rem;
  cursor: pointer;
}

.icon-btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

/* ===== Level map ===== */
.level-grid {
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.level-btn {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  border-radius: 50%;
  font: inherit;
  font-weight: bold;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow: 0 4px 0 var(--accent-deep), 0 6px 10px rgba(90, 50, 20, 0.25);
  cursor: pointer;
}

.level-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
.level-btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.level-btn.current { animation: pulse 1.6s ease-in-out infinite; }
.level-btn.locked { background: #dccdb9; color: #9c8a74; box-shadow: 0 4px 0 #bba78e; cursor: default; }
.level-num { font-size: 1.35rem; line-height: 1; }
.level-stars { font-size: 0.7rem; letter-spacing: 1px; color: var(--gold); }
.level-stars i { font-style: normal; color: rgba(255, 255, 255, 0.35); }
.level-btn.locked .level-stars { visibility: hidden; }

/* ===== In-level HUD ===== */
.hud {
  width: 100%;
  max-width: calc(var(--board-size) + 2 * var(--frame));
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.hud .icon-btn { align-self: center; font-size: 2rem; line-height: 1; padding-bottom: 4px; }
.hud .stat { flex: 1; min-width: 0; padding: 6px 10px; align-items: center; }
.hud .stat-score { flex: 1.6; }
#moves.low { color: var(--bad); }

.star-bar {
  position: relative;
  align-self: stretch;
  height: 10px;
  margin: 6px 10px 4px;
  border-radius: 999px;
  background: rgba(160, 100, 60, 0.18);
}

.star-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition: width 300ms ease-out;
}

.star-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 1.05rem;
  color: var(--star-off);
  text-shadow: 0 1px 0 #fff;
}

.star-mark.on { color: var(--gold); text-shadow: 0 1px 0 var(--accent-deep); }

.goal {
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 2px solid var(--panel-border);
}

.goal-item { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; }
.goal-item.done { color: var(--good); }
.goal-star { color: var(--gold); font-size: 1.4rem; }

.mini { --cell: 30px; --radius: 8px; display: inline-block; width: var(--cell); height: var(--cell); flex: none; }
.mini .tile-inner { font-size: 0; }

.mini-frost {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--frost-1);
  box-shadow: inset 0 0 0 3px var(--frost-edge);
}

/* ===== Header ===== */
.header { text-align: center; width: 100%; }

.title {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.8rem);
  letter-spacing: 0.04em;
  color: var(--title);
  text-shadow: 0 3px 0 var(--title-shadow);
}

.tagline { margin: 4px 0 12px; color: var(--text-dim); }

.stats { display: flex; justify-content: center; gap: 12px; }

.stat {
  min-width: 110px;
  padding: 8px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.stat-value { font-size: 1.6rem; font-weight: bold; }
.stat-value.bump { animation: bump 300ms ease-out; }

/* ===== Board ===== */
.board-wrap {
  position: relative;
  padding: var(--frame);
  border-radius: 22px;
  background: linear-gradient(160deg, var(--frame-light), var(--frame-dark));
  box-shadow: 0 10px 24px rgba(90, 50, 20, 0.3), inset 0 2px 0 rgba(255,255,255,0.4);
}

.board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  border-radius: 14px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background-color: var(--board-bg);
  background-image:
    linear-gradient(var(--cell-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cell-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  box-shadow: inset 0 3px 12px var(--board-inset);
}

/* ===== Tiles ===== */
/* Position comes from --r / --c; changing them animates the move. */
.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  padding: var(--tile-pad);
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  transition: transform var(--move-ms) ease-in-out;
  cursor: pointer;
}

.board.shuffling .tile { transition-duration: var(--shuffle-ms); }

.board.falling .tile {
  transition-duration: var(--fall-ms);
  transition-timing-function: cubic-bezier(0.3, 1.3, 0.6, 1);
}

.tile-inner {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * 0.56);
  line-height: 1;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 45%), var(--piece-color);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.14), 0 3px 5px rgba(90, 50, 20, 0.25);
  position: relative;
  transition: transform 120ms ease;
}

.tile-inner img { width: 82%; height: 82%; object-fit: contain; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-inner { transform: scale(1.06); }
}

.tile.selected .tile-inner {
  animation: pulse 900ms ease-in-out infinite;
  box-shadow: 0 0 0 3px #fff, 0 0 18px 4px var(--accent);
}

.tile.shake .tile-inner { animation: shake 300ms ease; }
.board .tile.pop .tile-inner { animation: pop 260ms ease-out forwards; }
.tile.hint .tile-inner { animation: wiggle 1s ease-in-out infinite; }
.tile.upgrade .tile-inner { animation: upgrade 450ms ease-out; }

/* ===== Special pieces ===== */
/* Striped: white candy stripes behind the icon; they show which way it clears. */
.sp-h .tile-inner,
.sp-v .tile-inner {
  background:
    repeating-linear-gradient(var(--stripe-angle), rgba(255,255,255,0.8) 0 9%, transparent 9% 21%),
    var(--piece-color);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.9), 0 3px 5px rgba(90, 50, 20, 0.25);
}
.sp-h .tile-inner { --stripe-angle: 0deg; }
.sp-v .tile-inner { --stripe-angle: 90deg; }

/* Gift Box: ribbon cross, frame, and a bow on top. */
.sp-wrap .tile-inner,
.sp-armed .tile-inner {
  background:
    linear-gradient(90deg, transparent 43%, var(--ribbon) 43% 57%, transparent 57%),
    linear-gradient(0deg, transparent 43%, var(--ribbon) 43% 57%, transparent 57%),
    var(--piece-color);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--ribbon), 0 3px 5px rgba(90, 50, 20, 0.25);
}
.sp-wrap .tile-inner img,
.sp-armed .tile-inner img { width: 66%; height: 66%; }
.sp-wrap .tile-inner::after,
.sp-armed .tile-inner::after {
  content: "🎀";
  position: absolute;
  top: -16%;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--cell) * 0.34);
}
.mini.sp-wrap .tile-inner::after { font-size: 11px; }
.tile.sp-armed .tile-inner { animation: armed 300ms ease-in-out infinite alternate; }

/* Sprinkle Bomb: a chocolate truffle covered in sprinkles. */
.sp-bomb .tile-inner {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, #ff7a5c 0 5%, transparent 6%),
    radial-gradient(circle at 64% 24%, #ffd84d 0 5%, transparent 6%),
    radial-gradient(circle at 72% 58%, #6cc8ff 0 5%, transparent 6%),
    radial-gradient(circle at 42% 72%, #8fe388 0 5%, transparent 6%),
    radial-gradient(circle at 24% 56%, #ff9ccc 0 5%, transparent 6%),
    radial-gradient(circle at 54% 46%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 60% 80%, #c79cff 0 5%, transparent 6%),
    radial-gradient(circle at 36% 26%, rgba(255,255,255,0.5), transparent 40%),
    radial-gradient(circle, #8a5530, #4a2814 70%);
  box-shadow: 0 0 10px 3px rgba(255, 215, 120, 0.85), 0 3px 5px rgba(90, 50, 20, 0.3);
}
.tile.sp-bomb .tile-inner { animation: spin 8s linear infinite; }

/* Butterfly: a little butterfly perched on the corner of the piece. */
.sp-fly .tile-inner { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.9), 0 3px 5px rgba(90, 50, 20, 0.25); }
.sp-fly .tile-inner::after {
  content: "🦋";
  position: absolute;
  right: -8%;
  bottom: -8%;
  font-size: calc(var(--cell) * 0.42);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  animation: flutter 700ms ease-in-out infinite alternate;
}
.mini.sp-fly .tile-inner::after { font-size: 13px; }

/* ===== Frosting under pieces ===== */
.frost {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  pointer-events: none;
}
.frost::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) * 0.8);
  background: var(--frost-1);
  box-shadow: inset 0 0 0 2px var(--frost-edge);
}
.frost.l2::before {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.55) 0 6%, transparent 6% 16%),
    var(--frost-2);
  box-shadow: inset 0 0 0 3px #d4608f;
}
.frost.crack::before { animation: crack 300ms ease-out; }
.frost.melt { animation: melt 400ms ease-out forwards; }

/* ===== Special effects ===== */
.fx { position: absolute; z-index: 2; pointer-events: none; }

.fx-row,
.fx-col { animation: beam 420ms ease-out forwards; }
.fx-row {
  left: 0;
  right: 0;
  top: calc(var(--r) * var(--cell));
  height: var(--cell);
  background: linear-gradient(180deg, transparent, rgba(255,255,240,0.95) 35% 65%, transparent);
  --beam-from: scaleX(0);
  --beam-to: scaleY(0.2);
}
.fx-col {
  top: 0;
  bottom: 0;
  left: calc(var(--c) * var(--cell));
  width: var(--cell);
  background: linear-gradient(90deg, transparent, rgba(255,255,240,0.95) 35% 65%, transparent);
  --beam-from: scaleY(0);
  --beam-to: scaleX(0.2);
}

.fx-blast {
  left: calc((var(--c) - var(--radius)) * var(--cell));
  top: calc((var(--r) - var(--radius)) * var(--cell));
  width: calc((var(--radius) * 2 + 1) * var(--cell));
  height: calc((var(--radius) * 2 + 1) * var(--cell));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,235,0.95) 0 25%, rgba(255,170,110,0.7) 50%, transparent 70%);
  animation: blast 420ms ease-out forwards;
}
.fx-sprinkle {
  background: conic-gradient(#ff7a5c, #ffd84d, #8fe388, #6cc8ff, #c79cff, #ff9ccc, #ff7a5c);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.fx-spark {
  left: calc(var(--c) * var(--cell));
  top: calc(var(--r) * var(--cell));
  width: var(--cell);
  height: var(--cell);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, rgba(255, 230, 140, 0.8) 40%, transparent 70%);
  animation: blast 420ms ease-out forwards;
}
.fx-fly {
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * 0.6);
  animation: fly 420ms ease-in-out forwards;
}
.fx-fly::before { content: "🦋"; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }

.fx-board {
  inset: 0;
  background: radial-gradient(circle, #fff 0 30%, rgba(255, 220, 160, 0.8) 60%, transparent 90%);
  animation: blast 520ms ease-out forwards;
}

/* ===== Feedback overlays ===== */
.popup {
  position: absolute;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--popup);
  text-shadow: 0 2px 0 var(--accent-deep), 0 0 6px var(--accent-deep);
  animation: float-up 800ms ease-out forwards;
}

.banner {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 12%;
  text-align: center;
  pointer-events: none;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: bold;
  color: var(--accent-dark);
  text-shadow:
    2px 2px 0 var(--on-accent), -2px -2px 0 var(--on-accent),
    2px -2px 0 var(--on-accent), -2px 2px 0 var(--on-accent),
    0 6px 0 var(--accent-deep), 0 0 24px rgba(255, 250, 240, 0.9);
  opacity: 0;
}

.banner.show { animation: banner 900ms ease-out; }

/* ===== Cards: level start, win, lose, quit ===== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(70, 40, 20, 0.45);
}

.card {
  width: 100%;
  max-width: 360px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  text-align: center;
  background: var(--card);
  border: 4px solid var(--frame-light);
  box-shadow: 0 16px 40px rgba(60, 30, 10, 0.4);
  animation: card-in 260ms ease-out;
}

.card h2 { margin: 0 0 6px; color: var(--title); font-size: 1.6rem; }
.card p { margin: 8px 0; line-height: 1.4; }
.card-big { font-size: 2rem; font-weight: bold; }
.card-big.lost { color: var(--heart); }
.card-tip { color: var(--text-dim); font-size: 0.95rem; }

.card-stars { display: flex; justify-content: center; gap: 6px; font-size: 2.6rem; line-height: 1.1; }
.card-stars span { color: var(--star-off); }
.card-stars span.on {
  color: var(--gold);
  text-shadow: 0 3px 0 var(--gold-dark);
  animation: star-pop 400ms ease-out both;
  animation-delay: calc(350ms + var(--i) * 300ms);
}

.card-order { display: flex; justify-content: center; gap: 18px; margin: 10px 0; }
.card-order span { display: flex; align-items: center; gap: 6px; font-size: 1.1rem; }
.card-order .mini { --cell: 38px; }

.card-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.btn.btn-quiet { color: var(--text); background: #efe2d0; box-shadow: 0 4px 0 #cdb79c, 0 6px 12px rgba(90, 50, 20, 0.15); }
.btn.btn-quiet:active { box-shadow: 0 1px 0 #cdb79c; }

/* ===== Controls & instructions ===== */
.btn {
  font: inherit;
  font-weight: bold;
  font-size: 1.05rem;
  padding: 10px 28px;
  border: none;
  border-radius: 999px;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow: 0 4px 0 var(--accent-deep), 0 6px 12px rgba(90, 50, 20, 0.3);
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep), 0 2px 6px rgba(90, 50, 20, 0.3); }
.btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }

.howto {
  width: 100%;
  max-width: calc(var(--board-size) + 2 * var(--frame));
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  color: var(--text-dim);
}

.howto summary { cursor: pointer; font-weight: bold; color: var(--text); }
.howto ul { margin: 8px 0 2px; padding-left: 20px; line-height: 1.5; }

/* ===== Animations ===== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-12%); }
  75% { transform: translateX(12%); }
}

@keyframes pop {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.3); opacity: 1; filter: brightness(1.5); }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes float-up {
  0% { transform: translate(-50%, 0) scale(0.8); opacity: 0; }
  20% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50px) scale(1); opacity: 0; }
}

@keyframes banner {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); color: var(--accent); }
  100% { transform: scale(1); }
}

/* ===== Reduced motion: keep feedback, drop the bouncing ===== */
@media (prefers-reduced-motion: reduce) {
  :root { --move-ms: 1ms; --fall-ms: 1ms; --shuffle-ms: 1ms; }
  .tile.selected .tile-inner { animation: none; }
  .tile.shake .tile-inner,
  .tile.hint .tile-inner,
  .tile.upgrade .tile-inner,
  .tile.sp-bomb .tile-inner,
  .tile.sp-armed .tile-inner,
  .sp-fly .tile-inner::after,
  .level-btn.current { animation: none; }
  .fx { animation-name: fade-out; }
  .card, .card-stars span.on { animation: none; }
  .board .tile.pop .tile-inner { animation: fade-out 200ms forwards; }
  .tile:hover .tile-inner { transform: none; }
  .popup, .banner.show { animation-name: fade-in-out; }
}

@keyframes wiggle {
  0%, 60%, 100% { transform: rotate(0); }
  70% { transform: rotate(-10deg) scale(1.06); }
  80% { transform: rotate(10deg) scale(1.06); }
  90% { transform: rotate(-6deg); }
}

@keyframes upgrade {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.25); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes armed {
  from { transform: scale(1); filter: brightness(1.1); }
  to { transform: scale(1.12); filter: brightness(1.6) drop-shadow(0 0 6px #fff); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes flutter {
  from { transform: rotate(-12deg) scaleX(1); }
  to { transform: rotate(8deg) scaleX(0.7); }
}

@keyframes fly {
  0% { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(0.7); }
  50% { transform: translate(calc((var(--c) + var(--tc)) * 50%), calc((var(--r) + var(--tr)) * 50% - 60%)) scale(1.3); }
  100% { transform: translate(calc(var(--tc) * 100%), calc(var(--tr) * 100%)) scale(1); opacity: 0.9; }
}

@keyframes beam {
  0% { transform: var(--beam-from); opacity: 1; }
  45% { transform: none; opacity: 1; }
  100% { transform: var(--beam-to); opacity: 0; }
}

@keyframes blast {
  0% { transform: scale(0.2); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes crack {
  0% { transform: scale(1); }
  40% { transform: scale(0.85); filter: brightness(1.2); }
  100% { transform: scale(1); }
}

@keyframes melt { to { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(0.3); opacity: 0; } }

@keyframes card-in {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes star-pop {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in-out { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }