:root {
  --bg-cream: #fff7df;
  --bg-soft: #fffdf3;
  --card-cream: rgba(255, 252, 241, 0.92);
  --line-gold: #f1c84d;
  --shadow-warm: rgba(167, 84, 13, 0.18);
  --text-strong: #7c2f0a;
  --text-soft: #a4581d;
  --cheese: #ffc931;
  --cheese-deep: #efab00;
  --tomato: #ff5a4f;
  --pepperoni: #f03f62;
  --basil: #29c06f;
  --mushroom: #8b5a34;
  --cream-chip: #fff3bb;
  --teal: #2bc8c3;
  --slot: #fff3c9;
  --slot-shadow: rgba(224, 169, 17, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", sans-serif;
  color: var(--text-strong);
  background:
    radial-gradient(circle at top left, #fff9df 0%, transparent 28%),
    radial-gradient(circle at top right, #ffe7ef 0%, transparent 22%),
    linear-gradient(180deg, #fffbed 0%, #ffeeb9 100%);
}

button {
  font: inherit;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}

.hidden {
  display: none !important;
}

.app-shell {
  min-height: 100vh;
  padding: 18px 14px 28px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.phone-frame {
  width: min(100%, 430px);
  padding: 18px 16px 28px;
  border-radius: 36px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 229, 0.98)),
    linear-gradient(180deg, #ffea8d, #fff0bc);
  border: 4px solid #6a4cff;
  box-shadow: 0 30px 60px rgba(102, 69, 236, 0.16);
  position: relative;
  overflow: hidden;
}

.phone-frame::before,
.phone-frame::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(0.3px);
  pointer-events: none;
}

.phone-frame::before {
  width: 180px;
  height: 180px;
  top: -48px;
  right: -62px;
  background: radial-gradient(circle, rgba(255, 111, 145, 0.24) 0%, rgba(255, 111, 145, 0) 72%);
}

.phone-frame::after {
  width: 220px;
  height: 220px;
  bottom: 120px;
  left: -100px;
  background: radial-gradient(circle, rgba(255, 205, 42, 0.25) 0%, rgba(255, 205, 42, 0) 74%);
}

.top-bar,
.hero-card,
.recipe-card,
.board-card,
.pizza-picker-card,
.message-strip,
.action-row,
.meta-row {
  position: relative;
  z-index: 1;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffef9, #ffeeb9);
  box-shadow: 0 10px 18px rgba(224, 170, 17, 0.2);
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 10px 0;
  flex: none;
}

.icon-button span {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: var(--text-soft);
  display: block;
}

.brand-block,
.top-bar-spacer {
  flex: 1;
}

.eyebrow,
.section-label,
.hero-tag {
  margin: 0;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--pepperoni);
}

.brand-block h1,
.hero-copy h2,
.recipe-header h3,
.board-header h3 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  line-height: 1;
}

.brand-block h1 {
  margin-top: 2px;
  font-size: 1.9rem;
}

.top-stats {
  display: flex;
  gap: 8px;
}

.stat-pill,
.moves-pill,
.drop-badge {
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(224, 170, 17, 0.18);
  font-weight: 800;
}

.stat-pill {
  padding: 10px 12px;
  min-width: 74px;
  background: linear-gradient(180deg, #fffdf7, #ffe8a5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.stat-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.moves-icon {
  position: relative;
  width: 12px;
  height: 16px;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(124, 47, 10, 0.18));
}

.moves-icon::before,
.moves-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.moves-icon::before {
  top: -1px;
  border-bottom: 6px solid #fff8f0;
}

.moves-icon::after {
  bottom: -1px;
  border-top: 6px solid #fff8f0;
}

.moves-icon__shaft {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8, #ffe8d4);
}

.stat-heart {
  font-size: 0.95rem;
  line-height: 1;
  color: #ef3f62;
  text-shadow: 0 2px 8px rgba(239, 63, 98, 0.22);
}

.coin {
  background: linear-gradient(180deg, #ffd84b, #f4aa00);
}

.fragment {
  background: linear-gradient(180deg, #ff7696, #ef3f61);
}

.stat-pill-life {
  min-width: 84px;
  background: linear-gradient(180deg, #fff8fd, #ffd9e4);
}

.hero-card,
.recipe-card,
.board-card,
.pizza-picker-card {
  margin-top: 16px;
  border-radius: 30px;
  padding: 18px;
  background: var(--card-cream);
  border: 3px solid rgba(255, 216, 76, 0.9);
  box-shadow: 0 18px 32px rgba(221, 166, 38, 0.16);
}

.hero-card {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 28%),
    linear-gradient(135deg, rgba(255, 245, 189, 0.95), rgba(255, 212, 79, 0.95));
  text-align: center;
}

.board-card--stage {
  padding-top: 14px;
  padding-bottom: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(255, 250, 232, 0.98), rgba(255, 229, 150, 0.95));
}

.hero-card--tray {
  padding-top: 14px;
  padding-bottom: 16px;
}

.recipe-card {
  margin-top: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, rgba(255, 251, 236, 0.98), rgba(255, 237, 170, 0.94));
}

.pizza-picker-card {
  margin-top: 14px;
  padding: 14px 18px 18px;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgba(255, 247, 211, 0.96), rgba(255, 224, 140, 0.94));
}

.pizza-button {
  margin: 18px auto 12px;
  width: 206px;
  height: 206px;
  border-radius: 50%;
  background: none;
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  outline: none;
}

.pizza-button:focus,
.pizza-button:active,
.pizza-button:focus-visible {
  outline: none;
  background: none;
}

.pizza-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 229, 121, 0.95) 0%, rgba(255, 162, 0, 0.55) 58%, rgba(255, 162, 0, 0) 74%);
}

