/* ================================================================
   css/city.css — EcoBalance
   Қала көрінісі: аспан, жер, өзен, ғимараттар, ағаштар,
   азаматтар, күн/ай/жұлдыздар, бұлттар, атмосфера шыбыны
   City visual layer: sky, ground, river, buildings, trees,
   citizens, sun/moon/stars, clouds, smog, fireflies.
   ================================================================ */

/* ============ DAY/NIGHT OVERLAY ============ */
.time-overlay {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 20;
    transition: background 3s ease; border-radius: 17px;
}
.time-indicator {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.5); color: #fff;
    padding: 4px 14px; border-radius: 20px;
    font-size: 13px; font-family: 'Orbitron', sans-serif;
    z-index: 30; letter-spacing: 1px; pointer-events: none;
}

/* ============ CITY CANVAS ============ */
.city-container {
    position: relative; height: 600px;
    border-radius: 20px; overflow: hidden;
    border: 3px solid #4ade80;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
    background: #1e3a5f;
}
.city-sky {
    position: absolute; top: 0; left: 0; width: 100%; height: 58%;
    background: linear-gradient(to bottom, #1e40af 0%, #60a5fa 100%);
    transition: background 3s ease;
}
.city-ground {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 42%;
    background: linear-gradient(to bottom, #4ade80 0%, #166534 100%);
    transition: background 3s ease;
}

/* ============ RIVER ============ */
.river-container {
    position: absolute; bottom: 0; left: 15%;
    width: 18%; height: 42%; z-index: 5; overflow: hidden;
}
.river-body {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%);
    transition: background 2s ease;
}
.river-shimmer {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 10%, rgba(255,255,255,0) 20%
    );
    animation: riverFlow 3s linear infinite;
}
.river-bank-left {
    position: absolute; left: -6px; top: 0; bottom: 0; width: 10px;
    background: linear-gradient(to right, #4ade80, #22c55e);
    border-radius: 0 5px 5px 0; transition: background 2s ease;
}
.river-bank-right {
    position: absolute; right: -6px; top: 0; bottom: 0; width: 10px;
    background: linear-gradient(to left, #4ade80, #22c55e);
    border-radius: 5px 0 0 5px; transition: background 2s ease;
}
.river-foam {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        180deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0) 8px
    );
    animation: riverFlow 1.5s linear infinite reverse;
}
.river-fish {
    position: absolute; font-size: 16px;
    animation: fishSwim 6s linear infinite; opacity: 0.9;
}
.river-label {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: rgba(255,255,255,0.7);
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap; letter-spacing: 1px;
}
.river-pollution-foam {
    position: absolute; inset: 0;
    pointer-events: none; opacity: 0; transition: opacity 2s;
    background: repeating-linear-gradient(
        45deg, rgba(120,83,40,0.2) 0px, rgba(120,83,40,0) 6px
    );
}

/* ============ BUILDINGS ============ */
.building {
    position: absolute; bottom: 42%;
    background: linear-gradient(to bottom, #64748b, #475569);
    border-radius: 5px 5px 0 0; transition: all 0.5s ease;
    cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.building:hover { transform: scale(1.05); filter: brightness(1.2); }
.building.eco {
    background: linear-gradient(to bottom, #4ade80, #16a34a);
    box-shadow: 0 0 20px rgba(74,222,128,0.5);
    animation: ecoGlow 2s ease-in-out infinite !important;
}
.building.polluted {
    background: linear-gradient(to bottom, #78716c, #44403c);
    box-shadow: 0 0 20px rgba(120,113,108,0.5);
}

/* Building detail elements (created via JS) */
.building-door {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 11px; height: 18px; background: rgba(0,0,0,0.55);
    border-radius: 3px 3px 0 0; z-index: 3;
}
.building-roof-bar {
    position: absolute; top: 0; left: -2px; right: -2px;
    height: 8px; border-radius: 4px 4px 0 0; z-index: 2;
}
.building-antenna {
    position: absolute; top: 0; right: 20%; width: 3px; border-radius: 2px;
    background: linear-gradient(#cbd5e1, #64748b);
}
.building-chimney {
    position: absolute; border-radius: 3px 3px 0 0; overflow: visible;
}
.smoke-puff {
    position: absolute; border-radius: 50%; left: 50%; top: 0;
    pointer-events: none; z-index: 26;
    animation: smokeRise ease-out infinite;
}
.building-glow-strip {
    position: absolute; left: 5%; right: 5%;
    height: 3px; border-radius: 2px; opacity: 0.75;
}

/* Window upgrade */
.building-window {
    position: absolute; width: 9px; height: 11px; border-radius: 2px;
    background: rgba(200,225,255,0.35);
    transition: opacity 1s, background 1s, box-shadow 1s;
}
.building-window.night {
    background: rgba(255,250,140,0.95);
    box-shadow: 0 0 6px 2px rgba(255,250,140,0.6);
}
.building-window.day { background: rgba(200,225,255,0.35); }

/* ============ TREES ============ */
.tree {
    position: absolute; bottom: 42%; width: 44px; height: 64px;
    cursor: pointer; transition: transform 0.25s;
    filter: drop-shadow(2px 5px 5px rgba(0,0,0,0.35));
}
.tree::before { content: ''; }
.tree:hover { transform: scale(1.18); }
.tree-emoji {
    font-size: 42px; position: absolute; bottom: 0;
    display: block; line-height: 1; user-select: none;
}
.tree.growing { animation: treeGrow 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ============ SUN & MOON ============ */
.sun {
    position: absolute; top: 30px; right: 30px;
    width: 70px; height: 70px;
    background: radial-gradient(circle, #fde68a 0%, #fbbf24 60%, #f59e0b 100%);
    border-radius: 50%;
    box-shadow: 0 0 50px #fbbf24, 0 0 100px rgba(251,191,36,0.3);
    animation: sunPulse 4s infinite ease-in-out;
    transition: all 3s ease; z-index: 10;
}
.moon {
    position: absolute; top: 30px; right: 30px;
    width: 60px; height: 60px;
    background: radial-gradient(circle at 35% 35%, #e2e8f0, #94a3b8);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(148,163,184,0.6);
    opacity: 0; transition: all 3s ease; z-index: 10;
}

/* ============ STARS ============ */
.stars-layer {
    position: absolute; inset: 0;
    pointer-events: none; opacity: 0;
    transition: opacity 3s ease; z-index: 9;
}
.star-dot {
    position: absolute; width: 2px; height: 2px;
    background: white; border-radius: 50%;
    animation: twinkle 2s infinite ease-in-out;
}

/* ============ CLOUDS ============ */
.cloud {
    position: absolute; background: rgba(255,255,255,0.85);
    border-radius: 50px; animation: drift 30s infinite linear;
}
.cloud.polluted { background: rgba(80,80,80,0.7); animation: drift 18s infinite linear; }
.cloud.night    { background: rgba(100,116,139,0.5); }

/* ============ SMOG OVERLAY ============ */
.smog {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(100,100,80,0.35); opacity: 0;
    transition: opacity 1s; pointer-events: none; z-index: 15; border-radius: 17px;
}

/* ============ CITIZENS ============ */
.citizen {
    position: absolute; bottom: calc(42% + 2px);
    font-size: 26px; cursor: default; z-index: 12;
    transition: opacity 0.8s ease;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,0.55));
}
.citizen.walking      { animation: walk 8s linear infinite; }
.citizen.walking-slow { animation: walkSlow 18s linear infinite; }
.citizen.night-walk   { animation: walk 14s linear infinite; }
.citizen.hiding  { opacity: 0.2; animation: none; }
.citizen.indoor  { opacity: 0;   animation: none; }

/* Inner bob layer (separate from walk so transforms don't conflict) */
.citizen-mask {
    display: inline-block;
    animation: citizenBob 0.44s ease-in-out infinite alternate;
}
.citizen.hiding .citizen-mask,
.citizen.indoor .citizen-mask { animation: none; transform: none; }

/* Pollution mask badge */
.citizen-mask::after {
    content: '😷'; position: absolute;
    font-size: 10px; top: -4px; right: -6px;
    opacity: 0; transition: opacity 0.5s;
}
.citizen-mask.masked::after { opacity: 1; }

/* Rain umbrella layer */
.citizen-umbrella { position: relative; display: inline-block; }
.citizen-umbrella::before {
    content: '☂️'; position: absolute;
    font-size: 14px; top: -14px; left: 2px;
    opacity: 0; transition: opacity 0.5s;
}
.citizen-umbrella.has-umbrella::before { opacity: 1; }

/* Mood speech bubble (shown on hover) */
.mood-bubble {
    position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
    font-size: 14px; background: rgba(0,0,0,0.5);
    padding: 2px 6px; border-radius: 10px; white-space: nowrap;
    opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.citizen:hover .mood-bubble { opacity: 1; }

/* ============ FIREFLIES (night only) ============ */
.firefly {
    position: absolute; width: 4px; height: 4px;
    background: #fde68a; border-radius: 50%;
    box-shadow: 0 0 6px 2px #fde68a;
    opacity: 0; pointer-events: none; z-index: 18;
}