:root {
  --stage-w: 375;
  --stage-h: 667;
  --paper: oklch(92% 0.033 86);
  --paper-deep: oklch(82% 0.058 77);
  --ink: oklch(23% 0.042 33);
  --cinnabar: oklch(55% 0.18 35);
  --cinnabar-dark: oklch(39% 0.14 31);
  --gold: oklch(77% 0.145 82);
  --jade: oklch(55% 0.098 172);
  --leaf: oklch(39% 0.08 153);
  --night: oklch(18% 0.048 260);
  --night-2: oklch(25% 0.071 284);
  --cream-line: color-mix(in oklch, var(--paper), var(--ink) 10%);
  --shadow: 0 18px 42px color-mix(in oklch, var(--ink), transparent 72%);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: oklch(15% 0.035 255);
  font-family: "Noto Serif SC", "Songti SC", "Microsoft YaHei", serif;
}

button {
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.mugeda-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 40px color-mix(in oklch, black, transparent 55%);
  touch-action: none;
  user-select: none;
}

.scene-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 500%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 560ms var(--ease-out-expo);
}

.scene {
  position: relative;
  width: 20%;
  height: 100%;
  overflow: hidden;
  flex: 0 0 20%;
  padding: calc(var(--safe-top) + 22px) 22px calc(var(--safe-bottom) + 24px);
  isolation: isolate;
}

.scene :where(h1, h2, p, .cover-kicker, .cover-subtitle, .food-topline, .food-next, .game-hud, .puzzle-header, .puzzle-board, .final-feast, .final-copy, .restart-command) {
  will-change: transform, opacity;
}

.bgm-toggle {
  position: absolute;
  z-index: 20;
  top: calc(var(--safe-top) + 14px);
  right: 16px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--paper), white 25%);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--ink), transparent 78%);
}

.bgm-icon {
  position: relative;
  width: 20px;
  height: 18px;
  clip-path: polygon(0 35%, 26% 35%, 52% 8%, 52% 92%, 26% 65%, 0 65%);
  background: var(--cinnabar);
}

.bgm-icon::before,
.bgm-icon::after {
  content: "";
  position: absolute;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 14px 14px 0;
  opacity: 0.9;
  color: var(--cinnabar);
}

.bgm-icon::before {
  width: 8px;
  height: 8px;
  top: 5px;
  left: 18px;
}

.bgm-icon::after {
  width: 14px;
  height: 14px;
  top: 2px;
  left: 18px;
}

.bgm-toggle:not(.is-on) .bgm-icon {
  background: oklch(55% 0.02 70);
}

.bgm-toggle:not(.is-on) .bgm-icon::before,
.bgm-toggle:not(.is-on) .bgm-icon::after {
  opacity: 0.22;
}

.bgm-toggle:not(.is-on) .bgm-icon::after,
.bgm-toggle:not(.is-on) .bgm-icon::before {
  border-color: oklch(55% 0.02 70);
}

.bgm-toggle:not(.is-on) .bgm-icon::before {
  opacity: 0;
}

.bgm-toggle:not(.is-on) .bgm-icon::after {
  opacity: 0;
}

.bgm-toggle:not(.is-on)::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--cinnabar);
  border-radius: 999px;
  transform: rotate(-45deg);
}

.paper-grain {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in oklch, var(--gold), transparent 66%) 0 2px, transparent 3px 100%),
    radial-gradient(circle at 80% 28%, color-mix(in oklch, var(--jade), transparent 74%) 0 2px, transparent 3px 100%),
    linear-gradient(135deg, color-mix(in oklch, var(--paper), white 6%), var(--paper-deep));
  background-size: 32px 32px, 42px 42px, 100% 100%;
}

.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 12px, color-mix(in oklch, var(--ink), transparent 93%) 12px 13px),
    repeating-linear-gradient(0deg, transparent 0 18px, color-mix(in oklch, var(--ink), transparent 95%) 18px 19px);
}

.cover-copy {
  position: absolute;
  left: 34px;
  top: 18%;
  display: grid;
  gap: var(--space-md);
  transform: translateY(18px);
  animation: coverCopyIn 760ms var(--ease-out-expo) forwards;
}

.scene-cover.is-entering .cover-kicker {
  animation: pptFadeDown 520ms var(--ease-out-quint) 80ms both;
}

.scene-cover.is-entering h1 {
  animation: titleInkRise 740ms var(--ease-out-expo) 180ms both;
}

.scene-cover.is-entering .cover-subtitle {
  animation: pptFadeUp 520ms var(--ease-out-quint) 360ms both;
}

.cover-kicker,
.cover-subtitle {
  margin: 0;
  color: var(--cinnabar-dark);
  font-weight: 700;
  letter-spacing: 0;
}

.cover-kicker {
  width: max-content;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklch, var(--cinnabar), transparent 42%);
  border-radius: 999px;
  background: color-mix(in oklch, var(--paper), white 25%);
  font-size: 14px;
}

.cover-copy h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(58px, 18vw, 86px);
  line-height: 0.9;
  font-weight: 900;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0;
  text-shadow: 0 6px 0 color-mix(in oklch, var(--gold), transparent 58%);
}

.cover-subtitle {
  font-size: 18px;
}

.cover-food {
  position: absolute;
  z-index: -1;
  filter: drop-shadow(0 18px 20px color-mix(in oklch, var(--ink), transparent 76%));
}

.cover-food-noodle {
  right: -72px;
  bottom: 58px;
  width: min(75vw, 340px);
  animation: slideNoodle 780ms var(--ease-out-expo) 120ms both;
}

.cover-food-egg {
  left: -38px;
  bottom: 148px;
  width: min(42vw, 190px);
  animation: slideEgg 760ms var(--ease-out-expo) 220ms both;
}

.scene-cover.is-entering .cover-food-noodle {
  animation: slideNoodle 820ms var(--ease-out-expo) 120ms both, slowPlateRock 3600ms ease-in-out 980ms infinite;
}

.scene-cover.is-entering .cover-food-egg {
  animation: slideEgg 780ms var(--ease-out-expo) 260ms both, softRotateFloat 3800ms ease-in-out 1040ms infinite;
}

.swipe-cue {
  position: absolute;
  right: 18px;
  top: 49%;
  display: flex;
  align-items: center;
  padding: 10px 4px;
  border-radius: 999px;
  background: transparent;
  color: var(--cinnabar);
  font: 800 30px/1 "Microsoft YaHei", sans-serif;
  animation: cuePulse 1100ms var(--ease-out-quart) infinite;
}

.scene-foods {
  background:
    radial-gradient(circle at 78% 16%, color-mix(in oklch, var(--gold), transparent 60%), transparent 26%),
    radial-gradient(circle at 6% 88%, color-mix(in oklch, var(--jade), transparent 66%), transparent 34%),
    var(--paper);
}

.food-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-right: 48px;
  color: var(--cinnabar-dark);
  font-weight: 800;
}

.scene-foods.is-entering .food-topline {
  animation: pptFadeDown 520ms var(--ease-out-quint) 70ms both;
}

.food-dots {
  display: flex;
  gap: 6px;
}

.food-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--ink), transparent 78%);
  transform: scale(0.86);
  transition: transform 240ms var(--ease-out-quart), background 240ms var(--ease-out-quart);
}

.food-dot.is-active {
  background: var(--cinnabar);
  transform: scale(1.25);
}

.food-viewport {
  position: absolute;
  inset: calc(var(--safe-top) + 68px) 0 calc(var(--safe-bottom) + 82px);
  overflow: hidden;
}

.food-track {
  display: flex;
  width: 400%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 460ms var(--ease-out-expo);
}

.food-card {
  position: relative;
  width: 25%;
  height: 100%;
  padding: 10px 28px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-md);
}

.food-card::before {
  content: "";
  position: absolute;
  inset: 78px 24px 70px;
  z-index: -1;
  border: 1px solid color-mix(in oklch, var(--ink), transparent 86%);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.food-card h2 {
  margin: 0;
  max-width: 10em;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 900;
}

.food-card.is-food-entering h2 {
  animation: pptWipeIn 560ms var(--ease-out-expo) 60ms both;
}

.food-story {
  margin: 0;
  max-width: 28ch;
  color: color-mix(in oklch, var(--ink), var(--cinnabar-dark) 18%);
  font-size: 15px;
  line-height: 1.72;
}

.food-card.is-food-entering .food-story {
  animation: pptFadeUp 560ms var(--ease-out-quint) 190ms both;
}

.food-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 238px;
  padding: 12px 0;
}

.food-visual::before,
.food-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.food-visual::before {
  width: min(70vw, 286px);
  aspect-ratio: 1;
  background:
    repeating-conic-gradient(from 18deg, color-mix(in oklch, var(--gold), transparent 72%) 0 10deg, transparent 10deg 20deg),
    radial-gradient(circle, color-mix(in oklch, var(--paper), white 32%) 0 63%, transparent 64%);
}

