/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;width:100%;height:100%}
:root{
--bg:#0a0e1a;--bg2:#111827;--bg3:#1a2235;--panel:#141c2e;
--border:#2a3a5c;--border2:#3d5a8a;
--green:#00e676;--green2:#00c853;--red:#ff5252;--red2:#c62828;
--gold:#ffd700;--blue:#448aff;--purple:#ce93d8;--cyan:#00e5ff;
--text:#e8eaf6;--text2:#7986cb;--shadow:0 4px 20px rgba(0,0,0,0.6);
}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;
height:100vh;overflow:hidden;user-select:none;position:relative}
#app{width:100vw;height:100vh;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
transition:opacity 0.3s ease,transform 0.3s ease}
.screen.active{display:flex}
.screen.fade-in{animation:fadeIn 0.3s ease}
.screen.fade-out{animation:fadeOut 0.3s ease}
.screen.slide-in{animation:slideIn 0.3s ease}
.screen.slide-out{animation:slideOut 0.3s ease}
.screen.scale-in{animation:scaleIn 0.3s ease}
.screen.scale-out{animation:scaleOut 0.3s ease}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(-20px);opacity:0}}
@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.95);opacity:0}}

.hidden{display:none!important}
.green{color:var(--green)}
.red{color:var(--red)}
.gold{color:var(--gold)}
.blue{color:var(--blue)}

/* MENU */
#screen-menu{flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#0d2040 0%,#050810 70%);
position:relative;overflow:hidden;width:100%;height:100%}
#screen-menu.active{display:flex;align-items:center;justify-content:center}
#screen-menu::before{content:'';position:absolute;inset:0;
background-image:radial-gradient(circle at 20% 80%,rgba(0,230,118,0.03) 0%,transparent 50%),
radial-gradient(circle at 80% 20%,rgba(68,138,255,0.03) 0%,transparent 50%);
animation:bg-shift 20s ease-in-out infinite alternate}
@keyframes bg-shift{0%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.1) rotate(2deg)}}
.menu-ticker-wrap{position:absolute;top:0;left:0;right:0;height:40px;overflow:hidden;
background:linear-gradient(135deg,var(--panel),rgba(20,28,46,0.9));border-bottom:2px solid var(--border);
backdrop-filter:blur(10px);z-index:2}
.menu-ticker{display:flex;gap:50px;animation:ticker 40s linear infinite;white-space:nowrap;
font-size:0.85rem;color:var(--text2);padding:12px 0;font-weight:600}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.menu-bg-grid{position:absolute;inset:0;background-image:
repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(0,230,118,0.02) 50px),
repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(0,230,118,0.02) 50px);
animation:grid-pulse 8s ease-in-out infinite alternate;z-index:0;pointer-events:none}
@keyframes grid-pulse{0%{opacity:0.3}100%{opacity:0.7}}
.menu-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;
padding:50px 20px 80px 20px;width:100%;box-sizing:border-box;max-width:600px;margin:0 auto}
.menu-logo{text-align:center;margin-bottom:8px}
.logo-chart{width:180px;height:70px;margin:0 auto 12px;position:relative;border-radius:12px;
background:linear-gradient(135deg,rgba(0,230,118,0.1),rgba(68,138,255,0.1));
border:1px solid rgba(0,230,118,0.2);overflow:hidden}
.logo-text{font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--green),var(--gold),var(--cyan));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:3px;
filter:drop-shadow(0 0 20px rgba(0,230,118,0.3))}
.logo-text span{display:block;font-size:1rem;letter-spacing:6px;margin-top:-6px;
background:linear-gradient(135deg,var(--cyan),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-sub{color:var(--text2);font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;margin-top:6px;
text-shadow:0 0 10px rgba(121,134,203,0.5)}
.menu-buttons{display:flex;flex-direction:column;gap:10px;min-width:280px;max-width:320px}
.menu-stats{margin-top:12px;color:var(--text2);font-size:0.85rem;text-align:center;
padding:16px 24px;background:linear-gradient(135deg,rgba(20,28,46,0.8),rgba(26,34,53,0.6));
border-radius:12px;border:2px solid var(--border);
backdrop-filter:blur(10px);max-width:400px;width:100%;box-sizing:border-box;
box-shadow:0 4px 15px rgba(0,0,0,0.3)}
.menu-version{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--text2);font-size:0.8rem;
background:rgba(10,14,26,0.9);padding:8px 16px;border-radius:20px;border:1px solid var(--border);
backdrop-filter:blur(10px);white-space:nowrap;display:flex;align-items:center;gap:8px}
.changelog-btn{background:none;border:none;font-size:1rem;cursor:pointer;opacity:0.7;transition:opacity 0.2s;padding:0}
.changelog-btn:hover{opacity:1}
.changelog-content{max-height:450px;overflow-y:auto;padding:20px;background:linear-gradient(135deg,rgba(20,28,46,0.6),rgba(26,34,53,0.4));border-radius:12px;border:1px solid var(--border)}
.changelog-content::-webkit-scrollbar{width:8px}
.changelog-content::-webkit-scrollbar-track{background:rgba(10,14,26,0.5);border-radius:4px}
.changelog-content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.changelog-content::-webkit-scrollbar-thumb:hover{background:var(--green)}
.changelog-version{margin-bottom:28px;animation:fadeInUp 0.4s ease forwards}
.changelog-version:nth-child(1){animation-delay:0s}
.changelog-version:nth-child(2){animation-delay:0.1s}
.changelog-version:nth-child(3){animation-delay:0.2s}
.changelog-version-header{font-size:1.2rem;font-weight:700;color:var(--gold);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--gold);text-shadow:0 0 10px rgba(255,215,0,0.3)}
.changelog-list{list-style:none;padding:0;margin:0}
.changelog-list li{padding:10px 12px;color:var(--text);border-bottom:1px solid var(--border);font-size:0.9rem;transition:background 0.2s}
.changelog-list li:last-child{border-bottom:none}
.changelog-list li:hover{background:rgba(0,230,118,0.05)}
.changelog-list li:before{content:"→";color:var(--green);margin-right:10px;font-weight:700}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalSlideIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes modalSlideOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.95) translateY(-20px)}}
@keyframes shopItemFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes shopTabSlide{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}

/* BUTTONS */
.mbtn{padding:12px 28px;border:none;border-radius:8px;font-size:0.95rem;font-weight:700;
cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all 0.15s;position:relative}
.mbtn:active{transform:scale(0.97)}
.mbtn:disabled{opacity:0.4;cursor:not-allowed}
.mbtn-primary{background:linear-gradient(135deg,#00c853,#00e676);color:#000;
box-shadow:0 0 20px rgba(0,230,118,0.3)}
.mbtn-primary:hover:not(:disabled){box-shadow:0 0 30px rgba(0,230,118,0.5);transform:translateY(-1px)}
.mbtn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.mbtn-secondary:hover:not(:disabled){background:var(--border);border-color:var(--green)}

/* MODAL */
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:40px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;text-align:center}
.modal-box.wide{max-width:900px}
.modal-title{font-size:1.8rem;color:var(--gold);margin-bottom:24px}

/* HOWTO */
.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;text-align:left}
.howto-card{background:var(--bg3);border-radius:8px;padding:16px;border:1px solid var(--border)}
.hc-icon{font-size:2rem;margin-bottom:8px}
.howto-card h3{color:var(--cyan);margin-bottom:6px;font-size:0.95rem}
.howto-card p{color:var(--text2);font-size:0.85rem;line-height:1.5}

/* COLLECTION */
.collection-tabs{display:flex;gap:8px;margin-bottom:20px;justify-content:center}
.ctab{padding:10px 24px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;
cursor:pointer;font-weight:600;color:var(--text2);transition:all 0.15s}
.ctab:hover{border-color:var(--border2)}
.ctab.active{background:var(--green2);color:#000;border-color:var(--green)}
#collection-content{min-height:300px;text-align:left}

/* STATS */
.stats-tabs{display:flex;gap:8px;margin-bottom:20px;justify-content:center}
.stab{padding:10px 24px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;
cursor:pointer;font-weight:600;color:var(--text2);transition:all 0.15s}
.stab:hover{border-color:var(--border2)}
.stab.active{background:var(--gold);color:#000;border-color:var(--gold)}
#stats-content{min-height:300px;text-align:left}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}
.stat-value{font-size:2rem;font-weight:700;color:var(--gold);margin-bottom:4px}
.stat-label{font-size:0.75rem;color:var(--text2);text-transform:uppercase}
.best-stock-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:8px}
.best-stock-icon{font-size:1.5rem}
.best-stock-info{flex:1}
.best-stock-name{font-weight:600;color:var(--text)}
.best-stock-pnl{color:var(--green);font-size:0.9rem}

/* SETUP */
.setup-container{background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:40px;max-width:1000px;width:90%;max-height:90vh;overflow-y:auto}
.setup-steps{display:flex;justify-content:center;gap:60px;margin-bottom:40px;position:relative}
.setup-steps::before{content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);
width:400px;height:2px;background:var(--border);z-index:0}
.setup-step{display:flex;align-items:center;gap:10px;opacity:0.4;transition:all 0.3s;position:relative;z-index:1}
.setup-step.active{opacity:1;transform:scale(1.1)}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--bg3);border:2px solid var(--border);
display:flex;align-items:center;justify-content:center;font-weight:700;transition:all 0.3s}
.setup-step.active .step-num{background:linear-gradient(135deg,var(--green2),var(--green));
color:#000;border-color:var(--green);box-shadow:0 0 20px rgba(0,230,118,0.4);animation:pulse-step 2s ease-in-out infinite}
@keyframes pulse-step{0%,100%{box-shadow:0 0 20px rgba(0,230,118,0.4)}50%{box-shadow:0 0 30px rgba(0,230,118,0.7)}}
.step-label{font-size:0.95rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.setup-panel{animation:slide-in 0.3s ease}
@keyframes slide-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.setup-panel h2{text-align:center;font-size:1.8rem;color:var(--gold);margin-bottom:12px;
text-shadow:0 0 20px rgba(255,215,0,0.3)}
.setup-hint{text-align:center;color:var(--text2);font-size:0.95rem;margin-bottom:32px;line-height:1.6}
.setup-nav{display:flex;justify-content:space-between;margin-top:32px;gap:16px;position:sticky;bottom:0;
background:var(--panel);padding:16px;border-radius:12px;border:2px solid var(--border);
box-shadow:0 -4px 20px rgba(0,0,0,0.5);z-index:10}

/* CLASS GRID */
.class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:16px}
.class-card{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:2px solid var(--border);
border-radius:16px;padding:24px;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden}
.class-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,230,118,0.05),transparent);
opacity:0;transition:opacity 0.3s}
.class-card:hover:not(.locked){border-color:var(--border2);transform:translateY(-4px) scale(1.02);
box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.class-card:hover:not(.locked)::before{opacity:1}
.class-card.selected{border-color:var(--green);box-shadow:0 0 30px rgba(0,230,118,0.5),0 8px 30px rgba(0,0,0,0.4);
transform:translateY(-4px) scale(1.02);animation:glow-pulse 2s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 30px rgba(0,230,118,0.5),0 8px 30px rgba(0,0,0,0.4)}
50%{box-shadow:0 0 40px rgba(0,230,118,0.7),0 8px 30px rgba(0,0,0,0.4)}}
.class-card.selected::before{opacity:1}
.class-card.locked{opacity:0.5;cursor:not-allowed;filter:grayscale(0.5)}
.class-icon{font-size:3rem;margin-bottom:12px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
.class-name{font-size:1.2rem;font-weight:700;color:var(--gold);margin-bottom:8px;text-shadow:0 0 10px rgba(255,215,0,0.3)}
.class-desc{color:var(--text2);font-size:0.9rem;line-height:1.5;margin-bottom:12px}
.class-bonuses{font-size:0.8rem;color:var(--green);line-height:1.8;padding-left:4px}
.class-unlock{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,var(--red2),var(--red));
color:#fff;padding:4px 12px;border-radius:6px;font-size:0.75rem;font-weight:700;
box-shadow:0 2px 8px rgba(0,0,0,0.3)}

/* GPU/CPU */
.gpu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gpu-card{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:2px solid var(--border);
border-radius:16px;padding:20px;cursor:pointer;transition:all 0.3s;text-align:center;position:relative;overflow:hidden}
.gpu-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(68,138,255,0.05),transparent);
opacity:0;transition:opacity 0.3s}
.gpu-card:hover{border-color:var(--border2);transform:translateY(-4px) scale(1.05);
box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.gpu-card:hover::before{opacity:1}
.gpu-card.selected{border-color:var(--blue);box-shadow:0 0 30px rgba(68,138,255,0.5),0 8px 30px rgba(0,0,0,0.4);
transform:translateY(-4px) scale(1.05);animation:glow-pulse-blue 2s ease-in-out infinite}
@keyframes glow-pulse-blue{0%,100%{box-shadow:0 0 30px rgba(68,138,255,0.5),0 8px 30px rgba(0,0,0,0.4)}
50%{box-shadow:0 0 40px rgba(68,138,255,0.7),0 8px 30px rgba(0,0,0,0.4)}}
.gpu-card.selected::before{opacity:1}
.gpu-icon{font-size:2.5rem;margin-bottom:12px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
.gpu-name{font-size:1.1rem;font-weight:700;color:var(--cyan);margin-bottom:6px;text-shadow:0 0 10px rgba(0,229,255,0.3)}
.gpu-tier{font-size:0.75rem;color:var(--text2);text-transform:uppercase;margin-bottom:10px;letter-spacing:1px}
.gpu-desc{font-size:0.85rem;color:var(--text2);line-height:1.5;margin-bottom:8px;min-height:60px}
.gpu-bonus{font-size:0.8rem;color:var(--gold);font-weight:600;line-height:1.4}

.cpu-list{display:flex;flex-direction:column;gap:16px}
.cpu-card{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:2px solid var(--border);
border-radius:16px;padding:20px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:20px;
position:relative;overflow:hidden}
.cpu-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,215,0,0.05),transparent);
opacity:0;transition:opacity 0.3s}
.cpu-card:hover:not(.locked){border-color:var(--border2);transform:translateX(4px);
box-shadow:0 4px 20px rgba(0,0,0,0.4)}
.cpu-card:hover:not(.locked)::before{opacity:1}
.cpu-card.selected{border-color:var(--gold);box-shadow:0 0 30px rgba(255,215,0,0.5),0 4px 20px rgba(0,0,0,0.4);
transform:translateX(4px);animation:glow-pulse-gold 2s ease-in-out infinite}
@keyframes glow-pulse-gold{0%,100%{box-shadow:0 0 30px rgba(255,215,0,0.5),0 4px 20px rgba(0,0,0,0.4)}
50%{box-shadow:0 0 40px rgba(255,215,0,0.7),0 4px 20px rgba(0,0,0,0.4)}}
.cpu-card.selected::before{opacity:1}
.cpu-card.locked{opacity:0.5;cursor:not-allowed;filter:grayscale(0.5)}
.cpu-icon{font-size:2.5rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
.cpu-info{flex:1}
.cpu-name{font-size:1.2rem;font-weight:700;color:var(--gold);margin-bottom:6px;text-shadow:0 0 10px rgba(255,215,0,0.3)}
.cpu-desc{font-size:0.9rem;color:var(--text2);line-height:1.5;margin-bottom:8px}
.cpu-stats{display:flex;gap:20px;margin-top:8px;font-size:0.8rem;flex-wrap:wrap}
.cpu-stat{color:var(--text2);padding:4px 10px;background:var(--bg);border-radius:6px;font-weight:600}
.cpu-stat.hard{color:var(--red);background:rgba(255,82,82,0.1)}
.cpu-stat.easy{color:var(--green);background:rgba(0,230,118,0.1)}

/* HUD */
#hud{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;
background:var(--panel);border-bottom:1px solid var(--border);height:60px;flex-shrink:0;gap:12px}
.hud-block{display:flex;flex-direction:column;align-items:center;gap:2px}
.hud-lbl{font-size:0.65rem;color:var(--text2);letter-spacing:1px;text-transform:uppercase}
.hud-val{font-size:1rem;font-weight:700}
.hud-target{flex:1;max-width:300px}
.target-bar-wrap{width:100%;height:12px;background:var(--bg3);border-radius:8px;
overflow:hidden;border:2px solid var(--border);margin:4px 0;position:relative;
box-shadow:inset 0 2px 4px rgba(0,0,0,0.3)}
.target-bar{height:100%;background:linear-gradient(90deg,var(--green2),var(--green));
border-radius:6px;transition:width 0.5s cubic-bezier(0.4,0,0.2,1);width:0;
position:relative;box-shadow:0 0 10px rgba(0,230,118,0.5)}
.target-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
animation:barShine 2s ease-in-out infinite}
@keyframes barShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.target-bar.warning{background:linear-gradient(90deg,#ff9800,#ff6d00);box-shadow:0 0 10px rgba(255,152,0,0.5)}
.target-bar.danger{background:linear-gradient(90deg,var(--red2),var(--red));box-shadow:0 0 10px rgba(255,82,82,0.5)}
.target-bar.success{background:linear-gradient(90deg,var(--green2),var(--green));box-shadow:0 0 10px rgba(0,230,118,0.5)}
.hud-btn{padding:8px 16px;background:linear-gradient(135deg,#1565c0,#1976d2);color:#fff;
border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:0.9rem;
letter-spacing:1px;text-transform:uppercase;transition:all 0.15s;position:relative;overflow:hidden}
.hud-btn:hover{box-shadow:0 0 20px rgba(25,118,210,0.5);transform:translateY(-2px)}
.hud-btn:active{transform:translateY(0)}

/* BUTTON GLOW EFFECT */
.hud-btn::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);
transform:rotate(45deg);transition:all 0.5s;opacity:0}
.hud-btn:hover::after{opacity:1;animation:btnShine 1s ease-in-out infinite}
@keyframes btnShine{0%{transform:rotate(45deg) translateY(-100%)}100%{transform:rotate(45deg) translateY(100%)}}

/* PRICE CHANGE ANIMATIONS */
@keyframes priceUp{0%{background-color:rgba(0,230,118,0.3)}100%{background-color:transparent}}
@keyframes priceDown{0%{background-color:rgba(255,82,82,0.3)}100%{background-color:transparent}}
.price-up{animation:priceUp 0.5s ease}
.price-down{animation:priceDown 0.5s ease}

/* STOCK CARD HOVER EFFECTS */
.stock-card{transition:all 0.2s ease;border:1px solid var(--border)}
.stock-card:hover{transform:translateX(4px);box-shadow:0 4px 20px rgba(0,0,0,0.4)}
.stock-card.selected{border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,0.3);animation:pulse-gold 2s ease-in-out infinite}

