/* Szatnia (stoisko w bazie): STAŁY rozmiar okna jak w rankingu, podgląd żołnierza i siatka próbek. Bazuje na klasach .rk-* z ranking.css. */
.rk-card.wr-card { width: min(92vw, 720px); height: min(88vh, 680px); max-height: none; }
.wr-body { overflow: hidden; flex-direction: column; gap: 10px; } /* przewija się tylko siatka (.wr-grid) */
.wr-preview { flex: none; display: flex; justify-content: center; height: clamp(120px, 22vh, 170px); }
.wr-preview canvas { height: 100%; width: auto; aspect-ratio: 6 / 5; max-width: 100%; background: linear-gradient(180deg, #2a2d3d, #1c1f2c); border: 3px solid var(--ink); border-radius: 16px; box-shadow: inset 0 0 22px rgba(0, 0, 0, .5); }
.wr-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.wr-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; align-content: start; grid-auto-rows: max-content; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 2px 2px 6px; }
/* telefon: mniejszy podgląd, niższe zakładki i zwarte kafle, żeby siatka miała miejsce na kilka rzędów z nazwami */
@media (max-width: 759px) {
  .wr-preview { height: clamp(96px, 16vh, 150px); }
  .wr-cats .rk-tab { min-height: 44px; padding: 4px 2px; } .wr-cats .rk-tab i { font-size: 15px; }
  .wr-item { padding: 6px 4px; gap: 3px; } .wr-item .wr-sw { width: 34px; height: 34px; }
}
/* pulpit (≥760 px) i niski poziomy ekran: podgląd po lewej, zakładki i siatka po prawej */
@media (min-width: 760px), (min-width: 560px) and (max-height: 520px) {
  .wr-body { flex-direction: row; gap: 14px; }
  .wr-preview { height: auto; width: 300px; align-self: flex-start; }
  .wr-preview canvas { width: 100%; height: auto; }
}
.wr-item { display: grid; justify-items: center; gap: 5px; min-width: 0; overflow: hidden; padding: 9px 6px 8px; font-size: 12px; letter-spacing: .3px; background: var(--steel-d); color: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.wr-item .wr-sw { display: block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.wr-item.on { border-color: var(--gold); box-shadow: 0 3px 0 var(--ink), 0 0 14px rgba(245, 197, 49, .45); }
.wr-item.lock { cursor: default; }
.wr-item.lock .wr-sw, .wr-item.lock .wr-nm { opacity: .38; filter: grayscale(.55); }
.wr-lk { font-size: 11px; color: #c5ccd8; }
.wr-nm { line-height: 1.1; text-align: center; }
.wr-nm, .wr-lk { max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* nazwa i warunek: do dwóch linii, nic nie wystaje z kafla */
/* siedem zakładek: siatka 4+3, ikona nad podpisem, podpis ucinany wielokropkiem, nic nie wychodzi poza krawędź; stała wysokość */
.id-cats.wr-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; flex: none; }
.wr-cats .rk-tab { flex-direction: column; gap: 2px; min-width: 0; min-height: 52px; padding: 6px 2px; box-sizing: border-box; font-size: 11px; letter-spacing: 0; }
@media (max-width: 640px) { .wr-cats .rk-tab { font-size: 10px; } }
@media (max-width: 340px) { .wr-cats .rk-tab { font-size: 9px; } }
.wr-cats .rk-tab i { display: block; font-size: 17px; line-height: 1; }
.wr-cats .rk-tab span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* stopka: Zapisz + komunikat w stałym pasku na dole okna; komunikat w jednej linii (stałe pole, okno się nie zmienia) */
.wr-foot { flex: none; padding: 8px 12px; background: rgba(0, 0, 0, .22); border-top: 3px solid var(--ink); }
.wr-foot .id-msg { min-width: 0; min-height: 22px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }