:root {
    --bg-0: #06050a;
    --april: #ff8a65;
    --april-rgb: 255, 138, 101;
    --tk: #5eead4;
    --tk-rgb: 94, 234, 212;
    --cyan-rgb: 90, 220, 240;
    --magenta-rgb: 255, 120, 210;
    --holo-rgb: 180, 200, 240;

    /* ---- Brushed gold–copper palette ---- */
    --gold-shadow:    #4a2912;  /* deep bronze */
    --gold-mid-dark:  #6e4520;  /* warm bronze */
    --gold-mid:       #a87842;  /* gold–copper base */
    --gold-warm:      #b8854a;  /* warm gold */
    --gold-light:     #d6a86a;  /* champagne */
    --gold-highlight: #ebc485;  /* highlight */
    --gold-icon:      #e8c478;  /* icon tint */
    --gold-icon-soft: rgba(232, 196, 120, 0.85);
    --gold-glow:      rgba(232, 196, 120, 0.22);
    --gold-edge-soft: rgba(220, 170, 100, 0.55);

    /* Copper–red variant (end button) */
    --copper-shadow:  #2c0e08;
    --copper-mid:     #8a3422;
    --copper-warm:    #b04535;
    --copper-light:   #c45040;
    --copper-icon:    #e89080;

    --bone:    #f5f0e8;
    --bone-70: rgba(245, 240, 232, 0.70);
    --bone-50: rgba(245, 240, 232, 0.50);
    --bone-30: rgba(245, 240, 232, 0.30);
    --bone-15: rgba(245, 240, 232, 0.15);
    --bone-08: rgba(245, 240, 232, 0.08);

    --frame-color: rgba(180, 200, 240, 0.18);
    --frame-color-strong: rgba(180, 200, 240, 0.42);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    height: 100%; width: 100%;
    overflow: hidden;
    background: var(--bg-0);
    color: var(--bone);
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-feature-settings: "ss01", "ss02";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
    mix-blend-mode: overlay;
    animation: grain-shift 7s steps(8) infinite;
  }
  @keyframes grain-shift {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-2%,1%); }
    40% { transform: translate(1%,-2%); }
    60% { transform: translate(-1%,2%); }
    80% { transform: translate(2%,-1%); }
  }
  body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 99;
    background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
  }

  #stage { position: fixed; inset: 0; }

  canvas#field {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }

  /* Reveal */
  .hud-top, .hud-brand, .cube-label, .brand-lockup, .idle-controls,
  .speaker-label, .center-meta, .live-controls,
  .drawer-handle, .holo-frame {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
  }
  body.revealed .hud-top   { opacity: 1; transition: opacity 1.4s ease; }
  body.revealed .hud-brand { opacity: 1; transition: opacity 1.6s ease 0.3s; }
  body.revealed .holo-frame { opacity: 1; transition: opacity 1.6s ease 0.1s; }
  body.revealed[data-state="idle"] .cube-label   { opacity: 1; transition-delay: 0.2s; }
  body.revealed[data-state="idle"] .brand-lockup { opacity: 1; transition-delay: 0.35s; }
  body.revealed[data-state="idle"] .idle-controls {
    opacity: 1; transition-delay: 0.5s; pointer-events: auto;
  }
  body[data-state="connecting"] .speaker-label,
  body[data-state="live"] .speaker-label { opacity: 1; transform: translateY(0); }
  body[data-state="connecting"] .speaker-label { transition-delay: 1.2s; }
  body[data-state="live"] .center-meta { opacity: 1; transition-delay: 0.3s; }
  body[data-state="live"] .live-controls {
    opacity: 1; pointer-events: auto; transition-delay: 0.4s;
  }
  body[data-state="live"] .drawer-handle {
    opacity: 1; pointer-events: auto; transition-delay: 0.6s;
  }

  /* ============================================================
     DEV-MODE PROGRESS INDICATOR — removed at Slice 36
     Vertical text on left edge, paired below RESET SESSION,
     positioned in the lower-left vertical column to stay clear
     of April's speaker label (top: 18%; left: 9% during call).
  ============================================================ */
  .dev-mode {
    position: fixed;
    left: 14px;
    top: 62%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.32);
    pointer-events: none;
    z-index: 50;
    user-select: none;
  }