*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0e0a;font-family:'Courier New',monospace;color:#c8d8c0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#game-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden}
canvas#gameCanvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0}
.menu-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;z-index:100;background:rgba(8,14,8,0.97)}
.menu-screen.active{display:flex}
.overlay-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:90;pointer-events:none}
.overlay-screen.hidden{display:none}
.menu-bg-effects{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.radar-sweep{position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(100,180,100,0.08);animation:radarSpin 8s linear infinite}
.radar-sweep::after{content:'';position:absolute;top:0;left:50%;width:50%;height:50%;transform-origin:bottom left;background:linear-gradient(45deg,rgba(100,180,100,0.12),transparent);animation:radarSpin 8s linear infinite}
@keyframes radarSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.grid-lines{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(100,180,100,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(100,180,100,0.03) 1px,transparent 1px);background-size:40px 40px}
.menu-content{position:relative;z-index:2;text-align:center;padding:20px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,20px)}
.title-container{margin-bottom:clamp(5px,1vh,15px)}
.game-title{font-size:clamp(40px,8vw,80px);font-weight:900;letter-spacing:8px;line-height:1;color:#4a7a4a;text-shadow:0 0 20px rgba(100,180,100,0.4),0 0 40px rgba(100,180,100,0.2);margin-bottom:5px}
.subtitle{font-size:clamp(10px,2vw,16px);letter-spacing:6px;color:#7a9a6a;margin-top:8px}
.title-line{width:clamp(80px,30vw,300px);height:1px;background:linear-gradient(90deg,transparent,#4a7a4a,transparent);margin:12px auto 0}
.menu-buttons{display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px);width:clamp(200px,40vw,320px)}
.menu-btn{background:rgba(40,70,40,0.3);border:1px solid rgba(100,180,100,0.3);color:#b0d0a0;padding:clamp(8px,1.5vh,14px) clamp(16px,3vw,30px);font-family:'Courier New',monospace;font-size:clamp(12px,1.8vw,16px);font-weight:700;letter-spacing:3px;cursor:pointer;transition:all 0.15s;text-transform:uppercase;position:relative;overflow:hidden}
.menu-btn:hover{background:rgba(60,100,60,0.4);border-color:rgba(100,180,100,0.6);color:#d0f0c0;transform:scale(1.02);box-shadow:0 0 15px rgba(100,180,100,0.15)}
.menu-btn:active{transform:scale(0.98);background:rgba(80,130,80,0.5)}
.menu-btn:focus-visible{outline:2px solid #6ab06a;outline-offset:2px}
.primary-btn{border-color:rgba(255,150,50,0.5);color:#ffd080;background:rgba(100,60,20,0.3)}
.primary-btn:hover{border-color:rgba(255,150,50,0.8);color:#ffe0a0;background:rgba(130,80,30,0.4);box-shadow:0 0 20px rgba(255,150,50,0.15)}
.btn-icon{margin-right:8px}
.high-score-display{margin-top:clamp(5px,1vh,15px);padding:clamp(8px,1.5vh,15px) clamp(16px,3vw,30px);border:1px solid rgba(100,180,100,0.15);background:rgba(20,40,20,0.3)}
.hs-label{display:block;font-size:clamp(8px,1.2vw,11px);letter-spacing:3px;color:#6a8a5a;margin-bottom:4px}
.hs-value{font-size:clamp(18px,3vw,28px);color:#f0c040;font-weight:700}
.countdown-number{font-size:clamp(60px,15vw,150px);font-weight:900;color:#ff8040;text-shadow:0 0 40px rgba(255,128,64,0.6);animation:countPulse 0.5s ease-out}
@keyframes countPulse{0%{transform:scale(2);opacity:0}50%{transform:scale(0.9);opacity:1}100%{transform:scale(1);opacity:1}}
.wave-text{font-size:clamp(30px,7vw,64px);font-weight:900;color:#4a7a4a;text-shadow:0 0 30px rgba(100,180,100,0.5);animation:waveIn 0.5s ease-out}
.wave-sub{font-size:clamp(10px,2vw,16px);color:#7a9a6a;letter-spacing:4px;margin-top:8px;animation:waveIn 0.5s ease-out 0.2s both}
@keyframes waveIn{0%{transform:scale(0.5) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
.wave-clear-text{font-size:clamp(24px,5vw,48px);font-weight:900;color:#60c060;text-shadow:0 0 30px rgba(80,200,80,0.5);animation:waveIn 0.4s ease-out}
.wave-bonus{font-size:clamp(14px,3vw,24px);color:#f0c040;margin-top:8px;animation:waveIn 0.4s ease-out 0.2s both}
.boss-warn-text{font-size:clamp(30px,7vw,60px);font-weight:900;color:#ff4040;text-shadow:0 0 40px rgba(255,64,64,0.6);animation:bossFlash 0.3s ease-in-out infinite alternate}
@keyframes bossFlash{0%{opacity:1;transform:scale(1)}100%{opacity:0.7;transform:scale(1.05)}}
.boss-name{font-size:clamp(16px,4vw,32px);color:#ff8040;letter-spacing:6px;margin-top:10px}
.pause-title{font-size:clamp(24px,5vw,40px);color:#4a7a4a;letter-spacing:6px;margin-bottom:clamp(10px,2vh,20px)}
.gameover-title{font-size:clamp(28px,6vw,50px);color:#ff4040;letter-spacing:6px;text-shadow:0 0 30px rgba(255,64,64,0.4);margin-bottom:clamp(10px,2vh,20px)}
.gameover-stats{margin-bottom:clamp(10px,2vh,20px)}
.stat-row{display:flex;justify-content:space-between;gap:clamp(20px,5vw,60px);padding:clamp(4px,0.8vh,8px) 0;border-bottom:1px solid rgba(100,180,100,0.15)}
.stat-label{font-size:clamp(10px,1.6vw,14px);color:#7a9a6a;letter-spacing:2px}
.stat-value{font-size:clamp(14px,2.2vw,20px);color:#f0c040;font-weight:700}
.new-hs{font-size:clamp(16px,3vw,24px);color:#ff8040;font-weight:700;letter-spacing:4px;animation:newHS 0.5s ease-in-out infinite alternate;margin-bottom:10px}
.new-hs.hidden{display:none}
@keyframes newHS{0%{text-shadow:0 0 10px rgba(255,128,64,0.4)}100%{text-shadow:0 0 30px rgba(255,128,64,0.8)}}
.section-title{font-size:clamp(20px,4vw,32px);color:#4a7a4a;letter-spacing:4px;margin-bottom:clamp(10px,2vh,20px)}
.howto-content{max-height:85vh}
.howto-scroll{max-height:60vh;overflow-y:auto;padding-right:10px;margin-bottom:clamp(10px,2vh,20px);scrollbar-width:thin;scrollbar-color:#4a7a4a transparent}
.howto-scroll::-webkit-scrollbar{width:4px}
.howto-scroll::-webkit-scrollbar-thumb{background:#4a7a4a;border-radius:2px}
.howto-section{margin-bottom:clamp(10px,2vh,18px);text-align:left}
.howto-section h3{font-size:clamp(12px,1.8vw,15px);color:#60a050;letter-spacing:3px;margin-bottom:6px;border-bottom:1px solid rgba(100,180,100,0.15);padding-bottom:4px}
.howto-section p{font-size:clamp(10px,1.4vw,13px);color:#a0b890;line-height:1.6;margin-bottom:4px}
.pu-hp{color:#60e060;font-weight:700}.pu-rf{color:#60c0ff;font-weight:700}.pu-db{color:#ff8040;font-weight:700}.pu-sh{color:#a060ff;font-weight:700}.pu-sm{color:#f0c040;font-weight:700}
.settings-list{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,14px);width:clamp(220px,50vw,360px);margin-bottom:clamp(10px,2vh,20px)}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:clamp(6px,1vh,10px) clamp(10px,2vw,16px);border:1px solid rgba(100,180,100,0.15);background:rgba(20,40,20,0.2)}
.setting-label{font-size:clamp(10px,1.5vw,14px);letter-spacing:2px;color:#a0b890}
.toggle-btn{background:rgba(40,60,40,0.4);border:1px solid rgba(100,180,100,0.3);color:#7a9a6a;padding:clamp(4px,0.8vh,8px) clamp(12px,2vw,20px);font-family:'Courier New',monospace;font-size:clamp(10px,1.4vw,13px);font-weight:700;letter-spacing:2px;cursor:pointer;min-width:60px;transition:all 0.15s}
.toggle-btn.active{background:rgba(60,100,60,0.4);border-color:rgba(100,200,100,0.5);color:#b0e0a0}
.toggle-btn:hover{border-color:rgba(100,180,100,0.6)}
#mobile-controls{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;display:none}
#joystick-zone{position:absolute;bottom:20px;left:20px;width:clamp(100px,25vw,160px);height:clamp(100px,25vw,160px);pointer-events:all}
#joystick-base{width:100%;height:100%;border-radius:50%;background:rgba(40,80,40,0.15);border:2px solid rgba(100,180,100,0.2);position:relative;display:flex;justify-content:center;align-items:center}
#joystick-knob{width:40%;height:40%;border-radius:50%;background:rgba(100,180,100,0.25);border:2px solid rgba(100,180,100,0.4);position:absolute;transition:none}
#aim-zone{position:absolute;bottom:20px;right:20px;width:clamp(100px,25vw,160px);height:clamp(100px,25vw,160px);pointer-events:all}
#aim-btn{width:100%;height:100%;border-radius:50%;background:rgba(255,80,40,0.1);border:2px solid rgba(255,100,50,0.25);display:flex;justify-content:center;align-items:center}
#aim-btn.active{background:rgba(255,80,40,0.25);border-color:rgba(255,120,60,0.5)}
.crosshair{width:60%;height:60%}
#hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:40;display:none;padding:clamp(8px,1.5vh,16px)}
#hud.active{display:block}
.hud-top-left{position:absolute;top:clamp(8px,1.5vh,16px);left:clamp(8px,1.5vw,16px)}
.hud-bar-container{margin-bottom:clamp(4px,0.8vh,8px)}
.hud-bar-label{font-size:clamp(8px,1.1vw,10px);letter-spacing:2px;color:#6a8a5a;margin-bottom:2px;text-shadow:1px 1px 2px rgba(0,0,0,0.8)}
.hud-bar{width:clamp(100px,18vw,200px);height:clamp(8px,1.2vh,12px);background:rgba(10,20,10,0.7);border:1px solid rgba(100,180,100,0.3);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
.hud-bar-fill{height:100%;transition:width 0.3s;width:100%}
.health-fill{background:linear-gradient(180deg,#80e080,#40a040);box-shadow:0 0 6px rgba(80,200,80,0.4)}
.armor-fill{background:linear-gradient(180deg,#80b0ff,#4060c0);box-shadow:0 0 6px rgba(80,140,255,0.4)}
.hud-powerups{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}
.hud-pu-indicator{font-size:clamp(7px,1vw,9px);padding:2px 6px;background:rgba(10,20,10,0.8);border:1px solid rgba(100,180,100,0.4);letter-spacing:1px;text-shadow:1px 1px 2px rgba(0,0,0,0.8)}
.hud-top-center{position:absolute;top:clamp(8px,1.5vh,16px);left:50%;transform:translateX(-50%);text-align:center}
.hud-wave{font-size:clamp(14px,2.5vw,22px);font-weight:700;letter-spacing:4px;color:#60a050;text-shadow:0 0 10px rgba(100,180,100,0.3),1px 1px 2px rgba(0,0,0,0.8)}
.hud-top-right{position:absolute;top:clamp(8px,1.5vh,16px);right:clamp(8px,1.5vw,16px);text-align:right}
.hud-score{margin-bottom:clamp(2px,0.4vh,4px)}
.hud-score.small .hud-score-value{font-size:clamp(10px,1.6vw,14px);color:#7a9a6a}
.hud-score-label{font-size:clamp(7px,1vw,9px);letter-spacing:2px;color:#6a8a5a;text-shadow:1px 1px 2px rgba(0,0,0,0.8)}
.hud-score-value{font-size:clamp(14px,2.2vw,20px);color:#f0c040;font-weight:700;text-shadow:0 0 8px rgba(240,192,64,0.3),1px 1px 2px rgba(0,0,0,0.8)}
.hud-combo{font-size:clamp(12px,2vw,18px);color:#ff8040;font-weight:700;letter-spacing:2px;animation:comboPulse 0.5s ease-in-out infinite alternate;text-shadow:0 0 10px rgba(255,128,64,0.4),1px 1px 2px rgba(0,0,0,0.8)}
.hud-combo.hidden{display:none}
@keyframes comboPulse{0%{transform:scale(1)}100%{transform:scale(1.1)}}
.hud-bottom{position:absolute;bottom:clamp(8px,1.5vh,16px);left:clamp(8px,1.5vw,16px)}
.hud-weapon-name{font-size:clamp(10px,1.5vw,14px);color:#a0b890;letter-spacing:2px;text-shadow:1px 1px 2px rgba(0,0,0,0.8)}
.hud-ammo{font-size:clamp(9px,1.3vw,12px);color:#7a9a6a;letter-spacing:1px;margin-top:2px;text-shadow:1px 1px 2px rgba(0,0,0,0.8)}
#boss-hud{position:absolute;top:clamp(50px,8vh,80px);left:50%;transform:translateX(-50%);width:clamp(200px,40vw,400px);text-align:center;z-index:45;display:block;pointer-events:none}
#boss-hud.hidden{display:none}
.boss-hud-name{font-size:clamp(12px,2vw,18px);color:#ff6040;letter-spacing:4px;font-weight:700;margin-bottom:4px;text-shadow:0 0 10px rgba(255,96,64,0.4),1px 1px 2px rgba(0,0,0,0.8)}
.boss-hud-bar{width:100%;height:clamp(10px,1.5vh,16px);background:rgba(20,5,5,0.8);border:1px solid rgba(255,80,40,0.5);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
.boss-hud-fill{height:100%;background:linear-gradient(180deg,#ff6040,#c02020);transition:width 0.3s;width:100%;box-shadow:0 0 8px rgba(255,64,64,0.4)}
@media (max-width:600px){
    .menu-buttons{width:85vw}
    .settings-list{width:85vw}
    #hud{padding:6px}
    .hud-bar{width:80px}
    .hud-top-right{font-size:0.85em}
}
@media (max-height:500px){
    .game-title{font-size:36px}
    .menu-content{gap:6px}
}