/* ============================================================
   ROCK DAS ANTIGAS WEBRADIO — V1
   Identidade baseada na referência fornecida pelo usuário.
   Preto + âmbar/dourado + textura Hi-Fi + bordas finas.
   ============================================================ */

:root{
  --bg:#050505;
  --panel:#0b0b0a;
  --panel-deep:#070706;
  --gold:#e9a900;
  --gold-hi:#ffc52d;
  --gold-soft:#8d6612;
  --white:#f7f5f0;
  --text:#f2eee7;
  --muted:#9b958b;
  --line:#4d3911;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 50% -12%,rgba(112,77,9,.22),transparent 34%),
    linear-gradient(180deg,#090909 0%,#050505 58%,#030303 100%);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}

body{
  padding:0 8px 30px;
}

.wrap{
  max-width:760px;
  margin:auto;
}

/* ============================================================
   CABEÇALHO
   ============================================================ */

.station-header{
  position:relative;
  overflow:hidden;
  margin-top:0;
  padding:0 16px 17px;
  border:1px solid #59420f;
  border-radius:0 0 17px 17px;
  background:
    linear-gradient(180deg,
      rgba(3,3,3,.48) 0%,
      rgba(4,4,4,.78) 50%,
      rgba(4,4,4,.98) 100%),
    url("assets/header-hi-fi-texture.png") right top/cover no-repeat;
  box-shadow:
    0 15px 35px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.station-header:after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:-1px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    #6b4a0b 16%,
    #c28b15 50%,
    #6b4a0b 84%,
    transparent 100%
  );
  opacity:.72;
}

/* ON AIR */
.onair{
  height:39px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--gold-hi);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}

.onair-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#f1261d;
  box-shadow:
    0 0 5px rgba(241,38,29,.9),
    0 0 12px rgba(241,38,29,.45);
  animation:onairPulse 1.35s ease-in-out infinite;
}

@keyframes onairPulse{
  0%,100%{opacity:1}
  50%{opacity:.52}
}

/* MARCA */
.brand{
  position:relative;
  z-index:1;
  text-align:center;
}

.brand-name{
  color:#f4f1eb;
  font-size:clamp(31px,7.4vw,67px);
  line-height:.94;
  font-weight:1000;
  letter-spacing:-.035em;
  white-space:nowrap;
  text-shadow:
    0 2px 0 #9b907e,
    0 7px 20px rgba(0,0,0,.78);
}

.brand-radio{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:7px;
  color:var(--gold-hi);
}

.brand-radio span{
  width:min(105px,18vw);
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold));
  box-shadow:0 0 9px rgba(233,169,0,.20);
}

.brand-radio span:last-child{
  background:linear-gradient(90deg,var(--gold),transparent);
}

.brand-radio strong{
  font-size:clamp(19px,4.4vw,31px);
  line-height:1;
  letter-spacing:.28em;
  font-weight:900;
  padding-left:.28em;
  text-shadow:0 2px 12px #000;
}

.brand-tagline{
  margin-top:12px;
  color:#e4dfd7;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(13px,2.7vw,18px);
  line-height:1.2;
  text-shadow:0 2px 8px #000;
}

.brand-tagline b{
  color:var(--gold-hi);
  font-family:Arial,sans-serif;
}

/* ============================================================
   PLAYER
   ============================================================ */

.player{
  position:relative;
  margin-top:10px;
  border:1px solid #604811;
  border-radius:17px;
  padding:10px 16px 14px;
  background:
    radial-gradient(circle at 78% 30%,rgba(121,87,17,.13),transparent 30%),
    radial-gradient(circle at 10% 90%,rgba(99,69,9,.10),transparent 35%),
    linear-gradient(145deg,#12110f,#080807 65%,#050505);
  box-shadow:
    0 15px 35px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.025);
}

/* brilho âmbar discreto na borda superior */
.player:before{
  content:"";
  position:absolute;
  left:17%;
  right:17%;
  top:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.48;
}

.turntable-video{
  width:100%;
  height:150px;
  overflow:hidden;
  position:relative;
  border-radius:11px;
  margin:0 0 12px;
  background:#000;
}

.turntable-video:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.05),
    transparent 45%,
    rgba(0,0,0,.12)
  );
  pointer-events:none;
}

.turntable-video video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

.kicker{
  color:var(--gold-hi);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  margin:0 0 7px;
}

.artist{
  font-size:clamp(29px,7vw,42px);
  font-weight:1000;
  line-height:.96;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}

