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

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --deep:#031525;--water:#0A3A5C;--teal:#00E5FF;--cyan:#00BFFF;--gold:#FFD700;
  --panel:#06233B;--border:#114B79;--text:#E0F7FA;
  --glow:0 0 15px rgba(0,229,255,0.5);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--deep);font-family:'Raleway',sans-serif;color:var(--text);}

/* ── SPLASH ── */
#splash-screen{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at bottom,var(--water),var(--deep));flex-direction:column;}
#splashCanvas{position:absolute;inset:0;width:100%;height:100%;}
.splash-ui{position:relative;z-index:2;text-align:center;}
.sea-icon{font-size:4rem;animation:float 3s ease-in-out infinite;filter:drop-shadow(var(--glow));}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}
.splash-ui h1{font-family:'Cinzel',serif;font-size:clamp(2.5rem,8vw,4rem);font-weight:700;color:#fff;margin:10px 0;line-height:1.1;text-shadow:var(--glow);}
.splash-ui h1 span{color:var(--teal);font-size:0.6em;letter-spacing:6px;display:block;}
.load-bar{width:280px;height:4px;background:var(--panel);border-radius:4px;margin:20px auto 10px;overflow:hidden;}
#splashProgress{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--teal));box-shadow:var(--glow);transition:width 0.3s;}
#splashText{font-size:0.8rem;color:var(--cyan);text-transform:uppercase;letter-spacing:3px;}

/* ── 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:linear-gradient(to bottom,var(--water),var(--deep));}
.menu-ui{position:relative;z-index:2;background:rgba(6,35,59,0.85);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:20px;padding:30px;width:90%;max-width:450px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,0.6);}
.sea-logo{font-size:3.5rem;margin-bottom:10px;filter:drop-shadow(var(--glow));}
.menu-ui h1{font-family:'Cinzel',serif;font-size:2.8rem;color:#fff;line-height:1.1;margin-bottom:20px;text-shadow:0 0 20px rgba(0,229,255,0.4);}
.menu-ui h1 span{font-size:0.5em;color:var(--teal);letter-spacing:4px;display:block;}

.stats-grid{display:flex;justify-content:space-around;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:12px;padding:15px;margin-bottom:25px;}
.stats-grid div{font-size:0.7rem;color:var(--cyan);text-transform:uppercase;letter-spacing:1px;}
.stats-grid span{display:block;font-size:1.3rem;font-weight:700;color:var(--gold);margin-bottom:5px;}

.menu-btns{display:flex;flex-direction:column;gap:12px;}
.btn-sea{background:linear-gradient(135deg,var(--water),var(--teal));border:none;border-radius:10px;color:#fff;font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;padding:15px;cursor:pointer;transition:all 0.2s;box-shadow:var(--glow);}
.btn-sea:hover{transform:translateY(-2px);box-shadow:0 5px 25px rgba(0,229,255,0.6);}
.btn-sea:active{transform:scale(0.98);}
.btn-sea2{background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;color:#fff;font-family:'Raleway',sans-serif;font-size:1rem;font-weight:600;padding:12px;cursor:pointer;transition:all 0.2s;}
.btn-sea2:hover{background:rgba(0,229,255,0.1);border-color:var(--teal);}

/* ── GAME SCREEN ── */
#game-screen{position:fixed;inset:0;display:flex;flex-direction:column;}
.hud{position:absolute;top:0;left:0;width:100%;background:rgba(6,35,59,0.9);backdrop-filter:blur(5px);border-bottom:1px solid var(--border);padding:10px 15px;display:flex;align-items:center;justify-content:space-between;z-index:10;}
.pause-btn{background:rgba(0,229,255,0.1);border:1px solid var(--teal);color:var(--teal);width:38px;height:38px;border-radius:8px;font-size:1.2rem;cursor:pointer;}
.hud-res{display:flex;gap:15px;flex-wrap:wrap;}
.hud-res > span{background:rgba(0,0,0,0.4);padding:5px 12px;border-radius:15px;font-size:0.9rem;font-weight:600;}
.hud-res span span{color:var(--gold);font-weight:700;}
#hudO2{color:var(--teal);}

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

.build-toolbar{position:absolute;bottom:0;left:0;width:100%;background:rgba(6,35,59,0.95);border-top:1px solid var(--border);padding:15px;z-index:10;}
.tool-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none;}
.tool-scroll::-webkit-scrollbar{display:none;}
.t-btn{background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--text);min-width:70px;padding:10px 5px;cursor:pointer;transition:0.2s;}
.t-btn.active{background:rgba(0,229,255,0.15);border-color:var(--teal);box-shadow:inset 0 0 15px rgba(0,229,255,0.3);}
.t-btn small{display:block;font-size:0.65rem;margin-top:6px;}

.o2-warning{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(255,0,0,0.8);color:#fff;font-weight:700;padding:8px 20px;border-radius:20px;animation:flash-red 1s infinite alternate;pointer-events:none;z-index:10;}
@keyframes flash-red{from{box-shadow:0 0 10px red;}to{box-shadow:0 0 30px red;}}

.depth-expand{position:absolute;right:15px;top:70px;z-index:10;}
#expandBtn{background:linear-gradient(to bottom,var(--panel),var(--border));border:1px solid var(--teal);color:var(--teal);padding:10px 15px;border-radius:8px;font-weight:700;font-size:0.8rem;cursor:pointer;box-shadow:var(--glow);}

/* ── OVERLAYS ── */
.overlay{position:fixed;inset:0;background:rgba(3,21,37,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;}
.overlay-box{background:var(--panel);border:1px solid var(--teal);border-radius:16px;padding:30px;width:90%;max-width:380px;text-align:center;box-shadow:var(--glow);}
.big-box{max-width:600px;max-height:85vh;display:flex;flex-direction:column;}
.overlay-box h2{font-family:'Cinzel',serif;font-size:1.8rem;color:var(--teal);margin-bottom:20px;}
.overlay-box button{width:100%;margin-top:12px;}

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

.list-item{background:rgba(0,0,0,0.3);border:1px solid var(--border);padding:15px;border-radius:12px;text-align:left;display:flex;align-items:center;gap:15px;}
.list-icon{font-size:2rem;}
.list-info flex{flex:1;}
.list-info h4{color:#fff;font-size:1rem;}
.list-info p{color:var(--cyan);font-size:0.8rem;margin-top:4px;}

/* ── TOAST ── */
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--teal);color:var(--deep);font-weight:700;padding:10px 25px;border-radius:20px;opacity:0;pointer-events:none;transition:0.3s cubic-bezier(0.68,-0.55,0.265,1.55);z-index:200;box-shadow:var(--glow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:480px){
  .hud-res{gap:8px;}
  .hud-res > span{font-size:0.75rem;padding:4px 8px;}
  .o2-warning{top:90px;}
  .depth-expand{top:90px;}
}