:root {
    --bg-oled: #050508;
    --accent-gold: #F3B63A;
    --accent-blue: #00A3FF;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glow-blue: rgba(0, 163, 255, 0.4);
    --glow-gold: rgba(243, 182, 58, 0.5);
}

body.bg-oled {
    background-color: var(--bg-oled);
    color: #ffffff;
    font-family: 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

.max-w-800 { max-width: 800px; margin: 0 auto; }
.text-gold { color: var(--accent-gold); }
.tracking-widest { letter-spacing: 0.15em; }

/* Efecto Glassmorphism Base */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

.game-board {
    border-radius: 2rem;
    padding: 3rem 2rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.score-glass {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
}

/* Algebraic Chips */
.algebraic-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.25rem;
    user-select: none;
}

.algebraic-chip:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px var(--glow-blue);
    transform: translateY(-3px);
    background: rgba(0, 163, 255, 0.05);
}

.algebraic-chip.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 25px var(--glow-gold);
    background: rgba(243, 182, 58, 0.1);
    transform: scale(1.05);
}

/* Animación de Éxito al Cancelar */
@keyframes successCancel {
    0% { filter: brightness(1); box-shadow: 0 0 0 transparent; }
    50% { filter: brightness(1.5); box-shadow: 0 0 30px var(--glow-gold); transform: scale(1.1); border-color: var(--accent-gold); }
    100% { opacity: 0; transform: scale(0.5) rotate(10deg); pointer-events: none; }
}
.algebraic-chip.cancelled { animation: successCancel 0.6s forwards; }

/* Fraction Line */
.fraction-line-glow {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    box-shadow: 0 0 15px var(--glow-blue);
    width: 90%;
    margin: 2rem auto;
}

/* Charlie Avatar */
.charlie-img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border: 2px solid var(--accent-gold);
    background: #fff;
}

.avatar-glow { position: relative; }
.avatar-glow::after {
    content: ''; position: absolute; inset: -4px;
    background: var(--accent-gold); filter: blur(12px);
    border-radius: 50%; opacity: 0.4; z-index: -1;
}

/* Modal y Botones */
.glass-modal {
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.5rem;
}

.btn-blue-glow {
    background: var(--accent-blue);
    color: #000;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px var(--glow-blue);
}
.btn-blue-glow:hover { background: #33b5ff; transform: scale(1.02); color: #000; }

.fade-in { animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }