/* Themes: each sets the design tokens from style.css on <html data-theme>.
   Animated themes also get a backdrop layer (components/backdrop.rs). */

/* ---------- static themes ---------- */
[data-theme="dusk"] {
  --bg: #17110d; --bg-2: #1d1510; --panel: #241a14; --panel-2: #2e2119; --line: #45321f; --line-strong: #6b4a2c;
  --text: #f4e9dc; --text-2: #dccbb6; --muted: #a58f78; --accent: #ff8a3d; --accent-2: #ffd166; --on-accent: #1a0f06;
  --hero: #3a2414; --glow: #3a2414; --chrome: rgba(23, 17, 13, .9);
}
[data-theme="swamp"] {
  --bg: #0c130e; --bg-2: #101912; --panel: #142018; --panel-2: #1a2a1f; --line: #26402d; --line-strong: #3c6347;
  --text: #e3f0e4; --text-2: #c2d6c4; --muted: #86a08a; --accent: #7ee05a; --accent-2: #e8d44d; --on-accent: #0a1406;
  --hero: #17321d; --glow: #17321d; --chrome: rgba(12, 19, 14, .9);
}
[data-theme="raider"] {
  --bg: #120d0e; --bg-2: #171113; --panel: #1e1517; --panel-2: #271b1e; --line: #3d2a2e; --line-strong: #5e3f45;
  --text: #f3e6e8; --text-2: #d8c3c6; --muted: #a08a8e; --accent: #ff4d5e; --accent-2: #ffb347; --on-accent: #1a0507;
  --hero: #3a1419; --glow: #3a1419; --chrome: rgba(18, 13, 14, .9);
}
[data-theme="oled"] {
  --bg: #000000; --bg-2: #050506; --panel: #0d0d0f; --panel-2: #151518; --line: #26262b; --line-strong: #3a3a42;
  --text: #f2f2f5; --text-2: #c9c9d1; --muted: #8a8a96; --accent: #4ad6ff; --accent-2: #ffc24a; --on-accent: #000000;
  --hero: #0b1820; --glow: #000000; --chrome: rgba(0, 0, 0, .88);
}
[data-theme="daylight"] {
  --bg: #eef3f8; --bg-2: #e6edf4; --panel: #ffffff; --panel-2: #f3f6fa; --line: #d3dce7; --line-strong: #aebccc;
  --text: #14202e; --text-2: #2c3b4d; --muted: #5b6b80; --accent: #0b8ec2; --accent-2: #c97a00; --on-accent: #ffffff;
  --keep: #d9481f; --craft: #b86e00; --safe: #14935a;
  --r-common: #6b7684; --r-uncommon: #1f9a4f; --r-rare: #1f6fd1; --r-epic: #8a3fd6; --r-legendary: #c47f00;
  --hero: #dbe9f6; --glow: #d6e7f7; --chrome: rgba(255, 255, 255, .9); --scrim: rgba(20, 32, 46, .45);
}
[data-theme="contrast"] {
  --bg: #000000; --bg-2: #000000; --panel: #000000; --panel-2: #111111; --line: #ffffff; --line-strong: #ffffff;
  --text: #ffffff; --text-2: #ffffff; --muted: #e0e0e0; --accent: #ffff00; --accent-2: #00ffff; --on-accent: #000000;
  --keep: #ff6b6b; --craft: #ffd000; --safe: #4dff88;
  --hero: #000000; --glow: #000000; --chrome: #000000; --scrim: rgba(0, 0, 0, .85);
}
[data-theme="contrast"] a { text-decoration: underline; }

/* ---------- animated themes (panels slightly see-through) ---------- */
[data-theme="pendola"] {
  --bg: #0a1420; --bg-2: #0d1928e6; --panel: #122233e6; --panel-2: #183048; --line: #24405c; --line-strong: #3b6688;
  --text: #eaf6ff; --text-2: #c8def0; --muted: #8aa7c0; --accent: #9fd8ff; --accent-2: #ffffff; --on-accent: #06121e;
  --hero: #15304a; --glow: #1a3a5a; --chrome: rgba(10, 20, 32, .78);
}
[data-theme="patrol"] {
  --bg: #0d1114; --bg-2: #11171be6; --panel: #161d22e6; --panel-2: #1d262c; --line: #2b3840; --line-strong: #46606b;
  --text: #e8eef0; --text-2: #c6d2d6; --muted: #8b9ca3; --accent: #ff5a36; --accent-2: #3ee6c1; --on-accent: #170804;
  --hero: #2a1a14; --glow: #2a1a14; --chrome: rgba(13, 17, 20, .8);
}
[data-theme="aurora"] {
  --bg: #0b0b1a; --bg-2: #101024e0; --panel: #15152be0; --panel-2: #1c1c38; --line: #2c2c52; --line-strong: #46467a;
  --text: #ecebff; --text-2: #cfcdf0; --muted: #9592c0; --accent: #8c7bff; --accent-2: #4dffc3; --on-accent: #0b0620;
  --hero: #221a4a; --glow: #1a1640; --chrome: rgba(11, 11, 26, .78);
}
[data-theme="embers"] {
  --bg: #140c08; --bg-2: #1a100be6; --panel: #21150fe6; --panel-2: #2b1c14; --line: #45291b; --line-strong: #6e412a;
  --text: #f8ebe2; --text-2: #e2cbbb; --muted: #b0907c; --accent: #ff7a2f; --accent-2: #ffc857; --on-accent: #1a0802;
  --hero: #3d1d0e; --glow: #3d1d0e; --chrome: rgba(20, 12, 8, .8);
}
[data-theme="rain"] {
  --bg: #0a1012; --bg-2: #0d1517e6; --panel: #11191ce6; --panel-2: #172327; --line: #233438; --line-strong: #3a5559;
  --text: #e4f2ee; --text-2: #c4dad4; --muted: #86a39c; --accent: #4fe3a1; --accent-2: #c6f35a; --on-accent: #04140c;
  --hero: #12302a; --glow: #102824; --chrome: rgba(10, 16, 18, .8);
}

[data-theme="sightings"] {
  --bg: #0b0d10; --bg-2: #101317e0; --panel: #14181dd9; --panel-2: #1b2127; --line: #2a323a; --line-strong: #45515c;
  --text: #edf1f4; --text-2: #cbd3da; --muted: #8e9aa5; --accent: #ff6a3d; --accent-2: #7fd6ff; --on-accent: #160803;
  --hero: #2a1a14; --glow: #0b0d10; --chrome: rgba(11, 13, 16, .78);
}

/* ---------- backdrop layer ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Over the UI but under the mobile tab bar and dialogs; never takes clicks. */
.backdrop-front { z-index: 35; }

