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

/* ═══════════════════════════════════════════════════════════════════════════
   LOBBY VISIBILITY IS DRIVEN BY body.lobby-active — NOT by inline styles.
   This used to be toggled with element.style.display, which silently lost on
   touch devices: css/mobile.css declares `#menu-inner { display: grid
   !important }`, and a stylesheet !important beats an inline declaration. The
   classic menu therefore rendered on top of the lobby on every phone and on
   both Fold displays, while desktop looked fine. Class-driven rules with
   matching weight are immune to that.
   ═══════════════════════════════════════════════════════════════════════════ */
#lobby-viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #08080c;
  user-select: none;
  /* Above the plain .screen stack (z-index 1) so the world shows behind panels,
     but below the panels themselves (600). */
  z-index: 300;
  display: none;
}

body.lobby-active #lobby-viewport { display: block; }

/* Beats `#menu-inner { display: grid !important }` in mobile.css on specificity
   while matching its importance. */
body.lobby-active #menu-inner { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PANELS OVER THE LIVING WORLD
   A screen opened from the lobby floats as a card with the block still
   rendering behind it, instead of replacing the view. Game, deck builder and
   the auth screens are excluded: they need the whole viewport.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The menu screen itself is just the world in lobby mode: no card, no backdrop,
   and clicks fall through to the canvas. */
body.lobby-active #menu-screen.active {
  background: transparent;
  pointer-events: none;
  z-index: 301;
}
body.lobby-active #menu-screen.active > * { pointer-events: auto; }

body.lobby-active .screen.active:not(#menu-screen):not(#game-screen):not(#deck-screen):not(#auth-screen):not(#username-screen) {
  inset: 5vh 6vw;
  width: auto;
  height: auto;
  max-width: 1040px;
  margin: 0 auto;
  background: rgba(10, 11, 16, 0.90);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: auto;
  z-index: 600;
  animation: lobbyPanelIn 0.22s ease-out;
}

@keyframes lobbyPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.lobby-active .screen.active { animation: none; }
}

/* ── Presence readout: is anyone else actually here? ── */
#lobby-presence {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
#lobby-presence.presence-live {
  color: #6ee7a8;
  border-color: rgba(110, 231, 168, .35);
  background: rgba(110, 231, 168, .10);
}
#lobby-presence.presence-wait {
  color: #ffc93c;
  border-color: rgba(255, 201, 60, .35);
  background: rgba(255, 201, 60, .10);
}
#lobby-presence.presence-off {
  color: #7c828e;
  border-color: rgba(124, 130, 142, .30);
  background: rgba(124, 130, 142, .08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINIMUM VERSION GATE
   Sits above everything, including the boot screen, because an outdated client
   must not be able to reach the game underneath it.
   ═══════════════════════════════════════════════════════════════════════════ */
#version-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #08080c;
  padding: 24px;
}
.vg-box {
  max-width: 380px;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(212, 175, 55, .4);
  border-radius: 14px;
  padding: 26px 22px;
  background: rgba(16, 17, 23, .96);
}
.vg-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 5px;
  color: var(--gold, #d4af37);
}
.vg-msg {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text, #efefef);
  margin: 12px 0 20px;
}
.vg-btn { width: 100%; font-size: .9rem; }
.vg-ver {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .68rem;
  letter-spacing: 1px;
  color: var(--muted, #7c828e);
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHALLENGES, EMOTES AND QUICK CHAT
   ═══════════════════════════════════════════════════════════════════════════ */

/* The action button turns red when it is aimed at a player rather than a shop.
   The `body` prefix is deliberate: `#lobby-3d-action-btn.in-range` is declared
   later in this file, so at equal specificity it would win on order. */
body #lobby-3d-action-btn.peer-target {
  border-color: var(--red, #e63946);
  color: #ffd9dd;
  background: rgba(230, 57, 70, .22);
  box-shadow: 0 0 22px rgba(230, 57, 70, .35);
}

#lobby-challenge-prompt {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 11, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#lobby-challenge-prompt.active { display: flex; }

.lcp-box {
  background: rgba(14, 15, 21, .97);
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 14px;
  padding: 20px 24px;
  min-width: min(340px, 86vw);
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
  animation: lcpIn .18s ease-out;
}
@keyframes lcpIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
.lcp-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--gold, #d4af37);
}
.lcp-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .9rem;
  letter-spacing: 1px;
  color: var(--muted, #9aa0ab);
  margin: 6px 0 16px;
}
.lcp-actions { display: flex; gap: 10px; justify-content: center; }
.lcp-actions .btn { flex: 1; font-size: .8rem; }

/* ── Boombox station picker ── */
#boombox-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 11, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 16px;
}
#boombox-overlay.active { display: flex; }

