@charset "utf-8";
/* Space: a purple night of stars and nebulae; a UFO, a ringed planet, a comet. */
:root[data-theme="space"] {
  --bg: #090619; --panel: #181238; --ink: #ece9ff; --muted: #a29bd2; --line: #2e2763;
  --accent: #8b5cf6; --accent-ink: #ffffff; --mover: #241c55; --die: #f1efff; --die-edge: #8b5cf6;
  --pip: #3b2a8a; --held: #22d3ee; --field: #120d2c; --good: #6ee7b7; --bad: #fb7185;
  --title: #c4b5fd; --title-font: "Orbitron", system-ui, sans-serif; --name-font: "Orbitron", system-ui, sans-serif;
  --mark: "🚀";
  --pattern:
    radial-gradient(1px 1px at 10px 20px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 90px 60px, #e9d5ff 50%, transparent 52%),
    radial-gradient(1px 1px at 150px 130px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 40px 170px, #bae6fd 50%, transparent 52%),
    radial-gradient(ellipse 60% 40% at 80% 15%, rgba(168, 85, 247, .3), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(236, 72, 153, .18), transparent 70%);
  --pattern-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 100% 100%, 100% 100%;
}
[data-theme="space"] h1 {
  font-size: 34px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(90deg, #c4b5fd, #f0abfc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="space"] h1 .icon { -webkit-text-fill-color: initial; }
[data-theme="space"] .tray-head .name { font-size: 14px; font-weight: 600; }
[data-theme="space"] .sheet thead th { font-size: 11px; }
[data-theme="space"] .pip { background: radial-gradient(circle at 35% 35%, #a78bfa, #3b2a8a); }
[data-theme="space"] .die.held { box-shadow: 0 0 0 3px var(--held), 0 0 16px rgba(34, 211, 238, .7); }
[data-theme="space"] .tray.mover { box-shadow: 0 0 24px rgba(139, 92, 246, .35); }
[data-theme="space"] .ambient .a1 { display: block; top: 14%; left: -70px; font-size: 34px; animation: ufo 24s linear infinite 3s; }
[data-theme="space"] .ambient .a1::before { content: "🛸"; display: inline-block; animation: ufo-wobble 1.4s ease-in-out infinite; }
@keyframes ufo { 0% { transform: translate(0, 0); } 10% { transform: translate(35vw, 30px); } 20% { transform: translate(70vw, -10px); } 28%, 100% { transform: translate(115vw, 20px); } }
@keyframes ufo-wobble { 50% { transform: rotate(-8deg) translateY(-4px); } }
[data-theme="space"] .ambient .a2 { display: block; left: -30px; bottom: 30px; font-size: 96px; opacity: .55; animation: planet 40s linear infinite; }
[data-theme="space"] .ambient .a2::before { content: "🪐"; }
@keyframes planet { to { transform: rotate(360deg); } }
[data-theme="space"] .ambient .a3 { display: block; top: -40px; right: 10%; font-size: 26px; animation: comet 15s linear infinite 7s; }
[data-theme="space"] .ambient .a3::before { content: "☄️"; }
@keyframes comet { 0% { transform: translate(0, 0); opacity: 0; } 2% { opacity: 1; } 10% { transform: translate(-40vw, 50vh); opacity: 0; } 100% { transform: translate(-40vw, 50vh); opacity: 0; } }
[data-theme="space"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(2px 2px at 30px 40px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 170px 110px, #c4b5fd 50%, transparent 52%), radial-gradient(2px 2px at 260px 230px, #fff 50%, transparent 52%);
  background-size: 300px 300px; animation: space-twinkle 3s ease-in-out infinite alternate;
}
@keyframes space-twinkle { from { opacity: .15; } to { opacity: .85; } }
