/* ===========================================================
   Cyberpunk Layer (eigenstaendige Datei, KEIN Tailwind-Build noetig)
   Wird direkt in den Layouts nach output.css verlinkt.
   Nutzt ausschliesslich die DaisyUI-Theme-Variablen (--p, --s,
   --a, --b1, --bc ...), damit Light/Dark-Farben erhalten bleiben.
   =========================================================== */

/* Neon-Grid-Hintergrund + Glow-Spots */
.cyber-bg {
    position: relative;
    background-color: oklch(var(--b1));
    background-image:
        radial-gradient(ellipse 80% 50% at 20% -10%, oklch(var(--p) / 0.12), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 10%, oklch(var(--s) / 0.10), transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 110%, oklch(var(--a) / 0.08), transparent 60%),
        linear-gradient(oklch(var(--bc) / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, oklch(var(--bc) / 0.045) 1px, transparent 1px);
    background-size: auto, auto, auto, 42px 42px, 42px 42px;
    /* Kein background-attachment: fixed — auf Mobile (iOS Safari) fehlerhaft skaliert */
}

/* Scanlines-Overlay (dezent, klickt nicht) */
.cyber-scanlines::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Unter Modals/Popups (z-50) und Sticky-Header (z-40) bleiben */
    z-index: 30;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        oklch(var(--bc) / 0.025) 3px,
        oklch(var(--bc) / 0.025) 4px
    );
}

/* Neon-Trennlinie (Header unten / Footer oben) */
.cyber-line-b {
    border-bottom: 1px solid oklch(var(--p) / 0.5);
    box-shadow: 0 1px 0 oklch(var(--p) / 0.35), 0 4px 18px oklch(var(--p) / 0.25);
}

.cyber-line-t {
    border-top: 1px solid oklch(var(--s) / 0.5);
    box-shadow: 0 -1px 0 oklch(var(--s) / 0.35), 0 -4px 18px oklch(var(--s) / 0.25);
}

/* Panel mit abgeschraegten Ecken + Neon-Rahmen.
   WICHTIG: clip-path/backdrop-filter liegen auf dem ::before-Pseudo-Element,
   NICHT auf dem Panel selbst — sonst wird das Panel zum Containing Block
   fuer position:fixed-Kinder (Modals/Popups) und schneidet sie ab. */
.cyber-panel {
    position: relative;
}

    .cyber-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: oklch(var(--b2) / 0.6);
        background-image: linear-gradient(135deg, oklch(var(--p) / 0.08), transparent 30%, transparent 70%, oklch(var(--s) / 0.08));
        border: 1px solid oklch(var(--p) / 0.35);
        clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    }

/* Neon-Text-Glow in Theme-Farben */
.cyber-glow-p { text-shadow: 0 0 6px oklch(var(--p) / 0.8), 0 0 20px oklch(var(--p) / 0.4); }
.cyber-glow-s { text-shadow: 0 0 6px oklch(var(--s) / 0.8), 0 0 20px oklch(var(--s) / 0.4); }
.cyber-glow-a { text-shadow: 0 0 6px oklch(var(--a) / 0.8), 0 0 20px oklch(var(--a) / 0.4); }

/* Nav-Links: eckige Klammern + Glow beim Hover */
.cyber-nav-link {
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

    .cyber-nav-link::before { content: "["; opacity: 0; margin-right: 0.15em; transition: opacity 0.15s ease; }
    .cyber-nav-link::after { content: "]"; opacity: 0; margin-left: 0.15em; transition: opacity 0.15s ease; }

    .cyber-nav-link:hover::before,
    .cyber-nav-link:hover::after { opacity: 0.9; }

    .cyber-nav-link:hover {
        text-shadow: 0 0 8px oklch(var(--p) / 0.7);
    }

/* Glitch-Effekt fuer Ueberschriften (data-text = gleicher Text) */
.cyber-glitch {
    position: relative;
    display: inline-block;
}

    .cyber-glitch::before,
    .cyber-glitch::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        overflow: hidden;
        clip-path: inset(0 0 0 0);
        opacity: 0.75;
        pointer-events: none;
    }

    .cyber-glitch::before {
        color: oklch(var(--s));
        animation: cyber-glitch-1 3.5s infinite steps(1);
    }

    .cyber-glitch::after {
        color: oklch(var(--a));
        animation: cyber-glitch-2 3.5s infinite steps(1);
    }

@keyframes cyber-glitch-1 {
    0%, 93%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
    94% { transform: translate(-2px, 1px); clip-path: inset(10% 0 60% 0); }
    96% { transform: translate(2px, -1px); clip-path: inset(50% 0 20% 0); }
    98% { transform: translate(-1px, 0); clip-path: inset(80% 0 5% 0); }
}

@keyframes cyber-glitch-2 {
    0%, 91%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
    92% { transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); }
    95% { transform: translate(-2px, 1px); clip-path: inset(20% 0 55% 0); }
    97% { transform: translate(1px, 1px); clip-path: inset(5% 0 85% 0); }
}

/* DaisyUI-Buttons: abgeschraegte Ecken + Neon-Glow beim Hover */
.btn {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    border-radius: 0;
}

.btn-primary:hover { box-shadow: 0 0 16px oklch(var(--p) / 0.6); }
.btn-secondary:hover { box-shadow: 0 0 16px oklch(var(--s) / 0.6); }
.btn-accent:hover { box-shadow: 0 0 16px oklch(var(--a) / 0.6); }
.btn-info:hover { box-shadow: 0 0 16px oklch(var(--in) / 0.6); }
.btn-success:hover { box-shadow: 0 0 16px oklch(var(--su) / 0.6); }
.btn-warning:hover { box-shadow: 0 0 16px oklch(var(--wa) / 0.6); }
.btn-error:hover { box-shadow: 0 0 16px oklch(var(--er) / 0.6); }

/* Runde Buttons (Social-Icons) behalten ihre Form */
.btn-circle {
    clip-path: none;
    border-radius: 9999px;
}

/* Prose-Ueberschriften: Mono + dezente Neon-Linie */
.prose h1, .prose h2 {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}

.prose h2 {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid oklch(var(--p) / 0.35);
    box-shadow: 0 1px 0 oklch(var(--p) / 0.15);
}

/* Terminal-Prompt-Deko, z.B. im Footer */
.cyber-prompt::before {
    content: "> ";
    color: oklch(var(--s));
}

/* Codex-Terminal-Fenster: Neon-Rahmen + Glow */
.cyber-terminal {
    border: 1px solid oklch(var(--p) / 0.45);
    box-shadow: 0 0 24px oklch(var(--p) / 0.25), inset 0 0 60px oklch(var(--s) / 0.05);
}

/* ASCII-Logo: skaliert mit dem Viewport, damit es auf Smartphones
   nicht abgeschnitten wird (Breite ~62 Zeichen Monospace) */
.cyber-ascii {
    font-size: clamp(0.34rem, 1.75vw, 0.875rem);
    line-height: 1.25;
    overflow-x: auto;
}

/* ===========================================================
   Computer-Fenster fuer den Hauptinhalt
   Titelleiste (Ampel-Buttons + Titel) + Inhaltsbereich.
   Bewusst OHNE clip-path/backdrop-filter auf dem Container,
   damit position:fixed-Kinder (Modals) nicht abgeschnitten werden.
   =========================================================== */
.cyber-window {
    position: relative;
    border: 1px solid oklch(var(--p) / 0.45);
    border-radius: 10px;
    background-color: oklch(var(--b2) / 0.55);
    box-shadow:
        0 0 0 1px oklch(var(--bc) / 0.05),
        0 0 28px oklch(var(--p) / 0.22),
        0 18px 40px -12px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* Titelleiste */
.cyber-window-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    background: linear-gradient(180deg, oklch(var(--b3) / 0.9), oklch(var(--b2) / 0.75));
    border-bottom: 1px solid oklch(var(--p) / 0.35);
    box-shadow: 0 1px 0 oklch(var(--p) / 0.2);
    font-family: 'JetBrains Mono', monospace;
    user-select: none;
}

/* Ampel-Buttons */
.cyber-window-dots {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

    .cyber-window-dots span {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 9999px;
        display: inline-block;
    }

    .cyber-window-dots .dot-r { background: #ff5f57; box-shadow: 0 0 8px #ff5f5799; }
    .cyber-window-dots .dot-y { background: #febc2e; box-shadow: 0 0 8px #febc2e99; }
    .cyber-window-dots .dot-g { background: #28c840; box-shadow: 0 0 8px #28c84099; }

/* Fenster-Titel (mittig, Terminal-Pfad-Optik) */
.cyber-window-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: oklch(var(--bc) / 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 6px oklch(var(--s) / 0.4);
}

/* Symmetrie-Platzhalter rechts, damit der Titel echt mittig bleibt */
.cyber-window-spacer {
    width: 3.2rem;
    flex-shrink: 0;
}

/* Inhaltsbereich */
.cyber-window-body {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .cyber-window-body {
        padding: 2.5rem;
    }
}

/* Wiederverwendbares Neon-Panel (zentrierte Karten: Login, Redeem, UseItem …).
   Ohne clip-path/backdrop-filter, damit fixed-Kinder nicht abgeschnitten werden. */
.cyber-card {
    position: relative;
    border: 1px solid oklch(var(--p) / 0.4);
    border-radius: 12px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, oklch(var(--p) / 0.1), transparent 70%),
        oklch(var(--b2) / 0.6);
    box-shadow: 0 0 22px oklch(var(--p) / 0.18), 0 18px 40px -14px rgba(0, 0, 0, 0.5), inset 0 1px 0 oklch(var(--bc) / 0.06);
}

    /* Variante in Sekundaerfarbe (z.B. Login) */
    .cyber-card.cyber-card-s {
        border-color: oklch(var(--s) / 0.4);
        background:
            radial-gradient(ellipse 80% 60% at 50% 0%, oklch(var(--s) / 0.1), transparent 70%),
            oklch(var(--b2) / 0.6);
        box-shadow: 0 0 22px oklch(var(--s) / 0.18), 0 18px 40px -14px rgba(0, 0, 0, 0.5), inset 0 1px 0 oklch(var(--bc) / 0.06);
    }

/* Leuchtender Icon-Kreis (Kopf der Karten) */
.cyber-icon-orb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(180deg, oklch(var(--p) / 0.9), oklch(var(--p) / 0.6));
    color: oklch(var(--pc));
    box-shadow: 0 0 22px oklch(var(--p) / 0.6), inset 0 1px 0 oklch(var(--bc) / 0.15);
}

    .cyber-icon-orb.cyber-icon-orb-s {
        background: linear-gradient(180deg, oklch(var(--s) / 0.9), oklch(var(--s) / 0.6));
        color: oklch(var(--sc));
        box-shadow: 0 0 22px oklch(var(--s) / 0.6), inset 0 1px 0 oklch(var(--bc) / 0.15);
    }

/* Code-Eingabe im Terminal-Stil */
.cyber-code-input {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.35em;
    border: 1px solid oklch(var(--p) / 0.4) !important;
    background: oklch(var(--b1) / 0.7) !important;
    box-shadow: inset 0 0 14px oklch(var(--p) / 0.12);
}

    .cyber-code-input:focus {
        outline: none;
        border-color: oklch(var(--p)) !important;
        box-shadow: inset 0 0 14px oklch(var(--p) / 0.2), 0 0 14px oklch(var(--p) / 0.4);
    }