.timing-ring {
  --zone-start: 0deg;
  --zone-size: 48deg;
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 10px solid rgba(255, 230, 144, 0.7);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.42);
  overflow: visible;
}

.timing-ring::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    conic-gradient(
      from var(--zone-start),
      rgba(255, 255, 255, 0.98) 0deg,
      rgba(255, 248, 214, 0.98) calc(var(--zone-size) * 0.45),
      rgba(255, 227, 132, 0.9) calc(var(--zone-size) * 0.72),
      rgba(255, 255, 255, 0) var(--zone-size)
    );
  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 18px),
      #000 calc(100% - 18px),
      #000 calc(100% - 7px),
      transparent calc(100% - 7px)
    );
  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 18px),
      #000 calc(100% - 18px),
      #000 calc(100% - 7px),
      transparent calc(100% - 7px)
    );
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 22px rgba(255, 244, 181, 0.75);
  pointer-events: none;
  z-index: 3;
  animation: ring-glow-sweep 1.25s ease-in-out infinite alternate;
}

.timing-ring::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    conic-gradient(
      from var(--zone-start),
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0.98) 4deg,
      rgba(255, 255, 255, 0) 10deg,
      rgba(255, 255, 255, 0) calc(var(--zone-size) - 10deg),
      rgba(255, 248, 220, 0.98) calc(var(--zone-size) - 4deg),
      rgba(255, 255, 255, 0) var(--zone-size)
    );
  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 18px),
      #000 calc(100% - 18px),
      #000 calc(100% - 7px),
      transparent calc(100% - 7px)
    );
  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 18px),
      #000 calc(100% - 18px),
      #000 calc(100% - 7px),
      transparent calc(100% - 7px)
    );
  filter: blur(1px);
  opacity: 0.92;
  pointer-events: none;
  z-index: 4;
  animation: ring-edge-pulse 900ms ease-in-out infinite alternate;
}

@keyframes ring-glow-sweep {
  0% {
    opacity: 0.82;
    filter: brightness(0.98) saturate(1);
  }
  100% {
    opacity: 1;
    filter: brightness(1.12) saturate(1.08);
  }
}

@keyframes ring-edge-pulse {
  0% {
    opacity: 0.7;
    transform: scale(0.998);
  }
  100% {
    opacity: 1;
    transform: scale(1.004);
  }
}

.timing-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 102px;
  margin-left: -5px;
  margin-top: -102px;
  transform-origin: bottom center;
  filter: drop-shadow(0 3px 6px rgba(124, 47, 10, 0.35));
}

.timing-pointer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 24px solid #ff4f74;
  filter: drop-shadow(0 4px 6px rgba(239, 63, 98, 0.34));
}

.timing-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: 10px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6fb, #ff6f92 22%, #ef3f62 68%, #942041 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 245, 250, 0.5),
    0 4px 10px rgba(148, 32, 65, 0.28);
}

.pizza-art {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 50% 52%, #5b2f10 0 56%, #2f1406 57% 65%, #8b4d17 66% 71%, transparent 72%);
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.18),
    inset 0 -10px 16px rgba(0, 0, 0, 0.18),
    0 12px 24px rgba(147, 64, 12, 0.22);
  border: 6px solid #74411a;
}

.pizza-center {
  position: relative;
  z-index: 1;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffd86f 0 56%, #f59f1f 57% 66%, #8c4c19 67% 72%, transparent 73%),
    radial-gradient(circle at 35% 38%, #ff6359 0 7%, transparent 8%),
    radial-gradient(circle at 63% 36%, #ff6359 0 7%, transparent 8%),
    radial-gradient(circle at 47% 60%, #ff6359 0 7%, transparent 8%),
    radial-gradient(circle at 57% 53%, #ff6359 0 7%, transparent 8%),
    radial-gradient(circle at 31% 57%, #ffe98c 0 8%, transparent 9%),
    radial-gradient(circle at 67% 62%, #ffe98c 0 8%, transparent 9%),
    radial-gradient(circle at 44% 29%, #8c5b38 0 6%, transparent 7%),
    radial-gradient(circle at 70% 46%, #8c5b38 0 6%, transparent 7%),
    radial-gradient(circle at 40% 72%, #2ebf6f 0 4%, transparent 5%),
    radial-gradient(circle at 58% 27%, #2ebf6f 0 4%, transparent 5%);
  box-shadow:
    inset 0 8px 16px rgba(255, 255, 255, 0.28),
    0 10px 18px rgba(124, 47, 10, 0.24);
  border: 4px solid rgba(255, 248, 226, 0.98);
}

.streak-pop {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  z-index: 9;
  font-family: "Baloo 2", sans-serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff7fb;
  text-shadow:
    0 2px 0 #ff5a4f,
    0 4px 0 #ef3f62,
    0 10px 18px rgba(239, 63, 98, 0.34);
  opacity: 0;
  pointer-events: none;
}

.streak-pop.show {
  animation: streak-pop-burst 720ms cubic-bezier(0.18, 0.8, 0.24, 1) forwards;
}

@keyframes streak-pop-burst {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(0.65);
  }
  18% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.15);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) translateY(-12px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-34px) scale(0.94);
  }
}

.confetti-piece {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 16px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: confetti-burst 700ms ease-out forwards;
}

@keyframes confetti-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + (var(--burst-x) * 1px)),
        calc(-50% + (var(--burst-y) * 1px))
      )
      rotate(var(--burst-rotate))
      scale(1);
  }
}

.recipe-header,
.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recipe-header h3,
.board-header h3 {
  margin-top: 4px;
  font-size: 1.45rem;
}

.hero-recipe-header {
  align-items: flex-start;
}

.hero-recipe-header h3 {
  font-size: 1.28rem;
}

.moves-pill {
  padding: 9px 14px;
  background: linear-gradient(180deg, #ff6949, #e43c26);
  color: #fff8f0;
  white-space: nowrap;
}

.moves-pill.danger {
  animation: pulse 0.9s infinite alternate;
}

@keyframes pulse {
  from {
    transform: scale(1);
    box-shadow: 0 10px 18px rgba(228, 60, 38, 0.26);
  }
  to {
    transform: scale(1.04);
    box-shadow: 0 14px 24px rgba(228, 60, 38, 0.42);
  }
}

.recipe-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.recipe-card .recipe-list {
  margin-top: 0;
}

.recipe-chip {
  padding: 10px 5px 8px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fffdf5, #ffe7a1);
  border: 2px solid rgba(241, 200, 77, 0.9);
  text-align: center;
  box-shadow: 0 12px 18px rgba(223, 174, 41, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  position: relative;
  overflow: visible;
}

.recipe-chip.done {
  background: linear-gradient(180deg, #e6ffe8, #baf5c9);
  border-color: rgba(41, 192, 111, 0.7);
  box-shadow:
    0 14px 24px rgba(56, 181, 107, 0.22),
    inset 0 0 18px rgba(255, 255, 255, 0.36);
  transform: translateY(-1px);
  animation: recipe-done-glow 1.5s ease-in-out infinite alternate;
}

.recipe-chip:not(.done) {
  filter: saturate(0.96) brightness(0.98);
}

.recipe-icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  margin: 0 auto 5px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow:
    inset 0 6px 12px rgba(255, 255, 255, 0.68),
    inset 0 -6px 10px rgba(124, 47, 10, 0.08),
    0 8px 12px rgba(223, 174, 41, 0.16);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.recipe-icon::after {
  content: "";
  position: absolute;
  inset: 4px 7px auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  filter: blur(0.2px);
}

.recipe-chip.done .recipe-icon {
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, 0.74),
    inset 0 -6px 10px rgba(41, 192, 111, 0.1),
    0 0 0 2px rgba(144, 240, 179, 0.34),
    0 12px 16px rgba(56, 181, 107, 0.18);
}

.recipe-chip.done .recipe-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(212, 255, 224, 0.38) 0%, rgba(212, 255, 224, 0) 68%);
  pointer-events: none;
}

.ingredient-glyph {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  filter: drop-shadow(0 2px 2px rgba(124, 47, 10, 0.12));
}

.tile-symbol .ingredient-glyph,
.volcano-flight-piece .ingredient-glyph {
  width: 22px;
  height: 22px;
  filter:
    drop-shadow(0 2px 3px rgba(124, 47, 10, 0.16))
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.16));
}

