@charset "UTF-8";

/* ====================== LOL ANIMATED BACKGROUND ====================== */

/* RESPONSIVE DESIGN - Scaling via JavaScript + CSS Variables */
:root {
    /* Wird von responsive-scale.js gesetzt */
    --scale: 1;
    
    /* All dimension multipliers - skalieren mit --scale */
    --u1: calc(1px * var(--scale));      /* 1px */
    --u2: calc(2px * var(--scale));      /* 2px */
    --u3: calc(3px * var(--scale));      /* 3px */
    --u4: calc(4px * var(--scale));      /* 4px */
    --u5: calc(5px * var(--scale));      /* 5px */
    --u6: calc(6px * var(--scale));      /* 6px */
    --u8: calc(8px * var(--scale));      /* 8px */
    --u10: calc(10px * var(--scale));    /* 10px */
    --u12: calc(12px * var(--scale));    /* 12px */
    --u14: calc(14px * var(--scale));    /* 14px */
    --u15: calc(15px * var(--scale));    /* 15px */
    --u18: calc(18px * var(--scale));    /* 18px */
    --u20: calc(20px * var(--scale));    /* 20px */
    --u24: calc(24px * var(--scale));    /* 24px */
    --u25: calc(25px * var(--scale));    /* 25px */
    --u28: calc(28px * var(--scale));    /* 28px */
    --u30: calc(30px * var(--scale));    /* 30px */
    --u35: calc(35px * var(--scale));    /* 35px */
    --u40: calc(40px * var(--scale));    /* 40px */
    --u45: calc(45px * var(--scale));    /* 45px */
    --u60: calc(60px * var(--scale));    /* 60px */
    --u80: calc(80px * var(--scale));    /* 80px */
    --u100: calc(100px * var(--scale));  /* 100px */
    --u120: calc(120px * var(--scale));  /* 120px */
    --u180: calc(180px * var(--scale));  /* 180px */
    --u200: calc(200px * var(--scale));  /* 200px */
    --u250: calc(250px * var(--scale));  /* 250px */
    --u280: calc(280px * var(--scale));  /* 280px */
    --u300: calc(300px * var(--scale));  /* 300px */
    --u320: calc(320px * var(--scale));  /* 320px */
    --u400: calc(400px * var(--scale));  /* 400px */
    --u420: calc(420px * var(--scale));  /* 420px */
    --u450: calc(450px * var(--scale));  /* 450px */
    --u520: calc(520px * var(--scale));  /* 520px */
    --u550: calc(550px * var(--scale));  /* 550px */
    --u850: calc(850px * var(--scale));  /* 850px */
    --u900: calc(900px * var(--scale));  /* 900px */
    --u1380: calc(1380px * var(--scale)); /* 1380px */
    --u1600: calc(1600px * var(--scale)); /* 1600px */
}

html {
    font-size: calc(16px * var(--scale));
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -3;
    background: 
        radial-gradient(circle at 30% 20%, rgba(200, 170, 110, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(139, 69, 255, 0.08) 0%, transparent 50%),
        #071015;
    animation: riftPulse 25s ease infinite;
    pointer-events: none;
}

/* Leichte Middle-earth-Rune Schicht */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -2;
    background-image: 
        linear-gradient(rgba(200,170,110,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,170,110,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.4;
    animation: runeGrid 40s linear infinite;
    pointer-events: none;
}

/* Magische Partikel / Funken */
.particles {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: #9b7a1a;
    border-radius: 50%;
    box-shadow: 0 0 8px #9b7a1a, 0 0 15px #8a5cff;
    animation: floatParticle linear infinite;
    opacity: 0;
}

/* Keyframes */
@keyframes riftPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

@keyframes runeGrid {
    0% { background-position: 0 0; }
    100% { background-position: 80px 80px; }
}

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) scale(0.6);
        opacity: 0;
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% {
        transform: translateY(-100px) scale(0.2);
        opacity: 0;
    }
}












body {
    background-color: #071015;
    background-image: radial-gradient(circle, #0a1428 0%, #071015 100%);
    color: #f0e6d2;
    font-family: 'Beaufort for LoL', serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    padding-top: var(--u20);
    padding-bottom: var(--u40);
    margin: 0;
}

h1 {
    color: #9b7a1a;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.5);
    margin-bottom: var(--u20);
}

/* --- Haupt-Layout --- */
#main-layout {
    display: flex;
    gap: var(--u20);
    max-width: 1920px;
    width: 98%;
    height: fit-content;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
    padding: var(--u20);
}

/* --- Rahmen-Styles (Middle-earth-Look) --- */
#turn-container, #quest-container,#chat-container {
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9) 0%, rgba(20, 25, 40, 0.9) 100%);
    border: 2px solid #9b7a1a;
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.2), inset 0 0 20px rgba(200, 170, 110, 0.08);
    border-radius: 12px;
    position: relative;
}

/* --- 1. Status-Anzeige  --- */
#turn-container {
    width: var(--u200);
    padding: var(--u20);
    text-align: center;
    height: fit-content;
    position: sticky;
    top: var(--u40);
}

#turn-display-header {
    color: #9b7a1a;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: var(--u10);
    border-bottom: 1px solid rgba(200, 170, 110, 0.3);
    padding-bottom: var(--u5);
}

#turn-display {
    font-size: 1.1rem;
    font-weight: bold;
}

.my-turn {
    color: #00ff9d;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
}

.waiting-turn {
    color: #f0e6d2;
}

/* --- 2. Haupt-Spielbereich  --- */
#quest-container {
    flex: 1;
    min-width: 500px;
    max-width: 1000px;
    max-height: calc(100vh - 120px);
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9) 0%, rgba(20, 25, 40, 0.9) 100%);
    border: 2px solid #9b7a1a;
    border-radius: 12px;
    padding: var(--u25);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.2), inset 0 0 20px rgba(200, 170, 110, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Scoreboard  --- */
#scoreboard {
    margin-bottom: var(--u25);
    padding: var(--u15);
    border-bottom: 1px solid rgba(200, 170, 110, 0.3);
    background: rgba(15, 20, 30, 0.6);
    border-radius: 8px;
    width: 100%;
}

#scoreboard h3 {
    color: #9b7a1a;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin: 0 0 12px 0;
    font-weight: bold;
    letter-spacing: 1px;
}

#glory-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--u12);
    width: 100%;
}

#glory-list li {
    background: rgba(200, 170, 110, 0.1);
    border: 1px solid #9b7a1a;
    padding: var(--u6) var(--u10);
    border-radius: 3px;
    font-weight: bold;
    color: #f0e6d2;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}



button {
    background: linear-gradient(to bottom, #9b7a1a 0%, #a18448 100%); 
    border: 1px solid #785a28;
    color: #071015; 
    padding: var(--u12) var(--u24);
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: brightness 0.2s;
}

button:hover {
    filter: brightness(1.5);
}

.header-row, .guess-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(7, minmax(0, 1fr));
    gap: var(--u10);
    margin-top: var(--u10);
    width: 100%;
    align-items: center; 
}


.header-row span {
    color: #a0a0a0;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding-bottom: 5px;
    border-bottom: 1px solid #3c3c41;
}

.box {
    aspect-ratio: 1 / 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3c3c41;
    background: #071015;
    
    /* Text-Tuning */
    font-size: 0.85rem;
    font-weight: 800 !important; 
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
    padding: 4px;
    box-sizing: border-box;
    
    min-width: 0;
    min-height: 0;
    color: #ffffff; 
}

/* --- Farben & Indikatoren --- */
.correct { 
    background-color: #28a745 !important; 
    border-color: #34d058; 
    color: #ffffff !important; 
}

.incorrect,.higher, .lower  { 
    background-color: #dc3545 !important; 
    border-color: #ff4d5e; 
    color: #ffffff !important; 
}


.partial { 
    background-color: hsl(46, 70%, 54%) !important; /* LoL Gold */
    border-color: hsl(46, 70%, 54%); 
    color: #ffffff !important; 
}


.higher::after { 
    content: '?'; 
    font-size: 1.1rem;
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
}

.lower::after { 
    content: '?'; 
    font-size: 1.1rem;
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
}

/* Pfeile hinzuf�gen */
.higher::after { 
    content: ' ?'; 
    font-weight: bold;
    margin-left: 5px;
}

.lower::after { 
    content: ' ?'; 
    font-weight: bold;
    margin-left: 5px;
}

.champ-box {
    /*border: 2px solid #9b7a1a;*/
    position: relative; /* Wichtig f�r die absolute Positionierung des Textes */
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block; /* �ndere dies von flex zu block, damit das Bild die Box f�llt */
}

.champ-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.champ-name-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Halbdurchsichtiger Hintergrund */
    color: #f0e6d2;
    font-size: 0.65rem;
    padding: 2px 0;
    text-align: center; /* Zentriert den Namen horizontal */
    z-index: 2;
    pointer-events: none; /* Verhindert, dass der Text Klicks blockiert */
}

/* --- 3. Chatbox (Rechts) --- */
#chat-container {
    width: var(--u280);
    height: var(--u400);
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: rgba(10, 15, 25, 0.95);
    border: 1.5px solid #9b7a1a;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

#chat-header {
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.15) 0%, rgba(200, 170, 110, 0.05) 100%);
    padding: var(--u12) var(--u15);
    color: #9b7a1a;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(200, 170, 110, 0.25);
    font-weight: 600;
}

#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--u12) var(--u15);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: var(--u6);
    color: #f0e6d2;
}

/* Scrollbar-Styling (Webkit) */
#chat-messages::-webkit-scrollbar {
    width: var(--u6);
}
#chat-messages::-webkit-scrollbar-track {
    background: rgba(200, 170, 110, 0.05);
    border-radius: 3px;
}
#chat-messages::-webkit-scrollbar-thumb {
    background: #9b7a1a;
    border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #d4ad7b;
}

.chat-entry strong {
    color: #9b7a1a;
}

.chat-entry.system-msg {
    color: #00ffcc; 
    font-style: italic;
}

#chat-input-area {
    padding: var(--u10) var(--u12);
    border-top: 1px solid rgba(200, 170, 110, 0.25);
    background: rgba(20, 25, 35, 0.6);
}


/* --- Sieg-Overlay --- */
#winner-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    background: #071015;
    padding: var(--u40);
    border: 3px solid #9b7a1a;
    text-align: center;
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.4);
}

.hidden { display: none !important; }


.search-wrapper {
    position: relative; 
    display: inline-block;
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #0a1428;
    border: 1px solid #9b7a1a;
    border-top: none;
    z-index: 1000;
    max-height: var(--u300);
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.suggestion-artifact {
    display: flex;
    align-items: center;
    padding: var(--u8) var(--u12);
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #1e2328;
    color: #f0e6d2;
}

.suggestion-artifact:hover {
    background: #1e2328;
}

.suggestion-icon {
    width: var(--u35);
    height: var(--u35);
    border-radius: 2px;
    margin-right: var(--u15);
    border: 1px solid #9b7a1a;
}

.hidden { display: none !important; }


.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #071015;
    border: 1px solid #9b7a1a;
    z-index: 1000;
    max-height: var(--u250);
    overflow-y: auto;
}

.suggestion-artifact {
    display: flex;
    align-items: center;
    padding: var(--u10);
    cursor: pointer;
    border-bottom: 1px solid #1e2328;
}

.suggestion-artifact:hover {
    background: #1e2328;
}

.suggestion-icon {
    width: var(--u30);
    height: var(--u30);
    margin-right: var(--u10);
    border: 1px solid #9b7a1a;
}

#results-table {
    width: 100%;
    max-width: 850px; 
    margin: 0 auto;
}


.lol-button {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    background: linear-gradient(to bottom, #9b7a1a 0%, #a18448 100%);
    border: 1px solid #785a28;
    color: #071015;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.lol-button:hover {
    filter: brightness(1.2);
}

.lol-button.muted {
    background: #3c3c41;
    border-color: #1e2328;
    color: #a0a0a0;
}

/* Fix f�r das Overlay-Layout */
.overlay-content h2 {
    margin: 0;
    color: #f0e6d2;
}


/* Emote Picker Styling */
#emote-picker {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

#emote-picker button {
    background: #1e2328;
    border: 1px solid #9b7a1a;
    color: white;
    padding: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 4px;
}

#emote-picker button:hover {
    background: #9b7a1a;
}

/* Fliegende Emote Animation */
#emote-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

.floating-emote {
    position: absolute;
    bottom: 20%;
    font-size: 2.5rem;
    text-align: center;
    animation: floatUp 3s ease-out forwards;
    text-shadow: 0 0 10px black;
}

.emote-user {
    font-size: 0.8rem;
    color: #9b7a1a;
    font-weight: bold;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: translateY(-50px) scale(1.2); }
    100% { transform: translateY(-400px) scale(1); opacity: 0; }
}

