/* =========================
GLOBAL PAGE OVERRIDES
========================= */

body.aux{
background:
radial-gradient(900px 600px at 70% 10%, rgba(0,255,210,0.06), transparent 60%),
radial-gradient(900px 600px at 20% 80%, rgba(255,140,0,0.05), transparent 60%),
#06080c;
}

.aux-stage{
max-width: 1100px;
margin: 0 auto;
padding: 28px 18px 60px;
position: relative;
}

/* =========================
MINIMAL HOME ICON
========================= */

.aux-home{
  position: fixed;
  top: 16px;
  left: 16px;

  width: 44px;      /* ← required */
  height: 44px;     /* ← required */

  display: block;   /* or grid/flex */

  background-image: url("/assets/img/icons/return.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;

  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background-color: rgba(0,0,0,0.4);

  z-index: 1000;
}

.aux-home:hover{ opacity: 1; }

.aux-home svg{
width: 18px;
fill: white;
}

/* =========================
HERO / BRAND PANEL
========================= */

.aux-hero{
position: relative;
border-radius: 24px;
padding: 28px 24px 30px;
border: 1px solid rgba(255,255,255,0.12);
background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 30px 60px rgba(0,0,0,0.6);
overflow: hidden;
}

/* teal/orange glow atmosphere */
.aux-hero-glow{
position: absolute;
inset: -40% -20% auto -20%;
height: 400px;
pointer-events: none;
background:
radial-gradient(circle at 30% 50%, rgba(0,255,210,0.15), transparent 40%),
radial-gradient(circle at 70% 50%, rgba(255,140,0,0.12), transparent 45%);
filter: blur(60px);
}

.aux-title{
margin: 10px 0 6px;
font-size: 44px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
background: linear-gradient(90deg,#aafff4,#ffffff,#ffd4a3);
-webkit-background-clip: text;
color: transparent;
}

.aux-tagline{
margin: 0 0 22px;
opacity: 0.8;
letter-spacing: 0.4px;
}

.aux-breadcrumb{
font-family: Consolas, monospace;
font-size: 12px;
opacity: 0.5;
letter-spacing: 1px;
}

/* =========================
RSS WIDGET
========================= */

.aux-hero-top{
display:flex;
justify-content: space-between;
align-items: center;
}

.aux-widget{
border:1px solid rgba(255,255,255,0.12);
padding:10px 12px;
border-radius:14px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
}

.aux-widget-title{
font-size:11px;
opacity:0.6;
margin-bottom:6px;
}

.aux-widget-buttons{
display:flex;
gap:8px;
}

.iconbtn{
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;

  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background-color: rgba(0,0,0,0.4);
}

.iconbtn:hover{
border-color: rgba(0,255,210,0.6);
box-shadow: 0 0 18px rgba(0,255,210,0.3);
}

.iconbtn svg{ width:18px; fill:white; }

/* =========================
FAKE MEDIA PLAYER
========================= */

.player{
margin-top:22px;
display:grid;
grid-template-columns: 1.4fr 1fr;
gap:18px;
}

.player-left{
border-radius:18px;
border:1px solid rgba(255,255,255,0.1);
padding:18px;
background: rgba(0,0,0,0.35);
}

.player-label{
font-size:12px;
opacity:0.6;
margin-bottom:6px;
}

.player-track{
font-size:22px;
font-weight:700;
}

.player-sub{
margin-top:6px;
opacity:0.7;
}

.player-controls{
display:flex;
gap:10px;
margin-top:18px;
}

.pbtn{
width:44px;
height:44px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
}

.pbtn-main{
box-shadow:0 0 20px rgba(0,255,210,0.4);
}

.pbtn svg{ width:18px; fill:white; }

/* signal meter */
.meter-bar{
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  position: relative;
}

/* gradient layer (static, never changes) */
.meter-bar::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;

  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffff00 45%,
    #00ffd2 100%
  );
}

/* mask layer (this is what moves) */
.meter-bar i{
  position:absolute;
  top:0; left:0; bottom:0;
  width:100%;
  background:black; /* hides gradient */

  transform-origin:right;
  transform: scaleX(0.3);

  animation:none !important;
}


