@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');

/* ===============================================================
   IMAGAS / NOVO PLAYER AZUL (2048 x 746)
   HOME e MÚSICAS compartilham lógica, mas têm imagens e playlists
   INDEPENDENTES em player/home/ e player/musicas/.

   A referência dos botões é a imagem 'visualizador novo referencia.png'.
   Todos os valores em % são relativos ao tamanho da MOLDURA.
   Para microajustes, altere SOMENTE as variáveis X/Y/LARGURA abaixo.
   =============================================================== */
:root {
  --imagas-player-width: 94%;
  --imagas-player-x: 0px;
  --imagas-player-y: 0px;

  /* 6 botões: esquerda (X), topo (Y), largura (W) */
  --mp-pause-x: 67.48%; --mp-pause-y: 41.15%; --mp-pause-w: 10.40%;
  --mp-play-x: 71.34%;  --mp-play-y: 54.56%;   --mp-play-w: 10.50%;
  --mp-stop-x: 75.49%;  --mp-stop-y: 68.77%;   --mp-stop-w: 10.45%;
  --mp-prev-x: 81.05%;  --mp-prev-y: 39.01%;   --mp-prev-w: 4.69%;
  --mp-next-x: 81.05%;  --mp-next-y: 25.74%;   --mp-next-w: 4.55%;
  --mp-add-x: 92.68%;   --mp-add-y: 50.00%;    --mp-add-w: 4.30%;

  /* Controles de posição das duas telas (não mudam as imagens) */
  --mp-oval-x: 7.3%; --mp-oval-y: 16%; --mp-oval-w: 25%;
  --mp-queue-x: 43.1%; --mp-queue-y: 39.2%; --mp-queue-w: 15.4%; --mp-queue-h: 25.5%;
  --mp-btn-shadow: 0 3px 4px rgba(16,45,135,.27);
}

