:root {
  color-scheme: light;
  --ink: #2f2924;
  --muted: #6f645b;
  --line: #33281f;
  --paper: #fff7e8;
  --mint: #4f9f8e;
  --gold: #d49135;
  --sky: #8fcfe3;
  --rose: #d87667;
  --cream: #fff3d7;
  --shadow: 0 18px 42px rgba(47, 41, 36, .2);
  --deep-shadow: 0 22px 0 rgba(47, 41, 36, .16), 0 34px 48px rgba(47, 41, 36, .26);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55) 0 70px, transparent 72px),
    linear-gradient(90deg, rgba(255,255,255,.16) 0 18px, transparent 18px 36px),
    linear-gradient(#8fd1e2 0 38%, #f2c987 38% 68%, #bd7653 68% 100%);
}

button {
  min-height: 42px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(#fffdf8, #f4dcb8);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line), inset 0 1px 0 rgba(255,255,255,.8);
}

button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
button:disabled { cursor: not-allowed; opacity: .45; }

.hidden { display: none; }
.primary { background: linear-gradient(#66bba8, #3c867a); color: white; }

.game-shell {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  overflow: hidden;
}

.status-bar,
.hint-board,
.counter-scene,
.message-log {
  border: 3px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.8), transparent 38%),
    rgba(255, 247, 232, .97);
  box-shadow: var(--deep-shadow);
}

.status-bar > button {
  min-width: 112px;
}

.eyebrow,
.customer-name,
.day-card span,
.counter-label {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1, h2 { margin-bottom: 0; letter-spacing: 0; }
h1 { font-size: clamp(1.45rem, 3vw, 2.3rem); }
h2 { font-size: 1.08rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(68px, 1fr));
  gap: 8px;
}

.stats div,
.day-card div {
  padding: 8px 10px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background: white;
  text-align: center;
}

.stats span,
.stats strong,
.day-card span,
.day-card strong { display: block; }

.stats span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stats strong,
.day-card strong { font-size: 1.15rem; }

.cafe-stage {
  display: grid;
  grid-template-columns: clamp(340px, 30vw, 430px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.hint-board {
  padding: 14px;
  background: #fff7e8;
  min-height: 0;
  overflow: hidden;
}

.panel-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#hintIntro {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 1.08rem;
  font-weight: 900;
}

#hintList {
  display: grid;
  gap: 9px;
  min-height: 188px;
  margin: 0;
  padding-left: 24px;
}

#hintList li {
  padding: 12px 14px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background: white;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.25;
}

#hintList li.done {
  color: white;
  background: var(--mint);
  border-color: var(--line);
}

.day-card {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.counter-scene {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.34) 0 150px, transparent 152px),
    linear-gradient(90deg, rgba(255,255,255,.12) 0 18px, transparent 18px 36px),
    linear-gradient(#f4d9aa 0 45%, #d79563 45% 72%, #895039 72% 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.1), inset 0 -80px 90px rgba(58,34,24,.22);
}

.back-wall {
  position: absolute;
  inset: 0 0 auto;
  height: 230px;
}

.menu-board {
  position: absolute;
  left: 36px;
  top: 28px;
  width: 210px;
  padding: 14px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 36%),
    #3d5b4c;
  color: #fff7e8;
}

.menu-board::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #fff7e8 0 26px, transparent 26px 38px);
  opacity: .65;
}

body[data-menu="1"] .menu-board {
  background: #5d83b3;
}

body[data-menu="2"] .menu-board {
  background: linear-gradient(135deg, #3d5b4c, #4f9f8e);
  box-shadow: 0 10px 0 rgba(47, 41, 36, .18);
}

.menu-board strong,
.menu-board span { display: block; }
.menu-board span { margin-top: 6px; font-weight: 800; }

.shelf {
  position: absolute;
  right: 42px;
  top: 54px;
  display: flex;
  align-items: end;
  gap: 14px;
  width: 260px;
  height: 72px;
  border-bottom: 8px solid #684a35;
  filter: drop-shadow(8px 12px 0 rgba(47,41,36,.12));
}

.shelf span {
  width: 48px;
  height: 58px;
  border: 3px solid var(--line);
  border-radius: 8px 8px 14px 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.5), transparent 36%),
    var(--gold);
}

.shelf span:nth-child(2) { height: 42px; background: #c96055; }
.shelf span:nth-child(3) { background: #6e9fbd; }

.speech-bubble {
  position: absolute;
  left: 50%;
  top: 26px;
  z-index: 3;
  width: min(460px, calc(100% - 44px));
  min-height: 76px;
  padding: 13px 15px;
  transform: translateX(-50%) perspective(620px) rotateX(-4deg) rotateY(2deg);
  border: 4px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,247,232,.98) 58%, #ead2ad);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.35;
  box-shadow:
    0 9px 0 #b78a58,
    0 22px 28px rgba(47, 41, 36, .28),
    inset 10px 10px 0 rgba(255,255,255,.55),
    inset -10px -10px 0 rgba(154, 103, 63, .13);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 24px;
  height: 24px;
  border-right: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
  background: #ead2ad;
  transform: rotate(45deg);
  box-shadow: 6px 6px 0 rgba(47, 41, 36, .18);
}

.speech-bubble p { margin: 0; }

.person {
  --skin: #f4bd8d;
  --hair: #35251e;
  position: absolute;
  left: 42%;
  top: calc(100% - 642px);
  z-index: 2;
  width: 150px;
  height: 128px;
  transform: translateX(-50%) perspective(480px) rotateX(4deg) rotateY(-3deg);
  filter: drop-shadow(14px 18px 0 rgba(47, 41, 36, .15));
}

.person-face {
  position: absolute;
  left: 25px;
  top: 28px;
  width: 100px;
  height: 106px;
  border: 3px solid var(--line);
  border-radius: 48% 48% 42% 42%;
  background: var(--skin);
  box-shadow:
    inset 10px 10px 0 rgba(255,255,255,.18),
    inset -14px -9px rgba(128, 71, 43, .18),
    0 16px 0 rgba(47, 41, 36, .16);
}

.person[data-face="square"] .person-face {
  border-radius: 38% 38% 34% 34%;
}

.person[data-face="heart"] .person-face {
  border-radius: 54% 54% 46% 46%;
  width: 106px;
}

.person[data-face="long"] .person-face {
  height: 116px;
  border-radius: 46% 46% 38% 38%;
}

.person-hair {
  position: absolute;
  left: 20px;
  top: 16px;
  z-index: 2;
  width: 110px;
  height: 52px;
  border: 3px solid var(--line);
  border-radius: 55px 55px 20px 20px;
  background: var(--hair);
  box-shadow: inset 8px 8px 0 rgba(255,255,255,.08);
}

.eye {
  position: absolute;
  top: 43px;
  width: 10px;
  height: 13px;
  border-radius: 50%;
  background: var(--line);
}

.eye.left { left: 29px; }
.eye.right { right: 29px; }

.nose {
  position: absolute;
  left: 47px;
  top: 58px;
  width: 8px;
  height: 14px;
  border-radius: 999px;
  background: rgba(112, 67, 45, .32);
}

.mouth {
  position: absolute;
  left: 35px;
  top: 80px;
  width: 30px;
  height: 12px;
  border-bottom: 4px solid var(--line);
  border-radius: 0 0 999px 999px;
}

.person[data-mouth="flat"] .mouth {
  height: 0;
  border-bottom-width: 4px;
  border-radius: 0;
}

.person[data-mouth="open"] .mouth {
  left: 40px;
  width: 22px;
  height: 18px;
  border: 4px solid var(--line);
  border-radius: 50%;
  background: #7d3b35;
}

.counter-top {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  height: min(462px, calc(100% - 210px));
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(430px, 620px);
  justify-content: center;
  gap: 22px;
  align-items: end;
  padding: 22px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 28%, rgba(56,33,22,.2) 86%),
    repeating-linear-gradient(90deg, #c98255 0 80px, #b66f48 80px 86px, #ab6542 86px 166px);
  box-shadow:
    inset 0 20px 0 rgba(255, 242, 220, .2),
    inset 0 -44px 0 rgba(69, 42, 28, .28),
    0 18px 0 #71432c,
    0 34px 26px rgba(47, 41, 36, .3);
  transform: perspective(1000px) rotateX(2deg);
}

.paper-ticket {
  position: relative;
  align-self: end;
  min-height: 270px;
  padding: 26px 22px 22px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(115, 86, 55, .13) 31px 33px),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,245,220,.92));
  box-shadow: 0 12px 0 rgba(60, 42, 28, .2), 0 24px 28px rgba(47,41,36,.2);
  transform: perspective(700px) rotateX(5deg) rotateZ(-2deg);
  z-index: 1;
}

.paper-ticket::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 8px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #d4a46e 0 8px, transparent 8px 16px);
}

.paper-ticket span {
  display: block;
  margin-bottom: 12px;
  color: #7a5136;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.paper-ticket strong {
  display: block;
  margin-bottom: 14px;
  color: var(--line);
  font-size: 1.24rem;
  line-height: 1.05;
}

.paper-ticket p {
  margin: 0;
  color: #433125;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.35;
}

.counter-top::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}

.counter-top::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -34px;
  height: 38px;
  border: 3px solid var(--line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(#74452e, #4d2d20);
}

.counter-right {
  display: grid;
  justify-items: center;
  gap: 10px;
  align-self: stretch;
  align-content: end;
  padding-bottom: 28px;
}

.counter-label { color: #fff7e8; }

.preview-tray {
  position: relative;
  display: grid;
  grid-template-columns: 150px 116px;
  align-items: end;
  gap: 16px;
  padding: 12px 0 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.drink-3d {
  --base: transparent;
  --milk: transparent;
  --flavor: transparent;
  --top: transparent;
  position: relative;
  width: 148px;
  height: 198px;
  border: 4px solid rgba(51, 40, 31, .85);
  border-radius: 18px 18px 34px 34px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.18) 35%, rgba(0,0,0,.09) 74%, rgba(255,255,255,.18)),
    rgba(255,255,255,.22);
  box-shadow:
    0 13px 0 rgba(255,255,255,.2),
    24px 28px 20px rgba(47, 41, 36, .32),
    inset -24px 0 0 rgba(0,0,0,.12),
    inset 18px 0 0 rgba(255,255,255,.28);
  transform: perspective(560px) rotateX(-5deg) rotateY(-18deg) translateZ(22px);
}

.drink-3d::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -18px;
  height: 28px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(47, 41, 36, .28);
  filter: blur(2px);
}

.drink-3d::before {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: -20px;
  height: 42px;
  border: 4px solid rgba(51, 40, 31, .82);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, var(--top) 0 50%, rgba(255,255,255,.46) 51% 64%, rgba(255,255,255,.16) 65%);
  box-shadow:
    0 8px 0 rgba(51, 40, 31, .18),
    inset -18px -8px rgba(0,0,0,.12),
    inset 18px 8px rgba(255,255,255,.32);
}

.drink-3d.empty::before { background: #e7d7c2; }

.drink-3d .cup-rim {
  position: absolute;
  left: -9px;
  right: -9px;
  top: -5px;
  z-index: 4;
  height: 22px;
  border: 4px solid rgba(51, 40, 31, .72);
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.46);
}

.cup-straw {
  position: absolute;
  left: 76px;
  top: -64px;
  z-index: 6;
  width: 12px;
  height: 92px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(90deg, #223c35, #5aa897, #223c35);
  transform: rotate(9deg);
  transform-origin: bottom;
  opacity: 0;
}

.drink-3d:not(.empty) .cup-straw {
  opacity: 1;
}

.drink-liquid,
.drink-milk,
.drink-flavor,
.drink-top,
.cup-shine {
  position: absolute;
  left: 10px;
  right: 10px;
  border-radius: 8px 8px 24px 24px;
}

.drink-liquid {
  bottom: 12px;
  height: 128px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 26%),
    linear-gradient(var(--base), var(--base));
  box-shadow: inset -14px 0 0 rgba(0,0,0,.12);
}

.drink-milk {
  bottom: 14px;
  height: 70px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(var(--milk), var(--milk));
  opacity: .9;
}

.drink-flavor {
  bottom: 58px;
  height: 16px;
  border-radius: 999px;
  background: var(--flavor);
  box-shadow: 0 4px 0 rgba(51, 40, 31, .14);
}

.drink-top {
  left: 15px;
  right: 15px;
  top: -13px;
  z-index: 5;
  height: 38px;
  border: 3px solid rgba(51, 40, 31, .55);
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at center, var(--top) 0 8px, rgba(139,83,49,.28) 9px 11px, var(--top) 12px 18px);
}

.cup-shine {
  top: 24px;
  bottom: 24px;
  left: 18px;
  right: auto;
  width: 24px;
  border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.54), rgba(255,255,255,.08));
  z-index: 7;
}

.food-3d {
  --food: transparent;
  position: relative;
  width: 112px;
  height: 62px;
  border: 4px solid var(--line);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 42% 30%, rgba(255,255,255,.7) 0 26%, transparent 27%),
    radial-gradient(ellipse at center, #fff6df 0 53%, #d9bd8e 54% 69%, #8f6946 70%);
  box-shadow:
    0 12px 0 #8f6946,
    14px 24px 20px rgba(47, 41, 36, .24),
    inset -12px -7px 0 rgba(98, 62, 37, .13);
  transform: perspective(460px) rotateX(27deg) rotateY(9deg) translateZ(10px);
  margin-bottom: 18px;
}

.food-3d span,
.food-3d::before,
.food-3d::after {
  content: "";
  position: absolute;
  display: block;
}

.food-3d span {
  left: 30px;
  top: 10px;
  width: 48px;
  height: 32px;
  border: 3px solid var(--line);
  background: var(--food);
  box-shadow:
    8px 10px 0 rgba(47, 41, 36, .16),
    inset -7px -5px 0 rgba(68, 38, 22, .13),
    inset 7px 5px 0 rgba(255,255,255,.18);
}

.food-3d.empty span {
  display: none;
}

.food-3d.muffin span {
  border-radius: 50% 50% 34% 34%;
  background: radial-gradient(circle at 12px 7px, #6e3d2b 0 4px, transparent 5px), var(--food);
}

.food-3d.croissant span {
  width: 68px;
  left: 18px;
  border-radius: 50% 50% 20% 20%;
  background:
    repeating-radial-gradient(ellipse at center, #f0c166 0 8px, #b96d2f 9px 11px, var(--food) 12px 18px);
}

.food-3d.cookie span {
  border-radius: 50%;
  background:
    radial-gradient(circle at 12px 8px, #4f2c22 0 4px, transparent 5px),
    radial-gradient(circle at 27px 17px, #4f2c22 0 4px, transparent 5px),
    var(--food);
}

.food-3d.sandwich span {
  width: 66px;
  left: 18px;
  border-radius: 8px;
  background:
    linear-gradient(#f1dca3 0 40%, #6caf67 41% 52%, #c55a50 53% 64%, var(--food) 65%);
}

.food-3d.cake span {
  width: 62px;
  left: 20px;
  border-radius: 8px 20px 10px 8px;
  background:
    linear-gradient(#f7e3c6 0 22%, var(--food) 23% 58%, #fff7ef 59% 70%, var(--food) 71%);
}

.food-3d.bagel span {
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff6df 0 8px, transparent 9px),
    var(--food);
}

.tablet {
  position: relative;
  align-self: end;
  width: min(100%, 560px);
  aspect-ratio: 1.16 / 1;
  min-height: 0;
  padding: 12px;
  border: 5px solid #201915;
  border-radius: 18px;
  background: #24201d;
  box-shadow: 0 12px 18px rgba(45, 32, 24, .25);
  transform: none;
}

.tablet::before {
  content: none;
}

.tablet-camera {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 44px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #12100e;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08);
}

.tablet-screen {
  height: 100%;
  min-height: 0;
  padding: 12px;
  border-radius: 12px;
  background: #f7efe2;
  border: 2px solid #0f0d0b;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  transform: none;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
}

.tablet-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  padding: 8px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background: white;
  box-shadow: none;
}

#ticketText { margin: 4px 0 0; }

.patience-meter {
  position: relative;
  height: 28px;
  margin: 10px 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff0dc;
}

.patience-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, #37c960, #8bed74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
  transition: width .24s ease, background .24s ease;
}

.patience-meter span {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--line);
  font-size: .84rem;
  font-weight: 950;
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

.steps button {
  min-height: 48px;
  border-width: 2px;
  background: #fffaf1;
  box-shadow: none;
  transform: none;
}

.steps button.active {
  background: #f0c86c;
  transform: none;
}
.steps button.done { border-color: #2b6f62; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  align-content: start;
  overflow: hidden;
}

.order-note {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 18px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), transparent 44%),
    linear-gradient(#fffdf7, #f8e7c9);
  line-height: 1.35;
  text-align: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 8px 0 rgba(214,179,132,.2);
}

.ipad-mini {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 106px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), transparent 42%), linear-gradient(#fffaf1, #ead2aa);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 0 -5px 0 rgba(134,91,55,.08), 0 6px 0 rgba(51,40,31,.12);
}

.ipad-mini.wide {
  grid-column: 1 / -1;
}

.ipad-mini span {
  color: #7a5136;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ipad-mini strong {
  color: var(--line);
  font-size: 1.15rem;
  line-height: 1.05;
}

.ipad-mini em {
  color: #5d4736;
  font-size: .86rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.order-note.confirmed {
  border-color: #2b6f62;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), transparent 44%),
    linear-gradient(#f3fff7, #dff4ea);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 8px 0 rgba(43,111,98,.18);
}

.order-note span,
.order-note em {
  color: var(--muted);
  font-size: .9rem;
  font-style: normal;
  font-weight: 900;
}

.order-note strong {
  font-size: 1.35rem;
  font-weight: 950;
}

.tool.selected {
  background: linear-gradient(#f3fff7, #dff4ea);
  color: var(--line);
  outline: 4px solid rgba(43,111,98,.35);
}

.tool.made {
  border-color: #2b6f62;
  background: linear-gradient(#eefbf4, #d6efe4);
}

.tool.made.selected {
  background: #e8f6ef;
  color: var(--line);
}

.tool {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 6px 8px;
  border-width: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), transparent 38%),
    #fffaf1;
  box-shadow: 0 5px 0 rgba(51,40,31,.24), inset 0 -4px 0 rgba(214,179,132,.18);
  transform: none;
  text-align: left;
}

.tool:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.04);
}

.tool-label {
  overflow-wrap: anywhere;
  font-size: .82rem;
  font-weight: 950;
}

.tool-icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 32px;
}

.tool[data-tool="pour"] .tool-icon {
  transform: rotate(-12deg);
}

.tool[data-tool="pour"] .tool-icon i {
  position: absolute;
  left: 9px;
  top: 5px;
  width: 25px;
  height: 28px;
  border: 3px solid var(--line);
  border-radius: 9px 9px 14px 14px;
  background: linear-gradient(to top, var(--tool-color) 0 58%, rgba(255,255,255,.74) 59% 100%);
  box-shadow: inset 5px 0 0 rgba(255,255,255,.28), 0 5px 0 rgba(51,40,31,.14);
}

.tool[data-tool="pour"] .tool-icon b {
  position: absolute;
  right: 0;
  top: 12px;
  width: 15px;
  height: 8px;
  border: 3px solid var(--line);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: #fff4dd;
}

.tool[data-tool="spray"] .tool-icon i {
  position: absolute;
  left: 13px;
  top: 8px;
  width: 20px;
  height: 27px;
  border: 3px solid var(--line);
  border-radius: 8px 8px 13px 13px;
  background: linear-gradient(90deg, rgba(255,255,255,.42), transparent 34%), linear-gradient(to top, var(--tool-color) 0 54%, #f3dfb5 55% 100%);
  box-shadow: 0 5px 0 rgba(51,40,31,.14);
}

.tool[data-tool="spray"] .tool-icon b {
  position: absolute;
  left: 10px;
  top: 1px;
  width: 27px;
  height: 11px;
  border: 3px solid var(--line);
  border-radius: 8px 8px 3px 3px;
  background: #d7b17d;
}

.tool[data-tool="spray"] .tool-icon::after {
  position: absolute;
  right: 0;
  top: 3px;
  width: 18px;
  height: 10px;
  border-top: 3px solid var(--line);
  background: radial-gradient(circle, var(--tool-color) 0 3px, transparent 4px);
  content: "";
}

.tool[data-tool="ice"] .tool-icon i {
  position: absolute;
  left: 4px;
  top: 23px;
  width: 35px;
  height: 9px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: #c6925c;
  transform: rotate(-22deg);
}

.tool[data-tool="ice"] .tool-icon b,
.tool[data-tool="ice"] .tool-icon::before,
.tool[data-tool="ice"] .tool-icon::after {
  position: absolute;
  width: 12px;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 5px;
  background: var(--tool-color);
  box-shadow: 0 3px 0 rgba(47,41,36,.18), inset 3px 3px 0 rgba(255,255,255,.45);
  content: "";
}

.tool[data-tool="ice"] .tool-icon b {
  left: 5px;
  top: 7px;
  transform: rotate(12deg);
}

.tool[data-tool="ice"] .tool-icon::before {
  left: 19px;
  top: 4px;
  transform: rotate(-10deg);
}

.tool[data-tool="ice"] .tool-icon::after {
  left: 24px;
  top: 16px;
  transform: rotate(18deg);
}

.tool[data-tool="crumb"] .tool-icon {
  width: 42px;
  height: 38px;
  margin: -3px 0;
}

.tool[data-tool="crumb"] .tool-icon i,
.tool[data-tool="crumb"] .tool-icon b,
.tool[data-tool="crumb"] .tool-icon::before,
.tool[data-tool="crumb"] .tool-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.tool[data-tool="crumb"] .tool-icon i {
  left: 8px;
  top: 7px;
  width: 20px;
  height: 27px;
  border: 3px solid var(--line);
  border-radius: 7px 7px 12px 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.48), transparent 36%),
    linear-gradient(to top, var(--tool-color) 0 62%, #fff1cf 63% 100%);
  box-shadow: inset -4px -4px 0 rgba(51,40,31,.08), 0 5px 0 rgba(51,40,31,.14);
  transform: rotate(-10deg);
}

.tool[data-tool="crumb"] .tool-icon b {
  left: 6px;
  top: 3px;
  width: 24px;
  height: 9px;
  border: 3px solid var(--line);
  border-radius: 6px 6px 3px 3px;
  background: #d9b77f;
  transform: rotate(-10deg);
}

