/* TURN r80 track postcards.
   Each course keeps one clear colour identity, while the preview box becomes a tiny
   landscape poster with a track-coloured curb along its lower edge. Selection still
   relies only on the existing card colour, choice marker and Continue copy. */

.track-card-countryside {
  --track-card-paper: #f7dce7;
  --track-card-fold: #ebc4d4;
}

.track-card-airport {
  --track-card-paper: #fff4c7;
  --track-card-fold: #eadc9e;
}

.track-card-cliffside {
  --track-card-paper: #d5f3ef;
  --track-card-fold: #a9ddd8;
}

.track-card-harbor {
  --track-card-paper: #f9e2d2;
  --track-card-fold: #e7c2a6;
}

.track-card-midnight-city {
  --track-card-paper: #e3dcff;
  --track-card-fold: #cfc2f4;
}

.track-card:not(.is-selected):not(.is-locked) {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.34) 0 16%, transparent 16% 76%, var(--track-card-fold) 76% 100%),
    var(--track-card-paper);
}

.track-card.is-selected:not(.is-locked) {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.25) 0 15%, transparent 15% 77%, rgb(8 9 10 / 0.08) 77% 100%),
    var(--track-accent);
}

.track-card-preview {
  position: relative;
  isolation: isolate;
}

.track-card-preview svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(2px 3px 0 rgb(8 9 10 / 0.16));
}

.track-card-preview::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(7px, 1.1vh, 11px);
  border-top: 3px solid var(--ink);
  background: repeating-linear-gradient(
    90deg,
    var(--track-accent) 0 clamp(18px, 2.4vw, 30px),
    #fff8e8 clamp(18px, 2.4vw, 30px) clamp(36px, 4.8vw, 60px)
  );
  pointer-events: none;
}

.track-card-countryside .track-card-preview {
  background:
    radial-gradient(circle at 79% 23%, #ffe066 0 9%, transparent 9.5%),
    radial-gradient(ellipse at 22% 108%, #91d27c 0 46%, transparent 46.5%),
    radial-gradient(ellipse at 82% 112%, #69bd72 0 51%, transparent 51.5%),
    linear-gradient(180deg, #f5c9dc 0 55%, #dceca8 55% 100%);
}

.track-card-airport .track-card-preview {
  background:
    linear-gradient(
      90deg,
      transparent 0 43%,
      rgb(255 248 232 / 0.9) 43% 47%,
      transparent 47% 53%,
      rgb(255 248 232 / 0.9) 53% 57%,
      transparent 57% 100%
    ) 0 100% / 100% 45% no-repeat,
    linear-gradient(180deg, #caebf7 0 43%, #d8c79a 43% 100%);
}

.track-card-cliffside .track-card-preview {
  background:
    linear-gradient(174deg, transparent 0 56%, rgb(255 255 255 / 0.72) 56% 59%, transparent 59% 100%),
    linear-gradient(160deg, transparent 0 66%, #7f9b72 66% 78%, #9a7d60 78% 100%),
    linear-gradient(180deg, #b9e8f5 0 39%, #4ba8c8 39% 69%, #d8c28f 69% 100%);
}

.track-card-harbor .track-card-preview {
  background:
    linear-gradient(90deg, transparent 0 7%, #c95b35 7% 23%, transparent 23% 29%, #167b82 29% 46%, transparent 46% 53%, #f5c542 53% 68%, transparent 68% 74%, #3d6fbb 74% 92%, transparent 92%) 50% 47% / 88% 18% no-repeat,
    linear-gradient(90deg, transparent 0 17%, #667278 17% 30%, transparent 30% 40%, #7d6960 40% 61%, transparent 61% 70%, #59636a 70% 84%, transparent 84%) 50% 23% / 100% 19% no-repeat,
    linear-gradient(180deg, #b9e0e5 0 38%, #a8a79d 38% 72%, #287f9f 72% 100%);
}

.track-card-locked .track-card-preview {
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.12) 0 9px, transparent 9px 18px),
    #aebfc7;
}

.track-card-cliffside .track-card-difficulty {
  background: #82dfd8;
}

.track-card-harbor .track-card-difficulty {
  background: #ffb778;
}

@media (prefers-reduced-motion: reduce) {
  .track-card-preview svg {
    filter: none;
  }
}