html, body { margin: 0; height: 100%; overflow: hidden; background: #111; font-family: sans-serif; }
canvas { display: block; }
#ui { position: absolute; top: 10px; left: 10px; color: #fff; }
h1 { margin: 0 0 8px; font-style: italic; color: #c33; text-shadow: 0 0 6px #000; }
button { font-size: 15px; padding: 8px 12px; margin: 0 4px 4px 0; border: 2px solid #e10600; background: #222; color: #fff; border-radius: 6px; cursor: pointer; }
button.on { background: #e10600; }
p { margin: 4px 0; font-size: 14px; text-shadow: 0 0 4px #000; }
#stamina { margin-top: 6px; font-size: 14px; text-shadow: 0 0 4px #000; }
#stamina-bar { width: 200px; height: 14px; border: 2px solid #fff; border-radius: 8px; background: #222; overflow: hidden; margin-top: 2px; }
#stamina-fill { height: 100%; width: 100%; background: #3c3; }
#prompt { position: fixed; left: 50%; top: 60%; transform: translateX(-50%); padding: 8px 16px; background: rgba(0,0,0,0.65); border: 2px solid #c33; border-radius: 8px; font-size: 18px; display: none; pointer-events: none; }
#caught { position: fixed; inset: 0; display: none; background: rgba(120,0,0,0.55); color: #fff; font-size: 40px; font-weight: bold; text-align: center; padding-top: 38vh; text-shadow: 0 0 10px #000; pointer-events: none; }
#hiding { position: fixed; inset: 0; display: none; pointer-events: none; background: linear-gradient(#000 0 38%, transparent 38% 62%, #000 62%); opacity: 0.92; }
#prompt, #caught { z-index: 5; }
#keyhud { display: none; margin-top: 8px; font-size: 14px; color: #fc3; text-shadow: 0 0 4px #000; }
#end { position: fixed; inset: 0; display: none; background: rgba(0,0,0,0.85); color: #fff; text-align: center; padding-top: 30vh; z-index: 9; }
#end div { font-size: 56px; font-weight: bold; color: #e10600; }
#end p { font-size: 20px; margin: 16px 0 24px; }

#title { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at center, #1a0d0d, #000 75%); color: #ddd; }
#title h2 { font-size: 64px; margin: 0 0 30px; color: #c33; text-shadow: 0 0 20px #600; font-style: italic; }
#title button { display: block; margin: 12px auto; width: 220px; padding: 12px; font-size: 22px; color: #eee; background: #2a0a0a; border: 2px solid #a22; cursor: pointer; }
#title button:hover { background: #a22; }
#title p { font-size: 26px; margin: 0 0 30px; }
#title-credits { display: none; }