/* My Turn Animation */
.my-turn {
    color: #00ff00 !important;
    font-weight: bold;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { text-shadow: 0 0 5px #00ff00; }
    to { text-shadow: 0 0 20px #00ff00; }
}

.champ-icon-large {
    width: 100px; 
    height: 100px;
    border-radius: 50%; 
    border: 3px solid #9b7a1a; 
    margin-top: 15px;
    margin-bottom: 15px;
    display: block; 
    margin-left: auto;
    margin-right: auto;
}

.hidden {
    display: none !important;
}


#glory-list li:hover {
    color: #ff4655; 
    text-decoration: underline;
}

.chat-entry strong:contains("SYSTEM") {
    color: #ff4655;
}


.copyright-shimmer {
    font-size: 0.8rem;
    font-family: 'Beaufort for LoL', serif;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 1px;
    
    color: #a18448; 

    background: linear-gradient(to right, #a18448 0%, #a18448 45%, #ffffff 50%, #a18448 55%, #a18448 100%);
    background-size: 300% auto; 
    
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    animation: goldShimmer 15s linear infinite;
}

@keyframes goldShimmer {
    0% {
        background-position: 150% center; 
        filter: brightness(1);
    }
    15% {
        filter: brightness(1.4);
    }
    30% {
        background-position: -50% center; 
        filter: brightness(1);
    }
    100% {
        background-position: -50% center;
        filter: brightness(1);
    }
}

#discord-promo {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #3c3c41; 
    text-align: center;
}

#discord-promo p {
    font-size: 0.9rem;
    color: #a18448;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #5865F2; 
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* --- Discord Button Icon  --- */
.discord-button img {
    width: 20px;
    height: 20px;
    display: block; 
    object-fit: contain;
    opacity: 1 !important; 
    visibility: visible !important;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.discord-button:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}





/* Verhindert, dass das Hauptlayout im Hintergrund scrollt */
body.modal-open {
    overflow: hidden !important;
}

/* Styling f�r das Spieler-Namensschild am Guess */
.player-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(200, 170, 110, 0.9); /* Middle-earth Gold */
    color: #071015;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 1px 0;
    text-align: center;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #785a28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wichtig: Damit das Badge oben nicht abgeschnitten wird, 
   muss die champ-box den Text oben halten */
.champ-box {
    position: relative;
    overflow: hidden; /* Beh�lt das Icon und die Labels sauber im Rahmen */
}

/* Den Hero-Namen unten lassen wir so, 
   aber wir geben ihm ein bisschen mehr Abstand zum Icon */
.champ-name-text {
    z-index: 2;
}


/* 1. Die Einblend-Animation f�r neue Tipps */
@keyframes slideIn {
    0% { 
        opacity: 0; 
        transform: translateY(-20px) scale(0.95); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

.guess-row {
    animation: slideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* 2. Upgrade f�r 'Partial' (Muster f�r bessere Sichtbarkeit) */
.partial { 
    background-color: #9b7a1a !important; 
    border-color: #9b7a1a; 
    color: #ffffff !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    ) !important;
}

/* 3. Upgrade f�r 'Correct' (Glow-Effekt) */
.correct { 
    background-color: #28a745 !important; 
    border-color: #34d058; 
    color: #ffffff !important;
    box-shadow: inset 0 0 15px rgba(40, 167, 69, 0.6), 0 0 10px rgba(52, 208, 88, 0.3);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* 4. Kleiner Hover-Effekt f�r die Boxen */
.box:hover {
    filter: brightness(1.2);
    transition: filter 0.2s;
}



.music-controls {
    position: fixed;
    top: var(--u20);
    left: var(--u20);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u8);
    background: rgba(10, 15, 25, 0.85);
    backdrop-filter: blur(10px);
    border: 1.5px solid #9b7a1a;
    border-radius: 12px;
    padding: var(--u12) var(--u15);
    box-shadow: 
        0 0 20px rgba(200, 170, 110, 0.2),
        inset 0 0 20px rgba(200, 170, 110, 0.05);
}

.music-buttons-row {
    display: flex;
    align-items: center;
    gap: var(--u8);
}

.music-controls .lol-button {
    position: static;
    min-width: auto;
    padding: var(--u8) var(--u12);
    font-size: 0.85rem;
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.3), rgba(200, 170, 110, 0.1));
    border: 1px solid #9b7a1a;
    color: #9b7a1a;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.music-controls .lol-button:hover {
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.5), rgba(200, 170, 110, 0.2));
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.4);
    transform: scale(1.05);
}

.music-controls .lol-button:active {
    transform: scale(0.95);
}

#music-loop-toggle {
    background: linear-gradient(135deg, rgba(139, 69, 255, 0.3), rgba(139, 69, 255, 0.1));
    border-color: #8b45ff;
    color: #8b45ff;
}

#music-loop-toggle:hover {
    background: linear-gradient(135deg, rgba(139, 69, 255, 0.5), rgba(139, 69, 255, 0.2));
    box-shadow: 0 0 10px rgba(139, 69, 255, 0.4);
}

#volume-slider {
    width: var(--u80);
    height: 4px;
    cursor: pointer;
    accent-color: #9b7a1a;
    background: linear-gradient(90deg, rgba(200, 170, 110, 0.2), rgba(200, 170, 110, 0.1));
    outline: none;
    vertical-align: middle;
    border-radius: 2px;
    border: 1px solid #9b7a1a;
    -webkit-appearance: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b7a1a, #a18448);
    cursor: pointer;
    border: 1px solid #785a28;
    box-shadow: 0 0 6px rgba(200, 170, 110, 0.4);
}

#volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b7a1a, #a18448);
    cursor: pointer;
    border: 1px solid #785a28;
    box-shadow: 0 0 6px rgba(200, 170, 110, 0.4);
}


/* Das Overlay, das alles �berdeckt */


/* Wenn das Spiel l�uft, blenden wir das Overlay aus */
.hidden-overlay {
    opacity: 0;
    pointer-events: none; /* Klicks gehen dann durch zum Spiel */
}



/* Neuer Button Style */
.primary-btn {
    background: linear-gradient(to bottom, #9b7a1a, #a18448);
    border: none;
    color: #071015;
    padding: 12px 18px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(200,170,110,0.6);
}

.lol-button {
    position: static;
}

.lol-button:hover {
    background: #9b7a1a;
    color: #0a1428;
}







.hardcore-hidden {
    background: radial-gradient(circle, #1a0033 0%, #050520 100%) !important;
    position: relative;
    overflow: hidden;
    color: #dfbfff !important;
    text-shadow: 0 0 10px #bc66ff;
    font-weight: bold;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    
    /* Zackiges Design */
    clip-path: polygon(
        12% 0%, 88% 0%, 100% 20%, 100% 80%, 
        88% 100%, 12% 100%, 0% 80%, 0% 20%
    );

    /* Stabiles Aufgl�hen ohne Springen */
    animation: abyss-glow 3s infinite ease-in-out;
    border: none !important;
}

/* Der diagonale Shining-Effekt - optimiert auf volle Weite */
.hardcore-hidden::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        135deg, 
        transparent 42%, 
        rgba(255, 255, 255, 0.5) 50%, 
        transparent 58%
    );
    /* L�uft jetzt diagonal komplett durch */
    animation: full-diagonal-sweep 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Der Feuer- und Energie-Effekt */
.hardcore-hidden::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Erzeugt ein inneres lila Feuer */
    box-shadow: 
        inset 0 0 20px #8a2be2,
        inset 0 0 40px #4b0082;
    z-index: 1;
    animation: flame-flicker 1.5s infinite alternate;
    pointer-events: none;
}

/* Animationen */

/* 1. Voller diagonaler Durchlauf */
@keyframes full-diagonal-sweep {
    0% {
        transform: translate(-30%, -30%);
    }
    100% {
        transform: translate(40%, 40%);
    }
}

/* 2. Sanftes Aufgl�hen der gesamten Box */
@keyframes abyss-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.5));
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(188, 102, 255, 0.8));
    }
}

/* 3. Feuer-Flackern (Schatten-Ansturm) */
@keyframes flame-flicker {
    0% { 
        opacity: 0.4;
        box-shadow: inset 0 0 15px #8a2be2;
    }
    100% { 
        opacity: 0.8;
        box-shadow: inset 0 5px 25px #bc66ff, inset 0 -5px 25px #4b0082;
    }
}


.box.faded-out {
    filter: grayscale(1) opacity(0.3) blur(2px);
    transition: all 0.8s ease;
    pointer-events: none;
}
























#music-loop-toggle {
    position: relative;
    padding-left: 35px; 
    transition: all 0.3s ease;
    border: 1px solid #9b7a1a;
    background: #1e2328;
    color: #f0e6d2;
    cursor: pointer;
    overflow: hidden;
}


#music-loop-toggle::before {
    content: "?"; 
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 1.2rem;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
    display: inline-block;
}

#music-loop-toggle.active-loop {
    border-color: #00ff00;
    color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

#music-loop-toggle.active-loop::before {
    transform: translateY(-50%) rotate(360deg);
    color: #00ff00;
}

/* Hover Effekt */
#music-loop-toggle:hover {
    background: #2a2f35;
    border-color: #f0e6d2;
}




.overlay {
    display: none; /* Standardm��ig unsichtbar */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(1, 10, 19, 0.95);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.overlay.active {
    display: flex; /* Nur sichtbar, wenn active-Klasse vorhanden */
}

.menu-container {
    text-align: center;
    padding: 40px;
    border: 2px solid #9b7a1a;
    background: rgba(1, 10, 19, 0.8);
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.2);
    min-width: 400px;
}

.menu-title {
    font-size: 3rem;
    color: #f0e6d2;
    letter-spacing: 8px;
    margin-bottom: 5px;
    text-shadow: 0 0 15px #c89b3c;
}

.menu-subtitle {
    color: #9b7a1a;
    margin-bottom: 40px;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.input-group { margin-bottom: 15px; }

.input-group input {
    background: #1e2328;
    border: 1px solid #5b5a56;
    color: #f0e6d2;
    padding: 12px;
    width: 100%;
    outline: none;
    transition: border 0.3s;
}

.input-group input:focus { border-color: #9b7a1a; }

.menu-btn {
    padding: 12px 25px;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.2s;
    margin: 5px;
    width: 180px;
}

.menu-btn.primary {
    background: #1e2328;
    border: 2px solid #9b7a1a;
    color: #9b7a1a;
}

.menu-btn.primary:hover {
    background: #9b7a1a;
    color: #1e2328;
}

.menu-btn.secondary {
    background: transparent;
    border: 1px solid #5b5a56;
    color: #a09b8c;
}

#main-menu-overlay {
    z-index: 4000;
}

#lobby-overlay {
    z-index: 3500;
}

#lobby-created-modal {
    z-index: 5000 !important;
}

#join-lobby-password-modal {
    z-index: 5000 !important;
}

#create-lobby-password-modal {
    z-index: 5000 !important;
}

#leave-lobby-confirm-modal {
    z-index: 5000 !important;
}

#leave-battle-confirm-modal {
    z-index: 5000 !important;
}

.menu-btn.secondary:hover { color: #f0e6d2; border-color: #f0e6d2; }

.hidden {
    display: none !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none; /* Das ist entscheidend! */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* Nur wenn die Klasse 'active' vorhanden ist, wird es angezeigt */
.overlay.active {
    display: flex;
}


/* ====================== LOBBY TABLE ====================== */
.lobby-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    color: #f0e6d2;
    font-size: 0.95rem;
}

.lobby-table th {
    background: rgba(200, 170, 110, 0.15);
    color: #9b7a1a;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 10px 8px;
    text-align: left;
    border-bottom: 2px solid #9b7a1a;
}

.lobby-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #3c3c41;
}

.lobby-table tr:hover {
    background: rgba(200, 170, 110, 0.08);
}

.host-row {
    background: rgba(200, 170, 110, 0.12) !important;
}

/* Host Crown */
.host-crown {
    color: #9b7a1a;
    margin-right: 6px;
    font-size: 1.1rem;
}

/* Host Transfer Button */
.host-transfer-btn {
    position: relative;
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.15) 0%, rgba(200, 170, 110, 0.05) 100%);
    color: #9b7a1a;
    border: 1.5px solid #9b7a1a;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.host-transfer-btn::before {
    content: "??";
    font-size: 0.9rem;
}

.host-transfer-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(200, 170, 110, 0.3), transparent);
    animation: hostButtonShine 2s infinite;
}

@keyframes hostButtonShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.host-transfer-btn:hover {
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.25) 0%, rgba(200, 170, 110, 0.15) 100%);
    color: #f0e6d2;
    border-color: #d4ad7b;
    box-shadow: 0 0 16px rgba(200, 170, 110, 0.35), inset 0 0 10px rgba(200, 170, 110, 0.1);
    transform: translateY(-2px);
}

.host-transfer-btn:active {
    transform: translateY(0);
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.2), inset 0 0 10px rgba(200, 170, 110, 0.15);
}

