/* =========================================================================
   gameManager/MTG/battleStation.css — the game-board backgrounds
   ("Battle Stations") — 2026-08-23f.

   DESIGN CONTRACT (why this never distorts at any window size):
   - There are NO raster images anywhere. Everything is CSS gradients and
     tiny inline-SVG TILES with a fixed tile size that repeat — a wider or
     taller window simply gets MORE tiles ("more of the same squares"),
     never a stretched one.
   - The "walls" are fixed-thickness rails (26px) that run the full length
     of each edge; their patterns repeat along the rail, so they extend
     instead of scaling.
   - The center glow and the vignette are radial gradients — vector, so
     they scale to any size losslessly.
   - The layer is position:fixed inset:0, z-index:-1, pointer-events:none —
     it sits behind EVERYTHING and can never eat a click. It only shows
     while the game view (#playtestIt) is visible AND a station is chosen;
     otherwise the classic white table is untouched.
   - prefers-reduced-motion turns every animation off.

   battleStation.js owns the body classes (bs-on + bs-arcana/bs-grove/
   bs-forge), builds the layer, sprinkles the particles, and wires the
   picker tiles in My Account.
   ========================================================================= */

/* ---------- The layer ---------- */
#battleStation {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    display: none;
}

body.bs-on #battleStation { display: block; }
body.bs-on { background: #0b0e1a; }   /* never a white flash behind the layer */

#battleStation .bs-field,
#battleStation .bs-vignette,
#battleStation .bs-glow,
#battleStation .bs-particles {
    position: absolute;
    inset: 0;
}

/* Fixed-thickness rails — the "walls". Patterns repeat along the rail. */
#battleStation .bs-rail { position: absolute; }
#battleStation .bs-rail-t { top: 0; left: 0; right: 0; height: 26px; }
#battleStation .bs-rail-b { bottom: 0; left: 0; right: 0; height: 26px; }
#battleStation .bs-rail-l { top: 0; bottom: 0; left: 0; width: 26px; }
#battleStation .bs-rail-r { top: 0; bottom: 0; right: 0; width: 26px; }

/* Soft darkening toward the edges so the play space feels lit from above */
#battleStation .bs-vignette {
    background: radial-gradient(ellipse 75% 70% at 50% 46%,
        rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%);
}

/* The table's heart: a glow centered on the drop circle, breathing slowly */
#battleStation .bs-glow {
    background: radial-gradient(circle 46vmax at 50% 50%,
        var(--bs-glow) 0%, rgba(0, 0, 0, 0) 62%);
    opacity: 0.55;
    animation: bsPulse 9s ease-in-out infinite;
    will-change: opacity;
}

@keyframes bsPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.8; }
}

/* ---------- Ambient particles (motes / fireflies / embers) ---------- */
#battleStation .bs-p {
    position: absolute;
    bottom: -12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-particle);
    box-shadow: 0 0 8px 2px var(--bs-particle-halo);
    opacity: 0;
    animation-name: bsDrift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

@keyframes bsDrift {
    0%   { transform: translate3d(0, 0, 0) scale(0.7);            opacity: 0; }
    8%   { opacity: 0.85; }
    50%  { transform: translate3d(var(--sway), -46vh, 0) scale(1); opacity: 0.6; }
    92%  { opacity: 0.25; }
    100% { transform: translate3d(calc(var(--sway) * -0.6), -92vh, 0) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #battleStation .bs-glow { animation: none; }
    #battleStation .bs-p { animation: none; display: none; }
}

/* =========================================================================
   THEME 1 — ARCANE STUDY (bs-arcana)
   A wizard's midnight library: indigo velvet field scattered with faint
   stars and rune-sparks, dark wood rails trimmed in old gold, violet
   heart-glow, golden dust motes drifting up.
   ========================================================================= */
body.bs-arcana #battleStation {
    --bs-glow: rgba(139, 108, 255, 0.34);
    --bs-particle: rgba(255, 214, 130, 0.9);
    --bs-particle-halo: rgba(255, 200, 90, 0.35);
}

body.bs-arcana #battleStation .bs-field {
    background-color: #12142b;
    /* fixed 120px star tile — repeats, never stretches */
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='14' cy='22' r='1.3' fill='%23aab0ff' opacity='0.32'/%3E%3Ccircle cx='74' cy='9' r='1' fill='%23e8d9a0' opacity='0.3'/%3E%3Ccircle cx='102' cy='58' r='1.4' fill='%23aab0ff' opacity='0.26'/%3E%3Ccircle cx='39' cy='76' r='1' fill='%23cfd4ff' opacity='0.3'/%3E%3Ccircle cx='87' cy='104' r='1.2' fill='%23e8d9a0' opacity='0.24'/%3E%3Cpath d='M58 40 l2.2 5 5 2.2 -5 2.2 -2.2 5 -2.2 -5 -5 -2.2 5 -2.2 z' fill='%239b8cff' opacity='0.2'/%3E%3Ccircle cx='22' cy='108' r='0.9' fill='%23aab0ff' opacity='0.24'/%3E%3C/svg%3E"),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.014) 0 2px, rgba(0, 0, 0, 0) 2px 14px),
        linear-gradient(180deg, #151737 0%, #101226 55%, #0c0e1e 100%);
}

