@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Poppins:wght@300;400;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --gold:#FFD700;--blue:#00BFFF;--green:#00FF88;--red:#FF4444;--pink:#FF00FF;
  --dark:#120E1E;--card:#1D1730;--card2:#2A2244;
  --text:#F0EDFF;--sub:#9D94BA;
  --glow:0 0 20px rgba(0,191,255,0.4);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--dark);font-family:'Nunito',sans-serif;color:var(--text);}

/* ── SPLASH ── */
#splash-screen{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:var(--dark);flex-direction:column;}
.splash-bg{position:absolute;inset:0;background:radial-gradient(circle at top right,#2A2244 0%,var(--dark) 70%);}
.splash-content{position:relative;text-align:center;z-index:2;}
.splash-icon{font-size:4rem;animation:bounce 2s infinite ease-in-out;}
@keyframes bounce{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-15px) scale(1.05);}}
.splash-content h1{font-family:'Poppins',sans-serif;font-size:clamp(2.5rem,8vw,4rem);font-weight:800;line-height:1;margin:10px 0;text-shadow:0 0 30px rgba(255,0,255,0.6);}
.splash-content h1 span{color:var(--pink);display:block;font-size:0.6em;letter-spacing:4px;}
.splash-sub{color:var(--sub);font-size:1.1rem;letter-spacing:2px;margin-bottom:30px;}
.splash-bar{width:280px;height:6px;background:var(--card2);border-radius:6px;margin:0 auto 15px;overflow:hidden;}
.splash-progress{height:100%;background:linear-gradient(90deg,var(--blue),var(--pink));border-radius:6px;width:0%;transition:width .3s ease;}
.splash-txt{font-size:0.8rem;color:var(--sub);letter-spacing:1px;}