/* Small Host Transfer Button (unter Namen) */
.host-transfer-btn-small {
    position: relative;
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.12) 0%, rgba(200, 170, 110, 0.03) 100%);
    color: #9b7a1a;
    border: 1px solid rgba(200, 170, 110, 0.6);
    padding: 3px 10px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    margin-top: 4px;
    display: inline-block;
    overflow: hidden;
}

.host-transfer-btn-small::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(200, 170, 110, 0.2), transparent);
    animation: hostButtonShineSmall 3s infinite;
}

@keyframes hostButtonShineSmall {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.host-transfer-btn-small:hover {
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.18) 0%, rgba(200, 170, 110, 0.08) 100%);
    color: #d4ad7b;
    border-color: #9b7a1a;
    box-shadow: 0 0 8px rgba(200, 170, 110, 0.25);
}

.host-transfer-btn-small:active {
    box-shadow: 0 0 4px rgba(200, 170, 110, 0.15);
}



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

/* Basis f�r den Rank-Text */
.player-rank {
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.5); 
}


/* ====================== RANK GRADIENTS ====================== */

/* === TOP RANKS - Stark mit Shimmer === */
span[data-rank="Challenger"],
span[data-rank="Grandmaster"],
span[data-rank="Master"],
span[data-rank="Diamond"] {
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: shimmer 3s infinite linear !important;
    display: inline-block;
    font-weight: 700;
}

/* Individuelle starke Verl�ufe f�r die Elite */
span[data-rank="Challenger"]  { 
    background-image: linear-gradient(90deg, #ff8800, #ffffff, #ff8800) !important; 
    background-size: 200% auto !important; 
}

span[data-rank="Grandmaster"] { 
    background-image: linear-gradient(90deg, #ff4444, #ffffff, #ff4444) !important; 
    background-size: 200% auto !important; 
}

span[data-rank="Master"] { 
    background-image: linear-gradient(90deg, #c026d3, #ffffff, #c026d3) !important; 
    background-size: 200% auto !important; 
}

span[data-rank="Diamond"] { 
    background-image: linear-gradient(90deg, #00ccff, #ffffff, #00ccff) !important; 
    background-size: 200% auto !important; 
}

/* === MITTLERE RANKS - Leichte, elegante Verl�ufe (ohne starkes Shimmer) === */
span[data-rank="Platinum"],
span[data-rank="Gold"],
span[data-rank="Silver"] {
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 600;
}

/* Platinum - k�hler, edler Verlauf */
span[data-rank="Platinum"] {
    background-image: linear-gradient(90deg, #a0d8ff, #e0f0ff, #a0d8ff) !important;
    background-size: 180% auto;
    animation: subtleShimmer 6s infinite linear;
}

/* Gold - warmer, aber dezenter Glanz */
span[data-rank="Gold"] {
    background-image: linear-gradient(90deg, #f0d070, #ffe599, #f0d070) !important;
    background-size: 180% auto;
    animation: subtleShimmer 5s infinite linear;
}

/* Silver - st�rkerer, metallischer Glanz (wie gew�nscht) */
span[data-rank="Silver"] {
    background-image: linear-gradient(90deg, #c0c0c0, #f0f0f0, #ffffff, #f0f0f0, #c0c0c0) !important;
    background-size: 220% auto;
    animation: silverShimmer 4s infinite linear;
}

/* === NIEDRIGE RANKS - Einfache Farbe (kein Verlauf) === */
span[data-rank="Bronze"]   { color: #cd7f32; }
span[data-rank="Iron"]     { color: #8c8c8c; }
span[data-rank="Unranked"] { color: #777777; }

/* Sanfte Shimmer-Animation f�r die mittleren R�nge */
@keyframes subtleShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Starker Shimmer f�r Top-R�nge */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Leichter Shimmer f�r Platinum */
@keyframes subtleShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Kr�ftiger Gold-Shimmer */
@keyframes goldShimmer {
    0%   { background-position: -180% center; }
    100% { background-position: 180% center; }
}

/* Kr�ftiger Silver-Shimmer */
@keyframes silverShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}




/* Allgemeine Formatierung */
.lobby-table td:nth-child(3) {
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.3); /* Macht den Text lesbarer */
}

/* Host Highlight */
.host-row td:nth-child(3) {
    color: #9b7a1a;
}



/* Erweitert das Lobby-Layout */
#lobby-flex-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}

#lobby-flex-wrapper #chat-container {
    height: 550px; /* In der Lobby darf er ruhig h�her sein */
}

/* Optional: Damit die Lobby-Box nicht zu schmal wird */
.lobby-content {
    min-width: 450px;
}


#start-quest-btn:disabled {
    background: #333 !important;
    border-color: #666 !important;
    color: #888 !important;
    cursor: not-allowed;
    box-shadow: none;
}


/* ==================== LOBBY DESIGN ==================== */


/* ==================== NEW LOBBY LAYOUT ==================== */
#lobby-overlay {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px 20px;
    min-height: 100vh;
}

.lobby-container {
    display: flex;
    gap: 20px;
    max-width: 1600px;
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* LEFT - SETTINGS */
.lobby-settings-panel {
    width: 300px;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9) 0%, rgba(20, 25, 40, 0.9) 100%);
    border: 2px solid #9b7a1a;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.2), inset 0 0 20px rgba(200, 170, 110, 0.08);
    height: fit-content;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lobby-settings-panel:hover {
    box-shadow: 0 0 40px rgba(200, 170, 110, 0.3), inset 0 0 25px rgba(200, 170, 110, 0.12);
    transform: translateY(-2px);
}

.lobby-settings-panel h3 {
    color: #9b7a1a;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* CENTER - MAIN LOBBY */
.lobby-main-panel {
    flex: 1;
    min-width: 400px;
    max-width: 600px;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9) 0%, rgba(20, 25, 40, 0.9) 100%);
    border: 2px solid #9b7a1a;
    border-radius: 12px;
    padding: 30px 40px;
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.2), inset 0 0 20px rgba(200, 170, 110, 0.08);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lobby-main-panel:hover {
    box-shadow: 0 0 40px rgba(200, 170, 110, 0.3), inset 0 0 25px rgba(200, 170, 110, 0.12);
    transform: translateY(-2px);
}







.fellows-section h3 {
    color: #9b7a1a;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.player-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.player-card {
    background: rgba(30, 35, 45, 0.9);
    border: 1px solid #3c3c41;
    border-radius: 0;                 /* kantig */
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.player-card.host {
    border-color: #9b7a1a;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.4);
}

.player-card.ready {
    border-color: #00ff9d;
}

.lobby-controls {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.lol-btn {
    padding: 14px 28px;
    font-size: 1.05rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #9b7a1a;
    background: transparent;
    color: #9b7a1a;
    cursor: pointer;
    transition: all 0.3s;
}

.lol-btn.primary {
    background: #9b7a1a;
    color: #0a1428;
}

.lol-btn.secondary {
    background: #1e2328;
    border-color: #9b7a1a;
}

.lol-btn:hover {    
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.6);
}

/* Settings Overlay */
.settings-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 15, 25, 0.98);
    border: 2px solid #9b7a1a;
    border-radius: 0;                 /* kantig */
    padding: 30px;
    width: 420px;
    z-index: 3000;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.5);
}

.settings-content h3 {
    color: #9b7a1a;
    text-align: center;
    margin-bottom: 25px;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.full-width { grid-column: span 2; }



/* Make sure options button is visible */
#options-btn {
    display: inline-block;
}

#options-btn.hidden {
    display: none !important;
}

/* Better lobby layout */
#lobby-overlay {
    gap: 30px;
    padding: 60px 20px 20px;
}


/* ==================== SETTINGS PANEL ==================== */
.lobby-settings-panel {
    width: 320px;
    background: rgba(15, 20, 30, 0.95);
    border: 2px solid #9b7a1a;
    padding: 25px 30px;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.25);
    height: fit-content;
}

.lobby-settings-panel h3 {
    color: #9b7a1a;
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.4rem;
    letter-spacing: 1px;
}

.settings-artifact {
    margin-bottom: 20px;
}

.settings-artifact label {
    display: block;
    color: #9b7a1a;
    margin-bottom: 8px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.settings-artifact select,
.settings-artifact input[type="number"] {
    width: 100%;
    background: #1e2328;
    border: 2px solid #3c3c41;
    color: #f0e6d2;
    padding: 12px 14px;
    font-size: 1.05rem;
    min-height: 48px;
    box-sizing: border-box;
}

.settings-artifact select:focus,
.settings-artifact input:focus {
    border-color: #9b7a1a;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.4);
    outline: none;
}

/* Hardcore */
.hardcore-toggle {
    margin-top: 10px;
    padding: 12px 0;
    border-top: 1px solid #3c3c41;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 1rem;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #9b7a1a;
}

.hardcore-toggle small {
    display: block;
    margin-left: 30px;
    color: #a09b8c;
    font-size: 0.85rem;
}

.host-only-note {
    display: block;
    text-align: center;
    color: #a09b8c;
    font-size: 0.8rem;
    margin-top: 20px;
}




/* ==================== HARDCORE INFO ICON ==================== */
/* ==================== HARDCORE INFO BUTTON ==================== */
.info-btn {
    background: #1e2328;
    color: #9b7a1a;
    border: 2px solid #9b7a1a;
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-weight: 600;
}

.info-btn:hover {
    background: #9b7a1a;
    color: #071015;
    transform: translateY(-2px);
    box-shadow: 0 0 5px rgba(200, 170, 110, 0.6);
}

.info-btn span {
    font-size: 1.1rem;
    font-weight: bold;
}

/* ==================== HARDCORE MODAL ==================== */
#hardcore-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(1, 10, 19, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#hardcore-modal.active {
    display: flex;
}

.hardcore-modal-content {
    background: #0a1428;
    border: 3px solid #9b7a1a;
    border-radius: 8px;
    max-width: 460px;
    width: 90%;
    padding: 35px 40px;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.7);
    text-align: center;
    position: relative;
}

.hardcore-modal-content h2 {
    color: #9b7a1a;
    margin: 0 0 25px 0;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hardcore-modal-content ul {
    text-align: left;
    line-height: 1.8;
    font-size: 1.05rem;
    padding-left: 20px;
    margin: 20px 0;
}

.hardcore-modal-content ul li {
    margin-bottom: 12px;
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    color: #9b7a1a;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px 12px;
}

.close-modal-btn:hover {
    color: #ff4655;
    transform: scale(1.2);
}


/* ==================== KLEINER INFO CIRCLE ==================== */
.info-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    background: #1e2328;
    color: #9b7a1a;
    font-size: 0.95rem;
    font-weight: 900;
    border: 2px solid #9b7a1a;
    border-radius: 50%;
    margin-left: 9px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 0 6px rgba(200, 170, 110, 0.3);
    user-select: none;
    position: relative;
    top: -1px;
}

.info-circle:hover {
    background: #9b7a1a;
    color: #071015;
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.7);
}

.info-circle:active {
    transform: scale(0.95);
}

/* Nocturne Trigger Effect */
@keyframes pulse {
    0%, 100% { opacity: 0.7; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}


.hardcore-hidden.nocturne-permanent {
    background: radial-gradient(circle, #2a0044 0%, #0f001f 100%) !important;
    box-shadow: inset 0 0 18px #8800cc;
    animation: abyss-glow 2.8s infinite ease-in-out;
}


#auth-message {
    transition: all 0.3s ease;
    padding: 6px 0;
}

/* Logout Button - edel & thematisch */
.menu-buttons .logout-btn {
    background: #1e2328;
    border: 2px solid #6b6b6b;
    color: #b8b8b8;
    width: 220px;
    margin-top: 12px;
}

.menu-buttons .logout-btn:hover {
    background: #2a2f35;
    border-color: #9b7a1a;
    color: #f0e6d2;
}




.menu-buttons .discord-menu-btn:hover {
    background: #5865F2;
    color: white;
    border-color: #5865F2;

}

/* Logout Button - dezent mit etwas Abstand */
.menu-buttons .logout-btn {
    background: #2a2f35;
    border: 1px solid #8a8a8a;
    color: #d0d0d0;
    margin-top: 90px !important;   /* Extra Abstand zum Discord Button */
}

.menu-buttons .logout-btn:hover {
    background: #3c3c41;
    border-color: #9b7a1a;
    color: #9b7a1a;

}


/* Leave Turn Button */
.leave-turn-btn {
    margin-top: 20px;
    width: 100%;
    padding: 10px 16px;
    background: #2a2f35;
    border: 1px solid #8a8a8a;
    color: #d0d0d0;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leave-turn-btn:hover {
    background: #3c3c41;
    border-color: #9b7a1a;
    color: #9b7a1a;
}

.leave-turn-btn:active {
    transform: scale(0.95);
}

/* Copy Room Button */
#copy-room-btn.small {
    padding: 8px 14px;
    font-size: 0.85rem;
    min-width: 70px;
}


