/* ═══════════════════════════════════════════════════════════════════════════
   WELL VISUAL — photorealistic layered depth system
   Canvas reference: 932.8 × 432px (iPhone landscape)

   Layer z-index stack (back → front):
     #wl-base  z:1   WellBase.webp   (full well structure background)
     juice-2   z:5   bottles behind L5 (top corners, far back)
     #wl-5     z:10  WellLevel5.webp (juice row 2 rail — top zone)
     juice-1   z:15  bottles behind L4 (top corners, mid back)
     #wl-4     z:20  WellLevel4.webp (juice row 1 rail)
     cold      z:25  cold product bottles (center)
     #wl-3     z:30  WellLevel3.webp (cold section rail, center)
     upper     z:35  upper liquor bottles (9 slots behind L2)
     #wl-2     z:40  WellLevel2.webp (upper liquor rail)
     lower     z:45  lower/speed liquor bottles (11 slots behind L1)
     #wl-1     z:50  WellLevel1.webp (front rail — closest to bartender)
     UI        z:60+ overlays, labels, nav

   Scale ref: source PNGs are 2778px wide → scale = 932.8/2778 = 0.3358
   Coord formulas:
     left% = x / 932.8 × 100
     top%  = y / 432   × 100
═══════════════════════════════════════════════════════════════════════════ */

/* ── Override base well layer layout ──────────────────────────────────────── */

#layer-well {
  background: #0a0604 !important;
  padding: 0 !important;
}

/* Hide legacy sub-well controls (panoramic view replaces pagination) */
#well-subwell-nav,
#well-bottles-grid,
#well-modifiers {
  display: none !important;
}

/* Hide old bottom ticket-rail — tickets now live inside the well layer */
#ticket-rail {
  display: none !important;
}

/* ── Well visual container ─────────────────────────────────────────────────── */

#well-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* NO z-index here — this must NOT create a new stacking context.
     Removing z-index lets the level images (wl-1 z:50 … wl-5 z:10) and
     bottle divs (lower z:45, upper z:35 …) compete in the same context,
     so each rail overlay correctly sits in front of its own bottle zone. */
}

/* ── Layer images ──────────────────────────────────────────────────────────── */

.well-layer {
  position: absolute;
  pointer-events: none;
  object-fit: fill;   /* stretch to fill computed box — perspective baked in */
}

/* Base: full well background structure */
#wl-base {
  left: 0; top: 0; width: 100%; height: 100%;
  z-index: 1;
}

/* Level 5 — juice/syrup row 2 rail (topmost zone) ULC(0,0) LRC(932.8,186) */
#wl-5 {
  left: 0; top: 0; width: 100%; height: 43.06%;
  z-index: 10;
}

/* Level 4 — juice/syrup row 1 rail ULC(0,0) LRC(932.8,256) */
#wl-4 {
  left: 0; top: 0; width: 100%; height: 59.26%;
  z-index: 20;
}

/* Level 3 — cold/chilled center section
   Canvas: left=315 right=607.8 top=116 bottom=202 */
#wl-3 {
  left: 33.77%; top: 26.85%; width: 31.39%; height: 19.91%;
  z-index: 30;
}

/* Level 2 — upper liquor rail  ULC(23,201) LRC(904,232.2) */
#wl-2 {
  left: 2.47%; top: 46.53%; width: 94.46%; height: 7.22%;
  z-index: 40;
}

/* Level 1 — front lower liquor rail (closest to bartender)
   ULC(1,310) LRC(933,345) */
#wl-1 {
  left: 0.11%; top: 71.76%; width: 99.91%; height: 8.10%;
  z-index: 50;
}

/* ── Bottle overlay container ──────────────────────────────────────────────── */

#well-bottles-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;   /* clip bottles that extend above/below the well canvas */
}

/* ── Well bottle base style (panoramic mode) ───────────────────────────────── */

#well-bottles-overlay .well-bottle {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  border: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  transition: filter 0.12s ease;
  border-radius: 3px;
}

#well-bottles-overlay .well-bottle:active,
#well-bottles-overlay .well-bottle.held {
  filter: brightness(1.4) drop-shadow(0 0 4px rgba(212,175,55,0.6));
}

#well-bottles-overlay .well-bottle.wb-pouring {
  filter: brightness(1.5) drop-shadow(0 0 8px rgba(212,175,55,0.85));
  animation: wb-pour-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes wb-pour-pulse {
  from { filter: brightness(1.4) drop-shadow(0 0 6px rgba(212,175,55,0.7)); }
  to   { filter: brightness(1.7) drop-shadow(0 0 12px rgba(212,175,55,1.0)); }
}

/* Bottle image fills the bottle area */
#well-bottles-overlay .wb-bottle-img {
  width: 100%;
  height: 75%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* Label below bottle */
#well-bottles-overlay .wb-label {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 6px;
  color: rgba(255, 255, 255, 0.70);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  width: 100%;
  padding: 1px 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* ── Zone z-indices ────────────────────────────────────────────────────────── */

#well-bottles-overlay .wbz-lower  { z-index: 45; }
#well-bottles-overlay .wbz-upper  { z-index: 35; }
#well-bottles-overlay .wbz-cold   { z-index: 25; }
#well-bottles-overlay .wbz-juice1 { z-index: 15; }
#well-bottles-overlay .wbz-juice2 { z-index:  5; }

/* ── UI overlays (above all visual layers) ──────────────────────────────────── */

/* Ticket display strip — sits at bottom of well, right of the printer icon baked into the PNG.
   Printer icon is in the lower-left corner of WellBase (~0-14% from left, bottom 10%).
   Position this strip to start just past the printer icon and extend to the right edge.
   Hosts both:
     • .ticket-card  — clickable queued/pending tickets (from _addTicketCard)
     • .wt-ticket    — active-slot progress spans (from _renderWellTicketDisplay)  */
#well-ticket-display {
  position: absolute !important;
  bottom: 3px !important;
  top: auto !important;
  left: 15% !important;
  right: 4px !important;
  height: 40px !important;
  z-index: 60 !important;
  background: rgba(10,6,4,0.80) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(140,110,60,0.35) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Compact ticket cards inside the 40px well strip */
#well-ticket-display .ticket-card {
  min-width: 60px;
  max-width: 95px;
  padding: 2px 5px;
  font-size: 8px;
  flex-shrink: 0;
  animation: none;          /* suppress slide-in inside the strip */
}
#well-ticket-display .ticket-num  { font-size: 8px; margin-bottom: 1px; padding-bottom: 1px; }
#well-ticket-display .ticket-drink { font-size: 7px; }
#well-ticket-display .ticket-age  { font-size: 7px; top: 2px; right: 3px; }

/* ── Debug: show slot outlines ─────────────────────────────────────────────── */

#layer-well.wv-debug #well-bottles-overlay .wbz-lower  { outline: 2px solid rgba(255,100,100,0.7); }
#layer-well.wv-debug #well-bottles-overlay .wbz-upper  { outline: 2px solid rgba(100,200,255,0.7); }
#layer-well.wv-debug #well-bottles-overlay .wbz-cold   { outline: 2px solid rgba(100,255,200,0.7); }
#layer-well.wv-debug #well-bottles-overlay .wbz-juice1 { outline: 2px solid rgba(255,200,100,0.7); }
#layer-well.wv-debug #well-bottles-overlay .wbz-juice2 { outline: 2px solid rgba(200,100,255,0.7); }
#layer-well.wv-debug .well-layer { outline: 1px solid rgba(255,255,0,0.4); }