@font-face{font-family:KFont;src:url(fonts/kurdish-bold.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
html,body{margin:0;position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#0c0907;color:#f3e6cf;font-family:KFont,"Noto Sans Arabic",Tahoma,sans-serif;touch-action:none;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#c,#hud,#touch,.screen,#rotate{position:fixed;top:var(--vv-top,0px);left:var(--vv-left,0px);width:var(--vv-w,100%);height:var(--vv-h,100dvh);touch-action:none}
#c{display:block}
.hidden{display:none!important}
.screen{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(20,12,6,.35),rgba(8,5,3,.85));z-index:20;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#start{direction:ltr;background:linear-gradient(90deg,rgba(8,5,3,.0) 0%,rgba(8,5,3,.1) 38%,rgba(8,5,3,.85) 66%);justify-content:flex-end;padding-right:max(4vw,env(safe-area-inset-right));padding-left:env(safe-area-inset-left)}
.panel{text-align:center;max-width:min(560px,92vw);padding:2.2vh 3vw}
#start .panel{direction:rtl;text-align:right;max-width:min(470px,52vw)}
h1{font-size:clamp(40px,12vh,96px);margin:0;line-height:1.15;color:#f2c46b;text-shadow:0 3px 0 #5a2a0c,0 0 28px rgba(242,140,40,.45);letter-spacing:0}
h2{font-size:clamp(28px,8vh,56px);margin:0 0 1.5vh;color:#f2c46b;text-shadow:0 2px 0 #5a2a0c}
.pre{margin:0;font-size:clamp(11px,3vh,16px);color:#c9a978;direction:rtl}
.sub{font-size:clamp(12px,3.4vh,18px);line-height:1.7;color:#ecdcc0;margin:1.2vh 0}
.sub b{color:#ff9a5a}
.credit{font-size:clamp(9px,2.4vh,12px);color:#9c8566;margin-top:1.5vh}
.controls{font-size:clamp(9px,2.5vh,13px);color:#c8b596;line-height:1.6;margin-top:1.6vh}
body.touch .controls .kb{display:none}
input,select,textarea{font-size:16px}
.btn{font-family:inherit;font-size:clamp(16px,5vh,26px);padding:1.2vh 5vh;margin:.8vh .6vh;border:2px solid #f2c46b;border-radius:12px;background:linear-gradient(#b5401c,#7a230c);color:#fff3dc;cursor:pointer;box-shadow:0 4px 0 #3d1306,0 0 18px rgba(255,120,40,.35);touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #3d1306}
.btn.alt{background:linear-gradient(#4a3a2a,#2a2018);border-color:#a88a5c}
#pause .btn,#end .btn{display:block;margin:1.2vh auto;min-width:40vh}

#hud{pointer-events:none;z-index:5}
#iosHint{display:flex;align-items:flex-start;gap:8px;margin:0 0 .8vh;padding:.5vh 1vh;border:1px solid rgba(242,196,107,.75);border-radius:10px;background:rgba(12,8,5,.78);font-size:clamp(12px,3vh,15px);line-height:1.35;color:#f3e6cf;pointer-events:auto;touch-action:none}
#iosHint p{margin:0;flex:1}
#iosHint button{font-family:inherit;font-size:16px;line-height:1;padding:.5vh 1.4vh;border-radius:8px;border:1px solid #f2c46b;background:#3a2416;color:#fff3dc;touch-action:none;-webkit-tap-highlight-color:transparent}
#pbox{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));width:min(250px,32vw)}
.pname{font-size:clamp(13px,4vh,20px);color:#f2c46b;text-shadow:0 2px 2px #000;margin-bottom:3px;text-align:left}
.bar{height:clamp(8px,2.6vh,14px);background:rgba(0,0,0,.55);border:1px solid rgba(255,230,190,.35);border-radius:7px;overflow:hidden;margin-bottom:4px;direction:ltr}
.bar>div{height:100%;width:100%;transition:width .15s}
.hp>div{background:linear-gradient(#e8573a,#9b1d10)}
.st>div{background:linear-gradient(#e9c25a,#a07a1c)}
.st{height:clamp(5px,1.6vh,8px)}
#stageBox{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 3px #000}
#stageName{font-size:clamp(12px,3.6vh,18px);color:#f2c46b}
#leftTxt{font-size:clamp(10px,3vh,14px);color:#e6d4b4}
#bossBar{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(460px,46vw,calc(var(--vv-w,100vw) - 28px));display:flex;align-items:center;gap:8px;direction:rtl}
#bossImg{width:clamp(34px,11vh,54px);height:clamp(34px,11vh,54px);object-fit:cover;border-radius:50%;border:2px solid #f2c46b;background:#2a1a10}
.bb{flex:1}
#bossName{font-size:clamp(11px,3.3vh,16px);color:#ffb070;text-shadow:0 2px 2px #000;margin-bottom:3px}
#bossTrack{height:clamp(8px,2.6vh,13px);background:rgba(0,0,0,.6);border:1px solid #f2c46b;border-radius:7px;overflow:hidden;direction:ltr}
#bossFill{height:100%;width:100%;background:linear-gradient(#ff7a3a,#8e1a08);transition:width .15s}
#banner{position:absolute;top:22%;left:0;right:0;text-align:center;opacity:0;transition:opacity .4s;text-shadow:0 3px 6px #000}
#banner.show{opacity:1}
#banner.low{top:auto;bottom:12%}
#bTitle{font-size:clamp(26px,10vh,64px);color:#f2c46b}
#bSub{font-size:clamp(13px,4vh,22px);color:#f0e0c4}
#combo{position:absolute;top:30%;left:max(18px,env(safe-area-inset-left));font-size:clamp(16px,6vh,32px);color:#ffcf6a;text-shadow:0 2px 4px #000;opacity:0;transition:opacity .25s}
#combo.show{opacity:1}
#dmgFlash{position:absolute;inset:0;box-shadow:inset 0 0 90px 30px rgba(190,20,10,.75);opacity:0;transition:opacity .25s}

#touch{z-index:6;pointer-events:none}
#stickZone{position:absolute;left:0;top:18%;bottom:max(0px,env(safe-area-inset-bottom));width:42%;pointer-events:auto;touch-action:none}
#stick{--stick:min(128px,28vw,calc(var(--vv-h,100dvh)*0.32));position:absolute;width:var(--stick);height:var(--stick);margin:calc(var(--stick)/-2) 0 0 calc(var(--stick)/-2);left:max(16vw,calc(env(safe-area-inset-left) + var(--stick)*0.72));top:min(72%,calc(100% - var(--stick)*0.5));border-radius:50%;background:radial-gradient(rgba(255,240,210,.10),rgba(255,240,210,.18));border:2px solid rgba(255,230,190,.35);pointer-events:none;opacity:.55;transition:opacity .2s;touch-action:none}
#stick.on{opacity:1}
#knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:radial-gradient(#f7e2bb,#b98a4c);box-shadow:0 2px 8px rgba(0,0,0,.5)}
#btns{--cluster:min(240px,44vw,calc(var(--vv-h,100dvh)*0.52),calc(var(--vv-h,100dvh) - 88px));position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:var(--cluster);height:var(--cluster);pointer-events:none;touch-action:none}
.tb{position:absolute;pointer-events:auto;border-radius:50%;border:2px solid rgba(255,225,170,.55);background:radial-gradient(rgba(120,50,20,.55),rgba(40,18,8,.7));color:#ffe9c4;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tb.on{background:radial-gradient(rgba(240,140,60,.8),rgba(120,40,10,.85));transform:scale(.94)}
.tb .ic{font-size:clamp(16px,6vh,28px);line-height:1}
.tb .lb{font-size:clamp(8px,2.4vh,12px);line-height:1.2}
#bAtk{width:44%;height:44%;right:0;bottom:0}
#bAtk .ic{font-size:clamp(24px,9vh,40px)}
#bHeavy{width:29%;height:29%;right:48%;bottom:2%}
#bDodge{width:29%;height:29%;right:40%;bottom:34%}
#bJump{width:29%;height:29%;right:6%;bottom:49%}
#topBtns{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;direction:ltr;touch-action:none}
.tb.sm{position:relative;width:min(44px,12dvh);height:min(44px,12dvh);font-size:clamp(14px,4.2vh,18px)}
#bFull[aria-pressed="true"]{background:radial-gradient(rgba(240,140,60,.85),rgba(120,40,10,.9))}
body:not(.touch) #touch #stick,body:not(.touch) #touch #btns{display:none}
body:not(.touch) #stickZone{display:none}

#rotate{z-index:50;background:#120d0a;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
#rotate .ph{font-size:64px;animation:rot 1.8s ease-in-out infinite}
#rotate p{font-size:22px;color:#f2c46b;margin:16px 0 4px}
#rotate .small{font-size:15px;color:#c8b596}
@keyframes rot{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}
body.forcePortrait #rotate{display:flex}