.home-travel-map[data-travel-history] { --home-travel-map-height: min(40rem, 52vh); --home-travel-map-mobile-height: min(28rem, 48vh); }
@supports (height: 100dvh) {
    .home-travel-map[data-travel-history] { --home-travel-map-height: min(40rem, 52dvh); --home-travel-map-mobile-height: min(28rem, 48dvh); }
}
.travel-history__player { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 3.5rem; align-items: center; gap: 0 0.65rem; margin-top: 0.35rem; padding: 0.15rem 0; }
.travel-history__play { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid #7b5435; border-radius: 50%; font: inherit; font-size: 0.85rem; line-height: 1; color: #fff8f2; background: #7b5435; cursor: pointer; }
.travel-history__play:hover { background: #62422a; }
.travel-history__speed { grid-column: 3; grid-row: 1; width: 100%; min-width: 0; height: 2rem; padding: 0.2rem 0.35rem; border: 1px solid #c3a78e; border-radius: 999px; font: inherit; font-size: 0.8rem; background: #fffaf4; color: #4d3420; cursor: pointer; }
.travel-history__range { --history-progress: 0%; grid-column: 2; grid-row: 1; display: block; appearance: none; -webkit-appearance: none; min-width: 0; width: 100%; height: 32px; padding: 0; margin: 0; background: transparent; cursor: pointer; }
.travel-history__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #b3261e var(--history-progress), #e1d2c3 var(--history-progress)); }
.travel-history__range::-moz-range-track { height: 6px; border-radius: 999px; background: #e1d2c3; }
.travel-history__range::-moz-range-progress { height: 6px; border-radius: 999px; background: #b3261e; }
.travel-history__range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid #fffaf4; border-radius: 50%; background: #b3261e; box-shadow: 0 0 0 1px #b3261e, 0 2px 7px #0002; }
.travel-history__range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fffaf4; border-radius: 50%; background: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.travel-history__ticks { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; gap: 0.35rem; color: #725e4d; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.home-travel-map .travel-history__help { margin: 0.8rem 0 0; font-size: 0.84rem; color: #725e4d; line-height: 1.45; }
.travel-history__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: 1rem 0; }
.travel-history__stats > div { display: flex; flex-direction: column-reverse; align-items: center; padding: 0.45rem 0.6rem; border-radius: 0.85rem; background: #f0e5d9; text-align: center; }
.travel-history__stats dt { margin-top: 0; font-size: 0.87rem; line-height: 1.25; color: #674e3a; }
.travel-history__stats dd { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.1; font-weight: 700; color: #6e4329; font-variant-numeric: tabular-nums; }
.home-travel-map .travel-history__event { min-height: 1.6em; margin: 0; color: #5a4739; font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; }
.travel-history__player :focus-visible { outline: 3px solid #b3261e; outline-offset: 4px; }
.travel-history__player :disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) {
    .travel-history__ticks span:nth-child(2), .travel-history__ticks span:nth-child(4) { display: none; }
    .travel-history__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}