/* Swarm's field tokens. The field is always a night sky; each theme tunes it so every alien, ball,
   capsule and label keeps strong contrast, and the renderer re-reads these when the theme flips. */
.swarm-layout {
    --swarm-sky-top: #0f1840; --swarm-sky-mid: #182459; --swarm-sky-bottom: #0b1232;
    --swarm-ink: #f4f7ff; --swarm-muted: #bccaea; --swarm-star: #c9d6ff; --swarm-accent: #53e0c0;
    --swarm-gold: #ffd23f; --swarm-ghost: #b4caff; --swarm-slow: #8cc8ff;
    --swarm-shade: #050914; --swarm-on-capsule: #050914; --swarm-rim: #e8eeff99; --swarm-veil: #03050ec4;
}
@media (orientation: landscape) and (max-height: 520px) {
    .swarm-layout:has(.pause-button) { gap: var(--s1); }
    /* Height is the limit here; the slider's strip makes a 9rem-wide stage too tall for the screen. */
    .swarm-layout[data-swarm-mode] .swarm-stage { min-width: 0; }
}
html[data-scene="night"] .swarm-layout {
    --swarm-sky-top: #142050; --swarm-sky-mid: #1c2b66; --swarm-sky-bottom: #0e173e;
    --swarm-rim: #e8eeffcc; --swarm-veil: #03050eb3;
}
/* Swarm: one tall 9:16 canvas; the HUD above and the rules line below must still fit a phone.
   A steering slider (--pad tall) sits under the canvas on every device, so the stage gives up that height. */
.swarm-layout .swarm-stage { --pad: 3.5rem; width: min(100%, 26rem, calc((var(--fit-h, calc(100dvh - 15rem)) - var(--pad)) * 9 / 16)); min-width: 9rem; margin-inline: auto;
    display: flex; flex-direction: column; aspect-ratio: auto; }
/* Full screen: no width cap, the canvas takes all the height the fit leaves. */
:root[data-focus] .swarm-layout .swarm-stage { width: min(100%, calc((var(--fit-h, calc(100dvh - 6rem)) - var(--pad)) * 9 / 16)); }
.swarm-layout .swarm-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius) var(--radius) 0 0; background: var(--swarm-sky-bottom);
    touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.swarm-layout .swarm-stage:has(canvas:focus-visible) { outline: 2px solid var(--swarm-accent); outline-offset: 2px; border-radius: var(--radius); }
.swarm-pad { position: relative; flex: none; height: var(--pad); touch-action: none; user-select: none; -webkit-user-select: none;
    background: linear-gradient(var(--swarm-sky-mid), var(--swarm-sky-bottom)); border-top: 1px solid color-mix(in srgb, var(--swarm-accent) 25%, transparent); border-radius: 0 0 var(--radius) var(--radius); cursor: grab; }
.swarm-pad:active { cursor: grabbing; }
.swarm-pad::before { content: ""; position: absolute; inset: 50% 1rem auto; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--swarm-accent) 20%, transparent); }
.swarm-pad span { position: absolute; top: 50%; left: clamp(1.5rem, calc(var(--x, .5) * 100%), calc(100% - 1.5rem)); width: 3rem; height: 1.25rem;
    transform: translate(-50%, -50%); border-radius: 999px; background: var(--swarm-accent); opacity: .7;
    box-shadow: 0 0 .75rem color-mix(in srgb, var(--swarm-accent) 35%, transparent); }
.swarm-pad span::before { content: ""; position: absolute; inset: .375rem 50%; width: .75rem; translate: -50%;
    border-inline: 2px solid color-mix(in srgb, var(--swarm-shade) 67%, transparent); background: linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--swarm-shade) 67%, transparent) 0 calc(50% + 1px), transparent 0); }
.swarm-mini { display: block; width: 100%; height: 100%; }
.hub-art.swarm-hub-art { background: radial-gradient(ellipse at 50% 112%, #53e0c070, transparent 60%), linear-gradient(160deg, #18204a, #050914); padding: var(--s4); }
.hub-art.swarm-hub-art .swarm-mini { width: auto; height: 100%; aspect-ratio: 1; margin-inline: auto; }
.swarm-result .swarm-streak { margin: 0; color: var(--game-accent, #53e0c0); font-weight: 700; }
.swarm-mini .swm-flap { transform-box: fill-box; transform-origin: center; animation: swm-flap .26s ease-in-out infinite alternate; }
@keyframes swm-flap { from { transform: scaleY(1); } to { transform: scaleY(.72); } }
@media (prefers-reduced-motion: reduce) { .swarm-mini .swm-flap { animation: none; } }