/* ============================================================
   publiek/emulators.css - het tabje "How to play with an
   emulator" onder de speler: per emulator een vak met zijn
   instellingen. Hoort bij templates/public/delen/_emulators.html.
   De rij tabjes zelf staat in hoofdstukken.css.
   ============================================================ */

.emulators {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* een enkele emulator hoeft niet de hele breedte te vullen */
.emulators > :only-child { grid-column: 1 / 2; }

.emulator {
    min-width: 0;
    padding: 14px 16px 6px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: #0e1338;
}
.emulator-naam {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    font-size: 16px;
    overflow-wrap: anywhere;
}
.emulator-label {
    padding: 1px 10px;
    border: 1px solid rgba(34, 197, 94, .6);
    border-radius: 999px;
    color: #6ee7a0;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}
.emulator-console { margin: 3px 0 0; font-size: 12.5px; color: var(--tekst-zacht); }

/* de instellingen: links de naam, rechts wat je kiest */
.emulator-regels {
    display: grid;
    grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
    margin: 12px 0 0;
    font-size: 14px;
}
.emulator-regels dt,
.emulator-regels dd {
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--rand);
    overflow-wrap: anywhere;
}
.emulator-regels dt { padding-right: 12px; color: var(--tekst); }
.emulator-regels dd { color: var(--tekst-zacht); }

@media (max-width: 900px) {
    .emulators { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .emulator { padding: 12px 12px 4px; }
    .emulator-regels { grid-template-columns: minmax(0, 1fr); }
    .emulator-regels dt { padding-bottom: 0; font-size: 12.5px; color: var(--tekst-zacht); }
    .emulator-regels dd { padding-top: 2px; border-top: 0; color: var(--tekst); }
}