:root{--bg:#171310;--paper:#e8dcc0;--gold:#d9a441;--jade:#5fb3a1;--blood:#b8412f;--ink:#2a231d;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0;background:var(--bg);color:var(--paper);font-family:'Noto Serif',Georgia,serif;overflow:hidden;touch-action:none;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;image-rendering:auto}
.v{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(23,19,16,.75))}
#hud{position:fixed;left:10px;top:calc(10px + env(safe-area-inset-top,0px));width:210px;background:rgba(23,19,16,.82);border:1px solid #5a4a36;padding:8px 10px;font-size:13px}
#hud b{font-size:16px;color:var(--gold)}
.bar{height:8px;background:#3a3027;margin:5px 0 7px;position:relative}.bar i{display:block;height:100%;width:0}
#hp i{background:var(--blood)}#mp i{background:var(--jade)}#xp i{background:var(--gold)}
#log{position:fixed;left:0;right:0;top:calc(10px + env(safe-area-inset-top,0px));text-align:center;font-size:14px;color:var(--gold);text-shadow:0 1px 2px #000;pointer-events:none;padding:0 240px}
#bt{position:fixed;right:10px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
button{font:inherit;font-size:14px;color:var(--paper);background:rgba(23,19,16,.88);border:1px solid #8a6d3b;padding:10px 14px;cursor:pointer;min-height:44px}
button:hover:not(:disabled){background:#3a2d1d}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--gold)}
#bt .go{border-color:var(--gold);color:var(--gold)}
#tip{position:fixed;left:10px;bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:12px;color:#a8977a;max-width:46vw}
@media(max-width:600px){#log{padding:0;top:auto;bottom:calc(70px + env(safe-area-inset-bottom,0px))}#tip{display:none}}