/* 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); }
    }
}