/* =========================================================
   Pozostałe style bloków LM (detale widoków)
   Baza + wspólne reguły znajdują się teraz w assets/css/blocks/root.css
   ========================================================= */

/* ====== HEROES ====== */
.LM_BLOCK_PRIMARY_HEROES {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: .2rem var(--lm-gutter) !important;
    font-family: var(--lm-font) !important;
}

.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE {
    position: relative !important;
    width: 3.2rem !important;
    height: 3.2rem !important;
    margin: .18rem !important;
    flex: 0 0 auto !important;
}

.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE {
    position: relative !important;
}

/* ramka pełny obszar */
.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE_FRAME {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    object-fit: contain !important;
}

/* bohater 86% WYŚRODKOWANY absolutem */
.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE_IMG {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 86% !important;
    height: 86% !important;
    object-fit: contain !important;
    cursor: pointer !important;
    z-index: 1 !important;
}

/* Elementy sterowane globalnie */
.toggle-img,
.toggle-frame {
  transition: filter .15s linear;
}

/* IMG: domyślnie szaro, po zaznaczeniu kolor */
.toggle-img { filter: grayscale(1); }
.toggle-img.is-selected { filter: grayscale(0); }

/* FRAME: domyślnie pół-szaro (.5), po zaznaczeniu kolor */
.toggle-frame { filter: grayscale(.7); }
.toggle-frame.is-selected-frame { filter: grayscale(0); }

/* Preferencje dostępności */
@media (prefers-reduced-motion: reduce) {
  .toggle-img, .toggle-frame { transition: none; }
}





/* ====== CHOOSE IMAGE – ikona w kolumnie 1 (secondary / tertiary) ====== */
.LM_BLOCK_SECONDARY_ITEM_CHOOSE_IMAGE_COL01_ICON,
.LM_BLOCK_TERTIARY_ITEM_CHOOSE_IMAGE_COL01_ICON {
    display: grid !important;
    place-items: center !important;
    width: var(--lm-col-icon) !important;
    height: var(--lm-col-icon) !important;
    line-height: 0 !important;
    font-size: .8rem !important;
}






















/* =========================================================
   Kolory grade + font + obwódka tekstu
   (wkleić na koniec istniejącego CSS)
   ========================================================= */
/* Wszystkie napisy w drugim modalu (kuźni) – font + obwódka */
.Forge_Content,
.Forge_Content * {
    font-family: var(--lm-font);
    /* Safari/iOS (primary) */
    /* -webkit-text-stroke: var(--text-outline-w) #000; */
    -webkit-text-fill-color: currentColor;
    /* Fallback (pozostałe przeglądarki) */
    text-shadow:
        0 0.025px 0 #000, 0 -0.025px 0 #000,
        0.025px 0 0 #000, -0.025px 0 0 #000,
        0.025px 0.025px 0 #000, -0.025px 0.025px 0 #000,
        0.025px -0.025px 0 #000, -0.025px -0.025px 0 #000;
}

/* Nazwa itemu – domyślnie kolor Common */
/*  */

/* Przełączanie koloru nazwy po grade (sterowane data-grade na .Forge_Content) */
.Forge_Content[data-grade="Common"] .Item_Name {
    color: var(--grade-color-default);
}

.Forge_Content[data-grade="Uncommon"] .Item_Name {
    color: var(--grade-color-uncommon);
}

.Forge_Content[data-grade="Rare"] .Item_Name {
    color: var(--grade-color-rare);
}

.Forge_Content[data-grade="Epic"] .Item_Name {
    color: var(--grade-color-epic);
}

.Forge_Content[data-grade="Legendary"] .Item_Name {
    color: var(--grade-color-legendary);
}

.Forge_Content[data-grade="Mythic"] .Item_Name {
    color: var(--grade-color-mythic);
}



.HEROES_LIST,
.FAMILIARS_LIST {
    /* border: 1px dashed #CCC; */
    position: relative;
    margin-right: 50px;
}

.HEROES_LIST>div,
.FAMILIARS_LIST>div {
    display: flex;
    background: transparent;
    position: absolute;
    height: 60px;
    width: 60px;
    font-size: 0.7em;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.HEROES_LIST>div>div,
.FAMILIARS_LIST>div>div {
    display: flex;
    position: absolute;
    height: 50px;
    width: 50px;
    align-items: end;
    align-content: center;
    justify-content: center;
    justify-items: center;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

}

/* tylko dla podpisów pod familiarsami */
.FAMILIARS_LIST > div > div > span{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
  font-weight: 700;
  font-size: 0.55rem;
  color: #000;                           /* czarny tekst */
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.95);  /* bardzo cienki biały obrys (Safari/Chromium) */
  text-shadow:
    0 0 0.6px rgba(255,255,255,.95),     /* subtelne białe halo */
    0 0 1.2px rgba(255,255,255,.65);     /* leciutkie wzmocnienie */
  margin: 0;
}

/* Fallback dla przeglądarek bez -webkit-text-stroke (np. Firefox) */
@supports not (-webkit-text-stroke: 1px black){
  .FAMILIARS_LIST > div > div > span{
    text-shadow:
      0 0 0.6px rgba(255,255,255,.95),
      0 0 1.2px rgba(255,255,255,.65),
      .25px .25px 0 rgba(255,255,255,.85),
      -.25px .25px 0 rgba(255,255,255,.85),
      .25px -.25px 0 rgba(255,255,255,.85),
      -.25px -.25px 0 rgba(255,255,255,.85);
  }
}


.FAMILIARS_LIST > div > div > span{
  background: rgba(255, 255, 255, 0.75);   /* kolor + przezroczystość */
  padding: 0 .38em;              /* marginesy w poziomie */
  border-radius: .35em;          /* lekko zaokrąglone */
  display: inline-block;         /* żeby tło trzymało się tekstu */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* ładnie zawija na 2 linie */
}




.HEROES_LIST>.ss-placeholder-child,
.FAMILIARS_LIST>.ss-placeholder-child {
    background: transparent;
    border: 0.5px dotted rgba(0, 17, 255, 0.788);
}


/* ukrycie niezależne od cudzych !important */
.lm-hidden {
    display: none !important;
}

/* Stała animacja (zostaje na elemencie na stałe) */
.lm-fade {
    transition: filter .15s linear, opacity .15s linear;
    will-change: filter, opacity;
}

/* Stan wygaszony (włącz/wyłącz – to będzie animowane dzięki .lm-fade) */
.lm-dim {
    filter: grayscale(100%);
    opacity: .55 !important;
}


.LM_BLOCK_TRAPS {
    grid-template-columns: repeat(2, var(--lm-col-icon)) repeat(3, calc(var(--lm-col-icon) / 1.2)) calc(var(--lm-col-icon) / 1.6) 1fr var(--lm-col-end) !important;
    grid-template-rows: repeat(4, var(--lm-col-icon)) !important;
    column-gap: calc(var(--lm-col-icon) / 10) !important;
    padding-left: 0 !important;
}





/* ====================================================================== */
/* PANEL Z TABELĄ – akordeon + „TV”                                      */
/* ====================================================================== */
.gf_mission_info_primary_div {
    display: grid;
    grid-template-columns: repeat(3, 1fr) repeat(5, var(--gf-league-w));
    column-gap: 0;
    row-gap: 0;

    box-sizing: border-box;
    padding: var(--lm-padY) var(--lm-padX) !important;
    margin: .2rem var(--lm-gutter) !important;

    /* animowane marginesy (by odstęp zmieniał się natychmiast) */
    margin-top: .6rem !important;
    margin-bottom: .8rem !important;

    font-family: var(--lm-font) !important;
    border-radius: var(--lm-rad) !important;
    background: var(--lm-primary-bg-enabled);
    border: .05rem solid var(--lm-primary-border-enabled);
    border-left-width: .45rem;
    box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .35), 0 0 0 .09375rem rgba(0, 0, 0, .35);

    /* stan zamknięty */
    max-height: 0;
    /* animowane w keyframes */
    opacity: 0;
    transform: translateY(-.5rem);
    overflow: hidden;

    will-change: max-height, opacity, transform;
    contain: layout paint;

    /* nie animujemy tu max-height – robią to keyframes TV */
    transition: opacity .25s ease, transform .5s cubic-bezier(.16, 1, .3, 1);

    z-index: 1;
}

.gf_mission_info_primary_div.--show {
    max-height: var(--gf-open-max);
    opacity: 1;
    transform: translateY(0);
}

