:root {
    /* Porco Rosso Palette: Adriatic Blue, Tuscan Terracotta, Warm Wood, Brass */
    --color-sky: #87CEEB;
    --color-sea: #1E3F66;
    --color-terracotta: #E2725B;
    --color-wood: #8B4513;
    --color-brass: #C5A059;
    --color-paper: #F5F5DC;
    --color-text: #2C2C2C;
    --color-panel: rgba(44, 44, 44, 0.85);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    image-rendering: pixelated;
    /* Crucial for sharp pixel art */
}

body {
    background-color: #000;
    color: var(--color-paper);
    font-family: 'Press Start 2P', cursive;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px 0;
}

#wrapper {
    width: 95%;
    max-width: 1680px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Base unit: 1u = 100px at 1680px width */
    --u: calc(min(95vw, 1680px) / 16.8);
    font-size: var(--u);
}

#dashboard {
    width: 100%;
    aspect-ratio: 1680 / 450;
    position: relative;
    background-image: url('assets/bg-iita.png');
    background-size: 100% 100%;
    border: 3px solid var(--color-brass);
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* UI Panels */
.ui-panel {
    background-color: var(--color-ink);
    border: 3px solid var(--color-brass);
    padding: 0.15em;
    position: relative;
    /* Changed from absolute */
    z-index: 10;
}

#header-ui {
    align-self: stretch;
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
    justify-content: flex-end;
}

.score-box {
    background-color: rgba(0, 0, 0, 0.7);
    border: 3px solid var(--color-brass);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    min-width: 160px;
}

.score-box .label {
    position: absolute;
    top: -8px;
    right: 5px;
    background: #000;
    padding: 0 4px;
    font-size: 8px;
    color: var(--color-brass);
}

.currency {
    font-size: 14px;
}

.token-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffed4a;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff7a1;
    border: 1px solid #d4af37;
}

#token-count,
#time-total {
    font-size: 0.22em;
    color: var(--color-gold);
}

#activity-log {
    position: relative;
    width: 100%;
    /* 8 lines * 1.6 line-height = 12.8em */
    height: 12.8em;
    font-size: 0.12em;
    line-height: 1.6;
    display: block;
    padding: 0.5em;
    box-sizing: border-box;
    overflow-y: scroll;
    /* Force scrollbar */
    scroll-behavior: smooth;
    background-color: #0a0e26;
    /* Deeper Dark Blue */
    scrollbar-width: thin;
    scrollbar-color: var(--color-brass) transparent;
}


#activity-log::-webkit-scrollbar {
    width: 8px;
}

#activity-log::-webkit-scrollbar-thumb {
    background: var(--color-brass);
    border-radius: 4px;
}


#log-text {
    white-space: pre-wrap;
    font-family: 'Press Start 2P', cursive;
}


/* Factory Floor Segments */
#factory-floor {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 0.5em;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 10px;
    box-sizing: border-box;
}

.segment {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 0.3em;
}

/* (Duplicate block removed for consolidation) */





.agent-label .timer {
    font-size: 0.8em;
    color: var(--color-gold);
    display: block;
    line-height: 1;
}


.agent-label .timer:empty {
    display: none;
}




/* Downward-pointing triangle */
.agent-label::after {
    content: '';
    position: absolute;
    bottom: calc(-0.55 * 0.08 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    border-left: calc(0.35 * 0.08 * var(--u)) solid transparent;
    border-right: calc(0.35 * 0.08 * var(--u)) solid transparent;
    border-top: calc(0.45 * 0.08 * var(--u)) solid var(--color-brass);
}

/* Individual Agent Asset Mapping */

/* Individual Agent Asset Mapping */

/* 1. Intake */
#agent-system_intake .agent.idle {
    background-image: url('assets/characters/system_intake_idle.png');
}

#agent-system_intake .agent.working {
    background-image: url('assets/characters/system_intake_working.png');
}

/* 2. Sanitizer */
#agent-system_sanitizer .agent.idle {
    background-image: url('assets/characters/system_sanitizer_idle.png');
}

#agent-system_sanitizer .agent.working {
    background-image: url('assets/characters/system_sanitizer_working.png');
}

/* 3. Dispatcher */
#agent-system_dispatcher .agent.idle {
    background-image: url('assets/characters/system_dispatcher_idle.png');
}

#agent-system_dispatcher .agent.working {
    background-image: url('assets/characters/system_dispatcher_working.png');
}

/* 4. Researcher */
#agent-researcher .agent.idle {
    background-image: url('assets/characters/researcher_idle.png');
}

#agent-researcher .agent.working {
    background-image: url('assets/characters/researcher_working.png');
}

/* 5. Visual Specialist */
#agent-visual_specialist .agent.idle {
    background-image: url('assets/characters/visual_specialist_idle.png');
}

#agent-visual_specialist .agent.working {
    background-image: url('assets/characters/visual_specialist_working.png');
}

/* 6. Text Specialist */
#agent-text_specialist .agent.idle {
    background-image: url('assets/characters/text_specialist_idle.png');
}

#agent-text_specialist .agent.working {
    background-image: url('assets/characters/text_specialist_working.png');
}

/* 7. Analyst */
#agent-analyst .agent.idle {
    background-image: url('assets/characters/analyst_idle.png');
}

#agent-analyst .agent.working {
    background-image: url('assets/characters/analyst_working.png');
}

