/* CMWR V3.0 · mobile · 02-player */
@media (max-width: 900px){
.player-panel {
  min-width: 0;
}
}

@media (max-width:480px){
.archive-footer {
  display: grid;
}
}

@media (max-width:420px){
#archive-options {
  padding-inline: 0;
}
}

@media (max-width:1100px){
.player-panel {
  padding: 16px 0;
  border-radius: 18px 18px 0 0;
}
.cassette-player {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 18px;
}
.player-scene {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 650;
  overflow: hidden;
  order: 0;
}
.player-artboard {
  display: block;
  position: absolute;
  width: 209%;
  height: 128.6154%;
  left: -71.1111%;
  top: -21.5385%;
}
.current-tape-copy span {
  font-size: clamp(10px,2vw,20px);
}
.current-tape-copy strong {
  font-size: clamp(9px,1.8vw,18px);
}
.playlist-tapes {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  padding: 0 12px;
  order: 1;
  pointer-events: auto;
}
.playlist-tape {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  border: 3px solid #433a2f;
  border-radius: 5px;
  height: 105px;
  background: var(--box-paper);
}
.playlist-tape.is-selected {
  border-color: var(--amber);
}
.playlist-tape__label {
  position: static;
  width: 100%;
  height: 100%;
  padding: 8px;
  gap: 5px;
}
.playlist-tape__label strong {
  font-size: 11px;
}
.hardware-controls {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  padding: 0 12px;
  order: 2;
}
.hardware-button {
  position: relative;
  inset: auto;
  width: 100%;
  height: 52px;
}
.hardware-button::before {
  font-size: 20px;
}
.player-progress {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0 12px;
  padding: 12px;
  order: 3;
  background: #111b20;
  border: 1px solid #514b42;
  border-radius: 7px;
  grid-template-rows: auto auto;
  gap: 8px;
}
.player-progress time {
  font-size: 12px;
}
#audio-progress {
  height: 44px;
}
#audio-progress::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -10px;
}
#audio-progress::-moz-range-thumb {
  width: 22px;
  height: 22px;
}
.player-progress__actions {
  justify-content: space-between;
  gap: 12px;
}
.player-progress__actions a {
  font-size: 11px;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.transport-legend {
  position: relative;
  inset: auto;
  translate: none;
  width: auto;
  max-width: none;
  margin: 0 12px;
  order: 4;
  font-size: 12px;
  padding: 10px;
  gap: 10px;
  border-radius: 6px;
}
.archive-dialog {
  margin: auto;
  max-height: calc(100dvh - 24px);
  width: min(300px,calc(100vw - 24px));
  padding: 14px;
}
.archive-close {
  position: sticky;
  top: 0;
  background: #111417;
  z-index: 3;
}
#audio-progress:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}
.archive-dialog::backdrop {
  background: rgba(5,8,10,.45);
}
.archive-dialog select {
  font-size: 14px;
}
.collection-logo {
  height: 26px;
  width: 60%;
}
.playlist-tape__label small {
  font-size: 9px;
}
.cassette-cover__notes {
  font-size: 10px;
}
.support-preview {
  position: relative;
  inset: auto;
  order: 5;
  width: auto;
  margin: 0 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 14px;
  align-items: center;
  text-align: left;
}
.support-preview strong,
.support-preview p,
.support-preview small {
  grid-column: 2;
  margin: 0;
}
.support-preview strong {
  font-size: 16px;
}
.support-preview p {
  font-size: 13px;
}
.support-preview small {
  font-size: 11px;
}
.archive-season .cassette-cover__number {
  font-size: 30px;
}
.playlist-tape,
.playlist-tape:hover,
.playlist-tape.is-selected {
  translate: none;
  transform: none;
  filter: none;
  box-shadow: none;
}
.participation-poster {
  position: relative;
  inset: auto;
  order: 6;
  width: min(340px,calc(100% - 32px));
  margin: 4px auto 18px;
  padding: 0;
  gap: 12px;
}
.player-wall-logo {
  display: none;
}
.support-preview__qr {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
}
}

@media (min-width:650px) and (max-width:1100px){
.cassette-player {
  max-width: 680px;
  margin: auto;
}
}