.imagas-player-square {
  width:min(1080px,calc(100vw - 24px));
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center;
  margin:0 auto;
  background:#f7f7f7;
  isolation:isolate;
}
.imagas-mp {
  position:relative;
  width:var(--imagas-player-width);
  max-width:100%;
  aspect-ratio:2048/746;
  transform:translate(var(--imagas-player-x),var(--imagas-player-y));
  color:#21419b;
  font:normal 13px/1.2 'Courier New',monospace;
  container-type:inline-size;
  isolation:isolate;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.imagas-mp,.imagas-mp * { box-sizing:border-box; }
.imagas-mp img { user-select:none; -webkit-user-drag:none; }
.imagas-mp .mp-frame { display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }

/* DISPLAY OVAL: tempo e timeline arrastável; acompanha a inclinação da tela. */
.imagas-mp .mp-oval-screen {
  position:absolute;
  left:var(--mp-oval-x);top:var(--mp-oval-y);width:var(--mp-oval-w);
  height:23%;
  transform:rotate(-15deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6cqw;text-align:center;z-index:4;
  color:#29435a;text-shadow:0 1px 1px #d0e8d0;
}
.imagas-mp .mp-oval-caption {font-size:1.05cqw;font-weight:bold;letter-spacing:.18em;}
.imagas-mp .mp-time {font-size:2.1cqw;font-weight:bold;white-space:nowrap;font-variant-numeric:tabular-nums;}
.imagas-mp .mp-progress {
  display:block;width:82%;height:1.6cqw;min-height:8px;min-width:0;margin:0;
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  cursor:pointer;touch-action:none;
}
.imagas-mp .mp-progress::-webkit-slider-runnable-track {
  height:.35cqw;min-height:2px;border-radius:10px;
  background:linear-gradient(to right,#4264bb 0 var(--mp-progress,0%),#6d8a81 var(--mp-progress,0%) 100%);
}
.imagas-mp .mp-progress::-moz-range-track {height:3px;border-radius:10px;background:#779789;}
.imagas-mp .mp-progress::-moz-range-progress {height:3px;background:#4264bb;}
.imagas-mp .mp-progress::-webkit-slider-thumb {
  -webkit-appearance:none;width:1.22cqw;height:1.22cqw;min-width:8px;min-height:8px;
  margin-top:calc(-.435cqw);border-radius:50%;border:1px solid #3d4dbc;
  background:#dce7ff;box-shadow:0 1px 2px #344478;
}
.imagas-mp .mp-progress::-moz-range-thumb {
  width:1.22cqw;height:1.22cqw;min-width:8px;min-height:8px;
  border-radius:50%;border:1px solid #3d4dbc;background:#dce7ff;
}
.imagas-mp .mp-progress:focus-visible {outline:2px solid #3152a1;outline-offset:3px;}
.imagas-mp .mp-progress:disabled {opacity:.55;cursor:default;}

/* DISPLAY RETANGULAR: tocando agora + título deslizante + fila das próximas. */
.imagas-mp .mp-queue-screen {
  position:absolute;left:var(--mp-queue-x);top:var(--mp-queue-y);
  width:var(--mp-queue-w);height:var(--mp-queue-h);
  overflow:hidden;display:flex;flex-direction:column;z-index:4;
  padding:.65cqw .7cqw .4cqw;
  color:#2f4d66;
}
.imagas-mp .mp-now-caption {font-size:1.08cqw;letter-spacing:.04em;font-weight:bold;white-space:nowrap;}
.imagas-mp .mp-now-window {
  flex:0 0 auto;min-width:0;overflow:hidden;white-space:nowrap;
  border-bottom:1px solid #49637355;padding:.2cqw 0 .25cqw;
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.imagas-mp .mp-now-text {
  display:inline-block;font-size:1.4cqw;font-weight:bold;
  white-space:nowrap;max-width:none;
}
/* O título entra pela esquerda, atravessa a tela e sai pela direita. */
.imagas-mp .mp-now-text.is-scrolling {animation:mp-marquee-right 11s linear infinite;}
@keyframes mp-marquee-right {from{transform:translateX(-100%)}to{transform:translateX(var(--mp-marquee-run,180px))}}
.imagas-mp .mp-now-window:hover .mp-now-text{animation-play-state:paused;}
.imagas-mp .mp-queue-title {font-size:1.0cqw;margin:.4cqw 0 .15cqw;font-weight:bold;}
.imagas-mp .mp-tracklist {
  list-style:none;margin:0;padding:0;min-height:0;overflow-y:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:#5f83a2 transparent;
}
.imagas-mp .mp-tracklist li {margin:0 0 .12cqw;}
.imagas-mp .mp-tracklist button {
  display:block;max-width:100%;width:100%;padding:.12cqw .18cqw;
  background:#3f62821c;border:0;border-radius:2px;color:#233c5a;
  cursor:pointer;text-align:left;font:inherit;font-size:1.0cqw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.imagas-mp .mp-tracklist button:hover,
.imagas-mp .mp-tracklist button:focus-visible {background:#94bbbd90;outline:1px solid #365db6;}
.imagas-mp .mp-queue-empty {font-size:1.0cqw;opacity:.8;}

/* CAPA: opcional; só aparece quando a faixa tem 'cover' em playlist.js. */
.imagas-mp .mp-cover {
  position:absolute;left:20.4%;top:52.4%;width:8.6%;aspect-ratio:1;
  overflow:hidden;display:none;background:#020916;
  border:1px solid #5775c4;box-shadow:0 2px 5px #12245150;
  z-index:4;
}
.imagas-mp .mp-cover.has-cover {display:block;}
.imagas-mp .mp-cover-image {display:block;width:100%;height:100%;object-fit:cover;}
.imagas-mp .mp-no-cover{display:none;}

/* BOTÕES: sombras sutis no PNG, sem escala/transforms que distorçam a arte. */
.imagas-mp .mp-art-button {
  position:absolute;z-index:6;display:block;border:0;padding:0;margin:0;
  background:transparent;cursor:pointer;line-height:0;
  filter:drop-shadow(var(--mp-btn-shadow));
  transition:opacity .18s ease;
}
.imagas-mp .mp-art-button:hover {opacity:.79;}
.imagas-mp .mp-art-button:focus-visible {outline:2px solid #3c54b3;outline-offset:2px;}
.imagas-mp .mp-art-button img {display:block;width:100%;height:auto;pointer-events:none;object-fit:contain;}
.imagas-mp .mp-pause {left:var(--mp-pause-x);top:var(--mp-pause-y);width:var(--mp-pause-w);}
.imagas-mp .mp-play {left:var(--mp-play-x);top:var(--mp-play-y);width:var(--mp-play-w);}
.imagas-mp .mp-stop {left:var(--mp-stop-x);top:var(--mp-stop-y);width:var(--mp-stop-w);}
.imagas-mp .mp-prev {left:var(--mp-prev-x);top:var(--mp-prev-y);width:var(--mp-prev-w);}
.imagas-mp .mp-next {left:var(--mp-next-x);top:var(--mp-next-y);width:var(--mp-next-w);}
.imagas-mp .mp-add {left:var(--mp-add-x);top:var(--mp-add-y);width:var(--mp-add-w);}
.imagas-mp .mp-file-input {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.imagas-mp .mp-status {position:absolute;left:47%;top:72%;width:13%;margin:0;
   font-size:1.0cqw;color:#3756a3;text-align:center;white-space:nowrap;
   text-overflow:ellipsis;overflow:hidden;pointer-events:none;}
.imagas-mp .mp-status[data-error='true'] {color:#bb2933;font-weight:bold;}

/* HOME: mantém player NA ABERTURA ASCII, sem rolagem. */
html:has(body.page-home-player),body.page-home-player {overflow:hidden!important;width:100%;height:100%;}
body.page-home-player {--imagas-player-x:0px;--imagas-player-y:0px;}
body.page-home-player .hero {position:fixed;inset:0;height:100dvh;min-height:0;overflow:hidden;}
body.page-home-player .home-player-in-ascii {
  position:absolute;left:0;top:0;width:440px;height:auto;aspect-ratio:1;
  margin:0;z-index:23;display:grid;place-items:center;
  background:transparent;opacity:0;visibility:hidden;pointer-events:none;
}
body.page-home-player .home-player-in-ascii.home-player-positioned {opacity:1;visibility:visible;pointer-events:auto;}
body.page-home-player {
  --home-player-hole-left:18.8%;--home-player-hole-right:67.1%;
  --home-player-hole-top:34.1%;--home-player-hole-bottom:98.5%;
  --home-player-hole-fill:94%;

  /* HOME: edite somente estes três valores */
  --home-player-size: 1000px;
  /* X/Y da Home são configurados SOMENTE no fim deste arquivo. */
  --imagas-player-width: 100%;
}

/* MÚSICAS: manter a largura anterior de 65.8% e centralização na malha. */
body.page-musicas {--imagas-player-width:65.8%;--imagas-player-x:0px;--imagas-player-y:0px;}
body.page-musicas .subpage-main {padding:20px 12px 105px;}
body.page-musicas .subpage-stage {width:min(1080px,calc(100vw - 24px));aspect-ratio:1;min-height:0;display:grid;place-items:center;padding:0;}
body.page-musicas .subpage-stage .subpage-mesh {position:absolute;inset:0;left:0;top:0;transform:none;width:100%;height:100%;}
body.page-musicas .imagas-mp {z-index:5;}
@media (max-width:650px) {
  .imagas-mp .mp-tracklist button{font-size:1.4cqw;}
  .imagas-mp .mp-now-caption{font-size:1.4cqw;}
  .imagas-mp .mp-queue-title{font-size:1.4cqw;}
}
@media (prefers-reduced-motion:reduce) {
  .imagas-mp .mp-now-text.is-scrolling {animation:none;}
}
/* Posicionamento provisório enquanto a imagem ASCII carrega.
   Nunca ocultar a moldura por depender do JavaScript. */
body.page-home-player #home-player-in-ascii {
  display: grid;
  position: absolute;
  left: 50%;
  top: 66%;
  width: min(500px, calc(100vw - 20px), calc(100dvh - 20px));
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 23;
  /* Ajuste manual é feito após a posição calculada pelo JS.
     Funciona mesmo que a posição automática esteja limitada à janela. */
  translate: var(--home-player-offset-x, 0px) var(--home-player-offset-y, 0px);
}
/* Após a posição ser calculada, left/top indicam o canto superior esquerdo. */
body.page-home-player #home-player-in-ascii.home-player-positioned {
  transform: none;
  visibility: visible;
  opacity: 1;
}
body.page-home-player #home-player-in-ascii > .imagas-mp {
  width: 100%;
  max-width: 100%;
}
body.page-home-player #home-player-in-ascii .mp-frame {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* ============================================================
   IMAGAS — TELAS LIMPAS (HOME E MÚSICAS)
   - mantém tempo, barra de progresso, música atual e fila
   - retira títulos e status numérico normal
   - mantém mensagens de erro visíveis
   ============================================================ */

/* O texto na tela oval fica reto, alinhado ao retângulo. */
.imagas-mp .mp-oval-screen {
  transform: none !important;
}

/* Oculta "TEMPO", "TOCANDO AGORA" e "A SEGUIR / PLAYLIST". */
.imagas-mp .mp-oval-caption,
.imagas-mp .mp-now-caption,
.imagas-mp .mp-queue-title {
  display: none !important;
}

/* Oculta a numeração/status sob o player, preservando erros. */
.imagas-mp .mp-status:not([data-error="true"]) {
  display: none !important;
}


/* ==============================================================
   IMAGAS — VISOR OVAL V2
   Tempo total reto e pequeno, barra inclinada independente.
   Ajuste as variáveis abaixo sem alterar o JavaScript.
   Funciona na HOME e na página MÚSICAS.
   ============================================================== */
.imagas-mp {
  /* TEMPO TOTAL (o valor à direita de "0:00 / 3:42") */
  --mp-oval-time-x: 50%;                 /* 50% = centro, menor = esquerda */
  --mp-oval-time-y: 7%;                  /* menor = mais para cima */
  --mp-oval-time-size: clamp(9px, 1.18cqw, 14px);
  --mp-oval-time-color: #29435a;
  --mp-oval-time-opacity: 0.92;         /* 0 = invisível, 1 = opaco */

  /* BARRA DE PROGRESSO: posição, largura, inclinação */
  --mp-seek-x: 50%;                     /* posição horizontal */
  --mp-seek-y: 56%;                     /* altura dentro da elipse */
  --mp-seek-width: 55%;                 /* comprimento */
  --mp-seek-angle: -15deg;              /* inclinação. 0deg = reto */

  /* LINHA DA BARRA */
  --mp-seek-line-height: 3px;           /* espessura */
  --mp-seek-line-radius: 999px;         /* 0px = cantos retos */
  --mp-seek-played-color: #4264bb;      /* parte já reproduzida */
  --mp-seek-unplayed-color: #6d8a81;    /* parte restante */

  /* BOTÃO DE ARRASTAR (não são os PNGs de Play/Pause) */
  --mp-seek-thumb-size: 11px;
  --mp-seek-thumb-radius: 50%;          /* 50% redondo, 0px quadrado */
  --mp-seek-thumb-color: #dce7ff;
  --mp-seek-thumb-border-color: #3d4dbc;
  --mp-seek-thumb-border-width: 1px;
  --mp-seek-thumb-shadow: 0 1px 2px rgba(30, 45, 80, .35);
}

/* O visor inteiro não gira. Só a barra recebe rotação. */
.imagas-mp .mp-oval-screen {
  position: absolute;
  transform: none !important;
}

/* Oculta o tempo decorrido e a barra " / " sem mexer no JS. */
.imagas-mp .mp-current-time {
  display: none !important;
}
.imagas-mp .mp-time {
  position: absolute;
  top: var(--mp-oval-time-y);
  left: var(--mp-oval-time-x);
  transform: translateX(-50%);
  display: block;
  width: max-content;
  margin: 0;
  padding: 0;
  font-size: 0 !important;               /* oculta somente a barra '/' */
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
}
.imagas-mp .mp-duration {
  display: inline-block;
  font-size: var(--mp-oval-time-size);
  line-height: 1.2;
  color: var(--mp-oval-time-color);
  opacity: var(--mp-oval-time-opacity);
}

/* Barra inclinada abaixo do tempo; continua arrastável. */
.imagas-mp .mp-progress {
  position: absolute;
  top: var(--mp-seek-y);
  left: var(--mp-seek-x);
  transform: translateX(-50%) rotate(var(--mp-seek-angle));
  transform-origin: center center;
  width: var(--mp-seek-width);
  height: max(14px, var(--mp-seek-thumb-size));
  min-height: 0;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: none;
}

/* Chrome, Edge e Safari — linha e botão */
.imagas-mp .mp-progress::-webkit-slider-runnable-track {
  height: var(--mp-seek-line-height);
  min-height: 0;
  border-radius: var(--mp-seek-line-radius);
  border: none;
  background: linear-gradient(
    to right,
    var(--mp-seek-played-color) 0%,
    var(--mp-seek-played-color) var(--mp-progress, 0%),
    var(--mp-seek-unplayed-color) var(--mp-progress, 0%),
    var(--mp-seek-unplayed-color) 100%
  );
}
.imagas-mp .mp-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--mp-seek-thumb-size);
  height: var(--mp-seek-thumb-size);
  min-width: 0;
  min-height: 0;
  margin-top: calc((var(--mp-seek-line-height) - var(--mp-seek-thumb-size)) / 2);
  border-radius: var(--mp-seek-thumb-radius);
  border: var(--mp-seek-thumb-border-width) solid var(--mp-seek-thumb-border-color);
  background: var(--mp-seek-thumb-color);
  box-shadow: var(--mp-seek-thumb-shadow);
}

/* Firefox — linha e botão */
.imagas-mp .mp-progress::-moz-range-track {
  height: var(--mp-seek-line-height);
  border-radius: var(--mp-seek-line-radius);
  background: var(--mp-seek-unplayed-color);
  border: 0;
}
.imagas-mp .mp-progress::-moz-range-progress {
  height: var(--mp-seek-line-height);
  border-radius: var(--mp-seek-line-radius);
  background: var(--mp-seek-played-color);
}
.imagas-mp .mp-progress::-moz-range-thumb {
  width: var(--mp-seek-thumb-size);
  height: var(--mp-seek-thumb-size);
  min-width: 0;
  min-height: 0;
  border-radius: var(--mp-seek-thumb-radius);
  border: var(--mp-seek-thumb-border-width) solid var(--mp-seek-thumb-border-color);
  background: var(--mp-seek-thumb-color);
  box-shadow: var(--mp-seek-thumb-shadow);
}


/* ===============================================================
   IMAGAS — VOLUME TRIANGULAR / SHUFFLE / REPEAT NO VISOR OVAL
   Cole AO FINAL de player/shared/player.css. Os 3 controles sao
   criados pelo novo player.js, nao e necessario mudar o HTML.
   =============================================================== */
.imagas-mp {
  /* VOLUME: posicao relativa ao visor oval, dimensoes, texto */
  --mp-volume-x: 65%;
  --mp-volume-y: 50%;
  --mp-volume-triangle-width: clamp(18px, 3.3cqw, 32px);
  --mp-volume-triangle-height: clamp(7px, 1.2cqw, 12px);
  --mp-volume-font-size: clamp(7px, .90cqw, 10px);
  --mp-volume-font-family: 'Courier New', monospace;
  --mp-volume-font-weight: 700;
  --mp-volume-text-color: #29435a;
  --mp-volume-text-opacity: .95;
  --mp-volume-on-color: #4264bb;
  --mp-volume-off-color: #85a29b;
  --mp-volume-gap: 3px;

  /* SHUFFLE: centralizado no ponto X/Y escolhido */
  --mp-shuffle-x: 55%;
  --mp-shuffle-y: 0%;
  --mp-shuffle-font-size: clamp(7px, .95cqw, 11px);
  --mp-shuffle-font-family: 'Courier New', monospace;
  --mp-shuffle-font-weight: 700;
  --mp-shuffle-letter-spacing: 0px;
  --mp-shuffle-color: #29435a;

  /* REPEAT: modo OFF -> ALL -> ONE -> OFF */
  --mp-repeat-x: 84%;
  --mp-repeat-y: 0%;
  --mp-repeat-font-size: clamp(7px, .95cqw, 11px);
  --mp-repeat-font-family: 'Courier New', monospace;
  --mp-repeat-font-weight: 700;
  --mp-repeat-letter-spacing: 0px;
  --mp-repeat-color: #29435a;

  /* SHUFFLE/REPEAT ACESOS: cor ao clicar */
  --mp-mode-active-color: #2452d4;
  --mp-mode-inactive-opacity: .70;
}

/* O marcador de volume e os botoes permanecem retos, com a
   mesma orientacao da duracao. O seek continua inclinado. */
.imagas-mp .mp-oval-screen .mp-volume {
  position:absolute;
  left:var(--mp-volume-x);
  top:var(--mp-volume-y);
  transform:translateY(-50%);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:var(--mp-volume-gap);
  z-index:8;
  white-space:nowrap;
  line-height:1;
  pointer-events:auto;
}
.imagas-mp .mp-volume-label {
  font-family:var(--mp-volume-font-family);
  font-size:var(--mp-volume-font-size);
  font-weight:var(--mp-volume-font-weight);
  color:var(--mp-volume-text-color);
  opacity:var(--mp-volume-text-opacity);
}
.imagas-mp .mp-volume-meter {
  position:relative;
  display:block;
  width:var(--mp-volume-triangle-width);
  height:var(--mp-volume-triangle-height);
  flex:none;
}
.imagas-mp .mp-volume-triangle {
  position:absolute;
  inset:0;
  display:block;
  clip-path:polygon(0 100%,100% 0,100% 100%);
  background:linear-gradient(to right,
    var(--mp-volume-on-color) 0%,
    var(--mp-volume-on-color) var(--mp-volume-fill,100%),
    var(--mp-volume-off-color) var(--mp-volume-fill,100%),
    var(--mp-volume-off-color) 100%);
  pointer-events:none;
}
.imagas-mp .mp-volume-range {
  position:absolute;
  inset:-6px 0;
  width:100%;
  height:calc(100% + 12px);
  cursor:pointer;
  opacity:0;
  margin:0;
  padding:0;
  touch-action:none;
  z-index:1;
}
.imagas-mp .mp-volume:focus-within .mp-volume-triangle {
  filter:drop-shadow(0 0 2px var(--mp-mode-active-color));
  outline:1px solid var(--mp-mode-active-color);
}
.imagas-mp .mp-shuffle,
.imagas-mp .mp-repeat {
  position:absolute;
  top:var(--mp-shuffle-y);
  left:var(--mp-shuffle-x);
  transform:translate(-50%,-50%);
  display:block;
  z-index:8;
  padding:2px 1px;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  line-height:1;
  opacity:var(--mp-mode-inactive-opacity);
  color:var(--mp-shuffle-color);
  font-family:var(--mp-shuffle-font-family);
  font-size:var(--mp-shuffle-font-size);
  font-weight:var(--mp-shuffle-font-weight);
  letter-spacing:var(--mp-shuffle-letter-spacing);
  -webkit-tap-highlight-color:transparent;
}
.imagas-mp .mp-repeat {
  top:var(--mp-repeat-y);
  left:var(--mp-repeat-x);
  color:var(--mp-repeat-color);
  font-family:var(--mp-repeat-font-family);
  font-size:var(--mp-repeat-font-size);
  font-weight:var(--mp-repeat-font-weight);
  letter-spacing:var(--mp-repeat-letter-spacing);
}
.imagas-mp .mp-shuffle[data-active="true"],
.imagas-mp .mp-repeat:not([data-mode="off"]) {
  opacity:1;
  color:var(--mp-mode-active-color);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.imagas-mp .mp-shuffle:focus-visible,
.imagas-mp .mp-repeat:focus-visible {
  outline:1px solid var(--mp-mode-active-color);
  outline-offset:1px;
}

/* EXEMPLO: configuracoes independentes das duas paginas.
body.page-home-player .imagas-mp { --mp-volume-y:84%; --mp-shuffle-x:52%; }
body.page-musicas .imagas-mp { --mp-volume-y:81%; --mp-repeat-x:86%; }
*/

/* ================================================================
   IMAGAS — EQUALIZADOR REAL + BITRATE / Hz + CAIXAS SHUFFLE REPEAT
   Adicione ao FINAL de player/shared/player.css, preservando sua CSS.
   Os valores X/Y referem-se ao tamanho da MOLDURA (2048 x 746).
   ================================================================ */
.imagas-mp {
  /* EQUALIZADOR: área branca entre visor oval e tela retangular */
  --mp-eq-x: 20%;             /* direita / esquerda */
  --mp-eq-y: 55%;             /* baixo / cima */
  --mp-eq-width: 10%;
  --mp-eq-height: 22%;
  --mp-eq-rotation: 0deg;

  /* BARRAS: cor, intervalo, arredondamento e altura relativa */
  --mp-eq-bars-height: 65%;
  --mp-eq-bar-gap: 2px;
  --mp-eq-bar-radius: 2px;
  --mp-eq-bar-top: #92b3f0;
  --mp-eq-bar-bottom: #3157c4;
  --mp-eq-bar-opacity: .90;

  /* DADOS DO MP3: fonte, cor, alinhamento, posição */
  --mp-eq-info-x: 0px;
  --mp-eq-info-y: 3px;
  --mp-eq-text-size: clamp(7px, .85cqw, 11px);
  --mp-eq-text-font: 'Courier New', monospace;
  --mp-eq-text-weight: bold;
  --mp-eq-text-color: #36599c;
  --mp-eq-text-opacity: .90;
  --mp-eq-text-gap: 1px;

  /* SHUFFLE E REPEAT: caixinhas individuais dentro do visor oval */
  --mp-mode-border-width: 1px;
  --mp-mode-border-color: #4264bb;
  --mp-mode-border-radius: 2px;
  --mp-mode-bg: rgba(129, 158, 153, .18);
  --mp-mode-padding-x: 4px;
  --mp-mode-padding-y: 2px;
  --mp-mode-box-shadow: none;
  --mp-mode-active-border-color: #2452d4;
  --mp-mode-active-bg: rgba(82, 119, 197, .15);
}

.imagas-mp .mp-eq-widget {
  position: absolute;
  left: var(--mp-eq-x);
  top: var(--mp-eq-y);
  width: var(--mp-eq-width);
  height: var(--mp-eq-height);
  transform: rotate(var(--mp-eq-rotation));
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--mp-eq-text-color);
  background: transparent;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.imagas-mp .mp-eq-bars {
  height: var(--mp-eq-bars-height);
  width: 100%;
  display: flex;
  gap: var(--mp-eq-bar-gap);
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}
.imagas-mp .mp-eq-bar {
  height: 7%;
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(to top, var(--mp-eq-bar-bottom), var(--mp-eq-bar-top));
  border-radius: var(--mp-eq-bar-radius) var(--mp-eq-bar-radius) 0 0;
  opacity: var(--mp-eq-bar-opacity);
  transition: height 70ms ease-out;
}
.imagas-mp .mp-eq-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-eq-text-gap);
  transform: translate(var(--mp-eq-info-x), var(--mp-eq-info-y));
  width: 100%;
  color: var(--mp-eq-text-color);
  opacity: var(--mp-eq-text-opacity);
  font-family: var(--mp-eq-text-font);
  font-weight: var(--mp-eq-text-weight);
  font-size: var(--mp-eq-text-size);
  line-height: 1.05;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: none;
  text-align: center;
}
.imagas-mp .mp-eq-info span { display:block; }

.imagas-mp .mp-oval-screen .mp-shuffle,
.imagas-mp .mp-oval-screen .mp-repeat {
  padding: var(--mp-mode-padding-y) var(--mp-mode-padding-x);
  border: var(--mp-mode-border-width) solid var(--mp-mode-border-color);
  border-radius: var(--mp-mode-border-radius);
  background: var(--mp-mode-bg);
  box-shadow: var(--mp-mode-box-shadow);
}
.imagas-mp .mp-oval-screen .mp-shuffle[data-active='true'],
.imagas-mp .mp-oval-screen .mp-repeat:not([data-mode='off']) {
  border-color: var(--mp-mode-active-border-color);
  background: var(--mp-mode-active-bg);
}

/* Exemplo de posições independentes entre as páginas:
body.page-home-player .imagas-mp {
  --mp-eq-x: 20%; --mp-eq-y: 55%; --mp-eq-width: 14%;
}
body.page-musicas .imagas-mp {
  --mp-eq-x: 20%; --mp-eq-y: 55%; --mp-eq-width: 14%;
}
*/

/* =====================================================================
   IMAGAS — INVERTER EQUALIZADOR E BARRA DE PROGRESSO
   COLE NO FINAL DE player/shared/player.css

   1) EQUALIZADOR + kbps/Hz AGORA FICAM NO VISOR OVAL VERDE.
   2) TEMPO TOTAL + BARRA DE POSICAO FICAM NA AREA BRANCA ANTERIOR.
   3) VOLUME, SHUFFLE, REPEAT, PLAY E OUTROS BOTOES NAO MUDAM.

   ATENCAO: esta configuracao precisa do player.js que acompanha
   a atualizacao, pois e ele que move a barra para um bloco proprio.
   Todas as coordenadas em % usam a MOLDURA inteira como referencia.
   ===================================================================== */
.imagas-mp {
  /* EQUALIZADOR: novo lugar, dentro da elipse */
  --mp-eq-x: 09%;            /* maior = direita */
  --mp-eq-y: 25%;             /* maior = baixo */
  --mp-eq-width: 13%;        /* largura total do visualizador de barras */
  --mp-eq-height: 17%;       /* altura total, inclui kbps e Hz */
  --mp-eq-rotation: 0deg;    /* 0 = texto e barras retos */
  --mp-eq-bars-height: 56%;
  --mp-eq-text-size: clamp(6px, .74cqw, 10px);
  --mp-eq-info-y: 0px;

  /* TEMPO TOTAL + BARRA: agora no lugar anterior do equalizador */
  --mp-seek-panel-x: 20%;
  --mp-seek-panel-y: 55%;
  --mp-seek-panel-width: 14%;
  --mp-seek-panel-height: 22%;

  /* TEMPO: alinhado e reto, sobre a barra */
  --mp-seek-panel-time-x: 50%;
  --mp-seek-panel-time-y: 35%;
  --mp-seek-panel-time-size: clamp(15px, 1.0cqw, 18px);

  /* BARRA: ajustavel individualmente */
  --mp-seek-panel-bar-x: 35%;
  --mp-seek-panel-bar-y: 1%;
  --mp-seek-panel-bar-width: 110%;
  --mp-seek-panel-bar-angle: -17deg;
}

/* Bloco independente: recebe os elementos originais movidos pelo JS. */
.imagas-mp .mp-seek-widget {
  position: absolute;
  left: var(--mp-seek-panel-x);
  top: var(--mp-seek-panel-y);
  width: var(--mp-seek-panel-width);
  height: var(--mp-seek-panel-height);
  z-index: 5;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: transparent;
}
.imagas-mp .mp-seek-widget .mp-time {
  position: absolute;
  top: var(--mp-seek-panel-time-y);
  left: var(--mp-seek-panel-time-x);
  transform: translateX(-50%);
  line-height: 1;
  text-shadow: none;
  pointer-events: none;
}
.imagas-mp .mp-seek-widget .mp-duration {
  font-size: var(--mp-seek-panel-time-size);
}
.imagas-mp .mp-seek-widget .mp-progress {
  position: absolute;
  top: var(--mp-seek-panel-bar-y);
  left: var(--mp-seek-panel-bar-x);
  width: var(--mp-seek-panel-bar-width);
  transform: translateX(-50%) rotate(var(--mp-seek-panel-bar-angle));
  transform-origin: center;
  pointer-events: auto;
}

/* Mantem todos os controles ja configurados pelo CSS anterior. */

/* EXEMPLO: se quiser diferenciar Home e Musicas, descomente:
body.page-home-player .imagas-mp {
  --mp-eq-x: 13%; --mp-seek-panel-x: 20%;
}
body.page-musicas .imagas-mp {
  --mp-eq-x: 13%; --mp-seek-panel-x: 20%;
}
*/
.imagas-mp {
  /* BARRA DE TEMPO: cor azul em toda a extensão */
  --mp-seek-played-color: #2457e0;    /* azul da parte já tocada */
  --mp-seek-unplayed-color: #93b2ff;  /* azul claro da parte restante */
  --mp-seek-thumb-color: #ffffff;     /* bolinha de arrastar */
  --mp-seek-thumb-border-color: #2457e0;

  /* EQUALIZADOR: bloquinhos brancos em vez de degradê */
  --mp-eq-pixel-color: #ffffff;
  --mp-eq-pixel-height: 5px;        /* altura de cada quadradinho */
  --mp-eq-pixel-gap: .95px;           /* espaço vertical entre quadradinhos */
  --mp-eq-bar-gap: 3px;             /* espaço horizontal entre colunas */
  --mp-eq-bar-opacity: 1;
  --mp-eq-bar-radius: 0px;
}

/* Os 18 níveis continuam animados de acordo com o áudio.
   Apenas o preenchimento de cada coluna passa a ser segmentado. */
.imagas-mp .mp-eq-bars .mp-eq-bar {
  background: repeating-linear-gradient(
    to top,
    var(--mp-eq-pixel-color) 0px,
    var(--mp-eq-pixel-color) var(--mp-eq-pixel-height),
    transparent var(--mp-eq-pixel-height),
    transparent calc(var(--mp-eq-pixel-height) + var(--mp-eq-pixel-gap))
  );
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transition: height 20ms steps(3, end);
}

/* A barra já usa as variáveis acima no player atual. Reforçamos
   a cor da trilha no Chrome, Edge e Safari. */
.imagas-mp .mp-progress::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--mp-seek-played-color) 0%,
    var(--mp-seek-played-color) var(--mp-progress, 0%),
    var(--mp-seek-unplayed-color) var(--mp-progress, 0%),
    var(--mp-seek-unplayed-color) 100%
  );
}
/* Firefox */
.imagas-mp .mp-progress::-moz-range-track {
  background: var(--mp-seek-unplayed-color);
}
.imagas-mp .mp-progress::-moz-range-progress {
  background: var(--mp-seek-played-color);
}


/* ================================================================
   IMAGAS — FONTE PIXELADA + TEMPO ATUAL NO FORMATO 00:00
   Cole este bloco ao FINAL do player.css se usar a atualização manual.
   Mantém TODAS as suas posições, cores, controles e animações.
   Silkscreen é carregada pelo Google Fonts; alternativa: Courier New.
   ================================================================ */
.imagas-mp {
    --mp-pixel-font: 'Silkscreen', 'Courier New', monospace;

    /* Use outra família de fontes aqui, se desejar */
    font-family: var(--mp-pixel-font);

    /* Fontes independentes dos controles — mantêm personalização */
    --mp-eq-text-font: var(--mp-pixel-font);
    --mp-volume-font-family: var(--mp-pixel-font);
    --mp-shuffle-font-family: var(--mp-pixel-font);
    --mp-repeat-font-family: var(--mp-pixel-font);
}

/* Tudo o que é texto dentro dos dois visores usa a fonte pixelada. */
.imagas-mp .mp-oval-screen,
.imagas-mp .mp-queue-screen,
.imagas-mp .mp-seek-widget,
.imagas-mp .mp-now-text,
.imagas-mp .mp-tracklist,
.imagas-mp .mp-tracklist button,
.imagas-mp .mp-time,
.imagas-mp .mp-eq-info,
.imagas-mp .mp-status {
    font-family: var(--mp-pixel-font);
}

/* Seu CSS anterior escondia o tempo decorrido e mostrava a duração.
   Invertemos somente a VISIBILIDADE, sem duplicar contadores. */
.imagas-mp .mp-current-time,
.imagas-mp .mp-seek-widget .mp-current-time {
    display: inline-block !important;
    font-family: var(--mp-pixel-font);
    font-size: var(--mp-seek-panel-time-size, 14px) !important;
    line-height: 1.2;
    color: var(--mp-oval-time-color, #29435a);
    opacity: var(--mp-oval-time-opacity, 1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Remove o tempo total; o separador / já está oculto pelo
   font-size: 0 do elemento .mp-time em seu CSS atual. */
.imagas-mp .mp-duration,
.imagas-mp .mp-seek-widget .mp-duration {
    display: none !important;
}

/* ================================================================
   IMAGAS — POSICAO DO PLAYER INTEIRO (CONTROLE UNICO)
   MODIFIQUE SOMENTE OS VALORES DESTE BLOCO, NO FINAL DO ARQUIVO.
   Esses deslocamentos funcionam com a navegacao continua.
   ================================================================ */

/* HOME — centralizacao automatica preservada, depois aplica deslocamento */
body.page-home-player {
    --home-player-offset-x: 0px;  /* direita + / esquerda - */
    --home-player-offset-y: 200px; /* baixo + / cima - */
}

/* Quando o JS ainda nao posicionou a caixa: mantem a ancoragem em 50% */
body.page-home-player #home-player-in-ascii {
    translate: none !important; /* evita duplicar o deslocamento antigo */
    transform: translate(
        calc(-50% + var(--home-player-offset-x)),
        calc(-50% + var(--home-player-offset-y))
    ) !important;
}

/* Quando o home-placement.js ja aplicou left/top, desloca a partir dali */
body.page-home-player #home-player-in-ascii.home-player-positioned {
    transform: translate(
        var(--home-player-offset-x),
        var(--home-player-offset-y)
    ) !important;
}

/* Mantenha a moldura em 0 dentro da caixa; move-se pela caixa inteira */
body.page-home-player #home-player-in-ascii > .imagas-mp {
    --imagas-player-x: -10px;
    --imagas-player-y: -50px;
    translate: none !important;
}

/* MUSICAS — deslocamento independente, com toda a moldura e os botoes */
body.page-musicas {
    --imagas-player-width: 100%;
    --music-player-offset-x: 0px; /* direita + / esquerda - */
    --music-player-offset-y: 170px; /* baixo + / cima - */
}
body.page-musicas .imagas-mp {
    translate: none !important;
    transform: translate(
        calc(var(--imagas-player-x, 0px) + var(--music-player-offset-x)),
        calc(var(--imagas-player-y, 0px) + var(--music-player-offset-y))
    ) !important;
}
body.page-musicas .imagas-player-square,
html[data-theme="dark"] body.page-musicas .imagas-player-square {
    background: transparent !important;
    box-shadow: none !important;
}

/* Mantem a malha e a area de 1080px livres de fundo solido. */
body.page-musicas .subpage-stage {
    background: transparent !important;
}

/* Correção final de fundo e posicionamento — sem caixa branca, inclusive no modo escuro */
body.page-musicas .imagas-player-square,
html[data-theme='dark'] body.page-musicas .imagas-player-square,
body.page-musicas .subpage-stage {background:transparent!important; box-shadow:none!important;}


/* =====================================================================
   IMAGAS — 3 GIFs + 1 IMAGEM NA AREA DO ANTIGO TEMPO / PROGRESSO

   Salve os arquivos na pasta /player/shared/:
      gif-tempo-1.gif
      gif-tempo-2.gif
      gif-tempo-3.gif
      imagem-tempo.png       (pode trocar por .jpg ou .webp)

   Cada arte tem URL, X, Y, largura, altura, rotacao e opacidade proprios.
   Os X/Y e tamanhos sao porcentagens da area .mp-seek-widget;
   o ponto X/Y marca o CENTRO de cada imagem.

   O CSS usa dois pseudo-elementos de .mp-seek-widget e outros
   dois de .mp-time, que ja existe dentro desse bloco. Isso permite
   as quatro artes independentes sem acrescentar HTML ou JS.
   Os outros controles (play, pausa, equalizador, volume etc.) ficam.
   ===================================================================== */

.imagas-mp {
  /* GIF 1 */
  --mp-gif-1-image: url("/player/shared/gif-tempo-1.gif");
  --mp-gif-1-x: 85.5%;
  --mp-gif-1-y: -30%;
  --mp-gif-1-width: 150%;
  --mp-gif-1-height: 110%;
  --mp-gif-1-rotation: 95deg;
  --mp-gif-1-opacity: 1;

  /* GIF 2 */
  --mp-gif-2-image: url("/player/shared/gif-tempo-2.gif");
  --mp-gif-2-x: 57.5%;
  --mp-gif-2-y: 80%;
  --mp-gif-2-width: 100%;
  --mp-gif-2-height: 100%;
  --mp-gif-2-rotation: 25deg;
  --mp-gif-2-opacity: 0;

  /* GIF 3 */
  --mp-gif-3-image: url("/player/shared/gif-tempo-3.gif");
  --mp-gif-3-x: 57.5%;
  --mp-gif-3-y: 80%;
  --mp-gif-3-width: 100%;
  --mp-gif-3-height: 100%;
  --mp-gif-3-rotation: 0deg;
  --mp-gif-3-opacity: 1;

  /* IMAGEM ESTATICA */
  --mp-static-image: url("/player/shared/imagem-tempo.png");
  --mp-static-x: -15%;
  --mp-static-y: 52%;
  --mp-static-width: 100%;
  --mp-static-height: 130%;
  --mp-static-rotation: 7deg;
  --mp-static-opacity: 1;

  /* Equalizador completo (barras + kbps/Hz): 0 = invisivel, 1 = opaco */
  --mp-equalizer-opacity: 0.65;
}

/* Esconde a barra e o marcador. O JS continua atualizando a musica. */
.imagas-mp .mp-seek-widget .mp-progress,
.imagas-mp .mp-oval-screen .mp-progress,
.imagas-mp .mp-oval-screen .mp-time {
  display: none !important;
}

/* A area do tempo vira suporte para mais dois pseudo-elementos.
   visibility:hidden esconde os numeros, mas permite mostrar os
   pseudo-elementos com visibility:visible, inclusive em mobile. */
.imagas-mp .mp-seek-widget {
  overflow: visible;
  isolation: isolate;
}
.imagas-mp .mp-seek-widget .mp-time {
  display: block !important;
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transform: none;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}

/* As quatro artes possuem seu proprio posicionamento, escala e rotacao. */
.imagas-mp .mp-seek-widget::before,
.imagas-mp .mp-seek-widget::after,
.imagas-mp .mp-seek-widget .mp-time::before,
.imagas-mp .mp-seek-widget .mp-time::after {
  content: "";
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: visible;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: auto;
  transform-origin: center;
  z-index: 1;
}

.imagas-mp .mp-seek-widget::before {
  left: var(--mp-gif-1-x);
  top: var(--mp-gif-1-y);
  width: var(--mp-gif-1-width);
  height: var(--mp-gif-1-height);
  transform: translate(-50%, -50%) rotate(var(--mp-gif-1-rotation));
  background-image: var(--mp-gif-1-image);
  opacity: var(--mp-gif-1-opacity);
}

.imagas-mp .mp-seek-widget::after {
  left: var(--mp-gif-2-x);
  top: var(--mp-gif-2-y);
  width: var(--mp-gif-2-width);
  height: var(--mp-gif-2-height);
  transform: translate(-50%, -50%) rotate(var(--mp-gif-2-rotation));
  background-image: var(--mp-gif-2-image);
  opacity: var(--mp-gif-2-opacity);
}

.imagas-mp .mp-seek-widget .mp-time::before {
  left: var(--mp-gif-3-x);
  top: var(--mp-gif-3-y);
  width: var(--mp-gif-3-width);
  height: var(--mp-gif-3-height);
  transform: translate(-50%, -50%) rotate(var(--mp-gif-3-rotation));
  background-image: var(--mp-gif-3-image);
  opacity: var(--mp-gif-3-opacity);
}

.imagas-mp .mp-seek-widget .mp-time::after {
  left: var(--mp-static-x);
  top: var(--mp-static-y);
  width: var(--mp-static-width);
  height: var(--mp-static-height);
  transform: translate(-50%, -50%) rotate(var(--mp-static-rotation));
  background-image: var(--mp-static-image);
  opacity: var(--mp-static-opacity);
}

.imagas-mp .mp-eq-widget {
  opacity: var(--mp-equalizer-opacity) !important;
}