/* v16 circular controls. Both the dock and inert floating clone use this skin.
   Exact joystick movement, capture, cooldown, input edges and geometry remain
   in the tested v15 modules. Decorative pixels never receive pointer events. */
body.game-interface[data-button-quality='v15'] {
  --ui16-control-ring:url('/resource/ui/title-lobby-v16/runtime/control-rim-v16.svg');
  --ui16-stick-ring:url('/resource/ui/title-lobby-v16/runtime/joystick-rim-v16.svg');
  --ui16-stick-knob:url('/resource/ui/title-lobby-v16/runtime/joystick-knob-v16.svg');
  --ui16-skill-glyph:url('/resource/ui/title-lobby-v16/runtime/skill-neutral-v16.svg');
}
/* Deliberately higher specificity than every rectangular control rule. The
   outer corners stay transparent instead of showing a green/dark square. */
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions :is(.thumb-skill,.thumb-auto) {
  border:0!important;
  border-image:none!important;
  border-radius:50%!important;
  background-color:transparent!important;
  background-image:none!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-clip:padding-box!important;
  color:#fff5dd!important;
  box-shadow:inset 0 -3px 5px #02091388,0 4px 0 #02070b99,0 5px 10px #0008!important;
  opacity:1!important;
  isolation:isolate;
  text-shadow:0 1px 2px #02090e;
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions :is(.thumb-skill,.thumb-auto)::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:50%;
  background-image:radial-gradient(circle,rgba(7,25,36,.2) 0,rgba(7,25,36,.2) 58%,transparent 59%),var(--ui16-control-material),var(--ui16-control-ring);
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
  filter:none;
  opacity:1;
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions .thumb-skill > strong::before {
  background:var(--ui16-skill-glyph) center/contain no-repeat;
  width:22px;
  height:22px;
  margin:0 auto 1px;
  filter:drop-shadow(0 1px 1px #02070d);
}
body.game-interface[data-button-quality='v15'] .thumb-skill[data-skill-element='화'] { --ui16-skill-glyph:url('/resource/ui/title-lobby-v16/runtime/skill-fire-v16.svg'); }
body.game-interface[data-button-quality='v15'] .thumb-skill[data-skill-element='수'] { --ui16-skill-glyph:url('/resource/ui/title-lobby-v16/runtime/skill-water-v16.svg'); }
body.game-interface[data-button-quality='v15'] .thumb-skill[data-skill-element='풍'] { --ui16-skill-glyph:url('/resource/ui/title-lobby-v16/runtime/skill-wind-v16.svg'); }
body.game-interface[data-button-quality='v15'] .thumb-skill[data-skill-element='토'] { --ui16-skill-glyph:url('/resource/ui/title-lobby-v16/runtime/skill-earth-v16.svg'); }
body.game-interface[data-button-quality='v15'] .thumb-skill[data-skill-element='뇌'] { --ui16-skill-glyph:url('/resource/ui/title-lobby-v16/runtime/skill-lightning-v16.svg'); }
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions .thumb-skill[data-skill-state='ready'] {
  background-image:none!important;
  box-shadow:inset 0 0 0 3px #b9eedb88,inset 0 -3px 5px #071e2088,0 0 16px #8ac8b533,0 5px 9px #0008!important;
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions .thumb-skill[data-skill-state='ready']::before {
  background-image:radial-gradient(circle,rgba(13,69,58,.28) 0,rgba(13,69,58,.28) 58%,transparent 59%),var(--ui16-control-material),var(--ui16-control-ring);
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions .thumb-skill[data-skill-state='cooldown']::after {
  inset:8px;
  background:conic-gradient(from -90deg,#cef5df var(--skill-ready-angle,0deg),#354b54 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  z-index:0;
  pointer-events:none;
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions .thumb-auto[aria-pressed='true'] {
  background-image:none!important;
  color:#e2ffea!important;
  box-shadow:inset 0 0 0 3px #b9eedb88,0 0 10px #80bd9f26,0 4px 7px #0008!important;
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions .thumb-auto[aria-pressed='true']::before {
  background-image:radial-gradient(circle,rgba(27,79,54,.29) 0,rgba(27,79,54,.29) 58%,transparent 59%),var(--ui16-control-material),var(--ui16-control-ring);
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions :is(.thumb-skill,.thumb-auto):disabled {
  color:#d4d9cf!important;
  background-image:none!important;
  box-shadow:inset 0 -3px 5px #02091388,0 3px 5px #0007!important;
}
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions :is(.thumb-skill,.thumb-auto):disabled::before { filter:saturate(.34);opacity:1; }
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions :is(.thumb-skill,.thumb-auto)[aria-busy='true'] { box-shadow:inset 0 0 0 3px #efd59c88,0 0 12px #b9eedb40,0 3px 8px #0008!important; }
body.game-interface[data-button-quality='v15'] .thumb-controls .thumb-actions :is(.thumb-skill,.thumb-auto):active:not(:disabled) { box-shadow:inset 0 3px 8px #02090fb8,0 1px 1px #f1d8a466!important; }
body.game-interface[data-button-quality='v15'] .virtual-joystick {
  border:0!important;
  border-image:none!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(28,58,67,.65) 53%,rgba(8,26,35,.55) 72%,transparent 73%)!important;
  box-shadow:inset 0 0 22px #040c1852,0 4px 8px #0003;
  opacity:1;
}
body.game-interface[data-button-quality='v15'] .virtual-joystick::before {
  background-image:var(--ui16-control-material),var(--ui16-stick-ring);
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  -webkit-mask:radial-gradient(farthest-side,transparent 61%,#000 62%);
  mask:radial-gradient(farthest-side,transparent 61%,#000 62%);
  pointer-events:none;
}
body.game-interface[data-button-quality='v15'] .virtual-joystick [data-joystick-knob] {
  border:0;
  border-radius:50%;
  background:var(--ui16-stick-knob) center/100% 100% no-repeat!important;
  box-shadow:0 3px 5px #0008;
}
body.game-interface[data-button-quality='v15'] .virtual-joystick[data-joystick-active='true'] { box-shadow:inset 0 0 0 2px #c5f5e255,0 0 15px #92dcc433,0 4px 8px #0004; }
body.game-interface[data-button-quality='v15'] .virtual-joystick[aria-disabled='true']::before,
body.game-interface[data-button-quality='v15'] .virtual-joystick[aria-disabled='true'] [data-joystick-knob] { filter:saturate(.35);opacity:.84; }
@media(prefers-reduced-motion:reduce) {
  body.game-interface[data-button-quality='v15'] :is(.thumb-skill,.thumb-auto,.virtual-joystick) { transition:none!important;animation:none!important; }
}
