/* The Greywatch Pass (M13, track X). */

/* the beacon line, as dots along the ridge, on a cairn's panel */
.wp-line { display: flex; justify-content: center; gap: 8px; margin: 8px 0 10px; font-size: 18px; }
.wp-dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #4a4640; color: #c8c0b0; border: 2px solid #6a645a; }
.wp-dot.on { background: #6a3a1a; border-color: #ffb050; box-shadow: 0 0 10px rgba(255, 160, 70, .7); }
.wp-dot.me { outline: 2px dashed #fff2c0; outline-offset: 2px; }
.wp-dot:nth-child(3) { margin-right: 18px; } /* (the tower stands between the two halves) */

/* the lift's ride, as a little picture (like the coach's) */
.wp-ride { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(12, 18, 30, .55); transition: opacity .6s; cursor: pointer; }
.wp-ride.out { opacity: 0; }
.wp-ride-frame { padding: 6px; border-radius: 14px; background: #e8e4d8; border: 3px solid #5a5a62; box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 40px rgba(200, 220, 255, .35); }
.wp-ride-cv { display: block; width: min(86vw, 560px); height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; border-radius: 8px; }
.wp-ride-to { color: #f4f8ff; font-size: 22px; font-weight: 700; text-shadow: 0 2px 0 #000; }

/* Alder's and Grimma's panels, the map's card */
.wp-block { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(90, 84, 72, .12); }
.wp-block h4 { margin: 0 0 4px; }
.wp-mapcard p { margin: 4px 0; }

@media (max-width: 520px) {
  .wp-ride-to { font-size: 18px; }
  .wp-line { gap: 4px; }
  .wp-dot { width: 26px; height: 26px; font-size: 15px; }
  .wp-dot:nth-child(3) { margin-right: 10px; }
}