/* MAIS TUNER 24.24 — Modo Cinema no celular (site e web app).
   Reorganiza o Cinema em pé: botão de fechar no topo, capa grande, nome e
   música, e um painel inferior fixo com a linha do tempo, os controles
   principais (−15, play, +15) e os atalhos (Ao vivo, Rádios, Histórico).
   Vale para os três estilos do Cinema. Nenhuma fonte muda. */

@media (max-width:760px){
  html body #cinemaModal.show{display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
  html body #cinemaModal .cinema-hint{display:none!important}

  /* topo: fechar à esquerda, "Tocando agora" ao centro */
  html body #cinemaModal::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(76px + env(safe-area-inset-top));z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,20,.55),transparent)}
  html body #cinemaModal #cinemaCollapseBtn{position:fixed!important;z-index:6!important;top:calc(12px + env(safe-area-inset-top))!important;left:14px!important;
    display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;margin:0!important;
    border-radius:50%!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(6,18,34,.55)!important;color:#fff!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    grid-column:auto!important;grid-row:auto!important}
  html body #cinemaModal #cinemaCollapseBtn svg{display:none!important}
  html body #cinemaModal #cinemaCollapseBtn::before{content:'';width:12px;height:12px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:translateY(-3px) rotate(45deg);border-radius:1px}
  html body #cinemaModal #cinemaCollapseBtn .cinema-app-control-label{display:none!important}
  html body #cinemaModal .cinema-actions,html body #cinemaModal .cinema-follow{display:none!important}
  html body #cinemaModal .mt-user-chip-cinema,html body #cinemaModal .cinema-controls-spacer{display:none!important}

  /* corpo: capa e informações centradas, rolam se faltar altura */
  html body #cinemaModal .cinema-body{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
    gap:16px!important;padding:calc(64px + env(safe-area-inset-top)) 22px 14px!important;overflow-y:auto!important;overscroll-behavior:contain;text-align:center!important}
  html body #cinemaModal .cinema-art-wrap{flex:none!important;width:min(78vw,40dvh,340px)!important;height:min(78vw,40dvh,340px)!important;margin:0 auto!important}
  html body #cinemaModal .cinema-art,html body #cinemaModal #cinemaArt{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;border-radius:24px!important;box-shadow:0 34px 70px -30px rgba(0,0,0,.95)!important}
  html body #cinemaModal .cinema-info{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;max-width:520px!important;min-width:0!important;text-align:center!important}
  html body #cinemaModal .cinema-station-row{justify-content:center!important;flex-wrap:wrap!important;gap:8px!important;margin:0 0 10px!important}
  html body #cinemaModal .cinema-title{max-width:100%;margin:4px 0 4px!important;font-size:clamp(24px,7.2vw,32px)!important;line-height:1.08!important;overflow-wrap:anywhere;
    display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html body #cinemaModal .cinema-subtitle{max-width:100%;margin:0!important;font-size:15px!important;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body #cinemaModal .mt-cine-eyebrow{max-width:100%;margin-bottom:8px!important}
  html body #cinemaModal .mt-cw{width:100%!important;max-width:420px;margin-top:14px!important}

  /* painel inferior */
  html body #cinemaModal .cinema-bottombar{position:relative!important;inset:auto!important;flex:none!important;width:auto!important;margin:0!important;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom))!important;border-radius:28px 28px 0 0!important;border:1px solid rgba(255,255,255,.1)!important;border-bottom:0!important;
    background:linear-gradient(180deg,rgba(10,26,46,.94),rgba(4,14,27,.98))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;animation:cmFade .45s ease both!important;box-shadow:0 -24px 50px -30px rgba(0,0,0,.9)!important}
  html body #cinemaModal .cinema-timeline{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:center!important;gap:6px 10px!important;margin:0 0 12px!important;padding:0!important;border:0!important;background:none!important}
  html body #cinemaModal .cinema-app-timeline-label{display:none!important}
  html body #cinemaModal .cinema-timeline-track{grid-column:1/-1!important;grid-row:1!important;height:40px!important;min-width:0!important;border-radius:12px!important}
  html body #cinemaModal #cinemaTimeStart{grid-column:1!important;grid-row:2!important;justify-self:start!important;font-size:11px!important;opacity:.75}
  html body #cinemaModal #cinemaTimeEnd{grid-column:2!important;grid-row:2!important;justify-self:end!important;font-size:11px!important;opacity:.75}

  html body #cinemaModal .cinema-controls-row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-auto-rows:auto;align-items:center!important;justify-items:center!important;gap:12px 8px!important;width:100%!important;padding:0!important}
  html body #cinemaModal .cinema-controls-row #cinemaSkipBack{grid-column:1/3!important;grid-row:1!important;justify-self:end!important;margin-right:6px}
  html body #cinemaModal .cinema-controls-row #cinemaPlayBtn{grid-column:3/5!important;grid-row:1!important;width:72px!important;height:72px!important;min-width:72px!important;box-shadow:0 18px 34px -14px rgba(255,71,71,.6)}
  html body #cinemaModal .cinema-controls-row #cinemaPlayBtn svg{width:30px!important;height:30px!important}
  html body #cinemaModal .cinema-controls-row #cinemaSkipFwd{grid-column:5/7!important;grid-row:1!important;justify-self:start!important;margin-left:6px}
  html body #cinemaModal .cinema-controls-row :is(#cinemaSkipBack,#cinemaSkipFwd){width:52px!important;height:52px!important;min-height:52px!important;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;display:grid!important;place-items:center!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaSkipBack,#cinemaSkipFwd) svg{width:30px!important;height:30px!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaSkipBack,#cinemaSkipFwd) .cinema-app-control-label{display:none!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaLiveBtn,#cinemaStationsBtn,#cinemaQueueBtn){grid-row:2!important;justify-self:stretch!important;width:100%!important;height:48px!important;min-height:48px!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:0 8px!important;border-radius:16px!important;
    border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.07)!important;color:#fff!important;font-size:12px!important;white-space:nowrap}
  html body #cinemaModal .cinema-controls-row #cinemaLiveBtn{grid-column:1/3!important}
  html body #cinemaModal .cinema-controls-row #cinemaStationsBtn{grid-column:3/5!important}
  html body #cinemaModal .cinema-controls-row #cinemaQueueBtn{grid-column:5/7!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaStationsBtn,#cinemaQueueBtn) svg{width:18px!important;height:18px!important;flex:none}
  html body #cinemaModal .cinema-controls-row :is(#cinemaStationsBtn,#cinemaQueueBtn) .cinema-app-control-label{display:inline!important;font-size:12px!important;font-weight:800;letter-spacing:0}
  html body #cinemaModal .cinema-controls-row #cinemaLiveBtn{font-weight:800;letter-spacing:.04em}

  /* fundo do clima e efeitos ficam atrás de tudo */
  html body #cinemaModal :is(.cinema-weather-layer,.mt-cine-ambient){z-index:0}
  html body #cinemaModal :is(.cinema-body,.cinema-bottombar){z-index:2}

  /* web app: o Cinema cobre a barra de abas e o mini player */
  html.pwa-standalone.cinema-active :is(.mt-app-tabs,.pwa-app-dock){display:none!important}
}

