:root {
    --sky:#b8e4ff; --sky2:#d4f0ff;
    --dirt:#c8955a; --dirt2:#b07840;
    --stone:#8fa0b0; --stone2:#6d828f;
    --gem-r:#ff5e7a; --gem-b:#5eaaff; --gem-g:#5ee8a0; --gem-y:#ffdc5e; --gem-p:#c47eff;
    --amber:#f59e0b; --amber-d:#d97706;
    --brown:#6b3f18; --brown-l:#92541c;
    --cream:#fff8ec; --cream2:#fff0d4;
    --text:#3d2200; --muted:#7a5c3a; --muted2:#a07850;
    --white:#ffffff;
    --card-sh:0 4px 0 rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
    --card-sh-h:0 6px 0 rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.12);
    --rad:16px; --rad-s:10px;
    --font-t:'Fredoka One',cursive;
    --font-b:'Nunito',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
    font-family:var(--font-b);font-size:14px;color:var(--text);
    background:var(--cream);
    background-image:
            linear-gradient(180deg,var(--sky) 0%,var(--sky2) 8%,var(--dirt) 8%,var(--dirt2) 22%,
            #9b7a52 22%,#876040 36%,var(--stone) 36%,var(--stone2) 58%,
            #4a3a4a 58%,#3a2a3a 72%,#2a1f38 72%,#1a1228 100%);
    background-attachment:fixed;
    cursor:default;
}

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

/* ─── HEADER ─── */
#header{
    background:linear-gradient(135deg,#fff8ec,#fff0d4);
    border-bottom:4px solid var(--amber);
    padding:8px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex-shrink:0;
    box-shadow:0 4px 0 rgba(245,158,11,.18);
}
#logo{font-family:var(--font-t);font-size:20px;color:var(--brown);white-space:nowrap;display:flex;align-items:center;gap:6px}
#logo .pick{display:inline-block;animation:logo-rock .8s ease-in-out infinite alternate;transform-origin:70% 70%}
@keyframes logo-rock{from{transform:rotate(-12deg)}to{transform:rotate(8deg)}}
#resources{display:flex;gap:14px;flex:1;align-items:center;flex-wrap:wrap}
.res-pill{
    background:var(--white);border:3px solid var(--amber);border-radius:40px;
    padding:4px 14px 4px 10px;display:flex;align-items:center;gap:7px;
    box-shadow:0 3px 0 var(--amber-d);
}
.res-icon{font-size:18px}
.res-v{font-family:var(--font-t);font-size:16px;color:var(--brown);line-height:1}
.res-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px}
.res-sub{font-size:10px;color:var(--muted2)}
#save-dot{width:8px;height:8px;border-radius:50%;background:#c0c0c0;transition:all .3s;flex-shrink:0;margin-left:auto}
#save-dot.ok{background:#5ee8a0;box-shadow:0 0 6px #5ee8a0}

/* ─── PROGRESS BAR (mine shaft) ─── */
#shaft-bar{
    background:linear-gradient(90deg,var(--dirt2),var(--stone2));
    padding:5px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;
    border-bottom:3px solid rgba(0,0,0,.15);
}
.shaft-label{font-family:var(--font-t);font-size:11px;color:var(--cream);letter-spacing:1px;white-space:nowrap}
.shaft-track{flex:1;height:12px;background:rgba(0,0,0,.25);border-radius:6px;overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.shaft-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gem-y),var(--gem-g));transition:width .3s ease;position:relative}
.shaft-fill::after{content:'⛏';position:absolute;right:-4px;top:50%;transform:translateY(-50%);font-size:10px;line-height:1}
.shaft-val{font-size:10px;color:var(--cream2);white-space:nowrap;font-weight:700}

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

/* ─── LEFT ─── */
#left{
    width:270px;min-width:240px;display:flex;flex-direction:column;align-items:center;
    gap:10px;padding:12px 10px;overflow-y:auto;flex-shrink:0;
    background:rgba(255,248,236,.88);backdrop-filter:blur(6px);
    border-right:4px solid rgba(245,158,11,.25);
}
#left::-webkit-scrollbar{width:4px}
#left::-webkit-scrollbar-thumb{background:var(--amber);border-radius:2px}

/* ─── ROCK BUTTON ─── */
#rock-wrap{position:relative;cursor:pointer;user-select:none;margin:4px 0}
#rock{
    width:148px;height:148px;border-radius:50%;
    background:radial-gradient(circle at 38% 32%,#c0a882,#7a5c38 55%,#4a3018 85%);
    border:6px solid #5a3a14;
    box-shadow:0 8px 0 #3a2008,0 0 0 3px rgba(255,215,100,.3),inset 0 -6px 14px rgba(0,0,0,.3),inset 0 4px 8px rgba(255,220,150,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:56px;
    transition:transform .08s,box-shadow .08s;
    position:relative;overflow:hidden;
}
#rock-wrap:active #rock{
    transform:scale(.92) translateY(4px);
    box-shadow:0 3px 0 #3a2008,0 0 0 3px rgba(255,215,100,.3),inset 0 -2px 6px rgba(0,0,0,.3);
}
#rock::after{
    content:'';position:absolute;top:10%;left:15%;width:28%;height:22%;
    border-radius:50%;background:rgba(255,255,255,.12);transform:rotate(-20deg);
    pointer-events:none;
}
.crack{position:absolute;background:rgba(0,0,0,.35);border-radius:1px}
#gem-sparkle{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;overflow:hidden}
.sparkle-dot{position:absolute;border-radius:50%;animation:sp-spin 3s linear infinite}
#pick-icon{position:absolute;font-size:38px;bottom:-8px;right:-12px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.4));animation:pick-idle 1.4s ease-in-out infinite;transform-origin:30% 70%}
@keyframes pick-idle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
#rock-wrap:active #pick-icon{transform:rotate(35deg)!important;animation:none}
.rock-glow{position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,80,.3),transparent 65%);animation:rock-glow 2s ease-in-out infinite;pointer-events:none}
@keyframes rock-glow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

#click-label{font-family:var(--font-t);font-size:12px;color:var(--brown);letter-spacing:.5px}
#click-power{font-size:11px;color:var(--muted);font-weight:700}

/* ─── BUY MODE ─── */
.ba-row{display:flex;gap:5px;width:100%}
.ba-btn{
    flex:1;padding:6px 2px;border-radius:20px;border:2.5px solid var(--cream2);
    background:var(--white);color:var(--muted);font-family:var(--font-t);font-size:11px;
    cursor:pointer;transition:all .15s;
}
.ba-btn.on{background:var(--amber);border-color:var(--amber-d);color:var(--white);box-shadow:0 3px 0 var(--amber-d)}
.ba-btn:hover:not(.on){border-color:var(--amber);color:var(--brown)}

/* ─── SECTION TITLE ─── */
.stitle{
    font-family:var(--font-t);font-size:12px;color:var(--brown);letter-spacing:1px;
    margin-bottom:6px;padding-bottom:5px;border-bottom:2.5px dashed var(--amber);
    width:100%;display:flex;align-items:center;gap:5px;
}

/* ─── SPELLS ─── */
.spell-card{
    width:100%;margin-bottom:6px;padding:8px 10px;
    background:var(--white);border:3px solid var(--cream2);border-radius:var(--rad-s);
    display:flex;align-items:center;gap:9px;cursor:pointer;transition:all .18s;
    font-family:var(--font-b);text-align:left;position:relative;overflow:hidden;
}
.spell-card:not(:disabled):hover{border-color:var(--gem-b);box-shadow:var(--card-sh-h);transform:translateY(-1px)}
.spell-card:disabled{opacity:.45;cursor:not-allowed}
.sp-icon{font-size:22px;flex-shrink:0}
.sp-name{font-family:var(--font-t);font-size:12px;color:var(--brown);display:block}
.sp-desc{font-size:10px;color:var(--muted)}
.sp-cd-bar{position:absolute;bottom:0;left:0;height:4px;background:linear-gradient(90deg,var(--gem-b),var(--gem-g));border-radius:0 2px 2px 0;transition:width .1s linear}
.sp-active-glow{position:absolute;inset:0;background:linear-gradient(90deg,rgba(94,234,160,.12),transparent);animation:sa-pulse .8s ease-in-out infinite;pointer-events:none}
@keyframes sa-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ─── MINI STATS ─── */
#stats-wrap{
    width:100%;background:var(--white);border:3px solid var(--cream2);
    border-radius:var(--rad-s);padding:8px 10px;
}
.stat-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:2px 0}
.stat-row span:last-child{color:var(--brown);font-weight:700}

/* ─── RIGHT ─── */
#right{flex:1;display:flex;flex-direction:column;overflow:hidden;background:rgba(255,248,236,.75);backdrop-filter:blur(4px)}

/* ─── TABS ─── */
#tabs{display:flex;border-bottom:4px solid var(--amber);background:var(--cream);flex-shrink:0;gap:3px;padding:6px 10px 0}
.tab-btn{
    padding:7px 13px;background:var(--cream2);border:3px solid var(--amber);border-bottom:none;
    border-radius:var(--rad-s) var(--rad-s) 0 0;color:var(--muted);font-family:var(--font-t);font-size:11px;
    cursor:pointer;transition:all .15s;position:relative;bottom:-4px;
}
.tab-btn.on{background:var(--amber);color:var(--white);bottom:0;padding-bottom:10px}
.tab-btn:hover:not(.on){background:var(--amber);color:var(--white);opacity:.8}
.tbadge{display:inline-block;background:var(--gem-r);color:#fff;font-size:9px;border-radius:20px;padding:1px 5px;margin-left:3px;font-weight:800}

#tab-content{flex:1;overflow-y:auto;padding:12px}
#tab-content::-webkit-scrollbar{width:5px}
#tab-content::-webkit-scrollbar-thumb{background:var(--amber);border-radius:3px}

/* ─── GENERATORS ─── */
.gen-card{
    display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:7px;
    background:var(--white);border:3px solid var(--cream2);border-radius:var(--rad);
    transition:all .18s;position:relative;overflow:hidden;
}
.gen-card.affordable{border-color:var(--amber);box-shadow:var(--card-sh)}
.gen-card.affordable::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,220,80,.07),transparent 60%);pointer-events:none}
.gen-card.locked{opacity:.3;filter:saturate(.3)}
.gen-icon{font-size:32px;flex-shrink:0;width:44px;text-align:center;position:relative}
.gen-badge{position:absolute;top:-6px;right:-6px;background:var(--gem-r);color:#fff;font-size:8px;font-weight:800;border-radius:8px;padding:0 4px;font-family:var(--font-t)}
.gen-info{flex:1;min-width:0}
.gen-name{font-family:var(--font-t);font-size:13px;color:var(--brown);display:flex;align-items:center;gap:5px}
.gen-desc{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gen-rate{font-size:10px;color:var(--gem-g);font-weight:700}
.gen-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.gen-owned{
    font-family:var(--font-t);font-size:26px;color:var(--brown);line-height:1;
    min-width:36px;text-align:right;
}
.buy-btn{
    padding:5px 12px;background:var(--cream2);border:2.5px solid var(--amber);
    border-radius:20px;color:var(--brown);font-family:var(--font-t);font-size:10px;
    cursor:pointer;transition:all .15s;white-space:nowrap;box-shadow:0 3px 0 var(--amber-d);
}
.buy-btn:not(:disabled):hover{background:var(--amber);color:var(--white);transform:translateY(-1px);box-shadow:0 4px 0 var(--amber-d)}
.buy-btn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--amber-d)}
.buy-btn.lit{background:var(--amber);color:var(--white);animation:btn-bounce .6s ease-in-out infinite alternate}
@keyframes btn-bounce{from{transform:scale(1)}to{transform:scale(1.04)}}
.buy-btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}

