/* ESTILOS PARA LA GUÍA DE MECÁNICAS Y SISTEMA DE CAPAS */

.mechanics-viewport {
    min-height: calc(100vh - 85px);
}

.marcellus-font {
    font-family: 'Marcellus', serif, system-ui;
    letter-spacing: 0.02em;
}

.glass-panel {
    background: rgba(18, 24, 38, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* PESTAÑAS DE NAVEGACIÓN */
.btn-mech-tab {
    transition: all 0.2s ease;
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-mech-tab:hover, .btn-mech-tab.active {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.25);
}

/* COMBATE Y SIMULADOR */
.creature-card-mockup {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.creature-card-mockup:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.versus-circle {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* BARRAS DE PROGRESO DE ARROLLAR */
.damage-allocation-bar-container .progress {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.damage-allocation-bar-container .progress-bar {
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.78rem;
    line-height: 32px;
}

/* DEBT PILLS */
.debt-pill {
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.debt-pill:hover {
    transform: translateX(4px);
    background-color: rgba(30, 40, 60, 0.6) !important;
}

.debt-letter {
    width: 32px;
    text-align: center;
}

/* CAPAS STACK */
.layer-item {
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    cursor: default;
}

.layer-item:hover {
    transform: translateX(4px);
    background-color: rgba(30, 40, 60, 0.8) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
}

.timeline-layers-resolution > div {
    transition: transform 0.2s ease;
}

.timeline-layers-resolution > div:hover {
    transform: translateX(4px);
}