*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:#1b1410;color:#f3e9dc;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}

#bars{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));width:min(30vw,300px);pointer-events:none}
.bar{height:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:3px;overflow:hidden;margin-bottom:5px;transform:skewX(-14deg)}
.bar.sta{height:8px;width:82%}
.bar i{display:block;height:100%;width:100%;transition:width .12s}
.bar.hp i{background:linear-gradient(90deg,#58d36a,#b6f08a)}
.bar.sta i{background:linear-gradient(90deg,#f0b93a,#ffe08a)}

#target{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  padding:5px 14px;background:rgba(0,0,0,.5);border-left:3px solid #ff8a3c;font-size:13px;letter-spacing:.08em;white-space:nowrap;pointer-events:none}
#target.rage{border-color:#ff3020;color:#ffb0a0}

#minimap{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:104px;height:104px;border-radius:50%;
  background:rgba(20,14,10,.55);border:1px solid rgba(255,255,255,.3);pointer-events:none}

#log{position:absolute;left:max(14px,env(safe-area-inset-left));top:64px;font-size:12px;line-height:1.5;pointer-events:none;text-shadow:0 1px 2px #000}
#log div{animation:logIn .25s;opacity:.95}
#log .gain{color:#7ff0dc}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}}

#toast{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);font-size:clamp(18px,4.2vw,30px);font-weight:700;letter-spacing:.14em;
  text-shadow:0 2px 8px #000,0 0 18px rgba(255,138,60,.7);opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;text-align:center}
#toast.on{opacity:1}

#dmgLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dmg{position:absolute;font-weight:800;font-size:20px;color:#fff;text-shadow:0 0 4px #000,0 2px 0 #000;transform:translate(-50%,-50%);font-family:Georgia,serif}
.dmg.weak{color:#ffb23c;font-size:27px}
.dmg.hurt{color:#ff5a48}

#stickZone{position:absolute;left:0;bottom:0;width:45%;height:68%}
#lookZone{position:absolute;right:0;top:0;width:55%;height:100%}
#stickBase{position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);pointer-events:none}
#stickKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.35)}

.btn{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:rgba(20,14,10,.5);color:#fff;font:700 14px/1 inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;touch-action:none}
.btn:active,.btn.on{background:rgba(255,138,60,.55);border-color:#ffb27a}
.btn.big{width:86px;height:86px;right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));font-size:17px;border-color:#ff8a3c}
.btn.mid{width:62px;height:62px}
#btnDodge{right:calc(max(20px,env(safe-area-inset-right)) + 98px);bottom:max(16px,env(safe-area-inset-bottom))}
#btnHeal{right:calc(max(20px,env(safe-area-inset-right)) + 70px);bottom:calc(max(22px,env(safe-area-inset-bottom)) + 82px);border-color:#58d36a}
#btnHeal span{font-size:11px;color:#b6f08a}
#btnHeal span::before{content:"×"}
.btn.small{width:50px;height:50px;font-size:11px;right:max(14px,env(safe-area-inset-right));bottom:calc(max(22px,env(safe-area-inset-bottom)) + 104px)}
.btn.wide{border-radius:8px;width:auto;height:44px;padding:0 20px;right:calc(max(20px,env(safe-area-inset-right)) + 150px);bottom:calc(max(22px,env(safe-area-inset-bottom)) + 96px);
  border-color:#4fe0c8;color:#bff7ee;font-size:15px;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 14px rgba(79,224,200,.8)}}

#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .4s}
#fade.on{opacity:1}

.panel{position:fixed;inset:0;margin:auto;width:min(92vw,520px);height:fit-content;max-height:92vh;overflow:auto;
  background:rgba(24,17,12,.94);border:1px solid #ff8a3c;border-radius:10px;padding:16px 18px 18px;touch-action:pan-y}
.panel h2{margin:0 0 10px;font-size:18px;letter-spacing:.1em;color:#ffb27a}
.panel .mats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;padding:8px 10px;background:rgba(255,255,255,.06);border-radius:6px;margin-bottom:12px}
.panel .mats b{color:#7ff0dc;margin-left:4px}
.panel .row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12)}
.panel .row .info{flex:1;font-size:13px;line-height:1.6}
.panel .row .info strong{font-size:15px}
.panel .cost{color:#cbbfae;font-size:12px}
.panel .cost .ng{color:#ff7a66}
.panel button{font:700 14px inherit;color:#1b1410;background:#ff8a3c;border:0;border-radius:6px;padding:10px 14px;min-width:76px}
.panel button:disabled{background:#5a4a40;color:#9a8a7c}
.panel .close{display:block;width:100%;margin-top:12px;background:transparent;color:#f3e9dc;border:1px solid rgba(255,255,255,.4)}
.panel .stat{font-size:12px;color:#cbbfae;margin-top:8px}

#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(120,70,40,.35),rgba(15,10,8,.92));padding:16px;overflow:auto;touch-action:pan-y}
.titleBox{max-width:520px;text-align:center}
.titleBox .sub{margin:0;font-size:12px;letter-spacing:.3em;color:#ffb27a}
.titleBox h1{margin:6px 0 10px;font-size:clamp(34px,9vw,58px);letter-spacing:.18em;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  text-shadow:0 0 24px rgba(255,138,60,.6)}
.titleBox .lead{margin:0 0 16px;font-size:14px;line-height:1.8;color:#e2d4c2}
.how{list-style:none;margin:0 auto 18px;padding:10px 14px;text-align:left;font-size:12px;line-height:1.9;background:rgba(0,0,0,.35);border-radius:8px;color:#d9ccba}
.how b{color:#7ff0dc}
.start{font:700 18px inherit;letter-spacing:.2em;color:#1b1410;background:#ff8a3c;border:0;border-radius:8px;padding:14px 40px}
.start:disabled{opacity:.5}
.note{font-size:11px;color:#a8998a;margin:12px 0 0}