:root {
  --ink: #281b14;
  --cream: #fff8db;
  --wood: #b88249;
  --wood-dark: #865d35;
  --outline: #14100d;
  --plate: #fff8e7;
  --rail: #87827a;
  --red: #e6482e;
  --green: #54a545;
  --gold: #f8e66c;
  --sprite-play-peel: var(--sprite-play-peel);
  --sprite-menu-medal: var(--sprite-menu-medal);
  --sprite-menu-settings: var(--sprite-menu-settings);
  --sprite-booster-hint: var(--sprite-booster-hint);
  --sprite-booster-clean: var(--sprite-booster-clean);
  --sprite-booster-shuffle: var(--sprite-booster-shuffle);
  --sprite-booster-hint-wide: var(--sprite-booster-hint-wide);
  --sprite-booster-clean-wide: var(--sprite-booster-clean-wide);
  --sprite-booster-shuffle-wide: var(--sprite-booster-shuffle-wide);
  --sprite-dialog-box: var(--sprite-dialog-box);
  --sprite-button-primary: var(--sprite-button-primary);
  --sprite-button-secondary: var(--sprite-button-secondary);
  --sprite-button-danger: var(--sprite-button-danger);
  --sprite-button-ad: var(--sprite-button-ad);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  background: #b8844d url("assets/background.webp") center / cover no-repeat fixed;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button {
  font: inherit;
  user-select: none;
  -webkit-user-select: none;
}

.arcade-shell {
  position: relative;
  width: min(100vw, 1180px);
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 235, 158, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(255, 245, 196, 0.08), rgba(67, 31, 11, 0.18));
}

img,
button,
label,
.arcade-shell {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.sdk-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-content: center;
  justify-items: center;
  background: #b8844d url("assets/background.webp") center / cover no-repeat;
}

.sdk-loading .sdk-loader {
  display: grid;
}

.sdk-loading .arcade-shell {
  visibility: hidden;
  pointer-events: none;
}

.sdk-loader-pizza {
  width: 92px;
  height: 92px;
  border: 10px solid rgba(255, 248, 219, 0.48);
  border-top-color: #e6482e;
  border-right-color: #f8c54b;
  border-radius: 50%;
  filter: drop-shadow(0 6px 0 rgba(65, 31, 13, 0.25));
  animation: sdkLoaderSpin 0.75s linear infinite;
}

.sdk-error .sdk-loader-pizza {
  animation: none;
}

@keyframes sdkLoaderSpin {
  to {
    transform: rotate(1turn);
  }
}

.hud {
  position: absolute;
  z-index: 20;
  top: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
}

.pause-button,
.hud-pill,
.score-pill {
  border: 4px solid #2b2927;
  background: linear-gradient(180deg, #4b4035, #211c18);
  box-shadow: 0 5px 0 #0d0b09, 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 0 0 3px rgba(255, 244, 170, 0.24);
}

.pause-button {
  display: grid;
  grid-template-columns: 12px 12px;
  gap: 8px;
  place-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  cursor: pointer;
}

.pause-button span {
  width: 12px;
  height: 38px;
  border-radius: 8px;
  background: #ffe984;
}

.hud-pill,
.score-pill {
  display: flex;
  align-items: center;
  min-height: 62px;
  border-radius: 999px;
  color: #fff6c8;
  font-weight: 950;
  text-shadow: 0 3px 0 #000;
}

.hud-pill {
  gap: 16px;
  padding: 0 26px;
  font-size: 36px;
}

.level-label {
  color: var(--gold);
}

.cloche {
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  border-radius: 999px 999px 10px 10px;
  color: #34302b;
  background: #fffdf1;
  text-shadow: none;
  transform: translateY(2px);
}

.score-pill {
  gap: 8px;
  padding: 0 18px;
  font-size: 24px;
}

.score-pill span {
  color: #ffd94d;
}

.order-zone {
  position: absolute;
  z-index: 10;
  top: clamp(84px, 11vh, 104px);
  right: clamp(10px, 2vw, 24px);
  width: min(58vw, 560px);
  height: clamp(245px, 34vh, 318px);
}

.rail {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  border: 4px solid #3c3027;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255, 236, 178, 0.16), transparent 18% 82%, rgba(255, 236, 178, 0.14)),
    linear-gradient(180deg, #9d978d, #665f55);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.22), inset 0 -5px 0 rgba(35, 28, 23, 0.18), 0 7px 0 rgba(38, 25, 17, 0.3), 0 18px 26px rgba(0, 0, 0, 0.18);
}

.plates {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 28px);
  height: 100%;
  padding: clamp(56px, 7vw, 74px) clamp(10px, 1.8vw, 18px) clamp(10px, 1.8vw, 18px);
}

.bin {
  position: relative;
  display: grid;
  place-items: center;
  align-self: end;
  width: clamp(100px, 14vw, 142px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 0;
  border-radius: 50%;
  background: url("assets/ui/plate-sprite.webp") center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.34)) drop-shadow(0 12px 16px rgba(42, 24, 14, 0.15));
  transition: transform 0.12s ease, filter 0.12s ease;
}

.plate-stack {
  position: absolute;
  inset: 12%;
  z-index: 1;
  pointer-events: none;
}

.plate-stack img {
  position: absolute;
  width: 52%;
  height: 52%;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.42));
}

.bin::before {
  content: "";
  position: absolute;
  top: clamp(-64px, -6.8vw, -50px);
  left: 50%;
  width: clamp(112px, 16vw, 156px);
  height: clamp(52px, 6vw, 66px);
  border: 0;
  border-radius: 0;
  background: url("assets/ui/order-bubble-sprite.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.28));
  transform: translateX(-50%);
}

.bin::after {
  display: none;
}

.bin.over {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.34)) drop-shadow(0 0 12px rgba(255, 236, 93, 0.9));
}

.bin.wrong {
  animation: shake 0.24s ease;
}

.bin-icon,
.bin-count {
  position: absolute;
  z-index: 2;
  top: clamp(-49px, -5vw, -39px);
}

.bin-icon {
  left: calc(50% - clamp(40px, 5vw, 52px));
  filter: drop-shadow(0 2px 0 #000);
}

.bin-icon img {
  display: block;
  width: clamp(34px, 4.8vw, 48px);
  height: clamp(34px, 4.8vw, 48px);
  object-fit: contain;
}

.bin-count {
  right: calc(50% - clamp(45px, 5.6vw, 56px));
  color: #2d211a;
  font-size: clamp(31px, 4.7vw, 41px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.65);
}

.bin-name {
  display: none;
}

.bin.locked {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 44%, transparent 45%),
    linear-gradient(180deg, #625d56, #3e3a35);
  color: white;
  opacity: 0.92;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.34));
}

.bin.done {
  background: url("assets/ui/plate-sprite.webp") center / contain no-repeat;
  opacity: 0.78;
}

.bin.locked::before,
.bin.locked::after,
.bin.done::before,
.bin.done::after,
.bin.locked .bin-icon {
  display: none;
}

.bin.done .bin-count {
  top: 50%;
  left: 0;
  right: 0;
  color: #4c9b38;
  text-align: center;
  transform: translateY(-50%);
}

.ad-icon {
  position: absolute;
  top: 31%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(40px, 6.6vw, 56px);
  height: clamp(30px, 5vw, 40px);
  border: 5px solid #0b0908;
  border-radius: 9px;
  color: #111;
  background: #fffdf0;
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.42);
}

.bin.locked .bin-reward,
.bin.locked .bin-note {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}

.bin.locked .bin-reward {
  top: 60%;
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 950;
  text-shadow: 0 3px 0 #000;
}

.bin.locked .bin-note {
  top: 82%;
  font-size: clamp(10px, 1.7vw, 14px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 0 #000;
}

.recipe-status {
  position: absolute;
  z-index: 12;
  top: clamp(84px, 11vh, 104px);
  left: clamp(10px, 2vw, 24px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: stretch;
  gap: clamp(8px, 1.2vw, 14px);
  width: clamp(188px, 30vw, 286px);
  height: clamp(252px, 36vh, 350px);
  min-height: 0;
  padding: clamp(58px, 7.4vh, 76px) clamp(20px, 3vw, 30px) clamp(22px, 2.7vh, 30px);
  border: 0;
  border-radius: 0;
  background: var(--recipe-paper-image, url("assets/recipe-paper.webp")) center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 0 rgba(42, 24, 13, 0.32)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.18));
}

.recipe-note {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  min-height: 0;
  padding: 0;
  color: #3f2416;
  text-align: center;
  background: none;
  filter: none;
}

.recipe-note strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin: 2px auto clamp(14px, 2vh, 22px);
  padding: clamp(8px, 1.3vw, 12px) clamp(12px, 2vw, 18px);
  border: 4px solid #2c160d;
  border-radius: 8px;
  color: #fff4d1;
  background:
    linear-gradient(90deg, rgba(255, 218, 126, 0.14), transparent 20% 80%, rgba(255, 218, 126, 0.12)),
    linear-gradient(180deg, #5e3724, #2d1a13);
  box-shadow: 0 4px 0 rgba(28, 16, 10, 0.34), inset 0 0 0 2px rgba(255, 214, 137, 0.12);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.36);
  white-space: nowrap;
}

.recipe-ingredients {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(7px, 1.4vw, 13px);
  min-width: 0;
  padding: 0 6px;
  margin-top: 0;
}

.recipe-ingredients img {
  width: clamp(38px, 6.4vw, 62px);
  height: clamp(38px, 6.4vw, 62px);
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

.mistake-panel {
  display: grid;
  gap: clamp(8px, 1.4vw, 12px);
  justify-items: center;
  min-width: 0;
  padding: clamp(11px, 1.7vw, 15px) 4px 0;
  border: 0;
  border-top: 3px solid rgba(82, 43, 18, 0.58);
  border-radius: 0;
  color: #4a2917;
  background:
    linear-gradient(90deg, transparent, rgba(71, 37, 17, 0.2), transparent) top / 100% 2px no-repeat;
  box-shadow: none;
}

/* The recipe paper already separates its sections visually. */
.recipe-status .mistake-panel {
  border-top: 0;
  background: none;
}

/* Keep the flexible paper and the recipe title plate as separate layers. */
.recipe-status {
  isolation: isolate;
  background: none;
  filter: none;
}

.recipe-status::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--recipe-paper-image, url("assets/recipe-paper.webp")) center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 7px 0 rgba(42, 24, 13, 0.32))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.recipe-status::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: clamp(-42px, -4vh, -28px);
  left: 50%;
  width: clamp(42px, 6vw, 56px);
  aspect-ratio: 553 / 744;
  background: var(--recipe-pin-image, url("assets/recipe-pin.webp")) center / contain no-repeat;
  filter: drop-shadow(0 4px 3px rgba(55, 24, 10, 0.36));
  transform: translateX(-50%);
  pointer-events: none;
}

.recipe-note strong {
  display: grid;
  place-items: center;
  width: min(172px, calc(100% - 12px));
  height: 50px;
  min-height: 50px;
  margin: 2px auto clamp(14px, 2vh, 22px);
  padding: 0 12px;
  flex: none;
  font-size: var(--recipe-title-size, 20px);
}

.recipe-note strong.wrap-title {
  padding: 2px 9px;
  line-height: 0.88;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.recipe-note strong.compact-title {
  letter-spacing: 0;
}

#recipeTitle {
  font-size: var(--recipe-title-size, 20px);
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1023px) {
  .recipe-note strong {
    width: min(160px, calc(100% - 8px));
    height: 46px;
    min-height: 46px;
    font-size: var(--recipe-title-size, 18px);
  }
}

.pause-card .community-button,
.modal-card .community-button {
  color: #3f281a;
  background: var(--sprite-button-secondary) center / 100% 100% no-repeat;
  font-size: 14px;
}

.pause-card .community-button:hover,
.modal-card .community-button:hover {
  background: var(--sprite-button-secondary) center / 100% 100% no-repeat;
}

.pause-card .community-button[hidden],
.modal-card .community-button[hidden],
.pause-card .social-button[hidden],
.modal-card .social-button[hidden] {
  display: none;
}

/* Main menu presentation scaled to 150% while staying inside the viewport. */
.menu-screen {
  gap: clamp(12px, 2.4vh, 27px);
}

.menu-pizza {
  width: min(69vmin, 92vw, 630px);
  max-height: min(63vh, 630px);
}

.menu-actions {
  width: min(600px, calc(100vw - 24px));
  gap: 12px;
}

.menu-button.primary {
  min-height: 144px;
  padding-inline: 72px;
}

.menu-button.primary strong {
  font-size: 40px;
}

.menu-button.primary small {
  margin-top: 6px;
  font-size: 21px;
}

.menu-button.primary .menu-icon {
  left: 87px;
  width: 69px;
  height: 69px;
  border-width: 4px;
}

.menu-button.primary .menu-icon::before {
  margin-left: 4px;
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 20px;
}

.menu-shortcuts {
  gap: 11px;
}

.menu-button.shortcut,
.menu-button.leaderboard-shortcut,
.menu-button.settings-shortcut {
  width: 86%;
  height: 108px;
  min-height: 108px;
  padding-inline: 66px;
}

.menu-button.shortcut strong {
  font-size: 27px;
}

@media (max-width: 640px), (max-height: 900px) {
  .menu-pizza {
    width: min(62vmin, 88vw, 540px);
    max-height: min(52vh, 540px);
  }

  .menu-actions {
    width: min(540px, calc(100vw - 20px));
  }

  .menu-button.primary {
    min-height: 124px;
  }

  .menu-button.primary strong {
    font-size: 34px;
  }

  .menu-button.primary small {
    font-size: 18px;
  }

  .menu-button.primary .menu-icon {
    left: clamp(56px, 14vw, 78px);
    width: 58px;
    height: 58px;
  }

  .menu-button.shortcut,
  .menu-button.leaderboard-shortcut,
  .menu-button.settings-shortcut {
    height: 92px;
    min-height: 92px;
  }

  .menu-button.shortcut strong {
    font-size: 23px;
  }
}

/* Final overlay geometry override after all legacy responsive rules. */
.pause-panel,
.menu-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(25, 16, 10, 0.66);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* First-level interactive tutorial. */
.tutorial-panel {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}

.tutorial-panel[hidden] {
  display: none;
}

.tutorial-card {
  position: absolute;
  left: 50%;
  bottom: calc(var(--layout-actions, 100px) + max(16px, env(safe-area-inset-bottom)));
  display: grid;
  justify-items: center;
  width: min(390px, calc(100% - 24px));
  padding: 16px 20px 13px;
  border: 4px solid #442416;
  border-radius: 8px;
  color: #442416;
  background: #fff0b7;
  box-shadow: 0 7px 0 #9b5724, 0 14px 24px rgba(43, 22, 11, 0.3);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: auto;
}

.tutorial-card strong {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1;
}

.tutorial-card p {
  margin: 8px 0 10px;
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 800;
  line-height: 1.25;
}

.tutorial-card button {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  color: #7d4b2d;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 900;
  text-shadow: none;
  cursor: pointer;
}

.tutorial-panel.success .tutorial-card {
  border-color: #376d2f;
  background: #e8f5b4;
  box-shadow: 0 7px 0 #6d9639, 0 14px 24px rgba(43, 22, 11, 0.3);
}

.tutorial-panel.success .tutorial-card button {
  display: none;
}

.tutorial-card.nudge {
  animation: tutorialNudge 0.28s ease;
}

