/* The silver dial stays centered while a fixed set of number glyphs curves
   across it. Callers can shrink the dial/height without shrinking touch targets. */
.rk-troop-wheel {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--p-space-risk-wheel-height, 84px);
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  border-radius: var(--p-border-radius-200);
  perspective: 500px;
}
.rk-troop-wheel:focus-visible {
  outline: 3px solid var(--p-color-border-focus);
  outline-offset: var(--p-space-050);
}
.rk-troop-wheel.is-dragging { cursor: grabbing; }
.rk-troop-wheel.is-disabled { opacity: .5; cursor: default; }
.rk-troop-wheel__dial {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  width: var(--p-space-risk-wheel-size, 72px);
  height: var(--p-space-risk-wheel-size, 72px);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: var(--p-space-150) solid var(--p-color-silver);
  border-radius: var(--p-border-radius-full);
  background: radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--p-color-bg-inverse) 18%, transparent), var(--p-color-risk-panel, var(--p-color-bg-surface)));
  box-shadow: inset 0 0 0 var(--p-space-050) color-mix(in srgb, var(--p-color-risk-ink, var(--p-color-bg)) 80%, var(--p-color-silver)),
    inset 0 var(--p-space-100) var(--p-space-150) var(--p-color-bg),
    0 0 0 var(--p-space-050) color-mix(in srgb, var(--p-color-silver) 45%, var(--p-color-bg)), var(--p-shadow-200);
  pointer-events: none;
}
.rk-troop-wheel__dial::after {
  content: '';
  position: absolute;
  left: 50%; bottom: calc(-1 * var(--p-space-050));
  transform: translateX(-50%);
  width: 0; height: 0;
  border-inline: var(--p-space-150) solid transparent;
  border-bottom: var(--p-space-200) solid var(--p-color-silver);
}
.rk-troop-wheel__numbers { position: absolute; inset: 0; }
.rk-troop-wheel .rk-troop-wheel__number {
  position: absolute;
  z-index: 2;
  top: 50%; left: 50%;
  display: grid;
  place-items: center;
  width: var(--p-space-risk-touch, 44px);
  min-width: var(--p-space-risk-touch, 44px);
  height: var(--p-space-risk-touch, 44px);
  min-height: var(--p-space-risk-touch, 44px);
  margin: 0; padding: 0; border: 0;
  border-radius: var(--p-border-radius-full);
  background: transparent;
  color: var(--p-color-text);
  font-family: var(--p-font-family-body);
  font-size: calc(var(--p-font-size-risk-wheel-selected, 2.2rem) * var(--p-font-risk-wheel-fit, 1));
  font-weight: var(--p-font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: inherit;
  touch-action: pan-y;
  transform: translate(-50%, -50%) translate(var(--p-space-risk-wheel-x), var(--p-space-risk-wheel-y));
  transition: transform var(--p-motion-duration-150) var(--p-motion-ease);
}
.rk-troop-wheel__number > span {
  display: block;
  opacity: var(--p-color-risk-wheel-opacity);
  transform: perspective(240px) rotateY(var(--p-motion-risk-wheel-angle)) scale(var(--p-font-risk-wheel-scale));
  text-shadow: 0 var(--p-space-050) var(--p-space-100) var(--p-color-bg), 0 0 var(--p-space-050) var(--p-color-bg);
  -webkit-text-stroke: 1px var(--p-color-risk-ink, var(--p-color-bg));
  transition: transform var(--p-motion-duration-150) var(--p-motion-ease), opacity var(--p-motion-duration-150);
  pointer-events: none;
}
.rk-troop-wheel__number.is-selected { z-index: 3; }
.rk-troop-wheel__number.is-selected > span { color: var(--p-color-text); }
.rk-troop-wheel[hidden],
.rk-troop-wheel .rk-troop-wheel__number[hidden] { display: none; }
.rk-troop-wheel.is-dragging .rk-troop-wheel__number,
.rk-troop-wheel.is-dragging .rk-troop-wheel__number > span { transition: none; }
.rk-troop-wheel__hint {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .rk-troop-wheel .rk-troop-wheel__number,
  .rk-troop-wheel__number > span { transition: none; }
}