.ingredient-glyph.tomato {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,0.72) 0 10%, transparent 11%),
    linear-gradient(180deg, #ff8d79, #e9483a 72%);
  box-shadow: inset 0 -3px 4px rgba(160, 35, 25, 0.2);
}

.ingredient-glyph.tomato::before,
.ingredient-glyph.mushroom::before,
.ingredient-glyph.mushroom::after,
.ingredient-glyph.pepperoni::before,
.ingredient-glyph.pepperoni::after,
.ingredient-glyph.basil::before,
.ingredient-glyph.chicken::before,
.ingredient-glyph.chicken::after,
.ingredient-glyph.onion::before,
.ingredient-glyph.corn::before,
.ingredient-glyph.olive::before,
.ingredient-glyph.pineapple::before,
.ingredient-glyph.pineapple::after,
.ingredient-glyph.bacon::before,
.ingredient-glyph.bacon::after,
.ingredient-glyph.shrimp::before {
  content: "";
  position: absolute;
}

.ingredient-glyph.tomato::before {
  left: 50%;
  top: -2px;
  width: 8px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 2px 2px 6px 6px;
  background: #29c06f;
}

.ingredient-glyph.cheese {
  width: 20px;
  height: 16px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,0.62) 0 10%, transparent 11%),
    linear-gradient(180deg, #ffe681, #ffc628);
  clip-path: polygon(0 0, 100% 12%, 82% 100%, 0 100%);
  box-shadow: inset 0 -3px 4px rgba(176, 118, 7, 0.16);
}

.ingredient-glyph.mushroom::before {
  left: 1px;
  right: 1px;
  top: 2px;
  height: 9px;
  border-radius: 10px 10px 6px 6px;
  background:
    radial-gradient(circle at 36% 24%, rgba(255,255,255,0.52) 0 12%, transparent 13%),
    linear-gradient(180deg, #ddb493, #8b5a34);
}

.ingredient-glyph.mushroom::after {
  left: 6px;
  top: 9px;
  width: 6px;
  height: 8px;
  border-radius: 0 0 4px 4px;
  background: #fff3db;
}

.ingredient-glyph.pepperoni {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.75) 0 10%, transparent 11%),
    radial-gradient(circle at 65% 40%, rgba(255,255,255,0.6) 0 8%, transparent 9%),
    radial-gradient(circle at 42% 62%, rgba(255, 188, 198, 0.36) 0 9%, transparent 10%),
    linear-gradient(180deg, #ff7a85, #d82f46);
  box-shadow: inset 0 -3px 5px rgba(135, 22, 43, 0.22);
}

.ingredient-glyph.pepperoni::before,
.ingredient-glyph.pepperoni::after {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 228, 188, 0.85);
}

.ingredient-glyph.pepperoni::before {
  left: 5px;
  top: 6px;
}

.ingredient-glyph.pepperoni::after {
  right: 4px;
  bottom: 5px;
}

.ingredient-glyph.basil {
  width: 14px;
  height: 18px;
  border-radius: 50% 0 50% 0;
  transform: rotate(45deg);
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,0.55) 0 10%, transparent 11%),
    linear-gradient(180deg, #62dc8e, #1fa95d);
}

.ingredient-glyph.basil::before {
  left: 6px;
  top: 2px;
  width: 2px;
  height: 13px;
  border-radius: 2px;
  background: rgba(255,255,255,0.42);
}

.ingredient-glyph.chicken {
  width: 16px;
  height: 14px;
  border-radius: 10px 10px 9px 9px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.45) 0 10%, transparent 11%),
    linear-gradient(180deg, #f6ca78, #d28b30);
  box-shadow: inset 0 -3px 4px rgba(140, 82, 22, 0.18);
}

.ingredient-glyph.chicken::before {
  right: -3px;
  top: 4px;
  width: 8px;
  height: 4px;
  border-radius: 4px;
  background: #fff7ef;
}

.ingredient-glyph.chicken::after {
  right: -1px;
  top: 1px;
  width: 4px;
  height: 10px;
  border-radius: 4px;
  background: #fff7ef;
}

.ingredient-glyph.onion {
  border-radius: 50%;
  border: 3px solid #a67cf3;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.45),
    0 0 0 1px rgba(166,124,243,0.22);
}

.ingredient-glyph.corn {
  width: 14px;
  height: 18px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,0.52) 0 8%, transparent 9%),
    linear-gradient(180deg, #ffe66d, #e8bc10);
}

.ingredient-glyph.corn::before {
  left: -2px;
  top: 3px;
  width: 18px;
  height: 12px;
  border-radius: 10px;
  border-left: 3px solid #29c06f;
  border-right: 3px solid #29c06f;
}

.ingredient-glyph.olive {
  border-radius: 50%;
  border: 4px solid #476451;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.ingredient-glyph.olive::before {
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.ingredient-glyph.pineapple {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-radius: 4px;
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,0.48) 0 8%, transparent 9%),
    linear-gradient(180deg, #ffe27d, #ffb827);
}

.ingredient-glyph.pineapple::before {
  left: 4px;
  top: -5px;
  width: 8px;
  height: 6px;
  background: linear-gradient(180deg, #64d78f, #1fa95d);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ingredient-glyph.pineapple::after {
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(231, 171, 31, 0.12);
}

.ingredient-glyph.bacon {
  width: 18px;
  height: 12px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.35) 0 14%, transparent 14% 28%, rgba(255,255,255,0.32) 28% 42%, transparent 42% 56%, rgba(255,255,255,0.3) 56% 70%, transparent 70%),
    linear-gradient(180deg, #ff9c85, #cf5545);
  box-shadow: inset 0 -3px 4px rgba(124, 47, 10, 0.12);
}

.ingredient-glyph.bacon::before,
.ingredient-glyph.bacon::after {
  top: 2px;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 235, 220, 0.4);
}

.ingredient-glyph.bacon::before {
  left: 5px;
}

.ingredient-glyph.bacon::after {
  right: 4px;
}

.ingredient-glyph.shrimp {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid #ff9a76;
  border-left-color: transparent;
  transform: rotate(35deg);
  box-shadow: 0 0 0 1px rgba(255, 180, 163, 0.12);
}

.ingredient-glyph.shrimp::before {
  right: -1px;
  top: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffb9a5;
}

.recipe-chip strong {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--text-soft);
}

.board-card {
  margin-top: 12px;
  padding-top: 14px;
}

.board-card--stage .game-board {
  margin-top: 0;
}

.stage-tray {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 248px;
}

.tray-decor {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 108px;
  transform: translateY(-50%);
  opacity: 0.68;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(164, 105, 18, 0.14));
}

.tray-decor::before,
.tray-decor::after {
  content: "";
  position: absolute;
}

.tray-decor--fork {
  left: 4px;
}

