@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%),
        #010a13;
    animation: riftPulse 25s ease infinite;
    pointer-events: none;
}

/* Leichte Hextech-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: #c8aa6e;
    border-radius: 50%;
    box-shadow: 0 0 8px #c8aa6e, 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: #010a13;
    background-image: radial-gradient(circle, #0a1428 0%, #010a13 100%);
    color: #f0e6d2;
    font-family: 'Beaufort for LoL', serif;
    display: flex;
    justify-content: center;
    padding-top: var(--u20);
    padding-bottom: var(--u120);
    margin: 0;
}

h1 {
    color: #c8aa6e;
    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%;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
    padding: var(--u20);
}

/* --- Rahmen-Styles (Hextech-Look) --- */
#turn-container, #game-container,#chat-container {
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9) 0%, rgba(20, 25, 40, 0.9) 100%);
    border: 2px solid #c8aa6e;
    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: #c8aa6e;
    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  --- */
#game-container {
    flex: 1;
    min-width: 500px;
    max-width: 1000px;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9) 0%, rgba(20, 25, 40, 0.9) 100%);
    border: 2px solid #c8aa6e;
    border-radius: 12px;
    padding: var(--u25);
    display: flex;
    flex-direction: column;
    align-items: center;
    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: #c8aa6e;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin: 0 0 12px 0;
    font-weight: bold;
    letter-spacing: 1px;
}

#score-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--u12);
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
}

/* Each player card */
#score-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 160px;
    max-width: 260px;
    padding: 8px 12px;
    background: rgba(200, 170, 110, 0.07);
    border: 1px solid rgba(200,170,110,0.18);
    border-radius: 6px;
    font-weight: 600;
    color: #f0e6d2;
    transition: all 0.18s ease;
    font-size: 0.95rem;
    overflow: hidden;
}

/* Name + meta container */
#score-list li .player-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#score-list li .player-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f0e6d2;
    font-weight: 700;
    font-size: 0.95rem;
}

#score-list li .player-meta {
    color: #a0b0c8;
    font-size: 0.78rem;
}

#score-list li .score-points {
    color: #f0e6d2;
    font-weight: 800;
    min-width: 56px;
    text-align: right;
}

/* Smaller screens: allow tighter cards */
@media (max-width: 640px) {
    #score-list li { min-width: 140px; max-width: 46%; }
}



button {
    background: linear-gradient(to bottom, #c8aa6e 0%, #a18448 100%); 
    border: 1px solid #785a28;
    color: #010a13; 
    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;
    /* larger champ card on the left + larger stat boxes */
    grid-template-columns: 180px repeat(7, 110px);
    gap: 14px;
    margin-top: var(--u10);
    width: 100%;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
}


.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;
    width: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3c3c41;
    background: #010a13;

    /* Text-Tuning */
    font-size: 0.85rem;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    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 #c8aa6e;
    position: relative; /* Wichtig für die absolute Positionierung des Textes */
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 180px; /* larger champion card to match grid */
    display: block; /* Ändere dies von flex zu block, damit das Bild die Box füllt */
}

/* =====================================================================
   LAYOUT-FIX  (Champion-Karte, Kachelgroesse & Header/Zeilen-Ausrichtung)
   Bewusst mit erhoehter Spezifitaet (body ...), damit diese Regeln die
   aelteren, DOPPELTEN Definitionen weiter unten in dieser Datei
   ueberschreiben (u.a. das abweichende Grid 140px/84px fuer .guess-row).
   ===================================================================== */
body .header-row,
body .guess-row {
    display: grid;
    grid-template-columns: 180px repeat(7, 110px);
    gap: 14px;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

body .guess-row .box {
    width: 110px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    white-space: normal;   /* lange Werte (Jungle/Top, Bilgewater) umbrechen statt abschneiden */
    line-height: 1.1;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: clip;
}

/* Champion-Karte (erste Spalte) muss die generische .box-Regel schlagen */
body .guess-row .champ-box {
    width: 180px;
    aspect-ratio: 1 / 1;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 2px solid #c8aa6e;
}
body .champ-box .champ-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body .champ-box .champ-name-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 5px 6px;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    color: #f0e6d2;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box {
    aspect-ratio: 1 / 1;
    width: 110px; /* larger square boxes */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3c3c41;
    background: #010a13;

    /* Text-Tuning (font size unchanged) */
    font-size: 0.85rem;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px;
    box-sizing: border-box;

    min-width: 0;
    min-height: 0;
    color: #ffffff;
}

#chat-container {
    height: var(--u400);
    display: flex;
    flex-direction: column;
    background: rgba(10, 15, 25, 0.95);
    border: 1.5px solid #c8aa6e;
    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: #c8aa6e;
    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(--u20) var(--u15) var(--u12) var(--u15);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: var(--u6);
    color: #f0e6d2;
    min-height: 0; /* allow flex child to shrink correctly inside #chat-container */
}

/* Ensure chat messages wrap and long words break */
#chat-messages, #chat-messages .chat-entry {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 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: #c8aa6e;
    border-radius: 3px;
}

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

.chat-entry strong {
    color: #c8aa6e;
}

.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);
    flex: 0 0 auto; /* pin input area to bottom of chat container */
    display: flex;
    gap: 8px;
    align-items: center;
}


/* --- 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: #010a13;
    padding: var(--u40);
    border: 3px solid #c8aa6e;
    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 #c8aa6e;
    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-item {
    display: flex;
    align-items: center;
    padding: var(--u8) var(--u12);
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #1e2328;
    color: #f0e6d2;
}

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

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

.hidden { display: none !important; }


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

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

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

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

#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, #c8aa6e 0%, #a18448 100%);
    border: 1px solid #785a28;
    color: #010a13;
    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 #c8aa6e;
    color: white;
    padding: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 4px;
}

#emote-picker button:hover {
    background: #c8aa6e;
}

/* 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: #c8aa6e;
    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 #c8aa6e; 
    margin-top: 15px;
    margin-bottom: 15px;
    display: block; 
    margin-left: auto;
    margin-right: auto;
}

.hidden {
    display: none !important;
}


#score-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); /* Hextech Gold */
    color: #010a13;
    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 Champion-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; 
    }
    100% { 
        opacity: 1; 
    }
}

.guess-row {
    animation: slideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    /* grid aligned with header: first column (champion), then 7 stat boxes */
    display: grid;
    grid-template-columns: 140px repeat(7, 84px);
    gap: 12px;
    align-items: center;
    justify-content: center; /* center the whole row */
    width: 100%;
    max-width: 1100px;
    margin: 8px auto;
    padding: 6px 4px;
}

/* 2. Upgrade für 'Partial' (Muster für bessere Sichtbarkeit) */
.box {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3c3c41;
    background: #010a13;

    /* Text-Tuning */
    font-size: 0.85rem;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap; /* prevent wrapping inside boxes */
    overflow: hidden;
    text-overflow: ellipsis; /* show ellipsis for overflow */
    padding: 4px;
    box-sizing: border-box;

    min-width: 36px; /* ensure compact boxes */
    min-height: 36px;
    color: #ffffff;
}

/* Player card layout tweaks */
.player-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 140px;
    max-width: 420px;
}

.player-card .player-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Visual feedback for empty guess attempt */
.input-error {
    animation: shake 0.25s ease-in-out;
    border: 1px solid #ff4655 !important;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

/* 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;
    align-items: center;
    gap: var(--u8);
    background: rgba(10, 15, 25, 0.85);
    backdrop-filter: blur(10px);
    border: 1.5px solid #c8aa6e;
    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-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 #c8aa6e;
    color: #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    -webkit-appearance: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8aa6e, #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, #c8aa6e, #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, #c8aa6e, #a18448);
    border: none;
    color: #010a13;
    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: #c8aa6e;
    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, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%);
    transform: translate(0,0);
    animation: full-diagonal-sweep 6s linear infinite;
    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 #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e; }

.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 #c8aa6e;
    color: #c8aa6e;
}

.menu-btn.primary:hover {
    background: #c8aa6e;
    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-match-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! */
    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: #c8aa6e;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 10px 8px;
    text-align: left;
    border-bottom: 2px solid #c8aa6e;
}

.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: #c8aa6e;
    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: #c8aa6e;
    border: 1.5px solid #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
}



/* 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-game-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 #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    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);
}







.summoners-section h3 {
    color: #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    background: transparent;
    color: #c8aa6e;
    cursor: pointer;
    transition: all 0.3s;
}

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

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

.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 #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    padding: 25px 30px;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.25);
    height: fit-content;
}

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

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

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

.settings-item select,
.settings-item 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-item select:focus,
.settings-item input:focus {
    border-color: #c8aa6e;
    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: #c8aa6e;
}

.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: #c8aa6e;
    border: 2px solid #c8aa6e;
    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: #c8aa6e;
    color: #010a13;
    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 #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    font-size: 0.95rem;
    font-weight: 900;
    border: 2px solid #c8aa6e;
    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: #c8aa6e;
    color: #010a13;
    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: #c8aa6e;
    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: #c8aa6e;
    color: #c8aa6e;

}


/* Leave Round Button */
.leave-round-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-round-btn:hover {
    background: #3c3c41;
    border-color: #c8aa6e;
    color: #c8aa6e;
}

.leave-round-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 #c8aa6e;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.order-player.active-turn {
    background: #c8aa6e;
    color: #010a13;
    font-weight: bold;
    box-shadow: 0 0 12px #c8aa6e;
}


/* ====================== 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: softHextechPulse 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: softHextechPulse 22s ease-in-out infinite reverse;
}

/* ====================== ANIMATION ====================== */
@keyframes softHextechPulse {
    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: #c8aa6e;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

.lobby-entry {
    background: rgba(30, 35, 45, 0.85);
    border: 1px solid #c8aa6e22;
    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: #c8aa6e;
    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 #c8aa6e44;
    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: #c8aa6e;
    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 #c8aa6e;
    color: #c8aa6e;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.join-primary-btn:hover {
    background: #c8aa6e;
    color: #010a13;
}

.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: #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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, #c8aa6e, #f0d48c, #c8aa6e);
    background-size: 200% auto;
    color: #010a13;
    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: #c8aa6e;
    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 #c8aa6e33;
    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;
}

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

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

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

.username {
    color: #c8aa6e;
    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, #c8aa6e, #e8d49e);
    color: #010a13;
}

/* Local practice mode: keep the same canonical game canvas while removing
   multiplayer-only controls and making the solo state unmistakable. */
.practice-login-btn {
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(200, 170, 110, 0.55);
    border-radius: 4px;
    background: rgba(12, 24, 35, 0.8);
    color: #c8aa6e;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.practice-login-btn span {
    display: block;
    margin-top: 4px;
    color: #a09b8c;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
}

.practice-login-btn:hover {
    background: rgba(200, 170, 110, 0.16);
    border-color: #c8aa6e;
    transform: translateY(-1px);
}

.practice-banner {
    margin: 0 auto 14px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 14px;
    border: 1px solid rgba(200, 170, 110, 0.5);
    border-radius: 999px;
    color: #c8aa6e;
    background: rgba(200, 170, 110, 0.1);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
}

.practice-banner span {
    color: #a09b8c;
    font-weight: 500;
    letter-spacing: 0.04em;
}

#main-layout.practice-mode {
    justify-content: center;
}

#main-layout.practice-mode #turn-container,
#main-layout.practice-mode #discord-promo,
#main-layout.practice-mode #chat-container {
    display: none !important;
}

#main-layout.practice-mode #game-container {
    width: min(100%, 1120px);
    max-width: 1120px;
}

.practice-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.practice-actions.hidden {
    display: none;
}

.quick-play-btn {
    background: linear-gradient(135deg, #f0d48c 0%, #c8aa6e 55%, #a18452 100%);
    color: #010a13;
    flex-direction: column;
    gap: 4px;
    padding: 24px 40px;
    box-shadow: 0 0 22px rgba(200, 170, 110, 0.24);
}

.quick-play-btn .btn-icon {
    font-size: 1rem;
}

.btn-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.btn-meta {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.72;
    letter-spacing: 0.04em;
}

.join-btn {
    background: transparent;
    border: 2px solid #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.35rem;
    letter-spacing: 2px;
}

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

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

.settings-item select,
.settings-item 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-item select:focus,
.settings-item input:focus {
    border-color: #c8aa6e;
    box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.25);
    outline: none;
}

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

.settings-item select:disabled:focus,
.settings-item 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 #c8aa6e33;
}

.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 #c8aa6e;
    color: #c8aa6e;
    padding: 10px 18px;
    border-radius: 50px;
    font-family: monospace;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.copy-btn-modern {
    background: #c8aa6e;
    color: #010a13;
    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: #c8aa6e;
    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 #c8aa6e;
    color: #c8aa6e;
    padding: 16px 42px;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
}

.ready-btn-modern:hover {
    background: #c8aa6e;
    color: #010a13;
}

.rematch-btn-modern {
    background: rgba(0, 255, 157, 0.12);
    border: 2px solid #00ff9d;
    color: #00ff9d;
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
}

.rematch-btn-modern:hover {
    background: #00ff9d;
    color: #010a13;
}

.rematch-btn-modern:disabled {
    opacity: 0.55;
    cursor: wait;
}

.start-game-btn-modern {
    background: linear-gradient(90deg, #c8aa6e, #f0d48c);
    color: #010a13;
    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: #c8aa6e;
    font-weight: 600;
}

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

/* Chat Input */

#chat-input {
    flex: 1 1 auto;
    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: #c8aa6e;
    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 #c8aa6e;
    border-radius: 8px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
}

/* 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-item {
    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-item:hover {
    border-color: #c8aa6e;
    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 #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    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-item {
    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-item::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-item:hover {
    border-color: #c8aa6e;
    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-item: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);
}

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

.stats-game-history h3 {
    color: #c8aa6e;
    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-game-history h3::before {
    content: "⚔️";
    font-size: 1.4rem;
}

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

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

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

#game-history-container::-webkit-scrollbar-thumb {
    background: #c8aa6e;
    border-radius: 4px;
}

#game-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;
}

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

#champion-input {
    width: 100%;
    background: #0a1428;
    border: 2px solid #c8aa6e;
    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);
}

#champion-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;
}

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

/* ==================== GUESS BUTTON ==================== */
#guess-btn {
    background: linear-gradient(to bottom, #e8c670, #c8aa6e, #a18448);
    border: 2px solid #785a28;
    color: #010a13;
    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 {
    background: #0a1428;
    border: 2px solid #c8aa6e;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}



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

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

#score-list li.is-spectator::after {
    content: " 👁️";
    color: #88aaff;
}

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

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

#score-list li.is-spectator::after {
    content: "👁️";
    color: #88aaff;
}



/* ====================== LEADERBOARD TABLE ====================== */
.leaderboard-modal-content {
    background: rgba(11, 15, 28, 0.98);
    border: 2px solid #c8aa6e;
    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);
}

.leaderboard-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 */
.leaderboard-table-container::-webkit-scrollbar {
    width: 8px;
}
.leaderboard-table-container::-webkit-scrollbar-track {
    background: #0f1624;
}
.leaderboard-table-container::-webkit-scrollbar-thumb {
    background: #c8aa6e;
    border-radius: 20px;
}
.leaderboard-table-container::-webkit-scrollbar-thumb:hover {
    background: #d4b87f;
}

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

.leaderboard-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 #c8aa6e;
    position: sticky;
    top: 0;
    z-index: 10;
}

.leaderboard-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;
}

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

.leaderboard-table tr:last-child td {
    border-bottom: none;
}

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

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

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

/* Rank Badge */
.leaderboard-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 */
.leaderboard-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 */
.leaderboard-playtime {
    color: #9ca3af;
    font-size: 0.96rem;
    text-align: center;
    font-feature-settings: "tnum";
}

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

.leaderboard-profile-btn:hover {
    background: #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    border-radius: 4px;
}

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

.patch-version-number {
    color: #c8aa6e;
    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: #c8aa6e;
    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 #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    border-bottom-color: #c8aa6e;
    text-shadow: 0 0 10px rgba(200, 170, 110, 0.5);
}

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

/* Friends List Item */
.friend-item {
    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-item:hover {
    background: linear-gradient(135deg, rgba(200, 170, 110, 0.15), rgba(200, 170, 110, 0.08));
    border-color: #c8aa6e;
    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 #c8aa6e;
    color: #c8aa6e;
    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, #c8aa6e, #a08560);
    color: #010a13;
    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: #010a13;
    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 #c8aa6e;
    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: #c8aa6e;
    border: none;
    color: #010a13;
    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 #c8aa6e;
    color: #c8aa6e;
    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: #c8aa6e;
    color: #010a13;
    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 #c8aa6e;
    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;
}

/* Hextech Rune Center */
.hextech-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;
}

.hextech-rune::before {
    content: "◆";
    position: absolute;
    font-size: 180px;
    color: #c8aa6e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 
        0 0 10px #c8aa6e,
        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);
}

.hextech-rune::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px solid #c8aa6e;
    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 #c8aa6e;
}

/* 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: #c8aa6e;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 
        0 0 20px #c8aa6e,
        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;
}

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

.loldle-subtitle {
    font-size: 1.1rem;
    color: #a09b8c;
    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 #c8aa6e;
    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,
        #c8aa6e,
        #8a5cff,
        #00ff9d,
        #c8aa6e
    );
    background-size: 200% 100%;
    border-radius: 8px;
    animation: loadingBarFill 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    box-shadow: 
        0 0 15px #c8aa6e,
        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;
}

/* Hextech Corner Brackets */
.hextech-bracket {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid #c8aa6e;
    z-index: 4;
    opacity: 0;
}

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

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

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

.hextech-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: #c8aa6e;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px #c8aa6e;
}

.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 #c8aa6e,
            0 0 20px #8a5cff,
            0 0 40px #8a5cff;
        filter: brightness(1);
    }
    50% {
        text-shadow: 
            0 0 20px #c8aa6e,
            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 #c8aa6e,
            0 0 40px #8a5cff;
    }
    20% {
        transform: translateX(-2px);
        text-shadow: 
            2px 0 #ff4655,
            -2px 0 #00ff9d,
            0 0 20px #c8aa6e;
    }
    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 loldleGlitch {
    0%, 100% {
        transform: translateX(0);
        text-shadow: 
            0 0 30px #c8aa6e,
            0 0 60px #8a5cff;
    }
    25% {
        transform: translateX(-3px);
        text-shadow: 
            3px 0 #ff4655,
            -3px 0 #00ff9d,
            0 0 30px #c8aa6e;
    }
    50% {
        transform: translateX(3px);
        text-shadow: 
            -3px 0 #ff4655,
            3px 0 #00ff9d,
            0 0 60px #8a5cff;
    }
    75% {
        transform: translateX(-1px);
        text-shadow: 
            2px 0 #c8aa6e,
            -2px 0 #8a5cff;
    }
}

@keyframes loldlePulse {
    0%, 100% {
        text-shadow: 
            0 0 30px #c8aa6e,
            0 0 60px #8a5cff;
        filter: brightness(1);
    }
    50% {
        text-shadow: 
            0 0 40px #c8aa6e,
            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 #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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: #010a13;
    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 #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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, #c8aa6e 0%, #a18452 100%);
    color: #010a13;
    border: 1px solid #c8aa6e;
    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 #c8aa6e;
    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: #c8aa6e;
    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: #c8aa6e;
    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, #c8aa6e, #a08560);
    color: #010a13;
    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: #c8aa6e;
    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, #c8aa6e, #a08560);
    border: none;
    border-radius: 6px;
    color: #010a13;
    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 #c8aa6e;
    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: #c8aa6e;
    font-weight: bold;
    font-size: 0.95rem;
}

.chat-widget-toggle {
    color: #c8aa6e;
    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: #c8aa6e;
    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, #c8aa6e, #a08560);
    color: #010a13;
    border-color: #c8aa6e;
    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, #c8aa6e, #a08560);
    color: #010a13;
    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: #c8aa6e;
    background: rgba(0, 0, 0, 0.5);
}

.chat-widget-send-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #c8aa6e, #a08560);
    border: none;
    border-radius: 6px;
    color: #010a13;
    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-level-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-level-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #c8aa6e, #a08560);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(200, 170, 110, 0.4);
    flex-shrink: 0;
}

.stat-level-number {
    font-size: 1.6rem;
    font-weight: 900;
    color: #010a13;
}

.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, #c8aa6e, #ffeb3b);
    transition: width 0.3s ease;
}

.stat-xp-text {
    font-size: 0.75rem;
    color: #c8aa6e;
    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 ====================== */

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

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

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

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

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

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

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

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

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

.level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #c8aa6e, #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;
}

.level-number {
    font-size: 1.8rem;
    font-weight: 900;
    color: #010a13;
    line-height: 1;
}

.level-text {
    font-size: 0.65rem;
    font-weight: bold;
    color: #010a13;
    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, #c8aa6e, #ffeb3b);
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.6);
}

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

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

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



/* ====================== LOGIN BACKGROUND VIDEO ====================== */

.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
    pointer-events: none;
}

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

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

/* Video Control Buttons */
.video-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 #c8aa6e;
    border-radius: 8px;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.video-control-btn {
    background: rgba(200, 170, 110, 0.2);
    border: 1px solid #c8aa6e;
    color: #c8aa6e;
    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: #c8aa6e;
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 50px;
    text-align: center;
}

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

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

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

.audio-toggle-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 Controls - Bottom Left (above footer) */
.video-controls-top-left {
    position: fixed;
    bottom: 75px;  /* Above footer (footer is ~70px) */
    left: 20px;
    z-index: 10001;  /* Higher than footer */
    display: flex !important;  /* SHOWN BY DEFAULT ON LOGIN SCREEN */
    align-items: center;
    gap: 8px;
    background: rgba(30, 35, 50, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid #c8aa6e;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.3);
}

/* Hide video controls when NOT on login screen - use .hidden class added by JavaScript */
.video-controls-top-left.hidden-video-controls {
    display: none !important;
}

.video-btn-small {
    background: rgba(200, 170, 110, 0.2);
    border: 1px solid #c8aa6e;
    color: #c8aa6e;
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: auto;
}

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

.video-counter-small {
    color: #c8aa6e;
    font-weight: bold;
    font-size: 0.8rem;
    min-width: 30px;
    text-align: center;
}

.audio-toggle-btn-small {
    background: rgba(200, 170, 110, 0.2);
    border: 1px solid #c8aa6e;
    color: #c8aa6e;
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-width: auto;
}

.audio-toggle-btn-small:hover {
    background: rgba(200, 170, 110, 0.4);
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.5);
    transform: scale(1.05);
}

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

/* ====================== AUDIO CONTROLS PANEL ====================== */
/* Audio Toggle Button - EVERYWHERE EXCEPT LOGIN SCREEN */

.audio-controls-panel {
    position: fixed;
    top: 80px;
    right: 30px;
    z-index: 10000;  /* Higher than most elements */
    display: none;  /* Default hidden - JavaScript controls visibility */
    align-items: center;
    gap: 8px;
    background: rgba(30, 35, 50, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid #c8aa6e;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 0 15px rgba(200, 170, 110, 0.3);
}

.audio-controls-panel.visible {
    display: flex !important;
}

.audio-controls-panel .audio-toggle-btn {
    background: rgba(200, 170, 110, 0.2);
    border: 1px solid #c8aa6e;
    color: #c8aa6e;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audio-controls-panel .audio-toggle-btn:hover {
    background: rgba(200, 170, 110, 0.4);
    box-shadow: 0 0 10px rgba(200, 170, 110, 0.5);
    transform: scale(1.05);
}





/* ==================== DRAW MODE STYLES ==================== */

#draw-mode-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.draw-pick-panel,
.draw-waiting-panel,
.draw-active-panel {
    width: 100%;
    max-width: 560px;
    background: rgba(10, 14, 39, 0.85);
    border: 1px solid #c8aa6e;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.draw-title {
    color: #c8aa6e;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    font-family: 'Beaufort for LoL', serif;
    letter-spacing: 0.04em;
}

.draw-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Champion pick buttons */
.draw-champ-choices {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.draw-champ-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(200, 170, 110, 0.08);
    border: 2px solid #3a3f47;
    border-radius: 8px;
    padding: 14px 18px;
    color: #f0e6d2;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s;
    min-width: 100px;
}

.draw-champ-choice-btn:hover {
    border-color: #c8aa6e;
    background: rgba(200, 170, 110, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(200, 170, 110, 0.25);
}

/* Canvas */
#draw-canvas {
    border: 2px solid #3a3f47;
    border-radius: 6px;
    background: #1e2328;
    width: 100%;
    max-width: 500px;
    display: block;
    touch-action: none;
}

/* Toolbar */
.draw-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 0;
    border-bottom: 1px solid #2a2f3a;
    margin-bottom: 4px;
}

.draw-colors {
    display: flex;
    gap: 6px;
    align-items: center;
}

.draw-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    padding: 0;
}

.draw-color-btn:hover,
.draw-color-btn.active-color {
    border-color: #ffffff;
    transform: scale(1.3);
}

.draw-sizes {
    display: flex;
    gap: 6px;
    align-items: center;
}

.draw-size-btn {
    background: rgba(200, 170, 110, 0.1);
    border: 1px solid #3a3f47;
    color: #f0e6d2;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.draw-size-btn:hover,
.draw-size-btn.active-size {
    background: rgba(200, 170, 110, 0.3);
    border-color: #c8aa6e;
}

.draw-clear-btn {
    background: rgba(255, 70, 85, 0.15);
    border: 1px solid #ff4655;
    color: #ff4655;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.draw-clear-btn:hover {
    background: rgba(255, 70, 85, 0.35);
}

/* Guess row for guessers */
.draw-guess-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.draw-guess-input {
    flex: 1;
    background: #1e2328;
    border: 1px solid #3a3f47;
    color: #f0e6d2;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.draw-guess-input:focus {
    border-color: #c8aa6e;
}

.draw-guess-btn {
    background: linear-gradient(135deg, #c8aa6e, #a18452);
    border: none;
    color: #010a13;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.draw-guess-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 170, 110, 0.4);
}

/* Correct guess notification */
.draw-correct-notice {
    background: rgba(0, 255, 157, 0.12);
    border: 1px solid #00ff9d;
    color: #00ff9d;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
    animation: fadeInDown 0.3s ease;
    width: 100%;
}

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

.classic-preset-badge {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: -8px 0 16px;
    padding: 10px 12px;
    border: 1px solid rgba(200, 170, 110, 0.45);
    border-radius: 8px;
    background: rgba(200, 170, 110, 0.08);
    color: #c8aa6e;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.classic-preset-badge span {
    color: #a09b8c;
    font-size: 0.72rem;
    letter-spacing: 0;
}

.draw-round-ended-notice {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(200, 170, 110, 0.7);
    border-radius: 6px;
    background: rgba(200, 170, 110, 0.12);
    color: #f0e6d2;
    text-align: center;
    font-size: 0.9rem;
    animation: fadeInDown 0.3s ease;
}

.draw-round-ended-notice strong {
    color: #c8aa6e;
}

body.desktop-canvas-mode .lobby-settings-panel,
body.desktop-canvas-mode .lobby-settings-panel-modern {
    width: 300px;
}

body.desktop-canvas-mode .lobby-main-panel,
body.desktop-canvas-mode .lobby-main-panel-modern {
    width: auto;
    max-width: 520px;
}

@media (max-width: 899px) {
    #app-shell {
        width: 100%;
        min-height: 100%;
    }

    body {
        overflow-x: hidden;
        padding-bottom: 90px;
    }

    .copyright-footer {
        position: relative;
    }

    .epic-login-container {
        width: min(460px, calc(100% - 32px));
        max-height: none;
        margin: 24px auto;
        padding: 36px 24px 32px;
    }

    .epic-title {
        font-size: clamp(2.3rem, 12vw, 4.2rem);
    }

    .epic-subtitle {
        font-size: clamp(0.85rem, 4vw, 1.35rem);
        letter-spacing: clamp(3px, 1.5vw, 8px);
    }
}

/* Repeat the hidden-state guard after every responsive declaration so the
   client can safely hide the session regardless of the current breakpoint. */
#main-layout[style*="display: none"],
#main-layout[style*="display:none"],
body.desktop-canvas-mode #main-layout[style*="display: none"],
body.desktop-canvas-mode #main-layout[style*="display:none"] {
    display: none !important;
}

/* Winner/error feedback uses the same top layer on desktop, tablets and
   phones. The ID selector also beats the historical overlay rule. */
#winner-overlay,
#nocturne-overlay {
    z-index: var(--layer-result) !important;
}

.server-restart-popup {
    z-index: var(--layer-result) !important;
}

/* The login and lobby views are application surfaces, not modal dialogs.
   Keeping them below the fixed controls makes the music and online widgets
   remain visible while normal dialogs still sit above both surfaces. */
#main-menu-overlay {
    z-index: var(--layer-base) !important;
}

#lobby-overlay,
#main-game-menu {
    z-index: var(--layer-panel) !important;
}

#join-menu,
#lobby-browser-modal,
#friends-modal,
.private-chat-modal {
    z-index: var(--layer-modal) !important;
}

.chat-widget {
    z-index: var(--layer-panel) !important;
}

/* Explicit medium layout: the chat owns the second row instead of relying
   on an implicit grid-column placement. */
@media (min-width: 900px) and (max-width: 1240px) {
    #main-layout:not(.practice-mode),
    body.desktop-canvas-mode #main-layout:not(.practice-mode) {
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) !important;
        grid-template-areas: "sidebar game" "chat chat" !important;
    }

    #main-layout:not(.practice-mode) > #sidebar {
        grid-area: sidebar !important;
    }

    #main-layout:not(.practice-mode) > #game-container {
        grid-area: game !important;
    }

    #main-layout:not(.practice-mode) > #chat-container {
        grid-area: chat !important;
        grid-column: auto !important;
        width: 100% !important;
    }
}

/* ==================== GAME SESSION RESPONSIVE BASE ====================
   The session uses fluid columns and breakpoint-specific stacking. */
body.desktop-canvas-mode #main-layout {
    width: 100%;
    max-width: 1580px;
    padding: 42px 34px 80px;
    gap: 24px;
}

body.desktop-canvas-mode #sidebar {
    flex: 0 0 270px;
    width: 270px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.desktop-canvas-mode #game-container {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 24px 28px 34px;
    border: 1px solid rgba(200, 170, 110, 0.5);
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 0%, rgba(40, 91, 135, 0.24), transparent 38%),
        linear-gradient(145deg, rgba(9, 23, 39, 0.98), rgba(5, 14, 26, 0.98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), inset 0 0 40px rgba(35, 95, 138, 0.08);
}

body.desktop-canvas-mode #chat-container {
    flex: 0 0 290px;
    width: 290px;
    height: auto;
    border: 1px solid rgba(200, 170, 110, 0.5);
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(7, 22, 38, 0.98), rgba(4, 12, 23, 0.98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

body.desktop-canvas-mode #game-container > h1 {
    width: 100%;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(200, 170, 110, 0.2);
    color: #e8d49e;
    font-size: 1rem;
    letter-spacing: 3px;
    text-align: left;
    text-shadow: none;
}

.session-lobby-card,
body.desktop-canvas-mode #turn-container {
    width: auto;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid rgba(200, 170, 110, 0.5);
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(10, 29, 48, 0.98), rgba(5, 15, 28, 0.98));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 0 24px rgba(35, 95, 138, 0.08);
}

.session-room-label,
.stage-eyebrow {
    color: #a9b7c7;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.session-room-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.session-room-row strong {
    min-width: 0;
    color: #e8d49e;
    font-size: 1.25rem;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-copy-btn {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(200, 170, 110, 0.5);
    border-radius: 4px;
    background: rgba(200, 170, 110, 0.08);
    color: #c8aa6e;
    font-size: 0.9rem;
}

.session-lobby-card p {
    margin: 9px 0 20px;
    color: #8192a5;
    font-size: 0.78rem;
    line-height: 1.4;
}

.session-players-heading {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(200, 170, 110, 0.2);
    color: #e8d49e;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

body.desktop-canvas-mode #turn-container {
    position: static;
    text-align: left;
}

body.desktop-canvas-mode #turn-display-header {
    margin-bottom: 8px;
    padding-bottom: 9px;
    border-bottom-color: rgba(200, 170, 110, 0.2);
}

body.desktop-canvas-mode #turn-display {
    color: #37d69b;
    font-size: 0.95rem;
}

body.desktop-canvas-mode #player-order-strip {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 7px !important;
    margin-top: 15px !important;
}

body.desktop-canvas-mode .order-player {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 0 9px;
    border: 1px solid rgba(127, 154, 181, 0.2);
    border-radius: 4px;
    background: rgba(4, 14, 26, 0.58);
    color: #e4ebf2;
    font-size: 0.78rem;
}

body.desktop-canvas-mode .order-player.active-turn {
    border-color: rgba(55, 214, 155, 0.7);
    background: rgba(55, 214, 155, 0.1);
    box-shadow: inset 3px 0 0 #37d69b;
}

body.desktop-canvas-mode #timer-box {
    margin: 22px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid rgba(200, 170, 110, 0.2);
    color: #c8aa6e !important;
    font-size: 1rem !important;
    text-align: center;
}

.game-session-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    width: 100%;
    margin: 3px 0 22px;
    text-align: center;
}

.stage-timer {
    display: flex;
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid #c8aa6e;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 170, 110, 0.18), rgba(7, 20, 35, 0.96) 65%);
    box-shadow: 0 0 0 7px rgba(200, 170, 110, 0.08), 0 0 30px rgba(200, 170, 110, 0.18);
}

.stage-timer strong {
    color: #f4dfaa;
    font-size: 2rem;
    line-height: 1;
}

.stage-timer span {
    margin-top: 7px;
    color: #a9b7c7;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.stage-title-wrap {
    min-width: 0;
}

.stage-title-wrap h2 {
    margin: 6px 0 5px;
    color: #f0e6d2;
    font-size: 1.75rem;
    letter-spacing: 2px;
}

.stage-title-wrap p {
    margin: 0;
    color: #8192a5;
    font-size: 0.84rem;
}

.stage-meta {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.stage-meta span {
    padding: 4px 8px;
    border: 1px solid rgba(127, 154, 181, 0.3);
    border-radius: 999px;
    color: #a9b7c7;
    font-size: 0.62rem;
    letter-spacing: 0.8px;
}

body.desktop-canvas-mode #scoreboard {
    margin-bottom: 22px;
    padding: 12px 14px;
    border: 1px solid rgba(127, 154, 181, 0.2);
    border-radius: 5px;
    background: rgba(4, 14, 26, 0.46);
}

body.desktop-canvas-mode #scoreboard h3 {
    margin-bottom: 8px;
    color: #a9b7c7;
    font-size: 0.66rem;
    letter-spacing: 1.5px;
}

body.desktop-canvas-mode #score-list {
    gap: 6px;
}

body.desktop-canvas-mode #score-list li {
    min-width: 0;
    max-width: none;
    flex: 1 1 150px;
    padding: 7px 10px;
    border-color: rgba(127, 154, 181, 0.2);
    background: rgba(20, 41, 61, 0.5);
    font-size: 0.78rem;
}

body.desktop-canvas-mode .input-area {
    width: 100%;
    max-width: none;
    margin: 10px auto 24px;
    padding: 0;
}

body.desktop-canvas-mode #champion-input {
    padding: 17px 20px;
    border-color: rgba(200, 170, 110, 0.8);
    border-radius: 5px;
    background: rgba(5, 18, 32, 0.9);
}

body.desktop-canvas-mode #guess-btn {
    margin-left: 10px;
    border-radius: 5px;
}

body.desktop-canvas-mode #results-table {
    max-width: none;
    overflow-x: auto;
    padding-top: 4px;
}

body.desktop-canvas-mode .header-row,
body.desktop-canvas-mode .guess-row,
body.desktop-canvas-mode body .header-row,
body.desktop-canvas-mode body .guess-row {
    grid-template-columns: 130px repeat(7, minmax(68px, 1fr));
    gap: 4px;
    max-width: none;
    margin-top: 5px;
}

body.desktop-canvas-mode .header-row span {
    padding: 0 6px 7px;
    border-bottom-color: rgba(127, 154, 181, 0.25);
    color: #8192a5;
    font-size: 0.62rem;
}

body.desktop-canvas-mode .guess-row .box,
body.desktop-canvas-mode body .guess-row .box,
body.desktop-canvas-mode body .guess-row .champ-box {
    width: auto;
    min-height: 58px;
    aspect-ratio: auto;
    border-width: 1px;
    border-color: rgba(127, 154, 181, 0.25);
    border-radius: 3px;
    font-size: 0.68rem;
}

body.desktop-canvas-mode body .guess-row .champ-box {
    height: 58px;
}

body.desktop-canvas-mode .guess-row .box:not(.champ-box) {
    background: rgba(3, 13, 25, 0.8);
}

body.desktop-canvas-mode #chat-header {
    padding: 18px 18px;
    font-size: 0.78rem;
    letter-spacing: 2px;
    background: rgba(200, 170, 110, 0.08);
}

body.desktop-canvas-mode #chat-messages {
    padding: 18px 14px 12px;
}

body.desktop-canvas-mode #chat-input-area {
    padding: 12px;
    background: rgba(4, 14, 26, 0.76);
}

body.desktop-canvas-mode #main-layout.practice-mode #sidebar {
    display: none;
}

@media (max-width: 899px) {
    #main-layout {
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        gap: 14px;
    }

    #sidebar {
        width: 100%;
    }

    .session-lobby-card {
        padding: 15px;
    }

    .game-session-header {
        gap: 14px;
    }

    .stage-timer {
        flex-basis: 84px;
        width: 84px;
        height: 84px;
    }

    .stage-timer strong {
        font-size: 1.45rem;
    }

    .stage-title-wrap h2 {
        font-size: 1.1rem;
    }

    .stage-title-wrap p {
        font-size: 0.72rem;
    }

    #results-table {
        overflow-x: auto;
    }

    .header-row,
    .guess-row {
        min-width: 760px;
    }
}

/* Final polish from live-session review */
body.desktop-canvas-mode .online-counter {
    position: absolute;
    top: 20px;
    right: 330px;
    z-index: 9999;
    white-space: nowrap;
}

body.desktop-canvas-mode #turn-display {
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.desktop-canvas-mode .guess-row .box:not(.champ-box),
body.desktop-canvas-mode body .guess-row .box:not(.champ-box) {
    min-height: 112px;
}

body.desktop-canvas-mode body .guess-row .champ-box .champ-name-text,
body.desktop-canvas-mode .guess-row .champ-box .champ-name-text {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 6px;
    background: rgba(0, 0, 0, 0.74);
}

body.game-session-active #online-counter,
body.game-session-active #top-xp-display {
    display: none !important;
}

/* Guess control: a stronger focal point, matching the concept mockup. */
body.desktop-canvas-mode .input-area {
    max-width: 920px;
    margin: 18px auto 30px;
    gap: 12px;
}

body.desktop-canvas-mode .search-wrapper {
    min-height: 68px;
}

body.desktop-canvas-mode .search-wrapper::before {
    content: '⌕';
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    transform: translateY(-53%);
    color: #a9b7c7;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
    pointer-events: none;
}

body.desktop-canvas-mode #champion-input {
    height: 68px;
    box-sizing: border-box;
    padding: 0 22px 0 58px;
    border: 1px solid rgba(200, 170, 110, 0.82);
    border-radius: 5px;
    background: linear-gradient(100deg, rgba(6, 23, 40, 0.98), rgba(11, 31, 51, 0.9));
    font-size: 1.02rem;
    letter-spacing: 0.2px;
}

body.desktop-canvas-mode #champion-input:focus {
    border-color: #f0d48c;
    box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.16), 0 0 22px rgba(200, 170, 110, 0.1);
}

body.desktop-canvas-mode #guess-btn {
    display: flex;
    flex: 0 0 158px;
    width: 158px;
    height: 68px;
    min-width: 158px;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #f0d48c;
    border-radius: 5px;
    background: linear-gradient(180deg, #f0d48c 0%, #c8aa6e 58%, #a18448 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 18px rgba(200, 170, 110, 0.16);
    font-size: 0.95rem;
    letter-spacing: 1.6px;
}

body.desktop-canvas-mode #guess-btn::after {
    content: 'ENTER';
    color: rgba(1, 10, 19, 0.66);
    font-size: 0.55rem;
    letter-spacing: 1.4px;
}

body.desktop-canvas-mode #guess-btn:disabled {
    cursor: wait;
    filter: saturate(0.65);
    opacity: 0.72;
}

/* Left session rail: compact cards and readable player states. */
body.desktop-canvas-mode #sidebar {
    gap: 14px;
}

body.desktop-canvas-mode .session-lobby-card {
    min-height: 146px;
    padding: 18px 18px 16px;
    border-color: rgba(200, 170, 110, 0.62);
    background:
        linear-gradient(135deg, rgba(18, 47, 72, 0.85), rgba(5, 17, 31, 0.98)),
        radial-gradient(circle at 100% 0%, rgba(200, 170, 110, 0.12), transparent 50%);
}

body.desktop-canvas-mode .session-room-label {
    color: #8192a5;
    font-size: 0.62rem;
}

body.desktop-canvas-mode .session-room-row strong {
    font-size: 1.14rem;
}

body.desktop-canvas-mode .session-lobby-card p {
    margin-bottom: 18px;
    color: #91a2b4;
}

body.desktop-canvas-mode .session-players-heading {
    color: #d9c48d;
    font-size: 0.68rem;
}

body.desktop-canvas-mode #turn-container {
    min-height: 300px;
    padding: 18px;
    background: linear-gradient(160deg, rgba(13, 34, 54, 0.94), rgba(5, 15, 28, 0.98));
}

body.desktop-canvas-mode #turn-display-header {
    color: #8192a5;
    font-size: 0.62rem;
    letter-spacing: 1.8px;
}

body.desktop-canvas-mode #turn-display {
    min-height: 30px;
    padding: 4px 6px;
    border: 1px solid rgba(55, 214, 155, 0.48);
    border-radius: 4px;
    background: rgba(55, 214, 155, 0.08);
    font-size: 0.78rem;
    line-height: 20px;
}

body.desktop-canvas-mode .order-player {
    min-height: 42px;
    padding: 0 10px;
    gap: 8px;
    border-color: rgba(127, 154, 181, 0.24);
    background: rgba(4, 14, 26, 0.72);
}

body.desktop-canvas-mode .order-player-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #728296;
    box-shadow: 0 0 0 3px rgba(114, 130, 150, 0.1);
}

body.desktop-canvas-mode .order-player-name {
    min-width: 0;
    overflow: hidden;
    color: #e4ebf2;
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.desktop-canvas-mode .order-player-state {
    margin-left: auto;
    color: #728296;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    white-space: nowrap;
}

body.desktop-canvas-mode .order-player.active-turn {
    border-color: rgba(55, 214, 155, 0.64);
    background: linear-gradient(90deg, rgba(55, 214, 155, 0.14), rgba(4, 14, 26, 0.72));
}

body.desktop-canvas-mode .order-player.active-turn .order-player-dot {
    background: #37d69b;
    box-shadow: 0 0 0 3px rgba(55, 214, 155, 0.14), 0 0 10px rgba(55, 214, 155, 0.7);
}

body.desktop-canvas-mode .order-player.active-turn .order-player-state {
    color: #37d69b;
}

body.desktop-canvas-mode #leave-round-btn {
    width: 100%;
    margin-top: 18px;
    border: 1px solid rgba(200, 170, 110, 0.36);
    border-radius: 4px;
    background: rgba(200, 170, 110, 0.08);
    color: #a9b7c7;
    font-size: 0.68rem;
    letter-spacing: 1px;
}

@media (max-width: 899px) {
    #champion-input {
        height: 58px;
        padding-left: 48px;
    }

    #guess-btn {
        height: 58px;
        min-width: 110px;
    }
}

/* Scoreboard redesign: player cards instead of a flat table row. */
body.desktop-canvas-mode #scoreboard {
    position: relative;
    padding: 16px 16px 18px;
    border: 1px solid rgba(127, 154, 181, 0.28);
    background:
        linear-gradient(135deg, rgba(13, 34, 54, 0.94), rgba(4, 14, 26, 0.82)),
        radial-gradient(circle at 100% 0%, rgba(200, 170, 110, 0.1), transparent 42%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 10px 24px rgba(0, 0, 0, 0.16);
}

body.desktop-canvas-mode #scoreboard::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 16px;
    width: 74px;
    height: 2px;
    background: #c8aa6e;
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.7);
}

body.desktop-canvas-mode #scoreboard h3 {
    margin: 0;
    color: #e8d49e;
    font-size: 0.68rem;
    letter-spacing: 2px;
}

body.desktop-canvas-mode #scoreboard #last-winner {
    min-height: 18px !important;
    margin: 7px 0 12px !important;
    color: #8192a5;
    font-size: 0.66rem !important;
}

body.desktop-canvas-mode #score-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: stretch;
}

body.desktop-canvas-mode #score-list > li {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 70px;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 12px 14px !important;
    gap: 12px;
    border: 1px solid rgba(127, 154, 181, 0.28) !important;
    border-radius: 6px;
    background: linear-gradient(100deg, rgba(22, 48, 70, 0.72), rgba(5, 18, 32, 0.76)) !important;
    box-shadow: inset 3px 0 0 rgba(127, 154, 181, 0.35), 0 5px 12px rgba(0, 0, 0, 0.14);
}

body.desktop-canvas-mode #score-list > li:only-child {
    grid-column: 1 / -1;
}

body.desktop-canvas-mode #score-list > li:first-child {
    border-color: rgba(200, 170, 110, 0.58) !important;
    background: linear-gradient(100deg, rgba(84, 70, 25, 0.44), rgba(12, 34, 48, 0.86)) !important;
    box-shadow: inset 3px 0 0 #c8aa6e, 0 5px 16px rgba(0, 0, 0, 0.18);
}

body.desktop-canvas-mode #score-list > li .score-rank-badge {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04), 0 0 14px currentColor;
    font-size: 0.85rem !important;
}

body.desktop-canvas-mode #score-list > li .score-player-info {
    flex: 1 1 auto !important;
    max-width: none !important;
    justify-content: center;
    gap: 4px !important;
}

body.desktop-canvas-mode #score-list > li .score-player-name {
    color: #f0e6d2 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
}

body.desktop-canvas-mode #score-list > li .score-player-rank {
    color: #c8aa6e !important;
    font-size: 0.61rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px;
}

body.desktop-canvas-mode #score-list > li .score-points-wrap {
    display: flex !important;
    align-items: center;
    margin-left: auto;
}

body.desktop-canvas-mode #score-list > li .score-points-value {
    min-width: 64px !important;
    color: #f4dfaa !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    text-align: right;
}

