/* --- GAMES UI LAYER --- */
#game-ui-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Clicks pass through to grid/users */
    z-index: 2000;
}


/* --- MENU & POPUPS --- */
#game-status-bar {
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    
    /* GLASSMORPHISM STYLE (Apple OS Style) */
    background: rgba(30, 30, 30, 0.3); /* Low opacity dark */
    backdrop-filter: blur(25px) saturate(180%); /* heavy blur */
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle white border */
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05); /* Inner light ring */
        
    border-radius: 50px; /* Pill shape */
    padding: 10px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    pointer-events: auto;
    transition: all 0.3s ease;
    z-index: 2001;
}

#game-timer { 
    font-size: 2.8rem; 
    font-weight: 700; 
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-variant-numeric: tabular-nums; 
    background: linear-gradient(180deg, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#game-timer.urgent { 
    background: linear-gradient(180deg, #ff6b6b, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse-urgent 0.5s infinite; 
}

#game-message {
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 3px;
    margin-top: 2px; 
    color: rgba(255, 255, 255, 0.7); 
    font-weight: 600;
}

#games-menu-popup, #media-menu-popup, #game-over-popup {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #1e1e1e; padding: 30px;
    border-radius: 15px; border: 2px solid #ff914d;
    text-align: center; pointer-events: auto;
    box-shadow: 0 0 50px rgba(0,0,0,0.9); width: 300px;
}

.game-select-btn {
    background: #2a2a2a; border: 1px solid #444; color: white;
    width: 100%; padding: 15px; margin-bottom: 10px;
    border-radius: 10px; cursor: pointer; display: flex; align-items: center;
    gap: 15px; text-align: left; transition: all 0.2s;
}
.game-select-btn:hover { background: #333; border-color: #ff914d; transform: scale(1.02); }
.game-select-btn .icon { font-size: 2rem; }
.game-select-btn .title { display: block; font-weight: bold; font-size: 1.1rem; color: #ff914d; }
.game-select-btn .desc { font-size: 0.8rem; color: #aaa; }

.close-btn-game, #close-game-over {
    background: transparent; border: 1px solid #666; color: #ccc;
    padding: 8px 20px; border-radius: 20px; cursor: pointer; margin-top: 10px;
}
.close-btn-game:hover { border-color: white; color: white; }

/* --- ANIMATIONS & TRANSITIONS --- */

/* 1. Target the existing elements in style.css and force transitions */
/* We use specific selectors to ensure we override default styles */
.user-wrapper .eye, 
.user-wrapper .pupil, 
.user-wrapper .ping {
    transition: background-color 1.5s ease, box-shadow 1.5s ease, transform 0.5s ease;
}

/* 2. INFECTED STATE ("IT") */

/* THE EYE (Sclera) - Cracks & Liquid Animation */
.user-wrapper.is-infected .eye {
    /* 1. The Cracks Pattern (Pure CSS jagged lines) */
    background-image: repeating-conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 10deg,
        rgba(150, 0, 0, 0.9) 10deg,    /* Crack Edge */
        rgba(200, 0, 0, 0.9) 11deg,    /* Crack Core */
        rgba(150, 0, 0, 0.9) 12deg,    /* Crack Edge */
        transparent 12deg,
        transparent 25deg
    );
    
    /* 2. Animation: Expand cracks + Fill with liquid color */
    animation: infection-spread 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* Ensure cracks render crisply */
    background-repeat: no-repeat;
    background-position: center;
}

/* THE PUPIL - Keep original shape, just make it red & glowing */
.user-wrapper.is-infected .pupil {
    background-color: #ff0000 !important;
    box-shadow: 0 0 15px #ff0000;
    /* We removed width/height/border-radius so it inherits the Cat/Anime shape */
    transition: background-color 0.1s;
}

/* THE PING - Color Match */
.user-wrapper.is-infected .ping {
    background-color: #ff0000 !important;
    box-shadow: 0 0 10px #ff0000;
}

/* ANIMATION DEFINITION: Cracks appearing -> Liquid Filling */
@keyframes infection-spread {
    0% {
        background-color: #fff;             /* Start: Pure White */
        background-size: 0% 0%;             /* Start: Cracks hidden in center */
        box-shadow: inset 0 0 0 transparent;
    }
    30% {
        background-color: #ffe6e6;          /* Slight tint */
        background-size: 80% 80%;           /* Cracks burst outwards */
        box-shadow: inset 0 0 10px #ff0000; /* Edges start glowing */
    }
    100% {
        background-color: #4a0000;          /* End: Dark Red Liquid Fill */
        background-size: 150% 150%;         /* Cracks fully cover eye */
        box-shadow: 
            inset 0 0 20px #ff0000,         /* Inner Glow */
            0 0 15px #ff0000;               /* Outer Glow */
        border-color: #ff0000;
    }
}

/* Breathing Pulse for the IT player (Keeps them looking alive after infection) */
.user-wrapper.is-infected {
    animation: infected-breathing 1.5s ease-in-out infinite alternate;
    z-index: 800; /* Bring IT to top */
}

@keyframes infected-breathing {
    0% { transform: translate(-50%, -50%) scale(1.05); } 
    100% { transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 0 8px rgba(255,0,0,0.6)); } 
}