.tray-decor--fork::before {
  left: 16px;
  top: 18px;
  width: 10px;
  height: 74px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 251, 239, 0.96), rgba(232, 179, 76, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.tray-decor--fork::after {
  left: 11px;
  top: 4px;
  width: 20px;
  height: 22px;
  background:
    linear-gradient(90deg,
      transparent 0 2px,
      rgba(255, 249, 236, 0.96) 2px 5px,
      transparent 5px 7px,
      rgba(255, 249, 236, 0.96) 7px 10px,
      transparent 10px 12px,
      rgba(255, 249, 236, 0.96) 12px 15px,
      transparent 15px 17px,
      rgba(255, 249, 236, 0.96) 17px 20px);
  border-radius: 6px 6px 10px 10px;
  filter: drop-shadow(0 2px 0 rgba(231, 177, 72, 0.65));
}

.tray-decor--cup {
  right: 4px;
}

.tray-decor--cup::before {
  left: 8px;
  top: 30px;
  width: 30px;
  height: 44px;
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(243, 200, 110, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    inset 0 -8px 12px rgba(196, 128, 21, 0.18);
}

.tray-decor--cup::after {
  left: 3px;
  top: 20px;
  width: 40px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(240, 198, 104, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.tray-decor--cup {
  background:
    radial-gradient(circle at 35px 52px, transparent 0 8px, rgba(240, 198, 104, 0.98) 8px 12px, transparent 12px),
    radial-gradient(circle at 22px 18px, rgba(255,255,255,0.42) 0 6px, transparent 6px);
}

.game-board {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.board-cell {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #fffce7, #ffeec1);
  box-shadow:
    inset 0 -4px 8px rgba(224, 170, 17, 0.18),
    0 8px 14px rgba(224, 170, 17, 0.1);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.14s ease, box-shadow 0.14s ease, outline 0.14s ease;
}

.board-cell.occupied {
  cursor: pointer;
}

.board-cell.selected {
  outline: 4px solid rgba(240, 63, 98, 0.45);
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 -4px 8px rgba(224, 170, 17, 0.18),
    0 12px 18px rgba(240, 63, 98, 0.18);
}

.board-cell.hint {
  animation: wiggle 0.25s ease 2;
}

@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.tile {
  width: 80%;
  height: 80%;
  border-radius: 18px;
  position: relative;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 5px 12px rgba(255, 255, 255, 0.58),
    0 8px 14px rgba(122, 63, 10, 0.18);
}

.tile.rare {
  border: 1px solid rgba(255, 246, 173, 0.84);
  box-shadow:
    inset 0 5px 12px rgba(255, 255, 255, 0.64),
    0 0 0 2px rgba(255, 220, 96, 0.26),
    0 10px 18px rgba(255, 177, 44, 0.22);
}

.tile.rare::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 42%, rgba(255,212,79,0.3));
  z-index: 0;
  pointer-events: none;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 10% 14% auto;
  height: 18%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.tile-symbol {
  position: relative;
  z-index: 1;
  font-size: 1.32rem;
}

.tile-symbol::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 72%);
  z-index: -1;
}

.tile.rare .tile-symbol::before {
  background: radial-gradient(circle, rgba(255, 243, 182, 0.28) 0%, rgba(255,255,255,0) 74%);
}

.tile-cheese {
  background: linear-gradient(180deg, #ffe87f, #ffc517);
}

.tile-tomato {
  background: linear-gradient(180deg, #ff8a79, #ff5548);
}

.tile-mushroom {
  background: linear-gradient(180deg, #d4a57e, #9b6032);
}

.tile-pepperoni {
  background: linear-gradient(180deg, #ff7594, #ef3f62);
}

.tile-basil {
  background: linear-gradient(180deg, #73e699, #2abf70);
}

.recipe-chip.done strong {
  color: #179d56;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

.recipe-spark-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.recipe-spark {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: linear-gradient(180deg, #fffdf2, #ffd44f);
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  box-shadow: 0 0 12px rgba(255, 215, 76, 0.56);
  animation: recipe-spark-burst 620ms ease-out forwards;
}

@keyframes recipe-spark-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.45);
  }
  18% {
    opacity: 1;
    transform: translate(0, -6px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.72);
  }
}

@keyframes recipe-done-glow {
  0% {
    box-shadow:
      0 12px 20px rgba(56, 181, 107, 0.18),
      inset 0 0 16px rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow:
      0 16px 28px rgba(56, 181, 107, 0.28),
      inset 0 0 20px rgba(255, 255, 255, 0.42);
  }
}

.message-strip {
  width: 100%;
  margin-top: 10px;
  min-height: 56px;
  padding: 10px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(123, 47, 10, 0.96), rgba(88, 31, 6, 0.98));
  border: 2px solid rgba(255, 212, 93, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 206, 0.16),
    0 12px 20px rgba(95, 37, 7, 0.22);
  color: #fff7e8;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.message-strip--tray {
  width: 100%;
  margin: 12px 0 0;
}

.message-strip.success {
  color: #1dbd68;
}

.inventory-modal {
  max-width: 360px;
}

.inventory-slots {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.inventory-slot {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  position: relative;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #fffdf6, #ffe7a3);
  border: 2px solid rgba(241, 200, 77, 0.78);
  box-shadow:
    inset 0 6px 12px rgba(255, 255, 255, 0.42),
    0 10px 18px rgba(223, 174, 41, 0.14);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.inventory-slot--empty::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 2px dashed rgba(214, 166, 41, 0.48);
  opacity: 0.8;
}

.inventory-slot::after {
  content: "";
  position: absolute;
  inset: auto 10px 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(124, 47, 10, 0.06);
  filter: blur(3px);
}

.inventory-pizza {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  border: 3px solid rgba(255, 248, 226, 0.96);
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, 0.18),
    0 10px 16px rgba(124, 47, 10, 0.16);
  z-index: 1;
}

.inventory-slot__count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ff6d89, #ef3f62);
  color: #fffdf8;
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 6px 12px rgba(239, 63, 98, 0.22);
  z-index: 2;
}

.inventory-slot__label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  font-size: 0.6rem;
  line-height: 1.05;
  font-weight: 800;
  color: var(--text-soft);
  text-align: center;
  z-index: 1;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(83, 38, 5, 0.36);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 9999;
}

.result-modal {
  width: min(100%, 380px);
  border-radius: 32px;
  background: linear-gradient(180deg, #fffdf4, #ffe39b);
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 24px 40px rgba(137, 71, 14, 0.26);
  position: relative;
  z-index: 10000;
}

.result-badge {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6985, #ef3f62);
  color: white;
  font-weight: 800;
}

.result-modal h2 {
  margin: 14px 0 0;
  font-family: "Baloo 2", sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.result-modal p {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-weight: 700;
  line-height: 1.4;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.result-stat {
  border-radius: 22px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.55);
}

.result-stat span {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-soft);
}

.result-stat strong {
  display: block;
  margin-top: 6px;
  font-family: "Baloo 2", sans-serif;
  font-size: 1.5rem;
}

.result-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.volcano-modal {
  background:
    radial-gradient(circle at top, rgba(255, 170, 120, 0.34), rgba(255, 170, 120, 0) 34%),
    linear-gradient(180deg, #fff7e8, #ffd59a);
}

.volcano-panel {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.volcano-countdown {
  min-width: 138px;
  padding: 10px 16px 8px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 236, 183, 0.96));
  box-shadow: 0 12px 22px rgba(161, 85, 16, 0.16);
}

.volcano-countdown-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.volcano-countdown strong {
  display: block;
  margin-top: 2px;
  font-family: "Baloo 2", sans-serif;
  font-size: 1.65rem;
  line-height: 1;
}

.volcano-button {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 50% 83%, rgba(255, 139, 72, 0.3), rgba(255, 139, 72, 0) 46%),
    radial-gradient(circle at 50% 50%, rgba(255, 220, 154, 0.12), rgba(255, 220, 154, 0) 70%);
  box-shadow:
    0 18px 34px rgba(122, 49, 14, 0.22),
    inset 0 -10px 18px rgba(255, 228, 171, 0.08);
  transform: translateY(0) scale(1);
  animation: volcano-button-idle 760ms ease-in-out infinite alternate;
  overflow: hidden;
}

.volcano-button::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 246, 214, 0.75);
  box-shadow: 0 0 22px rgba(255, 222, 146, 0.62);
  opacity: 0.75;
}

.volcano-button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 132px;
  height: 116px;
  transform: translateX(-50%);
  border-radius: 44% 44% 22% 22% / 54% 54% 16% 16%;
  clip-path: polygon(50% 0%, 88% 22%, 100% 100%, 0 100%, 12% 22%);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.16) 0 10%, transparent 10% 24%, rgba(255,255,255,0.08) 24% 31%, transparent 31% 100%),
    linear-gradient(180deg, #8f4a24 0%, #6a3018 38%, #4a1d10 72%, #2e0f08 100%);
  box-shadow:
    inset 0 16px 18px rgba(255, 210, 159, 0.18),
    inset -12px -10px 16px rgba(37, 12, 5, 0.28),
    0 10px 16px rgba(83, 28, 9, 0.16);
}

