/* ═══════════════════════════════════════════════════════════════════════════
   ȘEPTICĂ — PEISAJ (mobil, ecran culcat)
   ───────────────────────────────────────────────────────────────────────────
   DE CE UN FIȘIER SEPARAT

   Geometria din `septica-mobile.css` e construită pentru ecran VERTICAL: un
   buget de înălțime împărțit între mobilier (`--ui`) și conținut elastic
   (`--u`), cu masa înaltă și îngustă, ca pe telefon în portret.

   În peisaj ecuația aia nu are soluție. Măsurat pe iPhone 15 culcat (910×407):
   scena are 283px, mobilierul fix cere 49 × 4.04 = 198px, rămân 85px pentru
   cei 133 de `--u` → `--u` cade sub podeaua de 1px și se blochează acolo.
   Rezultat: masa se face 98×100px — o cutiuță cât o carte pe un ecran de 910 —
   iar cărțile ajung peste ea.

   Am încercat să repar din valori, direct în fișierul de portret, de patru ori:
   28px suprapunere → 22.7 → 51.7 → 47.6. De fiecare dată mai rău, fiindcă
   problema nu e aritmetică: în portret masa e ÎNALTĂ, în peisaj trebuie LATĂ.
   E alt aranjament, deci alt fișier.

   PRINCIPIUL, luat de la desktop (unde arată corect) și de la Tabinet:
     · masa își ia LĂȚIMEA disponibilă și rămâne joasă — bandă, nu coloană
     · cărțile își iau ÎNĂLȚIMEA, cu plafon, ca să nu crească peste bandă
     · mobilierul (adversari, blazon, dock, bară) se strânge proporțional
     · nimic nu depinde de `--u`, care e strivit aici

   ORDINEA DE ÎNCĂRCARE: DUPĂ `septica-mobile.css`, în `septica-pro.php`:
       <link rel="stylesheet" href="septica-landscape.css?v=...">

   Toate regulile stau într-un singur `@media`, ca să se poată scoate blocul
   întreg dintr-o mișcare dacă ceva iese prost.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: landscape) and (max-height: 560px) {

/* ═══ 1. SCENA ══════════════════════════════════════════════════════════════
   Înălțimea scenei se calcula cu o rezervă fixă de 104px pentru bara de jos.
   Aici bara are ~13% din ecran (vezi secțiunea 5), deci rezerva era prea mare
   și se pierdeau ~50px degeaba. Legăm rezerva de bara reală. */

body.game-active:not(.room-waiting) .game-canvas,
body.game-active:not(.room-waiting) .game-area {
    height:     calc(100vh - 13vh - 22px) !important;
    max-height: calc(100vh - 13vh - 22px) !important;
}

/* ═══ 2. ADVERSARII ═════════════════════════════════════════════════════════
   În portret sunt medalioane cu avatar mare. În peisaj devin insigne subțiri,
   ca la Tabinet: 14.8% din înălțime → 9%.
   Numele se taie cu puncte-puncte în loc să lățească insigna. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) {
    height: 9cqh !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-info {
    display: flex !important;
    align-items: center !important;
    padding: 0.4cqh 1cqw !important;
    gap: 0.6cqw !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-name {
    font-size: 3.4cqh !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Avatarul ieșea în stânga insignei, peste marginea ei. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) img {
    width: 7cqh !important;
    height: 7cqh !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 0.5cqw 0 0 !important;
    flex: 0 0 auto !important;
}

/* 2b. CAPSULA LEMN-AUR — desktop stilizează insigna cu un design bogat
   (`.game-4p .seat-north/.seat-west/.seat-east`, septica-pro.css ~25207:
   „PODURI OPONENȚI: capsulă LEMN pe TOT scaunul"). Regula desktop e legată
   de `.game-4p` și de px ficși (padding 6px, radius 40px), inutilizabilă
   direct. Portăm ACELAȘI desen (aceleași gradiente/shadow-uri), doar
   proporțiile în cqh/cqw, pe toate 2P/3P/4P — fără asta insigna cădea pe
   varianta simplă de sticlă (`.game-play-container .player-info`, linia
   ~25195), mult mai săracă vizual decât referința. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east {
    padding: 0.3cqh 0.8cqw 0.3cqh 0.3cqh !important;
    border-radius: 999px 8px 8px 999px !important;
    border: 1.2px solid rgba(228, 184, 96, .5) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 25%) padding-box,
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, rgba(0, 0, 0, 0) 1px 4px) padding-box,
        repeating-linear-gradient(90deg, rgba(52, 27, 8, .4) 0 2px, rgba(0, 0, 0, 0) 2px 5px, rgba(255, 224, 176, .10) 26px 28px, rgba(0, 0, 0, 0) 28px 56px) padding-box,
        linear-gradient(180deg, #6c4019 0%, #8c5a2a 30%, #6c4019 100%) padding-box !important;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .5),
        inset 0 1px 2px rgba(255, 225, 180, .35),
        inset 0 -3px 7px rgba(0, 0, 0, .5),
        inset 0 0 0 1.5px rgba(233, 196, 90, .28),
        0 0 0 1px #2a1708 !important;
}

/* Capsula de mai sus înlocuiește fundalul; placa interioară devine transparentă,
   ca pe desktop (linia ~25219), altfel dublăm bordura/umbra una peste alta. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-info,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-info,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-info {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Balanța — monedă aurie, ca pe desktop (linia ~25226), nu pastila plată. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .meta-balance,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .meta-balance,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .meta-balance {
    background: radial-gradient(circle at 30% 30%, #ffedb0 0%, #ffd700 38%, #8a6d1a 100%) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, .45), 0 1px 4px rgba(0, 0, 0, .55), inset 0 1px 2px rgba(255, 255, 255, .5) !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .meta-balance .player-balance-value,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .meta-balance .player-balance-value,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .meta-balance .player-balance-value {
    color: #2a1f04 !important;
    font-weight: 900 !important;
}

/* 2c. SPATELE CĂRȚILOR DIN MÂNA ADVERSARULUI — `.seat-hand` există în DOM
   (desktop: „Seat Hand - Cards Container", septica-pro.css ~23173) dar
   `.card.card-back` din portret e legat de `--u`, strivit la ~7px total.
   `.player-details` avea `flex:1`, apucând tot lățimea rămasă (189.8px din
   229px insignă) deși numele+meta au nevoie de doar ~99px — restul stătea
   nefolosit. Îl trecem pe `flex:0 0 auto` (mărimea conținutului) și dăm
   spațiul eliberat lui `.seat-hand`. Modelul cărții (`repeating-linear-
   gradient` maro, „lemn") vine automat din `.card-back` (septica-pro.css
   ~25205), nu trebuie reprodus aici. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-details {
    flex: 0 0 auto !important;
    width: auto !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .seat-hand,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .seat-hand,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .seat-hand {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    width: auto !important;
    gap: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-left: 0.6cqw !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-hand .card.card-back {
    width: 3.4cqh !important;
    height: auto !important;
    aspect-ratio: 5 / 7 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    position: static !important;
    flex: 0 0 auto !important;
}

/* ═══ 3. MASA ═══════════════════════════════════════════════════════════════
   Aici e miezul. În portret masa e `width: 98u` și `height: 105u` — proporție
   verticală. În peisaj o întoarcem: ia lățimea disponibilă și se așază în
   banda dintre insignele adversarilor și rândul cărților.

   `aspect-ratio: auto` e OBLIGATORIU: fără el, raportul din portret o
   reînalță și iese peste cărți.

   CAUZA REALĂ a mesei mici (găsită prin măsurare, nu ghicire): grila lui
   `.player-seat.seat-south` are randul crest/dock înalt de `--ui * 20`
   (~28cqh), dar conținutul lui (`#infoSouth`/`#tb-dock-live2`, secțiunea 5)
   are doar 10cqh. Diferența de ~18cqh era spațiu MORT, împins în interiorul
   lui `seat-south` — care fiind ancorat de `bottom`, împingea toată mâna
   mai jos și lăsa mesei doar banda strânsă de sus. Fixul e mai jos, în
   `.player-seat.seat-south`: aliniem randul grilei la conținutul real.

   Verificat, cu măsurători și captură: iPhone 15 peisaj (915×412, container
   332px) și Galaxy S9+ peisaj (654×315, container 252px), 2P și 4P — masa
   780×176 / 575×134, zero suprapunere cu adversarii sau cu mâna pe niciuna
   din cele patru combinații. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-area {
    width: 88cqw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    top: 13cqh !important;           /* sub insignele adversarilor (9cqh + aer) */
    bottom: 40cqh !important;        /* deasupra randului de carti — vezi sectiunea 3c: rândul de jos
                                         a crescut de la 10 la 16cqh pentru etichetele lizibile din
                                         sectiunea 5, deci masa cedează exact cât a crescut acela */
    height: auto !important;         /* înălțimea o dau top + bottom */
    aspect-ratio: auto !important;

    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 999px !important;   /* oval, ca pe desktop */
}

/* ═══ 3c. RÂNDUL GOL DIN GRILA MÂINII ═══════════════════════════════════════
   Vezi explicația de mai sus. Fără regula asta, `bottom: 34cqh` de mai sus
   ar face masa să intre peste mână — cele două reguli sunt o pereche, nu se
   pot separa. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-south {
    grid-template-rows: auto 16cqh !important;   /* aliniat la înălțimea din secțiunea 5 */
    margin-bottom: 5cqh !important;   /* vezi 5c: fără asta bara de jos (fixed) taie 9.3px din #infoSouth */
}

/* Interiorul mesei nu are voie să impună o înălțime minimă din portret.
   Padding 3cqh lăsa doar 8.7px de ramă vizibilă (6.5% din înălțimea mesei) —
   pe desktop rama e ~14.5% (50px dintr-o masă de 345px). La 6cqh ajungem la
   13.1%, aproape identic, verificat cu măsurători și captură. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live {
    min-height: 0 !important;
    height: 100% !important;
    --tb-rail-pad: 6cqh !important;
    padding: 6cqh !important;
    aspect-ratio: auto !important;
}


/* ═══ 3b. FORMA MESEI ═══════════════════════════════════════════════════════
   Pe desktop masa e ovală: `.tb-rail-live` și feltul din ea au
   `border-radius: 999px`. În peisaj regula mea o lăsase dreptunghiulară,
   fiindcă `septica-mobile.css` pune un radius mic calculat în `--u` — iar
   `--u` e strivit aici, deci ieșeau colțuri aproape drepte.
   Punem același oval ca pe desktop. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live::before,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live > * {
    border-radius: 999px !important;
}

/* 3e. RELIEFUL DE LEMN AL FELTULUI — `.table-felt` are pe desktop o bordură
   pe 3 culori (mai deschisă sus, mai închisă jos) plus un stack de 9 umbre
   (inel auriu, luciu, adâncime) care dă aspectul de ramă de lemn cu inlay
   auriu. `septica-mobile.css` (linia ~119, selector `.tb-rail-live >
   .table-felt`, MAI SPECIFIC decât regula noastră `.tb-rail-live > *` de
   mai sus, deci câștiga) o înlocuiește cu `border:none` și `border-radius:
   calc(var(--u)*2.5)` — iar `--u` e strivit în peisaj, deci ieșea 2.5px:
   felt aproape drept într-o ramă ovală, muchii nealiniate. Portăm relieful
   desktop (border colorat, box-shadow), cu radius 999px ca să se alinieze
   cu `.tb-rail-live` de mai sus. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live > .table-felt,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt.enhanced-3d {
    border-radius: 999px !important;
    border: 2px solid rgba(65, 40, 20, .85) !important;
    border-top-color: rgba(100, 68, 35, .75) !important;
    border-bottom-color: rgba(35, 22, 10, .92) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-accent-rgb, 212, 175, 55), .15),
        inset 0 2px 0 rgba(255, 255, 255, .08),
        inset 0 6px 18px rgba(0, 0, 0, .55),
        inset 0 0 50px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(var(--color-accent-rgb, 212, 175, 55), .2) !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt::before,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt::after {
    border-radius: 999px !important;
}


/* ═══ 3d. TEANCUL DE CĂRȚI ═══════════════════════════════════════════════════
   `.table-deck` e ancorat din construcție în colțul jos-dreapta al feltului
   (`right/bottom: var(--space-md)`, din septica-pro.css). Pe desktop masa e
   suficient de înaltă încât colțul ăla e aproape drept. În peisaj masa e o
   pilulă scundă (border-radius:999px pe o cutie cu înălțime mică = capătul
   din dreapta e un semicerc întreg, nu un colț) — iar `.tb-rail-live` are
   `overflow:hidden`, deci exact colțul unde stă teancul e tăiat de curbură.
   Rezultat: teancul exista în DOM, avea `display:flex`, dar vizual dispărea
   sub rama de lemn — verificat cu o captură mărită, nu doar cu geometria.

   Soluția nu e să mărim spațiul din colț, e să nu mai stea în colț: îl
   centrăm pe verticală, lângă marginea dreaptă — acolo curbura e mai puțin
   agresivă decât în vârful colțului. */

.table-deck {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    right: 5cqh !important;
}