.topping.tutorial-target {
  z-index: 35 !important;
  filter:
    drop-shadow(0 0 8px #fff7a8)
    drop-shadow(0 0 18px #ffd42f)
    drop-shadow(0 4px 0 #17120e);
  animation: tutorialTargetPulse 0.7s ease-in-out infinite alternate;
}

.bin.tutorial-target {
  z-index: 12;
  filter: drop-shadow(0 0 8px #fff7a8) drop-shadow(0 0 18px #ffd42f);
  animation: tutorialBinPulse 0.7s ease-in-out infinite alternate;
}

@keyframes tutorialTargetPulse {
  to {
    filter:
      drop-shadow(0 0 12px #fff)
      drop-shadow(0 0 26px #ffca16)
      drop-shadow(0 4px 0 #17120e);
  }
}

@keyframes tutorialBinPulse {
  to {
    filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 26px #ffca16);
  }
}

@keyframes tutorialNudge {
  35% { transform: translateX(calc(-50% - 8px)); }
  70% { transform: translateX(calc(-50% + 8px)); }
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1023px) {
  .tutorial-card {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: auto;
    width: min(330px, 31vw);
    padding: 12px 16px 10px;
    transform: none;
  }

  @keyframes tutorialNudge {
    35% { transform: translateX(-8px); }
    70% { transform: translateX(8px); }
  }
}

.mistake-label {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 223, 151, 0.55);
}

.mistakes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, 0.9vw, 8px);
  width: 86%;
  max-width: 360px;
}

.mistakes div {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 50%;
  color: #5d4031;
  background: url("assets/ui/mistake-token-sprite.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.32));
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 950;
  text-shadow: 0 2px 0 #fff;
}

.mistakes div.filled {
  color: white;
  background:
    radial-gradient(circle at 50% 50%, #ff6750 0 51%, transparent 52%),
    url("assets/ui/mistake-token-sprite.webp") center / contain no-repeat;
  text-shadow: 0 2px 0 #6d1511;
}

.mistakes div img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
}

.pizza-stage {
  position: absolute;
  left: 50%;
  bottom: clamp(118px, 14vh, 132px);
  width: min(650px, calc(100vh - 414px), 82vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.steam-layer {
  position: absolute;
  inset: -20% 0 12%;
  z-index: 42;
  overflow: hidden;
  border-radius: 48% 48% 42% 42%;
  pointer-events: none;
}

.steam-layer span {
  position: absolute;
  left: var(--steam-left);
  top: var(--steam-top);
  width: calc(clamp(62px, 12vw, 116px) * var(--steam-scale, 1));
  height: calc(clamp(150px, 25vw, 250px) * var(--steam-scale, 1));
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.82), transparent 35%),
    radial-gradient(ellipse at 42% 62%, rgba(255, 246, 218, 0.5), transparent 58%),
    radial-gradient(ellipse at 58% 78%, rgba(255, 255, 255, 0.24), transparent 48%);
  filter: blur(5px);
  opacity: 0;
  transform: translate(-50%, 22%) scale(0.72);
  animation: steamRise var(--steam-time) ease-in-out infinite;
  animation-delay: var(--steam-delay);
}

.steam-layer span:nth-child(1) {
  --steam-left: 28%;
  --steam-top: 46%;
  --steam-scale: 1.05;
  --steam-time: 4.8s;
  --steam-delay: -1.2s;
}

.steam-layer span:nth-child(2) {
  --steam-left: 44%;
  --steam-top: 36%;
  --steam-scale: 1.18;
  --steam-time: 5.4s;
  --steam-delay: -3.4s;
}

.steam-layer span:nth-child(3) {
  --steam-left: 60%;
  --steam-top: 44%;
  --steam-scale: 1;
  --steam-time: 4.9s;
  --steam-delay: -2.1s;
}

.steam-layer span:nth-child(4) {
  --steam-left: 72%;
  --steam-top: 54%;
  --steam-scale: 0.9;
  --steam-time: 5.8s;
  --steam-delay: -4.5s;
}

.steam-layer span:nth-child(5) {
  --steam-left: 50%;
  --steam-top: 58%;
  --steam-scale: 1.12;
  --steam-time: 6.2s;
  --steam-delay: -5.3s;
}

.steam-layer span:nth-child(6) {
  --steam-left: 36%;
  --steam-top: 62%;
  --steam-scale: 0.86;
  --steam-time: 5.1s;
  --steam-delay: -0.7s;
}

.steam-layer span:nth-child(7) {
  --steam-left: 66%;
  --steam-top: 32%;
  --steam-scale: 0.96;
  --steam-time: 6s;
  --steam-delay: -2.9s;
}

.steam-layer span:nth-child(8) {
  --steam-left: 52%;
  --steam-top: 24%;
  --steam-scale: 0.78;
  --steam-time: 4.6s;
  --steam-delay: -1.8s;
}

.pizza,
.cheese-shine,
.sauce-swirl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.pizza {
  overflow: hidden;
  background: var(--pizza-base, url("assets/pizza.webp")) center / contain no-repeat;
  border: 0;
  touch-action: manipulation;
  box-shadow:
    0 14px 0 rgba(65, 25, 8, 0.2),
    0 28px 54px rgba(30, 19, 11, 0.38);
}

.pizza::before,
.pizza::after {
  content: "";
  position: absolute;
  inset: 13%;
  pointer-events: none;
  border-radius: 50%;
}

.pizza::before {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 210, 0.2), transparent 17%),
    radial-gradient(circle at 68% 64%, rgba(255, 245, 190, 0.16), transparent 18%),
    radial-gradient(circle at 52% 42%, rgba(255, 255, 255, 0.09), transparent 26%);
  mix-blend-mode: screen;
  animation: heatGlimmer 4.8s ease-in-out infinite alternate;
}

.pizza::after {
  inset: 3%;
  background: radial-gradient(circle at 50% 50%, transparent 48%, rgba(255, 190, 84, 0.14) 64%, transparent 76%);
  opacity: 0.58;
  animation: warmPulse 3.8s ease-in-out infinite;
}

.cheese-shine {
  display: none;
}

.sauce-swirl {
  display: none;
}

.topping,
.drag-clone {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(104px, 14vw, 140px);
  height: clamp(104px, 14vw, 140px);
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  cursor: grab;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 4px 0 #17120e) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.2));
  transform: translate(calc(-50% + var(--settle-x, 0px)), calc(-50% + var(--settle-y, 0px))) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  transition: transform 0.42s cubic-bezier(0.2, 0.82, 0.18, 1), opacity 0.12s ease;
}

.topping img,
.drag-clone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.topping img {
  animation: ingredientFloat var(--float-time, 4.8s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  transform-origin: 50% 58%;
}

.topping.leaving {
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.topping.no-motion {
  transition: none !important;
}

.fly-clone {
  pointer-events: none;
  filter: drop-shadow(0 4px 0 #17120e) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.2));
  /* Travel is a transform (was left/top, i.e. layout + repaint per frame); the
     shrink lives on the image below so it keeps its own easing. */
  transition: transform 0.32s cubic-bezier(0.2, 0.82, 0.18, 1), opacity 0.32s ease;
}

.fly-clone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.32s ease;
}

.topping.spawned {
  animation: popIn 0.28s ease both;
}

.topping.hinted {
  filter: drop-shadow(0 0 12px #fff077) drop-shadow(0 4px 0 #17120e) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.24));
}

.topping.hinted.hint-pulsing {
  animation: hintPulse 0.62s ease-in-out infinite alternate;
}

.topping.wrong-pick {
  animation: toppingShake 0.24s ease;
}

.topping::before {
  display: none;
}

.topping:hover {
  --scale: 1.08;
}

.topping.dragging {
  opacity: 0.15;
}

.drag-clone {
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.12);
}

.bottom-actions {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: max(6px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, clamp(106px, 14vw, 156px));
  gap: clamp(8px, 5vw, 54px);
  transform: translateX(-50%);
}

.action-button {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(86px, 12vh, 106px);
  border: 0;
  background: transparent;
  color: #fff5d8;
  cursor: pointer;
  text-shadow: 0 4px 0 #5a2333, 3px 0 0 #5a2333, -3px 0 0 #5a2333;
}

.action-button::before {
  content: "";
  position: absolute;
  inset: 14px 15px 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 219, 120, 0.18), rgba(20, 16, 14, 0.76) 62%);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.32);
}

.plus {
  position: absolute;
  top: 0;
  left: 25px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 4px solid #a33122;
  border-radius: 50%;
  background: #ff5e35;
  color: white;
  font-size: 34px;
  line-height: 1;
  text-shadow: none;
}

.action-icon {
  font-size: 50px;
  transform: translateY(4px);
}

.action-button:not(:has(.plus)) .action-icon {
  transform: translateY(0);
}

.action-button strong {
  font-size: 25px;
  line-height: 1;
}

.pause-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
  background: rgba(25, 16, 10, 0.48);
}

.pause-panel.open {
  display: grid;
}

.pause-card {
  display: grid;
  justify-items: center;
  width: min(320px, calc(100vw - 34px));
  padding: 22px;
  border: 5px solid #1d1712;
  border-radius: 18px;
  background: #fff5d5;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.38), 0 26px 44px rgba(0, 0, 0, 0.34);
  text-align: center;
}

.pause-card h2 {
  margin: 0 0 18px;
  font-size: 34px;
}

.pause-card p {
  margin: 0 0 18px;
  color: #6b4228;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
}

.result-card {
  width: min(360px, calc(100vw - 28px));
}

.result-pizza {
  position: relative;
  width: min(230px, 58vw, 30vh);
  aspect-ratio: 1;
  margin: -8px 0 14px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--pizza-base, url("assets/pizza.webp")) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(73, 35, 14, 0.2)) drop-shadow(0 16px 18px rgba(35, 20, 11, 0.24));
}

.result-pizza[hidden] {
  display: none;
}

.result-pizza .topping {
  display: grid;
  place-items: center;
  width: 22%;
  height: 22%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: default;
  color: transparent;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 0 #17120e) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.2));
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  transition: none;
  text-shadow: none;
}

.result-pizza .topping:hover {
  --scale: 1;
}

.result-pizza .topping img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  animation: none;
  object-fit: contain;
}

.sound-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 950;
}

.sound-toggle input {
  width: 28px;
  height: 28px;
  accent-color: #e6482e;
}

.pause-card button {
  width: min(190px, 100%);
  min-height: 48px;
  padding: 0 22px;
  border: 4px solid #24160e;
  border-radius: 999px;
  color: #fff6d8;
  background: linear-gradient(180deg, #2fb762, #168144);
  box-shadow: 0 5px 0 #0f4f2a;
  font-weight: 950;
  cursor: pointer;
}

#restartButton {
  color: #fff6d8;
  background: linear-gradient(180deg, #f35f3d, #bd2c24);
  box-shadow: 0 5px 0 #7b1815;
}

.start-menu,
.menu-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 18px;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
}

.menu-modal {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 236, 137, 0.26), transparent 38%),
    rgba(30, 18, 10, 0.58);
}

.start-menu {
  align-items: stretch;
  padding: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 236, 145, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(255, 224, 143, 0.1), rgba(72, 38, 18, 0.2)),
    #b8844d url("assets/background.webp") center / cover no-repeat;
}

.start-menu.open,
.menu-modal.open {
  display: grid;
}

.menu-screen {
  position: relative;
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
  align-items: end;
  width: min(100vw, 1180px);
  height: 100%;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  padding: clamp(18px, 4vh, 34px) 18px max(24px, env(safe-area-inset-bottom));
}

.menu-screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(16px, 5vh, 54px);
  width: min(82vh, 88vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 246, 205, 0.25), transparent 68%);
  transform: translateX(-50%);
  pointer-events: none;
}

.menu-pizza {
  position: relative;
  align-self: start;
  justify-self: center;
  width: min(58vh, 86vw, 480px);
  aspect-ratio: 1;
  margin-top: clamp(8px, 4vh, 36px);
  filter: drop-shadow(0 18px 0 rgba(65, 25, 8, 0.18)) drop-shadow(0 32px 48px rgba(30, 19, 11, 0.38));
  pointer-events: none;
}

.menu-pizza-base,
.menu-pizza-topping {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.menu-pizza-base {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-pizza-topping {
  width: clamp(74px, 15vw, 120px);
  height: clamp(74px, 15vw, 120px);
  object-fit: contain;
  filter: drop-shadow(0 4px 0 #17120e) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.2));
  transform: translate(-50%, -50%) rotate(var(--menu-rot, 0deg));
}

.menu-pizza-topping.t1 {
  left: 35%;
  top: 31%;
  --menu-rot: -16deg;
}

.menu-pizza-topping.t2 {
  left: 62%;
  top: 34%;
  --menu-rot: 18deg;
}

.menu-pizza-topping.t3 {
  left: 48%;
  top: 45%;
  --menu-rot: -8deg;
}

.menu-pizza-topping.t4 {
  left: 69%;
  top: 55%;
  --menu-rot: 12deg;
}

.menu-pizza-topping.t5 {
  left: 33%;
  top: 58%;
  --menu-rot: 10deg;
}

.menu-pizza-topping.t6 {
  left: 52%;
  top: 66%;
  --menu-rot: -14deg;
}

.menu-pizza-topping.t7 {
  left: 44%;
  top: 24%;
  --menu-rot: 7deg;
}

.menu-pizza-topping.t8 {
  left: 60%;
  top: 73%;
  --menu-rot: -22deg;
}

.modal-card {
  width: min(430px, calc(100vw - 32px));
  border: 5px solid #1d1712;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.96), rgba(255, 231, 169, 0.96)),
    #fff5d5;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.38), 0 28px 48px rgba(0, 0, 0, 0.36), inset 0 0 0 4px rgba(122, 69, 31, 0.16);
}

.modal-card h2 {
  margin: 0;
  color: #3b2114;
  font-weight: 950;
  line-height: 0.95;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7);
}

.menu-actions {
  position: relative;
  z-index: 1;
  display: grid;
  justify-self: center;
  gap: clamp(10px, 2vh, 14px);
  width: min(430px, calc(100vw - 32px));
}

.menu-button,
.modal-card button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border: 4px solid #24160e;
  border-radius: 14px;
  color: #fff6d8;
  background: linear-gradient(180deg, #4b4035, #211c18);
  box-shadow: 0 6px 0 #0d0b09;
  cursor: pointer;
  font-weight: 950;
  text-shadow: 0 3px 0 #000;
}

.menu-button {
  justify-content: flex-start;
  gap: 14px;
  padding: 8px 14px;
  text-align: left;
}

.menu-button.primary {
  min-height: 78px;
  background: linear-gradient(180deg, #39c76d, #168144);
  box-shadow: 0 7px 0 #0f4f2a;
}

.menu-button strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.menu-button small {
  display: block;
  margin-top: 5px;
  color: #ffe984;
  font-size: 14px;
  line-height: 1;
}

.menu-icon {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid #19110c;
  border-radius: 50%;
  color: #2d211a;
  background: #fff7c7;
  text-shadow: none;
}

.modal-card {
  display: grid;
  justify-items: stretch;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.modal-card h2 {
  margin-bottom: 6px;
  font-size: 38px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 0 16px;
  border: 4px solid #3c2418;
  border-radius: 12px;
  color: #3b2114;
  background: rgba(255, 251, 226, 0.74);
  font-weight: 950;
}

.leaderboard-row strong {
  color: #168144;
  font-size: 30px;
}

.menu-toggle {
  margin: 0;
  padding: 14px;
  border: 4px solid #3c2418;
  border-radius: 12px;
  background: rgba(255, 251, 226, 0.74);
}

.combo-badge,
.message {
  position: absolute;
  z-index: 26;
  pointer-events: none;
  border: 4px solid #1d1712;
  border-radius: 16px;
  background: rgba(255, 248, 219, 0.92);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  font-weight: 950;
}

.combo-badge {
  right: 18px;
  bottom: 132px;
  min-width: 94px;
  padding: 9px 12px;
  text-align: center;
}

.combo-badge span {
  display: block;
  font-size: 13px;
}

.combo-badge strong {
  display: block;
  font-size: 32px;
}

.message {
  display: none;
  left: 18px;
  bottom: clamp(96px, 15vh, 132px);
  max-width: 330px;
  padding: 10px 14px;
  color: #5b3a24;
  line-height: 1.2;
}

.message.good {
  color: #226626;
}

.message.bad {
  color: #9f291d;
}

.spark {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  color: #fff8dd;
  border: 4px solid #15110f;
  border-radius: 999px;
  background: var(--green);
  padding: 6px 12px;
  font-size: 24px;
  font-weight: 950;
  text-shadow: 0 3px 0 #000;
  animation: floatUp 0.72s ease forwards;
}

.timer-stat.warning,
.hud-pill.warning {
  animation: pulse 0.65s ease-in-out infinite alternate;
}

@keyframes pulse {
  to {
    transform: scale(1.04);
  }
}

@keyframes shake {
  20% {
    transform: translateX(-8px);
  }
  60% {
    transform: translateX(8px);
  }
}

@keyframes toppingShake {
  20% {
    transform: translate(calc(-50% + var(--settle-x, 0px) - 8px), calc(-50% + var(--settle-y, 0px))) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  }
  60% {
    transform: translate(calc(-50% + var(--settle-x, 0px) + 8px), calc(-50% + var(--settle-y, 0px))) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  }
}

@keyframes floatUp {
  to {
    opacity: 0;
    transform: translateY(-42px) scale(1.08);
  }
}

@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 24%) scale(0.66) rotate(-3deg);
  }
  18% {
    opacity: 0.68;
  }
  48% {
    opacity: 0.46;
  }
  72% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 24px), -46%) scale(1.24) rotate(5deg);
  }
}

@keyframes heatGlimmer {
  from {
    opacity: 0.44;
    transform: rotate(-1deg) scale(0.985);
  }
  to {
    opacity: 0.72;
    transform: rotate(2deg) scale(1.02);
  }
}

@keyframes warmPulse {
  50% {
    opacity: 0.82;
    transform: scale(1.025);
  }
}

@keyframes ingredientFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(calc(var(--float-x, 3px) * 0.7), var(--float-y, -2px)) rotate(var(--float-rot, 1deg)) scale(1.006);
  }
  66% {
    transform: translate(calc(var(--float-x, 3px) * -0.55), calc(var(--float-y, -2px) * 0.35)) rotate(calc(var(--float-rot, 1deg) * -0.7)) scale(1.004);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes hintPulse {
  to {
    transform: translate(calc(-50% + var(--settle-x, 0px)), calc(-50% + var(--settle-y, 0px))) rotate(var(--rot, 0deg)) scale(1.16);
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--settle-x, 0px)), calc(-50% + var(--settle-y, 0px))) rotate(var(--rot, 0deg)) scale(0.35);
  }
}

@media (max-width: 760px) {
  .arcade-shell {
    min-height: 620px;
  }

  .hud {
    gap: 7px;
  }

  .pause-button {
    width: 56px;
    height: 56px;
  }

  .pause-button span {
    width: 9px;
    height: 30px;
  }

  .hud-pill {
    min-height: 54px;
    gap: 10px;
    padding: 0 16px;
    font-size: 29px;
  }

  .score-pill {
    display: none;
  }

  .order-zone {
    top: clamp(74px, 10vh, 82px);
    right: 4px;
    width: min(58vw, 310px);
    height: clamp(190px, 25vh, 224px);
  }

  .plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 48px 4px 6px;
  }

  .bin {
    width: clamp(72px, 19vw, 90px);
    border-width: 4px;
  }

  .bin::before {
    top: clamp(-55px, -11vw, -44px);
    width: clamp(86px, 23vw, 112px);
    height: clamp(48px, 11vw, 64px);
  }

  .bin-icon {
    top: clamp(-43px, -8vw, -34px);
    left: calc(50% - clamp(35px, 9vw, 46px));
  }

  .bin-count {
    top: clamp(-43px, -8vw, -34px);
    right: calc(50% - clamp(39px, 10vw, 50px));
    font-size: clamp(28px, 8vw, 38px);
  }

  .recipe-status {
    top: clamp(74px, 10vh, 82px);
    left: 4px;
    width: min(39vw, 190px);
    height: clamp(190px, 25vh, 224px);
    padding: clamp(36px, 5.2vh, 44px) 13px 12px;
  }

  .recipe-note {
    min-height: 0;
  }

  .recipe-note strong {
    margin-bottom: 9px;
    padding: 7px 8px;
    border-width: 3px;
    font-size: 14px;
  }

  .recipe-ingredients {
    gap: 4px;
    padding: 0 2px;
  }

  .recipe-ingredients img {
    width: 30px;
    height: 30px;
  }

  .mistake-panel {
    gap: 6px;
    padding-top: 8px;
  }

  .mistake-label {
    font-size: 15px;
  }

  .mistakes {
    gap: 3px;
  }

  .mistakes div {
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3));
  }

  .pizza-stage {
    bottom: clamp(108px, 13vh, 118px);
    width: min(99vw, calc(100vh - 318px));
    max-width: 620px;
  }

  .topping,
  .drag-clone {
    width: clamp(76px, 20vw, 96px);
    height: clamp(76px, 20vw, 96px);
  }

  .bottom-actions {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
    width: min(350px, 96vw);
    gap: 4px;
    bottom: max(4px, env(safe-area-inset-bottom));
  }

  .action-button strong {
    font-size: 16px;
  }

  .message {
    display: none;
  }

  .bin.locked .bin-count {
    top: 74%;
    font-size: 18px;
  }

  .combo-badge {
    display: none;
  }

  .start-menu,
  .menu-modal {
    padding: 12px;
  }

  .start-menu {
    padding: 0;
  }

  .menu-screen {
    grid-template-rows: minmax(258px, 1fr) auto;
    min-height: 620px;
    padding: 10px 12px max(18px, env(safe-area-inset-bottom));
  }

  .menu-pizza {
    width: min(48vh, 86vw, 350px);
    margin-top: clamp(4px, 3vh, 20px);
  }

  .menu-pizza-topping {
    width: clamp(58px, 17vw, 84px);
    height: clamp(58px, 17vw, 84px);
  }

  .modal-card {
    width: min(360px, calc(100vw - 24px));
    border-width: 4px;
    border-radius: 14px;
  }

  .menu-actions {
    width: min(360px, calc(100vw - 24px));
  }

  .menu-button {
    min-height: 58px;
    border-width: 3px;
    border-radius: 12px;
    gap: 10px;
  }

  .menu-button.primary {
    min-height: 68px;
  }

  .menu-button strong {
    font-size: 20px;
  }

  .menu-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .modal-card {
    padding: 18px;
  }

  .modal-card h2 {
    font-size: 32px;
  }

  .leaderboard-row {
    min-height: 50px;
    padding: 0 12px;
    font-size: 15px;
  }

  .leaderboard-row strong {
    font-size: 24px;
  }
}

