:root { --gap: 14px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #fff7ef;
  display: flex; flex-direction: column;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
}
#grid {
  flex: 1; overflow-y: auto;
  display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
@media (min-width: 700px)  { #grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { #grid { grid-template-columns: repeat(5, 1fr); } }

.vazio { grid-column: 1 / -1; text-align: center; color: #a06a4a; font-size: 18px; padding: 40px 16px; }

.tile {
  position: relative; border: 0; padding: 0; cursor: pointer;
  border-radius: 20px; overflow: hidden;
  /* Altura explícita = largura da coluna → quadrado fiável e a grelha faz
     scroll (aspect-ratio e padding-% colapsam a linha da grelha em alguns
     Android Chrome → tiles sobrepostos). 2 cols: 2 padding + 1 gap = 3 gaps. */
  height: calc((100vw - var(--gap) * 3) / 2);
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
/* Altura responsiva DEPOIS da regra base (senão a base ganhava por ordem de
   origem e os tiles ficavam altos em desktop). */
@media (min-width: 700px)  { .tile { height: calc((100vw - var(--gap) * 5) / 4); } }
@media (min-width: 1100px) { .tile { height: calc((100vw - var(--gap) * 6) / 5); } }
.tile:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.tile.playing::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border: 7px solid #ff2e93; border-radius: 20px; pointer-events: none;
}
.tile .capa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.tile .titulo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px; font-size: clamp(15px, 2.6vw, 22px); font-weight: 800;
  color: #fff; text-align: left; line-height: 1.12;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}

#nowplaying {
  display: flex; padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 3px solid #ffd9c2;
}
#btn-stop {
  flex: 1; height: 72px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: #ff2e93; color: #fff; font-weight: 900; font-size: 26px; letter-spacing: 1px;
  box-shadow: 0 4px 0 #c11f6f;
}
#btn-stop:active { transform: translateY(2px); box-shadow: 0 2px 0 #c11f6f; }

/* Botão flutuante para mudar de pasta (discreto, canto superior direito). */
#btn-pasta {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 10px; z-index: 6;
  height: 38px; padding: 0 14px; border: 0; border-radius: 19px; cursor: pointer;
  background: rgba(59,130,246,.92); color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#btn-pasta[hidden] { display: none; }

/* Overlay de setup */
#setup {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
  background: linear-gradient(160deg, #22d3ee, #3b82f6, #7c3aed); color: #fff;
}
#setup[hidden] { display: none; }
#setup h1 { margin: 0; font-size: 28px; }
#setup p { margin: 0; max-width: 420px; font-size: 18px; line-height: 1.4; }
#btn-escolher {
  margin-top: 8px; height: 60px; padding: 0 28px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: #fff; color: #3b82f6; font-weight: 900; font-size: 20px;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
}
#btn-escolher:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
#btn-escolher[hidden] { display: none; }
#btn-voltar {
  margin-top: 4px; height: 48px; padding: 0 22px;
  border: 2px solid rgba(255,255,255,.7); border-radius: 14px; cursor: pointer;
  background: transparent; color: #fff; font-weight: 800; font-size: 16px;
}
#btn-voltar[hidden] { display: none; }