* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: #bfe9ee; font-family: "Courier New", monospace; }
canvas { display: block; }
#screen, #reader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: radial-gradient(circle, #06161c 0%, #000 80%); z-index: 10; }
#reader { background: rgba(0, 8, 12, 0.88); z-index: 8; }
#reader .card { max-width: 640px; border: 1px solid #2fd4e6; padding: 24px; text-align: left; line-height: 1.6; box-shadow: 0 0 30px #0ff3; }
#reader h3 { margin: 0 0 4px; color: #2fd4e6; letter-spacing: 2px; }
#reader .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
#reader em { color: #7aa; }
h1 { font-size: clamp(48px, 12vw, 130px); letter-spacing: 0.3em; margin: 0; color: #e8fdff; text-shadow: 0 0 25px #2fd4e6, 3px 0 #f0f, -3px 0 #0ff; animation: glitch 3s infinite; }
h2 { margin: 0 0 24px; font-weight: 400; letter-spacing: 0.5em; color: #2fd4e6; text-transform: uppercase; }
p { max-width: 560px; line-height: 1.6; }
small { color: #6a9; margin-top: 24px; line-height: 1.7; max-width: 640px; }
button { background: transparent; border: 1px solid #2fd4e6; color: #2fd4e6; font: inherit; letter-spacing: 3px; padding: 12px 28px; cursor: pointer; }
button:hover, button:focus-visible { background: #2fd4e6; color: #001018; outline: none; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#bars { position: absolute; left: 20px; top: 16px; display: flex; gap: 12px; align-items: center; font-size: 13px; letter-spacing: 2px; }
.bar { width: 180px; height: 10px; border: 1px solid #2fd4e6; }
#sane { display: block; height: 100%; width: 100%; background: #2fd4e6; transition: background 0.3s; }
#objective { position: absolute; left: 20px; top: 44px; font-size: 13px; color: #8bb; max-width: 420px; }
#prompt { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; color: #fff; text-shadow: 0 0 8px #0ff; }
#whisper { position: absolute; left: 0; right: 0; top: 28%; text-align: center; font-size: 22px; color: #f55; opacity: 0; transition: opacity 0.6s; letter-spacing: 4px; }
#vignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, #200 100%); opacity: 0; }
.flash { animation: flash 0.5s; }
@keyframes flash { from { background: #fff; } to { background: transparent; } }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translateX(6px) skewX(8deg); } 95% { transform: translateX(-6px); } }
[hidden] { display: none !important; }