.food-visual::after {
  width: min(84vw, 352px);
  aspect-ratio: 1;
  border: 1px dashed color-mix(in oklch, var(--leaf), transparent 42%);
}

.food-visual img {
  position: relative;
  z-index: 1;
  width: min(80vw, 328px);
  max-width: 100%;
  max-height: 292px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 22px 20px color-mix(in oklch, var(--ink), transparent 76%));
  animation: foodFloat 3200ms ease-in-out infinite;
}

.food-card.is-food-entering .food-visual::before {
  animation: ringSpinIn 760ms var(--ease-out-expo) 160ms both;
}

.food-card.is-food-entering .food-visual::after {
  animation: ringDrawIn 820ms var(--ease-out-expo) 220ms both;
}

.food-card.is-food-entering .food-visual img {
  animation: dishZoomRotateIn 760ms var(--ease-out-expo) 260ms both, foodFloat 3200ms ease-in-out 1080ms infinite;
}

.ingredients {
  display: grid;
  gap: var(--space-sm);
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--ink), transparent 82%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--paper), white 24%);
}

.food-card.is-food-entering .ingredients {
  animation: pptFadeUp 540ms var(--ease-out-quint) 420ms both;
}

.food-card.is-food-entering .ingredient-list span {
  animation: tagPopIn 420ms var(--ease-out-quint) calc(520ms + var(--tag-order, 0ms)) both;
}

.ingredients strong {
  color: var(--cinnabar-dark);
  font-size: 14px;
}

.ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ingredient-list span {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--jade), transparent 84%);
  color: color-mix(in oklch, var(--leaf), black 16%);
  font-size: 13px;
  font-weight: 700;
}

.ingredient-list span:nth-child(1) {
  --tag-order: 0ms;
}

.ingredient-list span:nth-child(2) {
  --tag-order: 42ms;
}

.ingredient-list span:nth-child(3) {
  --tag-order: 84ms;
}

.ingredient-list span:nth-child(4) {
  --tag-order: 126ms;
}

.ingredient-list span:nth-child(5) {
  --tag-order: 168ms;
}

.food-next,
.text-command {
  position: absolute;
  right: 22px;
  bottom: calc(var(--safe-bottom) + 26px);
  z-index: 3;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--cinnabar);
  color: oklch(96% 0.018 78);
  font-weight: 800;
  box-shadow: 0 14px 28px color-mix(in oklch, var(--cinnabar), transparent 64%);
}

.scene-foods.is-entering .food-next {
  animation: pptFadeUp 520ms var(--ease-out-quint) 560ms both;
}

.scene-catch {
  background:
    radial-gradient(circle at 20% 12%, oklch(89% 0.075 85), transparent 28%),
    linear-gradient(180deg, oklch(80% 0.064 198), oklch(95% 0.038 87) 57%, oklch(78% 0.078 115));
}

.game-hud {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-right: 48px;
}

.scene-catch.is-entering .game-hud {
  animation: pptFadeDown 520ms var(--ease-out-quint) 90ms both;
}

.timer-shell {
  flex: 1;
  height: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--ink), transparent 82%);
  border-radius: 999px;
  background: color-mix(in oklch, white, transparent 16%);
}

.timer-bar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--jade), var(--gold), var(--cinnabar));
  transform-origin: left center;
  transform: scaleX(1);
}

.scene-catch.is-entering .timer-bar {
  animation: none;
}

.score-chip {
  min-width: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--paper), white 22%);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--ink), transparent 80%);
  font-weight: 800;
}

.score-chip span {
  color: color-mix(in oklch, var(--ink), transparent 18%);
  font-size: 13px;
}

.score-chip strong {
  color: var(--cinnabar);
  font-size: 20px;
}

.catch-arena {
  position: absolute;
  inset: calc(var(--safe-top) + 70px) 0 0;
  overflow: hidden;
}

.falling-cloud {
  position: absolute;
  left: -15%;
  top: 14%;
  width: 130%;
  height: 90px;
  opacity: 0.18;
  background:
    radial-gradient(circle at 16% 45%, white 0 26px, transparent 27px),
    radial-gradient(circle at 32% 35%, white 0 32px, transparent 33px),
    radial-gradient(circle at 52% 48%, white 0 24px, transparent 25px),
    radial-gradient(circle at 70% 38%, white 0 31px, transparent 32px);
  animation: cloudDrift 9000ms linear infinite;
}