@media (orientation: portrait) and (min-height: 1000px) and (max-aspect-ratio: 2/3) {
  .arcade-shell {
    width: 100vw;
  }

  .hud {
    top: clamp(12px, 1.8vh, 22px);
  }

  .pause-button {
    width: clamp(62px, 9vw, 78px);
    height: clamp(62px, 9vw, 78px);
  }

  .hud-pill {
    min-height: clamp(58px, 8vw, 70px);
    padding: 0 clamp(18px, 4vw, 30px);
    font-size: clamp(31px, 5.5vw, 44px);
  }

  .order-zone {
    top: clamp(84px, 8vh, 104px);
    right: clamp(8px, 1.4vw, 18px);
    width: min(58vw, 560px);
    height: clamp(260px, 28vh, 340px);
  }

  .rail {
    top: 14px;
    height: auto;
    bottom: 0;
  }

  .plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(5px, 1.6vw, 14px);
    padding: clamp(68px, 8vw, 84px) clamp(5px, 1.4vw, 14px) clamp(8px, 1.4vw, 14px);
  }

  .bin {
    width: clamp(118px, 21vw, 164px);
  }

  .bin::before {
    top: clamp(-70px, -9vw, -54px);
    width: clamp(126px, 23vw, 174px);
    height: clamp(62px, 9vw, 82px);
  }

  .bin-icon {
    top: clamp(-54px, -7vw, -42px);
    left: calc(50% - clamp(44px, 8vw, 64px));
  }

  .bin-icon img {
    width: clamp(42px, 7vw, 58px);
    height: clamp(42px, 7vw, 58px);
  }

  .bin-count {
    top: clamp(-54px, -7vw, -42px);
    right: calc(50% - clamp(49px, 8.5vw, 70px));
    font-size: clamp(34px, 7vw, 48px);
  }

  .bin.locked .bin-count {
    top: 73%;
    font-size: clamp(20px, 3.4vw, 28px);
  }

  .recipe-status {
    top: clamp(84px, 8vh, 104px);
    left: clamp(8px, 1.4vw, 18px);
    width: min(38vw, 310px);
    height: clamp(260px, 28vh, 340px);
    padding: clamp(58px, 6.6vh, 76px) clamp(20px, 2.7vw, 30px) clamp(22px, 2.4vh, 30px);
    gap: clamp(8px, 1.4vw, 14px);
  }

  .recipe-note {
    min-height: 0;
  }

  .mistake-panel {
    min-width: 0;
  }

  .pizza-stage {
    bottom: clamp(132px, calc(100vh - 99vw - 400px), 460px);
    width: 99vw;
    max-width: none;
  }

  .bottom-actions {
    width: min(480px, 94vw);
    grid-template-columns: repeat(3, minmax(116px, 1fr));
    gap: clamp(8px, 3vw, 22px);
  }

  .action-button strong {
    font-size: clamp(18px, 3.2vw, 25px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .steam-layer span,
  .pizza::before,
  .pizza::after,
  .topping img {
    animation: none;
  }
}

@media (min-width: 1024px) {
  .order-zone {
    width: min(calc(100vw - 340px), 940px);
    height: clamp(126px, 22vh, 172px);
  }

  .rail {
    top: clamp(72px, 9vw, 88px);
    height: clamp(72px, 8vw, 90px);
    bottom: auto;
  }

  .plates {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: clamp(8px, 1.6vw, 18px);
    padding: 0 clamp(8px, 1.5vw, 18px);
  }

  .recipe-status {
    width: clamp(220px, 22vw, 290px);
    min-height: clamp(220px, 31vh, 305px);
  }
}

/* Shared arcade UI */
:root {
  --ui-ink: #25150e;
  --ui-dark: #241914;
  --ui-mid: #493126;
  --ui-cream: #fff1bd;
  --ui-cream-soft: #fff8dc;
  --ui-red: #dc4934;
  --ui-red-dark: #8f241d;
  --ui-green: #39a95d;
  --ui-green-dark: #176838;
  --ui-gold: #ffd75c;
  --ui-shadow: rgba(29, 15, 9, 0.42);
}

button {
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

button:hover {
  filter: brightness(1.07);
}

button:active {
  transform: translateY(3px);
}

button:focus-visible {
  outline: 4px solid var(--ui-gold);
  outline-offset: 3px;
}

.pause-button,
.hud-pill,
.score-pill {
  border-color: var(--ui-ink);
  background:
    linear-gradient(180deg, rgba(255, 232, 157, 0.1), transparent 46%),
    linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
  box-shadow:
    0 5px 0 #120c09,
    0 11px 22px rgba(28, 15, 9, 0.3),
    inset 0 0 0 2px rgba(255, 235, 171, 0.16);
}

.pause-button span {
  background: var(--ui-cream);
}

.hud-pill,
.score-pill {
  color: var(--ui-cream-soft);
  text-shadow: 0 3px 0 #120c09;
}

.level-label,
.score-pill span {
  color: var(--ui-gold);
}

.cloche {
  color: var(--ui-ink);
  background: var(--ui-cream-soft);
  box-shadow: inset 0 -3px 0 rgba(98, 59, 31, 0.16);
}

.rail {
  border-color: var(--ui-ink);
  background:
    linear-gradient(90deg, rgba(255, 230, 159, 0.1), transparent 16% 84%, rgba(255, 230, 159, 0.1)),
    linear-gradient(180deg, #684735, #35251e);
  box-shadow:
    inset 0 4px 0 rgba(255, 233, 174, 0.15),
    inset 0 -5px 0 rgba(17, 10, 7, 0.24),
    0 7px 0 rgba(30, 16, 10, 0.35),
    0 16px 24px rgba(24, 13, 8, 0.2);
}

.recipe-note strong {
  border-color: var(--ui-ink);
  border-radius: 8px;
  color: var(--ui-cream-soft);
  background:
    linear-gradient(180deg, rgba(255, 230, 151, 0.12), transparent 48%),
    linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
  box-shadow: 0 4px 0 rgba(29, 15, 9, 0.34), inset 0 0 0 2px rgba(255, 226, 154, 0.1);
}

.bottom-actions {
  grid-template-columns: repeat(3, minmax(104px, 148px));
  gap: clamp(8px, 2vw, 16px);
  width: min(480px, calc(100vw - 18px));
  padding: 8px;
  border: 4px solid var(--ui-ink);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 230, 160, 0.1), transparent 46%),
    linear-gradient(180deg, rgba(73, 49, 38, 0.96), rgba(36, 25, 20, 0.98));
  box-shadow: 0 6px 0 #120c09, 0 14px 22px rgba(28, 15, 9, 0.28);
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 62px;
  min-width: 0;
  padding: 8px 11px;
  border: 3px solid var(--ui-ink);
  border-radius: 8px;
  color: var(--ui-cream-soft);
  background:
    linear-gradient(180deg, rgba(255, 231, 158, 0.1), transparent 48%),
    linear-gradient(180deg, #624333, var(--ui-dark));
  box-shadow: 0 4px 0 #120c09;
  text-shadow: 0 2px 0 #120c09;
}

.action-button::before {
  display: none;
}

.action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--ui-ink);
  border-radius: 50%;
  color: var(--ui-ink);
  background: var(--ui-cream);
  box-shadow: inset 0 -3px 0 rgba(117, 72, 35, 0.18);
  font-size: 25px;
  line-height: 1;
  text-shadow: none;
  transform: none;
}

.action-button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plate-action .action-icon {
  color: #946d00;
  background: #ffe77a;
}

.clean-action .action-icon {
  color: #1f713d;
  background: #bce6a5;
}

.shuffle-action .action-icon {
  color: #9b291e;
  background: #ffb39a;
}

.combo-badge {
  border-color: var(--ui-ink);
  border-radius: 8px;
  color: var(--ui-cream-soft);
  background:
    linear-gradient(180deg, rgba(255, 229, 145, 0.12), transparent),
    linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
  box-shadow: 0 5px 0 #120c09;
  text-shadow: 0 2px 0 #120c09;
}

.combo-badge span {
  color: var(--ui-gold);
}

.start-menu {
  background:
    linear-gradient(180deg, rgba(255, 223, 133, 0.08), rgba(56, 29, 15, 0.12)),
    #b8844d url("assets/background.webp") center / cover no-repeat;
}

.menu-screen::before {
  width: min(74vh, 84vw, 570px);
  background:
    radial-gradient(circle at center, rgba(255, 244, 195, 0.26), transparent 62%);
}

.menu-pizza {
  filter:
    drop-shadow(0 8px 0 rgba(55, 28, 14, 0.28))
    drop-shadow(0 24px 30px rgba(32, 17, 10, 0.32));
}

.menu-actions {
  gap: 10px;
  padding: 10px;
  border: 4px solid var(--ui-ink);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 230, 160, 0.1), transparent 46%),
    linear-gradient(180deg, rgba(73, 49, 38, 0.96), rgba(36, 25, 20, 0.98));
  box-shadow:
    0 7px 0 #120c09,
    0 18px 28px rgba(28, 15, 9, 0.3),
    inset 0 0 0 2px rgba(255, 232, 164, 0.12);
}

.menu-button,
.modal-card button,
.pause-card button {
  min-height: 60px;
  border: 3px solid var(--ui-ink);
  border-radius: 8px;
  color: var(--ui-cream-soft);
  background:
    linear-gradient(180deg, rgba(255, 233, 167, 0.1), transparent 50%),
    linear-gradient(180deg, #624333, var(--ui-dark));
  box-shadow: 0 5px 0 #120c09;
  text-shadow: 0 2px 0 #120c09;
}

.menu-button {
  gap: 12px;
  padding: 8px 12px;
}

.menu-button.primary,
#resumeButton,
#resultButton {
  background:
    linear-gradient(180deg, rgba(255, 246, 198, 0.15), transparent 48%),
    linear-gradient(180deg, #4bc46f, var(--ui-green));
  box-shadow: 0 5px 0 var(--ui-green-dark);
}

#restartButton {
  background:
    linear-gradient(180deg, rgba(255, 228, 199, 0.14), transparent 48%),
    linear-gradient(180deg, #f06449, var(--ui-red));
  box-shadow: 0 5px 0 var(--ui-red-dark);
}

.menu-icon {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  border-color: var(--ui-ink);
  color: var(--ui-ink);
  background: var(--ui-cream);
  box-shadow: inset 0 -3px 0 rgba(110, 65, 31, 0.18);
}

.menu-button strong {
  font-size: 22px;
}

.menu-button small {
  color: var(--ui-gold);
}

.pause-panel,
.menu-modal {
  background: rgba(27, 15, 9, 0.7);
  backdrop-filter: blur(3px);
}

.pause-card,
.modal-card {
  gap: 12px;
  width: min(360px, calc(100vw - 28px));
  padding: 18px;
  border: 4px solid var(--ui-ink);
  border-radius: 8px;
  color: var(--ui-cream-soft);
  background:
    linear-gradient(180deg, rgba(255, 231, 161, 0.1), transparent 44%),
    linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
  box-shadow:
    0 8px 0 #120c09,
    0 24px 38px rgba(24, 12, 7, 0.4),
    inset 0 0 0 2px rgba(255, 229, 157, 0.12);
}

.pause-card h2,
.modal-card h2 {
  margin: 0 0 6px;
  color: var(--ui-cream-soft);
  font-size: 34px;
  text-shadow: 0 3px 0 #120c09;
}

.pause-card p {
  color: var(--ui-cream);
}

.pause-card button,
.modal-card button {
  width: 100%;
}

.sound-toggle,
.menu-toggle {
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 10px 14px;
  border: 3px solid var(--ui-ink);
  border-radius: 8px;
  color: var(--ui-ink);
  background: var(--ui-cream-soft);
  box-shadow: inset 0 -4px 0 rgba(123, 76, 37, 0.16);
  text-shadow: none;
}

.sound-toggle input {
  accent-color: var(--ui-green);
}

.leaderboard-row {
  min-height: 58px;
  border: 3px solid var(--ui-ink);
  border-radius: 8px;
  color: var(--ui-ink);
  background: var(--ui-cream-soft);
  box-shadow: inset 0 -4px 0 rgba(123, 76, 37, 0.14);
}

.leaderboard-row strong {
  color: var(--ui-green-dark);
}

@media (max-width: 760px) {
  .bottom-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100vw - 12px);
    gap: 5px;
    padding: 5px;
    border-width: 3px;
  }

  .action-button {
    gap: 5px;
    height: 56px;
    padding: 6px;
    box-shadow: 0 3px 0 #120c09;
  }

  .action-icon {
    width: 32px;
    height: 32px;
    border-width: 2px;
    font-size: 20px;
  }

  .action-button strong {
    font-size: 12px;
  }

  .menu-actions {
    width: min(380px, calc(100vw - 20px));
    padding: 8px;
  }

  .menu-button {
    min-height: 56px;
  }

  .menu-button.primary {
    min-height: 66px;
  }

  .menu-button strong {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

/* Contemporary UI */
:root {
  --modern-text: #29231f;
  --modern-muted: #756b64;
  --modern-surface: rgba(255, 253, 247, 0.94);
  --modern-surface-soft: rgba(255, 253, 247, 0.82);
  --modern-border: rgba(68, 51, 40, 0.16);
  --modern-green: #2f9f5b;
  --modern-green-hover: #26854b;
  --modern-red: #dc5748;
  --modern-shadow: 0 12px 32px rgba(49, 30, 18, 0.16);
}

button {
  letter-spacing: 0;
}

button:hover {
  filter: none;
}

button:active {
  transform: scale(0.98);
}

button:focus-visible {
  outline: 3px solid rgba(47, 159, 91, 0.38);
  outline-offset: 2px;
}

.pause-button,
.hud-pill,
.score-pill {
  border: 1px solid var(--modern-border);
  color: var(--modern-text);
  background: var(--modern-surface);
  box-shadow: 0 8px 24px rgba(49, 30, 18, 0.14);
  text-shadow: none;
  backdrop-filter: blur(14px);
}

.pause-button {
  width: 58px;
  height: 58px;
}

.pause-button span {
  width: 7px;
  height: 25px;
  border-radius: 2px;
  background: var(--modern-text);
}

.hud-pill,
.score-pill {
  min-height: 52px;
}

.hud-pill {
  gap: 12px;
  padding: 0 18px;
  font-size: 28px;
}

.level-label {
  color: var(--modern-muted);
  font-size: 16px;
  font-weight: 800;
}

.score-pill {
  color: var(--modern-text);
}

.score-pill span {
  color: #dcae25;
  text-shadow: none;
}

.cloche {
  width: 42px;
  height: 34px;
  color: var(--modern-text);
  background: #f1ece3;
  box-shadow: none;
}

.rail {
  border: 1px solid rgba(42, 33, 27, 0.18);
  background: rgba(51, 43, 38, 0.76);
  box-shadow: 0 12px 30px rgba(38, 23, 14, 0.16);
  backdrop-filter: blur(12px);
}

.recipe-note strong {
  border: 0;
  border-radius: 6px;
  color: var(--modern-text);
  background: rgba(255, 253, 247, 0.86);
  box-shadow: 0 5px 16px rgba(50, 31, 18, 0.12);
  text-shadow: none;
}

.bottom-actions {
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--modern-border);
  border-radius: 8px;
  background: var(--modern-surface);
  box-shadow: var(--modern-shadow);
  backdrop-filter: blur(16px);
}

.action-button {
  height: 56px;
  border: 0;
  border-radius: 6px;
  color: var(--modern-text);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.action-button:hover {
  background: rgba(68, 51, 40, 0.07);
}

.action-icon {
  width: 32px;
  height: 32px;
  border: 0;
  color: var(--modern-text);
  background: #f1ece3;
  box-shadow: none;
  font-size: 19px;
}

.plate-action .action-icon {
  color: #8a6a00;
  background: #fff0a8;
}

.clean-action .action-icon {
  color: #217746;
  background: #d8f0de;
}

.shuffle-action .action-icon {
  color: #a54337;
  background: #f8ddd7;
}

.action-button strong {
  color: var(--modern-text);
  font-size: 13px;
  text-shadow: none;
}

.combo-badge {
  border: 1px solid var(--modern-border);
  border-radius: 8px;
  color: var(--modern-text);
  background: var(--modern-surface);
  box-shadow: 0 8px 24px rgba(49, 30, 18, 0.14);
  text-shadow: none;
  backdrop-filter: blur(14px);
}

.combo-badge span {
  color: var(--modern-muted);
}

.start-menu {
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.05), rgba(51, 30, 16, 0.08)),
    #b8844d url("assets/background.webp") center / cover no-repeat;
}

.menu-screen::before {
  background: radial-gradient(circle at center, rgba(255, 249, 220, 0.24), transparent 66%);
}

.menu-pizza {
  filter: drop-shadow(0 20px 28px rgba(43, 25, 14, 0.22));
}

.menu-actions {
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--modern-border);
  border-radius: 8px;
  background: var(--modern-surface);
  box-shadow: var(--modern-shadow);
  backdrop-filter: blur(18px);
}

.menu-button,
.modal-card button,
.pause-card button {
  min-height: 58px;
  border: 0;
  border-radius: 6px;
  color: var(--modern-text);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.menu-button:hover,
.modal-card button:hover,
.pause-card button:hover {
  background: rgba(68, 51, 40, 0.07);
}

.menu-button.primary,
#resumeButton,
#resultButton {
  color: white;
  background: var(--modern-green);
  box-shadow: 0 7px 18px rgba(47, 159, 91, 0.24);
}

.menu-button.primary:hover,
#resumeButton:hover,
#resultButton:hover {
  background: var(--modern-green-hover);
}

#restartButton {
  color: var(--modern-red);
  background: rgba(220, 87, 72, 0.1);
  box-shadow: none;
}

.menu-icon {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  border: 0;
  color: var(--modern-text);
  background: #f1ece3;
  box-shadow: none;
  font-size: 17px;
}

.menu-button.primary .menu-icon {
  color: var(--modern-green);
  background: white;
}

.menu-button strong {
  color: inherit;
  font-size: 20px;
  text-shadow: none;
}

.menu-button small {
  color: var(--modern-muted);
  font-size: 13px;
  text-shadow: none;
}

.menu-button.primary small {
  color: rgba(255, 255, 255, 0.78);
}

.pause-panel,
.menu-modal {
  background: rgba(41, 28, 20, 0.42);
  backdrop-filter: blur(12px);
}

.pause-card,
.modal-card {
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--modern-border);
  border-radius: 8px;
  color: var(--modern-text);
  background: var(--modern-surface);
  box-shadow: 0 24px 60px rgba(34, 20, 12, 0.24);
}

.pause-card h2,
.modal-card h2 {
  margin: 8px 8px 12px;
  color: var(--modern-text);
  font-size: 30px;
  text-shadow: none;
}

.pause-card p {
  color: var(--modern-muted);
}

.sound-toggle,
.menu-toggle,
.leaderboard-row {
  min-height: 56px;
  border: 1px solid var(--modern-border);
  border-radius: 6px;
  color: var(--modern-text);
  background: #f7f3eb;
  box-shadow: none;
  text-shadow: none;
}