/* =========================
HORIZONTAL STRIPS
========================= */

.strips{ margin-top:28px; }

.strip{
display:grid;
grid-template-columns: 220px 1fr;
gap:16px;
margin-bottom:18px;
border-radius:18px;
border:1px solid rgba(255,255,255,0.12);
overflow:hidden;
}

.strip-media{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.strip-media img{
  width: auto;
  height: auto;
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
}

.strip-body{ padding:18px; }

.strip-title{
font-weight:700;
margin-bottom:6px;
}

.strip-text{ opacity:0.75; }

/* =========================
TRANSMISSIONS LIST
========================= */

.tx{ margin-top:40px; }

.tx-head{
display:flex;
justify-content: space-between;
align-items:center;
}

.tx-h{
font-size:22px;
font-weight:800;
}

.tx-sub{
opacity:0.6;
font-size:13px;
}

.tx-list{
margin-top:14px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.1);
overflow:hidden;
}

.tx-card{
padding:16px 18px;
border-top:1px solid rgba(255,255,255,0.08);
}

.tx-title{
font-size:18px;
font-weight:800;
}

.tx-meta{
font-family:Consolas, monospace;
font-size:12px;
opacity:0.6;
margin-bottom:8px;
}

.tx-body{
white-space: pre-wrap;
line-height:1.5;
}

.tx-loading{
padding:18px;
font-family:Consolas, monospace;
}

/* =========================
FOOTER SYSTEM TEXT
========================= */

.aux-foot{
margin-top:50px;
text-align:center;
opacity:0.35;
font-size:12px;
letter-spacing:1px;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:800px){
.player{ grid-template-columns:1fr; }
.strip{ grid-template-columns:1fr; }
}
/* ==================================================
   AUX CONSOLE FLAVOUR LAYER (paste at bottom)
   ================================================== */

/* Scanlines + faint noise */
/*body.aux::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 4px);
  opacity: 1;
  mix-blend-mode: overlay;
  z-index: 5;
}

body.aux::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 44%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 66%, rgba(255,255,255,0.03) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,0.04) 0 1px, transparent 2px);
  opacity: 0.20;
  filter: blur(0.25px);
  z-index: 6;
}
/* Scanline overlay element (reliable, no pseudo-element conflicts) */
.scanlines{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 9999;

  /* Start modest. You can tune later. */
  opacity: 0.47;

  /* IMPORTANT: no blend mode */
  mix-blend-mode: normal;

  /* dark scanlines are more visible than white on dark UIs */
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.35) 1px,
    transparent 1px,
    transparent 4px
  );
}
/* keep main content above overlays */
.aux-stage{ z-index: 10; }

/* Floating system chatter */
.sys-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.sys-chatter{
  position: absolute;
  top: 110px;
  right: 30px;
  display: grid;
  gap: 6px;
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.22;
  text-transform: uppercase;
  user-select: none;
  filter: blur(0.2px);
}

.sys-chatter span:nth-child(2n){
  transform: translateX(-10px);
  opacity: 0.18;
}
.sys-chatter span:nth-child(3n){
  transform: translateX(8px);
  opacity: 0.15;
}

/* LIVE indicator */
.live-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.95;
}

.live-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,255,210,0.7);
  box-shadow: 0 0 16px rgba(0,255,210,0.35);
  animation: pulse 1.2s ease-in-out infinite;
}

.live-sub{
  opacity: 0.6;
  margin-left: 6px;
}

@keyframes pulse{
  0%,100%{ transform: scale(0.95); opacity: 0.6; }
  50%{ transform: scale(1.2); opacity: 1; }
}

/* Player “cover” placeholder (optional) */
.player-cover{
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  height: 110px;
  width: 160px;
}

.player-left .player-controls{
  justify-content: flex-start;
}

.player-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
/* Player controls alignment */
.player-left{
  display: grid;
  grid-template-rows: auto auto auto auto;
}