/* Komórki tabeli */
.cell {
    background-color: var(--gf-cell-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
}

.header {
    font-weight: 800;
    min-height: var(--gf-header-h);
}

.body {
    font-weight: 500;
    text-align: center;
}

/* kolumny 1..3 */
.points {
    border-left: var(--gf-bw) solid var(--gf-border);
}

.amount,
.time {
    border-left: var(--gf-bw) dotted var(--gf-border);
}

.body.points,
.body.amount,
.body.time {
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

.header.points,
.header.amount,
.header.time {
    border-top: var(--gf-bw) solid var(--gf-border);
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

/* kolumny lig */
.league {
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    border-left: var(--gf-bw) solid var(--gf-border);
}

.header.league {
    border-top: var(--gf-bw) solid var(--gf-border);
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

.body.league {
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

.league.master {
    border-right: var(--gf-bw) solid var(--gf-border);
}

.league.noimage {
    border-right: var(--gf-bw) solid var(--gf-border);
}

/* ikony nagłówków lig */
.header.league.beginner {
    background-image: url('../assets/images/guildFest/league/01.webp');
}

.header.league.intermediate {
    background-image: url('../assets/images/guildFest/league/02.webp');
}

.header.league.advanced {
    background-image: url('../assets/images/guildFest/league/03.webp');
}

.header.league.expert {
    background-image: url('../assets/images/guildFest/league/04.webp');
}

.header.league.master {
    background-image: url('../assets/images/guildFest/league/05.webp');
}

/* „check” w wierszach */
.body.league.active {
    background-image: url('../assets/images/guildFest/league/00.webp');
}

/* zaokrąglenie dolnego prawego rogu */
.body.league.master.last {
    border-bottom-right-radius: var(--lm-rad);
}

.league.noimage.last {
    border-right: var(--gf-bw) solid var(--gf-border);
}

.gf_mission_info_primary_div .cell.header.league,
.gf_mission_info_primary_div .cell.body.league {
  box-sizing: border-box;
  padding: var(--lm-league-icon-pad, 2%); /* 5% z każdej strony ≈ 90% pola */
  background-origin: content-box;         /* liczenie od content-box (bez paddingu) */
  background-clip: content-box;           /* nie maluj pod paddingiem */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;               /* zachowaj proporcje */
  display: flex;                          /* jeśli jeszcze nie masz */
  align-items: center;
  justify-content: center;
}
.gf_mission_info_primary_div .cell.header.league {
  box-sizing: border-box;
  padding: var(--lm-league-icon-pad, 5%); /* 5% z każdej strony ≈ 90% pola */
  background-origin: content-box;         /* liczenie od content-box (bez paddingu) */
  background-clip: content-box;           /* nie maluj pod paddingiem */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;               /* zachowaj proporcje */
  display: flex;                          /* jeśli jeszcze nie masz */
  align-items: center;
  justify-content: center;
}


/* rog i klipowanie na krawędzi */
.gf_mission_info_primary_div .header.points          { border-top-left-radius: var(--lm-rad); }
.gf_mission_info_primary_div .header.league.master   { border-top-right-radius: var(--lm-rad); }
.gf_mission_info_primary_div .body.points.last       { border-bottom-left-radius: var(--lm-rad); }
/* RB już masz, ale dla spójności zostawiamy: */
.gf_mission_info_primary_div .body.league.master.last{ border-bottom-right-radius: var(--lm-rad); }

.gf_mission_info_primary_div .header.points,
.gf_mission_info_primary_div .header.league.master,
.gf_mission_info_primary_div .body.points.last,
.gf_mission_info_primary_div .body.league.master.last {
  overflow: hidden;
  background-clip: padding-box;
}







/* ====================================================================== */
/* KLASY ANIMACJI                                                         */
/* ====================================================================== */
.animate__animated {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* TV ON – rośnie max-height i marginesy */
@-webkit-keyframes tvOn {
    0% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0; */
        /* margin-bottom: 0; */
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translateY(-.5rem) scaleY(0) scaleX(.6);
    }

    35% {
        max-height: calc(var(--gf-open-max) * .15);
        opacity: .5;
        /* margin-top: .2rem; */
        /* łagodny start marginesów */
        /* margin-bottom: .25rem; */
        -webkit-transform: translateY(0) scaleY(.02) scaleX(.4);
    }

    65% {
        max-height: calc(var(--gf-open-max) * .75);
        opacity: .75;
        /* margin-top: .45rem; */
        /* margin-bottom: .65rem; */
        -webkit-transform: scaleY(1.08) scaleX(1.02);
    }

    100% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem; */
        /* twoje docelowe wartości */
        /* margin-bottom: .8rem; */
        -webkit-transform: scaleY(1) scaleX(1);
    }
}

@keyframes tvOn {
    0% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0; */
        /* margin-bottom: 0; */
        transform-origin: 50% 0%;
        transform: translateY(-.5rem) scaleY(0) scaleX(.6);
    }

    35% {
        max-height: calc(var(--gf-open-max) * .15);
        opacity: .5;
        /* margin-top: .2rem; */
        /* margin-bottom: .25rem; */
        transform: translateY(0) scaleY(.02) scaleX(.4);
    }

    65% {
        max-height: calc(var(--gf-open-max) * .75);
        opacity: .75;
        /* margin-top: .45rem; */
        /* margin-bottom: .65rem; */
        transform: scaleY(1.08) scaleX(1.02);
    }

    100% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem; */
        /* margin-bottom: .8rem; */
        transform: scaleY(1) scaleX(1);
    }
}



.animate__tvOn {
    -webkit-animation-name: tvOn;
    animation-name: tvOn;
}

/* TV OFF – maleje max-height i marginesy równocześnie */
@-webkit-keyframes tvOff {
    0% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem;
        margin-bottom: .8rem; */
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    }

    40% {
        max-height: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        -webkit-transform: translateY(-.5rem) scaleY(.02) scaleX(.4);
    }

    100% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translateY(-.9rem) scaleY(0) scaleX(.2);
    }
}

@keyframes tvOff {
    0% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem;
        margin-bottom: .8rem; */
        transform-origin: 50% 50%;
        transform: translateY(0) scaleY(1) scaleX(1);
    }

    40% {
        max-height: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        transform: translateY(-.5rem) scaleY(.02) scaleX(.4);
    }

    100% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        transform-origin: 50% 0%;
        transform: translateY(-.9rem) scaleY(0) scaleX(.2);
    }
}

.animate__tvOff {
    -webkit-animation-name: tvOff;
    animation-name: tvOff;
}


/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        -webkit-animation: none !important;
        animation: none !important;
    }
}


.gf_mission_info_primary_div {
    display: none;
}

.gf_mission_info_primary_div.--show {
    display: grid;
}

.no-grid-rows {
    grid-auto-rows: 1fr !important;
}



/* bazowa legenda */
.ee-range-legend {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    /* max-width:880px; */
    margin: 0;
    /* w kaflu nie chcemy dodatkowych marginesów */
}

.ee-top {
    position: relative;
    width: 100%;
    margin-bottom: .45rem;
}

.ee-top__ticks {
    position: relative;
    height: 34px;
}

/* było 22px → wyżej, czytelniej */
.ee-top__tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    font-size: .8rem;
    line-height: 1.1;
    color: #cbd5e1;
}

.ee-top__tick::after {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    margin: .125rem auto 0 auto;
    background: #94a3b8;
    opacity: .9;
}

.ee-top__tick.--start {
    text-align: left;
    transform: none;
}

.ee-top__tick.--end {
    text-align: right;
    transform: translateX(-100%);
}

/* pasek zakresów (kolumny ustawiasz inline w PHP przez --ee-left/mid/right) */
.ee-bar {
    display: grid;
    grid-template-columns: var(--ee-left) var(--ee-mid) var(--ee-right);
    width: 100%;
    height: 12px;
    /* wyższy bar */
    border-radius: 999px;
    overflow: visible;
    margin: .2rem 0 .55rem;
}

.ee-seg {
    height: 100%;
}

.ee-seg--left {
    background: #ef4444;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.ee-seg--mid {
    background: #16a34a;
    position: relative;
    color: #16a34a;
    /* currentColor dla nawiasów SVG */
}

