/* The Enemies site: the list of enemies beside the viewer that plays one through its whole stack. */
main.enemies { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr); gap: 16px; padding: 0 16px 16px; align-items: start; }
@media (max-width: 860px) { main.enemies { grid-template-columns: 1fr; } .viewer { order: -1; } }
.list .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.list .filters input, .list .filters select { font: inherit; padding: 4px 8px; background: rgba(0, 0, 0, .35); color: inherit;
 border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; }
.list h3 { margin: 14px 0 6px; font-size: 1rem; }
.list h3 small { opacity: .6; font-weight: normal; margin-left: 6px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.card { background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; padding: 4px; cursor: pointer;
 color: inherit; font: inherit; text-align: center; }
.card:hover, .card[aria-current="true"] { border-color: var(--gold, #c8a040); }
.card img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: auto; display: block; }
.card span { display: block; font-size: .75rem; line-height: 1.15; margin-top: 2px; }
.card em { display: block; font-size: .65rem; opacity: .6; font-style: normal; }
.viewer { position: sticky; top: 8px; }
.viewer .stage { position: relative; height: min(62vh, 560px); background: radial-gradient(circle at 50% 70%, #2a2f3e, #121520); border-radius: 4px; }
.viewer .stage canvas { width: 100%; height: 100%; display: block; }
.viewer .clipname { position: absolute; left: 10px; top: 8px; right: 10px; font-size: .95rem; text-shadow: 0 1px 2px #000; pointer-events: none; }
.viewer .bar { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.viewer .bar button { font: inherit; padding: 3px 10px; }
.viewer .bar .count { opacity: .7; font-size: .85rem; }
.viewer ol.clips { columns: 2; font-size: .82rem; margin: 6px 0; padding-left: 22px; }
.viewer ol.clips li { cursor: pointer; break-inside: avoid; }
.viewer ol.clips li.on { color: var(--gold, #c8a040); }
.viewer .about p { margin: 6px 0; font-size: .9rem; }
.viewer .about h2 { margin: 4px 0; }
.viewer .about .meta { opacity: .75; font-size: .85rem; }