/**
 * Webarmonium Landing Page Styles
 * Constellation + Void Particles hybrid theme
 */

/* CSS Custom Properties */
:root {
  /* Constellation palette (Mockup 12) */
  --void: #020208;
  --deep: #0a0a14;
  --surface: #14141f;
  --line: #3a3a50;  /* Unified gray - same as button borders */
  --muted: #3a3a50;
  --dim: #5a5a70;
  --light: #9090a8;
  --bright: #e0e0f0;

  /* Node colors for data sources (Electric Triad palette) */
  --node-1: #ff2d92;  /* Wikipedia - magenta */
  --node-2: #00d4ff;  /* HackerNews - cyan */
  --node-3: #a855f7;  /* GitHub - viola */
  --accent: #2dd4bf;  /* Teal - esclusivo UI (non metriche) */
  --accent-hover: #5eead4;

  /* Unified semi-transparent background for all UI elements */
  --ui-bg: rgba(10, 10, 20, 0.55);
  --ui-bg-solid: #0a0a14;

  /* Typography (Mockup 12) */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* Legacy aliases (backward compatibility) */
  --bg-color: var(--void);
  --card-bg: var(--surface);
  --card-bg-hover: var(--line);
  --text-primary: var(--bright);
  --text-secondary: var(--light);
  --text-muted: var(--dim);
  --border-color: var(--line);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

  /* Metric colors (mapped to nodes) */
  --wikipedia-color: var(--node-1);
  --hackernews-color: var(--node-2);
  --github-color: var(--node-3);


  /* Logo alignment (SVG viewBox: 512x512, W starts at y=165) */
  --logo-h: 48px;
}

/* Semantic colors */
:root {
  --success: #22c55e;  /* Green for success states */
}

/* Light Mode Theme (colori originali riassegnati) */
:root[data-theme="light"] {
  --void: #e0e0f0;      /* era --bright */
  --deep: #9090a8;      /* era --light */
  --surface: #5a5a70;   /* era --dim */
  /* --line e --muted invariati */
  --dim: #14141f;       /* era --surface */
  --light: #0a0a14;     /* era --deep */
  --bright: #020208;    /* era --void */
  --ui-bg: rgba(144, 144, 168, 0.85);
  --ui-bg-solid: #9090a8;
  --success: #059669;  /* Darker green for light mode contrast */
  /* accent, node-* ereditano da :root (invariati) */
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Custom Scrollbar (WebKit: Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--deep);
}

::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 4px;
  border: 2px solid var(--deep);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dim);
}

::-webkit-scrollbar-corner {
  background: var(--deep);
}

/* Custom Scrollbar (Firefox) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--deep);
}

/* Global link colors - prevent browser default blue/purple */
a {
  color: var(--accent);
  text-decoration: none;
}

a:visited {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

/* Light mode: use dark teal for links (readable on gray background) */
:root[data-theme="light"] a,
:root[data-theme="light"] a:visited {
  color: var(--success);  /* #059669 - dark teal/green */
}

:root[data-theme="light"] a:hover {
  color: #047857;  /* slightly darker on hover */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-color);
  color: var(--text-primary);
  min-height: 100dvh;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* Text wrapping for better readability */
h1, h2, h3 {
  text-wrap: balance;
}

p, .explainer-intro, .explainer-detail {
  text-wrap: pretty;
}

/* ============================================ */
/* Constellation Background (Mockup 12)        */
/* ============================================ */

.constellation-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.constellation-bg svg {
  width: 100%;
  height: 100%;
}

.constellation-bg .node {
  fill: var(--muted);
}

.constellation-bg .node.highlight {
  fill: var(--accent);
}

.constellation-bg .edge {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.5;
}

/* ============================================ */
/* Floating Particles (Mockup 9)               */
/* ============================================ */

.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float linear infinite;
  opacity: 0;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Particle variations */
.particle:nth-child(1) { left: 5%; width: 3px; height: 3px; background: var(--node-1); animation-duration: 25s; animation-delay: 0s; }
.particle:nth-child(2) { left: 15%; width: 2px; height: 2px; background: var(--light); animation-duration: 20s; animation-delay: 2s; }
.particle:nth-child(3) { left: 25%; width: 4px; height: 4px; background: var(--node-2); animation-duration: 30s; animation-delay: 1s; }
.particle:nth-child(4) { left: 35%; width: 2px; height: 2px; background: var(--node-3); animation-duration: 22s; animation-delay: 3s; }
.particle:nth-child(5) { left: 45%; width: 3px; height: 3px; background: var(--muted); animation-duration: 28s; animation-delay: 0.5s; }
.particle:nth-child(6) { left: 55%; width: 2px; height: 2px; background: var(--node-1); animation-duration: 24s; animation-delay: 4s; }
.particle:nth-child(7) { left: 65%; width: 5px; height: 5px; background: var(--light); animation-duration: 35s; animation-delay: 1.5s; }
.particle:nth-child(8) { left: 75%; width: 2px; height: 2px; background: var(--node-2); animation-duration: 21s; animation-delay: 2.5s; }
.particle:nth-child(9) { left: 85%; width: 3px; height: 3px; background: var(--node-3); animation-duration: 26s; animation-delay: 0.8s; }
.particle:nth-child(10) { left: 95%; width: 2px; height: 2px; background: var(--muted); animation-duration: 23s; animation-delay: 3.5s; }
.particle:nth-child(11) { left: 10%; width: 2px; height: 2px; background: var(--light); animation-duration: 27s; animation-delay: 5s; }
.particle:nth-child(12) { left: 20%; width: 3px; height: 3px; background: var(--node-1); animation-duration: 29s; animation-delay: 6s; }
.particle:nth-child(13) { left: 30%; width: 2px; height: 2px; background: var(--node-3); animation-duration: 31s; animation-delay: 4.5s; }
.particle:nth-child(14) { left: 40%; width: 4px; height: 4px; background: var(--muted); animation-duration: 33s; animation-delay: 7s; }
.particle:nth-child(15) { left: 50%; width: 2px; height: 2px; background: var(--node-2); animation-duration: 19s; animation-delay: 8s; }
.particle:nth-child(16) { left: 60%; width: 3px; height: 3px; background: var(--light); animation-duration: 32s; animation-delay: 9s; }
.particle:nth-child(17) { left: 70%; width: 2px; height: 2px; background: var(--node-1); animation-duration: 24s; animation-delay: 10s; }
.particle:nth-child(18) { left: 80%; width: 2px; height: 2px; background: var(--node-3); animation-duration: 28s; animation-delay: 11s; }
.particle:nth-child(19) { left: 90%; width: 3px; height: 3px; background: var(--node-2); animation-duration: 26s; animation-delay: 12s; }
.particle:nth-child(20) { left: 3%; width: 2px; height: 2px; background: var(--light); animation-duration: 30s; animation-delay: 13s; }

@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
    opacity: 0;
  }
}