.catcher-bowl {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 18px);
  width: 168px;
  max-width: 46vw;
  height: auto;
  transform: translate3d(-50%, 0, 0);
  filter: drop-shadow(0 15px 12px color-mix(in oklch, var(--ink), transparent 70%));
  touch-action: none;
}

.scene-catch.is-entering .catcher-bowl {
  animation: bowlSlideIn 620ms var(--ease-out-expo) 270ms both, bowlBreath 2600ms ease-in-out 1040ms infinite;
}

.falling-item {
  position: absolute;
  width: 58px;
  height: 58px;
  pointer-events: none;
  filter: drop-shadow(0 10px 10px color-mix(in oklch, var(--ink), transparent 76%));
  animation: fallingItemIn 280ms var(--ease-out-quint) both;
}

.plus-five {
  position: absolute;
  z-index: 5;
  color: var(--cinnabar);
  font: 900 24px/1 "Microsoft YaHei", sans-serif;
  text-shadow: 0 2px 0 color-mix(in oklch, white, transparent 15%);
  animation: plusRise 720ms var(--ease-out-expo) forwards;
  pointer-events: none;
}

.result-panel {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 26px;
  background: color-mix(in oklch, var(--ink), transparent 48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out-quart);
}

.result-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.result-content {
  position: relative;
  width: min(100%, 318px);
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  padding: 30px 24px 24px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--paper), white 28%), var(--paper)),
    var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 320ms var(--ease-out-expo);
}

.result-panel.is-visible .result-content {
  transform: translateY(0) scale(1);
}

.result-panel.is-visible .result-trophy {
  animation: trophyTwistIn 620ms var(--ease-out-expo) 120ms both;
}

.result-trophy {
  width: 72px;
}

.result-content h2 {
  margin: 0;
  color: var(--cinnabar-dark);
  font-size: 28px;
}

.result-content p {
  margin: 0;
  max-width: 23ch;
  font-size: 15px;
  line-height: 1.65;
}

.primary-command {
  min-width: 136px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--cinnabar);
  color: oklch(97% 0.02 80);
  font-weight: 900;
  box-shadow: 0 14px 30px color-mix(in oklch, var(--cinnabar), transparent 62%);
  transition: transform 160ms var(--ease-out-quart), filter 160ms var(--ease-out-quart);
}

.primary-command:active,
.text-command:active {
  transform: scale(0.96);
  filter: brightness(0.95);
}

.scene-puzzle {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in oklch, var(--jade), transparent 55%), transparent 28%),
    radial-gradient(circle at 88% 84%, color-mix(in oklch, var(--gold), transparent 54%), transparent 34%),
    oklch(91% 0.035 75);
}

.puzzle-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 52px;
  color: var(--ink);
}

.scene-puzzle.is-entering .puzzle-header {
  animation: pptFadeDown 520ms var(--ease-out-quint) 80ms both;
}

.puzzle-header div {
  display: grid;
  gap: var(--space-xs);
}

.puzzle-header span {
  color: var(--cinnabar-dark);
  font-weight: 900;
}

.puzzle-header strong {
  font-size: 24px;
}

.puzzle-header time {
  min-width: 58px;
  padding: 9px 12px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--paper), white 24%);
  color: var(--cinnabar);
  text-align: center;
  font-weight: 900;
  box-shadow: 0 10px 24px color-mix(in oklch, var(--ink), transparent 82%);
}

.puzzle-wrap {
  position: absolute;
  inset: calc(var(--safe-top) + 114px) 18px calc(var(--safe-bottom) + 58px);
  display: grid;
  grid-template-rows: auto minmax(132px, 1fr);
  align-content: center;
  justify-items: center;
  gap: var(--space-md);
}

.puzzle-board {
  position: relative;
  width: min(74vw, 292px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 5px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--ink), transparent 76%);
  box-shadow: 0 18px 42px color-mix(in oklch, var(--ink), transparent 72%);
}

.scene-puzzle.is-entering .puzzle-board {
  animation: boardFlipIn 700ms var(--ease-out-expo) 220ms both;
}

