/**
 * TopChess.org — VIENINGAS LENTOS RĖMAS (tc-board-frame)
 * ======================================================
 * Vienas išdėstymo karkasas VISIEMS lentos puslapiams:
 * play-bot, play-friend, endgame-training, puzzles, drills, openings, traps.
 *
 * TIKSLAS (mobilus): lenta per vidurį, veiksmų mygtukai po ranka,
 * SLINKTI NEREIKIA. Išmatuota 2026-09-16 — kodėl to prireikė:
 *   play-friend  lenta 1314px žemyn, 2.5 ekrano
 *   play-bot     lenta  315px, bet valdikliai 1446px, 2.8 ekrano
 *   endgame      lenta  911px, mygtukai 1392px, 2.3 ekrano
 * Visur mygtukai buvo UŽ lentos ribų, o lenta yra `touch-action:none`
 * (būtina figūrų vilkimui) — todėl pirštas ant lentos puslapio neslenka.
 * Sprendimas ne „leisti slinkti", o panaikinti slinkimo poreikį.
 *
 * DESKTOP: rėmas tyčia NIEKO nedaro (tik pagalbinės klasės) — visos
 * išdėstymo taisyklės yra po `@media (max-width: 900px)`.
 * Įkeliamas PO tc-components.css, PRIEŠ puslapio failą.
 *
 * Struktūra (HTML):
 *   <div class="tcf">                     <- tinklelis, 100dvh
 *     <div class="tcf-top">…</div>        <- priešininkas / statusas (viena eilutė)
 *     <div class="tcf-board">…</div>      <- lenta, centre, kvadratinė
 *     <div class="tcf-bottom">…</div>     <- žaidėjas + veiksmų mygtukai
 *   </div>
 *   <div class="tcf-rest">…</div>         <- VISKAS kita (sąrašai, istorija, intro)
 */

/* ==========================================================
   1. Pagalbinės klasės (veikia visur, ir desktope)
   ========================================================== */

/* Elementas, matomas TIK mobiliajame rėme */
.tcf-only { display: none; }
/* Elementas, slepiamas mobiliajame rėme (pvz. dublikuota antraštė) */
.tcf-hide { display: initial; }

/* ==========================================================
   2. MOBILUS RĖMAS
   ==========================================================
   Riba 900px — ta pati, kurią jau naudoja visi lentos puslapiai,
   kad nebūtų dviejų skirtingų lūžio taškų. */
