/* History Mapper additions on top of the shared map-game stylesheet (accent.css) */
.event-card { padding: 4px 2px 10px; }
.event-card h2 { font-family: var(--font-display); font-size: clamp(22px, 5.5vw, 28px); font-weight: 700; line-height: 1.2; margin: 4px 0 10px; }
.event-card .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.event-hint { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.credit-line { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.credit-line a { color: var(--muted); text-decoration: underline; }
.results-round-km { color: var(--muted); font-size: 13px; }
.results-rounds li { grid-template-columns: 24px 1fr auto 52px; }
.ac-wrap { position: relative; }
.game-sheet .ac-list { top: auto; bottom: calc(100% + 4px); }
.guess-box { display: grid; gap: 10px; }
.guess-box input {
  width: 100%; padding: 14px 16px; font: 600 17px var(--font-body); border-radius: var(--rx-sm, 3px);
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line);
}
.guess-box input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.form-error { color: var(--danger, #ff6b6b); font-size: 14px; min-height: 1.3em; margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.more-info { margin-top: 8px; font-size: 14px; text-align: left; }
.more-info summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--muted); font-weight: 600; }
.more-info summary::-webkit-details-marker { display: none; }
.more-info summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.more-info[open] summary::before { transform: rotate(45deg); }
.more-info summary:hover { color: var(--ink); }
.more-info p { margin: 4px 0 8px; color: var(--ink); line-height: 1.45; font-weight: 400; }
.more-info a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.more-info a:hover { text-decoration: underline; }
.more-info a .material-symbols-rounded { font-size: 16px; }
.results-round-place .more-info { margin-top: 2px; font-weight: 400; }