* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; background:#000; font-family:'JetBrains Mono',monospace; color:#fff; cursor:default; }
#scene-container { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; }
#scene-container canvas { display:block; }

/* HUD */
#hud { position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; pointer-events:none; }

/* Crosshair */
#crosshair { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; }
.ch-line { position:absolute; background:#fff; box-shadow:0 0 4px rgba(0,0,0,0.8); }
.ch-top { width:2px; height:10px; left:14px; top:0; }
.ch-bottom { width:2px; height:10px; left:14px; bottom:0; }
.ch-left { width:10px; height:2px; top:14px; left:0; }
.ch-right { width:10px; height:2px; top:14px; right:0; }
.ch-dot { position:absolute; width:3px; height:3px; background:#fff; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
#crosshair.firing .ch-top { top:-3px; }
#crosshair.firing .ch-bottom { bottom:-3px; }
#crosshair.firing .ch-left { left:-3px; }
#crosshair.firing .ch-right { right:-3px; }

/* Health bar */
#health-bar-container { position:absolute; top:20px; left:20px; }
#health-bar-bg { width:220px; height:22px; background:rgba(0,0,0,0.7); border:2px solid rgba(255,255,255,0.2); border-radius:4px; position:relative; overflow:hidden; }
#health-bar-fill { height:100%; background:linear-gradient(90deg,#c0392b,#e74c3c); transition:width 0.3s ease; width:100%; }
#health-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:11px; font-weight:700; text-shadow:0 1px 3px #000; letter-spacing:1px; }
#health-bar-container.damage #health-bar-bg { border-color:#ff0000; box-shadow:0 0 12px rgba(255,0,0,0.6); }

/* Level indicator */
#level-indicator { position:absolute; top:20px; left:50%; transform:translateX(-50%); font-family:'Cinzel',serif; font-size:18px; font-weight:900; letter-spacing:4px; text-shadow:0 0 20px currentColor, 0 2px 6px #000; text-transform:uppercase; }

/* Stats panel */
#stats-panel { position:absolute; top:20px; right:20px; text-align:right; font-size:12px; line-height:1.8; text-shadow:0 1px 4px #000; }

/* Minimap */
#minimap { position:absolute; bottom:20px; right:20px; border:2px solid rgba(255,255,255,0.2); border-radius:6px; background:rgba(0,0,0,0.6); image-rendering:pixelated; }

/* Checkpoint message */
#checkpoint-msg { position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); font-size:16px; font-weight:700; color:#2ecc71; text-shadow:0 0 20px rgba(46,204,113,0.6); opacity:0; transition:opacity 0.5s ease; letter-spacing:2px; }
#checkpoint-msg.show { opacity:1; }

/* Weapon status */
#weapon-status { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-size:13px; opacity:0.7; text-shadow:0 1px 3px #000; }

/* Damage overlay */
#damage-overlay { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; background:radial-gradient(ellipse at center, transparent 40%, rgba(180,0,0,0.5) 100%); opacity:0; transition:opacity 0.15s ease; }
#damage-overlay.flash { opacity:1; }

/* Click to play */
#click-to-play { position:fixed; top:0; left:0; width:100%; height:100%; z-index:15; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); cursor:pointer; }
.click-prompt { font-family:'Cinzel',serif; font-size:22px; letter-spacing:3px; text-shadow:0 0 20px rgba(255,255,255,0.4); animation:pulse 2s ease infinite; }

/* Game screens */
.game-screen { position:fixed; top:0; left:0; width:100%; height:100%; z-index:20; display:flex; align-items:center; justify-content:center; }
.overlay-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); }
.death-bg { background:rgba(40,0,0,0.9); }
.complete-bg { background:rgba(0,0,0,0.85); }
.victory-bg { background:radial-gradient(ellipse at center, rgba(60,10,0,0.95), rgba(0,0,0,0.98)); }
.overlay-content, .menu-content { position:relative; z-index:1; text-align:center; max-width:500px; width:90%; }

