/* =====================================================================
   rp-polish.css - Feinschliff-Layer fuer die Leonplayce-Hilfen
   Gelaendert in: Generatoren (eigene styles.css) + Portal-Seiten
   (rp-generatoren.css / rp-warm.css) + Leonplayce Center.

   Grundsaetze:
   - Alles ueber :where() / niedrige Spezifitaet -> bestehende Styles
     der Generatoren gewinnen immer, der Layer poliert nur nach.
   - Farben kommen aus den Variablen der jeweiligen Seite
     (var(--accent) je Generator, sonst Portal-Akzent, sonst neutral).
   - Nur Deko-Verbesserungen: Auswahl, Scrollbar, Fokus-Ringe,
     sanfte Hover-Lifts, Fokus-Glow bei Formularfeldern.
   ===================================================================== */

/* Akzent-Fallback-Kette: Generator-Variablen zuerst, dann Portal, dann neutral */
:root {
    --polish-accent: var(--accent, var(--rp-cyan, #dcdcdc));
    --polish-ring: color-mix(in srgb, var(--polish-accent, #dcdcdc) 45%, transparent);
    --polish-halo: color-mix(in srgb, var(--polish-accent, #dcdcdc) 24%, transparent);
}

/* Sanftes Scrollverhalten, aber nur wenn der Nutzer es erlaubt */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Textauswahl in Akzentfarbe (Fallback vor color-mix fuer aeltere Browser) */
::selection {
    background: rgba(255, 255, 255, 0.22);
}
::-moz-selection {
    background: rgba(255, 255, 255, 0.22);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    ::selection {
        background: var(--polish-ring);
    }
    ::-moz-selection {
        background: var(--polish-ring);
    }
}

/* Dezente, zum Dark-Theme passende Scrollbars */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.28);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.30);
    background-clip: content-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
html {
    scrollbar-color: rgba(255, 255, 255, 0.22) rgba(0, 0, 0, 0.25);
    scrollbar-width: thin;
}

/* Konsistente Tastatur-Fokus-Ringe (keine Entscheidung gegen bestehende Regeln,
   da :where() Spezifitaet 0 hat - eigene outline:none Regelplaetze bleiben) */
:where(:focus-visible) {
    outline: 2px solid var(--polish-ring);
    outline-offset: 2px;
}

/* Formularfelder: weicher Akzent-Glow beim Tippen */
:where(input:focus-visible,
       textarea:focus-visible,
       select:focus-visible) {
    box-shadow: 0 0 0 3px var(--polish-halo);
}

/* Buttons: sanfter Hover-Lift + Aktive-Klick-Rueckmeldung */
:where(.btn,
       .rp-btn,
       .menu-btn,
       .rp-hero__actions a,
       .rp-card__actions a) {
    transition: transform 0.18s ease,
                box-shadow 0.18s ease,
                border-color 0.18s ease,
                background-color 0.18s ease,
                color 0.18s ease;
    will-change: transform;
}
:where(.btn:hover,
       .rp-btn:hover,
       .rp-hero__actions a:hover,
       .rp-card__actions a:hover) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
:where(.btn:active,
       .rp-btn:active,
       .menu-btn:active) {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

/* Menue-Buttons der Generatoren (Aktionswahl): etwas mehr Praesenz auf Hover */
:where(.menu-btn) {
    border-radius: 12px;
}
:where(.menu-btn:hover) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    border-color: var(--polish-ring);
}
:where(.menu-btn.active) {
    box-shadow: 0 0 0 1px var(--polish-halo),
                0 8px 22px rgba(0, 0, 0, 0.35);
}

/* Formulare-Karten: ruhige Rueckmeldung statt Aufploppen */
:where(.section) {
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease;
}
:where(.section:hover) {
    border-color: color-mix(in srgb, var(--border, #2c3140) 70%, rgba(255, 255, 255, 0.3));
}

/* Portal-Karten: Hover-Lift, falls die Basiskarten es nicht schon tun */
:where(.rp-card) {
    transition: transform 0.22s ease,
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}
:where(.rp-card:hover) {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

/* Kopfbereich der Generatoren: feine Lichtkante oben */
:where(.topbar) {
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0) 55%);
}

/* Discord-Vorschau: plastischere Tiefe + feiner Innenring */
:where(.discord-preview) {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Bewegungsempfindliche Nutzer: Deko-Motion abschalten */
@media (prefers-reduced-motion: reduce) {
    :where(*) {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    html {
        scroll-behavior: auto;
    }
}