.qeel--compact .qeelGroups .group span {
  display: inline-block;
  padding: 2px 4px;
  color: inherit;
  transition: color .30s ease, transform .30s ease;
}

.qeel--compact .qeelGroups .group:hover span {
  color: var(--biel);
  transform: translateY(-1px);
}

.qeel--compact .qeelPanelTitle {
  justify-content: flex-start;
  gap: 16px;
  font-family: var(--medieval);
  font-size: 22px;
  letter-spacing: 0;
  text-align: left;
}

.qeel--compact .qeelPanelTitle::before {
  display: none;
}

.qeel--compact .qeelPanelTitle::after {
  width: auto;
  height: 1px;
  flex: 1;
  margin: 0;
  background: rgba(216, 204, 201, .16);
  opacity: 1;
}

.qeel--compact {
  box-sizing: border-box;
  max-width: 1010px;
  margin: 42px auto;
  padding: 22px;
  color: var(--biel);
  background: var(--gradient);
  border: 1px solid var(--borderprofil);
}

.qeel--compact *,
.qeel--compact *::before,
.qeel--compact *::after {
  box-sizing: border-box;
}

/* Górny pasek: nowy mieszkaniec oraz cztery statystyki. */
.qeel--compact .qeelTop {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.qeel--compact .qeelWelcome,
.qeel--compact .qeelStats > div {
  min-width: 0;
  min-height: 64px;
  background: var(--gradient);
  border: 1px solid var(--borderprofil);
}

.qeel--compact .qeelWelcome {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
}

.qeel--compact .qeelStats {
  display: contents;
}

.qeel--compact .qeelDesc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.qeel--compact .qeelDesc > div,
.qeel--compact .qeelDesc > div a {
	  margin-bottom: 5 px;
  color: var(--biel);
  font-family: var(--medieval);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.5;
  text-decoration: none;
  text-transform: capitalize;
}

.qeel--compact .qeelDesc span {
  color: var(--biel);
  font-size: 10px;
  font-family: var(--fontp);
  letter-spacing: 1.5px;
	text-transform: uppercase;
}

.qeel--compact .qeel-newest-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  overflow: hidden;
  place-items: center;
  border: 0 !important;
  color: var(--qeel-text, #ded6d3);
  font-family: Georgia, serif;
  font-size: 14px;
  text-decoration: none;
}

.qeel--compact .qeel-newest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
	opacity: 0.80;
	filter: grayscale(100%);
}

.qeel--compact .qeelStats > div {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 7px;
  color: var(--biel);
  font-family: var(--fontp);
  font-size: 10px;
  letter-spacing: 1.7px;
  text-align: center;
  text-transform: uppercase;
}

.qeel--compact .qeelStats span {
  margin-bottom: 5 px;
  color: var(--biel);
  font-family: var(--medieval);
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1;
}

/* =========================================================
   REGIONY — jeden rząd, kolorowe kwadraty i herby
   ========================================================= */
.qeel--compact .qeelGroups .group.korona { --qeel-group-color: var(--korona); }
.qeel--compact .qeelGroups .group.reach { --qeel-group-color: var(--reach); }
.qeel--compact .qeelGroups .group.burza { --qeel-group-color: var(--burza); }
.qeel--compact .qeelGroups .group.polnoc { --qeel-group-color: var(--polnoc); }
.qeel--compact .qeelGroups .group.dorzecze { --qeel-group-color: var(--dorzecze); }
.qeel--compact .qeelGroups .group.dolina { --qeel-group-color: var(--dolina); }
.qeel--compact .qeelGroups .group.zachod { --qeel-group-color: var(--zachod); }
.qeel--compact .qeelGroups .group.dorne { --qeel-group-color: var(--dorne); }
.qeel--compact .qeelGroups .group.zelaznewyspy { --qeel-group-color: var(--zelaznewyspy); }
.qeel--compact .qeelGroups .group.essos { --qeel-group-color: var(--essos); }
.qeel--compact .qeelGroups .group.burza .qeelCrest::after {
  inset: 6px;
}
.qeel--compact .qeelGroups .group.korona .qeelCrest::after {
  inset: 10px;
}

.qeel--compact .qeelGroups .group.reach .qeelCrest::after {
  inset: 10px;
}

.qeel--compact .qeelGroups {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: start;
  margin: 30px 0 45px;
  padding: 8px 0;
  border: 0;
}

