/* ==========================================================================
   User Karma Leaderboards — stiliai
   Spalvos/šriftai suderinti su User Karma Bar plugin'u (--ukb-* žymenys),
   kad abu elementai vienoje svetainėje atrodytų kaip viena dizaino sistema.
   ========================================================================== */

.ukl-widget {
    --ukl-bg: #ffffff;
    --ukl-fg: #16181c;
    --ukl-muted: #6b7280;
    --ukl-border: #e2e8f0;
    --ukl-muted-bg: #f4f4f5;
    --ukl-accent: #d99a00;
    --ukl-accent-fg: #ffffff;
    --ukl-accent-soft: #fff6e0;
    --ukl-accent-soft-hover: #fdedc0;
    --ukl-radius: 0;
    --ukl-radius-pill: 999px;
    --ukl-row-h: 27px;
    --ukl-header-h: 23px;
    /* Sumažinta nuo 5 iki 4 — lentelė užima mažiau vietos, kad apačioje
       visada liktų vietos "login"/tekstо blokui (žr. grid-template-rows
       minmax(38px, auto) žemiau). */
    --ukl-visible-rows: 4;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ukl-fg);
    background: transparent;
    max-width: 720px;

    /* Leidžiam widget'ui ištemptis per visą turimą aukštį (žr. .ukl-leaderboard-wrap
       žemiau — ten šis aukštis paduodamas toliau į lentelės konteinerį). */
    /* Grid vietoj vertikalaus flex: title lieka virš abiejų stulpelių,
       tabs (kairėje) ir panel/lentelė (dešinėje) stovi vienoje eilutėje
       greta — todėl tabs stulpelis automatiškai gauna LYGIAI tokį patį
       aukštį kaip pati lentelė. Prisijungimo kvietimas (login) turi savo
       atskirą eilutę TIK po dešiniuoju (panel) stulpeliu, kairėje pusėje
       po mygtukais tos eilutės tuščios (".") — taip login CTA lieka po
       lentele su vardais/statistika, o mygtukų aukštis nepriklauso nuo
       login CTA aukščio. .ukl-title / .ukl-tabs / .ukl-panel / .ukl-login-cta
       gauna savo grid-area nepriklausomai nuo jų tvarkos DOM'e. */
    display: grid;
    grid-template-columns: 170px 1fr;
    /* Login eilutei garantuojam bent 38px (minmax min riba), kad ji
       NIEKADA nebūtų "išstumta" už matomos srities, net jei mygtukai
       (tabs) ar lentelė (panel) norėtų daugiau vietos — vidurinė "1fr"
       eilutė gali susitraukti iki 0 (minmax(0,...)), nes ir tabs, ir
       panel viduje jau turi savo scroll/shrink mechanizmus. */
    grid-template-rows: auto minmax(0, 1fr) minmax(38px, auto);
    grid-template-areas:
        "title title"
        "tabs  panel"
        ".     login";
    column-gap: 14px;
    height: 100%;
    /* Griežta riba — widget'as niekada neišauga aukštesnis už tėvinį
       .plt-info-stats-card (250px), todėl kairė ir dešinė pusė visada
       lieka LYGIAI vienodo aukščio. */
    overflow: hidden;
}

.ukl-widget *,
.ukl-widget *::before,
.ukl-widget *::after {
    box-sizing: border-box;
}

.ukl-title {
    grid-area: title;
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ukl-fg);
}

/* ---- Kortelės / tabs viršuje --------------------------------------------- */