/* Player Order Design */
.order-player {
    background: rgba(200,170,110,0.1);
    border: 1px solid #9b7a1a;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.order-player.active-turn {
    background: #9b7a1a;
    color: #071015;
    font-weight: bold;
    box-shadow: 0 0 12px #9b7a1a;
    animation: pulse 1.5s infinite alternate;
}


/* ====================== CLEAN HEXTECH BACKGROUND (nur Glow) ====================== */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -4;
    background: 
        radial-gradient(circle at 30% 35%, rgba(200, 170, 110, 0.28) 0%, transparent 50%),
        radial-gradient(circle at 75% 65%, rgba(0, 255, 220, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(155, 89, 255, 0.10) 0%, transparent 60%),
        #01050f;
    animation: softMiddle-earthPulse 16s ease-in-out infinite;
    pointer-events: none;
}

/* Leichte zweite Glow-Schicht f�r mehr Tiefe */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -5;
    background: 
        radial-gradient(circle at 20% 70%, rgba(200, 170, 110, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(0, 255, 220, 0.08) 0%, transparent 40%);
    pointer-events: none;
    animation: softMiddle-earthPulse 22s ease-in-out infinite reverse;
}

/* ====================== ANIMATION ====================== */
@keyframes softMiddle-earthPulse {
    0%, 100% { 
        opacity: 0.85; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.06); 
    }
}



/* Lobby Browser Grid */
.lobbies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 8px;
}

.filter-select {
    background: #1e2328;
    border: 1px solid #3a3f47;
    color: #9b7a1a;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-select:hover {
    border-color: #9b7a1a;
}

.filter-select:focus {
    outline: none;
    border-color: #9b7a1a;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.3);
}

.lobby-entry {
    background: rgba(30, 35, 45, 0.85);
    border: 1px solid #9b7a1a22;
    border-radius: 12px;
    padding: 16px 18px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.lobby-entry:hover {
    background: rgba(60, 65, 80, 0.9);
    border-color: #9b7a1a;
    box-shadow: 0 10px 25px rgba(200, 170, 110, 0.2);
}

.lobby-entry strong {
    color: #f0e6d2;
}

.lobby-entry small {
    color: #a8a8a8;
    display: block;
    margin-top: 6px;
}



.join-modal-panel {
    background: rgba(15, 20, 32, 0.98);
    border: 1px solid #9b7a1a44;
    border-radius: 16px;
    padding: 40px 50px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.25),
                inset 0 0 30px rgba(0, 0, 0, 0.6);
    position: relative;
}

.join-modal-content {
    text-align: center;
}

.join-modal-content h2 {
    font-size: 2.1rem;
    margin: 0 0 8px 0;
    color: #f0e6d2;
}

.subtitle {
    color: #a8a8a8;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.lobby-code-input {
    width: 100%;
    background: #0f141f;
    border: 2px solid #3a4455;
    color: #f0e6d2;
    font-size: 1.45rem;
    padding: 16px 20px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 12px;
    letter-spacing: 2px;
    font-family: monospace;
}

.lobby-code-input:focus {
    border-color: #9b7a1a;
    box-shadow: 0 0 0 4px rgba(200, 170, 110, 0.2);
    outline: none;
}

.error-message {
    min-height: 26px;
    color: #ff4655;
    font-weight: bold;
    margin: 8px 0 18px 0;
}

.join-buttons {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.join-primary-btn {
    flex: 1;
    padding: 14px 24px;
    background: transparent;
    border: 2px solid #9b7a1a;
    color: #9b7a1a;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.join-primary-btn:hover {
    background: #9b7a1a;
    color: #071015;
}

.join-secondary-btn {
    flex: 1;
    padding: 14px 24px;
    background: #1f252f;
    border: 1px solid #555;
    color: #bbb;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
}

.join-secondary-btn:hover {
    background: #2a323d;
    color: #f0e6d2;
}

.leave-confirm-btn:hover {
    background: #dd484f;
    color: #f0e6d2;
}



/* ====================== NEUES LOGIN DESIGN ====================== */
.epic-login-container {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 60px auto;
    padding: 55px 45px 50px;
    background: rgba(8, 12, 22, 0.97);
    border: 1px solid rgba(200, 170, 110, 0.25);
    border-radius: 16px;
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.8),
        inset 0 0 80px rgba(1, 10, 19, 0.6);
    overflow: hidden;
    z-index: 2;
}

/* Subtiler Rift-Hintergrund (weniger grell, aber wow) */
.login-rift-bg {
    position: absolute;
    inset: -50%;
    background: 
        radial-gradient(circle at 30% 40%, rgba(200, 170, 110, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 75% 65%, rgba(139, 69, 255, 0.12) 0%, transparent 60%);
    animation: softRiftPulse 18s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes softRiftPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.04); }
}

