:root {
  --ink: #554b43;
  --soft-ink: #7c7066;
  --cream: #fff9eb;
  --paper: #fffdf7;
  --berry: #e78483;
  --berry-dark: #b85f63;
  --mint: #92c7a5;
  --oven: #e99a61;
  --sun: #f3c85f;
  --spring: cubic-bezier(.2, 1.28, .36, 1);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f9dfb8; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(255,255,255,.78) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 14%, rgba(255,255,255,.65) 0 7px, transparent 8px),
    linear-gradient(180deg, #f8d6a8 0%, #fbe7c4 48%, #d8e4c2 100%);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }

.sprinkle-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sprinkle-sky i { position: absolute; width: 21px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.6); transform: rotate(32deg); }
.sprinkle-sky i:nth-child(1) { top: 10%; left: 4%; }
.sprinkle-sky i:nth-child(2) { top: 18%; right: 8%; background: rgba(231,132,131,.32); transform: rotate(-28deg); }
.sprinkle-sky i:nth-child(3) { top: 54%; left: 2%; background: rgba(126,178,139,.34); }
.sprinkle-sky i:nth-child(4) { top: 69%; right: 3%; transform: rotate(73deg); }
.sprinkle-sky i:nth-child(5) { bottom: 8%; left: 17%; background: rgba(238,174,87,.4); transform: rotate(-16deg); }
.sprinkle-sky i:nth-child(6) { bottom: 14%; right: 20%; background: rgba(215,132,161,.33); }

