/* SPDX-License-Identifier: MIT — Copyright (c) 2026 aleman1g */
/* === Deutsch-Start Arcade - styles.css === */
body {
            font-family: 'Fredoka', 'Inter', sans-serif;
            background: radial-gradient(circle at center, #134e4a 0%, #0f172a 100%);
            min-height: 100vh;
            color: #f8fafc;
        }
        .pixel-font {
            font-family: 'Press Start 2P', monospace;
        }
        .arcade-cabinet {
            box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.9), inset 0 2px 8px rgba(255, 255, 255, 0.25);
            border: 6px solid #14b8a6;
        }
        .retro-button {
            transition: all 0.15s ease;
            box-shadow: 0 6px 0 #3730a3, 0 10px 20px rgba(0,0,0,0.4);
        }
        .retro-button:active:not(:disabled) {
            transform: translateY(4px);
            box-shadow: 0 2px 0 #3730a3, 0 5px 10px rgba(0,0,0,0.3);
        }
        .slot-card {
            transition: all 0.2s ease;
            background: linear-gradient(145deg, #134e4a, #115e59);
            border: 3px solid #0d9488;
        }
        .slot-card:hover {
            border-color: #fbbf24;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5);
        }
        .chapter-node {
            transition: all 0.2s ease;
        }
        .chapter-node:hover:not(.locked) {
            transform: scale(1.03);
        }
        @keyframes bounce-slow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        .animate-bounce-slow {
            animation: bounce-slow 2s infinite;
        }
        @keyframes pulse-audio {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        .animate-pulse-audio {
            animation: pulse-audio 1.2s infinite;
        }
        .crt::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
            background-size: 100% 4px;
            z-index: 40;
            pointer-events: none;
            opacity: 0.35;
            border-radius: 1.5rem;
        }
/* === Estilos de Juegos / Experimentos / Textos / Das kann ich! === */
.nw-card{background:linear-gradient(145deg,#134e4a,#115e59);border:3px solid #0d9488;border-radius:1rem;padding:1rem}
.nw-badge{display:inline-block;font-size:10px;font-weight:700;padding:.15rem .6rem;border-radius:.6rem;border:1px solid #0d9488;background:#134e4a;color:#fbbf24}
.nw-grid-games{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:640px){.nw-grid-games{grid-template-columns:1fr 1fr}}
.nw-game-btn{text-align:left;background:#0f172a;border:2px solid #0d9488;border-radius:1rem;padding:.7rem .9rem;transition:all .15s ease}
.nw-game-btn:hover{border-color:#fbbf24;transform:translateY(-2px)}
.nw-chip{font-size:10px;font-weight:700;background:#115e59;border:1px solid #14b8a6;color:#ccfbf1;border-radius:.5rem;padding:.1rem .5rem}
.nw-exp-step{background:#020617;border:1px solid #334155;border-radius:.75rem;padding:.6rem .8rem;font-size:12px;line-height:1.5}
.nw-conjuro{background:#451a03;border:1px solid #f59e0b;color:#fde68a;border-radius:.75rem;padding:.6rem .8rem;font-style:italic;font-size:12px}
.nw-text-line{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:#020617;border:1px solid #334155;border-radius:.75rem;padding:.5rem .7rem;font-size:12px}
.nw-check{display:flex;align-items:flex-start;gap:.6rem;background:#020617;border:1px solid #334155;border-radius:.75rem;padding:.55rem .7rem;font-size:12px;text-align:left;width:100%}
.nw-check.done{border-color:#10b981;background:rgba(6,78,59,.5)}
/* === Barra de salida unificada Slots > Mapa > Hub === */
.nw-exitbar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(99,102,241,.3)}
.nw-exitbar .nw-exitbtn{font-size:11px;font-weight:700;padding:.5rem .9rem;border-radius:.75rem;border:1px solid #0d9488;background:#134e4a;color:#99f6e4;transition:all .15s ease}
.nw-exitbar .nw-exitbtn:hover{border-color:#fbbf24;color:#fff;transform:translateY(-1px)}
.nw-exitbar .nw-exitbtn.primary{background:#0d9488;color:#fff}
.nw-exit-hint{font-size:10px;color:#2dd4bf;text-align:center;margin-top:.25rem}
/* === Panel lateral de Gramatica (posicion y tamano propios: no depende de Tailwind) === */
#grammar-modal{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:50;width:min(26rem,94vw);display:none;flex-direction:column;background:#0f172a;border:2px solid #14b8a6;border-right:0;border-radius:1.25rem 0 0 1.25rem;padding:1.5rem;box-shadow:-8px 0 24px rgba(0,0,0,.5)}
#grammar-modal.flex{display:flex}
#grammar-modal.hidden{display:none}
#grammar-box{max-width:none;width:100%;max-height:none;border:0;padding:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;flex:1}
#grammar-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #134e4a;padding-bottom:.75rem;margin-bottom:1rem}
#grammar-foot{margin-top:1.25rem;padding-top:.75rem;border-top:2px solid #134e4a;text-align:right}
/* Iconos de ayuda de idioma (barra de consigna y frases) */
.nw-say-icon{background:#f59e0b;color:#1e293b;border:0;border-radius:8px;padding:1px 6px;font-size:12px;cursor:pointer;vertical-align:middle;line-height:1.4}