/* Papa Troll's Pizzeria — game 005.
   Arcade chrome (header/shell) matches the other cabinets; everything inside
   .pizzeria-cabinet goes warm + papery, Papa's-2007 style. All sprite art is
   PixelLab pixel art rendered with image-rendering: pixelated; every sprite
   has an emoji/CSS fallback so the game runs even with art missing. */

:root {
  --bg: #050008;
  --panel: #100816;
  --green: #4dff73;
  --red: #ff314f;
  --purple: #9a5cff;
  --gold: #ffd84d;
  --cyan: #4deeff;
  --ink: #f7fff8;
  --muted: rgba(247, 255, 248, 0.72);
  --line: rgba(255, 255, 255, 0.14);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  --font: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", monospace;
  --pixel: "Pixelify Sans", "DM Mono", monospace;

  /* pizzeria interior */
  --pz-wall: #f3e2c0;
  --pz-wall-dim: #e4cfa4;
  --pz-wood: #9c6635;
  --pz-wood-dark: #6f451f;
  --pz-crust: #e8b96b;
  --pz-sauce: #cf3b28;
  --pz-cheese: #f6d365;
  --pz-paper: #fdf8ec;
  --pz-ink: #352512;
  --pz-ink-soft: rgba(53, 37, 18, 0.66);
  --pz-line: rgba(53, 37, 18, 0.18);
  --pz-good: #2f9e44;
  --pz-bad: #d9480f;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 216, 77, 0.14), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(255, 49, 79, 0.12), transparent 24%),
    radial-gradient(circle at 50% 92%, rgba(154, 92, 255, 0.16), transparent 34%),
    linear-gradient(145deg, #040005 0%, #150a08 46%, #030106 100%);
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul { margin: 0; }
button { cursor: pointer; }

/* ---- shared arcade chrome ---------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 0, 8, 0.78); backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 58px; height: 38px;
  border: 1px solid rgba(77, 255, 115, 0.55); color: var(--green);
  background: rgba(77, 255, 115, 0.08);
  box-shadow: 0 0 18px rgba(77, 255, 115, 0.25), inset 0 0 18px rgba(77, 255, 115, 0.1);
  font-family: var(--mono); font-size: 12px; font-weight: 800;
}
.brand-copy { display: grid; line-height: 1; }
.brand-copy span { font-weight: 900; text-transform: uppercase; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  min-height: 36px; padding: 9px 12px; border: 1px solid transparent;
  color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase;
}
.site-nav a:hover, .site-nav a:focus-visible {
  border-color: rgba(255, 216, 77, 0.45); color: var(--ink);
  background: rgba(255, 216, 77, 0.1); outline: none;
}

/* no side margins/max-width — the cabinet below sizes itself to the full
   viewport independently of this wrapper. */
.arcade-shell { width: 100%; margin: 0; padding: 0; }

/* ---- cabinet frame ------------------------------------------------------ */
/* sized to the browser viewport itself (not just "as big as its content"),
   so the game fills the screen; the weekly-ladder section below it is
   reached by scrolling, same as any viewport-filling hero section. */
.pizzeria-cabinet {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--pz-header-h, 67px));
  height: calc(100dvh - var(--pz-header-h, 67px));
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: var(--pz-wall);
  display: flex;
  flex-direction: column;
}

.px-art { image-rendering: pixelated; image-rendering: crisp-edges; user-select: none; -webkit-user-drag: none; }

/* display:flex/grid on a container beats the hidden attribute's UA rule —
   keep [hidden] authoritative everywhere in the cabinet. */
.pizzeria-cabinet [hidden] { display: none !important; }