.qeel--compact .qeelGroups .group {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--qeel-muted, #9d9291);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.qeel--compact .qeelGroups .group::before {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 52px;
  height: 52px;
  content: "";
  background: var(--qeel-group-color);
  border: 1px solid color-mix(in srgb, var(--qeel-group-color) 74%, var(--borderprofil));
}

.qeel--compact .qeelGroups .group img,
.qeel--compact .qeelGroups .group .qeelCrest {
    position: relative;
    z-index: 1;
    display: block;
  width: 52px;
  height: 52px;
  padding: 10px;
  object-fit: contain;
    border: 0 !important;
}

/* Zwykłe <img> z HTML QEEL. */
.qeel--compact .qeelGroups .group img {
    filter: brightness(0) invert(.72);
    opacity: 1;
    transition: filter .18s ease, transform .18s ease;
}

/* Obsługa .qeelCrest, jeśli pozostał wcześniejszy skrypt z footer. */
.qeel--compact .qeelGroups .group .qeelCrest::after {
    position: absolute;
    inset: 10px;
    content: "";
    background: #b2b2b2;
    -webkit-mask: var(--qeel-crest-url) center / contain no-repeat;
    mask: var(--qeel-crest-url) center / contain no-repeat;
}

.qeel--compact .qeelGroups .group span {
  position: relative;
  z-index: 1;
  color: inherit;
  font-family: var(--fontp);
  font-size: 10px;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
}


.qeel--compact .qeelGroups .group:hover img {
    filter: brightness(0) invert(.9);
}

.qeel--compact .qeelGroups .group:hover .qeelCrest::after {
    background: #e2e2e2;
}

/* Dwa pełnoszerokie panele: obecni, a pod nimi aktywni w 48 h. */
.qeel--compact .qeelBottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 38px;
}

.qeel--compact .qeelOnline,
.qeel--compact .qeel48 {
  position: relative;
  min-height: 94px;
  padding: 28px 22px 16px;
  border: 1px solid var(--borderprofil) !important;
}

.qeel--compact .qeelOnline {
  grid-column: 1 / -1;
  grid-row: 1;
}

.qeel--compact .qeel48 {
  grid-column: 1 / -1;
  grid-row: 2;
}

.qeel--compact .qeelPanelTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  color: var(--biel);
  font-family: var(--medieval);
  font-size: 18px;
  font-weight: 100;
  letter-spacing: .9px;
  text-align: center;
  text-transform: lowercase;
}

.qeel--compact .qeelPanelTitle::before,
.qeel--compact .qeelPanelTitle::after {
  display: block;
  width: min(20%, 140px);
  height: 1px;
  flex: 0 1 min(20%, 140px);
  content: "";
  background: var(--borderprofil);
}

/* Tytuł jest osadzony w górnej krawędzi obramowania panelu. */
.qeel--compact .qeelOnline .qeelPanelTitle,
.qeel--compact .qeel48 .qeelPanelTitle {
  position: absolute;
  top: 0;
  left: 55px;
  z-index: 1;
  padding: 0 14px;
  background: var(--gradient);
  transform: translateY(-55%);
  white-space: nowrap;
}

.qeel--compact .qeelOnline .qeelPanelTitle::before,
.qeel--compact .qeelOnline .qeelPanelTitle::after,
.qeel--compact .qeel48 .qeelPanelTitle::before,
.qeel--compact .qeel48 .qeelPanelTitle::after {
  display: none;
}

.qeel--compact .qeel-online-avatars,
.qeel--compact .qeel-news-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 8px;
  margin-top: 11px;
  color: var(--biel);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.qeel--compact .qeel-activeonline-user,
.qeel--compact .qeel-active48-user {
  display: inline-flex;
  align-items: center;
}

.qeel--compact .qeel-activeonline-user a,
.qeel--compact .qeel-active48-user a {
  color: var(--biel);
  text-decoration: none;
	font-family: var(--fontp);
  white-space: nowrap;
	text-transform: uppercase;
	font-size: 13px;
}

.qeel--compact .qeel-user-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  color: var(--biel);
  line-height: 1;
  opacity: .75;
}

/* Klasa dodawana przez skrypt, gdy lista ma co najmniej pięć nicków. */
.qeel--compact .qeelListJustified {
  justify-content: space-between;
}

.qeel--compact .qeelListJustified .qeel-user-separator {
  margin: 0;
}