:root { color-scheme: dark; --fg: #d9dfe2; --dim: #8c979d; --accent: #e0a35a; --red: #e0574a; --green: #6fd08c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--fg); font: 14px/1.4 system-ui, "Segoe UI", sans-serif; overflow: hidden; user-select: none; }
#view, #view canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#crosshair { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(230, 230, 230, .75); box-shadow: 0 0 2px #000; pointer-events: none; transition: transform .12s, background .12s; }
#crosshair.focus { transform: scale(1.8); background: var(--accent); }
#crosshair.hold { background: var(--green); }
#prompt { position: fixed; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: var(--fg); font-size: 14px; white-space: nowrap; pointer-events: none; display: none; }
#prompt .k { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 6px; border: 1px solid var(--dim); border-radius: 3px; text-align: center; color: var(--accent); }
#prompt .bar { height: 3px; margin-top: 4px; background: rgba(255, 255, 255, .15); } #prompt .bar i { display: block; height: 100%; background: var(--green); }
#toast { position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%); color: var(--fg); text-shadow: 0 1px 3px #000; font-size: 15px; pointer-events: none; opacity: 0; transition: opacity .3s; }
#debug { position: fixed; left: 10px; top: 10px; font: 12px/1.35 ui-monospace, Consolas, monospace; white-space: pre; background: rgba(0, 0, 0, .55); padding: 6px 8px; border-radius: 4px; display: none; pointer-events: none; }
#help { position: fixed; right: 14px; top: 14px; width: 380px; background: rgba(8, 9, 10, .88); border: 1px solid #2a2f33; border-radius: 6px; padding: 10px 14px; display: none; }
#help h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: .08em; color: var(--accent); }
#help td { padding: 2px 8px 2px 0; vertical-align: top; } #help td:first-child { color: var(--accent); white-space: nowrap; }
#start { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .78); cursor: pointer; }
#start .box { text-align: center; } #start h1 { letter-spacing: .4em; font-weight: 400; color: #c9b8a6; margin: 0 0 12px; }
#start .bar { width: 280px; height: 3px; margin: 10px auto; background: #222; } #start #bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
#start .hint { color: var(--dim); font-size: 13px; }
/* at the workstation's computer: the hint sits below the picture, no crosshair */
body.ws-computer #prompt { top: auto; bottom: 4%; }
body.ws-computer #crosshair { display: none; }
/* lights out (src/scare/): nothing on screen in the dark */
body.scare #crosshair, body.scare #prompt { display: none; }
/* the haunting's screen cuts, the spirit box's question and the start screen's extras (src/haunt/) */
#hauntOverlay { position: fixed; inset: 0; z-index: 20; display: none; background: #000; pointer-events: none; }
#hauntOverlay.black, #hauntOverlay.static { display: block; }
#hauntOverlay canvas { display: none; width: 100%; height: 100%; image-rendering: pixelated; }
#hauntOverlay.static canvas { display: block; }
#hauntAsk { position: fixed; left: 50%; bottom: 9%; transform: translateX(-50%); width: min(520px, 86vw); text-align: center; z-index: 21; transition: opacity .6s; }
#hauntAsk .hint { color: #9fb3b8; font-size: 13px; margin-bottom: 8px; text-shadow: 0 1px 2px #000; }
#hauntAsk input { width: 100%; box-sizing: border-box; padding: 9px 12px; background: rgba(4, 8, 9, .82); border: 1px solid #2c4044; border-radius: 6px; color: #dfe9ea; font-size: 15px; outline: none; }
#hauntAsk.gone { opacity: 0; }
#start #visitor { display: block; margin: 12px auto 0; width: 240px; padding: 7px 10px; background: rgba(0, 0, 0, .5); border: 1px solid #555; border-radius: 4px; color: #ddd; font-size: 14px; text-align: center; outline: none; }
#start .warn { color: #c9a08a; font-size: 12px; margin-top: 10px; }