/**
 * HOKM - Base CSS
 * Traditionell-Persisches Design mit modernem Touch
 */

/* ========== CSS VARIABLEN ========== */
:root {
    /* Persische Farbpalette */
    --gold: #d4af37;
    --gold-light: #ffd700;
    --gold-dark: #aa8c2c;
    --wine-red: #722f37;
    --wine-dark: #4a1c24;
    --turquoise: #40e0d0;
    --turquoise-dark: #2a9d8f;
    --royal-blue: #1a237e;
    --navy: #0d1421;

    /* Hintergründe */
    --bg-dark: #0d1421;
    --bg-card: rgba(26, 35, 126, 0.6);
    --bg-glass: rgba(13, 20, 33, 0.8);

    /* Akzentfarben */
    --accent: #e94560;
    --accent-green: #4ecca3;

    /* Text */
    --text: #f5f5f5;
    --text-dim: #a0a0a0;
    --text-gold: #d4af37;

    /* Karten */
    --card-width: 55px;
    --card-height: 78px;

    /* Glassmorphism */
    --glass-bg: rgba(26, 35, 126, 0.4);
    --glass-border: rgba(212, 175, 55, 0.3);
    --glass-blur: blur(10px);

    /* Schatten */
    --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);
    --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.5);

    /* Animationen */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========== RESET & BASE ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background: linear-gradient(135deg, var(--navy) 0%, var(--royal-blue) 50%, var(--navy) 100%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Persisches Hintergrundmuster */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q40 15 30 25 Q20 15 30 5' fill='none' stroke='%23d4af37' stroke-width='0.5' opacity='0.05'/%3E%3Ccircle cx='30' cy='30' r='10' fill='none' stroke='%23d4af37' stroke-width='0.3' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Glassmorphism Klassen */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    box-shadow: var(--shadow-gold);
}

/* Gold-Akzent Klassen */
.gold-border {
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-gold);
}

.gold-text {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Persisches Ornament Border */
.ornament-border {
    position: relative;
    border: 2px solid var(--gold);
    border-radius: 15px;
}

.ornament-border::before,
.ornament-border::after {
    content: '◆';
    position: absolute;
    color: var(--gold);
    font-size: 12px;
}

.ornament-border::before {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.ornament-border::after {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

/* ========== UTILITY KLASSEN ========== */
.hidden { display: none !important; }

/* ========== ANIMATIONEN ========== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    50% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
}

@keyframes pulseGold {
    0%, 100% { box-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold); }
    50% { box-shadow: 0 0 20px var(--gold), 0 0 30px var(--gold); }
}

@keyframes rotatePhone {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes cardFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px var(--gold));
    }
    50% {
        filter: drop-shadow(0 0 20px var(--gold)) drop-shadow(0 0 30px var(--gold-light));
    }
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 15px auto;
}

/* Animation Utility Klassen */
.animate-slide-up { animation: slideInUp 0.5s ease forwards; }
.animate-slide-down { animation: slideInDown 0.5s ease forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-gold { animation: pulseGold 2s ease-in-out infinite; }
.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Level Badge Animation */
.level-up {
    animation: scaleIn 0.5s ease, pulseGold 1s ease 0.5s;
}

/* Karten Animation */
.card-enter {
    animation: slideInUp 0.3s ease forwards;
}

.card-play {
    animation: slideInUp 0.2s ease reverse forwards;
}