/* =========================================
   1. GLOBAL & BASE STYLES
========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
body { background-color: #121212; color: #e0e0e0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* Zigzag Background (Used on Home & Chat) */
.chat-bg {
    background-color: #1a1a1a;
    background-image: linear-gradient(135deg, #1f1f1f 25%, transparent 25%), linear-gradient(225deg, #1f1f1f 25%, transparent 25%), linear-gradient(45deg, #1f1f1f 25%, transparent 25%), linear-gradient(315deg, #1f1f1f 25%, transparent 25%);
    background-position: 40px 0, 40px 0, 0 0, 0 0;
    background-size: 80px 80px;
    animation: moveBackground 40s linear infinite;
}
@keyframes moveBackground {
    from { background-position: 40px 0, 40px 0, 0 0, 0 0; }
    to { background-position: 540px 500px, 540px 500px, 500px 500px, 500px 500px; }
}

/* =========================================
   2. HEADER & NAVIGATION
========================================= */
header { background-color: #1f1f1f; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #333; }
h1 { font-size: 24px; color: #fff; cursor: pointer; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.top-nav { display: flex; gap: 10px; margin-left: 20px; margin-right: auto; }
.controls { display: flex; gap: 8px; }

/* =========================================
   3. BUTTON STYLES
========================================= */
.save-btn, .nav-btn { 
    padding: 8px 18px; border-radius: 10px; border: none; cursor: pointer; 
    font-weight: bold; color: white; text-decoration: none; font-size: 13px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex; align-items: center; justify-content: center;
}
.save-btn:hover, .nav-btn:hover { filter: brightness(1.1); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.save-btn:active, .nav-btn:active { transform: translateY(2px); filter: brightness(1.5); transition: all 0.1s; }
.nav-btn { background-color: #333; }
.controls .save-btn { width: 100px; text-align: center; }

.rainbow-btn {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400% 400%;
    animation: rainbow-shift 10s ease infinite;
}
@keyframes rainbow-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* =========================================
   4. HOME SCREEN LAYOUT
========================================= */
.home-container { display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding-bottom: 8vh; position: relative; z-index: 5; transition: opacity 0.5s; }
.title-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.home-title { font-size: 80px; color: #ffffff; text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.8); margin: 0; letter-spacing: 2px; cursor: pointer; }
.home-splash { font-size: 20px; font-style: italic; color: #FFEB3B; font-weight: bold; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); margin-top: 10px; text-align: center; max-width: 80%; }
.button-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.home-btn { font-size: 22px; padding: 15px 40px; border-radius: 12px; }

/* =========================================
   5. GAMES TAB & SIDEBAR
========================================= */
main { display: flex; flex: 1; overflow: hidden; }
.sidebar { width: 280px; background-color: #1a1a1a; padding: 20px; border-right: 2px solid #333; display: flex; flex-direction: column; }
#game-list { list-style: none; flex: 1; overflow-y: auto; margin-top: 10px; }
#game-list li { 
    padding: 12px; background-color: #2c2c2c; margin-bottom: 8px; margin-right: 15px; margin-left: 15px;
    border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    transition: all 0.2s; border: 1px solid transparent; position: relative;
}
#game-list li:hover { background-color: #3d3d3d; transform: translateX(5px); border-color: #444; box-shadow: -5px 5px 5px rgba(0,0,0,0.3); }
#game-list li:has(.trash-btn:hover) { background-color: #441a1a !important; }
#game-list li:active { transform: translateX(-5px); filter: brightness(1.5); transition: all 0.1s; }
body.app-is-dragging .save-btn:hover,
body.app-is-dragging .nav-btn:hover,
body.app-is-dragging #game-list li:not(.dragging),
body.app-is-dragging #game-list li:not(.dragging):hover,
body.app-is-dragging #game-list li:not(.dragging):active,
body.app-is-dragging #game-list li:not(.dragging).tutorial-item:hover,
body.app-is-dragging #game-list li:not(.dragging).ugs-item:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}
body.app-is-dragging #game-list li:not(.dragging),
body.app-is-dragging #game-list li:not(.dragging) * {
    pointer-events: none !important;
}
body.app-is-dragging #game-list li:not(.dragging):has(.trash-btn:hover) {
    background-color: #2c2c2c !important;
    border-color: transparent !important;
}
body.app-is-dragging #game-list li:not(.dragging).tutorial-item:hover {
    background-color: #5FC772 !important;
    border-color: #4CAF50 !important;
}
body.app-is-dragging #game-list li:not(.dragging).ugs-item:hover {
    background-color: #5986da !important;
    border-color: #153466 !important;
}
body.app-is-dragging #game-list li:not(.dragging):not(.tutorial-item):not(.ugs-item):hover {
    background-color: #2c2c2c !important;
    border-color: transparent !important;
}

.tutorial-item { background-color: #5FC772 !important; border: 1px solid #4CAF50 !important; color: white !important; font-weight: bold; }
.tutorial-item:hover { background-color: #4CAF50 !important; }
.ugs-item { background-color: #5986da !important; border: 1px solid #153466 !important; color: white !important; font-weight: bold; }
.ugs-item:hover { background-color: #153466 !important; }

.game-title {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 76px);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.15;
    padding-right: 8px;
    pointer-events: none;
}
.game-title-single-line {
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-action-btn { opacity: 0; transition: opacity 0.2s, color 0.2s, transform 0.2s; font-size: 18px; padding: 0 3px; line-height: 1; cursor: pointer; }
li:hover .app-action-btn { opacity: 1; }
.rename-btn:hover { color: #81C784; transform: scale(1.12); }
.trash-btn { font-size: 18px; }
li:hover .trash-btn { opacity: 1; }
.trash-btn:hover { color: #f44336; transform: scale(1.2); }
.game-bookmark-btn.bookmarked {
    background: #5f5f5f !important;
    cursor: default;
    opacity: 0.72 !important;
}
.game-btn-wrapper:hover .game-bookmark-btn.bookmarked,
.game-bookmark-btn.bookmarked:hover {
    transform: translateY(-50%);
}

/* --- Drag Handle & Reorder --- */
.drag-handle-zone {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 5;
    border-radius: 0 10px 10px 0;
}
.drag-handle-zone:active { cursor: grabbing; }
.drag-handle-zone img {
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.2s;
}
#game-list li:hover .drag-handle-zone img { opacity: 1; }

/* Dragging state for the item being moved */
#game-list li.dragging {
    opacity: 0.85;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    pointer-events: none;
    transition: none;
}

/* Drop indicator line */
.drop-indicator {
    height: var(--drop-space, 52px);
    margin: 0 15px;
    border-radius: 1px;
    pointer-events: none;
    position: relative;
    transition: height 0.16s ease, opacity 0.15s;
}
.drop-indicator::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #575757;
    border-radius: 1px;
    transform: translateY(-50%);
}

.add-game { margin-top: 20px; padding-top: 20px; border-top: 1px solid #333; }
input[type="text"], input[type="file"], #stash-search { width: 100%; padding: 10px; background: #121212; border: 1px solid #444; color: white; border-radius: 8px; margin-bottom: 10px; outline: none; }
.rename-input { background: #333 !important; padding: 12px !important; margin: 12px 0 18px !important; font-size: 16px; }
.rename-done-btn { background: #4CAF50; color: white; border: none; padding: 12px; border-radius: 8px; width: 100%; font-size: 16px; font-weight: bold; cursor: pointer; transition: filter 0.2s; }
.rename-done-btn:hover { filter: brightness(1.12); }
.game-container { flex: 1; background-color: #000; position: relative; }
iframe { width: 100%; height: 100%; border: none; }

/* --- Empty Game State --- */
.empty-state-bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #1a1a1a; z-index: 10;
    background-image: linear-gradient(135deg, #1f1f1f 25%, transparent 25%), linear-gradient(225deg, #1f1f1f 25%, transparent 25%), linear-gradient(45deg, #1f1f1f 25%, transparent 25%), linear-gradient(315deg, #1f1f1f 25%, transparent 25%);
    background-position: 40px 0, 40px 0, 0 0, 0 0; background-size: 80px 80px; animation: moveBackground 40s linear infinite;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.empty-state-title { color: #555; font-size: 48px; font-weight: bold; text-shadow: 4px 4px 10px rgba(0,0,0,0.6); margin-bottom: 10px; }
.empty-state-subtitle { color: #888; font-size: 16px; font-weight: bold; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }

/* =========================================
   6. CHAT & STASH UI
========================================= */
.stash-container { flex: 1; overflow-y: auto; padding: 40px; display: flex; justify-content: center; }
.stash-content { max-width: 800px; width: 100%; background: #1a1a1a; padding: 30px; border-radius: 12px; border: 1px solid #333; }
.chat-msg { padding: 12px 18px; border-radius: 15px; background: rgba(0,0,0,0.6); border: 4px solid; max-width: 80%; margin-bottom: 12px; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
.pin-input-large { font-size: 28px; text-align: center; letter-spacing: 5px; background: #121212; border: 2px solid #333; color: white; width: 100%; border-radius: 12px; padding: 15px; outline: none; }

#pin-wrapper { position: relative; display: inline-block; cursor: pointer; user-select: none; padding: 0 5px; min-width: 130px; text-align: center; }
#pin-cover { position: absolute; top: -4px; left: 0; right: 0; bottom: -4px; background-color: #1a1a1a; color: #777777; font-size: 10px; font-weight: bold; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease-in-out; opacity: 1; }
#pin-wrapper.revealed #pin-cover { opacity: 0; }

/* =========================================
   7. MODALS & OVERLAYS
========================================= */
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 20000; align-items: center; justify-content: center; }
.cookie-modal-box { background: #1f1f1f; padding: 30px; border-radius: 20px; width: 600px; max-width: 95vw; max-height: 85vh; border: 2px solid #2196F3; text-align: center; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 50px black; }

/* =========================================
   8. SHOP UI
========================================= */
#shop-list, #stats-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow-y: auto; padding: 10px; margin: 15px 0; text-align: left; }
.shop-cat { grid-column: span 2; color: #888; font-size: 11px; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid #333; padding: 10px 0 5px 0; }
.shop-item { background: #252525; padding: 12px; border-radius: 12px; border: 1px solid #444; display: flex; flex-direction: column; justify-content: space-between; }
.swag-upgrade-box { background: rgba(139, 0, 0, 0.2) !important; border: 1px solid #b71c1c !important; }
.item-name { color: #2196F3; font-weight: bold; font-size: 14px; }
.item-desc { color: #aaa; font-size: 11px; margin: 6px 0; line-height: 1.3; height: auto; overflow: visible; }
.item-cost { color: #FFEB3B; font-weight: bold; font-size: 12px; }
.buy-btn.disabled { background: #444 !important; opacity: 0.5; cursor: not-allowed; }
.incinerate-btn { background-color: #B71C1C !important; color: white !important; grid-column: span 2; margin-top: 10px; border: 2px solid #ef5350 !important; font-size: 14px !important; }
.cps-display { font-size: 16px; color: #FFF59D; margin-left: 10px; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }

/* =========================================
   9. COOKIE ENTITIES & AURAS
========================================= */
.golden-cookie { position: fixed; object-fit: contain; z-index: 999; cursor: pointer; }

.aura-basic { filter: drop-shadow(0 0 15px rgba(139, 69, 19, 0.8)) !important; }
.aura-cashew { filter: drop-shadow(0 0 15px rgba(210, 180, 140, 0.8)) !important; }
.aura-oatmeal { filter: drop-shadow(0 0 15px rgba(139, 69, 19, 0.8)) drop-shadow(0 0 20px rgba(128, 0, 128, 0.6)) !important; }
.aura-peanut { filter: drop-shadow(0 0 15px rgba(205, 133, 63, 0.8)) !important; }
.aura-sugar { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 5px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 5px rgba(0, 255, 255, 0.6)) !important; }
.aura-chocolate { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 20px rgba(101, 67, 33, 0.8)) !important; }
.aura-snickerdoodle { filter: drop-shadow(0 0 15px rgba(160, 82, 45, 0.8)) !important; }
.aura-smore { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 20px rgba(139, 69, 19, 0.8)) drop-shadow(0 0 25px rgba(210, 180, 140, 0.8)) !important; }
.aura-golden { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.6)) !important; }
.aura-nebula { animation: nebula-flicker 1.5s alternate infinite !important; }
@keyframes nebula-flicker {
    0% { filter: drop-shadow(0 0 15px #00BCD4) drop-shadow(0 0 20px #9C27B0) drop-shadow(0 0 15px #FFEB3B); }
    100% { filter: drop-shadow(0 0 25px #4CAF50) drop-shadow(0 0 30px #E91E63) drop-shadow(0 0 25px #FFEB3B); }
}

/* =========================================
   10. RARITY SYSTEM (Flat Colors + Outline)
========================================= */
.rarity-common { color: #CFCFCF; }
.rarity-uncommon { color: #6CDB66; }
.rarity-rare { color: #566FEB; }
.rarity-epic { color: #AD0FEB; }
.rarity-divine { color: #EDD11D; }

.floating-rarity { 
    position: fixed; font-weight: 900; font-size: 28px; z-index: 10001; pointer-events: none; 
    animation: rarity-float 2.5s ease-out forwards; 
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0px 4px 8px rgba(0,0,0,0.8);
}
@keyframes rarity-float { 
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -120px); opacity: 0; } 
}

/* =========================================
   11. ANIMATIONS & FLOATING UI
========================================= */
.floating-bucks { position: fixed; color: #4CAF50; font-weight: bold; font-size: 28px; z-index: 1001; pointer-events: none; animation: float-up 1.5s ease-out forwards; text-shadow: 1px 1px 3px rgba(0,0,0,0.8), -1px -1px 3px rgba(0,0,0,0.8); }
@keyframes float-up { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -120px) scale(1.5); opacity: 0; } }

#splash-text { font-size: 14px; font-style: italic; color: #FFEB3B; margin-left: 10px; font-weight: normal; animation: splash-pulse 2s infinite ease-in-out; display: inline-block; }
@keyframes splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.discovery-popup { position: fixed; top: -150px; left: 50%; transform: translateX(-50%); background: rgba(25, 25, 25, 0.95); border: 4px solid #FFD700; border-radius: 15px; padding: 20px 40px; text-align: center; z-index: 10000; transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; }
.discovery-popup.show { top: 20px; }

#effects-container { position: fixed; top: 20px; right: 25px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; z-index: 1000; pointer-events: none; }
.effect-item { background: rgba(31, 31, 31, 0.9); border: 2px solid #2196F3; padding: 8px 12px; border-radius: 10px; display: flex; flex-direction: column; align-items: flex-end; }
.effect-name { font-size: 10px; font-weight: bold; color: #2196F3; text-transform: uppercase; }
.effect-timer { font-size: 16px; font-weight: bold; color: white; }

/* =========================================
   12. DIVINE EVENT
========================================= */
#screen-border { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; box-shadow: inset 0 0 100px rgba(0,0,0,0); transition: opacity 0.5s, box-shadow 0.5s; opacity: 0; }
#divine-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0); z-index: 15000; display: none; align-items: center; justify-content: center; pointer-events: none; transition: background 0.5s; }
.divine-letter { font-size: 150px; font-weight: 900; position: absolute; top: 50%; margin-top: -75px; background: linear-gradient(to bottom, #FAA00F, #EDD11D); -webkit-background-clip: text; -webkit-text-fill-color: #FFD700; -webkit-text-stroke: 10px #bf360c; filter: drop-shadow(0 0 20px black); }
#div-part { left: 50%; transform: translateX(-150vw); } 
#ine-part { left: 50%; transform: translateX(150vw); } 

@keyframes shake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-5px,5px)} 50%{transform:translate(5px,-5px)} 75%{transform:translate(-5px,-5px)} }
.camera-shake { animation: shake 0.1s infinite; }

/* =========================================
   13. HUD & STATUS LIGHTS
========================================= */
.hud-bottom-right { position: fixed; bottom: 20px; right: 25px; display: flex; gap: 10px; z-index: 11000; }
.status-header { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.3); padding: 5px 15px; border-radius: 20px; font-size: 11px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #555; }

/* Forces buttons to the front and ensures they accept clicks */
.save-btn {
    pointer-events: auto !important;
    z-index: 10002 !important;
}

.hud-top-left {
    pointer-events: none; /* Allows clicks to pass through the empty space between buttons */
}

.hud-top-left button {
    pointer-events: auto; /* Re-enables clicking for the buttons themselves */
}

/* Forces the tutorial to the center and above everything */
.tut-overlay {
    display: none; 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100vw !important; 
    height: 100vh !important; 
    background: rgba(0, 0, 0, 0.9) !important; 
    z-index: 99999 !important; /* Highest possible depth */
    align-items: center; 
    justify-content: center;
    pointer-events: auto;
}

.tut-box {
    background: #1f1f1f; 
    padding: 30px; 
    border-radius: 20px; 
    width: 450px; 
    max-width: 90vw; 
    border: 3px solid #2196F3;
    text-align: center;
    box-shadow: 0 0 50px rgba(0, 0, 0, 1);
}

.tut-text {
    color: #eee; 
    margin: 20px 0; 
    line-height: 1.6; 
    font-size: 16px;
    min-height: 80px;
}