body {
    /* Replace flat black with the BOI image as the page backdrop */
    background: url('BOIIIIIII_SIX_SEVEN_3F3F3F3F3F.webp') center center / 300px repeat fixed;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    transition: background-color 0.5s, filter 0.5s;
    animation: body-ruin-flicker 0.2s infinite steps(1); /* ADDED CHAOS */
}

#game-container {
    /* Blend the container with the BOI artwork: slightly dark overlay to keep text legible */
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('BOIIIIIII_SIX_SEVEN_3F3F3F3F3F.webp') center center / cover no-repeat;
    border: 3px solid #6200EE; /* Vibrant Purple/Indigo primary border color */
    box-shadow: 0 0 20px rgba(98, 0, 238, 0.4); /* Glowing effect */
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: saturate(1.1) contrast(1.02);
    transition: background-color 0.5s, box-shadow 0.5s, border-color 0.5s, filter 0.5s;
    color: #E0E0E0; /* Light text color */
    animation: ruin-flicker 0.1s infinite alternate; /* ADDED CHAOS */
}

@keyframes ruin-flicker {
    0% { transform: scale(1.0); filter: brightness(1.0) hue-rotate(0deg); border-color: #6200EE; }
    50% { transform: scale(1.005); filter: brightness(1.2) hue-rotate(15deg); border-color: #FF00FF; }
    100% { transform: scale(1.0); filter: brightness(0.8) hue-rotate(-10deg); border-color: #00FFFF; }
}

@keyframes body-ruin-flicker {
    0% { background-color: #000000; }
    49% { background-color: #000000; }
    50% { background-color: #330033; }
    100% { background-color: #330033; }
}

h2 {
    color: #00E5FF; /* Bright Cyan secondary color for headers */
    border-bottom: 2px solid #00B8D4;
    padding-bottom: 5px;
    margin-top: 0;
}

/* Stats Panel */
#stats-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.5fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #333333;
    border-radius: 8px;
    background-color: #242424; /* Dark panel background */
}

#uncollected-income-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-left: 1px solid #444444; /* Darker separator */
    padding-left: 10px;
}
#income-display {
    margin-bottom: 5px;
    font-size: 1.1em;
    color: #FFEB3B; /* Vibrant yellow for attention */
}

.stat-box {
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px 0;
    color: #B3E5FC; /* Light Blue text for stats */
}

#collect-income-button {
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    background-color: #00C853; /* Vibrant Green for collection */
    color: white;
    border: none;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s;
}

#collect-income-button:hover {
    background-color: #00A344;
    box-shadow: 0 0 8px rgba(0, 200, 83, 0.5);
}

/* Protection Panel */
#protection-panel {
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #6200EE;
    border-radius: 8px;
    background-color: #2C2C2C; /* Slightly lighter dark background */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#protection-panel h3 {
    margin: 0;
    font-size: 1.2em;
    color: #FFCC80; /* Warm color for contrast */
    border-bottom: none;
    padding-bottom: 0;
    flex-basis: 100%;
}

#protection-status {
    font-weight: bold;
    color: #FF4444; /* Bright Red when unprotected */
    flex-basis: 50%;
    margin: 0;
}

#protection-cost-info {
    font-size: 0.9em;
    color: #AAAAAA;
    flex-basis: 40%;
    text-align: right;
    margin: 0;
}

#protection-actions {
    display: flex;
    gap: 10px;
    flex-basis: 100%;
    margin-top: 5px;
}

#activate-protection-button {
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    background-color: #00C853; /* Green for activation */
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s;
    flex: 1;
}

#upgrade-protection-button {
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    background-color: #FF5252; /* Red for high cost action */
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s;
    flex: 1;
}

#activate-protection-button:hover:not(:disabled) {
    background-color: #388E3C;
}

#upgrade-protection-button:hover:not(:disabled) {
    background-color: #FF1744;
}

/* Ensure protected status color is distinct */
.protected-status {
    color: #00E676 !important; /* Vibrant Green when protected */
}

.primary-button {
    background-color: #6200EE;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}


/* Conveyor Belt Area */
#conveyor-belt-area {
    margin-bottom: 30px;
}