body.desktop-canvas-mode #score-list > li.is-spectator {
    border-color: rgba(136, 170, 255, 0.42) !important;
    background: linear-gradient(100deg, rgba(52, 69, 112, 0.46), rgba(5, 18, 32, 0.76)) !important;
}

@media (max-width: 899px) {
    #score-list {
        grid-template-columns: 1fr;
    }
}

/* Keep scoreboard player cards compact instead of stretching them edge-to-edge. */
body.desktop-canvas-mode #score-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
    justify-content: center;
}

body.desktop-canvas-mode #score-list > li {
    width: 100% !important;
}

body.desktop-canvas-mode #score-list > li:only-child {
    grid-column: auto !important;
}

@media (max-width: 899px) {
    body.desktop-canvas-mode #score-list {
        grid-template-columns: 1fr;
    }

    body.desktop-canvas-mode #score-list > li {
        width: 100% !important;
    }
}

/* ========================================================================
   RESPONSIVE LAYOUT — single source of truth

   The old layout used a fixed 1920x1080 canvas and several resolution-specific
   overrides. That approach created empty side bars and made fixed elements
   depend on the transformed canvas. The rules below use the real viewport,
   CSS Grid and fluid spacing instead. Components keep the same hierarchy and
   proportions while they reflow when the available width changes.
   ======================================================================== */

:root {
    --page-gutter: clamp(12px, 2vw, 32px);
    --layout-gap: clamp(12px, 1.4vw, 24px);
    --panel-bg: linear-gradient(145deg, rgba(10, 29, 48, .97), rgba(5, 15, 28, .97));
    --game-bg: linear-gradient(145deg, rgba(9, 23, 39, .98), rgba(5, 14, 26, .98));
    --panel-border: rgba(200, 170, 110, .5);
    --soft-border: rgba(127, 154, 181, .24);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    font-size: clamp(14px, calc(13px + .18vw), 17px);
}

body,
body.desktop-canvas-mode {
    display: block;
    width: 100%;
    min-width: 320px;
    min-height: 100dvh;
    margin: 0;
    padding: 0 0 84px;
    overflow-x: hidden;
    overflow-y: auto;
}

#app-shell,
body.desktop-canvas-mode #app-shell {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    transform: none;
    transform-origin: initial;
}

/* Do not let legacy canvas rules reintroduce a centered fixed surface. */
body.desktop-canvas-mode #app-shell,
body.desktop-canvas-mode #app-shell > .overlay,
body.desktop-canvas-mode #app-shell > #winner-overlay {
    left: auto;
    top: auto;
}

/* Real viewport anchors */
#online-counter,
body.desktop-canvas-mode > #online-counter {
    position: fixed !important;
    top: clamp(12px, 1.5vw, 26px) !important;
    right: clamp(12px, 1.5vw, 26px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20000 !important;
    white-space: nowrap;
}

.music-controls,
.video-controls-top-left,
.audio-controls-panel,
.level-display-left {
    max-width: calc(100vw - 24px);
}

/* Main game session */
#main-layout,
body.desktop-canvas-mode #main-layout {
    display: grid !important;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) minmax(230px, 300px);
    gap: var(--layout-gap);
    align-items: start;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: var(--page-gutter);
}

#main-layout.practice-mode {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
}

#main-layout.practice-mode #sidebar,
#main-layout.practice-mode #chat-container,
#main-layout.practice-mode #turn-container,
#main-layout.practice-mode #discord-promo {
    display: none !important;
}

#main-layout.practice-mode #game-container {
    width: 100%;
    max-width: none;
}

#sidebar,
body.desktop-canvas-mode #sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
    width: auto;
    min-width: 0;
}

#turn-container,
body.desktop-canvas-mode #turn-container,
.session-lobby-card {
    width: 100%;
    min-width: 0;
    padding: clamp(14px, 1.5vw, 20px);
    position: static;
    text-align: left;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-bg);
}

#game-container,
body.desktop-canvas-mode #game-container {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: clamp(16px, 2vw, 28px);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--game-bg);
    overflow: hidden;
}

#chat-container,
body.desktop-canvas-mode #chat-container {
    width: 100%;
    min-width: 0;
    height: min(620px, calc(100dvh - 2 * var(--page-gutter)));
    min-height: 360px;
    position: sticky;
    top: var(--page-gutter);
    align-self: start;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(7, 22, 38, .98), rgba(4, 12, 23, .98));
}

#game-container > h1 {
    width: 100%;
    margin: 0 0 clamp(14px, 1.5vw, 20px);
    padding-bottom: 12px;
    font-size: clamp(.95rem, 1.1vw, 1.2rem);
    letter-spacing: clamp(1px, .2vw, 3px);
    text-align: left;
    border-bottom: 1px solid rgba(200, 170, 110, .2);
}

.game-session-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 26px);
    width: 100%;
    margin: 4px 0 clamp(16px, 2vw, 24px);
}

.stage-timer {
    flex: 0 0 clamp(82px, 8vw, 112px);
    width: clamp(82px, 8vw, 112px);
    height: clamp(82px, 8vw, 112px);
}

.stage-title-wrap {
    min-width: 0;
}

.stage-title-wrap h2 {
    font-size: clamp(1.15rem, 2vw, 1.8rem);
    line-height: 1.1;
}

/* Scoreboard cards remain compact and never stretch across the full panel. */
#score-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 420px));
    justify-content: center;
    gap: 8px;
    width: 100%;
}

#score-list > li {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#score-list > li .score-player-info {
    min-width: 0;
    max-width: none;
}

/* Guess table: fluid columns on desktop, horizontal scrolling only when the
   viewport is genuinely too narrow to preserve readable cell sizes. */
#results-table {
    width: 100%;
    max-width: none;
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.header-row,
.guess-row,
body .header-row,
body .guess-row,
body.desktop-canvas-mode .header-row,
body.desktop-canvas-mode .guess-row {
    display: grid;
    grid-template-columns: minmax(82px, 1.45fr) repeat(7, minmax(54px, 1fr));
    gap: clamp(3px, .45vw, 8px);
    width: 100%;
    max-width: none;
    margin: 6px 0 0;
    align-items: stretch;
}

.header-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(.52rem, .65vw, .72rem);
}

.guess-row .box,
body .guess-row .box,
body.desktop-canvas-mode .guess-row .box {
    width: 100%;
    min-width: 0;
    min-height: clamp(56px, 6vw, 86px);
    height: auto;
    aspect-ratio: auto;
    padding: clamp(4px, .5vw, 8px);
    border-width: 1px;
    border-radius: 4px;
    font-size: clamp(.54rem, .7vw, .78rem);
}

.guess-row .champ-box,
body .guess-row .champ-box,
body.desktop-canvas-mode body .guess-row .champ-box {
    width: 100%;
    height: auto;
    min-height: clamp(56px, 6vw, 86px);
    aspect-ratio: 1 / 1;
}

/* Login and all overlays use the actual viewport, never the old canvas. */
.overlay,
body.desktop-canvas-mode .overlay,
#winner-overlay,
body.desktop-canvas-mode #winner-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: var(--page-gutter);
    overflow: auto;
    z-index: 40000;
}

#main-menu-overlay {
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(1, 10, 19, .72);
}

#main-menu-overlay > .video-container,
#main-menu-overlay > .video-container .login-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#main-menu-overlay > .video-container .login-bg-video {
    object-fit: cover;
}

#main-menu-overlay > .login-rift-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.epic-login-container,
body.desktop-canvas-mode #main-menu-overlay > .epic-login-container {
    width: min(100%, 420px);
    max-width: 420px;
    max-height: none;
    margin: auto;
    padding: clamp(28px, 3.5vw, 42px) clamp(22px, 3vw, 34px) clamp(24px, 3vw, 34px);
    position: relative;
    z-index: 2;
    transform: none;
    overflow: hidden;
}

.epic-title {
    font-size: clamp(2.8rem, 5vw, 4.6rem);
}

.login-action-buttons,
.input-area {
    width: 100%;
}

.input-area {
    display: flex;
    max-width: 720px;
    margin: clamp(14px, 2vw, 24px) auto;
    gap: 10px;
}

.input-area .search-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

#guess-btn {
    flex: 0 0 auto;
    margin-left: 0 !important;
}

/* Lobby */
.lobby-container-modern {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 320px);
    gap: var(--layout-gap);
    align-items: start;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: auto;
    padding: var(--page-gutter);
}

.lobby-settings-panel-modern,
.lobby-main-panel-modern,
.lobby-chat-modern {
    width: 100%;
    min-width: 0;
}

.lobby-settings-panel-modern,
.lobby-main-panel-modern,
.lobby-chat-modern,
.lobby-chat-modern #chat-container {
    max-height: calc(100dvh - 2 * var(--page-gutter));
}

.lobby-chat-modern #chat-container {
    position: static;
    height: min(620px, calc(100dvh - 2 * var(--page-gutter)));
}

/* Modal z-axis: dynamically created info dialogs and lobby-created dialogs
   must always sit above the lobby and its transformed/animated content. */
#hardcore-modal,
#blind-modal,
#draw-mode-info-modal,
#lobby-created-modal,
#create-lobby-password-modal,
#join-lobby-password-modal,
#leave-lobby-confirm-modal,
#leave-match-confirm-modal,
#logout-confirm-modal,
#player-stats-modal,
#leaderboards-modal,
#patchnotes-modal,
#howtoplay-modal,
.friends-invite-modal-overlay,
.invite-modal-overlay {
    z-index: 100000 !important;
}

.hardcore-modal-content,
.join-modal-panel,
.leaderboard-modal-content,
.patchnotes-modal-content,
.stats-modal,
.friends-invite-modal,
.invite-modal-content {
    position: relative;
    width: min(100%, 720px);
    max-height: min(88dvh, 820px);
    overflow: auto;
}

.info-circle,
button.info-circle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin-left: 8px;
    padding: 0 !important;
    line-height: 1;
    font-size: .78rem !important;
    border-radius: 50%;
}

/* Draw mode */
#draw-mode-section,
.draw-pick-panel,
.draw-waiting-panel,
.draw-active-panel {
    width: 100%;
    max-width: 720px;
}

#draw-canvas {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 500 / 340;
}

/* Medium screens: keep all three game areas usable, move chat below when
   horizontal space is no longer enough. */
@media (max-width: 1199px) {
    #main-layout,
    body.desktop-canvas-mode #main-layout {
        grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
    }

    #chat-container,
    body.desktop-canvas-mode #chat-container {
        grid-column: 1 / -1;
        position: static;
        width: 100%;
        height: 300px;
        min-height: 240px;
    }

    .lobby-container-modern {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .lobby-chat-modern {
        grid-column: 1 / -1;
    }

    .lobby-chat-modern #chat-container {
        height: 280px;
        max-height: 280px;
    }
}

@media (max-width: 899px) {
    body,
    body.desktop-canvas-mode {
        padding-bottom: 76px;
    }

    #main-layout,
    body.desktop-canvas-mode #main-layout,
    .lobby-container-modern {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 12px;
    }

    #sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    #sidebar #emote-picker {
        grid-column: 1 / -1;
    }

    #chat-container,
    body.desktop-canvas-mode #chat-container,
    .lobby-chat-modern #chat-container {
        grid-column: auto;
        height: 280px;
        max-height: 280px;
    }

    .game-session-header {
        align-items: center;
    }

    .stage-title-wrap h2 {
        font-size: 1.25rem;
    }

    .header-row,
    .guess-row,
    body .header-row,
    body .guess-row {
        min-width: 760px;
    }

    #results-table {
        overflow-x: auto;
    }
}

@media (max-width: 600px) {
    #main-menu-overlay {
        overflow: auto;
    }

    #sidebar {
        display: flex;
    }

    .game-session-header,
    .input-area,
    .draw-guess-row {
        flex-direction: column;
    }

    .stage-timer {
        flex-basis: 78px;
        width: 78px;
        height: 78px;
    }

    .input-area,
    #guess-btn,
    .draw-guess-input,
    .draw-guess-btn {
        width: 100%;
    }

    .online-counter {
        font-size: .78rem;
        padding: 7px 10px;
    }
}

/* ==========================================================================
   VISIBILITY AND DESKTOP POLISH
   ========================================================================== */

/* The fixed controls must stay readable above dark menu/game layers. */
.music-controls {
    z-index: 100001 !important;
    opacity: 1 !important;
    background: linear-gradient(145deg, rgba(18, 30, 43, .98), rgba(5, 14, 25, .98)) !important;
    border-color: rgba(240, 207, 123, .9) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .6), 0 0 18px rgba(200, 170, 110, .24) !important;
}

.music-controls .lol-button,
.music-controls #music-loop-toggle {
    color: #f5d98e !important;
    text-shadow: 0 1px 2px #000;
    background: rgba(200, 170, 110, .2) !important;
    border-color: rgba(240, 207, 123, .9) !important;
}

.music-controls .lol-button:hover,
.music-controls #music-loop-toggle:hover {
    background: rgba(240, 207, 123, .4) !important;
    color: #fff4cf !important;
}

#volume-slider {
    opacity: 1 !important;
    accent-color: #f0cf7b;
}

/* Keep the XP badge visible on the menu with a readable contrast. */
#top-xp-display.level-display-left {
    left: clamp(18px, 2vw, 36px);
    z-index: 100002 !important;
    opacity: 1 !important;
    visibility: visible;
    filter: none;
}

#top-xp-display.level-display-left.visible {
    display: flex !important;
}

#top-xp-display .circular-level-badge {
    width: clamp(104px, 8vw, 140px);
    height: clamp(104px, 8vw, 140px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(19, 30, 45, .96), rgba(4, 12, 22, .96));
    box-shadow: 0 0 28px rgba(200, 170, 110, .32), inset 0 0 18px rgba(255,255,255,.04);
}

#top-xp-display .level-num,
#top-xp-display .xp-info {
    color: #f2d27d !important;
    text-shadow: 0 2px 8px #000, 0 0 18px rgba(240, 207, 123, .7) !important;
}

#top-xp-display .xp-info {
    font-size: clamp(.8rem, 1vw, 1rem);
    font-weight: 800;
}

/* Friends is a normal modal, not a hidden content panel. */
#friends-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 110000 !important;
    width: min(92vw, 760px) !important;
    max-width: 760px !important;
    max-height: min(82dvh, 760px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(18, 43, 65, .99), rgba(6, 18, 31, .99)) !important;
    border: 1px solid rgba(240, 207, 123, .82) !important;
    box-shadow: 0 24px 90px rgba(0, 0, 0, .8), 0 0 30px rgba(200, 170, 110, .25) !important;
}

#friends-modal:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#friends-modal.active {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

#friends-modal .friends-modal-content {
    min-height: 120px;
    color: #e9eef2;
}

#friends-modal .friends-empty {
    color: #cbd6df;
}

/* Leaderboard gets a wide readable desktop surface. */
#leaderboards-modal {
    z-index: 110000 !important;
    padding: clamp(12px, 2vw, 32px) !important;
}

#leaderboards-modal .leaderboard-modal-content {
    width: min(94vw, 1500px) !important;
    max-width: 1500px !important;
    max-height: calc(100dvh - 32px);
    padding: clamp(24px, 3vw, 46px) !important;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(17, 37, 57, .99), rgba(6, 17, 30, .99)) !important;
}

#leaderboard-content.leaderboard-table-container {
    width: 100%;
    max-width: none;
    max-height: min(60dvh, 680px);
    overflow: auto;
}

#leaderboard-content .leaderboard-table {
    width: 100%;
    min-width: 980px;
    table-layout: auto;
}

#leaderboard-content .leaderboard-table th,
#leaderboard-content .leaderboard-table td {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

#leaderboard-content .leaderboard-table th {
    padding: 16px 14px;
}

