/* ============================================
   economic.day - Pixel-Art Economics Simulation
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --console-grey: #D8D0C0;
    --pixel-dark: #2A2A3A;
    --coin-gold: #C8A840;
    --market-red: #B04040;
    --growth-green: #508850;
    --sky-vintage: #88A8C0;

    --font-pixel: 'Press Start 2P', monospace;
    --font-body: 'DM Sans', sans-serif;
    --font-data: 'VT323', monospace;

    --grid-unit: 8px;
}

html {
    scroll-behavior: smooth;
    image-rendering: pixelated;
}

body {
    background: var(--console-grey);
    color: var(--pixel-dark);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.7;
    overflow-x: hidden;
}

/* --- Utility Classes --- */
.pixel-font {
    font-family: var(--font-pixel);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.data-label {
    font-family: var(--font-data);
    font-weight: 400;
    font-size: 16px;
}

.section-label {
    font-size: clamp(12px, 1.5vw, 20px);
    text-align: center;
    padding: calc(var(--grid-unit) * 4) 0;
    color: var(--pixel-dark);
}

/* --- Pixel Icons (CSS-drawn) --- */
.pixel-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    image-rendering: pixelated;
}

.pixel-icon-chart {
    background: var(--coin-gold);
    clip-path: polygon(0% 100%, 0% 60%, 25% 60%, 25% 40%, 50% 40%, 50% 20%, 75% 20%, 75% 0%, 100% 0%, 100% 100%);
}

.pixel-icon-person {
    background: var(--growth-green);
    clip-path: polygon(35% 0%, 65% 0%, 65% 25%, 75% 25%, 75% 30%, 100% 60%, 100% 70%, 75% 70%, 75% 100%, 55% 100%, 55% 70%, 45% 70%, 45% 100%, 25% 100%, 25% 70%, 0% 70%, 0% 60%, 25% 30%, 25% 25%, 35% 25%);
}

.pixel-icon-graph {
    background: var(--sky-vintage);
    clip-path: polygon(0% 100%, 0% 80%, 15% 80%, 15% 50%, 30% 50%, 30% 70%, 45% 70%, 45% 30%, 60% 30%, 60% 60%, 75% 60%, 75% 10%, 90% 10%, 90% 40%, 100% 40%, 100% 100%);
}

.pixel-icon-coin {
    background: var(--coin-gold);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--pixel-dark);
}

.pixel-icon-fire {
    background: var(--market-red);
    clip-path: polygon(40% 100%, 40% 60%, 20% 80%, 30% 40%, 10% 60%, 30% 10%, 50% 0%, 70% 10%, 90% 60%, 70% 40%, 80% 80%, 60% 60%, 60% 100%);
}

.pixel-icon-ship {
    background: var(--sky-vintage);
    clip-path: polygon(10% 60%, 20% 40%, 40% 40%, 40% 20%, 50% 20%, 50% 0%, 60% 0%, 60% 40%, 80% 40%, 90% 60%, 85% 80%, 80% 100%, 20% 100%, 15% 80%);
}

.pixel-icon-bank {
    background: var(--coin-gold);
    clip-path: polygon(0% 40%, 50% 0%, 100% 40%, 100% 45%, 90% 45%, 90% 85%, 100% 85%, 100% 100%, 0% 100%, 0% 85%, 10% 85%, 10% 45%, 0% 45%);
}

.pixel-icon-smile {
    width: 16px;
    height: 16px;
    background: var(--growth-green);
    border-radius: 50%;
    position: relative;
}

.pixel-icon-smile::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 3px;
    width: 3px;
    height: 3px;
    background: var(--pixel-dark);
    box-shadow: 7px 0 0 var(--pixel-dark);
}

.pixel-icon-smile::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 8px;
    height: 4px;
    border-bottom: 2px solid var(--pixel-dark);
    border-radius: 0 0 4px 4px;
}


/* ==============================================
   SECTION 1: GAME START SCREEN
   ============================================== */
#start-screen {
    width: 100%;
    height: 100vh;
    background: var(--console-grey);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#skyline-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

#pixel-skyline {
    display: flex;
    align-items: flex-end;
    height: 100%;
    gap: 0;
    padding: 0 0;
    width: 100%;
}

.sky-building {
    display: inline-block;
    position: relative;
    transition: height 0.15s steps(4);
}

.sky-building:hover {
    filter: brightness(1.1);
}

.building-window {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
}

#title-area {
    text-align: center;
    z-index: 2;
    position: relative;
}

#game-title {
    font-family: var(--font-pixel);
    font-size: clamp(20px, 4vw, 48px);
    color: var(--pixel-dark);
    letter-spacing: 0.02em;
    margin-bottom: calc(var(--grid-unit) * 2);
    min-height: 1.2em;
}

