/**
 * TopChess.org — Chessmon žaidimo stiliai
 * ========================================
 * Dizaino sistema: ai/plans/design-system.md
 * - Kreminis fonas, kieti šešėliai (0 4px 0, be blur), jokių gradientų.
 * - Spalvos — tc-theme tokenai (čia deklaruojami lokaliai, nes žaidimo
 *   puslapis nekrauna critical.min.css — jis pilnaekranis).
 */

:root {
    --tc-bg:        #FBF7EF;
    --tc-surface:   #FFFFFF;
    --tc-surface-2: #F3EDE1;
    --tc-ink:       #1B2430;
    --tc-ink-soft:  #5A6472;
    --tc-line:      #E3DACB;
    --tc-blue:      #3AB3F2;
    --tc-blue-deep: #17709F;
    --tc-gold:      #ECA313;
    --tc-gold-deep: #B87908;
    --tc-green:     #38B76B;
    --tc-green-deep:#23814A;
    --tc-red:       #E2574C;
    --tc-red-deep:  #B03A31;
    --tc-blue-text: #0267B0;
    --tc-gold-text: #875806;
    --tc-green-text:#1B6B3C;
    --tc-red-text:  #A3352C;
    --tc-radius:    12px;
    --tc-radius-lg: 16px;
    --tc-ease: cubic-bezier(0.2, 0, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* HTML `hidden` atributas privalo laimėti prieš bet kokį display: iš klasių */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--tc-bg);
    color: var(--tc-ink);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

/* ======================= STARTO SLUOKSNIS =======================
   Anksčiau tai buvo pilnas pradžios EKRANAS su korta, ženkliukais ir logotipu.
   Dabar pasaulis kraunamas iškart, o šis sluoksnis tik pritemdo jį, kol
   paspaudžiamas «Pradėti» — vartotojas mato žaidimą, ne tuščią kortelę. */

.cm-start {
    position: fixed; inset: 0; z-index: 30;
    display: flex; align-items: center; justify-content: center;
    /* Pusiau permatomas — pro jį matosi gyvas pasaulis */
    background: rgba(27, 36, 48, 0.55);
    padding: 16px;
    transition: opacity 400ms var(--tc-ease);

    /* SAUGIKLIS (2026-08-21): korta niekada neturi buti nukirsta.
       Zemiau esancios @media taisykles ja traukia, bet visu atveju numatyti
       neimanoma — didesnis sistemos sriftas, ilgesnis vertimas ar siauras
       darbalaukio langas gali perpildyti bet kuria riba. Tada geriau
       slinkimas, nei uz ekrano likes «Pradeti».

       `align-items: center` su perpildymu nukerpa VIRSU (flex centravimo yda),
       todel centruojam per `auto` marginus ant vaiko — jie perpildyme
       elgiasi teisingai ir palieka abu krastus pasiekiamus. */
    overflow-y: auto;
    align-items: flex-start;
    overscroll-behavior: contain;
}
.cm-start-box { margin: auto; }
.cm-start--hidden { opacity: 0; pointer-events: none; }

.cm-start-box {
    max-width: 380px; width: 100%;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 6px 0 var(--tc-line);
    padding: 22px 24px 24px;
    text-align: center;
}

/* 3D logotipas starto ekrane (logo-3d.js, variantas „bareStack").
   Konteinerio aukštis fiksuotas — logotipas pats prisitaiko prie pločio
   (ResizeObserver + kameros kadravimas), todėl kortelė nešokinėja krovimo metu. */
.cm-logo3d {
    height: 128px;
    margin: 0 0 10px;
    position: relative;
}
.cm-logo3d canvas { display: block; }

/* Tekstinis pakaitalas: matomas iki 3D užsikrovimo, be WebGL ir ekrano
   skaitytuvams. Užsikrovus canvas'ui — paslepiamas (.cm-logo3d--on). */
.cm-logo3d-fallback {
    margin: 0;
    font-size: 2rem;
    letter-spacing: 1px;
    color: var(--tc-ink);
    line-height: 128px;
}
.cm-logo3d--on .cm-logo3d-fallback {
    /* clip, o ne display:none — tekstas lieka ekrano skaitytuvams. */
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Žemuose telefonuose (landscape) 128px atimtų per daug vietos iš valdymo
   sąrašo — logotipas sumažinamas, bet neišnyksta. */
@media (max-height: 520px) {
    .cm-logo3d { height: 84px; }
    .cm-logo3d-fallback { font-size: 1.6rem; line-height: 84px; }
}

/* „uvis.pro pristato" — kreditas starto ekrane.

   EILE: logotipas PIRMA, zodis „pristato" PO juo. Anksciau buvo atvirksciai,
   ir kartu su zemiau esanciu Chessmon logotipu tai skaitesi kaip „Chessmon
   pristato uvis.pro" — priesinga prasme (2026-08-19 vartotojo pastaba).

   PASTABA DEL DIZAINO SISTEMOS: `ai/plans/design-system.md` draudzia violetine
   spalva, bet cia ji ateina is SVETIMO prekes zenklo logotipo (uvis.pro), kurio
   keisti negalima. Draudimas taikomas MUSU paletei, todel logotipas paliekamas
   originalus, o visa aplinka (tekstas, tarpai) — projekto tokenais. */
.cm-presents {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 6px;
    /* Kreditas neturi konkuruoti su pavadinimu — smulkus ir prislopintas. */
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tc-ink-soft);
}

/* Nuoroda TIK ant logotipo. Zodis „pristato" lieka paprastu tekstu —
   nepabrauktas ir nepaspaudziamas (2026-08-19 vartotojo prasymu). */
.cm-presents-logo {
    display: block;
    line-height: 0;              /* be tarpo po inline paveiksliuku */
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 150ms var(--tc-ease);
}
.cm-presents-logo:hover { opacity: 1; }

.cm-presents img {
    /* Aukstis fiksuotas, plotis auto — logotipas vektorinis, nesuplos.
       Kelione: 20px (per stambus) -> 14px (per smulkus) -> 17px.
       Kreditas turi buti aiskiai iskaitomas, bet vis tiek gerokai
       smulkesnis uz Chessmon pavadinima. */
    height: 17px;
    width: auto;
    display: block;
}

/* Zemuose telefonuose (landscape) kiekvienas pikselis svarbus valdymo sarasui. */
@media (max-height: 520px) {
    .cm-presents { margin-bottom: 4px; font-size: 0.68rem; }
    .cm-presents img { height: 15px; }
}

.cm-desc {
    color: var(--tc-ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 18px;
}

.cm-play-btn {
    display: inline-block;
    font-size: 1.25rem; font-weight: 800;
    padding: 14px 48px;
    color: var(--tc-ink);
    background: var(--tc-gold);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-gold-deep);
    cursor: pointer;
    transition: transform 120ms var(--tc-ease), box-shadow 120ms var(--tc-ease);
}
.cm-play-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tc-gold-deep); }
.cm-play-btn:active { transform: translateY(2px);  box-shadow: 0 2px 0 var(--tc-gold-deep); }
.cm-play-btn:disabled { opacity: 0.6; cursor: wait; }

/* Antrinis („likti", „atšaukti") variantas — tas pats mygtukas, tik ramesnis:
   neutralus paviršius vietoj auksinio, kad pagrindinis veiksmas išsiskirtų. */
.cm-play-btn--ghost {
    background: var(--tc-surface-2);
    box-shadow: 0 4px 0 var(--tc-line);
}
.cm-play-btn--ghost:hover  { box-shadow: 0 6px 0 var(--tc-line); }
.cm-play-btn--ghost:active { box-shadow: 0 2px 0 var(--tc-line); }

/* Patvirtinimo modalo mygtukų eilutė — siaurame ekrane virsta stulpeliu,
   kad 48px lietimo taikiniai nesusispaustų. */
.cm-confirm-row {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.cm-confirm-row .cm-play-btn {
    flex: 1 1 130px;
    padding: 12px 20px;
    font-size: 1.05rem;
    /* Trys elementai eilutėje (Bandyti dar / Lyderių lentelė / Tęsti) siaurame
       ekrane laužiasi į stulpelį — `min-height` garantuoja 44px taikinį net
       tada, kai `padding` ir šriftas susispaudžia. */
    min-height: 44px;
}

/* Pabaigos kortelės nuoroda į lyderių lentelę (2026-08-21).
   Tai `<a>`, ne `<button>` — SĄMONINGAI: tik tikra nuoroda gali atsidaryti
   naujoje kortelėje, o žaidimas NEGALI nutrūkti. `.cm-play-btn` bazė sukurta
   mygtukui, todėl čia grąžinami tie keli dalykai, kurių `<a>` neturi. */
.cm-finale-lb {
    text-decoration: none;
    /* Lietimo taikinys >= 44px (CLAUDE.md). `<button>` aukštį gaudavo iš
       padding'o + savo eilutės aukščio; `<a>` reikia pasakyti aiškiai. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
}

/* Didelis starto mygtukas (vartotojo prašymas 2026-08-07) */
.cm-play-btn--big {
    font-size: 1.5rem;
    padding: 18px 56px;
    width: 100%;
    box-sizing: border-box;
}

.cm-start-status {
    min-height: 1.4em;
    margin-top: 10px;
    color: var(--tc-blue-text);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ============ STARTO LANGO PASIRINKIMAI (2026-08-23) =====================

   Du nauji blokai po «Pradėti»: «Pradėti iš naujo» ir grafikos pakopa.

   ⚠️ ABU DEDAMI VIRŠ `#guest-note`, o svečio raginimas žemiau esančiuose
   `@media` blokuose jau turi `:has()` taisykles, traukiančias kortelę žemuose
   ekranuose. Tos taisyklės mažina `.cm-play-btn--big` — bet ne šitų, todėl
   žemiau pridėtos atitinkamos eilutės. Be jų svečias 640px aukščio telefone
   vėl gautų nukirstą kortelę (ta pati klaida kaip 2026-08-21).
   ========================================================================= */

/* «Pradėti iš naujo» — antrinis veiksmas, todėl ir vizualiai antrinis:
   siauresnis už pagrindinį, ramesnis (`--ghost`). Paspaudus atsidaro tas pats
   patvirtinimo modalas kaip iš Chessdex. */
.cm-start-restart {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 10px 20px;
    font-size: 0.95rem;
    /* Lietimo taikinys >= 44px (CLAUDE.md) — `padding` vienas jo negarantuoja,
       kai šriftas mažesnis už bazinį. */
    min-height: 44px;
}
.cm-start-restart[hidden] { display: none; }

/* --- grafikos pakopa ---------------------------------------------------- */
.cm-gfx {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid var(--tc-line);
}
.cm-gfx-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.82rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--tc-ink-soft, var(--tc-ink));
    opacity: 0.75;
}
.cm-gfx-opts { display: flex; gap: 8px; }

/* Dvi lygiavertės pakopos, todėl abi vienodo pločio (`flex: 1`) — skiriasi tik
   pažymėjimu. Nepažymėtas variantas NEBLANKINAMAS `opacity`: mažas blankus
   tekstas ant kreminio fono tampa tiesiog neįskaitomas (ta pati klaida, dėl
   kurios HUD glifas ✨ nieko nesakė). Skirtumą neša fonas ir rėmelis. */
.cm-gfx-opt {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    /* 44px lietimo taikinys. */
    min-height: 44px;
    padding: 8px 6px;
    font-family: inherit;
    font-size: 0.92rem; font-weight: 800;
    color: var(--tc-ink);
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-line);
    cursor: pointer;
    transition: transform 120ms var(--tc-ease), box-shadow 120ms var(--tc-ease),
                background-color 120ms var(--tc-ease), border-color 120ms var(--tc-ease);
}
.cm-gfx-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tc-line); }

/* Pažymėta pakopa: rašalo rėmelis + auksinis paviršius — ta pati kalba, kaip
   `.cm-play-btn`, tad „įjungta" atpažįstama be papildomo aiškinimo. */
.cm-gfx-opt.is-on {
    background: var(--tc-gold);
    border-color: var(--tc-ink);
    box-shadow: 0 3px 0 var(--tc-gold-deep);
}
.cm-gfx-opt.is-on:active { box-shadow: 0 1px 0 var(--tc-gold-deep); }

.cm-gfx-ico { font-size: 1.05rem; line-height: 1; }

/* --- sudėtingumo pakopa (2026-08-25) ------------------------------------
   Naudoja TAS PAČIAS `.cm-gfx*` klases (žr. chessmon.html komentarą), tad čia
   lieka tik tai, ko grafikos blokas neturi — paaiškinimo eilutė po mygtukais.

   ⚠️ `min-height` su fiksuota reikšme: tekstas keičiasi perjungiant pakopą
   („Pilna versija..." vs „Lengvesni galvosūkiai..."), ir be rezervuoto
   aukščio kortelė šoktelėtų per kiekvieną paspaudimą. 2 eilutės × 1.35
   eilutės aukščio — telpa ilgesnis vertimas (lenkų/vokiečių). */
.cm-diff-note {
    margin: 8px 0 0;
    min-height: 2.7em;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--tc-ink);
    opacity: 0.72;
}

/* Lengvą pakopą žymim ŽALIAI, ne auksu: auksas jau reiškia „pasirinkta
   grafika", ir du auksiniai blokai vienas virš kito nebeskirtų, KURIS
   pasirinkimas kuriam klausimui. Žalia = „švelnesnis", ta pati prasmė kaip
   `--tc-green` visoje svetainėje. */
.cm-gfx--diff .cm-gfx-opt[data-diff="easy"].is-on {
    background: var(--tc-green);
    border-color: var(--tc-ink);
    box-shadow: 0 3px 0 var(--tc-green-deep);
}
.cm-gfx--diff .cm-gfx-opt[data-diff="easy"].is-on:active {
    box-shadow: 0 1px 0 var(--tc-green-deep);
}

/* ============ SVECIO RAGINIMAS PRISIJUNGTI (2026-08-21) ==================
   Rodomas tik neprisijungusiems (main.js nuima `hidden`).

   Vizualiai TYLESNIS uz „Pradeti": idubes antrinis pavirsius, mygtukai
   maziau kontrastingi. Tai pasiulymas, ne antras pagrindinis veiksmas —
   jei atrodytu vienodai svarbiai, zaidejas stabteletu ties pasirinkimu.

   Lietimo taikiniai: `min-height: 44px` (CLAUDE.md — Apple HIG / WCAG 2.5.5).
   Mobiliajame NEMAZINAMI. */
.cm-guest {
    margin-top: 16px;
    padding: 12px 14px 14px;
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius);
    text-align: center;
}

.cm-guest-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tc-ink);
}

.cm-guest-text {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--tc-ink-soft);
}

.cm-guest-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.cm-guest-btn {
    flex: 1 1 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--tc-ink);
    background: var(--tc-blue);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-blue-deep);
    transition: transform 120ms var(--tc-ease), box-shadow 120ms var(--tc-ease);
}
.cm-guest-btn:hover  { transform: translateY(-2px); box-shadow: 0 5px 0 var(--tc-blue-deep); }
.cm-guest-btn:active { transform: translateY(2px);  box-shadow: 0 1px 0 var(--tc-blue-deep); }

.cm-guest-btn--ghost {
    background: var(--tc-surface);
    box-shadow: 0 3px 0 var(--tc-line);
}
.cm-guest-btn--ghost:hover  { box-shadow: 0 5px 0 var(--tc-line); }
.cm-guest-btn--ghost:active { box-shadow: 0 1px 0 var(--tc-line); }

/* ZEMI EKRANAI. Blokas prideda ~200px, o starto korta 640px auksčio
   telefone (360x640 — vis dar paplitęs) BE jo uzima 423px. Todel nuo 700px
   auksčio ir zemiau visa korta traukiama, kitaip logotipo virsus nukrenta uz
   ekrano (išmatuota: 677px kortoje, `top: -18px`).

   Mygtuku 44x44 NELIECIAM (CLAUDE.md) — traukiami tik tarpai, tekstas ir
   3D logotipas. */
@media (max-height: 700px) {
    .cm-guest { margin-top: 12px; padding: 10px 12px 12px; }
    .cm-guest-title { font-size: 0.9rem; }
    .cm-guest-text { margin-bottom: 10px; font-size: 0.78rem; }

    /* Blokas rodomas tik sveciui, tad ir kortos traukimas taikomas tik tada —
       prisijungusiam nera ko taupyti, jam korta ir taip telpa. */
    .cm-start-box:has(#guest-note:not([hidden])) { padding: 14px 18px 16px; }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-logo3d { height: 92px; }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-logo3d-fallback {
        font-size: 1.7rem; line-height: 92px;
    }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-desc {
        margin-bottom: 12px; font-size: 0.88rem;
    }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-play-btn--big {
        font-size: 1.3rem; padding: 14px 40px;
    }
    /* Statuso eilute tuscia, kol niekas nekraunama — nelaikom jai 1.4em. */
    .cm-start-box:has(#guest-note:not([hidden])) .cm-start-status {
        min-height: 0; margin-top: 6px;
    }

    /* NAUJI BLOKAI (2026-08-23) traukiami VISIEMS, ne tik sveciui: skirtingai
       nuo `#guest-note`, «Pradeti is naujo» ir grafikos pakopa atsiranda ir
       prisijungusiam, tad be sito jo korta zemame ekrane nebetilptu. */
    .cm-start-restart { margin-top: 6px; padding: 8px 16px; font-size: 0.9rem; }
    .cm-gfx { margin-top: 10px; padding-top: 9px; }
    .cm-gfx-label { margin-bottom: 6px; font-size: 0.76rem; }
    .cm-gfx-opt { font-size: 0.86rem; padding: 6px 4px; }

    /* SUDĖTINGUMO PAKOPA (2026-08-25) — dar vienas blokas toje pačioje
       kortoje, tad traukiamas kartu su grafikos. Paaiškinimo eilutė mažinama
       labiausiai: ji informacinė, o ne valdiklis. */
    .cm-diff-note { margin-top: 6px; min-height: 2.6em; font-size: 0.72rem; }
}

