/* ═══════════════════════════════════════════════
   VYNDRA TACTICAL THEORY — CSS v4
   Aligned with dashboard.css design system
═══════════════════════════════════════════════ */

/* ── THEMES (mirrored from dashboard) ─────── */
:root{--acc-rgb:168,85,247;--acc:#a855f7;--acc-dim:rgba(168,85,247,.12);--acc-glow:0 0 14px rgba(168,85,247,.4)}
[data-theme=purple]{--acc-rgb:168,85,247;--acc:#a855f7;--acc-dim:rgba(168,85,247,.12);--acc-glow:0 0 14px rgba(168,85,247,.4)}
[data-theme=green] {--acc-rgb:34,197,94;--acc:#22c55e;--acc-dim:rgba(34,197,94,.12);--acc-glow:0 0 14px rgba(34,197,94,.4)}
[data-theme=orange]{--acc-rgb:245,158,11;--acc:#f59e0b;--acc-dim:rgba(245,158,11,.12);--acc-glow:0 0 14px rgba(245,158,11,.4)}
[data-theme=red]   {--acc-rgb:239,68,68;--acc:#ef4444;--acc-dim:rgba(239,68,68,.12);--acc-glow:0 0 14px rgba(239,68,68,.4)}
[data-theme=cyan]  {--acc-rgb:6,182,212;--acc:#06b6d4;--acc-dim:rgba(6,182,212,.12);--acc-glow:0 0 14px rgba(6,182,212,.4)}

/* ── RESET & BASE ────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg:   #020509;
    --bg2:  #07090f;
    --bg3:  #0c1018;
    --card: #090c14;
    --card2:#0d1120;
    --border:  rgba(255,255,255,.06);
    --border2: rgba(255,255,255,.1);
    --txt:  #e8f0ff;
    --txt2: rgba(232,240,255,.5);
    --txt3: rgba(232,240,255,.25);
    /* Game-color override */
    --gc:     var(--acc);
    --gc-rgb: var(--acc-rgb);
    /* Legacy aliases */
    --text:  var(--txt);
    --text2: var(--txt2);
    --text3: var(--txt3);
    --val: #ff4655; --val-rgb: 255,70,85;
    --cs2: #f59e0b; --cs2-rgb: 245,158,11;
    --fn:  #a855f7; --fn-rgb:  168,85,247;
    --dl:  #22c55e; --dl-rgb:  34,197,94;
    --ff-d: 'Bebas Neue', sans-serif;
    --ff-m: 'Share Tech Mono', monospace;
    --ff-b: 'Rajdhani', sans-serif;
    --r:  6px;
    --r2: 10px;
    /* Alias usado por la navbar */
    --rad-s: 6px;
    --nav-h: 58px;
}

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--ff-b);
    font-size: 16px;
    min-height: 100vh;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
input, button, select, textarea { font-family: inherit; outline: none; }

::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: rgba(var(--acc-rgb), .35); border-radius: 2px; }

/* ── CANVAS & OVERLAYS ──────────────────── */
#global-canvas {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

#scanlines {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
    animation: scanMove 8s linear infinite;
}
@keyframes scanMove { 100% { background-position: 0 100px; } }

#scan-beam {
    position: fixed; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--gc-rgb),.15), rgba(var(--gc-rgb),.4), rgba(var(--gc-rgb),.15), transparent);
    z-index: 2; pointer-events: none;
    animation: beamSweep 7s linear infinite;
    box-shadow: 0 0 10px rgba(var(--gc-rgb),.25);
    transition: background .4s, box-shadow .4s;
}
@keyframes beamSweep {
    0%   { top: -2px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100vh; opacity: 0; }
}

.bg-grid {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--acc-rgb),.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--acc-rgb),.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.bg-noise {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--gc-rgb),.04) 0%, transparent 65%);
    transition: background .5s;
}

/* ── HIT MARKER ──────────────────────────── */
.hitmarker {
    position: fixed; pointer-events: none; z-index: 99998;
    transform: translate(-50%,-50%);
    animation: hitFade .45s ease-out forwards;
}
.hitmarker::before, .hitmarker::after {
    content: ''; position: absolute;
    background: var(--gc); box-shadow: 0 0 6px var(--gc);
    border-radius: 1px; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.hitmarker::before { width: 14px; height: 2px; }
.hitmarker::after  { width: 2px;  height: 14px; }
.hitmarker .hm-tl, .hitmarker .hm-tr,
.hitmarker .hm-bl, .hitmarker .hm-br {
    position: absolute; width: 6px; height: 6px;
    border: 2px solid #fff; animation: hitLines .45s ease-out forwards;
}
.hitmarker .hm-tl { top:0; left:0;   border-right:none; border-bottom:none; }
.hitmarker .hm-tr { top:0; right:0;  border-left:none;  border-bottom:none; }
.hitmarker .hm-bl { bottom:0; left:0;  border-right:none; border-top:none; }
.hitmarker .hm-br { bottom:0; right:0; border-left:none;  border-top:none; }
@keyframes hitFade  { 0%{opacity:1;transform:translate(-50%,-50%) scale(.8)} 40%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)} }
@keyframes hitLines { 0%{opacity:1} 100%{opacity:0} }