.sound-toggle input {
  accent-color: var(--modern-green);
}

.leaderboard-row strong {
  color: var(--modern-green);
}

@media (max-width: 760px) {
  .pause-button {
    width: 52px;
    height: 52px;
  }

  .pause-button span {
    width: 6px;
    height: 22px;
  }

  .hud-pill {
    min-height: 48px;
    font-size: 25px;
  }

  .bottom-actions {
    padding: 4px;
  }

  .action-button {
    height: 52px;
    padding: 5px;
  }

  .action-icon {
    width: 29px;
    height: 29px;
    font-size: 17px;
  }

  .action-button strong {
    font-size: 11px;
  }

  .menu-actions {
    padding: 5px;
  }
}

/* Juicy game UI */
:root {
  --game-ink: #382016;
  --game-cream: #fff4c7;
  --game-yellow: #ffd84e;
  --game-yellow-dark: #d49a16;
  --game-green: #58c75f;
  --game-green-dark: #27843d;
  --game-red: #f45d48;
  --game-red-dark: #b72f2b;
  --game-blue: #55b8dc;
  --game-blue-dark: #267a9e;
  --game-purple: #a677dc;
  --game-purple-dark: #6841a0;
}

button {
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.12s ease;
}

button:hover {
  filter: saturate(1.08) brightness(1.04);
}

button:active {
  transform: translateY(3px) scale(0.985);
}

button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}

.pause-button,
.hud-pill,
.score-pill {
  border: 3px solid var(--game-ink);
  color: var(--game-cream);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, #694333, #38251e);
  box-shadow:
    0 5px 0 #20120d,
    0 10px 20px rgba(57, 29, 16, 0.24),
    inset 0 0 0 2px rgba(255, 232, 157, 0.12);
  text-shadow: 0 2px 0 #20120d;
  backdrop-filter: none;
}

.pause-button {
  width: 58px;
  height: 58px;
}

.pause-button span {
  width: 8px;
  height: 27px;
  border-radius: 3px;
  background: var(--game-yellow);
}

.hud-pill,
.score-pill {
  min-height: 54px;
}

.hud-pill {
  gap: 12px;
  padding: 0 19px;
  font-size: 29px;
}

.level-label {
  color: var(--game-yellow);
  font-size: 17px;
  text-shadow: 0 2px 0 #20120d;
}

.score-pill {
  color: var(--game-cream);
}

.score-pill span {
  color: var(--game-yellow);
}

.cloche {
  width: 43px;
  height: 35px;
  color: var(--game-ink);
  background:
    linear-gradient(180deg, #fffdf1, #f2dca1);
  box-shadow: inset 0 -3px 0 rgba(137, 87, 34, 0.2);
}

.cloche.plate-counter-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url("assets/ui/plate-sprite.webp") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(24, 13, 9, 0.5));
  transform: none;
}

.rail {
  border: 3px solid var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 32%),
    linear-gradient(180deg, #675148, #40312b);
  box-shadow: 0 6px 0 rgba(42, 23, 14, 0.38), 0 14px 24px rgba(42, 23, 14, 0.18);
  backdrop-filter: none;
}

.recipe-note strong {
  border: 3px solid var(--game-ink);
  border-radius: 7px;
  color: var(--game-cream);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(180deg, #704735, #3b261e);
  box-shadow: 0 4px 0 rgba(45, 24, 14, 0.34);
  text-shadow: 0 2px 0 #20120d;
}

.bottom-actions {
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.action-button {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 2px;
  height: 72px;
  padding: 7px 4px 5px;
  border: 3px solid var(--game-ink);
  border-radius: 8px;
  color: var(--game-ink);
  box-shadow: 0 5px 0 var(--button-shadow), 0 9px 16px rgba(48, 25, 14, 0.18);
  text-shadow: none;
}

.action-button:hover {
  background: var(--button-bg);
}

.plate-action {
  --button-bg: #ffe36d;
  --button-shadow: #c89716;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 42%),
    var(--button-bg);
}

.clean-action {
  --button-bg: #9be083;
  --button-shadow: #459b42;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 42%),
    var(--button-bg);
}

.shuffle-action {
  --button-bg: #ff9d82;
  --button-shadow: #c65340;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 42%),
    var(--button-bg);
}

.action-icon,
.plate-action .action-icon,
.clean-action .action-icon,
.shuffle-action .action-icon {
  width: 34px;
  height: 34px;
  border: 0;
  color: var(--game-ink);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 -3px 0 rgba(109, 66, 28, 0.12);
  font-size: 21px;
}

.action-button strong {
  color: var(--game-ink);
  font-size: 12px;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.combo-badge {
  border: 3px solid var(--game-ink);
  border-radius: 8px;
  color: var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 44%),
    var(--game-yellow);
  box-shadow: 0 5px 0 var(--game-yellow-dark);
  text-shadow: none;
  backdrop-filter: none;
}

.combo-badge span {
  color: #7c5610;
}

.start-menu {
  background:
    linear-gradient(180deg, rgba(255, 229, 141, 0.08), rgba(63, 32, 15, 0.08)),
    #b8844d url("assets/background.webp") center / cover no-repeat fixed;
}

.menu-pizza {
  filter:
    drop-shadow(0 7px 0 rgba(63, 31, 14, 0.22))
    drop-shadow(0 22px 30px rgba(45, 24, 13, 0.24));
}

.menu-actions {
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.menu-button {
  min-height: 64px;
  gap: 12px;
  padding: 8px 13px;
  border: 3px solid var(--game-ink);
  border-radius: 8px;
  color: var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 46%),
    var(--game-cream);
  box-shadow: 0 5px 0 #c89a56, 0 10px 18px rgba(52, 28, 15, 0.18);
  text-shadow: none;
}

.menu-button:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 46%),
    #fff1b7;
}

.menu-button.primary {
  min-height: 76px;
  color: white;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 44%),
    linear-gradient(180deg, #68d66c, var(--game-green));
  box-shadow: 0 6px 0 var(--game-green-dark), 0 12px 20px rgba(36, 111, 51, 0.24);
}

.menu-button.primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 44%),
    linear-gradient(180deg, #72dd76, #55c45d);
}

.menu-icon {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(56, 32, 22, 0.2);
  color: var(--game-ink);
  background: #fff8d9;
  box-shadow: inset 0 -3px 0 rgba(130, 81, 33, 0.14);
  font-size: 18px;
}

.menu-button.primary .menu-icon {
  color: var(--game-green-dark);
  background: white;
}

.menu-button strong {
  color: inherit;
  font-size: 21px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.menu-button.primary strong {
  text-shadow: 0 2px 0 rgba(23, 104, 48, 0.4);
}

.menu-button small {
  color: #87664d;
  font-size: 13px;
  text-shadow: none;
}

.menu-button.primary small {
  color: #efffe9;
  text-shadow: 0 1px 0 rgba(23, 104, 48, 0.35);
}

.pause-panel,
.menu-modal {
  background: rgba(47, 25, 14, 0.55);
  backdrop-filter: blur(7px);
}

.pause-card,
.modal-card {
  gap: 10px;
  padding: 16px;
  border: 3px solid var(--game-ink);
  border-radius: 8px;
  color: var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 28%),
    #fff0bd;
  box-shadow: 0 8px 0 #9b6534, 0 24px 48px rgba(40, 20, 10, 0.32);
}

.pause-card h2,
.modal-card h2 {
  margin: 5px 8px 10px;
  color: var(--game-ink);
  font-size: 32px;
  text-shadow: 0 2px 0 white;
}

.pause-card p {
  color: #76523a;
}

.sound-toggle,
.menu-toggle,
.leaderboard-row {
  min-height: 58px;
  border: 2px solid rgba(56, 32, 22, 0.22);
  border-radius: 7px;
  color: var(--game-ink);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 -3px 0 rgba(135, 83, 34, 0.1);
}

.sound-toggle input {
  accent-color: var(--game-green);
}

.pause-card button,
.modal-card button {
  min-height: 55px;
  border: 3px solid var(--game-ink);
  border-radius: 7px;
  color: var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 44%),
    #ffe07a;
  box-shadow: 0 4px 0 var(--game-yellow-dark);
  text-shadow: none;
}

#resumeButton,
#resultButton {
  color: white;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%),
    var(--game-green);
  box-shadow: 0 4px 0 var(--game-green-dark);
  text-shadow: 0 2px 0 rgba(27, 103, 45, 0.42);
}

#restartButton {
  color: white;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 44%),
    var(--game-red);
  box-shadow: 0 4px 0 var(--game-red-dark);
  text-shadow: 0 2px 0 rgba(132, 35, 29, 0.4);
}

.leaderboard-row strong {
  color: var(--game-green-dark);
}

@media (max-width: 760px) {
  .bottom-actions {
    gap: 5px;
  }

  .action-button {
    height: 66px;
    padding: 6px 3px 4px;
  }

  .action-icon,
  .plate-action .action-icon,
  .clean-action .action-icon,
  .shuffle-action .action-icon {
    width: 31px;
    height: 31px;
    font-size: 19px;
  }

  .action-button strong {
    font-size: 11px;
  }

  .menu-actions {
    gap: 8px;
  }

  .menu-button {
    min-height: 60px;
  }

  .menu-button.primary {
    min-height: 72px;
  }
}

/* Production mobile game layout */
.menu-screen {
  grid-template-rows: minmax(300px, 1fr) auto;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.menu-pizza {
  width: min(54vh, 82vw, 430px);
  animation: menuPizzaIdle 4.8s ease-in-out infinite;
}

.menu-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  width: min(390px, calc(100vw - 34px));
}

.menu-button.primary {
  position: relative;
  justify-content: center;
  min-height: 82px;
  padding: 10px 22px;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.32), transparent 52%),
    linear-gradient(180deg, #71dd72, #3dad50);
  box-shadow:
    0 8px 0 #237536,
    0 15px 28px rgba(29, 112, 48, 0.3),
    inset 0 0 0 3px rgba(255, 255, 255, 0.36);
}

.menu-button.primary::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  pointer-events: none;
}

.menu-button.primary .menu-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border: 0;
  color: #2b963f;
  background: white;
  box-shadow: 0 4px 0 rgba(30, 111, 48, 0.22);
  font-size: 19px;
}

.menu-button.primary strong {
  font-size: 28px;
  line-height: 1;
}

.menu-button.primary small {
  margin-top: 7px;
  font-size: 14px;
}

.menu-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 20px;
}

.menu-button.shortcut {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  color: white;
  background: transparent;
  box-shadow: none;
}

.menu-button.shortcut:hover {
  background: transparent;
  filter: brightness(1.05);
}

.menu-button.shortcut .menu-icon {
  width: 68px;
  height: 68px;
  border: 3px solid #43261a;
  color: white;
  box-shadow:
    0 6px 0 var(--shortcut-shadow),
    0 11px 20px rgba(54, 29, 15, 0.22),
    inset 0 0 0 3px rgba(255, 255, 255, 0.3);
  font-size: 29px;
}

.leaderboard-shortcut {
  --shortcut-shadow: #bf8615;
}

.leaderboard-shortcut .menu-icon {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.4), transparent 44%),
    linear-gradient(180deg, #ffdf59, #eeb224);
}

.settings-shortcut {
  --shortcut-shadow: #356fa0;
}

.settings-shortcut .menu-icon {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.36), transparent 44%),
    linear-gradient(180deg, #70c7e8, #4196c8);
}

.menu-button.shortcut strong {
  color: #fff7d2;
  font-size: 15px;
  text-shadow:
    0 2px 0 #4a2818,
    1px 0 0 #4a2818,
    -1px 0 0 #4a2818;
}

.bottom-actions {
  width: min(390px, calc(100vw - 26px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: end;
  padding: 0 8px max(4px, env(safe-area-inset-bottom));
}

.action-button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  height: 86px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff8d7;
  background: transparent;
  box-shadow: none;
}

.action-button:hover {
  background: transparent;
}

.action-icon,
.plate-action .action-icon,
.clean-action .action-icon,
.shuffle-action .action-icon {
  width: 62px;
  height: 62px;
  border: 3px solid #402419;
  color: var(--game-ink);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.46), transparent 44%),
    var(--booster-color);
  box-shadow:
    0 6px 0 var(--booster-shadow),
    0 10px 17px rgba(48, 25, 14, 0.24),
    inset 0 0 0 3px rgba(255, 255, 255, 0.26);
  font-size: 29px;
}

.plate-action {
  --booster-color: #ffdc4f;
  --booster-shadow: #b77d13;
}

.clean-action {
  --booster-color: #7bd675;
  --booster-shadow: #34833b;
}

.shuffle-action {
  --booster-color: #ff8d75;
  --booster-shadow: #b94438;
}

.action-button strong {
  overflow: visible;
  color: #fff8d7;
  font-size: 12px;
  line-height: 1;
  text-overflow: clip;
  text-shadow:
    0 2px 0 #482719,
    1px 0 0 #482719,
    -1px 0 0 #482719;
  white-space: nowrap;
}

.pause-button {
  width: 58px;
  height: 58px;
  border-radius: 19px;
}

.hud-pill {
  border-radius: 20px;
}

.score-pill {
  border-radius: 18px;
}

.pause-card,
.modal-card {
  border-radius: 22px;
}

.pause-card button,
.modal-card button,
.sound-toggle,
.menu-toggle,
.leaderboard-row {
  border-radius: 14px;
}

@keyframes menuPizzaIdle {
  0%,
  100% {
    transform: translateY(0) rotate(-0.8deg);
  }
  50% {
    transform: translateY(-7px) rotate(0.8deg);
  }
}

@media (max-width: 760px) {
  .menu-actions {
    width: min(380px, calc(100vw - 28px));
  }

  .menu-button.primary {
    min-height: 78px;
    border-radius: 22px;
  }

  .menu-shortcuts {
    padding: 0 24px;
  }

  .menu-button.shortcut .menu-icon {
    width: 62px;
    height: 62px;
    font-size: 26px;
  }

  .bottom-actions {
    width: min(370px, calc(100vw - 18px));
    gap: 14px;
  }

  .action-button {
    height: 80px;
  }

  .action-icon,
  .plate-action .action-icon,
  .clean-action .action-icon,
  .shuffle-action .action-icon {
    width: 57px;
    height: 57px;
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-pizza {
    animation: none;
  }
}

/* Illustrated game controls */
.menu-actions {
  gap: 3px;
  width: min(410px, calc(100vw - 20px));
}

.menu-button.primary {
  min-height: 118px;
  padding: 16px 82px 14px 34px;
  border: 0;
  border-radius: 0;
  color: var(--game-ink);
  background: var(--sprite-play-peel) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 8px 8px rgba(55, 27, 12, 0.28));
}

.menu-button.primary::after {
  display: none;
}

.menu-button.primary:hover {
  background: var(--sprite-play-peel) center / 100% 100% no-repeat;
  filter: brightness(1.04) saturate(1.05) drop-shadow(0 8px 8px rgba(55, 27, 12, 0.28));
}

.menu-button.primary .menu-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  color: white;
  background:
    linear-gradient(180deg, #6fdb70, #3eae50);
  box-shadow: 0 4px 0 #27783a;
}

.menu-button.primary strong {
  color: var(--game-ink);
  font-size: 27px;
  text-shadow: 0 2px 0 rgba(255, 244, 199, 0.7);
}

.menu-button.primary small {
  color: #8c4f24;
  text-shadow: none;
}

.menu-shortcuts {
  grid-template-columns: repeat(2, 118px);
  justify-content: center;
  gap: 34px;
  padding: 0;
}

.menu-button.shortcut {
  position: relative;
  width: 118px;
  height: 118px;
  padding: 0;
  filter: drop-shadow(0 7px 7px rgba(50, 25, 12, 0.25));
}

.menu-button.leaderboard-shortcut {
  background: var(--sprite-menu-medal) center / contain no-repeat;
}

.menu-button.settings-shortcut {
  background: var(--sprite-menu-settings) center / contain no-repeat;
}

.menu-button.shortcut:hover,
.menu-button.leaderboard-shortcut:hover,
.menu-button.settings-shortcut:hover {
  background-color: transparent;
  filter: brightness(1.04) saturate(1.06) drop-shadow(0 7px 7px rgba(50, 25, 12, 0.25));
}

.menu-button.shortcut .menu-icon {
  display: none;
}

.menu-button.shortcut strong {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 52%;
  color: var(--game-ink);
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 0 white;
  transform: translateY(-50%);
}

.bottom-actions {
  width: min(380px, calc(100vw - 14px));
  gap: 13px;
}

.action-button {
  height: 96px;
}

.action-icon,
.plate-action .action-icon,
.clean-action .action-icon,
.shuffle-action .action-icon {
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 6px 5px rgba(48, 24, 12, 0.25));
  font-size: 26px;
}

.plate-action .action-icon {
  background-image: var(--sprite-booster-hint);
}

.clean-action .action-icon {
  background-image: var(--sprite-booster-clean);
}

.shuffle-action .action-icon {
  background-image: var(--sprite-booster-shuffle);
}

.action-button strong {
  margin-top: -10px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .menu-screen {
    grid-template-rows: minmax(280px, 1fr) auto;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .menu-pizza {
    width: min(48vh, 80vw, 350px);
  }

  .menu-actions {
    width: min(400px, calc(100vw - 16px));
  }

  .menu-button.primary {
    min-height: 108px;
    padding: 13px 72px 12px 30px;
  }

  .menu-shortcuts {
    grid-template-columns: repeat(2, 103px);
    gap: 38px;
  }

  .menu-button.shortcut {
    width: 103px;
    height: 103px;
  }

  .menu-button.shortcut strong {
    left: 14px;
    right: 14px;
    font-size: 12px;
  }

  .bottom-actions {
    gap: 8px;
  }

  .action-button {
    height: 90px;
  }

  .action-icon,
  .plate-action .action-icon,
  .clean-action .action-icon,
  .shuffle-action .action-icon {
    width: 70px;
    height: 70px;
    font-size: 24px;
  }
}

.pause-card,
.modal-card {
  width: min(380px, calc(100vw - 18px));
  min-height: 460px;
  align-content: center;
  gap: 9px;
  padding: 70px 46px 52px;
  border: 0;
  border-radius: 0;
  color: var(--game-ink);
  background: var(--sprite-dialog-box) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px rgba(42, 21, 10, 0.28));
}

.pause-card h2,
.modal-card h2 {
  margin: 0 0 10px;
  font-size: 31px;
}

.pause-card > .sound-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pause-card button,
.modal-card button,
.sound-toggle,
.menu-toggle,
.leaderboard-row {
  min-height: 51px;
}

@media (max-width: 760px) {
  .pause-card,
  .modal-card {
    width: min(360px, calc(100vw - 16px));
    min-height: 445px;
    padding: 67px 42px 49px;
  }
}

.ability-card {
  justify-items: center;
  text-align: center;
}

.ability-preview {
  width: 112px;
  height: 112px;
  margin: -18px auto -4px;
  object-fit: contain;
  filter: drop-shadow(0 7px 6px rgba(48, 24, 12, 0.22));
}

.ability-card h2 {
  margin-bottom: 2px;
}