.puzzle-slot {
  position: relative;
  display: grid;
  place-items: stretch;
  border-radius: 6px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--paper), white 18%), color-mix(in oklch, var(--paper), black 6%));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 82%),
    inset 0 0 0 6px color-mix(in oklch, var(--paper), transparent 46%);
  animation: tileDropIn 420ms var(--ease-out-quint) var(--tile-delay, 0ms) both;
}

.puzzle-slot::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 4px;
  border: 1px dashed color-mix(in oklch, var(--leaf), transparent 38%);
  opacity: 0.58;
  pointer-events: none;
}

.puzzle-slot .puzzle-tile {
  width: 100%;
  height: 100%;
  animation: placeTileIn 260ms var(--ease-out-quint) both;
}

.puzzle-slot .puzzle-tile.is-locked {
  cursor: default;
}

.puzzle-tray {
  width: min(86vw, 340px);
  min-height: 132px;
  max-height: 184px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-content: start;
  padding: 10px;
  overflow: hidden auto;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--paper), white 20%), color-mix(in oklch, var(--paper), black 3%));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 84%),
    0 12px 28px color-mix(in oklch, var(--ink), transparent 82%);
}

.scene-puzzle.is-entering .puzzle-tray {
  animation: pptFadeUp 560ms var(--ease-out-quint) 360ms both;
}

.puzzle-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  background-color: color-mix(in oklch, var(--paper), white 18%);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white, transparent 55%);
  transition: transform 180ms var(--ease-out-quart), filter 180ms var(--ease-out-quart);
  animation: tileDropIn 420ms var(--ease-out-quint) var(--tile-delay, 0ms) both;
  touch-action: none;
  cursor: grab;
}

.puzzle-tile:active {
  transform: scale(0.97);
  filter: brightness(0.94);
}

.puzzle-tile.is-selected {
  z-index: 2;
  transform: translate3d(0, -3px, 0) scale(1.035);
  filter: saturate(1.16) brightness(1.05);
  box-shadow:
    inset 0 0 0 2px color-mix(in oklch, var(--gold), white 10%),
    0 12px 18px color-mix(in oklch, var(--ink), transparent 76%);
}

.puzzle-tile.is-dragging {
  opacity: 0.42;
  cursor: grabbing;
}

.puzzle-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  cursor: grabbing;
  pointer-events: none;
  animation: none;
  transform-origin: center;
  margin: 0;
  opacity: 1;
  filter: saturate(1.2) brightness(1.08);
  box-shadow:
    inset 0 0 0 2px color-mix(in oklch, var(--cinnabar), white 8%),
    0 16px 24px color-mix(in oklch, var(--ink), transparent 70%);
}

.is-puzzle-dragging,
.is-puzzle-dragging body,
.is-puzzle-dragging .mugeda-stage {
  cursor: grabbing;
}

.puzzle-hint {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 30;
  padding: 8px 13px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink), transparent 9%);
  color: oklch(96% 0.018 78);
  font-size: 14px;
  font-weight: 800;
  transform: translateX(-50%);
  animation: puzzleHintIn 900ms var(--ease-out-quint) both;
}

.sparkle-ring {
  position: absolute;
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, var(--gold) 0 5px, transparent 6px),
    radial-gradient(circle at 100% 50%, var(--jade) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 100%, var(--cinnabar) 0 5px, transparent 6px),
    radial-gradient(circle at 0% 50%, var(--gold) 0 5px, transparent 6px);
  animation: sparkleSpin 1000ms linear infinite;
  opacity: 0.85;
  pointer-events: none;
}

.scene-final {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-xl);
  padding-inline: 28px;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in oklch, var(--night-2), white 4%) 0 0, transparent 34%),
    linear-gradient(180deg, var(--night-2), var(--night));
  color: oklch(94% 0.024 86);
  text-align: center;
}

.star-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, white 0 1px, transparent 2px),
    radial-gradient(circle at 68% 16%, white 0 1px, transparent 2px),
    radial-gradient(circle at 82% 40%, white 0 1.2px, transparent 2px),
    radial-gradient(circle at 32% 62%, white 0 1px, transparent 2px),
    radial-gradient(circle at 76% 76%, white 0 1.2px, transparent 2px),
    radial-gradient(circle at 12% 82%, white 0 1px, transparent 2px);
  opacity: 0.72;
  animation: starBreath 2600ms ease-in-out infinite alternate;
}

.final-feast {
  position: relative;
  z-index: 1;
  width: min(82vw, 340px);
  filter: drop-shadow(0 28px 28px color-mix(in oklch, black, transparent 54%));
  animation: foodFloat 3600ms ease-in-out infinite;
}