/* ---- title screen ------------------------------------------------------- */
.pz-title {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 118%, rgba(207, 59, 40, 0.5), transparent 52%),
    repeating-linear-gradient(45deg, rgba(53, 37, 18, 0.05) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, #f7e8c8 0%, var(--pz-wall) 58%, #e0c391 100%);
  color: var(--pz-ink);
  text-align: center;
}
.pz-title-inner { display: grid; justify-items: center; gap: 14px; padding: 28px; }
.pz-title-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pz-ink-soft);
}
.pz-logo {
  font-family: var(--pixel); font-weight: 700; line-height: 0.95;
  font-size: clamp(40px, 7vw, 74px);
  text-shadow: 3px 3px 0 rgba(207, 59, 40, 0.28);
}
.pz-logo span { color: var(--pz-sauce); }
.pz-title-chef { min-height: 132px; display: grid; place-items: center; }
.pz-title-chef img { height: 132px; width: auto; }
.pz-title-chef .pz-fallback { font-size: 84px; line-height: 1; }
.pz-title-tag { font-weight: 700; color: var(--pz-ink-soft); }
.pz-title-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pz-title-stats { font-family: var(--mono); font-size: 13px; color: var(--pz-ink-soft); }

/* ---- buttons ------------------------------------------------------------ */
.pz-btn {
  border: 2px solid var(--pz-ink);
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--pixel); font-size: 18px; font-weight: 600;
  color: var(--pz-ink); background: var(--pz-paper);
  box-shadow: 0 3px 0 var(--pz-ink);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.pz-btn:hover, .pz-btn:focus-visible { transform: translateY(-1px); outline: none; }
