/* Cookie Rush. Colours, type and brackets come from shared/tokens.css.
   Holiday colours are for the game world only; tickets, buttons, HUD and brackets stay in the notepad colours. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); overscroll-behavior: none; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; user-select: none; }
/* the game's own buttons take the page's type; the frame's (shared/frame.css) keep theirs */
:where(button:not(.btn, .btn-secondary, .btn-link, .best-btn)) { font: inherit; color: inherit; }

#app {
  position: relative;
  max-width: 480px;
  height: 100vh; height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  touch-action: none;
  display: flex; flex-direction: column;
}

/* ------------------------------------------------------------ HUD */
#hud {
  flex: none; height: calc(env(safe-area-inset-top, 0px) + 54px);
  display: flex; gap: 24px; align-items: center;
  padding: env(safe-area-inset-top, 0px) 70px 0 6px;
  border-bottom: 2px solid var(--ink);
}
.hud-item { display: flex; flex-direction: column; min-width: 60px; }
.hud-item .mono-label { font-size: 11px; color: var(--ink-dark); }
.hud-val { font-family: var(--font-mono); font-weight: 600; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hud-val.low { animation: pulse 1s steps(2, jump-none) infinite; }
.hud-val.bump { animation: bump .5s ease-out; }
.hud-tips { flex-direction: row; align-items: center; gap: 8px; }
.hud-col { display: flex; flex-direction: column; }
.jar { position: relative; width: 28px; height: 36px; flex: none; }
.jar img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* coins inside tip-jar.svg: x 6 to 34, y 14 to 48 of 40 x 52 */
.jar-fill { position: absolute; left: 15%; right: 15%; bottom: 7.7%; height: 0; max-height: 65.4%; background: var(--holiday-gold); border-radius: 0 0 3px 3px; transition: height .4s ease-out; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes bump { 30% { transform: scale(1.18); } }

/* the frame's sound toggle, nudged up to sit in this game's HUD row */
.sound-btn { top: calc(env(safe-area-inset-top, 0px) + 3px); right: 8px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.icon { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-sound { --icon: url("art/icon-sound-off.svg"); }
.sound-btn[aria-pressed="true"] .icon-sound { --icon: url("art/icon-sound-on.svg"); }
.icon-smooth { --icon: url("art/icon-smooth.svg"); }
.icon-back { --icon: url("art/icon-back.svg"); }
/* back to the arcade: tap once for "Leave?", again to go */
.leave-btn { margin-right: -14px; }

/* ------------------------------------------------------------ stations */
#stations { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.track { display: flex; width: 400%; height: 100%; transition: transform .32s cubic-bezier(.3, .7, .3, 1); will-change: transform; }
.station:focus { outline: none; }
.station:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.station { flex: none; width: 25%; min-width: 0; overflow: hidden; height: 100%; padding: 10px 16px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }

/* tabs */
.tabs {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ink); background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  position: relative; min-height: 60px; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-dark); touch-action: manipulation;
}
.tab .mono-label { font-size: 10px; letter-spacing: .1em; }
.tab[aria-current="true"] { color: var(--ink); }
.tab[aria-current="true"]::before { content: ""; position: absolute; left: 22%; right: 22%; top: -2px; height: 5px; background: var(--green); }
.tab.alert { animation: flash .6s steps(2, jump-none) infinite; }
@keyframes flash { 50% { background: var(--ink); color: var(--white); } }
.badge {
  position: absolute; top: 5px; left: calc(50% + 10px);
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--ink); color: var(--white);
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; line-height: 20px; text-align: center;
}
.badge-bell { display: grid; place-items: center; padding: 0; background: var(--ink); color: var(--green); }
.badge-bell .icon { width: 13px; height: 13px; }

/* buttons: .btn, .btn-secondary and .btn-link come from shared/frame.css */
.btn-act { flex: none; min-height: 54px; font-size: 22px; }
.btn:disabled { background: var(--paper-under); color: var(--ink-mid); cursor: default; transform: none; }
.btn-secondary:disabled { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ink-light); color: var(--ink-mid); }
.btn-slim { margin: 0; min-height: 52px; width: auto; flex: 1; }
.btn-act.ready { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--green); }

