/* Rádio Só Flashback - acabamento fiel ao projeto (somente PC).
   Arquivo isolado. Não redefine o layout nem a votação no celular. */
@media screen and (min-width:891px) {
  /* Cores de fundo próximas ao mockup: lilás, azul profundo e pink, sem manchas no header. */
  .ambient-gradients {
    background:
      radial-gradient(ellipse 37% 44% at 15% 65%, rgba(165,32,81,.25), transparent 85%),
      radial-gradient(ellipse 31% 45% at 56% 47%, rgba(30,62,163,.17), transparent 78%),
      radial-gradient(ellipse 22% 37% at 83% 64%, rgba(171,32,162,.20), transparent 84%),
      linear-gradient(180deg, rgba(5,5,19,.44) 1%, rgba(7,4,18,.12) 51%, rgba(5,3,14,.56) 100%);
  }
  .ambient-art { opacity:.32; filter:blur(65px) brightness(.44) saturate(1.54); }

  /* Header sobre uma tarja escura, com ondas de luz reais em vez de borrões. */
  .site-shell .site-header {padding:19px clamp(17px,1.8vw,32px) 0;justify-content:center;align-items:flex-start;}
  .site-shell .site-header::before {
    content:'';
    top:13px;
    left:clamp(17px,1.8vw,32px);
    right:clamp(17px,1.8vw,32px);
    height:101px;
    border:1px solid rgba(107,162,255,.66);
    border-radius:22px;
    background:
      url('/assets/neon/header-ondas-pc.svg') center center / 100% 100% no-repeat,
      linear-gradient(180deg,rgba(10,12,36,.96),rgba(17,11,41,.90) 58%,rgba(15,11,36,.92));
    box-shadow:inset 0 1px 1px rgba(172,214,255,.19),0 0 14px rgba(51,132,255,.19),0 0 25px rgba(155,35,255,.18),0 15px 30px rgba(0,0,0,.32);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }
  .site-shell .site-header::after { content:none; display:none; }
  .site-shell .site-header .brand {
    position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;
    width:min(1050px,74vw);max-width:calc(100% - 120px);
    padding:15px 8px 16px;
    gap:0;
    text-align:center;
    filter:none;
  }
  .site-shell .site-header .brand::after {
    left:50%; bottom:5px; height:4px;
    width:min(445px,40vw);
    border-radius:999px;
    background:linear-gradient(90deg,transparent,#10d6ff 15%,#178dff 44%,#bb48fc 76%,transparent);
    box-shadow:0 0 8px rgba(23,196,255,.57),0 0 13px rgba(185,62,255,.4);
  }
  .site-shell .site-header .brand-bars,.site-shell .site-header .brand-tag{display:none!important;}
  .site-shell .site-header .brand-words{
    display:flex!important;align-items:baseline;justify-content:center;gap:.23em;
    min-width:0;width:auto;
    line-height:1.05;
    white-space:nowrap;
    font:italic 900 clamp(27px,3.1vw,52px)/1.03 'Barlow Condensed','Arial Narrow',Arial,sans-serif;
    letter-spacing:.7px;
    text-transform:uppercase;
  }
  .site-shell .site-header .brand-radio{
    display:inline!important;flex:none;
    font:inherit;letter-spacing:inherit;
    font-size:1em;font-weight:900;
    color:#faffff;
    text-shadow:0 1px 0 #ffffff,0 2px 0 #7c87af,0 3px 0 #283861,0 5px 7px #000b,0 0 14px rgba(201,231,255,.48);
  }
  .site-shell .site-header .brand-name{
    display:inline;flex:none;
    font:inherit;letter-spacing:inherit;
    white-space:nowrap;
  }
  .site-shell .site-header .brand-name span{
    color:#fcfdff;
    text-shadow:0 1px 0 #e9f3ff,0 2px 0 #7b8cba,0 3px 0 #26375e,0 5px 7px #000b,0 0 14px rgba(255,255,255,.3);
  }
  .site-shell .site-header .brand-name em{
    font-style:inherit;
    background:linear-gradient(180deg,#c4f9ff 0%,#65dbff 30%,#18a7ff 62%,#2877f5 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 0 #214e92) drop-shadow(0 4px 1px #081536) drop-shadow(0 0 6px rgba(18,162,255,.6));
  }
  .site-shell .site-header .navigation {top:35px;right:clamp(25px,2.5vw,47px);}
  .site-shell .site-header .hamburger {
    width:49px;height:49px;
    background:rgba(9,10,32,.53);
    border:1px solid rgba(123,91,208,.38);
    box-shadow:0 0 15px rgba(121,52,244,.29),inset 0 0 8px rgba(255,255,255,.035);
  }
  .site-shell .site-header .hamburger span {width:30px;height:3px;background:#fff;box-shadow:0 0 8px #c86eff;}

  /* A faixa central acompanha o mockup: texto tridimensional, nítido e legível. */
  .site-shell .song-center #trackHeading {
    margin:clamp(40px,6vh,58px) auto 0;
    gap:0;
    font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
    font-style:normal;
    letter-spacing:.7px;
    line-height:1.13;
  }
  .site-shell .song-center #songText {
    padding-bottom:0;
    font-size:clamp(27px,2.55vw,44px);
    font-weight:800;
    color:#f9fbff;
    text-shadow:0 1px 0 #f5f9ff,0 2px 0 #b8c0d3,0 3px 0 #626a86,0 4px 0 #303753,0 6px 10px rgba(0,0,0,.88),0 0 11px rgba(255,255,255,.13);
  }
  .site-shell .song-center #songText::after {content:none;display:none;}
  .site-shell .song-center #artistText {
    margin-top:clamp(43px,calc(23vh - 164px),90px);
    font-size:clamp(20px,1.9vw,31px);
    font-weight:800;
    letter-spacing:.8px;
    color:#4bcbff;
    text-shadow:0 1px 0 #57d9ff,0 2px 0 #127eb8,0 3px 0 #065383,0 5px 8px rgba(0,0,0,.8),0 0 12px rgba(11,164,252,.38);
  }
}
@media screen and (min-width:891px) and (max-height:780px){
  .site-shell .song-center {top:clamp(124px,17vh,136px);}
  .site-shell .song-center #trackHeading {margin-top:clamp(18px,3.7vh,31px);}
  .site-shell .song-center #songText {font-size:clamp(25px,2.2vw,37px);}
  .site-shell .song-center #artistText {margin-top:clamp(24px,3.4vh,30px);font-size:clamp(18px,1.65vw,26px);}
}
/* Mobile intacto. Não há regras fora das media queries para desktop. */