@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Rajdhani',sans-serif;background:#000;color:#fff}
/* Menu Screens */
.menu-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;background:#000;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.menu-inner{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;padding:50px 20px 80px;position:relative;z-index:1;flex-shrink:0}
.menu-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(0,255,255,0.12) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,0,255,0.12) 0%,transparent 50%);pointer-events:none;z-index:0}
/* Title */
.welcome-section{position:relative;z-index:1;text-align:center;margin-bottom:20px;padding-top:20px;width:100%}
.welcome-to{font-family:'Bebas Neue',cursive;font-size:36px;letter-spacing:10px;text-transform:uppercase;color:#00ffff;text-shadow:0 0 20px rgba(0,255,255,0.5);margin-bottom:8px;display:block}
.abyss-road-title{font-family:'Orbitron',sans-serif;font-size:88px;font-weight:900;letter-spacing:8px;text-transform:uppercase;background:linear-gradient(135deg,#00ffff 0%,#ff00ff 50%,#ffff00 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 30px rgba(0,255,255,0.6));line-height:1.1;display:block}
.menu-subtitle{font-size:20px;font-weight:300;color:rgba(255,255,255,0.55);letter-spacing:7px;text-transform:uppercase;margin-top:14px;margin-bottom:0}
/* Mode Cards */
.mode-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:1100px;position:relative;z-index:1}
.mode-card{background:rgba(255,255,255,0.04);border:2px solid rgba(255,255,255,0.15);border-radius:20px;padding:35px;transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease,background 0.15s ease;position:relative;cursor:pointer}
.mode-card:hover{transform:translateY(-8px);background:rgba(255,255,255,0.07)}
.mode-card.game-mode{border-color:rgba(0,255,0,0.3)}
.mode-card.game-mode:hover{border-color:rgba(0,255,0,0.7);box-shadow:0 16px 50px rgba(0,0,0,0.4),0 0 40px rgba(0,255,0,0.25)}
.mode-card.impossible-mode{border-color:rgba(255,0,85,0.3)}
.mode-card.impossible-mode:hover{border-color:rgba(255,0,85,0.7);box-shadow:0 16px 50px rgba(0,0,0,0.4),0 0 40px rgba(255,0,85,0.25)}
.mode-icon{font-size:64px;margin-bottom:24px;display:block;transition:transform 0.15s ease}
.mode-card:hover .mode-icon{transform:scale(1.1)}
.mode-name{font-family:'Orbitron',sans-serif;font-size:32px;font-weight:700;margin-bottom:16px;letter-spacing:2px}
.mode-card.game-mode .mode-name{color:#00ff00;text-shadow:0 0 20px rgba(0,255,0,0.4)}
.mode-card.impossible-mode .mode-name{color:#ff0055;text-shadow:0 0 20px rgba(255,0,85,0.4)}
.mode-description{font-size:15px;color:rgba(255,255,255,0.65);line-height:1.7;margin-bottom:22px}
.mode-controls{background:rgba(0,0,0,0.35);border-radius:12px;padding:22px;margin-bottom:22px;border:1px solid rgba(255,255,255,0.07)}
.mode-controls-title{font-size:13px;font-weight:700;color:#00ffff;letter-spacing:2px;margin-bottom:14px;text-transform:uppercase}
.mode-control-item{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:14px;color:rgba(255,255,255,0.75)}
.mode-control-key{background:rgba(0,255,255,0.12);border:1px solid rgba(0,255,255,0.35);padding:6px 12px;border-radius:6px;font-weight:600;font-size:12px;min-width:80px;text-align:center}
.mode-features{font-size:13px;color:rgba(255,255,255,0.55);line-height:1.9;margin-bottom:26px}
.mode-features strong{color:rgba(255,255,255,0.85)}
.mode-start-btn{width:100%;padding:20px;font-size:18px;font-family:'Orbitron',sans-serif;font-weight:700;border:none;border-radius:12px;cursor:pointer;letter-spacing:2px;text-transform:uppercase;transition:transform 0.15s ease,box-shadow 0.15s ease}
.mode-card.game-mode .mode-start-btn{background:linear-gradient(135deg,#00ff00,#00ffff);color:#000;box-shadow:0 8px 30px rgba(0,255,0,0.35)}
.mode-card.game-mode .mode-start-btn:hover{box-shadow:0 12px 40px rgba(0,255,0,0.55);transform:translateY(-2px)}
.mode-card.impossible-mode .mode-start-btn{background:linear-gradient(135deg,#ff0055,#ff00ff);color:#fff;box-shadow:0 8px 30px rgba(255,0,85,0.35)}
.mode-card.impossible-mode .mode-start-btn:hover{box-shadow:0 12px 40px rgba(255,0,85,0.55);transform:translateY(-2px)}
/* Footer */
.menu-footer{position:relative;z-index:1;margin-top:35px;padding-top:25px;border-top:1px solid rgba(255,255,255,0.1);text-align:center;width:100%}
.footer-links{display:flex;justify-content:center;gap:30px;margin-bottom:20px;flex-wrap:wrap}
.footer-link{color:rgba(255,255,255,0.5);text-decoration:none;font-size:14px;letter-spacing:1px;transition:all 0.3s ease;cursor:pointer}
.footer-link:hover{color:#00ffff;text-shadow:0 0 10px rgba(0,255,255,0.5)}
.footer-copyright{font-size:12px;color:rgba(255,255,255,0.3);letter-spacing:1px}
/* Legal Modal */
#legal-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);display:none;z-index:2000;overflow-y:auto;padding:40px 20px}
#legal-modal.active{display:block}
.legal-content{max-width:800px;margin:0 auto;background:rgba(0,20,30,0.8);border:2px solid rgba(0,255,255,0.3);border-radius:20px;padding:50px;backdrop-filter:blur(10px)}
.legal-title{font-family:'Orbitron',sans-serif;font-size:42px;font-weight:700;color:#00ffff;margin-bottom:30px;text-shadow:0 0 20px rgba(0,255,255,0.5)}
.legal-text{color:rgba(255,255,255,0.8);line-height:1.8;font-size:15px;margin-bottom:20px}
.legal-close{margin-top:40px;padding:15px 60px;font-size:18px;font-family:'Rajdhani',sans-serif;font-weight:600;background:transparent;border:2px solid rgba(0,255,255,0.5);color:#00ffff;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:2px}
.legal-close:hover{background:rgba(0,255,255,0.2);box-shadow:0 0 20px rgba(0,255,255,0.5)}
/* Game Over stats */
.stats-container{display:grid;grid-template-columns:repeat(2,300px);gap:30px;margin-bottom:40px}
.stat-box{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);padding:30px;text-align:center;border-radius:12px}
.stat-box-label{font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:2px;margin-bottom:15px;text-transform:uppercase}
.stat-box-value{font-size:48px;font-weight:700;color:#00ffff;text-shadow:0 0 20px rgba(0,255,255,0.5)}
.menu-buttons{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}
.menu-btn{padding:20px 80px;font-size:20px;font-family:'Rajdhani',sans-serif;font-weight:600;background:transparent;border:2px solid rgba(255,255,255,0.3);color:#fff;cursor:pointer;transition:all 0.3s ease;letter-spacing:2px;text-transform:uppercase;position:relative;overflow:hidden}
.menu-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:rgba(0,255,255,0.2);transition:left 0.3s ease}
.menu-btn:hover::before{left:0}
.menu-btn:hover{border-color:#00ffff;box-shadow:0 0 30px rgba(0,255,255,0.3);transform:translateY(-2px)}
/* Ad containers */
.ad-desktop-leaderboard{width:728px;height:90px;margin:20px auto;display:none;text-align:center}
.ad-desktop-rect{width:300px;height:250px;margin:20px auto;display:none;text-align:center}
.ad-mobile-banner{width:320px;height:50px;margin:16px auto;display:none;text-align:center}
.ad-mobile-rect{width:300px;height:250px;margin:20px auto;display:none;text-align:center}
.ad-video-wrap{width:100%;max-width:640px;margin:20px auto;display:block;text-align:center;position:relative;z-index:1;min-height:10px;overflow:visible}
@media(min-width:769px){.ad-desktop-leaderboard{display:block}.ad-desktop-rect{display:block}}
@media(max-width:768px){.ad-mobile-banner{display:block}.ad-mobile-rect{display:block}}
/* Loading */
#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10000}
.loader{width:80px;height:80px;border:3px solid rgba(0,255,255,0.1);border-top-color:#00ffff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{margin-top:30px;font-size:14px;color:rgba(255,255,255,0.5);letter-spacing:3px;text-transform:uppercase}
/* Responsive */
@media(max-width:768px){
  .welcome-to{font-size:24px;letter-spacing:6px}
  .abyss-road-title{font-size:52px;letter-spacing:4px}
  .menu-subtitle{font-size:16px}
  .mode-selector{grid-template-columns:1fr;gap:40px;max-width:500px}
  .mode-card{padding:40px}
  .mode-icon{font-size:60px}
  .mode-name{font-size:30px}
  .stats-container{grid-template-columns:1fr;gap:20px}
  .footer-links{flex-direction:column;gap:15px}
}
@media(orientation:landscape) and (max-height:600px){
  .menu-inner{padding:30px 20px 50px}
  .welcome-section{padding-top:10px;margin-bottom:14px}
  .welcome-to{font-size:28px;margin-bottom:6px}
  .abyss-road-title{font-size:64px}
  .menu-subtitle{font-size:18px;margin-top:10px}
  .mode-selector{gap:20px;max-width:100%}
  .mode-card{padding:25px}
  .mode-icon{font-size:48px;margin-bottom:18px}
  .mode-name{font-size:26px;margin-bottom:14px}
  .mode-description{font-size:14px;margin-bottom:18px}
  .mode-controls{padding:18px;margin-bottom:18px}
  .mode-features{font-size:13px;margin-bottom:20px}
  .mode-start-btn{padding:16px;font-size:16px}
  .menu-footer{margin-top:25px;padding-top:20px}
}