/* The Rusty Troll — game 009.
   Arcade chrome (header/shell) matches the other cabinets. Everything inside
   .tb-cabinet is FIRST-PERSON: the .tb-world strip is 300% wide (griddle /
   counter / window facings) and turning translates it like a head turn.
   Phase 1 art is all CSS/emoji fallback; PixelLab pass lands in phase 5. */

: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;

  /* rusty troll interior */
  --rt-stone: #676d75;
  --rt-stone-dark: #4d525a;
  --rt-plank: #2f6f6a;
  --rt-plank-dark: #24544f;
  --rt-steel: #4a5058;
  --rt-steel-dark: #2e3338;
  --rt-griddle: #3b3f45;
  --rt-rust: #c65a2e;
  --rt-wood: #7a5230;
  --rt-paper: #fdf6e8;
  --rt-ink: #2d2417;
  --rt-ink-soft: rgba(45, 36, 23, 0.66);
  --rt-line: rgba(45, 36, 23, 0.18);
  --rt-good: #37b24d;
  --rt-warn: #f59f00;
  --rt-bad: #e03131;
}

*, *::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(198, 90, 46, 0.16), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(255, 49, 79, 0.1), transparent 24%),
    radial-gradient(circle at 50% 92%, rgba(77, 238, 255, 0.1), transparent 34%),
    linear-gradient(145deg, #040005 0%, #12100a 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;
}

.arcade-shell { width: 100%; margin: 0 auto; padding: clamp(6px, 1vw, 14px); }

/* ---- cabinet ------------------------------------------------------------ */
.tb-cabinet {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #171009 0%, #0d0906 100%);
  box-shadow: var(--shadow);
}
/* Several elements below set their own `display`, which (at equal
   specificity) beats the UA [hidden] default since author origin wins.
   Keep [hidden] authoritative everywhere in the cabinet. */
.tb-cabinet [hidden] { display: none !important; }

/* ---- buttons ------------------------------------------------------------ */
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px;
  border: 2px solid var(--rt-ink); border-radius: 12px;
  background: var(--rt-rust); color: #fff;
  font-family: var(--pixel); font-size: 18px; letter-spacing: 0.4px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}
.tb-btn:hover, .tb-btn:focus-visible { filter: brightness(1.08); outline: none; }
.tb-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.tb-btn-primary { background: var(--rt-rust); }
.tb-btn-ghost { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, 0.4); }
.tb-btn-small { min-height: 38px; padding: 6px 14px; font-size: 15px; }
.tb-btn-danger { background: #7d2b1c; }
.tb-btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }

.tb-icon-btn {
  min-width: 40px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 17px;
}
.tb-icon-btn:hover, .tb-icon-btn:focus-visible { background: rgba(255, 255, 255, 0.14); outline: none; }
.tb-icon-btn[aria-pressed="true"] .when-off { display: none; }
.tb-icon-btn[aria-pressed="false"] .when-on { display: none; }

/* ---- title screen ------------------------------------------------------- */
.tb-title {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(430px, 62vh, 640px);
  padding: 40px 20px;
  text-align: center;
  /* PixelLab storefront scene as a dimmed hero backdrop — the gradients
     above it keep the logo legible and remain the fallback if the image
     404s (a failed background-image layer just drops out, harmless). */
  background:
    radial-gradient(circle at 50% 118%, rgba(198, 90, 46, 0.6), transparent 55%),
    linear-gradient(180deg, rgba(16, 27, 31, 0.55) 0%, rgba(20, 16, 10, 0.7) 55%, rgba(13, 9, 6, 0.94) 100%),
    radial-gradient(circle at 14% 12%, rgba(77, 238, 255, 0.1), transparent 30%),
    url("art/storefront.png") center 38% / cover no-repeat,
    linear-gradient(180deg, #101b1f 0%, #14100a 68%, #0d0906 100%);
}
.tb-title::before {
  /* bridge silhouette over the shack */
  content: "";
  position: absolute; inset: auto 0 34%; height: 22%;
  background:
    radial-gradient(115% 100% at 50% 100%, transparent 62%, rgba(10, 14, 16, 0.85) 63%),
    linear-gradient(180deg, transparent 0 78%, rgba(10, 14, 16, 0.85) 78%);
  opacity: 0.6; pointer-events: none;
}
.tb-title-inner { position: relative; display: grid; justify-items: center; gap: 16px; }
.tb-title-eyebrow { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.tb-logo {
  font-family: var(--pixel); font-weight: 700; line-height: 0.92;
  font-size: clamp(52px, 9vw, 96px); text-transform: uppercase;
  color: #ffe9d6;
  text-shadow: 0 4px 0 var(--rt-rust), 0 8px 0 rgba(0, 0, 0, 0.45), 0 0 42px rgba(198, 90, 46, 0.5);
}
.tb-logo span { color: var(--rt-rust); text-shadow: 0 4px 0 #5b2610, 0 8px 0 rgba(0, 0, 0, 0.45); }
.tb-title-tag { max-width: 46ch; color: var(--muted); font-size: 16px; }
.tb-title-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.tb-title-stats { color: var(--muted); font-family: var(--mono); font-size: 13px; }

/* ---- overlays ----------------------------------------------------------- */
.tb-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 22px;
  background: rgba(8, 5, 3, 0.82); backdrop-filter: blur(6px);
}
.tb-overlay[hidden] { display: none; }
.tb-overlay-card {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  display: grid; gap: 16px; justify-items: start;
  padding: 26px 26px 22px;
  border: 2px solid var(--rt-ink); border-radius: 16px;
  background: var(--rt-paper); color: var(--rt-ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.tb-overlay-card h2 { font-family: var(--pixel); font-size: 30px; }
.tb-howto-list { display: grid; gap: 10px; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.tb-overlay-card .tb-btn { justify-self: end; }

/* ---- HUD ---------------------------------------------------------------- */
.tb-game { position: relative; }
.tb-hud {
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 7, 4, 0.9);
}
.tb-hud-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
}
.tb-hud-coins { color: var(--gold); border-color: rgba(255, 216, 77, 0.4); }
.tb-hud-waste { color: var(--muted); }
.tb-hud-rank { color: var(--cyan); border-color: rgba(77, 238, 255, 0.35); }
.tb-facing-tabs { display: flex; gap: 4px; margin-left: auto; }
.tb-facing-tab {
  min-height: 34px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
}
.tb-facing-tab.is-active {
  color: #ffe9d6; border-color: rgba(198, 90, 46, 0.7);
  background: rgba(198, 90, 46, 0.22);
}
.tb-facing-tab .tb-tab-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  margin-left: 4px; border-radius: 999px;
  background: var(--rt-bad); color: #fff; font-size: 11px;
}

/* ---- event banner ---------------------------------------------------------
   Shift events + one-off toasts. Sits below the HUD, above the POV, so it's
   visible regardless of which facing the player is turned to. */
.tb-event-banner {
  position: relative; z-index: 25;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 216, 77, 0.3);
  background: linear-gradient(90deg, rgba(198, 90, 46, 0.22), rgba(198, 90, 46, 0.08));
  animation: tb-banner-in 0.25s ease;
}
.tb-event-banner.is-bad { background: linear-gradient(90deg, rgba(224, 49, 49, 0.3), rgba(224, 49, 49, 0.1)); border-color: rgba(224, 49, 49, 0.4); }
.tb-event-banner.is-toast { background: linear-gradient(90deg, rgba(77, 238, 255, 0.16), rgba(77, 238, 255, 0.05)); border-color: rgba(77, 238, 255, 0.3); }
@keyframes tb-banner-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.tb-event-icon { font-size: 20px; }
.tb-event-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tb-event-text strong { font-size: 13px; }
.tb-event-text span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tb-event-timer { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--gold); min-width: 28px; text-align: right; }

/* ---- closing time ---------------------------------------------------------- */
.tb-closing-btn {
  display: block; min-height: 96px; padding: 14px 30px;
  font-size: 17px; line-height: 1.6;
}

/* ---- POV viewport ------------------------------------------------------- */
.tb-pov {
  position: relative;
  height: clamp(560px, 88vh, 1400px);
  overflow: hidden;
  touch-action: pan-y;
  perspective: 1200px;              /* the "headset lens" — world tilts in 3D as you look */
  perspective-origin: 50% 46%;
}
.tb-pov.has-hand { cursor: none; }  /* the reticle replaces the system cursor */

/* ---- fullscreen ------------------------------------------------------------
   Real Fullscreen API on the cabinet (toggled by #tb-fullscreen-toggle) — the
   cabinet fills the whole screen and the POV grows to fill whatever's left
   after the HUD/event banner, instead of being capped by the clamp() above. */
.tb-cabinet:fullscreen,
.tb-cabinet:-webkit-full-screen {
  width: 100vw; height: 100vh;
  max-width: none; border-radius: 0;
  display: flex; flex-direction: column;
  background: #0d0906;
}
.tb-cabinet:fullscreen .tb-game,
.tb-cabinet:-webkit-full-screen .tb-game {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.tb-cabinet:fullscreen .tb-pov,
.tb-cabinet:-webkit-full-screen .tb-pov {
  flex: 1; height: auto; min-height: 0;
}
.tb-icon-btn[aria-pressed="true"].tb-fs-btn { background: rgba(198, 90, 46, 0.35); }
.tb-world {
  display: flex;
  width: 300%; height: 100%;
  transform: translateX(0);
  transform-style: flat;
  will-change: transform;
  /* transform is driven entirely by JS (updateCamera) every frame once a
     shift is running — combines facing offset + head-look tilt + idle
     sway into one spring-eased value, so no CSS transition here. */
}
.tb-view { position: relative; width: 33.3333%; height: 100%; overflow: hidden; }

/* head-look parallax: JS sets --tb-look-x/--tb-look-y (-1..1) on .tb-pov each
   frame; these inherit down. Depth values below are motion-parallax weight —
   far background layers barely move, near counter/window props drift more. */
.tb-grill-backwall, .tb-counter-backwall, .tb-passwall { --tb-depth: 3; }
.tb-hood, .tb-menu-board { --tb-depth: 6; }
.tb-griddle, .tb-countertop, .tb-passwindow, .tb-passcounter { --tb-depth: 10; }
.tb-grill-backwall, .tb-hood, .tb-griddle,
.tb-counter-backwall, .tb-menu-board, .tb-countertop,
.tb-passwall, .tb-passwindow, .tb-passcounter {
  transform: translate(
    calc(var(--tb-look-x, 0) * var(--tb-depth, 1) * -1px),
    calc(var(--tb-look-y, 0) * var(--tb-depth, 1) * -0.7px)
  );
}

.tb-turn {
  position: absolute; top: 50%; z-index: 26;
  translate: 0 -50%;
  width: 46px; height: 84px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8, 5, 3, 0.55); color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  backdrop-filter: blur(3px);
  transition: background 0.15s ease, opacity 0.2s ease;
}
.tb-turn:hover, .tb-turn:focus-visible { background: rgba(198, 90, 46, 0.5); outline: none; }
.tb-turn-left { left: 10px; }
.tb-turn-right { right: 10px; }
.tb-turn[disabled] { opacity: 0.18; cursor: default; }

.tb-vignette {
  position: absolute; inset: 0; z-index: 24; pointer-events: none;
  background:
    radial-gradient(120% 96% at 50% 44%, transparent 58%, rgba(4, 3, 2, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 3, 2, 0.32), transparent 12% 84%, rgba(4, 3, 2, 0.5));
}
.tb-vignette::after {
  /* faint lens-edge fringing, headset-glass feel */
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 60px 6px rgba(77, 238, 255, 0.05);
  mix-blend-mode: screen;
}

/* ---- VR hand/controller reticle ----------------------------------------- */
.tb-hand {
  position: absolute; z-index: 28; left: 0; top: 0;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.tb-hand.is-active { opacity: 1; }
.tb-hand-glow {
  position: absolute; inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 238, 255, 0.16), transparent 70%);
}
.tb-hand-ring {
  position: absolute; inset: 0;
  border: 2px solid rgba(77, 238, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(77, 238, 255, 0.5), inset 0 0 10px rgba(77, 238, 255, 0.22);
  transition: transform 0.13s cubic-bezier(0.32, 1.6, 0.4, 1), border-color 0.13s ease, box-shadow 0.13s ease;
}
.tb-hand-dot {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
.tb-hand.is-grab .tb-hand-ring {
  transform: scale(0.6);
  border-color: rgba(255, 216, 77, 0.95);
  box-shadow: 0 0 18px rgba(255, 216, 77, 0.6), inset 0 0 10px rgba(255, 216, 77, 0.3);
}
.tb-hand.is-grab .tb-hand-dot { background: #ffe9d6; }
.tb-hand.is-over .tb-hand-ring {
  transform: scale(1.22);
  border-color: rgba(255, 255, 255, 0.95);
}
@media (pointer: coarse) {
  .tb-hand { display: none; }
}

/* turn blur flourish */
.tb-world.is-turning .tb-view { filter: blur(1.5px); }
.tb-view { transition: filter 0.2s ease; }

/* ======================= FACING 0 · GRIDDLE ============================= */
.tb-view-grill {
  background: linear-gradient(180deg, #55636b 0%, var(--rt-stone-dark) 46%, #23262b 100%);
}
.tb-grill-backwall {
  position: absolute; inset: 0 0 52%;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, 0.16) 118px 122px),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(0, 0, 0, 0.16) 54px 58px),
    linear-gradient(180deg, var(--rt-stone) 0%, var(--rt-stone-dark) 100%);
}
.tb-grill-backwall::after {
  /* rust streaks bleeding down the stone */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 20%, rgba(198, 90, 46, 0.18) 78%, rgba(198, 90, 46, 0.3) 100%);
  mask: repeating-linear-gradient(90deg, transparent 0 40px, #000 40px 52px, transparent 52px 90px);
}
.tb-hood {
  position: absolute; left: 14%; right: 14%; top: 0; height: 34%;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #22262a 0%, var(--rt-steel) 78%, #63676d 96%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.tb-hood::after {
  content: "THE RUSTY TROLL";
  position: absolute; left: 0; right: 0; bottom: 10%;
  color: rgba(255, 233, 214, 0.5);
  font-family: var(--pixel); font-size: clamp(11px, 1.6vw, 15px); letter-spacing: 4px; text-align: center;
}

.tb-griddle {
  position: absolute; left: 4%; right: 4%; top: 42%; bottom: 13%;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(58% 40% at 50% 46%, rgba(255, 255, 255, 0.07), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(0, 0, 0, 0.12) 90px 93px),
    linear-gradient(180deg, #2c2f34 0%, var(--rt-griddle) 40%, #4b5057 100%);
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.55);
}
.tb-grill-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 13.5%;
  background: linear-gradient(180deg, #565b62 0%, #2a2d31 30%, #17191c 100%);
  border-top: 3px solid #6d7279;
}

.tb-slots { position: absolute; inset: 0; }
.tb-slot {
  position: absolute;
  translate: -50% -50%;
  width: var(--slot-w, 120px); height: calc(var(--slot-w, 120px) * 0.56);
  border: 0; border-radius: 50%;
  background: transparent;
  padding: 0;
  touch-action: manipulation; /* stop the pan-y ancestor from delaying/eating taps */
}
@media (pointer: coarse) {
  /* meet the ~44px touch-target guideline even for the smallest back slots */
  .tb-slot { min-width: 108px; min-height: 60px; }
}
.tb-slot::before {
  /* grease ring marking the spot */
  content: "";
  position: absolute; inset: 6% 4%;
  border: 2px dashed rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}
.tb-slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }

.tb-slot-plate {
  position: absolute; z-index: 3;
  top: -14%; left: 50%; translate: -50% 0;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(8, 5, 3, 0.72);
  font-size: 16px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  touch-action: manipulation;
  cursor: pointer;
}
@media (pointer: coarse) {
  .tb-slot-plate { width: 38px; height: 38px; font-size: 19px; }
}
.tb-slot-plate:hover { background: rgba(198, 90, 46, 0.7); }

