/* PORTIS Themes — 12 palettes
 * Layout, type, spacing, shapes are fixed by portis-tokens.css.
 * Only color tokens swap here. Components reference tokens, never raw hex.
 *
 * 7 working themes: wheelhouse-light, wheelhouse-dark, bridge-night,
 *                   office-day, high-contrast, charcoal-pro, lakefront
 * 5 unlockable:     edmund-fitzgerald, nautical-chart, northern-lights,
 *                   arcade-8bit, synthwave
 */

/* ── 1 · WHEELHOUSE LIGHT — default day ───────────────────────────── */
[data-theme="wheelhouse-light"] {
  --bg-base:       #f6f4ef;
  --bg-surface:    #fbfaf6;
  --bg-raised:     #ffffff;
  --bg-sunken:     #ecebe5;
  --border:        #e2dfd6;
  --border-strong: #c8c4b8;
  --text-primary:  #14222e;
  --text-secondary:#445566;
  --text-muted:    #76828f;
  --text-on-accent:#ffffff;
  --accent:        #1a4f7a;
  --accent-soft:   #e3ecf3;
  --accent-strong: #0f3a5c;
  --brand-mark-dot:#c69b3f;
  --status-ok:     #2f7a4f;
  --status-ok-soft:#dff0e3;
  --status-warn:   #b8761a;
  --status-warn-soft:#fbecd0;
  --status-danger: #b8323a;
  --status-danger-soft:#f8dde0;
  --status-info:   #1a4f7a;
  --status-info-soft:#dde9f2;
  --noaa:          #1d6fb8;
  --eccc:          #1a7a4a;
  --row-hover:     rgba(26,79,122,0.05);
  color-scheme: light;
}

/* ── 2 · WHEELHOUSE DARK — default night-on-bridge ────────────────── */
[data-theme="wheelhouse-dark"] {
  --bg-base:       #0c1620;
  --bg-surface:    #131f2c;
  --bg-raised:     #1a2836;
  --bg-sunken:     #07101a;
  --border:        #243446;
  --border-strong: #36475c;
  --text-primary:  #e6edf3;
  --text-secondary:#9aadbf;
  --text-muted:    #6a7f93;
  --text-on-accent:#0c1620;
  --accent:        #6cb0e0;
  --accent-soft:   rgba(108,176,224,0.12);
  --accent-strong: #95c8ed;
  --brand-mark-dot:#d9a960;
  --status-ok:     #5cba7a;
  --status-ok-soft:rgba(92,186,122,0.15);
  --status-warn:   #e8a838;
  --status-warn-soft:rgba(232,168,56,0.15);
  --status-danger: #e87070;
  --status-danger-soft:rgba(232,112,112,0.15);
  --status-info:   #6cb0e0;
  --status-info-soft:rgba(108,176,224,0.12);
  --noaa:          #6cb0e0;
  --eccc:          #5cba7a;
  --row-hover:     rgba(108,176,224,0.06);
  color-scheme: dark;
}

/* ── 3 · BRIDGE NIGHT — true red-only, dark-adapted ────────────────── */
[data-theme="bridge-night"] {
  --bg-base:       #0a0202;
  --bg-surface:    #140404;
  --bg-raised:     #1c0606;
  --bg-sunken:     #050000;
  --border:        #3a0e0e;
  --border-strong: #5a1818;
  --text-primary:  #d97070;
  --text-secondary:#a04545;
  --text-muted:    #6e2828;
  --text-on-accent:#0a0202;
  --accent:        #e85050;
  --accent-soft:   rgba(232,80,80,0.12);
  --accent-strong: #ff7070;
  --brand-mark-dot:#ff9090;
  --status-ok:     #b04040;
  --status-ok-soft:rgba(176,64,64,0.15);
  --status-warn:   #e87070;
  --status-warn-soft:rgba(232,112,112,0.18);
  --status-danger: #ff5050;
  --status-danger-soft:rgba(255,80,80,0.2);
  --status-info:   #c05050;
  --status-info-soft:rgba(192,80,80,0.12);
  --noaa:          #d97070;
  --eccc:          #b04545;
  --row-hover:     rgba(232,80,80,0.06);
  color-scheme: dark;
}