/* ── GLASS BOX ────────────────────────────── */
.glass-box {
    background: rgba(9,12,20,.85);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ══ NAVBAR ══════════════════════════════════════════════════════════
   Full accent-reactive navbar (igual a aim/ranking)
══════════════════════════════════════════════════════════════════ */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:rgba(2,5,9,.92);backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.055);display:flex;align-items:center;padding:0 24px;gap:0;z-index:900;overflow:visible;animation:navDropIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes navDropIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.nav-scan{position:absolute;top:0;left:-40%;width:40%;height:100%;pointer-events:none;z-index:1;background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.05),rgba(var(--acc-rgb),.1),rgba(var(--acc-rgb),.05),transparent);animation:navScan 7s cubic-bezier(.4,0,.6,1) infinite 1.5s}
@keyframes navScan{0%{left:-40%}100%{left:140%}}
.nav-border-glow{position:absolute;bottom:-1px;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(var(--acc-rgb),0) 10%,rgba(var(--acc-rgb),.6) 35%,rgba(var(--acc-rgb),.9) 50%,rgba(var(--acc-rgb),.6) 65%,rgba(var(--acc-rgb),0) 90%,transparent 100%);animation:navGlow 4s ease-in-out infinite;box-shadow:0 0 14px rgba(var(--acc-rgb),.4),0 0 30px rgba(var(--acc-rgb),.15)}
@keyframes navGlow{0%,100%{opacity:.3;transform:scaleX(.65)}50%{opacity:1;transform:scaleX(1)}}
.nav-hud-tl,.nav-hud-tr{position:absolute;top:7px;width:14px;height:14px;pointer-events:none;animation:hudBlink 3.5s ease-in-out infinite}
.nav-hud-tl{left:8px;border-top:1.5px solid var(--acc);border-left:1.5px solid var(--acc)}
.nav-hud-tr{right:8px;border-top:1.5px solid var(--acc);border-right:1.5px solid var(--acc)}
@keyframes hudBlink{0%,100%{opacity:.6}50%{opacity:.15}}
@keyframes navItemIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@keyframes logoPulse{0%,100%{transform:translateY(-50%) scale(1);opacity:.4}50%{transform:translateY(-50%) scale(1.6);opacity:0}}
.nav-logo{font-family:var(--ff-d);font-size:24px;letter-spacing:.18em;color:var(--txt);flex-shrink:0;cursor:default;animation:navItemIn .5s .1s both;transition:text-shadow .25s;display:flex;align-items:center;gap:10px;position:relative;margin-right:4px}
.nav-logo:hover{text-shadow:0 0 20px rgba(var(--acc-rgb),.4)}
.nav-logo span{color:var(--acc)}
.nav-logo-icon{color:var(--acc);flex-shrink:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .3s;filter:drop-shadow(0 0 5px rgba(var(--acc-rgb),.55))}
.nav-logo:hover .nav-logo-icon{transform:rotate(30deg) scale(1.14);filter:drop-shadow(0 0 12px rgba(var(--acc-rgb),.9))}
.nav-logo-pulse{position:absolute;left:0;top:50%;width:28px;height:28px;border-radius:50%;border:1px solid rgba(var(--acc-rgb),.22);transform:translateY(-50%);animation:logoPulse 3s ease-in-out infinite;pointer-events:none}
.nav-divider{width:1px;height:22px;background:rgba(255,255,255,.07);margin:0 14px;flex-shrink:0;animation:navItemIn .5s .15s both}
.nav-home-btn{display:flex;align-items:center;gap:5px;padding:6px 13px;font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;color:var(--acc);background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.3);border-radius:var(--rad-s);transition:all .2s;white-space:nowrap;flex-shrink:0;margin-right:12px;text-decoration:none;cursor:pointer;animation:navItemIn .5s .18s both}
.nav-home-btn:hover{background:rgba(var(--acc-rgb),.22);border-color:var(--acc);transform:translateY(-1px)}
.nav-links{display:flex;gap:1px;flex:1;min-width:0;position:relative;animation:navItemIn .5s .2s both}
.nav-glider{position:absolute;top:50%;transform:translateY(-50%);height:30px;border-radius:6px;background:rgba(var(--acc-rgb),.09);border:1px solid rgba(var(--acc-rgb),.28);box-shadow:0 0 12px rgba(var(--acc-rgb),.1),inset 0 0 8px rgba(var(--acc-rgb),.04);transition:left .3s cubic-bezier(.34,1.2,.64,1),width .3s cubic-bezier(.34,1.2,.64,1);pointer-events:none;z-index:0;opacity:0}

/* Nav links con efecto fluido al hover */
.nav-link{padding:6px 13px;font-family:var(--ff-m);font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.32);border-radius:6px;border:1px solid transparent;transition:color .18s,border-color .2s,background .2s;white-space:nowrap;position:relative;z-index:1;overflow:hidden;text-decoration:none}
.nav-link::before{content:'';position:absolute;inset:0;border-radius:6px;background:rgba(var(--acc-rgb),.08);transform:translateX(-110%) skewX(-10deg);transition:transform .38s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}
.nav-link:hover::before{transform:translateX(0) skewX(0deg)}
.nav-link:hover{color:var(--txt2);border-color:rgba(var(--acc-rgb),.18)}
.nav-link.active{color:var(--acc)!important;font-weight:600;background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.28);text-shadow:0 0 14px rgba(var(--acc-rgb),.45)}
.nav-link.active::after{content:'';position:absolute;bottom:0;left:22%;right:22%;height:1.5px;background:var(--acc);box-shadow:0 0 10px var(--acc);border-radius:2px}
.nav-link:nth-child(2){animation:navItemIn .45s .22s both}
.nav-link:nth-child(3){animation:navItemIn .45s .26s both}
.nav-link:nth-child(4){animation:navItemIn .45s .30s both}
.nav-link:nth-child(5){animation:navItemIn .45s .34s both}
.nav-link:nth-child(6){animation:navItemIn .45s .38s both}
.nav-link:nth-child(7){animation:navItemIn .45s .42s both}

.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;animation:navItemIn .5s .45s both}
.theme-selector{position:relative}
.theme-toggle-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:var(--txt2);font-family:var(--ff-m);font-size:10px;letter-spacing:.12em;padding:5px 12px;border-radius:var(--rad-s);cursor:pointer;white-space:nowrap;transition:all .2s}
.theme-orb{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--acc);box-shadow:0 0 6px rgba(var(--acc-rgb),.7);animation:orbPulse 2.2s ease-in-out infinite}
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.theme-toggle-btn:hover{border-color:rgba(var(--acc-rgb),.4);color:var(--acc);background:rgba(var(--acc-rgb),.07);transform:translateY(-1px);box-shadow:0 0 12px rgba(var(--acc-rgb),.14)}
.theme-panel{position:absolute;top:calc(100% + 10px);right:0;background:rgba(7,9,15,.97);border:1px solid rgba(var(--acc-rgb),.2);border-radius:10px;padding:14px;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.96);transition:all .22s cubic-bezier(.16,1,.3,1);z-index:10;min-width:200px;box-shadow:0 18px 45px rgba(0,0,0,.65),0 0 22px rgba(var(--acc-rgb),.09);backdrop-filter:blur(22px)}
.theme-panel.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.tp-label{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.22em;color:var(--txt3);margin-bottom:10px}
.tp-swatches{display:flex;gap:9px}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s}
.swatch:hover{transform:scale(1.35);border-color:rgba(255,255,255,.65);box-shadow:0 0 12px var(--sw,#a855f7)}
.swatch.active{transform:scale(1.2);border-color:rgba(255,255,255,.8);box-shadow:0 0 16px var(--sw,#a855f7)}
.nav-premium-btn{display:flex;align-items:center;gap:6px;padding:6px 15px;font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;font-weight:700;color:#000;background:linear-gradient(135deg,#f59e0b,#fbbf24,#f59e0b);background-size:200% 100%;border:1px solid #f59e0b;border-radius:var(--rad-s);white-space:nowrap;text-decoration:none;box-shadow:0 0 14px rgba(245,158,11,.38),inset 0 1px 0 rgba(255,255,255,.22);position:relative;overflow:hidden;transition:box-shadow .2s,transform .15s,filter .2s;animation:premGradShift 3s linear infinite}
@keyframes premGradShift{0%{background-position:0%}100%{background-position:200%}}
.prem-shimmer{position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-14deg);animation:premShimmer 2.8s ease-in-out infinite 1.2s;pointer-events:none}
@keyframes premShimmer{0%{left:-55%}100%{left:160%}}
.nav-premium-btn:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(245,158,11,.65),0 6px 22px rgba(245,158,11,.28);filter:brightness(1.1)}
.nav-config-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;font-family:var(--ff-m);font-size:10px;letter-spacing:.12em;color:var(--txt2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--rad-s);white-space:nowrap;cursor:pointer;transition:all .2s}
.cfg-spin{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.nav-config-btn:hover{border-color:rgba(var(--acc-rgb),.4);color:var(--acc);background:rgba(var(--acc-rgb),.07);transform:translateY(-1px);box-shadow:0 0 12px rgba(var(--acc-rgb),.12)}
.nav-config-btn:hover .cfg-spin{transform:rotate(90deg)}
.nav-user{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:30px;cursor:default;transition:all .2s}
.nav-user:hover{border-color:rgba(var(--acc-rgb),.3);background:rgba(var(--acc-rgb),.05);box-shadow:0 0 12px rgba(var(--acc-rgb),.09)}
.nav-av{width:28px;height:28px;border-radius:50%;background:rgba(var(--acc-rgb),.15);border:1.5px solid rgba(var(--acc-rgb),.35);display:flex;align-items:center;justify-content:center;font-family:var(--ff-d);font-size:18px;color:var(--acc);flex-shrink:0;position:relative}
.avatar-online-ring{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(34,197,94,0);animation:onlineRing 2.8s ease-in-out infinite;pointer-events:none}
@keyframes onlineRing{0%{border-color:rgba(34,197,94,0);transform:scale(1)}30%{border-color:rgba(34,197,94,.55)}70%{border-color:rgba(34,197,94,0);transform:scale(1.35)}100%{border-color:rgba(34,197,94,0);transform:scale(1)}}
.nav-user-info{display:flex;flex-direction:column;gap:1px}
.nav-uname{font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;color:var(--txt);text-transform:uppercase;line-height:1}
.nav-user-status{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;color:#22c55e;text-transform:uppercase;line-height:1;display:flex;align-items:center;gap:3px}
.nav-user-status::before{content:'';width:4px;height:4px;border-radius:50%;background:#22c55e;box-shadow:0 0 5px #22c55e;flex-shrink:0;animation:statusBlink 2s ease-in-out infinite}
@keyframes statusBlink{0%,100%{opacity:1}50%{opacity:.25}}
.nav-logout-btn{background:transparent;border:none;color:var(--txt3);cursor:pointer;font-size:14px;transition:color .2s;padding:2px 4px;flex-shrink:0}
.nav-logout-btn:hover{color:#ef4444}
.navbar.scrolled{border-bottom-color:rgba(var(--acc-rgb),.18);box-shadow:0 4px 30px rgba(0,0,0,.55),0 1px 0 rgba(var(--acc-rgb),.08)}
.nav-hamburger{display:none;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--rad-s);color:var(--txt2);cursor:pointer;font-size:18px;transition:all .2s}
.nav-hamburger:hover{border-color:rgba(var(--acc-rgb),.4);color:var(--acc)}
@media(max-width:960px){.nav-links{display:none}.nav-hamburger{display:flex}.nav-home-btn{display:none}}

/* ══ GAME SELECT ══════════════════════════ */
.game-select {
    position: relative; z-index: 10;
    min-height: calc(100vh - var(--nav-h));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3rem 2rem 4rem; gap: 3rem;
}

.gs-header { text-align: center; }

.gs-eyebrow {
    display: flex; align-items: center; gap: 1rem; justify-content: center;
    font-family: var(--ff-m); font-size: .6rem; letter-spacing: .28em;
    color: var(--txt3); margin-bottom: 1rem;
}
.eyebar { display: block; width: 40px; height: 1px; background: var(--txt3); }

.gs-title {
    font-family: var(--ff-d);
    font-size: clamp(3.5rem, 9vw, 7rem);
    letter-spacing: .05em; line-height: .9;
    margin-bottom: .8rem;
    display: flex; gap: .5rem; justify-content: center;
}
.gt-white  { color: #fff; }
.gt-accent {
    color: var(--acc);
    text-shadow: 0 0 30px rgba(var(--acc-rgb),.5), 0 0 60px rgba(var(--acc-rgb),.2);
    transition: text-shadow .3s;
}

.gs-sub { font-size: 1rem; color: var(--txt2); margin-bottom: .8rem; }

.gs-tags { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.gs-tag {
    font-family: var(--ff-m); font-size: .55rem; letter-spacing: .1em;
    padding: .28rem .8rem; border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border); color: var(--txt2);
}

/* ── GAME GRID ─────────────────────────── */
.game-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1.2rem; width: 100%; max-width: 1160px;
}
@media(max-width:900px) { .game-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:520px) { .game-grid { grid-template-columns: 1fr; } }

.game-tile {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(14,18,32,.95) 0%, rgba(9,12,20,.98) 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    padding: 2rem 1.6rem 1.8rem;
    display: flex; flex-direction: column; gap: .5rem;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .4s;
    box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    cursor: pointer;
}
.game-tile::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(var(--gc-rgb),.1) 0%, transparent 65%);
    pointer-events: none; transition: opacity .4s;
    opacity: 0;
}
.game-tile::after {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(var(--gc-rgb),.04) 0%, transparent 50%);
    pointer-events: none; border-radius: 18px;
}
.game-tile:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(var(--gc-rgb),.4);
    box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 40px rgba(var(--gc-rgb),.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.game-tile:hover::before { opacity: 1; }

.gt-val { --gc: var(--val); --gc-rgb: var(--val-rgb); }
.gt-cs2 { --gc: var(--cs2); --gc-rgb: var(--cs2-rgb); }
.gt-fn  { --gc: var(--fn);  --gc-rgb: var(--fn-rgb); }
.gt-dl  { --gc: var(--dl);  --gc-rgb: var(--dl-rgb); }

.gt-stripe {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gc) 30%, var(--gc) 70%, transparent 100%);
    box-shadow: 0 0 16px var(--gc), 0 0 30px rgba(var(--gc-rgb),.4);
    transition: box-shadow .3s;
}
.game-tile:hover .gt-stripe {
    box-shadow: 0 0 24px var(--gc), 0 0 50px rgba(var(--gc-rgb),.6);
}
.gt-corner { position: absolute; width: 10px; height: 10px; }
.gt-corner.tl { top:10px; left:10px;   border-top:1px solid rgba(var(--gc-rgb),.4); border-left:1px solid rgba(var(--gc-rgb),.4); }
.gt-corner.br { bottom:10px; right:10px; border-bottom:1px solid rgba(var(--gc-rgb),.4); border-right:1px solid rgba(var(--gc-rgb),.4); }
.gt-glow {
    position: absolute; bottom:-30px; right:-30px;
    width:120px; height:120px; border-radius:50%;
    background: radial-gradient(circle, rgba(var(--gc-rgb),.12) 0%, transparent 70%);
    opacity: 0; transition: opacity .35s;
}
.game-tile:hover .gt-glow { opacity: 1; }

.gt-eyebrow-txt {
    font-family:var(--ff-m); font-size:.6rem; letter-spacing:.18em;
    color: rgba(var(--gc-rgb),.7); margin-bottom:.4rem;
    text-transform: uppercase;
}
.gt-icon  {
    font-size: 2.4rem; margin-bottom: .4rem;
    filter: drop-shadow(0 0 12px rgba(var(--gc-rgb),.5));
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s;
}
.game-tile:hover .gt-icon {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 0 20px rgba(var(--gc-rgb),.8));
}
.gt-name  {
    font-family:var(--ff-d); font-size:2rem; letter-spacing:.1em;
    color: #fff; line-height: 1;
    text-shadow: 0 0 20px rgba(var(--gc-rgb),.25);
    transition: text-shadow .3s;
}
.game-tile:hover .gt-name {
    text-shadow: 0 0 30px rgba(var(--gc-rgb),.5);
}
.gt-subs  {
    font-size: 1rem; color: var(--txt3);
    font-family: var(--ff-m); font-size: .68rem; letter-spacing: .08em;
    margin-top: .1rem;
}