.ukl-tabs {
    grid-area: tabs;
    display: flex;
    /* Vertikali kolonėlė kairėje lentelės pusėje vietoj horizontalios
       eilutės virš lentelės. Grid eilutė "tabs" yra lygiai tokio pat
       aukščio kaip "panel" (lentelė), o kiekvienas .ukl-tab žemiau turi
       flex: 1 1 0 — todėl mygtukai kartu visada UŽPILDO visą šį aukštį,
       be jokio vidinio scrollbar'o (žr. overflow: visible žemiau). */
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    flex-shrink: 0;
    overflow: visible;
    margin-bottom: 0;
    padding-bottom: 0;
    /* Būtina, kad grid eilutė ("tabs panel") galėtų susitraukti iki
       turimos vietos, o ne prisitaikytų prie mygtukų min-height sumos —
       kitaip padidinus .ukl-tab min-height žemiau, visas widget'as
       išaugtų virš 250px ir "login" eilutė būtų nustumta už matomos
       srities. */
    min-height: 0;
}

.ukl-tab {
    position: relative;
    /* flex-grow/shrink: 1 su basis 0 — visi mygtukai kartu lygiomis
       dalimis užpildo TIKSLIAI tokį patį aukštį, kokio yra lentelė
       (žr. .ukl-tabs komentarą aukščiau), be tuščios vietos apačioje
       ir be scrollbar'o. min-height apsaugo, kad esant daug mygtukų
       jie nesusitrauktų mažiau nei patogu lietimui. */
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Didesnis mygtukas — patogesnis lietimui mobiliajame ekrane (min. 52px
       aukščio), tekstas/ikona lieka aiškiai matomi ir paspaudžiami. */
    padding: 13px 14px;
    background: var(--ukl-bg);
    border: 1px solid var(--ukl-border);
    border-radius: var(--ukl-radius);
    color: var(--ukl-fg);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Sujungti, be tarpo tarp mygtukų — kad dvigubos linijos tarp jų neatrodytų
   dvigubai storesnės, kiekvienas sekantis mygtukas savo viršutinę kraštinę
   „uždeda" ant ankstesnio apatinės per neigiamą margin (dabar vertikaliame
   sąraše), o hover/focus/active būsenos pakelia z-index, kad kraštinė
   matytųsi virš kaimynų. */
.ukl-tab + .ukl-tab {
    margin-top: -1px;
}

.ukl-tab:hover {
    background: var(--ukl-muted-bg);
    z-index: 1;
}

/* Kai kurios temos globaliai nustato "button:hover { color: transparent }" ar
   panašiai (tikintis savo specifinio "reveal" efekto), todėl paspaudus pelę
   ant mūsų kortelės raidės/ikona gali „dingti". Priverstinai grąžiname
   spalvą užvedus pelę, kad tekstas visada liktų matomas. */
.ukl-tab:hover,
.ukl-tab:hover .ukl-tab-label {
    color: var(--ukl-fg) !important;
}

.ukl-tab:hover .ukl-tab-icon {
    color: var(--ukl-muted) !important;
}

.ukl-tab.ukl-tab-active:hover,
.ukl-tab.ukl-tab-active:hover .ukl-tab-label {
    color: #fff !important;
}

.ukl-tab.ukl-tab-active:hover .ukl-tab-icon {
    color: var(--ukl-accent-fg) !important;
}

.ukl-tab:focus-visible {
    outline: 2px solid var(--ukl-accent);
    outline-offset: -2px;
    z-index: 2;
}

