:root {
    --bg: #040010;
    --s1: #0b0022;
    --s2: #130035;
    --s3: #1b0048;
    --border: rgba(139,92,246,0.22);
    --border-h: rgba(139,92,246,0.5);
    --primary: #8b5cf6;
    --primary-b: #a78bfa;
    --accent: #06d6a0;
    --accent2: #ffd700;
    --danger: #f87171;
    --text: #ede9fe;
    --muted: #7c6f9e;
    --font-t: 'Cinzel Decorative', cursive;
    --font-h: 'Cinzel', serif;
    --font-b: 'IM Fell English', serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:15px;line-height:1.5}
body::before{content:'';position:fixed;inset:0;background:
        radial-gradient(ellipse 90% 60% at 15% 50%,rgba(88,28,135,.18) 0%,transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 30%,rgba(6,78,59,.1) 0%,transparent 55%),
        radial-gradient(ellipse 50% 40% at 50% 80%,rgba(59,7,100,.12) 0%,transparent 55%);
    pointer-events:none;z-index:0}
#stars-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

#game{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column;max-width:1100px;margin:0 auto}

/* ─── HEADER ─── */
#header{padding:8px 16px;background:rgba(11,0,34,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex-shrink:0}
#title{font-family:var(--font-t);font-size:16px;color:var(--primary-b);text-shadow:0 0 24px var(--primary),0 0 48px rgba(139,92,246,.3);white-space:nowrap;letter-spacing:.5px}
#resources{display:flex;gap:20px;flex-wrap:wrap;flex:1;align-items:center}
.res-block{display:flex;flex-direction:column}
.res-label{font-family:var(--font-h);font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}
.res-value{font-family:var(--font-h);font-size:17px;color:var(--accent2);text-shadow:0 0 12px rgba(255,215,0,.35)}
.res-sub{font-size:11px;color:var(--muted)}
#save-ind{font-size:10px;color:var(--muted);white-space:nowrap}

/* ─── MILESTONE ─── */
#milestone{padding:4px 16px;background:rgba(8,0,20,.6);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}
.ms-label{font-family:var(--font-h);font-size:9px;letter-spacing:2px;color:var(--muted);white-space:nowrap}
.ms-track{flex:1;height:4px;background:rgba(139,92,246,.1);border-radius:2px;overflow:hidden}
.ms-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;transition:width .4s ease}
.ms-val{font-size:10px;color:var(--muted);white-space:nowrap}

/* ─── MAIN ─── */
#main{display:flex;flex:1;overflow:hidden}

/* ─── LEFT PANEL ─── */
#left{width:290px;min-width:250px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;border-right:1px solid var(--border);overflow-y:auto;background:rgba(8,0,20,.45);flex-shrink:0}
#left::-webkit-scrollbar{width:3px}
#left::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:2px}

/* ─── ORB ─── */
#orb-wrap{position:relative;width:170px;height:170px;cursor:pointer;user-select:none;flex-shrink:0}
#orb{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 33% 30%,#9d4edd,#5a189a 45%,#1a0030 80%);box-shadow:0 0 40px rgba(139,92,246,.55),0 0 90px rgba(139,92,246,.2),inset 0 0 50px rgba(0,0,0,.55),inset 0 3px 6px rgba(200,160,255,.25);transition:transform .08s ease,box-shadow .08s ease;position:relative;overflow:hidden}
#orb::before{content:'☠';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:58px;opacity:.55;filter:drop-shadow(0 0 14px var(--primary));animation:skull-pulse 2.8s ease-in-out infinite}
#orb::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(139,92,246,.25);animation:ring-spin 5s linear infinite}
#orb-wrap:active #orb{transform:scale(.93);box-shadow:0 0 25px rgba(139,92,246,.9),0 0 60px rgba(139,92,246,.4),inset 0 0 60px rgba(0,0,0,.7)}
@keyframes skull-pulse{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(1)}50%{opacity:.75;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#orb-glow{position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.15) 0%,transparent 70%);animation:glow-pulse 2.8s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:1}}
#click-label{font-family:var(--font-h);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
#click-power{font-size:13px;color:var(--primary-b);text-align:center}

/* ─── BUY TOGGLE ─── */
.ba-row{display:flex;gap:4px;width:100%}
.ba-btn{flex:1;padding:5px 2px;background:rgba(20,0,47,.8);border:1px solid var(--border);border-radius:4px;color:var(--muted);font-family:var(--font-h);font-size:9px;cursor:pointer;transition:all .15s;letter-spacing:1px}
.ba-btn.on{background:rgba(88,28,135,.5);border-color:var(--primary);color:var(--primary-b)}

/* ─── SECTION TITLE ─── */
.stitle{font-family:var(--font-h);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--border);width:100%}

/* ─── SPELLS ─── */
#spells-wrap{width:100%}
.spell-card{width:100%;margin-bottom:7px;padding:9px 11px;background:rgba(18,0,45,.8);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-b);font-size:14px;cursor:pointer;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;transition:all .2s;text-align:left}
.spell-card:not(:disabled):hover{border-color:var(--primary);background:rgba(75,22,125,.25)}
.spell-card:disabled{opacity:.45;cursor:not-allowed}
.sp-icon{font-size:20px;flex-shrink:0}
.sp-info{flex:1}
.sp-name{font-family:var(--font-h);font-size:12px;display:block}
.sp-desc{font-size:11px;color:var(--muted)}
.sp-cd-bar{position:absolute;bottom:0;left:0;height:3px;background:var(--accent);transition:width .1s linear}
.sp-active{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(139,92,246,.08));animation:sp-pulse 1s ease-in-out infinite;pointer-events:none}
@keyframes sp-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ─── STATS ─── */
#stats-wrap{width:100%;background:rgba(8,0,20,.5);border:1px solid var(--border);border-radius:6px;padding:9px 11px}
.stat-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:3px}
.stat-row span:last-child{color:var(--text)}

/* ─── RIGHT PANEL ─── */
#right{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* ─── TABS ─── */
#tabs{display:flex;border-bottom:1px solid var(--border);background:rgba(8,0,20,.85);flex-shrink:0}
.tab-btn{padding:9px 14px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:var(--font-h);font-size:10px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s}
.tab-btn:hover{color:var(--text)}
.tab-btn.on{color:var(--primary-b);border-bottom-color:var(--primary)}
.tab-badge{display:inline-block;background:var(--danger);color:#fff;font-size:9px;border-radius:8px;padding:1px 5px;margin-left:4px;font-family:var(--font-h)}

#tab-content{flex:1;overflow-y:auto;padding:12px}
#tab-content::-webkit-scrollbar{width:4px}
#tab-content::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:2px}

/* ─── GENERATORS ─── */
.gen-card{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:7px;background:rgba(11,0,30,.75);border:1px solid var(--border);border-radius:8px;transition:border-color .2s,background .2s;position:relative;overflow:hidden}
.gen-card.affordable{border-color:rgba(139,92,246,.55)}
.gen-card.affordable::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,.06) 0%,transparent 60%);pointer-events:none}
.gen-card.locked{opacity:.35;filter:grayscale(.5)}
.gen-icon{font-size:30px;width:42px;text-align:center;flex-shrink:0}
.gen-info{flex:1;min-width:0}
.gen-name{font-family:var(--font-h);font-size:13px;color:var(--primary-b)}
.gen-desc{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gen-sps{font-size:11px;color:var(--accent2)}
.gen-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.gen-owned{font-family:var(--font-h);font-size:22px;color:var(--text);line-height:1;min-width:36px;text-align:right}
.buy-btn{padding:5px 12px;background:rgba(70,20,120,.4);border:1px solid rgba(139,92,246,.35);border-radius:4px;color:var(--text);font-family:var(--font-h);font-size:10px;cursor:pointer;transition:all .15s;white-space:nowrap}
.buy-btn:not(:disabled):hover{background:rgba(139,92,246,.45);border-color:var(--primary-b)}
.buy-btn:disabled{opacity:.35;cursor:not-allowed}
.buy-btn.lit{background:rgba(139,92,246,.55);border-color:var(--primary-b);box-shadow:0 0 12px rgba(139,92,246,.3);animation:btn-glow 2s ease-in-out infinite}
@keyframes btn-glow{0%,100%{box-shadow:0 0 8px rgba(139,92,246,.25)}50%{box-shadow:0 0 22px rgba(139,92,246,.6)}}

/* ─── UPGRADES ─── */
.upg-card{display:flex;align-items:center;gap:11px;padding:9px 12px;margin-bottom:6px;background:rgba(11,0,30,.75);border:1px solid var(--border);border-radius:8px;transition:all .2s}
.upg-card.avail{border-color:rgba(253,224,71,.45);background:rgba(18,13,0,.75)}
.upg-card.avail:hover{border-color:var(--accent2);background:rgba(35,25,0,.75);transform:translateX(4px);cursor:pointer}
.upg-card.faded{opacity:.22}
.upg-icon{font-size:22px;flex-shrink:0}
.upg-info{flex:1}
.upg-name{font-family:var(--font-h);font-size:12px;color:var(--accent2)}
.upg-desc{font-size:11px;color:var(--muted)}
.upg-cost{font-family:var(--font-h);font-size:12px;color:var(--text);text-align:right;flex-shrink:0}

/* ─── PRESTIGE ─── */
#prestige-panel{padding:20px;text-align:center}
#prestige-panel h2{font-family:var(--font-t);font-size:20px;color:var(--accent);text-shadow:0 0 24px var(--accent);margin-bottom:14px}
.pres-info{background:rgba(6,214,160,.05);border:1px solid rgba(6,214,160,.2);border-radius:8px;padding:16px;margin:14px 0;font-size:14px;line-height:1.9;color:var(--muted)}
.pres-info strong{color:var(--text)}
.pres-shards{color:var(--accent);font-family:var(--font-h);font-size:22px}
.pres-btn{padding:13px 30px;background:linear-gradient(135deg,rgba(6,214,160,.2),rgba(6,214,160,.08));border:2px solid var(--accent);border-radius:8px;color:var(--accent);font-family:var(--font-t);font-size:14px;cursor:pointer;transition:all .2s;letter-spacing:1px}
.pres-btn:hover:not(:disabled){background:rgba(6,214,160,.22);box-shadow:0 0 30px rgba(6,214,160,.3);transform:scale(1.02)}
.pres-btn:disabled{opacity:.3;cursor:not-allowed}
.void-upg{display:flex;align-items:center;gap:11px;padding:11px;margin-bottom:7px;background:rgba(0,18,12,.7);border:1px solid rgba(6,214,160,.18);border-radius:8px;transition:all .2s}
.void-upg.can{border-color:rgba(6,214,160,.45)}
.void-upg.can:hover{background:rgba(0,35,24,.7)}
.void-upg.mx{opacity:.35}
.void-upg-info{flex:1}
.void-upg-name{font-family:var(--font-h);font-size:12px;color:var(--accent)}
.void-upg-desc{font-size:11px;color:var(--muted)}
.void-upg-lv{font-size:10px;color:var(--muted);margin-top:2px}
.void-buy{padding:5px 12px;background:rgba(6,214,160,.12);border:1px solid rgba(6,214,160,.35);border-radius:4px;color:var(--accent);font-family:var(--font-h);font-size:10px;cursor:pointer;transition:all .15s;white-space:nowrap}
.void-buy:not(:disabled):hover{background:rgba(6,214,160,.28)}
.void-buy:disabled{opacity:.3;cursor:not-allowed}

/* ─── ACHIEVEMENTS ─── */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:7px}
.ach-card{padding:10px;background:rgba(11,0,30,.75);border:1px solid var(--border);border-radius:8px;transition:all .3s}
.ach-card.on{border-color:rgba(253,224,71,.4);background:rgba(18,13,0,.75)}
.ach-card.off{opacity:.3;filter:grayscale(.8)}
.ach-icon{font-size:26px;margin-bottom:3px}
.ach-name{font-family:var(--font-h);font-size:11px;color:var(--accent2)}
.ach-desc{font-size:11px;color:var(--muted)}
.ach-bonus{font-size:11px;color:var(--accent);margin-top:3px}