#leaderboard-content .leaderboard-table td {
    padding: 15px 14px;
}

@media (max-width: 760px) {
    /* Keep the page itself overflow-free, but preserve a readable minimum
       width for the eight-column result table on phones. */
    #results-table {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    #results-table > .header-row,
    #results-table #guesses .guess-row {
        min-width: 560px;
    }
}

@media (max-width: 980px) {
    #lobby-overlay > .lobby-container-modern {
        width: min(calc(100vw - 24px), 720px) !important;
        height: auto;
        grid-template-columns: 1fr !important;
        grid-template-areas: "settings" "players" "chat";
    }

    #leaderboards-modal .leaderboard-modal-content {
        width: 96vw !important;
        padding: 20px 14px !important;
    }
}

/* ==========================================================================
   PROFILE AND GAME SESSION FINAL SIZING
   ========================================================================== */

#player-stats-modal {
    z-index: 120000 !important;
    padding: clamp(12px, 2vw, 32px) !important;
}

#player-stats-modal .stats-modal {
    width: min(94vw, 1280px) !important;
    max-width: 1280px !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(17, 38, 59, .99), rgba(6, 17, 30, .99)) !important;
}

#player-stats-modal #stats-header {
    padding: clamp(24px, 3vw, 42px) clamp(24px, 4vw, 58px);
}

#player-stats-modal .rank-and-points {
    gap: clamp(16px, 3vw, 40px);
}

#player-stats-modal .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.4vw, 20px);
    padding: clamp(22px, 3vw, 42px) clamp(24px, 4vw, 58px);
}

#player-stats-modal .stats-game-history {
    padding: 0 clamp(24px, 4vw, 58px) 32px;
}

#main-layout:not(.practice-mode) > #game-container {
    overflow: visible;
}

@media (max-width: 1050px) {
    #player-stats-modal .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    #player-stats-modal .stats-modal {
        width: 96vw !important;
        max-height: calc(100dvh - 20px) !important;
    }

    #player-stats-modal .stats-grid {
        grid-template-columns: 1fr !important;
        padding: 18px 14px;
    }

    #player-stats-modal #stats-header,
    #player-stats-modal .stats-game-history {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Compact login sizing: the login screen must fit above the persistent
   attribution bar even on short 720p viewports. */
#main-menu-overlay {
    padding: 18px 12px 96px;
}

.epic-login-container,
body.desktop-canvas-mode #main-menu-overlay > .epic-login-container {
    width: min(100%, 400px);
    max-width: 400px;
    padding: 24px 26px 22px;
}

.epic-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.epic-subtitle {
    font-size: clamp(.8rem, 1.5vw, 1.15rem);
    letter-spacing: clamp(3px, .6vw, 7px);
}

.login-welcome {
    margin: 16px 0 20px;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.auth-panel {
    padding: 18px 16px;
}

.auth-panel .input-group {
    margin-bottom: 14px;
}

.input-group label {
    margin-bottom: 5px;
    font-size: .72rem;
}

.epic-input {
    height: 42px;
    margin-right: 0;
    padding: 9px 12px;
    font-size: 1rem;
}

.login-action-buttons {
    gap: 9px;
    margin-top: 16px;
}

.epic-login-btn,
.epic-register-btn {
    min-height: 42px;
    padding: 10px 12px;
    font-size: .92rem;
}

.login-footer {
    margin-top: 18px;
}

.discord-link {
    padding: 9px 20px;
    font-size: .85rem;
}

/* The global attribution footer is controlled by the final viewport contract
   below.  It remains visible on login/menu/lobby screens and is hidden only
   while body.game-session-active is set. */

body:has(#main-menu-overlay.active) {
    padding-bottom: 0;
    overflow: hidden;
}

@media (max-width: 1399px) {
    .epic-login-container,
    body.desktop-canvas-mode #main-menu-overlay > .epic-login-container {
        width: min(100%, 380px);
        max-width: 380px;
        padding: 22px 22px 20px;
    }
}

/* ==========================================================================
   FINAL RESPONSIVE LAYOUT CONTRACT

   The file contains historical styles from earlier layout experiments.
   These rules are intentionally last and are the only authoritative sizing
   contract for the active game and lobby screens.
   ========================================================================== */

:root {
    --active-max-width: 1920px;
    --active-gutter: clamp(12px, 1.6vw, 32px);
    --active-gap: clamp(12px, 1.25vw, 24px);
    --active-panel: linear-gradient(145deg, rgba(15, 38, 60, .97), rgba(7, 22, 37, .97));
    --active-panel-soft: linear-gradient(145deg, rgba(18, 45, 68, .92), rgba(8, 25, 42, .92));
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(ellipse at 50% 10%, rgba(21, 68, 99, .34), transparent 50%),
        linear-gradient(115deg, #08111d 0%, #0b1e30 50%, #06353a 100%);
}

#app-shell {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    transform: none !important;
}

/* Game: centered maximum width, fluid columns, no right-side overflow. */
#main-layout,
body.desktop-canvas-mode #main-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--active-gap);
    width: min(calc(100% - (2 * var(--active-gutter))), var(--active-max-width));
    max-width: var(--active-max-width);
    margin: 0 auto;
    padding: var(--active-gutter) 0;
    align-items: start;
}

/* JS uses inline display:flex when entering practice mode. Convert only that
   value; display:none remains authoritative when returning to a menu/lobby. */
#main-layout[style*="display: flex"],
#main-layout[style*="display:flex"] {
    display: grid !important;
}

#main-layout[style*="display: none"],
#main-layout[style*="display:none"],
body.desktop-canvas-mode #main-layout[style*="display: none"],
body.desktop-canvas-mode #main-layout[style*="display:none"] {
    display: none !important;
}

#main-layout.practice-mode {
    grid-template-columns: minmax(0, 1fr);
    width: min(calc(100% - (2 * var(--active-gutter))), var(--active-max-width));
}

#main-layout.practice-mode #sidebar,
#main-layout.practice-mode #chat-container,
#main-layout.practice-mode #turn-container,
#main-layout.practice-mode #discord-promo {
    display: none !important;
}

#sidebar,
#game-container,
#chat-container {
    min-width: 0;
}

#sidebar > *,
#turn-container,
.session-lobby-card {
    background: var(--active-panel) !important;
    border-color: rgba(200, 170, 110, .48);
}

#game-container {
    width: 100%;
    max-width: none;
    background:
        linear-gradient(145deg, rgba(14, 40, 63, .98), rgba(6, 22, 37, .98)) !important;
    border-color: rgba(200, 170, 110, .5);
}

#scoreboard {
    background: linear-gradient(145deg, rgba(14, 39, 61, .9), rgba(7, 21, 35, .88)) !important;
    border: 1px solid rgba(127, 174, 204, .28);
}

/* One player row is a real full-width scoreboard bar. */
#score-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    justify-content: stretch !important;
}

#score-list > li {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    background: linear-gradient(90deg, rgba(45, 61, 42, .94), rgba(18, 35, 40, .94)) !important;
}

/* Lobby: settings left, player lobby center, chat right. */
#lobby-overlay {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-height: 100dvh;
    padding: var(--active-gutter);
    overflow: auto;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(18, 60, 88, .48), transparent 58%),
        rgba(2, 9, 17, .9);
}

.lobby-container-modern {
    display: grid !important;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas: "settings players chat";
    gap: var(--active-gap);
    width: min(100%, var(--active-max-width));
    max-width: var(--active-max-width);
    min-height: 0;
    margin: auto;
    padding: 0 !important;
}

.lobby-settings-panel-modern,
.lobby-main-panel-modern,
.lobby-chat-modern {
    width: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: none !important;
    background: var(--active-panel) !important;
    border: 1px solid rgba(200, 170, 110, .48);
    border-radius: 9px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .42);
}

.lobby-settings-panel-modern {
    grid-area: settings;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.lobby-main-panel-modern {
    grid-area: players;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.lobby-chat-modern {
    grid-area: chat;
    display: flex;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.lobby-chat-modern #chat-container {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    max-height: none !important;
    border: 0;
    border-radius: 0;
    background: linear-gradient(160deg, rgba(14, 38, 59, .98), rgba(6, 21, 35, .98)) !important;
}

.lobby-chat-modern #chat-messages {
    min-height: 0;
}

.lobby-main-panel-modern .player-grid-modern {
    max-height: none;
    min-height: 0;
    overflow-y: auto;
}

/* Shared panels are lifted slightly so text and controls remain readable. */
#chat-container,
.lobby-chat-modern,
.lobby-settings-panel-modern,
.lobby-main-panel-modern {
    color: #e9eef2;
}

#chat-container {
    background: linear-gradient(160deg, rgba(14, 38, 59, .98), rgba(6, 21, 35, .98)) !important;
}

#chat-header,
#chat-messages,
#chat-input-area {
    background-color: transparent;
}

/* Keep every mode-info button exactly the same physical size. */
.info-circle,
button.info-circle {
    display: inline-flex !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin-left: 8px;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 1240px) {
    #main-layout,
    body.desktop-canvas-mode #main-layout {
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    }

    #chat-container,
    body.desktop-canvas-mode #chat-container {
        grid-column: 1 / -1;
        position: static;
        width: 100%;
        height: 300px;
        min-height: 240px;
    }

    .lobby-container-modern {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(250px, 300px);
    }
}

@media (max-width: 980px) {
    #main-layout,
    body.desktop-canvas-mode #main-layout,
    .lobby-container-modern {
        grid-template-columns: 1fr;
        grid-template-areas: "settings" "players" "chat";
        width: min(calc(100% - 24px), 720px);
        height: auto;
        min-height: 0;
    }

    .lobby-settings-panel-modern,
    .lobby-main-panel-modern,
    .lobby-chat-modern {
        height: auto;
        max-height: none;
    }

    .lobby-chat-modern #chat-container {
        height: 300px !important;
    }
}

@media (max-width: 600px) {
    #main-layout,
    body.desktop-canvas-mode #main-layout,
    .lobby-container-modern {
        width: calc(100% - 16px);
        padding: 0;
    }

    #main-layout {
        padding-top: 58px;
    }

    .lobby-container-modern {
        gap: 10px;
    }
}

/* ======================================================================
   GAME SESSION RESET: CONTENT-HEIGHT PANELS + COMPACT GUESS TILES

   Keep the session panels as tall as their content.  The previous desktop
   stretch rule made the center panel run to the viewport bottom and the
   square champion tile forced every clue cell to become unnecessarily tall.
   ====================================================================== */

/* ======================================================================
   GAME SESSION TOP ANCHOR

   The session must begin at the top of the document.  Some of the older
   desktop-canvas rules still add a large vertical canvas/padding area, which
   makes the sidebar, game panel and chat appear halfway down large screens.
   ====================================================================== */

body.game-session-active #app-shell,
body.desktop-canvas-mode.game-session-active #app-shell {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
}

body.game-session-active #main-layout,
body.desktop-canvas-mode.game-session-active #main-layout {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: clamp(16px, 1.25vw, 28px) !important;
    padding-bottom: clamp(24px, 2.5vw, 48px) !important;
    align-items: start !important;
}

body.game-session-active #sidebar,
body.game-session-active #game-container,
body.game-session-active #chat-container,
body.desktop-canvas-mode.game-session-active #sidebar,
body.desktop-canvas-mode.game-session-active #game-container,
body.desktop-canvas-mode.game-session-active #chat-container {
    align-self: start !important;
}

/* The level/XP widget belongs to the menu only.  A later menu-visibility
   rule used to override the older game-session hide rule on real matches. */
body.game-session-active #top-xp-display,
body.desktop-canvas-mode.game-session-active #top-xp-display {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ======================================================================
   RESPONSIVE SESSION CONTRACT

   This is the single active layout contract for the existing application.
   The legacy selectors above are kept only for backwards compatibility with
   old markup; these rules deliberately reset their canvas assumptions.
   ====================================================================== */

:root {
    --layout-max-width: 1920px;
    --layout-gutter: clamp(12px, 2vw, 32px);
    --layout-gap: clamp(12px, 1.35vw, 26px);
    --sidebar-width: clamp(220px, 15vw, 280px);
    --chat-width: clamp(260px, 17vw, 340px);
    --panel-radius: 8px;
    --layer-base: 0;
    --layer-panel: 10;
    --layer-controls: 100;
    --layer-dropdown: 500;
    --layer-modal: 1000;
    --layer-confirmation: 1100;
    --layer-result: 1200;
}

html,
body,
body.desktop-canvas-mode {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body,
body.desktop-canvas-mode {
    display: block;
    position: relative;
}

#app-shell,
body.desktop-canvas-mode #app-shell {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    transform-origin: initial;
    overflow: visible;
}

/* Viewport anchored controls do not participate in the content grid. */
.music-controls,
#online-counter {
    position: fixed;
    z-index: var(--layer-controls);
}

.music-controls {
    top: clamp(10px, 1.4vw, 22px);
    left: clamp(10px, 1.4vw, 22px);
    right: auto;
    bottom: auto;
    max-width: calc(100vw - 20px);
}

#online-counter,
body.desktop-canvas-mode > #online-counter {
    top: clamp(10px, 1.4vw, 22px) !important;
    right: clamp(10px, 1.4vw, 22px) !important;
    left: auto !important;
    bottom: auto !important;
    width: auto;
    max-width: calc(100vw - 20px);
}

/* The three session areas share one top-aligned, content-height grid. */
#main-layout,
body.desktop-canvas-mode #main-layout {
    position: relative;
    inset: auto;
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--chat-width);
    grid-template-areas: "sidebar game chat";
    align-items: start !important;
    align-content: start;
    gap: var(--layout-gap);
    width: min(calc(100% - (2 * var(--layout-gutter))), var(--layout-max-width));
    max-width: var(--layout-max-width);
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto;
    padding: clamp(78px, 8vw, 118px) 0 clamp(28px, 4vw, 64px);
    overflow: visible;
    transform: none;
}

#sidebar,
#game-container,
#chat-container,
body.desktop-canvas-mode #sidebar,
body.desktop-canvas-mode #game-container,
body.desktop-canvas-mode #chat-container {
    position: relative;
    inset: auto;
    align-self: start !important;
    width: auto;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    max-height: none;
    margin: 0;
    overflow: visible;
    transform: none;
}

#sidebar { grid-area: sidebar; }
#game-container { grid-area: game; }
#chat-container { grid-area: chat; }

#sidebar > *,
#game-container > *,
#chat-container > * {
    min-width: 0;
}

#game-container {
    align-self: start;
    padding: clamp(18px, 1.5vw, 30px);
    overflow: visible;
}

#chat-container {
    display: flex;
    flex-direction: column;
    height: clamp(320px, 58vh, 680px) !important;
    max-height: calc(100vh - clamp(104px, 11vw, 160px));
    overflow: hidden;
}

#chat-messages {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

#chat-input-area { flex: 0 0 auto; }

/* Practice mode intentionally has no sidebar or chat. */
#main-layout.practice-mode,
body.desktop-canvas-mode #main-layout.practice-mode {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "game";
    width: min(calc(100% - (2 * var(--layout-gutter))), 1180px);
}

#main-layout.practice-mode #sidebar,
#main-layout.practice-mode #chat-container,
#main-layout.practice-mode #turn-container,
#main-layout.practice-mode #discord-promo {
    display: none;
}

/* Session header, scoreboard and input keep their hierarchy at every width. */
#game-container > h1 {
    margin: 0 0 clamp(14px, 1.2vw, 24px);
    font-size: clamp(1rem, 1.35vw, 1.55rem);
    line-height: 1.2;
}

#game-session-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 2vw, 32px);
    min-width: 0;
}

.stage-title-wrap { min-width: 0; }
.stage-title-wrap h2 {
    margin: 2px 0 4px;
    font-size: clamp(1.35rem, 2.1vw, 2.3rem);
    line-height: 1.1;
}

