.app {
  max-width: 540px;
  margin: 0 auto;
  padding: 12px 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status { flex: 1; min-width: 0; max-width: 260px; display: flex; flex-direction: column; align-items: center; padding: 6px 12px 8px; }
.stars { display: flex; gap: 2px; line-height: 0; }
.stars svg { display: block; }
.status .money { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.status .money::before { content: " · "; color: var(--muted); }
.status .money.bump { display: inline-block; animation: bump 0.4s ease; }
.status.danger { background: #ffe1e1; box-shadow: inset 0 0 0 3px #ef3c3c, 0 5px 0 #c4232a; animation: danger 0.8s ease-in-out infinite alternate; }
.status.danger .sub { color: #c4232a; }
.status .sub { font-size: 0.92rem; font-weight: 600; color: var(--muted); }

/* Status: the sterrenmunten next to the stars (on the smallest phones in the line below) */
.status-top { display: flex; align-items: center; gap: 8px; }
.coin-count { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 3px; border-radius: 999px; background: #fff3c4; box-shadow: inset 0 0 0 2px #ffe08a; color: #8a5a00; font-weight: 700; font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.coin-count svg { display: block; flex: none; }
.coin-count.bump { animation: coin-bump 0.5s ease; }
.sub-coins { display: none; }

/* Queue of customers */
.queue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 172px; align-items: end; }
/* Rustig aan: two places in the queue (a little narrower than half, so a card keeps its size) */
.queue[data-slots="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 12%; padding-right: 12%; }
.shopfront > .queue[data-slots="2"] { padding-left: 12%; padding-right: 12%; }
.customer { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.customer.enter { animation: walk-in 0.45s ease; }
.customer.leaving { animation: walk-out 0.5s ease forwards; }
.customer.hop { animation: hop 0.5s ease forwards; }
.customer.leaving, .customer.hop { pointer-events: none; }
.bubble {
  position: relative;
  width: 100%;
  padding: 7px 6px 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 0 var(--cream-dark);
  text-align: center;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
.customer.first .bubble { box-shadow: 0 0 0 3px var(--pink), 0 3px 0 var(--cream-dark); }
.order { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 2px; font-size: 1.35rem; line-height: 1.15; }
.order span { position: relative; display: block; width: 1.25em; height: 1.25em; }
.order span.multi { margin-right: 0.3em; }
.count {
  position: absolute;
  right: -0.45em;
  top: -0.3em;
  min-width: 1.5em;
  padding: 0 0.2em;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: max(0.55em, 14px);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.order svg, .ing .ico svg, .topping svg, .side-btn svg, .start-pizza svg { display: block; width: 100%; height: 100%; }
.order span.done { opacity: 0.3; }
.order span.done .count { background: #9a8bb0; }
.order.many { font-size: 1.05rem; }
/* "zonder": the crossed-out ingredient */
.order span.no { margin-left: 0.15em; }
.order span.no .nope { position: absolute; inset: -6%; width: 112%; height: 112%; opacity: 0.9; }
/* halve-halve: a split pizza, left icons | right icons */
.hh, .fo {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--cheese) 0 74%, var(--sauce) 75% 84%, #e7b56c 85%);
  box-shadow: inset 0 0 0 2px rgba(170, 110, 50, 0.45);
}
.hh { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 8px; }
.hh::after { content: ""; position: absolute; left: 50%; top: 5px; bottom: 5px; margin-left: -1.5px; border-left: 3px dashed #fff; }
.hh-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.hh span, .fo span { display: block; width: 22px; height: 22px; }
.hh span.done, .fo span.done { opacity: 0.35; }
/* gezichtje: two eyes and a mouth on a little pizza */
.fo span { position: absolute; transform: translate(-50%, -50%); }
.fo span[data-role="eye"] { width: 22px; height: 22px; top: 36%; }
.fo span[data-role="eye"][data-k="0"] { left: 33%; }
.fo span[data-role="eye"][data-k="1"] { left: 67%; }
.fo span[data-role="mouth"] { width: 18px; height: 18px; }
.fo span[data-role="mouth"][data-k="0"] { left: 30%; top: 62%; }
.fo span[data-role="mouth"][data-k="1"] { left: 50%; top: 72%; }
.fo span[data-role="mouth"][data-k="2"] { left: 70%; top: 62%; }
.hh svg, .fo svg { display: block; width: 100%; height: 100%; }
/* klein of groot, rode of witte saus */
.req { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; }
.size-badge { display: flex; align-items: flex-end; gap: 3px; padding: 2px 5px; border-radius: 999px; background: var(--cream-2); }
.size-badge i { display: block; border-radius: 50%; background: #e7c79a; box-shadow: inset 0 0 0 2px #c98a45; opacity: 0.35; }
.size-badge i.s { width: 11px; height: 11px; }
.size-badge i.l { width: 19px; height: 19px; }
.size-badge i.on { opacity: 1; background: #f3d9a8; box-shadow: inset 0 0 0 2px #b97d44, 0 0 0 2px var(--pink); }
.sauce-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 0 0 2px #fff, 0 0 0 3.5px #d8c3a5; }
.size-badge.done, .sauce-dot.done { opacity: 0.4; }
.price { margin-top: 3px; font-weight: 700; font-size: 0.95rem; color: var(--pink-dark); }
.face { width: 60px; line-height: 0; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.12)); }
.face svg { display: block; width: 100%; height: auto; }
/* the customers in the queue breathe (each at their own moment) and follow the pizza in the oven with their eyes */
#queue .customer .face svg { transform-origin: 50% 92%; animation: breathe 3.6s ease-in-out infinite; }
#queue .customer:nth-child(2) .face svg { animation-delay: -1.2s; animation-duration: 3.9s; }
#queue .customer:nth-child(3) .face svg { animation-delay: -2.3s; animation-duration: 3.3s; }
@keyframes breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.025, 0.97); } }
.face .pz-look { transition: transform 0.45s ease; }
.face.watching .pz-look { transform: translate(var(--lx, 0), var(--ly, 0)); }
.patience { width: 80%; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); overflow: hidden; }
.patience i { display: block; height: 100%; width: 100%; border-radius: 999px; background: #4fc01c; transition: background 0.3s ease; }
.patience i.mid { background: #ffb703; }
.patience i.low { background: #ef3c3c; }
.empty-slot { height: 100%; border: 3px dashed rgba(255, 255, 255, 0.7); border-radius: 18px; min-height: 150px; display: grid; place-items: center; color: var(--on-sky, var(--muted)); font-weight: 600; font-size: 0.85rem; text-align: center; padding: 6px; }
/* a place nobody comes to any more today keeps its room, unseen */
.empty-slot.unused { visibility: hidden; }

/* Special customers: a label at the top of the bubble */
.who { display: flex; align-items: center; justify-content: center; gap: 3px; margin: -2px 0 3px; font-size: 0.82rem; font-weight: 700; line-height: 1.1; color: var(--muted); }
.who > span { min-width: 0; overflow-wrap: break-word; }
.who svg { flex: none; width: 15px; height: 15px; }
.who.vip { color: #a66a00; }
.who.vip svg, .who.recipe svg { position: absolute; left: -7px; top: -11px; width: 22px; height: 22px; transform: rotate(-18deg); filter: drop-shadow(0 1px 0 #fff); }
.who.recipe svg { top: -17px; left: -5px; width: 20px; height: 20px; transform: rotate(-10deg); }
.who.vip svg { top: -15px; }
.who.long { line-height: 1.05; }
.who > span { white-space: normal; text-align: center; }
.who.recipe { color: var(--pink-dark); }
/* the vandaag-special: the recipe's name with a word under it */
.who.todays { flex-direction: column; gap: 0; }
.who.todays small { font-size: 1em; color: #c77700; }
/* the recipe book on an order "op naam": a tap opens the recipe */
.who-book { position: absolute; left: -9px; top: -19px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; background: none; line-height: 0; transform: rotate(-10deg); cursor: pointer; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18)); }
.who-book::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; }
.who.recipe .who-book svg { position: static; display: block; width: 100%; height: 100%; transform: none; filter: none; }
.who-book:active { transform: rotate(-10deg) scale(0.9); }
.who-book:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
/* opened from an order: just that recipe, to read (Klaar closes it) */
.book.peek .book-nav { display: none; }
.who.critic { color: #3a1f4a; }
/* Krokante Kees wants it black */
.who.black { flex-direction: column; gap: 0; color: #3a2a40; }
.who.black small { font-size: 1em; color: #8c521f; }
.need.black { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #6b6478; }
.customer.black .bubble { box-shadow: 0 0 0 3px #6b6478, 0 3px 0 var(--cream-dark); }
.customer.black.first .bubble { box-shadow: 0 0 0 3px var(--pink), 0 0 0 6px #6b6478, 0 3px 0 var(--cream-dark); }
.who.regular { flex-direction: column; gap: 0; color: #2b6cb0; }
.who.regular small { font-size: 1em; color: #2c8a0e; }
.who-n { padding: 1px 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 0.95em; }
.customer.vip .bubble { box-shadow: 0 0 0 3px #ffc61a, 0 3px 0 var(--cream-dark); }
.customer.vip.first .bubble { box-shadow: 0 0 0 3px var(--pink), 0 0 0 6px #ffc61a, 0 3px 0 var(--cream-dark); }
.customer.critic .bubble { background: #f4f6fb; }
.customer.critic .bubble::after { border-top-color: #f4f6fb; }
.customer { position: relative; }
.customer.vip .face { width: 74px; filter: drop-shadow(0 0 6px rgba(255, 198, 26, 0.85)) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.12)); }
.glam { position: absolute; left: 50%; bottom: 8px; width: 92px; height: 70px; margin-left: -46px; pointer-events: none; }
.glam i { position: absolute; line-height: 0; animation: twinkle 1.6s ease-in-out infinite; }
.glam .t0 { left: 0; top: 4px; }
.glam .t1 { right: 2px; top: 0; animation-delay: 0.5s; }
.glam .t2 { right: 8px; bottom: 6px; animation-delay: 1s; }
.need { display: block; line-height: 0; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c9b8e8; }
.need.done { opacity: 0.4; }

/* ---------- Your pizzeria: a shop front behind the queue ---------- */
.shopfront { position: relative; isolation: isolate; }
.shopfront > .scene, .shopfront.mini .scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.shopfront > .queue { position: relative; z-index: 1; padding: 27px 6px 3px; min-height: 172px; }
.shopfront > .queue .empty-slot { min-height: 128px; border-color: rgba(91, 58, 155, 0.22); color: var(--muted); background: rgba(255, 255, 255, 0.35); }
.shopfront.free > .scene { display: none; }
.shopfront.free > .queue { padding: 0; min-height: 0; }
.scene-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(rgba(255, 255, 255, 0.4) 0 2px, transparent 2px) 0 30px / 100% 26px, var(--wall);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.75), var(--panel-shadow);
}
.scene-awning { position: absolute; left: 0; right: 0; top: 0; height: 28px; background-repeat: repeat-x; background-size: auto 28px; background-position: center top; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.1)); }
.scene-sign {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 2;
  max-width: 66%;
  padding: 2px 12px 3px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: var(--shop);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 3px 0 var(--shop-dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  --tx: -50%;
}
.scene-counter { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(#e7b07a, #c98a4e); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.1); }
.scene-wall.cloth .scene-counter { background: repeating-conic-gradient(#ef3c3c 0 25%, #fff 0 50%) 0 0 / 14px 14px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.12); }
.deco { position: absolute; line-height: 0; }
.deco svg { display: block; }
.deco.fresh { animation: deco-pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
.scene-awning.fresh, .scene-sign.fresh { animation: deco-pop-flat 0.6s ease; }
.deco-slingers { left: 0; right: 0; top: 24px; height: 18px; background-repeat: repeat-x; background-position: center top; }
.deco-lamp { top: 23px; margin-left: -15px; }
.deco-lamp.l1 { left: 25%; }
.deco-lamp.l2 { left: 75%; }
.deco-lamp .glow { animation: lamp 2.4s ease-in-out infinite alternate; }
.deco-klok { left: 4%; top: 40px; }
.deco-schilderij { right: 4%; top: 38px; }
.deco-neon { left: 50%; top: 48px; transform: translateX(-50%); padding: 2px 8px; border-radius: 9px; background: #2b2140; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); line-height: 1; }
.deco-neon span, .pic-neon span { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.12em; color: #fff0f8; text-shadow: 0 0 3px #ff4fa3, 0 0 8px #ff4fa3, 0 0 14px #ff4fa3; animation: neon 5s linear infinite; }
.deco-menubord { left: calc(66.6% - 23px); bottom: 2px; }
.deco-plantje { left: 2px; bottom: 14px; }
.deco-plant { right: 0; bottom: 2px; }
.deco-kat { left: calc(33.3% - 26px); bottom: 13px; }
.deco-kat .tail { transform-origin: 34px 35px; animation: tail 2.6s ease-in-out infinite; }
.deco-bel { left: 40px; bottom: 15px; }
.deco-bel svg { width: 28px; height: auto; }
.deco-menubord svg { width: 42px; height: auto; }

/* the shop sheet's own picture of the pizzeria, without customers */
.shopfront.mini { height: 150px; flex: none; border-radius: 22px; }
.shopfront.mini .deco-menubord { left: auto; right: 64px; }


/* Counter: bin, pizza board, oven */
.counter, .serve, .tray, .shopfront { -webkit-user-select: none; user-select: none; }
.counter { position: relative; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px 8px; padding: 12px 10px 10px; }
.counter > .side-col { grid-column: 1; grid-row: 1; }
.counter > .peel, .counter > .pick { grid-column: 2; grid-row: 1; }
.counter > .oven-col { grid-column: 3; grid-row: 1; }
.counter > .step { grid-column: 1 / -1; grid-row: 2; }
.side-btn {
  position: relative;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 var(--cream-dark);
  font: inherit;
  font-size: 1.8rem;
  cursor: pointer;
  overflow: hidden;
}
.side-btn i[data-art] { width: 32px; height: 32px; }
.side-btn span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.side-col { display: flex; flex-direction: column; gap: 10px; }
.side-btn.undo { height: 58px; }
.side-btn.undo i[data-art] { width: 24px; height: 24px; }
.side-btn.attention { box-shadow: 0 0 0 3px #ef3c3c, 0 4px 0 var(--cream-dark); animation: shake 0.5s ease 2; }
.side-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream-dark); }
.side-btn:disabled { cursor: default; filter: grayscale(0.85); color: #b9aec8; }
.side-btn:disabled span { color: #a99cbb; }
.oven { background: linear-gradient(180deg, #ffe0c2, #ffd0a6); }
.oven.on { background: linear-gradient(180deg, #ffb27a, #ff8a3d); animation: glow 0.6s ease-in-out infinite alternate; }
.oven.on span { color: #5a2400; font-weight: 700; }
.oven.ready { background: linear-gradient(180deg, #ffe58a, #ffc61a); box-shadow: 0 0 0 4px #fff3b0, 0 4px 0 #e0a800; animation: ready 0.45s ease-in-out infinite alternate; }
.oven-col { display: flex; flex-direction: column; gap: 10px; }
.oven-col .oven[hidden] { display: none; }
.oven-pz, .oven-bar { display: none; }
/* two ovens: smaller buttons, each with a window on the pizza inside and its own bar */
.oven-col.two .oven { height: 74px; gap: 1px; padding: 4px 3px 5px; }
.oven-col.two .oven:not([data-state="empty"]) i[data-art] { display: none; }
.oven-col.two .oven:not([data-state="empty"]) .oven-pz { display: block; width: 36px; height: 36px; line-height: 0; border-radius: 50%; box-shadow: 0 0 0 3px #3a2a40; background: #3a2a40; }
.oven-pz svg { width: 100%; height: 100%; }
.oven-col.two .oven-bar { display: block; position: relative; width: 86%; height: 12px; border-radius: 999px; background: #f0e0c8; overflow: hidden; box-shadow: inset 0 1px 2px rgba(120, 80, 40, 0.3); }
.oven-bar i { position: absolute; top: 0; bottom: 0; }
.oven-bar .z { background: rgba(255, 214, 51, 0.9); box-shadow: inset 1px 0 0 #e0a800, inset -1px 0 0 #e0a800; }
.oven-bar .f { left: 0; width: 0; background: linear-gradient(90deg, #f3d9a8, #ff9b3d 60%, #b34d12); opacity: 0.9; }
.oven-col.two .oven span.oven-label { font-size: 0.78rem; }
.oven.waiting { background: linear-gradient(180deg, #fff6d8, #ffe08a); box-shadow: 0 0 0 3px #4fc01c, 0 4px 0 var(--cream-dark); animation: ready 0.7s ease-in-out infinite alternate; }
.oven.burnt .oven-pz { filter: brightness(0.5) sepia(0.5); }

/* the instruction under the board, with a meter for the sauce, the cheese and the oven */
.step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 1.6em; }
.step-text { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--ink); text-align: center; }
.meter { position: relative; width: min(300px, 94%); height: 16px; border-radius: 999px; background: #f0e0c8; box-shadow: inset 0 2px 3px rgba(120, 80, 40, 0.25); overflow: hidden; }
.meter.off { visibility: hidden; }
.meter-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; }
.meter-row .meter { flex: 0 1 300px; }
.meter.full .fill { background: #4fc01c; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.meter.full::after { content: ''; position: absolute; right: 6px; top: 50%; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: translateY(-62%) rotate(45deg); }
.btn.step-next { flex: none; min-height: 44px; padding: 6px 16px; font-size: 1rem; animation: pop-in 0.25s ease; }
.btn.step-next[hidden] { display: none; }
.btn.step-next i { display: inline-grid; vertical-align: middle; }
.meter .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--c, #ff8a3d); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.meter .zone { display: none; position: absolute; top: 0; bottom: 0; z-index: 1; background: repeating-linear-gradient(135deg, rgba(255, 214, 51, 0.75) 0 6px, rgba(255, 236, 140, 0.75) 6px 12px); box-shadow: inset 2px 0 0 #e0a800, inset -2px 0 0 #e0a800; }
.meter[data-mode="oven"] .zone { display: block; }
.meter[data-mode="oven"] .fill { background: linear-gradient(90deg, #f3d9a8, #ff9b3d 60%, #b34d12); border-radius: 999px 0 0 999px; }
.meter[data-mode="oven"] .fill::after { content: ""; position: absolute; right: -2px; top: -2px; bottom: -2px; width: 5px; border-radius: 3px; background: #5b3a9b; box-shadow: 0 0 0 1.5px #fff; z-index: 2; }
.meter.gold { box-shadow: inset 0 2px 3px rgba(120, 80, 40, 0.25), 0 0 0 3px #ffc61a; }
/* Krokante Kees: the bar shows the black end to wait for instead of the golden zone */
.meter.black .zone, .os-bar.black .z, .oven-bar.black .z { background: repeating-linear-gradient(135deg, #3a2a40 0 5px, #6b6478 5px 10px); box-shadow: inset 2px 0 0 #241a28; }

/* choosing the size and the sauce */
.pick { z-index: 3; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pick[hidden] { display: none; }
.pick-btn {
  flex: 0 1 46%;
  max-width: 124px;
  aspect-ratio: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5px 0 var(--cream-dark), 0 10px 18px -10px rgba(90, 50, 150, 0.5);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  animation: pop-in 0.25s ease;
}
.pick-btn svg { width: 70%; height: auto; max-width: 72px; }
.pick-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cream-dark); }
.pick-btn:focus-visible { outline: 4px solid var(--pink); outline-offset: 2px; }

.peel {
  position: relative;
  transition: box-shadow 0.15s ease;
  aspect-ratio: 1;
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f0c48a, #d9a066 60%, #b97d44);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12), 0 5px 0 #9c6a33;
  cursor: pointer;
  user-select: none;
}
.peel-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%; margin: 0; padding: 0 22%; text-align: center; font-weight: 600; color: #6b4422; }
.peel-hint[hidden] { display: none; }
.peel-deco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the rolling pin waits on the empty board and rolls away once the dough is there */
.peel-pin { transition: opacity 0.3s ease; }
.peel:not([data-step="none"]) .peel-pin { opacity: 0; }
/* "Tik hier!": a finger that taps the board, with a ring where it touches */
.tap-hand { position: relative; display: block; width: 34%; aspect-ratio: 1; line-height: 0; animation: tap-hand 1.4s ease-in-out infinite; transform-origin: 34% 95%; }
.tap-hand svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(90, 50, 20, 0.2)); }
.tap-hand::after { content: ""; position: absolute; left: 34%; bottom: -2%; width: 46%; aspect-ratio: 1; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 50%; transform: translate(-50%, 50%) scale(0); opacity: 0; animation: tap-ring 1.4s ease-out infinite; }
.tap-text { font-size: 0.95rem; line-height: 1.1; }
@keyframes tap-hand { 0%, 100% { transform: translateY(-14%); } 40% { transform: translateY(-14%); } 55% { transform: translateY(0) scale(0.94, 0.9); } 70% { transform: translateY(-6%); } }
@keyframes tap-ring { 0%, 52% { opacity: 0; transform: translate(-50%, 50%) scale(0.2); } 58% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 50%) scale(1.3, 0.6); } }
/* a puff of flour when the dough is put on the board */
.flour-puff { position: absolute; inset: 10%; z-index: 4; pointer-events: none; }
.flour-puff i { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 244, 0.95), rgba(255, 252, 244, 0) 70%); animation: flour 0.8s ease-out forwards; }
@keyframes flour { from { opacity: 1; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.6); } }
.pizza-slot { position: absolute; inset: 7%; }
.peel.drop-ok { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12), 0 0 0 6px #4fc01c, 0 5px 0 #9c6a33; }
.peel.drop-off { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12), 0 0 0 6px rgba(239, 60, 60, 0.6), 0 5px 0 #9c6a33; }
/* smearing, rubbing and cutting: the finger paints instead of scrolling the page */
.peel.paint { touch-action: none; cursor: crosshair; -webkit-touch-callout: none; }

.pizza {
  position: absolute;
  inset: 0;
  container-type: size;
  border-radius: 50%;
  /* the dough: the rim browns with the oven, pale → golden → brown → black (--d1…--d3 from game.js) */
  background:
    radial-gradient(circle at 40% 34%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
    radial-gradient(closest-side, var(--d1, #f3d9a8) 80%, var(--d2, #ecca92) 90%, var(--d3, #dcae74) 99%);
  box-shadow: inset 0 0 0 1.5cqw rgba(90, 45, 15, 0.18), 0 4px 10px rgba(80, 40, 10, 0.25);
  animation: plop 0.3s ease;
  transition: inset 0.25s ease;
}
.pizza.small { inset: 11%; }
.pizza .layer { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.pizza .guide, .pizza .cuts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pizza .guide { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; filter: drop-shadow(0 0 1px rgba(90, 50, 20, 0.5)); }
.pizza .cuts { z-index: 2; fill: none; stroke-linecap: round; }
.pizza .cut-dark { stroke: rgba(90, 45, 15, 0.6); stroke-width: 1.6; }
.pizza .cut-light { stroke: rgba(255, 245, 220, 0.8); stroke-width: 0.5; transform: translate(0.6px, 0.6px); }
.pizza .cut-preview { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 2.5 2.5; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); }
.pizza.baked .cheese-layer { filter: saturate(1.15); }
.pizza .melt-bubs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* the cheese bubbles: each one swells and settles, in the oven and fresh out of it */
.melt-bubs .mb, .os-cheesebub { transform-box: fill-box; transform-origin: center; animation: cheese-bub 1.6s ease-in-out infinite alternate; }
@keyframes cheese-bub { from { transform: scale(0.65); } to { transform: scale(1.15); } }
.pizza.baked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 30%, rgba(150, 80, 20, 0.35) 0 4%, transparent 5%),
    radial-gradient(circle at 70% 25%, rgba(150, 80, 20, 0.3) 0 3%, transparent 4%),
    radial-gradient(circle at 60% 78%, rgba(150, 80, 20, 0.3) 0 4%, transparent 5%),
    radial-gradient(circle at 18% 64%, rgba(150, 80, 20, 0.3) 0 3%, transparent 4%);
}
.pizza.baking { animation: wobble 0.5s ease-in-out infinite alternate; }
.pizza.burnt { filter: brightness(0.5) saturate(0.6) sepia(0.4) contrast(1.15); }
.pizza.burnt::after {
  background:
    radial-gradient(circle at 30% 35%, rgba(40, 20, 8, 0.45) 0 6%, transparent 7%),
    radial-gradient(circle at 68% 30%, rgba(40, 20, 8, 0.4) 0 5%, transparent 6%),
    radial-gradient(circle at 60% 72%, rgba(40, 20, 8, 0.45) 0 7%, transparent 8%),
    radial-gradient(circle at 24% 66%, rgba(40, 20, 8, 0.4) 0 4%, transparent 5%),
    radial-gradient(circle, transparent 0 58%, rgba(40, 20, 8, 0.55) 70%);
}
.topping {
  position: absolute;
  width: 17cqw;
  height: 17cqw;
  transform: translate(-50%, -50%) rotate(var(--r));
  z-index: 1;
  filter: drop-shadow(0 1.2cqw 0 rgba(0, 0, 0, 0.2));
  animation: drop-in 0.25s ease;
  pointer-events: none;
}
.pizza.editable .topping { pointer-events: auto; cursor: grab; touch-action: none; }
/* a finger-sized grab area, even when the pizza is small */
.pizza.editable .topping::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.topping.lifted { opacity: 0.25; }
.ghost { position: fixed; left: -32px; top: -36px; z-index: 100; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.25)); }
.ghost svg { display: block; width: 100%; height: 100%; transform: rotate(-8deg) scale(1.05); }
.steam { position: absolute; z-index: 3; left: 50%; top: -14%; display: flex; gap: 7cqw; transform: translateX(-50%); pointer-events: none; }
/* curls of steam rising from a fresh pizza (the same curl as over the start screen pizza) */
.steam i {
  width: 7cqw; height: 22cqw; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 60'%3E%3Cpath d='M10 58C2 48 18 40 10 30S4 12 12 2' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 1px rgba(120, 80, 40, 0.35));
  animation: hero-steam 2.2s ease-out infinite;
}
.steam i:nth-child(2) { animation-delay: -0.75s; margin-top: -4cqw; animation-name: hero-steam-flip; }
.steam i:nth-child(3) { animation-delay: -1.5s; }
.steam.smoke { top: 2%; align-items: flex-end; }
.steam.smoke i { width: 11cqw; height: 11cqw; margin-top: 0; border-radius: 50%; background: rgba(80, 70, 76, 0.75); filter: blur(1px); opacity: 1; animation: steam 1.2s ease-out infinite; }

.serve { font-size: 1.3rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* the main button and the tray, together at the bottom of the screen on phones */
.dock { display: flex; flex-direction: column; gap: 12px; }
.serve i, #pay-help i, .start-best i { display: inline-flex; line-height: 0; }
.serve:disabled { cursor: default; background: #d6cde2; color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 0 #b4a7c6; text-shadow: none; }

/* Ingredient tray */
.tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.ing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px 4px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 var(--cream-dark);
  font: inherit;
  color: var(--ink);
  cursor: grab;
  min-width: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ing.nudge { animation: shake 0.4s ease; }
.ing:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream-dark); }
.ing.wanted { box-shadow: 0 0 0 3px #4fc01c, 0 4px 0 var(--cream-dark); }
.ing.later { opacity: 0.55; filter: saturate(0.6); }
.ing.nope { box-shadow: 0 0 0 3px #ef3c3c, 0 4px 0 var(--cream-dark); }
.ing.nope::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 1;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4L16 16M16 4L4 16' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M4 4L16 16M16 4L4 16' stroke='%23ef3c3c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.ing .ico { width: 38px; height: 38px; }
.ing .name { max-width: 100%; font-size: 0.75rem; font-weight: 600; line-height: 1.1; text-align: center; hyphens: manual; overflow-wrap: anywhere; }
.ing .count { right: 4px; top: 4px; font-size: 0.875rem; }

/* the coins a review brings, the critic's newspaper review, news about special customers */
.review-coins { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; padding: 2px 6px 2px 8px; border-radius: 999px; background: #fff3c4; color: #8a5a00; font-weight: 700; font-size: 0.95rem; }
.review-coins svg { display: block; }
.review.good.vip { box-shadow: inset 0 0 0 3px #ffc61a, 0 4px 0 var(--cream-dark); }
.review.good.press { background: #fbf8f1; box-shadow: inset 0 0 0 3px #3a1f4a, 0 4px 0 var(--cream-dark); max-width: min(94vw, 400px); }
.press-head { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #3a1f4a; border-bottom: 2px solid #3a1f4a; padding-bottom: 1px; align-self: flex-start; }
.review.press .review-text { font-weight: 700; font-size: 1rem; }
.toast.special { white-space: normal; width: max-content; max-width: min(92vw, 360px); text-align: center; line-height: 1.3; border-radius: 20px; }
.toast.special.vip { box-shadow: inset 0 0 0 3px #ffc61a, 0 4px 0 var(--cream-dark); color: #a66a00; font-size: 1.1rem; }
.toast.special.critic, .toast.special.press { box-shadow: inset 0 0 0 3px #3a1f4a, 0 4px 0 var(--cream-dark); color: #3a1f4a; }
.toast.special.group { box-shadow: inset 0 0 0 3px var(--pink), 0 4px 0 var(--cream-dark); }
.toast.special.regular { box-shadow: inset 0 0 0 3px #2d8dff, 0 4px 0 var(--cream-dark); color: #2b6cb0; }
.toast.recipe { white-space: normal; width: max-content; max-width: min(92vw, 360px); text-align: center; border-radius: 20px; box-shadow: inset 0 0 0 3px var(--pink), 0 4px 0 var(--cream-dark); }

/* Toasts */
.toasts { position: absolute; left: 50%; bottom: 8px; z-index: 30; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; pointer-events: none; }
/* a second message waits its turn above the first one, a size smaller */
.toasts > .small { scale: 0.86; transform-origin: 50% 100%; }
.review.walkin { box-shadow: inset 0 0 0 3px #2d8dff, 0 4px 0 var(--cream-dark); }
/* while the wood-fired oven is open its hint sits at the top, so kitchen notes go just below the board */
.counter:has(#oven-stage:not([hidden])) .toasts { top: calc(100% + 4px); bottom: auto; flex-direction: column; justify-content: flex-start; }
.counter:has(#oven-stage:not([hidden])) .toasts > .small { transform-origin: 50% 0; }
.toast, .review { padding: 7px 16px; border-radius: 999px; background: rgba(255, 248, 236, 0.97); box-shadow: 0 4px 0 var(--cream-dark); font-weight: 600; white-space: nowrap; animation: toast var(--ms, 2.4s) ease forwards; }
.review { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 20px; white-space: normal; width: max-content; max-width: min(92vw, 380px); text-align: left; }
.review.good { box-shadow: inset 0 0 0 3px #4fc01c, 0 4px 0 var(--cream-dark); }
.review.bad { box-shadow: inset 0 0 0 3px #ef3c3c, 0 4px 0 var(--cream-dark); }
.review-face { flex: none; line-height: 0; }
.review-body { display: flex; flex-direction: column; gap: 2px; }
.review-stars { display: flex; gap: 1px; line-height: 0; }
.review-text { font-size: 0.92rem; line-height: 1.25; color: var(--ink); }
.toast.plus { color: #2c8a0e; }
.toast.minus { color: #c4232a; }
.toast.topkok, .toast.gold { box-shadow: inset 0 0 0 3px #ffc61a, 0 4px 0 var(--cream-dark); }
.toast.gold { color: #b36b00; font-size: 1.15rem; }
.toast.intro { white-space: normal; width: max-content; max-width: min(92vw, 360px); padding: 8px 18px; border-radius: 20px; text-align: center; line-height: 1.3; box-shadow: inset 0 0 0 3px var(--purple), 0 4px 0 var(--cream-dark); }
.photo-toast { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 6px; white-space: normal; width: max-content; max-width: min(92vw, 360px); }
.photo-thumb { flex: none; line-height: 0; }
.flash { position: absolute; inset: -4%; z-index: 6; border-radius: 50%; background: #fff; pointer-events: none; animation: flash 0.6s ease-out forwards; }

/* Modals: payment, notes */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 14px; background: rgba(110, 63, 196, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet { width: min(440px, 100%); max-height: calc(100dvh - 28px); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; text-align: center; animation: pop-in 0.3s ease; }
.pay-head { display: flex; align-items: center; gap: 12px; text-align: left; }
.pay-face { line-height: 0; flex: 0 0 auto; }
.pay-say { margin: 0; flex: 1; padding: 8px 12px; border-radius: 16px; background: #fff; font-weight: 600; }
.pay-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-sum > div { display: flex; flex-direction: column; padding: 8px; border-radius: 14px; background: var(--cream-2); }
.pay-sum b { font-size: 1.5rem; }
.pay-sum .hint { grid-column: 1 / -1; font-weight: 700; font-size: 1.15rem; background: #fff3c4; }
.pay-sum .due { grid-column: 1 / -1; align-items: center; background: #fff3c4; box-shadow: inset 0 0 0 3px #ffd23a; }
.pay-sum .due b { font-size: 1.9rem; color: var(--ink); }
.pay-sum .label, .sheet > .label { margin: 0; }
.sheet > .label b { color: var(--ink); font-size: 1.1rem; }
.change { min-height: 62px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 8px; border-radius: 16px; background: var(--cream-2); box-shadow: inset 0 2px 4px rgba(120, 80, 40, 0.18); }
.change:empty::before { content: "Tik op munten en briefjes"; color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.coins { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.money-btn { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.money-btn:active { transform: scale(0.92); }
.coin {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.05rem;
  color: #6b4a00;
  background: radial-gradient(circle at 35% 30%, #fff3a6, #f5c518 55%, #c99a00);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45), 0 3px 0 #a37b00;
}
/* €2: a silver centre in a gold ring, both centred */
.coin.two {
  color: #4a4a55;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.7), transparent 32%),
    radial-gradient(circle closest-side, #f2f2f6 0, #c9c9d3 58%, #a8a8b4 61%, #ffe27a 64%, #f5c518 82%, #c99a00 100%);
}
.note {
  width: 74px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4), 0 3px 0 rgba(0, 0, 0, 0.2);
}
.note.n5 { background: linear-gradient(135deg, #9aa6b2, #6c7a89); }
.note.n10 { background: linear-gradient(135deg, #ef6b6b, #c1373a); }
.note.n20 { background: linear-gradient(135deg, #5aa0e6, #2b6cb0); }
.note.n50 { background: linear-gradient(135deg, #ffb35c, #e07a14); }
.change .coin { width: 40px; height: 40px; font-size: 0.85rem; }
.change .note { width: 58px; height: 34px; font-size: 0.85rem; }
.pay-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pay-actions .btn { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; font-size: 1.05rem; }
#pay-help { flex: 0 0 auto; }
.note-icon { display: flex; justify-content: center; line-height: 0; }
.note-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
.note-text { color: var(--muted); font-weight: 500; line-height: 1.45; }
.note-text table { width: 100%; border-collapse: collapse; color: var(--ink); }
.note-text td { padding: 3px 4px; text-align: left; }
.note-stars { display: flex; justify-content: center; gap: 4px; margin-top: 10px; line-height: 0; }
.note-text td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.note-text tr.coin-row td { color: #8a5a00; }
.note-text tr.coin-row svg { vertical-align: -4px; }
.note-shop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.note-shop > svg { flex: none; }
.coin-n { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.coin-n svg { display: block; flex: none; }
.note-shop .coin-n { margin-left: 2px; padding: 1px 7px 1px 3px; border-radius: 999px; background: #fff3c4; color: #8a5a00; font-size: 0.95rem; }
.note-scene { position: relative; width: 100%; height: 112px; margin: -2px 0 2px; }
.note-scene .scene { position: absolute; inset: 0; }
.note-scene .note-chef { position: absolute; left: 50%; bottom: 4px; z-index: 1; transform: translateX(-50%); line-height: 0; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.12)); }
.note-badge { margin: 0 0 6px; padding: 6px 12px; border-radius: 14px; background: #fff3c4; color: var(--ink); font-weight: 700; }

/* Start screen */
.start {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--theme-sky, #bfe2ff) var(--theme-bg, url("../../assets/candy-bg.svg")) center bottom / cover no-repeat;
}
/* the calm start screen (the same for every game): title and record, one panel with how to play, one big
   Spelen!, a row of small tiles, and the chips of assets/arcade.js at the bottom */
.start-card { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* the hero: the pizza turns slowly, with a curl of steam rising from it */
.start-hero { position: relative; flex: none; width: var(--hero, 124px); height: var(--hero, 124px); margin: 14px 0 8px; }
.start-pizza { width: 100%; height: 100%; animation: spin 24s linear infinite; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.15)); }
.hero-steam {
  position: absolute; bottom: 62%; width: 14%; height: 44%; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 60'%3E%3Cpath d='M10 58C2 48 18 40 10 30S4 12 12 2' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(120, 80, 40, 0.25));
  animation: hero-steam 3.2s ease-out infinite;
}
.hero-steam.s1 { left: 30%; animation-delay: -0.4s; }
.hero-steam.s2 { left: 45%; height: 52%; animation-delay: -1.5s; }
.hero-steam.s3 { left: 60%; animation-delay: -2.6s; transform: scaleX(-1); }
@keyframes hero-steam {
  0% { opacity: 0; transform: translateY(20%) scale(0.7); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-45%) scale(1.1); }
}
.hero-steam.s3 { animation-name: hero-steam-flip; }
@keyframes hero-steam-flip {
  0% { opacity: 0; transform: translateY(20%) scale(-0.7, 0.7); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-45%) scale(-1.1, 1.1); }
}
/* tablets and computers: the start screen is mostly the pizzeria, the hero may be big */
@media (min-width: 700px) and (min-height: 760px) { .start-hero { --hero: 156px; } }
@media (min-width: 700px) and (min-height: 1000px) { .start-hero { --hero: 230px; margin-bottom: 14px; } }
.start-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.start-card h1 { margin: 0; font-size: clamp(2.6rem, 12vw, 3.8rem); line-height: 1.05; white-space: nowrap; }
.start-best { margin: 0; padding: 5px 18px; border-radius: 999px; font-size: 1.2rem; font-weight: 700; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px; }
.start-best .sep { color: var(--muted); }
.start-opt { width: min(300px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 20px; font-weight: 600; color: var(--ink); }
.choice { display: flex; gap: 6px; }
.choice button { min-width: 54px; height: 44px; padding: 0 12px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; color: var(--ink); background: #fff; box-shadow: 0 3px 0 var(--cream-dark); cursor: pointer; }
.choice button.on { color: #fff; background: var(--purple); box-shadow: 0 3px 0 var(--purple-dark); }
/* how to play: Tegen de klok, Rustig aan or Samen, each with a picture */
.start-opt.start-modes { width: 100%; padding: 7px; }
.choice.seg { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.choice.seg button { height: auto; min-height: 66px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px 7px; font-size: 0.95rem; line-height: 1.1; }
.choice.seg button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cream-dark); }
.choice.seg button.on:active { box-shadow: 0 1px 0 var(--purple-dark); }
.seg-icon { display: flex; align-items: center; justify-content: center; height: 30px; line-height: 0; }
.seg-icon svg { display: block; width: 30px; height: 30px; }
.choice.seg button.on .seg-icon { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff); }
.samen-faces svg { display: block; width: 26px; height: auto; }
.samen-faces svg + svg { margin-left: -6px; }
.start-actions { width: min(320px, 100%); display: flex; flex-direction: column; gap: 14px; }
.start-actions .btn { width: 100%; text-align: center; }
.btn.start-play { font-size: 1.6rem; padding-top: 14px; padding-bottom: 14px; }
.btn.resume-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 9px; padding-bottom: 10px; }
.btn.resume-btn[hidden] { display: none; }
.resume-btn small { font-size: 0.9rem; font-weight: 600; text-shadow: none; opacity: 0.92; }
/* the small tiles: Vrij bakken, Album, Winkeltje, Recepten */
.start-tiles { width: 100%; display: flex; justify-content: center; gap: 10px; }
.start-tile { position: relative; flex: 1 1 0; min-width: 64px; max-width: 98px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px 7px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cream-dark); font: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1.1; color: var(--ink); cursor: pointer; }
.start-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream-dark); }
.start-tile:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.start-tile-icon { line-height: 0; }
.start-tile-icon svg { display: block; width: 32px; height: 32px; }
.start-tile .album-count { right: -5px; top: -7px; }
/* the settings behind the gear (in the sheet of assets/arcade.js) */
.settings-body { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.settings-body .start-opt { width: 100%; background: #fff; box-shadow: 0 3px 0 var(--cream-2); }
.btn--green { background: linear-gradient(180deg, #7fe05a, #3fb427); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 0 #2b8a17, 0 14px 22px -10px rgba(43, 138, 23, 0.7); }
.btn--green:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 #2b8a17; }
.album-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.album-btn i[data-art], .album-btn > svg { display: inline-flex; flex: none; width: 26px; height: 26px; line-height: 0; }
.album-btn i[data-art] svg { width: 100%; height: 100%; }
.album-count { position: absolute; right: -6px; top: -8px; min-width: 24px; padding: 1px 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 0.85rem; line-height: 1.5; text-shadow: none; box-shadow: 0 0 0 2px #fff; }
.album-count[hidden] { display: none; }
/* short phones in portrait: a smaller pizza, so everything fits without scrolling */
@media (orientation: portrait) and (max-height: 720px) {
  .start { padding-top: 12px; padding-bottom: 12px; }
  .start-card { gap: 9px; }
  .start-hero { --hero: 84px; margin-top: 8px; margin-bottom: 4px; }
  .start-card h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}
/* the smallest phones: no spinning pizza, a little tighter */
@media (orientation: portrait) and (max-height: 600px) {
  .start-card .start-hero { display: none; }
  .choice.seg button { min-height: 58px; }
  .start-tile { min-height: 64px; }
}
/* a tablet or a computer: the chips fit in one row under the card */
@media (min-width: 700px) and (min-height: 501px) {
  #start .start-card > .start-utils { width: min(calc(100vw - 32px), 780px); }
}
/* a phone on its side: two columns (assets/style.css, .start-two-col), the pizza left of the title */
@media (orientation: landscape) and (max-height: 500px) {
  .start { padding: max(8px, env(safe-area-inset-top)) 16px max(8px, env(safe-area-inset-bottom)); }
  :is(#start, body) .start-card.start-two-col { --start-rows: 4; gap: 8px 22px; }
  :is(#start, body) .start-two-col > .start-head, :is(#start, body) .start-two-col > .start-best { justify-self: center; }
  .start-card .start-head { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; justify-items: center; }
  .start-card .start-hero { --hero: 84px; grid-row: 1 / span 2; margin: 10px 0 0; }
  .start-card h1 { font-size: 2.4rem; }
  .start-best { font-size: 1.05rem; padding: 3px 14px; }
  .choice.seg button { min-height: 58px; }
  .start-tile { min-height: 62px; }
}
/* the shortest phones on their side (375px and less): smaller pictures and title */
@media (orientation: landscape) and (max-height: 400px) {
  .start { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  :is(#start, body) .start-card.start-two-col { row-gap: 6px; }
  .start-card h1 { font-size: 2rem; }
  .start-card .start-hero { --hero: 66px; margin-top: 8px; }
  .start-card .start-sign { padding-top: 20px; min-width: 160px; }
  .start-card .start-sign::before { height: 22px; background-size: auto 22px; }
  .start-card .start-sign span { margin-top: -13px; padding: 2px 14px 3px; font-size: 1rem; }
  .start-best { font-size: 0.98rem; padding: 2px 12px; }
  .choice.seg button { min-height: 50px; gap: 1px; padding: 4px 3px 5px; font-size: 0.88rem; }
  .seg-icon, .seg-icon svg { height: 24px; }
  .seg-icon svg { width: 24px; }
  .samen-faces svg { width: 22px; }
  .start-tile { min-height: 54px; gap: 1px; font-size: 0.82rem; }
  .start-tile-icon svg { width: 26px; height: 26px; }
}

/* Free baking: a banner instead of the queue */
.queue.free { min-height: 0; }
.free-banner { grid-column: 1 / -1; align-self: center; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.free-chef { flex: none; line-height: 0; }
.free-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-weight: 500; font-size: 0.92rem; line-height: 1.3; }
.free-text b { color: var(--ink); font-size: 1.15rem; }
.free-banner .album-btn { flex: none; padding: 10px 14px; font-size: 1rem; }
.status-title { font-size: 1.25rem; line-height: 26px; color: var(--ink); }

/* The photo album */
.modal.album { z-index: 60; }
.album-sheet { width: min(560px, 100%); text-align: left; }
.album-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.album-head .note-title { margin: 0; }
.album-head .btn { min-height: 46px; padding: 10px 22px; font-size: 1.05rem; }
.album-sub { margin: 0 0 4px; color: var(--muted); font-weight: 500; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.album-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 8px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cream-dark); font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.album-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream-dark); }
.album-pic { width: 100%; max-width: 110px; line-height: 0; }
.album-pic svg { width: 100%; height: auto; }
.album-tile-name { max-width: 100%; font-size: 0.82rem; font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.album-detail { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.album-detail[hidden], .album-list[hidden], #album-actions[hidden], #album-confirm[hidden] { display: none; }
.album-big { width: min(260px, 72vw); line-height: 0; animation: pop-in 0.3s ease; }
.album-big svg { width: 100%; height: auto; }
.album-name { width: min(320px, 100%); display: flex; flex-direction: column; gap: 4px; }
.album-name input { width: 100%; padding: 10px 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px var(--cream-dark); font: inherit; font-size: 1.15rem; font-weight: 700; color: var(--ink); text-align: center; }
.album-name input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--pink); }
.album-date { margin: 0; color: var(--muted); font-size: 0.9rem; }
#album-confirm { align-items: center; }
.album-ask { width: 100%; margin: 0; font-weight: 700; color: var(--ink); text-align: center; }
/* The shop */
.modal.shop { z-index: 55; }
.shop-sheet { position: relative; width: min(560px, 100%); padding: 14px 0 0; gap: 0; overflow: hidden; text-align: left; }
.shop-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
.shop-head .note-title { flex: 1; min-width: 0; }
.shop-head .btn { min-height: 46px; padding: 10px 20px; font-size: 1.05rem; }
.coin-pill { display: inline-flex; padding: 3px 10px 3px 4px; border-radius: 999px; background: #fff3c4; box-shadow: inset 0 0 0 2px #ffe08a; color: #8a5a00; font-size: 1.2rem; font-weight: 700; }
.shop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 16px; }
.shop-me { display: flex; flex-direction: column; gap: 8px; }
.shop-name { display: flex; flex-direction: column; gap: 4px; }
.shop-name input { width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px var(--cream-dark); font: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.shop-name input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--pink); }
.shop-name input::placeholder { color: #b3a3cc; }
.shop-colours { display: grid; grid-template-columns: repeat(8, 44px); justify-content: space-between; gap: 4px; }
.swatch { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.swatch::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15), 0 0 0 3px #fff, 0 2px 0 3px var(--cream-dark); }
.swatch[aria-checked="true"]::before { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15), 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
.swatch:focus-visible { outline: 3px solid var(--pink); outline-offset: -2px; }
.tabs { position: sticky; top: -4px; z-index: 3; display: flex; gap: 6px; padding: 6px; margin: 0 -4px; border-radius: 18px; background: var(--cream-2); box-shadow: 0 6px 10px -8px rgba(90, 50, 150, 0.4); }
.tabs button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 4px; border: 0; border-radius: 13px; background: transparent; font: inherit; font-weight: 700; font-size: 1rem; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--cream-dark); }
.tabs button:focus-visible { outline: 3px solid var(--pink); outline-offset: 1px; }
.shop-list { display: flex; flex-direction: column; gap: 8px; }
.shop-list[data-tab="versiering"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.shop-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cream-dark); }
.shop-item .shop-pic { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--cream-2); line-height: 0; }
.shop-item .shop-pic svg { max-width: 48px; max-height: 50px; width: auto; height: auto; }
.shop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.shop-text b { color: var(--ink); font-size: 1.05rem; }
.shop-text span { color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.owned-tag { flex: none; padding: 6px 10px; border-radius: 12px; background: #e3f7d8; color: #2c8a0e; font-weight: 700; font-size: 0.9rem; }
.buy, .place {
  flex: none;
  min-width: 80px;
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe58a, #ffc61a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 #d99a00;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: #6b4a00;
  cursor: pointer;
}
.buy:active, .place:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 0 #d99a00; }
.buy small { font-size: 0.72rem; font-weight: 600; line-height: 1; }
.buy.short { background: #efe7f6; color: #8f80a8; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 #d6cde2; }
.buy.short svg { filter: grayscale(0.7); opacity: 0.7; }
.buy.ask { background: linear-gradient(180deg, #7fe05a, #3fb427); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #2b8a17; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); animation: ask 0.6s ease-in-out infinite alternate; }
.buy:focus-visible, .place:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.place { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--cream-dark), 0 4px 0 var(--cream-dark); font-size: 0.95rem; }
.place[aria-pressed="false"] { background: linear-gradient(180deg, #a872ee, var(--purple)); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 4px 0 var(--purple-dark); }
.place:disabled { cursor: default; background: #e3f7d8; color: #2c8a0e; box-shadow: none; transform: none; }
.shop-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cream-dark); text-align: center; }
.shop-tile.placed { box-shadow: 0 0 0 3px #4fc01c, 0 4px 0 var(--cream-dark); }
.shop-tile b { font-size: 0.95rem; line-height: 1.15; color: var(--ink); }
.shop-tile .shop-pic { height: 70px; width: 100%; display: grid; place-items: center; line-height: 0; border-radius: 14px; background: var(--cream-2); }
.shop-tile .shop-pic svg { max-height: 62px; max-width: 70px; width: auto; height: auto; }
.shop-tile .buy, .shop-tile .place { width: 100%; }
.pic-awning { display: block; width: 90px; height: 28px; background-repeat: repeat-x; background-size: auto 28px; border-radius: 6px 6px 0 0; }
.pic-garland { display: block; width: 92px; height: 18px; background-repeat: repeat-x; }
.pic-cloth { display: block; width: 80px; height: 40px; border-radius: 8px; background: repeating-conic-gradient(#ef3c3c 0 25%, #fff 0 50%) 0 0 / 14px 14px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); }
.pic-neon { display: block; padding: 5px 9px; border-radius: 9px; background: #2b2140; line-height: 1; }
.shop-item.reg .shop-pic { background: #e8f1ff; }
.shop-item.reg.unknown { opacity: 0.6; }
.shop-item.reg.unknown .shop-pic svg { filter: grayscale(1) brightness(1.1); }
.reg-fav { flex: none; display: flex; gap: 2px; max-width: 40%; flex-wrap: wrap; justify-content: flex-end; }
.reg-fav span { position: relative; display: block; width: 26px; height: 26px; }
.reg-fav span svg { width: 100%; height: 100%; }
.reg-fav small { color: var(--muted); font-size: 0.8rem; text-align: right; }
.shop-intro { margin: 0; color: var(--muted); font-weight: 500; line-height: 1.35; }
.shop-book { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding-left: 20px; padding-right: 20px; }
.book-btn i[data-art] { display: inline-flex; width: 26px; height: 26px; line-height: 0; }
.book-btn i[data-art] svg { width: 100%; height: 100%; }
.shop-msg { position: absolute; left: 50%; bottom: 14px; z-index: 5; margin: 0; width: max-content; max-width: calc(100% - 28px); padding: 8px 16px; border-radius: 18px; background: rgba(255, 248, 236, 0.98); box-shadow: 0 4px 0 var(--cream-dark), 0 10px 24px -10px rgba(60, 30, 110, 0.5); font-weight: 700; text-align: center; line-height: 1.3; color: var(--ink); transform: translate(-50%, 20px); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.shop-msg.show { opacity: 1; transform: translate(-50%, 0); }
.shop-msg.plus { color: #2c8a0e; box-shadow: inset 0 0 0 3px #4fc01c, 0 4px 0 var(--cream-dark); }
.shop-msg.minus { color: #c4232a; }

/* The recipe book */
.modal.book { z-index: 65; }
.book-sheet { width: min(560px, 100%); text-align: left; background: #fffaf0; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.book-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border: 0; border-radius: 6px 18px 18px 6px; background: #fff; box-shadow: inset 4px 0 0 #f0dcc0, 0 4px 0 var(--cream-dark); font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.book-tile:active { transform: translateY(3px); box-shadow: inset 4px 0 0 #f0dcc0, 0 1px 0 var(--cream-dark); }
.book-pic-s { width: 100%; max-width: 92px; line-height: 0; }
.book-pic-s svg, .book-pic svg { width: 100%; height: auto; }
.book-tile:not(.made) .book-pic-s svg, .book-page:not(.made) .book-pic svg { filter: grayscale(1) contrast(0.45) brightness(1.18); opacity: 0.6; }
.book-pic-s { position: relative; }
.mystery { position: absolute; left: 50%; top: 50%; z-index: 2; width: 1.8em; height: 1.8em; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--cream-dark); color: var(--muted); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.book-pic .mystery { font-size: 2.2rem; }
.book-tile:not(.made) .book-tile-name { color: var(--muted); }
.book-tile-name { font-weight: 700; font-size: 0.92rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.book-tile-ings { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 3px; }
.book-ing { position: relative; display: block; line-height: 0; }
.book-ing .count { font-size: 0.6rem; right: -0.6em; top: -0.4em; }
.book-ing.sauce { display: grid; place-items: center; width: 18px; height: 18px; }
.book-ing .sauce-dot { width: 13px; height: 13px; }
.stamp { position: absolute; z-index: 2; right: 8%; top: 12%; padding: 4px 10px; border: 3px solid #e63946; border-radius: 10px; color: #e63946; font-weight: 700; font-size: 1.2rem; letter-spacing: 0.03em; text-transform: uppercase; transform: rotate(-14deg); background: rgba(255, 255, 255, 0.72); line-height: 1.1; animation: stamp 0.35s ease-out; }
.stamp.small { right: 2px; top: 6px; padding: 1px 5px; border-width: 2px; border-radius: 7px; font-size: 0.68rem; }
.book-page { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.book-page.flip { animation: flip 0.35s ease-out; }
.book-page[hidden], .book-list[hidden] { display: none; }
.book-pic { position: relative; width: min(220px, 64vw); line-height: 0; }
.book-name { margin: 0; font-size: 1.6rem; color: var(--ink); text-align: center; }
.book-ings { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.book-ing-row { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--cream-dark); font-weight: 600; color: var(--ink); }
.book-ing-row svg { display: block; }
.book-ing-row .sauce-dot { margin: 8px; }
.book-status { margin: 0; color: var(--muted); font-weight: 600; text-align: center; }
.book-page.made .book-status { color: #2c8a0e; }
.book-nav { display: flex; gap: 8px; width: 100%; justify-content: center; }
.book-nav .btn { padding-left: 16px; padding-right: 16px; font-size: 1.05rem; }
#book-back { flex: 1 1 auto; max-width: 260px; }
.book-count { opacity: 0.8; font-size: 0.9em; margin-left: 4px; }

/* the name of your pizzeria on the start screen, on a little shop front */
.start-sign { position: relative; margin-top: -4px; padding: 26px 0 0; min-width: 190px; max-width: 100%; }
.start-sign::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: var(--awning) center top / auto 28px repeat-x; border-radius: 10px 10px 0 0; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.12)); }
.start-sign span { position: relative; display: block; margin: -16px 14px 0; padding: 4px 16px 5px; border-radius: 12px; background: var(--shop, var(--pink)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 4px 0 rgba(0, 0, 0, 0.18); color: #fff; font-weight: 700; font-size: 1.15rem; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-badge { display: inline-flex; align-items: center; gap: 2px; padding-left: 3px; background: #ffc61a; color: #6b4a00; }
.coin-badge svg { display: block; }

.help { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 0.96rem; line-height: 1.5; text-align: left; }
.help ul { margin: 0; padding: 12px 16px 12px 32px; width: 100%; }
.help strong { color: var(--ink); }

/* ---------- The wood-fired oven: it takes the stage over the board while a pizza bakes ---------- */
.oven-stage { position: relative; z-index: 4; grid-column: 1 / 3; grid-row: 1 / 3; align-self: stretch; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: linear-gradient(180deg, #fff1dc 0 62%, #f3d7b0 62% 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.75); animation: pop-in 0.25s ease; }
.oven-stage[hidden] { display: none; }
.oven-stage.leaving { pointer-events: none; }
.counter.oven-on .step { visibility: hidden; }
.os-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px 0; }
.os-hint { flex: 1; min-width: 0; margin: 0; color: var(--ink); font-weight: 700; font-size: 1.02rem; line-height: 1.15; text-align: center; }
.os-btn { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--cream-dark); font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--ink); cursor: pointer; }
.os-btn[hidden] { display: none; }
.os-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cream-dark); }
.os-btn:focus-visible, .os-box:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.os-area { position: relative; flex: 1; min-height: 0; container-type: size; }
.os-box { position: absolute; left: 50%; bottom: 0; width: min(100cqw, 113.6cqh); aspect-ratio: 100 / 88; transform: translateX(-50%); touch-action: none; -webkit-user-select: none; user-select: none; border-radius: 8px; }
.os-oven { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.os-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 0.45s ease-in-out infinite alternate; }
.os-flame.f1 { animation-duration: 0.33s; animation-delay: -0.2s; }
.os-eye { animation: lamp 1.2s ease-in-out infinite alternate; }
.os-pz { position: absolute; z-index: 2; aspect-ratio: 1; touch-action: none; cursor: grab; }
.os-pz.in { cursor: ns-resize; }
.os-pz.glide { transition: left 0.35s ease, top 0.35s ease, width 0.35s ease; }
.os-pizza { position: relative; z-index: 1; display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(60, 20, 0, 0.35)); transition: filter 0.3s ease; }
.os-pz.gold .os-pizza { filter: drop-shadow(0 0 5px rgba(255, 214, 51, 0.95)) drop-shadow(0 2px 2px rgba(60, 20, 0, 0.35)); }
/* the wooden peel under the pizza, with its handle towards you */
.os-peel { position: absolute; left: -9%; top: -9%; width: 118%; height: 118%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0c48a, #d9a066 60%, #b97d44); box-shadow: 0 3px 0 #9c6a33; opacity: 0; transition: opacity 0.2s ease; }
.os-peel::after { content: ""; position: absolute; left: 50%; top: 94%; width: 16%; height: 60%; margin-left: -8%; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #c98a45, #b97d44); box-shadow: 0 3px 0 #9c6a33; }
.os-pz.out .os-peel, .os-pz.exit .os-peel, .os-pz.lifted .os-peel { opacity: 1; }
.os-pz.out .os-pizza { animation: nudge-up 1.1s ease-in-out infinite; }
/* steam while it bakes, dark smoke when it is (nearly) burnt */
.os-steam { position: absolute; z-index: 2; left: 22%; right: 22%; top: -26%; display: flex; justify-content: space-between; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.os-steam i { width: 14%; aspect-ratio: 0.45; border-radius: 999px; background: rgba(255, 255, 255, 0.85); animation: puff 1.3s ease-out infinite; }
.os-steam i:nth-child(2) { animation-delay: 0.45s; }
.os-steam i:nth-child(3) { animation-delay: 0.9s; }
.os-pz.steamy .os-steam, .os-pz.smoky .os-steam { opacity: 1; }
.os-pz.smoky .os-steam i { aspect-ratio: 1; width: 22%; border-radius: 50%; background: rgba(70, 58, 66, 0.8); filter: blur(1px); }
/* cheese bubbles: tap them */
.os-bubs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.os-bub { position: absolute; width: 22%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 34% 30%, #fff 0 16%, color-mix(in srgb, var(--cheese, #ffe08a) 60%, #fff) 30%, var(--cheese, #ffe08a) 62%, #f0b43a 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 2px 3px rgba(120, 60, 0, 0.35); pointer-events: auto; cursor: pointer; animation: bubble-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), bubble-wobble 0.8s ease-in-out 0.35s infinite alternate; }
.os-bub::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); border-radius: 50%; }
.os-plus { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 1px; transform: translate(-50%, -50%); color: #8a5a00; font-weight: 700; font-size: 0.95rem; text-shadow: 0 1px 0 #fff, 0 0 3px #fff; pointer-events: none; animation: plus-up 0.7s ease-out forwards; }
.os-plus svg { display: block; }
/* "Draai!": swipe sideways to turn it */
.os-turn { position: absolute; z-index: 4; left: 50%; bottom: -12%; display: none; padding: 1px 10px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap; box-shadow: 0 2px 0 var(--pink-dark); transform: translateX(-50%); pointer-events: none; }
.os-pz.can-turn .os-turn { display: block; animation: swing 0.9s ease-in-out infinite alternate; }
.os-pizza { transition: transform 0.08s linear; }
.os-pz.turning::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%); animation: fade-out 0.7s ease-out forwards; pointer-events: none; }
/* a small heat bar with the golden zone under every mouth */
.os-bar { position: absolute; z-index: 2; top: 80.5%; height: max(12px, 5%); overflow: hidden; border-radius: 999px; background: #f0e0c8; box-shadow: inset 0 1px 2px rgba(120, 80, 40, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.6); }
.os-bar[hidden] { display: none; }
.os-bar i { position: absolute; top: 0; bottom: 0; }
.os-bar .z { background: rgba(255, 214, 51, 0.95); box-shadow: inset 1px 0 0 #e0a800, inset -1px 0 0 #e0a800; }
.os-bar .f { left: 0; width: 0; background: linear-gradient(90deg, #f3d9a8, #ff9b3d 60%, #b34d12); opacity: 0.9; }
.os-bar .f::after { content: ""; position: absolute; right: -2px; top: -1px; bottom: -1px; width: 4px; border-radius: 2px; background: #5b3a9b; }
.os-bar.gold { box-shadow: inset 0 1px 2px rgba(120, 80, 40, 0.35), 0 0 0 2px #ffc61a; }
@keyframes flicker-calm { from { transform: scale(1, 0.96); } to { transform: scale(0.98, 1.03); } }
@keyframes flicker { from { transform: scale(1, 0.8); } to { transform: scale(0.9, 1.15); } }
@keyframes nudge-up { 0%, 100% { transform: none; } 50% { transform: translateY(-5%); } }
@keyframes puff { from { transform: translateY(0) scale(0.7); opacity: 0.9; } to { transform: translateY(-60%) scale(1.3); opacity: 0; } }
@keyframes bubble-in { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes bubble-wobble { from { transform: translate(-50%, -50%) scale(0.92, 1.06); } to { transform: translate(-50%, -50%) scale(1.08, 0.94); } }
@keyframes plus-up { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -160%); } }
@keyframes swing { from { transform: translateX(-50%) rotate(-6deg); } to { transform: translateX(-50%) rotate(6deg); } }
@keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Pizza's bezorgen: the scooter ride between days ---------- */
.ride {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  /* the ride is outside: the landscape of the arcade, not the pizzeria (world.js) */
  background: var(--pz-street-sky, var(--theme-sky, #bfe2ff)) var(--pz-street-bg, var(--theme-bg, url("../../assets/candy-bg.svg"))) center bottom / cover no-repeat;
  -webkit-user-select: none;
  user-select: none;
}
.ride[hidden] { display: none; }
.ride-top { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 720px; margin: 0 auto; }
.ride-tickets { flex: 1; min-width: 0; display: flex; gap: 6px; }
.ride-ticket { position: relative; flex: 1 1 0; min-width: 0; max-width: 112px; height: 46px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px var(--door), 0 4px 0 var(--cream-dark); }
.ride-ticket > svg { flex: none; }
.ride-ticket b { font-size: 1.45rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ride-ticket.done { background: #e3f7d8; box-shadow: inset 0 0 0 3px #4fc01c, 0 4px 0 var(--cream-dark); }
.ride-ticket.done > svg, .ride-ticket.done b { opacity: 0.4; }
.ride-check { position: absolute; right: -5px; top: -12px; line-height: 0; animation: pop-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15)); }
.ride-coins { flex: none; padding: 4px 10px 4px 4px; font-size: 1.15rem; }
.ride-skip { flex: none; padding: 10px 14px; font-size: 1rem; }
.ride-stage { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 720px; margin: 0 auto; overflow: hidden; border-radius: 22px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.8), var(--panel-shadow); touch-action: none; outline: none; cursor: pointer; }
.ride-stage canvas { display: block; width: 100%; height: 100%; border-radius: 22px; }
.ride-bar { position: absolute; left: 14px; right: 14px; top: 10px; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); }
.ride-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd23a, #ff8a1c); }
.ride-msg { position: absolute; left: 50%; top: 28px; z-index: 2; width: max-content; max-width: calc(100% - 28px); margin: 0; padding: 7px 16px; border-radius: 18px; background: rgba(255, 248, 236, 0.97); box-shadow: 0 4px 0 var(--cream-dark); color: var(--ink); font-weight: 700; line-height: 1.3; text-align: center; opacity: 0; transform: translate(-50%, -6px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.ride-msg.show { opacity: 1; transform: translate(-50%, 0); }
.ride-msg.plus { color: #2c8a0e; box-shadow: inset 0 0 0 3px #4fc01c, 0 4px 0 var(--cream-dark); }
.ride-msg.minus { color: #c4232a; }
.ride-arrow { position: absolute; bottom: 12px; z-index: 2; width: 62px; height: 62px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 0 rgba(60, 30, 110, 0.25); color: var(--ink); font: inherit; font-size: 1.9rem; cursor: pointer; touch-action: none; }
.ride-arrow.left { left: 10px; }
.ride-arrow.right { right: 10px; }
.ride-arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(60, 30, 110, 0.25); }
.ride-arrow:focus-visible { outline: 4px solid var(--pink); outline-offset: 2px; }
.ride-ready { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(340px, calc(100% - 28px)); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 18px 18px; transform: translate(-50%, -50%); text-align: center; pointer-events: none; animation: pop-in 0.3s ease; }
.ride-ready[hidden] { display: none; }
.ride-ready h2 { margin: 0; font-size: 1.5rem; color: var(--ink); }
.ride-ready p { margin: 0; color: var(--muted); font-weight: 600; line-height: 1.35; }
.ride-swipe { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.6rem; animation: swipe 1s ease-in-out infinite alternate; }
.ride-swipe i[data-art] { display: block; width: 46px; height: 46px; line-height: 0; }
.ride-swipe i[data-art] svg { width: 100%; height: 100%; }
.ride-go { display: none; font-size: 1.7rem; color: var(--pink-dark); }
.ride-ready.go .ride-go { display: block; animation: pop-in 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ride-ready.go .ride-swipe { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .ride { gap: 5px; padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  .ride-ticket { height: 38px; }
  .ride-ticket b { font-size: 1.2rem; }
  .ride-skip { padding: 7px 12px; }
  .ride-ready { padding: 10px 14px; gap: 4px; }
  .ride-ready h2 { font-size: 1.2rem; }
  .ride-arrow { width: 54px; height: 54px; }
}
@media (max-width: 360px) {
  .ride-top { gap: 5px; }
  .ride-tickets { gap: 4px; }
  .ride-ticket { padding: 0 3px; gap: 1px; }
  .ride-ticket > svg { width: 22px; height: 22px; }
  .ride-ticket b { font-size: 1.2rem; }
  .ride-skip { padding: 9px 10px; font-size: 0.9rem; }
  .ride-coins { font-size: 1rem; }
}

/* the result card of a ride */
.ride-result { display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding-top: 4px; }
.ride-result-scooter { line-height: 0; margin-right: 8px; animation: ride-in 0.6s ease-out; }
.ride-result-face { line-height: 0; animation: pop-in 0.35s ease backwards; }
.ride-result-face:nth-child(3) { animation-delay: 0.1s; }
.ride-result-face:nth-child(4) { animation-delay: 0.2s; }
.ride-boxes { display: flex; justify-content: center; gap: 10px; margin: 0 0 8px; }
.ride-boxes span { line-height: 0; opacity: 0.35; filter: grayscale(1); }
.ride-boxes span.on { opacity: 1; filter: none; animation: pop-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
.ride-boxes span.on:nth-child(2) { animation-delay: 0.12s; }
.ride-boxes span.on:nth-child(3) { animation-delay: 0.24s; }
.ride-note { margin: 8px 0 0; padding: 6px 12px; border-radius: 14px; background: #e8f1ff; color: #2b6cb0; font-weight: 600; }
.pic-turbo { position: relative; line-height: 0; }
.pic-turbo::before { content: ""; position: absolute; left: -4px; top: 38%; width: 10px; height: 14px; background: repeating-linear-gradient(#2d8dff 0 2.4px, transparent 2.4px 6px); border-radius: 2px; }
/* the scooter parked in front of the pizzeria, between the first two customers; Poes Pepper likes to sit on it */
.deco-scooter-deur { left: calc(33.3% - 30px); bottom: 1px; }
.deco-scooter-deur svg { width: 60px; height: auto; }
.scene-wall.scooter .deco-kat { left: calc(33.3% - 34px); bottom: 21px; }
.scene-wall.scooter .deco-kat svg { width: 44px; height: auto; }

/* ---------- Samen spelen ---------- */
.btn--orange { background: linear-gradient(180deg, #ffb347, #ff8a1c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 0 #c9650a, 0 14px 22px -10px rgba(201, 101, 10, 0.7); }
.btn--orange:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 #c9650a; }

/* the setup sheet: a name and a colour per player */
.modal.team { z-index: 55; }
.team-sheet { width: min(640px, 100%); }
.team-sub { margin: 0; color: var(--muted); font-weight: 500; line-height: 1.4; }
.team-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; text-align: left; }
.team-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 3px var(--pc), 0 4px 0 var(--cream-dark); }
.team-who { display: flex; align-items: center; gap: 10px; }
.team-face { flex: none; line-height: 0; }
.team-role { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.team-role small { color: var(--muted); font-weight: 600; font-size: 0.82rem; }
.team-role b { color: var(--ink); font-size: 1.15rem; }
.team-role span { color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.team-name { display: flex; flex-direction: column; gap: 4px; }
.team-name input { width: 100%; padding: 9px 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px var(--cream-dark); font: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.team-name input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--pc); }
.team-name input::placeholder { color: #b3a3cc; }
.team-colours { display: grid; grid-template-columns: repeat(4, 44px); justify-content: space-between; gap: 2px 4px; }
.team-tempo { width: 100%; flex-wrap: wrap; }
.team-tempo .choice { flex-wrap: wrap; }

/* alone the two halves are invisible; together each player has a half in their own colour */
.half { display: contents; }
.role-tag[hidden], .tickets[hidden] { display: none !important; }
.toasts-ober { display: none; }
.app.coop { max-width: 1240px; }
.app.coop .half { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 8px; border-radius: 28px; background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 4px var(--pc, #fff); }
.app.coop .toasts-ober { display: flex; }
.app.coop .toasts-ober { top: auto; bottom: 10px; }
.app.coop .dock { position: static; gap: inherit; }
/* the name tag sits on the border of the half, like a label */
.app.coop .half { margin-top: 8px; padding-top: 18px; }
.role-tag { position: absolute; left: 18px; top: -13px; z-index: 6; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 36px); padding: 1px 14px 1px 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 3px var(--pc), 0 3px 0 var(--cream-dark); color: var(--ink); pointer-events: none; }
.tag-face { flex: none; line-height: 0; }
.tag-face svg { display: block; width: 26px; height: auto; }
.tag-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.6; white-space: nowrap; }
.tag-text b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.tag-text small { color: var(--muted); font-size: 0.78rem; font-weight: 600; }

/* the bakker's board of bonnetjes */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; min-height: 96px; align-items: stretch; }
.tickets-empty { grid-column: 1 / -1; align-self: center; margin: 0; color: var(--muted); font-weight: 600; font-size: 0.92rem; line-height: 1.35; text-align: center; }
.ticket { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 5px 5px 6px; border: 0; border-radius: 14px; background: #fffdf6 repeating-linear-gradient(transparent 0 15px, rgba(91, 58, 155, 0.06) 15px 16px); box-shadow: 0 3px 0 var(--cream-dark); font: inherit; color: var(--ink); cursor: pointer; }
.ticket.on { box-shadow: 0 0 0 3px var(--pink), 0 3px 0 var(--cream-dark); }
.ticket:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ticket-face { line-height: 0; }
.ticket-face svg { display: block; width: 26px; height: auto; }
.ticket .bubble { padding: 1px; background: transparent; box-shadow: none; }
.ticket .bubble::after { display: none; }
.ticket .order { font-size: 1.5rem; }
.ticket .order.many { font-size: 1.15rem; }
.ticket .patience { width: 100%; height: 6px; }
.ticket.racked::after { content: "op de balie"; position: absolute; left: 50%; top: -9px; z-index: 2; padding: 0 7px; border-radius: 999px; background: #e3f7d8; box-shadow: 0 0 0 2px #fff; color: #2c8a0e; font-size: 0.7rem; font-weight: 700; line-height: 1.5; white-space: nowrap; transform: translateX(-50%); }
/* together the player's name tag sits over the first bonnetje's top left: the label goes to the right */
.app.coop .ticket.racked::after { left: auto; right: 10px; transform: none; }
.ticket .price { margin: 0 auto 0 6px; font-size: 0.9rem; }
.ticket .patience { margin-top: auto; }
.tno { display: inline-block; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.95rem; font-weight: 700; line-height: 26px; text-align: center; font-variant-numeric: tabular-nums; }

/* the ober's customers: tap to take the order, then they get a number */
.app.coop .customer { cursor: pointer; border-radius: 18px; }
.app.coop .customer:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.customer .bubble .tno { position: absolute; left: -7px; top: -11px; z-index: 2; min-width: 24px; height: 24px; line-height: 24px; font-size: 0.85rem; box-shadow: 0 0 0 2px #fff; }
.customer.untaken .bubble { background: #fff7d6; box-shadow: 0 0 0 3px #ffc61a, 0 3px 0 var(--cream-dark); animation: ask 0.7s ease-in-out infinite alternate; }
.customer.untaken .bubble::after { border-top-color: #fff7d6; }
.take { display: flex; flex-direction: column; align-items: center; gap: 1px; color: #a66a00; font-weight: 700; font-size: 0.85rem; line-height: 1.1; }
.take svg { display: block; width: 34px; height: 34px; }
.customer.wants .bubble { box-shadow: 0 0 0 3px #4fc01c, 0 3px 0 var(--cream-dark); }
.customer.drop-ok .bubble { box-shadow: 0 0 0 5px #4fc01c, 0 3px 0 var(--cream-dark); transform: scale(1.05); }

.steam.rack-steam { top: -12%; gap: 14cqw; }

/* together, the payment is a panel over the ober's half */
/* it covers the half, and may grow over the bakker's bonnetjes when the half is small (a phone in portrait) */
#pay.inline { position: absolute; left: 0; right: 0; top: 0; bottom: auto; min-height: 100%; z-index: 35; padding: 8px; border-radius: 28px; }
#pay.inline .sheet { max-height: none; overflow: visible; gap: 7px; padding: 12px; }
#pay.inline .pay-face svg { width: 44px; height: auto; }
#pay.inline .pay-sum b { font-size: 1.25rem; }
#pay.inline .pay-sum > div { padding: 5px 8px; }
#pay.inline .change { min-height: 50px; padding: 5px; }
#pay.inline .coins { gap: 8px; }
#pay.inline .pay-actions .btn { padding-top: 9px; padding-bottom: 9px; }

/* ---------- Samen spelen: the ober's notepad, over the ober's half (the bakker plays on) ---------- */
/* the customer and their order at the top with Wissen and Klaar!, every ingredient of the theme below */
.notepad { display: none; }
.app.coop .notepad:not([hidden]) {
  position: absolute; inset: 0; z-index: 32;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "who bubble clear done" "grid grid grid grid";
  gap: 4px 5px; padding: 8px 7px 6px; border-radius: 28px; container-type: inline-size;
  background: #fffdf6 repeating-linear-gradient(transparent 0 23px, rgba(91, 58, 155, 0.07) 23px 24px);
  box-shadow: inset 0 0 0 3px var(--pc, var(--purple)), 0 10px 24px -12px rgba(60, 30, 110, 0.6);
  animation: pop-in 0.2s ease;
}
/* the rings of the notepad, on its top edge (the ober's name tag makes room) */
.app.coop .notepad:not([hidden])::before { content: ""; position: absolute; left: 18%; right: 18%; top: -7px; height: 14px; pointer-events: none;
  background: radial-gradient(circle, #fffdf6 0 2.6px, #8a7aa8 3px 5px, transparent 5.5px) center / 22px 14px space; }
.half-ober.noting > .role-tag { visibility: hidden; }
.np-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.np-who { grid-area: who; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px; }
.np-face { line-height: 0; }
.np-face svg { display: block; width: 34px; height: auto; }
.np-later { min-width: 56px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--cream-dark); font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.np-later:active, .np-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cream-dark); }
/* the customer's bubble, as in the queue, pointing at the face */
.np-bubble { grid-area: bubble; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 5px 5px 6px; box-shadow: 0 0 0 2px #f0e2c8, 0 3px 0 var(--cream-dark); }
.np-bubble::after { left: -7px; top: 13px; bottom: auto; margin: 0; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
.np-bubble .who { margin: 0 0 2px; }
.np-bubble .order { font-size: 1.25rem; }
.np-bubble .order.many { font-size: 1.02rem; }
.np-bubble .hh, .np-bubble .fo { width: 58px; height: 58px; }
.np-bubble .hh { padding: 7px 5px; }
.np-bubble .hh span, .np-bubble .fo span[data-role="eye"] { width: 16px; height: 16px; }
.np-bubble .fo span[data-role="mouth"] { width: 13px; height: 13px; }
.np-bubble .req { margin-top: 2px; }
.np-bubble .price { margin-top: 1px; font-size: 0.85rem; }
.np-bubble .patience { width: 100%; height: 7px; margin-top: 4px; background: var(--cream-2); }
/* Wissen and the big Klaar! */
.np-btn { min-width: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 8px; border: 0; border-radius: 16px; font: inherit; font-weight: 700; font-size: 0.92rem; line-height: 1.1; cursor: pointer; }
.np-btn svg { display: block; width: 28px; height: 28px; }
.np-clear { grid-area: clear; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--cream-dark); }
.np-clear:disabled { opacity: 0.5; cursor: default; }
.np-done { grid-area: done; min-width: 74px; font-size: 1.1rem; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); background: linear-gradient(180deg, #7fe05a, #3fb427); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #2b8a17; }
.np-done svg { width: 32px; height: 32px; }
.np-done:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 #2b8a17; }
.np-later:focus-visible, .np-btn:focus-visible, .np-add:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
/* the ingredients: a tap is one more, the − one less */
.np-grid { grid-area: grid; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(56px, 92px); align-content: center; gap: 3px 4px; padding: 0 0 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.np-tile { position: relative; min-width: 0; }
.np-add { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 2px 3px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--cream-dark); font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.np-add:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cream-dark); }
.np-ico { flex: none; width: 30px; height: 30px; line-height: 0; pointer-events: none; }
.np-ico svg { display: block; width: 100%; height: 100%; }
.np-name { max-width: 100%; font-size: 0.7rem; font-weight: 700; line-height: 1.05; text-align: center; overflow-wrap: break-word; pointer-events: none; }
.np-tile.on .np-add { padding-top: 9px; background: #fff3c4; box-shadow: inset 0 0 0 3px var(--purple), 0 3px 0 var(--cream-dark); }
.np-n { position: absolute; right: 2px; top: 2px; min-width: 22px; height: 18px; padding: 0 3px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 0.72rem; line-height: 18px; text-align: center; pointer-events: none; }
.np-tile:not(.on) .np-n { display: none; }
.np-minus { position: absolute; left: 2px; top: 2px; width: 23px; height: 23px; display: grid; place-items: center; padding: 0 0 2px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--purple); color: var(--purple); font: inherit; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; }
/* a little bigger than it looks, out towards the corner (the middle of the tile stays "one more") */
.np-minus::before { content: ""; position: absolute; inset: -6px 0 0 -6px; }
.np-tile:not(.on) .np-minus { display: none; }
/* after Klaar!: what is missing glows until it is tapped, what is too much gets a red cross for a moment */
.np-tile.np-wiggle { animation: np-wiggle 0.45s ease; }
@keyframes np-wiggle { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.np-tile.np-low .np-add { background: #eaffdc; box-shadow: inset 0 0 0 3px #4fc01c, 0 0 12px 2px rgba(79, 192, 28, 0.55), 0 3px 0 var(--cream-dark); }
.np-tile.np-high .np-add::after { content: ""; position: absolute; inset: 6px; z-index: 1; opacity: 0.9; animation: pop-in 0.2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4L16 16M16 4L4 16' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M4 4L16 16M16 4L4 16' stroke='%23ef3c3c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.np-tile.np-high .np-add { box-shadow: inset 0 0 0 3px #ef3c3c, 0 3px 0 var(--cream-dark); }
/* what the customer says: over their own order (the bubble's place in the grid), so Wissen and Klaar! stay free */
.np-say { position: absolute; grid-area: bubble; left: 0; right: 0; top: 50%; z-index: 3; transform: translateY(-50%); margin: 0; padding: 7px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 3px var(--purple), 0 6px 14px -6px rgba(60, 30, 110, 0.5); color: var(--ink); font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-align: center; pointer-events: none; }
.np-say[hidden] { display: none; }
.np-say.bad { box-shadow: 0 0 0 3px #ffb703, 0 6px 14px -6px rgba(60, 30, 110, 0.5); }
.np-say.good { box-shadow: 0 0 0 3px #4fc01c, 0 6px 14px -6px rgba(60, 30, 110, 0.5); }
/* "Precies!" */
.np-stamp { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; border-radius: 28px; background: rgba(255, 253, 246, 0.55); pointer-events: none; }
.np-stamp[hidden] { display: none; }
.np-stamp b { padding: 6px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 4px #4fc01c, 0 6px 16px -6px rgba(43, 138, 23, 0.6); color: #2c8a0e; font-size: 2rem; letter-spacing: 0.02em; transform: rotate(-8deg); animation: np-stamp 0.3s ease; }
@keyframes np-stamp { from { transform: rotate(-8deg) scale(1.8); opacity: 0; } to { transform: rotate(-8deg); opacity: 1; } }
/* roomy: bigger tiles and buttons; a tablet in portrait has all ten in one row */
@container (min-width: 430px) {
  .np-btn { min-width: 84px; font-size: 1rem; }
  .np-done { min-width: 116px; font-size: 1.3rem; }
  .np-ico { width: 38px; height: 38px; }
  .np-name { font-size: 0.82rem; }
  .np-minus { left: 4px; top: 4px; width: 30px; height: 30px; font-size: 1.3rem; }
  .np-n { right: 4px; top: 4px; min-width: 28px; height: 22px; font-size: 0.85rem; line-height: 22px; }
  .np-tile.on .np-add { padding-top: 5px; }
  .np-face svg { width: 44px; }
  .np-bubble .order { font-size: 1.6rem; }
  .np-bubble .order.many { font-size: 1.3rem; }
  .np-bubble .hh, .np-bubble .fo { width: 70px; height: 70px; }
  .np-bubble .hh span, .np-bubble .fo span[data-role="eye"] { width: 20px; height: 20px; }
  .np-bubble .fo span[data-role="mouth"] { width: 16px; height: 16px; }
  .np-say { font-size: 1.05rem; }
}
@container (min-width: 640px) {
  .np-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .np-bubble .order { font-size: 2rem; }
  .np-bubble .order.many { font-size: 1.6rem; }
}
/* the smallest phones: the notepad takes a little of the margin beside the half, so five tiles fit in a row */
@media (max-width: 360px) {
  .app.coop .notepad:not([hidden]) { left: -8px; right: -8px; bottom: -3px; padding-left: 6px; padding-right: 6px; }
  .np-btn { min-width: 56px; padding: 4px 5px; font-size: 0.85rem; }
  .np-done { min-width: 64px; font-size: 1rem; }
  .np-say { padding: 6px 8px; font-size: 0.86rem; }
}
.notes-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.notes-badge svg { flex: none; }
/* the team photo in the album: the bakker and the ober with the best pizza of their day */
.team-photo { position: relative; display: block; width: 100%; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #fff3c4 0 45%, #ffe1ef 46% 100%); }
.team-photo-pizza { position: absolute; left: 19%; top: 24%; width: 62%; line-height: 0; }
.team-photo-face { position: absolute; bottom: 2%; width: 42%; line-height: 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15)); }
.team-photo-face.l { left: -2%; }
.team-photo-face.r { right: -2%; }
.team-photo svg, .album-pic .team-photo svg, .album-big .team-photo svg { display: block; width: 100%; height: auto; }

/* the setup sheet: who writes the orders down */
.team-opt-text { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.team-opt-text small { color: var(--muted); font-size: 0.8rem; font-weight: 500; }

/* the day card praises both players */
.note-scene .note-chef { display: flex; align-items: flex-end; }
.note-chef svg + svg { margin-left: -4px; }
.team-badge b { font-weight: 700; }
.team-stars { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 700; }

/* side by side on a tablet or a computer in landscape: the bakker left, the ober right (in portrait, even on the
   biggest tablet, the halves stay above each other: each player sits at their own end) */
@media (orientation: landscape) and (min-width: 700px) {
  .app.coop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top top" "baker ober"; align-items: start; column-gap: 14px; }
  .app.coop > .topbar { grid-area: top; }
  .app.coop > .half-baker { grid-area: baker; }
  .app.coop > .half-ober { grid-area: ober; }
  /* news for the ober shows under the counter, where there is room */
  .app.coop .toasts-ober { top: calc(100% + 10px); bottom: auto; flex-direction: column; }
  /* the dining room takes the whole height next to the kitchen */
  .app.coop > .half-ober { align-self: stretch; }
  .app.coop .toasts-ober { top: auto; bottom: 8px; }
  .app.coop .dining:not([hidden]) { flex: 1; }
}
/* above each other (tablet or phone in portrait): everything a bit more compact, so both halves fit */
@media (orientation: portrait) {
  .app.coop { gap: 6px; padding-top: 8px; padding-bottom: 10px; }
  .app.coop .half { gap: 6px; padding: 16px 6px 6px; }
  .app.coop .shopfront > .queue { min-height: 0; padding-top: 27px; }
  .app.coop .shopfront > .queue .empty-slot { min-height: 96px; }
  .app.coop .face { width: 44px; }
  .app.coop .customer.vip .face { width: 54px; }
  .app.coop .tickets { min-height: 78px; padding: 6px; }
  .app.coop .counter { padding: 8px 10px; gap: 4px 8px; }
  .app.coop .peel { max-width: 210px; }
  .app.coop .side-btn { height: 62px; }
  .app.coop .side-btn.undo { height: 50px; }
  .app.coop .serve { padding-top: 8px; padding-bottom: 8px; }
  .app.coop .tray { gap: 6px; padding: 6px; }
  .app.coop .ing { padding: 4px 2px 3px; }
  .app.coop .ing .ico { width: 28px; height: 28px; }
  .app.coop .step-text { font-size: 0.95rem; }
}
@media (orientation: portrait) and (min-height: 1000px) {
  .app.coop .peel { max-width: 270px; }
}
@media (orientation: portrait) and (max-height: 900px) {
  .app.coop .shopfront > .queue { padding-top: 21px; }
  .app.coop .peel { max-width: 160px; }
  .app.coop .side-btn { height: 54px; }
  .app.coop .side-btn.undo { height: 46px; }
  .app.coop .counter { grid-template-columns: 54px 1fr 54px; }
  .app.coop .tickets { min-height: 70px; }
  .app.coop .ticket .order { font-size: 1.25rem; }
  .app.coop .bubble { padding: 4px 4px 5px; }
  .app.coop .shopfront > .queue .empty-slot { min-height: 80px; }
  .app.coop .face { width: 38px; }
}
@media (orientation: landscape) and (max-height: 800px) {
  .app.coop { gap: 8px; padding-top: 8px; }
  .app.coop .peel { max-width: 210px; }
  .app.coop .counter { padding: 8px 10px; }
  .app.coop .tray { gap: 6px; padding: 8px; }
  .app.coop .ing .ico { width: 30px; height: 30px; }
  .app.coop .serve { padding-top: 9px; padding-bottom: 9px; }
}
@media (max-width: 400px) {
  .tickets { gap: 6px; padding: 6px; }
  .team-colours { column-gap: 10px; justify-content: start; }
}

@keyframes swipe { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes ride-in { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }

@keyframes ask { to { filter: brightness(1.1); } }
@keyframes stamp { from { transform: rotate(-14deg) scale(1.8); opacity: 0; } to { transform: rotate(-14deg); opacity: 1; } }
@keyframes flip { from { transform: perspective(600px) rotateY(-24deg); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes coin-bump { 40% { transform: scale(1.25); } }
@keyframes twinkle { 0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes deco-pop { 0% { transform: translateY(-14px) scale(0.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.deco-neon.fresh { animation-name: deco-pop-neon; }
@keyframes deco-pop-neon { 0% { transform: translateX(-50%) scale(0.3); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }
@keyframes deco-pop-flat { 0% { filter: brightness(1.6); transform: translateX(var(--tx, 0)) scale(1.08); } 100% { transform: translateX(var(--tx, 0)); } }
@keyframes tail { 50% { transform: rotate(-14deg); } }
@keyframes lamp { to { opacity: 0.55; } }
@keyframes neon { 0%, 46%, 50%, 100% { opacity: 1; } 47%, 49% { opacity: 0.55; } }
@keyframes walk-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes walk-out { to { transform: translateX(-50px); opacity: 0; } }
@keyframes hop { 35% { transform: translateY(-18px); } 65% { transform: none; opacity: 1; } to { transform: translateX(-24px); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px) rotate(-6deg); } 40%, 80% { transform: translateX(5px) rotate(6deg); } }
@keyframes plop { from { transform: scale(0.6); } to { transform: scale(1); } }
@keyframes drop-in { from { transform: translate(-50%, -120%) rotate(var(--r)) scale(1.4); opacity: 0; } to { transform: translate(-50%, -50%) rotate(var(--r)); opacity: 1; } }
@keyframes wobble { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes steam { from { opacity: 0.9; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -30px); } }
@keyframes ready { to { filter: brightness(1.12); box-shadow: 0 0 0 7px #fff3b0, 0 4px 0 #e0a800; } }
@keyframes flash { from { opacity: 0.95; } to { opacity: 0; } }
@keyframes glow { to { filter: brightness(1.12); } }
@keyframes danger { to { background: #ffc4c4; } }
@keyframes bump { 50% { transform: scale(1.18); color: #2c8a0e; } }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 400px) {
  .tray { gap: 6px; padding: 8px; }
  .ing .ico { width: 32px; height: 32px; }
  .counter { grid-template-columns: 54px 1fr 54px; }
  .side-btn { height: 66px; }
  .side-btn i[data-art] { width: 28px; height: 28px; }
  .queue, .shopfront > .queue { min-height: 160px; }
  .shopfront > .queue { padding-top: 25px; }
  .shopfront > .queue .empty-slot { min-height: 124px; }
  #scene .scene-awning { height: 24px; background-size: auto 24px; }
  #scene .scene-sign { top: 2px; font-size: 0.8rem; padding: 1px 10px 2px; }
  .shop-item .shop-pic { width: 46px; height: 46px; }
  .shop-item .shop-pic svg { max-width: 40px; max-height: 42px; }
  .shop-item { gap: 8px; }
  .buy { min-width: 72px; }
  .face { width: 52px; }
  .customer.vip .face { width: 64px; }
  .shop-head .note-title { font-size: 1.3rem; }
  .shop-head .btn { padding: 9px 14px; }
  .coin-pill { font-size: 1.05rem; }
  .shop-list[data-tab="versiering"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-colours { grid-template-columns: repeat(4, 44px); justify-content: start; column-gap: 14px; }
  .hh, .fo { width: 66px; height: 66px; }
  .hh span { width: 19px; height: 19px; }
  .fo span[data-role="eye"] { width: 19px; height: 19px; }
  .fo span[data-role="mouth"] { width: 15px; height: 15px; }
  .free-text span { display: none; }
}
/* Short phones in portrait: everything a bit more compact, so most of the game fits on one screen */
@media (max-width: 600px) and (max-height: 760px) {
  .app { gap: 7px; padding-top: 8px; }
  .dock { gap: 7px; }
  .queue, .shopfront > .queue { min-height: 0; }
  /* the shop front costs a little room for its awning and sign: won back from the faces, bubbles and board */
  .shopfront > .queue { padding: 19px 4px 2px; }
  .empty-slot, .shopfront > .queue .empty-slot { min-height: 96px; }
  .face { width: 40px; }
  .customer.vip .face { width: 50px; }
  .bubble { padding: 5px 5px 6px; }
  #scene .scene-awning { height: 19px; background-size: auto 19px; }
  #scene .scene-sign { top: 1px; font-size: 0.72rem; padding: 0 9px 1px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 2px 0 var(--shop-dark); }
  #scene .scene-wall { background-position: 0 19px, 0 0; }
  .glam { transform: scale(0.8); }
  .counter { padding: 8px 10px; }
  .peel { max-width: 184px; }
  .side-btn { height: 62px; }
  .side-btn.undo { height: 50px; }
  .side-col { gap: 8px; }
  .serve { padding-top: 9px; padding-bottom: 9px; }
  .ing { padding: 4px 2px 3px; }
  .ing .ico { width: 28px; height: 28px; }
  .step { gap: 3px; }
  .step-text { font-size: 0.95rem; }
  .meter { height: 13px; }
  .counter { gap: 6px 8px; }
}
/* A phone in portrait with the example as a band above the board: the shop front gives up a little room for it, the
   way it does on a short phone (the faces, the bubbles and the awning a size smaller) */
@media (max-width: 600px) and (orientation: portrait) {
  .app.ex-band:not(.coop) { gap: 7px; }
  .app.ex-band:not(.coop) .queue, .app.ex-band:not(.coop) .shopfront > .queue { min-height: 0; }
  .app.ex-band:not(.coop) .shopfront > .queue { padding: 19px 4px 2px; }
  .app.ex-band:not(.coop) .shopfront > .queue .empty-slot { min-height: 96px; }
  .app.ex-band:not(.coop) .face { width: 40px; }
  .app.ex-band:not(.coop) .customer.vip .face { width: 50px; }
  .app.ex-band:not(.coop) .bubble { padding: 5px 5px 6px; }
  .app.ex-band:not(.coop) #scene .scene-awning { height: 19px; background-size: auto 19px; }
  .app.ex-band:not(.coop) #scene .scene-sign { top: 1px; font-size: 0.72rem; padding: 0 9px 1px; border-radius: 8px; }
  .app.ex-band:not(.coop) #scene .scene-wall { background-position: 0 19px, 0 0; }
  .app.ex-band:not(.coop) .counter { padding-top: 8px; padding-bottom: 8px; }
  /* (the line under the board keeps room for two lines, so "Verder" never ends up under the Serveren button) */
  .app.ex-band:not(.coop) .step-text { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
}
/* Phones in portrait: the tray stays at the bottom of the screen, so the orders at the top and the
   ingredients are both in view, even with all ten ingredients */
@media (max-width: 600px) and (min-height: 520px) {
  .dock { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 20; }
  .tray { box-shadow: inset 0 2px 0 #fff, inset 0 0 0 3px #fff, var(--panel-shadow), 0 -8px 20px -10px rgba(60, 30, 110, 0.4); }
  /* the dock sits 8px from the bottom: no extra room below it (game.js makes the board fit above it) */
  .app:not(.coop) { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .peel { width: min(100%, var(--peel-fit, 100%)); }
}
@media (prefers-reduced-motion: reduce) {
  .start-pizza, #queue .customer .face svg, .hero-steam, .tap-hand, .tap-hand::after, .melt-bubs .mb, .os-cheesebub, .oven.on, .oven.ready, .oven.waiting, .status.danger, .pizza.baking, .ing.nudge, .side-btn.attention, .customer.enter, .pick-btn, .album-big,
  .glam i, .deco, .deco *, .scene-awning, .scene-sign, .deco-neon span, .pic-neon span, .buy.ask, .stamp, .book-page.flip, .coin-count,
  .customer.untaken .bubble, .ride-swipe, .ride-ready, .ride-go, .ride-check, .ride-result-scooter, .ride-result-face, .ride-boxes span,
  .oven-stage, .os-eye, .os-pz.out .os-pizza, .os-pz.can-turn .os-turn, .os-pz.turning .os-pizza, .os-bub,
  .app.coop .notepad, .np-tile.np-wiggle, .np-stamp b, .np-tile.np-high .np-add::after { animation: none !important; }
  /* calmer flames: a slow, small flicker */
  .os-flame { animation-duration: 2.4s !important; animation-name: flicker-calm !important; }
  .os-pz.glide { transition-duration: 0.15s; }
  .shop-msg, .ride-msg { transition: none; }
  .hero-steam { opacity: 0.6; }
  .flash { animation-duration: 0.2s; }
  .customer.leaving, .customer.hop { animation: fade-out 0.5s ease forwards; }
}

/* the smallest phones with two rows of ingredients: only the pictures (the name is in the tooltip), so the board can stay big */
@media (max-width: 360px) and (max-height: 600px) {
  .tray[data-rows="2"] .ing .name { display: none; }
  .tray[data-rows="2"] .ing { padding: 5px 2px; }
}

/* the smallest phones: keep "Dag 1 · Rustig aan" on one line */
@media (max-width: 360px) {
  /* the names in the tray in a smaller font, so a long word still fits on its line */
  .ing .name { font-size: 0.66rem; }
  .status .sub { font-size: 0.78rem; white-space: nowrap; }
  /* no room next to the stars: the coins take the place of the mode */
  #coin-count, #mode-label { display: none; }
  .sub-coins { display: inline-flex; margin-left: 4px; padding: 0 6px 0 1px; font-size: 1em; box-shadow: none; vertical-align: -3px; }
  .sub-coins svg { width: 15px; height: 15px; }
  .status .money::before { content: ""; }
  .status .money { margin-left: 2px; }
}

/* ---------- While a game runs, two fingers don't zoom the page (the start screen and the help still may)… ---------- */
/* …and a finger that moves sideways is never a "back" swipe of the browser: the page only scrolls up and down (the
   board, the oven and the tiles have their own touch-action none). Scrolling boxes start a new touch-action chain. */
html.pz-playing, .app.playing, .app.playing .tray, .app.playing .np-grid, .app.playing .queue, .app.playing .status, .app.playing .step { touch-action: pan-y; }


/* ---------- "Hoe speel je?": a strip of pictures, the whole story behind "Meer uitleg" ---------- */
/* newer browsers wrap the content of a <details> in a box of its own: it takes the full width too */
.help::details-content { width: 100%; }
.help-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 12px; }
.help-strip { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px 8px; }
.help-step { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.help-pic { position: relative; width: 84px; height: 76px; display: grid; place-items: center; }
.help-n { position: absolute; left: -2px; top: -2px; z-index: 3; min-width: 24px; height: 24px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 0.85rem; line-height: 24px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.help-txt { color: var(--ink); font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
.help-peel { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0c48a, #d9a066 60%, #b97d44); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 3px 0 #9c6a33; }
.help-peel svg { display: block; width: 62px; height: 62px; }
.help-arrow { position: absolute; right: -4px; bottom: 2px; z-index: 2; width: 44px; height: auto; }
.help-drop { position: absolute; right: -2px; top: 0; z-index: 2; line-height: 0; transform: rotate(14deg); filter: drop-shadow(0 3px 2px rgba(60, 20, 0, 0.3)); }
.help-oven { position: relative; width: 84px; aspect-ratio: 100 / 88; }
.help-oven .os-oven { position: absolute; inset: 0; }
.help-in { position: absolute; left: 33%; top: 30%; width: 34%; line-height: 0; }
.help-in svg { width: 100%; height: auto; }
.help-serve { position: relative; display: flex; align-items: flex-end; gap: 2px; }
.help-serve > svg:first-of-type { display: block; }
.help-stars { position: absolute; left: 50%; top: -14px; display: flex; gap: 0; transform: translateX(-50%); line-height: 0; }
/* together: the ober writes the order down */
.help-duo { width: 100%; margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 18px; background: #fff7d6; box-shadow: inset 0 0 0 2px #ffe08a; text-align: left; }
.help-duo:empty { display: none; }
.help-duo-pic { flex: none; display: flex; align-items: flex-end; line-height: 0; }
.help-duo-pic svg { display: block; }
.help-duo-txt { color: var(--ink); font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.help-more { min-height: 46px; padding: 9px 22px; font-size: 1rem; }
.help .help-list { margin: 0; padding: 4px 6px 0 22px; width: 100%; }
.help-list[hidden] { display: none; }
.help-list li + li { margin-top: 4px; }

/* ---------- Short screens (a phone on its side): the buttons of a card stay in view while the card scrolls ---------- */
@media (max-height: 560px) {
  #note .sheet > #note-actions { position: sticky; bottom: -16px; z-index: 2; margin: 0 -16px -16px; padding: 10px 16px 16px; background: var(--cream); border-radius: 0 0 24px 24px; box-shadow: 0 -10px 12px -12px rgba(60, 30, 110, 0.5); }
}

/* ---------- Bigger screens and phones on their side: the game uses the whole screen ----------
   Tablet in portrait: the full width, the board about 40% of it. Tablet (or computer) in landscape: the customers on the
   left, the counter in the middle, the ingredients and Serveren down the right edge. Phone on its side: the top bar
   becomes two side columns (assets/style.css, .side-bars), the customers above the counter, the ingredients in a column
   on the right edge. In the last two the page never scrolls: the board takes the room that is left (container units). */
@media (orientation: portrait) and (min-width: 700px) {
  .app:not(.coop) {
    max-width: 1100px; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 14px; padding: 14px 24px max(16px, env(safe-area-inset-bottom));
  }
  .app:not(.coop) .counter { min-height: 0; container-type: size; grid-template-columns: 96px minmax(0, 1fr) 96px; grid-template-rows: minmax(0, 1fr) auto; padding: 16px 16px 10px; }
  /* the board: about 40% of the width, smaller only when the screen is short */
  .app:not(.coop) .peel { width: min(40vw, 100%, 100cqh - 86px); max-width: none; }
  .app:not(.coop) .side-btn { height: 104px; border-radius: 22px; }
  .app:not(.coop) .side-btn.undo { height: 80px; }
  .app:not(.coop) .side-btn i[data-art] { width: 42px; height: 42px; }
  .app:not(.coop) .side-btn span { font-size: 1.05rem; }
  .app:not(.coop) .step-text { font-size: 1.25rem; }
  .app:not(.coop) .meter-row .meter { flex-basis: 420px; height: 20px; }
  .app:not(.coop) .shopfront > .queue { min-height: 0; padding: 34px 16px 4px; gap: 16px; }
  .app:not(.coop) #scene .scene-awning { height: 34px; background-size: auto 34px; }
  .app:not(.coop) #scene .scene-sign { font-size: 1.05rem; padding: 3px 16px 4px; }
  .app:not(.coop) .face { width: 72px; }
  .app:not(.coop) .customer.vip .face { width: 88px; }
  .app:not(.coop) .bubble { padding: 10px 8px 11px; border-radius: 20px; }
  .app:not(.coop) .order { font-size: 2rem; }
  .app:not(.coop) .order.many { font-size: 1.5rem; }
  .app:not(.coop) .who { font-size: 1rem; }
  .app:not(.coop) .patience { height: 14px; }
  .app:not(.coop) .tray { gap: 12px; padding: 14px; }
  .app:not(.coop) .ing { padding: 8px 4px 6px; border-radius: 20px; }
  .app:not(.coop) .ing .ico { width: 44px; height: 44px; }
  .app:not(.coop) .ing .name { font-size: 1rem; }
  .app:not(.coop) .serve { font-size: 1.6rem; padding-top: 13px; padding-bottom: 13px; }
  .app:not(.coop) .toasts { font-size: 1.15rem; }
  .app:not(.coop) .os-hint { font-size: 1.3rem; }
  .app:not(.coop) .os-btn { font-size: 1rem; padding: 6px 14px; }
}
@media (orientation: portrait) and (min-width: 1000px) {
  .app:not(.coop) .face { width: 96px; }
  .app:not(.coop) .order { font-size: 2.4rem; }
  .app:not(.coop) .ing .ico { width: 56px; height: 56px; }
}

/* a tablet or a computer in landscape: three columns at the height of the screen */
@media (orientation: landscape) and (min-height: 501px) and (min-width: 900px) {
  .app:not(.coop) {
    max-width: 1500px;
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2fr) minmax(200px, 0.8fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px 16px;
    padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  }
  .app:not(.coop) > .topbar { grid-column: 1 / -1; }
  .app:not(.coop) .shopfront { grid-column: 1; grid-row: 2; min-height: 0; }
  .app:not(.coop) .counter { grid-column: 2; grid-row: 2; min-height: 0; container-type: size; grid-template-columns: 88px minmax(0, 1fr) 88px; grid-template-rows: minmax(0, 1fr) auto; padding: 16px 14px 12px; }
  .app:not(.coop) .dock { grid-column: 3; grid-row: 2; min-height: 0; }
  /* the board: as big as the counter allows, at most about 40% of the screen */
  .app:not(.coop) .peel { width: min(100%, 40vw, 100cqh - 96px); max-width: none; }
  .app:not(.coop) .side-btn { height: 96px; border-radius: 22px; }
  .app:not(.coop) .side-btn.undo { height: 76px; }
  .app:not(.coop) .side-btn i[data-art] { width: 40px; height: 40px; }
  .app:not(.coop) .side-btn span { font-size: 1rem; }
  .app:not(.coop) .step-text { font-size: 1.2rem; }
  .app:not(.coop) .meter-row .meter { flex-basis: 400px; height: 18px; }
  /* the customers: one above the other, each at their own bit of counter */
  .app:not(.coop) .shopfront > .queue, .app:not(.coop) .shopfront > .queue[data-slots="2"] {
    height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); align-items: end; gap: 10px; padding: 36px 12px 6px;
  }
  .app:not(.coop) .shopfront > .queue .empty-slot { min-height: 0; height: 100%; }
  .app:not(.coop) .shopfront.free > .queue { height: auto; padding: 0; }
  .app:not(.coop) .customer { position: relative; padding-bottom: 6px; }
  .app:not(.coop) .customer::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -4px; z-index: -1; height: 14px; border-radius: 4px; background: linear-gradient(#e7b07a, #c98a4e); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4); opacity: 0.55; }
  .app:not(.coop) .shopfront .face { width: 64px; }
  .app:not(.coop) .bubble { padding: 8px 6px 9px; }
  .app:not(.coop) .order { font-size: 1.7rem; }
  .app:not(.coop) .order.many { font-size: 1.3rem; }
  .app:not(.coop) .free-banner { flex-direction: column; text-align: center; }
  /* the ingredients down the right edge, Serveren under them for the thumb */
  .app:not(.coop) .dock { display: flex; flex-direction: column; gap: 12px; }
  .app:not(.coop) .dock .serve { order: 2; flex: none; padding: 16px 10px; font-size: 1.3rem; white-space: nowrap; }
  .app:not(.coop) .tray { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(70px, 118px); align-content: end; gap: 10px; padding: 12px; }
  .app:not(.coop) .ing { justify-content: center; border-radius: 18px; }
  .app:not(.coop) .ing .ico { width: 44px; height: 44px; }
  .app:not(.coop) .ing .name { font-size: 0.9rem; }
  .app:not(.coop) .os-hint { font-size: 1.25rem; }
  .app:not(.coop) .toasts { font-size: 1.1rem; }
}

/* a phone on its side: the top bar in two side columns, the customers above the counter, the ingredients on the right */
@media (orientation: landscape) and (max-height: 500px) {
  body .app.side-bars:not(.coop) {
    --side-w: 60px;
    height: 100dvh;
    grid-template-columns: var(--side-w) minmax(0, 1fr) minmax(150px, 0.36fr) var(--side-w);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px 8px;
  }
  body .app.side-bars > .topbar > .back-link { grid-column: 1; grid-row: 1; }
  body .app.side-bars > .topbar > .status { grid-column: 1; grid-row: 2; }
  body .app.side-bars:not(.coop) > .topbar > .top-actions { grid-column: 4; grid-row: 1 / -1; gap: 8px; }
  .app.side-bars .topbar .icon-btn, .app.side-bars .back-link { width: 52px; height: 52px; }
  /* the status, narrow: the stars one above the other */
  .app.side-bars .status { width: var(--side-w); max-width: none; padding: 6px 2px 7px; gap: 3px; }
  .app.side-bars .status-top { flex-direction: column; gap: 4px; }
  .app.side-bars .stars { flex-direction: column; gap: 1px; }
  .app.side-bars .stars svg { width: 22px; height: 22px; }
  .app.side-bars .status .sub { display: flex; flex-direction: column; align-items: center; font-size: 0.82rem; line-height: 1.15; white-space: normal; text-align: center; }
  .app.side-bars #day-dot, .app.side-bars #mode-label, .app.side-bars .sub-coins { display: none; }
  .app.side-bars #coin-count { display: inline-flex; padding: 1px 6px 1px 2px; font-size: 0.9rem; }
  .app.side-bars #coin-count svg { width: 17px; height: 17px; }
  .app.side-bars .status .money::before { content: none; }
  .app.side-bars .stars { align-items: center; }
  .app.side-bars .status-title { font-size: 0.82rem; line-height: 1.1; text-align: center; white-space: normal; }
  .app.side-bars:not(.coop) .shopfront { grid-column: 2; grid-row: 1; }
  .app.side-bars:not(.coop) .counter { grid-column: 2; grid-row: 2; min-height: 0; container-type: size; grid-template-rows: minmax(0, 1fr) auto; padding: 6px 8px; gap: 2px 8px; }
  .app.side-bars:not(.coop) .dock { grid-column: 3; grid-row: 1 / -1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  /* the customers: small, in one row */
  .app.side-bars:not(.coop) .shopfront > .queue { min-height: 0; padding: 19px 4px 2px; gap: 6px; }
  .app.side-bars:not(.coop) .shopfront > .queue .empty-slot { min-height: 74px; }
  .app.side-bars:not(.coop) #scene .scene-awning { height: 18px; background-size: auto 18px; }
  .app.side-bars:not(.coop) #scene .scene-sign { top: 1px; font-size: 0.72rem; padding: 0 9px 1px; border-radius: 8px; }
  .app.side-bars:not(.coop) #scene .scene-wall { background-position: 0 18px, 0 0; }
  .app.side-bars:not(.coop) .face { width: 34px; }
  .app.side-bars:not(.coop) .customer.vip .face { width: 42px; }
  .app.side-bars:not(.coop) .customer { flex-direction: row; align-items: flex-end; gap: 4px; }
  .app.side-bars:not(.coop) .customer > .bubble { flex: 1; min-width: 0; order: 2; }
  .app.side-bars:not(.coop) .customer > .bubble::after { left: -7px; bottom: 10px; margin: 0; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
  .app.side-bars:not(.coop) .customer.critic > .bubble::after { border-right-color: #f4f6fb; border-top-color: transparent; }
  .app.side-bars:not(.coop) .customer > .patience { position: absolute; left: 0; bottom: -4px; width: 34px; height: 7px; }
  .app.side-bars:not(.coop) .bubble { padding: 4px 4px 5px; }
  .app.side-bars:not(.coop) .order { font-size: 1.2rem; }
  .app.side-bars:not(.coop) .order.many { font-size: 1rem; }
  .app.side-bars:not(.coop) .who { margin: 0 0 1px; }
  .app.side-bars:not(.coop) .who small { display: none; }
  .app.side-bars:not(.coop) .price { margin-top: 1px; font-size: 0.85rem; }
  .app.side-bars:not(.coop) .hh, .app.side-bars:not(.coop) .fo { width: 56px; height: 56px; }
  .app.side-bars:not(.coop) .glam { display: none; }
  /* the board: whatever height is left under the customers */
  .app.side-bars:not(.coop) .peel { width: min(100%, 100cqh - 86px); max-width: none; }
  .app.side-bars:not(.coop) .side-btn { height: 62px; }
  .app.side-bars:not(.coop) .side-btn.undo { height: 50px; }
  .app.side-bars:not(.coop) .side-col { gap: 8px; }
  .app.side-bars:not(.coop) .step { gap: 2px; }
  .app.side-bars:not(.coop) .step-text { font-size: 0.95rem; }
  .app.side-bars:not(.coop) .meter { height: 12px; }
  .app.side-bars:not(.coop) .meter-row { min-height: 40px; }
  /* the ingredients in a column on the right edge, Serveren under them */
  .app.side-bars:not(.coop) .dock .serve { order: 2; flex: none; padding: 9px 8px; font-size: 1.1rem; }
  .app.side-bars:not(.coop) .tray { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(52px, auto); align-content: end; gap: 6px; padding: 6px; }
  .app.side-bars:not(.coop) .ing { padding: 4px 2px 3px; }
  .app.side-bars:not(.coop) .ing .ico { width: 28px; height: 28px; }
  .app.side-bars:not(.coop) .ing .name { font-size: 0.75rem; }
}
/* while the oven is open on a tablet in landscape or a phone on its side, kitchen notes go just under its hint
   (there is nothing below the counter there) */
@media (orientation: landscape) and (min-height: 501px) and (min-width: 900px) {
  .app:not(.coop) .counter:has(#oven-stage:not([hidden])) .toasts { top: 62px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .app.side-bars:not(.coop) .counter:has(#oven-stage:not([hidden])) .toasts { top: 48px; }
}
/* Samen on a tablet in portrait: the two halves share the whole height, the board grows with the room it gets */
@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {
  .app.coop { height: 100dvh; }
  .app.coop > .half { min-height: 0; }
  .app.coop > .half-ober { flex: none; }
  .app.coop > .half-baker { flex: 1 1 0; }
  .app.coop .face { width: 60px; }
  .app.coop .order { font-size: 1.7rem; }
  .app.coop .counter { flex: 1 1 0; min-height: 0; container-type: size; grid-template-columns: 80px minmax(0, 1fr) 80px; grid-template-rows: minmax(0, 1fr) auto; }
  .app.coop .peel { width: min(100%, 44vw, 100cqh - 80px); max-width: none; }
  .app.coop .side-btn { height: 84px; }
  .app.coop .side-btn.undo { height: 66px; }
  .app.coop .ing .ico { width: 38px; height: 38px; }
  .app.coop .ing .name { font-size: 0.9rem; }
  .app.coop .tray { gap: 8px; padding: 8px; }
  .app.coop .np-grid { grid-auto-rows: minmax(56px, 130px); }
}
/* Samen on a phone on its side: the side columns of .side-bars, the bakker's half left (bonnetjes and the counter, the
   ingredients in a column next to it), the ober's half right; the name tags shrink to a small label */
@media (orientation: landscape) and (max-height: 500px) {
  body .app.side-bars.coop {
    --side-w: 56px;
    max-width: none;
    height: 100dvh;
    grid-template-columns: var(--side-w) minmax(0, 1.25fr) minmax(0, 1fr) var(--side-w);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: none;
    align-items: stretch;
    gap: 6px 8px;
  }
  body .app.side-bars.coop > .topbar > .top-actions { grid-column: 4; grid-row: 1 / -1; gap: 8px; }
  body .app.side-bars.coop > .half-baker { grid-column: 2; grid-row: 1 / -1; }
  body .app.side-bars.coop > .half-ober { grid-column: 3; grid-row: 1 / -1; }
  .app.side-bars.coop .half { min-height: 0; margin-top: 6px; padding: 12px 5px 5px; gap: 5px; border-radius: 22px; }
  .app.side-bars.coop .role-tag { top: -9px; left: 12px; padding: 0 10px 0 2px; }
  .app.side-bars.coop .tag-face svg { width: 18px; }
  .app.side-bars.coop .tag-text { line-height: 1.3; }
  .app.side-bars.coop .tag-text b { font-size: 0.85rem; }
  .app.side-bars.coop .tag-text small { display: none; }
  /* the bakker: the bonnetjes in a row over the counter, the ingredients in a row under it ("Op de balie" stands under
     the oven); the board takes the height that is left (see "Samen spelen on a phone" below) */
  .app.side-bars.coop .half-baker { display: flex; flex-direction: column; }
  .app.side-bars.coop .ticket-face svg, .app.side-bars.coop .tno { width: 20px; min-width: 20px; height: 20px; line-height: 20px; font-size: 0.82rem; }
  .app.side-bars.coop .dock .serve { order: 2; flex: none; padding: 7px 4px; font-size: 0.95rem; }
  .app.side-bars.coop .dock .serve svg { width: 24px; height: auto; }
  /* the ober: the dining room fills the half; the pass high in the wall, the door and the dish tub under it */
  .app.side-bars.coop .dining:not([hidden]) { flex: 1 1 auto; min-height: 0; }
  .app.side-bars.coop .dn-wall { grid-template-columns: minmax(0, 1fr) 60px; grid-template-areas: "pass pass" "door sink"; row-gap: 4px; padding-top: 6px; }
  .app.side-bars.coop .door { grid-area: door; }
  .app.side-bars.coop .pass { grid-area: pass; justify-self: center; width: min(100%, 240px); }
  .app.side-bars.coop .sink { grid-area: sink; min-height: 50px; }
  .app.side-bars.coop .door-q .customer { min-height: 44px; justify-content: flex-end; }
  .app.side-bars.coop .tb-top { aspect-ratio: auto; height: 46px; }
  .app.side-bars.coop .half-ober .shopfront { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .app.side-bars.coop .shopfront > .queue { flex: 1; min-height: 0; padding: 18px 3px 2px; gap: 4px; }
  .app.side-bars.coop .shopfront > .queue .empty-slot { min-height: 70px; }
  .app.side-bars.coop #scene .scene-awning { height: 17px; background-size: auto 17px; }
  .app.side-bars.coop #scene .scene-sign { top: 1px; font-size: 0.7rem; padding: 0 8px 1px; }
  .app.side-bars.coop .face { width: 32px; }
  .app.side-bars.coop .bubble { padding: 3px 3px 4px; }
  .app.side-bars.coop .order { font-size: 1.05rem; }
  .app.side-bars.coop .who small { display: none; }
}
/* the cards between days and at the end on a phone on its side: two columns, so the whole card and its buttons fit */
@media (orientation: landscape) and (max-height: 500px) {
  #note .sheet { width: min(780px, 100%); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto minmax(0, 1fr); align-items: start; gap: 6px 20px; padding: 12px 16px 14px; }
  #note .sheet > .note-icon { grid-column: 1; grid-row: 1; }
  #note .sheet > .note-title { grid-column: 1; grid-row: 2; }
  #note .sheet > .note-text { grid-column: 2; grid-row: 1 / span 2; }
  #note .sheet > #note-actions { grid-column: 1 / -1; grid-row: 3; position: static; margin: 4px 0 0; padding: 0; background: none; box-shadow: none; }
  #note .note-scene { height: 96px; }
  #note .note-text .note-badge { margin-bottom: 4px; }
  #note .note-stars svg { width: 24px; height: 24px; }
}
/* narrow phones: Krokante Kees's bubble shows his name and the black pizza, without the line under the name */
@media (max-width: 400px) {
  .who.black small { display: none; }
}

/* ---------- Samen spelen: the dining room on the ober's half ---------- */
/* a piece of the pizzeria close up: a tiled wall with the door, the pass (balie) and the dish tub, a wooden
   rail, and the chequered floor with the tables (tiles and wood from world.js, in the theme's colours) */
.dining { display: none; }
.app.coop .dining:not([hidden]) { position: relative; isolation: isolate; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  box-shadow: 0 4px 0 var(--cream-dark), inset 0 0 0 3px rgba(255, 255, 255, 0.55); -webkit-user-select: none; user-select: none; }
.dn-wall { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 64px; align-items: end; gap: 8px; padding: 8px 10px 0;
  background: var(--pz-dn-wall, #f4e6ff) 0 0 / 32px 32px; border-bottom: 9px solid var(--pz-dn-wood1, #a86a35); box-shadow: 0 -3px 0 var(--pz-dn-wood0, #e2ad73) inset; }
.dn-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 3px; background: var(--pz-dn-wood0, #e2ad73); opacity: 0.8; pointer-events: none; }

/* the door, and the guests who wait in front of it */
.door { position: relative; min-width: 0; display: flex; align-items: flex-end; min-height: 74px; }
.door-art { flex: none; width: 48px; line-height: 0; margin-bottom: -1px; }
.door-art svg { display: block; width: 100%; height: auto; }
.door-q { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; margin-left: -10px; }
.door-q .customer { width: 44px; flex: none; gap: 2px; }
.door-q .customer > .bubble, .door-q .customer > .glam { display: none; }
.door-q .customer .face { width: 40px; }
.door-q .customer.vip .face { width: 46px; }
.door-q .customer > .patience { width: 38px; height: 7px; order: -1; }
.door-q .customer.picked .face { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 3px var(--pink)); }
.door-q .customer.picked::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 30px; height: 5px; border-radius: 3px; background: var(--pink); transform: translateX(-50%); }
.door.busy .door-art { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); }

/* the pass: a hatch in the wall to the kitchen, with a steel ledge for two plates */
.pass { position: relative; min-width: 0; align-self: stretch; display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: center; gap: 6px;
  margin-top: 2px; padding: 6px 8px 8px; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(180deg, #4a3b52, #6a5672 70%, #c9d3e0 70.5%, #9aa7bd); box-shadow: inset 0 0 0 4px var(--pz-dn-wood1, #a86a35), 0 3px 0 #7d8aa3; }
.pass-head { display: flex; flex-direction: column; align-items: center; color: #fff; line-height: 1.05; text-align: center; writing-mode: horizontal-tb; }
.pass-head b { font-size: 0.8rem; letter-spacing: 0.02em; }
.pass-head small { font-size: 0.62rem; font-weight: 600; opacity: 0.85; max-width: 4.2em; }
.pass-slot { position: relative; justify-self: center; width: min(100%, 64px); aspect-ratio: 1; border-radius: 50%; }
.pass-slot.empty { border: 3px dashed rgba(255, 255, 255, 0.35); }
.pass-pz { padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; animation: pop-in 0.25s ease; container-type: inline-size; }
.pass-pz:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.pass-pz.picked { transform: translateY(-4px); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 5px #fff); }
.pass-pz.lifted > .pl-dish, .pass-pz.lifted > .pl-pz { opacity: 0.3; }
.pass-pz.lifted .rack-steam { display: none; }
.pass-pz.bounce { animation: plate-back 0.4s ease; }
@keyframes plate-back { 0% { transform: translateY(-14px) scale(1.1); } 60% { transform: translateY(3px); } 100% { transform: none; } }
.pass-pz .tno { position: absolute; right: -5px; top: -5px; min-width: 22px; height: 22px; line-height: 22px; font-size: 0.82rem; box-shadow: 0 0 0 2px #fff; }
.pass-pz .steam.rack-steam { top: -18%; }
/* a plate: the dish, the pizza on it and the bites out of it */
.pl-dish, .pl-pz, .pl-bites { position: absolute; line-height: 0; pointer-events: none; }
.pl-dish { inset: 0; }
.pl-pz { inset: 14%; transition: transform 0.3s ease; }
.pl-bites { inset: 0; }
.pl-dish svg, .pl-pz svg, .pl-bites svg { display: block; width: 100%; height: 100%; }
.plate-ghost { left: -36px; top: -36px; width: 72px; height: 72px; }
.plate-ghost > .pl-dish, .plate-ghost > .pl-pz { transform: none; }
.cloth-ghost { left: -30px; top: -26px; width: 60px; height: 50px; animation: rub 0.25s ease-in-out infinite alternate; }
@keyframes rub { from { rotate: -8deg; } to { rotate: 8deg; } }

/* the dish tub */
.sink { position: relative; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 64px; padding: 4px 2px 6px; border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, 0.7); box-shadow: 0 3px 0 var(--cream-dark); font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--ink); cursor: pointer; margin-bottom: 4px; }
.sink-art { width: 50px; line-height: 0; }
.sink-art svg { display: block; width: 100%; height: auto; }
.sink.wants { box-shadow: 0 0 0 3px #2d8dff, 0 3px 0 var(--cream-dark); animation: glow 0.6s ease-in-out infinite alternate; }
.sink.drop-ok { box-shadow: 0 0 0 5px #4fc01c, 0 3px 0 var(--cream-dark); transform: scale(1.06); }
.sink:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* the tables, on the floor */
.tables { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; padding: 8px 8px 10px; background: var(--pz-dn-floor, #e8d7c0) 0 0 / 40px 40px; }
.tables[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.tb-chair { position: absolute; z-index: -1; left: 50%; bottom: -16px; width: 58%; max-width: 80px; transform: translateX(-50%); line-height: 0; pointer-events: none; }
.tb-chair svg { display: block; width: 100%; height: auto; }
.tb-seat { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; min-height: 40px; }
.tb-seat .customer { width: 100%; gap: 3px; }
.tb-seat .customer > .patience { order: -1; width: 70%; height: 7px; }
.tb-seat .customer .face { margin-bottom: -13px; }
.tb[data-state="eating"] .customer > .bubble, .tb[data-state="paying"] .customer > .bubble { visibility: hidden; }
.tb[data-state="eating"] .customer > .patience, .tb[data-state="paying"] .customer > .patience { visibility: hidden; }
.tb-top { position: relative; z-index: 2; width: 100%; max-width: 150px; aspect-ratio: 100 / 62; padding: 0; border: 0; border-radius: 40% 40% 12px 12px; background: none; font: inherit; cursor: pointer; touch-action: manipulation; }
.tb[data-state="dirty"] .tb-top, .tb[data-state="crumbs"] .tb-top { touch-action: none; }
.tb-top:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.tb-art, .tb-crumbs { position: absolute; inset: 0; line-height: 0; pointer-events: none; }
.tb-art svg, .tb-crumbs svg { display: block; width: 100%; height: 100%; }
.tb-crumbs { opacity: var(--crumbs, 0); transition: opacity 0.25s ease; }
.tb-plate { position: absolute; left: 50%; top: 32%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%) scaleY(0.56); pointer-events: none; }
.tb-plate .plate { position: absolute; inset: 0; animation: pop-in 0.25s ease; }
.tb-plate .plate .pl-pz { transform: scale(calc(1 - var(--eaten, 0) * 0.22)); }
.tb-plate .plate.dirty { line-height: 0; transform: translate(calc(var(--j, 0) * 12%), calc(var(--j, 0) * -10%)); }
.tb-plate .plate.dirty svg { display: block; width: 100%; height: 100%; }
.tb.lifted .tb-plate { opacity: 0.25; }
/* a free table where the guest at the door can sit glows; a table that wants the plate being dragged lights up */
.tb.can-seat .tb-art { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 4px #4fc01c); animation: glow 0.7s ease-in-out infinite alternate; }
.tb.wants .tb-art { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px var(--tc)) drop-shadow(0 0 3px #fff); }
.tb.drop-ok .tb-art { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px #4fc01c) drop-shadow(0 0 4px #fff); }
.tb.drop-ok .customer .face { transform: scale(1.08); }
.tb.picked .tb-plate { filter: drop-shadow(0 0 5px #2d8dff); transform: translate(-50%, -58%) scaleY(0.56); }
.tb[data-state="dirty"] .tb-plate { pointer-events: none; }
.tb.shine .tb-art { animation: table-shine 0.8s ease; }
@keyframes table-shine { 30% { filter: brightness(1.25) drop-shadow(0 0 8px #fff); } }
.tb-pay { position: absolute; z-index: 5; left: 50%; bottom: 40%; display: flex; align-items: center; gap: 2px; padding: 2px 8px 2px 6px; border-radius: 999px; background: #fff3c4; box-shadow: inset 0 0 0 2px #ffe08a, 0 3px 6px rgba(0, 0, 0, 0.15);
  color: #8a5a00; font-size: 0.9rem; white-space: nowrap; pointer-events: none; transform: translateX(-50%); animation: pay-up 1.5s ease-out forwards; }
.tb-pay small { margin-left: 3px; color: #2c8a0e; font-weight: 700; font-size: 0.75rem; }
@keyframes pay-up { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }
/* a guest going from the door to a table hops onto the chair */
.customer.sit { animation: sit 0.5s ease; }
@keyframes sit { 0% { transform: translateY(-26px) scale(0.85); opacity: 0.4; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: none; } }
/* the table's colour on its bonnetjes and plates */
.tno { background: var(--tc, var(--ink)); }
.app.coop .ticket { box-shadow: inset 0 4px 0 var(--tc, transparent), 0 3px 0 var(--cream-dark); }
.app.coop .ticket.on { box-shadow: inset 0 4px 0 var(--tc, transparent), 0 0 0 3px var(--pink), 0 3px 0 var(--cream-dark); }
/* "Op de balie": the two places on the pass and the one that waits in the kitchen */
.pass-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.pass-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.pass-dots i.on { background: #fff; }
.pass-dots i.wait { margin-left: 4px; width: 10px; height: 10px; }

/* the ober's half in portrait: the wall row a little lower */
@media (orientation: portrait) and (max-height: 900px) {
  .dn-wall { padding-top: 6px; }
  .door { min-height: 64px; }
  .door-art { width: 42px; }
  .door-q .customer .face { width: 36px; }
  .tables { padding: 4px 6px 8px; }
}
@media (max-width: 360px) {
  .dn-wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 54px; gap: 5px; padding-left: 6px; padding-right: 6px; }
  .sink-art { width: 42px; }
  .door-art { width: 38px; }
}
/* roomy (a tablet): bigger tables and guests */
@media (min-width: 700px) and (min-height: 600px) {
  .dn-wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 80px; padding: 10px 14px 0; }
  .door { min-height: 96px; }
  .door-art { width: 60px; }
  .door-q .customer { width: 56px; }
  .door-q .customer .face { width: 50px; }
  .pass-slot { width: min(100%, 80px); }
  .sink-art { width: 64px; }
  .tables { gap: 10px; padding: 12px 12px 14px; }
  .tb-top { max-width: 190px; }
  .app.coop .tb .face { width: 56px; }
  .tb-seat .customer .face { margin-bottom: -26px; }
}

/* ---------- Keukenwerk: the dough, the bins, the pantry, the cutting board and the grater ---------- */
/* the dough: a lumpy ball while kneading, then a disc that is stretched out to the ring */
.pizza { scale: var(--sz, 1); transition: inset 0.25s ease, scale 0.12s ease-out; }
.pizza.ball { border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 36% 30%, #fffaf0 0 10%, #f7e2b8 30%, #ecc98f 62%, #d4a061 100%);
  box-shadow: inset -5cqw -7cqw 8cqw rgba(150, 90, 40, 0.28), 0 6px 0 rgba(120, 70, 30, 0.25), 0 10px 14px rgba(80, 40, 10, 0.3); }
.pizza.ball::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: var(--lumps, 0); pointer-events: none;
  background: radial-gradient(circle at 30% 34%, rgba(160, 100, 50, 0.3) 0 7%, transparent 8%), radial-gradient(circle at 64% 28%, rgba(160, 100, 50, 0.25) 0 6%, transparent 7%),
    radial-gradient(circle at 58% 66%, rgba(160, 100, 50, 0.3) 0 8%, transparent 9%), radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.35) 0 6%, transparent 7%); }
.pizza.squash { animation: squash 0.28s ease; }
@keyframes squash { 35% { transform: scale(1.22, 0.72); } 70% { transform: scale(0.94, 1.08); } }
.pizza.rolled .cuts, .pizza.rolled .guide { display: none; }
.stretch-ring { display: none; position: absolute; inset: 7%; border: 3px dashed rgba(255, 255, 255, 0.95); border-radius: 50%; pointer-events: none; filter: drop-shadow(0 0 2px rgba(90, 50, 20, 0.6)); }
.peel.small-dough .stretch-ring { inset: 18%; }
.peel[data-step="stretch"] .stretch-ring { display: block; animation: glow 0.7s ease-in-out infinite alternate; }
.peel[data-step="knead"], .peel[data-step="stretch"] { touch-action: none; }

/* the bins in the tray: how full they are; an empty one says "op" */
.ing .stock, .pantry-item .stock { display: none; width: 70%; height: 5px; margin-top: 2px; border-radius: 3px; background: rgba(91, 58, 155, 0.15); overflow: hidden; }
.ing .stock i, .pantry-item .stock i { display: block; height: 100%; border-radius: 3px; background: #4fc01c; transition: width 0.3s ease; }
.tray.kw .ing .stock, .pantry-item .stock { display: block; }
.empty-tag { display: none; }
.ing.empty { background: #f4eee6; }
.ing.empty .ico, .ing.empty .name { opacity: 0.35; filter: grayscale(0.6); }
.ing.empty .empty-tag { display: block; position: absolute; left: 50%; top: 30%; padding: 1px 8px; border-radius: 999px; background: #ef3c3c; color: #fff; font-size: 0.78rem; line-height: 1.4; transform: translate(-50%, -50%) rotate(-8deg); box-shadow: 0 2px 0 #b51f26; }

/* the pantry button, with a red dot when something has run out */
.side-btn.pantry { height: 54px; }
.side-btn.pantry i[data-art] { width: 26px; height: 26px; }
.side-btn.pantry.alert::after { content: ""; position: absolute; right: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #ef3c3c; box-shadow: 0 0 0 2px #fff; animation: glow 0.6s ease-in-out infinite alternate; }
.side-btn.pantry[hidden] { display: none; }
.app.coop .side-col { gap: 6px; }
.app.coop .side-btn.pantry { height: 46px; }
.side-btn.pantry span { font-size: 0.72rem; letter-spacing: -0.01em; }

/* the stage over the board, like the oven's */
.prep-stage { position: relative; z-index: 5; grid-column: 1 / 3; grid-row: 1 / 3; align-self: stretch; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
  background: linear-gradient(180deg, #fff6e8 0 55%, #f6dfbd 55% 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.75); animation: pop-in 0.22s ease; }
.prep-stage[hidden] { display: none; }
.counter.prep-on .step { visibility: hidden; }
.prep-area { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 8px 8px; container-type: size; }
.pantry-shelves { width: 100%; max-height: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); align-content: center; gap: 5px; padding: 6px; overflow-y: auto; border-radius: 14px;
  background: #c98a4e linear-gradient(180deg, transparent 0 calc(50% - 3px), rgba(0, 0, 0, 0.12) calc(50% - 3px) 50%, transparent 50%); box-shadow: inset 0 0 0 4px #a86a35; }
.pantry-item { position: relative; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 2px; border: 0; border-radius: 12px; background: #fff3dd; box-shadow: 0 3px 0 #8a5a2e; font: inherit; color: var(--ink); cursor: pointer; }
.pantry-ico { width: 34px; height: 34px; line-height: 0; }
.pantry-ico svg { display: block; width: 100%; height: 100%; }
.pantry-name { max-width: 100%; font-size: 0.72rem; font-weight: 700; line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
.pantry-item.low { box-shadow: 0 0 0 3px #ef3c3c, 0 3px 0 #8a5a2e; }
.pantry-item.want { box-shadow: 0 0 0 3px #4fc01c, 0 0 12px 2px rgba(79, 192, 28, 0.6), 0 3px 0 #8a5a2e; animation: glow 0.6s ease-in-out infinite alternate; }
.pantry-item:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a2e; }
.pantry-item:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.chop-box { position: relative; width: min(100cqw, 142cqh); aspect-ratio: 100 / 70; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.chop-box:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 12px; }
.chop-board { position: absolute; inset: 0; line-height: 0; pointer-events: none; }
.chop-board svg { display: block; width: 100%; height: 100%; }
.chop-bits { position: absolute; left: 4%; top: 8%; width: 80%; height: 80%; pointer-events: none; }
.chop-pc { position: absolute; aspect-ratio: 1; line-height: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); animation: pop-in 0.2s ease; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15)); }
.chop-pc svg { display: block; width: 100%; height: 100%; }
.chop-cuts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.chop-cuts line { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(90, 50, 20, 0.6)); }
.chop-cuts line { stroke-width: 4px; }
.chop-cuts line.done { animation: fade-out 0.6s ease forwards; }
.chop-fly { z-index: 120; }
/* a finger that shows the swipe, until the first one */
.chop-hand { position: absolute; left: 30%; top: 40%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(91, 58, 155, 0.35); pointer-events: none; animation: chop-hint 1.3s ease-in-out infinite; }
.chop-box:has(.chop-bits[data-n="1"]) .chop-hand, .chop-box:has(.chop-bits[data-n="2"]) .chop-hand, .chop-box:has(.chop-bits[data-n="3"]) .chop-hand, .chop-box.grate:has(.grate-pile[data-n]:not([data-n="0"])) .chop-hand { display: none; }
@keyframes chop-hint { 0% { transform: translate(-40%, -40%) scale(0.8); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(180%, 40%) scale(1); opacity: 1; } 100% { transform: translate(200%, 40%); opacity: 0; } }
.chop-box.grate .chop-hand { left: 40%; top: 20%; animation-name: grate-hint; }
@keyframes grate-hint { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(180%); opacity: 1; } 100% { transform: translateY(200%); opacity: 0; } }
.grate-grater { position: absolute; left: 34%; top: 2%; width: 26%; line-height: 0; pointer-events: none; }
.grate-grater svg, .grate-block svg, .grate-pile svg { display: block; width: 100%; height: auto; }
.grate-block { position: absolute; left: 52%; top: calc(var(--by, 0.3) * 100%); width: calc(26% * var(--left, 1)); line-height: 0; pointer-events: none; transform: translate(-30%, -50%) rotate(-12deg); transition: width 0.2s ease; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.15)); }
.grate-pile { position: absolute; left: 22%; bottom: 10%; width: 52%; line-height: 0; pointer-events: none; }

/* the setting: three ways of playing that can each have it on */
.kw-opt { flex-wrap: wrap; }
.kw-choice { flex-wrap: wrap; justify-content: flex-end; }
.kw-choice button { padding: 0 10px; font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) {
  .pass-pz, .pass-pz.bounce, .cloth-ghost, .sink.wants, .tb.can-seat .tb-art, .tb.shine .tb-art, .tb-pay, .customer.sit, .tb-plate .plate, .pizza.squash, .peel[data-step="stretch"] .stretch-ring,
  .side-btn.pantry.alert::after, .prep-stage, .pantry-item.want, .chop-pc, .chop-hand { animation: none !important; }
  .tb-pay { opacity: 1; }
  .pizza { transition: none; }
}

/* "Op de balie" in the oven's column (Samen spelen on a phone in portrait) */
.serve.in-col { width: 100%; height: 62px; min-height: 0; flex-direction: column; gap: 0; padding: 3px 2px 4px; border-radius: 18px; font-size: 0.74rem; line-height: 1.05; white-space: normal; text-align: center; }
.serve.in-col svg { width: 24px; height: 24px; }
.serve.in-col .pass-dots { margin: 2px 0 0; gap: 3px; }
.serve.in-col .pass-dots i { width: 8px; height: 8px; }
.serve.in-col .pass-dots i.wait { width: 7px; height: 7px; margin-left: 2px; }
.oven-col:has(.serve.in-col) { gap: 8px; justify-content: center; }
@media (orientation: portrait) and (max-height: 900px) {
  .app.coop .oven-col .side-btn.oven { height: 60px; }
  .dn-wall { padding-top: 5px; }
  .door { min-height: 56px; }
  .door-art { width: 38px; }
  .pass-slot { width: min(100%, 52px); }
  .pass { padding: 4px 6px 6px; }
  .sink { min-height: 54px; }
  .sink-art { width: 42px; }
  .app.coop .tickets { min-height: 64px; }
  .app.coop .ing { padding: 3px 2px 2px; }
  .app.coop .ing .ico { width: 26px; height: 26px; }
  .app.coop .tray .ing .stock { height: 4px; margin-top: 1px; }
  .app.coop .tray .ing .count { font-size: 0.875rem; }
  .app.coop .step-text { font-size: 0.9rem; }
}
/* both halves on one screen with the bins (and from day 2 a second row of them): the board a little smaller */
@media (orientation: portrait) and (max-height: 900px) {
  .app.coop .peel { max-width: 146px; }
  .app.coop .meter-row { min-height: 36px; }
  .app.coop .tray { padding: 4px; gap: 5px; }
  .app.coop { padding-bottom: 6px; }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 900px) {
  .app.coop .peel { max-width: 224px; }
  .app.coop .meter-row { min-height: 38px; }
}
@media (orientation: portrait) and (max-height: 900px) {
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn { height: 48px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn.undo, .app.coop .side-col .side-btn.pantry { height: 42px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn i[data-art] { width: 24px; height: 24px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn span { font-size: 0.74rem; }
  .app.coop .ticket .tno { min-width: 22px; height: 22px; line-height: 22px; font-size: 0.85rem; }
  .app.coop .ticket { padding: 3px 4px 4px; gap: 1px; }
}
/* a tablet in portrait: three side buttons share the board's height */
@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn { height: 72px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn.undo, .app.coop .side-col .side-btn.pantry { height: 58px; }
  .app.coop .side-btn.pantry span { font-size: 0.85rem; }
}
/* a phone on its side: the same compact side buttons, and "Op de balie" under the oven */
@media (orientation: landscape) and (max-height: 500px) {
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn { height: 50px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn.undo, .app.coop .side-col .side-btn.pantry { height: 44px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn i[data-art] { width: 24px; height: 24px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn span { font-size: 0.72rem; }
  .app.coop .oven-col .side-btn.oven { height: 60px; }
  .door { min-height: 60px; }
  .door-art { width: 40px; }
  .pass-slot { width: min(100%, 54px); }
}
/* a tablet in landscape: the dining room is tall, so the four tables stand in two rows (not on a 768px high one:
   there two rows would make the page taller than the screen) */
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 801px) {
  .tables[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-content: space-evenly; row-gap: 18px; padding-left: 8%; padding-right: 8%; }
}
/* the guests at the door stand in a little queue, one half behind the other */
.door-q .customer + .customer { margin-left: -12px; }
.door-q .customer:nth-child(2) { z-index: -1; }
@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn { height: 66px; }
  .app.coop .side-col:has(.pantry:not([hidden])) .side-btn.undo, .app.coop .side-col .side-btn.pantry { height: 54px; }
  .app.coop .side-col:has(.pantry:not([hidden])) { gap: 8px; }
  .app.coop .oven-col .side-btn.oven { height: 76px; }
  .serve.in-col { height: 80px; font-size: 0.92rem; border-radius: 20px; }
  .serve.in-col svg { width: 30px; height: 30px; }
  .serve.in-col .pass-dots i { width: 10px; height: 10px; }
}
/* the ober's news: compact, on the bottom edge of the half (over the tables' feet and the gap below), so the tables,
   their guests and the pass stay in view */
.app.coop .toasts-ober { bottom: -18px; z-index: 31; width: max-content; max-width: 96%; }
.app.coop .toasts-ober > .toast, .app.coop .toasts-ober > .review { font-size: 0.86rem; line-height: 1.2; padding: 4px 12px; max-width: min(100%, 340px); }
.app.coop .toasts-ober > .toast.intro { padding: 5px 14px; }
.app.coop .toasts-ober > .review { padding: 3px 12px 3px 5px; gap: 6px; }
.app.coop .toasts-ober .review-face svg { width: 30px; height: auto; }
@media (orientation: landscape) and (min-width: 700px) {
  .app.coop .toasts-ober { top: auto; bottom: 4px; }
}

/* a small stage (a phone): the pantry's jars a little smaller, so every one is in view */
@container (max-height: 230px) {
  .pantry-item { min-height: 46px; padding: 3px 2px; border-radius: 10px; }
  .pantry-ico { width: 24px; height: 24px; }
  .pantry-name { font-size: 0.64rem; }
  .pantry-item .stock { height: 4px; margin-top: 1px; }
}
@container (max-height: 170px) {
  .pantry-name { display: none; }
  .pantry-item { min-height: 40px; }
}
/* the stage's hint wraps in a narrow kitchen (a phone on its side) */
#prep-hint { min-width: 0; overflow-wrap: break-word; }
@media (orientation: landscape) and (max-height: 500px) {
  #prep-hint { font-size: 0.85rem; line-height: 1.15; }
  #prep-back { padding: 4px 8px; font-size: 0.85rem; }
}

/* ---------- Samen spelen: the drinks bar (water, limonade, wijn), over the ober's half ---------- */
.drink { display: none; }
.app.coop .drink:not([hidden]) { position: absolute; inset: 0; z-index: 33; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; padding: 10px; border-radius: 28px;
  background: #fff8e0 radial-gradient(circle at 50% 120%, #ffe9a8 0 40%, transparent 41%); box-shadow: inset 0 0 0 3px var(--pc, var(--purple)), 0 10px 24px -12px rgba(60, 30, 110, 0.6); animation: pop-in 0.2s ease; container-type: size; }
.dk-who { display: flex; align-items: center; gap: 8px; }
.dk-face { flex: none; line-height: 0; }
.dk-face svg { display: block; width: 36px; height: auto; }
.dk-say { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px 4px 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px #f0e2c8, 0 3px 0 var(--cream-dark); color: var(--ink); font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.dk-want { flex: none; line-height: 0; }
.dk-want svg { display: block; width: 30px; height: auto; }
.drink.good .dk-say { box-shadow: 0 0 0 3px #4fc01c, 0 3px 0 var(--cream-dark); }
/* one row at a time: the shelf with the glasses, the three taps (hold the right one), the extras and Klaar */
.dk-taps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dk-extras { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.drink .dk-shelf, .drink .dk-extras, .drink[data-phase="glass"] #dk-taps, .drink[data-phase="extras"] #dk-taps { display: none; }
.drink[data-phase="glass"] .dk-shelf, .drink[data-phase="extras"] .dk-extras { display: grid; }
.dk-ex.on { background: #effbe6; box-shadow: 0 0 0 4px #4fc01c, 0 4px 0 var(--cream-dark); }
.dk-ex.on::after { content: ""; position: absolute; right: 5px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: #4fc01c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5L7 11.5L12 5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.dk-extras .dk-tap-art svg { height: clamp(30px, 12cqh, 70px); max-width: 100%; }
.dk-done { background: linear-gradient(180deg, #f2ffe9, #d9f7c4); box-shadow: 0 0 0 2px #9fdc7c, 0 4px 0 #6cb84a; color: #2b6a12; }
.dk-tap { position: relative; min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 4px 5px; border: 0; border-radius: 16px;
  background: #fff; box-shadow: 0 0 0 2px #f0e2c8, 0 4px 0 var(--cream-dark); font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--ink); cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.08s ease; }
.dk-tap-art { line-height: 0; pointer-events: none; }
.dk-tap-art svg { display: block; width: auto; height: clamp(42px, 21cqh, 110px); }
.dk-tap-name { pointer-events: none; line-height: 1.1; }
.dk-tap.on { transform: translateY(3px); box-shadow: 0 0 0 4px var(--dc), 0 1px 0 var(--cream-dark); }
.dk-tap.hint { box-shadow: 0 0 0 4px #4fc01c, 0 4px 0 var(--cream-dark); }
.dk-tap:disabled { opacity: 0.55; cursor: default; }
.dk-tap:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.dk-hand { display: none; position: absolute; right: 2px; top: -8px; width: 30px; height: 30px; pointer-events: none; }
.dk-tap.hint .dk-hand { display: block; animation: dk-hand 0.9s ease-in-out infinite; }
@keyframes dk-hand { 50% { transform: translateY(7px); } }
/* a phone (two players face to face, or on its side): the glass stands beside the row of buttons, where it can be
   big; the extras in two rows */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .app.coop .drink:not([hidden]) { grid-template-columns: minmax(0, 1fr) clamp(86px, 27%, 132px); grid-template-rows: auto minmax(0, 1fr); column-gap: 8px; }
  .app.coop .drink > .dk-who { grid-column: 1 / -1; }
  .app.coop .drink > .dk-taps { grid-column: 1; grid-row: 2; align-self: stretch; min-height: 0; }
  .app.coop .drink > .dk-extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app.coop .drink > .dk-extras .dk-tap { min-height: 0; }
  .app.coop .drink > .dk-extras .dk-tap-art svg { height: clamp(24px, 11cqh, 44px); }
  .app.coop .drink > .dk-bar { grid-column: 2; grid-row: 2; height: 100%; align-self: stretch; --gh: min(80cqh, 150px, (100cqw - 26px) * 62 / 46); }
  .app.coop .drink .dk-cup { left: 50%; transform: translateX(-50%); }
  .app.coop .drink .dk-stream { left: calc(50% + 10px); }
  .app.coop .drink .dk-puddle { left: 50%; width: 96%; }
}
/* under the taps: the glass slides under the one that is held; its meter has a band of "just right" and a star */
.dk-bar { --gh: min(64cqh, 150px); position: relative; align-self: start; height: min(100%, 240px); min-height: 0; container-type: size; }
/* the counter the glass stands on */
.dk-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-radius: 4px; background: linear-gradient(#e2ad73, #c98a4e); box-shadow: 0 2px 0 #a86a35; }
.dk-stream { position: absolute; top: -8px; left: calc((var(--at, 1) + 0.5) * 100% / 3); width: 8px; height: 0; margin-left: -4px; border-radius: 4px; background: var(--dc, #ffd84a); transition: left 0.25s ease; }
.drink.pouring .dk-stream { height: calc(100% - var(--gh) + 2px); }
/* under the tap that is held, but never past the edge (the meter is on its right) */
.dk-cup { position: absolute; z-index: 1; bottom: 6px; left: clamp(4px, calc((var(--at, 1) + 0.5) * 100% / 3 - var(--gh) * 0.375), calc(100% - var(--gh) * 0.75 - 42px)); display: flex; align-items: flex-end; gap: 6px; transition: left 0.25s ease; }
.dk-glass { position: relative; height: var(--gh); aspect-ratio: 46 / 62; line-height: 0; -webkit-tap-highlight-color: transparent; }
.dk-glass > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dk-glass[role="button"] { cursor: pointer; }
/* where the glass goes, before there is one */
.dk-glass.empty { box-sizing: border-box; border: 3px dashed rgba(143, 191, 226, 0.9); border-radius: 6px 6px 14px 14px; background: rgba(255, 255, 255, 0.45); }
.drink.good .dk-glass > svg { filter: drop-shadow(0 0 5px rgba(79, 192, 28, 0.8)); }
.dk-bar.drop-ok .dk-glass.empty { border-color: #4fc01c; background: rgba(79, 192, 28, 0.15); }
.glass-fly.glass-drag { width: 56px; }
.dk-meter { position: relative; width: 14px; height: var(--gh); border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 2px #e3d3b3; overflow: visible; }
.dk-mfill { position: absolute; left: 3px; right: 3px; bottom: 3px; max-height: calc(100% - 6px); height: 0; border-radius: 4px; background: var(--dc, #ffd84a); transition: height 0.08s linear; }
.dk-mband { position: absolute; left: -3px; right: -3px; bottom: var(--b0, 76%); height: calc(var(--b1, 96%) - var(--b0, 76%)); border-radius: 5px; background: rgba(79, 192, 28, 0.3); box-shadow: inset 0 0 0 2px #4fc01c; }
.dk-mstar { position: absolute; left: calc(100% + 1px); bottom: calc((var(--b0, 76%) + var(--b1, 96%)) / 2 - 8px); line-height: 0; }
.dk-mstar svg { display: block; width: 16px; height: 16px; }
.drink.good .dk-mstar { animation: glow 0.4s ease-in-out infinite alternate; }
.dk-puddle { position: absolute; left: clamp(16%, calc((var(--at, 1) + 0.5) * 100% / 3), 84%); bottom: -6px; width: min(31%, 190px); height: 30%; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, var(--dc, #ffd84a) 0 50%, color-mix(in srgb, var(--dc, #ffd84a) 60%, transparent) 64%, transparent 71%); touch-action: none; cursor: grab; z-index: 4; animation: pop-in 0.25s ease; }
.dk-puddle[hidden] { display: none; }
.dk-puddle:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
/* the guest's wish on the bubble, the glass on the table once it is brought, and the glass on its way there */
.drink-ask { position: absolute; right: -8px; bottom: -12px; z-index: 2; line-height: 0; padding: 2px 3px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px #ffd84a, 0 2px 0 var(--cream-dark); animation: glow 0.7s ease-in-out infinite alternate; }
.drink-ask svg { display: block; width: 22px; height: auto; }
.tb-glass { position: absolute; left: 12%; top: 2%; width: 13%; line-height: 0; pointer-events: none; transform: translateY(-50%); }
.tb-glass svg { display: block; width: 100%; height: auto; }
.glass-fly { position: fixed; left: 0; top: 0; z-index: 100; width: 40px; pointer-events: none; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.25)); }
.glass-fly svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .app.coop .drink, .drink-ask, .dk-puddle, .dk-tap.hint .dk-hand, .drink.good .dk-mstar { animation: none !important; }
  .dk-mfill, .dk-stream, .dk-cup, .dk-tap { transition: none; }
}
/* while eating, the order is gone from the bubble but a wish for a drink still shows */
.tb[data-state="eating"] .customer > .bubble .drink-ask { visibility: visible; }

/* ---------- Samen spelen: which pizza is for which table ---------- */
/* a flag in the table's colour with its number: on the plates, the bonnetjes, the order bubbles and at the table */
.tno.flag { display: inline-block; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; line-height: 0; }
.tno.flag svg { display: block; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 1px rgba(60, 30, 10, 0.25)); }
.customer .bubble .tno.flag { left: -9px; top: -24px; min-width: 0; height: auto; line-height: 0; box-shadow: none; }
.pass-pz .tno.flag { right: -10px; top: -16px; min-width: 0; height: auto; line-height: 0; box-shadow: none; pointer-events: none; }
.plate-ghost .tno.flag { position: absolute; right: -8px; top: -18px; }
.ghost .tno.flag svg { width: 28px; height: auto; transform: none; }
.app.coop .ticket .tno.flag, .app.side-bars.coop .tno.flag { width: auto; min-width: 0; height: auto; line-height: 0; }
.tb-flag { position: absolute; right: 1%; bottom: 46%; z-index: 1; line-height: 0; pointer-events: none; transform-origin: 12% 100%; }
.tb-flag svg { display: block; width: clamp(26px, 8.5vmin, 38px); height: auto; filter: drop-shadow(0 2px 1px rgba(60, 30, 10, 0.25)); }
@media (min-width: 700px) and (min-height: 600px) {
  .customer .bubble .tno.flag { left: -12px; top: -30px; }
  .customer .bubble .tno.flag svg { width: 34px; height: auto; }
  .app.coop .ticket .tno.flag svg { width: 30px; height: auto; }
  .pass-pz .tno.flag svg { width: 36px; height: auto; }
  .pass-pz .tno.flag { right: -14px; top: -22px; }
}
/* a plate picked up: the table it is for pulses and its flag waves */
.tb.wants .tb-art { animation: tb-pulse 0.8s ease-in-out infinite; }
.tb.wants .tb-flag { animation: flag-wave 0.45s ease-in-out infinite alternate; }
@keyframes tb-pulse { 50% { transform: scale(1.07); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 12px var(--tc)) drop-shadow(0 0 4px #fff); } }
@keyframes flag-wave { from { rotate: -9deg; } to { rotate: 9deg; } }
/* a guest dragged from the door: they follow the finger; a table that can't take them glows red */
.door-q .customer { touch-action: none; }
.customer.lifted { opacity: 0.35; }
.guest-ghost { left: -30px; top: -44px; width: 60px; height: 66px; }
.tb.drop-no .tb-art { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px #ef3c3c) drop-shadow(0 0 4px #fff); }
.say-bub { position: absolute; left: 0; bottom: calc(100% + 2px); z-index: 6; padding: 3px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px #ef3c3c, 0 3px 0 var(--cream-dark);
  color: var(--ink); font-weight: 700; font-size: 0.8rem; line-height: 1.2; white-space: nowrap; pointer-events: none; animation: pop-in 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  .tb.wants .tb-art, .tb.wants .tb-flag, .say-bub { animation: none; }
}

/* ---------- Toetjes: the dessert board, the freezer bar and the desserts on bubbles, bonnetjes and plates ---------- */
/* the dessert board covers the pizza board (the pizza waits under it); the side buttons and the step line stay */
.ice-stage { position: relative; z-index: 6; grid-column: 2; grid-row: 1; align-self: stretch; justify-self: stretch; min-height: 0; margin: -4px -4px -6px; overflow: hidden; border-radius: 24px; container-type: size;
  background: radial-gradient(circle at 50% 38%, #ffffff 0 30%, #eaf6ff 62%, #d3e9f9 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), inset 0 -10px 0 rgba(150, 190, 225, 0.25); animation: pop-in 0.22s ease; }
.ice-stage[hidden] { display: none; }
.counter.ice-on .pick { visibility: hidden; }
/* a counter top of cold marble under the coupe */
.ice-stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(180deg, #cfe3f3, #b9d4ea); box-shadow: 0 -2px 0 #fff; }
.ice-cup { position: absolute; z-index: 1; left: 50%; bottom: 5%; height: 86%; aspect-ratio: 100 / 120; transform: translateX(-50%); line-height: 0; touch-action: none; }
.ice-cup[hidden] { display: none; }
.ice-cup .ice-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgba(40, 70, 110, 0.25)); transition: filter 0.15s ease; }
.ice-cup.drop-ok .ice-svg { filter: drop-shadow(0 0 6px #4fc01c) drop-shadow(0 0 3px #4fc01c); }
.ice-cup .sc.plop { transform-box: fill-box; transform-origin: 50% 100%; animation: ice-plop 0.38s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes ice-plop { 0% { transform: translateY(-60%) scale(0.85, 1.15); opacity: 0.6; } 55% { transform: translateY(4%) scale(1.18, 0.8); opacity: 1; } 80% { transform: scale(0.95, 1.06); } }
.ice-cup.melting .ice-svg { animation: ice-sag 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes ice-sag { to { transform: scale(1.02, 0.975); } }
/* the plate it stands on once it is ready, on the counter */
.ice-cup.done::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 9%; border-radius: 50%; background: #fffdf7; box-shadow: 0 0 0 3px #c9b8e8, 0 3px 0 3px rgba(60, 40, 90, 0.2); }
/* a ball in the wrong order on a cone: it wobbles on top, then rolls off */
.ice-roll { position: absolute; z-index: 3; aspect-ratio: 1.1; transform: translate(-50%, -62%); pointer-events: none; animation: ice-roll 1s ease-in forwards; }
.ice-roll svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes ice-roll { 0% { transform: translate(-50%, -150%); } 18% { transform: translate(-50%, -62%) rotate(0); } 30% { transform: translate(-56%, -62%) rotate(-14deg); } 42% { transform: translate(-44%, -62%) rotate(14deg); }
  55% { transform: translate(-30%, -58%) rotate(40deg); opacity: 1; } 100% { transform: translate(150%, 240%) rotate(300deg); opacity: 0; } }
.ice-pick { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; }
.ice-pick[hidden] { display: none; }
.ice-pick .pick-btn svg { width: auto; height: 62%; max-width: none; }
.ice-none { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: 0; padding: 18%; color: var(--ink); font-weight: 700; text-align: center; }
.ice-none[hidden] { display: none; }

/* the tab next to the pizza board: "Toetje", and on the dessert board "Pizza" (back) */
.ice-tab { position: relative; z-index: 7; grid-column: 2; grid-row: 1; justify-self: start; align-self: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-width: 54px; min-height: 54px; padding: 3px 7px 4px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px #8fd3ff, 0 4px 0 var(--cream-dark); font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.ice-tab[hidden] { display: none; }
.ice-tab-ico { display: block; height: 30px; line-height: 0; }
.ice-tab-ico svg { display: block; width: auto; height: 100%; }
.ice-tab.want { background: #f2faff; animation: ask 0.7s ease-in-out infinite alternate; box-shadow: 0 0 0 3px #2d8dff, 0 4px 0 var(--cream-dark); }
.ice-tab.alert::after { content: ""; position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #ef3c3c; box-shadow: 0 0 0 2px #fff; animation: glow 0.6s ease-in-out infinite alternate; }
.ice-tab[data-v="back"] { box-shadow: 0 0 0 2px #ffc61a, 0 4px 0 var(--cream-dark); background: #fff8e6; }
.ice-tab:active { transform: translateY(3px); box-shadow: 0 0 0 2px #8fd3ff, 0 1px 0 var(--cream-dark); }
.ice-tab:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.counter.ice-on .step-text { color: #1f5e9a; }
.btn.ice-done { background: linear-gradient(180deg, #6fd0f5, #2d8dff); box-shadow: 0 4px 0 #1b62b8; color: #fff; }
.btn.ice-done:disabled { filter: grayscale(0.7); opacity: 0.6; animation: none; }
.serve.ice-ready { animation: ready 0.6s ease-in-out infinite alternate; }

/* the freezer bar: a tub per flavour and the toppings, in the tray's place */
.tray[hidden] { display: none; }
/* The freezer as the glass-fronted display of an ice cream shop: a chilled glass edge with frost along the top, a lit
   well with the steel pans in a row, a steel strip along the bottom. Every pan is heaped with its flavour (art.js, tub)
   and carries its name on a little card on the rim. */
.tray.freezer {
  position: relative;
  background:
    radial-gradient(circle at 8% 3px, rgba(255, 255, 255, 0.95) 0 1.6px, transparent 2.4px) 0 0 / 46px 12px repeat-x,
    radial-gradient(circle at 60% 6px, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2px) 0 0 / 31px 12px repeat-x,
    linear-gradient(180deg, rgba(214, 238, 255, 0.95) 0, #ffffff 7px, #bfe1f8 8px, #e4f3ff 12px, #d2e9fb 62%, #bcd6ec 100%);
  box-shadow: inset 0 0 0 3px #f4f9ff, inset 0 -7px 0 #c5d1de, inset 0 -9px 0 #e8eef5, 0 0 0 2px #9fb4c8, var(--panel-shadow);
}
.tray.freezer::before { content: ""; position: absolute; left: 10px; right: 10px; top: 2px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.95); pointer-events: none; }
.ing.tub { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(225, 240, 252, 0.9)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 0 #a9bdd1; touch-action: none; }
.app.playing .freezer .ing { touch-action: none; }
.ing.tub.tool { background: #fff8f0; box-shadow: 0 3px 0 var(--cream-dark); }
/* a pan is wider than it is tall: it keeps the height of an icon and takes the width it needs */
.freezer .ing.tub:not(.tool) .ico { position: relative; width: auto; max-width: 100%; aspect-ratio: 4 / 3; overflow: visible; }
.freezer .ing.tub:not(.tool) .ico svg { overflow: visible; filter: drop-shadow(0 1.5px 0 rgba(70, 100, 130, 0.25)); }
.freezer .ing.tub:not(.tool) .name { position: relative; z-index: 1; margin-top: -4px; padding: 0 6px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px #b9c9da, 0 2px 0 rgba(90, 120, 150, 0.25); }
/* with room for it (a tablet, a computer) the pans come out bigger than the other icons */
@media (min-width: 700px) and (min-height: 600px) { .freezer .ing.tub:not(.tool) .ico { height: 46px; } }
@media (min-width: 1100px) and (min-height: 650px) { #app .freezer .ing.tub:not(.tool) .ico { height: calc(58px * var(--u)); } }
.ing.tub.scooping { box-shadow: 0 0 0 3px #2d8dff, 0 3px 0 #a9bdd1; transform: translateY(2px); }
.ing.tub.wanted { box-shadow: 0 0 0 3px #4fc01c, 0 3px 0 #a9bdd1; }
.ing.tub.later { opacity: 0.5; filter: saturate(0.5); }
/* the first times: a finger that curls round in the ice of the pan that is needed */
.tub-hand { display: none; position: absolute; left: 50%; top: -6px; width: 24px; height: 24px; margin-left: -12px; pointer-events: none; z-index: 2; filter: drop-shadow(0 2px 1px rgba(30, 50, 80, 0.3)); }
.tub-hand::before { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; box-shadow: 0 0 0 2.5px rgba(45, 141, 255, 0.65); background: rgba(255, 255, 255, 0.5); }
.ing.tub.hand .tub-hand { display: block; animation: curl 1.1s linear infinite; }
@keyframes curl { from { transform: rotate(0deg) translateX(12px) rotate(0deg); } to { transform: rotate(360deg) translateX(12px) rotate(-360deg); } }

/* the scoop in the hand: the ball grows while the finger curls, with a meter beside it */
.ghost.spoon-ghost { left: -27px; top: -24px; width: 72px; height: 72px; }
.ghost.spoon-ghost > svg:first-child { transform: none; }
.spoon-ghost .sp-ball { transform-box: fill-box; transform-origin: 50% 85%; transform: scale(calc(0.12 + 0.88 * var(--p, 0))); }
.sp-meter { position: absolute; right: -14px; top: -16px; width: 32px !important; height: 32px !important; transform: rotate(-90deg) !important; }
.sp-meter circle { fill: rgba(255, 255, 255, 0.92); stroke: #d6e4f2; stroke-width: 5; }
.sp-meter .sp-fill { fill: none; stroke: #2d8dff; stroke-linecap: round; stroke-dasharray: calc(var(--p, 0) * 100) 100; }
.spoon-ghost.full .sp-meter { opacity: 0; transition: opacity 0.2s ease; }
.spoon-ghost.full > svg:first-child { animation: pop-in 0.2s ease; }
.ghost.tool-ghost { left: -28px; top: -40px; width: 56px; height: 56px; }
.ghost.tool-ghost svg { transform: rotate(-15deg); transition: transform 0.15s ease; }
.tool-ghost.sprinkles svg { transform: rotate(160deg); }
.tool-ghost.sauce.squeeze svg { transform: rotate(180deg) scale(0.9, 1.05); }
.tool-ghost.sauce.squeeze::after { content: ""; position: absolute; left: 50%; top: 92%; width: 5px; height: 26px; margin-left: -2.5px; border-radius: 3px; background: #5a2f14; }
.sprinkle-fall { position: fixed; z-index: 130; width: 6px; height: 2.5px; border-radius: 2px; pointer-events: none; transform: rotate(var(--r, 0deg)); animation: sprinkle-fall 0.6s ease-in forwards; }
@keyframes sprinkle-fall { to { transform: translateY(46px) rotate(var(--r, 0deg)); opacity: 0.2; } }

/* the dessert in a bubble or on a bonnetje: the coupe or the cone with its balls in order */
.ice-order { display: flex; justify-content: center; line-height: 0; }
.ice-order svg { display: block; width: auto; height: 4.2rem; }
.ice-order .sc.done { opacity: 0.28; }
.customer.ice .bubble { background: #f2faff; box-shadow: 0 0 0 3px #8fd3ff, 0 3px 0 var(--cream-dark); }
.customer.ice .bubble::after { border-top-color: #f2faff; }
.app:not(.coop) .customer.ice { cursor: pointer; }
.app:not(.coop) .customer.ice .bubble { animation: ask 0.8s ease-in-out infinite alternate; }
.take.ice-take svg { width: auto; height: 34px; }
.ticket.ice-ticket { background: #f2faff repeating-linear-gradient(transparent 0 15px, rgba(45, 141, 255, 0.07) 15px 16px); }
.ticket.ice-ticket .ice-order svg { height: 3.6rem; }
@media (min-width: 700px) and (min-height: 600px) { .ice-order svg { height: 4.6rem; } .ticket.ice-ticket .ice-order svg { height: 3.8rem; } }

/* a dessert on a plate: on the pass, in the hand, being eaten at the table */
.pl-ice { position: absolute; left: 50%; bottom: 36%; width: 56%; line-height: 0; transform: translateX(-50%); pointer-events: none; }
.pl-ice svg { display: block; width: 100%; height: auto; overflow: visible; }
.tb-plate .pl-ice { bottom: 42%; width: 66%; transform: translateX(-50%) scaleY(1.786); transform-origin: 50% 100%; }
.pass-pz.lifted > .pl-ice { opacity: 0.3; }
.plate-ghost > .pl-ice { transform: translateX(-50%); }
.pass-pz.melting .pl-ice svg { animation: ice-sag 1.2s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.frost { position: absolute; inset: 0; pointer-events: none; }
.frost i { position: absolute; width: 7px; height: 7px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.4s ease-in-out infinite alternate; }
.frost i:nth-child(1) { left: 18%; top: 12%; } .frost i:nth-child(2) { right: 16%; top: 30%; animation-delay: 0.5s; } .frost i:nth-child(3) { left: 30%; top: 46%; animation-delay: 0.9s; }
.pass-pz.melting .frost, .pass-pz.melted .frost { display: none; }
@keyframes twinkle { from { opacity: 0.2; transform: scale(0.6); } to { opacity: 1; transform: scale(1.1); } }
/* in the album */
.ice-photo { display: flex; justify-content: center; line-height: 0; }
.ice-photo svg { display: block; width: auto; max-width: 100%; height: auto; }

/* the dessert on the notepad: a cone shows which ball goes where (1 at the bottom) */
.np-tile.np-order .np-n { min-width: 22px; background: #2d8dff; }
.np-tile.np-ice .np-ico svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ice-stage, .ice-cup .sc.plop, .ice-cup.melting .ice-svg, .ice-tab.want, .ice-tab.alert::after, .serve.ice-ready, .ing.tub.hand .tub-hand, .spoon-ghost.full > svg:first-child,
  .app:not(.coop) .customer.ice .bubble, .pass-pz.melting .pl-ice svg, .frost i, .sprinkle-fall { animation: none !important; }
  .ing.tub.hand .tub-hand { transform: translateX(8px); }
}
@media (max-height: 500px), (max-width: 400px) { .np-tile.np-ice .np-name { font-size: 0.66rem; } }
/* a tablet: a bigger tab */
@media (min-width: 700px) and (min-height: 700px) {
  .ice-tab { min-width: 74px; min-height: 72px; padding: 5px 10px 6px; border-radius: 20px; font-size: 0.95rem; }
  .ice-tab-ico { height: 42px; }
}

/* ---------- Samen spelen on a phone: both halves on one screen, nothing to scroll ----------
   Portrait (max 600px wide): the game is exactly 100dvh high. The ober's half takes what it needs (a compact dining
   room, the tables in one row); the bakker's half takes the rest: the bonnetjes in one row that scrolls sideways, the
   counter with the board as big as the height allows (the side buttons share it, the hint lies over the board), and
   the ingredients or the freezer in one row that scrolls sideways. All text stays at 13px or more. */
@media (orientation: portrait) and (max-width: 600px) {
  .app.coop { height: 100dvh; gap: 4px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); }
  .app.coop > .topbar { flex: none; }
  .app.coop .status { padding: 4px 10px 5px; }
  .app.coop .status .sub { font-size: 0.82rem; line-height: 1.2; }
  .app.coop > .half { flex: none; min-height: 0; margin-top: 9px; padding: 13px 5px 5px; gap: 5px; border-radius: 24px; }
  .app.coop > .half-baker { flex: 1 1 0; }
  .app.coop .role-tag { top: -11px; left: 14px; padding: 0 12px 0 2px; }
  .app.coop .tag-face svg { width: 22px; }
  .app.coop .tag-text { line-height: 1.4; }
  .app.coop .tag-text b { font-size: 0.9rem; }
  .app.coop .tag-text small { font-size: 0.82rem; }
}
/* two players on a phone: the bonnetje being made shows the finished pizza or dessert itself (game.js, .ex-ticket) */
.ticket-ex { display: none; }
.app.ex-ticket .ticket:not(.ice-ticket) { grid-template-columns: auto auto minmax(0, 1fr); }
.app.ex-ticket .ticket .ticket-ex { display: grid; place-items: center; grid-column: 2; grid-row: 1 / 3; width: 54px; height: 54px; align-self: center; container-type: size; line-height: 0; }
.app.ex-ticket .ticket .ticket-ex > svg { width: 100%; height: 100%; overflow: visible; }
.app.ex-ticket .ticket .ticket-ex .ex-num { display: none; }
/* alone: in the wolkje of the order being made, beside what is asked */
.app.ex-ticket .customer:not(.ice) .bubble { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; }
.app.ex-ticket .customer .ticket-ex { display: block; flex: none; width: 52px; height: 52px; line-height: 0; }
.app.ex-ticket .customer .ticket-ex > svg { width: 100%; height: 100%; overflow: visible; }
.app.ex-ticket .ticket:not(.ice-ticket) :is(.bubble, .patience) { grid-column: 3; }
/* the same on a phone on its side (in the side columns of .side-bars): the bonnetjes, the counter and the tray */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  /* the bonnetjes: one row of slips, the flag and the face beside the order (on one line) */
  .app.coop .tickets { flex: none; min-height: 58px; display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; align-items: stretch;
    gap: 5px; padding: 8px 4px 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .app.coop .tickets::-webkit-scrollbar { display: none; }
  .app.coop .tickets:has(> .tickets-empty) { display: flex; align-items: center; }
  .app.coop .tickets-empty { flex: 1; font-size: 0.82rem; line-height: 1.25; }
  .app.coop .ticket { scroll-snap-align: start; min-width: 88px; min-height: 46px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    align-items: center; column-gap: 5px; padding: 3px 7px 4px 4px; }
  .app.coop .ticket-head { grid-column: 1; grid-row: 1 / 3; gap: 1px; align-self: center; }
  .app.coop .ticket-face svg { width: 20px; }
  .app.coop .ticket .tno.flag svg { width: 19px; height: auto; }
  .app.coop .ticket .bubble { grid-column: 2; grid-row: 1; padding: 0; }
  .app.coop .ticket .patience { grid-column: 2; grid-row: 2; height: 5px; margin-top: 3px; }
  .app.coop .ticket .order, .app.coop .ticket .order.many { flex-wrap: nowrap; font-size: 1rem; gap: 0 2px; }
  .app.coop .ticket .who { font-size: 0.82rem; margin: 0 0 1px; white-space: nowrap; }
  .app.coop .ticket .who small, .app.coop .ticket .who svg { display: none; }
  .app.coop .ticket .req { margin-top: 1px; gap: 4px; }
  .app.coop .ticket .hh, .app.coop .ticket .fo { width: 40px; height: 40px; }
  .app.coop .ticket .hh { padding: 4px 3px; }
  .app.coop .ticket .hh span, .app.coop .ticket .fo span[data-role="eye"] { width: 12px; height: 12px; }
  .app.coop .ticket .fo span[data-role="mouth"] { width: 10px; height: 10px; }
  .app.coop .ticket.ice-ticket .ice-order svg { height: 2.6rem; }
  .app.coop .ticket .price { font-size: 0.82rem; margin: 0; }
  .app.coop .ticket.racked::after { top: -8px; right: 6px; font-size: 0.82rem; line-height: 1.2; }

  /* the counter: the side buttons the full height, the board in the middle as big as the room allows */
  .app.coop .counter { flex: 1 1 0; min-height: 0; container-type: size; grid-template-columns: 60px minmax(0, 1fr) 60px; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; gap: 3px 6px; padding: 5px 6px; }
  .app.coop .counter > .side-col, .app.coop .counter > .oven-col { grid-row: 1 / 3; align-self: stretch; justify-content: center; gap: 5px; min-height: 0; }
  .app.coop .counter > .step { grid-column: 2; }
  .app.coop .side-btn, .app.coop .side-col:has(.pantry:not([hidden])) .side-btn, .app.coop .oven-col .side-btn.oven, .app.coop .oven-col.two .oven, .serve.in-col {
    flex: 1 1 0; height: auto; min-height: 44px; max-height: 70px; border-radius: 16px; }
  .app.coop .side-btn.undo, .app.coop .side-col:has(.pantry:not([hidden])) .side-btn.undo, .app.coop .side-col .side-btn.pantry { max-height: 56px; }
  .app.coop .side-btn i[data-art], .app.coop .side-col:has(.pantry:not([hidden])) .side-btn i[data-art] { width: 24px; height: 24px; }
  .app.coop .side-btn span, .app.coop .side-col:has(.pantry:not([hidden])) .side-btn span, .app.coop .side-btn.pantry span { font-size: 0.82rem; letter-spacing: -0.03em; }
  .serve.in-col { font-size: 0.82rem; line-height: 1.05; padding: 2px; gap: 0; }
  .serve.in-col svg { width: 20px; height: 20px; }
  /* two ovens: two small buttons, each with its name and its bar */
  .app.coop .oven-col.two .oven { gap: 2px; padding: 2px; }
  .app.coop .oven-col.two .oven i[data-art], .app.coop .oven-col.two .oven:not([data-state="empty"]) .oven-pz { display: none; }
  .app.coop .oven-col.two .oven span.oven-label { font-size: 0.82rem; }
  .app.coop .oven-col.two .oven-bar { height: 9px; }
  .app.coop .peel { width: min(100%, 100cqh - 56px); max-width: none; align-self: center; }
  /* a small board keeps clear of the Toetje tab in its corner: it moves right, into the room next to the tab */
  .app.coop .counter > .peel { justify-self: end; margin-right: max(0px, (100% - 100cqh + 56px - 54px) / 2); }
  .app.coop .counter > .pick { align-self: stretch; }
  /* the hint lies over the bottom of the board; under the board only the meter (and Verder or Klaar!) */
  .app.coop .step { position: relative; gap: 0; min-height: 0; }
  .app.coop .step-text { position: absolute; left: 50%; bottom: calc(100% + 2px); z-index: 6; width: max-content; max-width: 100%; padding: 2px 10px; border-radius: 12px;
    background: rgba(255, 250, 240, 0.88); box-shadow: 0 2px 0 rgba(150, 100, 50, 0.18); font-size: 0.86rem; line-height: 1.2; transform: translateX(-50%); pointer-events: none; }
  .app.coop .step-text:empty { display: none; }
  .app.coop .meter-row { min-height: 44px; gap: 6px; }
  .app.coop .meter { height: 12px; }
  .app.coop .btn.step-next { min-height: 44px; padding: 4px 12px; font-size: 0.95rem; }
  .app.coop .ice-tab { min-width: 50px; min-height: 50px; padding: 2px 5px 3px; font-size: 0.82rem; }
  .app.coop .ice-tab-ico { height: 24px; }

  /* the ingredients and the freezer: one row that scrolls sideways (a finger that goes along the row scrolls it) */
  .app.coop .dock { flex: none; gap: 0; }
  .app.coop .tray { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; gap: 5px; padding: 5px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .app.coop .tray::-webkit-scrollbar { display: none; }
  .app.playing.coop .tray { touch-action: pan-x; }
  .app.coop .tray .ing { min-width: 60px; padding: 3px 6px 3px; border-radius: 14px; }
  .app.coop .tray .ing .ico { width: 28px; height: 28px; }
  .app.coop .tray .ing .name, .app.coop .tray[data-rows="2"] .ing .name { display: block; max-width: none; font-size: 0.82rem; line-height: 1.15; white-space: nowrap; }
  .app.coop .tray .ing .stock { height: 4px; margin-top: 1px; }
  .app.coop .tray .ing .count { font-size: 0.875rem; }
  .app.coop .ing.empty .empty-tag { font-size: 0.82rem; }

  /* kitchen news at the top of the counter, so the hint at the bottom of the board stays readable */
  .app.coop .counter:not(:has(#oven-stage:not([hidden]))) > .toasts { top: 4px; bottom: auto; flex-direction: column; }
  .app.coop .counter:not(:has(#oven-stage:not([hidden]))) > .toasts > .small { transform-origin: 50% 0; }
  .app.coop .counter > .toasts { width: max-content; max-width: calc(100% - 8px); gap: 4px; }
  .app.coop .counter > .toasts > .toast, .app.coop .counter > .toasts > .review { font-size: 0.9rem; line-height: 1.2; padding: 4px 12px; max-width: 100%; white-space: normal; text-align: center; }

  /* the ober's labels, the notepad's names and numbers: never under 13px */
  .app.coop .pass-head b, .app.coop .pass-head small, .app.coop .sink, .app.coop .tb-pay small, .app.coop .say-bub { font-size: 0.82rem; }
  .app.coop .np-name, .app.coop .np-tile.np-ice .np-name { font-size: 0.82rem; line-height: 1.05; }
  .app.coop .np-n { min-width: 22px; height: 19px; font-size: 0.82rem; line-height: 19px; }
}
@media (orientation: portrait) and (max-width: 600px) {
  /* the dining room, compact: a low wall (door, pass, dish tub) and small tables in one row */
  .app.coop .dining:not([hidden]) { flex: none; }
  .app.coop .dn-wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 58px; gap: 6px; padding: 4px 6px 0; border-bottom-width: 7px; }
  .app.coop .dn-wall::after { bottom: -7px; }
  .app.coop .door { min-height: 46px; }
  .app.coop .door-art { width: 34px; }
  .app.coop .door-q .customer { width: 44px; min-height: 44px; justify-content: flex-end; }
  .app.coop .door-q .customer .face { width: 32px; }
  .app.coop .door-q .customer.vip .face { width: 38px; }
  .app.coop .door-q .customer > .patience { width: 34px; height: 6px; }
  .app.coop .pass { gap: 4px; padding: 3px 5px 5px; }
  .app.coop .pass-slot { width: min(100%, 46px); min-width: 44px; }
  .app.coop .pass-head b { font-size: 0.82rem; }
  .app.coop .pass-head small { font-size: 0.82rem; max-width: 4.6em; }
  .app.coop .sink { min-height: 46px; padding: 2px 2px 3px; margin-bottom: 3px; font-size: 0.82rem; }
  .app.coop .sink-art { width: 34px; }
  .app.coop .tables { gap: 4px; padding: 2px 6px 4px; }
  .app.coop .tb-top { max-width: 100px; aspect-ratio: auto; height: 48px; }
  .app.coop .tb-seat { min-height: 30px; }
  .app.coop .tb .face { width: 32px; }
  .app.coop .tb-seat .customer { gap: 2px; }
  .app.coop .tb-seat .customer .face { margin-bottom: -15px; }
  .app.coop .tb-seat .customer > .patience { height: 5px; }
  .app.coop .tb .bubble { padding: 3px 3px 4px; border-radius: 13px; }
  .app.coop .tb .bubble::after { bottom: -6px; margin-left: -6px; border-width: 6px; }
  .app.coop .tb .order { font-size: 0.95rem; }
  .app.coop .tb .order.many { font-size: 0.88rem; }
  .app.coop .tb .ice-order svg { height: 2.1rem; }
  .app.coop .tb .take { line-height: 1.05; }
  .app.coop .tb .take svg { width: 24px; height: 24px; }
  .app.coop .tb .take.ice-take svg { width: auto; height: 24px; }
  .app.coop .tb .hh, .app.coop .tb .fo { width: 46px; height: 46px; }
  .app.coop .tb .hh { padding: 4px 3px; }
  .app.coop .tb .hh span, .app.coop .tb .fo span[data-role="eye"] { width: 14px; height: 14px; }
  .app.coop .tb .fo span[data-role="mouth"] { width: 11px; height: 11px; }
  .app.coop .tb .req { margin-top: 2px; gap: 4px; }
  .app.coop .tb .price { margin-top: 0; font-size: 0.82rem; }
  .app.coop .tb-pay small, .app.coop .say-bub { font-size: 0.82rem; }

  /* the notepad over the compact half: the header one row of buttons, the tiles as big as the rest allows */
  .app.coop .notepad:not([hidden]) { gap: 4px; padding: 6px 6px 5px; }
  .app.coop .np-who { flex-direction: row; align-items: center; gap: 2px; }
  .app.coop .np-face svg { width: 28px; }
  .app.coop .np-later, .app.coop .np-btn { min-height: 46px; }
  .app.coop .np-later { min-width: 52px; font-size: 0.86rem; }
  .app.coop .np-btn { font-size: 0.86rem; }
  .app.coop .np-btn svg { width: 24px; height: 24px; }
  .app.coop .np-done { font-size: 1rem; }
  .app.coop .np-bubble { padding: 3px 4px 4px; }
  .app.coop .np-bubble .order { font-size: 1.1rem; }
  .app.coop .np-bubble .order.many { font-size: 0.95rem; }
  .app.coop .np-bubble .ice-order svg { height: 2.3rem; }
  .app.coop .np-grid { grid-auto-rows: minmax(46px, 1fr); align-content: stretch; }
  .app.coop .np-add { padding: 2px 2px 2px; }
  .app.coop .np-ico { width: 26px; height: 26px; }
  .app.coop .np-name, .app.coop .np-tile.np-ice .np-name { font-size: 0.82rem; line-height: 1.05; }
  .app.coop .np-n { min-width: 22px; height: 19px; font-size: 0.82rem; line-height: 19px; }
  .app.coop .np-say { font-size: 0.9rem; }
}
/* a tall phone in portrait: the room left over goes to bigger tables, guests and bonnetjes (the board still grows) */
@media (orientation: portrait) and (max-width: 600px) and (min-height: 760px) {
  .app.coop .door { min-height: 54px; }
  .app.coop .door-art { width: 40px; }
  .app.coop .door-q .customer .face { width: 36px; }
  .app.coop .pass-slot { width: min(100%, 54px); }
  .app.coop .sink { min-height: 54px; }
  .app.coop .sink-art { width: 42px; }
  .app.coop .tables { gap: 6px; padding: 4px 8px 6px; }
  .app.coop .tb-top { max-width: 112px; height: 58px; }
  .app.coop .tb .face { width: 38px; }
  .app.coop .tb .order { font-size: 1.1rem; }
  .app.coop .tb .order.many { font-size: 1rem; }
  .app.coop .tb .ice-order svg { height: 2.6rem; }
  .app.coop .ticket { min-height: 52px; }
  .app.coop .ticket .order, .app.coop .ticket .order.many { font-size: 1.15rem; }
  .app.coop .ticket-face svg { width: 24px; }
  .app.coop .ticket .tno.flag svg { width: 22px; }
  .app.coop .ticket.ice-ticket .ice-order svg { height: 2.9rem; }
  .app.coop .tray .ing .ico { width: 32px; height: 32px; }
}
/* a short phone in portrait (an iPhone SE): the orders at the tables on one line, the ingredients without their names */
@media (orientation: portrait) and (max-width: 600px) and (max-height: 700px) {
  .app.coop .tb .order, .app.coop .tb .order.many { font-size: 0.82rem; }
  .app.coop .tb .ice-order svg { height: 1.9rem; }
  .app.coop .tb-top { height: 44px; }
  .app.coop .dn-wall { padding-top: 3px; }
  .app.coop .pass { padding: 2px 4px 3px; }
  .app.coop .ticket.ice-ticket .ice-order svg { height: 2.2rem; }
  .app.coop > .half { margin-top: 8px; padding-top: 11px; padding-bottom: 4px; }
  .app.coop .role-tag { top: -10px; }
  .app.coop .tag-face svg { width: 20px; }
  .app.coop .tag-text { line-height: 1.3; }
  .app.coop .counter { padding: 3px 5px; }
  .app.coop .counter > .side-col, .app.coop .counter > .oven-col { gap: 4px; }
}
@media (orientation: portrait) and (max-width: 600px) and (max-height: 620px) {
  .app.coop .tray .ing .name, .app.coop .tray[data-rows="2"] .ing .name { display: none; }
  .app.coop .tray .ing { min-width: 50px; min-height: 46px; justify-content: center; }
  .app.coop .tray .ing .ico { width: 30px; height: 30px; }
}
/* Samen on a phone: the pantry's jars stay 44px to tap and their names 13px (or only the pictures, when it is small) */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .app.coop .pantry-name { font-size: 0.82rem; }
  .app.coop .pantry-item { min-height: 46px; }
  @container (max-height: 230px) {
    .app.coop .pantry-name { font-size: 0.82rem; }
    .app.coop .pantry-item { min-height: 44px; }
  }
  @container (max-height: 170px) {
    .app.coop .pantry-name { display: none; }
  }
  #pay.inline .pay-actions .btn { min-height: 46px; }
}
/* the payment on a phone: the three sums in one row and the buttons on one line; on its side within the ober's half */
@media (orientation: landscape) and (max-height: 500px) {
  #pay.inline { bottom: 0; min-height: 0; padding: 4px; }
  #pay.inline .sheet { height: 100%; justify-content: space-between; }
}
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 600px) {
  #pay.inline .sheet { gap: 4px; padding: 8px 10px; }
  #pay.inline .pay-head { gap: 8px; }
  #pay.inline .pay-face svg { width: 34px; }
  #pay.inline .pay-say { padding: 5px 10px; font-size: 0.95rem; line-height: 1.2; }
  #pay.inline .pay-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 5px; }
  #pay.inline .pay-sum > div { padding: 3px 5px; line-height: 1.15; }
  #pay.inline .pay-sum .label { font-size: 0.82rem; }
  #pay.inline .pay-sum b { font-size: 1.1rem; }
  #pay.inline .pay-sum .due { grid-column: auto; }
  #pay.inline .pay-sum .due b { font-size: 1.3rem; }
  #pay.inline .change { min-height: 46px; }
  #pay.inline .coins { gap: 6px; }
  #pay.inline .pay-actions { flex-wrap: nowrap; gap: 6px; }
  #pay.inline .pay-actions .btn { padding: 6px 10px; font-size: 0.95rem; }
}

/* ---------- Samen in portrait (a phone or a tablet): the ober and the bakker sit opposite each other ----------
   The half at the top is turned round, so the child at the top edge reads it the right way up (its news, notepad,
   drinks bar and payment turn with it). The wall between the dining room and the kitchen is the strip in the middle
   (game.js moves it there): the door, the pass and the dish tub, turned for the ober. The bakker puts the plates on the
   pass from one side, the ober takes them from the other; each plate has its table's flag for both sides. After
   "Wissel van kant" (.sides) the bakker's half is the turned one at the top and the ober's is at the bottom. */
.app:not(.facing) > .dn-wall { display: none; }
.pass-pz .flag-b { display: none; }
/* what a player at the top holds comes up turned round for them, around their finger (game.js, ghostAt) */
.ghost.flip { transform-origin: 32px 36px; }
.ghost.spoon-ghost.flip { transform-origin: 27px 24px; }
.ghost.tool-ghost.flip { transform-origin: 28px 40px; }
.ghost.plate-ghost.flip { transform-origin: 36px 36px; }
.ghost.guest-ghost.flip { transform-origin: 30px 44px; }
.ghost.cloth-ghost.flip { transform-origin: 30px 26px; }
.sprinkle-fall.up { animation-name: sprinkle-rise; }
@keyframes sprinkle-rise { to { transform: translateY(-46px) rotate(var(--r, 0deg)); opacity: 0.2; } }

/* Wissel van kant: a small round button on the pass, where both players reach it */
.side-swap { display: none; }
.app.coop .side-swap { position: absolute; z-index: 3; right: 6px; top: 50%; width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--pz-dn-wood1, #a86a35), 0 3px 0 rgba(60, 30, 10, 0.35); color: var(--purple, #7a4fd0);
  font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1; cursor: pointer; transform: translateY(-50%); touch-action: manipulation; }
.app.coop .side-swap svg { display: block; width: 20px; height: 20px; }
.app.coop .side-swap span { color: var(--ink); }
.app.coop .side-swap:active { box-shadow: 0 0 0 3px var(--pz-dn-wood1, #a86a35), 0 1px 0 rgba(60, 30, 10, 0.35); translate: 0 2px; }
.app.coop .side-swap:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.app.coop:not(.facing) .pass { padding-right: 60px; }
.pass-plus { font-size: 1em; }

@media (orientation: portrait) {
  .app.coop.facing > .topbar { order: 0; }
  .app.coop.facing > .half.turned { order: 1; z-index: 2; transform: rotate(180deg); margin-top: 0; margin-bottom: 8px; }
  .app.facing > .dn-wall { order: 2; }
  .app.coop.facing > .half:not(.turned) { order: 3; z-index: 1; }
  .app.facing > .dn-wall { flex: none; margin: 0 2px; border-radius: 18px 18px 14px 14px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 -3px 0 var(--pz-dn-wood0, #e2ad73) inset; }
  .app.facing:not(.sides) > .dn-wall { transform: rotate(180deg); }
  .app.facing > .dn-wall::after { left: 10px; right: 10px; }
  .app.facing .pass-pz .flag-b { display: inline-block; position: absolute; left: -10px; bottom: -14px; right: auto; top: auto; rotate: 180deg; pointer-events: none; }
  /* the pass in the strip: Wissel at its start (the right way up for the player below), "+1" in its corner */
  .app.facing .pass-head { width: 48px; visibility: hidden; }
  .app.facing .pass-head small { position: absolute; right: 4px; top: 2px; z-index: 2; max-width: none; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 0; line-height: 1.3; visibility: visible; opacity: 1; }
  .app.facing .pass-head small .pass-plus { font-size: 0.82rem; }
  .app.coop.facing .side-swap { left: 5px; right: auto; }
  .app.coop.facing:not(.sides) .side-swap { transform: translateY(-50%) rotate(180deg); }
  /* the payment, the notepad and the drinks bar grow from the ober's own edge towards the middle, never off the screen */
  .app.facing #pay.inline { top: auto; bottom: 0; }
  /* the ober's news stays inside the half (at its own edge it would stick out of the screen) */
  .app.coop.facing .toasts-ober { bottom: 4px; }
  .app.coop.facing .notepad:not([hidden]), .app.coop.facing .drink:not([hidden]) { top: auto; height: max(100%, 196px); }
  /* without the wall the dining room is only the floor: the flags on the bubbles may stick out over its edge */
  .app.facing .dining:not([hidden]) { overflow: visible; }
  .app.facing .tables { border-radius: 22px; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .app.coop.facing > .half.turned { margin-bottom: 9px; }
  .app.coop.facing > .half:not(.turned) { margin-top: 9px; }
}
@media (orientation: portrait) and (max-width: 600px) and (max-height: 700px) {
  .app.coop.facing > .half.turned { margin-bottom: 8px; }
  .app.coop.facing > .half:not(.turned) { margin-top: 8px; }
}
/* side by side (landscape): after Wissel van kant the ober's half is on the left and the bakker's on the right */
@media (orientation: landscape) and (min-width: 700px) {
  .app.coop.sides { grid-template-areas: "top top" "ober baker"; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body .app.side-bars.coop.sides { grid-template-columns: var(--side-w) minmax(0, 1fr) minmax(0, 1.25fr) var(--side-w); }
  body .app.side-bars.coop.sides > .half-ober { grid-column: 2; }
  body .app.side-bars.coop.sides > .half-baker { grid-column: 3; }
}
/* a tablet (or a computer): the bonnetjes in one row too (a second row would take the board's room), a size bigger */
@media (min-width: 601px) and (min-height: 501px) {
  .app.coop .tickets { flex: none; min-height: 84px; display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; align-items: stretch;
    gap: 8px; padding: 10px 8px 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .app.coop .tickets::-webkit-scrollbar { display: none; }
  .app.coop .tickets:has(> .tickets-empty) { display: flex; align-items: center; }
  .app.coop .tickets-empty { flex: 1; }
  .app.coop .ticket { scroll-snap-align: start; min-width: 130px; min-height: 66px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    align-items: center; column-gap: 8px; padding: 6px 12px 6px 8px; }
  .app.coop .ticket-head { grid-column: 1; grid-row: 1 / 3; flex-direction: column; justify-content: center; gap: 2px; align-self: center; }
  .app.coop .ticket .bubble { grid-column: 2; grid-row: 1; padding: 0; }
  .app.coop .ticket .patience { grid-column: 2; grid-row: 2; height: 7px; margin-top: 4px; }
  .app.coop .ticket .order, .app.coop .ticket .order.many { flex-wrap: nowrap; font-size: 1.55rem; gap: 0 3px; }
  .app.coop .ticket .who { white-space: nowrap; }
  .app.coop .ticket .hh, .app.coop .ticket .fo { width: 58px; height: 58px; }
  .app.coop .ticket .hh span, .app.coop .ticket .fo span[data-role="eye"] { width: 16px; height: 16px; }
  .app.coop .ticket .fo span[data-role="mouth"] { width: 13px; height: 13px; }
  .app.coop .ticket.ice-ticket .ice-order svg { height: 3.2rem; }
  .app.coop .ticket.racked::after { top: -10px; right: 10px; font-size: 0.85rem; }
}
/* …and the side buttons share the counter's whole height, so the two ovens and "Op de balie" always fit beside the board */
@media (orientation: portrait) and (min-width: 601px) {
  .app.coop .counter > .side-col, .app.coop .counter > .oven-col { grid-row: 1 / 3; align-self: stretch; justify-content: center; min-height: 0; }
  .app.coop .counter > .step { grid-column: 2; }
  .app.coop .side-btn, .app.coop .side-col:has(.pantry:not([hidden])) .side-btn, .app.coop .oven-col .side-btn.oven, .app.coop .oven-col.two .oven, .app.coop .serve.in-col {
    flex: 0 1 84px; height: auto; min-height: 50px; }
  .app.coop .side-btn.undo, .app.coop .side-col:has(.pantry:not([hidden])) .side-btn.undo, .app.coop .side-col .side-btn.pantry { flex-basis: 64px; }
}
/* a tablet or a computer together: the small labels at 13px too */
@media (min-width: 601px) and (min-height: 501px) {
  .app.coop .side-btn.pantry span, .app.coop .ing .name, .app.coop .ing .count, .app.coop .tag-text small, .app.coop .sink, .app.coop .pass-head b, .app.coop .pass-head small, .app.coop .np-name,
  .app.coop .oven-col.two .oven span.oven-label, .app.coop .ice-tab, .app.coop .say-bub, .app.coop .tb-pay small, .app.coop .who { font-size: 0.82rem; }
}

/* ---------- A big screen: the whole window, everything a size bigger ----------
   The arcade's desktop query (assets/style.css: html.desktop, --ui from 1 at 1280×720 to 1.6 at 2560×1440); a big
   tablet on its side matches it too. Phones and smaller tablets never do, so nothing here changes them. The game's own
   parts are sized with calc(… * var(--ui)) and kept above the arcade's floors (labels 18px, buttons 56px, tiles 96px);
   the cards over the game (payment, day card, shop, album, recipe book, Samen setup) are scaled as a whole (zoom, like
   the arcade's own sheets), so inside them sizes are plain px and rem. With a mouse (html.mouse) small key caps
   (.kcap) show the keyboard on the buttons and the mouse's words (.desk-words) replace the finger's (.touch-words). */
.kcap, .desk-words { display: none; }
@media (min-width: 1100px) and (min-height: 650px) {
  :root { --u: var(--ui, 1); }
  html.mouse .touch-words { display: none; }
  html.mouse .desk-words { display: inline; }
  /* the key caps: a little cream key in the corner of a button */
  html:not(.mouse) .kcap { display: none; }
  .kcap {
    position: absolute; right: calc(6px * var(--u)); top: calc(6px * var(--u)); z-index: 2; display: inline-grid; place-items: center;
    min-width: calc(24px * var(--u)); height: calc(24px * var(--u)); padding: 0 calc(5px * var(--u)); border-radius: calc(7px * var(--u));
    background: #fffaf0; box-shadow: inset 0 -2px 0 #e3d3b3, 0 0 0 1.5px #d8c3a5; color: #6f5f86;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: max(14px, calc(0.8rem * var(--u))); font-weight: 700; line-height: 1; text-shadow: none; letter-spacing: 0; pointer-events: none;
  }
  .serve, .btn.step-next { position: relative; }
  .btn > .kcap, .serve > .kcap { right: calc(12px * var(--u)); top: 50%; transform: translateY(-50%); }
  .os-btn > .kcap, .np-later > .kcap { position: static; margin-left: calc(6px * var(--u)); }
  .ride-arrow > .kcap { right: 50%; top: auto; bottom: calc(-12px * var(--u)); min-width: calc(34px * var(--u)); height: calc(28px * var(--u)); font-size: max(18px, calc(1rem * var(--u))); transform: translateX(50%); }
  .ing > .kcap { right: auto; left: calc(6px * var(--u)); }
  .ing.empty > .kcap { opacity: 0.5; }
  .ride-ready kbd { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.6em; padding: 0 0.3em; border-radius: 0.3em; background: #fffaf0;
    box-shadow: inset 0 -2px 0 #e3d3b3, 0 0 0 1.5px #d8c3a5; color: var(--ink); font-size: 0.9em; font-weight: 700; line-height: 1; vertical-align: 0.05em; }

  /* the mouse: a grip on what is dragged, a hand on what is clicked, a lift under the pointer */
  .ing, .pass-pz, .door-q .customer, .tb[data-state="dirty"] .tb-top, .dk-puddle { cursor: grab; }
  :is(.ing, .pass-pz, .door-q .customer, .tb[data-state="dirty"] .tb-top, .dk-puddle):active { cursor: grabbing; }
  .os-pz.can-turn, .os-pz.can-turn .os-turn { cursor: ew-resize; }
  .tb[data-state="crumbs"] .tb-top { cursor: ew-resize; }
  .side-btn, .ing, .pick-btn, .ticket, .np-add, .np-btn, .np-later, .dk-tap, .ice-tab, .os-btn, .sink, .pantry-item, .ride-arrow, .album-tile, .book-tile, .buy, .place {
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
  }
  @media (hover: hover) {
    :is(.side-btn, .ing, .pick-btn, .ticket, .np-add, .np-btn, .np-later, .dk-tap, .ice-tab, .os-btn, .sink, .pantry-item, .ride-arrow, .album-tile, .book-tile, .buy, .place):hover:not(:disabled):not(:active) {
      transform: translateY(-3px); filter: brightness(1.05) drop-shadow(0 6px 6px rgba(60, 30, 110, 0.2));
    }
    .ice-tab:hover:not(:active) { transform: translateY(-3px); }
    .peel:hover:not(.paint) { filter: brightness(1.04); }
    .pass-pz:hover:not(.lifted) { transform: translateY(-3px); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3)); }
    #queue .customer.ice:hover .bubble, .app.coop #tables .customer:hover .bubble, .app.coop .door-q .customer:hover .face { filter: brightness(1.04) drop-shadow(0 5px 6px rgba(60, 30, 110, 0.25)); }
    .app.coop #tables .tb-top:hover .tb-art { filter: brightness(1.06) drop-shadow(0 4px 6px rgba(60, 30, 110, 0.25)); }
  }
  :is(.side-btn, .ing, .ticket, .pick-btn, .np-add, .dk-tap, .ice-tab, .sink, .pantry-item, .tb-top):focus-visible { outline: 3px solid var(--pink-dark); outline-offset: 3px; }

  /* the top bar: the pill's buttons 52px × --ui (as assets/style.css means them; its phone size comes later in that
     file and would win), the status with big stars and the day in 18px or more */
  :is(#start, body) #app .topbar .top-actions > .icon-btn { width: calc(52px * var(--u)); height: calc(52px * var(--u)); font-size: calc(1.4rem * var(--u)); }
  :is(#start, body) #app .topbar .top-actions > .icon-btn .theme-pick-icon { width: calc(36px * var(--u)); height: calc(36px * var(--u)); }
  :is(#start, body) #app .topbar .top-actions > .icon-btn .theme-pick-icon svg, :is(#start, body) #app .topbar .top-actions > .icon-btn.fs-pick svg { width: calc(25px * var(--u)); height: calc(25px * var(--u)); }
  #app .status { max-width: calc(360px * var(--u)); padding: calc(6px * var(--u)) calc(18px * var(--u)) calc(8px * var(--u)); }
  #app .status-top { gap: calc(10px * var(--u)); }
  #app .stars svg { width: calc(30px * var(--u)); height: calc(30px * var(--u)); }
  #app .status .sub { font-size: max(18px, calc(1rem * var(--u))); }
  #app .coin-count { font-size: max(22px, calc(1.15rem * var(--u))); padding: 2px calc(10px * var(--u)) 2px 4px; }
  #app .coin-count svg { width: calc(22px * var(--u)); height: calc(22px * var(--u)); }
  #app .status-title { font-size: max(22px, calc(1.3rem * var(--u))); line-height: 1.3; }
  #app .album-count, #start .album-count { min-width: calc(26px * var(--u)); font-size: max(16px, calc(0.85rem * var(--u))); }

  /* ---------- the start screen (the two columns are the arcade's .start-two-col): big modes, tiles and Spelen! ---------- */
  .start-card h1 { font-size: calc(4rem * var(--u)); }
  .start-sign { min-width: calc(230px * var(--u)); padding-top: calc(28px * var(--u)); }
  .start-sign::before { height: calc(30px * var(--u)); background-size: auto calc(30px * var(--u)); }
  .start-sign span { margin-top: calc(-17px * var(--u)); font-size: calc(1.25rem * var(--u)); }
  :is(#start, body) .start-two-col > .start-best { justify-self: center; }
  /* the chips in one row under both columns (the tablet rule keeps them 780px wide) */
  #start .start-card.start-two-col > .start-utils { width: 100%; justify-self: center; }
  :is(#start, body) .start-two-col > .start-modes, :is(#start, body) .start-two-col > .start-tiles { align-self: center; }
  .start-best { font-size: max(22px, calc(1.3rem * var(--u))); padding: calc(7px * var(--u)) calc(24px * var(--u)); }
  .start-best i[data-art] svg { width: calc(26px * var(--u)); height: calc(26px * var(--u)); }
  .start-opt.start-modes { padding: calc(10px * var(--u)); border-radius: calc(26px * var(--u)); }
  .choice.seg { gap: calc(10px * var(--u)); }
  .choice.seg button { min-height: calc(112px * var(--u)); gap: calc(8px * var(--u)); border-radius: calc(20px * var(--u)); font-size: max(18px, calc(1.1rem * var(--u))); }
  .seg-icon, .seg-icon svg { height: calc(44px * var(--u)); }
  .seg-icon svg { width: calc(44px * var(--u)); }
  .samen-faces svg { width: calc(36px * var(--u)); }
  .start-tiles { gap: calc(12px * var(--u)); }
  .start-tile { max-width: none; min-height: calc(112px * var(--u)); gap: calc(6px * var(--u)); border-radius: calc(22px * var(--u)); font-size: max(18px, calc(1rem * var(--u))); }
  .start-tile-icon svg { width: calc(46px * var(--u)); height: calc(46px * var(--u)); }
  .start-tile .album-count { font-size: max(16px, calc(0.85rem * var(--u))); min-width: calc(26px * var(--u)); }
  .start-actions { width: min(calc(400px * var(--u)), 100%); gap: calc(16px * var(--u)); }
  .btn.start-play { font-size: calc(2.2rem * var(--u)); padding-top: calc(20px * var(--u)); padding-bottom: calc(20px * var(--u)); border-radius: calc(26px * var(--u)); }
  .btn.resume-btn { padding-top: calc(12px * var(--u)); padding-bottom: calc(13px * var(--u)); font-size: calc(1.35rem * var(--u)); }
  .resume-btn small { font-size: max(16px, calc(0.95rem * var(--u))); }

  /* ---------- the cards over the game, scaled as a whole; the shop, the album and the recipe book in two panes ---------- */
  .modal:not(.inline) > .sheet { zoom: var(--u); width: min(560px, calc((100vw - 40px) / var(--u))); max-height: calc((100dvh - 40px) / var(--u)); padding: 20px; gap: 12px; }
  .modal .label, .modal .album-sub, .modal .album-date, .modal .book-status, .modal .shop-text span, .modal .owned-tag, .modal .team-role span, .modal .team-role small,
  .modal .team-opt-text small, .modal .note-text, .modal .shop-intro { font-size: max(18px, 1rem); }
  .modal .pay-actions .btn, .modal .album-head .btn, .modal .shop-head .btn, .modal .book-nav .btn { min-height: 56px; font-size: 1.15rem; }
  .modal .choice button { min-height: 56px; height: auto; font-size: 1.05rem; }
  /* the payment (alone): the coins big, the card most of the height */
  #pay:not(.inline) > .sheet { width: min(600px, calc((100vw - 40px) / var(--u))); min-height: min(calc(72dvh / var(--u)), 640px); justify-content: center; gap: 16px; }
  #pay:not(.inline) .pay-face svg { width: 72px; height: auto; }
  #pay:not(.inline) .pay-say { font-size: 1.2rem; }
  #pay:not(.inline) .pay-sum b { font-size: 1.8rem; }
  #pay:not(.inline) .pay-sum .due b { font-size: 2.3rem; }
  #pay:not(.inline) .coins { gap: 14px; }
  #pay:not(.inline) .coin { width: 66px; height: 66px; font-size: 1.3rem; }
  #pay:not(.inline) .note { width: 96px; height: 56px; font-size: 1.3rem; }
  #pay:not(.inline) .change { min-height: 80px; }
  #pay:not(.inline) .change .coin { width: 50px; height: 50px; font-size: 1.05rem; }
  #pay:not(.inline) .change .note { width: 72px; height: 42px; font-size: 1.05rem; }
  .change:empty::before { content: "Klik op munten en briefjes"; font-size: max(18px, 1rem); }
  /* the day card and the end: the pizzeria and the praise, big */
  #note > .sheet { width: min(640px, calc((100vw - 40px) / var(--u))); min-height: min(calc(72dvh / var(--u)), 660px); justify-content: center; gap: 14px; }
  #note .note-scene { height: 190px; }
  #note .note-scene .note-chef svg { width: 84px; height: auto; }
  #note .note-title { font-size: 2.1rem; }
  #note .note-text { font-size: 1.1rem; }
  #note .note-stars svg { width: 34px; height: 34px; }
  #note .pay-actions .btn { min-height: 60px; font-size: 1.2rem; }
  /* Samen spelen: the setup */
  #team > .sheet { width: min(800px, calc((100vw - 40px) / var(--u))); }
  .team-face svg { width: 60px; height: auto; }
  .team-colours { grid-template-columns: repeat(4, 52px); }
  .modal .swatch { width: 52px; height: 52px; }
  .modal .swatch::before { width: 38px; height: 38px; }
  /* the shop: the pizzeria, its name and its colour on the left; the tabs and what is for sale on the right */
  #shop > .shop-sheet { width: min(1060px, calc((100vw - 40px) / var(--u))); height: min(780px, calc((100dvh - 40px) / var(--u))); padding-top: 18px; }
  .shop-head { padding: 0 20px 12px; }
  .shop-body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "scene tabs" "scene list" "me list" "book list"; align-items: start; gap: 14px 22px; overflow: hidden; padding: 4px 20px 18px; }
  .shop-body > .shopfront.mini { grid-area: scene; height: 200px; }
  .shop-body > .shop-me { grid-area: me; }
  .shop-body > .tabs { grid-area: tabs; position: static; margin: 0; }
  .shop-body > .shop-book { grid-area: book; justify-self: start; }
  .shop-body > .shop-list { grid-area: list; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid;
    align-content: start; gap: 12px; padding: 4px 6px 64px; }
  .shop-body > .shop-list[data-tab="versiering"] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .shop-colours { grid-template-columns: repeat(4, 52px); justify-content: start; gap: 8px 14px; }
  /* what is for sale: a card on the shelf, the picture over the name and the price */
  .shop-body > .shop-list > .shop-item { flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px 12px 12px; text-align: center; }
  .shop-body > .shop-list > .shop-item .shop-text { flex: none; align-items: center; }
  .shop-body > .shop-list > .shop-item :is(.buy, .owned-tag, .reg-fav) { align-self: stretch; max-width: none; justify-content: center; text-align: center; }
  .shop-body > .shop-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .shop-body > .shop-list > .shop-intro { grid-column: 1 / -1; }
  .shop-item .shop-pic { width: 70px; height: 70px; }
  .shop-item .shop-pic svg { max-width: 60px; max-height: 62px; }
  .shop-tile .shop-pic { height: 96px; }
  .shop-tile .shop-pic svg { max-height: 84px; max-width: 96px; }
  .shop-tile b { font-size: max(18px, 1rem); }
  .buy, .place { min-height: 56px; min-width: 96px; }
  .buy small { font-size: 1rem; }
  .note-shop .coin-n, .note-text tr.coin-row td { font-size: 1.1rem; }
  .reg-fav span { width: 30px; height: 30px; }
  .reg-fav small { font-size: 1rem; }
  .tabs button { min-height: 56px; font-size: 1.1rem; }
  .shop-name input, .album-name input { min-height: 56px; }
  /* the album and the recipe book: the grid on the left, the open photo or recipe on the right */
  #album > .album-sheet, #book > .book-sheet { width: min(1060px, calc((100vw - 40px) / var(--u))); }
  .album-head .note-title { font-size: 1.8rem; }
  .album-grid, .book-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .album-pic, .book-pic-s { max-width: 150px; }
  .album-tile-name, .book-tile-name { font-size: 1.1rem; }
  .book-tile-ings svg { width: 30px; height: 30px; }
  .book-ing .count { font-size: 1rem; }
  .book-nav .btn { min-width: 72px; }
  .modal .scene-sign { font-size: 1.15rem; }
  .book-ing-row { font-size: 1.1rem; padding: 4px 14px 4px 6px; }
  .book-ing-row svg { width: 42px; height: 42px; }
  :is(#album, #book).two-pane > .sheet { height: min(780px, calc((100dvh - 40px) / var(--u))); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head" "list detail"; overflow: hidden; gap: 14px 24px; }
  :is(#album, #book).two-pane .album-head { grid-area: head; }
  #album.two-pane .album-list, #book.two-pane .book-list { grid-area: list; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 14px; }
  #album.two-pane .album-detail, #book.two-pane .book-page { grid-area: detail; min-height: 0; overflow-y: auto; justify-content: center; padding: 14px; border-radius: 24px; background: var(--cream-2); }
  #album.two-pane #album-back, #book.two-pane #book-back { display: none; }
  #album.two-pane .album-big { width: min(330px, 100%); }
  .book-pic { width: min(280px, 100%); }
  .book-name { font-size: 2rem; }
  .album-tile.on { box-shadow: 0 0 0 4px var(--pink), 0 4px 0 var(--cream-dark); }
  .book-tile.on { box-shadow: inset 4px 0 0 #f0dcc0, 0 0 0 4px var(--pink), 0 4px 0 var(--cream-dark); }
  #book.peek > .book-sheet { width: min(600px, calc((100vw - 40px) / var(--u))); }

  /* ---------- the scooter ride: a wide street, big arrows with their keys ---------- */
  .ride { gap: calc(10px * var(--u)); padding: calc(12px * var(--u)) clamp(16px, 2vw, 40px); }
  .ride-top, .ride-stage { max-width: min(100%, calc((100dvh - 110px * var(--u)) * 1.45)); }
  .ride-tickets { gap: calc(8px * var(--u)); }
  .ride-ticket { max-width: calc(150px * var(--u)); height: calc(60px * var(--u)); border-radius: calc(16px * var(--u)); }
  .ride-ticket > svg { width: calc(36px * var(--u)); height: auto; }
  .ride-ticket b { font-size: calc(1.7rem * var(--u)); }
  .ride-coins { font-size: max(22px, calc(1.3rem * var(--u))); }
  .ride-coins svg { width: calc(26px * var(--u)); height: auto; }
  .ride-skip { min-height: 56px; font-size: calc(1.1rem * var(--u)); }
  .ride-stage, .ride-stage canvas { border-radius: calc(26px * var(--u)); }
  .ride-arrow { bottom: calc(28px * var(--u)); width: calc(92px * var(--u)); height: calc(92px * var(--u)); font-size: calc(2.6rem * var(--u)); }
  .ride-arrow.left { left: calc(24px * var(--u)); }
  .ride-arrow.right { right: calc(24px * var(--u)); }
  .ride-ready { width: min(calc(460px * var(--u)), calc(100% - 28px)); padding: calc(22px * var(--u)); gap: calc(10px * var(--u)); }
  .ride-ready h2 { font-size: calc(2rem * var(--u)); }
  .ride-ready p { font-size: max(18px, calc(1.05rem * var(--u))); }
  .ride-swipe { font-size: calc(2rem * var(--u)); }
  .ride-swipe i[data-art] { width: calc(60px * var(--u)); height: calc(60px * var(--u)); }
  .ride-go { font-size: calc(2.2rem * var(--u)); }
  .ride-msg { font-size: max(18px, calc(1.15rem * var(--u))); top: calc(34px * var(--u)); }
  .ride-bar { height: calc(10px * var(--u)); }

  /* news and reviews: never under 18px */
  .toast, .review { font-size: max(18px, calc(1.05rem * var(--u))); }
  .review-text { font-size: max(18px, calc(0.95rem * var(--u))); }
  .review-face svg { width: calc(46px * var(--u)); height: auto; }
  .review-stars svg { width: calc(20px * var(--u)); height: calc(20px * var(--u)); }
  .toast.special, .toast.intro, .toast.recipe, .review, .photo-toast { max-width: min(92vw, calc(460px * var(--u))); }
}

/* ---------- The game on a computer in landscape ----------
   Alone: three columns the height of the window. Left the status over the queue (each guest at their own bit of
   counter, with big bubbles), in the middle the counter at the full height (the board as big as the height allows, the
   hint under it in 20px or more, the meter, then Weg, Oeps and Voorraad on the left and the oven(s) on the right),
   right the sound and menu buttons over the ingredients (a grid of big tiles) and Serveren.
   Together: the two halves side by side, each half of the width and the full height. The bakker: the bonnetjes over
   the counter (as above), the ovens, the ingredients and "Op de balie" in a column on the dining room's side. The ober:
   the dining room, with the pass as a hatch on the kitchen's side (game.js moves it there, placeWall), so the plates go
   from one half to the other across the middle; the four tables in two rows. */
@media (min-width: 1100px) and (min-height: 650px) and (orientation: landscape) {
  /* alone */
  #app:not(.coop) {
    max-width: none; height: 100dvh;
    grid-template-columns: minmax(calc(310px * var(--u)), 22fr) minmax(0, 56fr) minmax(calc(270px * var(--u)), 22fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: calc(12px * var(--u)) clamp(16px, 1.4vw, 34px);
    padding: calc(12px * var(--u)) clamp(16px, 1.4vw, 40px) max(calc(14px * var(--u)), env(safe-area-inset-bottom));
  }
  #app:not(.coop) > .topbar { display: contents; }
  #app:not(.coop) > .topbar > .back-link { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; }
  #app:not(.coop) > .topbar > .status { grid-column: 1; grid-row: 1; justify-self: end; align-self: center; flex: none; width: max-content; max-width: calc(100% - 70px * var(--u)); padding-left: calc(12px * var(--u)); padding-right: calc(12px * var(--u)); }
  #app:not(.coop) .stars svg { width: calc(27px * var(--u)); height: calc(27px * var(--u)); }
  #app:not(.coop) > .topbar > .top-actions { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  #app:not(.coop) .shopfront { grid-column: 1; grid-row: 2; }
  #app:not(.coop) .counter { grid-column: 2; grid-row: 1 / -1; }
  #app:not(.coop) .dock { grid-column: 3; grid-row: 2; gap: calc(12px * var(--u)); }

  /* the counter, alone and together: the board, the hint, the meter, the buttons */
  #app .counter {
    min-height: 0; container-type: size; align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto auto auto;
    gap: calc(8px * var(--u)) calc(12px * var(--u)); padding: calc(14px * var(--u)) calc(16px * var(--u));
  }
  #app .counter > .peel { grid-column: 1 / -1; grid-row: 1; align-self: center; justify-self: center; width: min(100%, 100cqh - 196px * var(--u)); max-width: none; margin: 0; }
  #app .counter > .pick, #app .counter > .ice-stage { grid-column: 1 / -1; grid-row: 1; }
  #app .counter > .ice-tab { grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: start; }
  #app .counter:is(.oven-on, .prep-on) > .ice-tab { visibility: hidden; }
  #app .counter > .step { display: contents; }
  #app .counter .step-text { grid-column: 1 / -1; grid-row: 2; font-size: max(20px, calc(1.3rem * var(--u))); }
  #app .counter .meter-row { grid-column: 1 / -1; grid-row: 3; min-height: max(56px, calc(56px * var(--u))); gap: calc(14px * var(--u)); }
  #app .counter .meter-row .meter, #app .counter .meter { flex: 0 1 calc(460px * var(--u)); width: auto; height: calc(20px * var(--u)); }
  #app .counter.ice-on .meter { display: none; }
  #app .counter .btn.step-next { min-height: max(56px, calc(54px * var(--u))); padding: 0 calc(74px * var(--u)) 0 calc(24px * var(--u)); font-size: max(20px, calc(1.15rem * var(--u))); }
  #app .counter > .side-col { grid-column: 1; grid-row: 4; flex-direction: row; gap: calc(10px * var(--u)); }
  #app .counter > .oven-col, #app .dock > .oven-col { grid-column: 3; grid-row: 4; flex-direction: row; justify-content: flex-end; gap: calc(10px * var(--u)); }
  #app .counter > :is(.oven-stage, .prep-stage) { grid-column: 1 / -1; grid-row: 1 / 4; }
  #app .counter:is(.oven-on, .prep-on) > .side-col { visibility: hidden; }
  /* Weg, Oeps, Voorraad and the oven: big labelled buttons */
  #app .side-btn, #app .side-btn.undo, #app .side-btn.pantry, #app .side-col:has(.pantry:not([hidden])) .side-btn, #app .oven-col .side-btn.oven {
    flex: none; width: calc(92px * var(--u)); height: max(72px, calc(84px * var(--u))); min-height: 0; max-height: none; gap: calc(4px * var(--u)); border-radius: calc(20px * var(--u)); }
  #app .side-btn i[data-art], #app .side-btn.undo i[data-art], #app .side-btn.pantry i[data-art], #app .side-col:has(.pantry:not([hidden])) .side-btn i[data-art] { width: calc(38px * var(--u)); height: calc(38px * var(--u)); }
  #app .side-btn span, #app .side-btn.pantry span, #app .side-col:has(.pantry:not([hidden])) .side-btn span, #app .oven-col.two .oven span.oven-label { font-size: max(18px, calc(1rem * var(--u))); letter-spacing: 0; }
  #app .oven-col .side-btn.oven { width: calc(132px * var(--u)); }
  #app .oven-col.two .side-btn.oven { width: calc(108px * var(--u)); padding: calc(5px * var(--u)); gap: calc(3px * var(--u)); }
  #app .oven-col.two .oven:not([data-state="empty"]) .oven-pz { width: calc(40px * var(--u)); height: calc(40px * var(--u)); }
  #app .oven-col.two .oven-bar { height: calc(12px * var(--u)); }
  #app .side-btn.pantry.alert::after { width: calc(14px * var(--u)); height: calc(14px * var(--u)); }
  #app .ice-tab { min-width: calc(96px * var(--u)); min-height: max(72px, calc(84px * var(--u))); padding: calc(6px * var(--u)) calc(12px * var(--u)); border-radius: calc(20px * var(--u)); font-size: max(18px, calc(1rem * var(--u))); }
  #app .ice-tab-ico { height: calc(44px * var(--u)); }
  #app .pick { gap: calc(20px * var(--u)); }
  #app .pick-btn { max-width: calc(190px * var(--u)); border-radius: calc(28px * var(--u)); font-size: max(20px, calc(1.2rem * var(--u))); }
  #app .pick-btn svg { max-width: calc(110px * var(--u)); }
  #app .peel-hint { font-size: max(18px, calc(1rem * var(--u))); }
  #app .tap-text { font-size: max(20px, calc(1.1rem * var(--u))); }
  /* news over the top of the board, the review under the oven's hint while the oven is open */
  #app .counter > .toasts { top: auto; bottom: calc(196px * var(--u)); gap: calc(8px * var(--u)); }
  #app .counter:has(#oven-stage:not([hidden])) > .toasts, #app .counter:has(#prep-stage:not([hidden])) > .toasts { top: calc(78px * var(--u)); bottom: auto; flex-direction: column; }
  #app .counter:has(#oven-stage:not([hidden])) > .toasts > .small, #app .counter:has(#prep-stage:not([hidden])) > .toasts > .small { transform-origin: 50% 0; }
  /* the oven, the pantry, the cutting board and the grater over the board */
  #app .os-top { min-height: calc(64px * var(--u)); gap: calc(10px * var(--u)); padding: calc(8px * var(--u)) calc(10px * var(--u)) 0; }
  #app .os-hint, #app #prep-hint { font-size: max(20px, calc(1.35rem * var(--u))); }
  #app .os-btn { min-height: 56px; padding: calc(6px * var(--u)) calc(16px * var(--u)); border-radius: calc(16px * var(--u)); font-size: max(18px, calc(1rem * var(--u))); }
  #app .os-turn { padding: calc(2px * var(--u)) calc(14px * var(--u)); font-size: max(18px, calc(1rem * var(--u))); }
  #app .os-plus { font-size: max(18px, calc(1.1rem * var(--u))); }
  #app .os-bar { height: max(14px, 5%); }
  #app .pantry-shelves { grid-template-columns: repeat(auto-fill, minmax(calc(110px * var(--u)), 1fr)); gap: calc(10px * var(--u)); padding: calc(12px * var(--u)); }
  #app .pantry-item { min-height: calc(110px * var(--u)); gap: calc(4px * var(--u)); border-radius: calc(16px * var(--u)); }
  #app .pantry-ico { width: calc(54px * var(--u)); height: calc(54px * var(--u)); }
  #app .pantry-name { font-size: max(18px, calc(0.95rem * var(--u))); }
  #app .pantry-item .stock { height: calc(6px * var(--u)); }
  /* the dessert board */
  #app .ice-none { font-size: max(20px, calc(1.2rem * var(--u))); }

  /* the queue alone: each guest fills their bit of counter, with a big face and a big bubble */
  #app:not(.coop) .shopfront > .queue, #app:not(.coop) .shopfront > .queue[data-slots="2"] { gap: calc(14px * var(--u)); padding: calc(44px * var(--u)) calc(14px * var(--u)) calc(10px * var(--u)); }
  #app:not(.coop) #scene .scene-awning { height: calc(36px * var(--u)); background-size: auto calc(36px * var(--u)); }
  #app:not(.coop) #scene .scene-sign { top: calc(5px * var(--u)); font-size: max(18px, calc(1.05rem * var(--u))); padding: calc(3px * var(--u)) calc(18px * var(--u)) calc(4px * var(--u)); }
  #app:not(.coop) #scene .scene-wall { background-position: 0 calc(36px * var(--u)), 0 0; }
  #app:not(.coop) .customer { gap: calc(8px * var(--u)); padding-bottom: calc(8px * var(--u)); }
  #app:not(.coop) .customer::after { height: calc(18px * var(--u)); }
  #app:not(.coop) .shopfront .face { width: calc(76px * var(--u)); }
  #app:not(.coop) .shopfront .customer.vip .face { width: calc(90px * var(--u)); }
  #app:not(.coop) .shopfront > .queue[data-slots="2"] .face { width: calc(100px * var(--u)); }
  #app:not(.coop) .shopfront > .queue[data-slots="2"] .customer.vip .face { width: calc(116px * var(--u)); }
  #app:not(.coop) .glam { transform: scale(calc(1.2 * var(--u))); transform-origin: 50% 100%; }
  #app:not(.coop) .bubble { padding: calc(9px * var(--u)) calc(10px * var(--u)) calc(10px * var(--u)); border-radius: calc(22px * var(--u)); }
  #app:not(.coop) .bubble::after { bottom: calc(-12px * var(--u)); margin-left: calc(-12px * var(--u)); border-width: calc(12px * var(--u)); border-bottom-width: 0; }
  #app:not(.coop) .order { font-size: calc(2.15rem * var(--u)); gap: calc(4px * var(--u)) calc(6px * var(--u)); }
  #app:not(.coop) .order.many { font-size: calc(1.7rem * var(--u)); }
  #app:not(.coop) .queue[data-slots="2"] .order { font-size: calc(2.6rem * var(--u)); }
  #app:not(.coop) .queue[data-slots="2"] .order.many { font-size: calc(2rem * var(--u)); }
  #app:not(.coop) .count { font-size: max(16px, 0.42em); }
  #app:not(.coop) .hh, #app:not(.coop) .fo { width: calc(110px * var(--u)); height: calc(110px * var(--u)); }
  #app:not(.coop) .hh { padding: calc(14px * var(--u)) calc(12px * var(--u)); }
  #app:not(.coop) .hh span, #app:not(.coop) .fo span[data-role="eye"] { width: calc(34px * var(--u)); height: calc(34px * var(--u)); }
  #app:not(.coop) .fo span[data-role="mouth"] { width: calc(28px * var(--u)); height: calc(28px * var(--u)); }
  #app:not(.coop) .req { gap: calc(12px * var(--u)); margin-top: calc(8px * var(--u)); }
  #app:not(.coop) .size-badge i.s { width: calc(16px * var(--u)); height: calc(16px * var(--u)); }
  #app:not(.coop) .size-badge i.l { width: calc(28px * var(--u)); height: calc(28px * var(--u)); }
  #app:not(.coop) .sauce-dot { width: calc(26px * var(--u)); height: calc(26px * var(--u)); }
  #app:not(.coop) .price { font-size: max(18px, calc(1.1rem * var(--u))); }
  #app:not(.coop) .who { font-size: max(18px, calc(1.05rem * var(--u))); margin-bottom: calc(6px * var(--u)); }
  #app:not(.coop) .who svg { width: calc(22px * var(--u)); height: calc(22px * var(--u)); }
  #app:not(.coop) .who-book { width: calc(42px * var(--u)); height: calc(42px * var(--u)); top: calc(-26px * var(--u)); }
  #app:not(.coop) .patience { height: calc(16px * var(--u)); }
  #app:not(.coop) .ice-order svg { height: calc(5rem * var(--u)); }
  #app:not(.coop) .queue[data-slots="2"] .ice-order svg { height: calc(6.5rem * var(--u)); }
  #app:not(.coop) .shopfront > .queue .empty-slot { font-size: max(18px, calc(1rem * var(--u))); border-radius: calc(22px * var(--u)); }
  /* Vrij bakken: the banner in the column */
  #app:not(.coop) .free-banner { gap: calc(14px * var(--u)); padding: calc(16px * var(--u)); }
  #app:not(.coop) .free-chef svg { width: calc(90px * var(--u)); height: auto; }
  #app:not(.coop) .free-text { font-size: max(18px, calc(1rem * var(--u))); }
  #app:not(.coop) .free-text b { font-size: calc(1.4rem * var(--u)); }
  #app:not(.coop) .free-banner .album-btn { min-height: 56px; font-size: calc(1.1rem * var(--u)); }

  /* the ingredients: a grid of big tiles from the top, Serveren big under them */
  #app .dock .tray:not([hidden]) { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(max(110px, calc(92px * var(--u))), 1fr)); grid-auto-rows: minmax(max(110px, calc(104px * var(--u))), calc(150px * var(--u)));
    align-content: start; gap: calc(10px * var(--u)); padding: calc(12px * var(--u)); }
  #app .dock .ing { justify-content: center; gap: calc(4px * var(--u)); padding: calc(10px * var(--u)) calc(4px * var(--u)) calc(8px * var(--u)); border-radius: calc(20px * var(--u)); }
  #app .dock .ing .ico { width: calc(56px * var(--u)); height: calc(56px * var(--u)); }
  #app .dock .ing .name { font-size: max(18px, calc(0.95rem * var(--u))); }
  #app .dock .ing .count { font-size: max(16px, calc(0.85rem * var(--u))); right: calc(6px * var(--u)); top: calc(6px * var(--u)); }
  #app .dock .ing .stock { height: calc(6px * var(--u)); }
  #app .dock .ing.empty .empty-tag { font-size: max(18px, calc(0.95rem * var(--u))); }
  #app .dock .ing.nope::before { width: calc(56px * var(--u)); height: calc(56px * var(--u)); }
  #app .dock .serve { order: 2; flex: none; min-height: max(64px, calc(72px * var(--u))); padding: calc(12px * var(--u)) calc(48px * var(--u)) calc(12px * var(--u)) calc(14px * var(--u)); font-size: calc(1.55rem * var(--u)); white-space: nowrap; border-radius: calc(22px * var(--u)); }
  #app .dock .serve svg { width: calc(32px * var(--u)); height: calc(32px * var(--u)); }

  /* ---------- together ---------- */
  #app.coop {
    max-width: none; height: 100dvh; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    gap: calc(6px * var(--u)) clamp(14px, 1.2vw, 28px);
    padding: calc(10px * var(--u)) clamp(14px, 1.2vw, 32px) max(calc(12px * var(--u)), env(safe-area-inset-bottom));
  }
  #app.coop > .half { min-height: 0; margin-top: calc(12px * var(--u)); gap: calc(10px * var(--u)); padding: calc(22px * var(--u)) calc(10px * var(--u)) calc(10px * var(--u)); border-radius: calc(30px * var(--u)); }
  #app.coop .role-tag { left: calc(22px * var(--u)); top: calc(-16px * var(--u)); gap: calc(8px * var(--u)); padding: 2px calc(16px * var(--u)) 2px 4px; }
  #app.coop .tag-face svg { width: calc(32px * var(--u)); }
  #app.coop .tag-text b { font-size: max(18px, calc(1.05rem * var(--u))); }
  #app.coop .tag-text small { font-size: max(16px, calc(0.9rem * var(--u))); }
  /* the bakker: the bonnetjes on top, the counter, and next to it the ovens, the ingredients and Op de balie */
  #app.coop > .half-baker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(max(236px, calc(206px * var(--u))), 31%); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tickets tickets" "counter dock"; }
  #app.coop.sides > .half-baker { grid-template-columns: minmax(max(236px, calc(206px * var(--u))), 31%) minmax(0, 1fr); grid-template-areas: "tickets tickets" "dock counter"; }
  #app.coop > .half-baker > .tickets { grid-area: tickets; }
  #app.coop > .half-baker > .counter { grid-area: counter; }
  #app.coop > .half-baker > .dock { grid-area: dock; min-height: 0; display: flex; flex-direction: column; gap: calc(10px * var(--u)); }
  #app.coop .dock > .oven-col { order: 0; flex: none; justify-content: center; }
  #app.coop .dock > .tray { order: 1; }
  #app.coop .dock > .oven-col .side-btn.oven { flex: 1 1 0; width: auto; }
  #app.coop .dock .tray { grid-template-columns: repeat(auto-fill, minmax(max(96px, calc(86px * var(--u))), 1fr)); grid-auto-rows: minmax(max(96px, calc(96px * var(--u))), calc(130px * var(--u))); gap: calc(8px * var(--u)); padding: calc(10px * var(--u)); }
  #app.coop .dock .ing .ico { width: calc(46px * var(--u)); height: calc(46px * var(--u)); }
  #app.coop .dock .serve { flex-wrap: wrap; row-gap: 0; padding: calc(8px * var(--u)) calc(40px * var(--u)) calc(8px * var(--u)) calc(10px * var(--u)); font-size: calc(1.2rem * var(--u)); line-height: 1.15; white-space: normal; gap: calc(6px * var(--u)); }
  #app.coop .dock .serve svg { width: calc(28px * var(--u)); height: calc(28px * var(--u)); }
  #app.coop .dock .serve .pass-dots { gap: calc(3px * var(--u)); margin-left: 0; }
  #app.coop .counter > .side-col { grid-column: 1 / -1; justify-content: center; }
  #app.coop .tickets { min-height: calc(104px * var(--u)); gap: calc(10px * var(--u)); padding: calc(14px * var(--u)) calc(10px * var(--u)) calc(8px * var(--u)); }
  #app.coop .tickets-empty { font-size: max(18px, calc(1rem * var(--u))); }
  #app.coop .ticket { min-width: calc(160px * var(--u)); min-height: calc(84px * var(--u)); column-gap: calc(10px * var(--u)); padding: calc(8px * var(--u)) calc(14px * var(--u)) calc(8px * var(--u)) calc(10px * var(--u)); border-radius: calc(18px * var(--u)); }
  #app.coop .ticket-face svg { width: calc(34px * var(--u)); }
  #app.coop .ticket .tno.flag svg { width: calc(34px * var(--u)); }
  #app.coop .ticket .order, #app.coop .ticket .order.many { font-size: calc(1.9rem * var(--u)); }
  #app.coop .ticket .who { font-size: max(18px, calc(0.95rem * var(--u))); }
  #app.coop .ticket .price { font-size: max(18px, calc(1rem * var(--u))); }
  #app.coop .ticket .hh, #app.coop .ticket .fo { width: calc(70px * var(--u)); height: calc(70px * var(--u)); }
  #app.coop .ticket .hh span, #app.coop .ticket .fo span[data-role="eye"] { width: calc(20px * var(--u)); height: calc(20px * var(--u)); }
  #app.coop .ticket .fo span[data-role="mouth"] { width: calc(16px * var(--u)); height: calc(16px * var(--u)); }
  #app.coop .ticket.ice-ticket .ice-order svg { height: calc(4rem * var(--u)); }
  #app.coop .ticket .patience { height: calc(8px * var(--u)); }
  #app.coop .ticket.racked::after { top: calc(-12px * var(--u)); font-size: max(16px, calc(0.9rem * var(--u))); }
  #app.coop .peel { width: min(100%, 100cqh - 196px * var(--u)); max-width: none; }
  #app.coop .dock .serve .pass-dots i { width: calc(12px * var(--u)); height: calc(12px * var(--u)); }
  /* the ober: the dining room (the pass stands between the halves, at the end of this file) */
  #app.coop > .half-ober { align-self: stretch; }
  #app.coop .dining:not([hidden]) { flex: 1 1 auto; min-height: 0; border-radius: calc(24px * var(--u)); }
  #app.coop .dining > .dn-wall { grid-template-columns: minmax(0, 1fr) calc(100px * var(--u)); gap: calc(10px * var(--u)); padding: calc(12px * var(--u)) calc(16px * var(--u)) 0; }
  #app.coop .dining > .tables { min-height: 0; }
  #app.coop .door { min-height: calc(112px * var(--u)); }
  #app.coop .door-art { width: calc(74px * var(--u)); }
  #app.coop .door-q .customer { width: calc(70px * var(--u)); }
  #app.coop .door-q .customer .face { width: calc(62px * var(--u)); }
  #app.coop .door-q .customer.vip .face { width: calc(72px * var(--u)); }
  #app.coop .door-q .customer > .patience { width: calc(56px * var(--u)); height: calc(9px * var(--u)); }
  #app.coop .sink { min-height: calc(96px * var(--u)); font-size: max(18px, calc(0.95rem * var(--u))); border-radius: calc(18px * var(--u)); }
  #app.coop .sink-art { width: calc(76px * var(--u)); }
  #app.coop .tables, #app.coop .tables[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-content: space-evenly; gap: calc(26px * var(--u)) calc(20px * var(--u));
    padding: calc(16px * var(--u)) 7% calc(18px * var(--u)); background-size: calc(48px * var(--u)) calc(48px * var(--u)); }
  #app.coop .tables[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app.coop .tb-top { max-width: calc(250px * var(--u)); }
  #app.coop .tb .face { width: calc(76px * var(--u)); }
  #app.coop .tb-seat .customer .face { margin-bottom: calc(-34px * var(--u)); }
  #app.coop .tb-seat .customer > .patience { height: calc(9px * var(--u)); }
  #app.coop .tb .bubble { padding: calc(8px * var(--u)) calc(8px * var(--u)) calc(9px * var(--u)); border-radius: calc(18px * var(--u)); }
  #app.coop .tb .order { font-size: calc(1.8rem * var(--u)); }
  #app.coop .tb .order.many { font-size: calc(1.45rem * var(--u)); }
  #app.coop .tb .ice-order svg { height: calc(4.4rem * var(--u)); }
  #app.coop .tb .take { font-size: max(18px, calc(0.95rem * var(--u))); }
  #app.coop .tb .take svg { width: calc(44px * var(--u)); height: calc(44px * var(--u)); }
  #app.coop .tb .take.ice-take svg { width: auto; height: calc(44px * var(--u)); }
  #app.coop .tb .hh, #app.coop .tb .fo { width: calc(84px * var(--u)); height: calc(84px * var(--u)); }
  #app.coop .tb .hh span, #app.coop .tb .fo span[data-role="eye"] { width: calc(24px * var(--u)); height: calc(24px * var(--u)); }
  #app.coop .tb .fo span[data-role="mouth"] { width: calc(20px * var(--u)); height: calc(20px * var(--u)); }
  #app.coop .tb .price, #app.coop .tb-pay small, #app.coop .say-bub, #app.coop .who { font-size: max(18px, calc(0.95rem * var(--u))); }
  #app.coop .tb-pay { font-size: max(18px, calc(1rem * var(--u))); }
  #app.coop .tb-flag svg { width: calc(44px * var(--u)); }
  #app.coop .customer .bubble .tno.flag svg { width: calc(40px * var(--u)); }
  #app.coop .customer .bubble .tno.flag { left: calc(-14px * var(--u)); top: calc(-34px * var(--u)); }
  #app.coop .drink-ask svg { width: calc(30px * var(--u)); }
  #app.coop .tb-glass { width: 15%; }
  #app.coop .toasts-ober > .toast, #app.coop .toasts-ober > .review { font-size: max(18px, calc(1rem * var(--u))); padding: calc(6px * var(--u)) calc(16px * var(--u)); max-width: min(100%, calc(460px * var(--u))); }
  #app.coop .toasts-ober .review-face svg { width: calc(40px * var(--u)); }
  /* the bakker's notes stay inside his narrow counter: a long one wraps instead of running out of the half */
  #app.coop .counter > .toasts { width: max-content; max-width: calc(100% - 16px); }
  #app.coop .counter > .toasts > :is(.toast, .review) { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
  /* the notepad, the drinks bar and the payment over the ober's half */
  #app.coop .notepad:not([hidden]) { gap: calc(8px * var(--u)) calc(10px * var(--u)); padding: calc(14px * var(--u)) calc(14px * var(--u)) calc(12px * var(--u)); background-size: 100% calc(32px * var(--u)); }
  #app.coop .np-face svg { width: calc(56px * var(--u)); }
  #app.coop .np-later, #app.coop #dk-later { min-height: max(56px, calc(56px * var(--u))); min-width: calc(80px * var(--u)); padding: 0 calc(12px * var(--u)); font-size: max(18px, calc(1rem * var(--u))); }
  #app.coop .np-btn { min-width: calc(110px * var(--u)); min-height: max(56px, calc(60px * var(--u))); font-size: max(18px, calc(1.05rem * var(--u))); border-radius: calc(18px * var(--u)); }
  #app.coop .np-btn svg { width: calc(34px * var(--u)); height: calc(34px * var(--u)); }
  #app.coop .np-done { min-width: calc(140px * var(--u)); font-size: max(22px, calc(1.35rem * var(--u))); }
  #app.coop .np-bubble { padding: calc(8px * var(--u)); }
  #app.coop .np-bubble .order { font-size: calc(2.2rem * var(--u)); }
  #app.coop .np-bubble .order.many { font-size: calc(1.7rem * var(--u)); }
  #app.coop .np-bubble .ice-order svg { height: calc(4.4rem * var(--u)); }
  #app.coop .np-bubble .price { font-size: max(18px, calc(1rem * var(--u))); }
  #app.coop .np-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(calc(96px * var(--u)), calc(150px * var(--u))); align-content: center; gap: calc(10px * var(--u)); }
  #app.coop .np-add { gap: calc(4px * var(--u)); border-radius: calc(18px * var(--u)); }
  #app.coop .np-ico { width: calc(48px * var(--u)); height: calc(48px * var(--u)); }
  #app.coop .np-name, #app.coop .np-tile.np-ice .np-name { font-size: max(18px, calc(0.9rem * var(--u))); }
  #app.coop .np-n { min-width: calc(30px * var(--u)); height: calc(24px * var(--u)); font-size: max(16px, calc(0.9rem * var(--u))); line-height: calc(24px * var(--u)); }
  #app.coop .np-minus { width: calc(34px * var(--u)); height: calc(34px * var(--u)); font-size: calc(1.4rem * var(--u)); }
  #app.coop .np-say { font-size: max(18px, calc(1.1rem * var(--u))); }
  #app.coop .np-stamp b { font-size: calc(2.6rem * var(--u)); }
  #app.coop .drink:not([hidden]) { gap: calc(12px * var(--u)); padding: calc(16px * var(--u)); }
  #app.coop .dk-face svg { width: calc(56px * var(--u)); }
  #app.coop .dk-say { font-size: max(18px, calc(1.1rem * var(--u))); padding: calc(8px * var(--u)) calc(14px * var(--u)) calc(8px * var(--u)) calc(8px * var(--u)); }
  #app.coop .dk-want svg { width: calc(32px * var(--u)); }
  #app.coop .dk-taps { gap: calc(12px * var(--u)); }
  #app.coop .dk-tap { min-height: calc(120px * var(--u)); border-radius: calc(20px * var(--u)); font-size: max(18px, calc(1.05rem * var(--u))); }
  #app.coop .dk-bar { --gh: min(64cqh, calc(220px * var(--u))); height: min(100%, calc(340px * var(--u))); }
  #app.coop .dk-meter { width: calc(18px * var(--u)); }
  #app.coop .dk-mstar svg { width: calc(22px * var(--u)); height: calc(22px * var(--u)); }
  #pay.inline .sheet { gap: calc(10px * var(--u)); padding: calc(16px * var(--u)); font-size: calc(1rem * var(--u)); }
  #pay.inline .pay-face svg { width: calc(60px * var(--u)); }
  #pay.inline .pay-say { font-size: max(18px, calc(1.1rem * var(--u))); }
  #pay.inline .label { font-size: max(18px, calc(0.95rem * var(--u))); }
  #pay.inline .pay-sum b { font-size: calc(1.6rem * var(--u)); }
  #pay.inline .pay-sum .due b { font-size: calc(2rem * var(--u)); }
  #pay.inline .coin { width: calc(60px * var(--u)); height: calc(60px * var(--u)); font-size: calc(1.2rem * var(--u)); }
  #pay.inline .note { width: calc(88px * var(--u)); height: calc(52px * var(--u)); font-size: calc(1.2rem * var(--u)); }
  #pay.inline .change { min-height: calc(70px * var(--u)); }
  #pay.inline .pay-actions .btn { min-height: 56px; font-size: max(18px, calc(1.05rem * var(--u))); }
}
@media (min-width: 1100px) and (min-height: 650px) and (prefers-reduced-motion: reduce) {
  :is(.side-btn, .ing, .pick-btn, .ticket, .np-add, .np-btn, .np-later, .dk-tap, .ice-tab, .os-btn, .sink, .pantry-item, .ride-arrow, .album-tile, .book-tile, .buy, .place, .pass-pz):hover { transform: none !important; }
}

/* ---------- The pass between the kitchen and the dining room (Samen side by side: a tablet on its side, a computer) ----------
   As in a real restaurant: a steel counter of its own that stands on the border of the two halves (game.js placeWall
   puts it between them), with a warm lamp over the plates and the bell. The bakker's "Op de balie" puts a plate on
   it, the ober drags it from there to a table; Wissel van kant lies on it, where both reach it. Its sizes follow the
   height it gets (--u is the arcade's UI scale on a big screen, 1 on a tablet). */
.pass-bell { display: none; }
@media (orientation: landscape) and (min-width: 900px) and (min-height: 501px) {
  /* the kitchen gets a little more of the width than the dining room, which has room to spare around its tables */
  #app.coop:has(> .pass) { grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 0.85fr); grid-template-areas: "top top top" "baker pass ober"; column-gap: 0; }
  #app.coop.sides:has(> .pass) { grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr); grid-template-areas: "top top top" "ober pass baker"; }
  #app.coop:has(> .pass) .dining > .dn-wall { grid-template-columns: minmax(0, 1fr) calc(100px * var(--u, 0.8)); }
  #app.coop > .pass {
    --pu: clamp(1, tan(atan2(100dvh - 110px, 560px)), 1.6); /* the counter grows with the height it stands in */
    grid-area: pass; align-self: stretch; z-index: 3; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(14px * var(--pu));
    width: calc(124px * var(--pu)); margin: calc(16px * var(--pu)) -6px calc(8px * var(--pu));
    padding: calc(58px * var(--pu)) calc(12px * var(--pu)) calc(14px * var(--pu)); border-radius: calc(24px * var(--pu));
    /* brushed steel in a frame of wood */
    background: linear-gradient(90deg, #aeb8c9, #e9eef5 22%, #f7f9fc 50%, #e3e8f0 78%, #a9b4c6);
    box-shadow: inset 0 0 0 calc(7px * var(--pu)) var(--pz-dn-wood1, #a86a35), inset 0 0 0 calc(9px * var(--pu)) rgba(0, 0, 0, 0.12),
      0 calc(5px * var(--pu)) 0 rgba(90, 50, 20, 0.35), 0 calc(10px * var(--pu)) calc(18px * var(--pu)) rgba(40, 20, 60, 0.25);
  }
  /* the heat lamp over the plates: a hood with a glowing rim... */
  #app.coop > .pass::before {
    content: ""; position: absolute; z-index: 2; left: 50%; top: calc(-8px * var(--pu)); width: 72%; height: calc(36px * var(--pu)); translate: -50% 0;
    border-radius: calc(12px * var(--pu)) calc(12px * var(--pu)) 45% 45% / calc(12px * var(--pu)) calc(12px * var(--pu)) 70% 70%;
    background: linear-gradient(180deg, #d94a3d, #9e2a22 68%, #ffe08a 70%, #ffb13d);
    box-shadow: 0 calc(6px * var(--pu)) calc(20px * var(--pu)) calc(3px * var(--pu)) rgba(255, 186, 72, 0.8), inset 0 calc(3px * var(--pu)) 0 rgba(255, 255, 255, 0.3);
    pointer-events: none;
  }
  /* ...and its warm light falling on the steel */
  #app.coop > .pass::after {
    content: ""; position: absolute; z-index: 0; left: calc(7px * var(--pu)); right: calc(7px * var(--pu)); top: calc(20px * var(--pu)); height: calc(300px * var(--pu)); max-height: 75%;
    background: radial-gradient(ellipse 80% 100% at 50% 0, rgba(255, 196, 90, 0.7), rgba(255, 176, 64, 0.32) 50%, transparent 80%);
    clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); pointer-events: none;
  }
  #app.coop > .pass > * { position: relative; z-index: 1; }
  #app.coop > .pass .pass-head { position: relative; flex-direction: row; gap: calc(6px * var(--pu)); color: var(--ink); }
  #app.coop > .pass .pass-head b { font-size: max(18px, calc(1.1rem * var(--pu))); }
  #app.coop > .pass .pass-head small { position: absolute; left: 50%; top: calc(100% + 2px); translate: -50% 0; width: max-content; max-width: none; padding: 0 calc(8px * var(--pu));
    border-radius: 999px; background: var(--pink); color: #fff; font-size: max(16px, calc(0.85rem * var(--pu))); opacity: 1; }
  #app.coop > .pass .pass-bell { display: inline-block; width: calc(34px * var(--pu)); line-height: 0; filter: drop-shadow(0 2px 0 rgba(90, 50, 20, 0.3)); }
  #app.coop > .pass .pass-bell svg { width: 100%; height: auto; }
  /* the plates: big, each on a little warm spot of the steel */
  #app.coop > .pass .pass-slot { flex: none; width: min(100%, calc(96px * var(--pu))); min-width: 64px; }
  #app.coop > .pass .pass-slot.empty { border-color: rgba(120, 130, 150, 0.45); background: rgba(255, 255, 255, 0.45); }
  #app.coop > .pass .pass-pz .tno.flag { right: calc(-14px * var(--pu)); top: calc(-20px * var(--pu)); }
  #app.coop > .pass .pass-pz .tno.flag svg { width: calc(42px * var(--pu)); }
  #app.coop > .pass .side-swap { position: relative; z-index: 3; top: auto; right: auto; left: auto; order: 9; margin-top: auto; width: calc(76px * var(--pu)); height: calc(76px * var(--pu));
    transform: none; font-size: max(16px, calc(0.9rem * var(--pu))); }
  #app.coop > .pass .side-swap svg { width: calc(28px * var(--pu)); height: calc(28px * var(--pu)); }
}
@media (orientation: landscape) and (min-width: 900px) and (min-height: 501px) and (prefers-reduced-motion: no-preference) {
  /* the lamp's light breathes a little */
  #app.coop > .pass::before { animation: pass-lamp 3.2s ease-in-out infinite alternate; }
  @keyframes pass-lamp { to { box-shadow: 0 calc(8px * var(--pu)) calc(28px * var(--pu)) calc(7px * var(--pu)) rgba(255, 196, 92, 0.85), inset 0 calc(3px * var(--pu)) 0 rgba(255, 255, 255, 0.35); } }
}
/* Face to face (portrait): the pass in the strip between the two players is the same counter, lying down: brushed
   steel in its wooden frame, the heat lamp over the plates, the bell on its corner, the plates at least 64px. */
@media (orientation: portrait) {
  .app.facing .pass {
    overflow: visible;
    background:
      radial-gradient(ellipse 55% 130% at 58% 0, rgba(255, 196, 90, 0.62), rgba(255, 176, 64, 0.26) 55%, transparent 80%),
      linear-gradient(180deg, #f6f8fc, #e3e8f0 55%, #b9c3d3);
    box-shadow: inset 0 0 0 4px var(--pz-dn-wood1, #a86a35), inset 0 0 0 6px rgba(0, 0, 0, 0.1), 0 3px 0 rgba(90, 50, 20, 0.35);
  }
  .app.facing .pass::before {
    content: ""; position: absolute; z-index: 2; left: 58%; top: -7px; width: 38%; height: 14px; translate: -50% 0;
    border-radius: 7px 7px 50% 50% / 7px 7px 80% 80%;
    background: linear-gradient(180deg, #d94a3d, #9e2a22 66%, #ffe08a 68%, #ffb13d);
    box-shadow: 0 4px 14px 2px rgba(255, 186, 72, 0.8); pointer-events: none;
  }
  .app.facing .pass .pass-bell { display: block; position: absolute; z-index: 3; right: -4px; bottom: -8px; width: 26px; line-height: 0; visibility: visible;
    filter: drop-shadow(0 2px 0 rgba(90, 50, 20, 0.35)); pointer-events: none; }
  .app.facing .pass .pass-bell svg { width: 100%; height: auto; }
  .app.facing .pass-slot.empty { border-color: rgba(120, 130, 150, 0.5); background: rgba(255, 255, 255, 0.4); }
}
@media (orientation: portrait) and (max-width: 600px) {
  /* on a phone the pass takes more of the wall, so two big plates fit next to Wissel */
  .app.coop.facing .dn-wall { grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr) 58px; }
  .app.coop.facing .pass-slot { width: 64px; min-width: 64px; }
}


/* ---------- Het voorbeeld: the order, drawn big in a place of its own (game.js, layoutExample) ----------
   Beside the board (.ex-side) the card fills the counter's left padding, which game.js widens; as a band (.ex-strip)
   it lies in the widened top padding, the picture on the left and what goes on it on the right. Neither ever lies over
   the orders, the board or its buttons. data-size (s, m, l) says how big the place is: the icons and labels follow.
   Ticks for what is done, a soft pulse on what comes next. */
.example {
  --exi: 30px; --exf: 0.86rem;
  position: absolute; z-index: 8; box-sizing: border-box; display: flex; align-items: stretch; gap: 4px; min-width: 0; padding: 8px;
  border-radius: 18px; background: #fff; box-shadow: 0 0 0 3px #ffd9ea, 0 4px 0 var(--cream-dark); color: var(--ink); overflow: hidden;
  container: ex / size; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.example[data-size="m"] { --exi: 34px; --exf: 0.92rem; }
.example[data-size="l"] { --exi: 38px; --exf: 1rem; }
.example[data-size="xs"] { --exi: 24px; --exf: 0.8rem; }
.example[hidden] { display: none; }
.counter.ex-side > .example { left: var(--ex-l); top: var(--ex-t); bottom: var(--ex-b); width: var(--ex-w); }
.counter.ex-strip > .example { left: var(--ex-l); right: var(--ex-r); top: var(--ex-t); height: var(--ex-h); padding: 5px 8px 5px 5px; border-radius: 16px; }
.counter.ex-side > .toasts { margin-left: var(--ex-shift); }
.ex-in { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }

.ex-head { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ex-head .tno { flex: none; line-height: 0; }
.ex-face { flex: none; width: calc(var(--exi) + 6px); line-height: 0; }
.ex-face svg { display: block; width: 100%; height: auto; }
.ex-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.ex-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pink-dark); }
.ex-who { overflow: hidden; font-size: calc(var(--exf) * 1.12); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

/* the picture: as big as the card allows */
.ex-pic { position: relative; flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.ex-pic > .ex-pizza { display: block; width: min(100cqw, 100cqh); height: auto; max-width: 360px; overflow: visible; }
.ex-ice { position: relative; width: min(100cqw, 100cqh * 100 / 120, 300px); aspect-ratio: 100 / 120; container-type: inline-size; }
.ex-ice > .ex-dessert { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 2px rgba(40, 70, 110, 0.22)); }
.ex-wait { margin: 0; padding: 6px; color: var(--muted); font-weight: 700; text-align: center; font-size: 0.95rem; }
/* the numbers on a cone, from the bottom up, ticked once that ball is on */
.ex-num { position: absolute; left: 4%; width: 17%; aspect-ratio: 1; translate: 0 -50%; display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px #c9b8e8, 0 2px 0 rgba(60, 40, 90, 0.2); font-style: normal; font-weight: 800; font-size: 10cqw; line-height: 1; color: var(--ink); }
.ex-num.done { background: #4fc01c; box-shadow: 0 0 0 2px #fff, 0 2px 0 rgba(40, 90, 20, 0.3); color: transparent; }
.ex-num.done::after { content: ""; position: absolute; left: 37%; top: 18%; width: 22%; height: 42%; border: solid #fff; border-width: 0 max(2px, 2.2cqw) max(2px, 2.2cqw) 0; rotate: 45deg; }
.ex-num.next { box-shadow: 0 0 0 3px var(--pink), 0 2px 0 rgba(60, 40, 90, 0.2); animation: ex-pulse 0.9s ease-in-out infinite alternate; }

/* what has to go on, in order */
.ex-list { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px; margin: 0; padding: 4px 2px 2px; list-style: none; }
.ex-it { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 10px 3px 3px; border-radius: 999px; background: #f6efff;
  box-shadow: inset 0 0 0 2px #e6dcf6; font-size: var(--exf); font-weight: 700; line-height: 1.1; color: var(--ink); }
.ex-ico { position: relative; flex: none; width: var(--exi); height: var(--exi); line-height: 0; }
.ex-ico:has(.count) { margin-right: 7px; }
.ex-ico > svg { display: block; width: 100%; height: 100%; }
.ex-ico .nope { position: absolute; inset: -6%; width: 112%; height: 112%; }
.ex-ico .count { right: -0.6em; top: -0.45em; font-size: 14px; }
.ex-n { position: absolute; left: -4px; bottom: -4px; min-width: 15px; height: 15px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; line-height: 15px; text-align: center; box-shadow: 0 0 0 1.5px #fff; }
.ex-lab { min-width: 0; overflow-wrap: anywhere; }
/* halve-halve: an arrow to the half it goes on */
.ex-n.ex-side { min-width: 17px; background: #2d8dff; }
.ex-n.ex-side::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 4px solid transparent; translate: -50% -50%; }
.ex-n.ex-side[data-side="L"]::before { border-right: 6px solid #fff; border-left: 0; }
.ex-n.ex-side[data-side="R"]::before { border-left: 6px solid #fff; border-right: 0; }
.ex-tick { display: none; position: absolute; left: calc(var(--exi) * 0.62); top: -5px; width: 18px; height: 18px; border-radius: 50%; background: #4fc01c; box-shadow: 0 0 0 2px #fff; }
.ex-tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
.ex-it.done { background: #e6f8da; box-shadow: inset 0 0 0 2px #b8e6a0; color: #2b6a12; }
.ex-it.done .ex-ico { opacity: 0.6; }
.ex-it.done .ex-tick { display: block; }
.ex-it.part .count { background: #ffb703; }
.ex-it.next { background: #fff0f7; box-shadow: inset 0 0 0 2px var(--pink); animation: ex-pulse 0.9s ease-in-out infinite alternate; }
.ex-it.bad { background: #ffe1e1; box-shadow: inset 0 0 0 2px #ef3c3c; color: #c4232a; }
.ex-it.no { background: #fff4f4; box-shadow: inset 0 0 0 2px #ffc9c9; }
.ex-it.ex-drink { background: #eef8ff; box-shadow: inset 0 0 0 2px #bfe2f8; color: #1f5e9a; }
.ex-it.ex-drink .ex-ico { width: auto; aspect-ratio: 32 / 40; }
@keyframes ex-pulse { to { transform: scale(1.07); filter: brightness(1.04); } }
/* in the picture: the next topping bobs, the sauce or the cheese to do next shimmers, the next ball of ice bobs */
.ex-pc .ex-pc-in, .ex-dessert .sc { transform-box: fill-box; transform-origin: center; }
.ex-pc.next .ex-pc-in, .ex-dessert .sc.next { animation: ex-bob 0.9s ease-in-out infinite alternate; }
.ex-sauce.next, .ex-cheese.next { animation: ex-shimmer 0.9s ease-in-out infinite alternate; }
@keyframes ex-bob { to { transform: scale(1.18); } }
@keyframes ex-shimmer { to { opacity: 0.45; } }

/* the band above the board: the picture as tall as the band on the left, who and what on the right */
.counter.ex-strip > .example .ex-in { display: grid; grid-template-columns: min(calc(var(--ex-h) - 10px), 42%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 2px 10px; }
/* (whose order it is: the face and the flag in the corner of the picture, so the list has the whole height) */
.counter.ex-strip > .example .ex-name { display: none; }
.counter.ex-strip > .example:not(.empty) .ex-head { position: absolute; left: 3px; top: 2px; z-index: 1; gap: 0; }
.counter.ex-strip > .example .ex-face { width: 26px; }
.counter.ex-strip > .example .ex-head .tno svg { width: 18px; height: auto; }
.counter.ex-strip > .example .ex-pic { grid-column: 1; grid-row: 1; }
.counter.ex-strip > .example .ex-num { display: none; }
.counter.ex-strip > .example .ex-list { grid-column: 2; grid-row: 1; align-self: stretch; align-content: center; justify-content: flex-start; min-height: 0; overflow: hidden; gap: 5px 4px; padding-top: 3px; }
.counter.ex-strip > .example.tight .ex-it { gap: 0; }
.counter.ex-strip > .example.empty .ex-in { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
/* a low band: who it is for goes small, beside the list */
/* beside the board: the picture over the list */
.counter.ex-side > .example .ex-pic { margin-top: auto; max-height: calc(var(--ex-w) * 1.2); }
.counter.ex-side > .example .ex-list { margin-bottom: auto; }
.example.tight .ex-lab { display: none; }
.example.tight .ex-it { padding-right: 3px; }
@container ex (max-width: 150px) {
  .ex-name { display: none; }
  .ex-head { justify-content: center; }
}
/* a wide card beside a short board (a phone on its side): the picture left, the labels right */
@container ex (min-aspect-ratio: 6 / 5) and (min-height: 120px) {
  .ex-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px 10px; }
  .ex-head { grid-column: 2; grid-row: 1; }
  .ex-pic { grid-column: 1; grid-row: 1 / -1; margin: 0 !important; max-height: none !important; }
  .ex-list { grid-column: 2; grid-row: 2; align-self: stretch; align-content: flex-start; justify-content: flex-start; min-height: 0; margin: 0 !important; overflow: hidden; }
}
/* a big screen: the card grows with the rest */
@media (min-width: 1100px) and (min-height: 650px) {
  .example, .example[data-size] { --exi: calc(34px * var(--u)); --exf: max(16px, calc(0.98rem * var(--u))); padding: calc(10px * var(--u)); border-radius: calc(22px * var(--u)); }
  .example[data-size="l"] { --exi: calc(38px * var(--u)); }
  .example[data-size="s"] { --exi: calc(30px * var(--u)); --exf: max(15px, calc(0.92rem * var(--u))); }
  .example[data-size="xs"] { --exi: calc(25px * var(--u)); --exf: max(14px, calc(0.85rem * var(--u))); }
  .ex-in { gap: calc(8px * var(--u)); }
  .ex-title { font-size: max(13px, calc(0.78rem * var(--u))); }
  .ex-list { gap: calc(7px * var(--u)); }
  .ex-it { gap: calc(5px * var(--u)); padding: calc(4px * var(--u)) calc(12px * var(--u)) calc(4px * var(--u)) calc(4px * var(--u)); }
  .ex-tick { width: calc(20px * var(--u)); height: calc(20px * var(--u)); }
  .ex-tick::after { left: calc(7px * var(--u)); top: calc(3.5px * var(--u)); width: calc(4.5px * var(--u)); height: calc(9px * var(--u)); }
  .ex-ico .count { font-size: max(15px, calc(0.85rem * var(--u))); }
}
/* alone on a big screen in landscape: the customers and the ingredients give the card its room next to the board, and
   the stars in the top bar get a little smaller to fit over the narrower column of customers */
@media (min-width: 1100px) and (min-height: 650px) and (orientation: landscape) {
  #app.ex-on:not(.coop) { grid-template-columns: minmax(calc(250px * var(--u)), 17fr) minmax(0, 64fr) minmax(calc(220px * var(--u)), 19fr); }
  #app.ex-on:not(.coop) .stars svg { width: calc(21px * var(--u)); height: calc(21px * var(--u)); }
  #app.ex-on:not(.coop) > .topbar > .status { padding-left: calc(10px * var(--u)); padding-right: calc(10px * var(--u)); }
  #app.ex-on:not(.coop) .status .sub { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-it.next, .ex-num.next, .ex-pc.next .ex-pc-in, .ex-dessert .sc.next, .ex-sauce.next, .ex-cheese.next { animation: none; }
  .ex-pc.next .ex-pc-in, .ex-dessert .sc.next { transform: scale(1.12); }
}
/* a big screen: the buttons under the board (Weg, Oeps, Voorraad, the ovens) keep the whole width of the counter, the
   card beside the board stops above them */
@media (min-width: 1100px) and (min-height: 650px) and (orientation: landscape) {
  #app .counter.ex-side > .example { bottom: calc(var(--ex-b) + max(72px, 84px * var(--u)) + 10px * var(--u)); }
  #app .counter.ex-side > .side-col { margin-left: calc(-1 * (var(--ex-w) + 12px)); }
}

/* ---------- The review card (game.js, showReview): big, over the board alone, on the ober's half together ----------
   The guest's face, the stars and the coins, then a symbol for every part of the order with a tick or a cross (and
   what was wanted next to a wrong one), then the guest's words. A tap goes through it (game.js sends it away); a bar
   shows how long it stays. */
.rv-layer { position: fixed; z-index: 35; display: grid; place-items: center; pointer-events: none; container-type: size; }
.rv-layer.rv-half { position: absolute; inset: 0; z-index: 36; }
.rv-layer > .rv-card {
  --rv-ring: #4fc01c;
  position: relative; box-sizing: border-box; width: max-content; max-width: min(96cqw, 520px, 96vw); max-height: calc(100vh - 12px); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px 16px; border-radius: 26px;
  background: #fffdf6; box-shadow: 0 0 0 4px var(--rv-ring), 0 16px 34px -10px rgba(40, 20, 80, 0.55); color: var(--ink);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  animation: rv-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.rv-half > .rv-card { max-height: 98cqh; }
.rv-card.bad { --rv-ring: #ef3c3c; background: #fff8f6; }
.rv-card.meh { --rv-ring: #ffb703; }
.rv-card.vip { --rv-ring: #ffc61a; }
.rv-card.press { --rv-ring: #3a1f4a; background: #fbf8f1; }
.rv-card.rv-drink.good { --rv-ring: #2d8dff; }
.rv-card .press-head { font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; letter-spacing: 0.02em; }
.rv-top { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rv-face { flex: none; line-height: 0; }
.rv-face svg { display: block; width: 80px; height: auto; }
.rv-stars { display: flex; gap: 2px; line-height: 0; }
.rv-stars svg { width: 34px; height: 34px; }
.rv-coins { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px 3px 14px; border-radius: 999px; background: #fff3c4; box-shadow: inset 0 0 0 2px #ffd95e; color: #8a5a00; font-weight: 800; font-size: 1.6rem; line-height: 1.1; }
.rv-coins svg { display: block; width: 30px; height: 30px; }
.rv-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; margin: 0; padding: 2px 0; list-style: none; }
.rv-t { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 60px; padding: 7px 8px 5px; border-radius: 16px; background: #effbe6; box-shadow: inset 0 0 0 2px #b8e6a0; }
.rv-t.bad { background: #ffeded; box-shadow: inset 0 0 0 2px #ffb3b3; }
.rv-pair { display: flex; align-items: center; gap: 3px; }
.rv-sym { position: relative; width: 46px; height: 46px; display: grid; place-items: center; line-height: 0; }
.rv-sym > svg:first-child { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; overflow: visible; }
/* what the guest wanted, beside a wrong one: in a dashed "I wanted" frame */
.rv-want { border-radius: 12px; background: #fff; outline: 2px dashed #b5a6d3; outline-offset: 1px; }
.rv-badge { position: absolute; right: -8px; bottom: -7px; width: 24px; height: 24px; line-height: 0; }
.rv-badge svg { display: block; width: 100%; height: 100%; }
.rv-nope { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-sym .count { position: absolute; right: -10px; top: -8px; font-size: 13px; }
.rv-sym .ex-side { left: -6px; bottom: auto; top: -6px; }
.rv-arrow { flex: none; width: 20px; height: 14px; }
.rv-lab { max-width: 120px; margin-top: 7px; font-size: 0.82rem; font-weight: 700; line-height: 1.1; text-align: center; }
.rv-t.bad .rv-lab { color: #c4232a; }
.rv-t.ok .rv-lab { color: #2b6a12; }
.rv-text { max-width: 36ch; margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.25; text-align: center; }
.rv-time { position: absolute; left: 22px; right: 22px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--rv-ring); opacity: 0.45; transform-origin: 0 50%; animation: rv-time var(--ms, 4s) linear forwards; }
@keyframes rv-in { from { transform: scale(0.7); opacity: 0; } }
@keyframes rv-time { to { transform: scaleX(0); } }
/* a small place (a phone; the ober's half on a phone): everything a size smaller */
@container (max-height: 380px) {
  .rv-card { gap: 5px; padding: 8px 12px 12px; border-radius: 20px; }
  .rv-face svg { width: 54px; }
  .rv-stars svg { width: 24px; height: 24px; }
  .rv-coins { font-size: 1.15rem; padding: 2px 9px 2px 10px; }
  .rv-coins svg { width: 22px; height: 22px; }
  .rv-rows { gap: 6px; }
  .rv-t { min-width: 48px; padding: 5px 6px 4px; gap: 2px; border-radius: 13px; }
  .rv-sym { width: 34px; height: 34px; }
  .rv-badge { width: 19px; height: 19px; right: -6px; bottom: -5px; }
  .rv-lab { font-size: 0.74rem; max-width: 92px; }
  .rv-text { font-size: 0.92rem; }
}
@container (max-height: 290px) {
  .rv-layer > .rv-card { gap: 3px; padding: 6px 10px 10px; }
  .rv-face svg { width: 40px; }
  .rv-stars svg { width: 20px; height: 20px; }
  .rv-rows { gap: 4px; }
  .rv-t { min-width: 0; padding: 4px 5px 3px; }
  .rv-sym { width: 28px; height: 28px; }
  .rv-arrow { width: 14px; }
  .rv-lab { margin-top: 4px; font-size: 0.68rem; max-width: 80px; }
  .rv-text { font-size: 0.85rem; }
}
@container (max-height: 190px) {
  .rv-lab { display: none; }
}
/* a big screen: a size bigger */
@media (min-width: 1100px) and (min-height: 650px) {
  .rv-face svg { width: calc(90px * var(--u, 1)); }
  .rv-stars svg { width: calc(38px * var(--u, 1)); height: calc(38px * var(--u, 1)); }
  .rv-sym { width: calc(52px * var(--u, 1)); height: calc(52px * var(--u, 1)); }
  .rv-lab { font-size: max(14px, calc(0.9rem * var(--u, 1))); }
  .rv-text { font-size: max(18px, calc(1.15rem * var(--u, 1))); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-card { animation: none; }
  .rv-time { animation: none; display: none; }
}

/* ---------- Samen: the bakker drags the pizza into the oven and onto the pass (game.js, kGrab) ---------- */
.peel-grip { display: none; }
.app.coop .peel-grip:not([hidden]) {
  position: absolute; z-index: 6; left: 50%; bottom: -4px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px 4px 5px;
  border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffb35c, #ff8a1c); box-shadow: 0 0 0 3px #fff, 0 4px 0 #c96a1c; color: #fff; font: inherit; font-weight: 800; font-size: 0.9rem;
  white-space: nowrap; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; animation: grip-nudge 1.6s ease-in-out infinite;
}
.peel-grip svg { flex: none; width: 32px; height: 32px; }
.peel-grip:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
@keyframes grip-nudge { 50% { transform: translateX(4px); } }
.ghost.pizza-ghost { left: -48px; top: -48px; width: 96px; height: 96px; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3)); }
.ghost.pizza-ghost svg { display: block; width: 100%; height: 100%; }
/* where it can go: glows; under the pizza: a big green ring */
.k-target { box-shadow: 0 0 0 4px #ffd23a, 0 4px 0 var(--cream-dark) !important; animation: k-glow 0.8s ease-in-out infinite alternate; }
.k-target.k-over { box-shadow: 0 0 0 6px #4fc01c, 0 4px 0 var(--cream-dark) !important; transform: scale(1.04); }
.pass.k-target { border-radius: 20px; }
.side-btn.oven.k-grab { cursor: grab; touch-action: none; }
@keyframes k-glow { to { filter: brightness(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .app.coop .peel-grip:not([hidden]), .k-target { animation: none; }
}

/* ---------- Samen: every ingredient in view (game.js, fitTrays) ----------
   A big screen: the column beside the board is the tray, with the ovens and Op de balie side by side in one row under
   it. The tray's columns (--tc) and rows (--tr) are chosen by game.js so every tile fits; the icon follows the tile. */
@media (min-width: 1100px) and (min-height: 650px) and (orientation: landscape) {
  #app.coop > .half-baker > .dock { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  #app.coop .dock > .tray { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  #app.coop .dock > .oven-col { grid-column: 1; grid-row: 2; flex-direction: row; align-self: stretch; gap: calc(8px * var(--u)); }
  #app.coop .dock > .oven-col .side-btn.oven { flex: none; width: max(76px, calc(80px * var(--u))); height: auto; min-height: max(72px, calc(84px * var(--u))); }
  #app.coop .dock > .oven-col.two .side-btn.oven { width: max(56px, calc(66px * var(--u))); }
  #app.coop .dock > .serve { grid-column: 2; grid-row: 2; align-self: stretch; min-width: 96px; min-height: max(72px, calc(84px * var(--u))); justify-content: center; padding: calc(6px * var(--u)) calc(8px * var(--u)); }
  #app.coop .dock > .serve .kcap { display: none; }
  #app.coop .dock > .oven-col.two + .serve, #app.coop .dock > .oven-col.two ~ .serve { font-size: calc(1rem * var(--u)); }
  #app .dock .tray.fit { grid-template-columns: repeat(var(--tc, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--tr, 5), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); overflow: hidden; align-content: stretch; }
  #app .dock .tray.fit .ing { min-height: 0; justify-content: center; padding: 2px; }
  #app .dock .tray.fit .ing .ico { flex: none; width: clamp(16px, calc(var(--th, 96px) - 32px), calc(56px * var(--u))); height: clamp(16px, calc(var(--th, 96px) - 32px), calc(56px * var(--u))); }
  #app .dock .tray.fit .ing .name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; hyphens: none; font-size: clamp(13px, calc(var(--tw, 104px) / 6.2), max(18px, calc(0.95rem * var(--u)))); }
  #app.coop .dock .tray.fit { grid-template-columns: repeat(var(--tc, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--tr, 5), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); overflow: hidden; align-content: stretch; }
  #app.coop .dock .tray.fit .ing { min-height: 0; justify-content: center; padding: 2px; }
  #app.coop .dock .tray.fit .ing .ico { flex: none; width: clamp(16px, calc(var(--th, 96px) - 30px), calc(46px * var(--u))); height: clamp(16px, calc(var(--th, 96px) - 30px), calc(46px * var(--u))); }
  #app.coop .dock .tray.fit .ing .name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; hyphens: none; font-size: clamp(13px, calc(var(--tw, 104px) / 6.2), max(18px, calc(0.95rem * var(--u)))); }
  #app.coop .dock .tray.fit .ing .kcap { scale: 0.8; transform-origin: 0 0; }
}
/* a phone on its side: two rows of tiles, all in view */
@media (orientation: landscape) and (max-height: 500px) {
  .app.coop .tray.fit-side { grid-auto-flow: row; grid-template-columns: repeat(var(--tc, 5), minmax(0, 1fr)); grid-auto-columns: auto; overflow: hidden; touch-action: none; }
  .app.playing.coop .tray.fit-side { touch-action: none; }
  .app.coop .tray.fit-side .ing { min-width: 0; min-height: 44px; padding: 2px 2px 2px; }
  .app.coop .tray.fit-side .ing .ico { width: 22px; height: 22px; }
  .app.coop .tray.fit-side .ing .name, .app.coop .tray.fit-side[data-rows="2"] .ing .name { font-size: 0.72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
/* a phone: the grip is a round button on the edge of the board, on the side of the ovens, so the hint under the board
   stays readable */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .app.coop .peel-grip:not([hidden]) { left: auto; right: -10px; top: 50%; bottom: auto; translate: 0 -50%; width: 48px; height: 48px; padding: 0; justify-content: center; }
  .app.coop .peel-grip .grip-text { display: none; }
  .app.coop .peel-grip svg { width: 38px; height: 38px; }
  .app.coop.sides:not(.facing) .peel-grip:not([hidden]) { right: auto; left: -10px; }
}

/* Samen: a tap on a guest who is eating or waiting: a ring, nothing more */
.customer.rung > .bubble, .customer.rung > .face { box-shadow: 0 0 0 4px var(--pink); border-radius: 18px; }
/* the kitchen's messages stay over the board beside the example card, never over the card */
.counter.ex-side > .toasts { width: calc(100% - var(--ex-l) - var(--ex-w) - var(--ex-r) - 24px); }
.counter.ex-side > .toasts > * { max-width: 100%; box-sizing: border-box; white-space: normal; }

/* ---------- Samen: the notepad, every part in a place of its own (the guest's words never lie over anything) ----------
   The face and the order on top, the guest's words on a line of their own under it (kept free when they are quiet, so
   nothing jumps), the ingredients, and Later, Wissen and Klaar! in one row at the bottom. On a phone the header is one
   row (Later, the face, the order, Wissen, Klaar!) and the tiles show only their drawing. */
.app.coop .notepad:not([hidden]) {
  grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "who bubble bubble bubble" "say say say say" "grid grid grid grid" "later later clear done";
}
.app.coop .np-who { display: contents; }
.app.coop .np-face { grid-area: who; align-self: center; }
.app.coop .np-later { grid-area: later; justify-self: stretch; }
.app.coop .np-say, .app.coop .np-say[hidden] {
  position: static; display: block; grid-area: say; transform: none; z-index: auto; min-height: calc(1.25em + 8px); padding: 4px 10px; border-radius: 12px;
  box-shadow: inset 0 0 0 2px #e6dcf6; background: #fff; font-size: 0.9rem; line-height: 1.25;
}
.app.coop .np-say[hidden] { visibility: hidden; }
.app.coop .np-say.bad { box-shadow: inset 0 0 0 2px #ffb703; background: #fff8e1; }
.app.coop .np-say.good { box-shadow: inset 0 0 0 2px #4fc01c; background: #f0fbe8; }
.app.coop .np-bubble::after { display: none; }
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 420px) {
  .app.coop .notepad:not([hidden]) {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "later who bubble clear done" "say say say say say" "grid grid grid grid grid"; gap: 4px;
  }
  .app.coop .np-later { min-width: 48px; padding: 0 6px; }
  .app.coop .np-say, .app.coop .np-say[hidden] { min-height: 0; padding: 2px 8px; font-size: 0.8rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the tiles: only the drawing (the name stays in their label), bigger */
  .app.coop .np-name { display: none; }
  .app.coop .np-ico { width: 32px; height: 32px; }
  .app.coop .np-grid { grid-auto-rows: minmax(44px, 1fr); align-content: stretch; gap: 4px; }
  .app.coop .np-btn { min-width: 50px; padding: 2px 6px; }
  .app.coop .np-done { min-width: 62px; }
}
/* the drinks bar on a phone: the guest's words in two short lines at most (the glass drawn beside them says it all),
   the buttons only their drawing, the glass beside them */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 420px) {
  .app.coop .dk-say { font-size: 0.8rem; line-height: 1.2; padding: 2px 8px 2px 4px; }
  .app.coop .dk-say > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .app.coop .dk-want svg { width: 26px; }
  .app.coop .dk-face svg { width: 30px; }
  .app.coop .drink .dk-tap-name { display: none; }
  .app.coop .drink .dk-tap { min-height: 44px; padding: 2px; }
  .app.coop .drink .dk-tap-art svg { height: clamp(30px, 22cqh, 60px); max-width: 100%; }
  .app.coop .drink > .dk-extras .dk-tap-art svg { height: clamp(26px, 16cqh, 48px); }
  .app.coop .drink > .dk-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* a phone: the order cards speak in drawings only (the words stay in their labels for screen readers): the wolkjes
   and bonnetjes without a name line, the example without labels, the review tiles without captions */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 420px) {
  #queue .bubble .who, .ticket .bubble .who { display: none; }
  .example .ex-lab { display: none; }
  .example .ex-it { padding-right: 3px; }
  .rv-lab { display: none; }
  .rv-sym { width: 40px; height: 40px; }
}

/* ---------- The stages over the board (the oven, the pantry, the cutting board): the whole counter ----------
   While one is open the example card steps aside (its room goes to the stage), the hint wraps between words beside
   the Terug button, and the pantry shows every jar at once in as many columns as fit (game.js, fitPantry). */
.counter:is(.prep-on, .oven-on) > .example { visibility: hidden; }
#app .counter.ex-side:is(.prep-on, .oven-on) > :is(.prep-stage, .oven-stage) { margin-left: calc(-1 * (var(--ex-w) + 12px)); }
#app .counter.ex-strip:is(.prep-on, .oven-on) > :is(.prep-stage, .oven-stage) { margin-top: calc(-1 * (var(--ex-h) + 8px)); }
.os-top { flex-wrap: wrap; }
.os-hint, #prep-hint { flex: 1 1 9em; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.prep-area { padding: 6px; }
.prep-area .pantry-shelves {
  width: 100%; height: 100%; max-height: none; box-sizing: border-box; overflow: hidden; align-content: stretch;
  grid-template-columns: repeat(var(--pc, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--pr, 3), minmax(0, 1fr));
  background: #e9c79c; box-shadow: inset 0 0 0 3px #c98a4e;
}
#app .prep-area .pantry-shelves { grid-template-columns: repeat(var(--pc, 4), minmax(0, 1fr)); }
.prep-area .pantry-item, #app .prep-area .pantry-item { min-height: 44px; min-width: 44px; padding: 3px; }
.prep-area .pantry-ico, #app .prep-area .pantry-ico { width: clamp(22px, calc(var(--pt, 80px) - 34px), 64px); height: clamp(22px, calc(var(--pt, 80px) - 34px), 64px); flex: none; }
.prep-area .pantry-name, #app .prep-area .pantry-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; font-size: clamp(11px, calc(var(--pt, 80px) / 6), 18px); }
.pantry-op { position: absolute; right: 3px; top: 3px; padding: 0 6px; border-radius: 999px; background: #ef3c3c; color: #fff; font-size: 0.75rem; line-height: 1.4; }
.pantry-item .stock { width: 70%; }
/* a big screen together: the bonnetjes strip only as tall as one row of bonnetjes (the flag and the face side by side
   beside the order), so the board and the ingredients get the room */
@media (min-width: 1000px) and (min-height: 600px) and (orientation: landscape), (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #app.coop .tickets, .app.coop .tickets { min-height: 0; padding-top: 10px; padding-bottom: 6px; }
  #app.coop .ticket, .app.coop .ticket { min-height: 0; }
  #app.coop .ticket-head, .app.coop .ticket-head { flex-direction: row; align-items: center; gap: 4px; }
}
/* the dessert board: the pizza board under it is out of sight (only the coupe or the cone is the board then) */
.counter.ice-on > .peel { visibility: hidden; }
/* a big screen together, four tables in two rows: each row gets half the floor and the tables stand at its bottom,
   so a tall bubble (a dessert, a drink) never pushes the second row off the screen */
@media (min-width: 1100px) and (min-height: 650px) and (orientation: landscape) {
  #app.coop .tables[data-n="4"] { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; row-gap: calc(8px * var(--u)); overflow: visible; }
  #app.coop .tables[data-n="4"] .tb { min-height: 0; }
}
@media (min-width: 1100px) and (max-height: 860px) and (orientation: landscape) {
  #app.coop .tb .ice-order svg { height: calc(3.2rem * var(--u)); }
  #app.coop .tb .face { width: calc(64px * var(--u)); }
}
/* a name on a notepad tile never breaks in the middle of a word: on a narrow tile it gets smaller */
.np-tile { container-type: inline-size; }
.np-name { overflow-wrap: normal; }
@container (max-width: 100px) { .np-name, .np-tile.np-ice .np-name { font-size: min(0.82rem, 15.5cqw) !important; } }
/* a fitted tile: the name and the stock bar keep their height, the drawing gives way */
#app .dock .tray.fit .ing > :is(.name, .stock, .count) { flex: none; }
#app .dock .tray.fit .ing > .ico { flex: 0 1 auto; min-height: 0; }
/* while a stage is open over the board (the oven, the pantry, the cutting board) the Toetje tab steps aside */
.counter:is(.prep-on, .oven-on) > .ice-tab { visibility: hidden; }
.prep-area .pantry-item > :is(.pantry-name, .stock) { flex: none; }
.prep-area .pantry-item > .pantry-ico { flex: 0 1 auto; min-height: 0; }
.prep-area .pantry-name, #app .prep-area .pantry-name { line-height: 1.25; }
/* a phone on its side: the stage's Terug and hint stand in a column on the left, so the pantry and the cutting board
   get the full (low) height */
@media (orientation: landscape) and (max-height: 500px) {
  .prep-stage:not([hidden]) { flex-direction: row; }
  .prep-stage > .os-top { flex: 0 0 auto; width: clamp(84px, 22%, 130px); flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 6px 0 6px 6px; }
  .prep-stage > .os-top #prep-hint { flex: 0 1 auto; font-size: 0.85rem; text-align: left; }
  .prep-area { padding: 3px; }
  .prep-area .pantry-shelves { padding: 3px; gap: 3px; }
}

/* ---------- Samen: the washing up (game.js, openPrep('wash')) ---------- */
.side-btn.wash { position: relative; }
.side-btn.wash i[data-art] svg { width: 100%; height: 100%; }
.side-btn.wash .wash-n { position: absolute; right: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #2d8dff; color: #fff; font-size: 0.8rem; line-height: 20px; box-shadow: 0 0 0 2px #fff; }
.side-btn.wash:not(.has) .wash-n { display: none; }
.side-btn.wash.alert { box-shadow: 0 0 0 3px #ef3c3c, 0 4px 0 var(--cream-dark); animation: glow 0.6s ease-in-out infinite alternate; }
.side-btn.wash.alert .wash-n { background: #ef3c3c; }
.side-btn.wash.nudge { animation: shake 0.4s ease; }
/* the washing view: the sink with the plate being scrubbed, the pile still to do, the drying rack */
.prep-area[data-kind="wash"] { gap: 10px; }
.wash-box { position: relative; flex: 1 1 auto; align-self: stretch; min-width: 0; max-width: min(100%, 150cqh); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; container-type: size; }
.wash-box:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 14px; }
.wash-sink { position: absolute; inset: 0; line-height: 0; }
.wash-sink svg { width: 100%; height: 100%; }
.wash-plate { position: absolute; left: 50%; top: 50%; width: min(78cqh, 60cqw); aspect-ratio: 1; translate: -50% -50%; line-height: 0; pointer-events: none; }
.wash-plate > span { position: absolute; inset: 0; }
.wash-plate svg { width: 100%; height: 100%; }
.wash-dirt { opacity: calc(1 - var(--w, 0)); }
.wash-box.empty .wash-plate, .wash-box.empty .wash-foam, .wash-box.empty .wash-sponge { display: none; }
.wash-foam { position: absolute; left: 50%; top: 50%; width: min(78cqh, 60cqw); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: calc(min(1, var(--w, 0) * 2.5) * (1 - max(0, var(--w, 0) - 0.85) * 6)); }
.wash-foam i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 30%, rgba(225, 242, 255, 0.95) 60%, rgba(180, 220, 255, 0.85)); box-shadow: 0 1px 2px rgba(80, 120, 160, 0.25); }
.wash-foam i:nth-child(1) { left: 20%; top: 26%; width: 22%; height: 22%; } .wash-foam i:nth-child(2) { left: 46%; top: 18%; width: 18%; height: 18%; }
.wash-foam i:nth-child(3) { left: 58%; top: 44%; width: 24%; height: 24%; } .wash-foam i:nth-child(4) { left: 28%; top: 54%; width: 20%; height: 20%; }
.wash-foam i:nth-child(5) { left: 44%; top: 66%; width: 15%; height: 15%; } .wash-foam i:nth-child(6) { left: 12%; top: 44%; width: 13%; height: 13%; }
.wash-foam i:nth-child(7) { left: 72%; top: 24%; width: 13%; height: 13%; }
.wash-sponge { position: absolute; left: 70%; top: 70%; width: min(26cqh, 22cqw); translate: -50% -50%; line-height: 0; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.2)); transition: left 0.05s linear, top 0.05s linear; }
.wash-sponge svg { width: 100%; height: auto; }
.wash-box.shine .wash-plate { animation: wash-shine 0.6s ease; }
.wash-box.shine .wash-plate::after { content: ""; position: absolute; right: 12%; top: 10%; width: 18%; aspect-ratio: 1; background: #ffd23a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 0.3s ease-in-out infinite alternate; }
@keyframes wash-shine { 50% { scale: 1.06; filter: brightness(1.08); } }
.wash-pile { position: absolute; left: 3%; bottom: 4%; width: 22%; aspect-ratio: 1; pointer-events: none; }
.wash-pile i { position: absolute; inset: 0; line-height: 0; }
.wash-pile i:nth-child(2) { translate: 0 -10%; } .wash-pile i:nth-child(3) { translate: 0 -20%; } .wash-pile i:nth-child(4) { translate: 0 -30%; }
.wash-pile svg { width: 100%; height: 100%; }
.wash-rack { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(56px, 16%, 110px); padding: 6px 4px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--cream-dark); }
.wash-rack-art { width: 100%; line-height: 0; }
.wash-rack-art svg { width: 100%; height: auto; }
.wash-clean-n { font-size: 1.2rem; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .side-btn.wash.alert, .wash-box.shine .wash-plate, .wash-box.shine .wash-plate::after { animation: none; }
  .wash-sponge { transition: none; }
}
/* the dish tub on the ober's half: the plates waiting in it */
.sink { position: relative; }
.sink-n { position: absolute; right: 4px; top: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #2d8dff; color: #fff; font-size: 0.85rem; line-height: 22px; box-shadow: 0 0 0 2px #fff; }
.sink-n[hidden] { display: none; }
/* the clean plates left, on the pass; "Op de balie" without one */
.pass-lab { display: contents; }
.pass-clean { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 3px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.8rem; font-weight: 800; line-height: 1.2; }
.pass-clean svg { width: 22px; height: auto; display: block; }
.pass-clean i { font-style: normal; }
.pass-clean.none { background: #ffe1e1; color: #c4232a; }
.serve.noplate { filter: grayscale(0.3); box-shadow: 0 0 0 3px #ef3c3c, 0 4px 0 var(--cream-dark); }

/* ---------- Samen: de bel on the pass ---------- */
.bell-btn { position: relative; flex: none; width: 60px; height: 56px; display: grid; place-items: center; padding: 2px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 0 rgba(60, 40, 20, 0.35); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bell-btn > svg { width: 100%; height: 100%; display: block; }
.bell-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60, 40, 20, 0.35); }
.bell-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.bell-btn.hint { box-shadow: 0 0 0 3px #ffd23a, 0 3px 0 rgba(60, 40, 20, 0.35); animation: ex-pulse 0.9s ease-in-out 3 alternate; }
.bell-btn .kcap { position: absolute; right: -4px; top: -6px; }
.bell-ding { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; padding: 0 8px; border-radius: 999px; background: #ffd23a; color: #5a3d00; font-weight: 800; font-size: 0.9rem; white-space: nowrap; pointer-events: none; animation: bell-ding 0.9s ease-out forwards; }
@keyframes bell-ding { from { opacity: 0; transform: translateY(6px) scale(0.8); } 20% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
.pass-pz.rung { filter: drop-shadow(0 0 4px #ffd23a) drop-shadow(0 0 2px #ffd23a); }
.pass-pz.rung:not(.lifted) { animation: rung 1.2s ease-in-out 2; }
@keyframes rung { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .bell-btn.hint, .bell-ding, .pass-pz.rung { animation: none; } }
/* where the pass is a strip between two players face to face: the head shows only the bell (the word "Balie" stays
   away, so nothing reads upside down for one of them) */
@media (orientation: portrait) and (max-width: 600px), (orientation: portrait) and (min-height: 760px) {
  .app.facing .pass-head { visibility: visible; width: auto; }
  .app.facing .pass-head b, .app.facing .pass-head .pass-clean { display: none; }
}
@media (min-width: 1100px) and (min-height: 650px) and (orientation: landscape) {
  #app.coop > .pass .pass-head { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 2px; }
  #app.coop > .pass .pass-lab { display: flex; flex-direction: column; align-items: center; gap: 2px; }
}
/* the "Ding!" beside the bell (above it, it would leave the dining room on a phone on its side) */
.bell-ding { left: calc(100% + 4px); bottom: auto; top: 50%; translate: 0 -50%; }
@keyframes bell-ding { from { opacity: 0; transform: translateX(-6px) scale(0.8); } 20% { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(8px); } }
/* face to face: Wissel at the start of the strip, the bell at its end, the two plates between them */
@media (orientation: portrait) and (max-width: 600px), (orientation: portrait) and (min-height: 760px) {
  .app.coop.facing .pass { grid-template-columns: 48px repeat(2, minmax(0, 1fr)) auto; }
  .app.coop.facing .pass > .pass-head { grid-column: 4; grid-row: 1; }
  .app.coop.facing .pass > .pass-head + .pass-slot { grid-column: 2; }
  .app.coop.facing .pass > .pass-slot { grid-row: 1; }
  .app.coop.facing .bell-ding { left: auto; right: calc(100% + 4px); }
}
@media (orientation: portrait) and (max-width: 600px) {
  .app.coop.facing .dn-wall { grid-template-columns: 66px minmax(0, 1fr) 58px; }
  .app.coop.facing .pass { grid-template-columns: 44px repeat(2, minmax(0, 1fr)) auto; gap: 4px; }
  .app.coop.facing .bell-btn { width: 56px; height: 52px; padding: 1px; }
}
@media (orientation: portrait) and (max-width: 600px), (orientation: portrait) and (min-height: 760px) {
  .app.coop.facing .pass > .pass-head + .pass-slot + .pass-slot { grid-column: 3; }
  .app.coop.facing .pass > .pass-head + .pass-slot + .pass-slot + .pass-slot { display: none; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .app.coop.facing .pass > .pass-slot { width: min(100%, 64px); min-width: 0; }
}
@media (orientation: portrait) and (max-width: 374px) {
  .app.coop.facing .dn-wall { grid-template-columns: 58px minmax(0, 1fr) 48px; }
  .app.coop.facing .pass { grid-template-columns: 40px repeat(2, minmax(0, 1fr)) auto; gap: 3px; padding-left: 3px; padding-right: 3px; }
}
@media (orientation: portrait) and (max-width: 374px) {
  .app.coop.facing .pass { grid-template-columns: 46px repeat(2, minmax(0, 1fr)) auto; }
  .app.coop.facing .side-swap { width: 44px; height: 44px; left: 2px; }
}
/* face to face the bell is seen from above (the same both ways round); elsewhere from the side */
.bell-btn > .bell-top { display: none; }
@media (orientation: portrait) and (max-width: 600px), (orientation: portrait) and (min-height: 760px) {
  .app.coop.facing .bell-btn > svg:first-child { display: none; }
  .app.coop.facing .bell-btn > .bell-top { display: block; }
  .app.coop.facing .pass-head small { right: auto; left: -8px; top: -8px; }
}
/* the Afwas button: at the end of the row of bonnetjes, always in view */
.wash-btn { display: none; }
.app.coop .wash-btn:not([hidden]) {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; min-height: 52px; padding: 3px 8px;
  border: 0; border-radius: 14px; background: #eaf6ff; box-shadow: inset 0 0 0 2px #bfe2f8, 0 3px 0 var(--cream-dark); font: inherit; font-weight: 700; font-size: 0.82rem; color: #1f5e9a; cursor: pointer;
}
.wash-btn i[data-art] { width: 30px; height: 26px; line-height: 0; }
.wash-btn i[data-art] svg { width: 100%; height: 100%; }
.wash-btn .wash-n { position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #2d8dff; color: #fff; font-size: 0.8rem; line-height: 20px; box-shadow: 0 0 0 2px #fff; }
.wash-btn:not(.has) .wash-n { display: none; }
.wash-btn.alert { box-shadow: inset 0 0 0 2px #ef3c3c, 0 0 0 3px #ef3c3c, 0 3px 0 var(--cream-dark); animation: glow 0.6s ease-in-out infinite alternate; }
.wash-btn.alert .wash-n { background: #ef3c3c; }
.wash-btn.nudge { animation: shake 0.4s ease; }
.wash-btn:active { transform: translateY(2px); }
.wash-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wash-btn.alert, .wash-btn.nudge { animation: none; } }
/* a row that wraps (tablets, computers): the bonnetjes from the left, Afwas at the right */
@media (orientation: portrait) and (min-width: 601px), (orientation: landscape) and (min-height: 501px) {
  .app.coop .tickets:not([hidden]) { display: flex; flex-wrap: wrap; align-items: stretch; }
  .app.coop .tickets > .ticket { flex: 0 1 auto; }
  .app.coop .tickets > .tickets-empty { flex: 1 1 12em; }
  .app.coop .tickets > .wash-btn { margin-left: auto; }
}
/* the one row that scrolls sideways (a phone): Afwas sticks to its right end */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .app.coop .tickets > .wash-btn:not([hidden]) { position: sticky; right: 0; z-index: 2; min-width: 52px; padding: 2px 4px; }
  .app.coop .tickets > .wash-btn > span { display: none; }
  .app.coop .tickets:has(> .tickets-empty) > .wash-btn { margin-left: auto; }
}