/* ============================================================================
   WAHALA CENTRAL v4.0 — ISOMETRIC PARLOUR HOME, 4-AREA CITY MAP & AI PHONE CSS
   Inspired by LagosLife Isometric Room + City Map Aesthetics
   ============================================================================ */

:root {
  --bg-deep: #070a12;
  --bg-card: rgba(14, 19, 32, 0.92);
  --pink: #ec4899;
  --amber: #f59e0b;
  --emerald: #10b981;
  --cyan: #06b6d4;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: #f3f4f6;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Space Grotesk', sans-serif;
}

.glass {
  background: rgba(12, 17, 28, 0.30) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

.glass-pill {
  background: rgba(15, 20, 32, 0.32) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 10px #10b981;
  animation: pulseDot 1.6s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.65; }
}

/* ============================================================================
   DESKTOP 8-TAB BAR & MOBILE 3-TAB BOTTOM BAR
   ============================================================================ */
.desktop-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.18s ease;
  white-space: nowrap;
  cursor: pointer;
}
.desktop-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translateY(-1px);
}
.desktop-nav-btn.active {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.28), rgba(245, 158, 11, 0.24));
  border-color: rgba(236, 72, 153, 0.65);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.25);
}

/* Mobile 3-Tab Bottom Bar (Home, AI Phone, Map) */
#mobileBottomNav {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(15, 19, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65);
  width: min(94vw, 390px);
  justify-content: space-between;
}
.mob-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mob-tab-btn.active {
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  color: #090b10;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* ============================================================================
   HOME VIEW: "MY GIST PARLOUR" ISOMETRIC 3D CUTAWAY ROOM (LagosLife Style)
   ============================================================================ */
.parlour-stage-wrap {
  position: relative;
  width: 100%;
  min-height: 600px;
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 25%, #162436 0%, #090d16 78%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
  transition: filter 0.4s ease, background 0.4s ease;
}

/* Blackout mode when NEPA takes light */
.parlour-stage-wrap.nepa-blackout {
  background: radial-gradient(circle at 50% 25%, #05070c 0%, #020305 85%);
}
.parlour-stage-wrap.nepa-blackout .room-wall-left,
.parlour-stage-wrap.nepa-blackout .room-wall-right,
.parlour-stage-wrap.nepa-blackout .room-floor,
.parlour-stage-wrap.nepa-blackout .furniture-dimmable {
  filter: brightness(0.24) contrast(1.15);
}
.parlour-stage-wrap.nepa-blackout .tv-screen-glow,
.parlour-stage-wrap.nepa-blackout .nepa-alert-banner {
  filter: brightness(1.25) !important;
}

/* Isometric Room Shell */
.iso-room-container {
  position: relative;
  width: 100%;
  height: 560px;
  max-width: 980px;
  margin: 0 auto;
  user-select: none;
}

/* Back-Left & Back-Right Cutaway Walls */
.room-wall-left {
  position: absolute;
  top: 52px;
  left: 4%;
  width: 46%;
  height: 220px;
  background: linear-gradient(180deg, #1b4d4f 0%, #123537 82%, #d97706 82%, #b45309 100%);
  transform: skewY(-14deg);
  transform-origin: right bottom;
  border-top: 6px solid #cbd5e1;
  border-left: 6px solid #94a3b8;
  border-right: 3px solid rgba(0, 0, 0, 0.35);
  box-shadow: -12px 12px 32px rgba(0, 0, 0, 0.45);
  transition: filter 0.4s ease;
}

.room-wall-right {
  position: absolute;
  top: 52px;
  right: 4%;
  width: 46%;
  height: 220px;
  background: linear-gradient(180deg, #153e40 0%, #0e2b2d 82%, #b45309 82%, #92400e 100%);
  transform: skewY(14deg);
  transform-origin: left bottom;
  border-top: 6px solid #94a3b8;
  border-right: 6px solid #64748b;
  box-shadow: 12px 12px 32px rgba(0, 0, 0, 0.45);
  transition: filter 0.4s ease;
}

/* Isometric Checkered Floor (Matches LagosLife Warm Tiles) */
.room-floor {
  position: absolute;
  top: 245px;
  left: 6%;
  right: 6%;
  height: 285px;
  background-color: #e6be9a;
  background-image:
    linear-gradient(45deg, #c89666 25%, transparent 25%),
    linear-gradient(-45deg, #c89666 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #c89666 75%),
    linear-gradient(-45deg, transparent 75%, #c89666 75%);
  background-size: 48px 48px;
  background-position: 0 0, 0 24px, 24px -24px, -24px 0;
  border-radius: 22px;
  border: 6px solid #78350f;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.7), inset 0 0 36px rgba(120, 53, 15, 0.35);
  transition: filter 0.4s ease;
}

/* Center Parlour Rug */
.room-rug {
  position: absolute;
  top: 58px;
  left: 26%;
  width: 48%;
  height: 150px;
  border-radius: 18px;
  background: linear-gradient(135deg, #5b21b6, #9d174d);
  border: 4px solid #f59e0b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 15px rgba(255, 255, 255, 0.15);
}

/* Interactive Room Hotspots / Furniture */
.room-hotspot {
  position: absolute;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  z-index: 20;
}
.room-hotspot:hover {
  transform: scale(1.05) translateY(-3px);
  z-index: 30;
}
.hotspot-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(9, 12, 22, 0.9);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* Avatar Bit-by-Bit Idle Animations */
@keyframes avatarBreathe {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(0.8deg); }
}
@keyframes avatarLaugh {
  0%, 100% { transform: translateY(0px) scale(1); }
  25% { transform: translateY(-6px) scale(1.04) rotate(-2deg); }
  75% { transform: translateY(-3px) scale(1.02) rotate(2deg); }
}
@keyframes floatBubble {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.avatar-actor {
  position: absolute;
  z-index: 35;
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.avatar-actor .avatar-body-svg {
  animation: avatarBreathe 2.6s infinite ease-in-out;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55));
}
.avatar-actor.pose-laughing .avatar-body-svg {
  animation: avatarLaugh 1.1s infinite ease-in-out;
}
.avatar-speech-bubble {
  animation: floatBubble 2.4s infinite ease-in-out;
}

/* ============================================================================
   WAHALA CITY MAP (Isometric LagosLife-Style Lagoon, Roads & 3D Buildings)
   ============================================================================ */
.city-map-viewport {
  position: relative;
  width: 100%;
  min-height: 640px;
  border-radius: 26px;
  overflow: hidden;
  /* Lagoon water background */
  background:
    radial-gradient(circle at 20% 20%, #1d6fa5 0%, #124e78 55%, #0c3554 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

/* Subtle animated water ripples */
.lagoon-waves {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.45;
  pointer-events: none;
}

/* Green Isometric Land Island Blocks */
.map-island-surface {
  position: relative;
  width: 94%;
  max-width: 1120px;
  min-height: 520px;
  margin: 78px auto 36px auto;
  border-radius: 34px;
  background:
    linear-gradient(135deg, #4d8b31 0%, #3b7423 55%, #2f611b 100%);
  border-top: 6px solid #74b84b;
  border-left: 6px solid #65a83e;
  border-right: 8px solid #855832;
  border-bottom: 14px solid #6b4423;
  box-shadow:
    0 24px 0 #163d5c,
    0 34px 50px rgba(0, 0, 0, 0.55);
  padding: 26px 22px 32px 22px;
}

/* Isometric Road Network inside the Island */
.map-road-h {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  background: #334155;
  border-top: 4px solid #cbd5e1;
  border-bottom: 4px solid #cbd5e1;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.map-road-h::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  border-top: 2px dashed #fbbf24;
}

.map-road-v {
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 36px;
  transform: translateX(-50%);
  background: #334155;
  border-left: 4px solid #cbd5e1;
  border-right: 4px solid #cbd5e1;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.map-road-v::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  border-left: 2px dashed #fbbf24;
}

/* Animated Danfo & Taxis on Map Roads */
@keyframes driveAcross {
  0% { left: 5%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 90%; opacity: 0; }
}
.map-danfo {
  position: absolute;
  top: calc(50% - 13px);
  z-index: 2;
  font-size: 18px;
  animation: driveAcross 14s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}

/* 3D Isometric Building Card on the Map */
.iso-building-card {
  position: relative;
  z-index: 10;
  cursor: pointer;
  border-radius: 20px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 0 rgba(8, 12, 22, 0.9),
    0 18px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.iso-building-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: #fbbf24;
  box-shadow:
    0 14px 0 rgba(8, 12, 22, 0.95),
    0 24px 38px rgba(0, 0, 0, 0.65);
}

/* 3D Isometric Roof & Facade Graphic inside Building Slot */
.iso-structure-visual {
  position: relative;
  height: 112px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Hide building name banners when "Names" toggle is OFF (shows compact icon bubble like LagosLife) */
.names-hidden .building-name-banner {
  display: none !important;
}
.names-hidden .building-compact-bubble {
  display: inline-flex !important;
}

/* ============================================================================
   VIRTUAL AI PHONE FRAME
   ============================================================================ */
.ai-phone-shell {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  border-radius: 40px;
  padding: 14px;
  background: linear-gradient(145deg, #1e293b, #090d16);
  border: 4px solid #334155;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75), inset 0 0 18px rgba(255, 255, 255, 0.08);
}
.ai-phone-screen {
  border-radius: 30px;
  background: #080b13;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 620px;
  display: flex;
  flex-direction: column;
}

/* ============================================================================
   MODALS & OVERLAYS
   ============================================================================ */
.wc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 12, 22, 0.24) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.wc-modal-backdrop.hidden {
  display: none !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 14, 24, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(236, 72, 153, 0.5);
}

/* ============================================================================
   WAHALA CITY 3D GAME MAP (Three.js) — full-viewport container, HUD, pills, card
   ============================================================================ */
.city3d-wrap {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: #0b1426;
}
#city3d { position: absolute; inset: 0; touch-action: none; }
#city3d canvas { display: block; touch-action: none; outline: none; cursor: grab; }
#city3d canvas:active { cursor: grabbing; }
.map3d-labels { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 8; }

/* Building icon pins (Icon-only by default; hover or click reveals Name + Enter) */
.map3d-pill-wrap { pointer-events: none; }
.map3d-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  color: #fff;
  font: 700 11px 'Inter', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, padding 0.18s ease, border-color 0.18s ease;
}
.map3d-pill .ico {
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  flex-shrink: 0;
}
.map3d-pill .nm,
.map3d-pill .cnt,
.map3d-pill .lk,
.map3d-pill .pill-enter {
  display: none;
}
.map3d-pill .cnt { color: #34d399; font-size: 10px; font-weight: 800; }
.map3d-pill .lk { font-size: 10px; }
.map3d-pill .pill-enter {
  margin-left: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #ec4899);
  color: #0b0f19;
  font-size: 9.5px;
  font-weight: 900;
}
.map3d-pill:hover,
.map3d-pill.is-selected {
  gap: 6px;
  padding: 3px 8px 3px 3px;
  transform: scale(1.08);
  z-index: 30;
}
.map3d-pill:hover .nm,
.map3d-pill:hover .cnt,
.map3d-pill:hover .lk,
.map3d-pill:hover .pill-enter,
.map3d-pill.is-selected .nm,
.map3d-pill.is-selected .cnt,
.map3d-pill.is-selected .lk,
.map3d-pill.is-selected .pill-enter {
  display: inline-flex;
  align-items: center;
}
.map3d-pill.is-selected {
  background: #fbbf24;
  color: #111827;
  border-color: #fde68a;
  transform: scale(1.1);
}
.map3d-pill.is-selected .cnt { color: #065f46; }
.map3d-pill.is-selected .pill-enter {
  background: #111827;
  color: #fbbf24;
}

/* Top HUD */
.map3d-top {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%);
  width: min(96%, 760px); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.map3d-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.map3d-chip {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(15, 20, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff; font: 700 12px 'Inter', sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.map3d-chip.is-on { background: #2563eb; border-color: #60a5fa; }
.map3d-select-chip { background: #f8fafc; color: #0f172a; }
.map3d-chip select { background: transparent; color: inherit; font: inherit; border: none; outline: none; cursor: pointer; }
.map3d-chip select option { color: #0f172a; }
.map3d-ticker {
  pointer-events: auto; max-width: 100%;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(6, 95, 70, 0.9); color: #d1fae5;
  border: 1px solid rgba(52, 211, 153, 0.45);
  font: 600 11.5px 'Inter', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map3d-ticker b { color: #6ee7b7; }

/* Zoom buttons */
.map3d-zoom {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px; z-index: 5;
}
.map3d-zoom button {
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(15, 20, 32, 0.9); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font: 800 18px 'Inter', sans-serif; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.map3d-zoom button:hover { background: rgba(37, 99, 235, 0.9); }

/* Hint + loading */
.map3d-hint {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(15, 20, 32, 0.85); color: #e2e8f0;
  font: 600 11px 'Inter', sans-serif; white-space: nowrap;
  z-index: 4; pointer-events: none; transition: opacity 0.6s ease;
}
.map3d-hint.fade { opacity: 0; }
.map3d-loading {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  background: #0b1426; color: #fbbf24;
  font: 800 15px 'Space Grotesk', sans-serif;
}

/* Compact Building Entry Pill Box (tap a building) */
.map3d-card {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: min(92%, 340px); z-index: 12;
  padding: 7px 9px; border-radius: 999px;
  background: rgba(12, 16, 28, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
  color: #fff;
  animation: map3dCardUp 0.2s ease;
}
@keyframes map3dCardUp {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.map3d-card .mc-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map3d-card .mc-ico {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.45);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.map3d-card .mc-titles { min-width: 0; flex: 1; }
.map3d-card .mc-title { font: 700 12.5px 'Space Grotesk', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.map3d-card .mc-kicker { font: 700 9.5px 'Inter', sans-serif; color: #fbbf24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.map3d-card .mc-enter {
  flex-shrink: 0; padding: 7px 12px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(90deg, #f59e0b, #ec4899); color: #0b0f19;
  font: 900 11px 'Inter', sans-serif; letter-spacing: 0.01em;
}
.map3d-card .mc-enter:hover { filter: brightness(1.08); }
.map3d-card .mc-close {
  width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1); color: #cbd5e1; border: none; cursor: pointer; font-size: 10px; font-weight: 800;
}

/* Compact map HUD chips on phones */
@media (max-width: 480px) {
  .map3d-chip { padding: 7px 11px; font-size: 11px; }
  .map3d-zoom { top: auto; bottom: 150px; transform: none; }
}

/* ============================================================================
   BLENDER 3D MOTION GRAPHICS HOME STAGE & MULTI-ZONE TOUCH DYNAMICS
   ============================================================================ */
.blender-motion-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  perspective: 1100px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.blender-motion-stage:active {
  cursor: grabbing;
}

/* ============================================================================
   AUTO-HIDING TOP PROFILE & STATUS HEADER (Shows 10s every 30s, otherwise hidden!)
   ============================================================================ */
.wc-autohide-header {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
  transform: translateY(0);
  opacity: 1;
}
.wc-autohide-header.is-hidden-cycle {
  transform: translateY(-150%);
  opacity: 0;
  pointer-events: none !important;
}
.wc-autohide-header.is-hidden-cycle > * {
  pointer-events: none !important;
}

/* ============================================================================
   UPPER-LEFT ADA WAHALA AVATAR ORB & POPOVER
   ============================================================================ */
.ada-corner-orb {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(236, 72, 153, 0.45), rgba(13, 21, 38, 0.95));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(245, 158, 11, 0.45);
  cursor: pointer;
}
@media (min-width: 640px) {
  .ada-corner-orb {
    width: 60px;
    height: 60px;
  }
}
.ada-orb-ring {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(251, 191, 36, 0.75);
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.65);
  animation: adaOrbPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes adaOrbPulse {
  0%, 100% { transform: scale(0.98); opacity: 0.85; }
  50% { transform: scale(1.1); opacity: 0.35; }
}

/* ============================================================================
   RIGHT-CORNER ROUND 3D SPINNING GLOBE MAP ORB
   ============================================================================ */
.globe-map-orb {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  padding: 2px;
  background: radial-gradient(circle at 30% 25%, rgba(56, 189, 248, 0.5), rgba(9, 14, 28, 0.96));
  border: 2px solid rgba(52, 211, 153, 0.75);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.8),
    0 0 18px rgba(16, 185, 129, 0.45),
    inset 0 0 12px rgba(56, 189, 248, 0.45);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
@media (min-width: 640px) {
  .globe-map-orb {
    width: 72px;
    height: 72px;
    padding: 3px;
  }
}
.globe-map-orb:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.85),
    0 0 36px rgba(52, 211, 153, 0.75),
    inset 0 0 20px rgba(56, 189, 248, 0.65);
}

.globe-sphere {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, #38bdf8 0%, #0284c7 28%, #0f172a 72%, #020617 100%);
  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.75), inset 6px 6px 14px rgba(255, 255, 255, 0.28);
}

.globe-grid-lines {
  position: absolute;
  inset: -20%;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0px, rgba(255, 255, 255, 0.16) 1px, transparent 1px, transparent 14px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, transparent 1px, transparent 14px);
  animation: globeSpin 14s linear infinite;
}

.globe-continents {
  position: absolute;
  inset: 12%;
  border-radius: 42% 58% 48% 52% / 54% 42% 58% 46%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(5, 150, 105, 0.7));
  box-shadow:
    14px -8px 0 -4px rgba(52, 211, 153, 0.65),
    -12px 12px 0 -5px rgba(16, 185, 129, 0.6);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  animation: globeFloatContinent 7s ease-in-out infinite alternate;
}

@keyframes globeSpin {
  0% { transform: translateX(0) rotate(8deg); }
  100% { transform: translateX(-28px) rotate(8deg); }
}
@keyframes globeFloatContinent {
  0% { transform: translate(-4px, -2px) scale(0.95); }
  100% { transform: translate(5px, 3px) scale(1.04); }
}

.globe-pin {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24, 0 0 14px #ec4899;
  animation: pulseDot 1.4s infinite ease-in-out;
}
.globe-pin.pin-lagos { top: 52%; left: 42%; }
.globe-pin.pin-abuja { top: 38%; left: 56%; animation-delay: 0.4s; }
.globe-pin.pin-ph { top: 62%; left: 58%; animation-delay: 0.8s; }

/* ============================================================================
   INTERACTIVE 360° PANORAMIC WORLD STAGE (PC WIDESCREEN + MOBILE VERTICAL FIT)
   Locks clickable items 1:1 to exact image pixels while panning/tilting 360°
   ============================================================================ */
.blender-bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  will-change: transform, filter;
  transition: filter 0.35s ease;
}

/* The image and hotspot container share the exact same bounding box! */
.pano-scene-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 6px;
}

.blender-lighting-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
}

.blender-ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.blender-items-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

/* Direct-on-item invisible hitbox! No ugly boxes or labels unless hovered or guided */
.blender-scene-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 2px solid transparent;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle jewel micro-glint on the real object so it feels alive without blocking art */
.item-subtle-glint {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.85);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.9), 0 0 22px rgba(236, 72, 153, 0.7);
  opacity: 0.42;
  transition: all 0.25s ease;
  animation: glintPulse 2.8s ease-in-out infinite;
}
@keyframes glintPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.32; }
  50% { transform: scale(1.25); opacity: 0.75; }
}

/* Hover / Touch / Ada Page Guide reveals the interactive highlight and badge */
.blender-scene-item:hover,
.blender-scene-item:active,
.is-guiding-items .blender-scene-item {
  z-index: 35;
  border-color: rgba(251, 191, 36, 0.85);
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, rgba(236, 72, 153, 0.08) 70%, transparent 100%);
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.55), inset 0 0 18px rgba(255, 255, 255, 0.22);
}

.blender-scene-item:hover .item-subtle-glint,
.is-guiding-items .blender-scene-item .item-subtle-glint {
  opacity: 1;
  transform: scale(1.4);
}

/* Floating Pill Badge on Interactive Scene Items — strictly hidden by default, shown ONLY on hover! */
.scene-item-FloatingBadge {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.92);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(9, 13, 24, 0.94);
  border: 1px solid rgba(56, 189, 248, 0.75);
  color: #fff;
  font: 800 10.5px 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75);
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.blender-scene-item:hover .scene-item-FloatingBadge {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1);
}

.scene-item-FloatingBadge.badge-pink { border-color: rgba(244, 114, 182, 0.8); color: #fbcfe8; }
.scene-item-FloatingBadge.badge-amber { border-color: rgba(251, 191, 36, 0.85); color: #fde68a; }
.scene-item-FloatingBadge.badge-emerald { border-color: rgba(52, 211, 153, 0.85); color: #a7f3d0; }

.tv-live-glare {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%);
  background-size: 220% 100%;
  animation: tvGlareSweep 5.5s linear infinite;
  pointer-events: none;
}
@keyframes tvGlareSweep {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

.radio-sound-rings span {
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  border: 1.5px solid rgba(251, 191, 36, 0.65);
  opacity: 0;
  pointer-events: none;
}
.is-broadcasting .radio-sound-rings span,
.is-guiding-items .radio-sound-rings span {
  animation: radioRingExpand 2.2s ease-out infinite;
}
.is-broadcasting .radio-sound-rings span:nth-child(2),
.is-guiding-items .radio-sound-rings span:nth-child(2) { animation-delay: 0.7s; }
.is-broadcasting .radio-sound-rings span:nth-child(3),
.is-guiding-items .radio-sound-rings span:nth-child(3) { animation-delay: 1.4s; }

@keyframes radioRingExpand {
  0% { transform: scale(0.95); opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Subtle Toast Showing Which Physics Dynamic Activated */
.motion-dynamic-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(9, 13, 24, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a;
  font: 700 11px 'Space Grotesk', sans-serif;
  transition: opacity 0.28s ease;
}

/* ============================================================================
   4-QUADRANT TOUCH MOTION DYNAMICS KEYFRAMES (Applied to #panoMotionShakeWrap)
   ============================================================================ */
#panoMotionShakeWrap {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.dyn-breeze-left #panoMotionShakeWrap {
  animation: dynBreezeLeft 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
@keyframes dynBreezeLeft {
  0% { transform: scale(1) translate3d(0, 0, 0) rotateY(0deg); }
  25% { transform: scale(1.035) translate3d(24px, -6px, 0) rotateY(-4.5deg) skewY(1.2deg); filter: brightness(1.14); }
  60% { transform: scale(1.018) translate3d(-12px, 4px, 0) rotateY(2.2deg) skewY(-0.6deg); }
  100% { transform: scale(1) translate3d(0, 0, 0) rotateY(0deg); }
}

/* 2. Touch Right Area: Elastic Room Shake & Warm Light Flare */
.dyn-shake-right #panoMotionShakeWrap {
  animation: dynShakeRight 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards !important;
}
@keyframes dynShakeRight {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0) rotateZ(0deg); }
  15% { transform: scale(1.03) translate3d(-22px, -8px, 0) rotateZ(-1.6deg); filter: saturate(1.25) brightness(1.15); }
  30% { transform: scale(1.03) translate3d(18px, 6px, 0) rotateZ(1.4deg); }
  45% { transform: scale(1.02) translate3d(-14px, -4px, 0) rotateZ(-1deg); }
  65% { transform: scale(1.01) translate3d(9px, 3px, 0) rotateZ(0.6deg); }
  82% { transform: scale(1.005) translate3d(-4px, -2px, 0) rotateZ(-0.3deg); }
}

/* 3. Touch Top Area: Chandelier Swing & Golden Ceiling Bloom */
.dyn-chandelier-swing #panoMotionShakeWrap {
  animation: dynChandelierSwing 1.4s ease-in-out forwards !important;
}
@keyframes dynChandelierSwing {
  0% { transform: scale(1) translateY(0) rotateZ(0deg); }
  25% { transform: scale(1.035) translateY(16px) rotateZ(1.8deg); filter: brightness(1.26) contrast(1.06); }
  55% { transform: scale(1.02) translateY(-10px) rotateZ(-1.4deg); filter: brightness(1.15); }
  80% { transform: scale(1.01) translateY(5px) rotateZ(0.6deg); }
  100% { transform: scale(1) translateY(0) rotateZ(0deg); }
}

/* 4. Touch Center/Bottom Area: 3D Depth Bounce & Ripple Wave */
.dyn-depth-bounce #panoMotionShakeWrap {
  animation: dynDepthBounce 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes dynDepthBounce {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.055) translateY(-14px); filter: brightness(1.14); }
  65% { transform: scale(0.99) translateY(6px); }
  100% { transform: scale(1) translateY(0); }
}

/* Item-Specific Trigger Animations */
.dyn-zoom-tv #panoMotionShakeWrap {
  animation: dynZoomTv 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
@keyframes dynZoomTv {
  0% { transform: scale(1); }
  45% { transform: scale(1.065) translate3d(-16px, 8px, 0); filter: brightness(1.2); }
  100% { transform: scale(1); }
}

.dyn-pulse-radio #panoMotionShakeWrap {
  animation: dynPulseRadio 1.1s ease-out forwards !important;
}
@keyframes dynPulseRadio {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.035) rotateZ(-0.8deg); filter: saturate(1.3); }
  55% { transform: scale(1.02) rotateZ(0.8deg); }
}

.dyn-flip-paper #panoMotionShakeWrap {
  animation: dynFlipPaper 1.1s ease-out forwards !important;
}
@keyframes dynFlipPaper {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.04) translateY(-12px); filter: contrast(1.12); }
}

