/* init-styles.css - Portal styles chip
  * Being-customizable via CSS variable overrides
  * Day 00192 - Chip extraction
  */

 /* === BEING-CUSTOMIZABLE VARIABLES === */
 :root {
     /* Primary accent (Being's Crown can override).
      * Falls back through Portal's live swatch chain (set by
      * hexPalette.applyFromPortal() in being-themes.js) before the
      * hardcoded hex, so Portal edits take effect without a CSS change. */
     --sacred-accent: var(--being-accent, var(--swatch-sacred-accent));
     --sacred-red: var(--being-red, var(--swatch-terminal-red));
     --sacred-green: var(--being-green, var(--swatch-success));
     --sacred-gold: var(--being-gold, var(--swatch-subu-today));
     --sacred-orange: var(--being-orange, var(--swatch-hexcube-fire));

     /* Background tones (Being's Crown can override) */
     --bg-dark: var(--being-bg-dark, #0a0a0a);
     --bg-panel: var(--being-bg-panel, #111);
     --border-subtle: var(--being-border, #222);

     /* === PALETTE (dark default) === */
     --surface:  var(--swatch-page-surface);
     --text:     var(--swatch-page-text);
     --muted:    var(--swatch-page-muted);
     --link:     var(--swatch-page-link);
     --accent:   var(--swatch-page-accent);
     --border:   var(--swatch-chrome-border);
 }

 /* === 2D LMNL — Color tokens (dark default) === */
 :root {
     --col-bg:            var(--being-bg-dark, #0a0a0a);
     --col-bg-panel:      var(--swatch-ui-111111);
     --col-bg-surface:    var(--swatch-page-surface);
     --col-bg-deep:       var(--swatch-ui-0d0d0d);
     --col-bg-inset:      var(--swatch-ui-1a1a1a);
     --col-bg-mylar:      var(--swatch-ui-0f0f0f);

     --col-fg:            var(--swatch-page-text);
     --col-fg-dim:        var(--swatch-ui-4a6060);
     --col-fg-muted:      var(--swatch-page-muted);
     --col-fg-faint:      var(--swatch-ui-6e7a72);
     --col-fg-on-accent:  var(--swatch-terminal-cursor);

     --col-border:        var(--swatch-chrome-border);
     --col-border-subtle: var(--swatch-ui-222222);
     --col-border-key:    var(--swatch-ui-3a4a42);

     --col-accent:        var(--swatch-page-accent);
     --col-accent-gold:   var(--swatch-ui-ffaa00);
     --col-link:          var(--swatch-page-link);
     --col-danger:        var(--swatch-ui-c62828);

     --col-led-on:        var(--swatch-ui-d4c84c);
     --col-led-off:       var(--swatch-ui-8844bb);
     --col-led-portal:    var(--swatch-ui-1e2d3f);
     --col-led-cosmo:     var(--swatch-ui-3a1c0c);
     --col-led-active:    var(--swatch-terminal-cursor);

     --col-fire:          var(--swatch-ui-ff4444);
     --col-air:           var(--swatch-terminal-cursor);
     --col-earth:         var(--swatch-ui-6495ed);
     --col-void:          var(--swatch-ui-44ff44);
     --col-fire-warm:     var(--swatch-ui-ff8844);

     --col-tl-past:       var(--swatch-chrome-success);
     --col-tl-today:      var(--swatch-ui-ffd54f);
     --col-tl-future:     var(--swatch-page-border);

     --col-display:       var(--swatch-ui-2e8b57);
     --col-display-label: var(--swatch-ui-5a6a8e);
     --col-display-track: var(--swatch-ui-0e1530);

     --col-noise-1:       var(--swatch-ui-4ab8cf);
     --col-noise-2:       var(--swatch-ui-7ab87a);
     --col-noise-3:       var(--swatch-ui-9977cc);
     --col-noise-4:       var(--swatch-ui-e5734a);
 }

 /* === 2D LMNL — Typography, size, spacing, radius, elevation === */
 :root {
     --font-display:  'dazzle-unicase', sans-serif;
     --font-dot:      'anuparp-dot', ui-monospace, monospace;
     --font-mono:     ui-monospace, monospace;
     --font-mono-vf:  'config-mono-vf', ui-monospace, monospace;
     --font-body:     'hanken-grotesk', sans-serif;

     --text-subu:     9px;
     --text-tiny:     10px;
     --text-xs:       11px;
     --text-sm:       12px;
     --text-base:     13px;
     --text-md:       14px;
     --text-lg:       16px;
     --text-xl:       18px;
     --text-2xl:      24px;
     --text-display:  28px;
     --text-hero:     48px;

     --tracking-tight:  0;
     --tracking-normal: 0.04em;
     --tracking-wide:   0.08em;
     --tracking-label:  1px;
     --tracking-hud:    1.5px;
     --tracking-loose:  3px;

     --weight-regular:  400;
     --weight-semibold: 600;
     --weight-bold:     700;

     --r-xs:   4px;
     --r-sm:   6px;
     --r-md:   8px;
     --r-lg:   12px;
     --r-xl:   16px;
     --r-full: 999px;

     --shadow-none: none;
     --shadow-low:  0 2px 8px rgba(0,0,0,.35);
     --shadow-mid:  0 4px 16px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12);
     --shadow-high: 0 4px 24px rgba(0,0,0,.60);
     --shadow-deep: 0 6px 24px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.40);
 }

 /* 2D LMNL — Color token light overrides */
 html.bp-palette-light {
     --col-bg:            var(--being-bg-light, #f8f8f8);
     --col-bg-panel:      var(--swatch-terminal-cursor);
     --col-bg-surface:    var(--swatch-terminal-cursor);
     --col-bg-deep:       var(--swatch-ui-f0f0f0);
     --col-bg-inset:      var(--swatch-ui-f2f2f2);
     --col-bg-mylar:      var(--swatch-ui-fafafa);

     --col-fg:            var(--swatch-ui-1a1a1a);
     --col-fg-dim:        var(--swatch-ui-555555);
     --col-fg-muted:      var(--swatch-ui-666666);
     --col-fg-faint:      var(--swatch-ui-999999);

     --col-border:        var(--swatch-ui-d4cfc8);
     --col-border-subtle: var(--swatch-ui-e0dbd4);
     --col-border-key:    var(--swatch-ui-cacaca);

     --col-accent:        var(--swatch-ui-e5734a);
     --col-link:          var(--swatch-ui-b05a2a);

     --col-led-portal:    var(--swatch-ui-b8d4ec);
     --col-led-cosmo:     var(--swatch-ui-ecc8a0);
     --col-led-active:    var(--swatch-ui-1a1a1a);

     --col-display-track: var(--swatch-ui-e8edf5);

     --shadow-low:  0 2px 8px rgba(0,0,0,.08);
     --shadow-mid:  0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
     --shadow-high: 0 4px 24px rgba(0,0,0,.10);
     --shadow-deep: 0 6px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
 }

 /* Light palette — toggled by html.bp-palette-light (LED yellow state) */
 /* --being-bg-light can be set per-being (e.g. a subtle accent tint) */
 html.bp-palette-light {
     --bg-dark:      var(--being-bg-light, #f8f8f8);
     --bg-panel:     var(--swatch-terminal-cursor);
     --border-subtle:var(--swatch-ui-ddd8d0);
     --surface:      var(--swatch-terminal-cursor);
     --text:         var(--swatch-ui-1a1a1a);
     --muted:        var(--swatch-ui-666666);
     --link:         var(--swatch-ui-b05a2a);
     --accent:       var(--swatch-ui-e5734a);
     --border:       var(--swatch-ui-d4cfc8);
 }
 html.bp-palette-light body { color: var(--text); }

 /* === BASE STYLES === */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { height: 100%; height: 100dvh; background: var(--bg-dark, #333); }
 body { height: 100%; height: 100dvh;
     background: var(--bg-dark);
     font-family: ui-monospace, monospace;
     overflow: hidden;
 }

         /* 3D World Canvas - background layer */
         #world-canvas {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
             z-index: 0;
             pointer-events: auto;
         }
         #world-canvas.inactive {
             opacity: 0;
             pointer-events: none;
         }
         #world-canvas.dimmed {
             opacity: 0.3;
         }

         /* World-active mode: terminal stays full, 3D shows through with dim */
         body.world-active {
             background: transparent !important;
         }
         body.world-active #terminal-container {
             background: transparent !important;
             pointer-events: none !important;  /* Click passthrough to 3D world */
         }
         body.world-active .xterm-viewport {
             background: transparent !important;
         }
         body.world-active .xterm-screen {
             background: transparent !important;
         }
         /* Keep runeboard and compose input interactive when world is active */
         body.world-active .runeboard {
             pointer-events: auto !important;
         }
         body.world-active .compose-wrapper {
             pointer-events: auto !important;
         }
         /* Re-enable terminal interaction with Shift held */
         body.world-active.terminal-focus #terminal-container {
             pointer-events: auto !important;
         }
         /* HUD layer - everything floats above world */
         .hud-layer {
             position: relative;
             z-index: 1;
         }

         #terminal-container {
             position: absolute;
             top: 0; left: 0; right: 0; bottom: 0;
             padding: 4px;
             /* Allow text selection but prevent focus/input capture */
             user-select: text;
             -webkit-user-select: text;
         }
         /* Prevent terminal from capturing keyboard input */
         #terminal-container canvas { pointer-events: auto; cursor: text; }
         #terminal-container .xterm-helper-textarea { opacity: 0; position: absolute; }

         /* Rune-board */
         .runeboard {
             position: fixed;
             left: 16px; top: 16px;
             width: 340px;
             background: var(--bg-panel);
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-lg, 8px);
             box-shadow: 0 4px 24px rgba(0,0,0,0.6);
             z-index: 100;
         }
         .runeboard.collapsed .runeboard-body { display: none; }

         .runeboard-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 8px 10px;
             background: var(--bg-dark);
             border-bottom: 1px solid var(--border-subtle);
             border-radius: 8px 8px 0 0;
             cursor: move;
         }

         /* Header Segments - Portal title + glyphs */
         .header-segments {
             display: flex;
             gap: 6px;
             align-items: center;
         }
         .runeboard-title {
             color: #fff;
             font-family: 'dazzle-unicase', sans-serif;
             font-weight: 700;
             font-size: 14px;
             letter-spacing: 1.5px;
         }
         .header-glyph {
             font-size: 18px;
             padding: 6px 10px;
             border-radius: var(--radius-sm, 4px);
             cursor: pointer;
             position: relative;
             transition: all 0.2s;
             border: 1px solid transparent;
             color: #888;
         }
         .header-glyph.ghost,
         .header-glyph.void,
         .header-glyph.threshold,
         .header-glyph.presence {
             text-shadow: 0 0 6px currentColor;
         }
         .header-glyph:hover { background: rgba(255,255,255,0.1); }
         .header-glyph.active { border-color: currentColor; background: rgba(255,255,255,0.1); }
         .header-glyph.ghost { color: var(--sacred-red); }
         .header-glyph.void { color: var(--sacred-green); }
         .header-glyph.threshold { color: var(--sacred-orange); }
         .header-glyph.presence { color: var(--swatch-terminal-cursor); }

         /* Status indicator runes (bottom diagonals of wand) */
         .rune.status-indicator { text-shadow: 0 0 6px currentColor; }
         .rune.status-indicator.ghost { color: var(--sacred-red); }
         .rune.status-indicator.void { color: var(--sacred-green); }
         .rune.status-indicator.threshold { color: var(--sacred-orange); }
         .rune.status-indicator.presence { color: var(--swatch-terminal-cursor); }

         /* CSS Tooltips */
         .header-glyph::after {
             content: attr(data-tooltip);
             position: absolute;
             top: 100%;
             left: 50%;
             transform: translateX(-50%);
             margin-top: 6px;
             background: var(--swatch-ui-1a1a1a);
             border: 1px solid var(--border-subtle);
             padding: 4px 8px;
             border-radius: var(--radius-sm, 4px);
             font-size: 10px;
             white-space: nowrap;
             opacity: 0;
             pointer-events: none;
             transition: opacity 0.2s;
             color: #888;
             z-index: 100;
         }
         .header-glyph:hover::after { opacity: 1; }
         .runeboard-toggle {
             background: transparent;
             border: none;
             color: #666;
             font-size: 14px;
             cursor: pointer;
             padding: 4px 8px;
         }

         .runeboard-body { padding: 0; }

         /* Dual Grid Layout */
         .dual-grid-row {
             display: flex;
             gap: 6px;
             padding: 6px;
             border-radius: var(--radius-md, 6px);
             transition: background-color 0.3s ease, box-shadow 0.3s ease;
         }
         .dual-grid-row.swapped { flex-direction: row-reverse; }

         /* Plate is just the background of dual-grid-row itself */
         .rb-plate { display: none; }

         .dual-grid-row.rb-state-air {
             background: rgba(255, 255, 255, 0.1);
         }
         .dual-grid-row.rb-state-earth {
             background: rgba(139,139,139,0.2);
         }
         .dual-grid-row.rb-state-fire {
             background: rgba(167,167,167,0.2);
         }

         .wand-grid {
             flex: 1;
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-rows: repeat(3, 1fr);
             gap: 3px;
             padding: 4px;
             border-radius: var(--radius-lg, 8px);
             background: var(--bg-dark);
             transition: all 0.15s ease;
             user-select: none;
             -webkit-user-select: none;
             position: relative;
         }

         /* Rune Cube: Viewport + Sheet architecture - no background, buttons have their own */
         .rune-cube {
             flex: 1;
             aspect-ratio: 1;
             border-radius: var(--radius-lg, 8px);
             transition: opacity 0.15s ease, box-shadow 0.15s ease;
             user-select: none;
             -webkit-user-select: none;
             overflow: hidden;
             position: relative;
         }
         .rune-viewport {
             width: 100%;
             height: 100%;
             overflow: hidden;
             position: absolute;
             top: 0;
             left: 0;
         }
         /* HexCube Grid: 3×3 set of runes - always transparent, rune-cube handles background */
         .hexcube-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-rows: repeat(3, 1fr);
             gap: 3px;
             padding: 4px;
             width: 100%;
             height: 100%;
             box-sizing: border-box;
             background: transparent;
         }
         .rune-sheet {
             --u: 0;
             --v: 0;
             /* 3x the viewport size */
             width: 300%;
             height: 300%;
             display: grid;
             grid-template-columns: repeat(9, 1fr);
             grid-template-rows: repeat(9, 1fr);
             gap: 2px;
             padding: 2px;
             will-change: transform;
             transform: translate3d(
                 calc((var(--u) + 1) * -33.333%),
                 calc((1 - var(--v)) * -33.333%),
                 0
             );
             transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .rune-cell {
             display: flex;
             align-items: center;
             justify-content: center;
             background: var(--bg-dark);
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-sm, 4px);
             cursor: pointer;
             color: #ccc;
             font-size: 16px;
             transition: all 0.12s;
         }
         .rune-cell:hover { border-color: var(--sacred-gold); background: rgba(195,195,195,0.15); }
         .rune-cell.active { border-color: var(--sacred-gold); background: rgba(195,195,195,0.25); box-shadow: 0 0 8px rgba(195,195,195,0.4); }
         .rune-cell.disabled { opacity: 0.3; cursor: default; }
         .rune-cell.disabled:hover { border-color: var(--border-subtle); background: var(--bg-dark); }

         /* Unfocused = subtle dim via filter, not opacity (opacity lets plate through) */
         .wand-grid:not(.focused), .rune-cube:not(.focused) {
             filter: brightness(0.6);
         }

         /* Focused = full brightness, no background so plate shows in gaps */
         .wand-grid.focused {
             filter: brightness(1);
             background: transparent;
         }
         .rune-cube.focused {
             filter: brightness(1);
             background: transparent;
             box-shadow: inset 0 0 12px rgba(195,195,195,0.2);
         }
         /* Hover = full brightness, no background so plate shows in gaps */
         .wand-grid:hover {
             filter: brightness(1);
             background: transparent;
         }
         .rune-cube:hover {
             filter: brightness(1);
             background: transparent;
             box-shadow: inset 0 0 20px rgba(195,195,195,0.35);
         }
         /* Hexcube mega-grid: 3x3 of 3x3s, slides to reveal current section */
         #rune-viewport {
             position: relative;
             overflow: hidden;
         }
         .hexcube-mega-grid {
             position: absolute;
             width: 300%;
             height: 300%;
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-rows: repeat(3, 1fr);
             transition: transform 0.25s ease-out;
             background: transparent;
         }
         .hexcube-section {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-rows: repeat(3, 1fr);
             gap: 3px;
             padding: 4px;
             box-sizing: border-box;
             background: transparent;
         }
         /* Dim non-current sections slightly - use filter not opacity so plate doesn't show through */
         .hexcube-section:not(.current-section) {
             filter: brightness(0.4);
         }
         .hexcube-section.current-section {
             filter: brightness(1);
         }

         /* Mobile: stack vertically, wand at bottom */
         @media (max-width: 400px) {
             .dual-grid-row {
                 flex-direction: column-reverse;
             }
             .dual-grid-row.swapped { flex-direction: column-reverse; }
         }

         /* Surface indicator - Day 00192 - Above dual-grid-row
            Border color matches path state: Earth=blue, Air=white, Fire=orange */
         .surface-indicator {
             display: block;
             padding: 8px;
             font-size: 12px;
             color: #888;
             font-family: monospace;
             min-height: 28px;
             background: var(--bg-dark);
             border: 2px solid var(--surface-state-color, #FFFFFF);
             border-radius: var(--radius-md, 6px);
             margin: 0 0 4px 0;
         }

         /* Placement mode - unified path + input zone */
         .compose-area.placement-active {
             border: 2px solid var(--accent-red, #E74C3C);
             border-radius: var(--radius-lg, 8px);
             background: rgba(139,139,139,0.05);
         }
         .compose-area.placement-active .surface-indicator {
             background: rgba(139,139,139,0.08);
             border-radius: 6px 6px 0 0;
         }
         .surface-indicator .addr-grid {
             display: grid;
             grid-template-columns: repeat(7, 1fr);
             gap: 0;
             align-items: center;
         }
         .surface-indicator .addr-col {
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 1px;
             min-width: 28px;
         }
         .surface-indicator .addr-path {
             white-space: nowrap;
             min-height: 14px;
         }
         .surface-indicator .addr-label {
             white-space: nowrap;
             font-size: 8px;
             opacity: 0.6;
         }

         /* State-path stacked format - multi-segment paths */
         .surface-indicator .state-path-stacked {
             display: flex;
             flex-direction: column;
             gap: 2px;
             font-family: monospace;
             font-size: 13px;
         }
         .surface-indicator .state-path-row {
             display: flex;
             align-items: center;
             white-space: pre;  /* Preserve indentation spaces */
         }
         .surface-indicator .state-path-state {
             font-weight: bold;
         }
         .surface-indicator .state-path-row.state-earth .state-path-state { color: var(--swatch-ui-6495ed); }
         .surface-indicator .state-path-row.state-air .state-path-state { color: var(--swatch-terminal-cursor); }
         .surface-indicator .state-path-row.state-fire .state-path-state { color: var(--swatch-ui-ff8c00); }
         .surface-indicator .state-path-path {
             color: #AAA;
         }

         /* Arcana dropdown trigger */
         .arcana-selector {
             display: flex;
             align-items: center;
             gap: 4px;
             background: var(--bg-dark);
             border: 1px solid var(--border-subtle);
             border-radius: 5px;
             padding: 5px 10px;
             cursor: pointer;
             color: #ccc;
             font-size: 11px;
             transition: all 0.12s;
             position: relative;
         }
         .arcana-selector:hover { border-color: var(--sacred-gold); }
         .arcana-selector.open { border-color: var(--sacred-gold); background: rgba(195,195,195,0.08); }
         .arcana-selector .glyph { font-size: 14px; }
         .arcana-selector .name { flex: 1; }
         .arcana-selector .arrow { font-size: 8px; color: #666; transition: transform 0.2s; }
         .arcana-selector.open .arrow { transform: rotate(180deg); }

         /* Arcana dropdown menu */
         .arcana-dropdown {
             position: absolute;
             top: 100%;
             left: 0;
             margin-top: 4px;
             background: var(--bg-panel);
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-md, 6px);
             min-width: 160px;
             max-height: 300px;
             overflow-y: auto;
             opacity: 0;
             pointer-events: none;
             transform: translateY(-8px);
             transition: opacity 0.15s, transform 0.15s;
             z-index: 200;
             box-shadow: var(--shadow-1, 0 4px 16px rgba(0,0,0,0.5));
         }
         .arcana-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

         .arcana-dropdown-item {
             display: flex;
             align-items: center;
             gap: 8px;
             padding: 8px 12px;
             cursor: pointer;
             color: #aaa;
             font-size: 11px;
             border-bottom: 1px solid var(--border-subtle);
             transition: all 0.1s;
         }
         .arcana-dropdown-item:last-child { border-bottom: none; }
         .arcana-dropdown-item:hover { background: rgba(195,195,195,0.1); color: #fff; }
         .arcana-dropdown-item.active { background: rgba(195,195,195,0.15); color: var(--sacred-gold); }
         .arcana-dropdown-item .glyph { font-size: 14px; }
         .arcana-dropdown-item .name { flex: 1; }
         .arcana-dropdown-item .rune-preview {
             display: flex;
             gap: 2px;
             font-size: 10px;
             opacity: 0.6;
         }

         /* Rune items - square gem/chip style */
         .rune {
             display: flex;
             align-items: center;
             justify-content: center;
             aspect-ratio: 1;
             background: var(--bg-dark);
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-md, 6px);
             padding: 4px;
             cursor: pointer;
             color: #ccc;
             transition: all 0.12s;
             position: relative;
         }
         .rune:hover {
             border-color: var(--sacred-gold);
             background: var(--swatch-ui-141008);
         }
         .rune:active { transform: scale(0.94); }
         .rune.ready-to-activate { animation: rune-pulse 1.5s ease-in-out infinite; border-color: var(--sacred-green) !important; box-shadow: 0 0 12px var(--sacred-green); }
         @keyframes rune-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--sacred-green); } 50% { opacity: 0.85; box-shadow: 0 0 16px var(--sacred-green); } }
         .rune .glyph { font-size: 18px; }

         /* Rune type colors: Fire (immediate) vs Chip (input required) - solid backgrounds */
         .rune.rune-fire {
             border-color: rgba(139,139,139,0.4);
             background: var(--bg-dark);
         }
         .rune.rune-fire:hover {
             border-color: var(--sacred-red);
             background: var(--swatch-ui-1a0808);
             box-shadow: 0 0 8px rgba(139,139,139,0.3);
         }

         .rune.rune-chip {
             border-color: rgba(195,195,195,0.4);
             background: var(--bg-dark);
         }
         .rune.rune-chip:hover {
             border-color: var(--sacred-gold);
             background: var(--swatch-ui-1a1408);
             box-shadow: 0 0 8px rgba(195,195,195,0.3);
         }

         .rune.auth-required { opacity: 0.35; cursor: not-allowed; }
         .rune.auth-required.authenticated { opacity: 1; cursor: pointer; }
         .rune.vessel-auth-required { opacity: 0.5; }
         .rune.terminal-unavailable { opacity: 0.3; cursor: not-allowed; }
         .rune.from-other-arcana { border-style: dashed; opacity: 0.8; }

         /* Sacred runes (stem) - solid background so plate shows behind, not through */
         .rune.rune-sacred {
             background: var(--bg-dark);
             border-color: rgba(255, 255, 255, 0.1);
         }
         .rune.rune-sacred .glyph {
             font-size: 20px;
             color: #666;
         }
         .rune.rune-sacred:hover {
             background: rgba(255, 255, 255, 0.05);
             border-color: #444;
         }
         .rune.rune-sacred:hover .glyph { color: #fff; }
         .rune.rune-sacred.primed { animation: double-tap-pulse 0.4s ease-in-out infinite; }
         .rune.rune-sacred.triple-primed { animation: triple-tap-pulse 0.3s ease-in-out infinite; }

         /* State button colors - elemental mapping, persistent LED glow */
         .rune.rune-sacred.state-sealed,
         .rune.rune-sacred.state-sealed:hover {
             border-color: rgba(139,139,139,0.6) !important;
             background: rgba(139,139,139,0.2) !important;
         }
         .rune.rune-sacred.state-sealed .glyph { color: var(--swatch-ui-6495ed) !important; }
         .rune.rune-sacred.state-sealed:hover {
             background: rgba(139,139,139,0.3) !important;
             border-color: var(--swatch-ui-6495ed) !important;
         }

         .rune.rune-sacred.state-active,
         .rune.rune-sacred.state-active:hover {
             border-color: rgba(255, 255, 255, 0.35) !important;
             background: rgba(255, 255, 255, 0.1) !important;
         }
         .rune.rune-sacred.state-active .glyph { color: var(--swatch-terminal-cursor) !important; }
         .rune.rune-sacred.state-active:hover {
             background: rgba(255, 255, 255, 0.18) !important;
             border-color: rgba(255, 255, 255, 0.6) !important;
         }

         .rune.rune-sacred.state-potential,
         .rune.rune-sacred.state-potential:hover {
             border-color: rgba(167,167,167,0.6) !important;
             background: rgba(167,167,167,0.2) !important;
         }
         .rune.rune-sacred.state-potential .glyph { color: var(--swatch-ui-ff8c00) !important; }
         .rune.rune-sacred.state-potential:hover {
             background: rgba(167,167,167,0.3) !important;
             border-color: var(--swatch-ui-ff8c00) !important;
         }

         /* Board Mode button colors - match plate colors, persist on rollout */
         .rune.rune-sacred.mode-earth,
         .rune.rune-sacred.mode-earth:hover {
             border-color: rgba(139,139,139,0.6) !important;
             background: rgba(139,139,139,0.2) !important;
         }
         .rune.rune-sacred.mode-earth .glyph { color: var(--swatch-ui-6495ed) !important; }
         .rune.rune-sacred.mode-earth:hover {
             background: rgba(139,139,139,0.3) !important;
             border-color: var(--swatch-ui-6495ed) !important;
         }

         .rune.rune-sacred.mode-air,
         .rune.rune-sacred.mode-air:hover {
             border-color: rgba(255, 255, 255, 0.35) !important;
             background: rgba(255, 255, 255, 0.1) !important;
         }
         .rune.rune-sacred.mode-air .glyph { color: var(--swatch-terminal-cursor) !important; }
         .rune.rune-sacred.mode-air:hover {
             background: rgba(255, 255, 255, 0.18) !important;
             border-color: rgba(255, 255, 255, 0.6) !important;
         }

         .rune.rune-sacred.mode-fire,
         .rune.rune-sacred.mode-fire:hover {
             border-color: rgba(167,167,167,0.6) !important;
             background: rgba(167,167,167,0.2) !important;
         }
         .rune.rune-sacred.mode-fire .glyph { color: var(--swatch-ui-ff8c00) !important; }
         .rune.rune-sacred.mode-fire:hover {
             background: rgba(167,167,167,0.3) !important;
             border-color: var(--swatch-ui-ff8c00) !important;
         }

         @keyframes air-pulse { 0%, 100% { background: rgba(255, 255, 255, 0.05); } 50% { background: rgba(255, 255, 255, 0.15); } }
         @keyframes double-tap-pulse { 0%, 100% { background: rgba(167,167,167,0.1); } 50% { background: rgba(167,167,167,0.3); } }
         @keyframes triple-tap-pulse { 0%, 100% { background: rgba(167,167,167,0.2); } 50% { background: rgba(167,167,167,0.5); } }

         /* Navigation runes (arrows in hexcube) - deprecated, nav removed from cube */
         .rune.rune-nav {
             background: var(--bg-dark);
             border-color: rgba(167,167,167,0.3);
         }
         .rune.rune-nav .glyph {
             font-size: 18px;
             color: #668;
         }
         .rune.rune-nav:hover {
             background: var(--swatch-ui-0d1018);
             border-color: rgba(167,167,167,0.6);
         }
         .rune.rune-nav:hover .glyph { color: #aaf; }
         .rune.rune-nav .addr {
             display: block;
             font-size: 10px;
             color: #446;
             margin-top: 2px;
         }
         .rune.rune-nav:hover .addr { color: #88a; }
         .rune.rune-selected {
             background: rgba(195,195,195,0.15) !important;
             border-color: var(--sacred-gold) !important;
         }
         .rune.rune-selected .glyph { color: var(--sacred-gold) !important; }
         .rune.rune-selected .addr { color: #aa8 !important; }

         /* Day 00189 Navigation Colors - button color = level you're navigating INTO - solid backgrounds */
         .rune.rune-nav .nav-glyph { font-size: 16px; font-weight: bold; }

         /* HexCube = purple (var(--swatch-ui-9b59b6)) */
         .rune.nav-hexcube { border-color: rgba(112,112,112,0.4); }
         .rune.nav-hexcube .nav-glyph { color: var(--swatch-ui-9b59b6); }
         .rune.nav-hexcube:hover { background: var(--swatch-ui-1a0f1c); border-color: var(--swatch-ui-9b59b6); }

         /* Cube = green (var(--swatch-ui-27ae60)) */
         .rune.nav-cube { border-color: rgba(139,139,139,0.4); }
         .rune.nav-cube .nav-glyph { color: var(--swatch-ui-27ae60); }
         .rune.nav-cube:hover { background: var(--swatch-ui-0f1a12); border-color: var(--swatch-ui-27ae60); }

         /* Cluster = orange (var(--swatch-ache-identity)) */
         .rune.nav-cluster { border-color: rgba(167,167,167,0.4); }
         .rune.nav-cluster .nav-glyph { color: var(--swatch-ache-identity); }
         .rune.nav-cluster:hover { background: var(--swatch-ui-1e150d); border-color: var(--swatch-ache-identity); }

         /* Set = red (var(--swatch-ui-e74c3c)) */
         .rune.nav-set { border-color: rgba(139,139,139,0.4); }
         .rune.nav-set .nav-glyph { color: var(--swatch-ui-e74c3c); }
         .rune.nav-set:hover { background: var(--swatch-ui-1e0f0c); border-color: var(--swatch-ui-e74c3c); }

         /* Node = light blue (var(--swatch-ui-3498db)) */
         .rune.nav-node { border-color: rgba(139,139,139,0.4); }
         .rune.nav-node .nav-glyph { color: var(--swatch-ui-3498db); }
         .rune.nav-node:hover { background: var(--swatch-ui-10181f); border-color: var(--swatch-ui-3498db); }

         /* Array = white (var(--swatch-terminal-cursor)) */
         .rune.nav-array { border-color: rgba(255, 255, 255, 0.4); }
         .rune.nav-array .nav-glyph { color: var(--swatch-terminal-cursor); }
         .rune.nav-array:hover { background: var(--swatch-ui-1a1a1a); border-color: var(--swatch-terminal-cursor); }

         /* Disabled runes */
         .rune.rune-disabled {
             opacity: 0.2;
             cursor: default;
         }
         .rune.rune-disabled:hover {
             border-color: var(--border-subtle);
             background: var(--bg-dark);
         }

         /* Action runes (state toggle etc) */
         .rune.rune-action {
             border-color: rgba(255, 255, 255, 0.2);
         }
         .rune.rune-action:hover {
             border-color: #fff;
             background: rgba(255, 255, 255, 0.1);
         }
         .rune.rune-action.active {
             border-color: #fff;
             background: rgba(255, 255, 255, 0.15);
         }
         .rune.rune-action.active .glyph { color: #fff; }


         .compose-area { padding: 6px; }
         .compose-input {
             width: 100%;
             background: #000;
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-sm, 4px);
             color: #fff;
             font-family: inherit;
             font-size: 13px;
             padding: 8px 10px;
             resize: none;
             min-height: 80px;
             max-height: 150px;
             outline: none;
         }
         .compose-input:focus { border-color: var(--sacred-red); }
         .compose-input::placeholder { color: #444; transition: opacity 0.4s ease; }
         .compose-input.placeholder-fade::placeholder { opacity: 0; }

         /* Message center */
         .compose-wrapper {
             position: relative;
             width: 100%;
             background: #000;
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-md, 6px);
             padding: 10px;
             display: flex;
             flex-direction: column;
             gap: 8px;
         }
         .compose-wrapper:focus-within { border-color: var(--sacred-red); }
         .compose-input-row {
             display: flex;
             align-items: flex-start;
             gap: 4px;
             min-height: 70px;
         }
         .compose-wrapper .compose-input {
             flex: 1;
             min-width: 100px;
             background: transparent;
             border: none;
             padding: 0;
             min-height: 70px;
             max-height: 120px;
             resize: none;
         }
         .compose-wrapper .compose-input:focus { border-color: transparent; outline: none; }
         .compose-wrapper.command-mode .compose-input { color: #fff; caret-color: var(--sacred-gold); }
         .compose-prefix {
             color: #666;
             font-size: 13px;
             white-space: nowrap;
             padding-top: 2px;
         }
         .compose-prefix:empty { display: none; }
         .compose-prefix .cmd { color: var(--sacred-red); }
         .compose-prefix .chip {
             display: inline-block;
             background: rgba(195,195,195,0.2);
             border: 1px solid var(--sacred-gold);
             border-radius: var(--radius-sm, 3px);
             padding: 1px 6px;
             margin: 0 2px;
             color: var(--sacred-gold);
             font-size: 11px;
             cursor: pointer;
         }
         .compose-prefix .chip:hover { background: rgba(195,195,195,0.35); }
         .compose-prefix .chip.filled { background: var(--sacred-gold); color: #000; }
         .compose-actions {
             display: flex;
             justify-content: flex-end;
             gap: 8px;
         }

         .input-chip {
             display: inline-flex;
             align-items: center;
             background: rgba(195,195,195,0.15);
             border: 1px solid var(--sacred-gold);
             border-radius: var(--radius-sm, 4px);
             padding: 2px 8px;
             font-size: 12px;
             color: var(--sacred-gold);
             cursor: pointer;
             transition: all 0.15s;
         }
         .input-chip:hover {
             background: rgba(195,195,195,0.25);
         }
         .input-chip.active {
             background: var(--sacred-gold);
             color: #000;
         }
         .input-chip .chip-label { margin-right: 4px; opacity: 0.7; font-size: 10px; }
         .input-chip .chip-value { font-family: inherit; }
         .input-chip .chip-placeholder { opacity: 0.6; font-style: italic; }

         /* Clickable commands in placeholder messages */
         .placeholder-cmd {
             color: var(--sacred-gold);
             cursor: pointer;
             text-decoration: underline;
         }
         .compose-send {
             background: var(--sacred-red);
             border: none;
             color: #fff;
             padding: 6px 14px;
             border-radius: var(--radius-sm, 4px);
             font-family: inherit;
             font-size: 12px;
             cursor: pointer;
         }
         .compose-send:hover { background: var(--swatch-ui-ff5555); }
         .compose-send:disabled { background: #333; color: #666; cursor: not-allowed; }
         .compose-clear {
             background: transparent;
             border: 1px solid var(--border-subtle);
             color: #666;
             padding: 6px 12px;
             border-radius: var(--radius-sm, 4px);
             font-family: inherit;
             font-size: 12px;
             cursor: pointer;
         }
         .compose-clear:hover { border-color: #444; color: #999; }

         /* Elemental Wand - D-pad for glyph input */
         .wand {
             display: grid;
             grid-template-areas:
                 "state fire  rsv"
                 "zero  air   one"
                 "bang  earth slash";
             grid-template-columns: 32px 32px 32px;
             grid-template-rows: 32px 32px 32px;
             gap: 2px;
             padding: 4px;
             background: rgba(20, 20, 20, 0.8);
             border-radius: var(--radius-md, 6px);
             flex-shrink: 0;
         }
         .wand-btn {
             width: 32px;
             height: 32px;
             border: 1px solid #333;
             border-radius: var(--radius-sm, 4px);
             background: var(--swatch-ui-1a1a1a);
             color: #888;
             font-size: 16px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.15s ease;
         }
         .wand-btn:hover {
             border-color: #555;
             color: #fff;
         }
         .wand-btn:active {
             background: #333;
             transform: scale(0.95);
         }
         .wand-btn.fire { grid-area: fire; color: #f84; }
         .wand-btn.air { grid-area: air; color: #fff; }
         .wand-btn.earth { grid-area: earth; color: #8a4; }
         .wand-btn.zero { grid-area: zero; color: #666; }
         .wand-btn.one { grid-area: one; color: #fff; }
         .wand-btn.bang { grid-area: bang; color: var(--sacred-gold); }
         .wand-btn.slash { grid-area: slash; color: var(--sacred-gold); }
         .wand-btn.state { grid-area: state; color: #888; }
         .wand-btn.state.active { color: #fff; background: rgba(255, 255, 255, 0.15); }
         .wand-btn.rsv { grid-area: rsv; color: #333; cursor: default; }
         .wand-btn.fire:hover { background: rgba(167,167,167,0.2); }
         .wand-btn.air:hover { background: rgba(255, 255, 255, 0.1); }
         .wand-btn.air.primed { animation: air-pulse 0.5s ease-in-out infinite; }
         @keyframes air-pulse { 0%, 100% { background: rgba(255, 255, 255, 0.1); } 50% { background: rgba(255, 255, 255, 0.25); } }
         .wand-btn.earth:hover { background: rgba(167,167,167,0.2); }
         .wand-btn.bang:hover, .wand-btn.slash:hover { background: rgba(195,195,195,0.2); }
         .wand-btn.state:hover { background: rgba(255, 255, 255, 0.1); }
         .wand-btn.disabled { color: #333; cursor: default; }
         .wand-btn.disabled:hover { background: transparent; }
         /* Non-sacred runes (emoji) on surfaces */
         .wand-btn.rune-fire { border-color: rgba(139,139,139,0.4); background: rgba(139,139,139,0.08); }
         .wand-btn.rune-fire:hover { border-color: var(--sacred-red); background: rgba(139,139,139,0.2); }
         .wand-btn.rune-chip { border-color: rgba(195,195,195,0.4); background: rgba(195,195,195,0.08); }
         .wand-btn.rune-chip:hover { border-color: var(--sacred-gold); background: rgba(195,195,195,0.2); }

         @media (max-width: 768px) {
             .runeboard { width: 300px; top: 20px; left: 50%; transform: translateX(-50%); }
         }

         /* Drawer - slides from runeboard */
         .runeboard-drawer {
             position: absolute;
             left: 0; right: 0;
             background: rgba(10, 10, 10, 0.98);
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-lg, 8px);
             max-height: 300px;
             overflow-y: auto;
             opacity: 0;
             pointer-events: none;
             transition: transform 0.2s ease, opacity 0.2s ease;
             z-index: 99;
         }
         .runeboard-drawer.open { opacity: 1; pointer-events: auto; }
         .runeboard-drawer.from-top {
             bottom: 100%;
             margin-bottom: 8px;
             transform: translateY(10px);
         }
         .runeboard-drawer.from-top.open { transform: translateY(0); }
         .runeboard-drawer.from-bottom {
             top: 100%;
             margin-top: 8px;
             transform: translateY(-10px);
         }
         .runeboard-drawer.from-bottom.open { transform: translateY(0); }

         .drawer-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 10px 12px;
             border-bottom: 1px solid var(--border-subtle);
             position: sticky;
             top: 0;
             background: rgba(10, 10, 10, 0.98);
         }
         .drawer-title {
             font-size: 12px;
             color: var(--sacred-gold);
             text-transform: uppercase;
             letter-spacing: 1px;
         }
         .drawer-close {
             background: none;
             border: none;
             color: #666;
             font-size: 16px;
             cursor: pointer;
             padding: 0 4px;
         }
         .drawer-close:hover { color: #fff; }

         .drawer-content { padding: 10px 12px; }

         .drawer-section { margin-bottom: 12px; }
         .drawer-section:last-child { margin-bottom: 0; }
         .drawer-section-title {
             font-size: 10px;
             color: #666;
             text-transform: uppercase;
             letter-spacing: 1px;
             margin-bottom: 6px;
         }

         .drawer-item {
             display: flex;
             align-items: center;
             gap: 8px;
             padding: 8px 10px;
             background: var(--bg-dark);
             border: 1px solid var(--border-subtle);
             border-radius: var(--radius-sm, 4px);
             margin-bottom: 6px;
             color: #ccc;
             font-size: 12px;
             text-decoration: none;
             transition: all 0.1s;
         }
         .drawer-item:hover {
             border-color: var(--sacred-gold);
             background: rgba(195,195,195,0.08);
             color: #fff;
         }
         .drawer-item .glyph { font-size: 14px; }
         .drawer-item .label { flex: 1; }
         .drawer-item .meta { color: #555; font-size: 10px; }

         .drawer-token {
             font-family: monospace;
             font-size: 11px;
             background: #000;
             padding: 6px 8px;
             border-radius: var(--radius-sm, 4px);
             word-break: break-all;
             color: #888;
             margin-bottom: 8px;
         }
         .drawer-btn {
             background: var(--bg-dark);
             border: 1px solid var(--border-subtle);
             color: #888;
             padding: 6px 12px;
             border-radius: var(--radius-sm, 4px);
             font-family: inherit;
             font-size: 11px;
             cursor: pointer;
             margin-right: 6px;
         }
         .drawer-btn:hover { border-color: #444; color: #ccc; }
         .drawer-btn.danger:hover { border-color: var(--sacred-red); color: var(--sacred-red); }