:root { color-scheme: dark; font-family: "Courier New", monospace; color: #bffcff; background: #07080b; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 2px solid #bffcff; outline-offset: 6px; }
[hidden] { display: none !important; }
#game { display: block; position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
#hud { position: fixed; z-index: 10; top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); pointer-events: none; text-shadow: 0 2px 6px #000; }
#loop { font-size: 18px; letter-spacing: 4px; }
#seed { margin-top: 8px; font-size: 11px; letter-spacing: 2px; opacity: .55; }
#crosshair { position: fixed; z-index: 10; left: 50%; top: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); background: #d8ffff; opacity: .5; pointer-events: none; }
#start { position: fixed; z-index: 30; inset: 0; display: flex; justify-content: center; align-items: center; padding: 24px; overflow-y: auto; background: rgba(4, 6, 9, .87); }
#panel { text-align: center; max-width: 560px; margin: auto; }
h1 { margin: 0 0 36px; font-size: clamp(38px, 9vw, 72px); font-weight: 400; letter-spacing: 8px; text-shadow: 0 0 30px #68dae533; }
#enter { border: 0; background: transparent; padding: 14px 10px; font-size: 14px; letter-spacing: 3px; }
#touch-controls-toggle { display: block; margin: 10px auto; padding: 12px; min-height: 44px; background: #102025; border: 1px solid #bffcff88; font-size: 11px; letter-spacing: 1px; }
.instructions { color: #929b9e; font-size: 12px; line-height: 1.9; letter-spacing: 2px; }
.instructions p { margin: 24px 0; }
#reset-progress { margin-top: 4px; padding: 12px 16px; min-height: 44px; font-size: 11px; letter-spacing: 2px; color: #929b9e; background: transparent; border: 1px solid #444; }
#reset-progress:hover { color: #bffcff; border-color: #bffcff; }
#save-message { position: fixed; z-index: 40; left: 50%; bottom: max(12%, 32px); transform: translateX(-50%); width: max-content; max-width: 90%; text-align: center; font-size: 12px; letter-spacing: 2px; line-height: 1.6; padding: 8px; text-shadow: 0 1px 5px #000; opacity: 0; transition: opacity .4s; pointer-events: none; }
#save-message.visible { opacity: .95; }
#credits { position: fixed; z-index: 35; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); font-size: 9px; color: #737d80; letter-spacing: 1px; pointer-events: none; }
#mobile-controls, .touch-instructions { display: none; }
.touch-mode .touch-instructions { display: block; }
.touch-mode .desktop-instructions { display: none; }
.touch-mode #mobile-controls { display: block; }
#mobile-controls { position: fixed; inset: 0; z-index: 31; pointer-events: none; }
body:not(.playing) #mobile-controls { opacity: .4; }
body:not(.playing) #mobile-controls * { pointer-events: none; }
body:not(.playing) #pause, body:not(.playing) #look-hint { visibility: hidden; }
.joystick { position: absolute; width: 120px; height: 120px; border: 2px solid #bffcff99; border-radius: 50%; background: #07151b66; pointer-events: auto; touch-action: none; }
#move-stick { left: max(24px, env(safe-area-inset-left)); bottom: max(38px, env(safe-area-inset-bottom)); }
.joystick-knob { position: absolute; left: calc(50% - 22px); top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; background: #bffcff66; border: 1px solid #bffcffcc; pointer-events: none; }
#look-hint { position: absolute; right: max(26px, env(safe-area-inset-right)); bottom: 86px; font-size: 10px; letter-spacing: 2px; opacity: .55; }
#pause { position: absolute; right: max(20px, env(safe-area-inset-right)); top: max(20px, env(safe-area-inset-top)); width: 44px; height: 44px; background: #07151b66; border: 1px solid #bffcff66; pointer-events: auto; }
@media (any-pointer: coarse), (max-width: 900px) { #mobile-controls { display: block; } .touch-instructions { display: block; } .desktop-instructions { display: none; } }
@media (max-width: 600px) { #save-message { bottom: 190px; font-size: 10px; } h1 { margin-bottom: 20px; } #credits { font-size: 8px; } }
@media (max-height: 500px) { h1 { font-size: 34px; margin-bottom: 8px; } .instructions p { margin: 10px 0; } #start { padding: 14px; } #save-message { bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { #save-message { transition: none; } }