/* ⚠️ NAUJA PAKOPA: `max-height: 900px` (2026-08-25).

   KODĖL JOS PRIREIKĖ. Iki šiol žemiausia riba buvo 700px, ir to užteko: pilna
   kortelė (svečias + progresas) tilpdavo į 844px telefoną su atsarga. Pridėjus
   sudėtingumo bloką (~110px) ji išaugo iki 854.3px — t. y. NETELPA būtent
   populiariausiame iPhone dydyje (390x844), kur NĖ VIENAS iš žemesnių
   `@media` blokų neįsijungia.

   IŠMATUOTA (`scratchpad/diff-fit.mjs`, tikras `pointer: coarse`):
     390x844 svečias            800.3px — telpa
     390x844 svečias+progresas  854.3px — PERPILDO 26.3px
     360x640 svečias            657.5px — PERPILDO 33.5px

   Todėl 900px riba traukia kortelę VISUOSE telefonuose, o ne tik žemuose.
   Traukiami TIK tarpai, šriftai ir 3D logotipas — mygtukų 44x44 NELIEČIAM
   (CLAUDE.md). Darbalaukyje (>900px) niekas nesikeičia. */
@media (max-height: 900px) {
    /* Logotipas — brangiausias vienetinis elementas (128px). Mažinamas
       pirmiausia: pavadinimas matomas ir kortelės tekste, ir naršyklės
       kortelėje, ir PWA ikonoje. */
    .cm-start-box:has(#guest-note:not([hidden])) .cm-logo3d,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-logo3d { height: 96px; }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-logo3d-fallback,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-logo3d-fallback {
        font-size: 1.7rem; line-height: 96px;
    }

    /* «Pradėti» lieka pagrindinis veiksmas, tik nebe 1.5rem/18px milžinas.
       Aukštis vis tiek gerokai virš 44px. */
    .cm-start-box:has(#guest-note:not([hidden])) .cm-play-btn--big,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-play-btn--big {
        font-size: 1.3rem; padding: 14px 40px;
    }

    /* Tarpai tarp pakopų grupių. */
    .cm-gfx { margin-top: 10px; padding-top: 9px; }
    .cm-diff-note { margin-top: 6px; min-height: 2.6em; font-size: 0.74rem; }
    .cm-guest { margin-top: 12px; padding: 10px 12px 12px; }
}

/* Dar žemesni ekranai (360x640 ir pan.): 900px pakopos nepakanka —
   išmatuota 657.5px kortelė 640px ekrane. Čia jau slepiam aprašymą ir
   «pristato» kreditą, kaip gulsčiai. */
@media (max-height: 680px) {
    .cm-presents { display: none; }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-desc,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-desc { display: none; }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-logo3d,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-logo3d { height: 72px; }
    .cm-start-box:has(#guest-note:not([hidden])) .cm-logo3d-fallback,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-logo3d-fallback {
        font-size: 1.5rem; line-height: 72px;
    }
    /* Paaiškinimas telpa į 2 eilutes tik esant vietos; čia jos nebėra. */
    .cm-diff-note { display: none; }

    /* ⚠️ `:has()` VARIANTAI (specifiškumo spąstai, kaip `max-height: 400px`
       bloke): `max-height: 900px` mažina mygtuką per 0,3,1 selektorių, tad
       grynas `.cm-play-btn--big` (0,1,0) jo nenugalėtų.

       Reikšmės parinktos pagal IŠMATUOTĄ 320x568 (iPhone SE) atvejį: siaurame
       320px ekrane tekstai laužiasi į daugiau eilučių, todėl kortelė
       (573.3px) vos prasilenkdavo su 568px ekranu. Su šiuo suspaudimu ji
       telpa be slinkimo. */
    .cm-play-btn--big,
    .cm-start-box:has(#guest-note:not([hidden])) .cm-play-btn--big,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-play-btn--big {
        font-size: 1.15rem; padding: 11px 28px;
    }
    .cm-start-restart { margin-top: 5px; padding: 7px 14px; font-size: 0.85rem; }
    .cm-gfx { margin-top: 8px; padding-top: 7px; }
    .cm-guest,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-guest {
        margin-top: 8px; padding: 8px 10px 10px;
    }
    .cm-start-status { min-height: 0; margin-top: 5px; }
}

/* LANDSCAPE (telefonas paverstas). Cia auksčio itin maza — 740x360 korta be
   raginimo uzima 352px, o su juo 431px, t.y. neišsitektu (išmatuota).
   Todel svecio variante logotipas dar mazinamas, o aprašymas ir «pristato»
   kreditas slepiami: ju vieta reikalingesne mygtukams.

   Aprasymas NEPRARANDAMAS visam laikui — jis kartojasi puslapio `<meta>` ir
   nuorodose i zaidima; cia jis tik nustumtu «Pradeti» uz ekrano. */
@media (max-height: 520px) {
    .cm-guest { margin-top: 8px; padding: 8px 12px 10px; }
    .cm-guest-title { font-size: 0.86rem; }
    .cm-guest-text { margin-bottom: 8px; font-size: 0.76rem; }

    /* Tie patys skaiciai, bet VISIEMS (zr. komentara zemiau prie `.cm-desc`) —
       svecio korta papildomai netraukiama, nes po sio sumazinimo ji jau telpa. */
    .cm-start-box { padding: 10px 16px 12px; }
    .cm-logo3d { height: 62px; }
    .cm-logo3d-fallback { font-size: 1.4rem; line-height: 62px; }
    /* ⚠️ `:has(#guest-note)` SALYGA NUIMTA nuo `.cm-desc`/`.cm-presents`
       (2026-08-23). Ji reiske „traukiam korta tik sveciui", ir tai buvo
       teisinga, kol PRISIJUNGUSIO korta dar tilpo. Ji netilpo: isamatuota
       845x390 — 413.5px korta 390px ekrane, t.y. «Pradeti» nukirstas net be
       jokio svecio raginimo (`scripts/chessmon-hud-audit.mjs`).

       Aprasymas ir «pristato» kreditas gulsciai slepiami VISIEMS. Jie
       neprarandami: aprasymas kartojasi puslapio `<meta>` ir nuorodose i
       zaidima, o kreditas — stacioje orientacijoje ir darbalaukyje. */
    .cm-presents,
    .cm-desc { display: none; }
    .cm-play-btn--big { font-size: 1.15rem; padding: 12px 32px; }
    /* Statuso eilute tuscia, kol niekas nekraunama — nelaikom jai 1.4em. */
    .cm-start-status { min-height: 0; margin-top: 6px; }

    /* Landscape: `.cm-keys` (4 eilutes klavisu) ir taip slepiamas telefone, tad
       liko tik nauji blokai. Jie susispaudzia i viena eilute, bet 44px lietimo
       taikinio NEPRARANDA (CLAUDE.md: mobilus media query niekada nemazina
       mygtuku zemiau 44px). */
    .cm-start-restart { margin-top: 5px; padding: 6px 14px; font-size: 0.85rem; }
    .cm-gfx { margin-top: 8px; padding-top: 7px; }
    .cm-gfx-label {
        /* Uzrasas «Grafika» slepiamas: pati pakopa nusakoma mygtuku tekstais
           («Iprasta» / «Auksta»), tad antraste cia tik eikvotu aukSti. */
        display: none;
    }
    .cm-gfx-opts { gap: 6px; }
    .cm-gfx-opt { font-size: 0.82rem; padding: 5px 4px; }

    /* SUDĖTINGUMO PAKOPA gulsčiai (2026-08-25).

       Paaiškinimo eilutė SLEPIAMA. Ji naudinga, bet gulsčiai kainuoja ~35px —
       tiek pat, kiek visas pakopos blokas. Pasirinkimas lieka suprantamas iš
       mygtukų tekstų («Lengvas» / «Pilnas»), o pilnas paaiškinimas matomas
       stačioje orientacijoje ir darbalaukyje — kaip `.cm-desc` ir
       «pristato» kreditas aukščiau.

       Antraštė slepiama dėl tos pačios priežasties, kaip «Grafika». */
    .cm-diff-note { display: none; }
    .cm-gfx--diff { margin-top: 8px; padding-top: 7px; }

    /* ⚠️ BLOGIAUSIAS ATVEJIS: progresas IR svecias vienu metu (2026-08-23).

       Tada kortoje yra VISKAS: logotipas + «Testi» + «Pradeti is naujo» +
       grafikos pakopa + raginimas prisijungti. Isamatuota gyvame prod'e
       845x390: 446.3px korta 390px ekrane — «Prisijungti» nukrenta i 388-432px,
       t.y. UZ EKRANO. Pirmasis auditas to nepagavo, nes matavo BE progreso
       (tada «Pradeti is naujo» paslepta ir korta trumpesne 46px).

       Sprendimas — logotipas. Gulsciai su pilna korta jis yra brangiausias
       (62px) ir maziausiai reikalingas: zaidimo pavadinimas matomas kortelės
       tekste, narsykles kortelėje ir PWA ikonoje. Slepiamas TIK kai korta
       realiai pilna — `:has()` cia tinka, nes salyga tikra: rodomas svecio
       raginimas ARBA «Pradeti is naujo».

       Rezultatas: 446.3 -> ~384px, t.y. telpa be slinkimo. */
    .cm-start-box:has(#guest-note:not([hidden])) .cm-logo3d,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-logo3d { display: none; }

    /* Svecio raginimas gulsciai — dar kompaktiskiau. Mygtuku 44px NELIECIAM. */
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-guest {
        margin-top: 6px; padding: 6px 10px 8px;
    }
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-guest-text {
        margin-bottom: 6px; font-size: 0.72rem;
    }

    /* ⚠️ BLOGIAUSIAS ATVEJIS + SUDĖTINGUMO PAKOPA (2026-08-25).

       Aukščiau aprašytas 446.3 -> ~384px sprendimas paliko vos ~6px atsargos
       390px ekrane. Sudėtingumo blokas prideda dar ~50px net su paslėpta
       paaiškinimo eilute, tad pilnoje kortoje (progresas IR svečias) jis vėl
       nustumtų «Prisijungti» už ekrano.

       Todėl būtent tuo atveju abi pakopų grupės suspaudžiamos iki minimumo:
       skiriamoji linija ir viršutinis tarpas nuimami (jie tik dekoratyvūs, o
       grupes vis tiek skiria mygtukų eilutės), o mygtukai lieka 44px —
       CLAUDE.md riba negalioja tik tarpams, ne lietimo taikiniams. */
    .cm-start-box:has(#guest-note:not([hidden])):has(#btn-restart:not([hidden])) .cm-gfx {
        margin-top: 5px; padding-top: 0; border-top: none;
    }
}

/* ⚠️ ŽEMIAUSI GULSČIŲ EKRANŲ ATVEJAI: `max-height: 400px` (2026-08-25).

   845x390 telpa (išmatuota 372.4px), bet 740x360 — NE: ta pati 372.4px kortelė
   360px ekrane perpildo 28.4px. Skirtumas tik 30px ekrano aukščio, tad reikia
   paskutinio, griežčiausio suspaudimo.

   Ką dar galima atimti, NELIEČIANT 44px taikinių:
     - «Pradėti» paraštės (18px -> 10px vertikaliai),
     - tarpai tarp pakopų grupių ir svečio bloko,
     - statuso eilutė (ji tuščia, kol niekas nekraunama).
   Mygtukų AUKŠTIS nekeičiamas — jį garantuoja `min-height: 44px`. */
@media (max-height: 400px) {
    .cm-start-box { padding: 8px 14px 10px; }
    /* ⚠️ `:has()` VARIANTAI BŪTINI. `max-height: 900px` blokas aukščiau
       mažina mygtuką per `.cm-start-box:has(...) .cm-play-btn--big`
       (specifiškumas 0,3,1), tad grynas `.cm-play-btn--big` (0,1,0) jo
       NENUGALI — mygtukas liktų 61px ir kortelė toliau perpildytų.
       Ta pati specifiškumo spąstų klasė, kaip `#auth-container-mobile`
       app režime (žr. CLAUDE.md). */
    .cm-play-btn--big,
    .cm-start-box:has(#guest-note:not([hidden])) .cm-play-btn--big,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-play-btn--big {
        font-size: 1.05rem; padding: 10px 24px;
    }
    .cm-start-restart { margin-top: 4px; padding: 5px 12px; font-size: 0.8rem; }
    .cm-gfx { margin-top: 6px; padding-top: 0; border-top: none; }
    .cm-gfx-opts { gap: 5px; }
    .cm-guest,
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-guest {
        margin-top: 5px; padding: 5px 8px 6px;
    }
    .cm-guest-title { font-size: 0.78rem; margin-bottom: 2px; }
    /* Svečio paaiškinimas gulsčiai su PILNA kortele slepiamas: tą patį
       pasako patys mygtukai «Prisijungti»/«Registruotis», o čia kiekvienas
       pikselis jau matuojamas (išmatuota 740x360 — trūko 12px). */
    .cm-start-box:has(#btn-restart:not([hidden])) .cm-guest-text { display: none; }
    .cm-guest-text { margin-bottom: 5px; font-size: 0.7rem; }
    /* ⚠️ `display:none` ČIA NEGALIMA: šioje eilutėje rodomi krovimo ir klaidų
       pranešimai («Kraunama…», «Nepavyko užkrauti», «WebGL nepalaikomas») —
       paslėpus, žaidėjas ties nepavykusiu krovimu matytų tik neveikiantį
       mygtuką. Nuimam tik REZERVUOTĄ aukštį; atsiradus tekstui eilutė
       išsiplečia pati. */
    .cm-start-status { min-height: 0; margin-top: 4px; font-size: 0.75rem; }
}

/* ======================= PASAULIS + HUD ======================= */

.cm-world {
    position: fixed; inset: 0; z-index: 1;
    touch-action: none;
}
.cm-world canvas { display: block; }

.cm-hud {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 0;
    pointer-events: none;
}
/* Siauruose telefonuose (390px) kairė statistika išstumdavo dešinės pusės
   mygtukus už ekrano — uždarymo mygtuko nebuvo galima paspausti.
   Kairė gali trauktis ir slinktis, dešinė NIEKADA nesitraukia. */
.cm-hud-left, .cm-hud-right { display: flex; gap: 8px; pointer-events: auto; }
.cm-hud-left {
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.cm-hud-left::-webkit-scrollbar { display: none; }
.cm-hud-right { flex: 0 0 auto; }

.cm-hud-stat {
    display: flex; align-items: center; gap: 6px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--tc-line);
    padding: 5px 14px;
    font-weight: 800;
    font-size: 0.95rem;
    flex: 0 0 auto;        /* neleidžiam suplokštėti siaurame ekrane */
    white-space: nowrap;
}
.cm-hud-ico { color: var(--tc-gold-text); font-size: 0.8rem; font-weight: 800; }

.cm-hud-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-line);
    color: var(--tc-ink);
    font-size: 1.1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 120ms var(--tc-ease);
}
.cm-hud-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tc-line); }

/* ======================= CHESSDEX ======================= */

.cm-hud-stat--btn {
    cursor: pointer;
    font: inherit;
    transition: transform 120ms var(--tc-ease);
}
.cm-hud-stat--btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tc-line); }

