:root{box-sizing:border-box;--gold:#d9cfb4;--dim:#7d776a}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;margin:0;background:#000;overflow:hidden;font-family:Cinzel,"Trajan Pro",Georgia,serif;color:var(--gold)}
canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh}
.scr{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}
.help{margin-top:4vh;font-size:12px;color:#5d584d;text-align:center;padding:0 16px}
#hud{position:fixed;inset:0;pointer-events:none;display:none;z-index:5}
#cmp{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:50%;width:min(300px,70vw);height:26px;transform:translateX(-50%);overflow:hidden;border-bottom:1px solid #d9cfb455;-webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
#cs{display:flex;position:absolute;left:50%;white-space:nowrap}#cs span{width:60px;text-align:center;font-size:16px;flex:none}
#cx{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#fff8;border-radius:50%}
.bar{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));height:7px;border:1px solid #d9cfb488;background:#0007}.bar i{display:block;height:100%;width:100%}
#hp{left:50%;width:min(220px,30vw);transform:translateX(-50%)}#hp i{background:#a3231f}
#mp{left:50%;margin-left:calc(min(220px,30vw)/-2 - min(150px,18vw) - 14px);width:min(150px,18vw)}#mp i{background:#2a5fa8}
#sp{left:50%;margin-left:calc(min(220px,30vw)/2 + 14px);width:min(150px,18vw)}#sp i{background:#3f8a3a}
#msg{position:absolute;top:38%;width:100%;text-align:center;font-size:clamp(28px,8vw,60px);letter-spacing:.2em;color:#9b1c18;opacity:0;transition:opacity 1.2s;text-shadow:0 0 20px #000}
#tc{position:fixed;inset:0;display:none;z-index:6}
.tb{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center}
.tb.img{width:84px;height:84px}
#bA{right:5vw;bottom:calc(36px + env(safe-area-inset-bottom,0px));width:104px;height:104px;background-image:url(../assets/icons/strike-button.webp)}
#bJ{right:calc(5vw + 112px);bottom:calc(70px + env(safe-area-inset-bottom,0px));background-image:url(../assets/icons/jump-button.webp)}
#bR{right:calc(5vw + 8px);bottom:calc(150px + env(safe-area-inset-bottom,0px));background-image:url(../assets/icons/run-button.webp)}
#bR.on{filter:brightness(1.6) drop-shadow(0 0 6px #fff)}
.tb.txt{width:64px;height:64px;border-radius:50%;border:1px solid #d9cfb499;background:#0006;display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center}
#bB{right:calc(5vw + 112px);bottom:calc(160px + env(safe-area-inset-bottom,0px))}
#bW{right:5vw;top:calc(60px + env(safe-area-inset-top,0px))}
#joy{position:absolute;width:120px;height:120px;display:none;background:url(../assets/icons/base-joystick.webp) center/contain no-repeat}
#joy i{position:absolute;left:35px;top:35px;width:50px;height:50px;background:url(../assets/icons/stick-joystick.webp) center/contain no-repeat}
#dmg{position:fixed;inset:0;background:radial-gradient(transparent 40%,#a00);opacity:0;pointer-events:none;z-index:4;transition:opacity .4s}

#load{background:#0a1224;z-index:30;transition:opacity .5s ease}
#load::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,#12213f 0%,#0a1224 48%,#050a15 100%)}
.ld-spin{position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));width:34px;height:34px;margin-left:-17px;border:3px solid rgba(255,255,255,.18);border-top-color:#f6ece4;border-radius:50%;animation:ldspin .9s linear infinite}
@keyframes ldspin{to{transform:rotate(360deg)}}
#menu{background:linear-gradient(90deg,#000e 0,#000a 45%,#0000 100%),radial-gradient(ellipse at 50% 50%,#0000 40%,#000b 100%);z-index:20;display:none;align-items:flex-start;padding-left:9vw;perspective:900px}
#menu h1{font-weight:400;font-size:clamp(34px,9vw,76px);letter-spacing:.18em;margin:0 0 4vh;color:#cfc8b4;transform:rotateY(16deg);transform-origin:left;text-shadow:0 1px #6a665a,0 2px #55524a,0 3px #403d37,0 4px #2c2a26,0 5px #1a1917,0 12px 24px #000}
.it{font-size:clamp(18px,4.5vw,26px);padding:10px 34px 10px 0;color:#7d776a;cursor:pointer;letter-spacing:.08em;transform:rotateY(16deg);transform-origin:left;transition:transform .25s,color .25s,text-shadow .25s;text-shadow:0 2px 0 #000,0 6px 12px #000}
.it:hover,.it:active{color:#fff;transform:rotateY(0) translateZ(60px) translateX(14px);text-shadow:0 0 14px #fff6,0 6px 12px #000}.it.off{opacity:.3;pointer-events:none}
#pr{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:16px;color:#d9cfb4;text-shadow:0 0 6px #000;opacity:0;transition:opacity .2s}
#sub{position:absolute;left:50%;bottom:calc(60px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(620px,90vw);text-align:center;font-size:15px;color:#e8e2d0;text-shadow:0 0 6px #000,0 0 6px #000;opacity:0;transition:opacity .4s}
#bI{left:5vw;top:calc(60px + env(safe-area-inset-top,0px))}#bE{right:calc(5vw + 112px);bottom:calc(240px + env(safe-area-inset-bottom,0px))}
#inv{position:fixed;inset:0;z-index:15;display:none;flex-direction:column;background:linear-gradient(90deg,#000d,#000a 60%,#000d),#000a;color:var(--gold);padding:calc(12px + env(safe-area-inset-top,0px)) 4vw calc(12px + env(safe-area-inset-bottom,0px));perspective:1100px;touch-action:auto}
#inv *{touch-action:auto}
.itop{display:flex;gap:4vw;justify-content:center;border-bottom:1px solid #d9cfb455;padding-bottom:8px;font-size:clamp(13px,3.4vw,18px)}
.itop b{font-weight:400;color:var(--dim);cursor:pointer;padding:4px 6px}.itop b.on{color:#fff;border-bottom:2px solid #fff}
.imain{flex:1;display:flex;gap:3vw;min-height:0;margin:10px 0}
.ilist{flex:1.2;overflow-y:auto;transform:rotateY(8deg);transform-origin:left}
.ir{display:flex;align-items:center;gap:10px;padding:5px 8px;color:#a8a08a;cursor:pointer;font-size:clamp(13px,3.4vw,17px)}
.ir.on{color:#fff;background:linear-gradient(90deg,#d9cfb433,transparent);border-left:2px solid #fff}
.ir img{width:32px;height:32px;object-fit:contain}.ir span{flex:1}.ir em{font-style:normal;color:var(--dim)}.ir u{text-decoration:none;font-size:10px}
.idet{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:clamp(13px,3.4vw,16px);color:#a8a08a}
.idet h2{font-weight:400;margin:6px 0 2px;color:#fff;font-size:clamp(16px,4vw,22px)}.idet p{margin:2px}
.big{width:min(34vw,34vh);height:min(34vw,34vh);object-fit:contain;animation:spin3d 6s linear infinite;filter:drop-shadow(0 8px 10px #000)}
@keyframes spin3d{to{transform:rotateY(360deg)}}
#iuse{margin-top:8px;background:#0006;border:1px solid #d9cfb499;color:var(--gold);font:inherit;padding:6px 22px;cursor:pointer}
.ibot{display:flex;gap:5vw;justify-content:center;border-top:1px solid #d9cfb455;padding-top:8px;font-size:clamp(12px,3vw,15px)}

#bM{left:5vw;top:calc(132px + env(safe-area-inset-top,0px))}#bS{right:calc(5vw + 8px);bottom:calc(250px + env(safe-area-inset-bottom,0px))}
.ibot b{font-weight:400;border:1px solid #d9cfb499;background:#0006;padding:4px 14px;cursor:pointer;color:#fff}