:root {
  --azul:   #2563eb;
  --amarillo:#facc15;
  --rojo:   #dc2626;
  --morado: #7c3aed;
  --verde:  #16a34a;
  --naranja:#ea580c;
  --rosa:   #db2777;
  --cian:   #0891b2;
  --tinta:  #0f172a;
  --gris:   #64748b;
  --claro:  #f1f5f9;
  --ok:     #16a34a;
  --err:    #dc2626;
  --sombra: 0 10px 30px rgba(2, 6, 23, .18);
  --radio:  18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--tinta);
  min-height: 100vh;
  background: linear-gradient(135deg, #6d28d9 0%, #2563eb 55%, #0891b2 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 14px 60px;
}

.contenedor {
  width: 100%;
  max-width: 760px;
}

.tarjeta {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px 26px;
  margin-bottom: 18px;
}

.marca {
  text-align: center;
  color: #fff;
  margin-bottom: 18px;
}
.marca h1 {
  font-size: 2rem;
  letter-spacing: .5px;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.marca p { opacity: .92; margin-top: 4px; }
.bandera {
  display: inline-flex; border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); margin-bottom: 8px;
}
.bandera span { display:block; width: 46px; height: 10px; }
.bandera .b1 { background: var(--amarillo); height: 16px; }
.bandera .b2 { background: var(--azul); }
.bandera .b3 { background: var(--rojo); }

h2 { font-size: 1.35rem; margin-bottom: 6px; }
.sub { color: var(--gris); margin-bottom: 18px; font-size: .95rem; }

label { display:block; font-weight:600; margin: 14px 0 6px; }
input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.05rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  transition: border-color .15s;
}
input[type="text"]:focus { border-color: var(--azul); }
input.codigo {
  text-transform: uppercase;
  letter-spacing: 6px;
  font-weight: 800;
  text-align: center;
  font-size: 1.4rem;
}

.btn {
  display: inline-block;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--azul);
  cursor: pointer;
  margin-top: 18px;
  transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secundario { background: var(--gris); }
.btn.verde { background: var(--verde); }
.btn.rojo  { background: var(--rojo); }
.btn.amarillo { background: var(--amarillo); color: var(--tinta); }

.fila { display:flex; gap: 12px; flex-wrap: wrap; }
.fila .btn { flex: 1; }

.aviso {
  background: #fef2f2; color: var(--rojo);
  border: 1px solid #fecaca; border-radius: 12px;
  padding: 12px 14px; margin-top: 14px; font-size: .95rem;
  display: none;
}
.aviso.mostrar { display: block; }

.enlaces { text-align:center; margin-top: 18px; }
.enlaces a { color: var(--azul); font-weight: 600; text-decoration: none; }

/* ---------- Código de sesión (admin) ---------- */
.codigo-grande {
  text-align: center;
  background: linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff; border-radius: 16px; padding: 22px; margin: 8px 0 4px;
}
.codigo-grande .valor {
  font-size: 3rem; font-weight: 900; letter-spacing: 10px;
}
.codigo-grande small { opacity:.9; }

/* ---------- Enlace para compartir (admin) ---------- */
.enlace-compartir { margin-top: 16px; }
.enlace-compartir label { margin-bottom: 8px; }
.fila-enlace { display:flex; gap:10px; align-items:stretch; }
.fila-enlace input {
  flex:1; padding:12px 14px; border:2px solid #e2e8f0; border-radius:12px;
  font-size:.9rem; background:#f8fafc; color:var(--tinta);
}
.fila-enlace .btn { width:auto; margin-top:0; white-space:nowrap; padding:12px 18px; }

/* ---------- Jugadores / tablero ---------- */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip {
  background: var(--claro); border-radius: 999px; padding:8px 14px;
  font-weight:600; font-size:.9rem;
}

