*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#080604}
body{overflow:hidden}
.radio-room{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#080604}
.radio-background{position:absolute;inset:0;background:url("../assets/images/great-swingali-radio.png") center/cover no-repeat}

.realm-title{
 position:absolute;z-index:5;top:1.5%;left:50%;transform:translateX(-50%);margin:0;
 width:max-content;max-width:88vw;padding:.28rem .72rem;color:#ead8b8;
 background:rgba(5,4,4,.28);border-radius:4px;
 font:400 clamp(1.15rem,1.75vw,1.85rem)/1.05 "Rye",Georgia,serif;
 letter-spacing:.055em;text-align:center;
 text-shadow:0 3px 10px rgba(0,0,0,.98),0 0 12px rgba(167,99,232,.20);
 pointer-events:none
}
.radio-hotspot{
 position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;
 text-decoration:none;color:#f1ddbc;border-radius:18px;outline:none;cursor:pointer
}
.radio-hotspot::before{
 content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
 background:radial-gradient(circle,rgba(220,171,255,.36),rgba(145,76,205,.12) 62%,transparent 80%);
 box-shadow:0 0 28px rgba(210,153,255,.62),inset 0 0 24px rgba(246,226,255,.18);
 transition:opacity .22s ease,transform .25s ease
}
.radio-hotspot span{
 position:relative;z-index:2;opacity:0;transform:translateY(6px);padding:.48rem .72rem;
 background:rgba(7,5,5,.70);border:1px solid rgba(227,196,157,.34);border-radius:4px;
 font:700 clamp(.72rem,.9vw,.98rem)/1.1 Georgia,serif;letter-spacing:.07em;
 text-align:center;text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 8px #000;
 box-shadow:0 0 12px rgba(0,0,0,.42);transition:opacity .22s ease,transform .22s ease;
 pointer-events:none
}
.radio-hotspot:hover::before,.radio-hotspot:focus-visible::before{opacity:1;transform:scale(1.035)}
.radio-hotspot:hover span,.radio-hotspot:focus-visible span{opacity:1;transform:translateY(0)}
.radio-hotspot:focus-visible{outline:2px solid rgba(233,210,255,.88);outline-offset:4px}

/* Natural object-based Radio hotspots */
.watch-listen{left:40%;top:34%;width:21%;height:37%}       /* microphone + console */
.past-broadcasts{left:84%;top:35%;width:15%;height:44%}    /* reel-to-reel / archive equipment */
/* ON AIR sign */

.return-link{
 position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:7;
 padding:.48rem .8rem;color:rgba(239,220,185,.60);font:600 .72rem/1.1 Georgia,serif;
 letter-spacing:.08em;text-decoration:none;text-transform:uppercase;text-shadow:0 2px 7px #000;
 opacity:.22;transition:.2s
}
.return-link:hover,.return-link:focus-visible{
 opacity:1;text-shadow:0 0 12px rgba(183,117,255,.85),0 2px 7px #000
}


/* ============================================================
   UNIVERSAL PORTAL MARKERS — RADIO
   Applies only to LISTEN / WATCH and PAST BROADCASTS.
   ============================================================ */
.radio-hotspot::after{
  content:"";
  position:absolute;
  z-index:4;
  right:8%;
  top:9%;
  width:clamp(18px,1.35vw,24px);
  height:clamp(18px,1.35vw,24px);
  border:1px solid rgba(247,226,255,.98);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,#efc9ff 9% 22%,#c36df2 42%,#681b8c 72%,
      rgba(77,10,107,.28) 78%,transparent 80%);
  box-shadow:
    0 0 7px rgba(246,223,255,.98),
    0 0 17px rgba(205,105,255,.98),
    0 0 31px rgba(142,43,205,.82);
  pointer-events:none;
  transform-origin:center;
  animation:radioPortalPulse 1.8s ease-in-out infinite,
            radioPortalTurn 4.6s linear infinite;
}
.radio-hotspot:hover::after,
.radio-hotspot:focus-visible::after{
  filter:brightness(1.2);
  box-shadow:
    0 0 9px rgba(255,242,255,1),
    0 0 23px rgba(220,139,255,1),
    0 0 40px rgba(155,51,221,.96);
}
@keyframes radioPortalPulse{
  0%,100%{scale:.88;opacity:.82}
  50%{scale:1.14;opacity:1}
}
@keyframes radioPortalTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}
@media(prefers-reduced-motion:reduce){
  .radio-hotspot::after{animation:none}
}