#conveyor-track {
    position: relative;
    width: 100%;
    height: 100px;
    background: repeating-linear-gradient(90deg, #333, #333 10px, #444 10px, #444 20px); /* Darker metallic look */
    border: 5px solid #616161; /* Darker frame */
    overflow: hidden;
    box-sizing: border-box;
}

.brainrot-item.conveyor, .brainrot-item.inventory, .inventory-slot {
    /* Make every brainrot card and empty slot use the BOI artwork as textured card background */
    background-image: url('BOIIIIIII_SIX_SEVEN_3F3F3F3F3F.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* keep the existing dark overlay so text remains readable */
    box-shadow: 0 0 5px rgba(0,0,0,0.7) inset, 0 0 8px rgba(255,255,255,0.03);
    color: #FFF;
}

.brainrot-item.conveyor {
    position: absolute;
    top: 5px;
    /* Left is initially 0, position controlled by JS translateX */
    left: 0; 
    width: 150px;
    height: 90px;
    padding: 5px;
    background-color: #2C2C2C; /* Dark card background */
    border: 3px solid; /* Color based on rarity set by JS */
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s linear, opacity 0.3s; /* Added opacity transition */
    z-index: 10;
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    pointer-events: all;
    color: #E0E0E0; /* Light text */
}

.brainrot-item.conveyor:hover {
    box-shadow: 0 0 10px #FFD700; /* Gold glow on hover */
    z-index: 20;
}

/* Detailed Brainrot Styling */

.brainrot-item .header-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    line-height: 1.2;
}

.brainrot-item .name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    font-size: 1em;
    color: #FFFFFF;
}

.brainrot-item .rarity {
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 5px;
    text-align: right;
    white-space: nowrap;
}

.brainrot-item .mutation-detail {
    font-size: 0.7em;
    color: #BBBBBB;
    margin-top: -3px;
    line-height: 1.1;
}

.brainrot-item .income-info,
.brainrot-item .price-info {
    margin-top: 3px;
    font-size: 0.75em;
    line-height: 1.2;
}

.brainrot-item .income-value,
.brainrot-item .price-value {
    font-weight: bold;
}

.brainrot-item .income-value {
    color: #69F0AE; /* Bright Green for income */
}
.brainrot-item .income-breakdown {
    color: #999;
    font-size: 0.9em;
}

.brainrot-item.conveyor .price-value {
    color: #FF5252; /* Bright Red for buy price */
}

.brainrot-item.inventory .price-value {
    color: #00E676; /* Vibrant Green for sell price */
}


/* Inventory Area */
#inventory-area {
    margin-top: 20px;
}

#inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid #6200EE;
    background-color: #242424;
    border-radius: 5px;
}

/* Base Viewing Grid (same layout as inventory but for viewing) */
.inventory-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px;
    border: 1px solid #6200EE;
    background-color: #242424;
    border-radius: 5px;
}
.inventory-grid-view .brainrot-item.inventory {
    cursor: default; /* No selling/interaction here normally */
}
.inventory-grid-view .brainrot-item.theft-target {
    cursor: pointer;
    box-shadow: 0 0 10px 3px #FFEB3B;
    transition: box-shadow 0.2s;
}
.inventory-grid-view .brainrot-item.theft-target:hover {
    box-shadow: 0 0 15px 5px #FF9800;
}
.inventory-grid-view .brainrot-item.selected-for-theft {
    box-shadow: 0 0 15px 5px #00C853;
    border: 3px solid #00C853 !important;
}

.inventory-grid-view .brainrot-item.inventory .mutation-detail,
.inventory-grid-view .brainrot-item.inventory .income-info,
.inventory-grid-view .brainrot-item.inventory .price-info { display: none; }

.inventory-slot {
    height: 100px;
    border: 2px dashed #666666; /* Darker dashed border */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #333333; /* Dark background for empty slots */
    color: #AAAAAA;
}

