:root{
  /* core palette & spacing tokens */
  --bg:#000;
  --panel:#050505;
  --accent:#e50914; /* Netflix-like accent */
  --muted:#9aa3a8;
  --card:#071011;
  --glass: rgba(255,255,255,0.02);
  --text:#e6eef6;
  --radius:8px;
  --hero-height:440px;

  /* accessibility / sizing helpers for improved touch targets and mobile legibility */
  --base-font-size: 16px; /* used implicitly as reference */
  --touch-target: 44px; /* min recommended tappable size */
  --sidebar-width: 104px;
  --menu-icon-size: 24px;
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.55;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* enable natural page scrolling for long pages and mobile devices */
  overflow:auto;
}

.app{
  display:flex;
  height:100vh;
  width:100vw;
}

/* Hamburger top menu (replaces sidebar) */
.hamburger{
  background:transparent;
  border:0;
  /* larger tappable target for improved touch sensitivity */
  padding:12px;
  width:44px;
  height:44px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.hamburger-box{
  /* fill the whole button so any touch inside the button toggles reliably */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  position:relative;
}
.hamburger-inner{
  width:18px;
  height:2px;
  background:var(--text);
  display:block;
  border-radius:2px;
  position:relative;
  box-shadow:0 -6px 0 0 var(--text),0 6px 0 0 var(--text);
  transition:transform .18s ease,opacity .18s ease;
  pointer-events:none; /* ensure the inner graphic doesn't block the button hit area */
}
.hamburger[aria-expanded="true"] .hamburger-inner{
  transform:rotate(90deg);
  opacity:0.9;
  box-shadow:none;
}
.top-hamburger{
  position:fixed;left:12px;top:64px;z-index:1000;display:block;pointer-events:none;
  transform-origin:0 0;transition:transform .18s ease,opacity .18s ease;
  background:linear-gradient(180deg,#010101,#070707);border:1px solid rgba(255,255,255,0.03);border-radius:10px;padding:10px;box-shadow:0 18px 46px rgba(0,0,0,0.6);
  width:220px;max-width:80vw;opacity:0;transform:translateY(-8px) scale(0.98);
}
.top-hamburger[aria-hidden="false"]{ pointer-events:auto; opacity:1; transform:translateY(6px) scale(1); }
.top-hamburger .menu{ display:flex; flex-direction:column; gap:8px; }
.menu-item{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:700;font-size:14px;background:transparent;border:0;cursor:pointer;
}
.menu-item .mi{ width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:8px }
.menu-item .mi img, .menu-item .mi svg{ width:20px;height:20px;object-fit:contain;display:block }

/* small red bullet used for radio items (matches ticker style) */
.menu-item .bullet{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(180deg,#ff4b4b,#c92b2b);
  box-shadow:0 2px 8px rgba(201,43,43,0.18);
  flex:0 0 auto;
  margin-right:8px;
  display:inline-block;
  vertical-align:middle;
}
.menu-item[data-radio] .bullet{
  /* ensure visibility and alignment next to the label */
  margin-left:4px;
  margin-right:8px;
}
.menu-item .mi-label{ position:static;width:auto;height:auto;margin-left:4px;clip:auto;overflow:visible;white-space:nowrap; }
.menu-item:hover{ background:rgba(255,255,255,0.02); color:var(--text); }

/* ensure inline images and svgs inside .mi scale and stay centered (uniform icon sizing) */
.menu-item .mi img,
.menu-item .mi svg{
  width:var(--menu-icon-size);
  height:var(--menu-icon-size);
  display:block;
  object-fit:contain;
}

/* Slightly larger TikTok icon to increase visibility while keeping other icons unchanged */
.menu-item[href*="tiktok"] .mi img,
.menu-item[title="TikTok"] .mi img,
.menu-item .mi img[alt="TikTok"]{
  width:28px;
  height:28px;
}

/* keep svg icons that are not inline images visually centered */
/* ensure inline SVG icons match the same muted color as image icons */
.menu-item .mi svg{
  display:block;
  color: var(--muted);
  fill: currentColor;
  stroke: currentColor;
}
/* show labels next to each menu icon for clarity */
.menu-item .mi-label{
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
}
.menu-item:hover{background:rgba(255,255,255,0.02);color:var(--accent)}
.menu-item.active{background:linear-gradient(90deg, rgba(229,9,20,0.14), rgba(229,9,14,0.06));color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.menu-divider{height:1px;background:rgba(255,255,255,0.02);margin:8px 0;border-radius:2px}

/* special download CTA */
.menu-item.download{background:linear-gradient(180deg,#1a0006,#2b0008);color:#fff;padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.6);font-size:14px;font-weight:500}

/* socials use same compact menu icon style as sidebar menu */
.socials{display:flex;justify-content:center;margin-top:8px}
.social-menu{display:flex;flex-direction:column;gap:6px;align-items:center}
.social-menu .menu-item{width:56px;padding:10px;border-radius:8px;color:var(--muted);background:transparent;border:0;cursor:pointer}

/* brand block pinned to bottom */
.brand-bottom{display:flex;align-items:center;gap:10px;padding:12px 6px;margin-top:6px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.01));border-radius:8px}
.brand-logo{width:44px;height:44px;border-radius:8px;background:#0b0b0b;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:var(--text)}
.brand-bottom .title{font-weight:800}
.brand-bottom .subtitle{font-size:12px;color:var(--muted)}

/* reduce gap to match reference compact left menu */
.sidebar .menu-item{padding-left:12px;padding-right:12px}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:64px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.03);
}
.profile{display:flex;gap:12px;align-items:center}

/* News ticker */
.news-ticker{
  width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom:1px solid rgba(255,255,255,0.02);
  padding:8px 18px;
  display:flex;
  align-items:center;
}
.ticker-inner{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.ticker-label{
  display:flex;
  align-items:center;
  justify-content:center;
  height:28px;
  line-height:28px;
  color:#fff;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  padding:4px 12px;
  border-radius:999px;
  background:linear-gradient(90deg,#e43a3a,#c62828);
  box-shadow:0 6px 18px rgba(196,28,28,0.14);
  letter-spacing:0.6px;
  align-self:center;
}
.ticker-viewport{
  overflow:hidden;
  flex:1;
  min-width:0;
  height:28px;
  position:relative;
}
.ticker-track{
  display:inline-flex;
  gap:40px;
  align-items:center;
  white-space:nowrap;
  position:absolute;
  left:0;
  top:0;
  will-change:transform;
  transform:translateX(0);
}
.ticker-item{
  color:var(--text);
  font-weight:600;
  font-size:14px;
  opacity:0.95;
  display:inline-flex;
  align-items:center;
  line-height:28px;
  padding-right:6px;
  vertical-align:middle;
  gap:10px; /* space between bullet and text */
}
.ticker-item a{color:inherit;text-decoration:none}

/* Red bullet at start of each headline with subtle blink animation */
.ticker-item .bullet{
  width:10px;
  height:10px;
  background:linear-gradient(180deg,#ff4b4b,#c92b2b);
  border-radius:50%;
  box-shadow:0 2px 8px rgba(201,43,43,0.18);
  flex:0 0 auto;
  transform-origin:center;
  opacity:1;
  will-change:opacity, transform;
  animation:bullet-blink 220ms infinite;
}

.ticker-pause{
  background:transparent;border:0;color:var(--muted);font-size:16px;padding:6px;border-radius:6px;cursor:pointer;
}
.ticker-viewport:focus{outline:none}
/* replaced text-avatar with image logo - simplified to remove decorative rectangle */
.site-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:40px;
  border-radius:0;
  background:transparent;
  box-shadow: none;
  -webkit-user-drag: none;
  padding:0;
  /* ensure the logo remains crisp on small screens */
  max-width: min(88px, 18vw);
}
/* ensure inline SVG scales nicely and text remains crisp */
.site-logo svg{display:block;width:100%;height:100%}

/* CONTENT */
.content{
  padding:0 18px 18px 18px;
  overflow:auto;
  /* use header height only and rely on bottom padding to reserve space for the fixed player */
  height:calc(100vh - 64px);
  /* avoid the fixed bottom-player overlapping page content by reserving space */
  padding-bottom: calc(88px + 18px); /* bottom-player height (88px) + comfortable spacing */
  box-sizing:border-box;
}

/* HERO (player reference style) */
.hero{
  position:relative;height:var(--hero-height);border-radius:6px;overflow:hidden;margin:18px 0;background:#000;
}
.player-shell{position:relative;width:100%;height:100%;overflow:hidden;border-radius:6px;background:#000}
.hero-bg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.35) saturate(1.05);pointer-events:none}
.hero-gradient{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.85));pointer-events:none}

/* When the player-shell is shown fullscreen, remove the dark gradient and restore the video's natural look */
.player-shell.fullscreen .hero-gradient{
  display:none !important;
}
.player-shell.fullscreen .hero-bg{
  filter: none !important;
  pointer-events: auto !important;
}

/* Slightly adjust overlay elements while fullscreen to avoid heavy contrast
   and hide interactive chrome so only the moving video is visible. */
.player-shell.fullscreen .player-overlay{
  padding:12px !important;
}

/* When fullscreen, visually hide controls/overlays but allow them to be revealed on interaction.
   We use opacity & pointer-events to remove the chrome while keeping the DOM for accessibility. */
.player-shell.fullscreen .player-overlay,
.player-shell.fullscreen .player-controls,
.player-shell.fullscreen .center-play,
.player-shell.fullscreen .player-info,
.player-shell.fullscreen .live-badge {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

/* When the shell gains the 'show-controls' class (on user interaction), reveal them temporarily */
.player-shell.fullscreen.show-controls .player-overlay,
.player-shell.fullscreen.show-controls .player-controls,
.player-shell.fullscreen.show-controls .center-play,
.player-shell.fullscreen.show-controls .player-info,
.player-shell.fullscreen.show-controls .live-badge {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* overlay that contains centered play and info */
.player-overlay{
  position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:22px;
}
.player-info{align-self:flex-start;color:var(--text);max-width:58%;margin-top:28px}
.label{color:var(--muted);font-weight:700;margin-bottom:8px;letter-spacing:1px}
.hero-title{font-size:40px;margin:0 0 8px;font-weight:700;letter-spacing:-0.02em;line-height:1.12}
.hero-sub{color:var(--muted);margin:0 0 8px;font-size:0.96rem}

/* Costa Rica clock label and highlight */
.cr-label{color:var(--muted);font-weight:700;margin-right:6px;font-size:13px;letter-spacing:.2px}
#cr-clock{
  color:#e43a3a;
  font-weight:400;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  letter-spacing:1px;
  line-height:1;
  display:inline-block;
  text-align:center;
}

/* Live badge positioned top-right inside the player overlay for better visibility */
.hero-live-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:60;
  background:linear-gradient(90deg,#e43a3a,#c62828);
  color:#fff;
  font-weight:800;
  font-size:10px; /* reduced font size for smaller badge */
  letter-spacing:0.5px;
  padding:4px 8px; /* reduced padding to shrink overall badge */
  border-radius:999px;
  box-shadow:0 6px 14px rgba(196,28,28,0.12);
  pointer-events:none; /* decorative only; control remains via player UI */
  -webkit-user-select:none;
  user-select:none;
  transition:opacity .14s ease, transform .14s ease;
}

/* Reduce size slightly on smaller hero heights */
@media (max-width:760px){
  .hero-live-badge{ top:10px; right:10px; font-size:11px; padding:5px 8px; }
}

/* make the "EN VIVO AHORA" label match the clock color */
.hero-sub .live-now{
  color: #e43a3a;
  font-weight:700;
  letter-spacing:0.6px;
}

/* center play button like reference */
.center-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,0.6);
  transition:transform .18s ease, opacity .18s ease;
}
.center-play:hover{transform:translate(-50%,-50%) scale(1.05)}
.cp-triangle{display:inline-block;width:0;height:0;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px}

/* subtle live badge */
.live-badge{
  display:inline-block;
  background:linear-gradient(90deg,#e43a3a,#c62828);
  color: #fff;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.6px;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(196,28,28,0.16);
  margin-right:8px;
  align-self:center;
}

/* fullscreen control style */
.ctrl.fullscreen{
  background:rgba(255,255,255,0.02);
  border-radius:6px;
  padding:8px 10px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* player control bar bottom */
.player-controls{
  display:flex;align-items:center;gap:12px;padding:10px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.45));border-radius:6px;backdrop-filter:blur(6px);
}
.time{color:var(--muted);font-size:13px;width:42px;text-align:center}
.progress-shell{flex:1;height:6px;background:rgba(255,255,255,0.04);border-radius:6px;position:relative;overflow:hidden}
.progress-bar{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff6b6b);transition:width .2s linear}
.controls-right{display:flex;gap:8px;align-items:center;position:relative}
.ctrl{background:rgba(255,255,255,0.02);border:0;padding:8px;border-radius:6px;color:var(--text);cursor:pointer;font-weight:500}