.ukl-tab-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ukl-radius);
    background: var(--ukl-muted-bg);
    color: var(--ukl-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ukl-tab-icon svg {
    width: 15px;
    height: 15px;
}

.ukl-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ukl-tab.ukl-tab-active {
    background: var(--ukl-fg);
    border-color: var(--ukl-fg);
    color: #fff;
    z-index: 3;
}

/* Paskutinio mygtuko apatinis border kartais nukertamas dėl .ukl-widget
   overflow:hidden + flex aukščio apvalinimo. Įprastas border-bottom
   ištrinamas ir pakeičiamas VIENA box-shadow linija (piešiama 1px į vidų
   nuo krašto), kad nesidubliuotų ir visada matytųsi. */
.ukl-tab:last-child {
    border-bottom-color: transparent;
    box-shadow: inset 0 -1px 0 var(--ukl-border);
}

.ukl-tab.ukl-tab-active:last-child {
    box-shadow: inset 0 -1px 0 var(--ukl-fg);
}

.ukl-tab.ukl-tab-active .ukl-tab-icon {
    background: var(--ukl-accent);
    color: var(--ukl-accent-fg);
}

/* ---- Lentelės panelis (su loading overlay) -------------------------------- */

.ukl-panel {
    grid-area: panel;
    position: relative;
    /* Grid eilutė "tabs panel" gauna visą likusį aukštį po title (žr.
       .ukl-widget grid-template-rows: auto 1fr), o panel per align-items:
       stretch (numatytoji grid elgsena) ištįsta per visą tos eilutės
       aukštį — taigi lentelės konteineris žemiau vis tiek gali ištįsti
       iki widget'o apačios. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ukl-panel-loading {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--ukl-radius);
    z-index: 2;
}

.ukl-panel.ukl-is-loading .ukl-panel-loading {
    display: flex;
}

.ukl-panel.ukl-is-loading .ukl-panel-table {
    opacity: 0.4;
}

.ukl-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--ukl-border);
    border-top-color: var(--ukl-accent);
    animation: ukl-spin 0.7s linear infinite;
}

@keyframes ukl-spin {
    to {
        transform: rotate(360deg);
    }
}

.ukl-panel-table {
    transition: opacity 0.15s ease;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Pati lentelė ---------------------------------------------------------
   Overflow -> scrollbar, kad ilgas sąrašas visada tilptų į turimą vietą,
   niekada neišstumdamas likusio puslapio turinio. ------------------------- */

/* ---- Pati lentelė ---------------------------------------------------------
   Aukštis nebe fiksuotas per --ukl-visible-rows: dabar wrap tiesiog užima
   visą jam paliktą vietą (flex: 1), kurią widget'as gauna iš tėvinio
   .plt-wrapper-flex-fix (height: 100%). Kadangi .plt-grid-left ir
   .plt-grid-right yra to paties .plt-bottom-grid flex eilutės nariai su
   numatytuoju align-items: stretch, abu stulpeliai visada tampa vienodo
   aukščio — t.y. lentelė automatiškai ištįsta lygiai tiek, kiek užima
   pilnai užpildyta .plt-grid-right .plt-info-stats-card. Jei vartotojų
   sąrašas ilgesnis nei ta vieta, įsijungia vidinis scrollbar. --ukl-row-h/
   --ukl-header-h/--ukl-visible-rows kintamieji paliekami suderinamumui,
   bet nebenaudojami aukščiui skaičiuoti. ------------------------------- */

.ukl-leaderboard-wrap {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: auto;
    /* Borderis ant paties scroll konteinerio (ne ant vidinio turinio) —
       jis nepriklauso nuo scroll pozicijos ir todėl niekada nedingsta
       slenkant lentelę. */
    border-top: 1px solid var(--ukl-border);
    border-bottom: 1px solid var(--ukl-border);
    /* švelnesnis, natūralesnis slinkimas (pvz. paspaudus ant sticky
       antraštės ar naršant klaviatūra) + inercinis slinkimas iOS/Safari */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* neleidžia scroll'ui „persilieti" į patį puslapį, kai pasiekiamas
       lentelės viršus/apačia — slinkimas jaučiasi apibrėžčiau ir švelniau */
    overscroll-behavior: contain;
    /* paslėptas scrollbar (Firefox) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* paslėptas scrollbar (Chrome/Safari/Edge) */
.ukl-leaderboard-wrap::-webkit-scrollbar {
    display: none;
}

.ukl-leaderboard-table {
    width: 100%;
    min-width: 320px;
    /* atskiros eilutės (ne collapse), kad tilptų tarpai + šešėliai kiekvienai eilutei */
    border-collapse: separate;
    font-size: 12px;
    color: var(--ukl-fg);
}

.ukl-leaderboard-table th,
.ukl-leaderboard-table td {
    padding: 5px 10px;
    text-align: left;
    white-space: nowrap;
}

.ukl-leaderboard-table thead th {
    position: sticky;
    top: 0;
    background: var(--ukl-muted-bg);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ukl-muted);
    border-bottom: 1px solid var(--ukl-border);
    z-index: 1;
}

/* ---- Modernios "kortelinės" eilutės su šešėliais ------------------------- */

.ukl-leaderboard-table tbody tr {

        background: #fff;
    border-radius: 0;
    box-shadow: 0 4px 15px rgb(0 0 0 / .05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ukl-leaderboard-table tbody tr:hover {
    box-shadow: 0 6px 18px rgb(0 0 0 / .1);
    transform: translateY(-1px);
}

.ukl-leaderboard-table tr.ukl-row-me {
    background-image: none;
    background-color: var(--ukl-accent-soft);
    box-shadow: 0 2px 10px rgb(217 154 0 / .18);
}
.ukl-leaderboard-table tr.ukl-row-me:hover {
    background-image: none;
    background-color: var(--ukl-accent-soft-hover);
    box-shadow: 0 6px 18px rgb(217 154 0 / .25);
}

.ukl-col-rank {
    width: 40px;
    color: var(--ukl-muted);
    font-weight: 700;
}

.ukl-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}
.ukl-medal-1 {
    background: #d4a017;
}
.ukl-medal-2 {
    background: #9aa0a6;
}
.ukl-medal-3 {
    background: #b5651d;
}

.ukl-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

.ukl-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    object-fit: cover;
}

.ukl-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.ukl-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.ukl-empty {
    text-align: center;
    color: var(--ukl-muted);
    padding: 24px 0;
    white-space: normal;
}

/* ---- Prisijungimo kvietimas (rodomas tik neprisijungusiems), po lentele --
   Kompaktiška, viena eilutė: mažas apvalus Google mygtukas + tekstas.
   Grid'e (žr. .ukl-widget grid-template-areas) šis blokas gyvena atskiroje,
   savo turiniui automatiškai pritaikyto aukščio ("auto") eilutėje TIK po
   dešiniuoju (panel/lentelė) stulpeliu — kairėje pusėje, po tabs mygtukais,
   ta vieta lieka tuščia. Kadangi login eilutė yra "auto", o tabs/panel
   eilutė virš jos — "1fr", šis blokas tiesiog atima vietos iš tabs/panel
   eilutės (abu stulpeliai vis tiek lieka LYGIAI vienodo aukščio tarpusavyje),
   o jei dėl to lentelės eilutės nebetelpa — įsijungia jau esamas, vizualiai
   paslėptas .ukl-leaderboard-wrap scrollbar. --------------------------- */

.ukl-login-cta {
    grid-area: login;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--ukl-accent-soft);
    border: 1px solid var(--ukl-accent-soft-hover);
    border-radius: var(--ukl-radius);
}

.ukl-login-cta .ukb-google-signin {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ukl-bg);
    box-shadow: 0 1px 3px rgb(0 0 0 / .15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ukl-login-cta .ukb-google-signin:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgb(0 0 0 / .18);
}

.ukl-login-cta .ukb-google-signin__icon {
    width: 15px;
    height: 15px;
}

.ukl-login-cta-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--ukl-fg);
    line-height: 1.3;
}