.brainrot-item.inventory {
    width: 100%;
    height: 100%;
    padding: 3px;
    background-color: #2C2C2C;
    border: 2px solid; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.7em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.brainrot-item.inventory:hover {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Specific Inventory adjustments for detail fitting */
.brainrot-item.inventory .name {
    font-size: 0.9em;
}
.brainrot-item.inventory .rarity {
    font-size: 0.6em;
}
.brainrot-item.inventory .income-info,
.brainrot-item.inventory .price-info {
    text-align: center;
}
.brainrot-item.inventory .income-breakdown {
    display: none; /* Hide complex breakdown in small inventory view */
}

/* Mutation Colors (Adjusted for dark theme visibility) */
.mutation-gold {
    background-color: #444422 !important; /* Darker gold background */
}
.mutation-diamond {
    background-color: #224444 !important; /* Darker diamond/icy background */
}
.mutation-rainbow .name {
    /* Using background clip text for rainbow effect */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mutation-lava {
    background-color: #8B0000 !important; /* Deep Red background */
}
.mutation-lava * {
    color: white !important; /* Force all text to white */
}
.mutation-lava .name {
    color: white !important;
}
.mutation-lava .rarity {
    color: white !important; /* Ensure rarity color is white */
}
.mutation-lava .mutation-detail {
     color: white !important;
}

/* New mutation color for Galaxy */
.mutation-galaxy {
    background: linear-gradient(135deg, #0D47A1, #4A148C, #D81B60, #FFD600); /* Slightly darker/more intense space gradient */
    color: white; 
}
.mutation-galaxy * {
    color: white !important;
}
.mutation-galaxy .name {
    font-size: 1.1em;
    color: white !important;
}


/* Admin Panel Styling (Modal) */
.hidden {
    display: none !important;
}

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

.modal-content {
    background: #212121; /* Dark modal background */
    padding: 20px;
    border-radius: 10px;
    width: 360px;
    max-height: 85vh;
    overflow-y: auto;
    color: #E0E0E0;
}

.modal-content h3, .modal-content h4 {
    color: #00E5FF; /* Bright Cyan header */
    border-bottom: 1px solid #444444;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

#login-section, #admin-tools {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px dashed #6200EE; /* Dashed purple border */
    border-radius: 5px;
}

#admin-password, #brainrot-selector, #mutation-selector, #event-selector {
    width: calc(100% - 16px);
    padding: 10px;
    margin: 5px 0 10px 0;
    border: 1px solid #444;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #333; /* Input background */
    color: #FFF;
}

#admin-login-button, #spawn-brainrot-button, #broadcast-spawn-button, #start-event-button, #stop-event-button, .close-button {
    padding: 10px 15px;
    margin-top: 10px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-weight: bold;
}

#admin-login-button {
    background-color: #6200EE;
    color: white;
}
#admin-login-button:hover {
    background-color: #7C4DFF;
}

#spawn-brainrot-button {
    background-color: #FFEA00;
    color: #111;
}
#broadcast-spawn-button {
    background-color: #00E5FF;
    color: #111;
}


.close-button {
    background-color: #FF5252;
    color: white;
    float: right;
    margin-top: 20px;
}

.error-text {
    color: #FF4444;
    font-weight: bold;
}

#event-controls {
    display: flex;
    flex-direction: column; /* Stack event selection controls vertically */
    align-items: flex-start;
    width: 100%;
}
#current-event-status {
    font-weight: bold;
    color: #00E5FF;
    margin-bottom: 10px; /* Added margin for spacing */
}

#event-action-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}

#event-action-buttons button {
    flex: 1;
}

#start-event-button {
    background-color: #00C853; /* Green */
    color: white;
}
#stop-event-button {
    background-color: #FF5252; /* Red */
    color: white;
}


label {
    display: block;
    margin-top: 5px;
    font-weight: 500;
}

button {
    min-height: 44px;
}

@media (max-width: 700px) {
    body { padding: 10px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    #game-container { width: 100%; padding: 15px; }
    #stats-panel { grid-template-columns: 1fr 1fr; }
    #inventory-grid, .inventory-grid-view { grid-template-columns: repeat(3, 1fr); }
    .player-card { padding: 12px 14px; font-size: 1em; }
    .brainrot-item.conveyor { width: 130px; height: 80px; font-size: 0.8em; }
}

#view-base-modal .modal-content {
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
}

