:root{--bg:#f2ece4;--b:clamp(50px,13.5vmin,72px);--gap:clamp(10px,2.6vmin,20px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px)}
@media(prefers-color-scheme:dark){:root{--bg:#0a0710}}
html,body{margin:0;width:100%;height:100%;height:100dvh;background:var(--bg);overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}
body{display:flex;align-items:center;justify-content:center}
body.touch,body.touch html{background:#0a0710}
html:has(body.touch){background:#0a0710}
canvas{display:block;border-radius:6px;touch-action:none}
@media(max-width:1000px),(max-height:560px){canvas{border-radius:0}}

/* touch buttons */
.tb{position:fixed;bottom:calc(var(--gap) + var(--sb));width:var(--b);height:var(--b);border-radius:50%;border:2px solid #ffb347b0;background:#2a1a3a8c;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);color:#ffd27a;font:calc(var(--b)*.38) sans-serif;display:none;align-items:center;justify-content:center;opacity:.92;user-select:none;-webkit-user-select:none;touch-action:none;z-index:5;transition:transform .06s,background .06s}
.tb:active{transform:scale(.92);background:#5a3a7acc}
body.touch.ctl .tb{display:flex}
.tb::before{content:'';position:absolute;inset:-12px;border-radius:50%}
.tb.on{transform:scale(.93);background:#6a4a8ad0;border-color:#ffd27a}
.tb.tbs.on{transform:scale(.93)}
/* invisible slide-pad behind the move buttons: slide a thumb left/right (and down to dive) */
#pad{display:none;position:fixed;left:0;bottom:0;z-index:4;touch-action:none;width:calc(var(--b)*2 + var(--gap)*3 + var(--sl) + 36px);height:calc(var(--b)*2.4 + var(--sb));-webkit-user-select:none}
body.touch.ctl #pad{display:block}
body.sky #bs{display:none!important}
/* movement: left side */
#bl{left:calc(var(--gap) + var(--sl))}
#br{left:calc(var(--gap)*2 + var(--b) + var(--sl))}
/* actions: right side (fire, jump, sword in a triangle) */
#bf{right:calc(var(--gap) + var(--sr))}
#bj{right:calc(var(--gap)*2 + var(--b) + var(--sr))}
#bs{right:calc(var(--gap) + var(--b)*.5 + var(--gap)*.5 + var(--sr));bottom:calc(var(--gap)*2 + var(--b) + var(--sb))}
/* pause + music: small, top centre */
.tbs{width:44px;height:44px;font-size:18px;opacity:.7;bottom:auto;top:calc(8px + var(--st))}
#bp{left:calc(50% + 6px)}
#bmap{left:calc(50% + 62px)}
#bm{left:calc(50% - 50px)}

/* rotate-your-phone notice (phones in portrait only) */
#rot{display:none;position:fixed;inset:0;z-index:20;background:#0a0710;color:#ffd27a;font:18px/1.5 sans-serif;text-align:center;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.ri{font-size:64px;animation:rt 2s ease-in-out infinite}
@keyframes rt{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}
@media(orientation:portrait) and (pointer:coarse){#rot{display:flex}}
@media(prefers-reduced-motion:reduce){.ri{animation:none}}

/* level 2 floating joystick (replaces the slide pad + jump hold in the sky) */
#joy{display:none;position:fixed;left:calc(var(--gap)*1.5 + var(--sl));bottom:calc(var(--gap) + var(--sb));width:calc(var(--b)*2.3);height:calc(var(--b)*2.3);border-radius:50%;border:2px solid #ffb347a0;background:radial-gradient(circle,#2a1a3a88,#2a1a3a44);z-index:6;touch-action:none}
#joy::before{content:'';position:absolute;inset:-14px;border-radius:50%}
#joy::after{content:'FLOAT';position:absolute;top:-17px;left:0;right:0;text-align:center;font:10px sans-serif;letter-spacing:2px;color:#ffd27a99}
#joy i{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd27a,#c9822a);box-shadow:0 0 14px #ffb34788}
body.touch.ctl.sky #joy{display:block}
body.sky #pad,body.sky #bl,body.sky #br{display:none!important}
#bh{left:calc(50% - 106px)}
/* full-screen how-to-play overlay */
#help{display:none;position:fixed;inset:0;z-index:15;background:linear-gradient(#150a28,#07030e);color:#f0e4ff;font:clamp(10.5px,3.1vh,17px)/1.3 Georgia,serif;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(8px + var(--st)) calc(14px + var(--sr)) calc(8px + var(--sb)) calc(14px + var(--sl));touch-action:manipulation}
#help .hp{width:100%;max-width:1100px;height:100%;display:flex;flex-direction:column;gap:1.2vh;min-height:0}
#help h1{margin:0;text-align:center;color:#ffb347;font-style:italic;font-weight:400;font-size:2em}
#help .cols{flex:1;display:flex;gap:2.2vw;min-height:0}
#help .cols>div{flex:1;min-width:0;background:#1a1124;border:2px solid #6a4a8a;border-radius:14px;padding:1.2vh 1.6vw;overflow:hidden}
#help h2{margin:0 0 .45em;color:#9af6ff;font-size:1em;letter-spacing:2px;text-align:center;font-weight:400}
#help .r{display:flex;gap:.8em;margin:.3em 0}#help .r b{color:#ffd27a;font-weight:400;min-width:7.6em}
#help p{margin:.1em 0 .6em}
#hok{align-self:center;font:inherit;font-size:1.15em;color:#ffd27a;background:#4a2a6a;border:3px solid #ffb347;border-radius:14px;padding:.35em 2.4em;cursor:pointer;touch-action:manipulation}

/* small menu buttons (pause / map / music / help) are clickable with a mouse too */
body.ctl .tb.tbs{display:flex}
@media(hover:hover) and (pointer:fine){body:not(.touch) .tbs{opacity:.55}body:not(.touch) .tbs:hover{opacity:1}}