#game-title .cursor {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background: var(--pixel-dark);
    vertical-align: baseline;
    animation: cursor-blink 0.5s steps(1) infinite;
    margin-left: 2px;
}

@keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#subtitle {
    font-size: clamp(8px, 1vw, 12px);
    color: var(--sky-vintage);
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#subtitle.visible {
    opacity: 1;
}

#press-start {
    position: absolute;
    bottom: 260px;
    font-size: clamp(10px, 1.4vw, 16px);
    color: var(--coin-gold);
    z-index: 2;
    opacity: 0;
}

#press-start.blink {
    animation: blink-toggle 1s steps(1) infinite;
}

@keyframes blink-toggle {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}


/* ==============================================
   SECTION 2: ECONOMIC BENTO DASHBOARD
   ============================================== */
#bento-dashboard {
    padding: calc(var(--grid-unit) * 4) calc(var(--grid-unit) * 2);
    max-width: 1200px;
    margin: 0 auto;
}

#bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.bento-module {
    background: var(--pixel-dark);
    color: var(--console-grey);
    border: 2px solid var(--sky-vintage);
    padding: 16px;
    opacity: 0;
    transform: perspective(800px) rotateY(90deg);
    transition: transform 0.6s ease, opacity 0.6s ease;
    overflow: hidden;
}

.bento-module.visible {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
}

.bento-wide {
    grid-column: span 2;
}

.module-header {
    display: flex;
    align-items: center;
    gap: var(--grid-unit);
    margin-bottom: calc(var(--grid-unit) * 2);
    padding-bottom: var(--grid-unit);
    border-bottom: 2px solid var(--sky-vintage);
}

.module-title {
    font-size: clamp(8px, 1vw, 12px);
    color: var(--sky-vintage);
}

.module-body {
    display: flex;
    flex-direction: column;
    gap: var(--grid-unit);
}

.module-text {
    font-family: var(--font-body);
    font-size: clamp(12px, 0.9vw, 14px);
    line-height: 1.6;
    color: #B8B0A0;
    margin-top: var(--grid-unit);
}

/* Pixel Progress Bar */
.pixel-progress-bar {
    display: flex;
    align-items: center;
    gap: var(--grid-unit);
}

.progress-track {
    flex: 1;
    height: 16px;
    background: #1A1A2A;
    border: 2px solid var(--sky-vintage);
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--growth-green);
    width: 0%;
    transition: width 0.8s steps(10);
}

.progress-fill.active {
    width: attr(data-value %);
}

.confidence-fill {
    background: var(--coin-gold);
}

.progress-label {
    min-width: 80px;
    text-align: right;
    color: var(--console-grey);
}

/* Mini Bars */
.mini-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--grid-unit);
}

.mini-bar-row {
    display: flex;
    align-items: center;
    gap: var(--grid-unit);
}

.mini-bar-row .data-label {
    min-width: 110px;
    font-size: 14px;
    color: var(--sky-vintage);
}

.mini-bar {
    flex: 1;
    height: 8px;
    background: #1A1A2A;
    border: 1px solid var(--sky-vintage);
}

.mini-fill {
    height: 100%;
    background: var(--growth-green);
    transition: width 0.6s steps(8);
}

/* Stat Counter */
.stat-counter {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.counter-value {
    font-size: 32px;
    color: var(--coin-gold);
}

.counter-unit {
    font-size: 24px;
    color: var(--coin-gold);
}

/* Pixel Indicator */
.pixel-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    width: fit-content;
    margin-top: var(--grid-unit);
}

.pixel-indicator.positive .indicator-arrow,
.pixel-indicator.positive .data-label {
    color: var(--growth-green);
}

.pixel-indicator.negative .indicator-arrow,
.pixel-indicator.negative .data-label {
    color: var(--market-red);
}

.indicator-arrow {
    font-size: 12px;
}

/* Market Items */
.market-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.market-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid var(--sky-vintage);
}

.market-item .positive {
    color: var(--growth-green);
}

.market-item .negative {
    color: var(--market-red);
}

/* Currency Cards */
.currency-cards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.currency-card {
    width: 100px;
    height: 140px;
    perspective: 600px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.currency-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid var(--coin-gold);
    background: #1A1A2A;
}

.card-back {
    transform: rotateY(180deg);
    background: var(--coin-gold);
}

.card-back .data-label {
    color: var(--pixel-dark);
    font-size: 22px;
}

.card-back .card-label {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--pixel-dark);
}

.pixel-currency-symbol {
    font-family: var(--font-pixel);
    font-size: 24px;
    color: var(--coin-gold);
}

.card-front .data-label {
    color: var(--console-grey);
}

/* Trade Balance */
.trade-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border: 2px solid;
}

.trade-bar.exports {
    border-color: var(--growth-green);
    background: rgba(80, 136, 80, 0.15);
}