/* --- EVENT VISUAL EFFECTS --- */

/* Shared Pseudo Element Setup for Screen Overlays */
.event-rain::before, 
.event-snow::before, .event-snow::after, 
.event-molten-lava::before,
.event-starfall::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500; /* High Z-index to cover everything but the modal */
    overflow: hidden;
}

/* 1. Rain Event */
.event-rain {
    background-color: #15314D; /* Darker blue */
}
.event-rain #game-container {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), inset 0 0 50px rgba(0, 50, 150, 0.5);
    background-color: rgba(26, 26, 26, 0.9); /* Keep game container dark */
}
.event-rain::before {
    /* Animated rain droplets/lines */
    background: 
        repeating-linear-gradient(180deg, 
            transparent, 
            transparent 1px, 
            rgba(150, 200, 255, 0.5) 1.5px, 
            transparent 3px);
    background-size: 100% 50px;
    animation: rain 0.8s linear infinite;
    opacity: 0.6;
}
@keyframes rain {
    0% { background-position: 0 0; }
    100% { background-position: 0 50px; }
}
/* Enhance Rain: Add visual of the "pond" floor (a subtle bottom gradient/reflection) */
.event-rain::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Pond level */
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 100, 200, 0.4) 0%, transparent 80%);
    pointer-events: none;
    z-index: 500; 
    filter: blur(1px);
}


/* 2. Snow Event */
/* Creating two layers of animated box-shadow snow for depth and density */
@keyframes snow {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}
.event-snow {
    background-color: #1C1C1C; /* Dark background */
}
.event-snow #game-container {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1);
    background-color: #2A2A2A;
}
/* Layer 1: Fast, small flakes (uses white, works well on dark mode) */
.event-snow::before {
    background: transparent;
    box-shadow: 
        100px 0 0 0px #fff, -50px 150px 0 0px #fff, 200px 300px 0 0px #fff, -150px 450px 0 0px #fff,
        300px 600px 0 0px #fff, -250px 800px 0 0px #fff, 400px 50px 0 0px #fff, -350px 700px 0 0px #fff,
        500px 250px 0 0px #fff, -450px 500px 0 0px #fff, 600px 900px 0 0px #fff, -550px 100px 0 0px #fff;
    animation: snow 10s linear infinite;
    opacity: 0.8;
}
/* Layer 2: Slow, large flakes, slightly tilted for wind effect (uses white, works well on dark mode) */
.event-snow::after {
    background: transparent;
    box-shadow: 
        50px 50px 0 1px #fff, -200px 250px 0 1px #fff, 350px 500px 0 1px #fff, -400px 750px 0 1px #fff,
        150px 900px 0 1px #fff, -500px 100px 0 1px #fff;
    animation: snow 15s linear infinite;
    opacity: 0.7;
    transform: rotate(2deg); 
    z-index: 501;
}
/* Enhance Snow: Add piles of snow at the bottom edge */
.event-snow #game-container::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Overlap slightly */
    left: 0;
    width: 100%;
    height: 20px; 
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    z-index: 1; /* Below content but above normal background */
}


