/* Thumb-friendly arc, using the Nano Banana hollow ring sprites. Gameplay
   remains auto-attack plus the existing dash, jump and charged ultimate. */
#game#game#game .actions{width:206px;height:176px;right:var(--safe-right);bottom:calc(var(--safe-bottom) + 16px);display:block;pointer-events:none}
#game#game#game .ability{position:absolute;width:70px;height:70px;min-height:0;padding:0;border:0;border-radius:50%;background:#0b2534;box-shadow:0 3px 10px #03121d77;overflow:visible;color:#fff;touch-action:none;pointer-events:auto;text-shadow:0 1px 3px #00131d;isolation:isolate;filter:none}
#game#game#game #dash-icon{left:0;bottom:0}
#game#game#game #jump-icon{left:43px;top:0}
#game#game#game #ult-icon{right:0;bottom:0;width:96px;height:96px;background:#0a202d}
#game#game#game .ability::before{content:'';position:absolute;inset:-2px;background:url('./assets/ui/jade/rings/normal.webp') center/contain no-repeat;z-index:4;pointer-events:none}
#game#game#game .ability .ability-mark{position:absolute;inset:7%;width:86%;height:86%;border-radius:50%;overflow:hidden;margin:0;z-index:1;animation:none;line-height:0}
#game#game#game .ability .ability-mark .game-icon{width:100%;height:100%;border-radius:50%;display:block;filter:none}
#game#game#game .ability>i{inset:7%;z-index:2;border-radius:50%;transform:none;background:conic-gradient(from 0deg,#06111fcb calc(var(--cooldown,0) * 1turn),transparent 0);pointer-events:none}
#game#game#game .ability>b{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;font-size:11px;line-height:15px;font-weight:650;color:#f5f4e5;background:#09212b85;border-radius:8px;padding:0 7px;letter-spacing:.03em;text-shadow:0 1px 2px #071522;margin:0}
#game#game#game .ability>small{position:absolute;inset:0;display:grid;place-items:center;z-index:3;color:#fff;font-size:24px;line-height:1;font-weight:750;text-shadow:0 2px 3px #07131f,0 0 8px #07131f;font-variant-numeric:tabular-nums}
#game#game#game #ult-icon>small{font-size:22px}
#game#game#game .ability-level{position:absolute;top:4px;right:0;z-index:5;min-width:25px;padding:2px 4px;border:1px solid #bea774;border-radius:6px;background:#102a37e8;color:#eddeb2;font-size:9px;line-height:12px;font-weight:700}
#game#game#game #ult-icon::after{content:'';position:absolute;inset:3px;border-radius:50%;padding:3px;background:conic-gradient(#64e5ed calc(var(--charge,0) * 1turn),#1d3e4d66 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:5}
#game#game#game .ability.cooling::before{background-image:url('./assets/ui/jade/rings/cooling.webp')}
#game#game#game .ability.cooling .ability-mark{filter:saturate(.65)}
#game#game#game .ability.ready{box-shadow:0 0 0 2px #89e4d140,0 0 17px #edc86d75,0 3px 9px #00152499}
#game#game#game .ability.ready::before{background-image:url('./assets/ui/jade/rings/ready.webp')}
#game#game#game .ability.ready>small{display:none}
#game#game#game .ability.combo::before{background-image:url('./assets/ui/jade/rings/pressed.webp')}
#game#game#game .ability:active{transform:scale(.95);filter:none}
#game#game#game .ability:active::before{background-image:url('./assets/ui/jade/rings/pressed.webp')}
#game#game#game .ability:focus-visible{outline:3px solid #e9dfab;outline-offset:5px}
/* The field prompt is left of the arc and above the learned-skill slots. */
#game#game#game #interact-prompt{right:calc(var(--safe-right) + 218px);bottom:calc(var(--safe-bottom) + 98px);width:152px}
#game#game#game #interact-prompt{border:10px solid transparent;border-image:var(--jade-primary) 65 75 fill / 10px 13px / 0 stretch;background:none;border-radius:0;box-shadow:none;min-height:52px;padding:2px 4px;gap:4px}
#game#game#game #interact-prompt .game-icon{width:22px;height:22px;flex-shrink:0}
#game#game#game #interact-title{color:#49391e;font-size:13px;line-height:17px;text-shadow:none}
#game#game#game #interact-detail{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#5a4c2e;font-size:9px;line-height:12px;text-shadow:none}
@media(max-width:740px){
 #game#game#game .actions{width:182px;height:160px}
 #game#game#game .ability{width:64px;height:64px}
 #game#game#game #jump-icon{left:34px}
 #game#game#game #ult-icon{width:86px;height:86px}
 #game#game#game .ability>b{font-size:10px;padding:0 5px}
 #game#game#game .ability>small{font-size:22px}
 #game#game#game #interact-prompt{right:calc(var(--safe-right) + 194px);bottom:calc(var(--safe-bottom) + 102px);width:140px}
}
@media(max-height:365px){
 #game#game#game .actions{height:144px;bottom:calc(var(--safe-bottom) + 14px)}
 #game#game#game #jump-icon{left:31px}
 #game#game#game .ability{width:60px;height:60px}
 #game#game#game #ult-icon{width:80px;height:80px}
}
