:root {
  --obsidiana: #0d0b14;
  --noche: #1a1530;
  --jade: #0f8b7d;
  --jade-oscuro: #08544d;
  --turquesa: #3fd0c0;
  --oro: #f4c542;
  --oro-oscuro: #b8860b;
  --grana: #c1272d;
  --grana-oscuro: #7a1218;
  --hueso: #f6ead2;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 16px; min-height: 100vh;
  font-family: "Segoe UI", sans-serif; color: var(--hueso);
  background:
    radial-gradient(circle at 50% -10%, rgba(244,197,66,.22), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(15,139,125,.25), transparent 40%),
    linear-gradient(160deg, var(--noche), var(--obsidiana));
  background-attachment: fixed;
}
h1 {
  text-align: center; margin: 0 0 14px; letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(180deg, #ffe58a, var(--oro) 50%, var(--oro-oscuro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 24px rgba(244,197,66,.25);
  padding-bottom: 14px;
  border-bottom: 6px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--oro) 0 12px, var(--grana) 12px 24px, var(--jade) 24px 36px, transparent 36px 42px) 1;
}
#marcadores { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.equipo {
  background: linear-gradient(160deg, var(--jade), var(--jade-oscuro));
  border: 2px solid var(--oro); border-radius: 12px; padding: 8px 16px; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.25);
}
.equipo input { background: transparent; border: none; color: var(--hueso); text-align: center; font-weight: bold; width: 110px; font-size: 1rem; }
.equipo .pts { font-size: 1.7rem; color: var(--oro); font-weight: bold; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.equipo button { margin: 0 2px; cursor: pointer; }
#tablero { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 1100px; margin: auto; }
.cat {
  background: linear-gradient(180deg, var(--grana), var(--grana-oscuro));
  border: 2px solid var(--oro); border-radius: 8px; color: var(--hueso);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px; font-weight: bold; min-height: 70px; text-transform: uppercase; letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.25);
}
.celda {
  background: linear-gradient(160deg, var(--jade), var(--jade-oscuro));
  color: var(--oro); border: 2px solid var(--oro-oscuro); border-radius: 8px;
  font-size: 2rem; font-weight: bold; padding: 22px 0; cursor: pointer;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 0 0 2px rgba(244,197,66,.15);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.celda:hover {
  transform: translateY(-3px) scale(1.04); border-color: var(--oro);
  background: linear-gradient(160deg, var(--turquesa), var(--jade));
  box-shadow: 0 0 18px rgba(63,208,192,.55), 0 6px 14px rgba(0,0,0,.5);
}
.celda.usada { visibility: hidden; }
#modal { position: fixed; inset: 0; background: rgba(8,6,14,.9); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tarjeta {
  background: linear-gradient(160deg, var(--noche), var(--obsidiana));
  border: 4px solid var(--oro); border-radius: 14px; max-width: 700px; width: 100%; padding: 28px; text-align: center;
  box-shadow: 0 0 0 4px var(--grana-oscuro), 0 0 40px rgba(244,197,66,.3);
}
#puntos { color: var(--oro); font-size: 2rem; font-weight: bold; }
#timer {
  width: 64px; height: 64px; line-height: 58px; margin: 8px auto;
  border: 4px solid var(--turquesa); color: var(--turquesa); border-radius: 50%;
  font-size: 2rem; font-weight: bold;
}
#timer.urgente { background: var(--grana); border-color: var(--oro); color: var(--hueso); animation: pulso .5s infinite alternate; }
@keyframes pulso { to { transform: scale(1.15); } }
#pregunta { font-size: 1.6rem; }
#respuesta { font-size: 1.5rem; color: var(--turquesa); font-weight: bold; }
.tarjeta button {
  background: linear-gradient(180deg, #ffe58a, var(--oro)); color: var(--obsidiana);
  border: none; border-radius: 8px; padding: 10px 18px; font-size: 1rem; font-weight: bold; cursor: pointer; margin: 4px;
}
.tarjeta button:hover { filter: brightness(1.1); }
.oculto { display: none !important; }
@media (max-width: 700px) { .celda { font-size: 1.2rem; padding: 14px 0; } .cat { font-size: .7rem; letter-spacing: 0; } }