.dyn-scene-transition #panoMotionShakeWrap {
  animation: dynSceneTransition 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
@keyframes dynSceneTransition {
  0% { opacity: 0.35; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   RECOMMENDATION 1: LIVE PICTURE-IN-PICTURE YOUTUBE MAPPED INSIDE WALL TV BEZEL
   ============================================================================ */
.in-scene-tv-embed-wrap {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 42px rgba(6, 182, 212, 0.65),
    0 0 80px rgba(236, 72, 153, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.25);
  border: 2px solid rgba(56, 189, 248, 0.85);
  z-index: 28;
  pointer-events: auto;
  transform-style: preserve-3d;
}
.in-scene-tv-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Sleek Mini Remote Floating Pill Below Wall TV When Playing */
.wall-tv-mini-remote {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 42;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(9, 13, 24, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.75);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  pointer-events: auto;
}
.wall-tv-mini-remote button {
  padding: 3px 8px;
  border-radius: 999px;
  font: 800 9.5px 'Plus Jakarta Sans', sans-serif;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
}
.wall-tv-mini-remote button:hover {
  background: #38bdf8;
  color: #020617;
}

/* ============================================================================
   RECOMMENDATION 2: WAT DAY / SUNSET / COZY NIGHT / NEPA BLACKOUT LIGHTING
   ============================================================================ */
.blender-motion-stage.lighting-day .pano-scene-img {
  filter: brightness(1.03) saturate(1.06);
}
.blender-motion-stage.lighting-sunset .pano-scene-img {
  filter: brightness(0.96) sepia(0.14) saturate(1.22) contrast(1.04);
}
.blender-motion-stage.lighting-night .pano-scene-img {
  filter: brightness(0.68) contrast(1.12) saturate(1.15) hue-rotate(-6deg);
}
/* NEPA Blackout Mode: Room goes dark except glowing TV, Radio LED & Phone! */
.blender-motion-stage.lighting-nepa .pano-scene-img {
  filter: brightness(0.24) contrast(1.28) saturate(0.75) hue-rotate(-14deg);
}
.blender-motion-stage.lighting-nepa .blender-scene-item[data-item="tv"],
.blender-motion-stage.lighting-nepa .blender-scene-item[data-item="radio"],
.blender-motion-stage.lighting-nepa .blender-scene-item[data-item="phone"],
.blender-motion-stage.lighting-nepa .in-scene-tv-embed-wrap {
  filter: brightness(3.4) drop-shadow(0 0 28px rgba(56, 189, 248, 0.9));
}

/* Diegetic Wall Light / NEPA Power Switch inside the room */
.wall-power-switch-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  width: 34px;
  height: 50px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.22s ease;
  z-index: 26;
}
.wall-power-switch-item:hover,
.is-guiding-items .wall-power-switch-item {
  border-color: #fbbf24;
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.65);
  transform: translate(-50%, -50%) scale(1.12) !important;
}
.switch-led-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.lighting-nepa .switch-led-dot {
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: pulseDot 0.7s infinite;
}