/* ---- Prisijungusiam vartotojui: login blokas nerenderinamas, jo vietą
   "atsiima" lentelė -------------------------------------------------------
   .ukl-login-cta rodomas tik neprisijungusiems (elementas DOM'e visai
   nesukuriamas, kai vartotojas jau prisijungęs). Kol grid-template-rows
   turėjo atskirą "login" eilutę su minmax(38px, ...), ta 38px vieta
   likdavo tuščia/rezervuota net ir jai neturint turinio. :has() patikrina,
   ar .ukl-widget viduje IŠVIS yra .ukl-login-cta — jei ne, paliekam tik
   dvi eilutes (title + tabs/panel), todėl tabs stulpelis ir lentelė
   automatiškai ištęsiami per visą atlaisvintą aukštį. */
.ukl-widget:not(:has(.ukl-login-cta)) {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "title title"
        "tabs  panel";
}

/* ---- Responsive: mobilieji įrenginiai ------------------------------------- */

@media (max-width: 560px) {
    /* Siauram ekranui šoninė 170px tabs kolonėlė būtų per ankšta —
       grąžinam vieno stulpelio išdėstymą (title, tabs, panel vienas po
       kito), o pačius tabs mygtukus vėl išdėstom horizontalia eilute
       virš lentelės, kaip ir anksčiau prieš šį pakeitimą. */
    .ukl-widget {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "title"
            "tabs"
            "panel"
            "login";
    }
    /* Ta pati "atsiimtos" login eilutės logika, pritaikyta mobiliajam
       vieno stulpelio išdėstymui. */
    .ukl-widget:not(:has(.ukl-login-cta)) {
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "title"
            "tabs"
            "panel";
    }
    .ukl-tabs {
        flex-direction: row;
        overflow-x: hidden;
        overflow-y: visible;
    }
    .ukl-tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 46px;
        padding: 10px;
        gap: 0;
        /* Ikona centruojama, nes label nebedalyvauja flex sraute (žr.
           žemiau — position: absolute). */
        justify-content: center;
    }
    .ukl-tab + .ukl-tab {
        margin-top: 0;
        margin-left: -1px;
    }
    /* Mobiliajame ekrane rodoma TIK ikonėlė — pilnas tekstas paslėptas
       ir pasirodo kaip tooltip'as tik užvedus pelę / focus'inus mygtuką.
       .ukl-tab jau turi position: relative (bendra taisyklė aukščiau),
       todėl jis tarnauja kaip absoliučiai pozicionuojamo label'o inkaras. */
    .ukl-tab-label {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 6px);
        transform: translateX(-50%);
        white-space: nowrap;
        max-width: none;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        background: var(--ukl-fg);
        padding: 4px 9px;
        border-radius: var(--ukl-radius);
        box-shadow: 0 2px 8px rgb(0 0 0 / .2);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, visibility 0.15s ease;
        z-index: 10;
    }
    .ukl-tab:hover .ukl-tab-label,
    .ukl-tab:focus-visible .ukl-tab-label {
        opacity: 1;
        visibility: visible;
        /* Perrašom aukščiau esančią ".ukl-tab:hover .ukl-tab-label { color:
           var(--ukl-fg) !important }" taisyklę — kitaip tekstas (tamsus)
           taptų neįskaitomas ant tamsaus tooltip'o fono. */
        color: #fff !important;
    }
    .ukl-tab-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .ukl-widget {
        --ukl-row-h: 25px;
        --ukl-header-h: 21px;
    }
    .ukl-tab {
        min-width: 0;
        min-height: 48px;
        padding: 10px 8px;
        gap: 6px;
    }
    .ukl-tab-label {
        font-size: 11px;
    }
    .ukl-tab-icon {
        width: 22px;
        height: 22px;
    }
    .ukl-tab-icon svg {
        width: 13px;
        height: 13px;
    }
    .ukl-leaderboard-table {
        font-size: 11px;
        min-width: 280px;
    }
    .ukl-leaderboard-table th,
    .ukl-leaderboard-table td {
        padding: 5px 8px;
    }
    .ukl-name {
        max-width: 120px;
    }
    .ukl-login-cta {
        padding: 7px 8px;
        gap: 8px;
    }
    .ukl-login-cta-text {
        font-size: 11px;
    }
}

