@charset "UTF-8";

@property --stranger-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;
  --orange: #f47d30;
  --orbit: rgba(237, 240, 238, .36);
  --system-size: min(115vmin, 115vw);
  --system-scale: .8;
  --clock-size: 52px;
  --background-color: #030405;
  --orbit-opacity: .36;
  --trail-color: rgba(237, 240, 238, var(--orbit-opacity));
}

@font-face {
  font-family: 'ITC Serif Gothic';
  src: url('./assets/fonts/ITCSerifGothic-ExtraBold.otf') format('opentype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--background-color); }
img { display: block; user-select: none; -webkit-user-drag: none; }

.wallpaper {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden; isolation: isolate;
  background: var(--background-color);
}
.loop-blackout .wallpaper::after,
.loop-restarting .wallpaper::after {
  content: ""; position: absolute; z-index: 20; inset: 0;
  pointer-events: none; background: #000;
  opacity: var(--loop-cover-opacity, 0);
}
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.explosion-particles {
  position: absolute; z-index: 6; inset: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.loop-finale .sun-glow {
  z-index: 9;
  opacity: var(--loop-sun-opacity, 1);
}
.loop-finale .clock,
.loop-finale .orbit,
.loop-finale .interloper-orbit,
.loop-finale .interloper:not(.interloper--swallowed),
.loop-finale .interloper-beam,
.loop-finale .white-hole { opacity: var(--loop-world-opacity, 1); }
.loop-finale .stranger-wrap { opacity: var(--loop-stranger-opacity, 1); }
.loop-finale .meteorite-layer { opacity: var(--loop-world-opacity, 1); }

.clock {
  position: absolute; z-index: 5;
  top: var(--clock-top, 2.5%); left: var(--clock-left, 50%);
  transform: translateX(-50%);
  color: var(--orange); text-align: center;
  text-shadow: 0 0 20px rgba(244, 125, 48, .2);
  user-select: none;
}
.loop-finale .clock { z-index: 1; }
.clock__time {
  display: block;
  font: 800 var(--clock-size)/1.2 'ITC Serif Gothic', Georgia, serif;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.loop-countdown {
  display: none; position: absolute; z-index: 5;
  right: clamp(16px, 2.5vw, 36px);
  bottom: clamp(56px, 7vh, 84px);
  color: var(--orange);
  font: 800 clamp(14px, calc(var(--clock-size) * .55), 28px)/1.2 'ITC Serif Gothic', Georgia, serif;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(244, 125, 48, .2);
  user-select: none; pointer-events: none;
}
/* Corner countdown readout removed — it sat right on top of the new
   settings gear and duplicated the main dial clock. loop.js still tracks
   the countdown internally (the supernova trigger logic is unaffected),
   it just no longer prints a second clock-like readout on screen. */

/* --- Orrery-style clock dial --------------------------------------------- */
.clock__dial {
  position: relative;
  width: calc(var(--clock-size) * 3.3);
  height: calc(var(--clock-size) * 3.3);
  margin: 0 auto;
}
.clock__ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.clock__ring-track {
  fill: none;
  stroke: var(--trail-color);
  stroke-width: 1.2;
}
.clock__ring-progress {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(244, 125, 48, .65));
  transition: stroke-dashoffset .4s linear;
}
.clock__ticks { position: absolute; inset: 0; }
.clock__tick { position: absolute; inset: 0; }
.clock__tick::before {
  content: "";
  position: absolute; top: 5%; left: 50%;
  width: 2px; height: 7%;
  border-radius: 1px;
  background: rgba(237, 240, 238, .38);
  transform: translateX(-50%);
  transition: background .25s ease, box-shadow .25s ease;
}
.clock__tick--active::before {
  background: var(--orange);
  box-shadow: 0 0 8px rgba(244, 125, 48, .85);
}
.clock__comet-orbit { position: absolute; inset: 0; }
.clock__comet {
  position: absolute; top: 1.5%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--orange) 70%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 9px 3px rgba(244, 125, 48, .8), 0 0 20px 7px rgba(244, 125, 48, .3);
}
.clock__readout {
  position: absolute; inset: 9%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .25em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 125, 48, .07), transparent 70%);
}
.clock__date {
  font: 700 clamp(9px, calc(var(--clock-size) * .2), 13px)/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .18em;
  color: rgba(237, 240, 238, .55);
  text-shadow: none;
}

.solar-system {
  position: absolute; z-index: 2; top: 52%; left: 50%;
  width: var(--system-size); height: var(--system-size);
  transform: translate(-50%, -50%) scale(var(--system-scale));
  pointer-events: none;
  /* The wide ellipse crosses a chord of the Sun near its closest point. */
  --stranger-radius-x: calc(var(--system-size) * var(--stranger-radius-x-factor, .72));
  --stranger-radius-y: calc(var(--system-size) * var(--stranger-radius-y-factor, 1.08));
  --stranger-impact: calc(var(--system-size) * var(--stranger-impact-factor, .03));
  --stranger-cos: 1;
  --stranger-sin: 0;
  --stranger-orbit-x: calc(var(--stranger-impact) + var(--stranger-radius-x) * (1 - cos(var(--stranger-angle))));
  --stranger-orbit-y: calc(var(--stranger-radius-y) * sin(var(--stranger-angle)));
  --stranger-x: calc(var(--stranger-orbit-x) * var(--stranger-cos) - var(--stranger-orbit-y) * var(--stranger-sin));
  --stranger-y: calc(var(--stranger-orbit-x) * var(--stranger-sin) + var(--stranger-orbit-y) * var(--stranger-cos));
  animation: stranger-orbit 60s linear -25.2s infinite;
}
.orbit-paths {
  position: absolute; z-index: 0; top: -50%; left: -50%;
  width: 200%; height: 200%; pointer-events: none;
}
.loop-finale .orbit-paths { opacity: var(--loop-world-opacity, 1); }
.orbit {
  position: absolute; top: 50%; left: 50%;
  width: var(--diameter); height: var(--diameter);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit--twins { --diameter: 25%; --start: -4deg; --period: 75s; }
.orbit--timber { --diameter: 40%; --start: 132deg; --period: 115s; }
.orbit--brittle { --diameter: 60%; --start: 26deg; --period: 155s; }
.orbit--giants { --diameter: 78%; --start: -42deg; --period: 205s; }
.orbit--bramble { --diameter: 96%; --start: 48deg; --period: 265s; }
.orbit--beacon { --diameter: 118%; --start: 154deg; --period: 330s; }
.outer-beacon {
  position: absolute; z-index: 3; top: 50%; left: 100%;
  width: 22px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
  cursor: default;
}
.outer-beacon::before,
.outer-beacon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none;
}
.outer-beacon::before {
  z-index: 1; width: 4px; height: 4px;
  background: #fff;
  box-shadow: 0 0 3px .5px #fff, 0 0 10px 4px rgba(255, 92, 92, .95);
}
.outer-beacon::after {
  width: 32px; height: 32px;
  background: radial-gradient(circle, rgba(255, 68, 68, .78) 0%, rgba(224, 22, 37, .42) 33%, transparent 72%);
  filter: blur(3px);
  animation: beacon-glow 5s ease-in-out infinite;
}