/* Titel */
.epic-title {
    font-size: 4.2rem;
    font-weight: 900;
    letter-spacing: 4px;
    margin: 0 0 4px 0;
    background: linear-gradient(90deg, #f0e6d2, #e8c670, #f0e6d2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 35px rgba(200, 170, 110, 0.4);
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.epic-subtitle {
    display: block;
    font-size: 1.35rem;
    letter-spacing: 8px;
    color: #cec4a7;
    font-weight: 600;
    margin-top: -12px;
    text-shadow: 0 0 15px rgba(200, 170, 110, 0.3);
}

.login-welcome {
    color: #b8b8b8;
    font-size: 1.4rem;
    margin: 30px 0 40px 0;
    font-weight: 400;
}

/* Auth Panel */
.auth-panel {
    background: rgba(15, 20, 32, 0.75);
    padding: 35px 30px;
    border-radius: 14px;
    border: 1px solid rgba(200, 170, 110, 0.2);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.input-group label {
    display: block;
    color: #9b7a1a;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.epic-input {
    width: 100%;
    background: #0a0f1a;
    border: 2px solid #334155;
    color: #f0e6d2;
    padding: 5px 20px;
    font-size: 1.2rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    margin-right:20px;
}

.epic-input:focus {
    border-color: #9b7a1a;
    box-shadow: 0 0 0 4px rgba(200, 170, 110, 0.25);
    outline: none;
}

/* Buttons */
.login-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
}

.epic-login-btn {
    background: linear-gradient(90deg, #9b7a1a, #f0d48c, #9b7a1a);
    background-size: 200% auto;
    color: #071015;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.epic-login-btn:hover {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(200, 170, 110, 0.5);
}

.epic-register-btn {
    background: transparent;
    border: 2px solid #555;
    color: #ccc;
    padding: 16px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.epic-register-btn:hover {
    border-color: #9b7a1a;
    color: #f0e6d2;
    background: rgba(200, 170, 110, 0.08);
}

/* Footer */
.login-footer {
    margin-top: 35px;
    text-align: center;
}

.discord-link {
    background: #5865F2;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

/* ==================== REGISTER PANEL STYLES ==================== */

#register-panel {
    animation: slideInRight 0.5s ease;
}

#login-panel {
    animation: slideInLeft 0.5s ease;
}

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

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

.password-strength {
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.strength-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.strength-bar-fill {
    height: 100%;
    width: 0%;
    background: #ff4655;
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* Register-specific input styling */
#register-user,
#register-pass,
#register-pass-confirm {
    font-family: inherit;
}

.discord-link:hover {
    background: #4752c4;
    transform: scale(1.05);
}

/* Error Message */
.error-message {
    min-height: 28px;
    text-align: center;
    font-weight: 600;
}
























/* MAIN MENU */

/* Hauptaktionen besonders gro� und auff�llig machen */
.modern-menu-container {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 40px auto;
    padding: 40px 30px;
    background: rgba(10, 15, 25, 0.95);
    border: 1px solid #9b7a1a33;
    border-radius: 16px;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.25);
    overflow: hidden;
}

.menu-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(120,80,40,0.08), transparent);
    pointer-events: none;
    z-index: 1;
}

.menu-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.quest-title {
    font-size: 4.2rem;
    font-weight: 900;
    letter-spacing: 4px;
    margin: 0 0 8px 0;
    background: linear-gradient(90deg, #f0e6d2, #9b7a1a, #f0e6d2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    display: block;
    font-size: 1.1rem;
    letter-spacing: 6px;
    color: #9b7a1a;
    margin-top: -10px;
}

.welcome {
    color: #a8a8a8;
    font-size: 1.25rem;
    margin-bottom: 40px;
}

.username {
    color: #9b7a1a;
    font-weight: bold;
}

/* Hauptbuttons */
.main-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 30px 0 40px 0;
}

.main-btn {
    padding: 22px 40px;
    font-size: 1.45rem;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: none;
    cursor: pointer;
}

.host-btn {
    background: linear-gradient(90deg, #9b7a1a, #e8d49e);
    color: #071015;
}

.join-btn {
    background: transparent;
    border: 2px solid #9b7a1a;
    color: #f0e6d2;
}

.main-btn:hover {
    transform:  scale(1.01);
    box-shadow: 0 5px 15px rgba(200, 170, 110, 0.4);
}

/* Sekund�re Buttons */
.secondary-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.secondary-btn {
    padding: 14px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #ffffff22;
    color: #ddd;
    border-radius: 10px;
    transition: all 0.2s;
}

.secondary-btn:hover {
    background: rgba(200, 170, 110, 0.15);
    border-color: #9b7a1a;
    color: #f0e6d2;
}

/* Footer */
.menu-footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.footer-btn {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid #555;
    color: #aaa;
    border-radius: 8px;
}

.footer-btn:hover {
    border-color: #9b7a1a;
    color: #f0e6d2;
}

.copyright-footer {
    width: 100%;
    background: linear-gradient(180deg, rgba(10, 14, 39, 0.5) 0%, rgba(10, 14, 39, 0.95) 100%);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    border-top: 1px solid #3a3f47;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    padding: 12px 0;
}

.copyright-footer p {
    line-height: 1.5;
    margin: 0;
}

.copyright-footer strong {
    color: #9b7a1a;
    text-shadow: 0 0 3px rgba(200, 170, 110, 0.3);
}



/* ====================== NEUES LOBBY DESIGN (2026) ====================== */
.lobby-container-modern {
    display: flex;
    gap: 24px;
    max-width: 1380px;
    width: 100%;
    margin: 40px auto;
    padding: 20px;
}

.lobby-settings-panel-modern,
.lobby-main-panel-modern,
.lobby-chat-modern {
    background: rgba(10, 14, 22, 0.96);
    border: 1.5px solid #9b7a1a;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
}

/* Settings Panel */
.lobby-settings-panel-modern {
    width: 300px;
    padding: 28px 24px;
    height: fit-content;
}

.lobby-settings-panel-modern h3 {
    color: #9b7a1a;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.35rem;
    letter-spacing: 2px;
}

.settings-artifact {
    margin-bottom: 22px;
}

.settings-artifact label {
    display: block;
    color: #9b7a1a;
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.settings-artifact select,
.settings-artifact input[type="number"] {
    width: 100%;
    background: #1e2328;
    border: 2px solid #334155;
    color: #f0e6d2;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 1.05rem;
    transition: all 0.2s;
}

.settings-artifact select:focus,
.settings-artifact input:focus {
    border-color: #9b7a1a;
    box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.25);
    outline: none;
}

.settings-artifact select:disabled,
.settings-artifact input:disabled {
    background: #0a0e16;
    border-color: #555;
    color: #888;
    cursor: not-allowed;
    opacity: 0.5;
}

.settings-artifact select:disabled:focus,
.settings-artifact input:disabled:focus {
    box-shadow: none;
    border-color: #555;
}

.hardcore-toggle input[type="checkbox"]:disabled,
.hardcore-toggle input[type="checkbox"]:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Main Panel */
.lobby-main-panel-modern {
    flex: 1;
    max-width: 520px;
    padding: 30px 40px;
    text-align: center;
}

.lobby-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #9b7a1a33;
}

.lobby-header-modern h1 {
    color: #f0e6d2;
    margin: 0;
    font-size: 2.4rem;
    letter-spacing: 3px;
}

.room-code-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.room-code-modern {
    background: #1e2328;
    border: 2px solid #9b7a1a;
    color: #9b7a1a;
    padding: 10px 18px;
    border-radius: 50px;
    font-family: monospace;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.copy-btn-modern {
    background: #9b7a1a;
    color: #071015;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn-modern:hover {
    background: #f0d48c;
    transform: scale(1.05);
}

/* Player Grid */
.player-grid-modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 30px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.player-card {
    background: rgba(30, 35, 45, 0.9);
    border: 1.5px solid #3c3c41;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.player-card.host {
    border-color: #9b7a1a;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.4);
}

.player-card.ready {
    border-color: #00ff9d;
    background: rgba(0, 255, 157, 0.08);
}

/* Controls */
.lobby-controls-modern {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.ready-btn-modern {
    background: #1e2328;
    border: 2px solid #9b7a1a;
    color: #9b7a1a;
    padding: 16px 42px;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
}

.ready-btn-modern:hover {
    background: #9b7a1a;
    color: #071015;
}

.start-quest-btn-modern {
    background: linear-gradient(90deg, #9b7a1a, #f0d48c);
    color: #071015;
    border: none;
    padding: 16px 52px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
}



/* Leave Button */
.leave-lobby-btn-modern {
    width: 100%;
    margin-top: 30px;
    padding: 14px;
    background: #2a2f35;
    border: 1.5px solid #8a8a8a;
    color: #f0e6d2;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.leave-lobby-btn-modern:hover {
    background: #ff4655;
    border-color: #ff4655;
    color: white;
}




/* ====================== NEUES LOBBY DESIGN - �berarbeitete Version ====================== */
.lobby-container-modern {
    display: flex;
    gap: 22px;
    max-width: 1380px;
    width: 100%;
    margin: 40px auto;
    padding: 20px;
}



/* Settings Panel - bleibt gleich */
.lobby-settings-panel-modern {
    width: 300px;
    padding: 28px 24px;
    height: fit-content;
}

/* Main Panel - bleibt gleich */
.lobby-main-panel-modern {
    flex: 1;
    max-width: 520px;
    padding: 30px 40px;
    text-align: center;
}


/** NEU CHAT **/

.chat-entry strong {
    color: #9b7a1a;
    font-weight: 600;
}

.chat-entry.system-msg {
    background: rgba(200, 170, 110, 0.15);
    color: #f0e6d2;
    font-style: italic;
}

/* Chat Input */

#chat-input {
    width: 100%;
    background: #0a0f1a;
    border: 1.5px solid #334155;
    color: #f0e6d2;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

#chat-input::placeholder {
    color: #6b6e77;
}

#chat-input:focus {
    border-color: #9b7a1a;
    box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.15);
    outline: none;
}

.chat-entry strong[style*="c8aa6e"] {
    color: #d4ad7b !important;
}





/* ====================== ONLINE COUNTER ====================== */
.online-counter {
    position: fixed;
    top: 22px;
    right: 30px;
    z-index: 9999;
    background: rgba(10, 14, 22, 0.95);
    border: 1px solid #9b7a1a;
    border-radius: 30px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #9b7a1a;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

.online-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #00ff9d;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff9d;
    animation: onlinePulse 2s infinite;
}

@keyframes onlinePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ====================== PING ANZEIGE ====================== */
.player-ping {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 12px;
    display: inline-block;
    min-width: 52px;
    text-align: center;
}

.player-ping {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #334155;
}

.player-ping[style*="00ff9d"] { border-color: #00ff9d33; }
.player-ping[style*="ffcc00"] { border-color: #ffcc0033; }
.player-ping[style*="ff4655"] { border-color: #ff465533; }



/* ====================== PLAYER STATS MODAL (Modern 2026 Theme) ====================== */
#player-stats-modal {
    z-index: 100000 !important;
    background: rgba(1, 10, 19, 0.96);
    backdrop-filter: blur(8px);
}

.stats-modal {
    position: relative;
    background: rgba(10, 15, 25, 0.98);
    border: 2px solid #9b7a1a;
    padding: 32px 0;
    max-width: 980px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 0 10px rgba(200, 170, 110, 0.35),
        inset 0 0 60px rgba(1, 10, 19, 0.6);
    display: flex;
    flex-direction: column;
}

/* Subtiler Hintergrund-Glow */
.stats-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(200, 170, 110, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(139, 69, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}

/* Close Button */
.close-modal-btn {
    position: absolute;
    top: 18px;
    right: 22px;
    background: transparent;
    border: none;
    color: #9b7a1a;
    font-size: 2.2rem;
    font-weight: 300;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.close-modal-btn:hover {
    color: #ff4655;
    transform: scale(1.15);
}

/* Header */
#stats-header {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(200, 170, 110, 0.2);
}

#stats-player-name {
    font-size: 2.1rem;
    margin: 0 0 12px 0;
    color: #f0e6d2;
    letter-spacing: 2px;
}

.rank-and-points {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.rank-badge {
    background: rgba(30, 35, 45, 0.9);
    border: 2px solid #9b7a1a;
    padding: 10px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.total-points {
    background: rgba(30, 35, 45, 0.9);
    border: 2px solid #9b7a1a;
    padding: 10px 24px;
    border-radius: 50px;
    text-align: center;
}

.points-label {
    font-size: 0.8rem;
    color: #a8a8a8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.points-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: #9b7a1a;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 10px;
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-artifact {
    background: rgba(25, 30, 40, 0.85);
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.25s ease;
    text-align: center;
}

.stat-artifact:hover {
    border-color: #9b7a1a;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(200, 170, 110, 0.15);
}

.stat-label {
    display: block;
    color: #a09b8c;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 1.35rem;
    font-weight: 600;
    color: #f0e6d2;
}

/* Rank Farben (gleiche wie im Rest des Spiels) */
.player-rank[data-rank="Challenger"]  { color: #ff8800; text-shadow: 0 0 10px #ff8800; }
.player-rank[data-rank="Grandmaster"] { color: #ff4444; text-shadow: 0 0 10px #ff4444; }
.player-rank[data-rank="Master"]      { color: #9c3794; text-shadow: 0 0 10px #9c3794; }
.player-rank[data-rank="Diamond"]     { color: #00ccff; text-shadow: 0 0 10px #00ccff; }
.player-rank[data-rank="Platinum"]    { color: #a0a0ff; }
.player-rank[data-rank="Gold"]        { color: #ffd700; }

/* ====================== STATS MODAL REDESIGN ====================== */

/* Header */
#stats-header {
    text-align: center;
    padding: 32px 45px;
    margin-bottom: 0;
    border-bottom: 2px solid rgba(200, 170, 110, 0.25);
    background: rgba(200, 170, 110, 0.03);
}

#stats-player-name {
    font-size: 2.2rem;
    margin: 0 0 16px 0;
    color: #f0e6d2;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.rank-and-points {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.rank-badge {
    background: rgba(30, 35, 45, 0.9);
    border: 2px solid #9b7a1a;
    padding: 12px 26px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(200, 170, 110, 0.1);
}

.total-points {
    background: rgba(30, 35, 45, 0.9);
    border: 2px solid #9b7a1a;
    padding: 12px 28px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(200, 170, 110, 0.1);
}

.points-label {
    font-size: 0.8rem;
    color: #a8a8a8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.points-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: #9b7a1a;
    display: block;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.2);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    padding: 32px 45px;
    background: rgba(10, 14, 22, 0.5);
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-artifact {
    background: linear-gradient(135deg, rgba(25, 30, 40, 0.6) 0%, rgba(20, 25, 35, 0.8) 100%);
    border: 1px solid rgba(200, 170, 110, 0.15);
    border-radius: 10px;
    padding: 18px 20px;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-artifact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.stat-artifact:hover {
    border-color: #9b7a1a;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(200, 170, 110, 0.2);
    background: linear-gradient(135deg, rgba(25, 30, 40, 0.9) 0%, rgba(20, 25, 35, 1) 100%);
}

.stat-artifact:hover::before {
    opacity: 1;
}

.stat-label {
    display: block;
    color: #a09b8c;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d4ad7b;
    text-shadow: 0 2px 8px rgba(200, 170, 110, 0.15);
}

/* Quest History Section */
.stats-quest-history {
    padding: 32px 45px;
    border-top: 2px solid rgba(200, 170, 110, 0.25);
    background: rgba(200, 170, 110, 0.02);
}

.stats-quest-history h3 {
    color: #9b7a1a;
    font-size: 1.2rem;
    margin: 0 0 18px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-quest-history h3::before {
    content: "??";
    font-size: 1.4rem;
}

#quest-history-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 8px;
}

#quest-history-container::-webkit-scrollbar {
    width: 8px;
}

#quest-history-container::-webkit-scrollbar-track {
    background: rgba(200, 170, 110, 0.1);
    border-radius: 4px;
}

#quest-history-container::-webkit-scrollbar-thumb {
    background: #9b7a1a;
    border-radius: 4px;
}

#quest-history-container::-webkit-scrollbar-thumb:hover {
    background: #d4ad7b;
}



/* ====================== GUESS INPUT AREA ====================== */
.input-area {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 25px auto 20px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.95) 0%, rgba(20, 25, 40, 0.95) 100%);
    border-radius: 8px;
}

.search-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
    z-index: 20;
}

#hero-input {
    width: 100%;
    background: #0a1428;
    border: 2px solid #9b7a1a;
    color: #f0e6d2;
    padding: 14px 18px;
    font-size: 1.08rem;
    border-radius: 8px;
    font-family: 'Beaufort for LoL', serif;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

#hero-input:focus {
    outline: none;
    border-color: #f0d48c;
    box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.3),
                inset 0 0 12px rgba(240, 212, 140, 0.2);
    background: #0f1b2e;
}

#hero-input::placeholder {
    color: #7a8a9f;
}

/* ==================== GUESS BUTTON ==================== */
#guess-btn {
    background: linear-gradient(to bottom, #e8c670, #9b7a1a, #a18448);
    border: 2px solid #785a28;
    color: #071015;
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 115px;
    margin-left: 50px;
}

#guess-btn:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 8px rgba(200, 170, 110, 0.5);
    filter: brightness(1.15);
}

#guess-btn:active {
    transform: translateY(1px);
}

/* Suchergebnisse */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0a1428;
    border: 2px solid #9b7a1a;
    border-top: 1px solid #9b7a1a;
    border-radius: 0 0 8px 8px;
    max-height: 150px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    z-index: 21;
}



/* ====================== SPECTATOR MODE ====================== */
.player-card.is-spectator {
    opacity: 0.75;
    border-color: #666;
    background: rgba(40, 40, 45, 0.6);
    position: relative;
}

.player-card.is-spectator::after {
    content: "SPECTATOR";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.65rem;
    color: #888;
    font-weight: bold;
    letter-spacing: 1px;
}

.spectator-mode-banner {
    background: linear-gradient(90deg, #3a3a50, #1e1e2e);
    color: #a0a0ff;
    text-align: center;
    padding: 8px 0;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 2px solid #555;
    margin-bottom: 15px;
}

.spectator-guess {
    opacity: 0.65;
    filter: grayscale(40%);
}

#spectator-info {
    font-size: 0.85rem;
    color: #888;
    text-align: center;
    margin: 8px 0 15px 0;
    font-style: italic;
}


/* ====================== SPECTATOR IMPROVEMENTS ====================== */
.spectator-mode-banner {
    background: linear-gradient(90deg, #2a2a40, #1a1a2a);
    color: #88aaff;
    text-align: center;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 2px solid #5566aa;
    margin-bottom: 12px;
    border-radius: 4px;
}

#glory-list li.is-spectator {
    opacity: 0.65;
    font-style: italic;
}

#glory-list li.is-spectator::after {
    content: " ???";
    color: #88aaff;
}

.player-card.is-spectator {
    border-left: 4px solid #6677cc;
}

#glory-list li.is-spectator {
    opacity: 0.7;
    font-style: italic;
}

#glory-list li.is-spectator::after {
    content: "???";
    color: #88aaff;
}



/* ====================== LEADERBOARD TABLE ====================== */
.hall-of-heroes-modal-content {
    background: rgba(11, 15, 28, 0.98);
    border: 2px solid #9b7a1a;
    border-radius: 20px;
    width: 100%;
    max-width: 1100px;
    padding: 40px 45px;
    box-shadow: 
        0 0 60px rgba(200, 170, 110, 0.25),
        inset 0 0 80px rgba(200, 170, 110, 0.05);
    backdrop-filter: blur(12px);
}

.hall-of-heroes-table-container {
    max-height: 540px;
    overflow-y: auto;
    margin: 28px 0 10px;
    border-radius: 16px;
    border: 1px solid rgba(200, 170, 110, 0.15);
    background: #0a0f19;
    overflow: auto;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Sch�ner Scrollbar */
.hall-of-heroes-table-container::-webkit-scrollbar {
    width: 8px;
}
.hall-of-heroes-table-container::-webkit-scrollbar-track {
    background: #0f1624;
}
.hall-of-heroes-table-container::-webkit-scrollbar-thumb {
    background: #9b7a1a;
    border-radius: 20px;
}
.hall-of-heroes-table-container::-webkit-scrollbar-thumb:hover {
    background: #d4b87f;
}

.hall-of-heroes-table {
    width: 100%;
    border-collapse: collapse;
    background: #0a0f19;
    font-size: 1rem;
    table-layout: fixed;
}

.hall-of-heroes-table th {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.18), rgba(200, 170, 110, 0.08));
    color: #e6d9b8;
    text-transform: uppercase;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    padding: 18px 14px;
    text-align: left;
    border-bottom: 3px solid #9b7a1a;
    position: sticky;
    top: 0;
    z-index: 10;
}

.hall-of-heroes-table td {
    padding: 16px 14px;
    border-bottom: 1px solid rgba(30, 35, 45, 0.8);
    vertical-align: middle;
    transition: background 0.2s ease;
    word-break: break-word;
    overflow-wrap: break-word;
}