.cm-dex {
    position: fixed;
    top: calc(62px + env(safe-area-inset-top));
    left: 12px;
    z-index: 15;
    width: min(320px, calc(100vw - 24px));
    /* Niekada neišlįsti pro ekrano apačią — žemuose languose sąrašas scrollinasi */
    max-height: calc(100dvh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 5px 0 var(--tc-line);
    overflow: hidden;
}
.cm-dex-head, .cm-dex-foot { flex: 0 0 auto; }
.cm-dex-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    font-weight: 800;
    background: var(--tc-gold);
    border-bottom: 2px solid var(--tc-ink);
}
.cm-dex-close {
    width: 28px; height: 28px;
    font-size: 0.9rem; font-weight: 800;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: 8px;
    cursor: pointer;
}
.cm-dex-list {
    list-style: none; padding: 6px 0;
    flex: 1 1 auto; overflow-y: auto; min-height: 0;
}
.cm-dex-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px;
    opacity: 0.45;
}
.cm-dex-item--caught { opacity: 1; }
.cm-dex-glyph {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    border: 2px solid var(--tc-ink);
    border-radius: 50%;
    background: var(--tc-surface-2);
}
.cm-dex-glyph--t1 { background: var(--tc-gold); }
.cm-dex-glyph--t2 { background: var(--tc-green); }
.cm-dex-glyph--t3 { background: var(--tc-blue); }
.cm-dex-glyph--t4 { background: var(--tc-red); }
.cm-dex-glyph--t5 { background: var(--tc-ink); color: var(--tc-gold); }
.cm-dex-name { flex: 1; font-weight: 700; font-size: 0.92rem; }
.cm-dex-stars { color: var(--tc-gold-text); font-size: 0.72rem; letter-spacing: 1px; }
.cm-dex-count { font-weight: 800; font-size: 0.9rem; color: var(--tc-green-text); min-width: 34px; text-align: right; }
.cm-dex-foot {
    padding: 9px 14px;
    font-size: 0.8rem; font-weight: 600;
    color: var(--tc-ink-soft);
    background: var(--tc-surface-2);
    border-top: 2px solid var(--tc-line);
}

/* ======================= VAIRALAZDĖ =======================

   2026-08-18: bandytas X/D-pad valdymas, bet vartotojas grąžino analoginį
   rutuliuką — jis pasirodė patogesnis pirštui. Bėgimo mygtukas PALIKTAS
   (anksčiau bėgimą įjungdavo pastūmus rutuliuką iki krašto — su atskiru
   mygtuku aiškiau matoma/valdoma, kada bėgama; ištvermė ribota). */

.cm-joystick {
    position: fixed;
    left: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 12;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(27, 36, 48, 0.5);
    touch-action: none;
    display: flex; align-items: center; justify-content: center;
}
.cm-joystick .knob {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--tc-gold);
    border: 2px solid var(--tc-ink);
    box-shadow: 0 3px 0 var(--tc-gold-deep);
    pointer-events: none;
}

/* ======================= DEŠINĖS PUSĖS MYGTUKŲ STULPELIS =======================

   Šuolis, bėgimas, šaudymas — VISI tame pačiame `right: 26px` stulpelyje.
   2026-08-18: rastas realus persidengimas — bėgimo mygtukas mobiliajame
   media query lipo ant šaudymo mygtuko (jų `bottom` intervalai susikirsdavo:
   run 98–154px, fire 104–166px). Priežastis — kiekvienas mygtukas turėjo
   NEPRIKLAUSOMĄ, iš akies parinktą `bottom`, niekaip nesusietą su kaimyno
   realiu aukščiu.

   Sprendimas: VIENA stack'o pradžios konstanta (`--cm-stack-gap`) ir kiekvieno
   sekančio mygtuko `bottom` skaičiuojamas iš PRIEŠ TAI einančio mygtuko
   `bottom + height + gap` — tas pats principas, kaip kairėje pusėje jau
   naudojamas `--cm-joy-h`/`--cm-row-h`. Todėl dydžius pakeitus vienoje
   vietoje, likusieji automatiškai persiskaičiuoja ir nebesusikerta. */

:root { --cm-stack-gap: 12px; }

/* ⚠️ VALDIKLIAI NERODOMI, KOL NEPRASIDĖJO ŽAIDIMAS (2026-08-24).

   `setupJoystick()` / `setupFireButton()` nuima `hidden` iš karto po įkėlimo,
   dar rodant starto kortelę. Kortelė yra `z-index: 30`, o valdikliai — 12,
   tad jie atsiduria PO ja, bet MATOSI kortelės apačioje ir šonuose: telefone
   po kortele kyšo vairalazdė ir trys mygtukai, tarsi žaidimas jau vyktų.
   Paspausti juos vis tiek negalima (kortelė sugeria lietimus), tad tai grynas
   vizualinis triukšmas, klaidinantis vartotoją.

   Sąlyga rišama prie `#hud[hidden]`, nes būtent `revealWorld()` (main.js)
   nuima `hidden` nuo `#hud` — tai TIKRASIS žaidimo pradžios momentas. Taip
   taisyklė automatiškai išsijungia teisingu laiku ir nereikia jokio naujo
   JS ar klasės.

   Rasta pakuojant Android APK, bet klaida yra ir svetainėje — bet kuriame
   liečiamame įrenginyje. Todėl taisoma čia, ne APK pataisose. */
#hud[hidden] ~ .cm-joystick,
#hud[hidden] ~ .cm-fire-btn,
#hud[hidden] ~ .cm-run-btn,
#hud[hidden] ~ .cm-jump-btn,
#hud[hidden] ~ .cm-action-btn { display: none !important; }

.cm-jump-btn {
    position: fixed;
    right: 26px;
    bottom: calc(38px + env(safe-area-inset-bottom));
    z-index: 12;
    width: 74px; height: 74px;
    border-radius: 50%;
    font-size: 1.9rem; font-weight: 800;
    color: var(--tc-ink);
    background: var(--tc-gold);
    border: 2px solid var(--tc-ink);
    box-shadow: 0 4px 0 var(--tc-gold-deep);
    touch-action: none;
    cursor: pointer;
}
.cm-jump-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tc-gold-deep); }

/* Bėgimo mygtukas — TIESIOG virš šuolio: šuolio bottom (38px) + jo aukštis
   (74px) + tarpas. Aktyvus (laikomas) — auksinis, kad matytųsi, jog bėgama. */
.cm-run-btn {
    position: fixed;
    right: 26px;
    bottom: calc(38px + 74px + var(--cm-stack-gap) + env(safe-area-inset-bottom));
    z-index: 12;
    width: 62px; height: 62px;
    border-radius: 50%;
    font-size: 1.6rem; font-weight: 800;
    color: var(--tc-ink);
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    box-shadow: 0 4px 0 var(--tc-line);
    touch-action: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cm-run-btn.is-on {
    background: var(--tc-gold);
    box-shadow: 0 1px 0 var(--tc-gold-deep);
    transform: translateY(3px);
}

/* ======================= KOVOS HUD ======================= */

/* VIENA apatinė plokštelė: gyvybės + ginklas + boost.
   Anksčiau tai buvo 3 atskiros plokštelės — per daug dėžučių ekrane
   (2026-08-07 vartotojo pastaba). Dabar vienas rėmelis, viduje skirtukai. */
.cm-chud {
    position: fixed;
    left: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 12;
    display: flex; align-items: center; gap: 10px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--tc-line);
    padding: 5px 14px;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}
.cm-chud-hearts { display: flex; gap: 3px; }
.cm-chud-heart { font-size: 1.1rem; line-height: 1; transition: opacity 200ms, transform 200ms; }
.cm-chud-heart--lost { opacity: 0.22; transform: scale(0.82); filter: grayscale(1); }

.cm-chud-weapon {
    display: flex; align-items: center; gap: 5px;
    font-weight: 800; font-size: 0.9rem;
    white-space: nowrap;
    /* skiriamoji linija vietoj atskiro rėmelio */
    border-left: 2px solid var(--tc-line);
    padding-left: 10px;
}
.cm-chud-wico { font-size: 1rem; }
.cm-chud-ammo {
    min-width: 26px; text-align: right;
    color: var(--tc-gold-text);
    font-variant-numeric: tabular-nums;
}
.cm-chud-ammo--empty { color: var(--tc-red-text); }

.cm-chud-boost {
    display: flex; align-items: center; gap: 5px;
    color: var(--tc-green-text);
    font-weight: 800; font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    border-left: 2px solid var(--tc-line);
    padding-left: 10px;
}

/* Ginklų juosta — perjungimas paspaudus (mobiliajame) arba 1/2/3 klavišais */
.cm-wbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 12;
    display: flex; gap: 6px;
}
.cm-wslot {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 58px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-line);
    padding: 5px 9px;
    font-weight: 800; font-size: 0.68rem;
    color: var(--tc-ink);
    cursor: pointer;
    transition: transform 120ms var(--tc-ease);
}
.cm-wslot:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tc-line); }
.cm-wslot--active { background: var(--tc-gold); box-shadow: 0 3px 0 var(--tc-gold-deep); }
.cm-wslot--locked { opacity: 0.4; }
.cm-wslot-key { font-size: 0.6rem; color: var(--tc-ink-soft); }
.cm-wslot--active .cm-wslot-key { color: var(--tc-ink); }

/* Šovinių likutis kiekvienam ginklui — matomas ir tada, kai ginklas nelaikomas */
.cm-wslot-ammo {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tc-gold-text);
    font-variant-numeric: tabular-nums;
}
.cm-wslot--active .cm-wslot-ammo { color: var(--tc-ink); }
.cm-wslot-ammo--empty { color: var(--tc-red-text); }

/* Šaudymo mygtukas (mobilus) — TREČIAS stulpelyje, virš bėgimo mygtuko.
   bottom = run bottom (38+74+12=124) + run aukštis (62) + tarpas.
   Skaičiuojama iš .cm-run-btn reikšmių, kad pakeitus vieną, kitas neužliptų. */
.cm-fire-btn {
    position: fixed;
    right: 26px;
    bottom: calc(38px + 74px + var(--cm-stack-gap) + 62px + var(--cm-stack-gap) + env(safe-area-inset-bottom));
    z-index: 12;
    width: 74px; height: 74px;
    border-radius: 50%;
    font-size: 1.7rem;
    color: #FFFFFF;
    background: var(--tc-red);
    border: 2px solid var(--tc-ink);
    box-shadow: 0 4px 0 var(--tc-line);
    touch-action: none;
    cursor: pointer;
}
.cm-fire-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tc-line); }

/* Paėmimo / įspėjimo pranešimas */
.cm-ptoast {
    position: fixed;
    left: 50%;
    /* ⚠️ 2026-08-24 (vartotojo pastaba: „perkelk auksciau ekrane").
       Buvo 112px — pranesimas kabodavo maždaug ties horizontu ir uzstodavo
       veikeja bei priesais ji esancius daiktus. Dabar keliamas PRIE PAT
       virsutines HUD juostos: ji baigiasi ~50px (10px padding + 40px pilule),
       tad 56px yra pirmas laisvas taskas po ja.

       SAMONINGA: pranesimas gali UZDENGTI zemiau esancias HUD eilutes
       (issukis, gyvybes, begimo laikmatis). Tam ir yra `z-index: 40` —
       jis auksciau uz visa HUD (10-16). Pranesimas trumpalaikis (~1.5 s),
       o rodikliai po juo — nuolatiniai, tad trumpas ju uzdengimas pigesnis
       nei pranesimas vidury zaidimo lauko. */
    top: calc(56px + env(safe-area-inset-top));
    transform: translate(-50%, -10px);
    z-index: 40;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-line);
    padding: 9px 20px;
    font-weight: 800; font-size: 0.95rem;
    /* ⚠️ Buvo `white-space: nowrap` — ilgi pranesimai (pvz. `runGuestWarn`,
       91 simbolis) issitempdavo uz ekrano rezio ir telefone likdavo
       neperskaitomi. Dabar juosta lauzosi i kelias eilutes ir turi apribota
       ploti. `text-wrap: balance` isdelioja eilutes tolygiai; nepalaikancios
       narsykles ji tiesiog ignoruoja. */
    max-width: min(560px, calc(100vw - 32px));
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--tc-ease), transform 220ms var(--tc-ease);
}
.cm-ptoast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= VEIKSMO SVIRTELE (2026-08-24) =================

   Kodel ji atsirado: raginimas „Bakstelek laikrodi" buvo NEIVYKDOMAS.
   Ciferblatas priejus netelpa i ekrana (jis ~8.5 vnt. auksstyje), o realiai
   reikejo bakstelti pati toasta — kuris turi `pointer-events: none`, tad
   paspaudimas praeidavo kiaurai i `cm-hud-right`. Mobiliajame Chessmon Run
   pradeti buvo NEIMANOMA.

   VIETA — AKIU LYGYJE (vartotojo pasiulymas). Vertikaliai 58% ekrano:
   ties veikejo liemeniu, ZEMIAU horizonto (kur vyksta veiksmas) ir AUKSCIAU
   vairalazdes bei mygtuku (kurie prasideda ~78%). Todel nykstys ji pasiekia
   nepridengdamas nei scenos vidurio, nei valdikliu.

   ⚠️ `pointer-events: auto` cia BUTINAS ir yra visa esme — tai VIENINTELIS
   elementas siame sluoksnyje, kuris tikrai priima palietima.

   Lietimo taikinys: min-height 52px > 44px (Apple HIG / WCAG 2.5.5). */
.cm-action-btn {
    position: fixed;
    left: 50%;
    top: 58%;
    transform: translate(-50%, 0) scale(1);
    z-index: 41;                 /* virs toasto (40) — jis niekada neuzstoja */
    pointer-events: auto;
    min-height: 52px;
    max-width: min(300px, calc(100vw - 48px));
    padding: 12px 26px;
    background: var(--tc-gold);
    color: var(--tc-ink);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-gold-deep);
    font-weight: 800;
    font-size: 1rem;
    text-align: center;
    text-wrap: balance;
    cursor: pointer;
    touch-action: manipulation;
    animation: cm-action-pulse 1.6s ease-in-out infinite;
}
.cm-action-btn:active {
    transform: translate(-50%, 3px) scale(1);
    box-shadow: 0 1px 0 var(--tc-gold-deep);
    animation: none;
}
/* Svelnus pulsavimas — kad akis ji pastebetu tarp scenos detaliu.
   `transform` kartojamas pilnas (su translate), kitaip centravimas dingtu. */
@keyframes cm-action-pulse {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50%      { transform: translate(-50%, 0) scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
    .cm-action-btn { animation: none; }
}
.cm-ptoast--good { background: var(--tc-green); }
.cm-ptoast--bad  { background: var(--tc-red); color: #FFFFFF; }

/* ============ MOKOMASIS PATARIMAS (2026-08-26) ============

   APAČIOJE, ne viršuje: `.cm-ptoast` jau užima viršų, o patarimas kabo
   ilgai (iki 9 s) — persidengę jie būtų neperskaitomi.

   ⚠️ `pointer-events` NEUŽDĖTAS. `.cm-ptoast` jį turi `none`, ir dėl to
   ant jo kabinti mygtukai NIEKADA nesuveikdavo (žr. `#action-btn`
   komentarą chessmon.html). Čia mygtukai turi veikti — WCAG 2.2.1
   reikalauja, kad automatiškai dingstantį pranešimą būtų galima uždaryti.
   Todėl elementas yra siauras ir apačioje, kur nekliudo lentai. */
.cm-tip {
    position: fixed;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom));
    transform: translate(-50%, 10px);
    z-index: 41;                     /* virš `.cm-ptoast` (40) */
    display: flex;
    align-items: center;
    gap: 10px;
    /* ⚠️ 620px, ne 560px kaip `.cm-ptoast`: cia salia teksto dar stovi DU
       mygtukai (~150px), tad prie 560px tekstas likdavo 3 siauros eilutes
       (ismatuota 844px plocio lange). Tekstui reikia savo vietos. */
    /* ⚠️ `width`, NE tik `max-width`: `position: fixed` elementas yra
       shrink-to-fit, tad su vienu `max-width` jis liktu ties turinio
       plociu (ismatuota 422px is 620 galimu) ir tekstas be reikalo
       lauztusi i 3 eilutes. Fiksuotas plotis atiduoda vieta tekstui. */
    width: min(620px, calc(100vw - 24px));
    padding: 10px 12px 10px 16px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-line);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    /* ⚠️ NE `balance` (kaip `.cm-ptoast`): jis isvienodina eiluciu ilgi ir
       flex eiluteje tekstas susispaudzia i 3 siauras eilutes, nors vietos
       yra (ismatuota 2026-08-26, 844px langas). `pretty` tvarko tik naslaite. */
    text-wrap: pretty;
    overflow-wrap: anywhere;
    opacity: 0;
    transition: opacity 220ms var(--tc-ease), transform 220ms var(--tc-ease);
}
.cm-tip--show { opacity: 1; transform: translate(-50%, 0); }

.cm-tip-ico  { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; }
.cm-tip-text {
    /* `flex-basis: 0` + `flex-grow: 1` = uzima VISA likusia vieta.
       Su `auto` bazine jis liktu ties savo „natūraliu" plociu. */
    flex: 1 1 0;
    min-width: 0;
}

/* Mygtukai: 44x44 tap target (Apple HIG / WCAG 2.5.5) — mobiliajame
   NEMAŽINAMI, tai projekto taisyklė. */