/* Menu */
.menu-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(200,180,140,0.15) 0%, rgba(80,80,80,0.15) 50%, rgba(60,0,0,0.25) 100%), #0a0a0a; }
.game-title { font-family:'Cinzel',serif; font-size:clamp(48px,10vw,80px); font-weight:900; letter-spacing:12px; background:linear-gradient(180deg,#FFD700,#FF6600,#DC143C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:none; filter:drop-shadow(0 0 30px rgba(255,100,0,0.4)); animation:titleGlow 3s ease infinite alternate; }
.game-subtitle { font-family:'Cinzel',serif; font-size:clamp(14px,3vw,20px); letter-spacing:6px; color:rgba(255,255,255,0.5); margin-top:8px; font-style:italic; }
.menu-buttons { margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.menu-btn { font-family:'Cinzel',serif; font-size:16px; font-weight:700; letter-spacing:3px; padding:14px 40px; border:2px solid rgba(255,255,255,0.2); border-radius:8px; background:rgba(255,255,255,0.05); color:#fff; cursor:pointer; transition:all 0.3s ease; pointer-events:all; min-width:240px; text-transform:uppercase; }
.menu-btn:hover { transform:scale(1.05); background:rgba(255,255,255,0.1); border-color:rgba(255,200,0,0.5); box-shadow:0 0 25px rgba(255,150,0,0.2); }
.menu-btn:active { transform:scale(0.98); }
.menu-btn.primary { background:linear-gradient(135deg, rgba(255,180,0,0.2), rgba(220,20,60,0.2)); border-color:rgba(255,180,0,0.4); }
.menu-btn.primary:hover { border-color:#FFD700; box-shadow:0 0 30px rgba(255,200,0,0.3); }
.menu-btn.small { font-size:13px; padding:10px 24px; min-width:auto; margin-top:16px; }
.controls-info { margin-top:40px; font-size:11px; color:rgba(255,255,255,0.35); line-height:2; }
.controls-info span { color:rgba(255,200,0,0.6); font-weight:700; }

/* Level grid */
.level-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:20px 0; }
.level-btn { width:50px; height:50px; border-radius:6px; border:2px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:#fff; font-family:'Cinzel',serif; font-weight:700; font-size:14px; cursor:pointer; transition:all 0.3s ease; pointer-events:all; }
.level-btn.heaven { border-color:rgba(255,215,0,0.4); color:#FFD700; }
.level-btn.purgatory { border-color:rgba(194,163,102,0.4); color:#C2A366; }
.level-btn.hell { border-color:rgba(220,20,60,0.4); color:#DC143C; }
.level-btn.locked { opacity:0.3; cursor:not-allowed; }
.level-btn:not(.locked):hover { transform:scale(1.1); box-shadow:0 0 15px rgba(255,255,255,0.2); }

/* Overlay titles */
.overlay-title { font-family:'Cinzel',serif; font-size:42px; font-weight:900; letter-spacing:6px; margin-bottom:30px; text-shadow:0 0 30px rgba(255,255,255,0.3); }
.death-title { font-family:'Cinzel',serif; font-size:48px; font-weight:900; letter-spacing:8px; color:#DC143C; margin-bottom:20px; text-shadow:0 0 40px rgba(220,20,60,0.6); animation:deathPulse 2s ease infinite; }
.complete-title { font-family:'Cinzel',serif; font-size:36px; font-weight:900; letter-spacing:5px; margin-bottom:16px; text-shadow:0 0 30px rgba(255,200,0,0.4); }
.victory-title { font-family:'Cinzel',serif; font-size:clamp(28px,6vw,44px); font-weight:900; letter-spacing:5px; color:#FF6600; margin-bottom:24px; text-shadow:0 0 40px rgba(255,100,0,0.6); line-height:1.3; }
.narrative-text { font-style:italic; color:rgba(255,255,255,0.5); margin-bottom:20px; font-size:14px; line-height:1.6; }
.death-stats, .complete-stats, .victory-stats { margin:20px 0; font-size:13px; line-height:2; color:rgba(255,255,255,0.7); }

/* Footer */
#footer-link { position:fixed; bottom:6px; left:50%; transform:translateX(-50%); z-index:25; font-size:10px; opacity:0.3; }
#footer-link a { color:#fff; text-decoration:none; }
#footer-link a:hover { opacity:1; }

/* Animations */
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
@keyframes titleGlow { 0% { filter:drop-shadow(0 0 30px rgba(255,100,0,0.4)); } 100% { filter:drop-shadow(0 0 50px rgba(255,100,0,0.7)); } }
@keyframes deathPulse { 0%,100% { text-shadow:0 0 40px rgba(220,20,60,0.6); } 50% { text-shadow:0 0 60px rgba(220,20,60,0.9), 0 0 80px rgba(255,0,0,0.4); } }