/* ============================================================
   Ruleta SVG — estilos
   ============================================================ */

.ruleta-host {
  --tam: min(88vw, 340px);
  width: var(--tam);
  margin: 0 auto;
  position: relative;
  user-select: none;
}
.ruleta-host.grande { --tam: min(62vh, 560px); }

.ruleta-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6));
}

.ruleta-disco {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}

.rt-borde {
  fill: #071411;
  stroke: #b87333;
  stroke-width: 2;
}

.rt-relleno {
  fill-opacity: .20;
  transition: fill-opacity .35s ease;
}
.rt-linea {
  fill: none;
  stroke: rgba(184, 115, 51, .55);
  stroke-width: 1;
}
.rt-via {
  fill: #0a1a15;
  stroke: #b87333;
  stroke-width: 1.2;
}

.rt-nombre {
  font: 700 6.2px/1 ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, monospace;
  fill: #dff5ec;
  letter-spacing: .04em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(4, 16, 13, .9);
  stroke-width: 1.2;
}
.rt-emoji {
  font-size: 13px;
  text-anchor: middle;
}
.rt-hub-txt {
  font: 800 8px/1 ui-monospace, Menlo, monospace;
  fill: #4ade80;
  text-anchor: middle;
  letter-spacing: .12em;
}

/* Sección ganadora: se prende como si le llegara corriente */
.rt-sec.ganadora .rt-relleno { fill-opacity: .92; }
.rt-sec.ganadora .rt-linea {
  stroke: #fff;
  stroke-width: 1.8;
  filter: url(#rt-glow);
}
.rt-sec.ganadora .rt-nombre { fill: #04120e; stroke: rgba(255,255,255,.35); }

/* Flecha de cobre */
.ruleta-flecha {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 11%;
  max-width: 46px;
  filter: drop-shadow(0 0 10px rgba(245, 181, 68, .75));
}
.ruleta-flecha svg { display: block; width: 100%; height: auto; }
.ruleta-flecha path {
  fill: #f5b544;
  stroke: #7a4a1e;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Mientras gira, el borde brilla */
.ruleta-host.girando .rt-borde {
  stroke: #22d3ee;
  animation: rt-brillo .5s ease-in-out infinite alternate;
}
@keyframes rt-brillo {
  from { stroke-opacity: .45; }
  to   { stroke-opacity: 1; }
}

/* Rebotito al detenerse */
.ruleta-host.asentando .ruleta-marco { animation: rt-asentar .6s ease-out; }
@keyframes rt-asentar {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-1.1deg); }
  60%  { transform: rotate(.6deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ruleta-host.girando .rt-borde { animation: none; }
  .ruleta-host.asentando .ruleta-marco { animation: none; }
}