.title{
  font:clamp(18px,4.5vw,24px)/1.05 Georgia,"Times New Roman",serif;
  color:#ddd8d0;
  margin-top:8px;
}

.player-bottom{
  display:flex;
  align-items:end;
  gap:15px;
  margin-top:18px;
}

.eq{
  height:30px;
  display:flex;
  align-items:end;
  gap:3px;
  flex:1;
  overflow:hidden;
}

.eq i{
  width:3px;
  height:var(--h);
  background:var(--gold);
  border-radius:3px 3px 0 0;
  animation:eq .8s infinite alternate;
  animation-play-state:paused;
}

.player.playing .eq i{
  animation-play-state:running;
}

.play{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:50%;
  border:1px solid #d8d3cb;
  background:#090909;
  color:white;
  font-size:21px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(233,169,0,.07);
  transition:.18s ease;
}

.play:hover{
  border-color:var(--gold-hi);
  box-shadow:0 0 20px rgba(233,169,0,.20);
  transform:scale(1.025);
}

.controls{
  display:grid;
  grid-template-columns:22px 1fr 42px;
  gap:8px;
  align-items:center;
  margin-top:7px;
}

.speaker{
  font-size:12px;
  filter:grayscale(1) brightness(1.25);
}

.controls input{
  width:100%;
  accent-color:var(--gold);
}

.status{
  text-align:right;
  color:#8d887f;
  font-size:10px;
  margin-top:5px;
}

/* ============================================================
   HISTÓRICO
   ============================================================ */

.history{
  margin-top:14px;
  border:1px solid #59420f;
  border-radius:17px;
  overflow:hidden;
  background:#080807;
  box-shadow:
    0 16px 38px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.015);
  position:relative;
}

.history:before{
  content:"";
  position:absolute;
  top:0;
  left:20%;
  right:20%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.38;
}

.head{
  height:50px;
  display:flex;
  align-items:center;
  padding:0 16px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  border-bottom:1px solid #302b23;
  background:
    linear-gradient(180deg,
      rgba(102,73,13,.17),
      rgba(255,255,255,.008));
}

/* Faixas */
.cc_recenttracks_list{
  width:100%;
}

/* Faixas: superfícies individuais em preto/grafite, aplicadas depois que o CentovaCast renderiza. */
.cc_recenttracks_list .cctrack{
  position:relative;
  min-height:91px;
  display:grid !important;
  grid-template-columns:78px minmax(0,1fr) 22px !important;
  grid-template-areas:"cover details arrow" !important;
  column-gap:16px !important;
  align-items:center !important;
  padding:9px 16px !important;
  border:0 !important;
}


