/* SPARK M!NDS — SITE MUSIC · GOD ALBUM edition (Pass A, 2026-10-16)
   The ♪ MUSIC button keeps its look from spark-music.css. This is the corner + full player. */
.spkga{ position:fixed; top:68px; right:clamp(12px,3vw,24px); z-index:1450;
  width:min(392px, calc(100vw - 24px)); height:min(560px, calc(100vh - 92px)); height:min(560px, calc(100dvh - 92px));
  border-radius:18px; overflow:visible; background:#07080b;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(245,197,66,.22), 0 0 40px -18px rgba(245,197,66,.35);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:top right;
  transition:opacity .22s ease, transform .26s cubic-bezier(.16,.84,.3,1), visibility 0s linear .26s; }
.spkga.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .22s ease, transform .26s cubic-bezier(.16,.84,.3,1), visibility 0s; }
.spkga iframe{ display:block; width:100%; height:100%; border:0; border-radius:18px; background:#07080b; color-scheme:dark; }
.spkga-x{ all:unset; box-sizing:border-box; position:absolute; top:-10px; right:-10px; z-index:2; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font:600 18px/1 system-ui,sans-serif; color:#f3dea0;
  background:#0d0f14; box-shadow:0 0 0 1px rgba(245,197,66,.45), 0 6px 16px -6px rgba(0,0,0,.8); }
.spkga-x:hover,.spkga-x:focus-visible{ color:#fff; box-shadow:0 0 0 1px rgba(245,197,66,.9), 0 6px 16px -6px rgba(0,0,0,.8); }
/* the full player: the same frame grows over the whole city */
.spkga.big{ top:0; right:0; left:0; bottom:0; width:100vw; height:100vh; height:100dvh; border-radius:0; z-index:2250; transform:none;
  box-shadow:none; transition:none; }
.spkga.big iframe{ border-radius:0; }
.spkga.big .spkga-x{ display:none; }
html.spkga-big, html.spkga-big body{ overflow:hidden !important; }
body.spark-immersive .spkga:not(.big){ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
/* phones: a sheet at the bottom, clear of the home bar */
@media (max-width:640px){
  .spkga{ top:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); left:10px; right:10px; width:auto;
    height:min(540px, calc(100vh - 120px)); height:min(540px, calc(100dvh - 120px)); transform:translateY(12px); transform-origin:bottom center; }
  .spkga.open{ z-index:2100; }                 /* in front of the FEED pill + LIFEFORM orb while it's open */
  .spkga.big{ bottom:0; left:0; right:0; height:100vh; height:100dvh; z-index:2250; }
  .spkga-x{ top:-12px; right:-4px; width:34px; height:34px; }
}
@media (prefers-reduced-motion: reduce){ .spkga, .spkga.open{ transition:none; transform:none; } }

/* 2026-10-23 · SITE MUSIC = SPARK M!NDS 24/7 — two sources at the top of the box: the live station and GOD ALBUM.
   The LIVE card (spark-247-live.js) sits over the GOD ALBUM frame; the frame stays loaded underneath. */
.spkga.has-src{ height:min(620px, calc(100vh - 92px)); height:min(620px, calc(100dvh - 92px)); }
.spkga.has-src iframe{ height:calc(100% - 50px); }
.spk-src{ box-sizing:border-box; display:flex; gap:6px; height:50px; padding:7px 7px 5px; }
.spk-src-b{ all:unset; box-sizing:border-box; flex:1 1 0; min-width:0; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; color:rgba(230,232,238,.6); background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font:700 9.5px/1 "Orbitron",system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  transition:color .2s, background .2s, box-shadow .2s; -webkit-tap-highlight-color:transparent; }
.spk-src-t{ overflow:hidden; text-overflow:ellipsis; }
.spk-src-b:hover{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.spk-src-b:focus-visible{ outline:2px solid rgba(245,197,66,.85); outline-offset:2px; }
.spk-src-b[data-src="live"][aria-checked="true"]{ color:#ffe1da; background:rgba(255,74,74,.13); box-shadow:inset 0 0 0 1px rgba(255,74,74,.62); }
.spk-src-b[data-src="ga"][aria-checked="true"]{ color:#ffe7a3; background:rgba(245,197,66,.10); box-shadow:inset 0 0 0 1px rgba(245,197,66,.55); }
.spk-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:#ff4a4a; opacity:.5; }
.spk-src-b.on .spk-dot{ opacity:1; animation:spkDot 1.6s ease-out infinite; }
@keyframes spkDot{ 0%{ box-shadow:0 0 0 0 rgba(255,74,74,.55); } 70%{ box-shadow:0 0 0 7px rgba(255,74,74,0); } 100%{ box-shadow:0 0 0 0 rgba(255,74,74,0); } }
.spk-eqs{ flex:none; display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.spk-eqs i{ width:2px; height:4px; background:currentColor; border-radius:1px; opacity:.75; }
.spk-src-b.on .spk-eqs i{ animation:spkEq .9s ease-in-out infinite; }
.spk-src-b.on .spk-eqs i:nth-child(2){ animation-delay:.15s; } .spk-src-b.on .spk-eqs i:nth-child(3){ animation-delay:.3s; }
@keyframes spkEq{ 0%,100%{ height:4px; } 50%{ height:11px; } }
.spk-livepane{ position:absolute; left:0; right:0; top:50px; bottom:0; overflow:auto; overscroll-behavior:contain; border-radius:0 0 18px 18px;
  background:#07080b; color-scheme:dark; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .18s ease, visibility 0s linear .18s; }
/* only while the box is OPEN — closed, the card must not catch taps or swipes (2026-10-23 fix: on phones the
   closed sheet's invisible card covered the middle of the screen, so the page wouldn't scroll there) */
.spkga.open.lv-view .spk-livepane{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity .18s ease, visibility 0s; }
.spkga.lv-view iframe{ visibility:hidden; pointer-events:none; }
.spkga.big .spk-src, .spkga.big .spk-livepane{ display:none; }
.spkga.big.has-src iframe{ height:100%; visibility:visible; pointer-events:auto; }
/* the ♪ MUSIC button while the station plays: red, with a small live dot */
#spkMusicToggle.live{ border-color:rgba(255,74,74,.6); color:#ffd4cc; box-shadow:0 0 16px -6px rgba(255,74,74,.75); }
#spkMusicToggle.live::after{ content:''; position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%; background:#ff4a4a; box-shadow:0 0 0 2px #05070a; }
@media (max-width:640px){
  .spkga.has-src{ height:min(590px, calc(100vh - 120px)); height:min(590px, calc(100dvh - 120px)); }
  .spk-src{ padding-right:30px; }                /* clear of the × that sits on the corner */
}
@media (prefers-reduced-motion: reduce){ .spk-src-b.on .spk-dot, .spk-src-b.on .spk-eqs i{ animation:none; } .spk-livepane{ transition:none; } }