@layer reset, base, components, scenes, motion;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: light;
  }

  body,
  h1,
  h2,
  p {
    margin: 0;
  }

  button {
    font: inherit;
  }

  [hidden] {
    display: none !important;
  }
}

@layer base {
  :root {
    --ink: #15152a;
    --paper: #fff5df;
    --coral: #ff5d5d;
    --blue: #4f7cff;
    --butter: #ffd166;
    --mint: #58d6a9;
    --lilac: #b695ff;
    --tomato: #ff5d5d;
    --tomato-dark: #9f2f24;
    --cheese: #ffd166;
    --cream: #fff3d5;
    --cardboard: #c99158;
    --cardboard-light: #e1b877;
    --basil: #27734c;
    --ink-soft: #486074;
    --wood: #6f3c2b;
    --shadow: #301d1a;
    --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Condensed", sans-serif;
    --body: "Arial Rounded MT Bold", "Avenir Next Rounded", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
    --utility: "Courier New", monospace;
  }

  body {
    min-width: 0;
    min-height: 100vh;
    overflow-x: clip;
    overflow-y: auto;
    color: var(--ink);
    font-family: var(--body);
    background-color: var(--wood);
    background-image:
      linear-gradient(90deg, transparent 49%, rgb(42 17 12 / 12%) 50%, transparent 51%),
      repeating-linear-gradient(2deg, rgb(255 255 255 / 3%) 0 2px, transparent 2px 19px),
      linear-gradient(103deg, #7c4431, #5b3025 48%, #7a4632);
    background-size: 210px 100%, auto, auto;
  }

  button:focus-visible,
  a:focus-visible {
    outline: 4px solid var(--blue);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px var(--ink);
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #fff;
    background: var(--ink);
    font-weight: 800;
    transform: translateY(-180%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }
}

@layer components {
  .topbar {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.1rem 0 0.7rem;
    color: var(--paper);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .brand-mark {
    display: grid;
    width: 3rem;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid rgb(255 255 255 / 26%);
    border-radius: 50%;
    background: rgb(35 13 8 / 18%);
    font-size: 1.6rem;
    transform: rotate(-12deg);
  }

  .eyebrow,
  .celebration-kicker {
    color: #ffd986;
    font-family: var(--utility);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  h1 {
    margin-top: -0.05rem;
    font-family: var(--display);
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    letter-spacing: -0.045em;
    line-height: 1;
    text-shadow: 0 2px 0 rgb(45 15 11 / 45%);
  }

  .controls {
    display: flex;
    gap: 0.55rem;
  }

  .control-button,
  .play-again {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.65rem;
    padding: 0.58rem 0.8rem;
    border: 3px solid var(--ink);
    border-radius: 0.7rem;
    color: var(--ink);
    background: var(--paper);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .control-button:hover {
    background: var(--butter);
    transform: translateY(-1px);
  }

  .control-button:active {
    box-shadow: 1px 1px 0 var(--ink);
    transform: translateY(2px);
  }

  .control-button svg {
    width: 1.2rem;
    height: 1.2rem;
    overflow: visible;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .control-button .sound-speaker {
    fill: currentcolor;
    stroke: none;
  }

  .control-button[aria-pressed="false"] .sound-waves {
    opacity: 0;
  }

  .game-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
  }

  .score-strip {
    position: relative;
    z-index: 40;
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    min-height: 4.25rem;
    padding: 0.65rem clamp(0.8rem, 2.5vw, 1.35rem);
    border: 2px solid #e2c58f;
    border-radius: 0.8rem 0.8rem 0 0;
    background:
      linear-gradient(rgb(255 255 255 / 24%), transparent),
      var(--paper);
    box-shadow: 0 5px 0 rgb(37 16 12 / 24%);
  }

  .score-strip::before,
  .score-strip::after {
    position: absolute;
    top: 0.45rem;
    width: 3.8rem;
    height: 1.1rem;
    content: "";
    background: rgb(217 75 52 / 12%);
    transform: rotate(-2deg);
  }

  .score-strip::before {
    left: 22%;
  }

  .score-strip::after {
    right: 21%;
    transform: rotate(3deg);
  }

  .attempt-readout {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .attempt-number {
    min-width: 2ch;
    color: var(--tomato);
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 3.3rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.08em;
    line-height: 0.8;
  }

  .attempt-copy {
    color: var(--ink-soft);
    font-family: var(--utility);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
  }

  .progress-wrap {
    width: 100%;
  }

  .progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.32rem;
    color: #6d6054;
    font-family: var(--utility);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .progress-track {
    position: relative;
    height: 0.72rem;
    overflow: visible;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: #eadfc7;
  }

  .progress-fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: repeating-linear-gradient(-45deg, var(--tomato) 0 7px, #ed7251 7px 14px);
    transition: width 380ms cubic-bezier(0.3, 1.3, 0.45, 1);
  }

  .progress-notch {
    position: absolute;
    top: 50%;
    width: 0.8rem;
    aspect-ratio: 1;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--cheese);
    transform: translate(-50%, -50%);
  }

  .progress-notch--escape {
    left: 66.666%;
  }

  .round-stamp {
    padding: 0.45rem 0.65rem;
    border: 2px solid var(--tomato);
    border-radius: 50%;
    color: var(--tomato);
    font-family: var(--utility);
    font-size: 0.67rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(4deg);
  }

  .game-status {
    position: absolute;
    z-index: 60;
    top: 5.15rem;
    left: 50%;
    width: fit-content;
    max-width: min(88%, 38rem);
    min-height: 2.4rem;
    padding: 0.55rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    background: var(--cream);
    font-size: clamp(0.78rem, 2vw, 0.95rem);
    font-weight: 800;
    text-align: center;
    box-shadow: 4px 4px 0 rgb(23 49 75 / 22%);
    transform: translateX(-50%) rotate(-1deg);
  }

  .game-status::after {
    position: absolute;
    bottom: -0.48rem;
    left: 50%;
    width: 0.72rem;
    aspect-ratio: 1;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    content: "";
    background: var(--cream);
    transform: translateX(-50%) rotate(45deg);
  }

  .game-stage {
    position: relative;
    min-height: clamp(31rem, 65vw, 42rem);
    overflow: hidden;
    isolation: isolate;
    border: 2px solid #4b251d;
    border-top: 0;
    border-radius: 0 0 1.3rem 1.3rem;
    background-color: #834b35;
    background-image:
      radial-gradient(ellipse at 15% 24%, rgb(50 20 15 / 11%) 0 2%, transparent 2.4%),
      radial-gradient(ellipse at 80% 75%, rgb(255 214 143 / 5%) 0 1%, transparent 1.4%),
      repeating-linear-gradient(1deg, transparent 0 23px, rgb(42 16 10 / 9%) 24px 25px),
      linear-gradient(100deg, #8e5038, #6d3a2c 55%, #8c513a);
    box-shadow: 0 20px 55px rgb(38 14 10 / 35%);
    touch-action: none;
  }

  .table-grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.2;
    background-image: repeating-radial-gradient(ellipse at 10% 20%, transparent 0 24px, #2c160f 25px 26px, transparent 27px 47px);
    background-size: 260px 110px;
    mix-blend-mode: multiply;
    transform: rotate(-1deg) scale(1.1);
  }

  .decoration {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
  }

  .decoration--napkin {
    right: -1rem;
    bottom: 1.3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: clamp(9rem, 18vw, 13rem);
    aspect-ratio: 1.2;
    padding: 1.1rem;
    color: rgb(23 49 75 / 60%);
    background: #f2e8d2;
    font-family: var(--display);
    font-size: 1rem;
    box-shadow: 0 9px 20px rgb(40 17 11 / 22%);
    transform: rotate(-9deg);
  }

  .decoration--napkin::after {
    position: absolute;
    inset: 0.38rem;
    border: 2px dashed rgb(23 49 75 / 16%);
    content: "";
  }

  .decoration--napkin small {
    font-family: var(--utility);
    font-size: 0.44rem;
  }

  .decoration--chili {
    bottom: 7%;
    left: 4%;
    width: clamp(5.7rem, 13vw, 9rem);
    filter: drop-shadow(0 6px 5px rgb(35 12 8 / 28%));
    transform: rotate(13deg);
  }

  .chili-body {
    fill: #bd392a;
    stroke: #79271f;
    stroke-linejoin: round;
    stroke-width: 3;
  }

  .chili-stem,
  .chili-shine {
    fill: none;
    stroke-linecap: round;
  }

  .chili-stem {
    stroke: var(--basil);
    stroke-width: 8;
  }

  .chili-shine {
    stroke: rgb(255 255 255 / 42%);
    stroke-width: 3;
  }

  .decoration--olive-dish {
    top: 13%;
    left: 4%;
    display: grid;
    grid-template-columns: repeat(2, 1.55rem);
    gap: 0.25rem;
    padding: 0.72rem;
    border: 0.32rem solid #d8e4e0;
    border-radius: 45% 55% 51% 49%;
    background: #f3f3e6;
    box-shadow: 0 8px 10px rgb(36 13 8 / 25%);
    transform: rotate(-8deg);
  }

  .decoration--olive-dish span {
    width: 1.45rem;
    aspect-ratio: 1;
    border: 0.3rem solid #282e1d;
    border-radius: 50%;
    background: #718052;
    box-shadow: inset 2px 2px 0 rgb(255 255 255 / 18%);
  }

  .decoration--basil {
    top: 16%;
    right: 4%;
    width: clamp(3.8rem, 8vw, 6rem);
    fill: #438558;
    stroke: #21583b;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    filter: drop-shadow(0 6px 5px rgb(35 12 8 / 22%));
    transform: rotate(14deg);
  }

  .box {
    position: absolute;
    z-index: 4;
    top: 54%;
    left: 50%;
    width: min(58%, 34rem);
    aspect-ratio: 1.25;
    perspective: 900px;
    transform: translate(-50%, -43%);
    transform-style: preserve-3d;
  }

  .box-lid,
  .box-base {
    position: absolute;
    left: 0;
    width: 100%;
    border: 0.45rem solid #a06b3e;
    background-color: var(--cardboard-light);
    background-image:
      radial-gradient(#b77e45 0.7px, transparent 0.8px),
      linear-gradient(105deg, transparent, rgb(255 255 255 / 11%));
    background-size: 5px 5px, auto;
  }

  .box-lid {
    z-index: 1;
    bottom: 61%;
    height: 78%;
    overflow: hidden;
    border-radius: 0.6rem 0.6rem 0 0;
    box-shadow: 0 14px 25px rgb(39 16 10 / 23%);
    transform: rotateX(-39deg) rotateZ(-1deg);
    transform-origin: center bottom;
  }

  .lid-print {
    position: absolute;
    inset: 13%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px double rgb(159 47 36 / 65%);
    color: rgb(159 47 36 / 72%);
    text-align: center;
    transform: rotate(-2deg);
  }

  .lid-print strong {
    font-family: var(--display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    letter-spacing: -0.08em;
    line-height: 0.78;
  }

  .lid-kicker,
  .lid-print small {
    font-family: var(--utility);
    font-size: clamp(0.45rem, 1.2vw, 0.72rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .lid-rule {
    width: 35%;
    margin: 0.45rem;
    border-top: 2px solid currentcolor;
  }

  .lid-stain,
  .grease-mark {
    position: absolute;
    border: 4px solid rgb(113 70 37 / 15%);
    border-radius: 45% 55%;
  }

  .lid-stain--one {
    top: -1.3rem;
    right: 6%;
    width: 5rem;
    aspect-ratio: 1.2;
  }

  .lid-stain--two {
    bottom: 7%;
    left: -1rem;
    width: 4rem;
    aspect-ratio: 1;
  }

  .box-base {
    z-index: 3;
    bottom: 0;
    height: 66%;
    border-radius: 0.15rem 0.15rem 0.7rem 0.7rem;
    background-color: #d3a265;
    box-shadow: 0 22px 27px rgb(40 17 11 / 34%);
  }

  .box-base::before,
  .box-base::after {
    position: absolute;
    top: -0.45rem;
    width: 11%;
    height: calc(100% + 0.45rem);
    border: inherit;
    content: "";
    background: #c18b54;
  }

  .box-base::before {
    left: -8%;
    clip-path: polygon(100% 0, 100% 100%, 0 87%, 0 12%);
  }

  .box-base::after {
    right: -8%;
    clip-path: polygon(0 0, 100% 12%, 100% 87%, 0 100%);
  }

  .box-tab {
    position: absolute;
    z-index: 2;
    bottom: -1rem;
    left: 50%;
    width: 28%;
    height: 1.3rem;
    border: 0.35rem solid #a06b3e;
    border-top: 0;
    border-radius: 0 0 0.6rem 0.6rem;
    background: #c99158;
    transform: translateX(-50%);
  }

  .grease-mark--one {
    top: 12%;
    left: 16%;
    width: 32%;
    height: 35%;
    transform: rotate(13deg);
  }

  .grease-mark--two {
    right: 12%;
    bottom: 9%;
    width: 26%;
    height: 28%;
  }

  .crumb {
    position: absolute;
    width: 0.5rem;
    aspect-ratio: 1.4;
    border-radius: 50%;
    background: #8e562f;
    transform: rotate(32deg);
  }

  .crumb--one { top: 25%; left: 22%; }
  .crumb--two { right: 25%; bottom: 24%; transform: scale(0.7); }
  .crumb--three { top: 18%; right: 17%; transform: rotate(-22deg) scale(0.45); }

  .slice-home {
    position: absolute;
    z-index: 15;
    top: 60%;
    left: 50%;
    width: clamp(8.5rem, 19vw, 12rem);
    aspect-ratio: 0.86;
    transition:
      top 700ms cubic-bezier(0.3, 1.3, 0.5, 1),
      left 700ms cubic-bezier(0.3, 1.3, 0.5, 1);
    transform: translate(-50%, -50%);
  }

  .slice-actor {
    --drag-x: 0px;
    --drag-y: 0px;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: grab;
    filter: saturate(1.02);
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translate(var(--drag-x), var(--drag-y)) rotate(-4deg);
    transform-origin: 50% 35%;
  }

  .slice-actor:hover:not(:disabled) {
    filter: saturate(1.08) brightness(1.04);
    transform: translate(var(--drag-x), calc(var(--drag-y) - 5px)) rotate(-2deg) scale(1.025);
  }

  .slice-actor.is-dragging {
    z-index: 40;
    cursor: grabbing;
    filter: saturate(1.12) drop-shadow(0 15px 8px rgb(40 16 10 / 25%));
    transform: translate(var(--drag-x), var(--drag-y)) rotate(5deg) scale(1.07);
  }

  .slice-actor:disabled {
    cursor: wait;
  }

  .slice-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .crust-edge { fill: #8f4a29; }
  .cheese { fill: #f5ca4e; stroke: #cf8b26; stroke-width: 4; }
  .cheese-shade { fill: rgb(255 239 133 / 28%); }
  .crust { fill: #d78b3f; stroke: #8f4a29; stroke-width: 5; }
  .crust-shine { fill: none; stroke: #f5bd68; stroke-linecap: round; stroke-width: 6; }
  .pepperoni { fill: #bd3a2a; stroke: #86291f; stroke-linecap: round; stroke-width: 3; }
  .pepperoni path { fill: none; stroke: #e76d4d; stroke-width: 2; }
  .mushrooms { fill: #f0e1b9; stroke: #9c7650; stroke-width: 3; }
  .olive-rings { fill: none; stroke: #37472a; stroke-width: 5; }
  .slice-face { fill: var(--ink); stroke: var(--ink); stroke-linecap: round; stroke-width: 3; }
  .slice-face path { fill: none; }

  .slice-focus-label {
    position: absolute;
    top: 44%;
    left: 50%;
    padding: 0.25rem 0.38rem;
    border: 2px solid var(--ink);
    border-radius: 0.35rem;
    opacity: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--utility);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    pointer-events: none;
    transform: translate(-50%, 0) rotate(4deg);
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .slice-actor:focus-visible .slice-focus-label {
    opacity: 1;
    transform: translate(-50%, -0.45rem) rotate(1deg);
  }

  .leaf-disguise {
    opacity: 0;
    fill: #5c9f48;
    stroke: #28603e;
    stroke-linejoin: round;
    stroke-width: 3;
  }

  .leaf-disguise text {
    fill: #fff;
    stroke: none;
    font-family: var(--utility);
    font-size: 19px;
    font-weight: 900;
  }

  .slice-legs {
    opacity: 0;
    fill: none;
    stroke: var(--ink);
    stroke-linecap: round;
    stroke-width: 6;
  }

  .cheese-stretch {
    position: absolute;
    z-index: 13;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
  }

  .cheese-stretch path {
    fill: none;
    stroke: #fbe584;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 13;
    filter: drop-shadow(0 3px 0 #d38a28);
  }

  .cheese-stretch path:last-child {
    stroke-width: 6;
  }

  .cartoon-hand {
    position: absolute;
    z-index: 24;
    width: clamp(9.5rem, 23vw, 15rem);
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 9px 5px rgb(38 14 10 / 26%));
  }

  .hand--left {
    top: 53%;
    left: -18rem;
  }

  .hand--right {
    top: 52%;
    right: -18rem;
  }

  .hand--top {
    top: -11rem;
    left: 53%;
    transform: translateX(-50%) rotate(90deg);
  }

  .hand-skin { fill: #c9875d; stroke: #683d31; stroke-width: 4; }
  .hand-skin--dark { fill: #86513e; stroke: #49291f; }
  .hand-skin--light { fill: #e6ad84; }
  .hand-sleeve { stroke: #17314b; stroke-width: 4; }
  .hand-sleeve--blue { fill: #3e76a8; }
  .hand-sleeve--green { fill: #39805a; }
  .hand-sleeve--red { fill: #c53b34; }
  .hand-line { fill: none; stroke: #724737; stroke-linecap: round; stroke-width: 3; }
  .hand-line--dark { stroke: #4c2d25; }

  .tiny-carrier {
    position: absolute;
    z-index: 14;
    bottom: 20%;
    left: 30%;
    width: 3.5rem;
    height: 5.3rem;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 5px 3px rgb(31 13 9 / 30%));
  }

  .carrier-head,
  .carrier-body,
  .carrier-leg,
  .carrier-hat {
    position: absolute;
    display: block;
  }

  .carrier-head {
    top: 0.8rem;
    left: 50%;
    width: 1.65rem;
    aspect-ratio: 1;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: #d99a70;
    transform: translateX(-50%);
  }

  .carrier-head::before,
  .carrier-head::after {
    position: absolute;
    top: 0.48rem;
    width: 0.18rem;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    background: var(--ink);
  }

  .carrier-head::before { left: 0.35rem; }
  .carrier-head::after { right: 0.35rem; }

  .carrier-hat {
    z-index: 2;
    top: 0.35rem;
    left: 50%;
    width: 2.5rem;
    height: 0.75rem;
    border: 3px solid var(--ink);
    border-radius: 50% 50% 15% 15%;
    background: var(--cream);
    transform: translateX(-50%);
  }

  .carrier-body {
    top: 2.2rem;
    left: 50%;
    width: 2.2rem;
    height: 2.1rem;
    border: 3px solid var(--ink);
    border-radius: 0.55rem;
    background: var(--tomato);
    transform: translateX(-50%);
  }

  .carrier-leg {
    top: 4.1rem;
    width: 0.42rem;
    height: 1.2rem;
    border-radius: 99px;
    background: var(--ink);
    transform-origin: top;
  }

  .carrier-leg--left { left: 1.2rem; }
  .carrier-leg--right { right: 1.2rem; }

  .fake-slices {
    position: absolute;
    z-index: 12;
    inset: 0;
    pointer-events: none;
  }

  .fake-slice {
    position: absolute;
    width: clamp(4.5rem, 10vw, 7rem);
    aspect-ratio: 0.9;
    opacity: 0;
    background: #f4c84b;
    clip-path: polygon(8% 8%, 95% 7%, 53% 97%);
    filter: drop-shadow(0 7px 5px rgb(36 13 9 / 32%));
  }

  .fake-crust {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 20%;
    border: 3px solid #8e4d2b;
    border-radius: 45%;
    background: #d98b42;
  }

  .fake-pepperoni {
    position: absolute;
    width: 22%;
    aspect-ratio: 1;
    border: 2px solid #85271f;
    border-radius: 50%;
    background: #bd3a2a;
  }

  .fake-pepperoni--one { top: 33%; left: 28%; }
  .fake-pepperoni--two { top: 49%; right: 25%; }

  .escape-sign {
    position: absolute;
    z-index: 8;
    top: 14%;
    right: 2%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 0.45rem;
    opacity: 0;
    color: var(--ink);
    background: var(--cheese);
    font-family: var(--utility);
    font-size: clamp(0.5rem, 1.3vw, 0.7rem);
    text-transform: uppercase;
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(3deg);
  }

  .instructions {
    width: fit-content;
    max-width: 100%;
    margin: 0.75rem auto 0;
    padding: 0.48rem 0.8rem;
    border-radius: 999px;
    color: #ffecc3;
    background: rgb(43 17 12 / 28%);
    font-family: var(--utility);
    font-size: clamp(0.6rem, 1.6vw, 0.72rem);
    text-align: center;
  }

  footer {
    display: flex;
    justify-content: space-between;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
    color: rgb(255 243 213 / 66%);
    font-size: 0.68rem;
  }

  .tinychaos-credit {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
  }

  .tinychaos-credit a {
    color: var(--paper);
    font-weight: 900;
  }

  footer span {
    font-family: var(--utility);
  }

  .celebration {
    position: fixed;
    z-index: 500;
    inset: 0;
    display: grid;
    overflow: hidden;
    padding: 1.2rem;
    place-items: center;
    background: rgb(23 49 75 / 86%);
    backdrop-filter: blur(8px);
  }

  .celebration-card {
    position: relative;
    z-index: 2;
    width: min(34rem, 100%);
    padding: clamp(2rem, 6vw, 3.5rem);
    border: 0.4rem solid var(--cream);
    border-radius: 1.4rem;
    color: var(--ink);
    background:
      radial-gradient(circle at 12% 15%, rgb(217 75 52 / 12%) 0 2px, transparent 3px),
      var(--paper);
    background-size: 24px 24px, auto;
    text-align: center;
    box-shadow: 0 0 0 5px var(--tomato), 0 25px 80px rgb(0 0 0 / 45%);
  }

  .celebration-kicker {
    color: var(--tomato);
  }

  .celebration h2 {
    max-width: 12ch;
    margin: 0.6rem auto 0.8rem;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(2rem, 7vw, 3.8rem);
    letter-spacing: -0.06em;
    line-height: 0.98;
  }

  .celebration-card > p:not(.celebration-kicker) {
    color: var(--ink-soft);
    font-size: 0.92rem;
  }

  .celebration-burst {
    position: absolute;
    top: -1.4rem;
    right: 1rem;
    color: var(--cheese);
    font-size: 4rem;
    text-shadow: 3px 3px 0 var(--tomato);
  }

  .prize-slice {
    margin: 0.8rem auto;
    font-size: clamp(4rem, 14vw, 6.5rem);
    filter: drop-shadow(0 9px 2px rgb(23 49 75 / 18%));
    transform: rotate(-12deg);
  }

  .play-again {
    min-width: 10rem;
    border-color: var(--ink);
    color: #fff;
    background: var(--tomato);
    box-shadow: 0 5px 0 var(--tomato-dark);
  }

  .play-again:hover {
    background: #ec5a3f;
    transform: translateY(-2px);
  }

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

  .confetti-piece {
    --x: 0vw;
    --r: 180deg;
    position: absolute;
    top: -2rem;
    left: var(--left);
    width: 0.65rem;
    height: 1.2rem;
    border-radius: 0.15rem;
    background: var(--color);
    animation: confetti-fall var(--duration) var(--delay) linear infinite;
  }
}

@layer scenes {
  .game-stage.fugitive .slice-home {
    top: 24%;
    left: 86%;
  }

  .game-stage.fugitive .escape-sign {
    opacity: 1;
  }

  .scene-grab .hand--left,
  .scene-fight .hand--left,
  .scene-fight .hand--right,
  .scene-box-close .hand--top {
    opacity: 1;
  }

  .scene-disguise .leaf-disguise,
  .scene-legs .slice-legs,
  .scene-escape .slice-legs {
    opacity: 1;
  }

  .scene-cheese .cheese-stretch {
    opacity: 1;
  }

  .scene-carrier .tiny-carrier {
    opacity: 1;
  }

  .scene-carrier .slice-home {
    z-index: 16;
  }

  .scene-fakes .fake-slice {
    opacity: 1;
  }
}

@layer motion {
  .scene-grab .hand--left {
    animation: hand-from-left 1.15s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }

  .scene-grab .slice-actor {
    animation: stolen-left 1.15s ease-in-out both;
  }

  .scene-dodge .slice-actor {
    animation: dodge-away 1.05s cubic-bezier(0.2, 0.9, 0.35, 1) both;
  }

  .scene-box-close .box-lid {
    z-index: 32;
    animation: lid-slam 1.15s ease-in-out both;
  }

  .scene-box-close .hand--top {
    animation: hand-from-top 1.15s ease-in-out both;
  }

  .scene-fight .hand--left {
    animation: fight-left 1.3s ease-in-out both;
  }

  .scene-fight .hand--right {
    animation: fight-right 1.3s ease-in-out both;
  }

  .scene-fight .slice-actor {
    animation: tugged 1.3s ease-in-out both;
  }

  .scene-cheese .cheese-stretch {
    animation: cheese-appear 1.35s ease-in-out both;
  }

  .scene-cheese .slice-actor {
    animation: cheese-pull 1.35s ease-in-out both;
  }

  .scene-hide .slice-actor {
    animation: hide-under-box 1.15s ease-in-out both;
  }

  .scene-disguise .slice-actor {
    animation: disguise-wiggle 1.25s ease-in-out both;
  }

  .scene-carrier .tiny-carrier {
    animation: carrier-run 1.45s linear both;
  }

  .scene-carrier .slice-actor {
    animation: carried-away 1.45s linear both;
  }

  .scene-carrier .carrier-leg--left { animation: little-leg 150ms linear infinite alternate; }
  .scene-carrier .carrier-leg--right { animation: little-leg 150ms 75ms linear infinite alternate-reverse; }

  .scene-legs .slice-actor {
    animation: slice-sprint 1.3s cubic-bezier(0.4, 0, 0.7, 1) both;
  }

  .scene-fakes .fake-slice:nth-child(1) { animation: fake-pop 1.2s 0ms ease-in-out both; }
  .scene-fakes .fake-slice:nth-child(2) { animation: fake-pop 1.2s 80ms ease-in-out both; }
  .scene-fakes .fake-slice:nth-child(3) { animation: fake-pop 1.2s 150ms ease-in-out both; }
  .scene-fakes .fake-slice:nth-child(4) { animation: fake-pop 1.2s 220ms ease-in-out both; }
  .scene-fakes .fake-slice:nth-child(5) { animation: fake-pop 1.2s 290ms ease-in-out both; }

  .scene-escape .slice-actor {
    animation: grand-escape 1.55s cubic-bezier(0.4, 0, 0.7, 1) both;
  }

  .scene-return .slice-actor {
    animation: grand-return 1.1s cubic-bezier(0.15, 0.75, 0.25, 1.35) both;
  }

  .game-status.status-pop {
    animation: status-pop 320ms cubic-bezier(0.2, 1.4, 0.4, 1);
  }

  .attempt-number.count-pop {
    animation: count-pop 350ms cubic-bezier(0.2, 1.5, 0.4, 1);
  }

  .celebration:not([hidden]) .celebration-card {
    animation: celebration-card 650ms cubic-bezier(0.2, 1.25, 0.35, 1) both;
  }

  .celebration:not([hidden]) .prize-slice {
    animation: prize-dance 850ms 300ms ease-in-out both;
  }

  @keyframes hand-from-left {
    0%, 100% { left: -18rem; }
    35%, 70% { left: calc(50% - 11rem); }
    50% { transform: rotate(-8deg); }
  }

  @keyframes stolen-left {
    0%, 24%, 100% { transform: rotate(-4deg); }
    42%, 72% { transform: translateX(-8rem) rotate(-22deg) scale(0.94); }
  }

  @keyframes dodge-away {
    0%, 100% { transform: rotate(-4deg); }
    25% { transform: translate(-8rem, -4rem) rotate(-18deg); }
    55% { transform: translate(9rem, -2rem) rotate(18deg); }
    78% { transform: translate(3rem, 5rem) rotate(7deg); }
  }

  @keyframes lid-slam {
    0%, 100% { transform: rotateX(-39deg) rotateZ(-1deg); }
    40%, 72% { transform: translateY(62%) rotateX(0deg) rotateZ(0deg); }
    50% { transform: translateY(60%) rotateX(4deg); }
  }

  @keyframes hand-from-top {
    0%, 100% { top: -11rem; }
    30%, 65% { top: 4%; }
  }

  @keyframes fight-left {
    0%, 100% { left: -18rem; }
    25%, 78% { left: calc(50% - 11rem); }
    42% { transform: translateX(-1rem); }
    60% { transform: translateX(1rem); }
  }

  @keyframes fight-right {
    0%, 100% { right: -18rem; }
    25%, 78% { right: calc(50% - 11rem); }
    42% { transform: translateX(1rem); }
    60% { transform: translateX(-1rem); }
  }

  @keyframes tugged {
    0%, 100% { transform: rotate(-4deg); }
    35% { transform: translateX(-2rem) rotate(-13deg); }
    52% { transform: translateX(2rem) rotate(11deg); }
    68% { transform: translateX(-1.2rem) rotate(-8deg); }
  }

  @keyframes cheese-appear {
    0%, 100% { opacity: 0; transform: scaleX(0.4); transform-origin: 30% 45%; }
    20%, 76% { opacity: 1; transform: scaleX(1); }
    55% { transform: scaleX(1.17); }
  }

  @keyframes cheese-pull {
    0%, 100% { transform: rotate(-4deg); }
    27% { transform: translate(7rem, -2.5rem) rotate(14deg); }
    55% { transform: translate(-1.5rem, -1rem) rotate(-13deg); }
    74% { transform: translate(0.7rem, 0) rotate(5deg); }
  }

  @keyframes hide-under-box {
    0%, 100% { z-index: 15; opacity: 1; transform: rotate(-4deg); }
    38%, 70% { z-index: 2; opacity: 0.35; transform: translate(-8rem, 5rem) rotate(-35deg) scale(0.65); }
  }

  @keyframes disguise-wiggle {
    0%, 100% { transform: rotate(-4deg); }
    18% { transform: rotate(-14deg) scale(0.94); }
    34%, 78% { transform: rotate(3deg) scale(1.04); }
    54% { transform: rotate(-3deg) scale(1.04); }
  }

  @keyframes carrier-run {
    0% { left: -5rem; transform: translateY(0); }
    20% { opacity: 1; }
    50% { transform: translateY(-0.35rem); }
    82% { opacity: 1; }
    100% { left: 108%; opacity: 0; transform: translateY(0); }
  }

  @keyframes carried-away {
    0%, 15% { transform: rotate(-4deg); }
    28% { transform: translate(-14rem, 3rem) rotate(20deg) scale(0.62); }
    82% { opacity: 1; transform: translate(28rem, 3rem) rotate(20deg) scale(0.62); }
    100% { opacity: 0; transform: translate(38rem, 3rem) rotate(20deg) scale(0.62); }
  }

  @keyframes little-leg {
    to { transform: rotate(28deg); }
  }

  @keyframes slice-sprint {
    0%, 100% { opacity: 1; transform: rotate(-4deg); }
    16% { transform: translateY(-2rem) rotate(8deg); }
    30% { transform: translate(-6rem, 0) rotate(-12deg); }
    82% { opacity: 1; transform: translate(34rem, -1rem) rotate(20deg); }
    83% { opacity: 0; }
    92% { opacity: 0; transform: translate(-25rem, 0) rotate(-10deg); }
  }

  @keyframes fake-pop {
    0%, 100% { opacity: 0; transform: scale(0) rotate(-35deg); }
    28%, 75% { opacity: 1; transform: scale(1) rotate(4deg); }
    45% { transform: scale(1.12) rotate(-4deg); }
  }

  @keyframes grand-escape {
    0% { transform: rotate(-4deg); }
    18% { transform: translateY(-3rem) rotate(8deg); }
    34% { transform: translate(-5rem, 0) rotate(-10deg); }
    68% { opacity: 1; transform: translate(32rem, -11rem) rotate(22deg) scale(0.8); }
    78%, 100% { opacity: 0; transform: translate(38rem, -14rem) rotate(28deg) scale(0.65); }
  }

  @keyframes grand-return {
    0% { opacity: 0; transform: translate(18rem, -8rem) rotate(45deg) scale(0.45); }
    65% { opacity: 1; transform: translate(0, -1.5rem) rotate(-9deg) scale(1.16); }
    82% { transform: translate(0, 0.5rem) rotate(-2deg) scale(0.96); }
    100% { transform: rotate(-4deg) scale(1); }
  }

  @keyframes status-pop {
    50% { transform: translateX(-50%) rotate(1deg) scale(1.07); }
  }

  @keyframes count-pop {
    45% { transform: rotate(-7deg) scale(1.28); }
  }

  @keyframes celebration-card {
    from { opacity: 0; transform: translateY(3rem) rotate(-3deg) scale(0.76); }
    to { opacity: 1; transform: none; }
  }

  @keyframes prize-dance {
    0% { opacity: 0; transform: translateY(2rem) rotate(-30deg) scale(0.4); }
    55% { opacity: 1; transform: translateY(-0.7rem) rotate(8deg) scale(1.15); }
    100% { transform: rotate(-12deg) scale(1); }
  }

  @keyframes confetti-fall {
    0% { transform: translate3d(0, -5vh, 0) rotate(0deg); }
    100% { transform: translate3d(var(--x), 110vh, 0) rotate(var(--r)); }
  }
}

@media (max-width: 700px) {
  .topbar {
    align-items: flex-start;
  }

  .brand-mark {
    display: none;
  }

  .control-button {
    width: 2.65rem;
    padding-inline: 0;
  }

  .control-button span,
  .control-button#reset-button {
    font-size: 0;
  }

  .control-button#reset-button svg {
    margin: 0;
  }

  .score-strip {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
  }

  .round-stamp {
    display: none;
  }

  .progress-labels span:first-child {
    display: none;
  }

  .game-stage {
    min-height: 31rem;
  }

  .box {
    top: 56%;
    width: 78%;
  }

  .slice-home {
    top: 61%;
    width: clamp(8rem, 29vw, 10rem);
  }

  .game-stage.fugitive .slice-home {
    top: 25%;
    left: 78%;
  }

  .decoration--olive-dish {
    top: 20%;
    left: 2%;
    transform: rotate(-8deg) scale(0.72);
  }

  .decoration--basil {
    right: 1%;
  }

  .decoration--napkin {
    opacity: 0.7;
  }

  .hand--left,
  .hand--right {
    width: 11rem;
  }

  footer {
    justify-content: center;
    text-align: center;
  }

  footer span {
    display: none;
  }
}

@media (max-width: 430px) {
  .game-shell,
  .topbar,
  footer {
    width: min(100% - 1rem, 1180px);
  }

  .score-strip {
    padding-inline: 0.65rem;
  }

  .game-status {
    top: 5rem;
  }

  .game-stage {
    min-height: 29rem;
  }

  .box {
    top: 57%;
    width: 82%;
  }

  .slice-home {
    top: 62%;
  }

  .decoration--chili {
    bottom: 3%;
  }

  .escape-sign {
    top: 15%;
    right: 1%;
    max-width: 6.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .confetti-piece {
    display: none;
  }
}