/* ---- Pilnas plotis/aukštis, kai widget'as įdėtas į .plt-wrapper-flex-fix --
   Ten .plt-grid-left .plt-wrapper-flex-fix > * jau gauna height:100% iš
   phone-history.css — plotį (max-width:720px) čia nuimame, kad užimtų visą
   turimą plotį, o aukštį (height:100%) leidžiame paveldėti ir tekėti toliau
   į .ukl-panel/.ukl-panel-table/.ukl-leaderboard-wrap (visi flex:1 aukščiau),
   kad lentelė ištįstų lygiai tiek, kiek aukščio užima šalia, dešiniame
   stulpelyje, pilnai užpildyta .plt-grid-right .plt-info-stats-card. */
/* ---- Vienodo aukščio kairė/dešinė kolona (patikimas fix'as) --------------
   Aukščiau esantys komentarai tikisi, kad .plt-bottom-grid/.plt-grid-left/
   .plt-grid-right/.plt-wrapper-flex-fix aukščio perdavimą jau užtikrina
   svetainės temos phone-history.css. Praktikoje taip nutinka ne visada
   (pvz. jei ten nėra align-items: stretch, arba jei šis plugin'o CSS
   įsikrauna anksčiau už temos stilius), todėl kairysis „TOP Karma“ blokas
   lieka žemesnis nei dešinysis „BENDRA STATISTIKA“ blokas ir apačioje
   lieka tuščios vietos. Kad tai veiktų VISADA, nepriklausomai nuo temos
   failo, čia patys apibrėžiame ir priverstinai užtikriname (!important)
   visą aukščio perdavimo grandinę nuo .plt-bottom-grid iki .ukl-widget.
   Pločių/tarpų čia nekeičiame — tik aukščio (align-items/height) taisykles,
   kad neišjudintume esamo stulpelių išdėstymo. --------------------------- */

