/* ═══════════════════════════════════════════════════════════════════════════════
   BLOC TCG — STREET DIORAMA LOBBY STYLES
   Contract: LOBBY-PLAN.md (Wave 2 / Workstream C)
   Parallax layers, street buildings, hotspots, camera viewport, and avatars.
   ═══════════════════════════════════════════════════════════════════════════════ */

#lobby-viewport {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #08080c;
  user-select: none;
}

/* ── WORLD CONTAINER & PARALLAX LAYERS ── */
#lobby-world {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2600px; /* Full block width */
  will-change: transform;
}

/* 1. Background: Sky & Distant Skyline (0.2x speed) */
#lobby-layer-bg {
  position: absolute;
  inset: 0;
  width: 2600px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: background 1.5s ease;
}

/* Time of Day Sky Tints */
#lobby-layer-bg.tod-night {
  background: linear-gradient(180deg, #05050a 0%, #0d0f18 45%, #181926 75%, #241e2c 100%);
}
#lobby-layer-bg.tod-dawn {
  background: linear-gradient(180deg, #100f24 0%, #2e1c36 40%, #702f48 70%, #d46b48 100%);
}
#lobby-layer-bg.tod-day {
  background: linear-gradient(180deg, #142850 0%, #27496d 45%, #0c7b93 80%, #00a8cc 100%);
}
#lobby-layer-bg.tod-sunset {
  background: linear-gradient(180deg, #1f1235 0%, #571e4d 35%, #a83232 70%, #e06d28 100%);
}