.boombox-box {
  background: rgba(14, 15, 21, .97);
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 14px;
  width: min(560px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
}
.boombox-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.boombox-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 3px;
  color: var(--gold, #d4af37);
}
.boombox-now {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  letter-spacing: 1.2px;
  color: var(--muted, #9aa0ab);
}
#boombox-list {
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.boombox-station {
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  color: var(--text, #efefef);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.boombox-station:active { transform: scale(.985); }
.boombox-station.active {
  border-color: rgba(212, 175, 55, .6);
  background: rgba(212, 175, 55, .12);
}
.bb-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  letter-spacing: 2px;
  color: var(--gold, #d4af37);
}
.bb-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .68rem;
  letter-spacing: .8px;
  color: var(--muted, #9aa0ab);
}
.boombox-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.boombox-foot .btn { font-size: .75rem; }
#boombox-vol {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem;
  color: var(--muted, #9aa0ab);
  min-width: 42px;
  text-align: center;
}
#boombox-toggle { margin-left: auto; }

@media (max-height: 430px) {
  #boombox-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .boombox-station { padding: 6px 10px; }
}

/* ── Emote wheel ── */
#emote-wheel {
  position: fixed;
  inset: 0;
  z-index: 690;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: max(var(--safe-bottom, 0px), 18px);
  background: rgba(6, 7, 11, .35);
}
#emote-wheel.active { display: flex; }

.emote-wheel-inner {
  background: rgba(14, 15, 21, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 12px;
  max-width: min(680px, 94vw);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .65);
}
.emote-wheel-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.emote-btn {
  font-size: 1.5rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
}
.emote-btn:active { transform: scale(.92); }

.emote-wheel-chat {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 10px;
}
.quickchat-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem;
  letter-spacing: .6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: var(--text, #efefef);
  cursor: pointer;
  white-space: nowrap;
}
.quickchat-btn:active { transform: scale(.96); }

@media (max-height: 430px) {
  .emote-btn { width: 40px; height: 40px; font-size: 1.25rem; }
  .quickchat-btn { font-size: .7rem; padding: 4px 10px; }
}

/* Overlays already floated; in the lobby they let more of the world through. */
body.lobby-active #matchmaking-overlay,
body.lobby-active #wardrobe-overlay {
  background: rgba(8, 9, 13, 0.74);
}

/* Tight screens get a little more room back on small landscape phones */
@media (max-height: 460px) {
  body.lobby-active .screen.active:not(#menu-screen):not(#game-screen):not(#deck-screen):not(#auth-screen):not(#username-screen) {
    inset: 3vh 4vw;
    border-radius: 10px;
  }
}

/* ── 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;
  flex: 0 0 auto;
}

/* The header must never wrap. On a narrow display "BLOC 3D HOOD" broke onto
   three lines and collided with the presence chip and the buttons. Let the
   title shrink and clip, and drop it entirely when there is no room. */
#lobby-hud-top > div:first-child {
  min-width: 0;
  overflow: hidden;
}
#lobby-hud-top > div:first-child > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  #lobby-hud-top > div:first-child > span:first-child { display: none; }
}
@media (max-height: 420px) {
  #lobby-hud-top > div:first-child > span:first-child { font-size: 1.05rem; }
}

/* ── 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;
  }
}