/* 3. Starfall Event */
@keyframes starfall-pulse {
    0% { opacity: 0.5; }
    50% { opacity: 0.8; }
    100% { opacity: 0.5; }
}
/* New Starfall animation: shooting stars */
@keyframes shooting-star {
    0% { transform: translate(-100vw, -100vh) rotate(-45deg); opacity: 0; }
    10% { opacity: 1; }
    20% { transform: translate(100vw, 100vh) rotate(-45deg); opacity: 0; }
    100% { opacity: 0; }
}
.event-starfall {
    background-color: #110022; 
    color: #E0E0FF;
}
.event-starfall #game-container {
    background-color: rgba(0, 0, 0, 0.9);
    border-color: #9900FF;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.9), 0 0 30px #9900FF;
}
.event-starfall::before { /* Used for background stars/nebula */
    /* Background deep space nebula */
    background-image: radial-gradient(circle at 70% 30%, rgba(150, 0, 255, 0.3) 1px, transparent 150px),
                      radial-gradient(circle, #FFFFFF 1px, transparent 10px);
    background-size: 100% 100%, 100px 100px;
    background-repeat: repeat;
    animation: none; 
    opacity: 1;
}
.event-starfall::after { /* New element for actual falling stars/meteors */
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 20px; /* Star trail width */
    height: 200px; /* Star trail length */
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
    box-shadow: 0 0 5px white, 0 0 10px #9900FF;
    pointer-events: none;
    z-index: 600; 
    animation: shooting-star 5s linear infinite; 
    /* Create multiple stars by slightly delaying the animation */
    animation-delay: 0s, 2s, 4s; 
}


/* 4. Molten Lava Event */
@keyframes lava-pulse {
    0% { filter: hue-rotate(0deg) brightness(1.2); }
    50% { filter: hue-rotate(5deg) brightness(1.5); }
    100% { filter: hue-rotate(0deg) brightness(1.2); }
}
@keyframes heat-haze {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.event-molten-lava {
    background-color: #3e0101; 
}
.event-molten-lava #game-container {
    border-color: #FF7043;
    background-color: #331A1A; /* Darkened container */
    box-shadow: 0 0 30px #FF5722, inset 0 0 15px #D84315;
    animation: lava-pulse 2s infinite alternate;
    filter: saturate(1.1) hue-rotate(-5deg) drop-shadow(0 0 5px #FF5722);
}
.event-molten-lava::before {
    /* Simulate heat haze and streaming lava on the screen */
    background: 
        repeating-linear-gradient(45deg, 
            rgba(255, 87, 34, 0.3), 
            rgba(255, 87, 34, 0.3) 10px, 
            rgba(255, 152, 0, 0.3) 10px, 
            rgba(255, 152, 0, 0.3) 20px);
    mix-blend-mode: overlay;
    animation: heat-haze 10s linear infinite;
    filter: blur(2px) contrast(1.5);
    transform: scale(1.1); 
}
/* Enhance Molten Lava: add sky streams of lava */
.event-molten-lava::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: 
        linear-gradient(to bottom, 
            rgba(62, 1, 1, 0.9), /* Black sky */
            rgba(255, 69, 0, 0.5) 50%, /* Lava glow */
            transparent 100%);
    box-shadow: inset 0 -20px 50px rgba(255, 69, 0, 0.8);
    pointer-events: none;
    z-index: 500;
}


/* 5. Space/Galaxy Event */
@keyframes nebula-flow {
    0% { background-position: 0 0, 40px 60px; }
    100% { background-position: 500px 500px, 340px 560px; }
}
@keyframes planet-orbit {
    0% { transform: translate(100vw, 50vh); }
    100% { transform: translate(-50vw, -10vh); }
}
.event-space-galaxy {
    background: linear-gradient(135deg, #000022, #1A0044, #450066);
    color: #E0F7FA;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 40px),
                      radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 30px);
    background-size: 500px 500px, 300px 300px;
    animation: nebula-flow 60s linear infinite;
}
/* Add orbiting planets/celestial bodies */
.event-space-galaxy::before {
    content: '';
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 70%, #FF9800, #E65100); /* A subtle planet */
    box-shadow: 0 0 100px rgba(255, 152, 0, 0.3);
    animation: planet-orbit 120s linear infinite;
    z-index: 500;
    opacity: 0.5;
}
.event-space-galaxy #game-container {
    background-color: rgba(26, 35, 126, 0.9); 
    border-color: #8C9EFF;
    box-shadow: 0 0 40px rgba(140, 158, 255, 0.7);
}
.event-space-galaxy .stat-box, .event-space-galaxy h2 {
    color: #B3E5FC !important;
}
.event-space-galaxy #conveyor-track {
    background: #000; 
    border-color: #555;
}


/* 6. Nyan Cat Event */
@keyframes rainbow-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}
.event-nyan-cat {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
    background-size: 200% 100%;
    animation: rainbow-scroll 5s linear infinite;
    filter: brightness(1.1) saturate(1.5);
}
.event-nyan-cat #game-container {
    background-color: rgba(44, 44, 44, 0.95); /* Keep container dark */
    border-color: #FF69B4; /* Hot Pink */
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.9);
}
/* Subtle star/sparkle overlay */
.event-nyan-cat::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 5px),
                radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 8px);
    background-size: 50px 50px;
    animation: snow 15s linear infinite reverse; /* Reusing snow animation keyframe for vertical movement */
    opacity: 0.8;
}


