/*
 * Arcade-Integration: Rahmen-UI auf die gemeinsamen --arc-Tokens mappen.
 * Lädt als letztes Stylesheet und überschreibt gezielt Menü-/Modal-Rahmen.
 * Kartenfarben (rot/gelb/grün/blau) sind bedeutungstragend und bleiben unangetastet.
 */

body {
    font-family: var(--arc-font-ui);
}

/* Menü-Hintergrund folgt dem Theme — flach statt Farbschleier (Leitfaden §1). */
#menu-bg-gradient {
    background: var(--arc-bg);
}

/* §2: Flache Flächen, dünne Linien, ein Radius für den ganzen Rahmen.
   Gebündelt hier, weil dieses Blatt zuletzt lädt und die lokalen
   Rundungen (10–20px) aus menu.css/game.css sonst gewinnen. */
.menu-content,
.guide-content,
.menu-group,
.menu-btn,
.guide-item,
.guide-grid-item,
.config-item,
.config-control-group,
.config-count-input,
.config-checkbox,
.checkbox-label,
.lobby-item,
.lobby-join-btn,
.preset-btn,
#roguelike-hud,
#maker-preview-container,
#card-info-panel,
#number-picker,
#player-picker,
#color-picker,
#player-hand-count-badge,
.player-pick-btn,
#exit-game-btn,
#restart-btn,
#menu-btn {
    border-radius: var(--arc-radius);
}

/* Panels & Modals: Oberfläche, Text und Linien aus den Tokens */
.menu-content,
.guide-content {
    background: var(--arc-surface);
    color: var(--arc-text);
    border: 1px solid var(--arc-line);
    box-shadow: var(--arc-shadow);
}

.menu-content h2,
.guide-content h2,
.menu-group label,
.checkbox-label {
    color: var(--arc-text);
}

.subtitle,
.config-subheader {
    color: var(--arc-muted);
}

/* Neutrale (sekundäre) Buttons aus den Tokens — die farbigen
   Aktions-Buttons behalten ihre UNO-Gradienten (Spiel-Identität). */
.menu-btn.secondary {
    background: var(--arc-field);
    color: var(--arc-text);
    border: 1px solid var(--arc-line-strong);
    box-shadow: none;
}

.menu-btn.secondary:hover {
    background: var(--arc-overlay);
    border-color: var(--arc-accent);
}

.menu-btn:focus-visible,
.icon-btn:focus-visible {
    outline: 2px solid var(--arc-focus);
    outline-offset: 2px;
}

/* Icon-Buttons oben rechts */
.icon-btn {
    background: var(--arc-overlay);
    color: var(--arc-text);
    border: 1px solid var(--arc-line-strong);
}

.icon-btn:hover {
    background: var(--arc-surface);
    border-color: var(--arc-accent);
}

select,
input[type="text"],
input[type="number"] {
    font-family: var(--arc-font-ui);
}

/* Hot-Seat: Weitergeben-Zwischenschirm — bewusst VOLL deckend,
   damit die Handkarten des vorherigen Spielers nicht durchscheinen. */
#hotseat-pass-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--arc-bg); /* opak, kein rgba */
}

#hotseat-pass-overlay .menu-content {
    max-width: 420px;
    text-align: center;
}

/* Akzent kommt jetzt aus den Tokens und ist im Light-Theme schon abgedunkelt —
   die frühere Sonderfarbe #a35c00 wird nicht mehr gebraucht. */
html[data-theme="light"] .menu-group label span {
    color: var(--arc-accent);
}

/* Reduced Motion: autonome Deko-Animationen (fallende Menü-Karten,
   UNO-Button-Puls) abschalten — spielgekoppelte Animationen laufen weiter. */
@media (prefers-reduced-motion: reduce) {
    .bg-card-wrapper {
        animation: none !important;
        display: none;
    }
    #uno-btn {
        animation: none;
    }
}