/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Tajawal',sans-serif;background:#050a12;color:#e0e8ff;overflow:hidden;width:100vw;height:100vh;user-select:none;}

/* ===== SCREENS ===== */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;}
.screen.active{display:flex;}

/* ========== MENU ========== */
#menuScreen{
  background:radial-gradient(ellipse at 50% 40%,#0d1b3e 0%,#020510 100%);
  flex-direction:column;
}
.menu-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.menu-particle{position:absolute;border-radius:50%;animation:mpFloat linear infinite;}
@keyframes mpFloat{0%{transform:translateY(100vh) scale(0);opacity:0;}20%{opacity:.6;}100%{transform:translateY(-10vh) scale(1);opacity:0;}}

.menu-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
.menu-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;}
.menu-tower-icon{font-size:5.5rem;filter:drop-shadow(0 0 30px #ffd700cc);animation:towerBob 3s ease-in-out infinite;position:relative;z-index:2;}
@keyframes towerBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.menu-glow-ring{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.3) 0%,transparent 70%);animation:glowPulse 2s ease-in-out infinite;}
@keyframes glowPulse{0%,100%{transform:scale(.9);opacity:.7;}50%{transform:scale(1.2);opacity:1;}}

.menu-title{font-size:3.2rem;font-weight:900;background:linear-gradient(135deg,#ffd700,#ff6b00,#ffd700);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite;}
@keyframes shimmer{0%{background-position:0%}100%{background-position:200%}}
.menu-subtitle{font-size:1rem;color:rgba(255,255,255,.4);letter-spacing:8px;margin-top:-.5rem;}
.menu-stats-bar{display:flex;gap:1.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:.4rem 1.2rem;font-size:.88rem;}
.menu-stats-bar strong{color:#ffd700;}

.menu-buttons{display:flex;flex-direction:column;gap:.8rem;width:280px;}
.btn-gold{background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:50px;padding:.9rem 2rem;font-family:'Tajawal',sans-serif;font-size:1.15rem;font-weight:700;color:#1a0800;cursor:pointer;transition:all .25s;box-shadow:0 4px 24px rgba(255,215,0,.4);width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(255,215,0,.6);}
.btn-silver{background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:.75rem 2rem;font-family:'Tajawal',sans-serif;font-size:1rem;color:#e0e8ff;cursor:pointer;transition:all .25s;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;}
.btn-silver:hover{background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.1));transform:translateY(-2px);}
.btn-badge{background:rgba(255,215,0,.2);border:1px solid rgba(255,215,0,.4);border-radius:10px;padding:.1rem .5rem;font-size:.72rem;color:#ffd700;}
.btn-outline{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:50px;padding:.6rem 2rem;font-family:'Tajawal',sans-serif;font-size:.95rem;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s;width:100%;}
.btn-outline:hover{color:#fff;border-color:rgba(255,255,255,.3);}
.diff-row{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:rgba(255,255,255,.5);}
.dbtn{padding:.35rem .9rem;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:transparent;color:rgba(255,255,255,.5);font-family:'Tajawal',sans-serif;font-size:.85rem;cursor:pointer;transition:all .2s;}
.dbtn.active,.dbtn:hover{background:rgba(255,215,0,.2);border-color:#ffd700;color:#ffd700;}

/* ========== WORKSHOP / LAB ========== */
#workshopScreen,#labScreen{background:rgba(5,10,18,.98);align-items:flex-start;overflow:hidden;}
.ws-container{width:100%;height:100%;display:flex;flex-direction:column;padding:1rem 1.5rem;}
.ws-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-shrink:0;}
.ws-header h2{font-size:1.5rem;font-weight:700;color:#ffd700;}
.ws-coins{background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);border-radius:20px;padding:.3rem .9rem;font-size:.95rem;margin-right:auto;}
.ws-coins strong{color:#ffd700;font-size:1.1rem;}
.btn-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.35rem .8rem;font-family:'Tajawal',sans-serif;color:#e0e8ff;cursor:pointer;font-size:.9rem;}
.btn-close:hover{background:rgba(255,255,255,.15);}
.ws-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-shrink:0;}
.wstab{padding:.5rem 1.2rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.05);font-family:'Tajawal',sans-serif;color:rgba(255,255,255,.5);cursor:pointer;font-size:.9rem;transition:all .2s;}
.wstab.active{background:rgba(255,215,0,.15);border-color:rgba(255,215,0,.4);color:#ffd700;}
.ws-content{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem;align-content:start;padding-bottom:1rem;}
.ws-content::-webkit-scrollbar{width:4px;}
.ws-content::-webkit-scrollbar-thumb{background:rgba(255,215,0,.3);border-radius:2px;}

.ws-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;transition:all .2s;}
.ws-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);}
.ws-card.maxed{border-color:rgba(255,215,0,.4);background:rgba(255,215,0,.05);}
.ws-card-header{display:flex;align-items:center;gap:.6rem;}
.wc-icon{font-size:1.6rem;}
.wc-name{font-weight:700;font-size:.95rem;}
.wc-level{margin-right:auto;background:rgba(255,255,255,.08);border-radius:10px;padding:.15rem .5rem;font-size:.8rem;color:rgba(255,255,255,.6);}
.ws-card.maxed .wc-level{color:#ffd700;}
.wc-desc{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.4;}
.wc-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;}
.wc-bar-fill{height:100%;background:linear-gradient(90deg,#ffd700,#ff8c00);border-radius:3px;transition:width .3s;}
.wc-footer{display:flex;align-items:center;justify-content:space-between;}
.wc-cost{font-size:.85rem;color:#ffd700;}
.wc-btn{background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:8px;padding:.3rem .8rem;font-family:'Tajawal',sans-serif;font-size:.8rem;font-weight:700;color:#1a0800;cursor:pointer;transition:all .2s;}
.wc-btn:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.3);cursor:default;}
.wc-btn:not(:disabled):hover{box-shadow:0 2px 12px rgba(255,215,0,.5);}

.lab-card{background:rgba(0,100,150,.1);border:1px solid rgba(0,150,200,.2);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;}
.lab-timer{font-size:.8rem;color:#4fc3f7;margin-top:.3rem;}

/* ========== HELP ========== */
#helpScreen{background:rgba(5,10,18,.97);z-index:60;}
.help-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2rem;max-width:520px;width:92%;display:flex;flex-direction:column;gap:1rem;}
.help-box h2{text-align:center;font-size:1.8rem;color:#ffd700;}
.help-items{display:flex;flex-direction:column;gap:.7rem;}
.help-item{background:rgba(255,255,255,.04);border-radius:10px;padding:.7rem;font-size:.9rem;line-height:1.5;}

/* ========== GAME SCREEN ========== */
#gameScreen{padding:0;background:#050a12;}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;}

/* ========== TOP HUD ========== */
#topHud{position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.5));border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;padding:0 .8rem;gap:.8rem;z-index:20;}
.hud-block{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:60px;}
.hud-label{font-size:.68rem;color:rgba(255,255,255,.4);text-transform:uppercase;}
.hud-val{font-size:1rem;font-weight:700;}
.hud-val.gold{color:#ffd700;}
.hud-val.gem{color:#7c4dff;}
.center-hud{flex:1;}
.hp-bar-wrap{width:100%;height:4px;background:rgba(255,255,255,.1);border-radius:2px;}
.hp-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:2px;transition:width .3s;}
.kill-count{font-size:.95rem;font-weight:700;color:#ef9a9a;}
.kill-count span{font-size:.7rem;font-weight:400;color:rgba(255,255,255,.4);}
.hud-btns{display:flex;gap:.4rem;}
.hbtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.25rem .55rem;font-size:.9rem;cursor:pointer;color:#fff;transition:all .2s;font-family:'Tajawal',sans-serif;}
.hbtn:hover{background:rgba(255,255,255,.18);}

/* ========== SIDE PANEL ========== */
#sidePanel{position:absolute;top:56px;right:0;width:190px;max-height:calc(100vh - 56px - 50px);overflow-y:auto;background:linear-gradient(to left,rgba(0,0,0,.85),rgba(0,0,0,.4));border-right:none;border-left:1px solid rgba(255,255,255,.07);padding:.8rem .6rem;z-index:20;display:flex;flex-direction:column;gap:.5rem;}
#sidePanel::-webkit-scrollbar{width:3px;}
#sidePanel::-webkit-scrollbar-thumb{background:rgba(255,215,0,.2);}
.sp-title{font-size:.78rem;color:rgba(255,255,255,.4);text-align:center;margin-bottom:.3rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.4rem;}
.upg-row{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.55rem;display:flex;align-items:center;gap:.5rem;font-size:.82rem;}
.upg-row .ui{font-size:1.1rem;}
.upg-info{flex:1;}
.upg-name{font-size:.8rem;font-weight:700;line-height:1.2;}
.upg-lv{font-size:.7rem;color:rgba(255,255,255,.4);}
.upg-buy{background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:6px;padding:.2rem .5rem;font-size:.75rem;font-weight:700;color:#1a0800;cursor:pointer;white-space:nowrap;}
.upg-buy:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.3);cursor:default;}

/* ========== BOTTOM ========== */
#bottomBar{position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.3));border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:2rem;z-index:20;padding:0 1rem;}
.wave-timer{font-size:1rem;font-weight:700;color:#ffd700;}
.boss-alert{font-size:1rem;font-weight:700;color:#f44336;animation:blink 0.5s ease-in-out infinite alternate;}
@keyframes blink{from{opacity:.4;}to{opacity:1;}}
.boss-alert.hidden{display:none;}

/* ========== UPGRADE POPUP ========== */
.upgrade-popup{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;gap:1.5rem;}
.upgrade-popup.hidden{display:none;}
.up-title{font-size:2rem;font-weight:900;color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.5);}
.up-choices{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;}
.up-card{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.15);border-radius:16px;padding:1.4rem;width:200px;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;}
.up-card:hover{background:rgba(255,215,0,.1);border-color:#ffd700;transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,215,0,.3);}
.up-card-icon{font-size:2.5rem;}
.up-card-name{font-size:1rem;font-weight:700;}
.up-card-desc{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.4;}
.up-card-val{font-size:1rem;font-weight:700;color:#4caf50;}
.up-card.rare{border-color:rgba(100,100,255,.6);}
.up-card.rare:hover{border-color:#7c4dff;background:rgba(100,80,255,.1);}
.up-card.epic{border-color:rgba(200,50,200,.6);}
.up-card.epic:hover{border-color:#e040fb;background:rgba(180,40,180,.1);}

/* ========== OVERLAYS ========== */
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:40;}
.overlay.hidden{display:none;}
.ov-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:2.5rem 3rem;display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:280px;}
.ov-box h2{font-size:1.8rem;color:#ffd700;}

/* ========== RESULT ========== */
#resultScreen{background:radial-gradient(ellipse at center,rgba(20,20,60,.9) 0%,rgba(2,5,12,.98) 70%);}
.result-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:2.5rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;min-width:360px;max-width:95vw;}
.res-icon{font-size:5rem;animation:resBounce .5s cubic-bezier(.2,1,.3,1);}
@keyframes resBounce{0%{transform:scale(0) rotate(-20deg);}80%{transform:scale(1.15) rotate(5deg);}100%{transform:scale(1) rotate(0)}}
.result-box h2{font-size:2.2rem;font-weight:900;color:#ffd700;}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;}
.res-stat{background:rgba(255,255,255,.05);border-radius:10px;padding:.7rem;text-align:center;}
.res-stat .rv{font-size:1.5rem;font-weight:700;color:#ffd700;}
.res-stat .rl{font-size:.8rem;color:rgba(255,255,255,.4);}
.res-rewards{display:flex;gap:1rem;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);border-radius:12px;padding:.8rem 1.5rem;align-items:center;font-size:1rem;}
.res-rewards strong{color:#ffd700;font-size:1.2rem;}
.res-btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;width:100%;}
.res-btns .btn-gold,.res-btns .btn-silver,.res-btns .btn-outline,.res-btns .btn-gem{min-width:130px;width:auto;}

/* ========== GEM BUTTON ========== */
.btn-gem{background:linear-gradient(135deg,#7c4dff,#e040fb);border:none;border-radius:50px;padding:.75rem 2rem;font-family:'Tajawal',sans-serif;font-size:1rem;font-weight:700;color:#fff;cursor:pointer;transition:all .25s;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 24px rgba(124,77,255,.5);}
.btn-gem:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(224,64,251,.6);}

/* ========== GEM SHOP SCREEN ========== */
#gemShopScreen{background:radial-gradient(ellipse at 30% 20%,#1a0a3a 0%,#080218 100%);align-items:flex-start;overflow:hidden;}
.gemshop-container{width:100%;height:100%;display:flex;flex-direction:column;padding:1.2rem 2rem;max-width:900px;margin:0 auto;}

.gemshop-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.gemshop-title{display:flex;align-items:center;gap:1rem;flex:1;}
.gemshop-icon{font-size:3rem;filter:drop-shadow(0 0 20px #e040fb);}
.gemshop-title h2{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,#e040fb,#7c4dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gemshop-title p{font-size:.85rem;color:rgba(255,255,255,.5);}
.gemshop-balance{background:rgba(124,77,255,.15);border:1px solid rgba(124,77,255,.3);border-radius:20px;padding:.45rem 1.2rem;font-size:1rem;color:#d1c4e9;}
.gemshop-balance strong{color:#e040fb;font-size:1.2rem;}

/* Daily reward strip */
.gemshop-daily{display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,rgba(255,215,0,.1),rgba(255,140,0,.05));border:1px solid rgba(255,215,0,.25);border-radius:16px;padding:1rem 1.5rem;margin-bottom:1.5rem;}
.daily-icon{font-size:2.5rem;animation:towerBob 2s ease-in-out infinite;}
.daily-info{flex:1;}
.daily-title{font-size:1rem;font-weight:700;color:#ffd700;}
.daily-desc{font-size:.82rem;color:rgba(255,255,255,.5);}
.btn-daily{background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:30px;padding:.6rem 1.5rem;font-family:'Tajawal',sans-serif;font-size:.95rem;font-weight:700;color:#1a0800;cursor:pointer;transition:all .25s;white-space:nowrap;box-shadow:0 4px 16px rgba(255,215,0,.5);}
.btn-daily:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(255,215,0,.7);}
.btn-daily:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.3);cursor:default;box-shadow:none;transform:none;}

/* Gem packs grid */
.gemshop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;overflow-y:auto;flex:1;padding-bottom:1rem;}
.gemshop-grid::-webkit-scrollbar{width:4px;}
.gemshop-grid::-webkit-scrollbar-thumb{background:rgba(124,77,255,.3);border-radius:2px;}

.gem-pack{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.2rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;cursor:pointer;transition:all .28s;position:relative;overflow:hidden;}
.gem-pack::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--pack-c1,#7c4dff),var(--pack-c2,#e040fb));opacity:0;transition:opacity .3s;}
.gem-pack:hover{transform:translateY(-5px);border-color:rgba(224,64,251,.5);box-shadow:0 12px 40px rgba(124,77,255,.4);}
.gem-pack:hover::before{opacity:.12;}
.gem-pack.featured{border-color:rgba(255,215,0,.5);background:rgba(255,215,0,.08);}
.gem-pack.featured::before{--pack-c1:#ffd700;--pack-c2:#ff8c00;}

.pack-badge{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#f44336,#ff7043);border-radius:6px;padding:.15rem .45rem;font-size:.7rem;font-weight:700;color:#fff;}
.pack-badge.popular{background:linear-gradient(135deg,#7c4dff,#e040fb);}
.pack-badge.best{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#1a0800;}

.pack-gems{display:flex;flex-direction:column;align-items:center;gap:.2rem;position:relative;z-index:1;}
.pack-gem-icon{font-size:2.5rem;filter:drop-shadow(0 0 10px rgba(224,64,251,.6));animation:gemFloat 3s ease-in-out infinite;}
@keyframes gemFloat{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-6px) rotate(3deg);}}
.pack-gem-amount{font-size:1.6rem;font-weight:900;color:#e040fb;}
.pack-gem-bonus{font-size:.75rem;color:#4caf50;font-weight:700;}

.pack-price{font-size:.9rem;font-weight:700;color:#ffd700;background:rgba(255,215,0,.1);border-radius:20px;padding:.25rem .75rem;position:relative;z-index:1;}
.pack-free-price{font-size:.9rem;font-weight:700;color:#4caf50;background:rgba(76,175,80,.1);border-radius:20px;padding:.25rem .75rem;position:relative;z-index:1;}
.pack-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);transform:translateX(-100%);animation:shimmerPass 2.5s linear infinite;}
@keyframes shimmerPass{0%{transform:translateX(-100%);}100%{transform:translateX(200%);}}

/* Watch Ad button */
.gemshop-ad{margin-top:.5rem;}
.btn-ad{display:flex;align-items:center;gap:1rem;background:rgba(33,150,243,.1);border:1px solid rgba(33,150,243,.3);border-radius:14px;padding:.9rem 1.5rem;width:100%;font-family:'Tajawal',sans-serif;color:#90caf9;cursor:pointer;transition:all .2s;}
.btn-ad:hover{background:rgba(33,150,243,.2);border-color:rgba(33,150,243,.6);}
.btn-ad span{font-size:2rem;}
.ad-title{font-size:.95rem;font-weight:700;text-align:right;}
.ad-desc{font-size:.8rem;color:#4fc3f7;text-align:right;}

/* Purchase confirm toast */
.gem-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(60px);background:rgba(30,10,60,.95);border:1px solid rgba(224,64,251,.4);border-radius:30px;padding:.7rem 2rem;font-size:1rem;font-weight:700;color:#e040fb;z-index:999;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;opacity:0;white-space:nowrap;}
.gem-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

/* ========== TOWER HUD BUTTON ========== */
.hbtn-tower{background:linear-gradient(135deg,#ff7043,#ffd740)!important;color:#1a0800!important;font-size:1rem;}
.hbtn-tower:hover{box-shadow:0 0 16px rgba(255,112,67,.7)!important;}

/* ========== TOWER BUILD MODAL ========== */
.tower-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:600;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.tower-modal.hidden{display:none;}
.tower-modal-box{background:linear-gradient(160deg,#0d1b2e 0%,#060e1c 100%);border:1px solid rgba(100,180,255,.2);border-radius:20px;width:min(560px,95vw);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.8);}
.tower-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1px solid rgba(100,180,255,.12);font-size:1.1rem;font-weight:700;color:#90caf9;}
.tmclose{background:rgba(255,255,255,.06);border:none;color:#90caf9;font-size:1.1rem;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:.2s;}
.tmclose:hover{background:rgba(255,80,80,.2);color:#ff5252;}
.tower-modal-body{padding:1.2rem 1.4rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;}

.tm-section-title{font-size:.8rem;font-weight:700;color:rgba(144,202,249,.6);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem;}

.tm-types{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.tm-type-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.6rem .4rem;font-family:'Tajawal',sans-serif;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.7);cursor:pointer;transition:all .22s;line-height:1.3;}
.tm-type-btn small{font-size:.7rem;opacity:.65;font-weight:400;}
.tm-type-btn:hover{background:rgba(100,180,255,.12);border-color:rgba(100,180,255,.4);color:#fff;}
.tm-type-btn.active{background:rgba(100,180,255,.18);border-color:#64b5f6;color:#fff;box-shadow:0 0 12px rgba(100,180,255,.3);}
.tm-type-btn[data-tid="cannon"].active{border-color:#ff7043;background:rgba(255,112,67,.15);}
.tm-type-btn[data-tid="gatling"].active{border-color:#26c6da;background:rgba(38,198,218,.15);}
.tm-type-btn[data-tid="rocket"].active{border-color:#ab47bc;background:rgba(171,71,188,.15);}
.tm-type-btn[data-tid="laser"].active{border-color:#00e5ff;background:rgba(0,229,255,.15);}

.tm-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;}
.tm-slot-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.55rem .3rem;font-family:'Tajawal',sans-serif;font-size:.75rem;color:rgba(255,255,255,.55);cursor:pointer;transition:all .2s;text-align:center;line-height:1.3;}
.tm-slot-btn:hover{background:rgba(100,180,255,.1);border-color:rgba(100,180,255,.35);color:#fff;}
.tm-slot-btn.selected{border-color:#ffd740;background:rgba(255,215,64,.12);color:#ffd740;}
.tm-slot-btn.occupied-own{border-color:#4caf50;background:rgba(76,175,80,.1);color:#a5d6a7;}
.tm-slot-icon{font-size:1.1rem;}
.tm-slot-lv{font-size:.65rem;color:#ffd740;}

.tm-info{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.8rem 1rem;font-size:.83rem;color:rgba(255,255,255,.7);min-height:52px;}
.tm-info strong{color:#ffd740;}
.tm-info .tm-cost{color:#4fc3f7;font-weight:700;}

.tm-actions{display:flex;gap:.6rem;flex-wrap:wrap;}
.btn-build{flex:2;background:linear-gradient(135deg,#1565c0,#1e88e5);border:none;border-radius:10px;padding:.65rem;font-family:'Tajawal',sans-serif;font-size:.9rem;font-weight:700;color:#fff;cursor:pointer;transition:all .2s;}
.btn-build:hover{filter:brightness(1.15);transform:translateY(-1px);}
.btn-build:disabled{opacity:.35;cursor:default;transform:none;}
.btn-upgrade-t{flex:2;background:linear-gradient(135deg,#6a1b9a,#ab47bc);border:none;border-radius:10px;padding:.65rem;font-family:'Tajawal',sans-serif;font-size:.9rem;font-weight:700;color:#fff;cursor:pointer;transition:all .2s;}
.btn-upgrade-t:hover{filter:brightness(1.15);transform:translateY(-1px);}
.btn-upgrade-t:disabled{opacity:.35;cursor:default;transform:none;}
.btn-sell{flex:1;background:rgba(255,150,0,.12);border:1px solid rgba(255,150,0,.3);border-radius:10px;padding:.65rem;font-family:'Tajawal',sans-serif;font-size:.9rem;font-weight:700;color:#ffb74d;cursor:pointer;transition:all .2s;}
.btn-sell:hover{background:rgba(255,150,0,.22);}
.btn-sell:disabled{opacity:.35;cursor:default;}

#unitBar {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(10, 15, 30, 0.85);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  z-index: 100;
}
.unit-btn {
  background: linear-gradient(180deg, #2a3a5a, #1a253a);
  border: 1px solid #4a5a7a;
  border-radius: 8px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 60px;
  cursor: pointer;
  transition: all 0.2s;
}
.unit-btn:hover {
  background: linear-gradient(180deg, #3a4a6a, #2a3a5a);
  border-color: #ffd700;
  transform: translateY(-2px);
}
.unit-btn:active {
  transform: translateY(1px);
}
.unit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}
.unit-icon {
  font-size: 1.5rem;
  margin-bottom: 2px;
}
.unit-cost {
  font-size: 0.7rem;
  font-family: 'Tajawal', sans-serif;
  color: #ffd700;
  font-weight: bold;
}