/* ============================================================
   modern.css — 2026 modern 2D-game visual layer.
   Loaded LAST so it overrides the retro pixel styling without
   editing the original stylesheets. Drop pixel fonts, swap to
   smooth glass surfaces, soft elevation shadows, and a unified
   indigo / violet / cyan palette. Keeps the existing layout
   geometry intact.
   ============================================================ */

:root {
  /* Modern palette */
  --m-bg-1: #0b0d18;
  --m-bg-2: #131830;
  --m-bg-3: #1c2147;
  --m-card: rgba(20, 24, 44, 0.78);
  --m-card-hi: rgba(30, 36, 64, 0.86);
  --m-line: rgba(148, 163, 184, 0.14);
  --m-line-bright: rgba(255, 255, 255, 0.08);
  --m-text: #eaf0ff;
  --m-text-dim: #a8b3cc;
  --m-violet: #7c5cff;
  --m-violet-2: #a78bfa;
  --m-cyan: #22d3ee;
  --m-emerald: #34d399;
  --m-amber: #fbbf24;
  --m-coral: #f87171;
  --m-rose: #fb7185;
  --m-pink: #ec4899;

  --m-shadow-1: 0 1px 2px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.32);
  --m-shadow-2: 0 4px 14px rgba(0,0,0,0.32), 0 18px 44px rgba(0,0,0,0.42);
  --m-shadow-3: 0 8px 24px rgba(0,0,0,0.42), 0 30px 80px rgba(0,0,0,0.5);
  --m-glow-violet: 0 0 32px rgba(124, 92, 255, 0.32);
  --m-glow-cyan: 0 0 28px rgba(34, 211, 238, 0.3);

  --m-radius-sm: 8px;
  --m-radius:    14px;
  --m-radius-lg: 22px;

  --m-font: 'Plus Jakarta Sans', 'Outfit', 'Inter', system-ui, -apple-system,
             Segoe UI, Roboto, sans-serif;
  --m-font-display: 'Outfit', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ── Global typography reset: drop pixel fonts everywhere ── */
html, body, .game, .game *, .game *::before, .game *::after {
  font-family: var(--m-font) !important;
  font-feature-settings: "ss01", "cv11", "tnum";
}
.game *, .game *::after, .game *::before { image-rendering: auto !important; }

body {
  color: var(--m-text);
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(124, 92, 255, 0.16) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(34, 211, 238, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #161a36 0%, #0e1024 55%, #07091a 100%);
}

/* ====================================================================
   STORE SHELL — softer gradient, refined hairline border + soft shadow
   ==================================================================== */
.store-shell {
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4);
  background:
    linear-gradient(180deg, rgba(60, 72, 110, 0.7) 0%, rgba(40, 50, 80, 0.95) 100%);
}

/* ── Walls: smooth painted plaster, drop wood plank pattern ── */
.wall-top {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #2c3260 0%, #1e2348 60%, #161a36 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.35) !important;
}
/* Replace the chunky orange dotted molding with a slim accent rail */
.wall-top::after {
  background:
    linear-gradient(90deg,
      rgba(124, 92, 255, 0.0) 0%,
      rgba(124, 92, 255, 0.95) 18%,
      rgba(34, 211, 238, 0.95) 50%,
      rgba(124, 92, 255, 0.95) 82%,
      rgba(124, 92, 255, 0.0) 100%) !important;
  height: 2px !important;
  border: none !important;
  bottom: -1px !important;
  filter: drop-shadow(0 0 8px rgba(124, 92, 255, 0.55))
          drop-shadow(0 0 14px rgba(34, 211, 238, 0.35));
  opacity: 0.95;
}