/* ============================================================================
   RECOMMENDATION 3: LIVE CITIZEN GUEST AVATARS & WATCH PARTY PRESENCE IN HOME
   ============================================================================ */
.home-guests-stage-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 27;
}

.home-guest-avatar-pod {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: guestIdleBob 3.2s ease-in-out infinite;
}
.home-guest-avatar-pod:hover {
  transform: translate(-50%, -104%) scale(1.08);
  z-index: 38;
}
@keyframes guestIdleBob {
  0%, 100% { margin-top: 0px; }
  50% { margin-top: -5px; }
}

.guest-speech-pill {
  margin-bottom: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(9, 13, 24, 0.92);
  border: 1px solid rgba(236, 72, 153, 0.65);
  color: #f8fafc;
  font: 700 10px 'Plus Jakarta Sans', sans-serif;
  max-width: 175px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
}
.guest-name-tag {
  margin-top: -4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981, #06b6d4);
  color: #020617;
  font: 900 9.5px 'Space Grotesk', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.floating-reaction-emoji {
  position: absolute;
  pointer-events: none;
  font-size: 18px;
  animation: floatReactionUp 2.1s ease-out forwards;
  z-index: 45;
}
@keyframes floatReactionUp {
  0% { transform: translateY(0) scale(0.7); opacity: 1; }
  100% { transform: translateY(-95px) scale(1.35); opacity: 0; }
}


/* ============================================================================
   v11.0 WOW UPGRADE 1: REAL-LIFE HUMAN ADA WAHALA WALKING IN-ROOM AGENT
   ============================================================================ */
.ada-human-actor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 36;
  overflow: hidden;
}

.ada-human-actor-pod {
  position: absolute;
  left: -18%;
  top: 78%;
  width: 195px;
  height: 460px;
  transform: translate(-50%, -92%) scale(0.92);
  transform-origin: 50% 95%;
  pointer-events: none;
  z-index: 38;
  opacity: 0;
  will-change: left, top, transform, opacity;
}

@media (max-width: 767px) {
  .ada-human-actor-pod {
    width: 150px;
    height: 360px;
  }
}

.ada-human-actor-pod.is-active {
  opacity: 1;
}

/* Realistic Floor Contact Shadow Beneath Ada's Heels */
.ada-human-floor-shadow {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 68%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.38) 52%, transparent 78%);
  filter: blur(4px);
  z-index: 1;
}

.ada-human-sprite-flip {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: transform 0.24s ease;
}

.ada-human-sprite-flip.face-left {
  transform: scaleX(-1);
}

.ada-human-sprite-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* Blends Ada seamlessly into the warm Blender room lighting */
  filter:
    drop-shadow(0 16px 24px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 18px rgba(251, 191, 36, 0.16))
    contrast(1.04)
    saturate(1.06);
}

