*{box-sizing:border-box;margin:0;padding:0}
html,body,#wrap{width:100%;height:100%;overflow:hidden;background:#07060a;touch-action:none;user-select:none;-webkit-user-select:none}
body{font-family:Georgia,Palatino,"Palatino Linotype","Book Antiqua","Times New Roman",Times,serif;color:#e8dcc0}
#view{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;left:24px;top:24px;width:min(320px,46vw);z-index:5;pointer-events:none}
.bars{display:flex;flex-direction:column;gap:7px}
.bar{height:10px;background:#1a120c;border:1px solid #4a3a28;overflow:hidden;box-shadow:0 0 0 1px #000}
.bar i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(1);transition:transform .08s linear}
.bar.hp i{background:linear-gradient(180deg,#b42a2a,#6a1010)}
.bar.stam i{background:linear-gradient(180deg,#d4c07a,#7a6a32);height:100%}
.bar.stam{height:7px}
.flasks{margin-top:8px;display:flex;gap:6px}
.flasks b{width:14px;height:22px;border:1px solid #c9b56a;border-radius:0 0 7px 7px;background:linear-gradient(180deg,#6a1020,#3a0810);display:block;box-shadow:inset 0 2px 0 #e8c07044}
.flasks b.empty{opacity:.28;background:#1a1510}
#boss-ui{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:min(760px,86vw);z-index:5;pointer-events:none;text-align:center}
#boss-ui .banner{display:inline-block;margin:0 auto 10px;padding:6px 28px;letter-spacing:.28em;font-size:11px;color:#efe4c4;border-top:1px solid #c9b56a88;border-bottom:1px solid #c9b56a88;background:linear-gradient(90deg,transparent,#1a120ccc 15%,#1a120ccc 85%,transparent);text-transform:uppercase}
#boss-ui .bar.boss{height:12px;background:#140808;border:1px solid #5a2018}
#boss-ui .bar.boss i{background:linear-gradient(180deg,#c43a2a,#5a100c)}
.overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#00000088 0%,#000000d0 100%)}
.overlay[hidden],#hud[hidden],#boss-ui[hidden],#touch[hidden]{display:none!important}
.title h1{font-weight:400;font-size:clamp(2rem,6vw,4.4rem);letter-spacing:.22em;text-transform:uppercase;color:#f0e0b0;text-shadow:0 0 24px #c9a24a66,0 2px 0 #000}
.title .sigil{color:#c9b56a;font-size:22px;margin-bottom:18px;opacity:.8}
.prompt{margin-top:36px;letter-spacing:.4em;font-size:12px;text-transform:uppercase;color:#cbb98a;opacity:.8;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
h2.died{font-weight:400;font-size:clamp(2.6rem,8vw,6rem);letter-spacing:.18em;color:#b10f0f;text-shadow:0 0 18px #400000,0 2px 0 #000}
h2.win{font-weight:400;font-size:clamp(2.2rem,7vw,5rem);letter-spacing:.22em;color:#e8c86a;text-shadow:0 0 28px #a67c2a88,0 2px 0 #000}
#touch{position:absolute;inset:0;z-index:8;pointer-events:none}
.joy{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:140px;height:140px;pointer-events:auto}
.joy-base{position:absolute;inset:0;border-radius:50%;border:2px solid #c9b56a55;background:#00000055}
.joy-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#e8dcc0cc;border:2px solid #c9b56a;box-shadow:0 0 10px #000}
.actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:200px;height:190px;pointer-events:none}
.act{position:absolute;pointer-events:auto;-webkit-tap-highlight-color:transparent;border:1px solid #c9b56a99;border-radius:50%;color:#efe4c4;background:#1a120ccc;font:600 11px/1 Georgia,serif;letter-spacing:.08em;text-transform:uppercase;width:64px;height:64px}
.act.light{right:8px;bottom:54px;width:72px;height:72px}
.act.heavy{right:86px;bottom:10px}
.act.roll{right:86px;bottom:86px}
.act.heal{right:16px;bottom:136px;width:54px;height:54px;font-size:10px}
.act:active{background:#c9b56a55}
@media(max-width:640px){#hud{left:14px;top:max(12px,env(safe-area-inset-top));width:min(240px,58vw)}.bar{height:8px}#boss-ui{bottom:max(8px,env(safe-area-inset-bottom))}}