/* telas baixas (celular pequeno): capa menor e menos espaço */
@media (max-width:760px) and (max-height:700px){
  html body #cinemaModal .cinema-art-wrap{width:min(62vw,30dvh)!important;height:min(62vw,30dvh)!important}
  html body #cinemaModal .cinema-body{gap:10px!important;padding-top:calc(58px + env(safe-area-inset-top))!important}
  html body #cinemaModal .cinema-controls-row #cinemaPlayBtn{width:62px!important;height:62px!important;min-width:62px!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaLiveBtn,#cinemaStationsBtn,#cinemaQueueBtn){height:42px!important;min-height:42px!important}
  html body #cinemaModal .cinema-timeline-track{height:34px!important}
}

/* celular deitado: capa e dados lado a lado, painel compacto */
@media (max-width:920px) and (max-height:520px) and (orientation:landscape){
  html body #cinemaModal.show{display:flex!important;flex-direction:column!important;height:100dvh!important;overflow:hidden!important}
  html body #cinemaModal .cinema-hint,html body #cinemaModal .cinema-actions,html body #cinemaModal .mt-user-chip-cinema,html body #cinemaModal .cinema-controls-spacer{display:none!important}
  html body #cinemaModal .cinema-body{flex:1 1 auto!important;min-height:0!important;display:flex!important;align-items:center!important;overflow-y:auto!important}
  html body #cinemaModal .cinema-art,html body #cinemaModal #cinemaArt{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;border-radius:18px!important}
  html body #cinemaModal .cinema-bottombar{position:relative!important;inset:auto!important;flex:none!important;margin:0!important;border-radius:22px 22px 0 0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(6,18,32,.96)!important}
  html body #cinemaModal .cinema-timeline{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px!important}
  html body #cinemaModal .cinema-app-timeline-label{display:none!important}
  html body #cinemaModal .cinema-timeline-track{height:32px!important;grid-column:auto!important;grid-row:auto!important}
  html body #cinemaModal :is(#cinemaTimeStart,#cinemaTimeEnd){grid-row:auto!important;grid-column:auto!important;font-size:10px!important}
  html body #cinemaModal #cinemaCollapseBtn{grid-row:1!important;width:40px!important;height:40px!important;min-height:40px!important}
  html body #cinemaModal .cinema-body{flex-direction:row!important;justify-content:center!important;gap:22px!important;padding:12px 70px 8px!important;text-align:left!important}
  html body #cinemaModal .cinema-art-wrap{width:min(42dvh,170px)!important;height:min(42dvh,170px)!important;margin:0!important}
  html body #cinemaModal .cinema-info{align-items:flex-start!important;text-align:left!important}
  html body #cinemaModal .cinema-station-row{justify-content:flex-start!important}
  html body #cinemaModal .cinema-title{font-size:22px!important}
  html body #cinemaModal .mt-cw{display:none!important}
  html body #cinemaModal .cinema-bottombar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:8px 16px calc(8px + env(safe-area-inset-bottom))!important}
  html body #cinemaModal .cinema-timeline{margin:0!important}
  html body #cinemaModal .cinema-controls-row{display:grid!important;grid-template-columns:repeat(7,auto)!important;gap:6px!important;width:auto!important;align-items:center!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaSkipBack,#cinemaPlayBtn,#cinemaSkipFwd,#cinemaLiveBtn,#cinemaStationsBtn,#cinemaQueueBtn){grid-row:1!important;grid-column:auto!important;margin:0!important;justify-self:center!important}
  html body #cinemaModal .cinema-controls-row #cinemaPlayBtn{width:52px!important;height:52px!important;min-width:52px!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaLiveBtn,#cinemaStationsBtn,#cinemaQueueBtn){width:auto!important;height:40px!important;min-height:40px!important;padding:0 10px!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaStationsBtn,#cinemaQueueBtn) .cinema-app-control-label{display:none!important}
}
@media (max-width:760px){
  html body #cinemaModal .cinema-controls-row :is(#cinemaSkipBack,#cinemaSkipFwd):disabled{opacity:.3}
}

