/* ═══════════════════════════════════════════
   ROUTING / Conduit Run mini-game (light theme overrides)
   Scoped under [data-theme="light"] so they only activate
   when the light theme is enabled (matches home-light, salvage-light pattern)
   ═══════════════════════════════════════════ */

  [data-theme="light"] .routing-intro {
    background: var(--bg2);
    border-color: rgba(0,0,0,0.08);
    color: #5a4a30;
  }

  [data-theme="light"] .routing-streak-banner {
    background: linear-gradient(180deg, rgba(139,58,0,0.06), rgba(139,58,0,0.02));
    border-color: rgba(139,58,0,0.2);
  }

  [data-theme="light"] .routing-streak-num {
    color: #8b3a00;
  }

  [data-theme="light"] .routing-streak-label {
    color: #7a6040;
  }

  [data-theme="light"] .routing-difficulty-card {
    background: var(--bg2);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  [data-theme="light"] .routing-difficulty-card:active {
    background: rgba(139,58,0,0.04);
    border-color: rgba(139,58,0,0.2);
  }

  [data-theme="light"] .routing-difficulty-card.solved {
    background: linear-gradient(180deg, rgba(0,154,82,0.08), rgba(0,154,82,0.02));
    border-color: rgba(0,154,82,0.3);
  }

  [data-theme="light"] .routing-card-icon {
    color: #8b3a00;
  }

  [data-theme="light"] .routing-card-title {
    color: #2a2018;
  }

  [data-theme="light"] .routing-card-detail {
    color: #5a4a30;
  }

  [data-theme="light"] .routing-card-status {
    color: #8b3a00;
  }

  [data-theme="light"] .routing-card-status.solved {
    color: #009a52;
  }

  [data-theme="light"] .routing-puzzle-header {
    background: var(--bg2);
    border-color: rgba(0,0,0,0.08);
  }

  [data-theme="light"] .routing-puzzle-title {
    color: #8b3a00;
  }

  [data-theme="light"] .routing-puzzle-timer {
    color: #2a2018;
  }

  [data-theme="light"] .routing-puzzle-status {
    color: #5a4a30;
  }
  [data-theme="light"] .routing-puzzle-status--ready {
    color: #009a52 !important;
  }

  [data-theme="light"] .routing-grid {
    background: #e8e2d6;
    border-color: rgba(139,58,0,0.3);
  }

  [data-theme="light"] .routing-cell {
    background: #f4eee0;
    border-color: rgba(0,0,0,0.06);
  }

  [data-theme="light"] .routing-cell--blocked {
    background: repeating-linear-gradient(
      45deg,
      rgba(139,58,0,0.25),
      rgba(139,58,0,0.25) 4px,
      rgba(255,255,255,0.6) 4px,
      rgba(255,255,255,0.6) 8px
    );
    border-color: #8b3a00;
  }

  [data-theme="light"] .routing-endpoint {
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.15);
    /* color + text-shadow inherited from dark base rule (white fill, black halo) —
       same treatment works on both themes since the dot colours are saturated. */
  }

  [data-theme="light"] .routing-path {
    opacity: 0.45;
  }

  /* Light-theme palette — 10 hues spread ~36° apart on the wheel, deeper saturation
     for contrast against the cream background. Mirrors the dark palette structure. */
  [data-theme="light"] .routing-c-amber   { background: #997820; color: #997820; }
  [data-theme="light"] .routing-c-cyan    { background: #2a7a7a; color: #2a7a7a; }
  [data-theme="light"] .routing-c-magenta { background: #8a3060; color: #8a3060; }
  [data-theme="light"] .routing-c-green   { background: #2f6a3a; color: #2f6a3a; }
  [data-theme="light"] .routing-c-red     { background: #8a2a2a; color: #8a2a2a; }
  [data-theme="light"] .routing-c-blue    { background: #2a4a8a; color: #2a4a8a; }
  [data-theme="light"] .routing-c-purple  { background: #5a2a8a; color: #5a2a8a; }
  [data-theme="light"] .routing-c-orange  { background: #8a4a10; color: #8a4a10; }
  [data-theme="light"] .routing-c-olive   { background: #5a6a20; color: #5a6a20; }
  [data-theme="light"] .routing-c-pink    { background: #8a5a70; color: #8a5a70; }

  [data-theme="light"] .routing-cell--active-trail {
    box-shadow: inset 0 0 0 2px #2a2018;
  }

  [data-theme="light"] .routing-win-overlay {
    background: rgba(244,238,224,0.75);
  }

  [data-theme="light"] .routing-win-panel {
    background: linear-gradient(180deg, #fefbf5, #f4eee0);
    border-color: #8b3a00;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 24px rgba(139,58,0,0.18);
  }

  [data-theme="light"] .routing-win-title {
    color: #8b3a00;
  }

  [data-theme="light"] .routing-win-stats {
    color: #5a4a30;
  }

  [data-theme="light"] .routing-win-bonus {
    color: #009a52;
    border-color: rgba(0,154,82,0.4);
    background: rgba(0,154,82,0.08);
  }

  [data-theme="light"] .routing-win-btn {
    background: linear-gradient(180deg, #8b3a00, #7a3300) !important;
    color: #fff !important;
    border-color: #8b3a00 !important;
  }
  [data-theme="light"] .routing-win-btn:active {
    background: linear-gradient(180deg, #7a3300, #5a2400) !important;
  }

  [data-theme="light"] .routing-control-btn {
    background: var(--bg2);
    border-color: rgba(0,0,0,0.08);
    color: #5a4a30;
  }

  [data-theme="light"] .routing-control-btn:active {
    background: rgba(139,58,0,0.08);
    color: #8b3a00;
  }

  [data-theme="light"] .routing-history-row {
    background: var(--bg2);
    border-color: rgba(0,0,0,0.08);
    color: #5a4a30;
  }

  [data-theme="light"] .routing-history-date {
    color: #2a2018;
  }

  [data-theme="light"] .routing-history-mark.done { color: #009a52; }
  [data-theme="light"] .routing-history-mark.miss { color: rgba(0,0,0,0.15); }

  [data-theme="light"] .routing-pill {
    background: rgba(0,154,82,0.12);
    color: #009a52;
  }

  [data-theme="light"] .routing-section-title {
    color: #7a6040;
  }

  [data-theme="light"] .routing-practice-card {
    background: var(--bg2);
    border-color: rgba(139,58,0,0.25);
  }
  [data-theme="light"] .routing-practice-select {
    background: #fefbf5;
    border-color: rgba(0,0,0,0.12);
    color: #2a2018;
  }
  [data-theme="light"] .routing-practice-play-btn {
    background: linear-gradient(180deg, #8b3a00, #7a3300) !important;
    color: #fff !important;
    border-color: #8b3a00 !important;
  }
  [data-theme="light"] .routing-practice-play-btn:active {
    background: linear-gradient(180deg, #7a3300, #5a2400) !important;
  }

  /* Guide overlay — light theme */
  [data-theme="light"] .routing-guide-overlay {
    background: rgba(244,238,224,0.85);
  }

  [data-theme="light"] .routing-guide-modal {
    background: linear-gradient(180deg, #fefbf5, #f4eee0);
    border-color: rgba(139,58,0,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }

  [data-theme="light"] .routing-guide-title {
    color: #8b3a00;
    border-bottom-color: rgba(139,58,0,0.15);
  }

  [data-theme="light"] .routing-guide-heading {
    color: #8b3a00;
  }

  [data-theme="light"] .routing-guide-text,
  [data-theme="light"] .routing-guide-rules {
    color: #5a4a30;
  }

  [data-theme="light"] .routing-guide-rules strong {
    color: #2a2018;
  }

  [data-theme="light"] .routing-guide-grid-demo {
    background: #e8e2d6;
    border-color: rgba(139,58,0,0.3);
  }

  [data-theme="light"] .rg-cell {
    background: #f4eee0;
    border-color: rgba(0,0,0,0.06);
  }
  [data-theme="light"] .rg-dot {
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 1px rgba(0,0,0,0.15);
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  }

  [data-theme="light"] .routing-guide-btn {
    background: linear-gradient(180deg, #8b3a00, #7a3300) !important;
    color: #fff !important;
    border-color: #8b3a00 !important;
  }
  [data-theme="light"] .routing-guide-btn:active {
    background: linear-gradient(180deg, #7a3300, #5a2400) !important;
  }

  /* ═══════════════════════════════════════════
     ROUTING visual polish pass
     Light theme: ivory blueprint variant
     ═══════════════════════════════════════════ */

  [data-theme="light"] {
    --routing-shell-bg:
      linear-gradient(180deg, rgba(255,249,241,0.96) 0%, rgba(240,235,228,0.98) 44%, rgba(229,223,214,1) 100%);
    --routing-panel-bg:
      linear-gradient(180deg, rgba(252,248,242,0.98) 0%, rgba(238,230,220,0.98) 100%);
    --routing-panel-bg-soft:
      linear-gradient(180deg, rgba(247,242,234,0.98) 0%, rgba(234,226,215,0.98) 100%);
    --routing-panel-border: rgba(139,58,0,0.18);
    --routing-panel-border-strong: rgba(139,58,0,0.32);
    --routing-panel-shadow:
      0 18px 40px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.78);
    --routing-panel-shadow-soft:
      0 12px 26px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.82);
    --routing-status-bg: rgba(139,58,0,0.05);
    --routing-status-border: rgba(139,58,0,0.18);
    --routing-board-bg:
      linear-gradient(180deg, rgba(250,246,239,1) 0%, rgba(230,222,210,1) 100%);
    --routing-board-border: rgba(139,58,0,0.26);
    --routing-cell-bg:
      linear-gradient(180deg, rgba(255,253,248,1) 0%, rgba(241,233,223,1) 100%);
    --routing-cell-border: rgba(139,58,0,0.1);
    --routing-cell-shadow:
      inset 0 1px 0 rgba(255,255,255,0.88),
      inset 0 -1px 0 rgba(139,58,0,0.06);
    --routing-path-alpha: 0.58;
    --routing-path-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.24),
      0 1px 3px rgba(0,0,0,0.08);
    --routing-endpoint-ring: rgba(255,255,255,0.56);
    --routing-endpoint-shadow:
      inset 0 1px 1px rgba(255,255,255,0.34),
      0 0 0 1px rgba(0,0,0,0.08),
      0 8px 14px rgba(0,0,0,0.14);
    --routing-active-ring: rgba(28,25,23,0.92);
    --routing-button-bg:
      linear-gradient(180deg, rgba(253,250,245,1) 0%, rgba(238,229,218,1) 100%);
    --routing-button-border: rgba(139,58,0,0.18);
    --routing-button-text: #2a2018;
    --routing-button-shadow:
      inset 0 1px 0 rgba(255,255,255,0.86),
      0 10px 18px rgba(0,0,0,0.06);
    --routing-overlay-bg: rgba(240,235,228,0.82);
    --routing-sheen: linear-gradient(180deg, rgba(255,255,255,0.55), transparent 48%);
    --routing-muted: rgba(68,64,60,0.92);
  }

  [data-theme="light"] .routing-intro,
  [data-theme="light"] .routing-streak-banner,
  [data-theme="light"] .routing-difficulty-card,
  [data-theme="light"] .routing-practice-card,
  [data-theme="light"] .routing-history-row,
  [data-theme="light"] .routing-puzzle-header,
  [data-theme="light"] .routing-puzzle-status,
  [data-theme="light"] .routing-controls,
  [data-theme="light"] .routing-guide-modal,
  [data-theme="light"] .routing-win-panel {
    background: var(--routing-panel-bg);
    border-color: var(--routing-panel-border);
    box-shadow: var(--routing-panel-shadow-soft);
  }

  [data-theme="light"] .routing-intro {
    background:
      linear-gradient(135deg, rgba(180,83,9,0.08) 0%, transparent 38%),
      var(--routing-panel-bg);
    color: var(--routing-muted);
    box-shadow: var(--routing-panel-shadow);
  }

  [data-theme="light"] .routing-streak-banner {
    background:
      linear-gradient(135deg, rgba(180,83,9,0.08) 0%, transparent 46%),
      var(--routing-panel-bg);
    box-shadow: var(--routing-panel-shadow);
  }

  [data-theme="light"] .routing-streak-num {
    color: #8b3a00;
    text-shadow: 0 0 14px rgba(139,58,0,0.12);
  }

  [data-theme="light"] .routing-streak-label,
  [data-theme="light"] .routing-card-detail,
  [data-theme="light"] .routing-section-title,
  [data-theme="light"] .routing-guide-text,
  [data-theme="light"] .routing-guide-rules,
  [data-theme="light"] .routing-win-stats,
  [data-theme="light"] .routing-puzzle-status {
    color: var(--routing-muted);
  }

  [data-theme="light"] .routing-difficulty-card,
  [data-theme="light"] .routing-practice-card {
    background:
      linear-gradient(145deg, rgba(180,83,9,0.045) 0%, transparent 38%),
      var(--routing-panel-bg);
    box-shadow: var(--routing-panel-shadow);
  }

  [data-theme="light"] .routing-difficulty-card.solved {
    background:
      linear-gradient(145deg, rgba(21,128,61,0.075) 0%, transparent 42%),
      var(--routing-panel-bg);
    border-color: rgba(21,128,61,0.26);
  }

  [data-theme="light"] .routing-card-icon {
    color: #8b3a00;
    background: linear-gradient(180deg, rgba(180,83,9,0.12), rgba(180,83,9,0.03));
    border-color: rgba(139,58,0,0.2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.7),
      0 8px 16px rgba(0,0,0,0.06);
  }

  [data-theme="light"] .routing-card-title,
  [data-theme="light"] .routing-history-date {
    color: #2a2018;
  }

  [data-theme="light"] .routing-card-status {
    background: rgba(139,58,0,0.06);
    border-color: rgba(139,58,0,0.18);
    color: #8b3a00;
  }

  [data-theme="light"] .routing-card-status.solved {
    background: rgba(21,128,61,0.08);
    border-color: rgba(21,128,61,0.22);
    color: #15803d;
  }

  [data-theme="light"] .routing-puzzle-header,
  [data-theme="light"] .routing-puzzle-status,
  [data-theme="light"] .routing-controls,
  [data-theme="light"] .routing-guide-modal,
  [data-theme="light"] .routing-win-panel {
    background:
      linear-gradient(140deg, rgba(180,83,9,0.06) 0%, transparent 44%),
      var(--routing-panel-bg);
  }

  [data-theme="light"] .routing-puzzle-title,
  [data-theme="light"] .routing-guide-title,
  [data-theme="light"] .routing-guide-heading,
  [data-theme="light"] .routing-win-title {
    color: #8b3a00;
  }

  [data-theme="light"] .routing-grid {
    background:
      linear-gradient(90deg, rgba(139,58,0,0.04) 0, rgba(139,58,0,0.04) 1px, transparent 1px, transparent 24px),
      linear-gradient(0deg, rgba(139,58,0,0.04) 0, rgba(139,58,0,0.04) 1px, transparent 1px, transparent 24px),
      var(--routing-board-bg);
    border-color: var(--routing-board-border);
    box-shadow:
      0 24px 40px rgba(0,0,0,0.1),
      inset 0 0 0 1px rgba(255,255,255,0.34),
      inset 0 0 22px rgba(139,58,0,0.05);
  }

  [data-theme="light"] .routing-cell {
    background: var(--routing-cell-bg);
    border-color: var(--routing-cell-border);
    box-shadow: var(--routing-cell-shadow);
  }

  [data-theme="light"] .routing-cell--blocked {
    background:
      repeating-linear-gradient(
        45deg,
        rgba(139,58,0,0.18),
        rgba(139,58,0,0.18) 5px,
        rgba(255,249,241,0.88) 5px,
        rgba(255,249,241,0.88) 10px
      ),
      linear-gradient(180deg, rgba(246,238,228,1), rgba(230,222,210,1));
    border-color: rgba(139,58,0,0.28);
    box-shadow:
      inset 0 0 0 1px rgba(139,58,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.64);
  }

  [data-theme="light"] .routing-endpoint {
    border-color: var(--routing-endpoint-ring);
    box-shadow: var(--routing-endpoint-shadow);
  }

  [data-theme="light"] .routing-path {
    opacity: var(--routing-path-alpha);
    box-shadow: var(--routing-path-shadow);
  }

  [data-theme="light"] .routing-cell--active-trail {
    box-shadow:
      inset 0 0 0 2px var(--routing-active-ring),
      0 0 0 1px rgba(139,58,0,0.14);
  }

  [data-theme="light"] .routing-control-btn {
    background: var(--routing-button-bg);
    border-color: var(--routing-button-border);
    color: var(--routing-button-text);
    box-shadow: var(--routing-button-shadow);
  }

  [data-theme="light"] .routing-practice-select {
    background: linear-gradient(180deg, #fffdf8, #f0e9dd);
    border-color: rgba(139,58,0,0.14);
    color: #2a2018;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
  }

  [data-theme="light"] .routing-practice-play-btn,
  [data-theme="light"] .routing-guide-btn,
  [data-theme="light"] .routing-win-btn {
    background: linear-gradient(180deg, #a24b0a, #7f3905) !important;
    color: #fff !important;
    border-color: #8b3a00 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 14px 24px rgba(139,58,0,0.18) !important;
  }

  [data-theme="light"] .routing-practice-play-btn:active,
  [data-theme="light"] .routing-guide-btn:active,
  [data-theme="light"] .routing-win-btn:active {
    background: linear-gradient(180deg, #7f3905, #6b2d00) !important;
  }

  [data-theme="light"] .routing-history-row {
    background:
      linear-gradient(135deg, rgba(180,83,9,0.05) 0%, transparent 40%),
      var(--routing-panel-bg-soft);
  }

  [data-theme="light"] .routing-pill {
    background: rgba(21,128,61,0.08);
    border-color: rgba(21,128,61,0.2);
    color: #15803d;
  }

  [data-theme="light"] .routing-guide-grid-demo {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.42),
      0 12px 24px rgba(0,0,0,0.08);
  }

  [data-theme="light"] .rg-cell {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.84),
      inset 0 -1px 0 rgba(139,58,0,0.06);
  }

  [data-theme="light"] .rg-dot {
    border-color: rgba(255,255,255,0.54);
  }