/* ── Windows-sky: cleaner morning gradient ── */
.windows-sky {
  background: linear-gradient(180deg, #b9e6ff 0%, #7eb9ec 55%, #5a8fcc 100%) !important;
  border-radius: 8px;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.18),
    inset 0 -8px 18px rgba(0,0,0,0.12);
}
.windows-sky.night {
  background: linear-gradient(180deg, #0a1240 0%, #1a1f55 50%, #221b48 100%) !important;
}
.windows-sky.dusk {
  background: linear-gradient(180deg, #4a4380 0%, #aa6a8c 55%, #e88e6e 100%) !important;
}
.windows-sky.dawn {
  background: linear-gradient(180deg, #ffd6c4 0%, #ffaa9a 45%, #b88dd4 100%) !important;
}

/* ── Sun/moon: smoother orb with soft halos ── */
.sky-orb.sun .orb-core {
  background:
    radial-gradient(circle at 38% 32%, #fffce8 0%, #fff2b0 25%, #ffd166 55%, #ff9a3d 85%, #f06632 100%) !important;
  box-shadow:
    0 0 14px rgba(255,238,170,0.95),
    0 0 36px rgba(255,200,90,0.7),
    0 0 70px rgba(255,160,60,0.4) !important;
}
.sky-orb.sun .orb-flare {
  background: radial-gradient(circle, rgba(255,225,160,0.5) 0%, rgba(255,180,80,0.18) 38%, transparent 65%) !important;
}
.sky-orb.moon .orb-core {
  background:
    radial-gradient(circle at 60% 32%, rgba(60,80,140,0.32) 0 1.4px, transparent 2px),
    radial-gradient(circle at 32% 58%, rgba(60,80,140,0.28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 68%, rgba(60,80,140,0.3) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 32% 30%, #fdfcff 0%, #e3e7f7 38%, #b9c2e0 70%, #7c87b8 100%) !important;
  box-shadow:
    0 0 14px rgba(220,230,255,0.85),
    0 0 28px rgba(170,190,240,0.5),
    0 0 60px rgba(140,160,220,0.28) !important;
}

/* ── Storefront windows: cleaner glass without hard 3px frames ── */
.window {
  border: 2px solid rgba(15, 18, 36, 0.85) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.32) 0%,
      rgba(255,255,255,0.06) 30%,
      rgba(255,255,255,0) 60%),
    linear-gradient(180deg,
      rgba(220, 245, 255, 0.16) 0%,
      rgba(170, 215, 250, 0.06) 55%,
      rgba(110, 165, 225, 0.18) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -8px 16px rgba(40,60,90,0.22),
    0 4px 12px rgba(0,0,0,0.32) !important;
}
/* Drop the chunky brown muntin cross — replace with subtle vertical mullion */
.window::before {
  background:
    linear-gradient(90deg,
      transparent calc(50% - 0.5px),
      rgba(15, 18, 36, 0.65) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)) !important;
}
.window::after {
  background: linear-gradient(125deg,
    transparent 0 22%,
    rgba(255,255,255,0.32) 26% 30%,
    transparent 38% 60%,
    rgba(255,255,255,0.18) 62% 65%,
    transparent 70%) !important;
}

/* ── Store banner (FARM BOY): cleaner modern oval ── */
.store-banner {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 6px !important;
  padding: 12px 30px !important;
  background:
    linear-gradient(180deg, #161826 0%, #0a0c18 100%) !important;
  border: 2px solid #d4a84a !important;
  color: #fbe9b6 !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.5),
    0 12px 28px rgba(0,0,0,0.55),
    0 0 36px rgba(212, 168, 74, 0.3),
    inset 0 1px 0 rgba(255,230,170,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6) !important;
}

/* ====================================================================
   FLOOR — softer terrazzo-style tiles instead of hard checkerboard
   ==================================================================== */
.store-floor {
  background:
    /* warm spotlights */
    radial-gradient(ellipse at 18% 0%, rgba(124, 92, 255, 0.14), transparent 36%),
    radial-gradient(ellipse at 82% 0%, rgba(34, 211, 238, 0.10), transparent 40%),
    /* subtle floor speckle */
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.05) 0 1px, transparent 2px) 0 0/64px 64px,
    radial-gradient(circle at 78% 76%, rgba(0,0,0,0.06) 0 1px, transparent 2px) 0 0/64px 64px,
    /* very light grout grid */
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/96px 96px,
    linear-gradient(180deg, rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/96px 96px,
    linear-gradient(180deg, #ecf2f3 0%, #d8e1e2 50%, #c2cccd 100%) !important;
}

/* ====================================================================
   HUD — modern glass card with violet→cyan accent stripe
   ==================================================================== */
.hud {
  background:
    linear-gradient(180deg, rgba(28, 32, 60, 0.82) 0%, rgba(16, 20, 40, 0.92) 100%) !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    var(--m-shadow-2),
    0 0 0 1px rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(20px) saturate(1.1);
}
.hud::before {
  background: linear-gradient(90deg,
    rgba(124, 92, 255, 0) 0%,
    rgba(124, 92, 255, 0.95) 22%,
    rgba(34, 211, 238, 0.95) 50%,
    rgba(124, 92, 255, 0.95) 78%,
    rgba(124, 92, 255, 0) 100%) !important;
  height: 1.5px !important;
  filter: drop-shadow(0 0 6px rgba(124, 92, 255, 0.6));
  opacity: 1;
}
.hud .stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.18) 100%),
    rgba(20, 24, 44, 0.7) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.25) !important;
  color: var(--m-text) !important;
}
.hud .stat:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.20) 100%),
    rgba(34, 40, 72, 0.8) !important;
}
.hud .stat b {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.2px !important;
}
.hud .stat.progress-stat {
  border-left: 2px solid var(--m-amber) !important;
  color: #fde68a !important;
}
.hud-goals-label {
  border-left: 2px solid var(--m-amber) !important;
  background: rgba(0,0,0,0.3) !important;
  color: #fde68a !important;
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  border-radius: 0 8px 8px 0 !important;
}
.hud-goal {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  background: rgba(15, 18, 36, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 999px !important;
  color: var(--m-text-dim) !important;
}
.hud-goal.done {
  background: rgba(52, 211, 153, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #a7f3d0 !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.18) !important;
}
.hud-goal.fail {
  background: rgba(248, 113, 113, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}
.hud .stat.combo-stat,
.hud .stat.event-stat,
.hud .stat.twist-stat,
.hud .stat.perk-stat {
  border-radius: 12px !important;
  font-family: var(--m-font-display) !important;
  letter-spacing: 0.4px !important;
}
.hud .stat.perk-stat .perk-name { font-family: var(--m-font-display) !important; font-size: 11px !important; }
.hud .stat.twist-stat .twist-icon { font-family: var(--m-font-display) !important; }
.summary-unlock { font-family: var(--m-font-display) !important; font-size: 12px !important; letter-spacing: 1px !important; }

/* HUD label colors retained but cleaned — drop heavy retro glow */
.stat b, .footer-bar b { text-shadow: 0 0 10px rgba(74, 222, 128, 0.45) !important; }
#moneyLabel  { color: #fde047 !important; text-shadow: 0 0 10px rgba(253, 224, 71, 0.5) !important; }
#clockLabel  { color: #67e8f9 !important; text-shadow: 0 0 10px rgba(34, 211, 238, 0.45) !important; }
#dayLabel    { color: #fca5a5 !important; text-shadow: 0 0 10px rgba(252, 165, 165, 0.45) !important; }
#hoursLabel  { color: #fcd34d !important; text-shadow: 0 0 10px rgba(252, 211, 77, 0.45) !important; }
#walkoutLabel{ color: #fb7185 !important; text-shadow: 0 0 10px rgba(251, 113, 133, 0.45) !important; }
#servedLabel { color: #6ee7b7 !important; text-shadow: 0 0 10px rgba(110, 231, 183, 0.45) !important; }
#storeStatus { color: #6ee7b7 !important; text-shadow: 0 0 10px rgba(110, 231, 183, 0.45) !important; }

/* ====================================================================
   FOOTER — drop hard pixel border, swap to glass card
   ==================================================================== */
.footer-bar {
  background: linear-gradient(180deg, rgba(24, 28, 56, 0.85) 0%, rgba(14, 18, 38, 0.95) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    var(--m-shadow-1) !important;
  font-size: 12px !important;
  font-weight: 500;
  color: var(--m-text-dim) !important;
}
.footer-bar .selected {
  color: var(--m-cyan) !important;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.45) !important;
}

/* ====================================================================
   STAFF PANEL + SERVICE OFFICE — already glassy, just refine
   ==================================================================== */
.staff-panel,
.service-office {
  background:
    linear-gradient(165deg, rgba(28, 34, 64, 0.78) 0%, rgba(14, 18, 38, 0.92) 100%) !important;
  border: 1px solid rgba(124, 92, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    var(--m-shadow-2) !important;
  backdrop-filter: blur(22px) saturate(1.1);
}
.staff-panel h2,
.service-office h2 {
  font-family: var(--m-font-display) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2.4px !important;
  color: #cbd5e1 !important;
  text-shadow: 0 0 12px rgba(124, 92, 255, 0.25) !important;
  text-transform: uppercase !important;
}
.office-action-cta {
  font-family: var(--m-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(34, 211, 238, 0.12)) !important;
  border: 1px solid rgba(124, 92, 255, 0.32) !important;
  color: #d8defb !important;
}
.office-action-cta:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.3), rgba(34, 211, 238, 0.22)) !important;
  border-color: rgba(124, 92, 255, 0.55) !important;
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.18) !important;
}
.office-action-cta strong {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  color: #c4b5fd !important;
}
.office-stat-item .stat-value,
.insight-line b {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Cashier overview chips */
.cashier-overview .overview-row {
  background: rgba(15, 18, 36, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
}
.cashier-overview .overview-row b {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.staff-card {
  background: rgba(15, 18, 36, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
}
.staff-card:hover, .staff-card.selected {
  background: rgba(40, 50, 90, 0.55) !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
  box-shadow: 0 6px 22px rgba(34, 211, 238, 0.15), 0 0 0 1px rgba(34, 211, 238, 0.25) !important;
}
.staff-status-pill {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
  border-radius: 999px !important;
}
.legend .pill {
  background: rgba(15, 18, 36, 0.5) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  font-weight: 500;
}

/* Manager card */
.manager-card {
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(60, 30, 10, 0.32), rgba(24, 16, 8, 0.32)) !important;
  border: 1px solid rgba(212, 168, 74, 0.25) !important;
}
.manager-card:hover {
  background: linear-gradient(135deg, rgba(80, 40, 14, 0.42), rgba(36, 22, 10, 0.36)) !important;
  border-color: rgba(212, 168, 74, 0.5) !important;
}
.manager-card.selected::after {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  background: rgba(0,0,0,0.7) !important;
}
.manager-card.needs-help .manager-alert-badge {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.6px !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
}

/* ====================================================================
   LANES — refined counter look, drop hard offset shadows
   ==================================================================== */
.lane {
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    var(--m-shadow-1) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.06) 30%,
      rgba(17, 24, 39, 0.04) 100%) !important;
}
.lane:hover {
  border-color: rgba(34, 211, 238, 0.32) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.3),
    0 0 0 1px rgba(34, 211, 238, 0.16) !important;
}
.lane.assignable {
  border-color: rgba(34, 211, 238, 0.55) !important;
  background: rgba(34, 211, 238, 0.06) !important;
}
.lane.load-low { background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(255, 255, 255, 0.04) 42%, transparent) !important; border-color: rgba(52, 211, 153, 0.22) !important; }
.lane.load-mid { background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(255, 255, 255, 0.05) 42%, transparent) !important; border-color: rgba(251, 191, 36, 0.28) !important; }
.lane.load-high { background: linear-gradient(180deg, rgba(248, 113, 113, 0.20), rgba(255, 255, 255, 0.05) 42%, transparent) !important; border-color: rgba(248, 113, 113, 0.32) !important; }