.cm-tip-off,
.cm-tip-x {
    flex: 0 0 auto;
    min-height: 44px;
    border: 2px solid var(--tc-ink);
    border-radius: 10px;
    background: var(--tc-surface-2, #F4EFE4);
    color: var(--tc-ink);
    font: 700 0.78rem/1 inherit;
    cursor: pointer;
}
.cm-tip-off { padding: 0 12px; }
.cm-tip-x   { min-width: 44px; font-size: 0.95rem; }
.cm-tip-off:hover,
.cm-tip-x:hover { background: var(--tc-line); }
.cm-tip-off:active,
.cm-tip-x:active { transform: translateY(2px); }
.cm-tip-off:focus-visible,
.cm-tip-x:focus-visible { outline: 3px solid var(--tc-gold); outline-offset: 2px; }

/* Telefone: tekstas atskiroje eilutėje, mygtukai po juo — kitaip
   „Daugiau nerodyti" suspaustų tekstą iki 2-3 žodžių per eilutę. */
@media (max-width: 560px) {
    .cm-tip {
        flex-wrap: wrap;
        bottom: calc(var(--cm-joy-h, 132px) + 16px + env(safe-area-inset-bottom));
        padding: 12px;
    }
    .cm-tip-text { flex: 1 1 100%; order: 1; }
    .cm-tip-ico  { order: 0; }
    .cm-tip-off  { order: 2; margin-left: auto; }
    .cm-tip-x    { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-tip { transition: none; }
}

/* Žalos blyksnis — raudona vinjetė per visą ekraną */
.cm-hurt {
    position: fixed; inset: 0;
    z-index: 38;
    pointer-events: none;
    box-shadow: inset 0 0 0 0 rgba(226, 87, 76, 0);
    opacity: 0;
}
.cm-hurt.show { animation: cm-hurt-flash 420ms; }
@keyframes cm-hurt-flash {
    0%   { opacity: 0; box-shadow: inset 0 0 0 0 rgba(226, 87, 76, 0); }
    35%  { opacity: 1; box-shadow: inset 0 0 0 22px rgba(226, 87, 76, 0.5); }
    100% { opacity: 0; box-shadow: inset 0 0 0 0 rgba(226, 87, 76, 0); }
}

/* ======================= ŽŪTIES EFEKTAS =======================

   „Nokautas" (2026-08-22, vartotojo prašymu). Anksčiau žuvus ekranas
   akimirksniu perkeldavo žaidėją į startą — be jokio grįžtamojo ryšio,
   todėl atrodydavo kaip klaida, o ne kaip žūties pasekmė.

   Viskas daroma CSS animacijomis ant vieno perdengiamo sluoksnio: NULIS
   papildomų draw call'ų 3D scenoje ir jokios naujos geometrijos.

   Sluoksnis NEPERIMA pelės (`pointer-events: none`) — atgimus žaidimas
   valdomas iš karto, dar nespėjus efektui užgesti.

   z-index 39: virš žalos blyksnio (.cm-hurt = 38), bet žemiau šachmatinės
   uždangos (.cm-wipe = 60) — kad įėjimas į mūšį visada uždengtų žūtį. */
.cm-death {
    position: fixed;
    inset: 0;
    z-index: 39;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(27, 36, 48, 0.72);   /* --tc-ink */
}
.cm-death.show { animation: cm-death-fade 1800ms var(--tc-ease, ease) forwards; }

/* Fonas: greitai aptemsta, kabo, tada prasiskleidžia. */
/* ⚠️ Trukme 1800 ms (buvo 1200) — zr. `DEATH_FX_MS` main.js. Procentai
   PERSKAICIUOTI, o ne tiesiog istempti: uzsidegimas/gesimas lieka tokios
   pat trukmes kaip anksciau (~145 / ~335 ms), o visas pridetas laikas
   nueina i KABEJIMA, kol uzrasas skaitomas. */
@keyframes cm-death-fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    81%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Užrašas — ta pati „kietų šešėlių" kalba kaip .tc-card / .cm-banner:
   jokių gradientų, jokio blur, šešėlis be išplaukimo. */
.cm-death-card {
    padding: 18px 34px;
    background: var(--tc-red, #E2574C);
    color: #FFFFFF;
    border: 3px solid var(--tc-ink, #1B2430);
    border-radius: 14px;
    box-shadow: 0 6px 0 var(--tc-red-deep, #B03A31);
    text-align: center;
    transform: scale(0.7) rotate(-4deg);
}
.cm-death.show .cm-death-card { animation: cm-death-pop 1800ms var(--tc-ease, ease) forwards; }

.cm-death-title {
    font-size: clamp(26px, 7vw, 44px);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.cm-death-sub {
    margin-top: 6px;
    font-size: clamp(13px, 3.4vw, 17px);
    font-weight: 700;
    opacity: 0.92;
}

/* Kortelė „įkrenta" atgal į vietą ir švelniai atsitraukia. */
@keyframes cm-death-pop {
    0%   { transform: scale(0.7) rotate(-4deg); opacity: 0; }
    9%   { transform: scale(1.06) rotate(-2deg); opacity: 1; }
    17%  { transform: scale(1) rotate(-2deg); }
    81%  { transform: scale(1) rotate(-2deg); opacity: 1; }
    100% { transform: scale(0.94) rotate(-2deg); opacity: 0; }
}

/* Pasaulio pakrypimas — „nokauto" pojūtis. Dedama ant #game-container,
   kaip ir .cm-shake, tad naudoja tą patį transform kanalą (nesimuša:
   .cm-shake trunka 380ms ir žūties metu nekabinama). */
.cm-knock { animation: cm-knock 1800ms var(--tc-ease, ease); }
@keyframes cm-knock {
    0%   { transform: rotate(0deg) scale(1); }
    7%   { transform: rotate(2.4deg) scale(1.03); }
    81%  { transform: rotate(2.0deg) scale(1.02); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ======================= ŽEMĖLAPIS ======================= */

.cm-map {
    position: fixed;
    top: calc(62px + env(safe-area-inset-top));
    right: 12px;
    z-index: 15;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 5px 0 var(--tc-line);
    overflow: hidden;
}
.cm-map-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    font-weight: 800;
    background: var(--tc-gold);
    border-bottom: 2px solid var(--tc-ink);
}
/* `margin: auto` — legenda po žemėlapiu platesnė už patį drobę (220px), tad
   be centravimo drobė prilipdavo prie kairio krašto ir dešinėje likdavo balta
   juosta (matyta 2026-08-19 pridėjus „giria" įrašą į legendą). */
.cm-map-canvas { display: block; margin: 0 auto; }
.cm-map-legend {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    /* Legenda nediktuoja plokštės pločio: ji laužiasi į kelias eilutes, o
       plotį nustato drobė (220px + paraštės). */
    max-width: 244px;
    box-sizing: border-box;
    padding: 7px 12px;
    font-size: 0.72rem; font-weight: 600;
    color: var(--tc-ink-soft);
    background: var(--tc-surface-2);
    border-top: 2px solid var(--tc-line);
}

/* ======================= CHESSMON RUN (laiko iššūkis) =======================

   Laikmatis rodomas TIK vykstant iššūkiui. Reikalavimas buvo „neįkyrus,
   nedidelis": iššūkis trunka 10-20 min, tad ryškus laikrodis vargintų akį.

   VIETA: kairėje, PO `.cm-hud` statistika. Dienos iššūkio piliulė (`.cm-quest`)
   jau užima viršų per vidurį, o dešinėje yra mygtukai — todėl kairė yra
   vienintelė laisva vieta, kuri nesusiduria nei su jais, nei su mobiliu
   joistiku (apačioje kairėje) ar šaudymo mygtuku (apačioje dešinėje). */
.cm-run {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    z-index: 11;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--tc-line);
    padding: 3px 11px;
    opacity: 0.92;
    pointer-events: none;   /* neblokuoja žaidimo paspaudimų */
}
.cm-run-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 700;
}
.cm-run-ico { font-size: 0.9rem; }
/* `tabular-nums` — kitaip skaitmenys skirtingo pločio ir laikmatis „šokinėja" */
.cm-run-time {
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink);
    min-width: 3.4em;
}
.cm-run-prog {
    font-variant-numeric: tabular-nums;
    color: var(--tc-gold-text);
}

/* Taškiukai: 7 rūšys. Užsipildo pagaunant — matosi progresas nežiūrint į
   skaičių. Chessdex NELIEČIAMAS: jis visada rodo NUOLATINĘ kolekciją, o šie
   taškiukai — tik šio bandymo (žr. ai/plans/2026-08-20-chessmon-run.md). */
.cm-run-pips {
    display: flex; gap: 3px; margin-top: 3px;
    justify-content: center;
}
.cm-run-pip {
    width: 7px; height: 7px; border-radius: 50%;
    border: 1.5px solid var(--tc-ink);
    background: transparent;
}
.cm-run-pip--on { background: var(--tc-gold); }

/* Paskutinės minutės / pabaigos akcentas nenaudojamas sąmoningai:
   iššūkis be viršutinės laiko ribos, tad raudonas mirksėjimas tik erzintų. */

/* Nepavykus (mirtis) — trumpas raudonas blyksnis prieš paslepiant. */
.cm-run--failed { background: var(--tc-red); }
.cm-run--failed .cm-run-time,
.cm-run--failed .cm-run-prog { color: var(--tc-surface); }

/* ======================= DIENOS IŠŠŪKIS + KOMBO ======================= */

/* Dienos iššūkis — KOMPAKTIŠKAS. Anksčiau plati plokštelė su pilnu
   sakiniu užimdavo pusę ekrano viršaus ir laužydavosi į 3 eilutes
   (2026-08-07 vartotojo pastaba). Dabar viena eilutė su daugtaškiu. */
.cm-quest {
    position: fixed;
    /* Toje pačioje eilutėje kaip kiti HUD elementai (2026-08-07 vartotojo
       pastaba: iššūkis kabojo antroje eilutėje po statistika). Viršus toks
       pat kaip .cm-hud, o plotis ribotas, kad neliestų šoninių blokų. */
    top: calc(10px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    max-width: min(260px, calc(100vw - 24px));
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--tc-line);
    padding: 3px 11px;
    opacity: 0.92;
    pointer-events: none;
}
.cm-quest-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 700;
}
/* Tekstas niekada nesilaužo — telpa į vieną eilutę arba nukerpamas */
#quest-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cm-quest-ico { font-size: 0.9rem; }
.cm-quest-prog {
    margin-left: auto;
    color: var(--tc-gold-text);
    font-variant-numeric: tabular-nums;
}
.cm-quest--done { background: var(--tc-green); }
.cm-quest--done .cm-quest-prog { color: var(--tc-ink); }

/* --- mini/expanded formos (JS pusė sprendžia, kada perjungti — žr. main.js) ---
   Mini: nuolat matoma maža piliulė (🎯 + "2/5"), kad iššūkis nebeužimtų vietos
   HUD stulpelyje, bet liktų pasiekiamas paspaudus. Expanded: dabartinis pilnas
   vaizdas su tekstu — rodomas trumpai arba kai vartotojas patį paspaudžia. */
.cm-quest--mini {
    padding: 3px 9px;
    pointer-events: auto;   /* piliulė paspaudžiama — priešingai nei numatytas .cm-quest */
    cursor: pointer;
}
.cm-quest--mini #quest-text { display: none; }
.cm-quest--mini .cm-quest-row { gap: 4px; }
.cm-quest--mini .cm-quest-prog { margin-left: 0; }

/* Ir išskleista forma paspaudžiama — kitaip ją suskleisti galima tik palaukus
   laikmačio (bazinis .cm-quest turi pointer-events: none). */
.cm-quest--expanded {
    pointer-events: auto;
    cursor: pointer;
}
.cm-quest--expanded #quest-text { display: block; }

/* Dėmesio blyksnis progreso pasikeitimui — KIETAS mastelio pulsas, be blur
   (dizaino sistema draudžia išplaukusius šešėlius/švytėjimą). Naudojam
   box-shadow + border-color animaciją vietoj transform: scale, nes .cm-quest
   jau turi savo transform (translateX(-50%) centravimui arba none portrait
   režime) — dubliuoti transform per animaciją jį perrašytų ir piliulė
   „šoktų" į šoną. Taip pulsas veikia identiškai visuose išdėstymuose. */
.cm-quest--pulse {
    animation: cm-quest-pulse 420ms var(--tc-ease);
}
@keyframes cm-quest-pulse {
    0%   { box-shadow: 0 3px 0 var(--tc-line); }
    40%  { box-shadow: 0 5px 0 var(--tc-gold-deep); border-color: var(--tc-gold-deep); }
    100% { box-shadow: 0 3px 0 var(--tc-line); }
}

.cm-combo {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 2px solid var(--tc-line);
    font-size: 0.78rem; font-weight: 800;
}
.cm-combo-mul {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    border: 2px solid var(--tc-ink);
    background: var(--tc-gold);
}
.cm-combo--hot .cm-combo-mul { background: var(--tc-red); color: #FFFFFF; }

/* ======================= PABAIGOS EKRANAS ======================= */

.cm-finale {
    position: fixed; inset: 0;
    z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(27, 36, 48, 0.55);
}
.cm-finale-card {
    width: min(420px, 100%);
    text-align: center;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 6px 0 var(--tc-gold-deep);
    padding: 26px 24px;
    /* IEJIMAS. Iki 2026-08-21 kortele tiesiog ATSIRASDAVO — didziausias
       zaidimo ivykis buvo tylesnis uz grybuko pakelima. Ritmas (persokimas
       per 1.04 ir grizimas) TYCIA toks pat kaip `cm-key-drop` atsitrenkimo
       fazeje, kad abi sventes atrodytu is to paties zaidimo. */
    animation: cm-finale-in 460ms var(--tc-ease) both;
}
@keyframes cm-finale-in {
    0%   { opacity: 0; transform: scale(0.86); }
    62%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
.cm-finale-glyph { font-size: 3.4rem; line-height: 1; margin-bottom: 2px; }
.cm-finale-card h2 { margin: 0 0 6px; font-size: 1.6rem; letter-spacing: -0.01em; }
.cm-finale-card p { color: var(--tc-ink-soft); font-size: 0.9rem; margin-bottom: 16px; }

/* ---------- APDOVANOJIMO LENTELĖ (2026-08-21) ----------

   Iki šiol apdovanojimas buvo TOKIA PAT eilutė kaip „Sunaikinta monstrų",
   tik auksinė. Penkios vienodo svorio eilutės neturėjo hierarchijos, tad
   akis neturėjo kur nusileisti, o 🏆 varžėsi su statistika.

   Dabar tai atskira „trofėjaus lentelė": platus auksinis blokas, didelis
   glifas ant statiškų spindulių ir XP kaip DIDELIS skaičius. Spinduliai —
   `repeating-conic-gradient`? NE: gradientai draudžiami (CLAUDE.md). Vietoj
   jų — du pasukti kvadratai (žvaigždė) iš vientisos spalvos. */
.cm-finale-plate {
    position: relative;
    margin-bottom: 14px;
    padding: 14px 16px 12px;
    background: var(--tc-gold);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 5px 0 var(--tc-gold-deep);
    overflow: hidden;
}
/* Statiška 8 spindulių žvaigždė už glifo — VIENTISA spalva ir `clip-path`,
   ne gradientas ir ne blur (CLAUDE.md). Anksčiau čia buvo du pasukti
   kvadratai; naršyklėje jie susiliedavo į neaiškų gumulą, o ne į žvaigždę,
   todėl forma nupiešta tiksliai. */
.cm-finale-plate-rays {
    position: absolute;
    top: 34px; left: 50%;
    width: 116px; height: 116px;
    margin: -58px 0 0 -58px;
    background: var(--tc-gold-deep);
    opacity: 0.34;
    pointer-events: none;
    clip-path: polygon(
        50% 0%,   59% 34%,  85% 15%,  66% 41%,
        100% 50%, 66% 59%,  85% 85%,  59% 66%,
        50% 100%, 41% 66%,  15% 85%,  34% 59%,
        0% 50%,   34% 41%,  15% 15%,  41% 34%);
}

.cm-finale-plate-glyph {
    position: relative;
    font-size: 2.5rem; line-height: 1;
}
.cm-finale-plate-name {
    position: relative;
    margin-top: 6px;
    font-size: 0.92rem; font-weight: 800;
    color: var(--tc-ink);
}
.cm-finale-plate-xp {
    position: relative;
    margin-top: 4px;
    font-size: 1.7rem; font-weight: 900;
    letter-spacing: -0.02em;
    /* `--tc-gold-text` ant aukso skamba per drungnai (ruda ant geltonos);
       `--tc-ink` yra pats stipriausias kontrastas, o skaičius čia ir turi
       būti garsiausias kortelės elementas. */
    color: var(--tc-ink);
}

/* ---------- SURINKTOS RŪŠYS (2026-08-21) ----------

   Aukščiausios vertės pakeitimas: septynios figūros PARODOMOS, o ne
   suskaičiuojamos. Spalvos tos pačios `--t{tier}`, kaip Chessdex skydelyje,
   kad kortelė ir kolekcija atrodytų iš to paties žaidimo. */
/* Rūšių lentyna gauna savo erdvę: be tarpo ji lipdavo prie apdovanojimo
   lentelės ir abu blokai skaitėsi kaip vienas. */
.cm-finale-dex { margin: 18px 0 16px; }
.cm-finale-dex-row {
    display: flex; justify-content: center;
    gap: 6px; flex-wrap: nowrap;
    /* Nedidelis įtraukimas: be jo kraštiniai langeliai telefone atsiremia
       į kortelės paraštę ir eilė atrodo įtemptesnė už lentelę virš jos. */
    margin: 0 2px; padding: 0; list-style: none;
}
.cm-finale-dex-cell {
    flex: 1 1 0; min-width: 0;
    aspect-ratio: 1 / 1;
    max-width: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; line-height: 1;
    color: var(--tc-ink);
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius);
}
.cm-finale-dex-cell--caught {
    border-color: var(--tc-ink);
    box-shadow: 0 3px 0 var(--tc-ink);
}
/* Pakopų spalvos — TOS PAČIOS, kaip Chessdex skydelyje, bet aprašytos čia
   savo klasėmis. Skolintis `.cm-dex-glyph--t*` nepavyko: ji sudėtinga tik
   viena klase, tad ją nugalėdavo vėliau faile einantis `.cm-finale-dex-cell`
   fonas ir visos septynios figūros likdavo vienodai pilkos (2026-08-21,
   pastebėta naršyklėje). Aiškiau turėti savo taisyklę nei kelti svetimos
   specifiškumą. */
.cm-finale-dex-cell--t1 { background: var(--tc-gold); }
.cm-finale-dex-cell--t2 { background: var(--tc-green); }
.cm-finale-dex-cell--t3 { background: var(--tc-blue); }
.cm-finale-dex-cell--t4 { background: var(--tc-red); }
.cm-finale-dex-cell--t5 { background: var(--tc-ink); color: var(--tc-gold); }
/* Sfinksas (slaptas bosas) — paskutinis langelis. Be šito jis atrodo
   TIKSLIAI kaip karalius (abu `--t5`: juodas fonas, auksinis glifas), tad
   sunkiausias žaidimo laimikis vizualiai dingdavo. Auksinis apvadas jį
   išskiria nekeičiant pakopų logikos. */
.cm-finale-dex-cell--t5:last-child { border-color: var(--tc-gold); }
.cm-finale-dex-cell--t5:last-child.cm-finale-dex-cell--caught { box-shadow: 0 3px 0 var(--tc-gold-deep); }
.cm-finale-dex-cap {
    margin-top: 8px;
    font-size: 0.76rem; font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--tc-ink-soft);
}

/* ---------- ANTRINĖ STATISTIKA ----------

   Sąmoningai NUŽEMINTA: du stulpeliai, be rėmų, mažesnis šriftas — tai
   išnaša po apdovanojimu, o ne su juo besivaržančios eilutės. */
.cm-finale-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-bottom: 18px;
    padding-top: 12px;
    border-top: 2px solid var(--tc-line);
    font-size: 0.8rem;
}
.cm-finale-stats:empty { display: none; }
.cm-finale-stats > div {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    padding: 5px 6px;
    text-align: left;
}
/* Etiketė gali laužtis į dvi eilutes (pvz. „Sunaikinta monstrų" telefone) —
   `align-items: start` tada laiko abi tinklelio eilutes viename lygyje,
   o skaičius nenuslenka į apačią. */
.cm-finale-stats > div > span { color: var(--tc-ink-soft); font-weight: 700; line-height: 1.25; }
.cm-finale-stats > div > b { color: var(--tc-ink); font-weight: 900; font-size: 0.92rem; }
/* Nelyginis paskutinis įrašas užima abu stulpelius — kitaip lieka
   nesubalansuota tuštuma dešinėje. */
/* Nelyginis paskutinis įrašas lieka SAVO stulpelyje — anksčiau jis buvo
   ištemptas per abu ir centruotas, todėl kabodavo tuštumoje po tvarkingu
   tinkleliu. Dabar eilutė tiesiog nepilna, kaip bet kuriame sąraše. */

/* Mūšio metu kovos valdikliai nereikalingi */
body.cm-in-battle .cm-chud,
body.cm-in-battle .cm-wbar,
body.cm-in-battle .cm-fire-btn,
body.cm-in-battle .cm-map,
/* Grėsmės rodyklė (2026-08-19): mūšio metu ji nebeatsinaujina (updateShadows
   nesisuka), todėl likdavo kaboti ekrane ir dengdavo priešininko plokštę.
   JS ją slepia įeinant į mūšį, bet CSS taisyklė reikalinga ir tam atvejui,
   kai mūšis prasideda TĄ PATĮ kadrą, kai rodyklė ką tik parodyta. */
body.cm-in-battle .cm-threat,
body.cm-in-battle .cm-quest { display: none !important; }

/* Žemuose ekranuose žemėlapis mažesnis */
@media (max-height: 560px) {
    .cm-map-canvas { width: 160px; height: 160px; }
    .cm-map-legend { display: none; }
}

/* Žemuose ekranuose HUD kompaktiškesnis, kad netriuktų su vairalazde.
   Šaudymo mygtukas sumažintas (62px), bet `bottom` VIS TIEK skaičiuojamas iš
   run-btn realios stack pozicijos (38+74+12+62+12=198), kad nesusikirstų —
   anksčiau čia buvo fiksuotas 104px, kuris susikirsdavo su run-btn (98–154px). */
@media (max-height: 480px) {
    .cm-chud { gap: 6px; }
    .cm-chud-hearts, .cm-chud-weapon, .cm-chud-boost { padding: 3px 10px; font-size: 0.8rem; }
    .cm-wslot { min-width: 48px; padding: 3px 7px; }
    .cm-fire-btn {
        width: 62px; height: 62px;
        bottom: calc(38px + 74px + var(--cm-stack-gap) + 62px + var(--cm-stack-gap) + env(safe-area-inset-bottom));
    }
}

/* ======================= ŠACHMATŲ LANGELIŲ VILNIS ======================= */

.cm-wipe {
    position: fixed; inset: 0; z-index: 40;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(6, 1fr);
    background: transparent;
}
.cm-wipe-cell {
    background: var(--tc-ink);
    transform: scale(0);
    transition: transform 240ms var(--tc-ease);
    /* transition-delay nustatomas inline (įstrižainės banga) */
}
.cm-wipe-cell--alt { background: #2A3646; }   /* šachmatinis raštas uždangoje */
.cm-wipe--closed .cm-wipe-cell { transform: scale(1.04); }
.cm-wipe--flash { background: #fff; }

/* Ekrano purtymas susidūrimo momentu */
.cm-shake { animation: cm-shake 380ms; }
@keyframes cm-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-9px, 4px); }
    40% { transform: translate(8px, -5px); }
    60% { transform: translate(-6px, -3px); }
    80% { transform: translate(5px, 4px); }
}

/* Priešo prisistatymo juosta ant uždangos */
.cm-banner {
    position: fixed;
    top: 42%;
    left: 0; right: 0;
    z-index: 45;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 16px 0;
    background: var(--tc-gold);
    border-top: 3px solid var(--tc-ink);
    border-bottom: 3px solid var(--tc-ink);
    font-size: 1.6rem; font-weight: 800;
    color: var(--tc-ink);
    transform: translateX(-105%);
    transition: transform 320ms var(--tc-ease);
}
.cm-banner--show { transform: translateX(0); }
.cm-banner-glyph {
    font-size: 2.2rem; line-height: 1;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.55);
}
#banner-text {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
}
@media (max-width: 520px) {
    .cm-banner { font-size: 1.15rem; padding: 12px 14px; gap: 10px; }
    .cm-banner-glyph { font-size: 1.6rem; }
}
/* Žemuose ekranuose juosta neuždengia lentos vidurio */
@media (max-height: 520px) {
    .cm-banner { font-size: 1.05rem; padding: 9px 14px; }
    .cm-banner-glyph { font-size: 1.4rem; }
}