/* Automatic Room Lighting Color-Grade Matching on Human Ada */
.lighting-sunset .ada-human-sprite-img {
  filter:
    drop-shadow(0 16px 24px rgba(0, 0, 0, 0.75))
    sepia(0.14)
    saturate(1.18)
    brightness(0.97);
}
.lighting-night .ada-human-sprite-img {
  filter:
    drop-shadow(0 16px 28px rgba(0, 0, 0, 0.88))
    brightness(0.84)
    contrast(1.1)
    hue-rotate(-5deg);
}
.lighting-nepa .ada-human-sprite-img {
  filter:
    drop-shadow(0 0 26px rgba(56, 189, 248, 0.65))
    brightness(0.68)
    contrast(1.18);
}

/* Natural Human Walking Cadence (Step Bob + Subtle Hip Sway) */
.ada-human-actor-pod.is-walking .ada-human-sprite-img {
  animation: adaNaturalWalkGait 0.34s ease-in-out infinite alternate;
}
@keyframes adaNaturalWalkGait {
  0% {
    transform: translateY(0px) rotate(-0.9deg);
  }
  100% {
    transform: translateY(-9px) rotate(1.1deg);
  }
}

/* Reaching / Activating Item Gesture */
.ada-human-actor-pod.is-acting .ada-human-sprite-img {
  animation: adaReachTouchPulse 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}
@keyframes adaReachTouchPulse {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.03) translateY(-4px);
    filter:
      drop-shadow(0 16px 26px rgba(0, 0, 0, 0.75))
      drop-shadow(0 0 28px rgba(251, 191, 36, 0.65));
  }
}

/* Fingertip Activation Spark Burst When Ada Touches TV / Radio / Paper / Phone */
.ada-touch-spark-ring {
  position: absolute;
  top: 22%;
  left: 12%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.95) 0%, rgba(236, 72, 153, 0.6) 45%, transparent 72%);
  box-shadow: 0 0 32px #fbbf24, 0 0 60px #ec4899;
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  z-index: 5;
}
.ada-human-actor-pod.is-acting .ada-touch-spark-ring {
  animation: adaSparkPop 0.75s ease-out infinite;
}
@keyframes adaSparkPop {
  0% { opacity: 1; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.1); }
}

/* Floating Personal Agent Status Bubble Above Ada */
.ada-human-speech-pill {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 18px;
  background: rgba(9, 13, 26, 0.94);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(251, 191, 36, 0.85);
  color: #ffffff;
  font: 800 11px/1.35 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(251, 191, 36, 0.35);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  animation: adaSpeechPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes adaSpeechPop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.88); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================================================================
   v11.0 WOW UPGRADE 2: DIEGETIC 3D BLENDER SMARTPHONE PROP IN ALL 6 ENVIRONMENTS
   ============================================================================ */
.in-scene-3d-phone-prop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 98px;
  border-radius: 14px;
  padding: 3px;
  background: linear-gradient(145deg, #cbd5e1 0%, #475569 45%, #0f172a 100%);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.82),
    0 0 22px rgba(16, 185, 129, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.75);
  transform-style: preserve-3d;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
  pointer-events: none;
}

@media (max-width: 767px) {
  .in-scene-3d-phone-prop {
    width: 48px;
    height: 82px;
    border-radius: 12px;
  }
}

.blender-scene-item[data-item="phone"]:hover .in-scene-3d-phone-prop,
.is-guiding-items .blender-scene-item[data-item="phone"] .in-scene-3d-phone-prop {
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.9),
    0 0 34px rgba(52, 211, 153, 0.95),
    0 0 60px rgba(251, 191, 36, 0.55);
}

.in-scene-3d-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 25%, rgba(236, 72, 153, 0.55), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.55), transparent 60%),
    linear-gradient(165deg, #0f172a 0%, #1e1b4b 55%, #090d16 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 4px;
  overflow: hidden;
  position: relative;
}

.in-scene-phone-island {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #000;
  margin: 0 auto;
  box-shadow: 0 0 4px rgba(52, 211, 153, 0.8);
}

.in-scene-phone-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 2px;
}

