:root {
  --bg: #07070F;
  --bg2: #0D0D1A;
  --bg3: #12122A;
  --purple: #7C3AED;
  --purple2: #9D5FF3;
  --purple3: #5B21B6;
  --neon: #A855F7;
  --neon2: #C084FC;
  --cyan: #22D3EE;
  --pink: #EC4899;
  --green: #10B981;
  --yellow: #F59E0B;
  --red: #EF4444;
  --text: #F1F0FF;
  --text2: #A89FC8;
  --glass: rgba(124,58,237,0.08);
  --glass2: rgba(255,255,255,0.04);
  --border: rgba(124,58,237,0.3);
  --glow: 0 0 20px rgba(124,58,237,0.5);
  --glow2: 0 0 40px rgba(124,58,237,0.3);
}
body.light-theme{
  --bg:#F5F7FF;
  --bg2:#E9ECFF;
  --bg3:#DEE4FF;
  --text:#111827;
  --text2:#4B5563;
  --glass:rgba(79,70,229,0.08);
  --glass2:rgba(255,255,255,0.78);
  --border:rgba(99,102,241,0.26);
  --glow:0 0 18px rgba(99,102,241,0.22);
  --glow2:0 0 35px rgba(79,70,229,0.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif}
canvas{display:block}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:opacity .5s,transform .5s}
.screen.hidden{opacity:0;pointer-events:none;transform:scale(.97)}
#particle-bg{position:fixed;inset:0;z-index:0}

/* LOADING */
#loading-screen{flex-direction:column;gap:2rem;z-index:100;background:var(--bg)}
.logo-container{text-align:center}
.logo-title{font-family:'Orbitron',sans-serif;font-size:3.5rem;font-weight:900;background:linear-gradient(135deg,var(--purple2),var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;letter-spacing:4px;filter:drop-shadow(0 0 30px rgba(124,58,237,0.8))}
.logo-sub{font-size:.9rem;color:var(--text2);letter-spacing:6px;text-transform:uppercase;margin-top:.3rem}
.progress-wrap{width:340px;background:rgba(255,255,255,0.06);border-radius:100px;height:6px;overflow:hidden;border:1px solid var(--border)}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:100px;transition:width .1s;box-shadow:0 0 12px var(--purple)}
.loading-quote{font-size:.85rem;color:var(--text2);text-align:center;max-width:320px;font-style:italic;min-height:2.5rem;transition:opacity .4s}
.loading-pct{font-family:'Orbitron',sans-serif;font-size:.75rem;color:var(--neon);letter-spacing:2px}

/* NAME ENTRY */
#name-screen{flex-direction:column;gap:1.5rem;z-index:20}
.entry-card{background:var(--glass2);border:1px solid var(--border);border-radius:24px;padding:2.5rem;width:min(500px,90vw);backdrop-filter:blur(20px);box-shadow:var(--glow2)}
.entry-title{font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:700;color:var(--neon2);margin-bottom:.4rem}
.entry-sub{font-size:.85rem;color:var(--text2);margin-bottom:1.5rem}
.name-input{width:100%;padding:.9rem 1.2rem;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:'Nunito',sans-serif;font-size:1rem;outline:none;transition:border .3s,box-shadow .3s}
.name-input:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(124,58,237,0.2)}
.btn{padding:.8rem 2rem;background:linear-gradient(135deg,var(--purple),var(--purple3));border:none;border-radius:12px;color:#fff;font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .3s;box-shadow:var(--glow);letter-spacing:1px}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(124,58,237,0.7)}
.btn:active{transform:translateY(0)}
.btn-secondary{background:transparent;border:1px solid var(--border);box-shadow:none;color:var(--text2)}
.btn-secondary:hover{border-color:var(--purple2);color:var(--text);box-shadow:var(--glow)}
.avatar-toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer;color:var(--text2);font-size:.85rem;margin-top:.8rem;user-select:none;width:fit-content}
.avatar-toggle:hover{color:var(--neon2)}
.avatar-section{max-height:0;overflow:hidden;transition:max-height .4s ease}
.avatar-section.open{max-height:400px}
.avatar-style-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0 .6rem}
.style-tab{padding:.3rem .7rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:.7rem;cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif}
.style-tab.active{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 0 10px rgba(124,58,237,0.5)}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;max-height:180px;overflow-y:auto;padding-right:.3rem}
.avatar-grid::-webkit-scrollbar{width:4px}
.avatar-grid::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px}
.avatar-item{width:50px;height:50px;border-radius:12px;border:2px solid transparent;cursor:pointer;overflow:hidden;transition:all .2s;background:rgba(255,255,255,0.05)}
.avatar-item:hover{border-color:var(--purple2);transform:scale(1.08)}
.avatar-item.selected{border-color:var(--neon);box-shadow:0 0 12px rgba(168,85,247,0.6)}
.avatar-item img{width:100%;height:100%}
.selected-avatar{width:60px;height:60px;border-radius:50%;border:3px solid var(--neon);overflow:hidden;margin-bottom:.5rem;box-shadow:0 0 20px rgba(168,85,247,0.5)}
.selected-avatar img{width:100%;height:100%}

