/* ---------- Tryb Trasa: karta na starcie, ekran gry, wynik, podsumowanie ---------- */

/* Karta na ekranie startowym (ten sam układ co wyzwanie dnia, akcent niebieski) */
.route-card {
  background-image: linear-gradient(135deg, rgba(110, 170, 255, 0.12), transparent 55%), url("ui/leather-dark.jpg");
  filter: drop-shadow(0 0 16px rgba(110, 170, 255, 0.2)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.route-card-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 14px; }
.route-card-action { display: flex; flex-direction: column; gap: 10px; }
.route-desc { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.route-desc strong { color: var(--gold); }
.route-card-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.route-card-buttons .btn { flex: 1 1 150px; padding-left: 16px; padding-right: 16px; }
.route-card-top { padding-top: 12px; border-top: 1px solid rgba(213, 191, 116, 0.3); }
.route-top-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px;
  font-size: 0.75rem; color: var(--gold-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
}
.route-top-head select { font-size: 0.8rem; padding: 4px 8px; letter-spacing: 0; text-transform: none; }
.route-card-top .leaderboard-list li { padding: 5px 10px; }

/* Ekran gry */
.route-screen { padding: calc(var(--header-h) + 52px) 16px 56px; }
.route-wrap { width: min(980px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 46px; }
.route-screen.busy { cursor: progress; }
.route-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: -14px; }
.route-bar .hud-item { min-width: 84px; padding: 4px 16px 5px; }
.route-bar .hud-value { font-size: 1.05rem; }
#routeScore { color: var(--gold); }

/* Start i cel */
.route-ends-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: -14px; }
.route-arrow { align-self: center; font-size: 1.8rem; color: var(--gold-2); text-shadow: 0 2px 2px #000; }
.route-end {
  display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; min-width: 0; text-align: left;
  color: var(--text); font: inherit; cursor: zoom-in; border-radius: 8px; border: 1px solid #0c0d0d;
  background: linear-gradient(#2e2b2c, #1a181b); box-shadow: inset 0 0 0 1px #5d5a58, inset 0 0 0 3px #0c0d0d;
  transition: filter 0.15s, box-shadow 0.15s;
}
.route-end:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d; }
.route-end-img {
  display: block; width: 100%; height: 170px; object-fit: contain; border-radius: 4px; background: radial-gradient(ellipse at 50% 40%, #2a2230, #0c0d0d); /* tło poza mapą: ciemny fiolet zamiast czarnych pasów */
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #5e5b5b;
}
.route-end-info { display: flex; flex-direction: column; gap: 1px; padding: 0 4px; }
.route-end-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-2); }
.route-end:last-child .route-end-label { color: var(--green-2); }
.route-end-name { color: var(--title); font-size: 1.05rem; overflow-wrap: anywhere; text-shadow: 0 1px 1px #000; }
.route-end-size { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Bieżąca lokacja, okruszki, kafelki sąsiadów */
.route-at { margin: 0 0 8px; color: var(--text-2); font-size: 1rem; }
.route-at strong { color: var(--gold); font-size: 1.25rem; font-family: var(--font-display); overflow-wrap: anywhere; }
.route-crumbs { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; padding: 0; margin: 0 0 12px; font-size: 0.84rem; }
.route-crumbs li { color: var(--muted); }
.route-crumbs li + li::before { content: "➜"; margin: 0 7px; color: var(--gold-3); }
.route-crumbs li.current { color: var(--title); font-weight: 700; }
.route-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.route-msg { min-height: 1.3em; margin: 4px 0 6px; font-size: 0.9rem; color: var(--text-2); }
.route-msg.error { color: var(--red); font-weight: 700; }
.route-sub { margin: 4px 0 10px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-2); }
.route-neighbors {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0;
  max-height: 460px; overflow-y: auto; padding: 4px;
}
.route-tile {
  display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; min-height: 54px; padding: 8px 12px; text-align: left;
  color: var(--text); font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid #0c0d0d;
  background: linear-gradient(#2e2b2c, #1a181b); box-shadow: inset 0 0 0 1px #5d5a58, inset 0 0 0 3px #0c0d0d;
  transition: transform 0.1s, filter 0.15s, box-shadow 0.15s;
}
.route-tile:hover, .route-tile:focus-visible {
  filter: brightness(1.15); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px #0c0d0d;
}
.route-tile-name { font-weight: 700; color: var(--title); overflow-wrap: anywhere; text-shadow: 0 1px 1px #000; }
.route-tile-size { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.route-tile.visited { opacity: 0.6; }
.route-tile.visited .route-tile-size { color: var(--gold-3); }

/* Tryb bez listy */
.route-hard { display: flex; flex-direction: column; gap: 6px; }
.route-search { position: relative; max-width: 520px; }
.route-search .suggestions { top: calc(100% + 6px); bottom: auto; }
.route-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* Wynik trasy: porównanie z najkrótszą */
.route-result { text-align: center; }
.route-result .result-points { margin-bottom: 6px; }
.route-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; margin: 14px 0 18px; }
.route-compare h3 { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-2); }
.route-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.route-steps li {
  counter-increment: st; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 6px 10px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.38); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(174, 161, 161, 0.2);
}
.route-steps li::before { content: counter(st) "."; flex: none; min-width: 1.4em; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.route-steps .step-name { flex: 1; min-width: 0; color: var(--title); overflow-wrap: anywhere; }
.route-steps .mark { flex: none; order: 3; font-weight: 800; }
.route-steps li.on { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(77, 200, 60, 0.55); }
.route-steps li.on .mark { color: var(--green); }
.route-steps li.off { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(241, 100, 98, 0.55); }
.route-steps li.off .mark { color: var(--red); }
.route-steps li.off .step-name { color: #f3b1af; }
.route-steps li.missed { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(237, 219, 94, 0.55); }
.route-steps li.missed .mark { color: var(--gold); }

/* Podsumowanie */
.route-summary { text-align: center; width: min(640px, 100%); align-self: center; }

/* Powiększona mapa */
.route-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.92); }
.route-lightbox-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
  color: var(--title); font-weight: 700; background: #1c1a1e; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}
.route-lightbox-map { position: relative; flex: 1; min-height: 0; }
.route-lightbox-map .pz { width: 100%; height: 100%; }

@media (max-width: 640px) {
  .route-screen { padding: calc(var(--header-h) + 40px) 8px 40px; }
  .route-wrap { gap: 38px; }
  .route-bar .hud-item { min-width: 0; padding: 3px 10px 4px; }
  .route-bar-mode { display: none; }
  .route-ends-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .route-arrow { display: none; }
  .route-end-img { height: 100px; }
  .route-end-name { font-size: 0.92rem; }
  .route-neighbors { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 56vh; }
  .route-compare { grid-template-columns: 1fr; }
  .route-actions .btn { flex: 1 1 130px; }
}