/* chrome-optimized.css - Optimiert für Chrome Browser */

/* CSS Custom Properties für bessere Performance */
:root {
    --primary-color: #6f00ff;
    --highlight-color: #ff66ff;
    --title-color: #ffccff;
    --text-color: #eeeeee;
    --background-color: #000000;
    --border-color-primary: #6f00ff;
    --border-color-secondary: #ffffff;
    --background-opacity: 0.05;
    --glow-shadow: 0 0 20px var(--primary-color);
    --title-shadow: 0 0 5px #cc00cc;

    /* Chrome-spezifische Performance-Optimierungen */
    --transition-duration: 0.3s;
    --border-radius: 20px;
    --small-border-radius: 15px;
}

/* Chrome GPU-Beschleunigung aktivieren */
* {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

/* Optimierte Basis-Styles */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--background-color);
    color: white;
    font-family: -webkit-system-ui, system-ui, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Chrome-spezifische Optimierungen */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;

    /* Scroll-Performance */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Container mit will-change für bessere Performance */
.container {
    text-align: center;
    padding: 20px 15px 5px 15px;
    max-width: 800px;
    border: 5px solid var(--border-color-secondary);
    will-change: transform;
}

/* Optimierte Typography */
h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: -1rem;
    margin-top: -1rem;
    contain: layout;
}

p {
    font-size: clamp(0.95rem, 2vw, 1.5rem);
    line-height: 1;
    margin-bottom: 1px;
    contain: layout;
}

.abstract-content {
    margin-bottom: 1px;
}

/* Chrome-optimierte Links */
.return-link {
    color: white;
    margin-left: 1rem;
    text-decoration: underline;
    transition: color var(--transition-duration) ease;
    will-change: color;
}

.return-link:hover {
    color: #cccccc;
}

#cap {
    text-transform: uppercase;
}

/* Hauptbereich mit Compositor Layers */
.ability-section {
    margin: 3rem auto;
    padding: 2rem;
    max-width: 600px;
    background: rgba(255, 255, 255, var(--background-opacity));
    border: 2px solid var(--border-color-primary);
    border-radius: var(--border-radius);
    text-align: center;
    color: #ffffff;
    box-shadow: var(--glow-shadow);

    /* Chrome Performance-Optimierungen */
    will-change: transform, box-shadow;
    contain: layout style paint;
    transform: translateZ(0);

    /* Chrome-spezifische Backdrop-Filter (falls unterstützt) */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Optimierte Titel */
.ability-title {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--title-color);
    margin-bottom: 1rem;
    text-shadow: var(--title-shadow);
    will-change: text-shadow;
}

/* Performance-optimierte Liste */
.ability-list {
    list-style-type: square;
    padding-left: 1.5rem;
    text-align: left;
    color: var(--text-color);
    font-size: clamp(1rem, 2vw, 1.25rem);
    contain: layout;
}

/* Chrome-optimierte Hover-Effekte */
.ability-list li {
    margin-bottom: 0.75rem;
    transition: color var(--transition-duration) ease, transform 0.2s ease;
    will-change: color, transform;
    cursor: pointer;
}

.ability-list li:hover {
    color: var(--highlight-color);
}

/* Spezifische Chrome-optimierte Hover-Effekte */
[data-ability="telepathy"]:hover {
    text-shadow: 0 0 3px var(--highlight-color);
    will-change: text-shadow;
}

[data-ability="telekinesis"]:hover {
    transform: translateY(-2px) translateZ(0);
}

[data-ability="precognition"]:hover {
    font-style: italic;
}

[data-ability="healing"]:hover {
    text-shadow: 0 0 5px green;
    will-change: text-shadow;
}

[data-ability="time"]:hover {
    letter-spacing: 1px;
    will-change: letter-spacing;
}

[data-ability="molecular"]:hover {
    font-weight: bold;
}

/* Navigation Footer */
.navigation-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    contain: layout;
}

/* Chrome-optimierte Buttons */
.return-link {
    color: var(--title-color);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--small-border-radius);
    transition: all var(--transition-duration) ease;
    display: inline-block;
    will-change: color, background-color, box-shadow, transform;

    /* Chrome Hardware-Beschleunigung */
    transform: translateZ(0);
}

.return-link:hover {
    color: white;
    background-color: rgba(111, 0, 255, 0.3);
    box-shadow: 0 0 10px var(--primary-color);
    transform: translateY(-2px) translateZ(0);
}

/* Chrome-optimierte Media Queries */
@media (max-width: 768px) {
    .ability-section {
        margin: 2rem auto;
        padding: 1.5rem;
    }

    .container {
        padding: 15px 10px 5px 10px;
    }
}

/* Chrome-spezifische Optimierungen für hohe DPI-Displays */
@media (-webkit-min-device-pixel-ratio: 2) {
    .ability-title,
    .ability-list li {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Chrome Performance-Hints */
/*@supports (contain: strict) {
    .ability-section {
        contain: strict;
    }
}*/

/* Chrome-spezifische Scroll-Optimierungen */
@supports (-webkit-overflow-scrolling: touch) {
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Chrome-spezifische Filter-Optimierungen */
@supports (backdrop-filter: blur(10px)) {
    .ability-section {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* Reduce Motion für Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}