/* ======================= MŪŠIO OVERLAY ======================= */

.cm-battle {
    position: fixed; inset: 0; z-index: 20;
    display: none;
    /* Permatomas — po UI matosi gyva 3D mūšio diorama (žaidėjas + chessmonas).
       Jokio backdrop-filter (dizaino sistema draudžia blur). */
    background: rgba(251, 247, 239, 0.38);
}
.cm-battle.cb-open { display: block; }

/* Mūšio metu pasaulio valdikliai paslepiami — kitaip persidengia su juostomis
   (ypač landscape, kur HUD ir priešo panelė atsiduria vienoje vietoje) */
body.cm-in-battle .cm-hud,
body.cm-in-battle .cm-joystick,
body.cm-in-battle .cm-jump-btn,
body.cm-in-battle .cm-run-btn,
body.cm-in-battle .cm-dex { display: none !important; }

.cb-battle {
    /* `relative` BŪTINAS: pergalės konfeti (`.cb-confetti`) yra
       `position: absolute` su `left: N%` — be pozicionuoto tėvo jos
       skaičiuotųsi nuo lango, o ne nuo mūšio ekrano. */
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cb-gap, 8px);
    padding: calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
    animation: cb-enter 350ms var(--tc-ease);
    /* Niekada neišlįsti už ekrano — vietoj to susitraukia tarpai ir lenta */
    overflow: hidden;
    box-sizing: border-box;
}
/* Juostos nesitraukia (jose tekstas), lenta traukiasi paskutinė */
.cb-topbar, .cb-midbar, .cb-bottombar { flex: 0 0 auto; }
.cb-board-wrap { flex: 0 1 auto; }
/* ⚠️ JOKIO `transform` — tik `opacity`.
   `transform: scale()` ant `.cb-battle` keičia VAIKŲ getBoundingClientRect()
   (ir `left/top`, ir `width`). Chessground lentos ribas kešuoja memoize'intai
   (`memo(() => board.getBoundingClientRect())`) ir valo tik per setDimensions,
   `window resize` ir `document scroll` — animacijos NEGAUDO. Todėl ribos
   užsifiksuodavo animacijos VIDURYJE (scale ≈ 0.98): figūros pasižymėdavo tik
   iš antro karto ir ėjimas nukrisdavo į kaimyninį langelį (2026-08-19).
   Būtent dėl to ankstesni taisymai per plotį nepadėjo — plotis būdavo > 0,
   bet pati lenta dar judėdavo. Nepridėti `transform` čia iš naujo. */
@keyframes cb-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cb-victory-flash { animation: cb-victory 600ms; }
@keyframes cb-victory {
    0%, 100% { background: transparent; }
    40%      { background: rgba(56, 183, 107, 0.18); }
}

/* Pergalės konfeti — krentančios dalelės brand spalvomis.
   `.cm-confetti` — TAS PATS efektas uz musio ekrano ribu (pabaigos kortele
   ant `document.body`). Selektorius bendras, kad butu VIENAS animacijos
   aprasas; skiriasi tik `z-index` (zr. zemiau). */
.cb-confetti,
.cm-confetti {
    position: absolute;
    top: -14px;
    width: 11px; height: 11px;
    border: 1px solid rgba(27, 36, 48, 0.35);
    pointer-events: none;
    /* Virš lentos ir juostų: su `z-index: 8` dalelės krisdavo UŽ lentos ir
       matydavosi tik jos šonuose — šventė atrodydavo blankiai. `.cb-battle`
       turi `position: relative`, todėl tai lieka mūšio ekrano viduje. */
    z-index: 30;
    animation: cb-confetti-fall linear forwards;
}
/* Ant `document.body` dalele turi buti FIXED (kitaip ji pozicionuotusi pagal
   dokumenta ir krisdama nutolti nuo matomos srities) ir VIRS `.cm-finale`
   (z-index 60), kitaip konfeti liktu uz tamsios uzdangos. */
.cm-confetti {
    position: fixed;
    z-index: 61;
}
/* `dvh`, ne `vh`: mobiliose naršyklėse `vh` skaičiuojamas su paslėpta adreso
   juosta, todėl dalelės nukrisdavo žemiau matomos srities ir didžioji kritimo
   dalis likdavo nematoma (`.cb-battle` turi `overflow: hidden`). */
@keyframes cb-confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    /* Neskaidru beveik iki galo — anksčiau blėsimas prasidėdavo per anksti ir
       dalelės tapdavo nematomos dar nepasiekusios lentos. */
    92%  { opacity: 1; }
    100% { transform: translateY(100dvh) rotate(var(--cb-rot, 360deg)); opacity: 0; }
}

/* Pralaimėjimo vinjetė — raudoni kraštai pulsuoja */
.cb-defeat { animation: cb-defeat-pulse 900ms 2; }
@keyframes cb-defeat-pulse {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(226, 87, 76, 0); }
    50%      { box-shadow: inset 0 0 0 14px rgba(226, 87, 76, 0.35); }
}

/* --- viršus: priešo panelė --- */
.cb-topbar {
    width: 100%; max-width: 520px;
    display: flex; align-items: center; gap: 10px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-line);
    padding: 8px 12px;
    box-sizing: border-box;
}
.cb-portrait {
    width: 52px; height: 52px; flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--tc-ink);
}
.cb-enemy-info { flex: 1; min-width: 0; }
.cb-enemy-name {
    font-weight: 800; font-size: 1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-enemy-stars { color: var(--tc-gold-text); font-size: 0.8rem; letter-spacing: 2px; }
.cb-hpbar-track {
    margin-top: 5px;
    height: 12px;
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-ink);
    border-radius: 999px;
    overflow: hidden;
}
.cb-hpbar-fill {
    height: 100%;
    background: var(--tc-green);
    transition: width 350ms var(--tc-ease), background-color 250ms;
}

/* --- centras: lenta --- */
.cb-board-wrap {
    position: relative;
    /* --cb-chrome = juostų + tarpų aukštis; lenta gauna VISĄ likusį plotą.
       Taip nebelieka tuščių tarpų, o mažuose ekranuose niekas neišlenda. */
    --cb-chrome: 250px;
    width: min(92vw, 480px, calc(100vh - var(--cb-chrome)));
    width: min(92vw, 480px, calc(100dvh - var(--cb-chrome)));
    aspect-ratio: 1;
    border: 2px solid var(--tc-ink);
    border-radius: 6px;
    box-shadow: 0 5px 0 var(--tc-line);
    margin: 0;
}
.cb-board { width: 100%; height: 100%; }
.cb-board .cg-wrap { border-radius: 4px; }

.cb-board-wrap.cb-shake { animation: cb-shake 500ms; }
@keyframes cb-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}
.cb-board-wrap.cb-flash-win { animation: cb-flash-win 600ms; }
@keyframes cb-flash-win {
    0%, 100% { box-shadow: 0 5px 0 var(--tc-line); }
    50%      { box-shadow: 0 0 0 6px var(--tc-green); }
}

/* --- vidurio juosta: taškai + laikmatis --- */
.cb-midbar {
    width: 100%; max-width: 520px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 0 4px;
}

.cb-move-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.cb-move-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-ink);
}
.cb-move-dot--done { background: var(--tc-green); }

.cb-timer-wrap {
    position: relative;
    width: 58px; height: 58px; flex: 0 0 auto;
}
.cb-timer-ring-holder { width: 100%; height: 100%; }
.cb-timer-svg { transform: rotate(-90deg); width: 100%; height: 100%; display: block; }
.cb-timer-bg   { fill: none; stroke: var(--tc-surface-2); stroke-width: 7; }
.cb-timer-ring {
    fill: none; stroke: var(--tc-gold); stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 200ms linear, stroke 300ms;
}
.cb-timer-low .cb-timer-ring { stroke: var(--tc-red); }
.cb-timer-low { animation: cb-pulse 700ms infinite; }
@keyframes cb-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.cb-timer-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* --- apačia: žaidėjo panelė --- */
.cb-bottombar {
    width: 100%; max-width: 520px;
    display: flex; align-items: center; gap: 8px 10px;
    /* Siauruose ekranuose statusas nusileidžia į savo eilutę, o ne nukerpamas */
    flex-wrap: wrap;
    justify-content: space-between;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-line);
    padding: 8px 12px;
    box-sizing: border-box;
}
/* Kai juosta pakankamai plati — statusas lieka toje pačioje eilutėje (vidury).
   Matuojama pagal juostos plotį (ne ekrano), todėl veikia ir landscape stulpelyje. */
.cb-bottombar {
    container-type: inline-size;
    container-name: cb-bar;
}

