/* Markers for the MapLibre hole GPS view (created from js/map.js, so they can't be
   styled from HoleGpsView.razor.css scoped CSS). Markers stay upright when the map
   rotates because MapLibre aligns marker elements to the viewport by default. */

.hole-map-green,
.hole-map-player,
.hole-map-tap {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    box-sizing: border-box;
}

.hole-map-green {
    width: 18px;
    height: 18px;
    background: #2ecc71;
}

.hole-map-player {
    width: 16px;
    height: 16px;
    background: #3498db;
}

.hole-map-tap {
    width: 12px;
    height: 12px;
    background: #f1c40f;
}

/* Shot-tracker pins: numbered discs joined by the green path. */
.hole-map-shot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
    background: #e67e22;
    color: #fff;
    font: 700 11px/18px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    pointer-events: none;
}

.hole-map-label.shot {
    background: rgba(46, 204, 113, .85);
    color: #062d18;
    text-shadow: none;
}

.hole-map-green-label,
.hole-map-label {
    pointer-events: none;
    white-space: nowrap;
    font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    background: rgba(0, 0, 0, .65);
    padding: 2px 6px;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.hole-map-green-label {
    transform: translateY(-22px);
}

/* Conditions strip under the hole header (wind / temp / elevation chips). */
.hole-gps-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.hole-gps-conditions .chip {
    font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: rgba(255, 255, 255, .14);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.hole-gps-plays {
    color: #f1c40f;
}

/* Wind indicator: rotated as a whole by MapLibre (rotationAlignment: map). */
.hole-map-wind {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #7fd4ff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}

.hole-map-wind .wind-stream {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 46 30;
    animation: wind-flow var(--wind-dur, 1.6s) linear infinite;
}

@keyframes wind-flow {
    from { stroke-dashoffset: 76; opacity: .55; }
    50%  { opacity: 1; }
    to   { stroke-dashoffset: 0; opacity: .55; }
}

.hole-map-wind-speed {
    margin-top: -6px;
    color: #fff;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: rgba(0, 0, 0, .65);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Inline icons in the condition chips (emoji render inconsistently on phones). */
.hole-gps-conditions .chip svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Keep MapLibre's controls readable on top of satellite imagery. */
.hole-gps-map .maplibregl-ctrl-group {
    background: rgba(255, 255, 255, .92);
}