/* ============================================ */
/* Landing Page Overlay                        */
/* ============================================ */

.landing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease;
}

.landing-overlay > * {
  pointer-events: auto;
}

/* Mobile: Allow scrolling within the overlay */
@media (max-width: 768px) {
  .landing-overlay {
    overflow-y: auto;
    overflow-x: hidden;
    /* Removed -webkit-overflow-scrolling: touch to avoid iOS compositing issues with fixed canvas */
  }

  /* Add padding at bottom for floating buttons */
  .landing-overlay main {
    padding-bottom: 5rem;
  }
}

/* Hide overlay in immersive mode */
body.immersive-mode .landing-overlay {
  opacity: 0;
  pointer-events: none;
}

/* ============================================ */
/* Header (Landing Overlay)                    */
/* ============================================ */

header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.landing-logo-link {
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
  text-decoration: none;
}

.landing-logo-link:hover {
  transform: scale(1.05);
}

.landing-logo {
  height: var(--logo-h);
  width: auto;
}

.landing-title-group {
  display: flex;
  flex-direction: column;
  /* Align with W in logo: W starts at y=165 in 512px viewBox */
  margin-top: calc(var(--logo-h) * 165 / 512);
}

header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bright);
  margin: 0;
  line-height: 1;
}

header p {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--dim);
  margin: 0.25rem 0 0;
}

/* Corner Logo */
.corner-logo-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.corner-logo-link:hover {
  transform: scale(1.05);
}

.corner-logo {
  height: 40px;
  width: auto;
}

@media (max-width: 480px) {
  .corner-logo-link {
    top: 0.75rem;
    left: 0.75rem;
  }
  .corner-logo {
    height: 32px;
  }
}

/* Messages */
.message {
  display: none;
  max-width: 600px;
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}

.message.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.message.status {
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.3);
  color: #5eead4;
}

/* Light mode: use dark teal for status messages (matches link color) */
:root[data-theme="light"] .message.status {
  background: rgba(5, 150, 105, 0.15);
  border: 1px solid rgba(5, 150, 105, 0.4);
  color: var(--success);
}

/* ============================================ */
/* Controls Bar (Node-Based Design)            */
/* ============================================ */

#controls-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  /* No background - transparent */
  position: relative;
}

/* Extreme line segments - extend beyond first and last elements */
/* Left segment - before toggle button */
.controls-left::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;
  width: 2rem;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

/* Right segment - after join button */
.join-section::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  width: 2rem;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

/* Left group: Start button + Volume slider */
.controls-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

/* ============================================ */
/* Metric Clusters (Mockup 12 Style)           */
/* ============================================ */

#metrics-dashboard {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 1.5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Cluster card styling */
.metric-card {
  background: var(--ui-bg);
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  width: 280px;
  flex-shrink: 0;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden; /* Prevent meters/labels from escaping at high zoom */
}

.metric-card.flash {
  transform: perspective(800px) translateZ(8px) scale(1.01) !important;
}

/* Source-specific cluster colors */
.metric-card[data-source="wikipedia"] {
  --cluster-color: var(--node-1);
}

.metric-card[data-source="hackernews"] {
  --cluster-color: var(--node-2);
}

.metric-card[data-source="github"] {
  --cluster-color: var(--node-3);
}

/* Staggered fade-in animation */
.metric-card {
  opacity: 0;
  transform: translateY(10px);
  animation: metric-fade-in 0.6s ease-out forwards;
}

.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.25s; }
.metric-card:nth-child(3) { animation-delay: 0.4s; }

@keyframes metric-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Cluster header */
.cluster-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.cluster-node {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cluster-color, var(--accent));
}