.tool[data-tool="crumb"] .tool-icon::before {
  right: 0;
  top: 9px;
  width: 18px;
  height: 22px;
  background:
    radial-gradient(circle at 20% 24%, var(--tool-color) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 16%, #fff0c9 0 2px, transparent 3px),
    radial-gradient(circle at 42% 58%, var(--tool-color) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 70%, #6b3e2a 0 2px, transparent 3px);
}

.tool[data-tool="crumb"] .tool-icon::after {
  right: 3px;
  bottom: 3px;
  width: 26px;
  height: 5px;
  border-radius: 999px;
  background: rgba(51,40,31,.22);
}

.tool[data-option="cinnamon"] .tool-icon i {
  background:
    linear-gradient(90deg, rgba(255,255,255,.42), transparent 36%),
    repeating-linear-gradient(0deg, #a75d34 0 5px, #7e3f25 5px 7px);
}

.tool[data-option="cinnamon"] .tool-icon::before {
  background:
    radial-gradient(circle at 20% 24%, #8c4a28 0 2px, transparent 3px),
    radial-gradient(circle at 62% 16%, #b96a3d 0 2px, transparent 3px),
    radial-gradient(circle at 42% 58%, #7e3f25 0 2px, transparent 3px),
    radial-gradient(circle at 82% 70%, #a75d34 0 2px, transparent 3px);
}

.tool[data-option="sprinkles"] .tool-icon i {
  background:
    linear-gradient(90deg, rgba(255,255,255,.5), transparent 36%),
    linear-gradient(to top, #fff7df 0 34%, #f48fb1 35% 100%);
}

.tool[data-option="sprinkles"] .tool-icon::before {
  width: 21px;
  background:
    linear-gradient(28deg, transparent 0 18%, #f04f87 19% 31%, transparent 32% 100%),
    linear-gradient(-30deg, transparent 0 28%, #57b9dc 29% 41%, transparent 42% 100%),
    linear-gradient(86deg, transparent 0 50%, #f6d650 51% 62%, transparent 63% 100%),
    linear-gradient(140deg, transparent 0 64%, #76c96e 65% 77%, transparent 78% 100%);
}

.tool[data-option="cookie"] .tool-icon i {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 32%, #55311f 0 3px, transparent 4px),
    radial-gradient(circle at 62% 56%, #55311f 0 3px, transparent 4px),
    radial-gradient(circle at 48% 72%, #744329 0 2px, transparent 3px),
    linear-gradient(135deg, #d8a05c, #9d6238);
}

.tool[data-option="cookie"] .tool-icon b {
  left: 2px;
  top: 25px;
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: #8c5a36;
  transform: rotate(-19deg);
}

.tool[data-option="cookie"] .tool-icon::before {
  background:
    radial-gradient(circle at 18% 30%, #6b3e2a 0 3px, transparent 4px),
    radial-gradient(circle at 58% 18%, #b57a45 0 3px, transparent 4px),
    radial-gradient(circle at 42% 62%, #6b3e2a 0 2px, transparent 3px),
    radial-gradient(circle at 82% 70%, #d8a05c 0 3px, transparent 4px);
}

.tool[data-option="none"] .tool-icon {
  opacity: .48;
}

.tool[data-tool="none"] .tool-icon {
  border: 3px solid var(--line);
  border-radius: 50%;
  background: #fff4dd;
}

.tool[data-tool="none"] .tool-icon::before {
  position: absolute;
  left: 8px;
  top: 17px;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: #b84636;
  transform: rotate(-35deg);
  content: "";
}

.tablet-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 0;
}

.tablet-actions button {
  box-shadow: 0 4px 0 var(--line);
}

.message-log {
  display: grid;
  gap: 3px;
  min-height: 54px;
  max-height: 86px;
  overflow: hidden;
  padding: 10px 12px;
  background: #2f2924;
  color: #fff7e8;
  font-weight: 900;
}

.message-log p { margin: 0; }

.teleport-flash {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 8%, rgba(255,221,132,.86) 9% 20%, rgba(90,186,160,.46) 21% 34%, rgba(47,41,36,.58) 62%, transparent 78%);
  backdrop-filter: blur(0);
}

.teleport-flash::before,
.teleport-flash::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18vmin;
  aspect-ratio: 1;
  border: 8px solid rgba(255,255,255,.82);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgba(240,200,108,.42),
    0 0 0 42px rgba(43,111,98,.28),
    0 0 70px rgba(255,255,255,.8);
  transform: translate(-50%, -50%) scale(.2);
}

.teleport-flash::after {
  border-color: rgba(255,247,232,.72);
  box-shadow:
    0 0 0 26px rgba(255,255,255,.22),
    0 0 0 70px rgba(240,200,108,.2),
    0 0 90px rgba(90,186,160,.55);
}

.teleport-flash span {
  position: absolute;
  width: 24vw;
  height: 160vh;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.9), rgba(240,200,108,.65), transparent);
  transform: rotate(36deg) translateY(-120%);
  filter: blur(.5px);
}

.teleport-flash span:nth-child(2) {
  width: 14vw;
  transform: rotate(-42deg) translateY(120%);
  background: linear-gradient(180deg, transparent, rgba(90,186,160,.74), rgba(255,255,255,.85), transparent);
}

.teleport-flash span:nth-child(3) {
  width: 8vw;
  transform: rotate(82deg) translateY(-130%);
}

.teleport-flash span:nth-child(4) {
  width: 18vw;
  height: 130vh;
  transform: rotate(12deg) translateY(130%);
  background: linear-gradient(180deg, transparent, rgba(255,247,232,.82), rgba(255,180,100,.45), transparent);
}

.teleport-flash span:nth-child(5) {
  width: 10vw;
  height: 150vh;
  transform: rotate(-74deg) translateY(-130%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.9), rgba(90,186,160,.55), transparent);
}

body.teleporting .teleport-flash {
  animation: teleportPulse .88s ease both;
  backdrop-filter: blur(4px);
}

body.teleporting .teleport-flash span {
  animation: teleportStreak .82s cubic-bezier(.2,.8,.2,1) both;
}

body.teleporting .teleport-flash::before {
  animation: teleportRing .82s cubic-bezier(.16,.9,.22,1) both;
}

body.teleporting .teleport-flash::after {
  animation: teleportRing .82s .1s cubic-bezier(.16,.9,.22,1) both reverse;
}

body.teleporting .teleport-flash span:nth-child(2) {
  animation-delay: .06s;
}

body.teleporting .teleport-flash span:nth-child(3) {
  animation-delay: .12s;
}

body.teleporting .teleport-flash span:nth-child(4) {
  animation-delay: .03s;
}

body.teleporting .teleport-flash span:nth-child(5) {
  animation-delay: .15s;
}

body.teleporting .cafe-stage {
  animation: counterWarp .44s ease both;
}

body.teleporting .prep-stage:not(.hidden) {
  animation: prepWarp .48s ease both;
}

/* Cooler swipe teleport */
.teleport-flash {
  background:
    linear-gradient(105deg, transparent 0 22%, rgba(255,247,232,.78) 23% 30%, rgba(90,186,160,.9) 31% 42%, rgba(240,200,108,.96) 43% 53%, rgba(255,247,232,.82) 54% 61%, transparent 62% 100%);
}

.teleport-flash::before {
  left: auto;
  right: -34vw;
  top: 0;
  width: 42vw;
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(105deg, transparent 0 20%, rgba(255,255,255,.95) 21% 42%, rgba(79,159,142,.88) 43% 66%, rgba(255,214,94,.88) 67% 100%);
  box-shadow: -26px 0 40px rgba(255,255,255,.62), -80px 0 80px rgba(79,159,142,.25);
  transform: skewX(-15deg);
}

.teleport-flash::after {
  left: -40vw;
  top: 0;
  width: 38vw;
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,.88) 0 10px, rgba(240,200,108,.7) 10px 18px, transparent 18px 36px);
  box-shadow: 50px 0 60px rgba(255,247,232,.35);
  transform: skewX(-15deg);
}

.teleport-flash span {
  width: 48vw;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(240,200,108,.85), transparent);
  transform: rotate(-10deg) translateX(-130vw);
  filter: blur(.3px);
}

.teleport-flash span:nth-child(2) {
  top: 28%;
  width: 62vw;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(90,186,160,.9), rgba(255,255,255,.95), transparent);
  transform: rotate(-10deg) translateX(-130vw);
}

.teleport-flash span:nth-child(3) {
  top: 43%;
  width: 36vw;
  height: 5px;
  transform: rotate(-10deg) translateX(-130vw);
}

.teleport-flash span:nth-child(4) {
  top: 58%;
  width: 72vw;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(255,247,232,.95), rgba(255,180,100,.7), transparent);
  transform: rotate(-10deg) translateX(-130vw);
}

.teleport-flash span:nth-child(5) {
  top: 72%;
  width: 42vw;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(90,186,160,.68), transparent);
  transform: rotate(-10deg) translateX(-130vw);
}

body.teleporting .teleport-flash {
  animation: teleportSwipeOverlay 1.04s cubic-bezier(.18,.86,.2,1) both;
  backdrop-filter: blur(3px) saturate(1.35);
}

body.teleporting .teleport-flash::before {
  animation: teleportSwipePanel 1.02s cubic-bezier(.12,.82,.16,1) both;
}

body.teleporting .teleport-flash::after {
  animation: teleportSwipePanelBack 1.02s cubic-bezier(.12,.82,.16,1) both;
}

body.teleporting .teleport-flash span {
  animation: teleportSpeedLine 1s cubic-bezier(.12,.82,.16,1) both;
}

body.teleporting .cafe-stage {
  animation: counterSwipeAway .5s cubic-bezier(.2,.8,.2,1) both;
}

body.teleporting .prep-stage:not(.hidden) {
  animation: prepSwipeIn .58s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes teleportSwipeOverlay {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  18% { opacity: 1; clip-path: inset(0 46% 0 0); }
  52% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes teleportSwipePanel {
  0% { transform: translateX(-135vw) skewX(-15deg); }
  58% { transform: translateX(-22vw) skewX(-15deg); }
  100% { transform: translateX(76vw) skewX(-15deg); }
}

@keyframes teleportSwipePanelBack {
  0% { transform: translateX(-30vw) skewX(-15deg); opacity: 0; }
  28% { opacity: .9; }
  100% { transform: translateX(145vw) skewX(-15deg); opacity: 0; }
}

@keyframes teleportSpeedLine {
  0% { opacity: 0; transform: rotate(-10deg) translateX(-135vw); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-10deg) translateX(135vw); }
}

@keyframes counterSwipeAway {
  0% { transform: translateX(0) scale(1); filter: blur(0); }
  100% { transform: translateX(-9vw) scale(.98); filter: blur(4px) saturate(1.28); }
}

@keyframes prepSwipeIn {
  0% { transform: translateX(9vw) scale(1.02); filter: blur(5px) saturate(1.32); }
  100% { transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes teleportPulse {
  0% { opacity: 0; transform: scale(.88) rotate(-1deg); }
  24% { opacity: 1; transform: scale(1.08) rotate(.5deg); }
  55% { opacity: 1; transform: scale(1.01) rotate(0); }
  100% { opacity: 0; transform: scale(1.24) rotate(1deg); }
}

@keyframes teleportStreak {
  0% { opacity: 0; translate: -80vw 18vh; scale: .8 1; }
  20% { opacity: 1; }
  100% { opacity: 0; translate: 82vw -16vh; scale: 1.2 1; }
}

@keyframes teleportRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(0deg); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7.6) rotate(180deg); }
}

@keyframes counterWarp {
  0% { transform: scale(1); filter: blur(0); }
  100% { transform: scale(.94) translateY(18px); filter: blur(5px) saturate(1.35); }
}

@keyframes prepWarp {
  0% { transform: scale(1.06) translateY(-20px); filter: blur(5px) saturate(1.35); }
  100% { transform: scale(1) translateY(0); filter: blur(0); }
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(47, 41, 36, .72);
}

.tutorial-overlay.hidden {
  display: none;
}

.tutorial-card {
  width: min(680px, 100%);
  min-height: 300px;
  padding: 34px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(#fffaf1, #ead3ad);
  box-shadow:
    0 12px 0 #7d5133,
    0 28px 42px rgba(0,0,0,.3),
    inset 10px 10px 0 rgba(255,255,255,.35);
}

.tutorial-card h2 {
  margin: 6px 0 10px;
  font-size: 1.9rem;
}

.tutorial-card p:not(.eyebrow) {
  color: var(--ink);
  font-size: 1.22rem;
  font-weight: 850;
  line-height: 1.45;
}

.tutorial-card button {
  width: 100%;
  margin-top: 12px;
}

.fullscreen-overlay {
  position: fixed;
  inset: 96px 18px auto auto;
  z-index: 80;
  display: grid;
  place-items: end;
  width: min(320px, calc(100vw - 36px));
  padding: 0;
  background: transparent;
  color: #fff7e8;
  text-align: center;
  pointer-events: none;
}

.fullscreen-overlay.hidden {
  display: none;
}

.fullscreen-card {
  width: 100%;
  padding: 18px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(#3d3027, #211a16);
  box-shadow: 0 22px 44px rgba(0,0,0,.34);
  pointer-events: none;
}

.fullscreen-card h2 {
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.fullscreen-card p {
  font-size: .94rem;
  font-weight: 850;
  line-height: 1.4;
}

.fullscreen-card button {
  width: 100%;
  margin-top: 12px;
  pointer-events: auto;
}

.cafe-view {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.cafe-view.hidden,
.cafe-stage.hidden,
.prep-stage.hidden {
  display: none;
}

.prep-stage {
  display: grid;
  grid-template-columns: clamp(340px, 30vw, 430px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.prep-table {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(120deg, rgba(255,255,255,.2), transparent 34%),
    repeating-linear-gradient(90deg, #d2905f 0 84px, #ad6542 84px 90px);
  box-shadow: var(--deep-shadow), inset 0 -38px 0 rgba(69, 42, 28, .22), inset 0 0 0 6px rgba(255,255,255,.08);
}

.prep-order-paper {
  justify-self: start;
  width: min(640px, 100%);
  padding: 10px 14px 9px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(115,86,55,.13) 30px 32px),
    linear-gradient(135deg, rgba(255,255,255,.96), #fff0cf);
  box-shadow: 10px 12px 0 rgba(51,40,31,.16), inset 0 1px 0 rgba(255,255,255,.82);
  transform: rotate(-1deg);
}

.prep-order-paper span {
  display: block;
  margin-bottom: 4px;
  color: #7a5136;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.prep-order-paper strong {
  display: block;
  margin-bottom: 4px;
  color: var(--line);
  font-size: 1.02rem;
  line-height: 1.05;
}

.prep-order-paper p {
  margin: 0;
  color: #433125;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.22;
}

.prep-ticket {
  justify-self: center;
  width: min(520px, 100%);
  padding: 6px 10px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), transparent 45%),
    #fffaf1;
  text-align: center;
  box-shadow: 0 7px 0 rgba(51,40,31,.2);
}

.prep-workspace {
  display: grid;
  grid-template-columns: minmax(640px, 1.8fr) minmax(220px, .46fr);
  align-items: start;
  gap: 22px;
  min-height: 0;
  overflow: visible;
  padding: 2px 4px 10px;
  overscroll-behavior: contain;
}

.prep-tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 14px;
  overflow: visible;
  align-content: start;
  padding-right: 0;
  padding-bottom: 18px;
}

.ingredient-group {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.76), transparent 38%),
    #fff7e8;
  box-shadow: inset 0 -6px 0 rgba(214,179,132,.16);
}

.ingredient-group.active {
  border-color: #2b6f62;
  background:
    linear-gradient(135deg, rgba(255,255,255,.76), transparent 38%),
    #f3fff7;
  box-shadow: inset 0 -6px 0 rgba(43,111,98,.14), 0 7px 0 rgba(43,111,98,.12);
}

.ingredient-group h3 {
  margin: 0;
  font-size: .78rem;
}

#prepList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#prepList li {
  padding: 12px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background: #fffaf1;
  font-size: 1.08rem;
  font-weight: 950;
}

#prepList li.done,
.simple-cup li.done {
  border-color: #2b6f62;
  background: #e8f6ef;
}

#prepList li.wrong,
.simple-cup li.wrong {
  border-color: #b84636;
  background: #ffe5dd;
}

.simple-cup {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-self: start;
  padding: 8px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.65), transparent 44%),
    linear-gradient(#fffaf1, #f2d7aa);
  box-shadow: 14px 18px 0 rgba(47,41,36,.18), inset 0 0 0 4px rgba(255,255,255,.3);
}

.simple-cup strong {
  display: block;
  min-height: 1.25em;
  font-size: .86rem;
  line-height: 1.2;
  text-align: center;
}

.cup-bowl {
  position: relative;
  width: min(176px, 72%);
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.55) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, #fff4de 0 70%, #9a6542 71% 76%, #5e3928 77% 80%, transparent 81%);
  box-shadow:
    0 18px 0 rgba(47, 41, 36, .18),
    0 26px 36px rgba(47,41,36,.18),
    inset 0 10px 0 rgba(255,255,255,.55);
  cursor: pointer;
  touch-action: manipulation;
}

.cup-bowl::before {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: 28px;
  height: var(--pour-progress, 0%);
  max-height: 58%;
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: var(--pour-color, transparent);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
  opacity: .9;
  content: "";
  pointer-events: none;
}

.cup-bowl:hover,
.cup-bowl:focus-visible {
  transform: translateY(-2px);
  outline: 4px solid rgba(240, 200, 108, .55);
}

.cup-rim,
.cup-liquid,
.cup-ice,
.cup-spray,
.foam-art,
.cup-effect,
.pour-source-cup,
.effect-particles,
.cup-shine {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cup-rim {
  inset: 5%;
  border: 7px solid #e2a866;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(111,70,48,.28),
    0 0 0 4px #5e3928,
    0 9px 0 rgba(51,40,31,.16);
}

.cup-liquid {
  inset: 16%;
  background: #ead7bd;
  box-shadow:
    inset 0 16px 20px rgba(255,255,255,.3),
    inset 0 -18px 18px rgba(47,41,36,.16),
    0 0 0 2px rgba(255,255,255,.2);
  transition: background .18s ease;
}

.cup-ice {
  inset: 28%;
  z-index: 1;
  background: transparent;
}

.cup-ice::before,
.cup-ice::after {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 6px;
  background: var(--ice-color, #dff4ff);
  box-shadow: 0 3px 0 rgba(47,41,36,.16), inset 4px 4px 0 rgba(255,255,255,.5);
  opacity: 0;
  content: "";
}

.cup-ice::before {
  left: 24%;
  top: 28%;
  transform: rotate(-14deg);
}

.cup-ice::after {
  right: 22%;
  bottom: 25%;
  transform: rotate(12deg);
}

.cup-ice[data-ice="less"]::before,
.cup-ice[data-ice="regular"]::before,
.cup-ice[data-ice="regular"]::after,
.cup-ice[data-ice="extra"]::before,
.cup-ice[data-ice="extra"]::after {
  opacity: .88;
}

.cup-ice[data-ice="extra"] {
  background:
    linear-gradient(35deg, transparent 28%, rgba(210,242,255,.9) 29% 39%, transparent 40%),
    linear-gradient(120deg, transparent 42%, rgba(210,242,255,.9) 43% 53%, transparent 54%);
}

.cup-spray {
  inset: 31%;
  z-index: 2;
  opacity: .94;
  background: transparent;
  clip-path: polygon(50% 0, 60% 18%, 82% 18%, 68% 36%, 88% 52%, 64% 56%, 72% 80%, 50% 66%, 28% 80%, 36% 56%, 12% 52%, 32% 36%, 18% 18%, 40% 18%);
}

.cup-effect {
  inset: 16%;
  z-index: 3;
  opacity: 0;
  border: 6px solid var(--effect-color, #f0c86c);
  box-shadow: 0 0 0 8px rgba(255,255,255,.18);
  transform: scale(.25);
}

.cup-bowl.is-pouring .cup-effect {
  animation: cupRipple .52s ease-out;
}

.cup-bowl.is-spraying .cup-effect {
  animation: foamBloom .55s ease-out;
}

.cup-bowl.is-adding .cup-effect {
  animation: iceSplash .5s ease-out;
}

.cup-bowl.is-pouring::before {
  animation: pourStream .52s ease-out;
}

.pour-source-cup {
  left: 14%;
  top: 1%;
  z-index: 5;
  width: 82px;
  height: 62px;
  opacity: 0;
  transform: translate(-14px, -18px) rotate(-34deg);
  border-radius: 0;
}

.pour-source-cup i {
  position: absolute;
  left: 18px;
  top: 10px;
  width: 42px;
  height: 42px;
  border: 4px solid var(--line);
  border-radius: 10px 10px 17px 17px;
  background:
    linear-gradient(to top, var(--effect-color, #d49135) 0 54%, rgba(255,255,255,.82) 55% 100%);
  box-shadow:
    inset 6px 0 0 rgba(255,255,255,.28),
    0 8px 0 rgba(47,41,36,.16);
}

.pour-source-cup b {
  position: absolute;
  right: 1px;
  top: 22px;
  width: 26px;
  height: 12px;
  border: 4px solid var(--line);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: #fff4dd;
}

.pour-source-cup::after {
  position: absolute;
  right: -12px;
  top: 38px;
  width: 18px;
  height: 0;
  border-radius: 999px;
  background: var(--effect-color, #d49135);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
  transform: rotate(34deg);
  transform-origin: top center;
  content: "";
}

.cup-bowl.is-pouring .pour-source-cup {
  animation: sourceCupPour .6s ease-out;
}

.cup-bowl.is-pouring .pour-source-cup::after {
  animation: sourceCupStream .6s ease-out;
}

.cup-bowl.is-spraying::before {
  width: 62px;
  background:
    radial-gradient(circle at 9px 14px, var(--effect-color) 0 4px, transparent 5px),
    radial-gradient(circle at 24px 30px, var(--effect-color) 0 6px, transparent 7px),
    radial-gradient(circle at 39px 14px, var(--effect-color) 0 4px, transparent 5px),
    radial-gradient(circle at 52px 28px, var(--effect-color) 0 5px, transparent 6px);
  box-shadow: none;
  animation: sprayBurst .55s ease-out;
}

.cup-bowl.is-adding::before {
  width: 54px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), transparent 35%),
    var(--effect-color);
  box-shadow: 18px 14px 0 -7px var(--effect-color), -16px 20px 0 -8px var(--effect-color);
  animation: iceDrop .55s ease-out;
}

.effect-particles {
  inset: 10%;
  z-index: 6;
  opacity: 0;
  border-radius: 0;
}

.effect-particles i {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--effect-color, #f0c86c);
  box-shadow: 0 0 0 3px rgba(255,255,255,.32);
  opacity: 0;
}

.effect-particles i:nth-child(2) { width: 8px; height: 8px; }
.effect-particles i:nth-child(3) { width: 12px; height: 12px; }
.effect-particles i:nth-child(4) { width: 7px; height: 7px; }
.effect-particles i:nth-child(5) { width: 9px; height: 9px; }

.cup-bowl.is-pouring .effect-particles,
.cup-bowl.is-spraying .effect-particles,
.cup-bowl.is-adding .effect-particles {
  opacity: 1;
}

.cup-bowl.is-pouring .effect-particles i:nth-child(1) { animation: particleA .5s ease-out; }
.cup-bowl.is-pouring .effect-particles i:nth-child(2) { animation: particleB .5s ease-out .03s; }
.cup-bowl.is-pouring .effect-particles i:nth-child(3) { animation: particleC .5s ease-out .05s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(1) { animation: mistA .6s ease-out; }
.cup-bowl.is-spraying .effect-particles i:nth-child(2) { animation: mistB .6s ease-out .04s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(3) { animation: mistC .6s ease-out .08s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(4) { animation: mistD .6s ease-out .1s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(5) { animation: mistE .6s ease-out .12s; }
.cup-bowl.is-adding .effect-particles i:nth-child(1) { border-radius: 4px; animation: iceChipA .55s ease-out; }
.cup-bowl.is-adding .effect-particles i:nth-child(2) { border-radius: 4px; animation: iceChipB .55s ease-out .03s; }
.cup-bowl.is-adding .effect-particles i:nth-child(3) { border-radius: 4px; animation: iceChipC .55s ease-out .06s; }

body.good-serve .person {
  animation: customerHappy .72s ease-out;
}

body.bad-serve .person {
  animation: customerBad .52s ease-out;
}

@keyframes cupRipple {
  0% { opacity: .92; transform: scale(.12); filter: saturate(1.2); }
  55% { opacity: .55; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.16); }
}

@keyframes foamBloom {
  0% { opacity: .9; transform: scale(.1); border-width: 10px; }
  60% { opacity: .65; transform: scale(.78); }
  100% { opacity: 0; transform: scale(1.22); border-width: 2px; }
}

@keyframes iceSplash {
  0% { opacity: .85; transform: scale(.15) rotate(0deg); }
  55% { opacity: .55; transform: scale(.72) rotate(14deg); }
  100% { opacity: 0; transform: scale(1.06) rotate(28deg); }
}

@keyframes pourStream {
  0% { height: 0; opacity: 0; }
  35% { height: 58%; opacity: 1; }
  100% { height: var(--pour-progress, 0%); opacity: .9; }
}

@keyframes sourceCupPour {
  0% { opacity: 0; transform: translate(-20px, -28px) rotate(-18deg); }
  25% { opacity: 1; transform: translate(-10px, -16px) rotate(-42deg); }
  78% { opacity: 1; transform: translate(-10px, -16px) rotate(-42deg); }
  100% { opacity: 0; transform: translate(-18px, -26px) rotate(-18deg); }
}

@keyframes sourceCupStream {
  0% { height: 0; opacity: 0; }
  24% { height: 0; opacity: 0; }
  38% { height: 92px; opacity: 1; }
  78% { height: 92px; opacity: 1; }
  100% { height: 0; opacity: 0; }
}

@keyframes particleA {
  0% { opacity: .9; transform: translate(0, 0) scale(.8); }
  100% { opacity: 0; transform: translate(-46px, -30px) scale(.2); }
}

@keyframes particleB {
  0% { opacity: .9; transform: translate(0, 0) scale(.8); }
  100% { opacity: 0; transform: translate(40px, -28px) scale(.2); }
}

@keyframes particleC {
  0% { opacity: .85; transform: translate(0, 0) scale(.8); }
  100% { opacity: 0; transform: translate(6px, 48px) scale(.2); }
}

@keyframes mistA { 0% { opacity: .9; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-62px, -58px) scale(1.2); } }
@keyframes mistB { 0% { opacity: .85; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(54px, -62px) scale(1.25); } }
@keyframes mistC { 0% { opacity: .85; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(0, -74px) scale(1.35); } }
@keyframes mistD { 0% { opacity: .75; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-34px, -28px) scale(1.1); } }
@keyframes mistE { 0% { opacity: .75; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(38px, -24px) scale(1.1); } }

@keyframes iceChipA { 0% { opacity: .95; transform: translate(0, -44px) rotate(0deg); } 100% { opacity: 0; transform: translate(-42px, 38px) rotate(80deg); } }
@keyframes iceChipB { 0% { opacity: .95; transform: translate(0, -42px) rotate(0deg); } 100% { opacity: 0; transform: translate(42px, 34px) rotate(-80deg); } }
@keyframes iceChipC { 0% { opacity: .95; transform: translate(0, -48px) rotate(0deg); } 100% { opacity: 0; transform: translate(0, 54px) rotate(110deg); } }

@keyframes customerHappy {
  0% { transform: translateX(-50%) perspective(480px) rotateX(4deg) rotateY(-3deg) translateY(0); }
  35% { transform: translateX(-50%) perspective(480px) rotateX(4deg) rotateY(-3deg) translateY(-16px) scale(1.04); }
  70% { transform: translateX(-50%) perspective(480px) rotateX(4deg) rotateY(-3deg) translateY(2px); }
  100% { transform: translateX(-50%) perspective(480px) rotateX(4deg) rotateY(-3deg) translateY(0); }
}

@keyframes customerBad {
  0%, 100% { transform: translateX(-50%) perspective(480px) rotateX(4deg) rotateY(-3deg); }
  20% { transform: translateX(calc(-50% - 10px)) perspective(480px) rotateX(4deg) rotateY(-8deg); }
  45% { transform: translateX(calc(-50% + 10px)) perspective(480px) rotateX(4deg) rotateY(5deg); }
  70% { transform: translateX(calc(-50% - 5px)) perspective(480px) rotateX(4deg) rotateY(-5deg); }
}

@keyframes sprayBurst {
  0% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.55); }
  45% { opacity: 1; transform: translateX(-50%) translateY(16px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(36px) scale(1.25); }
}

@keyframes iceDrop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-18px) rotate(-18deg); }
  50% { opacity: 1; transform: translateX(-50%) translateY(54px) rotate(8deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(82px) rotate(24deg); }
}

.cup-shine {
  inset: 24% 56% 56% 24%;
  background: rgba(255,255,255,.42);
  filter: blur(1px);
}

.cup-bowl[data-mode="pour"]::after,
.cup-bowl[data-mode="spray"]::after {
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #f0c86c;
  color: var(--line);
  font-size: .78rem;
  font-weight: 950;
  content: "Hold to pour";
}

.cup-bowl[data-mode="spray"]::after {
  content: "Hold to spray";
}

.cup-bowl.is-spraying[data-mode="spray"]::after {
  content: "";
}

.simple-cup ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.simple-cup li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background: white;
  font-size: .86rem;
  font-weight: 900;
}

.prep-actions {
  width: 100%;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 3px solid rgba(59, 43, 34, .22);
  background: transparent;
  box-shadow: none;
}

.shop-panel,
.room-scene {
  border: 3px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.shop-panel {
  padding: 14px;
  background: #fff7e8;
  overflow: auto;
}

.shop-note {
  color: var(--muted);
  font-weight: 900;
}

.decor-shop {
  display: grid;
  gap: 6px;
}

.compact-shop {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.shop-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 8px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 20% 0, rgba(255,255,255,.82), transparent 48%),
    linear-gradient(#fffdf7, #eed2a7);
  color: var(--line);
  text-align: left;
  box-shadow: inset 0 -5px 0 rgba(111,70,48,.1), 0 5px 0 rgba(51,40,31,.14);
}

.shop-card span {
  color: #2b6f62;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.shop-card strong {
  font-size: .92rem;
  line-height: 1.05;
}

.shop-card em {
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.16;
}

.shop-card.owned {
  border-color: #2b6f62;
  background:
    radial-gradient(ellipse at 20% 0, rgba(255,255,255,.82), transparent 48%),
    linear-gradient(#f4fff7, #ccebd9);
}

.shop-card.broke {
  filter: saturate(.82);
  opacity: .82;
}

.shop-card:disabled {
  cursor: default;
  opacity: .72;
}

.shop-heading {
  margin: 8px 0 5px;
  font-size: .9rem;
}

.shop-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.shop-toggle-row .shop-heading {
  margin: 0;
}

.shop-toggle-row button {
  min-width: 82px;
  min-height: 34px;
  padding-inline: 12px;
}

.review-card {
  margin-bottom: 7px;
  padding: 8px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), transparent 42%),
    linear-gradient(#fffdf8, #fff3df);
  box-shadow: inset 0 -4px 0 rgba(214,179,132,.16), 0 6px 0 rgba(51,40,31,.12);
}

.review-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.2;
  font-size: .82rem;
}

.challenge-card {
  border-color: #2b6f62;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), transparent 42%),
    linear-gradient(#f3fff7, #e5f2e6);
}

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.cafe-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 5px;
}

.cafe-details span {
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 2px solid #9cc7ae;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), transparent 42%),
    #f9fff7;
  color: var(--line);
  font-size: .7rem;
  font-weight: 900;
}

.cafe-details b {
  color: #2b6f62;
  font-size: .65rem;
  text-transform: uppercase;
}

.badge-list span {
  padding: 3px 5px;
  border: 2px solid #d6b384;
  border-radius: 999px;
  background: #fffaf1;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 950;
}

.badge-list span.earned {
  border-color: #2b6f62;
  background: #2b6f62;
  color: #fffaf1;
}

.decor-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 2px solid #d6b384;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), transparent 38%),
    white;
  box-shadow: inset 0 -4px 0 rgba(214,179,132,.12);
}

.compact-shop .decor-item {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 6px;
}

.decor-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.compact-shop .decor-item p {
  display: none;
}

.decor-item button {
  min-width: 66px;
  min-height: 34px;
  padding: 4px 7px;
  font-size: .8rem;
}

.compact-shop .decor-item button {
  width: 100%;
}

.decor-item strong {
  font-size: .8rem;
  line-height: 1.05;
}

.room-scene {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#f1d4a3, #d39b65);
}

.room-wall {
  position: absolute;
  inset: 0 0 auto;
  height: 280px;
  background:
    linear-gradient(#f3ddbd 0 72%, #d2a56f 72% 74%, #e7c596 74%);
}

.wall-art {
  position: absolute;
  left: 42px;
  top: 34px;
  width: 230px;
  padding: 16px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #3d5b4c;
  color: #fff7e8;
  font-weight: 900;
  text-align: center;
}

body[data-art="1"] .wall-art {
  background: #5d83b3;
}

body[data-art="2"] .wall-art {
  background: linear-gradient(135deg, #5aa897, #d49135);
}

.room-window {
  position: absolute;
  right: 52px;
  top: 34px;
  display: grid;
  grid-template-columns: repeat(2, 70px);
  grid-template-rows: repeat(2, 54px);
  gap: 7px;
  padding: 8px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: #6d4b33;
}

.room-window span {
  background: linear-gradient(#9bd0df, #f6db91);
}

.room-floor {
  position: absolute;
  inset: 240px 0 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.16), transparent 36%),
    repeating-linear-gradient(92deg, #b9764f 0 112px, #9d6041 112px 118px);
  transform: perspective(900px) rotateX(2deg);
  transform-origin: top;
}

.rug {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 460px;
  height: 160px;
  transform: translateX(-50%) perspective(340px) rotateX(58deg);
  border: 2px solid rgba(51, 40, 31, .75);
  border-radius: 50%;
  background: #d8a45a;
  opacity: .2;
}

.rug[data-level="1"] {
  opacity: 1;
  background: repeating-linear-gradient(90deg, #d8a45a 0 28px, #bf645d 28px 56px);
}

.rug[data-level="2"] {
  opacity: 1;
  background: radial-gradient(circle at center, #fff2c8 0 18%, transparent 19%),
    repeating-linear-gradient(90deg, #4f9f8e 0 28px, #d8a45a 28px 56px);
}

.table {
  position: absolute;
  width: 178px;
  height: 108px;
  transform: perspective(520px) rotateX(58deg);
  border: 4px solid #3b2b22;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 35%),
    linear-gradient(#b9784f, #8f5639);
  box-shadow:
    0 26px 0 -12px #5b3b2c,
    24px 42px 24px rgba(47, 41, 36, .24);
}

.table::before,
.table::after {
  content: "";
  position: absolute;
  bottom: -44px;
  width: 14px;
  height: 58px;
  border: 3px solid #3b2b22;
  background: #5b3b2c;
  transform: rotateX(-58deg);
}

.table::before { left: 42px; }
.table::after { right: 42px; }

.table span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 3px solid #3b2b22;
  border-radius: 999px;
  background: linear-gradient(#fff7e8, #dfc59b);
}

.table[data-level="1"] {
  background: linear-gradient(135deg, rgba(255,255,255,.24), transparent 35%),
    linear-gradient(#c98a56, #9b613f);
}

.table[data-level="2"] {
  background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 35%),
    linear-gradient(#bf7b4c, #6f8e86);
}

.table[data-level="3"] {
  background: linear-gradient(135deg, rgba(255,255,255,.36), transparent 35%),
    linear-gradient(#d6a05d, #4f9f8e);
}

.table-one {
  left: 155px;
  bottom: 174px;
}

.table-two {
  right: 150px;
  bottom: 174px;
}

.chair {
  position: absolute;
  width: 78px;
  height: 96px;
  border: 0;
  border-radius: 0;
  background: #7f9db1;
  box-shadow: none;
  transform: none;
}

.chair::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 58px;
  border: 3px solid #3b2b22;
  border-radius: 14px 14px 10px 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 45%),
    inherit;
  box-shadow:
    inset 0 8px 0 rgba(255,255,255,.18),
    10px 16px 16px rgba(47, 41, 36, .16);
}

.chair::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 18px;
  height: 34px;
  border: 3px solid #3b2b22;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 48%),
    inherit;
  transform: perspective(320px) rotateX(54deg);
  box-shadow:
    0 30px 0 -16px rgba(47, 41, 36, .3),
    inset -6px -3px 0 rgba(0,0,0,.12);
}

body[data-chairs="1"] .chair { background: #d49135; }
body[data-chairs="2"] .chair { background: #c96055; }
body[data-chairs="3"] .chair { background: #4f9f8e; }

.chair-one { left: 88px; bottom: 134px; }
.chair-two { left: 332px; bottom: 134px; }
.chair-three { right: 82px; bottom: 134px; }
.chair-four { right: 328px; bottom: 134px; }

.floor-plant {
  position: absolute;
  left: 58px;
  bottom: 76px;
  width: 74px;
  height: 124px;
  opacity: .18;
  background:
    radial-gradient(circle at 22px 20px, #5baa64 0 20px, transparent 21px),
    radial-gradient(circle at 48px 28px, #4c9558 0 22px, transparent 23px),
    linear-gradient(transparent 0 58px, #b45d3c 58px 100%);
  border-bottom: 3px solid var(--line);
}

.floor-plant[data-level="1"] {
  opacity: 1;
}

.floor-plant[data-level="2"] {
  opacity: 1;
  width: 100px;
  height: 154px;
  background:
    radial-gradient(circle at 28px 20px, #5baa64 0 24px, transparent 25px),
    radial-gradient(circle at 62px 30px, #4c9558 0 28px, transparent 29px),
    radial-gradient(circle at 48px 58px, #77bd75 0 26px, transparent 27px),
    linear-gradient(transparent 0 84px, #b45d3c 84px 100%);
}

.string-lights {
  position: absolute;
  left: 50%;
  top: -204px;
  display: flex;
  gap: 46px;
  transform: translateX(-50%);
  opacity: .18;
}

.string-lights span {
  width: 18px;
  height: 28px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: #f3c75d;
}

.string-lights[data-level="1"] {
  opacity: 1;
}

.string-lights[data-level="2"] {
  opacity: 1;
  filter: drop-shadow(0 0 10px #ffe28a);
}

@media (max-width: 1180px) {
  body {
    overflow: hidden;
  }

  .game-shell {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .cafe-stage {
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.25fr);
  }

  .counter-scene {
    min-height: 760px;
  }

  .counter-top {
    grid-template-columns: minmax(210px, 280px) minmax(360px, 520px);
    height: 470px;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .prep-workspace {
    grid-template-columns: minmax(430px, 1.4fr) minmax(230px, .6fr);
  }

  .prep-tools {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

body[data-counter="1"] .counter-top {
  background:
    linear-gradient(90deg, rgba(255,255,255,.2), transparent 28%, rgba(56,33,22,.18) 86%),
    repeating-linear-gradient(90deg, #d1905f 0 80px, #ba744d 80px 86px, #b06b48 86px 166px);
}

body[data-counter="2"] .counter-top {
  background:
    linear-gradient(90deg, rgba(255,255,255,.25), transparent 28%, rgba(56,33,22,.16) 86%),
    repeating-linear-gradient(90deg, #d8a064 0 80px, #4f9f8e 80px 86px, #b97956 86px 166px);
}

body[data-counter="3"] .counter-top {
  background:
    linear-gradient(90deg, rgba(255,255,255,.32), transparent 26%, rgba(43,111,98,.2) 84%),
    repeating-linear-gradient(90deg, #e0a767 0 70px, #2b6f62 70px 78px, #c47a4d 78px 148px);
}

body[data-lighting="1"] .back-wall,
body[data-lighting="2"] .back-wall {
  box-shadow: inset 0 44px 80px rgba(255, 224, 142, .28);
}

body[data-lighting="2"] .counter-scene {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,231,160,.42), transparent 30%),
    linear-gradient(#f4d9a9 0 58%, #d99b68 58%);
}

body[data-display="1"] .shelf span,
body[data-display="2"] .shelf span {
  background: #f2c46d;
  box-shadow: inset 0 -8px 0 rgba(129,82,48,.18), 0 0 0 3px var(--line), 0 9px 0 rgba(47,41,36,.16);
}

body[data-display="2"] .shelf span {
  background: linear-gradient(#fff2bc, #d88c5d);
}

@media (max-width: 900px) {
  .status-bar { align-items: stretch; flex-direction: column; }
  .cafe-stage,
  .cafe-view,
  .prep-stage { grid-template-columns: 1fr; }
  .counter-scene { min-height: 880px; }
  .counter-top { grid-template-columns: 1fr; height: 650px; }
  .counter-right { align-content: center; }
  .preview-tray { justify-self: center; }
  .hint-board { max-height: none; }
  .tablet { justify-self: center; width: min(100%, 620px); }
  .room-scene { min-height: 680px; }
  .prep-table { min-height: 680px; }
  .prep-workspace { grid-template-columns: 1fr; }
  .prep-tools { grid-template-columns: repeat(2, 1fr); }
  .prep-order-paper { justify-self: stretch; width: auto; transform: none; }
}

@media (max-width: 580px) {
  .game-shell { width: 100vw; padding: 7px; }
  .status-bar { gap: 8px; padding: 10px; }
  .stats, .steps, .tool-grid, .tablet-actions { grid-template-columns: 1fr 1fr; }
  .prep-tools { grid-template-columns: 1fr; }
  .tool {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 66px;
  }
  .tool-icon {
    scale: .9;
  }
  .stats div { padding: 6px; }
  h1 { font-size: 1.35rem; }
  .shelf, .menu-board { display: none; }
  .hint-board { padding: 10px; }
  #hintList { padding-left: 20px; }
  #hintList li { font-size: 1rem; padding: 10px; }
  .counter-scene { min-height: 960px; }
  .room-scene { min-height: 620px; }
  .rug { width: 300px; }
  .table { width: 138px; height: 84px; }
  .table-one { left: 38px; bottom: 188px; }
  .table-two { right: 34px; bottom: 96px; }
  .chair { width: 58px; height: 78px; }
  .chair-one { left: 4px; bottom: 154px; }
  .chair-two { left: 154px; bottom: 154px; }
  .chair-three { right: 4px; bottom: 64px; }
  .chair-four { right: 154px; bottom: 64px; }
  .room-window { display: none; }
  .counter-top { left: 8px; right: 8px; padding: 10px; height: 680px; }
  .tablet { padding: 10px; }
  .tablet-screen { padding: 10px; }
  .preview-tray {
    grid-template-columns: 128px 96px;
    padding-inline: 10px;
  }
  .drink-3d {
    width: 118px;
    height: 162px;
  }
  .food-3d {
    width: 86px;
  }
  .person { left: 50%; top: 122px; transform: translateX(-50%) scale(.8); }
  .speech-bubble { top: 14px; }
}

@media (max-width: 390px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps, .tool-grid, .tablet-actions { grid-template-columns: 1fr; }
  .prep-tools { grid-template-columns: 1fr; }
  .counter-scene { min-height: 1040px; }
  .counter-top { height: 760px; }
  .preview-tray { grid-template-columns: 1fr; justify-items: center; }
}

/* High polish graphics pass */
body {
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.72) 0 54px, transparent 56px),
    radial-gradient(circle at 88% 18%, rgba(255,232,174,.5) 0 86px, transparent 88px),
    linear-gradient(115deg, rgba(255,255,255,.18) 0 18%, transparent 19% 100%),
    linear-gradient(#83cddd 0 34%, #f5cc8b 34% 66%, #a86246 66% 100%);
}

.game-shell { padding: 12px; gap: 12px; }

.status-bar {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.18) 38%, transparent 39%),
    linear-gradient(#fffaf1, #f0d9b4);
  border-width: 4px;
  box-shadow: 0 10px 0 rgba(79,54,39,.22), 0 26px 42px rgba(47,41,36,.24), inset 0 0 0 2px rgba(255,255,255,.48);
}

.hint-board,
.shop-panel {
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 38%),
    linear-gradient(#fffaf1, #f4dfbd);
  border-width: 4px;
  box-shadow: 0 10px 0 rgba(79,54,39,.18), 0 22px 34px rgba(47,41,36,.18), inset 0 0 0 2px rgba(255,255,255,.42);
}

.counter-scene {
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 98px),
    radial-gradient(ellipse at 54% 24%, rgba(255,255,255,.45) 0 170px, transparent 172px),
    linear-gradient(#f7ddb0 0 44%, #d89562 44% 70%, #74442f 70% 100%);
  border-width: 4px;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.12), inset 0 -110px 90px rgba(53,31,22,.28), 0 16px 0 rgba(79,54,39,.2), 0 30px 46px rgba(47,41,36,.28);
}

.counter-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 214px;
  height: 22px;
  background: linear-gradient(90deg, #5e3928, #94613e, #5e3928);
  box-shadow: 0 7px 0 rgba(51,40,31,.2);
}

.menu-board {
  width: 250px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 36%), linear-gradient(#426955, #263f35);
  box-shadow: 0 10px 0 rgba(47,41,36,.25), 0 18px 24px rgba(47,41,36,.18), inset 0 0 0 2px rgba(255,255,255,.08);
}

.shelf { height: 94px; border-bottom-width: 10px; }
.shelf::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -17px;
  height: 11px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: #83573a;
}
.shelf span {
  border-radius: 10px 10px 18px 18px;
  box-shadow: inset 10px 0 0 rgba(255,255,255,.26), inset -8px -8px 0 rgba(47,41,36,.16), 0 8px 0 rgba(47,41,36,.16);
}

.speech-bubble {
  border-width: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,249,238,.98) 56%, #e7c394), #fffaf1;
  box-shadow: 0 10px 0 #9e6d42, 0 25px 34px rgba(47,41,36,.28), inset 14px 12px 0 rgba(255,255,255,.58), inset -12px -12px 0 rgba(135,83,45,.14);
}

.person {
  width: 170px;
  height: 148px;
  top: 132px;
  filter: drop-shadow(0 4px 0 rgba(255,255,255,.16)) drop-shadow(16px 22px 0 rgba(47,41,36,.16));
}
.person-face {
  left: 25px;
  top: 31px;
  width: 120px;
  height: 120px;
  border-width: 4px;
  background:
    radial-gradient(circle at 33% 57%, rgba(255,130,105,.24) 0 9px, transparent 10px),
    radial-gradient(circle at 68% 57%, rgba(255,130,105,.22) 0 9px, transparent 10px),
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 42%),
    var(--skin);
  box-shadow: inset 13px 12px 0 rgba(255,255,255,.2), inset -17px -12px rgba(95,54,34,.18), 0 18px 0 rgba(47,41,36,.17);
}
.person-hair {
  left: 17px;
  top: 13px;
  width: 136px;
  height: 64px;
  border-width: 4px;
  border-radius: 72px 72px 22px 22px;
  box-shadow: inset 11px 9px 0 rgba(255,255,255,.08), inset -10px -8px 0 rgba(0,0,0,.18);
}
.person-hair::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -12px;
  height: 22px;
  border-radius: 0 0 999px 999px;
  background: inherit;
}
.eye { top: 48px; width: 12px; height: 15px; box-shadow: inset 3px 3px 0 rgba(255,255,255,.35); }
.eye.left { left: 36px; }
.eye.right { right: 36px; }
.nose { left: 56px; top: 64px; width: 9px; height: 16px; }
.mouth { left: 44px; top: 90px; width: 34px; }

.counter-top {
  border-width: 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.2), transparent 26%, rgba(39,23,16,.24) 84%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 18%),
    repeating-linear-gradient(90deg, #d08a57 0 72px, #a65f3f 72px 78px, #be744c 78px 150px);
  box-shadow: inset 0 24px 0 rgba(255,245,225,.22), inset 0 -50px 0 rgba(69,42,28,.3), 0 20px 0 #6a3c28, 0 38px 30px rgba(47,41,36,.34);
}
.counter-top::before {
  height: 54px;
  background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)), repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 80px, transparent 80px 160px);
}

.tablet {
  border-width: 6px;
  border-radius: 22px;
  background: linear-gradient(135deg, #35302d, #171412);
  box-shadow: 0 16px 0 rgba(24,18,14,.55), 0 34px 32px rgba(47,41,36,.35), inset 0 0 0 2px rgba(255,255,255,.08);
  transform: perspective(900px) rotateX(3deg) rotateY(-2deg);
}
.tablet-screen {
  background: linear-gradient(135deg, rgba(255,255,255,.75), transparent 30%), linear-gradient(#fffaf2, #ead9bd);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.32), inset 0 -12px 28px rgba(86,58,37,.12);
}

.tablet-head,
.order-note,
.steps button,
.tool,
#hintList li,
.review-card,
.decor-item {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 0 -5px 0 rgba(134,91,55,.08), 0 6px 0 rgba(51,40,31,.12);
}
.order-note {
  min-height: 146px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), transparent 40%), linear-gradient(#fffef8, #f3ddb6);
  font-size: 1.04rem;
}
.order-note strong { font-size: 1.45rem; line-height: 1.25; }

.prep-table {
  border-width: 4px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(120deg, rgba(255,255,255,.24), transparent 34%),
    repeating-linear-gradient(90deg, #d79663 0 70px, #a85e3c 70px 78px, #c47a4d 78px 148px);
  box-shadow: 0 18px 0 #71432c, 0 34px 34px rgba(47,41,36,.3), inset 0 -42px 0 rgba(69,42,28,.24), inset 0 0 0 6px rgba(255,255,255,.1);
}
.prep-ticket,
.simple-cup,
.ingredient-group {
  box-shadow: 0 10px 0 rgba(51,40,31,.18), 0 20px 26px rgba(47,41,36,.16), inset 0 0 0 2px rgba(255,255,255,.36);
}
.prep-tools { gap: 20px; }
.ingredient-group {
  background: linear-gradient(135deg, rgba(255,255,255,.86), transparent 38%), linear-gradient(#fff8eb, #efd8b3);
}
.tool {
  min-height: 66px;
  border-width: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), transparent 38%), linear-gradient(#fffaf1, #ebd0a7);
}
.tool.selected {
  outline: 5px solid rgba(43,111,98,.42);
  background: linear-gradient(135deg, rgba(255,255,255,.84), transparent 38%), linear-gradient(#f5fff8, #caead8);
}

.simple-cup {
  background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.72), transparent 44%), linear-gradient(#fffaf1, #e7c391);
}
.cup-bowl {
  width: min(250px, 82%);
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.68) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, #fff4de 0 67%, #bc7a47 68% 74%, #5e3928 75% 80%, transparent 81%);
  box-shadow: 0 20px 0 rgba(47,41,36,.2), 0 30px 42px rgba(47,41,36,.22), inset 0 12px 0 rgba(255,255,255,.62), inset 0 -12px 0 rgba(91,57,36,.16);
}
.cup-liquid {
  box-shadow: inset 0 18px 22px rgba(255,255,255,.34), inset 0 -20px 22px rgba(47,41,36,.18), 0 0 0 3px rgba(255,255,255,.25);
}

.message-log {
  border: 3px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.09), transparent 35%), linear-gradient(#3b3028, #221b17);
  box-shadow: 0 8px 0 rgba(47,41,36,.18), inset 0 1px 0 rgba(255,255,255,.1);
}

body[data-menu="1"] .menu-board,
body[data-menu="2"] .menu-board {
  box-shadow: 0 12px 0 rgba(47,41,36,.24), 0 24px 30px rgba(47,41,36,.22), inset 0 0 0 2px rgba(255,255,255,.1);
}

@media (max-width: 900px) {
  .tablet { transform: none; }
  .person { top: 138px; }
}

@media (max-width: 580px) {
  .game-shell { padding: 7px; }
  .person {
    width: 150px;
    height: 132px;
    top: 132px;
  }
  .person-face {
    width: 104px;
    height: 106px;
  }
  .person-hair {
    width: 118px;
    height: 56px;
  }
  .order-note strong {
    font-size: 1.18rem;
  }
  .cup-bowl {
    width: min(220px, 82%);
  }
}

/* No-scroll fit pass */
.game-shell,
.cafe-stage,
.prep-stage,
.prep-table,
.counter-scene,
.hint-board {
  min-height: 0;
}

.hint-board,
.shop-panel,
.tool-grid,
.message-log,
.prep-workspace {
  overflow: hidden;
}

.prep-table {
  gap: 7px;
  padding: 10px;
}

.prep-order-paper,
.prep-ticket {
  box-shadow: 0 5px 0 rgba(51,40,31,.16);
}

.prep-order-paper {
  padding: 8px 12px;
}

.prep-order-paper p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prep-workspace {
  grid-template-columns: minmax(600px, 1.8fr) minmax(190px, .42fr);
  gap: 16px;
  padding-bottom: 4px;
}

.prep-tools {
  grid-template-columns: repeat(5, minmax(106px, 1fr));
  gap: 10px;
  padding-bottom: 0;
}

.ingredient-group {
  gap: 7px;
  padding: 8px;
}

.tool {
  min-height: 44px;
  padding: 5px 7px;
}

.simple-cup {
  gap: 5px;
  padding: 7px;
}

.cup-bowl {
  width: min(158px, 70%);
}

.prep-actions {
  padding-top: 8px;
}

.compact-shop {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-shop .decor-item {
  min-width: 0;
}

.compact-shop .decor-item strong {
  overflow-wrap: anywhere;
}

@media (max-height: 760px) {
  .status-bar { padding: 8px 10px; }
  .game-shell { gap: 7px; padding: 7px; }
  .hint-board { padding: 8px; }
  .day-card { gap: 5px; margin-top: 6px; }
  .review-card { padding: 6px; margin-bottom: 5px; }
  .challenge-card .cafe-details,
  .challenge-card .badge-list { display: none; }
  .message-log { min-height: 38px; max-height: 42px; padding: 6px 10px; }
  .prep-order-paper { display: none; }
  .prep-ticket { padding: 5px 8px; }
  .prep-table { grid-template-rows: auto minmax(0, 1fr) auto; }
  .prep-tools { gap: 8px; }
  .tool { min-height: 40px; }
}

/* Pull prep ingredients upward after no-ingredient skips */
.prep-table {
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 6px;
}

.prep-order-paper {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  transform: none;
}

.prep-order-paper span {
  margin-bottom: 2px;
  font-size: .64rem;
}

.prep-order-paper strong {
  margin-bottom: 2px;
  font-size: .86rem;
}

.prep-order-paper p {
  font-size: .76rem;
  line-height: 1.12;
  -webkit-line-clamp: 2;
}

.prep-ticket {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  width: auto;
  padding: 5px 8px;
}

.prep-ticket h2 {
  margin: 2px 0;
  font-size: 1rem;
}

.prep-ticket .customer-name {
  font-size: .72rem;
}

.prep-ticket .patience-meter {
  height: 22px;
  margin: 4px 0 0;
}

.prep-workspace {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  grid-template-columns: minmax(620px, 1.86fr) minmax(180px, .38fr);
  gap: 12px;
  padding-top: 0;
}

.prep-actions {
  grid-column: 1 / -1;
  grid-row: 3;
}

.prep-tools {
  align-content: start;
  gap: 8px;
}

.ingredient-group {
  gap: 6px;
  padding: 7px;
}

.ingredient-group h3 {
  font-size: .72rem;
}

.tool {
  min-height: 40px;
}

@media (max-width: 900px) {
  .prep-table {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .prep-order-paper,
  .prep-ticket,
  .prep-workspace,
  .prep-actions {
    grid-column: 1;
  }
  .prep-order-paper { grid-row: 1; }
  .prep-ticket { grid-row: 2; }
  .prep-workspace {
    grid-row: 3;
    grid-template-columns: 1fr;
  }
  .prep-actions { grid-row: 4; }
}

/* More realistic top-down drink rendering */
.cup-bowl {
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.72) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, #fff7e5 0 65%, #d18b54 66% 72%, #5d3828 73% 80%, rgba(47,41,36,.18) 81% 84%, transparent 85%);
  box-shadow:
    0 16px 0 rgba(47,41,36,.18),
    0 26px 34px rgba(47,41,36,.2),
    inset 0 12px 0 rgba(255,255,255,.58),
    inset 0 -16px 20px rgba(80,48,31,.14);
}

.cup-rim {
  inset: 3.5%;
  border: 8px solid #e7ac69;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.32),
    inset 0 -8px 0 rgba(97,58,36,.16),
    0 0 0 4px #5e3928,
    0 9px 0 rgba(51,40,31,.16);
}

.cup-liquid {
  inset: 14%;
  overflow: hidden;
  filter: saturate(1.12);
  box-shadow:
    inset 0 16px 22px rgba(255,255,255,.34),
    inset 0 -20px 24px rgba(35,22,17,.22),
    inset 0 0 0 5px rgba(255,255,255,.16),
    0 0 0 2px rgba(88,55,36,.16);
}

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

.cup-liquid::before {
  border: 5px solid rgba(255,255,255,.24);
  border-left-color: transparent;
  border-bottom-color: rgba(255,255,255,.08);
  transform: rotate(-18deg);
}

.cup-liquid::after {
  inset: 18%;
  background:
    radial-gradient(ellipse at 30% 28%, rgba(255,255,255,.28), transparent 22%),
    radial-gradient(ellipse at 68% 66%, rgba(0,0,0,.12), transparent 26%);
  mix-blend-mode: soft-light;
}

.cup-bowl[data-flavor^="double-"] .cup-liquid {
  filter: saturate(1.28) contrast(1.05);
}

.cup-bowl[data-flavor^="double-"] .cup-liquid::before {
  border-width: 7px;
  border-top-color: rgba(255,255,255,.3);
  border-right-color: rgba(80,40,24,.22);
}

.cup-ice {
  inset: 22%;
  z-index: 2;
}

.cup-ice::before,
.cup-ice::after {
  width: 24%;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 42%),
    var(--ice-color, #dff4ff);
  box-shadow:
    0 4px 0 rgba(47,41,36,.18),
    inset 4px 4px 0 rgba(255,255,255,.58),
    inset -3px -3px 0 rgba(116,181,212,.22);
}

.cup-ice[data-ice="extra"] {
  background:
    radial-gradient(circle at 52% 30%, rgba(223,244,255,.88) 0 10%, transparent 11%),
    radial-gradient(circle at 34% 68%, rgba(198,236,255,.88) 0 9%, transparent 10%),
    radial-gradient(circle at 72% 62%, rgba(174,227,255,.78) 0 8%, transparent 9%);
}

.cup-spray {
  inset: 24%;
  z-index: 4;
  opacity: .96;
  clip-path: none;
  background: transparent;
}

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

.cup-spray::before {
  inset: 7%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,.9) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.82) 0 11%, transparent 12%),
    radial-gradient(circle at 50% 55%, currentColor 0 46%, transparent 47%);
  color: inherit;
  box-shadow:
    inset 0 9px 10px rgba(255,255,255,.38),
    0 5px 0 rgba(66,43,31,.12);
}

.cup-spray::after {
  inset: 30%;
  background: rgba(255,255,255,.42);
  box-shadow: 0 0 0 7px rgba(255,255,255,.16);
}

.cup-bowl[data-top="none"] .cup-spray::before,
.cup-bowl[data-top="none"] .cup-spray::after {
  display: none;
}

.cup-bowl[data-top="foam"] .cup-spray,
.cup-bowl[data-top="extra-foam"] .cup-spray {
  color: #fff4cf;
}

.cup-bowl[data-top="cream"] .cup-spray,
.cup-bowl[data-top="extra-cream"] .cup-spray {
  color: #fffaf0;
}

.cup-bowl[data-top="extra-foam"] .cup-spray,
.cup-bowl[data-top="extra-cream"] .cup-spray {
  inset: 18%;
}

.cup-bowl[data-top="cinnamon"] .cup-spray {
  color: #b2673c;
}

.cup-bowl[data-top="cinnamon"] .cup-spray::before {
  background:
    radial-gradient(circle at 34% 34%, rgba(255,255,255,.34) 0 10%, transparent 11%),
    repeating-conic-gradient(from 10deg, rgba(115,62,35,.9) 0 9deg, rgba(180,102,58,.72) 10deg 18deg);
}

.cup-bowl[data-top="sprinkles"] .cup-spray {
  color: #fff8df;
}

.cup-bowl[data-top="sprinkles"] .cup-spray::before {
  background:
    linear-gradient(24deg, transparent 0 38%, #ef6e9a 39% 43%, transparent 44%),
    linear-gradient(112deg, transparent 0 48%, #62b7dc 49% 53%, transparent 54%),
    linear-gradient(-36deg, transparent 0 58%, #f1c84b 59% 63%, transparent 64%),
    radial-gradient(circle at 50% 54%, #fff7e7 0 44%, transparent 45%);
}

/* Distinct spray animation: soft nozzle mist instead of pouring liquid */
.cup-bowl.is-spraying::before {
  left: 50%;
  top: 8%;
  z-index: 8;
  width: 86px;
  height: 86px;
  max-height: none;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 58%, var(--effect-color, #fff5d8) 0 10%, transparent 11%),
    radial-gradient(circle at 26% 42%, var(--effect-color, #fff5d8) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 40%, var(--effect-color, #fff5d8) 0 8%, transparent 9%),
    radial-gradient(circle at 38% 22%, rgba(255,255,255,.82) 0 5%, transparent 6%),
    radial-gradient(circle at 62% 24%, rgba(255,255,255,.74) 0 5%, transparent 6%);
  box-shadow: none;
  opacity: 0;
  animation: sprayCloudBetter .72s ease-out both;
}

.cup-bowl.is-spraying::after {
  content: "";
  position: absolute;
  left: 23%;
  top: 2%;
  z-index: 9;
  width: 62px;
  height: 28px;
  border: 4px solid var(--line);
  border-radius: 12px 22px 22px 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), transparent 38%),
    #d7dfdf;
  box-shadow:
    22px 12px 0 -9px #9aa8a9,
    0 8px 0 rgba(47,41,36,.16);
  transform: rotate(-18deg);
  animation: sprayNozzleBetter .72s ease-out both;
}

.cup-bowl.is-spraying .cup-effect {
  border-style: dotted;
  border-width: 9px;
  animation: sprayFoamBloomBetter .72s ease-out;
}

.cup-bowl.is-spraying .effect-particles i {
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--effect-color, #fff5d8), white 35%);
}

.cup-bowl.is-spraying .effect-particles i:nth-child(1) { animation: sprayMistBetterA .72s ease-out; }
.cup-bowl.is-spraying .effect-particles i:nth-child(2) { animation: sprayMistBetterB .72s ease-out .04s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(3) { animation: sprayMistBetterC .72s ease-out .08s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(4) { animation: sprayMistBetterD .72s ease-out .12s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(5) { animation: sprayMistBetterE .72s ease-out .16s; }

@keyframes sprayCloudBetter {
  0% { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(.34); filter: blur(0); }
  22% { opacity: .95; }
  58% { opacity: .9; transform: translateX(-50%) translateY(20px) scale(1.02); filter: blur(.4px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(52px) scale(1.28); filter: blur(1.4px); }
}

@keyframes sprayNozzleBetter {
  0% { opacity: 0; transform: translate(-18px, -18px) rotate(-8deg); }
  18% { opacity: 1; transform: translate(0, 0) rotate(-20deg); }
  62% { opacity: 1; transform: translate(2px, 1px) rotate(-24deg); }
  100% { opacity: 0; transform: translate(-16px, -14px) rotate(-8deg); }
}

@keyframes sprayFoamBloomBetter {
  0% { opacity: 0; transform: scale(.12); border-width: 12px; }
  30% { opacity: .9; transform: scale(.5); }
  72% { opacity: .42; transform: scale(.94); }
  100% { opacity: 0; transform: scale(1.28); border-width: 3px; }
}

@keyframes sprayMistBetterA {
  0% { opacity: 0; transform: translate(-34px, -58px) scale(.3); }
  26% { opacity: .95; }
  100% { opacity: 0; transform: translate(-30px, -8px) scale(1.15); }
}

@keyframes sprayMistBetterB {
  0% { opacity: 0; transform: translate(-12px, -68px) scale(.28); }
  26% { opacity: .9; }
  100% { opacity: 0; transform: translate(-4px, -4px) scale(1.3); }
}

@keyframes sprayMistBetterC {
  0% { opacity: 0; transform: translate(16px, -64px) scale(.32); }
  26% { opacity: .86; }
  100% { opacity: 0; transform: translate(24px, -2px) scale(1.2); }
}

@keyframes sprayMistBetterD {
  0% { opacity: 0; transform: translate(-46px, -34px) scale(.22); }
  26% { opacity: .82; }
  100% { opacity: 0; transform: translate(-48px, 22px) scale(.95); }
}

@keyframes sprayMistBetterE {
  0% { opacity: 0; transform: translate(42px, -34px) scale(.22); }
  26% { opacity: .82; }
  100% { opacity: 0; transform: translate(48px, 22px) scale(.95); }
}

/* Better pour animation */
.cup-bowl::before {
  z-index: 7;
  left: 30%;
  top: 5%;
  width: 18px;
  max-height: none;
  transform: rotate(24deg);
  transform-origin: top center;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), transparent 42%),
    var(--pour-color, transparent);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.2),
    6px 14px 0 -7px var(--pour-color, transparent),
    -4px 28px 0 -8px var(--pour-color, transparent);
}

.cup-bowl.is-pouring::before {
  animation: pourStreamBetter .7s cubic-bezier(.2,.75,.25,1) both;
}

.pour-source-cup {
  left: 3%;
  top: -5%;
  width: 92px;
  height: 74px;
  transform: translate(-20px, -26px) rotate(-16deg);
}

.pour-source-cup i {
  left: 18px;
  top: 11px;
  width: 48px;
  height: 48px;
  border-radius: 13px 13px 20px 20px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.72), transparent 16%),
    linear-gradient(to top, var(--effect-color, #d49135) 0 58%, rgba(255,255,255,.88) 59% 100%);
}

.pour-source-cup b {
  right: 0;
  top: 25px;
  width: 30px;
  height: 14px;
}

.pour-source-cup::after {
  right: -21px;
  top: 48px;
  width: 16px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.38), transparent 44%),
    var(--effect-color, #d49135);
  transform: rotate(42deg);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.18),
    12px 20px 0 -7px var(--effect-color, #d49135);
}

.cup-bowl.is-pouring .pour-source-cup {
  animation: sourceCupPourBetter .72s cubic-bezier(.2,.75,.25,1) both;
}

.cup-bowl.is-pouring .pour-source-cup::after {
  animation: sourceCupStreamBetter .72s cubic-bezier(.2,.75,.25,1) both;
}

.cup-bowl.is-pouring .cup-effect {
  animation: cupRippleBetter .7s ease-out;
}

.cup-bowl.is-pouring .effect-particles i:nth-child(1) { animation: pourDropA .7s ease-out; }
.cup-bowl.is-pouring .effect-particles i:nth-child(2) { animation: pourDropB .7s ease-out .05s; }
.cup-bowl.is-pouring .effect-particles i:nth-child(3) { animation: pourDropC .7s ease-out .1s; }
.cup-bowl.is-pouring .effect-particles i:nth-child(4) { animation: pourDropD .7s ease-out .14s; }
.cup-bowl.is-pouring .effect-particles i:nth-child(5) { animation: pourDropE .7s ease-out .18s; }

@keyframes pourStreamBetter {
  0% { height: 0; opacity: 0; translate: -14px -10px; scale: .8 1; }
  18% { height: 18px; opacity: 1; }
  48% { height: 96px; opacity: 1; translate: 2px 4px; scale: 1 1; }
  82% { height: 88px; opacity: .95; translate: 3px 5px; }
  100% { height: 20px; opacity: 0; translate: 18px 34px; scale: .7 1; }
}

@keyframes sourceCupPourBetter {
  0% { opacity: 0; transform: translate(-28px, -34px) rotate(-16deg) scale(.92); }
  18% { opacity: 1; transform: translate(-12px, -18px) rotate(-48deg) scale(1); }
  74% { opacity: 1; transform: translate(-10px, -16px) rotate(-50deg) scale(1.02); }
  100% { opacity: 0; transform: translate(-24px, -32px) rotate(-18deg) scale(.94); }
}

@keyframes sourceCupStreamBetter {
  0% { height: 0; opacity: 0; }
  18% { height: 0; opacity: 0; }
  34% { height: 112px; opacity: 1; }
  76% { height: 112px; opacity: 1; }
  100% { height: 0; opacity: 0; }
}

@keyframes cupRippleBetter {
  0% { opacity: 0; transform: scale(.14); border-width: 10px; }
  22% { opacity: .9; transform: scale(.28); }
  62% { opacity: .5; transform: scale(.82); }
  100% { opacity: 0; transform: scale(1.28); border-width: 2px; }
}

@keyframes pourDropA {
  0% { opacity: 0; transform: translate(-48px, -56px) scale(.5); }
  28% { opacity: .95; }
  100% { opacity: 0; transform: translate(-6px, 16px) scale(.16); }
}

@keyframes pourDropB {
  0% { opacity: 0; transform: translate(-34px, -66px) scale(.45); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translate(10px, 18px) scale(.14); }
}

@keyframes pourDropC {
  0% { opacity: 0; transform: translate(-22px, -78px) scale(.55); }
  30% { opacity: .85; }
  100% { opacity: 0; transform: translate(22px, 28px) scale(.16); }
}

@keyframes pourDropD {
  0% { opacity: 0; transform: translate(-54px, -42px) scale(.38); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: translate(-20px, 36px) scale(.12); }
}

@keyframes pourDropE {
  0% { opacity: 0; transform: translate(-18px, -50px) scale(.42); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: translate(32px, 40px) scale(.12); }
}

/* More realistic foam spray: angled can, mist cone, and soft foam landing */
.cup-bowl.is-spraying::before {
  left: 34%;
  top: 4%;
  z-index: 9;
  width: 122px;
  height: 112px;
  max-height: none;
  border-radius: 28% 32% 54% 54%;
  clip-path: polygon(22% 0, 58% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 26% 22%, rgba(255,255,255,.95) 0 5%, transparent 6%),
    radial-gradient(circle at 38% 34%, var(--effect-color, #fff5d8) 0 8%, transparent 9%),
    radial-gradient(circle at 56% 46%, rgba(255,255,255,.92) 0 9%, transparent 10%),
    radial-gradient(circle at 42% 62%, var(--effect-color, #fff5d8) 0 10%, transparent 11%),
    radial-gradient(circle at 72% 74%, rgba(255,255,255,.72) 0 8%, transparent 9%),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,0) 82%);
  box-shadow: none;
  filter: blur(.35px);
  opacity: 0;
  transform: rotate(-19deg);
  transform-origin: 20% 0;
  animation: foamSprayConeReal .86s ease-out both;
}

.cup-bowl.is-spraying::after {
  content: "";
  position: absolute;
  left: 3%;
  top: -11%;
  z-index: 10;
  width: 70px;
  height: 96px;
  border: 4px solid var(--line);
  border-radius: 20px 20px 14px 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.72), transparent 38%),
    linear-gradient(180deg, #f7fbfa 0 12%, #d2dedc 13% 82%, #aebdbc 83% 100%);
  box-shadow:
    inset 12px 0 0 rgba(255,255,255,.36),
    inset -8px 0 0 rgba(66,82,80,.12),
    0 10px 0 rgba(47,41,36,.14);
  transform: rotate(-34deg);
  transform-origin: 70% 80%;
  animation: foamCanReal .86s ease-out both;
}

.cup-bowl.is-spraying .cup-effect {
  border-style: dotted;
  border-width: 8px;
  border-color: color-mix(in srgb, var(--effect-color, #fff5d8), white 44%);
  animation: foamImpactReal .86s ease-out;
}

.cup-bowl.is-spraying .cup-spray::before {
  animation: foamBuildReal .86s ease-out both;
}

.cup-bowl.is-spraying .effect-particles i {
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--effect-color, #fff5d8), white 24%),
    0 4px 8px rgba(138,110,74,.12);
}

.cup-bowl.is-spraying .effect-particles i:nth-child(1) { animation: foamMistRealA .86s ease-out; }
.cup-bowl.is-spraying .effect-particles i:nth-child(2) { animation: foamMistRealB .86s ease-out .04s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(3) { animation: foamMistRealC .86s ease-out .08s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(4) { animation: foamMistRealD .86s ease-out .12s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(5) { animation: foamMistRealE .86s ease-out .16s; }

@keyframes foamSprayConeReal {
  0% { opacity: 0; transform: translate(-42px, -34px) rotate(-21deg) scale(.24); filter: blur(0); }
  16% { opacity: .92; }
  50% { opacity: .9; transform: translate(-8px, 8px) rotate(-19deg) scale(.82); filter: blur(.3px); }
  78% { opacity: .72; transform: translate(8px, 26px) rotate(-17deg) scale(1.04); filter: blur(.8px); }
  100% { opacity: 0; transform: translate(18px, 42px) rotate(-14deg) scale(1.22); filter: blur(1.6px); }
}

@keyframes foamCanReal {
  0% { opacity: 0; transform: translate(-22px, -20px) rotate(-20deg) scale(.92); }
  18% { opacity: 1; transform: translate(0, 0) rotate(-36deg) scale(1); }
  54% { opacity: 1; transform: translate(4px, 3px) rotate(-40deg) scale(1.01); }
  80% { opacity: 1; transform: translate(1px, 1px) rotate(-34deg) scale(1); }
  100% { opacity: 0; transform: translate(-18px, -18px) rotate(-22deg) scale(.94); }
}

@keyframes foamImpactReal {
  0% { opacity: 0; transform: scale(.08); border-width: 12px; }
  24% { opacity: .9; transform: scale(.36); }
  62% { opacity: .58; transform: scale(.82); }
  100% { opacity: 0; transform: scale(1.18); border-width: 2px; }
}

@keyframes foamBuildReal {
  0% { transform: translateY(8px) scale(.76); filter: saturate(.9); }
  34% { transform: translateY(2px) scale(1.02); filter: saturate(1.06); }
  68% { transform: translateY(-2px) scale(1.08); filter: saturate(1.12); }
  100% { transform: translateY(0) scale(1); filter: saturate(1); }
}

@keyframes foamMistRealA {
  0% { opacity: 0; transform: translate(-78px, -88px) scale(.24); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translate(-18px, 4px) scale(1.02); }
}

@keyframes foamMistRealB {
  0% { opacity: 0; transform: translate(-66px, -78px) scale(.18); }
  24% { opacity: .88; }
  100% { opacity: 0; transform: translate(2px, 8px) scale(1.18); }
}

@keyframes foamMistRealC {
  0% { opacity: 0; transform: translate(-48px, -82px) scale(.22); }
  24% { opacity: .86; }
  100% { opacity: 0; transform: translate(20px, 14px) scale(1.08); }
}

@keyframes foamMistRealD {
  0% { opacity: 0; transform: translate(-72px, -56px) scale(.16); }
  28% { opacity: .74; }
  100% { opacity: 0; transform: translate(-30px, 26px) scale(.86); }
}

@keyframes foamMistRealE {
  0% { opacity: 0; transform: translate(-34px, -58px) scale(.16); }
  28% { opacity: .74; }
  100% { opacity: 0; transform: translate(36px, 30px) scale(.84); }
}

/* Bigger prep cup target */
.prep-workspace {
  grid-template-columns: minmax(560px, 1.65fr) minmax(280px, .62fr);
}

.simple-cup {
  min-width: 260px;
  padding: 12px;
}

.cup-bowl {
  width: min(286px, 94%);
}

@media (max-width: 900px) {
  .simple-cup {
    min-width: 0;
  }

  .cup-bowl {
    width: min(310px, 82vw);
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .cup-bowl {
    width: min(240px, 90%);
  }
}

/* Bigger, clearer ingredient animations */
.cup-bowl.is-pouring {
  animation: cupReactPour .9s cubic-bezier(.16,.8,.24,1) both;
}

.cup-bowl.is-spraying {
  animation: cupReactSpray .98s cubic-bezier(.16,.8,.24,1) both;
}

.cup-bowl.is-adding {
  animation: cupReactIce .86s cubic-bezier(.16,.8,.24,1) both;
}

.cup-bowl.is-pouring::before {
  width: 22px;
  filter: drop-shadow(0 8px 5px rgba(88,50,26,.16));
  animation: pourStreamJuicy .92s cubic-bezier(.2,.72,.18,1) both;
}

.cup-bowl.is-pouring .pour-source-cup {
  animation: sourceCupPourJuicy .92s cubic-bezier(.2,.72,.18,1) both;
}

.cup-bowl.is-pouring .pour-source-cup::after {
  animation: sourceCupStreamJuicy .92s cubic-bezier(.2,.72,.18,1) both;
}

.cup-bowl.is-pouring .cup-effect {
  animation: cupRippleJuicy .92s ease-out;
}

.cup-bowl.is-pouring .cup-liquid {
  animation: drinkSurfaceSwirl .92s ease-out;
}

.cup-bowl.is-pouring .effect-particles i:nth-child(1) { animation: pourDropJuicyA .92s ease-out; }
.cup-bowl.is-pouring .effect-particles i:nth-child(2) { animation: pourDropJuicyB .92s ease-out .05s; }
.cup-bowl.is-pouring .effect-particles i:nth-child(3) { animation: pourDropJuicyC .92s ease-out .1s; }
.cup-bowl.is-pouring .effect-particles i:nth-child(4) { animation: pourDropJuicyD .92s ease-out .14s; }
.cup-bowl.is-pouring .effect-particles i:nth-child(5) { animation: pourDropJuicyE .92s ease-out .18s; }

.cup-bowl.is-spraying::before {
  animation: foamSprayConeJuicy 1s ease-out both;
}

.cup-bowl.is-spraying::after {
  animation: foamCanJuicy 1s ease-out both;
}

.cup-bowl.is-spraying .cup-effect {
  animation: foamImpactJuicy 1s ease-out;
}

.cup-bowl.is-spraying .cup-spray::before {
  animation: foamBuildJuicy 1s ease-out both;
}

.cup-bowl.is-spraying .effect-particles i:nth-child(1) { animation: foamMistJuicyA 1s ease-out; }
.cup-bowl.is-spraying .effect-particles i:nth-child(2) { animation: foamMistJuicyB 1s ease-out .05s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(3) { animation: foamMistJuicyC 1s ease-out .1s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(4) { animation: foamMistJuicyD 1s ease-out .15s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(5) { animation: foamMistJuicyE 1s ease-out .2s; }

.cup-bowl.is-adding::before {
  width: 68px;
  height: 68px;
  max-height: none;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), transparent 34%),
    linear-gradient(315deg, rgba(117,190,222,.22), transparent 46%),
    var(--effect-color, #dff4ff);
  box-shadow:
    22px 18px 0 -8px var(--effect-color, #dff4ff),
    -22px 24px 0 -10px var(--effect-color, #dff4ff),
    0 10px 0 rgba(47,41,36,.16);
  animation: iceDropJuicy .86s cubic-bezier(.18,.82,.22,1) both;
}

.cup-bowl.is-adding .cup-effect {
  animation: iceSplashJuicy .86s ease-out;
}

.cup-bowl.is-adding .cup-ice {
  animation: iceSettleJuicy .86s ease-out;
}

.cup-bowl.is-adding .effect-particles i:nth-child(1) { border-radius: 5px; animation: iceChipJuicyA .86s ease-out; }
.cup-bowl.is-adding .effect-particles i:nth-child(2) { border-radius: 5px; animation: iceChipJuicyB .86s ease-out .04s; }
.cup-bowl.is-adding .effect-particles i:nth-child(3) { border-radius: 5px; animation: iceChipJuicyC .86s ease-out .08s; }
.cup-bowl.is-adding .effect-particles i:nth-child(4) { border-radius: 5px; animation: iceChipJuicyD .86s ease-out .12s; }
.cup-bowl.is-adding .effect-particles i:nth-child(5) { border-radius: 5px; animation: iceChipJuicyE .86s ease-out .16s; }

@keyframes cupReactPour {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-3px) scale(1.018); }
  58% { transform: translateY(2px) scale(.994); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes cupReactSpray {
  0% { transform: rotate(0deg) scale(1); }
  22% { transform: rotate(-1.4deg) scale(1.014); }
  48% { transform: rotate(1.2deg) scale(1.02); }
  76% { transform: rotate(-.5deg) scale(1.006); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes cupReactIce {
  0% { transform: translateY(0) scale(1); }
  24% { transform: translateY(6px) scale(1.025); }
  48% { transform: translateY(-3px) scale(.992); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes pourStreamJuicy {
  0% { height: 0; opacity: 0; translate: -20px -18px; scale: .62 1; }
  15% { height: 18px; opacity: 1; }
  36% { height: 128px; opacity: 1; translate: -2px 4px; scale: 1.12 1; }
  68% { height: 128px; opacity: .98; translate: 6px 7px; scale: .96 1; }
  88% { height: 68px; opacity: .72; translate: 15px 24px; scale: .72 1; }
  100% { height: 0; opacity: 0; translate: 24px 42px; scale: .42 1; }
}

@keyframes sourceCupPourJuicy {
  0% { opacity: 0; transform: translate(-34px, -36px) rotate(-16deg) scale(.9); }
  16% { opacity: 1; transform: translate(-13px, -18px) rotate(-50deg) scale(1); }
  44% { opacity: 1; transform: translate(-8px, -15px) rotate(-56deg) scale(1.04); }
  78% { opacity: 1; transform: translate(-10px, -16px) rotate(-52deg) scale(1.02); }
  100% { opacity: 0; transform: translate(-30px, -32px) rotate(-20deg) scale(.92); }
}

@keyframes sourceCupStreamJuicy {
  0%, 16% { height: 0; opacity: 0; }
  28% { height: 132px; opacity: 1; }
  76% { height: 132px; opacity: 1; }
  100% { height: 0; opacity: 0; }
}

@keyframes cupRippleJuicy {
  0% { opacity: 0; transform: scale(.08); border-width: 14px; filter: blur(0); }
  18% { opacity: .95; transform: scale(.26); }
  52% { opacity: .62; transform: scale(.82); }
  100% { opacity: 0; transform: scale(1.38); border-width: 2px; filter: blur(1px); }
}

@keyframes drinkSurfaceSwirl {
  0% { filter: saturate(1) brightness(1); transform: rotate(0deg) scale(1); }
  38% { filter: saturate(1.28) brightness(1.06); transform: rotate(3deg) scale(1.025); }
  78% { filter: saturate(1.12) brightness(1.02); transform: rotate(-2deg) scale(1.01); }
  100% { filter: saturate(1.12) brightness(1); transform: rotate(0deg) scale(1); }
}

@keyframes pourDropJuicyA { 0% { opacity: 0; transform: translate(-66px, -78px) scale(.55); } 24% { opacity: .95; } 100% { opacity: 0; transform: translate(-8px, 22px) scale(.1); } }
@keyframes pourDropJuicyB { 0% { opacity: 0; transform: translate(-46px, -88px) scale(.42); } 28% { opacity: .9; } 100% { opacity: 0; transform: translate(12px, 20px) scale(.12); } }
@keyframes pourDropJuicyC { 0% { opacity: 0; transform: translate(-26px, -96px) scale(.55); } 28% { opacity: .86; } 100% { opacity: 0; transform: translate(30px, 30px) scale(.14); } }
@keyframes pourDropJuicyD { 0% { opacity: 0; transform: translate(-70px, -50px) scale(.35); } 32% { opacity: .78; } 100% { opacity: 0; transform: translate(-24px, 42px) scale(.1); } }
@keyframes pourDropJuicyE { 0% { opacity: 0; transform: translate(-28px, -62px) scale(.4); } 32% { opacity: .8; } 100% { opacity: 0; transform: translate(38px, 46px) scale(.1); } }

@keyframes foamSprayConeJuicy {
  0% { opacity: 0; transform: translate(-54px, -42px) rotate(-23deg) scale(.18); filter: blur(0); }
  14% { opacity: .94; }
  42% { opacity: .92; transform: translate(-12px, 4px) rotate(-18deg) scale(.92); filter: blur(.25px); }
  72% { opacity: .76; transform: translate(12px, 30px) rotate(-14deg) scale(1.12); filter: blur(.9px); }
  100% { opacity: 0; transform: translate(26px, 52px) rotate(-10deg) scale(1.34); filter: blur(1.8px); }
}

@keyframes foamCanJuicy {
  0% { opacity: 0; transform: translate(-28px, -24px) rotate(-18deg) scale(.9); }
  16% { opacity: 1; transform: translate(0, 0) rotate(-38deg) scale(1); }
  34% { opacity: 1; transform: translate(5px, 3px) rotate(-43deg) scale(1.03); }
  54% { opacity: 1; transform: translate(1px, 1px) rotate(-35deg) scale(1); }
  76% { opacity: 1; transform: translate(4px, 2px) rotate(-41deg) scale(1.02); }
  100% { opacity: 0; transform: translate(-20px, -20px) rotate(-22deg) scale(.92); }
}

@keyframes foamImpactJuicy {
  0% { opacity: 0; transform: scale(.04); border-width: 14px; }
  20% { opacity: .94; transform: scale(.34); }
  58% { opacity: .64; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.34); border-width: 2px; }
}

@keyframes foamBuildJuicy {
  0% { transform: translateY(10px) scale(.62) rotate(-2deg); filter: saturate(.9) brightness(1); }
  32% { transform: translateY(0) scale(1.1) rotate(2deg); filter: saturate(1.08) brightness(1.05); }
  62% { transform: translateY(-3px) scale(1.16) rotate(-1deg); filter: saturate(1.12) brightness(1.08); }
  100% { transform: translateY(0) scale(1) rotate(0deg); filter: saturate(1) brightness(1); }
}

@keyframes foamMistJuicyA { 0% { opacity: 0; transform: translate(-92px, -102px) scale(.18); } 22% { opacity: .98; } 100% { opacity: 0; transform: translate(-22px, 8px) scale(1.08); } }
@keyframes foamMistJuicyB { 0% { opacity: 0; transform: translate(-80px, -92px) scale(.16); } 24% { opacity: .9; } 100% { opacity: 0; transform: translate(0, 10px) scale(1.22); } }
@keyframes foamMistJuicyC { 0% { opacity: 0; transform: translate(-58px, -96px) scale(.18); } 24% { opacity: .88; } 100% { opacity: 0; transform: translate(26px, 16px) scale(1.14); } }
@keyframes foamMistJuicyD { 0% { opacity: 0; transform: translate(-86px, -66px) scale(.14); } 28% { opacity: .78; } 100% { opacity: 0; transform: translate(-36px, 32px) scale(.9); } }
@keyframes foamMistJuicyE { 0% { opacity: 0; transform: translate(-42px, -70px) scale(.14); } 28% { opacity: .78; } 100% { opacity: 0; transform: translate(44px, 36px) scale(.88); } }

@keyframes iceDropJuicy {
  0% { opacity: 0; transform: translate(-12px, -112px) rotate(-30deg) scale(.74); }
  20% { opacity: 1; }
  54% { opacity: 1; transform: translate(4px, -8px) rotate(18deg) scale(1.08); }
  68% { opacity: 1; transform: translate(-2px, 8px) rotate(26deg) scale(.96); }
  100% { opacity: 0; transform: translate(12px, 34px) rotate(48deg) scale(.72); }
}

@keyframes iceSplashJuicy {
  0% { opacity: 0; transform: scale(.08); border-width: 13px; }
  26% { opacity: .95; transform: scale(.42); }
  64% { opacity: .5; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.28); border-width: 2px; }
}

@keyframes iceSettleJuicy {
  0% { transform: translateY(-5px) rotate(-3deg); filter: brightness(1.08); }
  42% { transform: translateY(4px) rotate(3deg); filter: brightness(1.18); }
  70% { transform: translateY(-2px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
}

@keyframes iceChipJuicyA { 0% { opacity: 0; transform: translate(-10px, -82px) rotate(0deg) scale(.72); } 28% { opacity: .95; } 100% { opacity: 0; transform: translate(-54px, 42px) rotate(120deg) scale(.14); } }
@keyframes iceChipJuicyB { 0% { opacity: 0; transform: translate(4px, -78px) rotate(0deg) scale(.7); } 28% { opacity: .92; } 100% { opacity: 0; transform: translate(54px, 38px) rotate(-130deg) scale(.14); } }
@keyframes iceChipJuicyC { 0% { opacity: 0; transform: translate(0, -92px) rotate(0deg) scale(.78); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(2px, 58px) rotate(160deg) scale(.14); } }
@keyframes iceChipJuicyD { 0% { opacity: 0; transform: translate(-28px, -70px) rotate(0deg) scale(.58); } 32% { opacity: .82; } 100% { opacity: 0; transform: translate(-34px, 28px) rotate(90deg) scale(.12); } }
@keyframes iceChipJuicyE { 0% { opacity: 0; transform: translate(26px, -70px) rotate(0deg) scale(.58); } 32% { opacity: .82; } 100% { opacity: 0; transform: translate(36px, 30px) rotate(-90deg) scale(.12); } }

/* Graphics polish pass */
body {
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.72) 0 76px, transparent 78px),
    radial-gradient(circle at 84% 14%, rgba(255,235,190,.42) 0 96px, transparent 98px),
    linear-gradient(90deg, rgba(255,255,255,.14) 0 16px, transparent 16px 38px),
    linear-gradient(#86cddd 0 36%, #f3cf91 36% 64%, #bd7653 64% 100%);
}

.status-bar,
.hint-board,
.counter-scene,
.prep-table,
.message-log {
  border-color: #2b211b;
  box-shadow:
    0 14px 0 rgba(47,41,36,.14),
    0 28px 44px rgba(47,41,36,.22),
    inset 0 1px 0 rgba(255,255,255,.42);
}

.status-bar {
  background:
    radial-gradient(ellipse at 15% 0, rgba(255,255,255,.82), transparent 48%),
    linear-gradient(180deg, #fff9ed, #ead0a7);
}

.stats div,
.day-card div,
#hintList li,
.review-card,
.challenge-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), transparent 42%),
    linear-gradient(#fffdf7, #f3dfbd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 6px 0 rgba(91,57,36,.12);
}

.counter-scene {
  background:
    radial-gradient(ellipse at 52% 10%, rgba(255,255,255,.5) 0 160px, transparent 162px),
    radial-gradient(ellipse at 50% 62%, rgba(73,42,29,.2) 0 34%, transparent 35%),
    linear-gradient(90deg, rgba(255,255,255,.12) 0 16px, transparent 16px 40px),
    linear-gradient(#f7dfb4 0 43%, #d99662 43% 70%, #80503b 70% 100%);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,.12),
    inset 0 -86px 96px rgba(48,28,20,.3),
    0 18px 38px rgba(47,41,36,.2);
}

.back-wall::before,
.back-wall::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.back-wall::before {
  left: 0;
  right: 0;
  top: 122px;
  height: 16px;
  background:
    linear-gradient(90deg, transparent, rgba(94,57,40,.22), transparent),
    linear-gradient(#9a6542, #5d3828);
  box-shadow: 0 7px 0 rgba(47,41,36,.18);
}

.back-wall::after {
  right: 9%;
  top: 30px;
  width: 140px;
  height: 78px;
  border: 4px solid rgba(51,40,31,.78);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(51,40,31,.35) 48% 52%, transparent 53%),
    linear-gradient(180deg, transparent 46%, rgba(51,40,31,.35) 47% 53%, transparent 54%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(143,207,227,.35));
  box-shadow: 0 9px 0 rgba(51,40,31,.15);
}

.menu-board {
  background:
    radial-gradient(ellipse at 22% 10%, rgba(255,255,255,.2), transparent 42%),
    linear-gradient(180deg, #436953, #2f493c);
  box-shadow:
    0 10px 0 rgba(47,41,36,.2),
    inset 0 0 0 2px rgba(255,255,255,.08);
}

.shelf {
  filter: drop-shadow(0 10px 0 rgba(47,41,36,.12));
}

.speech-bubble,
.paper-ticket,
.prep-order-paper {
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(115,86,55,.09) 27px 29px),
    linear-gradient(135deg, rgba(255,255,255,.96), #fff0cc);
  box-shadow:
    10px 12px 0 rgba(51,40,31,.14),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.person {
  filter: drop-shadow(0 18px 14px rgba(47,41,36,.22));
}

.person-face {
  background:
    radial-gradient(circle at 36% 36%, rgba(255,255,255,.55) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 58%, rgba(202,103,86,.22) 0 8%, transparent 9%),
    linear-gradient(135deg, #ffd0a4, #e69a75);
  box-shadow:
    inset -10px -12px 0 rgba(115,62,45,.12),
    inset 8px 8px 0 rgba(255,255,255,.22),
    0 9px 0 rgba(51,40,31,.16);
}

.person-hair {
  box-shadow:
    inset -10px -8px 0 rgba(0,0,0,.14),
    0 8px 0 rgba(51,40,31,.15);
}

.tablet {
  background:
    linear-gradient(135deg, #36302b, #171310);
  box-shadow:
    0 12px 0 rgba(32,25,21,.82),
    0 30px 34px rgba(47,41,36,.34),
    inset 0 2px 0 rgba(255,255,255,.13);
}

.tablet-screen {
  background:
    radial-gradient(ellipse at 18% 0, rgba(255,255,255,.72), transparent 36%),
    linear-gradient(#fff7e8, #edd5b0);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.35),
    inset 0 -18px 28px rgba(116,73,44,.1);
}

.ipad-mini,
.order-note,
.tablet-head {
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), transparent 40%),
    linear-gradient(#fffdf7, #efd7b1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -6px 0 rgba(134,91,55,.08),
    0 7px 0 rgba(51,40,31,.12);
}

.prep-table {
  background:
    radial-gradient(ellipse at 45% 0, rgba(255,255,255,.32), transparent 38%),
    linear-gradient(120deg, rgba(255,255,255,.24), transparent 30%),
    repeating-linear-gradient(90deg, #d99a66 0 78px, #b86b45 78px 84px, #cf8757 84px 124px);
  box-shadow:
    0 16px 0 rgba(47,41,36,.16),
    0 32px 42px rgba(47,41,36,.25),
    inset 0 -44px 0 rgba(69,42,28,.22),
    inset 0 0 0 6px rgba(255,255,255,.1);
}

.prep-table::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 44%;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  pointer-events: none;
}

.ingredient-group {
  background:
    radial-gradient(ellipse at 18% 0, rgba(255,255,255,.7), transparent 42%),
    linear-gradient(#fff8ec, #ead1aa);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -7px 0 rgba(112,72,44,.08),
    0 8px 0 rgba(51,40,31,.12);
}

.ingredient-group.active {
  background:
    radial-gradient(ellipse at 18% 0, rgba(255,255,255,.76), transparent 42%),
    linear-gradient(#f4fff7, #ccebd9);
}

.tool {
  background:
    radial-gradient(ellipse at 20% 0, rgba(255,255,255,.86), transparent 44%),
    linear-gradient(#fffaf1, #e7c99b);
  box-shadow:
    0 5px 0 rgba(51,40,31,.24),
    inset 0 -5px 0 rgba(111,70,48,.08);
}

.tool.selected {
  background:
    radial-gradient(ellipse at 20% 0, rgba(255,255,255,.86), transparent 44%),
    linear-gradient(#effff5, #bfe7d4);
}

.simple-cup {
  background:
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.78), transparent 42%),
    linear-gradient(#fff7e8, #dfb67d);
  box-shadow:
    0 14px 0 rgba(51,40,31,.16),
    0 24px 32px rgba(47,41,36,.18),
    inset 0 0 0 4px rgba(255,255,255,.26);
}

.cup-bowl {
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.82) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, #fff9e8 0 61%, #e5a365 62% 69%, #8d5636 70% 76%, #4d2d22 77% 81%, rgba(47,41,36,.18) 82% 85%, transparent 86%);
  box-shadow:
    0 18px 0 rgba(47,41,36,.2),
    0 30px 38px rgba(47,41,36,.24),
    inset 0 14px 0 rgba(255,255,255,.62),
    inset 0 -18px 24px rgba(80,48,31,.16);
}

.cup-rim {
  border-color: #efb875;
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.34),
    inset 0 -9px 0 rgba(97,58,36,.17),
    0 0 0 4px #4d2d22,
    0 10px 0 rgba(51,40,31,.18);
}

.cup-liquid {
  box-shadow:
    inset 0 18px 24px rgba(255,255,255,.38),
    inset 0 -22px 26px rgba(35,22,17,.24),
    inset 0 0 0 6px rgba(255,255,255,.14),
    0 0 0 2px rgba(88,55,36,.16);
}

.drink-3d {
  box-shadow:
    0 13px 0 rgba(255,255,255,.2),
    24px 30px 22px rgba(47,41,36,.34),
    inset -26px 0 0 rgba(0,0,0,.13),
    inset 20px 0 0 rgba(255,255,255,.32);
}

/* Larger ingredient controls */
.prep-workspace {
  grid-template-columns: minmax(620px, 1.72fr) minmax(270px, .58fr);
  gap: 18px;
}

.prep-tools {
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 10px;
}

.ingredient-group {
  gap: 8px;
  padding: 9px;
}

.ingredient-group h3 {
  font-size: .9rem;
}

.tool {
  min-height: 62px;
  padding: 8px 10px;
}

.tool-label {
  font-size: .94rem;
  line-height: 1.08;
}

.tool-icon {
  width: 38px;
  height: 38px;
}

@media (max-height: 760px) and (min-width: 901px) {
  .prep-tools {
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    gap: 10px;
  }

  .ingredient-group {
    gap: 7px;
    padding: 8px;
  }

  .tool {
    min-height: 58px;
    padding: 8px 10px;
  }

  .tool-icon {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 900px) {
  .prep-tools {
    grid-template-columns: repeat(2, minmax(136px, 1fr));
    gap: 12px;
  }

  .tool {
    min-height: 74px;
  }
}

@media (max-width: 580px) {
  .prep-tools {
    grid-template-columns: 1fr;
  }

  .tool {
    min-height: 78px;
  }
}

/* Give the foam/topping choices extra room without shrinking the buttons */
.prep-tools {
  align-items: start;
}

.ingredient-group[data-step="top"] {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ingredient-group[data-step="top"] h3 {
  grid-column: 1 / -1;
}

.ingredient-group[data-step="top"] .tool {
  min-width: 0;
}

@media (max-height: 760px) and (min-width: 901px) {
  .ingredient-group[data-step="top"] {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ingredient-group[data-step="top"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 580px) {
  .ingredient-group[data-step="top"] {
    grid-template-columns: 1fr;
  }
}

/* Keep action buttons from visually covering the last ingredient row */
.prep-workspace {
  padding-bottom: 10px;
}

.prep-actions {
  position: static;
  z-index: auto;
  padding-top: 6px;
  background: transparent;
  box-shadow: none;
}

/* Bigger kitchen paper ticket without changing ingredient sizing */
.prep-order-paper {
  display: block;
  width: min(760px, 100%);
  min-height: 96px;
  padding: 14px 18px;
}

.prep-order-paper span {
  margin-bottom: 5px;
  font-size: .84rem;
}

.prep-order-paper strong {
  margin-bottom: 5px;
  font-size: 1.16rem;
  line-height: 1.08;
}

.prep-order-paper p {
  font-size: 1rem;
  line-height: 1.24;
  -webkit-line-clamp: 3;
}

@media (max-height: 760px) {
  .prep-order-paper {
    display: block;
    min-height: 78px;
    padding: 10px 14px;
  }

  .prep-order-paper span {
    font-size: .74rem;
  }

  .prep-order-paper strong {
    font-size: 1rem;
  }

  .prep-order-paper p {
    font-size: .9rem;
    line-height: 1.16;
    -webkit-line-clamp: 2;
  }
}

/* Smaller finished foam, stronger spray moment */
.cup-bowl[data-top="foam"] .cup-spray {
  inset: 32%;
}

.cup-bowl[data-top="cream"] .cup-spray {
  inset: 30%;
}

.cup-bowl[data-top="extra-foam"] .cup-spray,
.cup-bowl[data-top="extra-cream"] .cup-spray {
  inset: 24%;
}

.cup-bowl[data-top="foam"] .cup-spray::before,
.cup-bowl[data-top="extra-foam"] .cup-spray::before {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.96) 0 11%, transparent 12%),
    radial-gradient(circle at 64% 34%, rgba(255,255,255,.82) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 62%, #fff1c7 0 42%, transparent 43%);
}

.cup-bowl.is-spraying::before {
  left: 29%;
  top: -2%;
  width: 150px;
  height: 126px;
  clip-path: polygon(12% 0, 54% 0, 100% 92%, 74% 100%, 0 64%);
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.95) 0 4%, transparent 5%),
    radial-gradient(circle at 28% 26%, var(--effect-color, #fff5d8) 0 7%, transparent 8%),
    radial-gradient(circle at 45% 40%, rgba(255,255,255,.96) 0 8%, transparent 9%),
    radial-gradient(circle at 58% 58%, var(--effect-color, #fff5d8) 0 9%, transparent 10%),
    radial-gradient(circle at 76% 76%, rgba(255,255,255,.72) 0 7%, transparent 8%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,0) 78%);
  animation: foamSprayFanBetter 1.05s cubic-bezier(.14,.82,.22,1) both;
}

.cup-bowl.is-spraying::after {
  left: -1%;
  top: -12%;
  width: 76px;
  height: 104px;
  animation: foamCanShakeBetter 1.05s ease-out both;
}

.cup-bowl.is-spraying .cup-effect {
  animation: foamLandingPopBetter 1.05s ease-out;
}

.cup-bowl.is-spraying .cup-spray::before {
  animation: smallFoamSettleBetter 1.05s ease-out both;
}

.cup-bowl.is-spraying .effect-particles i:nth-child(1) { animation: foamDotBetterA 1.05s ease-out; }
.cup-bowl.is-spraying .effect-particles i:nth-child(2) { animation: foamDotBetterB 1.05s ease-out .05s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(3) { animation: foamDotBetterC 1.05s ease-out .1s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(4) { animation: foamDotBetterD 1.05s ease-out .15s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(5) { animation: foamDotBetterE 1.05s ease-out .2s; }

@keyframes foamSprayFanBetter {
  0% { opacity: 0; transform: translate(-54px, -42px) rotate(-24deg) scale(.12); filter: blur(0); }
  14% { opacity: .98; }
  36% { opacity: .96; transform: translate(-18px, 0) rotate(-20deg) scale(.86); filter: blur(.2px); }
  66% { opacity: .8; transform: translate(10px, 28px) rotate(-13deg) scale(1.1); filter: blur(.8px); }
  100% { opacity: 0; transform: translate(28px, 54px) rotate(-8deg) scale(1.34); filter: blur(1.9px); }
}

@keyframes foamCanShakeBetter {
  0% { opacity: 0; transform: translate(-28px, -24px) rotate(-18deg) scale(.9); }
  14% { opacity: 1; transform: translate(0, 0) rotate(-38deg) scale(1); }
  30% { opacity: 1; transform: translate(6px, 3px) rotate(-45deg) scale(1.03); }
  48% { opacity: 1; transform: translate(0, 1px) rotate(-34deg) scale(1); }
  68% { opacity: 1; transform: translate(5px, 2px) rotate(-43deg) scale(1.02); }
  100% { opacity: 0; transform: translate(-20px, -20px) rotate(-22deg) scale(.92); }
}

@keyframes foamLandingPopBetter {
  0% { opacity: 0; transform: scale(.04); border-width: 14px; }
  22% { opacity: .95; transform: scale(.28); }
  56% { opacity: .6; transform: scale(.74); }
  100% { opacity: 0; transform: scale(1.08); border-width: 2px; }
}

@keyframes smallFoamSettleBetter {
  0% { transform: translateY(8px) scale(.5); filter: brightness(1.08); }
  30% { transform: translateY(-3px) scale(1.12); filter: brightness(1.14); }
  64% { transform: translateY(1px) scale(.92); }
  100% { transform: translateY(0) scale(.82); filter: brightness(1); }
}

@keyframes foamDotBetterA { 0% { opacity: 0; transform: translate(-98px, -108px) scale(.14); } 22% { opacity: .98; } 100% { opacity: 0; transform: translate(-24px, 0) scale(.88); } }
@keyframes foamDotBetterB { 0% { opacity: 0; transform: translate(-86px, -98px) scale(.14); } 24% { opacity: .92; } 100% { opacity: 0; transform: translate(-2px, 6px) scale(1); } }
@keyframes foamDotBetterC { 0% { opacity: 0; transform: translate(-66px, -106px) scale(.16); } 24% { opacity: .9; } 100% { opacity: 0; transform: translate(20px, 12px) scale(.94); } }
@keyframes foamDotBetterD { 0% { opacity: 0; transform: translate(-88px, -70px) scale(.12); } 28% { opacity: .8; } 100% { opacity: 0; transform: translate(-36px, 26px) scale(.7); } }
@keyframes foamDotBetterE { 0% { opacity: 0; transform: translate(-44px, -74px) scale(.12); } 28% { opacity: .8; } 100% { opacity: 0; transform: translate(38px, 30px) scale(.7); } }

/* Combo, receipt, smoothie, and customer polish */
.ipad-mini.wide strong {
  font-size: clamp(.94rem, 1.4vw, 1.1rem);
  line-height: 1.18;
}

.order-note span {
  color: #7a5136;
}

.cup-bowl[data-base="smoothie"] .cup-liquid {
  filter: saturate(1.32) contrast(1.04);
}

.cup-bowl[data-base="smoothie"] .cup-liquid::before {
  border-color: rgba(255,255,255,.34);
  border-left-color: transparent;
}

.cup-bowl[data-base="smoothie"] .cup-liquid::after {
  background:
    radial-gradient(circle at 28% 34%, rgba(255,255,255,.36) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 58%, rgba(114,23,58,.18) 0 16%, transparent 17%),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.26) 0 8%, transparent 9%),
    radial-gradient(circle at 32% 68%, rgba(114,23,58,.18) 0 7%, transparent 8%);
}

.cup-bowl[data-flavor="berry"] .cup-liquid::before,
.cup-bowl[data-flavor="banana"] .cup-liquid::before,
.cup-bowl[data-flavor="caramel"] .cup-liquid::before,
.cup-bowl[data-flavor="mocha"] .cup-liquid::before {
  border-width: 6px;
  border-top-color: rgba(255,255,255,.36);
  border-right-color: rgba(90,42,32,.22);
}

.foam-art {
  inset: 28%;
  z-index: 5;
  opacity: 0;
  transform: scale(.72) rotate(-16deg);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.94) 0 18%, transparent 19%),
    conic-gradient(from 20deg, transparent 0 12%, rgba(255,255,255,.95) 13% 20%, transparent 21% 34%, rgba(255,245,210,.95) 35% 44%, transparent 45% 60%, rgba(255,255,255,.9) 61% 70%, transparent 71% 100%);
  filter: drop-shadow(0 3px 0 rgba(86,55,36,.14));
  pointer-events: none;
}

.cup-bowl[data-foam-art="dot"] .foam-art,
.cup-bowl[data-foam-art="swirl"] .foam-art,
.cup-bowl[data-foam-art="heart"] .foam-art,
.cup-bowl[data-foam-art="leaf"] .foam-art,
.cup-bowl[data-foam-art="star"] .foam-art,
.cup-bowl[data-foam-art="spiral"] .foam-art {
  opacity: .95;
}

.cup-bowl[data-foam-art="dot"] .foam-art {
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.96) 0 54%, transparent 55%);
}

.cup-bowl[data-foam-art="swirl"] .foam-art {
  inset: 31%;
  animation: foamArtSettle .5s ease-out both;
}

.cup-bowl[data-foam-art="spiral"] .foam-art {
  inset: 24%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.98) 0 12%, transparent 13%),
    repeating-conic-gradient(from -18deg, rgba(255,255,255,.96) 0 12deg, rgba(255,238,195,.92) 13deg 20deg, transparent 21deg 32deg);
  animation: foamArtRosette .7s ease-out both;
}

.cup-bowl[data-foam-art="heart"] .foam-art {
  inset: 28%;
  border-radius: 46% 46% 52% 52%;
  background:
    radial-gradient(circle at 35% 34%, rgba(255,255,255,.98) 0 28%, transparent 29%),
    radial-gradient(circle at 65% 34%, rgba(255,255,255,.98) 0 28%, transparent 29%),
    linear-gradient(135deg, transparent 0 34%, rgba(255,245,215,.98) 35% 72%, transparent 73%);
  transform: rotate(45deg);
  animation: foamArtRosette .7s ease-out both;
}

.cup-bowl[data-foam-art="leaf"] .foam-art {
  inset: 25%;
  border-radius: 65% 5% 65% 5%;
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(220,184,112,.45) 46% 52%, transparent 53%),
    radial-gradient(ellipse at 45% 50%, rgba(255,255,255,.98) 0 54%, transparent 55%);
  transform: rotate(-34deg);
  animation: foamArtRosette .7s ease-out both;
}

.cup-bowl[data-foam-art="star"] .foam-art {
  inset: 27%;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  background: rgba(255,255,255,.98);
  animation: foamArtRosette .7s ease-out both;
}

.cup-bowl.is-spraying .foam-art {
  animation: foamArtDrawing .95s ease-out both;
}

@keyframes foamArtDrawing {
  0% { opacity: 0; transform: scale(.24) rotate(-80deg); filter: blur(.5px); }
  40% { opacity: .95; transform: scale(.76) rotate(-22deg); }
  100% { opacity: .95; transform: scale(1) rotate(0deg); filter: blur(0); }
}

@keyframes foamArtSettle {
  0% { transform: scale(.78) rotate(-34deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes foamArtRosette {
  0% { transform: scale(.62) rotate(-48deg); filter: blur(.3px); }
  70% { transform: scale(1.08) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); filter: blur(0); }
}

.person[data-face="round"] .person-face { border-radius: 46% 46% 48% 48%; }
.person[data-face="square"] .person-face { border-radius: 36% 36% 28% 28%; }
.person[data-face="heart"] .person-face { border-radius: 48% 48% 56% 56%; }
.person[data-face="long"] .person-face { border-radius: 44% 44% 38% 38%; }

.person[data-mouth="open"] .mouth {
  height: 16px;
  border-radius: 0 0 999px 999px;
  background: #7e3f36;
  border-bottom: 0;
}

.person[data-mouth="flat"] .mouth {
  height: 5px;
  border-radius: 999px;
}

.cup-bowl[data-top="cinnamon"] .cup-spray::after {
  display: block;
  inset: 18%;
  background:
    radial-gradient(circle at 24% 30%, #7e4327 0 4%, transparent 5%),
    radial-gradient(circle at 70% 42%, #9e5832 0 4%, transparent 5%),
    radial-gradient(circle at 44% 74%, #7e4327 0 3%, transparent 4%);
}

.cup-bowl[data-top="sprinkles"] .cup-spray::after {
  display: block;
  inset: 18%;
  background:
    linear-gradient(25deg, transparent 0 42%, #ef6e9a 43% 48%, transparent 49%),
    linear-gradient(-35deg, transparent 0 50%, #62b7dc 51% 56%, transparent 57%),
    linear-gradient(95deg, transparent 0 60%, #f1c84b 61% 66%, transparent 67%);
}

.customer-card.locked {
  opacity: .62;
  filter: grayscale(.55);
}

/* Final fix: prep actions live in the cup panel, never over ingredients */
.simple-cup .prep-actions {
  position: static;
  z-index: auto;
  grid-column: auto;
  grid-row: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 3px solid rgba(59,43,34,.22);
  background: transparent;
  box-shadow: none;
}

.simple-cup .prep-actions button {
  min-height: 44px;
}

.prep-table {
  grid-template-rows: auto minmax(0, 1fr);
}

@media (max-width: 900px) {
  .prep-table {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
}

/* Keep foam visible: show toppings first and make them shorter */
.ingredient-group[data-step="top"] {
  order: -1;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.prep-tools {
  grid-auto-flow: dense;
}

@media (max-height: 760px) and (min-width: 901px) {
  .ingredient-group[data-step="top"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ingredient-group[data-step="top"] {
    order: -1;
    grid-template-columns: repeat(2, minmax(136px, 1fr));
  }
}

/* Screenshot fit pass: keep ingredients visible without scrolling */
.prep-workspace {
  grid-template-columns: minmax(560px, 1.86fr) minmax(250px, .5fr);
  gap: 12px;
}

.prep-tools {
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 9px;
}

.ingredient-group {
  gap: 7px;
  padding: 8px;
}

.ingredient-group h3 {
  font-size: .82rem;
  line-height: 1;
}

.tool {
  min-height: 56px;
  padding: 7px 9px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
}

.tool-label {
  font-size: .9rem;
  line-height: 1;
}

.tool-icon {
  width: 34px;
  height: 34px;
}

.ingredient-group[data-step="top"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.simple-cup .prep-actions button {
  min-height: 40px;
}

@media (max-height: 760px) and (min-width: 901px) {
  .prep-tools {
    grid-template-columns: repeat(4, minmax(108px, 1fr));
    gap: 7px;
  }

  .ingredient-group {
    gap: 5px;
    padding: 6px;
  }

  .tool {
    min-height: 48px;
    padding: 5px 7px;
  }

  .tool-label {
    font-size: .82rem;
  }

  .tool-icon {
    width: 30px;
    height: 30px;
  }
}

/* Text fit for many customer lines */
.speech-bubble,
.paper-ticket,
.prep-order-paper,
.order-note,
.ipad-mini {
  overflow: hidden;
}

.speech-bubble p,
.paper-ticket p,
.prep-order-paper p,
.order-note strong,
.ipad-mini strong,
.ipad-mini em {
  overflow-wrap: anywhere;
}

.speech-bubble p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.15em;
}

.paper-ticket p,
.prep-order-paper p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-note strong,
.ipad-mini.wide strong {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.8em;
}

/* iPad apps and mobile/tablet fit */
.steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.steps button {
  min-height: 38px;
  padding: 5px;
  font-size: .82rem;
}

.tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ipad-mini {
  min-height: 88px;
  padding: 10px;
}

.ipad-mini.wide,
.order-note {
  grid-column: 1 / -1;
}

@media (max-width: 900px), (pointer: coarse) {
  .game-shell {
    overflow: auto;
  }

  body {
    overflow: auto;
  }

  .cafe-stage,
  .prep-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .counter-scene {
    min-height: 760px;
  }

  .tablet {
    width: min(100%, 620px);
    margin: 0 auto;
  }

  .tablet-screen {
    gap: 8px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 580px) {
  .steps,
  .tool-grid {
    grid-template-columns: 1fr 1fr;
  }

  .steps button {
    font-size: .78rem;
  }

  .ipad-mini {
    min-height: 78px;
  }
}

/* Ten sizing fixes: final responsive pass */
.status-bar {
  min-height: 0;
  gap: 10px;
  padding: 8px 10px;
}

.stats {
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  gap: 6px;
}

.stats div,
.day-card div {
  min-width: 0;
  padding: 6px 7px;
}

.stats span {
  font-size: .66rem;
}

.stats strong,
.day-card strong {
  font-size: 1rem;
}

.speech-bubble {
  width: min(430px, calc(100% - 28px));
  min-height: 66px;
  padding: 10px 12px;
}

.speech-bubble p {
  font-size: clamp(.88rem, 1.25vw, 1.02rem);
  line-height: 1.25;
  max-height: 3.8em;
}

.paper-ticket {
  min-height: 220px;
  padding: 14px;
}

.paper-ticket strong {
  font-size: clamp(1rem, 1.4vw, 1.16rem);
}

.paper-ticket p {
  font-size: clamp(.92rem, 1.25vw, 1.05rem);
  line-height: 1.24;
}

.tablet {
  width: min(100%, 530px);
}

.tablet-screen {
  gap: 7px;
  padding: 9px;
}

.order-note {
  min-height: 96px;
  padding: 12px;
}

.order-note strong {
  font-size: clamp(.95rem, 1.6vw, 1.16rem);
  line-height: 1.18;
}

.ipad-mini {
  min-height: 76px;
  padding: 8px;
  gap: 4px;
}

.ipad-mini strong {
  font-size: clamp(.86rem, 1.2vw, 1rem);
  line-height: 1.12;
}

.ipad-mini em {
  font-size: .76rem;
  line-height: 1.16;
}

.prep-workspace {
  grid-template-columns: minmax(540px, 1.9fr) minmax(220px, .48fr);
  gap: 11px;
}

.prep-tools {
  grid-template-columns: repeat(5, minmax(104px, 1fr));
  gap: 8px;
}

.ingredient-group {
  gap: 6px;
  padding: 7px;
}

.ingredient-group h3 {
  font-size: .8rem;
}

.tool {
  min-height: 54px;
  padding: 7px 8px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.tool-label {
  font-size: .9rem;
  line-height: 1.05;
}

.tool-icon {
  width: 34px;
  height: 34px;
}

.ingredient-group[data-step="top"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.simple-cup {
  padding: 6px;
  gap: 5px;
}

.cup-bowl {
  width: min(150px, 72%);
}

.simple-cup li {
  padding: 5px 6px;
  font-size: .74rem;
}

.simple-cup .prep-actions button {
  min-height: 36px;
  padding: 5px 7px;
}

.prep-order-paper {
  width: min(860px, 100%);
  min-height: 128px;
  padding: 18px 22px;
}

.prep-order-paper span {
  margin-bottom: 7px;
  font-size: .9rem;
}

.prep-order-paper strong {
  margin-bottom: 7px;
  font-size: 1.28rem;
  line-height: 1.08;
}

.prep-order-paper p {
  font-size: 1.08rem;
  line-height: 1.24;
  -webkit-line-clamp: 4;
}

@media (max-height: 760px) and (min-width: 901px) {
  .prep-order-paper {
    min-height: 104px;
    padding: 13px 17px;
  }

  .prep-order-paper strong {
    font-size: 1.12rem;
  }

  .prep-order-paper p {
    font-size: .98rem;
    -webkit-line-clamp: 3;
  }
}

.shop-card {
  min-height: 68px;
  padding: 7px;
}

.shop-card strong {
  font-size: .82rem;
}

.shop-card em {
  font-size: .66rem;
  line-height: 1.1;
}

.message-log {
  min-height: 36px;
  max-height: 48px;
  padding: 6px 10px;
  overflow: hidden;
}

.message-log p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.15;
}

.tutorial-card {
  width: min(560px, calc(100vw - 24px));
  min-height: 0;
  padding: 18px;
}

.tutorial-card h2 {
  font-size: clamp(1.25rem, 3vw, 1.65rem);
}

.tutorial-card p:not(.eyebrow) {
  font-size: clamp(.95rem, 2vw, 1.08rem);
  line-height: 1.32;
}

@media (max-width: 1180px) {
  .prep-tools {
    grid-template-columns: repeat(4, minmax(104px, 1fr));
  }

  .ingredient-group[data-step="top"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .prep-tools {
    grid-template-columns: repeat(5, minmax(94px, 1fr));
    gap: 6px;
  }

  .tool {
    min-height: 48px;
    padding: 6px 7px;
  }

  .tool-label {
    font-size: .84rem;
  }

  .tool-icon {
    width: 31px;
    height: 31px;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  .game-shell {
    height: auto;
    min-height: 100vh;
  }

  .status-bar {
    flex-wrap: wrap;
  }

  .stats {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prep-workspace {
    grid-template-columns: 1fr;
  }

  .prep-tools,
  .ingredient-group[data-step="top"] {
    grid-template-columns: repeat(2, minmax(128px, 1fr));
  }

  .cup-bowl {
    width: min(190px, 60vw);
  }
}

@media (max-width: 580px) {
  body {
    min-height: 100svh;
  }

  .game-shell {
    min-height: 100svh;
    padding: 7px;
    gap: 7px;
  }

  .status-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
  }

  .status-bar > div:first-child {
    min-width: 0;
  }

  .status-bar h1 {
    font-size: 1.14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status-bar > button {
    min-width: 0;
    width: 94px;
    min-height: 38px;
    height: 38px;
    padding: 4px 6px;
    align-self: center;
    font-size: .76rem;
  }

  .stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .speech-bubble {
    width: calc(100% - 18px);
  }

  .prep-tools,
  .ingredient-group[data-step="top"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool {
    min-height: 48px;
    padding: 6px;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .tool-icon {
    width: 30px;
    height: 30px;
  }

  .tool-label {
    font-size: .8rem;
    line-height: 1;
  }

  .prep-actions {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }
}

/* Feature bundle: faces, cookie crumbs, readable tickets, and stronger feedback */
.person::before,
.person::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.person[data-accessory="glasses"]::before {
  left: 31px;
  top: 83px;
  width: 84px;
  height: 26px;
  border: 5px solid #2f2924;
  border-left-width: 4px;
  border-right-width: 4px;
  border-radius: 999px;
  box-shadow: inset 37px 0 0 -32px #2f2924;
  opacity: .9;
}

.person[data-accessory="freckles"]::before {
  left: 46px;
  top: 102px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(112, 65, 44, .62);
  box-shadow: 15px 3px 0 rgba(112,65,44,.48), 46px -1px 0 rgba(112,65,44,.58), 61px 4px 0 rgba(112,65,44,.42);
}

.person[data-accessory="brows"]::before {
  left: 43px;
  top: 78px;
  width: 28px;
  height: 7px;
  border-radius: 999px;
  background: var(--hair);
  transform: rotate(-8deg);
  box-shadow: 48px 8px 0 var(--hair);
}

.person[data-accessory="blush"]::before {
  left: 36px;
  top: 106px;
  width: 24px;
  height: 12px;
  border-radius: 50%;
  background: rgba(224, 93, 95, .28);
  box-shadow: 64px 0 0 rgba(224,93,95,.24);
}

body[data-patience="medium"] .patience-meter i {
  background: linear-gradient(90deg, #f7d15b, #e7a23b);
}

body[data-patience="low"] .patience-meter {
  animation: patiencePulse .62s ease-in-out infinite alternate;
}

body[data-patience="low"] .patience-meter i {
  background: linear-gradient(90deg, #ff816f, #d93443);
}

@keyframes patiencePulse {
  from { box-shadow: 0 0 0 rgba(201,62,69,0); }
  to { box-shadow: 0 0 0 4px rgba(201,62,69,.22); }
}

body.good-serve .speech-bubble {
  animation: thankYouPop .72s cubic-bezier(.2,1.2,.2,1);
}

body.good-serve .counter-top {
  animation: counterHappy .72s ease-out;
}

@keyframes thankYouPop {
  0% { transform: translateY(8px) scale(.96); }
  60% { transform: translateY(-7px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes counterHappy {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.12) saturate(1.1); }
}

.remake-card {
  width: 100%;
  text-align: left;
  background: linear-gradient(#fffdf8, #f5c9a6);
}

.remake-card strong {
  color: #8b3f34;
}

.cup-bowl[data-top="cookie"] .cup-spray {
  background:
    radial-gradient(circle at 24% 32%, #6e3d24 0 5%, transparent 6%),
    radial-gradient(circle at 42% 66%, #9c6235 0 4%, transparent 5%),
    radial-gradient(circle at 70% 40%, #744327 0 5%, transparent 6%),
    radial-gradient(circle at 62% 76%, #bd8654 0 3%, transparent 4%);
  box-shadow: inset 0 0 0 8px rgba(255,245,216,.34);
}

.cup-bowl[data-top="cookie"] .cup-spray::after {
  display: block;
  inset: 16%;
  background:
    radial-gradient(circle at 20% 35%, #5e3322 0 4%, transparent 5%),
    radial-gradient(circle at 53% 22%, #a4673b 0 4%, transparent 5%),
    radial-gradient(circle at 78% 62%, #6c3b24 0 3%, transparent 4%);
}

.tutorial-card {
  position: relative;
  overflow: hidden;
}

.paper-ticket p,
.prep-order-paper p {
  -webkit-line-clamp: 3;
  font-size: clamp(.9rem, 1.15vw, 1rem);
}

@media (max-width: 580px) {
}

/* Final iPad card cleanup */
.tablet-screen {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
}

.steps {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.steps button {
  min-height: 40px;
  padding: 5px 4px;
  font-size: clamp(.62rem, .78vw, .78rem);
  line-height: 1.05;
}

.tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(66px, 1fr);
  align-content: stretch;
  gap: 7px;
}

.order-note,
.ipad-mini {
  border-width: 2px;
  border-radius: 8px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 0 rgba(51,40,31,.14);
}

.order-note {
  min-height: 82px;
  padding: 10px;
  align-content: start;
}

.order-note span,
.ipad-mini span {
  display: block;
  margin-bottom: 2px;
  color: #7a5136;
  font-size: .67rem;
  line-height: 1;
  letter-spacing: 0;
}

.order-note strong,
.ipad-mini strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--line);
}

.order-note strong {
  -webkit-line-clamp: 3;
  font-size: .98rem;
  line-height: 1.15;
}

.ipad-mini {
  min-height: 66px;
  padding: 8px;
  gap: 2px;
  align-content: center;
}

.ipad-mini strong {
  -webkit-line-clamp: 2;
  font-size: clamp(.78rem, .95vw, .92rem);
  line-height: 1.1;
}

.ipad-mini em {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .7rem;
  line-height: 1.12;
}

.tablet-actions {
  margin-top: 0;
}

.tablet-actions button {
  min-height: 38px;
}

@media (max-width: 980px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tablet-screen {
    gap: 7px;
    padding: 8px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps button {
    min-height: 38px;
    font-size: .68rem;
  }

  .tool-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(58px, auto);
  }

  .order-note,
  .ipad-mini {
    min-height: 58px;
  }
}

@media (max-width: 580px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .order-note {
    min-height: 96px;
  }
}

/* Final customer face polish */
.person {
  width: 166px;
  height: 142px;
  transform: translateX(-50%) perspective(520px) rotateX(2deg);
}

.person-face {
  left: 27px;
  top: 34px;
  width: 112px;
  height: 112px;
  border-width: 4px;
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(circle at 32% 58%, rgba(242, 117, 109, .2) 0 8px, transparent 9px),
    radial-gradient(circle at 68% 58%, rgba(242, 117, 109, .18) 0 8px, transparent 9px),
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 42%),
    var(--skin);
}

.person[data-face="square"] .person-face {
  border-radius: 43% 43% 38% 38%;
}

.person[data-face="heart"] .person-face {
  width: 114px;
  border-radius: 52% 52% 48% 48%;
}

.person[data-face="long"] .person-face {
  height: 116px;
  border-radius: 48% 48% 42% 42%;
}

.person-hair {
  left: 21px;
  top: 15px;
  width: 124px;
  height: 62px;
  border-radius: 64px 64px 28px 28px;
  transform: rotate(-1deg);
}

.person-hair::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 9px;
  width: 28px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  transform: rotate(22deg);
}

.person-hair::after {
  left: 18px;
  right: 18px;
  bottom: -8px;
  height: 16px;
  opacity: .92;
}

.eye {
  top: 47px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff 0 2px, transparent 3px),
    var(--line);
  box-shadow: none;
}

.eye.left { left: 33px; }
.eye.right { right: 33px; }

.nose {
  left: 52px;
  top: 63px;
  width: 8px;
  height: 13px;
  background: rgba(112, 67, 45, .24);
}

.mouth {
  left: 41px;
  top: 86px;
  width: 32px;
  height: 13px;
  border-bottom: 4px solid var(--line);
  border-radius: 0 0 999px 999px;
  background: transparent;
}

.person[data-mouth="flat"] .mouth {
  left: 42px;
  top: 89px;
  width: 30px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  opacity: .9;
}

.person[data-mouth="open"] .mouth {
  left: 44px;
  top: 86px;
  width: 26px;
  height: 18px;
  border: 4px solid var(--line);
  border-radius: 45% 45% 55% 55%;
  background:
    radial-gradient(ellipse at 50% 78%, #f08a86 0 22%, transparent 23%),
    #7e3f36;
}

.person[data-accessory="glasses"]::before {
  left: 34px;
  top: 80px;
  width: 78px;
  height: 24px;
  border-width: 4px;
  border-radius: 999px;
  box-shadow: inset 34px 0 0 -30px #2f2924;
}

.person[data-accessory="freckles"]::before {
  left: 45px;
  top: 99px;
  width: 5px;
  height: 5px;
  opacity: .62;
  box-shadow: 14px 3px 0 rgba(112,65,44,.48), 43px -1px 0 rgba(112,65,44,.52), 56px 3px 0 rgba(112,65,44,.38);
}

.person[data-accessory="brows"]::before {
  left: 41px;
  top: 76px;
  width: 24px;
  height: 5px;
  opacity: .86;
  box-shadow: 48px 3px 0 var(--hair);
}

.person[data-accessory="blush"]::before {
  left: 36px;
  top: 99px;
  width: 22px;
  height: 11px;
  opacity: .72;
  box-shadow: 58px 0 0 rgba(224,93,95,.22);
}

@media (max-width: 580px) {
  .person {
    width: 146px;
    height: 128px;
  }

  .person-face {
    left: 22px;
    width: 102px;
    height: 104px;
  }

  .person-hair {
    left: 16px;
    width: 114px;
    height: 56px;
  }
}

/* Bigger prep cup */
.simple-cup {
  min-width: 300px;
  justify-items: center;
}

.cup-bowl {
  width: min(300px, 92%);
  max-width: 300px;
}

.cup-bowl::before,
.cup-bowl::after,
.cup-rim,
.cup-liquid,
.cup-ice,
.cup-spray,
.foam-art,
.cup-effect {
  pointer-events: none;
}

.simple-cup ul {
  width: min(300px, 100%);
}

@media (max-height: 760px) and (min-width: 901px) {
  .cup-bowl {
    width: min(250px, 88%);
  }

  .simple-cup ul {
    width: min(250px, 100%);
  }
}

@media (max-width: 580px) {
  .simple-cup {
    min-width: 0;
  }

  .cup-bowl {
    width: min(260px, 88vw);
  }
}

/* Universal device fit pass */
html,
body {
  width: 100%;
  min-width: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
}

.game-shell {
  width: 100%;
  height: 100svh;
  min-height: 0;
  padding: clamp(6px, 1.2vw, 12px);
  gap: clamp(6px, 1vw, 12px);
}

.status-bar,
.cafe-stage,
.prep-stage,
.counter-scene,
.prep-table,
.hint-board,
.tablet,
.tablet-screen,
.prep-workspace,
.simple-cup {
  min-width: 0;
}

.status-bar {
  max-height: 18svh;
  overflow: hidden;
}

.stats {
  min-width: 0;
}

.stats div {
  min-width: 0;
}

.stats strong {
  font-size: clamp(.82rem, 1.8vw, 1.05rem);
}

.cafe-stage,
.prep-stage {
  min-height: 0;
  overflow: hidden;
}

.hint-board {
  overflow: auto;
  overscroll-behavior: contain;
}

.counter-scene {
  min-height: 0;
  height: 100%;
}

.counter-top {
  max-width: calc(100% - 20px);
}

.tablet {
  width: min(100%, 560px);
}

.tool-grid,
.prep-tools {
  min-width: 0;
}

.prep-table {
  min-height: 0;
  overflow: hidden;
}

.prep-workspace {
  min-height: 0;
  overflow: hidden;
}

.prep-tools {
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 8px;
}

.simple-cup {
  align-self: stretch;
}

@media (min-width: 1280px) {
  .cafe-stage,
  .prep-stage {
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  }

  .prep-workspace {
    grid-template-columns: minmax(560px, 1.7fr) minmax(280px, .7fr);
  }
}

@media (max-width: 1180px) {
  body {
    overflow: auto;
  }

  .game-shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .status-bar {
    max-height: none;
  }

  .cafe-stage,
  .prep-stage {
    overflow: visible;
  }

  .counter-scene {
    min-height: 760px;
  }
}

@media (max-width: 900px) {
  .status-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .status-bar .stats {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cafe-stage,
  .prep-stage {
    grid-template-columns: 1fr;
  }

  .hint-board {
    max-height: none;
  }

  .counter-scene {
    min-height: 780px;
  }

  .counter-top {
    left: 8px;
    right: 8px;
    width: auto;
  }

  .prep-table {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  .prep-order-paper,
  .prep-ticket,
  .prep-workspace {
    grid-column: 1;
  }

  .prep-workspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .prep-tools {
    overflow: visible;
  }
}

@media (max-width: 700px) {
  .status-bar {
    padding: 8px;
  }

  .status-bar h1 {
    font-size: 1.1rem;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .counter-scene {
    min-height: 840px;
  }

  .counter-top {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 520px;
    align-content: start;
  }

  .paper-ticket {
    min-height: 150px;
  }

  .tablet {
    width: 100%;
  }

  .prep-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ingredient-group,
  .ingredient-group[data-step="top"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  button {
    min-height: 38px;
  }

  .game-shell {
    padding: 6px;
  }

  .status-bar {
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 6px;
    padding: 7px;
  }

  .status-bar .eyebrow {
    display: none;
  }

  .status-bar h1 {
    font-size: 1rem;
  }

  .status-bar > button {
    width: 86px;
    height: 34px;
    min-height: 34px;
    padding: 3px 5px;
    font-size: .68rem;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .stats div {
    padding: 4px;
  }

  .stats span {
    font-size: .58rem;
  }

  .stats strong {
    font-size: .82rem;
  }

  .counter-scene {
    min-height: 900px;
  }

  .speech-bubble {
    width: calc(100% - 16px);
  }

  .person {
    transform: translateX(-50%) scale(.9);
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .prep-tools,
  .ingredient-group,
  .ingredient-group[data-step="top"] {
    grid-template-columns: 1fr;
  }

  .cup-bowl {
    width: min(240px, 86vw);
  }
}

/* Cool bundle: livelier cafe polish */
.status-bar h1 {
  text-shadow: 0 2px 0 rgba(255,255,255,.65), 0 0 18px rgba(79,159,142,.25);
}

.counter-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 16%, rgba(255,255,255,.2) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 38%, rgba(255,247,232,.22) 0 3px, transparent 4px),
    radial-gradient(circle at 35% 62%, rgba(255,255,255,.16) 0 2px, transparent 3px);
  animation: cafeDustFloat 5.5s ease-in-out infinite alternate;
}

.menu-board {
  overflow: hidden;
  animation: signGlow 3.2s ease-in-out infinite alternate;
}

.menu-board strong::after {
  content: " ✦";
  color: #f0c86c;
}

.menu-board::before {
  content: "";
  position: absolute;
  left: -35%;
  top: 0;
  width: 32%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  animation: signShine 4.4s ease-in-out infinite;
}

.shelf span {
  animation: shelfBob 3.6s ease-in-out infinite;
}

.shelf span:nth-child(2) { animation-delay: .35s; }
.shelf span:nth-child(3) { animation-delay: .7s; }

.speech-bubble {
  animation: bubbleIdle 4.2s ease-in-out infinite;
}

.tablet {
  transition: transform .22s ease, filter .22s ease;
}

.tablet:hover {
  filter: saturate(1.08) brightness(1.03);
}

.ipad-mini,
.order-note,
.tool,
.steps button {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.ipad-mini:hover,
.order-note:hover,
.tool:hover:not(:disabled),
.steps button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.simple-cup::before {
  content: "";
  width: 84px;
  height: 34px;
  margin-top: -4px;
  background:
    radial-gradient(ellipse at 25% 100%, rgba(255,255,255,.55) 0 18%, transparent 19%),
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.5) 0 20%, transparent 21%),
    radial-gradient(ellipse at 75% 100%, rgba(255,255,255,.45) 0 18%, transparent 19%);
  opacity: .75;
  filter: blur(.4px);
  animation: cupSteam 2.2s ease-in-out infinite;
}

.cup-bowl {
  transition: transform .18s ease, filter .18s ease;
}

.cup-bowl:hover,
.cup-bowl:focus-visible {
  transform: scale(1.035);
}

.message-log {
  position: relative;
  overflow: hidden;
}

.message-log::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation: logSweep 5s ease-in-out infinite;
}

body.good-serve .counter-scene::before {
  animation: goodCounterFlash .8s ease-out;
}

body.good-serve .counter-scene::after {
  background:
    radial-gradient(circle at 20% 28%, #fff7d2 0 5px, transparent 6px),
    radial-gradient(circle at 72% 24%, #d7fff1 0 5px, transparent 6px),
    radial-gradient(circle at 85% 58%, #ffe0ec 0 4px, transparent 5px),
    radial-gradient(circle at 38% 72%, #fff7d2 0 4px, transparent 5px);
  animation: serveSparkleBurst .9s ease-out;
}

body.bad-serve .tablet {
  animation: softShake .34s ease-in-out;
}

@keyframes cafeDustFloat {
  from { transform: translateY(0); opacity: .65; }
  to { transform: translateY(-12px); opacity: .95; }
}

@keyframes signGlow {
  from { box-shadow: 0 10px 0 rgba(47,41,36,.25), 0 18px 24px rgba(47,41,36,.18), 0 0 0 rgba(240,200,108,0); }
  to { box-shadow: 0 10px 0 rgba(47,41,36,.25), 0 18px 24px rgba(47,41,36,.18), 0 0 22px rgba(240,200,108,.35); }
}

@keyframes signShine {
  0%, 58% { left: -35%; }
  100% { left: 118%; }
}

@keyframes shelfBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes bubbleIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes cupSteam {
  0% { transform: translateY(8px) scale(.92); opacity: 0; }
  35% { opacity: .75; }
  100% { transform: translateY(-8px) scale(1.08); opacity: 0; }
}

@keyframes logSweep {
  0%, 70% { transform: translateX(0); }
  100% { transform: translateX(460%); }
}

@keyframes goodCounterFlash {
  0% { filter: brightness(1); }
  38% { filter: brightness(1.25) saturate(1.18); }
  100% { filter: brightness(1); }
}

@keyframes serveSparkleBurst {
  0% { opacity: 0; transform: scale(.92); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes softShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .counter-scene::after,
  .menu-board,
  .menu-board::before,
  .shelf span,
  .speech-bubble,
  .simple-cup::before,
  .message-log::after {
    animation: none;
  }
}

/* Fix pass: cleaner small-screen spacing and safer touch targets */
.ipad-mini,
.order-note,
.tool,
.steps button,
.action-row button,
#soundBtn {
  -webkit-tap-highlight-color: transparent;
}

.tablet-card,
.order-note,
.message-log,
.tutorial-card,
.speech-bubble {
  overflow-wrap: anywhere;
}

.tool:disabled {
  transform: none;
  filter: grayscale(.15) opacity(.72);
}

.prep-layout {
  align-items: stretch;
}

.prep-tools {
  align-content: start;
}

.prep-actions {
  z-index: 5;
}

@media (max-width: 760px) {
  .status-bar {
    row-gap: 6px;
  }

  .hint-board {
    max-height: none;
  }

  .tablet-screen {
    gap: 10px;
  }

  .ipad-mini {
    min-height: 58px;
  }

  .prep-actions {
    position: sticky;
    bottom: 6px;
    margin-top: 8px;
  }
}

@media (max-width: 420px) {
  .game-shell {
    padding: 4px;
  }

  .status-bar h1 {
    font-size: .94rem;
  }

  .stats strong {
    font-size: .78rem;
  }

  .steps button {
    min-height: 46px;
  }

  .cup-bowl {
    width: min(255px, 88vw);
  }
}

/* Final iPad spacing fix: keep every app card inside the tablet */
.tablet {
  aspect-ratio: auto;
  min-height: clamp(430px, 43vw, 520px);
}

.tablet-screen {
  height: 100%;
  min-height: 398px;
  overflow: hidden;
}

.steps {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(64px, 1fr);
}

.order-note {
  min-height: 78px;
}

.ipad-mini {
  min-height: 64px;
}

@media (max-width: 980px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tablet {
    min-height: 560px;
  }

  .tablet-screen {
    min-height: 528px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(56px, auto);
  }

  .order-note,
  .ipad-mini {
    min-height: 56px;
  }
}

/* Bigger paper tickets */
.paper-ticket {
  width: min(430px, 100%);
  min-height: 350px;
  padding: 28px 26px 26px;
}

.paper-ticket span,
.prep-order-paper span {
  font-size: clamp(.82rem, 1vw, .95rem);
}

.paper-ticket strong {
  font-size: clamp(1.18rem, 1.65vw, 1.4rem);
  line-height: 1.08;
}

.paper-ticket p {
  display: block;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.28;
}

.paper-ticket p.long-ticket-text {
  font-size: clamp(.94rem, 1.22vw, 1.08rem);
  line-height: 1.2;
}

.paper-ticket p.extra-long-ticket-text {
  font-size: clamp(.82rem, 1.05vw, .96rem);
  line-height: 1.14;
}

.prep-order-paper {
  width: min(920px, 100%);
  min-height: 178px;
  padding: 22px 24px;
}

.prep-order-paper strong {
  font-size: clamp(1.24rem, 1.7vw, 1.48rem);
  line-height: 1.08;
}

.prep-order-paper p {
  display: block;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.28;
}

.prep-order-paper p.long-ticket-text {
  font-size: clamp(.92rem, 1.12vw, 1.04rem);
  line-height: 1.2;
}

.prep-order-paper p.extra-long-ticket-text {
  font-size: clamp(.8rem, .98vw, .94rem);
  line-height: 1.14;
}

@media (max-width: 700px) {
  .paper-ticket {
    width: min(380px, 100%);
    min-height: 315px;
    padding: 20px 18px;
  }

  .prep-order-paper {
    min-height: 160px;
    padding: 18px;
  }
}

@media (max-width: 430px) {
  .paper-ticket {
    min-height: 300px;
    padding: 18px 16px;
  }
}

/* Black teleport swipe */
.teleport-flash {
  background:
    linear-gradient(105deg, transparent 0 18%, rgba(0,0,0,.76) 19% 30%, rgba(18,16,15,.98) 31% 58%, rgba(0,0,0,.82) 59% 72%, transparent 73% 100%);
}

.teleport-flash::before {
  background:
    linear-gradient(105deg, transparent 0 12%, rgba(255,255,255,.18) 13% 16%, rgba(0,0,0,.96) 17% 72%, rgba(31,29,28,.94) 73% 100%);
  box-shadow:
    -24px 0 34px rgba(0,0,0,.8),
    -72px 0 86px rgba(0,0,0,.55),
    -7px 0 0 rgba(255,255,255,.16);
}

.teleport-flash::after {
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,.2) 0 8px, rgba(0,0,0,.84) 8px 20px, transparent 20px 38px);
  box-shadow:
    44px 0 60px rgba(0,0,0,.72),
    8px 0 0 rgba(255,255,255,.08);
}

.teleport-flash span {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), rgba(0,0,0,.95), transparent);
}

.teleport-flash span:nth-child(2) {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.96), rgba(255,255,255,.5), transparent);
}

.teleport-flash span:nth-child(4) {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), rgba(0,0,0,.92), transparent);
}

.teleport-flash span:nth-child(5) {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.9), rgba(255,255,255,.38), transparent);
}

body.teleporting .teleport-flash {
  backdrop-filter: blur(4px) brightness(.72) saturate(.7);
}

/* Realer customers, warning faces, and cafe apps */
.person {
  filter: drop-shadow(0 12px 10px rgba(47,41,36,.18));
}

.person-face {
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.35) 0 9%, transparent 10%),
    linear-gradient(145deg, rgba(255,255,255,.22), transparent 42%),
    var(--skin);
}

.eye {
  animation: customerBlink 5.2s infinite;
  transform-origin: center;
}

.person[data-patience="worried"] .eye {
  height: 9px;
  border-radius: 999px 999px 50% 50%;
}

.person[data-patience="angry"] .person-face {
  box-shadow:
    inset 8px 8px 0 rgba(255,255,255,.12),
    inset -10px -8px 0 rgba(112,47,36,.16),
    0 0 0 4px rgba(160,45,38,.18);
}

.person[data-patience="angry"] .eye {
  height: 7px;
  border-radius: 999px;
  transform: rotate(-8deg);
}

.person[data-patience="angry"] .eye.right {
  transform: rotate(8deg);
}

.person[data-patience="angry"] .mouth {
  width: 34px;
  height: 0;
  border-bottom-width: 5px;
  transform: rotate(180deg);
}

.person[data-patience="worried"] .mouth {
  width: 26px;
  height: 8px;
  border-bottom-width: 3px;
}

.person[data-patience="served"] {
  animation: customerHappy .72s ease-out;
}

@keyframes customerBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(.08); }
}

.review-card,
.review-summary,
.news-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), transparent 42%),
    linear-gradient(#fff9ed, #ecd1a4);
}

.review-card span,
.review-summary span,
.news-card span {
  color: #6f4a31;
}

.review-summary {
  border-color: #2b6f62;
}

/* Foam and whip tools: make them read as spray bottles, not cups */
.tool[data-tool="spray"] .tool-icon {
  width: 42px;
  height: 42px;
  margin: -4px 0;
  transform: rotate(-13deg);
}

.tool[data-tool="spray"] .tool-icon i {
  left: 13px;
  top: 12px;
  width: 18px;
  height: 27px;
  border-radius: 6px 6px 11px 11px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55), transparent 36%),
    linear-gradient(to top, var(--tool-color) 0 58%, #f6e8c9 59% 100%);
  box-shadow:
    inset -4px -3px 0 rgba(51,40,31,.1),
    0 5px 0 rgba(51,40,31,.14);
}

.tool[data-tool="spray"] .tool-icon b {
  left: 9px;
  top: 3px;
  width: 24px;
  height: 11px;
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(#f6f0e4 0 36%, #9b8062 37% 100%);
}

.tool[data-tool="spray"] .tool-icon::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 3px;
  width: 12px;
  height: 7px;
  border: 3px solid var(--line);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: #f6f0e4;
}

.tool[data-tool="spray"] .tool-icon::after {
  right: -1px;
  top: 0;
  width: 15px;
  height: 16px;
  border: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 98% 50%, rgba(255,255,255,.78) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 76%, rgba(255,255,255,.65) 0 2px, transparent 3px);
  filter: drop-shadow(0 1px 0 rgba(51,40,31,.2));
}

/* Counter-only lift for the paper and iPad */
.counter-top .paper-ticket,
.counter-top .tablet {
  align-self: start;
  margin-top: clamp(8px, 2.2vh, 22px);
}

.counter-top {
  grid-template-columns: minmax(330px, 430px) minmax(430px, 620px);
}

@media (max-width: 700px) {
  .counter-top .paper-ticket,
  .counter-top .tablet {
    margin-top: 4px;
  }
}

/* iPad apps scroll instead of stretching the counter */
.counter-top .tablet,
.counter-top .tablet-screen {
  min-height: 0;
}

.counter-top .tablet {
  height: min(520px, calc(100% - 20px));
  max-height: calc(100% - 20px);
}

.counter-top .tablet-screen {
  display: block;
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.counter-top .steps,
.counter-top .tablet-head,
.counter-top .patience-meter,
.counter-top .tablet-actions {
  min-height: 0;
}

.counter-top .tool-grid {
  min-height: max-content;
  overflow-y: visible;
  overflow-x: hidden;
  align-content: start;
  grid-auto-rows: minmax(64px, auto);
  padding-right: 4px;
  margin-top: 8px;
}

.counter-top .tablet-screen > * + * {
  margin-top: 8px;
}

.counter-top .tablet-actions {
  margin-top: 6px;
}

.counter-top .tablet-screen::-webkit-scrollbar {
  width: 8px;
}

.counter-top .tablet-screen::-webkit-scrollbar-track {
  background: rgba(255,255,255,.32);
  border-radius: 999px;
}

.counter-top .tablet-screen::-webkit-scrollbar-thumb {
  background: rgba(51,40,31,.42);
  border-radius: 999px;
}

/* Kitchen buttons: keep Clear/Serve close to the cup without covering it */
.simple-cup .prep-actions {
  order: -1;
  width: min(360px, 100%);
  margin: 4px auto 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.simple-cup .prep-actions button {
  min-height: 38px;
}

.simple-cup #finishDrinkBtn {
  background: linear-gradient(#7df26f 0%, #35c84f 48%, #169938 100%);
  color: #ffffff;
  border-color: #14391f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -4px 0 rgba(13,92,34,.28),
    0 5px 0 #14391f;
  text-shadow: 0 1px 0 rgba(0,0,0,.24);
}

.simple-cup #finishDrinkBtn:hover:not(:disabled) {
  background: linear-gradient(#96ff85 0%, #44dd5c 48%, #18aa3d 100%);
}

.simple-cup #finishDrinkBtn:disabled {
  background: linear-gradient(#c8dac2, #8aa582);
  border-color: rgba(20,57,31,.72);
  color: rgba(255,255,255,.82);
  opacity: .6;
}

.simple-cup {
  min-height: min(680px, 100%);
  padding-bottom: 18px;
}

.simple-cup #cupLayers {
  max-height: none;
  overflow: visible;
  margin-bottom: 0;
}

@media (max-width: 640px), (max-height: 760px) {
  .simple-cup .prep-actions {
    width: 100%;
    margin: 2px auto 4px;
  }

  .simple-cup #cupLayers {
    max-height: none;
  }
}

/* Face cleanup: cleaner hair, proper glasses, less messy details */
.person {
  width: 164px;
  height: 142px;
}

.person-face {
  left: 28px;
  top: 34px;
  width: 108px;
  height: 110px;
  border-width: 4px;
  background:
    radial-gradient(circle at 31% 59%, rgba(237,108,103,.16) 0 7px, transparent 8px),
    radial-gradient(circle at 69% 59%, rgba(237,108,103,.14) 0 7px, transparent 8px),
    linear-gradient(145deg, rgba(255,255,255,.24), transparent 40%),
    var(--skin);
  box-shadow:
    inset 9px 9px 0 rgba(255,255,255,.14),
    inset -8px -8px 0 rgba(92,55,35,.12),
    0 10px 0 rgba(47,41,36,.13);
}

.person-hair {
  left: 23px;
  top: 18px;
  width: 118px;
  height: 58px;
  border-radius: 58px 58px 24px 24px;
  background:
    radial-gradient(ellipse at 28% 32%, rgba(255,255,255,.1) 0 18%, transparent 19%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%),
    var(--hair);
  box-shadow:
    inset 8px 8px 0 rgba(255,255,255,.07),
    inset -10px -8px 0 rgba(0,0,0,.1);
}

.person-hair::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 34px;
  width: 28px;
  height: 36px;
  border: 3px solid var(--line);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: var(--hair);
  box-shadow: 70px -2px 0 -2px var(--hair);
}

.person-hair::after {
  content: "";
  position: absolute;
  left: 42px;
  top: 39px;
  width: 36px;
  height: 18px;
  border-radius: 0 0 999px 999px;
  background: var(--hair);
  box-shadow:
    -24px 0 0 -8px rgba(255,255,255,.1),
    28px 0 0 -10px rgba(0,0,0,.12);
}

.eye {
  top: 51px;
  width: 10px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.35);
}

.eye.left { left: 35px; }
.eye.right { right: 35px; }

.nose {
  left: 53px;
  top: 66px;
  width: 7px;
  height: 13px;
  opacity: .65;
}

.mouth {
  left: 40px;
  top: 88px;
  width: 30px;
  height: 11px;
}

.person[data-accessory="glasses"]::before {
  left: 35px;
  top: 82px;
  width: 25px;
  height: 20px;
  border: 4px solid #2f2924;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  box-shadow:
    43px 0 0 -4px rgba(255,255,255,.1),
    43px 0 0 0 #2f2924;
}

.person[data-accessory="glasses"]::after {
  content: "";
  position: absolute;
  left: 63px;
  top: 93px;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #2f2924;
}

.person[data-accessory="freckles"]::before {
  left: 48px;
  top: 97px;
  width: 5px;
  height: 5px;
  opacity: .75;
  box-shadow:
    13px 4px 0 rgba(112,65,44,.45),
    48px -1px 0 rgba(112,65,44,.5),
    60px 4px 0 rgba(112,65,44,.38);
}

.person[data-accessory="brows"]::before {
  left: 44px;
  top: 78px;
  width: 24px;
  height: 5px;
  box-shadow: 46px 7px 0 var(--hair);
}

.person[data-accessory="blush"]::before {
  left: 39px;
  top: 98px;
  width: 20px;
  height: 9px;
  box-shadow: 62px 0 0 rgba(224,93,95,.2);
}

/* Real spray action over the cup: visible can + mist */
.cup-bowl.is-spraying::before {
  content: "";
  position: absolute;
  left: 13%;
  top: -17%;
  z-index: 14;
  width: 34px;
  height: 72px;
  max-height: none;
  border: 4px solid var(--line);
  border-radius: 10px 10px 16px 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.58), transparent 34%),
    linear-gradient(to top, var(--effect-color, #fff5d8) 0 62%, #f6ead0 63% 100%);
  box-shadow:
    inset -6px -5px 0 rgba(51,40,31,.12),
    0 8px 0 rgba(51,40,31,.18),
    16px -10px 0 -8px #f6ead0,
    20px -11px 0 -7px var(--line);
  opacity: 1;
  transform: rotate(-27deg);
  animation: realSprayCanAction .82s ease-out both;
}

.cup-bowl.is-spraying::after {
  content: "";
  position: absolute;
  left: 25%;
  top: -5%;
  z-index: 13;
  width: 102px;
  height: 96px;
  border: 0;
  border-radius: 48% 52% 58% 42%;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.95) 0 4px, transparent 5px),
    radial-gradient(circle at 42% 22%, rgba(255,255,255,.82) 0 5px, transparent 6px),
    radial-gradient(circle at 64% 38%, rgba(255,255,255,.68) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 58%, rgba(255,255,255,.52) 0 5px, transparent 6px),
    conic-gradient(from 232deg at 0 8%, rgba(255,255,255,.78) 0 18deg, rgba(255,255,255,.18) 19deg 42deg, transparent 43deg 360deg);
  filter: blur(.2px);
  transform-origin: left top;
  animation: realSprayMistAction .82s ease-out both;
}

.cup-bowl.is-spraying .cup-effect {
  z-index: 12;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.96) 0 18%, var(--effect-color, #fff5d8) 19% 42%, transparent 43%);
  animation: realSprayFoamLanding .82s ease-out both;
}

.cup-bowl.is-spraying .effect-particles i {
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}

.cup-bowl.is-spraying .effect-particles i:nth-child(1) { animation: realSprayDotA .82s ease-out; }
.cup-bowl.is-spraying .effect-particles i:nth-child(2) { animation: realSprayDotB .82s ease-out .04s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(3) { animation: realSprayDotC .82s ease-out .08s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(4) { animation: realSprayDotD .82s ease-out .12s; }
.cup-bowl.is-spraying .effect-particles i:nth-child(5) { animation: realSprayDotE .82s ease-out .16s; }

@keyframes realSprayCanAction {
  0% { opacity: 0; transform: translate(-20px, -22px) rotate(-38deg) scale(.86); }
  18% { opacity: 1; transform: translate(0, 0) rotate(-27deg) scale(1); }
  42% { transform: translate(3px, -2px) rotate(-22deg) scale(1.02); }
  66% { transform: translate(-2px, 1px) rotate(-30deg) scale(1); }
  100% { opacity: 0; transform: translate(10px, -10px) rotate(-21deg) scale(.96); }
}

@keyframes realSprayMistAction {
  0% { opacity: 0; transform: scale(.22) rotate(-10deg); clip-path: inset(0 100% 0 0); }
  20% { opacity: .95; clip-path: inset(0 42% 0 0); }
  58% { opacity: .82; transform: scale(1) rotate(0deg); clip-path: inset(0 0 0 0); }
  100% { opacity: 0; transform: scale(1.18) translate(18px, 22px); clip-path: inset(0 0 0 18%); }
}

@keyframes realSprayFoamLanding {
  0% { opacity: 0; transform: translate(-22px, -18px) scale(.22); }
  35% { opacity: .96; transform: translate(-6px, -3px) scale(.72); }
  72% { opacity: .85; transform: translate(0, 0) scale(1.1); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes realSprayDotA { 0% { opacity: 0; transform: translate(-76px, -88px) scale(.16); } 26% { opacity: .95; } 100% { opacity: 0; transform: translate(-22px, -6px) scale(.9); } }
@keyframes realSprayDotB { 0% { opacity: 0; transform: translate(-66px, -80px) scale(.14); } 26% { opacity: .9; } 100% { opacity: 0; transform: translate(0, 2px) scale(1); } }
@keyframes realSprayDotC { 0% { opacity: 0; transform: translate(-48px, -82px) scale(.16); } 28% { opacity: .86; } 100% { opacity: 0; transform: translate(22px, 8px) scale(.88); } }
@keyframes realSprayDotD { 0% { opacity: 0; transform: translate(-72px, -54px) scale(.12); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(-32px, 22px) scale(.72); } }
@keyframes realSprayDotE { 0% { opacity: 0; transform: translate(-36px, -58px) scale(.12); } 30% { opacity: .78; } 100% { opacity: 0; transform: translate(36px, 26px) scale(.7); } }

/* Customer face upgrade: cleaner chibi cafe heads */
.person {
  width: 172px;
  height: 150px;
  filter: drop-shadow(0 10px 0 rgba(47, 41, 36, .14));
}

.person-face {
  left: 29px;
  top: 36px;
  z-index: 2;
  width: 112px;
  height: 112px;
  border: 4px solid var(--line);
  border-radius: 48% 48% 46% 46%;
  background:
    radial-gradient(circle at 32% 69%, rgba(232, 112, 113, .18) 0 10px, transparent 11px),
    radial-gradient(circle at 68% 69%, rgba(232, 112, 113, .15) 0 10px, transparent 11px),
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 39%),
    var(--skin);
  box-shadow:
    inset 9px 8px 0 rgba(255,255,255,.16),
    inset -8px -8px 0 rgba(77,45,31,.12),
    0 8px 0 rgba(47,41,36,.12);
}

.person[data-face="round"] .person-face { border-radius: 50% 50% 47% 47%; }
.person[data-face="square"] .person-face { border-radius: 40% 40% 34% 34%; }
.person[data-face="heart"] .person-face { border-radius: 52% 52% 58% 58%; }
.person[data-face="long"] .person-face {
  top: 32px;
  height: 118px;
  border-radius: 45% 45% 42% 42%;
}

.person-hair {
  left: 20px;
  top: 16px;
  z-index: 4;
  width: 132px;
  height: 68px;
  border: 4px solid var(--line);
  border-bottom: 0;
  border-radius: 62px 62px 28px 28px;
  background:
    radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.16) 0 18%, transparent 19%),
    linear-gradient(140deg, rgba(255,255,255,.09), transparent 42%),
    var(--hair);
  box-shadow:
    inset 9px 8px 0 rgba(255,255,255,.08),
    inset -12px -8px 0 rgba(0,0,0,.1);
}

.person-hair::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 40px;
  width: 24px;
  height: 42px;
  border: 4px solid var(--line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--hair);
  box-shadow:
    86px -2px 0 -2px var(--hair),
    86px -2px 0 2px var(--line);
}

.person-hair::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 42px;
  width: 56px;
  height: 24px;
  border-radius: 0 0 999px 999px;
  background: var(--hair);
  box-shadow:
    -22px 2px 0 -8px rgba(255,255,255,.1),
    32px 1px 0 -9px rgba(0,0,0,.14);
}

.person[data-hair-style="side-part"] .person-hair::after {
  left: 23px;
  top: 38px;
  width: 78px;
  height: 28px;
  border-radius: 0 0 44px 14px;
  transform: rotate(-6deg);
}

.person[data-hair-style="round-bob"] .person-hair {
  left: 18px;
  top: 18px;
  width: 136px;
  height: 76px;
  border-radius: 66px 66px 36px 36px;
}

.person[data-hair-style="round-bob"] .person-hair::before {
  top: 44px;
  height: 48px;
  border-radius: 0 0 22px 22px;
}

.person[data-hair-style="tuft"] .person-hair {
  top: 22px;
  height: 58px;
  border-radius: 58px 58px 24px 24px;
}

.person[data-hair-style="tuft"] .person-hair::after {
  left: 54px;
  top: -12px;
  width: 28px;
  height: 42px;
  border: 4px solid var(--line);
  border-bottom: 0;
  border-radius: 24px 24px 6px 6px;
  transform: rotate(-12deg);
}

.person[data-hair-style="neat"] .person-hair::after {
  left: 23px;
  top: 40px;
  width: 84px;
  height: 18px;
  border-radius: 0 0 999px 999px;
}

.eye {
  top: 52px;
  z-index: 3;
  width: 15px;
  height: 18px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 62% 68%, rgba(255,255,255,.42) 0 2px, transparent 3px),
    #2d211c;
  box-shadow: 0 2px 0 rgba(47,41,36,.13);
}

.eye.left { left: 31px; }
.eye.right { right: 31px; }

.nose {
  left: 52px;
  top: 70px;
  width: 9px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 70%, rgba(122,71,48,.33) 0 3px, transparent 4px);
  opacity: .8;
}

.mouth {
  left: 39px;
  top: 89px;
  width: 34px;
  height: 15px;
  border: 0;
  border-bottom: 5px solid #6f3f34;
  border-radius: 0 0 999px 999px;
  background: transparent;
}

.person[data-mouth="flat"] .mouth {
  top: 94px;
  height: 0;
  border-bottom: 5px solid #6f3f34;
  border-radius: 999px;
}

.person[data-mouth="open"] .mouth {
  left: 43px;
  top: 90px;
  width: 25px;
  height: 19px;
  border: 4px solid #6f3f34;
  border-radius: 50%;
  background: #fff0ec;
}

.person[data-accessory="glasses"]::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 83px;
  z-index: 6;
  width: 27px;
  height: 23px;
  border: 3px solid #28231f;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  box-shadow:
    45px 0 0 -3px rgba(255,255,255,.13),
    45px 0 0 0 #28231f;
}

.person[data-accessory="glasses"]::after {
  content: "";
  position: absolute;
  left: 69px;
  top: 94px;
  z-index: 7;
  width: 17px;
  height: 3px;
  border-radius: 999px;
  background: #28231f;
}

.person[data-accessory="freckles"]::before {
  content: "";
  position: absolute;
  left: 51px;
  top: 101px;
  z-index: 6;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(111,63,52,.42);
  box-shadow:
    13px 4px 0 rgba(111,63,52,.34),
    50px -1px 0 rgba(111,63,52,.38),
    62px 4px 0 rgba(111,63,52,.3);
}

.person[data-accessory="brows"]::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 79px;
  z-index: 6;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: var(--hair);
  transform: rotate(-6deg);
  box-shadow: 48px 5px 0 var(--hair);
}

.person[data-accessory="blush"]::before {
  content: "";
  position: absolute;
  left: 41px;
  top: 102px;
  z-index: 6;
  width: 20px;
  height: 9px;
  border-radius: 50%;
  background: rgba(224,93,95,.22);
  box-shadow: 62px 0 0 rgba(224,93,95,.18);
}

.person[data-patience="worried"] .eye {
  height: 14px;
  transform: translateY(3px) scaleX(1.05);
}

.person[data-patience="worried"] .mouth {
  top: 95px;
  width: 26px;
  border-bottom-width: 4px;
  transform: rotate(180deg);
}

.person[data-patience="angry"] .person-face {
  background:
    radial-gradient(circle at 31% 67%, rgba(232, 112, 113, .23) 0 11px, transparent 12px),
    radial-gradient(circle at 69% 67%, rgba(232, 112, 113, .2) 0 11px, transparent 12px),
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,215,202,.24) 58%, transparent),
    var(--skin);
}

.person[data-patience="angry"] .eye.left {
  height: 11px;
  transform: rotate(10deg);
}

.person[data-patience="angry"] .eye.right {
  height: 11px;
  transform: rotate(-10deg);
}

.person[data-patience="served"] .mouth {
  width: 38px;
  border-bottom-color: #7b4939;
}

@media (max-width: 760px) {
  .person {
    width: 146px;
    height: 128px;
  }

  .person-face {
    left: 24px;
    top: 31px;
    width: 96px;
    height: 96px;
  }

  .person-hair {
    left: 17px;
    top: 13px;
    width: 112px;
    height: 58px;
  }

  .person-hair::before {
    top: 34px;
    height: 36px;
    box-shadow:
      72px -2px 0 -2px var(--hair),
      72px -2px 0 2px var(--line);
  }

  .person-hair::after {
    left: 30px;
    top: 35px;
    width: 48px;
  }

  .eye { top: 44px; width: 13px; height: 15px; }
  .eye.left { left: 27px; }
  .eye.right { right: 27px; }
  .nose { left: 45px; top: 59px; }
  .mouth { left: 34px; top: 76px; width: 29px; }

  .person[data-accessory="glasses"]::before {
    left: 34px;
    top: 71px;
    width: 23px;
    height: 20px;
    box-shadow:
      38px 0 0 -3px rgba(255,255,255,.13),
      38px 0 0 0 #28231f;
  }

  .person[data-accessory="glasses"]::after {
    left: 59px;
    top: 80px;
    width: 13px;
  }
}

/* Make the active spray bottle obvious while spraying */
.cup-bowl.is-spraying {
  overflow: visible;
}

.cup-bowl.is-spraying::before {
  content: "";
  position: absolute;
  left: -18%;
  top: -30%;
  z-index: 35;
  width: clamp(46px, 9vw, 76px);
  height: clamp(96px, 16vw, 136px);
  border: clamp(4px, .7vw, 6px) solid var(--line);
  border-radius: 16px 16px 24px 24px;
  background:
    radial-gradient(circle at 31% 15%, rgba(255,255,255,.88) 0 7px, transparent 8px),
    linear-gradient(90deg, rgba(255,255,255,.62), transparent 28%),
    linear-gradient(to bottom, #f8f1df 0 17%, var(--effect-color, #fff5d8) 18% 78%, #e8cf9e 79% 100%);
  box-shadow:
    inset -9px -8px 0 rgba(51,40,31,.13),
    0 12px 0 rgba(51,40,31,.2),
    24px -13px 0 -12px #f8f1df,
    31px -15px 0 -12px var(--line),
    48px -15px 0 -19px var(--line);
  transform-origin: 72% 22%;
  opacity: 1;
  animation: visibleSprayBottle 1.05s ease-out both;
}

.cup-bowl.is-spraying::after {
  content: "";
  position: absolute;
  left: 15%;
  top: -21%;
  z-index: 34;
  width: clamp(120px, 19vw, 190px);
  height: clamp(92px, 14vw, 142px);
  border: 0;
  border-radius: 46% 54% 58% 42%;
  background:
    radial-gradient(circle at 17% 18%, rgba(255,255,255,.98) 0 5px, transparent 6px),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0 7px, transparent 8px),
    radial-gradient(circle at 52% 38%, rgba(255,255,255,.78) 0 6px, transparent 7px),
    radial-gradient(circle at 71% 52%, rgba(255,255,255,.62) 0 8px, transparent 9px),
    radial-gradient(circle at 86% 68%, rgba(255,255,255,.44) 0 6px, transparent 7px),
    conic-gradient(from 228deg at 0 8%, rgba(255,255,255,.82) 0 19deg, color-mix(in srgb, var(--effect-color, #fff5d8), white 62%) 20deg 45deg, transparent 46deg 360deg);
  filter: drop-shadow(0 4px 0 rgba(51,40,31,.08));
  transform-origin: left top;
  pointer-events: none;
  animation: visibleSprayMist 1.05s ease-out both;
}

.cup-bowl.is-spraying .cup-effect {
  z-index: 33;
  animation: visibleSprayLanding 1.05s ease-out both;
}

@keyframes visibleSprayBottle {
  0% { opacity: 0; transform: translate(-34px, -26px) rotate(-39deg) scale(.78); }
  15% { opacity: 1; transform: translate(-8px, -4px) rotate(-27deg) scale(1); }
  34% { transform: translate(1px, 0) rotate(-18deg) scale(1.05); }
  52% { transform: translate(-3px, 2px) rotate(-29deg) scale(1.02); }
  72% { opacity: 1; transform: translate(4px, -1px) rotate(-20deg) scale(1.04); }
  100% { opacity: 0; transform: translate(20px, -18px) rotate(-14deg) scale(.96); }
}

@keyframes visibleSprayMist {
  0% { opacity: 0; transform: scale(.18) rotate(-8deg); clip-path: inset(0 100% 0 0); }
  18% { opacity: .98; clip-path: inset(0 55% 0 0); }
  48% { opacity: .95; transform: scale(1) rotate(0deg); clip-path: inset(0 0 0 0); }
  78% { opacity: .72; transform: scale(1.08) translate(10px, 12px); }
  100% { opacity: 0; transform: scale(1.22) translate(34px, 30px); clip-path: inset(0 0 0 24%); }
}

@keyframes visibleSprayLanding {
  0% { opacity: 0; transform: translate(-28px, -24px) scale(.2); }
  34% { opacity: .96; transform: translate(-8px, -5px) scale(.72); }
  68% { opacity: .85; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: scale(1.16); }
}

/* Counter iPad fit mode: computer-like, no scrolling */
.counter-top .tablet {
  height: min(520px, calc(100% - 18px));
  max-height: calc(100% - 18px);
}

.counter-top .tablet-screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 6px;
  height: 100%;
  padding: 10px;
  overflow: hidden;
}

.counter-top .tablet-screen > * + * {
  margin-top: 0;
}

.counter-top .tablet-head {
  gap: 8px;
}

.counter-top .tablet-head h2 {
  font-size: clamp(1.05rem, 1.7vw, 1.36rem);
}

.counter-top .tablet-head p,
.counter-top .patience-meter span {
  font-size: .72rem;
  line-height: 1.1;
}

.counter-top .steps {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.counter-top .steps button {
  min-height: 32px;
  padding: 4px 2px;
  border-width: 2px;
  border-radius: 6px;
  font-size: clamp(.52rem, .78vw, .68rem);
  line-height: 1;
}

.counter-top .tool-grid {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(48px, 1fr);
  gap: 6px;
  padding-right: 0;
  margin-top: 0;
  align-content: stretch;
}

.counter-top .order-note,
.counter-top .ipad-mini {
  min-height: 0;
  padding: 8px;
  gap: 3px;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -3px 0 rgba(134,91,55,.08),
    0 4px 0 rgba(51,40,31,.12);
}

.counter-top .order-note {
  align-content: center;
}

.counter-top .order-note span,
.counter-top .order-note em,
.counter-top .ipad-mini span,
.counter-top .ipad-mini em {
  font-size: clamp(.5rem, .75vw, .68rem);
  line-height: 1.05;
}

.counter-top .order-note strong,
.counter-top .ipad-mini strong {
  font-size: clamp(.68rem, 1.05vw, .92rem);
  line-height: 1.03;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.counter-top .order-note strong {
  font-size: clamp(.76rem, 1.18vw, 1.05rem);
  -webkit-line-clamp: 3;
}

.counter-top .ipad-mini em {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.counter-top .tablet-actions {
  margin-top: 0;
  gap: 5px;
}

.counter-top .tablet-actions button {
  min-height: 34px;
  padding: 5px 8px;
  font-size: .78rem;
}

@media (max-width: 980px) {
  .counter-top .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(42px, 1fr);
  }

  .counter-top .steps button {
    font-size: .52rem;
  }
}

@media (max-width: 620px) {
  .counter-top .tablet-screen {
    padding: 8px;
  }

  .counter-top .steps {
    gap: 3px;
  }

  .counter-top .steps button {
    min-height: 28px;
    font-size: .48rem;
  }

  .counter-top .tool-grid {
    gap: 5px;
  }
}

/* Device fit: keep the counter iPad usable without internal scrolling everywhere */
@media (max-width: 900px), (pointer: coarse) {
  .counter-top {
    grid-template-columns: 1fr;
    gap: 10px;
    height: auto;
    min-height: 0;
  }

  .counter-top .paper-ticket {
    width: min(100%, 520px);
    min-height: 170px;
    padding: 14px;
    justify-self: center;
  }

  .counter-top .paper-ticket p {
    -webkit-line-clamp: 3;
    font-size: clamp(.78rem, 2.4vw, .95rem);
    line-height: 1.12;
  }

  .counter-top .tablet {
    width: min(100%, 620px);
    height: clamp(330px, 52svh, 470px);
    max-height: 52svh;
    padding: 9px;
    justify-self: center;
  }

  .counter-top .tablet-screen {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 5px;
    padding: 8px;
    overflow: hidden;
  }

  .counter-top .tablet-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .counter-top .tablet-head h2 {
    font-size: clamp(.92rem, 3vw, 1.16rem);
  }

  .counter-top .tablet-head p {
    display: none;
  }

  .counter-top .patience-meter {
    min-width: 90px;
    gap: 3px;
  }

  .counter-top .patience-meter span {
    font-size: .55rem;
  }

  .counter-top .steps {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }

  .counter-top .steps button {
    min-height: 27px;
    padding: 3px 1px;
    border-radius: 5px;
    font-size: clamp(.43rem, 1.65vw, .56rem);
  }

  .counter-top .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(38px, 1fr);
    gap: 5px;
    overflow: hidden;
  }

  .counter-top .order-note,
  .counter-top .ipad-mini {
    padding: 6px;
    gap: 2px;
  }

  .counter-top .order-note span,
  .counter-top .order-note em,
  .counter-top .ipad-mini span,
  .counter-top .ipad-mini em {
    font-size: clamp(.43rem, 1.55vw, .6rem);
    line-height: 1;
  }

  .counter-top .order-note strong,
  .counter-top .ipad-mini strong {
    font-size: clamp(.55rem, 2vw, .78rem);
    line-height: 1;
  }

  .counter-top .order-note strong {
    -webkit-line-clamp: 2;
  }

  .counter-top .ipad-mini em {
    -webkit-line-clamp: 1;
  }

  .counter-top .tablet-actions button {
    min-height: 30px;
    padding: 4px 6px;
    font-size: .68rem;
  }
}

@media (max-width: 520px) {
  .counter-top .paper-ticket {
    min-height: 138px;
    padding: 11px;
  }

  .counter-top .tablet {
    height: clamp(300px, 48svh, 420px);
    max-height: 48svh;
    padding: 7px;
  }

  .counter-top .tablet-screen {
    padding: 6px;
    gap: 4px;
  }

  .counter-top .patience-meter {
    min-width: 74px;
  }

  .counter-top .steps {
    gap: 2px;
  }

  .counter-top .steps button {
    min-height: 24px;
    font-size: .4rem;
  }

  .counter-top .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(34px, 1fr);
    gap: 4px;
  }

  .counter-top .order-note,
  .counter-top .ipad-mini {
    padding: 5px;
    border-width: 2px;
  }

  .counter-top .order-note span,
  .counter-top .order-note em,
  .counter-top .ipad-mini span,
  .counter-top .ipad-mini em {
    font-size: .4rem;
  }

  .counter-top .order-note strong,
  .counter-top .ipad-mini strong {
    font-size: .54rem;
  }
}

@media (max-height: 720px) and (min-width: 700px) {
  .counter-top .tablet {
    height: min(430px, calc(100% - 12px));
    max-height: calc(100% - 12px);
  }

  .counter-top .paper-ticket {
    min-height: 210px;
  }

  .counter-top .tablet-head p {
    display: none;
  }

  .counter-top .steps button {
    min-height: 27px;
  }

  .counter-top .tool-grid {
    grid-auto-rows: minmax(36px, 1fr);
  }

  .counter-top .tablet-actions button {
    min-height: 30px;
  }
}

/* Same layout on every device: scale the full desktop game instead of rearranging */
body.same-layout-devices {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55) 0 70px, transparent 72px),
    linear-gradient(90deg, rgba(255,255,255,.16) 0 18px, transparent 18px 36px),
    linear-gradient(#8fd1e2 0 38%, #f2c987 38% 68%, #bd7653 68% 100%);
}

body.same-layout-devices .game-shell {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--device-width, 1900px);
  height: var(--device-height, 950px);
  min-width: var(--device-width, 1900px);
  min-height: var(--device-height, 950px);
  padding: 8px;
  gap: 10px;
  transform: scale(var(--device-scale, 1));
  transform-origin: 0 0;
  overflow: hidden;
}

body.same-layout-devices .status-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
}

body.same-layout-devices .status-bar h1 {
  font-size: 2.3rem;
  white-space: nowrap;
}

body.same-layout-devices .stats {
  width: auto;
  grid-template-columns: repeat(5, minmax(68px, 1fr));
  gap: 8px;
}

body.same-layout-devices .status-bar > button {
  width: auto;
  min-width: 112px;
  min-height: 42px;
  height: auto;
  padding: 8px 10px;
  font-size: 1rem;
}

body.same-layout-devices .cafe-stage,
body.same-layout-devices .prep-stage {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

body.same-layout-devices .cafe-stage.hidden,
body.same-layout-devices .prep-stage.hidden {
  display: none;
}

body.same-layout-devices .hint-board {
  padding: 14px;
  overflow: hidden;
}

body.same-layout-devices .counter-scene {
  min-height: 0;
  height: 100%;
}

body.same-layout-devices .counter-top {
  display: grid;
  grid-template-columns: minmax(430px, .86fr) minmax(520px, 1fr);
  gap: 16px;
  height: 470px;
  min-height: 0;
  padding: 16px;
}

body.same-layout-devices .counter-top .paper-ticket {
  width: min(100%, 470px);
  min-height: 360px;
  padding: 22px 26px;
  justify-self: end;
}

body.same-layout-devices .counter-top .paper-ticket p {
  font-size: 1.02rem;
  line-height: 1.25;
  -webkit-line-clamp: 4;
}

body.same-layout-devices .counter-top .tablet {
  width: min(100%, 560px);
  height: 385px;
  max-height: 385px;
  padding: 12px;
  justify-self: start;
}

body.same-layout-devices .counter-top .tablet-screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  gap: 6px;
  padding: 10px;
  overflow: hidden;
}

body.same-layout-devices .counter-top .tablet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

body.same-layout-devices .counter-top .tablet-head p {
  display: block;
}

body.same-layout-devices .counter-top .steps {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

body.same-layout-devices .counter-top .steps button {
  min-height: 34px;
  padding: 4px 3px;
  font-size: .62rem;
}

body.same-layout-devices .counter-top .tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(50px, 1fr);
  gap: 6px;
  overflow: hidden;
}

body.same-layout-devices .prep-table {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
}

body.same-layout-devices .prep-order-paper {
  width: 520px;
  min-height: 176px;
  padding: 22px 26px;
  justify-self: start;
}

body.same-layout-devices .prep-ticket {
  position: absolute;
  left: 550px;
  top: 12px;
  width: calc(100% - 570px);
  min-height: 176px;
}

body.same-layout-devices .prep-workspace {
  display: grid;
  grid-template-columns: minmax(900px, 1fr) 420px;
  gap: 14px;
  align-items: start;
  padding: 0 4px 10px;
  overflow: visible;
}

body.same-layout-devices .prep-tools {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  gap: 10px;
  align-content: start;
  overflow: visible;
}

body.same-layout-devices .ingredient-group {
  gap: 7px;
  padding: 8px;
}

body.same-layout-devices .ingredient-group[data-step="top"] {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.same-layout-devices .ingredient-group[data-step="base"] {
  grid-column: 1;
  grid-row: 2;
}

body.same-layout-devices .ingredient-group[data-step="milk"] {
  grid-column: 2;
  grid-row: 2;
}

body.same-layout-devices .ingredient-group[data-step="flavor"] {
  grid-column: 3;
  grid-row: 2;
}

body.same-layout-devices .ingredient-group[data-step="ice"] {
  grid-column: 4;
  grid-row: 2;
}

body.same-layout-devices .tool {
  min-height: 52px;
  padding: 6px 8px;
  grid-template-columns: 34px minmax(0, 1fr);
}

body.same-layout-devices .tool-label {
  font-size: .86rem;
}

body.same-layout-devices .simple-cup {
  min-height: 590px;
  padding: 16px;
}

body.same-layout-devices .cup-bowl {
  width: 270px;
}

body.same-layout-devices .simple-cup .prep-actions {
  position: static;
  order: -1;
  width: 100%;
  grid-template-columns: 1fr 1fr;
}

body.same-layout-devices .message-log {
  min-height: 34px;
  max-height: 34px;
  padding: 6px 10px;
}

/* Inspired customer polish: cleaner cozy-game faces with readable personalities */
.person {
  width: 174px;
  height: 152px;
  filter: drop-shadow(0 10px 0 rgba(47, 41, 36, .15));
}

.person-face {
  left: 30px;
  top: 38px;
  z-index: 2;
  width: 114px;
  height: 110px;
  border: 4px solid var(--line);
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 31% 68%, rgba(232,104,103,.24) 0 10px, transparent 11px),
    radial-gradient(circle at 69% 68%, rgba(232,104,103,.18) 0 10px, transparent 11px),
    radial-gradient(ellipse at 32% 22%, rgba(255,255,255,.38) 0 13%, transparent 14%),
    linear-gradient(145deg, rgba(255,255,255,.24), transparent 42%),
    var(--skin);
  box-shadow:
    inset 8px 8px 0 rgba(255,255,255,.13),
    inset -8px -8px 0 rgba(82,49,34,.12),
    0 9px 0 rgba(47,41,36,.14);
}

.person[data-face="square"] .person-face {
  border-radius: 42% 42% 35% 35%;
}

.person[data-face="heart"] .person-face {
  border-radius: 54% 54% 58% 58%;
  width: 116px;
}

.person[data-face="long"] .person-face {
  top: 34px;
  height: 118px;
  border-radius: 46% 46% 40% 40%;
}

.person-hair {
  left: 18px;
  top: 13px;
  z-index: 5;
  width: 138px;
  height: 72px;
  border: 4px solid var(--line);
  border-bottom: 0;
  border-radius: 68px 68px 28px 28px;
  background:
    radial-gradient(ellipse at 30% 22%, rgba(255,255,255,.16) 0 17%, transparent 18%),
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 40%),
    var(--hair);
  box-shadow:
    inset 10px 8px 0 rgba(255,255,255,.08),
    inset -12px -8px 0 rgba(0,0,0,.1);
}

.person-hair::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 43px;
  width: 25px;
  height: 45px;
  border: 4px solid var(--line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--hair);
  box-shadow:
    88px -3px 0 -2px var(--hair),
    88px -3px 0 2px var(--line);
}

.person-hair::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 42px;
  width: 76px;
  height: 25px;
  border-radius: 0 0 999px 999px;
  background:
    radial-gradient(ellipse at 22% 8%, rgba(255,255,255,.11) 0 22%, transparent 23%),
    var(--hair);
  box-shadow:
    -18px 1px 0 -8px rgba(0,0,0,.13),
    26px 1px 0 -10px rgba(0,0,0,.16);
}

.person[data-hair-style="side-part"] .person-hair::after {
  left: 18px;
  top: 39px;
  width: 92px;
  height: 29px;
  border-radius: 0 0 48px 16px;
  transform: rotate(-7deg);
}

.person[data-hair-style="round-bob"] .person-hair {
  left: 15px;
  top: 15px;
  width: 144px;
  height: 82px;
  border-radius: 70px 70px 36px 36px;
}

.person[data-hair-style="round-bob"] .person-hair::before {
  top: 47px;
  height: 50px;
}

.person[data-hair-style="tuft"] .person-hair {
  top: 21px;
  height: 60px;
}

.person[data-hair-style="tuft"] .person-hair::after {
  left: 54px;
  top: -16px;
  width: 32px;
  height: 45px;
  border: 4px solid var(--line);
  border-bottom: 0;
  border-radius: 24px 24px 7px 7px;
  transform: rotate(-13deg);
}

.person[data-hair-style="neat"] .person-hair::after {
  left: 23px;
  top: 41px;
  width: 86px;
  height: 18px;
}

.eye {
  top: 52px;
  z-index: 4;
  width: 17px;
  height: 19px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 65% 68%, rgba(255,255,255,.42) 0 2px, transparent 3px),
    #2f2924;
  box-shadow:
    0 2px 0 rgba(47,41,36,.13),
    inset -2px -2px 0 rgba(0,0,0,.16);
  animation: customerBlink 5.4s infinite;
}

.eye.left { left: 30px; }
.eye.right { right: 30px; }

.nose {
  left: 53px;
  top: 70px;
  z-index: 4;
  width: 9px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 75%, rgba(112,65,44,.32) 0 3px, transparent 4px);
  opacity: .9;
}

.mouth {
  left: 38px;
  top: 91px;
  z-index: 4;
  width: 38px;
  height: 16px;
  border: 0;
  border-bottom: 5px solid #7a4939;
  border-radius: 0 0 999px 999px;
  background: transparent;
}

.person[data-mouth="flat"] .mouth {
  top: 97px;
  left: 40px;
  width: 34px;
  height: 0;
  border-bottom-width: 5px;
  border-radius: 999px;
  transform: none;
}

.person[data-mouth="open"] .mouth {
  left: 43px;
  top: 90px;
  width: 27px;
  height: 20px;
  border: 4px solid #7a4939;
  border-radius: 50%;
  background: #fff1ec;
}

.person::before,
.person::after {
  pointer-events: none;
}

.person[data-accessory="glasses"]::before {
  content: "";
  position: absolute;
  left: 38px;
  top: 84px;
  z-index: 7;
  width: 29px;
  height: 24px;
  border: 3px solid #28231f;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow:
    48px 0 0 -3px rgba(255,255,255,.12),
    48px 0 0 0 #28231f;
}

.person[data-accessory="glasses"]::after {
  content: "";
  position: absolute;
  left: 69px;
  top: 95px;
  z-index: 8;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #28231f;
}

.person[data-accessory="freckles"]::before {
  content: "";
  position: absolute;
  left: 51px;
  top: 102px;
  z-index: 7;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(112,65,44,.45);
  box-shadow:
    13px 4px 0 rgba(112,65,44,.34),
    52px -1px 0 rgba(112,65,44,.38),
    64px 4px 0 rgba(112,65,44,.3);
}

.person[data-accessory="brows"]::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 79px;
  z-index: 7;
  width: 23px;
  height: 4px;
  border-radius: 999px;
  background: var(--hair);
  transform: rotate(-7deg);
  box-shadow: 50px 5px 0 var(--hair);
}

.person[data-accessory="blush"]::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 102px;
  z-index: 7;
  width: 23px;
  height: 10px;
  border-radius: 50%;
  background: rgba(224,93,95,.24);
  box-shadow: 64px 0 0 rgba(224,93,95,.18);
}

.person[data-patience="worried"] .eye {
  height: 13px;
  transform: translateY(3px) scaleX(1.08);
}

.person[data-patience="worried"] .mouth {
  top: 98px;
  width: 29px;
  border-bottom-width: 4px;
  transform: rotate(180deg);
}

.person[data-patience="angry"] .eye.left {
  height: 11px;
  transform: rotate(10deg);
}

.person[data-patience="angry"] .eye.right {
  height: 11px;
  transform: rotate(-10deg);
}

.person[data-patience="angry"] .person-face {
  background:
    radial-gradient(circle at 31% 67%, rgba(232,104,103,.28) 0 11px, transparent 12px),
    radial-gradient(circle at 69% 67%, rgba(232,104,103,.24) 0 11px, transparent 12px),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,210,195,.28) 58%, transparent),
    var(--skin);
}

.person[data-patience="angry"] .mouth {
  top: 96px;
  width: 34px;
  height: 0;
  border-bottom-width: 5px;
  border-radius: 999px;
  transform: none;
}

@media (max-width: 760px) {
  .person {
    width: 150px;
    height: 132px;
  }

  .person-face {
    left: 25px;
    top: 33px;
    width: 100px;
    height: 98px;
  }

  .person-hair {
    left: 16px;
    top: 12px;
    width: 118px;
    height: 62px;
  }
}