html, body { margin: 0; padding: 0; width: 100%; min-height: 100svh; overflow: hidden; background-color: #000000; font-family: arial; font-weight: bold; color: #ffffff; line-height: 1; }

.disabled { user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.disabled:hover { cursor: default; }
.fade { --fade-in: 0.3s; --fade-out: 0.1s; --opacity: 1; opacity: 0; transition: opacity var(--fade-out) ease; pointer-events: none; }
.hidden { visibility: hidden; }
.none { display: none; }
.visible { opacity: var(--opacity); transition: opacity var(--fade-in) ease; pointer-events: auto; }

@keyframes bat_flap { 0% { transform: scale(var(--bat-scale)) scaleY(1); } 25% { transform: scale(var(--bat-scale)) scaleY(0.7); } 50% { transform: scale(var(--bat-scale)) scaleY(1.2); } 75% { transform: scale(var(--bat-scale)) scaleY(0.8); } 100% { transform: scale(var(--bat-scale)) scaleY(1); } }
@keyframes bat_move { 0% { transform: translate(-10cqi, 0); } 25% { transform: translate(30cqi, -12cqh); } 50% { transform: translate(60cqi, 8cqh); } 75% { transform: translate(90cqi, -10cqh); } 100% { transform: translate(110cqi, 0); } }
@keyframes float { 0% { transform: translate(0cqi, 0cqh) scale(1); } 20% { transform: translate(0.3cqi, -0.22cqh) scale(1.01); } 45% { transform: translate(0.52cqi, 0.18cqh) scale(1.015); } 70% { transform: translate(0.22cqi, -0.37cqh) scale(1.008); } 100% { transform: translate(0cqi, 0cqh) scale(1); } }
@keyframes fog { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.15) translate(2%, -1%); } 100% { transform: scale(1.05) translate(-1%, 2%); } }
@keyframes glow_up { 0%, 100% { background-image: url('up_red.png'); } 50% { background-image: url('up_yellow.png'); } }
@keyframes glow_down { 0%, 100% { background-image: url('down_red.png'); } 50% { background-image: url('down_yellow.png'); } }
@keyframes glow_left { 0%, 100% { background-image: url('left_red.png'); } 50% { background-image: url('left_yellow.png'); } }
@keyframes glow_right { 0%, 100% { background-image: url('right_red.png'); } 50% { background-image: url('right_yellow.png'); } }
@keyframes glow_sword { 0%, 100% { background-image: url('sword.png'); } 50% { background-image: url('sword_yellow.png'); } }
@keyframes particles_move { 0% { transform: translate(0, 0); } 50% { transform: translate(0.5cqi, -2.25cqh); } 100% { transform: translate(0, 0); } }
@keyframes shine { 0% { background-position: 200% 0; } 85% { background-position: -200% 0; } 100% { background-position: -200% 0; } }