.hall-of-heroes-table tr:hover {
    background: rgba(200, 170, 110, 0.09);
}

.hall-of-heroes-table tr:last-child td {
    border-bottom: none;
}

/* Rank */
.hall-of-heroes-table td:first-child {
    font-size: 1.55rem;
    font-weight: 900;
    text-align: center;
    color: #9b7a1a;
    text-shadow: 0 0 12px rgba(200, 170, 110, 0.4);
}

/* Platz 1, 2, 3 speziell hervorheben */
.hall-of-heroes-table tr:nth-child(1) td:first-child { color: #ffd700; text-shadow: 0 0 15px #ffd700; }
.hall-of-heroes-table tr:nth-child(2) td:first-child { color: #e0e0e0; text-shadow: 0 0 12px #e0e0e0; }
.hall-of-heroes-table tr:nth-child(3) td:first-child { color: #cd7f32; text-shadow: 0 0 12px #cd7f32; }

/* Player Name */
.hall-of-heroes-name {
    font-weight: 600;
    color: #f0e6d2;
    font-size: 1.15rem;
    letter-spacing: 0.3px;
}

/* Rank Badge */
.hall-of-heroes-rank-badge {
    padding: 6px 18px;

    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    min-width: 118px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Points */
.hall-of-heroes-points {
    font-size: 1.22rem;
    font-weight: 800;
    color: #ffeb99;
    text-align: right;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* Playtime */
.hall-of-heroes-playtime {
    color: #9ca3af;
    font-size: 0.96rem;
    text-align: center;
    font-feature-settings: "tnum";
}

/* Profile Button */
.hall-of-heroes-profile-btn {
    background: transparent;
    border: 1.5px solid #9b7a1a;
    color: #9b7a1a;
    padding: 9px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.4px;
}

.hall-of-heroes-profile-btn:hover {
    background: #9b7a1a;
    color: #0a0f19;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(200, 170, 110, 0.35);
}



.blind-row .blind {
    background: #1e2328 !important;
    color: #555;
    opacity: 0.35;
    border-color: #444;
}

.blind-champ {
    opacity: 0.85;
}

.blind-row {
    animation: blindFade 0.6s ease-out;
}

/* Missing ping style (circular badge with gold ring + dark center) */
.missing-ping {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #14171a 0%, #1e2328 60%);
    border: 4px solid #9b7a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -6px 10px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.35);
    position: relative;
    color: #9b7a1a;
    font-weight: 800;
    font-size: 3.2rem; /* larger so it fills most of the badge */
    line-height: 1;
}

.missing-ping .qm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3.2rem;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

/* small triangular pointer like ping indicator */
.missing-ping:after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #9b7a1a;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45));
}

/* slightly dimmed variant for completely hidden */
.guess-row.blind-row .missing-ping {
    opacity: 0.95;
}

/* Center contents of champ-box when in blind mode so the badge is perfectly centered */
.champ-box.blind-champ {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

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

/* Protected lobby label */
.protected-label {
    background: linear-gradient(135deg,#2b6ef6,#6e2bf6);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: inline-block;
}

/* ====================== PATCH NOTES MODAL STYLING ====================== */
.patchnotes-modal-content {
    max-width: 720px;
    background: rgba(10, 14, 22, 0.98);
    border: 2px solid #9b7a1a;
    border-radius: 8px;
    padding: 32px 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    position: relative;
    display: flex;
    flex-direction: column;
}

.patchnotes-header {
    text-align: center;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(200, 170, 110, 0.3);
    padding-bottom: 20px;
}

.patchnotes-header h2 {
    color: #9b7a1a;
    font-size: 2rem;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.3);
}

.patchnotes-subtitle {
    color: #a09b8c;
    font-size: 0.95rem;
    margin: 0;
    letter-spacing: 1px;
}

.patchnotes-container {
    max-height: 480px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.7;
    color: #f0e6d2;
    padding-right: 8px;
}

.patchnotes-container::-webkit-scrollbar {
    width: 8px;
}

.patchnotes-container::-webkit-scrollbar-track {
    background: rgba(200, 170, 110, 0.1);
    border-radius: 4px;
}

.patchnotes-container::-webkit-scrollbar-thumb {
    background: #9b7a1a;
    border-radius: 4px;
}

.patchnotes-container::-webkit-scrollbar-thumb:hover {
    background: #d4ad7b;
}

.patch-version-section {
    margin-bottom: 32px;
    padding: 20px;
    background: rgba(200, 170, 110, 0.05);
    border-left: 3px solid #9b7a1a;
    border-radius: 4px;
}

.patch-version-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}

.patch-version-number {
    color: #9b7a1a;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.2);
}

.patch-version-date {
    color: #a09b8c;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.patch-category {
    margin: 18px 0;
}

.patch-category-title {
    color: #d4ad7b;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 16px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.patch-category-title::before {
    content: attr(data-emoji);
    font-size: 1.2rem;
}

.patch-list {
    list-style: none;
    padding-left: 0;
}

.patch-list li {
    padding-left: 24px;
    margin-bottom: 8px;
    position: relative;
}

.patch-list li::before {
    content: "?";
    position: absolute;
    left: 8px;
    color: #9b7a1a;
    font-size: 0.8rem;
}

.patch-list strong {
    color: #d4ad7b;
    font-weight: 600;
}

/* ====================== TEAM SELECTION DROPDOWN ====================== */
.team-selection-container {
    width: 100%;
}

.team-select-dropdown {
    width: 100%;
    padding: 10px 12px;
    background: #1e2328;
    border: 2px solid #9b7a1a;
    color: #f0e6d2;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Beaufort for LoL', serif;
}

.team-select-dropdown:hover {
    border-color: #f0e6d2;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.4);
}

.team-select-dropdown:focus {
    outline: none;
    border-color: #f0e6d2;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.6);
}

.team-select-dropdown option {
    background: #1e2328;
    color: #f0e6d2;
    padding: 8px 12px;
}

/* ==================== FRIENDS LIST ==================== */

.friends-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(30, 35, 40, 0.98);
    border: 2px solid #9b7a1a;
    border-radius: 8px;
    padding: 25px;
    max-width: 700px;
    width: 90%;
    max-height: 750px;
    z-index: 10000;
    display: none;
    flex-direction: column;
    box-shadow: 
        0 0 30px rgba(200, 170, 110, 0.3),
        inset 0 0 20px rgba(200, 170, 110, 0.1);
    animation: modalSlideIn 0.3s ease-out;
}

.friends-modal.active {
    display: flex;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.friends-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(200, 170, 110, 0.3);
}

.friends-modal-header h2 {
    color: #9b7a1a;
    font-size: 1.5rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.5);
}

.friends-close-btn {
    background: none;
    border: none;
    color: #9b7a1a;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.friends-close-btn:hover {
    color: #ff4655;
    transform: scale(1.2);
}

.friends-modal-content {
    overflow-y: auto;
    flex: 1;
}

.friends-modal-content::-webkit-scrollbar {
    width: 8px;
}

.friends-modal-content::-webkit-scrollbar-track {
    background: rgba(200, 170, 110, 0.1);
    border-radius: 10px;
}

.friends-modal-content::-webkit-scrollbar-thumb {
    background: #9b7a1a;
    border-radius: 10px;
}

.friends-modal-content::-webkit-scrollbar-thumb:hover {
    background: #a09b8c;
}

/* Friends Tabs */
.friends-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(200, 170, 110, 0.2);
}

.friends-tab {
    background: none;
    border: none;
    color: #a09b8c;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.friends-tab.active {
    color: #9b7a1a;
    border-bottom-color: #9b7a1a;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.5);
}

.friends-tab:hover {
    color: #f0e6d2;
}

/* Friends List Artifact */
.friend-artifact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.08), rgba(200, 170, 110, 0.03));
    border: 1px solid rgba(200, 170, 110, 0.25);
    border-radius: 8px;
    transition: all 0.3s ease;
    animation: itemSlideIn 0.4s ease-out backwards;
}

@keyframes itemSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.friend-artifact:hover {
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.15), rgba(200, 170, 110, 0.08));
    border-color: #9b7a1a;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.3), inset 0 0 10px rgba(200, 170, 110, 0.1);
    transform: translateY(-0px);
}

.friend-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.friend-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #666;
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.5);
}

.friend-status-dot.online {
    background: #00ff9d;
    box-shadow: 0 0 8px #00ff9d;
}

.friend-name {
    color: #f0e6d2;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 1.05rem;
}

.friend-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.friend-action-btn {
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.3), rgba(200, 170, 110, 0.1));
    border: 1.5px solid #9b7a1a;
    color: #9b7a1a;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    flex: 1;
    min-width: 100px;
}

.friend-action-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    color: #071015;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.friend-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

.friend-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(100, 100, 100, 0.2) !important;
    border-color: #666 !important;
    color: #888 !important;
}

.friend-action-btn.danger {
    border-color: #ff4655;
    color: #ff4655;
    background: linear-gradient(135deg, rgba(255, 70, 85, 0.2), rgba(255, 70, 85, 0.05));
}

.friend-action-btn.danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff4655, #ff6b6b);
    color: #f0e6d2;
    box-shadow: 0 0 15px rgba(255, 70, 85, 0.6);
}

.friend-action-btn.accept {
    border-color: #00ff9d;
    color: #00ff9d;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 255, 157, 0.05));
}

.friend-action-btn.accept:hover:not(:disabled) {
    background: linear-gradient(135deg, #00ff9d, #00cc7a);
    color: #071015;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.6);
}

/* Add Friend Form */
.add-friend-form {
    display: flex;
    gap: 8px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(200, 170, 110, 0.3);
    margin-bottom: 15px;
}

.add-friend-input {
    flex: 1;
    background: rgba(200, 170, 110, 0.1);
    border: 1px solid #9b7a1a;
    color: #f0e6d2;
    padding: 8px 12px;
    border-radius: 4px;
    outline: none;
    font-size: 0.9rem;
}

.add-friend-input::placeholder {
    color: #a09b8c;
}

.add-friend-input:focus {
    background: rgba(200, 170, 110, 0.2);
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.3);
}

.add-friend-btn {
    background: #9b7a1a;
    border: none;
    color: #071015;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.add-friend-btn:hover {
    background: #f0e6d2;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.5);
}

.add-friend-btn:active {
    transform: scale(0.95);
}

/* Empty State */
.friends-empty {
    text-align: center;
    padding: 40px 20px;
    color: #a09b8c;
}

.friends-empty p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Friends Button */
.friends-btn {
    background: rgba(200, 170, 110, 0.2);
    border: 2px solid #9b7a1a;
    color: #9b7a1a;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.friends-btn:hover {
    background: #9b7a1a;
    color: #071015;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.5);
}

.friends-btn.unread::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background: #ff4655;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Toast Notification */
.friend-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(30, 35, 40, 0.95);
    border: 2px solid #9b7a1a;
    color: #f0e6d2;
    padding: 15px 20px;
    border-radius: 6px;
    z-index: 10001;
    animation: toastSlideIn 0.3s ease-out;
    box-shadow: 0 0 20px rgba(200, 170, 110, 0.4);
    max-width: 400px;
    pointer-events: auto;
}

.friend-toast.info {
    cursor: pointer;
    transition: all 0.2s;
}

.friend-toast.info:hover {
    transform: translateX(-5px);
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.6);
}

.friend-toast.error {
    border-color: #ff4655;
    color: #ff4655;
}

.friend-toast.success {
    border-color: #00ff9d;
    color: #00ff9d;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* ==================== LOGIN SUCCESS ANIMATION ==================== */

/* �bergangs-Overlay f�r coole Effekte */
.login-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 10, 19, 0.95);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.login-transition-overlay.active {
    display: flex;
    pointer-events: auto;
}

/* Glitch/Scan Line Effekt */
.login-transition-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(200, 170, 110, 0.03) 50%,
        transparent 100%
    );
    background-size: 100% 4px;
    animation: scanLines 0.15s linear infinite;
    z-index: 2;
    pointer-events: none;
}