/* ─── UPGRADES ─── */
.upg-card{
    display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:6px;
    background:var(--white);border:3px solid var(--cream2);border-radius:var(--rad);transition:all .18s;
}
.upg-card.avail{border-color:var(--gem-y);cursor:pointer;box-shadow:var(--card-sh)}
.upg-card.avail:hover{border-color:var(--amber);box-shadow:var(--card-sh-h);transform:translateX(4px)}
.upg-card.done{opacity:.2;border-color:var(--cream2)}
.upg-icon{font-size:24px;flex-shrink:0;width:34px;text-align:center}
.upg-info{flex:1}
.upg-name{font-family:var(--font-t);font-size:12px;color:var(--brown)}
.upg-desc{font-size:10px;color:var(--muted)}
.upg-need{font-size:10px;color:var(--gem-r)}
.upg-cost{font-family:var(--font-t);font-size:12px;color:var(--amber-d);flex-shrink:0}

/* ─── PRESTIGE ─── */
#pres-panel{padding:16px;text-align:center}
#pres-panel h2{font-family:var(--font-t);font-size:24px;color:var(--brown);margin-bottom:12px}
.pres-info-box{
    background:linear-gradient(135deg,#fff0e0,#ffe8c8);border:3px solid var(--amber);
    border-radius:var(--rad);padding:14px;margin:10px 0;font-size:13px;line-height:2;text-align:left;
}
.pres-info-box strong{color:var(--brown);font-size:15px}
.pres-shards{font-family:var(--font-t);font-size:20px;color:var(--gem-p)}
.pres-btn{
    padding:13px 28px;background:linear-gradient(135deg,var(--gem-p),#a050ff);
    border:none;border-radius:30px;color:var(--white);font-family:var(--font-t);
    font-size:15px;cursor:pointer;transition:all .2s;letter-spacing:.5px;
    box-shadow:0 5px 0 #7030c0,0 0 20px rgba(196,126,255,.3);
}
.pres-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #7030c0,0 0 30px rgba(196,126,255,.5)}
.pres-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #7030c0}
.pres-btn:disabled{background:linear-gradient(135deg,#c0b0c8,#a898b8);opacity:.5;cursor:not-allowed;box-shadow:0 3px 0 #806888}

.vupg-card{
    display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:6px;
    background:var(--white);border:3px solid var(--cream2);border-radius:var(--rad);transition:all .18s;
}
.vupg-card.can{border-color:var(--gem-p);cursor:pointer;box-shadow:var(--card-sh)}
.vupg-card.can:hover{border-color:#a050ff;box-shadow:var(--card-sh-h)}
.vupg-card.mx{opacity:.3}
.vupg-name{font-family:var(--font-t);font-size:12px;color:var(--brown)}
.vupg-desc{font-size:10px;color:var(--muted)}
.vupg-lv{font-size:9px;color:var(--muted2);margin-top:2px;font-weight:700}
.vbuy-btn{
    padding:5px 10px;background:rgba(196,126,255,.15);border:2.5px solid var(--gem-p);
    border-radius:20px;color:var(--gem-p);font-family:var(--font-t);font-size:10px;
    cursor:pointer;transition:all .15s;white-space:nowrap;
}
.vbuy-btn:not(:disabled):hover{background:rgba(196,126,255,.35)}
.vbuy-btn:disabled{opacity:.3;cursor:not-allowed}

/* ─── ACHIEVEMENTS ─── */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:7px}
.ach-card{
    padding:10px;background:var(--white);border:3px solid var(--cream2);border-radius:var(--rad);transition:all .3s;
}
.ach-card.on{border-color:var(--gem-y);background:linear-gradient(135deg,#fffde8,#fff8c8)}
.ach-card.off{opacity:.28;filter:grayscale(.7)}
.ach-icon{font-size:28px;margin-bottom:2px}
.ach-name{font-family:var(--font-t);font-size:11px;color:var(--brown)}
.ach-desc{font-size:10px;color:var(--muted)}
.ach-bonus{font-size:10px;color:var(--gem-g);font-weight:700;margin-top:3px}

/* ─── FLOATING PARTICLES ─── */
.fp{position:fixed;pointer-events:none;z-index:9999;font-family:var(--font-t);font-size:16px;color:var(--amber-d);filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));animation:fp-up .9s ease-out forwards}
@keyframes fp-up{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-65px) scale(.7);opacity:0}}
.gem-p{position:fixed;pointer-events:none;z-index:9998;font-size:16px;animation:gem-fly .7s ease-out forwards}
@keyframes gem-fly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

/* ─── NOTIFICATIONS ─── */
#notifs{position:fixed;top:62px;right:12px;z-index:9997;display:flex;flex-direction:column;gap:6px;max-width:260px;pointer-events:none}
.notif{
    padding:8px 13px;background:var(--white);border:3px solid var(--amber);border-radius:var(--rad-s);
    font-size:12px;font-weight:700;color:var(--brown);display:flex;align-items:center;gap:7px;
    box-shadow:0 4px 0 var(--amber-d),0 2px 12px rgba(0,0,0,.12);
    animation:ni .3s cubic-bezier(.25,2,.4,1),no .3s ease-in 2.8s forwards;
}
.notif.ach{border-color:var(--gem-y);box-shadow:0 4px 0 #c8a800,0 2px 12px rgba(0,0,0,.12)}
.notif.pres{border-color:var(--gem-p);box-shadow:0 4px 0 #7030c0}
@keyframes ni{from{transform:translateX(110%) scale(.8)}to{transform:translateX(0) scale(1)}}
@keyframes no{from{opacity:1}to{opacity:0;transform:translateX(110%)}}

/* ─── MODAL ─── */
#modal-ov{position:fixed;inset:0;background:rgba(61,34,0,.55);backdrop-filter:blur(4px);z-index:10000;display:none;align-items:center;justify-content:center}
#modal{background:var(--cream);border:4px solid var(--gem-p);border-radius:24px;padding:28px 30px;max-width:380px;text-align:center;box-shadow:0 12px 0 #7030c0,0 4px 24px rgba(0,0,0,.2)}
#modal h3{font-family:var(--font-t);font-size:22px;color:var(--brown);margin-bottom:10px}
#modal p{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:18px}
.mbtn-row{display:flex;gap:10px;justify-content:center}
.mbtn{padding:10px 22px;border-radius:22px;font-family:var(--font-t);font-size:13px;cursor:pointer;transition:all .18s;border:3px solid transparent}
.mbtn-c{background:var(--cream2);border-color:var(--amber);color:var(--muted)}
.mbtn-c:hover{color:var(--brown)}
.mbtn-ok{background:var(--gem-p);color:var(--white);box-shadow:0 4px 0 #7030c0}
.mbtn-ok:hover{transform:translateY(-2px);box-shadow:0 6px 0 #7030c0}

/* ─── LAYER DEPTH INDICATOR ─── */
.layer-tag{
    display:inline-block;padding:1px 8px;border-radius:10px;font-size:9px;font-weight:800;
    letter-spacing:.5px;vertical-align:middle;margin-left:4px;
}
.layer-surface{background:#a8d870;color:#2a4a00}
.layer-dirt{background:#c8955a;color:#fff}
.layer-stone{background:#8fa0b0;color:#fff}
.layer-deep{background:#4a3a5a;color:#fff}
.layer-gem{background:linear-gradient(90deg,var(--gem-r),var(--gem-p));color:#fff}

@media(max-width:600px){
    #left{width:100%;min-width:unset;border-right:none;border-bottom:4px solid rgba(245,158,11,.25);max-height:260px;flex-shrink:0}
    #main{flex-direction:column}
    #rock{width:100px;height:100px}
    #rock::before{font-size:38px}
}