#main { margin-left: auto; margin-right: auto; position: relative; max-width: 133.3svh; container-type: inline-size; }
#main:before { content: ''; display: block; padding-top: 75%; }
#game { position: absolute; top: 0; width: 100%; outline: none; }
.game_filter { filter: blur(0.15cqi) brightness(0.8); }
.game_filter_silk { filter: brightness(0.8); }
#guide_canvas { position: absolute; bottom: 2.2%; left: 1.5%; z-index: 1; width: 18%; aspect-ratio: 1 / 1; border-radius: 50%; filter: drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(4px, 0.75cqi, 12px) #000000); outline: none; }
#menu { display: flex; flex-direction: column; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; }
#menu.paused *, #menu.paused *::before, #menu.paused *::after { animation-play-state: paused; }
#bats { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
.bat { position: absolute; width: 3cqi; height: 2.1cqi; opacity: 0.3; animation: bat_move linear infinite; }
.bat_image { display: block; width: 100%; height: 100%; background-image: url('bat.png'); background-repeat: no-repeat; background-size: contain; filter: brightness(0.2) contrast(1.3); animation: bat_flap 0.35s ease-in-out infinite; }
#fog { position: absolute; top: 23%; left: 21%; z-index: 2; width: 58%; height: 53%; background: radial-gradient(circle at 40% 40%, rgba(255, 180, 0, 0.5) 0%, rgba(255, 100, 0, 0.5) 40%, transparent 70%), radial-gradient(circle at 60% 50%, rgba(255, 60, 0, 0.4) 0%, rgba(200, 0, 0, 0.2) 60%, transparent 80%); filter: blur(4cqi) brightness(1.1) saturate(2.5); opacity: 0.7; animation: fog 4s ease-in-out infinite alternate; }
#particles { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; }
.particle { position: absolute; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, var(--particle-color) 50%, transparent 70%); box-shadow: 0 0 0.5cqi var(--particle-color), 0 0 1cqi var(--particle-color); mix-blend-mode: screen; animation: particles_move linear infinite; }
#title { margin-top: 4%; position: relative; z-index: 4; width: 55%; height: 16%; overflow: hidden; background-image: url('title.png'); background-repeat: no-repeat; background-size: contain; filter: drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(4px, 0.75cqi, 12px) #000000); }
#title::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 97%; background: linear-gradient(115deg, transparent 35%, #ffffff55 50%, transparent 65%); background-size: 200% 100%; background-repeat: no-repeat; mask-image: url('title.png'); mask-position: center; mask-repeat: no-repeat; mask-size: 100% 100%; animation: shine 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
#mode { margin-top: 13%; position: relative; z-index: 4; width: 19%; height: 7%; background-image: url('mode.png'); background-repeat: no-repeat; background-size: contain; filter: drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(10px, 2.1cqi, 28px) #000000); animation: float 9s ease-in-out infinite; }
#classic_guided { display: flex; justify-content: center; gap: 13%; margin-top: 3%; position: relative; z-index: 4; width: 90%; height: 25%; animation: float 9s ease-in-out infinite; }
#classic_guided:has(#classic:hover) #guided { filter: brightness(0.5) drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(10px, 2.1cqi, 28px) #000000); }
#classic_guided:has(#guided:hover) #classic { filter: brightness(0.5) drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(10px, 2.1cqi, 28px) #000000); }
#classic_guided:has(#classic:hover) #guided::after, #classic_guided:has(#guided:hover) #classic::after { opacity: 0; }
#classic { background-image: url('classic.png'); }
#classic::after { mask-image: url('classic.png'); }
#guided { background-image: url('guided.png'); }
#guided::after { mask-image: url('guided.png'); }
#classic::after, #guided::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(115deg, transparent 35%, #ffffff55 50%, transparent 65%); background-size: 200% 100%; background-repeat: no-repeat; mask-position: center; mask-repeat: no-repeat; mask-size: 100% 100%; animation: shine 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
#classic:hover, #guided:hover { filter: contrast(1.2) drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(10px, 2.1cqi, 28px) #ff0000); transform: scale(1.2); }
#classic, #guided { overflow: hidden; filter: brightness(1) drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(10px, 2.1cqi, 28px) #ffd200); transform: scale(1); transition: transform 0.3s ease-out; }
.classic_guided { width: 25%; height: 37%; background-repeat: no-repeat; background-size: contain; }
#disclaimer { margin-top: auto; margin-bottom: 1%; position: relative; z-index: 4; font-size: 1.3cqi; color: rgba(255, 255, 255, 0.4); letter-spacing: clamp(1px, 0.3cqi, 6px); text-shadow: clamp(1px, 0.15cqi, 3px) clamp(1px, 0.15cqi, 3px) clamp(4px, 0.75cqi, 12px) #000000; }
#disclaimer a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
#disclaimer a:hover { color: rgba(255, 255, 255, 0.8); }
#vignette { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 4; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.8) 100%); pointer-events: none; }
#info { display: flex; position: absolute; top: 2%; left: 1.5%; z-index: 1; width: 97%; height: 6%; text-shadow: clamp(1px, 0.15cqi, 3px) clamp(1px, 0.15cqi, 3px) clamp(4px, 0.75cqi, 10px) #000000; }
#lives { display: flex; align-items: center; gap: 1px; height: 100%; }
#lives_image { height: 99%; aspect-ratio: 1 / 1; transform: translateY(clamp(-6px, -0.41cqi, -2px)); background-image: url('lives.png'); background-repeat: no-repeat; background-size: contain; filter: drop-shadow(clamp(1px, 0.18cqi, 4px) clamp(1px, 0.18cqi, 4px) clamp(4px, 0.75cqi, 12px) #000000); }
#lives_text { font-size: clamp(1.875cqi, 2.775cqi, 4.5cqi); letter-spacing: clamp(1px, 0.3cqi, 6px); }
#score { margin-top: 0.9%; margin-left: auto; font-size: clamp(1.875cqi, 2.775cqi, 4.5cqi); letter-spacing: clamp(1px, 0.3cqi, 6px); }
#up { top: 54.9%; right: 13.3%; width: 10.2%; height: 10.7%; background-image: url('up.png'); }
#down { top: 85.3%; right: 13.3%; width: 10.2%; height: 10.7%; background-image: url('down.png'); }
#left { top: 68.7%; right: 25.8%; width: 8%; height: 13.5%; background-image: url('left.png'); }
#right { top: 68.7%; right: 3%; width: 8%; height: 13.5%; background-image: url('right.png'); }
#sword { top: 68.1%; right: 12.9%; width: 11%; height: 14.7%; background-image: url('sword.png'); }
#up_mask { top: 50.8%; right: 12.3%; }
#down_mask { top: 83.6%; right: 12.3%; }
#left_mask { top: 67.2%; right: 24.6%; }
#right_mask { top: 67.2%; right: 0; }
#sword_mask { top: 67.2%; right: 12.3%; }
#controls { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none; }
#controls.visible .controls_mask { pointer-events: auto; }
#controls_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.controls { position: absolute; background-size: cover; opacity: 0.3; }
.controls_highlight { opacity: 0.8; }
.controls_mask { position: absolute; width: 12.3%; height: 16.4%; }
.glow_up { opacity: 0.7; animation: glow_up 200ms infinite; }
.glow_down { opacity: 0.7; animation: glow_down 200ms infinite; }
.glow_left { opacity: 0.7; animation: glow_left 200ms infinite; }
.glow_right { opacity: 0.7; animation: glow_right 200ms infinite; }
.glow_sword { opacity: 0.7; animation: glow_sword 200ms infinite; }

#game { backface-visibility: hidden; transform: translateZ(0); will-change: filter; }
#fog, .particle { backface-visibility: hidden; transform: translateZ(0); will-change: transform, opacity; }
#classic, #guided, .bat { backface-visibility: hidden; transform: translateZ(0); will-change: transform; }

@supports (-webkit-hyphens: none) { #fog { filter: blur(4cqi) brightness(1) saturate(1.5); } }