.gt-stats {
    display: flex; gap: .6rem; padding-top: 1rem; margin-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.gts-item {
    display: flex; flex-direction: column; gap: .15rem;
    background: rgba(var(--gc-rgb),.06);
    border: 1px solid rgba(var(--gc-rgb),.12);
    border-radius: 8px; padding: .45rem .7rem;
    flex: 1; text-align: center;
    transition: background .2s, border-color .2s;
}
.game-tile:hover .gts-item {
    background: rgba(var(--gc-rgb),.1);
    border-color: rgba(var(--gc-rgb),.22);
}
.gts-item strong { font-family:var(--ff-d); font-size:1.2rem; color:#fff; line-height:1; }
.gts-item span   { font-family:var(--ff-m); font-size:.42rem; letter-spacing:.1em; color:var(--txt3); }

.gt-cta {
    font-family: var(--ff-m); font-size: .72rem; letter-spacing: .2em;
    color: #000; opacity: 0; transform: translateY(6px);
    transition: all .3s cubic-bezier(.34,1.56,.64,1); margin-top: .6rem;
    background: var(--gc); border: none;
    padding: .55rem 1rem; border-radius: 8px;
    text-align: center; width: 100%; display: block;
    pointer-events: none; font-weight: 700;
    box-shadow: 0 4px 16px rgba(var(--gc-rgb),.35);
}
.gt-cta span { display: inline-block; transition: transform .2s; margin-left: 4px; }
.game-tile:hover .gt-cta { opacity: 1; transform: translateY(0); pointer-events: all; }
.game-tile:hover .gt-cta:hover span { transform: translateX(4px); }

/* ══ THEORY PANEL ════════════════════════ */
.theory-panel {
    position: relative; z-index: 10;
    padding: 1rem 1.8rem 4rem;
    max-width: 1180px; margin: 0 auto;
}

.th-header { display:flex; align-items:center; padding:.75rem 1.2rem; margin-bottom:1rem; }

.th-back-btn {
    display:flex; align-items:center; gap:.4rem;
    font-family:var(--ff-m); font-size:.72rem; letter-spacing:.18em;
    background:none; border:1px solid var(--border);
    color:var(--txt3); border-radius:var(--r);
    padding:.4rem .8rem; cursor:pointer; transition:all .2s;
}
.th-back-btn:hover { border-color:rgba(var(--acc-rgb),.4); color:var(--txt2); }

.th-center { flex:1; display:flex; align-items:center; justify-content:center; gap:.7rem; }
.th-icon { font-size:1.4rem; }
.th-game-name {
    font-family:var(--ff-d); font-size:1.8rem; letter-spacing:.14em;
    color:var(--gc); text-shadow:0 0 18px var(--gc);
}

.th-score-wrap { display:flex; align-items:baseline; gap:.3rem; }
.th-score-num  { font-family:var(--ff-d); font-size:1.8rem; color:var(--gc); line-height:1; }
.th-score-lbl  { font-family:var(--ff-m); font-size:.68rem; color:var(--txt3); }

/* ── TABS ─────────────────────────────── */
.tab-bar {
    display:flex; gap:0; margin-bottom:1.2rem;
    border-bottom:1px solid var(--border); overflow-x:auto;
}
.tab-btn {
    display:flex; align-items:center; gap:.4rem;
    padding:.65rem 1.3rem;
    font-family:var(--ff-m); font-size:.72rem; letter-spacing:.15em;
    background:none; border:none; border-bottom:2px solid transparent;
    color:var(--txt3); transition:all .22s; position:relative; top:1px;
    white-space:nowrap; cursor:pointer;
}
.tab-btn svg { opacity:.5; transition:opacity .2s; }
.tab-btn:hover { color:var(--txt2); }
.tab-btn:hover svg { opacity:.8; }
.tab-btn.active { color:var(--gc); border-bottom-color:var(--gc); text-shadow:0 0 10px var(--gc); }
.tab-btn.active svg { opacity:1; }

.tab-panel { display:none; animation:tabIn .3s ease; }
.tab-panel.active { display:block; }
@keyframes tabIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── MAP TAB ─────────────────────────── */
.map-layout { display:grid; grid-template-columns:1fr 340px; gap:1.2rem; align-items:start; }
@media(max-width:960px) { .map-layout { grid-template-columns:1fr; } }

.map-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1.2rem; border-bottom:1px solid var(--border);
}
.map-label {
    font-family:var(--ff-d); font-size:1.1rem; letter-spacing:.2em;
    color:var(--gc); text-shadow:0 0 10px var(--gc);
}
.map-nav { display:flex; align-items:center; gap:.5rem; }
.map-nav-btn {
    background:rgba(255,255,255,.04); border:1px solid var(--border);
    color:var(--txt2); width:26px; height:26px; border-radius:var(--r);
    font-size:1.1rem; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s;
}
.map-nav-btn:hover { background:rgba(var(--gc-rgb),.1); border-color:var(--gc); color:var(--gc); }
.map-nav-idx { font-family:var(--ff-m); font-size:.68rem; color:var(--txt3); }

.map-svg-wrap { padding:1rem; background:rgba(0,0,0,.2); min-height:250px; }

.map-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:.65rem 1.2rem; border-top:1px solid var(--border); flex-wrap:wrap; gap:.5rem;
}
.map-legend { display:flex; gap:.8rem; flex-wrap:wrap; }
.ml-item { display:flex; align-items:center; gap:.3rem; font-size:.92rem; color:var(--txt3); }
.ml-dot  { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

.map-prog-wrap { display:flex; align-items:center; gap:.5rem; }
.map-prog-track { width:70px; height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; }
.map-prog-fill  {
    height:100%; width:0%; border-radius:2px;
    background:var(--gc); box-shadow:0 0 6px var(--gc);
    transition:width .5s ease;
}
.map-prog-txt { font-family:var(--ff-m); font-size:.64rem; color:var(--txt3); }

.map-zone {
    fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.12);
    stroke-width:1; transition:fill .2s, stroke .2s;
}
.map-zone:hover, .map-zone.active {
    fill:rgba(var(--gc-rgb),.12); stroke:rgba(var(--gc-rgb),.7); stroke-width:1.5;
}
.map-zone.answered       { fill:rgba(0,230,118,.1);  stroke:rgba(0,230,118,.5); }
.map-zone.answered-wrong { fill:rgba(255,70,85,.1);   stroke:rgba(255,70,85,.5); }