.in-scene-phone-mini-icon {
  aspect-ratio: 1;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.in-scene-phone-notif-pill {
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(16, 185, 129, 0.28);
  border: 1px solid rgba(52, 211, 153, 0.7);
  color: #ecfdf5;
  font: 900 6.5px 'Space Grotesk', sans-serif;
  text-align: center;
  letter-spacing: 0.03em;
  animation: pulseDot 1.6s infinite;
}

/* ============================================================================
   v15.0 LATEST TITANIUM SMARTPHONE EXPERIENCE (EXACT LATEST IPHONE FORM FACTOR)
   ============================================================================ */
.blender-phone-os-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: radial-gradient(circle at center, rgba(6, 10, 22, 0.56) 0%, rgba(2, 4, 10, 0.84) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  animation: phoneOsFadeIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes phoneOsFadeIn {
  0% { opacity: 0; transform: scale(0.94) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.blender-phone-chassis {
  position: relative;
  width: 100%;
  max-width: 416px;
  height: min(920px, 97dvh);
  border-radius: 52px;
  padding: 9px;
  /* Grade-5 Brushed Titanium Frame */
  background: linear-gradient(145deg, #747880 0%, #3a3d45 22%, #1d1f24 55%, #4a4e58 85%, #2a2d34 100%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.92),
    0 0 0 1.5px rgba(255, 255, 255, 0.28),
    inset 0 0 0 2px #090a0f,
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
}

@media (max-width: 640px) {
  .blender-phone-os-backdrop {
    padding: 8px 10px;
  }
  .blender-phone-chassis {
    max-width: 400px;
    width: calc(100vw - 20px);
    height: calc(100dvh - 18px);
    border-radius: 42px;
    padding: 8px;
  }
  .blender-phone-screen {
    border-radius: 34px !important;
  }
}

/* Physical Left Titanium Buttons: Action Button + Volume Up + Volume Down */
.blender-phone-chassis::before {
  content: '';
  position: absolute;
  left: -3.5px;
  top: 118px;
  width: 3.5px;
  height: 26px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #8e929b, #3a3d45);
  box-shadow:
    0 44px 0 0 #5b5f68,
    0 56px 0 0 #5b5f68,
    0 104px 0 0 #5b5f68,
    0 116px 0 0 #5b5f68;
  pointer-events: none;
}

/* Physical Right Titanium Buttons: Side Power Button + Camera Control */
.blender-phone-chassis::after {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 178px;
  width: 3.5px;
  height: 68px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #8e929b, #3a3d45);
  box-shadow: 0 185px 0 -1px rgba(142, 146, 155, 0.75);
  pointer-events: none;
}

.blender-phone-screen {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  border-radius: 46px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(37, 99, 235, 0.34) 0%, transparent 48%),
    radial-gradient(circle at 80% 24%, rgba(16, 185, 129, 0.25) 0%, transparent 48%),
    radial-gradient(circle at 50% 78%, rgba(139, 92, 246, 0.24) 0%, transparent 55%),
    linear-gradient(180deg, #070b14 0%, #0b1120 52%, #05070e 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid rgba(0, 0, 0, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Dynamic Island Capsule */
.ios-dynamic-island {
  position: relative;
  width: 118px;
  height: 31px;
  border-radius: 999px;
  background: #000000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 2px 8px rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;
  transition: width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease;
}
.ios-dynamic-island:hover {
  width: 134px;
  transform: scale(1.02);
}
.ios-island-lens {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #1e3a8a 0%, #090d16 55%, #020617 100%);
  box-shadow: inset 0 0 2px rgba(56, 189, 248, 0.6);
}
.ios-island-waveform {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ios-island-waveform span {
  width: 2px;
  border-radius: 999px;
  background: #10b981;
  animation: islandWave 1.1s ease-in-out infinite alternate;
}
.ios-island-waveform span:nth-child(1) { height: 6px; animation-delay: 0s; }
.ios-island-waveform span:nth-child(2) { height: 11px; animation-delay: 0.2s; background: #34d399; }
.ios-island-waveform span:nth-child(3) { height: 8px; animation-delay: 0.4s; }
.ios-island-waveform span:nth-child(4) { height: 5px; animation-delay: 0.15s; }
@keyframes islandWave {
  0% { transform: scaleY(0.55); opacity: 0.7; }
  100% { transform: scaleY(1.25); opacity: 1; }
}

/* Crisp iOS 18 Continuous Squircle Vector App Icons (Zero Cartoon/AI Emojis) */
.blender-app-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.blender-app-icon-btn:hover {
  transform: translateY(-3px) scale(1.05);
}
.blender-app-icon-btn:active {
  transform: scale(0.92);
}

.blender-app-squircle {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: relative;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.42),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.blender-app-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  padding: 2px 6.5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  color: #ffffff;
  font: 800 8.5px -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.55);
}

.blender-app-label {
  font: 600 10.5px -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif;
  color: #f8fafc;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  letter-spacing: -0.01em;
}

/* X-Style Animated News Banner Card inside the iPhone Feed */
@keyframes wcAiSceneMotion {
  0% { transform: scale(1.02) translate(0, 0); }
  50% { transform: scale(1.09) translate(-1.5%, -1.5%); }
  100% { transform: scale(1.02) translate(0, 0); }
}
.wc-x-anim-banner {
  position: relative;
  height: 162px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #090d16;
}
.wc-x-anim-banner-bg {
  position: absolute;
  inset: 0;
  background-size: 200% 200%;
  animation: wcAiSceneMotion 11s ease-in-out infinite;
  filter: contrast(1.06) saturate(1.12);
}

/* ============================================================================
   SCREENSHOT 3 REQUIREMENT: ULTRA-TRANSPARENT LIQUID GLASS TOP BAR & ADA MENU
   ============================================================================ */
.wc-transparent-hud-bar {
  background: rgba(15, 20, 32, 0.28) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.wc-transparent-ada-menu {
  background: rgba(12, 17, 28, 0.28) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

/* ============================================================================
   v12.0 UPGRADES: REAL FLOOR REFLECTION FOR RECORDED-IN-ROOM ADA WALK,
   360° EDGE RADAR POINTERS, MYSTERY DROP BOX & VOICE/TEXT COMMAND BAR
   ============================================================================ */

/* Real-Time Polished Floor Reflection Beneath Walking Human Ada */
.ada-human-floor-reflection {
  position: absolute;
  bottom: -118px;
  left: 0;
  width: 100%;
  height: 130px;
  transform: scaleY(-0.34) skewX(-6deg);
  transform-origin: top center;
  opacity: 0.24;
  filter: blur(2.5px) brightness(0.75);
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 85%);
}

/* Smooth Recorded-In-Room Perspective Camera Tracking on Walking Ada */
.ada-human-actor-pod.is-walking .ada-human-sprite-img {
  animation: adaRecordedWalkCadence 0.26s ease-in-out infinite alternate !important;
}
@keyframes adaRecordedWalkCadence {
  0% {
    transform: translateY(0px) rotate(-0.6deg) scaleX(0.99);
  }
  100% {
    transform: translateY(-5px) rotate(0.8deg) scaleX(1.01);
  }
}

/* Respect Reduced Motion Accessibility Setting (PRD Section 3) */
@media (prefers-reduced-motion: reduce) {
  .ada-human-actor-pod.is-walking .ada-human-sprite-img,
  .home-guest-avatar-pod {
    animation: none !important;
  }
}

/* Mobile 360° Off-Screen Edge Radar Pointers */
.edge-radar-pill {
  position: fixed;
  top: 52%;
  transform: translateY(-50%);
  z-index: 48;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(9, 13, 26, 0.9);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(251, 191, 36, 0.75);
  color: #fde68a;
  font: 800 10.5px 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}
.edge-radar-pill.edge-left { left: 10px; }
.edge-radar-pill.edge-right { right: 10px; }
.edge-radar-pill.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Daily Soft-Life Mystery Package Drop on Floor */
.mystery-drop-box-item {
  position: absolute;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: mysteryBoxBounce 2.2s ease-in-out infinite;
}
@keyframes mysteryBoxBounce {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  50% { transform: translate(-50%, -50%) translateY(-7px) scale(1.06); }
}
.mystery-box-glow {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, #fde047, #f59e0b 60%, #b45309 100%);
  border: 2px solid #fff;
  box-shadow: 0 0 28px rgba(251, 191, 36, 0.9), 0 10px 20px rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* Talk/Type to Ada Accessible Command Bar */
.ada-voice-cmd-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(92vw, 480px);
  padding: 10px 12px;
  border-radius: 26px;
  background: rgba(9, 13, 26, 0.95);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(251, 191, 36, 0.75);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(236, 72, 153, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ============================================================================
   v16.0 UPGRADES:
   1. PA AI PC (MAC STUDIO DISPLAY / IMAC SHAPE SCREEN FOR DESKTOP NEWS FEED & WORK PC)
   2. CENTERED LARGER SMART TV YOUTUBE PLAYER WITH FULL-SCREEN BUTTON
   3. AUTHENTIC IOS 18 WIDGETS, WALLPAPER, SEARCH PILL & DOCK (NO BRAND LOGOS)
   ============================================================================ */

/* 1. PA AI PC (Mac PC Widescreen Display Chassis — No Apple/Mac Logo or Name) */
.blender-phone-chassis.is-mac-pc-mode {
  max-width: min(1020px, 95vw);
  width: min(1020px, 95vw);
  height: min(850px, 94dvh);
  border-radius: 26px 26px 22px 22px;
  padding: 10px 10px 30px 10px;
  background: linear-gradient(165deg, #d1d5db 0%, #9ca3af 28%, #4b5563 65%, #cbd5e1 100%);
  box-shadow:
    0 40px 110px rgba(0, 0, 0, 0.92),
    0 0 0 1.5px rgba(255, 255, 255, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.85),
    inset 0 -10px 18px rgba(15, 23, 42, 0.45);
  margin-bottom: 20px;
}

/* Remove phone side buttons when in Mac PC Mode; add sleek aluminum display stand! */
.blender-phone-chassis.is-mac-pc-mode::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -36px;
  top: auto;
  transform: translateX(-50%);
  width: 116px;
  height: 36px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #6b7280 0%, #d1d5db 48%, #9ca3af 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75);
  clip-path: polygon(14% 0%, 86% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

.blender-phone-chassis.is-mac-pc-mode::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -42px;
  top: auto;
  right: auto;
  transform: translateX(-50%);
  width: 210px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b7280 0%, #e5e7eb 50%, #6b7280 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.blender-phone-chassis.is-mac-pc-mode .blender-phone-screen {
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 22%, rgba(14, 165, 233, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 82% 25%, rgba(16, 185, 129, 0.28) 0%, transparent 48%),
    radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.28) 0%, transparent 55%),
    linear-gradient(160deg, #060b16 0%, #0b1528 52%, #050912 100%);
  border: 2px solid #05070c;
}

/* Top Camera Notch on Mac PC Screen */
.mac-pc-camera-notch {
  width: 124px;
  height: 22px;
  background: #000000;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}
.mac-pc-camera-lens {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #38bdf8, #0f172a 70%);
}
.mac-pc-camera-led {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Traffic Light Window Controls (Red / Yellow / Green) */
.mac-traffic-lights {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mac-traffic-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  cursor: pointer;
  border: 0.5px solid rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.mac-traffic-dot:hover {
  transform: scale(1.12);
  filter: brightness(1.15);
}
.mac-traffic-dot.dot-close { background: #ff5f57; }
.mac-traffic-dot.dot-min { background: #febc2e; }
.mac-traffic-dot.dot-max { background: #28c840; }

/* In-Scene 3D Work Desk PA AI PC Prop Highlight */
.in-scene-3d-pc-prop {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.16), transparent 72%);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

/* 2. Centered & Larger Room Smart TV YouTube Cinema Overlay (Screenshot 4) */
.centered-room-tv-overlay {
  position: fixed;
  left: 50%;
  top: 56px;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(700px, 94vw);
  max-height: calc(100dvh - 66px);
  z-index: 65;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  animation: centeredTvPopIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes centeredTvPopIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.centered-room-tv-frame {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 220px;
  max-height: min(410px, calc(100dvh - 190px));
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 2.5px solid rgba(56, 189, 248, 0.88);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.92),
    0 0 42px rgba(6, 182, 212, 0.50),
    0 0 80px rgba(236, 72, 153, 0.24);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.centered-room-tv-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.centered-room-tv-controls {
  margin-top: 6px;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 18px;
  background: rgba(9, 13, 24, 0.95);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(56, 189, 248, 0.75);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.88);
  pointer-events: auto;
}
.centered-room-tv-controls button {
  padding: 4px 9px;
  border-radius: 999px;
  font: 800 10px 'Plus Jakarta Sans', sans-serif;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
}
@media (max-width: 640px) {
  .centered-room-tv-overlay {
    top: 48px;
    bottom: 8px;
    width: 96vw;
    max-height: calc(100dvh - 56px);
  }
  .centered-room-tv-frame {
    min-height: 195px;
    max-height: calc(100dvh - 205px);
    border-radius: 14px;
  }
  .centered-room-tv-controls {
    margin-top: 5px;
    padding: 6px 8px;
    border-radius: 14px;
    gap: 4px;
    max-height: 148px;
    overflow-y: auto;
  }
  .centered-room-tv-controls button {
    padding: 3.5px 7px;
    font-size: 9px;
  }
}
.centered-room-tv-controls button:hover {
  background: #38bdf8;
  color: #020617;
  border-color: #38bdf8;
}
.centered-room-tv-controls button.tv-fullscreen-btn {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #020617;
  border-color: #fde68a;
}
.centered-room-tv-controls button.tv-close-btn {
  background: rgba(239, 68, 68, 0.25);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.45);
}
.centered-room-tv-controls button.tv-close-btn:hover {
  background: #ef4444;
  color: #fff;
}

/* 3. Lucid Sunset Skyline iPhone Wallpaper & Glossy iOS 18 Top Widgets */
.ios18-authentic-wallpaper {
  position: relative;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(49, 46, 129, 0.95) 0%, transparent 65%),
    radial-gradient(110% 60% at 85% 38%, rgba(168, 85, 247, 0.78) 0%, transparent 62%),
    radial-gradient(115% 65% at 18% 58%, rgba(217, 70, 239, 0.68) 0%, transparent 62%),
    radial-gradient(125% 55% at 50% 96%, rgba(245, 158, 11, 0.88) 0%, rgba(234, 88, 12, 0.65) 48%, transparent 78%),
    linear-gradient(180deg, #17153b 0%, #3b1c71 32%, #7e22ce 56%, #c026d3 74%, #ea580c 90%, #f59e0b 100%) !important;
}

.ios18-widget-weather {
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(14, 165, 233, 0.78) 0%, rgba(37, 99, 235, 0.82) 55%, rgba(30, 58, 138, 0.88) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
}

.ios18-widget-calendar {
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.82) 0%, rgba(30, 27, 75, 0.88) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.28);
}

/* ============================================================================
   v17.0 WAHALA CENTRAL WORDMARK LOGO (TRANSPARENT HOME TAB COLOUR PALETTE)
   & MOBILE-OPTIMIZED SIGNUP / LOGIN MODAL
   ============================================================================ */
.wc-wordmark-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3.5px 11px;
  border-radius: 999px;
  background: rgba(15, 20, 32, 0.42);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  border: 1px solid rgba(251, 191, 36, 0.42);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    inset 0 0 12px rgba(236, 72, 153, 0.14);
}

.wc-wordmark-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fcd34d 0%, #fbbf24 24%, #ec4899 54%, #34d399 82%, #6ee7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(251, 191, 36, 0.28));
  line-height: 1.05;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .wc-modal-backdrop {
    padding: 8px;
    align-items: center;
  }
  #signupModal > div {
    max-height: 94dvh;
    padding: 14px 14px 16px 14px;
    border-radius: 22px;
  }
}

/* ============================================================================
   v24.0 INSTAGRAM AVATAR STUDIO RANGE SLIDERS & SCROLLBARS
   ============================================================================ */
.ig-range-slider {
  -webkit-appearance: none;
  appearance: none;
  background: #3a3a3c;
  height: 6px;
  border-radius: 9999px;
  outline: none;
}
.ig-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.95);
  transition: transform 0.12s ease;
}
.ig-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.ig-range-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.95);
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================================================
   v27.0 3D AVATAR STUDIO — CONTINUOUS LIFELIKE IDLE MOTION & 360° TILT/ROTATE
   ============================================================================ */
.ig-stage-3d-rig {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

.ig-stage-face-front {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(0deg) translateZ(2px);
}

.ig-stage-face-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg) translateZ(2px);
}

@keyframes igAvatarIdleMotion {
  0%, 100% {
    transform: translateY(0px) rotateZ(0deg) scale(1);
  }
  25% {
    transform: translateY(-3.5px) rotateZ(-0.7deg) scale(1.006);
  }
  50% {
    transform: translateY(-1.5px) rotateZ(0.5deg) scale(1.003);
  }
  75% {
    transform: translateY(-4px) rotateZ(0.8deg) scale(1.007);
  }
}

.ig-avatar-idle-motion {
  animation: igAvatarIdleMotion 4.2s ease-in-out infinite;
  transform-origin: 50% 85%;
}

@keyframes igHeadSubtleSway {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  30% { transform: rotate(-1.4deg) translateY(-1.2px); }
  68% { transform: rotate(1.3deg) translateY(-0.8px); }
}

.ig-anim-head {
  animation: igHeadSubtleSway 4.8s ease-in-out infinite;
  transform-origin: 110px 104px;
}

@keyframes igChestBreath {
  0%, 100% { transform: scaleX(1) scaleY(1) translateY(0px); }
  50% { transform: scaleX(1.016) scaleY(1.012) translateY(-1.4px); }
}

.ig-anim-torso {
  animation: igChestBreath 3.6s ease-in-out infinite;
  transform-origin: 110px 156px;
}

@keyframes igArmSwayL {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.8deg) translateY(-1px); }
}

@keyframes igArmSwayR {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.8deg) translateY(-1px); }
}

