/* ─── Arcade Lobby ─────────────────────────────────────────────────────────────
   Parisian arcade passage — perspective layer stack.

   Layer 1 (z:1)   .arcade__bg        Atmospheric bg, defaultStorefront repeat-x, 0.92× parallax.
   Layer 2 (z:2)   .arcade__strip-floor  Two-zone perspective floor:
                     .arcade__strip-floor-gradient  top ~60%, static — gradient
                     .arcade__strip-floor-tiles     bottom ~65%, cobblestone texture,
                                                    backgroundPositionX driven by JS at 0.5×
   Layer 2.1 (z:2) .arcade__floor-reflection  Flipped store ghost at junction, 0.92× parallax.
                   (comes after .arcade__strip-floor in DOM, so z:2 DOM order wins)
   Layer 3 (z:3)   .arcade__scroll    Scrollable arch strip; content scrolls at 1×.
     └── .arcade__bay
           ├── .arcade__bay-store  Per-room storefront, z:1 in bay stacking context.
           ├── .arcade__arch-img   Arch PNG (hides seams between storefronts), z:2.
           ├── .arcade__plaque     Room name centered in arch opening, z:3.
           └── .arcade__hover-glow                                               z:4.

   Companion: js/lobby-arcade.js
   ─────────────────────────────────────────────────────────────────────────── */

.arcade {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, #0d0b08 55%, #1a1510 80%, #453826 100%);
  --floor-h: 15vh;    /* Zone 1: cobblestone, viewer side (below stone strip) */
  --arcade-h: 85vh;   /* arch bays height (includes stone strip at bottom)     */
  --store-lift: 12vh; /* Zone 2 height: gap between storefront bottom + stone strip */
  --store-top: 11vh;  /* 15% reduction: (arcade-h − store-lift) × 0.15 = 73vh × 0.15 */
  --zone2-color: #786444; /* warm arcade floor tone — settable via lobby.zone2Color */
  --bay-w: 700px;
  /* Plaque vertical position within the bay — tweak to align with arch opening.
     Percentage of --arcade-h. Move down if arch has thick stone strip at bottom. */
  --plaque-top: 56%;
  /* Storefront + hotzone height — fixed at (bay-w × 4/5) = 560px.
     Container ratio is ALWAYS 700/560 = 1.25, never dependent on viewport height.
     background-size:cover therefore uses the same scale factor at every viewport size
     → cover crop is stable → hotzone % coordinates always map to the same image pixel. */
  --store-h: calc(var(--bay-w) * 3 / 5);
}

/* ── Layer 1: Atmospheric storefront background ──────────────────────────────── */
.arcade__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vh - var(--floor-h));
  z-index: 1;
  background-repeat: repeat-x;
  background-size: auto 75%;
  background-position: 0 100%;
  filter: brightness(0.55);   /* darker so per-bay stores in front stand out */
}

/* ── Layer 2: Cobblestone floor — exact same structure as room floor ────────
   Mirrors .room__floor / .room__floor-surface in room.css.
   height: --floor-h (15vh) = the gap between arcade bays (85vh) and screen
   bottom (100vh), placing cobblestone exactly below the stone strip.        */
.arcade__strip-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--floor-h);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

/* Surface: same perspective + dimensions as room floor.
   left/right: -100% → 300vw wide so cobblestone never shows edge gaps on any
   scroll offset. height: 200% fills the near edge after rotateX compression.
   background-position-x: var(--floor-offset) driven synchronously by JS.    */
.arcade__strip-floor-surface {
  position: absolute;
  top: 0;
  left: -100%;
  right: -100%;
  height: 200%;
  transform-origin: top center;
  transform: perspective(600px) rotateX(65deg);
  background-image: var(--cobble-url);
  background-size: 160px 120px;
  background-repeat: repeat;
  background-position-x: var(--floor-offset, 0px);
}

/* Depth/lighting overlay — not affected by scroll offset (same as room ::after). */
.arcade__strip-floor-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(10, 8, 4, 0.55)    0%,
      rgba(30, 24, 16, 0.25) 40%,
      transparent             70%
    );
}

/* ── Layer 2.1: Store reflection at floor junction ───────────────────────────
   Uses defaultStorefront (repeat-x) — keeps the session-1 reflection intact
   while per-bay stores are not individually reflected yet.
   Must appear AFTER .arcade__strip-floor in DOM (same z:2; DOM order wins). */
.arcade__floor-reflection {
  position: absolute;
  top: calc(100vh - var(--floor-h));
  left: 0;
  right: 0;
  height: 9vh;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: auto calc(0.75 * (100vh - var(--floor-h)));
  background-position-x: 0px;
  background-position-y: 100%;
  transform: scaleY(-1);
  opacity: 0.14;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

@media (max-width: 768px) {
  .arcade__floor-reflection { height: 6vh; }
}

/* ── Layer 3: Scrollable arch strip ──────────────────────────────────────────── */
.arcade__scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 3;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.arcade__scroll:active { cursor: grabbing; }
.arcade__scroll::-webkit-scrollbar { display: none; }

.arcade__strip {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 100%;
  width: max-content;
  padding: 0 8vw 0 2vw;
}

/* ── Individual bay ──────────────────────────────────────────────────────────── */
.arcade__bay {
  position: relative;
  width: var(--bay-w);
  height: var(--arcade-h);
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  outline: none;
  overflow: hidden;         /* clips bay-store to bay bounds */
  background: #0a0806;     /* blocks arcade__bg from bleeding through zone2 transparency */
}

/* ── Per-bay storefront ──────────────────────────────────────────────────────
   Lifted --store-lift (20vh) above the stone strip so Zone 2 gradient is
   visible through the lower arch opening between storefront bottom and strip.
   background-position-x: 50% (centered); JS shifts this by +scrollLeft*0.08
   to create subtle depth parallax vs the 1× arch scroll.                    */
.arcade__bay-store {
  position: absolute;
  bottom: var(--store-lift);   /* always anchored to Zone 2 top — store foot never floats */
  left: 0;
  width: 100%;
  height: var(--store-h);  /* 560px fixed — container ratio 1.25 always stable, no cover drift */
  z-index: 1;
  background-size: cover;
  background-position-x: 50%;
  background-position-y: bottom;
  background-repeat: no-repeat;
  filter: brightness(0.88);
  transition: filter 0.4s ease;
}
.arcade__bay:hover .arcade__bay-store,
.arcade__bay:focus-visible .arcade__bay-store {
  filter: brightness(1.05);
}

/* ── Zone 2: arcade interior floor gradient ──────────────────────────────────
   Visible through the lower arch opening between storefront bottom (65vh) and
   stone strip (85vh). Dark warm gradient simulating receding arcade floor.   */
.arcade__bay-zone2 {
  position: absolute;
  top: calc(var(--arcade-h) - var(--store-lift));  /* = 73vh, always at store bottom */
  left: 0;
  width: 100%;
  height: var(--store-lift);  /* = 12vh — the depth gap between store foot and arcade base */
  z-index: 1;
  background: linear-gradient(to bottom,
    #261a0c 0%,            /* dark shadow at storefront base — fixed               */
    var(--zone2-color) 100% /* warm arcade floor tone — settable via lobby.zone2Color */
  );
  pointer-events: none;
}

/* ── Per-bay storefront reflection in Zone 2 ─────────────────────────────────
   Same position + height as .arcade__bay-store → background-size:cover computes
   identically (same zoom + crop for any photo aspect ratio).
   transform-origin: 50% 100% pivots scaleY(-1) at the element's bottom edge
   (= zone2 top), so flipped content falls downward into zone2.
   .arcade__bay overflow:hidden clips anything beyond zone2 naturally.
   Mask: black at element bottom (junction), transparent var(--store-lift) above. */
.arcade__bay-reflection {
  position: absolute;
  bottom: var(--store-lift);          /* same anchor as store — element bottom = zone2 top */
  left: 0;
  width: 100%;
  height: var(--store-h);             /* same as store → cover scales identically */
  z-index: 1;
  background-size: cover;
  background-position-x: 50%;
  background-position-y: bottom;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;         /* pivot at element bottom = zone2 top */
  transform: scaleY(-1);              /* flips content into zone2; overflow:hidden clips excess */
  opacity: 0.14;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent var(--store-lift));
          mask-image: linear-gradient(to top, black 0%, transparent var(--store-lift));
}

/* ── Hotzone container + elements ───────────────────────────────────────────────
   z:2 — same layer as arch PNG, so arch opaque stone areas (pillars, spandrel)
   naturally mask any hotzones that bleed near bay edges. Correct behaviour.
   IMPORTANT: hotzones are baked into _bayHTML() HTML string, so clone bays
   inherit them for free. See NOTE in lobby-arcade.js _bayHTML(). */
/* Hotzone coordinate system — must exactly match .arcade__bay-store position + height.
   Both use bottom:var(--store-lift) + height:var(--store-h) = 560px fixed.
   Container ratio is always 700/560 = 1.25 → background-size:cover uses the same scale
   factor at every viewport → hz.y % always maps to the same image pixel. No drift.
   overflow:clip prevents height:auto artwork images from spilling below the frame.
   JS scroll handler applies translateX(delta) to match background-position parallax. */
.arcade__bay-hotzones {
  position: absolute;
  bottom: var(--store-lift);  /* must match .arcade__bay-store exactly */
  left: 0;
  width: 100%;
  height: var(--store-h);     /* must match .arcade__bay-store exactly */
  z-index: 2;
  pointer-events: none;
  overflow: clip;
}

.arcade__hz {
  position: absolute;
  overflow: clip;           /* clips children without creating a stacking context.
                               overflow:hidden would flatten CSS 3D perspective transforms
                               on some browsers — overflow:clip avoids that. */
  transform-origin: center center;
  /* left / top / width / height / filter / opacity / transform — all set inline */
}

.arcade__hz img {
  width: 100%;
  height: auto;   /* natural aspect ratio — the hotzone div has no explicit height for artwork/asset */
  display: block;
}

/* Plaque hotzone — styled like the room plaque bar */
.arcade__hz-plaque {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 6, 0.55);
  border-bottom: 1px solid rgba(201, 185, 154, 0.24);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 6px 12px;
  text-align: center;
}
.arcade__hz-plaque-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(9px, 0.75vw, 13px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: #e8e4df;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.arcade__hz-plaque-sub {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(7px, 0.55vw, 9px);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: #6b6560;
  margin-top: 3px;
}

/* ── Arch PNG overlay ────────────────────────────────────────────────────────── */
.arcade__arch-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  z-index: 2;
}

/* ── Room name plaque (inside bay) ──────────────────────────────────────────────
   Centered horizontally within the arch opening.
   --plaque-top controls vertical position (default 56% — tweak per arch design). */
.arcade__plaque {
  position: absolute;
  top: var(--plaque-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: clamp(120px, 52%, 240px);
  text-align: center;
  padding: 6px 12px 5px;
  background: rgba(5, 5, 6, 0.58);
  border-bottom: 1px solid rgba(201, 185, 154, 0.24);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

.arcade__plaque-name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10px, 0.85vw, 14px);
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: lowercase;
  color: #e8e4df;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arcade__plaque-count {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: clamp(8px, 0.6vw, 10px);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: #6b6560;
  margin-top: 3px;
}

/* ── Hover glow inside arch opening ──────────────────────────────────────────── */
.arcade__hover-glow {
  position: absolute;
  top: 5%;
  left: 14%;
  right: 14%;
  bottom: 8%;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(255, 210, 140, 0.20) 0%,
    rgba(255, 180, 80, 0.07) 50%,
    transparent 72%
  );
  z-index: 4;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.arcade__bay:hover .arcade__hover-glow,
.arcade__bay:focus-visible .arcade__hover-glow { opacity: 1; }

/* ── Navigation arrows ───────────────────────────────────────────────────────── */
.arcade__nav {
  position: absolute;
  top: calc(var(--arcade-h) * 0.5);
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(5, 5, 6, 0.55);
  color: #e8e4df;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s, background 0.3s;
  opacity: 0.45;
  line-height: 1;
}
.arcade__nav:hover { opacity: 1; background: rgba(5, 5, 6, 0.88); }
.arcade__nav--left  { left: 18px; }
.arcade__nav--right { right: 18px; }
.arcade__nav--hidden {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ── Auto-scroll toggle ──────────────────────────────────────────────────────── */
.arcade__auto-btn {
  position: absolute;
  bottom: calc(var(--floor-h) + 14px);
  right: 22px;
  z-index: 20;
  padding: 5px 15px;
  border: 1px solid rgba(201, 185, 154, 0.25);
  border-radius: 20px;
  background: rgba(5, 5, 6, 0.60);
  color: #8a7f72;
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s, color 0.3s, border-color 0.3s;
  opacity: 0.55;
}
.arcade__auto-btn:hover { opacity: 0.9; color: #c9b99a; }
.arcade__auto-btn--active {
  opacity: 1;
  color: #c9b99a;
  border-color: rgba(201, 185, 154, 0.55);
}

/* ── Zoom-in transition overlay ──────────────────────────────────────────────── */
.arcade-zoom-overlay {
  position: fixed;
  border-radius: 50%;
  background: #050506;
  pointer-events: none;
  z-index: 9999;
  transform: scale(0);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .arcade {
    --floor-h: 12vh;
    --arcade-h: 88vh;
    --store-lift: 22vh;
    --store-top: 10vh;  /* 15% of (88vh − 22vh) = 66vh × 0.15 */
    --plaque-top: 54%;
  }
  .arcade__nav {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .arcade__auto-btn { display: none; }
}