.tb-patty {
  position: absolute; inset: 8% 6%;
  border-radius: 50%;
  background: var(--patty-color, #d4776b);
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, 0.3),
    inset 0 4px 8px rgba(255, 255, 255, 0.18),
    0 8px 14px rgba(0, 0, 0, 0.45);
  transition: background 0.3s linear;
}
.tb-patty::after {
  /* sear marks */
  content: "";
  position: absolute; inset: 16% 12%;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 0, 0, var(--sear, 0)) 12px 16px);
}
.tb-slot.is-flipping .tb-patty { animation: tb-flip 0.32s ease; }
@keyframes tb-flip {
  0% { transform: translateY(0) scaleY(1); }
  40% { transform: translateY(-26px) scaleY(0.55); }
  100% { transform: translateY(0) scaleY(1); }
}
.tb-slot.is-burnt .tb-patty { --patty-color: #241d18; }
.tb-slot.is-burnt::after {
  content: "💨";
  position: absolute; top: -30%; left: 50%; translate: -50%;
  font-size: 20px; animation: tb-smoke 1.6s ease-in-out infinite;
}
@keyframes tb-smoke {
  0% { opacity: 0.25; transform: translateY(2px); }
  50% { opacity: 0.8; transform: translateY(-6px); }
  100% { opacity: 0.25; transform: translateY(2px); }
}

.tb-patty-bars {
  position: absolute; left: 50%; bottom: 104%;
  translate: -50%;
  display: grid; gap: 3px;
  width: 78%;
  pointer-events: none;
}
.tb-bar {
  position: relative; height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.tb-bar::before {
  /* the perfect band (60–90 of 110) */
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: 54.5%; width: 27.3%;
  background: rgba(55, 178, 77, 0.4);
}
.tb-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  border-radius: 4px;
  background: var(--rt-warn);
}
.tb-bar.is-perfect .tb-bar-fill { background: var(--rt-good); }
.tb-bar.is-burnt .tb-bar-fill { background: var(--rt-bad); }
.tb-bar-tag {
  position: absolute; left: -16px; top: -2px;
  font-size: 9px; color: rgba(255, 255, 255, 0.75); font-family: var(--mono);
}

/* patty tub, plate rack, trash — "within arm's reach" bottom band */
.tb-tub {
  position: absolute; left: 3%; bottom: 2.5%; z-index: 22;
  display: grid; justify-items: center; gap: 2px;
  min-width: 108px; padding: 10px 14px 8px;
  border: 2px solid #1d2023; border-radius: 14px 14px 8px 8px;
  background: linear-gradient(180deg, #b8412f 0%, #8f2f21 100%);
  color: #ffe9d6;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}
.tb-tub:hover, .tb-tub:focus-visible { filter: brightness(1.1); outline: none; }
.tb-tub:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.tb-tub-art { font-size: 26px; }
.tb-tub-label { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; }

.tb-plate-rack {
  position: absolute; right: 3%; bottom: 2.5%; z-index: 22;
  display: flex; align-items: flex-end; gap: 8px;
  min-height: 74px; min-width: 240px; padding: 8px 10px;
  border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 14px;
  background: rgba(14, 12, 10, 0.66);
}
.tb-plate-rack::before {
  content: "Plated";
  position: absolute; top: -9px; left: 12px;
  padding: 0 6px;
  background: #17140f; border-radius: 4px;
  color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
}
.tb-plate {
  position: relative;
  width: 52px; height: 40px;
  border: 0; padding: 0; background: transparent;
}
.tb-plate::before {
  /* the plate */
  content: "";
  position: absolute; left: 2px; right: 2px; bottom: 0; height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1ede4, #b9b4a8);
}
.tb-plate-meat {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 22px;
  border-radius: 50% 50% 44% 44%;
  background: var(--patty-color, #8a5a3a);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.3);
}
.tb-plate .tb-plate-grade {
  position: absolute; top: -8px; left: 50%; translate: -50%;
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  padding: 0 4px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.6); color: var(--rt-warn);
}
.tb-plate.is-perfect .tb-plate-grade { color: var(--rt-good); }
.tb-plate.is-burnt .tb-plate-grade { color: var(--rt-bad); }
.tb-plate.is-selected { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.tb-plate:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

.tb-side-chip {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 40px;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.tb-side-chip:hover, .tb-side-chip:focus-visible { background: rgba(255, 255, 255, 0.18); outline: none; }
.tb-side-chip-art { font-size: 20px; }
.tb-side-chip-grade {
  position: absolute; top: -8px; left: 50%; translate: -50%;
  font-family: var(--mono); font-size: 9px; font-weight: 800;
  padding: 0 3px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.6); color: var(--rt-warn); white-space: nowrap;
}
.tb-side-chip.is-perfect .tb-side-chip-grade { color: var(--rt-good); }
.tb-side-chip.is-burnt .tb-side-chip-grade { color: var(--rt-bad); }
.tb-side-chip.is-selected { outline: 2px solid var(--gold); outline-offset: 2px; }

.tb-trash {
  position: absolute; left: 3%; bottom: 24%; z-index: 22;
  width: 52px; height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
  background: rgba(20, 18, 15, 0.72); font-size: 24px;
}
.tb-trash:hover, .tb-trash:focus-visible { background: rgba(224, 49, 49, 0.3); outline: none; }
.tb-trash.is-armed { outline: 2px solid var(--rt-bad); animation: tb-pulse 0.9s ease-in-out infinite; }
@keyframes tb-pulse { 50% { transform: scale(1.08); } }

/* your spatula, bottom of frame — sells the POV */
.tb-spatula {
  position: absolute; right: 30%; bottom: -12px; z-index: 23;
  width: 74px; height: 150px;
  transform: rotate(-14deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
}
.tb-spatula-head {
  position: absolute; top: 0; left: 0; right: 0; height: 58px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(160deg, #b9bec5 0%, #7d838b 60%, #5d636b 100%);
  border: 2px solid #3c4147;
}
.tb-spatula-neck {
  position: absolute; top: 56px; left: 50%; translate: -50%;
  width: 10px; height: 46px;
  background: linear-gradient(90deg, #9aa0a8, #6c727a);
}
.tb-spatula-grip {
  position: absolute; top: 98px; left: 50%; translate: -50%;
  width: 22px; height: 54px;
  border-radius: 10px;
  background: linear-gradient(90deg, #4a3324, #2c1d13);
}
.tb-spatula.is-working { animation: tb-jab 0.3s ease; }
@keyframes tb-jab {
  0% { transform: rotate(-14deg) translateY(0); }
  45% { transform: rotate(-6deg) translateY(-34px); }
  100% { transform: rotate(-14deg) translateY(0); }
}

/* fry station: two small tubs flanking the basket slots, centered low on
   the griddle scene between the patty tub and the tray. Unlocks by shift. */
.tb-fry-station {
  position: absolute; left: 50%; bottom: 2%; z-index: 22;
  translate: -50% 0;
  display: flex; align-items: flex-end; gap: 8px;
}
.tb-tub-small {
  position: static;   /* cancel .tb-tub's absolute positioning — this tub
                          lays out inside the .tb-fry-station flex row instead */
  min-width: 70px; padding: 7px 10px 6px;
}
.tb-tub-small .tb-tub-art { font-size: 19px; }
.tb-tub-small .tb-tub-label { font-size: 9.5px; }
.tb-basket-slots { display: flex; gap: 6px; align-items: flex-end; }
.tb-basket {
  position: relative;
  width: 58px; height: 46px;
  border: 2px solid #1d2023; border-radius: 8px 8px 12px 12px;
  background: repeating-linear-gradient(45deg, #7c828a 0 4px, #656a71 4px 8px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.tb-basket:hover, .tb-basket:focus-visible { filter: brightness(1.1); outline: none; }
.tb-basket-art { position: absolute; top: -20px; left: 50%; translate: -50% 0; font-size: 20px; }
.tb-basket-bar {
  position: absolute; left: 6%; right: 6%; bottom: 6%; height: 6px;
  border-radius: 3px; background: rgba(0, 0, 0, 0.5); overflow: hidden;
}
.tb-basket-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--rt-warn); }
.tb-basket-fill.is-perfect { background: var(--rt-good); }
.tb-basket-fill.is-burnt { background: var(--rt-bad); }
.tb-basket.is-burnt { animation: tb-pulse 0.9s ease-in-out infinite; }

/* ======================= FACING 1 · COUNTER ============================= */
.tb-view-counter {
  background: linear-gradient(180deg, var(--rt-plank) 0%, var(--rt-plank-dark) 44%, #1c2b28 100%);
}
.tb-counter-backwall {
  position: absolute; inset: 0 0 46%;
  background:
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(0, 0, 0, 0.18) 96px 100px),
    linear-gradient(180deg, var(--rt-plank) 0%, var(--rt-plank-dark) 100%);
}
.tb-menu-board {
  position: absolute; top: 9%; left: 50%; translate: -50%;
  padding: 14px 26px;
  border: 3px solid #513c22; border-radius: 8px;
  background: #241d12;
  color: #ffe9d6; text-align: center;
  font-family: var(--pixel); font-size: clamp(14px, 2vw, 19px); letter-spacing: 2px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.tb-menu-board span { display: block; margin-top: 6px; color: rgba(255, 233, 214, 0.6); font-size: 0.68em; letter-spacing: 1px; line-height: 1.5; }

.tb-countertop {
  position: absolute; left: 0; right: 0; top: 46%; bottom: 0;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(60% 34% at 50% 40%, rgba(255, 255, 255, 0.1), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(0, 0, 0, 0.1) 120px 124px),
    linear-gradient(180deg, #8a6238 0%, var(--rt-wood) 52%, #5d3e22 100%);
  box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.4);
}

.tb-pinned-ticket {
  position: absolute; top: 6%; left: 3%; z-index: 22;
  width: 168px; max-height: 62%;
  overflow: auto;
  padding: 12px 12px 10px;
  border-radius: 4px 4px 10px 10px;
  background: var(--rt-paper); color: var(--rt-ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.tb-pinned-ticket::before {
  content: "";
  position: absolute; top: -7px; left: 50%; translate: -50%;
  width: 44px; height: 14px;
  background: #9aa0a8; border-radius: 3px;   /* the clip */
}
.tb-pinned-empty { color: var(--rt-ink-soft); font-size: 12.5px; text-align: center; padding: 8px 0; }

/* soda machine: hold to fill, release in the perfect band. Unlocks shift 4. */
.tb-soda {
  position: absolute; top: 6%; right: 3%; z-index: 22;
  display: grid; justify-items: center; gap: 4px;
  width: 96px; padding: 10px 8px 8px;
  border: 2px solid #1d2023; border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #3a4650 0%, #232b32 100%);
  color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}
.tb-soda:hover, .tb-soda:focus-visible { filter: brightness(1.08); outline: none; }
.tb-soda.is-filling { filter: brightness(1.18); }
.tb-soda-cup {
  position: relative;
  width: 40px; height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 4px 4px 10px 10px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.tb-soda-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: var(--rt-warn);
  transition: height 0.05s linear;
}
.tb-soda-fill.is-perfect { background: var(--rt-good); }
.tb-soda-fill.is-over { background: var(--rt-bad); }
.tb-soda-label { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; }

.tb-buildzone {
  position: absolute; left: 50%; bottom: 20%; z-index: 22;
  translate: -50%;
  display: grid; justify-items: center; gap: 10px;
}
.tb-build-stack {
  display: flex; flex-direction: column-reverse; align-items: center;
  justify-content: flex-start;
  min-height: 150px; min-width: 190px;
  padding-bottom: 10px;
  position: relative;
}
.tb-build-stack::after {
  /* the plate under the build */
  content: "";
  position: absolute; bottom: 0; left: 50%; translate: -50%;
  width: 200px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f4f0e7, #b9b4a8);
  z-index: -1;
}
.tb-layer {
  position: relative;
  display: grid; place-items: center;
  width: var(--layer-w, 150px); height: var(--layer-h, 18px);
  margin-top: -2px;
  border-radius: var(--layer-r, 6px);
  background: var(--layer-c, #ccc);
  border: 2px solid rgba(0, 0, 0, 0.28);
  font-size: 11px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.28);
  animation: tb-drop 0.22s ease;
}
/* PixelLab sprite bleeds slightly past the CSS bar (real ingredient art
   isn't a clean rectangle) and fades in over the color bar, which stays
   underneath as both a loading placeholder and a permanent 404 fallback. */
.tb-layer-art {
  position: absolute; left: 50%; top: 50%;
  width: 132%; height: 220%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
}
.tb-layer.has-art .tb-layer-art { opacity: 1; }
@keyframes tb-drop {
  from { transform: translateY(-26px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}
.tb-build-controls { display: flex; gap: 8px; }
.tb-build-sides:not(:empty) { display: flex; gap: 4px; justify-content: center; margin-top: -4px; }
.tb-mini-side { font-size: 18px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.tb-mini-side-row { display: block; margin-top: 2px; font-size: 12px; text-align: center; }

.tb-bins {
  position: absolute; left: 0; right: 0; bottom: 1.5%; z-index: 23;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 0.9vw, 12px);
  padding: 0 8px;
  flex-wrap: nowrap;
}
.tb-bin {
  display: grid; justify-items: center; gap: 1px;
  min-width: clamp(58px, 7.6vw, 88px);
  padding: 8px 6px 6px;
  border: 2px solid #1d2023; border-radius: 12px 12px 7px 7px;
  background: linear-gradient(180deg, #62676e 0%, #43484f 100%);
  color: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4);
}
.tb-bin:hover, .tb-bin:focus-visible { filter: brightness(1.14); outline: none; }
.tb-bin:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.tb-bin[disabled] { opacity: 0.4; cursor: not-allowed; }
.tb-bin-art { font-size: clamp(19px, 2.4vw, 26px); }
.tb-bin-label { font-family: var(--mono); font-size: clamp(9px, 1vw, 11px); font-weight: 700; text-transform: uppercase; }
.tb-bin.is-next { outline: 2px solid var(--gold); outline-offset: 2px; }

.tb-hint {
  position: absolute; left: 50%; bottom: 15.5%; z-index: 21;
  translate: -50%;
  max-width: 90%;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(8, 5, 3, 0.6); color: var(--muted);
  font-family: var(--mono); font-size: 12px; text-align: center;
  pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ======================= FACING 2 · WINDOW ============================== */
.tb-view-window {
  background: linear-gradient(180deg, var(--rt-plank) 0%, var(--rt-plank-dark) 52%, #1a2624 100%);
}
.tb-passwall {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(0, 0, 0, 0.18) 96px 100px),
    linear-gradient(180deg, var(--rt-plank) 0%, var(--rt-plank-dark) 100%);
}
.tb-passwindow {
  position: absolute; top: 6%; left: 50%; translate: -50%;
  width: min(94%, 1400px); height: 52%;
  border: 10px solid #513c22; border-radius: 18px;
  background: linear-gradient(180deg, #cfe3de 0%, #a8c4bd 55%, #86a49c 100%);
  box-shadow: inset 0 6px 22px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.tb-dining { position: absolute; inset: 0; }
.tb-dining-floor {
  /* depth cue: a darker plank floor band under a lighter wall */
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(0, 0, 0, 0.08) 42px 44px),
    linear-gradient(180deg, #7c988f 0%, #5f7a71 100%);
}

/* background booths — decorative patrons, not interactive, just so the
   dining room reads as a real room with other people in it */
.tb-booth {
  position: absolute; bottom: 40%;
  display: flex; gap: 4px;
  font-size: 20px; opacity: 0.75; filter: saturate(0.75);
}
.tb-booth::before {
  content: "";
  position: absolute; left: -6px; right: -6px; bottom: -8px; top: 60%;
  background: #6b4a2c; border-radius: 4px; z-index: -1;
}
.tb-booth-1 { left: 6%; }
.tb-booth-2 { left: 24%; }

.tb-door {
  position: absolute; right: 3%; bottom: 0; top: 8%;
  width: 12%; min-width: 46px;
  border: 3px solid #3d2c18; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #8a6238, #6b4a26);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.15);
}
.tb-door-glass {
  position: absolute; top: 14%; left: 16%; right: 16%; height: 34%;
  background: rgba(210, 230, 225, 0.35);
  border-radius: 3px;
}
.tb-door-knob {
  position: absolute; right: 12%; top: 58%;
  width: 6px; height: 6px; border-radius: 50%;
  background: #e8d27a;
}

.tb-register {
  position: absolute; left: 6%; bottom: 0;
  width: 22%; height: 66%;
}
.tb-register::before {
  /* the boat-till counter */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #8a6238, #5d3e22);
}
.tb-wojak {
  position: absolute; left: 50%; bottom: 34%; translate: -50%;
  display: grid; place-items: center;
  width: 54px; height: 64px;
}
.tb-wojak::before {
  /* shirt */
  content: "";
  position: absolute; bottom: 0; left: 6px; right: 6px; height: 34px;
  border-radius: 10px 10px 0 0;
  background: #d7dade;
}
.tb-wojak-face { position: relative; font-size: 34px; filter: grayscale(0.7); }
/* PixelLab idle-breathing sprite for the cashier — fades in over the emoji,
   which stays the permanent fallback (see initWojakSprite in game.js). */
.tb-wojak-art {
  position: absolute; left: 50%; bottom: -6px; translate: -50%;
  height: 56px; width: auto;
  image-rendering: pixelated;
  opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
  filter: none;
}
.tb-wojak-art.has-art { opacity: 1; }

/* the line packs from the register (left) toward the door (right) —
   oldest ticket (first appended) sits closest to the front of the line,
   newer arrivals queue up further back, nearer the door they walked in */
.tb-queue {
  position: absolute; left: 26%; right: 12%; bottom: 2%;
  display: flex; flex-direction: row; align-items: flex-end; gap: 14px;
  justify-content: flex-start;
}
.tb-cust {
  position: relative;
  display: grid; justify-items: center; font-size: 44px; line-height: 1;
}
.tb-cust::after {
  /* grounding shadow so they read as standing on the floor, not floating */
  content: "";
  position: absolute; left: 50%; bottom: -4px; translate: -50%;
  width: 34px; height: 9px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}
.tb-cust small { font-size: 10px; color: rgba(20, 30, 26, 0.75); font-family: var(--mono); }
/* PixelLab full-body walk/stand sprite, overlaid on the emoji face — the
   emoji stays underneath as the permanent fallback (never removed) and the
   sprite fades in on top once its current frame has actually loaded. Sized
   to roughly cover the 44px emoji glyph above the name label. */
.tb-cust-art {
  position: absolute; left: 50%; bottom: 15px; translate: -50%;
  height: 58px; width: auto;
  image-rendering: pixelated;
  opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
}
.tb-cust-art.has-art { opacity: 1; }
.tb-cust-art.is-mirrored { scale: -1 1; }

/* customers walking in through the door and crossing the room to join the
   line, then a small idle shuffle while they wait — swapped in once the
   walk-in finishes (see renderQueue's animationend handler). Walking out
   plays when their order is served and they leave back through the door. */
.tb-cust.is-arriving { animation: tb-cust-walk-in 1.1s cubic-bezier(0.32, 0.7, 0.24, 1) both; }
@keyframes tb-cust-walk-in {
  0%   { transform: translateX(210px) translateY(0) scaleX(0.92); opacity: 0; }
  12%  { opacity: 1; }
  25%  { transform: translateX(150px) translateY(-5px) scaleX(0.96); }
  50%  { transform: translateX(90px) translateY(0) scaleX(1); }
  75%  { transform: translateX(36px) translateY(-5px) scaleX(1); }
  100% { transform: translateX(0) translateY(0) scaleX(1); opacity: 1; }
}
.tb-cust.is-waiting { animation: tb-cust-idle 2.1s ease-in-out infinite; animation-delay: var(--idle-delay, 0s); }
@keyframes tb-cust-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}
.tb-cust.is-leaving { animation: tb-cust-walk-out 0.75s cubic-bezier(0.4, 0, 0.6, 1) forwards; pointer-events: none; }
@keyframes tb-cust-walk-out {
  0%   { transform: translateX(0) translateY(0); opacity: 1; }
  30%  { transform: translateX(60px) translateY(-5px); opacity: 1; }
  100% { transform: translateX(220px) translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-cust.is-arriving, .tb-cust.is-waiting, .tb-cust.is-leaving { animation: none; }
}

.tb-ticket-rail {
  position: absolute; left: 4%; right: 4%; top: 57.5%; z-index: 22;
  display: flex; gap: 10px; align-items: flex-start;
  min-height: 118px;
  padding: 12px 10px 6px;
  border-radius: 12px;
  background: rgba(8, 5, 3, 0.34);
  overflow-x: auto;
}
.tb-ticket-rail::before {
  content: "";
  position: absolute; top: 6px; left: 8px; right: 8px; height: 3px;
  background: #9aa0a8; border-radius: 2px;   /* the rail itself */
}
.tb-ticket {
  position: relative; flex: 0 0 auto;
  width: 118px;
  padding: 10px 8px 8px;
  border: 0; border-radius: 2px 2px 8px 8px;
  background: var(--rt-paper); color: var(--rt-ink);
  font-family: var(--mono);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
  animation: tb-ticket-in 0.35s ease;
  text-align: left;
}
@keyframes tb-ticket-in {
  from { transform: translateY(-18px) rotate(3deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.tb-ticket::before {
  content: "";
  position: absolute; top: -6px; left: 50%; translate: -50%;
  width: 26px; height: 10px;
  background: #9aa0a8; border-radius: 2px;
}
.tb-ticket.is-pinned { outline: 3px solid var(--rt-rust); outline-offset: 2px; }
.tb-ticket:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tb-ticket-head { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; }
.tb-ticket-cust { font-size: 15px; }
.tb-patience {
  height: 5px; margin: 5px 0;
  border-radius: 3px; background: rgba(45, 36, 23, 0.16);
  overflow: hidden;
}
.tb-patience-fill { height: 100%; border-radius: 3px; background: var(--rt-good); transition: width 0.5s linear; }
.tb-patience-fill.is-mid { background: var(--rt-warn); }
.tb-patience-fill.is-low { background: var(--rt-bad); }

.tb-mini-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; padding: 4px 0 2px; }
.tb-mini-layer {
  position: relative;
  width: var(--mini-w, 54px); height: var(--mini-h, 7px);
  border-radius: var(--mini-r, 3px);
  background: var(--layer-c, #ccc);
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.tb-mini-layer .tb-layer-art { width: 150%; height: 260%; }

.tb-passcounter {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(0, 0, 0, 0.1) 120px 124px),
    linear-gradient(180deg, #8a6238 0%, var(--rt-wood) 52%, #5d3e22 100%);
}
.tb-serve-spot {
  position: absolute; left: 38%; bottom: 7%; z-index: 22;
  display: flex; flex-direction: column-reverse; align-items: center;
  min-width: 120px; min-height: 40px;
}
.tb-serve-spot .tb-layer { --layer-w: 92px; height: 12px; font-size: 0; }
.tb-serve-spot.is-serving { animation: tb-serve-out 0.55s ease forwards; }
@keyframes tb-serve-out {
  40% { transform: translateY(-30px) scale(0.92); opacity: 1; }
  100% { transform: translateY(-150px) scale(0.6); opacity: 0; }
}

.tb-bell {
  position: absolute; right: 6%; bottom: 4%; z-index: 23;
  display: grid; justify-items: center; gap: 2px;
  min-width: 104px; padding: 10px 14px 8px;
  border: 2px solid #1d2023; border-radius: 14px;
  background: linear-gradient(180deg, #d9a92c 0%, #a87b16 100%);
  color: #241d12;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}
.tb-bell:hover, .tb-bell:focus-visible { filter: brightness(1.1); outline: none; }
.tb-bell:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.tb-bell[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); }
.tb-bell-art { font-size: 26px; }
.tb-bell-label { font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.tb-bell.is-ringing .tb-bell-art { animation: tb-ring 0.4s ease; }
@keyframes tb-ring {
  25% { transform: rotate(-16deg); }
  60% { transform: rotate(12deg); }
  100% { transform: rotate(0); }
}

/* ---- score / shift overlays -------------------------------------------- */
.tb-score-grid { display: grid; gap: 10px; width: 100%; }
.tb-meter { display: grid; grid-template-columns: 92px 1fr 48px; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.tb-meter-track { height: 12px; border-radius: 6px; background: rgba(45, 36, 23, 0.14); overflow: hidden; }
.tb-meter-fill { height: 100%; border-radius: 6px; background: var(--rt-good); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tb-meter-fill.is-mid { background: var(--rt-warn); }
.tb-meter-fill.is-low { background: var(--rt-bad); }
.tb-meter-num { font-family: var(--mono); text-align: right; }
.tb-reaction { font-size: 15px; font-style: italic; color: var(--rt-ink-soft); }
.tb-order-total { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-family: var(--pixel); font-size: 22px; }
.tb-order-total .tb-tip { color: #8a6d1c; }

.tb-shift-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.tb-shift-table td { padding: 4px 2px; border-bottom: 1px dashed var(--rt-line); }
.tb-shift-table td:last-child { text-align: right; font-weight: 800; }
.tb-shift-big { font-family: var(--pixel); font-size: 40px; line-height: 1; }
.tb-promo-banner {
  width: 100%; padding: 8px 12px;
  border-radius: 8px; text-align: center;
  background: rgba(255, 216, 77, 0.18); border: 1px solid rgba(255, 216, 77, 0.5);
  color: #8a6d1c; font-size: 14px;
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  .tb-hud { gap: 5px; padding: 8px 10px; }
  .tb-hud-chip { min-height: 28px; padding: 4px 9px; font-size: 12px; }
  .tb-facing-tabs { margin-left: 0; order: 5; width: 100%; justify-content: center; gap: 6px; }
  .tb-facing-tab { min-height: 30px; padding: 4px 10px; }
  .tb-pov { height: clamp(420px, 62vh, 560px); }
  .tb-turn { width: 44px; height: 72px; }   /* meet the ~44px touch-target guideline */
  .tb-pinned-ticket { width: 128px; }
  .tb-plate-rack { min-width: 0; }
  .tb-spatula { right: 12%; scale: 0.82; }
  .tb-bins { flex-wrap: wrap; justify-content: center; }
  .tb-bin { min-width: 56px; }
  .tb-hint { bottom: auto; top: 2%; }
  .tb-passwindow { width: 88%; }
  .tb-fry-station { bottom: 1%; scale: 0.86; }
  .tb-soda { top: 4%; right: 2%; width: 78px; }
  .tb-hud-rank { display: none; }  /* HUD is crowded enough on small screens */
  .tb-event-banner { padding: 6px 10px; gap: 8px; }
  .tb-event-text strong { font-size: 12px; }
  .tb-event-text span { font-size: 10.5px; }
}