@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;700;900&family=IM+Fell+English:ital@0;1&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --gold:#D4AF37;--dark-gold:#996515;--crimson:#8B0000;--dark-crimson:#4A0000;
  --stone:#36454F;--dark-stone:#1A2421;--parchment:#F5DEB3;
  --bg:#12100E;--text:#F3E5AB;--glow:0 0 15px rgba(212,175,55,0.4);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'IM Fell English',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(--dark-crimson),var(--bg));flex-direction:column;}
#splashCanvas{position:absolute;inset:0;width:100%;height:100%;}
.splash-ui{position:relative;z-index:2;text-align:center;}
.dragon-icon{font-size:5rem;animation:breathe 2s infinite alternate;filter:drop-shadow(0 0 20px var(--crimson));}
@keyframes breathe{0%{transform:scale(1);}100%{transform:scale(1.1);}}
.splash-ui h1{font-family:'Cinzel Decorative',cursive;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:700;color:var(--gold);margin:10px 0;line-height:1;text-shadow:0 5px 15px rgba(0,0,0,0.8);}
.splash-ui h1 span{font-family:'Cinzel',serif;font-size:0.5em;color:var(--text);letter-spacing:6px;display:block;}
.load-bar{width:300px;height:4px;background:rgba(0,0,0,0.6);border:1px solid var(--dark-gold);margin:20px auto 10px;overflow:hidden;}
#splashProgress{height:100%;width:0%;background:linear-gradient(90deg,var(--crimson),var(--gold));box-shadow:var(--glow);transition:width 0.3s;}
#splashText{font-size:1rem;color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-family:'Cinzel',serif;}

/* ── 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);}
.menu-ui{position:relative;z-index:2;background:rgba(26,36,33,0.9);backdrop-filter:blur(10px);border:2px solid var(--dark-gold);border-radius:12px;padding:30px;width:90%;max-width:450px;text-align:center;box-shadow:0 10px 50px rgba(0,0,0,0.8);background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L100 50L50 100L0 50Z' fill='rgba(212,175,55,0.02)'/%3E%3C/svg%3E");}
.drag-logo{font-size:4rem;margin-bottom:5px;filter:drop-shadow(var(--glow));}
.menu-ui h1{font-family:'Cinzel Decorative',cursive;font-size:3rem;color:var(--gold);line-height:1;margin-bottom:20px;}
.menu-ui h1 span{font-family:'Cinzel',serif;font-size:0.5em;color:#fff;letter-spacing:4px;display:block;}

.stats-row{display:flex;justify-content:space-around;background:rgba(0,0,0,0.6);border:1px solid var(--dark-gold);padding:15px;margin-bottom:25px;}
.stats-row div{font-family:'Cinzel',serif;font-size:0.75rem;color:var(--parchment);text-transform:uppercase;}
.stats-row span{display:block;font-size:1.4rem;font-weight:900;color:var(--gold);margin-bottom:5px;font-family:'MedievalSharp',cursive;}

.menu-btns{display:flex;flex-direction:column;gap:12px;}
.drag-btn{background:linear-gradient(to bottom,var(--crimson),var(--dark-crimson));border:2px solid var(--gold);border-radius:4px;color:var(--text);font-family:'Cinzel',serif;font-size:1.4rem;font-weight:700;padding:12px;cursor:pointer;transition:all 0.2s;box-shadow:var(--glow);letter-spacing:1px;}
.drag-btn:hover{transform:translateY(-2px);background:linear-gradient(to bottom,var(--gold),var(--dark-gold));color:var(--bg);}
.drag-btn:active{transform:scale(0.98);}
.drag-btn2{background:rgba(0,0,0,0.5);border:1px solid var(--dark-gold);border-radius:4px;color:var(--parchment);font-family:'Cinzel',serif;font-size:1rem;font-weight:600;padding:12px;cursor:pointer;transition:all 0.2s;}
.drag-btn2:hover{background:var(--stone);border-color:var(--gold);}

/* ── GAME SCREEN ── */
#game-screen{position:fixed;inset:0;display:flex;flex-direction:column;}
.hud{position:absolute;top:0;left:0;width:100%;background:rgba(26,36,33,0.95);border-bottom:2px solid var(--dark-gold);padding:10px 15px;display:flex;align-items:center;justify-content:space-between;z-index:10;box-shadow:0 5px 15px rgba(0,0,0,0.5);}
.pause-btn{background:transparent;border:1px solid var(--gold);color:var(--gold);width:36px;height:36px;font-size:1rem;cursor:pointer;border-radius:4px;}
.hud-res{display:flex;gap:12px;flex-wrap:wrap;}
.hud-res > span{background:rgba(0,0,0,0.6);padding:4px 10px;border:1px solid var(--stone);font-size:0.9rem;font-family:'Cinzel',serif;font-weight:700;}
.hud-res span span{color:var(--gold);}
.element-display{font-family:'Cinzel',serif;font-size:1rem;color:var(--crimson);font-weight:700;text-shadow:0 0 10px var(--crimson);}

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