/* LEVEL SELECT */
#level-screen{flex-direction:column;gap:1.5rem;z-index:20}
.level-title{font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:900;text-align:center;background:linear-gradient(135deg,var(--neon2),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.level-cards{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.level-card{background:var(--glass2);border:1px solid var(--border);border-radius:20px;padding:1.8rem 1.5rem;width:160px;text-align:center;cursor:pointer;transition:all .3s;backdrop-filter:blur(20px)}
.level-card:hover{transform:translateY(-5px);border-color:var(--purple2);box-shadow:var(--glow)}
.level-card.selected{border-color:var(--neon);background:rgba(124,58,237,0.15);box-shadow:0 0 30px rgba(168,85,247,0.4)}
.level-icon{font-size:2.5rem;margin-bottom:.8rem}
.level-name{font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;margin-bottom:.4rem}
.level-desc{font-size:.72rem;color:var(--text2);line-height:1.5}

/* HUB */
#hub-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto;z-index:20}
#hub-screen::-webkit-scrollbar{width:4px}
#hub-screen::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px}
.navbar{position:sticky;top:0;z-index:50;background:rgba(7,7,15,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.8rem 2rem;display:flex;align-items:center;gap:1rem}
body.light-theme .navbar{background:rgba(255,255,255,0.88)}
.nav-logo{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:900;background:linear-gradient(135deg,var(--purple2),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex:1}
.nav-greeting{font-size:.95rem;color:var(--text2);background:rgba(124,58,237,.1);padding:4px 12px;border-radius:8px;border:1px solid rgba(124,58,237,.2)}
.nav-greeting span{color:var(--neon2);font-weight:700}
.nav-best{font-family:'Orbitron',sans-serif;font-size:.75rem;color:var(--yellow);display:flex;align-items:center;gap:.3rem}
.nav-btn{background:none;border:1px solid var(--border);border-radius:10px;color:var(--text2);padding:.4rem .7rem;cursor:pointer;font-size:.85rem;transition:all .2s}
.nav-btn:hover{border-color:var(--purple2);color:var(--neon2)}
.hub-content{padding:2rem;max-width:1100px;margin:0 auto;width:100%}
.hero{background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(34,211,238,0.06));border:1px solid var(--border);border-radius:24px;padding:2.5rem;margin-bottom:2rem;display:flex;align-items:center;gap:2rem;backdrop-filter:blur(20px);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(124,58,237,0.1),transparent 60%)}
.hero-avatar{width:80px;height:80px;border-radius:50%;border:3px solid var(--neon);overflow:hidden;box-shadow:0 0 25px rgba(168,85,247,0.5);flex-shrink:0}
.hero-avatar img{width:100%;height:100%}
.hero-info{flex:1;position:relative}
.hero-name{font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:900;background:linear-gradient(135deg,var(--text),var(--neon2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-rank{display:flex;align-items:center;gap:.5rem;margin:.3rem 0}
.rank-badge{padding:.2rem .7rem;border-radius:100px;font-size:.7rem;font-weight:700;font-family:'Orbitron',sans-serif;letter-spacing:1px}
.rank-rookie{background:rgba(107,114,128,0.3);color:#9CA3AF;border:1px solid rgba(107,114,128,0.4)}
.rank-player{background:rgba(59,130,246,0.3);color:#60A5FA;border:1px solid rgba(59,130,246,0.4)}
.rank-pro{background:rgba(124,58,237,0.3);color:var(--neon2);border:1px solid var(--border)}
.rank-legend{background:linear-gradient(135deg,rgba(245,158,11,0.3),rgba(239,68,68,0.3));color:var(--yellow);border:1px solid rgba(245,158,11,0.4)}
.xp-bar-wrap{background:rgba(255,255,255,0.06);border-radius:100px;height:8px;margin-top:.8rem;overflow:hidden}
.xp-bar{height:100%;background:linear-gradient(90deg,var(--purple),var(--neon));border-radius:100px;transition:width .8s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 10px var(--purple)}
.xp-label{font-size:.72rem;color:var(--text2);margin-top:.3rem;display:flex;justify-content:space-between}
.hero-stats{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.stat-chip{background:var(--glass);border:1px solid var(--border);border-radius:10px;padding:.4rem .8rem;text-align:center;font-size:.75rem;width:120px}
.stat-chip strong{font-family:'Orbitron',sans-serif;font-size:1rem;color:var(--neon2);display:block}
.section-title{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;color:var(--text2);letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem;margin-bottom:2rem;align-items:start}
.game-card{background:var(--glass2);border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;transition:all .3s;position:relative;backdrop-filter:blur(20px)}
.game-card:hover:not(.locked){transform:translateY(-5px);border-color:var(--purple2);box-shadow:0 10px 40px rgba(124,58,237,0.3)}
.game-card.locked{opacity:.6;cursor:not-allowed}
.game-banner{height:130px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;overflow:hidden}
.banner-space{background:linear-gradient(135deg,#0a0020 0%,#1a0050 40%,#3b0a8a 70%,#0d0030 100%)}
.banner-space::before{content:'\2728 \2728';position:absolute;font-size:1rem;top:10px;left:10px;opacity:.4}
.banner-space::after{content:'\1f680';position:absolute;font-size:1.5rem;bottom:8px;right:10px;opacity:.3;transform:rotate(-20deg)}
.banner-flappy{background:linear-gradient(135deg,#0a4d6a 0%,#1a8ab5 40%,#0e5b80 70%,#003d6b 100%)}
.banner-flappy::before{content:'\2601\fe0f \2601\fe0f';position:absolute;font-size:1.2rem;top:8px;right:12px;opacity:.4}
.banner-flappy::after{content:'\1f333';position:absolute;font-size:1.5rem;bottom:5px;left:10px;opacity:.3}
.banner-asteroid{background:linear-gradient(135deg,#0a0a1a 0%,#1a1a4e 40%,#3a1a7e 70%,#0d0d2e 100%)}
.banner-asteroid::before{content:'\2b50 \2b50 \2b50';position:absolute;font-size:.7rem;top:10px;left:12px;opacity:.35;letter-spacing:8px}
.banner-asteroid::after{content:'\2604\fe0f';position:absolute;font-size:1.5rem;bottom:8px;right:12px;opacity:.3;transform:rotate(30deg)}
.banner-whack{background:linear-gradient(135deg,#0d2a00 0%,#1a5a0a 40%,#2d8a20 70%,#1a4a05 100%)}
.banner-whack::before{content:'\1f43b \1f43b';position:absolute;font-size:1rem;top:8px;right:10px;opacity:.35}
.banner-whack::after{content:'\1f573\fe0f';position:absolute;font-size:1.3rem;bottom:8px;left:12px;opacity:.3}
.banner-coming{background:linear-gradient(135deg,#1a1a1a,#2a2a2a)}

/* DINO JUMP STYLES */
.banner-dino{background:linear-gradient(135deg,#0a0f0a 0%,#0d1a10 40%,#1a3322 70%,#0a0f0a 100%)}
.banner-dino::before{content:'\1f335 \1f335';position:absolute;font-size:1rem;top:8px;right:10px;opacity:.35}
.banner-dino::after{content:'\1f4a8';position:absolute;font-size:1.3rem;bottom:8px;left:12px;opacity:.3}

/* ZOMBIE SHOOTER STYLES */
.banner-zombie{background:linear-gradient(135deg,#1a0505 0%,#3a0a0a 40%,#5a1010 70%,#1a0505 100%)}
.banner-zombie::before{content:'\1f52b';position:absolute;font-size:1.2rem;top:8px;right:10px;opacity:.4;transform:rotate(-15deg)}
.banner-zombie::after{content:'\1fa78';position:absolute;font-size:1.5rem;bottom:8px;left:10px;opacity:.3}
.game-card-info{padding:1rem}
.game-name{font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:700;margin-bottom:.3rem}
.game-desc{font-size:.75rem;color:var(--text2);line-height:1.5;margin-bottom:.6rem}
.game-best{font-family:'Orbitron',sans-serif;font-size:.7rem;color:var(--yellow)}
.coming-badge{position:absolute;top:.8rem;right:.8rem;background:rgba(107,114,128,0.5);border:1px solid rgba(107,114,128,0.4);border-radius:8px;padding:.2rem .6rem;font-size:.65rem;font-family:'Orbitron',sans-serif;color:#9CA3AF;letter-spacing:1px}
.hub-bottom{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}
.leaderboard-card,.stats-card{background:var(--glass2);border:1px solid var(--border);border-radius:20px;padding:1.5rem;backdrop-filter:blur(20px)}
.lb-entry{display:flex;align-items:center;gap:.8rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.lb-entry:last-child{border-bottom:none}
.lb-rank{font-family:'Orbitron',sans-serif;font-size:.8rem;font-weight:700;width:24px;text-align:center}
.lb-rank.gold{color:var(--yellow)}
.lb-rank.silver{color:#94A3B8}
.lb-rank.bronze{color:#92400E}
.lb-name{flex:1;font-size:.85rem}
.lb-score{font-family:'Orbitron',sans-serif;font-size:.8rem;color:var(--neon2)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.5rem}
.stat-box{background:rgba(255,255,255,0.03);border-radius:12px;padding:.8rem;text-align:center}
.stat-box-val{font-family:'Orbitron',sans-serif;font-size:1.3rem;font-weight:700;color:var(--neon2)}
.stat-box-label{font-size:.7rem;color:var(--text2);margin-top:.2rem}

/* SETTINGS PANEL */
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.settings-overlay.hidden{display:none}
.settings-panel{background:#12122A;border:1px solid var(--border);border-radius:24px;padding:2rem;width:min(420px,90vw);box-shadow:var(--glow2)}
body.light-theme .settings-overlay{background:rgba(15,23,42,0.3)}
body.light-theme .settings-panel{background:#F8FAFF}
.settings-title{font-family:'Orbitron',sans-serif;font-size:1.2rem;font-weight:700;color:var(--neon2);margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:.9rem;color:var(--text2)}
.toggle{width:44px;height:24px;background:rgba(255,255,255,0.1);border-radius:100px;cursor:pointer;position:relative;transition:background .3s;border:none}
.toggle.on{background:var(--purple)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.toggle.on::after{transform:translateX(20px)}
.volume-slider{width:100px;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,0.1);border-radius:4px;outline:none}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--purple2);border-radius:50%;cursor:pointer}
.emoji-pick{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.emoji-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:.3rem .5rem;font-size:1.2rem;cursor:pointer;transition:all .2s}
.emoji-btn:hover,.emoji-btn.active{background:rgba(124,58,237,0.2);border-color:var(--purple2)}
.btn-danger{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.4);color:var(--red);font-size:.8rem;padding:.5rem 1rem;border-radius:10px;cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif}
.btn-danger:hover{background:rgba(239,68,68,0.25)}
.close-btn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.2rem;transition:color .2s}
.close-btn:hover{color:var(--red)}

/* GAME SCREEN */
#game-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;z-index:30;background:var(--bg)}
.game-hud{display:flex;align-items:center;gap:1rem;padding:.7rem 1.5rem;background:rgba(7,7,15,0.9);border-bottom:1px solid var(--border);backdrop-filter:blur(10px);flex-shrink:0}
body.light-theme .game-hud{background:rgba(255,255,255,0.9)}
.hud-back{background:none;border:1px solid var(--border);border-radius:10px;color:var(--text2);padding:.4rem .8rem;cursor:pointer;font-size:.8rem;transition:all .2s;font-family:'Nunito',sans-serif}
.hud-back:hover{border-color:var(--red);color:var(--red)}
.hud-game-name{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;color:var(--neon2)}
.hud-score{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;color:var(--yellow)}
.hud-lives{display:flex;gap:.2rem;font-size:1rem}
.hud-combo{font-family:'Orbitron',sans-serif;font-size:.8rem;color:var(--pink);font-weight:700}
.hud-right{margin-left:auto;display:flex;align-items:center;gap:.8rem}
.game-canvas-wrap{flex:1;position:relative;overflow:hidden}
#gameCanvasWrap.dino-mobile-split::after{
  content:'';
  position:absolute;
  left:0;right:0;
  top:var(--dino-mobile-split-pct,62%);
  height:1px;
  background:rgba(0,255,136,0.45);
  pointer-events:none;
  z-index:3;
}
#gameCanvas{width:100%;height:100%}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Overlays */
.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);z-index:10}
.game-overlay.hidden{display:none}
body.light-theme .game-overlay{background:rgba(15,23,42,0.55)}
.overlay-title{font-family:'Orbitron',sans-serif;font-size:2rem;font-weight:900;margin-bottom:.5rem;background:linear-gradient(135deg,var(--neon2),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.overlay-score{font-family:'Orbitron',sans-serif;font-size:1.4rem;color:var(--yellow);margin-bottom:1.5rem}
.overlay-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.pause-menu-items{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.5rem;width:200px}
.pause-item{text-align:center;padding:.7rem;background:var(--glass2);border:1px solid var(--border);border-radius:12px;font-size:.85rem;color:var(--text2)}

@keyframes floatIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Mobile Controls - Shared */
.mobile-controls{display:none!important}
.mobile-controls.active{display:block!important}
.hide-desktop{display:none}

/* Hide mobile controls on desktop */
@media(min-width:769px){
  .mobile-controls.active{display:none!important}
}

/* SPACE SHOOTER TUTORIAL */
.tutorial-overlay{position:absolute;inset:0;z-index:50;background:rgba(5,5,16,0.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:1.5rem;backdrop-filter:blur(6px)}
.tutorial-overlay.hidden{display:none}
.tutorial-title{font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:900;color:#22D3EE;text-shadow:0 0 20px rgba(34,211,238,0.6);letter-spacing:2px}
.tutorial-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;max-width:620px;width:100%}
.tutorial-key{display:flex;align-items:center;gap:.7rem;background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.25);border-radius:12px;padding:.7rem 1rem;min-width:0}
.tutorial-key-icon{font-size:1rem;width:85px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,0.2);border:1px solid rgba(124,58,237,0.4);border-radius:10px;font-family:'Orbitron',sans-serif;font-weight:700;color:var(--neon2);white-space:nowrap}
.tutorial-key-label{font-size:.8rem;color:var(--text2);line-height:1.3}
.tutorial-key-label strong{display:block;color:#fff;font-size:.9rem;margin-bottom:2px}
.tutorial-continue{margin-top:.8rem;padding:.7rem 2.5rem;font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple2));border:none;border-radius:12px;cursor:pointer;letter-spacing:1px;transition:transform .2s,box-shadow .2s;box-shadow:0 0 20px rgba(124,58,237,0.4)}
.tutorial-continue:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(124,58,237,0.6)}

/* D-Pad (Asteroid) */
.dpad{position:absolute;bottom:20px;left:20px;display:grid;grid-template-areas:'. up .' 'left center right' '. down .';grid-template-columns:54px 54px 54px;grid-template-rows:54px 54px 54px;gap:4px;z-index:5;opacity:.8}
.dpad-btn{background:rgba(124,58,237,0.25);border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s;color:var(--text2)}
.dpad-btn:active,.dpad-btn.pressed{background:rgba(124,58,237,0.55);color:var(--neon2)}
.dpad-up{grid-area:up}
.dpad-left{grid-area:left}
.dpad-center{grid-area:center}
.dpad-right{grid-area:right}
.dpad-down{grid-area:down}

/* Space Shooter Mobile */
.space-slider-wrap{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);width:80%;max-width:360px;z-index:5}
.space-slider-track{width:100%;height:44px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:22px;position:relative;touch-action:none}
.space-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;cursor:grab;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 0 8px rgba(124,58,237,0.6));transition:left 0s}
.space-bottom-row{position:absolute;bottom:20px;left:20px;display:flex;gap:10px;z-index:5;align-items:center}
.mobile-btn{background:rgba(124,58,237,0.25);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s;color:var(--text2)}
.mobile-btn:active,.mobile-btn.pressed{background:rgba(124,58,237,0.55);color:var(--neon2)}
.mobile-btn-lg{width:62px;height:62px;font-size:1.5rem}
.mobile-btn-bomb{width:56px;height:56px;font-size:1.4rem;background:rgba(255,99,71,0.2);border-color:rgba(255,99,71,0.4)}
.mobile-btn-bomb:active,.mobile-btn-bomb.pressed{background:rgba(255,99,71,0.5)}

/* Fire Button */
.fire-btn{position:absolute;bottom:20px;right:20px;width:70px;height:70px;background:rgba(236,72,153,0.3);border:2px solid rgba(236,72,153,0.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;cursor:pointer;z-index:5;transition:all .2s}
.fire-btn:active{background:rgba(236,72,153,0.6);transform:scale(.95)}

@media(max-width:768px){.hide-desktop{display:flex}.hub-bottom{grid-template-columns:1fr}.games-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.hero{flex-wrap:wrap}.hero-stats{flex-direction:row;align-items:center}.navbar{padding:.6rem .8rem;flex-wrap:wrap;gap:.4rem .5rem}.nav-logo{font-size:.88rem;flex:1 1 auto;order:1}.nav-logo img{width:22px!important;height:22px!important;margin-right:4px!important}.nav-btn{order:2;padding:.25rem .5rem;font-size:.78rem}.nav-greeting{order:3;font-size:.76rem;padding:2px 8px}.nav-best{order:4;font-size:.65rem;margin-left:auto}}

/* Floating popup */
.float-popup{position:absolute;font-family:'Orbitron',sans-serif;font-size:1.2rem;font-weight:700;color:var(--yellow);pointer-events:none;animation:floatUp .9s ease forwards;z-index:20;text-shadow:0 0 10px rgba(245,158,11,0.8)}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(1.3)}}

/* Confetti */
.confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:500;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* Combo flash */
.combo-flash{animation:comboFlash .3s ease}
@keyframes comboFlash{0%,100%{color:var(--pink)}50%{color:var(--yellow);text-shadow:0 0 15px var(--yellow)}}

/* Screen shake */
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,4px)}80%{transform:translate(2px,-4px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.85}}
.shaking{animation:shake .25s ease}

/* TWEMOJI — Styled Emoji Images */
img.emoji{height:1.15em;width:1.15em;margin:0 .06em;vertical-align:-0.15em;display:inline-block;pointer-events:none}
.game-banner img.emoji{height:2.5rem;width:2.5rem;filter:drop-shadow(0 0 8px rgba(255,255,255,0.3))}
.game-banner span img.emoji{height:1rem;width:1rem}
.game-card-info img.emoji{height:1em;width:1em;vertical-align:-0.1em}
.level-icon img.emoji{height:2.2rem;width:2.2rem;filter:drop-shadow(0 0 10px rgba(124,58,237,0.5))}
.nav-btn img.emoji{height:1.1em;width:1.1em}
.tutorial-title img.emoji{height:1.3em;width:1.3em;vertical-align:-0.15em}
.emoji-btn img.emoji{height:1.4em;width:1.4em}
.hud-lives img.emoji{height:1em;width:1em}
.float-popup img.emoji{height:1.2em;width:1.2em}
.lb-rank img.emoji{height:1.1em;width:1.1em}
.overlay-title img.emoji{height:1.2em;width:1.2em}

/* Scrollbar for hub */
#hub-screen{scrollbar-width:thin;scrollbar-color:var(--purple) transparent}

/* ACHIEVEMENTS UI */
.achievements-card { background: var(--glass2); border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem; backdrop-filter: blur(20px); }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.achievement-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; transition: all 0.3s; }
.achievement-item:hover { border-color: var(--purple2); background: rgba(124,58,237,0.1); }
.achievement-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 2rem; border-radius: 50%; background: rgba(0,0,0,0.3); border: 2px solid transparent; flex-shrink: 0; }
.achievement-item.unlocked .achievement-icon { border-color: var(--yellow); box-shadow: 0 0 15px rgba(245,158,11,0.4); background: rgba(245,158,11,0.1); }
.achievement-info { flex: 1; }
.achievement-name { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--neon2); margin-bottom: 0.2rem; }
.achievement-desc { font-size: 0.7rem; color: var(--text2); line-height: 1.4; }
.achievement-item.locked { opacity: 0.5; filter: grayscale(100%); }
.achievement-item.locked .achievement-name { color: var(--text2); }

/* ACHIEVEMENT TOAST */
.achievement-toast { background: rgba(124,58,237,0.9); border: 1px solid var(--neon2); border-radius: 12px; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; backdrop-filter: blur(10px); box-shadow: 0 0 20px rgba(168,85,247,0.5); animation: toastSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.achievement-toast.hide { animation: toastSlideOut 0.5s ease-in forwards; }
.toast-icon { font-size: 2.2rem; filter: drop-shadow(0 0 8px rgba(255,255,255,0.5)); }
.toast-content { display: flex; flex-direction: column; gap: 0.2rem; }
.toast-title { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; }
.toast-name { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastSlideOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(100%) scale(0.9); } }

feature/immersive-themes
/* ====================== MULTI-THEME OVERRIDES ====================== */

/* ====================== DEEP SEA ARCADE - EXACT MATCH ====================== */
body.theme-sea {
    --bg: #020b1a;
    --bg2: #051329;
    --neon: #00d2ff;
    --neon2: #80f8ff;
    --cyan: #22e8ff;
    --text: #ffffff;
    --text2: #a8f4ff;
    --border: rgba(0, 210, 255, 0.5);
    --glow: 0 0 15px rgba(0, 210, 255, 0.2);
    
    /* NEW: Darker blue, higher opacity so text stands out */
    --glass: rgba(2, 11, 26, 0.7);
    --glass2: rgba(2, 11, 26, 0.8);
}
/* 1. The Ocean Background (Coral & Fish) */
body.theme-sea {
    /* REPLACE 'your-ocean-image.jpg' with your actual fish/coral background image */
    background: url('deep\ sea\ bg.png') center bottom / cover no-repeat fixed, linear-gradient(to bottom, #020b1a, #082d4d);
    background-color: var(--bg);
    overflow-x: hidden;
}

/* Disable your old fake dot bubbles */
body.theme-sea::before,
body.theme-sea::after {
    display: none; 
}

/* 2. True Frosted Glass Panels */
/* 2. True Frosted Glass Panels - HIGH CONTRAST */
body.theme-sea .navbar,
body.theme-sea .hero,
body.theme-sea .game-card,
body.theme-sea .leaderboard-card,
body.theme-sea .stats-card,
body.theme-sea .achievements-card,
body.theme-sea .game-hud,
body.theme-sea .settings-panel {
    background: var(--glass2) !important;
    border: 1px solid var(--border) !important;
    
    /* NEW: Doubled the blur to make the text highly readable */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    
    /* NEW: Added a dark shadow behind the cards to separate them from the bright background */
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.7), 
        inset 0 0 15px rgba(0, 210, 255, 0.15) !important;
}
/* 3. Glowing Card Hover Effect */
body.theme-sea .game-card:hover:not(.locked) {
    transform: translateY(-5px);
    border-color: #00d2ff !important;
    background: rgba(4, 20, 45, 0.85) !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(0, 210, 255, 0.4), 
        inset 0 0 15px rgba(0, 210, 255, 0.3) !important;
}

/* 4. Text & Button Colors */
body.theme-sea .section-title,
body.theme-sea .game-name,
body.theme-sea .hero-name,
body.theme-sea .hud-game-name {
    color: var(--neon2) !important;
    text-shadow: 0 0 10px var(--neon);
}

body.theme-sea .hud-score,
body.theme-sea .stat-box-val {
    color: #00ffff !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* 5. Actual Floating Bubbles */
.theme-sea .bubbles {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; 
    pointer-events: none;
}

.theme-sea .bubble {
    position: absolute;
    bottom: -50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: seaRise infinite ease-in;
}

@keyframes seaRise {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: translateY(-50vh) translateX(20px) scale(1.2); }
    100% { transform: translateY(-100vh) translateX(-20px) scale(1.5); opacity: 0; }
}
/* ====================== DEEP SEA ICONS ====================== */
body.theme-sea .game-card img,
body.theme-sea .game-card img.emoji {
    /* Cool blue tint, increased contrast, and a soft cyan water glow */
    filter: sepia(0.2) hue-rotate(180deg) brightness(1.1) drop-shadow(0 0 10px rgba(0, 210, 255, 0.6));
    transition: all 0.4s ease-in-out;
}

body.theme-sea .game-card:hover:not(.locked) img,
body.theme-sea .game-card:hover:not(.locked) img.emoji {
    /* Magic floating effect on hover with intensified glow */
    filter: sepia(0.1) hue-rotate(180deg) brightness(1.25) drop-shadow(0 15px 20px rgba(0, 210, 255, 0.9));
    transform: translateY(-6px) scale(1.08);
}

.theme-sea .bubble:nth-child(1) { width: 20px; height: 20px; left: 15%; animation-duration: 8s; }
.theme-sea .bubble:nth-child(2) { width: 40px; height: 40px; left: 35%; animation-duration: 12s; animation-delay: 2s; }
.theme-sea .bubble:nth-child(3) { width: 15px; height: 15px; left: 65%; animation-duration: 6s; animation-delay: 1s; }
.theme-sea .bubble:nth-child(4) { width: 30px; height: 30px; left: 80%; animation-duration: 10s; animation-delay: 4s; }
.theme-sea .bubble:nth-child(5) { width: 25px; height: 25px; left: 50%; animation-duration: 7s; animation-delay: 3s; }

/* ====================== SUNSET CIRCUIT (CYBERPUNK) ====================== */
body.theme-sunset {
    /* GOAL 5: Strict Color Hierarchy */
    --bg: #0b0213;
    --neon: #ff007f;        /* Pink = Accents & Borders */
    --neon2: #ffaa00;       /* Orange = Highlights & Scores */
    --cyan: #ff007f;        /* Fallback */
    
    --text: #ffffff;        /* White = Readable Content */
    --text2: #e0c8d8;       /* Muted pinkish-gray for secondary text */
    
    --border: rgba(255, 0, 127, 0.4);
    --glow: 0 0 15px rgba(255, 0, 127, 0.3);
    
    /* Purple = Deep Panel Base */
    --glass: rgba(18, 5, 28, 0.65);
    --glass2: rgba(18, 5, 28, 0.85);
}
/* ====================== SUNSET CIRCUIT ICONS ====================== */
body.theme-sunset .game-card img,
body.theme-sunset .game-card img.emoji {
    /* High saturation, warm contrast, and dual neon drop-shadows */
    filter: saturate(1.4) contrast(1.1) 
            drop-shadow(0 0 8px rgba(255, 0, 127, 0.6)) 
            drop-shadow(0 0 15px rgba(255, 170, 0, 0.3));
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy arcade transition */
}

body.theme-sunset .game-card:hover:not(.locked) img,
body.theme-sunset .game-card:hover:not(.locked) img.emoji {
    /* Flares up like a neon sign with a slight dynamic tilt */
    filter: saturate(1.6) contrast(1.2) brightness(1.15)
            drop-shadow(0 0 15px rgba(255, 0, 127, 0.9)) 
            drop-shadow(0 0 25px rgba(255, 170, 0, 0.7));
    transform: scale(1.12) rotate(4deg); 
}

/* 1. Background: Cinematic Dimming Overlay */
body.theme-sunset {
    background: 
        /* Dim overlay: dark purple gradient to push the city back slightly */
        linear-gradient(to bottom, rgba(11, 2, 19, 0.5), rgba(11, 2, 19, 0.8)), 
        /* REPLACE with your Synthwave Sunset background image */
        url('sunset\ circuit\ bg.png') center bottom / cover no-repeat fixed, 
        #0b0213 !important;
}

/* 2 & 3. Premium Panels & Cards: Deep Shadows & Soft Blur */
body.theme-sunset .navbar,
body.theme-sunset .hero,
body.theme-sunset .game-card,
body.theme-sunset .leaderboard-card,
body.theme-sunset .stats-card,
body.theme-sunset .achievements-card,
body.theme-sunset .game-hud,
body.theme-sunset .settings-panel {
    background: var(--glass2) !important;
    border: 1px solid var(--border) !important;
    
    /* Stronger blur to melt the background noise behind panels */
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    
    /* Heavy black drop shadow + subtle pink/orange inner glow */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.85), 
        inset 0 0 15px rgba(255, 0, 127, 0.15),
        inset 0 1px 0 rgba(255, 170, 0, 0.2) !important;
}

/* Card Hover: Elevate and flare up orange/pink */
body.theme-sunset .game-card:hover:not(.locked) {
    transform: translateY(-6px);
    border-color: #ffaa00 !important; 
    background: rgba(25, 5, 35, 0.95) !important;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.9),
        0 0 25px rgba(255, 0, 127, 0.4), 
        0 0 40px rgba(255, 170, 0, 0.2),
        inset 0 0 20px rgba(255, 170, 0, 0.3) !important;
}

/* 4. Typography: Readable Whites & Glowing Accents */
body.theme-sunset .game-desc,
body.theme-sunset .level-desc,
body.theme-sunset .achievement-desc,
body.theme-sunset .settings-label {
    color: var(--text2) !important;
    font-weight: 500;
}

/* Headings: Crisp white centers with dual-tone pink/orange glow */
body.theme-sunset .section-title,
body.theme-sunset .game-name,
body.theme-sunset .hero-name,
body.theme-sunset .hud-game-name,
body.theme-sunset .overlay-title {
    color: #ffffff !important;
    text-shadow: 
        0 0 10px rgba(255, 0, 127, 0.8),
        0 0 20px rgba(255, 170, 0, 0.6) !important;
}

/* Scores & Highlights: Pure Neon Orange */
body.theme-sunset .hud-score,
body.theme-sunset .stat-box-val,
body.theme-sunset .game-best,
body.theme-sunset .lb-score,
body.theme-sunset .nav-best {
    color: var(--neon2) !important;
    -webkit-text-fill-color: var(--neon2) !important;
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.6) !important;
    background: none !important;
}

/* Keep the pink-to-orange gradient ONLY on the XP progress bar */
body.theme-sunset .xp-bar {
    background: linear-gradient(90deg, #ff007f, #ffaa00) !important;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.6) !important;
}

/* Buttons: Translucent pink glowing blocks */
body.theme-sunset .btn,
body.theme-sunset .nav-btn,
body.theme-sunset .tutorial-continue {
    background: rgba(255, 0, 127, 0.1) !important;
    border: 1px solid rgba(255, 0, 127, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.3) !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.8) !important;
}

body.theme-sunset .btn:hover,
body.theme-sunset .nav-btn:hover {
    background: rgba(255, 170, 0, 0.2) !important;
    border-color: #ffaa00 !important;
    box-shadow: 0 0 25px rgba(255, 170, 0, 0.5) !important;
}

/* SUNSET ANIMATION: Moving Perspective Grid (Kept from before) */
.sunset-grid-wrap { display: none; }
.theme-sunset .sunset-grid-wrap {
    display: block;
    position: fixed;
    bottom: 0; left: 0; width: 100%; height: 40vh;
    z-index: -1;
    perspective: 400px;
    overflow: hidden;
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 80%);
}

.theme-sunset .sunset-grid {
    position: absolute;
    width: 200%; height: 200%;
    bottom: -50%; left: -50%;
    background-image: 
        linear-gradient(rgba(255, 0, 127, 0.4) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 0, 127, 0.4) 2px, transparent 2px);
    background-size: 50px 50px;
    transform: rotateX(75deg);
    animation: gridMove 2s linear infinite;
}

@keyframes gridMove {
    0% { transform: rotateX(75deg) translateY(0); }
    100% { transform: rotateX(75deg) translateY(50px); }
}

/* ====================== PIXEL DUNGEON (RETRO ARCADE) ====================== */
body.theme-pixel {
    --bg: #0a0e0a;
    --bg2: #111811;
    --neon: #00ff41;     
    --neon2: #00ff41;
    --cyan: #00ff41;
    /* GOAL 3: Better Color Balance */
    --text: #ffffff;        
    --text2: #a0bca0;        
    --gold: #ffcc00;        
    --border: #00cc33;     
    --glow: 0 0 0px transparent; 
    --glass: rgba(8, 12, 8, 0.85);
    --glass2: rgba(8, 12, 8, 0.95);
}
/* ====================== PIXEL DUNGEON ICONS ====================== */
body.theme-pixel .game-card img,
body.theme-pixel .game-card img.emoji {
    /* Forces sharp, blocky pixelation (disables anti-aliasing) */
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
    
    /* Slight green matrix tint, boosted contrast, hard blocky shadows */
    filter: sepia(0.3) hue-rotate(70deg) saturate(1.2) contrast(1.3) 
            drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.9))
            drop-shadow(-1px -1px 0px rgba(0, 255, 65, 0.3));
            
    /* steps(3) creates a choppy, low-framerate retro animation */
    transition: all 0.2s steps(3); 
}

body.theme-pixel .game-card:hover:not(.locked) img,
body.theme-pixel .game-card:hover:not(.locked) img.emoji {
    /* Shifts the hard shadow to pop the "sprite" off the background */
    filter: sepia(0.2) hue-rotate(70deg) saturate(1.4) contrast(1.4) brightness(1.2)
            drop-shadow(6px 6px 0px rgba(0, 0, 0, 1))
            drop-shadow(2px 2px 0px rgba(0, 255, 65, 0.8));
    transform: translate(-3px, -3px) scale(1.05);
}

/* 1. Background Improvements: Dim overlay for readability */
body.theme-pixel {
    background: 
        /* Dark dimming overlay */
        linear-gradient(rgba(5, 8, 5, 0.75), rgba(5, 8, 5, 0.85)), 
        /* REPLACE with your Dungeon background image */
        url('pixel-dungeon-bg.png') center top / cover no-repeat fixed, 
        #0a0e0a !important;
        
    /* GOAL 2: Clean readable base font for all descriptions/paragraphs */
    font-family: 'Nunito', sans-serif !important; 
}

/* 2. Better Typography: Pixel font ONLY for headings, numbers, buttons */
body.theme-pixel .section-title,
body.theme-pixel .game-name,
body.theme-pixel .hero-name,
body.theme-pixel .hud-game-name,
body.theme-pixel .stat-box-val,
body.theme-pixel .hud-score,
body.theme-pixel .btn,
body.theme-pixel .nav-btn,
body.theme-pixel .rank-badge,
body.theme-pixel .overlay-title,
body.theme-pixel .level-title,
body.theme-pixel .logo-title {
    font-family: 'Courier New', Courier, monospace !important;
    letter-spacing: 1px;
}

/* 3. Color Balance: Gold Scores & Soft Gray Desc */
body.theme-pixel .game-desc,
body.theme-pixel .level-desc,
body.theme-pixel .achievement-desc,
body.theme-pixel .settings-label {
    color: var(--text2) !important;
    font-weight: 600;
}

body.theme-pixel .game-best,
body.theme-pixel .hud-score,
body.theme-pixel .lb-score,
body.theme-pixel .nav-best {
    color: var(--gold) !important;
    -webkit-text-fill-color: var(--gold) !important;
    text-shadow: 2px 2px 0px #000 !important;
}

/* 4. Improve Cards: Subtle blur, bright borders, pixel shadows */
body.theme-pixel .navbar,
body.theme-pixel .game-card,
body.theme-pixel .leaderboard-card,
body.theme-pixel .stats-card,
body.theme-pixel .achievements-card,
body.theme-pixel .game-hud,
body.theme-pixel .settings-panel {
    background: var(--glass2) !important;
    border: 2px solid var(--border) !important;
    border-radius: 0 !important; 
    backdrop-filter: blur(4px) !important; /* Slight blur behind content */
    -webkit-backdrop-filter: blur(4px) !important;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.9) !important;
}

body.theme-pixel .game-card:hover:not(.locked) {
    transform: translate(-3px, -3px);
    border-color: #ffffff !important;
    background: rgba(15, 25, 15, 0.95) !important;
    box-shadow: 10px 10px 0px rgba(0, 255, 65, 0.2) !important;
}

/* Buttons and Badges get blocky treatment */
body.theme-pixel .btn, 
body.theme-pixel .nav-btn,
body.theme-pixel .rank-badge {
    border-radius: 0 !important;
    border: 2px solid var(--border) !important;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.9) !important;
}

body.theme-pixel .xp-bar {
    background: var(--neon) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 5. Main Profile Panel: Dark Green Texture & Inner Glow */
body.theme-pixel .hero {
    background-color: #061206 !important;
    /* CSS generated pixel grid pattern! */
    background-image: 
        linear-gradient(rgba(0, 255, 65, 0.05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.05) 2px, transparent 2px) !important;
    background-size: 8px 8px !important;
    border: 2px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: 
        6px 6px 0px rgba(0, 0, 0, 0.9), 
        inset 0 0 30px rgba(0, 255, 65, 0.2) !important; /* Subtle inner glow */
}

/* Fix hollow text: Force solid neon colors for headings */
body.theme-pixel .hero-name,
body.theme-pixel .overlay-title,
body.theme-pixel .level-title,
body.theme-pixel .logo-title,
body.theme-pixel .section-title,
body.theme-pixel .game-name,
body.theme-pixel .hud-game-name,
body.theme-pixel .stat-box-val {
    background: none !important;
    -webkit-text-fill-color: var(--neon2) !important; 
    color: var(--neon2) !important;
    text-shadow: 3px 3px 0px #000 !important; 
    font-weight: 900 !important;
}

/* PIXEL ANIMATION: CRT Scanlines & Screen Flicker (Kept from before) */
.pixel-crt { display: none; }
.theme-pixel .pixel-crt {
    display: block;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999; 
    pointer-events: none; 
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    animation: crtFlicker 0.15s infinite;
}

@keyframes crtFlicker {
    0% { opacity: 0.95; }
    50% { opacity: 0.85; }
    100% { opacity: 0.95; }
}
/* Common theme improvements */
body[class*="theme-"] {
    --glow2: var(--glow);
}

.navbar, .hero, .game-card, .leaderboard-card, .stats-card, 
.achievements-card, .settings-panel, .game-overlay, .game-hud {
    background: var(--glass2) !important;
    border-color: var(--border) !important;
    box-shadow: var(--glow) !important;
}

.btn, .nav-btn, .tutorial-continue {
    border-color: var(--border);
    box-shadow: var(--glow);
}

.btn:hover, .nav-btn:hover {
    border-color: var(--neon);
    box-shadow: 0 0 30px var(--neon);
}

.rank-badge, .section-title, .game-name, .hud-game-name {
    color: var(--neon2) !important;
}

.hud-score, .stat-box-val {
    color: var(--neon) !important;
}

.game-card:hover:not(.locked) {
    box-shadow: 0 15px 50px var(--glow) !important;
}

/* --- SEARCH & FILTER SECTION --- */
.hub-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 2rem;
  width:100%;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  pointer-events: none;
}

#gameSearch {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.8rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: 0.3s;
}

#gameSearch:focus {
  border-color: var(--neon);
  background: rgba(124, 58, 237, 0.15);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.filter-pills {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  padding: 0.5rem 1.2rem;
  background: var(--glass2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text2);
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn:hover {
  background: var(--glass);
  border-color: var(--neon2);
  transform: translateY(-2px);
}

.filter-btn.active {
  background: var(--purple);
  color: white;
  border-color: var(--neon);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

/* Logic for hiding cards */
.game-card.hidden {
  display: none !important;
}

/* Empty state styling */
#noResults p {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  background: var(--glass);
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 10px;
  border: 1px dashed var(--border);
}
.hidden {
    display: none !important;
}