.ig-anim-arm-l {
  animation: igArmSwayL 3.8s ease-in-out infinite;
  transform-origin: 76px 126px;
}

.ig-anim-arm-r {
  animation: igArmSwayR 3.8s ease-in-out infinite;
  transform-origin: 144px 126px;
}

@keyframes igEyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

.ig-anim-blink {
  animation: igEyeBlink 4.6s ease-in-out infinite;
  transform-origin: 110px 64px;
}

/* ============================================================================
   v28.0 360° MOTION BLENDER BUILDING ENVIRONMENTS, WALKING AVATAR POV &
   MEME LAB ART GALLERY + DARA VENDOR VIRAL MEME STUDIO
   ============================================================================ */
.bldg-motion-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070b14;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: grab;
}
.bldg-motion-stage:active {
  cursor: grabbing;
}

.bldg-motion-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2400px;
  height: 1080px;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 54%;
  will-change: transform;
}

.bldg-motion-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.04) saturate(1.08);
  pointer-events: none;
  transition: opacity 0.38s ease, filter 0.38s ease;
}

.bldg-motion-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0) 48%, rgba(4, 7, 15, 0.58) 100%),
    linear-gradient(180deg, rgba(5, 8, 18, 0.55) 0%, rgba(5, 8, 18, 0.04) 24%, rgba(5, 8, 18, 0.08) 68%, rgba(5, 8, 18, 0.72) 100%);
}

/* Interactive Floor Click Target Ripple */
.bldg-floor-walk-ripple {
  position: absolute;
  width: 54px;
  height: 22px;
  margin-left: -27px;
  margin-top: -11px;
  border-radius: 50%;
  border: 2.5px solid #34d399;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.38) 0%, transparent 72%);
  pointer-events: none;
  z-index: 22;
  animation: bldgWalkRippleAnim 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bldgWalkRippleAnim {
  0% {
    transform: scale(0.35);
    opacity: 1;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

/* Grounded 3D Avatar Pod on Motion Blender Floor */
.motion-room-avatar-pod {
  position: absolute;
  transform: translate(-50%, -92%);
  transform-origin: 50% 94%;
  z-index: 30;
  pointer-events: auto;
  cursor: pointer;
  transition:
    left 0.85s cubic-bezier(0.22, 0.9, 0.32, 1),
    top 0.85s cubic-bezier(0.22, 0.9, 0.32, 1),
    transform 0.35s ease;
  will-change: left, top, transform;
}

.motion-room-avatar-pod:hover {
  filter: brightness(1.08);
}

.motion-room-avatar-pod.is-user-pov {
  z-index: 42;
}

.motion-room-avatar-pod.is-ada-host {
  z-index: 41;
  pointer-events: auto !important;
  cursor: pointer;
}

.motion-room-avatar-pod.is-ada-host .motion-room-avatar-shadow {
  width: 98px;
  height: 24px;
  background:
    radial-gradient(ellipse at center, rgba(251, 191, 36, 0.52) 0%, rgba(236, 72, 153, 0.34) 48%, rgba(16, 185, 129, 0.24) 64%, rgba(0, 0, 0, 0.58) 76%, transparent 86%);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.48);
}

.ada-host-name-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 20, 34, 0.92), rgba(30, 18, 42, 0.92));
  border: 1.5px solid rgba(251, 191, 36, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75), 0 0 14px rgba(236, 72, 153, 0.35);
  color: #fde68a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-bottom: 3px;
  pointer-events: none;
}

.motion-room-avatar-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 92%;
}

/* Floor Contact Shadow + Real-Time Floor Reflection */
.motion-room-avatar-shadow {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 78%);
  pointer-events: none;
  z-index: 1;
}

.motion-room-avatar-pod.is-user-pov .motion-room-avatar-shadow {
  width: 96px;
  height: 24px;
  background:
    radial-gradient(ellipse at center, rgba(16, 185, 129, 0.42) 0%, rgba(251, 191, 36, 0.26) 48%, rgba(0, 0, 0, 0.55) 70%, transparent 82%);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.45);
}

.motion-room-avatar-reflection {
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translateX(-50%) scaleY(-0.38);
  transform-origin: top center;
  opacity: 0.22;
  filter: blur(2.4px) brightness(0.75);
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 68%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 68%);
}

/* Walking Stride Gait Animation when Avatar moves across the Motion Blender Floor */
.motion-room-avatar-pod.is-js-walking {
  transition: none !important;
}

.motion-room-avatar-pod .avatar-view-back {
  display: none;
}

.motion-room-avatar-pod.walk-dir-away .avatar-view-front,
.motion-room-avatar-pod.pose-look-away .avatar-view-front {
  display: none !important;
}

.motion-room-avatar-pod.walk-dir-away .avatar-view-back,
.motion-room-avatar-pod.pose-look-away .avatar-view-back {
  display: block !important;
}

.motion-room-avatar-pod.walk-dir-left .motion-room-avatar-figure,
.motion-room-avatar-pod.pose-turn-left .motion-room-avatar-figure {
  transform: perspective(650px) rotateY(-24deg);
}

.motion-room-avatar-pod.walk-dir-right .motion-room-avatar-figure,
.motion-room-avatar-pod.pose-turn-right .motion-room-avatar-figure {
  transform: perspective(650px) rotateY(24deg);
}

/* Citizen Speech Bubble: Hidden by default so the room stays clean; pops up only when speaking or hovered! */
.citizen-speech-bubble {
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-room-avatar-pod:hover .citizen-speech-bubble,
.motion-room-avatar-pod.is-speaking .citizen-speech-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 360° Panoramic Wing Edge Pointers */
.bldg-edge-pan-pill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 38;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(8, 13, 28, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.72);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.22s ease;
}
.bldg-edge-pan-pill:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: #34d399;
  color: #ffffff;
  transform: translateY(-50%) scale(1.06);
}
.bldg-edge-pan-pill.edge-left {
  left: 10px;
}
.bldg-edge-pan-pill.edge-right {
  right: 10px;
}
.bldg-edge-pan-pill.is-dimmed {
  opacity: 0.25;
  pointer-events: none;
}

@keyframes roomAvatarWalkBob {
  0%, 100% {
    transform: translateY(0px) rotateZ(-1.6deg);
  }
  25% {
    transform: translateY(-9px) rotateZ(1.1deg);
  }
  50% {
    transform: translateY(-1px) rotateZ(1.6deg);
  }
  75% {
    transform: translateY(-9px) rotateZ(-1.1deg);
  }
}

@keyframes igWalkLegL {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-7px) translateX(-4px) rotate(16deg); }
  75% { transform: translateY(2px) translateX(4px) rotate(-14deg); }
}

@keyframes igWalkLegR {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(2px) translateX(4px) rotate(-14deg); }
  75% { transform: translateY(-7px) translateX(-4px) rotate(16deg); }
}

@keyframes igWalkArmL {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(18deg) translateY(-3px); }
  75% { transform: rotate(-18deg) translateY(2px); }
}

@keyframes igWalkArmR {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-18deg) translateY(2px); }
  75% { transform: rotate(18deg) translateY(-3px); }
}

@keyframes igReachHandR {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-42deg) translateY(-8px) translateX(4px); }
}

.motion-room-avatar-pod.is-walking .ig-avatar-idle-motion {
  animation: roomAvatarWalkBob 0.44s ease-in-out infinite !important;
}

.motion-room-avatar-pod.is-walking .ig-anim-arm-l {
  animation: igWalkArmL 0.44s ease-in-out infinite !important;
  transform-origin: 76px 126px;
}

.motion-room-avatar-pod.is-walking .ig-anim-arm-r {
  animation: igWalkArmR 0.44s ease-in-out infinite !important;
  transform-origin: 144px 126px;
}

.motion-room-avatar-pod.is-reaching .ig-anim-arm-r {
  animation: igReachHandR 0.65s ease-in-out infinite !important;
  transform-origin: 144px 126px;
}

.motion-room-avatar-pod.is-walking .ig-anim-leg-l {
  animation: igWalkLegL 0.44s ease-in-out infinite !important;
  transform-origin: 96px 198px;
}

.motion-room-avatar-pod.is-walking .ig-anim-leg-r {
  animation: igWalkLegR 0.44s ease-in-out infinite !important;
  transform-origin: 124px 198px;
}

/* Meme Lab Art Gallery Wall Frames */
.meme-gallery-wall-frame {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #090d16;
  border: 4px solid #fbbf24;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.72),
    inset 0 0 0 3px #1e293b,
    0 0 24px rgba(251, 191, 36, 0.24);
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  z-index: 18;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.meme-gallery-wall-frame:hover {
  transform: translate(-50%, -52%) scale(1.07) !important;
  border-color: #34d399;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(16, 185, 129, 0.55);
  z-index: 36;
}

/* Diegetic Interactive Hotspot Pin on Building Motion Blender Scene (Icon Only, Hover for Name) */
.bldg-scene-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 65;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.bldg-scene-hotspot:hover {
  transform: translate(-50%, -54%) scale(1.12);
  z-index: 75;
}
.bldg-scene-hotspot .hotspot-hover-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bldg-scene-hotspot:hover .hotspot-hover-tooltip {
  opacity: 1 !important;
  transform: translate(-50%, -2px);
}

/* ============================================================================
   4D FULL-BODY HUMAN AVATAR PRESENCE (ADA-SCALE VOLUMETRIC RIM LIGHTING & RIG)
   ============================================================================ */
.avatar-4d-human {
  perspective: 1100px;
  transform-style: preserve-3d;
}
.avatar-4d-human .avatar-4d-rig {
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.78))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45))
    contrast(1.04)
    saturate(1.05);
  animation: avatar4dHumanPresence 4.2s ease-in-out infinite;
}
@keyframes avatar4dHumanPresence {
  0%, 100% {
    transform: translateZ(0px) rotateY(-4deg) rotateX(1.5deg) translateY(0px);
  }
  50% {
    transform: translateZ(14px) rotateY(4deg) rotateX(-1.5deg) translateY(-5px);
  }
}

