/* ============================================================
   RETRO-GLASS REDESIGN  —  drop-in skin for RadioplayerAPI
   Load AFTER css/main.min.css so these rules win.
   Keeps every hook js/main.js needs; only restyles + adds
   the tuner dial / presets / VU chrome.
   ============================================================ */

:root {
  --rp-amber: #ffb23e;
  --rp-vu:    #34e3c2;
  --accent:   #ff5a4d;            /* main.js overrides this from album art */
  --rp-sleeve: 236px;             /* album jacket size (desktop) */
  --rp-disc-inset: 8px;           /* transparent frame thickness */
}

/* ---- fonts ---- */
body { font-family: "Manrope", Montserrat, system-ui, sans-serif; }
html { overflow-x: hidden; max-width: 100%; }

/* ---- app backdrop ---- */
.app { background: #0a0a0a; }
.app::after { display: none; }    /* drop their bottom-fade, we use our own tint */

.player-cover-image { filter: blur(28px) saturate(120%); }

.rp-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--rp-amber) 40%, transparent), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%),
    linear-gradient(150deg, rgba(20,4,40,.55), rgba(10,4,20,.25) 50%, rgba(40,10,10,.55));
}
.rp-blob {
  position: absolute; z-index: 1; border-radius: 50%; filter: blur(30px);
  pointer-events: none; opacity: .5;
}
.rp-blob-1 { width: 46vw; height: 46vw; left: -12vw; top: -16vw;
  background: radial-gradient(circle, var(--rp-amber), transparent 68%);
  animation: rp-drift 15s ease-in-out infinite; }
.rp-blob-2 { width: 44vw; height: 44vw; right: -14vw; bottom: -18vw;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  animation: rp-drift 19s ease-in-out infinite reverse; }
@keyframes rp-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(4%,-3%) scale(1.15); }
}

/* ---- header : keep it transparent at ALL widths (glass unit has its own topbar) ---- */
.header { background: transparent !important; box-shadow: none !important; }
.header-logo-img { height: 60px; }
@media (min-width: 992px){ .header-logo-img { max-width: 132px; height: auto; } }
@media (max-width: 991px){ .toggle-options { --btn-fs: 0.75rem; --i-size: 18px; } }
/* telas de celular: volta a esconder o texto dos botões (só ícone) — em 991px
   o rótulo em --btn-fs acima já não cabe ao lado de vários botões de texto */
@media (max-width: 520px){ .toggle-options { --btn-fs: 0; --btn-gap: .35rem; } }

/* ============================================================
   THE GLASS UNIT
   ============================================================ */
.player.song-now {
  z-index: 10; display: flex; align-items: center; justify-content: center;
  /* faixa reservada embaixo para os botões fixos (TV ao vivo, lojas de app,
     copyright à esquerda; sociais à direita) — o cartão centraliza acima
     deles em vez de por cima, em qualquer resolução/zoom. O padding-top
     maior também afasta o cartão dos botões do cabeçalho. */
  padding: 100px 32px 120px;
  width: 100%; max-width: 100vw; box-sizing: border-box;
}
/* margin:auto (e não só align-items:center) — quando a janela é baixa demais
   o flexbox com center corta o topo do item; com auto ele encosta e rola */
.rp-unit { margin: auto; }

/* rodapés fixos mais colados na base da tela (o main.min.css os deixa a
   ~3vw da borda): libera espaço vertical para o cartão central descer */
@media (min-width: 992px) {
  .footer { padding-bottom: 14px; }
  .player-social { bottom: 0; padding-bottom: 14px; }
  /* copyright centralizado na base da tela — sai da pilha do canto esquerdo
     (fixed em vez de absolute: o pai .footer é ancorado à esquerda) */
  .footer-copyright { position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 20px; z-index: 10; white-space: nowrap; }
}
.rp-unit {
  /* 960px (era 1120px): deixa folga nos cantos para os botões fixos de
     TV ao vivo / lojas de app (canto esq.) e redes sociais (canto dir.)
     que ficam por cima do cartão em telas largas */
  width: min(960px, 100%);
  border-radius: 28px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 90px rgba(0,0,0,.45);
  /* 22px vertical (era 26px): cartão mais baixo para a borda não alcançar
     os botões fixos do rodapé (lojas de app) em janelas mais baixas */
  padding: 22px 30px; color: #fff;
  display: flex; flex-direction: column;
}