/* Pendola Snow: three parallax layers of flakes + peaks. Tiles loop seamlessly. */
.backdrop-snow .sky-glow { position: absolute; inset: 0; background: radial-gradient(1200px 500px at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.backdrop-snow .peaks { position: absolute; left: 0; bottom: 0; width: 100%; height: 26vh; }
.peaks .far { fill: color-mix(in srgb, var(--panel-2) 85%, var(--accent)); opacity: .55; }
.peaks .near { fill: var(--bg); opacity: .9; }
.peaks .snowcap { fill: var(--text); opacity: .5; }
.snow { position: absolute; top: calc(var(--tile) * -2); left: calc(var(--tile) * -1); right: 0; bottom: 0; animation: fall var(--speed) linear infinite; }
.snow-far { --tile: 200px; --speed: 26s; --dx: 0px; opacity: .45;
  background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60px 150px, #fff, transparent), radial-gradient(1px 1px at 170px 190px, #fff, transparent);
  background-size: 200px 200px; }
.snow-mid { --tile: 300px; --speed: 17s; --dx: 300px; opacity: .65;
  background-image: radial-gradient(2px 2px at 50px 60px, #fff, transparent), radial-gradient(2.5px 2.5px at 200px 120px, #fff, transparent),
    radial-gradient(2px 2px at 120px 260px, #fff, transparent);
  background-size: 300px 300px; }
.snow-near { --tile: 400px; --speed: 10s; --dx: 400px; opacity: .55; filter: blur(.4px);
  background-image: radial-gradient(3.5px 3.5px at 80px 90px, #fff, transparent), radial-gradient(3px 3px at 300px 220px, #fff, transparent),
    radial-gradient(4px 4px at 180px 360px, #fff, transparent);
  background-size: 400px 400px; }
@keyframes fall { to { transform: translate3d(var(--dx), calc(var(--tile) * 2), 0); } }

/* ARC Patrol: original walker crossing the horizon, drones overhead. */
.backdrop-patrol .horizon-grid { position: absolute; left: -10%; right: -10%; bottom: 0; height: 34vh;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px);
  background-size: 60px 30px; transform: perspective(400px) rotateX(55deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent); animation: grid-run 4s linear infinite; }
@keyframes grid-run { to { background-position: -60px 0; } }
.patrol-track { position: absolute; left: 14vw; bottom: -6px; width: clamp(110px, 9vw, 170px); filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); animation: walk-across 60s linear infinite; }
@keyframes walk-across { from { transform: translateX(calc(-14vw - 260px)); } to { transform: translateX(calc(86vw + 40px)); } }
.walker { width: 100%; overflow: visible; }
.walker .hull { fill: color-mix(in srgb, var(--panel-2) 70%, var(--text-2)); stroke: var(--line-strong); stroke-width: 3; stroke-linejoin: round; }
.walker .underside { fill: color-mix(in srgb, var(--panel-2) 70%, #000); stroke: var(--line-strong); stroke-width: 2; }
.walker .hatch { fill: color-mix(in srgb, var(--panel-2) 55%, var(--text-2)); stroke: var(--line-strong); stroke-width: 3; stroke-linejoin: round; }
.walker .seam { fill: none; stroke: var(--line-strong); stroke-width: 1.5; opacity: .6; }
.walker .vent { fill: var(--accent); opacity: .45; }
.walker .sensor-block { fill: color-mix(in srgb, var(--panel-2) 60%, #000); stroke: var(--line-strong); stroke-width: 2.5; }
.walker .eye { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); animation: blink 5s infinite; }
.walker .scan-cone { fill: color-mix(in srgb, var(--accent) 22%, transparent); transform-box: fill-box; transform-origin: left center; animation: scan 3s ease-in-out infinite; }
.walker .leg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.walker .thigh { stroke: var(--text-2); stroke-width: 9; }
.walker .shin { stroke: var(--text-2); stroke-width: 7; }
.walker .foot { stroke: var(--line-strong); stroke-width: 6; }
.walker .joint, .walker .hip { fill: var(--accent-2); stroke: var(--panel-2); stroke-width: 2; }
.walker .leg.far { opacity: .55; }
.walker .leg { transform-box: view-box; animation: step 1.1s ease-in-out infinite alternate; }
.walker .leg-1, .walker .leg-2 { animation-delay: -.55s; }
.walker .walker-body { animation: bob .55s ease-in-out infinite alternate; }
@keyframes step { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes bob { to { transform: translateY(3px); } }
@keyframes scan { 0%, 100% { opacity: .25; transform: scaleX(.6); } 50% { opacity: .8; transform: scaleX(1.1); } }
@keyframes blink { 0%, 46%, 50%, 100% { opacity: 1; } 48% { opacity: .1; } }
.drone { position: absolute; width: clamp(50px, 5vw, 80px); animation: fly var(--fly) linear infinite; animation-delay: var(--delay); }
.drone-1 { top: 70px; left: 8vw; --fly: 38s; --delay: 0s; }
.drone-2 { top: 34%; left: 60vw; --fly: 55s; --delay: -22s; }
.drone-3 { top: 58%; left: 35vw; --fly: 70s; --delay: -45s; opacity: .6; transform: scale(.7); }
@keyframes fly { from { translate: calc(-1 * var(--x0, 40vw) - 120px) 0; } to { translate: 110vw 0; } }
.drone-svg { width: 100%; animation: hover 2.4s ease-in-out infinite alternate; }
.drone-svg .hull { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 2; }
.drone-svg .arm { stroke: var(--line-strong); stroke-width: 3; }
.drone-svg .rotor { fill: color-mix(in srgb, var(--text-2) 40%, transparent); animation: rotor .12s linear infinite alternate; }
.drone-svg .eye { fill: var(--accent-2); filter: drop-shadow(0 0 4px var(--accent-2)); animation: blink 2.2s infinite; }
@keyframes hover { to { transform: translateY(10px); } }
@keyframes rotor { to { opacity: .35; } }

/* Aurora: drifting colour curtains over a star field. */
.aurora { position: absolute; width: 80vw; height: 55vh; border-radius: 50%; filter: blur(70px); opacity: .32; mix-blend-mode: screen; animation: drift 28s ease-in-out infinite alternate; }
.aurora.a1 { top: -15vh; left: -10vw; background: radial-gradient(closest-side, var(--accent), transparent); }
.aurora.a2 { top: 5vh; right: -20vw; background: radial-gradient(closest-side, var(--accent-2), transparent); animation-duration: 36s; animation-delay: -12s; }
.aurora.a3 { bottom: -20vh; left: 20vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 50%, var(--accent-2)), transparent); animation-duration: 44s; animation-delay: -20s; }
@keyframes drift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(8vw, 6vh) rotate(12deg) scale(1.15); } 100% { transform: translate(-6vw, 2vh) rotate(-8deg) scale(.95); } }
.stars { position: absolute; inset: 0; opacity: .6; animation: twinkle 6s ease-in-out infinite alternate;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 30%, #fff, transparent), radial-gradient(1px 1px at 75% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 90%, #fff, transparent);
  background-size: 420px 420px; }
@keyframes twinkle { to { opacity: .25; } }

/* Ember Storm: sparks rising from a heat glow. */
.backdrop-embers .heat { position: absolute; left: 0; right: 0; bottom: 0; height: 40vh; background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--accent) 28%, transparent), transparent); animation: flicker 3s ease-in-out infinite alternate; }
@keyframes flicker { 30% { opacity: .7; } 60% { opacity: 1; } 100% { opacity: .8; } }
.embers { position: absolute; top: 0; left: calc(var(--tile) * -1); right: 0; bottom: calc(var(--tile) * -2); animation: rise var(--speed) linear infinite; }
.embers-far { --tile: 260px; --speed: 22s; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 40px 60px, var(--accent-2), transparent), radial-gradient(1.5px 1.5px at 190px 140px, var(--accent), transparent),
    radial-gradient(1px 1px at 110px 230px, var(--accent-2), transparent);
  background-size: 260px 260px; }