/* ------------------------------------------------------------ tickets (notepad chrome) */
.ticket {
  position: relative; display: block; width: 100%; text-align: left;
  border: 0; padding: 12px 12px 16px; cursor: pointer;
  background: url("art/ticket.svg") center / 100% 100% no-repeat;
  filter: drop-shadow(3px 4px 0 var(--paper-under));
  touch-action: manipulation;
}
.t-who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11px; color: var(--ink-dark); }
.t-who .scarf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--ink); }
.t-cols { display: grid; grid-template-columns: repeat(var(--n, 1), 1fr); gap: 4px 12px; }
.t-col h4 { margin: 0 0 3px; font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dark); }
.line { display: grid; grid-template-columns: 28px 1fr 22px; align-items: center; gap: 6px; min-height: 30px; font-weight: 600; font-size: 14px; line-height: 1.1; }
.line .chk { position: relative; width: 22px; height: 22px; }
.line .chk img, .cell .chk img { position: absolute; inset: -4px; width: 30px; height: 30px; }
.line .chk .tk, .cell .chk .tk { visibility: hidden; }
.line.ok .chk .tk, .cell.ok .chk .tk { visibility: visible; }
.line.ok > span:nth-child(2) { color: var(--ink-dark); }
.ico { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.ico img { width: 100%; height: 100%; }
.ico .shape { width: 24px; height: 24px; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.dollop { position: relative; display: block; width: 24px; height: 24px; }
.dollop::before, .dollop::after { content: ""; position: absolute; inset: 0; -webkit-mask: url("art/icon-icing.svg") center / contain no-repeat; mask: url("art/icon-icing.svg") center / contain no-repeat; background: var(--c); }
.dollop::after { -webkit-mask-image: url("art/icon-icing-line.svg"); mask-image: url("art/icon-icing-line.svg"); background: var(--ink); }

/* compact ticket: rows of pictures only */
.ticket.compact { padding: 8px 8px 13px; }
.ticket.compact .t-who { font-size: 10px; letter-spacing: .08em; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket.compact .t-cols { display: flex; flex-direction: column; gap: 3px; }
.crow { display: flex; gap: 2px; }
.crow + .crow { padding-top: 3px; border-top: 2px dotted var(--ink-light); }
.cell { position: relative; width: 28px; height: 26px; display: grid; place-items: center; }
.cell .chk { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; }
.cell .chk img { inset: -2px; width: 20px; height: 20px; }
.cell .chk .bx { display: none; }
.cell .ico { width: 24px; height: 24px; }
.cell.ok .ico { opacity: .55; }

/* order strip: every waiting order, about 2¼ cards on screen, swipe sideways for more */
.orders {
  flex: none; display: flex; gap: 8px; align-items: stretch;
  padding: 8px 16px 6px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding: 16px;
  touch-action: pan-x; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 2px solid var(--ink); background: var(--paper-under);
  min-height: 112px;
}
.orders::-webkit-scrollbar { display: none; }
.orders .ticket { flex: none; width: calc((100% - 16px) / 2.25); scroll-snap-align: start; animation: slideIn .45s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
.orders .ticket.leaving { opacity: .5; }
.orders-empty { margin: auto; font-size: 12px; color: var(--ink-dark); }
.box-count { margin: 4px 0 0; font-size: 10px; color: var(--ink-dark); }

/* full-ticket overlay */
.sheet-overlay { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(0, 0, 0, .8); }
.sheet-body { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.sheet-body .ticket { cursor: default; }
.sheet-close { color: var(--white); font-size: 11px; margin: 14px 0 0; }
.sheet-overlay:focus { outline: none; }

/* ------------------------------------------------------------ Order station */
.st-order { padding: 0; }
.scene { position: relative; flex: 1; min-height: 190px; overflow: hidden; background: var(--paper-under); }
/* back to front: wall panelling, window, door, bunting, shelf, customers (canvas), bubbles, counter front.
   The counter line is 70% down the scene (drawScene's counterTop); the wall pieces stand on it. */
.scene-wall { position: absolute; left: 0; bottom: 30%; width: 100%; height: 20%; }
.scene-window { position: absolute; left: 4%; bottom: calc(30% + 14%); width: 28%; max-width: 150px; }
.scene-door { position: absolute; right: -3%; bottom: 30%; height: 50%; aspect-ratio: 120 / 240; }
.scene-bunting { position: absolute; top: 0; left: 0; width: 100%; transform-origin: 50% 0; animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
.scene-shelf { position: absolute; top: 17%; left: 37%; width: 30%; }
#customers { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-counter { position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; }
.counter-front { position: absolute; inset: 0; width: 100%; height: 100%; }
/* counter-cookies.svg keeps its aspect, centred in the glass (y 30 to 96 of counter-front's 150) */
.case-cookies { position: absolute; left: 6%; width: 88%; top: 26%; height: 34%; }
.patience { display: block; height: 7px; margin: 0 0 6px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
.patience i { display: block; height: 100%; background: var(--green); }
.patience.grumpy i { background: var(--ink-dark); }

/* ------------------------------------------------------------ Dough and Cut */
.board-row { flex: 1; min-height: 120px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.bowls { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-height: 0; }
.bowl { border: 0; background: transparent; padding: 2px 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; touch-action: manipulation; border-radius: var(--radius-button); }
.bowl img { width: 64px; }
.bowl .mono-label { font-size: 10px; color: var(--ink-dark); }
.bowl.on { box-shadow: inset 0 0 0 3px var(--green); }
.bowl:disabled, .cutter:disabled { opacity: .35; cursor: default; }
.board { position: relative; width: 100%; min-width: 0; aspect-ratio: 320 / 170; max-height: 100%; justify-self: center; }
.board-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sheet { position: absolute; left: 7%; top: 9%; width: 86%; height: 82%; transform-origin: left center; }
.sheet.rolling { animation: roll .5s ease-out; }
@keyframes roll { from { transform: scaleX(.15); } }
/* The pin lies across the board (handles top and bottom) and rolls left to right over the sheet. */
.pin { position: absolute; left: -19%; top: 50%; width: 52%; opacity: 0; pointer-events: none; transform: translate(0, -50%) rotate(90deg); }
.pin.rolling { animation: pin .5s ease-out; }
@keyframes pin { 0% { opacity: 1; transform: translate(0, -50%) rotate(90deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(165%, -50%) rotate(90deg); } }
/* cut-outs in the sheet (icing-<shape>.svg as a mask) and the cutter dropping on to it */
.sheet-holes { position: absolute; inset: 0; pointer-events: none; }
.sheet-hole { position: absolute; top: 30%; width: 16%; aspect-ratio: 1; background: var(--paper-under); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.cut-drop { position: absolute; top: 24%; width: 16%; aspect-ratio: 1; pointer-events: none; transform-origin: 50% 100%; z-index: 2; }
.board-hint { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 11px; color: var(--ink-dark); text-align: center; }
.cutters { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cutter { border: 0; border-radius: var(--radius-button); background: var(--white); min-height: 64px; padding: 4px; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 0 0 2px var(--hairline); }
.cutter img { width: 54px; height: 54px; display: block; margin: 0 auto; }
.cutter:not(:disabled):active { transform: translateY(2px); }
.tray-wrap { flex: none; display: flex; justify-content: center; }

/* trays and cookies: tray.svg 300 x 140, slots centred at x 80 / 220 (or 150), 120 wide */
.tray { position: relative; width: min(100%, 300px); aspect-ratio: 320 / 100; background: url("art/tray.svg") center / 100% 100% no-repeat; }
/* tray.svg slots: centres x 46, 122, 198, 274 of 320, 68 wide */
.tray .cookie, .tray .slot-ghost { position: absolute; top: 16%; width: 21.25%; aspect-ratio: 1; }
.tray .slot0 { left: 3.75%; } .tray .slot1 { left: 27.5%; } .tray .slot2 { left: 51.25%; } .tray .slot3 { left: 75%; }
.tray .slot-ghost { border: 2px dashed var(--ink-mid); border-radius: 50%; transform: scale(.8); }
.tray-small { width: 140px; flex: none; }
.cookie { position: relative; }
.cookie > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cookie.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.4); } }
.cookie .top { transition: opacity .25s; }
.cookie .top.drop { animation: drop .35s ease-out; }
@keyframes drop { from { transform: translateY(-14%); opacity: 0; } }

/* ------------------------------------------------------------ Bake */
.ovens { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oven-col { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.oven-box { flex: 0 1 auto; min-height: 90px; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.oven { position: relative; width: 100%; max-height: 100%; aspect-ratio: 300 / 290; }
.oven-col .btn-act { width: 100%; font-size: 19px; }
.oven-col .btn-secondary { margin: 0; min-height: 54px; }
.oven > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* window x 32..268, y 96..236 of 300 x 290; the tray sits on the rack line */
.oven-tray { position: absolute; left: 14%; width: 72%; top: 52%; }
.oven-tray .tray { width: 100%; }
/* coils glow while a tray bakes; steam (golden) or smoke (dark) rises off the oven top */
.oven-coils { opacity: 0; }
.oven.hot .oven-coils { opacity: 1; animation: glow 1.2s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .7; } to { opacity: 1; } }
.oven > img.oven-puff { display: none; inset: auto; left: 30%; bottom: 76%; width: 40%; height: auto; z-index: 2; pointer-events: none; }
.oven.steam > img.oven-puff.steam, .oven.smoke > img.oven-puff.smoke { display: block; animation: rise 1.6s ease-out infinite; }
@keyframes rise { 0% { transform: translateY(16%) scale(.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-36%) scale(1.08); opacity: 0; } }
.oven > img.oven-sparkle { inset: auto; width: 10%; height: auto; z-index: 3; pointer-events: none; transition: transform .75s cubic-bezier(.2, .8, .3, 1), opacity .75s ease-in; }
.oven > img.oven-stamp { inset: auto; left: 12%; top: 46%; width: 76%; height: auto; z-index: 4; pointer-events: none; animation: stamp 1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes stamp-still { 0% { opacity: 1; transform: rotate(-6deg); } 100% { opacity: 0; } }
@keyframes stamp { 0% { transform: scale(1.8) rotate(-8deg); opacity: 0; } 22% { transform: scale(1) rotate(-6deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 0; } }
.oven-light { position: absolute; left: 76.7%; top: 9%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--ink-dark); }
.oven-light.on { background: var(--holiday-gold); }
.oven-light.ding { background: var(--green); animation: pulse .5s steps(2, jump-none) infinite; }
.dial { width: 100%; max-width: 200px; height: auto; display: block; flex: none; }
.dial-label { margin: 0; font-size: 10px; letter-spacing: .08em; color: var(--ink); min-height: 14px; text-align: center; }
.staging { flex: none; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 0 0; border-top: 2px dotted var(--ink-light); }
.staging .tray:empty { display: none; }
.staging-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-dark); }
.hint { flex: none; margin: 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink-dark); }

/* ------------------------------------------------------------ Decorate */
.deco-area { position: relative; flex: 1; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.deco-slot { position: relative; height: 100%; max-height: 260px; aspect-ratio: 1; max-width: 100%; touch-action: none; cursor: crosshair; }
.deco-slot .cookie { position: absolute; inset: 6%; }
.rack { flex: none; display: flex; gap: 6px; min-height: 60px; padding: 4px; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; background: var(--paper-under); border-radius: var(--radius-button); }
.rack::-webkit-scrollbar { display: none; }
.rack-empty { margin: auto; font-size: 13px; font-weight: 600; color: var(--ink-dark); }
.thumb { position: relative; flex: none; width: 52px; height: 52px; border: 0; padding: 2px; border-radius: var(--radius-button); background: transparent; cursor: pointer; touch-action: manipulation; }
.thumb > * { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); pointer-events: none; }
.thumb[aria-pressed="true"] { background: var(--white); box-shadow: inset 0 0 0 3px var(--ink); }
.deco-empty { position: absolute; margin: 0; text-align: center; font-weight: 600; font-size: 16px; color: var(--ink-dark); }
.box { position: absolute; left: 50%; top: 50%; width: 70%; max-width: 260px; transform: translate(-50%, -50%); }
.box.closing { animation: boxIn .6s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes boxIn { 0% { transform: translate(-50%, -160%); opacity: 0; } 45% { transform: translate(-50%, -50%); opacity: 1; } 75% { transform: translate(-50%, -50%); } 100% { transform: translate(60%, -50%); opacity: 0; } }
.palette { flex: none; display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 6px; }
.swatch-btn { min-height: 52px; border: 0; border-radius: var(--radius-button); background: var(--white); box-shadow: inset 0 0 0 2px var(--hairline); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.swatch-btn .dollop { width: 30px; height: 30px; }
.swatch-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.swatch-btn[aria-pressed="true"]::after { content: ""; position: absolute; }
.palette.nudge .swatch-btn:not(.smooth-btn) { animation: nudge .5s ease-out; }
@keyframes nudge { 30% { transform: translateY(-6px); } }
.smooth-btn { display: flex; flex-direction: column; gap: 1px; color: var(--ink); }
.smooth-btn .mono-label { font-size: 10px; }
.smooth-btn:disabled { color: var(--ink-light); cursor: default; }
.toppings { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.top-btn { min-height: 48px; border: 0; border-radius: var(--radius-button); background: var(--white); box-shadow: inset 0 0 0 2px var(--hairline); display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; font-size: 13px; cursor: pointer; touch-action: manipulation; padding: 0 4px; }
.top-btn img { width: 28px; height: 28px; }
.top-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.palette button:disabled, .toppings button:disabled { opacity: .4; cursor: default; }

/* the colour and topping rows sit in .deco-tools: two rows normally, one row on short screens */
.deco-tools { display: contents; }

/* Decorate: the open box and its buttons */
.box-row { flex: none; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.box-row .btn-secondary { margin: 0; min-height: 54px; font-size: 16px; }
.open-box { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px 6px; background: var(--white); border-radius: var(--radius-button); box-shadow: inset 0 0 0 2px var(--ink); }
.open-box .mono-label { font-size: 9px; color: var(--ink-dark); }
.ob-slots { display: flex; gap: 3px; }
.mini { position: relative; display: block; width: 34px; height: 34px; flex: none; }
.mini > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-ice { -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; background: var(--c); }
.mini-empty { border: 2px dashed var(--ink-light); border-radius: 50%; transform: scale(.8); }

/* Counter: bubbles over customers, boxes on the counter */
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.cust { position: absolute; pointer-events: auto; border: 0; padding: 0; background: transparent; cursor: pointer; display: flex; justify-content: center; align-items: flex-start; border-radius: var(--radius-card); touch-action: manipulation; }
.cust.arriving { pointer-events: none; }
.bubble { position: relative; display: flex; gap: 4px; padding: 6px 8px; background: var(--white); border-radius: 14px; box-shadow: 0 0 0 2.5px var(--ink); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: var(--white); box-shadow: 2.5px 2.5px 0 0 var(--ink); transform: rotate(45deg); }
.bubble .mini { width: 40px; height: 40px; }
.scene.holding .cust { box-shadow: inset 0 0 0 3px var(--green); }
.scene.holding .cust .bubble { animation: nudge .8s ease-in-out infinite; }
.counter-boxes { position: absolute; left: 0; right: 0; bottom: calc(30% - 34px); display: flex; justify-content: center; gap: 10px; padding: 0 12px; }
.cbox { position: relative; width: 74px; height: 70px; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.cbox img { position: absolute; left: 0; bottom: 0; width: 100%; }
/* box-window.svg's window is x 40 to 160, y 60 to 120 of 200 x 140; the box image is the cbox's bottom 70% */
.cbox-peek { position: absolute; left: 20%; right: 20%; bottom: 11%; height: 32%; display: flex; justify-content: center; align-items: center; background: var(--paper-under); overflow: hidden; }
.cbox-peek .mini { width: 26px; height: 26px; margin: 0 -2px; }
.cbox[aria-pressed="true"] { transform: translateY(-10px); }
.cbox[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -8px; height: 5px; border-radius: 3px; background: var(--green); }
.counter-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; padding: 4px 8px; white-space: nowrap; font-size: 11px; color: var(--white); background: var(--ink); border-radius: var(--radius-button); }
.counter-hint:empty { display: none; }

/* first-time guidance: a gentle pulse on the tab or controls to try next (not the ink alert flash) */
.tab.guide::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--green); }
.tab.guide .icon { animation: guide 1.4s ease-in-out infinite; }
@keyframes guide { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.15); } }
.palette.guide .swatch-btn:not(.smooth-btn) { animation: guide 1.4s ease-in-out infinite; }
.deco-guide { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 4px 8px; white-space: nowrap; font-size: 10px; color: var(--white); background: var(--ink); border-radius: var(--radius-button); pointer-events: none; }

/* the serve: the box flies to the customer, coins arc into the jar, the ticket is ticked and slides out */
.fly-box { position: absolute; z-index: 7; pointer-events: none; }
.fly-coin { position: absolute; z-index: 7; width: 22px; height: 22px; pointer-events: none; }
.jar { transform-origin: 50% 90%; }
.orders .ticket.served { pointer-events: none; animation: ticketOut .4s .25s ease-in forwards; }
@keyframes ticketOut { to { transform: translateY(-110%); opacity: 0; } }
.served-tick { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; clip-path: inset(0 100% 0 0); animation: draw .25s cubic-bezier(.3, .7, .3, 1) forwards; }

/* ------------------------------------------------------------ toast */
.toast {
  pointer-events: none; /* it sits over the bottom buttons: taps go through to them */
  position: absolute; z-index: 7; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--ink); color: var(--white); border-radius: var(--radius-button);
  font-weight: 600; font-size: 15px;
  animation: toastIn .3s ease-out;
}
.toast canvas { width: 40px; height: 44px; flex: none; }
.toast .amt { margin-left: auto; font-family: var(--font-mono); color: var(--green-dark); }
@keyframes toastIn { from { transform: translateY(14px); opacity: 0; } }

/* ------------------------------------------------------------ start and finish */
/* The cards come from shared/frame.css. Behind them is the shop itself, dimmed with ink (the frame's
   default backdrop), so players see what the game is about. */
:root { --frame-score: 68px; }
@media (max-height: 700px) { :root { --frame-score: 56px; } }
.end-host { display: block; width: 120px; height: 100px; margin: 6px auto 4px; }
.bake-host { flex: none; width: 52px; height: 52px; margin-left: auto; }
.stats { line-height: 1.7; }
.todo { margin: 20px 0; }
/* the served tick on a ticket draws like the frame's tick */
@keyframes draw { to { clip-path: inset(0 0 0 0); } }

/* Classic / Cozy / Studio switch on the Start card */
.mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: var(--radius-button); background: var(--paper-under); }
.mode button { min-height: 44px; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--ink-dark); font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.mode button[aria-checked="true"] { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
/* Cozy Shift: no tips, no patience bars */
.cozy .hud-tips, .cozy .patience { display: none !important; }
.cozy #hudTime { font-size: 22px; }

/* Studio: no customers, orders, clock or tips. The Counter becomes the Display, and Decorate's
   box buttons become Put on Display. */
.studio .hud-tips { display: none !important; }
.studio #hudTime { font-size: 22px; }
.display, #toDisplay { display: none; }
.studio .st-order .scene, .studio .open-box, .studio #boxIt, .studio #closeBox { display: none; }
.studio #toDisplay { display: block; }
.studio .box-row { grid-template-columns: 1fr; }
.studio .display { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; }
/* the case is built from display-top, one display-shelf per row (4 cookies each) and display-base,
   all 400 units wide at a fixed aspect; it scrolls once there are more rows than fit */
.display-case { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: contain; }
.display-case::-webkit-scrollbar { display: none; }
.display-case > img { display: block; width: 100%; height: auto; }
.dshelf { position: relative; width: 100%; aspect-ratio: 400 / 100; background: url("art/display-shelf.svg") center / 100% 100% no-repeat; }
/* slots in display-shelf.svg: 84 units square, left x 20, 112, 204, 296, top y 8 */
.dcookie { position: absolute; top: 8%; left: calc(5% + var(--slot, 0) * 23%); width: 21%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: zoom-in; touch-action: manipulation; }
.dcookie > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dcookie.new { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.display-empty { position: absolute; left: 10%; right: 10%; top: 42%; margin: 0; text-align: center; font-weight: 600; font-size: 15px; color: var(--ink-dark); pointer-events: none; }
.display-host { flex: none; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.display-host .bake-host { margin-left: 0; width: 72px; height: 72px; }
.studio .display #closeStudio { margin-top: auto; }
.display-say { position: relative; flex: 1; margin: 0; padding: 8px 12px; font-weight: 600; font-size: 15px; line-height: 1.25; background: var(--white); border-radius: 14px; box-shadow: 0 0 0 2.5px var(--ink); }
.display-say::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--white); box-shadow: -2.5px 2.5px 0 0 var(--ink); transform: rotate(45deg); }
.display-say:empty { display: none; }
/* a displayed cookie, shown big */
.cookie-view { position: relative; width: min(78vw, 280px); aspect-ratio: 1; }
.cookie-view > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.cookie-view-name { margin: 12px 0 0; color: var(--white); font-weight: 600; font-size: 17px; text-align: center; }
/* Finish card: a row of their cookies on a shelf */
.end-display { width: 100%; max-width: 250px; margin: 8px auto 0; }
.studio-end .todo { margin: 14px 0 16px; }
.end-display > img { display: block; width: 100%; height: auto; }
.end-shelf { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 2px; aspect-ratio: 400 / 100; padding: 0 5% 4%; background: url("art/display-shelf.svg") center / 100% 100% no-repeat; }
.end-shelf .mini { width: 15%; height: auto; aspect-ratio: 1; }
.end-more { align-self: center; margin-left: 4px; font-size: 11px; color: var(--ink-dark); }
.studio-end #endStats { display: none; }

/* High scores: the form and board styles come from shared/frame.css */
.hs-list { max-height: none; }

/* short screens: tighten so every station fits at 375 x 667 */
@media (max-height: 700px) {
  .station { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .btn-act { min-height: 50px; }
  .cutter { min-height: 58px; } .cutter img { width: 48px; height: 48px; }
  .orders { min-height: 104px; padding-top: 6px; }
  .rack { min-height: 54px; } .thumb { width: 46px; height: 46px; }
  .hint { display: none; }
}

/* phone browsers with their bars showing (an iPhone SE in Safari leaves about 548px): every
   station's buttons must still fit, so the strip goes to one row and Decorate's tools share a row */
@media (max-height: 600px) {
  .station { gap: 5px; padding: 6px 12px; }
  .orders { min-height: 0; padding: 5px 12px 4px; gap: 6px; }
  .ticket.compact { padding: 5px 7px 9px; }
  .ticket.compact .t-who { margin-bottom: 1px; }
  .ticket.compact .patience { height: 6px; margin-bottom: 3px; }
  .crow + .crow { padding-top: 2px; }
  .ticket.compact .t-cols { gap: 2px; }
  .cell { width: 24px; height: 20px; }
  .cell .ico { width: 20px; height: 20px; }
  .ico .shape, .cell .dollop { width: 18px; height: 18px; }
  .box-count { margin-top: 1px; }
  /* Dough */
  .board-row { min-height: 84px; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
  .bowl { min-height: 60px; }
  .bowl img { width: 48px; }
  .cutter { min-height: 48px; } .cutter img { width: 40px; height: 40px; }
  .tray-wrap .tray { width: min(100%, 260px); }
  .btn-act { min-height: 48px; font-size: 20px; }
  /* Decorate: colours, Smooth and toppings on one row; names stay for screen readers */
  .deco-area { min-height: 0; }
  .rack { min-height: 50px; padding: 2px 4px; } .thumb { width: 44px; height: 44px; }
  .deco-tools { display: grid; grid-template-columns: 5fr 3fr; gap: 4px; flex: none; }
  .deco-tools .palette, .deco-tools .toppings { gap: 4px; }
  .deco-tools .palette { grid-template-columns: repeat(5, 1fr); }
  .swatch-btn, .top-btn { min-height: 44px; padding: 0; }
  .swatch-btn .dollop { width: 24px; height: 24px; }
  .smooth-btn .mono-label, .top-btn .top-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .box-row .btn-secondary { min-height: 48px; }
  .staging { min-height: 50px; }
  /* Studio Finish: a smaller picture of the display, without its crown */
  .end-display { max-width: 210px; }
  .end-display > img:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }
  .hud-val.low, .hud-val.bump, .tab.alert, .oven-light.ding, .cookie.pop, .cookie .top.drop, .sheet.rolling, .pin.rolling,
  .orders .ticket, .toast, .scene.holding .cust .bubble, .scene-bunting, .tab.guide .icon, .palette.guide .swatch-btn, .oven.hot .oven-coils, .oven-puff, .palette.nudge .swatch-btn, .box.closing { animation: none; }
  .tab.alert { background: var(--ink); color: var(--white); }
  .jar-fill { transition: none; }
  .oven.steam > img.oven-puff.steam, .oven.smoke > img.oven-puff.smoke { animation: none; } /* still shown, just still */
  .oven > img.oven-stamp { animation: stamp-still 1s step-end both; }
  .orders .ticket.served { animation: none; opacity: .5; }
  .dcookie.new { animation: none; }
  .served-tick { animation: none; clip-path: none; }
}