/* NEWS TICKER */
.news-ticker-wrap{background:var(--bg2);border-bottom:1px solid var(--border);height:32px;
overflow:hidden;position:relative}
.news-ticker{display:flex;align-items:center;height:100%;animation:tick 20s linear infinite;white-space:nowrap}
.news-ticker-item{padding:0 40px;color:var(--text2);font-size:0.85rem}
.news-ticker-item.positive{color:var(--green)}
.news-ticker-item.negative{color:var(--red)}
.news-ticker-item.neutral{color:var(--gold)}
@keyframes tick{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.news-ticker-wrap:hover .news-ticker{animation-play-state:paused}

/* ACHIEVEMENT POPUP */
@keyframes achievementPop{0%{transform:translate(-50%,-50%) scale(0.5);opacity:0}70%{transform:translate(-50%,-50%) scale(1.05)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes achievementPopOut{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(0.8);opacity:0}}

/* PULSE ANIMATIONS */
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 0 rgba(0,230,118,0.4)}50%{box-shadow:0 0 0 10px rgba(0,230,118,0)}}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(255,82,82,0.4)}50%{box-shadow:0 0 0 10px rgba(255,82,82,0)}}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,0.4)}50%{box-shadow:0 0 0 10px rgba(255,215,0,0)}}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}