.plt-bottom-grid {
    align-items: stretch !important;
}

.plt-grid-left,
.plt-grid-right {
    display: flex !important;
    flex-direction: column !important;
    height: auto;
}

.plt-grid-left > .plt-wrapper-flex-fix,
.plt-wrapper-flex-fix {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100% !important;
    /* Riba suderinta su .plt-info-stats-card max-height žemiau: be šitos
       ribos kairysis stulpelis (reitingai), jei jo turinys natūraliai
       aukštesnis, diktuotų visos .plt-bottom-grid eilutės aukštį (flex
       align-items: stretch skaičiuoja eilutės aukštį pagal aukščiausią
       elementą PRIEŠ ištempimą), ir dešinioji kortelė būtų ištempta virš
       250px. Kadangi abu stulpeliai apkarpyti ta pačia 250px riba, eilutės
       aukštis niekada neviršys 250px, o kairiajam stulpeliui pritrūkus
       vietos įsijungia vidinis .ukl-leaderboard-wrap scrollbar (jis jau
       paslėptas aukščiau apibrėžtais scrollbar-width/-webkit-scrollbar
       taisyklėmis). */
    max-height: 250px !important;
    min-height: 0;
}

/* Dešinioji statistikos kortelė — pagrindinis aukščio šaltinis, apribotas
   iki 250px. Kairysis (reitingų) stulpelis per height:100% grandinę
   (.plt-wrapper-flex-fix -> .ukl-widget -> .ukl-panel -> .ukl-panel-table
   -> .ukl-leaderboard-wrap) visada „prisitaiko" prie šio aukščio, o jei jo
   turinys (lentelės eilutės) neišsitelpina — įsijungia vidinis, vizualiai
   paslėptas scrollbar ties .ukl-leaderboard-wrap. */