.game-shell { position: relative; z-index: 1; width: min(1190px, calc(100% - 26px)); margin: 0 auto; padding: 10px 0 28px; }
.game-header { display: grid; min-height: 78px; grid-template-columns: 120px 1fr 120px; align-items: center; }
.title-lockup { text-align: center; }
.title-lockup p { margin: 0 0 2px; color: #89766a; font-size: 11px; font-weight: 900; letter-spacing: .17em; }
.title-lockup h1 { margin: 0; font-family: KaiTi, STKaiti, serif; font-size: clamp(30px, 4.7vw, 47px); letter-spacing: .07em; }
.header-actions { display: flex; justify-content: flex-end; gap: 9px; }
.round-button {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 4px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(255,251,235,.94);
  box-shadow: 0 6px 0 rgba(117,82,56,.12);
  color: #776b59;
  cursor: pointer;
  font-size: 23px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 150ms var(--spring), box-shadow 150ms ease;
}
.round-button:active { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 rgba(117,82,56,.12); }

.bakery {
  display: grid;
  min-height: 670px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
  border: 7px solid rgba(255,255,255,.9);
  border-radius: 38px;
  background: var(--paper);
  box-shadow: 0 18px 46px rgba(112,76,49,.17), 0 8px 0 rgba(111,85,58,.11);
}

.kitchen-scene {
  position: relative;
  min-height: 670px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
    #b9ddd0;
  background-size: 38px 38px;
  --batter-color: #f1cc79;
  --filling-color: #ef8f9c;
  --frosting-color: #fff2dc;
}
.kitchen-scene::after { position: absolute; right: 0; bottom: 0; left: 0; height: 220px; content: ""; background: repeating-linear-gradient(90deg, #d68c64 0 68px, #e6a378 68px 136px); box-shadow: inset 0 10px rgba(129,75,51,.09); }

.window { position: absolute; top: 44px; left: 50px; width: 185px; height: 150px; overflow: hidden; border: 12px solid #fff8e9; border-radius: 25px; background: #9dd5de; box-shadow: 0 8px 0 rgba(76,79,53,.11); }
.window::before, .window::after { position: absolute; z-index: 2; content: ""; background: rgba(255,255,255,.75); }
.window::before { top: 0; bottom: 0; left: 50%; width: 7px; transform: translateX(-50%); }
.window::after { top: 50%; right: 0; left: 0; height: 7px; transform: translateY(-50%); }
.window-sun { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; background: #f8d45e; box-shadow: 0 0 0 12px rgba(255,225,115,.25); }
.window i { position: absolute; bottom: -40px; width: 130px; height: 85px; border-radius: 50% 50% 0 0; background: #79b66e; }
.window i:last-child { right: -42px; bottom: -25px; background: #68a860; }

.shelf { position: absolute; top: 54px; right: 46px; display: flex; width: 265px; height: 92px; padding: 0 18px; align-items: end; justify-content: space-around; font-size: 45px; }
.shelf span { position: relative; z-index: 2; filter: drop-shadow(0 5px 2px rgba(70,59,47,.13)); }
.shelf b { position: absolute; right: 0; bottom: -8px; left: 0; height: 16px; border-radius: 9px; background: #986c52; box-shadow: 0 7px 0 rgba(93,56,42,.15); }
.apron-friend { position: absolute; z-index: 4; top: 188px; left: 58px; font-size: 102px; filter: drop-shadow(0 10px 2px rgba(62,80,53,.13)); }
.apron-friend::after { position: absolute; right: 16px; bottom: -5px; left: 16px; height: 66px; content: ""; border-radius: 35px 35px 20px 20px; background: #f3a58e; opacity: .88; }
.apron-friend i { position: absolute; z-index: 2; right: 4px; bottom: -26px; left: 4px; padding: 5px 8px; border: 3px solid #fff; border-radius: 999px; background: #fff8e4; color: #846e5c; font-size: 11px; font-style: normal; font-weight: 900; text-align: center; }

.workbench { position: absolute; z-index: 5; right: 35px; bottom: 77px; left: 35px; height: 91px; border: 9px solid #fff1d5; border-radius: 50% 50% 18px 18px; background: #efb679; box-shadow: 0 12px 0 rgba(111,66,44,.14); }
.bowl-art { position: absolute; z-index: 8; right: 75px; bottom: 100px; width: 330px; height: 270px; transition: opacity 280ms ease, transform 350ms var(--spring); }
.bowl { position: absolute; right: 20px; bottom: 0; width: 278px; height: 135px; border: 9px solid #fff8ed; border-radius: 18px 18px 130px 130px; background: #8fc2c2; box-shadow: inset 0 -15px rgba(66,137,140,.13), 0 12px 0 rgba(72,74,55,.13); }
.batter { position: absolute; z-index: 2; right: 37px; bottom: 105px; width: 244px; height: 48px; border: 7px solid #fff4de; border-radius: 50%; background: var(--batter-color); box-shadow: inset 0 8px rgba(255,255,255,.24); transition: background 300ms ease; }
.ingredient-effect { position: absolute; z-index: 6; top: -32px; right: 126px; opacity: 0; font-size: 62px; line-height: 1; pointer-events: none; filter: drop-shadow(0 7px 2px rgba(69,61,47,.13)); }
.mix-tool { position: absolute; z-index: 4; top: 8px; right: 118px; font-size: 92px; line-height: 1; transform-origin: 50% 100%; filter: drop-shadow(0 6px 2px rgba(69,61,47,.12)); }
.drawn-tool {
  position: relative;
  display: inline-block;
  width: .58em;
  height: 1em;
  vertical-align: -.12em;
  transform: rotate(-24deg);
}
.drawn-wooden-spoon::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: .42em;
  height: .48em;
  content: "";
  border: .06em solid #8b542e;
  border-radius: 52% 48% 58% 42%;
  background: linear-gradient(115deg, #e5b06f, #b8733e 72%);
  box-shadow: inset .07em .04em rgba(255,255,255,.28);
  transform: translateX(-50%);
}
.drawn-wooden-spoon::after {
  position: absolute;
  top: .4em;
  bottom: 0;
  left: 50%;
  width: .13em;
  content: "";
  border: .04em solid #8b542e;
  border-radius: 999px;
  background: linear-gradient(90deg, #d39758, #ad6838);
  transform: translateX(-50%);
}
.drawn-whisk::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: .48em;
  height: .52em;
  content: "";
  border: .065em solid #718c93;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, transparent 0 .08em, rgba(113,140,147,.7) .08em .11em);
  transform: translateX(-50%);
}
.drawn-whisk::after {
  position: absolute;
  top: .46em;
  bottom: 0;
  left: 50%;
  width: .14em;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, #d9edf0, #829fa7);
  transform: translateX(-50%);
}
.choice-icon .drawn-tool { font-size: 1em; }
.batter-splash { position: absolute; z-index: 3; display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--batter-color); }
.splash-one { top: 88px; right: 67px; }
.splash-two { top: 60px; right: 205px; width: 14px; height: 14px; }
.kitchen-scene.is-mixing .mix-tool { animation: whisk-mix 650ms ease-in-out 2; }
.kitchen-scene.is-mixing .batter { animation: batter-swirl 650ms ease-in-out 2; }
.kitchen-scene.is-mixing .batter-splash { display: block; animation: splash-pop 650ms ease-out 2; }
.kitchen-scene.adding-batter .ingredient-effect { animation: ingredient-pour 720ms var(--spring) both; }
.kitchen-scene.adding-batter .batter { animation: batter-fill 680ms var(--spring); }

.cake {
  position: absolute;
  z-index: 8;
  right: 70px;
  bottom: 86px;
  width: 340px;
  height: 330px;
  opacity: 0;
  transform: translateY(25px) scale(.8);
  pointer-events: none;
  transition: opacity 320ms ease, transform 450ms var(--spring);
}
.cake-shadow { position: absolute; z-index: 1; right: 39px; bottom: 34px; left: 39px; height: 46px; border-radius: 50%; background: rgba(83,58,42,.2); filter: blur(3px); }
.cake-plate { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 82px; border: 10px solid #fff8e9; border-radius: 50%; background: #d6e8df; box-shadow: 0 11px 0 rgba(71,79,58,.14), inset 0 8px rgba(255,255,255,.58); }
.cake-layer, .cake-filling, .cake-frosting { position: absolute; left: 50%; width: 252px; transform: translateX(-50%); transition: background 350ms ease, border-radius 350ms ease, opacity 220ms ease; }
.cake-layer {
  z-index: 4;
  height: 76px;
  overflow: visible;
  border: 5px solid rgba(255,255,255,.42);
  border-radius: 26px 26px 35px 35px / 18px 18px 28px 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 28% 74%, rgba(103,63,39,.1)),
    var(--batter-color);
  box-shadow: inset 0 -13px rgba(107,65,40,.1), 0 7px 0 rgba(85,67,46,.12);
}
.cake-layer::before {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: -5px;
  left: -5px;
  height: 36px;
  content: "";
  border: 5px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: color-mix(in srgb, var(--batter-color) 84%, white);
  box-shadow: inset 0 7px rgba(255,255,255,.17);
}
.cake-layer i { position: absolute; z-index: 3; width: 7px; height: 5px; border-radius: 50%; background: rgba(112,70,42,.16); }
.cake-layer i:nth-child(1) { top: 27px; left: 39px; }
.cake-layer i:nth-child(2) { top: 49px; left: 128px; width: 6px; }
.cake-layer i:nth-child(3) { top: 31px; right: 44px; width: 5px; }
.cake-layer-bottom { bottom: 56px; }
.cake-layer-top { z-index: 6; bottom: 137px; }
.cake-filling {
  z-index: 7;
  bottom: 128px;
  height: 25px;
  opacity: 0;
  border: 4px solid rgba(255,255,255,.42);
  border-radius: 50%;
  background: var(--filling-color);
  box-shadow: 0 5px 0 rgba(91,55,45,.1);
  transform: translateX(-50%) scaleX(.12);
}
.cake.has-filling .cake-filling { opacity: 1; transform: translateX(-50%) scaleX(1); }
.cake-frosting {
  z-index: 9;
  bottom: 199px;
  height: 48px;
  opacity: 0;
  border: 5px solid rgba(255,255,255,.6);
  border-radius: 50%;
  background: var(--frosting-color);
  box-shadow: inset 0 8px rgba(255,255,255,.34), 0 5px 0 rgba(91,55,45,.09);
  transform: translateX(-50%) translateY(-22px) scale(.72);
}
.cake.has-frosting .cake-frosting { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.cake-frosting i { position: absolute; top: 26px; width: 31px; height: 43px; border-radius: 0 0 18px 18px; background: var(--frosting-color); box-shadow: inset 5px 0 rgba(255,255,255,.12); }
.cake-frosting i:nth-child(1) { left: 25px; height: 31px; }
.cake-frosting i:nth-child(2) { left: 103px; height: 49px; }
.cake-frosting i:nth-child(3) { right: 29px; height: 38px; }
.cake:not(.has-cake) .cake-layer { opacity: 0; }
.cake.shape-square .cake-layer { border-radius: 9px 9px 15px 15px; }
.cake.shape-square .cake-layer::before,
.cake.shape-square .cake-filling,
.cake.shape-square .cake-frosting { border-radius: 13px; }
.cake.shape-star .cake-layer,
.cake.shape-star .cake-frosting {
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 29%, 97% 30%, 69% 51%, 79% 91%, 50% 68%, 21% 91%, 31% 51%, 3% 30%, 39% 29%);
}
.cake.shape-star .cake-layer { height: 112px; }
.cake.shape-star .cake-layer::before,
.cake.shape-flower .cake-layer::before { display: none; }
.cake.shape-star .cake-layer-bottom { bottom: 57px; }
.cake.shape-star .cake-layer-top { bottom: 124px; }
.cake.shape-star .cake-filling { bottom: 117px; border-radius: 10px; }
.cake.shape-star .cake-frosting { bottom: 199px; height: 70px; }
.cake.shape-flower .cake-layer,
.cake.shape-flower .cake-frosting {
  border-radius: 0;
}
.cake.shape-flower .cake-layer {
  height: 112px;
  clip-path: path("M126 4 C145 -8 160 8 166 26 C180 8 205 10 211 30 C235 25 251 41 244 61 C260 76 244 99 222 96 C218 118 191 121 176 104 C164 126 136 126 126 106 C110 126 84 122 76 103 C57 119 32 108 34 87 C11 88 -3 67 13 51 C1 30 22 12 45 20 C54 -1 81 -3 92 19 C102 3 113 0 126 4 Z");
}
.cake.shape-flower .cake-layer-bottom { bottom: 57px; }
.cake.shape-flower .cake-layer-top { bottom: 124px; }
.cake.shape-flower .cake-filling { bottom: 117px; border-radius: 40% 60% 42% 58%; }
.cake.shape-flower .cake-frosting {
  bottom: 199px;
  height: 70px;
  clip-path: path("M126 2 C146 -8 158 7 164 19 C178 4 199 8 201 23 C225 19 244 31 236 47 C254 61 230 74 211 66 C204 83 179 78 166 67 C155 84 134 79 126 67 C113 84 91 79 82 66 C64 80 40 72 42 55 C19 58 5 42 19 29 C11 12 35 2 53 11 C61 -4 88 -3 96 15 C104 3 115 0 126 2 Z");
}
.cake.shape-heart .cake-layer::before,
.cake.shape-heart .cake-frosting {
  border-radius: 0;
  clip-path: polygon(50% 100%, 8% 60%, 0 37%, 7% 16%, 25% 5%, 50% 23%, 75% 5%, 93% 16%, 100% 37%, 92% 60%);
}
.cake.shape-heart .cake-layer { border-radius: 48% 48% 24px 24px / 34px 34px 26px 26px; }
.cake.shape-heart .cake-filling { border-radius: 45% 45% 14px 14px; }
.cake.shape-cloud .cake-layer::before,
.cake.shape-cloud .cake-frosting {
  border-radius: 0;
  clip-path: polygon(6% 77%, 0 55%, 10% 34%, 29% 34%, 36% 11%, 57% 3%, 72% 19%, 75% 35%, 93% 39%, 100% 59%, 91% 79%, 68% 84%, 48% 79%, 27% 86%);
}
.cake.shape-cloud .cake-layer { border-radius: 45% 55% 38% 46% / 28% 30% 38% 42%; }
.cake.shape-cloud .cake-filling { border-radius: 45% 55% 40% 48%; }

.toppings { position: absolute; z-index: 12; right: 34px; bottom: 231px; left: 34px; display: flex; min-height: 68px; align-items: end; justify-content: center; gap: 9px; }
.topping { display: block; font-size: 44px; line-height: 1; filter: drop-shadow(0 5px 2px rgba(78,58,45,.15)); animation: topping-land 420ms var(--spring) both; }
.topping:nth-child(2) { animation-delay: 90ms; transform: translateY(-10px) rotate(7deg); }
.topping:nth-child(3) { animation-delay: 180ms; transform: rotate(-7deg); }
.topping:nth-child(4) { animation-delay: 270ms; transform: translateY(-4px) rotate(10deg); }
.candles { position: absolute; z-index: 11; right: 84px; bottom: 249px; left: 84px; display: none; justify-content: space-around; }
.candles i { position: relative; width: 12px; height: 53px; border: 3px solid #fff; border-radius: 7px; background: repeating-linear-gradient(135deg, #e77f79 0 7px, #ffe7a4 7px 14px); }
.candles i::before { position: absolute; top: -28px; left: -7px; width: 20px; height: 28px; content: ""; border-radius: 55% 45% 55% 45%; background: #ffc94e; box-shadow: 0 0 12px rgba(255,180,55,.6); animation: flame-flicker 650ms ease-in-out infinite alternate; }
.kitchen-scene[data-visual="cake"] .bowl-art { opacity: 0; transform: translateY(35px) scale(.72); }
.kitchen-scene[data-visual="cake"] .cake { opacity: 1; transform: none; }
.kitchen-scene.is-cake-revealing .cake-layer { animation: sponge-reveal 650ms var(--spring) both; }
.kitchen-scene.is-cake-revealing .cake-layer-top { animation-delay: 120ms; }
.kitchen-scene.adding-filling .cake-filling { animation: filling-spread 620ms var(--spring) both; }
.kitchen-scene.adding-frosting .cake-frosting { animation: frosting-drape 700ms var(--spring) both; }
.kitchen-scene.is-complete .candles { display: flex; }
.kitchen-scene.is-complete .cake { animation: cake-present 1.8s ease-in-out infinite; }
.cake-cut-guide { position: absolute; z-index: 20; inset: 65px 65px 60px; display: none; pointer-events: none; }
.kitchen-scene.is-serving .cake-cut-guide { display: block; }
.cake-cut-guide i {
  position: absolute;
  top: 5px;
  bottom: 8px;
  left: 50%;
  width: 6px;
  opacity: 0;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  background: rgba(116,72,48,.5);
  box-shadow: 0 3px rgba(89,52,34,.12);
  transform-origin: bottom;
}
.cake-cut-guide i:first-child { transform: rotate(24deg); }
.cake-cut-guide i:last-child { transform: rotate(-24deg); }
.kitchen-scene.cut-one .cake-cut-guide i:first-child,
.kitchen-scene.cut-two .cake-cut-guide i { opacity: 1; animation: cut-line 360ms var(--spring) both; }
.cake-cut-guide::after {
  position: absolute;
  top: -42px;
  left: 50%;
  content: "🔪";
  opacity: 0;
  font-size: 57px;
  filter: drop-shadow(0 6px 2px rgba(69,61,47,.16));
  transform: translateX(-50%) rotate(-24deg);
}
.kitchen-scene.cut-one .cake-cut-guide::after,
.kitchen-scene.cut-two .cake-cut-guide::after { animation: knife-cut 430ms ease-out; }
.serving-slices {
  position: absolute;
  z-index: 19;
  right: 42px;
  bottom: 118px;
  display: flex;
  width: 350px;
  height: 190px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(.8);
  transition: opacity 280ms ease, transform 380ms var(--spring);
}
.kitchen-scene.is-sliced .serving-slices { opacity: 1; transform: none; }
.kitchen-scene.is-sliced .cake { opacity: .25; transform: translateX(-135px) scale(.62); }
.serve-slice {
  position: relative;
  display: block;
  width: 86px;
  height: 105px;
  border: 5px solid rgba(255,255,255,.62);
  border-radius: 13px 36px 36px 13px;
  background:
    linear-gradient(180deg, var(--frosting-color) 0 24%, transparent 25%),
    linear-gradient(180deg, var(--batter-color) 0 43%, var(--filling-color) 44% 55%, var(--batter-color) 56%);
  box-shadow: 0 9px 0 rgba(88,61,42,.12);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(var(--slice-turn, -8deg));
  transition: opacity 240ms ease, transform 350ms var(--spring);
}
.serve-slice:nth-child(2) { --slice-turn: 2deg; }
.serve-slice:nth-child(3) { --slice-turn: 10deg; }
.serve-slice.is-shared { opacity: 0; transform: translateY(-55px) scale(.4) rotate(var(--slice-turn)); }

.oven-scene { position: absolute; z-index: 30; top: 142px; right: 86px; display: none; width: 360px; height: 360px; border: 13px solid #fff2dc; border-radius: 42px; background: var(--oven); box-shadow: 0 16px 0 rgba(104,61,43,.17), inset 0 -15px rgba(173,91,59,.12); }
.oven-window { position: absolute; top: 82px; right: 42px; left: 42px; display: grid; height: 172px; place-items: center; overflow: hidden; border: 12px solid #76564b; border-radius: 25px; background: #493f3a; box-shadow: inset 0 0 40px rgba(255,175,67,.52); }
.oven-window span { font-size: 90px; animation: oven-rise 1.1s ease-in-out infinite; }
.oven-knobs { position: absolute; top: 25px; right: 30px; display: flex; gap: 18px; }
.oven-knobs i { width: 30px; height: 30px; border: 5px solid #fff7e7; border-radius: 50%; background: #846154; }
.oven-light { position: absolute; top: 24px; left: 34px; color: #ffe07c; font-size: 39px; animation: light-blink 700ms ease-in-out infinite alternate; }
.oven-scene p { position: absolute; right: 0; bottom: 22px; left: 0; margin: 0; color: #fff8e9; font-size: 14px; font-weight: 900; text-align: center; letter-spacing: .08em; }
.kitchen-scene.is-baking .oven-scene { display: block; animation: oven-arrive 420ms var(--spring); }
.kitchen-scene.is-baking .bowl-art,
.kitchen-scene.is-baking .cake { opacity: 0; }

.action-caption { position: absolute; z-index: 35; bottom: 25px; left: 50%; display: flex; min-width: 220px; padding: 9px 15px; align-items: center; justify-content: center; gap: 7px; border: 4px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(255,250,231,.95); box-shadow: 0 6px 0 rgba(97,70,51,.12); transform: translateX(-50%); font-size: 12px; }
.action-caption span { font-size: 23px; }
.confetti { position: absolute; z-index: 50; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: 48%; left: 50%; width: 12px; height: 25px; border-radius: 5px; background: var(--confetti-color); animation: confetti-burst 900ms ease-out forwards; }

.recipe-panel { display: grid; padding: clamp(28px, 4vw, 50px); align-items: center; background: radial-gradient(circle at 100% 0, #ffe9bd 0, transparent 37%), var(--paper); }
.step-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.eyebrow { margin: 0 0 7px; color: var(--berry-dark); font-size: 12px; font-weight: 900; letter-spacing: .13em; }
.step-heading h2, .finish-view h2 { margin: 0; font-family: KaiTi, STKaiti, serif; font-size: clamp(30px, 4vw, 43px); line-height: 1.1; }
.step-count { flex: none; padding: 7px 12px; border: 3px solid #f0dfc4; border-radius: 999px; background: #fff8e7; font-size: 13px; font-weight: 900; }
.step-count b { color: var(--berry-dark); font-size: 23px; }
.recipe-path { display: flex; margin: 20px 0 18px; justify-content: center; gap: 8px; }
.path-step { display: grid; width: 45px; height: 45px; place-items: center; border: 4px solid #fff; border-radius: 15px; background: #eee6da; box-shadow: 0 4px 0 rgba(82,68,51,.1); color: #8e8278; font-size: 22px; transition: transform 240ms var(--spring), background 240ms ease; }
.path-step.is-current { background: #f6d38c; transform: translateY(-4px) scale(1.09); }
.path-step.is-done { background: #a9d0ad; color: white; animation: path-pop 330ms var(--spring); }

.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.choice-card {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 12px 7px 9px;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.88);
  border-radius: 28px;
  background: color-mix(in srgb, var(--choice-color) 42%, white);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--choice-color) 58%, #786451), 0 13px 24px rgba(92,68,47,.11);
  cursor: pointer;
  transition: transform 160ms var(--spring), filter 160ms ease;
}
.choice-card::before { position: absolute; top: -35px; right: -30px; width: 100px; height: 100px; content: ""; border-radius: 50%; background: rgba(255,255,255,.3); }
.choice-card:hover { transform: translateY(-5px) rotate(-.7deg); filter: saturate(1.05); }
.choice-card:nth-child(even):hover { transform: translateY(-5px) rotate(.7deg); }
.choice-card:active { transform: translateY(3px) scale(.97); }
.choice-card.is-picked { animation: choice-pick 420ms var(--spring); }
.choice-card[disabled] { pointer-events: none; opacity: .68; }
.choice-icon { position: relative; display: block; height: 50px; margin-bottom: 6px; font-size: 47px; line-height: 1; filter: drop-shadow(0 6px 2px rgba(74,58,44,.13)); }
.choice-name { position: relative; display: block; font-size: 15px; font-weight: 900; }
.choice-dot { display: inline-block; width: 19px; height: 19px; margin-top: 7px; border: 3px solid #fff; border-radius: 50%; background: var(--choice-color); box-shadow: 0 2px 0 rgba(84,68,49,.11); }
.choice-hint { display: flex; min-height: 64px; margin-top: 19px; padding: 9px 13px; align-items: center; justify-content: center; gap: 10px; border: 3px dashed #dfcda9; border-radius: 20px; background: #fff8df; }
.choice-hint > span { font-size: 27px; }
.choice-hint p { margin: 0; }
.choice-hint b, .choice-hint small { display: block; }
.choice-hint b { font-size: 13px; }
.choice-hint small { margin-top: 2px; color: var(--soft-ink); font-size: 11px; font-weight: 800; }
.choice-hint.is-happy { border-style: solid; border-color: #9cc796; background: #eef8df; }

.finish-view { text-align: center; }
.serving-view { text-align: center; }
.serving-view h2 { margin: 0; font-family: KaiTi, STKaiti, serif; font-size: clamp(29px, 3.7vw, 41px); line-height: 1.12; }
.serving-copy { min-height: 48px; margin: 14px auto 18px; color: var(--soft-ink); font-size: 13px; font-weight: 800; line-height: 1.55; }
.cut-button { min-width: 150px; }
.animal-grid { display: grid; margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.animal-card {
  min-width: 0;
  min-height: 170px;
  padding: 12px 6px;
  border: 4px solid #fff;
  border-radius: 25px;
  background: #fff2d1;
  box-shadow: 0 7px 0 #d7b878;
  color: var(--ink);
  cursor: pointer;
  transition: transform 170ms var(--spring), background 170ms ease;
}
.animal-card:active { transform: translateY(4px); }
.animal-card:disabled { opacity: 1; cursor: default; background: #eaf4d8; box-shadow: 0 4px 0 #9abb83; }
.animal-face { display: block; font-size: 52px; filter: drop-shadow(0 5px 2px rgba(75,62,45,.12)); }
.animal-card b { display: block; margin: 5px 0 9px; }
.animal-plate { display: flex; min-height: 38px; padding: 4px; align-items: center; justify-content: center; gap: 4px; border: 3px solid #fff; border-radius: 999px; background: #dbe7dd; color: #73695f; font-size: 10px; font-weight: 900; }
.animal-card.is-served .animal-face { animation: animal-happy 480ms var(--spring); }
.animal-card.is-served .animal-plate { background: #fff0b3; color: #7b6744; }
.mini-cake-slice {
  display: inline-block;
  width: 23px;
  height: 25px;
  flex: none;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 4px 10px 10px 4px;
  background:
    linear-gradient(180deg, var(--frosting-color) 0 24%, transparent 25%),
    linear-gradient(180deg, var(--batter-color) 0 43%, var(--filling-color) 44% 56%, var(--batter-color) 57%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.sharing-complete { margin-top: 18px; }
.happy-friends { margin-bottom: 10px; font-size: 61px; letter-spacing: .05em; animation: friends-cheer 650ms var(--spring); }
.sharing-complete p { margin: 10px auto 20px; color: var(--soft-ink); font-weight: 800; }
.chef-stamp { display: grid; width: 118px; height: 118px; margin: 0 auto 18px; place-items: center; border: 7px double #fff; border-radius: 50%; background: #f5d178; box-shadow: 0 9px 0 rgba(93,71,50,.13); font-size: 61px; animation: stamp-in 500ms var(--spring); }
.finish-view > p:not(.eyebrow) { margin: 15px auto 22px; color: var(--soft-ink); font-weight: 800; line-height: 1.55; }
.recipe-summary { display: flex; min-height: 73px; margin: 21px 0; justify-content: center; gap: 7px; flex-wrap: wrap; }
.summary-token { display: grid; width: 59px; height: 59px; place-items: center; border: 4px solid #fff; border-radius: 19px; background: var(--token-color); box-shadow: 0 5px 0 rgba(79,67,49,.12); font-size: 32px; animation: topping-land 380ms var(--spring) both; }
.primary-button { min-height: 58px; padding: 0 29px; border: 4px solid rgba(255,255,255,.82); border-radius: 999px; background: var(--berry); box-shadow: 0 7px 0 var(--berry-dark); color: #fff; cursor: pointer; font-size: 17px; font-weight: 900; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--berry-dark); }

.parent-note { display: grid; max-width: 900px; margin: 22px auto 0; padding: 17px 22px; grid-template-columns: auto 1fr; gap: 14px; align-items: center; border: 2px solid rgba(101,78,58,.1); border-radius: 25px; background: rgba(255,251,235,.76); }
.parent-note > span { display: grid; width: 51px; height: 51px; place-items: center; border-radius: 50%; background: #f3d68d; font-size: 27px; }
.parent-note h2 { margin: 0 0 4px; font-size: 15px; }
.parent-note p { margin: 0; color: #776f64; font-size: 12px; font-weight: 700; line-height: 1.6; }

.round-button:focus-visible, .choice-card:focus-visible, .primary-button:focus-visible { outline: 5px solid rgba(75,111,174,.64); outline-offset: 4px; }

@keyframes whisk-mix { 0%,100% { transform: rotate(-12deg); } 50% { transform: translateX(-50px) rotate(24deg); } }
@keyframes batter-swirl { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.9) rotate(2deg); } }
@keyframes splash-pop { 0% { opacity: 0; transform: translateY(30px) scale(.4); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-42px) scale(1.1); } }
@keyframes ingredient-pour {
  0% { opacity: 0; transform: translateY(-45px) rotate(-18deg) scale(.65); }
  24% { opacity: 1; }
  72% { opacity: 1; transform: translateY(116px) rotate(14deg) scale(1); }
  100% { opacity: 0; transform: translateY(145px) rotate(20deg) scale(.35); }
}
@keyframes batter-fill { 0% { transform: scale(.72); opacity: .45; } 64% { transform: scale(1.05); } 100% { transform: none; opacity: 1; } }
@keyframes oven-arrive { from { opacity: 0; transform: translateY(35px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes oven-rise { 0%,100% { transform: translateY(8px) scale(.88); } 50% { transform: translateY(-5px) scale(1.03); } }
@keyframes light-blink { from { opacity: .55; transform: scale(.88); } to { opacity: 1; transform: scale(1.08); } }
@keyframes sponge-reveal {
  from { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(.75); }
  68% { opacity: 1; transform: translateX(-50%) translateY(4px) scale(1.03); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes filling-spread {
  from { opacity: .2; transform: translateX(-50%) scaleX(.08); }
  72% { opacity: 1; transform: translateX(-50%) scaleX(1.06); }
  to { opacity: 1; transform: translateX(-50%) scaleX(1); }
}
@keyframes frosting-drape {
  from { opacity: 0; transform: translateX(-50%) translateY(-38px) scale(.72); }
  68% { opacity: 1; transform: translateX(-50%) translateY(4px) scale(1.03); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes topping-land { from { opacity: 0; transform: translateY(-25px) scale(.45) rotate(-15deg); } to { opacity: 1; } }
@keyframes flame-flicker { from { transform: rotate(-4deg) scale(.9); } to { transform: rotate(5deg) scale(1.08); } }
@keyframes cake-present { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes confetti-burst { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(260deg); } }
@keyframes path-pop { 0% { transform: scale(.7); } 62% { transform: scale(1.16); } 100% { transform: none; } }
@keyframes choice-pick { 0% { transform: none; } 45% { transform: translateY(-11px) scale(1.07); } 100% { transform: translateY(3px) scale(.97); } }
@keyframes stamp-in { from { opacity: 0; transform: scale(.4) rotate(-18deg); } to { opacity: 1; transform: none; } }
@keyframes cut-line { from { opacity: 0; transform: translateY(-30px) rotate(24deg) scaleY(.2); } to { opacity: 1; } }
@keyframes knife-cut { 0% { opacity: 0; transform: translate(-80px, -35px) rotate(-36deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(35px, 95px) rotate(-8deg); } }
@keyframes animal-happy { 0%,100% { transform: none; } 50% { transform: translateY(-13px) rotate(6deg) scale(1.08); } }
@keyframes friends-cheer { from { opacity: 0; transform: scale(.55); } 70% { transform: scale(1.12); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .bakery { grid-template-columns: 1fr; }
  .kitchen-scene { min-height: 610px; }
  .recipe-panel { min-height: 570px; }
}

@media (max-width: 580px) {
  .game-shell { width: min(100% - 12px, 1190px); padding-top: 5px; }
  .game-header { min-height: 66px; grid-template-columns: 88px 1fr 88px; }
  .round-button { width: 42px; height: 42px; border-width: 3px; font-size: 20px; }
  .header-actions { gap: 4px; }
  .title-lockup p { display: none; }
  .title-lockup h1 { font-size: 25px; white-space: nowrap; }
  .bakery { border-width: 5px; border-radius: 28px; }
  .kitchen-scene { min-height: 515px; }
  .window { top: 25px; left: 20px; transform: scale(.73); transform-origin: top left; }
  .shelf { top: 23px; right: 7px; transform: scale(.73); transform-origin: top right; }
  .apron-friend { top: 153px; left: 19px; transform: scale(.72); transform-origin: top left; }
  .workbench { right: 8px; bottom: 58px; left: 8px; }
  .bowl-art { right: 4px; bottom: 77px; transform: scale(.76); transform-origin: bottom right; }
  .cake { right: 50%; bottom: 66px; transform: translateX(50%) scale(.76); transform-origin: bottom center; }
  .kitchen-scene[data-visual="cake"] .cake { transform: translateX(50%) scale(.76); }
  .kitchen-scene.is-complete .cake { animation: none; }
  .oven-scene { top: 101px; right: 50%; transform: translateX(50%) scale(.76); transform-origin: top center; }
  .kitchen-scene.is-baking .oven-scene { animation: none; }
  .action-caption { bottom: 13px; min-width: 200px; }
  .recipe-panel { min-height: 535px; padding: 29px 14px 36px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .choice-card { min-height: 128px; border-width: 4px; border-radius: 23px; }
  .choice-icon { font-size: 46px; }
  .kitchen-scene.is-sliced .cake { opacity: .2; transform: translateX(12%) scale(.55); }
  .serving-slices { right: 50%; bottom: 115px; transform: translate(50%, 20px) scale(.72); }
  .kitchen-scene.is-sliced .serving-slices { transform: translateX(50%) scale(.72); }
  .animal-card { min-height: 154px; padding-inline: 3px; }
  .animal-face { font-size: 44px; }
  .happy-friends { font-size: 48px; }
  .recipe-path { gap: 5px; }
  .path-step { width: 39px; height: 39px; border-radius: 13px; }
  .parent-note { margin-top: 13px; padding: 14px; grid-template-columns: 1fr; }
  .parent-note > span { display: none; }
}

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