/* 7. 4th of July Event */
@keyframes firework-flash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}
.event-4th-of-july {
    background-color: #000080; /* Dark blue background */
    animation: firework-flash 3s infinite;
}
.event-4th-of-july #game-container {
    background-color: rgba(26, 26, 26, 0.9); /* Dark background */
    border-color: #FF4500; /* Red-Orange */
    box-shadow: 0 0 25px #FFD700; /* Gold shine */
}
/* Firework sparkle simulation */
.event-4th-of-july::before {
    background: 
        radial-gradient(circle, rgba(255, 0, 0, 0.9) 2px, transparent 10px),
        radial-gradient(circle, rgba(255, 255, 0, 0.9) 2px, transparent 12px),
        radial-gradient(circle, rgba(0, 0, 255, 0.9) 2px, transparent 8px);
    background-size: 200px 200px, 300px 300px, 150px 150px;
    background-position: 0% 0%, 50% 50%, 100% 100%;
    animation: heat-haze 20s linear infinite; /* Reuse heat-haze for slow, randomized movement */
    opacity: 0.6;
}

/* 8. Crab Rave Event */
@keyframes crab-dance {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(-1deg); }
    75% { transform: translateY(5px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
.event-crab-rave {
    background: linear-gradient(180deg, #1A5276, #6D5C39); /* Darker blue sky to dark sand gradient */
}
.event-crab-rave #game-container {
    background-color: #4A4134; /* Darker sand/beach */
    border-color: #B8860B; /* Dark gold/brown */
    animation: crab-dance 0.5s infinite alternate;
}
/* Simulate dancing crab pattern overlay */
.event-crab-rave::before {
    background: repeating-linear-gradient(45deg, rgba(255, 99, 71, 0.2), rgba(255, 99, 71, 0.2) 10px, transparent 10px, transparent 20px); /* Tomato red 'crab shell' pattern */
    opacity: 0.5;
    mix-blend-mode: soft-light;
    transform: scale(1.05);
}


/* 9. Glitch Event */
@keyframes screen-glitch {
    0% { transform: translate(0, 0); filter: hue-rotate(0deg); }
    2% { transform: translate(-2px, 2px); filter: hue-rotate(5deg); }
    4% { transform: translate(3px, -3px); filter: hue-rotate(0deg); }
    10% { transform: translate(0, 0); }
}
@keyframes scan-line {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}

.event-glitch {
    filter: contrast(1.2) saturate(1.5);
    animation: screen-glitch 0.2s infinite steps(2);
    background-color: black;
}
.event-glitch #game-container {
    background-color: #111;
    border-color: #0F0;
    box-shadow: 0 0 10px #0F0;
    filter: blur(0.5px);
}
/* Static/Scan line overlay */
.event-glitch::before {
    background: 
        repeating-linear-gradient(
            0deg, 
            rgba(0, 0, 0, 0.1) 0, 
            rgba(255, 255, 255, 0.1) 1px, 
            rgba(0, 0, 0, 0.1) 2px, 
            rgba(255, 255, 255, 0.1) 3px
        );
    background-size: 100% 5px;
    animation: scan-line 10s linear infinite;
    mix-blend-mode: overlay;
    opacity: 0.4;
}


/* 10. Solar Flare/Fire Event */
@keyframes heat-wave {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.01); }
    100% { transform: scale(1.0); }
}
.event-solar-flare {
    background: linear-gradient(to bottom, #FF8C00, #FF4500); /* Darker fiery sky */
    animation: heat-wave 1.5s infinite alternate;
}
.event-solar-flare #game-container {
    background-color: #331A1A; /* Heat struck dark red */
    border-color: #E65100;
    box-shadow: 0 0 50px #FF9800, inset 0 0 20px #FF5722;
    filter: saturate(1.3) contrast(1.1);
}
/* Fire/Aura effect - large, slow shifting radial gradient */
.event-solar-flare::before {
    background: radial-gradient(circle at 50% 50%, rgba(255, 165, 0, 0.5) 0%, rgba(255, 69, 0, 0.3) 50%, transparent 70%);
    animation: heat-haze 30s linear infinite;
    mix-blend-mode: hard-light;
}