.ee-seg--right {
    background: #ef4444;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

/* nawiasy otaczające zielony zakres */
.ee-parens {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 40px;
    /* większe, żeby nie wchodziły w bar */
    pointer-events: none;
}

/* podpisy pod paskiem */
.ee-labels {
    display: grid;
    grid-template-columns: var(--ee-left) var(--ee-mid) var(--ee-right);
    width: 100%;
    margin-top: .15rem;
}

.ee-label {
    font-size: .65rem;
    text-align: center;
    line-height: 1.15;
}

.ee-label--red {
    color: #000000;
}

.ee-label--green {
    color: #000000;
    font-weight: 600;
}



/* 2) więcej miejsca na ticki + dwupoziomowe etykiety */
.ee-top__tick {
    font-size: .65rem;
    line-height: 1.1;
}

.ee-top__tick.--up {
    top: -4px;
}

/* górny rząd */
.ee-top__tick.--down {
    top: 18px;
}

/* dolny rząd */
/* pasek półprzezroczysty */
.ee-seg {
    opacity: .75;
}

/* ticki: dwa warianty wyrównania przy tym samym X */
.ee-top__ticks {
    height: 14px;
}

/* więcej miejsca na opisy nad barem */
.ee-top__tick.--left {
    transform: translateX(-100%);
    text-align: right;
    padding-right: 4px;
}

.ee-top__tick.--right {
    transform: translateX(0%);
    text-align: left;
    padding-left: 4px;
}

/* --start i --end zostają jak masz (na krawędziach) */



.LM_RG_IMG {
    cursor: pointer !important;
    display: inline-block !important;
    inline-size: var(--lm-col-icon, 3rem) !important;
    block-size: var(--lm-col-icon, 3rem) !important;
    --g: 0 !important;
    --s: 1 !important;
    --b: 1 !important;
    --o: 1 !important;

    filter: grayscale(var(--g)) saturate(var(--s)) brightness(var(--b)) !important;
    opacity: var(--o) !important;

    transition: filter .25s ease, opacity .25s ease !important;
    will-change: filter, opacity !important;
    user-select: none !important;
}

.LM_RG_IMG.is-off {
    --g: 1 !important;
    --s: .6 !important;
    --b: .95 !important;
    --o: .65 !important;
}

.LM_RG_IMG.is-on {
    --g: 0 !important;
    --s: 1 !important;
    --b: 1 !important;
    --o: 1 !important;
}

.LM_RG_IMG:focus-visible {
    outline: .14rem solid var(--lm-primary-border, #6cf) !important;
    outline-offset: .12rem !important;
    border-radius: .35rem !important;
}



/* ===== MONSTERS — full CSS (mirror HEROES, stany is-on/is-off + auto-sync) ===== */

/* Kontener + tokeny rozmiaru i przygaszenia */
.LM_BLOCK_PRIMARY_MONSTERS {
  /* gdzie w siatce + typowy wygląd listy */
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: .2rem var(--lm-gutter) !important;
  font-family: var(--lm-font) !important;

  /* lokalne tokeny (zmieniaj bez ruszania reszty) */
  --mon-tile: 3.2rem;
  --mon-gap:  .18rem;

  /* dimming */
  --mon-dim-gray:    1;      /* 0..1  — skala szarości */
  --mon-dim-sat:     .25;    /* 0..n  — nasycenie OFF */
  --mon-dim-bright:  .85;    /* 0..n  — jasność OFF */
  --mon-dim-opacity: .80;    /* 0..1  — przezroczystość OFF */
  --mon-dim-scale:   .99;    /* skala OFF (oba elementy) */
  --mon-dim-dur:     180ms;  /* czas przejść */
}

/* Pojedynczy kafel */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE {
  position: relative !important;
  width: var(--mon-tile) !important;
  height: var(--mon-tile) !important;
  margin: var(--mon-gap) !important;
  flex: 0 0 auto !important;
}

/* Ramka — pełny obszar */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  object-fit: contain !important;
  transform-origin: center center !important;
}

/* Obraz — 86% i wyśrodkowany absolutem */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
}

/* Płynne przejścia dla obu warstw */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG,
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
  transition:
    filter    var(--mon-dim-dur) ease,
    opacity   var(--mon-dim-dur) ease,
    transform var(--mon-dim-dur) ease !important;
  will-change: filter, opacity, transform;
}

