/* Skala cieplna .kafelek-1…5 (zielony -> czerwony, kontrast min. 4,5:1)
     stoi od 21.09.2026 w klasy-uzupelnienie.css, bo uzywa jej takze
     tabela nagrod glownych na /zdrapki. Tu zostaja tylko reguly siatki. */

  /* Kwadratowy kafelek — stały mniejszy rozmiar, siatka nie rozciąga do 1fr.
     Inline grid-template-columns:repeat(n,minmax(0,1fr)) rozciągał kafelki
     na całą szerokość (na desktopie ~158px). Cap + auto-fill = zwarte 56px. */
  .kafelek { aspect-ratio: 1 / 1; min-height: 0; }
  .mapa-cieplna .panel-hits .grid,
  .mapa-cieplna .panel-gap .grid,
  .mapa-cieplna .panel-ostatnie .grid,
  .mapa-dodatkowe-grid {
    grid-template-columns: repeat(auto-fill, 56px) !important;
    justify-content: center;
  }

  /* Próbka koloru w legendzie — obramowanie, bo najjaśniejszy stopień
     zlewa się z białym tłem */
  .probka {
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.15);
    display: inline-block;
    flex: 0 0 auto;
  }

  /* Zakładki bez JS — panel widoczny tylko gdy jego radio jest zaznaczone */
  .mapa-cieplna .panel-hits,
  .mapa-cieplna .panel-gap,
  .mapa-cieplna .panel-ostatnie,
  .mapa-cieplna .panel-zakres {
    display: none;
  }
  #widok-hits:checked ~ .panel-hits,
  #widok-gap:checked ~ .panel-gap,
  #widok-ostatnie:checked ~ .panel-ostatnie,
  #widok-zakres:checked ~ .panel-zakres {
    display: block;
  }

  #widok-hits:checked ~ div label[for="widok-hits"],
  #widok-gap:checked ~ div label[for="widok-gap"],
  #widok-ostatnie:checked ~ div label[for="widok-ostatnie"],
  #widok-zakres:checked ~ div label[for="widok-zakres"] {
    background-color: #334155;
    color: #FFFFFF;
    border-color: #334155;
  }

  .widok-radio:focus-visible + label {
    outline: 2px solid #334155;
    outline-offset: 2px;
  }

.mapa-zwarta{grid-template-columns:repeat(auto-fill,56px);justify-content:center}

.hm-zakres {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.hm-zakres__przyciski {display:flex;flex-wrap:wrap;gap:10px;flex-basis:100%}
.hm-zakres__jednostka {align-self:center;color:var(--tekst2)}
.hm-zakres .przycisk.przycisk--drugi {background:var(--tlo2);color:var(--tekst);border-color:var(--obramowanie)}
.hm-zakres .przycisk[aria-pressed="true"] {background:var(--gra-kolor);color:var(--gra-napis);border-color:var(--gra-kolor)}
.hm-zakres select,.hm-zakres input {font:inherit;color:var(--tekst);background:var(--tlo);border:1px solid var(--obramowanie);border-radius:6px;min-height:44px;padding:10px;max-width:100%}
.hm-zakres input {width:100px}
.hm-zakres__opis {flex-basis:100%;margin:0}