.motion-room-avatar-pod.is-sitting-sofa .avatar-4d-rig {
  animation: avatar4dSeatedLounge 4.8s ease-in-out infinite;
  filter:
    drop-shadow(0 16px 24px rgba(0, 0, 0, 0.82))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45))
    contrast(1.04)
    saturate(1.05);
}

.motion-room-avatar-pod.is-sitting-sofa .motion-room-avatar-reflection {
  opacity: 0.14;
  transform: scaleY(-0.22) translateY(-18px);
}

@keyframes avatar4dSeatedLounge {
  0%, 100% {
    transform: translateZ(4px) rotateY(-3deg) rotateX(1deg) translateY(0px);
  }
  50% {
    transform: translateZ(10px) rotateY(2deg) rotateX(-1deg) translateY(-2.5px);
  }
}

/* ============================================================================
   INSTAGRAM-STYLE LIQUID-GLASS ROOM NEWSPAPER & AI AVATAR MEDIA STAGES
   Matches Screenshot 2 (.wc-transparent-ada-menu warm frosted glass)
   ============================================================================ */
.wc-liquid-newspaper-shell {
  background: linear-gradient(165deg, rgba(32, 24, 16, 0.56) 0%, rgba(16, 18, 26, 0.52) 55%, rgba(28, 20, 14, 0.58) 100%) !important;
  backdrop-filter: blur(20px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.72),
    inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

.wc-liquid-news-card {
  background: linear-gradient(155deg, rgba(28, 21, 15, 0.82) 0%, rgba(14, 17, 25, 0.86) 100%);
  border: 1px solid rgba(251, 191, 36, 0.28);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  transition: border-color 0.22s ease;
  content-visibility: auto;
  contain-intrinsic-size: 0 380px;
}
.wc-liquid-news-card:hover {
  border-color: rgba(251, 191, 36, 0.58);
}

@keyframes wcAiSceneKenBurns {
  0% { transform: scale(1.02) translate(0%, 0%); }
  50% { transform: scale(1.11) translate(-2.5%, -1.5%); }
  100% { transform: scale(1.02) translate(0%, 0%); }
}
.wc-ai-motion-pan {
  animation: wcAiSceneKenBurns 9s ease-in-out infinite;
}

@keyframes wcAiGifActorLeftMove {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(-1.5deg) scale(1); }
  25% { transform: translateX(14px) translateY(-6px) rotate(2deg) scale(1.04); }
  50% { transform: translateX(24px) translateY(0px) rotate(-1deg) scale(1.02); }
  75% { transform: translateX(8px) translateY(-5px) rotate(1.5deg) scale(1.03); }
}
@keyframes wcAiGifActorRightMove {
  0%, 100% { transform: translateX(0px) translateY(0px) scaleX(-1) rotate(-1deg); }
  30% { transform: translateX(-16px) translateY(-7px) scaleX(-1) rotate(2.5deg); }
  60% { transform: translateX(-24px) translateY(-1px) scaleX(-1) rotate(-2deg); }
  85% { transform: translateX(-9px) translateY(-5px) scaleX(-1) rotate(1deg); }
}
.wc-ai-gif-actor-left {
  animation: wcAiGifActorLeftMove 3.2s ease-in-out infinite;
}
.wc-ai-gif-actor-right {
  animation: wcAiGifActorRightMove 3.5s ease-in-out infinite;
}

@keyframes wcAiMemePulse {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-5px) scale(1.05); }
}
.wc-ai-meme-bounce {
  animation: wcAiMemePulse 2.4s ease-in-out infinite;
}

@keyframes wcAiGifProgressSweep {
  0% { width: 8%; }
  100% { width: 100%; }
}
.wc-ai-gif-progress {
  animation: wcAiGifProgressSweep 5.5s linear infinite;
}

/* ============================================================================
   PLATFORM-WIDE TRANSLUCENT LIQUID-GLASS CONTAINERS (SCREENSHOT 2 STANDARD)
   Replaces all opaque dark containers with luminous frosted glass so the 360°
   rooms & 3D city map remain vividly visible behind every modal and card.
   ============================================================================ */
#buildingModal > div,
#signupModal > div,
#walletModal > div,
#floatingRoomTvDrawer,
#bldgRoomRosterModal > div,
#wcWhotArenaModal > div,
#wcGamesTableHubModal > div,
#wcSuperPillarModal > div,
#wcNewspaperArticlePopupModal > div,
#wcRoomNewspaperOverlay > div,
.wc-liquid-newspaper-shell,
.wc-liquid-modal-card {
  background: linear-gradient(165deg, rgba(42, 28, 18, 0.68) 0%, rgba(18, 16, 24, 0.72) 55%, rgba(36, 24, 15, 0.70) 100%) !important;
  backdrop-filter: blur(20px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.62),
    inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

/* Official Wahala Central Brand Color Code (Screenshot 4 Palette) */
.wc-brand-panel {
  background: linear-gradient(160deg, rgba(52, 34, 20, 0.48) 0%, rgba(20, 16, 24, 0.56) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.wc-brand-active {
  background: linear-gradient(92deg, #ec4899 0%, #fbbf24 52%, #34d399 100%) !important;
  color: #090d16 !important;
  border: 1.5px solid rgba(253, 224, 71, 0.85) !important;
  box-shadow: 0 10px 26px rgba(236, 72, 153, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}
.wc-brand-active:hover {
  filter: brightness(1.06);
}

.wc-brand-idle {
  background: rgba(120, 82, 50, 0.28) !important;
  border: 1px solid rgba(251, 191, 36, 0.30) !important;
  color: #fef3c7 !important;
}
.wc-brand-idle:hover {
  background: rgba(146, 100, 62, 0.42) !important;
  border-color: rgba(251, 191, 36, 0.58) !important;
}

.wc-brand-emerald {
  background: rgba(16, 185, 129, 0.24) !important;
  border: 1px solid rgba(52, 211, 153, 0.55) !important;
  color: #a7f3d0 !important;
}
.wc-brand-emerald:hover {
  background: rgba(16, 185, 129, 0.36) !important;
  border-color: rgba(52, 211, 153, 0.80) !important;
}

.wc-brand-pink {
  background: rgba(236, 72, 153, 0.22) !important;
  border: 1px solid rgba(244, 114, 182, 0.52) !important;
  color: #fbcfe8 !important;
}
.wc-brand-pink:hover {
  background: rgba(236, 72, 153, 0.34) !important;
}

.wc-brand-amber {
  background: rgba(245, 158, 11, 0.22) !important;
  border: 1px solid rgba(251, 191, 36, 0.52) !important;
  color: #fde68a !important;
}
.wc-brand-amber:hover {
  background: rgba(245, 158, 11, 0.34) !important;
}

#bldgRoomRosterModal,
#wcWhotArenaModal,
#wcGamesTableHubModal,
#wcSuperPillarModal,
#wcNewspaperArticlePopupModal,
#wcRoomNewspaperOverlay {
  background: rgba(8, 12, 22, 0.24) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Make inner dark cards & panels inside modals translucent frosted glass */
#buildingModal [class*="bg-[#0"],
#buildingModal [class*="bg-[#11"],
#buildingModal [class*="bg-[#12"],
#buildingModal [class*="bg-slate-950"],
#buildingModal [class*="bg-slate-900"],
#buildingModal .bg-black\/90,
#buildingModal .bg-black\/85,
#buildingModal .bg-black\/80,
#buildingModal .bg-black\/75,
#buildingModal .bg-black\/70,
#buildingModal .bg-black\/65,
#buildingModal .bg-black\/60,
#buildingModal .bg-black\/55,
#buildingModal .bg-black\/50,
#signupModal [class*="bg-[#0"],
#signupModal [class*="bg-slate-9"],
#signupModal .bg-black\/60,
#signupModal .bg-black\/50,
#walletModal [class*="bg-[#0"],
#walletModal [class*="bg-slate-9"],
#walletModal .bg-black\/60,
#walletModal .bg-black\/50,
#floatingRoomTvDrawer [class*="bg-[#0"],
#floatingRoomTvDrawer [class*="bg-slate-9"],
#floatingRoomTvDrawer .bg-black\/60,
#bldgRoomRosterModal [class*="bg-slate-9"],
#wcWhotArenaModal [class*="bg-[#0"],
#wcWhotArenaModal [class*="bg-slate-9"],
#wcGamesTableHubModal [class*="bg-[#0"],
#wcGamesTableHubModal [class*="bg-slate-9"],
#wcSuperPillarModal [class*="bg-[#0"],
#wcSuperPillarModal [class*="bg-slate-9"],
#wcNewspaperArticlePopupModal .bg-black\/55,
#wcNewspaperArticlePopupModal .bg-black\/50,
#wcNewspaperArticlePopupModal .bg-black\/45,
#adaCornerMenu [class*="bg-black/"] {
  background: rgba(15, 20, 32, 0.28) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ============================================================================
   NAIJA WHOT! — REALISTIC CARD TABLE (cream cards, maroon shapes, wood-rim felt)
   ============================================================================ */
.wc-whot-room {
  background: radial-gradient(circle at 50% 0%, #17392b 0%, #0d2219 55%, #08150f 100%);
  margin: -16px;
  padding: 16px;
  border-radius: 20px;
  min-height: 100%;
}
@media (min-width: 640px) {
  .wc-whot-room { margin: -24px; padding: 20px 24px; }
}

.wc-whot-card {
  position: relative;
  display: block;
  flex-shrink: 0;
  border-radius: 9px;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.35);
  background: transparent;
  padding: 0;
  border: 0;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, filter 0.18s ease;
}

.wc-whot-felt {
  background:
    radial-gradient(ellipse at 50% 42%, #2f8a5c 0%, #1f6b46 38%, #154f34 72%, #0f3a26 100%);
  border: 7px solid #6b4426;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.35),
    inset 0 18px 40px rgba(0, 0, 0, 0.35),
    inset 0 -10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 2px #3f2614,
    0 18px 40px rgba(0, 0, 0, 0.55);
}
.wc-whot-felt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
}

.wc-whot-hand {
  scrollbar-width: none;
}
.wc-whot-hand::-webkit-scrollbar { display: none; }

.wc-whot-hand-card {
  cursor: pointer;
}
.wc-whot-hand-card:hover {
  transform: translateY(-14px);
  z-index: 50 !important;
}
.wc-whot-hand-card.is-playable {
  transform: translateY(-10px);
  box-shadow:
    0 0 0 2px rgba(252, 211, 77, 0.9),
    0 12px 22px rgba(0, 0, 0, 0.5);
}
.wc-whot-hand-card.is-playable:hover {
  transform: translateY(-20px);
}
.wc-whot-hand-card.is-dim {
  filter: brightness(0.82) saturate(0.85);
}

@keyframes wcWhotShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.wc-whot-shake { animation: wcWhotShake 0.38s ease; }

@keyframes wcWhotPileSlam {
  0% { opacity: 0; transform: translateY(-46px) scale(1.18) rotate(-14deg); }
  70% { opacity: 1; transform: translateY(2px) scale(0.98); }
  100% { opacity: 1; }
}
.wc-whot-pile-top { animation: wcWhotPileSlam 0.32s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes wcWhotMarketPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(252, 211, 77, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.65)); }
}
.wc-whot-market-live > div { animation: wcWhotMarketPulse 1.8s ease-in-out infinite; }
.wc-whot-market-live:hover > div { transform: translateY(-3px); }

@keyframes wcWhotSeatArrive {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: none; }
}
.wc-whot-seat-arrive { animation: wcWhotSeatArrive 0.45s ease; }

@keyframes wcWhotWaitingFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-6px) rotate(6deg); }
}
.wc-whot-waiting-card { width: 40px; animation: wcWhotWaitingFloat 2.6s ease-in-out infinite; }

