:root { color-scheme: light; font-family: Arial, sans-serif; color: #402426; background: #e9e4d9; }
* { box-sizing: border-box; }
body { margin: 0; }
.map-panel { position: relative; height: 100svh; width: 100%; overflow: hidden; }
#map { position: absolute; inset: 0; touch-action: none; overscroll-behavior: contain; }
.controls { position: absolute; bottom: max(44px, env(safe-area-inset-bottom)); left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); margin: auto; padding: 6px 8px 9px; border: 1px solid #fff7e670; border-radius: 12px; background: #f4f0e7d6; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px #20141430; }
.control-buttons { display: flex; align-items: center; gap: 4px; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #402426; cursor: pointer; font: 14px Arial, sans-serif; touch-action: manipulation; }
button:hover { background: #fffaf190; }
button:disabled { opacity: .45; cursor: wait; }
button:focus-visible { outline: 2px solid #402426; outline-offset: 1px; }
button svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#play { background: #402426e6; color: #fff8ee; min-width: 108px; }
progress { display: block; appearance: none; border: 0; width: 100%; height: 3px; margin-top: 6px; background: #40242620; border-radius: 4px; overflow: hidden; }
progress::-webkit-progress-bar { background: #40242620; }
progress::-webkit-progress-value { background: #a88d51; }
progress::-moz-progress-bar { background: #a88d51; }
.status-card { position: absolute; top: 16px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 8px; background: #f4f0e7ed; font-size: 13px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pin { max-width: 150px; background: #402426e8; color: #fff8ee; padding: 7px 10px; border: 1px solid #fff8ee; border-radius: 10px; font-size: 12px; line-height: 1.35; text-align: center; box-shadow: 0 2px 8px #0003; }
.traveler { width: 22px; height: 22px; border: 4px solid #fff; background: #a88d51; border-radius: 50%; box-shadow: 0 0 0 7px #a88d5133, 0 2px 10px #0004; }
.mapboxgl-ctrl-attrib { font-size: 12px !important; }
@media (max-width: 600px) { .desktop-label { display: none; } button { padding: 10px; } .pin { max-width: 118px; font-size: 11px; } }