:root{--ink:#f4ede2;--muted:#c9bba8;--panel:rgba(24,18,13,.72);--line:rgba(244,237,226,.18);--brass:#d6ad5e;--walnut:#6b4127;--display:"Italiana","Didot",Georgia,serif;--body:"Manrope","Segoe UI",system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#120e0b;color:var(--ink);font-family:var(--body);-webkit-user-select:none;user-select:none;touch-action:none}#app{position:fixed;top:0;right:0;bottom:0;left:0}#app canvas{display:block}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10;background:radial-gradient(ellipse at 50% 30%,#3c28198c,#0c0907eb);padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.screen[hidden]{display:none}.card{max-width:520px;width:100%;display:grid;gap:14px;text-align:left}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,9vw,76px);line-height:1;margin:0}.lede,#loadtext{color:var(--muted);margin:0;line-height:1.55}.bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}.bar span{display:block;height:100%;width:0;background:var(--brass);transition:width .2s}.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:14px;color:var(--muted)}kbd{display:inline-block;min-width:22px;padding:2px 6px;margin-right:3px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;font:600 12px var(--body);color:var(--ink);text-align:center;background:#ffffff0a}button{font:600 14px var(--body);color:#1b140e;background:var(--brass);border:0;border-radius:4px;padding:12px 22px;cursor:pointer;justify-self:start}button:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:2px}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}#hud[hidden]{display:none}#room{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translate(-50%);font-family:var(--display);font-size:26px;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.6)}#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ffffffbf;box-shadow:0 0 0 1px #00000059}#prompt{position:absolute;left:50%;top:calc(50% + 34px);transform:translate(-50%);background:var(--panel);padding:8px 14px;border-radius:4px;font-size:14px;border:1px solid var(--line)}#prompt[hidden]{display:none}#minimap{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom));width:110px;height:220px;background:var(--panel);border:1px solid var(--line);border-radius:4px}#minimap.big{width:220px;height:440px}#toolbar{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));display:flex;gap:6px;align-items:center;pointer-events:auto;background:var(--panel);padding:6px 8px;border-radius:4px;border:1px solid var(--line);font-size:13px}#toolbar select{font:500 13px var(--body);background:#2a2018;color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:5px}#toolbar button{padding:6px 10px;font-size:12px}#touch{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#stick{position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(70px + env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;border:1px solid var(--line);background:#140f0a59;pointer-events:auto}#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#f4ede259}#doorbtn,#runbtn{position:absolute;bottom:calc(150px + env(safe-area-inset-bottom));pointer-events:auto;opacity:.9}#doorbtn{right:calc(20px + env(safe-area-inset-right))}#runbtn{right:calc(100px + env(safe-area-inset-right))}.touch-only{display:none}@media (hover:none) and (pointer:coarse){.touch-only{display:block}.keys.touch-only{display:grid}.desktop-only{display:none}#minimap{bottom:auto;top:calc(54px + env(safe-area-inset-top))}}@media (prefers-reduced-motion:reduce){.bar span{transition:none}}#toolbar .light{display:flex;align-items:center;gap:6px;color:var(--muted)}#toolbar input[type=range]{width:84px;accent-color:var(--brass)}
