* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; color:#ddd; font-family:'Inter',sans-serif; overflow:hidden; width:100vw; height:100vh; }
.screen { position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index:1; }
.screen.active { display:flex; align-items:center; justify-content:center; }

/* Glitch text */
.glitch-text { font-family:'Creepster',cursive; font-size:5rem; color:#ff1a1a; text-shadow:0 0 20px #ff0000,0 0 60px #880000; position:relative; animation:flicker 3s infinite; }
.glitch-text::before,.glitch-text::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; }
.glitch-text::before { left:2px; text-shadow:-2px 0 #0ff; animation:glitch1 2s infinite linear; clip-path:inset(40% 0 50% 0); }
.glitch-text::after { left:-2px; text-shadow:2px 0 #f0f; animation:glitch2 2s infinite linear; clip-path:inset(60% 0 10% 0); }
@keyframes glitch1 { 0%,100%{clip-path:inset(40% 0 50% 0)} 20%{clip-path:inset(10% 0 70% 0)} 40%{clip-path:inset(80% 0 5% 0)} 60%{clip-path:inset(20% 0 60% 0)} }
@keyframes glitch2 { 0%,100%{clip-path:inset(60% 0 10% 0)} 20%{clip-path:inset(5% 0 80% 0)} 40%{clip-path:inset(50% 0 30% 0)} 60%{clip-path:inset(70% 0 15% 0)} }
@keyframes flicker { 0%,95%,100%{opacity:1} 96%{opacity:0.4} 97%{opacity:1} 98%{opacity:0.2} }

/* Menu */
#menu-screen { flex-direction:column; background:#000; }
.menu-bg { position:absolute; width:100%; height:100%; background:url('background.png') center/cover; opacity:0.4; }
.fog-overlay { position:absolute; width:100%; height:100%; background:linear-gradient(transparent,rgba(0,20,0,0.8)); }
.menu-content { position:relative; z-index:2; text-align:center; padding:2rem; }
.subtitle { font-family:'Special Elite',cursive; font-size:1.3rem; color:#8f8; margin:1rem 0 2.5rem; text-shadow:0 0 10px #0f0; letter-spacing:3px; }
.menu-btn { display:block; margin:0.8rem auto; padding:1rem 2.5rem; font-family:'Creepster',cursive; font-size:1.4rem; border:2px solid #ff1a1a; background:rgba(100,0,0,0.4); color:#ff4444; cursor:pointer; transition:all 0.3s; letter-spacing:2px; min-width:300px; }
.menu-btn:hover { background:rgba(200,0,0,0.5); box-shadow:0 0 30px rgba(255,0,0,0.5); transform:scale(1.05); }
.menu-btn.secondary { border-color:#666; color:#999; background:rgba(50,50,50,0.4); }
.menu-btn.secondary:hover { border-color:#aaa; color:#ddd; background:rgba(80,80,80,0.5); box-shadow:0 0 20px rgba(150,150,150,0.3); }
.menu-btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.shop-btn { border-color: #ffd700; color: #ffd700; background: rgba(100, 80, 0, 0.4); }
.shop-btn:hover { background: rgba(150, 120, 0, 0.5); box-shadow: 0 0 30px rgba(255, 215, 0, 0.5); }

/* How to play */
#howto-screen { background:rgba(0,0,0,0.95); flex-direction:column; }
.howto-content { max-width:800px; text-align:center; padding:2rem; }
.howto-content h2 { font-family:'Creepster',cursive; font-size:3rem; color:#ff1a1a; margin-bottom:2rem; }
.howto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
.howto-card { background:rgba(30,0,0,0.6); border:1px solid #441111; border-radius:12px; padding:1.2rem; }
.howto-card h3 { font-size:1.2rem; margin-bottom:0.5rem; color:#ff8888; }
.howto-card p { font-size:0.85rem; color:#aaa; }
kbd { background:#333; padding:2px 6px; border-radius:4px; font-size:0.8rem; border:1px solid #555; }

/* Shop screen */
#shop-screen { background:rgba(10,10,10,0.95); flex-direction:column; overflow-y:auto; padding-top: 50px; }
.shop-content { max-width:900px; text-align:center; padding:2rem; margin: auto; }
.shop-stats { display: flex; justify-content: space-around; font-family:'Special Elite',cursive; font-size: 1.5rem; color:#aaa; margin-bottom: 2rem; border-bottom: 2px solid #333; padding-bottom: 1rem; }
.gold-text { color: #ffd700; text-shadow: 0 0 10px #ffaa00; }
.shop-tabs { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.tab-btn { background: #222; color: #888; border: 2px solid #444; padding: 0.5rem 2rem; font-family: 'Creepster', cursive; font-size: 1.5rem; cursor: pointer; border-radius: 8px; transition: all 0.3s; }
.tab-btn:hover { background: #333; color: #ddd; }
.tab-btn.active { background: #422; color: #ff4444; border-color: #ff1a1a; box-shadow: 0 0 15px rgba(255,0,0,0.3); }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; margin-bottom:2rem; width: 100%; }
.shop-card { background:rgba(20,0,0,0.6); border:1px solid #660000; border-radius:12px; padding:1.2rem; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s; }
.shop-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(255,0,0,0.2); }
.shop-card h3 { font-family:'Creepster',cursive; font-size:1.8rem; margin-bottom:0.5rem; color:#ff8888; }
.shop-card p { font-size:0.9rem; color:#aaa; font-family: 'Special Elite', cursive; }
.shop-btn-buy { font-size: 1.2rem; padding: 0.5rem; min-width: 0; width: 100%; border-color: #ffd700; color: #ffd700; background: rgba(50,40,0,0.5); }
.shop-btn-equip { font-size: 1.2rem; padding: 0.5rem; min-width: 0; width: 100%; border-color: #0f0; color: #0f0; background: rgba(0,50,0,0.5); }
.shop-btn-equipped { font-size: 1.2rem; padding: 0.5rem; min-width: 0; width: 100%; border-color: #888; color: #888; background: rgba(50,50,50,0.5); cursor: default; }
.shop-btn-equipped:hover { transform: none; box-shadow: none; background: rgba(50,50,50,0.5); }

/* Game screen */
#game-screen { background:#000; }
#gameCanvas { position:absolute; top:0; left:0; width:100%; height:100%; }
#hud { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:15px 25px; z-index:10; background:linear-gradient(rgba(0,0,0,0.8),transparent); pointer-events:none; }
.hud-left,.hud-right { display:flex; gap:20px; }
.hud-center { text-align:center; }
.hud-item { display:flex; flex-direction:column; align-items:center; }
.hud-label { font-size:0.65rem; color:#666; letter-spacing:2px; }
.hud-value { font-family:'Creepster',cursive; font-size:1.4rem; color:#ff4444; }
.hud-coins { font-family: 'Special Elite', cursive; font-size: 1.2rem; color: #ffd700; margin-top: 5px; text-shadow: 0 0 5px #aa8800; }
#status-text { font-family:'Special Elite',cursive; font-size:1rem; color:#8f8; text-shadow:0 0 10px #0f0; animation:statusPulse 2s infinite; }
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Helper banner */
#helper-banner { position:absolute; top:70px; left:50%; transform:translateX(-50%); background:rgba(0,80,0,0.85); border:1px solid #0f0; padding:10px 28px; border-radius:20px; font-family:'Special Elite',cursive; color:#0f0; z-index:10; display:flex; align-items:center; gap:12px; font-size:0.95rem; box-shadow:0 0 20px rgba(0,255,0,0.2); }
#helper-name-display { color:#aaffaa; font-size:0.85rem; }
#helper-banner.hidden { display:none; }
#spectate-bar { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
#spectate-bar.hidden { display:none; }
.spectate-btn { width:44px; height:44px; border-radius:50%; border:2px solid #0a0; background:rgba(0,60,0,0.7); color:#0f0; font-family:'Creepster',cursive; font-size:1.2rem; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
.spectate-btn:hover { background:rgba(0,120,0,0.8); box-shadow:0 0 15px rgba(0,255,0,0.4); transform:scale(1.1); }
.spectate-btn.active { background:rgba(0,180,0,0.8); border-color:#0f0; box-shadow:0 0 20px rgba(0,255,0,0.6); }
.spectate-btn.dead-helper { opacity:0.3; border-color:#600; background:rgba(60,0,0,0.5); color:#800; cursor:default; }
.pulse-dot { width:10px; height:10px; background:#0f0; border-radius:50%; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.8)} }

/* Minimap */
#minimap { position:absolute; bottom:20px; right:20px; border:2px solid rgba(255,0,0,0.3); border-radius:8px; z-index:10; opacity:0.7; background:rgba(0,0,0,0.5); }

/* Jumpscare */
#jumpscare-overlay { background:#000; z-index:100; }
#jumpscare-display { width:100vw; height:100vh; object-fit:cover; animation:jumpscareAnim 0.8s ease-out; }
@keyframes jumpscareAnim { 0%{transform:scale(3);opacity:0} 10%{transform:scale(1.2);opacity:1} 50%{transform:scale(1)} 100%{transform:scale(1.1)} }

/* Death screen */
#death-screen { background:rgba(30,0,0,0.95); flex-direction:column; z-index:50; }
.death-content { text-align:center; }
.death-content h2 { font-size:5rem; margin-bottom:1rem; }
.death-content p { font-family:'Special Elite',cursive; color:#888; margin-bottom:1.5rem; font-size:1.2rem; }

/* Level complete */
#level-complete-screen { background:rgba(0,20,0,0.95); flex-direction:column; z-index:50; }
.level-complete-content { text-align:center; }
.level-complete-content h2 { font-family:'Creepster',cursive; font-size:4rem; color:#4f4; text-shadow:0 0 30px #0f0; margin-bottom:1rem; }
.complete-level { font-family:'Creepster',cursive; font-size:8rem; color:#0f0; text-shadow:0 0 50px #0f0; margin:1rem 0; }
#rewards-container { margin:1.5rem 0; }
.reward-item { font-family:'Special Elite',cursive; font-size:1.4rem; color:#ff0; margin:0.5rem 0; animation:rewardPop 0.5s ease-out; }
@keyframes rewardPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* Game over */
#gameover-screen { background:rgba(20,0,0,0.95); flex-direction:column; z-index:50; }
.gameover-content { text-align:center; }
.gameover-content h2 { font-size:5rem; margin-bottom:1rem; }
.gameover-content p { font-family:'Special Elite',cursive; color:#888; margin-bottom:1rem; font-size:1.2rem; }

/* Screen shake */
.shake { animation:shake 0.3s ease-in-out; }
@keyframes shake { 0%,100%{transform:translate(0)} 25%{transform:translate(-10px,5px)} 50%{transform:translate(10px,-5px)} 75%{transform:translate(-5px,10px)} }