.stage-title-wrap p,
.stage-meta,
.stage-eyebrow {
    max-width: 100%;
    overflow-wrap: anywhere;
}

#scoreboard {
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: clamp(14px, 1.5vw, 26px) 0;
    padding: clamp(12px, 1.2vw, 20px);
}

#score-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#score-list > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 1vw, 18px);
    width: 100%;
    min-width: 0;
    min-height: 54px;
    box-sizing: border-box;
}

#score-list > li .score-player-info,
#score-list > li .score-player-name,
#score-list > li .score-player-rank {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-area {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(8px, .8vw, 14px);
    width: min(100%, 560px);
    margin: clamp(18px, 2vw, 32px) auto;
}

.search-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

#champion-input {
    width: 100%;
    min-width: 0;
    height: clamp(42px, 3.4vw, 54px);
    box-sizing: border-box;
    font-size: clamp(.78rem, .9vw, 1rem);
}

#guess-btn {
    flex: 0 0 clamp(104px, 9vw, 138px);
    min-width: 0;
    height: clamp(42px, 3.4vw, 54px);
    padding: 6px 10px;
    font-size: clamp(.78rem, 1vw, 1.05rem);
}

#results-table {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.header-row,
.guess-row,
body .header-row,
body .guess-row,
body.desktop-canvas-mode .header-row,
body.desktop-canvas-mode .guess-row {
    display: grid;
    grid-template-columns: minmax(82px, 1.2fr) repeat(7, minmax(0, 1fr));
    gap: clamp(3px, .35vw, 7px);
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.header-row span,
.guess-row .box {
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.guess-row .box,
body .guess-row .box,
body.desktop-canvas-mode .guess-row .box {
    height: clamp(58px, 4.5vw, 92px) !important;
    min-height: 0 !important;
    max-height: 92px !important;
    aspect-ratio: auto !important;
    box-sizing: border-box;
    padding: clamp(3px, .35vw, 7px) !important;
    font-size: clamp(.48rem, .58vw, .72rem) !important;
    line-height: 1.12;
    text-align: center;
}

.guess-row .champ-box,
body .guess-row .champ-box,
body.desktop-canvas-mode .guess-row .champ-box {
    width: 100% !important;
    height: clamp(58px, 4.5vw, 92px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

.guess-row .champ-box .champ-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modals must escape all content panels and remain clickable. */
.overlay,
.friends-invite-modal-overlay,
.invite-modal-overlay,
#winner-overlay,
#nocturne-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--layer-modal);
    isolation: isolate;
}

#leave-lobby-confirm-modal,
#leave-match-confirm-modal,
#create-lobby-password-modal,
#lobby-created-modal,
#join-lobby-password-modal,
#logout-confirm-modal {
    z-index: var(--layer-confirmation) !important;
}

#winner-overlay { z-index: var(--layer-result); }

.overlay.hidden,
.hidden { pointer-events: none; }
.overlay.active,
.overlay:not(.hidden) { pointer-events: auto; }

/* Lobby uses the same centered max-width system as the active session. */
#lobby-overlay {
    align-items: start;
    justify-content: center;
    padding: clamp(88px, 10vw, 150px) var(--layout-gutter) 40px;
    box-sizing: border-box;
    overflow-y: auto;
}

#lobby-overlay > .lobby-container-modern {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--chat-width);
    width: min(100%, var(--layout-max-width));
    max-width: var(--layout-max-width);
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    align-items: start;
}

.lobby-settings-panel-modern,
.lobby-main-panel-modern,
.lobby-chat-modern {
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;
}

.lobby-chat-modern #chat-container {
    height: clamp(320px, 58vh, 680px) !important;
    max-height: calc(100vh - clamp(104px, 11vw, 160px));
}

/* Controlled stacking: preserve readable dimensions instead of shrinking the
   complete desktop canvas into an unusable strip. */
@media (max-width: 1240px) {
    #main-layout,
    body.desktop-canvas-mode #main-layout {
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
        grid-template-areas: "sidebar game" "chat chat";
    }

    #chat-container,
    body.desktop-canvas-mode #chat-container {
        width: 100%;
        height: 300px !important;
        max-height: 300px;
    }

    #lobby-overlay > .lobby-container-modern {
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
        grid-template-areas: "settings players" "chat chat";
    }

    .lobby-settings-panel-modern { grid-area: settings; }
    .lobby-main-panel-modern { grid-area: players; }
    .lobby-chat-modern { grid-area: chat; }
}

@media (max-width: 760px) {
    :root {
        --layout-gutter: 10px;
        --layout-gap: 10px;
    }

    .music-controls {
        max-width: calc(100vw - 20px);
    }

    #online-counter {
        max-width: 48vw;
        font-size: .72rem;
    }

    #main-layout,
    body.desktop-canvas-mode #main-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "sidebar" "game" "chat";
        padding-top: 76px;
    }

    #main-layout.practice-mode,
    body.desktop-canvas-mode #main-layout.practice-mode {
        grid-template-areas: "game";
    }

    #game-session-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .input-area {
        width: 100%;
    }

    .header-row,
    .guess-row,
    body .header-row,
    body .guess-row,
    body.desktop-canvas-mode .header-row,
    body.desktop-canvas-mode .guess-row {
        grid-template-columns: minmax(66px, 1.1fr) repeat(7, minmax(48px, 1fr));
    }

    .guess-row .box,
    body .guess-row .box,
    body.desktop-canvas-mode .guess-row .box,
    .guess-row .champ-box,
    body .guess-row .champ-box,
    body.desktop-canvas-mode .guess-row .champ-box {
        height: 64px !important;
        max-height: 64px !important;
        font-size: .48rem !important;
    }

    #results-table { overflow-x: auto; }

    #lobby-overlay {
        padding: 76px 10px 24px;
    }

    #lobby-overlay > .lobby-container-modern {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "settings" "players" "chat";
    }

    .lobby-settings-panel-modern,
    .lobby-main-panel-modern,
    .lobby-chat-modern {
        width: 100%;
    }
}

/* Global layer contract: the same stacking order applies before and after
   the desktop body class is toggled, including phones and tablets. */
.music-controls,
.video-controls-top-left,
.audio-controls-panel,
#online-counter,
#top-xp-display,
body.desktop-canvas-mode #top-xp-display {
    z-index: var(--layer-controls) !important;
}

.search-results,
#search-results,
#emote-picker,
.emote-picker {
    z-index: var(--layer-dropdown) !important;
}

.overlay,
.friends-invite-modal-overlay,
.invite-modal-overlay,
#hardcore-modal,
#blind-modal,
#draw-mode-info-modal,
#player-stats-modal,
#leaderboards-modal,
#patchnotes-modal,
#howtoplay-modal {
    z-index: var(--layer-modal) !important;
}

#leave-lobby-confirm-modal,
#leave-match-confirm-modal,
#create-lobby-password-modal,
#lobby-created-modal,
#join-lobby-password-modal,
#logout-confirm-modal {
    z-index: var(--layer-confirmation) !important;
}

#winner-overlay,
#nocturne-overlay {
    z-index: var(--layer-result) !important;
}

@media (max-width: 420px) {
    #game-container { padding: 12px; }

    #guess-btn {
        flex-basis: 92px;
        font-size: .72rem;
    }

    #champion-input { font-size: .72rem; }
}

/* Attribution belongs to the document flow. A fixed footer used to cover
   the lower guess rows and made the session look like it continued below the
   viewport. */
.copyright-footer {
    position: relative !important;
    inset: auto !important;
    z-index: var(--layer-panel);
    width: 100%;
    box-sizing: border-box;
}

body.game-session-active .copyright-footer {
    display: block;
}

/* Override the older high-specificity session-height rule. The chat has a
   usable, fluid height on desktop but must not be forced to 620px on a 720px
   viewport. The medium/mobile stacking rules below still provide a compact
   300px chat row. */
#main-layout:not(.practice-mode) > #chat-container,
body.desktop-canvas-mode #main-layout:not(.practice-mode) > #chat-container,
#main-layout[style*="display: flex"] > #chat-container,
#main-layout[style*="display:flex"] > #chat-container {
    height: clamp(300px, 58vh, 620px) !important;
    max-height: calc(100vh - clamp(104px, 11vw, 160px)) !important;
}

@media (max-width: 1240px) {
    #main-layout:not(.practice-mode) > #chat-container,
    body.desktop-canvas-mode #main-layout:not(.practice-mode) > #chat-container,
    #main-layout[style*="display: flex"] > #chat-container,
    #main-layout[style*="display:flex"] > #chat-container {
        height: 300px !important;
        max-height: 300px !important;
    }
}

/* Final layer contract. These selectors intentionally mirror the legacy
   desktop-canvas selectors so the old !important rules cannot reintroduce
   100000-level stacking after the responsive layout has loaded. */
#online-counter,
body.desktop-canvas-mode > #online-counter {
    z-index: var(--layer-controls) !important;
}

body.desktop-canvas-mode > #hardcore-modal,
body.desktop-canvas-mode #app-shell > #hardcore-modal,
body.desktop-canvas-mode > #blind-modal,
body.desktop-canvas-mode #app-shell > #blind-modal,
body.desktop-canvas-mode > #draw-mode-info-modal,
body.desktop-canvas-mode #app-shell > #draw-mode-info-modal,
body.desktop-canvas-mode > #player-stats-modal,
body.desktop-canvas-mode #app-shell > #player-stats-modal,
body.desktop-canvas-mode > #leaderboards-modal,
body.desktop-canvas-mode #app-shell > #leaderboards-modal,
body.desktop-canvas-mode > #patchnotes-modal,
body.desktop-canvas-mode #app-shell > #patchnotes-modal,
body.desktop-canvas-mode > #howtoplay-modal,
body.desktop-canvas-mode #app-shell > #howtoplay-modal,
body.desktop-canvas-mode > .friends-invite-modal-overlay,
body.desktop-canvas-mode #app-shell > .friends-invite-modal-overlay,
body.desktop-canvas-mode > .invite-modal-overlay,
body.desktop-canvas-mode #app-shell > .invite-modal-overlay {
    z-index: var(--layer-modal) !important;
}

body.desktop-canvas-mode > #leave-lobby-confirm-modal,
body.desktop-canvas-mode #app-shell > #leave-lobby-confirm-modal,
body.desktop-canvas-mode > #leave-match-confirm-modal,
body.desktop-canvas-mode #app-shell > #leave-match-confirm-modal,
body.desktop-canvas-mode > #create-lobby-password-modal,
body.desktop-canvas-mode #app-shell > #create-lobby-password-modal,
body.desktop-canvas-mode > #lobby-created-modal,
body.desktop-canvas-mode #app-shell > #lobby-created-modal,
body.desktop-canvas-mode > #join-lobby-password-modal,
body.desktop-canvas-mode #app-shell > #join-lobby-password-modal,
body.desktop-canvas-mode > #logout-confirm-modal,
body.desktop-canvas-mode #app-shell > #logout-confirm-modal {
    z-index: var(--layer-confirmation) !important;
}

body.desktop-canvas-mode > #winner-overlay,
body.desktop-canvas-mode #app-shell > #winner-overlay,
body.desktop-canvas-mode #app-shell #winner-overlay,
body.desktop-canvas-mode #main-layout #winner-overlay {
    z-index: var(--layer-result) !important;
}

/* Some runtime overlays are mounted inside the active game container rather
   than directly under #app-shell. Keep the same contract for that location. */
body.desktop-canvas-mode #app-shell #hardcore-modal,
body.desktop-canvas-mode #app-shell #blind-modal,
body.desktop-canvas-mode #app-shell #draw-mode-info-modal,
body.desktop-canvas-mode #app-shell #player-stats-modal,
body.desktop-canvas-mode #app-shell #leaderboards-modal,
body.desktop-canvas-mode #app-shell #patchnotes-modal,
body.desktop-canvas-mode #app-shell #howtoplay-modal,
body.desktop-canvas-mode #app-shell .friends-invite-modal-overlay,
body.desktop-canvas-mode #app-shell .invite-modal-overlay,
body.desktop-canvas-mode #main-layout #hardcore-modal,
body.desktop-canvas-mode #main-layout #blind-modal,
body.desktop-canvas-mode #main-layout #draw-mode-info-modal,
body.desktop-canvas-mode #main-layout #player-stats-modal,
body.desktop-canvas-mode #main-layout #leaderboards-modal,
body.desktop-canvas-mode #main-layout #patchnotes-modal,
body.desktop-canvas-mode #main-layout #howtoplay-modal,
body.desktop-canvas-mode #main-layout .friends-invite-modal-overlay,
body.desktop-canvas-mode #main-layout .invite-modal-overlay {
    z-index: var(--layer-modal) !important;
}

body.desktop-canvas-mode #app-shell #leave-lobby-confirm-modal,
body.desktop-canvas-mode #app-shell #leave-match-confirm-modal,
body.desktop-canvas-mode #app-shell #create-lobby-password-modal,
body.desktop-canvas-mode #app-shell #lobby-created-modal,
body.desktop-canvas-mode #app-shell #join-lobby-password-modal,
body.desktop-canvas-mode #app-shell #logout-confirm-modal,
body.desktop-canvas-mode #main-layout #leave-lobby-confirm-modal,
body.desktop-canvas-mode #main-layout #leave-match-confirm-modal,
body.desktop-canvas-mode #main-layout #create-lobby-password-modal,
body.desktop-canvas-mode #main-layout #lobby-created-modal,
body.desktop-canvas-mode #main-layout #join-lobby-password-modal,
body.desktop-canvas-mode #main-layout #logout-confirm-modal {
    z-index: var(--layer-confirmation) !important;
}

/* An explicit visibility state from the client must win over the layout
   declaration. Without this, the !important grid rule kept the game session
   rendered behind the login/menu overlay and made the screen appear black. */
#main-layout[style*="display: none"],
#main-layout[style*="display:none"] {
    display: none !important;
}

/* The fixed music control occupies the upper-left viewport area. Start an
   active session just below it, while keeping the layout near the top instead
   of vertically centering the whole game. */
body.game-session-active #main-layout,
body.desktop-canvas-mode.game-session-active #main-layout {
    padding-top: clamp(76px, 6vw, 104px) !important;
}

@media (max-width: 760px) {
    body.game-session-active #main-layout,
    body.desktop-canvas-mode.game-session-active #main-layout {
        padding-top: 76px !important;
    }
}

/* Tablet/mobile breakpoint. At 768px the two-column session leaves too little
   room for eight readable result columns, so stack the three regions before
   the compact phone-only rules take over. */
@media (max-width: 899px) {
    :root {
        --layout-gutter: 10px;
        --layout-gap: 10px;
    }

    #main-layout,
    body.desktop-canvas-mode #main-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "sidebar" "game" "chat" !important;
        padding-top: 76px !important;
    }

    #main-layout.practice-mode,
    body.desktop-canvas-mode #main-layout.practice-mode {
        grid-template-areas: "game" !important;
    }

    #main-layout:not(.practice-mode) > #chat-container,
    body.desktop-canvas-mode #main-layout:not(.practice-mode) > #chat-container {
        height: 300px !important;
        max-height: 300px !important;
    }

    #game-session-header {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .input-area { width: 100%; }

    #lobby-overlay > .lobby-container-modern {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "settings" "players" "chat" !important;
    }

    .lobby-settings-panel-modern,
    .lobby-main-panel-modern,
    .lobby-chat-modern {
        width: 100%;
    }
}

/* FINAL ACTIVE CONTRACT
   This block is intentionally last. It is the only place where the
   responsive layout and layer contract may be overridden. */
.music-controls,
.video-controls-top-left,
.audio-controls-panel,
#online-counter,
#top-xp-display,
body.desktop-canvas-mode #top-xp-display {
    z-index: var(--layer-controls) !important;
}