/* EVENT POPUP */
.event-popup{position:fixed;top:80px;left:50%;transform:translateX(-50%);
background:linear-gradient(135deg,var(--bg2),var(--bg3));border:2px solid var(--border);
padding:16px 24px;border-radius:12px;z-index:1500;
box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:eventSlide 0.4s ease;max-width:400px}
.event-popup.positive{border-color:var(--green);box-shadow:0 8px 32px rgba(0,230,118,0.3)}
.event-popup.negative{border-color:var(--red);box-shadow:0 8px 32px rgba(255,82,82,0.3)}
.event-popup.neutral{border-color:var(--gold);box-shadow:0 8px 32px rgba(255,215,0,0.3)}
@keyframes eventSlide{0%{transform:translateX(-50%) translateY(-20px);opacity:0}100%{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes eventSlideOut{0%{transform:translateX(-50%) translateY(0);opacity:1}100%{transform:translateX(-50%) translateY(-20px);opacity:0}}

.hud-btn:hover{box-shadow:0 0 20px rgba(25,118,210,0.5)}

/* GAME LAYOUT */
#screen-game{flex-direction:column;align-items:stretch;justify-content:flex-start}
#game-layout{display:flex;flex:1;overflow:hidden;gap:0}
#panel-left{width:240px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);
overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:12px 8px}
#panel-center{flex:1;display:flex;flex-direction:column;padding:16px;gap:12px;overflow:hidden;min-height:0}
#panel-right{width:280px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);
overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:12px 8px}
.panel-section{background:linear-gradient(135deg,var(--bg3),var(--bg2));border-radius:10px;
padding:12px;border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,0.2)}
.panel-title{font-size:0.75rem;color:var(--text2);letter-spacing:2px;text-transform:uppercase;
margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);font-weight:700}

/* MARKET TABS */
.market-tabs{display:flex;gap:4px;margin-bottom:8px}
.mtab{flex:1;padding:6px 4px;background:var(--bg2);border:1px solid var(--border);
border-radius:4px;cursor:pointer;font-size:0.7rem;font-weight:600;text-align:center;
color:var(--text2);transition:all 0.15s}
.mtab:hover{border-color:var(--border2)}
.mtab.active{background:var(--green2);color:#000;border-color:var(--green)}

/* STOCK LIST */
#stock-list{display:flex;flex-direction:column;gap:6px;max-height:400px;overflow-y:auto;overflow-x:hidden}
.stock-item{background:var(--bg2);border:2px solid;border-radius:8px;
padding:10px;cursor:pointer;transition:all 0.2s;position:relative}
.stock-item.stock-up{border-color:rgba(0,230,118,0.6);
background:linear-gradient(90deg,rgba(0,230,118,0.08),var(--bg2))}
.stock-item.stock-down{border-color:rgba(255,82,82,0.6);
background:linear-gradient(90deg,rgba(255,82,82,0.08),var(--bg2))}
.stock-item:not(.stock-up):not(.stock-down){border-color:var(--border)}
.stock-item:hover{transform:translateX(4px);box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.stock-item.stock-up:hover{border-color:var(--green);box-shadow:0 2px 10px rgba(0,230,118,0.3)}
.stock-item.stock-down:hover{border-color:var(--red);box-shadow:0 2px 10px rgba(255,82,82,0.3)}
.stock-item:not(.stock-up):not(.stock-down):hover{border-color:var(--border2)}
.stock-item.selected{transform:translateX(4px)}
.stock-item.selected.stock-up{border-color:var(--green);box-shadow:0 0 16px rgba(0,230,118,0.5)}
.stock-item.selected.stock-down{border-color:var(--red);box-shadow:0 0 16px rgba(255,82,82,0.5)}
.stock-item.selected:not(.stock-up):not(.stock-down){border-color:var(--blue);box-shadow:0 0 16px rgba(68,138,255,0.4)}
.stock-ticker{font-weight:700;font-size:0.9rem;color:var(--gold);display:flex;align-items:center;gap:6px}
.stock-price{font-size:0.85rem;color:var(--text);margin-top:4px;font-weight:600}
.stock-change{font-size:0.8rem;margin-top:4px;font-weight:700}
.stock-change.up{color:var(--green);text-shadow:0 0 8px rgba(0,230,118,0.5)}
.stock-change.down{color:var(--red);text-shadow:0 0 8px rgba(255,82,82,0.5)}

/* MODIFIERS */
#modifier-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.modifier-item{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
padding:8px;font-size:0.75rem;position:relative}
.mod-icon{font-size:1.2rem;text-align:center;margin-bottom:4px}
.mod-name{font-weight:700;color:var(--gold);font-size:0.7rem;text-align:center;margin-bottom:2px}
.mod-desc{color:var(--text2);font-size:0.65rem;text-align:center;line-height:1.3}
.mod-sell{position:absolute;top:4px;right:4px;background:var(--red2);color:#fff;
border:none;border-radius:4px;font-size:0.6rem;padding:2px 6px;cursor:pointer;opacity:0}
.modifier-item:hover .mod-sell{opacity:1}

/* GRAPH */
#graph-area{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:2px solid var(--border);
border-radius:12px;padding:12px;flex:1;min-height:0;display:flex;flex-direction:column;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
#graph-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-shrink:0}
#graph-stock-name{font-size:1.2rem;font-weight:700;color:var(--gold);text-shadow:0 0 10px rgba(255,215,0,0.3)}
#graph-price-info{font-size:0.9rem;color:var(--text2)}
.graph-view-btns{display:flex;gap:6px}
.gvbtn{padding:6px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;
cursor:pointer;font-size:0.8rem;font-weight:700;color:var(--text2);transition:all 0.2s;
text-transform:uppercase;letter-spacing:1px}
.gvbtn:hover{border-color:var(--border2);transform:translateY(-1px)}
.gvbtn.active{background:linear-gradient(135deg,var(--blue),#1976d2);color:#fff;border-color:var(--blue);
box-shadow:0 0 15px rgba(68,138,255,0.4)}
#canvas-wrapper{position:relative;border-radius:8px;overflow:hidden;margin-bottom:8px;flex:1;min-height:0;
box-shadow:inset 0 2px 10px rgba(0,0,0,0.3);display:flex;align-items:center}
#stock-canvas{width:100%;height:100%;display:block;object-fit:contain}
#graph-legend{display:flex;gap:16px;flex-wrap:wrap;padding:8px;background:var(--bg);
border-radius:8px;border:1px solid var(--border);flex-shrink:0}
.legend-item{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;
cursor:pointer;transition:all 0.2s;background:var(--bg2)}
.legend-item:hover{background:var(--bg3);transform:translateY(-1px)}
.legend-item.legend-hover{background:var(--bg3);box-shadow:0 0 10px rgba(0,230,118,0.3)}
.legend-color{width:16px;height:16px;border-radius:4px;box-shadow:0 0 8px currentColor}