/* ── 4 · OFFICE DAY — bright paper, fluorescent-friendly ──────────── */
[data-theme="office-day"] {
  --bg-base:       #ffffff;
  --bg-surface:    #fafbfc;
  --bg-raised:     #ffffff;
  --bg-sunken:     #f1f3f5;
  --border:        #e5e8ec;
  --border-strong: #c8ced5;
  --text-primary:  #0d1620;
  --text-secondary:#3d4854;
  --text-muted:    #6c7884;
  --text-on-accent:#ffffff;
  --accent:        #2563b8;
  --accent-soft:   #e8f0fa;
  --accent-strong: #1a4d96;
  --brand-mark-dot:#2563b8;
  --status-ok:     #1f7a47;
  --status-ok-soft:#dff0e3;
  --status-warn:   #b06c00;
  --status-warn-soft:#fbecd0;
  --status-danger: #c4282f;
  --status-danger-soft:#f8dde0;
  --status-info:   #2563b8;
  --status-info-soft:#e8f0fa;
  --noaa:          #2563b8;
  --eccc:          #1f7a47;
  --row-hover:     rgba(37,99,184,0.05);
  color-scheme: light;
}

/* ── 5 · HIGH CONTRAST — accessibility / sun glare ─────────────────── */
[data-theme="high-contrast"] {
  --bg-base:       #ffffff;
  --bg-surface:    #ffffff;
  --bg-raised:     #ffffff;
  --bg-sunken:     #f0f0f0;
  --border:        #000000;
  --border-strong: #000000;
  --text-primary:  #000000;
  --text-secondary:#1a1a1a;
  --text-muted:    #404040;
  --text-on-accent:#ffffff;
  --accent:        #0033cc;
  --accent-soft:   #e0e8ff;
  --accent-strong: #001a80;
  --brand-mark-dot:#cc6600;
  --status-ok:     #006400;
  --status-ok-soft:#d0f0d0;
  --status-warn:   #cc6600;
  --status-warn-soft:#ffe8c8;
  --status-danger: #b00000;
  --status-danger-soft:#ffd0d0;
  --status-info:   #0033cc;
  --status-info-soft:#e0e8ff;
  --noaa:          #0033cc;
  --eccc:          #006400;
  --row-hover:     #f0f0f0;
  color-scheme: light;
}

/* ── 6 · CHARCOAL PRO — neutral graphite, brand-lock friendly ────── */
[data-theme="charcoal-pro"] {
  --bg-base:       #1a1a1c;
  --bg-surface:    #232326;
  --bg-raised:     #2c2c30;
  --bg-sunken:     #131315;
  --border:        #34343a;
  --border-strong: #48484f;
  --text-primary:  #ececef;
  --text-secondary:#a8a8b0;
  --text-muted:    #74747c;
  --text-on-accent:#1a1a1c;
  --accent:        #e8e8eb;
  --accent-soft:   rgba(232,232,235,0.08);
  --accent-strong: #ffffff;
  --brand-mark-dot:#d4a050;
  --status-ok:     #6abf85;
  --status-ok-soft:rgba(106,191,133,0.13);
  --status-warn:   #e0a040;
  --status-warn-soft:rgba(224,160,64,0.13);
  --status-danger: #e07070;
  --status-danger-soft:rgba(224,112,112,0.13);
  --status-info:   #80b8e0;
  --status-info-soft:rgba(128,184,224,0.13);
  --noaa:          #80b8e0;
  --eccc:          #6abf85;
  --row-hover:     rgba(255,255,255,0.04);
  color-scheme: dark;
}

/* ── 7 · LAKEFRONT — cool blue-greens, modern ─────────────────────── */
[data-theme="lakefront"] {
  --bg-base:       #f4f7f6;
  --bg-surface:    #fbfdfc;
  --bg-raised:     #ffffff;
  --bg-sunken:     #e9efed;
  --border:        #d8e0dd;
  --border-strong: #b6c2bd;
  --text-primary:  #102a2a;
  --text-secondary:#3a5454;
  --text-muted:    #6c8080;
  --text-on-accent:#ffffff;
  --accent:        #1d7a7e;
  --accent-soft:   #d6ebec;
  --accent-strong: #105a5e;
  --brand-mark-dot:#e0a040;
  --status-ok:     #2a7a52;
  --status-ok-soft:#d6ecdf;
  --status-warn:   #b8761a;
  --status-warn-soft:#fbecd0;
  --status-danger: #b8323a;
  --status-danger-soft:#f8dde0;
  --status-info:   #1d7a7e;
  --status-info-soft:#d6ebec;
  --noaa:          #1d6fb8;
  --eccc:          #2a7a52;
  --row-hover:     rgba(29,122,126,0.05);
  color-scheme: light;
}

