*{box-sizing:border-box} html,body{margin:0;height:100%;overflow:hidden;background:#0b0d10;color:#f4ecd8;font:15px/1.4 Georgia,"Times New Roman",serif}
#view{position:fixed;inset:0;width:100vw;height:100vh;display:block}
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid rgba(255,240,210,.45);border-bottom-width:2px;border-radius:4px;font:12px/1.4 ui-monospace,monospace;text-align:center;background:rgba(0,0,0,.25)}
#crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,250,235,.85);box-shadow:0 0 3px rgba(0,0,0,.6);opacity:0;transition:all .15s}
body.playing #crosshair{opacity:1} body.aim #crosshair{width:18px;height:18px;margin:-9px 0 0 -9px;background:transparent;border:2px solid rgba(255,226,150,.95)}
#hint{position:fixed;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font-size:16px;text-shadow:0 1px 4px #000,0 0 12px rgba(0,0,0,.6);white-space:nowrap;pointer-events:none}
#hint kbd{background:rgba(255,226,150,.2);border-color:rgba(255,226,150,.8);color:#ffe7a6}
#hud{position:fixed;top:18px;right:22px;text-align:right;pointer-events:none;opacity:0} body.playing #hud{opacity:1}
#score{font-size:17px;letter-spacing:.06em;text-shadow:0 1px 4px #000;padding:6px 14px;border-radius:20px;background:linear-gradient(90deg,rgba(10,12,16,0),rgba(10,12,16,.45))}
#toast{font-size:28px;color:#ffe08a;text-shadow:0 2px 8px #000;opacity:0}
#toast.pop{animation:pop 1.8s ease-out} @keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.8)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
#loc{position:fixed;top:13%;left:50%;transform:translateX(-50%);font-size:30px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.8);opacity:0;pointer-events:none;white-space:nowrap}
#loc.show{animation:loc 3.6s ease-out} @keyframes loc{0%{opacity:0;letter-spacing:.3em}15%{opacity:.95}70%{opacity:.95}100%{opacity:0}}
#msg{position:fixed;left:50%;bottom:9%;transform:translateX(-50%) translateY(10px);max-width:min(760px,86vw);padding:14px 22px;border-radius:10px;background:linear-gradient(180deg,rgba(18,16,12,.78),rgba(18,16,12,.66));border:1px solid rgba(255,226,170,.22);box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:17px;text-align:center;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
#msg.show{opacity:1;transform:translateX(-50%)}
#fps{position:fixed;top:10px;left:12px;font:12px ui-monospace,monospace;color:#cfe;opacity:0;text-shadow:0 1px 2px #000} #fps.show{opacity:.9}
#inv{position:fixed;top:0;right:0;bottom:0;width:340px;padding:70px 26px 26px;background:linear-gradient(270deg,rgba(14,12,9,.92),rgba(14,12,9,.78));border-left:1px solid rgba(255,226,170,.18);transform:translateX(105%);transition:transform .3s ease}
#inv.open{transform:none} #inv h2{margin:0 0 14px;font-weight:normal;letter-spacing:.2em;text-transform:uppercase;font-size:18px;color:#ffe2a8}
#inv ul{list-style:none;margin:0;padding:0} #inv li{padding:10px 12px;margin:0 0 8px;border-radius:8px;background:rgba(255,240,210,.06);border:1px solid rgba(255,240,210,.08)}
#inv li b{display:block;font-weight:normal;font-size:16px;color:#fff3d6} #inv li span{font-size:13px;opacity:.75} #inv li.empty{opacity:.6;font-style:italic}
#inv .keys{position:absolute;bottom:18px;opacity:.6;font-size:13px}
#cmdWrap{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:min(820px,94vw);transition:transform .25s;background:rgba(10,10,12,.86);border:1px solid rgba(255,226,170,.2);border-bottom:0;border-radius:10px 10px 0 0}
#cmdWrap.open{transform:translate(-50%,0)}
#log{max-height:170px;overflow:auto;padding:10px 16px 4px;font-size:14px;opacity:.85} #log .echo{color:#9fd0ff}
#cmd{width:100%;padding:12px 16px;border:0;border-top:1px solid rgba(255,255,255,.08);background:transparent;color:#fff;font:15px ui-monospace,monospace;outline:none}
#title{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(8,10,14,.35),rgba(8,10,14,.85));transition:opacity .6s}
body.playing #title{opacity:0;pointer-events:none}
.card{text-align:center;padding:34px 46px;max-width:620px}
.card h1{margin:0;font-weight:normal;font-size:52px;letter-spacing:.04em;text-shadow:0 3px 18px rgba(0,0,0,.7)} .card h1 span{color:#ffd27a}
.card .sub{margin:4px 0 22px;letter-spacing:.2em;text-transform:uppercase;font-size:13px;opacity:.8}
#loading{height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin:0 auto 22px;width:70%;overflow:hidden} #loadbar{height:100%;width:0;background:#ffd27a;transition:width .2s}
body.loaded #loading{opacity:0}
.controls{list-style:none;padding:0;margin:0 0 18px;font-size:14px;line-height:2.1;opacity:.9}
.q{display:block;margin-bottom:18px;font-size:14px} select{background:#1b1a17;color:#f4ecd8;border:1px solid #6a5a3a;border-radius:4px;padding:3px 6px;font:inherit}
#start{font:inherit;font-size:18px;letter-spacing:.2em;text-transform:uppercase;padding:10px 38px;border-radius:30px;border:1px solid #ffd27a;background:rgba(255,210,122,.12);color:#ffe7b0;cursor:pointer;opacity:.4;pointer-events:none}
body.loaded #start{opacity:1;pointer-events:auto} #start:hover{background:rgba(255,210,122,.25)}
.fine{margin-top:22px;font-size:11px;opacity:.55}
body.shot #hint, body.noui #hud, body.noui #msg, body.noui #crosshair, body.noui #hint, body.noui #loc{display:none}