.cluster-name,
.source-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--cluster-color, var(--accent));
  font-weight: 500;
  margin: 0 0 0.75rem 0;
}

/* Data points grid (orbit-ring meters) */
.data-points,
.meters-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.data-point,
.meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0; /* Allow shrinking in grid at high zoom */
  overflow: hidden; /* Contain overflowing content */
}

/* SVG Meter */
.meter-svg {
  width: 52px;
  height: 52px;
  max-width: 100%; /* Scale down at high zoom levels */
  transform: rotate(90deg); /* Start at 6 o'clock (bottom) */
}

/* Background circle */
.meter-bg {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}

/* Progress arc */
.meter-progress {
  fill: none;
  stroke: var(--cluster-color, var(--accent));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 125.66; /* 2 * PI * 20 (radius) */
  stroke-dashoffset: 125.66; /* Start at 0% */
  transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.15s ease-out;
}

/* Flash effect - 3D parallax pop-out on gesture trigger */
.data-point {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.data-point.flash {
  transform: perspective(500px) translateZ(5px) scale(1.03) !important;
}

/* Value and label */
.point-value,
.meter-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bright);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.point-label,
.meter-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  color: var(--dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Source-specific colors */
#wikipedia-metric {
  --cluster-color: var(--node-1);
}

#hackernews-metric {
  --cluster-color: var(--node-2);
}

#github-metric {
  --cluster-color: var(--node-3);
}

/* Join Section with Room Activity */
.join-section {
  display: flex;
  align-items: center;
  position: relative;
}

/* Normalize join-section wrapper to match controls-left */
.join-section .node-btn-wrapper {
  height: 80px;
  padding-top: 10px; /* Join btn is 60px, center at 40px (10 + 30 = 40) */
  justify-content: flex-start;
}

/* Line segment before join button - in the 2rem gap between sections */
.join-section::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;
  width: 2rem; /* gap size between sections */
  height: 1px;
  background: var(--line);
  z-index: 0;
}

.rooms-activity {
  font-size: 0.65rem;
  color: inherit;
  opacity: 0.7;
  margin-top: 0.15rem;
  white-space: nowrap;
  display: none;
}

.rooms-activity.visible {
  display: block;
}

/* ============================================ */
/* Full-Page Canvas Container                  */
/* ============================================ */

#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* Fallback for browsers without dvh support */
  height: 100dvh;
  z-index: 0;
  background: var(--void);
  overflow: hidden;
  border: none;
  margin: 0;
}

#generative-canvas {
  width: 100%;
  height: 100%;
  display: block;
}


/* Virtual User Cursor Indicators */
.cursor-indicator {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease, top 0.15s ease, opacity 0.2s ease, transform 0.15s ease;
  z-index: 10;
}

/* Controls - Legacy (kept for compatibility) */
#controls {
  display: none;
}

/* ============================================ */
/* Node-Based Buttons (Outline-Only Style)     */
/* ============================================ */

/* All buttons use outline-only style:
   - Background: unified UI bg (semi-transparent)
   - Border: dark gray (--muted) default, light gray (--light) hover
   - No fill colors except unified background
   - Red border for playing/active state
*/

button {
  background: var(--ui-bg);
  color: var(--dim);
  border: 2px solid var(--muted);
  padding: 0.5rem 1rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  font-family: var(--font-display);
  position: relative;
}

button:hover:not(:disabled) {
  border-color: var(--light);
  color: var(--light);
}

/* Light mode: use --surface for border hover effect */
:root[data-theme="light"] button:hover:not(:disabled) {
  border-color: var(--surface);
}

button:active:not(:disabled) {
  border-color: var(--bright);
  color: var(--bright);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Node button wrapper - for proper label positioning */
.node-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* In controls-left: normalize all wrappers for line alignment */
.controls-left .node-btn-wrapper {
  height: 80px;
  padding-top: 14px; /* Position button so its center is at 40px (14 + 26 = 40) */
  justify-content: flex-start;
}

/* Slider positioned BELOW the line level */
.controls-left .slider-node {
  height: 80px;
  padding-top: 52px; /* Push slider below the line (line is at 40px) */
  justify-content: flex-start;
}

/* Line segment after toggle - spans through slider area (gap + slider + gap) */
.controls-left .node-btn-wrapper:first-child::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  width: calc(1.5rem + 90px + 1.5rem); /* gap + slider width + gap */
  height: 1px;
  background: var(--line);
  z-index: 0;
}

/* Node button - circular, transparent bg */
.node-btn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--dim);
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.node-btn:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] .node-btn:hover {
  border-color: var(--surface);
}

/* Primary node button - same outline style, just starts with accent border */
.node-btn.primary {
  border-color: var(--muted);
  color: var(--dim);
}

.node-btn.primary:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] .node-btn.primary:hover {
  border-color: var(--surface);
}

/* Playing state - red border only */
.node-btn.primary.playing {
  background: var(--ui-bg);
  border-color: var(--node-1);
  color: var(--node-1);
}

/* Join button - larger to fit text, unified bg */
.node-btn.join-btn {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--ui-bg);
  border-color: var(--muted);
  color: var(--dim);
}

.node-btn.join-btn:hover {
  background: var(--surface);
  border-color: var(--light);
  color: var(--light);
}

