@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --cyan:#00FFFF;--neon-green:#39FF14;--yellow:#FFD700;--red:#FF003C;
  --bg:#0A0F14;--panel:#121A23;--border:#1E2D3D;
  --text:#E0F0FF;--sub:#6E98B5;
  --glow-cyan:0 0 15px rgba(0,255,255,0.5);
  --glow-green:0 0 15px rgba(57,255,20,0.5);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'Share Tech Mono',monospace;color:var(--text);}

/* ── SPLASH ── */
#splash-screen{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:var(--bg);flex-direction:column;}
#splashCanvas{position:absolute;inset:0;width:100%;height:100%;}
.splash-ui{position:relative;z-index:2;text-align:center;}
.robot-icon{font-size:4.5rem;filter:drop-shadow(var(--glow-cyan));}
.pulse{animation:pulse 2s infinite alternate;}
@keyframes pulse{from{transform:scale(1);}to{transform:scale(1.1);}}
.splash-ui h1{font-family:'Orbitron',sans-serif;font-size:clamp(2rem,6vw,4rem);font-weight:900;color:#fff;margin:10px 0;line-height:1.2;text-shadow:var(--glow-cyan);}
.splash-ui h1 span{color:var(--cyan);font-size:0.6em;letter-spacing:4px;}
.loading-bar{width:280px;height:4px;background:var(--border);margin:20px auto 10px;overflow:hidden;position:relative;}
#splashProgress{height:100%;width:0%;background:var(--cyan);box-shadow:var(--glow-cyan);transition:width 0.3s;}
#splashText{font-size:0.9rem;color:var(--sub);text-transform:uppercase;letter-spacing:2px;}

/* ── 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;background:var(--bg);background-image:linear-gradient(rgba(0,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,0.05) 1px,transparent 1px);background-size:30px 30px;}
.menu-ui{position:relative;z-index:2;background:rgba(18,26,35,0.9);backdrop-filter:blur(10px);border:1px solid var(--cyan);border-radius:12px;padding:30px;width:90%;max-width:400px;text-align:center;box-shadow:var(--glow-cyan);}
.game-logo{margin-bottom:25px;}
.game-logo span{font-size:3rem;display:block;}
.game-logo h1{font-family:'Orbitron',sans-serif;font-size:2rem;color:#fff;line-height:1.1;margin-top:10px;}
.game-logo h1 span{font-size:0.6em;color:var(--cyan);letter-spacing:2px;display:block;}

.stats-row{display:flex;justify-content:space-between;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:25px;}
.s-box{font-size:0.7rem;color:var(--sub);text-transform:uppercase;}
.s-box span{display:block;font-size:1.2rem;font-weight:700;color:var(--cyan);margin-bottom:2px;}

.menu-btns{display:flex;flex-direction:column;gap:12px;}
.primary-btn{background:rgba(0,255,255,0.1);border:1px solid var(--cyan);border-radius:6px;color:var(--cyan);font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;padding:15px;cursor:pointer;transition:all 0.2s;box-shadow:inset 0 0 10px rgba(0,255,255,0.2);}
.primary-btn:hover{background:var(--cyan);color:var(--bg);box-shadow:var(--glow-cyan);}
.primary-btn:active{transform:scale(0.98);}
.sec-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'Share Tech Mono',monospace;font-size:1rem;padding:12px;cursor:pointer;transition:all 0.2s;}
.sec-btn:hover{background:rgba(255,255,255,0.05);border-color:var(--sub);}

/* ── GAME SCREEN ── */
#game-screen{position:fixed;inset:0;display:flex;flex-direction:column;}
.hud{position:absolute;top:0;left:0;width:100%;background:rgba(10,15,20,0.9);border-bottom:1px solid var(--cyan);padding:10px;display:flex;align-items:center;justify-content:space-between;z-index:10;}
.pause-btn{background:rgba(0,255,255,0.1);border:1px solid var(--cyan);color:var(--cyan);width:36px;height:36px;border-radius:4px;font-size:1rem;cursor:pointer;}
.hud-res{display:flex;gap:15px;flex-wrap:wrap;font-size:0.9rem;}
.hud-res span{color:var(--sub);}
.hud-res span span{color:#fff;font-weight:bold;}
.prod-rate{font-size:0.8rem;color:var(--neon-green);}

#gameCanvas{flex:1;width:100%;height:100%;touch-action:none;background:var(--bg);}

.factory-toolbar{position:absolute;bottom:0;left:0;width:100%;background:rgba(18,26,35,0.95);border-top:1px solid var(--cyan);padding:10px;z-index:10;}
.tool-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none;}
.tool-scroll::-webkit-scrollbar{display:none;}
.tool-btn{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--sub);min-width:70px;padding:10px 5px;cursor:pointer;transition:all 0.2s;}
.tool-btn.active{background:rgba(0,255,255,0.1);border-color:var(--cyan);color:var(--cyan);box-shadow:inset 0 0 10px rgba(0,255,255,0.2);}
.tool-btn small{display:block;font-size:0.65rem;margin-top:5px;text-transform:uppercase;}

.efficiency-panel{position:absolute;top:60px;right:10px;background:rgba(18,26,35,0.8);border:1px solid var(--border);padding:10px;border-radius:6px;font-size:0.75rem;color:var(--sub);z-index:10;pointer-events:none;}
.efficiency-panel span{color:var(--neon-green);font-weight:bold;}
.eff-bar{width:100%;height:4px;background:var(--bg);margin-top:5px;}
.eff-fill{height:100%;width:0%;background:var(--neon-green);box-shadow:var(--glow-green);}

/* ── OVERLAYS ── */
.overlay{position:fixed;inset:0;background:rgba(10,15,20,0.85);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:100;}
.overlay-box{background:var(--panel);border:1px solid var(--cyan);border-radius:8px;padding:25px;width:90%;max-width:350px;text-align:center;box-shadow:var(--glow-cyan);}
.big-box{max-width:600px;max-height:85vh;display:flex;flex-direction:column;}
.overlay-box h2{font-family:'Orbitron',sans-serif;font-size:1.5rem;color:var(--cyan);margin-bottom:20px;text-transform:uppercase;letter-spacing:2px;}
.overlay-box .primary-btn, .overlay-box .sec-btn{width:100%;margin-top:10px;}

.research-tree, .robot-list, #achieveList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:15px;}
.research-tree::-webkit-scrollbar, .robot-list::-webkit-scrollbar, #achieveList::-webkit-scrollbar{width:4px;}
.research-tree::-webkit-scrollbar-thumb, .robot-list::-webkit-scrollbar-thumb, #achieveList::-webkit-scrollbar-thumb{background:var(--border);}

.list-item{background:var(--bg);border:1px solid var(--border);padding:12px;border-radius:6px;text-align:left;display:flex;align-items:center;gap:12px;}
.list-icon{font-size:2rem;}
.list-info flex{flex:1;}
.list-info h4{color:#fff;font-size:0.9rem;}
.list-info p{color:var(--sub);font-size:0.75rem;margin-top:2px;}
.list-status{font-size:0.8rem;color:var(--cyan);}

/* ── TOAST ── */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--cyan);color:var(--bg);padding:8px 16px;border-radius:4px;font-weight:bold;font-size:0.9rem;opacity:0;pointer-events:none;transition:0.3s;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-20px);}

@media(max-width:480px){
  .hud-res{gap:8px;}
  .stats-row{padding:8px;}
  .efficiency-panel{top:90px;}
}