.ability-card p {
  max-width: 260px;
  margin: 0 auto 9px;
  color: #76523a;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.ability-card .ad-apply-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: white;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%),
    var(--game-green);
  box-shadow: 0 4px 0 var(--game-green-dark);
  text-shadow: 0 2px 0 rgba(27, 103, 45, 0.42);
}

.ad-apply-button span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  border: 2px solid white;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 760px) {
  .ability-preview {
    width: 100px;
    height: 100px;
  }

  .ability-card p {
    font-size: 15px;
  }
}

/* Illustrated base buttons */
.pause-card button,
.modal-card button {
  min-height: 68px;
  padding: 0 34px;
  border: 0;
  border-radius: 0;
  color: var(--game-ink);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 4px rgba(48, 24, 12, 0.2));
  text-shadow: 0 2px 0 rgba(255, 247, 205, 0.58);
}

.pause-card button:hover,
.modal-card button:hover {
  filter: brightness(1.04) saturate(1.05) drop-shadow(0 5px 4px rgba(48, 24, 12, 0.2));
}

#resumeButton,
#resultButton {
  color: #f8ffe6;
  background-image: var(--sprite-button-primary);
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-shadow: 0 2px 0 rgba(43, 87, 17, 0.55);
}

#pauseMenuButton,
#closeLeaderboardButton,
#closeSettingsButton,
#closeAbilityButton {
  background-image: var(--sprite-button-secondary);
  background-color: transparent;
}

#restartButton {
  color: white;
  background-image: var(--sprite-button-danger);
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-shadow: 0 2px 0 rgba(112, 24, 18, 0.58);
}

.ability-card .ad-apply-button {
  min-height: 82px;
  padding: 0 22px 0 94px;
  color: white;
  background-image: var(--sprite-button-ad);
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 15px;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 2px 0 rgba(21, 77, 99, 0.58);
}

.ad-apply-button span {
  display: none;
}

.language-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 7px 9px 7px 15px;
  border: 2px solid rgba(56, 32, 22, 0.22);
  border-radius: 14px;
  color: var(--game-ink);
  background: rgba(255, 255, 255, 0.62);
  font-size: 18px;
  font-weight: 950;
}

.language-control {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  gap: 4px;
}

.modal-card .language-button {
  min-height: 38px;
  padding: 0;
  border: 2px solid rgba(56, 32, 22, 0.18);
  border-radius: 10px;
  color: #76523a;
  background: #fff5cf;
  box-shadow: none;
  filter: none;
  font-size: 14px;
  text-shadow: none;
}

.modal-card .language-button.active {
  color: white;
  background: #4eb85d;
  box-shadow: inset 0 -3px 0 rgba(31, 105, 46, 0.28);
}

@media (max-width: 760px) {
  .pause-card button,
  .modal-card button {
    min-height: 64px;
    padding: 0 28px;
  }

  .ability-card .ad-apply-button {
    min-height: 78px;
    padding: 0 18px 0 86px;
    font-size: 13px;
  }
}

/* Keep illustrated controls stable across legacy hover rules above. */
.menu-button,
.action-button,
.pause-button,
.pause-card button,
.modal-card button {
  transform: none;
}

.menu-button.primary:hover {
  background-color: transparent;
  background-image: var(--sprite-play-peel);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.menu-button.leaderboard-shortcut:hover {
  background-color: transparent;
  background-image: var(--sprite-menu-medal);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-button.settings-shortcut:hover {
  background-color: transparent;
  background-image: var(--sprite-menu-settings);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-button:hover,
.action-button:hover,
.pause-button:hover,
.pause-card button:hover,
.modal-card button:hover {
  transform: none;
}

.action-button:hover {
  background: transparent;
}

.pause-button:hover {
  border: 3px solid var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, #694333, #38251e);
  box-shadow:
    0 5px 0 #20120d,
    0 10px 20px rgba(57, 29, 16, 0.24),
    inset 0 0 0 2px rgba(255, 232, 157, 0.12);
}

#resumeButton:hover,
#resultButton:hover {
  color: #f8ffe6;
  background-color: transparent;
  background-image: var(--sprite-button-primary);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#pauseMenuButton:hover,
#closeLeaderboardButton:hover,
#closeSettingsButton:hover,
#closeAbilityButton:hover {
  background-color: transparent;
  background-image: var(--sprite-button-secondary);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#restartButton:hover {
  color: white;
  background-color: transparent;
  background-image: var(--sprite-button-danger);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ability-card .ad-apply-button:hover {
  color: white;
  background-color: transparent;
  background-image: var(--sprite-button-ad);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.modal-card .language-button:hover {
  color: #76523a;
  background: #fff5cf;
  box-shadow: none;
  filter: none;
}

.modal-card .language-button.active:hover {
  color: white;
  background: #4eb85d;
  box-shadow: inset 0 -3px 0 rgba(31, 105, 46, 0.28);
}

.menu-button:active,
.action-button:active,
.pause-button:active,
.pause-card button:active,
.modal-card button:active {
  transform: scale(0.97);
}

/* Final responsive menu composition. */
.menu-screen {
  grid-template-rows: auto minmax(24px, 1fr) auto;
  align-items: center;
  padding: clamp(20px, 3vh, 34px) 16px max(18px, env(safe-area-inset-bottom));
}

.menu-pizza {
  grid-row: 1;
  width: min(44vh, 78vw, 430px);
  margin-top: 0;
}

.menu-actions {
  grid-row: 3;
  width: min(400px, calc(100vw - 28px));
  gap: 5px;
}

.menu-button.primary {
  min-height: clamp(100px, 10vh, 118px);
}

.menu-shortcuts {
  grid-template-columns: repeat(2, 108px);
  gap: 34px;
}

.menu-button.shortcut {
  width: 108px;
  height: 108px;
}

@media (max-width: 430px) {
  .menu-screen {
    padding-top: 14px;
  }

  .menu-pizza {
    width: min(42vh, 80vw, 330px);
  }

  .menu-actions {
    width: min(390px, calc(100vw - 16px));
  }

  .menu-shortcuts {
    grid-template-columns: repeat(2, 101px);
    gap: 32px;
  }

  .menu-button.shortcut {
    width: 101px;
    height: 101px;
  }
}

@media (max-height: 620px) and (min-aspect-ratio: 1 / 1) {
  .menu-screen {
    grid-template: 1fr / minmax(260px, 1fr) minmax(320px, 1fr);
    gap: 18px;
    padding: 14px 24px;
  }

  .menu-pizza {
    grid-area: 1 / 1;
    width: min(72vh, 42vw, 400px);
  }

  .menu-actions {
    grid-area: 1 / 2;
    align-self: center;
  }
}

/* Render illustrated modal buttons inside their boxes, without edge lines. */
#resumeButton,
#resultButton,
#restartButton,
#pauseMenuButton,
#closeLeaderboardButton,
#closeSettingsButton,
#closeAbilityButton,
.ability-card .ad-apply-button {
  position: relative;
  isolation: isolate;
  background-image: none;
  box-shadow: none;
  filter: none;
}

#resumeButton::before,
#resultButton::before,
#restartButton::before,
#pauseMenuButton::before,
#closeLeaderboardButton::before,
#closeSettingsButton::before,
#closeAbilityButton::before,
.ability-card .ad-apply-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px 8px;
  background: var(--modal-button-sprite) center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 4px rgba(48, 24, 12, 0.2));
  pointer-events: none;
}

#resumeButton,
#resultButton {
  --modal-button-sprite: var(--sprite-button-primary);
}

#restartButton {
  --modal-button-sprite: var(--sprite-button-danger);
}

#pauseMenuButton,
#closeLeaderboardButton,
#closeSettingsButton,
#closeAbilityButton {
  --modal-button-sprite: var(--sprite-button-secondary);
}

.ability-card .ad-apply-button {
  --modal-button-sprite: var(--sprite-button-ad);
}

#resumeButton:hover,
#resultButton:hover,
#restartButton:hover,
#pauseMenuButton:hover,
#closeLeaderboardButton:hover,
#closeSettingsButton:hover,
#closeAbilityButton:hover,
.ability-card .ad-apply-button:hover {
  background-image: none;
  box-shadow: none;
  filter: none;
}

#resumeButton:hover::before,
#resultButton:hover::before,
#restartButton:hover::before,
#pauseMenuButton:hover::before,
#closeLeaderboardButton:hover::before,
#closeSettingsButton:hover::before,
#closeAbilityButton:hover::before,
.ability-card .ad-apply-button:hover::before {
  filter: brightness(1.04) saturate(1.05) drop-shadow(0 5px 4px rgba(48, 24, 12, 0.2));
}

/* Ability labels live inside the illustrated button centers. */
.action-button {
  position: relative;
}

.action-button strong {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  width: 68px;
  margin: 0;
  color: #4a2818;
  font-size: 10px;
  line-height: 1.05;
  text-align: center;
  text-shadow:
    -1px -1px 0 #fff5cf,
    1px -1px 0 #fff5cf,
    -1px 1px 0 #fff5cf,
    1px 1px 0 #fff5cf,
    0 2px 0 rgba(255, 245, 207, 0.85);
  transform: translate(-50%, -50%);
  white-space: normal;
  pointer-events: none;
}

@media (max-width: 430px) {
  .action-button strong {
    width: 62px;
    font-size: 9px;
  }
}

/* Keep modal content directly on the illustrated pizza-box surface. */
.modal-card .menu-toggle,
.modal-card .language-setting,
.modal-card .leaderboard-row {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Viewport-level overlays must also cover the page outside the centered game shell. */
.pause-panel,
.menu-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(25, 16, 10, 0.66);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.leaderboard-card {
  width: min(400px, calc(100vw - 28px));
  min-height: min(680px, calc(100dvh - 56px));
  max-height: min(760px, calc(100dvh - 28px));
  align-content: start;
  padding: 82px 36px 62px;
  grid-template-rows: auto auto minmax(140px, 1fr) auto auto;
}

.leaderboard-heading,
.leaderboard-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 6px 8px;
  padding-left: 6px;
  padding-right: 22px;
  text-align: left;
}

.leaderboard-heading {
  padding: 0 22px 0 6px;
  color: #795035;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
}

.leaderboard-heading span:last-child {
  text-align: right;
  white-space: normal;
  padding-right: 0;
}

.leaderboard-list {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 22px;
  padding-left: 2px;
}

.leaderboard-row {
  min-height: 48px;
  padding: 6px 8px;
  border: 0 !important;
}

.leaderboard-position {
  color: #a75b24 !important;
  font-size: 18px !important;
  text-align: center;
}

.leaderboard-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-score {
  color: #168144 !important;
  font-size: 20px !important;
  text-align: right;
  padding-right: 0;
}

.leaderboard-status {
  align-self: center;
  margin: 8px 0;
  color: #74472d;
  font-weight: 900;
}

.leaderboard-status[hidden] {
  display: none;
}

/* Cohesive full-screen main menu. */
.menu-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 18px);
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
}

.menu-pizza {
  flex: 0 1 auto;
  align-self: center;
  width: min(43vh, 76vw, 430px);
  margin: 0;
}

.menu-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 7px;
  width: min(410px, calc(100vw - 28px));
}

.menu-button.primary {
  min-height: 112px;
}

.menu-shortcuts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: 100%;
  padding: 0;
}

.menu-button.shortcut,
.menu-button.leaderboard-shortcut,
.menu-button.settings-shortcut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 68px;
  min-height: 68px;
  padding: 0 42px;
  border: 0;
  border-radius: 0;
  color: var(--game-ink);
  background: var(--sprite-button-secondary) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 4px rgba(50, 25, 12, 0.2));
}

.menu-button.shortcut .menu-icon {
  position: absolute;
  left: 54px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 50%;
  color: #fff7d2;
  background: #9d6421;
  box-shadow: inset 0 -3px 0 rgba(77, 40, 15, 0.25);
  font-size: 15px;
  line-height: 1;
}

.menu-button.settings-shortcut .menu-icon {
  background: #4c89a8;
}

.menu-button.shortcut strong {
  position: static;
  color: var(--game-ink);
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 247, 205, 0.7);
  transform: none;
}

.menu-button.shortcut:hover,
.menu-button.leaderboard-shortcut:hover,
.menu-button.settings-shortcut:hover {
  background: var(--sprite-button-secondary) center / 100% 100% no-repeat;
  filter: brightness(1.04) saturate(1.05) drop-shadow(0 4px 4px rgba(50, 25, 12, 0.2));
}

@media (max-height: 780px) {
  .menu-screen {
    gap: 5px;
  }

  .menu-pizza {
    width: min(38vh, 62vw, 340px);
  }

  .menu-button.primary {
    min-height: 92px;
  }

  .menu-button.shortcut,
  .menu-button.leaderboard-shortcut,
  .menu-button.settings-shortcut {
    height: 58px;
    min-height: 58px;
  }
}

@media (max-height: 620px) and (min-aspect-ratio: 1 / 1) {
  .menu-screen {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 410px);
    gap: 20px;
  }

  .menu-pizza {
    width: min(70vh, 40vw, 390px);
  }
}

/* ── Stable responsive layout (grid-based, no overlaps) ── */
:root {
  --layout-side: clamp(188px, 30vw, 286px);
  --layout-panels: clamp(196px, 25vh, 268px);
  --layout-actions: clamp(96px, 12vh, 112px);
  --layout-pizza: min(99%, calc(100vw - 14px));
}

.arcade-shell {
  display: grid;
  width: 100%;
  max-width: 1180px;
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding:
    max(6px, env(safe-area-inset-top))
    max(6px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left));
  overflow: hidden;
  grid-template-columns: minmax(0, var(--layout-side)) minmax(0, 1fr) minmax(0, var(--layout-side));
  grid-template-rows: auto minmax(0, var(--layout-panels)) minmax(0, 1fr) auto;
  grid-template-areas:
    "hud hud hud"
    "recipe . order"
    "pizza pizza pizza"
    "actions actions actions";
  gap: clamp(5px, 1vh, 10px);
  align-items: stretch;
}

.hud {
  position: relative;
  top: auto;
  left: auto;
  grid-area: hud;
  justify-self: center;
  align-self: start;
  transform: none;
  z-index: 20;
  max-width: 100%;
}

.recipe-status {
  position: relative;
  top: auto;
  left: auto;
  grid-area: recipe;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  align-self: start;
  justify-self: stretch;
  z-index: 12;
  overflow: visible;
}

.order-zone {
  position: relative;
  top: auto;
  right: auto;
  grid-area: order;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  align-self: start;
  justify-self: stretch;
  z-index: 10;
  /* overflow: visible — чтобы пузыри над тарелками (::before) не обрезались */
  overflow: visible;
}

.order-zone .rail {
  top: clamp(52px, 7vw, 64px);
  bottom: 0;
  height: auto;
}

.order-zone .plates {
  overflow: visible;
  padding: clamp(58px, 9vw, 74px) clamp(6px, 1.4vw, 12px) clamp(8px, 1.4vw, 12px);
  gap: clamp(10px, 2.4vw, 18px);
}

.order-zone .bin {
  width: clamp(78px, 20vw, 118px);
}

.order-zone .bin::before {
  top: clamp(-52px, -11vw, -42px);
  width: clamp(90px, 22vw, 130px);
  height: clamp(42px, 8.5vw, 56px);
}

.order-zone .bin-icon {
  top: clamp(-40px, -8.5vw, -32px);
  left: calc(50% - clamp(36px, 9vw, 50px));
}

.order-zone .bin-icon img {
  width: clamp(30px, 7vw, 42px);
  height: clamp(30px, 7vw, 42px);
}

.order-zone .bin-count {
  top: clamp(-40px, -8.5vw, -32px);
  right: calc(50% - clamp(40px, 10vw, 54px));
  font-size: clamp(22px, 6vw, 32px);
}

.pizza-stage {
  position: relative;
  left: auto;
  bottom: auto;
  grid-area: pizza;
  width: var(--layout-pizza);
  height: auto;
  max-width: var(--layout-pizza);
  max-height: 100%;
  aspect-ratio: 1;
  justify-self: center;
  align-self: center;
  transform: none;
  min-height: 0;
  min-width: 0;
}

.pizza-stage .pizza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bottom-actions {
  position: relative;
  left: auto;
  bottom: auto;
  grid-area: actions;
  justify-self: center;
  align-self: end;
  transform: none;
  z-index: 24;
  width: min(calc(100% - 4px), 460px);
  gap: clamp(16px, 5vw, 28px);
  margin-bottom: max(4px, env(safe-area-inset-bottom));
}

.combo-badge {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--layout-actions) + 12px);
  z-index: 26;
}

.message {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(var(--layout-actions) + 8px);
  z-index: 26;
  max-width: min(330px, calc(100% - 24px));
}

.start-menu,
.menu-modal {
  z-index: 100;
}

.pause-panel {
  z-index: 80;
}

.menu-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vh, 18px);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  overflow: hidden;
}

.menu-screen::before {
  top: 8%;
  width: min(70vmin, 88vw, 560px);
}

.menu-pizza {
  flex: 0 1 auto;
  align-self: center;
  width: min(46vmin, 78vw, 420px);
  max-height: min(42vh, 420px);
  height: auto;
  aspect-ratio: 1;
  margin: 0;
}

.menu-actions {
  flex: 0 0 auto;
  align-self: center;
  width: min(400px, calc(100vw - 28px));
}

.action-button {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 6px;
  height: auto;
  min-height: clamp(116px, 14vh, 132px);
  padding-bottom: 4px;
}

.action-button strong {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  max-width: 120px;
  margin: 0;
  transform: none;
  white-space: nowrap;
  font-size: clamp(12px, 3.4vw, 15px);
}

.action-icon,
.plate-action .action-icon,
.clean-action .action-icon,
.shuffle-action .action-icon {
  position: relative;
  /* Иконки ощутимо крупнее; background-size 105% убирает прозрачные поля спрайта */
  width: clamp(96px, 26vw, 116px);
  height: clamp(96px, 26vw, 116px);
  background-size: 105%;
}

@media (orientation: portrait) {
  :root {
    /* Панели немного выше — пузыри заказов уместятся */
    --layout-panels: clamp(218px, 27vh, 272px);
    --layout-pizza: min(99vw, 99%);
    --layout-actions: clamp(100px, 13vh, 118px);
  }

  .arcade-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "hud hud"
      "recipe order"
      "pizza pizza"
      "actions actions";
    row-gap: clamp(6px, 1vh, 12px);
    column-gap: clamp(6px, 1.4vw, 12px);
    padding-inline: max(2px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-left));
  }

  .recipe-status {
    padding: clamp(42px, 6vh, 54px) clamp(12px, 2.8vw, 18px) clamp(12px, 1.8vh, 16px);
  }

  .recipe-note strong {
    font-size: clamp(15px, 4vw, 22px);
  }

  .recipe-ingredients img {
    width: clamp(34px, 8vw, 48px);
    height: clamp(34px, 8vw, 48px);
  }

  .mistake-label {
    font-size: clamp(14px, 3.6vw, 18px);
  }

  /* Тарелки — в портрете стандартный отступ */
  .order-zone {
    padding-top: 0;
  }

  .order-zone .rail {
    top: clamp(52px, 7vw, 64px);
    bottom: 0;
    height: auto;
  }

  .order-zone .plates {
    padding: clamp(58px, 9vw, 72px) clamp(4px, 1.2vw, 8px) clamp(6px, 1.4vw, 10px);
  }

  .pizza-stage {
    width: var(--layout-pizza);
    max-width: var(--layout-pizza);
  }

  /* Кнопки в портрете */
  .action-icon,
  .plate-action .action-icon,
  .clean-action .action-icon,
  .shuffle-action .action-icon {
    width: clamp(96px, 24vw, 116px);
    height: clamp(96px, 24vw, 116px);
    background-size: 105%;
  }

  .action-button {
    min-height: clamp(118px, 14vh, 136px);
  }

  .action-button strong {
    font-size: clamp(12px, 3.2vw, 15px);
  }
}

