/*
  Variables pensadas para remapear a tu sistema "olor a periodico" existente.
  No he visto tu hoja de estilos real, asi que estos valores son un punto de
  partida neutro (serif, hairlines, sin border-radius) — sustituye los
  valores por tus tokens reales en vez de mantener este archivo aislado.
*/
/*
  Estos valores AHORA heredan directamente de los tokens reales de tu
  index.html (--bg, --text-primary, --accent, --font-display...) via
  var(--nombre-real, fallback). Si game.html incluye el mismo bloque
  :root que index.html (te lo doy mas abajo), estos colores se ajustan
  solos sin tocar este archivo. Los fallback (segundo valor de cada var())
  son una copia de seguridad por si algun dia se usa este componente
  fuera de una pagina con esos tokens definidos.
*/
.wk-game {
  --wk-ink: var(--text-primary, #1a1a1a);
  --wk-paper: var(--bg, #f4f1ea);
  --wk-rule: var(--border, #1a1a1a33);
  --wk-accent: var(--accent, #b3261e);
  --wk-correct: #2f6b3a;
  --wk-incorrect: #b3261e;
  --wk-font-display: var(--font-display, Georgia, "Times New Roman", serif);
  --wk-font-body: var(--font-body, Georgia, "Times New Roman", serif);
  --wk-font-mono: var(--font-mono, "IBM Plex Mono", monospace);

  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem;
  font-family: var(--wk-font-body);
  color: var(--wk-ink);
  background: var(--wk-paper);
}

.wk-game__header {
  border-bottom: 2px solid var(--wk-ink);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.wk-game__title {
  font-family: var(--wk-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}

.wk-game__tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--wk-rule);
}

.wk-game__tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--wk-rule);
  font-family: var(--wk-font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  color: var(--wk-ink);
}
.wk-game__tab:last-child { border-right: none; }
.wk-game__tab.is-active {
  background: var(--wk-ink);
  color: var(--wk-paper);
}

.wk-game--loading,
.wk-game--error {
  text-align: center;
  padding: 2rem 1rem;
}

/* Order5 */

.wk-order5__instructions,
.wk-century__instructions {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.wk-order5__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border-top: 1px solid var(--wk-rule);
}

.wk-order5__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--wk-rule);
}

.wk-order5__item--correct { background: color-mix(in srgb, var(--wk-correct) 12%, transparent); }
.wk-order5__item--incorrect { background: color-mix(in srgb, var(--wk-incorrect) 10%, transparent); }

.wk-order5__rank {
  font-family: var(--wk-font-display);
  font-weight: 700;
  width: 1.5rem;
  text-align: center;
}

.wk-order5__label { flex: 1; }

.wk-order5__year {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  font-size: 0.85rem;
}

.wk-order5__controls button {
  border: 1px solid var(--wk-rule);
  background: transparent;
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
}
.wk-order5__controls button:disabled { opacity: 0.3; cursor: default; }

/* Century */

.wk-century__hints {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.wk-century__hint {
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--wk-accent);
  background: color-mix(in srgb, var(--wk-accent) 6%, transparent);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.wk-century__picker-label {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.wk-century__picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.wk-century__pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.5rem 0.2rem;
  border: 1px solid var(--wk-rule);
  background: transparent;
  color: var(--wk-ink);
  font-family: var(--wk-font-body);
  cursor: pointer;
  min-height: 3rem;
}
.wk-century__pick:hover:not(:disabled) {
  border-color: var(--wk-ink);
  background: color-mix(in srgb, var(--wk-ink) 6%, transparent);
}
.wk-century__pick-roman {
  font-weight: 700;
  font-size: 0.95rem;
}
.wk-century__pick-era {
  font-size: 0.6rem;
  opacity: 0.6;
  text-transform: uppercase;
}
.wk-century__pick--wrong {
  opacity: 0.35;
  cursor: default;
  text-decoration: line-through;
}
.wk-century__pick--correct {
  background: var(--wk-correct);
  border-color: var(--wk-correct);
  color: var(--wk-paper);
}
.wk-century__pick--correct .wk-century__pick-era {
  opacity: 0.85;
}

.wk-century__giveup {
  display: block;
  margin: 0 auto;
}

.wk-century__reveal {
  font-style: italic;
}

/* Shared */

.wk-game__submit {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--wk-ink);
  background: var(--wk-ink);
  color: var(--wk-paper);
  font-family: var(--wk-font-body);
  font-size: 1rem;
  cursor: pointer;
}

.wk-game__result {
  text-align: center;
  padding-top: 0.5rem;
}

.wk-share-button {
  margin-top: 0.75rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--wk-ink);
  background: transparent;
  color: var(--wk-ink);
  cursor: pointer;
  font-family: var(--wk-font-body);
}

@media (prefers-reduced-motion: reduce) {
  .wk-game * { transition: none !important; animation: none !important; }
}