.volcano-button.pressed {
  animation: none;
  transform: translateY(6px) scale(0.965);
  box-shadow: 0 8px 16px rgba(122, 49, 14, 0.22);
}

.volcano-button.pressed::after {
  opacity: 0.42;
}

@keyframes volcano-button-idle {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 16px 30px rgba(122, 49, 14, 0.24);
  }
  100% {
    transform: translateY(4px) scale(0.985);
    box-shadow: 0 10px 20px rgba(122, 49, 14, 0.2);
  }
}

.volcano-core,
.volcano-lava {
  position: absolute;
  pointer-events: none;
}

.volcano-core {
  left: 50%;
  bottom: 90px;
  width: 68px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 50% 50% 42% 42% / 90% 90% 34% 34%;
  background:
    radial-gradient(circle at 50% 38%, #160704 0 28%, #2d0e08 29% 54%, rgba(45, 14, 8, 0) 55%),
    radial-gradient(circle at 50% 70%, rgba(255, 152, 95, 0.24) 0 18%, rgba(255, 152, 95, 0) 19%);
  box-shadow:
    0 5px 8px rgba(43, 11, 4, 0.25),
    inset 0 4px 6px rgba(255, 203, 154, 0.12);
}

.volcano-lava {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 246, 204, 0.95) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 34%, rgba(255, 144, 70, 0.92) 0 11%, transparent 12%),
    radial-gradient(circle at 40% 58%, rgba(255, 127, 52, 0.78) 0 7%, transparent 8%),
    radial-gradient(circle at 60% 56%, rgba(255, 127, 52, 0.78) 0 7%, transparent 8%),
    linear-gradient(180deg, transparent 0 46%, rgba(255, 129, 43, 0.82) 47% 52%, transparent 53% 100%),
    linear-gradient(180deg, transparent 0 52%, rgba(255, 189, 86, 0.56) 53% 60%, transparent 61% 100%);
  animation: lava-pulse 0.7s ease-in-out infinite alternate;
}

.volcano-eruption {
  position: absolute;
  left: 50%;
  bottom: 56%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 246, 204, 1) 0 18%, rgba(255, 156, 87, 0.95) 19% 54%, rgba(255, 95, 54, 0.85) 55% 76%, rgba(255, 95, 54, 0) 77%);
  box-shadow:
    0 0 18px rgba(255, 240, 187, 0.9),
    0 0 34px rgba(255, 108, 56, 0.62);
  transform-origin: center bottom;
  pointer-events: none;
}

.volcano-eruption.show {
  animation: volcano-erupt 820ms ease-out forwards;
}

@keyframes volcano-erupt {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.4);
  }
  18% {
    opacity: 1;
    transform: translateY(-12px) scale(0.92);
  }
  62% {
    opacity: 1;
    transform: translateY(-72px) scale(1.45);
  }
  100% {
    opacity: 0;
    transform: translateY(-118px) scale(1.9);
  }
}

@keyframes lava-pulse {
  from {
    transform: scale(0.98);
    filter: brightness(0.95);
  }
  to {
    transform: scale(1.03);
    filter: brightness(1.08);
  }
}

.volcano-stats {
  width: min(100%, 220px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.volcano-secondary {
  background: linear-gradient(180deg, #fffdf7, #ffe4a8);
  color: var(--text-soft);
}

.volcano-flight-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.volcano-flight-piece {
  position: fixed;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 5px 12px rgba(255, 255, 255, 0.58),
    0 10px 22px rgba(122, 63, 10, 0.22);
  animation: volcano-flight 620ms cubic-bezier(0.2, 0.78, 0.22, 1) forwards;
  will-change: transform, opacity;
}

.ingredient-flight-piece {
  position: fixed;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  display: grid;
  place-items: center;
  animation: ingredient-flight 360ms linear forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: drop-shadow(0 2px 4px rgba(122, 63, 10, 0.14));
}

.ingredient-flight-piece .ingredient-glyph {
  width: 18px;
  height: 18px;
}

.volcano-flight-piece .tile-symbol {
  font-size: 1.2rem;
}

@keyframes volcano-flight {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--flight-start-x), var(--flight-start-y), 0)
      scale(0.45)
      rotate(-18deg);
  }
  18% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--flight-start-x) * 0.82),
        calc(var(--flight-start-y) * 0.82 - 34px),
        0
      )
      scale(0.96)
      rotate(10deg);
  }
  100% {
    opacity: 1;
    transform:
      translate3d(var(--flight-end-x), var(--flight-end-y), 0)
      scale(1)
      rotate(0deg);
  }
}

