/* Relay Radio Halloween Overlay — Build 003 */
.rr-halloween-overlay {
  position: fixed; inset: 0; z-index: 1040; overflow: hidden;
  pointer-events: none !important; user-select: none;
}
.rr-halloween-overlay *, .rr-halloween-overlay *::before, .rr-halloween-overlay *::after { pointer-events: none !important; box-sizing: border-box; }
.rr-halloween-overlay[hidden] { display: none !important; }
.rr-hw-right, .rr-hw-left { position: absolute; top: 0; bottom: 0; width: var(--rr-hw-gutter); overflow: hidden; }
.rr-hw-right { right: 0; }
.rr-hw-left { left: 0; }
.rr-halloween-web { position: absolute; top: 0; right: 0; width: 100%; max-width: 340px; height: auto; opacity: .92; filter: drop-shadow(0 1px 1px #08091288); }
.rr-halloween-spider-drop { position: absolute; top: 0; right: 12%; width: 106px; height: 330px; transform-origin: 50% 0; animation: rrHWSway 6s ease-in-out infinite; }
.rr-hw-descent { position: absolute; top: -55px; width: 100%; height: 330px; animation: rrHWDrop 9s ease-in-out infinite; }
.rr-halloween-spider-thread { position: absolute; top: 0; left: calc(50% - 1px); width: 1px; height: 217px; background: #c6bdad; }
.rr-halloween-spider { position: absolute; top: 209px; left: 0; width: 106px; height: 106px; filter: drop-shadow(1px 3px 2px #07050a99); }
.rr-hw-legs-left, .rr-hw-legs-right { transform-origin: 60px 60px; animation: rrHWLegs 2.8s ease-in-out infinite alternate; }
.rr-hw-legs-right { animation-delay: -1.4s; }
.rr-halloween-bat { position: absolute; width: 102px; height: 48px; opacity: 1; filter: drop-shadow(0 1px .5px #d9c6b24d); }
.rr-hw-bat-art { display: block; width: 100%; height: 100%; }
.rr-hw-wing-left, .rr-hw-wing-right { transform-origin: 59px 29px; animation: rrHWWing .38s ease-in-out infinite alternate; }
.rr-halloween-bat-1 { top: 370px; left: 10%; animation: rrHWFlight 10s ease-in-out infinite; }
.rr-halloween-bat-2 { top: 100px; left: 12%; animation: rrHWFlight 11s ease-in-out -5s infinite reverse; }
.rr-halloween-bat-3 { top: 310px; left: 18%; width: 80px; animation: rrHWFlight 13s ease-in-out -8s infinite; }
@keyframes rrHWSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes rrHWDrop { 0%,100% { transform: translateY(0); } 45%,60% { transform: translateY(48px); } }
@keyframes rrHWLegs { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes rrHWWing { from { transform: scaleY(1) rotate(-6deg); } to { transform: scaleY(.26) rotate(12deg); } }
@keyframes rrHWFlight {
  0%,100% { transform: translate(0,0) rotate(-10deg); }
  25% { transform: translate(22px,-55px) rotate(12deg); }
  50% { transform: translate(12px,28px) rotate(-8deg); }
  75% { transform: translate(-10px,65px) rotate(8deg); }
}
/* When the site fills the screen, reserve space rather than cover its content. */
.rr-halloween-overlay.rr-hw-band { position: relative; inset: auto; width: 100%; height: 200px; z-index: 0; background: linear-gradient(110deg,#111125,#291522 65%,#19121b); }
.rr-hw-band .rr-hw-right { width: 150px; }
.rr-hw-band .rr-hw-left { left: 8px; right: 160px; width: auto; }
.rr-hw-band .rr-halloween-web { width: 150px; }
.rr-hw-band .rr-halloween-spider-drop { right: 12px; width: 86px; height: 170px; }
.rr-hw-band .rr-hw-descent { top: -156px; }
.rr-hw-band .rr-halloween-spider { width: 86px; height: 86px; top: 211px; }
.rr-hw-band .rr-halloween-bat-1 { display: none; }
.rr-hw-band .rr-halloween-bat-2 { top: 64px; left: 5%; width: 82px; animation-name: rrHWBandFlight; }
.rr-hw-band .rr-halloween-bat-3 { top: 90px; left: 42%; width: 66px; animation-name: rrHWBandFlight; }
@keyframes rrHWBandFlight { 0%,100% { transform: translate(0,0) rotate(-8deg); } 33% { transform: translate(18px,-25px) rotate(8deg); } 66% { transform: translate(-5px,28px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .rr-halloween-overlay * { animation: none !important; } }
@media print { .rr-halloween-overlay { display: none !important; } }


/* The launch button is in page flow; the ghoul fills the entire viewport. */
/* Build 006: integrated station-panel treatment. */
.rr-hw-surprise-bar { padding:7px 9px; background:#0c131f; border-block:1px solid #2c83943b; }
.rr-hw-surprise-bar[hidden] { display:none!important; }
.rr-hw-surprise-button {
  appearance:none; position:relative; display:flex; align-items:center; gap:13px;
  width:100%; min-height:52px; padding:9px 16px; overflow:hidden;
  border:1px solid #b979355e; border-left:3px solid #ec9a38; border-radius:9px;
  background:radial-gradient(ellipse at 0% 50%,#be6a2129,transparent 52%),linear-gradient(105deg,#15212c,#151725 62%,#24202a);
  color:#f8e6c9; font-family:inherit; font-size:14px; font-weight:700; line-height:1.4;
  text-align:left; letter-spacing:.025em; cursor:pointer;
  box-shadow:inset 0 1px 0 #ffffff09,0 2px 7px #0003;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.rr-hw-surprise-button::before {
  content:"31"; display:grid; place-items:center; flex:0 0 30px; height:30px;
  border:1px solid #ec9a3866; border-radius:8px; background:#ee9a3812;
  color:#ffbb60; font:800 13px/1 system-ui,sans-serif; letter-spacing:-.04em;
}
.rr-hw-surprise-button::after {
  content:"\2192"; flex:0 0 30px; margin-left:auto; color:#edb879;
  font:400 23px/1 system-ui,sans-serif; text-align:center;
}
.rr-hw-surprise-button:hover { border-color:#e4a252; background:radial-gradient(ellipse at 0% 50%,#c476303b,transparent 60%),linear-gradient(105deg,#1b2934,#1d2030 62%,#31252b); box-shadow:inset 0 1px 0 #ffffff0d,0 0 13px #e98e2414; }
.rr-hw-surprise-button:active { background:#2b2425; }
.rr-hw-surprise-button:disabled { cursor:wait; opacity:.6; }
.rr-hw-surprise-button:focus-visible,.rr-hw-scare-close:focus-visible { outline:3px solid #57d4ed; outline-offset:2px; }
#rr-hw-surprise-note { display:block; padding:5px 4px 0; color:#d6c1ae; font:12px/1.4 system-ui,sans-serif; }
#rr-hw-surprise-note[hidden] { display:none!important; }
@media(max-width:480px) { .rr-hw-surprise-button { gap:10px; padding:10px; font-size:12px; letter-spacing:0; } .rr-hw-surprise-button::after { flex-basis:20px; } }
dialog.rr-hw-scare { position:fixed!important; inset:0!important; margin:0!important; padding:0!important; border:0!important; width:100vw!important; height:100vh!important; height:100dvh!important; max-width:none!important; max-height:none!important; overflow:hidden!important; background:#030303; color:#fff; }
.rr-hw-scare:not([open]) { display:none!important; }
.rr-hw-scare::backdrop { background:#000; }
.rr-hw-scare-image { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%; scale:1.08; }
.rr-hw-scare[open] .rr-hw-scare-image { animation:rrGhoulLunge .45s ease-out both,rrGhoulShake .82s linear .45s infinite; }
.rr-hw-scare-close { position:absolute; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); z-index:2; border:1px solid #fffa; border-radius:6px; padding:12px 18px; color:#fff; background:#080808d9; font:700 15px/1.4 system-ui,sans-serif; cursor:pointer; }
@keyframes rrGhoulLunge { 0% { scale:1.01; } 55% { scale:1.12; } 100% { scale:1.08; } }
/* Small uneven tremors move the whole image; overscan keeps every edge covered. */
@keyframes rrGhoulShake {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  14% { transform:translate(-3px,2px) rotate(-.22deg); }
  28% { transform:translate(4px,-2px) rotate(.18deg); }
  43% { transform:translate(-2px,-1px) rotate(-.12deg); }
  59% { transform:translate(3px,2px) rotate(.24deg); }
  74% { transform:translate(-4px,1px) rotate(-.18deg); }
  87% { transform:translate(2px,-2px) rotate(.1deg); }
}
@media (prefers-reduced-motion:reduce) { .rr-hw-scare[open] .rr-hw-scare-image { animation:none; transform:none; scale:1; } }
@media print { .rr-hw-surprise-bar,.rr-hw-scare { display:none!important; } }

/* Build 007: prominent Halloween invitation, retaining the full-row hit target. */
.rr-hw-surprise-bar { padding:10px; background:linear-gradient(90deg,#101522,#25122e,#101522); }
.rr-hw-surprise-button {
 justify-content:center; gap:20px; min-height:78px; padding:16px 24px;
 border:1px solid #ffbd67; border-left-width:1px; border-radius:12px;
 background:radial-gradient(ellipse at 50% 0%,#ed8d3b55,transparent 70%),linear-gradient(105deg,#46205d 0%,#763025 32%,#a34213 55%,#69224d 82%,#361c5b);
 color:#fff8df; font-size:clamp(18px,1.6vw,23px); font-weight:800;
 line-height:1.35; letter-spacing:.025em; text-align:center;
 text-shadow:0 2px 3px #280617; box-shadow:inset 0 1px 0 #fff5,0 0 16px #f28a343b;
 animation:rrHalloweenInviteGlow 3.6s ease-in-out infinite;
}
.rr-hw-surprise-button::before {
 content:"31"; flex:0 0 42px; height:42px; border:1px solid #ffd18a;
 border-radius:50%; color:#ffe1a2; background:#170e2799;
 font-size:18px; box-shadow:0 0 15px #ffa23b33;
}
.rr-hw-surprise-button::after {
 content:"\2192"; margin-left:0; flex:0 0 42px; height:42px;
 display:grid; place-items:center; border-radius:50%;
 background:#ffc86c; color:#35112c; font-size:27px; text-shadow:none;
 box-shadow:0 2px 8px #180d2544;
}
.rr-hw-surprise-button:hover {
 background:radial-gradient(ellipse at 50% 0%,#ffc06566,transparent 70%),linear-gradient(105deg,#59256c,#9c3e20 40%,#b64e16 60%,#522060);
 border-color:#ffe7b5; text-shadow:0 2px 3px #280617;
}
.rr-hw-surprise-button:active { background:linear-gradient(105deg,#49205d,#853313,#49205d); }
@keyframes rrHalloweenInviteGlow {
 0%,100% { box-shadow:inset 0 1px 0 #fff4,0 0 10px #f28a342b; }
 50% { box-shadow:inset 0 1px 0 #fff7,0 0 22px #f28a3466; }
}
@media(max-width:600px) {
 .rr-hw-surprise-button { gap:10px; padding:14px 12px; min-height:84px; font-size:17px; letter-spacing:0; }
 .rr-hw-surprise-button::before,.rr-hw-surprise-button::after { flex-basis:32px; height:32px; }
 .rr-hw-surprise-button::before { font-size:14px; }
 .rr-hw-surprise-button::after { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { .rr-hw-surprise-button { animation:none; transition:none; } }

/* Build 009: unlit bats and independently articulated spider legs. */
.rr-halloween-bat { filter:none; }
.rr-halloween-spider { overflow:visible; }
.rr-hw-leg,.rr-hw-leg-tip { transform-box:view-box; }
.rr-hw-leg { animation:rrSpiderLegReach var(--leg-time) ease-in-out var(--leg-delay) infinite; }
.rr-hw-leg-tip { animation:rrSpiderKneeFlex var(--leg-time) ease-in-out calc(var(--leg-delay) - .24s) infinite; }
@keyframes rrSpiderLegReach {
 0%,100% { transform:rotate(-9deg); }
 28% { transform:rotate(4deg); }
 56% { transform:rotate(12deg); }
 78% { transform:rotate(-3deg); }
}
@keyframes rrSpiderKneeFlex {
 0%,100% { transform:rotate(13deg); }
 35% { transform:rotate(-20deg); }
 65% { transform:rotate(-8deg); }
}
@media(prefers-reduced-motion:reduce) { .rr-hw-leg,.rr-hw-leg-tip { animation:none!important; } }
