/* ───────────── Tumblers stage ───────────── */
.tpa-tumblers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
}

.tpa-tumblers__panel {
  background: radial-gradient(120% 120% at 50% 20%, #0b1020 0%, #070a16 60%, #060811 100%);
  border: 2px solid rgba(70,181,255,0.25);
  border-radius: 14px;
  padding: 18px 18px 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 24px rgba(70,181,255,0.12) inset;
  min-width: 300px;
}

.tumbler .status {
  margin-top: 10px;
  min-height: 22px;
  font-size: 14px;
  color: #9ecbff;
  text-shadow: 0 0 6px rgba(70,181,255,0.4);
}

.tpa-tumblers__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

/* Dial */
.dial {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}

.dial-svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}

.rim {
  fill: none;
  stroke: #2b3558;
  stroke-width: 8;
  filter: drop-shadow(0 0 10px rgba(70,181,255,0.15));
}

.inner-rim {
  fill: none;
  stroke: rgba(70,181,255,0.25);
  stroke-width: 2;
}

.face {
  fill: radial-gradient(circle at 50% 45%, #131a2f 0%, #0f1527 60%, #0b1122 100%);
  /* fallback for older browsers */
  fill: #131a2f;
}

.tick {
  fill: #2e3654;
  rx: 1;
}

/* Windows (targets) */
.windows path {
  fill: none;
  stroke: #34ffa8;
  stroke-width: 10;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(52,255,168,0.45));
  opacity: 0.9;
}

.windows path.cleared {
  stroke: #46b5ff;
  filter: drop-shadow(0 0 10px rgba(70,181,255,0.55));
  opacity: 1;
}

/* Pointer */
.pointer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #46b5ff;
  filter: drop-shadow(0 0 8px rgba(70,181,255,0.7));
}

/* States */
.tumbler.is-success .status {
  color: #6dd6a8;
  text-shadow: 0 0 8px rgba(109,214,168,0.6);
}

.tumbler.is-miss .dial {
  animation: tpa-shake 200ms ease;
}

@keyframes tpa-shake {
  0% { transform: translateX(0) }
  25% { transform: translateX(-3px) }
  50% { transform: translateX(3px) }
  75% { transform: translateX(-2px) }
  100% { transform: translateX(0) }
}

/* Smoothly animate color/glow shifts on miss */
.rim, .inner-rim, .tick, .pointer { transition: stroke .18s ease, fill .18s ease, filter .18s ease, opacity .18s ease; }
.face { transition: fill .18s ease, filter .18s ease, opacity .18s ease; }

/* Red flash aura using a pseudo-element on the dial */
.dial::after {
  content: "";
  position: absolute;
  inset: -10px;           /* slightly larger than the dial for the glow */
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(255, 80, 80, 0);  /* start invisible */
  transition: opacity .22s ease, box-shadow .22s ease;
}

/* When you miss, tint + glow red briefly */
.tumbler.is-miss .dial {
  animation: tpa-shake 200ms ease;
}

.tumbler.is-miss .dial::after {
  opacity: 1;
  /* outer + inner red glow */
  box-shadow:
    0 0 28px 6px rgba(255, 82, 82, .55),
    0 0 60px 18px rgba(255, 82, 82, .28) inset;
}

.tumbler.is-miss .rim {
  stroke: #ff6666;
  filter: drop-shadow(0 0 12px rgba(255, 80, 80, .75));
}

.tumbler.is-miss .inner-rim {
  stroke: rgba(255, 140, 140, .6);
}

.tumbler.is-miss .tick {
  fill: #5b2b2b; /* subtle red-brown tick tint */
}

.tumbler.is-miss .pointer {
  border-top-color: #ff6b6b;
  filter: drop-shadow(0 0 10px rgba(255, 80, 80, .9));
}

/* Optional: slightly darken the face for contrast during the flash */
.tumbler.is-miss .face {
  /* fallback solid */
  fill: #1a0f13;
  /* if your browser supports it, a subtle red-tinted radial look: */
  fill: radial-gradient(circle at 50% 45%, #221016 0%, #170b10 60%, #12080d 100%);
}