/* 3. TAG INDICATOR (The text above head) */
.tag-indicator {
    position: absolute; top: -50px; left: 50%;
    transform: translateX(-50%);
    background: #ff0000; color: white;
    font-weight: bold; padding: 4px 10px;
    border-radius: 20px; font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    animation: drop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 700;
}
@keyframes drop-in {
    from { transform: translateX(-50%) translateY(20px) scale(0); opacity: 0; }
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* 4. GAME OVER TEXT */
#game-over-title { font-size: 2.5rem; margin: 0 0 10px 0; }
#game-over-msg { font-size: 1.2rem; color: #ccc; margin-bottom: 20px; }

/* Add this to games.css */
#game-over-title {
    text-transform: uppercase;
    letter-spacing: 2px;
}
/* --- GAMES LIGHTING EFFECTS --- */

/* The Vignette & Red Glow Overlay */
body.game-mode-scary::after {
    content: '';
    position: fixed;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    pointer-events: none; /* Let clicks pass through */
    z-index: 100; 
    
    background: radial-gradient(
        circle at var(--light-x, 50vw) var(--light-y, 50vh), 
        transparent 15%, 
        rgba(0, 0, 0, 0.95) 40%, 
        rgba(30, 0, 0, 0.98) 100%
    );
    box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.15);
    
    /* Animation */
    animation: horror-flicker 0.5s infinite;
}

/* Pulse the lighting to create tension */
@keyframes horror-flicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.4; } /* Quick flash of light */
    4% { opacity: 1; }
    50% { opacity: 0.8; box-shadow: inset 0 0 200px rgba(255, 0, 0, 0.3); } /* Throb red */
    90% { opacity: 0.9; }
    92% { opacity: 0.2; } /* Flicker dark */
    94% { opacity: 0.9; }
}

/* --- TRANSPARENT GLASS UNO UI --- */

#uno-game-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1500; display: none;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", sans-serif;
}

/* --- CARDS (Apple-style Glassmorphism) --- */
.uno-center-stacks {
    position: absolute; top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; gap: 40px; pointer-events: auto;
}

.uno-card {
    width: 90px; height: 135px; /* Slightly larger for better visuals */
    
    /* GLASS BASE */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.5), 
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        
    border-radius: 16px;
    display: flex; justify-content: center; align-items: center;
    font-weight: 700; font-size: 2.5rem; 
    user-select: none; position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: white;
}

