/* bbauska/Silus-fireworks/css/style.css for fireworks.bauska.org */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000008; overflow: hidden; font-family: 'Press Start 2P', monospace; cursor: pointer; }
body.demo-started { cursor: none; }
#intro { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000008; transition: opacity 0.6s ease; }
#intro.hidden { opacity: 0; pointer-events: none; }
#intro::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px); pointer-events: none; }
.corner-frame { position: absolute; width: 80px; height: 80px; border: 3px solid; opacity: 0.8; }
.corner-frame.tl { top: 20px; left: 20px; border-color: #00FFFF; border-right: none; border-bottom: none; }
.corner-frame.tr { top: 20px; right: 20px; border-color: #FF00FF; border-left: none; border-bottom: none; }
.corner-frame.bl { bottom: 20px; left: 20px; border-color: #FFD700; border-right: none; border-top: none; }
.corner-frame.br { bottom: 20px; right: 20px; border-color: #40FF80; border-left: none; border-top: none; }
.title-wrap { text-align: center; animation: fadeInUp 1s ease-out; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.title-main { font-size: clamp(36px, 9vw, 80px); color: #00ffff; text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff; letter-spacing: 0.1em; margin-bottom: 8px; animation: glowPulse 2s ease-in-out infinite; }
.title-sub { font-size: clamp(28px, 7vw, 64px); color: #ff00ff; text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff; letter-spacing: 0.06em; margin-bottom: 15px; animation: glowPulse 2s ease-in-out infinite 0.2s; }  /* 12px; */
.title-demo { font-size: clamp(14px, 3vw, 24px); color: #ffd700; text-shadow: 0 0 15px #ffd700; letter-spacing: 0.3em; margin-bottom: 50px; }
.title-world { font-size: clamp(14px, 3vw, 24px); color: #ff002b; text-shadow: 0 0 15px #ff002b; letter-spacing: 0.3em; margin-bottom: 50px; }
.20k { font-size: clamp(14px, 3vw, 24px); color: #ff002b; text-shadow: 0 0 15px #ff002b; letter-spacing: 0.3em; margin-bottom: 50px; }
@keyframes glowPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.click-prompt { font-size: clamp(11px, 2vw, 16px); color: #FFFFFF; animation: blink 0.8s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
#transition { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: #000008; }
#transition.active { display: flex; animation: zoomFade 1s ease-out forwards; }
#transition.fade-out { animation: fadeOut 0.5s ease-out forwards; }
@keyframes zoomFade { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.transition-text { text-align: center; }
.transition-main { font-size: clamp(28px, 7vw, 64px); color: #FFFFFF; text-shadow: 0 0 20px #FFFFFF, 0 0 40px #FFFFFF; animation: textPulse 0.3s ease-in-out infinite alternate; }
@keyframes textPulse { from { transform: scale(1); } to { transform: scale(1.03); } }
#gameCanvas { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity 0.6s ease; }
.crt-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0,0,0,0.4) 100%); }
.crt-scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 2px); animation: scanlineFlicker 0.05s infinite; }
@keyframes scanlineFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.98; } }
#endScreen { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: #000008; }
#endScreen.active { display: flex; animation: endFade 3s ease-in-out forwards; }
@keyframes endFade { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.end-text { font-size: clamp(20px, 5vw, 48px); color: #FFD700; text-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700; text-align: center; animation: endPulse 0.5s ease-in-out infinite alternate; }
@keyframes endPulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.1); opacity: 1; } }