/* ============================================
   ECOSISTEMA VIVO -
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    font-family: 'Segoe UI', Arial, sans-serif;
}

#game-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#eco-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* === INDICADORES === */
#indicators {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    z-index: 10;
    background: rgba(0,0,0,0.6);
    padding: 10px 25px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
}

.indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
}

.ind-icon { font-size: 24px; }
.ind-label { font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; margin: 2px 0; }
.ind-bar { width: 80px; height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden; }
.ind-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.ind-fill.co2    { background: linear-gradient(90deg, #95a5a6, #e74c3c); width: 0%; }
.ind-fill.water  { background: linear-gradient(90deg, #3498db, #2ecc71); width: 100%; }
.ind-fill.forest { background: linear-gradient(90deg, #27ae60, #2ecc71); width: 100%; }
.ind-fill.fauna  { background: linear-gradient(90deg, #e67e22, #f1c40f); width: 100%; }
.ind-value { font-size: 13px; color: #fff; font-weight: bold; margin-top: 2px; }

/* === PANELES DE BOTONES === */
#panel-contaminar, #panel-limpiar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
}

#panel-contaminar {
    left: 15px;
    background: rgba(192, 57, 43, 0.3);
    border: 1px solid rgba(231, 76, 60, 0.4);
}

#panel-limpiar {
    right: 15px;
    background: rgba(39, 174, 96, 0.3);
    border: 1px solid rgba(46, 204, 113, 0.4);
}

#panel-contaminar h3, #panel-limpiar h3 {
    font-size: 14px;
    color: #fff;
    text-align: center;
    margin-bottom: 5px;
}

.btn-action {
    padding: 10px 15px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    min-width: 170px;
    text-align: left;
}

.btn-bad {
    background: rgba(231, 76, 60, 0.4);
    border-color: rgba(231, 76, 60, 0.6);
}
.btn-bad:hover { background: rgba(231, 76, 60, 0.7); transform: scale(1.03); }
.btn-bad:active { transform: scale(0.97); }

.btn-good {
    background: rgba(46, 204, 113, 0.4);
    border-color: rgba(46, 204, 113, 0.6);
}
.btn-good:hover { background: rgba(46, 204, 113, 0.7); transform: scale(1.03); }
.btn-good:active { transform: scale(0.97); }

/* === MENSAJE DE ESTADO === */
#status-message {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 18px;
    text-align: center;
    transition: opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
}
#status-message.show { opacity: 1; }

/* === BOTON RESET === */
#btn-reset {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 10px 30px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 25px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
#btn-reset:hover { background: rgba(255,255,255,0.2); }

/* === BOTON VOLVER === */
#btn-volver {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    padding: 8px 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    backdrop-filter: blur(5px);
}
#btn-volver:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }