/* =========================================
   1. GLOBAL STYLES & TYPOGRAPHY
   ========================================= */
body { 
    margin: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: #1a252f; /* Darker, late-night mood */
    color: white; 
    overflow: hidden; /* Prevents scrollbars from breaking the 2.5D view */
    user-select: none; /* Prevents accidentally highlighting text while clicking fast */
}

#game-container { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
}

button { 
    cursor: pointer; 
    padding: 8px 15px; 
    background: #3498db; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    font-weight: bold; 
    transition: background-color 0.2s, transform 0.1s; 
}

button:hover { filter: brightness(1.1); transform: scale(1.02); }
button:active { transform: scale(0.95); }

/* Grayed out buttons */
.action-btn:disabled, button:disabled {
    background: #7f8c8d !important;
    color: #bdc3c7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}
/* =========================================
   🛗 MINIMALIST LIFT CONTROL PANEL
   ========================================= */
.lift-panel {
    position: absolute;
    left: 20px;
    top: 130px; /* ⬇️ Increased from 90px to push it down below the tabs */
    width: 80px;
    background: #2c3e50;
    border-radius: 12px;
    z-index: 4500;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.5);
    border: 2px solid #f1c40f; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lift-header {
    font-size: 1rem;
    font-weight: bold;
    color: #f1c40f;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 2px solid #34495e;
    padding-bottom: 5px;
    width: 100%;
}

.lift-item {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative; 
    margin-bottom: 8px;
    cursor: default;
}

.lift-button {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 45px;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 5px rgba(0,0,0,0.5);
    transition: filter 0.2s, transform 0.1s, box-shadow 0.3s;
}

.lift-button:hover { filter: brightness(1.2); }
.lift-button:active { transform: scale(0.95); }

/* Badge-Style Icons */
.lift-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0px; 
    top: -5px;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.8));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: none; 
}

/* Standard Colors */
.floor-P { background-color: #8e44ad; } 
.floor-F { background-color: #3498db; } 
.floor-L { background-color: #27ae60; } 
.floor-B { background-color: #7f8c8d; } 

/* Lobby pending glow! */
.glowing-gold {
    animation: glow-gold 1.5s infinite ease-in-out;
    border: 2px solid #f1c40f !important;
}
@keyframes glow-gold {
    0%, 100% { box-shadow: 0 0 5px rgba(241, 196, 15, 0.5); }
    50% { box-shadow: 0 0 25px rgba(241, 196, 15, 0.9); }
}

/* Icon classes */
.icon-broom { background-image: url("images/ui/icon_broom_gold.png"); }
.icon-bell { background-image: url("images/ui/icon_bell_gold.png"); }
.icon-scales { background-image: url("images/ui/icon_scales_gold.png"); }

/* =========================================
   2. TOP UI BAR & ROOM TABS
   ========================================= */
#top-bar { 
    border-bottom: 2px solid #2c3e50;
}

#room-tabs {
    display: flex;
    background: #2c3e50;
    border-bottom: 3px solid #f1c40f;
    /* 🛠️ FIX: Removed 'overflow' properties so the dropdown can bleed out! */
}

/* NEW: Wraps the tab and dropdown together so hovering works smoothly */
.tab-wrapper {
    flex: 1;
    display: flex;
    position: relative;
}

.room-tab {
    width: 100%; /* Forces the button to fill the wrapper */
    padding: 12px 15px;
    background: #1a252f;
    color: #bdc3c7;
    border: none;
    border-right: 1px solid #2c3e50;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    white-space: nowrap; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.room-tab.active {
    background: #f1c40f;
    color: #1a252f;
    box-shadow: inset 0 3px 0 #d35400;
}

.room-tab:hover:not(.active) { background: #34495e; color: white; }

/* 📋 NEW: THE HOVER CHECKLIST DROPDOWN */
.checklist-dropdown {
    position: absolute;
    top: 100%; /* Snaps it directly under the tab */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(44, 62, 80, 0.98);
    padding: 15px;
    border: 3px solid #f1c40f;
    border-top: none; /* Blends seamlessly into the yellow active tab line */
    border-radius: 0 0 10px 10px;
    z-index: 6000;
    width: 240px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none; /* Prevents ghost clicks when hidden */
}

/* Triggers the dropdown when the mouse enters the tab wrapper! */
.tab-wrapper:hover .checklist-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================
   3. THE 2.5D PLAY AREA & ITEMS
   ========================================= */
#play-area { 
    flex-grow: 1; 
    position: relative; 
    z-index: 1; 
    background-color: #34495e; 
    
    /* 🖼️ Locks the image to fill the screen without leaving blank voids */
    background-size: cover;      
    background-repeat: no-repeat;  
	background-position: center 80%;
    
    overflow: hidden; /* Keeps items inside the room boundaries */
    border-bottom: 5px solid #1a252f; 
    cursor: crosshair; 
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5); /* Moody corner shadows */
}

.junk-item { 
    position: absolute; 
    border: 2px solid rgba(255,255,255,0.1); 
    border-radius: 4px; 
    padding: 10px; 
    font-size: 0.9rem; 
    font-weight: bold; 
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.6); 
    transition: transform 0.1s, outline 0.1s, filter 0.3s ease; 
    cursor: grab;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 2px 2px rgba(0,0,0,0.8);
    
    /* Image handling for items */
    background-size: contain;      
    background-repeat: no-repeat;  
    background-position: center;   
    background-color: rgba(0,0,0,0.4); /* Temp background for prototype */
}

.junk-item:active { cursor: grabbing; }

.has-art {
    border: none !important;
    background-color: transparent !important;
}

/* Dynamic Hover Outlines */
.junk-item:hover { outline: 3px solid white; transform: scale(1.05); z-index: 9999 !important; }

/* The Hover Tooltip */
#hover-tooltip {
    display: none; position: absolute; background: rgba(26, 37, 47, 0.95); color: white;
    padding: 8px 12px; border-radius: 5px; font-weight: bold; font-size: 0.9rem;
    pointer-events: none; z-index: 10000; border: 2px solid #f1c40f; text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* ITEM SHAPES (For prototype hitboxes) */
.shape-circle { border-radius: 50% !important; display: flex; align-items: center; justify-content: center; }
.shape-pill { border-radius: 50px !important; display: flex; align-items: center; justify-content: center; }
.shape-blob { border-radius: 40% 70% 60% 40% / 50% 40% 60% 50% !important; display: flex; align-items: center; justify-content: center; }

/* =========================================
   4. BOTTOM BINS (Housekeeping Tools)
   ========================================= */


#bottom-bar { 
    display: flex; 
    justify-content: center; 
    gap: 30px;               
    background: #1a252f; 
    padding: 15px 40px;      
    position: relative;
    z-index: 3000; 
    box-shadow: 0 -5px 15px rgba(0,0,0,0.6);
    border-top: 3px solid #2c3e50;
}

.bin { 
    flex: 1; 
    max-width: 380px;        /* ⬆️ Increased from 220px so they fill the space beautifully! */
    background: #2c3e50; 
    border: 2px solid #7f8c8d;
    border-radius: 10px;     
    padding: 12px 10px; 
    text-align: center;
    font-size: 1.1rem;       /* ⬆️ Bumped font size slightly to fit the wider buttons */
    font-weight: bold; 
    color: #bdc3c7;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.5), 0 4px 5px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.bin span { 
    display: block;
    font-size: 1.6rem;       /* ⬆️ Made the numbers a bit bolder and larger */
    margin-top: 8px; 
    font-weight: 900;
    color: white;
}

/* ... keep your existing .bin:hover and .bin.bin-hover rules here! ... */

/* Satisfying float effect when you hover */
.bin:hover { 
    transform: translateY(-5px); 
    border-color: #3498db; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 8px 15px rgba(0,0,0,0.5);
    color: white;
}

/* Hover highlight for bins during drag & drop */
.bin.bin-hover {
    transform: scale(1.1) translateY(-5px) !important;
    border-color: #2ecc71 !important;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.6) inset, 0 10px 20px rgba(0,0,0,0.5) !important;
    background: #fff !important;
    color: #2c3e50 !important;
}



/* =========================================
   5. MODALS & POP-UPS
   ========================================= */

/* Action / Context Menu */
#action-menu { 
    display: none; 
    position: absolute; 
    background: rgba(236, 240, 241, 0.95); 
    color: #2c3e50; 
    border: 3px solid #2c3e50; 
    border-radius: 8px; 
    padding: 15px; 
    z-index: 2000; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    min-width: 180px; 
}

#action-menu h3 { margin: 0 0 5px 0; font-size: 1.2rem; color: #1a252f; border-bottom: 2px solid #bdc3c7; padding-bottom: 5px;}
#action-menu p { margin: 0 0 15px 0; font-size: 0.9rem; font-weight: bold; color: #7f8c8d; }
.action-btn { display: block; width: 100%; margin-bottom: 8px; background: #e74c3c; font-size: 1rem; padding: 10px;}
.action-btn.cancel { background: #7f8c8d; margin-top: 15px; border-top: 2px solid #95a5a6; }

/* Full Screen Generic Modals */
.modal-overlay-bg {
    backdrop-filter: blur(3px); /* Gives that slick modern UI feel */
}

.modal-overlay {
    display: none; 
    position: absolute; 
    top: 50%; left: 50%; transform: translate(-50%, -50%); 
    background: white; color: black; 
    border: 4px solid #1a252f; border-radius: 10px; 
    padding: 20px; width: 350px; max-height: 80vh; 
    overflow-y: auto; z-index: 8000; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* Modal Lists (Inventory, Ledger) */
.inv-list-item, .ledger-item { 
    background: #ecf0f1; border: 1px solid #bdc3c7; padding: 10px; margin-bottom: 10px; 
    border-radius: 5px; display: flex; justify-content: space-between; align-items: center; 
    color: #2c3e50;
}

/* =========================================
   UNIVERSAL CLOSE "X" BUTTON
   ========================================= */
.close-x-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    color: #e74c3c;
    font-size: 1.5rem;
    border: none;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s, color 0.2s;
    z-index: 100;
}
.close-x-btn:hover { color: #c0392b; transform: scale(1.2); }

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes shake { 
    0% { transform: translate(1px, 1px) rotate(0deg); } 
    25% { transform: translate(-1px, -2px) rotate(-1deg); } 
    50% { transform: translate(-3px, 0px) rotate(1deg); } 
    75% { transform: translate(3px, 2px) rotate(0deg); } 
    100% { transform: translate(1px, -1px) rotate(0deg); } 
}
/* 🛗 Indicates the floor you are currently on */
.active-floor {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(0,0,0,0.5) !important;
    border: 3px solid white !important;
    transform: scale(1.05);
    z-index: 10;
}

/* =========================================
   6. TUTORIAL OVERLAYS & POINTERS
   ========================================= */
.tut-disabled { 
    opacity: 0.25 !important; 
    pointer-events: none !important; 
    filter: grayscale(100%); 
}
.tut-highlight { 
    position: relative; 
    z-index: 9000 !important; 
    outline: 3px solid #f1c40f !important; 
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.9) !important; 
    animation: tut-pulse 1s infinite alternate; 
}
@keyframes tut-pulse { from { transform: scale(1); } to { transform: scale(1.03); } }

.tut-pointer {
    position: absolute;
    background: #2980b9;
    color: white;
    padding: 8px 12px;
    border: 2px solid #f1c40f;
    border-radius: 6px;
    font-weight: bold;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    animation: float 1s infinite alternate;
}
@keyframes float { from { margin-top: 0px; } to { margin-top: -8px; } }