/* Light mode: lighter background on hover */
:root[data-theme="light"] .node-btn.join-btn:hover {
  background: var(--deep);
  border-color: var(--surface);
}

/* Join button tooltip - positioned to the right of button */
.join-tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.75rem);
  transform: translateY(-50%) translateX(-4px);
  width: 220px;
  padding: 0.75rem 1rem;
  background: var(--ui-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--light);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

/* Arrow pointing left toward button */
.join-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--line);
}

.join-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: -1px;
  border: 5px solid transparent;
  border-right-color: var(--ui-bg);
}

.join-section .node-btn-wrapper:hover .join-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* Keep tooltip visible when hovering over it (for clicking "got it") */
.join-tooltip:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* Got it button in tooltip - positioned right */
.join-tooltip-gotit {
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 1em;
  text-decoration: underline;
  float: right;
}

.join-tooltip-gotit:hover {
  color: var(--light);
}

/* Hide tooltip when dismissed */
.join-tooltip.dismissed {
  display: none !important;
}

/* Mobile: tooltip repositioned below cards at bottom of screen */
@media (max-width: 768px) {
  .join-tooltip {
    position: fixed !important;
    top: 80% !important;
    bottom: auto !important;
    left: 1rem !important;
    right: 1rem !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999 !important;
  }

  /* Hide arrow on mobile */
  .join-tooltip::before,
  .join-tooltip::after {
    display: none !important;
  }

  .join-tooltip.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }

  /* Override desktop hover completely on mobile */
  .join-section .node-btn-wrapper:hover .join-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .join-section .node-btn-wrapper:hover .join-tooltip.visible {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Tooltip dismiss button */
.join-tooltip-dismiss {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.join-tooltip-dismiss:hover {
  color: var(--light);
}

@media (max-width: 768px) {
  .join-tooltip-dismiss {
    display: block;
  }

  .join-tooltip {
    padding-right: 1.5rem;
  }
}

.node-label {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

/* Primary and secondary buttons - unified bg */
.primary-btn {
  background: var(--ui-bg);
  border-color: var(--muted);
  color: var(--dim);
}

.primary-btn:hover:not(:disabled) {
  border-color: var(--light);
  color: var(--light);
}

.primary-btn.playing {
  background: var(--ui-bg);
  border-color: var(--node-1);
  color: var(--node-1);
}

.secondary-btn {
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  color: var(--dim);
}

.secondary-btn:hover:not(:disabled) {
  border-color: var(--light);
  color: var(--light);
}

/* Settings button - node style, unified bg */
.settings-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  color: var(--dim);
  padding: 0;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.settings-btn:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] .settings-btn:hover {
  border-color: var(--surface);
}

/* Room link - node style, unified bg */
.room-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--dim);
  text-decoration: none;
  font-weight: 500;
  border: 2px solid var(--muted);
  background: var(--ui-bg);
  transition: border-color 0.2s ease, color 0.2s ease;
  position: relative;
  z-index: 1;
}

.room-link:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] .room-link:hover {
  border-color: var(--surface);
}

.room-link .rooms-activity {
  position: absolute;
  top: calc(100% + 0.4rem);
  font-size: 0.5rem;
  white-space: nowrap;
}

/* Slider styling - minimal line with dot, label below */
.slider-group,
.slider-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Slider does NOT interrupt the line - line passes through */
/* No ::after pseudo-element for slider */

/* Line segment after settings button (third child) */
.controls-left .node-btn-wrapper:nth-child(3)::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  width: 2rem; /* gap to join-section */
  height: 1px;
  background: var(--line);
  z-index: 0;
}

.slider-group label,
.slider-node label {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  color: var(--dim);
  order: 1; /* Label appears after slider */
}

.slider-group input[type="range"],
.slider-node input[type="range"] {
  order: 0; /* Slider appears before label */
}

/* Minimum font-size 16px prevents iOS zoom on focus */
input,
select,
textarea {
  font-size: 16px;
}

/* Range slider - minimal line with dot thumb */
input[type="range"] {
  width: 90px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--accent-hover);
  transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}

.toggle-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-group label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ============================================ */
/* Collapsible Explainer (Bottom Section)      */
/* ============================================ */

/* Desktop: Full-width bottom bar (edge-hover behavior) */
#mapping-explainer,
.landing-explainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Limit top edge to not overlap with metrics cards (approx 60% from top) */
  top: 60%;
  max-height: none;
  overflow-y: auto;
  background: var(--ui-bg);
  border-top: 1px solid var(--line);
  z-index: 100;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

#mapping-explainer.collapsed,
.landing-explainer.collapsed {
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}

/* Mobile: Floating popup style with button */
@media (max-width: 768px) {
  #mapping-explainer,
  .landing-explainer {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 3.5rem;
    top: auto; /* Override desktop top constraint */
    max-width: none;
    max-height: 60vh;
    border: 1px solid var(--line);
    border-radius: 16px;
  }

  #mapping-explainer.collapsed,
  .landing-explainer.collapsed {
    transform: translateY(10px);
  }

}

/* Explainer toggle button - MOBILE ONLY */
.explainer-handle {
  display: none; /* Hidden on desktop */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  border-radius: 25px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 200;
  width: auto;
}