/* Kuriais žaidžia žaidėjas (baltieji/juodieji) */
.cb-color {
    flex: 0 0 auto;
    font-size: 0.78rem; font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    border: 2px solid var(--tc-ink);
    white-space: nowrap;
}
.cb-color--white { background: #FFFFFF; color: var(--tc-ink); }
.cb-color--black { background: var(--tc-ink); color: #FFFFFF; }
.cb-color--sm { font-size: 0.68rem; padding: 1px 8px; }

.cb-enemy-meta { display: flex; align-items: center; gap: 8px; }

.cb-hearts { display: flex; gap: 4px; flex: 0 0 auto; }
.cb-heart { color: var(--tc-red); font-size: 1.15rem; transition: opacity 200ms, transform 200ms; }
.cb-heart--lost { opacity: 0.25; transform: scale(0.8); filter: grayscale(1); }

.cb-status {
    flex: 1 1 100%; min-width: 0;
    text-align: center;
    font-size: 0.88rem; font-weight: 700;
    color: var(--tc-ink-soft);
    min-height: 1.3em;
    /* Leidžiam laužtis į 2 eilutes vietoj nukirtimo — tekstas visada perskaitomas */
    overflow-wrap: anywhere;
    line-height: 1.25;
}
.cb-status--good { color: var(--tc-green-text); }
.cb-status--bad  { color: var(--tc-red-text); }

/* Kai juosta pakankamai plati — statusas lieka toje pačioje eilutėje (vidury).
   Matuojama pagal juostos plotį, todėl veikia ir siaurame landscape stulpelyje. */
@container cb-bar (min-width: 380px) {
    .cb-status { flex: 1 1 auto; font-size: 0.82rem; }
}
@supports not (container-type: inline-size) {
    @media (min-width: 470px) { .cb-status { flex: 1 1 auto; } }
}

.cb-flee-btn {
    flex: 0 0 auto;
    font-size: 0.82rem; font-weight: 700;
    padding: 8px 14px;
    /* Lietimo taikinys — min. 44px (CLAUDE.md / Apple HIG / WCAG 2.5.5 AAA).
       2026-08-19: buvo 34px aukščio, o mobilus media query jį dar MAŽINO —
       tai tiesioginis taisyklės „mobilus niekada nemažina mygtukų" pažeidimas.
       Liečia ir chessmonų, ir herojų mūšį (bendra klasė). */
    min-height: 44px;
    color: var(--tc-ink);
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-line);
    cursor: pointer;
    transition: transform 120ms var(--tc-ease);
}
.cb-flee-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tc-line); }

/* --- promotion pasirinkimas --- */
.cb-promo {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    flex-wrap: wrap;              /* mažoje lentoje persilaužia į 2x2 */
    padding: 8px;
    background: rgba(27, 36, 48, 0.55);
    border-radius: 4px;
    box-sizing: border-box;
}
.cb-promo-btn {
    width: clamp(44px, 12vw, 58px); height: clamp(44px, 12vw, 58px);
    font-size: clamp(1.4rem, 5vw, 2rem);
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-line);
    cursor: pointer;
}
.cb-promo-btn:active { transform: translateY(2px); }

/* ======================= XP TOAST ======================= */

.xp-toast {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    left: 50%;
    transform: translate(-50%, -20px);
    z-index: 50;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-gold-deep);
    padding: 10px 22px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms var(--tc-ease), transform 250ms var(--tc-ease);
}
.xp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.xp-toast-title { font-weight: 800; color: var(--tc-gold-text); font-size: 1.05rem; }
.xp-toast-sub   { font-size: 0.85rem; color: var(--tc-ink-soft); }

/* ======================= MAŽI EKRANAI ======================= */

/* --- Žemi ekranai: mažinam chrome, kad lentai liktų kuo daugiau --- */
@media (max-height: 700px) {
    .cb-battle { --cb-gap: 6px; }
    .cb-portrait { width: 42px; height: 42px; }
    .cb-timer-wrap { width: 46px; height: 46px; }
    .cb-timer-num { font-size: 0.85rem; }
    .cb-topbar, .cb-bottombar { padding: 6px 10px; }
    .cb-board-wrap { --cb-chrome: 214px; }
}
@media (max-height: 560px) {
    .cb-battle { --cb-gap: 4px; }
    .cb-portrait { width: 34px; height: 34px; }
    .cb-enemy-name { font-size: 0.88rem; }
    .cb-enemy-stars { font-size: 0.7rem; }
    .cb-hpbar-track { height: 9px; margin-top: 3px; }
    .cb-timer-wrap { width: 40px; height: 40px; }
    .cb-timer-num { font-size: 0.78rem; }
    .cb-heart { font-size: 1rem; }
    /* Tik šriftas/vidiniai tarpai — AUKŠTIS lieka 44px (žr. .cb-flee-btn).
       Mažinti patį taikinį telefone draudžia CLAUDE.md. */
    .cb-flee-btn { padding: 6px 11px; font-size: 0.76rem; min-height: 44px; }
    .cb-board-wrap { --cb-chrome: 186px; }
}

/* --- LANDSCAPE (telefonas gulsčiai / žemas langas) ---
   Vertikaliai vietos nėra, bet horizontaliai — daug.
   Lenta keliauja į kairę, visos juostos — į dešinį stulpelį. */
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
    .cb-battle {
        display: grid;
        grid-template-columns: auto minmax(0, min(46vw, 520px));
        grid-template-rows: auto auto auto;
        align-content: center;
        justify-content: center;
        column-gap: 18px;
        row-gap: 8px;
        padding: 8px calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));
    }
    /* Landscape: ribojantis matmuo — aukštis; chrome beveik nebelieka */
    .cb-board-wrap {
        --cb-chrome: 24px;
        grid-column: 1; grid-row: 1 / span 3;
        align-self: center;
        width: min(48vw, 480px, calc(100dvh - var(--cb-chrome)));
    }
    .cb-topbar    { grid-column: 2; grid-row: 1; align-self: end;   width: 100%; }
    .cb-midbar    { grid-column: 2; grid-row: 2;                    width: 100%; }
    .cb-bottombar { grid-column: 2; grid-row: 3; align-self: start; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-wipe-cell { transition: none; }
    .cm-shake { animation: none; }
    /* Zutis: pasaulio pakrypimas ir korteles sokinejimas isjungiami, bet
       PATS uzrasas lieka matomas — tai informacija (kiek XP netekta), ne
       dekoracija. Todel `.cm-death` fade paliekamas, o `cm-knock` ne. */
    .cm-knock { animation: none; }
    .cm-death.show .cm-death-card { animation: none; }
    .cm-death-card { transform: none; opacity: 1; }
    .cm-banner { transition: none; }
    .cb-timer-low { animation: none; }
    .cb-board-wrap.cb-shake { animation: none; }
    .cb-confetti,
    .cm-confetti { animation: none; display: none; }
    .cm-finale-card { animation: none; }
    .cb-defeat { animation: none; }
}

/* ======================= MOBILUS IŠDĖSTYMAS (2026-08-08) =======================

   Siaurame ekrane HUD elementai nesutelpa į vieną eilutę. Vietoj išbarstytų
   magiškų px reikšmių — vienas bendras "tinklelis": kintamieji apačioje
   apibrėžia kairį kraštą, tarpus tarp blokų ir kiekvieno bloko aukštį, o visi
   elementai (statistika, mygtukai, iššūkis, gyvybės, ginklai) skaičiuoja savo
   poziciją PAGAL TUOS PAČIUS kintamuosius. Taip nebelieka nesuderintų
   "top: 106px" / "bottom: 160px" skaičių, kurie nesutapdavo su realiu kaimyninio
   bloko aukščiu (2026-08-07/08 vartotojo pastaba: "lentelės išsimėčiusios"). */
/* Lūžio taškas pagal PLOTĮ, ne pagal jutiklinį ekraną: siauras naršyklės
   langas kompiuteryje (pvz. 430px) turi tą pačią problemą — trys blokai
   netelpa į vieną eilutę ir užlipa vienas ant kito. */
@media (max-width: 820px) {

    :root {
        /* Bendras kairys/dešinys kraštas — VISI viršaus/apačios HUD blokai
           prasideda/baigiasi lygiai čia, kad stulpelis atrodytų vientisas. */
        --cm-edge: 12px;
        /* Vertikalus tarpas tarp sukrautų eilučių (statistika -> mygtukai -> iššūkis) */
        --cm-gap: 6px;
        /* Vieno "piliulės" tipo HUD elemento aukštis (padding 5px*2 + turinys ~22px) —
           naudojamas kitų blokų pozicijai suskaičiuoti, kad nereikėtų spėlioti px. */
        --cm-row-h: 34px;
        /* Vairalazdės/mygtukų dešinės-apačios zona: apatiniai HUD blokai (gyvybės,
           ginklai) turi baigtis PRIEŠ ją, kad niekada nepersidengtų.

           ⚠️ 130px NEUZTEKO (2026-08-23). Tai buvo tik rutuliuko SKERSMUO, o
           pati vairalazde stovi `bottom: 24px` (zr. `.cm-joystick`) — tad jos
           virsus yra 154px, ne 130px. Ginklu juosta, skaiciuota is 130+6=136px,
           uzlipdavo ant rutuliuko virsaus per 18px (isamatuota 390x844,
           `scripts/chessmon-hud-audit.mjs`) — kaip tik ties nykscio zona.

           Dabar zonoje yra IR atstumas nuo ekrano krasto, tad kintamasis
           reiskia tai, ka zada: „kiek apacios uzima vairalazde". */
        --cm-joy-h: 154px;
    }

    /* Viršus: statistika (1 eilutė) -> mygtukai (2) -> iššūkis (3, kai expanded).
       Visi prasideda nuo to paties kairio krašto — vieno stulpelio įspūdis
       vietoj "mygtukai dešinėje / statistika kairėje" padrikumo. */
    .cm-hud { flex-wrap: wrap; row-gap: var(--cm-gap); }
    .cm-hud-left  { order: 1; flex: 1 1 100%; overflow-x: visible; }
    .cm-hud-right { order: 2; flex: 1 1 100%; justify-content: flex-start; }

    /* Siauriausiuose ekranuose (< 360px) net sumažinti elementai gali nesutilpti
       vienoje eilutėje — piliulės tada laisvai persilaužia, bet išlaiko tą patį
       kairį kraštą, nes tėvinis flex jau prasideda nuo --cm-edge per padding. */
    .cm-hud-stat { padding: 4px 10px; font-size: 0.85rem; }
    .cm-hud-btn  { width: 36px; height: 36px; font-size: 1rem; }

    /* Iššūkis — po HUD juosta, tas pats kairys kraštas kaip statistika/mygtukai.
       top skaičiuojamas iš dviejų HUD eilučių aukščio + tarpų, ne fiksuotai. */
    .cm-quest {
        top: calc(10px + env(safe-area-inset-top) + (var(--cm-row-h) + var(--cm-gap)) * 2);
        left: var(--cm-edge);
        transform: none;
        max-width: calc(100vw - var(--cm-edge) * 2);
    }

    /* GYVYBĖS (.cm-chud) PERKELTOS Į VIRŠŲ (2026-08-18 vartotojo prašymu):
       apačioje jos stovėjo tiksliai virš X valdiklio ir dengė/trukdė pirštui
       siekiant įstrižainių laukelių. Dabar — trečia eilutė viršuje, po iššūkiu,
       tas pats kairys kraštas kaip visur kitur (vientisas stulpelis).

       `top` skaičiuojamas taip pat, kaip .cm-quest, bet PRIDĖTA jo aukščio
       atsarga — .cm-quest yra `hidden` kol neaktyvus dienos iššūkis, todėl
       laukelis realiai atsiranda TIK tada, kai iššūkis rodomas. `position: fixed`
       reiškia, kad be šio atsargos tarpo širdutės persidengtų su iššūkiu, kai
       jis pasirodo. Iššūkio korta ~40px aukščio + tarpas — užtenka 46px. */
    .cm-chud {
        position: fixed;
        top: calc(10px + env(safe-area-inset-top) + (var(--cm-row-h) + var(--cm-gap)) * 2 + 46px);
        bottom: auto;
        left: var(--cm-edge);
        right: auto;
        transform: none;
        max-width: calc(100vw - var(--cm-edge) * 2);
    }

    /* ============ EILUCIU TINKLELIS: `.cm-run` ir `.cm-ptoast` ============
       (2026-08-24)

       Sie du elementai VIENINTELIAI turejo fiksuotus `top` pikseliais (52px ir
       112px), parinktus dar pries tinkleli. Del to jie kirtosi su tais, kurie
       tinkleli naudoja — isamatuota 390x844, kai matomi VISI vienu metu:
           hudRight x runHud   (abu ties 46-85px)
           chud x toast        (abu ties 112-171px)
           quest x toast
       Ankstesni auditai to nepagavo, nes toast'o ir begimo laikmacio kartu
       nerode.

       Dabar jie skaiciuojami is tu paciu `--cm-row-h`/`--cm-gap`, kaip ir
       visa kita. Eiles staciai:
           0) statistika    10px
           1) mygtukai      +1 eile
           1) PRANESIMAI    +1 eile           <- 2026-08-24: PERSIDENGIA sąmoningai
           2) issukis       +2 eiles
           3) gyvybes       +2 eiles + 46px
           4) begimas       +3 eiles + 46px

       ⚠️ Pranesimai (`.cm-ptoast`) nuo 2026-08-24 tinkleliui NEBEPAKLUSTA:
       vartotojo pageidavimu jie visada pat virsuje ir gali uzdengti bet kuria
       zemesne eile. Tai ne konfliktas, o sprendimas — zr. komentara ties
       `.cm-ptoast` bazineje sekcijoje. */
    .cm-run {
        top: calc(10px + env(safe-area-inset-top)
                  + (var(--cm-row-h) + var(--cm-gap)) * 3 + 46px);
        left: var(--cm-edge);
        right: auto;
    }
    /* ⚠️ 2026-08-24: pranesimai ISIMAMI is eiluciu tinklelio (buvo eile 5,
       pati zemiausia — atsidurdavo jau zaidimo lauke). Vartotojo pageidavimu
       jie keliami i pat virsu, TIESIAI PO statistikos juosta, ir jiems
       LEIDZIAMA uzdengti zemiau esancias eiles (issukis, gyvybes, begimas).
       `z-index: 40` (bazinis apibrezimas) uztikrina, kad butu virsuje. */
    .cm-ptoast {
        top: calc(10px + env(safe-area-inset-top) + var(--cm-row-h) + var(--cm-gap));
    }

    /* Apačia: dabar TIK ginklų juosta lieka virš vairalazdės — vienas blokas,
       ne du, todėl rutuliukas laisvas. */
    .cm-wbar {
        left: var(--cm-edge);
        right: auto;
        transform: none;
        bottom: calc(var(--cm-joy-h) + var(--cm-gap) + env(safe-area-inset-bottom));
        max-width: calc(100vw - var(--cm-edge) * 2 - 90px);
    }
}

/* Gulsčias telefonas: aukščio mažai, pločio daug — viršus telpa į vieną eilutę.
   Vairalazdė (.cm-joystick) čia NEmažinama — jai atskiro override nereikia,
   nes 130px rutuliukas jau telpa į žemą ekraną be pakeitimų.

   Dešinės pusės stulpelis (jump/run/fire) sumažintas ir sutankintas savame
   `--cm-stack-gap-ls` žingsnyje, kad tilptų žemame ekrane, BET kiekvieno
   `bottom` VIS TIEK skaičiuojamas iš prieš tai einančio mygtuko realaus
   aukščio — anksčiau čia buvo trys fiksuoti skaičiai (14/98/104), kurie
   susikirsdavo (run 98–154px vs fire 104–166px). */
