/* ============================================================
   polish.css — purely additive visual polish layer.
   Loaded LAST so it sits on top of modern.css. This file is
   intentionally small and self-contained: every selector adds
   ambient decoration, refined shadows, smoother easing, or
   micro-interactions. Nothing here changes layout geometry,
   z-index ordering, or behavior — if any rule is removed the
   game still plays the same.
   ============================================================ */

/* ---------- 1. Floating dust motes in the store floor ----------
   A pseudo-element on the store floor renders a subtle drifting
   particle field. Pure CSS (no JS), gpu-cheap (single transform).
   Sits below all interactive elements via z-index/pointer-events. */
.store-floor {
  position: relative;
}
.store-floor::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255, 245, 220, 0.55) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 32% 65%, rgba(220, 230, 255, 0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 55% 22%, rgba(255, 245, 220, 0.5) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 78% 48%, rgba(220, 230, 255, 0.42) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 92% 12%, rgba(255, 245, 220, 0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 18% 82%, rgba(220, 230, 255, 0.4) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 64% 88%, rgba(255, 245, 220, 0.4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 8%, rgba(220, 230, 255, 0.4) 0 0.9px, transparent 1.5px);
  background-size: 320px 320px;
  background-repeat: repeat;
  opacity: 0.55;
  animation: dustDrift 38s linear infinite;
  mix-blend-mode: screen;
}
/* A second offset dust layer for parallax depth. */
.store-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 22% 14%, rgba(255, 235, 200, 0.45) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 48% 55%, rgba(200, 220, 255, 0.4) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 73% 32%, rgba(255, 235, 200, 0.42) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 88% 72%, rgba(200, 220, 255, 0.4) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 6% 60%, rgba(255, 235, 200, 0.4) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 36% 92%, rgba(200, 220, 255, 0.4) 0 0.7px, transparent 1.2px);
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: 0.35;
  animation: dustDriftSlow 62s linear infinite reverse;
  mix-blend-mode: screen;
}
@keyframes dustDrift {
  from { background-position: 0 0; }
  to   { background-position: 320px -240px; }
}
@keyframes dustDriftSlow {
  from { background-position: 0 0; }
  to   { background-position: -240px 320px; }
}
/* Make sure all lane/customer/booth content stays above the dust. */
.store-floor > * { position: relative; z-index: 1; }

/* ---------- 2. (removed) ----------
   Earlier this slot added a window-light wash inside the store-shell,
   but it overlaid the cinematic and main-menu scenes that also render
   inside the shell, washing out the sky/clouds/sign. The store-floor's
   own ambient-light gradient (in modern.css) already covers this role
   adequately, so the wash was removed. */

/* ---------- 3. Premium-feel shimmer on the FARM GROCERY banner ----------
   A slow diagonal highlight sweeps across the banner every few seconds. */
.store-banner {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
}
.store-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0% 38%,
    rgba(255, 240, 200, 0.0) 38%,
    rgba(255, 240, 200, 0.45) 48%,
    rgba(255, 240, 200, 0.0) 58%,
    transparent 58% 100%);
  transform: translateX(-130%);
  animation: bannerShimmer 6.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
@keyframes bannerShimmer {
  0%, 80% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

/* ---------- 4. Soft idle bob on standing customers ----------
   Customers that aren't actively walking get a very subtle weight-shift
   so the lane queues don't look frozen. Walking already overrides
   .legs animation; here we add a near-imperceptible body sway on the
   whole sprite. Uses translate3d to stay on the GPU. */
.customer:not(.walking):not(.transit) {
  animation: idleSway 4.2s ease-in-out infinite;
  animation-delay: calc(var(--sway-offset, 0) * 0.8s);
}
/* Stagger by lane position via :nth-child to avoid lockstep bobbing. */
.customer:not(.walking):not(.transit):nth-child(2n)   { animation-delay: 0.4s; animation-duration: 4.6s; }
.customer:not(.walking):not(.transit):nth-child(3n)   { animation-delay: 0.8s; animation-duration: 4.0s; }
.customer:not(.walking):not(.transit):nth-child(4n+1) { animation-delay: 1.2s; animation-duration: 4.8s; }
@keyframes idleSway {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -0.8px; }
}

/* ---------- 5. Subtle breathing glow on selected cashier booth ----------
   modern.css locks the booth's box-shadow with !important, so we use a
   drop-shadow filter overlay (which composites over the existing shadow)
   to add a soft cyan halo that pulses while the booth is selected. */
.cashier-booth.selected {
  animation: boothBreathe 2.2s ease-in-out infinite;
}
@keyframes boothBreathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(34, 211, 238, 0.25))
      drop-shadow(0 0 10px rgba(34, 211, 238, 0.15));
  }
  50% {
    filter:
      drop-shadow(0 0 6px rgba(34, 211, 238, 0.5))
      drop-shadow(0 0 18px rgba(34, 211, 238, 0.35));
  }
}