/* Show button only on mobile */
@media (max-width: 768px) {
  .explainer-handle {
    display: flex;
    padding: 0.6rem 1rem;
    bottom: 1rem;
    left: 1rem;
    min-height: 44px; /* iOS minimum touch target */
  }
}

.explainer-handle:hover {
  background: var(--surface);
  border-color: var(--light);
}

:root[data-theme="light"] .explainer-handle:hover {
  background: var(--deep);
  border-color: var(--surface);
}

.explainer-handle:hover .handle-text,
.explainer-handle:hover .handle-icon {
  color: var(--light);
}

/* Active state when explainer is open */
.landing-explainer:not(.collapsed) .explainer-handle,
#mapping-explainer:not(.collapsed) .explainer-handle {
  border-color: var(--accent);
}

.landing-explainer:not(.collapsed) .explainer-handle .handle-text,
.landing-explainer:not(.collapsed) .explainer-handle .handle-icon,
#mapping-explainer:not(.collapsed) .explainer-handle .handle-text,
#mapping-explainer:not(.collapsed) .explainer-handle .handle-icon {
  color: var(--accent);
}

.handle-icon {
  font-size: 0.7rem;
  color: var(--dim);
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Chevron icon */
.handle-icon::before {
  content: '▲';
}

#mapping-explainer.collapsed .handle-icon,
.landing-explainer.collapsed .handle-icon {
  transform: rotate(180deg);
}

.handle-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.2s ease;
}

/* Very small screens: smaller button */
@media (max-width: 360px) {
  .explainer-handle {
    padding: 0.5rem 0.75rem;
  }

  .explainer-handle .handle-text {
    font-size: 0.6rem;
  }
}

/* Explainer content */
.explainer-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem;
}

#mapping-explainer h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-family: var(--font-display);
}

#mapping-explainer h3,
.explainer-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bright);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.explainer-intro {
  color: var(--bright);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.explainer-intro strong {
  font-weight: 600;
}

.explainer-intro em {
  color: var(--accent);
  font-style: normal;
}

.explainer-detail {
  color: var(--light);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.explainer-detail strong {
  color: var(--bright);
  font-weight: 600;
}

.explainer-detail em {
  color: var(--accent);
  font-style: normal;
}

.virtual-users-note strong {
  color: var(--accent);
}

.explainer-link {
  margin-top: 1.5rem;
}

.explainer-link a,
.explainer-link a:visited {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.explainer-link a:hover {
  color: var(--accent-hover);
}

/* Explainer footer (inside collapsible section) */
.explainer-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
}

.explainer-footer p {
  color: var(--dim);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.explainer-footer a,
.explainer-footer a:visited {
  color: var(--light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.explainer-footer a:hover {
  color: var(--accent);
}

.explainer-footer .footer-note {
  font-size: 0.65rem;
  color: var(--muted);
}

.explainer-footer .footer-credits {
  margin-top: 0.75rem;
  font-size: 0.7rem;
  color: var(--dim);
}

.explainer-footer .footer-links {
  margin-top: 0.5rem;
  font-size: 0.65rem;
  color: var(--muted);
}

.explainer-footer .footer-links a {
  color: var(--accent);
  text-decoration: none;
}

.explainer-footer .footer-links a:hover {
  text-decoration: underline;
}

.explainer-footer .version-tag {
  margin-top: 0.5rem;
  font-size: 0.55rem;
  color: var(--dim);
}

.cta-section {
  text-align: center;
  padding: 1rem;
}

.cta-section p {
  color: var(--light);
}

.cta-section a,
.cta-section a:visited {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.cta-section a:hover {
  color: var(--accent-hover);
}

/* Footer - Hidden on landing (inside explainer), shown on other pages */
footer {
  display: none;
}

/* Footer styling when visible (how-it-works, etc) */
.hiw-content footer,
main footer {
  display: block;
  text-align: center;
  padding: 2rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.8rem;
  font-family: var(--font-mono);
}

footer a,
footer a:visited {
  color: var(--light);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--accent);
}

.footer-note {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--dim);
}

.footer-credits {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-style: normal;
  opacity: 0.8;
}

.version-tag {
  margin-top: 1rem;
  font-size: 0.6rem;
  color: var(--dim);
  font-family: var(--font-mono);
}

/* ============================================ */
/* Responsive Design                           */
/* ============================================ */

@media (max-width: 1024px) {
  #metrics-dashboard {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
  }

  .metric-card {
    width: 240px;
  }
}

/* Tablet: When controls wrap to two rows */
@media (max-width: 900px) and (min-width: 769px) {
  /* Hide segments that connect the two rows */
  .controls-left .node-btn-wrapper:nth-child(3)::after,
  .join-section::before {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --logo-h: 36px;
  }

  header {
    padding: 1rem;
    gap: 1rem;
  }

  header h1 {
    font-size: 1.25rem;
  }

  #controls-bar {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
  }

  /* Hide all connection line segments on mobile (stacked layout) */
  .controls-left::before,
  .controls-left .node-btn-wrapper:first-child::after,
  .controls-left .node-btn-wrapper:nth-child(3)::after,
  .join-section::before,
  .join-section::after {
    display: none;
  }

  /* Reset height and padding normalization for stacked layout */
  .controls-left .node-btn-wrapper,
  .controls-left .slider-node,
  .join-section .node-btn-wrapper {
    height: auto;
    padding-top: 0;
  }

  .controls-left {
    justify-content: center;
  }

  /* Tablet: Horizontal compact metric cards */
  #metrics-dashboard {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .metric-card {
    width: auto;
    flex: 1;
    max-width: 160px;
    padding: 0.75rem;
  }

  .data-points,
  .meters-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }

  .meter-svg {
    width: 40px;
    height: 40px;
  }

  .meter-value {
    font-size: 0.7rem;
  }

  .meter-label {
    font-size: 0.45rem;
  }

  .explainer-content {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  :root {
    --logo-h: 32px;
  }

  header {
    gap: 0.75rem;
  }

  /* Keep same calculation as desktop: align with W in logo */
  .landing-title-group {
    margin-top: calc(var(--logo-h) * 165 / 512);
  }

  header h1 {
    font-size: 1.1rem;
  }

  header p {
    font-size: 0.6rem;
  }

  /* Controls: Row layout, horizontally scrollable if needed */
  #controls-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    padding: 0.75rem;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .controls-left {
    gap: 1rem;
    flex-shrink: 0;
  }

  /* Mobile: Compact horizontal metric cards */
  #metrics-dashboard {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .metric-card {
    width: auto;
    min-width: 0;
    flex: 1;
    max-width: 110px;
    padding: 0.5rem;
    border-radius: 12px;
  }

  /* Hide SVG meters on mobile - show only values */
  .meter-svg {
    display: none;
  }

  .data-points,
  .meters-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
  }

  .data-point,
  .meter {
    gap: 0.1rem;
  }

  .meter-value {
    font-size: 0.7rem;
  }

  .meter-label {
    font-size: 0.4rem;
  }

  .source-title {
    font-size: 0.55rem;
    margin-bottom: 0.3rem;
  }

  /* Hide cluster header divider on mobile */
  .cluster-header {
    display: none;
  }

  .node-btn,
  .settings-btn,
  .desktop-settings-btn,
  .room-link {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .node-label {
    display: none;
  }

  .room-link .rooms-activity {
    display: none;
  }
}

