/* ---------- Atlas odkryć i medale (atlas.js) ---------- */

/* Postęp */
.atlas-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.atlas-count { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold); text-shadow: 0 1px 1px #000; }
.atlas-pct { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.atlas-bar {
  height: 14px; border-radius: 7px; overflow: hidden; background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(174, 161, 161, 0.25);
}
.atlas-bar span {
  display: block; height: 100%; min-width: 2px; border-radius: 7px;
  background: linear-gradient(#fff2a6, #d5bf74 45%, #9a7a1f); box-shadow: 0 0 8px rgba(237, 219, 94, 0.4); transition: width 0.4s;
}
.atlas-sub { margin: 14px 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.atlas-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.atlas-pool {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 12px; font: inherit; text-align: left; cursor: pointer;
  color: var(--title); border: 0; border-radius: 8px; 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);
}
.atlas-pool:hover { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--gold-2); }
.atlas-pool .name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.atlas-pool .detail { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atlas-pool .atlas-bar { grid-column: 1 / -1; height: 8px; }

/* Siatka lokacji */
.atlas-grid-win { scroll-margin-top: calc(var(--header-h) + 12px); }
.atlas-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.atlas-controls input, .atlas-controls select { width: 100%; min-width: 0; }
.atlas-info { margin: 10px 0 8px; }
.atlas-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.atlas-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 6px 8px; border-radius: 8px;
  background: linear-gradient(#0c0d0d, #1c1a1e); box-shadow: var(--plate-shadow);
}
.atlas-tile.found:hover { box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d; }
.atlas-thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px;
  background: rgba(0, 0, 0, 0.55); box-shadow: 0 0 0 1px #000;
}
.atlas-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.atlas-thumb.loaded img { opacity: 1; }
.atlas-thumb.broken::after { content: "🗺️"; font-size: 1.6rem; opacity: 0.5; }
.atlas-name {
  min-height: 2.5em; padding: 0 2px; font-size: 0.82rem; font-weight: 700; line-height: 1.25; text-align: center; color: var(--title);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.atlas-tile.unknown { opacity: 0.55; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(174, 161, 161, 0.18); }
.atlas-tile.unknown .atlas-thumb { font-family: var(--font-display); font-size: 2rem; color: var(--muted); }
.atlas-tile.unknown .atlas-name { color: var(--muted); font-weight: 400; }
.atlas-empty { grid-column: 1 / -1; padding: 22px 8px; text-align: center; color: var(--text-2); line-height: 1.6; }
.atlas-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; }
.atlas-page { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Medale */
.medal { display: inline-block; font-size: 1.15rem; line-height: 1; vertical-align: middle; filter: drop-shadow(0 1px 1px #000); cursor: help; }
.mode-card .mode-best:has(.medal) { display: flex; align-items: center; gap: 4px; }
.mode-card .mode-best .medal { flex: none; margin-left: auto; font-size: 1.1rem; }
.atlas-medals { list-style: none; margin: 0; padding: 0; }
.atlas-medals li {
  display: flex; gap: 10px; align-items: center; padding: 7px 12px; margin-bottom: 5px; border-radius: 8px;
  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); color: var(--title);
}
.atlas-medals .name { flex: 0 0 210px; min-width: 0; font-weight: 700; }
.atlas-medals .detail { flex: 1; min-width: 0; color: var(--muted); font-size: 0.8rem; }
.atlas-medals li.empty .name { color: var(--muted); }
.atlas-medal-badge { flex: none; display: flex; align-items: center; gap: 6px; min-width: 96px; justify-content: flex-end; font-weight: 700; font-size: 0.85rem; }
.atlas-medals li.empty .atlas-medal-name { color: var(--muted); font-weight: 400; }
.atlas-medal-name.tier-gold { color: var(--gold); }
.atlas-medal-name.tier-silver { color: #d7dde2; }
.atlas-medal-name.tier-bronze { color: #d9955a; }

/* Podsumowanie gry: nowe lokacje i medal */
.atlas-summary {
  width: min(520px, 100%); margin: 12px auto 0; padding: 10px 14px; text-align: center; border-radius: 8px;
  background: rgba(0, 0, 0, 0.38); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(237, 219, 94, 0.35);
}
.atlas-summary p { margin: 0 0 6px; line-height: 1.5; color: var(--text-2); }
.atlas-summary .atlas-summary-medal { font-weight: 800; color: var(--gold); }
.atlas-summary-link { margin-top: 2px; }

@media (max-width: 640px) {
  .atlas-controls { grid-template-columns: 1fr 1fr; }
  .atlas-controls input { grid-column: 1 / -1; }
  /* 3 kolumny: strona 40 lokacji nie ciągnie się przez 20 ekranów */
  .atlas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .atlas-tile { padding: 4px 4px 6px; gap: 4px; }
  .atlas-name { font-size: 0.72rem; }
  .atlas-medals li { flex-wrap: wrap; gap: 2px 10px; }
  .atlas-medals .name { flex: 1 1 0; }
  .atlas-medals .detail { order: 3; flex-basis: 100%; }
  .atlas-pools { grid-template-columns: 1fr; }
}