.embers-near { --tile: 380px; --speed: 13s; opacity: .6; filter: drop-shadow(0 0 3px var(--accent));
  background-image: radial-gradient(2.5px 2.5px at 90px 80px, var(--accent), transparent), radial-gradient(2px 2px at 280px 200px, var(--accent-2), transparent),
    radial-gradient(3px 3px at 170px 330px, var(--accent), transparent);
  background-size: 380px 380px; }
@keyframes rise { to { transform: translate3d(var(--tile), calc(var(--tile) * -2), 0); } }

/* Acid Rain: fast streaks and the odd lightning flash. */
.rain { position: absolute; top: calc(var(--tile) * -2); left: calc(var(--tile) * -1); right: 0; bottom: 0; animation: pour var(--speed) linear infinite; }
.rain-far { --tile: 180px; --speed: 1.6s; opacity: .35;
  background-image: radial-gradient(.8px 12px at 30px 40px, var(--accent), transparent), radial-gradient(.8px 10px at 120px 110px, var(--accent), transparent),
    radial-gradient(.8px 12px at 80px 160px, var(--accent), transparent);
  background-size: 180px 180px; }
.rain-near { --tile: 260px; --speed: .9s; opacity: .28;
  background-image: radial-gradient(1.2px 20px at 60px 50px, var(--text-2), transparent), radial-gradient(1.2px 18px at 200px 170px, var(--accent), transparent);
  background-size: 260px 260px; }
@keyframes pour { to { transform: translate3d(calc(var(--tile) * .5), calc(var(--tile) * 2), 0); } }
.lightning { position: absolute; inset: 0; background: color-mix(in srgb, var(--text) 18%, transparent); opacity: 0; animation: flash 11s infinite; }
@keyframes flash { 0%, 90%, 93%, 100% { opacity: 0; } 91% { opacity: .9; } 91.5% { opacity: .1; } 92% { opacity: .6; } }

/* ARC Sightings: bundled screenshots cross-fade with a slow zoom (6 x 9s cycle). */
.sighting { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0;
  filter: saturate(.75) contrast(1.05); animation: sighting 54s linear infinite; animation-delay: calc(var(--i) * 9s - 2s); }
@keyframes sighting {
  0% { opacity: 0; transform: scale(1.12) translate(1%, 0); }
  4% { opacity: .55; }
  17% { opacity: .55; }
  21% { opacity: 0; transform: scale(1) translate(-1%, -1%); }
  100% { opacity: 0; }
}
.sighting-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 80%, transparent) 70%, var(--bg)),
  radial-gradient(120% 90% at 70% 20%, transparent, color-mix(in srgb, var(--bg) 70%, transparent)); }
.scanlines { position: absolute; inset: 0; opacity: .25; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .35) 2px 3px); }
/* Frozen (motion off): show the first screenshot only. */
[data-motion="off"] .sighting:first-child { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .sighting:first-child { opacity: .5; } }

/* Motion off (setting) or reduced motion (system): freeze every backdrop. */
[data-motion="off"] .backdrop *, [data-motion="off"] .tp-anim { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .backdrop *, .tp-anim, .live-pill .dot { animation: none !important; }
}

/* ---------- settings page ---------- */
.settings-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.settings-card.wide { grid-column: 1 / -1; }
.settings-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.settings-head .svg-icon { font-size: 1.3rem; color: var(--accent); }
.settings-form { max-width: 440px; margin: 8px 0 14px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; text-align: left; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, transform .15s; }
.theme-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.theme-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.theme-preview { position: relative; height: 96px; display: grid; grid-template-columns: 22% 1fr; overflow: hidden; border-radius: 8px; background: var(--sw-bg); border: 1px solid color-mix(in srgb, var(--sw-accent) 25%, transparent); }
.tp-side { background: var(--sw-panel); border-right: 2px solid var(--sw-accent); }
.tp-main { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.tp-bar { height: 10px; border-radius: 4px; background: var(--sw-panel); }
.tp-card { flex: 1; border-radius: 5px; background: var(--sw-panel); border-left: 3px solid var(--sw-accent2); }
.tp-anim { position: absolute; inset: -40px 0 0 0; animation: tp-float 3s linear infinite;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, var(--sw-accent), transparent), radial-gradient(1.5px 1.5px at 70% 60%, var(--sw-accent2), transparent),
    radial-gradient(2px 2px at 45% 80%, var(--sw-accent), transparent), radial-gradient(1.5px 1.5px at 85% 20%, var(--sw-accent2), transparent);
  background-size: 100% 40px; }
@keyframes tp-float { to { transform: translateY(40px); } }
.theme-meta { display: flex; align-items: center; gap: 8px; }
.theme-check { margin-left: auto; color: var(--accent); }
.pill.anim { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.theme-blurb { font-size: .8rem; }
.toggle-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { position: relative; width: 40px; height: 22px; border-radius: 99px; background: var(--line); transition: background .2s; flex-shrink: 0; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.switch input:checked + .switch-ui { background: var(--accent); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); background: var(--on-accent); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 820px) {
  /* Keep the walker above the bottom tab bar. */
  .patrol-track { bottom: calc(58px + env(safe-area-inset-bottom)); width: 96px; }
}