/* Card Tints & Glows (Instead of solid colors) */
.uno-card.c-red { 
    background: linear-gradient(145deg, rgba(255, 59, 48, 0.1), rgba(255, 59, 48, 0.05));
    border-color: rgba(255, 59, 48, 0.5);
    text-shadow: 0 0 15px rgba(255, 59, 48, 0.8);
    box-shadow: 0 10px 30px rgba(255, 59, 48, 0.15);
}
.uno-card.c-blue { 
    background: linear-gradient(145deg, rgba(10, 132, 255, 0.1), rgba(10, 132, 255, 0.05));
    border-color: rgba(10, 132, 255, 0.5);
    text-shadow: 0 0 15px rgba(10, 132, 255, 0.8);
    box-shadow: 0 10px 30px rgba(10, 132, 255, 0.15);
}
.uno-card.c-green { 
    background: linear-gradient(145deg, rgba(48, 209, 88, 0.1), rgba(48, 209, 88, 0.05));
    border-color: rgba(48, 209, 88, 0.5);
    text-shadow: 0 0 15px rgba(48, 209, 88, 0.8);
    box-shadow: 0 10px 30px rgba(48, 209, 88, 0.15);
}
.uno-card.c-yellow { 
    background: linear-gradient(145deg, rgba(255, 214, 10, 0.1), rgba(255, 214, 10, 0.05));
    border-color: rgba(255, 214, 10, 0.5);
    text-shadow: 0 0 15px rgba(255, 214, 10, 0.8);
    box-shadow: 0 10px 30px rgba(255, 214, 10, 0.15);
}