/* === Fallback: ręczne stany na elementach (działa wszędzie) === */
/* OFF: przygaszone + delikatna skala (oba elementy) */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG.is-off {
  filter: grayscale(var(--mon-dim-gray))
          saturate(var(--mon-dim-sat))
          brightness(var(--mon-dim-bright)) !important;
  opacity: var(--mon-dim-opacity) !important;
  transform: translate(-50%, -50%) scale(var(--mon-dim-scale)) !important; /* centrowanie zostaje */
}
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME.is-off {
  filter: grayscale(var(--mon-dim-gray))
          saturate(var(--mon-dim-sat))
          brightness(var(--mon-dim-bright)) !important;
  opacity: var(--mon-dim-opacity) !important;
  transform: scale(var(--mon-dim-scale)) !important; /* bez translate na ramce */
}

/* ON: pełny kolor, brak skali */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG.is-on {
  filter: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME.is-on {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Preferencje dostępności (wyłącza animacje) */
@media (prefers-reduced-motion: reduce) {
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG,
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
    transition: none !important;
  }
}

/* ===== Auto-sync IMG ⇄ FRAME — jeśli przeglądarka wspiera :has() ===== */
@supports selector(.x:has(.y)) {

  /* Domyślnie ON (zmienne na kaflu) */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE {
    --mon__filter: none;
    --mon__opacity: 1;
    --mon__scale-img: 1;
    --mon__scale-frame: 1;
  }

  /* Jeśli JAKAKOLWIEK warstwa ma .is-off → obie OFF */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_IMG.is-off),
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_FRAME.is-off) {
    --mon__filter: grayscale(var(--mon-dim-gray))
                   saturate(var(--mon-dim-sat))
                   brightness(var(--mon-dim-bright));
    --mon__opacity: var(--mon-dim-opacity);
    --mon__scale-img: var(--mon-dim-scale);
    --mon__scale-frame: var(--mon-dim-scale);
  }

  /* (opcjonalnie) Gdy któraś warstwa ma .is-on — wymuś ON */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_IMG.is-on),
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_FRAME.is-on) {
    --mon__filter: none;
    --mon__opacity: 1;
    --mon__scale-img: 1;
    --mon__scale-frame: 1;
  }

  /* Zastosuj zmienne do warstw (nadpisuje fallback dzięki kolejności) */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG {
    filter: var(--mon__filter) !important;
    opacity: var(--mon__opacity) !important;
    transform: translate(-50%, -50%) scale(var(--mon__scale-img)) !important;
  }
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
    filter: var(--mon__filter) !important;
    opacity: var(--mon__opacity) !important;
    transform: scale(var(--mon__scale-frame)) !important;
  }
}















.FAMILIAR_DETAILS_PANEL {
    margin-top: .6rem;
    padding: .6rem .8rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .8rem;
    background: rgba(0,0,0,.20);
    backdrop-filter: blur(3px);
}

.FAMILIAR_DETAILS_HDR {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.FAMILIAR_DETAILS_CLOSE {
    cursor: pointer;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    opacity: .8;
}
.FAMILIAR_DETAILS_CLOSE:hover { opacity: 1; }

.FAMILIAR_DETAILS_BODY {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: center;
}
.FAMILIAR_DETAILS_IMG {
    width: 64px; height: 64px; object-fit: contain; image-rendering: auto;
}
.FAMILIAR_DETAILS_TXT div { margin: .1rem 0; }

.FAMILIARS_LIST div[data-familiar-id].is-selected {
    outline: 2px solid rgba(255,255,255,.25);
    outline-offset: 2px;
    border-radius: .5rem;
}






/* Wnętrze modala z chowańcem */
.fam-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}

.fam-portrait {
  width: 144px;
  height: 144px;
  position: relative;
  border-radius: 16px;
  background: center/contain no-repeat var(--fam-frame, none);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

.fam-portrait-img {
  position: absolute;
  inset: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 12px;
}

.fam-meta > div { margin: 4px 0; }

.lm-fam-overlay {
  position: fixed;
  inset: 0;
  background: var(--lm-eq-overlay-bg);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

code.bank-cmd-usage { 
    color: rgb(238, 241, 51) !important;
    -webkit-text-fill-color:  rgb(238, 241, 51) !important;
    -webkit-text-stroke: .1px rgb(238, 241, 51) !important;    
} /* tekst komendy nadal żółty */
code.bank-cmd-usage .bracket,
code.bank-cmd-usage .cmd-prefix { 
    color: rgb(2, 255, 107) !important;
    -webkit-text-fill-color:  rgb(2, 255, 107) !important;
    -webkit-text-stroke: .1px rgb(2, 255, 107) !important;
}