@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root {
  --cream: #fff9ef;
  --paper: #fffdf8;
  --pink: #ef6f91;
  --pink-dark: #b83c62;
  --blush: #f8ced8;
  --jam: #7d2948;
  --ink: #4b2935;
  --gold: #d98735;
  --mint: #61b99b;
  --shadow: 0 16px 40px rgba(123, 58, 76, 0.16);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.9) 0 7%, transparent 24%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 34px),
    linear-gradient(145deg, #f5c1ce 0%, #ffe6d2 55%, #f6c5d3 100%);
  overscroll-behavior: none;
}

button { font: inherit; }

.app-shell {
  width: min(1120px, calc(100% - 28px));
  min-height: calc(100vh - 28px);
  margin: 14px auto;
  padding: clamp(18px, 3vw, 34px);
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 38px;
  background: rgba(255, 249, 239, .92);
  box-shadow: var(--shadow), inset 0 0 0 7px rgba(255,255,255,.45);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--pink-dark);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
}

h1 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: .94;
}

.how-button,
.primary-button,
.action-button {
  border: 0;
  border-radius: 999px;
  min-height: 52px;
  padding: 0 24px;
  color: white;
  font-weight: 800;
  background: var(--pink-dark);
  box-shadow: 0 7px 0 #7e2846;
  cursor: pointer;
  touch-action: manipulation;
}

.how-button:active,
.primary-button:active,
.action-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #7e2846; }

.how-card {
  margin: 18px 0 0;
  padding: 15px 20px;
  border: 2px dashed var(--pink);
  border-radius: 18px;
  background: #fff;
  font-weight: 700;
}

.step-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 24px 0 18px;
}

.step-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  border: 2px solid #efc5ce;
  border-radius: 18px;
  color: #76515e;
  font-weight: 800;
  background: rgba(255,255,255,.7);
}

.step-tab span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #dcb0bb;
}

.step-tab.is-active { border-color: var(--pink); color: var(--jam); background: #fff; }
.step-tab.is-active span, .step-tab.is-done span { background: var(--pink); }
.step-tab.is-done { border-color: #9ed7c4; }

.stage {
  min-height: 600px;
  overflow: hidden;
  border: 3px solid white;
  border-radius: 30px;
  background:
    linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)),
    repeating-linear-gradient(90deg, #efd3bd 0 90px, #e9c8ad 90px 92px);
  box-shadow: inset 0 0 0 2px rgba(157, 83, 65, .08);
}

.stage-layout {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(360px, 1.28fr);
  min-height: 600px;
}

.instruction-panel {
  padding: clamp(22px, 4vw, 44px);
  background: rgba(255,248,241,.87);
  border-right: 3px solid rgba(255,255,255,.9);
}

.step-kicker { margin: 0; color: var(--pink-dark); font-weight: 900; letter-spacing: .1em; }
.instruction-panel h2 { margin: 6px 0 8px; font: 800 clamp(1.8rem, 4vw, 3rem)/1 'Baloo 2', cursive; }
.instruction-panel p { margin: 0; font-size: 1.03rem; font-weight: 700; line-height: 1.45; }

.counter-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 8px 22px rgba(103,52,65,.09);
}
.counter-card strong { font: 800 1.5rem 'Baloo 2', cursive; color: var(--pink-dark); }
.counter-stack { display: grid; gap: 10px; margin-top: 22px; }
.counter-stack .counter-card { margin-top: 0; }
.evidence-counter { outline: 3px solid rgba(97, 185, 155, .24); }

