/* Ranking jako ksiega rekordow: dwie kartki z tekstury ksiazki z gry (druga odbita), nazwy piorem po
   brazowym tuszu, a przy zmianie kategorii kartka sie przewraca. Tylko na komputerze - na telefonie
   zostaje zwykly panel. */
#rkKsiega { display: none; }

@media (min-width: 761px) {

body.rk-ksiega #ranking > :not(#rkKsiega) { display: none !important; }
body.rk-ksiega #rkKsiega { display: block; }

body.ranking.rk-ksiega { --panel-szer: calc(var(--k, 2.4) * 292px + 36px); }
body.rk-ksiega #ranking {
  top: 50%;
  bottom: auto;
  right: 18px;
  width: calc(var(--k, 2.4) * 288px);
  height: auto;
  transform: translate(calc(100% + 60px), -50%);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
  pointer-events: none;
}
body.rk-ksiega.ranking #ranking { transform: translate(0, -50%); visibility: visible; }

.ks-ksiazka {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(var(--k, 2.4) * 180px);
  perspective: 2200px;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--ks-y, 0) * 4deg - 7deg)) rotateX(calc(var(--ks-x, 0) * -2deg + 2deg));
  transition: transform .35s ease-out;
  filter: drop-shadow(0 26px 30px rgba(20, 12, 4, .32));
  pointer-events: auto;
}

.ks-str {
  position: relative;
  flex: 1 1 0;
  width: 50%;
  height: 100%;
  font-family: Pix, ui-monospace, monospace;
  color: #3b2a1a;
}
.ks-str + .ks-str { margin-left: calc(var(--k, 2.4) * -3px); }

/* kartka: jedna strona z gui/book.png, lewa jest jej lustrzanym odbiciem */
.ks-papier, .ks-lica::before, .ks-grzbiet::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(mc/textures/gui/book.png) no-repeat;
  background-size: calc(var(--k, 2.4) * 256px) calc(var(--k, 2.4) * 256px);
  background-position: calc(var(--k, 2.4) * -20px) calc(var(--k, 2.4) * -1px);
  image-rendering: pixelated;
}
.ks-l .ks-papier, .ks-lica.l::before { transform: scaleX(-1); }
.ks-papier { width: calc(var(--k, 2.4) * 146px); height: 100%; right: auto; }
.ks-l .ks-papier { left: auto; right: 0; }

.ks-tr {
  position: absolute;
  top: calc(var(--k, 2.4) * 14px);
  bottom: calc(var(--k, 2.4) * 27px);
  left: calc(var(--k, 2.4) * 17px);
  right: calc(var(--k, 2.4) * 13px);
  font-size: calc(var(--k, 2.4) * 6.4px);
  display: flex;
  flex-direction: column;
}
.ks-l .ks-tr { left: calc(var(--k, 2.4) * 13px); right: calc(var(--k, 2.4) * 17px); }

.ks-tytul { display: flex; align-items: center; gap: calc(var(--k, 2.4) * 5px); margin-bottom: calc(var(--k, 2.4) * 2px); }
.ks-tytul img { width: calc(var(--k, 2.4) * 14px); height: calc(var(--k, 2.4) * 14px); image-rendering: pixelated; flex: none; }
.ks-tytul b { display: block; font-weight: 500; font-size: 1.35em; line-height: 1.05; letter-spacing: .01em; }
.ks-tytul small { display: block; font-size: .78em; color: #7a5a3a; }
.ks-kreska { height: calc(var(--k, 2.4) * 1px); margin: calc(var(--k, 2.4) * 2px) 0 calc(var(--k, 2.4) * 3px); background: linear-gradient(90deg, #7a5a3a 0 70%, transparent); opacity: .55; }

.ks-wiersz {
  display: grid;
  grid-template-columns: calc(var(--k, 2.4) * 11px) calc(var(--k, 2.4) * 12px) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--k, 2.4) * 3px);
  height: calc(var(--k, 2.4) * 17px);
  border-bottom: 1px dotted rgba(90, 62, 36, .38);
  font-size: 1em;
}
.ks-wiersz.podium { cursor: pointer; }
.ks-wiersz.podium:hover { background: rgba(120, 80, 30, .1); }
.ks-wiersz .twarz { width: calc(var(--k, 2.4) * 11px); height: calc(var(--k, 2.4) * 11px); border-radius: 0; box-shadow: 0 0 0 1px rgba(60, 38, 18, .55); }
.ks-miejsce {
  display: grid;
  place-items: center;
  width: calc(var(--k, 2.4) * 10px);
  height: calc(var(--k, 2.4) * 10px);
  font-size: .86em;
  color: #6f5030;
}
.ks-wiersz.m1 .ks-miejsce, .ks-wiersz.m2 .ks-miejsce, .ks-wiersz.m3 .ks-miejsce {
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
  background-size: 100% 100%;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px rgba(40, 24, 8, .6);
}
.ks-wiersz.m1 .ks-miejsce { background-image: url(mc/textures/block/gold_block.png); }
.ks-wiersz.m2 .ks-miejsce { background-image: url(mc/textures/block/iron_block.png); color: #2b2f38; text-shadow: none; }
.ks-wiersz.m3 .ks-miejsce { background-image: url(mc/textures/block/copper_block.png); }
.ks-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05em; color: #2e2012; }
.ks-nick.anon { font-style: italic; color: #7a5a3a; }
.ks-nick i { display: inline-block; width: .55em; height: .55em; margin-left: .45em; border-radius: 50%; background: #3a7d2c; vertical-align: .08em; }
.ks-wartosc { color: #8a1c1c; font-size: 1.02em; white-space: nowrap; }
.ks-wartosc small { font-size: .74em; color: #9a5a4a; margin-left: 1px; }
.ks-pusto { margin: calc(var(--k, 2.4) * 10px) 0; color: #7a5a3a; text-align: center; }

.ks-ty {
  margin-top: auto;
  padding-top: calc(var(--k, 2.4) * 2px);
  border-top: calc(var(--k, 2.4) * 1px) solid rgba(122, 90, 58, .5);
}
.ks-ty .ks-wiersz { border-bottom: 0; background: linear-gradient(90deg, rgba(224, 144, 0, .22), transparent); }
.ks-ty small.ks-et { display: block; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: #7a5a3a; }

.ks-dol {
  position: absolute;
  left: calc(var(--k, 2.4) * 14px);
  right: calc(var(--k, 2.4) * 14px);
  bottom: calc(var(--k, 2.4) * 11px);
  height: calc(var(--k, 2.4) * 11px);
  display: flex;
  align-items: center;
  gap: calc(var(--k, 2.4) * 4px);
  font-size: calc(var(--k, 2.4) * 6px);
}
.ks-p .ks-dol { left: calc(var(--k, 2.4) * 18px); right: calc(var(--k, 2.4) * 12px); }
.ks-l .ks-dol { left: calc(var(--k, 2.4) * 12px); right: calc(var(--k, 2.4) * 18px); }
.ks-dol span { flex: 1; text-align: center; font-size: .9em; color: #7a5a3a; }
.ks-kart {
  width: calc(var(--k, 2.4) * 11.5px);
  height: calc(var(--k, 2.4) * 6.5px);
  padding: 0;
  border: 0;
  background: url(mc/textures/gui/sprites/widget/page_forward.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  flex: none;
}
.ks-kart.wstecz { background-image: url(mc/textures/gui/sprites/widget/page_backward.png); }
.ks-kart:hover { background-image: url(mc/textures/gui/sprites/widget/page_forward_highlighted.png); }
.ks-kart.wstecz:hover { background-image: url(mc/textures/gui/sprites/widget/page_backward_highlighted.png); }
.ks-kart[disabled] { visibility: hidden; }

.ks-szukaj {
  flex: 1;
  min-width: 0;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid rgba(90, 62, 36, .6);
  background: transparent;
  color: #3b2a1a;
  font: inherit;
  font-size: calc(var(--k, 2.4) * 5.8px);
}
.ks-szukaj::placeholder { color: #9b7b58; }
.ks-szukaj:focus { outline: none; border-bottom-color: #8a1c1c; }

/* karteczka z zasadami uczciwych zabojstw wsunieta pod ksiazke */
.ks-zasady {
  position: relative;
  width: 78%;
  margin: calc(var(--k, 2.4) * -4px) auto 0;
  padding: calc(var(--k, 2.4) * 5px) calc(var(--k, 2.4) * 7px) calc(var(--k, 2.4) * 4px);
  background: #efe0bf;
  border: calc(var(--k, 2.4) * 1px) solid #8a6a46;
  box-shadow: 0 calc(var(--k, 2.4) * 2px) 0 #b89a70, 0 18px 24px rgba(20, 12, 4, .25);
  transform: rotate(-1.2deg);
  font-family: Pix, ui-monospace, monospace;
  font-size: calc(var(--k, 2.4) * 5.4px);
  color: #3b2a1a;
  pointer-events: auto;
  z-index: -1;
}
.ks-zasady[hidden] { display: none; }
.ks-zasady > b { display: block; font-weight: 500; font-size: 1.15em; margin-bottom: calc(var(--k, 2.4) * 2px); }
.ks-zasady ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: calc(var(--k, 2.4) * 1.2px); line-height: 1.3; color: #5a4128; }
.ks-zasady ul b { color: #3b2a1a; font-weight: 500; }

/* przewracana kartka: przod to stara strona, tyl to nowa strona po drugiej stronie */
.ks-kartka {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 5;
}
.ks-kartka.naprzod { right: 0; transform-origin: 0 50%; animation: ks-naprzod .85s cubic-bezier(.45, .05, .25, 1) forwards; }
.ks-kartka.wstecz { left: 0; transform-origin: 100% 50%; animation: ks-wstecz .85s cubic-bezier(.45, .05, .25, 1) forwards; }
.ks-kartka .lico { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: Pix, ui-monospace, monospace; color: #3b2a1a; }
.ks-kartka .lico.tyl { transform: rotateY(180deg); }
.ks-kartka .lico .ks-papier { position: absolute; }
@keyframes ks-naprzod { 0% { transform: rotateY(0) translateZ(0); } 50% { transform: rotateY(-90deg) translateZ(calc(var(--k, 2.4) * 6px)); } 100% { transform: rotateY(-180deg) translateZ(0); } }
@keyframes ks-wstecz { 0% { transform: rotateY(0) translateZ(0); } 50% { transform: rotateY(90deg) translateZ(calc(var(--k, 2.4) * 6px)); } 100% { transform: rotateY(180deg) translateZ(0); } }
@media (prefers-reduced-motion: reduce) { .ks-kartka { display: none; } .ks-ksiazka { transition: none; } }
}