.player-controls{
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

.player-cover{
  margin-top: 14px;
}



/* ===== Waveform reset (single source of truth) ===== */
.scope{
  margin-top: 10px;
}

.scope-grid{
  height: 86px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
}

.scope-grid::before{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 14px);
  opacity: 0.10;
  pointer-events:none;
}

.scope-line{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  pointer-events:none;

  background:
    /* glow wash */
    linear-gradient(90deg, rgba(0,255,210,0.18), rgba(255,140,0,0.12)),

    /* faint secondary trace (offset, adds chaos) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='86' viewBox='0 0 240 86'%3E%3Cpath d='M0 43 L10 36 L20 50 L30 30 L40 56 L50 38 L60 62 L70 34 L80 46 L90 24 L100 58 L110 40 L120 52 L130 28 L140 60 L150 44 L160 30 L170 54 L180 36 L190 48 L200 26 L210 56 L220 40 L230 50 L240 43' fill='none' stroke='rgba(255,4,22,1)' stroke-width='2'/%3E%3C/svg%3E"),

    /* primary trace (spikier) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='86' viewBox='0 0 240 86'%3E%3Cpath d='M0 43 L8 20 L16 60 L24 32 L32 70 L40 26 L48 58 L56 18 L64 52 L72 28 L80 66 L88 34 L96 48 L104 14 L112 62 L120 22 L128 56 L136 30 L144 72 L152 40 L160 54 L168 16 L176 60 L184 24 L192 50 L200 20 L208 66 L216 36 L224 58 L232 28 L240 43' fill='none' stroke='rgba(100,255,110,0.58)' stroke-width='2.4'/%3E%3C/svg%3E");

  background-repeat: no-repeat, repeat-x, repeat-x;
  background-size: 100% 100%, 240px 86px, 240px 86px;

  /* offset the faint layer a bit */
  background-position: 0 0, 0 6px, 0 0;

  opacity: 0.62;
  filter: blur(0.12px) drop-shadow(0 0 10px rgba(0,255,210,0.14));

  animation: scope-pan 2s linear infinite, scope-flicker 4.2s steps(8,end) infinite;
}

@keyframes scope-pan{
  from { background-position: 0 0, 0 6px, 0 0; }
  to   { background-position: 0 0, -240px 6px, -240px 0; }
}

/* subtle “receiver instability” */
@keyframes scope-flicker{
  0%, 100% { opacity: 0.60; }
  50% { opacity: 0.72; }
}



/* Transmission cards as “packets” */
.tx-card{
  position: relative;
  background: linear-gradient(to right, rgba(255,255,255,0.03), transparent);
}

.tx-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 140px at 20% 0%, rgba(0,255,210,0.08), transparent 60%),
    radial-gradient(700px 140px at 80% 100%, rgba(255,140,0,0.06), transparent 60%);
  opacity: 0.6;
}

.tx-title{
  letter-spacing: 0.4px;
  text-transform: none;
}