/* Entry #73: Audio mode indicator */
.audio-mode-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  margin-left: 10px;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.audio-mode-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}

.audio-mode-indicator.low-power {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.audio-mode-indicator.degraded {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.audio-mode-indicator.minimal {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.audio-mode-indicator.emergency {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  animation: pulse-warning 1.5s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Pause looping animations when off-screen (performance) */
.animation-paused,
[data-animation-paused="true"] {
  animation-play-state: paused !important;
}

/* Selection styling */
::selection {
  background: var(--accent);
  color: var(--bg-color);
}

::-moz-selection {
  background: var(--accent);
  color: var(--bg-color);
}

/* Prevent text selection on interactive elements */
button,
.primary-btn,
.secondary-btn,
.settings-btn,
.room-link,
input[type="range"] {
  user-select: none;
  -webkit-user-select: none;
}

/* Hide hover effects on touch devices */
@media (hover: none) {
  button:hover:not(:disabled),
  .primary-btn:hover,
  .settings-btn:hover,
  .room-link:hover,
  .metric-card:hover,
  .corner-logo-link:hover {
    transform: none;
    opacity: 1;
  }
}

/* Focus rings using box-shadow (respects border-radius) */
button:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.settings-btn:focus-visible,
.room-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px rgba(45, 212, 191, 0.3);
}

/* Ensure focus is visible on dark backgrounds */
input[type="range"]:focus-visible {
  outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px rgba(45, 212, 191, 0.3);
}

/* ============================================ */
/* Mobile Info Button & Popup (rooms page)     */
/* ============================================ */

.mobile-info-btn {
  background: var(--ui-bg);
  border: 2px solid var(--line);
  color: var(--light);
}

.mobile-info-btn:hover {
  border-color: var(--dim);
  color: var(--bright);
}

:root[data-theme="light"] .mobile-info-btn {
  background: var(--ui-bg);
  border-color: var(--surface);
  color: var(--dim);
}

:root[data-theme="light"] .mobile-info-btn:hover {
  border-color: var(--light);
  color: var(--bright);
}

.mobile-info-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.mobile-info-popup {
  background: var(--ui-bg);
  border: 1px solid var(--line);
  color: var(--light);
}

:root[data-theme="light"] .mobile-info-popup {
  background: var(--ui-bg);
  border-color: var(--surface);
  color: var(--dim);
}

/* ============================================ */
/* Entry #93: Full-screen Immersive Mode       */
/* ============================================ */

/* Immersive toggle button - circular, outline-only */
.immersive-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 200; /* Above explainer (z-index: 100) - must be accessible when explainer open */
  width: 44px;
  height: 44px;
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  color: var(--dim);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.immersive-toggle:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] .immersive-toggle:hover {
  border-color: var(--surface);
}

.immersive-icon {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide label in circular button */
.immersive-label {
  display: none;
}

/* Immersive mode active state */
body.immersive-mode {
  overflow: hidden;
}

/* Hide all overlay elements in immersive mode */
body.immersive-mode .landing-overlay,
body.immersive-mode header,
body.immersive-mode #controls-bar,
body.immersive-mode #mapping-explainer,
body.immersive-mode .landing-explainer,
body.immersive-mode .explainer-handle,
body.immersive-mode footer,
body.immersive-mode .corner-logo-link,
body.immersive-mode .constellation-bg,
body.immersive-mode .particles,
body.immersive-mode #error-message,
body.immersive-mode #status-message {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Room elements hidden in immersive mode */
body.immersive-mode .room-interface,
body.immersive-mode .instructions,
body.immersive-mode .mobile-info-btn,
body.immersive-mode .mobile-info-popup,
body.immersive-mode .audio-mode-indicator {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Canvas already full-page, just ensure z-index */
body.immersive-mode #canvas-container {
  z-index: 1000;
}

/* Hide immersive toggle in immersive mode - use mini control bar instead */
body.immersive-mode .immersive-toggle {
  display: none;
}

/* Mobile adjustments for immersive toggle */
@media (max-width: 480px) {
  .immersive-toggle {
    bottom: 1rem;
    right: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .immersive-label {
    display: none;
  }
}

/* Immersive toggle hidden by default, shows on bottom-right corner hover */
body:not(.immersive-mode) .immersive-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Show when mouse in bottom-right corner (via JS) */
body:not(.immersive-mode) .immersive-toggle.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile/Touch: Always visible since hover doesn't work */
@media (hover: none), (max-width: 768px) {
  body:not(.immersive-mode) .immersive-toggle {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Immersive mode mini control bar - line-based layout like other bars */
.immersive-controls {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1002;
  display: none;
  align-items: center;
  gap: 1.5rem;
  /* No background - transparent like other bars */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  height: 70px;
}

/* Show control bar in immersive mode */
body.immersive-mode .immersive-controls {
  display: flex;
}

/* Auto-show when visible (controlled by JS) */
body.immersive-mode .immersive-controls.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Normalize button wrappers for line alignment */
.immersive-controls .node-btn-wrapper {
  height: 70px;
  padding-top: 11px; /* Center 44px button at 33px (11 + 22 = 33) */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Line segments for immersive controls */
.immersive-controls::before {
  content: '';
  position: absolute;
  top: 33px; /* Line at button center height */
  right: 100%;
  width: 2rem;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

.immersive-controls::after {
  content: '';
  position: absolute;
  top: 33px;
  left: 100%;
  width: 2rem;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

/* Line segment between buttons */
.immersive-controls .node-btn-wrapper:first-child::after {
  content: '';
  position: absolute;
  top: 33px;
  left: 100%;
  width: 1.5rem; /* gap size */
  height: 1px;
  background: var(--line);
  z-index: 0;
}

/* Control bar buttons - outline-only style */
.immersive-ctrl-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: var(--ui-bg);
  color: var(--dim);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
  font-family: var(--font-display);
  padding: 0;
}

.immersive-ctrl-btn:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] .immersive-ctrl-btn:hover {
  border-color: var(--surface);
}

/* Play button turns red border when playing */
body.audio-playing #immersive-play-btn {
  background: var(--ui-bg);
  border-color: var(--node-1);
  color: var(--node-1);
}

/* Exit button - same circular style as play button */
#immersive-exit-btn {
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  color: var(--dim);
  font-size: 1.1rem;
}

#immersive-exit-btn:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] #immersive-exit-btn:hover {
  border-color: var(--surface);
}

/* Play/Stop icon toggle */
.immersive-ctrl-btn .ctrl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.immersive-ctrl-btn .stop-icon {
  display: none;
}

body.audio-playing .immersive-ctrl-btn .play-icon {
  display: none;
}

body.audio-playing .immersive-ctrl-btn .stop-icon {
  display: flex;
}

/* Update label text when playing */
body.audio-playing .immersive-controls .node-btn-wrapper:first-child .node-label {
  /* Label updated via JS */
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .immersive-controls {
    bottom: 1rem;
    right: 1rem;
    gap: 1rem;
    height: 60px;
  }

  .immersive-controls .node-btn-wrapper {
    height: 60px;
    padding-top: 8px;
  }

  .immersive-controls::before,
  .immersive-controls::after,
  .immersive-controls .node-btn-wrapper:first-child::after {
    top: 28px;
  }

  .immersive-ctrl-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 0.9rem;
  }
}

/* Fullscreen ESC notice (desktop only) */
.fullscreen-esc-notice {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ui-bg);
  color: var(--light);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  z-index: 1003;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.fullscreen-esc-notice.visible {
  opacity: 1;
}

.fullscreen-esc-notice kbd {
  background: var(--muted);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin: 0 0.25rem;
}


/* ============================================ */
/* Room Page Styles                             */
/* ============================================ */

/* Room interface top bar */
.room-interface {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  padding: 0.75rem 1.5rem;
  border: none;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.room-interface.collapsed {
  transform: translateY(calc(-100% - 30px));
  opacity: 0;
  pointer-events: none;
}

/* Room logo */
.room-logo-link {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 2;
}

.room-logo {
  height: 48px; /* Match index logo size (--logo-h) */
  width: auto;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.room-logo:hover {
  opacity: 1;
}

/* User count badge */
.user-count {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ui-bg);
  color: var(--dim);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--line);
  z-index: 2;
}

/* Room controls bar */
.room-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  position: relative;
  height: 80px;
}

.room-controls .node-btn-wrapper {
  height: 80px;
  padding-top: 14px;
}

.room-controls .slider-node {
  height: 80px;
  padding-top: 52px;
}

/* Connection lines for room controls */
.room-controls::before,
.room-controls::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

.room-controls::before {
  right: 100%;
}

.room-controls::after {
  left: 100%;
}

.room-controls .node-btn-wrapper:first-child::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  width: calc(1.5rem + 90px + 1.5rem);
  height: 1px;
  background: var(--line);
  z-index: 0;
}

/* Audio toggle button (matches .node-btn.primary style) */
.audio-toggle {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  color: var(--dim);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  transition: border-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.audio-toggle:hover {
  border-color: var(--light);
  color: var(--light);
}

:root[data-theme="light"] .audio-toggle:hover {
  border-color: var(--surface);
}

.audio-toggle.disabled {
  border-color: var(--muted);
  color: var(--dim);
  opacity: 0.5;
}

.audio-toggle.playing {
  border-color: var(--node-1);
  color: var(--node-1);
}

/* Back link button */
.back-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-bg);
  border: 2px solid var(--line);
  color: var(--light);
  cursor: pointer;
  font-size: 1.1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.back-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Desktop settings button */
.desktop-settings-btn {
  background: var(--ui-bg);
  color: var(--dim);
  border: 2px solid var(--line);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.desktop-settings-btn:hover {
  border-color: var(--light);
  color: var(--light);
}

/* Room instructions */
.room-interface ~ .instructions,
.instructions {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ui-bg);
  padding: 15px 25px;
  border-radius: 25px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--light);
  border: 1px solid var(--line);
  max-width: 90%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.instructions.collapsed {
  transform: translateX(-50%) translateY(calc(100% + 30px));
  opacity: 0;
  pointer-events: none;
}

/* Controls row: play, volume, settings in a horizontal row */
.mobile-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Round button matching index mobile UI bar style */
.mobile-node-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ui-bg);
  border: 2px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--dim);
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0;
}