/* ─── EASTER EGGS ─────────────────────────────────────────────────── */

/* ── 8 · EDMUND FITZGERALD — somber slate, weathered amber ────────── */
[data-theme="edmund-fitzgerald"] {
  --bg-base:       #1a1c20;
  --bg-surface:    #21242a;
  --bg-raised:     #282b32;
  --bg-sunken:     #14161a;
  --border:        #30343c;
  --border-strong: #454a55;
  --text-primary:  #d8d4c8;
  --text-secondary:#9a9485;
  --text-muted:    #6a6558;
  --text-on-accent:#1a1c20;
  --accent:        #b8893e;
  --accent-soft:   rgba(184,137,62,0.12);
  --accent-strong: #d4a050;
  --brand-mark-dot:#d4a050;
  --status-ok:     #7a9a6a;
  --status-ok-soft:rgba(122,154,106,0.14);
  --status-warn:   #d4a050;
  --status-warn-soft:rgba(212,160,80,0.14);
  --status-danger: #c0605a;
  --status-danger-soft:rgba(192,96,90,0.14);
  --status-info:   #7a9aa8;
  --status-info-soft:rgba(122,154,168,0.12);
  --noaa:          #7a9aa8;
  --eccc:          #7a9a6a;
  --row-hover:     rgba(184,137,62,0.04);
  color-scheme: dark;
}

/* ── 9 · NAUTICAL CHART — chart paper, magenta soundings ──────────── */
[data-theme="nautical-chart"] {
  --bg-base:       #f0e6d0;
  --bg-surface:    #f6ecd6;
  --bg-raised:     #fbf3de;
  --bg-sunken:     #e6dabe;
  --border:        #c4b896;
  --border-strong: #9a8e6e;
  --text-primary:  #2a2010;
  --text-secondary:#5a4828;
  --text-muted:    #8a7a55;
  --text-on-accent:#fbf3de;
  --accent:        #b03a78;
  --accent-soft:   rgba(176,58,120,0.12);
  --accent-strong: #8a2058;
  --brand-mark-dot:#b03a78;
  --status-ok:     #2a6a3a;
  --status-ok-soft:rgba(42,106,58,0.13);
  --status-warn:   #b86a1a;
  --status-warn-soft:rgba(184,106,26,0.13);
  --status-danger: #a02828;
  --status-danger-soft:rgba(160,40,40,0.13);
  --status-info:   #1a5a8a;
  --status-info-soft:rgba(26,90,138,0.13);
  --noaa:          #1a5a8a;
  --eccc:          #2a6a3a;
  --row-hover:     rgba(176,58,120,0.04);
  color-scheme: light;
}

/* ── 10 · NORTHERN LIGHTS — deep indigo, aurora green/violet ──────── */
[data-theme="northern-lights"] {
  --bg-base:       #0a0a24;
  --bg-surface:    #131336;
  --bg-raised:     #1c1c44;
  --bg-sunken:     #050518;
  --border:        #2a2a55;
  --border-strong: #44447a;
  --text-primary:  #e8e6f8;
  --text-secondary:#a8a6d0;
  --text-muted:    #7070a0;
  --text-on-accent:#0a0a24;
  --accent:        #5af0a8;
  --accent-soft:   rgba(90,240,168,0.12);
  --accent-strong: #80ffc0;
  --brand-mark-dot:#c060ff;
  --status-ok:     #5af0a8;
  --status-ok-soft:rgba(90,240,168,0.15);
  --status-warn:   #f0c050;
  --status-warn-soft:rgba(240,192,80,0.15);
  --status-danger: #ff6080;
  --status-danger-soft:rgba(255,96,128,0.15);
  --status-info:   #c060ff;
  --status-info-soft:rgba(192,96,255,0.15);
  --noaa:          #6cb0e0;
  --eccc:          #5af0a8;
  --row-hover:     rgba(90,240,168,0.05);
  color-scheme: dark;
}