/* ---------- 6. Scanner glow inhalation ----------
   modern.css locks the scanner's box-shadow with !important. Layering a
   drop-shadow filter on top still gives us a gentle cyan halo that
   breathes alongside the existing sweep beam inside the scanner. */
.scanner {
  animation: scannerBreathe 2.6s ease-in-out infinite;
}
@keyframes scannerBreathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px rgba(34, 211, 238, 0.35));
  }
  50% {
    filter:
      drop-shadow(0 0 6px rgba(34, 211, 238, 0.65))
      drop-shadow(0 0 12px rgba(34, 211, 238, 0.35));
  }
}

/* ---------- 7. Smoother lane hover lift ----------
   modern.css gives lanes a flat hover state; layer in a slight rise
   and a wider tinted halo for tactile feedback. Doesn't override
   any of modern.css's `!important` rules, just adds a transform. */
.lane {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.lane:hover:not(.assignable):not(.manager-target):not(.needs-deposit):not(.has-issue) {
  transform: translateY(-3px);
}

/* ---------- 8. Polished focus ring for keyboard users ----------
   Replaces the default browser outline on clickable game elements
   with a unified violet/cyan focus halo. Falls back to outline for
   contexts that don't support :focus-visible. */
.lane:focus-visible,
.staff-card:focus-visible,
.cashier-booth:focus-visible,
.summary-button:focus-visible,
.office-action-cta:focus-visible,
.help-fab:focus-visible,
.menu-fab:focus-visible,
.pause-menu-btn:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.85);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(124, 92, 255, 0.25),
    0 0 22px rgba(124, 92, 255, 0.35);
}

/* ---------- 9. Subtle FAB hover lift ----------
   The help and menu buttons feel snappier with a small lift+grow. */
.help-fab, .menu-fab {
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.help-fab:hover, .menu-fab:hover {
  transform: translateY(-2px) scale(1.06);
}
.help-fab:active, .menu-fab:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- 10. Polished checkout-pop arc ----------
   The existing checkout-pop rises straight up; we let it drift slightly
   to the right so successive pops don't stack on top of each other. The
   animation is overridden via a higher-specificity selector. */
.lane .checkout-pop:not(.messy) {
  animation: checkoutPopDrift 1.25s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
@keyframes checkoutPopDrift {
  0%   { opacity: 0; transform: translate(-50%, 14px) scale(0.7); filter: blur(2px); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); filter: blur(0); }
  35%  { transform: translate(-46%, -6px) scale(1); }
  70%  { transform: translate(-52%, -22px) scale(0.98); }
  100% { opacity: 0; transform: translate(-48%, -38px) scale(0.92); filter: blur(1px); }
}

/* ---------- 11. Animated number color flash on key stats ----------
   When the HUD score/served labels are updated by JS, the surrounding
   stat box briefly brightens. We can't hook the update without JS, so
   this just keeps the existing colors readable and adds a smoother
   transition between value changes. */
#moneyLabel, #servedLabel, #walkoutLabel, #hoursLabel, #clockLabel {
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* ---------- 12. Reduced-motion safety net ----------
   Respect users who've asked the OS to minimize animation. Disable
   the heavier ambient loops while leaving functional state-change
   transitions intact. */
@media (prefers-reduced-motion: reduce) {
  .store-floor::before,
  .store-floor::after,
  .store-banner::after,
  .customer:not(.walking):not(.transit),
  .cashier-booth.selected,
  .scanner {
    animation: none !important;
  }
  .store-banner::after { opacity: 0; }
}

/* ---------- 13. Crisper depth shadow on belt items ---------- */
.belt-item {
  transition: transform 0.15s ease, filter 0.15s ease;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

/* ---------- 14. Soft inner highlight on staff panel + office heading ----------
   A gentle glow on each panel's H2 sells the panels as illuminated
   surfaces without touching layout. */
.staff-panel h2,
.service-office h2 {
  position: relative;
  transition: text-shadow 0.4s ease;
}
.staff-panel h2::after,
.service-office h2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 255, 0.45) 30%,
    rgba(34, 211, 238, 0.55) 50%,
    rgba(124, 92, 255, 0.45) 70%,
    transparent 100%);
  filter: drop-shadow(0 0 4px rgba(124, 92, 255, 0.35));
  pointer-events: none;
}

/* ---------- 15. Smoother HUD-stat transitions ----------
   When a stat's text shifts (e.g. day rolls over) we want the box
   to morph rather than snap. modern.css already styles them; we just
   add a transition. */
.hud .stat {
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 16. Subtle lift on the express-queue stack ----------
   The express queue line is a separate slot; a faint inner glow
   helps it read as part of the same "stage" as the lanes. */
.express-queue-line {
  transition: box-shadow 0.3s ease;
}
.express-queue-line:hover {
  filter: brightness(1.05);
}