/* Content pages: app/game lists, wallpaper, video, details. Builds on portal.css vocabulary. */
.media-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--glass); outline: 1.5px solid var(--glass-line); outline-offset: -1.5px; box-shadow: var(--lift); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.media-tabs a { flex: 1; text-align: center; padding: 10px 8px 8px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--muted); text-decoration: none; }
.media-tabs a[aria-current="page"] { background: var(--red); color: #fff; box-shadow: inset 0 -3px 0 var(--red-deep); }
.media-block { display: flex; flex-direction: column; gap: 4px; }
.media-sec { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.sec-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--ink); }
.more-link { font-weight: 800; font-size: 13px; color: var(--red); text-decoration: none; white-space: nowrap; }
.media-empty { grid-column: 1 / -1; text-align: center; font-weight: 700; color: var(--muted); margin: 16px 0; }
.media-alert { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--sun); color: var(--ink); font-weight: 700; }
.media-block.loading .grid { opacity: .45; pointer-events: none; transition: opacity .15s; }
.media .cat { flex: 0 0 auto; padding: 10px 16px 9px; font-size: 13px; }
.media .gname a { color: inherit; text-decoration: none; }
.vcard .thumb { aspect-ratio: 16 / 9; }

/* details */
.media .dhero { opacity: 1; transform: none; }
.media .dstats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.media .dactions { flex-wrap: wrap; }
.media .dactions .dnote { flex: 1 0 100%; margin: 0; }
.media .dmedia.wall { aspect-ratio: 3 / 4; max-height: 70vh; }
.media .wall-img { position: relative; height: 100%; max-width: 100%; object-fit: contain; }
.media .dmedia.vid { background: #000; aspect-ratio: 16 / 9; }
.media .dmedia.vid video { width: 100%; height: 100%; display: block; }
.shots { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.shots img { height: 180px; width: auto; border-radius: 14px; flex: none; }

@media (min-width: 600px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .media .dmedia.wall { aspect-ratio: auto; max-height: none; }
  .media .dmedia.vid { aspect-ratio: auto; }
  .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}