/* TRADE PANEL */
#trade-panel{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:2px solid var(--border);
border-radius:12px;padding:12px;flex-shrink:0;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
#trade-stock-info{margin-bottom:12px;text-align:center;padding:10px;background:var(--bg);
border-radius:8px;border:1px solid var(--border)}
#trade-name{font-size:1.1rem;font-weight:700;color:var(--gold);margin-bottom:4px;
text-shadow:0 0 10px rgba(255,215,0,0.3)}
#trade-price{font-size:0.95rem;color:var(--text);font-weight:600}
#trade-change{font-size:0.85rem;margin-top:2px;font-weight:600}
#trade-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.trade-row{display:flex;gap:10px;align-items:center}
.trade-btn{flex:1;padding:10px;border:none;border-radius:8px;font-weight:700;
font-size:0.95rem;cursor:pointer;transition:all 0.2s;text-transform:uppercase;letter-spacing:1px;
box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.buy-btn{background:linear-gradient(135deg,#00c853,#00e676);color:#000}
.buy-btn:hover:not(:disabled){box-shadow:0 0 20px rgba(0,230,118,0.5);transform:translateY(-2px)}
.sell-btn{background:linear-gradient(135deg,#b71c1c,#c62828);color:#fff}
.sell-btn:hover:not(:disabled){box-shadow:0 0 20px rgba(255,82,82,0.5);transform:translateY(-2px)}
.trade-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.qty-input{width:90px;padding:8px;background:var(--bg);border:2px solid var(--border);
border-radius:8px;color:var(--text);font-size:0.9rem;text-align:center;font-weight:600;
transition:all 0.2s}
.qty-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 10px rgba(68,138,255,0.3)}
.trade-cost{font-size:0.85rem;color:var(--text2);min-width:90px;font-weight:600}
#trade-holding{font-size:0.8rem;color:var(--text2);text-align:center;line-height:1.6;
padding:10px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
#holding-pnl{font-weight:700;font-size:0.9rem}

/* CONSUMABLES */
#consumable-bar{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:2px solid var(--border);
border-radius:12px;padding:10px;flex-shrink:0;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
#consumable-list{display:flex;gap:8px;flex-wrap:wrap;min-height:40px;align-items:center}
.consumable-item{background:linear-gradient(135deg,var(--bg2),var(--bg));border:2px solid var(--border);
border-radius:8px;padding:8px 12px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;
gap:6px;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.consumable-item:hover{border-color:var(--purple);transform:translateY(-3px) scale(1.05);
box-shadow:0 0 20px rgba(206,147,216,0.4)}
.cons-icon{font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.cons-name{font-size:0.8rem;font-weight:700;color:var(--purple);text-shadow:0 0 8px rgba(206,147,216,0.3)}

/* PORTFOLIO */
#portfolio-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.portfolio-item{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px}
.pf-ticker{font-weight:700;font-size:0.85rem;color:var(--gold);margin-bottom:4px}
.pf-qty{font-size:0.75rem;color:var(--text2)}
.pf-pnl{font-size:0.8rem;font-weight:700;margin-top:2px}

/* EVENT LOG */
#event-log{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;
font-size:0.75rem;line-height:1.5}
.event-item{padding:4px 6px;border-radius:4px;background:var(--bg2)}
.event-item.green{border-left:3px solid var(--green)}
.event-item.red{border-left:3px solid var(--red)}
.event-item.blue{border-left:3px solid var(--blue)}
.event-item.orange{border-left:3px solid #ff9800}

/* ROUND INFO */
#round-info-panel{font-size:0.8rem;color:var(--text2);line-height:1.6}
.boss-effect{color:var(--red);font-weight:600;margin-top:4px}

/* SHOP */
#screen-shop{align-items:center;justify-content:center;overflow-y:auto;padding:20px;
background:radial-gradient(ellipse at 50% 20%,#1a2847 0%,#0a0e1a 60%)}

/* ADMIN PANEL */
#screen-admin-login,#screen-admin{background:radial-gradient(ellipse at 50% 20%,#1a2847 0%,#0a0e1a 60%)}
#screen-admin .modal-box{background:linear-gradient(135deg,rgba(30,41,59,0.95),rgba(15,23,42,0.95));
border:2px solid var(--gold);box-shadow:0 0 60px rgba(255,215,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);
backdrop-filter:blur(10px);animation:adminFadeIn 0.4s ease}
#screen-admin-login .modal-box{background:linear-gradient(135deg,var(--panel),var(--bg2));
border:2px solid var(--border2);animation:adminSlideIn 0.3s ease}
.admin-tabs{display:flex;gap:12px;margin-bottom:24px;padding:0 24px}
.admin-tab{flex:1;padding:14px 20px;background:rgba(15,23,42,0.8);border:2px solid var(--border);
border-radius:12px;cursor:pointer;font-weight:700;font-size:0.85rem;color:var(--text2);
text-transform:uppercase;letter-spacing:1px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
position:relative;overflow:hidden}
.admin-tab::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
transition:left 0.5s}
.admin-tab:hover::before{left:100%}
.admin-tab:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,215,0,0.2)}
.admin-tab.active{background:linear-gradient(135deg,var(--gold),#ffd700);color:#000;
border-color:var(--gold);box-shadow:0 0 30px rgba(255,215,0,0.5),0 8px 20px rgba(255,215,0,0.3);
transform:translateY(-2px)}
#admin-content{opacity:1}
@keyframes adminFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes adminSlideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}
#shop-wrap{background:linear-gradient(135deg,var(--panel),var(--bg2));border:2px solid var(--border2);
border-radius:20px;padding:40px;width:100%;max-width:1400px;box-shadow:0 8px 40px rgba(0,0,0,0.5);
position:relative;overflow:hidden}
#shop-wrap::before{content:'';position:absolute;inset:0;
background-image:radial-gradient(circle at 20% 80%,rgba(0,230,118,0.05) 0%,transparent 50%),
radial-gradient(circle at 80% 20%,rgba(68,138,255,0.05) 0%,transparent 50%);pointer-events:none}
.shop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
padding-bottom:20px;border-bottom:2px solid var(--border);position:relative;z-index:1}
.shop-header h2{font-size:2rem;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,0.4)}
.shop-meta{display:flex;gap:24px;font-size:0.95rem;color:var(--text2);align-items:center}
.shop-cash-display{font-size:1.4rem;font-weight:700;color:var(--green);text-shadow:0 0 15px rgba(0,230,118,0.4)}
.shop-tabs{display:flex;gap:12px;margin-bottom:24px;position:relative;z-index:1}
.shop-tab{flex:1;padding:14px 20px;background:var(--bg3);border:2px solid var(--border);border-radius:10px;
cursor:pointer;font-weight:700;font-size:0.95rem;color:var(--text2);transition:all 0.3s;
text-transform:uppercase;letter-spacing:1px}
.shop-tab:hover{border-color:var(--border2);transform:translateY(-2px)}
.shop-tab.active{background:linear-gradient(135deg,var(--green2),var(--green));color:#000;
border-color:var(--green);box-shadow:0 0 20px rgba(0,230,118,0.4)}
#shop-content{min-height:500px;position:relative;z-index:1}
.shop-tab-content{display:none}
.shop-tab-content.active{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;animation:fadeIn 0.3s ease}
#shop-tab-upgrades.active{grid-template-columns:repeat(3,1fr)}
.shop-body{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px}
.shop-col{display:flex;flex-direction:column;gap:16px}
.shop-col h3{font-size:1rem;color:var(--cyan);margin-bottom:8px;text-transform:uppercase;
letter-spacing:2px;text-shadow:0 0 10px rgba(0,229,255,0.3)}
.shop-items{display:grid;grid-template-columns:1fr;gap:12px}
.shop-item{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:2px solid var(--border);
border-radius:14px;padding:14px;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden;
min-height:120px;display:flex;flex-direction:column}
.shop-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,230,118,0.05),transparent);
opacity:0;transition:opacity 0.3s}
.shop-item:hover:not(.sold):not(.cant-afford){border-color:var(--green);transform:translateY(-3px) scale(1.02);
box-shadow:0 8px 30px rgba(0,230,118,0.3)}
.shop-item:hover:not(.sold):not(.cant-afford)::before{opacity:1}
.shop-item.sold{opacity:0.5;cursor:not-allowed;filter:grayscale(0.5)}
.shop-item.cant-afford{opacity:0.6;cursor:not-allowed;border-color:var(--red2)}
.item-icon{font-size:2rem;text-align:center;margin-bottom:10px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
.item-name{font-weight:700;color:var(--gold);font-size:0.95rem;margin-bottom:6px;text-shadow:0 0 10px rgba(255,215,0,0.3);
text-align:center}
.item-desc{color:var(--text2);font-size:0.8rem;line-height:1.4;margin-bottom:auto;text-align:center;flex:1}
.item-price{background:linear-gradient(135deg,var(--green2),var(--green));color:#000;
border-radius:8px;padding:6px 12px;font-weight:700;font-size:0.85rem;display:inline-block;
box-shadow:0 2px 8px rgba(0,230,118,0.3);margin-top:8px;align-self:center}
.item-price.expensive{background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;
box-shadow:0 2px 8px rgba(255,82,82,0.3)}
.item-level{position:absolute;top:8px;right:8px;background:var(--blue);color:#fff;
padding:2px 8px;border-radius:6px;font-size:0.7rem;font-weight:700}
.sold-label{position:absolute;inset:0;background:rgba(0,0,0,0.8);display:flex;
align-items:center;justify-content:center;font-weight:900;color:var(--green);
font-size:1.2rem;border-radius:12px;text-shadow:0 0 15px rgba(0,230,118,0.8)}
.shop-footer{display:flex;justify-content:space-between;align-items:center;
padding-top:24px;border-top:2px solid var(--border);gap:20px;flex-wrap:wrap;position:relative;z-index:1}
#shop-pagination{flex:1;justify-content:center}
#shop-pagination button{padding:8px 20px;font-size:0.85rem}

/* GAME OVER / WIN */
#screen-gameover{background:radial-gradient(ellipse at 50% 50%,#2a1515 0%,#0a0e1a 70%)}
#screen-win{background:radial-gradient(ellipse at 50% 50%,#152a1f 0%,#0a0e1a 70%)}
.go-icon{font-size:5rem;margin-bottom:16px;animation:shake 0.5s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.go-title{font-size:2.5rem;color:var(--red);margin-bottom:8px;text-shadow:0 0 20px rgba(255,82,82,0.5)}
.go-sub{color:var(--text2);margin-bottom:16px;font-size:1.1rem}
.go-stats{color:var(--text2);font-size:0.9rem;line-height:1.8;margin-bottom:20px;
background:var(--bg3);padding:16px;border-radius:8px;border:1px solid var(--border)}
.win-ticker-anim{font-size:3rem;animation:bounce 0.5s infinite alternate;margin-bottom:16px}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.win-title{font-size:2.5rem;color:var(--green);margin-bottom:8px;text-shadow:0 0 20px rgba(0,230,118,0.5)}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

/* SETUP SUMMARY */
.setup-summary{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:2px solid var(--border2);
border-radius:12px;padding:20px;margin-top:24px}
.summary-title{font-size:0.9rem;color:var(--gold);font-weight:700;text-transform:uppercase;
letter-spacing:2px;margin-bottom:16px;text-align:center}
.summary-content{display:flex;flex-direction:column;gap:12px}
.summary-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;
background:var(--bg);border-radius:8px}
.summary-label{color:var(--text2);font-size:0.9rem;font-weight:600}
.summary-value{color:var(--text);font-size:0.95rem;font-weight:700}

/* CHECK MARK */
.check-mark{color:var(--green);font-weight:900;filter:drop-shadow(0 0 8px rgba(0,230,118,0.8))}

/* PAGE TRANSITIONS */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.98); }
}

/* GPU TIER COLORS */
.gpu-card[class*="tier"] .gpu-tier {font-weight:700}
.gpu-tier:contains("common") {color:var(--text2)}
.gpu-tier:contains("uncommon") {color:var(--blue)}
.gpu-tier:contains("rare") {color:var(--purple)}
.gpu-tier:contains("legendary") {color:var(--gold)}

/* LOCKED OVERLAY */
.gpu-card.locked, .cpu-card.locked, .class-card.locked {
  position:relative;
}
.gpu-card.locked .gpu-icon,
.gpu-card.locked .gpu-name,
.gpu-card.locked .gpu-tier,
.gpu-card.locked .gpu-desc,
.gpu-card.locked .gpu-bonus,
.cpu-card.locked .cpu-icon,
.cpu-card.locked .cpu-name,
.cpu-card.locked .cpu-desc,
.cpu-card.locked .cpu-stats,
.class-card.locked .class-icon,
.class-card.locked .class-name,
.class-card.locked .class-desc,
.class-card.locked .class-bonuses {
  filter: blur(4px);
  opacity: 0.4;
}
.gpu-card.locked .class-unlock,
.cpu-card.locked .class-unlock,
.class-card.locked .class-unlock {
  filter: none;
  opacity: 1;
  z-index: 10;
}

/* KEYBOARD SHORTCUTS */
kbd{display:inline-block;padding:2px 6px;background:var(--bg);border:1px solid var(--border);
border-radius:4px;font-size:0.7rem;font-weight:700;color:var(--gold);margin-right:4px;
box-shadow:0 2px 4px rgba(0,0,0,0.2)}

/* NOTIFICATIONS */
@keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(400px);opacity:0}}
@keyframes shopReroll{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(0.95) rotate(2deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes purchasePulse{0%{opacity:0;transform:scale(0.8)}50%{opacity:0.6;transform:scale(1.1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes sellPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:0.7}100%{transform:scale(0.8);opacity:0}}