.sun-glow {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: 18%; height: 18%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 72, 24, calc(.55 * var(--loop-sun-red, 0))),
    rgba(255, 56, 20, calc(.19 * var(--loop-sun-red, 0))) 48%, transparent 74%);
  filter: blur(14px);
}
.sun-glow::before,
.sun-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
}
.sun-glow::before {
  background: radial-gradient(circle, rgba(255, 125, 24, .45), rgba(255, 125, 24, .15) 48%, transparent 74%);
  opacity: calc(1 - var(--loop-sun-red, 0) - var(--loop-sun-blue, 0));
}
.sun-glow::after {
  background: radial-gradient(circle, rgba(80, 205, 255, .65), rgba(50, 150, 255, .25) 48%, transparent 78%);
  opacity: var(--loop-sun-blue, 0);
}
.sun {
  position: absolute; z-index: 3; top: 50%; left: 50%;
  width: 14%; height: 14%;
  isolation: isolate;
  transform: translate(-50%, -50%) scale(calc(var(--object-scale, 1) * var(--loop-sun-scale, 1)));
  -webkit-mask-image: radial-gradient(
    circle calc(var(--system-size) * .0768 * var(--loop-sun-inverse-scale, 1)) at
    calc(50% + var(--stranger-x) * var(--loop-sun-inverse-scale, 1))
    calc(50% + var(--stranger-y) * var(--loop-sun-inverse-scale, 1)),
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 0%,
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 75%, #fff 100%);
  mask-image: radial-gradient(
    circle calc(var(--system-size) * .0768 * var(--loop-sun-inverse-scale, 1)) at
    calc(50% + var(--stranger-x) * var(--loop-sun-inverse-scale, 1))
    calc(50% + var(--stranger-y) * var(--loop-sun-inverse-scale, 1)),
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 0%,
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 75%, #fff 100%);
}
.loop-finale .sun {
  z-index: 10;
  opacity: var(--loop-sun-opacity, 1);
}
.loop-finale .sun__image {
  animation: sun-spin 180s linear infinite;
  filter: brightness(var(--loop-sun-brightness, 1));
}
.sun::before {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: #32bfff; opacity: var(--loop-sun-blue, 0);
  mix-blend-mode: color;
  -webkit-mask-image: url('./assets/Sun.png');
  mask-image: url('./assets/Sun.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.loop-finale .sun::before { animation: sun-spin 180s linear infinite; }
.sun::after {
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: #ff2020; opacity: var(--loop-sun-red, 0);
  mix-blend-mode: multiply;
  -webkit-mask-image: url('./assets/Sun.png');
  mask-image: url('./assets/Sun.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.loop-active .sun-glow { transform: translate(-50%, -50%) scale(var(--loop-sun-scale, 1)); }
.sun__image {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
  animation: sun-pulse 8s ease-in-out infinite alternate, sun-spin 180s linear infinite;
}
.stranger-wrap {
  position: absolute;
  z-index: 2;
  top: 50%; left: 50%;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Sun.png is opaque only to about 46.5% of its 14%-wide box. Keep the
     shadow inside that visible disk, including while the red Sun grows. */
  -webkit-mask-image: radial-gradient(circle calc(var(--system-size) * .065 * var(--object-scale, 1) * var(--loop-sun-scale, 1)) at center,
    #000 0%, #000 67%, rgba(0, 0, 0, .7) 82%, transparent 100%);
  mask-image: radial-gradient(circle calc(var(--system-size) * .065 * var(--object-scale, 1) * var(--loop-sun-scale, 1)) at center,
    #000 0%, #000 67%, rgba(0, 0, 0, .7) 82%, transparent 100%);
}
.stranger-motion {
  position: absolute;
  top: calc(50% + var(--stranger-y));
  left: calc(50% + var(--stranger-x));
  width: calc(var(--system-size) * .15);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.stranger-shadow {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: var(--background-color);
  -webkit-mask-image: radial-gradient(circle at center,
    #000 0%, #000 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
  mask-image: radial-gradient(circle at center,
    #000 0%, #000 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
}
.stranger {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  aspect-ratio: 954 / 882;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: brightness(1.15);
}
.stranger-disabled .stranger-wrap { display: none; }
.stranger-disabled .sun { -webkit-mask-image: none; mask-image: none; }
.stranger-shadow-only .stranger { display: none; }
.sun-station-orbit {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: calc(19% * var(--orbit-scale, 1)); height: calc(19% * var(--orbit-scale, 1));
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  animation: station-orbit var(--period, 32s) linear infinite;
}
.sun-station {
  position: absolute; top: 50%; left: var(--loop-station-left, 90%);
  width: 17%; height: 13%; object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg) scale(var(--object-scale, 1));
  opacity: var(--loop-station-opacity, 1);
}
.traveller {
  position: absolute; inset: 0; border-radius: 50%;
  animation: orbit var(--period) linear infinite;
}
.binary-system {
  position: absolute; z-index: 3; top: 50%; left: 100%;
  --period: 18s;
  width: calc(17% * var(--binary-scale, 1)); height: 0;
  transform: translate(-50%, -50%);
  animation: binary-spin var(--period, 18s) linear infinite;
}
.planet, .moon {
  position: absolute; top: 50%; left: 100%;
  width: var(--size); height: var(--size); object-fit: contain;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
}
.planet--ember, .planet--ash { width: 70%; height: auto; top: 0; }
.planet--ember { left: 0; }
.planet--ash { left: 100%; }
.planet--ember:not(.planet--twins-final),
.planet--ash:not(.planet--twins-final) { opacity: calc(1 - var(--loop-twins-progress, 0)); }
.planet--twins-final { opacity: var(--loop-twins-progress, 0); }
/* Ash_Twin_Empty.png has less padding than the original, so its artwork
   needs a smaller box to stay aligned during the crossfade. */
.planet--ash.planet--twins-final {
  width: 54%;
  transform: translate(-48.5%, -51.2%) scale(var(--object-scale, 1));
}
.sand-pillar {
  position: absolute; top: 0; left: 50%;
  width: 100%; height: auto;
  object-fit: contain; transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--loop-sand-fade-duration, 1.5s) ease-in-out;
}
.loop-disabled .sand-pillar { opacity: 1; }
.loop-active.loop-sand-flowing .sand-pillar { opacity: 1; }
.loop-sails-open .stranger { filter: brightness(1.25); }
.loop-dam-broken .stranger { filter: brightness(1.3); }
.loop-active .stranger { transition: transform 1.2s ease; }
.loop-tower-fallen .stranger { transform: translate(-50%, -50%) rotate(9deg); }
.planet--timber { --size: clamp(32px, 5.2vmin, 55px); }
.planet--brittle { --size: clamp(33px, 5.3vmin, 61px); }
.brittle-image {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%; object-fit: contain;
  transform: translate(-50%, -50%);
  transition: opacity .65s ease-in-out;
}
.brittle-image--hole { width: 96%; height: 96%; opacity: 0; }
.planet--brittle-holed .brittle-image--intact { opacity: 0; }
.planet--brittle-holed .brittle-image--hole { opacity: 1; }
.planet--giants { --size: clamp(42px, 7vmin, 75px); }
.planet--timber { --spin-period: 210s; }
.planet--brittle { --spin-period: 240s; }
.planet--giants { --spin-period: 270s; }
.planet--bramble { --spin-period: 300s; }
.planet--timber, .planet--brittle, .planet--giants, .planet--bramble {
  animation: planet-spin var(--spin-period) linear infinite;
}
.giants-lightning {
  position: absolute; z-index: 1; top: 50%; left: 100%;
  width: clamp(42px, 7vmin, 75px); height: clamp(42px, 7vmin, 75px);
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
  clip-path: circle(42% at 50% 50%);
  background: radial-gradient(circle 60% at var(--storm-x, 50%) var(--storm-y, 50%),
    rgba(255, 48, 37, .96), rgba(236, 9, 30, .62) 52%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.giants-lightning svg {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 0 3px #ff3039) drop-shadow(0 0 6px #ef1625);
}
.giants-lightning path {
  fill: none; stroke: #ff8a7c; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.giants-lightning .giants-lightning__core { stroke: #fff0dd; stroke-width: 1; }
.giants-lightning .giants-lightning__branch { stroke: #ff4d4a; stroke-width: 1.2; }
.moon-orbit--giants { z-index: 2; }
.planet--bramble { --size: clamp(42px, 7.5vmin, 85px); }
.moon-orbit {
  position: absolute; top: 50%; left: 100%;
  --period: 18s;
  width: calc(clamp(66px, 10vmin, 116px) * var(--orbit-scale, 1));
  height: calc(clamp(66px, 10vmin, 116px) * var(--orbit-scale, 1));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: moon-orbit var(--period, 18s) linear infinite;
}
.moon { --size: clamp(24px, 3.4vmin, 39px); }
.moon-orbit--brittle { --period: 11s; animation-delay: -3s; }
.moon--hollow-lantern { --size: clamp(22px, 3.5vmin, 35px); }
.moon-orbit--giants {
  width: calc(clamp(88px, 13vmin, 119px) * var(--orbit-scale, 1));
  height: calc(clamp(88px, 13vmin, 119px) * var(--orbit-scale, 1));
  --period: 28s;
}
.moon--orbital-probe,
.moon--orbital-probe-full {
  --size: clamp(29px, 4.2vmin, 38px);
  transform: translate(-50%, -50%) rotate(var(--probe-aim-angle, 0rad)) scale(var(--object-scale, 1));
}
.moon--orbital-probe { opacity: 0; }
.loop-probe-broken .moon--orbital-probe { opacity: 1; }
.loop-probe-broken .moon--orbital-probe-full { opacity: 0; }
.probe-burst {
  position: absolute; z-index: 7; top: 50%; left: 100%;
  width: clamp(25px, 3.8vmin, 38px); aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 45%, #fff9df 0%, #ffe18a 16%, #ffae38 39%, rgba(228, 92, 24, .42) 61%, transparent 78%);
  filter: blur(1px) drop-shadow(0 0 5px rgba(255, 154, 41, .6));
  pointer-events: none;
}
.probe-burst::before,
.probe-burst::after {
  content: ""; position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
}
.probe-burst::before {
  background:
    radial-gradient(ellipse 44% 31% at 74% 39%, rgba(255, 221, 124, .9), transparent 100%),
    radial-gradient(ellipse 37% 46% at 31% 72%, rgba(255, 135, 37, .8), transparent 100%),
    radial-gradient(ellipse 52% 39% at 28% 29%, rgba(255, 244, 195, .75), transparent 100%);
  filter: blur(2px);
}
.probe-burst::after {
  background:
    radial-gradient(ellipse 35% 50% at 65% 65%, rgba(255, 117, 25, .6), transparent 100%),
    radial-gradient(ellipse 48% 37% at 36% 44%, rgba(255, 202, 82, .58), transparent 100%);
  filter: blur(4px);
}
.probe-shot {
  position: absolute; z-index: 4; top: 0; left: 0;
  width: 11px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #f2f3ff 0%, #4759fc 42%, #4759fc 67%, transparent 80%);
  box-shadow: 0 0 10px 3px rgba(71, 89, 252, .85), 0 0 25px 7px rgba(71, 89, 252, .4);
  transform: translate3d(-100px, -100px, 0); opacity: 0;
  pointer-events: none;
}
.loop-probe-firing .probe-burst { animation: probe-fire 1.2s ease-out both; }
.loop-probe-firing .probe-burst::before { animation: probe-fire-bloom 1.2s ease-out both; }
.loop-probe-firing .probe-burst::after { animation: probe-fire-plume 1.2s ease-out both; }
.quantum-orbit {
  position: absolute; z-index: 6; top: 50%; left: 100%;
  --period: 16s;
  width: calc(clamp(86px, 12vmin, 138px) * var(--orbit-scale, 1));
  height: calc(clamp(86px, 12vmin, 138px) * var(--orbit-scale, 1));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  animation: moon-orbit var(--period, 16s) linear infinite;
  transition: opacity .35s ease;
  pointer-events: none;
}
.traveller--giants .quantum-orbit,
.traveller--bramble .quantum-orbit {
  width: calc(clamp(104px, 15vmin, 172px) * var(--orbit-scale, 1));
  height: calc(clamp(104px, 15vmin, 172px) * var(--orbit-scale, 1));
}
.quantum-orbit--shifting { opacity: 0; }
.quantum-orbit--absent { display: none; }
.quantum-orbit--instant { transition: none; }
.quantum-hover-target {
  position: absolute; top: 50%; left: 100%;
  width: clamp(44px, 6vmin, 70px); height: clamp(44px, 6vmin, 70px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}
.quantum-moon {
  position: absolute; top: 50%; left: 50%;
  z-index: 7;
  width: clamp(24px, 3.5vmin, 40px); height: auto;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
}

/* The comet's low ellipse grazes the Sun and extends past White Hole. */
.interloper-orbit {
  position: absolute; z-index: 0;
  top: var(--orbit-top, 33.5%); left: var(--orbit-left, 41%);
  width: var(--orbit-width, 72%); height: var(--orbit-height, 33%);
  border-radius: 50%;
  transition: opacity .5s ease;
}
.interloper-orbit--swallowed,
.loop-finale .interloper-orbit--swallowed { opacity: 0; }
.interloper {
  position: absolute; z-index: 2;
  left: 0;
  top: 0;
  width: clamp(12px, 2.8vmin, 32px); height: auto;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
  filter: drop-shadow(0 0 5px rgba(83, 192, 215, .4));
  opacity: 0;
  transition: opacity .5s ease;
  will-change: left, top, transform;
}
.interloper-beam {
  position: absolute; z-index: 1;
  left: 0; top: 0;
  width: clamp(65px, 10vmin, 135px); height: clamp(10px, 2vmin, 24px);
  transform: translate3d(-100px, -100px, 0);
  transform-origin: 0 50%;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: radial-gradient(ellipse at 0 50%, rgba(244, 255, 255, .98) 0%, rgba(117, 223, 255, .7) 23%, rgba(69, 187, 255, .25) 67%, transparent 100%), repeating-linear-gradient(100deg, transparent 0 13px, rgba(220, 250, 255, .22) 15px 18px, transparent 21px 31px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, rgba(0, 0, 0, .75) 42%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, rgba(0, 0, 0, .75) 42%, transparent 100%);
  filter: blur(6px);
  opacity: 0;
  transition: opacity .5s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  animation: interloper-beam-flow 1.4s linear infinite;
}
.interloper-beam::after {
  content: ""; position: absolute; inset: 20% 0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: radial-gradient(ellipse at 0 50%, rgba(255, 255, 255, .8), rgba(130, 224, 255, .28) 42%, transparent 100%);
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: interloper-beam-flicker 1.1s ease-in-out infinite alternate;
}
.interloper-beam::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background:
    radial-gradient(circle at 8% 48%, #fff 0 3px, transparent 4.5px),
    radial-gradient(circle at 29% 34%, rgba(180, 243, 255, .98) 0 2.5px, transparent 4px),
    radial-gradient(circle at 52% 67%, rgba(132, 226, 255, .95) 0 3px, transparent 4.5px),
    radial-gradient(circle at 76% 42%, rgba(205, 249, 255, 1) 0 2.5px, transparent 4px),
    radial-gradient(circle at 93% 58%, #fff 0 2px, transparent 3.5px),
    radial-gradient(circle at 41% 22%, rgba(111, 212, 255, 1) 0 2px, transparent 3.5px);
  background-size: 70px 100%;
  filter: blur(.1px) drop-shadow(0 0 3px rgba(126, 226, 255, .9));
  mix-blend-mode: screen;
  animation: interloper-beam-particles .42s linear infinite;
}
.loop-active .interloper { transition: opacity .5s ease; }
.loop-active .interloper-beam { transition: opacity .5s ease; }
.interloper--ready { opacity: 1; }
.interloper-beam--ready { opacity: .78; }
.interloper--swallowed { opacity: 0; }
.meteorite-layer {
  position: absolute; z-index: 6; inset: 0;
  pointer-events: none;
}
.meteorite {
  position: absolute; left: 0; top: 0;
  width: clamp(3px, .55vmin, 5px); height: clamp(3px, .55vmin, 5px);
  border-radius: 50%;
  background: #ffad42;
  box-shadow:
    0 0 3px 1px rgba(255, 216, 137, .9),
    0 0 8px 3px rgba(255, 113, 27, .6);
  will-change: transform, opacity;
}
.meteorite::before {
  content: ""; position: absolute; right: 65%; top: 50%;
  width: clamp(8px, 1.25vmin, 12px); height: clamp(3px, .45vmin, 5px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 75, 21, .55) 40%, rgba(255, 175, 58, .95) 85%, #ffe6a1);
  filter: blur(1px);
}
.meteorite::after {
  content: ""; position: absolute; right: 165%; top: 50%;
  width: clamp(9px, 1.6vmin, 15px); height: clamp(5px, .85vmin, 8px);
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 30% 35%, rgba(136, 130, 121, .32), transparent 54%),
    radial-gradient(circle at 75% 60%, rgba(89, 87, 83, .4), transparent 66%);
  filter: blur(2px);
}
.meteor-impact {
  position: absolute; left: 0; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffebbb;
  box-shadow: 0 0 4px 2px rgba(255, 185, 80, .9),
              0 0 9px 3px rgba(255, 103, 28, .55);
  pointer-events: none;
  will-change: transform, opacity;
}
.meteor-impact::before {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid rgba(255, 190, 91, .7);
  border-radius: 50%;
}
.white-hole {
  position: absolute; z-index: 3;
  top: 50%; left: 105%;
  width: clamp(66px, 9vmin, 103px); height: auto;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .35));
}

/* Fading arcs follow the planets, moons, binary pair, and comet. */
.trail-mode .orbit,
.trail-mode .moon-orbit,
.trail-mode .interloper-orbit,
.trail-mode .binary-system::before {
  border-color: transparent;
  box-shadow: none;
}
.trail-mode .orbit:not(.orbit--beacon) > .traveller::before,
.trail-mode .moon-orbit::before,
.trail-mode .interloper-orbit::before,
.trail-mode .binary-system::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 90deg,
    var(--trail-color) 0deg, transparent .1deg,
    transparent 270deg, var(--trail-color) 360deg);
  -webkit-mask: radial-gradient(ellipse farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(ellipse farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.trail-mode .binary-system::before {
  inset: auto;
  top: 0;
  left: 50%;
  width: 100%;
  height: 0;
  padding-top: 100%;
  transform: translate(-50%, -50%);
}
.trail-mode .interloper-orbit::before {
  background: conic-gradient(from calc(var(--trail-angle, 0deg) + 90deg),
    var(--trail-color) 0deg, transparent .1deg,
    transparent 270deg, var(--trail-color) 360deg);
}
.orbit-hidden .orbit,
.orbit-hidden .moon-orbit,
.orbit-hidden .sun-station-orbit,
.orbit-hidden .interloper-orbit,
.orbit-hidden .binary-system::before {
  border-color: transparent;
  box-shadow: none;
}

@keyframes orbit { from { transform: rotate(var(--start)); } to { transform: rotate(calc(var(--start) + 360deg)); } }
@keyframes stranger-orbit {
  0% { --stranger-angle: -180deg; }
  40% { --stranger-angle: -9deg; }
  60% { --stranger-angle: 9deg; }
  100% { --stranger-angle: 180deg; }
}
@keyframes binary-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes station-orbit { from { transform: translate(-50%, -50%) rotate(-90deg); } to { transform: translate(-50%, -50%) rotate(270deg); } }
@keyframes moon-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes planet-spin { from { transform: translate(-50%, -50%) rotate(0deg) scale(var(--object-scale, 1)); } to { transform: translate(-50%, -50%) rotate(360deg) scale(var(--object-scale, 1)); } }
@keyframes sun-pulse { from { filter: brightness(.95); } to { filter: brightness(1.14); } }
@keyframes sun-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes beacon-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes interloper-beam-flow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 80px 0; }
}
@keyframes interloper-beam-flicker {
  from { opacity: .35; transform: scaleY(.82); }
  to { opacity: .8; transform: scaleY(1.08); }
}
@keyframes interloper-beam-particles {
  from { background-position: 0 0; opacity: .25; transform: scaleY(.82); }
  35% { opacity: 1; transform: scaleY(1.12); }
  to { background-position: 100px 0; opacity: .2; transform: scaleY(.9); }
}
@keyframes probe-fire {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  7% { opacity: 1; transform: translate(-50%, -50%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  48% { opacity: .64; transform: translate(-50%, -50%) scale(1.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
@keyframes probe-fire-bloom {
  0%, 5% { opacity: 0; transform: scale(.4) rotate(-12deg); }
  18% { opacity: .95; transform: scale(1.15) rotate(-3deg); }
  55% { opacity: .5; transform: scale(1.5) rotate(9deg); }
  100% { opacity: 0; transform: scale(1.8) rotate(17deg); }
}
@keyframes probe-fire-plume {
  0%, 12% { opacity: 0; transform: translate(0, 0) scale(.5); }
  28% { opacity: .7; transform: translate(2px, -2px) scale(.9); }
  100% { opacity: 0; transform: translate(7px, -5px) scale(1.8); }
}
@media (max-aspect-ratio: 4/5) {
  :root { --system-size: 96vw; }
  .solar-system { top: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .solar-system { animation: none; --stranger-angle: -6deg; }
}

/* --- Built-in settings panel ---------------------------------------------
   Works the same everywhere the wallpaper runs, on top of Wallpaper Engine's
   own sidebar and Lively's own panel, not instead of them — see
   wallpaper-ui-settings.js for why. */
.wp-settings {
  position: fixed; z-index: 50;
  right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vh, 28px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
}
.loop-finale .wp-settings { opacity: .25; transition: opacity .3s ease; }
.loop-finale .wp-settings:hover, .loop-finale .wp-settings.wp-settings--open { opacity: 1; }
.wp-settings__toggle, .wp-settings__panel { pointer-events: auto; }

.wp-settings__toggle {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(237, 240, 238, .18);
  background: rgba(6, 8, 10, .55);
  backdrop-filter: blur(6px);
  color: rgba(237, 240, 238, .55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.wp-settings__toggle svg { width: 20px; height: 20px; fill: currentColor; }
.wp-settings__toggle:hover,
.wp-settings--open .wp-settings__toggle {
  color: var(--orange);
  border-color: rgba(244, 125, 48, .5);
  background: rgba(6, 8, 10, .8);
}
.wp-settings--open .wp-settings__toggle { transform: rotate(35deg); }

.wp-settings__panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(320px, 86vw);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid rgba(237, 240, 238, .14);
  background: rgba(6, 8, 11, .86);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  color: rgba(237, 240, 238, .92);
  transform-origin: bottom right;
  animation: wp-settings-in .18s ease;
  /* Lets Chromium/Edge render the native <select> popup (and other
     form-control chrome) in its dark theme instead of the OS-default
     white one, since that popup can't otherwise be styled with CSS. */
  color-scheme: dark;
}
@keyframes wp-settings-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.wp-settings__header {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  font: 700 12px/1.2 -apple-system, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange);
  border-bottom: 1px solid rgba(237, 240, 238, .1);
  background: rgba(6, 8, 11, .86);
}
.wp-settings__close {
  border: none; background: none; color: inherit;
  font-size: 20px; line-height: 1; cursor: pointer; opacity: .7;
}
.wp-settings__close:hover { opacity: 1; }
.wp-settings__body { padding: 4px 16px 10px; }
.wp-settings__group + .wp-settings__group {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(237, 240, 238, .08);
}
.wp-settings__group h3 {
  margin: 8px 0 6px;
  font: 600 11px/1.2 -apple-system, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(237, 240, 238, .5);
}
.wp-settings__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 13px;
}
.wp-settings__label { color: rgba(237, 240, 238, .85); }
.wp-settings__track { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.wp-settings__track input[type="range"] { width: 110px; accent-color: var(--orange); }
.wp-settings__value {
  min-width: 40px; text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(237, 240, 238, .6); font-size: 12px;
}
.wp-settings__row input[type="checkbox"] { accent-color: var(--orange); width: 17px; height: 17px; }
.wp-settings__row select,
.wp-settings__row input[type="text"] {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(237, 240, 238, .16);
  color: rgba(237, 240, 238, .92); border-radius: 6px; padding: 5px 8px;
  font-size: 12px; max-width: 130px;
}
.wp-settings__row select option {
  background: #0a0c0f; color: rgba(237, 240, 238, .92);
}
.wp-settings__row input[type="color"] {
  width: 32px; height: 24px; border: none; border-radius: 6px;
  background: none; padding: 0; cursor: pointer;
}
.wp-settings__footer { padding: 10px 16px 14px; border-top: 1px solid rgba(237, 240, 238, .08); }
.wp-settings__reset {
  width: 100%; padding: 8px; border-radius: 8px;
  border: 1px solid rgba(237, 240, 238, .16); background: transparent;
  color: rgba(237, 240, 238, .75); font-size: 12px; letter-spacing: .03em;
  cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.wp-settings__reset:hover { border-color: var(--orange); color: var(--orange); }