/* 전투 스킬 버튼의 장식 링(2026-10-01 사용자: 훈련장의 테두리가 예쁘다).
   원래 이 버튼들의 틀이었던 UI 키트 그림 assets/ui/ring_skill.png(은·금·사파이어) · ring_ult.png(날개·루비)를
   도트 네모 틀(pixel-ui.css .sb::before border-image)보다 앞세운다. 위치·크기는 기존 규칙(style.css·release-polish.css) 그대로. */
#hud #skills .sb { border: 0 !important; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c, #7aa7ff) 55%, #1a1630), #0e0c18 75%); box-shadow: 0 4px 8px #05070d99; }
#hud #skills .sb::before, html.vp-touch body #hud #skills .sb::before {
  inset: -16.9% -17.6% -17.25% -17.6%; border: 0; border-image: none; image-rendering: auto;
  background: url(../../assets/ui/ring_skill.png) center / 100% 100% no-repeat; }
#hud #skills .sb.ult::before, html.vp-touch body #hud #skills .sb.ult::before {
  inset: -30.4% -25.6% -26.7% -25.6%; background-image: url(../../assets/ui/ring_ult.png); }
#hud #skills .sb :is(.ic, .cd, .cdn, .g, .uimg) { border-radius: 50%; }
#hud #skills .sb .ic { overflow: hidden; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c, #7aa7ff) 55%, #1a1630), #0e0c18 75%); }
#hud #skills .sb.ult .ic { background: radial-gradient(circle at 50% 35%, #4a3614, #0e0c18 75%); }
#hud #skills .sb.dg .ic { background: radial-gradient(circle at 50% 35%, #2a5a78, #0e0c18 75%); }
/* 준비된 궁극기: 링 안쪽이 금빛으로 숨 쉰다(네모 틀의 두 칸 깜빡임 대신) */
#hud #skills .sb.ult.ready { box-shadow: 0 0 0 2px #05070d, 0 0 16px 3px #ffd84aaa; animation: ringReady .9s ease-in-out infinite alternate; }
@keyframes ringReady { to { box-shadow: 0 0 0 2px #05070d, 0 0 26px 6px #ffd84acc; } }
#hud #skills .sb.dg.ready { box-shadow: 0 0 0 2px #05070d, 0 0 10px #9ae0ff88; }
/* 이름은 원 안 아래쪽 */
#hud #skills .sb .nm { bottom: 5px; text-shadow: 1px 1px 0 #05070d, -1px 0 0 #05070d, 0 -1px 0 #05070d, 1px 0 0 #05070d; }
#hud #skills .sb.ult .nm { bottom: 9px; }
#hud #skills .sb.ult .rdy { top: 22%; }
@media (prefers-reduced-motion: reduce) { #hud #skills .sb.ult.ready { animation: none; } }
/* 도트 스킬 아이콘은 네모 틀째 그려져 있다: 원을 꽉 채워 틀은 원 밖으로 잘리고 그림만 둥근 메달로 보이게 */
#hud #skills .sb .ic .pixel-ico { width: 116%; height: 116%; max-width: none; margin: 0; }
#hud #skills .sb.dg .ic :is(svg, .pixel-ico) { width: 60%; height: 60%; }