@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@300;400;700;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --jungle:#1E3B20;--leaf:#3A5F3B;--amber:#FFBF00;--amber-glow:0 0 15px rgba(255,191,0,0.5);
  --dirt:#4A3219;--dark:#0F1A10;--panel:#1A261B;--text:#E8F0E8;--red:#FF3333;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--dark);font-family:'Lato',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 center,var(--jungle) 0%,var(--dark) 80%);flex-direction:column;}
#splashCanvas{position:absolute;inset:0;width:100%;height:100%;}
.splash-ui{position:relative;z-index:2;text-align:center;}
.dino-icon{font-size:5rem;animation:stomp 1s infinite alternate;filter:drop-shadow(var(--amber-glow));}
@keyframes stomp{0%{transform:translateY(0) scale(1);}100%{transform:translateY(-10px) scale(1.1);}}
.splash-ui h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,8vw,5rem);color:var(--amber);margin:10px 0;line-height:0.9;text-shadow:0 5px 10px rgba(0,0,0,0.5);letter-spacing:2px;}
.splash-ui h1 span{color:#fff;font-size:0.6em;letter-spacing:6px;display:block;}
.load-bar{width:300px;height:6px;background:rgba(0,0,0,0.5);border-radius:3px;margin:20px auto 10px;border:1px solid var(--leaf);}
#splashProgress{height:100%;width:0%;background:linear-gradient(90deg,var(--leaf),var(--amber));box-shadow:var(--amber-glow);transition:width 0.3s;}
#splashText{font-size:0.8rem;color:var(--amber);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:var(--dark);}
.menu-ui{position:relative;z-index:2;background:rgba(26,38,27,0.9);backdrop-filter:blur(10px);border:2px solid var(--amber);border-radius:16px;padding:30px;width:90%;max-width:450px;text-align:center;box-shadow:0 10px 50px rgba(0,0,0,0.8);}
.game-logo{font-size:4rem;margin-bottom:5px;filter:drop-shadow(var(--amber-glow));}
.menu-ui h1{font-family:'Bebas Neue',sans-serif;font-size:3.5rem;color:var(--amber);line-height:1;margin-bottom:20px;}
.menu-ui h1 span{font-size:0.5em;color:#fff;letter-spacing:5px;display:block;}

.stats-row{display:flex;justify-content:space-around;background:rgba(0,0,0,0.4);border:1px solid var(--leaf);border-radius:8px;padding:15px;margin-bottom:25px;}
.s{font-size:0.7rem;color:var(--text);text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.s span{display:block;font-size:1.4rem;font-weight:900;color:var(--amber);margin-bottom:5px;}

.menu-btns{display:flex;flex-direction:column;gap:12px;}
.dino-btn{background:linear-gradient(135deg,var(--leaf),var(--jungle));border:2px solid var(--amber);border-radius:8px;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1.8rem;padding:12px;cursor:pointer;transition:all 0.2s;box-shadow:var(--amber-glow);letter-spacing:2px;}
.dino-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--amber),#FF8C00);color:var(--dark);}
.dino-btn:active{transform:scale(0.98);}
.dino-btn2{background:rgba(0,0,0,0.3);border:1px solid var(--leaf);border-radius:8px;color:var(--text);font-family:'Lato',sans-serif;font-size:1rem;font-weight:700;padding:12px;cursor:pointer;transition:all 0.2s;}
.dino-btn2:hover{background:var(--leaf);border-color:var(--amber);}

/* ── GAME SCREEN ── */
#game-screen{position:fixed;inset:0;display:flex;flex-direction:column;}
.hud{position:absolute;top:0;left:0;width:100%;background:rgba(15,26,16,0.95);border-bottom:2px solid var(--leaf);padding:10px 15px;display:flex;align-items:center;justify-content:space-between;z-index:10;}
.pause-btn{background:rgba(255,191,0,0.1);border:1px solid var(--amber);color:var(--amber);width:40px;height:40px;border-radius:6px;font-size:1.2rem;cursor:pointer;}
.hud-res{display:flex;gap:12px;flex-wrap:wrap;}
.hud-res > span{background:rgba(0,0,0,0.5);padding:5px 10px;border-radius:4px;font-size:0.9rem;font-weight:700;border:1px solid var(--leaf);}
.hud-res span span{color:var(--amber);}
.income-display{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:#00FF00;text-shadow:0 0 10px #00FF00;}

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

.build-toolbar{position:absolute;bottom:0;left:0;width:100%;background:rgba(26,38,27,0.95);border-top:2px solid var(--leaf);padding:10px;display:flex;gap:15px;z-index:10;}
.tool-scroll{flex:1;display:flex;gap:10px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none;}
.tool-scroll::-webkit-scrollbar{display:none;}
.t-btn{background:var(--panel);border:1px solid var(--leaf);border-radius:6px;color:var(--text);min-width:65px;padding:8px 4px;cursor:pointer;transition:0.2s;}
.t-btn.active{background:rgba(255,191,0,0.15);border-color:var(--amber);box-shadow:inset 0 0 15px rgba(255,191,0,0.3);}
.t-btn small{display:block;font-size:0.6rem;margin-top:5px;font-weight:700;text-transform:uppercase;}

.add-dino-btn{background:var(--amber);color:var(--dark);font-family:'Bebas Neue',sans-serif;font-size:1.4rem;border:none;border-radius:6px;padding:0 20px;cursor:pointer;box-shadow:var(--amber-glow);animation:pulse-amb 2s infinite;}
@keyframes pulse-amb{0%,100%{box-shadow:var(--amber-glow);}50%{box-shadow:0 0 25px rgba(255,191,0,0.8);transform:scale(1.05);}}

.alert-panel{position:absolute;top:70px;right:15px;display:flex;flex-direction:column;gap:10px;z-index:10;pointer-events:none;}
.alert-msg{background:rgba(255,191,0,0.9);color:var(--dark);padding:8px 15px;border-radius:4px;font-weight:900;font-size:0.8rem;animation:slide-in 0.3s;box-shadow:0 4px 10px rgba(0,0,0,0.5);}
@keyframes slide-in{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}

.emergency-banner{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(255,51,51,0.9);border:2px solid #fff;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:2rem;padding:15px 30px;border-radius:8px;box-shadow:0 0 30px red;animation:flash-red 0.5s infinite alternate;z-index:20;display:flex;align-items:center;gap:20px;}
.emergency-banner button{background:#fff;color:red;border:none;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;padding:5px 15px;cursor:pointer;border-radius:4px;}
@keyframes flash-red{from{box-shadow:0 0 10px red;}to{box-shadow:0 0 40px red;}}

/* ── OVERLAYS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.overlay-box{background:var(--panel);border:2px solid var(--leaf);border-radius:12px;padding:30px;width:100%;max-width:400px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.8);}
.big-box{max-width:600px;max-height:85vh;display:flex;flex-direction:column;}
.overlay-box h2{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;color:var(--amber);margin-bottom:20px;letter-spacing:2px;}
.overlay-box .dino-btn, .overlay-box .dino-btn2{width:100%;margin-top:10px;}

.dino-grid, .dino-shop, #achieveList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:15px;padding-right:5px;}
.dino-grid::-webkit-scrollbar, .dino-shop::-webkit-scrollbar, #achieveList::-webkit-scrollbar{width:6px;}
.dino-grid::-webkit-scrollbar-thumb, .dino-shop::-webkit-scrollbar-thumb, #achieveList::-webkit-scrollbar-thumb{background:var(--leaf);border-radius:3px;}

.list-item{background:rgba(0,0,0,0.3);border:1px solid var(--leaf);padding:15px;border-radius:8px;text-align:left;display:flex;align-items:center;gap:15px;}
.list-icon{font-size:2.5rem;background:rgba(255,191,0,0.1);padding:10px;border-radius:8px;border:1px solid var(--amber);}
.list-info flex{flex:1;}
.list-info h4{color:var(--amber);font-size:1.1rem;font-weight:900;}
.list-info p{color:var(--text);font-size:0.8rem;margin:5px 0;}
.buy-btn{background:var(--amber);border:none;color:var(--dark);font-weight:900;padding:8px 15px;border-radius:4px;cursor:pointer;}

/* ── TOAST ── */
.toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--leaf);border:1px solid var(--amber);color:#fff;font-weight:700;padding:12px 25px;border-radius:6px;opacity:0;pointer-events:none;transition:0.3s;z-index:200;box-shadow:var(--amber-glow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:480px){
  .hud-res{gap:6px;}
  .hud-res > span{font-size:0.75rem;padding:4px 6px;}
  .emergency-banner{flex-direction:column;font-size:1.5rem;width:90%;text-align:center;}
}