/* 11. Brainrot Concert Event */
@keyframes strobe-light {
    0%, 100% { background-color: #110022; }
    33% { background-color: #002211; }
    66% { background-color: #221100; }
}
@keyframes spotlight {
    0% { transform: rotate(0deg) scale(1.5); }
    100% { transform: rotate(360deg) scale(1.5); }
}
.event-concert {
    animation: strobe-light 3s linear infinite;
}
.event-concert #game-container {
    background-color: #212121; /* Dark club interior */
    border-color: #FF00FF;
    color: #E0E0E0;
    box-shadow: 0 0 15px #00FFFF, 0 0 15px #FF00FF;
}
.event-concert .stat-box, .event-concert h2 {
    color: #00FFFF !important;
}
/* Moving spotlights using radial gradients and rotation */
.event-concert::before {
    background: 
        radial-gradient(circle at 10% 10%, rgba(0, 255, 255, 0.4) 0%, transparent 20%),
        radial-gradient(circle at 90% 90%, rgba(255, 0, 255, 0.4) 0%, transparent 20%),
        radial-gradient(circle at 50% 10%, rgba(255, 255, 0, 0.4) 0%, transparent 20%);
    background-repeat: no-repeat;
    animation: spotlight 8s linear infinite;
    mix-blend-mode: screen;
}


/* 12. Tung Tung Attack Event */
@keyframes frantic-jitter {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
}
.event-tung-tung {
    background-color: #1A1A1A; /* Dark background */
    animation: frantic-jitter 0.1s infinite alternate; /* Subtle overall jitter */
}
.event-tung-tung #game-container {
    border-color: #00BCD4;
    background-color: #2A2A2A;
}
/* Overlays a repeating, busy texture to simulate 'swarming' */
.event-tung-tung::before {
    background: repeating-linear-gradient(45deg, 
        rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, 
        transparent 1px, transparent 3px
    );
    background-size: 50px 50px;
    opacity: 0.3;
}


/* 13. Bombardiro Event */
@keyframes smoke-drift {
    0% { background-position: 0 0; }
    100% { background-position: 500px 500px; }
}
.event-bombardiro {
    background-color: #212121; /* Dark smoky environment */
}
.event-bombardiro #game-container {
    background-color: #424242; /* Grey, metallic/burnt surface */
    border-color: #616161;
    box-shadow: 0 0 20px #FF5722; /* Subtle orange glow from fire/bombs */
    filter: grayscale(0.2);
}
/* Smoke/fog effect using complex radial gradients */
.event-bombardiro::before {
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.4) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.4) 0%, transparent 60%);
    background-size: 600px 600px;
    animation: smoke-drift 30s linear infinite alternate;
    mix-blend-mode: multiply;
    opacity: 0.7;
}


/* 14. Taco Rain/Raining Tacos Event */
@keyframes taco-fall {
    0% { transform: translateY(-100vh) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(360deg); }
}
.event-taco-rain {
    background-color: #8D6E63; /* Brown/Mexican Restaurant feel, darker */
}
.event-taco-rain #game-container {
    background-color: #2A2A2A; 
    border-color: #FF7043;
    box-shadow: 0 0 15px #4CAF50; /* Green guacamole touch */
}
/* Abstract falling tacos (simulated using geometric shapes/colors) */
.event-taco-rain::before {
    /* Simulate small taco shapes: yellow/brown base with green/red toppings */
    background: 
        radial-gradient(ellipse at center, #FFD700 0%, #8B4513 50%, transparent 50%),
        radial-gradient(ellipse at center, #4CAF50 0%, transparent 10%);

    background-size: 50px 50px;
    background-repeat: repeat;
    background-position: 0 0, 25px 25px;
    animation: taco-fall 10s linear infinite;
    opacity: 0.7;
}


/* --- New UI Styles --- */

/* Multiplayer Panel */
#multiplayer-panel {
    margin-top: 20px;
    padding: 15px;
    border: 2px solid #6200EE;
    border-radius: 8px;
    background-color: #242424;
}

#online-players-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    max-height: 40vh;
    overflow-y: auto;
}