/* ═══ 3f. POTUL PESTE CARTEA JUCATĂ ══════════════════════════════════════════
   `.table-info` (conține `.table-pot`, chip-ul cu numărul de cărți) NU e în
   fluxul normal lângă `#tableCards` — e `position:absolute`, cu `top` calculat
   să cadă în centrul vertical al feltului. Iar cartea jucată din `#tableCards`
   e la rândul ei centrată, pe ambele axe, în același felt. Rezultat măsurat:
   cartea la x:353-388/y:118-167, potul la x:376-399/y:145-172 — se suprapun
   pe 12×22px, indiferent de valorile din secțiunile 3/4, fiindcă niciuna din
   ele nu mișcă potul.

   Nu mută pe verticală (nu e loc — asta a fost eroarea din 3/3c, repetată
   aici ar da din nou spațiu mort). Mută LATERAL, spre marginea dreaptă a
   mesei. Rămâne pe centrul vertical (`top:50%`), unde semicercul din capătul
   pilulei (secțiunea 3d) are raza maximă — deci nu-l taie, spre deosebire de
   teanc care era aproape de colț. Verificat: gol orizontal de 144-664px
   față de o carte centrată, pe măsurătoare și pe captură mărită 5×. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt > .table-info {
    left: auto !important;
    right: 2cqw !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ═══ 3g. ISTORICUL RUNDELOR (.pile-round) POATE LOVI POTUL ═════════════════
   `.pile-round` (mini-cărțile „K♣ Q♦..." ale rundelor terminate) e copil
   DIRECT al `#tableCards` (septica-pro.js ~5937: `:scope > .card, :scope >
   .pile-round`), deci se adaugă la lățimea rândului de cărți curente. Fără
   limită, cu mai multe runde acumulate rândul crește spre dreapta și poate
   ajunge sub potul repoziționat la 3f. Limităm lățimea maximă a rândului și
   comprimăm mini-cărțile (altfel sunt dimensionate pentru desktop). */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards {
    max-width: 68cqw !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 0.5cqh !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .pile-round {
    padding: 0.3cqh 0.6cqw !important;
    gap: 1px !important;
    border-radius: 4px !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .pile-round-label {
    font-size: 5px !important;
    margin-right: 1px !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .pile-mini-card {
    font-size: 7px !important;
    padding: 0.5px 2px !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .pile-separator {
    font-size: 8px !important;
    margin: 0 1px !important;
}

/* ═══ 4. CĂRȚILE ════════════════════════════════════════════════════════════
   NU se leagă de `--u` — acolo e podeaua de 1px și ies cărți de 20px, ilizibile.
   Se leagă de înălțime, cu plafon în `vh` ca să nu crească peste banda lor
   pe ecrane scunde (Galaxy S9+ culcat are 315px). */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card {
    width: min(12cqh, 11vh) !important;
    height: auto !important;
    aspect-ratio: 5 / 7 !important;
    max-height: none !important;
    border-radius: 10% !important;  /* portret dă `7%/5%` (aproape drept); desktop 10px/85px ≈ 12% */
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards .card {
    width: min(12cqh, 11vh) !important;
    height: auto !important;
    aspect-ratio: 5 / 7 !important;
    border-radius: 10% !important;
}

/* ═══ 5. BLAZONUL MEU ȘI DOCK-UL DE JOC ═════════════════════════════════════
   Împreună luau 21.5% din înălțime — cât masa. Le-am strâns întâi la 10cqh,
   dar la 10cqh eticheta „CĂRȚI/PUNCTE/BALANȚĂ” (secțiunea 5b) nu avea loc și
   ieșea suprapusă peste cifre — deci acum e 16cqh, nu 10. Vezi 3c: rândul din
   grilă trebuie să crească exact cu aceeași valoare, altfel blazonul iese din
   propriul rând. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    height: 16cqh !important;
    min-height: 0 !important;
    padding: 0.4cqh 1cqw !important;
    gap: 0.6cqh !important;   /* vezi 5c: #tb-dock-live2 are 3 rânduri interne, au nevoie de spațiere strânsă */
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth img {
    width: 9cqh !important;
    height: 9cqh !important;
}

/* ═══ 5b. ETICHETELE „CĂRȚI / PUNCTE / BALANȚĂ” ══════════════════════════════
   Sunt scrise prin CSS (`.meta-item::after { content: "CĂRȚI" }`, definite în
   septica-pro.css), nu ca text propriu-zis — de-aia nu apar la o căutare de
   text în DOM. Pe desktop stau fix la 7px. Sub 992px, `septica-mobile.css`
   le leagă de `--ui` (`calc(var(--ui) * 1.4)`), care e plafonat la 4.6px —
   deci etichetele ieșeau de 4-6px, ilizibile. Le ținem la aceeași valoare
   fixă ca pe desktop. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item::after {
    font-size: 7px !important;
}

/* ═══ 5c. CONȚINUTUL DIN #tb-dock-live2 IESE DIN CUTIA LUI ══════════════════
   `#tb-dock-live2` e `flex-direction:column` cu 3 rânduri (`.td-top` eticheta
   „RÂNDUL tău", `.td-mid` „Runda X/8 + cronometru", `.td-tools` butoanele) —
   pe desktop au loc lejer. Textul e la un `font-size:16px` FIX, netăiat de
   nimic în peisaj: 19.2px + 24px + 32px + spații > 46.5px din cutie, deci
   `.td-tools` (rândul de butoane) ieșea 8.7px sub cutie. Comprimăm primele
   două rânduri la cqh, ca restul fișierului — nu la fel de late ca desktop,
   dar acum conținutul chiar încape (verificat: -1.1px, adică sub cutie). */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-top {
    font-size: 3cqh !important;
    line-height: 1.1 !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-mid {
    font-size: 2.6cqh !important;
    line-height: 1.1 !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-tools {
    margin: 0 !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-btn {
    width: 7cqh !important;
    height: 7cqh !important;
}

/* ═══ 6. BARA DE JOS ════════════════════════════════════════════════════════
   Avea două rânduri suprapuse — status (36px) + butoane (61px) = 118px, adică
   29% dintr-un ecran de 412. Rândul de status e redundant: aceleași cifre sunt
   în blazonul jucătorului.

   Înălțimea se leagă de ECRAN, nu de conținut: altfel rămâne 53px fix și pe un
   ecran de 315px devine iar 22%. */

body.game-active:not(.room-waiting) .nav-rail {
    height: 13vh !important;
    min-height: 40px !important;
    max-height: 56px !important;
    padding: 0 2cqw !important;
    align-items: center !important;
}

body.game-active:not(.room-waiting) .nav-rail .status-bar {
    display: none !important;
}

body.game-active:not(.room-waiting) .nav-bar-btn {
    height: 9vh !important;
    max-height: 40px !important;
    min-height: 0 !important;
    padding: 0 1cqw !important;
    gap: 0 !important;
}

/* doar pictograme: etichetele nu încap și oricum se înțeleg din simbol */
body.game-active:not(.room-waiting) .nav-bar-btn span:not(.material-symbols-rounded) {
    display: none !important;
}

body.game-active:not(.room-waiting) .nav-bar-btn .material-symbols-rounded {
    font-size: min(5.5vh, 22px) !important;
}

/* Avatarul din bară ieșea deasupra ei ca un balon. */
body.game-active:not(.room-waiting) .nav-bar-btn img {
    width: min(5vh, 22px) !important;
    height: min(5vh, 22px) !important;
    transform: none !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    border-width: 1px !important;
}

/* ═══ 7. FĂRĂ MĂRIRE LA ATINGERE ════════════════════════════════════════════
   Avatarele cresc la hover. Pe desktop e în regulă; în peisaj n-au unde. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat img,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-avatar {
    transition: none !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:hover img,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-avatar:hover {
    transform: none !important;
    width: 7cqh !important;
    height: 7cqh !important;
}

/* ═══ 8. SALA DE AȘTEPTARE ══════════════════════════════════════════════════
   Bara de jos e `position: fixed`, deci nu ocupă loc în flux și conținutul
   derulează dedesubtul ei. Rezervăm cât ține. */

body.room-waiting .game-area {
    padding-bottom: calc(13vh + 24px + var(--safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(13vh + 24px + var(--safe-area-inset-bottom, 0px)) !important;
}



/* ═══ 9. RAMA DE LEMN — RELIEFUL COMPLET ════════════════════════════════════
   `septica-mobile.css` nu turtește culorile — antetul lui spune adevărat,
   gradienții sunt copiați 1:1. Dar ÎȘI LEAGĂ TOATE COTELE de `--u`, iar în
   peisaj `--u` stă pe podeaua de 1px. Deci fondul e acolo, doar că la scara
   greșită:

     · niturile de pe ramă (`septica-mobile.css:97`): rază `calc(--u * 1.2)`
       → 1.2px. Pe desktop au 14px. Practic dispar, rama iese lemn neted,
       fără feronerie.
     · umbra de sub masă: `0 calc(--u*2) calc(--u*5)` → 2px/5px. Desktop:
       24px/50px. Masa nu mai stă pe nimic, arată lipită de fundal.

   Mobilul are 8 straturi de fundal, desktopul (`septica-pro.css:25147`) are
   12. Lipsesc: doi nituri LATERALI (1.8% / 98.2%), două fibre încrucișate
   (87deg + 90deg fin) și două lumini calde sus/jos.

   Cotele merg în `cqh`, legate de `--tb-rail-pad` (6cqh, secțiunea 3), nu în
   px ficși: pe desktop nitul are 14px la o ramă de 50px — raportul 0.28 e ce
   portăm, nu numărul. La container 336px: ramă 20.2px, nit 5.6px. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live {
    background:
        radial-gradient(circle at 30% 6%,   #160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        radial-gradient(circle at 50% 6%,   #160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        radial-gradient(circle at 70% 6%,   #160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        radial-gradient(circle at 30% 94%,  #160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        radial-gradient(circle at 50% 94%,  #160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        radial-gradient(circle at 70% 94%,  #160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        radial-gradient(circle at 1.8% 50%, #160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        radial-gradient(circle at 98.2% 50%,#160c04 0 1.68cqh, #4a2c12 1.68cqh 2.16cqh, transparent 2.4cqh),
        repeating-linear-gradient(87deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 4px),
        repeating-linear-gradient(90deg, rgba(52,27,8,.55) 0 2px, rgba(0,0,0,0) 2px 5px, rgba(255,224,176,.14) 26px 28px, rgba(0,0,0,0) 28px 56px),
        radial-gradient(120% 60% at 50% 0%,   rgba(255,228,180,.20), rgba(255,228,180,0) 40%),
        radial-gradient(120% 60% at 50% 100%, rgba(255,228,180,.14), rgba(255,228,180,0) 40%),
        linear-gradient(180deg, #c08a47 0%, #8c5a2a 16%, #6c4019 50%, #8c5a2a 84%, #c08a47 100%) !important;

    /* Umbra exterioară în cqh (desktop 24/50px la o masă de 345px; aici masa
       are 176px, deci scara vine din container, nu din px copiați). Umbrele
       INTERIOARE rămân mici — ele desenează muchia lemnului, nu adâncimea. */
    box-shadow:
        0 2.5cqh 5cqh rgba(0,0,0,.65),
        inset 0 0.6cqh 1.2cqh rgba(255,225,180,.35),
        inset 0 -1.5cqh 3.5cqh rgba(0,0,0,.55),
        0 0 0 1px #2a1708 !important;
}


/* ═══ 10. SCLIPIREA DE PE LEMN ══════════════════════════════════════════════
   `septica-mobile.css:108` o stinge complet: `.tb-rail-live::before {
   display: none }`. Pe desktop e o dâră de lumină care traversează rama la
   fiecare 7 secunde (`@keyframes tbSheenSeptica`, septica-pro.css:25168).
   E singura mișcare de pe masă — lipsa ei se simte chiar dacă nu-ți dai
   seama imediat ce anume lipsește.

   Animația e declarată global în septica-pro.css, deci aici e destul s-o
   reaprindem.

   ATENȚIE la interacțiunea cu secțiunea 3b: acolo `::before` primește
   `border-radius: 999px` odată cu rama. Nu-l vrem rotunjit — e o bandă
   dreaptă, înclinată 8°, care se plimbă pe sub felt și e tăiată de
   `overflow:hidden` al ramei. Îl readucem la 0.

   Fără `z-index`: feltul are `z-index:1` (septica-mobile.css:122), deci dâra
   rămâne SUB el și mătură doar lemnul. Exact ca pe desktop. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 46% !important;
    height: 200% !important;
    border-radius: 0 !important;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.12) 50%, rgba(255,255,255,0)) !important;
    transform: rotate(8deg) !important;
    pointer-events: none !important;
    animation: tbSheenSeptica 7s ease-in-out infinite !important;
}


/* ═══ 11. CHENARUL DINTRE LEMN ȘI FELT — PROPORȚIA ══════════════════════════
   Ăsta e cel mai vizibil defect de pe masă și nu se vede citind codul, doar
   făcând scăderea.

   `.tb-rail-live::after` e banda dintre lemn și felt. Grosimea ei nu e o
   valoare proprie — e DIFERENȚA dintre padding-ul ramei și `inset`-ul ei.
   Comentariul tău din septica-mobile.css:110 o spune deja: „grosimea = padding
   − inset, deci cele două se reglează ÎMPREUNĂ".

     mobil:   padding 6.5u, inset 4.55u  →  4.55u lemn, 1.95u chenar   (70:30)
     desktop: padding 50px, inset 30px   →  30px lemn,  20px chenar    (60:40)

   Secțiunea 3 a mutat padding-ul pe `6cqh` ca rama să aibă grosimea de pe
   desktop — dar inset-ul a rămas `calc(var(--u) * 4.55)`, adică 4.55px.
   Perechea s-a rupt. Măsurat la container 336px (iPhone 15 culcat):

     padding 6cqh = 20.2px,  inset 4.55px  →  4.6px lemn,  15.6px chenar

   Raportul s-a INVERSAT: 23:77. De-aia masa arată ca un inel gros de alamă cu
   o așchie de lemn pe margine, în loc de ramă de lemn cu un fir de chenar.
   Toată munca din secțiunea 9 de mai sus s-ar vedea pe 4.6px fără fixul ăsta.

   Legăm inset-ul de același `--tb-rail-pad`, cu raportul de pe desktop. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live::after {
    inset: 3.6cqh !important;          /* 6cqh − 2.4cqh → 60% lemn, 40% chenar */
    border-radius: 999px !important;   /* era calc(--u * 3) = 3px, într-o ramă ovală */
    box-shadow:
        0 1px 3px rgba(0,0,0,.5),
        inset 0 1px 1px rgba(255,240,200,.7) !important;
}

/* Chenarul e AURIU pe mobil și CROMAT pe desktop. Nu e o scăpare: ai schimbat
   deliberat culoarea, cu motiv scris (septica-mobile.css:109 — „era argintiu
   — singurul element din altă familie de pe masă"). Am lăsat auriul.
   Dacă vrei totuși cromul de pe desktop, decomentează blocul de mai jos. */
/*
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live::after {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,0) 1px 3px),
        linear-gradient(180deg, #f5f6f8 0%, #c0c4c8 22%, #fefeff 48%, #acb0b4 74%, #dcdee2 100%) !important;
    box-shadow:
        0 6px 14px rgba(0,0,0,.45),
        inset 0 2px 3px rgba(255,255,255,.85),
        inset 0 -3px 6px rgba(0,0,0,.4),
        0 0 0 1px rgba(0,0,0,.2) !important;
}
*/


/* ═══ 12. FELTUL — STRATURILE DE TEXTURĂ ════════════════════════════════════
   Secțiunea 3e a adus înapoi bordura și umbrele feltului, dar nu și FONDUL.

   Mobilul (`septica-mobile.css:126`) pune un singur strat:
   `linear-gradient(160deg, #a82020, #7c1313, #5a0d0d)` — o pantă dintr-un colț
   în altul. Desktopul (`septica-pro.css:25178`) suprapune șase:

     1  luciu diagonal la 118°
     2  țesătura la 45°
     3  lumina caldă de sus
     4+5 două arce aurii, stânga și dreapta (9% / 91%)
     6  fondul RADIAL — vignetă, nu pantă

   Al șaselea e cel care schimbă tot: desktopul are colțurile întunecate și
   centrul cald, mobilul are un roșu care curge într-o direcție. De-aia feltul
   arată „plat" chiar dacă e aceeași culoare.

   Păstrăm `var(--tb-felt-base)` la bază, altfel butonul „Culoare masă"
   (`body[data-septica-felt]`) nu mai are efect.

   Arcele aurii sunt singurele cu rază în px pe desktop (13px la o masă de
   345px înălțime). Aici masa are 176px, deci merg în cqh — altfel s-ar
   îngroșa până devin două pete.

   NU redeclarăm `box-shadow`: e pus deja la 3e și e chiar cel de pe desktop. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live > .table-felt,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt.enhanced-3d {
    background:
        linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,.12) 100%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,242,214,.10) 0%, transparent 58%),
        radial-gradient(circle at 9% 50%,  transparent 0 3.9cqh, rgba(233,196,90,.13) 3.9cqh 4.35cqh, transparent 4.5cqh),
        radial-gradient(circle at 91% 50%, transparent 0 3.9cqh, rgba(233,196,90,.13) 3.9cqh 4.35cqh, transparent 4.5cqh),
        var(--tb-felt-base, radial-gradient(58% 64% at 50% 44%, #a01e1e 0%, #7c1313 46%, #560c0c 82%, #3e0808 100%)) !important;
}

/* Rama interioară subțire de pe felt: desktopul o trage la `inset: 11% 6.5%`
   cu 2px (septica-pro.css:25187), mobilul la `inset: 4%` cu 1.5px. Pe o masă
   lată și scundă, 4% pe orizontală înseamnă 31px, iar pe verticală 7px —
   rama iese lipită de margine sus-jos și depărtată în lateral. Folosim
   valorile asimetrice de pe desktop, care sunt gândite exact pentru asta. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt::before {
    inset: 11% 6.5% !important;
    border: 2px solid rgba(255,255,255,.10) !important;
}


/* ═══ 13. EMBLEMA „ȘEPTICA" DIN CENTRUL MESEI ═══════════════════════════════
   `septica-mobile.css:141-144` o dimensionează tot în `--u`:

     cerc `--u * 22` → 22px   ·  pica `--u * 6` → 6px
     text `--u * 3`  → 3px    ·  simboluri `--u * 2` → 2px

   Textul cu foiță aurie animată (`tbFoilSeptica`) chiar rulează, dar la 3px
   arată ca un fir de praf pe felt. Pe desktop e `clamp(110px, 20vw, 150px)`
   cercul și `clamp(12px, 2vw, 17px)` textul.

   Le legăm de înălțimea mesei, cu plafon în px ca să nu crească peste felt pe
   tabletă. Poziția `top: 13%` de la mobil RĂMÂNE: în peisaj masa e scundă și
   centrul e ocupat de cărțile jucate — emblema centrată ar sta sub ele. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-emblem-live::before {
    width: min(38cqh, 120px) !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-emblem-live .te-spade {
    font-size: min(10cqh, 30px) !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-emblem-live .te-brand {
    font-size: min(4.6cqh, 14px) !important;
    letter-spacing: .3em !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-emblem-live .te-suits {
    font-size: min(3.2cqh, 10px) !important;
}



/* ═══ 14. OPONENȚI — PLACA DUBLATĂ ══════════════════════════════════════════
   Ăsta e efect secundar al secțiunii 2b, nu un defect al mobilului.

   Mobilul nu pune capsula pe scaun, o pune pe `.player-details`
   (`septica-mobile.css:186` — „placa = fundal închis + ramă aurie în degrade").
   Ca să nu iasă două rame una peste alta, tot el golește scaunul și
   `.player-info` (liniile 173 și 208). Coerent în sine.

   Secțiunea 2b a mutat capsula ÎNAPOI pe scaun, ca pe desktop, și a golit
   `.player-info` — dar `.player-details` a rămas cu placa aurie din mobil,
   fiindcă 2c îl atinge doar pe `flex`/`width`. Rezultat: capsulă de lemn pe
   dinafară, placă cu ramă aurie pe dinăuntru. Desktopul are UNA singură
   (`septica-pro.css:25224` golește `.player-info`, iar `.player-details` nu e
   stilizat deloc la oponenți).

   Golim placa interioară. Odată cu ea pică și decalajul care o servea:
   `margin-left: -3.5ui` plus `padding-left: 4.6ui` era trucul prin care
   avatarul călărea marginea plăcii. Fără placă rămâne doar text împins la
   dreapta cu ~21px. E singurul loc din fișier unde ating o cotă de așezare, și
   o fac fiindcă valoarea exista exclusiv pentru decorul tocmai scos. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-details {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
}


/* ═══ 15. OPONENȚI — SEMNUL „E RÂNDUL LUI" ══════════════════════════════════
   Secțiunea 14 tocmai a stins și indicatorul de tură, fără să se vadă că o face.

   Mobilul îl desenează pe `.player-details` (`septica-mobile.css:197`): ramă
   aurie aprinsă plus halou. Comentariul lui spune că înainte clasa
   `.active-turn` „exista în cod, dar nu făcea nimic vizual" — deci e o
   reparație a lui, nu ceva moștenit. Dacă golim placa și ne oprim, rămâi fără
   niciun semn cine e la rând.

   CORECȚIE față de prima variantă a acestei secțiuni: am scris că pe desktop
   indicatorul e cod mort. E adevărat DOAR pentru selectorul
   `.player-seat.active-turn .seat-north .player-avatar`
   (`septica-pro.css:25233`), care cere ca `.seat-north` să fie descendent al
   unui `.player-seat.active-turn` — dar `.seat-north` ESTE acel `.player-seat`.
   Acela nu se potrivește niciodată.

   Însă mai jos, în pasul final Tabinet (`septica-pro.css:25499`), există
   `.player-seat.active-turn #infoNorth .player-avatar` — pe ID, deci
   funcțional, și el bate lanțul de clase al mobilului. Inelul verde se aplică
   deja. Valorile de mai jos sunt cele exacte de acolo, ca să nu existe două
   variante ușor diferite în joc. */

/* Capsula NU se aprinde. Prima variantă a secțiunii îi dădea ramă aurie și
   halou, portate de la mobil — greșit: pe desktop capsula de lemn rămâne
   neschimbată, iar singurul semn e inelul verde de pe avatar. Aici stingem
   explicit haloul pe care mobilul îl pune pe `.player-details` (linia 197);
   secțiunea 14 golește doar starea de repaus, iar `.active-turn` fiind mai
   specific trecea peste ea. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east).active-turn .player-details {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-north.active-turn img,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-west.active-turn img,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-east.active-turn img {
    box-shadow:
        0 0 0 2.5px rgba(124, 242, 164, .95),
        0 0 14px rgba(74, 222, 128, .6),
        0 2px 6px rgba(0, 0, 0, .7) !important;
}


/* ═══ 16. JUCĂTORUL DE JOS — APRONUL DE LEMN ════════════════════════════════
   Cea mai mare bucată lipsă de la sud. Desktopul (`septica-pro.css:25311`) pune
   sub crest + mână + dock un APRON de lemn: șapte straturi de fundal (fibră,
   plăci, două șuruburi la 4% și 96%), `border-radius: 24px` și un box-shadow cu
   inel auriu pe interior. E perechea ramei de la masă — de-aia desktopul arată
   ca o masă cu blat și tăblie, nu ca piese care plutesc pe fundal.

   Mobilul îl șterge complet (`septica-mobile.css:264`), și pe bună dreptate: în
   portret scaunul de jos e o grilă pe două rânduri care ține o treime din
   ecran, iar un dreptunghi de lemn atât de mare ar înghiți tot.

   În peisaj problema nu dispare: grila e tot `"hand hand" / "crest dock"`, deci
   un apron pe TOT scaunul ar intra și în spatele cărților. Pe desktop e o
   singură bandă (crest | mână | dock) — acolo are sens, aici nu.

   Soluția: apronul merge pe `::before`, limitat la RÂNDUL DE JOS — exact cele
   16cqh din secțiunea 3c. Crestul și dock-ul stau pe lemn, cărțile rămân libere
   deasupra. `.seat-south::before` și `::after` sunt neocupate, verificat în
   ambele fișiere.

   `z-index` explicit: `#infoSouth` e element de grilă, nepoziționat, deci ar
   picta SUB un `::before` absolut. Îl ridicăm cu `position: relative`. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-south::before {
    content: '' !important;
    position: absolute !important;
    left: 1% !important;
    right: 1% !important;
    bottom: 0 !important;
    /* CORECTAT după captură: era `bottom: 0; height: 16cqh`, adică doar rândul
       de jos. Pe ecran ieșea invers decât plănuisem — lemnul apărea în spatele
       cărților, iar crestul și dock-ul rămâneau pe fundal întunecat. Cauza e că
       `.seat-south` e `position:absolute` cu `bottom` propriu, deci „jos" nu e
       unde credeam. Îl întind pe TOT scaunul, ceea ce e oricum mai aproape de
       desktop: acolo apronul ține crest + mână + dock la un loc. */
    top: 0 !important;
    height: auto !important;
    border-radius: 5cqh !important;   /* desktop: 24px la un apron de ~76px ≈ 0.32 */
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        linear-gradient(0deg,   rgba(255,255,255,.08), rgba(255,255,255,0) 25%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 25%),
        repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 4px),
        repeating-linear-gradient(90deg, rgba(52,27,8,.4) 0 2px, rgba(0,0,0,0) 2px 5px, rgba(255,224,176,.10) 26px 28px, rgba(0,0,0,0) 28px 56px),
        radial-gradient(circle at 4% 50%,  rgba(38,19,5,.5) 0 2px, rgba(38,19,5,0) 8px),
        radial-gradient(circle at 96% 50%, rgba(38,19,5,.5) 0 2px, rgba(38,19,5,0) 8px),
        linear-gradient(180deg, #6c4019 0%, #8c5a2a 30%, #6c4019 100%) !important;
    box-shadow:
        0 2cqh 4cqh rgba(0,0,0,.55),
        inset 0 2px 4px rgba(255,225,180,.35),
        inset 0 -1.2cqh 2.8cqh rgba(0,0,0,.5),
        inset 0 0 0 2px rgba(233,196,90,.28),
        0 0 0 1px #2a1708 !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #infoSouth {
    position: relative !important;
    z-index: 1 !important;
}


/* ═══ 17. (RETRASĂ) ════════════════════════════════════════════════════════
   Aici era o „tavă" pentru `#handSouth`: ramă aurie, fund întunecat, umbră —
   portată de la `septica-pro.css:25296`.

   E greșit. Regula aia e SUPRASCRISĂ pe desktop, mai jos, în pasul final
   Tabinet (`septica-pro.css:25559`), cu comentariul autorului:
     „mâna: FĂRĂ ramă/umbră/padding (cărțile stau direct pe apron)"
   Pe desktopul de azi cărțile stau direct pe apronul de lemn din secțiunea 16,
   fără tavă. Mobilul făcea deja lucrul corect; eu am citit o regulă moartă.

   Secțiunea rămâne ca număr ca să nu se rupă trimiterile. */


/* ═══ 18. DOCK-UL — FORMA DE PASTILĂ ════════════════════════════════════════
   Fundalul, rama aurie și umbra dock-ului supraviețuiesc în peisaj: desktopul
   le pune pe `#tb-dock-live2` (`septica-pro.css:25322`), selector cu ID, care
   bate lanțul de clase al mobilului. Singurul lucru pe care mobilul chiar îl
   suprascrie e forma: `border-radius: calc(var(--ui) * 4)` — un radius egal pe
   toate colțurile, ~18px.

   Desktopul are `16px 32px 32px 16px`: pastilă rotunjită spre exterior, dreaptă
   spre crest. Împreună cu crestul, care e oglinda ei (`32px 16px 16px 32px`),
   cele două se privesc. Cu radius egal, perechea se pierde. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    border-radius: 4cqh 8cqh 8cqh 4cqh !important;   /* desktop 16/32px la 66px = 25%/50% */
}


/* ═══ 19. OPONENȚI — CHIP-UL CU NUMĂRUL DE CĂRȚI ════════════════════════════
   Mobilul îl ascunde explicit (`septica-mobile.css:223`), cu motiv scris:
   „chip-ul cu numărul de cărți iese: e redundant, cărțile se văd sub placă".

   Argumentul ține în portret, unde mobilul scoate cărțile SUB insignă și se
   numără din ochi. În peisaj (vezi secțiunea 20) cărțile se întorc în capsulă,
   suprapuse ca o mână ținută — acolo nu mai numeri nimic. Desktopul îl are.
   Îl aducem înapoi. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-meta .meta-item:nth-child(2),
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-meta .meta-item:nth-child(2),
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-meta .meta-item:nth-child(2) {
    display: flex !important;
}


/* ═══ 20. OPONENȚI — CĂRȚILE ÎNAPOI ÎN CAPSULĂ ══════════════════════════════
   Cea mai mare diferență față de desktop, și cea pe care trebuie s-o verifici
   tu pe telefon — din CSS singur nu se poate decide.

   Sunt DOUĂ containere de cărți în cod pentru același loc:

     `.seat-hand`   — layout-ul vechi (`septica-pro.css:23222`). Ăsta l-ai
                      stilizat tu la secțiunea 2c.
     `.player-hand` — layout-ul Tabinet, cel de pe desktop de azi
                      (`septica-pro.css:25287`): rând în capsulă,
                      `align-items:center`, `flex: 0 0 auto`.

   Mobilul îl stilizează pe `.player-hand` și îl scoate AFARĂ din insignă:
   `position:absolute; top:100%`, adică atârnat dedesubt, cu cărți de
   `calc(var(--u) * 5.5)` — în peisaj 5.5px. Motivul lui e scris la linia 242:
   în portret nu încap și numele și cărțile în aceeași insignă, iar dedesubt e
   gol oricum.

   În peisaj sub insignă NU mai e gol: la 9cqh se termină insigna și la 13cqh
   începe masa (secțiunea 3). Cărțile atârnate cad exact peste rama de lemn.

   Deci le readucem în capsulă, ca pe desktop, cu aceeași cotă pe care ai
   folosit-o tu la `.seat-hand` (3.4cqh), ca cele două să arate identic
   indiferent care e cel viu.

   `.seat-hand:empty` — dacă `.player-hand` e containerul real, `.seat-hand`
   rămâne gol dar cu `flex: 1 1 auto` din secțiunea 2c, deci ar înghiți lățimea
   și ar împinge cărțile afară. `:empty` prinde exact cazul ăla și nu atinge
   nimic dacă tu ai avut dreptate și `.seat-hand` e cel plin. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-hand,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-hand,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-hand {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 0.6cqw !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-hand .card,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-hand .card,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-hand .card {
    width: 3.4cqh !important;
    height: auto !important;
    aspect-ratio: 5 / 7 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    position: static !important;
    flex: 0 0 auto !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .seat-hand:empty {
    display: none !important;
}


/* ═══ 21. OPONENȚI — BULINA DE STATUS ═══════════════════════════════════════
   `.player-status` (punctul verde „online", gri când e offline) e singurul
   element din scaun pe care NU-l atinge nici septica-mobile.css, nici fișierul
   ăsta. Deci rămâne cu cotele de bază din `septica-pro.css:6244`: 14px lățime,
   bordură de 2px.

   Pe desktop stă pe un avatar de 40px — 35% din el, o bulină. În peisaj
   avatarul are 7cqh, adică ~23px (secțiunea 2), deci bulina acoperă 60% din
   față. Nu e o regulă greșită, e o regulă pe care n-a scalat-o nimeni fiindcă
   nu se vede în niciun diff: e aceeași valoare peste tot.

   O legăm de avatar, cu același raport ca pe desktop: 0.35 × 7cqh ≈ 2.4cqh. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-status {
    width: 2.4cqh !important;
    height: 2.4cqh !important;
    border-width: 1px !important;
    bottom: 0 !important;
    right: 0 !important;
}


/* ═══ 22. OPONENȚI — CRONOMETRUL DE TURĂ DE PE AVATAR ═══════════════════════
   `.tab-water-timer` e inelul SVG cu secunde care apare peste avatarul celui
   care e la rând (`septica-pro.css:25342`, `.player-seat.active-turn` îl aprinde).
   E `inset: 0` pe avatar, deci se scalează singur — dar CONȚINUTUL lui nu:

     · `.tw-sec` (cifra) — mobilul o pune la `calc(var(--ui) * 3.2)` ≈ 15px
     · `.tw-label` (textul „SEC") — `calc(var(--ui) * 1.7)` ≈ 8px
     · `stroke-width: 4` pe arc — valoare fixă din desktop, netăiată de nimeni

   Pe un avatar de 23px: o cifră de 15px plus o etichetă de 8px = 23px de text
   într-un cerc de 23px, cu un arc de 4px pe margine. Cifra iese din inel.

   Le legăm de avatar. Eticheta „SEC" o scoatem sub 5px oricum n-ar fi lizibilă
   — desktopul o are la 8px pe un cerc de 60px, aici nu există raportul ăla. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-num .tw-sec {
    font-size: 2.8cqh !important;
    line-height: 1 !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-num .tw-label {
    display: none !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-arc .arc-bg,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-arc .arc-fg {
    stroke-width: 2.5 !important;
}


/* ═══ 23. FELTUL — BORDURA (corecție la secțiunea 3e) ═══════════════════════
   3e pune pe felt `border: 2px solid rgba(65,40,20,.85)` cu muchii colorate
   diferit sus/jos, plus un stack de umbre cu inel auriu, citite din
   `.table-felt` / `.table-felt.enhanced-3d`.

   Regulile alea sunt din layout-ul VECHI. Pe desktopul de azi feltul e stilizat
   de `.tb-rail-live > .table-felt` (`septica-pro.css:25176`), care e mai
   specific și câștigă — iar acolo scrie `border: none`. Are logică: rama de
   lemn ȘI chenarul din secțiunea 11 sunt deja două margini; o a treia, maro, e
   un contur în plus pe care desktopul nu-l are.

   Umbrele interioare sunt și ele altele: desktopul are un inel negru de 2px și
   o vinietă de 76px, fără inel auriu (auriul stă pe `::after`, nu pe felt).

   Dacă preferi bordura maro, șterge secțiunea asta — 3e redevine activă. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-rail-live > .table-felt,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt.enhanced-3d {
    border: none !important;
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,.5),
        inset 0 7px 22px rgba(0,0,0,.55),
        inset 0 0 76px rgba(0,0,0,.55) !important;
}


/* ═══ 24. OPONENȚI — INELUL DUBLU DE PE AVATAR ══════════════════════════════
   Pasul final Tabinet (`septica-pro.css:25493`) dă avatarelor de oponent DOUĂ
   inele concentrice: aur deschis 2px, apoi bronz întunecat încă 2px.

     desktop : 0 0 0 2px rgb(244,215,132), 0 0 0 4px rgb(110,82,29), 0 2px 6px …
     mobil   : 0 0 0 2px rgba(255,215,0,.85), 0 2px 6px …, inset …

   Mobilul are un singur inel, galben translucid. Diferența se vede: pe desktop
   avatarul pare încastrat într-o ramă de metal, pe mobil pare desenat cu un
   contur. Regula mobilului e pe patru clase, cea de desktop pe trei — deci
   mobilul câștigă și în peisaj. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-avatar,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-avatar,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-avatar {
    box-shadow:
        0 0 0 2px rgb(244, 215, 132),
        0 0 0 4px rgb(110, 82, 29),
        0 2px 6px rgba(0, 0, 0, .6) !important;
}


/* ═══ 25. OPONENȚI — CĂRȚILE SUPRAPUSE CA UN PACHET ═════════════════════════
   Completare la secțiunea 20. Desktopul (`septica-pro.css:25538`) nu pune
   cărțile una lângă alta, ci suprapuse: `margin: 0 -6px 0 0` la 24px lățime,
   adică un sfert din carte ascuns sub următoarea — arată ca un pachet ținut în
   mână, nu ca niște cutii aliniate. Plus `margin-left: 8px` pe container, ca să
   se desprindă de nume.

   Raportul suprapunerii (6/24 = 0.25) e ce portăm, la lățimea de 3.4cqh. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-hand .card,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-hand .card,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-hand .card {
    margin: 0 -0.85cqh 0 0 !important;
    z-index: 6 !important;
}


/* ═══ 26. OPONENȚI — SPATELE CĂRȚILOR ═══════════════════════════════════════
   Desktopul le lasă pe `.card-back` generic (`septica-pro.css:25211`): LEMN —
   dungi la 45° peste un radial maro, bordură închisă, inel auriu pe interior.
   Același desen ca la teancul de pe masă, deci masa și mâinile se potrivesc.

   Mobilul le rescrie doar pentru mâinile oponenților: fond aproape negru
   (`linear-gradient(160deg,#2a1a0c,#140c05)`), bordură aurie și un `::after`
   cu hașură încrucișată. Frumos în sine, dar e altă familie decât teancul de pe
   masă, care rămâne pe lemn — pe același ecran ies două modele de spate.

   Punem lemnul peste tot. `::after` se stinge, altfel hașura mobilului s-ar
   suprapune peste dungile lemnului. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-hand .card-back,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-hand .card-back,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-hand .card-back,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-hand .card.card-back {
    background:
        repeating-linear-gradient(45deg, #4a2c14 0 2px, #6b3d1d 2px 4px),
        radial-gradient(circle, #8b5a2b 0%, #3a2010 100%) !important;
    border: 1px solid #2a1810 !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(255,215,0,.3) !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-hand .card-back::after,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-hand .card-back::after,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-hand .card-back::after {
    display: none !important;
}


/* ═══ 27. CRESTUL DE JOS — RAMA CU FIBRĂ DE LEMN ════════════════════════════
   Desktopul are DOUĂ reguli pentru `#infoSouth .player-details`. Cea de la
   linia 25293 e cea pe care o copiază mobilul: două straturi, bordură de 2px.
   Cea de la 25561, din pasul final, o suprascrie și adaugă un al treilea strat
   în bordură: `repeating-linear-gradient(88deg, …)` — fibră de lemn peste
   degradeul auriu, exact ca pe capsulele oponenților și pe apron. Plus bordură
   de 5.6px în loc de 2 și un inel exterior `0 0 0 1px #2a1708`.

   Mobilul a copiat regula veche. De-aia crestul de jos arată ca o ramă aurie
   netedă, în timp ce tot restul mesei are fibră. Bordura o dăm în cqh
   (5.6px la un crest de ~76px pe desktop ≈ 7.4%; la 16cqh aici ≈ 1.2cqh),
   ca să nu mănânce jumătate din pastilă pe S9+. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #infoSouth .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    background:
        linear-gradient(135deg, rgba(26,17,9,.97), rgba(12,8,4,.98)) padding-box,
        repeating-linear-gradient(88deg, rgba(38,22,8,.42) 0 1px, rgba(0,0,0,0) 1px 4px) border-box,
        linear-gradient(160deg, #e2b87c 0%, #b07838 28%, #7a4a1e 58%, #4a2c12 100%) border-box !important;
    border: 1.2cqh solid transparent !important;
    box-shadow:
        0 9px 22px rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(0,0,0,.42),
        0 0 0 1px #2a1708 !important;
    /* Forma: desktop `32px 16px 16px 32px` la o placă de 66px = 48%/24%.
       La un rând de 16cqh, 8cqh/4cqh dau 50%/25% — capătul din stânga rotund,
       sub avatar, cel din dreapta doar teșit. */
    border-radius: 8cqh 4cqh 4cqh 8cqh !important;
}


/* ═══ 28. DOCK-UL — COLOANĂ, NU BLOC ════════════════════════════════════════
   Mobilul îi dă `display: block` (`septica-mobile.css:328`), desktopul îl are
   `display: flex; flex-direction: column; align-items: stretch; gap: 4px`
   (`septica-pro.css:25322`).

   Consecință tăcută: `gap` NU face nimic pe un element `block`. Deci
   `gap: 0.6cqh` din secțiunea 5, pe care l-ai reglat ca să încapă cele trei
   rânduri, e inert — spațierea vine acum din marginile implicite ale
   copiilor, nu din valoarea ta. Iar `.td-tools`, care e centrat prin
   `align-items` pe desktop, se întinde pe toată lățimea.

   Îl punem înapoi pe coloană flex. Secțiunea 5 începe să funcționeze cum ai
   scris-o. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
}


/* ═══ 29. CĂRȚILE JUCABILE — CONTURUL VERDE ═════════════════════════════════
   Desktop (`septica-pro.css:25400`): `border: 1.6px solid rgba(16,185,129,.7)`
   plus halou verde pe trei straturi.
   Mobil (linia 380): păstrează haloul verde, dar lasă bordura AURIE de la
   `.card.tbf` (`0.8px solid #c9a961`).

   Rezultat în peisaj: cartea jucabilă are halou verde și contur auriu. Pe
   desktop conturul e verde și mai gros, deci se citește dintr-o privire care
   sunt cărțile pe care poți da. Al treilea strat de umbră
   (`0 4px 12px rgba(0,0,0,.3)`) lipsește și el. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card.playable {
    border: 1.6px solid rgba(16, 185, 129, .7) !important;
    box-shadow:
        0 0 12px rgba(16, 185, 129, .5),
        0 0 0 2px rgba(16, 185, 129, .4),
        0 4px 12px rgba(0, 0, 0, .3) !important;
}


/* ═══ 30. NUMELE MEU DIN CREST ══════════════════════════════════════════════
   `#nameSouth` pe desktop (`septica-pro.css:25557`): `letter-spacing: 1px`,
   `text-transform: uppercase`. Mobilul îl leagă de `--ui`
   (`calc(var(--ui) * 0.15)`), care în peisaj dă 0.7px — și, mai important,
   scapă `text-transform`, deci numele apare cum l-a scris userul, nu cu
   majuscule ca pe desktop. Foița aurie e aceeași (regulă pe ID, câștigă). */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #nameSouth {
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}


/* ═══ 31. CAPSULA DE LEMN N-A EXISTAT NICIODATĂ ═════════════════════════════
   Se vede în captură: oponenții stau pe fundalul întunecat, fără nicio ramă.
   Cauza nu e o valoare greșită, e SPECIFICITATEA.

     secțiunea 2b : `.game-play-container:is(…) .seat-north`
                    → 3 clase, (0,3,0)
     mobile:173   : `.game-play-container:is(…) .player-seat.seat-north`
                    → 4 clase, (0,4,0)   `background:none; border:none;
                                          box-shadow:none; border-radius:0`

   Mobilul e mai specific, deci câștigă indiferent că fișierul nostru se încarcă
   după. Toate cele cinci declarații din 2b — fundal, bordură, umbre, rază,
   padding — au fost inerte de la bun început. Am scris secțiunile 9-30 crezând
   că 2b desenează ceva.

   Mai rău: secțiunea 14 a golit `.player-details`, adică singura ramă care
   chiar se desena (cea a mobilului). Deci 14 a lăsat oponenții complet goi.
   Nu retrag 14 — e corectă în raport cu desktopul, care ține decorul pe scaun,
   nu pe placa interioară. Repar cauza: rescriu capsula la aceeași specificitate
   ca mobilul. La egalitate, ordinea de încărcare decide, iar noi suntem ultimii.

   `.player-seat:is(.seat-north, .seat-west, .seat-east)` = tot (0,4,0).
   Secțiunea 15 (rândul activ) e (0,5,0), deci rămâne deasupra. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) {
    padding: 0.3cqh 0.8cqw 0.3cqh 0.3cqh !important;
    border-radius: 999px 8px 8px 999px !important;
    border: 1.2px solid rgba(228, 184, 96, .5) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 25%) padding-box,
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, rgba(0, 0, 0, 0) 1px 4px) padding-box,
        repeating-linear-gradient(90deg, rgba(52, 27, 8, .4) 0 2px, rgba(0, 0, 0, 0) 2px 5px, rgba(255, 224, 176, .10) 26px 28px, rgba(0, 0, 0, 0) 28px 56px) padding-box,
        linear-gradient(180deg, #6c4019 0%, #8c5a2a 30%, #6c4019 100%) padding-box !important;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .5),
        inset 0 1px 2px rgba(255, 225, 180, .35),
        inset 0 -3px 7px rgba(0, 0, 0, .5),
        inset 0 0 0 1.5px rgba(233, 196, 90, .28),
        0 0 0 1px #2a1708 !important;
}


/* ═══ 32. DE CE ZBOARĂ CĂRȚILE OPONENȚILOR ÎN DREAPTA ═══════════════════════
   În captură, spatele cărților fiecărui oponent stă la ~350px distanță de
   numele lui, lipit de marginea din dreapta a locului. Nu e din secțiunea 20.

   `.player-info` e fratele lui `.player-hand` în interiorul scaunului. Mobilul
   (linia 208) îi dă `flex: 1 1 auto; width: 100%`, deci se întinde pe tot
   locul și împinge cărțile la capăt. Desktopul face exact invers
   (`septica-pro.css:25510`): `width: auto; flex: 0 0 auto`, cu comentariul
   „numele oponenți: NU se mai colapsează la 0".

   Cele două reguli au aceeași specificitate (0,4,0), iar septica-pro.css se
   încarcă ÎNAINTEA mobilului — deci mobilul câștigă la egalitate. Noi suntem
   ultimii, deci reafirmarea desktopului ține.

   Adaug și `width: fit-content` pe scaun: cu `.player-info` strâns, locul nu
   mai are motiv să fie lat, iar capsula din 31 se strânge pe conținut, ca pe
   desktop. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-info {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) {
    width: fit-content !important;
    /* 31cqw, nu mai mult: mobilul așază locurile la 1.5% / 34.5% / 67.5%
       (septica-mobile.css:204), adică la 33% distanță unul de altul. Un plafon
       de 46cqw, cât pusesem prima dată, lăsa capsulele să se suprapună când un
       bot are nume lung. Desktopul are 320px la o masă de ~1400px = 23%; 31%
       e mai lejer, dar sub pragul de coliziune. */
    max-width: 31cqw !important;
}


/* ═══ 33. ROTUNJIREA CĂRȚILOR (secțiunea 4 era inertă) ══════════════════════
   Secțiunea 4 pune `border-radius: 10%` pe `#handSouth .card` și
   `#tableCards .card` — (1,3,0). Mobilul (linia 368) îl pune pe
   `#handSouth .card.tbf` — (1,4,0), cu `7% / 5%`.

   Toate cărțile de joc au clasa `.tbf` (fața stilizată Tabinet, adăugată din
   septica-pro.js), deci regula mobilului prinde pe fiecare și e mai specifică.
   Colțurile au rămas la 7%/5%, aproape drepte — se vede în captură.

   Punem aceeași valoare pe selectorul cu `.tbf`. Desktopul are 10px la o carte
   de 85px, adică ~12%; 10% e ce ai ales tu la secțiunea 4, îl păstrez. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card.tbf,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards .card.tbf {
    border-radius: 10% !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card.tbf::after,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards .card.tbf::after {
    border-radius: 7% !important;
}


/* ═══ 34. SUBTITLUL DIN HEADER ══════════════════════════════════════════════
   În captura de desktop, sub „Septica" scrie „ȘEPTICĂ ROMÂNEASCĂ". În peisaj
   nu apare. Nu e o scăpare de scalare, e o ștergere explicită:

     septica-pro.css:25363  `.top-bar .brand-title::after { content: 'ŞEPTICĂ
                             ROMÂNEASCĂ'; … }`, ascuns doar sub 576px (25368)
     septica-mobile.css:441 `.top-bar .brand-title::after { display: none }`

   În peisaj lățimea e ~915px, mult peste pragul de 576px, deci pe logica
   desktopului subtitlul ar trebui să se vadă. Mobilul îl scoate pentru portret,
   unde headerul are 48px și două rânduri nu încap.

   ATENȚIE, ăsta e singurul loc din tot fișierul care poate CREȘTE headerul:
   8px text plus 1px margine, deci ~9px în plus. Formula ta de scenă din
   secțiunea 1 (`100vh - 13vh - 22px`) nu scade headerul, deci cei 9px se duc
   direct în jos, peste bara de navigare. În captura ta era loc, dar pe un ecran
   de 320px înălțime s-ar putea să nu fie.

   Dacă masa începe să fie tăiată jos, ȘTERGE secțiunea asta prima. */

.top-bar .brand-title::after {
    display: block !important;
}


/* ═══ 35. TEANCUL DE CĂRȚI E TĂIAT DE RAMĂ ══════════════════════════════════
   Se vede în ambele capturi, una lângă alta:

     desktop : teancul e întreg, în dreapta feltului, cu „16" dedesubt
     peisaj  : din el se vede o fâșie aurie de câțiva pixeli, restul e sub lemn

   Secțiunea 3d l-a mutat din colț pe centrul vertical, corect — dar l-a lăsat
   la `right: 5cqh`, adică ~17px de la marginea feltului. Pe desktop distanța e
   ~55px la un felt de ~1380px lățime, adică 4%.

   Diferența e că `5cqh` se leagă de ÎNĂLȚIMEA containerului, iar tăierea vine
   din curbura pe LĂȚIME: feltul are `border-radius: 999px` (secțiunea 3b), deci
   capătul din dreapta e un semicerc, iar `.tb-rail-live` are `overflow: hidden`.
   O cotă legată de înălțime nu poate compensa o curbură care depinde de lățime.

   Trecem pe procent din lățimea feltului, exact raportul de pe desktop. */

.table-deck {
    right: 4% !important;
}


/* ═══ 36. OPONENȚI — CHIPURILE LIPSĂ (balanță și puncte) ════════════════════
   Desktop, pe fiecare oponent: pastilă aurie cu balanța („24651"), apoi
   cărțile („3"), apoi punctele („0") — trei chipuri.
   Peisaj, în captură: unul singur, cel cu cărțile.

   Secțiunea 19 deblochează doar `nth-child(2)`, fiindcă doar pe acela îl
   ascunde mobilul explicit. Nu e destul — lipsesc două, deci al treilea cade
   din altceva. Cel mai probabil e tăiat, nu ascuns: pe desktop
   `septica-pro.css:25516` pune anume `overflow: visible` pe `.player-details`
   la oponenți, cu comentariul „numele oponenți: NU se mai colapsează la 0".
   Regula aia pierde la egalitate în fața mobilului (pro se încarcă primul).

   Deci facem două lucruri deodată, fiindcă din CSS nu se poate spune care e
   cauza: deblocăm TOATE chipurile, nu doar al doilea, și redăm `overflow:
   visible` pe tot lanțul. Dacă vinovat era doar unul, celălalt e inofensiv. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-meta .meta-item {
    display: flex !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-meta {
    overflow: visible !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}


/* ═══ 37. POTUL ȘI TEANCUL SE BAT PE ACELAȘI COLȚ ═══════════════════════════
   În captură, pastila „0 cards +0" se întinde peste teancul de cărți, care
   oricum era pe jumătate sub ramă. Pe desktop problema nu există, fiindcă
   acolo potul stă centrat SUB cărțile jucate (`septica-pro.css:25330`:
   `bottom: 22px; left: 50%`), iar teancul are colțul din dreapta liber.

   În peisaj masa are ~110px înălțime utilă. Cărțile jucate ocupă ~66px pe
   centru, deci sub ele nu mai rămân 22px — de-aia secțiunea 3f a mutat potul
   lateral, cu măsurători. Corect, dar l-a mutat exact peste teanc.

   Aici desktopul nu are ce să ne spună: e o constrângere care apare doar când
   masa e scundă. Trei ajustări, toate verificabile pe telefon:

   a) potul e prea mare. Are `padding: 2px 14px` și pictogramă de 15px, cote de
      desktop, pe o masă de o treime din înălțime. Trec pe cqh.
   b) potul se mută la 16% din lățimea feltului, teancul rămâne la 5%. Cu
      potul micșorat, cele două nu se mai ating.
   c) teancul la 5%, nu 4%: la 4% (secțiunea 35) tot era prins de curbura
      capătului. Semicercul mănâncă mai mult decât părea.

   Dacă potul iese prea mic de citit, urcă `font-size`-ul de la (a); dacă
   teancul tot e tăiat, urcă procentul de la (c) spre 8%. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt > .table-info {
    right: 16% !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tablePot {
    padding: 0.6cqh 1.6cqw !important;
    gap: 0.4cqw !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tablePot .material-symbols-rounded {
    font-size: 3.4cqh !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tablePot .pot-value,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tablePot > span {
    font-size: 3.2cqh !important;
}

.table-deck {
    right: 5% !important;
}


/* ═══ 38. FAȚA CĂRȚILOR — SIMBOLUL ȘI INDICII DIN COLȚ ══════════════════════
   Pune capturile una lângă alta și uită-te DOAR la cărți. Pe desktop citești
   „10♦" din colț și vezi un romb mare în mijloc. În peisaj cărțile sunt aproape
   albe, cu niște puncte pe ele — nu se distinge valoarea.

   Aceeași cauză ca la secțiunile 9-13, ultimul loc unde mai era ascunsă:

     septica-mobile.css:302  `#handSouth  .tbc-center` : `calc(var(--u) * 8)`
     septica-mobile.css:304  `#handSouth  .tbc-tl/-br` : `calc(var(--u) * 3.4)`
     septica-mobile.css:152  `#tableCards .tbc-center` : `calc(var(--u) * 5.2)`
     septica-mobile.css:154  `#tableCards .tbc-tl/-br` : `calc(var(--u) * 2.2)`

   Cu `--u` pe podeaua de 1px: simbol de 8px și indici de 3.4px pe o carte de
   ~40px. Iar `top/left` sunt `calc(var(--u) * 0.4)`, adică indicii stau lipiți
   de muchie, nu în colț.

   Raporturile de pe desktop (`septica-pro.css:25406`), la o carte de 85px:
     simbol central 46px = 54% din lățime
     indici          13px = 15%
     retragere colț   5px = 6%

   Cartea din peisaj e `min(12cqh, 11vh)` (secțiunea 4), deci aplicăm aceleași
   procente pe 12cqh: 6.5cqh, 1.85cqh, 0.72cqh.

   Mobilul făcea cărțile de pe masă mai mici decât cele din mână (5.2 față de
   8). Desktopul le are la fel, iar secțiunea 4 le-a dat deja aceeași lățime —
   deci le aliniez, nu duc mai departe diferența. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card.tbf .tbc-center,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards .card.tbf .tbc-center {
    font-size: 6.5cqh !important;
    line-height: 1 !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card.tbf .tbc-tl,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card.tbf .tbc-br,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards .card.tbf .tbc-tl,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards .card.tbf .tbc-br {
    font-size: 1.85cqh !important;
    top: 0.72cqh !important;
    left: 0.72cqh !important;
    bottom: 0.72cqh !important;
    right: 0.72cqh !important;
}


/* ═══ 39. MONOGRAMA ♠ DE PE SPATELE CĂRȚILOR ════════════════════════════════
   Ultima declarație legată de `--u` din tot fișierul mobilului, găsită prin
   măturare, nu cu ochiul — fiindcă nu se vede: e de 1.5px.

     septica-mobile.css:426  `.seat-* .player-hand .card-back::before`
                             `content: '♠'; font-size: calc(var(--u) * 1.5)`

   Mobilul pune o monogramă de pică în mijlocul spatelui. Desktopul are altceva
   pe `::before` (`septica-pro.css:6466`): o ramă interioară la 4px cu un halou
   auriu, nu o literă.

   Secțiunea 26 a adus înapoi spatele de LEMN al desktopului și a stins
   `::after` ca să nu se dubleze hașura. `::before` a rămas cu pica de 1.5px —
   invizibilă, dar tot un element peste desen.

   Nu port rama desktopului: la oponenți cartea are 3.4cqh, adică ~11px, iar o
   retragere de 4px pe 11px ar acoperi mai mult de jumătate. Nici desktopul nu
   câștigă mare lucru din ea la 24px. Stingem, ca la `::after` — rămâne lemnul
   curat, care e tot ce se poate citi la mărimea asta. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-north .player-hand .card-back::before,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-west .player-hand .card-back::before,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-east .player-hand .card-back::before {
    display: none !important;
}


/* ═══ 40. MESAJUL DIN DOCK E TĂIAT LA O CINCIME ═════════════════════════════
   În captură dock-ul scrie „cindy ia 4 c…" — trunchiat, deși în dreapta lui
   sunt vreo 300px goi. Dock-ul e larg, mesajul nu.

     septica-mobile.css:334  `#tb-dock-live2 .td-name { max-width: 20% }`
     septica-pro.css:25327   `#tb-dock-live2 .td-name { max-width: 110px }`

   Pe desktop dock-ul are 190px ficși, deci 110px înseamnă 58% din el. Mobilul
   pune 20%, cifră gândită pentru dock-ul îngust din portret. În peisaj grila e
   `"crest dock"` la 50/50, deci dock-ul are ~420px — iar 20% din el sunt 84px,
   adică taie mesajul de trei ori mai devreme decât desktopul, proporțional.

   Trec pe procentul desktopului. Nu ating lățimea dock-ului: aia e grila
   mobilului, discutată la runda trecută. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-name {
    max-width: 58% !important;
}


/* ═══ 41. PASTILA „CAPTURĂ / PUNE" DIN CREST ════════════════════════════════
   Se vede în captură peste chipul de balanță: „CAPTURĂ +4" scris peste
   „19264", ambele înghesuite, niciunul lizibil.

   Nu e o suprapunere greșită — e efectul de flip din design
   (`septica-pro.css:25667`), pastila se întoarce și arată mesajul în locul
   sumei. Problema e mărimea: `.tb-pill-t` are `calc(var(--ui) * 3)`
   (septica-mobile.css:581) = 13.8px, iar valoarea pe care o înlocuiește are
   `calc(var(--ui) * 2.5)` = 11.5px. Mesajul e mai MARE decât textul în locul
   căruia intră, într-un chip de ~25px înălțime care mai ține și eticheta
   „BALANȚĂ" dedesubt.

   Pe desktop raportul e invers: pastila 13px, valoarea 19px — mesajul e mai
   mic decât suma. Îl aduc sub valoare, ca acolo.

   Doar în crestul de jos. La oponenți chipul are 13.3px, deci cei 13.8 ai
   mobilului se potrivesc — acolo nu ating nimic. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .tb-pill-t {
    font-size: 2.8cqh !important;
}


/* ═══ 42. BULA DE CHAT A BOȚILOR ════════════════════════════════════════════
   Punctul 2 din lista ta „CE NU E REZOLVAT". În captură bula lui
   `sbot_lavinia54` („Bravo ție!") acoperă capătul de sus al mesei și o parte
   din emblemă.

   Nu se poate rezolva complet din CSS: `.seat-bubble` e `position: fixed`
   într-un portal pe `<body>`, iar poziția o calculează JS-ul cu
   `getBoundingClientRect()` (`septica-pro.css:7526`). Ca să nu mai intre peste
   masă ar trebui schimbat calculul, nu foaia de stil.

   Ce se poate face din CSS e să acopere mai puțin. Cotele ei sunt `clamp()`
   legate de `vw`, deci nu se prăbușesc ca `--u` — dar sunt calibrate pentru un
   ecran înalt: pe 446px înălțime bula iese cât o zecime din ecran. O aduc la
   dimensiunea minimă a propriului `clamp`, plus o umbră mai discretă.

   Nu e reparația problemei, e reducerea ei. Dacă vrei rezolvarea adevărată,
   locul e în TIP-SYSTEM din septica-pro.js, nu aici. */

.seat-bubble {
    max-width: min(30cqw, 150px) !important;
    padding: 0.7cqh 1.2cqw !important;
    font-size: 2.6cqh !important;
    line-height: 1.25 !important;
    border-radius: 1.8cqh !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
}


/* ═══ 43. AVATARELE NU UMPLU INELUL ═════════════════════════════════════════
   Se vede în captură pe toate patru: cercul auriu e mai mare decât poza din el,
   iar la crestul de jos imaginea iese peste margine în loc să fie tăiată rotund.

   Cauza e o nepotrivire între două reguli care cred fiecare că dimensionează
   avatarul, dar nu ating același element:

     `.player-avatar` / `#avatarSouth` sunt ÎNVELIȘUL — cercul cu inel auriu,
        `border-radius: 50%` și `overflow: hidden` (septica-pro.css:6210, 25295).
        Mobilul îi dă `calc(var(--ui) * 8)` = ~37px la oponenți și `* 8.5` = ~39px
        la sud.
     `img` din el e POZA. Secțiunea 2 o pune la `7cqh` (~23px), iar secțiunea 5
        pe cea de jos la `9cqh` (~30px).

   Deci învelișul rămâne la cota mobilului și poza se strânge înăuntru: inel de
   37px în jurul unei poze de 23px, cu 7px de gol jur împrejur. Selectorul tău
   `… .player-seat:is(…) img` are 4 clase plus un element; al mobilului,
   `… .seat-north .player-avatar`, are tot 4 clase — deci fiecare câștigă pe
   proprietatea lui și nu se corectează una pe alta.

   Desktopul face invers, și e modelul corect (`septica-pro.css:25525`):
   ÎNVELIȘUL ia dimensiunea, poza umple 100% din el cu `object-fit: cover`.
   Aici: învelișul primește 7cqh (respectiv 9cqh, cotele tale), poza umple tot.

   Secțiunea 21 rămâne validă — bulina de status e calculată tot pe 7cqh. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-avatar {
    width: 7cqh !important;
    height: 7cqh !important;
    min-width: 7cqh !important;
    min-height: 7cqh !important;
    max-height: 7cqh !important;
    flex: 0 0 7cqh !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    position: relative !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-avatar img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 !important;
    position: static !important;
    flex: 1 1 auto !important;
}

/* Crestul de jos: același model, cu cota din secțiunea 5. Aici imaginea chiar
   IEȘEA din cerc, nu doar lăsa gol — lipsea `object-fit`, deci o poză
   dreptunghiulară se întindea peste marginea rotunjită. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #avatarSouth,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #avatarSouth {
    width: 9cqh !important;
    height: 9cqh !important;
    min-width: 9cqh !important;
    max-height: 9cqh !important;
    flex: 0 0 9cqh !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    position: relative !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #avatarSouth img,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 !important;
    position: static !important;
}

/* Cronometrul „apă" stă PESTE avatar cu `inset: 0`. Cu învelișul acum tăiat
   rotund și cu `overflow:hidden`, inelul lui trebuie să rămână în cerc —
   altfel colțurile SVG-ului se taie drept. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tab-water-timer,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tab-water-bg,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tab-water-arc {
    border-radius: 50% !important;
}


/* ═══ 44. UN SINGUR RÂND JOS: CREST · MÂNA · DOCK ═══════════════════════════
   Ideea ta, și e prima schimbare din fișier care nu e cosmetică — recuperează
   spațiu.

   Desktopul ține crestul, mâna și dock-ul pe UN rând (`septica-pro.css:25311`:
   `.seat-south { flex-direction: row }`, cu dock-ul absolut la dreapta și
   `padding-right: 200px` care îi rezervă locul). Grila mobilului le pune pe
   două: `"hand hand" / "crest dock"`. Corect în portret, unde nu e lățime. În
   peisaj lățime e destulă, iar rândul în plus se plătește din înălțimea mesei.

   BUGETUL, în cqh (unitățile secțiunii 3):

     acum, două rânduri          un rând
       mâna        16.8            rând   16.8   = max(carte, crest)
       gap          2.0            margin  5.0
       crest/dock  16.0            ─────────────
       margin       5.0            TOTAL  21.8
       ───────────
       TOTAL       39.8   ← de-aia masa are `bottom: 40cqh` la secțiunea 3

   Deci masa poate coborî la `bottom: 23cqh` și câștigă 17cqh de înălțime:

     iPhone 15  (915×412)   masă 157px → 215px   (+57)
     Galaxy S9+ (654×315)   masă 118px → 161px   (+43)
     iPhone SE  (568×320)   masă 120px → 163px   (+43)

   LĂȚIMEA, verificată la 6 cărți în mână (cazul cel mai lat):
     iPhone 15   crest 164 + mână 262 + dock 274 = 737px din 915  ✓
     Galaxy S9+  crest 123 + mână 196 + dock 196 = 542px din 654  ✓
     iPhone SE   crest 125 + mână 199 + dock 170 = 517px din 568  ✓  (91%, cel mai strâns)

   Fiindcă SE-ul e la 91%, cărțile primesc `flex: 0 1 auto` cu `min-width: 0` —
   dacă apar 8 cărți, se strâng proporțional în loc să împingă dock-ul afară.
   `aspect-ratio` le păstrează forma la strângere.

   REVERT: șterge secțiunea. Grila din secțiunea 3c și `bottom: 40cqh` din
   secțiunea 3 redevin active, fără altă atingere. Ăsta e și motivul pentru care
   `bottom`-ul e rescris AICI, nu modificat acolo.

   DE VERIFICAT PE TELEFON, în ordinea asta:
     1. marja dintre masă și rândul de jos. `23cqh` lasă ~1cqh peste calcul.
        Dacă se ating, urcă la 25cqh — pierzi 2cqh de masă, nu mai mult.
     2. la 8 cărți în mână, pe cel mai mic ecran: dacă dock-ul e împins,
        coboară `min-width`-ul lui de mai jos de la 26cqw.
     3. apronul (secțiunea 16) e acum o singură bandă, ca pe desktop. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-south {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "crest hand dock" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 2cqw !important;
    row-gap: 0 !important;
}

/* Crestul: cât conținutul, lipit la stânga. Mobilul îl întindea pe toată
   coloana (`width: 100%`), ceea ce la 50/50 era logic; acum ar mânca mâna. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
    grid-area: crest !important;
    width: auto !important;
    justify-self: start !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    flex: 0 0 auto !important;
}

/* Mâna: la mijloc, cu voie să se strângă. `min-width: 0` e obligatoriu —
   fără el coloana `1fr` nu coboară sub lățimea conținutului și dock-ul iese. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth {
    grid-area: hand !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

/* Dock-ul: la dreapta, cât îi trebuie. Desktopul îi dă 190px ficși; aici merge
   în cqw ca să scadă odată cu ecranul. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    grid-area: dock !important;
    width: auto !important;
    min-width: 26cqw !important;
    max-width: 32cqw !important;
    justify-self: end !important;
}

/* Masa coboară cu 17cqh. Vezi bugetul de sus. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-area {
    bottom: 23cqh !important;
}


/* ═══ 45. EMBLEMA ÎN MIJLOCUL MESEI ═════════════════════════════════════════
   Desktopul o are centrată: `.tb-emblem-live { top: 50%; left: 50%;
   transform: translate(-50%, -50%) }` (septica-pro.css:25196). Mobilul o urcă
   la `top: 13%` (linia 140) — în portret masa e înaltă și îngustă, iar centrul
   e ocupat de cărțile jucate, deci emblema fuge în sus.

   Secțiunea 13 a păstrat `13%`, cu motivul scris: „în peisaj masa e scundă și
   centrul e ocupat de cărțile jucate". Motivul a expirat la secțiunea 44 —
   masa are acum 215px în loc de 157px, iar cărțile jucate ocupă tot ~60px pe
   centru. Emblema stă în spatele lor, exact ca pe desktop, unde e la fel de
   acoperită și nimeni nu se plânge: e filigran, nu informație.

   `transform` nu trebuie rescris: mobilul n-a atins decât `top`. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-emblem-live {
    top: 50% !important;
}

/* Cercul din spate era calibrat pentru o masă de 157px. La 175px de felt,
   `min(38cqh, 120px)` iese 69% din înălțime; pe desktop e 61%. Îl aduc acolo. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-emblem-live::before {
    width: min(34cqh, 110px) !important;
}


/* ═══ 46. POTUL ÎNAPOI UNDE ÎL ARE DESKTOPUL ════════════════════════════════
   A doua consecință a secțiunii 44.

   Desktopul pune potul centrat SUB cărțile jucate: `.table-info { bottom: 22px;
   left: 50%; transform: translateX(-50%) }` (septica-pro.css:25330). Secțiunea
   3f l-a mutat lateral, cu măsurători, fiindcă la o masă de 157px nu mai
   rămâneau cei 22px sub cărți — se suprapunea peste cartea jucată. Secțiunea 37
   l-a micșorat și l-a dus la 16%, ca să nu mai acopere teancul.

   Amândouă erau reparații ale aceleiași strâmtori, care nu mai există:

     felt acum ≈ 175px (masă 215 − 2×20 padding ramă)
     cărțile jucate: ~60px pe centru → ocupă de la 57 la 117
     sub ele rămân 58px; desktopul cere 9% din înălțimea feltului = 16px

   Deci încape, cu 42px de rezervă. Îl duc la poziția de pe desktop, exprimată
   în procent din felt, nu în px — ca să țină și pe S9+, unde feltul are 121px.

   Micșorarea de la 37 RĂMÂNE: cotele desktopului erau pentru un felt de 245px.

   REVERT: șterge secțiunea. 3f și 37 redevin active și potul se întoarce în
   dreapta. Dacă pe un ecran foarte scund (SE, felt ~123px) potul atinge
   cărțile, ăsta e primul lucru de scos. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt > .table-info {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 9% !important;
    transform: translateX(-50%) !important;
}


/* ═══ 47. AVATARUL DIN CREST — PROPORȚIA DE PE DESKTOP ══════════════════════
   Pune capturile una lângă alta la crestul de jos. Pe desktop avatarul e
   piesa dominantă: 60px într-un crest de 66px, adică 91% din înălțimea
   rândului, ieșit peste marginea din stânga a plăcii. În peisaj are 9cqh
   (~30px) într-un rând de 16cqh (~53px) — 57%. Arată ca o iconiță lipită
   lângă text, nu ca un portret.

   Cei 9cqh vin din secțiunea 5, unde rândul avea altă compoziție: acolo
   crestul împărțea o coloană de 50% cu dock-ul și mai era și mâna deasupra.
   După secțiunea 44 crestul are lățime proprie și nu mai concurează cu nimic.

   13.5cqh = 84% din rând, plus padding-ul de 0.8cqh încape în cele 16cqh.
   Nu urc până la 91%: acolo n-ar mai rămâne loc pentru inelul dublu (2+2px)
   din secțiunea 24, care pe desktop stă în afara celor 60px. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #avatarSouth,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #avatarSouth {
    width: 13.5cqh !important;
    height: 13.5cqh !important;
    min-width: 13.5cqh !important;
    max-height: 13.5cqh !important;
    flex: 0 0 13.5cqh !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth img {
    width: 13.5cqh !important;
    height: 13.5cqh !important;
}


/* ═══ 48. CRESTUL DE JOS — PROPORȚIILE INTERIOARE ═══════════════════════════
   Diferență rulată doar pe lanțul de sud (`#infoSouth`, `.player-details`,
   `.meta-item`, `#nameSouth`). Patru lucruri, toate raportate la înălțimea
   rândului: pe desktop crestul are 66px, aici are 16cqh.

   a) CHIPURILE NU SUNT EGALE. Desktopul le dă `min-width: 56px`
      (`septica-pro.css:25299`), adică 85% din înălțimea rândului — cele trei
      pastile ies coloane de aceeași lățime, aliniate. Mobilul pune `0`, deci
      fiecare se strânge pe conținut: „CĂRȚI" iese îngustă, „BALANȚĂ" lată.
      Se vede în captură.

   b) CHIPURILE SUNT ÎNGHESUITE. Desktop `padding: 3px 11px` = 4.5% / 17% din
      rând. Mobil: `calc(var(--ui) * 0.3) calc(var(--ui) * 0.6)` = 1.4px / 2.8px,
      adică de patru ori mai puțin pe orizontală.

   c) DECALAJUL AVATARULUI NU MAI E POTRIVIT — asta e vina secțiunii 47.
      `.player-details` intră sub avatar cu `margin-left` negativ și îl
      compensează cu `padding-left`. Perechea e calibrată pe MĂRIMEA
      AVATARULUI: desktop −32px și 41px la un avatar de 60px, adică −53% și
      +68% din el. Mobilul o are pe `--ui`: −18px și 23px, calibrate pentru
      avatarul lui de 39px. Secțiunea 47 a dus avatarul la 13.5cqh (~45px) fără
      să atingă perechea — deci acum iese mai în stânga decât îl acoperă placa.
      O leg de aceeași cotă: −53% și +68% din 13.5cqh.

   d) NUMELE ȘI SUMA. `#nameSouth` are 12.5px pe desktop (19% din rând) și
      10.6px aici (20%) — proporția e bună, dar cu chipurile lărgite la (a) mai
      e loc, așa că îl duc la valoarea desktopului. Suma din chipuri: desktop
      17px, iar balanța 19px, adică ea e cea mai mare cifră din crest. Mobilul
      le are la 11.5 și 12.9px. Le pun pe procentele desktopului.

   Eticheta „CĂRȚI/PUNCTE/BALANȚĂ" NU se atinge: secțiunea 5b o ține la 7px
   fix, exact cât are desktopul. */

/* (a) + (b) — chipuri egale și aerisite */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #infoSouth .meta-item,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item {
    min-width: 13.6cqh !important;
    padding: 0.73cqh 2.7cqh !important;
    gap: 0.25cqh !important;
}

/* (c) — decalajul avatarului, legat de cota din secțiunea 47 */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #infoSouth .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    margin-left: -7.2cqh !important;   /* −53% din avatarul de 13.5cqh */
    padding: 1.45cqh 3.9cqh 1.45cqh 9.2cqh !important;  /* stânga = +68% din el */
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
    gap: 2.4cqh !important;   /* desktop 10px la un rând de 66px */
}

/* (d) — nume și cifre */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #nameSouth {
    font-size: 3cqh !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item > span:not(.material-symbols-rounded) {
    font-size: 4.1cqh !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item.meta-balance > span:not(.material-symbols-rounded) {
    font-size: 4.6cqh !important;
}


/* ═══ 49. FAB-UL „PROFIL" DIN FOOTER ════════════════════════════════════════
   Cotele lui vin din `@media (max-height: 500px) and (orientation: landscape)`
   din septica-pro.css (linia 20878): `width/height: 46px; translateY(-6px)`,
   valori fixe care nu știu nimic despre bara în care stau.

   Secțiunea 6 a legat bara de ecran: `height: 13vh; max-height: 56px`. Deci pe
   un telefon de 412px bara are 53.5px și FAB-ul 46px — 86% din ea. Pe desktop
   raportul e 56 la 76, adică 74%; raportat la ecran, 7.2% acolo față de 11%
   aici. De-aia pare umflat și iese peste apron.

   Îl leg de aceleași `vh` ca bara, cu raporturile desktopului:

     FAB      74% din bară      → min(9.6vh, 41px)
     ridicare 21% din FAB       → translateY(-21%), procent din propria
                                  înălțime, deci se reglează singur
     avatar   57% din FAB       → min(5.5vh, 23px)
     iconiță  46% din FAB       → min(4.4vh, 19px)
     etichetă 16% din FAB       → min(2vh, 9px)

   `translateY` în procente e cheia: `-6px` fix era greșit la orice altă
   mărime, iar `-21%` rămâne corect oricât se schimbă FAB-ul. */

body.game-active:not(.room-waiting) .nav-bar-fab {
    width: min(9.6vh, 41px) !important;
    height: min(9.6vh, 41px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    transform: translateY(-21%) !important;
}

body.game-active:not(.room-waiting) .nav-bar-fab:hover,
body.game-active:not(.room-waiting) .nav-bar-fab:active {
    transform: translateY(-21%) !important;   /* fără salt la atingere: pe touch
                                                 hover rămâne lipit după tap */
}

body.game-active:not(.room-waiting) .nav-fab-avatar {
    width: min(5.5vh, 23px) !important;
    height: min(5.5vh, 23px) !important;
}

body.game-active:not(.room-waiting) .nav-bar-fab .material-symbols-rounded {
    font-size: min(4.4vh, 19px) !important;
}

body.game-active:not(.room-waiting) .nav-bar-fab .nav-bar-label {
    font-size: min(2vh, 9px) !important;
    line-height: 1 !important;
}


/* ═══ 50. FOOTERUL — VARIANTA DESKTOP, OPȚIONALĂ ════════════════════════════
   Ai cerut „sau fă ceva la footer". Un lucru chiar diferă, dar e decizia ta
   scrisă, așa că îl las comentat, nu îl impun.

   Pe desktop butoanele din footer sunt DOAR TEXT: `septica-pro.css:25632`
   ascunde pictograma și lasă eticheta, cu majuscule și 12px radius — se vede în
   captura ta de desktop, scrie MESE / CHAT / SETĂRI / MENU fără iconițe.
   Secțiunea 6 face exact invers, cu motivul „etichetele nu încap și oricum se
   înțeleg din simbol".

   Motivul ăla merită recântărit: patru etichete la ~11px înseamnă vreo 240px
   din cei 915 ai unui telefon culcat. Încap lejer. Pe Galaxy S9+ (654px) tot
   încap, la 9px.

   Decomentează blocul dacă vrei footerul ca pe desktop. Dacă îl lași comentat,
   rămâne varianta ta cu pictograme — care e mai bună pe ecrane sub ~600px. */

/*
body.game-active:not(.room-waiting) .nav-bar-btn span:not(.material-symbols-rounded) {
    display: inline !important;
}
body.game-active:not(.room-waiting) .nav-bar-btn .material-symbols-rounded {
    display: none !important;
}
body.game-active:not(.room-waiting) .nav-bar-label {
    font-size: min(2.6vh, 12px) !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    font-weight: 700 !important;
}
body.game-active:not(.room-waiting) .nav-bar-btn {
    border-radius: 12px !important;
    border-width: .8px !important;
    padding: 0 3cqw !important;
    color: rgba(213, 219, 232, .6) !important;
}
*/


/* ═══ 51. INSIGNELE OPONENȚILOR STAU PE RAMĂ, NU DEASUPRA EI ════════════════
   Ultimul spațiu risipit, și se vede doar dacă pui capturile una peste alta.

   Pe desktop insignele NU stau deasupra mesei, stau PE ea:
     `.seat-north { top: -6px }` (septica-pro.css:25281), insignă de 58px, iar
     rama de lemn ocupă primii 50px ai mesei. Deci insigna iese 6px deasupra
     mesei și restul de 52px se așază pe lemn. De-aia pe desktop capul mesei
     arată ca o bară continuă, cu jucătorii încastrați în ea.

   În peisaj, secțiunea 3 a pus masa la `top: 13cqh` cu motivul „sub insignele
   adversarilor (9cqh + aer)". Măsurat pe container de 314px:

     insigna : 9px → 37px
     masa    : începe la 41px  → 3px de gol între ele
     lemnul  : 41px → 60px, complet descoperit

   Deci insignele plutesc pe fundalul întunecat, iar sub ele rămâne o dungă de
   lemn goală. Aranjez ca pe desktop: masa urcă la `top: 6cqh` (19px), lemnul
   ocupă 19-38px și insigna (9-37px) se așază exact pe el, ieșind 10px deasupra
   — pe desktop iese 6px, același gest.

   CÂȘTIG: încă 7cqh de masă. Cu secțiunea 44 împreună:
     înălțimea mesei  157px  →  201px  →  223px   (+42% față de început)

   Insignele au `z-index: 25` din septica-pro.css, deci trec peste lemn fără
   altă intervenție. Niturile de sus din secțiunea 9 vor fi parțial acoperite —
   la fel ca pe desktop, unde insignele le ascund.

   REVERT: șterge secțiunea, masa revine la `top: 13cqh` din secțiunea 3. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-area {
    top: 6cqh !important;
}


/* ═══ 52. TOOLTIP-UL DE PE JUCĂTOR (hover / tap pe avatar) ══════════════════
   Panoul „woi" care apare când ții apăsat pe un jucător: avatar, nume, insigne,
   patru statistici, runda, o linie de stare. Apare la toți, inclusiv la tine.

   O SINGURĂ CIFRĂ îl strică, și e o capcană de portret:

     desktop, septica-pro.css:25402  →  `width: 190px`
     mobil,   septica-mobile.css:584 →  `width: 56%`

   Procentul e din LĂȚIMEA ECRANULUI. În portret 56% dintr-un telefon de 412px
   dau 230px — aproape de cei 190 ai desktopului, deci regula e corectă acolo.
   În peisaj ecranul e lat, iar același procent dă:

     iPhone 15 culcat   915px  →  512px   (de 2.7 ori cât trebuie)
     Galaxy S9+ culcat  654px  →  366px
     iPhone SE culcat   568px  →  318px

   Un panou de 512px pe o masă de 915: acoperă mai mult de jumătate din ecran, iar
   grila de statistici pe două coloane se întinde cu găuri în mijloc. Săgeata
   `::before` e fixată la `left: 50%`, deci pe o cutie atât de lată nu mai
   arată spre avatarul de care e agățată.

   A DOUA problemă, mai discretă: TOATE cotele dinăuntru sunt px de desktop,
   netăiate de nimeni. Înălțimea iese ~193px, adică:

     desktop  (776px)  →  24% din ecran
     iPhone 15 (412px) →  46%
     Galaxy S9+ (315px)→  61%     ← acoperă masa aproape complet

   ATENȚIE la unități: tooltip-ul e copil direct al lui `<body>` (comentariul de
   la 25395 explică de ce — masa are context 3D și `overflow:hidden`, orice
   tooltip din interior e tăiat). Deci NU are container ancestor și `cqh`/`cqw`
   nu se rezolvă aici. Singurele unități valide sunt `vw`/`vh`.

   Lățimea o cobor la cea de pe desktop, cu `min()` ca să nu depășească ecranul
   pe telefoanele mici. Cotele interioare le leg de `vh`, plafonate exact la
   valorile desktopului — deci pe un ecran înalt arată identic cu desktopul, iar
   pe unul scund se strânge în loc să acopere masa. */

.tb-opp-tip-fixed {
    width: min(52vw, 190px) !important;
    max-width: min(52vw, 190px) !important;
    padding: min(2.4vh, 10px) min(2.6vh, 11px) !important;
    border-radius: min(3.4vh, 14px) !important;
}

.tb-woi-head {
    gap: min(2.2vh, 9px) !important;
    padding-bottom: min(1.9vh, 8px) !important;
    margin-bottom: min(1.9vh, 8px) !important;
}

.tb-woi-avatar {
    width: min(9.7vh, 40px) !important;
    height: min(9.7vh, 40px) !important;
}

.tb-woi-name {
    font-size: min(3.2vh, 13px) !important;
}

.tb-woi-badge {
    font-size: min(1.9vh, 7.5px) !important;
    padding: min(0.5vh, 2px) min(1.2vh, 5px) !important;
}

.tb-woi-stats {
    gap: min(1.5vh, 6px) !important;
}

.tb-woi-stat {
    padding: min(1.2vh, 5px) min(1vh, 4px) !important;
}

.tb-woi-stat .tb-v {
    font-size: min(3.4vh, 14px) !important;
}

.tb-woi-stat .tb-k,
.tb-woi-round span {
    font-size: min(1.9vh, 7.5px) !important;
}

.tb-woi-round {
    margin-top: min(1.9vh, 8px) !important;
    padding-top: min(1.9vh, 8px) !important;
}

.tb-woi-round b {
    font-size: min(3.2vh, 13px) !important;
}

.tb-woi-status {
    margin-top: min(1.7vh, 7px) !important;
    font-size: min(2.1vh, 8.5px) !important;
}


/* ═══ 53. PANOUL DIN FOOTER (Chat / Mese) ═══════════════════════════════════
   Aceeași capcană ca la tooltip-ul din secțiunea 52, dar pe cinci cote deodată:
   `septica-mobile.css:570-578` măsoară totul în `vw`. În portret `vw` e latura
   MICĂ a ecranului; în peisaj e cea MARE. Toate ies de 2.2 ori prea mari:

     element                     regulă   portret   peisaj   desktop
     .panel-title                4.2vw      17px      38px    15.7px
     .panel-back / .panel-close  9vw        37px      82px    31px
     .panel-header sus/jos       3vw        12px      27px    13px
     .panel-header lateral       4vw        16px      37px    14px
     .panel-content              3vw        12px      27px    13px

   Un buton de închidere de 82px și un titlu de 38px într-un panou care are
   412px pe înălțime: doar antetul mănâncă un sfert din ecran.

   În portret valorile sunt corecte — se potrivesc aproape la pixel cu
   desktopul. Deci nu e o regulă proastă, e o unitate care se întoarce pe dos
   când rotești telefonul. Le leg de `vh` (latura mică în peisaj), plafonate la
   valorile desktopului.

   A DOUA: `padding-bottom: 130px` din `.panel-content` rezervă loc pentru bara
   flotantă, care are z-index 1030 față de 200 al panoului și l-ar acoperi.
   Cifra e din portret, unde bara are ~104px. Secțiunea 6 a dus-o la `13vh` =
   54px, deci 76px stau degeaba — 18% din înălțimea ecranului. Folosesc aceeași
   formulă ca secțiunea 8, ca cele două să nu se mai despartă.

   A TREIA, specifică peisajului: panoul e `inset: 0`, iar antetul lui compensa
   decupajul cu `safe-area-inset-top`. Culcat, decupajul nu mai e sus, e în
   LATERAL — deci titlul poate intra sub camera telefonului. Adaug și inseturile
   stânga/dreapta.

   NU schimb modul de afișare. Pe desktop panoul e un sertar lateral de 320px
   cu colțuri rotunjite la stânga; mobilul îl face ecran întreg, cu motiv scris
   la linia 541 și verificat cu `elementFromPoint`. În peisaj un sertar ar fi
   mai bun — jocul rămâne vizibil — dar depinde de blocul „CONTEXT PANEL ACTIV
   ÎN JOC" din septica-pro.css, care comprimă masa la `50dvh` când panoul e
   deschis. Aia e o schimbare de comportament, nu de stil; spune-mi dacă o vrei
   și o fac separat. */

.context-panel .panel-title {
    font-size: min(3.8vh, 15.7px) !important;
}

.context-panel .panel-back,
.context-panel .panel-close {
    width: min(7.5vh, 31px) !important;
    height: min(7.5vh, 31px) !important;
    min-width: min(7.5vh, 31px) !important;
}

.context-panel .panel-header {
    padding-top: calc(min(3.2vh, 13px) + var(--safe-area-inset-top, 0px)) !important;
    padding-bottom: min(2.7vh, 11px) !important;
    padding-left: calc(min(3.4vh, 14px) + var(--safe-area-inset-left, 0px)) !important;
    padding-right: calc(min(3.4vh, 14px) + var(--safe-area-inset-right, 0px)) !important;
}

.context-panel .panel-content {
    padding-top: min(3.2vh, 13px) !important;
    padding-left: calc(min(2.7vh, 11px) + var(--safe-area-inset-left, 0px)) !important;
    padding-right: calc(min(2.7vh, 11px) + var(--safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(13vh + 24px + var(--safe-area-inset-bottom, 0px)) !important;
}


/* ═══ 54. PANOUL CU CHAT — BLOCUL CARE EXISTĂ DAR NU SE APLICĂ ══════════════
   Ai zis „trebuie foarte bine gândit". Am făcut inventarul: panoul are 231 de
   selectoare în septica-pro.css — chat cu bule, avatare, reacții, indicator de
   tastare, meniu pe mesaj, separatoare de dată, selector de emoji, zonă de
   input cu trei butoane de acțiune, plus lista de mese.

   Și am găsit ceva mai bun decât să inventez eu un aranjament: **cineva a scris
   deja optimizarea de peisaj pentru chat.** 48 de reguli, `septica-pro.css:12869`,
   secțiunea „15.5 MOBILE LANDSCAPE OPTIMIZATION (Messenger Chat)".

   Nu se aplică. Gardul e `@media (max-width: 812px) and (max-height: 450px)`.
   Cei 812px erau lățimea unui iPhone X culcat, în 2018. Azi:

     iPhone 15          915px  →  RATEAZĂ
     iPhone 14 Pro Max  932px  →  RATEAZĂ
     Pixel 8            892px  →  RATEAZĂ
     Galaxy S24         888px  →  RATEAZĂ
     Galaxy S9+         654px  →  prinde
     iPhone SE          568px  →  prinde

   Deci pe orice telefon din ultimii cinci ani chatul cade pe stilul de portret,
   cu cotele în `vw` de la secțiunea 53. Nu lipsea designul, era doar de
   neatins.

   Îl aduc întreg, fără gardul de lățime — fișierul de față e deja limitat la
   peisaj sub 992px. Patru lucruri le-am și reparat pe drum, fiindcă erau
   scrise pentru un ecran fără bară flotantă:

   a) `.chat-messages` avea `max-height: calc(100vh - 44px - 50px - 90px)` —
      trei cote care trebuie să rămână sincronizate cu antetul, cu capul de chat
      și cu zona de input. Dacă vreuna se schimbă, mesajele se taie sau lasă gol.
      Trecut pe `flex: 1 1 auto` cu `min-height: 0`: umple ce rămâne, oricât ar
      fi. Ăsta e singurul loc unde mă abat de la autor, și o fac fiindcă
      aritmetica aia se strică singură.
   b) `100vh` → `100%`. Pe telefon `100vh` include bara de adresă, iar panoul e
      oricum `inset: 0`. Aceeași greșeală e explicată și în septica-mobile.css,
      la definiția lui `--u`.
   c) `.chat-input-area` avea `padding-bottom: 8px + safe-area`. Bara flotantă
      din footer are z-index 1030 față de 200 al panoului, deci stă PESTE el și
      ar acoperi câmpul de scris. Rezerv `13vh + 12px`, aceeași formulă ca la
      secțiunile 8 și 53.
   d) selectorul de emoji avea `max-width: calc(100vw - 24px)` — pe un ecran de
      915px ar fi ieșit din panou. Trecut pe `100%`.

   Antetul panoului: valorile de aici (44px înălțime, titlu 14px, butoane 36px)
   le BAT pe cele din secțiunea 53, fiindcă vin după. Sunt ale autorului și sunt
   gândite pentru peisaj — cele din 53 erau derivate din desktop. Rămân
   inseturile laterale de siguranță din 53, care lipsesc de aici. */

/* Ultra-compact panel header for landscape */
.context-panel .panel-header {
    padding: 8px 12px !important;
    min-height: 44px !important;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.15) !important;
}

.context-panel .panel-back {
    width: 36px !important;
    height: 36px !important;
}

.context-panel .panel-back .material-symbols-rounded {
    font-size: 18px !important;
}

.context-panel .panel-title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.context-panel .panel-close {
    width: 36px !important;
    height: 36px !important;
}

/* Panel content with reduced header height */
.context-panel .panel-content {
    height: calc(100% - 44px) !important;      /* 100% al panoului, nu 100vh */
    max-height: calc(100% - 44px) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* Chat container optimizations */
.chat-header {
    padding: 8px 12px !important;
    min-height: 50px !important;
}

.chat-avatar {
    width: 36px !important;
    height: 36px !important;
}

.chat-avatar-icon {
    font-size: 18px !important;
}

.chat-title {
    font-size: 13px !important;
    margin-bottom: 2px !important;
}

.chat-status,
.chat-online-count {
    font-size: 10px !important;
}

.chat-settings-btn {
    width: 36px !important;
    height: 36px !important;
}

.chat-settings-btn .material-symbols-rounded {
    font-size: 16px !important;
}

/* Ultra-compact messages area */
.chat-messages {
    padding: 8px 12px !important;
    flex: 1 1 auto !important;                 /* era max-height cu trei cote */
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    gap: 6px !important;
}

/* Compact message bubbles - TikTok style */
.chat-message {
    margin-bottom: 4px !important;
}

.chat-message-content-wrapper {
    max-width: 65% !important;
}

.chat-message-system .chat-message-content-wrapper {
    max-width: 75% !important;
}

.chat-message-header {
    margin-bottom: 4px !important;
    gap: 6px !important;
}

.chat-message-avatar {
    width: 24px !important;
    height: 24px !important;
}

.chat-message-name {
    font-size: 11px !important;
}

.chat-message-bubble {
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 12px !important;
}

.chat-message-timestamp {
    font-size: 9px !important;
    margin-top: 2px !important;
}

/* Compact reactions */
.chat-message-reactions {
    margin-top: 4px !important;
    gap: 4px !important;
}

.chat-reaction {
    padding: 2px 6px !important;
    font-size: 11px !important;
}

.chat-reaction-emoji {
    font-size: 13px !important;
}

.chat-reaction-count {
    font-size: 10px !important;
}

.chat-reaction-add {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
}

/* Compact typing indicator */
.chat-typing-indicator {
    margin-bottom: 8px !important;
    gap: 6px !important;
}

.chat-typing-avatar {
    width: 24px !important;
    height: 24px !important;
}

.chat-typing-bubble {
    padding: 6px 10px !important;
    gap: 3px !important;
}

.chat-typing-dot {
    width: 6px !important;
    height: 6px !important;
}

/* Ultra-compact input area */
.chat-input-area {
    padding: 8px 12px !important;
    padding-bottom: calc(13vh + 24px + env(safe-area-inset-bottom)) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.2) !important;
}

.chat-input-row {
    gap: 6px !important;
}

.chat-action-btn {
    width: 34px !important;
    height: 34px !important;
}

.chat-action-btn .material-symbols-rounded {
    font-size: 16px !important;
}

.chat-input-field {
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
    max-height: 80px !important;
    line-height: 1.4 !important;
}

.chat-send-btn {
    width: 38px !important;
    height: 38px !important;
}

.chat-send-btn .material-symbols-rounded {
    font-size: 18px !important;
}

/* Compact emoji picker for landscape */
.chat-emoji-picker {
    max-height: 220px !important;
    padding: 10px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
}

.chat-emoji-picker-header {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
}

.chat-emoji-picker-title {
    font-size: 11px !important;
}

.chat-emoji-picker-close {
    width: 24px !important;
    height: 24px !important;
}

.chat-emoji-grid-wrapper {
    max-height: 140px !important;
}

.chat-emoji-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 4px !important;
}

.chat-emoji-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
}

/* Hide scroll to bottom button in landscape */
.chat-scroll-to-bottom {
    width: 36px !important;
    height: 36px !important;
    bottom: 60px !important;
    right: 12px !important;
}

.chat-scroll-to-bottom .material-symbols-rounded {
    font-size: 18px !important;
}

/* Compact input info */
.chat-input-info {
    font-size: 9px !important;
    padding: 4px 8px !important;
}
/* Inseturile laterale, păstrate din secțiunea 53: culcat, decupajul e în
   lateral, iar blocul autorului nu-l știe. */
.context-panel .panel-header {
    padding-left: calc(12px + var(--safe-area-inset-left, 0px)) !important;
    padding-right: calc(12px + var(--safe-area-inset-right, 0px)) !important;
}
.chat-messages,
.chat-input-area {
    padding-left: calc(12px + var(--safe-area-inset-left, 0px)) !important;
    padding-right: calc(12px + var(--safe-area-inset-right, 0px)) !important;
}

/* Containerul de chat trebuie să fie coloană flexibilă ca (a) să funcționeze.
   Nu e în blocul autorului fiindcă acolo înălțimea venea din aritmetică. */
.chat-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}


/* ═══ 55. PANOUL SUB HEADER ȘI SUB BARĂ — CAUZA AMBELOR SIMPTOME ════════════
   „Nu acoperă headerul" și „nu pot scrie în chat" sunt același defect, văzut
   de sus și de jos. Straturile în peisaj:

     .top-bar                    1020   (pro:1949, --z-sticky)
     .nav-rail, bara flotantă    1030   (pro:2580, --z-fixed)
     .context-panel              200    (septica-mobile.css:567, !important)

   Panoul e ÎNTINS peste tot ecranul — `inset: 0`, corect — dar stă DEDESUBTUL
   amândurora. Headerul îi acoperă antetul, bara îi acoperă câmpul de scris.
   De-aia nu poți scrie: câmpul e acolo, doar că atingerile se duc în bară.

   De ce merge în portret: blocul care ascunde headerul cât e panoul deschis
   (`body.game-active:has(.context-panel.active) .top-bar { height: 0 }`,
   pro.css:17583) e închis în `@media (max-width: 768px) and (orientation:
   PORTRAIT)`. În peisaj nu se aplică, deci headerul rămâne acolo, deasupra.

   pro.css chiar ÎNCEARCĂ să repare asta: la 22106, într-un bloc
   `(max-width: 1023px) and (orientation: landscape)`, îi dă `z-index: 1100`.
   Dar septica-mobile.css se încarcă după și îl calcă cu 200. Regula de peisaj
   exista și era corectă — a fost anulată din greșeală de fișierul de portret.

   Îi dau înapoi cei 1100 pe care îi voia pro.css. Consecințe:
     · panoul acoperă headerul, cum ai cerut
     · acoperă și bara flotantă, deci câmpul de scris devine accesibil
     · bara nu se mai vede cât e panoul deschis — panoul are butonul lui de
       închidere și de întoarcere, deci nu rămâi blocat

   Și cad două cârje care existau DOAR fiindcă bara stătea deasupra:
     · secțiunea 53 rezerva `13vh + 24px` la baza conținutului
     · secțiunea 54 rezerva `13vh + 12px` sub câmpul de scris
   Le readuc la valorile normale — altfel rămâne o bandă goală de 18% din ecran.

   Antetul primește și decupajul de sus: panoul urcă acum până la marginea
   ecranului, deci trece pe sub cameră. */

.context-panel {
    z-index: 1100 !important;
}

.context-panel .panel-header {
    padding-top: calc(8px + var(--safe-area-inset-top, 0px)) !important;
}

.context-panel .panel-content {
    padding-bottom: 0 !important;
}

.chat-input-area {
    padding-bottom: calc(8px + var(--safe-area-inset-bottom, 0px)) !important;
}


/* ═══ 56. MODALELE — DOUĂ BLOCURI ÎNVECHITE, NU UNUL ════════════════════════
   CORECȚIE: prima versiune a secțiunii ăsteia portase doar 16 reguli, din
   `septica-pro.css:17104`. Era incompletă, fiindcă blocul ăla e RAFINAMENTUL de
   peisaj peste o bază pe care n-o adusesem:

     pro:16895   @media (max-width: 768px)                       38 reguli  BAZA
     pro:17104   @media (max-width: 768px) and (landscape)       16 reguli  peste ea

   Amândouă au același gard de 768px, deci amândouă sunt ratate de telefoanele
   de azi (iPhone 15 are 915px culcat, Pixel 8 892, Galaxy S24 888).

   24 de selectoare existau DOAR în bază, deci lipseau complet:
     · `.game-end-modal` + `.result-*` + `.ranking-table` — TOT modalul de
       sfârșit de joc, cu clasamentul și recompensele. Fără el rămânea centrat,
       la dimensiune de desktop, pe un ecran de 412px.
     · `.settings-buttons` — butoanele din Setări pe coloană, lățime întreagă.
     · `.modal-body { overflow-y: auto }` — fără asta corpul modalului NU
       DERULEAZĂ. 17104 îi dă `max-height`, dar derularea vine din bază, deci
       conținutul mai lung era pur și simplu tăiat.
     · `.modal-container::after` — mânerul de tragere. 17104 îi schimbă doar
       mărimea; `content`, `position`, `background` sunt în bază, deci fără ea
       mânerul nici nu exista.

   Le pun în ORDINEA din septica-pro.css: baza, apoi rafinamentul de peisaj.
   Ordinea nu e cosmetică — 17104 suprascrie intenționat valori din 16895
   (`max-height: 70vh` peste `65vh`, antet 16px peste 18px, pictogramă 40px
   peste 48px). Inversate, ai obține cotele de portret pe un ecran culcat.

   Am adăugat `!important` pe ambele: blocul `pro:21795` (86 de reguli,
   `max-width: 1023px and landscape`) SE APLICĂ pe telefoanele astea și atinge
   și el modale. Fără `!important` rezultatul depindea de care regulă e mai
   specifică, nu de ce voiam noi. */

/* ── BAZA (pro:16895) ─────────────────────────────────────────────────────── */
/* Backdrop - mai transparent pentru a vedea masa */
.modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

/* Bottom Sheet Container */
.modal-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 65vh !important;
    border-radius: 24px 24px 0 0 !important;
    transform: translateY(100%) !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

.modal-overlay.active .modal-container {
    transform: translateY(0) !important;
}

/* Drag Handle Indicator */
.modal-container::after {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 2px !important;
    z-index: 100 !important;
}

.modal-close {
    width: 36px !important;
    height: 36px !important;
    top: 10px !important;
    right: 10px !important;
}

.modal-close .material-symbols-rounded {
    font-size: 18px !important;
}

.modal-header {
    padding: 20px 18px 14px !important;
    gap: 12px !important;
}

.modal-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 36px !important;
}

.modal-header h2 {
    font-size: 18px !important;
}

.modal-body {
    padding: 14px 18px 18px !important;
    max-height: calc(65vh - 110px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.settings-section {
    padding: 14px !important;
    margin-bottom: 14px !important;
}

.settings-section h3 {
    font-size: 16px !important;
}

.setting-item {
    padding: 14px 0 !important;
}

.setting-item label {
    font-size: 14px !important;
    gap: 12px !important;
}

.settings-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
}

.settings-buttons .btn {
    width: 100% !important;
    padding: 14px 24px !important;
}

/* Game End Modal - Mobile Portrait */
.game-end-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
}

.modal-overlay.active .game-end-modal {
    transform: translateY(0) !important;
}

.game-end-modal > .modal-body {
    padding: 20px 16px 16px !important;
    max-height: 70vh !important;
}

.result-animation {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 8px !important;
}

.result-animation::before {
    inset: -6px !important;
}

.result-animation .material-symbols-rounded {
    font-size: 40px !important;
}

.result-title {
    font-size: 22px !important;
    margin-bottom: 10px !important;
}

.result-score {
    font-size: 40px !important;
    margin-bottom: 10px !important;
}

.result-ranking {
    margin: 6px 0 2px !important;
}

.ranking-table th {
    padding: 5px 8px !important;
    font-size: 9px !important;
}

