/* =========================
   Frontend theme: Neon casino
   ========================= */
.rp-card {
  background: radial-gradient(1200px 600px at 20% 0%, rgba(155,90,255,.22), transparent 55%),
              radial-gradient(900px 500px at 90% 20%, rgba(0,210,255,.18), transparent 55%),
              linear-gradient(180deg, #070A16, #070A12);
  color: #EAF2FF;
  border-radius: 20px;
  padding: 18px;
  max-width: 980px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(120, 70, 255, 0.22);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,210,255,.06) inset,
    0 0 24px rgba(0,210,255,.12),
    0 0 28px rgba(155,90,255,.10);
}

.rp-card, .rp-card * { box-sizing: border-box; }

.rp-front { margin: 18px auto; }

.rp-title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: .2px;
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
}

.rp-wheel-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px 0 10px;
}

.rp-canvas {
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,.32),
    0 0 20px rgba(0,210,255,.10),
    0 0 24px rgba(155,90,255,.08);
}

@media (max-width: 420px) {
  .rp-card { padding: 14px; border-radius: 16px; }
  .rp-wheel-wrap { padding: 12px 0 8px; }
}

.rp-pointer {
  position: absolute;
  top: 4px;
  font-size: 30px;
  color: #F7FBFF;
  text-shadow:
    0 6px 14px rgba(0,0,0,.55),
    0 0 14px rgba(0,210,255,.30);
  user-select: none;
}

.rp-controls {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.rp-controls input {
  flex: 1;
  min-width: 240px;
  border-radius: 12px;
  border: 1px solid rgba(0, 210, 255, .22);
  background: rgba(255,255,255,.03);
  color: #EAF2FF;
  padding: 12px 12px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(155,90,255,.08) inset;
}

.rp-controls input:focus {
  border-color: rgba(0, 210, 255, .45);
  box-shadow:
    0 0 0 3px rgba(0,210,255,.18),
    0 0 22px rgba(155,90,255,.14);
}

.rp-btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,210,255,.95), rgba(155,90,255,.92));
  color: #071022;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 18px rgba(0,210,255,.20),
    0 0 22px rgba(155,90,255,.18);
}

.rp-btn:hover { filter: brightness(1.06); }

.rp-btn:disabled { opacity: .6; cursor: not-allowed; }

.rp-msg {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 800;
}

.rp-small { margin-top: 8px; opacity: .8; font-size: 12px; }

/* =========================
   Modal flotante (mensajes)
   ========================= */
.rp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.rp-modal--hidden { display: none; }

.rp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(6px);
}

.rp-modal__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: min(520px, calc(100vw - 24px));
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 16px 16px 14px;
}

.rp-modal--show .rp-modal__card {
  animation: rpPop .18s ease-out forwards;
}

@keyframes rpPop {
  from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.2; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.rp-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: #0f172a;
  font-size: 20px;
  cursor: pointer;
}

.rp-modal__header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-right: 38px;
}

.rp-modal__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(15, 23, 42, .06);
}

.rp-modal__title {
  font-weight: 900;
  font-size: 18px;
}

.rp-modal__subtitle {
  opacity: .78;
  font-size: 13px;
  margin-top: 2px;
}

.rp-modal__body {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.rp-modal__footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.rp-modal__btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.rp-modal[data-type="win"] .rp-modal__icon {
  background: rgba(34,197,94,.16);
}

.rp-modal[data-type="error"] .rp-modal__icon {
  background: rgba(239,68,68,.16);
}

.rp-modal[data-type="warn"] .rp-modal__icon {
  background: rgba(245,158,11,.18);
}

/* =========================
   Confetti canvas overlay
   ========================= */
.rp-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

.rp-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.rp-card label { display:block; margin-top: 10px; font-weight: 700; }
.rp-card input[type="text"],
.rp-card input[type="number"] { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #334155; background:#0b1220; color:#e2e8f0; }

@media (max-width: 900px) {
  .rp-admin-grid { grid-template-columns: 1fr; }
}

/* Admin - Historial */
.rp-admin-card{
  background:#fff;
  border-radius:12px;
  padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.rp-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  background:#e5e7eb;
  color:#111827;
}
.rp-badge-win{ background:#dcfce7; color:#166534; }
.rp-badge-no_prizes_available{ background:#fef9c3; color:#854d0e; }
.rp-badge-out_of_stock_race{ background:#fee2e2; color:#991b1b; }
.rp-badge-invalid_code{ background:#fee2e2; color:#991b1b; }
.rp-badge-code_already_used{ background:#fee2e2; color:#991b1b; }