.lane-label {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  color: #1e1b3a !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.45) !important;
}
.lane-meta {
  background: rgba(255,255,255,0.34) !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}
.lane-cta {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.6px !important;
  color: #0f766e !important;
}
.lane-status {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.6px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  text-transform: uppercase;
}
.lane.express .lane-label { font-size: 7px !important; letter-spacing: 0.4px !important; }
.lane.express .lane-label::before { font-size: 7px !important; letter-spacing: 0.6px !important; }
.lane.express .lane-status { font-size: 7px !important; }
.lane-action-banner,
.lane-manager-timer-label {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  letter-spacing: 0.4px !important;
  border-radius: 999px !important;
}
.issue-bubble {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  border-radius: 12px !important;
  border-width: 1.5px !important;
}

/* Cashier booth — drop chunky offset shadow, smoother edges */
.cashier-booth {
  border: 2px solid #2a1a08 !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.22),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 4px 12px rgba(0,0,0,0.32) !important;
  background:
    radial-gradient(circle at 6px 6px, #fde68a 1.4px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 6px) 6px, #fde68a 1.4px, transparent 2.4px),
    radial-gradient(circle at 6px calc(100% - 6px), #fde68a 1.4px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #fde68a 1.4px, transparent 2.4px),
    linear-gradient(180deg, #d59166 0%, #b07440 45%, #855131 100%) !important;
}

/* Belt — smoother dark belt with cleaner divider lines */
.belt {
  border: 2px solid #1c1f29 !important;
  border-left: 6px solid #0f1218 !important;
  border-right: 6px solid #0f1218 !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 4px 14px rgba(0,0,0,0.35) !important;
  background:
    repeating-linear-gradient(to bottom,
      #14171f 0,
      #14171f 18px,
      #2a2f3d 18px,
      #2a2f3d 20px) !important;
}
.scanner {
  border-radius: 6px !important;
  background: linear-gradient(180deg, #1e3a8a 0%, #2563eb 45%, #38bdf8 100%) !important;
  border: 1.5px solid #0c2d6b !important;
  box-shadow:
    0 0 16px rgba(34,211,238,0.55),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.belt-divider {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  border: 1px solid rgba(146, 64, 14, 0.6) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 8px rgba(251,191,36,0.35) !important;
}

/* Stanchion + velvet rope: smoother rope, gold polished post */
.rope::before, .rope::after {
  background: linear-gradient(90deg,
    #6b3007 0%, #b06214 20%, #f6c266 50%, #b06214 80%, #6b3007 100%) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 -3px 6px rgba(0,0,0,0.45) !important;
  border-radius: 6px 6px 3px 3px !important;
}
.rope-strap {
  background: linear-gradient(180deg, #fda4af 0%, #f43f5e 35%, #be123c 65%, #f43f5e 100%) !important;
  border-radius: 4px !important;
}

/* Belt items: softer borders */
.belt-item {
  border: 1.5px solid rgba(0,0,0,0.32) !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.belt-item.circle { border-radius: 50% !important; }

/* Queue space — softer floor markers */
.queue-space {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0,
    rgba(255, 255, 255, 0.12) 22px,
    rgba(0, 0, 0, 0.10) 22px,
    rgba(0, 0, 0, 0.10) 25px) !important;
  border-radius: 12px !important;
}

/* Carts in lanes — cleaner basket, less hard shadow */
.cart::before {
  border-radius: 6px 6px 4px 4px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 3px 8px rgba(0,0,0,0.2) !important;
}

/* ====================================================================
   CASHIER + CUSTOMER SPRITES — keep cartoon shape, soften edges
   ==================================================================== */
.cashier-sprite {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) !important;
}
.cashier-sprite.selected {
  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,0.45))
    drop-shadow(0 0 6px rgba(34, 211, 238, 0.85))
    drop-shadow(0 0 14px rgba(34, 211, 238, 0.5)) !important;
}
.cashier-head, .cashier-hair, .customer .head, .customer .hair {
  border-width: 1px !important;
}

/* Customer mood bubble: cleaner badge */
.customer-mood {
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fafbff, #e8eaff) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 2px rgba(0,0,0,0.06) !important;
}
.customer-mood.happy { background: linear-gradient(180deg, #d1fae5, #a7f3d0) !important; }
.customer-mood.sad   { background: linear-gradient(180deg, #fef3c7, #fde68a) !important; }
.customer-mood.angry { background: linear-gradient(180deg, #fee2e2, #fecaca) !important; }

/* Patience meter: refined */
.patience {
  border: 1px solid rgba(15, 18, 36, 0.55) !important;
  border-radius: 6px !important;
  background: rgba(15, 18, 36, 0.7) !important;
  height: 5px !important;
}
.patience-fill {
  background: linear-gradient(to right, #f43f5e, #fbbf24, #34d399) !important;
  box-shadow: 0 0 4px rgba(52, 211, 153, 0.25) !important;
}

/* Floor shadow under customers — subtler */
.customer::after {
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.18) 55%,
    transparent 78%) !important;
}

/* Checkout pop: modern font */
.checkout-pop {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.4px !important;
  color: #6ee7b7 !important;
  text-shadow:
    0 0 10px rgba(110, 231, 183, 0.55),
    0 2px 6px rgba(0,0,0,0.55) !important;
}

/* ====================================================================
   CART CORRAL + EXPRESS LANES + BASKET STACK — cleaner labels
   ==================================================================== */
.abandoned-cart-line {
  border-radius: 12px !important;
}
.abandoned-cart-sign {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: #1f1300 !important;
  text-shadow: none !important;
}
.abandoned-cart-count,
.abandoned-cart-cap {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
}
.abandoned-cart-flag,
.basket-stack-block,
.abandoned-cart-repel,
.basket-stack-count {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 6px !important;
}
.basket-stack {
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(20, 24, 44, 0.85), rgba(14, 18, 38, 0.95)) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    var(--m-shadow-1) !important;
}
.basket-stack-count {
  border: 2px solid #0f1320 !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}

/* ====================================================================
   TOAST + HINT + HELP — modern
   ==================================================================== */
.toast {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(28, 32, 60, 0.96), rgba(14, 18, 38, 0.96)) !important;
  border: 1px solid rgba(124, 92, 255, 0.35) !important;
  box-shadow: var(--m-shadow-2), 0 0 24px rgba(124, 92, 255, 0.18) !important;
  color: #eaf0ff !important;
}

.help-fab {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  background: rgba(20, 24, 44, 0.9) !important;
  border: 1px solid rgba(124, 92, 255, 0.4) !important;
  color: #c4b5fd !important;
  box-shadow: var(--m-shadow-1), 0 0 14px rgba(124, 92, 255, 0.2) !important;
}
.help-fab:hover {
  border-color: rgba(124, 92, 255, 0.7) !important;
  box-shadow: var(--m-shadow-2), 0 0 22px rgba(124, 92, 255, 0.4) !important;
}
.help-card,
.hint-card {
  font-family: var(--m-font) !important;
  background: linear-gradient(160deg, rgba(28, 32, 60, 0.96) 0%, rgba(14, 18, 38, 0.96) 100%) !important;
  border: 1px solid rgba(124, 92, 255, 0.32) !important;
  border-radius: 18px !important;
  box-shadow: var(--m-shadow-3), 0 0 0 1px rgba(124, 92, 255, 0.08) !important;
}
.help-card h2,
.hint-card strong {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #fde047 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 14px rgba(253, 224, 71, 0.32) !important;
}
.help-section summary {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  color: #fde047 !important;
  border-radius: 10px;
}
.help-actions button {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.4px !important;
  border-radius: 12px !important;
}
.help-actions button.primary {
  background: linear-gradient(135deg, #7c5cff 0%, #5b3cf0 100%) !important;
  border-color: rgba(124, 92, 255, 0.6) !important;
  box-shadow: 0 4px 16px rgba(124, 92, 255, 0.4) !important;
}

/* ====================================================================
   SUMMARY CARD — modern
   ==================================================================== */
.overlay {
  background: rgba(5, 6, 18, 0.86) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
}
.summary-card {
  background: linear-gradient(160deg, rgba(28, 32, 64, 0.95) 0%, rgba(14, 18, 40, 0.97) 100%) !important;
  border: 1px solid rgba(124, 92, 255, 0.22) !important;
  border-radius: 24px !important;
  box-shadow:
    var(--m-shadow-3),
    0 0 0 1px rgba(124, 92, 255, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.summary-card h2 {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: 0.5px !important;
  color: #fbe9b6 !important;
  text-shadow: 0 0 22px rgba(251, 191, 36, 0.35) !important;
}
.summary-stat,
.summary-goal,
.summary-lane {
  background: rgba(15, 18, 36, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
}
.summary-button {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #5b3cf0 60%, #4926d2 100%) !important;
  border: 1px solid rgba(124, 92, 255, 0.6) !important;
  box-shadow:
    0 4px 14px rgba(124, 92, 255, 0.4),
    0 0 28px rgba(124, 92, 255, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.summary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #8e72ff 0%, #6e4cff 60%, #5b34e2 100%) !important;
  box-shadow:
    0 6px 22px rgba(124, 92, 255, 0.55),
    0 0 38px rgba(124, 92, 255, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.summary-coaching {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(124, 92, 255, 0.08)) !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  border-radius: 14px !important;
}
.summary-coaching strong {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.6px !important;
  color: #fde047 !important;
}

.summary-perk-picker {
  border-radius: 18px !important;
  border: 1px solid rgba(124, 92, 255, 0.28) !important;
}
.summary-perk-picker .picker-head strong {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  color: #fde047 !important;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.4) !important;
}
.summary-perk-picker .twist-preview b,
.summary-perk-picker .twist-preview .tw-icon,
.summary-perk-picker .perk-card .perk-card-name {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  font-size: 12px !important;
}
.summary-perk-picker .perk-card { border-radius: 14px !important; }

/* ====================================================================
   TUTORIAL OVERLAY + CHOICE CARD — modern
   ==================================================================== */
.tutorial-card {
  font-family: var(--m-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  line-height: 1.45 !important;
  background: linear-gradient(160deg, rgba(28, 32, 64, 0.97), rgba(14, 18, 38, 0.97)) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.7) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--m-shadow-3),
    0 0 0 1px rgba(251, 191, 36, 0.18),
    0 0 36px rgba(251, 191, 36, 0.18) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5) !important;
  color: #f5edd5 !important;
}
.tutorial-card strong {
  display: block;
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
  color: #fde047 !important;
  margin-bottom: 10px !important;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.5), 0 1px 0 rgba(0,0,0,0.6) !important;
}
.tutorial-card b { color: #fde047 !important; font-weight: 700 !important; }
.tutorial-arrow {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
}
.tutorial-target-highlight {
  border: 2px solid #fbbf24 !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 9999px rgba(6, 8, 15, 0.62),
    0 0 0 2px rgba(251, 191, 36, 0.32),
    0 0 32px rgba(251, 191, 36, 0.4) !important;
}

.tutorial-choice-overlay {
  background: rgba(5, 6, 18, 0.92) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
}
.tutorial-choice-card {
  background: linear-gradient(160deg, rgba(30, 36, 70, 0.97) 0%, rgba(14, 18, 38, 0.97) 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.55) !important;
  border-radius: 24px !important;
  box-shadow:
    var(--m-shadow-3),
    0 0 0 1px rgba(251, 191, 36, 0.18),
    0 0 80px rgba(251, 191, 36, 0.18) !important;
}
.tutorial-choice-badge {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 1.6px !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  background: linear-gradient(180deg, #fde047, #ca8a04) !important;
  color: #3b1f00 !important;
  box-shadow: 0 4px 14px rgba(202, 138, 4, 0.45) !important;
}
.tutorial-choice-title {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  letter-spacing: 0px !important;
  color: #fde047 !important;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
}
.tutorial-choice-body {
  font-family: var(--m-font) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: #d8defb !important;
  text-shadow: none !important;
}
.tutorial-choice-btn {
  border-radius: 16px !important;
  border: 1.5px solid rgba(255,255,255,0.1) !important;
}
.tutorial-choice-btn .btn-main {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}
.tutorial-choice-btn .btn-sub {
  font-family: var(--m-font) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  opacity: 0.85 !important;
}
.tutorial-choice-yes {
  background: linear-gradient(135deg, #7c5cff 0%, #5b3cf0 100%) !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #fff !important;
  box-shadow:
    0 4px 14px rgba(124, 92, 255, 0.45),
    0 0 32px rgba(124, 92, 255, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.tutorial-choice-yes:hover {
  border-color: #fbbf24 !important;
  box-shadow:
    0 6px 22px rgba(124, 92, 255, 0.6),
    0 0 44px rgba(251, 191, 36, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.tutorial-choice-no {
  background: linear-gradient(180deg, rgba(40, 46, 80, 0.85), rgba(20, 24, 44, 0.85)) !important;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ====================================================================
   CINEMATIC INTRO — drop scanlines + pixelation, modern golden-hour
   ==================================================================== */
.cinematic-overlay {
  font-family: var(--m-font) !important;
  image-rendering: auto !important;
}
.cine-scanlines { display: none !important; }
.cine-vignette {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.4) 88%, rgba(0,0,0,0.7) 100%) !important;
}

/* Sky: cinematic dawn → magenta */
.cine-sky {
  background:
    radial-gradient(ellipse at 22% 110%, rgba(255, 180, 120, 0.6) 0%, transparent 55%),
    linear-gradient(180deg, #ffe07a 0%, #ff9472 30%, #ec5e8d 60%, #7c4dc8 100%) !important;
}
.cine-sun {
  background: radial-gradient(circle at 38% 38%, #fffce8 0%, #ffe38a 38%, #ff9f5a 72%, #f06632 100%) !important;
  box-shadow:
    0 0 48px rgba(255, 220, 140, 0.85),
    0 0 110px rgba(255, 180, 100, 0.55),
    0 0 200px rgba(255, 140, 80, 0.3) !important;
}

/* Cleaner clouds — single soft puffs */
.cine-cloud {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  filter: blur(0.5px) !important;
  box-shadow:
    8px -10px 0 -2px rgba(255,255,255,0.86),
    -10px -8px 0 -4px rgba(255,255,255,0.86),
    16px -2px 0 -3px rgba(255,255,255,0.78),
    -16px 0 0 -4px rgba(255,255,255,0.72),
    0 6px 18px rgba(0, 30, 60, 0.18) !important;
}

.cine-birds {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
}

/* Hills: smoother silhouettes */
.cine-hills {
  background:
    radial-gradient(ellipse 280px 105px at 8% 100%,  #4d8a4a 0%, #4d8a4a 92%, transparent 93%),
    radial-gradient(ellipse 360px 120px at 28% 100%, #3f7a44 0%, #3f7a44 92%, transparent 93%),
    radial-gradient(ellipse 300px 95px at 48% 100%,  #4d8a4a 0%, #4d8a4a 92%, transparent 93%),
    radial-gradient(ellipse 380px 130px at 72% 100%, #3a7040 0%, #3a7040 92%, transparent 93%),
    radial-gradient(ellipse 320px 110px at 92% 100%, #4d8a4a 0%, #4d8a4a 92%, transparent 93%) !important;
}
.cine-tree {
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25)) !important;
}

/* Parking lot, lines */
.cine-lot {
  background: linear-gradient(180deg, #2f343f 0%, #1c1f29 100%) !important;
}
.cine-parking-lines {
  opacity: 0.85 !important;
  box-shadow: 0 22px 0 rgba(253, 224, 71, 0.45) !important;
}

/* Lamp */
.cine-lamp::before {
  background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 60%, #f59e0b 100%) !important;
  box-shadow:
    0 0 36px rgba(253, 224, 71, 0.85),
    0 0 100px rgba(253, 224, 71, 0.45) !important;
  border-radius: 12px 12px 4px 4px !important;
}

/* Building: cleaner stone façade with subtle timber lines */
.cine-building {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.32)),
    linear-gradient(180deg, #c1ac8a 0%, #a8916d 100%) !important;
  border-top: 4px solid #2a1f0e !important;
  border-bottom: 3px solid #18100a !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,0.1),
    inset 0 -16px 28px rgba(0,0,0,0.42),
    0 14px 28px rgba(0,0,0,0.45) !important;
  border-radius: 4px 4px 0 0;
}
.cine-roofline {
  background: linear-gradient(180deg, #1a120a 0%, #2a1f0e 100%) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35) !important;
  border-radius: 6px 6px 0 0 !important;
}
.cine-awning {
  background: repeating-linear-gradient(90deg,
    #1a1208 0 32px,
    #f5e7c3 32px 64px) !important;
  border-top: 2px solid #050300 !important;
  border-bottom: 2px solid #050300 !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%) !important;
}

/* Sign: modern oval with bold display font */
.cine-sign {
  font-family: var(--m-font-display) !important;
  background: linear-gradient(180deg, #1a1208 0%, #0a0604 60%, #050300 100%) !important;
  border: 3px solid #d4a84a !important;
  color: #f5e7c3 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 18px rgba(212, 168, 74, 0.45) !important;
  box-shadow:
    0 0 60px rgba(212, 168, 74, 0.5),
    0 0 120px rgba(212, 168, 74, 0.25),
    0 12px 24px rgba(0,0,0,0.6),
    inset 0 2px 0 rgba(255,230,170,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.6) !important;
}
.cine-sign-main {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 38px !important;
  letter-spacing: 6px !important;
  color: #f5e7c3 !important;
}
.cine-sign-star {
  font-size: 28px !important;
  color: #f4c060 !important;
  text-shadow: 0 0 14px rgba(244, 192, 96, 0.85) !important;
}
.cine-sign-sub {
  font-family: var(--m-font-display) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 4px !important;
  color: #d4a84a !important;
}

/* Storefront windows: cleaner glass */
.cine-win {
  border: 3px solid #2b1308 !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg, rgba(165, 243, 252, 0.55) 0%, rgba(59, 130, 246, 0.32) 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,0.35),
    inset 0 -6px 16px rgba(0, 30, 60, 0.4),
    0 6px 14px rgba(0,0,0,0.35) !important;
}
.cine-win-label {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  background: rgba(127, 29, 29, 0.92) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

.cine-entrance {
  border: 3px solid #2b1308 !important;
  border-radius: 6px !important;
}
.cine-open-sign {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  border-radius: 6px !important;
  background: #dc2626 !important;
  color: #fef3c7 !important;
  box-shadow: 0 0 22px rgba(220, 38, 38, 0.85), 0 4px 10px rgba(0,0,0,0.45) !important;
}
.cine-welcome {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  color: #fde68a !important;
}

/* Sidewalk + bench + bin labels */
.cine-bin-label {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  letter-spacing: 1.4px !important;
  border-radius: 4px !important;
}

/* Title cards: modern bold display font */
.cine-titles { bottom: 18% !important; }
.cine-title {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #fef3c7 !important;
  text-shadow:
    0 0 22px rgba(251, 191, 36, 0.85),
    0 0 50px rgba(251, 191, 36, 0.55),
    0 4px 14px rgba(0,0,0,0.7) !important;
}
.cine-title-1 { font-size: 56px !important; letter-spacing: 4px !important; }
.cine-title-2 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; color: #fde68a !important; }
.cine-title-3 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; color: #fde68a !important; }
.cine-title-4 { font-size: 24px !important; font-weight: 700 !important; letter-spacing: 2px !important; color: #fca5a5 !important; }

.cine-skip {
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  border-radius: 12px !important;
  background: rgba(20, 24, 44, 0.92) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.7) !important;
  color: #fde68a !important;
}

/* ====================================================================
   ASSORTED SMALL TEXT NORMALIZATIONS
   ==================================================================== */
.staff-meta { font-size: 13px !important; }
.staff-meta .assignment { font-size: 11px !important; }
.lane-manager-timer-label { font-size: 8px !important; }

/* Tag/sticker labels that use Press Start 2P — modernize */
.lane.express .lane-label,
.basket-stack-block,
.abandoned-cart-flag,
.abandoned-cart-repel,
.lane-action-banner {
  font-family: var(--m-font-display) !important;
}

/* Backup/queue badge */
.backup-badge-label {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  background: linear-gradient(180deg, #7c2d12, #431407) !important;
  border: 1px solid rgba(251, 191, 36, 0.7) !important;
  border-radius: 999px !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Locked staff-card "LOCKED" overlay — modern font */
.staff-card.locked-unavailable::before {
  font-family: var(--m-font-display) !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.6px !important;
}
.staff-card .trait-badge {
  font-family: var(--m-font-display) !important;
  font-weight: 600 !important;
  font-size: 9px !important;
  letter-spacing: 0.4px !important;
}

/* Day/Night cycle — keep cinematic transitions but smoother haze */
.sky-haze {
  background:
    radial-gradient(ellipse 95% 65% at 50% 110%, var(--haze-color), transparent 72%) !important;
}