/* ===========================================
   ROBO-ROOK: Dark Neon Theme Stylesheet
   =========================================== */

/* ===========================================
   CSS VARIABLES FOR DYNAMIC EFFECTS
   =========================================== */
:root {
    --glow-intensity: 10px;
    --pulse-speed: 2s;
    --hud-glow: 0 0 10px rgba(0, 255, 255, 0.3);
    --canvas-glow: 0 0 20px rgba(255, 0, 255, 0.3);
}

/* CSS Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 50%, #0f0f1a 100%);
    color: #e0e0e0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===========================================
   APP SHELL LAYOUT (Mobile First)
   =========================================== */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Semantic Wrappers - Mobile: flattened to allow ordering */
.panel-left,
.panel-right {
    display: contents;
}

.stage {
    display: flex;
    flex: 1; /* Grow to fill space */
    justify-content: center;
    align-items: center;
    background: #000;
    width: 100%;
    order: 2; /* Ensure it comes after HUD */
    position: relative;
    overflow: hidden;
}

/* Order: HUD -> Canvas -> Tabs -> Panels */
#hud { order: 1; }
/* Panels come after, controlled by tabs */

/* Mobile Navigation Bar */
.mobile-tabs {
    order: 10;
    display: flex;
    width: 100%;
    background: #0a0a12;
    border-top: 1px solid #333;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
}

.mobile-tab-btn {
    flex: 1;
    padding: 1rem;
    background: transparent;
    border: none;
    color: #666;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-tab-btn.active {
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    box-shadow: inset 0 -3px 0 #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

/* Mobile Panel Visibility */
#upgrades-panel,
#system-panels,
#debug-panel,
#controls-hint {
    display: none; /* Hidden by default on mobile */
    order: 3;
    padding: 1rem;
    background: rgba(10, 10, 18, 0.95);
    border-top: 1px solid #333;
    max-height: 40vh; /* Limit height */
    overflow-y: auto;
    width: 100%;
}

/* Show when active class added by JS */
#upgrades-panel.mobile-visible,
#system-panels.mobile-visible {
    display: flex;
}

/* Special handling for debug/footer on mobile */
#debug-panel.mobile-visible,
#controls-hint.mobile-visible {
    display: block; /* or flex */
}

/* Ensure canvas takes available space on mobile */
#canvas-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Remove border/radius for immersive mobile feel */
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ===========================================
   DESKTOP LAYOUT (>= 900px)
   =========================================== */
@media (min-width: 900px) {
    .app-shell {
        display: grid;
        grid-template-columns: 280px 1fr 280px;
        grid-template-rows: 100vh; /* Full viewport height */
        overflow: hidden;
    }

    .panel-left,
    .panel-right {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 1rem;
        gap: 1rem;
        background: rgba(0, 0, 0, 0.3);
        border-right: 1px solid #333;
        height: 100vh;
    }

    .panel-right {
        border-right: none;
        border-left: 1px solid #333;
    }

    .stage {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #050508;
        padding: 1rem;
        position: relative;
        overflow: hidden;
    }

    /* Reset visibility and styles for desktop */
    #hud,
    #upgrades-panel,
    #system-panels,
    #controls-hint,
    .stage {
        display: flex !important; /* Always visible */
        order: unset;
        max-height: none;
        width: 100%;
        background: transparent;
        border-top: none;
        padding: 0;
    }

    /* Debug panel only when enabled */
    #debug-panel {
        display: none !important;
    }
    body.debug-enabled #debug-panel {
        display: flex !important;
    }

    #upgrades-panel {
        flex-direction: column;
    }

    #system-panels {
        display: grid !important; /* Restore grid layout */
        grid-template-columns: 1fr; /* Stack vertically in side panel */
        gap: 1rem;
    }

    /* Hide mobile UI */
    .mobile-tabs {
        display: none;
    }

    /* Desktop Canvas Container */
    #canvas-container {
        flex: 1;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border: 2px solid #ff00ff;
        border-radius: 8px;
        box-shadow: var(--canvas-glow), inset 0 0 30px rgba(255, 0, 255, 0.1);
        background: rgba(0, 0, 0, 0.6);
        position: relative;
    }
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000; /* Higher than panels */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #ffff00;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    color: #ffffff;
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
    animation: toast-fade-in-out 3s ease-in-out forwards;
    text-shadow: 0 0 10px #ffff00;
}