.mobile-node-btn:hover,
.mobile-node-btn:active {
  border-color: var(--light);
  color: var(--light);
}

/* Playing state - red border */
.mobile-node-btn.playing {
  border-color: var(--node-1);
  color: var(--node-1);
}

/* Volume slider in mobile controls row */
.mobile-controls-row .mobile-volume-slider {
  width: 100px;
  flex-shrink: 1;
}

/* Audio mode indicator */
.audio-mode-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-bg);
  color: var(--dim);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 1000;
  border: 1px solid var(--line);
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.audio-mode-indicator.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.audio-mode-indicator.low-power {
  border-color: var(--success);
  color: var(--success);
}

.audio-mode-indicator.degraded {
  border-color: #ffc107;
  color: #ffc107;
}

.audio-mode-indicator.minimal {
  border-color: #f97316;
  color: #f97316;
}

.audio-mode-indicator.emergency {
  border-color: #ef4444;
  color: #ef4444;
  animation: pulse-warning 1.5s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Accelerometer calibration button */
.accelerometer-calibrate {
  display: none;
  background: var(--ui-bg);
  border: 2px solid var(--line);
  color: var(--light);
  padding: 8px 12px;
  border-radius: 25px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.accelerometer-calibrate.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* Error display */
.error-display {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ui-bg);
  border: 2px solid #ff4444;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  text-align: center;
  z-index: 2000;
}

.error-title {
  color: #ff4444;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.error-message {
  color: #ccc;
  font-size: 14px;
  line-height: 1.4;
}

/* Room page mobile styles */
@media (max-width: 768px) {
  .room-logo {
    height: 36px; /* Match index mobile logo size (--logo-h at 768px) */
  }

  .room-interface {
    top: max(10px, env(safe-area-inset-top, 10px));
    left: max(10px, env(safe-area-inset-left, 10px));
    right: max(10px, env(safe-area-inset-right, 10px));
    padding: 0.5rem 1rem;
    padding-top: 3rem; /* Space for logo row */
  }

  /* Logo stays absolute top-left */
  .room-logo-link {
    top: 0.5rem;
    left: 1rem;
  }

  /* User count stays absolute top-right */
  .user-count {
    top: 0.5rem;
    right: 1rem;
  }

  /* Room controls - centered below logo row */
  .room-controls {
    display: flex;
    gap: 1rem;
    height: auto;
    justify-content: center;
  }

  /* Hide connection lines on mobile */
  .room-controls::before,
  .room-controls::after,
  .room-controls .node-btn-wrapper:first-child::after {
    display: none;
  }

  /* Reset wrapper padding for mobile */
  .room-controls .node-btn-wrapper,
  .room-controls .slider-node {
    height: auto;
    padding-top: 0;
  }

  /* Hide labels on mobile */
  .room-controls .node-label {
    display: none;
  }

  /* 44px buttons on mobile */
  .room-controls .audio-toggle,
  .room-controls .desktop-settings-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem;
  }

  .instructions {
    bottom: max(10px, calc(env(safe-area-inset-bottom, 10px) + 10px));
    font-size: 11px;
    padding: 10px 15px;
  }

  .accelerometer-calibrate {
    display: inline-block;
  }

  /* Hide elements marked for mobile-hidden */
  .mobile-hidden {
    display: none !important;
  }
}