@keyframes cmFade{from{opacity:0}to{opacity:1}}

/* 24.36: botão "Letra" (karaokê) na fileira de baixo do Cinema no celular */
@media (max-width:760px){
  html body #cinemaModal .cinema-controls-row{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:12px 6px!important}
  html body #cinemaModal .cinema-controls-row #cinemaSkipBack{grid-column:1/5!important}
  html body #cinemaModal .cinema-controls-row #cinemaPlayBtn{grid-column:5/9!important}
  html body #cinemaModal .cinema-controls-row #cinemaSkipFwd{grid-column:9/13!important}
  html body #cinemaModal .cinema-controls-row #cinemaLiveBtn{grid-column:1/4!important}
  html body #cinemaModal .cinema-controls-row #cinemaStationsBtn{grid-column:4/7!important}
  html body #cinemaModal .cinema-controls-row #cinemaQueueBtn{grid-column:7/10!important}
  html body #cinemaModal .cinema-controls-row #cinemaLyricsBtn{grid-column:10/13!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaLiveBtn,#cinemaStationsBtn,#cinemaQueueBtn,#cinemaLyricsBtn){grid-row:2!important;justify-self:stretch!important;width:100%!important;height:48px!important;min-height:48px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:0 4px!important;border-radius:16px!important;
    border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.07)!important;color:#fff!important;font-size:11.5px!important;white-space:nowrap;overflow:hidden;height:56px!important;min-height:56px!important}
  html body #cinemaModal .cinema-controls-row #cinemaLyricsBtn svg{width:18px!important;height:18px!important;flex:none;fill:currentColor}
  html body #cinemaModal .cinema-controls-row :is(#cinemaStationsBtn,#cinemaQueueBtn,#cinemaLyricsBtn) .cinema-app-control-label{display:inline!important;font-size:11.5px!important;font-weight:800;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
  html body #cinemaModal .cinema-controls-row #cinemaLyricsBtn[aria-pressed="true"]{background:rgba(95,255,192,.2)!important;border-color:rgba(95,255,192,.55)!important}
}
@media (max-width:920px) and (max-height:520px) and (orientation:landscape){
  html body #cinemaModal .cinema-controls-row{grid-template-columns:repeat(8,auto)!important}
  html body #cinemaModal .cinema-controls-row #cinemaLyricsBtn{grid-row:1!important;grid-column:auto!important;width:auto!important;height:40px!important;min-height:40px!important;padding:0 10px!important;margin:0!important}
  html body #cinemaModal .cinema-controls-row #cinemaLyricsBtn .cinema-app-control-label{display:none!important}
}