body.bs-arcana #battleStation .bs-rail {
    /* dark wood with a repeating grain band + a gold inner trim line */
    background-image: repeating-linear-gradient(90deg,
        #241a12 0 18px, #2d2117 18px 34px, #271c13 34px 52px);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
}
body.bs-arcana #battleStation .bs-rail-l,
body.bs-arcana #battleStation .bs-rail-r {
    background-image: repeating-linear-gradient(0deg,
        #241a12 0 18px, #2d2117 18px 34px, #271c13 34px 52px);
}
body.bs-arcana #battleStation .bs-rail-t { border-bottom: 2px solid rgba(212, 175, 55, 0.55); }
body.bs-arcana #battleStation .bs-rail-b { border-top: 2px solid rgba(212, 175, 55, 0.55); }
body.bs-arcana #battleStation .bs-rail-l { border-right: 2px solid rgba(212, 175, 55, 0.55); }
body.bs-arcana #battleStation .bs-rail-r { border-left: 2px solid rgba(212, 175, 55, 0.55); }

/* =========================================================================
   THEME 2 — WILDWOOD GROVE (bs-grove)
   A clearing deep in an elven forest: mossy green field flecked with
   leaves, bark rails threaded with a living vine line, warm sun-through-
   canopy heart, fireflies blinking as they wander up.
   ========================================================================= */
body.bs-grove #battleStation {
    --bs-glow: rgba(196, 226, 120, 0.30);
    --bs-particle: rgba(214, 255, 140, 0.95);
    --bs-particle-halo: rgba(174, 255, 100, 0.4);
}

body.bs-grove #battleStation .bs-field {
    background-color: #17251a;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cellipse cx='20' cy='30' rx='4' ry='1.8' fill='%233c5a3a' opacity='0.4' transform='rotate(-24 20 30)'/%3E%3Cellipse cx='78' cy='16' rx='3.4' ry='1.5' fill='%23486b40' opacity='0.34' transform='rotate(18 78 16)'/%3E%3Cellipse cx='94' cy='72' rx='4' ry='1.7' fill='%233c5a3a' opacity='0.36' transform='rotate(-40 94 72)'/%3E%3Cellipse cx='44' cy='90' rx='3.2' ry='1.4' fill='%23517a49' opacity='0.3' transform='rotate(30 44 90)'/%3E%3Ccircle cx='60' cy='52' r='1.1' fill='%23629a55' opacity='0.28'/%3E%3C/svg%3E"),
        repeating-linear-gradient(-30deg,
            rgba(70, 110, 60, 0.05) 0 3px, rgba(0, 0, 0, 0) 3px 17px),
        linear-gradient(180deg, #1d2f20 0%, #16241a 55%, #101b13 100%);
}

body.bs-grove #battleStation .bs-rail {
    background-image: repeating-linear-gradient(90deg,
        #2a2015 0 22px, #33271a 22px 40px, #2d2317 40px 60px);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
}
body.bs-grove #battleStation .bs-rail-l,
body.bs-grove #battleStation .bs-rail-r {
    background-image: repeating-linear-gradient(0deg,
        #2a2015 0 22px, #33271a 22px 40px, #2d2317 40px 60px);
}
body.bs-grove #battleStation .bs-rail-t { border-bottom: 2px solid rgba(140, 195, 92, 0.5); }
body.bs-grove #battleStation .bs-rail-b { border-top: 2px solid rgba(140, 195, 92, 0.5); }
body.bs-grove #battleStation .bs-rail-l { border-right: 2px solid rgba(140, 195, 92, 0.5); }
body.bs-grove #battleStation .bs-rail-r { border-left: 2px solid rgba(140, 195, 92, 0.5); }

/* Fireflies blink while they drift */
body.bs-grove #battleStation .bs-p {
    animation-name: bsDrift, bsFlicker;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}
@keyframes bsFlicker {
    0%, 100% { box-shadow: 0 0 8px 2px var(--bs-particle-halo); }
    50%      { box-shadow: 0 0 2px 0 var(--bs-particle-halo); }
}

/* =========================================================================
   THEME 3 — DRAGONFORGE (bs-forge)
   The floor of a volcanic forge: dark basalt plates with faint hex seams,
   obsidian rails with an ember-hot inner edge, molten heart-glow, embers
   rising and dimming as they cool.
   ========================================================================= */