/* V6 — fallback dos mesmos degradês pretos usados pelo JavaScript. */
.cc_recenttracks_list .cctrack.track-surface-0{background:linear-gradient(90deg,#000000 0%,#141414 34%,#292929 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-1{background:linear-gradient(90deg,#020202 0%,#1a1a1a 32%,#343434 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-2{background:linear-gradient(90deg,#000000 0%,#202020 30%,#3d3d3d 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-3{background:linear-gradient(90deg,#030303 0%,#262626 32%,#454545 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-4{background:linear-gradient(90deg,#010101 0%,#2c2c2c 30%,#4d4d4d 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-5{background:linear-gradient(90deg,#050505 0%,#232323 34%,#414141 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-6{background:linear-gradient(90deg,#000000 0%,#1d1d1d 32%,#383838 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-7{background:linear-gradient(90deg,#040404 0%,#292929 31%,#494949 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-8{background:linear-gradient(90deg,#020202 0%,#181818 34%,#303030 100%) !important;}
.cc_recenttracks_list .cctrack.track-surface-9{background:linear-gradient(90deg,#060606 0%,#303030 30%,#515151 100%) !important;}

.cc_recenttracks_list .cctrack:not(:last-child)::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:1px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(71,65,54,.58) 14%,
      rgba(48,45,39,.92) 50%,
      rgba(71,65,54,.58) 86%,
      transparent 100%);
}

.cc_recenttracks_list .cctrack:hover{
  filter:brightness(1.10);
}


.cc_recenttracks_list .cctrack > .cccover{
  grid-area:cover !important;
  width:70px !important;
  height:70px !important;
  overflow:hidden !important;
  border-radius:8px !important;
  background:#171717 !important;
  box-shadow:0 4px 12px rgba(0,0,0,.58) !important;
}

.cc_recenttracks_list .cccover img{
  display:block !important;
  width:70px !important;
  height:70px !important;
  object-fit:cover !important;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

.cc_recenttracks_list .ccdetails{
  grid-area:details !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  overflow:hidden !important;
}

.cc_recenttracks_list .cctitle{
  order:1 !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  color:#fff !important;
  font-size:17px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
}

.cc_recenttracks_list .ccartist{
  order:2 !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  color:var(--gold-hi) !important;
  font-size:13px !important;
  line-height:1.05 !important;
  font-weight:800 !important;
}

.cc_recenttracks_list .ccalbum{
  order:3 !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  color:#9e988e !important;
  font-size:11px !important;
  line-height:1.05 !important;
  font-weight:500 !important;
}

.cc_recenttracks_list .ccalbum:before{
  content:"ÁLBUM  ·  ";
  color:#6d675e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.cc_recenttracks_list .album-display{
  order:3 !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  color:#9e988e !important;
  font-size:11px !important;
  line-height:1.05 !important;
  font-weight:500 !important;
}

.cc_recenttracks_list .album-display:before{
  content:"ÁLBUM  ·  ";
  color:#6d675e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.cc_recenttracks_list .ccalbum.source-album{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}

.cc_recenttracks_list .cctime,
.cc_recenttracks_list .ccbuy{
  display:none !important;
}

.cc_recenttracks_list .cctrack>.ccdetails:after{
  content:"›";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:#b49a63;
  font-size:27px;
  font-weight:300;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

.history-loading{
  padding:25px 16px;
  color:#999;
}

.hidden{
  display:none!important;
}

@keyframes eq{
  from{transform:scaleY(.30)}
  to{transform:scaleY(1)}
}

@media(max-width:560px){
  body{
    padding-left:4px;
    padding-right:4px;
  }

  .station-header{
    margin-top:0;
    padding-left:12px;
    padding-right:12px;
    padding-bottom:14px;
    border-radius:0 0 15px 15px;
  }

  .brand-name{
    font-size:clamp(27px,8.4vw,42px);
    letter-spacing:-.04em;
  }

  .brand-radio{
    gap:10px;
    margin-top:6px;
  }

  .brand-radio strong{
    font-size:20px;
    letter-spacing:.20em;
  }

  .brand-tagline{
    font-size:13px;
    line-height:1.3;
    max-width:420px;
    margin:10px auto 0;
  }

  .player{
    padding:8px 10px 12px;
  }

  .turntable-video{
    height:128px;
    margin-bottom:11px;
  }

  .artist{
    font-size:31px;
  }

  .player-bottom{
    gap:10px;
    margin-top:15px;
  }

  .play{
    width:55px;
    height:55px;
    flex-basis:55px;
  }

  .cc_recenttracks_list .cctrack{
    min-height:87px;
    grid-template-columns:62px minmax(0,1fr) 18px !important;
    column-gap:12px !important;
    padding:8px 11px !important;
  }

  .cc_recenttracks_list .cctrack>.cccover,
  .cc_recenttracks_list .cccover img{
    width:62px !important;
    height:62px !important;
    border-radius:7px !important;
  }

  .cc_recenttracks_list .cctitle{
    font-size:16px !important;
  }

  .cc_recenttracks_list .ccartist{
    font-size:12px !important;
  }

  .cc_recenttracks_list .ccalbum,
  .cc_recenttracks_list .album-display{
    font-size:10px !important;
  }

  .cc_recenttracks_list .cctrack>.ccdetails:after{
    right:9px;
  }
}

@media(max-width:370px){
  .brand-name{
    font-size:25px;
  }

  .brand-radio strong{
    font-size:17px;
  }

  .brand-tagline{
    font-size:12px;
  }

  .turntable-video{
    height:112px;
  }

  .cc_recenttracks_list .cctrack{
    min-height:81px;
    grid-template-columns:56px minmax(0,1fr) 15px !important;
    column-gap:9px !important;
  }

  .cc_recenttracks_list .cctrack>.cccover,
  .cc_recenttracks_list .cccover img{
    width:56px !important;
    height:56px !important;
  }

  .cc_recenttracks_list .cctitle{
    font-size:14px !important;
  }

  .cc_recenttracks_list .ccartist{
    font-size:11px !important;
  }

  .cc_recenttracks_list .ccalbum,
  .cc_recenttracks_list .album-display{
    font-size:9px !important;
  }
}