:root{--bg:#07080c;--ink:#e8dcc4;--muted:#8a7f6a;--gold:#d4b056;--blood:#7a1f24;--panel:#08090ec7}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;color:var(--ink);background:#030308;font-family:Cormorant Garamond,serif;overflow:hidden}body{justify-content:center;align-items:center;display:flex}#frame{background:var(--bg);width:min(100vw,177.778vh);height:min(100vh,56.25vw);position:relative;box-shadow:0 0 80px #000c,inset 0 0 80px #00000059}canvas{image-rendering:auto;width:100%;height:100%;display:block}#hud{pointer-events:none;opacity:0;justify-content:space-between;padding:22px 28px;transition:opacity .4s;display:flex;position:absolute;inset:0}#hud.visible{opacity:1}#masks{gap:6px;margin-bottom:10px;display:flex}.mask{background:0 0;border:1.5px solid #d4b056;border-radius:50%/58% 58% 42% 42%;width:22px;height:22px;transform:rotate(-18deg);box-shadow:0 0 8px #d4b05640}.mask.filled{background:radial-gradient(circle at 40% 35%,#fff4d2,#e0b44a 55%,#8a4a12)}.mask.empty{opacity:.35}#soul-wrap{background:#00000073;border:1px solid #d4b0568c;width:92px;height:7px;overflow:hidden}#soul-fill{background:linear-gradient(90deg,#3d6a88,#d4e8f4);width:0%;height:100%;transition:width 80ms linear;box-shadow:0 0 10px #8ec8e8}#room-name{letter-spacing:.28em;color:var(--gold);text-align:right;font-family:Cinzel,serif;font-size:11px}#stats{color:var(--muted);text-align:right;margin-top:6px;font-size:15px}#overlay{opacity:0;pointer-events:none;background:radial-gradient(#08090e6b,#030308c7);justify-content:center;align-items:center;transition:opacity .45s;display:flex;position:absolute;inset:0}#overlay.show{opacity:1;pointer-events:auto}.panel{text-align:center;width:min(640px,86%);padding:18px}.panel.hidden{display:none}.eyebrow{letter-spacing:.42em;color:var(--gold);text-transform:uppercase;margin-bottom:14px;font-family:Cinzel,serif;font-size:11px}h1{letter-spacing:.18em;color:#f3ead4;text-shadow:0 0 40px #d4b05640;font-family:Cinzel,serif;font-size:clamp(42px,8vw,78px);font-weight:700;line-height:.95}h2{letter-spacing:.22em;color:#f3ead4;font-family:Cinzel,serif;font-size:52px}.tag{color:var(--muted);letter-spacing:.02em;word-spacing:.08em;margin-top:16px;font-size:20px;font-style:italic}.lore{color:#cfc3a8;letter-spacing:.01em;word-spacing:.1em;max-width:520px;margin:22px auto 0;font-size:17px;line-height:1.55}.controls{color:var(--muted);letter-spacing:.02em;word-spacing:.08em;gap:7px;margin:26px auto 0;font-size:15px;display:grid}kbd{min-width:22px;color:var(--gold);letter-spacing:.08em;border:1px solid #d4b05673;margin:0 2px;padding:1px 6px;font-family:Cinzel,serif;font-size:11px;display:inline-block}button{color:var(--gold);border:1px solid var(--gold);letter-spacing:.16em;word-spacing:.2em;cursor:pointer;background:0 0;margin-top:26px;padding:12px 28px;font-family:Cinzel,serif;font-size:13px;transition:background .2s,color .2s}button:hover{background:var(--gold);color:#14110b}.hint{color:#6d6556;letter-spacing:.08em;margin-top:16px;font-size:14px}#dead-screen h2{color:#c45a52;text-shadow:0 0 30px #8c1e2473}