table { width:100%; border-collapse: collapse; margin-top: 8px; }
th, td { padding: 10px 8px; text-align:left; font-size:.95rem; }
thead th { color: var(--gris); border-bottom: 2px solid #e2e8f0; font-size:.8rem; text-transform: uppercase; letter-spacing:.5px; }
tbody tr { border-bottom: 1px solid #f1f5f9; }
tbody tr td:first-child { font-weight:700; }
.pill { padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.pill.jug { background:#fef9c3; color:#854d0e; }
.pill.fin { background:#dcfce7; color:#166534; }
.barra { height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden; min-width:70px; }
.barra > i { display:block; height:100%; background:var(--azul); }
.btn-sacar {
  border:none; background:#fee2e2; color:var(--rojo); font-weight:800;
  width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:.9rem;
  line-height:1; transition:background .15s;
}
.btn-sacar:hover { background:var(--rojo); color:#fff; }

/* ---------- Preguntas del jugador ---------- */
.progreso {
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; margin-bottom:10px; font-weight:600;
}
.progreso .marcador { background:rgba(255,255,255,.2); padding:6px 12px; border-radius:999px; }
.cronometro {
  background:#fff; color:var(--azul); font-weight:900; font-size:1.1rem;
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.cronometro.bajo { background:var(--rojo); color:#fff; animation:latir .6s ease-in-out infinite; }
@keyframes latir { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.15);} }
.barra-prog { height:10px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden; margin-bottom:16px;}
.barra-prog > i { display:block; height:100%; background:var(--amarillo); transition:width .3s;}

.pregunta { font-size:1.4rem; font-weight:800; margin-bottom:20px; line-height:1.3; }

.opciones { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .opciones { grid-template-columns:1fr; } }
.opcion {
  border:none; border-radius:14px; padding:18px 16px;
  font-size:1.05rem; font-weight:700; color:#fff; cursor:pointer;
  text-align:left; display:flex; align-items:center; gap:12px;
  min-height:74px; transition:transform .08s, filter .15s;
}
.opcion:hover { filter:brightness(1.06); }
.opcion:active { transform:scale(.98); }
.opcion .figura { font-size:1.3rem; }
.opcion.c0 { background: var(--rojo); }
.opcion.c1 { background: var(--azul); }
.opcion.c2 { background: var(--amarillo); color:var(--tinta); }
.opcion.c3 { background: var(--verde); }
.opcion.correcta { outline:5px solid #22c55e; filter:brightness(1.1); }
.opcion.incorrecta { opacity:.45; }
.opcion:disabled { cursor:default; }

.retro { text-align:center; font-size:1.3rem; font-weight:800; margin-top:22px; min-height:34px; }
.retro.bien { color: var(--verde); }
.retro.mal  { color: var(--rojo); }

/* ---------- Podio ---------- */
.podio { display:flex; justify-content:center; align-items:flex-end; gap:14px; margin:24px 0; }
.puesto { text-align:center; color:#fff; }
.puesto .peldano {
  border-radius:14px 14px 0 0; width:90px; display:flex; align-items:flex-end;
  justify-content:center; padding-bottom:10px; font-size:2rem; font-weight:900;
  box-shadow: var(--sombra);
}
.puesto .nombre { font-weight:800; margin-top:8px; color:var(--tinta); }
.puesto .nota { color:var(--gris); font-size:.9rem; }
.p1 .peldano { height:150px; background:linear-gradient(#fde047,#eab308);}
.p2 .peldano { height:115px; background:linear-gradient(#e2e8f0,#94a3b8);}
.p3 .peldano { height:90px;  background:linear-gradient(#fdba74,#c2410c);}
.medalla { font-size:2rem; }

.resultado-personal {
  text-align:center; padding:20px; border-radius:16px;
  background:linear-gradient(135deg,#16a34a,#0891b2); color:#fff; margin-bottom:16px;
}
.resultado-personal .nota-big { font-size:3.4rem; font-weight:900; line-height:1; }

.espera { text-align:center; padding:24px 10px; }
.espera .spinner {
  width:54px; height:54px; border:6px solid #e2e8f0; border-top-color:var(--azul);
  border-radius:50%; margin:14px auto; animation:girar 1s linear infinite;
}
@keyframes girar { to { transform:rotate(360deg); } }

.oculto { display:none !important; }

.pie { text-align:center; color:#fff; opacity:.8; font-size:.85rem; margin-top:10px; }
.config-alerta {
  background:#fffbeb; border:1px solid #fde68a; color:#92400e;
  border-radius:12px; padding:14px; margin-bottom:16px; font-size:.9rem; line-height:1.5;
}