/* ═══════════════════════════════════════════════════════
   Fatlin AI - Adventure | Estilos principales
   Extraído de index.html — modularización v1
═══════════════════════════════════════════════════════ */

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #0ea5e9; --primary-dark: #0369a1; --primary-light: #7dd3fc;
            --success: #22c55e; --danger: #ef4444; --accent: #f59e0b;
            --bg: linear-gradient(135deg, #075985 0%, #0369a1 100%);
            --node: 64px;
        }
        body { font-family:'Inter',sans-serif; font-size:15px; background:#0c4a6e; overflow:hidden; touch-action:none; color:#1e293b; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; }

        /* SPLASH */
        #splash { position:fixed;inset:0;background:var(--bg);z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s;padding:24px; }
        .logo-float { animation:heroFloat 5s ease-in-out infinite; margin-bottom:1.25rem; }
        @keyframes heroFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.05)} }
        #splash .brand { color:white;font-weight:700;letter-spacing:.4em;font-size:1.8rem;text-transform:uppercase; }
        #splash .sub { color:rgba(186,230,253,.6);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;margin-top:.5rem;margin-bottom:2.25rem; }
        #lang-splash { display:flex;flex-direction:column;gap:14px;width:100%;max-width:300px; }
        .lang-btn {
            display:flex;align-items:center;gap:14px;
            width:100%;padding:16px 22px;border-radius:2rem;
            border:2px solid rgba(255,255,255,.25);
            background:rgba(255,255,255,.1);
            color:white;font-family:'Inter',sans-serif;font-weight:700;
            cursor:pointer;transition:background .2s,border-color .2s,transform .15s,box-shadow .2s;
            backdrop-filter:blur(8px);-webkit-tap-highlight-color:transparent;
        }
        .lang-btn:active { transform:scale(.96); }
        .lang-btn.entering { background:rgba(255,255,255,.28);border-color:white;box-shadow:0 0 0 4px rgba(255,255,255,.15); }
        .lang-flag { font-size:1.6rem;line-height:1;flex-shrink:0; }
        .lang-label { display:flex;flex-direction:column;align-items:flex-start;gap:1px; }
        .lang-label-main { font-size:1.05rem;font-weight:700; }
        .lang-label-sub  { font-size:.65rem;font-weight:500;opacity:.6;text-transform:uppercase;letter-spacing:.06em; }

        /* UPDATE BANNER */
        #update-banner { position:fixed;bottom:0;left:0;right:0;background:#1e293b;color:white;padding:12px 20px;display:none;align-items:center;justify-content:space-between;gap:12px;z-index:9000;font-size:.85rem; }
        #update-banner.show { display:flex; }
        #btn-update-reload { background:#0ea5e9;color:white;border:none;padding:8px 16px;border-radius:20px;font-family:'Inter',sans-serif;font-weight:700;cursor:pointer; }
        #btn-update-dismiss { background:transparent;color:#94a3b8;border:none;cursor:pointer;font-size:1.2rem; }

        /* AUTH */
        #auth-screen { position:fixed;inset:0;background:var(--bg);z-index:6000;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto; }
        .auth-card { background:rgba(255,255,255,.98);width:100%;max-width:420px;border-radius:2.5rem;padding:2.25rem 1.75rem;box-shadow:0 25px 60px -12px rgba(0,0,0,.5);text-align:center; }
        .ifield { width:100%;padding:.95rem;border-radius:1.5rem;border:2px solid #e2e8f0;outline:none;transition:border-color .2s,box-shadow .2s;font-family:'Inter',sans-serif;font-size:1rem;margin-bottom:.75rem; }
        .ifield:focus { border-color:var(--primary);box-shadow:0 0 0 4px rgba(14,165,233,.12); }
        .abtn { width:100%;padding:1rem;border-radius:1.5rem;border:none;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.6rem; }
        .abtn:active { transform:scale(.97); }
        .abtn.google { background:white;border:2px solid #e2e8f0;color:#334155; }
        .abtn.email  { background:#f8fafc;color:#475569; }
        .abtn.guest  { background:#e0f2fe;color:#0369a1;border:2px solid #bae6fd; }
        .abtn.primary{ background:#0284c7;color:white;box-shadow:0 8px 20px rgba(2,132,199,.3); }
        .cc { display:flex;align-items:center;cursor:pointer;user-select:none;margin-bottom:.75rem; }
        .cc input { display:none; }
        .ck { width:18px;height:18px;border:2px solid #cbd5e1;border-radius:6px;margin-right:10px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0; }
        .cc input:checked + .ck { background:var(--primary);border-color:var(--primary); }
        .ck svg { display:none; }
        .cc input:checked + .ck svg { display:block; }

        /* GAME */
        #game-container { width:100vw;height:100vh;position:relative;background:#082f49;display:none; }
        #map-scroll { position:absolute;top:0;left:0;right:0;margin:0 auto;width:100%;max-width:75%;min-height:100vh;background:radial-gradient(circle at top,#38bdf8,#075985);box-shadow:0 0 100px rgba(0,0,0,.7);transition:transform .6s cubic-bezier(.34,1.2,.64,1);will-change:transform;contain:layout style; }
        @media(max-width:768px){ #map-scroll{max-width:100%;box-shadow:none;} }
        #path-svg { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none; }

        /* HUD */
        #game-hud { position:fixed;top:0;left:0;right:0;padding:0;z-index:50;display:flex;justify-content:stretch;pointer-events:none; }
        .hud-inner { background:rgba(255,255,255,.97);border-radius:0 0 1rem 1rem;padding:10px 16px;box-shadow:0 4px 20px rgba(0,0,0,.2);pointer-events:auto;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:space-between;max-width:100%;width:100%; }
        /* safe area iOS notch */
        .hud-inner { padding-top:max(10px, env(safe-area-inset-top)); }
        .hstat { display:flex;align-items:center;gap:4px;font-size:.85rem; }
        .hdiv  { width:1px;height:18px;background:#e2e8f0;flex-shrink:0; }
        .hbtn  { padding:6px 9px;border-radius:12px;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;transition:transform .15s,background .15s;display:flex;align-items:center;gap:4px;font-size:.82rem; }
        .hbtn:active { transform:scale(.92); }
        #hud-avatar { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:2px solid #e2e8f0;background:#f8fafc;cursor:pointer;transition:border-color .2s,transform .2s;flex-shrink:0;pointer-events:all;-webkit-tap-highlight-color:transparent; }
        #hud-avatar:hover { border-color:#0369a1;transform:scale(1.1); }
        #hud-avatar:active { transform:scale(.95); }
        #hud-avatar:hover { border-color:var(--primary);transform:scale(1.1); }
        #stat-timer { font-size:10px;font-weight:700;color:#0284c7;background:#e0f2fe;padding:2px 8px;border-radius:20px;display:none; }
        @media(max-width:480px){ .hud-inner{gap:5px;padding:7px 10px;} }

        /* PROGRESS DOTS */
        #streak-bar { display:flex;gap:6px;align-items:center; }
        .streak-dot { width:12px;height:12px;border-radius:50%;border:2px solid #e2e8f0;background:#f1f5f9;transition:all .3s cubic-bezier(.175,.885,.32,1.275); }
        .streak-dot.filled { background:var(--success);border-color:#16a34a;transform:scale(1.2);box-shadow:0 0 6px rgba(34,197,94,.5); }
        .streak-dot.flash { animation:dotFlash .4s ease; }
        @keyframes dotFlash { 0%{transform:scale(1.2)} 50%{transform:scale(1.7)} 100%{transform:scale(1.2)} }

        /* LEVEL NODES */
        .level-node { position:absolute;width:var(--node);height:var(--node);border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;font-weight:700;color:white;z-index:10;cursor:pointer;font-size:1.1rem;box-shadow:0 8px 0 rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.4);will-change:transform; }
        @media(max-width:480px){ .level-node{width:56px;height:56px;border-radius:14px;font-size:1rem;} }
        .level-node.completed { background:var(--success);box-shadow:0 6px 0 #15803d; }
        .level-node.completed:hover { transform:scale(1.12);background:#16a34a;box-shadow:0 10px 25px rgba(0,0,0,.3),0 0 20px rgba(34,197,94,.5); }
        .level-node.current { background:white;color:var(--primary-dark);transform:scale(1.15);animation:nodeGlow 2.5s ease-in-out infinite; }
        @keyframes nodeGlow { 0%,100%{box-shadow:0 10px 25px rgba(0,0,0,.3),0 0 15px rgba(255,255,255,.4)} 50%{box-shadow:0 10px 35px rgba(0,0,0,.4),0 0 45px rgba(255,255,255,.8)} }
        .level-node.locked { cursor:default;opacity:.45;pointer-events:none; }
        .lnlabel { font-size:9px;font-weight:700;opacity:.85;line-height:1; }

        /* MODALS */
        .modal-overlay { position:fixed;inset:0;background:rgba(8,47,73,.9);backdrop-filter:blur(8px);z-index:3000;display:none;align-items:center;justify-content:center;padding:16px;overflow-y:auto; }
        .modal-overlay.active { display:flex;animation:fadeIn .2s ease; }
        @keyframes fadeIn { from{opacity:0} to{opacity:1} }
        .challenge-card { background:white;padding:1.75rem 1.6rem;border-radius:2rem;width:100%;max-width:440px;box-shadow:0 40px 100px rgba(0,0,0,.5);position:relative;padding-top:4.5rem;margin:auto;animation:cardIn .3s cubic-bezier(.34,1.56,.64,1); }
        @keyframes cardIn { from{transform:scale(.92) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
        .fatlin-mini { position:absolute;top:-52px;left:50%;transform:translateX(-50%);z-index:10; }

        /* SHAKE / GLOW */
        @keyframes shake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(3px)} }
        .shake { animation:shake .5s ease; }
        @keyframes correctGlow { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 60%{box-shadow:0 0 0 14px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
        .cglow { animation:correctGlow .6s ease; }

        /* OPTIONS */
        .opt { width:100%;padding:.95rem 1rem;margin-bottom:.6rem;border:2px solid #f1f5f9;border-radius:1.25rem;font-weight:500;color:#334155;transition:background .15s,border-color .15s,transform .15s;text-align:left;background:#fff;cursor:pointer;font-family:'Inter',sans-serif;font-size:.93rem;line-height:1.45;animation:optIn .25s ease forwards;opacity:0;transform:translateY(6px); }
        @keyframes optIn { to{opacity:1;transform:translateY(0)} }
        .opt:hover:not(:disabled){ background:#f8fafc;border-color:#cbd5e1; }
        .opt:active:not(:disabled){ transform:scale(.98); }
        .opt.vf { text-align:center;font-size:1.1rem; }
        .opt.correct { background:#f0fdf4!important;border-color:#22c55e!important;color:#15803d!important; }
        .opt.wrong   { background:#fef2f2!important;border-color:#ef4444!important;color:#dc2626!important; }

        /* MATCH — relacionar columnas */
        .match-wrap { display:flex;flex-direction:column;gap:8px;padding:2px 0; }
        .match-cols { display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start; }
        .match-col-lbl { font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;text-align:center;margin-bottom:4px; }
        .match-left-item { background:#f8fafc;border:2px solid #e2e8f0;border-radius:1rem;padding:.65rem .8rem;font-size:.82rem;font-weight:600;color:#334155;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;user-select:none; }
        .match-left-item:hover { border-color:#0ea5e9;background:#f0f9ff; }
        .match-left-item.selected { border-color:#0284c7;background:#eff6ff;color:#0369a1;transform:scale(1.03); }
        .match-left-item.matched  { border-color:#22c55e;background:#f0fdf4;color:#15803d;cursor:default;pointer-events:none; }
        .match-left-item.wrong-m  { border-color:#ef4444;background:#fef2f2;color:#dc2626; }
        .match-right-item { background:#f8fafc;border:2px dashed #e2e8f0;border-radius:1rem;padding:.65rem .8rem;font-size:.82rem;font-weight:600;color:#334155;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;user-select:none; }
        .match-right-item:hover { border-color:#a78bfa;background:#faf5ff; }
        .match-right-item.paired  { border-color:#22c55e;background:#f0fdf4;color:#15803d;cursor:default;pointer-events:none; }
        .match-right-item.wrong-m { border-color:#ef4444;background:#fef2f2;color:#dc2626; }
        .match-hint { font-size:.68rem;color:#94a3b8;text-align:center;font-weight:600;margin-bottom:4px; }
        .match-progress { font-size:.68rem;color:#0284c7;text-align:center;font-weight:700;margin-top:4px; }

        /* CASE — caso práctico */
        .case-scenario { background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:2px solid #bae6fd;border-radius:1.25rem;padding:.9rem 1rem;margin-bottom:.9rem;font-size:.82rem;color:#0c4a6e;line-height:1.6;font-weight:500; }
        .case-scenario strong { color:#075985;font-weight:800; }
        .case-label { font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#0284c7;margin-bottom:.5rem; }

        /* FEEDBACK */
        #feedback-float { position:absolute;left:1rem;right:1rem;bottom:-1rem;background:rgba(239,68,68,.97);padding:1rem;border-radius:1.25rem;color:white;text-align:center;opacity:0;transition:transform .35s cubic-bezier(.175,.885,.32,1.275),opacity .35s;z-index:100;pointer-events:none; }
        #feedback-float.active { transform:translateY(-20px);opacity:1; }
        .cbar { height:4px;background:rgba(255,255,255,.25);border-radius:2px;margin-top:8px;overflow:hidden; }
        .cfill { height:100%;background:rgba(255,255,255,.8);border-radius:2px;transition:width linear; }

        /* AI LOADING */
        #ai-loading { position:absolute;inset:0;background:rgba(255,255,255,.96);border-radius:2rem;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:50;gap:.75rem; }
        #ai-loading.active { display:flex; }
        .ai-spinner { width:44px;height:44px;border:3px solid #e2e8f0;border-top:3px solid var(--primary);border-radius:50%;animation:spin .8s linear infinite; }
        @keyframes spin { to{transform:rotate(360deg)} }
        #ai-loading p { font-size:.85rem;font-weight:700;color:#64748b; }
        #ai-loading small { font-size:.7rem;color:#94a3b8;text-align:center;padding:0 1rem; }

        /* REWARD */
        #modal-reward { position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);z-index:4000;display:none;align-items:center;justify-content:center;padding:20px; }
        #modal-reward.active { display:flex;animation:fadeIn .25s ease; }
        .reward-card { background:linear-gradient(135deg,#1e3a5f,#0369a1);border-radius:2.5rem;padding:2.5rem 2rem;max-width:380px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.2);position:relative;overflow:hidden;animation:cardIn .4s cubic-bezier(.34,1.56,.64,1); }
        .rstars { font-size:3.5rem;animation:starPop .6s ease; }
        @keyframes starPop { 0%{transform:scale(0) rotate(-20deg)} 70%{transform:scale(1.3) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
        .confetti-dot { position:absolute;width:8px;height:8px;border-radius:2px;animation:cfall 2.5s ease-in forwards; }
        @keyframes cfall { 0%{transform:translateY(-10px) rotate(0);opacity:1} 100%{transform:translateY(350px) rotate(720deg);opacity:0} }
        @keyframes avatarLvl { 0%{transform:scale(1)} 30%{transform:scale(1.6);filter:drop-shadow(0 0 6px gold)} 60%{transform:scale(.9)} 100%{transform:scale(1);filter:none} }
        .av-lvl { animation:avatarLvl .8s ease; }

        /* RANKING */
        #modal-ranking { position:fixed;inset:0;background:rgba(8,47,73,.95);backdrop-filter:blur(12px);z-index:3500;display:none;align-items:center;justify-content:center;padding:16px; }
        #modal-ranking.active { display:flex;animation:fadeIn .2s ease; }
        .rcard { background:white;border-radius:2rem;padding:1.75rem;max-width:460px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.5); }
        .rtabs { display:flex;gap:6px;margin-bottom:1.2rem;background:#f8fafc;border-radius:1rem;padding:5px; }
        .rtab { flex:1;padding:8px 4px;border-radius:.75rem;border:none;font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem;cursor:pointer;transition:background .2s,color .2s;color:#94a3b8;background:transparent; }
        .rtab.active { background:white;color:#0369a1;box-shadow:0 2px 8px rgba(0,0,0,.08); }
        .lhdr { background:linear-gradient(135deg,#1e293b,#334155);border-radius:1.25rem;padding:1rem 1.25rem;margin-bottom:1rem;text-align:center;color:white; }
        .ltop5 { background:linear-gradient(135deg,#1e3a5f,#0369a1);border-radius:1.25rem;padding:1rem;margin-bottom:1rem; }
        .lcnt { background:rgba(255,255,255,.1);border-radius:.75rem;padding:.6rem;margin-top:.6rem;font-size:.75rem;color:rgba(255,255,255,.8);text-align:center; }
        .rdiv { height:2px;background:linear-gradient(to right,transparent,#475569,transparent);margin:8px 0;border-radius:1px; }
        .lbadge { display:inline-block;background:#475569;color:white;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle; }
        .ritem { display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:1rem;transition:background .15s; }
        .ritem:hover { background:#f8fafc; }
        .ritem.me { background:#eff6ff;border:2px solid #bfdbfe; }
        /* ── Global Top 25: fondo blanco → texto oscuro ── */
        #panel-global .ritem span[style*="font-weight:700"] { color:#1e293b !important; }
        #panel-global .ritem span[style*="color:#64748b"] { color:#64748b !important; }
        #panel-global .ritem span[style*="color:#0284c7"] { color:#0284c7 !important; }
        #panel-global .ritem span[style*="color:#94a3b8"] { color:#94a3b8 !important; }
        /* ── Liga Semanal: fondo blanco → texto oscuro (igual que global) ── */
        #panel-liga .ritem span[style*="font-weight:700"] { color:#1e293b !important; }
        #panel-liga .ritem span[style*="color:#64748b"] { color:#64748b !important; }
        #panel-liga .ritem span[style*="color:#0284c7"] { color:#0284c7 !important; }
        #panel-liga .ritem span[style*="color:#94a3b8"] { color:#94a3b8 !important; }
        .rbar { height:6px;border-radius:3px;background:#e2e8f0;overflow:hidden;flex:1; }
        .rbar-fill { height:100%;border-radius:3px;background:var(--primary);transition:width 1s ease; }

        /* ACCOUNT */
        #modal-account { position:fixed;inset:0;background:rgba(8,47,73,.95);backdrop-filter:blur(12px);z-index:3500;display:none;align-items:center;justify-content:center;padding:16px; }
        #modal-account.active { display:flex;animation:fadeIn .2s ease; }
        .accard { background:white;border-radius:2rem;padding:1.75rem;max-width:380px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.5);text-align:center;max-height:92vh;overflow-y:auto; }

        /* AVATAR */
        #modal-avatar { position:fixed;inset:0;background:rgba(8,47,73,.96);backdrop-filter:blur(12px);z-index:4500;display:none;align-items:center;justify-content:center;padding:16px; }
        #modal-logros { position:fixed;inset:0;background:rgba(8,47,73,.96);backdrop-filter:blur(12px);z-index:4500;display:none;align-items:center;justify-content:center;padding:16px; }
        #modal-logros.active { display:flex;animation:fadeIn .2s ease; }
        .logros-card { background:white;border-radius:20px;padding:16px;width:92%;max-width:340px;max-height:80vh;overflow-y:auto; }
        .logros-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
        .logros-title { font-size:1.2rem;font-weight:800;color:#075985; }
        .logros-user { display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:14px;background:#f0f9ff;border-radius:14px; }
        .logros-avatar { font-size:2rem;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:#e0f2fe;border-radius:50%; }
        .logros-info { flex:1; }
        .logros-name { font-weight:800;color:#0c4a6e;font-size:1rem; }
        .logros-level { font-size:.85rem;color:#0369a1;font-weight:600; }
        .logros-section { margin-bottom:18px; }
        .logros-section-title { font-size:.75rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px; }
        .logros-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
        .logro-item { background:#f8fafc;border-radius:10px;padding:8px;text-align:center;border:2px solid #e2e8f0; }
        .logro-item.earned { background:#f0fdf4;border-color:#86efac; }
        .logro-item.locked { opacity:.4; }
        .logro-emoji { font-size:1.4rem;display:block;margin-bottom:2px; }
        .logro-label { font-size:.68rem;font-weight:700;color:#374151;line-height:1.2; }
        .diploma-item { display:flex;align-items:center;gap:8px;background:#fffbeb;border:2px solid #fde68a;border-radius:10px;padding:8px;margin-bottom:6px; }
        .diploma-emoji { font-size:1.5rem; }
        .diploma-info { flex:1; }
        .diploma-title { font-weight:700;color:#92400e;font-size:.78rem; }
        .diploma-sub { font-size:.75rem;color:#b45309; }
        .no-logros { text-align:center;color:#94a3b8;font-size:.9rem;padding:20px; }
        #modal-avatar.active { display:flex;animation:fadeIn .2s ease; }
        .avcard { background:white;border-radius:2rem;padding:1.25rem;max-width:320px;width:90%;box-shadow:0 30px 80px rgba(0,0,0,.5);text-align:center;overflow:hidden; }
        .avgrid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:1rem 0; }
        .avopt { width:100%;aspect-ratio:1;border-radius:1rem;border:3px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;transition:border-color .2s,transform .2s;background:#f8fafc; }
        .avopt:hover { border-color:var(--primary);background:#eff6ff;transform:scale(1.08); }
        .avopt.selected { border-color:var(--primary);background:#eff6ff;box-shadow:0 0 0 3px rgba(14,165,233,.25);transform:scale(1.1); }

        /* LOADING DOTS */
        .ldots { display:flex;gap:6px;justify-content:center;align-items:center;padding:1.5rem 0; }
        .ldots span { width:10px;height:10px;border-radius:50%;background:var(--primary);animation:db .8s ease infinite; }
        .ldots span:nth-child(2){animation-delay:.15s} .ldots span:nth-child(3){animation-delay:.3s}
        @keyframes db { 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(-8px);opacity:1} }

        /* MISC */
        #error-msg { position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(239,68,68,.95);color:white;padding:12px 24px;border-radius:20px;font-weight:600;font-size:.9rem;z-index:9999;display:none;max-width:90%;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:slideUp .3s ease; }
        @keyframes slideUp { from{transform:translateX(-50%) translateY(20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
        #scroll-hint { position:fixed;bottom:70px;right:20px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);color:white;border-radius:50px;padding:8px 14px;font-size:.75rem;font-weight:600;z-index:30;opacity:0;transition:opacity .5s;pointer-events:none;display:flex;align-items:center;gap:6px; }
        #scroll-hint.visible { opacity:1; }
        .page-footer { position:fixed;bottom:0;left:0;right:0;padding:5px 16px;padding-bottom:max(5px, env(safe-area-inset-bottom));text-align:center;z-index:48;pointer-events:none;background:#0a1e35;border-top:1px solid rgba(255,255,255,.07); }
        .page-footer p { font-size:9px;color:rgba(255,255,255,.45);font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.4; }
        .wbtn { width:100%;padding:.9rem;border-radius:1.5rem;border:none;font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:opacity .15s,transform .15s;margin-bottom:.5rem; }
        .wbtn:active { transform:scale(.97); }
        .wbtn.sky { background:#e0f2fe;color:#0369a1; }
        .wbtn.purple { background:#f3e8ff;color:#7c3aed; }
        .wbtn.slate { background:#f1f5f9;color:#475569; }
        .wbtn.red   { background:#fef2f2;color:#dc2626; }
        .wbtn.primary { background:#0284c7;color:white;box-shadow:0 6px 18px rgba(2,132,199,.25); }
        #source-badge { font-size:9px;font-weight:700;color:#94a3b8;text-align:center;margin-bottom:.5rem;letter-spacing:.05em;min-height:14px; }

        /* ═══════ MODO GALA ═══════ */
        :root {
            --gala-gold: #f59e0b; --gala-gold-light: #fde68a;
            --gala-bg1: #0f0a1e; --gala-bg2: #1a0a2e;
            --gala-accent: #a855f7;
        }
        body.gala-mode { background: var(--gala-bg1); }
        body.gala-mode #game-container { background: var(--gala-bg2); }
        body.gala-mode #map-scroll {
            background: radial-gradient(circle at top, #4c1d95, #1e0a3c) !important;
        }
        body.gala-mode .hud-inner {
            background: rgba(15,10,30,.97);
            border-bottom: 2px solid var(--gala-gold);
        }
        /* Gala: textos numéricos y labels en dorado suave */
        body.gala-mode .hud-inner #stat-lives,
        body.gala-mode .hud-inner #stat-stars,
        body.gala-mode .hud-inner #stat-level,
        body.gala-mode .hud-inner #stat-user,
        body.gala-mode .hud-inner #stat-shields-count,
        body.gala-mode .hud-inner #stat-streak-count,
        body.gala-mode .hud-inner #stat-timer { color: var(--gala-gold-light) !important; }

        /* Gala: iconos SVG en los botones — trazo visible sobre fondo oscuro */
        body.gala-mode .hud-inner .hbtn { background: rgba(245,158,11,.15) !important; }
        body.gala-mode .hud-inner #btn-logros  { background: rgba(245,158,11,.18) !important; color: #fde68a !important; }
        body.gala-mode .hud-inner #btn-ranking { background: rgba(245,158,11,.18) !important; color: #fde68a !important; }
        body.gala-mode .hud-inner #btn-gocur   { background: rgba(168,85,247,.25) !important; color: #e9d5ff !important; }
        body.gala-mode .hud-inner #btn-shop    { background: rgba(245,158,11,.2)  !important; color: #fbbf24 !important; }
        body.gala-mode .hud-inner #btn-account { background: rgba(168,85,247,.2)  !important; }
        body.gala-mode .hud-inner #btn-account svg { stroke: #c4b5fd !important; }
        body.gala-mode .hud-inner #btn-ranking svg { stroke: #fde68a !important; }
        body.gala-mode .hud-inner #btn-gocur   svg { stroke: #e9d5ff !important; }

        /* Gala: selector de idioma */
        /* ── Selector idioma en Gala: máximo contraste ── */
        body.gala-mode .hud-inner #hud-lang {
            background: rgba(0,0,0,.35) !important;       /* fondo oscuro para el pill */
            border-color: rgba(245,158,11,.4) !important;
        }
        body.gala-mode .hud-inner .hud-lang-opt {
            color: rgba(253,230,138,.85) !important;       /* inactivo: visible, suave */
        }
        body.gala-mode .hud-inner .hud-lang-opt.active {
            background: rgba(245,158,11,.45) !important;   /* activo: fondo dorado sólido */
            color: #fff8e1 !important;                     /* texto blanco-crema: máx contraste */
            box-shadow: 0 0 10px rgba(245,158,11,.5) !important;
        }

        /* Gala: divisores */
        body.gala-mode .hud-inner .hdiv { background: rgba(245,158,11,.25) !important; }

        /* Gala: avatar */
        body.gala-mode #hud-avatar {
            text-shadow: 0 0 12px rgba(245,158,11,.8);
            filter: drop-shadow(0 0 6px rgba(245,158,11,.6));
        }
        body.gala-mode #stat-lives::before { content: '∞ '; color: var(--gala-gold) !important; }
        body.gala-mode .level-node.current {
            background: linear-gradient(135deg, var(--gala-gold), #d97706) !important;
            color: #1e0a3c !important;
            animation: galaNodeGlow 2s ease-in-out infinite !important;
        }
        @keyframes galaNodeGlow {
            0%,100%{box-shadow:0 0 20px rgba(245,158,11,.6),0 0 40px rgba(245,158,11,.3)}
            50%{box-shadow:0 0 40px rgba(245,158,11,1),0 0 80px rgba(245,158,11,.5)}
        }
        body.gala-mode .level-node.completed {
            background: linear-gradient(135deg,#7c3aed,#4c1d95) !important;
            box-shadow: 0 6px 0 #3b0764 !important;
        }
        /* Estrellas de fondo en modo Gala */
        #gala-stars { position:fixed;inset:0;pointer-events:none;z-index:1;display:none; }
        body.gala-mode #gala-stars { display:block; }
        .gala-star { position:absolute;border-radius:50%;background:white;animation:twinkle 3s ease-in-out infinite; }
        @keyframes twinkle { 0%,100%{opacity:.2;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }
        /* HUD badge Gala */
        #gala-badge {
            display:none;font-size:.75rem;font-weight:700;
            background:linear-gradient(135deg,var(--gala-gold),#d97706);
            color:#1e0a3c;padding:3px 10px;border-radius:20px;
            animation:pulse 2s ease infinite;
        }
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
        body.gala-mode #gala-badge { display:inline-flex;align-items:center;gap:4px; }

        /* ═══════ ESCUDOS & RACHA ═══════ */
        #stat-shields { display:none;align-items:center;gap:3px;font-size:.85rem; }
        #stat-shields.visible { display:flex; }
        #stat-streak { display:none;align-items:center;gap:3px;font-size:.85rem; }
        #stat-streak.visible { display:flex; }
        .shield-icon { font-size:.95rem; }

        /* ═══════ MODAL DIPLOMA — NUEVO DISEÑO PROFESIONAL ═══════ */
        #modal-diploma {
            position:fixed;inset:0;background:rgba(0,0,0,.94);
            backdrop-filter:blur(20px);z-index:5500;
            display:none;align-items:center;justify-content:center;
            padding:12px;overflow-y:auto;
        }
        #modal-diploma.active { display:flex;animation:fadeIn .3s ease; }

        /* Wrapper que contiene el cert + botones */
        .diploma-wrap {
            display:flex;flex-direction:column;align-items:center;
            gap:14px;width:100%;max-width:1060px;
        }

        /* ── MARCO EXTERIOR — A4 landscape fijo ── */
        #diploma-content {
            /* A4 landscape: 297×210mm. A 96dpi = 1122×794px exacto */
            width:1122px;
            height:794px;
            max-width:none;
            aspect-ratio:unset;
            background:#ffffff;
            border-radius:0;
            padding:6px;
            box-shadow:0 20px 60px rgba(0,0,0,.5);
            position:relative;
            flex-shrink:0;
            transform-origin:top left;
        }
        /* Diplomado 480+nv: doble carta landscape 431×279mm = 1632×1056px a 96dpi */
        #diploma-content.is-diplo {
            width:1632px;
            height:1056px;
        }
        #diploma-content::before {
            content:'';position:absolute;inset:0;border-radius:18px;
            background:
              radial-gradient(ellipse at 3% 3%,rgba(80,180,255,.14),transparent 38%),
              radial-gradient(ellipse at 97% 97%,rgba(180,140,20,.07),transparent 38%);
            pointer-events:none;z-index:0;
        }

        /* ── PAPEL INTERNO ── */
        .cert-paper-inner {
            width:100%;height:100%;
            background:#f5f8ff;
            border-radius:0;
            border:1.5px solid #b0c8e8;
            display:grid;grid-template-columns:1fr 22%;
            overflow:hidden;position:relative;
        }
        .cert-paper-inner::before {
            content:'';position:absolute;inset:0;
            background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(0,40,100,.011) 30px,rgba(0,40,100,.011) 31px);
            pointer-events:none;z-index:0;
        }
        .cert-paper-inner::after {
            content:'PACIE';
            position:absolute;top:50%;left:36%;
            transform:translate(-50%,-50%) rotate(-10deg);
            font-family:'Playfair Display',Georgia,serif;font-size:9rem;font-weight:900;
            color:rgba(0,80,180,.025);pointer-events:none;
            letter-spacing:.12em;z-index:0;white-space:nowrap;
        }

        /* ── COLUMNA PRINCIPAL ── */
        .cert-col-main {
            padding:2% 2.5% 1.8% 2.8%;
            display:flex;flex-direction:column;justify-content:space-between;
            border-right:1px solid #d8e8f8;position:relative;z-index:1;
        }
        .cert-col-main::before {
            content:'';position:absolute;
            left:0;top:14px;bottom:14px;width:4px;
            background:linear-gradient(180deg,transparent,#2d7dd2 20%,#00c8ff 50%,#2d7dd2 80%,transparent);
            border-radius:2px;
        }

        /* Cabecera */
        .cer-head { display:flex;align-items:flex-start;gap:1.2%; }
        .cer-head-text { flex:1; }
        .cer-issuer {
            font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.16em;
            text-transform:uppercase;color:#4a6080;margin-bottom:3px;
        }
        .cer-title {
            font-family:'Playfair Display',Georgia,serif;font-size:1.55rem;font-weight:900;
            color:#080f20;line-height:1.1;
        }
        .cer-subtitle {
            font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.13em;
            text-transform:uppercase;color:#4a6080;margin-top:4px;
        }
        .cer-chip {
            display:inline-flex;align-items:center;gap:4px;
            margin-top:5px;padding:2px 10px;
            background:linear-gradient(135deg,rgba(0,180,255,.1),rgba(0,80,200,.06));
            border:1px solid rgba(0,130,255,.28);border-radius:20px;
            font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:800;letter-spacing:.07em;
            text-transform:uppercase;color:#0055a0;
        }
        .cer-rule {
            height:1px;margin:8px 0 0;
            background:linear-gradient(90deg,transparent,#b0c8e8,transparent);
        }

        /* Sección media */
        .cer-mid {
            flex:1;display:flex;flex-direction:column;justify-content:space-between;
            padding:2.5% 0 1.5%;
        }

        /* Nombre */
        .cer-name-box {
            text-align:center;padding:1% 4% 1.2%;
            background:linear-gradient(135deg,rgba(0,80,180,.04),rgba(0,120,255,.02));
            border-radius:10px;border:1px solid rgba(0,100,200,.1);
        }
        .cer-certify-lbl { font-family:'Source Serif 4',Georgia,serif;font-size:.82rem;color:#4a6080;margin-bottom:5px;font-style:italic; }
        .cer-graduate-name {
            font-family:'Playfair Display',Georgia,serif;font-size:2.1rem;font-weight:900;
            color:#080f20;line-height:1.1;display:block;letter-spacing:.01em;
        }
        .cer-name-role {
            font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#4a6080;margin-top:5px;
            letter-spacing:.09em;text-transform:uppercase;font-weight:600;
        }

        /* Logro */
        .cer-achievement {
            font-family:'Source Serif 4',Georgia,serif;font-size:.88rem;color:#253040;line-height:1.65;text-align:justify;padding:2px 0;
        }
        .cer-achievement strong { color:#003a80;font-weight:700; }

        /* Contenidos */
        .cer-contents-hdr {
            display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;
        }
        .cer-contents-lbl {
            font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:800;letter-spacing:.13em;
            text-transform:uppercase;color:#4a6080;
            display:flex;align-items:center;gap:5px;
        }
        .cer-contents-lbl::before {
            content:'';display:inline-block;width:3px;height:9px;
            background:linear-gradient(180deg,#00c8ff,#0055a0);border-radius:2px;
        }
        .cer-contents-badge {
            font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;background:#dbeafe;color:#1e40af;
            border:1px solid #bfdbfe;border-radius:20px;padding:2px 9px;
        }
        .cer-topics-grid {
            display:grid;grid-template-columns:1fr 1fr;gap:1px 10px;
        }
        .cer-topic-row {
            display:flex;align-items:center;gap:4px;
            padding:3px 0;border-bottom:1px solid rgba(0,60,120,.07);
        }
        .cer-topic-row:nth-last-child(-n+2){border-bottom:none;}
        .cer-topic-check {
            width:15px;height:15px;flex-shrink:0;
            background:#dcfce7;border:1px solid #86efac;border-radius:3px;
            display:flex;align-items:center;justify-content:center;
            font-size:9px;color:#16a34a;font-weight:900;
        }
        .cer-topic-num {
            font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:700;
            color:#90aac8;flex-shrink:0;width:20px;
        }
        .cer-topic-name { font-family:'Source Serif 4',Georgia,serif;font-size:.84rem;font-weight:600;color:#0d1e36;line-height:1.35;flex:1; }

        /* Pie */
        .cer-foot {
            padding-top:8px;border-top:1px solid #d8e8f8;
            display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
        }
        .cer-orgs { display:flex;align-items:flex-end;justify-content:space-between;width:100%; }
        .cer-org { display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center; }
        a.cer-org { text-decoration:none;cursor:pointer;border-radius:10px;padding:4px;transition:background .18s,transform .18s; }
        a.cer-org:hover { background:rgba(2,132,199,.08);transform:translateY(-2px); }
        a.cer-org:hover .cer-org-img { border-color:#0284c7;box-shadow:0 4px 14px rgba(2,132,199,.25); }
        a.cer-org:hover .cer-org-name { color:#0284c7; }
        .cer-org-img {
            width:48px;height:48px;background:white;border:1.5px solid #b0c8e8;
            border-radius:8px;overflow:hidden;display:flex;align-items:center;
            justify-content:center;box-shadow:0 2px 8px rgba(0,40,100,.1);
        }
        .cer-org-img img { width:100%;height:100%;object-fit:contain;padding:3px; }
        .cer-org-name { font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:800;color:#0d1e36;letter-spacing:.04em;text-transform:uppercase; }
        .cer-org-sub  { font-family:'JetBrains Mono',monospace;font-size:.62rem;color:#4a6080;letter-spacing:.06em;text-transform:uppercase; }
        .cer-org-verify { font-size:.42rem;color:#0284c7;letter-spacing:.04em;margin-top:1px;opacity:.7; }
        a.cer-org:hover .cer-org-verify { opacity:1; }
        .cer-org-div  { width:1px;height:28px;align-self:center;background:linear-gradient(180deg,transparent,#b0c8e8,transparent); }
        .cer-meta { display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0; }
        .cer-date     { font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:#0d1e36; }
        .cer-date-sub { font-family:'JetBrains Mono',monospace;font-size:.56rem;color:#4a6080; }
        .cer-sha {
            font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
            color:#003880;background:#dbeafe;border:1px solid #bfdbfe;
            border-radius:4px;padding:3px 8px;letter-spacing:.04em;margin-top:3px;
        }

        /* ── COLUMNA DERECHA ── */
        .cert-col-side {
            display:flex;flex-direction:column;align-items:center;
            justify-content:center;padding:1.6% 1.3%;gap:1%;
            background:linear-gradient(180deg,rgba(0,80,180,.05) 0%,rgba(0,120,255,.02) 100%);
            position:relative;z-index:1;
        }
        .cer-side-tier {
            font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
            padding:4px 14px;border-radius:20px;
            background:linear-gradient(135deg,#003880,#001840);color:#67b8f0;
            box-shadow:0 3px 12px rgba(0,50,140,.4);text-align:center;
        }
        .cer-scan-lbl {
            font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:600;letter-spacing:.09em;
            text-transform:uppercase;color:#9ca3af;text-align:center;line-height:1.6;
        }
        .cer-qr-box {
            background:white;border:2px solid #b0c8e8;border-radius:9px;padding:6px;
            width:26%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
            flex-shrink:0;box-shadow:0 4px 16px rgba(0,50,120,.1);
        }
        .cer-id-box {
            font-family:'JetBrains Mono',monospace;font-size:.56rem;color:#4a6080;
            text-align:center;word-break:break-all;
            background:rgba(0,50,100,.03);border:1px solid rgba(0,70,150,.1);
            border-radius:6px;padding:5px 7px;line-height:1.65;width:100%;
        }
        .cer-id-box strong {
            display:block;font-family:'JetBrains Mono',monospace;font-size:.5rem;color:#9ca3af;
            font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px;
        }
        .cer-stats { width:100%;display:flex;flex-direction:column;gap:3px; }
        .cer-stat {
            display:flex;justify-content:space-between;align-items:center;
            padding:3px 7px;background:white;border:1px solid #d8e8f8;border-radius:6px;
        }
        .cer-stat-lbl { font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em; }
        .cer-stat-val { font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:800;color:#080f20; }
        .cer-cycle { width:100%;background:rgba(0,60,140,.03);border:1px solid rgba(0,80,180,.1);border-radius:8px;padding:5px 8px; }
        .cer-cycle-hdr { font-family:'JetBrains Mono',monospace;font-size:.54rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#4a6080;margin-bottom:5px;text-align:center; }
        .cer-cycle-rows { display:flex;flex-direction:column;gap:3px; }
        .cer-cycle-row { display:flex;align-items:center;gap:4px; }
        .cer-cycle-lbl { font-family:'JetBrains Mono',monospace;font-size:.54rem;font-weight:700;color:#9ca3af;width:30px;flex-shrink:0; }
        .cer-cycle-track { flex:1;height:5px;background:#e4edf8;border-radius:3px;overflow:hidden; }
        .cer-cycle-fill { height:100%;border-radius:3px; }
        .cer-cycle-pct { font-family:'JetBrains Mono',monospace;font-size:.54rem;font-weight:700;color:#374151;width:28px;text-align:right; }
        .cer-valid {
            display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
            font-family:'JetBrains Mono',monospace;background:#f0fdf4;border:1px solid #86efac;font-size:.62rem;font-weight:700;color:#15803d;
        }
        .cer-vdot { width:6px;height:6px;border-radius:50%;background:#16a34a;flex-shrink:0;animation:certPulse 2s ease-in-out infinite; }
        @keyframes certPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}50%{box-shadow:0 0 0 5px rgba(22,163,74,0)}}

        /* FW — fill-word input */
        #fw-input:focus { border-color:var(--primary)!important; box-shadow:0 0 0 4px rgba(14,165,233,.12)!important; }
        #fw-input:disabled { opacity:.7; cursor:not-allowed; }
        #fw-input.correct-fw { border-color:#22c55e!important; background:#f0fdf4!important; color:#15803d!important; }
        #fw-input.wrong-fw   { border-color:#ef4444!important; background:#fef2f2!important; color:#dc2626!important; }

        /* Badge tipo pregunta */
        #q-type-badge { display:none;text-align:center;margin-bottom:.35rem;padding:3px 12px;border-radius:20px;font-size:.65rem;font-weight:700;letter-spacing:.05em; }

        /* Botones acción */
        .diploma-actions {
            display:flex;gap:.75rem;width:100%;max-width:1024px;
        }

        /* ═══════ MODAL TIENDA (comprar escudos) ═══════ */
        #modal-shop {
            position:fixed;inset:0;background:rgba(8,47,73,.96);
            backdrop-filter:blur(12px);z-index:3600;
            display:none;align-items:center;justify-content:center;padding:16px;
        }
        #modal-shop.active { display:flex;animation:fadeIn .2s ease; }
        .shop-card {
            background:white;border-radius:2rem;padding:1.75rem;
            max-width:380px;width:100%;
            box-shadow:0 30px 80px rgba(0,0,0,.5);
            text-align:center;max-height:92vh;overflow-y:auto;
        }
        .shop-item {
            display:flex;align-items:center;justify-content:space-between;
            padding:.85rem 1rem;border:2px solid #e2e8f0;
            border-radius:1.25rem;margin-bottom:.6rem;
            transition:border-color .15s,background .15s;cursor:pointer;
        }
        .shop-item:hover { border-color:var(--primary);background:#f0f9ff; }
        .shop-item.gala-item:hover { border-color:var(--gala-gold);background:#fffbeb; }

        /* Hud extra items */
        .hdiv-new { width:1px;height:18px;background:#e2e8f0;flex-shrink:0; }

        /* ═══════ MASCOTA FLOTANTE ═══════ */
        #fatlin-mascot {
            position:fixed; bottom:80px; right:16px;
            width:62px; height:62px;
            z-index:200; cursor:pointer;
            filter:drop-shadow(0 4px 12px rgba(14,165,233,.4));
            animation: mascotFloat 4s ease-in-out infinite;
            transition: transform .3s, filter .3s;
            display:none; /* se muestra al iniciar el juego */
        }
        #fatlin-mascot svg { width:100%; height:100%; }
        @media(max-width:480px){ #fatlin-mascot{width:51px;height:51px;bottom:70px;right:10px;} }

        /* Estados de la mascota */
        @keyframes mascotFloat   { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-8px)} }
        @keyframes mascotCheer   { 0%{transform:translateY(0) scale(1)} 25%{transform:translateY(-22px) scale(1.35)} 50%{transform:translateY(-10px) scale(1.2) rotate(8deg)} 75%{transform:translateY(-18px) scale(1.3) rotate(-6deg)} 100%{transform:translateY(0) scale(1)} }
        @keyframes mascotSad     { 0%,100%{transform:translateX(0) scale(1);opacity:1} 15%{transform:translateX(-7px) scale(.95)} 30%{transform:translateX(7px) scale(.95)} 45%{transform:translateX(-5px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
        @keyframes mascotWin     { 0%{transform:scale(1) rotate(0)}  20%{transform:scale(1.5) rotate(-10deg)} 40%{transform:scale(1.6) rotate(10deg)} 60%{transform:scale(1.4) rotate(-6deg)} 80%{transform:scale(1.3) rotate(4deg)} 100%{transform:scale(1) rotate(0)} }
        @keyframes mascotSleep   { 0%,100%{transform:translateY(0) rotate(0)}  50%{transform:translateY(-4px) rotate(-8deg)} }
        @keyframes mascotGalaPulse { 0%,100%{filter:drop-shadow(0 0 8px rgba(251,191,36,.6))} 50%{filter:drop-shadow(0 0 24px rgba(251,191,36,1)) drop-shadow(0 0 48px rgba(251,191,36,.4))} }

        #fatlin-mascot.state-cheer  { animation: mascotCheer 0.9s ease forwards; filter:drop-shadow(0 4px 20px rgba(34,197,94,.7)); }
        #fatlin-mascot.state-sad    { animation: mascotSad   0.6s ease forwards; filter:drop-shadow(0 4px 12px rgba(239,68,68,.6)); opacity:.7; }
        #fatlin-mascot.state-win    { animation: mascotWin   1.1s ease forwards; filter:drop-shadow(0 4px 24px rgba(245,158,11,.8)); }
        #fatlin-mascot.state-sleep  { animation: mascotSleep 3s ease-in-out infinite; opacity:.5; }
        #fatlin-mascot.state-gala   { animation: mascotGalaPulse 2s ease-in-out infinite !important; }

        /* Burbuja Zzz */
        #mascot-zzz {
            position:fixed; bottom:138px; right:12px;
            font-size:.75rem; font-weight:800; color:#94a3b8;
            z-index:201; pointer-events:none;
            opacity:0; transition:opacity .5s;
            animation: zzzFloat 2s ease-in-out infinite;
        }
        #mascot-zzz.visible { opacity:1; }
        @keyframes zzzFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

        /* ═══════ CELEBRACIÓN CADA 5 NIVELES ═══════ */
        #level5-blast {
            position:fixed; inset:0; z-index:4800;
            pointer-events:none; display:none;
            align-items:center; justify-content:center;
            flex-direction:column; gap:8px;
        }
        #level5-blast.active { display:flex; }

        /* Halo de luz radial */
        #blast-halo {
            position:absolute; width:320px; height:320px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(56,189,248,.35) 0%, rgba(14,165,233,.15) 40%, transparent 70%);
            animation: haloExpand .6s cubic-bezier(.2,0,.4,1) forwards;
        }
        @keyframes haloExpand { from{transform:scale(0);opacity:1} to{transform:scale(1.8);opacity:0} }

        /* Emblema central de la celebración */
        #blast-emblem {
            position:relative; z-index:1;
            width:120px; height:120px;
            animation: blastIn .5s cubic-bezier(.34,1.56,.64,1) forwards,
                       blastOut .4s ease-in 2.1s forwards;
            filter:drop-shadow(0 8px 32px rgba(14,165,233,.6));
        }
        #blast-emblem svg { width:100%; height:100%; }
        @keyframes blastIn  { from{transform:scale(0) translateY(40px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
        @keyframes blastOut { from{transform:scale(1) translateY(0);opacity:1} to{transform:scale(.6) translateY(-30px);opacity:0} }
        body.gala-mode #blast-emblem { filter:drop-shadow(0 8px 32px rgba(251,191,36,.8)); }

        /* Texto del nivel celebrado */
        #blast-text {
            position:relative; z-index:1;
            font-family:'Inter',sans-serif; font-weight:800;
            font-size:1.3rem; color:white;
            text-shadow:0 2px 16px rgba(0,0,0,.5);
            animation: blastIn .5s cubic-bezier(.34,1.56,.64,1) .15s both,
                       blastOut .4s ease-in 2.1s forwards;
            background:rgba(2,132,199,.75); backdrop-filter:blur(8px);
            padding:6px 20px; border-radius:30px;
            border:2px solid rgba(255,255,255,.3);
        }
        body.gala-mode #blast-text { background:rgba(180,83,9,.8); border-color:rgba(251,191,36,.5); }

        /* Partículas de la explosión */
        .blast-particle {
            position:absolute; border-radius:50%;
            animation: particleFly 1.2s ease-out forwards;
        }
        @keyframes particleFly {
            from{transform:translate(0,0) scale(1);opacity:1}
            to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}
        }

        /* ═══════ REWARD MODAL REDISEÑADO ═══════ */
        .reward-card {
            background:linear-gradient(160deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%) !important;
            border:2px solid rgba(56,189,248,.3) !important;
        }
        body.gala-mode .reward-card {
            background:linear-gradient(160deg,#1a0a2e 0%,#3b1a6e 50%,#1a0a2e 100%) !important;
            border:2px solid rgba(251,191,36,.4) !important;
        }

        /* ===== MODAL DESCANSO ===== */
        #modal-rest { position:fixed;inset:0;background:rgba(2,20,40,.92);backdrop-filter:blur(12px);z-index:9000;display:none;align-items:center;justify-content:center;padding:16px; }
        #modal-rest.active { display:flex;animation:fadeIn .35s ease; }
        .rest-card { background:linear-gradient(160deg,#0f172a,#0c2340);border-radius:2rem;padding:2.5rem 2rem 2rem;max-width:360px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.7);border:1.5px solid rgba(56,189,248,.25);position:relative;overflow:hidden; }
        .rest-card::before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(56,189,248,.08),transparent 70%);pointer-events:none; }
        .rest-emblem-wrap { width:110px;height:110px;margin:0 auto 1.25rem;position:relative; }
        /* Anillo pulsante */
        .rest-ring { position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(56,189,248,.4);animation:restRing 2s ease-in-out infinite; }
        .rest-ring2 { position:absolute;inset:-20px;border-radius:50%;border:2px solid rgba(56,189,248,.2);animation:restRing 2s ease-in-out infinite .5s; }
        @keyframes restRing { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.12);opacity:.15} }
        /* Emblema flotante suave */
        @keyframes restFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(2deg)} }
        .rest-emblem-svg { animation:restFloat 3.5s ease-in-out infinite; filter:drop-shadow(0 8px 22px rgba(56,189,248,.5)); }
        /* Zzz durmiendo */
        .rest-zzz { position:absolute;top:-8px;right:-8px;font-size:1.1rem;animation:restZzz 2s ease-in-out infinite; }
        @keyframes restZzz { 0%{transform:translateY(0) scale(1);opacity:1} 60%{transform:translateY(-14px) scale(1.2);opacity:.5} 100%{transform:translateY(-20px) scale(.8);opacity:0} }
        .rest-zzz2 { position:absolute;top:-18px;right:8px;font-size:.8rem;animation:restZzz 2s ease-in-out infinite .7s; }
        .rest-zzz3 { position:absolute;top:-26px;right:20px;font-size:.6rem;animation:restZzz 2s ease-in-out infinite 1.2s; }
        /* Texto */
        .rest-title { font-size:1.5rem;font-weight:800;color:#f0f9ff;margin-bottom:.35rem;line-height:1.2; }
        .rest-subtitle { font-size:.9rem;color:#7dd3fc;margin-bottom:.25rem;font-weight:600; }
        .rest-time-badge { display:inline-block;background:rgba(56,189,248,.15);border:1px solid rgba(56,189,248,.35);border-radius:2rem;padding:.3rem .9rem;font-size:.8rem;font-weight:700;color:#38bdf8;margin:.5rem 0 1rem; }
        .rest-tip { font-size:.75rem;color:#94a3b8;margin-bottom:1.5rem;line-height:1.5; }
        .rest-btn { background:linear-gradient(135deg,#0369a1,#0284c7);color:white;border:none;border-radius:1rem;padding:.75rem 2rem;font-size:.9rem;font-weight:700;cursor:pointer;width:100%;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(3,105,161,.4); }
        .rest-btn:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(3,105,161,.5); }
        .rest-btn-skip { background:none;border:none;color:#475569;font-size:.75rem;cursor:pointer;margin-top:.75rem;display:block;width:100%;padding:.4rem; }
        .rest-btn-skip:hover { color:#94a3b8; }
        /* Puntos decorativos */
        .rest-dots { display:flex;justify-content:center;gap:6px;margin-bottom:1rem; }
        .rest-dot { width:6px;height:6px;border-radius:50%;background:#1e3a5f; }
        .rest-dot.active { background:#0ea5e9;box-shadow:0 0 6px #0ea5e9; }

        /* Contenedor del emblema en el reward */
        #reward-emblem-wrap {
            width:96px; height:96px; margin:0 auto 1rem;
            position:relative;
        }
        #reward-emblem-wrap svg { width:100%; height:100%; }
        #reward-emblem-ring {
            position:absolute; inset:-8px;
            border-radius:50%;
            border:3px solid transparent;
            border-top-color:var(--primary);
            border-right-color:var(--primary-light);
            animation:rewardRingSpin 2s linear infinite;
        }
        @keyframes rewardRingSpin { to{transform:rotate(360deg)} }
        body.gala-mode #reward-emblem-ring {
            border-top-color:var(--gala-gold);
            border-right-color:var(--gala-gold-light);
        }
        #reward-emblem-glow {
            position:absolute; inset:-4px; border-radius:50%;
            animation:rewardGlow 2s ease-in-out infinite;
        }
        @keyframes rewardGlow {
            0%,100%{box-shadow:0 0 20px rgba(14,165,233,.4)}
            50%{box-shadow:0 0 50px rgba(14,165,233,.8),0 0 80px rgba(14,165,233,.3)}
        }
        body.gala-mode #reward-emblem-glow {
            animation:rewardGlowGala 2s ease-in-out infinite;
        }
        @keyframes rewardGlowGala {
            0%,100%{box-shadow:0 0 20px rgba(251,191,36,.5)}
            50%{box-shadow:0 0 60px rgba(251,191,36,1),0 0 100px rgba(251,191,36,.4)}
        }

        /* ═══════ SELECTOR DE IDIOMA (HUD toggle) ═══════ */
        #hud-lang {
            display:flex; align-items:center;
            background:#f1f5f9; border-radius:20px;
            padding:3px; gap:2px;
            border:1px solid #e2e8f0;
        }
        .hud-lang-opt {
            padding:3px 8px; border-radius:16px;
            border:none; background:transparent;
            font-family:'Inter',sans-serif; font-weight:700;
            font-size:.72rem; cursor:pointer; color:#94a3b8;
            transition:background .15s, color .15s;
            line-height:1.2;
        }
        .hud-lang-opt.active {
            background:white; color:#0369a1;
            box-shadow:0 1px 4px rgba(0,0,0,.1);
        }
        body.gala-mode .hud-lang-opt.active { color:var(--gala-gold); }

        /* ── ONBOARDING ─────────────────────────────────────── */
        #modal-onboarding{position:fixed;inset:0;background:rgba(5,20,45,.97);backdrop-filter:blur(16px);z-index:7000;display:none;align-items:center;justify-content:center;padding:20px;}
        #modal-onboarding.active{display:flex;animation:fadeIn .3s ease;}
        .ob-card{background:linear-gradient(160deg,#0c2a4a,#0f3460);border-radius:2rem;padding:2rem 1.75rem;max-width:380px;width:100%;text-align:center;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.6);}
        .ob-logo{font-size:4rem;margin-bottom:.5rem;display:block;line-height:1;}
        .ob-title{font-size:1.2rem;font-weight:900;color:#e2e8f0;margin:.5rem 0 .25rem;line-height:1.25;}
        .ob-subtitle{font-size:.8rem;color:rgba(186,230,253,.75);margin-bottom:1rem;line-height:1.5;}
        .ob-body{font-size:.82rem;color:rgba(226,232,240,.85);line-height:1.6;margin-bottom:1.25rem;}
        .ob-dots{display:flex;justify-content:center;gap:6px;margin-bottom:1.1rem;}
        .ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s;}
        .ob-dot.active{background:#63b3ed;width:24px;border-radius:4px;}
        .ob-btn{width:100%;padding:13px;border-radius:1rem;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:.95rem;background:linear-gradient(135deg,#0ea5e9,#6366f1);color:white;box-shadow:0 4px 20px rgba(14,165,233,.4);}
        .ob-skip{background:none;border:none;color:rgba(255,255,255,.3);font-size:.7rem;cursor:pointer;margin-top:.6rem;font-family:inherit;text-decoration:underline;display:block;width:100%;}
        .ob-liga-table{width:100%;border-collapse:collapse;font-size:.71rem;margin:.6rem 0 1rem;}
        .ob-liga-table th{color:rgba(186,230,253,.6);font-weight:700;text-align:left;padding:3px 5px;border-bottom:1px solid rgba(255,255,255,.08);}
        .ob-liga-table td{color:rgba(226,232,240,.8);padding:3px 5px;border-bottom:1px solid rgba(255,255,255,.04);}
        /* ── MODAL ASCENSO DE LIGA ───────────────────────────── */
        #modal-liga-up{position:fixed;inset:0;background:rgba(5,20,45,.95);backdrop-filter:blur(16px);z-index:6500;display:none;align-items:center;justify-content:center;padding:20px;}
        #modal-liga-up.active{display:flex;animation:fadeIn .3s ease;}
        .ligaup-card{background:linear-gradient(160deg,#0c2a4a,#0f3460);border-radius:2rem;padding:2rem 1.75rem;max-width:360px;width:100%;text-align:center;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6);}
        .ligaup-shield{font-size:4rem;filter:drop-shadow(0 0 20px rgba(99,179,237,.6));animation:shieldFloat 2s ease-in-out infinite;display:block;margin:0 auto .6rem;}
        .ligaup-badge{display:inline-block;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.4);color:#34d399;font-size:.7rem;font-weight:800;padding:3px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem;}
        .ligaup-name{font-size:1.2rem;font-weight:900;color:#fff;margin-bottom:.2rem;}
        .ligaup-sub{font-size:.78rem;color:rgba(186,230,253,.6);font-style:italic;margin-bottom:.9rem;}
        .ligaup-rule{background:rgba(255,255,255,.05);border-radius:.75rem;padding:.6rem .85rem;font-size:.76rem;color:rgba(226,232,240,.8);margin-bottom:.6rem;text-align:left;line-height:1.5;}
        .ligaup-tip{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);border-radius:.75rem;padding:.6rem .85rem;font-size:.76rem;color:#fbbf24;margin-bottom:1.1rem;text-align:left;line-height:1.5;}
        .ligaup-btn{width:100%;padding:12px;border-radius:1rem;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:.9rem;background:linear-gradient(135deg,#34d399,#0ea5e9);color:white;}
        /* ── TIP BUBBLE ──────────────────────────────────────── */
        #liga-tip-bubble{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#0c2a4a,#1e3a5f);border:1px solid rgba(99,179,237,.4);border-radius:1.25rem;padding:.85rem 1.1rem;max-width:320px;width:90%;z-index:2500;display:none;box-shadow:0 8px 30px rgba(0,0,0,.4);}
        #liga-tip-bubble.visible{display:block;animation:slideUp .35s ease;}
        .tip-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;}
        .tip-label{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#63b3ed;}
        .tip-text{font-size:.79rem;color:rgba(226,232,240,.9);line-height:1.5;}
        .tip-close{position:absolute;top:.5rem;right:.65rem;background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:1rem;padding:2px;}
        /* ── SPINNER SPLASH ──────────────────────────────────── */
        @keyframes splashSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

        
        /* ── LÍNEA DE ASCENSO NEÓN ──────────────────────────── */
        .rank-ascenso-line {
            position: relative;
            margin: 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            pointer-events: none;
        }
        .rank-ascenso-line::before {
            content: '';
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, transparent, #10b981, #34d399, #10b981, transparent);
            box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16,185,129,.4);
            animation: neonPulse 2s ease-in-out infinite;
        }
        .rank-ascenso-badge {
            font-size: .58rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: #10b981;
            background: rgba(16,185,129,.12);
            border: 1px solid rgba(16,185,129,.5);
            border-radius: 20px;
            padding: 3px 9px;
            white-space: nowrap;
            box-shadow: 0 0 10px rgba(16,185,129,.3);
            animation: neonPulse 2s ease-in-out infinite;
        }
        @keyframes neonPulse {
            0%,100% { opacity: 1; box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16,185,129,.4); }
            50%      { opacity: .65; box-shadow: 0 0 4px #10b981, 0 0 8px rgba(16,185,129,.2); }
        }
        /* Línea naranja cuando el usuario está en zona de peligro (justo bajo la línea) */
        .rank-ascenso-line.danger::before {
            background: linear-gradient(90deg, transparent, #f97316, #fb923c, #f97316, transparent);
            box-shadow: 0 0 8px #f97316, 0 0 16px rgba(249,115,22,.4);
        }
        .rank-ascenso-line.danger .rank-ascenso-badge {
            color: #f97316;
            background: rgba(249,115,22,.12);
            border-color: rgba(249,115,22,.5);
            box-shadow: 0 0 10px rgba(249,115,22,.3);
        }
        /* Mensaje de proximidad */
        .rank-proximity-msg {
            font-size: .7rem;
            font-weight: 700;
            color: #f97316;
            background: rgba(249,115,22,.08);
            border: 1px solid rgba(249,115,22,.25);
            border-radius: .6rem;
            padding: 6px 10px;
            margin: 4px 0 6px;
            text-align: center;
            line-height: 1.45;
        }
        /* Items sobre la línea — brillo azul */
        .ritem.above-line {
            background: rgba(14,165,233,.06);
            border-left: 3px solid #0ea5e9;
        }
        .ritem.above-line .rbar-fill {
            background: linear-gradient(90deg, #0ea5e9, #6366f1) !important;
        }
        /* Items bajo la línea — atenuados */
        .ritem.below-line {
            opacity: .7;
            filter: saturate(.6);
        }
        .ritem.below-line.me {
            opacity: 1 !important;
            filter: none !important;
            border-left: 3px solid #f97316;
            background: rgba(249,115,22,.06);
        }
        /* ── MOMENTO DE CRUCE ───────────────────────────────── */
        #cruce-overlay {
            position: fixed; inset: 0;
            z-index: 8000;
            pointer-events: none;
            display: none;
        }
        #cruce-overlay.active { display: block; }
        .cruce-line-flash {
            position: absolute;
            top: 50%; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, #10b981, #34d399, #10b981, transparent);
            box-shadow: 0 0 30px #10b981, 0 0 60px rgba(16,185,129,.8);
            transform: scaleX(0);
            animation: cruceFlash 1.2s ease forwards;
        }
        @keyframes cruceFlash {
            0%   { transform: scaleX(0); opacity: 0; }
            30%  { transform: scaleX(1); opacity: 1; }
            70%  { transform: scaleX(1); opacity: 1; }
            100% { transform: scaleX(0); opacity: 0; top: 40%; }
        }
        .cruce-msg {
            position: absolute;
            top: 42%; left: 50%; transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #064e3b, #065f46);
            border: 2px solid #10b981;
            border-radius: 1.25rem;
            padding: 1rem 1.5rem;
            text-align: center;
            box-shadow: 0 0 40px rgba(16,185,129,.5);
            animation: cruceMsgAnim 2.5s ease forwards;
            max-width: 300px; width: 85%;
        }
        @keyframes cruceMsgAnim {
            0%   { opacity: 0; transform: translate(-50%,-50%) scale(.8); }
            20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
            70%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%,-50%) scale(.95); }
        }
        .cruce-icon  { font-size: 2.2rem; display: block; margin-bottom: .4rem; }
        .cruce-title { font-size: 1rem; font-weight: 900; color: #34d399; margin-bottom: .3rem; }
        .cruce-sub   { font-size: .75rem; color: rgba(167,243,208,.8); line-height: 1.5; }

        
        /* ── MODAL POLÍTICA DE PRIVACIDAD ───────────────────── */
        #modal-privacy {
            position:fixed;inset:0;background:rgba(2,8,20,.97);
            backdrop-filter:blur(20px);z-index:8500;
            display:none;align-items:center;justify-content:center;padding:16px;
        }
        #modal-privacy.active { display:flex;animation:fadeIn .35s ease; }
        .privacy-card {
            background:linear-gradient(160deg,#0c1a2e,#0f2744);
            border-radius:1.75rem;max-width:420px;width:100%;max-height:90vh;
            display:flex;flex-direction:column;
            border:1px solid rgba(99,179,237,.2);
            box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden;
        }
        .privacy-header {
            padding:1.4rem 1.5rem .9rem;
            border-bottom:1px solid rgba(255,255,255,.07);
            flex-shrink:0;text-align:center;
        }
        .privacy-logo { display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.5rem; }
        .privacy-logo-text { font-size:1.1rem;font-weight:900;color:#e2e8f0;letter-spacing:.02em; }
        .privacy-title { font-size:.95rem;font-weight:800;color:#63b3ed;margin-bottom:.2rem; }
        .privacy-date  { font-size:.63rem;color:rgba(186,230,253,.4);font-style:italic; }
        .privacy-body {
            flex:1;overflow-y:auto;padding:1.1rem 1.4rem;
            font-size:.78rem;color:rgba(226,232,240,.82);line-height:1.68;
            scrollbar-width:thin;scrollbar-color:rgba(99,179,237,.3) transparent;
        }
        .privacy-body::-webkit-scrollbar{width:4px}
        .privacy-body::-webkit-scrollbar-thumb{background:rgba(99,179,237,.3);border-radius:4px}
        .privacy-body p { margin-bottom:.65rem; }
        .privacy-body h3 {
            font-size:.79rem;font-weight:800;color:#63b3ed;
            margin:1rem 0 .35rem;text-transform:uppercase;letter-spacing:.08em;
            display:flex;align-items:center;gap:.4rem;
        }
        .privacy-body h3:first-child { margin-top:0; }
        .privacy-body h3::before {
            content:'';display:inline-block;width:3px;height:12px;
            background:#0ea5e9;border-radius:2px;flex-shrink:0;
        }
        .privacy-body ul  { padding-left:1.1rem;margin-bottom:.65rem; }
        .privacy-body li  { margin-bottom:.35rem; }
        .privacy-body strong { color:#93c5fd;font-weight:700; }
        .privacy-body em     { color:rgba(186,230,253,.6); }
        .privacy-scroll-hint {
            font-size:.67rem;color:rgba(251,191,36,.75);text-align:center;
            padding:.45rem .75rem;background:rgba(251,191,36,.06);
            border-top:1px solid rgba(251,191,36,.12);flex-shrink:0;
            animation:neonPulse 2s ease-in-out infinite;
        }
        .privacy-footer {
            padding:.9rem 1.4rem 1.1rem;
            border-top:1px solid rgba(255,255,255,.07);
            flex-shrink:0;background:rgba(0,0,0,.15);
        }
        .privacy-check-row {
            display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.75rem;
            background:rgba(14,165,233,.07);border:1px solid rgba(14,165,233,.18);
            border-radius:.85rem;padding:.7rem .85rem;cursor:pointer;
            transition:background .15s,border-color .15s;
        }
        .privacy-check-row:hover { background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.35); }
        .privacy-check-row.checked { background:rgba(14,165,233,.15);border-color:rgba(14,165,233,.5); }
        .privacy-check-row input[type="checkbox"] {
            width:18px;height:18px;flex-shrink:0;accent-color:#0ea5e9;cursor:pointer;margin-top:1px;
        }
        .privacy-check-label { font-size:.74rem;color:rgba(226,232,240,.85);line-height:1.5;cursor:pointer;user-select:none; }
        .privacy-check-label strong { color:#63b3ed; }
        .privacy-accept-btn {
            width:100%;padding:12px;border-radius:1rem;border:none;cursor:pointer;
            font-family:inherit;font-weight:900;font-size:.9rem;
            background:linear-gradient(135deg,#0ea5e9,#6366f1);color:white;
            box-shadow:0 4px 20px rgba(14,165,233,.4);
            transition:opacity .2s,transform .15s,box-shadow .15s;margin-bottom:.5rem;
        }
        .privacy-accept-btn:disabled { opacity:.3;cursor:not-allowed;box-shadow:none;background:#334155; }
        .privacy-accept-btn:not(:disabled):hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(14,165,233,.55); }
        .privacy-decline-link {
            display:block;text-align:center;font-size:.66rem;
            color:rgba(255,255,255,.22);cursor:pointer;text-decoration:underline;
            transition:color .15s;
        }
        .privacy-decline-link:hover { color:rgba(255,255,255,.45); }

        
        /* ── MEJORAS MODAL DE JUEGO ──────────────────────────── */
        /* Indicador de nivel de dificultad */
        .q-difficulty-bar {
            display:flex; gap:3px; align-items:center;
            justify-content:center; margin:.3rem 0 .5rem;
        }
        .q-diff-dot {
            width:6px; height:6px; border-radius:50%;
            background:rgba(255,255,255,.15);
            transition:background .3s;
        }
        .q-diff-dot.active { background:#fbbf24; box-shadow:0 0 6px #fbbf24; }
        .q-diff-dot.active.hard  { background:#f87171; box-shadow:0 0 6px #f87171; }
        .q-diff-dot.active.elite { background:#c084fc; box-shadow:0 0 6px #c084fc; }

        /* Número de pregunta dentro del nivel */
        .q-counter {
            font-size:.6rem; font-weight:700; color:rgba(186,230,253,.4);
            text-align:center; margin-bottom:.2rem; letter-spacing:.08em;
        }
        /* Indicador "preguntas nuevas" */
        .q-fresh-badge {
            display:inline-flex; align-items:center; gap:4px;
            font-size:.58rem; font-weight:700; color:#6ee7b7;
            background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25);
            border-radius:20px; padding:1px 8px; margin:.2rem 0 0;
            opacity:0; transition:opacity .4s;
        }
        .q-fresh-badge.visible { opacity:1; }

        /* Mejorar animación de entrada de pregunta */
        #question-area {
            transition: opacity .22s ease, transform .22s ease !important;
        }
        /* Indicador de tipo V/F más visible */
        #q-type-badge {
            font-size:.62rem !important;
            padding:2px 10px !important;
            letter-spacing:.1em;
        }
        /* Opciones con micro-animación stagger mejorada */
        .opt { animation: optSlideIn .2s ease both; }
        @keyframes optSlideIn {
            from { opacity:0; transform:translateY(6px); }
            to   { opacity:1; transform:translateY(0); }
        }

        
        /* ── AVATAR CON FOTO GOOGLE ─────────────────────────── */
        #hud-avatar img,
        .logros-avatar img,
        .acc-av-img,
        .rank-avatar-img {
            width:100%; height:100%;
            object-fit:cover; border-radius:50%;
            display:block;
        }
        #hud-avatar.has-photo { font-size:0; padding:0; overflow:hidden; }
        .logros-avatar.has-photo { font-size:0; padding:0; overflow:hidden; }
        .acc-av-wrap.has-photo  { font-size:0; overflow:hidden; }
        /* Opción foto Google en el picker */
        .av-google-opt {
            grid-column: span 2;
            display:flex; align-items:center; gap:8px;
            background:rgba(66,133,244,.1);
            border:1.5px solid rgba(66,133,244,.35);
            border-radius:.85rem; padding:.55rem .75rem;
            cursor:pointer; margin-bottom:.4rem;
            transition:background .15s;
        }
        .av-google-opt:hover { background:rgba(66,133,244,.18); }
        .av-google-opt img {
            width:36px; height:36px;
            border-radius:50%; object-fit:cover;
            border:2px solid rgba(66,133,244,.5);
            flex-shrink:0;
        }
        .av-google-opt-info { flex:1; }
        .av-google-opt-label { font-size:.72rem; font-weight:800; color:#93c5fd; }
        .av-google-opt-sub   { font-size:.6rem;  color:rgba(147,197,253,.55); }
        .av-google-opt.selected {
            background:rgba(66,133,244,.22);
            border-color:rgba(66,133,244,.7);
            box-shadow:0 0 12px rgba(66,133,244,.3);
        }



/* ═══════════════════════════════════════════════════════
   ESTILOS SIDEBAR + PROGRESS FOOTER (migrados del index viejo)
═══════════════════════════════════════════════════════ */

        @media(max-width:768px){ #map-scroll{max-width:100%;box-shadow:none;} }
        /* ═══ PANEL LATERAL IZQUIERDO — FIJO ═══ */
        #hud-sidebar {
            position:fixed;
            top:calc(52px + max(0px, env(safe-area-inset-top)));
            left:0;bottom:0;z-index:49;
            pointer-events:auto;
            width:148px;
        }
        #sidebar-panel {
            height:100%;
            background:#0c2d4e;
            border-right:1.5px solid #0f3d6b;
            box-shadow:3px 0 16px rgba(0,0,0,.35);
            padding:12px 10px 16px 10px;
            display:flex;flex-direction:column;gap:6px;
            box-sizing:border-box;overflow-y:auto;
        }
        #sidebar-toggle { display:none; }
        .sbar-lbl { font-size:.67rem;font-weight:700;color:#38bdf8;text-transform:uppercase;letter-spacing:.08em;padding:4px 0 2px; }
        .sbar-div { height:1px;background:rgba(255,255,255,.1);margin:3px 0; }
        .sbar-row { display:flex;align-items:center;gap:7px;font-size:.83rem;padding:2px 0;color:rgba(255,255,255,.85); }
        .sbar-btn { width:100%;padding:6px 8px;border-radius:9px;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;font-size:.8rem;display:flex;align-items:center;gap:6px;transition:transform .12s,background .12s;text-align:left;box-sizing:border-box; }
        .sbar-btn:active { transform:scale(.95); }
        .hdiv-new { display:none !important; }

        /* Mapa desplazado por sidebar */
        #map-scroll { left:148px !important; }

        /* ── MÓVIL ≤ 600px ───────────────────────────────────────── */
        @media(max-width:600px){
            /* Barra: altura compacta, sin nombre de usuario */
            .hud-inner {
                height:calc(46px + max(0px, env(safe-area-inset-top)));
                padding:0 8px; gap:5px;
            }
            /* Ocultar nombre y FTL — liberan ~90px */
            .hud-left .hstat-name { display:none; }
            .hud-left .hdiv-name  { display:none; }
            #stat-ftl { display:none; } /* FTL solo en sidebar */
            /* Tamaños reducidos */
            #hud-avatar { width:28px;height:28px;font-size:1rem; }
            .hstat { font-size:.8rem;gap:2px; }
            .hbtn  { padding:4px 7px;font-size:.75rem; }
            .hdiv  { margin:0; }
            /* Selector idioma compacto */
            .hud-lang-opt { padding:2px 5px;font-size:.68rem; }
            /* Sidebar compacto: solo iconos */
            #hud-sidebar { top:calc(46px + max(0px, env(safe-area-inset-top)));width:42px; }
            #sidebar-panel { padding:8px 4px;align-items:center;gap:5px; }
            .sbar-lbl { display:none; }
            .sbar-div { width:26px;margin:2px auto; }
            .sbar-row {
                flex-direction:column;gap:1px;width:34px;
                align-items:center;justify-content:center;padding:3px 0;
            }
            .sbar-row > span:nth-child(2) { display:none; } /* ocultar label texto */
            .sbar-val { font-size:.68rem;font-weight:800;line-height:1;display:block; }
            .sbar-btn { width:34px;height:34px;padding:0;justify-content:center;border-radius:8px; }
            .sbar-btn span { display:none; }
            #sidebar-gala-badge {
                font-size:.58rem;padding:3px 2px;width:34px;
                writing-mode:vertical-rl;border-radius:6px;text-align:center;
            }
            #sidebar-gala-timer { display:none; }
            #map-scroll { left:42px !important; }
        }

        /* ── MUY PEQUEÑO ≤ 380px ─────────────────────────────────── */
        @media(max-width:380px){
            .hud-center { display:none; } /* ocultar nivel en pantallas muy pequeñas */
            .hud-right .hdiv { display:none; }
        }

        /* PROGRESS DOTS */
        #streak-bar { display:flex;gap:6px;align-items:center; }
        .streak-dot { width:12px;height:12px;border-radius:50%;border:2px solid #e2e8f0;background:#f1f5f9;transition:all .3s cubic-bezier(.175,.885,.32,1.275); }
        .streak-dot.filled { background:var(--success);border-color:#16a34a;transform:scale(1.2);box-shadow:0 0 6px rgba(34,197,94,.5); }
        .streak-dot.flash { animation:dotFlash .4s ease; }
        @keyframes dotFlash { 0%{transform:scale(1.2)} 50%{transform:scale(1.7)} 100%{transform:scale(1.2)} }

        /* LEVEL NODES */
        .level-node { position:absolute;width:var(--node);height:var(--node);border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;font-weight:700;color:white;z-index:10;cursor:pointer;font-size:1.1rem;box-shadow:0 8px 0 rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.4);will-change:transform; }
        @media(max-width:480px){ .level-node{width:56px;height:56px;border-radius:14px;font-size:1rem;} }
        .level-node.completed { background:var(--success);box-shadow:0 6px 0 #15803d; }
        .level-node.completed:hover { transform:scale(1.12);background:#16a34a;box-shadow:0 10px 25px rgba(0,0,0,.3),0 0 20px rgba(34,197,94,.5); }
        .level-node.current { background:white;color:var(--primary-dark);transform:scale(1.15);animation:nodeGlow 2.5s ease-in-out infinite; }
        @keyframes nodeGlow { 0%,100%{box-shadow:0 10px 25px rgba(0,0,0,.3),0 0 15px rgba(255,255,255,.4)} 50%{box-shadow:0 10px 35px rgba(0,0,0,.4),0 0 45px rgba(255,255,255,.8)} }
        .level-node.locked { cursor:default;opacity:.45;pointer-events:none; }
        .lnlabel { font-size:9px;font-weight:700;opacity:.85;line-height:1; }

        /* MODALS */
        .modal-overlay { position:fixed;inset:0;background:rgba(8,47,73,.9);backdrop-filter:blur(8px);z-index:3000;display:none;align-items:center;justify-content:center;padding:16px;overflow-y:auto; }
        .modal-overlay.active { display:flex;animation:fadeIn .2s ease; }
        @media(max-width:600px){ .page-footer { left:0; } }
        /* Sidebar en modo Gala */
        body.gala-mode #sidebar-panel { background:rgba(15,10,30,.97);border-color:rgba(245,158,11,.3); }
        body.gala-mode .sbar-lbl { color:rgba(253,230,138,.5); }
        body.gala-mode .sbar-div { background:rgba(245,158,11,.2); }
        body.gala-mode .sbar-row { color:#fde68a; }
        body.gala-mode .sbar-btn { background:rgba(245,158,11,.15) !important; color:#fde68a !important; }
        body.gala-mode #btn-ranking svg { stroke:#fde68a !important; }
        body.gala-mode #btn-gocur svg   { stroke:#e9d5ff !important; }
        body.gala-mode #sidebar-shields-count { color:#c4b5fd !important; }
        body.gala-mode #sidebar-streak-count  { color:#fbbf24 !important; }
        body.gala-mode .streak-dot { border-color:rgba(245,158,11,.4); }
        body.gala-mode .streak-dot.filled { background:var(--gala-gold);border-color:#d97706; }
        body.gala-mode .level-node.current {
            background: linear-gradient(135deg, var(--gala-gold), #d97706) !important;
            color: #1e0a3c !important;
            animation: galaNodeGlow 2s ease-in-out infinite !important;
        }
        @keyframes galaNodeGlow {
            0%,100%{box-shadow:0 0 20px rgba(245,158,11,.6),0 0 40px rgba(245,158,11,.3)}
            50%{box-shadow:0 0 40px rgba(245,158,11,1),0 0 80px rgba(245,158,11,.5)}
        }
        body.gala-mode .level-node.completed {
            background: linear-gradient(135deg,#7c3aed,#4c1d95) !important;
            box-shadow: 0 6px 0 #3b0764 !important;
        }
        /* Estrellas de fondo en modo Gala */
        #gala-stars { position:fixed;inset:0;pointer-events:none;z-index:1;display:none; }
        body.gala-mode #gala-stars { display:block; }
        .gala-star { position:absolute;border-radius:50%;background:white;animation:twinkle 3s ease-in-out infinite; }
        @keyframes twinkle { 0%,100%{opacity:.2;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }
        /* HUD badge Gala */
        #gala-badge {
            display:none;font-size:.75rem;font-weight:700;
            background:linear-gradient(135deg,var(--gala-gold),#d97706);
            color:#1e0a3c;padding:3px 10px;border-radius:20px;
            animation:pulse 2s ease infinite;
        }
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
        body.gala-mode #gala-badge { display:inline-flex;align-items:center;gap:4px; }

        /* ═══════ ESCUDOS & RACHA ═══════ */
        #stat-shields { display:none;align-items:center;gap:3px;font-size:.85rem; }
        #stat-shields.visible { display:flex; }
        #stat-streak { display:none;align-items:center;gap:3px;font-size:.85rem; }
        /* ═══════ BARRA DE PROGRESO INFERIOR ═══════ */
        #progress-footer {
            position:fixed; bottom:22px; left:0; right:0; z-index:49;
            background:#0c2d4e;
            border-top:1.5px solid #0f3d6b;
            padding:5px 16px 6px;
            display:none;
            font-family:'Inter',sans-serif;
            pointer-events:none;
        }
        #progress-footer.visible { display:block; }
        /* Ocultar barra durante preguntas */
        body.in-challenge #progress-footer,
        body.in-challenge .page-footer { display:none !important; }
        @media(max-width:600px){
            #progress-footer { left:0; bottom:20px; }
        }
        .pfooter-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px; }
        .pfooter-lvtxt { font-size:13px; font-weight:800; color:#94a3b8; letter-spacing:.04em; }
        .pfooter-nexttxt { font-size:13px; color:#f59e0b; font-weight:800; }
        .pfooter-track {
            width:100%; height:10px; background:rgba(255,255,255,.1);
            border-radius:6px; position:relative; margin-bottom:3px; overflow:visible;
        }
        /* Degradado dinámico por variable CSS — JS actualiza --pct */
        .pfooter-fill {
            height:100%;
            background: linear-gradient(90deg,
                #0ea5e9 0%,
                #6366f1 40%,
                #8b5cf6 70%,
                #f59e0b 100%
            );
            background-size: 200% 100%;
            background-position: calc(100% - var(--pct, 0) * 1%) center;
            border-radius:6px; position:relative;
            transition:width .5s ease;
            box-shadow: 0 0 8px rgba(99,102,241,.5);
        }
        .pfooter-dot {
            position:absolute; right:-5px; top:50%; transform:translateY(-50%);
            width:10px; height:10px; background:#f59e0b;
            border-radius:50%; border:2px solid #0c2d4e;
            box-shadow: 0 0 6px rgba(245,158,11,.8);
        }
        .pfooter-mk {
            position:absolute; top:-3px;
            width:2px; height:16px; border-radius:1px; transform:translateX(-50%);
        }
        .pfooter-mk-lbl {
            position:absolute; top:18px; left:50%; transform:translateX(-50%);
            font-size:11px; font-weight:800; white-space:nowrap;
            font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
            color:rgba(255,255,255,.75);
        }
        .pfooter-mk-lbl.grado { color:#f59e0b; }
        .pfooter-bottom { display:flex; justify-content:space-between; align-items:center; }
        .pfooter-msg { font-size:11px; color:#94a3b8; }
        .pfooter-pct { font-size:12px; font-weight:800; color:#f59e0b; }


        /* ═══════ MODAL PASARELA DE PAGO — LINKS FIJOS ═══════ */
        #modal-payment {
          position:fixed;inset:0;
          background:rgba(0,0,0,.85);
          backdrop-filter:blur(12px);
          z-index:7000;
          display:none;align-items:center;justify-content:center;padding:20px;
        }
        #modal-payment.active { display:flex;animation:fadeIn .3s ease; }
        .pay-card {
          background:#ffffff;border-radius:24px;
          padding:28px 24px 22px;
          max-width:400px;width:100%;
          box-shadow:0 32px 80px rgba(0,0,0,.5);
          text-align:center;
        }
        .pay-icon { font-size:44px;margin-bottom:10px;display:block; }
        .pay-badge {
          display:inline-block;font-size:10px;font-weight:700;
          padding:3px 12px;border-radius:20px;letter-spacing:.07em;
          text-transform:uppercase;margin-bottom:12px;
          background:#f0f9ff;color:#0369a1;border:1.5px solid #bae6fd;
        }
        .pay-title { font-size:20px;font-weight:800;color:#0d1e50;margin-bottom:6px;line-height:1.2; }
        .pay-msg { font-size:12.5px;color:#475569;line-height:1.6;margin-bottom:18px;padding:0 4px; }
        .pay-amount-box {
          background:linear-gradient(135deg,#f0fdf4,#dcfce7);
          border:1.5px solid #86efac;border-radius:14px;
          padding:10px 16px;margin-bottom:20px;display:inline-block;
        /* ══════════════════════════════════════════════════════════
           LANDSCAPE RESPONSIVE — giro horizontal del dispositivo
        ══════════════════════════════════════════════════════════ */
        @media (orientation: landscape) and (max-height: 500px) {
          /* HUD más compacto */
          .hud-inner { padding: 3px 10px !important; }
          #hud-avatar { width: 26px !important; height: 26px !important; }
          .hstat { padding: 2px 8px !important; font-size: .7rem !important; }

          /* Mapa ocupa todo el espacio disponible */
          #map-container { height: calc(100vh - 72px) !important; }

          /* Footer más delgado */
          footer.page-footer { padding: 3px 16px !important; }

          /* Sidebar compacto */
          #sidebar-panel { width: 120px !important; }
          .sbar-row { font-size: .7rem !important; }

          /* Modales — scroll vertical en landscape */
          .challenge-card {
            max-height: calc(100vh - 16px) !important;
            overflow-y: auto !important;
            margin-top: 4px !important;
          }
          #modal-ranking .rcard {
            max-height: calc(100vh - 20px) !important;
            overflow-y: auto !important;
          }

          /* Nodos del mapa más pequeños */
          :root { --node: 48px !important; }
        }