/* Rex Diner: Retro-Look in Lila, Blau und Neon.
   Liegt nach app.css und tailwind.min.css und überschreibt nur Aussehen, keine Struktur. */

@font-face {
    font-family: "Orbitron";
    src: url("/assets/fonts/orbitron-latin.woff2") format("woff2");
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --rex-bg: #07031a;
    --rex-violet: #8b5cf6;
    --rex-blue: #3b6bff;
    --rex-cyan: #38e8ff;
    --rex-pink: #ff3dd8;
    --rex-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
    --c-accent: var(--rex-cyan);
}

/* Hintergrund: das Rex-Diner-Bild (wie bei Kebab), in der App abgedunkelt für gute Lesbarkeit */
body { background-color: var(--rex-bg); }
.bg-brand { background-position: center bottom; }
.bg-brand.bg-brand-dim { opacity: .28; }

/* Überschriften im Retro-Stil */
h1, h2 {
    font-family: var(--rex-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}
h1 { text-shadow: 0 0 14px rgba(56, 232, 255, .55), 0 0 32px rgba(139, 92, 246, .45); }
h2 { text-shadow: 0 0 10px rgba(56, 232, 255, .35); }
h3, h4 { font-family: var(--rex-display); letter-spacing: .02em; }

/* Karten: violetter Rand mit leichtem Leuchten */
.card {
    border-color: rgba(139, 92, 246, .35);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .08), 0 10px 34px -12px rgba(59, 107, 255, .35);
}
.modal-box {
    border: 1px solid rgba(139, 92, 246, .5);
    box-shadow: 0 0 40px rgba(139, 92, 246, .35);
}

/* Eingaben und Fokus */
.input:focus {
    border-color: var(--rex-cyan);
    box-shadow: 0 0 0 2px rgba(56, 232, 255, .35), 0 0 14px rgba(56, 232, 255, .25);
}
.input { background: #0a0526; }

/* Hauptknopf: Neon-Verlauf, dunkle Schrift bleibt gut lesbar */
.btn-primary {
    background: linear-gradient(135deg, var(--rex-cyan) 0%, #7cc4ff 100%);
    color: #07031a;
    box-shadow: 0 0 18px rgba(56, 232, 255, .35);
    transition: transform .16s cubic-bezier(.23, 1, .32, 1), box-shadow .2s ease;
}
.btn-primary:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { box-shadow: 0 0 26px rgba(56, 232, 255, .6); }
}

/* Akzentfarbe als Leuchtschrift, wo sie Text ist */
.text-gold { text-shadow: 0 0 8px rgba(56, 232, 255, .3); }
::selection { background: rgba(255, 61, 216, .45); color: #fff; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--rex-violet), var(--rex-blue)); }

/* Anmeldeseite: Titel pulsiert ruhig, nur bei erlaubter Bewegung */
@media (prefers-reduced-motion: no-preference) {
    main.card h1 { animation: rex-glow 3.2s ease-in-out infinite alternate; }
    @keyframes rex-glow {
        from { text-shadow: 0 0 10px rgba(56, 232, 255, .45), 0 0 26px rgba(139, 92, 246, .35); }
        to   { text-shadow: 0 0 16px rgba(255, 61, 216, .6), 0 0 38px rgba(139, 92, 246, .5); }
    }
}

/* ── Allgemeine Demo: neutral, schwarzer Hintergrund, BW-Rot ── */
:root {
  --color-bgmain: #000; --color-panel: #0f0f10; --color-panelborder: #2a2a2e; --color-gold: #e2231a;
  --c-bg: #000; --c-panel: #0f0f10; --c-border: #2a2a2e; --c-accent: #e2231a; --c-on-accent: #fff;
  --rex-violet: #e2231a; --rex-blue: #e2231a; --rex-cyan: #e2231a; --rex-pink: #e2231a;
}
html, body { background: #000 !important; }
.bg-brand { background-image: none !important; background: #000 !important; }
.input { background: #0a0a0a !important; }
.btn-primary { background: #e2231a !important; color: #fff !important; box-shadow: none !important; border-color: #e2231a !important; }
.btn-primary:hover { background: #c81d15 !important; }
*, *::before, *::after { text-shadow: none !important; }
.card, .card:hover { box-shadow: none !important; border-color: #2a2a2e !important; }
main, aside, .bg-content { box-shadow: none !important; }