*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#120d0b;color:#f4e6c8;font-family:Georgia,'Times New Roman',serif;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none;transition:opacity .3s}
#hud.dim{opacity:.0}
#topbar{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:14px;background:linear-gradient(#2a1d17cc,#1a120ecc);border:1px solid #6b4a2f;box-shadow:0 4px 18px #0008}
.stat{display:flex;align-items:center;gap:5px;font-size:17px}
.stat b{min-width:1.2em;font-variant-numeric:tabular-nums}
.energy .bar{width:70px;height:9px;border-radius:5px;background:#0006;overflow:hidden;border:1px solid #0008}
.energy i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff6b6b,#ffb36b);transition:width .15s}
.energy i.low{animation:pulse .6s infinite alternate}
@keyframes pulse{to{opacity:.45}}
#compass{width:300px;height:40px}
#objective{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 64px);left:50%;transform:translateX(-50%);font-size:15px;color:#ffe9b0;text-shadow:0 1px 4px #000;opacity:.9;white-space:nowrap}
#crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;opacity:.75;box-shadow:0 0 0 1.5px #0007}
#hint{position:absolute;left:50%;top:60%;transform:translateX(-50%);padding:6px 14px;border-radius:10px;background:#1a120ecc;border:1px solid #c9983a;font-size:18px;color:#ffe9b0;opacity:0;transition:opacity .15s}
#hint.show{opacity:1}
#bubble,#toast{position:absolute;left:50%;transform:translateX(-50%) translateY(8px);padding:8px 16px;border-radius:18px;opacity:0;transition:opacity .25s,transform .25s;text-align:center;max-width:88vw}
#bubble{bottom:20%;background:linear-gradient(#7fdcf0e6,#34b8c0e6);color:#06323a;font-weight:700;font-size:20px;border:2px solid #fff6d0;box-shadow:0 6px 20px #0006}
#toast{top:calc(max(10px,env(safe-area-inset-top)) + 92px);background:#1a120ee6;border:1px solid #c9983a;font-size:17px;color:#ffe9b0}
#bubble.show,#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#prox{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,#0000 55%,#3fd6d044 100%);transition:opacity .3s}
#btnPause{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;pointer-events:auto;width:42px;height:42px;border-radius:12px;border:1px solid #6b4a2f;background:#1a120ecc;color:#ffe9b0;font-size:16px}
body.is-touch #btnPause{display:block}
body.is-touch #topbar{gap:6px;padding:4px 8px;top:6px}
body.is-touch .stat{font-size:14px}
body.is-touch #compass{width:150px}
body.is-touch #objective{top:54px;font-size:13px}

#touch{position:fixed;inset:0;display:none;z-index:5}
body.is-touch.playing #touch{display:block}
#joyBase{display:none;position:absolute;width:112px;height:112px;margin:-56px;border-radius:50%;background:#ffffff14;border:2px solid #ffffff44}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#ffffff55;transform:translate(-50%,-50%)}
#touch button{position:absolute;width:68px;height:68px;border-radius:50%;border:2px solid #ffffff55;background:#1a120e99;color:#ffe9b0;font-size:26px;font-family:inherit}
#touch button.on{background:#c9983acc}
#btnJump{right:22px;bottom:34px}
#btnUse{right:104px;bottom:34px;font-weight:700}
#btnRun{right:22px;bottom:116px}

.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a120e88,#0a0605dd);z-index:20}
.overlay.show{display:flex}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#120d0b;z-index:30;transition:opacity .5s}
#loading.hide{opacity:0;pointer-events:none}
.card{max-width:min(560px,92vw);padding:26px 30px;border-radius:18px;text-align:center;background:linear-gradient(#2b1e17f2,#1b130ff2);border:1px solid #7a5535;box-shadow:0 10px 50px #000a}
h1{margin:0 0 8px;font-size:34px;color:#ffd98a;text-shadow:0 2px 8px #000}
h2{margin:0 0 10px;font-size:26px;color:#ffd98a}
.sub{margin:6px 0 14px;color:#e8d3a8;line-height:1.4}
.keys{list-style:none;padding:0;margin:10px 0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px;font-size:15px;text-align:left}
.keys b{color:#ffd98a}
.touch-only{display:none;font-size:14px}
body.is-touch .touch-only{display:block}
body.is-touch .keys{display:none}
button.primary{background:linear-gradient(#e0a94a,#b27a27);color:#2a1a08;font-weight:700}
.card button{font-family:inherit;font-size:19px;padding:11px 26px;margin:6px;border-radius:12px;border:1px solid #7a5535;background:#3a2a1f;color:#f4e6c8;cursor:pointer}
.card button:hover{filter:brightness(1.12)}
.q{display:block;margin-top:10px;font-size:14px;color:#c7b08a}
.q select{background:#2a1d17;color:#f4e6c8;border:1px solid #7a5535;border-radius:6px;padding:3px 6px;font-family:inherit}
.track{width:260px;height:8px;margin:14px auto 8px;border-radius:5px;background:#0006;overflow:hidden}
.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c9983a,#ffd98a);transition:width .2s}
#loadText{margin:0;color:#c7b08a;font-size:14px}