/* ============================================================
   restaurant.css — Scene 1 layout, watercolor cartoon tone
   wall-zone (HUD + customers over check wall)
   counter-strip (wooden bridge, hides customer waist)
   wood-zone (tray + grills + toolbar over wood)
   ============================================================ */

#scene-game {
  background:
    repeating-conic-gradient(
      var(--wall) 0% 25%,
      var(--wall-check) 0% 50%
    );
  background-size: 24px 24px;
}

/* ------------------------------------------------------------
   Zones
   ------------------------------------------------------------ */
.wall-zone {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.wood-zone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);
  position: relative;
  z-index: 2;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.12);
}

/* Wooden edge strip between wood-zone siblings */
.edge--wood {
  flex-shrink: 0;
  height: 6px;
  background: linear-gradient(180deg, var(--wood-dark) 0%, var(--wood-darker) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------
   3.1 HUD — 3 translucent capsules over the wall
   ------------------------------------------------------------ */
.hud {
  height: var(--h-hud);
  min-height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px 0;
  background: transparent;
  z-index: 3;
  position: relative;
}

.hud-capsule {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-width: 0;
  white-space: nowrap;
  position: relative;   /* anchors .session-gauge */
}

/* Session progress (Stage 11 issue 2) — thin pill under the left HUD
   capsule. Width is driven purely by transform:scaleX so we avoid layout. */
.session-gauge {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.session-gauge-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #E53935, #FF6B6B);
  border-radius: 2px;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.2s linear;
  will-change: transform;
}

.session-gauge-fill--warning {
  animation: gaugePulse 0.8s ease-in-out infinite;
}

@keyframes gaugePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.hud-capsule--center {
  gap: 5px;
  padding: 7px 14px;
}

.hud-capsule--right {
  gap: 4px;
  padding: 5px 6px 5px 10px;
}

.hud-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.hud-primary {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

/* Stage 14R: fixed width so "HH:MM AM" vs "HH:MM PM" (and proportional
   digit widths) don't reflow the left HUD capsule every clock tick. */
.hud-secondary {
  font-size: 9px;
  color: var(--text-mute);
  font-weight: 600;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  width: 52px;
}

.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}

.hud-chip__value {
  line-height: 1;
}

.hud-menu {
  width: 24px;
  height: 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  padding: 5px 4px;
  background: var(--text);
  border-radius: 50%;
  margin-left: 4px;
}

.hud-menu span {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: #fff;
}

/* ------------------------------------------------------------
   3.2 Customer seats — no frames, customers on wall backdrop
   ------------------------------------------------------------ */
.seats {
  height: var(--h-seats);
  min-height: 150px;
  flex-shrink: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 4px 10px 0;
  overflow: visible;
}

.seat {
  position: relative;
  overflow: visible;
}

/* ------------------------------------------------------------
   Counter strip — wooden bridge between zones; hides customer waist
   ------------------------------------------------------------ */
.counter-strip {
  flex-shrink: 0;
  position: relative;
  height: var(--h-counter);
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);
  border-top: 2px solid var(--wood-dark);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 4;
}

/* subtle plank grain */
.counter-strip::after {
  content: "";
  position: absolute;
  inset: 2px 0 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 60px,
    rgba(0, 0, 0, 0.08) 60px 61px
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   3.3 Ingredient tray — wooden plank with 2-row grid (4+3), no labels
   ------------------------------------------------------------ */
.tray {
  flex-shrink: 0;
  height: var(--h-tray);
  min-height: 130px;
  padding: 10px 12px;
}

.tray__grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-content: center;
  padding: 8px;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 100%);
  border-radius: 12px;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.tray__slot {
  flex: 0 0 72px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fffaf2 0%, #f4e5cd 100%);
  border: 2px solid var(--wood-dark);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 3px rgba(0, 0, 0, 0.15);
  transition: transform 100ms, box-shadow 100ms, border-color 100ms;
  touch-action: none;   /* prevent scroll-hijack while dragging ingredient */
  user-select: none;
}

.tray__slot:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.tray__slot[data-selected="true"] {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-light),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------
   3.4 Grills — wooden surface with grill discs on top
   ------------------------------------------------------------ */
.grills {
  flex: 1 1 var(--h-grill);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  padding: 12px;
  position: relative;
  background: linear-gradient(180deg, var(--wood) 0%, var(--wood-mid) 100%);
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* wood plank grain */
.grills::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 70px,
    rgba(0, 0, 0, 0.07) 70px 71px
  );
  pointer-events: none;
}

.grill {
  position: relative;
  width: 130px;
  height: 130px;
  max-width: 40%;
  flex-shrink: 0;
}

/* Stage 13 issue 3: trash bin between the two grills. Drop target for
   active serving drag; tap alone does nothing. */
.trash-bin {
  position: relative;
  width: 50px;
  height: 72px;
  align-self: center;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.15s ease;
}

.trash-bin-body {
  position: absolute;
  bottom: 0;
  left: 5px; right: 5px;
  height: 56px;
  background: linear-gradient(180deg, #6B6B6B, #4A4A4A);
  border-radius: 4px 4px 8px 8px;
  box-shadow:
    inset 2px 0 4px rgba(255, 255, 255, 0.15),
    inset -2px 0 4px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

.trash-bin-body::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;
  left: 50%;
  width: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.trash-bin-lid {
  position: absolute;
  top: 8px;
  left: 0; right: 0;
  height: 12px;
  background: linear-gradient(180deg, #555, #3A3A3A);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
  transform-origin: left center;
}

.trash-bin.drop-target {
  transform: scale(1.1);
}

.trash-bin.drop-target .trash-bin-lid {
  transform: rotate(-25deg) translateY(-4px);
}

/* One-shot smoke puff when a piece hits the bin. */
.trash-bin--puff::after {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 24px; height: 24px;
  background: radial-gradient(circle, rgba(200, 200, 200, 0.65) 0%, transparent 70%);
  filter: blur(3px);
  transform: translateX(-50%);
  animation: trashPuff 420ms ease-out forwards;
  pointer-events: none;
}

@keyframes trashPuff {
  0%   { opacity: 0;   transform: translate(-50%, 0) scale(0.4); }
  30%  { opacity: 0.8; transform: translate(-50%, -10px) scale(1.1); }
  100% { opacity: 0;   transform: translate(-50%, -26px) scale(1.5); }
}

.grill__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #2C1810;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,0.55) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,0.55) 9px 10px),
    radial-gradient(
      circle at 50% 50%,
      #8B3A18 0%,
      #3A1A0A 55%,
      #1A0903 100%
    );
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  padding: 16px;
  animation: emberGlow 2s ease-in-out infinite;
}

@keyframes emberGlow {
  0%, 100% {
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(255, 100, 40, 0.4);
  }
  50% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.4),
      0 0 36px rgba(255, 100, 40, 0.55);
  }
}

.grill__slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;   /* Stage 12: block native pan while dropping */
}

/* ------------------------------------------------------------
   3.5 Toolbar
   ------------------------------------------------------------ */
.toolbar {
  height: var(--h-toolbar);
  min-height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--wood-dark) 0%, var(--wood-darker) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toolbar__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 2px solid var(--wood-dark);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.3);
  transition: transform 80ms, box-shadow 80ms;
}

.toolbar__btn:active {
  transform: translateY(1px);
}

.toolbar__btn--active {
  background: var(--accent-light);
  border-color: var(--accent-dark);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 0 0 2px var(--accent);
}