body.equipment-adventure #game #hotbar,body.equipment-adventure #game #hotbar:has(.cp-recovery){grid-template-columns:repeat(6,var(--hotbar-slot));width:max-content}
body.equipment-adventure #game #hotbar:has(.cp-recovery){grid-template-columns:repeat(7,var(--hotbar-slot))}
#skill-cancel{position:absolute;right:28px;bottom:290px;z-index:50;border:2px solid #d99b99;border-radius:50%;width:70px;height:70px;background:#612e37dc;color:#fff0e8;touch-action:none;font:600 12px "Noto Sans Thai",system-ui}
#skill-cancel.selected{background:#c13f4d;box-shadow:0 0 24px #ff6f83}
#skill-cancel[hidden],#skill-aim-hint[hidden]{display:none}
#skill-aim-hint{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);max-width:80%;padding:8px 14px;border:1px solid #d8bd79;border-radius:12px;background:#12251eea;color:#fff0c7;z-index:45;text-align:center;pointer-events:none;font:13px "Noto Sans Thai",system-ui}
#hotbar .aiming{outline:3px solid #9debf5;box-shadow:0 0 20px #67ddeb!important}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px),(max-width:1100px) and (max-height:600px){
 body.equipment-adventure #game{--mobile-skill-size:54px;--mobile-stick-size:104px;--mobile-bottom:calc(var(--safe-bottom,0px) + 18px)}
 body.equipment-adventure #game #hotbar,body.equipment-adventure #game #hotbar:has(.cp-recovery){left:auto;right:calc(var(--safe-right,0px) + 12px);bottom:var(--mobile-bottom);transform:none;display:block;width:224px;height:210px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;pointer-events:none}
 body.equipment-adventure #game #hotbar .slot[data-slot]{position:absolute;inset:auto;width:54px;height:54px;border-radius:50%;pointer-events:auto}
 body.equipment-adventure #game #hotbar .slot[data-slot="1"]{right:94px;bottom:0}
 body.equipment-adventure #game #hotbar .slot[data-slot="2"]{right:124px;bottom:62px}
 body.equipment-adventure #game #hotbar .slot[data-slot="3"]{right:76px;bottom:114px}
 body.equipment-adventure #game #hotbar .slot[data-slot="4"]{right:12px;bottom:138px}
 body.equipment-adventure #game #hotbar .slot.item,body.equipment-adventure #game #hotbar .slot.cp-recovery{width:44px;height:44px}
 body.equipment-adventure #game #hotbar .slot[data-slot="11"]{right:180px;bottom:0}
 body.equipment-adventure #game #hotbar .slot[data-slot="12"]{right:180px;bottom:54px}
 body.equipment-adventure #game #hotbar .slot[data-slot="13"]{right:180px;bottom:108px}
 body.equipment-adventure #game #joystick{bottom:var(--mobile-bottom);left:calc(var(--safe-left,0px) + 12px)}
 body.equipment-adventure #game #attack-btn{display:flex;bottom:var(--mobile-bottom);right:calc(var(--safe-right,0px) + 12px);width:76px;height:76px}
 body.equipment-adventure #game #dodge-btn{right:calc(var(--safe-right,0px) + 18px);bottom:calc(var(--mobile-bottom) + 82px);width:46px;height:46px}
 body.equipment-adventure #game #combat-modes{bottom:calc(var(--mobile-bottom) + 220px);max-width:180px;padding:4px;font-size:10px}
 #game #dodge-btn kbd{display:none}
 #skill-cancel{right:calc(var(--safe-right,0px) + 22px);bottom:calc(var(--mobile-bottom) + 218px);width:60px;height:60px}
 #skill-aim-hint{bottom:calc(var(--mobile-bottom) + 285px);font-size:12px}
 body.equipment-adventure #game .cast-panel{bottom:calc(var(--mobile-bottom) + 280px)}
}
@media(max-width:420px) and (orientation:portrait){
 body.equipment-adventure #game #hotbar,body.equipment-adventure #game #hotbar:has(.cp-recovery){bottom:calc(var(--mobile-bottom) + 105px)}
 body.equipment-adventure #game #dodge-btn{bottom:calc(var(--mobile-bottom) + 187px)}
 body.equipment-adventure #game #attack-btn{display:flex;bottom:calc(var(--mobile-bottom) + 105px)}
 #skill-cancel{bottom:calc(var(--mobile-bottom) + 325px)}
 #skill-aim-hint{bottom:calc(var(--mobile-bottom) + 392px)}
 body.equipment-adventure #game .cast-panel{bottom:calc(var(--mobile-bottom) + 385px)}
 body.equipment-adventure #game #combat-modes{left:12px;bottom:calc(var(--mobile-bottom) + 122px);max-width:110px}
}
#skill-drag-knob{position:fixed;width:26px;height:26px;transform:translate(-50%,-50%);border:2px solid #dbfcff;border-radius:50%;background:#78cdda99;box-shadow:0 0 16px #a3efff;pointer-events:none;z-index:55}
#skill-drag-knob[hidden]{display:none}
#active-skills{position:absolute;bottom:94px;left:50%;width:360px;max-width:calc(100% - 24px);z-index:var(--z-control,30);pointer-events:none;font:12px "Noto Sans Thai",Tahoma,system-ui,sans-serif}
#active-skills[hidden],#active-skill-detail[hidden],#active-skills .active-skill-source[hidden]{display:none}
#active-skills .active-skill-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
#active-skills .active-skill{position:relative;width:42px;height:42px;padding:2px;flex-shrink:0;border:1px solid #bca36e;border-radius:7px;background:#12251eea;box-shadow:0 2px 5px #0008,inset 0 0 0 1px #8be6d033;pointer-events:auto;touch-action:manipulation}
#active-skills .active-skill:hover,#active-skills .active-skill:focus-visible{border-color:#baffeb}
#active-skills .active-skill-icon{display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;font-size:24px;line-height:34px}
#active-skills .active-skill-time{position:absolute;left:2px;right:2px;bottom:0;border-radius:0 0 5px 5px;background:#06120dec;color:#fff;font:700 13px/17px "Noto Sans Thai",Tahoma,system-ui,sans-serif;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000;pointer-events:none}
#active-skills .active-skill-source{position:absolute;right:-3px;top:-3px;display:grid;place-items:center;width:14px;height:14px;border:1px solid #d5c1ff;border-radius:50%;background:#744bb8;color:#fff;font:700 12px/1 "Noto Sans Thai",system-ui;pointer-events:none}
#active-skills .active-skill.expiring{border-color:#e5b858}
#active-skills .active-skill.expiring .active-skill-time{color:#ffd274}
#active-skill-detail{position:absolute;max-width:min(300px,calc(100% - 16px));padding:8px 10px;border:1px solid #bca36e88;border-radius:7px;background:#102019f5;color:#f2e7ce;z-index:var(--z-control,30);font:12px/1.6 "Noto Sans Thai",Tahoma,system-ui,sans-serif;pointer-events:none;box-shadow:0 3px 10px #0006}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px),(max-width:1100px) and (max-height:600px){
 #active-skills .active-skill{width:38px;height:38px}
 #active-skills .active-skill-icons{gap:6px}
 #active-skills .active-skill-time{font-size:12px;line-height:16px}
}

#target-cycle-btn{display:none;position:absolute;z-index:var(--z-control);width:46px;height:46px;padding:2px;border:2px solid #bca36e;border-radius:50%;background:radial-gradient(circle at 35% 25%,#375240,#102019 75%);color:#ffe2a0;align-items:center;justify-content:center;flex-direction:column;touch-action:none;user-select:none;box-shadow:0 3px 9px #0008}
#target-cycle-btn span{font:23px/23px "Noto Sans Thai",system-ui}
#target-cycle-btn small{font:9px/12px "Noto Sans Thai",Tahoma,system-ui,sans-serif}
#target-cycle-btn:active{background:#65522b}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px),(max-width:1100px) and (max-height:600px){
 #game #target-cycle-btn{display:flex;right:calc(var(--safe-right,0px) + 94px);bottom:calc(var(--mobile-bottom) + 194px)}
 body.equipment-adventure #game #target-cycle-btn{bottom:calc(var(--mobile-bottom) + 194px)}
}
@media(max-width:420px) and (orientation:portrait){
 body.equipment-adventure #game #target-cycle-btn{bottom:calc(var(--mobile-bottom) + 299px)}
}