/* Oráculo de la Lotería — generador de números de la suerte para 3 loterías españolas.
   Bolas estilo bombo de sorteo; un panel por juego (Primitiva/Bonoloto, Euromillones, El Gordo). */

.lot-page { color: #f5ecd2; }
.lot-header { text-align: center; margin-bottom: 1.6rem; }
.lot-header h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #ffe08a;
  text-shadow: 0 0 18px rgba(255,224,138,0.55);
  margin: 0 0 .6rem;
}
.lot-intro {
  max-width: 62ch;
  margin: 0 auto;
  color: rgba(245,236,210,0.85);
  line-height: 1.55;
}

.lot-app {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* ---------- Custom draw form (personalised, for any country) ---------- */
.lot-custom {
  border-radius: 16px;
  padding: 1.4rem 1.3rem 1.6rem;
  text-align: center;
  border: 1px solid rgba(180,140,255,0.32);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(165deg, #3a2c5a 0%, #1a1230 100%);
}
.lot-custom-title {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  margin: 0 0 1.1rem;
  color: #e8d4ff;
  text-shadow: 0 0 14px rgba(200,170,255,0.45);
}
.lot-custom-row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  justify-content: center;
  margin-bottom: .9rem;
  cursor: pointer;
}
.lot-custom-row input[type="radio"] {
  margin-top: .35rem;
  accent-color: #b98aff;
  flex: none;
}
.lot-custom-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  line-height: 2;
  color: #f5ecf6;
  font-size: 1.02rem;
}
.lot-sel {
  background: #fdf6e3;
  color: #2a1a40;
  border: 1px solid rgba(120,90,160,0.5);
  border-radius: 8px;
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.lot-sel:focus-visible { outline: 2px solid #b98aff; outline-offset: 1px; }
/* Dim the inactive row's controls */
.lot-custom-row:has(input:not(:checked)) .lot-custom-text { opacity: .55; }
.lot-custom-play { min-width: 200px; margin-top: .4rem; }
.lot-custom-play:disabled { opacity: .6; cursor: progress; }
.lot-custom-result { margin-top: 1.2rem; }
.lot-custom-result-label {
  font-size: .9rem;
  letter-spacing: .04em;
  color: rgba(245,236,246,0.85);
  margin: 0 0 .7rem;
}
/* A single big "digits" result: a pill that grows with the number of digits.
   Higher specificity (.lot-balls .lot-ball--digits) so it beats the base .lot-ball
   width/height/border-radius regardless of source order. */
.lot-balls .lot-ball--digits {
  width: auto;
  min-width: 3rem;
  max-width: 100%;
  height: 3rem;
  padding: 0 1.1rem;
  border-radius: 1.5rem;       /* pill, not circle */
  letter-spacing: .14em;
  white-space: nowrap;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .lot-balls .lot-ball--digits {
    font-size: 1rem;
    letter-spacing: .08em;
    padding: 0 .7rem;
  }
}

/* ---------- Game panel ---------- */
.lot-game {
  border-radius: 16px;
  padding: 1.3rem 1.2rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(255,224,138,0.28);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(165deg, #143a2a 0%, #0c241a 100%);
}
.lot-game--euromillones {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(165deg, #1a2c5a 0%, #0c1430 100%);
  border-color: rgba(150,180,255,0.3);
}
.lot-game--elgordo {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(165deg, #5a1a28 0%, #2a0c12 100%);
  border-color: rgba(255,170,150,0.3);
}

.lot-game-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  margin: 0 0 1rem;
  color: #fff0c0;
  letter-spacing: .02em;
}

/* ---------- Balls ---------- */
.lot-balls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin-bottom: .7rem;
}

.lot-ball {
  --ball-bg: radial-gradient(circle at 35% 28%, #ffffff 0 8%, #ffe9a8 30%, #e8b94a 75%, #b8862a 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ball-bg);
  color: #3a2406;
  font-weight: 800;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -3px 6px rgba(120,80,10,0.5), inset 0 2px 4px rgba(255,255,255,0.7), 0 4px 10px rgba(0,0,0,0.4);
  transition: transform .18s ease;
}
.lot-ball.is-set {
  animation: lot-pop .32s ease;
}
@keyframes lot-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Extra balls (estrellas / reintegro / clave): distinct tint per game family */
.lot-ball--extra {
  --ball-bg: radial-gradient(circle at 35% 28%, #ffffff 0 8%, #cfe0ff 30%, #7fa0e8 75%, #3a5aa8 100%);
  color: #0c1a3a;
}
.lot-game--elgordo .lot-ball--extra,
.lot-game--primitiva .lot-ball--extra {
  --ball-bg: radial-gradient(circle at 35% 28%, #ffffff 0 8%, #ffd0c0 30%, #e87a5a 75%, #a83c1a 100%);
  color: #3a0c06;
}

.lot-sep {
  font-size: 1.6rem;
  color: rgba(255,255,255,0.6);
  font-weight: 700;
  padding: 0 .15rem;
}

.lot-extra-label {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,236,210,0.6);
  margin: 0 0 1.1rem;
}

/* While spinning, balls jitter slightly */
.lot-game[data-state="spinning"] .lot-ball:not(.is-set) {
  animation: lot-jitter .12s steps(2) infinite;
}
@keyframes lot-jitter {
  0%   { transform: translateY(-1px); }
  100% { transform: translateY(1px); }
}

/* ---------- Play button ---------- */
.lot-play {
  min-width: 200px;
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: .06em;
}
.lot-play:disabled { opacity: .6; cursor: progress; }

.lot-error {
  text-align: center;
  color: #ffb0a0;
  margin: 0;
}
.lot-disclaimer {
  text-align: center;
  font-size: .78rem;
  color: rgba(245,236,210,0.5);
  font-style: italic;
  margin: .4rem auto 0;
  max-width: 60ch;
}

@media (max-width: 420px) {
  .lot-ball { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}