.search-results,
#search-results,
#emote-picker,
.emote-picker {
    z-index: var(--layer-dropdown) !important;
}

.overlay,
.friends-invite-modal-overlay,
.invite-modal-overlay,
#hardcore-modal,
#blind-modal,
#draw-mode-info-modal,
#player-stats-modal,
#leaderboards-modal,
#patchnotes-modal,
#howtoplay-modal,
#join-menu,
#lobby-browser-modal,
#friends-modal,
.private-chat-modal {
    z-index: var(--layer-modal) !important;
}

#leave-lobby-confirm-modal,
#leave-match-confirm-modal,
#create-lobby-password-modal,
#lobby-created-modal,
#join-lobby-password-modal,
#logout-confirm-modal {
    z-index: var(--layer-confirmation) !important;
}

#winner-overlay,
#nocturne-overlay,
.server-restart-popup {
    z-index: var(--layer-result) !important;
}

/* Login and lobby are application surfaces rather than dialogs. */
#main-menu-overlay {
    z-index: var(--layer-base) !important;
}

#lobby-overlay,
#main-game-menu,
.chat-widget {
    z-index: var(--layer-panel) !important;
}

/* At medium widths the chat occupies a deliberate second grid row. */
@media (min-width: 900px) and (max-width: 1240px) {
    #main-layout:not(.practice-mode),
    body.desktop-canvas-mode #main-layout:not(.practice-mode) {
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) !important;
        grid-template-areas: "sidebar game" "chat chat" !important;
    }

    #main-layout:not(.practice-mode) > #sidebar {
        grid-area: sidebar !important;
    }

    #main-layout:not(.practice-mode) > #game-container {
        grid-area: game !important;
    }

    #main-layout:not(.practice-mode) > #chat-container {
        grid-area: chat !important;
        grid-column: auto !important;
        width: 100% !important;
    }
}

/* At small widths every region receives a full-width row. */
@media (max-width: 899px) {
    #main-layout:not(.practice-mode),
    body.desktop-canvas-mode #main-layout:not(.practice-mode) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "sidebar" "game" "chat" !important;
    }

    #main-layout:not(.practice-mode) > #sidebar {
        grid-area: sidebar !important;
    }

    #main-layout:not(.practice-mode) > #game-container {
        grid-area: game !important;
    }

    #main-layout:not(.practice-mode) > #chat-container {
        grid-area: chat !important;
        grid-column: auto !important;
        width: 100% !important;
    }
}

body.game-session-active #session-lobby-card .session-players-heading {
    display: none !important;
}

/* Final session sizing: compact controls and a controlled top offset. */
body.game-session-active .input-area,
body.desktop-canvas-mode.game-session-active .input-area {
    width: min(100%, 520px) !important;
    margin: clamp(16px, 1.6vw, 24px) auto !important;
    gap: clamp(8px, .75vw, 12px) !important;
}

body.game-session-active #champion-input,
body.desktop-canvas-mode.game-session-active #champion-input {
    height: clamp(44px, 2.6vw, 50px) !important;
    font-size: clamp(.76rem, .82vw, .92rem) !important;
}

body.game-session-active #guess-btn,
body.desktop-canvas-mode.game-session-active #guess-btn {
    flex: 0 0 auto !important;
    min-width: clamp(102px, 7.5vw, 124px) !important;
    height: clamp(44px, 2.6vw, 50px) !important;
    font-size: clamp(.74rem, .86vw, .96rem) !important;
}

/* The global online indicator stays visible and anchored to the viewport. */
body.game-session-active #online-counter,
body.desktop-canvas-mode.game-session-active #online-counter {
    display: flex !important;
}

body.game-session-active #main-layout,
body.desktop-canvas-mode.game-session-active #main-layout {
    padding-top: clamp(76px, 5vw, 92px) !important;
}

@media (max-width: 899px) {
    body.game-session-active #main-layout,
    body.desktop-canvas-mode.game-session-active #main-layout {
        padding-top: 76px !important;
    }
}

@media (max-width: 600px) {
    body.game-session-active #guess-btn,
    body.desktop-canvas-mode.game-session-active #guess-btn {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.game-session-active #main-layout,
    body.desktop-canvas-mode.game-session-active #main-layout {
        padding-top: 112px !important;
    }

    /* The fixed top controls must not cover the login card on phones. */
    #main-menu-overlay {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 88px 8px 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #main-menu-overlay > .epic-login-container,
    #main-menu-overlay .login-panel {
        width: min(100%, 380px) !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        padding: 20px 16px 18px !important;
    }

    #online-counter {
        top: 76px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* The XP/level badge is intentionally a main-menu affordance.  It must not
   reappear in a lobby when the login/menu transition or a stale inline style
   runs after the lobby has been rendered. */
body.lobby-active #top-xp-display,
body.game-session-active #top-xp-display,
body.desktop-canvas-mode.lobby-active #top-xp-display,
body.desktop-canvas-mode.game-session-active #top-xp-display {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Global attribution footer: anchor it to the viewport so it cannot appear
   at the top when an overlay (for example the lobby) is taken out of normal
   document flow.  A live game owns the full viewport and hides the footer so
   it never covers guess rows or chat. */
.copyright-footer {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: var(--layer-panel) !important;
    background: linear-gradient(180deg, rgba(4, 10, 22, .72), rgba(2, 7, 18, .96)) !important;
    pointer-events: auto !important;
}

.copyright-footer > div {
    padding: 7px 12px !important;
    font-size: clamp(.62rem, .65vw, .78rem) !important;
    line-height: 1.25 !important;
}

.copyright-footer p {
    margin: 2px 0 !important;
}

body.game-session-active .copyright-footer,
body.desktop-canvas-mode.game-session-active .copyright-footer {
    display: none !important;
}

/* Reserve the space occupied by the fixed footer on scrollable screens. This
   keeps the last lobby/menu controls reachable instead of letting the credit
   bar cover them on short viewports. */
#main-menu-overlay,
#lobby-overlay {
    box-sizing: border-box !important;
    padding-bottom: clamp(104px, 8vw, 136px) !important;
}

body.game-session-active #main-menu-overlay,
body.game-session-active #lobby-overlay {
    padding-bottom: 0 !important;
}

/* Desktop guess rows: give the champion artwork the visual weight of a real
   card while keeping every clue cell at the exact same row height. The
   champion column has a controlled minimum so the image cannot collapse when
   the center panel becomes narrower. */
@media (min-width: 701px) {
    .header-row,
    .guess-row,
    body .header-row,
    body .guess-row,
    body.desktop-canvas-mode .header-row,
    body.desktop-canvas-mode .guess-row {
        grid-template-columns: minmax(clamp(118px, 8vw, 144px), clamp(120px, 8vw, 144px)) repeat(7, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        column-gap: clamp(4px, .42vw, 8px) !important;
        row-gap: 0 !important;
    }

    .header-row {
        padding-inline: 4px !important;
    }

    .guess-row {
        padding: 0 4px !important;
        --champ-card-size: clamp(120px, 8vw, 144px);
        --clue-card-size: clamp(90px, 6vw, 108px);
        min-height: var(--champ-card-size) !important;
    }

    .guess-row .box,
    body .guess-row .box,
    body.desktop-canvas-mode .guess-row .box,
    .guess-row .champ-box,
    body .guess-row .champ-box,
    body.desktop-canvas-mode body .guess-row .champ-box {
        height: var(--clue-card-size) !important;
        max-height: var(--clue-card-size) !important;
        aspect-ratio: auto !important;
        min-height: 0 !important;
        font-size: clamp(.58rem, .62vw, .8rem) !important;
        line-height: 1.15 !important;
        box-sizing: border-box !important;
        align-self: center !important;
    }

    .guess-row .box:not(.champ-box),
    body .guess-row .box:not(.champ-box),
    body.desktop-canvas-mode .guess-row .box:not(.champ-box) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }

    .guess-row .champ-box,
    body .guess-row .champ-box,
    body.desktop-canvas-mode .guess-row .champ-box {
        padding: 0 !important;
        width: 100% !important;
        height: var(--champ-card-size) !important;
        max-height: var(--champ-card-size) !important;
        align-self: stretch !important;
        aspect-ratio: 1 / 1 !important;
    }

    .guess-row .champ-box .champ-icon,
    body .guess-row .champ-box .champ-icon,
    body.desktop-canvas-mode .guess-row .champ-box .champ-icon {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

@media (min-width: 1800px) {
    .header-row,
    .guess-row,
    body .header-row,
    body .guess-row,
    body.desktop-canvas-mode .header-row,
    body.desktop-canvas-mode .guess-row {
        grid-template-columns: 144px repeat(7, minmax(0, 1fr)) !important;
    }

    .guess-row .box,
    body .guess-row .box,
    body.desktop-canvas-mode .guess-row .box,
    .guess-row .champ-box,
    body .guess-row .champ-box,
    body.desktop-canvas-mode .guess-row .champ-box,
    .guess-row .champ-box {
        height: var(--clue-card-size, 108px) !important;
        max-height: var(--clue-card-size, 108px) !important;
    }

    .guess-row {
        --champ-card-size: 144px;
        --clue-card-size: 108px;
    }

    .guess-row .champ-box,
    body .guess-row .champ-box,
    body.desktop-canvas-mode .guess-row .champ-box {
        height: var(--champ-card-size) !important;
        max-height: var(--champ-card-size) !important;
        align-self: stretch !important;
    }
}

/* Practice uses the same comparison vocabulary as multiplayer. Keep the old
   class as a visual alias for any already-rendered legacy row. */
.wrong {
    background-color: #dc3545 !important;
    border-color: #ff4d5e !important;
    color: #ffffff !important;
}

/* The small duplicate speaker toggle is redundant with the top-left music
   controls and is intentionally removed from the visible desktop chrome. */
#audio-toggle-btn {
    display: none !important;
    pointer-events: none !important;
}

/* Levels are useful in the menu/profile, but the lobby player list should
   stay focused on readiness and player identity. */
body.lobby-active #lobby-players .lobby-player-level {
    display: none !important;
}

/* Final lobby grid contract. The lobby uses the same three-region geometry as
   an active session and deliberately stacks the chat before the viewport gets
   narrow enough to make the settings and player list unreadable. */
#lobby-overlay > .lobby-container-modern > .lobby-settings-panel-modern {
    grid-area: settings;
}

#lobby-overlay > .lobby-container-modern > .lobby-main-panel-modern {
    grid-area: main;
}

#lobby-overlay > .lobby-container-modern > .lobby-chat-modern {
    grid-area: chat;
    min-width: 0;
}

#lobby-overlay > .lobby-container-modern {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
}

#lobby-overlay > .lobby-container-modern > .lobby-settings-panel-modern,
#lobby-overlay > .lobby-container-modern > .lobby-main-panel-modern,
#lobby-overlay > .lobby-container-modern > .lobby-chat-modern {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
}

#lobby-overlay > .lobby-container-modern > .lobby-chat-modern {
    height: clamp(320px, 58vh, 680px) !important;
    overflow: hidden !important;
}

#lobby-overlay > .lobby-container-modern > .lobby-chat-modern #chat-container {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

@media (min-width: 1241px) {
    #lobby-overlay > .lobby-container-modern {
        grid-template-areas: "settings main chat" !important;
        /* Keep the lobby itself above the fixed credits footer.  The
           individual panels scroll internally when the settings list is
           taller than the available desktop viewport. */
        max-height: calc(100dvh - clamp(88px, 10vw, 150px) - clamp(104px, 8vw, 136px)) !important;
    }

    #lobby-overlay > .lobby-container-modern > .lobby-settings-panel-modern,
    #lobby-overlay > .lobby-container-modern > .lobby-main-panel-modern,
    #lobby-overlay > .lobby-container-modern > .lobby-chat-modern {
        max-height: calc(100dvh - clamp(88px, 10vw, 150px) - clamp(104px, 8vw, 136px)) !important;
    }

    #lobby-overlay > .lobby-container-modern > .lobby-settings-panel-modern,
    #lobby-overlay > .lobby-container-modern > .lobby-main-panel-modern {
        overflow-y: auto !important;
    }
}

@media (min-width: 900px) and (max-width: 1240px) {
    #lobby-overlay > .lobby-container-modern {
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) !important;
        grid-template-areas: "settings main" "chat chat" !important;
        width: min(100%, var(--layout-max-width));
    }

    #lobby-overlay > .lobby-container-modern > .lobby-chat-modern {
        width: 100%;
        height: 300px !important;
    }
}

@media (max-width: 899px) {
    #lobby-overlay > .lobby-container-modern {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "settings" "main" "chat" !important;
        width: 100%;
    }

    #lobby-overlay > .lobby-container-modern > .lobby-chat-modern {
        height: 300px !important;
    }
}

/* Dynamic guess rows should not cause browser scroll anchoring to move the
   entire session away from its top anchor. Users can still scroll manually. */
html,
body {
    overflow-anchor: none;
}

/* Keep the music control at one physical size. Older responsive rules scaled
   this fixed widget down, which made it unreadable and introduced a second
   viewport-scaling system. Its width is already constrained by max-width. */
.music-controls {
    transform: none !important;
    transform-origin: initial !important;
    box-sizing: border-box;
}

/* FullHD and WQHD use the same fixed session top anchor. The layout width
   may grow, but the visual starting line of the three panels stays identical. */
@media (min-width: 1241px) {
    body.game-session-active #main-layout,
    body.desktop-canvas-mode.game-session-active #main-layout {
        padding-top: 92px !important;
    }
}

/* Draw controls: the drawer gets precise, accessible controls without
   changing the existing stroke event contract.  Preset swatches remain quick
   choices; the native color input provides the full color spectrum. */
.draw-active-panel .draw-toolbar {
    align-items: stretch;
    gap: 10px 12px;
}

.draw-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.draw-palette-group {
    flex: 1 1 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.draw-control-label {
    color: #aeb8c8;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.draw-control-label output {
    color: #f0e6d2;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

.draw-colors {
    flex-wrap: wrap;
}

.draw-custom-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c8aa6e;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.draw-custom-color input[type="color"] {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid rgba(200, 170, 110, .75);
    border-radius: 5px;
    background: #101b2b;
    cursor: pointer;
}

.draw-custom-color output {
    color: #aeb8c8;
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.draw-range-control {
    flex: 1 1 155px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

.draw-range-control input[type="range"] {
    width: 100%;
    min-width: 120px;
    accent-color: #c8aa6e;
    cursor: pointer;
}

.draw-sizes {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.draw-sizes .draw-size-btn {
    min-width: 34px;
    padding-inline: 8px;
}

@media (max-width: 899px) {
    .draw-range-control {
        flex-basis: 140px;
    }
}

/* Short desktop viewports (most notably 1280x720 and 1366x768).  The login
   overlay must remain a real viewport layout: compact the card and let the
   overlay scroll instead of allowing the card to collide with the fixed
   credits footer or the top-left controls. */
@media (min-width: 900px) and (max-height: 820px) {
    #main-menu-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 78px var(--layout-gutter) 104px !important;
    }

    #main-menu-overlay > .epic-login-container,
    body.desktop-canvas-mode #main-menu-overlay > .epic-login-container {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        padding: 14px 16px 12px !important;
    }

    #main-menu-overlay .epic-title {
        font-size: clamp(2rem, 4vw, 2.8rem) !important;
        line-height: .95 !important;
    }

    #main-menu-overlay .epic-subtitle {
        font-size: .72rem !important;
        letter-spacing: 4px !important;
    }

    #main-menu-overlay .login-welcome {
        margin: 8px 0 10px !important;
        font-size: .9rem !important;
    }

    #main-menu-overlay .auth-panel {
        padding: 10px 12px !important;
    }

    #main-menu-overlay .auth-panel .input-group {
        margin-bottom: 8px !important;
    }

    #main-menu-overlay .input-group label {
        margin-bottom: 3px !important;
        font-size: .64rem !important;
    }

    #main-menu-overlay .epic-input {
        height: 34px !important;
        padding: 7px 10px !important;
        font-size: .9rem !important;
    }

    #main-menu-overlay .checkbox-label {
        font-size: .78rem !important;
    }

    #main-menu-overlay .login-action-buttons {
        gap: 6px !important;
        margin-top: 9px !important;
    }

    #main-menu-overlay .epic-login-btn,
    #main-menu-overlay .epic-register-btn {
        min-height: 36px !important;
        padding: 7px 10px !important;
        font-size: .78rem !important;
    }

    #main-menu-overlay .practice-login-btn {
        min-height: 40px !important;
        padding: 7px 10px !important;
        font-size: .78rem !important;
    }

    #main-menu-overlay .login-footer {
        margin-top: 9px !important;
    }

    #main-menu-overlay .discord-link {
        padding: 7px 14px !important;
        font-size: .74rem !important;
    }
}

