:root {
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

html, body, .screen {
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
::-webkit-scrollbar {
    display: none; 
}

body { 
    user-select: none; -webkit-user-select: none; 
    font-family: 'Outfit', sans-serif; 
    overflow-x: hidden; /* Ukrywamy tylko scroll na boki */
    color: #f8fafc;
    background: linear-gradient(-45deg, #020617, #0f172a, #1e1b4b, #09090b);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    min-height: 100vh; /* Pozwalamy stronie rosnąć w dół! */
    width: 100vw;
}

#wheel-container {
    transition: transform 5s cubic-bezier(0.1, 0, 0.1, 1);
}

    /* Elegancka animacja wejścia całego panelu */
    @keyframes wheelCinematic {
        0% { transform: translateY(40px) scale(0.95); opacity: 0; filter: blur(10px); }
        100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
    }
    .animate-wheel-cinematic { 
        animation: wheelCinematic 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; 
    }

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.theme-light { 
    filter: invert(1) hue-rotate(180deg); 
    background: linear-gradient(-45deg, #f8fafc, #e2e8f0, #cbd5e1, #f1f5f9);
    background-size: 400% 400%;
}
body.theme-light img, body.theme-light .keep-colors { filter: invert(1) hue-rotate(180deg); }

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}
.glass-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Definicja płynnego wjazdu ekranu */
@keyframes screenFadeIn {
    0% { 
        opacity: 0; 
        transform: scale(0.97) translateY(15px); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

.screen { 
    display: none; 
    min-height: 100vh; 
    width: 100%; 
    padding-bottom: 2rem;
}

.screen.active { 
    display: flex; 
    /* Animacja odpala się za każdym razem, gdy ekran staje się aktywny */
    animation: screenFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

#toast { 
    transition: opacity 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform: translate(-50%, 150%); 
    opacity: 0; 
    pointer-events: none; 
    z-index: 9999;
}
#toast.show { 
    transform: translate(-50%, 0); 
    opacity: 1; 
}

.dc-avatar { object-fit: cover; }

.streamer-blur { filter: blur(4px); opacity: 0.85; cursor: pointer; transition: all 0.3s; }
.streamer-blur.revealed { filter: blur(0); opacity: 1; }

.blur-text { filter: blur(8px); user-select: none; color: transparent; text-shadow: 0 0 20px rgba(100,150,255,1); transition: filter 0.5s; }

.btn-ready-pulse { animation: readyPulse 2s infinite; }
@keyframes readyPulse {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.6); }
    70% { box-shadow: 0 0 0 20px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

.settings-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.settings-panel.open { max-height: 800px; }

.custom-scrollbar::-webkit-scrollbar { display: none; width: 0; }
.custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.frame-gold { box-shadow: 0 0 20px rgba(250,204,21,0.5); border: 2px solid #facc15; }
.frame-neon { box-shadow: 0 0 25px rgba(217,70,239,0.6); border: 2px solid #d946ef; }
.frame-fire { box-shadow: 0 0 30px rgba(239,68,68,0.8); border: 2px solid #ef4444; animation: pulseFire 2s infinite; }

/* CZAT W PRAWYM PANELU */
#chat-backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#chat-backdrop.open { opacity: 1; pointer-events: auto; }

#chat-panel { 
    position: fixed; top: 0; right: 0; bottom: 0; 
    width: 100%; max-width: 400px;
    height: 100vh; 
    background: rgba(15, 23, 42, 0.95); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px); 
    border-left: 1px solid rgba(255,255,255,0.1); 
    border-top-left-radius: 2rem; border-bottom-left-radius: 2rem;
    transform: translateX(100%); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); 
    z-index: 100;
    display: flex; flex-direction: column;
    box-shadow: -10px 0 40px rgba(0,0,0,0.5);
}
#chat-panel.open { transform: translateX(0); }

.modern-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    transition: all 0.3s;
}
.modern-input:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: #818cf8; 
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.4);
    outline: none;
}

.icon-svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#input-room-code {
    text-shadow: 0 0 10px rgba(165, 180, 252, 0.3);
}

#input-room-code:focus {
    box-shadow: inset 0 0 20px rgba(79, 70, 229, 0.1);
}

@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

/* Płynny wjazd z dołu */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Subtelna lewitacja (np. dla awatarów) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}