/* MAIS TUNER 24.46 — RádioVisual refeito (ver radiovisual-2026.mjs; este arquivo não se chama radiovisual-2026.css porque o teste de ordem procura "visual-2026.css").
   Classes novas (.rvx-*) para não herdar nada das regras antigas do .rv-tv-*.
   Visual do Modo Cinema: capa desfocada + cor da marca, vidro, play vermelho. */

/* ================================================================ palco */
.rvx[hidden]{display:none!important}
html.rvx-open,html.rvx-open body{overflow:hidden!important;overscroll-behavior:none}
.rvx{--rvx-bar:76px;--rvx-panel:min(400px,32vw);position:fixed;inset:0;z-index:2100;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color:#fff;background:#06142a;font-family:"NRK Sans","Reddit Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  opacity:0;transform:translateY(18px);transition:opacity .24s ease,transform .3s cubic-bezier(.2,.8,.2,1);touch-action:manipulation}
.rvx.is-in{opacity:1;transform:none}
.rvx button,.rvx a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.rvx svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rvx :focus-visible{outline:3px solid #5fffc0;outline-offset:2px}
.rvx:focus,.rvx:focus-visible{outline:none}
.rvx-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--rvx-brand,linear-gradient(150deg,#1b4f9c,#0b2a58))}
.rvx-bg::before{content:'';position:absolute;inset:-80px;background:var(--rvx-art,none) center/cover;filter:blur(70px) saturate(1.5);opacity:.75}
/* 24.49: fundo desfocado num canvas pequeno esticado (soft-art.mjs). O blur(70px)
   numa camada própria era refeito a cada quadro por baixo do clipe no celular. */
.rvx-soft{position:absolute;left:-80px;top:-80px;width:calc(100% + 160px);height:calc(100% + 160px);opacity:0;transition:opacity .6s ease}
.rvx-soft.is-ready{opacity:.75}
.rvx.has-soft .rvx-bg::before{display:none}
.rvx-cover-soft{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.2)}
.rvx-cover-soft.is-ready{opacity:1}
.rvx.has-soft .rvx-cover img{display:none}
/* com o RádioVisual cobrindo a tela, o que está por baixo não é desenhado */
html.rvx-covering body>:not(.rvx):not(.rvx-float):not(.rv-karaoke){visibility:hidden!important}
.rvx-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,28,.55) 0%,rgba(4,12,28,.35) 35%,rgba(4,12,28,.82) 100%)}