/* 24.36: fileira de baixo do Cinema no celular como uma doca única — os quatro
   atalhos (ao vivo, rádios, histórico, letra) do mesmo tamanho, ícone em cima e
   nome embaixo, dentro de uma cápsula só, sem quatro caixinhas diferentes. */
@media (max-width:760px){
  html body #cinemaModal .cinema-controls-row::before{content:'';grid-row:2;grid-column:1/13;align-self:stretch;justify-self:stretch;width:100%;border-radius:22px;
    background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
  html body #cinemaModal .cinema-controls-row{column-gap:0!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaLiveBtn,#cinemaStationsBtn,#cinemaQueueBtn,#cinemaLyricsBtn){position:relative;z-index:1;
    height:60px!important;min-height:60px!important;margin:0!important;padding:6px 2px!important;gap:5px!important;border:0!important;border-radius:18px!important;
    background:transparent!important;color:rgba(255,255,255,.86)!important;font-size:11.5px!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important}
  html body #cinemaModal .cinema-controls-row :is(#cinemaStationsBtn,#cinemaQueueBtn,#cinemaLyricsBtn) svg{width:22px!important;height:22px!important;flex:none}
  html body #cinemaModal .cinema-controls-row :is(#cinemaStationsBtn,#cinemaQueueBtn,#cinemaLyricsBtn) .cinema-app-control-label{display:block!important;font-size:11.5px!important;font-weight:800!important;line-height:1}
  html body #cinemaModal .cinema-controls-row :is(#cinemaLiveBtn,#cinemaStationsBtn,#cinemaQueueBtn,#cinemaLyricsBtn):active{background:rgba(255,255,255,.12)!important}
  /* separadores finos entre os atalhos */
  html body #cinemaModal .cinema-controls-row :is(#cinemaStationsBtn,#cinemaQueueBtn,#cinemaLyricsBtn)::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:1px;background:rgba(255,255,255,.1)}
  /* ao vivo: a bolinha vira o "ícone" e o texto fica do mesmo tamanho dos outros */
  html body #cinemaModal .cinema-controls-row #cinemaLiveBtn #cinemaLiveDot{width:12px!important;height:12px!important;margin:5px 0!important;flex:none}
  html body #cinemaModal .cinema-controls-row #cinemaLiveBtn #cinemaLiveLabel{font-size:11.5px!important;font-weight:800!important;line-height:1;letter-spacing:.02em!important}
  /* letra ligada: destaque menta */
  html body #cinemaModal .cinema-controls-row #cinemaLyricsBtn[aria-pressed="true"]{background:rgba(95,255,192,.16)!important;color:#5fffc0!important;box-shadow:none!important}
}
@media (max-width:760px){
  html body #cinemaModal .cinema-controls-row #cinemaLiveBtn #cinemaLiveLabel{display:block;text-transform:lowercase!important;letter-spacing:0!important}
  html body #cinemaModal .cinema-controls-row #cinemaLiveBtn #cinemaLiveLabel::first-letter{text-transform:uppercase}
}