/* topbar */
.rp-topbar { display: flex; align-items: center; justify-content: space-between; }
.rp-brand { display: flex; align-items: baseline; gap: 10px; }
.rp-brand b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; color:#fff; letter-spacing: -.01em; }
.rp-brand span { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .3em; color: var(--rp-amber); }
.rp-status { display: flex; align-items: center; gap: 16px; }
.rp-onair { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); white-space: nowrap;
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .2em; }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent); animation: rp-blink 1.6s steps(1) infinite; }
@keyframes rp-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: .25; } }
.rp-clock { font-family: "Space Mono", monospace; font-size: 13px; color: rgba(255,255,255,.7); }

/* main grid */
.rp-main { display: flex; gap: 32px; margin-top: 18px; }
.rp-left  { width: 340px; flex: none; display: flex; flex-direction: column; }
.rp-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- artwork + vinyl ---- */
.rp-artwrap { position: relative; height: var(--rp-sleeve); }
.rp-vinyl {
  position: absolute; top: var(--rp-disc-inset); left: 118px; z-index: 1;
  width: calc(var(--rp-sleeve) - var(--rp-disc-inset) * 2);
  height: calc(var(--rp-sleeve) - var(--rp-disc-inset) * 2);
  animation: rp-slide 1.5s cubic-bezier(.2,.75,.2,1) .35s both;
}
.rp-vinyl-disc {
  width: 100%; height: 100%; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #0d0d0f 0 2px, #191a1f 2px 4px);
  box-shadow: 0 20px 45px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  animation: rp-spin 6s linear infinite;
}
.rp-vinyl-label { width: 82px; height: 82px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; transition: background .4s; }
.rp-vinyl-hole  { width: 12px; height: 12px; border-radius: 50%; background: #0d0d0f; }
@keyframes rp-spin  { to { transform: rotate(360deg); } }
@keyframes rp-slide { from { transform: translateX(-118px); } to { transform: translateX(0); } }
body:not(.is-playing) .rp-vinyl-disc { animation-play-state: paused; }

/* the album jacket = their .player-artwork hook */
.rp-unit .player-artwork {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: var(--rp-sleeve); height: var(--rp-sleeve);
  max-width: none; aspect-ratio: auto;
  padding: var(--rp-disc-inset); border-radius: 18px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 24px 48px rgba(0,0,0,.45); overflow: hidden; display: flex;
}
.rp-unit .player-artwork img { width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px; flex: none; }

/* now playing text */
.rp-nowplaying { margin-top: 24px; }
.rp-np-label { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .24em;
  color: var(--rp-amber); text-transform: uppercase; }
/* título limitado a 2 linhas + min-height reservando essas 2 linhas:
   músicas com nome longo (feat., ao vivo etc.) não esticam mais o cartão */
.rp-unit .song-name  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; font-size: 26px; line-height: 1.1; min-height: 2.2em;
  margin-top: 8px; letter-spacing: -.01em; color:#fff; }
.rp-unit .song-artist { display: block; font-size: 15px; color: rgba(255,255,255,.72);
  margin-top: 6px; font-weight: 600; opacity: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* programação: vive junto do now playing (a capa é pequena demais pra ela
   sem entulhar — por isso não fica sobreposta ao jacket). O main.min.css
   base (.player-program) posiciona absolute/inset/width para o caso de
   overlay sobre a capa; aqui precisa neutralizar tudo isso, senão flutua
   por cima dos controles do rodapé do card. */
.rp-unit .player-program {
  position: static; inset: auto; width: auto; padding: 0;
  background-image: none; color: inherit; text-transform: none; z-index: auto;
  display: flex; flex-direction: column; gap: 6px; margin-top: 14px;
}
.rp-unit .player-program:empty { display: none; }
.rp-unit .player-program-time-container { display: flex; align-items: center; gap: 8px; }
.rp-unit .player-program-badge {
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
  color: var(--rp-amber); font-family: "Space Mono", monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.rp-unit .player-program-time { font-family: "Space Mono", monospace; font-size: 12px; color: rgba(255,255,255,.6); }
.rp-unit .player-program-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; color: #fff; }
.rp-unit .player-program-description { font-size: 12px; color: rgba(255,255,255,.6); }

/* ============================================================
   TUNER DIAL
   ============================================================ */
.rp-dial {
  border-radius: 16px; padding: 16px 20px 12px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f6ecd2, #e7d3a8);
  box-shadow: inset 0 2px 12px rgba(120,80,10,.28), 0 8px 20px rgba(0,0,0,.25);
}
.rp-dial-head { display: flex; justify-content: space-between; align-items: baseline; color: #7a5518; }
.rp-dial-head .u { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .2em; }
.rp-dial-head .f { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 26px; color: #3a2708; }
.rp-ruler { position: relative; height: 34px; margin-top: 8px; border-top: 1px solid rgba(120,80,10,.3); }
.rp-tick  { position: absolute; top: 0; width: 1px; background: rgba(120,80,10,.28); height: 8px; }
.rp-tick.major { height: 14px; background: rgba(120,80,10,.5); }
.rp-needle { position: absolute; top: -8px; bottom: 0; width: 2px; left: 32.5%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: left .5s cubic-bezier(.2,.75,.2,1); }
.rp-needle::after { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.rp-scale { display: flex; justify-content: space-between; font-family: "Space Mono", monospace;
  font-size: 10px; color: #9a7a3a; margin-top: 2px; }

/* ============================================================
   PRESETS  (station switcher)
   ============================================================ */
/* min-height reserva a fileira desde o primeiro paint: os presets são
   construídos via JS no evento load, e sem a reserva o cartão "crescia"
   depois de carregado e descia sobre os botões fixos do rodapé */
/* margin-bottom garante respiro do VU mesmo quando o margin-top:auto
   do .rp-vu colapsa a zero (coluna sem espaço sobrando) */
.rp-presets { display: flex; gap: 10px; margin: 14px 0; min-height: 50px; }
.rp-preset {
  flex: 1; min-width: 0; padding: 10px 8px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff;
  transition: background .2s, border-color .2s, transform .1s;
}
.rp-preset:hover { background: rgba(255,255,255,.14); }
.rp-preset:active { transform: translateY(1px); }
.rp-preset.is-active { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.06)); }
.rp-preset .p { font-family: "Space Mono", monospace; font-size: 9px; letter-spacing: .04em;
  color: var(--rp-amber); white-space: nowrap; }
.rp-preset .n { font-size: 11px; font-weight: 700; margin-top: 3px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   VU METER  (wraps their .visualizer canvas)
   ============================================================ */
.rp-vu { margin-top: auto; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 14px 18px; }
.rp-vu-head { display: flex; justify-content: space-between; font-family: "Space Mono", monospace;
  font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.55); margin-bottom: 10px; }
.rp-vu-body { position: relative; height: 56px; }
/* decorative animated bars (shown when paused / before audio graph runs) */
.rp-vu-fallback { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.rp-vu-fallback i { flex: 1; border-radius: 3px; height: 20%; opacity: .9;
  background: linear-gradient(180deg, var(--accent), var(--rp-amber) 55%, var(--rp-vu));
  animation: rp-bar 1s ease-in-out infinite alternate; }
@keyframes rp-bar { from { height: 12%; } to { height: 100%; } }
/* their real canvas sits on top; transparent where no audio */
.rp-vu-body .visualizer { position: absolute; inset: 0; filter: none; opacity: 1; height: 100%;
  display: block; z-index: 2; }
.rp-vu-body .visualizer canvas { width: 100%; height: 100%; }
body.is-playing .rp-vu-fallback { opacity: 0; }
/* celular: sem VU — o main.js já desliga o canvas real em telas <=767px
   (economia de bateria) e a caixa ficava órfã/vazia; some com o painel
   inteiro, seguindo a mesma filosofia mobile do layout clássico */
@media (max-width: 767px) {
  .rp-vu { display: none; }
}

/* ============================================================
   CONTROLS
   ============================================================ */
.rp-unit .player-controller { display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 0; gap: 1rem; }
.rp-transport { display: flex; align-items: center; gap: 16px; }
.rp-unit .player-button-backward-step,
.rp-unit .player-button-forward-step {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; }
.rp-unit .player-button-backward-step:hover,
.rp-unit .player-button-forward-step:hover { background: rgba(255,255,255,.2); color:#fff; }
.rp-unit .player-button-play {
  width: 68px; height: 68px; border-radius: 50%; border: none; padding: 0;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 55%, transparent); }
.rp-unit .player-button-play .i { --i-size: 30px; }
.rp-unit .player-button-play:hover { color: #fff; }

/* volume — o botão/dropdown clássico fica sempre escondido: no desktop o
   knob assume, e no celular o usuário usa os botões físicos de volume.
   O <input class="player-volume"> segue no DOM (main.js e o knob leem dele). */
.rp-unit .player-button-volume { display: none; }
.rp-unit .dropdown {
  width: 190px; background: rgba(0,0,0,.75); padding: 18px 16px; border-radius: 12px;
  backdrop-filter: blur(12px); }
.rp-unit .player-range-wrapper { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); }
.rp-unit .player-range-fill { border-radius: 3px; background: var(--rp-amber); }
.rp-unit .player-range-thumb { width: 16px; height: 16px; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.rp-unit .player-button-lyrics { color: rgba(255,255,255,.7); display: flex; }
.rp-unit .player-button-lyrics:hover { color: #fff; }

/* volume knob (desktop) — casca visual sobre o slider .player-volume;
   no celular fica o dropdown com slider de sempre (knob some) */
.rp-ctrl-right { display: flex; align-items: center; gap: 20px; }
.rp-knob-group { display: flex; align-items: center; gap: 14px; }
.rp-knob-ico { width: 20px; height: 20px; flex: none; fill: none;
  stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 68px = mesma altura do botão play: o knob não estica a fileira de controles */
.rp-knob { position: relative; width: 68px; height: 68px; flex: none; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.rp-knob:active { cursor: grabbing; }
.rp-knob:focus-visible { outline: 2px solid var(--rp-amber); outline-offset: 3px; border-radius: 50%; }
.rp-knob > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-knob circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.rp-knob circle.tr { stroke: rgba(255,255,255,.15); }
.rp-knob circle.fi { stroke: var(--rp-amber); }
.rp-knob-body { position: absolute; inset: 12px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #3a3a44, #141418);
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); }
.rp-knob-body i { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 14px; border-radius: 2px; background: var(--rp-amber); }
.rp-knob-val { font-family: "Space Mono", monospace; font-size: 12px;
  color: rgba(255,255,255,.6); min-width: 38px; }

/* ============================================================
   RESPONSIVE  →  mobile: stack to a single tall player
   ============================================================ */
@media (max-width: 860px) {
  .player.song-now { padding: 88px 16px 24px; align-items: flex-start; }
  .rp-unit { padding: 20px; border-radius: 22px; }
  .rp-main { flex-direction: column; gap: 22px; }
  .rp-left { width: 100%; align-items: center; }
  :root { --rp-sleeve: 210px; }
  .rp-vinyl { left: 92px; }
  @keyframes rp-slide { from { transform: translateX(-92px); } to { transform: translateX(0); } }
  .rp-artwrap { width: 302px; }         /* room for the disc to peek out */
  .rp-nowplaying { text-align: center; }
  .rp-unit .song-name { font-size: 24px; }
  .rp-right { width: 100%; }
  .rp-vu { margin-top: 0; }
  .rp-knob-group { display: none; }   /* sem volume no celular: botões físicos */
  /* .rp-onair não tinha nenhum tratamento responsivo no drop-in original —
     "ON AIR · STEREO" com white-space:nowrap + letter-spacing larga estourava
     a largura do .rp-topbar em telas de celular (a barra de status ficava
     cortada à direita). Deixa o topbar quebrar linha e encolhe o selo. */
  .rp-topbar { flex-wrap: wrap; row-gap: 10px; }
  .rp-status { flex-wrap: wrap; gap: 8px; }
  .rp-onair { padding: 6px 10px; letter-spacing: .12em; }
}
@media (max-width: 420px){
  .rp-brand b { font-size: 18px; }
  .rp-onair span { font-size: 9px; }
}

/* links extras para os outros layouts (não fazem parte do drop-in original):
   escondidos em telas pequenas para não competir por espaço com Historico/menu */
/* ---- lista de programação (grade de horários do dia) ---- */
.programacao-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-l);
}
.programacao-item.is-active {
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-l);
}
.programacao-item-time {
  flex: none;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent);
  white-space: nowrap;
}
.programacao-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.programacao-item-name { font-weight: 600; }
.programacao-item-description { font-size: 0.8rem; opacity: 0.75; }

@media (max-width: 767px) {
  .layout-link { display: none; }
}