.scene-final.is-entering .final-feast {
  animation: feastOrbitIn 850ms var(--ease-out-expo) 120ms both, foodFloat 3600ms ease-in-out 1100ms infinite;
}

.final-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-md);
}

.scene-final.is-entering .final-copy h2 {
  animation: pptFadeUp 620ms var(--ease-out-quint) 360ms both;
}

.scene-final.is-entering .final-copy p {
  animation: pptFadeUp 620ms var(--ease-out-quint) 500ms both;
}

.final-copy h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
}

.final-copy p {
  margin: 0;
  color: color-mix(in oklch, oklch(94% 0.024 86), transparent 16%);
  line-height: 1.7;
}

.restart-command {
  position: relative;
  z-index: 1;
  background: var(--gold);
  color: color-mix(in oklch, var(--ink), black 12%);
  box-shadow: 0 16px 34px color-mix(in oklch, var(--gold), transparent 70%);
}

.scene-final.is-entering .restart-command {
  animation: buttonRiseIn 520ms var(--ease-out-quint) 690ms both;
}

.toast-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

@keyframes coverCopyIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pptFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pptFadeDown {
  from {
    opacity: 0;
    transform: translate3d(0, -22px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pptWipeIn {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0) scale(0.96);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes titleInkRise {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, 0) rotate(-3deg) scale(0.94);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: blur(0);
  }
}

@keyframes slideNoodle {
  from {
    opacity: 0;
    transform: translate3d(42%, 12%, 0) rotate(10deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes slideEgg {
  from {
    opacity: 0;
    transform: translate3d(-38%, 18%, 0) rotate(-16deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes slowPlateRock {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-8px, -6px, 0) rotate(-2deg);
  }
}

@keyframes softRotateFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(5px, -8px, 0) rotate(4deg);
  }
}

@keyframes ringSpinIn {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-34deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes ringDrawIn {
  from {
    opacity: 0;
    transform: scale(0.82) rotate(22deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes dishZoomRotateIn {
  from {
    opacity: 0;
    transform: translate3d(36px, 24px, 0) rotate(10deg) scale(0.72);
    filter: drop-shadow(0 8px 8px color-mix(in oklch, var(--ink), transparent 86%));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: drop-shadow(0 22px 20px color-mix(in oklch, var(--ink), transparent 76%));
  }
}

@keyframes tagPopIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bowlSlideIn {
  from {
    opacity: 0;
    transform: translate3d(-50%, 44px, 0) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes bowlBreath {
  0%,
  100% {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-50%, -4px, 0) scale(1.025);
  }
}

@keyframes fallingItemIn {
  from {
    opacity: 0;
    filter: drop-shadow(0 2px 4px color-mix(in oklch, var(--ink), transparent 88%)) brightness(1.22);
  }
  to {
    opacity: 1;
    filter: drop-shadow(0 10px 10px color-mix(in oklch, var(--ink), transparent 76%)) brightness(1);
  }
}

@keyframes trophyTwistIn {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0) rotate(-18deg) scale(0.76);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes boardFlipIn {
  from {
    opacity: 0;
    transform: perspective(620px) rotateX(16deg) translate3d(0, 34px, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: perspective(620px) rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tileDropIn {
  from {
    opacity: 0;
    transform: translate3d(0, -22px, 0) rotate(-4deg) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes placeTileIn {
  from {
    opacity: 0;
    transform: scale(0.78) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes puzzleHintIn {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0) scale(0.94);
  }
  18%,
  76% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -10px, 0) scale(0.98);
  }
}

@keyframes feastOrbitIn {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0) rotate(9deg) scale(0.74);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes buttonRiseIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes cuePulse {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.42;
  }
  50% {
    transform: translateX(-8px);
    opacity: 1;
  }
}

@keyframes foodFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes cloudDrift {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(10%);
  }
}

@keyframes plusRise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.86);
  }
  18% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-42px) scale(1.16);
  }
}

@keyframes sparkleSpin {
  to {
    transform: rotate(360deg) scale(1.08);
  }
}

@keyframes starBreath {
  from {
    opacity: 0.48;
  }
  to {
    opacity: 0.9;
  }
}

@media (min-width: 520px) {
  .mugeda-stage {
    width: min(100vw, 430px);
    height: min(100vh, 764px);
    height: min(100svh, 764px);
    border-radius: 18px;
  }
}

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