@keyframes ingredient-flight {
  0% {
    opacity: 0.88;
    transform:
      translate3d(0, 0, 0)
      scale(1)
      rotate(0deg);
  }
  68% {
    opacity: 0.96;
    transform:
      translate3d(
        calc(var(--flight-end-x) * 0.72),
        calc(var(--flight-end-y) * 0.72 - 10px),
        0
      )
      scale(1)
      rotate(0deg);
  }
  100% {
    opacity: 1;
    transform:
      translate3d(var(--flight-end-x), var(--flight-end-y), 0)
      scale(1)
      rotate(0deg);
  }
}

.primary-action {
  border-radius: 999px;
  padding: 16px 20px;
  font-family: "Baloo 2", sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: 0 16px 22px rgba(188, 128, 10, 0.22);
  background: linear-gradient(180deg, #ffe24b, #f0b400);
  color: #7c2f0a;
}

@media (max-width: 420px) {
  .phone-frame {
    padding: 16px 12px 24px;
    border-radius: 28px;
  }

  .pizza-button {
    width: 188px;
    height: 188px;
  }

  .timing-pointer {
    height: 92px;
    margin-top: -92px;
  }

  .recipe-list {
    gap: 8px;
  }

  .recipe-chip {
    padding-inline: 4px;
  }

  .game-board {
    gap: 6px;
  }

  .board-cell {
    border-radius: 16px;
  }
}

.pizza-selector {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.pizza-flavor-chip {
  padding: 0;
  background: transparent;
  position: relative;
}

.pizza-flavor-disc,
.pizza-select-disc {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Baloo 2", sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  color: #fffdf8;
  border: 3px solid rgba(255, 248, 226, 0.98);
  box-shadow: inset 0 8px 16px rgba(255, 255, 255, 0.16), 0 10px 18px rgba(124, 47, 10, 0.18);
}

.pizza-select-disc {
  width: 80px;
  height: 80px;
  font-size: 1.2rem;
}

.pizza-flavor-chip.active .pizza-flavor-disc {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 20px rgba(239, 63, 98, 0.24), inset 0 8px 16px rgba(255, 255, 255, 0.18);
}

.pizza-flavor-chip.done .pizza-flavor-disc {
  outline: 3px solid rgba(41, 192, 111, 0.42);
}

.pizza-flavor-chip.done::after {
  content: "?";
  position: absolute;
  right: -2px;
  top: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  color: #7c4d00;
  background: linear-gradient(180deg, #fff2a6, #efbe24);
  box-shadow:
    0 6px 10px rgba(219, 160, 28, 0.24),
    inset 0 2px 4px rgba(255, 255, 255, 0.58);
}

.pizza-quest {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 800;
}

.pizza-flavor-disc[data-flavor="new-orleans"],
.pizza-select-disc[data-flavor="new-orleans"],
.inventory-pizza[data-flavor="new-orleans"] {
  background:
    radial-gradient(circle at 35% 38%, #f7d26a 0 11%, transparent 12%),
    radial-gradient(circle at 60% 38%, #f7d26a 0 11%, transparent 12%),
    radial-gradient(circle at 50% 58%, #7b4422 0 10%, transparent 11%),
    radial-gradient(circle at 32% 58%, #3dbf73 0 7%, transparent 8%),
    radial-gradient(circle at 68% 58%, #3dbf73 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #f6bf4b 0 58%, #bd6f1d 59% 72%, #7b4315 73% 77%, transparent 78%);
}

.pizza-flavor-disc[data-flavor="pepperoni-party"],
.pizza-select-disc[data-flavor="pepperoni-party"],
.inventory-pizza[data-flavor="pepperoni-party"] {
  background:
    radial-gradient(circle at 33% 38%, #ff5a69 0 11%, transparent 12%),
    radial-gradient(circle at 63% 35%, #ff5a69 0 11%, transparent 12%),
    radial-gradient(circle at 49% 59%, #ff5a69 0 11%, transparent 12%),
    radial-gradient(circle at 35% 61%, #fff0a8 0 9%, transparent 10%),
    radial-gradient(circle at 66% 58%, #fff0a8 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, #f5ba48 0 58%, #c96a25 59% 72%, #7b4315 73% 77%, transparent 78%);
}

.pizza-flavor-disc[data-flavor="hawaiian-sunset"],
.pizza-select-disc[data-flavor="hawaiian-sunset"],
.inventory-pizza[data-flavor="hawaiian-sunset"] {
  background:
    radial-gradient(circle at 35% 38%, #ffd85f 0 10%, transparent 11%),
    radial-gradient(circle at 62% 40%, #ffd85f 0 10%, transparent 11%),
    radial-gradient(circle at 48% 60%, #8b4d2b 0 9%, transparent 10%),
    radial-gradient(circle at 34% 60%, #8b4d2b 0 9%, transparent 10%),
    radial-gradient(circle at 67% 58%, #29c06f 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #f7c65c 0 58%, #d07a25 59% 72%, #7b4315 73% 77%, transparent 78%);
}

.pizza-flavor-disc[data-flavor="garden-mushroom"],
.pizza-select-disc[data-flavor="garden-mushroom"],
.inventory-pizza[data-flavor="garden-mushroom"] {
  background:
    radial-gradient(circle at 35% 37%, #8b5a34 0 10%, transparent 11%),
    radial-gradient(circle at 62% 39%, #8b5a34 0 10%, transparent 11%),
    radial-gradient(circle at 50% 58%, #29c06f 0 8%, transparent 9%),
    radial-gradient(circle at 35% 60%, #ff7f68 0 8%, transparent 9%),
    radial-gradient(circle at 66% 58%, #1e7f4f 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #f4c25a 0 58%, #cd7424 59% 72%, #7b4315 73% 77%, transparent 78%);
}

.pizza-flavor-disc[data-flavor="shrimp-corn"],
.pizza-select-disc[data-flavor="shrimp-corn"],
.inventory-pizza[data-flavor="shrimp-corn"] {
  background:
    radial-gradient(circle at 35% 38%, #ff9a76 0 10%, transparent 11%),
    radial-gradient(circle at 63% 37%, #ff9a76 0 10%, transparent 11%),
    radial-gradient(circle at 50% 58%, #f2dc69 0 10%, transparent 11%),
    radial-gradient(circle at 34% 59%, #29c06f 0 7%, transparent 8%),
    radial-gradient(circle at 67% 59%, #fff0a8 0 8%, transparent 9%),
    radial-gradient(circle at 50% 50%, #f7c861 0 58%, #cf7b27 59% 72%, #7b4315 73% 77%, transparent 78%);
}

.pizza-center[data-flavor="new-orleans"] {
  background:
    radial-gradient(circle at 35% 38%, #f7d26a 0 9%, transparent 10%),
    radial-gradient(circle at 63% 36%, #f7d26a 0 9%, transparent 10%),
    radial-gradient(circle at 47% 60%, #7b4422 0 8%, transparent 9%),
    radial-gradient(circle at 58% 52%, #7b4422 0 8%, transparent 9%),
    radial-gradient(circle at 31% 57%, #3dbf73 0 6%, transparent 7%),
    radial-gradient(circle at 67% 62%, #3dbf73 0 6%, transparent 7%),
    radial-gradient(circle at 50% 50%, #ffd86f 0 56%, #f59f1f 57% 66%, #8c4c19 67% 72%, transparent 73%);
}

.pizza-center[data-flavor="pepperoni-party"] {
  background:
    radial-gradient(circle at 35% 38%, #ff6359 0 8%, transparent 9%),
    radial-gradient(circle at 63% 36%, #ff6359 0 8%, transparent 9%),
    radial-gradient(circle at 47% 60%, #ff6359 0 8%, transparent 9%),
    radial-gradient(circle at 57% 53%, #ff6359 0 8%, transparent 9%),
    radial-gradient(circle at 31% 57%, #ffe98c 0 7%, transparent 8%),
    radial-gradient(circle at 67% 62%, #ffe98c 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #ffd86f 0 56%, #f59f1f 57% 66%, #8c4c19 67% 72%, transparent 73%);
}

.pizza-center[data-flavor="hawaiian-sunset"] {
  background:
    radial-gradient(circle at 35% 38%, #ffd85f 0 8%, transparent 9%),
    radial-gradient(circle at 63% 36%, #ffd85f 0 8%, transparent 9%),
    radial-gradient(circle at 47% 60%, #8b4d2b 0 7%, transparent 8%),
    radial-gradient(circle at 57% 53%, #8b4d2b 0 7%, transparent 8%),
    radial-gradient(circle at 31% 57%, #29c06f 0 5%, transparent 6%),
    radial-gradient(circle at 67% 62%, #ffe98c 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #ffd86f 0 56%, #f59f1f 57% 66%, #8c4c19 67% 72%, transparent 73%);
}

.pizza-center[data-flavor="garden-mushroom"] {
  background:
    radial-gradient(circle at 35% 38%, #8b5a34 0 8%, transparent 9%),
    radial-gradient(circle at 63% 36%, #8b5a34 0 8%, transparent 9%),
    radial-gradient(circle at 47% 60%, #29c06f 0 6%, transparent 7%),
    radial-gradient(circle at 57% 53%, #29c06f 0 6%, transparent 7%),
    radial-gradient(circle at 31% 57%, #ff7f68 0 6%, transparent 7%),
    radial-gradient(circle at 67% 62%, #1e7f4f 0 5%, transparent 6%),
    radial-gradient(circle at 50% 50%, #ffd86f 0 56%, #f59f1f 57% 66%, #8c4c19 67% 72%, transparent 73%);
}

.pizza-center[data-flavor="shrimp-corn"] {
  background:
    radial-gradient(circle at 35% 38%, #ff9a76 0 8%, transparent 9%),
    radial-gradient(circle at 63% 36%, #ff9a76 0 8%, transparent 9%),
    radial-gradient(circle at 47% 60%, #f2dc69 0 8%, transparent 9%),
    radial-gradient(circle at 57% 53%, #f2dc69 0 8%, transparent 9%),
    radial-gradient(circle at 31% 57%, #29c06f 0 5%, transparent 6%),
    radial-gradient(circle at 67% 62%, #ffe98c 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #ffd86f 0 56%, #f59f1f 57% 66%, #8c4c19 67% 72%, transparent 73%);
}

.pizza-art[data-flavor="new-orleans"] { border-color: #7a4318; }
.pizza-art[data-flavor="pepperoni-party"] { border-color: #9b2d36; }
.pizza-art[data-flavor="hawaiian-sunset"] { border-color: #ad671b; }
.pizza-art[data-flavor="garden-mushroom"] { border-color: #695238; }
.pizza-art[data-flavor="shrimp-corn"] { border-color: #8b5f1d; }

.pizza-select-modal {
  text-align: center;
}

.pizza-select-preview {
  margin-top: 12px;
}

.pizza-select-recipe {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.modal-recipe-chip {
  padding: 10px 5px 8px;
}

.tile-chicken { background: linear-gradient(180deg, #f2c475, #d69133); }
.tile-onion { background: linear-gradient(180deg, #d2a6ff, #9b6ef2); }
.tile-corn { background: linear-gradient(180deg, #ffe56a, #e4bf13); }
.tile-olive { background: linear-gradient(180deg, #4c6150, #25352a); }
.tile-pineapple { background: linear-gradient(180deg, #ffe27d, #ffb827); }
.tile-bacon { background: linear-gradient(180deg, #ff927a, #d35745); }
.tile-shrimp { background: linear-gradient(180deg, #ffb4a3, #ff7f6b); }