/* Shared styling for the injected per-game info block.
   Scoped entirely to .game-info so it cannot affect game layouts.
   Uses site CSS variables when present, with safe fallbacks. */

.game-info {
  box-sizing: border-box;
  max-width: 760px;
  margin: 2.5rem auto 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  background: var(--cream, rgba(0, 0, 0, 0.02));
  color: var(--text, inherit);
  font-size: 0.98rem;
  line-height: 1.6;
  text-align: left;
}

.game-info h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  line-height: 1.2;
}

.game-info h3 {
  margin: 1.1rem 0 0.4rem;
  font-size: 1.05rem;
}

.game-info p {
  margin: 0 0 0.75rem;
}

.game-info ol,
.game-info ul {
  margin: 0 0 0.75rem;
  padding-left: 1.4rem;
}

.game-info li {
  margin: 0.2rem 0;
}

.game-info .game-info-origin {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  font-size: 0.9rem;
  color: var(--muted, rgba(0, 0, 0, 0.6));
}

@media (max-width: 520px) {
  .game-info {
    margin: 1.75rem 1rem 1.25rem;
    padding: 1rem 1.1rem 1.25rem;
  }
}