body.bs-forge #battleStation {
    --bs-glow: rgba(255, 120, 40, 0.30);
    --bs-particle: rgba(255, 160, 70, 0.95);
    --bs-particle-halo: rgba(255, 90, 20, 0.45);
}

body.bs-forge #battleStation .bs-field {
    background-color: #191512;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='120'%3E%3Cpath d='M26 0 L52 15 L52 45 L26 60 L0 45 L0 15 Z M78 60 L104 75 L104 105 L78 120 L52 105 L52 75 Z' fill='none' stroke='%23332a22' stroke-width='1.4' opacity='0.5'/%3E%3Cpath d='M52 45 L60 52' stroke='%23553322' stroke-width='1' opacity='0.35'/%3E%3C/svg%3E"),
        repeating-linear-gradient(12deg,
            rgba(255, 110, 40, 0.024) 0 2px, rgba(0, 0, 0, 0) 2px 16px),
        linear-gradient(180deg, #201a15 0%, #17130f 55%, #100d0a 100%);
}

body.bs-forge #battleStation .bs-rail {
    background-image: repeating-linear-gradient(90deg,
        #17130f 0 26px, #221b14 26px 44px, #1a1510 44px 66px);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85);
}
body.bs-forge #battleStation .bs-rail-l,
body.bs-forge #battleStation .bs-rail-r {
    background-image: repeating-linear-gradient(0deg,
        #17130f 0 26px, #221b14 26px 44px, #1a1510 44px 66px);
}
body.bs-forge #battleStation .bs-rail-t { border-bottom: 2px solid rgba(255, 110, 40, 0.5); }
body.bs-forge #battleStation .bs-rail-b { border-top: 2px solid rgba(255, 110, 40, 0.5); }
body.bs-forge #battleStation .bs-rail-l { border-right: 2px solid rgba(255, 110, 40, 0.5); }
body.bs-forge #battleStation .bs-rail-r { border-left: 2px solid rgba(255, 110, 40, 0.5); }

body.bs-forge #battleStation .bs-p {
    border-radius: 40% 60% 55% 45%;
    animation-name: bsDrift, bsFlicker;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

/* =========================================================================
   In-game readability while a (dark) station is active — ONLY under
   body.bs-on, so the classic table is byte-identical when off.
   ========================================================================= */
body.bs-on #cardAreaHidden { background: rgba(0, 0, 0, 0.38); }
body.bs-on .drop-zone { border-color: rgba(255, 255, 255, 0.35); }
body.bs-on .drop-zone.active { border-color: #ffd0d0; }
body.bs-on .exile-zone { border-color: rgba(255, 255, 255, 0.35); }
body.bs-on .drawACard, body.bs-on .viewDeck { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* =========================================================================
   My Account picker tiles — miniature, self-contained renditions of each
   station (pure CSS, no shared tiles needed at this size)
   ========================================================================= */
.bs-preview {
    width: 148px;
    height: 88px;
    border-radius: 10px;
    border: 6px solid #2a2117;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
    outline: 3px solid transparent;
    outline-offset: 2px;
    flex: 0 0 auto;
}
.bs-preview:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.bs-preview.bs-preview-active { outline-color: #2563eb; }

.bs-preview::before {   /* mini heart-glow */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 55px at 50% 52%, var(--bsp-glow), transparent 70%);
}
.bs-preview::after {    /* name plate */
    content: attr(data-label);
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2px 0 3px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #f3ead2;
    background: rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.bs-preview-arcana {
    --bsp-glow: rgba(139, 108, 255, 0.5);
    background:
        radial-gradient(circle 1.5px at 24px 18px, rgba(200, 205, 255, 0.7) 99%, transparent),
        radial-gradient(circle 1px  at 96px 30px, rgba(232, 217, 160, 0.7) 99%, transparent),
        radial-gradient(circle 1.5px at 62px 60px, rgba(170, 176, 255, 0.6) 99%, transparent),
        linear-gradient(180deg, #171a3d, #0e1024);
    border-color: #2c2115;
}
.bs-preview-grove {
    --bsp-glow: rgba(196, 226, 120, 0.45);
    background:
        radial-gradient(circle 1.5px at 30px 24px, rgba(214, 255, 140, 0.8) 99%, transparent),
        radial-gradient(circle 1px  at 104px 46px, rgba(174, 255, 100, 0.7) 99%, transparent),
        linear-gradient(180deg, #22381f, #101d12);
    border-color: #33271a;
}
.bs-preview-forge {
    --bsp-glow: rgba(255, 120, 40, 0.5);
    background:
        radial-gradient(circle 1.5px at 40px 58px, rgba(255, 160, 70, 0.85) 99%, transparent),
        radial-gradient(circle 1px  at 100px 26px, rgba(255, 120, 40, 0.7) 99%, transparent),
        linear-gradient(180deg, #241c15, #120e0a);
    border-color: #1c1610;
}