/* topo */
.rvx-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:10px 14px 6px}
.rvx-icon{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.1);cursor:pointer}
.rvx-icon[hidden]{display:none}
.rvx-icon:active{transform:scale(.94)}
.rvx-head{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;line-height:1.15}
.rvx-kicker{color:#5fffc0;font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.rvx-song{max-width:100%;margin-top:2px;overflow:hidden;font-size:17px;font-weight:850;white-space:nowrap;text-overflow:ellipsis}
.rvx-meta{max-width:100%;overflow:hidden;color:rgba(255,255,255,.72);font-size:12.5px;font-weight:650;white-space:nowrap;text-overflow:ellipsis}

/* meio: tela do clipe + letra */
.rvx-main{min-height:0;display:flex;flex-direction:column;gap:10px;padding:6px 12px 0}
.rvx-screen{position:relative;flex:none;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#000;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
.rvx-video,.rvx-cover{position:absolute;inset:0}
.rvx-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.rvx-cover{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 65%);transition:opacity .45s ease}
.rvx-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.55) saturate(1.3);transform:scale(1.2)}
.rvx-cover img + b{display:none}
.rvx-cover img[hidden] + b{display:block}
.rvx-cover::after{content:'';position:relative;width:min(44%,240px);aspect-ratio:1;border-radius:14px;background:var(--rvx-art,none) center/cover;box-shadow:0 20px 50px -18px rgba(0,0,0,.9)}
.rvx-cover b{position:relative;font-size:46px;opacity:.5}
.rvx.has-video .rvx-cover{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
.rvx-toast{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;margin:0;padding:9px 13px;border-radius:12px;background:rgba(4,12,28,.78);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;font-weight:650;line-height:1.35;text-align:center}
.rvx-toast[hidden],.rvx-cta[hidden]{display:none}
.rvx-cta{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:12px;padding:20px;text-align:center;background:rgba(4,12,28,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rvx-cta p{max-width:320px;margin:0;font-size:14px;font-weight:650;line-height:1.4}

/* letra em lista (a linha atual no terço de cima, rolando sozinha) */
.rvx-lyrics{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 100%)}
.rvx-lyrics-rail{padding:18px 6px 60vh;transition:transform .55s cubic-bezier(.2,.8,.2,1);will-change:transform}
.rvx-line{margin:0;padding:8px 0;color:rgba(255,255,255,.5);font-size:clamp(21px,5.6vw,30px);font-weight:850;line-height:1.18;letter-spacing:-.012em;transition:color .3s ease,opacity .3s ease}
.rvx-line.is-past{color:rgba(255,255,255,.28)}
.rvx-line.is-gap{font-size:22px;color:rgba(255,255,255,.4)}
.rvx-lyrics-msg{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0 24px;color:rgba(255,255,255,.82);font-size:16px;font-weight:700;text-align:center}
.rvx-lyrics-msg[hidden],.rvx-lyrics-rail[hidden]{display:none}
/* preenchimento: a parte já cantada da linha atual acende da esquerda para a direita */
.rvx-fill{-webkit-box-decoration-break:clone;box-decoration-break:clone}
:is(.rvx-line.is-cur,.rvx-sub-cur,.rvx-float-cur,.rvx-kline.is-current) .rvx-fill{
  background:linear-gradient(90deg,#fff calc(var(--p,0) * 100%),rgba(255,255,255,.55) calc(var(--p,0) * 100%));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* legenda sobre o clipe (dentro da tela; no computador pode sair dela e ir
   para qualquer lugar — vira position:fixed com a posição guardada) */
.rvx-sub{position:absolute;z-index:4;left:50%;bottom:12px;transform:translateX(-50%);width:min(760px,calc(100% - 24px));box-sizing:border-box;
  padding:8px 16px 10px;border-radius:16px;background:rgba(3,10,24,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);text-align:center}
.rvx-sub-cur{margin:0;font-size:clamp(16px,2.2vw,30px);font-weight:850;line-height:1.2;color:#fff}
.rvx-sub-next{margin:4px 0 0;color:rgba(255,255,255,.62);font-size:clamp(12px,1.35vw,18px);font-weight:700;line-height:1.25}
.rvx-sub-next:empty{display:none}
.rvx-sub-grip{display:none}
.rvx.no-sub .rvx-sub,.rvx:not(.has-lines) .rvx-sub{display:none!important}
.rvx-sub.is-free{position:fixed;z-index:8;transform:none;bottom:auto;width:min(760px,calc(100vw - 48px))}
.rvx-toast{top:12px;bottom:auto}

/* barra de baixo: ajuste da letra · play · legenda, letra e clipe */
.rvx-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:var(--rvx-bar);padding:10px 14px 14px}
.rvx-bar .rvx-step{justify-self:start}
.rvx-play{flex:none;display:grid;place-items:center;width:58px;height:58px;padding:0;border:0;border-radius:50%;background:#ff4747;color:#fff;cursor:pointer;box-shadow:0 14px 26px -12px rgba(255,71,71,.9)}
.rvx-play svg{width:26px;height:26px;fill:currentColor;stroke:none}
.rvx-play .s,.rvx.is-playing .rvx-play .p{display:none}
.rvx.is-playing .rvx-play .s{display:inline}
.rvx-play:active{transform:scale(.94)}
.rvx-step{flex:none;display:grid;grid-template-columns:34px auto 34px;align-items:center;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.rvx-step button{height:100%;padding:0;border:0;background:none;color:#fff;font-size:20px;font-weight:800;cursor:pointer}
.rvx-step button:active{background:rgba(255,255,255,.14)}
.rvx-step output{min-width:52px;padding:0 2px;color:#cfe1f5;font-size:12.5px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.rvx-tools{justify-self:end;display:flex;align-items:center;gap:8px}
.rvx-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);
  font-size:13px;font-weight:750;white-space:nowrap;text-decoration:none;cursor:pointer}
.rvx-chip svg{width:18px;height:18px}
.rvx-chip[hidden]{display:none}
.rvx-chip:disabled{opacity:.4;cursor:default}
.rvx-chip[aria-pressed="true"],.rvx-chip[aria-expanded="true"]{border-color:rgba(95,255,192,.55);background:rgba(95,255,192,.16);color:#5fffc0}
.rvx-chip.is-strong{height:46px;padding:0 20px;border:0;background:#fff;color:#06142a;font-weight:850}

/* opções do clipe */
.rvx-pop{position:absolute;z-index:9;right:14px;bottom:calc(var(--rvx-bar) + 10px + env(safe-area-inset-bottom));width:min(360px,calc(100% - 28px));box-sizing:border-box;padding:16px;border-radius:20px;
  background:rgba(6,18,40,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 60px -24px rgba(0,0,0,.95)}
.rvx-pop[hidden]{display:none}
.rvx-pop-title{display:block;margin-bottom:6px;font-size:15px;font-weight:850}
.rvx-pop p{margin:0 0 12px;color:rgba(255,255,255,.78);font-size:13px;font-weight:600;line-height:1.4}
.rvx-pop-row{display:grid;grid-template-columns:repeat(2,1fr) auto repeat(2,1fr);align-items:center;gap:6px}
.rvx-pop-row button{height:40px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.08);font-size:13px;font-weight:800;cursor:pointer}
.rvx-pop-row output{min-width:60px;color:#5fffc0;font-size:14px;font-weight:850;text-align:center;font-variant-numeric:tabular-nums}
.rvx-pop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rvx-pop-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);font-size:12.5px;font-weight:800;text-decoration:none;cursor:pointer}
.rvx-pop-btn[hidden]{display:none}
.rvx-pop-btn:disabled{opacity:.4;cursor:default}
.rvx-pop-btn svg{width:16px;height:16px}
.rvx-pop.no-clip .rvx-pop-row,.rvx-pop.no-clip p,.rvx-pop.no-clip [data-act="v0"]{opacity:.4;pointer-events:none}

/* celular em pé: clipe em cima, letra em lista embaixo; sem lista, a legenda vai sobre o clipe */
@media (max-width:899px) and (orientation:portrait){
  .rvx:not(.no-list) .rvx-sub{display:none!important}
  .rvx.no-list .rvx-lyrics{visibility:hidden}
  .rvx-tools .rvx-chip span{display:none}
  .rvx-tools .rvx-chip{width:42px;padding:0}
  .rvx-tools .rvx-chip.is-strong span{display:inline}
  .rvx-cta{gap:8px;padding:12px}
  .rvx-cta p{font-size:12.5px}
  .rvx-chip.is-strong{height:40px;padding:0 16px;font-size:13px}
}
/* celular deitado: só o clipe, com a legenda por cima */
@media (max-width:999px) and (orientation:landscape){
  .rvx-top{padding:4px 12px 2px}
  .rvx-main{flex-direction:row;justify-content:center;padding:0 12px}
  .rvx-screen{width:auto;height:100%;max-width:100%}
  .rvx-lyrics{display:none}
  .rvx{--rvx-bar:58px}
  .rvx-bar{padding:4px 12px 8px}
  .rvx-play{width:46px;height:46px}
  .rvx-tools .rvx-chip span{display:none}
  .rvx-tools .rvx-chip{width:42px;padding:0}
}
/* computador: clipe grande e a letra numa coluna à direita (dá para esconder);
   a legenda sobre o clipe pode ser arrastada para qualquer lugar da tela */
@media (min-width:900px) and (pointer:fine){
  .rvx{--rvx-bar:88px}
  .rvx-top{padding:18px 26px 8px}
  .rvx-song{font-size:19px}
  .rvx-main{display:grid;grid-template-columns:minmax(0,1fr) var(--rvx-panel);align-items:center;gap:26px;padding:8px 26px 0}
  .rvx.no-list .rvx-main{grid-template-columns:minmax(0,1fr)}
  .rvx-screen{justify-self:center;width:100%;max-width:calc((100vh - 230px) * 16 / 9)}
  .rvx-lyrics{height:100%;align-self:stretch;border-radius:22px;background:rgba(3,10,24,.28)}
  .rvx-lyrics-rail{padding:24px 22px 60vh}
  .rvx-line{font-size:clamp(20px,1.7vw,27px)}
  .rvx.no-list .rvx-lyrics{display:none}
  .rvx-sub{bottom:18px}
  .rvx-sub-grip{position:absolute;top:50%;left:6px;display:grid;place-items:center;width:22px;height:44px;margin-top:-22px;padding:0;border:0;border-radius:8px;background:none;color:rgba(255,255,255,.5);cursor:grab;opacity:0;transition:opacity .2s}
  .rvx-sub:hover .rvx-sub-grip,.rvx-sub-grip:focus-visible,.rvx-sub.is-dragging .rvx-sub-grip{opacity:1}
  .rvx-sub.is-dragging{cursor:grabbing;box-shadow:0 0 0 2px rgba(95,255,192,.6),0 26px 60px -20px rgba(0,0,0,.95)}
  .rvx-sub-grip svg{width:16px;height:16px;fill:currentColor;stroke:none}
  .rvx-bar{padding:12px 26px 22px}
  .rvx-play{width:62px;height:62px}
}
.rvx.is-full .rvx-top{padding-top:10px}
html.anim-none .rvx,html.anim-none .rvx *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.rvx,.rvx *{transition:none!important}}

/* ================================================================ legenda flutuante (CC) */
.rvx-float[hidden]{display:none!important}
.rvx-float{position:fixed;z-index:1190;left:10px;right:10px;bottom:calc(96px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:10px 10px 10px 16px;border-radius:20px;color:#fff;background:rgba(5,14,32,.86);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 50px -24px rgba(0,0,0,.9);font-family:"NRK Sans","Reddit Sans",system-ui,sans-serif}
html.mt-app .rvx-float{bottom:calc(var(--app-tabs-h,64px) + 88px + env(safe-area-inset-bottom))}
.rvx-float button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
.rvx-float svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rvx-float-grip{display:none}
.rvx-float-body{min-width:0}
.rvx-float-track{display:block;overflow:hidden;color:#5fffc0;font-size:10.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
.rvx-float-cur{margin:3px 0 0;font-size:17px;font-weight:850;line-height:1.22;color:#fff}
.rvx-float.has-msg .rvx-float-cur{font-size:14px;font-weight:700;color:rgba(255,255,255,.85)}
.rvx-float.has-msg .rvx-float-cur .rvx-fill{background:none;color:inherit}
.rvx-float-next{margin:2px 0 0;overflow:hidden;color:rgba(255,255,255,.55);font-size:13px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.rvx-float-next:empty{display:none}
.rvx-float-tools{display:flex;align-items:center;gap:6px}
.rvx-float .rvx-step{height:36px;grid-template-columns:30px auto 30px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);display:grid;align-items:center;overflow:hidden}
.rvx-float .rvx-step button{height:100%;padding:0;border:0;background:none;font-size:18px;font-weight:800}
.rvx-float .rvx-step output{min-width:48px;color:#cfe1f5;font-size:11.5px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.rvx-float-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.08)}
.rvx-float.is-big .rvx-float-cur{font-size:23px}
.rvx-float.is-big .rvx-float-next{font-size:15px}
.rvx-float.is-big [data-f="size"]{border-color:rgba(95,255,192,.55);color:#5fffc0}
@media (max-width:520px){
  .rvx-float{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px}
  .rvx-float-tools{justify-content:space-between}
}
/* computador: painel destacável — arraste pelo puxador para qualquer lugar da
   tela; dois cliques no puxador voltam para o lugar padrão */
@media (min-width:900px) and (pointer:fine){
  .rvx-float{left:50%;right:auto;bottom:118px;width:min(760px,calc(100vw - 48px));transform:translateX(-50%);grid-template-columns:auto minmax(0,1fr) auto;padding:12px 12px 12px 6px}
  html.mt-app .rvx-float{bottom:118px}
  .rvx-float.is-free{transform:none;bottom:auto}
  .rvx-float-grip{display:grid;place-items:center;width:26px;height:52px;padding:0;border:0;border-radius:10px;background:none;color:rgba(255,255,255,.4);cursor:grab}
  .rvx-float-grip:hover,.rvx-float-grip:focus-visible{color:#fff;background:rgba(255,255,255,.08)}
  .rvx-float-grip svg{fill:currentColor;stroke:none}
  .rvx-float.is-dragging{box-shadow:0 0 0 2px rgba(95,255,192,.6),0 30px 70px -24px rgba(0,0,0,.95)}
  .rvx-float.is-dragging .rvx-float-grip{cursor:grabbing}
  .rvx-float-cur{font-size:21px}
  .rvx-float.is-big .rvx-float-cur{font-size:28px}
}

/* ================================================================ letra no Cinema (karaokê) — motor novo */
.rv-karaoke .rvx-kara-lines{position:relative;overflow:hidden!important;padding:0!important}
.rvx-kara-rail{padding:32vh 4px 60vh;transition:transform .55s cubic-bezier(.2,.8,.2,1);will-change:transform}
.rvx-kara-lines[hidden]{display:none}
.rvx-kline.is-current{color:#fff}
html.anim-none .rvx-kara-rail,html.anim-none .rvx-lyrics-rail{transition:none!important}
@media (prefers-reduced-motion:reduce){.rvx-kara-rail,.rvx-lyrics-rail{transition:none!important}}
/* 24.49: sem desfoque de fundo (backdrop-filter) por cima do clipe: com o vídeo
   rodando o navegador refazia o desfoque a cada quadro do vídeo */
.rvx.has-video :is(.rvx-sub,.rvx-toast,.rvx-cta){-webkit-backdrop-filter:none;backdrop-filter:none}
.rvx.has-video .rvx-sub{background:rgba(3,10,24,.8)}
.rvx.has-video .rvx-toast{background:rgba(4,12,28,.88)}
.rvx.has-video .rvx-cta{background:rgba(4,12,28,.78)}
@media (pointer:coarse){
  .rvx :is(.rvx-sub,.rvx-toast,.rvx-cta,.rvx-pop){-webkit-backdrop-filter:none;backdrop-filter:none}
  .rvx .rvx-sub{background:rgba(3,10,24,.8)}
  .rvx .rvx-pop{background:rgba(6,18,40,.98)}
  .rvx-line{transition:none}
  .rvx-float{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(5,14,32,.94)!important}
}