/* Global Positioning System lesson. All rules scoped under .gps-* */
.gps-wrap { width: 100%; max-width: 330px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gps-map { position: relative; width: 100%; }
.gps-wrap.gps-big { max-width: 400px; }
.gps-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gps-land { fill: #17203a; }
.gps-park { fill: rgba(63,214,154,.12); }
.gps-river { fill: none; stroke: rgba(110,160,255,.28); stroke-width: 9; stroke-linecap: round; }
.gps-road { fill: none; stroke: rgba(234,227,215,.10); stroke-width: 4; }
.gps-ring { fill: none; stroke: var(--violet-bright); stroke-width: 2.5; opacity: .9; transition: opacity .4s, stroke .4s; }
.gps-ring.gps-new { animation: gpsLand .5s ease-out both; }
@keyframes gpsLand { from { stroke-width: 6; opacity: .3; } }
.gps-ring.gps-meet { stroke: var(--gold); }
.gps-ring.gps-dim { opacity: .35; }
.gps-off { opacity: 0; }
.gps-ring.gps-off { opacity: 0; }
.gps-pulse { fill: rgba(169,155,255,.08); stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 3 5; }
.gps-wave { fill: none; stroke: rgba(252,192,80,.7); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: gpsPulse 1.8s ease-out 4 both; }
@keyframes gpsPulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.gps-sat.gps-picked .gps-wave { animation: none; opacity: 0; }
.gps-num { font: 800 15px var(--sans); fill: var(--gold); text-anchor: middle; paint-order: stroke; stroke: #17203a; stroke-width: 4px; }
.gps-dot { transition: opacity .4s; }
.gps-halo { fill: rgba(80,150,255,.25); animation: gpsHalo 1.4s ease-in-out 3 alternate; transform-box: fill-box; transform-origin: center; }
@keyframes gpsHalo { to { transform: scale(1.5); } }
.gps-core { fill: #3D8BFF; stroke: #fff; stroke-width: 2.5; }
.gps-other { fill: #3D8BFF; stroke: #fff; stroke-width: 1.5; animation: gpsPop .35s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes gpsPop { from { transform: scale(0); } }
.gps-tag { font: 800 17px var(--sans); fill: var(--gold); text-anchor: middle; paint-order: stroke; stroke: #17203a; stroke-width: 5px; transition: opacity .3s; }

/* the satellites and crossings take taps through real buttons, 48px at any scale */
.gps-hit, .gps-x { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.gps-hit:disabled { cursor: default; }
.gps-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--surface); border: 3px solid var(--text); box-sizing: border-box; transition: transform .2s, background .2s, border-color .2s; }
.gps-x:disabled { cursor: default; }
.gps-x.gps-yes::after { border-color: var(--mint); background: var(--mint); transform: scale(1.3); }
.gps-x.gps-no::after { border-color: var(--red); background: var(--red); transform: scale(1.3); }

.gps-chips { display: flex; gap: 6px; width: 100%; }
.gps-chip { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 4px 5px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); }
.gps-chip b { font: 800 16px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.gps-chip span { font: 600 12px var(--sans); color: var(--faint); white-space: nowrap; }
.gps-chip.gps-got { border-color: var(--violet-bright); }
.gps-chip.gps-got b { color: var(--text); }
.gps-chip.gps-got span { color: var(--dim); }
.gps-chip.gps-skew { border-color: var(--gold); }
.gps-chip.gps-skew span { color: var(--gold); }
.gps-note { font-size: 12px; color: var(--faint); }

@media (max-height: 700px) {
  .gps-wrap { max-width: 300px; gap: 5px; }
  .gps-wrap.gps-big { max-width: 324px; }
  .gps-chip { padding: 2px 4px 3px; }
  .gps-chip b { font-size: 14px; }
}