@media (max-width: 760px) {
  :root {
    --layout-actions: clamp(92px, 11vh, 108px);
  }

  .bottom-actions {
    width: min(calc(100% - 6px), 420px);
  }

  .menu-pizza {
    width: min(44vmin, 82vw, 360px);
    max-height: min(38vh, 360px);
  }

  .menu-button.primary {
    min-height: clamp(96px, 14vh, 108px);
  }
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1023px) {
  :root {
    --layout-side: clamp(168px, 24vw, 240px);
    --layout-panels: auto;
    --layout-actions: clamp(84px, 14vh, 100px);
    /* В landscape пицца ограничена высотой: vp_height − hud(64) − actions(84) − gaps(20) */
    --layout-pizza: min(calc(100vh - 176px), 480px);
  }

  .arcade-shell {
    grid-template-columns: minmax(0, var(--layout-side)) minmax(0, 1fr) minmax(0, var(--layout-side));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "hud hud hud"
      "recipe pizza order"
      "actions actions actions";
    gap: clamp(4px, 1.2vh, 8px);
  }

  .recipe-status,
  .order-zone {
    height: auto;
    max-height: min(248px, 34vh);
    align-self: center;
    overflow: visible;
  }

  .recipe-status {
    padding: clamp(36px, 5vh, 46px) clamp(12px, 2vw, 18px) clamp(14px, 2vh, 18px);
  }

  .order-zone {
    padding-top: clamp(42px, 6vh, 52px);
  }

  .order-zone .rail {
    top: clamp(42px, 6vh, 52px);
  }

  .order-zone .plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    padding: clamp(46px, 6.5vh, 54px) clamp(4px, 1vw, 8px) clamp(6px, 1vh, 10px);
    gap: clamp(6px, 1.2vh, 10px);
  }

  .order-zone .bin {
    width: clamp(58px, 10vw, 82px);
  }

  .order-zone .bin::before {
    top: clamp(-44px, -7vw, -36px);
    width: clamp(72px, 12vw, 98px);
    height: clamp(38px, 6vw, 50px);
  }

  .order-zone .bin-icon,
  .order-zone .bin-count {
    top: clamp(-34px, -5.5vw, -28px);
  }

  .pizza-stage {
    width: var(--layout-pizza);
    height: var(--layout-pizza);
    max-width: var(--layout-pizza);
    max-height: var(--layout-pizza);
    align-self: center;
    justify-self: center;
  }

  /* В landscape кнопки компактнее — высоты мало */
  .action-button {
    min-height: auto;
    gap: 4px;
    padding-bottom: 2px;
  }

  .action-button strong {
    font-size: clamp(11px, 2.6vh, 13px);
  }

  .action-icon,
  .plate-action .action-icon,
  .clean-action .action-icon,
  .shuffle-action .action-icon {
    width: clamp(62px, 17vh, 80px);
    height: clamp(62px, 17vh, 80px);
    background-size: 105%;
  }

  .menu-screen {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 3vw, 28px);
    padding-inline: max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left));
  }

  .menu-pizza {
    flex: 0 1 min(68vh, 42vw, 360px);
    width: min(68vh, 42vw, 360px);
    max-height: min(68vh, 360px);
  }

  .menu-actions {
    flex: 0 0 min(340px, 40vw);
    width: min(340px, 40vw);
  }

  .menu-button.primary {
    min-height: 88px;
  }

  .menu-button.shortcut,
  .menu-button.leaderboard-shortcut,
  .menu-button.settings-shortcut {
    height: 54px;
    min-height: 54px;
  }
}

/* Clean main-menu button hierarchy. */
.menu-actions {
  width: min(400px, calc(100vw - 28px));
  gap: 8px;
}

.menu-button.primary {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 96px;
  padding: 0 48px;
}

.menu-button.primary > span:not(.menu-icon) {
  display: grid;
  justify-items: center;
  gap: 4px;
  transform: none;
}

.menu-button.primary strong,
.menu-button.primary small {
  width: auto;
  margin: 0;
  text-align: center;
}

.menu-button.primary .menu-icon {
  position: absolute;
  top: 50%;
  left: 58px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid #315f2d;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.38), transparent 28%),
    linear-gradient(180deg, #78d65f, #45a84b);
  box-shadow:
    inset 0 -4px 0 rgba(33, 112, 48, 0.28),
    0 4px 0 rgba(71, 39, 21, 0.24);
  transform: translateY(-50%);
}

.menu-button.primary .menu-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff5cf;
  filter: drop-shadow(0 2px 0 rgba(54, 91, 37, 0.36));
}

.menu-shortcuts {
  justify-items: center;
  gap: 7px;
}

.menu-button.shortcut,
.menu-button.leaderboard-shortcut,
.menu-button.settings-shortcut {
  display: grid;
  place-items: center;
  width: 86%;
  height: 72px;
  min-height: 72px;
  padding: 0 44px;
}

.menu-button.shortcut strong {
  position: static;
  width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  transform: none;
}

@media (max-height: 780px) {
  .menu-button.primary {
    min-height: 86px;
  }

  .menu-button.primary .menu-icon {
    left: 62px;
    width: 42px;
    height: 42px;
  }

  .menu-button.shortcut,
  .menu-button.leaderboard-shortcut,
  .menu-button.settings-shortcut {
    width: 84%;
    height: 64px;
    min-height: 64px;
  }
}

/* Finished game-style sound switch for pause and settings. */
.sound-toggle,
.menu-toggle,
.modal-card .menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.sound-toggle input,
.menu-toggle input {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 32px;
  margin: 0;
  border: 3px solid #4a2818;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 44%),
    #cf5544;
  box-shadow:
    inset 0 -4px 0 rgba(104, 32, 25, 0.28),
    0 3px 0 rgba(63, 31, 17, 0.22);
  cursor: pointer;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.sound-toggle input::before,
.menu-toggle input::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 20px;
  height: 20px;
  border: 2px solid #704224;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #fffdf0 0 24%, transparent 25%),
    linear-gradient(180deg, #fff6cf, #e9c98c);
  box-shadow: 0 2px 0 rgba(74, 40, 24, 0.34);
  transition: transform 0.18s cubic-bezier(0.2, 0.82, 0.18, 1);
}

.sound-toggle input:checked,
.menu-toggle input:checked {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%),
    #67b94f;
  box-shadow:
    inset 0 -4px 0 rgba(38, 104, 35, 0.3),
    0 3px 0 rgba(63, 31, 17, 0.22);
}

.sound-toggle input:checked::before,
.menu-toggle input:checked::before {
  transform: translateX(26px);
}

.sound-toggle input:focus-visible,
.menu-toggle input:focus-visible {
  outline: 3px solid #ffd34f;
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  :root {
    --layout-side: clamp(220px, 22vw, 290px);
    --layout-panels: clamp(132px, 18vh, 168px);
  }

  .arcade-shell {
    grid-template-columns: minmax(0, var(--layout-side)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, var(--layout-panels)) minmax(0, 1fr) auto;
    grid-template-areas:
      "hud hud"
      "recipe order"
      "recipe pizza"
      "recipe actions";
    gap: clamp(6px, 1vh, 12px);
  }

  .order-zone {
    width: 100%;
    height: 100%;
    max-height: var(--layout-panels);
  }

  .recipe-status {
    grid-template-rows: auto auto;
    align-content: start;
    align-self: start;
    row-gap: clamp(16px, 2dvh, 24px);
    height: clamp(340px, 42dvh, 430px);
    max-height: calc(100dvh - 88px);
  }

  .order-zone .rail {
    top: clamp(58px, 7vw, 72px);
    height: clamp(68px, 7.5vw, 84px);
    bottom: auto;
  }

  .order-zone .plates {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: clamp(8px, 1.2vw, 16px);
    padding: 0 clamp(8px, 1.2vw, 16px);
  }

  .pizza-stage {
    width: min(100%, 58vmin, 640px);
    justify-self: center;
  }

  .bottom-actions {
    justify-self: center;
    grid-column: 2;
  }

  .combo-badge {
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--layout-actions) + 16px);
  }
}

@media (orientation: portrait) and (min-height: 1000px) and (max-aspect-ratio: 2/3) {
  :root {
    --layout-pizza: min(99%, calc(100vw - 10px));
  }
}

@media (max-height: 700px) {
  .menu-pizza {
    width: min(40vmin, 72vw, 320px);
    max-height: min(36vh, 320px);
  }

  .menu-button.primary {
    min-height: 88px;
  }
}

/* Final geometry fixes: keep every game element tied to its own sprite. */
.arcade-shell {
  background: transparent;
}

.combo-badge {
  display: none !important;
}

.menu-pizza {
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
}

.menu-pizza-base {
  border-radius: 50%;
}

.menu-pizza-topping {
  width: 24%;
  height: 24%;
  max-width: none;
  max-height: none;
}

.menu-pizza-topping.t1 {
  left: 25%;
  top: 31%;
  --menu-rot: -12deg;
}

.menu-pizza-topping.t2 {
  left: 69%;
  top: 27%;
  --menu-rot: 14deg;
}

.menu-pizza-topping.t3 {
  left: 35%;
  top: 45%;
  --menu-rot: -7deg;
}

.menu-pizza-topping.t4 {
  left: 59%;
  top: 43%;
  --menu-rot: 10deg;
}

.menu-pizza-topping.t5 {
  left: 25%;
  top: 67%;
  --menu-rot: 8deg;
}

.menu-pizza-topping.t6 {
  left: 49%;
  top: 72%;
  --menu-rot: -10deg;
}

.menu-pizza-topping.t7 {
  left: 47%;
  top: 24%;
  --menu-rot: 5deg;
}

.menu-pizza-topping.t8 {
  left: 73%;
  top: 62%;
  --menu-rot: -15deg;
}

.menu-pizza-topping.t9 {
  left: 78%;
  top: 43%;
  --menu-rot: 9deg;
}

.menu-pizza-topping.t10 {
  left: 43%;
  top: 59%;
  --menu-rot: -18deg;
}

.menu-pizza-topping.t11 {
  left: 68%;
  top: 76%;
  --menu-rot: -8deg;
}

.menu-pizza-topping.t12 {
  left: 61%;
  top: 59%;
  --menu-rot: 16deg;
}

.menu-pizza-topping.t13 {
  left: 23%;
  top: 49%;
  --menu-rot: -4deg;
}

.pizza-stage {
  --pizza-stage-size: min(
    calc(100vw - 12px),
    calc(100dvh - var(--layout-panels) - var(--layout-actions) - 88px)
  );
  flex: none;
  width: var(--pizza-stage-size);
  height: var(--pizza-stage-size);
  max-width: var(--pizza-stage-size);
  max-height: var(--pizza-stage-size);
  border-radius: 50%;
}

.pizza-stage,
.pizza-stage .pizza {
  aspect-ratio: 1 / 1;
}

.pizza-stage .pizza {
  box-shadow: none;
}

.order-zone .bin {
  --order-bubble-width: clamp(90px, 22vw, 130px);
  --order-bubble-height: clamp(42px, 8.5vw, 56px);
  --order-bubble-top: calc(var(--order-bubble-height) * -0.62);
}

.order-zone .bin::before {
  top: var(--order-bubble-top);
  width: var(--order-bubble-width);
  height: var(--order-bubble-height);
}

.order-zone .bin-icon,
.order-zone .bin-count {
  top: calc(var(--order-bubble-top) + var(--order-bubble-height) * 0.39);
  display: grid;
  place-items: center;
  line-height: 1;
  transform: translateY(-50%);
}

.order-zone .bin-icon {
  left: calc(50% - var(--order-bubble-width) * 0.3);
}

.order-zone .bin-count {
  right: calc(50% - var(--order-bubble-width) * 0.4);
}

.order-zone .bin-icon img {
  width: clamp(28px, 6.4vw, 38px);
  height: clamp(28px, 6.4vw, 38px);
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1023px) {
  :root {
    --landscape-pizza-size: min(calc(100dvh - 176px), 480px);
  }

  .arcade-shell {
    grid-template-columns: minmax(168px, var(--layout-side)) minmax(0, 1fr) minmax(168px, var(--layout-side));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "hud hud hud"
      "recipe pizza order"
      "actions actions actions";
  }

  .pizza-stage {
    --pizza-stage-size: var(--landscape-pizza-size);
    width: var(--landscape-pizza-size);
    height: var(--landscape-pizza-size);
    max-width: var(--landscape-pizza-size);
    max-height: var(--landscape-pizza-size);
    min-width: 0;
    min-height: 0;
  }

  .recipe-status {
    width: 100%;
    height: clamp(174px, 48dvh, 230px);
    max-height: clamp(174px, 48dvh, 230px);
    align-self: center;
    padding: clamp(34px, 5dvh, 44px) clamp(10px, 1.6vw, 16px) clamp(10px, 1.6dvh, 16px);
  }

  .recipe-note strong {
    font-size: clamp(15px, 3.2dvh, 20px);
  }

  .recipe-ingredients img {
    width: clamp(30px, 7dvh, 42px);
    height: clamp(30px, 7dvh, 42px);
  }

  .mistake-label {
    font-size: clamp(13px, 2.8dvh, 17px);
  }

  .order-zone .bin {
    --order-bubble-width: clamp(72px, 12vw, 98px);
    --order-bubble-height: clamp(38px, 6vw, 50px);
    --order-bubble-top: calc(var(--order-bubble-height) * -0.6);
  }

  .order-zone .bin-icon img {
    width: clamp(24px, 4.8dvh, 32px);
    height: clamp(24px, 4.8dvh, 32px);
  }

  .order-zone .bin-count {
    font-size: clamp(20px, 4.6dvh, 28px);
  }
}

/* Ability buttons are complete illustrated controls, with labels in their centers. */
.bottom-actions {
  align-items: center;
}

.action-button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  gap: 0;
}

.action-button strong {
  position: absolute;
  z-index: 3;
  top: 52%;
  left: 50%;
  width: 72%;
  max-width: 84px;
  margin: 0;
  color: #4a2818;
  font-size: clamp(9px, 2.4vw, 12px);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    -1px -1px 0 #fff4cf,
    1px -1px 0 #fff4cf,
    -1px 1px 0 #fff4cf,
    1px 1px 0 #fff4cf,
    0 2px 0 rgba(255, 244, 207, 0.9);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.action-button:hover strong,
.action-button:active strong {
  transform: translate(-50%, -50%);
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1023px) {
  .action-button strong {
    width: 72%;
    max-width: 58px;
    font-size: clamp(8px, 2dvh, 9px);
  }
}

/* Wide illustrated ability buttons with a dedicated readable label area. */
.bottom-actions {
  width: min(calc(100% - 16px), 920px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 18px);
}

.action-button {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 2.15 / 1;
}

.action-icon,
.plate-action .action-icon,
.clean-action .action-icon,
.shuffle-action .action-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 4px rgba(48, 24, 12, 0.24));
}

.plate-action .action-icon {
  background-image: var(--sprite-booster-hint-wide);
}

.clean-action .action-icon {
  background-image: var(--sprite-booster-clean-wide);
}

.shuffle-action .action-icon {
  background-image: var(--sprite-booster-shuffle-wide);
}

.action-button strong {
  top: 49%;
  left: 61.5%;
  width: 57%;
  max-width: none;
  color: #4a2818;
  font-size: clamp(12px, 2.1vw, 20px);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1023px) {
  .bottom-actions {
    width: min(calc(100% - 12px), 760px);
    gap: clamp(5px, 1.4vw, 12px);
  }

  .action-button {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 2.15 / 1;
  }

  .action-icon,
  .plate-action .action-icon,
  .clean-action .action-icon,
  .shuffle-action .action-icon {
    width: 100%;
    height: 100%;
    background-size: contain;
  }

  .action-button strong {
    top: 49%;
    left: 61.5%;
    width: 57%;
    max-width: none;
    font-size: clamp(10px, 2.5dvh, 16px);
  }
}

/* Final 150% main-menu scale. Keep this after all responsive legacy rules. */
.menu-screen {
  gap: clamp(12px, 2.4vh, 27px);
}

.menu-pizza {
  width: min(69vmin, 92vw, 630px);
  max-height: min(63vh, 630px);
}

.menu-actions {
  width: min(600px, calc(100vw - 24px));
  gap: 12px;
}

.menu-button.primary {
  min-height: 144px;
  padding-inline: 72px;
}

.menu-button.primary strong {
  font-size: 40px;
}

.menu-button.primary small {
  margin-top: 6px;
  font-size: 21px;
}

.menu-button.primary .menu-icon {
  left: 87px;
  width: 69px;
  height: 69px;
  border-width: 4px;
}

.menu-button.primary .menu-icon::before {
  margin-left: 4px;
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 20px;
}

.menu-shortcuts {
  gap: 11px;
}

.menu-button.shortcut,
.menu-button.leaderboard-shortcut,
.menu-button.settings-shortcut {
  width: 86%;
  height: 108px;
  min-height: 108px;
  padding-inline: 66px;
}

.menu-button.shortcut strong {
  font-size: 27px;
}

@media (max-width: 640px), (max-height: 900px) {
  .menu-pizza {
    width: min(62vmin, 88vw, 540px);
    max-height: min(52vh, 540px);
  }

  .menu-actions {
    width: min(540px, calc(100vw - 20px));
  }

  .menu-button.primary {
    min-height: 124px;
  }

  .menu-button.primary strong {
    font-size: 34px;
  }

  .menu-button.primary small {
    font-size: 18px;
  }

  .menu-button.primary .menu-icon {
    left: clamp(56px, 14vw, 78px);
    width: 58px;
    height: 58px;
  }

  .menu-button.shortcut,
  .menu-button.leaderboard-shortcut,
  .menu-button.settings-shortcut {
    height: 92px;
    min-height: 92px;
  }

  .menu-button.shortcut strong {
    font-size: 23px;
  }
}

/* Portrait: the pizza is the hero. Size it as the largest square that fits
   between the panels and the action buttons, deliberately overlapping each of
   them by --pizza-portrait-overlap (it overflows its grid row symmetrically),
   capped at 98% of the viewport width. */
@media (orientation: portrait) {
  :root {
    /* Panel row scales with viewport width (34.4vw = 264px at the 768px
       reference width) so narrow phones get the same proportions. */
    --layout-panels: clamp(120px, 34.4vw, 264px);
  }

  /* Pull the recipe note and plates up toward the HUD. */
  .recipe-status,
  .order-zone {
    margin-top: -6px;
  }

  .pizza-stage {
    --pizza-portrait-overlap: clamp(38px, 7.5vh, 83px);
    --pizza-portrait-size: min(calc(100% + var(--pizza-portrait-overlap) * 2), 98vw);
    flex: none;
    width: auto;
    height: var(--pizza-portrait-size);
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    justify-self: center;
    align-self: center;
    /* Bias the (symmetric) overlap downward: top edge stays put,
       bottom edge gains twice this value. */
    translate: 0 3px;
  }

  /* Action buttons: tighter width cap and flush to the bottom edge —
     every freed pixel goes to the pizza row above. */
  .bottom-actions {
    width: min(calc(100% - 8px), 520px);
    /* Flush with the very bottom edge (cancels the shell padding). */
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) - 7px);
  }

  /* Label scales with the button itself (cqw), so it always fits the pill. */
  .action-button {
    container-type: inline-size;
  }

  .action-button strong {
    font-size: clamp(8px, 2.1vw, 16px);
    font-size: 9.3cqw;
  }

  /* ── Proportional portrait scaling ──────────────────────────────────
     Reference design is a 768px-wide portrait viewport: every value below
     equals the current look at 768px and shrinks linearly with viewport
     width on narrower phones, so the layout keeps the same proportions
     instead of bottoming out at px floors tuned for large screens. */
  .pause-button {
    width: clamp(34px, 9.4vw, 72px);
    height: clamp(34px, 9.4vw, 72px);
    grid-template-columns: clamp(6px, 1.6vw, 12px) clamp(6px, 1.6vw, 12px);
    gap: clamp(4px, 1vw, 8px);
  }

  .pause-button span {
    width: clamp(6px, 1.6vw, 12px);
    height: clamp(18px, 5vw, 38px);
  }

  .hud-pill {
    min-height: clamp(30px, 8.1vw, 62px);
    gap: clamp(8px, 2.1vw, 16px);
    padding: 0 clamp(12px, 3.4vw, 26px);
    font-size: clamp(17px, 4.7vw, 36px);
  }

  .cloche {
    width: clamp(26px, 7vw, 54px);
    height: clamp(20px, 5.5vw, 42px);
  }

  .recipe-status {
    padding: clamp(26px, 7vw, 54px) clamp(9px, 2.4vw, 18px) clamp(8px, 2.1vw, 16px);
  }

  .recipe-note strong {
    width: min(22.4vw, calc(100% - 12px));
    height: clamp(24px, 6.5vw, 50px);
    min-height: clamp(24px, 6.5vw, 50px);
    margin: 2px auto clamp(7px, 2.9vw, 22px);
    padding: 0 clamp(6px, 1.6vw, 12px);
    font-size: clamp(11px, 2.9vw, 22px);
  }

  /* Beats the #recipeTitle id rule; fitRecipeTitle() still wins via the var. */
  #recipeTitle {
    font-size: var(--recipe-title-size, clamp(11px, 2.6vw, 20px));
  }

  .mistake-panel {
    gap: clamp(3px, 1vw, 8px);
    padding-top: clamp(4px, 1.2vw, 9px);
  }

  .recipe-ingredients img {
    width: clamp(24px, 6.25vw, 48px);
    height: clamp(24px, 6.25vw, 48px);
  }

  .mistake-label {
    font-size: clamp(10px, 2.4vw, 18px);
  }

  .mistakes div {
    font-size: clamp(12px, 3.2vw, 24px);
  }

  .order-zone .rail {
    top: clamp(26px, 8.4vw, 64px);
  }

  .order-zone .plates {
    padding: clamp(28px, 9vw, 70px) clamp(3px, 1vw, 8px) clamp(3px, 1.4vw, 10px);
    gap: clamp(5px, 2.4vw, 18px);
  }

  .order-zone .bin {
    width: clamp(56px, 15.4vw, 118px);
    --order-bubble-width: clamp(64px, 17vw, 130px);
    --order-bubble-height: clamp(28px, 7.3vw, 56px);
  }

  .order-zone .bin-icon img {
    width: clamp(19px, 5vw, 38px);
    height: clamp(19px, 5vw, 38px);
  }

  .order-zone .bin-count {
    font-size: clamp(16px, 4.2vw, 32px);
  }

  .order-zone .bin.locked .ad-icon {
    top: 30%;
    width: clamp(30px, 8vw, 56px);
    height: clamp(22px, 6vw, 40px);
    font-size: clamp(15px, 4vw, 28px);
  }

  .order-zone .bin.locked .bin-reward {
    font-size: clamp(12px, 3.4vw, 22px);
  }

  .order-zone .bin.locked .bin-note {
    font-size: clamp(8px, 2.3vw, 14px);
  }

  .bottom-actions {
    width: min(67.7vw, 520px);
  }

  /* ── Main menu: scale vertically with the dynamic viewport so the pizza,
     the play button and both shortcuts always fit on short phone screens. */
  .menu-screen {
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(8px, 2dvh, 27px);
    padding: clamp(10px, 2dvh, 34px) 18px max(12px, env(safe-area-inset-bottom));
  }

  .menu-pizza {
    width: min(46dvh, 88vw, 540px);
    max-height: none;
    margin-top: 0;
  }

  .menu-actions {
    width: min(88vw, 540px);
    gap: clamp(6px, 1.4dvh, 12px);
  }

  .menu-button.primary {
    min-height: clamp(60px, 13.5dvh, 144px);
    padding-inline: clamp(28px, 9vw, 72px);
  }

  .menu-button.primary strong {
    font-size: clamp(20px, 4.4dvh, 40px);
  }

  .menu-button.primary small {
    margin-top: clamp(2px, 0.7dvh, 6px);
    font-size: clamp(12px, 2.3dvh, 21px);
  }

  .menu-button.primary .menu-icon {
    left: clamp(24px, 8vw, 87px);
    width: clamp(34px, 7.5dvh, 69px);
    height: clamp(34px, 7.5dvh, 69px);
  }

  .menu-button.shortcut,
  .menu-button.leaderboard-shortcut,
  .menu-button.settings-shortcut {
    height: clamp(42px, 10dvh, 108px);
    min-height: clamp(42px, 10dvh, 108px);
    padding-inline: clamp(24px, 8vw, 66px);
  }

  .menu-button.shortcut strong {
    font-size: clamp(14px, 3dvh, 27px);
  }
}

/* ── Play button (final, authoritative) ────────────────────────────────
   The icon and the label are centered flex siblings, so they can never
   overlap or drift apart regardless of text length, language or viewport —
   this replaces the old "centered text + absolutely-positioned icon" scheme
   that kept colliding. The peel sprite (play-peel.webp, 912×351) carries a
   handle on its right ~20%; the asymmetric horizontal padding keeps the
   icon+label group visually centered on the board, clear of that handle. */
.menu-button.primary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 18px);
  padding: clamp(10px, 2.2vh, 22px) 24% clamp(10px, 2.2vh, 22px) 7%;
}

.menu-button.primary > span:not(.menu-icon) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, 0.4vh, 4px);
  min-width: 0;
  text-align: center;
  transform: none;
}

.menu-button.primary strong,
.menu-button.primary small {
  width: auto;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.menu-button.primary .menu-icon {
  position: static;
  flex: 0 0 auto;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: clamp(34px, 5.4vh, 62px);
  height: clamp(34px, 5.4vh, 62px);
}

/* ── Desktop / wide-short layout (final, authoritative) ────────────────
   On wide screens the pizza was tiny: it was boxed into its own grid row and
   capped well below the plentiful horizontal space, while the plate strip and
   action bar ate the height. Here the pizza becomes the hero — the order strip
   and the pizza share one grid zone so the pizza fills the full available
   height (the strip overlays its top edge), and the action bar is compact and
   flush to the bottom. */
@media (min-width: 1024px) {
  :root {
    --layout-panels: clamp(118px, 15.6vh, 152px);
    --layout-actions: clamp(62px, 8.4vh, 82px);
  }

  /* One HUD row + one big stage row. The order strip, the pizza and the action
     bar all share the stage cell and OVERLAP: the pizza is the largest square
     that fits, and its crust rim tucks UNDER the top strip and UNDER the action
     bar (as agreed) instead of sitting between them with dead gaps. */
  .arcade-shell {
    grid-template-columns: minmax(0, var(--layout-side)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "hud    hud"
      "recipe stage";
    gap: clamp(4px, 0.8vh, 10px);
  }

  .order-zone,
  .pizza-stage,
  .bottom-actions {
    grid-area: stage;
  }

  .pizza-stage {
    align-self: center;
    justify-self: center;
    /* Largest square whose rim still tucks a little under both UI bars. */
    --pizza-desk-size: min(
      100%,
      calc(100dvh - var(--layout-panels) - var(--layout-actions) + 20px)
    );
    width: var(--pizza-desk-size);
    height: var(--pizza-desk-size);
    max-width: var(--pizza-desk-size);
    max-height: var(--pizza-desk-size);
    aspect-ratio: 1 / 1;
    z-index: 1;
  }

  /* ── Top order strip (overlays the pizza's top rim) ──
     The pad vars live on .order-zone so BOTH the rail and the plates inherit
     them (the rail is a sibling of .plates, not a child). */
  .order-zone {
    --plate-pad-top: clamp(50px, 6.8vh, 64px);
    --plate-pad-bottom: clamp(8px, 1.2vh, 12px);
    align-self: start;
    justify-self: stretch;
    width: 100%;
    height: var(--layout-panels);
    max-height: var(--layout-panels);
    z-index: 12;
  }

  .order-zone .plates {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    padding: var(--plate-pad-top) clamp(10px, 1.4vw, 18px) var(--plate-pad-bottom);
  }

  /* Rail band == plate content area, so the plates rest ON the rail. */
  .order-zone .rail {
    top: var(--plate-pad-top);
    bottom: var(--plate-pad-bottom);
    height: auto;
  }

  /* Centre the plates on the rail (a base rule bottom-aligns them, which made
     them hang below the strip). */
  .order-zone .bin {
    width: clamp(56px, 7.4vh, 74px);
    justify-self: center;
    align-self: center;
  }

  /* Bubble + icon + "x3": larger, readable count, both kept inside the bubble. */
  .order-zone .bin::before {
    top: clamp(-52px, -7vh, -41px);
    width: clamp(100px, 13.4vh, 126px);
    height: clamp(38px, 5.2vh, 48px);
  }

  .order-zone .bin-icon {
    top: clamp(-48px, -6.5vh, -38px);
    left: calc(50% - clamp(32px, 4.3vh, 41px));
  }

  .order-zone .bin-icon img {
    width: clamp(26px, 3.5vh, 34px);
    height: clamp(26px, 3.5vh, 34px);
  }

  .order-zone .bin-count {
    top: clamp(-48px, -6.5vh, -38px);
    right: calc(50% - clamp(34px, 4.6vh, 43px));
    font-size: clamp(19px, 2.9vh, 27px);
  }

  /* Ad plate: a strip-height rounded plate matching the others — it fills the
     strip vertically (no upward/downward spill) and is just wide enough for
     the reward copy. */
  .order-zone .bin.locked {
    align-self: start;
    justify-self: center;
    width: clamp(128px, 16vw, 166px);
    height: calc(var(--layout-panels) - clamp(14px, 2vh, 22px));
    margin-top: calc(var(--plate-pad-top) * -1 + clamp(8px, 1.2vh, 14px));
    border-radius: clamp(16px, 2vw, 22px);
  }

  .order-zone .bin.locked .ad-icon {
    top: 24%;
    width: clamp(36px, 3.8vw, 50px);
    height: clamp(27px, 3vw, 38px);
    font-size: clamp(17px, 2.1vw, 25px);
    border-width: 4px;
  }

  .order-zone .bin.locked .bin-reward {
    top: 57%;
    font-size: clamp(15px, 1.8vw, 21px);
  }

  .order-zone .bin.locked .bin-note {
    top: 80%;
    font-size: clamp(10px, 1.2vw, 14px);
  }

  /* ── Action bar (overlays the pizza's bottom rim, flush to the bottom) ── */
  .bottom-actions {
    align-self: end;
    justify-self: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 16px), 600px);
    gap: clamp(10px, 1.4vw, 18px);
    margin-bottom: clamp(4px, 1vh, 10px);
    z-index: 12;
  }

  .action-button {
    aspect-ratio: auto;
    width: 100%;
    height: clamp(58px, 8.2vh, 78px);
    min-height: 0;
  }

  .action-button strong {
    font-size: clamp(14px, 2vh, 18px);
  }

  /* Recipe card grows with its content (it spans the whole left column). */
  .recipe-status {
    height: auto;
    min-height: min(320px, calc(100dvh - 128px));
    max-height: calc(100dvh - 96px);
    align-content: start;
    align-self: start;
    row-gap: clamp(10px, 1.6dvh, 20px);
  }

  .recipe-ingredients img {
    width: clamp(36px, 5vh, 58px);
    height: clamp(36px, 5vh, 58px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Cross-viewport corrections (final, authoritative — must stay directly above
   the viewport-overlay block below, which is last).

   Every rule here is scoped to the layout it belongs to, so the phone and the
   desktop layouts can never undo one another:
     portrait phone/tablet → (orientation: portrait) and (max-width: 1023px)
     phone landscape       → (orientation: landscape) and (max-height: 900px)
                              and (max-width: 1023px)
     desktop / wide        → (min-width: 1024px)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ability labels can no longer outgrow their pill ───────────────────────
   The label is nowrap and sits in the sprite's dedicated text area (left
   61.5%, width 57%), so a px/vw font size spilled past the artwork on some
   viewports ("Перемешать" ran outside the pill on desktop and on phones).
   cqw ties the type to the button's own width, so the label always scales
   with the art it is drawn on, in every layout. */
.action-button {
  container-type: inline-size;
}

.action-button strong {
  /* The sprite's printed label plate runs from 34% to 89% of the button, so
     the text box is centred on 61.7% and kept just inside that plate. */
  left: 61.7%;
  width: 54%;
  font-size: clamp(9px, 2vw, 20px); /* fallback: no container-query support */
  font-size: 7.4cqw;
}

/* ── "Watch an ad" plate ───────────────────────────────────────────────────
   Was three absolutely positioned pieces pinned at fixed percentages, so the
   reward copy ran outside the plate: over the strip in portrait and off the
   screen edge in landscape. It now lays itself out as a flex column and sizes
   its copy in cqw, so the content always fits the box it is drawn in. */
.bin.locked {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* NB: an element's own cqw resolves against its *ancestor* container (here:
     the viewport), so the box's own padding/gap must not use cqw — only its
     children may, and those do query this box. */
  gap: clamp(1px, 0.7vmin, 6px);
  padding: clamp(2px, 0.7vmin, 8px);
  text-align: center;
}

.bin.locked .ad-icon,
.bin.locked .bin-reward,
.bin.locked .bin-note {
  position: static;
  inset: auto;
  max-width: 100%;
  transform: none;
}

.bin.locked .ad-icon {
  flex: 0 0 auto;
  width: 30cqw;
  height: 22cqw;
  border-width: max(2px, 1.2cqw);
  border-radius: 2.5cqw;
  font-size: 15cqw;
  box-shadow: 0 max(1px, 0.6cqw) 0 rgba(0, 0, 0, 0.42);
}

.bin.locked .bin-reward {
  font-size: 14cqw;
  line-height: 1.05;
}

.bin.locked .bin-note {
  font-size: 9cqw;
  line-height: 1.05;
}

/* ── Leaderboard columns stay on the paper ─────────────────────────────────
   The illustrated crust eats ~15% of the card on each side, but the card only
   reserved 36px, so the rank number and the "levels" column were painted on
   the crust. The inset is now a share of the card's own width, and the
   columns are narrower to pay for it. */
/* 15% of the card's own width. It must be spelled out in lengths: a percentage
   padding resolves against the containing block — here the full-screen overlay
   — so on a desktop it became 212px and crushed the card's content into the
   middle. The card itself is min(400px, 100vw - 28px). */
.leaderboard-card {
  padding-inline: min(60px, calc((100vw - 28px) * 0.15));
}

/* The score column used to reserve 88px for a two- or three-digit number,
   which left ~120px for a name and cut everyone down to "Александра …". The
   number needs ~40px, the header ("Пройдено уровней") wraps into 58px, and the
   remainder goes to names. Rows are 44px so ten of them fit a phone's card
   without a scrollbar. */
.leaderboard-heading,
.leaderboard-row {
  grid-template-columns: minmax(0, 24px) minmax(0, 1fr) minmax(46px, 58px);
  gap: 5px;
  padding-inline: 2px;
}

.leaderboard-row {
  min-height: 44px;
}

.leaderboard-list {
  gap: 1px;
}

/* "Пройдено" alone is wider than the column at 11px, so the header sits a
   notch smaller and wraps onto its two lines inside it. */
.leaderboard-heading {
  font-size: 10px;
  line-height: 1.15;
}

/* When the list does have to scroll, the bar should read as part of the paper
   rather than a grey strip across it. */
.leaderboard-list {
  scrollbar-color: rgba(150, 96, 52, 0.45) transparent;
}

.leaderboard-list::-webkit-scrollbar {
  width: 4px;
}

.leaderboard-list::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: rgba(150, 96, 52, 0.45);
}

.leaderboard-list::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Order strip, 2×2 layouts: plates and bubbles derive from the strip ────
   The plate size used to be a fixed vw clamp that did not fit the strip's own
   height, so plates hung above and below the rail, and the second row's order
   bubbles landed on top of the first row's plates. Now the plate *is* the grid
   row (a square driven by the row height) and the band a bubble needs above a
   plate (0.62 × its height) is reserved by the padding and the row gap — so
   the strip contains its contents at every viewport size, by construction. */
