/* NEON RODEO (Friday) — a western saloon sign after midnight.
   Night sky, brick wall, lit tubes in pink / amber / turquoise. */
@import url('https://fonts.googleapis.com/css2?family=Neonderthaw&family=Tilt+Neon&display=swap');

@keyframes neonFlicker{0%,18%,20%,22%,61%,63%,100%{opacity:1}19%,21%,62%{opacity:.35}}
@keyframes neonTwinkle{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes neonHum{0%,100%{filter:drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 14px var(--c))}50%{filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 22px var(--c))}}

body.theme-neon{
  --pink:#ff3d9a; --amber:#ffb547; --cyan:#3ff5e6;
  --accent:var(--pink); --accent-fg:#1a0010; --panel:#140a24; --glow:rgba(255,61,154,.55); --gold:var(--cyan);
  --fg-sub:rgba(255,236,248,.68); --fg-dim:rgba(255,236,248,.42); --border:rgba(255,61,154,.2);
  background:radial-gradient(120% 70% at 50% 115%,#3d0f3f 0%,#1a0b2e 48%,#07051a 100%);

  /* backdrop */
  .deco .d1{inset:0;opacity:.8;animation:neonTwinkle 5s ease-in-out infinite;background-image:
    radial-gradient(1.2px 1.2px at 8% 12%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 22% 30%,#fff 60%,transparent 62%),
    radial-gradient(1.4px 1.4px at 37% 8%,#ffd 60%,transparent 62%),radial-gradient(1px 1px at 52% 22%,#fff 60%,transparent 62%),
    radial-gradient(1.2px 1.2px at 66% 6%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 78% 26%,#dff 60%,transparent 62%),
    radial-gradient(1.4px 1.4px at 91% 14%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 14% 48%,#fff 60%,transparent 62%),
    radial-gradient(1px 1px at 46% 40%,#fff 60%,transparent 62%),radial-gradient(1.2px 1.2px at 86% 44%,#fff 60%,transparent 62%)}
  .deco .d2{left:-2%;right:-2%;bottom:0;height:30vh;background-image:url(img/mountains-neon.svg);background-size:100% 100%;
    --c:var(--pink);animation:neonHum 4s ease-in-out infinite}
  .deco .d4{left:2%;bottom:26vh;width:90px;height:90px;background-image:url(img/horseshoe-neon.svg);
    --c:var(--cyan);animation:neonHum 3.6s ease-in-out infinite;opacity:.45;transform:rotate(-14deg)}
  .deco .d5{left:30%;top:62%;width:44px;height:44px;background-image:url(img/star-neon.svg);
    --c:var(--pink);animation:neonHum 2.6s ease-in-out infinite;opacity:.5}

  /* chrome */
  .brand b{color:var(--pink);text-shadow:0 0 10px var(--pink)}
  .pill{font-family:'Tilt Neon',sans-serif;background:rgba(20,10,36,.6);box-shadow:inset 0 0 0 1px rgba(255,61,154,.35)}
  .pill:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--pink),0 0 14px rgba(255,61,154,.45)}
  .pill.sound-on{color:#03201e;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}
  .tab{font-family:'Tilt Neon',sans-serif;background:rgba(20,10,36,.5);border-color:rgba(255,61,154,.16)}
  .tab.active{color:#fff;background:rgba(255,61,154,.12);border-color:var(--pink);
    box-shadow:0 0 0 1px var(--pink),0 0 22px rgba(255,61,154,.55),inset 0 0 18px rgba(255,61,154,.25);text-shadow:0 0 8px var(--pink)}
  .tab.active .tab-date{color:var(--amber)}

  /* hero */
  .nh-kicker{font:400 12px/1 'Tilt Neon',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 8px rgba(63,245,230,.7)}
  .nh-t1{font:400 24px/1 'Tilt Neon',sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#fff3dc;
    text-shadow:0 0 4px #fff,0 0 12px var(--amber),0 0 28px var(--amber)}
  .nh-t2{font:400 76px/.8 'Neonderthaw',cursive;color:#ffe6f3;margin-left:4px;display:inline-block;
    text-shadow:0 0 4px #fff,0 0 10px var(--pink),0 0 24px var(--pink),0 0 48px var(--pink);animation:neonFlicker 6s linear infinite}
  .nh-slot{font:400 12px/1 'Tilt Neon',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffeefa;padding:9px 14px;
    border-radius:999px;border:1px solid rgba(63,245,230,.55);box-shadow:0 0 12px rgba(63,245,230,.25),inset 0 0 10px rgba(63,245,230,.15);
    background:rgba(7,5,26,.55)}
  .nh-slot b{font-weight:400;color:var(--amber);text-shadow:0 0 8px var(--amber)}
  .nh-slot em{color:var(--fg-dim);font-size:10px}

  /* portrait: a neon sign on brick */
  .portrait{border-radius:28px;background:#170c22 url(img/brick.svg);
    box-shadow:0 0 0 2px var(--pink),0 0 28px rgba(255,61,154,.55),inset 0 0 0 10px #12081d,inset 0 0 0 12px rgba(63,245,230,.65),inset 0 0 40px rgba(63,245,230,.25)}
  .portrait::before,.portrait::after{display:none}
  .p-img{mix-blend-mode:normal;filter:contrast(1.06) saturate(1.1)}
  .p-duotone{opacity:.14}
  .p-grad{background:radial-gradient(80% 70% at 50% 45%,transparent 40%,rgba(7,5,26,.75) 100%)}
  .p-fallback{background:none;gap:6px}
  .p-fallback::before{content:'';width:180px;height:98px;background:url(img/hat-neon.svg) center/contain no-repeat;
    --c:var(--amber);animation:neonHum 3s ease-in-out infinite,neonFlicker 9s linear infinite}
  .p-fallback b{font-size:110px;line-height:.9;color:#fff2fa;letter-spacing:-.02em;
    text-shadow:0 0 4px #fff,0 0 14px var(--pink),0 0 34px var(--pink),0 0 70px rgba(255,61,154,.6)}
  .p-fallback span{font-family:'Tilt Neon',sans-serif;color:var(--cyan);text-shadow:0 0 8px var(--cyan)}

  /* DJ info */
  .eyebrow{font-family:'Tilt Neon',sans-serif;font-weight:400;color:var(--cyan);text-shadow:0 0 10px rgba(63,245,230,.7)}
  .dj-name{color:#fff4fb;letter-spacing:-.04em;text-shadow:0 0 4px #fff,0 0 14px var(--pink),0 0 36px var(--pink),0 0 70px rgba(255,61,154,.45)}
  .slash{background:linear-gradient(90deg,var(--amber),var(--pink));box-shadow:0 0 14px var(--pink),0 0 30px rgba(255,61,154,.5)}
  .dj-time{font:400 20px/1 'Tilt Neon',sans-serif;color:var(--amber);text-shadow:0 0 10px var(--amber)}
  .genre{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan),0 0 10px rgba(63,245,230,.35)}

  /* roster */
  .card{background:rgba(20,10,36,.75);border-color:rgba(255,61,154,.22);border-radius:14px}
  .card .fb{background:none;color:rgba(255,61,154,.55)}
  .card.sel{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 22px rgba(63,245,230,.55)}
  .card.sel .fb,.card.sel .cn{color:#eafffd;text-shadow:0 0 8px var(--cyan)}
  .card .cn{font-family:'Tilt Neon',sans-serif;background:linear-gradient(transparent,rgba(7,5,26,.9))}
  .footer{border-top-color:rgba(255,61,154,.2)}
}
@media (max-width:760px){
  body.theme-neon{
    .nh-t1{font-size:16px}
    .nh-t2{font-size:52px}
    .portrait{border-radius:22px}
    .p-fallback::before{width:130px;height:70px}
    .p-fallback b{font-size:84px}
    .deco .d3,.deco .d4,.deco .d5{display:none}
    .deco .d2{height:22vh}
  }
}
@media (prefers-reduced-motion: reduce){
  body.theme-neon .deco i,body.theme-neon .nh-t2,body.theme-neon .p-fallback::before{animation:none}
}