/* Draw Mode canvas contract: give the drawing the main visual area and keep
   the scoreboard compact enough that the active canvas remains visible. The
   logical canvas size matches the server-side stroke bounds. */
#main-layout.draw-session #draw-mode-section {
    width: 100%;
    max-width: none;
}

#main-layout.draw-session .draw-active-panel,
#main-layout.draw-session .draw-pick-panel,
#main-layout.draw-session .draw-waiting-panel {
    width: 100%;
    max-width: min(100%, 940px);
    box-sizing: border-box;
}

#main-layout.draw-session #draw-canvas {
    width: min(100%, 900px) !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 900 / 560;
    background: #ffffff !important;
    border-color: rgba(200, 170, 110, .9);
}

#main-layout.draw-session #scoreboard {
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
}

#main-layout.draw-session #scoreboard h3 {
    margin: 0 0 8px !important;
}

#main-layout.draw-session #score-list {
    gap: 6px !important;
}

#main-layout.draw-session #score-list > li {
    min-height: 38px !important;
    padding: 7px 10px !important;
}

.draw-preview-btn {
    min-height: 32px;
    padding: 6px 12px;
    color: #010a13;
    background: linear-gradient(180deg, #e7c979, #b9954f);
    border: 1px solid #e7c979;
    border-radius: 4px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}

.draw-preview-btn:hover,
.draw-preview-btn:focus-visible {
    filter: brightness(1.12);
    transform: translateY(-1px);
    outline: none;
}

@media (min-width: 900px) {
    #main-layout.draw-session .draw-active-panel {
        padding: 16px 20px 20px;
    }
}

/* Draw Mode live fullscreen preview. The modal is created on demand so it
   never participates in the responsive game grid or changes its height. */
html.draw-preview-open,
body.draw-preview-open {
    overflow: hidden;
    overflow-y: hidden !important;
}

#draw-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vw, 44px);
    box-sizing: border-box;
    background: rgba(1, 7, 14, .92);
    backdrop-filter: blur(8px);
}

#draw-preview-modal.active {
    display: flex;
}

.draw-preview-dialog {
    display: flex;
    flex-direction: column;
    width: min(100%, 1500px);
    height: min(100%, 920px);
    min-height: 0;
    padding: clamp(14px, 1.8vw, 26px);
    box-sizing: border-box;
    color: #f0e6d2;
    background: linear-gradient(145deg, rgba(12, 30, 48, .99), rgba(5, 15, 28, .99));
    border: 1px solid rgba(200, 170, 110, .9);
    border-radius: 12px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .8), 0 0 22px rgba(200, 170, 110, .2);
}

.draw-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200, 170, 110, .3);
}

.draw-preview-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #c8aa6e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.draw-preview-header h2 {
    margin: 0;
    color: #f0e6d2;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
}

.draw-preview-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #c8aa6e;
    background: rgba(1, 10, 19, .65);
    border: 1px solid rgba(200, 170, 110, .55);
    border-radius: 6px;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.draw-preview-close:hover,
.draw-preview-close:focus-visible {
    color: #010a13;
    background: #c8aa6e;
    outline: none;
}

.draw-preview-stage {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(12px, 2vw, 28px) 0;
}

#draw-preview-canvas {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 900 / 560;
    background: #ffffff;
    border: 2px solid rgba(200, 170, 110, .9);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.draw-preview-footer {
    flex: 0 0 auto;
    color: #a09b8c;
    font-size: clamp(.68rem, .9vw, .8rem);
    text-align: center;
}

@media (max-width: 720px) {
    .draw-preview-dialog {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }

    .draw-preview-footer {
        display: none;
    }
}

/* Quick Play matchmaking overlay. It is a real modal layer above the menu,
   but it does not participate in the game/lobby grid. */
#matchmaking-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--layout-gutter) !important;
    background: rgba(2, 8, 17, .76) !important;
    backdrop-filter: blur(5px);
    z-index: var(--layer-modal) !important;
    isolation: isolate;
}

#matchmaking-overlay.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.matchmaking-panel {
    width: min(100%, 420px);
    box-sizing: border-box;
    padding: clamp(24px, 3vw, 38px);
    text-align: center;
    color: #f0e6d2;
    background: linear-gradient(145deg, rgba(15, 38, 60, .98), rgba(7, 22, 37, .98));
    border: 1px solid rgba(200, 170, 110, .72);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .58), 0 0 28px rgba(200, 170, 110, .16);
}

.matchmaking-kicker {
    color: #c8aa6e;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.matchmaking-panel h2 {
    margin: 10px 0 22px;
    color: #f0e6d2;
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: .08em;
}

.matchmaking-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 20px;
    border: 3px solid rgba(200, 170, 110, .22);
    border-top-color: #c8aa6e;
    border-right-color: #f0e6d2;
    border-radius: 50%;
    animation: matchmaking-spin .9s linear infinite;
}

.matchmaking-panel p {
    margin: 0 0 8px;
    color: #e9eef2;
    font-size: 1rem;
}

.matchmaking-panel small {
    display: block;
    min-height: 1.4em;
    color: #aeb8c8;
    font-size: .8rem;
}

#cancel-matchmaking-btn {
    width: min(100%, 220px);
    margin-top: 24px;
    min-height: 42px;
    border: 1px solid rgba(200, 170, 110, .72);
    color: #f0e6d2;
    background: rgba(10, 20, 33, .8);
}

#cancel-matchmaking-btn:hover {
    background: rgba(200, 170, 110, .16);
}

@keyframes matchmaking-spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Draw reference + compact session score layer
   ------------------------------------------------------------------------- */

/* The full scoreboard remains in the DOM for the existing update handlers,
   but no longer consumes the most valuable vertical space in a session. */
#main-layout #game-container > #scoreboard {
    display: none !important;
}

#session-score-summary {
    display: block;
    width: 100%;
    margin: 14px 0 16px;
    padding: 12px;
    box-sizing: border-box;
    color: #f0e6d2;
    background: linear-gradient(145deg, rgba(8, 24, 40, .88), rgba(4, 14, 26, .82));
    border: 1px solid rgba(200, 170, 110, .28);
    border-radius: 7px;
}

.session-score-summary-heading {
    margin-bottom: 8px;
    color: #c8aa6e;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: left;
}

.session-score-list {
    display: grid;
    gap: 5px;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 170, 110, .7) transparent;
}

.session-score-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px 7px;
    color: #aeb8c8;
    background: rgba(1, 10, 19, .48);
    border: 1px solid rgba(174, 184, 200, .12);
    border-radius: 4px;
    font-size: .75rem;
}

.session-score-row.is-self {
    color: #f0e6d2;
    border-color: rgba(0, 255, 157, .48);
    box-shadow: inset 2px 0 0 #00ff9d;
}

.session-score-rank {
    color: #c8aa6e;
    font-weight: 800;
    text-align: center;
}

.session-score-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-score-points {
    color: #f0e6d2;
    font-size: .75rem;
    white-space: nowrap;
}

.session-score-empty {
    padding: 5px 0;
    color: #7d8998;
    font-size: .72rem;
    font-style: italic;
}

#main-layout.draw-session .draw-toolbar {
    align-items: end;
}

.draw-artwork-preview-btn,
.draw-reference-toggle {
    box-sizing: border-box;
    min-height: 32px;
    border: 1px solid rgba(200, 170, 110, .72);
    border-radius: 4px;
    color: #010a13;
    background: linear-gradient(180deg, #e7c979, #b9954f);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap;
}

.draw-artwork-preview-btn {
    margin-left: auto;
    padding: 6px 12px;
    cursor: pointer;
}

.draw-artwork-preview-btn:hover,
.draw-artwork-preview-btn:focus-visible {
    filter: brightness(1.12);
    outline: none;
}

.draw-reference-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    cursor: pointer;
}

.draw-reference-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #c8aa6e;
}

.draw-canvas-stage {
    position: relative;
    width: min(100%, 900px);
    aspect-ratio: 900 / 560;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid rgba(200, 170, 110, .9);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

#main-layout.draw-session #draw-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.draw-reference-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity .18s ease;
}

.draw-reference-image.visible {
    opacity: .26;
}

.draw-guess-search {
    position: relative;
    z-index: 20;
    width: min(100%, 620px);
    margin: 14px auto 0;
}

.draw-guess-search .draw-guess-row {
    margin-top: 0;
}

.draw-guess-search #draw-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 500;
    width: auto;
    max-height: min(42vh, 360px);
    overflow-y: auto;
    box-sizing: border-box;
    background: rgba(5, 15, 28, .98);
    border: 1px solid rgba(200, 170, 110, .78);
    border-radius: 5px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .55);
}

.draw-guess-search #draw-suggestions .suggestion-item {
    min-height: 38px;
    box-sizing: border-box;
}

html.draw-artwork-open,
body.draw-artwork-open {
    overflow: hidden !important;
}

#draw-artwork-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vw, 44px);
    box-sizing: border-box;
    background: rgba(1, 7, 14, .94);
    backdrop-filter: blur(8px);
}

#draw-artwork-modal.active {
    display: flex;
}

.draw-artwork-dialog {
    display: flex;
    flex-direction: column;
    width: min(100%, 1500px);
    height: min(100%, 940px);
    min-height: 0;
    padding: clamp(14px, 1.8vw, 26px);
    box-sizing: border-box;
    color: #f0e6d2;
    background: linear-gradient(145deg, rgba(12, 30, 48, .99), rgba(5, 15, 28, .99));
    border: 1px solid rgba(200, 170, 110, .9);
    border-radius: 12px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .8), 0 0 22px rgba(200, 170, 110, .2);
}

.draw-artwork-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200, 170, 110, .3);
}

.draw-artwork-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #c8aa6e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.draw-artwork-header h2 {
    margin: 0;
    color: #f0e6d2;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
}

.draw-artwork-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #c8aa6e;
    background: rgba(1, 10, 19, .65);
    border: 1px solid rgba(200, 170, 110, .55);
    border-radius: 6px;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.draw-artwork-close:hover,
.draw-artwork-close:focus-visible {
    color: #010a13;
    background: #c8aa6e;
    outline: none;
}

.draw-artwork-stage {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(12px, 2vw, 28px) 0;
}

#draw-artwork-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.draw-artwork-fallback {
    color: #c8aa6e;
    font-size: 1.1rem;
}

.draw-artwork-footer {
    flex: 0 0 auto;
    color: #a09b8c;
    font-size: clamp(.68rem, .9vw, .8rem);
    text-align: center;
}

@media (max-width: 900px) {
    .draw-artwork-preview-btn {
        margin-left: 0;
    }

    .draw-reference-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* Draw tool, reference navigation and round-progress controls. */
.draw-header {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.draw-header-main,
.draw-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.draw-header-actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.draw-guess-progress {
    color: #00ff9d;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: right;
    white-space: nowrap;
}

.draw-toolbar {
    align-items: flex-end;
    justify-content: flex-start;
}

.draw-tools {
    flex-wrap: wrap;
}

.draw-tool-btn,
.draw-history-btn,
.draw-canvas-fullscreen-btn,
#draw-reference-center,
.draw-reference-settings select {
    min-height: 30px;
    padding: 5px 9px;
    color: #f0e6d2;
    background: rgba(200, 170, 110, .08);
    border: 1px solid rgba(200, 170, 110, .45);
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}

.draw-tool-btn:hover,
.draw-tool-btn.active-tool,
.draw-history-btn:hover,
.draw-canvas-fullscreen-btn:hover,
#draw-reference-center:hover {
    color: #010a13;
    background: #c8aa6e;
    border-color: #e7c979;
}

.draw-tool-btn.active-tool {
    box-shadow: 0 0 0 1px rgba(231, 201, 121, .25);
}

.draw-smoothing-toggle,
.draw-pan-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 8px;
    box-sizing: border-box;
    color: #aeb8c8;
    background: rgba(1, 10, 19, .36);
    border: 1px solid rgba(174, 184, 200, .2);
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.draw-smoothing-toggle input,
.draw-pan-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #c8aa6e;
}

.draw-reference-settings {
    display: flex;
    align-items: flex-end;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
    padding-top: 4px;
}

.draw-reference-range {
    display: flex;
    flex: 1 1 150px;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
    color: #aeb8c8;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.draw-reference-range span {
    white-space: nowrap;
}

.draw-reference-range output {
    color: #f0e6d2;
    font-variant-numeric: tabular-nums;
}

.draw-reference-range input[type="range"] {
    width: 100%;
    min-width: 120px;
    accent-color: #c8aa6e;
}

.draw-reference-settings select {
    min-width: 112px;
    color: #f0e6d2;
    background: #101b2b;
}

.draw-canvas-fullscreen-btn {
    margin: 8px auto 0;
}

.guesser-canvas-fullscreen-btn {
    display: block;
}

.draw-canvas-stage {
    touch-action: none;
}

.draw-canvas-stage.reference-pan-mode {
    cursor: grab;
}

.draw-canvas-stage.reference-pan-mode:active {
    cursor: grabbing;
}

.draw-canvas-stage.reference-pan-mode #draw-canvas {
    pointer-events: none;
}

.draw-reference-image.visible {
    opacity: var(--draw-reference-opacity, .26);
}

.draw-canvas-stage:fullscreen,
.draw-canvas-stage.draw-canvas-fullscreen {
    width: min(96vw, 1400px);
    height: min(90vh, 900px);
    aspect-ratio: auto;
    margin: auto;
    border-radius: 0;
}

.draw-canvas-stage:fullscreen #draw-canvas,
.draw-canvas-stage.draw-canvas-fullscreen #draw-canvas {
    width: 100% !important;
    height: 100% !important;
}

.draw-countdown-panel {
    display: grid;
    place-items: center;
    min-height: 260px;
    text-align: center;
}

.draw-countdown-label {
    color: #c8aa6e;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.draw-countdown-value {
    color: #f0e6d2;
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    line-height: 1;
    text-shadow: 0 0 20px rgba(200, 170, 110, .35);
}

.draw-countdown-panel p {
    margin: 0;
    color: #aeb8c8;
}

@media (max-width: 899px) {
    .draw-header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .draw-guess-progress {
        text-align: left;
    }

    .draw-reference-settings {
        align-items: stretch;
    }
}

@media (min-width: 900px) and (max-height: 820px) {
    .matchmaking-panel {
        padding: 20px 24px;
    }

    .matchmaking-panel h2 {
        margin: 7px 0 14px;
    }

    .matchmaking-spinner {
        width: 34px;
        height: 34px;
        margin-bottom: 14px;
    }

    #cancel-matchmaking-btn {
        margin-top: 16px;
        min-height: 36px;
    }
}