/* Wild Cards - Prismatic Glass */
.uno-card.c-wild {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.uno-card.c-wild span {
    background: linear-gradient(45deg, #ff3b30, #ffcc00, #34c759, #007aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

/* Deck Hover Effect */
.uno-deck { cursor: pointer; color: rgba(255,255,255,0.6); font-size: 1rem; letter-spacing: 2px;}
.uno-deck:hover { 
    transform: translateY(-5px) scale(1.05); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6); 
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}

/* --- PLAYER HAND --- */
#uno-player-hand {
    position: fixed; /* Fixed to stick to screen bottom */
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* CRITICAL FIX: Make container taller than the hovered card's pop-up height */
    height: 300px; 
    
    /* Layout */
    display: flex;
    align-items: flex-end; /* Push cards to the bottom */
    justify-content: center; /* Center the hand */
    
    /* Spacing */
    padding-bottom: 30px; /* Lift cards slightly off the screen edge */
    box-sizing: border-box;
    
    /* Scrolling Logic */
    overflow-x: auto; 
    overflow-y: hidden; /* Hide vertical, but box is now 300px tall so cards won't clip */
    
    /* Interaction Logic */
    pointer-events: none; /* Let clicks pass through the empty top space */
    z-index: 1500;
    
    /* Hide Scrollbars */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#uno-player-hand::-webkit-scrollbar {
    display: none;
}

.uno-hand-card {
    /* Existing styles */
    cursor: pointer;
    backdrop-filter: blur(12px);
    background: rgba(30, 30, 30, 0.6);
    flex-shrink: 0; 
    
    /* CRITICAL FIX: Re-enable clicks */
    pointer-events: auto; 
    
    /* Ensure they pop UP, not out */
    transform-origin: bottom center;
    transition: transform 0.2s ease, margin-left 0.3s ease, box-shadow 0.2s;
}
.uno-hand-card:hover {
    transform: translateY(-50px) scale(1.1) rotate(0deg) !important;
    z-index: 100; 
    margin: 0 30px; /* Push neighbors away */
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

/* --- OPPONENT HANDS (Mini Glass) --- */
.uno-opponent-hand {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: -20px; 
    pointer-events: none;
    transform: translate(-50%, 60px); 
}

.uno-card-back {
    width: 35px; height: 50px; 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin-right: -20px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}


.uno-card.c-wild span {
    background: linear-gradient(45deg, #ff4444, #ff914d, #4dff4d, #4d4dff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5rem;
}

/* Deck & Discard */
.uno-deck { cursor: pointer; border: 1px solid rgba(255,255,255,0.3); }
.uno-deck::after { content: "UNO"; font-size: 0.8rem; opacity: 0.5; }
.uno-deck:hover { transform: translateY(-5px); box-shadow: 0 0 25px rgba(255, 145, 77, 0.3); border-color: #ff914d; }

/* --- OPPONENT HANDS (Hidden Cards) --- */
.uno-opponent-hand {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: -20px; /* Tight overlap */
    pointer-events: none;
    transform: translate(-50%, 60px); /* Push below the avatar */
}

.uno-card-back {
    width: 30px; height: 45px; /* Smaller */
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 145, 77, 0.3);
    border-radius: 4px;
    margin-right: -15px; /* Fan effect */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* --- PLAYER HAND --- */
#uno-player-hand {
    position: absolute; 
    bottom: 30px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex; 
    /* Default overlap, will be overridden by JS if crowded */
    gap: -25px; 
    pointer-events: auto; 
    padding: 20px 40px; /* Extra side padding for hover expansion */
    align-items: flex-end;
    
    /* NEW: Constrain width and allow scroll if absolutely necessary */
    max-width: 95vw;
    overflow-x: auto; 
    overflow-y: visible; /* Allow hover pop-up to go outside */
    
    /* Hide Scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
#uno-player-hand::-webkit-scrollbar {
    display: none;
}

.uno-hand-card {
    cursor: pointer;
    backdrop-filter: blur(12px);
    background: rgba(30, 30, 30, 0.6);
    transform-origin: bottom center;
    flex-shrink: 0; /* Prevent cards from being crushed */
    
    /* Smoothly animate the squishing effect */
    transition: transform 0.2s ease, margin-left 0.3s ease, box-shadow 0.2s;
}

/* IMPROVED HOVER FOR CROWDED HANDS */
.uno-hand-card:hover {
    transform: translateY(-50px) scale(1.2) !important;
    z-index: 1000; /* Ensure it's on top of everything */
    margin: 0 40px; /* Push neighbors away significantly */
    background: rgba(50, 50, 50, 0.95);
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    border-color: #fff;
}

/* --- ANIMATIONS --- */
/* The flying card itself */
.flying-card-anim {
    position: absolute;
    width: 40px; height: 60px;
    background: rgba(30,30,30,0.9);
    border: 1px solid #ff914d;
    border-radius: 6px;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    animation: fly-to-target 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fly-to-target {
    0% { top: 50%; left: 50%; transform: scale(0.2) rotate(0deg); opacity: 1; }
    100% { top: var(--ty); left: var(--tx); transform: scale(1) rotate(360deg); opacity: 0; }
}

/* --- COLOR PICKER --- */
#uno-color-picker {
    position: absolute; top: 45%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(15px);
    padding: 20px; border-radius: 50px;
    display: none; grid-template-columns: 1fr 1fr; gap: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: auto;
}
.color-btn { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: transform 0.2s; border: 2px solid rgba(255,255,255,0.2); }
.color-btn:hover { transform: scale(1.2); border-color: #fff; }
.bg-red { background: #ff4444; box-shadow: 0 0 15px #ff4444; }
.bg-blue { background: #4d4dff; box-shadow: 0 0 15px #4d4dff; }
.bg-green { background: #4dff4d; box-shadow: 0 0 15px #4dff4d; }
.bg-yellow { background: #ff914d; box-shadow: 0 0 15px #ff914d; }

/* --- ACTIVE TURN --- */
.user-wrapper.uno-active-turn .eye {
    transform: scale(1.3);
    border-color: #fff;
    box-shadow: 0 0 15px #ff914d, inset 0 0 10px #ff914d !important;
    transition: all 0.3s;
}