/* 8. Global Router */
#agent-global_router .agent.idle {
    background-image: url('assets/characters/global_router_idle.png');
}

#agent-global_router .agent.working {
    background-image: url('assets/characters/global_router_working.png');
}


/* Global Agent Layer (Stable Coordinates) */
#agent-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.agent-container {
    position: absolute;
    top: 0;
    width: 1.6em;
    height: 100%;
}

/* Fixed Desk Anchors - Evenly Spaced & Router Fixed */
#agent-system_intake {
    left: calc(1.05 * var(--u));
}

#agent-system_sanitizer {
    left: calc(2.89 * var(--u));
}

#agent-system_dispatcher {
    left: calc(4.73 * var(--u));
}

#agent-researcher {
    left: calc(6.57 * var(--u));
}

#agent-visual_specialist {
    left: calc(8.41 * var(--u));
}

#agent-text_specialist {
    left: calc(10.25 * var(--u));
}

#agent-analyst {
    left: calc(12.09 * var(--u));
}

#agent-global_router {
    left: calc(13.93 * var(--u));
}

.agent {
    width: 1.6em;
    height: 1.6em;
    background-size: 6.4em 1.6em;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    left: 0;
}

.agent-container.is-idle .agent.idle,
.agent-container.is-working .agent.working {
    opacity: 1;
}

.agent.idle {
    animation: agent-animate 0.8s steps(4) infinite;
    top: calc(18% - 0.36 * var(--u));
    transform-origin: bottom center;
}

.agent.working {
    bottom: 15px;
    animation: agent-animate 1.2s steps(4) infinite;
}

/* Fixed Mezzanine Spacing (Shifted & Spaced) */
#agent-system_intake .agent.idle {
    transform: translateX(calc(4.95 * var(--u))) scale(0.75);
}

#agent-system_sanitizer .agent.idle {
    transform: translateX(calc(4.10 * var(--u))) scale(0.75);
}

#agent-system_dispatcher .agent.idle {
    transform: translateX(calc(3.3 * var(--u))) scale(0.75);
}

#agent-researcher .agent.idle {
    transform: translateX(calc(2.4 * var(--u))) scale(0.75);
}

#agent-visual_specialist .agent.idle {
    transform: translateX(calc(1.55 * var(--u))) scale(0.75);
}

#agent-text_specialist .agent.idle {
    transform: translateX(calc(0.5 * var(--u))) scale(0.75);
}

#agent-analyst .agent.idle {
    transform: translateX(calc(-0.5 * var(--u))) scale(0.75);
}

#agent-global_router .agent.idle {
    transform: translateX(calc(-1.2 * var(--u))) scale(0.75);
}

/* Consolidated Name Tag Style */
.agent-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(1.6em + 125px); /* Raised by 5px from previous manual setting */
    min-width: 100px;
    min-height: 45px;
    background-color: rgba(10, 14, 30, 0.95);
    border: 2px solid var(--color-brass);
    color: var(--color-paper);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 8px 12px;
    white-space: nowrap;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);

    /* Smooth Alpha Fade Sync */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    overflow: visible;
}

.agent-container.is-working .agent-label {
    opacity: 1;
}

.agent-container.is-idle .agent-label {
    opacity: 0;
}

.agent-label .timer {
    font-size: 11px; /* Slightly larger */
    color: #ffed4a !important; /* Force high-visibility gold */
    display: block;
    line-height: 1;
    min-height: 12px;
    margin-top: 4px;
    font-weight: bold;
    z-index: 100;
}





.agent.working {
    left: 50%;
    bottom: 15px;
    /* Raised by 15px as requested */
    transform: translateX(-50%);
    animation: agent-animate 1.2s steps(4) infinite;
}



@keyframes agent-animate {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -6.4em 0;
    }
}

/* Status Icons */
.status-icon {
    width: 0.32em;
    height: 0.32em;
    position: absolute;
    top: -0.4em;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.2s;
}

.status-icon.visible {
    opacity: 1;
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-0.05em);
    }
}

/* System Diagnostics Menu */
#debug-menu {
    position: relative;
    width: 100%;
    padding: 10px;
    opacity: 0.3;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#debug-menu .label {
    font-size: 10px;
    margin-bottom: 5px;
    color: var(--color-brass);
}


#debug-menu:hover {
    opacity: 1;
}

#debug-menu .debug-buttons {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

#debug-menu button {
    background: var(--color-panel);
    border: 1px solid var(--color-brass);
    color: var(--color-paper);
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 5px;
    cursor: pointer;
}

#debug-menu button:hover {
    background: var(--color-brass);
    color: var(--color-panel);
}

/* Particles (Package, Token) */
.particle {
    position: absolute;
    z-index: 100;
    pointer-events: none;
}

.particle.token {
    width: 16px;
    height: 16px;
    background-color: #ffed4a;
    /* Brighter gold */
    border-radius: 50%;
    box-shadow: 0 0 12px #fff7a1, 0 0 4px #ffed4a;
    border: 1px solid #d4af37;
    z-index: 1001;
    /* Ensure tokens stay above everything */
}

.token-usage-text {
    position: absolute;
    color: var(--color-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    pointer-events: none;
    z-index: 1002;
    text-shadow: 2px 2px 0px #000;
}



.particle.package {
    width: 0.48em;
    height: 0.48em;
    background-image: url('assets/ui/package.png');
    background-size: contain;
}