@keyframes wcWhotResultPop {
  0% { opacity: 0; transform: scale(0.9) translateY(10px); }
  100% { opacity: 1; transform: none; }
}
.wc-whot-result { animation: wcWhotResultPop 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

.wc-whot-resign {
  position: relative;
  overflow: hidden;
}
.wc-whot-resign::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 0;
  background: rgba(244, 63, 94, 0.45);
  transition: width 0s;
}
.wc-whot-resign.is-holding::after {
  width: 100%;
  transition: width 1.2s linear;
}

@keyframes wcWhotChatUp {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
#wcWhotChatSheet:not(.hidden) .wc-whot-chat-panel { animation: wcWhotChatUp 0.28s cubic-bezier(0.22, 1, 0.36, 1); }

/* Table-Shake on Pick Two / Pick Three / Whot 20 */
@keyframes wcTableHeavyShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-8px, -3px, 0) rotate(-0.8deg); }
  30% { transform: translate3d(8px, 3px, 0) rotate(0.8deg); }
  45% { transform: translate3d(-6px, 2px, 0) rotate(-0.5deg); }
  60% { transform: translate3d(6px, -2px, 0) rotate(0.5deg); }
  75% { transform: translate3d(-3px, 1px, 0); }
}
.wc-whot-table-shake {
  animation: wcTableHeavyShake 0.48s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Naija Callout Pop Banner */
@keyframes wcCalloutPop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.75); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.92); }
}
.wc-whot-callout-banner {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 45;
  pointer-events: none;
  animation: wcCalloutPop 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Spectator & Player Floating Reactions */
@keyframes wcFloatReactionUp {
  0% { opacity: 0; transform: translateY(18px) scale(0.6); }
  15% { opacity: 1; transform: translateY(0) scale(1.08); }
  75% { opacity: 0.95; transform: translateY(-95px) scale(1); }
  100% { opacity: 0; transform: translateY(-145px) scale(0.85); }
}
.wc-floating-reaction {
  position: fixed;
  bottom: 92px;
  z-index: 245;
  pointer-events: none;
  animation: wcFloatReactionUp 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Carved Mahogany Ayo Olopon Board & Pits */
.wc-ayo-board {
  background:
    radial-gradient(ellipse at 50% 40%, #6b3410 0%, #431d07 62%, #291002 100%);
  border: 6px solid #7c3f16;
  box-shadow:
    inset 0 4px 18px rgba(255, 210, 150, 0.18),
    inset 0 -8px 24px rgba(0, 0, 0, 0.65),
    0 18px 40px rgba(0, 0, 0, 0.72);
  border-radius: 32px;
}
.wc-ayo-pit {
  background: radial-gradient(circle at 42% 38%, #2a1205 0%, #160801 75%, #0c0400 100%);
  box-shadow:
    inset 0 6px 14px rgba(0, 0, 0, 0.85),
    inset 0 -2px 5px rgba(255, 195, 120, 0.16),
    0 2px 4px rgba(255, 200, 140, 0.12);
  border: 2px solid rgba(180, 105, 45, 0.45);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.wc-ayo-pit.is-legal:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: #fbbf24;
  box-shadow:
    inset 0 6px 14px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(251, 191, 36, 0.55);
}
.wc-ayo-seed {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 30%, #e7e5e4 0%, #a8a29e 48%, #57534e 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75);
}









/* ============================================================================
   BATTERY SAVER / LITE MODE (html.wc-lite — auto-on for phones & low-end devices)
   Live backdrop blur over a moving 360° scene is the #1 cause of phone heat:
   the GPU re-blurs every glass panel every frame. Lite mode swaps blur for
   solid warm-glass backgrounds (same brand look, ~zero GPU) and stops endless
   decorative animations after one cycle.
   ============================================================================ */
html.wc-lite *,
html.wc-lite *::before,
html.wc-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep glass panels readable without blur */
html.wc-lite .glass,
html.wc-lite .glass-pill,
html.wc-lite .map3d-card,
html.wc-lite .wc-transparent-hud-bar,
html.wc-lite .wc-transparent-ada-menu,
html.wc-lite .ada-voice-cmd-bar,
html.wc-lite .wc-liquid-newspaper-shell,
html.wc-lite .wc-liquid-modal-card,
html.wc-lite #buildingModal > div,
html.wc-lite #signupModal > div,
html.wc-lite #walletModal > div,
html.wc-lite #floatingRoomTvDrawer,
html.wc-lite #bldgRoomRosterModal > div,
html.wc-lite #wcWhotArenaModal > div,
html.wc-lite #wcGamesTableHubModal > div,
html.wc-lite #wcSuperPillarModal > div,
html.wc-lite #wcNewspaperArticlePopupModal > div,
html.wc-lite #wcRoomNewspaperOverlay > div {
  background: linear-gradient(165deg, rgba(40, 28, 19, 0.94) 0%, rgba(18, 16, 24, 0.95) 55%, rgba(34, 23, 15, 0.94) 100%) !important;
}
html.wc-lite .wc-transparent-hud-bar {
  background: rgba(24, 19, 16, 0.86) !important;
}
html.wc-lite .wc-liquid-news-card {
  background: rgba(26, 20, 15, 0.92) !important;
}
html.wc-lite .wc-modal-backdrop,
html.wc-lite .blender-phone-os-backdrop,
html.wc-lite #bldgRoomRosterModal,
html.wc-lite #wcWhotArenaModal,
html.wc-lite #wcGamesTableHubModal,
html.wc-lite #wcSuperPillarModal,
html.wc-lite #wcNewspaperArticlePopupModal,
html.wc-lite #wcRoomNewspaperOverlay {
  background: rgba(5, 8, 16, 0.72) !important;
}
html.wc-lite [class*="backdrop-blur"][class*="bg-black"],
html.wc-lite [class*="backdrop-blur"][class*="bg-slate"],
html.wc-lite [class*="backdrop-blur"][class*="bg-[#0"] {
  background-color: rgba(12, 14, 22, 0.9) !important;
}

/* Stop endless decorative animations after one cycle (loading spinners keep spinning) */
html.wc-lite *:not(.animate-spin):not(.wc-keep-anim),
html.wc-lite *:not(.animate-spin):not(.wc-keep-anim)::before,
html.wc-lite *:not(.animate-spin):not(.wc-keep-anim)::after {
  animation-iteration-count: 1 !important;
}
html.wc-lite .animate-ping,
html.wc-lite .animate-pulse,
html.wc-lite .animate-bounce {
  animation: none !important;
}

/* Heavy drop shadows are costly to composite on phones */
html.wc-lite [class*="shadow-["] {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

/* Floating reactions must still float up once even in Battery Saver */
html.wc-lite .wc-floating-reaction {
  animation-iteration-count: 1 !important;
}

/* ============================================================================
   MOBILE VIEWPORT OPTIMIZATION ONLY (360px - 640px PHONES — PC UNTOUCHED)
   Edge-to-edge Phone OS, responsive modals, safe-area insets & touch comfort
   ============================================================================ */
@media (max-width: 640px) {
  #autoHideTopHeader {
    padding-left: 56px !important;
    padding-right: 8px !important;
  }

  .wc-news-card-actions {
    flex-wrap: wrap !important;
  }

  .blender-phone-os-backdrop {
    padding: 8px 10px !important;
  }

  .blender-phone-chassis,
  .blender-phone-chassis.is-mac-pc-mode {
    width: calc(100vw - 20px) !important;
    max-width: 400px !important;
    height: calc(100dvh - 18px) !important;
    max-height: 860px !important;
    border-radius: 42px !important;
    padding: 8px !important;
    margin: 0 auto !important;
  }

  .blender-phone-screen,
  .blender-phone-chassis.is-mac-pc-mode .blender-phone-screen {
    border-radius: 34px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #buildingModal > div,
  #walletModal > div,
  #wcSuperPillarModal > div,
  #wcGamesTableHubModal > div,
  #wcWhotArenaModal > div,
  #wcRoomNewspaperOverlay > div,
  #wcNewspaperArticlePopupModal > div,
  #wcFirstTimeHomeGuideModal > div {
    max-height: 92dvh !important;
    width: 96vw !important;
    max-width: 96vw !important;
  }

  #globeMapCornerBtn {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }

  #roomFloatingHideAvatarBtn {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
  }

  #inRoomRadioMiniBar {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 120px) !important;
  }
}