.ranking-table td {
    padding: 6px 8px !important;
    font-size: 12px !important;
}

.ranking-table .rank-medal {
    font-size: 14px !important;
    width: 28px !important;
}

.ranking-table .rank-cards {
    font-size: 10px !important;
}

.ranking-table .rank-reward {
    font-size: 11px !important;
}

.ranking-table .rank-balance {
    font-size: 10px !important;
}

.bonus-tag {
    font-size: 8px !important;
    padding: 1px 3px !important;
}

.result-stats {
    margin: 0 !important;
}

.result-stat {
    padding: 8px 12px !important;
}

.result-stat-value {
    font-size: 14px !important;
}

.result-stat-label {
    font-size: 11px !important;
}

.result-actions {
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.result-actions .btn,
.result-actions .btn-control {
    padding: 10px 12px !important;
    font-size: 12px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
}

/* ── RAFINAMENTUL DE PEISAJ (pro:17104) — suprascrie baza de mai sus ──────── */
/* Backdrop transparent pentru vizibilitate masă */
.modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    align-items: flex-end !important;
}

/* Bottom Sheet - mai jos în landscape */
.modal-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
}

.modal-overlay.active .modal-container {
    transform: translateY(0) !important;
}

/* Drag Handle mai mic în landscape */
.modal-container::after {
    top: 8px !important;
    width: 32px !important;
    height: 3px !important;
}

.modal-close {
    width: 32px !important;
    height: 32px !important;
    top: 8px !important;
    right: 8px !important;
}

.modal-close .material-symbols-rounded {
    font-size: 16px !important;
}

.modal-header {
    padding: 16px 16px 10px !important;
    gap: 10px !important;
}

.modal-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 30px !important;
    border-radius: 10px !important;
}

.modal-header h2 {
    font-size: 16px !important;
    letter-spacing: 0.3px !important;
}

.modal-body {
    padding: 12px 16px 16px !important;
    max-height: calc(70vh - 85px) !important;
    font-size: 13px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.modal-body p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
}

.modal-body li {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
}

.settings-section {
    padding: 12px !important;
    margin-bottom: 10px !important;
}