@media (orientation: portrait) and (max-width: 1023px) {
  :root {
    /* The pizza is the game — it gets the height first, the strip takes what is
       left. 42vw is the comfortable strip (two plate rows + two bubble bands);
       the middle term is what remains once a full-width pizza has been served,
       so on a tall phone the strip keeps its roomy size (the pizza is capped at
       98vw there anyway and cannot use the pixels), while on a short viewport —
       a browser with its own chrome, a portal header and an ad banner — the
       strip gives way down to its floor and the pizza grows into it. The plate
       size follows from this height further down, so the strip always fits. */
    --layout-panels: clamp(
      126px,
      min(42vw, calc(100dvh - 131px - 98vw + 76px)),
      330px
    );
  }

  .order-zone {
    --bubble-w: clamp(54px, 15vw, 120px);
    --bubble-h: calc(var(--bubble-w) / 2.2);
    --plate-pad-top: calc(var(--bubble-h) * 0.62 + 3px);
    --plate-pad-bottom: 5px;
    --plate-row-gap: calc(var(--bubble-h) * 0.62 + 7px);
    --plate-col-gap: clamp(6px, 2.2vw, 18px);
    --plate-side-pad: clamp(5px, 1.4vw, 14px);
  }

  .order-zone .rail {
    top: max(0px, calc(var(--plate-pad-top) - clamp(4px, 1.2vw, 10px)));
    bottom: 0;
    height: auto;
  }

  .order-zone .plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    padding: var(--plate-pad-top) var(--plate-side-pad) var(--plate-pad-bottom);
    gap: var(--plate-row-gap) var(--plate-col-gap);
  }

  .order-zone .bin {
    --order-bubble-width: var(--bubble-w);
    --order-bubble-height: var(--bubble-h);
    --order-bubble-top: calc(var(--bubble-h) * -0.62);
    width: auto;
    height: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
  }

  .order-zone .bin-icon img {
    width: calc(var(--bubble-h) * 0.66);
    height: calc(var(--bubble-h) * 0.66);
  }

  .order-zone .bin-count {
    font-size: calc(var(--bubble-h) * 0.62);
  }

  /* The ad slot fills its cell so the reward copy has room to sit in, and —
     having no order bubble of its own — it also claims the band reserved for
     one above it: the play icon plus two lines of copy need more than a single
     plate row once the strip tightens up. */
  .order-zone .bin.locked {
    width: 100%;
    height: calc(100% + var(--plate-row-gap));
    max-width: 100%;
    margin: calc(var(--plate-row-gap) * -1) 0 0;
    aspect-ratio: auto;
    border-radius: clamp(10px, 3vw, 24px);
  }

  .order-zone .bin.locked .ad-icon {
    width: 30cqw;
    height: 22cqw;
    font-size: 15cqw;
  }

  .order-zone .bin.locked .bin-reward {
    font-size: 14cqw;
  }

  .order-zone .bin.locked .bin-note {
    font-size: 9cqw;
  }

  /* Action bar: wider (bigger tap targets, readable labels) and flush with —
     not past — the bottom edge; it used to be cut off by 3px. */
  .bottom-actions {
    width: min(calc(100vw - 16px), 560px);
    gap: clamp(6px, 2vw, 16px);
    margin-bottom: max(0px, env(safe-area-inset-bottom));
  }

  /* ── Recipe card: sized from the strip it shares a row with ─────────────
     The card is exactly --layout-panels tall, and that height now moves with
     the pizza, so every piece inside is a share of it rather than a fixed vw:
     otherwise the title, a wrapped second row of ingredient icons (a recipe
     can list eight) and the mistake tokens run into each other the moment the
     strip gives room away. The vw term keeps the pieces from growing silly on
     a wide tablet. Worst case — two icon rows — adds up to ~95% of the card. */
  .recipe-status {
    --card-h: var(--layout-panels);
    align-content: start;
    row-gap: min(2.2vw, calc(var(--card-h) * 0.02));
    padding:
      min(7vw, calc(var(--card-h) * 0.128))
      clamp(6px, 2vw, 15px)
      min(2.1vw, calc(var(--card-h) * 0.03));
  }

  /* The name plate was 22vw wide — on a phone that is ~87px, so a two-word
     recipe wrapped onto a second line the plate is too short to show and the
     name came out as "Тунец и…". Widening costs no height. */
  .recipe-note strong {
    width: min(52vw, calc(100% - 6px));
    /* One line normally, but free to take a second for the one recipe name
       that needs it ("Голубой сыр, груша и инжир") instead of clipping it —
       those long-named recipes list few enough ingredients to afford it. */
    height: auto;
    min-height: min(6.5vw, calc(var(--card-h) * 0.145));
    margin: 0 auto min(2.9vw, calc(var(--card-h) * 0.016));
    padding-inline: clamp(4px, 1.4vw, 12px);
    font-size: min(2.9vw, calc(var(--card-h) * 0.1));
  }

  .recipe-ingredients {
    gap: min(1.4vw, calc(var(--card-h) * 0.02));
  }

  .recipe-ingredients img {
    width: min(6.25vw, calc(var(--card-h) * 0.175));
    height: min(6.25vw, calc(var(--card-h) * 0.175));
  }

  .mistake-panel {
    padding-top: min(1.2vw, calc(var(--card-h) * 0.015));
    gap: min(1vw, calc(var(--card-h) * 0.015));
  }

  .mistake-label {
    font-size: min(2.4vw, calc(var(--card-h) * 0.07));
  }

  .mistakes {
    width: min(86%, calc(var(--card-h) * 0.86));
    gap: min(0.9vw, calc(var(--card-h) * 0.02));
  }
}

/* ── Short portrait: every spare pixel goes to the pizza ───────────────────
   In a portal (browser chrome + site header + ad banner) the game gets barely
   500px of height, and there the pizza is height-bound rather than width-bound:
   anything trimmed from the chrome around it makes the pizza itself bigger.
   Only the frame shrinks — the HUD keeps its readable type, the buttons keep
   their labels inside the artwork. */
@media (orientation: portrait) and (max-width: 1023px) and (max-height: 640px) {
  .arcade-shell {
    row-gap: 3px;
    padding-top: 3px;
    padding-bottom: 2px;
  }

  .hud {
    gap: 5px;
  }

  .hud-pill {
    min-height: 0;
    padding: 0 clamp(10px, 2.8vw, 20px);
    font-size: clamp(15px, 4vw, 30px);
  }

  .cloche,
  .cloche.plate-counter-icon {
    width: clamp(22px, 6.4vw, 44px);
    height: clamp(22px, 6.4vw, 44px);
  }

  .pause-button {
    width: clamp(30px, 8vw, 60px);
    height: clamp(30px, 8vw, 60px);
  }

  .pause-button span {
    height: clamp(15px, 4.2vw, 32px);
  }

  .bottom-actions {
    width: min(calc(100vw - 22px), 520px);
    margin-bottom: max(0px, env(safe-area-inset-bottom));
  }

}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1023px) {
  /* The strip may use its whole grid row (it was capped at 34vh while holding
     two 82px plate rows, so the plates spilled onto the action bar). */
  .order-zone {
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    /* The old top inset reserved bubble space outside .plates; the padding
       below now owns that band, so keep the box itself flush. */
    padding: 0;
    --bubble-w: clamp(56px, 9.6vw, 104px);
    --bubble-h: calc(var(--bubble-w) / 2.2);
    --plate-pad-top: calc(var(--bubble-h) * 0.62 + 3px);
    --plate-pad-bottom: 5px;
    --plate-row-gap: calc(var(--bubble-h) * 0.62 + 7px);
    --plate-col-gap: clamp(6px, 1.2vw, 14px);
    --plate-side-pad: clamp(5px, 0.8vw, 12px);
  }

  .order-zone .rail {
    top: max(0px, calc(var(--plate-pad-top) - clamp(4px, 0.8vw, 10px)));
    bottom: 0;
    height: auto;
  }

  .order-zone .plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    padding: var(--plate-pad-top) var(--plate-side-pad) var(--plate-pad-bottom);
    gap: var(--plate-row-gap) var(--plate-col-gap);
  }

  .order-zone .bin {
    --order-bubble-width: var(--bubble-w);
    --order-bubble-height: var(--bubble-h);
    --order-bubble-top: calc(var(--bubble-h) * -0.62);
    width: auto;
    height: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
  }

  .order-zone .bin-icon img {
    width: calc(var(--bubble-h) * 0.66);
    height: calc(var(--bubble-h) * 0.66);
  }

  .order-zone .bin-count {
    font-size: calc(var(--bubble-h) * 0.62);
  }

  .order-zone .bin.locked {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: clamp(10px, 1.6vw, 24px);
  }

  .order-zone .bin.locked .ad-icon {
    width: 30cqw;
    height: 22cqw;
    font-size: 15cqw;
  }

  .order-zone .bin.locked .bin-reward {
    font-size: 14cqw;
  }

  .order-zone .bin.locked .bin-note {
    font-size: 9cqw;
  }

  /* Recipe card: a six-ingredient recipe wraps onto a second row of icons and
     used to run into the "Ошибки" label. Smaller icons and a tighter rhythm
     leave room for two rows inside the paper. */
  .recipe-status {
    align-content: start;
    row-gap: clamp(2px, 1dvh, 8px);
    padding: clamp(26px, 4.4dvh, 40px) clamp(8px, 1.4vw, 14px) clamp(6px, 1.2dvh, 12px);
  }

  /* Sideways the screen is short, so the name is sized off the height, and the
     plate is sized off the name — a 20px name in a 24px plate had its
     descenders shaved off. (#recipeTitle outranks the class rule, so the size
     has to be set there; the JS fitter still overrides it via the variable.) */
  #recipeTitle {
    font-size: var(--recipe-title-size, clamp(12px, 4.2dvh, 20px));
  }

  .recipe-note strong {
    /* border-box: the plate also has to hold its own 3px border and padding,
       or the line box overflows and the descenders get cut. */
    height: calc(clamp(12px, 4.2dvh, 20px) * 1.3 + 12px);
    min-height: calc(clamp(12px, 4.2dvh, 20px) * 1.3 + 12px);
    padding: 2px clamp(6px, 1.2vw, 12px);
    margin-bottom: clamp(3px, 1dvh, 8px);
  }

  .recipe-ingredients {
    gap: clamp(3px, 0.8vw, 8px);
  }

  .recipe-ingredients img {
    width: clamp(22px, 5.4dvh, 38px);
    height: clamp(22px, 5.4dvh, 38px);
  }

  .mistake-panel {
    padding-top: clamp(1px, 0.6dvh, 5px);
    gap: clamp(2px, 0.8dvh, 6px);
  }

  /* ── The pizza owns the middle of the screen here too ─────────────────
     The action bar was taking 30% of a 390px-tall screen and the pizza was
     pinned to a fixed 176px budget. The bar is now sized to its labels and
     the pizza grows into what is left, tucking its bottom rim under the
     buttons by ~7% of its diameter — bare crust, toppings stay clear. */
  :root {
    --landscape-pizza-size: min(
      calc((100dvh - 150px) / 0.93),
      calc(100vw - 2 * var(--layout-side) - 32px),
      520px
    );
  }

  .bottom-actions {
    width: min(calc(100% - 12px), 560px);
    margin-bottom: max(2px, env(safe-area-inset-bottom));
  }
}

@media (min-width: 1024px) {
  /* The action row keeps the sprite's own 2.15:1 shape: the label is placed
     against the artwork (left 61.7%), so a free-form button box slid the text
     off its printed area. Sizing the row from the button height keeps the
     pizza calculation above in sync. */
  :root {
    --action-h: clamp(56px, 8.6vh, 80px);
    --layout-actions: calc(var(--action-h) + clamp(4px, 0.7vh, 9px));
  }

  /* ── The pizza owns the stage ──────────────────────────────────────────
     It used to be centred in the cell and sized so that it merely touched
     both bars, which left dead space under the buttons and a pizza smaller
     than the room allowed. Now it is anchored to the bottom and sized so its
     top rim tucks 9% of its own diameter under the order strip — toppings
     never reach past 39% of the radius, so that band is bare crust — while
     the bottom grows down behind the buttons, which sit on the very edge. */
  .pizza-stage {
    width: auto;
    /* Height drives the square: the cell itself, the room under the strip
       grossed up by the 9% tuck, and — for a tall narrow cell such as a
       tablet held upright — the width the cell can actually spare (the shell
       is capped at 1180px), so the stage never turns into a tall rectangle. */
    height: min(
      100%,
      calc((100% - var(--layout-panels)) / 0.895),
      calc(min(100vw, 1180px) - var(--layout-side) - 24px)
    );
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    align-self: end;
    justify-self: center;
  }

  .bottom-actions {
    margin-bottom: max(2px, env(safe-area-inset-bottom));
  }

  .arcade-shell {
    padding-bottom: 2px;
  }

  /* A tablet held upright has a cell far taller than wide, so the pizza is
     capped by width and there is height to spare: centre it there instead of
     hanging it off the bottom, which would pool all the slack under the
     strip. */
  @media (max-aspect-ratio: 1 / 1) {
    .pizza-stage {
      align-self: center;
    }
  }

  /* The order bubbles: keep the ingredient icon and the "x3" inside the
     speech bubble (they were pinned to their own clamp and floated ~9px above
     its top edge). 0.39 × height is the bubble body's centre — the lower part
     of the sprite is the tail. */
  .order-zone .bin-icon,
  .order-zone .bin-count {
    top: calc(clamp(-52px, -7vh, -41px) + clamp(38px, 5.2vh, 48px) * 0.39);
  }

  .action-button {
    width: min(100%, calc(var(--action-h) * 2.15));
    height: auto;
    min-height: 0;
    aspect-ratio: 2.15 / 1;
    justify-self: center;
  }

  /* Same self-fitting ad plate as on phones (the earlier vw sizes did not fit
     the plate's own height once the copy became two lines). */
  .order-zone .bin.locked .ad-icon {
    width: 30cqw;
    height: 22cqw;
    font-size: 15cqw;
    border-width: max(3px, 1.2cqw);
  }

  .order-zone .bin.locked .bin-reward {
    font-size: 14cqw;
  }

  .order-zone .bin.locked .bin-note {
    font-size: 9cqw;
  }

  /* The card told the player to tap a topping while covering the pizza; the
     left column is free space on wide screens. */
  .tutorial-card {
    left: max(16px, env(safe-area-inset-left));
    right: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(330px, calc(var(--layout-side) + 48px));
    transform: none;
  }

  @keyframes tutorialNudge {
    35% { transform: translateX(-8px); }
    70% { transform: translateX(8px); }
  }
}

/* ── Modal cards on short landscape screens ────────────────────────────────
   A phone held sideways is ~390px tall while the cards are built around a
   460–690px tall pizza box, so they ran off both ends of the screen: "Назад"
   in the leaderboard/settings, "Не сейчас" in the ability card and both the
   title and "В меню" in the pause menu were unreachable. The cards are now
   capped to the viewport, the buttons form two columns where there are many
   of them, and the card scrolls as a last resort. */
@media (orientation: landscape) and (max-height: 620px) {
  .pause-card,
  .modal-card {
    min-height: 0;
    max-height: calc(100dvh - 28px);
    align-content: center;
    gap: clamp(5px, 1.6vh, 10px);
    padding:
      clamp(30px, 9vh, 46px)
      clamp(34px, 12vh, 50px)
      clamp(24px, 7vh, 38px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pause-card h2,
  .modal-card h2 {
    margin: 0;
    font-size: clamp(18px, 5.6vh, 28px);
  }

  .pause-card p,
  .modal-card p {
    margin: 0;
    font-size: clamp(12px, 3.6vh, 17px);
  }

  .pause-card button,
  .modal-card button,
  .pause-card .sound-toggle,
  .modal-card .menu-toggle {
    min-height: 0;
    height: clamp(34px, 11vh, 56px);
  }

  /* Half-width buttons cannot keep the wide desktop padding: it left ~68px of
     text room, so "Присоединяйтесь к группе" ran outside its pill. */
  .pause-card button,
  .modal-card button,
  .pause-card .community-button,
  .modal-card .community-button {
    padding-inline: clamp(6px, 1.6vw, 16px);
    font-size: clamp(10px, 3vh, 15px);
    line-height: 1.05;
  }

  /* Two button columns — a single column of full-size buttons could not fit. */
  .pause-card,
  #settingsPanel .modal-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(8px, 1.6vw, 16px);
  }

  .pause-card > :not(button),
  #settingsPanel .modal-card > :not(button) {
    grid-column: 1 / -1;
  }

  .leaderboard-card {
    grid-template-rows: auto auto minmax(48px, 1fr) auto auto;
    /* The compact padding above is right for buttons but too narrow for the
       leaderboard's text columns — they would sit on the crust. */
    padding-inline: min(60px, calc((100vw - 28px) * 0.15));
  }

  .leaderboard-row {
    min-height: 0;
    padding-block: 2px;
  }

  .ability-preview {
    width: clamp(48px, 15vh, 96px);
    height: clamp(48px, 15vh, 96px);
    margin: 0 auto;
  }

  .result-pizza {
    width: min(230px, 58vw, 22vh);
    margin: 0 0 4px;
  }
}

/* Short portrait phones (≈360×640): same idea, one column is still fine here —
   the card just has to stop growing past the screen. */
@media (orientation: portrait) and (max-height: 720px) {
  .pause-card,
  .modal-card {
    min-height: 0;
    max-height: calc(100dvh - 28px);
    gap: clamp(4px, 1vh, 9px);
    padding-block: clamp(40px, 8vh, 67px) clamp(30px, 6vh, 49px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pause-card button,
  .modal-card button,
  .pause-card .sound-toggle,
  .modal-card .menu-toggle {
    min-height: 0;
    height: clamp(40px, 7.6vh, 64px);
  }

  .leaderboard-card {
    grid-template-rows: auto auto minmax(60px, 1fr) auto auto;
  }
}

/* ── Main menu on short desktop screens (1280×720 and below) ───────────────
   The pizza + play button + both shortcuts added up to more than the viewport
   height, and .menu-screen clips its overflow, so "Настройки" was cut off. */
@media (min-width: 1024px) and (max-height: 860px) {
  .menu-pizza {
    width: min(56vmin, 92vw, 540px);
    max-height: min(42vh, 420px);
  }

  .menu-button.primary {
    min-height: clamp(96px, 15vh, 124px);
  }

  .menu-button.primary strong {
    font-size: clamp(26px, 4.2vh, 34px);
  }

  .menu-button.primary small {
    font-size: clamp(15px, 2.4vh, 18px);
  }

  .menu-button.shortcut,
  .menu-button.leaderboard-shortcut,
  .menu-button.settings-shortcut {
    height: clamp(70px, 11vh, 92px);
    min-height: clamp(70px, 11vh, 92px);
  }

  .menu-button.shortcut strong {
    font-size: clamp(19px, 3vh, 23px);
  }
}

/* ── Idle scene: stop painting what nobody is playing ──────────────────────
   app.js sets .scene-idle while the game is not live (loading, main menu,
   pause, result, ability offer, an ad, or a backgrounded tab). The kitchen is
   either hidden behind the menu or frozen behind a 7px blur, so nothing here
   is perceptible — but it takes ~55 continuously animating elements (45 of
   them re-filtering two drop-shadows per frame) plus a full-screen
   backdrop-filter that has to be recomputed for every one of those frames,
   down to nothing. Only the live pizza is parked: the result-screen pizza and
   the menu's own pizza keep animating. */
body.scene-idle #pizza .topping img,
body.scene-idle .steam-layer span,
body.scene-idle .pizza::before,
body.scene-idle .pizza::after,
body.scene-idle .topping.hint-pulsing,
body.scene-idle .topping.tutorial-target,
body.scene-idle .bin.tutorial-target,
body.scene-idle .hud-pill.warning {
  animation-play-state: paused;
}

/* Viewport overlays: keep full-screen fixed positioning (must stay last). */
.start-menu,
.pause-panel,
.menu-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
}

.pause-panel,
.menu-modal {
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

/* hidden должен прятать и кнопки меню. .menu-button задаёт display: grid, а
   это перебивает атрибут hidden: на площадках без лидербордов (Xiaomi и почти
   все площадки Playgama) кнопка рекордов оставалась на экране и открывала
   пустую таблицу. */
.menu-button[hidden] {
  display: none !important;
}