.skyline-silhouette {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 100%;
  height: 280px;
  background-image: 
    repeating-linear-gradient(90deg, 
      #080811 0px, #080811 50px, 
      transparent 50px, transparent 65px,
      #0b0b18 65px, #0b0b18 130px,
      transparent 130px, transparent 145px,
      #07070f 145px, #07070f 210px
    );
  mask-image: linear-gradient(to top, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
  opacity: 0.85;
}

/* 2. Midground: Building Facades & Hotspots (0.6x speed) */
#lobby-layer-mid {
  position: absolute;
  inset: 0;
  width: 2600px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.street-building {
  position: absolute;
  bottom: 80px;
  height: clamp(230px, 62vh, 380px);
  background: #11111a;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 15px;
}

.building-neon {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 4px;
  margin-bottom: 8px;
  text-shadow: 0 0 12px currentColor;
}

/* Specific Building Facades */
.facade-bodega   { left: 240px;  width: 280px; border-top: 4px solid var(--gold, #d4af37); }
.facade-stoop    { left: 580px;  width: 240px; border-top: 4px solid var(--blue, #4fc3f7); }
.facade-whip     { left: 880px;  width: 240px; border-top: 4px solid var(--green, #00ff87); }
.facade-court    { left: 1180px; width: 300px; border-top: 4px solid var(--red, #ff3b3b); }
.facade-mural    { left: 1540px; width: 240px; border-top: 4px solid var(--purple, #ce93d8); }
.facade-crib     { left: 1840px; width: 260px; border-top: 4px solid var(--gold, #d4af37); }
.facade-alley    { left: 2160px; width: 220px; border-top: 4px solid #adbe18; }
.facade-store    { left: 2420px; width: 160px; border-top: 4px solid #ff6b35; }

/* 3. Foreground: Sidewalk, Street, Streetlights (1.0x speed) */
#lobby-layer-fore {
  position: absolute;
  inset: 0;
  width: 2600px;
  height: 100%;
  z-index: 3;
  pointer-events: auto;
}

#lobby-sidewalk {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 95px;
  background: linear-gradient(180deg, #1c1c24 0%, #121218 35%, #0a0a0e 100%);
  border-top: 3px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

#lobby-curb {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14px;
  background: repeating-linear-gradient(90deg, #222 0, #222 60px, #d4af37 60px, #d4af37 120px);
  opacity: 0.4;
}

/* ── HOTSPOTS & PROXIMITY BADGES ── */
.lobby-hotspot {
  position: absolute;
  bottom: 95px;
  width: 140px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
  cursor: pointer;
  z-index: 10;
}

.hotspot-glow-ring {
  position: absolute;
  bottom: 0;
  width: 110px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.2);
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.25) 0%, transparent 75%);
  transition: all 0.3s ease;
}

.lobby-hotspot.in-range .hotspot-glow-ring {
  border-color: var(--gold, #d4af37);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  transform: scale(1.15);
}

.hotspot-prompt {
  position: absolute;
  bottom: 110px;
  background: rgba(14, 14, 20, 0.95);
  border: 1px solid var(--gold, #d4af37);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  white-space: nowrap;
}

.lobby-hotspot.in-range .hotspot-prompt {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hotspot-prompt-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 2px;
  color: var(--gold, #d4af37);
}

.hotspot-prompt-key {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}

/* ── AVATARS CONTAINER IN WORLD ── */
#lobby-avatars {
  position: absolute;
  bottom: 92px;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 20;
  pointer-events: none;
}

.street-avatar {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 160px;
  margin-left: -40px; /* Center horizontally at X coordinate */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
  will-change: transform;
}

.avatar-doll-wrap {
  width: 76px;
  height: 152px;
  transition: transform 0.08s linear;
}

/* Procedural Walk Cycle transforms */
.street-avatar.is-walking .avatar-doll-wrap {
  animation: walkBob 0.32s infinite alternate ease-in-out;
}

@keyframes walkBob {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-5px) rotate(1.5deg); }
  100% { transform: translateY(-1px) rotate(-1.5deg); }
}

.street-avatar.facing-left .avatar-doll-wrap {
  transform: scaleX(-1);
}
.street-avatar.facing-left.is-walking .avatar-doll-wrap {
  animation: walkBobLeft 0.32s infinite alternate ease-in-out;
}
@keyframes walkBobLeft {
  0%   { transform: scaleX(-1) translateY(0) rotate(0deg); }
  50%  { transform: scaleX(-1) translateY(-5px) rotate(-1.5deg); }
  100% { transform: scaleX(-1) translateY(-1px) rotate(1.5deg); }
}

/* Shadow beneath avatar */
.avatar-shadow {
  position: absolute;
  bottom: -4px;
  width: 54px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, transparent 75%);
  border-radius: 50%;
  z-index: -1;
}

/* Nameplate */
.avatar-nameplate {
  position: absolute;
  bottom: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
}

.avatar-username {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: rgba(10, 10, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.street-avatar.is-local .avatar-username {
  border-color: var(--gold, #d4af37);
  color: var(--gold, #d4af37);
}

/* Speech / Emote Bubble */
.avatar-bubble {
  position: absolute;
  bottom: 190px;
  background: #fff;
  color: #000;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px) scale(0.8);
  transition: all 0.2s ease;
  pointer-events: none;
}

.avatar-bubble.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.avatar-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* ── HUD OVERLAYS ON LOBBY ── */
#lobby-hud-top {
  position: absolute;
  top: max(var(--safe-top, 0px), 8px);
  left: max(var(--safe-left, 0px), 12px);
  right: max(var(--safe-right, 0px), 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  pointer-events: none;
}

#lobby-hud-top > * {
  pointer-events: auto;
}

#lobby-quick-controls {
  display: flex;
  gap: 8px;
}

/* ── TOUCH JOYSTICK ── */
#lobby-touch-joystick {
  position: absolute;
  bottom: max(var(--safe-bottom, 0px), 14px);
  left: max(var(--safe-left, 0px), 18px);
  width: 86px;
  height: 86px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  touch-action: none;
  pointer-events: auto;
}

#lobby-joystick-thumb {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold, #d4af37) 0%, #ffe066 100%);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transform: translate(0, 0);
  transition: transform 0.05s linear;
}

/* Non-touch screens: hide joystick */
@media (pointer: fine) and (min-width: 900px) {
  #lobby-touch-joystick {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3D STREET LOBBY STYLES (POKÉMON / ZELDA STYLE)
   ═══════════════════════════════════════════════════════════════════════════════ */

#lobby-3d-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

#lobby-3d-viewport canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#lobby-3d-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}

/* 3D Screen-Projected Nameplates */
.avatar-3d-nameplate {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: center bottom;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  background: rgba(10, 12, 18, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 2px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: none;
}

.avatar-3d-nameplate.local-player {
  border-color: #00e5ff;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.avatar-3d-nameplate .nameplate-rank {
  color: var(--gold, #d4af37);
  margin-right: 4px;
}

/* 3D Floating Speech Bubbles */
.avatar-3d-speech {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: center bottom;
  pointer-events: none;
  background: #ffffff;
  color: #111111;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 4px 10px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  opacity: 0;
  display: none;
  transition: opacity 0.2s, transform 0.2s;
}

.avatar-3d-speech.active {
  opacity: 1;
  display: block;
}

/* 3D Hotspot Overhead Floating Prompts */
.hotspot-3d-prompt {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  opacity: 0;
  display: none;
  background: rgba(14, 18, 28, 0.92);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--gold, #d4af37);
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.35);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hotspot-3d-prompt.active {
  opacity: 1;
  display: block;
}

.hotspot-3d-prompt .prompt-badge {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: #000;
  background: var(--gold, #d4af37);
  border-radius: 4px;
  padding: 1px 6px;
  display: inline-block;
  margin-bottom: 2px;
}

.hotspot-3d-prompt .prompt-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 2px;
  color: #fff;
}

.hotspot-3d-prompt .prompt-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

/* 3D Virtual Touch Joystick Zone */
#lobby-3d-joystick-zone {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 45vw;
  height: 52vh;
  max-width: 340px;
  z-index: 30;
  touch-action: none;
}

#lobby-3d-joystick-base {
  position: absolute;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  margin-top: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 2px solid rgba(212, 175, 55, 0.4);
  pointer-events: none;
  display: none;
}

#lobby-3d-joystick-nub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe066 0%, #d4af37 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* 3D Mobile Action Button */
#lobby-3d-action-btn {
  position: absolute;
  bottom: max(var(--safe-bottom, 0px), 22px);
  right: max(var(--safe-right, 0px), 24px);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2430 0%, #11141a 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 40;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

#lobby-3d-action-btn.in-range {
  background: linear-gradient(135deg, #ffe066 0%, #d4af37 100%);
  border-color: #fff;
  color: #000;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
  transform: scale(1.08);
  font-weight: 900;
}

@media (pointer: fine) and (min-width: 900px) {
  #lobby-3d-joystick-zone,
  #lobby-3d-action-btn {
    display: none !important;
  }
}