/* ── MAIN MENU ── */
#main-menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
#menuBg{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.menu-overlay{position:relative;z-index:2;background:rgba(29,23,48,0.85);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:30px;width:90%;max-width:450px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.5);}
.menu-header .mall-logo{font-size:3.5rem;filter:drop-shadow(0 0 15px var(--pink));margin-bottom:10px;}
.menu-header h1{font-family:'Poppins',sans-serif;font-size:2.8rem;line-height:1;font-weight:800;color:#fff;}
.menu-header h1 span{color:var(--pink);}
.menu-header p{color:var(--sub);margin:10px 0 20px;}

.player-stats{display:flex;justify-content:space-around;background:var(--card2);border-radius:16px;padding:15px;margin-bottom:25px;}
.player-stats .stat span{font-size:1.3rem;font-weight:800;color:var(--gold);}
.player-stats .stat small{color:var(--sub);font-size:0.7rem;text-transform:uppercase;}

.menu-btns{display:flex;flex-direction:column;gap:12px;margin-bottom:25px;}
.btn-primary{background:linear-gradient(135deg,var(--pink),#FF6B6B);border:none;border-radius:12px;color:#fff;font-family:'Nunito',sans-serif;font-size:1.2rem;font-weight:800;padding:16px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 5px 20px rgba(255,0,255,0.4);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,0,255,0.6);}
.btn-primary:active{transform:scale(0.96);}
.btn-sec{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:#fff;font-family:'Nunito',sans-serif;font-size:1rem;font-weight:700;padding:12px;cursor:pointer;transition:all 0.2s;}
.btn-sec:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}

.sound-controls{display:flex;justify-content:center;gap:15px;}
.sound-controls button{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:50%;width:45px;height:45px;font-size:1.2rem;cursor:pointer;color:#fff;transition:0.2s;}
.sound-controls button:hover{background:rgba(255,255,255,0.15);}

/* ── GAME SCREEN ── */
#game-screen{position:fixed;inset:0;display:flex;flex-direction:column;}
.game-hud{position:absolute;top:0;left:0;width:100%;background:rgba(29,23,48,0.9);backdrop-filter:blur(10px);padding:10px 15px;display:flex;justify-content:space-between;align-items:center;z-index:10;border-bottom:1px solid rgba(255,255,255,0.05);}
.pause-btn{background:rgba(255,255,255,0.1);border:none;border-radius:8px;color:#fff;width:40px;height:40px;font-size:1.2rem;cursor:pointer;}
.hud-resources{display:flex;gap:15px;flex-wrap:wrap;}
.res{background:rgba(0,0,0,0.4);padding:5px 12px;border-radius:20px;font-weight:700;font-size:0.95rem;display:flex;align-items:center;gap:5px;}
.res span{color:var(--gold);}
.hud-income{font-size:0.9rem;font-weight:800;color:var(--green);background:rgba(0,255,136,0.1);padding:5px 12px;border-radius:20px;}

#gameCanvas{flex:1;width:100%;height:100%;touch-action:none;}

.build-toolbar{position:absolute;bottom:0;left:0;width:100%;background:rgba(29,23,48,0.95);backdrop-filter:blur(10px);padding:15px;display:flex;gap:15px;z-index:10;border-top:1px solid rgba(255,255,255,0.05);}
.toolbar-scroll{flex:1;display:flex;gap:10px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none;}
.toolbar-scroll::-webkit-scrollbar{display:none;}
.tb-btn{background:var(--card2);border:2px solid transparent;border-radius:12px;color:#fff;min-width:70px;padding:10px 5px;cursor:pointer;transition:0.2s;}
.tb-btn.active{border-color:var(--pink);background:rgba(255,0,255,0.1);box-shadow:0 0 15px rgba(255,0,255,0.3);}
.tb-btn small{display:block;font-size:0.65rem;margin-top:5px;color:var(--sub);}
.collect-btn{background:linear-gradient(135deg,var(--gold),#FFA500);border:none;border-radius:12px;font-weight:800;color:#000;padding:0 20px;cursor:pointer;box-shadow:0 5px 15px rgba(255,215,0,0.4);animation:pulse-gold 2s infinite;}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.4);}50%{box-shadow:0 0 20px rgba(255,215,0,0.8);transform:scale(1.05);}}

.side-panel{position:absolute;right:15px;top:80px;display:flex;flex-direction:column;gap:10px;z-index:10;}
.side-btn{background:rgba(42,34,68,0.9);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#fff;padding:10px;font-size:0.8rem;font-weight:700;cursor:pointer;text-align:left;transition:0.2s;box-shadow:0 4px 10px rgba(0,0,0,0.3);}
.side-btn:hover{background:var(--pink);border-color:var(--pink);}

.visitor-counter{position:absolute;left:15px;top:80px;background:rgba(29,23,48,0.9);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px;text-align:center;z-index:10;}
.vc-label{font-size:0.7rem;color:var(--sub);text-transform:uppercase;}
.vc-num{font-size:1.8rem;font-weight:800;color:var(--blue);}
.vc-queue{font-size:0.75rem;color:var(--gold);margin-top:2px;}

/* ── OVERLAYS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.overlay-box{background:var(--card);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:30px;width:100%;max-width:400px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.6);}
.big-box{max-width:600px;max-height:85vh;display:flex;flex-direction:column;}
.overlay-box h2{font-family:'Poppins',sans-serif;font-size:1.8rem;margin-bottom:20px;color:#fff;}
.overlay-box .btn-primary, .overlay-box .btn-sec{width:100%;margin-top:10px;}

.shop-grid, .staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;overflow-y:auto;padding-right:5px;margin-bottom:20px;flex:1;}
.shop-grid::-webkit-scrollbar, .staff-list::-webkit-scrollbar, .achieve-list::-webkit-scrollbar{width:6px;}
.shop-grid::-webkit-scrollbar-thumb, .staff-list::-webkit-scrollbar-thumb, .achieve-list::-webkit-scrollbar-thumb{background:var(--card2);border-radius:3px;}

.shop-item{background:var(--card2);border:1px solid rgba(255,255,255,0.05);border-radius:16px;padding:15px;text-align:left;display:flex;flex-direction:column;}
.shop-item h3{font-size:1.1rem;color:var(--pink);margin-bottom:5px;}
.shop-item p{font-size:0.8rem;color:var(--sub);margin-bottom:10px;}
.shop-stats{display:flex;justify-content:space-between;font-size:0.85rem;margin-bottom:10px;background:rgba(0,0,0,0.2);padding:8px;border-radius:8px;}
.shop-stats span{color:var(--gold);font-weight:700;}

.staff-item{background:var(--card2);border-radius:16px;padding:15px;display:flex;align-items:center;gap:15px;text-align:left;}
.staff-icon{font-size:2rem;background:rgba(0,0,0,0.3);padding:10px;border-radius:12px;}
.staff-info flex{flex:1;}
.staff-info h4{color:#fff;font-size:1rem;}
.staff-info p{color:var(--sub);font-size:0.75rem;}

.achieve-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;margin-bottom:20px;}
.achieve-item{display:flex;align-items:center;gap:15px;background:var(--card2);padding:15px;border-radius:16px;text-align:left;border:1px solid transparent;}
.achieve-item.unlocked{border-color:var(--gold);background:rgba(255,215,0,0.1);}
.achieve-icon{font-size:2rem;}
.achieve-info h4{color:#fff;}
.achieve-info p{color:var(--sub);font-size:0.8rem;}

/* ── TOAST ── */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(29,23,48,0.95);border:1px solid var(--pink);border-radius:12px;padding:12px 24px;color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(255,0,255,0.3);opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);z-index:200;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

@media(max-width:480px){
  .menu-header h1{font-size:2.2rem;}
  .player-stats{padding:10px;}
  .player-stats .stat span{font-size:1.1rem;}
  .game-hud{flex-wrap:wrap;}
  .res{font-size:0.8rem;padding:4px 8px;}
  .side-panel{top:120px;}
  .visitor-counter{top:120px;}
}