/* ─── Gradient stop colors ───────────────────────────────── */
.rm-g-a { stop-color: #caff04; stop-opacity: 0.2; }
.rm-g-b { stop-color: #caff04; stop-opacity: 1.0; }

/* ─── Card ───────────────────────────────────────────────── */
.rm-card {
  background: #0d1117;
  border: 1px solid rgba(202, 255, 4, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(202, 255, 4, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(202, 255, 4, 0.14);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 240px;
  box-sizing: border-box;
  user-select: none;
}

/* ─── SVG container ──────────────────────────────────────── */
.rm-svg {
  display: block;
  overflow: visible;
}

/* Background track arc */
.rm-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 16;
  stroke-linecap: round;
}

/* Filled progress arc */
.rm-arc {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
}

/* ─── Tennis ball ────────────────────────────────────────── */
.rm-ball {
  filter: drop-shadow(0 0 5px rgba(202, 255, 4, 0.55))
          drop-shadow(0 0 10px rgba(202, 255, 4, 0.25));
}

.rm-ball-body {
  fill: #c9e840;
}


/* ─── Arc end labels (tier floor / ceiling) ──────────────── */
.rm-edge-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  fill: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.3px;
}

/* ─── Centre: NTRP micro-label ───────────────────────────── */
.rm-ntrp-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  fill: rgba(255, 255, 255, 0.22);
  letter-spacing: 3.5px;
}

/* ─── Centre: big animated number ───────────────────────── */
.rm-num {
  font-family: 'Space Mono', monospace;
  font-size: 44px;
  font-weight: 700;
  fill: #ffffff;
  letter-spacing: -1.5px;
}



/* ─── Pending (no dynamic rating yet) ───────────────────── */
.rm-card--pending {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.6);
  opacity: 0.6;
}

.rm-pending-note {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  min-height: 22px;
  text-align: center;
}

/* ─── Status badge ───────────────────────────────────────── */
.rm-badge {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  min-height: 22px; /* reserve space so layout doesn't shift */
}

.rm-badge--visible {
  opacity: 1;
  transform: translateY(0);
}

.rm-badge--hot {
  background: rgba(202, 255, 4, 0.2);
  color: #caff04;
  border: 1px solid rgba(202, 255, 4, 0.5);
}

.rm-badge--mid {
  background: rgba(255, 170, 50, 0.2);
  color: #ffb347;
  border: 1px solid rgba(255, 170, 50, 0.45);
}

.rm-badge--cold {
  background: rgba(100, 180, 255, 0.2);
  color: #78b4ff;
  border: 1px solid rgba(100, 180, 255, 0.4);
}