.build-toolbar{position:absolute;bottom:0;left:0;width:100%;background:rgba(26,36,33,0.95);border-top:2px solid var(--dark-gold);padding:15px;display:flex;gap:15px;z-index:10;}
.tool-scroll{flex:1;display:flex;gap:12px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none;}
.tool-scroll::-webkit-scrollbar{display:none;}
.t-btn{background:var(--stone);border:1px solid var(--dark-gold);border-radius:4px;color:var(--text);min-width:70px;padding:8px 4px;cursor:pointer;transition:0.2s;}
.t-btn.active{background:var(--dark-crimson);border-color:var(--gold);box-shadow:inset 0 0 15px rgba(212,175,55,0.3);}
.t-btn small{display:block;font-size:0.7rem;margin-top:6px;font-family:'Cinzel',serif;font-weight:600;}

.dragon-panel{position:absolute;top:70px;right:15px;background:rgba(26,36,33,0.9);border:1px solid var(--dark-gold);padding:10px;border-radius:4px;display:flex;flex-direction:column;gap:5px;z-index:10;}
.dp-label{font-family:'Cinzel',serif;font-size:0.7rem;color:var(--parchment);text-transform:uppercase;text-align:center;border-bottom:1px solid var(--stone);padding-bottom:5px;margin-bottom:5px;}
.active-dragon{font-size:1rem;font-weight:700;color:var(--gold);text-align:center;margin-bottom:5px;}
.dragon-panel button{background:rgba(0,0,0,0.5);border:1px solid var(--stone);color:var(--text);padding:5px;font-family:'Cinzel',serif;font-size:0.8rem;cursor:pointer;}
.dragon-panel button:hover{border-color:var(--gold);background:var(--dark-crimson);}

.battle-alert{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(139,0,0,0.9);border:2px solid var(--gold);color:#fff;font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;padding:10px 20px;border-radius:4px;box-shadow:0 0 20px red;animation:pulse-alert 1s infinite alternate;z-index:20;}
@keyframes pulse-alert{from{box-shadow:0 0 10px red;}to{box-shadow:0 0 30px red;transform:translateX(-50%) scale(1.05);}}

/* ── 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(--dark-stone);border:2px solid var(--dark-gold);border-radius:8px;padding:30px;width:100%;max-width:400px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.8);background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L100 50L50 100L0 50Z' fill='rgba(212,175,55,0.02)'/%3E%3C/svg%3E");}
.big-box{max-width:600px;max-height:85vh;display:flex;flex-direction:column;}
.overlay-box h2{font-family:'Cinzel Decorative',cursive;font-size:2rem;color:var(--gold);margin-bottom:20px;letter-spacing:1px;}
.overlay-box button{width:100%;margin-top:10px;}

.dragon-grid, .kingdom-buildings, #achieveList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:15px;padding-right:5px;}
.dragon-grid::-webkit-scrollbar, .kingdom-buildings::-webkit-scrollbar, #achieveList::-webkit-scrollbar{width:6px;}
.dragon-grid::-webkit-scrollbar-thumb, .kingdom-buildings::-webkit-scrollbar-thumb, #achieveList::-webkit-scrollbar-thumb{background:var(--dark-gold);}

.list-item{background:rgba(0,0,0,0.5);border:1px solid var(--stone);padding:15px;border-radius:4px;text-align:left;display:flex;align-items:center;gap:15px;}
.list-icon{font-size:2.5rem;background:rgba(212,175,55,0.1);padding:10px;border:1px solid var(--dark-gold);border-radius:4px;}
.list-info flex{flex:1;}
.list-info h4{color:var(--gold);font-size:1.1rem;font-family:'Cinzel',serif;}
.list-info p{color:var(--parchment);font-size:0.9rem;margin-top:4px;}
.action-btn{background:var(--dark-crimson);border:1px solid var(--gold);color:var(--text);font-family:'Cinzel',serif;font-weight:700;padding:8px 15px;cursor:pointer;}

/* ── TOAST ── */
.toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark-stone);border:1px solid var(--gold);color:var(--gold);font-family:'Cinzel',serif;font-weight:700;padding:12px 25px;opacity:0;pointer-events:none;transition:0.3s;z-index:200;box-shadow:var(--glow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:480px){
  .hud-res > span{font-size:0.75rem;padding:4px 6px;}
  .dragon-panel{display:none;}
  .battle-alert{font-size:1rem;width:90%;text-align:center;}
}