/* ============================================
       CSS VARIABLES - Design System
       ============================================ */
    :root {
      /* Background Colors */
      --bg-deep: #0a0f14;
      --bg-dark: #121a22;
      --bg-card: rgba(18, 26, 34, 0.85);

      /* Primary Colors */
      --primary: #00B4D8;
      --primary-soft: #5BA4A4;
      --primary-glow: rgba(0, 180, 216, 0.5);

      /* Accent Colors */
      --accent-rose: #D4899A;
      --accent-coral: #E8A090;
      --accent-pink: #E07B9E;

      /* Neutral */
      --accent-gray: #5D6570;
      --accent-teal: #6BB8B8;

      /* Gradients */
      --gradient-main: linear-gradient(135deg, var(--primary) 0%, var(--accent-rose) 50%, var(--accent-coral) 100%);
      --gradient-warm: linear-gradient(135deg, var(--accent-rose) 0%, var(--accent-coral) 100%);
      --gradient-cool: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary) 100%);

      /* Text */
      --text-primary: #E8EAED;
      --text-muted: #9AA0A6;
      --text-dim: #6B7280;

      /* Borders & Glows */
      --border: rgba(91, 164, 164, 0.3);
      --border-glow: rgba(0, 180, 216, 0.4);

      /* Typography */
      --font-display: 'Space Grotesk', sans-serif;
      --font-body: 'DM Sans', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;

      /* Effects */
      --glow-primary: 0 0 20px var(--primary-glow), 0 0 40px rgba(212, 137, 154, 0.2);
      --glow-cyan: 0 0 20px rgba(91, 164, 164, 0.4), 0 0 40px rgba(0, 180, 216, 0.2);
      --glow-rose: 0 0 20px rgba(212, 137, 154, 0.4), 0 0 40px rgba(232, 160, 144, 0.2);
      --glass-bg: rgba(15, 15, 35, 0.7);
      --glass-border: rgba(255, 255, 255, 0.1);
    }

    /* ============================================
       BASE STYLES
       ============================================ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-body);
      overflow: hidden;
      background: var(--bg-deep);
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
    }

    /* ============================================
       INTRO / SPLASH SCREEN
       ============================================ */
    #intro {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: var(--bg-deep);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.8s ease-out, visibility 0.8s;
    }

    #intro.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .intro-content {
      text-align: center;
      animation: fadeInUp 1s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .logo-container {
      position: relative;
      margin-bottom: 40px;
    }

    .logo-glow {
      position: absolute;
      inset: -40px;
      background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
      filter: blur(30px);
      animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.1); }
    }

    .logo-text {
      font-family: var(--font-display);
      font-size: clamp(48px, 10vw, 80px);
      font-weight: 700;
      letter-spacing: 0.15em;
      background: var(--gradient-main);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
    }

    .logo-subtitle {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--text-muted);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      margin-top: 16px;
    }

    .intro-tagline {
      font-size: 18px;
      color: var(--text-muted);
      margin-bottom: 48px;
      max-width: 400px;
    }

    /* Foundation Artanim attribution — pinned to the bottom of the intro
       overlay only. Lives INSIDE #intro so it disappears the moment the
       intro is dismissed (no extra body-class plumbing required). */
    .intro-footer {
      position: absolute;
      bottom: 14px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      opacity: 0.55;
      z-index: 1;
    }
    .intro-footer a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease, opacity 0.2s ease;
    }
    .intro-footer a:hover { color: var(--accent-rose); opacity: 1; }

    .enter-button {
      position: relative;
      padding: 16px 48px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-primary);
      background: transparent;
      border: 2px solid var(--primary);
      border-radius: 4px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .enter-button::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--gradient-main);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .enter-button:hover {
      border-color: var(--accent-rose);
      box-shadow: var(--glow-rose);
      transform: translateY(-2px);
    }

    .enter-button:hover::before {
      opacity: 0.2;
    }

    .enter-button span {
      position: relative;
      z-index: 1;
    }

    /* Particle canvas behind intro */
    #intro-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* ============================================
       LOADING SCREEN
       ============================================ */
    #loading {
      position: fixed;
      inset: 0;
      z-index: 1500;
      background: var(--bg-deep);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s ease-out;
    }

    #loading.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .loader-ring {
      width: 80px;
      height: 80px;
      position: relative;
    }

    .loader-ring::before,
    .loader-ring::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid transparent;
    }

    .loader-ring::before {
      border-top-color: var(--accent-cyan);
      border-right-color: var(--accent-cyan);
      animation: spin 1.2s linear infinite;
    }

    .loader-ring::after {
      border-bottom-color: var(--primary);
      border-left-color: var(--primary);
      animation: spin 1.2s linear infinite reverse;
      inset: 8px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .loading-status {
      margin-top: 32px;
      text-align: center;
    }

    #loading-text {
      font-family: var(--font-display);
      font-size: 14px;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .loading-bar-container {
      width: 200px;
      height: 4px;
      background: var(--bg-card);
      border-radius: 2px;
      overflow: hidden;
    }

    .loading-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--primary-soft), var(--primary), var(--accent-rose), var(--accent-coral));
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* ============================================
       MAIN CANVAS
       ============================================ */
    #canvas-container {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    /* Vignette overlay */
    #canvas-container::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(5, 5, 16, 0.4) 100%);
    }

    /* ============================================
       FLOATING UI PANELS
       ============================================ */
    .glass-panel {
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
    }

    /* Top Bar - Brand + Stats */
    #top-bar {
      position: fixed;
      top: 24px;
      left: 24px;
      right: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
      pointer-events: none;
    }

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

    /* Brand panel is now the info-modal trigger (Round 15 — the standalone
       "i" button was removed). Cursor + focus ring make it discoverable as
       a clickable button. The whole panel keeps its glass styling. */
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      cursor: pointer;
    }
    .brand:focus-visible {
      outline: 2px solid var(--accent-teal);
      outline-offset: 2px;
    }
    .brand:hover {
      border-color: var(--accent-teal);
    }

    .brand-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-icon {
      width: 32px;
      height: 32px;
      background: var(--gradient-main);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .brand-icon svg {
      width: 20px;
      height: 20px;
      fill: var(--text-primary);
    }

    .brand-name {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.1em;
      background: linear-gradient(90deg, var(--text-primary), var(--accent-teal));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Stats Panel */
    #stats-container {
      display: flex;
      flex-direction: column;
      padding: 0;
      font-family: var(--font-mono);
      font-size: 12px;
      width: 260px; /* Fixed width to prevent flickering */
      min-width: 260px;
      max-width: 260px;
    }

    #stats {
      display: flex;
      gap: 20px;
      padding: 10px 16px 8px;
      width: 100%; /* Full width of container */
      box-sizing: border-box;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      flex: 1; /* Equal width distribution */
      min-width: 0; /* Allow flex shrinking */
    }

    .stat-label {
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 9px;
    }

    .stat-value {
      color: var(--accent-teal);
      font-weight: 500;
      text-shadow: 0 0 10px rgba(91, 164, 164, 0.5);
      font-family: 'JetBrains Mono', monospace;
      min-width: 5ch; /* Increased to prevent flickering */
      width: 5ch; /* Fixed width */
      text-align: center; /* Center align for consistent appearance */
      font-variant-numeric: tabular-nums;
    }

    /* Speed row click affordance — the whole stat-item is clickable to
       toggle 1.0× ↔ 0.5×. Hover lifts the row (cursor + brighter bg) so
       users discover the affordance without a visible widget chrome.
       When 0.5× is active, .speed-slow paints the value in the warm
       accent yellow so the slow-mo state reads at a glance. */
    #speed-row {
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.15s ease;
    }
    #speed-row:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    #speed-row.speed-slow #speed-value {
      color: var(--accent-yellow, #ffd84a);
      text-shadow: 0 0 6px rgba(255, 216, 74, 0.5);
      font-weight: 600;
    }

    /* ============================================
       SIDE CONTROLS
       ============================================ */
    #side-controls {
      position: fixed;
      top: 50%;
      left: 24px;
      transform: translateY(-50%);
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Each row pairs a control button with a tiny caption legend underneath.
       The caption tells the user at a glance what the button does — title
       attributes aren't visible on touch devices. Captions are hidden on
       mobile via @media query to keep the side bar compact. */
    .control-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .control-legend {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
      pointer-events: none;
      user-select: none;
    }
    /* Section header above a group of buttons in the right `#character-panel`
       (METHOD over DM/ADD, CHAR over A/B). Same visual language as the per-
       button `.control-legend` but with extra top margin so it sits as a
       caption above the group. */
    .group-legend {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.65);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
      pointer-events: none;
      user-select: none;
      text-align: center;
      margin: 2px 0 4px;
    }

    .control-btn {
      width: 48px;
      height: 48px;
      min-width: 48px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: var(--text-muted);
      -webkit-tap-highlight-color: transparent;
    }

    .control-btn:hover, .control-btn:active {
      border-color: var(--accent-rose);
      color: var(--accent-rose);
      box-shadow: var(--glow-rose);
    }

    .control-btn.active {
      border-color: var(--accent-teal);
      color: var(--accent-teal);
      background: rgba(91, 164, 164, 0.2);
    }

    /* Greyed-out / non-interactive (e.g. lookat gated by ghost toggle). */
    .control-btn.disabled,
    .control-btn[disabled] {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
      filter: grayscale(1);
    }

    .control-btn.reset-physics {
      background: rgba(232, 90, 113, 0.32);
      border-color: rgba(232, 90, 113, 0.75);
      color: rgba(255, 200, 210, 0.95);
    }

    .control-btn.reset-physics:hover, .control-btn.reset-physics:active {
      background: rgba(232, 90, 113, 0.5);
      border-color: rgba(255, 130, 150, 1);
      color: #ffffff;
    }

    .control-btn.perturbation-btn {
      background: rgba(255, 170, 50, 0.28);
      border-color: rgba(255, 170, 50, 0.7);
      color: rgba(255, 210, 140, 0.95);
    }

    .control-btn.perturbation-btn:hover, .control-btn.perturbation-btn:active {
      background: rgba(255, 170, 50, 0.45);
      border-color: rgba(255, 190, 80, 1);
      color: rgba(255, 220, 130, 1);
    }

    .control-btn.perturbation-btn.active {
      background: rgba(255, 170, 50, 0.3);
      border-color: rgba(255, 190, 80, 0.8);
      color: rgba(255, 200, 100, 1);
      box-shadow: 0 0 15px rgba(255, 170, 50, 0.4);
    }

    .control-btn.debug-btn {
      background: rgba(0, 180, 216, 0.15);
      border-color: rgba(0, 180, 216, 0.4);
    }

    .control-btn.debug-btn:hover, .control-btn.debug-btn:active {
      background: rgba(0, 180, 216, 0.3);
      border-color: rgba(0, 180, 216, 0.8);
      color: #00B4D8;
    }

    .control-btn.debug-btn.active {
      background: rgba(0, 180, 216, 0.3);
      border-color: rgba(0, 180, 216, 0.8);
      color: #00B4D8;
      box-shadow: 0 0 15px rgba(0, 180, 216, 0.4);
    }

    .control-btn svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }

    .control-btn .stroke-icon {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ============================================
       CHARACTER SELECTOR (Right Side)
       ============================================ */
    #character-panel {
      position: fixed;
      top: 50%;
      right: 24px;
      transform: translateY(-50%);
      z-index: 100;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Right-bar row wrapper — mirrors `.control-row` on the left side bar.
       Now wraps just the button (per-button legends were dropped in Round 15
       in favour of group `.group-legend` headers). */
    .character-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    /* Mobile-only A/B character switcher placed at the bottom of the left
       side bar (#side-controls). The whole #character-panel is hidden on
       mobile so we re-house A/B + multi-toggle here. Hidden on desktop. */
    .side-character-mobile {
      display: none;
    }
    .side-character-mobile .char-btn-pair {
      display: flex;
      gap: 4px;
    }
    /* Mobile-only thin separator between perturbation buttons and the
       character section. Hidden on desktop. */
    .mobile-only-separator {
      display: none;
    }
    /* Mobile-only "MULTI" toggle button. Square 44×44 like all other toolbar
       buttons; the 5-letter label is shrunk via font-size so it fits inside
       the square. No own active variant — the unified .char-btn.active /
       .char-btn.multi-selected rule below (teal, matching .control-btn.active)
       is used for MULTI, A, and B in both single and multi modes. */
    .char-btn.multi-btn {
      font-size: 10px;
      letter-spacing: 0.04em;
      padding: 0;
    }

    /* Lookat toggle in character panel — matches control-btn style */
    .lookat-btn {
      width: 40px;
      height: 40px;
      align-self: center;
    }

    .lookat-btn.active {
      color: var(--accent-teal);
      border-color: var(--accent-teal);
      background: rgba(91, 164, 164, 0.15);
    }

    .character-option {
      padding: 0;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid transparent;
    }

    .character-option:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .character-option.active {
      background: rgba(212, 137, 154, 0.15);
      border-color: var(--accent-rose);
    }

    .character-avatar {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--bg-dark), var(--bg-card));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    /* Training-method selector (DM / AMP / ADD) — shares character-option look,
       but the label is text not a single letter, so it gets a narrower font and
       a teal accent to distinguish it from the rose-accented humanoid picker. */
    .method-option {
      padding: 0;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid transparent;
    }

    .method-option:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .method-option.active {
      background: rgba(91, 164, 164, 0.15);
      border-color: var(--accent-teal);
    }

    .method-label {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--bg-dark), var(--bg-card));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--text-primary);
    }

    /* ============================================
       MULTI-SELECT badges (Phase 2 — compare up to 4 humanoids)
       ============================================ */
    /* In multi mode (body.multi-select) the character panel + animation dock
       switch from quick-switch to add/remove. Items in a selection Set get the
       `multi-selected` class (set by refreshSelectionBadges() in app.js) and
       show a cyan checkmark badge. Badges never appear in single mode. */
    .animation-card,
    .method-option[data-method],
    .character-option[data-humanoid] {
      position: relative;
    }

    body.multi-select .animation-card.multi-selected::after,
    body.multi-select .method-option.multi-selected::after,
    body.multi-select .character-option.multi-selected::after {
      content: '✓';
      position: absolute;
      top: -4px;
      right: -4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--primary);
      color: var(--bg-deep);
      font-size: 11px;
      font-weight: 700;
      line-height: 16px;
      text-align: center;
      box-shadow: 0 0 6px var(--primary-glow);
      z-index: 3;
      pointer-events: none;
    }

    /* Cyan highlight on selected items in multi mode, distinct from the
       rose/teal single-select `.active` accents. */
    body.multi-select .animation-card.multi-selected,
    body.multi-select .method-option.multi-selected,
    body.multi-select .character-option.multi-selected {
      border-color: var(--primary);
      background: rgba(0, 180, 216, 0.12);
    }

    /* The MULTI toggle itself, when ON. */
    #btn-multi.active {
      background: rgba(0, 180, 216, 0.15);
      border-color: var(--primary);
    }

    /* ============================================
       ANIMATION DOCK (Bottom)
       ============================================ */
    #bottom-ui {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: env(safe-area-inset-bottom, 16px);
    }

    #instructions {
      padding: 8px 16px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
      opacity: 0.8;
      text-align: center;
      margin-bottom: 8px;
    }

    #instructions .key {
      color: var(--accent-teal);
    }

    #animation-dock-wrapper {
      position: relative;
      width: fit-content;
      max-width: calc(100% - 32px);
    }

    /* Scroll fade indicators */
    #animation-dock-wrapper::before,
    #animation-dock-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 40px;
      pointer-events: none;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.3s;
    }

    #animation-dock-wrapper::before {
      left: 0;
      background: linear-gradient(to right, var(--glass-bg) 0%, transparent 100%);
    }

    #animation-dock-wrapper::after {
      right: 0;
      background: linear-gradient(to left, var(--glass-bg) 0%, transparent 100%);
    }

    #animation-dock-wrapper.can-scroll-left::before,
    #animation-dock-wrapper.can-scroll-right::after {
      opacity: 1;
    }

    #animation-dock {
      padding: 12px 16px;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    #animation-dock::-webkit-scrollbar {
      display: none;
    }

    .animation-card {
      flex-shrink: 0;
      width: 72px;
      padding: 10px 6px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid transparent;
      text-align: center;
      background: transparent;
      -webkit-tap-highlight-color: transparent;
    }

    .animation-card:hover, .animation-card:active {
      background: rgba(255, 255, 255, 0.08);
    }

    .animation-card.active {
      background: rgba(212, 137, 154, 0.15);
      border-color: var(--accent-rose);
    }

    .animation-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto 6px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--bg-dark), rgba(91, 164, 164, 0.2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-family: var(--font-mono);
      color: var(--text-muted);
    }

    .animation-card.active .animation-icon {
      background: var(--gradient-main);
      color: var(--text-primary);
    }

    .animation-name {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .animation-card.active .animation-name {
      color: var(--accent-rose);
    }

    /* ============================================
       VR BUTTON AREA
       ============================================ */
    #vr-area {
      position: fixed;
      bottom: 140px;
      right: 24px;
      z-index: 100;
      transition: all 0.3s ease;
    }

    /* When WebXR is available, center above animation dock.
       Flex-row + gap so "Enter VR" + "Enter XR" sit side-by-side on the
       same line with proper breathing room (instead of touching/stacking).
       align-items: stretch keeps both buttons the same height even if one
       wraps to two lines on narrow viewports. */
    #vr-area.vr-available {
      right: 50%;
      transform: translateX(50%);
      bottom: 160px;
      display: flex;
      gap: 16px;
      align-items: stretch;
    }

    /* VR hint - shown when VR not available */
    .vr-hint {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 10px;
      color: var(--text-muted);
      font-family: var(--font-display);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .vr-hint:hover {
      border-color: var(--accent-teal);
      color: var(--accent-teal);
    }

    .vr-hint:hover .vr-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .vr-hint-text {
      font-weight: 500;
    }

    .vr-tooltip {
      position: absolute;
      bottom: calc(100% + 12px);
      right: 0;
      width: 220px;
      padding: 12px 14px;
      background: var(--bg-dark);
      border: 1px solid var(--glass-border);
      border-radius: 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--text-muted);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.2s ease;
      pointer-events: none;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .vr-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      right: 20px;
      border: 8px solid transparent;
      border-top-color: var(--bg-dark);
    }

    .vr-hint.hidden {
      display: none;
    }

    /* VR button - shown when VR available */
    .vr-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 18px 36px;
      background: var(--gradient-main);
      border: none;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: var(--text-primary);
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 20px rgba(212, 137, 154, 0.3);
    }

    .vr-button:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 12px 40px rgba(212, 137, 154, 0.5);
    }

    .vr-button:active {
      transform: translateY(-1px) scale(0.98);
    }

    .vr-button svg {
      width: 28px;
      height: 28px;
      fill: currentColor;
    }

    .vr-button.hidden {
      display: none;
    }

    /* ============================================
       CORNER DECORATIONS (HUD Style)
       ============================================ */
    .corner-decor {
      position: fixed;
      width: 60px;
      height: 60px;
      pointer-events: none;
      z-index: 50;
    }

    .corner-decor::before,
    .corner-decor::after {
      content: '';
      position: absolute;
      background: var(--border);
    }

    .corner-decor.top-left {
      top: 0;
      left: 0;
    }
    .corner-decor.top-left::before {
      top: 16px;
      left: 0;
      width: 40px;
      height: 1px;
    }
    .corner-decor.top-left::after {
      top: 16px;
      left: 0;
      width: 1px;
      height: 40px;
    }

    .corner-decor.top-right {
      top: 0;
      right: 0;
    }
    .corner-decor.top-right::before {
      top: 16px;
      right: 0;
      width: 40px;
      height: 1px;
    }
    .corner-decor.top-right::after {
      top: 16px;
      right: 0;
      width: 1px;
      height: 40px;
    }

    .corner-decor.bottom-left {
      bottom: 0;
      left: 0;
    }
    .corner-decor.bottom-left::before {
      bottom: 16px;
      left: 0;
      width: 40px;
      height: 1px;
    }
    .corner-decor.bottom-left::after {
      bottom: 16px;
      left: 0;
      width: 1px;
      height: 40px;
    }

    .corner-decor.bottom-right {
      bottom: 0;
      right: 0;
    }
    .corner-decor.bottom-right::before {
      bottom: 16px;
      right: 0;
      width: 40px;
      height: 1px;
    }
    .corner-decor.bottom-right::after {
      bottom: 16px;
      right: 0;
      width: 1px;
      height: 40px;
    }

    /* ============================================
       SCANLINES OVERLAY (Optional CRT effect)
       ============================================ */
    .scanlines {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1000;
      opacity: 0.03;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.3) 2px,
        rgba(0, 0, 0, 0.3) 4px
      );
    }

    /* Fade overlay for auto-reset transition.
       Asymmetric timing: snap-fast fade-IN (60ms) hides the multi-char
       setup phase before the new chars finish spawning/T-posing; the
       slow fade-OUT (0.8s) keeps the smooth reveal once everything is
       in place. The transition lives on the base rule (governs leaving
       .visible) and is overridden inside .visible to the fast curve so
       entering the class is near-instant.

       z-index 90 — BELOW the UI panels (top-bar, side-controls,
       character-panel, bottom-ui at z=100) so the user can keep clicking
       selection buttons while the scene rebuilds behind the black
       curtain. Still covers the canvas (z=1) and corner-decor (z=50). */
    #fade-overlay {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: var(--bg-deep);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.8s ease-in-out;
    }

    #fade-overlay.visible {
      opacity: 1;
      transition: opacity 0.06s linear;
    }

    /* Loading spinner shown above the fade overlay during multi-char
       rebuilds (z=95, between fade and UI panels). Hidden by default. */
    #scene-loader {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 95;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease-out;
      color: var(--text-primary, #e8f0ff);
      font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    #scene-loader.visible {
      opacity: 1;
    }
    .scene-loader-spinner {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.12);
      border-top-color: rgba(110, 220, 255, 0.95);
      border-right-color: rgba(255, 80, 160, 0.7);
      animation: scene-loader-spin 1s linear infinite;
      box-shadow: 0 0 24px rgba(110, 220, 255, 0.25);
    }
    .scene-loader-text {
      opacity: 0.85;
      text-shadow: 0 0 12px rgba(110, 220, 255, 0.6);
    }
    @keyframes scene-loader-spin {
      to { transform: rotate(360deg); }
    }

    /* ============================================
       INFO MODAL
       ============================================ */
    /* The standalone "i" button + .menu-btn styles were removed in Round 15
       — the info modal is opened by clicking the .brand panel now. */

    /* `.character-toggle` (the old top-right A/B host) was removed in Round
       15. `.char-btn` styles below drive the mobile-only
       `.side-character-mobile` row (MULTI + A + B) at the bottom of the left
       side bar. Visual treatment is intentionally identical to `.control-btn`
       (layer/ghost/orbit buttons) so the whole mobile left toolbar reads as
       one consistent control surface. */
    .char-btn {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      color: var(--text-muted);
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .char-btn:hover, .char-btn:active {
      border-color: var(--accent-rose);
      color: var(--accent-rose);
      box-shadow: var(--glow-rose);
    }

    /* Unified "selected" state for MULTI (mode-on), A (main char), and B
       (multi-selected secondary). Teal — same as `.control-btn.active` (orbit,
       layers, ghost). One look for every kind of selection in this toolbar.
       .multi-selected is gated by body.multi-select so any leftover class
       after exiting multi mode is invisible — only .active wins in single
       mode (otherwise both A and B can read as "selected" after exit). */
    .char-btn.active,
    body.multi-select .char-btn.multi-selected {
      border-color: var(--accent-teal);
      color: var(--accent-teal);
      background: rgba(91, 164, 164, 0.2);
    }



    /* Desktop: top-right-controls layout */
    .top-right-controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Info Modal */
    #info-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 15, 20, 0.9);
      backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    #info-modal.visible {
      opacity: 1;
      visibility: visible;
    }

    .modal-content {
      width: 90%;
      max-width: 500px;
      max-height: 80vh;
      overflow-y: auto;
      background: var(--bg-dark);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      padding: 32px;
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }

    #info-modal.visible .modal-content {
      transform: scale(1);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .modal-title {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 600;
      background: var(--gradient-main);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .modal-close {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--glass-border);
      border-radius: 8px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      border-color: var(--accent-rose);
      color: var(--accent-rose);
    }

    .modal-body p {
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .modal-body h3 {
      font-family: var(--font-display);
      font-size: 14px;
      color: var(--accent-teal);
      margin: 20px 0 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .modal-body ul {
      list-style: none;
      padding: 0;
    }

    .modal-body li {
      color: var(--text-muted);
      padding: 8px 0;
      padding-left: 20px;
      position: relative;
    }

    .modal-body li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: var(--accent-rose);
    }

    .modal-body a {
      color: var(--accent-teal);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .modal-body a:hover {
      color: var(--primary);
      text-decoration: underline;
    }

    .modal-body strong {
      color: var(--text-primary);
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 768px) {
      #top-bar {
        top: 12px;
        left: 12px;
        right: 12px;
        flex-direction: row;
        justify-content: space-between;
      }

      .brand {
        padding: 8px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .brand-name {
        font-size: 14px;
      }

      .brand-icon {
        width: 28px;
        height: 28px;
      }

      #stats-container {
        padding: 0;
        width: 220px; /* Fixed width for mobile */
        min-width: 220px;
        max-width: 220px;
      }

      #stats {
        padding: 6px 10px 4px;
        gap: 12px;
        font-size: 9px;
        width: 100%;
        box-sizing: border-box;
      }

      #stats .stat-item {
        gap: 1px;
        flex: 1;
        min-width: 0;
      }

      #stats .stat-label {
        font-size: 7px;
      }

      #stats .stat-value {
        font-size: 9px;
        min-width: 4ch; /* Adjusted for mobile */
        width: 5ch;
        height: 24px;
      }

      #character-panel {
        display: none;
      }

      /* Show the relocated multi + A/B switcher at the bottom of the left
         side bar (the whole right #character-panel is hidden on small
         screens). */
      .side-character-mobile {
        display: flex;
        /* Left-align MULTI in the toolbar column with the other 44×44 buttons.
           A + B then extend rightward from MULTI (not centered → no leftward
           overhang). Net effect: the whole left toolbar reads as sitting
           further from the left edge than the centered row did. */
        justify-content: flex-start;
      }
      /* Reveal the separator between yellow perturbation buttons and the
         character section on mobile. */
      .mobile-only-separator {
        display: block;
      }
      /* .char-btn already 44×44 + 12px radius + glass styling in the base
         rule (matched to .control-btn). No mobile-specific overrides needed. */

      /* Side controls on mobile.
         align-items: flex-start so column children all sit at the LEFT edge
         (instead of stretching to the row's 140px width and centering the
         44×44 buttons inside that). This keeps MULTI aligned with the other
         toolbar buttons and lets A + B simply extend to the right of MULTI
         (not aligned with the column — the requested layout).
         left: 12px matches the top-bar (#top-bar { left: 12px }) so the side
         toolbar's left edge lines up with the "artichar" brand pill above. */
      #side-controls {
        left: 12px;
        top: auto;
        bottom: 140px;
        transform: none;
        align-items: flex-start;
      }

      .control-btn {
        width: 44px;
        height: 44px;
      }

      /* Drop the small caption legends on mobile — the side bar must stay
         compact and touch users get the title attribute on long-press. */
      .control-legend {
        display: none;
      }

      /* Bottom UI on mobile */
      #bottom-ui {
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }

      #instructions {
        font-size: 10px;
        padding: 6px 12px;
        margin-bottom: 4px;
      }

      #animation-dock-wrapper {
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
      }

      #animation-dock {
        padding: 10px 16px;
        gap: 8px;
      }

      .animation-card {
        width: 60px;
        padding: 8px 4px;
      }

      .animation-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        margin-bottom: 4px;
      }

      .animation-name {
        font-size: 9px;
      }

      /* VR area on mobile */
      #vr-area {
        bottom: auto;
        top: 90px;
        right: 10px;
        left: auto;
        transform: none;
      }

      /* Override vr-available centering on mobile - keep in corner.
         Column layout so the two buttons stack vertically (no room for a
         row on narrow viewports). */
      #vr-area.vr-available {
        right: 10px;
        bottom: auto;
        top: 90px;
        transform: none;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
      }

      .vr-hint {
        padding: 8px 12px;
        font-size: 11px;
      }

      .vr-hint-text {
        display: none;
      }

      /* Tooltip opens downward on mobile to avoid screen clipping */
      .vr-tooltip {
        bottom: auto;
        top: calc(100% + 12px);
        right: 0;
        width: 200px;
      }

      .vr-tooltip::after {
        top: auto;
        bottom: 100%;
        border: 8px solid transparent;
        border-top-color: transparent;
        border-bottom-color: var(--bg-dark);
      }

      .vr-button {
        padding: 10px 16px;
        font-size: 12px;
      }
    }

    @media (max-width: 480px) {
      .animation-card {
        width: 54px;
        padding: 6px 4px;
      }

      .animation-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: 8px;
      }

      .animation-name {
        font-size: 8px;
      }

      #animation-dock {
        padding: 8px 12px;
        gap: 6px;
      }

      #side-controls {
        bottom: 120px;
      }

      .control-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      .control-btn svg {
        width: 18px;
        height: 18px;
      }
    }

    @media (max-width: 380px) {
      .animation-card {
        width: 48px;
        padding: 5px 3px;
      }

      .animation-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }

      .animation-name {
        font-size: 7px;
      }

      #animation-dock {
        padding: 6px 8px;
        gap: 4px;
      }

      #instructions {
        font-size: 9px;
        padding: 4px 8px;
      }
    }

    /* ============================================
       REDUCED MOTION
       ============================================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }