: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 colapsa a linha da grelha em alguns Android Chrome
     com muitos tiles → sobreposição). 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, mais abaixo no ficheiro,
   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); }
/* Indicador de "a tocar": moldura rosa por cima da capa. */
.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));
}
/* Tile de surpresa "?" — toca um tema aleatório da biblioteca. */
.tile.shuffle { background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b); }
.tile .interrogacao {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(56px, 14vw, 110px); font-weight: 900; color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,.35);
}

/* Card "Calminho" — playlist contínua de temas calmos instrumentais. */
.tile.calmo { background: linear-gradient(160deg, #1e3a8a, #6d5bd0 60%, #a5b4fc); }
.tile .lua {
  position: absolute; inset: 0 0 22% 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(56px, 14vw, 110px);
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.35));
}

/* Barra inferior: botão play/pause + botão STOP, lado a lado. */
#nowplaying {
  display: flex; gap: 10px; padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 3px solid #ffd9c2;
}
#btn-playpause, #btn-stop {
  flex: 1; height: 72px;
  border: 0; border-radius: 16px; cursor: pointer;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
#btn-playpause svg, #btn-stop svg { width: 40px; height: 40px; display: block; }
#btn-playpause {
  background: #22c55e; box-shadow: 0 4px 0 #16893e;
}
#btn-playpause:active { transform: translateY(2px); box-shadow: 0 2px 0 #16893e; }
#btn-stop {
  background: #111318; box-shadow: 0 4px 0 #000;
}
#btn-stop:active { transform: translateY(2px); box-shadow: 0 2px 0 #000; }