.map-zone-lbl {
    font-family:'Share Tech Mono',monospace; font-size:9.5px;
    fill:rgba(255,255,255,.65); text-anchor:middle;
    pointer-events:none; letter-spacing:.06em;
}

/* Map question panel */
.map-qpanel { overflow:hidden; position:sticky; top:calc(var(--nav-h) + 70px); }
.mqp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1.1rem; border-bottom:1px solid var(--border);
    background:rgba(0,0,0,.1);
}
.mqp-zone { font-family:var(--ff-m); font-size:.72rem; letter-spacing:.15em; color:var(--gc); }
.mqp-tag  { font-family:var(--ff-m); font-size:.62rem; color:var(--txt3); letter-spacing:.12em; }
.mqp-body { padding:1.1rem; display:flex; flex-direction:column; gap:.75rem; }
.mqp-question { font-size:1.1rem; font-weight:600; line-height:1.55; color:var(--txt); min-height:50px; }

/* ── OPTION BUTTONS ──────────────────── */
.opt-list { display:flex; flex-direction:column; gap:.45rem; }
.opt-btn {
    display:flex; align-items:flex-start; gap:.65rem; padding:.65rem .9rem;
    background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07);
    border-radius:var(--r); color:var(--txt2);
    font-family:var(--ff-b); font-size:1.18rem; font-weight:500;
    text-align:left; cursor:pointer; transition:all .18s;
}
.opt-btn:hover:not(:disabled) {
    background:rgba(var(--gc-rgb),.08); border-color:rgba(var(--gc-rgb),.3);
    color:var(--txt); transform:translateX(3px);
}
.opt-btn:disabled { pointer-events:none; }
.opt-btn.correct { background:rgba(0,230,118,.07) !important; border-color:rgba(0,230,118,.4) !important; color:#b3ffd6 !important; }
.opt-btn.wrong   { background:rgba(255,70,85,.07)  !important; border-color:rgba(255,70,85,.4)  !important; color:#ffcdd2 !important; }

.opt-letter {
    font-family:var(--ff-m); font-size:.62rem; font-weight:700;
    min-width:20px; height:20px; border-radius:3px;
    background:rgba(255,255,255,.05);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:var(--txt3); margin-top:1px; transition:all .18s;
}
.opt-btn.correct .opt-letter { background:#00e676; color:#000; }
.opt-btn.wrong   .opt-letter { background:#ff4655; color:#fff; }

/* ── FEEDBACK ────────────────────────── */
.feedback-box { padding:.8rem 1rem; border-radius:var(--r); font-size:1.1rem; line-height:1.55; }
.feedback-box.correct { background:rgba(0,230,118,.06); border:1px solid rgba(0,230,118,.2); color:#c3ffd8; }
.feedback-box.wrong   { background:rgba(255,70,85,.06);  border:1px solid rgba(255,70,85,.2);  color:#ffd0d3; }
.feedback-box strong  { display:block; margin-bottom:.3rem; font-family:var(--ff-m); font-size:.72rem; letter-spacing:.12em; }

/* ── NEXT BUTTON ─────────────────────── */
.next-btn {
    padding:.7rem 1rem;
    background:rgba(var(--gc-rgb),.1); border:1px solid rgba(var(--gc-rgb),.3);
    border-radius:var(--r); color:#fff;
    font-family:var(--ff-m); font-size:.76rem; letter-spacing:.18em;
    cursor:pointer; transition:all .22s;
}
.next-btn:hover { background:rgba(var(--gc-rgb),.18); transform:translateY(-1px); }

/* ── SCENARIOS ───────────────────────── */
.sit-container { max-width:720px; margin:0 auto; }
.sit-card { overflow:hidden; }
.sit-card-head {
    display:flex; align-items:center; gap:.9rem;
    padding:.8rem 1.3rem; border-bottom:1px solid var(--border);
    background:rgba(0,0,0,.1);
}
.sit-num { font-family:var(--ff-d); font-size:1.7rem; color:var(--gc); opacity:.4; line-height:1; }
.sit-prog-track {
    flex:1; height:3px; background:rgba(255,255,255,.06);
    border-radius:2px; overflow:hidden;
}
.sit-prog-fill {
    height:100%; width:0%;
    background:linear-gradient(90deg,var(--gc),var(--acc));
    box-shadow:0 0 8px var(--gc); transition:width .6s ease;
}
.sit-score-txt { font-family:var(--ff-m); font-size:.76rem; color:var(--txt3); }

.sit-card-body { padding:1.3rem; display:flex; flex-direction:column; gap:.9rem; }
.sit-badges { display:flex; gap:.5rem; flex-wrap:wrap; }
.sit-badge {
    font-family:var(--ff-m); font-size:.62rem; letter-spacing:.1em;
    padding:.22rem .6rem; border-radius:20px; font-weight:700;
}
.sit-badge.cat  { background:rgba(168,85,247,.1); color:#a855f7; border:1px solid rgba(168,85,247,.25); }
.sit-badge.easy { background:rgba(34,197,94,.1);  color:#22c55e;  border:1px solid rgba(34,197,94,.25); }
.sit-badge.med  { background:rgba(245,158,11,.1); color:#f59e0b;  border:1px solid rgba(245,158,11,.25); }
.sit-badge.hard { background:rgba(255,70,85,.1);  color:#ff4655;  border:1px solid rgba(255,70,85,.25); }

.sit-question { font-size:1.18rem; font-weight:700; line-height:1.55; color:var(--txt); }
.sit-context {
    font-size:1.1rem; color:var(--txt2); line-height:1.6;
    padding:.7rem .9rem;
    border-left:2px solid rgba(var(--gc-rgb),.5);
    background:rgba(var(--gc-rgb),.04);
    border-radius:0 var(--r) var(--r) 0;
}

/* ── CONCEPTS ────────────────────────── */
.concepts-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.cf-btn {
    font-family:var(--ff-m); font-size:.64rem; letter-spacing:.1em;
    padding:.28rem .75rem; border-radius:20px;
    background:rgba(255,255,255,.03); border:1px solid var(--border);
    color:var(--txt3); cursor:pointer; transition:all .2s;
}
.cf-btn:hover, .cf-btn.active {
    background:rgba(var(--gc-rgb),.1); border-color:rgba(var(--gc-rgb),.3); color:var(--gc);
}
.concepts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }

.concept-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--r2); overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
    transition:transform .28s ease, border-color .28s;
    animation:cardIn .4s ease both;
}
.concept-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(var(--gc-rgb),.025) 0%,transparent 60%);
    pointer-events:none;
}
.concept-card { position:relative; }
.concept-card:hover { transform:translateY(-4px); border-color:rgba(var(--gc-rgb),.3); }
@keyframes cardIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.cc-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:.8rem 1rem; border-bottom:1px solid var(--border);
    background:rgba(var(--gc-rgb),.04);
}
.cc-tag {
    font-family:var(--ff-m); font-size:.62rem; letter-spacing:.12em;
    padding:.2rem .55rem; border-radius:20px;
    background:rgba(var(--gc-rgb),.1); color:var(--gc);
    border:1px solid rgba(var(--gc-rgb),.2);
}
.cc-level { font-size:.75rem; color:var(--txt3); }
.cc-body  { padding:.9rem 1rem; }
.cc-title { font-family:var(--ff-d); font-size:1.1rem; letter-spacing:.05em; color:#fff; margin-bottom:.45rem; line-height:1; }
.cc-text  { font-size:1.1rem; color:var(--txt2); line-height:1.6; }
.cc-tip {
    margin:0 1rem .9rem;
    padding:.6rem .8rem;
    background:rgba(255,215,0,.04); border:1px solid rgba(255,215,0,.15);
    border-radius:var(--r); font-size:.92rem; color:rgba(255,215,0,.75); line-height:1.5;
}
.cc-tip::before { content:'💡 '; }

/* ── QUIZ ────────────────────────────── */
.quiz-container { max-width:660px; margin:0 auto; }
.quiz-card { overflow:hidden; }

.quiz-timer-bar { height:3px; background:rgba(255,255,255,.06); }
.quiz-timer-fill {
    height:100%; width:100%;
    background:linear-gradient(90deg, var(--gc), var(--acc));
    box-shadow:0 0 8px var(--gc); transition:width linear;
}

.quiz-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1.3rem; border-bottom:1px solid var(--border);
    background:rgba(0,0,0,.1);
}
.quiz-tag  { font-family:var(--ff-m); font-size:.76rem; letter-spacing:.12em; color:var(--gc); }
.quiz-countdown-wrap { display:flex; align-items:baseline; gap:.25rem; }
.quiz-countdown { font-family:var(--ff-d); font-size:1.7rem; color:var(--txt); line-height:1; }
.quiz-cd-lbl    { font-family:var(--ff-m); font-size:.45rem; color:var(--txt3); letter-spacing:.1em; }

.quiz-body { padding:1.3rem; display:flex; flex-direction:column; gap:1rem; }
.quiz-question { font-size:1.18rem; font-weight:700; line-height:1.55; color:var(--txt); }

.quiz-opts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media(max-width:560px) { .quiz-opts { grid-template-columns:1fr; } }

.quiz-foot {
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1.3rem; border-top:1px solid var(--border);
    background:rgba(0,0,0,.08);
}
.quiz-foot-score { font-family:var(--ff-m); font-size:.76rem; color:var(--txt3); }
.quiz-streak     { font-family:var(--ff-m); font-size:.76rem; color:#f59e0b; letter-spacing:.1em; }

/* ── RESULT OVERLAY ──────────────────── */
.result-overlay {
    position:fixed; inset:0; z-index:500;
    display:flex; align-items:center; justify-content:center;
    background:rgba(2,5,9,.85); backdrop-filter:blur(8px);
    animation:fadeIn .35s ease;
}
.result-overlay.hidden { display:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.result-box {
    max-width:480px; width:90%;
    padding:2rem 1.8rem; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:.9rem;
    animation:popIn .45s cubic-bezier(.2,.8,.2,1);
    position:relative; overflow:hidden;
}
@keyframes popIn { from{transform:scale(.82);opacity:0} to{transform:scale(1);opacity:1} }

.result-stripe {
    position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--gc),var(--acc),var(--gc));
    background-size:200%;
    animation:stripeFlow 2s linear infinite;
}
@keyframes stripeFlow { 0%{background-position:0%} 100%{background-position:200%} }

.result-icon   { font-size:3rem; filter:drop-shadow(0 0 16px rgba(255,255,255,.3)); }
.result-title  { font-family:var(--ff-m); font-size:.76rem; letter-spacing:.28em; color:var(--acc); }
.result-pct    { font-family:var(--ff-d); font-size:4.5rem; line-height:1; color:var(--gc); text-shadow:0 0 30px var(--gc); }
.result-stars  { font-size:1.4rem; letter-spacing:.4rem; }

.result-breakdown {
    display:flex; align-items:center; gap:1.2rem;
    padding:.75rem 1.2rem; width:100%;
    background:rgba(0,0,0,.2); border-radius:var(--r); border:1px solid var(--border);
}
.rb-item { flex:1; text-align:center; }
.rb-val  { display:block; font-family:var(--ff-d); font-size:1.4rem; color:var(--txt); line-height:1; }
.rb-lbl  { display:block; font-family:var(--ff-m); font-size:.48rem; color:var(--txt3); letter-spacing:.1em; margin-top:3px; }
.rb-div  { width:1px; height:28px; background:var(--border); }
.result-comment { font-size:1.18rem; color:var(--txt2); line-height:1.5; max-width:320px; }

.result-btns { display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
.result-btn {
    padding:.65rem 1.5rem;
    background:rgba(255,255,255,.04); border:1px solid var(--border);
    border-radius:var(--r); color:var(--txt2);
    font-family:var(--ff-m); font-size:.76rem; letter-spacing:.15em;
    cursor:pointer; transition:all .2s;
}
.result-btn:hover { border-color:rgba(255,255,255,.2); color:var(--txt); }
.result-btn.primary {
    background:rgba(var(--gc-rgb),.12); border-color:rgba(var(--gc-rgb),.35); color:#fff;
    box-shadow:0 4px 16px rgba(var(--gc-rgb),.15);
}
.result-btn.primary:hover { background:rgba(var(--gc-rgb),.2); }

/* ══ CUSTOM CURSOR — Accent reactive ═══════════════════════════ */
body { cursor: none; }

#cursor {
    position:fixed; pointer-events:none; z-index:99999;
    transform:translate(-50%,-50%); transition:transform .05s;
}
#cursor svg { display:block; }

/* El punto central usa var(--acc) directamente */
#cursor-dot {
    position:fixed; width:4px; height:4px;
    background: var(--acc);
    border-radius:50%;
    pointer-events:none; z-index:100000;
    transform:translate(-50%,-50%);
    box-shadow: 0 0 6px var(--acc);
    transition: transform .02s, background .3s, box-shadow .3s;
}

/* Al hacer click cambia a rojo igual que antes */
body.clicking #cursor     { transform:translate(-50%,-50%) scale(1.4); }
body.clicking #cursor-dot { transform:translate(-50%,-50%) scale(2); background:#ff2d55; box-shadow: 0 0 8px #ff2d55; }

/* ── UTILITIES ───────────────────────── */
.hidden { display: none !important; }

/* ── RESPONSIVE ──────────────────────── */
@media(max-width:640px) {
    .theory-panel { padding:.8rem 1rem 3rem; }
    .top-nav { padding:.5rem 1rem; }
    .nav-right-group { gap:5px; }
    .nav-premium-btn span, .nav-config-btn span { display:none; }
}
@media(max-width:900px) {
    body { cursor: auto; }
    #cursor, #cursor-dot { display: none; }
}