@media (max-width:900px){
.player-panel {
    --s02-shell-width:min(100%, 39svh);
    --s02-btn-x:8.61%;
    --s02-btn-w:11.26%;
    --s02-btn-h:6.45%;
    --s02-play-y:22.55%;
    --s02-pause-y:33.61%;
    --s02-rew-y:44.86%;
    --s02-ff-y:55.50%;
    --s02-stop-y:66.03%;
    --s02-reel-x:60.68%;
    --s02-reel-top-y:42.40%;
    --s02-reel-bottom-y:61.11%;
    --s02-reel-size:10.7%;

    position:relative !important;
    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    padding:8px 50px 10px 8px !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:url("../../assets/img/fundo-trabalho.jpg?v=s02-final-v4") center/cover no-repeat !important;
    box-shadow:none !important;
  }
.player-panel.s02-scene--work {
    background:url("../../assets/img/fundo-trabalho.jpg?v=s02-final-v4") center/cover no-repeat !important;
  }
.player-panel.s02-scene--home {
    background:url("../../assets/img/fundo-casa.jpg?v=s02-final-v4") center/cover no-repeat !important;
  }
.cassette-player {
    position:relative !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-rows:42px 42px minmax(0,1fr) !important;
    gap:6px !important;
    align-items:center !important;
    overflow:hidden !important;
    background:transparent !important;
  }
/* Elementos secundários do desktop não disputam espaço com o portátil. */
  .player-panel .participation-poster,
  .player-panel .support-preview,
  .player-panel .playlist-tapes,
  .player-panel .transport-legend,
  .player-panel .player-wall-logo { display:none !important; }
/* O board usa a arte-base limpa aprovada como peça física do player. */
  .player-panel .player-scene {
    position:relative !important;
    order:2 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:transparent !important;
  }
.player-panel .player-artboard {
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(calc(100% - 10px), 330px) !important;
    height:auto !important;
    aspect-ratio:941/1672 !important;
    transform:translate(-50%, -50%) !important;
    margin:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:url("../../assets/img/sessao02-mobile-player-transparent.webp?v=s02-final-v4") center/contain no-repeat !important;
    box-shadow:none !important;
  }
/* LOGO-ADESIVO — aplicação da marca oficial no Walkman.
     Arquivo: assets/img/logo-adesivo.webp
     GPS MANUAL:
       right = aproxima/afasta da borda direita
       top   = sobe/desce
       width = tamanho
       rotate = inclinação
  */
  /* COR DO K7 CARREGADO — acompanha o gênero confirmado no ACERVO. */
  .player-panel .player-artboard::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:5 !important;
    left:41.8% !important;
    top:29.8% !important;
    width:28.0% !important;
    height:44.7% !important;
    border:clamp(7px,2.6vw,12px) solid rgba(166,50,40,.72) !important;
    border-radius:6% !important;
    background:transparent !important;
    mix-blend-mode:color !important;
    opacity:.84 !important;
    pointer-events:none !important;
    box-sizing:border-box !important;
  }
.cassette-player[data-mobile-tone="red"] .player-artboard::before {
    border-color:rgba(178,51,41,.82) !important;
    mix-blend-mode:color !important;
  }
.cassette-player[data-mobile-tone="black"] .player-artboard::before {
    border-color:rgba(16,17,18,.92) !important;
    mix-blend-mode:multiply !important;
  }
.cassette-player[data-mobile-tone="cream"] .player-artboard::before {
    border-color:rgba(222,203,162,.88) !important;
    mix-blend-mode:color !important;
  }
.player-panel .player-artboard::after {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:10 !important;

    right:3% !important;
    top:78% !important;
    width:41% !important;
    aspect-ratio:2.15 / 1 !important;

    transform:rotate(-45deg) !important;
    transform-origin:center !important;

    background-image:url("../../assets/img/logo-adesivo.webp?v=s02-final-v4") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;

    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:.96 !important;
    pointer-events:none !important;

    /* PROFUNDIDADE DA LOGO-ADESIVO
       Sombra acompanha o recorte transparente da própria logo:
       brilho superior + borda escura + sombra curta = peça assentada na tampa.
    */
    filter:
      drop-shadow(0 -1px 0 rgba(255,232,181,.20))
      drop-shadow(1px 1px 0 rgba(82,39,18,.62))
      drop-shadow(2px 2px 1px rgba(20,8,4,.48))
      drop-shadow(3px 4px 3px rgba(0,0,0,.30))
      saturate(.94)
      contrast(1.03) !important;
  }