/* Middle-earth Rune Center */
.elven-rune {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 3;
    animation: runeReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

.elven-rune::before {
    content: "?";
    position: absolute;
    font-size: 180px;
    color: #9b7a1a;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 
        0 0 10px #9b7a1a,
        0 0 20px #8a5cff,
        0 0 40px #8a5cff,
        inset 0 0 20px rgba(200, 170, 110, 0.5);
    animation: 
        runeRotate 3s linear infinite,
        runePulse 2s ease-in-out infinite 0.3s;
    filter: drop-shadow(0 0 30px #8a5cff);
}

.elven-rune::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px solid #9b7a1a;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    animation: runeRingExpand 1.5s ease-out forwards;
    box-shadow: 0 0 30px #8a5cff, inset 0 0 30px #9b7a1a;
}

/* Welcome Text */
.login-welcome-text {
    position: relative;
    z-index: 3;
    margin-top: 60px;
    text-align: center;
    animation: textFadeIn 0.8s ease-in-out 0.5s forwards;
    opacity: 0;
}

.login-welcome-text h1 {
    font-size: 3rem;
    color: #9b7a1a;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 
        0 0 20px #9b7a1a,
        0 0 40px #8a5cff;
    font-weight: 900;
    animation: textGlitch 0.4s ease-in-out 0.6s;
}

.login-welcome-text p {
    font-size: 1.3rem;
    color: #f0e6d2;
    margin-top: 15px;
    opacity: 0.8;
    animation: textFadeIn 0.8s ease-in-out 0.8s forwards;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* lotrdle Multiplayer Branding */
.lotrdle-title {
    font-size: 2.5rem;
    color: #9b7a1a;
    margin: 20px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 900;
    text-shadow: 
        0 0 30px #9b7a1a,
        0 0 60px #8a5cff,
        3px 3px 0px #8a5cff;
    animation: 
        lotrdleGlitch 0.6s ease-in-out 0.5s,
        lotrdlePulse 2s ease-in-out 1.2s infinite;
    filter: drop-shadow(0 0 10px #8a5cff);
}

.lotrdle-subtitle {
    font-size: 1.1rem;
    color: #ffffff;
    margin: 8px 0 0 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: textFadeIn 0.8s ease-in-out 0.8s forwards;
    opacity: 0;
}

/* Loading Bar */
.loading-container {
    margin-top: 40px;
    animation: textFadeIn 0.8s ease-in-out 1s forwards;
    opacity: 0;
}

.loading-bar-wrapper {
    width: 300px;
    height: 8px;
    background: rgba(200, 170, 110, 0.2);
    border: 2px solid #9b7a1a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(200, 170, 110, 0.3),
        inset 0 0 10px rgba(200, 170, 110, 0.1);
}

.loading-bar-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        #9b7a1a,
        #8a5cff,
        #00ff9d,
        #9b7a1a
    );
    background-size: 200% 100%;
    border-radius: 8px;
    animation: loadingBarFill 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    box-shadow: 
        0 0 15px #9b7a1a,
        0 0 30px #8a5cff;
}

.loading-text {
    text-align: center;
    margin-top: 15px;
    color: #f0e6d2;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.loading-dots {
    display: inline-block;
    animation: loadingDots 1.5s steps(4, end) infinite;
}

/* Middle-earth Corner Brackets */
.elven-bracket {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid #9b7a1a;
    z-index: 4;
    opacity: 0;
}

.elven-bracket.top-left {
    top: 80px;
    left: 100px;
    border-right: none;
    border-bottom: none;
    animation: bracketFadeIn 0.6s ease-out 0.4s forwards;
}

.elven-bracket.top-right {
    top: 80px;
    right: 100px;
    border-left: none;
    border-bottom: none;
    animation: bracketFadeIn 0.6s ease-out 0.5s forwards;
}

.elven-bracket.bottom-left {
    bottom: 150px;
    left: 100px;
    border-right: none;
    border-top: none;
    animation: bracketFadeIn 0.6s ease-out 0.6s forwards;
}

.elven-bracket.bottom-right {
    bottom: 150px;
    right: 100px;
    border-left: none;
    border-top: none;
    animation: bracketFadeIn 0.6s ease-out 0.7s forwards;
}

/* Particle System */
.login-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.login-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #9b7a1a;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px #9b7a1a;
}

.login-particle.active {
    animation: particleFloat 2s ease-out forwards;
}

/* ==================== ANIMATIONEN ==================== */

@keyframes scanLines {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

@keyframes runeReveal {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(0deg);
        filter: brightness(0.3);
    }
    50% {
        filter: brightness(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes runeRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes runePulse {
    0%, 100% {
        text-shadow: 
            0 0 10px #9b7a1a,
            0 0 20px #8a5cff,
            0 0 40px #8a5cff;
        filter: brightness(1);
    }
    50% {
        text-shadow: 
            0 0 20px #9b7a1a,
            0 0 40px #8a5cff,
            0 0 80px #8a5cff;
        filter: brightness(1.3);
    }
}

@keyframes runeRingExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        width: 250px;
        height: 250px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

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

@keyframes textGlitch {
    0%, 100% {
        transform: translateX(0);
        text-shadow: 
            0 0 20px #9b7a1a,
            0 0 40px #8a5cff;
    }
    20% {
        transform: translateX(-2px);
        text-shadow: 
            2px 0 #ff4655,
            -2px 0 #00ff9d,
            0 0 20px #9b7a1a;
    }
    40% {
        transform: translateX(2px);
        text-shadow: 
            -2px 0 #ff4655,
            2px 0 #00ff9d,
            0 0 40px #8a5cff;
    }
    60% {
        transform: translateX(-1px);
        text-shadow: 
            1px 0 #ff4655,
            -1px 0 #00ff9d;
    }
    80% {
        transform: translateX(1px);
        text-shadow: 
            -1px 0 #ff4655,
            1px 0 #00ff9d;
    }
}

@keyframes lotrdleGlitch {
    0%, 100% {
        transform: translateX(0);
        text-shadow: 
            0 0 30px #9b7a1a,
            0 0 60px #8a5cff;
    }
    25% {
        transform: translateX(-3px);
        text-shadow: 
            3px 0 #ff4655,
            -3px 0 #00ff9d,
            0 0 30px #9b7a1a;
    }
    50% {
        transform: translateX(3px);
        text-shadow: 
            -3px 0 #ff4655,
            3px 0 #00ff9d,
            0 0 60px #8a5cff;
    }
    75% {
        transform: translateX(-1px);
        text-shadow: 
            2px 0 #9b7a1a,
            -2px 0 #8a5cff;
    }
}

@keyframes lotrdlePulse {
    0%, 100% {
        text-shadow: 
            0 0 30px #9b7a1a,
            0 0 60px #8a5cff;
        filter: brightness(1);
    }
    50% {
        text-shadow: 
            0 0 40px #9b7a1a,
            0 0 80px #8a5cff,
            0 0 120px #00ff9d;
        filter: brightness(1.2);
    }
}

@keyframes loadingBarFill {
    0% {
        width: 0%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        width: 85%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

@keyframes bracketFadeIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 0.6;
        transform: scale(1);
    }
}

@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx, 100px), var(--ty, -150px)) scale(0);
    }
}

/* ====================== LOBBY INVITE MODAL ====================== */

.invite-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 10, 19, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    backdrop-filter: blur(0px);
    transition: all 0.3s ease;
}

.invite-modal-overlay.active {
    opacity: 1;
    backdrop-filter: blur(4px);
}

.invite-modal-content {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(50, 55, 65, 0.9) 100%);
    border: 2px solid #9b7a1a;
    border-radius: 12px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.3), inset 0 0 20px rgba(200, 170, 110, 0.1);
    animation: inviteModalPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.invite-modal-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(200, 170, 110, 0.3);
    padding-bottom: 15px;
}

.invite-modal-header h3 {
    color: #9b7a1a;
    font-size: 1.4rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.3);
    animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(200, 170, 110, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(200, 170, 110, 0.6);
    }
}

.invite-modal-body {
    text-align: center;
    color: #f0e6d2;
}

.invite-modal-body p {
    margin: 15px 0;
    font-size: 1rem;
    animation: fadeInUp 0.5s ease-out;
}

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

.invite-modal-body p strong {
    color: #00ff9d;
    font-weight: bold;
}

.invite-room-name {
    color: #9b7a1a;
    font-style: italic;
    font-size: 0.95rem;
    padding: 10px;
    background: rgba(200, 170, 110, 0.1);
    border-radius: 6px;
    margin: 15px 0;
    animation: fadeInUp 0.6s ease-out;
}

.invite-modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

.invite-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: buttonPopIn 0.4s ease-out backwards;
}

.invite-btn:nth-child(1) {
    animation-delay: 0.1s;
}

.invite-btn:nth-child(2) {
    animation-delay: 0.2s;
}

@keyframes buttonPopIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.invite-btn.accept {
    background: linear-gradient(135deg, #00ff9d 0%, #00dd88 100%);
    color: #071015;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
}

.invite-btn.accept:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.7);
}

.invite-btn.decline {
    background: linear-gradient(135deg, #8a5cff 0%, #6b3fa0 100%);
    color: #f0e6d2;
    box-shadow: 0 0 15px rgba(138, 92, 255, 0.3);
}

.invite-btn.decline:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 30px rgba(138, 92, 255, 0.6);
}

.invite-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Friend action button disabled state */
.friend-action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #555;
}

.friend-action-btn.disabled:hover {
    background: #555;
}

/* ====================== FRIENDS INVITE FROM LOBBY ====================== */

.friends-invite-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 10, 19, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.friends-invite-modal-overlay.active {
    opacity: 1;
}

.friends-invite-modal {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(50, 55, 65, 0.9) 100%);
    border: 2px solid #9b7a1a;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(200, 170, 110, 0.3), inset 0 0 20px rgba(200, 170, 110, 0.1);
    animation: modalSlideIn 0.4s ease-out;
    width: 90%;
    max-width: 500px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.friends-invite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(200, 170, 110, 0.3);
}

.friends-invite-header h3 {
    color: #9b7a1a;
    font-size: 1.3rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.3);
}

.close-invite-modal {
    background: none;
    border: none;
    color: #9b7a1a;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.2s;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-invite-modal:hover {
    color: #00ff9d;
    transform: scale(1.2);
}

.friends-invite-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.friends-invite-content::-webkit-scrollbar {
    width: 8px;
}

.friends-invite-content::-webkit-scrollbar-track {
    background: rgba(200, 170, 110, 0.1);
    border-radius: 4px;
}

.friends-invite-content::-webkit-scrollbar-thumb {
    background: rgba(200, 170, 110, 0.4);
    border-radius: 4px;
}

.friends-invite-content::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 170, 110, 0.6);
}

.invite-friend-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(200, 170, 110, 0.05);
    border: 1px solid rgba(200, 170, 110, 0.2);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.invite-friend-card:hover {
    background: rgba(200, 170, 110, 0.1);
    border-color: rgba(200, 170, 110, 0.4);
    transform: translateX(5px);
}

.invite-friend-card.offline {
    opacity: 0.6;
}

.invite-friend-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invite-friend-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #888;
    transition: all 0.2s;
    box-shadow: 0 0 6px rgba(136, 136, 136, 0.3);
}

.invite-friend-status.online {
    background: #00ff9d;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.6);
}

.invite-friend-name {
    color: #f0e6d2;
    font-weight: 500;
    font-size: 1rem;
}

.invite-friend-action-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #9b7a1a 0%, #a18452 100%);
    color: #071015;
    border: 1px solid #9b7a1a;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.2);
}

.invite-friend-action-btn:hover:not(.disabled) {
    background: linear-gradient(135deg, #d4bf7f 0%, #b89f6a 100%);
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.5);
    transform: translateY(-2px);
}

.invite-friend-action-btn:active:not(.disabled) {
    transform: translateY(0);
}

.invite-friend-action-btn.disabled {
    background: #555;
    color: #999;
    opacity: 0.6;
    cursor: not-allowed;
}

.invite-friend-action-btn.disabled:hover {
    background: #555;
    box-shadow: none;
    transform: none;
}

.no-friends-msg {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-style: italic;
}

/* ==================== PRIVATE CHAT SYSTEM ==================== */

.private-chat-modal {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    height: 500px;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.98), rgba(50, 50, 70, 0.98));
    border: 2px solid #9b7a1a;
    border-radius: 12px;
    display: none;
    flex-direction: column;
    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(200, 170, 110, 0.3);
    animation: chatSlideIn 0.3s ease-out;
}

.private-chat-modal.active {
    display: flex;
}

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

.private-chat-header {
    padding: 15px;
    border-bottom: 1px solid rgba(200, 170, 110, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px 10px 0 0;
}

.chat-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.private-chat-header h3 {
    margin: 0;
    color: #9b7a1a;
    font-size: 1rem;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.3);
}

.chat-partner-status {
    font-size: 0.75rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-partner-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
}

.chat-partner-status.online::before {
    background: #00ff9d;
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
}

.chat-close-btn {
    background: transparent;
    border: none;
    color: #9b7a1a;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.chat-close-btn:hover {
    background: rgba(200, 170, 110, 0.1);
    color: #e0d0b0;
}

.private-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.private-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.private-chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.private-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(200, 170, 110, 0.4);
    border-radius: 3px;
}

.private-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 170, 110, 0.6);
}

.chat-loading {
    text-align: center;
    color: #888;
    padding: 20px;
    font-style: italic;
}

.chat-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: messagePopIn 0.2s ease-out;
}

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

.chat-message.own {
    align-items: flex-end;
}

.chat-message.other {
    align-items: flex-start;
}

.chat-message-text {
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 8px;
    word-wrap: break-word;
    font-size: 0.95rem;
    line-height: 1.3;
}