.player-card {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #333;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    font-size: 0.9em;
    color: #E0E0E0;
}

.player-card:hover {
    background-color: #444;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.player-card.self {
    background-color: #4A148C; /* Deep purple for self */
    cursor: default;
    font-weight: bold;
}

.player-card img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 8px;
}

/* Theft defense specific styles */
#robbery-defense-panel .modal-content {
    background-color: #440000; /* Dark Red Warning */
    border: 5px solid #FF4444;
    text-align: center;
    color: #FFEEEE;
}

.emergency-button {
    background-color: #FF1744;
    color: white;
    padding: 15px 30px;
    font-size: 1.5em;
    font-weight: 900;
    border: 3px solid #FF4444;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
}

/* Ruin: Income Collection Chaos */
.income-ruin-flash {
    filter: invert(1) hue-rotate(180deg) saturate(2);
    animation: income-flicker 0.1s infinite alternate;
}
@keyframes income-flicker {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.02); }
}

/* Base View Modal Specifics */
#theft-status-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 15px;
}
#start-theft-button {
    background-color: #FF9800; /* Orange - action color */
    color: black;
}
#start-theft-button:disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
}

#effects-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 900; /* below modals (1000) but above page */
}

.index-section { border:1px solid #444; border-radius:8px; padding:10px; background:#2b2b2b; }
.index-section h4 { margin:0 0 8px; color:#B3E5FC; }
.index-grid { 
  grid-template-columns: repeat(2, 1fr); 
  gap:6px;
}
.index-item { 
  padding:6px; 
  font-size: 0.9em;
}
.index-section { 
  padding:8px; 
}
.index-item .name { color:#fff; font-weight:600; }
.index-item .tag { font-size:0.8em; padding:2px 6px; border-radius:12px; }
.index-item .tag.found { background:#00C853; color:#000; }
.index-item .tag.missing { background:#555; color:#ddd; }
#index-list {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px; /* room for scrollbar */
}

.inventory-grid-view.compact .brainrot-item.inventory {
    height: 72px;
    padding: 4px;
    font-size: 0.75em;
}

#chat-panel { margin-top:20px; padding:15px; border:2px solid #6200EE; border-radius:8px; background:#242424; }
#chat-messages { max-height:40vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.chat-msg { display:flex; gap:10px; background:#2f2f2f; border:1px solid #444; border-radius:6px; padding:8px; }
.chat-avatar { width:28px; height:28px; border-radius:50%; background:#555; flex-shrink:0; }
.chat-body { flex:1; min-width:0; }
.chat-header { display:flex; justify-content:space-between; font-size:.85em; color:#bbb; }
.chat-text { color:#eee; word-wrap:break-word; }
.chat-actions { display:flex; gap:10px; margin-top:4px; font-size:.85em; }
.chat-action { cursor:pointer; color:#B3E5FC; }
.chat-replies { margin-top:6px; margin-left:34px; border-left:2px solid #444; padding-left:8px; display:flex; flex-direction:column; gap:6px; }
.reply-input-row { display:flex; gap:6px; margin-left:34px; margin-top:6px; }
#chat-input-row { display:flex; gap:8px; margin-top:10px; }
#chat-input { flex:1; padding:10px; border:1px solid #444; border-radius:4px; background:#333; color:#fff; }
#store-items { display:flex; gap:10px; flex-wrap:wrap; }
.store-image {
    /* Ensure store thumbnail uses the BOI asset consistently and is displayed crisply */
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius:6px;
    border:1px solid #444;
    background: url('BOIIIIIII_SIX_SEVEN_3F3F3F3F3F.webp') center/cover no-repeat;
}

/* Ensure every brainrot card shows "67" overlay to reinforce transformation */
.brainrot-item::after {
    content: '67';
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 1.6em;
    font-weight: 900;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    pointer-events: none;
}