/* Volume popup that appears when hovering the mute button */
.volume-shell{
  position: absolute;
  bottom: 62px; /* sits above the control bar */
  right: 8px;
  width:220px;
  padding:10px;
  background:linear-gradient(180deg, rgba(10,10,10,0.98), rgba(8,8,8,0.98));
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.6);
  display:flex;
  gap:10px;
  align-items:center;
  pointer-events:auto;
  transform-origin:100% 100%;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:30;
}

/* show shell when parent has class 'show-volume' */
.ctrl.mute.show-volume + .volume-shell,
.volume-shell.show {
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* small speaker preview to left inside shell */
.volume-shell .v-icon{
  width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;color:var(--text);
}

/* visual volume bar (horizontal) */
.volume-slider{
  flex:1;
  height:8px;
  background:rgba(255,255,255,0.04);
  border-radius:6px;
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.volume-fill{
  position:absolute;left:0;top:0;height:100%;width:60%;background:linear-gradient(90deg,var(--accent),#ff6b6b);border-radius:6px;transition:width .08s linear;
}

/* make the shell small on narrow viewports */
@media (max-width:900px){
  .volume-shell{right:4px;width:180px;bottom:68px}
}

/* hide the previous hero-actions (if any) */
.hero-actions{display:none}

/* responsive */
@media (max-width:1100px){
  .player-info{max-width:72%}
  .center-play{width:72px;height:72px}
  .cp-triangle{border-left:14px}
  .hero-title{font-size:32px}
}

/* Mobile-first readability and tappable adjustments */
@media (max-width:760px){
  :root{
    --base-font-size: 15px;
    --menu-icon-size: 20px;
  }
  body{font-size:var(--base-font-size);}
  .hero{height:360px}
  .hero-title{font-size:22px}
  .player-info{max-width:100%}
  .center-play{width:64px;height:64px}
  .menu-item{padding:10px; padding-inline:10px;}
  .menu-item .mi{width:var(--touch-target);height:var(--touch-target);border-radius:8px}
  .v-controls button{width:48px;height:48px;min-width:48px;min-height:48px}
  .bp-btn{width:44px;height:44px}
  .bp-play{width:44px;height:44px}
  .ad-banner{border-radius:6px}
  .v-slide img{max-height:280px}
  .features-title{font-size:22px}
  .features-intro{font-size:14px}
}

/* ROWS (carousel) */
.rows{display:flex;flex-direction:column;gap:22px}
.row{padding:0 2px}
.row-header{display:flex;align-items:center;justify-content:space-between;padding:0 6px;margin-bottom:8px}
.row-header h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-0.02em}
.row-controls{display:flex;gap:8px}
.row-controls button{width:42px;height:42px;border-radius:6px;border:0;background:rgba(0,0,0,0.45);color:var(--text);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.row-track{
  display:flex;gap:12px;padding:8px 6px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
}
.row-track:focus{outline:none}
.row-track::-webkit-scrollbar{height:8px}
.row-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:8px}
.tile{width:300px;flex:0 0 300px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.02));border-radius:6px;overflow:hidden;scroll-snap-align:start;transition:transform .18s ease}
.tile:hover{transform:translateY(-8px) scale(1.03)}
.tile .thumb{
  height:170px;
  background:linear-gradient(135deg,#0f1b20,#061116);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* make embedded YouTube responsive and fill the thumb area */
.tile .thumb iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.tile .meta{padding:10px}
.tile .v-title{font-weight:500;letter-spacing:-0.02em}
.tile .v-time{font-size:12px;color:var(--muted);margin-top:6px}
.play-overlay{
  position:absolute;
  right:10px;
  bottom:10px;
  width:34px;
  height:34px;
  border-radius:6px;
  background:rgba(255,255,255,0.06); /* subtle translucent shell */
  backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: none;
  transition:transform .12s ease, background .12s ease;
}
.play-overlay:hover{ transform:translateY(-4px) scale(1.03); background:rgba(255,255,255,0.08); }

.play-overlay:after{
  content:"";
  display:inline-block;
  width:0;
  height:0;
  border-left:10px solid rgba(255,255,255,0.95); /* slightly smaller, softer triangle */
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  margin-left:1px;
}

/* RADIO TILES - upgraded reference-style layout: three prominent station cards with strong visual hierarchy */
.radios-row .row-track{
  display:flex;
  justify-content:center; /* center the three main stations */
  gap:28px;
  padding:20px;
  overflow:auto;
  align-items:center;
  transform: translateZ(0);
  background: linear-gradient(180deg, rgba(255,255,255,0.004), rgba(0,0,0,0.002));
  border-radius:12px;
}

/* card: wider, taller and more focused on artwork and live state */
.radio-tile{
  width:420px;
  flex:0 0 420px;
  background: linear-gradient(180deg, rgba(255,255,255,0.006), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:16px;
  display:flex;
  gap:18px;
  align-items:center;
  scroll-snap-align:start;
  position:relative;
  transition:transform .16s ease, box-shadow .16s ease, border-color .12s ease;
  box-shadow: 0 18px 46px rgba(0,0,0,0.56);
  border: 1px solid rgba(255,255,255,0.025);
  backdrop-filter: blur(8px);
}
.radio-tile:hover{
  transform: translateY(-10px);
  box-shadow: 0 34px 70px rgba(0,0,0,0.66);
  border-color: rgba(255,255,255,0.05);
}

/* larger thumbnail area to match reference visual weight */
.r-thumb{
  width:240px;
  height:120px;
  border-radius:12px;
  background:#030404;
  position:relative;
  overflow:hidden;
  flex:0 0 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow: inset 0 -16px 36px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.02);
}

/* thumbnail image: clearer, slightly brighter when active */
.r-thumb-img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  z-index:1;
  opacity:0.98;
  filter:brightness(0.65) contrast(0.96);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, filter .18s ease;
}
.radio-tile.playing .r-thumb-img{
  filter:brightness(0.92) saturate(1.05);
  transform:scale(1.03);
}

/* subtle dark overlay for legibility */
.r-wave{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
  opacity:0.42;
  pointer-events:none;
  z-index:2;
}

/* play button: slightly reduced and anchored bottom-left of thumbnail
   improved: centered glyphs for perfect symmetry and stable sizing */
.r-play{
  z-index:6;
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#ff3f3f,#d92a2a);
  color:#fff;
  font-weight:900;
  border-radius:50%;
  font-size:14px;
  border:0;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(201,43,43,0.16);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  position:absolute;
  left:12px;
  bottom:10px;
  /* ensure predictable layout for pseudo elements */
  line-height:1;
  overflow:visible;
  -webkit-font-smoothing:antialiased;
}

/* Centered play triangle (using an inline SVG-like shape via pseudo) */
.r-play::before,
.r-play::after{
  content: "";
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* default: show triangle */
.r-play::before{
  width:0;
  height:0;
  border-left:12px solid #fff;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  /* subtle translate for optical centering on circle */
  transform: translate(calc(-50% + 1px), -50%);
  opacity:1;
}

/* when playing, hide triangle and show pause bars */
.r-play[aria-pressed="true"]::before{
  opacity:0;
}

/* pause glyph rendered as two vertical bars for perfect centering */
.r-play[aria-pressed="true"]::after{
  content: "";
  width:10px;
  height:14px;
  background:linear-gradient(#fff,#fff);
  display:block;
  position:absolute;
  transform:translate(-50%,-50%);
  left:50%;
  top:50%;
  border-radius:1px;
  box-shadow: -6px 0 0 #fff inset;
  /* using box-shadow creates the second bar while keeping sizing consistent */
}

/* live badge: slightly reduced for subtle presence */
.r-live{
  position:absolute;
  top:10px;
  right:10px;
  left:auto;
  z-index:7;
  background: linear-gradient(90deg,#e43a3a,#c62828);
  color:#fff;
  font-weight:800;
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;
  box-shadow: 0 8px 18px rgba(196,28,28,0.14);
  text-transform:uppercase;
  letter-spacing:0.6px;
}

/* metadata column: right side aligned to center vertically */
.r-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-self:stretch;
  justify-content:center;
  min-width:0;
}
.r-meta .r-title{font-weight:800;font-size:16px;color:var(--text);letter-spacing:-0.02em;text-transform:uppercase}
.r-meta .r-sub{color:var(--muted);font-size:13px;line-height:1.35;font-weight:500}

/* status text emphasized below the title */
.r-meta .r-status{
  font-size:12px;
  color:#ffb3b3;
  opacity:1;
  font-weight:800;
  margin-top:6px;
}

/* visualizer: wider, centered under metadata when active and slightly visible at idle to match reference */
.r-visualizer{
  display:flex;
  align-items:end;
  gap:6px;
  margin-top:10px;
  height:26px;
  width:160px;
  opacity:0.18;
  transform:translateY(2px);
  transition:opacity .18s ease, transform .18s ease;
  position:relative;
}
.r-visualizer .bar{
  width:3px;
  height:14px;
  border-radius:2px;
  background: linear-gradient(180deg,#ff9b9b,#d94b4b);
  transform-origin:50% 100%;
  will-change:transform, opacity;
  animation: vizIdleSmall 220ms ease-in-out infinite;
}

/* reveal stronger visualizer on playing */
.radio-tile.playing .r-visualizer{
  opacity:1;
  transform:translateY(0);
}
.radio-tile.playing .r-visualizer .bar{
  animation-name: vizPulseSmall;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* stagger durations for lively effect (unified shorter durations for smoother feel) */
.r-visualizer .bar:nth-child(1){ animation-duration:220ms; animation-delay:-120ms; }
.r-visualizer .bar:nth-child(2){ animation-duration:220ms; animation-delay:-60ms; }
.r-visualizer .bar:nth-child(3){ animation-duration:220ms; animation-delay:-180ms; }
.r-visualizer .bar:nth-child(4){ animation-duration:220ms; animation-delay:-40ms; }
.r-visualizer .bar:nth-child(5){ animation-duration:220ms; animation-delay:-140ms; }
.r-visualizer .bar:nth-child(6){ animation-duration:220ms; animation-delay:-80ms; }

/* reuse keyframes already present for animations */
@media (prefers-reduced-motion: reduce){
  .r-visualizer .bar{ animation: none !important; transform:none !important; }
  .r-visualizer{opacity:1; transform:none;}
}

/* responsive adjustments */
@media (max-width:1200px){
  .radio-tile{width:360px;flex:0 0 360px}
  .r-thumb{width:200px;height:104px}
}
@media (max-width:900px){
  .radios-row .row-track{ gap:14px; padding:12px; justify-content:flex-start; overflow-x:auto; }
  .radio-tile{width:280px;flex:0 0 280px}
  .r-thumb{width:160px;height:88px}
}

/* Banner ad 729x90 (responsive) */
.ad-banner-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px 6px;
  margin-top:8px;
}
.ad-banner{
  width:729px;
  height:90px;
  max-width:100%;
  background: linear-gradient(90deg, rgba(229,9,20,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  overflow:hidden;
}
.ad-banner a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  color:var(--text);
  width:100%;
  height:100%;
}
.ad-banner .ad-label{
  font-weight:800;
  font-size:18px;
  letter-spacing:0.6px;
}
.ad-banner .ad-size{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

/* subtle hover to indicate clickability */
.ad-banner:hover{ transform: translateY(-4px); transition: transform .18s ease; box-shadow: 0 26px 58px rgba(0,0,0,0.72); }

/* ensure the ad scales down nicely on narrow viewports */
@media (max-width:760px){
  .ad-banner{ height:72px; }
  .ad-banner .ad-label{ font-size:16px; }
  .ad-banner .ad-size{ font-size:12px; }
}

/* VERTICAL-IMAGE CAROUSEL (displayed horizontally, images are portrait/vertical) */
.v-carousel-wrap{ padding:14px 6px 26px; margin-top:6px; }
.v-carousel-header{ display:flex; align-items:center; justify-content:space-between; padding:0 6px 8px; }
.v-carousel-header h3{
  margin:0;
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--text);
  display:inline-flex;
  align-items:baseline;
  gap:10px;
}
.v-carousel-header h3 .v-subtitle{
  font-size:14px;
  font-weight:400; /* thinner than the main title */
  color:var(--muted);
  margin-left:6px;
  letter-spacing:0;
}

/* Increase button hit area to meet touch targets and visual consistency */
.v-controls{ display:flex; gap:10px; }
.v-controls button{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius:8px;
  border:0;
  background:rgba(0,0,0,0.45);
  color:var(--text);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.v-controls button:active{ transform: translateY(1px) scale(0.995); }
.v-controls button:focus{ outline:2px solid rgba(228,9,20,0.18); outline-offset:3px; }

/* Allow native horizontal scrolling and natural touch gestures (drag with momentum).
   We keep scroll-snap to assist keyboard navigation but do not block touch events. */
.v-carousel{
  margin-top:6px;
  /* allow horizontal scroll with visible scrollbar for mobility */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:12px 6px;
  background:transparent;
  border-radius:8px;
  touch-action: pan-x; /* allow horizontal panning */
  -ms-touch-action: pan-x;
  /* use default scrollbar behavior but customize appearance for better UX */
  scrollbar-width: thin; /* Firefox: thinner scrollbar */
  scrollbar-color: var(--accent) #0b0b0b; /* red thumb on dark track */
  -ms-overflow-style: auto; /* IE 10+ / Edge */
}
.v-carousel:focus{ outline:none; }

/* Track holds vertical (portrait) images laid out horizontally */
.v-carousel-track{
  display:flex;
  gap:14px;
  align-items:center;
  padding-bottom:6px;
}

/* Each slide is a narrow vertical card */
.v-slide{
  scroll-snap-align:center;
  flex:0 0 160px; /* narrow vertical card width */
  width:160px;
  height:320px; /* fixed visual height to keep portrait cards aligned */
  border-radius:8px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.v-slide img{
  width:100%;
  height:100%;
  object-fit:contain; /* show full portrait without cropping */
  background-color: #000; /* subtle letterbox background for consistency */
  display:block;
  border-radius:8px;
  transform-origin:center;
  transition: transform .22s ease, filter .18s ease;
  filter:brightness(0.98);
}
.v-slide:hover{ transform:translateY(-6px); box-shadow: 0 18px 46px rgba(0,0,0,0.56); }
.v-slide:hover img{ transform:scale(1.03); filter:brightness(0.98); }

/* smaller on narrow screens */
@media (max-width:900px){
  .v-slide{ flex:0 0 132px; width:132px; }
  .v-slide img{ height:200px; }
}
@media (max-width:600px){
  .v-slide{ flex:0 0 110px; width:110px; }
  .v-slide img{ height:170px; }
}

/* make track hide native scrollbar by default but show on hover/focus for discoverability */
/* Custom slim, rounded scrollbar for the vertical carousel (visual only) */
.v-carousel::-webkit-scrollbar{
  height:6px; /* slim: 4-6px range */
  background: transparent;
}
.v-carousel::-webkit-scrollbar-track{
  background: rgba(12,12,12,0.85); /* dark track that integrates with site */
  border-radius:999px;
}
.v-carousel::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, var(--accent), #c62828); /* red GEX indicator */
  border-radius:999px;
  min-height: 20px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
}

/* accessible focus styles for slides */
.v-slide:focus-within, .v-slide:focus{ outline:2px solid rgba(228,9,20,0.18); outline-offset:4px; }

/* Buttons visually integrated with header */
.v-prev, .v-next{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

/* small helper to center-first on load in JS */

/* FOOTER */
.footer{
  border-top:1px solid rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  color:var(--muted);
  font-size:13px;
  gap:12px;
  min-height:56px;
}

/* left area (copyright / small info) */
.footer-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.footer-left .footer-copyright{ font-weight:500; color:var(--muted); font-size:13px; }

/* footer navigation - horizontal menu */
.footer-nav{ margin-left:auto; }
.footer-menu{
  list-style:none;
  display:flex;
  gap:12px;
  margin:0;
  padding:0;
  align-items:center;
  flex-wrap:wrap;
}
.footer-menu li{ display:inline-block; }
.footer-link{
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  padding:8px 10px;
  border-radius:6px;
  background:transparent;
  transition:color .12s ease, background .12s ease, transform .12s ease;
  font-size:13px;
}
.footer-link:hover,
.footer-link:focus{
  color:var(--text);
  background:rgba(255,255,255,0.02);
  transform:translateY(-2px);
  outline:none;
}

/* Remove special highlight for last footer item (social icons area) so it matches other links */
.footer-menu li:last-child .footer-link{
  background:transparent;
  color:var(--muted);
  font-weight:500;
  box-shadow:none;
}
.footer-menu li:last-child .footer-link:hover,
.footer-menu li:last-child .footer-link:focus{
  color:var(--text);
  background:rgba(255,255,255,0.02);
  transform:translateY(-2px);
}

/* Responsive: stack on small screens */
@media (max-width:640px){
  .footer{ flex-direction:column; align-items:flex-start; gap:8px; padding:12px; min-height:auto; }
  .footer-nav{ width:100%; }
  .footer-menu{ width:100%; justify-content:flex-start; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  .footer-menu li:last-child .footer-link{ padding-left:12px; padding-right:12px; }
}

/* ------------------ Bottom Player (GEX fixed radio bar) ------------------ */
/* Toggle this flag in JS: if set to false the bar will not initialize visually */
.bottom-player{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:88px;
  background: linear-gradient(180deg, rgba(6,6,6,0.98), rgba(3,3,3,0.95));
  border-top: 2px solid rgba(228,9,20,0.14); /* subtle brand red line */
  box-shadow: 0 -18px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px) saturate(1.05);
  z-index:80;
  transition: transform .22s ease, opacity .22s ease, bottom .22s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  font-family: inherit;
  color:var(--text);
}

/* inner layout */
.bottom-player .bp-inner{
  width:100%;
  max-width:1180px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative; /* enable absolute centering of controls without changing layout */
}

/* Ensure the left info block has a fixed width so changes to text/art do not shift center controls */
.bottom-player .bp-left{
  width:340px; /* fixed width reserve for artwork + meta; tweak if needed but keep consistent */
  min-width:0;
  overflow:hidden; /* prevent content from expanding container */
}

/* Keep title/sub fixed and truncated (redundant safety) */
.bottom-player .bp-title,
.bottom-player .bp-sub{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

/* Center controls absolutely so they remain visually centered regardless of left content width */
.bottom-player .bp-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  flex:0 0 auto; /* avoid flex growth/shrink affecting center positioning */
  pointer-events:auto;
  z-index:2;
}

/* MOBILE: flow controls to the right to avoid covering station text */
@media (max-width:560px){
  /* make left area flexible so title/truncation can use remaining space */
  .bottom-player .bp-left{
    width:auto;
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    order:1;
    padding-left:4px;
  }

  /* place center controls after the left block and push them more strongly to the right.
     Use a higher order and ensure they do not overlap by giving them fixed flex-basis and preventing shrink. */
  .bottom-player .bp-center{
    position:static;
    left:auto;
    transform:none;
    margin-left:auto; /* push controls to the far right */
    display:flex;
    gap:8px;
    justify-content:flex-end;
    order:4; /* move controls after right-side area to avoid overlapping long titles */
    z-index:3;
    flex:0 0 auto; /* reserve natural width and avoid shrinking over text */
    padding-right:6px;
    pointer-events:auto;
  }

  /* ensure right-side controls remain between meta and center buttons */
  .bp-right{
    order:3;
    display:flex;
    align-items:center;
    gap:8px;
  }
}

/* left block: art + meta */
.bp-left{display:flex;align-items:center;gap:12px;min-width:0}
.bp-art{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.03);
  flex:0 0 60px;
  overflow:hidden; /* ensure image is clipped to the circle */
  display:block;
}
.bp-meta{min-width:0;overflow:hidden}
.bp-title{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.bp-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-badge{margin-left:8px;background:linear-gradient(90deg,#e43a3a,#c62828);color:#fff;padding:6px 8px;border-radius:999px;font-weight:800;font-size:11px;display:inline-block;box-shadow:0 8px 18px rgba(196,28,28,0.12);}

/* center controls */
.bp-center{display:flex;align-items:center;gap:12px;justify-content:center;flex:1}
.bp-btn{width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(180deg,#ff4b4b,#d92a2a);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 26px rgba(201,43,43,0.14);transition:transform .18s ease}
.bp-btn:active{transform:scale(0.98)}
.bp-play{width:48px;height:48px;border-radius:50%;font-size:16px;box-shadow:0 10px 28px rgba(201,43,43,0.16)}

/* Station selector buttons: modern dark rounded pills that match GEX identity */
.bp-stations{display:flex;gap:8px;align-items:center}
/* Glassmorphism for station buttons: translucent surface, subtle blur and inner highlight */
.bp-station-btn{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:var(--text);
  padding:8px 12px;
  border-radius:9999px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:64px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(2,6,12,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  text-transform:uppercase;
  color:var(--muted);
}

/* Hover / focus with glassy highlight */
.bp-station-btn:hover,
.bp-station-btn:focus{
  background: linear-gradient(180deg, rgba(228,9,20,0.08), rgba(255,255,255,0.03));
  border-color: rgba(228,9,20,0.18);
  color:var(--text);
  outline:none;
  transform:translateY(-1px);
  box-shadow: 0 10px 28px rgba(228,9,20,0.08), inset 0 1px 0 rgba(255,255,255,0.045);
}

/* Active station visual */
.bp-station-btn.active,
.bp-station-btn[aria-selected="true"]{
  background: linear-gradient(90deg,var(--accent),#ff6b6b);
  color:#fff;
  box-shadow: 0 8px 20px rgba(228,9,20,0.14);
  transform: translateY(-1px) scale(1.01);
}

/* Accessible focus ring */
.bp-station-btn:focus{
  box-shadow: 0 0 0 4px rgba(228,9,20,0.10);
}

/* right side: visualizer + controls */
.bp-right{display:flex;align-items:center;gap:12px}
.bp-visualizer{display:flex;gap:6px;align-items:end;height:40px;width:120px;padding:0 6px}
.bp-visualizer .vbar{flex:0 0 6px;height:6px;background:linear-gradient(180deg,#ff8b8b,#d93b3b);border-radius:3px;transform-origin:50% 100%;transition:height .12s linear}

/* visualizer idle small bars */
.bp-visualizer.paused .vbar{height:6px;opacity:0.25}
.bp-visualizer.playing .vbar{animation:bpViz 220ms ease-in-out infinite;opacity:1}

/* stagger animation */
.bp-visualizer.playing .vbar:nth-child(1){animation-delay:-120ms}
.bp-visualizer.playing .vbar:nth-child(2){animation-delay:-60ms}
.bp-visualizer.playing .vbar:nth-child(3){animation-delay:-180ms}
.bp-visualizer.playing .vbar:nth-child(4){animation-delay:-30ms}
.bp-visualizer.playing .vbar:nth-child(5){animation-delay:-90ms}

/* controls block */
.bp-controls{display:flex;align-items:center;gap:10px}
.bp-quality{font-size:12px;color:var(--muted);background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:8px;font-weight:700}

/* Desktop horizontal slider (default) */
.bp-volume input[type="range"]{width:96px}

/* Mobile: hide the horizontal range and show a speaker icon that toggles a floating vertical slider */
@media (max-width:560px){
  /* hide the inline desktop slider (it is replaced by an icon) */
  .bp-volume input[type="range"]{ display:none !important; width:0 !important; height:0 !important; opacity:0; pointer-events:none; }

  /* ensure the volume container remains a layout participant and the icon occupies its natural space */
  .bp-volume{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-width:40px;
    flex:0 0 auto;
  }

  /* speaker icon button to replace the slider - visible and occupies space like other controls */
  .bp-volume .bp-volume-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    flex:0 0 40px; /* reserve space */
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.04);
    color:var(--text);
    cursor:pointer;
    box-shadow:0 8px 18px rgba(0,0,0,0.28);
    transition:transform .12s ease, background .12s ease;
    position:relative;
  }

  .bp-volume .bp-volume-icon svg{ width:18px; height:18px; display:block; fill: currentColor; }

  /* floating vertical volume shell (absolutely positioned, doesn't affect bar layout) */
  .mobile-volume-shell{
    position:fixed;
    bottom:calc(100% - 100%); /* fallback no-op to avoid layout influence */
    right:18px;
    width:48px;
    height:160px;
    background:linear-gradient(180deg, rgba(8,8,8,0.98), rgba(12,12,12,0.98));
    border-radius:12px;
    padding:10px 8px;
    box-shadow: 0 18px 46px rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:200;
    transform-origin:100% 100%;
    opacity:0;
    visibility:hidden;
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
    -webkit-user-select:none;
  }

  /* position the floating shell above the player when shown (absolute overlay) */
  .mobile-volume-shell.show{
    bottom:106px; /* floating above the compact bar */
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }

  /* vertical slider styling: rotate the input but keep accessibility */
  .mobile-volume-shell .vertical-range{
    -webkit-appearance:none;
    appearance:none;
    width:140px;
    height:36px;
    transform: rotate(-90deg);
    transform-origin:center center;
    background:transparent;
  }

  .mobile-volume-shell .vertical-range::-webkit-slider-runnable-track{
    height:6px;
    border-radius:6px;
    background: linear-gradient(90deg, var(--accent), #ff6b6b);
  }
  .mobile-volume-shell .vertical-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    border:3px solid var(--accent);
    margin-top:-4px;
    box-shadow:0 6px 14px rgba(228,9,20,0.16);
  }
  .mobile-volume-shell .vertical-range::-moz-range-track{
    height:6px;
    border-radius:6px;
    background: linear-gradient(90deg, var(--accent), #ff6b6b);
  }
  .mobile-volume-shell .vertical-range::-moz-range-thumb{
    width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--accent);
  }

  /* small helper hint under the icon when active */
  .bp-volume .bp-volume-icon.active{ transform:scale(0.98); box-shadow:0 10px 22px rgba(228,9,20,0.08); }
}

/* Red-themed range styling to match GEX palette (override default blue on some browsers) */
.bp-volume input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: transparent;
  cursor: pointer;
}

/* WebKit track */
.bp-volume input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:8px;
  background: linear-gradient(90deg, var(--accent), #ff6b6b);
  box-shadow: none;
}

/* WebKit thumb */
.bp-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  margin-top: -6px; /* center the circular thumb on the track */
  width:18px;
  height:18px;
  border-radius:50%;
  background: linear-gradient(180deg, #fff, #ffffff);
  border: 4px solid var(--accent);
  box-shadow: 0 6px 14px rgba(228,9,20,0.16);
}

/* Firefox track and thumb */
.bp-volume input[type="range"]::-moz-range-track{
  height:8px;
  border-radius:8px;
  background: linear-gradient(90deg, var(--accent), #ff6b6b);
}
.bp-volume input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background: linear-gradient(180deg, #fff, #ffdede);
  border: 4px solid var(--accent);
  box-shadow: 0 6px 14px rgba(228,9,20,0.16);
}

/* IE/Edge fallback */
.bp-volume input[type="range"]::-ms-track{
  height:8px;
  border-radius:8px;
  background: transparent;
  color: transparent;
}
.bp-volume input[type="range"]::-ms-fill-lower{
  background: linear-gradient(90deg, var(--accent), #ff6b6b);
  border-radius:8px;
}
.bp-volume input[type="range"]::-ms-fill-upper{
  background: rgba(255,255,255,0.06);
  border-radius:8px;
}
.bp-info{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}

/* toggle button to hide/restore the bar (small chevron) */
.bp-toggle{position:fixed;right:14px;bottom:92px;background:linear-gradient(180deg,#0b0b0b,#050505);color:var(--muted);border:0;padding:8px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.5);cursor:pointer;z-index:81;transition:transform .18s ease}
.bp-hidden{transform:translateY(110%);opacity:0;visibility:hidden}

/* responsive behavior */
@media (max-width:900px){
  .bottom-player{height:76px;padding:8px 12px}
  .bp-right .bp-visualizer{width:84px}
  .bp-center{gap:8px}
  .bp-play{width:44px;height:44px}
}
@media (max-width:560px){
  /* compact mobile player: reduce height, tighten spacing and vertically center content */
  .bottom-player{ height:68px; padding:6px 10px; }
  .bp-inner{ max-width:100%; padding:0 8px; align-items:center; gap:8px; }

  /* left: smaller artwork and condensed meta */
  .bottom-player .bp-left{ width:260px; display:flex; align-items:center; gap:8px; padding-left:4px; }
  .bp-art{ width:48px; height:48px; flex:0 0 48px; border-radius:10px; }

  /* collapse subtitle, keep title single-line and vertically centered */
  .bp-left .bp-sub{ display:none; }
  .bp-title{ font-size:13px; font-weight:800; line-height:1; display:block; margin:0; }

  /* center controls kept truly centered and slightly smaller */
  .bp-center{ position:absolute; left:50%; transform:translateX(-50%); gap:8px; }
  .bp-btn{ width:40px; height:40px; }
  .bp-play{ width:44px; height:44px; font-size:15px; }

  /* right side: hide nonessential controls to reduce footprint */
  .bp-right{ display:flex; align-items:center; gap:8px; min-width:0; }
  .bp-right .bp-controls { gap:8px; align-items:center; }
  .bp-right .bp-visualizer, .bp-right .bp-quality { display:none; }

  /* hide inline horizontal slider and replace by small speaker icon (already injected by JS) */
  .bp-volume input[type="range"]{ display:none !important; width:0 !important; height:0 !important; opacity:0; pointer-events:none; }

  /* speaker icon styling (compact) */
  .bp-volume .bp-volume-icon{
    display:inline-flex;
    width:36px;
    height:36px;
    border-radius:10px;
    padding:6px;
    box-shadow:0 8px 18px rgba(0,0,0,0.22);
  }
  .bp-volume .bp-volume-icon svg{ width:16px; height:16px; }

  /* floating vertical volume shell: smaller and closer to the player for quick reach */
  .mobile-volume-shell{
    bottom:106px; /* sits just above the compact bar on iPhones */
    right:12px;
    width:44px;
    height:140px;
    padding:8px 6px;
  }
  .mobile-volume-shell .vertical-range{ width:120px; height:26px; transform: rotate(-90deg); }

  /* toggle button position adjusted to avoid overlap with system UI */
  .bp-toggle{ right:12px; bottom:76px; }

  /* ensure text truncation and vertical centering in very narrow viewports */
  .bp-left, .bp-meta { min-width:0; overflow:hidden; align-items:center; }
  .bp-title{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

  /* keep accessible focus ring compact */
  .bp-station-btn:focus{ box-shadow: 0 0 0 3px rgba(228,9,20,0.10); }

  /* preserve smaller thumb styling */
  .bp-volume input[type="range"]::-webkit-slider-thumb,
  .bp-volume input[type="range"]::-moz-range-thumb{
    width:14px;
    height:14px;
    border-width:3px;
  }
}

/* accessibility focus */
/* Global visible focus for keyboard users without changing appearance for mouse users */
:root { --gex-focus: rgba(228,9,20,0.20); --gex-focus-ring: 3px; }

/* Focus-visible: clear, high-contrast ring applied to interactive elements when focused via keyboard */
:focus {
  outline: none;
}
:focus-visible, button:focus, a:focus, [role="button"]:focus, [role="tab"]:focus, [role="link"]:focus, .gex-lb-nav:focus {
  outline: var(--gex-focus-ring) solid var(--gex-focus);
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(228,9,20,0.06);
}

/* Ensure player control buttons remain perfectly circular under focus/active states.
   This overrides the generic focus border-radius only for the specific controls below. */
.bp-btn,
.bp-play,
.bp-prev,
.bp-next,
.center-play,
.r-play {
  border-radius: 50% !important;
}

/* Keep circular shape when focused / focus-visible */
.bp-btn:focus,
.bp-btn:focus-visible,
.bp-play:focus,
.bp-play:focus-visible,
.bp-prev:focus,
.bp-prev:focus-visible,
.bp-next:focus,
.bp-next:focus-visible,
.center-play:focus,
.center-play:focus-visible,
.r-play:focus,
.r-play:focus-visible {
  border-radius: 50% !important;
}

/* Also preserve circle while active/pressed */
.bp-btn:active,
.bp-play[aria-pressed="true"],
.r-play[aria-pressed="true"],
.bp-btn[aria-pressed="true"] {
  border-radius: 50% !important;
}

/* keep previous bottom-player focus rule but rely on focus-visible for keyboard */
.bottom-player .bp-btn:focus, .bp-info:focus, .bp-toggle:focus{
  outline:2px solid rgba(228,9,20,0.18);
  outline-offset:3px;
  border-radius:8px;
}

/* animation keyframes */
/* Simplified visual animations and lighter shadows for better performance */

/* Reduced visualizer animation intensity and default to paused (will only animate when playing) */
@keyframes bpViz{
  0%{height:6px}
  50%{height:16px}
  100%{height:6px}
}
.bp-visualizer.playing .vbar{animation:bpViz 900ms ease-in-out infinite}
.bp-visualizer.paused .vbar,
.r-visualizer .bar{animation: none;}

/* Reduce frequency/intensity of visualizer on radio tiles and bottom bar to save CPU */
.r-visualizer .bar,
.bp-visualizer .vbar{
  transition: height .18s ease;
  will-change: transform;
  /* set static default height to avoid constant layout work */
  height:8px;
  opacity:0.9;
}

/* Make bullet blink less frequent and subtle */
@keyframes bullet-blink{
  0%   { opacity:1; transform:scale(1); }
  60%  { opacity:0.72; transform:scale(0.98); }
  100% { opacity:1; transform:scale(1); }
}

/* Consolidated shadow vars kept with the primary :root (duplicate removed) */

/* Modal panel and some elements keep modest elevation */
.modal-panel,
.popup-video,
.radio-tile{ box-shadow: var(--shadow-heavy) !important; }

/* Disable or limit backdrop-filter usage (expensive) by replacing with semi-transparent backgrounds */
.modal-backdrop{ background: rgba(0,0,0,0.6); backdrop-filter: none; }
.bottom-player{ backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Reduce blur usage in small popups and volume shells */
.volume-shell{ box-shadow: 0 8px 18px rgba(0,0,0,0.36); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Avoid infinite animations unless element explicitly has 'playing' class */
.r-visualizer .bar{ animation: none; }
.radio-tile.playing .r-visualizer .bar{ animation-name: vizPulseSmall; animation-duration: 220ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

/* Limit will-change usage to only where necessary */
.gex-marquee-track,
.hero-bg,
.progress-bar { will-change: transform, opacity; }
.r-visualizer .bar, .bp-visualizer .vbar { will-change: height; }

/* Reduce shadow cost inside features */
.feature-ico{ box-shadow: 0 6px 12px rgba(0,0,0,0.28); }

/* Scrollbar behavior: keep hidden but avoid forced repaints on hover */
.row-track::-webkit-scrollbar-thumb{ background: transparent; border-radius:8px; }

/* Continuous marquee track: use transform only and pause when not visible */
.gex-marquee-track.paused{ transform: translateZ(0); }

/* Remove duplicated/overlapping heavy transitions by preferring short transitions */
/* Limit transitions to interactive controls for better paint performance; respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}
:root, button, a, .bp-btn, .r-play, .v-controls button, .gex-lb-nav, .gex-lb-close {
  /* only keep short, cheap transitions on a tight subset of interactive elements */
  transition: opacity .14s ease, transform .14s ease, background-color .14s ease;
}

/* Remove heavy backdrop-filter fallbacks (already deactivated elsewhere) and avoid global will-change abuse */
.hero-bg, .progress-bar { will-change: transform, opacity; } /* limited explicit will-change */

/* Keep responsive and layout rules intact (reapplying the final smaller responsive chunk) */
@media (max-width:1100px){
  .hero-info{max-width:70%}
  .tile{flex:0 0 240px;width:240px}
  .radio-tile{flex:0 0 180px;width:180px}
}

/* Modal popup for live player (lighter shadows & no blur) */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:60;
}
.modal.show{display:flex}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,0.6);
}
.modal-panel{
  position:relative;z-index:62;width:min(980px,92vw);max-height:86vh;background:linear-gradient(180deg,#050505,#0b0b0b);border-radius:10px;box-shadow:var(--shadow-heavy);overflow:hidden;padding:12px;display:flex;flex-direction:column;
}
.modal-close{
  position:absolute;right:10px;top:10px;background:rgba(255,255,255,0.03);border:0;color:var(--text);padding:8px;border-radius:8px;cursor:pointer;z-index:63;font-size:16px;
}
.modal-content{flex:1;display:flex;align-items:center;justify-content:center;padding:6px}
.popup-video{width:100%;height:min(62vh,560px);background:#000;border-radius:8px;outline:none;}

/* small screens: full width panel */
@media (max-width:720px){
  .modal-panel{width:96vw;border-radius:8px;padding:8px}
  .popup-video{height:54vh}
}

/* ------------------ Lightbox for Gallery (GEX TV) ------------------ */
/* Overlay container */
.gex-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  pointer-events:none;
}
.gex-lightbox.show{display:flex;pointer-events:auto}

/* Backdrop: near 90% opacity black */
.gex-lb-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.92);
  transition:opacity .22s ease;
  opacity:0;
}
.gex-lightbox.show .gex-lb-backdrop{ opacity:1; }

/* Panel holds controls and image */
.gex-lb-panel{
  position:relative;
  max-width:95vw;
  max-height:92vh;
  width:min(1100px,96vw);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:12px 18px;
  border-radius:10px;
  z-index:205;
  pointer-events:auto;
  outline:none;
}

/* Stage containing the image with subtle shadow and rounding */
.gex-lb-stage{
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:10px;
  box-shadow: 0 22px 48px rgba(0,0,0,0.6);
  transform-origin:center center;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
  opacity:0;
  transform: scale(0.985);
}
.gex-lightbox.show .gex-lb-stage{ opacity:1; transform: scale(1); }

/* Main image: fit within panel, maintain aspect ratio */
.gex-lb-img{
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 160px);
  width:auto;
  height:auto;
  border-radius:8px;
  display:block;
  object-fit:contain;
  box-shadow: 0 18px 42px rgba(0,0,0,0.6);
  transition: transform .28s ease, opacity .22s ease;
}

/* Navigation buttons: discreet, modern, circular glassy pills */
.gex-lb-nav{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color:var(--text);
  border:1px solid rgba(255,255,255,0.04);
  height:48px;
  width:48px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  cursor:pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
  z-index:206;
}
.gex-lb-nav:active{ transform: translateY(1px) scale(.995); }
.gex-lb-prev{ margin-right:8px; }
.gex-lb-next{ margin-left:8px; }

/* Close button moved below the image (centered pill under stage) */
.gex-lb-close{
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 12px; /* sits beneath the image */
  transform: translateX(-50%);
  height:36px;
  width:36px;
  border-radius:999px; /* round pill for centered placement */
  border:0;
  background:rgba(0,0,0,0.55);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:209;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  transition: transform .16s ease, opacity .16s ease;
}
/* make sure the close button doesn't overlap navigation pills on smaller screens */
.gex-lb-panel { padding-bottom: 56px; }

/* Mobile: enlarge touch targets and position nav floating over image sides */
@media (max-width:760px){
  .gex-lb-nav{ height:56px; width:56px; font-size:30px; border-radius:14px; opacity:0.98; }
  .gex-lb-panel{ padding:6px 10px; gap:8px; padding-bottom:72px; }
  .gex-lb-img{ max-width: calc(100vw - 96px); max-height: calc(100vh - 140px); }

  /* mobile: center the close button under the image and enlarge touch target */
  .gex-lb-close{
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 16px;
    transform: translateX(-50%);
    height:44px;
    width:44px;
    border-radius:999px;
    background:rgba(0,0,0,0.55);
  }

  /* Move prev/next next to the centered close button on mobile so the image area remains unobstructed.
     We place prev to the left of the close button and next to the right, keeping visual grouping and touch targets. */
  .gex-lb-prev, .gex-lb-next {
    position: absolute;
    bottom: 16px;
    height:56px;
    width:56px;
    z-index:210;
  }
  .gex-lb-prev {
    right: calc(50% + 68px); /* close button centered, space prev to the left */
    left: auto;
  }
  .gex-lb-next {
    left: calc(50% + 68px); /* space next to the right of the close button */
    right: auto;
  }

  /* Slightly reduce opacity overlap so controls stay visible without hiding image content */
  .gex-lb-prev, .gex-lb-next, .gex-lb-close { opacity:0.98; }
}

/* Gesture hint area (invisible but captures swipes) */
.gex-lb-stage:active{ cursor:grabbing; }

/* Skeleton / placeholder loaders (subtle, low-contrast) */
.gex-skeleton {
  position:relative;
  overflow:hidden;
  background-color: rgba(255,255,255,0.02);
  border-radius:8px;
}
.gex-skeleton::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.00) 100%);
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  pointer-events:none;
}
.gex-skeleton.loading::after{ transform: translateX(120%); }
.gex-skeleton.img-skeleton{ background-color: rgba(255,255,255,0.01); border-radius:8px; }
.gex-skeleton.portrait{ width:100%; height:100%; display:block; }
.gex-skeleton.small{ border-radius:6px; }

.player-shell.gex-skeleton{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  display:block;
}
.player-shell .skeleton-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
  pointer-events:none;
}
.skeleton-spinner{
  width:42px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  opacity:0.9;
  font-weight:700;
  color:rgba(255,255,255,0.75);
  transform:scale(1);
}

/* subtle shimmer for text blocks / dynamic areas */
.gex-skeleton.block{
  height:18px;
  width:100%;
  border-radius:6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
}
.gex-skeleton.row-placeholder{
  width:100%;
  height:140px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
}

/* reduce animation when prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .gex-skeleton::after{ transition:none; transform:none; display:none; }
}

/* Hide default focus outline, replace with GEX focus ring */
.gex-lb-nav:focus, .gex-lb-close:focus, .gex-lightbox:focus {
  outline: 3px solid rgba(228,9,20,0.14);
  outline-offset: 4px;
  border-radius:12px;
}

/* FEATURES section styles */
.features-section{
  margin:18px 0 6px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.02);
}
.features-wrap{max-width:1180px;margin:0 auto}
.features-title{
  margin:0 0 8px;
  font-size:28px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.02em;
  line-height:1.05;
  text-transform:none;
  position:relative;
  padding-bottom:8px;
}
.features-title::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width:56px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--accent),#ff6b6b);
  box-shadow:0 6px 12px rgba(228,9,20,0.08);
}
.features-intro{margin:0 0 12px;color:var(--muted);font-size:14px}

/* responsive grid of feature items */
.features-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  align-items:start;
}
.feature{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  background:transparent;
  border-radius:8px;
  min-height:72px;
}
.feature-ico{
  width:48px;height:48px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--accent);
  flex:0 0 48px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.28);
}
.feature-name{font-weight:700;color:var(--text);font-size:14px}
.feature-desc{color:var(--muted);font-size:13px;margin-top:6px}

/* ensure feature body stacks text neatly */
.feature-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}

/* smaller screens: fewer columns and tighter spacing */
@media (max-width:1100px){
  .features-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .feature-ico{width:44px;height:44px;font-size:20px}
}
@media (max-width:520px){
  .features-grid{grid-template-columns:1fr}
  .features-section{padding:12px}
  .feature{padding:10px;gap:10px}
  .feature-ico{width:40px;height:40px}
}