.prediction-screen,
.result-screen {
  min-height: 600px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: clamp(28px, 6vw, 64px);
  text-align: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.86), transparent 26%),
    linear-gradient(145deg, rgba(255,240,243,.92), rgba(255,248,224,.94));
}
.prediction-screen h2,
.result-screen h2 { margin: 0; font: 800 clamp(2rem, 5vw, 3.5rem)/1 'Baloo 2', cursive; }
.prediction-sticker { padding: 8px 18px; border-radius: 999px; color: white; font-weight: 900; letter-spacing: .1em; background: var(--pink-dark); transform: rotate(-2deg); }
.prediction-quote { max-width: 720px; margin: 0; font: 800 clamp(1.2rem, 3vw, 1.8rem)/1.35 'Baloo 2', cursive; color: var(--jam); }
.because-line { max-width: 650px; margin: -8px 0 0; font-weight: 700; }
.difficulty-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(760px, 100%); border: 0; padding: 0; }
.difficulty-picker legend { width: 100%; margin-bottom: 10px; font-weight: 900; }
.difficulty-picker label { position: relative; cursor: pointer; }
.difficulty-picker input { position: absolute; opacity: 0; }
.difficulty-picker span { display: grid; min-height: 92px; align-content: center; gap: 3px; padding: 12px; border: 3px solid #efd1d8; border-radius: 20px; background: rgba(255,255,255,.8); }
.difficulty-picker input:checked + span { border-color: var(--pink); background: white; box-shadow: 0 8px 0 rgba(184,60,98,.15); }
.difficulty-picker strong { color: var(--pink-dark); font: 800 1.3rem 'Baloo 2', cursive; }
.difficulty-picker small { line-height: 1.25; }

.workbench {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 600px;
  padding: 28px;
}

.ingredient-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ingredient {
  width: 118px;
  min-height: 130px;
  border: 3px dashed var(--pink);
  border-radius: 24px;
  color: var(--ink);
  font-size: 3rem;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  touch-action: manipulation;
}
.ingredient small { display: block; font-size: .9rem; font-weight: 800; }
.ingredient.is-added { opacity: .35; transform: scale(.92); pointer-events: none; }

.bowl {
  position: relative;
  width: min(390px, 82vw);
  height: 190px;
  margin-top: 34px;
  overflow: hidden;
  border-radius: 26px 26px 48% 48%;
  border: 7px solid #d25e7d;
  background: linear-gradient(#f794af 0 18%, #df6f8e 18% 100%);
  box-shadow: 0 20px 0 rgba(112,58,66,.13);
}
.bowl-fill { position: absolute; inset: auto 8% 12% 8%; height: 0; border-radius: 50%; background: #f5dfb7; transition: height .35s; }
.bowl-fill.is-smooth { box-shadow: inset 0 -10px 20px rgba(195,137,64,.18); }
.dough-texture { position: absolute; inset: 26% 12% 17%; border-radius: 50%; opacity: calc(1 - var(--mix) * .7); background: radial-gradient(circle at 20% 30%, #c7975d 0 5px, transparent 6px), radial-gradient(circle at 72% 60%, #c7975d 0 7px, transparent 8px), radial-gradient(circle at 46% 72%, #c7975d 0 4px, transparent 5px); }
.action-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

.shape-dough,
.cooked-doughnut,
.decorate-doughnut {
  position: relative;
  width: min(360px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 18%, #efd09b 19% 47%, #d9ab6d 65%, #b97d42 100%);
  box-shadow: inset -18px -24px 30px rgba(133,75,31,.23), 0 24px 30px rgba(87,46,24,.2);
  touch-action: manipulation;
}
.shape-dough { background: radial-gradient(circle, transparent 0 11%, #f4dfb7 12% 47%, #dfc18d 70%, #cba56d 100%); transition: .22s ease; }
.shape-dough::after { content: 'PRESS'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; width: 86px; height: 86px; place-items: center; border: 4px dashed var(--pink); border-radius: 50%; color: var(--pink-dark); font-weight: 900; background: rgba(255,255,255,.65); }
.shape-dough.is-shaped::after { content: '✓'; width: 104px; height: 104px; border-style: solid; color: white; background: var(--mint); }
.touch-hint { text-align: center; font-weight: 900; color: var(--pink-dark); }
.fairness-note { margin-top: 22px; padding: 14px; border-radius: 16px; background: #fff7d8; line-height: 1.4; }
.cooked-doughnut { transition: filter .5s, transform .5s; filter: saturate(calc(.48 + var(--cook) * .52)) brightness(calc(1.2 - var(--cook) * .2)); }
.cooked-doughnut.is-cooked { filter: saturate(1) brightness(1); transform: rotate(2deg); }

.cook-dial { width: 132px; height: 132px; display: grid; place-items: center; border: 12px solid white; border-radius: 50%; background: var(--blush); color: var(--pink-dark); font: 800 2.2rem 'Baloo 2', cursive; box-shadow: var(--shadow); }

.decorate-layout { display: grid; grid-template-columns: 220px minmax(340px, 1fr) 230px; gap: 18px; width: 100%; align-items: center; }
.order-card, .topping-tray { padding: 18px; border: 3px solid white; border-radius: 24px; background: rgba(255,253,248,.94); box-shadow: var(--shadow); }
.order-card h3, .topping-tray h3 { margin: 0 0 12px; font: 800 1.35rem 'Baloo 2', cursive; text-align: center; }
.mini-doughnut { position: relative; width: 160px; aspect-ratio: 1; margin: auto; border-radius: 50%; background: radial-gradient(circle, transparent 0 18%, #f49cbb 19% 56%, #c9793e 57% 100%); }

.decorate-doughnut { margin: auto; background: radial-gradient(circle, transparent 0 18%, #f58caf 19% 55%, #c87939 56% 100%); }
.frosting-layer { position: absolute; inset: 17%; border-radius: 50%; opacity: calc(var(--scoops) / 5); background: radial-gradient(circle, transparent 0 26%, #ff91b7 27% 72%, #e85f8c 100%); transform: scale(calc(.35 + var(--scoops) * .13)); transition: .2s ease; }
.target-dot { position: absolute; width: 54px; height: 54px; margin: -27px; border: 3px dashed rgba(255,255,255,.9); border-radius: 50%; opacity: .75; }
.topping-tray.is-locked { opacity: .38; pointer-events: none; }

.topping-grid { display: grid; grid-template-columns: repeat(2, 72px); justify-content: center; gap: 10px; min-height: 318px; align-content: start; }
.topping {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 3px solid white;
  border-radius: 20px;
  font-size: 2.15rem;
  background: #ffe8ef;
  box-shadow: 0 7px 12px rgba(93,43,58,.14);
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 5;
}
.topping.is-on-doughnut { position: absolute; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: none; }
.topping.is-dragging { cursor: grabbing; z-index: 30; filter: drop-shadow(0 12px 10px rgba(78,37,47,.28)); }
.topping.is-mismatch { border: 5px solid #d83f5b; background: rgba(255,241,244,.86); animation: nudge .42s ease-in-out 2; }
@keyframes nudge { 50% { transform: translate(-50%, -50%) rotate(8deg) scale(1.08); } }

.mini-piece { position: absolute; display: grid; width: 28px; height: 28px; place-items: center; margin: -14px; font-size: 1.25rem; }
.done-wrap { margin-top: 18px; text-align: center; }
.primary-button[disabled] { color: #8b777d; background: #d8cdd0; box-shadow: 0 7px 0 #b8aaae; cursor: not-allowed; }
.status-line { min-height: 50px; margin: 14px 0 0; font-weight: 800; text-align: center; }
.scoop-button { margin-right: 10px; }

.finished-doughnut { font-size: clamp(5rem, 16vw, 9rem); filter: drop-shadow(0 18px 14px rgba(110,55,35,.2)); }
.evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(880px, 100%); }
.evidence-grid div { display: grid; gap: 2px; padding: 16px 10px; border: 3px solid white; border-radius: 20px; background: rgba(255,255,255,.76); box-shadow: 0 8px 20px rgba(105,50,65,.08); }
.evidence-grid span { font-size: .76rem; font-weight: 900; letter-spacing: .08em; color: var(--pink-dark); }
.evidence-grid strong { font: 800 1.4rem 'Baloo 2', cursive; }
.evidence-grid small { font-weight: 700; }
.result-proof { padding: 10px 18px; border-radius: 999px; color: #17624c; font-weight: 900; background: #d9f5eb; }

.celebration { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti { position: absolute; top: -20px; width: 12px; height: 22px; border-radius: 5px; animation: fall 1.8s ease-in forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }

/* iPad landscape: keep Step 4's order, doughnut, and full tray in one visible frame. */
@media (min-width: 841px) and (max-width: 1180px) {
  .stage-layout.step-3 { grid-template-columns: 250px minmax(0, 1fr); }
  .stage-layout.step-3 .instruction-panel { padding: 24px 20px; }
  .stage-layout.step-3 .workbench { min-width: 0; padding: 16px; }
  .stage-layout.step-3 .decorate-layout {
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 12px;
    align-items: start;
  }
  .stage-layout.step-3 .order-card {
    grid-column: 1;
    grid-row: 1;
    padding: 10px;
  }
  .stage-layout.step-3 .order-card h3 { margin-bottom: 6px; font-size: 1.05rem; }
  .stage-layout.step-3 .mini-doughnut { width: 116px; }
  .stage-layout.step-3 .decorate-layout > section:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }
  .stage-layout.step-3 .decorate-doughnut { width: min(330px, 100%); }
  .stage-layout.step-3 .topping-tray {
    grid-column: 1;
    grid-row: 2;
    padding: 10px;
  }
  .stage-layout.step-3 .topping-tray h3 { margin-bottom: 6px; font-size: 1.05rem; }
  .stage-layout.step-3 .topping-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-height: 0;
  }
  .stage-layout.step-3 .topping { width: 100%; height: 54px; font-size: 1.7rem; border-radius: 15px; }
  .stage-layout.step-3 .topping.is-on-doughnut { width: 54px; }
  .stage-layout.step-3 .done-wrap { margin-top: 10px; }
  .stage-layout.step-3 .status-line { min-height: 34px; margin-top: 8px; font-size: .88rem; }
}

@media (max-width: 840px) {
  .app-shell { width: min(100% - 16px, 760px); margin: 8px auto; min-height: calc(100vh - 16px); border-radius: 28px; }
  .step-tab { font-size: .82rem; }
  .stage-layout { grid-template-columns: 1fr; }
  .instruction-panel { border-right: 0; border-bottom: 3px solid white; padding: 20px 24px; }
  .workbench { min-height: 460px; padding: 20px; }
  .decorate-layout { grid-template-columns: 1fr 1.3fr; align-items: start; }
  .topping-tray { grid-column: 1 / -1; }
  .topping-grid { grid-template-columns: repeat(8, minmax(48px, 1fr)); min-height: 82px; }
  .topping { width: 100%; height: 62px; }
}

@media (max-width: 620px) {
  .topbar { align-items: flex-start; }
  .how-button { min-height: 46px; padding: 0 15px; }
  .step-strip { gap: 5px; }
  .step-tab { flex-direction: column; gap: 1px; min-height: 62px; padding: 4px; font-size: .7rem; }
  .step-tab span { width: 26px; height: 26px; }
  .decorate-layout { grid-template-columns: 1fr; }
  .order-card { display: grid; grid-template-columns: 100px 1fr; align-items: center; }
  .order-card h3 { margin: 0; }
  .mini-doughnut { width: 96px; }
  .decorate-doughnut { width: min(300px, 75vw); }
  .topping-grid { grid-template-columns: repeat(4, 1fr); min-height: 148px; }
  .stage, .stage-layout { min-height: 520px; }
  .difficulty-picker { grid-template-columns: 1fr; }
  .difficulty-picker span { min-height: 66px; }
  .evidence-grid { grid-template-columns: repeat(2, 1fr); }
  .scoop-button { margin: 0 0 12px; }
}

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