@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

/* estilos.css — diseño del concurso "En Juego" */
:root {
  --oro: #f5c542;
  --oro-osc: #c8961e;
  --verde: #2ecc71;
  --bg: #0b0f16;
  --texto: #eef1f6;
  --suave: #9aa4b2;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--texto);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===== ROSQUILLA ===== */
.rosquilla { position: relative; display: inline-block; }
.rosquilla .aro {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(245,197,66,.35);
  box-shadow: 0 0 28px rgba(245,197,66,.12), inset 0 0 28px rgba(245,197,66,.07);
}
.rosquilla .letra {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 800;
  background: radial-gradient(circle at 32% 30%, #3f4650, #1b212b);
  border: 2px solid #2c343f; color: var(--texto);
  box-shadow: 0 5px 14px rgba(0,0,0,.45);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.rosquilla .letra.actual {
  background: radial-gradient(circle at 32% 30%, #ffe7a3, var(--oro-osc));
  border-color: #fff2cc; color: #241b02;
  box-shadow: 0 0 20px rgba(245,197,66,.85), 0 0 46px rgba(245,197,66,.4);
  animation: pulso 1.5s ease-in-out infinite;
}
.rosquilla .letra.hecha {
  background: radial-gradient(circle at 32% 30%, #6ff0b0, #17864a);
  border-color: #c9f7de; color: #062d17;
  box-shadow: 0 0 12px rgba(46,204,113,.5);
}
@keyframes pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* ===== TÍTULO DE PRUEBA ===== */
.titulo-prueba {
  color: var(--oro); letter-spacing: .3em; text-transform: uppercase;
  font-weight: 700; font-size: 1.05em; margin-bottom: 12px;
}

/* ===== TARJETA / PALABRA ===== */
.tarjeta {
  display: inline-block; padding: 22px 32px; border-radius: 16px;
  background: linear-gradient(160deg, #151c28, #0e141d);
  border: 1px solid rgba(245,197,66,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  text-align: center;
}
.tarjeta .etiqueta {
  color: var(--oro); letter-spacing: .28em; text-transform: uppercase;
  font-size: .95em; font-weight: 600; margin-bottom: 12px;
}
.tarjeta .palabra { font-size: 2.4em; font-weight: 800; letter-spacing: .06em; line-height: 1.2; }
.tarjeta .mascara { color: var(--oro); }
.tarjeta .meta { color: var(--suave); font-size: .95em; margin-top: 12px; }

/* ===== MARCADOR (overlay) ===== */
.puntos { font-size: 1.7em; font-weight: 800; margin-bottom: 14px; }
.puntos span { margin-right: 26px; }

/* ===== PANEL: botones y controles ===== */
button {
  background: #1a2230; color: var(--texto); border: 1px solid #2c3547;
  border-radius: 9px; padding: 9px 15px; font-size: .9em; font-family: inherit;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
button:hover { background: #232d3e; border-color: var(--oro-osc); }
button:active { transform: translateY(1px); }
button.primario {
  background: linear-gradient(160deg, var(--oro), var(--oro-osc));
  color: #241b02; font-weight: 700; border: none;
}
button.primario:hover { background: linear-gradient(160deg, #ffe08a, var(--oro-osc)); }
select {
  background: #1a2230; color: var(--texto); border: 1px solid #2c3547;
  border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: .9em;
}