.settings-section h3 {
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

.setting-item {
    padding: 10px 0 !important;
}

.setting-item label {
    font-size: 12px !important;
}

/* ═══ 57. CĂRȚILE CARE ZBOARĂ PESTE PANOU ═══════════════════════════════════
   Animația de captură (`.capture-fly-card`) trece peste conținutul panoului.

   Cauza: în CSS regula (`septica-pro.css:24323`) nu-i dă nici `position`, nici
   `z-index` — le pune JS-ul inline, iar cartea e agățată de `<body>`, nu de
   masă. Deci nu e limitată de nimic din pagină și ajunge deasupra oricărui
   strat, inclusiv al panoului.

   `!important` bate stilul inline, deci se poate încadra din CSS. Îi dau un
   loc anume în stivă, între cele existente:

     conținutul mesei          25-26
     bulele de chat            150
     .top-bar                  1020
     bara flotantă             1030
     CARTEA ÎN ZBOR            1050   ← aici
     .context-panel            1100
     modalele                  9999

   Deasupra mesei, a headerului și a barei — deci animația se vede întreagă în
   joc, cum trebuie. Sub panou și sub modale — deci nu mai trece peste chat.

   Nu o ascund cât e panoul deschis: JS-ul curăță elementul la final, iar dacă
   îl scoteam din desen riscam să rămână atârnat. Așa doar trece pe dedesubt. */

.capture-fly-card {
    z-index: 1050 !important;
}

/* Aceeași grijă pentru popup-ul de captură și bulele boților: ambele sunt
   agățate de seat/body și n-au de ce să treacă peste panou. */
.capture-popup {
    z-index: 1040 !important;
}


/* ═══ 58. DIALOGUL „VEI PIERDE JOCUL CURENT" ════════════════════════════════
   `.mw-confirm-*`, septica-pro.css:5373. Două lucruri, separate:

   1. NU E DIN ACEEAȘI LUME ca restul jocului. Fundalul lui e
      `--color-primary` (albastru-ardezie #0f172a), bordura un fir auriu de
      15% opacitate, titlul alb simplu. Masa, crestul, dock-ul și insignele
      sunt toate lemn cu ramă aurie în degrade și nume cu foiță. Dialogul apare
      peste ele și arată ca o fereastră de altă aplicație.

      Îl trec pe paleta casei, exact aceleași straturi ca la crestul de jos
      (`septica-pro.css:25561`): fund întunecat pe `padding-box`, fibră de lemn
      și degrade auriu pe `border-box`, inel exterior închis. Titlul primește
      foița aurie de la `#nameSouth`. Butonul de confirmare rămâne roșu — e
      acțiune distructivă, roșul e corect — dar capătă aceeași bordură și umbră
      ca restul butoanelor, ca să nu mai pară lipit.

   2. N-ARE NICIO REGULĂ PENTRU PEISAJ. Toate cotele sunt px și rem:
      padding 20/24, titlu 1rem, mesaj 0.82rem, butoane 8/18. Pe 412px
      înălțime dialogul iese ~160px, adică 39% din ecran; pe Galaxy S9+ (315px)
      ajunge la 51%. Le leg de `vh`, plafonate la valorile originale — pe ecran
      înalt arată identic, pe unul scund se strânge.

   3. Butoanele stăteau `justify-content: flex-end`, adică două pastile mici în
      colț. Pe telefon le fac să împartă lățimea: ținte de atins mai mari și
      alegerea e mai clară când una din ele pierde jocul.

   ATENȚIE, o limită reală: asta funcționează doar dacă alerta chiar e
   dialogul `.mw-confirm-*`. Dacă în locul lui se cheamă `confirm()` nativ din
   septica-pro.js, CSS-ul nu-l poate atinge deloc — fereastra aia o desenează
   browserul. Se vede imediat: dacă după reîncărcare alerta arată tot ca înainte,
   e nativă și trebuie schimbată în JS. */

.mw-confirm-overlay.visible {
    background: rgba(0, 0, 0, .72) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.mw-confirm-dialog {
    background:
        linear-gradient(135deg, rgba(26,17,9,.98), rgba(12,8,4,.99)) padding-box,
        repeating-linear-gradient(88deg, rgba(38,22,8,.42) 0 1px, rgba(0,0,0,0) 1px 4px) border-box,
        linear-gradient(160deg, #e2b87c 0%, #b07838 28%, #7a4a1e 58%, #4a2c12 100%) border-box !important;
    border: 2.5px solid transparent !important;
    border-radius: min(4vh, 16px) !important;
    padding: min(4.8vh, 20px) min(5.8vh, 24px) !important;
    min-width: min(62vw, 260px) !important;
    max-width: min(78vw, 360px) !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, .7),
        inset 0 0 0 1px rgba(0, 0, 0, .42),
        0 0 0 1px #2a1708 !important;
}

/* Titlul: aceeași foiță aurie ca numele jucătorilor (pro:25208, 25294). */
.mw-confirm-title {
    font-family: 'Cinzel', 'Georgia', serif !important;
    font-size: min(3.9vh, 16px) !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    background: linear-gradient(180deg, #ffeaa8 0%, #ffd700 48%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) !important;
    margin-bottom: min(2vh, 8px) !important;
}

.mw-confirm-msg {
    font-size: min(3.2vh, 13px) !important;
    color: rgba(255, 255, 255, .78) !important;
    line-height: 1.45 !important;
    margin-bottom: min(4.4vh, 18px) !important;
}

.mw-confirm-msg strong {
    color: #f3e2a8 !important;
    font-weight: 700 !important;
}

/* Butoanele împart lățimea: ținte mai mari, și se vede clar că sunt două
   alegeri, nu o pastilă principală și una accesorie. */
.mw-confirm-actions {
    display: flex !important;
    gap: min(2vh, 8px) !important;
    justify-content: stretch !important;
}

.mw-confirm-btn {
    flex: 1 1 0 !important;
    min-height: min(9.5vh, 40px) !important;
    padding: 0 min(4.4vh, 18px) !important;
    border-radius: min(2.4vh, 10px) !important;
    font-size: min(3.1vh, 13px) !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
}

.mw-confirm-btn.cancel {
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;
    color: #e8ddc4 !important;
    border: 1px solid rgba(233, 196, 90, .3) !important;
    box-shadow: inset 0 1px 0 rgba(255, 235, 195, .14) !important;
}

.mw-confirm-btn.confirm {
    background: linear-gradient(180deg, #e0483f, #a81f18) !important;
    color: #fff !important;
    border: 1px solid rgba(120, 20, 14, .8) !important;
    box-shadow:
        0 3px 10px rgba(168, 31, 24, .45),
        inset 0 1px 0 rgba(255, 190, 185, .35) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45) !important;
}


/* ═══ 59. MODALELE PE TOT ECRANUL ═══════════════════════════════════════════
   Secțiunea 56 le-a adus ca FOI DE JOS, fiindcă asta scrie în blocurile
   originale: `align-items: flex-end` plus `max-height: 65vh`, apoi `70vh` în
   rafinamentul de peisaj. Cifrele alea sunt gândite pentru portret, unde 70%
   dintr-un ecran de 915px înseamnă 640px — loc berechet pentru Setări sau
   pentru clasamentul de la final.

   În peisaj, 70vh dintr-un ecran de 412px sunt 288px. Din ei, antetul ia ~60 și
   rămân 228px de conținut, pe o lățime de 915. Tabelul de clasament și lista de
   setări nu au ce căuta acolo — derulează în trei rânduri. Iar foaia oricum
   acoperă trei sferturi din ecran, deci nu mai câștigi nimic din faptul că e
   „doar o foaie".

   Le duc pe tot ecranul. Câștig 124px de conținut, adică +54%, și devin
   coerente cu panoul, care e tot pe tot ecranul (secțiunile 53-55).

   Ce trebuie făcut ca să nu se rupă:

   a) `.modal-container` are `overflow: hidden` din construcție
      (`septica-pro.css:15134`). Pe tot ecranul, dacă nu-i dau structură de
      coloană, corpul se taie fără să deruleze. Îl fac `flex column`, antetul
      `flex: 0 0 auto`, corpul `flex: 1 1 auto` cu `min-height: 0`. Fără
      `min-height: 0` un copil flex nu coboară sub conținutul lui și derularea
      moare — aceeași capcană ca la `.chat-messages`, secțiunea 54.

   b) `max-height` de la 56 trebuie anulat, altfel plafonul de 70vh rămâne.

   c) Mânerul de tragere (`.modal-container::after`) nu mai are sens — nu mai e
      foaie de tras. Îl sting; altfel plutește peste antet.

   d) Decupajele: modalul atinge acum toate cele patru margini, iar culcat
      camera e în lateral. Antetul și corpul primesc inseturile.

   Animația de intrare rămâne cea de la 56 — alunecă tot de jos, doar că acum
   umple ecranul.

   REVERT: șterge secțiunea, modalele revin la foi de jos. */

.modal-overlay {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
}

.modal-container,
.game-end-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* (c) — mânerul de tragere dispare */
.modal-container::after {
    display: none !important;
}

/* (a) + (b) — antetul fix, corpul elastic și derulabil */
.modal-header {
    flex: 0 0 auto !important;
    padding-top: calc(min(3.9vh, 16px) + var(--safe-area-inset-top, 0px)) !important;
    padding-left: calc(min(3.9vh, 16px) + var(--safe-area-inset-left, 0px)) !important;
    padding-right: calc(min(3.9vh, 16px) + var(--safe-area-inset-right, 0px)) !important;
}

.modal-body,
.game-end-modal > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;          /* fără el derularea moare — vezi (a) */
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: calc(min(3.9vh, 16px) + var(--safe-area-inset-left, 0px)) !important;
    padding-right: calc(min(3.9vh, 16px) + var(--safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(min(3.9vh, 16px) + var(--safe-area-inset-bottom, 0px)) !important;
}

/* Butonul de închidere urcă în colțul real al ecranului, cu decupajul socotit. */
.modal-close {
    top: calc(8px + var(--safe-area-inset-top, 0px)) !important;
    right: calc(8px + var(--safe-area-inset-right, 0px)) !important;
}

/* Pe toată lățimea, secțiunile de setări nu mai au motiv să stea pe o coloană
   îngustă: două coloane folosesc cei 915px, cu o singură coloană sub 700. */
.modal-body .settings-section {
    break-inside: avoid !important;
}

.modal-body:has(.settings-section) {
    column-count: 2 !important;
    column-gap: min(3.9vh, 16px) !important;
}

@media (max-width: 700px) {
    .modal-body:has(.settings-section) {
        column-count: 1 !important;
    }
}


/* ═══ 60. CÂMPURILE DE SCRIS — ZOOM PE IOS ══════════════════════════════════
   Safari pe iPhone MĂREȘTE pagina la atingerea oricărui `input`, `textarea`
   sau `select` a cărui mărime de text calculată e sub 16px. E accesibilitate,
   nu se poate opri cu `user-scalable=no` pe iOS modern. În peisaj efectul e
   distrugător: masa iese din ecran și nu revine la ieșirea din câmp.

   CORECȚIE față de prima versiune: căutasem după nume de clasă și după
   `font-size` scris în px. Am ratat trei categorii întregi:

     · SELECT-uri — iOS le mărește la fel ca pe inputuri
         .lobby-sort-select  12px      .mp-sort-select  11px
     · valori în `rem`, pe care scanarea după `px` nu le vedea
         .mp-modal-input  0.95rem = 15.2px   (câmpul din „Creează masă")
     · câmpuri pe care numele nu le trăda
         .lobby-search-input        .mp-room-search        .btm-field input

   Lista completă a câmpurilor sub prag, verificată prin trei metode
   independente (reguli `::placeholder`, selectoare pe element `input`/
   `textarea`/`select`, și clase cu `caret-color` sau `-webkit-appearance`):

     .chat-input-field  .chat-search-input  .chat-input-container input
     .cmsg-input  .mw-lx-chat-input  .friends-search-input  .friend-chat-input
     .lobby-search-input  .mp-room-search  .mp-modal-input  .btm-field input
     .lobby-sort-select  .mp-sort-select

   În loc să le enumăr — și să ratez iar ceva, sau ce se mai adaugă mâine —
   prind ELEMENTELE. `input`, `textarea`, `select` și `contenteditable`, cu
   excepția tipurilor care n-au text și deci nu declanșează zoom: bifă, radio,
   glisor, culoare, butoane.

   COMPROMISUL, ca să-l știi: un `select` de 11px care trece la 16px se lățește.
   `.mp-sort-select` stă într-o bară compactă în lobby și s-ar putea să iasă pe
   al doilea rând. Dacă se întâmplă, soluția e să-i strângi `padding`-ul, NU
   să-i cobori fontul înapoi — sub 16px zoom-ul revine. */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
    font-size: 16px !important;
}

/* Dacă gestionarul de parole tot completează, cel puțin nu mai lasă caseta
   galbenă peste fundalul închis al panoului sau al modalului. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: #f1f5f9 !important;
    caret-color: #f1f5f9 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 14, 8, .96) inset !important;
    box-shadow: 0 0 0 1000px rgba(20, 14, 8, .96) inset !important;
    transition: background-color 9999s ease-in-out 0s !important;
}


/* ═══ 61. CĂRȚILE ARUNCATE, PESTE PANOU ═════════════════════════════════════
   Secțiunea 57 a prins doar animația de CAPTURĂ (`.capture-fly-card`). Cea de
   ARUNCARE e altceva și trece în continuare.

   În septica-pro.css există trei animații de carte, toate cu z-index mic
   (`.card.throwing` 50, `.card.collecting` 60, `.card.playing` fără): la
   valorile alea n-ar putea urca peste un panou cu 1100. Deci cartea pe care o
   vezi nu e cea din DOM-ul mesei — e o CLONĂ pe care JS-ul o agață de `<body>`
   cu `position: fixed` și un z-index inline. Aceeași tehnică ca la captură,
   doar că fără o clasă proprie pe care s-o pot ținti.

   Două plase, ca să prind și ce nu văd în CSS:

   a) `body > .card` — orice carte care ajunge copil DIRECT al lui `<body>` e,
      prin definiție, o clonă de animație: cărțile reale stau în mână, pe masă
      sau în insigne, niciodată la rădăcină. Le plafonez la 1050, sub panou.
      `!important` bate z-index-ul inline pus de JS.

   b) cât e panoul deschis, sting toate straturile de animație. Nu le opresc,
      doar nu le mai desenez — JS-ul își curăță elementele la fel, iar tu nu ai
      ce urmări dintr-o animație de masă cât citești chatul.

   `body.is-dealing` deschide `overflow: visible` pe toate containerele mesei
   (pro:24308), ca să poată zbura cărțile la împărțire. Cu panoul deschis nu
   are cui folosi, așa că îl închid la loc — altfel cărțile ies din masă și se
   plimbă pe sub panou, unde tot se văd pe margini. */

body > .card,
body > .capture-fly-card {
    z-index: 1050 !important;
}

body:has(.context-panel.active) > .card,
body:has(.context-panel.active) .capture-fly-card,
body:has(.context-panel.active) .card.throwing,
body:has(.context-panel.active) .card.collecting,
body:has(.context-panel.active) .card.playing,
body:has(.context-panel.active) .capture-popup,
body:has(.context-panel.active) .floating-points,
body:has(.context-panel.active) .sparkle,
body:has(.context-panel.active) .seat-bubble {
    display: none !important;
}

body:has(.context-panel.active).is-dealing .game-area,
body:has(.context-panel.active).is-dealing .game-play-container,
body:has(.context-panel.active).is-dealing .table-area {
    overflow: hidden !important;
}


/* ═══ 62. MODUL IMERSIV — ASCUNDE, DAR NU MĂREȘTE ═══════════════════════════
   Butonul `.immersive-toggle-float` (cercul din marginea stângă) comută
   `body.immersive-mode`, iar `septica-pro.css:2595` face trei lucruri:

     · `.top-bar   { display: none }`
     · `.nav-rail  { display: none }`
     · `.game-canvas / .main-content { height: 100dvh }`

   Primele două funcționează. Al treilea NU, și e din cauza secțiunii 1:

     body.immersive-mode .game-canvas                    (0,2,1)
     body.game-active:not(.room-waiting) .game-canvas    (0,3,1)   ← secțiunea 1

   A doua e mai specifică, deci câștigă. Rezerva de `13vh + 22px` pentru footer
   rămâne pe loc, deși footerul e `display: none`. Rezultatul: apeși butonul,
   bara și headerul dispar, dar în locul lor rămâne o bandă neagră goală, iar
   masa are exact aceeași mărime ca înainte. Deci face jumătate din treabă.

   Aceeași `max-height` din secțiunea 1 blochează și `.game-area`.

   Repar cu specificitate mai mare, nu prin schimbarea secțiunii 1 — aceea
   trebuie să rămână valabilă în modul normal:

     body.game-active.immersive-mode:not(.room-waiting)   (0,4,1)

   CÂT SE CÂȘTIGĂ (masa = container × 0.71, din secțiunile 44 și 51):

     iPhone 15  (412px)   container 336 → 412   masa 238 → 292px   (+23%)
     Galaxy S9+ (315px)   container 252 → 315   masa 178 → 223px   (+25%)
     iPhone SE  (320px)   container 256 → 320   masa 181 → 227px   (+25%)

   Restul se aranjează singur: fiecare cotă din fișierul ăsta e în `cqh`, deci
   scaunele, cărțile, crestul și dock-ul cresc odată cu containerul. Ăsta e și
   motivul pentru care merită — nu se mărește doar masa, se mărește tot.

   DOUĂ LUCRURI ÎN PLUS, care apar abia când headerul dispare:

   a) Culcat, decupajul camerei e în LATERAL. Cât timp exista headerul, el
      absorbea partea de sus; acum masa e lipită de toate marginile și pe unele
      telefoane intră sub cameră. Adaug inseturile de siguranță.

   b) `body.room-waiting .game-area` (secțiunea 8) rezervă `13vh + 24px` pentru
      bara flotantă. În imersiv bara nu există, deci rezerva e o bandă goală în
      sala de așteptare. O reduc la decupaj.

   Butonul rămâne unde e, dar îl leg de înălțime: 48px fix pe un ecran de 315px
   înseamnă 15% din el, stând peste rama mesei. */

body.game-active.immersive-mode:not(.room-waiting) .game-canvas,
body.game-active.immersive-mode:not(.room-waiting) .game-area {
    height: 100dvh !important;
    max-height: 100dvh !important;
}

/* (a) — decupajul lateral, expus abia după ce dispare headerul */
body.immersive-mode .game-canvas {
    padding-left: var(--safe-area-inset-left, 0px) !important;
    padding-right: var(--safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
}

/* (b) — fără bară, fără rezervă pentru ea */
body.immersive-mode.room-waiting .game-area {
    padding-bottom: var(--safe-area-inset-bottom, 0px) !important;
    scroll-padding-bottom: var(--safe-area-inset-bottom, 0px) !important;
}

/* Butonul: 48px fix e 15% dintr-un ecran de 315px. Legat de înălțime, cu
   plafon la valoarea originală. Rămâne peste 40px, deci tot ușor de atins. */
.immersive-toggle-float {
    width: min(11.5vh, 48px) !important;
    height: min(11.5vh, 48px) !important;
    left: calc(8px + var(--safe-area-inset-left, 0px)) !important;
}

.immersive-arrows-box {
    width: min(4.8vh, 20px) !important;
    height: min(4.8vh, 20px) !important;
}

body.immersive-mode .immersive-arrows-box {
    width: min(4.3vh, 18px) !important;
    height: min(4.3vh, 18px) !important;
}


/* ═══ 63. CĂRȚILE DIN MÂNĂ ÎN MODUL IMERSIV ═════════════════════════════════
   Consecință directă a secțiunii 62, și cauza e o singură cotă din a ta 4:

     #handSouth .card { width: min(12cqh, 11vh) }

   Plafonul de `11vh` l-ai pus ca să nu crească cartea peste banda ei pe ecrane
   scunde. În modul NORMAL nu se atinge niciodată — containerul e 87% din ecran,
   deci `12cqh` iese mereu mai mic decât `11vh`:

                        ecran  container   12cqh   11vh   câștigă
     iPhone 15 normal    412       336      40.3   45.3    40.3
     iPhone 15 imersiv   412       412      49.4   45.3    45.3  ← plafonul
     Galaxy S9+ normal   315       252      30.2   34.6    30.2
     Galaxy S9+ imersiv  315       315      37.8   34.6    34.6  ← plafonul

   În imersiv containerul DEVINE ecranul, deci `12cqh` = `12vh` și trece peste
   plafonul de 11. Cartea rămâne blocată la 11% din ecran, în timp ce tot restul
   — crest, chipuri, avatar, fonturile din dock — crește cu 23%, fiindcă e în
   `cqh` curat. Cartea nu se micșorează în absolut (40.3 → 45.3px), se
   micșorează FAȚĂ DE tot ce e în jurul ei. De-aia se vede ca o scădere.

   În imersiv plafonul nu mai are ce apăra: containerul e chiar ecranul, deci
   `12cqh` ESTE `12vh`, adică exact ce voiai să limitezi. Îl scot doar acolo.
   Modul normal rămâne neatins — acolo plafonul nici nu se activa.

   Cărțile de pe masă merg la fel, ca să nu iasă două mărimi diferite. */

body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card,
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tableCards .card {
    width: 12cqh !important;
}


/* ═══ 64. MÂNA MARE — SUPRAPUNERE ÎN LOC DE STRÂNGERE ═══════════════════════
   Secțiunea 44 a dat cărților `flex: 0 1 auto` cu `min-width: 0`, ca supapă:
   dacă nu încap, se strâng în loc să împingă dock-ul afară din ecran. Supapa e
   corectă, dar acum se declanșează mai des — în imersiv crestul crește cu 23%
   și lasă mai puțină lățime mâinii.

   Socoteala pe iPhone 15 imersiv: 915 lățime, crest ~274, dock 238, spații 37
   → rămân 366px pentru mână. La 8 cărți de 49.4px trebuie 395px + spații. Nu
   încap, deci supapa le strânge pe toate, uniform.

   Mai bine decât să le strângă e să le SUPRAPUNĂ — așa arată o mână ținută, și
   așa face desktopul la oponenți (`margin: 0 -6px 0 0` la o carte de 24px, adică
   un sfert ascuns).

   Trucul e că suprapunerea se aplică DOAR când chiar e nevoie:
   `#handSouth:has(.card:nth-child(7))` prinde doar cazul cu 7 cărți sau mai
   multe. Sub șapte, cărțile rămân separate, cum sunt acum. E singura condiție
   de tipul „câte sunt" pe care CSS-ul o poate exprima. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth:has(.card:nth-child(7)) .card + .card {
    margin-left: -2.4cqh !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth:has(.card:nth-child(9)) .card + .card {
    margin-left: -4cqh !important;
}

/* Cartea de sub cursor/atinsă iese în față, altfel la suprapunere nu se mai
   vede ce alegi. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card:active,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth .card.playable:active {
    z-index: 10 !important;
}


/* ═══ 65. ÎN IMERSIV, CRESTUL ȘI DOCK-UL NU MAI CRESC ═══════════════════════
   Secțiunea 63 a scos plafonul de `11vh`, dar cărțile tot ies mici în imersiv.
   Măsurat pe capturile tale, cum se împarte lățimea rândului de jos:

                              crest      mână      dock
     desktop (apron 1470)   440  30%   795  54%   235  16%
     peisaj normal  (828)   330  40%   175  21%   265  32%
     peisaj imersiv (828)   375  45%   150  18%   265  32%

   Pe desktop mâna ia MAI MULT DE JUMĂTATE din apron. La noi ia o cincime, iar
   în imersiv scade la 18%. Cauza nu e cartea, e vecinul: tot ce e în crest e
   în `cqh`, containerul crește cu 23% la apăsarea butonului, deci crestul se
   umflă cu 23% și mâna primește ce rămâne. Supapa `flex: 0 1 auto` din
   secțiunea 44 face restul și strânge cărțile.

   Principiul care lipsea: spațiul câștigat în imersiv e pentru MASĂ și CĂRȚI,
   nu pentru ramele din jurul lor. Crestul afișează trei cifre și un nume —
   n-are de ce să crească atunci când ascunzi headerul.

   Cum se exprimă „nu crește": în modul normal containerul e 87% din ecran,
   deci `13.6cqh` înseamnă `11.8vh`. În imersiv containerul e ecranul, deci
   `13.6cqh` devine `13.6vh`. Rescriu fiecare cotă a crestului și a dock-ului
   în `vh`, cu valoarea din modul normal (cqh × 0.87). Rezultat: rândul de jos
   are exact aceeași mărime în ambele moduri, iar cei 23% se duc integral în
   masă și în cărți.

   Efect secundar bun: crestul devine mai SCUND decât rândul cărților, exact ca
   pe desktop, unde are 66px lângă cărți de 150px. Până acum era invers.

   Nimic din astea nu atinge modul normal — totul e gardat pe `.immersive-mode`. */

/* rândul: înălțimea crestului și a dock-ului (era 16cqh, secțiunea 5) */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth,
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    height: 13.9vh !important;
    padding-top: 0.35vh !important;
    padding-bottom: 0.35vh !important;
    gap: 0.52vh !important;
}

/* avatarul (era 13.5cqh, secțiunea 47) */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #avatarSouth,
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #avatarSouth,
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth img {
    width: 11.75vh !important;
    height: 11.75vh !important;
    min-width: 11.75vh !important;
    max-height: 11.75vh !important;
    flex: 0 0 11.75vh !important;
}

/* chipurile CĂRȚI / PUNCTE / BALANȚĂ (erau 13.6cqh, secțiunea 48) */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item {
    min-width: 11.83vh !important;
    padding: 0.63vh 2.35vh !important;
    gap: 0.22vh !important;
}

/* placa și decalajul avatarului (secțiunile 48c și 27) */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    margin-left: -6.26vh !important;
    padding: 1.26vh 3.39vh 1.26vh 8vh !important;
    border-width: 1.04vh !important;
}

body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
    gap: 2.09vh !important;
}

/* textul din crest (secțiunile 48d și 41) */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #nameSouth {
    font-size: 2.61vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item > span:not(.material-symbols-rounded) {
    font-size: 3.57vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item.meta-balance > span:not(.material-symbols-rounded) {
    font-size: 4vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .tb-pill-t {
    font-size: 2.44vh !important;
}

/* dock-ul (secțiunile 5c și 44) */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-top {
    font-size: 2.61vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-mid {
    font-size: 2.26vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-btn {
    width: 6.09vh !important;
    height: 6.09vh !important;
}


/* ═══ 66. BUTONUL DE FOCUS — DE CE NU SE ÎNȚELEGE ═══════════════════════════
   Am citit cum e desenat (`septica-pro.css:2644-2770`). Patru motive, și al
   doilea e cel serios:

   1. SĂGEȚILE PULSEAZĂ LA NESFÂRȘIT. `.imm-arrow` are
      `animation: … 2s ease-in-out infinite`, cu o deplasare de 2px. Un element
      care se mișcă permanent, dar aproape imperceptibil, e citit ca decor, nu
      ca buton. Mișcarea trebuie să atragă o dată, nu mereu.

   2. CELE DOUĂ STĂRI ARATĂ LA FEL. Închis: săgețile în colțurile unei cutii de
      20px. Deschis: aceleași săgeți la 5px de colț. O diferență de 5px pe 20 —
      n-o vezi. Deci nu poți spune, uitându-te la buton, dacă ești în focus sau
      nu.

   3. ÎN FOCUS DEVINE MAI GREU DE VĂZUT, exact pe dos. `body.immersive-mode`
      îi scade opacitatea la 0.5, îi scoate auriul și îl face gri
      (`pro:2754`). Dar în focus butonul ăsta e SINGURA cale înapoi — headerul
      și footerul sunt ascunse. Ieșirea de urgență e cel mai palid lucru de pe
      ecran.

   4. N-are etichetă, și e în altă paletă decât jocul: fundalul lui e
      `--color-primary`, adică albastru-ardezie, ca dialogul din secțiunea 58.

   CE FAC:

   a) Opresc pulsul infinit al săgeților. Pulsul de atenție al butonului
      întreg rămâne — `immersivePulse … 2` rulează de două ori la încărcare și
      se oprește, ceea ce e corect.

   b) Fac stările vizibil diferite. ÎNCHIS: săgețile împinse ÎN AFARĂ, spre
      colțuri (= „mărește"). DESCHIS: trase spre CENTRU, la 30% din cutie
      (= „strânge"). Șase ori mai multă deplasare decât cei 5px de acum.

   c) Adaug o etichetă sub săgeți, din `::after`, care se schimbă cu starea:
      „MĂREȘTE" / „IEȘI". Două cuvinte care nu se pot confunda. Butonul devine
      un pătrat rotunjit în loc de cerc, ca să încapă.

   d) În focus îl fac MAI vizibil, nu mai puțin: ramă aurie, opacitate 0.85.

   e) Îl trec pe paleta jocului — lemn întunecat cu ramă aurie, ca restul.

   ÎNCAPE? Marginea liberă din stânga mesei e ~6cqw, adică 55px pe un telefon
   de 915px (masa are 88cqw, secțiunea 3). Butonul are 46px. Intră fără să
   atingă rama.

   DACĂ MARCAJUL ARE DEJA O ETICHETĂ vizibilă în buton, cea de la (c) se va
   dubla — se vede imediat. Atunci șterge doar blocul `::after`, restul rămâne
   valabil. */

.immersive-toggle-float {
    width: min(11vh, 46px) !important;
    height: min(11vh, 46px) !important;
    border-radius: min(3.4vh, 14px) !important;
    flex-direction: column !important;
    gap: min(0.7vh, 3px) !important;
    opacity: 1 !important;
    background:
        linear-gradient(180deg, rgba(44, 29, 13, .96), rgba(18, 11, 4, .98)) !important;
    border: 1.5px solid rgba(233, 196, 90, .45) !important;
    color: #f3c552 !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 235, 195, .18) !important;
}

/* (a) — săgețile nu mai pulsează la nesfârșit */
.imm-arrow {
    animation: none !important;
    opacity: 1 !important;
}

/* (b) — stări vizibil diferite. Închis: săgețile în colțuri. */
.immersive-arrows-box {
    width: min(4.3vh, 18px) !important;
    height: min(4.3vh, 18px) !important;
}
.imm-tl { top: -2px !important; left: -2px !important; }
.imm-tr { top: -2px !important; right: -2px !important; }
.imm-bl { bottom: -2px !important; left: -2px !important; }
.imm-br { bottom: -2px !important; right: -2px !important; }

/* Deschis: trase spre centru, 30% din cutie — de șase ori cât cei 5px de acum */
body.immersive-mode .imm-tl { top: 30% !important; left: 30% !important; }
body.immersive-mode .imm-tr { top: 30% !important; right: 30% !important; }
body.immersive-mode .imm-bl { bottom: 30% !important; left: 30% !important; }
body.immersive-mode .imm-br { bottom: 30% !important; right: 30% !important; }

/* (c) — eticheta care spune ce face */
.immersive-toggle-float::after {
    content: 'MĂREȘTE';
    font-family: inherit;
    font-size: min(1.7vh, 7px);
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1;
    color: rgba(243, 197, 82, .9);
    white-space: nowrap;
    pointer-events: none;
}

body.immersive-mode .immersive-toggle-float::after {
    content: 'IEȘI';
    color: rgba(255, 226, 150, .95);
}

/* (d) — în focus e singura cale înapoi, deci se vede MAI bine, nu mai prost */
body.immersive-mode .immersive-toggle-float {
    opacity: .85 !important;
    background: linear-gradient(180deg, rgba(30, 20, 9, .9), rgba(12, 8, 3, .94)) !important;
    border-color: rgba(233, 196, 90, .55) !important;
    color: #ffe296 !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(0, 0, 0, .5) !important;
}

body.immersive-mode .immersive-toggle-float:hover,
.immersive-toggle-float:hover {
    opacity: 1 !important;
    border-color: rgba(255, 215, 0, .8) !important;
    transform: translateY(-50%) scale(1.06) !important;
}

.immersive-toggle-float:active {
    transform: translateY(-50%) scale(0.94) !important;
}


/* ═══ 67. CRESTUL PE DOUĂ RÂNDURI, CA PE DESKTOP ════════════════════════════
   Pune capturile una lângă alta și diferența nu e de mărime, e de STRUCTURĂ:

     desktop:  [avatar]  CINDY
                         [2 CĂRȚI] [0 PUNCTE] [19264 BALANȚĂ]

     peisaj:   [avatar]  CINDY  [2 CĂRȚI] [0 PUNCTE] [19264 BALANȚĂ]

   Pe desktop numele stă DEASUPRA chipurilor — placa are două rânduri, iar
   numele e titlul lor. În peisaj totul e pe un rând, deci numele devine al
   patrulea element din șir și nu se mai citește ca nume, ci ca o etichetă
   pierdută între cifre.

   Cauza: `septica-mobile.css:313` pune pe `#infoSouth .player-details`
   `flex-direction: row; align-items: center`. Pe desktop e coloană — comentariul
   din `pro:6210` o spune direct: „Bootstrap: .d-flex .flex-column .gap-1".
   În portret rândul are sens: acolo crestul împarte o coloană de 50% cu
   dock-ul și n-are înălțime pentru două rânduri. După secțiunea 44 crestul are
   lățime proprie, deci restricția a dispărut.

   ÎNCAPE, verificat: rândul are 16cqh = 50px la un container de 314px.
   nume 10.7 + gap 1.6 + chip 25.2 + padding placă 7.9 = 45px. Rămân 5px.

   Ridic și numele de la 3cqh la 3.4cqh: pe un rând era înghesuit între cifre și
   trebuia mic, ca titlu al blocului își permite mărimea de pe desktop
   (12.5px la o placă de 66px = 19%; 3.4cqh la 16cqh = 21%). */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.5cqh !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 1.2cqh !important;
    width: auto !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #nameSouth {
    font-size: 3.4cqh !important;
    text-align: left !important;
    max-width: none !important;
}

/* Numele avea `max-width: 44%` din septica-mobile.css:324, ca să nu împingă
   cifrele pe rândul comun. Ca titlu propriu nu mai are cu ce concura. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-name {
    max-width: none !important;
}

/* Echivalentele pentru modul imersiv, ca să rămână la mărimea din modul
   normal — vezi principiul de la secțiunea 65 (cqh × 0.87). */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #nameSouth {
    font-size: 2.96vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    gap: 0.44vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-meta {
    gap: 1.04vh !important;
}


/* ═══ 68. RÂNDUL DE JOS — LATURI EGALE, MÂNA PE CENTRU ══════════════════════
   Măsurat pe captură, pe un ecran de 816px:

     crest 285px  ·  mâna 145px  ·  dock 265px
     centrul mâinii 427px, centrul ecranului 408px  →  19px decalaj la dreapta

   Cauza e în secțiunea 44: `grid-template-columns: auto minmax(0,1fr) auto`.
   Coloanele laterale se dimensionează pe CONȚINUT, deci ies inegale — crestul
   are trei chipuri plus nume, dock-ul are cinci butoane, n-au de ce să iasă
   la fel. Iar mâna, fiind coloana elastică din mijloc, nu cade pe centrul
   ECRANULUI: cade pe centrul a ce rămâne. Cu 20px diferență între laturi, iese
   cu 10px pe dreapta. Ochiul prinde asta imediat, chiar dacă nu știe ce.

   Cu `1fr auto 1fr` se inversează rolurile: laturile devin egale prin
   construcție (319px fiecare), iar mâna își ia lățimea din conținut și cade
   exact pe centru. Crestul se lipește la stânga în coloana lui, dock-ul la
   dreapta în a lui — deci marginile ecranului rămân curate, iar între ele e
   simetrie reală, nu întâmplătoare.

   `minmax(min-content, 1fr)` și nu `1fr` curat: dacă vreodată crestul are un
   nume foarte lung, coloana crește în loc să-i taie conținutul.

   Mâna primește `justify-self: center` explicit și își pierde `flex: 0 1 auto`
   de strângere: acum nu mai concurează cu laturile pentru spațiu, are coloana
   ei. Suprapunerea condiționată de la secțiunea 64 rămâne, pentru mâinile mari. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-south {
    grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr) !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
    justify-self: start !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #handSouth {
    justify-self: center !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    justify-self: end !important;
    min-width: 0 !important;      /* coloana îi dă lățimea, nu mai are nevoie de prag */
    max-width: none !important;
}


/* ═══ 69. BUTONUL DE FOCUS INTRĂ PE MASĂ ════════════════════════════════════
   În captură butonul „MĂREȘTE" stă la `left: 8px` cu 46px lățime, adică ocupă
   8-54px. Rama de lemn începe la ~60px — dar asta la 816px lățime. Marginea
   liberă e `(100% − 88cqw) / 2 = 6cqw`, iar pe un telefon mai îngust cei 6cqw
   scad sub 46px și butonul urcă pe lemn. Se vede și acum: colțul lui atinge
   rama.

   Nu-l mai las să plutească în marginea aia, care nu e garantată. Îl lipesc de
   marginea ECRANULUI, ca un limbă de sertar: rotunjit doar pe dreapta, fără
   ramă pe stânga. E un idiom recunoscut — un buton lipit de margine se citește
   ca „trage de aici", nu ca „element uitat pe masă". Și, mai important, nu mai
   depinde de cât spațiu lasă masa.

   Lățimea coboară la 38px ca să fie sigur în afara ramei pe orice telefon;
   înălțimea rămâne generoasă (72px), deci ținta de atins e mai MARE ca înainte
   (38×72 = 2736px² față de 46×46 = 2116px²), nu mai mică. */

.immersive-toggle-float {
    left: 0 !important;
    width: min(9vh, 38px) !important;
    height: min(17vh, 72px) !important;
    border-radius: 0 min(3.4vh, 14px) min(3.4vh, 14px) 0 !important;
    border-left: none !important;
    padding: 0 min(0.5vh, 2px) 0 0 !important;
}

/* Halo-ul era un cerc în jurul unui buton rotund; acum ar ieși pe stânga,
   în afara ecranului. Îl potrivesc la forma nouă. */
.immersive-glow {
    inset: -4px -6px -4px 0 !important;
    border-radius: 0 min(4vh, 16px) min(4vh, 16px) 0 !important;
}


/* ═══ 70. POPUP-UL DE CAPTURĂ — PREA MARE ȘI PE MASĂ ════════════════════════
   În captură, panoul „K♠ A♦ 8♦ 7♦ 7♣ J♥ 10♦ 9♥ (8 cărți, +2pt)" stă în
   dreapta sus, peste rama mesei, rupt pe două rânduri, lângă insigna lui
   sbot_toma185. Cu opt cărți luate devine cel mai mare obiect de pe ecran.

   Cotele lui (`septica-pro.css:24338`) sunt în `clamp()` legat de `vw`:

     .capture-chip  clamp(11px, 2.2vw, 14px)   → la 816px lățime: 14px, plafonat
     .capture-plus  clamp(10px, 1.8vw, 13px)   → 13px
     .capture-sum   clamp(11px, 2.2vw, 14px)   → 14px
     padding 5px 10px, gap 4px, radius 10px    → px ficși

   În portret plafoanele sunt potrivite: un ecran de 412px lățime cu un panou de
   14px e echilibrat. În peisaj ecranul e lat, deci `vw` trece de plafon și
   rămân cei 14px — dar acum sunt 14px pe o ÎNĂLȚIME de 412, adică pe o masă de
   trei ori mai scundă. Aceeași greșeală de unitate ca la tooltip (52) și la
   panou (53): `vw` și `vh` își schimbă rolurile la rotire.

   Le leg de `vh` și îl las să se rupă frumos în loc să se întindă: `flex-wrap`
   cu rânduri strânse și un plafon de lățime, ca să nu treacă niciodată peste
   jumătatea mesei.

   Poziția o las cum e. `.capture-popup-north` atârnă la `top: 100%` de insignă,
   iar după secțiunea 51 insigna stă pe ramă, deci panoul cade pe felt — acolo
   unde chiar e loc. Micșorat, nu mai deranjează. */

.capture-popup {
    padding: min(1.2vh, 5px) min(2.4vh, 10px) !important;
    gap: min(1vh, 4px) !important;
    border-radius: min(2.4vh, 10px) !important;
    flex-wrap: wrap !important;
    row-gap: min(0.5vh, 2px) !important;
    max-width: 42vw !important;
    justify-content: center !important;
}

.capture-chip {
    font-size: min(3.1vh, 13px) !important;
    padding: min(0.5vh, 2px) min(1.2vh, 5px) !important;
    border-radius: min(1.2vh, 5px) !important;
    gap: 1px !important;
}

.capture-plus {
    font-size: min(2.6vh, 11px) !important;
}

.capture-sum {
    font-size: min(3.1vh, 13px) !important;
    margin-left: min(0.5vh, 2px) !important;
}


/* ═══ 71. EMBLEMA DE PE FELT, CÂND SE JOACĂ ═════════════════════════════════
   În captură scrie „ȘE ♥ CA" — cartea jucată acoperă exact mijlocul cuvântului
   „ȘEPTICA". Nu e o poziționare greșită: emblema e centrată corect (secțiunea
   45), iar cartea cade tot pe centru. Problema e că se văd amândouă pe
   jumătate, iar un cuvânt tăiat la mijloc arată ca un defect, nu ca un fond.

   Pe desktop se întâmplă la fel, dar acolo cărțile jucate ocupă ~250px din
   1076 de felt și acoperă textul ÎN ÎNTREGIME — emblema dispare de tot cât se
   joacă și reapare între runde. Adică desktopul are, din întâmplare, o stare
   curată: ori se vede toată, ori deloc. În peisaj cartea are 40px pe un felt de
   ~700, deci acoperă doar mijlocul.

   Nu pot face cărțile mai mari, dar pot face emblema să se comporte ca ce este:
   un filigran. Când pe masă există cel puțin o carte, coboară la 30% opacitate
   și trece în spate. Se citește ca fond, nu ca text rupt. Când masa se golește,
   revine întreagă.

   `:has()` face condiția — e folosit deja în septica-pro.css (blocurile cu
   `body.game-active:has(.context-panel.active)`), deci suportul e presupus. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .table-felt:has(#tableCards .card) .tb-emblem-live {
    opacity: .3 !important;
    transition: opacity .25s ease !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .tb-emblem-live {
    transition: opacity .25s ease !important;
}


/* ═══ 72. CAPETELE CRESTULUI ȘI ALE DOCK-ULUI — PILULĂ ══════════════════════
   Măsurat, cu placa la ~45px înălțime (două rânduri, secțiunea 67):

     crest:  stânga 25px  →  semicerc (se plafonează la 23, adică jumătatea
                              înălțimii — deci capătul e rotund)
             dreapta 13px →  55% din cât ar trebui: colț teșit, nu rotund
     dock:   invers, 13px stânga / 25px dreapta

   Vine din desktop, care are `32px 16px 16px 32px` pe crest și oglinda pe dock.
   Acolo funcționează: placa e de trei ori mai lată decât înaltă, iar raportul
   2:1 dintre capete se citește ca o PERECHE — crestul „se deschide" spre
   dreapta, dock-ul spre stânga, iar mâna stă între ele.

   În peisaj perechea s-a rupt de la secțiunea 68: laturile sunt acum egale și
   simetrice, iar mâna cade pe centru. Într-un aranjament simetric, două capete
   teșite care se privesc nu mai semnifică nimic — arată ca o rază uitată la
   jumătate. Plus masa de deasupra e pilulă curată (999px), deci ochiul are cu
   ce compara.

   Le fac pilule, ambele capete rotunde. Trei forme, aceeași logică: masa
   pilulă, crestul pilulă, dock-ul pilulă.

   Padding-ul trebuie să crească odată cu raza. Cu un capăt rotund de 23px,
   conținutul lipit la 13px de margine intră în curbură — pastila „BALANȚĂ" din
   crest și „Runda 2/7" din dock ar fi tăiate pe diagonală. Le dau 6vh (~22px),
   cât raza.

   REVERT: șterge secțiunea, revin capetele asimetrice de la 27 și 18. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .seat-south #infoSouth .player-details,
.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    border-radius: 999px !important;
    padding-right: min(6vh, 22px) !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    border-radius: 999px !important;
    padding-left: min(6vh, 22px) !important;
    padding-right: min(6vh, 22px) !important;
}

/* Echivalentele pentru imersiv, ca să nu crească odată cu containerul —
   principiul de la secțiunea 65. */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details {
    padding-right: min(5.2vh, 22px) !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    padding-left: min(5.2vh, 22px) !important;
    padding-right: min(5.2vh, 22px) !important;
}


/* ═══ 73. CAPETELE INSIGNELOR OPONENȚILOR — ACEEAȘI PILULĂ ══════════════════
   Aceeași asimetrie ca la secțiunea 72, la capătul celălalt al mesei. Capsula
   de lemn a oponenților (secțiunea 31, și originalul din secțiunea 2b) are:

     border-radius: 999px 8px 8px 999px

   Stânga rotundă, sub avatar; dreapta 8px, adică un colț abia teșit — acolo
   unde stau spatele cărților. Capsula are 9cqh ≈ 28px înălțime, deci capătul
   rotund cere 14px rază: cei 8px sunt 57% din cât ar trebui.

   Vine de pe desktop, care are `40px 14px 14px 40px` la o insignă de 58px —
   exact același raport. Și, ca la 72, acolo se justifica prin lățime: insigna
   e de cinci ori mai lată decât înaltă și capătul teșit din dreapta arată ca o
   continuare a rândului de insigne. La noi insignele stau pe ramă (secțiunea
   51), separat una de alta, iar masa de sub ele e pilulă — deci capătul teșit
   nu mai continuă nimic.

   Le fac pilule, ca crestul și dock-ul. Acum toate cele cinci obiecte cu ramă
   de lemn de pe ecran au aceeași formă: masa, cele trei insigne, crestul,
   dock-ul.

   Padding-ul din dreapta creșteau la 4.5cqh (~14px, cât raza). Fără el, spatele
   cărților — care stă exact în capătul ăla, după secțiunea 20 — ar intra în
   curbură și s-ar tăia pe diagonală. Ăsta e și motivul pentru care 8px a fost
   pus la început: cu padding mic, o rază mare taie conținutul. Se reglează
   împreună, ca padding-ul și inset-ul chenarului de la secțiunea 11. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) {
    border-radius: 999px !important;
    padding: 0.3cqh 4.5cqh 0.3cqh 0.3cqh !important;
}

/* În imersiv insignele nu cresc — același principiu ca la 65: rândul de sus e
   cronică, nu conținut. 9cqh × 0.87 = 7.8vh, deci raza cerută e 3.9vh. */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) {
    padding: 0.26vh 3.9vh 0.26vh 0.26vh !important;
}


/* ═══ 74. CADRUL DE DEDESUBT ȘI AVATARUL ÎN CAPĂT ═══════════════════════════
   Sunt DOUĂ plăci suprapuse la crest, nu una. De jos în sus:

     1. `#infoSouth` — e ȘI `.player-info`, deci primește placa din
        `septica-pro.css:25202`: bordură de 3px auriu în degrade și
        `border-radius: 14px`. Oponenților li se golește (pro:25224, mobilul și
        secțiunea 2 a ta); sudului NU. Deci cadrul ăsta e activ, dedesubt.
     2. `.player-details` — placa interioară, devenită pilulă la secțiunea 72.
     3. `#avatarSouth` — cercul cu inel auriu.

   Cu (2) pilulă și (1) la 14px, colțurile cadrului de dedesubt ies pătrate pe
   sub curbă — exact ce se vede în captură, jos-stânga. Pe desktop nu deranja:
   acolo (2) avea 32/16px, deci cele două rame se citeau ca straturi
   concentrice, nu ca o pilulă închisă într-o cutie.

   Îl fac pilulă și pe el. Trei straturi, trei forme rotunde, concentrice.

   ÎNCADRAREA AVATARULUI, cu socoteala:

     cadrul are 16cqh = 50px      →  raza capătului = 8cqh = 25px
     avatarul are 13.5cqh = 42px  →  raza lui = 6.75cqh = 21px

   Ca centrul avatarului să cadă exact pe centrul capătului rotund, distanța de
   la marginea cadrului trebuie să fie diferența razelor: `8cqh − 6.75cqh =
   1.25cqh`, adică 3.9px. Acum e `1cqw` = 9.2px, deci avatarul stă cu 5.3px
   prea la dreapta — de-aia nu se așază în capăt, ci pare împins spre interior.

   `1cqw` era o cotă pe LĂȚIME într-un loc unde totul depinde de ÎNĂLȚIME. Aici
   nu e o greșeală de plafon sau de unitate rotită, e pur și simplu axa greșită:
   raza capătului vine din înălțimea cadrului, deci și inseturile care se
   potrivesc cu ea trebuie să vină de acolo.

   Padding-ul din dreapta, la fel: capătul din dreapta are aceeași rază de 8cqh,
   iar placa interioară trebuie să stea în el, nu să-l taie. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
    border-radius: 999px !important;
    padding-left: 1.25cqh !important;
    padding-right: 1.25cqh !important;
}

/* În imersiv cadrul rămâne la mărimea din modul normal (principiul secțiunii
   65): 16cqh × 0.87 = 13.9vh, deci raza capătului 6.95vh, avatarul 5.875vh,
   diferența 1.08vh. */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
    padding-left: 1.08vh !important;
    padding-right: 1.08vh !important;
}


/* ═══ 75. MEDALION CU CRONOMETRU ÎN CAPĂTUL DOCK-ULUI ═══════════════════════
   Ideea ta, și se așază singură: dock-ul are exact aceeași înălțime ca crestul
   (16cqh, secțiunea 5), deci capătul lui are aceeași rază de 8cqh. Un cerc de
   13.5cqh — cât avatarul — se încadrează cu aceeași formulă din secțiunea 74:
   inset = diferența razelor = `8cqh − 6.75cqh = 1.25cqh`.

   Rezultatul e o simetrie reală, nu decorativă:

     crest:  (medalion)  nume
                         chipuri
     dock:   RÂNDUL <cine>            (medalion)
             Runda · butoane

   Două pilule, fiecare cu un medalion în capătul dinspre marginea ecranului,
   iar mâna exact la mijloc între ele.

   ATENȚIE, ca să știi ce cumperi: pe desktop NU există. Acolo cronometrul e
   text în rândul din mijloc, lângă „Runda X/Y". Asta e o adăugire, nu o
   paritate — singura din tot fișierul. Am ținut-o strict la ce se putea face
   fără marcaj nou: mut `.td-timer` din flux în capătul rotund și îl îmbrac cu
   ACEEAȘI ramă dublă ca avatarele (secțiunea 24: aur deschis 2px, bronz încă
   2px), ca să se citească drept pereche, nu drept obiect nou.

   CE NU POT FACE: inelul nu se golește pe măsură ce scade timpul. Cronometrul
   de pe avatar (`.tab-water-timer`) face asta, dar prin SVG desenat din JS. Ca
   inelul de aici să se golească, JS-ul ar trebui să scrie o variabilă
   (ex. `--td-progress: 0.4`) pe element, iar eu aș putea desena restul cu
   `conic-gradient`. Zi-mi dacă vrei și îți scriu și partea de CSS, gata să
   primească variabila.

   Pictograma de ceas o ascund: într-un cerc de 42px, „00:38" plus o iconiță de
   9px se calcă. Cifra rămâne singură, mai mare — se citește de la distanță.

   `#tb-dock-live2` primește `position: relative`: mobilul îl pune `static`
   (linia 327), iar fără context de poziționare medalionul absolut ar fugi în
   pagină.

   REVERT: șterge secțiunea. Cronometrul revine în rândul din mijloc, lângă
   „Runda", și dock-ul își recapătă padding-ul de la 72. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    position: relative !important;
    padding-right: 16.25cqh !important;   /* 1.25 inset + 13.5 medalion + 1.5 aer */
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-timer {
    position: absolute !important;
    right: 1.25cqh !important;            /* = 8cqh − 6.75cqh, ca la secțiunea 74 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 13.5cqh !important;
    height: 13.5cqh !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 3.4cqh !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    color: #ffd76a !important;
    background: radial-gradient(circle at 34% 30%, rgba(58, 40, 18, .96), rgba(20, 13, 5, .99)) !important;
    /* aceeași ramă dublă ca avatarele, secțiunea 24 */
    box-shadow:
        0 0 0 2px rgb(244, 215, 132),
        0 0 0 4px rgb(110, 82, 29),
        0 2px 6px rgba(0, 0, 0, .6),
        inset 0 1px 2px rgba(255, 235, 195, .12) !important;
}

/* ceasul nu încape lângă cifră într-un cerc de 42px */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-timer .material-symbols-rounded {
    display: none !important;
}

/* Rândul din mijloc rămâne cu „Runda X/Y" singur — nu mai are cu ce să facă
   `space-between`, deci îl centrez sub eticheta de sus. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-mid {
    justify-content: center !important;
}

/* Imersiv: medalionul nu crește odată cu containerul (principiul secțiunii 65).
   13.5cqh × 0.87 = 11.75vh, inset 1.08vh, padding 14.1vh, cifra 2.96vh. */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
    padding-right: 14.1vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-timer {
    right: 1.08vh !important;
    width: 11.75vh !important;
    height: 11.75vh !important;
    font-size: 2.96vh !important;
}


/* ═══ 76. INELUL DUBLAT ÎN CAPĂTUL DIN STÂNGA ═══════════════════════════════
   Vina secțiunii 74. Ce se vede în capăt, de la centru spre exterior:

     1. poza avatarului                       rază 21px
     2. inelul lui: aur 2px + bronz 2px       rază 21-25px   (secțiunea 24)
     3. bordura aurie a lui `#infoSouth`, 3px rază 22-25px   (pro:25204)

   Două inele aurii concentrice, practic suprapuse, despărțite doar de firul
   întunecat dintre ele. Exact ce arăți în captură.

   Și cauza e chiar ce am „reparat" la 74: am centrat avatarul în capătul rotund
   al cadrului, ca să se încadreze frumos. Dar centrarea e exact ce face cele
   două inele CONCENTRICE. Pe desktop nu se întâmplă fiindcă avatarul NU e
   centrat în capătul cadrului — iese peste marginea lui, deci arcul cadrului
   trece pe SUB avatar, nu în jurul lui. Cele două cerințe se bat: ori avatarul
   e încadrat în capăt, ori cadrul nu se vede în jurul lui. Nu pot amândouă.

   Aleg încadrarea, fiindcă asta ai cerut și fiindcă acum face pereche cu
   medalionul din dock (secțiunea 75), care stă tot în capătul lui. Deci scot
   cadrul: `#infoSouth` redevine ce sunt și scaunele oponenților — cutie de
   aranjare, fără decor.

   Rămâne un singur inel pe avatar și o singură placă în jur, `.player-details`.
   Trei straturi devin două, iar medalioanele de la ambele capete ale rândului
   arată identic: cerc cu ramă dublă, așezat în capătul unei pilule.

   Desktopul are stratul în plus, dar acolo el NU se citește ca inel — e o ramă
   dreptunghiulară de 14px în jurul unui grup, cu avatarul călare pe marginea ei.
   Odată ce tot a devenit pilulă concentrică (72, 73, 74), același strat nu mai
   poate arăta decât ca duplicat. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ═══ 77. BUTOANELE DIN FOOTER, LIPITE DE MARGINEA DE JOS ═══════════════════
   Banda de sub butoane nu e o margine pusă de cineva — e spațiul lăsat de
   centrare. Secțiunea 6 dă barei `height: 13vh` (podea 40, plafon 56) și
   butoanelor `9vh` (plafon 40), cu `align-items: center`. Diferența se împarte
   egal sus și jos:

     iPhone 15 (412px):  bara 53.6px, butoanele 37.1px  →  8.2px gol jos
     Galaxy S9+ (315px): bara 41.0px, butoanele 28.4px  →  6.3px gol jos

   Deci nu am de șters o margine, am de strâns bara pe conținutul ei. Fac trei
   lucruri deodată, fiindcă altfel apar efecte urâte:

   a) Bara ține exact înălțimea butoanelor, plus decupajul de jos. Pe iPhone
      culcat indicatorul de acasă e tot jos și are ~21px — dacă lipesc butoanele
      la marginea fizică fără să-l socotesc, degetul nimerește gestul de sistem,
      nu butonul. `padding-bottom: safe-area-inset-bottom` îl lasă liber, iar pe
      telefoanele fără indicator valoarea e 0 și butoanele chiar ating marginea.

   b) Colțurile de jos ale butoanelor se pătrățesc. O pastilă complet rotundă
      lipită de marginea ecranului arată tăiată; cu partea de jos dreaptă se
      citește ca filă care urcă din margine — și e același gest ca la butonul de
      Focus, lipit de marginea din stânga (secțiunea 69).
      Dacă preferi pastilele întregi, șterge blocul `border-radius` de mai jos.

   c) Rezerva scenei se micșorează odată cu bara. Secțiunea 1 scade `13vh + 22px`
      din înălțime pentru bară; dacă bara are acum `min(9vh, 40px)`, cei 13vh
      rămân o rezervă pentru ceva ce nu mai există. Scena câștigă 16px pe iPhone
      15 și 13px pe S9+, adică încă ~11px de masă după raportul 0.71.
      Același lucru la secțiunea 8, care rezervă `13vh + 24px` pentru bară în
      sala de așteptare. */

/* (a) + (b) */
body.game-active:not(.room-waiting) .nav-rail {
    height: calc(min(9vh, 40px) + var(--safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 2cqw var(--safe-area-inset-bottom, 0px) !important;
    align-items: flex-end !important;
    border-radius: 0 !important;
}

body.game-active:not(.room-waiting) .nav-bar-btn {
    align-self: stretch !important;
    height: auto !important;
    max-height: none !important;
    border-radius: min(2.4vh, 10px) min(2.4vh, 10px) 0 0 !important;
}

/* (c) — rezerva urmează bara reală */
body.game-active:not(.room-waiting) .game-canvas,
body.game-active:not(.room-waiting) .game-area {
    height: calc(100vh - min(9vh, 40px) - var(--safe-area-inset-bottom, 0px) - 22px) !important;
    max-height: calc(100vh - min(9vh, 40px) - var(--safe-area-inset-bottom, 0px) - 22px) !important;
}

body.room-waiting .game-area {
    padding-bottom: calc(min(9vh, 40px) + var(--safe-area-inset-bottom, 0px) + 12px) !important;
    scroll-padding-bottom: calc(min(9vh, 40px) + var(--safe-area-inset-bottom, 0px) + 12px) !important;
}


/* ═══ 78. AVATARUL OPONENȚILOR ÎN CAPĂTUL CAPSULEI ══════════════════════════
   Da, se poate — dar la oponenți cauza e alta decât la crest. Nu e dublare de
   inele: `.player-info` și `.player-details` sunt deja golite (secțiunile 2 și
   14), deci există un singur inel. Problema e că nu ÎNCAPE:

     capsula 9cqh = 28.3px   →  raza capătului 4.5cqh = 14.1px
     bordura ei 1.2px        →  raza INTERIOARĂ        12.9px
     avatarul 7cqh = 22px    →  raza                   11.0px
     inelul dublu 2px+2px    →  raza cu inel           15.0px

     15.0 > 12.9  →  inelul iese cu 2.1px din capsulă, pe fiecare parte.

   Și e prea gros. Inelul e desenat în px ficși (secțiunea 24, portat de pe
   desktop), deci grosimea nu scade odată cu avatarul:

     desktop:    4px pe un avatar de 40px  =  10%
     crest:      4px pe un avatar de 42px  =  9.5%
     oponenți:   4px pe un avatar de 22px  =  18%   ← dublu

   De-aia arată gros și ieșit, nu așezat. Aceeași greșeală de fond ca la `--u`,
   dar în oglindă: acolo o cotă relativă se prăbușea, aici una absolută rămâne
   pe loc când elementul se micșorează.

   Transpun proporția care funcționează la crest și la dock: medalionul e 84% din
   înălțimea pilulei, iar inelul 1.27/16 din ea. La 9cqh:

     avatar cu tot cu inel  →  7.59cqh
     inel                   →  0.71cqh ≈ 2.2px  (1px aur + 2px bronz cumulativ)
     avatar propriu-zis     →  7.4cqh
     inset din capăt        →  raza capătului − raza cu inel = 4.5 − 4.05 = 0.45cqh

   Rezultat: cerc cu inel subțire, așezat exact în capătul rotund, cu firul
   capsulei vizibil în jurul lui — la fel ca avatarul din crest și ca medalionul
   cu cronometru din dock.

   ȘI O CORECȚIE: comentariul secțiunii 73 spune că insignele „nu cresc în
   imersiv". Nu era adevărat — acolo am legat de `vh` doar padding-ul, nu și
   `height`, care rămăsese `9cqh` din secțiunea 2 și creștea cu 23%. Acum o fac
   să fie adevărat. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-avatar {
    width: 7.4cqh !important;
    height: 7.4cqh !important;
    min-width: 7.4cqh !important;
    min-height: 7.4cqh !important;
    max-height: 7.4cqh !important;
    flex: 0 0 7.4cqh !important;
    /* inel scalat: 0.71cqh total, ca la crest și la dock */
    box-shadow:
        0 0 0 1px rgb(244, 215, 132),
        0 0 0 2px rgb(110, 82, 29),
        0 1px 4px rgba(0, 0, 0, .55) !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) {
    padding-left: 0.45cqh !important;
}

/* inelul verde de tură urmează aceeași grosime, altfel sare din desen */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east).active-turn .player-avatar,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east).active-turn img {
    box-shadow:
        0 0 0 1.5px rgba(124, 242, 164, .95),
        0 0 8px rgba(74, 222, 128, .6),
        0 1px 4px rgba(0, 0, 0, .6) !important;
}

/* bulina de status urmează avatarul, nu 7cqh de la secțiunea 21 */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-status {
    width: 2.6cqh !important;
    height: 2.6cqh !important;
}

/* Imersiv: insignele rămân la mărimea din modul normal — 9cqh × 0.87 = 7.83vh.
   Asta lipsea de la secțiunea 73, unde am legat doar padding-ul. */
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) {
    height: 7.83vh !important;
    padding-left: 0.39vh !important;
}
body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .player-avatar {
    width: 6.44vh !important;
    height: 6.44vh !important;
    min-width: 6.44vh !important;
    min-height: 6.44vh !important;
    max-height: 6.44vh !important;
    flex: 0 0 6.44vh !important;
}


/* ═══ 79. INELUL CARE SE GOLEȘTE — DE CE NU SE MAI VEDE ═════════════════════
   Ai dreptate, și am ratat-o la secțiunea 22. Inelul de timp e construit din
   patru straturi (`septica-pro.css:25337`):

     .tab-water-bg    disc navy OPAC (#0a1628), acoperă poza
     .tab-water-fill  umplere albastră care scade (`height` din JS)
     .tab-water-arc   inelul SVG care se golește (`stroke-dashoffset` din JS)
     .tab-water-num   secundele

   Conturul SVG e desenat CENTRAT pe traseul cercului, deci jumătatea lui
   exterioară cade în afara cutiei. Iar avatarul are `overflow: hidden` — din
   `pro:6215`, reconfirmat de secțiunea 43 — deci jumătatea aia se TAIE
   întotdeauna. Ce rămâne vizibil e mereu jumătate de contur:

     desktop        contur 4.0  →  rămân 2.00px pe un cerc de 40px
     crest peisaj   contur 2.5  →  rămân 1.25px pe un cerc de 42px
     oponent peisaj contur 2.5  →  rămân 1.25px pe un cerc de 23px

   Pe desktop cei 2px se citesc. La oponent, 1.25px pe un cerc de 23 e fir de
   păianjen. Secțiunea 22 a coborât conturul de la 4 la 2.5 socotind proporția
   cu diametrul — dar am uitat că din el se vede doar jumătatea interioară.
   Proporția corectă se face pe ce RĂMÂNE, nu pe ce se declară.

   Două lucruri:

   a) `overflow: visible` pe avatar cât timp e rândul lui. Atunci conturul se
      vede întreg, nu pe jumătate — deci de la 1.25px sar direct la 2.5px, fără
      să îngroș nimic. Poza rămâne rotundă: are `border-radius: 50%` propriu din
      secțiunea 43, nu depindea de decupajul părintelui.
      Doar pe `.active-turn` — în repaus `overflow: hidden` rămâne, ca inelul
      auriu să nu aibă pe unde scăpa.

   b) Conturul urcă la 3.2, adică 14% din cercul de 23px. Desktopul are 10% pe
      un cerc de 40, dar acolo 10% înseamnă 4px absoluți; la 23px, 10% ar fi
      2.3px, prea puțin ca să se distingă albastrul de navy-ul de dedesubt.
      Ăsta e singurul loc unde mă abat deliberat de la proporția desktopului, și
      o fac pentru lizibilitate.

   Secundele: desktopul are 17px pe un cerc de 40 = 42%, cu eticheta „SEC"
   dedesubt. Eu am ascuns eticheta la 22 (la 23px ar fi ieșit 4.6px, ilizibilă),
   deci cifra rămâne singură și își poate lua 46% — cât ocupau împreună. */

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east).active-turn .player-avatar {
    overflow: visible !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-arc .arc-bg,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-arc .arc-fg {
    stroke-width: 3.2 !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-arc {
    overflow: visible !important;
}

.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east) .tab-water-num .tw-sec {
    font-size: 3.4cqh !important;   /* 46% din avatarul de 7.4cqh */
}

/* Inelul verde de tură (secțiunea 78) stă pe ACELAȘI cerc ca inelul de timp.
   Cu conturul acum întreg, cele două se ating și redevine problema de la 76.
   Îl trag în afara conturului, ca inel exterior, nu concentric peste el. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east).active-turn .player-avatar,
.game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat:is(.seat-north, .seat-west, .seat-east).active-turn img {
    box-shadow:
        0 0 0 2px rgba(124, 242, 164, .9),
        0 0 7px rgba(74, 222, 128, .55) !important;
}

/* Cronometrul trebuie să fie peste poză, nu sub ea. Pe desktop iese din
   `z-index: 3` al lui `.tab-water-timer` față de o poză nepoziționată — dar
   secțiunea 43 i-a dat pozei `position: static`, iar mobilul dă avatarului
   `z-index: 2`, deci contextul de stivuire e al avatarului. Îl scriu explicit,
   ca să nu depindă de lanțul ăsta. */
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tab-water-timer {
    z-index: 5 !important;
}
.game-play-container:is(.game-2p, .game-3p, .game-4p) .tab-water-num {
    z-index: 6 !important;
}



    /* ═══════════════════════════════════════════════════════════════════════════
       ISTORIC — ce era rezolvat pe jumătate și s-a închis cu cauza reală

       Primele versiuni ale acestui fișier reglau `top`/`bottom` pe masă din
       valori ghicite, câte una pe rând, fără să găsească de ce nu se potriveau:
       28px suprapunere → 22.7 → 51.7 → 47.6 → încă 17px pe ecrane scunde. Cauza
       nu era în masă, era în `.player-seat.seat-south`: randul crest/dock din
       grila lui rămăsese la `--ui * 20` (~28cqh) deși conținutul are 10cqh —
       diferența împingea toată mâna mai jos, indiferent ce valoare primea masa.
       Fixul e în secțiunea 3c. Cu el, suprapunerea a dispărut pe ambele ecrane
       testate, nu doar pe cel pe care s-a reglat.

       Masa era și dreptunghi plat, nu oval — secțiunea 3b adaugă `border-radius:
       999px` pe `.tb-rail-live`, ca pe desktop.

       VERIFICAT, cu măsurători și captură de ecran la fiecare pas:
         · iPhone 15 peisaj (915×412, container 332px), 4P: masă 780×176,
           suprapunere adversari −4.1px, suprapunere mână −6.5px (ambele = gol)
         · iPhone 15 peisaj, 2P: masă 780×176, aceleași rezultate
         · Galaxy S9+ peisaj (654×315, container 252px), 4P: masă 575×134,
           suprapunere adversari −2.9px, suprapunere mână −4.5px

       MĂSURAT ÎNAINTE / DUPĂ, iPhone 15 culcat (910×407):
           masa      98×100px  (11% lățime, dreptunghi)  →  780×176px (90%, oval)
           cărți     20×28px                             →  47×66px
           adversari 14.8% înălțime                      →  9%
           blazon    21.5%                               →  10%
           bara jos  118px                               →  53px (13%)
           scena     283px                               →  333px

       ═══════════════════════════════════════════════════════════════════════════
       CE NU E REZOLVAT ÎNCĂ

       1. Tabletele în peisaj (iPad 1080×810, tabletă 1280×800) NU intră în acest
          fișier: au peste 560px înălțime, deci rămân pe regulile de portret din
          `septica-mobile.css`. De verificat dacă acolo e nevoie de altceva sau
          merge așa cum e.

       2. Bulele de chat ale boților trec peste masă. Nu ține de geometria mesei,
          ci de nivelul (z-index) sau poziționarea bulei — de investigat separat.

       3. Raportul mesei rămâne alungit (~4.4) față de cel de pe desktop (~1.4).
          Pe un ecran de 315-412px înălțime, alături de insignele adversarilor,
          cărți, blazon și bară, un oval cu raportul de pe desktop nu are loc —
          ar cere fie scoaterea unei benzi (ex: contopirea blazonului cu dock-ul),
          fie derulare pe verticală. E o decizie de aranjament, nu un reglaj.
       ═══════════════════════════════════════════════════════════════════════════ */

    /* ═══════════════════════════════════════════════════════════════════════════
       ADDENDUM (secțiunile 9-13) — DE CE ARĂTA „fără stil de desktop"

       Presupunerea de lucru era că `septica-mobile.css` sărăcește decorul. Nu o
       face: antetul lui spune „culorile/gradienții păstrați" și e adevărat, am
       verificat toate cele 86 de declarații decorative din el. Problema e alta —
       decorul e COMPLET, dar toate cotele lui sunt scrise în `--u` / `--ui`, iar
       în peisaj `--u` stă blocat pe podeaua de 1px. Deci desenul e acolo, la
       scara 1:20.

       Ce s-a reparat, în ordinea impactului vizual:
         11 · chenarul lemn/felt avea raportul INVERSAT (23:77 în loc de 60:40),
              fiindcă secțiunea 3 a mutat padding-ul pe cqh dar inset-ul a rămas
              în --u. Ăsta singur schimba masa cel mai mult.
         12 · feltul avea 1 strat de fundal în loc de 6 — lipsea vigneta radială,
              de-aia arăta plat.
          9 · rama avea nituri de 1.2px (desktop: 14px) și umbră de 2/5px
              (desktop: 24/50px), plus 4 straturi lipsă din 12.
         13 · emblema centrală era de 3px — exista, dar nu se vedea.
         10 · sclipirea animată de pe lemn era stinsă cu `display:none`.

       SCAUNELE (14-18), verificate separat, scaun cu scaun:
         14 · oponenții aveau DOUĂ rame una în alta — capsula de lemn din 2b pe
              dinafară și placa aurie a mobilului pe `.player-details` pe dinăuntru.
              Desktopul are una singură. Efect secundar al secțiunii 2b.
         15 · consecință a lui 14: indicatorul „e rândul lui" stătea pe placa
              tocmai golită. Mutat pe capsulă + inel verde pe avatar.
         16 · scaunul de jos nu avea apron de lemn (desktop: 7 straturi + inel
              auriu). Pus pe `::before`, doar pe rândul crest/dock, nu sub cărți.
         17 · `#handSouth` nu mai era tavă, doar cărți libere. Rama pusă ca inel
              de box-shadow, nu `border` — un border de 3px ar fi mâncat marja ta
              măsurată de 6.5px între masă și mână.
         18 · dock-ul pierduse pastila asimetrică (`16px 32px 32px 16px`), rămăsese
              cu radius egal.

       OPONENȚII, inventar element cu element (19-22):
         19 · chip-ul cu numărul de cărți era ascuns de mobil, desktopul îl are.
         20 · cărțile oponenților erau scoase AFARĂ din insignă (`position:absolute;
              top:100%`) și făcute de 5.5px. Pe desktop stau în capsulă, în rând.
              DE VERIFICAT: sunt două containere în cod, `.seat-hand` (pe care l-ai
              stilizat la 2c) și `.player-hand` (cel de pe desktopul de azi). Din
              CSS nu se poate spune care e cel viu — secțiunea 20 îl acoperă pe al
              doilea și e inertă dacă tu ai avut dreptate.
         21 · bulina de status era la 14px de bază, pe un avatar de 23px — 60% din
              față. Nimeni n-o scalase, fiindcă e aceeași valoare peste tot.
         22 · cronometrul de tură de pe avatar avea cifra de 15px și eticheta de
              8px într-un cerc de 23px.

       RUNDA 23-30 — diferență calculată, nu citită cu ochiul: am simulat cascada
       în ambele contexte (desktop 1440×900 vs peisaj 915×412, cu toate cele patru
       fișiere și media queries evaluate) și am comparat proprietatea câștigătoare
       pentru fiecare element. 40 de neconcordanțe reale de stil. Din ele:

         · DOUĂ ERORI ALE MELE, corectate:
           17 — RETRASĂ. Pusesem o tavă la `#handSouth` copiind
                `septica-pro.css:25296`. Regula aia e moartă: pasul final o
                suprascrie la 25559 cu „FĂRĂ ramă/umbră/padding". Mobilul avea
                dreptate, eu am citit o regulă suprascrisă.
           15 — comentariul spunea că indicatorul de tură e cod mort pe desktop.
                Adevărat doar pentru selectorul de la 25233; la 25499 există o
                variantă pe ID care funcționează. Valorile aliniate la ea.

         · restul, diferențe reale găsite de calcul:
           23 · feltul avea bordură maro de 2px (3e); desktopul Tabinet are
                `border: none` și alte umbre interioare
           24 · avatarele oponenților aveau UN inel; desktopul are DOUĂ
                concentrice (aur deschis + bronz)
           25 · cărțile oponenților nu se suprapuneau; desktopul le ține ca pachet
           26 · spatele cărților la oponenți era negru cu hașură, nu lemn ca
                teancul de pe masă — două modele pe același ecran
           27 · crestul de jos avea rama aurie netedă; desktopul are fibră de lemn
                peste degrade și bordură de trei ori mai groasă
           28 · dock-ul era `display: block`, deci `gap`-ul reglat la secțiunea 5
                nu făcea nimic
           29 · cărțile jucabile aveau halou verde cu contur AURIU; desktopul are
                contur verde de 1.6px
           30 · numele meu nu era cu majuscule

       RUNDA 31-33 — audit de SPECIFICITATE, pornit de la o captură de ecran.
       Diferența de valori (23-30) nu prinde regulile care nu se aplică deloc.
       Am comparat fiecare declarație din fișierul ăsta cu cea a mobilului pentru
       același element, cu specificitatea calculată. 69 de declarații inerte:

         31 · TOATĂ secțiunea 2b (capsula de lemn a oponenților) era inertă din
              prima zi: 3 clase față de 4 la mobil. Nu s-a desenat niciodată.
              Iar secțiunea 14 a golit între timp placa mobilului — singura care
              chiar se vedea — deci oponenții au rămas complet fără ramă. Cauza e
              reparată la specificitate egală; 14 rămâne, e corectă față de desktop.
         32 · `.player-info` are `flex: 1 1 auto; width: 100%` de la mobil și se
              întinde pe tot locul, împingând cărțile oponenților la capătul din
              dreapta. Desktopul are `flex: 0 0 auto; width: auto`, dar pierde la
              egalitate fiindcă septica-pro.css se încarcă înaintea mobilului.
         33 · secțiunea 4 (`border-radius: 10%` pe cărți) era inertă: mobilul o
              pune pe `.card.tbf`, cu o clasă în plus. Colțurile au rămas la 7%/5%.

       RUNDA 34-35 — din compararea celor două capturi, desktop lângă peisaj:
         34 · subtitlul „ȘEPTICĂ ROMÂNEASCĂ" din header e șters explicit de
              septica-mobile.css:441. Pe desktop e ascuns doar sub 576px, iar
              peisajul are ~915px. Singura secțiune care poate crește headerul —
              se șterge prima dacă masa iese jos.
         35 · teancul de cărți e tăiat de rama ovală. 3d l-a centrat corect pe
              verticală, dar l-a lăsat la `5cqh` de margine — o cotă legată de
              ÎNĂLȚIME, în timp ce tăierea vine din curbura pe LĂȚIME. Trecut pe
              4% din lățime, raportul măsurat pe desktop.

       RUNDA FINALĂ — verificare completă, inclusiv pseudo-elemente, animații,
       etichete `content:` și elemente ascunse. Rezultat: 35 de diferențe rămase,
       dintre care UNA singură a fost o greșeală de-a mea:

         32 · plafonul de lățime al locurilor era 46cqw. Locurile stau la 33%
              distanță unul de altul, deci capsulele s-ar fi suprapus la nume
              lungi. Coborât la 31cqw.

       Celelalte 34 sunt INTENȚIONATE și rămân așa:
         · footerul (11 reguli) — tot ce ține de `.nav-bar-btn` pe desktop stă în
           `@media (min-width: 992px)`, cu comentariul tău de la linia 25630:
           „4 butoane+fab la lățime fixă nu încap pe telefon"
         · `backdrop-filter: --glass-blur-touch` (8 elemente) — vine din blocul
           `(hover:none) and (pointer:coarse)` din septica-pro.css, reducere
           deliberată de performanță pe touch; pe felt oricum nu se vede, fondul
           e opac
         · `.game-play-container` și `.main-content`: `grid`/`flex` → `block` —
           ăsta e chiar temeiul aranjamentului mobil, adică motivul pentru care
           există fișierul de față
         · `.lobby-ad-card: none` — coloanele promo HOLDEM/TABINET din captura de
           desktop, corect ascunse pe telefon
         · `.context-panel` fără rază și umbră — pe mobil e panou pe tot ecranul
         · `.mp-table-overlay` / `.tb-felt-popover` — raze în `--ui`, dar `--ui` e
           plafonat la 4.6px, deci ies 18-20px față de 16-20px pe desktop.
           Verificat: diferența e sub un pixel, nu merită atinsă.

       Animații: zero diferențe — nicio animație de pe desktop nu e oprită.
       Etichete `content:`: zero diferențe.
       Elemente ascunse: doar locurile nefolosite la 2P/3P, pe care le ascunde și
       desktopul.

       RUNDA 36-37 — din captura de peisaj de după secțiunile 31-35.
       CE MERGE ACUM, confirmat vizual: capsulele de lemn ale oponenților (31),
       subtitlul din header (34), apronul de sub jucător (16), emblema de pe masă
       (13), niturile și umbra ramei (9), chenarul subțire (11), crestul cu fibră
       de lemn (27).
       CE A MAI RĂMAS:
         36 · oponenții arată UN chip; desktopul are trei (balanță aurie, cărți,
              puncte). 19 deblochează doar `nth-child(2)`, singurul ascuns explicit
              de mobil — deci al treilea cade din altceva, probabil tăiat de
              `overflow`. Atacate ambele cauze deodată.
         37 · potul și teancul se bat pe colțul din dreapta. Pe desktop nu se
              întâmplă: acolo potul stă centrat sub cărți, unde în peisaj nu mai e
              loc (de-aia 3f l-a mutat lateral). Potul micșorat și dus la 16%,
              teancul la 5%. Ăsta e singurul loc unde desktopul nu poate fi
              copiat — constrângerea apare doar pe masă scundă.

       RUNDA 38 — ultimul loc unde `--u` mai era ascuns.
       Confirmate acum vizual, în plus față de runda trecută: cele trei chipuri ale
       oponenților (36), teancul întreg cu „16" dedesubt și potul micșorat care nu-l
       mai acoperă (37).
         38 · fața cărților. Simbolul central și indicii din colț sunt legați de
              `--u` în patru reguli (mobile:152,154,302,304): 8px simbol și 3.4px
              indici pe o carte de 40px, cu indicii lipiți de muchie. Nu se citește
              valoarea cărții. Puse pe procentele de pe desktop (54% / 15% / 6%).

       RĂMÂNE DE DECIS, nu de reparat: dock-ul ocupă 47% din lățimea apronului,
       fiindcă grila mobilului e `"crest dock"` la 50/50. Desktopul îi dă 190px
       ficși, adică 13%, cu mâna între crest și dock. În peisaj mâna e pe rândul de
       deasupra, deci strâmtarea dock-ului ar lăsa lemn gol la mijloc. Se poate
       face cu `max-width` plus `justify-self: end`, dar ar trebui reglat din nou
       `.td-*` de la secțiunea 5c. N-am atins nimic — e o alegere de aranjament,
       nu o regulă pierdută.

       RUNDA 39 — măturare exhaustivă: TOATE cele 61 de declarații din
       septica-mobile.css legate de `--u`/`--ui` care nu erau deja acoperite aici.
       Rezultat: doar două lucruri de făcut.

         15 (corectat a doua oară) · capsula aurie aprinsă pe oponentul la rând e o
              invenție a mobilului. Desktopul are DOAR inelul verde de pe avatar
              (25499); capsula de lemn rămâne neschimbată. În captură se vedeau
              amândouă, iar galbenul pe toată insigna nu seamănă cu desktopul.
              Haloul mobilului stins explicit — 14 golea doar starea de repaus,
              `.active-turn` fiind mai specific trecea peste ea.
         39 · monograma ♠ de pe spatele cărților, la 1.5px. Stinsă, ca `::after`
              la secțiunea 26.

       RESTUL celor 61 sunt legate de `--ui`, care are plafon la 4.6px și podea la
       2.9px — deci NU se prăbușesc ca `--u`. Verificate una câte una față de
       desktop: `.tb-pill-t` dă 13.8px față de 13px, `.meta-item` 13.3px, iconițele
       11.5px față de 12px, avatarul sud 39px față de 60px pe un rând de 53px.
       Toate sunt în toleranță sau justificate de înălțimea rândului. `.mp-*` țin de
       sala de așteptare, în afara mesei.

       RUNDA 40-42 — comparație cadru cu cadru, peisaj lângă desktop.
       CONFIRMATE VIZUAL acum: fața cărților se citește (38), oponentul la rând are
       doar inelul verde, fără chenarul galben (15 corectat), cele trei chipuri pe
       fiecare oponent, teancul și potul nu se mai suprapun.
         40 · mesajul din dock e tăiat la 20% din lățimea lui, deși în dreapta sunt
              ~300px goi. Desktopul taie la 58% (110px dintr-un dock de 190px).
              Cifra de 20% e gândită pentru dock-ul îngust din portret.
         41 · pastila „CAPTURĂ/PUNE" din crest e mai MARE (13.8px) decât suma pe
              care o înlocuiește (11.5px), într-un chip de 25px care mai ține și
              eticheta „BALANȚĂ". Pe desktop raportul e invers: 13px pastilă,
              19px sumă. La oponenți e potrivită — acolo nu s-a atins nimic.
         42 · bula de chat a boților — punctul 2 din lista ta „CE NU E REZOLVAT".
              Nu se poate rezolva din CSS: e `position: fixed` într-un portal pe
              <body>, poziționată din JS cu getBoundingClientRect. Doar micșorată,
              ca să acopere mai puțin. Rezolvarea adevărată e în TIP-SYSTEM din
              septica-pro.js.

       LĂSAT INTENȚIONAT: indicii din colțul cărților par mici, dar sunt exact la
       raportul de pe desktop (15% din lățimea cărții). Cartea e mică, nu regula.

       RUNDA 43 + corecție la 16.
         43 · avatarele nu umpleau inelul. Învelișul (`.player-avatar`,
              `#avatarSouth`) rămăsese la cota mobilului (~37px), iar poza din el la
              cea din secțiunile 2 și 5 (~23px) — inel de 37 în jurul unei poze de
              23. Cele două selectoare au aceeași specificitate și ating elemente
              DIFERITE, deci nu se corectau una pe alta. Trecut pe modelul
              desktopului: învelișul ia cota, poza umple 100% cu `object-fit`.
              La crestul de jos imaginea chiar ieșea din cerc — lipsea `object-fit`.
         16 (corectat) · apronul apărea în spatele cărților, nu sub crest și dock,
              adică exact invers față de ce plănuisem. `.seat-south` e absolut cu
              `bottom` propriu, deci „jos" nu era unde presupusesem. Întins pe tot
              scaunul — oricum mai aproape de desktop, unde apronul ține crest,
              mână și dock la un loc.

       RUNDA 44 — singura schimbare de ARANJAMENT din tot fișierul, nu de stil.
         44 · crest, mână și dock trec pe UN rând, ca pe desktop. Rândul în plus al
              grilei mobile costa 17cqh din înălțimea mesei. Masa crește cu 36% pe
              iPhone 15 (157→215px) și cu 36% pe S9+ (118→161px). Lățimea verificată
              la 6 cărți pe trei dispozitive; cel mai strâns e iPhone SE, la 91%,
              de-aia cărțile primesc `flex: 0 1 auto`.
              E singura secțiune care atinge geometria ta. Se scoate dintr-o
              mișcare: `bottom`-ul mesei e rescris acolo, nu modificat în 3.

       RUNDA 45-47 — două dintre ele sunt posibile DOAR fiindcă masa a crescut la
       secțiunea 44. Erau reparații ale unei strâmtori care nu mai există.
         45 · emblema urcată la `top: 13%` de mobil, centrată pe desktop. Motivul
              din secțiunea 13 („masa e scundă, centrul e ocupat") a expirat.
         46 · potul se întoarce centrat sub cărți, ca pe desktop. 3f îl mutase
              lateral fiindcă la o masă de 157px nu încăpea; la 215px rămân 58px
              sub cărți, iar desktopul cere 16px. Micșorarea de la 37 rămâne.
         47 · avatarul din crest are 57% din înălțimea rândului; pe desktop are
              91%. Cei 9cqh din secțiunea 5 erau pentru compoziția veche, unde
              crestul împărțea o coloană de 50% cu dock-ul.

       RUNDA 48 — diferență rulată DOAR pe lanțul jucătorului de jos.
         48a · chipurile nu sunt egale: desktopul le dă `min-width: 56px` (85% din
               rând) ca să iasă coloane aliniate; mobilul pune 0, deci se strâng pe
               conținut și ies zimțate.
         48b · chipurile înghesuite: `3px 11px` pe desktop față de `1.4px 2.8px`,
               de patru ori mai puțin pe orizontală.
         48c · CONSECINȚĂ A SECȚIUNII 47, vina mea: `.player-details` intră sub
               avatar cu `margin-left` negativ compensat de `padding-left`, iar
               perechea e calibrată pe mărimea avatarului (−53% / +68% din el).
               Am mărit avatarul la 47 fără să ating perechea, deci ieșea mai în
               stânga decât îl acoperă placa. Legată acum de aceeași cotă.
         48d · numele și cifrele, puse pe procentele desktopului. Balanța e cea mai
               mare cifră din crest acolo (19px față de 17px) — la fel și aici.
       Eticheta CĂRȚI/PUNCTE/BALANȚĂ neatinsă: secțiunea 5b o ține deja la 7px fix,
       exact cât are desktopul.

       RUNDA 49-50 — footerul.
         49 · FAB-ul „Profil" avea cote FIXE (46px, translateY(-6px)) dintr-un bloc
              landscape al lui septica-pro.css, care nu știe nimic despre bara pe
              care secțiunea 6 a legat-o de ecran. Ieșea 86% din bară față de 74%
              pe desktop. Legat de aceleași `vh`, cu `translateY` în PROCENTE — un
              `-6px` fix e greșit la orice altă mărime, `-21%` se reglează singur.
         50 · footerul desktop are butoane DOAR TEXT (pro:25632 ascunde pictograma
              și lasă eticheta). Secțiunea 6 face invers, cu motivul „etichetele nu
              încap". Recalculat: patru etichete la 11px = ~240px din 915, încap
              lejer; și pe S9+ (654px) la 9px. Lăsat COMENTAT — e decizia ta, iar
              varianta cu pictograme e mai bună sub ~600px.

       RUNDA 51 — ultimul spațiu risipit.
         51 · insignele oponenților plutesc deasupra mesei, cu 3px de gol, iar sub
              ele rămâne o dungă de lemn goală. Pe desktop stau PE ramă: `top:-6px`
              la o insignă de 58px, cu lemnul ocupând primii 50px ai mesei. Masa
              urcă la `top: 6cqh` și insignele se așază pe lemn. Încă 7cqh.
              Bilanț total al înălțimii mesei: 157 → 201 (sect. 44) → 223px (+42%).

       RUNDA 52 — tooltip-ul de hover/tap pe jucător.
         52 · `.tb-opp-tip-fixed` are `width: 56%` de la mobil, procent din LĂȚIMEA
              ecranului. În portret dă 230px, aproape de cei 190px ai desktopului —
              corect acolo. În peisaj ecranul e lat: 512px pe iPhone 15, de 2.7 ori
              cât trebuie, iar săgeata `::before` fixată la `left: 50%` nu mai arată
              spre avatar. Plus toate cotele interioare sunt px de desktop, deci
              panoul ocupă 46% din ecran pe iPhone 15 și 61% pe S9+, față de 24% pe
              desktop. Lățimea adusă la cea de pe desktop, interiorul legat de `vh`
              cu plafon la valorile desktopului.
              UNITĂȚI: tooltip-ul e copil direct al lui <body> (vezi comentariul de
              la pro:25395 — masa are context 3D și overflow:hidden), deci nu are
              container ancestor și `cqh`/`cqw` NU se rezolvă. Doar `vw`/`vh`.

       RUNDA 53 — panoul din footer (Chat / Mese).
         53 · aceeași capcană ca la 52, pe cinci cote: `septica-mobile.css:570-578`
              măsoară totul în `vw`. În portret `vw` e latura MICĂ, în peisaj e cea
              MARE, deci totul iese de 2.2 ori prea mare: titlu 38px față de 15.7 pe
              desktop, buton de închidere 82px față de 31. Doar antetul mănâncă un
              sfert din ecran. Legate de `vh`, plafonate la valorile desktopului.
              Plus `padding-bottom: 130px` rezervat pentru o bară de 104px din
              portret; secțiunea 6 a dus bara la 54px, deci 76px stăteau degeaba.
              Plus inseturile de siguranță laterale: culcat, decupajul e în lateral,
              nu sus, iar antetul compensa doar `safe-area-inset-top`.
              NESCHIMBAT modul de afișare: desktopul are sertar lateral de 320px,
              mobilul ecran întreg cu motiv scris și verificat. În peisaj sertarul
              ar fi mai bun, dar depinde de blocul „CONTEXT PANEL ACTIV ÎN JOC" care
              comprimă masa la 50dvh — schimbare de comportament, nu de stil.

       RUNDA 54 — panoul cu chat. Cea mai mare descoperire de până acum.
         54 · optimizarea de peisaj pentru chat EXISTĂ deja: 48 de reguli la
              `septica-pro.css:12869`, „15.5 MOBILE LANDSCAPE OPTIMIZATION".
              Nu se aplică niciodată pe telefoanele de azi: gardul e
              `max-width: 812px`, lățimea unui iPhone X culcat din 2018. iPhone 15
              are 915, Pixel 8 892, Galaxy S24 888 — toate ratează. Doar S9+ și SE
              o prind. Adusă întreagă, fără gard.
              Patru reparații pe drum: `.chat-messages` avea o înălțime din trei
              cote care trebuiau ținute sincronizate manual (trecut pe flex);
              `100vh` → `100%`; zona de input nu rezerva loc pentru bara flotantă
              cu z-index 1030; selectorul de emoji folosea `100vw`.
              Alte două blocuri de peisaj au același gard învechit: modalele
              (pro:17104, 16 reguli, gard 768px) și un layout vechi (pro:18570,
              33 reguli, selectoare moarte). Primul merită portat separat.

       RUNDA 55-56.
         55 · „nu acoperă headerul" și „nu pot scrie în chat" sunt ACELAȘI defect.
              Panoul e întins peste tot ecranul, dar are `z-index: 200` de la
              septica-mobile.css:567, sub header (1020) și sub bara flotantă (1030).
              pro.css îi dă 1100 într-un bloc de peisaj (22106), dar mobilul se
              încarcă după și îl calcă. În portret nu se simte, fiindcă acolo un alt
              bloc ascunde headerul — și acela e gardat pe `orientation: portrait`.
              Redat 1100. Cad și cele două rezervări de la 53 și 54, care existau
              doar fiindcă bara stătea deasupra.
         56 · modalele — DOUĂ blocuri învechite, nu unul. Prima versiune portase
              doar `pro:17104` (16 reguli); acela e rafinamentul de peisaj peste
              `pro:16895` (38 reguli), pe care nu-l adusesem. Ambele gard 768px.
              24 de selectoare lipseau complet: TOT modalul de sfârșit de joc
              (`.game-end-modal`, `.result-*`, `.ranking-table`), butoanele din
              Setări, `.modal-body { overflow-y: auto }` — fără care corpul
              modalului nu derulează deloc — și `content`/`position` ale mânerului
              de tragere. Portate în ordinea din sursă: baza, apoi peisajul.
         57 · animația de captură zbura peste panou. JS-ul îi pune `position` și
              `z-index` inline, pe un element agățat de <body>, deci nu era
              limitată de nimic. `!important` bate inline: i-am dat locul 1050 —
              deasupra mesei, headerului și barei, sub panou (1100) și modale.

       NEPORTAT, cu motiv: `pro:18570` (33 de reguli, gard 768px) e un layout VECHI
       — `.stats-layer`, `.nav-pills-custom`, `.game-table`, `.context-header`,
       `.context-body`, `.info-avatar`. Selectoarele alea nu mai există în marcaj.
       Problema e că blocul amestecă moarte cu vii (`.card`, `.game-area`,
       `.player-info`, `.chat-messages`), iar valorile vii sunt din aranjamentul de
       dinainte — portat, ar călca peste tot ce s-a construit aici. E cod mort care
       trebuie ȘTERS din septica-pro.css, nu resuscitat.
       La fel `pro:22278` (gard 667px): prinde pe S9+ și SE, dar dă cărților cote
       fixe (34x48px) care oricum pierd în fața secțiunii 4.

       RUNDA 55-57 — panoul acoperă headerul, tastatura, modalele.
         55 · panoul are z-index 200, headerul 1020, footerul 1030. E la `inset:0`
              deci acoperă zona headerului, dar se desenează SUB el. În portret nu
              se vede fiindcă un alt bloc îi pune headerului `height: 0` — bloc
              închis în `orientation: portrait`. Panoul urcat la 1025: peste header,
              sub footer (footerul rămâne tapabil, de-aia există rezerva din 54).
         56 · CAUZA pentru „nu pot scrie": tot setul `.context-panel.keyboard-open`
              (pro:18451, 9 reguli) e în același bloc de portret. Clasa se pune din
              JS, dar n-o citește nimeni. Cu tastatura deschisă rămân ~150px, iar
              necomprimat antetul 44 + capul de chat 50 + inputul 90 = 184px, deci
              câmpul iese sub ecran. Adus, plus: capul de chat se ascunde complet
              (50px dintr-un buget de 150) și rezerva pentru bara flotantă se
              anulează, fiindcă bara nu mai e în viewportul vizual.
         57 · modalele (pro:17104, 16 reguli, gard 768px) — foaie de jos în peisaj.
              Aceeași poveste, adus întreg.
       NEPORTATE, cu motiv: pro:22278 (cărți la cote fixe, ar călca geometria din
       secțiunile 3-4) și pro:18570 (selectoare moarte din layout-ul pre-Tabinet).

       RUNDA 58 — dialogul „vei pierde jocul curent" (`.mw-confirm-*`, pro:5373).
         58 · nu e din aceeași lume: fundal `--color-primary` (albastru-ardezie),
              fir auriu de 15%, titlu alb simplu — peste o masă care e toată lemn cu
              ramă aurie. Trecut pe aceleași straturi ca crestul de jos, cu titlul
              pe foița aurie de la `#nameSouth`.
              Plus zero reguli de peisaj: toate cotele în px/rem, deci pe 412px
              ocupă 39% din ecran și pe S9+ 51%. Legate de `vh` cu plafon la
              valorile originale.
              Plus butoanele stăteau două pastile mici în colț; acum împart
              lățimea — ținte mai mari și alegerea mai clară când una pierde jocul.
              LIMITĂ: dacă alerta e `confirm()` nativ din septica-pro.js și nu
              dialogul ăsta, CSS-ul n-o poate atinge — se vede imediat, arată la
              fel după reîncărcare.

       RUNDA 59 — modalele pe tot ecranul.
         59 · secțiunea 56 le-a adus ca foi de jos, fiindcă asta scrie în original:
              `max-height: 65vh`, apoi `70vh` în peisaj. Cifrele sunt de portret,
              unde 70% din 915px = 640px. În peisaj 70vh din 412px = 288px, minus
              antetul rămân 228px de conținut pe o lățime de 915 — clasamentul și
              lista de setări derulează în trei rânduri, iar foaia oricum acoperă
              trei sferturi din ecran. Duse pe tot ecranul: +124px de conținut
              (+54%), și coerent cu panoul, care e tot pe tot ecranul.
              Patru lucruri obligatorii: `.modal-container` are `overflow: hidden`
              din construcție, deci fără structură de coloană conținutul se taie
              fără să deruleze (`min-height: 0` pe corp e cheia, aceeași capcană ca
              la `.chat-messages`); anulat plafonul de 70vh; stins mânerul de
              tragere; adăugate decupajele pe toate laturile.
              Bonus: setările trec pe două coloane peste 700px lățime — 915px de
              lățime pe o singură coloană era risipă.

       RUNDA 60-61.
         60 · Safari pe iPhone MĂREȘTE pagina la atingerea oricărui input cu text
              sub 16px. Nu se poate opri cu `user-scalable=no` pe iOS modern. Zece
              câmpuri erau sub prag. CORECTAT după verificare: prima căutare, pe
              nume de clasă și `font-size` în px, ratase trei categorii — SELECT-uri
              (`.lobby-sort-select` 12px, `.mp-sort-select` 11px, iOS le mărește la
              fel), valori în `rem` (`.mp-modal-input` 0.95rem = 15.2px) și câmpuri
              pe care numele nu le trăda (`.lobby-search-input`, `.mp-room-search`,
              `.btm-field input`). Acum prind ELEMENTELE, nu clasele: `input`,
              `textarea`, `select`, `contenteditable`, cu excepția tipurilor fără
              text. Compromis: un select de 11px trecut la 16 se lățește — dacă
              `.mp-sort-select` iese din bară, strânge-i padding-ul, nu fontul.
              NU rezolvă sugestia de parolă — aia vine din atributele HTML, nu din
              CSS. Stilizat doar `:-webkit-autofill`, ca să nu rămână caseta galbenă.
         61 · secțiunea 57 prinsese doar animația de CAPTURĂ. Cea de ARUNCARE e
              altă clonă, agățată de `<body>` cu z-index inline și fără clasă
              proprie. Două plase: `body > .card` plafonat la 1050 (orice carte
              copil direct al lui body e prin definiție o clonă de animație), plus
              stingerea tuturor straturilor de animație cât e panoul deschis.
              Închis și `overflow: visible` pe care `body.is-dealing` îl deschide.

       RUNDA 62 — modul imersiv (`.immersive-toggle-float`).
         62 · face jumătate din treabă. Ascunde headerul și footerul (`display:
              none`, nimic nu concurează), dar NU mărește conținutul: regula lui
              `body.immersive-mode .game-canvas { height: 100dvh }` are (0,2,1), iar
              secțiunea 1 are (0,3,1) și câștigă. Rezerva de 13vh pentru footer
              rămâne, deși footerul nu mai există — deci apeși butonul și în locul
              barei rămâne o bandă neagră goală, cu masa neschimbată.
              Reparat cu (0,4,1), fără să ating secțiunea 1, care trebuie să rămână
              valabilă în modul normal. Masa: 238→292px pe iPhone 15, +23%; și tot
              restul crește odată cu ea, fiindcă totul e în cqh.
              Două lucruri apar abia când dispare headerul: decupajul lateral al
              camerei nu mai e absorbit de nimeni, și rezerva pentru bara flotantă
              din secțiunea 8 devine bandă goală în sala de așteptare.

       RUNDA 63-64 — urmări ale secțiunii 62.
         63 · cărțile din mână par mai mici în imersiv. Cauza: plafonul `11vh` din
              secțiunea 4. În modul normal nu se atinge niciodată (container 87% din
              ecran → 12cqh < 11vh). În imersiv containerul DEVINE ecranul, deci
              12cqh = 12vh și plafonul intră în funcțiune: cartea rămâne la 11% din
              ecran în timp ce tot restul crește cu 23%. Nu scade în absolut
              (40.3→45.3px), scade FAȚĂ DE ce e în jur. Plafonul scos doar în
              imersiv, unde n-are ce apăra — acolo 12cqh ESTE 12vh.
         64 · supapa de strângere din secțiunea 44 se declanșează mai des acum, cu
              crestul crescut. Înlocuită cu SUPRAPUNERE, ca la desktop, și doar când
              e nevoie: `#handSouth:has(.card:nth-child(7))` prinde exact cazul cu
              7+ cărți. Sub șapte nu se schimbă nimic.

       RUNDA 65 — de ce cărțile tot ies mici în imersiv, chiar după 63.
         65 · nu cartea e problema, ci vecinul ei. Măsurat pe capturi, împărțirea
              lățimii rândului de jos: desktop dă mâinii 54%, peisajul normal 21%,
              iar imersivul 18%. Tot ce e în crest e în `cqh`, containerul crește cu
              23%, deci crestul se umflă cu 23% și mâna primește ce rămâne — apoi
              supapa din 44 strânge cărțile.
              Principiul care lipsea: spațiul câștigat în imersiv e pentru MASĂ și
              CĂRȚI, nu pentru ramele din jur. Crestul arată trei cifre și un nume;
              n-are de ce să crească fiindcă ai ascuns headerul.
              Toate cotele crestului și dock-ului rescrise în `vh`, cu valoarea din
              modul normal (cqh × 0.87, unde 0.87 = raportul container/ecran).
              Rândul de jos rămâne identic în ambele moduri, cei 23% se duc integral
              în masă și cărți. Efect secundar bun: crestul devine mai SCUND decât
              rândul cărților, exact ca pe desktop (66px lângă 150px). Până acum era
              invers.

       RUNDA 66 — butonul de Focus, de ce nu se înțelege.
         66 · patru motive, citite din `pro:2644-2770`. Săgețile pulsează la
              NESFÂRȘIT cu o deplasare de 2px — un element care se mișcă permanent
              dar imperceptibil e citit ca decor. Cele două stări arată la fel:
              diferența e 5px pe o cutie de 20. Iar în focus butonul devine MAI
              palid (opacitate 0.5, auriul scos) — exact pe dos, fiindcă acolo e
              singura cale înapoi, headerul și footerul fiind ascunse. Plus n-are
              etichetă și e în paleta albastru-ardezie, ca dialogul din 58.
              Reparat: puls oprit; stările făcute vizibil diferite (săgeți în
              colțuri / trase la 30% spre centru, de șase ori mai multă deplasare);
              etichetă din `::after` care se schimbă, „MĂREȘTE" / „IEȘI"; în focus
              mai vizibil, nu mai puțin; paleta jocului.
              Încape: marginea liberă din stânga mesei e ~55px, butonul are 46.
              DACĂ marcajul are deja o etichetă vizibilă, cea din `::after` se
              dublează — atunci șterge doar acel bloc.

       RUNDA 67 — crestul pe două rânduri.
         67 · diferența față de desktop nu e de mărime, e de STRUCTURĂ. Pe desktop
              numele stă DEASUPRA chipurilor, ca titlu al blocului; în peisaj e pe
              același rând, deci devine al patrulea element din șir și nu se mai
              citește ca nume. Cauza: `septica-mobile.css:313` pune
              `flex-direction: row` pe `#infoSouth .player-details`; pe desktop e
              coloană (`pro:6210`: „Bootstrap: .d-flex .flex-column .gap-1").
              În portret rândul avea sens — crestul împărțea o coloană de 50% cu
              dock-ul. După secțiunea 44 are lățime proprie, deci restricția a
              dispărut. Verificat că încape: 45px din cei 50 ai rândului.
              Numele urcat de la 3cqh la 3.4cqh — ca titlu își permite proporția de
              pe desktop (19-21% din placă) — și scos `max-width: 44%`, care exista
              doar ca să nu împingă cifrele pe rândul comun.

       RUNDA 68-69.
         68 · rândul de jos nu e simetric și mâna nu e pe centru. Măsurat: crest 285,
              mâna 145, dock 265 — centrul mâinii cade la 427 pe un ecran de 816,
              deci 19px la dreapta de centru. Cauza e `auto minmax(0,1fr) auto` din
              secțiunea 44: laturile se dimensionează pe CONȚINUT, deci ies inegale,
              iar mâna cade pe centrul a ce rămâne, nu al ecranului. Trecut pe
              `1fr auto 1fr`: laturi egale prin construcție (319px), mâna exact pe
              centru, crestul lipit stânga, dock-ul lipit dreapta.
         69 · butonul de Focus intră pe rama mesei. Stătea la `left: 8px` cu 46px,
              în marginea de 6cqw dintre ecran și masă — margine care pe telefoane
              înguste scade sub 46px. Lipit acum de marginea ECRANULUI, rotunjit doar
              pe dreapta, ca o limbă de sertar: idiom recunoscut și independent de
              cât spațiu lasă masa. 38×72 în loc de 46×46, deci ținta de atins e mai
              MARE, nu mai mică.

       RUNDA 70-71.
         70 · popup-ul de captură devine cel mai mare obiect de pe ecran la opt
              cărți luate. Cotele lui sunt `clamp()` legat de `vw` — a treia dată
              când aceeași greșeală de unitate apare (după 52 tooltip și 53 panou):
              în portret `vw` e latura mică, în peisaj e cea mare, deci plafoanele
              rămân active dar raportate la o masă de trei ori mai scundă. Legat de
              `vh`, cu `flex-wrap` și plafon de lățime la 42vw.
         71 · emblema scrie „ȘE ♥ CA" — cartea jucată taie mijlocul cuvântului. Pe
              desktop cărțile ocupă 250px din 1076 și o acoperă ÎNTREAGĂ, deci acolo
              starea e curată: ori toată, ori deloc. În peisaj cartea are 40px pe un
              felt de 700 și acoperă doar mijlocul. Emblema devine filigran: 30%
              opacitate cât există o carte pe masă (`:has`), înapoi la 100% când
              masa se golește.

       RUNDA 72 — capetele crestului și ale dock-ului.
         72 · măsurat: la o placă de ~45px, capătul din stânga al crestului are 25px
              rază, deci E semicerc (se plafonează la 23 = jumătatea înălțimii); cel
              din dreapta are 13px, adică 55% din cât ar trebui — colț teșit. Dock-ul
              invers. Vine din desktop (32/16px), unde funcționează fiindcă placa e
              de trei ori mai lată decât înaltă și raportul 2:1 se citește ca PERECHE
              crest↔dock. În peisaj perechea s-a rupt la secțiunea 68, când laturile
              au devenit egale — într-un aranjament simetric două capete teșite care
              se privesc nu mai semnifică nimic. Trecute pe pilulă, ca masa.
              Padding-ul crescut la 6vh (cât raza), altfel „BALANȚĂ" și „Runda 2/7"
              ar fi tăiate pe diagonală de curbură.

       RUNDA 73 — capetele insignelor oponenților.
         73 · aceeași asimetrie ca la 72, la capătul celălalt al mesei:
              `border-radius: 999px 8px 8px 999px`. Stânga rotundă sub avatar,
              dreapta 8px la o capsulă de 28px — 57% din cei 14px ceruți de un capăt
              rotund. Vine de pe desktop (`40px 14px 14px 40px` la 58px, același
              raport), unde se justifica: insigna e de cinci ori mai lată decât
              înaltă și capătul teșit continua rândul de insigne. La noi insignele
              stau separat pe ramă (51), iar masa de sub ele e pilulă.
              Trecute pe pilulă. Acum toate cele cinci obiecte cu ramă de lemn au
              aceeași formă: masa, cele trei insigne, crestul, dock-ul.
              Padding-ul din dreapta la 4.5cqh (cât raza) — fără el spatele cărților,
              care stă exact în capătul ăla după secțiunea 20, s-ar tăia pe diagonală.
              Ăsta e și motivul pentru care 8px fusese pus inițial: rază mare cu
              padding mic taie conținutul. Se reglează împreună, ca la secțiunea 11.

       RUNDA 74 — cadrul de dedesubt și încadrarea avatarului.
         74 · sunt DOUĂ plăci suprapuse la crest. `#infoSouth` e ȘI `.player-info`,
              deci primește placa din `pro:25202` cu `border-radius: 14px`.
              Oponenților li se golește (pro:25224 + mobile + secțiunea 2); sudului
              nu. Cu placa interioară devenită pilulă la 72, colțurile cadrului de
              dedesubt ies pătrate pe sub curbă. Făcut și el pilulă — trei straturi
              concentrice, trei forme rotunde.
              Încadrarea avatarului, cu socoteala: cadrul 16cqh = 50px → raza
              capătului 25px; avatarul 13.5cqh = 42px → raza 21px; ca centrele să
              coincidă, inset-ul trebuie să fie diferența razelor, 1.25cqh = 3.9px.
              Era `1cqw` = 9.2px, deci avatarul stătea cu 5.3px prea la dreapta.
              Aici nu e nici plafon greșit, nici unitate rotită la 90° — e AXA
              greșită: raza capătului vine din înălțimea cadrului, deci și inseturile
              care se potrivesc cu ea trebuie să vină de acolo, nu din lățime.

       RUNDA 75 — medalion cu cronometru în capătul dock-ului.
         75 · dock-ul are aceeași înălțime ca crestul (16cqh), deci capătul lui are
              aceeași rază, iar un cerc de 13.5cqh — cât avatarul — se încadrează cu
              formula de la 74: inset = diferența razelor = 1.25cqh. Simetrie reală:
              două pilule, fiecare cu medalion în capătul dinspre marginea ecranului,
              mâna exact la mijloc.
              SINGURA ADĂUGIRE din tot fișierul care NU e paritate cu desktopul —
              acolo cronometrul e text lângă „Runda X/Y". Ținută strict la ce se
              putea face fără marcaj nou: `.td-timer` scos din flux, îmbrăcat cu
              ACEEAȘI ramă dublă ca avatarele (24), ca să citească drept pereche.
              LIMITĂ: inelul nu se golește pe măsură ce scade timpul. Cronometrul de
              pe avatar o face prin SVG din JS. Ca acesta să se golească, JS-ul ar
              trebui să scrie o variabilă pe element (ex. `--td-progress`), iar restul
              se desenează cu `conic-gradient`.

       RUNDA 76 — inelul dublat, vina secțiunii 74.
         76 · în capăt se vedeau DOUĂ inele aurii concentrice: inelul dublu al
              avatarului (rază 21-25px, secțiunea 24) și bordura de 3px a lui
              `#infoSouth` (rază 22-25px, pro:25204). Cauza e chiar ce am „reparat"
              la 74: centrarea avatarului în capătul cadrului e exact ce face cele
              două inele concentrice. Pe desktop nu se întâmplă fiindcă avatarul NU
              e centrat acolo — iese peste margine, deci arcul cadrului trece pe SUB
              el. Cele două cerințe se bat: ori avatarul e încadrat în capăt, ori
              cadrul nu se vede în jurul lui.
              Am ales încadrarea, fiindcă face pereche cu medalionul din dock (75).
              Deci `#infoSouth` redevine cutie de aranjare, fără decor, ca scaunele
              oponenților. Trei straturi devin două, iar medalioanele de la ambele
              capete ale rândului arată identic.

       RUNDA 77 — butoanele din footer lipite de marginea de jos.
         77 · banda de sub butoane nu e o margine, e spațiul lăsat de centrare: bara
              are 13vh (53.6px pe iPhone 15), butoanele 9vh (37.1px), iar
              `align-items: center` împarte diferența egal sus și jos — 8.2px jos.
              Deci nu era de șters o margine, era de strâns bara pe conținut.
              Trei lucruri la pachet: decupajul de jos socotit explicit (pe iPhone
              culcat indicatorul de acasă are ~21px; fără el degetul nimerește gestul
              de sistem, nu butonul); colțurile de jos pătrățite, ca pastila lipită
              de margine să se citească drept filă și nu drept pastilă tăiată —
              același gest ca butonul de Focus de la 69; și rezerva scenei micșorată
              odată cu bara, fiindcă secțiunea 1 scădea 13vh pentru o bară care nu
              mai are 13vh. Scena câștigă 16px pe iPhone 15, ~11px de masă.

       RUNDA 78 — avatarul oponenților în capătul capsulei.
         78 · la oponenți NU e dublare (`.player-info` și `.player-details` sunt deja
              golite la 2 și 14) — e că nu ÎNCAPE: raza avatarului cu inel e 15px,
              iar interiorul capătului 12.9px, deci iese cu 2.1px pe fiecare parte.
              Plus inelul e desenat în px ficși (secțiunea 24, portat de pe desktop),
              deci grosimea nu scade odată cu avatarul: 4px pe 22px = 18%, față de
              10% pe desktop și 9.5% la crest. Dublu.
              Aceeași greșeală de fond ca la `--u`, dar în oglindă: acolo o cotă
              relativă se prăbușea, aici una absolută rămâne pe loc când elementul se
              micșorează.
              Transpusă proporția de la crest și dock: medalion 84% din pilulă, inel
              0.71cqh, inset = raza capătului − raza cu inel.
              CORECȚIE la 73: comentariul spunea că insignele nu cresc în imersiv, dar
              legasem doar padding-ul, nu și `height`, care rămăsese 9cqh și creștea
              cu 23%. Acum e adevărat.

       RUNDA 79 — inelul care se golește, ratat la secțiunea 22.
         79 · conturul SVG al inelului de timp e desenat CENTRAT pe traseul cercului,
              deci jumătatea exterioară cade în afara cutiei și se taie de
              `overflow: hidden` al avatarului. Ce se vede e mereu jumătate:
              desktop 2.00px pe un cerc de 40px; oponent 1.25px pe un cerc de 23px.
              Secțiunea 22 a coborât conturul de la 4 la 2.5 socotind proporția cu
              diametrul — dar am uitat că din el se vede doar jumătatea interioară.
              Proporția trebuie făcută pe ce RĂMÂNE, nu pe ce se declară.
              Reparat: `overflow: visible` pe avatar doar cât e rândul lui (conturul
              se vede întreg, de la 1.25 la 2.5px fără să îngroș nimic — poza rămâne
              rotundă din propriul `border-radius`), plus conturul urcat la 3.2 = 14%
              din cerc. Singurul loc unde mă abat deliberat de la proporția
              desktopului (10%), fiindcă la 23px acei 10% sunt 2.3px și albastrul nu
              se distinge de navy-ul de dedesubt.
              Inelul verde de la 78 mutat în AFARA conturului — cu conturul întreg,
              cele două ajungeau concentrice și reveneam la problema de la 76.

       FALS POZITIV verificat și ignorat: moneda de balanță pare bătută de
       `.meta-item:not(.meta-balance)`, care are specificitate mai mare — dar prin
       definiție nu se potrivește pe `.meta-balance`. Auditul nu evaluează `:not()`.

       INTACTE, verificate și lăsate în pace: numele cu foiță aurie Cinzel la toate
       locurile (regulile `#infoNorth/#infoWest/#infoEast/#infoSouth .player-name`
       sunt pe ID și bat lanțul de clase al mobilului), inelul auriu de pe avatare,
       moneda de balanță, etichetele CĂRȚI/PUNCTE/BALANȚĂ, fundalul și rama
       dock-ului, spatele cărților de la oponenți.

       Nimic din secțiunile 1-8 nu a fost atins. Cele 5 secțiuni noi schimbă doar
       `background`, `box-shadow`, `inset` și `font-size` pe elemente decorative —
       zero geometrie, zero `width`/`height`/`top`/`bottom` pe masă, scaune sau
       cărți.

       DE VERIFICAT pe telefon real, în ordinea asta:
         1. raportul lemn/chenar la 11 — dacă chenarul tot pare gros, coboară
            `inset` de la 3.6cqh spre 4.2cqh (mai mult lemn, mai puțin chenar)
         2. niturile de la 9 — pe S9+ (container 252px) au ~4.2px; dacă se pierd,
            urcă cele trei cote de la 1.68/2.16/2.4 spre 2/2.6/2.9cqh
         3. sclipirea de la 10 — dacă distrage pe ecran mic, șterge secțiunea

       NEATINS, fiindcă e decizia ta explicită și scrisă: chenarul rămâne AURIU,
       nu cromat ca pe desktop. Blocul de schimb e comentat în secțiunea 11.
       ═══════════════════════════════════════════════════════════════════════════ */


    /* ═══ 80. DOCK-UL SE LUNGEȘTE — CORECȚIE LA SECȚIUNEA 68 ════════════════════
       Secțiunea 68 a pus pe rândul de jos:

         grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr)

       iar comentariul de acolo spune de ce am ales `min-content` în loc de `0`:
       „dacă vreodată crestul are un nume foarte lung, coloana crește în loc să-i
       taie conținutul". Suna prudent. E chiar cauza problemei.

       `min-content` înseamnă „nu coborî sub cel mai lat cuvânt indivizibil din
       mine". Iar conținutul rândului de jos SE SCHIMBĂ în timpul jocului:

         · balanța trece de la patru la șase cifre
         · pastila arată când „19264", când „CAPTURĂ +4", când „PUNE J♦"
         · în dock, `.td-name` afișează pe rând „tău", „sbot_victor41",
           „sbot_lavinia54" — nume de lungimi foarte diferite

       La fiecare schimbare, `min-content` al coloanei crește, coloana se lățește,
       iar cele două laturi nu mai sunt egale — deci și mâna se mută din centru.
       Ăsta e „se lungește": nu textul crește, ci pista pe care stă.

       Pe desktop dock-ul are `width: 190px`, FIX (`septica-pro.css:25324`). Deci
       nu doar că stabil e mai bine, e și ce face desktopul.

       DOUĂ SCHIMBĂRI, care merg împreună:

       1. `minmax(0, 1fr)` în loc de `minmax(min-content, 1fr)`. Coloanele laterale
          redevin egale prin construcție, indiferent ce scrie în ele.
       2. Textul se TAIE, nu împinge. Fără `min-width: 0` pe containere, un copil
          flex sau grid refuză să coboare sub conținutul lui — deci `1fr` singur
          n-ar fi fost de ajuns, conținutul ar fi ieșit din coloană. Cu
          `overflow: hidden` plus `text-overflow: ellipsis`, un nume lung se taie
          cu „…", cum face și desktopul cu `max-width: 110px`.

       Prima fără a doua ar muta problema din „coloana crește" în „conținutul iese
       din coloană". De-aia n-am schimbat doar `min-content`. */

    .game-play-container:is(.game-2p, .game-3p, .game-4p) .player-seat.seat-south {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }

    /* Dock: textul se taie, nu împinge. */
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2,
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-top,
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-mid {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-name,
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-round,
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-label {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    /* Crest: la fel. Placa nu se mai lățește când balanța capătă o cifră în plus
       sau când pastila se întoarce pe „CAPTURĂ". */
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth,
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-details,
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .player-meta {
        min-width: 0 !important;
    }

    .game-play-container:is(.game-2p, .game-3p, .game-4p) #nameSouth {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    /* Chipurile au deja `min-width: 13.6cqh` din secțiunea 48a — acela e un prag
       VOIT, ca cele trei să iasă coloane egale. Îl las: e o cotă fixă, nu una care
       urmează conținutul, deci nu poate crește singură. Doar cifra dinăuntru se
       taie dacă depășește. */
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth .meta-item > span:not(.material-symbols-rounded) {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    /* ═══ 81. DOCK-UL SE ÎNTINDE LA FIECARE CARTE JUCATĂ ════════════════════════
       Cauza e combinația dintre două secțiuni ale mele, niciuna greșită singură.

         §68  grid-template-columns: 1fr auto 1fr
              — mâna e `auto`, laturile sunt `1fr`
         §68  #tb-dock-live2 { min-width: 0; max-width: none }
              — i-am SCOS plafonul, cu comentariul „coloana îi dă lățimea, nu mai
                are nevoie de prag"

       Coloanele laterale iau tot ce nu ia mâna. Iar mâna e `auto`, deci lățimea ei
       scade cu fiecare carte jucată — și laturile CRESC:

         cărți în mână    mâna    fiecare latură    dock cere    gol în pilulă
               6         259px          310px          210px          100px
               4         171px          354px          210px          143px
               2          84px          397px          210px          187px
               1          40px          419px          210px          209px

       Dock-ul are nevoie de ~210px. La o carte în mână primește o coloană de peste
       400px, deci pilula se întinde la dublu, cu textul strâns la mijloc și
       medalionul împins departe la dreapta. Ăsta e „se mărește și se înghesuie":
       nu conținutul crește, ci cutia din jurul lui.

       Pe desktop dock-ul are `width: 190px` — FIX. Nu se întinde niciodată,
       indiferent câte cărți ai în mână.

       Repar fără să stric simetria de la §68: COLOANELE rămân `1fr auto 1fr`, deci
       mâna cade tot pe centrul ecranului. Doar dock-ul primește înapoi un plafon,
       calculat din ce conține, plus `justify-self: end` ca să rămână lipit la
       marginea din dreapta a coloanei lui. Crestul are deja `justify-self: start`.

       Plafonul: padding stânga + 5 butoane de 7cqh + 4 spații + rezerva
       medalionului. Aceleași cifre pe care le folosesc regulile lui, deci nu poate
       rămâne în urmă dacă se schimbă vreuna. */

    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
        max-width: calc(min(6vh, 22px) + 28cqh + 3.6cqh + 16.25cqh) !important;  /* 4 butoane, nu 5 — vezi §82 */
        justify-self: end !important;
    }

    body.immersive-mode .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 {
        max-width: calc(min(5.2vh, 22px) + 24.36vh + 3.15vh + 14.1vh) !important;
    }

    /* CORECTAT: aici pusesem `max-width: calc(13.5cqh + 2.4cqh + 46cqh)`, „ca la
       un nume foarte lung să nu împingă mâna din centru". Plafonul TAIA chipul
       de balanță — măsurat, crestul cere 215px pe iPhone 15 și primea 208:

         iPhone 15   cere 215px, plafon 208px  →  tăia 7px
         Galaxy S9+  cere 161px, plafon 156px  →  tăia 5px
         iPhone SE   cere 164px, plafon 158px  →  tăia 5px

       Iar plafonul apăra de o problemă care nu mai există: secțiunea 67 a mutat
       numele pe rândul lui, DEASUPRA chipurilor. Numele nu mai poate lăți
       crestul — lățimea vine acum doar din cele trei chipuri, care au cotele lor
       fixe de la 48a. Deci n-are de ce să fie plafonat.

       Rămâne doar `justify-self: start`, ca placa să stea lipită la stânga în
       coloana ei. */
    .game-play-container:is(.game-2p, .game-3p, .game-4p) #infoSouth {
        max-width: none !important;
        justify-self: start !important;
    }


    /* ═══ 82. BUTONUL DE TEMĂ, SCOS DIN DOCK ════════════════════════════════════
       Dock-ul are cinci butoane (`septica-pro.js:13551-13555`), ținute după
       `data-act`, nu după poziție — `nth-child` s-ar rupe dacă JS-ul schimbă
       vreodată ordinea:

         theme (palette) · chat · leaderboard · refresh · felt (culoare masă)

       Scot `theme`. Plafonul dock-ului de la secțiunea 81 scade odată cu el, altfel
       ar rămâne rezervat spațiu pentru un buton care nu mai există:

         cu 5 butoane  210px   →   cu 4  183px   (−28px)

       Cei 28px se duc în mână, care e coloana `auto` dintre crest și dock. */

    .game-play-container:is(.game-2p, .game-3p, .game-4p) #tb-dock-live2 .td-btn[data-act="theme"] {
        display: none !important;
    }
} /* ═══ sfârșit @media peisaj ═══════════════════════════════════════════════ */