.plt-grid-right .plt-info-stats-card {
    height: 100%;
    max-height: 250px;
    box-sizing: border-box;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* paslėptas scrollbar (Firefox), jei ir pati kortelė kada nors
       netilptų į 250px — saugiklis, suderintas su kairės pusės elgesiu */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.plt-grid-right .plt-info-stats-card::-webkit-scrollbar {
    display: none;
}

.plt-wrapper-flex-fix .ukl-widget {
    max-width: none;
    width: 100%;
    height: 100%;
}

/* ---- BENDRA STATISTIKA kortelės "mini stat" dėžutės -----------------------
   Šios klasės (.plt-mini-stats / .plt-stat-box / .plt-stats-title /
   .plt-stats-desc / .plt-full-report-btn) iki šiol buvo stilizuojamos TIK
   per temos CSS (phone-history.css) — šiame plugin'o faile taisyklių
   nebuvo. Kol dėžučių buvo 3, tema jas sutalpindavo vienoje eilutėje.
   Pridėjus daugiau dėžučių (VISO KOMENTARŲ + 4 statuso dėžutės = 8 iš viso),
   tema jų nebesuvynioja į kitą eilutę, ir dalis tiesiog nukertama už
   kortelės ribos (horizontalus overflow) — žr. ekrano nuotrauką.

   Kad kortelė veiktų PATIKIMAI, nepriklausomai nuo temos (ir jai
   ateityje pasikeitus), čia apibrėžiame savarankišką, save-talpinantį
   tinklelį: 4 stulpeliai (su 8 dėžutėmis tai reiškia 2 eilutes), mažesnis
   padding/šriftas, kad viskas tilptų į 250px aukščio ribą be horizontalaus
   nukirpimo. !important naudojamas ten, kur reikia perrašyti temos
   taisykles, sukėlusias overflow'ą. --------------------------------------- */

.plt-info-stats-card {
    box-sizing: border-box;
}

.plt-stats-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    margin: 0 0 0px !important;
    color: #16181c;
}

.plt-mini-stats {
    display: grid !important;
    grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important;
    gap: 6px !important;
    width: 100%;
}

.plt-stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    padding: 6px 3px !important;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
}

.plt-stat-label {
    display: block;
    font-size: 8.5px !important;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #6b7280;
    text-transform: uppercase;
    /* break-word vien nepakako, kai žodis ilgesnis už dėžutę — priverstinai
       leidžiame lūžti bet kur (overflow-wrap: anywhere), kad tekstas visada
       liktų viduje, o ne būtų nukirstas/išlįstų už dėžutės ribų. Tai galioja
       ir dideliame ekrane, bet ten dėžutės ir taip pakankamai plačios. */
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.plt-stat-value {
    display: block;
    font-size: 15px !important;
    line-height: 1.2;
    font-weight: 700;
    color: #16181c;
    overflow-wrap: anywhere;
}

.plt-stats-desc {
    font-size: 11px !important;
    line-height: 1.3;
    color: #6b7280;
    margin: 0 0 10px !important;
}

.plt-full-report-btn {
    font-size: 11px !important;
    padding: 7px 10px !important;
}

/* Labai siauruose konteineriuose (pvz. mobiliajame telefone, kai kairė
   lentelė ir dešinė kortelė vis dar greta) 4 stulpeliai per daug suspaustų
   dėžučių — sumažiname iki 2 stulpelių (8 dėžutės = 4 eilutės), kortelė
   ir toliau turi vidinį scroll (žr. .plt-grid-right .plt-info-stats-card
   aukščiau), tad turinys nebus nukirstas. */
@media ( max-width: 480px ) {
    /* Konteinerio plotis šiame taške dažniausiai jau per siauras patogiam
       4 stulpelių tekstui (net jei auto-fit aukščiau technikaliai sutalpina
       3), todėl čia priverstinai fiksuojame LYGIAI 2 stulpelius (8 dėžutės
       = 4 lygios eilutės) ir sumažiname šriftą/paddingą, kad tekstas
       netiktų per arti kraštų. */
    .plt-mini-stats {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
        gap: 6px !important;
    }
    .plt-stat-box {
        padding: 7px 4px !important;
    }
    .plt-stat-label {
        font-size: 9.5px !important;
    }
    .plt-stat-value {
        font-size: 14px !important;
    }
}

@media ( max-width: 340px ) {
    /* Ypač siauriems ekranams (maži telefonai) dar truputį sumažinam,
       kad ir ilgiausi žodžiai/skaičiai patikimai tilptų dvejose dėžutėse
       per eilutę. */
    .plt-stat-label {
        font-size: 8.5px !important;
    }
    .plt-stat-value {
        font-size: 13px !important;
    }
}