.player-panel .cassette-player__art { display:none !important; }
/* Marcações do K7 — código sobre a etiqueta física da fita. */
  .player-panel .current-tape-copy {
    position:absolute !important;
    z-index:6 !important;
    inset:0 !important;
    pointer-events:none !important;
    font-family:"Arial Narrow",Arial,sans-serif !important;
    font-style:normal !important;
    color:#171412 !important;
    text-transform:uppercase !important;
  }
.player-panel .current-tape-copy span,
  .player-panel .current-tape-copy strong {
    position:absolute !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#181513 !important;
    text-shadow:none !important;
    writing-mode:vertical-rl !important;
    transform:rotate(180deg) !important;
  }
.player-panel .current-tape-copy span {
    left:43.0% !important;
    top:34.0% !important;
    width:4.1% !important;
    height:31.5% !important;
    font-size:clamp(7px,1.8vw,10px) !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
  }
.player-panel .current-tape-copy strong {
    left:47.4% !important;
    top:34.0% !important;
    width:4.0% !important;
    height:31.5% !important;
    font-size:clamp(5.8px,1.42vw,8px) !important;
    font-weight:800 !important;
    letter-spacing:.03em !important;
  }
/* Engrenagens: ficam exatamente sobre os hubs visíveis da fita. */
  .player-panel .cassette-mechanism {
    position:absolute !important;
    z-index:7 !important;
    inset:0 !important;
    pointer-events:none !important;
  }
.player-panel .cassette-reel {
    position:absolute !important;
    width:var(--s02-reel-size) !important;
    aspect-ratio:1 !important;
    translate:-50% -50% !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
  }
.player-panel .cassette-reel--left {
    left:var(--s02-reel-x) !important;
    top:var(--s02-reel-top-y) !important;
  }
.player-panel .cassette-reel--right {
    left:var(--s02-reel-x) !important;
    top:var(--s02-reel-bottom-y) !important;
  }
.player-panel .cassette-reel i {
    position:absolute !important;
    inset:4% !important;
    display:block !important;
    border-radius:50% !important;
    opacity:.82 !important;
    background:repeating-conic-gradient(
      from 0deg,
      rgba(221,203,170,.96) 0 8deg,
      rgba(15,16,15,.92) 8deg 26deg
    ) !important;
    -webkit-mask:radial-gradient(circle,transparent 0 34%,#000 35% 58%,transparent 59%) !important;
    mask:radial-gradient(circle,transparent 0 34%,#000 35% 58%,transparent 59%) !important;
    box-shadow:none !important;
    mix-blend-mode:normal !important;
  }
/* VU MOBILE — integrado visualmente ao DIAL e embutido na tampa.
     Fundo escuro + escala turquesa + ponteiro amarelo.
     A moldura vermelha conversa com as faixas do aparelho.
     GPS DO VU:
       left / top = posição
       width      = largura
       height     = altura
  */
  .player-panel .tape-vu {
    --vu-angle:-38deg;
    position:absolute !important;
    z-index:8 !important;

    left:37.5% !important;
    top:18.0% !important;
    width:44.5% !important;
    height:6.4% !important;

    border-radius:4px !important;
    overflow:hidden !important;

    background:
      repeating-linear-gradient(
        90deg,
        transparent 0 9%,
        rgba(76,217,210,.28) 9% 9.7%
      ),
      linear-gradient(
        180deg,
        rgba(3,15,18,.98),
        rgba(1,7,10,.99)
      ) !important;

    /* aro vermelho, como as faixas inferiores */
    border:2px solid rgba(151,40,31,.96) !important;
    outline:1px solid rgba(43,15,12,.92) !important;
    outline-offset:0 !important;

    /* luz externa mínima + sombra interna = peça afundada */
    box-shadow:
      inset 0 3px 8px rgba(0,0,0,.94),
      inset 0 -1px 1px rgba(255,171,92,.10),
      inset 0 0 12px rgba(74,216,210,.055),
      0 1px 0 rgba(255,207,78,.22),
      0 -1px 0 rgba(44,11,9,.88),
      0 0 0 2px rgba(58,15,12,.48) !important;
  }
.player-panel .tape-vu::before {
    content:"VU" !important;
    position:absolute !important;
    right:4% !important;
    bottom:10% !important;
    color:rgba(104,224,216,.48) !important;
    font:900 clamp(5px,1.25vw,7px)/1 Arial,sans-serif !important;
    letter-spacing:.10em !important;
  }
.player-panel .tape-vu__needle {
    left:50% !important;
    top:112% !important;
    width:1px !important;
    height:110% !important;
    background:#e7bd48 !important;
    box-shadow:0 0 3px rgba(231,189,72,.45) !important;
    transform-origin:50% 100% !important;
  }
.player-panel .tape-vu__pivot {
    left:50% !important;
    top:112% !important;
    width:6px !important;
    height:6px !important;
    background:#e7bd48 !important;
    box-shadow:0 0 4px rgba(231,189,72,.35) !important;
  }
.player-panel .rec-status {
    position:absolute !important;
    z-index:9 !important;
    left:82.0% !important;
    right:auto !important;
    top:25.3% !important;
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
  }
/* Botões físicos permanecem na imagem; o HTML desenha apenas símbolo/estado. */
  .player-panel .hardware-controls {
    position:absolute !important;
    z-index:12 !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    pointer-events:none !important;
  }
.player-panel .hardware-button {
    position:absolute !important;
    left:var(--s02-btn-x) !important;
    width:var(--s02-btn-w) !important;
    height:var(--s02-btn-h) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:8% !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:hidden !important;
    pointer-events:auto !important;
    color:transparent !important;
  }
.player-panel .hardware-button--play { top:var(--s02-play-y) !important; --s02-icon:#39d38b; }
.player-panel .hardware-button--pause { top:var(--s02-pause-y) !important; --s02-icon:#ef3f3a; }
.player-panel .hardware-button--rewind { top:var(--s02-rew-y) !important; --s02-icon:#ffc62e; }
.player-panel .hardware-button--forward { top:var(--s02-ff-y) !important; --s02-icon:#ffc62e; }
.player-panel .hardware-button--stop { top:var(--s02-stop-y) !important; --s02-icon:#20bdd1; }
.player-panel .hardware-button::after {
    content:"" !important;
    position:absolute !important;
    inset:5% !important;
    border-radius:8% !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:0 !important;
    transition:opacity .12s ease,box-shadow .12s ease !important;
  }
.player-panel .hardware-button::before {
    content:var(--button-symbol) !important;
    position:absolute !important;
    z-index:2 !important;
    inset:0 !important;
    display:grid !important;
    place-items:center !important;
    color:var(--s02-icon) !important;
    font:900 clamp(17px,4.8vw,25px)/1 Arial,sans-serif !important;
    letter-spacing:-.12em !important;
    text-indent:-.12em !important;
    text-shadow:0 1px 2px #000,0 0 7px color-mix(in srgb,var(--s02-icon) 42%,transparent) !important;
    transition:transform .08s ease,filter .12s ease !important;
  }
.player-panel .hardware-button:hover::after,
  .player-panel .hardware-button:focus-visible::after {
    opacity:1 !important;
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--s02-icon) 48%,transparent),0 0 9px color-mix(in srgb,var(--s02-icon) 26%,transparent) !important;
  }
.player-panel .hardware-button:not([aria-disabled="true"]):active::before,
  .cassette-player.is-playing .hardware-button--play::before,
  .cassette-player.is-paused .hardware-button--pause::before,
  .cassette-player.is-stopped .hardware-button--stop::before {
    transform:translateY(1px) scale(.92) !important;
    filter:brightness(1.18) !important;
  }
.cassette-player.is-play-ready .hardware-button--play::after {
    opacity:.72 !important;
    animation:s02-mobile-ready 1.6s ease-in-out infinite !important;
  }
/* Progresso abaixo do aparelho, ainda dentro da área útil antes do DIAL. */
  .player-panel .player-progress {
    position:relative !important;
    inset:auto !important;
    order:0 !important;
    width:100% !important;
    height:42px !important;
    margin:0 !important;
    padding:4px 10px !important;
    display:grid !important;
    place-items:center !important;
    background:
      linear-gradient(180deg,rgba(5,20,23,.96),rgba(2,9,12,.96)) !important;
    border:1px solid rgba(76,217,210,.25) !important;
    border-radius:7px !important;
    box-shadow:
      inset 0 3px 9px rgba(0,0,0,.72),
      inset 0 0 10px rgba(76,217,210,.04),
      0 1px 0 rgba(231,189,72,.14) !important;
  }
.player-panel .player-progress__line { width:100% !important; }
.player-panel .player-progress__actions { display:none !important; }
.player-panel .player-progress time {
    color:#dec68f !important;
    font-size:clamp(8px,2.2vw,10px) !important;
  }
.player-panel #audio-progress { height:30px !important; }
/* TESTE DE COMPOSIÇÃO — controles acima, Walkman descendo até o rodapé. */
  .player-panel .player-artboard {
    top:50.5% !important;
  }
}

@media (max-width:900px){
.player-panel {
    filter:none !important;
    opacity:1 !important;
    -webkit-mask:none !important;
    mask:none !important;
  }
.player-panel.s02-scene--work {
    background:url("../../assets/img/fundo-trabalho.jpg?v=s02-final-v4") center/cover no-repeat !important;
  }
.player-panel.s02-scene--home {
    background:url("../../assets/img/fundo-casa.jpg?v=s02-final-v4") center/cover no-repeat !important;
  }
.cassette-player,
  .player-panel .player-scene {
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    opacity:1 !important;
    -webkit-mask:none !important;
    mask:none !important;
    mix-blend-mode:normal !important;
  }
.player-panel::before,
  .player-panel::after,
  .cassette-player::before,
  .cassette-player::after,
  .player-panel .player-scene::before,
  .player-panel .player-scene::after {
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
    filter:none !important;
  }
}

@media (max-width:900px){
.player-panel {
    --s02-browser-safe: max(74px, calc(env(safe-area-inset-bottom, 0px) + 54px));

    height:100dvh !important;
    min-height:100dvh !important;
    padding:
      8px
      50px
      var(--s02-browser-safe)
      8px !important;

    background-position:center center !important;
    background-attachment:scroll !important;
  }
.cassette-player {
    height:100% !important;
    min-height:0 !important;
    grid-template-rows:42px 42px minmax(0,1fr) !important;
    overflow:hidden !important;
  }
.player-panel .player-scene {
    min-height:0 !important;
    overflow:hidden !important;
  }
/* Mantém o aparelho inteiro fora da faixa translúcida do navegador. */
  .player-panel .player-artboard {
    top:49% !important;
    max-height:100% !important;
  }
}

@media(max-width:900px){
.player-panel{padding-top:clamp(34px,5.5dvh,52px)!important}
.player-panel .tape-vu__needle{
   top:auto!important;bottom:-7%!important;height:107%!important;
   translate:-50% 0!important;
   transform-origin:50% 100%!important;transform:rotate(var(--vu-angle))!important;
   background:#f6cf6a!important;box-shadow:0 0 5px #f6cf6a88!important
 }
.player-panel .tape-vu__pivot{top:auto!important;bottom:-12%!important}
}

@media(max-width:900px){
.player-panel .mobile-donation{position:absolute;z-index:30;left:12px;right:60px;bottom:calc(var(--s02-browser-safe,74px) + 5px);display:flex;align-items:center;gap:12px;min-height:98px;padding:8px 10px;box-sizing:border-box;border:1px solid #d8a96a99;border-radius:9px;background:#100e0cc9;box-shadow:0 6px 20px #0008;color:#f6e3be}
.player-panel .mobile-donation a{display:block;flex:0 0 clamp(78px,23vw,100px);line-height:0;background:#fff;border-radius:3px;padding:3px;box-sizing:border-box}
.player-panel .mobile-donation img{display:block;width:100%;height:auto}
.player-panel .mobile-donation p{margin:0;font:800 clamp(12px,3.2vw,16px)/1.25 Arial,sans-serif}
.player-panel .player-artboard{width:min(calc(100% - 10px),330px,var(--s02-qr-board-width,330px))!important;top:var(--s02-qr-board-top,49%)!important}
}

@media(max-width:900px){
.player-panel .mobile-donation{display:flex}
}

/* Última temporada entre o walkman e o QR, sem cobrir a área de toque do acervo. */
.mobile-featured-tape{display:none}
@media(max-width:900px){
  .player-panel .mobile-donation{
    bottom:calc(var(--s02-browser-safe,74px) - 38px);
  }
  .player-panel .mobile-featured-tape{
    position:absolute;z-index:31;left:calc(50% - 25px);
    bottom:calc(var(--s02-browser-safe,74px) + 99px);
    transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:3px;
    width:min(190px,50vw);min-height:106px;padding:3px 7px 5px;
    border:1px solid #91ed9d;border-radius:12px;
    color:#c6ffb5;background:linear-gradient(145deg,#071010ed,#14221bed);
    box-shadow:0 0 0 3px #0b100e99,0 0 22px #79ff6470,inset 0 0 13px #3f9a4650;
    cursor:pointer;animation:mobile-featured-glow 2.7s ease-in-out infinite;
  }
  .mobile-featured-tape__eyebrow{
    font:800 10px/1.1 Arial,sans-serif;letter-spacing:.12em;
    text-shadow:0 0 8px #75e383;
  }
  .mobile-featured-tape__body{position:relative;display:block;width:155px;max-width:100%}
  .mobile-featured-tape__body img{
    display:block;width:100%;height:auto;
    filter:brightness(.59) contrast(1.3) sepia(.2) hue-rotate(58deg);
  }
  .mobile-featured-tape__label{
    position:absolute;left:15%;right:15%;top:16%;height:20%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:#0b2316;text-align:center;text-transform:uppercase;
    font:900 10px/1 Arial,sans-serif;pointer-events:none;
    background:#b9ff9ecb;border-radius:2px;
  }
  .mobile-featured-tape__label strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-featured-tape__label small{font-size:8px}
  .mobile-featured-tape__led{
    position:absolute;top:8%;right:5%;width:8px;height:8px;border-radius:50%;
    background:#b0ff73;box-shadow:0 0 8px 3px #80ff72;
  }
  .mobile-featured-tape.is-loaded{border-color:#f5d970}
  .mobile-featured-tape:focus-visible{outline:3px solid #f5df83;outline-offset:4px}
  .mobile-featured-tape:disabled{opacity:.55;animation:none;cursor:default}
  @keyframes mobile-featured-glow{
    0%,100%{box-shadow:0 0 0 3px #0b100e99,0 0 11px #79ff6455,inset 0 0 13px #3f9a4650}
    50%{box-shadow:0 0 0 3px #0b100e99,0 0 26px #79ff64ad,inset 0 0 17px #3f9a4670}
  }
}
@media(max-width:900px) and (max-height:690px){
  .player-panel .mobile-featured-tape{width:160px;min-height:0}
  .mobile-featured-tape__body{width:130px}
  .player-panel .mobile-donation{min-height:80px}
}
@media(prefers-reduced-motion:reduce){.mobile-featured-tape{animation:none!important}}

@media(max-width:900px){
  .player-panel .cassette-player {
    grid-template-rows:42px 34px 42px minmax(0,1fr) !important;
  }
  .player-panel .mobile-archive-open { order:0 !important; }
  .player-panel .now-playing {
    position:relative;z-index:20;top:auto;left:auto;right:auto;order:1;
    width:100%;height:34px;min-height:0;display:flex;align-items:center;gap:8px;
    box-sizing:border-box;padding:5px 9px;border:1px solid #56ccc099;border-radius:6px;
    color:#f2dfb6;background:linear-gradient(90deg,#071419ed,#142124e8);
    box-shadow:inset 0 1px 6px #000b,0 0 9px #48d6bd44;
  }
  .player-panel .now-playing small {
    flex:none;color:#7cd8c8;font:800 8px/1 Arial,sans-serif;letter-spacing:.08em;
  }
  .player-panel .now-playing strong {
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font:800 clamp(10px,2.8vw,14px)/1.15 "Arial Narrow",Arial,sans-serif;
  }
  .player-panel .player-progress { order:2 !important; }
  .player-panel .player-scene { order:3 !important; }
  .player-panel .player-download { display:none!important; }
}