/* ─── PARTICLES ─── */
.fp{position:fixed;pointer-events:none;z-index:9999;font-family:var(--font-h);font-size:14px;color:var(--primary-b);text-shadow:0 0 8px var(--primary);animation:fp-up 1s ease-out forwards}
@keyframes fp-up{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-75px) scale(.75);opacity:0}}
.pd{position:fixed;pointer-events:none;z-index:9998;width:4px;height:4px;border-radius:50%;animation:pd-fly .7s ease-out forwards}
@keyframes pd-fly{0%{transform:translate(0,0) scale(1);opacity:.85}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

/* ─── NOTIFICATIONS ─── */
#notifs{position:fixed;top:56px;right:14px;z-index:9997;display:flex;flex-direction:column;gap:7px;max-width:270px}
.notif{padding:9px 13px;background:rgba(11,0,34,.96);border:1px solid var(--border);border-radius:8px;backdrop-filter:blur(10px);font-size:13px;display:flex;align-items:center;gap:8px;animation:ni .3s ease-out,no .3s ease-in 2.8s forwards}
.notif.ach{border-color:rgba(253,224,71,.45);background:rgba(18,13,0,.96)}
.notif.spell{border-color:rgba(139,92,246,.45)}
.notif.pres{border-color:rgba(6,214,160,.45)}
@keyframes ni{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes no{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}

/* ─── MODAL ─── */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center;display:none}
#modal{background:var(--s1);border:1px solid rgba(6,214,160,.4);border-radius:12px;padding:28px 32px;max-width:400px;text-align:center}
#modal h3{font-family:var(--font-t);color:var(--accent);font-size:18px;margin-bottom:12px}
#modal p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:20px}
.modal-btns{display:flex;gap:10px;justify-content:center}
.mbtn{padding:10px 22px;border-radius:6px;font-family:var(--font-h);font-size:12px;cursor:pointer;transition:all .2s;letter-spacing:1px}
.mbtn-cancel{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted)}
.mbtn-cancel:hover{color:var(--text)}
.mbtn-confirm{background:rgba(6,214,160,.15);border:2px solid var(--accent);color:var(--accent)}
.mbtn-confirm:hover{background:rgba(6,214,160,.28);box-shadow:0 0 20px rgba(6,214,160,.25)}

@media(max-width:620px){
    #left{width:100%;min-width:unset;border-right:none;border-bottom:1px solid var(--border);max-height:270px}
    #main{flex-direction:column}
    #orb-wrap{width:110px;height:110px}
    #orb::before{font-size:38px}
}