@media (max-width: 900px) {

    .tcf-only { display: revert; }
    .tcf-hide { display: none !important; }

    /* ---- 2.1 Karkasas ----
       Ne flex, o grid su `1fr auto 1fr`: viršus ir apačia gauna po lygiai
       likusios vietos, todėl lenta atsiduria TIKRAI per vidurį,
       nepriklausomai nuo to, kiek turinio yra viršuje ar apačioje.

       100dvh (ne 100vh): mobilių naršyklių adreso juosta kitaip nukerpa
       apatinius mygtukus — tiksliai tą problemą ir taisom. */
    .tcf {
        display: grid;
        /* `auto auto auto` + `align-content: center`: visas blokas centruojamas
           kaip visuma, o eilutės lieka savo natūralaus aukščio.
           `1fr auto 1fr` atrodė logiškiau, bet tuščia viršutinė eilutė
           išpūsdavo ~190px tarpą virš lentos (matyta endgame puslapyje). */
        grid-template-rows: auto auto auto;
        align-content: center;
        /* --tcf-chrome: puslapio juostos (nav 57px) + app režimo apačia.
           Puslapis gali persirašyti, jei jo chrome kitoks.
           --tcf-footer: minimalaus footer'io aukštis (0, jei jo nėra).
           Be jo footer'is atsidurtų TIKSLIAI ties lanksčiu ir sukurtų
           slinkimą (išmatuota: y=845 prie 845px ekrano → 46px slinkimo). */
        min-height: calc(100dvh - var(--tcf-chrome, 57px) - var(--tcf-footer, 0px) - var(--tcf-title-h, 0px));
        gap: 8px;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* Viršutinė juosta lygiuojama prie lentos (apačia), apatinė — prie viršaus.
       Taip abi „prilimpa" prie lentos, o laisva vieta lieka ekrano kraštuose. */
    /* ⚠️ Vidinis tarpas BŪTINAS. `.tcf` gap veikia tik tarp trijų grid eilučių,
       o NE tarp juostelės ir mygtukų jos viduje — ten tarpas likdavo 0px ir
       žaidėjo juostelės kietas šešėlis (0 3px 0) užlipdavo ant mygtukų.
       Išmatuota 2026-09-16: player.bottom 686 = actions.top 686. */
    .tcf-top, .tcf-bottom {
        display: flex; flex-direction: column;
        gap: 6px; min-width: 0;
    }
    .tcf-top    { justify-content: flex-end; }
    .tcf-bottom { justify-content: flex-start; }

    /* ---- 2.2 Lenta ----
       Dydis = MAŽESNYSIS iš (plotis) ir (kiek liko aukščio).
       Be aukščio ribos lenta aukštuose/siauruose ekranuose išstumia
       mygtukus už ekrano — būtent tai ir vyko iki šiol.

       --tcf-reserve: kiek vietos rezervuojama viršui+apačiai kartu.
       Puslapiai su platesne apačia (pvz. 2 eilutės mygtukų) ją didina. */
    .tcf-board {
        align-self: center;
        justify-self: center;
        /* `100% - 8px`: be šoninės paraštės lenta remiasi į ekrano kraštus ir
           atrodo „iškritusi" iš puslapio (matyta endgame puslapyje, 390px lenta
           390px ekrane). 4px iš kiekvienos pusės pakanka, kad kraštinė kvėptų.

           --tcf-reserve: kiek aukščio atiduodama viršui+apačiai. 190px yra
           saugi numatytoji (2 juostelės + mygtukai); puslapiai su liesesniu
           viršumi (pvz. endgame: tik pozicijos vardas) gali ją sumažinti ir
           gauti didesnę lentą. */
        width: min(calc(100% - 8px), calc(100dvh - var(--tcf-chrome, 57px) - var(--tcf-footer, 0px) - var(--tcf-title-h, 0px) - var(--tcf-reserve, 190px)));
        max-width: 560px;
        /* Chessground coords.files yra absoliutus ir išsikiša ~21px už lentos;
           html{overflow-x} to nesulaiko, todėl kerpam ten, kur perteklius atsiranda. */
        overflow-x: clip;
    }

    /* Lentos konteineris visada kvadratas. Pačios .cg-* taisyklės NEKEIČIAMOS —
       taikoma tik puslapio wrapper'iui, kuris pažymėtas .tcf-board-el. */
    .tcf-board .tcf-board-el,
    .tcf-board > [id$="oard"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        max-width: none !important;
    }

    /* ---- 2.2b Puslapio antraštė ----
       Telefone puslapio `<h1>` paslėptas kartu su visa `.header-row`, todėl
       nelikdavo JOKIO požymio, kuriame puslapyje esi — nei žaidėjui, nei
       pasidalinus ekrano kopija. Grąžinam kompaktiška eilute virš rėmo.

       Vietos tam yra: išmatuota, kad virš turinio lieka ~105px tuštumos,
       nes lentą riboja PLOTIS, ne aukštis. Antraštė ją užpildo ir lentos
       nemažina — bet dėl saugumo ji įskaičiuota į --tcf-title. */
    .tcf-title {
        display: flex; align-items: center; justify-content: center;
        gap: 8px;
        padding: 2px 12px 6px;
        font-size: 0.95rem; font-weight: 900; color: var(--tc-ink);
        text-align: center; line-height: 1.2;
        /* Ilgi pavadinimai („Endgame Training", „Šachmatų debiutai") turi
           tilpti į vieną eilutę — kitaip antraštė augtų ir stumtų lentą. */
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Maža piktograma šalia — tas pats puslapio ženklas, kaip desktope */
    .tcf-title img, .tcf-title svg {
        width: 22px; height: 22px; flex-shrink: 0;
        border-radius: 6px;
    }

    /* ---- 2.3 Žaidėjo juostelė (kaip lichess) ----
       Viena eilutė: avataras + vardas + (laikas). Kompaktiška, 40px. */
    .tcf-player {
        display: flex; align-items: center; gap: 8px;
        padding: 4px 10px; min-height: 40px;
        background: var(--tc-surface);
        border: 2px solid var(--tc-line);
        border-radius: var(--tc-radius);
        box-shadow: 0 3px 0 var(--tc-line);
        font-size: 0.85rem; font-weight: 800; color: var(--tc-ink);
        overflow: hidden;
    }
    .tcf-player-name {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        min-width: 0; flex: 1;
    }
    .tcf-player-meta {
        font-weight: 400; color: var(--tc-ink-soft);
        font-size: 0.78rem; white-space: nowrap;
    }
    /* Paimtos figūros / laikas dešinėje */
    .tcf-player-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

    /* Aktyvaus žaidėjo požymis — spalva ir kraštinė, ne animacija */
    .tcf-player.is-turn {
        border-color: var(--tc-ink);
        box-shadow: 0 3px 0 var(--tc-gold-deep);
        background: var(--tc-surface);
    }

    /* ---- 2.4 Statuso eilutė ----
       Vienos eilutės pakaitalas dideliems „status card" blokams.
       Ne `display:none` kai tuščia — kitaip lenta šokinėtų per kiekvieną
       pranešimą; vieta rezervuojama visada. */
    .tcf-status {
        min-height: 34px;
        display: flex; align-items: center; justify-content: center;
        padding: 4px 12px;
        text-align: center;
        font-size: 0.82rem; font-weight: 700; line-height: 1.25;
        color: var(--tc-ink-soft);
        border-radius: var(--tc-radius);
    }
    .tcf-status:empty { visibility: hidden; }
    .tcf-status.success { color: var(--tc-green-text); }
    .tcf-status.error   { color: var(--tc-red-text); }
    .tcf-status.info    { color: var(--tc-blue-text); }
    .tcf-status.warning { color: var(--tc-gold-text); }

    /* ---- 2.5 Veiksmų mygtukai ----
       Tap target 48px (Material 48dp; WCAG 2.5.5 min 44px).
       Mobilus media query NIEKADA nemažina mygtukų — taisyklė iš CLAUDE.md. */
    .tcf-actions {
        display: flex; gap: 6px; align-items: stretch;
        padding: 0 8px;
    }
    .tcf-actions > * { flex: 1; min-width: 0; }

    .tcf-act {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 2px;
        min-height: 48px; padding: 6px 2px;
        overflow: hidden;
        background: var(--tc-surface); color: var(--tc-ink);
        border: 2px solid var(--tc-ink);
        border-radius: var(--tc-radius);
        box-shadow: 0 3px 0 var(--tc-line);
        font-weight: 800; font-size: 0.7rem; line-height: 1.1;
        cursor: pointer; text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    /* 22px — ikonos su storais kontūrais smulkėdamos „užsipildo";
       mažiau nei 20px brand stilius nebeskaitomas. */
    .tcf-act svg, .tcf-act .tcf-act-ico {
        width: 22px; height: 22px; flex-shrink: 0;
        pointer-events: none; overflow: visible;
    }

    /* ⚠️ DAUGIAUSIA 4 MYGTUKAI EILĖJE. Išmatuota 2026-09-16 (390px, 0.62rem):
         5 mygtukai → 67px → NETELPA „Užuomina"(72), „Lygiosios"(64),
                              „Pasiduoti"(64), „Sprendimas"(83)
         4 mygtukai → 85px → telpa VISOS lietuviškos etiketės (ilgiausia 54)
       Lietuvių kalba ilgesnė už anglų, tad 5 mygtukai tyliai kerpa tekstą
       daugtaškiu. Penktą veiksmą kelti į „Daugiau" lapą, o ne smulkinti šriftą.
       Kirpimas žemiau palikas kaip APSAUGA (vertimai į DE/FI dar ilgesni). */
    .tcf-act > span:last-child {
        max-width: 100%;
        font-size: clamp(0.62rem, 2.6vw, 0.7rem);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tcf-act:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tc-line); }
    .tcf-act:focus-visible { outline: 3px solid var(--tc-blue-deep); outline-offset: 3px; }
    .tcf-act:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

    /* Pagrindinis veiksmas — auksinis (viena spalva = viena hierarchija) */
    .tcf-act.primary {
        background: var(--tc-gold); color: #241500;
        box-shadow: 0 3px 0 var(--tc-gold-deep);
    }
    .tcf-act.primary:active { box-shadow: 0 0 0 var(--tc-gold-deep); }
    /* ⚠️ Auksinė ikona ant auksinio fono dingsta (patikrinta ekrane).
       Ant spalvoto mygtuko ikona piešiama rašalu — kontūras lieka,
       o užpildas pasidaro permatomas. */
    .tcf-act.primary svg { fill: #241500; stroke: #241500; }
    .tcf-act.danger {
        background: var(--tc-surface); color: var(--tc-red-text);
    }

    /* ---- 2.6 „Daugiau" lapas ----
       Viskas, kas netelpa (ėjimų istorija, botų sąrašas, nustatymai),
       nešalinama — perkeliama į lapą, iškviečiamą mygtuku.
       Taip informacija NEDINGSTA, tik nustoja stumdyti lentą. */
    /* ⚠️ `transform: translateY(100%)` NEPAKANKA paslėpti: nustumtas elementas
       vis tiek plečia slinkimo sritį (išmatuota 2026-09-16 endgame puslapyje:
       +439px slinkimo, nors lapas „uždarytas"). `position:fixed` to nesulaiko.
       Todėl uždarytas lapas dar ir `display: none` — jokio pėdsako maketui. */
    /* ⚠️ Lapas prasideda PO navigacijos juosta, ne nuo y=0. Su `inset: 0`
       lapo antraštė (su ✕) atsidurdavo po fiksuota nav juosta ir tapdavo
       nepasiekiama — išmatuota endgame puslapyje: antraštė y=12, o nav
       dengia iki y=70. Nav paliekama matoma tyčia: ji yra kelias atgal. */
    .tcf-rest {
        position: fixed;
        top: var(--tcf-chrome, 57px); right: 0; bottom: 0; left: 0;
        z-index: 1250;
        background: var(--tc-bg);
        padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: none;
    }
    .tcf-rest.open { display: block; animation: tcf-rest-in var(--tc-dur) var(--tc-ease); }
    @keyframes tcf-rest-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) {
        .tcf-rest.open { animation: none; }
    }

    /* Antraštė lipni ties lapo viršumi. `top: 0` + neigiama viršutinė paraštė
       kompensuoja lapo padding'ą — su `top: -12px` antraštė nuslysdavo už
       ekrano ir uždarymo mygtukas tapdavo nepasiekiamas (matyta endgame). */
    .tcf-rest-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        position: sticky; top: 0; z-index: 2;
        background: var(--tc-bg);
        margin: -12px -12px 12px; padding: 12px;
        border-bottom: 2px solid var(--tc-line);
    }
    .tcf-rest-title { font-size: 1rem; font-weight: 900; color: var(--tc-ink); margin: 0; }
    .tcf-rest-close {
        min-width: 48px; min-height: 48px;
        display: flex; align-items: center; justify-content: center;
        background: var(--tc-surface); color: var(--tc-ink);
        border: 2px solid var(--tc-ink); border-radius: var(--tc-radius);
        box-shadow: 0 3px 0 var(--tc-line);
        font-weight: 900; font-size: 1.1rem; cursor: pointer;
    }
    .tcf-rest-close:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tc-line); }

    /* ---- 2.7 Pokalbių burbulas ----
       ⚠️ Slepiamas TIK plaukiojantis mygtukas (.tc-chat-toggle), o NE visas
       widget'as. Widget'e gyvena TRYS dalykai — globalus chatas, privačios
       žinutės ir play-friend žaidimo pokalbis; scenarijus (`chat-widget.js`)
       toliau kraunasi ir DM bei žaidimo pokalbis veikia kaip veikę.

       Kodėl: burbulas yra `position: fixed` apačioje dešinėje, t.y. tiksliai
       ten, kur rėme yra veiksmų mygtukai. Peizaže jis realiai UŽDENGDAVO
       paskutinį mygtuką (išmatuotas persidengimas 52×37px endgame puslapyje) —
       paspaudus atsidarydavo pokalbis vietoj veiksmo. Portretiniame režime jis
       nedengia, bet lieka virš lentos ir blaško žaidžiant.

       Puslapiai, kuriems burbulas mobiliajame REIKALINGAS (pvz. play-friend
       žaidimo pokalbis), turi jį iškelti į savo .tcf-actions mygtuką. */
    .tc-chat-toggle { display: none !important; }

    /* ---- 2.8 Minimalus footer'is ----
       Pilnas footer'is (prekės ženklas + socialiniai + 5 nuorodos) telefone yra
       ~358px, t.y. pusė ekrano, todėl rėmo puslapiuose jis slepiamas. Bet visai
       be nieko apačia atrodo tuščia ir nebaigta, o teisinės nuorodos
       (privatumas, sąlygos) turi likti pasiekiamos.

       Sprendimas: viena kompaktiška eilutė po rėmu. Ji NEDALYVAUJA rėmo
       skaičiavimuose (rėmas jau centruotas), todėl lentos nestumdo — tiesiog
       užpildo tai, kas ir taip buvo tuščia. */
    .tcf-minifooter {
        display: flex; flex-wrap: wrap;
        align-items: center; justify-content: center;
        gap: 4px 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        font-size: 0.7rem; color: var(--tc-ink-soft);
        text-align: center; line-height: 1.4;
    }
    .tcf-minifooter a {
        color: var(--tc-ink-soft); text-decoration: none;
        border-bottom: 1px solid var(--tc-line);
        /* Tap target: 0.7rem tekstas be paraščių būtų ~14px aukščio.
           Vertikalus padding pakelia iki 24px — WCAG 2.5.8 AA minimumas.
           44px čia netaikomas: tai antraeilės nuorodos, ne žaidimo valdikliai. */
        padding: 5px 2px;
    }
    .tcf-minifooter a:active { color: var(--tc-ink); }
    .tcf-minifooter .tcf-mf-dot { opacity: 0.5; }

    /* ---- 2.9 Ko rėme NĖRA ----
       Puslapio intro, statistikos juostos, svečio raginimai ir pan.
       telefone lentos nestumdo. Puslapis juos pažymi .tcf-hide. */
}

/* Desktope minimalus footer'is ir rėmo antraštė nereikalingi —
   ten rodomas pilnas footer'is ir tikrasis puslapio <h1>. */
@media (min-width: 901px) {
    .tcf-minifooter, .tcf-title { display: none; }

    /* ⚠️ Lapo ANTRAŠTĘ (»Daugiau« + ✕) desktope slepiam visada: mobiliajame
       lapą slepia `position: fixed` + `display: none`, bet desktope tos
       taisyklės neveikia ir antraštė likdavo puslapio sraute (matyta puzzles —
       apatiniame kairiajame kampe kabėjo pilkas „More" su mygtuku).

       Bet paties `.tcf-rest` slėpti NEGALIMA: kai kuriuose puslapiuose jis
       yra tikras turinys (endgame — kategorijų juosta), kuri desktope
       PRIVALO matytis. Todėl puslapiai, kuriems lapas desktope nereikalingas
       (pvz. puzzles), jį slepia patys. */
    .tcf-rest-head { display: none; }
}

/* ==========================================================
   3. Žemas peizažas (telefonas paguldytas)
   ==========================================================
   Aukščio beveik nėra — lenta į kairę, valdikliai į dešinę. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .tcf {
        grid-template-rows: auto 1fr;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "board top" "board bottom";
        align-items: start;
        /* Peizaže irgi atimam chrome — kitaip lenta išstumia mygtukus
           žemyn ir atsiranda slinkimas (išmatuota: +49px).
           `min-height` vietoj `height` paliktų 12px slinkimo dėl .tcf
           padding'o, todėl jį čia nunulinam. */
        /* Peizaže dirbam su TIKSLIU aukščiu (height, ne min-height) ir be
           vertikalaus padding'o: kiekvienas likęs pikselis virsta slinkimu,
           o slinkti čia nėra ko — visas turinys telpa. */
        min-height: 0;
        height: calc(100dvh - var(--tcf-chrome, 57px));
        padding: 0;
        gap: 6px;
        overflow: hidden;
    }
    /* Lentos kraštinė ribojama IR aukščiu, IR pločiu: peizaže aukštis
       beveik visada yra siauresnė vieta. */
    .tcf-board {
        grid-area: board; align-self: center;
        width: min(calc(100dvh - var(--tcf-chrome, 57px) - 16px), 58vw);
        max-width: none;
    }
    .tcf-top    { grid-area: top;    align-self: start; }
    .tcf-bottom { grid-area: bottom; align-self: end; }
    /* Statusas peizaže — viena eilutė, be rezervo */
    .tcf-status { min-height: 0; }
    /* Mygtukai gali laužtis į dvi eilutes — dešinėje pločio pakanka */
    .tcf-actions { flex-wrap: wrap; padding: 0; }
    .tcf-actions > * { flex: 1 1 30%; }

    /* Peizaže aukštis — brangiausias resursas, footer'is ir antraštė jame
       neteisinami. Kartu nunulinam rezervus, kuriuos jiems skiria portretas. */
    .tcf-minifooter, .tcf-title { display: none; }
    .tcf { --tcf-footer: 0px; --tcf-title-h: 0px; }
}