.trade-bar.imports {
    border-color: var(--market-red);
    background: rgba(176, 64, 64, 0.15);
}

.trade-bar.exports .data-label {
    color: var(--growth-green);
}

.trade-bar.imports .data-label {
    color: var(--market-red);
}

.trade-amount {
    font-size: 20px;
}

/* Rate Dots */
.rate-dots {
    display: flex;
    gap: 6px;
    margin-top: var(--grid-unit);
}

.rate-dot {
    width: 12px;
    height: 12px;
    border: 2px solid var(--coin-gold);
    background: transparent;
}

.rate-dot.filled {
    background: var(--coin-gold);
}


/* ==============================================
   SECTION 3: PIXEL LANDSCAPE PANORAMA
   ============================================== */
#pixel-landscape {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--sky-vintage);
}

#landscape-scroll-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#landscape-scene {
    width: 300%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.landscape-sky {
    flex: 1;
    background: linear-gradient(180deg, #6888A0 0%, var(--sky-vintage) 60%, #A8C0D0 100%);
    position: relative;
}

.landscape-sky::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80px;
    height: 24px;
    background: var(--console-grey);
    opacity: 0.5;
    box-shadow: 120px 20px 0 var(--console-grey), 300px -10px 0 var(--console-grey),
                500px 5px 0 var(--console-grey), 800px 15px 0 var(--console-grey);
}

.landscape-buildings {
    height: 280px;
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 0;
}

.landscape-ground {
    height: 80px;
    background: var(--growth-green);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 4px solid #3A6A3A;
}

.landscape-building {
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}

.landscape-label {
    position: absolute;
    bottom: calc(80px + 16px);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(10px, 1.2vw, 16px);
    color: var(--pixel-dark);
    z-index: 5;
    background: rgba(216, 208, 192, 0.8);
    padding: 8px 16px;
}

.building-sign {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-data);
    font-size: 10px;
    color: var(--console-grey);
    white-space: nowrap;
    opacity: 0.7;
}


/* ==============================================
   SECTION 4: FLOATING COIN FIELD
   ============================================== */
#coin-field {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
    background: var(--pixel-dark);
}

#coin-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.floating-coin {
    position: absolute;
    bottom: -80px;
    left: var(--x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: float-up var(--duration) linear var(--delay) infinite;
    opacity: 0;
}

@keyframes float-up {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(-80vh - 120px));
        opacity: 0;
    }
}

.coin-shape {
    width: 24px;
    height: 24px;
    background: var(--coin-gold);
    border: 3px solid var(--pixel-dark);
    transform: rotate(45deg);
    position: relative;
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.2);
}

.coin-shape::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
}

.coin-label {
    font-size: 14px;
    color: var(--coin-gold);
    white-space: nowrap;
}


/* ==============================================
   SECTION 5: SESSION COMPLETE FOOTER
   ============================================== */
#session-complete {
    width: 100%;
    min-height: 50vh;
    background: var(--pixel-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--grid-unit) * 8) calc(var(--grid-unit) * 2);
    border-top: 4px solid var(--sky-vintage);
}

.session-content {
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.session-title {
    font-size: clamp(16px, 3vw, 32px);
    color: var(--console-grey);
    margin-bottom: calc(var(--grid-unit) * 4);
}

.session-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: calc(var(--grid-unit) * 4);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(136, 168, 192, 0.2);
}

.stat-row .data-label {
    color: var(--sky-vintage);
}

.stat-value {
    color: var(--coin-gold);
    font-size: 18px;
}

.session-score {
    padding: calc(var(--grid-unit) * 3) 0;
    margin-bottom: calc(var(--grid-unit) * 3);
    border-top: 2px solid var(--coin-gold);
    border-bottom: 2px solid var(--coin-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--grid-unit);
}

.session-score .pixel-font {
    font-size: clamp(8px, 1vw, 12px);
    color: var(--sky-vintage);
}

.score-number {
    font-size: clamp(24px, 4vw, 48px);
    color: var(--coin-gold);
}

.session-prompt {
    font-size: clamp(8px, 1vw, 12px);
    color: var(--console-grey);
    animation: blink-toggle 1.2s steps(1) infinite;
    margin-top: calc(var(--grid-unit) * 2);
}


/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 900px) {
    #bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-wide {
        grid-column: span 2;
    }

    .currency-cards {
        gap: 4px;
    }

    .currency-card {
        width: 80px;
        height: 112px;
    }
}

@media (max-width: 560px) {
    #bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-wide {
        grid-column: span 1;
    }

    .currency-cards {
        flex-wrap: wrap;
    }

    .currency-card {
        width: 72px;
        height: 100px;
    }

    .pixel-currency-symbol {
        font-size: 18px;
    }
}