@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400&family=Spectral:wght@300;400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --gold:#D4AF37;--dark-gold:#996515;--purple:#2E0854;--light-purple:#6A0DAD;
  --sepia:#704214;--bg:#1A1110;--text:#F3E5AB;--glow:0 0 20px rgba(212,175,55,0.4);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'Spectral',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(--purple),var(--bg));flex-direction:column;}
#splashCanvas{position:absolute;inset:0;width:100%;height:100%;}
.splash-ui{position:relative;z-index:2;text-align:center;}
.time-icon{font-size:5rem;animation:spin 4s linear infinite;filter:drop-shadow(var(--glow));}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.splash-ui h1{font-family:'Philosopher',sans-serif;font-size:clamp(3rem,8vw,5rem);color:var(--gold);margin:10px 0;line-height:1;text-shadow:0 0 30px rgba(212,175,55,0.6);}
.splash-ui h1 span{color:var(--text);font-size:0.5em;letter-spacing:6px;display:block;text-transform:uppercase;}
.load-bar{width:300px;height:4px;background:rgba(0,0,0,0.5);margin:20px auto 10px;position:relative;overflow:hidden;border:1px solid var(--dark-gold);}
#splashProgress{height:100%;width:0%;background:linear-gradient(90deg,var(--light-purple),var(--gold));box-shadow:var(--glow);transition:width 0.3s;}
#splashText{font-size:0.9rem;color:var(--gold);text-transform:uppercase;letter-spacing:4px;font-family:'Philosopher',sans-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(46,8,84,0.85);backdrop-filter:blur(10px);border:1px solid var(--gold);border-radius:20px;padding:30px;width:90%;max-width:450px;text-align:center;box-shadow:0 10px 50px rgba(0,0,0,0.8);}
.time-logo{font-size:4rem;margin-bottom:10px;filter:drop-shadow(var(--glow));}
.menu-ui h1{font-family:'Philosopher',sans-serif;font-size:3.5rem;color:var(--gold);line-height:1;margin-bottom:20px;}
.menu-ui h1 span{font-size:0.4em;color:#fff;letter-spacing:5px;display:block;text-transform:uppercase;}

.era-tabs{background:rgba(0,0,0,0.4);border:1px solid var(--dark-gold);border-radius:10px;padding:10px;margin-bottom:20px;}
.era-tab{color:var(--gold);font-family:'Philosopher',sans-serif;font-size:1.2rem;letter-spacing:2px;}

.stats{display:flex;justify-content:space-around;background:linear-gradient(to bottom,var(--purple),rgba(0,0,0,0.5));border:1px solid var(--dark-gold);border-radius:10px;padding:15px;margin-bottom:25px;}
.stats div{font-size:0.75rem;color:var(--text);text-transform:uppercase;letter-spacing:1px;}
.stats span{display:block;font-size:1.5rem;font-weight:700;color:var(--gold);margin-bottom:5px;}

.menu-btns{display:flex;flex-direction:column;gap:12px;}
.time-btn{background:linear-gradient(135deg,var(--dark-gold),var(--gold));border:none;border-radius:10px;color:var(--bg);font-family:'Philosopher',sans-serif;font-size:1.5rem;font-weight:700;padding:12px;cursor:pointer;transition:all 0.2s;box-shadow:var(--glow);letter-spacing:2px;}
.time-btn:hover{transform:translateY(-2px);box-shadow:0 5px 25px rgba(212,175,55,0.6);}
.time-btn:active{transform:scale(0.98);}
.time-btn2{background:rgba(0,0,0,0.3);border:1px solid var(--dark-gold);border-radius:10px;color:var(--text);font-family:'Spectral',serif;font-size:1rem;font-weight:700;padding:12px;cursor:pointer;transition:all 0.2s;text-transform:uppercase;letter-spacing:1px;}
.time-btn2:hover{background:var(--purple);border-color:var(--gold);}

/* ── GAME SCREEN ── */
#game-screen{position:fixed;inset:0;display:flex;flex-direction:column;transition:filter 1s;}
#game-screen.era-past{filter:sepia(0.6) hue-rotate(-30deg);}
#game-screen.era-future{filter:hue-rotate(180deg) saturate(1.5);}
#gameCanvas{flex:1;width:100%;height:100%;touch-action:none;background:var(--bg);}

.hud{position:absolute;top:0;left:0;width:100%;background:rgba(26,17,16,0.9);border-bottom:1px solid var(--gold);padding:10px 15px;display:flex;align-items:center;justify-content:space-between;z-index:10;flex-wrap:wrap;}
.pause-btn{background:transparent;border:1px solid var(--gold);color:var(--gold);width:36px;height:36px;border-radius:8px;font-size:1rem;cursor:pointer;}
.era-indicator{font-family:'Philosopher',sans-serif;font-size:1.2rem;color:var(--gold);letter-spacing:2px;text-transform:uppercase;}
.hud-res{display:flex;gap:12px;}
.hud-res span{background:rgba(0,0,0,0.5);padding:4px 10px;border-radius:6px;font-size:0.9rem;border:1px solid var(--dark-gold);font-weight:700;}
.hud-res span span{color:var(--gold);border:none;background:transparent;padding:0;}

.time-energy{display:flex;flex-direction:column;align-items:center;width:120px;}
.time-energy label{font-size:0.6rem;color:var(--text);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;}
.energy-bar{width:100%;height:6px;background:var(--bg);border:1px solid var(--gold);border-radius:3px;overflow:hidden;}
.energy-fill{height:100%;background:linear-gradient(90deg,var(--light-purple),var(--gold));transition:width 0.2s;}

.mobile-controls{position:absolute;bottom:20px;left:0;width:100%;padding:0 20px;display:flex;justify-content:space-between;z-index:10;}
.ctrl-left, .ctrl-right{display:flex;gap:15px;}
.ctrl-btn{width:60px;height:60px;border-radius:50%;background:rgba(46,8,84,0.7);border:1px solid var(--gold);color:var(--gold);font-size:1.8rem;display:flex;align-items:center;justify-content:center;user-select:none;backdrop-filter:blur(5px);}
.ctrl-btn:active{background:var(--gold);color:var(--bg);transform:scale(0.9);}
.time-jump-btn{background:rgba(212,175,55,0.3);box-shadow:var(--glow);}

.era-switch-btn{position:absolute;top:70px;right:15px;z-index:10;cursor:pointer;}
.esb-inner{background:linear-gradient(135deg,var(--purple),var(--light-purple));border:1px solid var(--gold);color:#fff;font-family:'Philosopher',sans-serif;font-weight:700;padding:10px 15px;border-radius:20px;box-shadow:var(--glow);animation:pulse-gold 2s infinite;letter-spacing:1px;font-size:0.8rem;}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 10px rgba(212,175,55,0.4);}50%{box-shadow:0 0 25px rgba(212,175,55,0.8);}}

.memory-log{position:absolute;top:70px;left:15px;background:rgba(0,0,0,0.7);border:1px solid var(--dark-gold);border-radius:8px;padding:10px;width:200px;font-size:0.75rem;pointer-events:none;z-index:10;}
.ml-title{color:var(--gold);font-family:'Philosopher',sans-serif;font-size:0.9rem;border-bottom:1px solid var(--dark-gold);padding-bottom:5px;margin-bottom:5px;letter-spacing:1px;}
.ml-event{color:var(--text);margin-bottom:4px;animation:fade-in 0.5s;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* ── OVERLAYS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;}
.overlay-box{background:rgba(46,8,84,0.9);border:1px solid var(--gold);border-radius:12px;padding:30px;width:90%;max-width:400px;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:'Philosopher',sans-serif;font-size:2.2rem;color:var(--gold);margin-bottom:20px;letter-spacing:2px;}
.overlay-box button{width:100%;margin-top:10px;}
.win-box h2{color:#00FFAA;}

.era-grid, #achieveList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;margin-bottom:15px;}
.era-grid::-webkit-scrollbar, #achieveList::-webkit-scrollbar{width:4px;}
.era-grid::-webkit-scrollbar-thumb, #achieveList::-webkit-scrollbar-thumb{background:var(--gold);}

.list-item{background:rgba(0,0,0,0.4);border:1px solid var(--dark-gold);padding:15px;border-radius:8px;text-align:left;display:flex;align-items:center;gap:15px;}
.list-icon{font-size:2.5rem;}
.list-info flex{flex:1;}
.list-info h4{color:var(--gold);font-size:1.1rem;font-family:'Philosopher',sans-serif;}
.list-info p{color:var(--text);font-size:0.8rem;margin-top:2px;}

/* ── TOAST ── */
.toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(to right,var(--purple),var(--bg));border:1px solid var(--gold);color:var(--gold);font-family:'Philosopher',sans-serif;font-weight:700;font-size:1.1rem;padding:12px 25px;border-radius:8px;opacity:0;pointer-events:none;transition:0.3s;z-index:200;box-shadow:var(--glow);letter-spacing:1px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:480px){
  .hud-res span{font-size:0.75rem;padding:2px 6px;}
  .memory-log{display:none;}
  .ctrl-btn{width:50px;height:50px;font-size:1.4rem;}
}