/* ── 11 · ARCADE 8-BIT — CRT, neon, pixel borders ─────────────────── */
[data-theme="arcade-8bit"] {
  --bg-base:       #0a0014;
  --bg-surface:    #14002a;
  --bg-raised:     #1c0040;
  --bg-sunken:     #050008;
  --border:        #ff00aa;
  --border-strong: #ff00aa;
  --text-primary:  #00ff80;
  --text-secondary:#80ffc0;
  --text-muted:    #408060;
  --text-on-accent:#0a0014;
  --accent:        #ffff00;
  --accent-soft:   rgba(255,255,0,0.12);
  --accent-strong: #ffff80;
  --brand-mark-dot:#ff00aa;
  --status-ok:     #00ff80;
  --status-ok-soft:rgba(0,255,128,0.18);
  --status-warn:   #ffff00;
  --status-warn-soft:rgba(255,255,0,0.18);
  --status-danger: #ff0040;
  --status-danger-soft:rgba(255,0,64,0.18);
  --status-info:   #00ccff;
  --status-info-soft:rgba(0,204,255,0.18);
  --noaa:          #00ccff;
  --eccc:          #00ff80;
  --row-hover:     rgba(255,255,0,0.06);
  --font-display: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}

/* ── 12 · SYNTHWAVE — vaporwave pastel, Captain TJ sun ride ───────── */
[data-theme="synthwave"] {
  --bg-base:       #1d0e3e;
  --bg-surface:    rgba(42,20,82,0.86);
  --bg-raised:     rgba(58,28,100,0.90);
  --bg-sunken:     #0e0524;
  --border:        #5a2a90;
  --border-strong: #8a4ec0;
  --text-primary:  #f5e6ff;
  --text-secondary:#d8bdf0;
  --text-muted:    #a585c8;
  --text-on-accent:#1d0e3e;
  --accent:        #ff8ec7;
  --accent-soft:   rgba(255,142,199,0.18);
  --accent-strong: #ffb3d9;
  --brand-mark-dot:#9bf6d6;
  --status-ok:     #9bf6d6;
  --status-ok-soft:rgba(155,246,214,0.18);
  --status-warn:   #ffd285;
  --status-warn-soft:rgba(255,210,133,0.18);
  --status-danger: #ff7a9e;
  --status-danger-soft:rgba(255,122,158,0.20);
  --status-info:   #8ee8ff;
  --status-info-soft:rgba(142,232,255,0.18);
  --noaa:          #8ee8ff;
  --eccc:          #9bf6d6;
  --row-hover:     rgba(255,142,199,0.08);
  color-scheme: dark;
}

/* ─── EASTER-EGG DECORATIVE EFFECTS ─────────────────────────────── */
/* ── Arcade 8-bit: CRT scanlines + corner vignette + screen flicker ── */
[data-theme="arcade-8bit"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  /* thick scanlines — clearly visible like an old monitor */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.32) 0 1px, transparent 1px 3px),
    /* subtle green phosphor tint */
    linear-gradient(180deg, rgba(0,255,80,0.025) 0%, transparent 100%);
  mix-blend-mode: multiply;
}
[data-theme="arcade-8bit"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  /* heavy CRT barrel-distortion vignette — very dark at corners, clear centre */
  background:
    radial-gradient(ellipse 95% 95% at 50% 50%, transparent 25%, rgba(0,0,0,0.72) 100%),
    radial-gradient(ellipse 60% 60% at 50% 50%, transparent 70%, rgba(0,20,0,0.18) 100%);
  animation: crt-flicker 8s step-start infinite;
}
@keyframes crt-flicker {
  0%, 82%, 85%, 88%, 92%, 96%, 100% { opacity: 1; }
  83%  { opacity: 0.88; }
  84%  { opacity: 1; }
  86%  { opacity: 0.94; }
  87%  { opacity: 1; }
  89%  { opacity: 0.96; }
  90%  { opacity: 0.78; }
  91%  { opacity: 1; }
  93%  { opacity: 0.92; }
  94%  { opacity: 1; }
  97%  { opacity: 0.95; }
  98%  { opacity: 1; }
}
[data-theme="synthwave"] body {
  background: #050012 fixed;
}
/* All synthwave FX live on .fx-bg and its child elements — see below */

/* ── Phase 134 — Synthwave scene redesign (photo backdrop + Captain TJ neon sign) ──
   Replaces the Phase 125 CSS-only sunset (body::before + body::after) with a
   photo-driven scene on a fixed-position .fx-bg div placed in each dashboard's
   markup. Scene rules ported verbatim from Claude Design/portis-prototype.html
   (L716–836). Mask URL adjusted from prototype-relative path to production
   path (/assets/captain-tj-logo.png — same as Phase 125). */
.fx-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

[data-theme="synthwave"] .fx-bg {
  background:
    /* legibility scrim — darker at top/bottom edges, transparent through the middle */
    linear-gradient(180deg,
      rgba(8,2,20,0.55) 0%,
      rgba(8,2,20,0.22) 18%,
      rgba(8,2,20,0.04) 38%,
      rgba(8,2,20,0)    50%,
      rgba(8,2,20,0.06) 62%,
      rgba(8,2,20,0.28) 82%,
      rgba(8,2,20,0.55) 100%),
    /* the photo */
    url("synthwave-city.png") center/cover no-repeat,
    #0a0218;
  background-attachment: fixed, fixed, fixed;
  image-rendering: auto;
  filter: saturate(1.10) contrast(1.04);
}

/* Kill the legacy CSS-only scene pseudo-elements (the photo subsumes them) */
[data-theme="synthwave"] .fx-bg::before { display: none; }
[data-theme="synthwave"] .fx-bg::after  { display: none; }

/* Captain TJ neon sign — floats just above the city horizon */
.fx-syn-logo { display: none; }
[data-theme="synthwave"] .fx-syn-logo {
  /* Phase 134 patch 2 — lock stationary:
     - position: fixed (not absolute) because the production markup places
       .fx-syn-logo as a SIBLING of .fx-bg, not a child. Prototype nested it
       inside .fx-bg (fixed parent → absolute child acts as fixed). Production
       structure needs fixed directly so the wordmark doesn't scroll with the
       page.
     - animation/transition: none + will-change: auto are defensive guards
       against any inherited transition rules from a broad transition: all
       elsewhere in the cascade. */
  display: block; position: fixed;
  left: 50%; top: clamp(96px, 16vh, 200px);
  transform: translateX(-50%);
  width: clamp(260px, 26vw, 380px);
  height: clamp(72px, 7.2vw, 104px);
  pointer-events: none;
  z-index: 3;
  animation: none;
  transition: none;
  will-change: auto;
  /* chrome/sunset gradient fill, masked by the wordmark —
     mirrors the sun's yellow→peach→hot-pink→magenta vertical ramp */
  background:
    linear-gradient(180deg,
      #fff5c8 0%,
      #ffe680 14%,
      #ffc060 32%,
      #ff8aa8 58%,
      #ff3d8a 84%,
      #c41a7e 100%);
  -webkit-mask: url("/assets/captain-tj-logo.png") no-repeat center / contain;
          mask: url("/assets/captain-tj-logo.png") no-repeat center / contain;
  /* layered hot-pink halo with a tiny cyan kicker, matched to backdrop palette */
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.55))
    drop-shadow(0 0 4px rgba(255,200,220,0.85))
    drop-shadow(0 0 10px rgba(255,112,176,0.85))
    drop-shadow(0 0 22px rgba(255,61,138,0.70))
    drop-shadow(0 0 36px rgba(196,26,126,0.55))
    drop-shadow(0 0 6px rgba(112,224,255,0.45));
}

/* ── Edmund Fitzgerald: drifting fog + amber distress glow ── */
[data-theme="edmund-fitzgerald"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  /* heavy fog bank rolling up from the hull — noticeably grey-blue */
  background:
    radial-gradient(ellipse 280% 80% at 50% 120%, rgba(122,154,168,0.38) 0%, transparent 55%),
    radial-gradient(ellipse 200% 55% at 10% 108%, rgba(100,130,155,0.30) 0%, transparent 52%),
    radial-gradient(ellipse 180% 50% at 90% 112%, rgba(184,137,62,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 120% 35% at 65% 95%,  rgba(80,110,140,0.15) 0%, transparent 45%);
  animation: fitz-fog 30s ease-in-out infinite alternate;
}
[data-theme="edmund-fitzgerald"] body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0;
  height: 60vh; pointer-events: none; z-index: 0;
  /* amber/copper distress glow at the waterline — the Fitzgerald's running lights */
  background: linear-gradient(
    to top,
    rgba(184,137,62,0.22) 0%,
    rgba(160,120,50,0.16) 15%,
    rgba(122,154,168,0.12) 40%,
    transparent 100%
  );
  animation: fitz-fog 22s ease-in-out infinite alternate-reverse;
}
@keyframes fitz-fog {
  0%   { opacity: 0.70; transform: translateX(-3.5%) scaleX(1.02); }
  50%  { opacity: 0.95; transform: translateX(1%)   scaleX(0.99); }
  100% { opacity: 1;    transform: translateX(3.5%) scaleX(1.01); }
}

/* Kill the SVG city / beams / haze layers — the photo subsumes them all */
[data-theme="synthwave"] .fx-syn-city,
[data-theme="synthwave"] .fx-syn-city--near,
[data-theme="synthwave"] .fx-syn-city--far,
[data-theme="synthwave"] .fx-syn-beams,
[data-theme="synthwave"] .fx-syn-haze { display: none !important; }

/* Translucent chrome — rail/topbar/stat/card panels get a slight blur over the
   photo backdrop so the photo bleeds through subtly while text stays legible.
   Ported from the prototype (the production CSS didn't have these from
   Phase 125 — Tim's prompt assumed they existed but the source is the
   prototype). */
[data-theme="synthwave"] .rail,
[data-theme="synthwave"] .topbar,
[data-theme="synthwave"] .stat,
[data-theme="synthwave"] .card {
  background-color: color-mix(in oklab, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* ── Northern Lights: vivid animated aurora borealis curtains ── */
[data-theme="northern-lights"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  /* bright aurora band — clearly visible greens + violets sweeping the sky */
  background:
    radial-gradient(ellipse 260% 52% at 8%  8%,  rgba(60,240,148,0.42), transparent 58%),
    radial-gradient(ellipse 220% 42% at 74%  6%,  rgba(200,80,255,0.38), transparent 58%),
    radial-gradient(ellipse 190% 32% at 40% 20%,  rgba(100,240,255,0.28), transparent 52%),
    radial-gradient(ellipse 140% 22% at 88% 12%,  rgba(60,240,148,0.22), transparent 48%);
  animation: aurora-a 14s ease-in-out infinite alternate;
}
[data-theme="northern-lights"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  /* second curtain — slightly different colours, slower, offset timing */
  background:
    radial-gradient(ellipse 230% 38% at 55% 5%,  rgba(200,80,255,0.34), transparent 58%),
    radial-gradient(ellipse 180% 30% at 22% 14%,  rgba(60,240,148,0.30), transparent 52%),
    radial-gradient(ellipse 160% 26% at 82% 18%,  rgba(100,240,255,0.22), transparent 50%);
  animation: aurora-b 20s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-a {
  0%   { opacity: 0.55; transform: translateX(-8%)  scaleY(0.85); }
  33%  { opacity: 1;    transform: translateX(3%)   scaleY(1.25); }
  66%  { opacity: 0.78; transform: translateX(-2%)  scaleY(1.05); }
  100% { opacity: 0.65; transform: translateX(-6%)  scaleY(0.90); }
}
@keyframes aurora-b {
  0%   { opacity: 0.60; transform: translateX(6%)   scaleY(1.00); }
  40%  { opacity: 1;    transform: translateX(-4%)  scaleY(1.20); }
  70%  { opacity: 0.80; transform: translateX(2%)   scaleY(0.95); }
  100% { opacity: 0.60; transform: translateX(5%)   scaleY(1.10); }
}
/* ── Nautical Chart: bathymetric contour lines + chart grid ── */
[data-theme="nautical-chart"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  /* Clearly visible depth contours — bold like a real paper chart */
  background-image:
    repeating-radial-gradient(
      ellipse 150% 120% at 50% 50%,
      transparent 0px, transparent 56px,
      rgba(176,58,120,0.16) 56px, rgba(176,58,120,0.16) 58px
    ),
    repeating-radial-gradient(
      ellipse 110% 90% at 10% 85%,
      transparent 0px, transparent 40px,
      rgba(26,90,138,0.14) 40px, rgba(26,90,138,0.14) 41.5px
    ),
    repeating-radial-gradient(
      ellipse 90% 75% at 88% 15%,
      transparent 0px, transparent 34px,
      rgba(176,58,120,0.12) 34px, rgba(176,58,120,0.12) 35.5px
    ),
    repeating-radial-gradient(
      ellipse 130% 100% at 20% 30%,
      transparent 0px, transparent 50px,
      rgba(26,90,138,0.10) 50px, rgba(26,90,138,0.10) 51.5px
    );
}
[data-theme="nautical-chart"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  /* Bold chart graticule grid — clearly visible lat/lon lines */
  background-image:
    linear-gradient(rgba(176,58,120,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,58,120,0.12) 1px, transparent 1px),
    /* secondary finer grid */
    linear-gradient(rgba(26,90,138,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,90,138,0.06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
}