@media (max-height: 500px) and (min-width: 560px) {
    :root { --cm-stack-gap-ls: 8px; }
    .cm-jump-btn { bottom: calc(14px + env(safe-area-inset-bottom)); width: 64px; height: 64px; }
    .cm-run-btn {
        bottom: calc(14px + 64px + var(--cm-stack-gap-ls) + env(safe-area-inset-bottom));
        width: 52px; height: 52px;
    }
    .cm-fire-btn {
        bottom: calc(14px + 64px + var(--cm-stack-gap-ls) + 52px + var(--cm-stack-gap-ls) + env(safe-area-inset-bottom));
        width: 54px; height: 54px;
    }
    .cm-hud-left  { order: 1; flex: 0 1 auto; margin-top: 0; }
    .cm-hud-right { order: 2; flex: 0 0 auto; }
    /* ISSUKIS — FIKSUOTAS KAIRYS KRASTAS, ne centravimas (2026-08-23).

       BUVO `left: 50%` + `translateX(-50%)`: pilule slankiojo pagal EKRANO
       ploti, o kairejeje nuo jos stovintys blokai (statistika, gyvybes,
       istverme, ginklas) — pagal SAVO turini. Du nepriklausomi saltiniai
       neisvengiamai susikerta: 845px ekrane centras nukrenta i 340px, o
       gyvybiu piliule su istverme ir ginklu nusitesia iki 451px.

       Dabar issukis prasideda ten, kur baigiasi kairysis stulpelis, ir tas
       pats skaicius (340px) naudojamas `.cm-chud` plocio ribai — vienas
       saltinis abiem, tad persidengti nebera kaip. */
    .cm-quest {
        top: calc(10px + env(safe-area-inset-top));
        /* 232px (pilules pradzia) + 194px (jos plotis su istverme IR ginklu:
           turinys 182px + desinysis `padding: 10px` — isamatuota, ne atspeta)
           + 8px tarpas. Tai DIDZIAUSIAS pilules variantas, tad issukis
           nepersidengs nei kai ji trumpa, nei kai pilna. */
        left: 434px;
        transform: none;
        /* Iki desiniojo mygtuku stulpelio (jis prasideda ties 649px). */
        max-width: min(200px, calc(100vw - 434px - 205px));
    }
    /* GYVYBES — I VIRSU (2026-08-20, vartotojo prasymu; gulsciam telefonui).

       BUVO: apacioje kaireje (`bottom: 14px; left: 130px`) — t.y. tiesiai virs
       vairalazdes. Zemame gulsciame ekrane (390px) apacia yra brangiausia
       vieta: ten ir rutuliukas, ir ginklu juosta, o pati piliule atrodydavo
       neproporcingai didele salia mazu virsutines juostos elementu.

       DABAR: virsutineje eiluteje, TARPE tarp kaires statistikos ir dienos
       issukio. Isamatuota gulsciai (845x390): statistika baigiasi ties 223,
       issukis prasideda 325 — tarpas ~100px, o piliulei su 3 sirdutemis
       reikia ~85px. Todel ji telpa i TA PACIA eilute ir nereikia nei trecios
       eilutes, nei nieko stumdyti.

       `left: 232px` = statistikos pabaiga + 9px tarpas. Fiksuotas skaicius cia
       priimtinas, nes visas sis blokas ir taip galioja tik `min-width: 560px`,
       o kaires statistikos turinys gulsciai nekinta (3 vienodos piliules). */
    .cm-chud {
        top: calc(10px + env(safe-area-inset-top));
        bottom: auto;
        left: 232px;
        right: auto;
        transform: none;
        /* ⚠️ JOKIO `max-width` (2026-08-23). Anksciau cia buvo 88px — dydis,
           apskaiciuotas TIK trims sirdutems. Bet `.cm-chud` viduje gyvena dar
           du blokai, atsirandantys veliau: istvermes juosta (kai pavargstama)
           ir ginklo laukelis (radus ginkla). Abu turi `flex: none`, tad
           `max-width` ju NESUTRAUKIA — flex vaikai tiesiog PERPILDO konteineri
           ir islenda uz jo ribos. Siauresne dezute cia ne apribojo turini, o
           tik pamelavo apie ji: pilule „bugsena 100px", o pieste iki 414px.

           Isamatuota 845x390 (`scripts/chessmon-hud-audit.mjs`):
             sirdutes+istverme+ginklas  232-414px

           Todel plotis paliekamas turiniui, o dienos issukis pastumtas i
           desine nuo REALIOS pilules pabaigos (zr. `.cm-quest` zemiau). */
        gap: 4px;
        padding: 4px 10px;
    }

    /* Sirdutes gulsciai mazesnes: `@media (max-height: 480px)` sumazinimas
       netaikomas TEKSTUI (`.cm-chud-heart` ten nera), todel piliule likdavo
       auksta. Cia sirdutes suvienodinamos su virsutines juostos tekstu. */
    .cm-chud-heart { font-size: 0.95rem; }
    /* GINKLU JUOSTA — I DESINE NUO VAIRALAZDES, ne virs jos (2026-08-23).

       BUVO `left: 130px; bottom: 60px`. Abu skaiciai netiko: vairalazde uzima
       24-154px horizontaliai (tad 130px yra JOS VIDUJE), o vertikaliai jos
       virsus yra 154px, ne 60px. Isamatuota 845x390: juosta 79-181 x 292-330
       persidengdavo su rutuliuku 75x37.5px — t.y. gulsciai buvo dar blogiau
       nei staciai, nes juosta centruota per `left` MINUS savo plotis.

       Gulsciai aukscio maza, tad kelti juosta VIRS vairalazdes (kaip staciai)
       reikstu 154+6+38 = 198px nuo apacios — puse ekrano. Todel cia ji
       dedama SALIA: vairalazde baigiasi ties 154px, +8px tarpas. Apacios
       lygis lieka toks pat kaip vairalazdes, tad abu blokai stovi vienoje
       eiluteje ir nykscio zonos nedalija. */
    .cm-wbar {
        left: calc(154px + 8px);
        right: auto;
        transform: none;
        bottom: calc(24px + env(safe-area-inset-bottom));
        /* Iki desiniojo mygtuku stulpelio (fire/run/jump prasideda ties 755px). */
        max-width: calc(100vw - 162px - 100px);
    }
}

/* ===================== GRĖSMĖS RODYKLĖ (2026-08-17) =====================
   Kryptinis įspėjimas apie monstrą, kurio NESIMATO ekrane. Kamera dengia
   ~126° priekyje, tad puolimas iš už nugaros anksčiau būdavo be jokio
   signalo — pirmas ženklas būdavo jau atimta gyvybė.

   Rodyklė sukasi aplink ekrano centrą: kampas ateina iš world-3d.js
   (0 = priekyje, ±π = už nugaros). Dizaino sistema: kietas šešėlis,
   ink apvadas, jokių blur/gradientų. */
.cm-threat {
    position: fixed;
    left: 50%; top: 50%;
    z-index: 39;                     /* virš pasaulio, po toastais (40) */
    pointer-events: none;
    /* --cm-threat-a nustatomas iš JS (rad). Rodyklė pastumiama nuo centro
       ir pasukama taip, kad smaigalys rodytų nuo žaidėjo į grėsmę. */
    transform:
        translate(-50%, -50%)
        rotate(calc(var(--cm-threat-a, 0) * 1rad))
        translateY(calc(-1 * var(--cm-threat-r, 42vmin)));
    transition: opacity 160ms var(--tc-ease);
}
.cm-threat-ico {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    /* Kompensuojam tėvo pasukimą, kad ⚠ nebūtų apverstas ant galvos */
    transform: rotate(calc(var(--cm-threat-a, 0) * -1rad));
    background: var(--tc-red);
    color: var(--tc-bg);
    border: 2px solid var(--tc-ink);
    border-radius: 50%;
    box-shadow: 0 3px 0 var(--tc-ink);
    font-size: 1.5rem; font-weight: 900; line-height: 1;
    animation: cm-threat-pulse 620ms ease-in-out infinite;
}
/* Už nugaros — ryškesnis, greitesnis pulsas (pavojingiausias atvejis) */
.cm-threat--behind .cm-threat-ico { animation-duration: 380ms; }

@keyframes cm-threat-pulse {
    0%, 100% { transform: rotate(calc(var(--cm-threat-a, 0) * -1rad)) scale(1); }
    50%      { transform: rotate(calc(var(--cm-threat-a, 0) * -1rad)) scale(1.16); }
}

/* Telefone ekranas siauresnis — rodyklę traukiam arčiau centro, kad
   neišlįstų už krašto ir nesimaišytų su joystick'u/šaudymo mygtuku. */
@media (max-width: 640px) {
    .cm-threat { --cm-threat-r: 30vmin; }
    .cm-threat-ico { width: 40px; height: 40px; font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-threat-ico { animation: none; }
}

/* ================== VALDYMO APRAŠAS starto ekrane (2026-08-17) ==================
   Iki šiol žaidimas neaiškino valdymo — Q, 1–3 ir M būdavo atrandami
   atsitiktinai arba visai neatrandami. Rodom tik kompiuterio klavišus:
   telefone valdymas jau matomas ekrane (vairalazdė, ⤒, 🔥). */
.cm-keys {
    list-style: none;
    margin: 0 0 18px;
    padding: 10px 12px;
    text-align: left;
    background: var(--tc-bg);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius);
    color: var(--tc-ink-soft);
    font-size: 0.83rem;
    line-height: 1.75;
}
.cm-keys b {
    color: var(--tc-ink);
    font-weight: 800;
}

/* Liečiamuose įrenginiuose klaviatūros nėra — blokas tik užimtų vietą
   ir stumtų mygtuką „Pradėti" žemyn. */
@media (pointer: coarse) {
    .cm-keys { display: none; }
}

/* ===================== IŠTVERMĖS JUOSTA (2026-08-17) =====================
   Ilgai bėgant veikėjas pavargsta ir gali tik eiti. Be matomos juostos tai
   atrodytų kaip klaida („kodėl nustojau bėgti?"), todėl rodom likutį.
   Juosta pasirodo TIK kai ištvermė nepilna — pilnos rodyti nėra ko. */
.cm-chud-stam {
    width: 54px; height: 8px;
    background: var(--tc-line);
    border: 2px solid var(--tc-ink);
    border-radius: 999px;
    overflow: hidden;
    flex: none;
}
.cm-chud-stam-fill {
    height: 100%;
    width: 100%;
    background: var(--tc-green);
    border-radius: 999px;
    transition: width 120ms linear, background-color 200ms var(--tc-ease);
}
/* Pavargus — raudona ir pulsuoja, kad būtų aišku, kodėl nebebėgama */
.cm-chud-stam--tired .cm-chud-stam-fill {
    background: var(--tc-red);
    animation: cm-stam-pulse 700ms ease-in-out infinite;
}
@keyframes cm-stam-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-chud-stam--tired .cm-chud-stam-fill { animation: none; }
}

/* GULSCIAS TELEFONAS: istvermes juosta ir ginklo laukelis siauresni.

   ⚠️ VIETA FAILE YRA REIKSMINGA. Sios taisykles turi tokio pat specifiskumo
   kaip bazines `.cm-chud-stam` / `.cm-chud-weapon` (0,1,0), tad laimi tik ta,
   kuri PARASYTA VELIAU. Pirmas bandymas jas ideti i virsutini mobilu
   `@media` bloka (1980 eil.) nesuveike: bazine `.cm-chud-stam { width: 54px }`
   yra 2096 eil., t.y. po jo, ir toliau laimedavo — juosta likdavo 54px ir
   isslinkdavo ant dienos issukio. Isamatuota, ne atspeta
   (`scripts/chessmon-hud-audit.mjs`). Perkeliant sias eilutes butina islaikyti
   ju buvima PO baziniu apibrezimu.

   Lietimo taikinio 44px taisykle cia NEGALIOJA: abu yra rodikliai, ne
   mygtukai (`.cm-chud` turi `pointer-events: none`). */
/* ================= GULSCIAS TELEFONAS: PRANESIMAI I VIRSU ==================
   (2026-08-24, vartotojo pastaba: „horizontaliai jie rodomi ekrano viduryje ir
   uzstoja vaizda!!!")

   PROBLEMA. Visi sie elementai turi FIKSUOTA `top` pikseliais, parinkta pagal
   STACIA telefona (844px). Gulsciai ekranas yra 390px, tad tas pats skaicius
   atsiduria visai kitoje vietoje:

       elementas     top     stacias (844px)   gulscias (390px)
       .cm-ptoast    112px   17% aukscio       34% — TIESIAI VIRS VEIKEJO
                     (nuo 2026-08-24 bazinis jau 56px — zr. `.cm-ptoast`)
       .cm-run        52px    8%               18% — ant horizonto
       .cm-banner     42%     vidurys          vidurys — uzstoja visa scena

   Isamatuota `scripts/chessmon-hud-audit.mjs` principu (390x844 ir 845x390).

   SPRENDIMAS. Gulsciai jie keliami PRIE PAT virsutines juostos, kur vaizdo
   ir taip nera (dangus + HUD piliules). Zaidimo laukas — ekrano vidurys ir
   apacia — lieka svarus.

   ⚠️ `.cm-hud` juosta baigiasi ~50px (10px + 40px piliule), tad 56px yra
   pirmas laisvas taskas po ja. */
@media (max-height: 500px) and (min-width: 560px) {
    /* Pranesimu juosta („Pavargai", pagavimai, XP). `top` cia NEBEKARTOJAMAS —
       nuo 2026-08-24 bazinis apibrezimas jau yra 56px (zr. `.cm-ptoast`).
       Lieka tik gulsciam ekranui specifinis SIAURINIMAS. */
    .cm-ptoast {
        /* Siauresne: gulsciai ekranas platus, tad tekstas issitemptu i viena
           ilga eilute per visa vaizda. */
        max-width: min(420px, calc(100vw - 320px));
        padding: 6px 16px;
        font-size: 0.86rem;
    }

    /* Begimo laikmatis — i TA PACIA eilute kaip HUD statistika, desineje nuo
       jos. Kairysis stulpelis baigiasi ~224px (zr. `.cm-hud-left`), o gyvybiu
       pilule prasideda 232px — tad laikmaciui vietos ten nera. Keliam ji i
       virsu, i desini krasta, salia mygtuku. */
    .cm-run {
        top: calc(56px + env(safe-area-inset-top));
        left: auto;
        right: calc(12px + env(safe-area-inset-right));
    }

    /* Skelbimo juosta (rakto radimas, bosai) — is 42% i virsu.
       Ji per visa ploti, tad viduryje uzstoja absoliuciai viska. */
    .cm-banner {
        top: calc(52px + env(safe-area-inset-top));
        padding: 8px 0;
    }
}

@media (max-height: 500px) and (min-width: 560px) {
    .cm-chud-stam { width: 34px; }
    .cm-chud-weapon { padding-left: 6px; font-size: 0.78rem; }
    .cm-chud-ammo { min-width: 16px; }
    .cm-chud-wico { font-size: 0.85rem; }
}

/* ============================================================================
   HEROJŲ MŪŠIS (2026-08-19) — tikra šachmatų partija prieš NPC botą.
   Naudoja tas pačias `.cb-*` klases kaip chessmonų mūšis (lenta, juostos,
   pasidavimo mygtukas), o čia aprašomi tik SKIRTUMAI.
   ========================================================================== */

/* Fonas — PERMATOMAS, kaip ir chessmonų mūšyje: po šachmatų UI matosi gyva 3D
   diorama (žaidėjas ir herojus vienas prieš kitą prie jo namų).

   ⚠️ 2026-08-19: iš pradžių čia buvo VIENTISA `--tc-bg` spalva, nes pasaulis
   partijos metu buvo sustabdytas. Vartotojas pastebėjo, kad taip „nėra jokio
   fono" — ekranas atrodo tuščias ir atsijungęs nuo žaidimo. Dabar pasaulis
   lieka gyvas (žr. triggerHeroEncounter → battleMode), tad naudojam tą pačią
   permatomą plėvelę kaip `.cm-battle`. Jokio backdrop-filter — dizaino sistema
   draudžia blur; užtenka šviesios kreminės plėvelės kontrastui su lenta. */
#hero-battle-overlay.cm-battle { background: rgba(251, 247, 239, 0.42); }

/* UI STUMIAMAS Į APAČIĄ — viršuje lieka „langas" į dioramą.

   Chessmonų mūšyje lenta gali būti centre, nes ten scena trumpa ir žaidėjas
   žiūri tik į galvosūkį. Herojaus partija trunka minutes, o vartotojas aiškiai
   pasakė, kad nori matyti abu veikėjus (2026-08-19: „nesimato veikėjų — tik
   trobelė"). Centruota lenta uždengdavo būtent tą juostą, kurioje jie stovi.

   `justify-content: flex-end` + `padding-top` palieka viršutinį ~26 % ekrano
   scenai; lenta ir juostos susispaudžia į apatinę dalį. `--cb-gap` sumažintas —
   kitaip aukštuose languose tarpai vėl išstumtų lentą į vidurį. */
#hero-battle-overlay .cb-battle {
    justify-content: flex-end;
    padding-top: calc(26vh + env(safe-area-inset-top));
    --cb-gap: 6px;
}

/* Žemuose/gulsčiuose languose scenai vietos nėra — grąžinam centravimą, kad
   lenta neišlįstų už ekrano (svarbiau žaisti nei matyti foną). */
@media (max-height: 620px) {
    #hero-battle-overlay .cb-battle {
        justify-content: center;
        padding-top: calc(8px + env(safe-area-inset-top));
    }
}

/* Herojaus titulas po vardu („Girios metraštininkas") */
.ch-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tc-ink-soft);
    line-height: 1.2;
    margin-top: 2px;
}

/* ELO ženkliukas — kietas kraštas, be blur (dizaino sistema) */
.ch-elo {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--tc-gold-text);
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius-pill);
}

/* Ėjimų juosta. Vietoj chessmonų „taškelių" (ten ėjimų skaičius žinomas iš
   anksto) — tikra notacija, nes partijos ilgis nenuspėjamas.
   `nowrap` + horizontalus slinkimas: telefone eilutė turi slinktis, o ne
   augti į kelias eilutes ir stumti lentą žemyn. */
.ch-midbar { width: 100%; max-width: 560px; }
.ch-moves {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--tc-ink-soft);
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius, 10px);
    padding: 5px 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* Slinkimo juosta telefone atimtų aukščio — slepiam, slenkama programiškai
       (renderMoves nustato scrollLeft). */
    scrollbar-width: none;
    min-height: 1.6em;
}
.ch-moves::-webkit-scrollbar { display: none; }
/* Kol nesužaistas nė vienas ėjimas, juosta tuščia — rodyti pilką „dėžutę"
   be turinio atrodo kaip krovimosi klaida, todėl ji slepiama (:empty). */
.ch-moves:empty { display: none; }
.ch-moves b { color: var(--tc-ink); font-weight: 800; }