.pz-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pz-ink); }
.pz-btn-primary { background: var(--pz-sauce); color: #fff7ea; border-color: #7c1f12; box-shadow: 0 3px 0 #7c1f12; }
.pz-btn-primary:active { box-shadow: 0 1px 0 #7c1f12; }
.pz-btn-ghost { background: transparent; }
.pz-btn-small { font-size: 15px; padding: 7px 12px; }
.pz-btn-danger { background: #f6e0d2; }
.pz-btn-side { background: #dceefb; }
.pz-btn-side.is-done { background: var(--pz-good); color: #fff; }
.pz-btn-paint.is-armed { outline: 3px solid var(--gold); background: linear-gradient(180deg, #a3b1c6 0%, #6d7a92 100%); color: #fff; }
.pz-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.pz-icon-btn {
  border: 1px solid var(--pz-line); border-radius: 10px; background: var(--pz-paper);
  min-width: 38px; min-height: 34px; font-size: 16px;
}
.pz-icon-btn[aria-pressed="true"] .when-off { display: none; }
.pz-icon-btn[aria-pressed="false"] .when-on { display: none; }

/* ---- HUD ---------------------------------------------------------------- */
.pz-game { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; min-height: 0; color: var(--pz-ink); }
.pz-hud {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--pz-wood) 0%, var(--pz-wood-dark) 100%);
  border-bottom: 3px solid #58371a;
  flex-wrap: wrap;
}
.pz-hud-chip {
  font-family: var(--pixel); font-size: 16px; color: #fff3dd;
  background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 243, 221, 0.25);
  border-radius: 8px; padding: 5px 10px; white-space: nowrap;
}
.pz-ticket-rack {
  display: flex; gap: 6px; align-items: center; flex: 1; min-width: 120px;
  overflow-x: auto; padding: 2px;
}
/* Grin Combo meter: chain perfect stations for bonus tips (docs/TROLL-PIZZERIA-V2.md) */
.pz-grin-meter { letter-spacing: 1px; }
.pz-grin-meter.is-maxed { background: rgba(255, 216, 77, 0.22); border-color: rgba(255, 216, 77, 0.55); color: var(--gold); }
.pz-mini-ticket {
  font-family: var(--mono); font-size: 11px; line-height: 1.25;
  background: var(--pz-paper); color: var(--pz-ink);
  border: 1px solid var(--pz-line); border-top: 6px solid var(--pz-sauce);
  border-radius: 4px; padding: 4px 8px; min-width: 86px; text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}
.pz-mini-ticket strong { display: block; font-size: 12px; }
.pz-mini-ticket .st { text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; color: var(--pz-ink-soft); }
.pz-mini-ticket.is-active { outline: 2px solid var(--gold); }

/* ---- stage + stations ---------------------------------------------------- */
.pz-stage { position: relative; flex: 1; min-height: 0; }
.pz-station { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.pz-station.is-active { display: flex; }
.pz-hint { font-family: var(--mono); font-size: 13px; color: var(--pz-ink-soft); text-align: center; padding: 4px 10px; }

/* ---- troll events + grin hunt --------------------------------------------- */
/* Hidden grin: appears over whichever station is showing during an event's
   ~2s tell. Click it to cancel the sabotage and bank a small bonus. */
.pz-grin-hunt {
  position: absolute; z-index: 15; border: none; background: none; padding: 0;
  font-size: 30px; line-height: 1; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  animation: pz-grin-pulse 0.7s ease-in-out infinite;
}
@keyframes pz-grin-pulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.22); opacity: 1; } }
.pz-bin-swapped { outline: 2px dashed var(--pz-sauce); }
.pz-quake { animation: pz-quake-shake 0.35s ease-in-out infinite; }
@keyframes pz-quake-shake {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  25% { transform: rotate(-1.5deg) translate(-2px, 1px); }
  75% { transform: rotate(1.5deg) translate(2px, -1px); }
}
.pz-dial-scrambled { outline: 1px dashed var(--pz-bad); }
.pz-ticket-rattle { animation: pz-rattle 0.4s ease-in-out 2; }
@keyframes pz-rattle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* ---- lobby -------------------------------------------------------------- */
.pz-lobby-scene {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,0.08) 100%),
    repeating-linear-gradient(90deg, #b8b2a6 0 34px, #ded8ca 34px 68px),
    var(--pz-wall);
  /* checkered floor under the wall backdrop */
  background-size: 100% 100%, 100% 26%, 100% 100%;
  background-position: bottom, bottom, top;
  background-repeat: no-repeat;
}
.pz-lobby-scene .pz-lobby-bg {
  position: absolute; inset: 0 0 22% 0; width: 100%; height: 78%;
  object-fit: cover; object-position: center bottom;
}
.pz-lobby-queue {
  position: absolute; left: 0; right: 0; bottom: 24%;
  display: flex; align-items: flex-end; gap: clamp(6px, 2vw, 26px);
  padding: 0 4%;
}
.pz-cust { position: relative; display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0; }
.pz-cust img { height: clamp(96px, 16vw, 148px); width: auto; }
.pz-cust .pz-fallback { font-size: clamp(56px, 9vw, 84px); line-height: 1; }
.pz-cust-name {
  font-family: var(--pixel); font-size: 14px; color: var(--pz-ink);
  background: rgba(253, 248, 236, 0.85); border-radius: 6px; padding: 1px 8px;
}
.pz-patience { width: 64px; height: 7px; border: 1px solid var(--pz-ink); border-radius: 4px; background: rgba(253, 248, 236, 0.7); overflow: hidden; }
.pz-patience i { display: block; height: 100%; background: var(--pz-good); transition: width 0.4s linear, background 0.4s; }
.pz-cust.at-counter { cursor: pointer; }
.pz-cust.at-counter::after {
  content: "!"; position: absolute; top: -20px; right: -4px;
  font-family: var(--pixel); font-size: 22px; color: var(--pz-sauce);
  animation: pz-bounce 0.8s ease-in-out infinite;
}
.pz-cust:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
@keyframes pz-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pz-cust.walking { transition: transform 1.1s ease-in-out; }
.pz-cust .pz-bubble {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  background: var(--pz-paper); border: 1px solid var(--pz-ink); border-radius: 8px;
  font-family: var(--mono); font-size: 11px; padding: 3px 8px; white-space: nowrap;
}
.pz-counter {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background:
    linear-gradient(180deg, #c9955c 0%, var(--pz-wood) 26%, var(--pz-wood-dark) 100%);
  border-top: 4px solid #e8c288;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.18);
}
.pz-waiting-row {
  position: absolute; right: 8px; top: 8px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.pz-wait-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(253, 248, 236, 0.92); border: 1px solid var(--pz-line);
  border-radius: 999px; padding: 3px 10px 3px 4px;
  font-family: var(--mono); font-size: 11px; color: var(--pz-ink);
}
.pz-wait-chip img { height: 26px; width: auto; }
.pz-wait-chip .pz-fallback { font-size: 18px; }
.pz-station-controls { display: grid; justify-items: center; gap: 6px; padding: 10px; background: rgba(253, 248, 236, 0.6); border-top: 1px solid var(--pz-line); }

/* ---- tickets (full, paper) ----------------------------------------------- */
.pz-ticket {
  background: var(--pz-paper); color: var(--pz-ink);
  border: 1px solid var(--pz-line); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
  padding: 12px 14px; position: relative;
}
.pz-ticket::before {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 58px; height: 18px; background: rgba(255, 216, 77, 0.6); border: 1px dashed rgba(53,37,18,0.25);
}
.pz-ticket h4 { margin: 0 0 6px; font-family: var(--pixel); font-size: 17px; border-bottom: 1px dashed var(--pz-line); padding-bottom: 4px; }
.pz-ticket ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.pz-ticket li.done { color: var(--pz-good); }
.pz-ticket li.over { color: var(--pz-bad); }
.pz-ticket .tk-side { color: var(--pz-ink-soft); }
.pz-specialty-badge {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: #8a5a00; background: rgba(255, 200, 60, 0.35); border: 1px solid rgba(138, 90, 0, 0.35);
  border-radius: 999px; padding: 1px 8px; margin-bottom: 6px;
}

/* ---- build station -------------------------------------------------------- */
.pz-build {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 30px),
    linear-gradient(180deg, #e9ecef 0%, #dee2e6 100%);
}
.pz-build-layout {
  flex: 1; min-height: 0; display: grid; gap: 12px; padding: 12px;
  grid-template-columns: minmax(170px, 220px) 1fr minmax(150px, 210px);
  align-items: stretch;
}
.pz-build-ticket { overflow-y: auto; }
.pz-build-table {
  display: grid; justify-items: center; align-content: center; gap: 12px;
  background: linear-gradient(180deg, #c9955c, var(--pz-wood));
  border: 2px solid var(--pz-wood-dark); border-radius: 14px; padding: 14px;
  min-height: 0;
}
.pz-pizza-wrap {
  position: relative;
  width: min(340px, 34vh, 88%); aspect-ratio: 1;
  touch-action: none;
}
/* Pizza Cam: the 3D canvas fills the same square the DOM pizza used.
   Transparent WebGL clear = the wooden table shows through. */
.pz3d-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; cursor: crosshair;
  touch-action: none;
}
/* .pz-pizza is added by renderPizza to ANY container (build table, oven
   slots, shelf minis, cut table) — layer positioning must live here. */
.pz-pizza { position: relative; }
.pz-pizza .pz-layer { position: absolute; pointer-events: none; }
.pz-pizza .pz-layer-fallback { position: absolute; border-radius: 50%; pointer-events: none; }
.pz-pizza > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pz-half-guide {
  position: absolute; top: 4%; bottom: 4%; left: 50%; width: 0;
  border-left: 2px dashed rgba(53, 37, 18, 0.4); pointer-events: none;
}
.pz-topping { position: absolute; width: 13%; height: 13%; transform: translate(-50%, -50%); cursor: grab; }
.pz-topping img { width: 100%; height: 100%; }
.pz-topping .pz-fallback { font-size: 22px; display: block; text-align: center; }
.pz-topping.dragging { cursor: grabbing; z-index: 5; }
.pz-amount-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pz-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; overflow-y: auto; padding: 2px; }
.pz-bin {
  display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px;
  background: linear-gradient(180deg, #8d99ae 0%, #5c677d 100%);
  border: 2px solid #33415c; border-radius: 10px; color: #fff;
  font-family: var(--pixel); font-size: 13px;
  touch-action: none;
}
.pz-bin img { height: 34px; width: auto; }
.pz-bin .pz-fallback { font-size: 26px; line-height: 34px; }
.pz-bin:focus-visible { outline: 3px solid var(--gold); }
.pz-bin.is-armed { outline: 3px solid var(--gold); background: linear-gradient(180deg, #a3b1c6 0%, #6d7a92 100%); }
.pz-bin small { font-family: var(--mono); font-size: 10px; opacity: 0.85; }
.pz-drag-ghost { position: fixed; z-index: 60; width: 44px; height: 44px; pointer-events: none; transform: translate(-50%, -50%); }
.pz-drag-ghost img { width: 100%; height: 100%; }
.pz-drag-ghost .pz-fallback { font-size: 34px; }
.pz-to-oven { margin-top: 2px; }

/* ---- bake station ---------------------------------------------------------- */
.pz-bake {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 120, 40, 0.18), transparent 46%),
    repeating-linear-gradient(90deg, #6b4226 0 46px, #7b4d2c 46px 92px),
    #5e3a20;
}
.pz-oven { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px; }
.pz-oven-art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.98; }
.pz-oven-art img { height: 96%; width: auto; max-width: none; }
.pz-oven-slots {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(5, minmax(96px, 136px)); gap: 10px;
}
.pz-side-doneness { margin-top: -2px; opacity: 0.85; }
.pz-side-doneness i { background: linear-gradient(90deg, #e0a458, #9c6b2e 72%, #212529 100%); }
.pz-oven-slot {
  position: relative; display: grid; justify-items: center; gap: 6px;
  background: radial-gradient(circle at 50% 24%, #2b1608 0%, #170903 78%);
  border: 3px solid #d9a066; border-radius: 12px 12px 6px 6px;
  padding: 12px 8px 8px; min-height: 150px; align-content: center;
  box-shadow: inset 0 0 26px rgba(255, 110, 30, 0.35);
  cursor: pointer;
}
.pz-oven-slot:focus-visible { outline: 3px solid var(--gold); }
.pz-oven-slot .slot-pizza { width: 96px; height: 96px; position: relative; }
.pz-oven-slot.is-empty .slot-pizza { opacity: 0.16; }
.pz-oven-slot.slot-target { outline: 3px dashed var(--gold); }
.pz-oven-slot.is-jammed { opacity: 0.55; cursor: not-allowed; outline: 2px dashed #8a5a3a; }
.pz-rush-banner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-family: var(--pixel); font-size: 14px; letter-spacing: 0.04em;
  background: linear-gradient(90deg, #ff5f2e, #ff2d55); color: #fff;
  border-radius: 999px; padding: 6px 18px; box-shadow: 0 4px 14px rgba(255, 60, 60, 0.45);
  animation: pz-rush-pulse 1s ease-in-out infinite;
}
@keyframes pz-rush-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); } }
.pz-doneness { width: 92%; height: 10px; border: 1px solid #d9a066; border-radius: 5px; background: #170a04; position: relative; overflow: hidden; }
.pz-doneness i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f6d365, #e8590c 72%, #212529 100%); }
.pz-doneness .tgt { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--green); }
.pz-slot-label { font-family: var(--mono); font-size: 10px; color: #ffd8a8; text-transform: uppercase; letter-spacing: 0.06em; }
.pz-shelf { background: rgba(253, 248, 236, 0.92); border-top: 3px solid var(--pz-wood-dark); padding: 8px 12px; }
.pz-shelf-label { font-family: var(--pixel); font-size: 14px; color: var(--pz-ink); margin-bottom: 4px; }
.pz-shelf-row { display: flex; gap: 10px; min-height: 92px; align-items: center; overflow-x: auto; }
.pz-shelf-pizza { position: relative; width: 84px; height: 84px; flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; }
.pz-shelf-pizza:focus-visible { outline: 3px solid var(--gold); border-radius: 50%; }
.pz-shelf-pizza.is-selected { outline: 3px solid var(--pz-sauce); border-radius: 50%; }
.pz-shelf-pizza .who {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; background: var(--pz-paper);
  border: 1px solid var(--pz-line); border-radius: 4px; padding: 0 4px; white-space: nowrap;
}
.pz-shelf-row:empty::after { content: "— empty —"; font-family: var(--mono); font-size: 12px; color: var(--pz-ink-soft); }

/* ---- cut station ------------------------------------------------------------ */
.pz-cut {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.4) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0 2px, transparent 2px 30px),
    linear-gradient(180deg, #e3dbc8 0%, #d3c7ab 100%);
}
.pz-cut-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 12px; padding: 12px; }
.pz-cut-shelf { border: 1px solid var(--pz-line); border-radius: 12px; border-top: 3px solid var(--pz-wood-dark); align-self: start; width: 100%; }
.pz-cut-table { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 0; }
.pz-cut-pizza { width: min(340px, 40vh, 92%); }
.pz-cut-pizza svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pz-cut-controls { display: grid; justify-items: center; gap: 8px; }
.pz-cutline { stroke: rgba(53, 37, 18, 0.85); stroke-width: 1.6; }
.pz-guide { stroke: rgba(47, 158, 68, 0.5); stroke-width: 2; stroke-dasharray: 5 5; }
.pz-sweeper { stroke: var(--pz-sauce); stroke-width: 3; }

/* ---- station tabs ------------------------------------------------------------ */
.pz-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--pz-wood-dark), #472a10);
  border-top: 3px solid #e8c288;
}
.pz-tab {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 6px; border-radius: 10px;
  border: 2px solid rgba(232, 194, 136, 0.5);
  background: rgba(0, 0, 0, 0.22); color: #ffe8c2;
  font-family: var(--pixel); font-size: clamp(13px, 1.6vw, 18px);
}
.pz-tab:hover, .pz-tab:focus-visible { background: rgba(232, 194, 136, 0.18); outline: none; }
.pz-tab.is-active { background: var(--pz-paper); color: var(--pz-ink); border-color: var(--pz-paper); }
.pz-tab-badge {
  position: absolute; top: -7px; right: -4px; min-width: 20px; height: 20px;
  border-radius: 999px; background: var(--pz-sauce); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; padding: 0 5px;
  border: 2px solid #fff3dd;
}
.pz-tab-badge.pulse { animation: pz-pulse 0.9s ease-in-out infinite; }
@keyframes pz-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ---- overlays ------------------------------------------------------------ */
.pz-overlay {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; padding: 18px;
  background: rgba(23, 12, 4, 0.66); backdrop-filter: blur(3px);
}
.pz-overlay[hidden] { display: none; }
.pz-overlay-card {
  width: min(560px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--pz-paper); color: var(--pz-ink);
  border: 2px solid var(--pz-ink); border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  padding: 22px; display: grid; gap: 14px; justify-items: center; text-align: center;
}
.pz-overlay-card h2 { font-family: var(--pixel); font-size: 28px; }
.pz-howto-list { text-align: left; display: grid; gap: 8px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.pz-upgrades-balance { font-family: var(--mono); font-size: 14px; color: var(--pz-ink-soft); }
.pz-upgrades-list { width: 100%; display: grid; gap: 8px; }
.pz-upgrade-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--pz-line); border-radius: 10px; padding: 8px 12px; text-align: left;
}
.pz-upgrade-row.is-owned { opacity: 0.6; }
.pz-upgrade-info { display: grid; gap: 2px; }
.pz-upgrade-info strong { font-family: var(--pixel); font-size: 13px; }
.pz-upgrade-info span { font-family: var(--mono); font-size: 12px; color: var(--pz-ink-soft); }
.pz-serve-cust img { height: 110px; width: auto; }
.pz-serve-cust .pz-fallback { font-size: 74px; }
.pz-serve-line { font-family: var(--mono); font-size: 13px; color: var(--pz-ink-soft); font-style: italic; }
.pz-meters { width: 100%; display: grid; gap: 10px; }
.pz-meter { display: grid; gap: 3px; text-align: left; }
.pz-meter label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; display: flex; justify-content: space-between; }
.pz-meter-bar { height: 14px; border: 2px solid var(--pz-ink); border-radius: 7px; background: #eee3cc; overflow: hidden; }
.pz-meter-bar i { display: block; height: 100%; width: 0; background: var(--pz-good); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pz-meter-bar i.mid { background: #e8a013; }
.pz-meter-bar i.low { background: var(--pz-bad); }
.pz-serve-total { font-family: var(--pixel); font-size: 30px; }
.pz-serve-tip { font-family: var(--mono); font-size: 14px; color: var(--pz-ink-soft); }
.pz-day-table { width: 100%; font-family: var(--mono); font-size: 13px; border-collapse: collapse; }
.pz-day-table td { padding: 4px 6px; border-bottom: 1px dashed var(--pz-line); text-align: left; }
.pz-day-table td:last-child { text-align: right; }
.pz-unlock { background: rgba(255, 216, 77, 0.28); border: 1px dashed var(--pz-ink); border-radius: 10px; padding: 8px 12px; font-family: var(--pixel); font-size: 16px; }

/* ---- leaderboard rack spacing (engine brings its own styles) -------------- */
.leaderboard-rack { margin-top: clamp(20px, 4vw, 40px); }
.section-heading .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.section-heading h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 14px; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pz-build-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .pz-build-ticket { max-height: 150px; }
  .pz-bins { grid-template-columns: repeat(4, 1fr); }
  .pz-oven-slots { grid-template-columns: repeat(2, minmax(110px, 150px)); }
  .pz-cut-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pz-cut-shelf { order: 2; }
}
@media (max-width: 560px) {
  .pz-tab { flex-direction: column; gap: 2px; font-size: 12px; }
  .pz-hud-chip { font-size: 13px; }
  .pz-bins { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Kitchen3D mode (docs/TROLL-PIZZERIA-3D.md) --------------------------- */
/* game.js adds body.k3d-mode once Kitchen3D actually mounts. The 3D room
   sits behind everything at #pz-3d-mount; the station panels' own painted
   backdrops (lobby scene, oven brick, build/cut table cards) go transparent
   so it shows through, while their controls (ticket, bins, buttons, hint
   text) stay exactly where they are, now floating over the 3D view instead
   of over a flat backdrop. Nothing here runs in flat/no-WebGL mode — the
   original 2D game is untouched there. */
#pz-3d-mount { position: absolute; inset: 0; z-index: -1; }
#pz-3d-mount:empty { display: none; } /* flat/no-WebGL: never mounted, stays inert */

body.k3d-mode .pz-lobby-scene,
body.k3d-mode .pz-build,
body.k3d-mode .pz-bake,
body.k3d-mode .pz-cut { background: none; }
/* .pz-stage itself (the flex container all four station panels sit in) is
   a plain block that also passes the pointer-events:none-on-.pz-station
   rule below by, well, not being a .pz-station — it still eats every
   touch/click outside the panels' own content. */
body.k3d-mode .pz-stage { pointer-events: none; }
body.k3d-mode .pz-lobby-queue { display: none; } /* redundant with the 3D billboards */
/* .pz-lobby-bg and the oven art are real <img> elements game.js appends
   as children (boot()'s lobbyBg/ovenArt) — a background:none on their
   *container* doesn't touch them; they need hiding directly. */
body.k3d-mode .pz-lobby-bg,
body.k3d-mode .pz-oven-art img { display: none; }
body.k3d-mode .pz-oven-art,
body.k3d-mode .pz-oven { background: none; }
body.k3d-mode .pz-build-table,
body.k3d-mode .pz-cut-table { background: none; border-color: transparent; }
/* the pie itself renders in 3D now — this div stays empty (p3d().sync()
   never touches its innerHTML when Kitchen3D is active) but must not
   intercept clicks meant for the 3D canvas underneath */
body.k3d-mode #pz-build-pizza,
body.k3d-mode #pz-cut-pizza { pointer-events: none; }

/* the station panels are transparent now (see above) but still full-size
   DOM elements sitting in front of #pz-3d-mount (which is z-index:-1) —
   without this, their empty backdrop area eats every touch/click meant
   for the 3D view underneath (free-walk joystick drag, look-drag, click-
   to-pointer-lock). Only the panel background gets disabled; the actual
   controls are re-enabled individually below. */
body.k3d-mode .pz-station { pointer-events: none; }

/* floating-over-a-3D-scene legibility pass: give the control clusters a
   translucent backing instead of relying on an opaque station backdrop,
   and keep them clickable (see pointer-events:none above). */
body.k3d-mode .pz-build-ticket,
body.k3d-mode .pz-bins,
body.k3d-mode .pz-amount-btns,
body.k3d-mode .pz-shelf,
body.k3d-mode .pz-station-controls,
body.k3d-mode .pz-cut-controls {
  background: rgba(28, 16, 6, 0.55); border-radius: 12px; padding: 8px;
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
body.k3d-mode .pz-to-oven,
body.k3d-mode .pz-oven-slots {
  pointer-events: auto;
}
body.k3d-mode .pz-hint { color: #fff3dd; }