.toast.golden { border-color: #ffd700; text-shadow: 0 0 10px #ffd700; }
.toast.milestone { border-color: #00ffff; text-shadow: 0 0 10px #00ffff; }
.toast.lore, .toast.discovery { border-color: #ff00ff; text-shadow: 0 0 8px #ff00ff; }
.toast.warning { border-color: #ff4400; text-shadow: 0 0 10px #ff4400; color: #ffcccc; }

@keyframes toast-fade-in-out {
    0% { opacity: 0; transform: translateY(-20px); }
    15% { opacity: 1; transform: translateY(0); }
    85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* ===========================================
   COMPONENT STYLES (Adapted)
   =========================================== */

/* HUD */
#hud {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #00ffff;
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: var(--hud-glow), inset 0 0 20px rgba(0, 255, 255, 0.1);
    flex-wrap: wrap; /* Wrap on small screens */
}

@media (min-width: 900px) {
    #hud {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .hud-item {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px dashed #333;
        padding-bottom: 0.5rem;
    }
    .hud-item:last-child { border-bottom: none; }
    .hud-status {
        border-left: none;
        padding-left: 0;
    }
}

.hud-item { display: flex; flex-direction: column; align-items: center; }
.hud-label { font-size: 0.75rem; color: #00ffff; text-transform: uppercase; letter-spacing: 1px; }
.hud-value { font-size: 1.5rem; font-weight: bold; color: #ffffff; line-height: 1; }
.hud-status { flex-direction: row; gap: 0.3rem; font-size: 0.75rem; color: #aaa; }
#day-night-text { color: #ffff00; }
.hud-status.night #day-night-text { color: #8888ff; }

/* Upgrades */
#upgrades-panel h2 {
    color: #ff00ff;
    text-align: center;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 15px #ff00ff;
    margin-bottom: 0.5rem;
}

.upgrade-separator { height: 1px; background: linear-gradient(90deg, transparent, #ff00ff, transparent); margin: 0.5rem 0; }

.upgrade-btn, .migrate-btn, .agent-btn {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem;
    background: rgba(20, 20, 40, 0.8);
    border: 2px solid #444;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    margin-bottom: 0.5rem;
}

.upgrade-btn:hover:not(:disabled), .agent-btn:hover:not(:disabled) { border-color: #00ff00; transform: translateX(5px); }
.upgrade-btn:disabled, .agent-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #333; }
.upgrade-name { font-size: 1rem; font-weight: bold; color: #ffff00; }
.upgrade-desc { font-size: 0.7rem; color: #888; }
.upgrade-cost { font-size: 0.85rem; color: #00ffff; }
.upgrade-owned { font-size: 0.8rem; color: #00ff00; }

/* Migrate Button */
.migrate-btn { background: rgba(40, 20, 60, 0.8); border: 2px solid #8844aa; }
.migrate-btn .upgrade-name { color: #dd88ff; }
.migrate-btn:hover:not(:disabled) { border-color: #dd88ff; transform: translateX(5px); }
.migrate-btn:not(:disabled) { animation: migrate-pulse 1.5s ease-in-out infinite; }

/* System Panels (Lore/Synergy) */
.system-panel {
    background: rgba(10, 10, 20, 0.7);
    border: 2px solid rgba(0, 255, 255, 0.35);
    border-radius: 8px;
    padding: 0.75rem;
    min-height: 120px;
    margin-bottom: 1rem;
}
.system-panel h3 { font-size: 0.9rem; text-transform: uppercase; color: #00ffff; margin-bottom: 0.5rem; }

#synergy-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: #cccccc; }
#synergy-list li { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(0, 255, 255, 0.15); padding-bottom: 0.2rem; }

.lore-log { display: flex; flex-direction: column; gap: 0.4rem; max-height: 200px; overflow-y: auto; font-size: 0.75rem; color: #e0e0e0; }
.lore-entry { padding: 0.35rem 0.5rem; border-left: 2px solid rgba(255, 0, 255, 0.6); background: rgba(0, 0, 0, 0.35); border-radius: 4px; }
.lore-entry small { display: block; color: #888; margin-top: 0.2rem; }

/* Canvas */
#game-canvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
    image-rendering: pixelated;
    border-radius: 4px;
}

/* Click Text */
.click-text {
    position: absolute;
    pointer-events: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    animation: float-up 1s ease-out forwards;
    z-index: 100;
    transform: translate(-50%, -50%);
}

@keyframes float-up {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -100px) scale(1.5); }
}

/* Footer */
#controls-hint {
    text-align: center;
    padding: 0.75rem;
    color: #666;
    font-size: 0.85rem;
    border-top: 1px solid #333;
    margin-top: auto; /* Push to bottom of panel */
}
#controls-hint kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: #222;
    border: 1px solid #555;
    border-radius: 3px;
    font-family: inherit;
    color: #00ffff;
    margin: 0 0.1rem;
}

/* Animations */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.6); }
}
@keyframes migrate-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(221, 136, 255, 0.3); }
    50% { box-shadow: 0 0 25px rgba(221, 136, 255, 0.6); }
}

/* Intensity Classes */
.intensity-low { --hud-glow: 0 0 10px rgba(0, 255, 255, 0.3); --canvas-glow: 0 0 20px rgba(255, 0, 255, 0.3); }
.intensity-medium { --hud-glow: 0 0 20px rgba(0, 255, 255, 0.5); --canvas-glow: 0 0 30px rgba(255, 0, 255, 0.5); }
.intensity-high { --hud-glow: 0 0 30px rgba(0, 255, 255, 0.7); --canvas-glow: 0 0 40px rgba(255, 0, 255, 0.7); }

/* Debug Panel */
#debug-panel {
    background: rgba(10, 10, 20, 0.95);
    border: 2px solid #ff00ff;
    border-radius: 8px;
    margin: 1rem 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
}
#debug-panel.collapsed { height: 48px; }
.debug-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background: rgba(255, 0, 255, 0.1); border-bottom: 1px solid rgba(255, 0, 255, 0.3); height: 48px; }
.debug-header h3 { margin: 0; color: #ff00ff; font-size: 1rem; text-transform: uppercase; }
#btn-debug-collapse { background: none; border: 1px solid #ff00ff; color: #ff00ff; width: 24px; height: 24px; cursor: pointer; }
.debug-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.debug-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.debug-btn { padding: 0.3rem 0.6rem; background: rgba(0, 0, 0, 0.5); border: 1px solid #00ffff; color: #00ffff; font-family: inherit; font-size: 0.8rem; cursor: pointer; flex: 1; }
.debug-btn:hover { background: rgba(0, 255, 255, 0.2); }
.debug-btn.warning { border-color: #ff4444; color: #ff4444; }
#debug-birds-input { background: rgba(0, 0, 0, 0.5); border: 1px solid #00ffff; color: #ffffff; padding: 0.3rem; }

/* ===========================================
   NEW UI ELEMENTS (v0.2)
   =========================================== */

/* Lore Filters */
#lore-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.filter-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    color: #888;
    font-family: inherit;
    font-size: 0.7rem;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 3px;
    text-transform: uppercase;
}

.filter-btn:hover {
    border-color: #00ffff;
    color: #00ffff;
}

.filter-btn.active {
    background: rgba(0, 255, 255, 0.2);
    border-color: #00ffff;
    color: #00ffff;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

/* Save Indicator */
#save-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 255, 0, 0.2);
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 3000;
    text-shadow: 0 0 5px #00ff00;
}

#save-indicator.show {
    opacity: 1;
}

/* Discovery Meter */
#discovery-meter {
    color: #00ffff;
    font-weight: bold;
}

/* Map Overlay */
#map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 20, 0.95);
    z-index: 500;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 2px solid #00ffff;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid #00ffff;
    padding-bottom: 0.5rem;
}

.map-header h3 {
    color: #00ffff;
    margin: 0;
}

#btn-close-map {
    background: #330000;
    color: #ff0000;
    border: 1px solid #ff0000;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

#map-nodes-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
}

.map-toggle-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #00ffff;
    color: #00ffff;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

/* Map Nodes */
.map-node {
    background: rgba(0, 30, 30, 0.8);
    border: 1px solid #00aaaa;
    padding: 1rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.map-node.locked {
    opacity: 0.5;
    background: #111;
    border-color: #333;
}

.map-node.completed {
    border-color: #00ff00;
    background: rgba(0, 30, 0, 0.8);
}

.node-header {
    display: flex;
    justify-content: space-between;
}

.node-name { font-weight: bold; color: #fff; }
.node-desc { font-size: 0.8rem; color: #aaa; }
.node-rewards { font-size: 0.7rem; color: #00ffff; }
.node-cost { font-size: 0.8rem; color: #ff00ff; }
.node-risk { font-size: 0.8rem; color: #ff8800; }

.exp-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #00ffff;
    color: #00ffff;
    padding: 0.4rem;
    cursor: pointer;
    margin-top: auto;
}

.exp-btn:disabled {
    border-color: #555;
    color: #555;
    cursor: not-allowed;
}

.exp-status {
    color: #ffff00;
    font-weight: bold;
    animation: pulse 1s infinite;
}

/* Objectives */
.objective-item {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid #00ffff;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.objective-item.completed {
    border-left-color: #00ff00;
}

.obj-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
}

.obj-desc { font-size: 0.75rem; color: #ccc; margin-bottom: 0.3rem; }

.obj-bar {
    height: 4px;
    background: #333;
    width: 100%;
}

.obj-fill {
    height: 100%;
    background: #00ffff;
    transition: width 0.5s;
}

.objective-item.completed .obj-fill { background: #00ff00; }

.claim-btn {
    width: 100%;
    margin-top: 0.5rem;
    background: #003300;
    color: #00ff00;
    border: 1px solid #00ff00;
    cursor: pointer;
}

/* Artifacts */
#artifacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 0.5rem;
}

.artifact-item {
    width: 40px;
    height: 40px;
    background: #222;
    border: 1px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: help;
}

.art-icon { font-size: 1.2rem; }

/* Contributors */
.contrib-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    border-bottom: 1px dashed #333;
    padding: 0.2rem 0;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Tech Forks */
.tech-fork-container {
    padding: 0.5rem;
    border: 1px dashed #ff00ff;
    margin: 0.5rem 0;
    text-align: center;
}

.tech-fork-container h4 {
    color: #ff00ff;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}