.chat-message.own .chat-message-text {
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    color: #071015;
    border-bottom-right-radius: 2px;
    box-shadow: 0 2px 8px rgba(200, 170, 110, 0.2);
}

.chat-message.other .chat-message-text {
    background: rgba(100, 100, 120, 0.6);
    color: #f0e6d2;
    border-bottom-left-radius: 2px;
    border: 1px solid rgba(200, 170, 110, 0.2);
}

.chat-message-time {
    font-size: 0.75rem;
    color: #888;
    padding: 0 4px;
}

.private-chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(200, 170, 110, 0.3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 10px 10px;
}

.chat-message-input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 170, 110, 0.3);
    border-radius: 6px;
    color: #f0e6d2;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.chat-message-input:focus {
    outline: none;
    border-color: #9b7a1a;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.2);
}

.chat-message-input::placeholder {
    color: #888;
}

.chat-send-btn {
    padding: 10px 16px;
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    border: none;
    border-radius: 6px;
    color: #071015;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.chat-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(200, 170, 110, 0.3);
    background: linear-gradient(135deg, #d8ba7e, #b09570);
}

.chat-send-btn:active {
    transform: translateY(0);
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .private-chat-modal {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }
}

/* ====================== COUNTDOWN TIMER ANIMATION ====================== */

@keyframes countdownPulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 70, 85, 0.5);
    }
    50% {
        transform: scale(1.15);
        text-shadow: 0 0 25px rgba(255, 70, 85, 0.9), 0 0 40px rgba(255, 70, 85, 0.6);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 70, 85, 0.5);
    }
}

@keyframes countdownShake {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    25% {
        transform: translateX(-3px) scale(1.05);
    }
    50% {
        transform: translateX(3px) scale(1.08);
    }
    75% {
        transform: translateX(-2px) scale(1.05);
    }
}

@keyframes countdownFlash {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.5);
    }
    100% {
        filter: brightness(1);
    }
}

#timer-box {
    transition: all 0.2s;
}

#timer-box.countdown-pulse {
    animation: countdownFlash 0.6s ease-in-out infinite,
              countdownShake 0.6s ease-in-out infinite;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 3rem !important;
    text-shadow: 0 0 20px rgba(255, 70, 85, 0.8), 0 0 40px rgba(255, 70, 85, 0.5) !important;
    color: #ff4655 !important;
}

/* ====================== COLLAPSIBLE CHAT WIDGET ====================== */

.chat-widget {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 380px;
    max-height: 500px;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.98), rgba(50, 50, 70, 0.98));
    border: 2px solid #9b7a1a;
    border-radius: 12px;
    display: none !important;
    flex-direction: column;
    z-index: 9998;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(200, 170, 110, 0.3);
    animation: chatWidgetSlideIn 0.3s ease-out;
}

.chat-widget.active {
    display: flex !important;
}

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

.chat-widget.collapsed {
    max-height: 45px;
}

.chat-widget.collapsed .chat-widget-content {
    display: none;
}

.chat-widget.collapsed .chat-widget-tabs {
    display: none;
}

.chat-widget-header {
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(200, 170, 110, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    transition: all 0.2s;
    user-select: none;
    flex-shrink: 0;
}

.chat-widget-header:hover {
    background: rgba(0, 0, 0, 0.5);
}

.chat-widget-title {
    color: #9b7a1a;
    font-weight: bold;
    font-size: 0.95rem;
}

.chat-widget-toggle {
    color: #9b7a1a;
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.chat-widget.collapsed .chat-widget-toggle {
    transform: rotate(180deg);
}

.chat-widget-tabs {
    display: flex;
    gap: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(200, 170, 110, 0.2);
    overflow-x: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.chat-widget-tabs::-webkit-scrollbar {
    height: 4px;
}

.chat-widget-tabs::-webkit-scrollbar-thumb {
    background: rgba(200, 170, 110, 0.4);
    border-radius: 2px;
}

.chat-tab {
    padding: 6px 12px;
    background: rgba(200, 170, 110, 0.15);
    border: 1px solid rgba(200, 170, 110, 0.3);
    color: #9b7a1a;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-tab:hover {
    background: rgba(200, 170, 110, 0.25);
}

.chat-tab.active {
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    color: #071015;
    border-color: #9b7a1a;
    font-weight: bold;
}

.chat-tab-close {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.chat-tab-close:hover {
    opacity: 1;
}

.chat-widget-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.chat-widget-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-widget-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-widget-messages::-webkit-scrollbar-thumb {
    background: rgba(200, 170, 110, 0.4);
    border-radius: 3px;
}

.chat-widget-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: messagePopIn 0.2s ease-out;
}

.chat-widget-message.own {
    align-items: flex-end;
}

.chat-widget-message.other {
    align-items: flex-start;
}

.chat-widget-msg-text {
    max-width: 85%;
    padding: 8px 10px;
    border-radius: 6px;
    word-wrap: break-word;
    font-size: 0.9rem;
    line-height: 1.3;
}

.chat-widget-message.own .chat-widget-msg-text {
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    color: #071015;
    border-bottom-right-radius: 2px;
}

.chat-widget-message.other .chat-widget-msg-text {
    background: rgba(100, 100, 120, 0.6);
    color: #f0e6d2;
    border: 1px solid rgba(200, 170, 110, 0.2);
    border-bottom-left-radius: 2px;
}

.chat-widget-input {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid rgba(200, 170, 110, 0.3);
    background: rgba(0, 0, 0, 0.2);
}

.chat-widget-text-input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 170, 110, 0.3);
    border-radius: 6px;
    color: #f0e6d2;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.chat-widget-text-input:focus {
    outline: none;
    border-color: #9b7a1a;
    background: rgba(0, 0, 0, 0.5);
}

.chat-widget-send-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    border: none;
    border-radius: 6px;
    color: #071015;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-widget-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200, 170, 110, 0.3);
}

@media (max-width: 768px) {
    .chat-widget {
        width: 100%;
        top: 0;
        right: 0;
        border-radius: 0 0 12px 12px;
        max-height: 60vh;
    }
}

/* ====================== PLAYER STATS - LEVEL WIDGET ====================== */

.stat-rank-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(200, 170, 110, 0.1);
    border: 1px solid rgba(200, 170, 110, 0.3);
    border-radius: 8px;
}

.stat-rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(200, 170, 110, 0.4);
    flex-shrink: 0;
}

.stat-rank-number {
    font-size: 1.6rem;
    font-weight: 900;
    color: #071015;
}

.stat-xp-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-xp-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 170, 110, 0.3);
    border-radius: 6px;
    overflow: hidden;
}

.stat-xp-progress {
    height: 100%;
    background: linear-gradient(90deg, #9b7a1a, #ffeb3b);
    transition: width 0.3s ease;
}

.stat-xp-text {
    font-size: 0.75rem;
    color: #9b7a1a;
    font-weight: bold;
}

/* ====================== LEVEL SYSTEM UI ====================== */

.player-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 12px;
    background: rgba(200, 170, 110, 0.1);
    border: 1px solid rgba(200, 170, 110, 0.3);
    border-radius: 8px;
}

/* ====================== LEVEL DISPLAY - Left Side Badge ====================== */

.rank-display-left {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5000;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rank-display-left.visible {
    display: flex !important;
}

.circular-rank-badge {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-ring {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(200, 170, 110, 0.5));
}

.rank-number-display {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #9b7a1a;
    text-shadow: 0 0 20px rgba(200, 170, 110, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.rank-info-text {
    text-align: center;
}

.xp-info {
    font-size: 0.9rem;
    color: #9b7a1a;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: block;
}

/* ====================== END LEVEL DISPLAY ====================== */

.rank-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #9b7a1a, #a08560);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(200, 170, 110, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.rank-number {
    font-size: 1.8rem;
    font-weight: 900;
    color: #071015;
    line-height: 1;
}

.rank-text {
    font-size: 0.65rem;
    font-weight: bold;
    color: #071015;
    letter-spacing: 1px;
}

.xp-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xp-bar {
    width: 100%;
    height: 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(200, 170, 110, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.xp-progress {
    height: 100%;
    background: linear-gradient(90deg, #9b7a1a, #ffeb3b);
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.6);
}

.xp-text {
    font-size: 0.8rem;
    color: #9b7a1a;
    text-align: right;
    font-weight: bold;
}

/* Rank Up Animation */
@keyframes levelUpPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(200, 170, 110, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(200, 170, 110, 0.8), 0 0 30px rgba(255, 235, 59, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(200, 170, 110, 0.4);
    }
}

.rank-badge.rank-up {
    animation: levelUpPulse 0.6s ease-out;
}



/* ====================== LOGIN BACKGROUND IMAGE ====================== */

.image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
}

.login-bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* f�llt den Bildschirm ohne Verzerrung */
    z-index: -5;
    opacity: 0.85;               /* etwas transparent, damit Text gut lesbar bleibt */
    filter: brightness(0.9) contrast(1.05); /* etwas dunkler und kontrastreicher */
    pointer-events: none;
}

/* Nur auf dem Login-Screen sichtbar */
#main-menu-overlay .login-bg-image {
    display: block;
}

/* Image Control Buttons */
.image-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(30, 35, 50, 0.8);
    padding: 12px 20px;
    border: 2px solid #9b7a1a;
    border-radius: 8px;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.video-control-btn {
    background: rgba(200, 170, 110, 0.2);
    border: 1px solid #9b7a1a;
    color: #9b7a1a;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: 36px;
}

.video-control-btn:hover {
    background: rgba(200, 170, 110, 0.4);
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.5);
    transform: scale(1.05);
}

.video-counter {
    color: #9b7a1a;
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 50px;
    text-align: center;
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */

/* Full HD (1920x1080) - Basis-Breakpoint */
@media (max-width: 1920px) {
    #main-layout {
        gap: var(--u15);
        padding: var(--u15);
    }

    #turn-container {
        width: var(--u180);
    }

    #quest-container {
        min-width: 450px;
        max-width: 900px;
        padding: var(--u20);
    }

    #chat-container {
        width: var(--u260);
        height: var(--u380);
    }

    .lobby-container {
        gap: var(--u15);
        padding: var(--u15);
    }

    .lobby-settings-panel {
        width: var(--u280);
        padding: var(--u20);
    }

    .lobby-main-panel {
        max-width: 550px;
        padding: var(--u25) var(--u30);
    }
}

/* HD+ (1440p) - Medium Screen */
@media (min-width: 1921px) and (max-width: 2559px) {
    #main-layout {
        gap: var(--u25);
        max-width: 1600px;
    }

    #quest-container {
        flex: 1;
        min-width: 550px;
        max-width: 1000px;
    }

    .lobby-container {
        max-width: 1400px;
    }

    .lobby-main-panel {
        max-width: 600px;
    }
}

/* WQHD (2560x1440) - Large Screen */
@media (min-width: 2560px) and (max-width: 3839px) {
    #main-layout {
        gap: var(--u35);
        max-width: 2000px;
    }

    #turn-container {
        width: var(--u240);
    }

    #quest-container {
        flex: 1;
        min-width: 650px;
        max-width: 1100px;
        padding: var(--u35);
    }

    #chat-container {
        width: var(--u320);
        height: var(--u450);
    }

    .lobby-container {
        max-width: 1600px;
        gap: var(--u30);
    }

    .lobby-settings-panel {
        width: var(--u320);
    }

    .lobby-main-panel {
        max-width: 680px;
    }
}

/* 4K (3840x2160) - Ultra Large Screen */
@media (min-width: 3840px) {
    #main-layout {
        gap: var(--u40);
        max-width: 2400px;
    }

    #turn-container {
        width: var(--u280);
        padding: var(--u30);
    }

    #quest-container {
        flex: 1;
        min-width: 750px;
        max-width: 1200px;
        padding: var(--u40);
    }

    #chat-container {
        width: var(--u380);
        height: var(--u500);
    }

    .lobby-container {
        max-width: 1800px;
        gap: var(--u40);
    }

    .lobby-settings-panel {
        width: var(--u360);
        padding: var(--u30);
    }

    .lobby-main-panel {
        max-width: 750px;
        padding: var(--u40) var(--u50);
    }
}

/* Mobile & Tablet (unter 1440px) */
@media (max-width: 1439px) {
    #main-layout {
        flex-direction: column;
        gap: var(--u20);
        padding: var(--u10);
        max-width: 100%;
    }

    #turn-container {
        width: 100%;
        order: -1;
    }

    #quest-container {
        width: 100%;
        flex: none;
        min-width: auto;
        max-width: 100%;
    }

    #chat-container {
        width: 100%;
        height: auto;
        max-height: 400px;
    }

    .lobby-container {
        flex-direction: column;
        max-width: 100%;
    }

    .lobby-settings-panel {
        width: 100%;
    }

    .lobby-main-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* Wenn Login-Screen weg ist, verstecke die Video-Controls */
#main-menu-overlay.hidden .video-controls {
    display: none !important;
}