/* Pasidavimo mygtukas — raudonas kraštas, kad skirtųsi nuo „pabėgti" */
.ch-resign { border-color: var(--tc-red-deep, #B03A31); }

/* Telefone notacija dar mažesnė — svarbiau, kad tilptų lenta */
@media (max-height: 700px) {
    .ch-moves { font-size: 0.72rem; padding: 3px 8px; }
    .ch-title { display: none; }   /* titulas — malonumas, ne būtinybė */
}

/* ==================================================== ŽINIUONIS (2026-08-20)

   Pokalbio langas su Senoliu Kaisu — faktai ir patarimai apie šachmatus.

   KODĖL NE MODALAS (`.cm-finale`). Herojaus partija pasaulį SUSTABDO, tad ten
   modalas teisingas. Žiniuonio pokalbio metu pasaulis TEBEVEIKIA ir žaidėjas
   tebestovi prie jo — todėl langas laikosi ekrano APAČIOJE ir palieka matomą
   patį veikėją. Uždengus visą ekraną dingtų pojūtis, kad su kažkuo kalbamasi.

   Dizaino sistema (ai/plans/design-system.md): kietas šešėlis (blur 0),
   ink kraštinė, jokių gradientų ir jokio backdrop-filter. */
.cm-sage {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 16;                 /* virš HUD (12–15), po mūšio overlay'umi */
    width: min(560px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 5px 0 var(--tc-line);
}
.cm-sage[hidden] { display: none; }

.cm-sage-head {
    display: flex; align-items: center; gap: 10px;
}
.cm-sage-avatar {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    background: var(--tc-blue);
    border: 2px solid var(--tc-ink);
    border-radius: 50%;
}
/* Vardas + titulas vienas po kito; `min-width: 0` leidžia ilgam vertimui
   trumpėti, o ne stumti mygtuką už lango krašto. */
.cm-sage-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cm-sage-who b { font-size: 0.95rem; font-weight: 800; line-height: 1.2; }
.cm-sage-who i {
    font-style: normal;
    font-size: 0.75rem; font-weight: 600;
    color: var(--tc-ink-soft);
}

/* Žymė „Faktas" / „Patarimas". Spalva sako, kurio tipo žinia — žaidėjas iš
   karto mato, ar tai istorija, ar veiksmas, kurį galima išbandyti. */
.cm-sage-kind {
    flex: 0 0 auto;
    padding: 3px 9px;
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.03em;
    border: 2px solid var(--tc-ink);
    border-radius: 999px;
    background: var(--tc-gold);
}
.cm-sage-kind--tip { background: var(--tc-green); }

.cm-sage-close {
    width: 32px; height: 32px; flex: 0 0 auto;
    font-size: 0.9rem; font-weight: 800;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: 8px;
    cursor: pointer;
}

.cm-sage-text {
    margin: 0;
    font-size: 0.95rem; line-height: 1.5;
    color: var(--tc-ink);
    /* Tekstai skiriasi ilgiu (nuo 1 iki 3 sakinių). Be minimalaus aukščio
       langas šokinėtų kas paspaudimą — nemalonu, kai spaudžiama iš eilės. */
    min-height: 4.2em;
}

.cm-sage-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Mygtukas šiame lange mažesnis nei `.cm-play-btn` numatytasis (14px 48px):
   ten jis vienintelis ekrane, čia — eilutėje su skaitikliu.
   ⚠️ Aukštis IŠLIEKA ≥44px (tap target, CLAUDE.md): 10px + 10px + ~24px. */
.cm-sage-foot .cm-play-btn {
    font-size: 0.95rem;
    padding: 10px 22px;
}
.cm-sage-count {
    font-size: 0.75rem; font-weight: 700;
    color: var(--tc-ink-soft);
}

/* Mūšio metu — kaip ir visas kitas HUD'as (žr. `body.cm-in-battle` taisykles) */
body.cm-in-battle .cm-sage { display: none !important; }

/* --- TELEFONAS -----------------------------------------------------------
   ⚠️ Vairalazdė yra APAČIOJE KAIRĖJE (130px + 24px tarpas), o šuolio/bėgimo
   mygtukai — apačioje dešinėje. Langas apačioje juos uždengtų, tad telefone
   jis keliamas VIRŠ jų. Tap taikiniai NEMAŽINAMI (CLAUDE.md: mobilus media
   query niekada nemažina mygtukų). */
@media (max-width: 720px), (pointer: coarse) {
    .cm-sage {
        bottom: calc(178px + env(safe-area-inset-bottom));
        width: calc(100vw - 20px);
        padding: 10px 12px 12px;
    }
    .cm-sage-text { font-size: 0.9rem; min-height: 5em; }
    /* Uždarymo mygtukas telefone — pilnas 44px taikinys (CLAUDE.md / WCAG 2.5.5).
       Kompiuteryje 32px pakanka (pelė tiksli), bet pirštui — ne: išmatuota
       390×844 ekrane, kur jis buvo 32×32. Mobilus media query mygtukų NEMAŽINA,
       tik DIDINA — tai ir daroma čia. */
    .cm-sage-close { width: 44px; height: 44px; font-size: 1rem; }
}

/* Žemi ekranai (peizažo režimas telefone): lango aukštis svarbiau nei tarpai */
@media (max-height: 520px) {
    .cm-sage { bottom: calc(12px + env(safe-area-inset-bottom)); gap: 7px; padding: 9px 12px 10px; }
    .cm-sage-text { min-height: 0; }
    .cm-sage-who i { display: none; }   /* titulas — malonumas, ne būtinybė */
}

/* ================= PELES VALDYMAS (tik kompiuteryje, 2026-08-20) =========
   Taikiklis + raginimas spustelėti. Abu valdo main.js per `onMouseLook`.
   Mobiliajame nerodomi niekada (žr. media query gale). */

/* TAIKIKLIS. Sąmoningai MAŽAS ir statiškas: šaudoma horizontaliai (sviediniai
   neturi vertikalaus greičio, žr. combat.js), tad taikiklis rodo KRYPTĮ, o ne
   tikslų tašką. Didelis „snaiperio" kryžius meluotų apie tikslumą.

   Spalva — `--tc-ink` su balta apvedimo linija, kad matytųsi ir ant tamsaus
   požemio, ir ant šviesaus dangaus. Jokio `mix-blend-mode`: jis ant WebGL
   canvas'o elgiasi nenuspėjamai skirtingose GPU. */
.cm-cross {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tc-ink);
    box-shadow: 0 0 0 2px #FFFFFF;
    pointer-events: none;   /* niekada nesugauna paspaudimo */
}

/* RAGINIMAS. Rodomas, kol žymeklis NEužrakintas — t. y. žaidėjas mato įprastą
   žymeklį ir nežino, kad pelė gali valdyti kamerą. Dedamas ties ekrano viduriu
   žemiau centro: viršuje jau yra pranešimų juosta (`.cm-ptoast`). */
.cm-mousehint {
    position: fixed;
    left: 50%; bottom: 16%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 20px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-line);
    font-weight: 800;
    font-size: 0.95rem;
    text-align: center;
    pointer-events: none;   /* paspaudimas turi pasiekti canvas, ne šį burbulą */
}
.cm-mousehint small {
    font-weight: 600;
    font-size: 0.78rem;
    opacity: 0.75;
}

/* Mobiliajame peles valdymo nėra — Pointer Lock ten neegzistuoja, o valdymas
   yra vairalazdė. Slepiam abu elementus GRIEŽTAI, kad joks JS kelias jų
   netyčia neparodytų siaurame ekrane. */
@media (pointer: coarse) {
    .cm-cross, .cm-mousehint { display: none !important; }
}


/* ---------------------------------------------------- RAKTO ATSKLEIDIMAS
   (2026-08-21). Sfinkso nugalejimas yra retas, vienkartinis ivykis — anksciau
   ji pranesdavo eilinis `.cm-ptoast`, dingstantis per 1.5 s. Dabar tai atskira
   scena su savo ritmu: spinduliai -> raktas krenta -> blyksnis -> tekstas.

   ⚠️ `pointer-events: none` VISUR — tai NE modalas. Zaidejas gali toliau
   judeti; efektas tiesiog uzdengia ekrana ir pats issijungia. Modalas cia
   butu bausme (dar vienas mygtukas po ir taip ilgo musio).

   Dizainas pagal CLAUDE.md: kieti sesliai, jokiu blur'u, spalvos tik tokenais. */
.cm-keyreveal {
    position: fixed; inset: 0;
    z-index: 60;
    pointer-events: none;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;

    /* ATSPALVIS. Scena bendra visiems dideliems ivykiams, todel spalva
       parametrizuota: `showCelebration({tone})` uzdeda `.cm-cel--green` /
       `--red` / `--blue`, o be ju lieka auksas (rakto elgsena — nepakitusi).
       `--cm-cel-rgb` reikalingas ATSKIRAI, nes spinduliai naudoja `rgba()`
       su alfa, o CSS neturi budo paimti alfa is hex tokeno be `color-mix`
       (kuris Safari 15 dar nepalaikomas). */
    --cm-cel-color: var(--tc-gold);
    --cm-cel-deep:  var(--tc-gold-deep);
    --cm-cel-rgb:   236, 163, 19;
}
.cm-keyreveal.cm-cel--green {
    --cm-cel-color: var(--tc-green);
    --cm-cel-deep:  var(--tc-green-deep);
    --cm-cel-rgb:   56, 183, 107;
}
.cm-keyreveal.cm-cel--red {
    --cm-cel-color: var(--tc-red);
    --cm-cel-deep:  var(--tc-red-deep);
    --cm-cel-rgb:   226, 87, 76;
}
.cm-keyreveal.cm-cel--blue {
    --cm-cel-color: var(--tc-blue);
    --cm-cel-deep:  var(--tc-blue-deep);
    --cm-cel-rgb:   58, 179, 242;
}

/* Spinduliai — kūginis gradientas, letai besisukantis. Vienas elementas,
   jokio JS: `conic-gradient` + `rotate` animacija yra visiskai GPU pusej. */
.cm-keyreveal-rays {
    position: absolute;
    width: 150vmax; height: 150vmax;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(var(--cm-cel-rgb), 0.26) 0deg 7deg,
        rgba(var(--cm-cel-rgb), 0)    7deg 20deg);
    animation: cm-key-rays 9s linear infinite, cm-key-fade 2.9s var(--tc-ease) forwards;
}
@keyframes cm-key-rays { to { transform: rotate(360deg); } }
@keyframes cm-key-fade {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Blyksnis rakto nusileidimo momentu — issipleciantis auksinis ziedas. */
.cm-keyreveal-burst {
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 6px solid var(--cm-cel-color);
    opacity: 0;
    animation: cm-key-burst 900ms var(--tc-ease) 620ms forwards;
}
@keyframes cm-key-burst {
    0%   { transform: scale(0.3); opacity: 0.95; }
    100% { transform: scale(5.2);  opacity: 0; }
}

/* Pats raktas. Krenta is virsaus, atsitrenkia (`scale` persoka) ir kabo. */
.cm-keyreveal-key {
    position: relative;
    font-size: 6rem; line-height: 1;
    /* Tarpas iki antrastes: be jo rakto kotas uzlipdavo ant „RAKTAS GAUTAS!"
       juostos ir abu elementai virsdavo viena neaiskia deme. */
    margin-bottom: 14px;
    filter: drop-shadow(0 6px 0 var(--tc-ink));
    opacity: 0;
    animation: cm-key-drop 2.9s var(--tc-ease) forwards;
}
@keyframes cm-key-drop {
    0%   { opacity: 0; transform: translateY(-46vh) scale(0.45) rotate(-28deg); }
    22%  { opacity: 1; transform: translateY(0)     scale(1.25) rotate(6deg); }
    30%  {              transform: translateY(0)     scale(0.94) rotate(-3deg); }
    38%  {              transform: translateY(0)     scale(1.06) rotate(0deg); }
    46%  {              transform: translateY(0)     scale(1)    rotate(0deg); }
    82%  { opacity: 1; transform: translateY(0)     scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-18px) scale(0.9) rotate(0deg); }
}

.cm-keyreveal-title,
.cm-keyreveal-text {
    position: relative;
    max-width: min(560px, 88vw);
    text-align: center;
    background: var(--cm-cel-color);
    border: 3px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 5px 0 var(--tc-line);
    color: var(--tc-ink);
    opacity: 0;
    animation: cm-key-text 2.9s var(--tc-ease) forwards;
}
.cm-keyreveal-title {
    padding: 8px 22px;
    font-size: 1.5rem; font-weight: 800;
    letter-spacing: 0.5px;
}
/* Paaiskinimas — mazesnis ir sviesesnis, kad antraSte liktu pirma. */
.cm-keyreveal-text {
    padding: 8px 18px;
    background: var(--tc-surface);
    font-size: 1rem; font-weight: 700;
    animation-delay: 120ms;
}
@keyframes cm-key-text {
    0%   { opacity: 0; transform: translateY(14px); }
    26%  { opacity: 1; transform: translateY(0); }
    84%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 520px) {
    .cm-keyreveal-key   { font-size: 4.2rem; }
    .cm-keyreveal-title { font-size: 1.15rem; padding: 7px 16px; }
    .cm-keyreveal-text  { font-size: 0.9rem;  padding: 7px 14px; }
}

/* Judesio jautrumas: paliekam tik atsiradima/isnykima, be sukimosi ir kritimo. */
@media (prefers-reduced-motion: reduce) {
    .cm-keyreveal-rays,
    .cm-keyreveal-burst { display: none; }
    .cm-keyreveal-key {
        animation: cm-key-text 2.9s var(--tc-ease) forwards;
    }
}

/* =============================================================== PROGRESO
   NULINIMAS („pradėti iš naujo", 2026-08-21)

   Du gabalai: mygtukas Chessdex panelės apačioje ir patvirtinimo modalas.
   Modalas naudoja `.cm-finale` / `.cm-finale-card` bazę (ta pati, kaip
   #exit-confirm) — čia tik tai, ko toji bazė neturi: dviejų stulpelių
   „prarandi / išlieka" sąrašas. */

/* Mygtukas atskirtas linija nuo `.cm-dex-foot` teksto — kad nebūtų palaikytas
   dar viena kolekcijos eilute. `flex: 0 0 auto`, kaip head/foot: sąrašas
   scrollinasi, mygtukas lieka matomas panelės apačioje. */
.cm-dex-reset {
    flex: 0 0 auto;
    padding: 10px 14px 12px;
    background: var(--tc-surface-2);
    border-top: 2px solid var(--tc-line);
}
.cm-dex-reset-btn {
    width: 100%;
    /* Lietimo taikinys >= 44px (CLAUDE.md) — nurodoma aiškiai, o ne
       paliekama padding'o atsitiktinumui. */
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.95rem;
    /* Nulinimas neatšaukiamas, todėl mygtukas ATSARGUS, o ne raginantis:
       ghost paviršius + raudonas tekstas. Pilnai raudonas mygtukas šalia
       kolekcijos atrodytų kaip pagrindinis veiksmas — o jis toks nėra. */
    color: var(--tc-red-text);
}

/* Nulinimo kortelė kiek platesnė už įprastą: joje du sąrašai greta. */
.cm-reset-card {
    width: min(520px, 100%);
    /* Įspėjamasis, o ne šventinis: kietas šešėlis raudonas, ne auksinis
       (blur 0 — kaip visur šioje dizaino sistemoje). */
    box-shadow: 0 6px 0 var(--tc-red-deep);
}

/* Du stulpeliai — „bus nunulinta" ir „išlieka". Greta, kad skirtumas būtų
   matomas iš pirmo žvilgsnio; siaurame ekrane virsta vienu stulpeliu. */
.cm-reset-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 4px;
    text-align: left;
}
.cm-reset-col {
    padding: 10px 12px;
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    background: var(--tc-surface-2);
}
.cm-reset-col b {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.cm-reset-col ul {
    margin: 0;
    padding-left: 17px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--tc-ink-soft);
}
.cm-reset-col li + li { margin-top: 4px; }

/* Spalva neša visą žinutę, todėl ji ne dekoracija: kairė — kas dingsta,
   dešinė — kas lieka. Kraštinė storesnė iš vidinės pusės, kad stulpeliai
   skirtųsi ir nespalvotame ekrane. */
.cm-reset-col--lose { border-left: 6px solid var(--tc-red); }
.cm-reset-col--lose b { color: var(--tc-red-text); }
.cm-reset-col--keep { border-left: 6px solid var(--tc-green); }
.cm-reset-col--keep b { color: var(--tc-green-text); }

/* Telefone du stulpeliai per siauri — sąrašai laužtųsi po vieną žodį eilutėje. */
@media (max-width: 520px) {
    .cm-reset-lists { grid-template-columns: 1fr; }
}

/* --- PAUZE (2026-08-25) --------------------------------------------------
   Uzuomina po mygtuku. Klaviaturos uzuomina telefone beprasme, todel ten
   slepiama (`pointer: coarse`), o ne tik mazinama.
   WARN `pointer: coarse` cia SAUGUS: tai tik dekoratyvi eilute. Valdikliams
   jo naudoti negalima - zr. CLAUDE.md APK spastus. */
.cm-pause-hint {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--tc-ink-soft, #5A6472);
}
@media (pointer: coarse) {
    .cm-pause-hint { display: none; }
}