.tx-meta{
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tx-body{
  white-space: pre-wrap;
}

/* Soft “interference” on hover */
.tx-card:hover{
  background: linear-gradient(to right, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}

/* Mobile sanity */
@media (max-width: 820px){
  .sys-chatter{ display:none; }
}

.iconimg{
  width: 35px;
  height: 35px;
  display: block;
  object-fit: contain;
}

.iconbtn{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* AUX background enhancement — console grid */
body.aux::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(circle at 1px 1px, rgba(0,255,210,.06) 1px, transparent 2px);

  background-size: 10px 10px;
  opacity:.45;
}
/* =========================
SPONSOR STRIP (true seamless loop, no snap)
Two tracks with offset timing
========================= */

:root{
  --sponsor-speed: 24s; /* slower = bigger number */
}

.sponsor-strip{
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
}

.sponsor-head{
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .6;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-transform: uppercase;
}

/* Centered rail + fade edges */
.sponsor-viewport{
  position: relative;
  overflow: hidden;
  padding: 12px 0;

  /* kill centering */
  display:block;

  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.sponsor-track{
  display:flex;
  width: max-content;
  will-change: transform;
  animation: sponsor-marquee var(--sponsor-speed) linear infinite;
}

.sponsor-row{
  display:flex;
  gap: 16px;
  padding: 0 18px;
  width: max-content;
}

/* Move by exactly one copy */
@keyframes sponsor-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* Second track starts halfway through */
.sponsor-track.clone{
  position: absolute;
  left: 50%;
  transform: translateX(0);
  animation-delay: calc(var(--sponsor-speed) / -2);
}

/* The movement: shift by the track’s own width */
@keyframes sponsor-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}

/* Pause on hover (optional) */
.sponsor-strip:hover .sponsor-track{
  animation-play-state: paused;
}

.sponsor-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.sponsor-item img{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  opacity: .95;
}

.sponsor-item span{
  font-size: 12px;
  letter-spacing: .4px;
  opacity: .85;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
  .sponsor-track{ animation: none; }
  .sponsor-track.clone{ display:none; }
}
/* =========================
AD REAL ESTATE (square + banners)
Drop-in module: place between .strips and .tx
========================= */

.adbay{
  margin-top: 26px;
}

.adbay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}

.adbay-title{
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .6;
}

.adbay-sub{
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 12px;
  opacity: .45;
  letter-spacing: .6px;
}

/* Layout: one square + two wide banners */
.adgrid{
  display:grid;
  gap:14px;
  grid-template-columns: 1fr 1fr;
}

/* square spans vertically */
.ad-slot.square{
  grid-row: span 2;
}

/* Make banners a bit “long” */
.ad-slot.banner .ad-stage{
  aspect-ratio: 21 / 6; /* wide */
}

/* Square stays square */
.ad-slot.square .ad-stage{
  aspect-ratio: 1 / 1;
}

@media (max-width: 900px){
  .adgrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "banner1"
      "square"
      "banner2";
  }

  .ad-slot.banner .ad-stage{
    aspect-ratio: 16 / 6;
  }
}

/* Slot styling matches your panels */
.ad-slot{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.ad-slot.square{ grid-area: square; }
.ad-slot.banner.one{ grid-area: banner1; }
.ad-slot.banner.two{ grid-area: banner2; }

.ad-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ad-label{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .65;
}

.ad-code{
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 12px;
  opacity: .45;
}

/* Image stage + slideshow (CSS-only, 4 frames default) */
.ad-stage{
  position: relative;
  background: rgba(0,0,0,.35);
}

.ad-stage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.02);
  filter: saturate(1.06) contrast(1.05);
  animation: adcycle 16s infinite;
}

/* 4-image timings (0,4,8,12). If you want 3 images: remove one <img> + tweak delays. */
.ad-stage img:nth-child(1){ animation-delay: 0s; }
.ad-stage img:nth-child(2){ animation-delay: 4s; }
.ad-stage img:nth-child(3){ animation-delay: 8s; }
.ad-stage img:nth-child(4){ animation-delay: 12s; }

@keyframes adcycle{
  0%, 18%   { opacity: 1; transform: scale(1.00); }
  25%, 100% { opacity: 0; transform: scale(1.02); }
}

.ad-foot{
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12px;
  opacity: .72;
}

.ad-foot b{
  opacity: 1;
}

.ad-foot .fine{
  display:block;
  margin-top: 4px;
  font-size: 11px;
  opacity: .6;
}

/* Reduced motion: stop cycling, show first frame */
@media (prefers-reduced-motion: reduce){
.ad-stage{
  position: relative;
  background: rgba(0,0,0,.35);
  width: 100%;
  min-height: 140px; /* fallback so it can’t collapse */
}
.ad-slot.square .ad-stage{ min-height: 220px; }
.ad-stage{
  position:relative;
  width:100%;
  min-height:180px;
}

.ad-slot.square .ad-stage{
  min-height:320px;
}
/* ===== AD FIX: prevent zero-height collapse ===== */
.ad-slot{
  display: block;
  min-height: 220px;       /* ensures the card itself has height */
}

.ad-stage{
  position: relative;
  width: 100%;
  min-height: 180px;       /* ensures the slideshow area has height */
}

.ad-slot.square .ad-stage{
  min-height: 320px;
}