/* The Courts and travel: the trip's little picture, a friend's flight to come along on, the map's
   ways there, the Sky Chart, the skiff, the forge and the crab pots. See public/js/courts.ts and
   courts_valley.ts. */
.ct-trip { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(12, 14, 30, .55); animation: ct-in .35s; transition: opacity .6s; cursor: pointer; }
.ct-trip.out { opacity: 0; }
.ct-trip-frame { padding: 6px; border-radius: 14px; background: #f4e6c4; border: 3px solid #8a6038; box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 40px rgba(255, 230, 170, .35); }
.ct-trip-portal .ct-trip-frame { background: #2a2050; border-color: #c8b8ff; box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 50px rgba(180, 150, 255, .6); }
.ct-trip-cv { display: block; width: min(86vw, 560px); height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; border-radius: 8px; }
.ct-trip-to { color: #fff6e0; font-size: 22px; font-weight: 700; text-shadow: 0 2px 0 #000; }
@keyframes ct-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) { .ct-trip-to { font-size: 18px; } }

.ct-offer { position: fixed; z-index: 32; left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 18px; border-radius: 14px; background: linear-gradient(#5a3a2a, #7a5434); border: 3px solid #f2c94c; color: #fff6e0; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); width: min(92vw, 420px); text-align: center; animation: pop .4s; }
.ct-offer span { font-size: 13px; color: #f4e2b8; }
.ct-offer .btns { display: flex; gap: 8px; margin-top: 4px; }

.ct-ways { margin-top: 8px; }
.ct-ways-h { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; margin-bottom: 2px; }
.ct-ways .row { align-items: center; padding: 4px 6px; }
.ct-way .big { font-size: 20px; }

.ct-chart { margin-top: 12px; padding-top: 8px; border-top: 2px dashed #d8c8a0; }
.ct-chart h4 { margin: 4px 0; }
.ct-road { margin-top: 8px; }
.ct-road .gh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-road .gh .sub { flex: 1; }
.ct-road.done { opacity: .92; border-color: #a8d088; }
.ct-scout { margin-top: 6px; padding: 4px 8px; border-radius: 8px; background: #fbf4e4; border: 1px dashed #c8b080; font-size: 13px; color: #5a4a3a; }
.ct-scout.ok { background: #eef8e4; border-color: #8ac06a; }

.ct-skiff h4 { margin: 10px 0 2px; }
.ct-skiff .row, .ct-chart .row { align-items: center; }
@media (max-width: 480px) {
  .ct-road .gh .sub { flex-basis: 100%; }
  .ct-offer { bottom: calc(150px + var(--safe-b)); }
}