/* =========================
   PAGE BACKGROUND
========================= */

body {
  margin: 0;
  padding: 40px;

  background-color: #FFCFF0;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* =========================
   MAIN CENTER BOX
========================= */

.container {
  width: 800px;
  max-width: 90vw;

  background: #fff;

  border: 3px double #F279C8;

  padding: 20px;

  display: flex;
  flex-direction: column;
  gap: 20px;

  box-sizing: border-box;
}

/* =========================
   MEDIA WINDOW
========================= */

.media-window {
  background: #fff;

  border: 2px solid #F279C8;

  padding: 20px;
  padding-top: 50px;

  position: relative;

  box-sizing: border-box;
}

/* hide radio buttons */
.media-window input[type="radio"] {
  display: none;
}

/* =========================
   TAB BAR
========================= */

.tab-buttons {
  position: absolute;
  top: -18px;
  left: 15px;

  display: flex;
  gap: 6px;
}

.tab-buttons label {
  padding: 8px 14px;

  background: #ffe6f4;

  border: 2px solid #F279C8;
  border-bottom: none;

  border-radius: 10px 10px 0 0;

  font-size: 12px;
  text-transform: uppercase;

  color: #55038C;

  cursor: pointer;

  transition: 0.2s ease;
}

.tab-buttons label:hover {
  background: #fff0f8;
}

/* active tab */
#music:checked ~ .tab-buttons label[for="music"],
#films:checked ~ .tab-buttons label[for="films"],
#books:checked ~ .tab-buttons label[for="books"],
#games:checked ~ .tab-buttons label[for="games"],
#manga:checked ~ .tab-buttons label[for="manga"],
#anime:checked ~ .tab-buttons label[for="anime"] {
  background: #fff;
}

/* =========================
   TAB SWITCHING
========================= */

.tab-content {
  display: none;
}

#music:checked ~ .music-content,
#films:checked ~ .films-content,
#books:checked ~ .books-content,
#games:checked ~ .games-content,
#manga:checked ~ .manga-content,
#anime:checked ~ .anime-content {
  display: block;
}

/* =========================
   ⭐ 5-PER-ROW GRID FIX
========================= */

.album-grid,
.poster-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;

  justify-items: center;
  align-items: start;
}

/* =========================
   ALBUMS (square)
========================= */

.album-placeholder {
  width: 120px;
  height: 120px;

  object-fit: cover;
  display: block;

  border: 2px dashed #F279C8;

  transition: all 0.25s ease;
  cursor: pointer;
}

.album-placeholder:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px #F279C8;
  border-color: #55038C;
}

/* =========================
   POSTERS (vertical)
========================= */

.poster-placeholder {
  width: 120px;
  height: 180px;

  object-fit: cover;
  display: block;

  border: 2px dashed #F279C8;

  transition: all 0.25s ease;
  cursor: pointer;
}

.poster-placeholder:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px #F279C8;
  border-color: #55038C;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .container {
    width: 95vw;
  }

  .album-placeholder {
    width: 90px;
    height: 90px;
  }

  .poster-placeholder {
    width: 90px;
    height: 135px;
  }

  .album-grid,
  .poster-grid {
    grid-template-columns: repeat(2, 1fr);
  }