/* Pestañas de categorías */
.category-btn.active {
    background-color: #9333ea;
    color: white;
}

/* Animación de las tarjetas al cambiar de categoría */
.card {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    visibility: hidden;
    position: absolute;
    width: 0; height: 0;
    pointer-events: none;
}

.card.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    position: relative;
    width: auto; height: auto;
    pointer-events: auto;
}

/* UI visual de Drag and Drop en la boca del robot */
.drag-over-active {
    border-color: #22c55e !important; 
    background-color: rgba(34, 197, 94, 0.4) !important; 
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.8) !important; 
}

/* Estructura del Tablero */
.grid-container {
    position: relative;
    border: 4px solid #e2e8f0;
    border-radius: 1rem;
    background: white;
    overflow: hidden;
}

.game-grid {
    display: grid;
    background-size: cover;
    background-position: center;
}

.grid-cell {
    width: 100px;
    height: 100px;
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #cbd5e1;
    cursor: pointer;
}

/* Robot True True y su Física */
.truetrue-robot {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 50;
    pointer-events: none;
    left: 10px;
    top: 10px;
    transition: left 0.4s ease-in-out, top 0.4s ease-in-out;
}

/* Animaciones de Sensación de Movimiento */
.anim-forward { animation: forward-lean 0.4s ease-out; }
@keyframes forward-lean {
    0% { transform: scale(1); }
    50% { transform: scale(1.1, 0.9); }
    100% { transform: scale(1); }
}

.anim-backward { animation: backward-lean 0.4s ease-out; }
@keyframes backward-lean {
    0% { transform: scale(1); }
    50% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1); }
}

.anim-turn { animation: turn-jump 0.3s ease-out; }
@keyframes turn-jump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.anim-error { animation: shake 0.4s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); filter: saturate(2) hue-rotate(-50deg); }
    75% { transform: translateX(8px); }
}

/* Botones genéricos de UI */
.bot-btn { border-radius: 12px; font-weight: bold; color: white; transition: all 0.1s; }
.bot-btn:active { transform: scale(0.95); }
.bot-btn.green { background: #22c55e; box-shadow: 0 4px 0 #16a34a; }
.bot-btn.red { background: #ef4444; box-shadow: 0 4px 0 #b91c1c; }

.action-btn {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
}

.active-mode { background: #9333ea !important; color: white !important; box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3); }

.settings-panel { max-height: 0; transition: max-height 0.4s ease-out; }
.settings-panel.open { max-height: 500px; }