/* ══════════════════════════════════════════════════════════════════════════
   SEPTICA — CSS MOBIL COMPLET (<992px) — TRANSFORMARE TOTALĂ a premium-ului desktop
   ──────────────────────────────────────────────────────────────────────────
   Copie 1:1 a secțiunii premium din septica-pro.css, cu FIECARE dimensiune rescrisă
   în unități MOBILE (vw / vh / % / em). Culorile/gradienții păstrați. Layout PORTRET:
   oponenți rând sus · masă PĂTRATĂ roșie · jucătorul jos (CĂRȚI sus → crest → dock).
   Încărcat DOAR pe mobil via <link media="(max-width:991px)">. Desktop NU e atins.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Accent auriu + gărzi anti-debordare ── */
:root, html[data-theme], body { --color-accent: #e4b860 !important; --color-accent-rgb: 228,184,96 !important; }
html, body { max-width: 100% !important; overflow-x: hidden !important; }
#app, .app-container { max-width: 100% !important; overflow-x: hidden !important; }

/* ── CONTAINER JOC: 3 zone verticale ── */
.main-content { display: block !important; }
.game-canvas, .game-area { width: 100% !important; overflow: hidden !important; padding: 0 !important; height: calc(100dvh - 104px) !important; max-height: calc(100dvh - 104px) !important; }
/* `container-type: size` DOAR cât e masa pe ecran, niciodată în lobby.
   Containment-ul de dimensiune oprește elementul din a-și lua înălțimea din conținut:
   în joc e exact ce vrem (înălțimea vine din lanțul flex), dar în lobby nu mai rămâne
   nimic care s-o dea → `.game-area` cădea la 0px și, cu `overflow:hidden`, lista de
   mese dispărea complet. Regula de mai jos (`body.game-active`) redă înălțimea din lanț. */
body.game-active .game-area { container-type: size !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) {
  transform: none !important; zoom: 1 !important; width: 100% !important; height: 100% !important;
  position: relative !important; display: block !important; margin: 0 !important; grid-template: none !important;

  /* ── GEOMETRIA MESEI: DOUĂ SCĂRI, o singură sursă de adevăr ─────────────────
     Nu folosi `vw`, `vh` sau `dvh` aici. `vw` scalează doar cu LĂȚIMEA, iar `vh`
     nu e cât vezi: măsurat pe pagina asta, `100vh` dădea 566px când zona vizibilă
     avea 531 — pe telefon real, cu bara de adresă, diferența e mult mai mare.
     De-aia layout-ul „mergea în emulator, nu și pe dispozitive".
     Scara vine din CONTAINER (`.game-area` e `container-type: size`), care își ia
     înălțimea din lanțul flex — deci nu trebuie să știe nimic despre header,
     footer sau bara browserului.

     --ui = MOBILIERUL (nume, avatare, pastile, dock, borduri). Are PODEA: sub
            ~2.9px numele devin ilizibile, iar un text de 5px lângă un footer la
            mărime normală arată rupt. Plafon 4.6px ca să nu se umfle pe tablete.
            `min(…, 100cqh/70)` îl face conștient și de înălțime, altfel în
            landscape mobilierul singur mănâncă toată scena.
     --u  = ELASTICUL (masa și cărțile). Ia exact ce RĂMÂNE după mobilier. O masă
            mai mică rămâne perfect jucabilă; un nume de 5px nu mai e nimic.

     Bugetul vertical, care se închide prin construcție:
       25·ui  banda oponenților   +  105·u  masa
       28·u   mâna (cărți de 20·u, raport 5/7)
       20·ui  rândul crest+dock   +  3·ui   spații și margine
       ────────────────────────────────────────────────────────
       48·ui + 133·u  ≡  100cqh   ← chiar definiția lui --u de mai jos

     Cei 5·ui de spații erau 4. Ocupat efectiv jos: 2·ui (bottom-ul scaunului) +
     1.8·ui (row-gap) + 20·ui (rândul) = 23.8·ui. Cu 24 rezervați, marja era
     0.2·ui — sub un pixel, deci la prima rotunjire nefavorabilă masa atingea
     mâna. Cu 25 marja urcă la 1.2·ui (~4.5px). Costă ~1% din înălțimea mesei.

     Dacă schimbi un coeficient, schimbă și 49 sau 133, altfel masa iese peste
     mână. Verificat pe 16 configurații portret, de la 320×568 la tabletă.
     Valorile de mai jos sunt plasa pentru browsere fără unități de container
     (Chrome <105 / Safari <16) — se comportă ca vechiul layout, nu se sparg. */
  --ui: 1vw;
  --u: 1vw;
  --table-size: calc(var(--u) * 105);
  --card-size: calc(var(--u) * 20);
  --avatar-size: calc(var(--ui) * 8.5);
}
@supports (container-type: size) {
  .game-play-container:is(.game-2p,.game-3p,.game-4p) {
    --ui: clamp(2.9px, min(1cqw, calc(100cqh / 70)), 4.6px);
    --u: max(1px, min(1cqw, calc((100cqh - var(--ui) * 20.6 - max(32px, var(--ui) * 8)) / 140.7)));
  }
}
/* ÎN JOC: septica-pro.css impune o înălțime calculată cu footerul de DESKTOP printr-o regulă cu
   aceeași specificitate, deci trebuie anulată aici (fișierul ăsta se încarcă după el). Nu mai
   scădem nimic: `height: 100%` lasă lanțul flex să dea înălțimea corectă, oricare ar fi ea. */
body.game-active:not(.room-waiting) .game-canvas,
body.game-active:not(.room-waiting) .game-area,
body.game-active:not(.room-waiting) .game-play-container:is(.game-2p,.game-3p,.game-4p) {
  height: 100% !important; max-height: 100% !important;
}

/* ══ MASĂ: dreptunghi mare, lemn + felt roșu (transformat din oval desktop) ═══
   Lățime 98·u, înălțime 105·u — ambele elastice, deci masa își ține forma la orice ecran.
   `top`/`bottom` rezervă benzile de mobilier; `margin: auto 0` o centrează în ce rămâne
   (atenție: un `margin: 0` scris DUPĂ ar anula centrarea — a fost exact bugul de dinainte).
   La verificări măsoară pe CĂRȚI, nu pe containerul lor: `#handSouth` e mai scund
   decât cărțile din el, deci o suprapunere cu masa nu apare în rect-ul containerului.
   Și nu te lua după `getComputedStyle` imediat după o schimbare de dimensiune —
   valorile de container-query se așază cu o trecere întârziere și mint. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .table-area {
  position: absolute !important; top: calc(var(--ui) * 25) !important; bottom: calc(var(--ui) * 23 + var(--u) * 28) !important; left: 50% !important;
  transform: translateX(-50%) !important; width: calc(var(--u) * 98) !important; height: var(--table-size) !important;
  /* top + bottom + height + margin auto = centrare pe verticală în banda dintre oponenți și mână */
  margin-top: auto !important; margin-bottom: auto !important;
  max-width: none !important; max-height: none !important; margin: auto 0 !important; overflow: visible !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-rail-live {
  position: relative !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
  --tb-rail-pad: calc(var(--u) * 6.5); padding: calc(var(--u) * 6.5) !important; box-sizing: border-box !important;
  border-radius: calc(var(--u) * 4.5) !important; overflow: hidden !important; margin: 0 !important;
  display: flex !important; align-items: stretch !important;
  background:
    radial-gradient(circle at 20% 4%, #160c04 0 calc(var(--u) * 1.2), #4a2c12 calc(var(--u) * 1.2) calc(var(--u) * 1.6), transparent calc(var(--u) * 1.9)),
    radial-gradient(circle at 50% 4%, #160c04 0 calc(var(--u) * 1.2), #4a2c12 calc(var(--u) * 1.2) calc(var(--u) * 1.6), transparent calc(var(--u) * 1.9)),
    radial-gradient(circle at 80% 4%, #160c04 0 calc(var(--u) * 1.2), #4a2c12 calc(var(--u) * 1.2) calc(var(--u) * 1.6), transparent calc(var(--u) * 1.9)),
    radial-gradient(circle at 20% 96%, #160c04 0 calc(var(--u) * 1.2), #4a2c12 calc(var(--u) * 1.2) calc(var(--u) * 1.6), transparent calc(var(--u) * 1.9)),
    radial-gradient(circle at 50% 96%, #160c04 0 calc(var(--u) * 1.2), #4a2c12 calc(var(--u) * 1.2) calc(var(--u) * 1.6), transparent calc(var(--u) * 1.9)),
    radial-gradient(circle at 80% 96%, #160c04 0 calc(var(--u) * 1.2), #4a2c12 calc(var(--u) * 1.2) calc(var(--u) * 1.6), transparent calc(var(--u) * 1.9)),
    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),
    linear-gradient(180deg, #c08a47 0%, #8c5a2a 16%, #6c4019 50%, #8c5a2a 84%, #c08a47 100%) !important;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0,0,0,.6), inset 0 2px 4px rgba(255,225,180,.35), inset 0 -6px 14px rgba(0,0,0,.55), 0 0 0 1px #2a1708 !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-rail-live::before { display: none !important; }
/* chenarul dintre lemn și felt: AURIU, aceeași paletă ca plăcile jucătorilor și rama cărților
   (era argintiu — singurul element din altă familie de pe masă).
   GROSIMEA lui = padding − inset, deci cele două se reglează ÎMPREUNĂ: dacă îngroși doar rama,
   se îngroașă chenarul, nu lemnul. 6.5 − 4.55 = ~8px chenar, restul lemn. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-rail-live::after {
  content: '' !important; position: absolute !important; inset: calc(var(--u) * 4.55) !important; border-radius: calc(var(--u) * 3) !important; z-index: 0 !important;
  background: linear-gradient(180deg, #ffe9ae 0%, #e2b87c 25%, #b07838 55%, #c9a961 80%, #7a4a1e 100%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,240,200,.7) !important;
}
/* felt ROȘU pătrat care UMPLE (era border-radius:999px + max-height:224px) */
.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 {
  position: relative !important; z-index: 1 !important;
  width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  align-self: stretch !important; flex: 1 1 auto !important; border: none !important; border-radius: calc(var(--u) * 2.5) !important;
  /* citește variabila setată de butonul „Culoare masă" (body[data-septica-felt]),
     cu roșul de dinainte ca implicit. Scris fix, ignora complet variabila pe mobil. */
  background: var(--tb-felt-base, linear-gradient(160deg, #a82020 0%, #7c1313 55%, #5a0d0d 100%)) !important;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), inset 0 6px 18px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.5) !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) .table-felt::before {
  content: '' !important; position: absolute !important; inset: 4% !important; border: 1.5px solid rgba(255,255,255,.10) !important;
  border-radius: calc(var(--u) * 2) !important; background: none !important; box-shadow: none !important; pointer-events: none !important; z-index: 0 !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) .table-felt::after { border-radius: calc(var(--u) * 2) !important; }

/* emblemă centrală „ȘEPTICA" — scalată pt. masă mică */
/* emblema sus de tot: nativ e la 50% (centrul feltului), unde stă sub cărțile jucate
   și nu se vede niciodată. La 13% cercul ei de 90px ajunge la 3px de marginea de sus;
   sub 13% începe să iasă din felt. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-emblem-live { top: 13% !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-emblem-live::before { width: calc(var(--u) * 22) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-emblem-live .te-spade { font-size: calc(var(--u) * 6) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-emblem-live .te-brand { font-size: calc(var(--u) * 3) !important; letter-spacing: .3em !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-emblem-live .te-suits { font-size: calc(var(--u) * 2) !important; }

/* cărți pe MASĂ (jucate) — mici, cu față proporțională */
/* zona de joc are nativ fundal propriu (radial negru 4-10% + umbră interioară + radius 10px).
   Pe desktop, pe masa ovală, e o adâncitură subtilă. Pe mobil are 342px într-un felt de 358,
   adică aproape toată lățimea → se citea ca o bandă de altă culoare peste felt. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tableCards { background: none !important; box-shadow: none !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tableCards .card { width: calc(var(--u) * 13) !important; height: auto !important; aspect-ratio: 5/7 !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tableCards .card.tbf .tbc-center { font-size: calc(var(--u) * 5.2) !important; }
.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: calc(var(--u) * 2.2) !important; top: calc(var(--u) * 0.4) !important; left: calc(var(--u) * 0.4) !important; bottom: calc(var(--u) * 0.4) !important; right: calc(var(--u) * 0.4) !important; }

/* ══ OPONENȚI: rând sus, aceeași construcție ca crest-ul de jos ═══════════════
   Scaunul e doar container transparent; „obiectul" vizual e placa (.player-details)
   cu ramă aurie, peste care avatarul iese în stânga — identic cu #infoSouth. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-west,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-north,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-east {
  position: absolute !important; top: calc(var(--ui) * 2) !important; bottom: auto !important; right: auto !important; z-index: 25 !important;
  transform: none !important; margin: 0 !important; width: 31% !important; max-width: 31% !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important;
  padding: 0 !important; border-radius: 0 !important; border: none !important;
  background: none !important; box-shadow: none !important; overflow: visible !important;
}
/* ── LOCURILE CARE NU EXISTĂ ÎN MODUL CURENT ────────────────────────────────
   Regula de mai sus pune `display: flex !important` pe vest/nord/est. Cât timp
   selectorul era `.game-4p` nu atingea 2P/3P; de când l-am extins la `:is(...)`
   prinde toate modurile și bate:
     · `body.game-active .game-2p .seat-west {display:none}` din septica-pro.css
       — (0,3,1) față de (0,4,0) al regulii de sus: 4 clase bat 3;
     · `style.display='none'` pe care JS-ul îl pune pe locurile inactive
       (`!important` bate stilul inline fără important).
   Efect: o masă creată pentru 2 jucători arăta ca una de 4, cu locuri goale
   vest/est. Aceeași specificitate (4 clase), dar scrise DUPĂ, deci câștigă. ── */
.game-play-container.game-2p .player-seat.seat-west,
.game-play-container.game-2p .player-seat.seat-east,
.game-play-container.game-3p .player-seat.seat-west { display: none !important; }
/* plasă pentru orice loc ascuns dinamic de JS (locuri libere, spectatori):
   fără ea, `!important`-ul de mai sus ar continua să învingă stilul inline */
.game-play-container[class*="game-"] .player-seat[style*="display: none"],
.game-play-container[class*="game-"] .player-seat[style*="display:none"] { display: none !important; }

/* placa = fundal închis + ramă aurie în degrade, ca #infoSouth .player-details */
.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: 1 1 auto !important; min-width: 0 !important;
  border: 2px solid transparent !important; border-radius: calc(var(--ui) * 6) calc(var(--ui) * 3) calc(var(--ui) * 3) calc(var(--ui) * 6) !important;
  margin-left: calc(var(--ui) * -3.5) !important; padding: calc(var(--ui) * 0.8) calc(var(--ui) * 1.2) calc(var(--ui) * 0.8) calc(var(--ui) * 4.6) !important;
  background: linear-gradient(135deg, rgba(26,17,9,.97), rgba(12,8,4,.98)) padding-box,
              linear-gradient(160deg,#e2b87c,#b07838 28%,#7a4a1e 58%,#4a2c12) border-box !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.42) !important;
}
/* e rândul lui: ramă aurie aprinsă + halou (clasa exista în cod, dar nu făcea nimic vizual) */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-west.active-turn .player-details,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-north.active-turn .player-details,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-east.active-turn .player-details {
  background: linear-gradient(135deg, rgba(46,33,14,.97), rgba(24,16,6,.98)) padding-box,
              linear-gradient(160deg,#ffe9ae,#e2b87c 30%,#b07838 65%,#7a4a1e) border-box !important;
  box-shadow: 0 0 0 1.5px rgba(255,215,0,.55), 0 4px 14px rgba(0,0,0,.7), 0 0 14px rgba(255,215,0,.5) !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-west  { left: 1.5% !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-north { left: 34.5% !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-east  { left: 67.5% !important; }
.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; padding: 0 !important; min-width: 0 !important; flex: 1 1 auto !important; width: 100% !important; margin: 0 !important; transform: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; }
/* avatarul stă PESTE placă (z-index), cu inel auriu identic cu #avatarSouth */
.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 {
  width: calc(var(--ui) * 8) !important; height: calc(var(--ui) * 8) !important; min-width: calc(var(--ui) * 8) !important; z-index: 2 !important;
  box-shadow: 0 0 0 2px rgba(255,215,0,.85), 0 2px 6px rgba(0,0,0,.7), inset 0 1px 3px rgba(255,255,255,.2) !important;
}
/* fără letter-spacing: Cinzel e lată, iar fiecare px contează pe 82px utili */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-north .player-name,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-west .player-name,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .player-name { font-size: calc(var(--ui) * 2.9) !important; letter-spacing: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* chip-ul cu numărul de cărți iese: e redundant, cărțile se văd sub placă */
.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: none !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-north .player-meta,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-west .player-meta,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .player-meta { gap: calc(var(--ui) * 0.8) !important; align-items: center !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-north .meta-item,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-west .meta-item,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .meta-item { font-size: calc(var(--ui) * 2.9) !important; padding: calc(var(--ui) * 0.2) calc(var(--ui) * 1) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-north .meta-item .material-symbols-rounded,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-west .meta-item .material-symbols-rounded,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .meta-item .material-symbols-rounded { font-size: calc(var(--ui) * 3.2) !important; }
/* punctele primesc aceeași pastilă ca balanța, ca să citească drept pereche */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-north .meta-item:not(.meta-balance),
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-west .meta-item:not(.meta-balance),
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .meta-item:not(.meta-balance) { background: rgba(255,255,255,.06) !important; border-radius: calc(var(--ui) * 2) !important; }
.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 { padding: calc(var(--ui) * 0.3) calc(var(--ui) * 1.4) !important; }
/* spatele cărților = SUB placă, nu în ea. În calc(var(--ui) * 31) nu încap și numele și cărțile;
   dedesubt e oricum gol (50px între oponenți și masă), deci nu costă nimic.
   min-height/padding sunt rămășițe desktop care făceau vest/est mai înalte ca nord. */
.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 {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important;
  margin: calc(var(--ui) * -0.6) 0 0 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
  gap: 0 !important; width: auto !important; flex: 0 0 auto !important; z-index: 26 !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: calc(var(--u) * 5.5) !important; height: auto !important; aspect-ratio: 5/7 !important;
  min-width: 0 !important; min-height: 0 !important; max-height: none !important;
  margin: 0 !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.55) !important;
}
/* suprapuse ca o mână ținută, nu cutii răzlețe */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-north .player-hand .card + .card,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-west .player-hand .card + .card,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .player-hand .card + .card { margin-left: calc(var(--u) * -1.9) !important; }

/* ══ JUCĂTOR jos: CĂRȚI pe tot rândul → dedesubt crest ȘI dock, unul lângă altul ═══
   Grid 2 coloane egale: rândul 1 = mâna (ambele coloane), rândul 2 = crest | dock.

   Ancorat de MARGINEA DE JOS: cărțile tale stau în fața ta, ca la o masă reală, iar
   masa plutește deasupra. Ancorarea de masă (`top`) le lipea de lemn și, la masă mică,
   lăsa un gol mare dedesubt. `bottom` fix + gpc care ține cont de footer = crest-ul
   rămâne vizibil pe orice înălțime de ecran. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-south {
  position: absolute !important; top: auto !important; bottom: calc(var(--ui) * 2) !important; left: 0 !important; right: 0 !important;
  width: 100% !important; max-width: 100% !important; height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-areas: "hand hand" "crest dock" !important;
  grid-template-rows: auto calc(var(--ui) * 20) !important;
  align-items: center !important; justify-items: stretch !important;
  gap: calc(var(--ui) * 1.8) calc(var(--ui) * 2) !important; transform: none !important; margin: 0 !important;
  padding: 0 4% !important;
  border-radius: 0 !important; border: none !important; background: none !important; box-shadow: none !important;
}
/* CĂRȚILE MELE = sus, rând, față proporțională (#handSouth .card are px pe ID în desktop) */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth {
  grid-area: hand !important; justify-self: center !important;
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: calc(var(--ui) * 1) !important;
  width: auto !important; max-width: 92% !important; height: auto !important; min-height: 0 !important;
  justify-content: center !important; align-items: flex-end !important;
  overflow: visible !important; position: relative !important; padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important;
  margin-left: auto !important; margin-right: auto !important;
  align-self: center !important;
}
/* 20·u = lățimea cărții, deci 28·u înălțimea (raport 5/7). Cele două cifre apar și în
   bugetul de sus (133 = 105 + 28) și în `bottom`-ul mesei — schimbi una, le schimbi pe toate,
   altfel masa ajunge peste mână. Vezi `--card-size`, care ține aceeași valoare. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth .card {
  width: calc(var(--u) * 20) !important; height: auto !important; aspect-ratio: 5/7 !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important;
  margin: 0 !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth .card.tbf .tbc-center { font-size: calc(var(--u) * 8) !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 { font-size: calc(var(--u) * 3.4) !important; top: calc(var(--u) * 0.5) !important; left: calc(var(--u) * 0.5) !important; bottom: calc(var(--u) * 0.5) !important; right: calc(var(--u) * 0.5) !important; }
/* crest = jumătatea stângă */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth {
  grid-area: crest !important; width: 100% !important; height: auto !important; align-self: center !important;
  transform: none !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: calc(var(--ui) * 1) !important;
}
/* pastila crește din PADDING, nu întinsă pe înălțime — altfel rama de lemn se deformează */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .player-details {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
  border: 2px solid transparent !important; border-radius: calc(var(--ui) * 6) calc(var(--ui) * 3) calc(var(--ui) * 3) calc(var(--ui) * 6) !important; margin-left: calc(var(--ui) * -4) !important; padding: calc(var(--ui) * 1.84) calc(var(--ui) * 0.8) calc(var(--ui) * 1.84) calc(var(--ui) * 5) !important;
  background: linear-gradient(135deg, rgba(26,17,9,.97), rgba(12,8,4,.98)) padding-box, linear-gradient(160deg,#e2b87c,#b07838 28%,#7a4a1e 58%,#4a2c12) border-box !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.42) !important;
}
.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: calc(var(--ui) * 8.5) !important; height: calc(var(--ui) * 8.5) !important; min-width: calc(var(--ui) * 8.5) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .meta-item { padding: calc(var(--ui) * 0.3) calc(var(--ui) * 0.6) !important; min-width: 0 !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .meta-item > span:not(.material-symbols-rounded) { font-size: calc(var(--ui) * 2.5) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .meta-item::after { font-size: calc(var(--ui) * 1.4) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .meta-item.meta-balance > span:not(.material-symbols-rounded) { font-size: calc(var(--ui) * 2.8) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .player-name { max-width: 44% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* dock = jumătatea dreaptă, aceeași înălțime ca crest-ul */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 {
  grid-area: dock !important; position: static !important; transform: none !important; right: auto !important; top: auto !important;
  display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important;
  padding: calc(var(--ui) * 0.8) calc(var(--ui) * 1.4) !important; margin: 0 !important; align-self: center !important;
  border-radius: calc(var(--ui) * 4) !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 * { min-width: 0 !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-label { font-size: calc(var(--ui) * 1.6) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-name { font-size: calc(var(--ui) * 2.3) !important; max-width: 20% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-round { font-size: calc(var(--ui) * 1.8) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-timer { font-size: calc(var(--ui) * 2) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-tools { gap: calc(var(--ui) * 1.2) !important; justify-content: center !important; align-items: center !important; }
/* butoanele: pătrate. Fără padding:0 + border-box ieșeau 26×44 (dreptunghiuri înalte) */
/* Podea de 32px pe ținta de atingere. `--ui` e plafonat la 4.6px, deci
   6.2 × ui nu putea depăși 28px — măsurat 24.1px pe iPhone 15. Un buton de
   24px nu se nimerește cu degetul, oricât de frumos ar scala.
   Cele 5 butoane × 32px + 4 spații ≈ 179px, sub lățimea celui mai îngust
   dispozitiv din listă (280px), deci dock-ul nu se revarsă. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-btn {
  /* CORECTAT: coeficientul era 6.2, iar `--ui` e plafonat la 4.6px — deci
     6.2·ui ≤ 28.5px, mereu sub podeaua de 32. Ramura cu `--ui` nu putea câștiga
     NICIODATĂ: butoanele erau fix 32px pe orice ecran, adică 55% din rândul
     dock-ului la `--ui` minim și 35% la maxim. Ca expresia să fie vie, coeficientul
     trebuie să depășească 32/ui undeva în interval; cu 8 pornește de la ui≈4.0 în
     sus (tablete), iar sub el rămâne podeaua de 32px, care e și minimul decent
     pentru o țintă de atins. Verificat că 8·4.6 = 36.8px încape în rândul de
     20·ui = 92px: 7 padding + 14 td-top + 12 td-mid + 36.8 = 70px. */
  width: max(32px, calc(var(--ui) * 8)) !important; height: max(32px, calc(var(--ui) * 8)) !important;
  min-width: max(32px, calc(var(--ui) * 8)) !important; min-height: 0 !important;
  padding: 0 !important; box-sizing: border-box !important; border-radius: calc(var(--ui) * 1.6) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-btn .material-symbols-rounded { font-size: calc(var(--ui) * 3.4) !important; line-height: 1 !important; }
/* popover-ul „Culoare masă": era 183×58 (cât tot dock-ul), cu buline 28×44 — adică
   elipse, deși au border-radius:50%. Aceeași cauză ca la butoanele dock: padding vertical. */
.tb-felt-popover { padding: calc(var(--ui) * 1.2) calc(var(--ui) * 1.6) !important; gap: calc(var(--ui) * 1.2) !important; border-radius: calc(var(--ui) * 4) !important; }
.tb-felt-dot {
  width: calc(var(--ui) * 6) !important; height: calc(var(--ui) * 6) !important; min-width: calc(var(--ui) * 6) !important; min-height: 0 !important;
  padding: 0 !important; box-sizing: border-box !important; flex: 0 0 auto !important; border-radius: 50% !important;
}

/* ── TIMER apă pe avatarul activ — scalat ── */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tab-water-num .tw-sec { font-size: calc(var(--ui) * 3.2) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tab-water-num .tw-label { font-size: calc(var(--ui) * 1.7) !important; }

/* ══ CĂRȚI „premium auriu" — se leagă de rama mesei și de plăcile jucătorilor ═══
   Colțul era 3.3px FIX: sub 4% pe o carte de 91px (arăta ca un dreptunghi tăiat) și
   prea mare pe spatele de 23px. Procentele scalează corect la ambele.
   Chenarul interior e ::after cu inset în %, deci ține pasul cu orice dimensiune.
   ::before/::after erau libere pe .card (verificat: content=none). */
.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: 7% / 5% !important;
  background: linear-gradient(160deg,#fefcf6,#f5eeda) !important;
  border: 0.8px solid #c9a961 !important;
  position: relative !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 {
  content: '' !important; position: absolute !important; inset: 5% !important;
  border: 1px solid rgba(201,169,97,.75) !important; border-radius: 5% / 3.5% !important;
  pointer-events: none !important;
}
/* INDEX în colț, ca pe o carte reală. Nativ `.tbc-tl` are align-items:center pe o cutie
   cât toată cartea → rank-ul ieșea CENTRAT SUS. inset 7% > chenarul de 5%, deci cifrele
   stau în interiorul firului auriu, nu peste el. */
.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 {
  top: 7% !important; left: 7% !important; right: 7% !important; bottom: 7% !important;
  align-items: flex-start !important; justify-content: flex-start !important;
}
/* simbolul mic de sub rank = 70% din rank (erau egale) */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth .card.tbf .tbc-tl > *:last-child,
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth .card.tbf .tbc-br > *:last-child,
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tableCards .card.tbf .tbc-tl > *:last-child,
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tableCards .card.tbf .tbc-br > *:last-child { font-size: 0.7em !important; line-height: 1 !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth .card.tbf .tbc-tl > *:first-child,
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth .card.tbf .tbc-br > *:first-child,
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tableCards .card.tbf .tbc-tl > *:first-child,
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tableCards .card.tbf .tbc-br > *:first-child { line-height: 1 !important; }
/* pip central = 40% din lățimea cărții (era ~47%) — valorile stau la regulile de mai sus */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .card.tbf.red .tbc { color: #a5281b !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .card.tbf:not(.red) .tbc { color: #17140f !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .card.tbf .tbc-tl,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .card.tbf .tbc-br { font-family: Georgia,'Times New Roman',serif !important; font-weight: 700 !important; }
/* spatele: selector lung fiindcă o regulă din septica-pro.css ținea colțul la 3px */
.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-north .player-hand .card-back,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .player-hand .card-back {
  border-radius: 7% / 5% !important;
  background: linear-gradient(160deg,#2a1a0c,#140c05) !important;
  border: 0.8px solid #c9a961 !important;
  position: relative !important;
}
.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-north .player-hand .card-back::after,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .player-hand .card-back::after {
  content: '' !important; position: absolute !important; inset: 12% !important;
  border-radius: 4% !important; pointer-events: none !important;
  background: repeating-linear-gradient(45deg, rgba(201,169,97,.22) 0 1px, transparent 1px 4px),
              repeating-linear-gradient(-45deg, rgba(201,169,97,.22) 0 1px, transparent 1px 4px) !important;
}
/* monograma ♠ din centrul spatelui */
.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-north .player-hand .card-back::before,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .player-hand .card-back::before {
  content: '\2660' !important; position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: rgba(201,169,97,.8) !important; font-size: calc(var(--u) * 1.5) !important; line-height: 1 !important;
  pointer-events: none !important; z-index: 1 !important;
}

/* ── CĂRȚI JUCABILE: DOAR halou verde, bordura rămâne aurie ──
   Cu `border` verde acopereai designul: în Șeptică aproape toate cărțile din mână
   sunt jucabile, deci nu se vedea niciodată rama aurie. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth .card.playable {
  border: 0.8px solid #c9a961 !important;
  box-shadow: 0 0 10px rgba(16,185,129,.55), 0 0 0 2px rgba(16,185,129,.45) !important;
}

/* ── HEADER: subtitlu ascuns pe mobil mic (deja în desktop @575) ── */
.top-bar .brand-title::after { display: none !important; }

/* ── Overlay-uri MP pe masă (revanșă, masă expirată): scalate pentru mobil.
      Nativ au min-width 220px și fonturi în px, gândite pentru masa desktop.

      CENTRARE. Overlay-ul e `position: static` cu `margin: 0` într-un părinte
      bloc, deci stătea lipit stânga-sus — decalat 43px față de centrul ecranului.
      Pe orizontală rezolvă marginile auto. Pe verticală e nevoie de `flex: 0 0 auto`
      pe container: cu `1 1 0%` el CREȘTEA și umplea coloana, așa că
      `justify-content: center` nu mai avea spațiu liber de distribuit — de asta
      `height: auto` singur nu schimba nimic.
      Gătat pe `room-waiting` INTENȚIONAT: în joc overlay-ul stă peste masă, iar
      înălțimea containerului e chiar geometria mesei — acolo nu se atinge. ── */
body.room-waiting .game-area:has(.mp-table-overlay) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.room-waiting .game-play-container[class*="game-"]:has(.mp-table-overlay) {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
}
.mp-table-overlay {
    min-width: 0 !important; width: 100% !important; max-width: min(340px, 86%) !important;
    margin-left: auto !important; margin-right: auto !important;
    align-items: center !important; text-align: center !important;
    padding: calc(var(--ui) * 6.3) calc(var(--ui) * 5.4) !important;
    gap: calc(var(--ui) * 2.4) !important; border-radius: calc(var(--ui) * 4.4) !important;
}
/* ierarhie: pictograma dă tonul, titlul e ferm, explicația se retrage, acțiunea e evidentă */
.mp-table-overlay .mp-overlay-icon { font-size: calc(var(--ui) * 10.7) !important; line-height: 1 !important;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)) !important; }
.mp-table-overlay .mp-overlay-title { font-size: calc(var(--ui) * 4.6) !important; font-weight: 700 !important;
    letter-spacing: .2px !important; line-height: 1.25 !important; }
/* 30ch = lungimea de rând la care textul rămâne ușor de urmărit */
.mp-table-overlay .mp-overlay-subtitle { font-size: calc(var(--ui) * 3.2) !important; line-height: 1.5 !important;
    opacity: .82 !important; max-width: 30ch !important; margin: 0 auto !important; }
.mp-table-overlay .mp-btn-primary { width: 100% !important; justify-content: center !important;
    padding: calc(var(--ui) * 2.7) calc(var(--ui) * 4.4) !important;
    font-size: calc(var(--ui) * 3.3) !important; border-radius: calc(var(--ui) * 2.9) !important; }
.mp-pending-spinner { width: calc(var(--ui) * 11) !important; height: calc(var(--ui) * 11) !important; border-width: calc(var(--ui) * 0.9) !important; }

/* ── Modalul „Creează Masă" (MP) pe mobil ───────────────────────────────────
   Grila de DESKTOP (2 coloane, ca la Tabinet) rămânea și pe telefon, cu coloane
   de 145px. Butoanele de opțiuni au `min-width: 60px`, deci intrau doar două pe
   rând: „Jucători" ocupa 121px, iar „Miză" (5 opțiuni) se rupea în 4+1 și lua
   197px de una singură. O coloană = controale pe toată lățimea, ca la Tabinet
   și Holdem pe mobil. Măsurat după: „Jucători" 69px, „Miză" 93px, totul pe un rând.

   ATENȚIE: modalul e `position: fixed` pe <body>, deci ÎN AFARA containerului —
   `--ui` NU ajunge aici (aceeași capcană ca la `.nav-rail`). Valori fixe. ── */
.mp-modal-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.mp-modal-card { width: 94% !important; max-width: 520px !important; padding: 18px 16px !important; }
.mp-modal-field { margin-bottom: 14px !important; }
.mp-opt-btn { flex: 1 1 auto !important; min-width: 0 !important; text-align: center !important; }
/* acțiunile rămân la îndemână, nu pierdute la capătul derulării */
.mp-modal-actions {
    position: sticky !important; bottom: -18px !important;
    background: linear-gradient(180deg, transparent, var(--color-bg-secondary) 22%) !important;
    padding-top: 10px !important; padding-bottom: 4px !important;
}

/* ── Reclamele = ascunse pe mobil (cerință) ── */
.lobby-ad, .lobby-ad-card { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RESTUL LINIILOR DESKTOP transformate (FIXURI FINALE + audit) — mobile units
   ══════════════════════════════════════════════════════════════════════════ */

/* — oponenți: înălțime/gap (padding stă pe placă acum, nu pe scaun) — */
.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 {
  height: auto !important; min-height: 0 !important; max-height: none !important;
  gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important;
  padding: 0 !important;
}
.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 { gap: calc(var(--ui) * 0.4) !important; min-width: 0 !important; overflow: visible !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-north .meta-item:not(.meta-balance) .material-symbols-rounded,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-west .meta-item:not(.meta-balance) .material-symbols-rounded,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-east .meta-item:not(.meta-balance) .material-symbols-rounded { font-size: calc(var(--ui) * 3.2) !important; }
/* avatar oponent: flex-basis în vw (era flex:0 0 40px) */
.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 { flex: 0 0 calc(var(--ui) * 8) !important; max-height: calc(var(--ui) * 8) !important; min-height: calc(var(--ui) * 8) !important; }

/* — crest jos: nume 12.5px → vw, bordură 5.6px → mobil (deja avem player-details mai sus) — */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #nameSouth { font-size: calc(var(--ui) * 2.3) !important; letter-spacing: calc(var(--ui) * 0.15) !important; }
.game-play-container:is(.game-2p,.game-3p,.game-4p) .seat-south #infoSouth .player-details { border-width: calc(var(--ui) * 0.5) !important; }
/* CORECTAT: era `max(1px, calc(var(--ui) * 0.5))`. Cu `--ui` între 2.9 și 4.6px,
   0.5·ui e între 1.45 și 2.3px — deci mereu peste 1px și podeaua nu se activa
   niciodată. Scoasă, ca să nu pară că regula are o protecție pe care n-o are. */
/* mâna mea: fără ramă (cărțile stau direct) — deja setat, reconfirmat */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #handSouth { border: none !important; box-shadow: none !important; background: none !important; }

/* — footer: pe mobil rămâne bară plutitoare + butoane text-only (transformat px→ok) — */
body.game-active:not(.room-waiting) .nav-rail { left: 2vw !important; right: 2vw !important; bottom: 1dvh !important; border-radius: 4vw !important; padding: 1vw 3vw !important; }
body.game-active:not(.room-waiting) .nav-bar-btn { height: auto !important; min-height: 0 !important; padding: 1vw 2vw !important; }

/* — CONTEXT-PANEL (Chat, Mese): pe mobil = FULL-SCREEN, nu 320px lateral —
   Două lucruri sunt obligatorii aici, nu decorative:

   1. `max-height: none`. În septica-pro.css există
      `@media (max-width:768px) and (orientation:portrait) { .context-panel {
      height:50vh !important; max-height:50vh !important } }`. Regula asta bate
      `height` (aceeași specificitate, fișier încărcat mai târziu) dar nu atingea
      `max-height` — panoul rămânea plafonat la JUMĂTATE de ecran: 458px din 915,
      cu 409px goi dedesubt.

   2. `top: 0`, nu 48. Tot în septica-pro.css, un bloc de 21 de reguli
      („CONTEXT PANEL ACTIV ÎN JOC — Comprimare în 50vh") comprimă jocul când
      panoul e deschis: ascunde headerul (`height:0`), taie `.game-canvas` la
      `50dvh`, strânge scaunele la 44px. Logica era corectă pentru foaia de
      jumătate de ecran, dar cu panoul întins headerul ascuns doar RIDICĂ masa,
      care se ivea în banda de sus. Pornind panoul de la 0 acoperim și banda aia:
      headerul ascuns devine consecvent cu un panou întins pe tot ecranul, iar
      panoul își are oricum propriul titlu și buton de închidere.
      Verificat cu `elementFromPoint` în 5 puncte din banda de sus: peste tot
      răspunde panoul, nicăieri jocul.

   Butonul Setări deschide un modal, iar Meniu o foaie de jos cu z-index 2000 —
   alea sunt încadrate corect, nu au nevoie de nimic aici. */
.context-panel {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important;
  border-radius: 0 !important; border-left: none !important; box-shadow: none !important; z-index: 200 !important;
}
/* panoul urcă până la marginea de sus, deci preia el grija decupajului (notch) */
.context-panel .panel-header { padding: calc(3vw + var(--safe-area-inset-top, 0px)) 4vw 3vw !important; }
.context-panel .panel-title { font-size: 4.2vw !important; }
.context-panel .panel-back, .context-panel .panel-close { width: 9vw !important; height: 9vw !important; min-width: 9vw !important; }
/* Bara plutitoare din footer are z-index 1030, panoul 200 — deci footerul stă
   PESTE panou și ar acoperi ultimele rânduri. 130px de spațiu la capătul derulării
   le scot de sub el: panoul se termină la marginea ecranului, iar ultimul pixel de
   conținut cade cu ~6px deasupra barei. Dacă bara își schimbă înălțimea, simptomul
   e doar puțin gol în plus la final — nu conținut tăiat. */
.context-panel .panel-content { padding: 3vw 3vw 130px !important; overflow-y: auto !important; }

/* — pastilă „flip" balanță (PUNE/CAPTURĂ) — font relativ mic ok pe mobil — */
.tb-pill-t { font-size: calc(var(--ui) * 3) !important; }

/* — tooltip jucător (woi) pe mobil: puțin mai lat, fonturi ok (px mici, rămân) — */
.tb-opp-tip-fixed { width: 56% !important; max-width: 56% !important; }

/* ══════════════════════════════════════════════════════════════════
   SALA DE AȘTEPTARE — masa iese din ecuație (mobil)
   Regulile de mai sus impun geometria mesei necondiționat: `.table-area`
   absolut, cu `height: var(--table-size)`, iar `.tb-rail-live` cu `overflow:hidden`.
   În sala de așteptare panoul se randează ÎN acel oval și iese tăiat.
   (Liniile 40-42 gardau deja niște reguli pe `:not(.room-waiting)` — restul nu.)

   Specificitate: regulile de mai sus sunt `.game-play-container:is(.game-2p,.game-3p,.game-4p) X`
   = 3 clase. Aici prefixăm cu `body.room-waiting` ȘI păstrăm lanțul, deci
   4 clase + 1 element — altfel n-ar câștiga în cascadă.
   Fișierul e încărcat doar sub 992px (media pe <link>), deci fără @media aici.
   ══════════════════════════════════════════════════════════════════ */
body.room-waiting .game-play-container[class*="game-"] #tb-dock-live2,
body.room-waiting .game-play-container[class*="game-"] .tb-emblem-live,
body.room-waiting .game-play-container[class*="game-"] .table-deck,
body.room-waiting .game-play-container[class*="game-"] .player-seat,
body.room-waiting .game-play-container.game-3p .player-seat,
body.room-waiting .game-play-container.game-2p .player-seat,
body.room-waiting .mw-ambient { display: none !important; }

body.room-waiting .game-play-container[class*="game-"] {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
}
body.room-waiting .game-play-container[class*="game-"] .table-area {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
}
body.room-waiting .game-play-container[class*="game-"] .tb-rail-live {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
}
body.room-waiting .game-play-container[class*="game-"] .tb-rail-live::before,
body.room-waiting .game-play-container[class*="game-"] .tb-rail-live::after,
body.room-waiting .game-play-container[class*="game-"] .table-felt::before,
body.room-waiting .game-play-container[class*="game-"] .table-felt::after { display: none !important; }
body.room-waiting .game-play-container[class*="game-"] .table-felt,
body.room-waiting .game-play-container[class*="game-"] .table-felt.enhanced-3d {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transform: none !important;
}
body.room-waiting #tableMessage {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    transform: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block !important;
}

/* Înălțimea panoului NU se mai calculează aici. Era `calc(100dvh - 140px)` —
   `dvh` se schimbă cu bara browserului, diferit de la un telefon la altul, iar
   140 era un număr inventat: de asta „nu se vedea ok pe toate dispozitivele".
   Acum coboară prin lanț din `.game-area` (vezi septica-pro.css, blocul
   „încadrare fără matematică de viewport"), deci se potrivește oriunde. */
body.room-waiting .game-area {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--color-accent-rgb),.10), transparent 70%),
        linear-gradient(180deg, rgb(8,8,10), rgb(12,12,16)) !important;
    padding: 10px !important;
}

/* ── SALA DE AȘTEPTARE: încadrare pe VERTICALĂ ──────────────────────────────
   Panoul are ~1250px de conținut (header, statistici, status, scaune, plus
   panoul lateral cu detalii/invitații/chat) pe un ecran de ~750px, deci TREBUIE
   să deruleze. `height: auto` de mai sus nu ajungea singur: containerul e flex
   item, iar `align-items: stretch` implicit îl întindea fix la înălțimea scenei,
   deci nu creștea după conținut, iar `overflow: hidden` tăia restul.
   Efectul: butonul „Sunt gata" rămânea sub ecran, inaccesibil — pe telefon NU
   puteai porni o masă privată. Măsurat înainte: buton la y=1263, scenă până la 801. */
body.room-waiting .game-area { align-items: flex-start !important; overflow-y: auto !important; }
/* Bara de jos e `position: fixed`, deci nu ocupă loc în flux: conținutul sălii
   derulează DEDESUBTUL ei. Pe Tabletă mică (800×1280) butonul „Sunt gata" se
   oprea exact sub bară — vizibil în ecran, dar acoperit complet de
   #drawerToggleBtn, deci imposibil de apăsat. Scanerul l-a raportat ca
   `reachable: readyBtn e în ecran dar complet acoperit`, în Chromium ȘI Firefox.
   Rezervăm cât ține bara (80px minim) plus zona sigură de jos. */
body.room-waiting .game-area {
    padding-bottom: calc(96px + var(--safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(96px + var(--safe-area-inset-bottom, 0px)) !important;
}
body.room-waiting .game-play-container[class*="game-"] {
    align-self: flex-start !important;
    overflow: visible !important;
}

/* ── SALA DE AȘTEPTARE: încadrare pe ORIZONTALĂ ─────────────────────────────
   Panoul e proiectat pe două coloane (main + aside), stivuite pe mobil de
   `@media (max-width:860px)` din septica-pro.css. Dar acolo pista e `1fr`, care
   are minim automat `min-content`: `.mw-lx-stats` ține două cutii cu text
   `nowrap`, deci pista se lățea peste container și tăia în dreapta (262px pe
   versiunea live). `minmax(0,1fr)` o lasă să se strângă — cutiile pot coborî
   până la 63px, măsurat, deci au loc berechet.
   Același prag de 860px ca designul, ca să nu ating intervalul 861-991px. */
@media (max-width: 860px) {
  body.room-waiting .mw-lx-room {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-areas: none !important;
      grid-template-rows: none !important;
  }
  body.room-waiting .mw-lx-main,
  body.room-waiting .mw-lx-aside { min-width: 0 !important; grid-area: auto !important; }
  body.room-waiting .mw-lx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   PEISAJ — DE FĂCUT, nu încercat cu numere

   Bugetul vertical nu are soluție cu aranjamentul din portret: pe iPhone 15
   peisaj 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. Rezultat măsurat:
   masa peste cărțile din mână, 28px.

   Am încercat de trei ori să repar din numere și de fiecare dată a ieșit mai
   rău — 22.7px, apoi 51.7px, apoi 47.6px. Motivul: mâna e așezată de GRILA
   containerului (`grid-area: hand`), iar masa plutește peste ea cu poziționare
   absolută. Orice loc câștigat din `top` sau `bottom`-ul mesei nu mișcă rândul
   mâinii, deci masa coboară peste cărți.

   Reparația corectă cere schimbat aranjamentul, nu constantele: în peisaj ai
   lățime din belșug și înălțime deloc, deci mâna trebuie să iasă din rândul de
   jos și să treacă lateral, iar adversarii să se strângă pe o singură bandă.
   Aia e o rescriere a grilei pentru peisaj, cu măsurători pe fiecare pas — nu
   o ajustare de valori.

   Până atunci NU punem reguli aici: o reparație greșită e mai rea decât un
   defect cunoscut. Scanerul îl raportează la fiecare rulare, cu cifra exactă. */


/* ══════════════════════════════════════════════════════════════════════════
   ADDENDUM PORTRET — audit rulat cu aceleași unelte ca la septica-landscape.css
   ──────────────────────────────────────────────────────────────────────────
   CE A IEȘIT CURAT, verificat și lăsat în pace:
     · specificitate — ZERO reguli inerte. Fiecare declarație din fișierul ăsta
       chiar câștigă în fața lui septica-pro.css. (În landscape, prin comparație,
       toată capsula oponenților era inertă și nu se desena niciodată.)
     · blocurile de peisaj cu gard învechit din septica-pro.css (`max-width: 812px`
       pentru chat, `768px` pentru modale) PRIND în portret — telefoanele au
       360-430px lățime. Problema aia e strict a peisajului.
     · `.seat-bubble`, `.capture-popup`, `.table-message` folosesc `clamp()` legat
       de `vw`, adică latura MICĂ în portret. Corect aici; doar rotit se strică.
     · bugetul vertical: pe telefoanele înalte `--u` e limitat de LĂȚIME prin
       `min(1cqw, …)`, nu de înălțime — masa are deja 98% din lățimea ecranului.
       Deci a elibera bandă de sus n-ar mări nimic acolo. Verificat pe 5 modele.

   CE SE REPARĂ MAI JOS: trei lucruri, dintre care primul e cel serios.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── P1. ZOOM-UL iOS LA ATINGEREA UNUI CÂMP ──────────────────────────────────
   Safari pe iPhone MĂREȘTE pagina la focus pe orice `input`, `textarea` sau
   `select` cu text sub 16px. Nu se poate opri cu `user-scalable=no` pe iOS
   modern. Găsite 18 câmpuri sub prag, toate moștenite din septica-pro.css și
   septica-features.css:

     .chat-input-field 13px   .chat-search-input 14px   .cmsg-input 13px
     .chat-input-container 12px   .mw-lx-chat-input 12px   .mp-modal-input 0.95rem
     .lobby-sort-select 12px   .mp-sort-select 11px   .count-btn 14px
     .friends-search-input 13px   .friend-chat-input 13px   .btm-field 10px  …

   Nu le enumăr — enumerarea ratează ce se adaugă mâine. Prind ELEMENTELE, cu
   excepția tipurilor care n-au text și deci nu declanșează zoom.
   `select`-urile intră și ele: iOS le mărește la fel ca pe inputuri. */

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; }

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;
}

/* ── P2. BULINA DE STATUS, singurul element din insignă rămas în px ──────────
   `.player-status` (pro:6244) are 14px lățime și bordură de 2px, valori pentru
   avatarul de 40px al desktopului — 35% din el. Aici avatarul e `8·ui`, deci:

     iPhone 15  avatar 31.4px  →  bulina 45%
     Galaxy S9+ avatar 28.8px  →  49%
     ecran 320  avatar 25.6px  →  55%

   E singurul copil al insignei pe care fișierul nu-l rescrie. Îl leg de avatar,
   cu raportul desktopului: 0.35 × 8·ui = 2.8·ui, bordura 14% din bulină. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-status {
  width: calc(var(--ui) * 2.8) !important; height: calc(var(--ui) * 2.8) !important;
  border-width: calc(var(--ui) * 0.4) !important;
  bottom: 0 !important; right: 0 !important;
}

/* ── P3. INIȚIALELE, când jucătorul n-are poză ───────────────────────────────
   `.tb-init` (pro:25325) are `font-size: 17px` — 42% dintr-un avatar de 40px.
   Pe avatarul de `8·ui` iese 52-66%, deci două litere nu mai încap în cerc și
   se lovesc de margine. Nu se vede des, fiindcă apare doar la conturile fără
   poză — de-aia a și scăpat. Același raport ca pe desktop: 0.42 × 8·ui. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-init {
  font-size: calc(var(--ui) * 3.36) !important;
}


/* ── P4. FELTUL: UN STRAT ÎN LOC DE ȘASE ─────────────────────────────────────
   Comparat cu desktopul, `septica-pro.css:25178`. Acolo feltul are șase
   straturi suprapuse; aici are unul:

     mobil:   linear-gradient(160deg, #a82020, #7c1313, #5a0d0d)
     desktop: 1 luciu diagonal · 2 țesătură la 45° · 3 lumina caldă de sus
              4+5 două arce aurii (9% / 91%) · 6 fondul RADIAL

   Al șaselea e cel care schimbă totul: desktopul are o VINIETĂ — colțuri
   întunecate, centru cald. Mobilul are o pantă dintr-un colț în altul. De-aia
   feltul arată plat pe telefon deși e aceeași culoare. Se vede în captură: roșul
   curge uniform de sus-stânga spre jos-dreapta, fără adâncime.

   Antetul fișierului promite „culorile/gradienții păstrați" — aici e singurul
   loc unde nu s-a ținut, probabil fiindcă cele șase straturi au cote în px care
   nu se traduceau direct. Arcele aurii au 13px pe o masă de 345px; aici masa are
   105·u, deci le dau în `--u`: 13/345 × 105 = 3.96·u.

   `var(--tb-felt-base, …)` rămâne la bază, altfel butonul „Culoare masă" nu mai
   are efect. (Comentariul de mai sus spune că variabila e ignorată pe mobil —
   nu e adevărat, codul o citește; era o notă rămasă de la o versiune veche.)

   Umbrele interioare le aliniez și pe ele: desktopul are 7px/22px/76px, aici
   erau 6px/18px/60px. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) .table-felt,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .table-felt.enhanced-3d,
.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-rail-live > .table-felt {
  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 calc(var(--u) * 3.96), rgba(233,196,90,.13) calc(var(--u) * 3.96) calc(var(--u) * 4.41), transparent calc(var(--u) * 4.56)),
    radial-gradient(circle at 91% 50%, transparent 0 calc(var(--u) * 3.96), rgba(233,196,90,.13) calc(var(--u) * 3.96) calc(var(--u) * 4.41), transparent calc(var(--u) * 4.56)),
    var(--tb-felt-base, radial-gradient(58% 64% at 50% 44%, #a01e1e 0%, #7c1313 46%, #560c0c 82%, #3e0808 100%)) !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;
}


/* ── P5. RAMA: 8 STRATURI ÎN LOC DE 12, ȘI NITURI PREA MICI ──────────────────
   Tot din comparația cu `septica-pro.css:25147`. Desktopul are 12 straturi de
   fundal pe ramă, aici sunt 8. Lipsesc: doi nituri LATERALI (la 1.8% și 98.2%),
   două fibre încrucișate (87deg și 90deg fin) și două lumini calde sus/jos.

   Iar niturile existente sunt mai mici decât trebuie, raportat la ramă:

     desktop:  nit 14px pe o ramă de 50px  =  28%
     mobil:    nit 1.2·u pe o ramă de 6.5·u =  18%

   Nu e o prăbușire ca în peisaj — în portret `--u` are valori sănătoase, deci
   niturile se VĂD, doar că sunt cu o treime mai mici decât pe desktop. Le duc la
   raportul lui: 0.28 × 6.5·u = 1.82·u, inelul 2.34·u, stingerea 2.6·u. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) .tb-rail-live {
  background:
    radial-gradient(circle at 30% 6%,   #160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    radial-gradient(circle at 50% 6%,   #160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    radial-gradient(circle at 70% 6%,   #160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    radial-gradient(circle at 30% 94%,  #160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    radial-gradient(circle at 50% 94%,  #160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    radial-gradient(circle at 70% 94%,  #160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    radial-gradient(circle at 1.8% 50%, #160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    radial-gradient(circle at 98.2% 50%,#160c04 0 calc(var(--u)*1.82), #4a2c12 calc(var(--u)*1.82) calc(var(--u)*2.34), transparent calc(var(--u)*2.6)),
    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;
}


/* ── P6. BANDA DE STATUS DIN FOOTER ──────────────────────────────────────────
   În captură, rândul de deasupra butoanelor arată: `+19264`, `00:13`, `1/8`,
   `0 - 0 - 0`. Toate patru sunt deja pe ecran, la 40px mai sus:

     +19264     →  chipul BALANȚĂ din crest
     00:13      →  cronometrul din dock
     1/8        →  „Runda 1/8" din dock
     0 - 0 - 0  →  PUNCTE din crest + „☆ 0" din fiecare insignă de oponent

   E exact raționamentul cu care ai scos-o tu în peisaj. Aici NU o ascund, din
   două motive: în portret e mai mult loc, iar pictograma din dreapta pare buton,
   nu afișaj — n-am de unde ști din CSS ce face, și n-o scot pe ghicite.

   O STRÂNG: 36px → 22px. Rezerva scenei coboară de la 104px la 86px, iar cei
   18px intră în `--u`:

     iPhone SE    masa 296 → 311px   +4.8%
     Galaxy S9+   masa 360 → 374px   +3.9%
     ecran 320    masa 240 → 254px   +5.9%
     iPhone 15    413 → 413px         0%   (masa e deja 98% din lățime)

   Pe telefoanele înalte `--u` e limitat de LĂȚIME prin `min(1cqw, …)`, deci
   spațiul eliberat se duce în aer, nu în masă. Câștigul e pe ecranele scunde.

   Dacă vrei să dispară complet, ca în peisaj, decomentează ultima regulă. */

body.game-active:not(.room-waiting) .nav-rail .status-bar {
  min-height: 22px !important; height: 22px !important;
  padding: 1px 6px !important; gap: 0 4px !important;
  overflow: hidden !important;
}
body.game-active:not(.room-waiting) .nav-rail .status-bar,
body.game-active:not(.room-waiting) .nav-rail .status-bar * {
  font-size: 10px !important; line-height: 1.1 !important;
}
body.game-active:not(.room-waiting) .game-canvas,
body.game-active:not(.room-waiting) .game-area {
  height: 100% !important; max-height: 100% !important;
}
.game-canvas, .game-area { height: calc(100dvh - 86px) !important; max-height: calc(100dvh - 86px) !important; }

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


/* ── P7. CĂRȚILE JUCABILE — CONTUR AURIU ÎN LOC DE VERDE ─────────────────────
   `septica-pro.css:25400` dă cărții pe care poți da:
     border: 1.6px solid rgba(16,185,129,.7)   — VERDE
     box-shadow pe TREI straturi, ultimul `0 4px 12px rgba(0,0,0,.3)`

   Aici rămâne bordura aurie de la `.card.tbf` (0.8px #c9a961) și doar haloul
   e verde. Deci cartea jucabilă are lumină verde și contur auriu — pe desktop
   conturul însuși e verde și de două ori mai gros, așa că vezi dintr-o privire
   ce poți juca fără să te uiți la halou. Pe un ecran de telefon, unde cărțile
   sunt mici, distincția contează mai mult, nu mai puțin.

   Lipsește și al treilea strat de umbră, cel care desprinde cartea de felt. */

.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;
}


/* ── P8. CRESTUL: RAMA FĂRĂ FIBRĂ DE LEMN ────────────────────────────────────
   Desktopul are DOUĂ reguli pentru `#infoSouth .player-details`. Cea de la
   linia 25293 e cea copiată aici. Cea de la 25561, din pasul final Tabinet, o
   suprascrie și adaugă un al treilea strat în bordură:

     repeating-linear-gradient(88deg, rgba(38,22,8,.42) 0 1px, transparent 1px 4px)

   Adică fibră de lemn peste degradeul auriu — exact ca pe capsulele oponenților
   și pe rama mesei. Plus un inel exterior `0 0 0 1px #2a1708` în umbră, care
   desprinde placa de fundal.

   S-a copiat regula veche, nu pe cea finală. De-aia crestul e singurul obiect
   auriu de pe ecran cu rama netedă, în timp ce tot restul are fibră. Aceeași
   scăpare era și în peisaj.

   Umbra: desktop `0 9px 22px`, aici `0 4px 12px`. O aliniez, dar păstrez
   bordura în `--ui` — aia e corect scalată. */

.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;
  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;
}


/* ── P9. NUMELE MEU — SPAȚIEREA LITERELOR ────────────────────────────────────
   `#nameSouth` are `letter-spacing: 1px` pe desktop; aici e
   `calc(var(--ui) * 0.15)`, adică 0.44-0.69px. Coeficientul e prea mic: la
   `--ui` maxim tot nu ajunge la jumătate din valoarea desktopului.

   Spațierea nu trebuie să scaleze cu mobilierul, ci cu TEXTUL: numele are
   `--ui * 2.3`, iar pe desktop raportul e 1px la 12.5px = 8%. Deci 0.08 × 2.3
   = 0.184·ui. Îl duc acolo — tot mic, dar de trei ori mai aproape de intenție,
   iar litera „Ș" cu sedilă nu se mai lipește de „E". */

.game-play-container:is(.game-2p,.game-3p,.game-4p) #nameSouth {
  letter-spacing: calc(var(--ui) * 0.184) !important;
}


/* ── P11. NUMELE DIN DOCK, TĂIAT LA O CINCIME ────────────────────────────────
   În captură dock-ul scrie „sbot..." — trunchiat după patru litere, deși în
   dreapta lui e loc. `septica-mobile.css:334` pune `max-width: 20%` pe
   `.td-name`; desktopul are 110px la un dock de 190px, adică 58%.

     iPhone SE   dock ≈ 188px  →  20% = 38px pentru nume
     iPhone 15   dock ≈ 196px  →  20% = 39px

   Cei 20% sunt gândiți pentru un dock mult mai îngust. La 58% numele are ~110px,
   destul pentru „sbot_alina" întreg. */

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


/* ── P12. POPUP-UL DE CAPTURĂ, PESTE MASĂ ────────────────────────────────────
   Panoul „9♠ K♥ Q♠ J♦ (4 cărți, +0pt)" din captură stă peste colțul mesei,
   rupt pe trei rânduri. Cotele lui (`pro:24338`) sunt `clamp()` legat de `vw`:

     .capture-chip  clamp(11px, 2.2vw, 14px)

   Pe desktop 2.2vw = 31.7px, deci se aplică plafonul de 14px. Pe telefon
   2.2vw = 8.6px, deci se aplică PODEAUA de 11px. Adică pe ambele extreme
   `clamp` nu scalează nimic — dă o valoare fixă, iar cea de pe telefon e 79%
   din cea de desktop, pe un ecran de patru ori mai îngust.

   Îl leg de `--ui`, care e chiar scara mobilierului din fișierul ăsta, și îl
   las să se rupă frumos în loc să se întindă: plafon de lățime la 60% din
   ecran, cu rânduri strânse.

   Poziția n-o ating: atârnă de insigna oponentului și cade pe felt, unde e loc.
   Micșorat, nu mai acoperă cărțile jucate. */

.capture-popup {
  padding: calc(var(--ui) * 0.9) calc(var(--ui) * 1.8) !important;
  gap: calc(var(--ui) * 0.7) !important;
  row-gap: calc(var(--ui) * 0.35) !important;
  flex-wrap: wrap !important;
  max-width: 60vw !important;
  justify-content: center !important;
  border-radius: calc(var(--ui) * 1.8) !important;
}
.capture-chip {
  font-size: calc(var(--ui) * 2.4) !important;
  padding: calc(var(--ui) * 0.35) calc(var(--ui) * 0.9) !important;
  border-radius: calc(var(--ui) * 0.9) !important;
}
.capture-plus { font-size: calc(var(--ui) * 2) !important; }
.capture-sum  { font-size: calc(var(--ui) * 2.4) !important; }


/* ── P14. BENZILE SE MĂSOARĂ SINGURE, MASA IA TOT CE RĂMÂNE ──────────────────
   Ai dreptate că tot rămâne gol, și cauza e structurală: rezerva de sus și cea
   de jos sunt CIFRE FIXE (25·ui și 23·ui) care trebuie ținute manual în acord
   cu ce ocupă efectiv conținutul. Orice nepotrivire iese ca spațiu mort — și
   nepotrivirea diferă de la un telefon la altul, fiindcă unele componente sunt
   în `--ui`, altele în `--u`, iar butoanele din dock au o podea de 32px care nu
   scalează cu nimic.

   Le fac să fie chiar suma a ce conțin:

     sus = 2·ui (offset insignă) + 8·ui (insigna) − 0.6·ui (marginea mâinii
           atârnate) + 7.7·u (cărțile atârnate) + 1·ui aer   =  10.4·ui + 7.7·u

     jos = 1.8·ui (row-gap) + 7.2·ui (padding + td-top + td-mid)
           + max(32px, 8·ui) (butoanele) + 1.2·ui margine     =  10.2·ui + max(…)
           + 28·u (rândul mâinii)

   `max(32px, 8·ui)` intră direct în buget — asta e cheia. Podeaua butoanelor
   nu se poate exprima ca un coeficient de `ui`, deci orice buget scris doar în
   coeficienți GREȘEȘTE, cu atât mai mult cu cât ecranul e mai mic. La `--ui`
   minim dock-ul cere 18.2·ui, la maxim 15.2·ui — o cifră fixă de 20 nu poate fi
   corectă în ambele.

   Bugetul devine:  20.6·ui + max(32px, 8·ui) + 140.7·u  ≡  100cqh

   CE SE CÂȘTIGĂ, doar din benzi:
     ecran 320   masa 259 → 287px  (+10.6%)      Galaxy S9+  378 → 378px  (0%)
     iPhone SE   masa 317 → 352px  (+11.2%)      iPhone 15   413 → 413px  (0%)
     iPad mini   masa 566 → 602px  (+6.3%)

   ── ȘI PARTEA A DOUA, care explică restul golului ──

   Pe telefoanele înalte câștigul e 0% și tot rămâne gol — 100-131px. Motivul e
   altul: masa are FORMĂ FIXĂ (105·u), iar ecranul e mai înalt decât încape
   forma aia. `margin: auto` împarte restul jumate sus, jumate jos, deci vezi
   gol în AMBELE părți.

     iPhone 15   liber 513px, masa 413px  →  100px nefolosiți
     Pixel 8     liber 564px, masa 433px  →  131px nefolosiți

   Deci las masa să se ÎNTINDĂ în ce rămâne, cu un plafon de formă: nu mai înaltă
   de 1.35× lățimea ei. Fără plafon ar ieși 385×513, adică un dreptunghi îngust
   care nu mai seamănă a masă de joc. Cu el:

     iPhone 15   413 → 513px  (+24%)   formă 1.33:1
     Pixel 8     433 → 545px  (+26%)   formă 1.35:1
     iPhone 14PM 452 → 569px  (+26%)   formă 1.35:1
     iPhone SE, ecran 320, iPad — neschimbate, acolo nu era nimic de luat

   `min-height` păstrează cei 105·u ca podea, deci pe ecranele unde bugetul e
   strâns masa rămâne exact cât era. Nimic nu se poate micșora. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) .table-area {
  top: calc(var(--ui) * 10.4 + var(--u) * 7.7) !important;
  bottom: calc(var(--ui) * 10.2 + max(32px, var(--ui) * 8) + var(--u) * 28) !important;
  height: auto !important;
  min-height: calc(var(--u) * 105) !important;
  max-height: calc((100% - var(--ui) * 2) * 1.35) !important;
  margin: auto 0 !important;
}

/* Rândul crest/dock ia exact cât cere dock-ul, nu o cifră rotundă. Așa dispare
   și golul dintre crest și footer: rândul nu mai e mai înalt decât conținutul. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-south {
  grid-template-rows: auto calc(var(--ui) * 7.2 + max(32px, var(--ui) * 8)) !important;
}


/* ── P15. BUTOANELE DIN DOCK SE REVARSĂ ÎN DREAPTA ───────────────────────────
   Aveam greșeala de axă: am dimensionat rândul pe ÎNĂLȚIME și n-am verificat
   lățimea. Măsurat:

     dock util = (lățime − 2·ui) / 2 − 2×1.4·ui      (jumătate de rând, minus padding)
     cer 5 butoane de max(32px, 8·ui) + 4 spații de 1.2·ui

       ecran 320    dock 148px   cer 175px   →  DEPĂȘESC cu 28px
       Galaxy S9+   dock 166px   cer 177px   →  depășesc cu 11px
       iPhone SE    dock 173px   cer 178px   →  depășesc cu  5px
       iPhone 15    dock 182px   cer 179px   →  încap, rest 3px
       iPad mini    dock 367px   cer 206px   →  încap, rest 160px

   Podeaua de 32px × 5 = 160px e pur și simplu mai lată decât dock-ul pe
   telefoanele mici. De-aia ultimul buton iese în dreapta. Corecția mea de la
   `.td-btn` (6.2 → 8) a rezolvat ramura moartă, dar a lăsat podeaua intactă —
   iar podeaua era problema pe orizontală.

   Le las să ÎMPARTĂ lățimea, cu plafon la mărimea ideală. `flex: 1 1 0` cu
   `min-width: 0` face împărțirea, `max-width` ține plafonul, `aspect-ratio: 1`
   le păstrează pătrate când se strâng:

       ecran 320   buton 26.5px      iPhone 15   32.0px  (nemodificat)
       Galaxy S9+  buton 29.8px      iPad mini   36.8px  (nemodificat)

   Sub 28px ar deveni greu de atins, așa că pun și o podea reală de 26px — sub
   ea preferă să se strângă spațiile dintre ele. Pe ecranele unde încap deja,
   nimic nu se schimbă.

   Rezerva de rând rămâne `7.2·ui + max(32px, 8·ui)`: e un PLAFON, deci pe
   telefoanele mici lasă 5-7px liberi în loc să taie. Mai bine puțin gol decât
   butoane tăiate. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-tools {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: min(calc(var(--ui) * 1.2), 5px) !important;
  width: 100% !important;
}

.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  /* CORECTAT la P18: aici era `min-width: 26px`, o podea pusă din precauție.
     Ea intră în conflict cu medalionul de la P17, care are nevoie ca butoanele
     să coboare la 25.1px pe ecrane de 320px. Cu podeaua, ultimul buton iese din
     zona rezervată și trece SUB medalion. Vezi socoteala în P18. */
  min-width: 0 !important;
  max-width: max(32px, calc(var(--ui) * 8)) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
}


/* ── P16. REZERVA PENTRU BARA DE JOS, DUPĂ COMPACTARE ────────────────────────
   Golul rămas până la footer vine de la `septica-pro.css`, nu de aici:

     .main-content { padding-bottom: calc(112px + env(safe-area-inset-bottom)) }

   Cei 112px erau socotiți pentru bara cu rândul de status la 36px. Secțiunea P6
   l-a strâns la 22px, deci 14px din rezervă nu mai au acoperire. Plus bara e
   flotantă (`bottom: 10px`) și are propriul padding, deci cifra fusese luată cu
   marjă.

   Recalculat pe ce e acum: 10px (bara e ridicată de la marginea de jos)
   + 2×4px padding + 22px status + ~46px butoane = 86px. Cu 2px marjă → 88px.

   Cei 24px eliberați merg direct în `--u`, deci în masă și în cărți. */

body.game-active:not(.room-waiting) .main-content {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}


/* ── P18. SUPRAPUNEREA BUTON / MEDALION — conflict între P15 și P17 ──────────
   Se vede în captură: ultimul buton din dock intră sub cercul cu „00:16".
   Cauza e o contradicție între două secțiuni scrise de mine.

     P15 a pus `.td-btn { min-width: 26px }`, o podea din precauție.
     P17 a calculat că butoanele trebuie să poată coborî la 25.1px pe un ecran
         de 320px, ca să încapă lângă medalion.

   Cele două nu pot fi adevărate deodată:

     ecran 320   spațiu pentru butoane 141px   cer cu podea 26px: 145px  → +4px
     iPhone SE   spațiu 174px   cer 148px   → ok
     Galaxy S9+  spațiu 165px   cer 147px   → ok
     iPhone 15   spațiu 184px   cer 149px   → ok

   Doar pe cel mai mic ecran depășesc, cu 4px — iar `flex` nu poate strânge sub
   `min-width`, deci surplusul se revarsă în afara zonei rezervate de
   `padding-right`, adică exact peste medalion.

   Podeaua era greșită ca IDEE, nu doar ca valoare: `flex: 1 1 0` cu
   `max-width` ținea deja mărimea ideală ca plafon, iar ce rămâne se împarte
   egal. O podea în plus nu protejează nimic — doar rupe împărțirea când nu mai
   e loc. Scoasă.

   Rezultatul, cu butoanele lăsate să împartă:

     ecran 320  25.1px    Galaxy S9+  29.6px    Pixel 8   35.1px
     iPhone SE  31.1px    iPhone 15   33.0px

   Cei 25.1px de pe ecranul cel mai mic sunt sub pragul de 28px pe care l-aș
   recomanda pentru o țintă de atins — dar pe 320px lățime, cu cinci butoane,
   un medalion și un crest pe același rând, nu există aranjament care să dea
   mai mult. Dacă vrei ținte mai mari acolo, singura pârghie reală e să scoți
   un buton din dock pe ecranele sub ~340px. */


/* ── P19. PANOUL DIN FOOTER: CHATUL ÎMPINGE INPUTUL AFARĂ ────────────────────
   Bugetul vertical al panoului (e `inset: 0`, deci tot ecranul):

     ecran − antet panou − padding − rezervă bară − cap chat − zonă de scris
       320×568:  568 − 35 − 31 − 130 − 54 − 48  =  269px pentru mesaje
       iPhone 15: 852 − 43 − 36 − 130 − 54 − 48  =  541px

   Iar `septica-pro.css` pune `.chat-messages { min-height: 300px }`. Pe ecranul
   de 568px rămân 269px, deci podeaua DEPĂȘEȘTE cu 31px. Și e o podea pe un
   copil flex: când spațiul scade sub ea, flex nu mai poate strânge, așa că zona
   de mesaje împinge zona de scris în afara ecranului. De-aia inputul dispare pe
   telefoanele mici.

   Aceeași capcană ca la `.chat-messages` în peisaj (secțiunea 54 din
   septica-landscape.css) și ca la `.modal-body` acolo: un copil flex care
   trebuie să deruleze are nevoie de `min-height: 0`, altfel nu coboară sub
   conținutul lui. `min-height: 300px` e exact opusul.

   Scot și `max-height: calc(100vh - 280px)`: e o a doua cotă care trebuie
   ținută în acord cu antetul, capul de chat și zona de scris — dacă vreuna se
   schimbă, se rupe. Cu `flex: 1 1 auto` + `min-height: 0`, zona de mesaje ia
   pur și simplu ce rămâne, oricât ar fi. Plus `100vh` include bara de adresă,
   greșeala pe care o avertizează chiar antetul acestui fișier.

   A DOUA: rezerva de 130px pentru bara flotantă. Era socotită pentru bara cu
   rândul de status la 36px; P6 l-a strâns la 22px, iar P16 a recalculat bara la
   88px. Deci 42px din rezervă nu mai au acoperire — 42px de chat, pe orice
   telefon.

     ecran 320   269 → 311px mesaje        iPhone 15   541 → 583px
     iPhone SE   359 → 401px               Pixel 8     601 → 643px */

.context-panel .chat-container,
.context-panel .chat-messages {
  min-height: 0 !important;
}
.context-panel .chat-messages {
  flex: 1 1 auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.context-panel .chat-input-area {
  flex: 0 0 auto !important;
}
.context-panel .panel-content {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}


/* ── P20. MODALELE: FOAIE LIPITĂ DE MARGINE, FĂRĂ DECUPAJ ────────────────────
   În portret modalele sunt foi de jos: `.modal-overlay { align-items: flex-end }`
   și `.modal-container { max-height: 65vh; border-radius: 24px 24px 0 0 }`.
   Corect ca idee. Două lucruri lipsesc.

   (a) NICIO REZERVĂ PENTRU INDICATORUL DE ACASĂ. Foaia atinge marginea de jos a
       ecranului, iar pe iPhone indicatorul (~34px) stă peste conținut — peste
       ultimul rând din Setări sau peste butoanele din modalul de final. Verificat
       cu selectoare: nicio regulă de modal nu conține `safe-area-inset-bottom`.

   (b) `65vh` — aceeași problemă ca la chat. `vh` include bara de adresă, deci
       foaia iese mai înaltă decât zona vizibilă. `dvh` măsoară ce se vede.
       Și `calc(65vh − 110px)` pe corp e a doua cotă care trebuie ținută în acord
       cu antetul: dacă antetul se schimbă, corpul se taie sau lasă gol. O trec
       pe flex, ca la P19.

   Rezultat: foaia are aceeași înălțime vizuală, dar conținutul nu mai intră sub
   indicator, iar corpul derulează exact cât rămâne. */

.modal-overlay .modal-container,
.modal-overlay .game-end-modal {
  max-height: calc(65dvh + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.modal-overlay .modal-header {
  flex: 0 0 auto !important;
}

.modal-overlay .modal-body,
.modal-overlay .game-end-modal > .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Selectorul de emoji se deschide în SUS, peste zona de scris (`bottom: 100%`).
   Cu inputul acum ținut jos de flex, îi dau și lui o limită legată de ce se
   vede, nu de `100vh`: altfel pe un telefon scund iese peste capul chatului. */
.context-panel .chat-emoji-picker {
  max-height: min(200px, 34dvh) !important;
}


/* ── P21. MODUL IMERSIV: ASCUNDE, DAR NU MĂREȘTE ─────────────────────────────
   Aceeași problemă ca în peisaj, cu aceeași cauză. Butonul comută
   `body.immersive-mode`, iar `septica-pro.css:2595` ascunde `.top-bar` și
   `.nav-rail` — asta merge. Dar tot el pune `height: 100dvh` pe `.game-canvas`,
   iar acolo pierde:

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

   În portret headerul chiar eliberează spațiu, fiindcă `.main-content` e
   `flex: 1` și crește singură. Dar `padding-bottom: 88px` rămâne rezervat
   pentru o bară care e `display: none`. Deci apeși butonul, bara dispare, și în
   locul ei rămâne o bandă goală de 88px.

   Îl repar cu specificitate mai mare, fără să ating regula de bază — aceea
   trebuie să rămână valabilă în modul normal:

     ecran 320   masa 285 → 356px   (+24.8%)
     iPhone SE   masa 351 → 424px   (+20.9%)
     Galaxy S9+  masa 417 → 476px   (+14.1%)
     iPhone 15   masa 511 → 520px   (+1.8%)
     Pixel 8     545 → 545px        (0% — acolo masa e deja la plafonul de formă)

   Decupajele: cu headerul și bara ascunse, scena atinge ambele margini. Le
   adaug explicit, altfel conținutul intră sub cameră și sub indicatorul de
   acasă. */

body.game-active.immersive-mode:not(.room-waiting) .main-content {
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
body.game-active.immersive-mode:not(.room-waiting) .game-canvas,
body.game-active.immersive-mode:not(.room-waiting) .game-area {
  height: 100% !important;
  max-height: 100% !important;
}


/* ── P22. BUTONUL DE FOCUS ───────────────────────────────────────────────────
   Aceleași patru probleme ca în peisaj, citite din `septica-pro.css:2644-2770`:

   1. Săgețile pulsează la NESFÂRȘIT (`animation: … infinite`), cu o deplasare
      de 2px. Un element care se mișcă permanent dar imperceptibil se citește ca
      decor, nu ca buton.
   2. Cele două stări arată la fel: săgețile la colț față de săgețile la 5px de
      colț, pe o cutie de 20px. Nu poți spune dacă ești în focus sau nu.
   3. În focus devine MAI PALID (opacitate 0.5, auriul scos) — deși acolo e
      SINGURA cale înapoi, headerul și bara fiind ascunse.
   4. N-are etichetă și e în paletă albastru-ardezie, nu în lemnul jocului.

   În portret e o diferență față de peisaj: acolo masa lăsa o margine de 6cqw
   liberă, în care butonul încăpea. Aici masa are `100% − 2·ui` (P13), deci NU
   mai există margine — orice poziție îl pune peste ramă.

   Deci îl lipesc de marginea ECRANULUI, rotunjit doar pe dreapta, ca o limbă de
   sertar. Un buton lipit de margine se citește ca „trage de aici", nu ca obiect
   uitat pe masă — și acoperă rama pe o fâșie de 32px, cât mai puțin posibil.

   Îngust și înalt: 32×72 = 2304px² de țintă, față de 48×48 = 2304px². Aceeași
   suprafață de atins, dar o cincime din lățimea pe care o fura de pe masă. */

.immersive-toggle-float {
  left: 0 !important;
  width: min(9vw, 34px) !important;
  height: min(19vw, 74px) !important;
  border-radius: 0 min(3vw, 12px) min(3vw, 12px) 0 !important;
  border-left: none !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 2px 0 0 !important;
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(44,29,13,.96), rgba(18,11,4,.98)) !important;
  border-top: 1.5px solid rgba(233,196,90,.45) !important;
  border-right: 1.5px solid rgba(233,196,90,.45) !important;
  border-bottom: 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;
}

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

/* (2) — stări vizibil diferite: în afară = mărește, spre centru = strânge */
.immersive-arrows-box { width: min(4.5vw, 17px) !important; height: min(4.5vw, 17px) !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; }
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; }

/* (4) — eticheta care spune ce face. Scrisă pe verticală: în 32px lățime nu
   încape „MĂREȘTE" pe orizontală, iar tăiată n-ar folosi nimănui. */
.immersive-toggle-float::after {
  content: 'MĂREȘTE';
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: min(2.1vw, 8px);
  font-weight: 800;
  letter-spacing: .5px;
  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);
}

/* (3) — în focus e singura cale înapoi, deci se vede MAI bine */
body.immersive-mode .immersive-toggle-float {
  opacity: .9 !important;
  border-color: rgba(233,196,90,.6) !important;
  color: #ffe296 !important;
}

.immersive-toggle-float:hover,
body.immersive-mode .immersive-toggle-float:hover {
  transform: translateY(-50%) scale(1.05) !important;
  opacity: 1 !important;
}
.immersive-toggle-float:active { transform: translateY(-50%) scale(0.95) !important; }

.immersive-glow {
  inset: -4px -6px -4px 0 !important;
  border-radius: 0 min(3.6vw, 14px) min(3.6vw, 14px) 0 !important;
}


/* ── P23. CE PLUTEȘTE PESTE PANOU ────────────────────────────────────────────
   În ambele capturi se vede același lucru: butonul de Focus stă peste lista de
   notificări, popup-ul de captură („7♠ 8♦ 8♥ 7♦") stă peste ea, iar bula lui
   sbot_natalia76 stă peste chatul privat. Straturile:

     .seat-bubble               150    (pro:7527)
     .capture-popup             200    (pro:24331)
     .context-panel             200    (mobile:567)
     .top-bar                  1020
     .nav-rail                 1030
     .immersive-toggle-float   1030    (--z-overlay)

   `.capture-popup` are EXACT același z-index ca panoul, deci decide ordinea din
   DOM — și el vine după. Butonul de Focus are 1030, deci e mereu deasupra.
   Bula are 150, sub panou pe hârtie, dar JS-ul o agață de `<body>` cu poziție
   inline și în captură apare deasupra.

   Nu reglez fiecare z-index pe rând — s-ar rupe la prima animație nouă. Cât e
   panoul deschis, niciun strat de joc n-are ce căuta pe ecran: nu poți urmări
   o captură în timp ce citești chatul. Le sting pe toate, cu `:has()`, exact
   cum am făcut în peisaj.

   Butonul de Focus îl sting și el: în panou n-ai ce mări, iar panoul are deja
   butonul lui de închidere. */

body:has(.context-panel.active) .immersive-toggle-float,
body:has(.context-panel.active) .capture-popup,
body:has(.context-panel.active) .seat-bubble,
body:has(.context-panel.active) .capture-fly-card,
body:has(.context-panel.active) > .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) .floating-points,
body:has(.context-panel.active) .sparkle,
body:has(.context-panel.active) .tb-opp-tip-fixed {
  display: none !important;
}

/* plasă de siguranță: orice clonă de carte agățată de <body> rămâne sub panou */
body > .card,
body > .capture-fly-card { z-index: 150 !important; }


/* ── P24. BARA DE FILE: „NOTIFI…" ───────────────────────────────────────────
   Cinci file pe lățimea unui telefon, cu eticheta la 11px fix:

     ecran 320   filă 57.6px | „NOTIFICĂRI" cere 72.6px  → tăiat
     iPhone SE   filă 68.6px | cere 72.6px               → tăiat
     iPhone 15   filă 72.2px | cere 72.6px               → tăiat la limită

   Se taie pe TOATE, inclusiv pe cele mari — 11px nu e o mărime care încape,
   e o mărime aleasă pentru un panou lateral de desktop. O leg de lățime:

     clamp(8px, 2.6vw, 11px)  →  8.3px la 320, 10.2px la iPhone 15
     „NOTIFICĂRI" cere 54.9px la 320 și 67.4px la iPhone 15  →  încape peste tot

   Nu cobor sub 8px: eticheta unei file trebuie citită dintr-o privire, iar sub
   8px devine textură. Dacă la 320px tot pare mic, alternativa e să scoți
   eticheta și să lași doar pictograma pe ecranele înguste. */

.context-panel .chat-tab {
  font-size: clamp(8px, 2.6vw, 11px) !important;
  letter-spacing: 0 !important;
  padding: 3px 2px !important;
  min-width: 0 !important;
}
.context-panel .chat-tab span,
.context-panel .chat-tab .chat-tab-label {
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}


/* ── P25. SUB-VEDERILE PANOULUI — chatul privat și listele ───────────────────
   Aici e ce-mi scăpase: chatul privat din a doua captură NU e `.chat-*`, e
   `.friend-chat-*` din septica-features.css, alt fișier. Are aceeași greșeală
   ca `.chat-messages`, în trei locuri:

     .friend-chat-view      min-height: 300px   [feat]  ← e și flex
     .friends-search-input  min-height:  24px   [feat]
     .friend-chat-input     min-height:  24px   [feat]
     .chat-login-prompt     min-height: 200px   [pro]   ← e și flex
     .chat-empty-state      min-height: 200px   [pro]   ← e și flex

   `min-height` pe un copil flex care trebuie să deruleze îl împiedică să
   coboare sub conținut. Pe ecrane scunde, vederea de chat privat împinge
   zona de scris în jos, la fel ca `.chat-messages` la P19.

   Și, mai important, sub-vederile nu se ÎNTIND pe panou: de-aia rămâne bandă
   goală sub zona de scris în captura a doua. Le dau lanțul complet de flex, ca
   la `.chat-container`. */

.context-panel .friend-chat-view,
.context-panel .private-chat-view,
.context-panel .friends-view,
.context-panel .notifications-view,
.context-panel .chat-view {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.context-panel .friend-chat-messages,
.context-panel .private-chat-list,
.context-panel .notifications-list,
.context-panel .friends-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.context-panel .friend-chat-header,
.context-panel .friend-chat-input-bar {
  flex: 0 0 auto !important;
}

.context-panel .chat-login-prompt,
.context-panel .chat-empty-state {
  min-height: 0 !important;
  flex: 1 1 auto !important;
}


/* ── P26. `100vh` ÎN PANOU ───────────────────────────────────────────────────
   Panoul are o familie întreagă de înălțimi în `vh`, toate din septica-pro.css:

     .context-panel                { height: 100vh; max-height: 100vh }
     .context-panel .panel-content { height: calc(100vh - 44px) }
     .context-panel .panel-content { max-height: calc(100vh - 56px) }
     .chat-messages                { max-height: calc(100vh - 280px) }
     .chat-messages                { max-height: calc(100vh - 320px) }

   Pe mobil `100vh` include bara de adresă — chiar antetul acestui fișier o
   spune: „măsurat pe pagina asta, `100vh` dădea 566px când zona vizibilă avea
   531". Deci panoul iese mai înalt decât se vede, iar ce e la baza lui — zona
   de scris — cade sub margine.

   Panoul e `inset: 0` (P din mobile:565), deci nu are nevoie de nicio înălțime
   calculată: `fixed` cu toate cele patru laturi îi dă exact zona vizibilă. Le
   anulez pe toate și las poziționarea să decidă. */

.context-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.context-panel .panel-content {
  height: auto !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}


/* ── P27. MODALELE PE TOT ECRANUL ────────────────────────────────────────────
   Erau foi de jos: `.modal-overlay { align-items: flex-end }` cu
   `.modal-container { max-height: 65vh }` (pro:16895). Pe telefon 65% din ecran
   înseamnă 369px pe un 568 și 554px pe un iPhone 15 — iar din ei antetul ia
   ~55px, deci corpul rămâne cu 314-499px. Clasamentul de la final și lista de
   setări derulează în trei rânduri, iar foaia oricum acoperă două treimi din
   ecran, deci nu câștigi nimic din faptul că e „doar o foaie".

   Le duc pe tot ecranul. Patru lucruri obligatorii, aceleași ca în peisaj:

   a) `.modal-container` are `overflow: hidden` din construcție (pro:15134). Pe
      tot ecranul, fără structură de coloană, conținutul se taie FĂRĂ să
      deruleze. Antetul `flex: 0 0 auto`, corpul `flex: 1 1 auto` cu
      `min-height: 0` — fără el un copil flex nu coboară sub conținutul lui.
   b) plafoanele în `vh` anulate (`65vh`, `calc(65vh − 110px)`, `85vh`, `70vh`).
   c) mânerul de tragere stins: nu mai e foaie de tras, iar altfel plutește
      peste antet.
   d) decupajele pe toate cele patru laturi — modalul atinge acum marginile.

   Animația de intrare rămâne: alunecă tot de jos, doar că umple ecranul. */

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

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

.modal-container::after { display: none !important; }

.modal-overlay .modal-header {
  flex: 0 0 auto !important;
  padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
  padding-left: calc(18px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(18px + env(safe-area-inset-right, 0px)) !important;
}

.modal-overlay .modal-body,
.modal-overlay .game-end-modal > .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-left: calc(18px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(18px + env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

.modal-overlay .modal-footer {
  flex: 0 0 auto !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

.modal-close,
.modal-close-btn {
  top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  right: calc(10px + env(safe-area-inset-right, 0px)) !important;
}

/* Modalele multiplayer au propriul container, cu alte plafoane în `vh`
   (`.mp-modal-card` 85vh/92vh, `.mp-table-room-panel` 80vh/92vh). Aceeași
   tratare, altfel rămân singurele care nu se potrivesc cu restul. */
.mp-modal-overlay .mp-modal-card,
.mp-table-room-panel,
.room-detail-modal {
  max-height: 100dvh !important;
  height: 100% !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}


/* ── P28. ZONA DE SCRIS DIN CHATUL PRIVAT ────────────────────────────────────
   La P25 am țintit `.friend-chat-view` și celelalte pe NUME, ghicite din CSS.
   Dacă marcajul folosește altă clasă, regula nu prinde nimic — și exact asta
   pare să se fi întâmplat, fiindcă zona de scris a rămas sus.

   Renunț la ghicit și pun o plasă generică: `.panel-content` devine coloană
   flexibilă, iar copiii ei se întind. Bara de file rămâne fixă, fiindcă e
   singura care nu trebuie să crească. Așa funcționează pentru ORICE vedere
   din panou, inclusiv cele care se adaugă mâine.

   `min-height: 0` peste tot pe lanț: fără el, un copil flex nu coboară sub
   conținutul lui, iar zona de scris e împinsă în jos în loc să stea la bază. */

.context-panel .panel-content {
  display: flex !important;
  flex-direction: column !important;
}

.context-panel .panel-content > * {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.context-panel .panel-content > .chat-tab-bar,
.context-panel .panel-content > .chat-tabs-bar,
.context-panel .panel-content > .friends-tabs,
.context-panel .panel-content > .shop-tabs,
.context-panel .panel-content > .panel-subheader,
.context-panel .panel-content > .friend-chat-header {
  flex: 0 0 auto !important;
}

/* orice bară de scris din panou stă la BAZĂ, nu în flux liber */
.context-panel .chat-input-area,
.context-panel .friend-chat-input-bar,
.context-panel .chat-input-row {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}


/* ── P29. TOOLTIP-UL DE PE AVATAR (apăsare lungă pe jucător) ─────────────────
   Panoul „woi": avatar, nume, insigne, patru statistici, runda, o linie de
   stare. Am măsurat înainte să-l ating, fiindcă în peisaj era stricat rău și
   mă așteptam la fel aici. Nu e:

     `.tb-opp-tip-fixed { width: 56% }` (septica-mobile.css:584)

       ecran 320    179px    desktop 190px    −6%
       iPhone SE    210px                    +11%
       iPhone 15    220px                    +16%
       Pixel 8      231px                    +21%
       iPad portret 430px                   +126%   ← singura problemă

   Pe telefoane regula E CORECTĂ — 56% din latura scurtă dă aproape exact cei
   190px ai desktopului. În peisaj aceeași regulă dădea 512px, fiindcă acolo
   `vw` e latura lungă. Deci nu e o regulă proastă, e una scrisă pentru portret
   și folosită și în peisaj. Aici o las aproape neatinsă.

   DOUĂ LUCRURI, amândouă mărunte:

   (a) TABLETA. La 768px lățime, 56% înseamnă 430px — de 2.3 ori cât trebuie,
       cu grila de statistici întinsă și găuri între coloane. Plafon la 240px:
       peste el nu mai are ce câștiga, panoul are conținut fix.

   (b) INTERIORUL RĂMÂNE ÎN PX, deci proporția lui față de tooltip se schimbă
       cu ecranul:

         desktop            avatar 21% din lățimea panoului
         ecran 320          22.3%     ← cam mare
         iPhone 15          18.2%
         Pixel 8            17.3%
         iPad portret        9.3%     ← pierdut în panou

       Îl leg de lățimea proprie a tooltip-ului, cu plafon la valorile
       desktopului. Așa arată la fel pe orice ecran: 21% avatar, 6.8% nume,
       7.4% cifră — exact raporturile de pe desktop.

   `cqw`/`cqh` NU merg aici: tooltip-ul e copil direct al lui `<body>`
   (comentariul din septica-pro.css:25395 explică de ce — masa are context 3D și
   `overflow: hidden`, orice tooltip din interiorul ei ar fi tăiat). Fără
   container ancestor, unitățile de container nu se rezolvă. Doar `vw`/`vh`. */

.tb-opp-tip-fixed {
  width: min(56vw, 240px) !important;
  max-width: min(56vw, 240px) !important;
  padding: min(2.8vw, 10px) min(3vw, 11px) !important;
  border-radius: min(3.8vw, 14px) !important;
}

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

.tb-woi-avatar {
  width: min(11.8vw, 46px) !important;
  height: min(11.8vw, 46px) !important;
}

.tb-woi-name   { font-size: min(3.8vw, 15px) !important; }
.tb-woi-badge  { font-size: min(2.2vw, 8.5px) !important; padding: min(0.6vw, 2px) min(1.4vw, 5px) !important; }
.tb-woi-badges { gap: min(0.8vw, 3px) !important; }

.tb-woi-stats  { gap: min(1.7vw, 6px) !important; }
.tb-woi-stat   { padding: min(1.4vw, 5px) min(1.1vw, 4px) !important; }
.tb-woi-stat .tb-v { font-size: min(4.1vw, 16px) !important; }
.tb-woi-stat .tb-k,
.tb-woi-round span { font-size: min(2.2vw, 8.5px) !important; }

.tb-woi-round   { margin-top: min(2.2vw, 8px) !important; padding-top: min(2.2vw, 8px) !important; }
.tb-woi-round b { font-size: min(3.8vw, 15px) !important; }
.tb-woi-status  { margin-top: min(1.9vw, 7px) !important; font-size: min(2.4vw, 9.5px) !important; }
.tb-woi-conn-bar { height: min(1.4vw, 5px) !important; }
.tb-woi-conn-val { font-size: min(3.4vw, 13px) !important; }
.tb-woi-conn-lbl,
.tb-woi-conn-dc  { font-size: min(2.2vw, 8.5px) !important; }

/* Săgeata trebuie să rămână proporțională cu panoul, altfel pe tabletă arată
   ca un vârf de ac lipit de o cutie mare. */
.tb-opp-tip-fixed::before {
  width: min(3.2vw, 12px) !important;
  height: min(3.2vw, 12px) !important;
}


/* ── P30. BUTOANELE DIN PANOU — MĂRIMI ȘI ÎNCADRARE ──────────────────────────
   Am măsurat toate butoanele din panou față de pragul de atingere (44px pe iOS,
   48dp pe Android) și față de antetul care le conține:

     .panel-back / .panel-close   9vw    → 29px la 320, 35px pe iPhone 15, 69px pe tabletă
     .chat-settings-btn           44px   ✓ singurul la prag
     .chat-search-toggle-btn      44px   ✓
     .chat-search-close           36px
     .friend-chat-send            34px
     .friend-chat-back            32px
     .modal-close-btn             32px
     .mp-modal-close              32px
     .chat-search-nav-btn         28px
     .chat-search-clear           28px
     .chat-emoji-picker-close     28px

   Nouă din unsprezece sunt sub prag, iar mărimile nu urmează nicio regulă: 28,
   32, 34, 36 și 44px pentru butoane care fac același lucru. Butonul de închidere
   al panoului are 32px, cel al modalului 32px, cel al selectorului de emoji 28px
   — trei „×" de trei mărimi diferite.

   Iar `9vw` e singura cotă legată de ecran, și tocmai de-aia sare: pe tabletă
   în portret dă 69px, un „×" cât o pastilă.

   DOUĂ MĂRIMI, nu unsprezece:

     PRINCIPAL   clamp(36px, 10vw, 44px)   închidere panou · înapoi · trimite ·
                                            setări · căutare · închidere modal
     SECUNDAR    clamp(28px, 7.5vw, 34px)  navigare în rezultate · golire câmp ·
                                            închidere selector emoji

   Podeaua de 36px e un compromis asumat: pragul e 44, dar pe un ecran de 320px
   un antet cu butoane de 44 ar mânca 61px din 51 disponibili. 36px e cea mai
   mare valoare care încape peste tot fără să strice antetul.

   ANTETUL urmează butonul, nu invers — altfel butonul mărit iese din el:

     ecran 320    antet 35.3 → 51.4px   (+16.0)
     iPhone 15    antet 43.4 → 58.2px   (+14.8)
     iPad portret antet 84.8 → 64.0px   (−20.8)  ← pe tabletă chiar se STRÂNGE

   Costă 14-16px de conținut pe telefoane. Îi merită: un buton de închidere pe
   care nu-l nimerești e mai scump decât 16px de listă.

   `.chat-search-clear { right: 60px }` era o cotă fixă care presupunea un buton
   de închidere de 44px plus spațiu. Cu butoanele acum variabile, o leg de
   aceeași expresie — altfel se suprapun sau lasă gol. */

.context-panel .panel-back,
.context-panel .panel-close,
.context-panel .chat-settings-btn,
.context-panel .chat-search-toggle-btn,
.context-panel .chat-search-close,
.context-panel .friend-chat-back,
.context-panel .friend-chat-send,
.modal-close,
.modal-close-btn,
.mp-modal-close {
  width: clamp(36px, 10vw, 44px) !important;
  height: clamp(36px, 10vw, 44px) !important;
  min-width: clamp(36px, 10vw, 44px) !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: min(2.6vw, 10px) !important;
}

.context-panel .chat-search-nav-btn,
.context-panel .chat-search-clear,
.context-panel .chat-emoji-picker-close {
  width: clamp(28px, 7.5vw, 34px) !important;
  height: clamp(28px, 7.5vw, 34px) !important;
  min-width: clamp(28px, 7.5vw, 34px) !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: min(2vw, 8px) !important;
}

/* Pictograma urmează butonul: 55% din el, cât are desktopul (24px într-un
   buton de 44). Fără asta, un buton mărit rămâne cu un simbol mic în mijloc. */
.context-panel .panel-back .material-symbols-rounded,
.context-panel .panel-close .material-symbols-rounded,
.context-panel .chat-settings-btn .material-symbols-rounded,
.context-panel .chat-search-toggle-btn .material-symbols-rounded,
.context-panel .chat-search-close .material-symbols-rounded,
.context-panel .friend-chat-back .material-symbols-rounded,
.context-panel .friend-chat-send .material-symbols-rounded,
.modal-close .material-symbols-rounded,
.modal-close-btn .material-symbols-rounded,
.mp-modal-close .material-symbols-rounded {
  font-size: clamp(20px, 5.5vw, 24px) !important;
  line-height: 1 !important;
}
.context-panel .chat-search-nav-btn .material-symbols-rounded,
.context-panel .chat-search-clear .material-symbols-rounded,
.context-panel .chat-emoji-picker-close .material-symbols-rounded {
  font-size: clamp(16px, 4.2vw, 19px) !important;
  line-height: 1 !important;
}

/* Antetul urmează butonul, nu invers. */
.context-panel .panel-header {
  min-height: calc(clamp(36px, 10vw, 44px) + min(4.8vw, 20px)) !important;
  display: flex !important;
  align-items: center !important;
  gap: min(2.4vw, 10px) !important;
}

/* Golirea câmpului de căutare stătea la `right: 60px`, o cotă care presupunea
   un buton de închidere de 44px plus 16px. Legată acum de aceeași expresie. */
.context-panel .chat-search-clear {
  right: calc(clamp(36px, 10vw, 44px) + min(2.4vw, 10px)) !important;
}

/* Bara de scris: butonul de trimitere pe același calibru ca restul. */
.context-panel .chat-send-btn,
.context-panel .chat-action-btn {
  width: clamp(36px, 10vw, 44px) !important;
  height: clamp(36px, 10vw, 44px) !important;
  min-width: clamp(36px, 10vw, 44px) !important;
  flex: 0 0 auto !important;
}


/* ── P31. FOOTERUL DOAR CU ICONIȚE, ȘI REZERVA CALCULATĂ ─────────────────────
   Ai cerut ca în portret footerul să arate ca în peisaj — doar pictograme.
   Făcând socoteala, am găsit și de ce intra crestul sub bară.

   ÎNĂLȚIMEA REALĂ A BAREI, din regulile ei:

     rail padding 2×1vw + status 22px + buton(2×1vw + iconiță 22 + gap 2 + etichetă 10)
     plus `bottom: 1dvh` (bara e flotantă) plus `padding-bottom: env(safe-area-inset-bottom)`

       ecran 320    69px    iPhone 15   106px  (din care 34 safe-area)
       iPhone SE    71px    Pixel 8      96px  (din care 24)

   Rezerva era `88px + safe-area`. Pe iPhone 15 bara are 106px din care 34
   safe-area, deci 72px „proprii" — rezerva de 88 acoperea. Dar cifra de 88 era
   ghicită de mine la P16, nu calculată: n-am inclus `bottom: 1dvh`, care mai
   adaugă 8.5px, și n-am ținut cont că înălțimea butonului depinde de `vw`.
   Pe ecranele unde `vw` e mare, rezerva rămânea în urmă.

   O calculez acum din ACELEAȘI cifre pe care le folosește bara, deci nu mai
   poate rămâne în urmă:

     rezervă = 1dvh + (4vw + 22px status + 22px iconiță) + safe-area + 6px marjă

   ATENȚIE LA FAB — aici e capcana. Are 56px și e ridicat 12px. Cu etichete,
   rândul de butoane are ~42px, deci FAB-ul iese (56−42)/2 + 12 = 19px peste el;
   dar deasupra e rândul de status de 22px, deci rămâne ÎN bară. Fără etichete
   rândul scade la ~30px, iar FAB-ul ar ieși 25px — adică PESTE bară, exact în
   crest. Scoaterea etichetelor, singură, ar fi înrăutățit lucrurile.

   Deci îl micșorez odată cu bara: `min(12vw, 48px)` cu ridicare de 16% din
   propria înălțime. Iese 11-17px, sub cei 22px ai rândului de status pe toate
   dispozitivele — verificat.

   BILANȚ: bara scade cu 12px, rezerva devine exactă, iar scena câștigă
   12-20px în plus, care intră în `--u` și deci în masă. */

body.game-active:not(.room-waiting) .nav-bar-btn span:not(.material-symbols-rounded),
body.game-active:not(.room-waiting) .nav-bar-btn .nav-bar-label,
body.game-active:not(.room-waiting) .nav-bar-fab .nav-bar-label {
  display: none !important;
}

body.game-active:not(.room-waiting) .nav-bar-btn {
  gap: 0 !important;
  padding: 1vw 2vw !important;
}

body.game-active:not(.room-waiting) .nav-bar-fab {
  width: min(12vw, 48px) !important;
  height: min(12vw, 48px) !important;
  min-width: 0 !important;
  gap: 0 !important;
  transform: translateY(-16%) !important;
}
body.game-active:not(.room-waiting) .nav-bar-fab:hover {
  transform: translateY(-16%) scale(1.04) !important;
}
body.game-active:not(.room-waiting) .nav-bar-fab:active {
  transform: translateY(-16%) scale(0.96) !important;
}
body.game-active:not(.room-waiting) .nav-fab-avatar {
  width: min(7.5vw, 30px) !important;
  height: min(7.5vw, 30px) !important;
}
body.game-active:not(.room-waiting) .nav-bar-fab .material-symbols-rounded {
  font-size: min(6vw, 24px) !important;
}

/* Rezerva, din aceleași cifre ca bara. Înlocuiește cei 88px ghiciți la P16. */
body.game-active:not(.room-waiting) .main-content {
  padding-bottom: calc(1dvh + 4vw + 44px + 16px + env(safe-area-inset-bottom, 0px)) !important;
}
body.room-waiting .game-area {
  padding-bottom: calc(1dvh + 4vw + 44px + 12px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(1dvh + 4vw + 44px + 12px + env(safe-area-inset-bottom, 0px)) !important;
}
.context-panel .panel-content {
  padding-bottom: calc(1dvh + 4vw + 44px + 16px + env(safe-area-inset-bottom, 0px)) !important;
}


/* ── P32. DE CE TOT INTRA SUB BARĂ ───────────────────────────────────────────
   Am verificat întâi dacă rezerva mea chiar câștigă în cascadă — câștigă, e
   (1,0,3,1) și e ultima. Deci cauza era alta, și am găsit-o măsurând captura
   față de formulă:

     măsurat pe ecran   rândul de status  26px      rândul de butoane  33px
     formula mea (P31)  rândul de status  22px      rândul de butoane  30px

   Rândul de status iese 26px, nu 22. `height: 22px` e pus pe `.status-bar`,
   dar pastila de balanță și indicatorul XP dinăuntru au propriul padding, iar
   `.status-bar` n-avea `overflow` care să le taie — deci copilul împinge
   părintele peste înălțimea declarată. Clasica situație în care o cotă scrisă
   nu e cota reală.

   Din marja de 6px se duceau 4, rămâneau 2. De-aia arăta lipit sau tăiat, deși
   pe hârtie era corect.

   TREI LUCRURI, fiindcă unul singur ar lăsa problema să revină la prima
   modificare de conținut în bară:

   1. Rândul de status devine 22px REAL: `overflow: hidden` plus padding și
      margine zero pe copii. Acum cota scrisă e și cota măsurată.
   2. Marja urcă de la 6px la 16px. E ieftină — 16px dintr-o scenă de 500-800 —
      și acoperă orice copil care mai crește mâine în bară.
   3. Scaunul primește 1·ui de aer, ca să nu mai fie LIPIT de bară. Ai cerut
      să coboare, dar lipit înseamnă că orice pixel în plus îl bagă dedesubt.

     ecran 320   3.2px aer + 16px marjă = 19px distanță
     iPhone 15   3.9px aer + 16px marjă = 20px distanță */

body.game-active:not(.room-waiting) .nav-rail .status-bar {
  overflow: hidden !important;
  align-items: center !important;
}
body.game-active:not(.room-waiting) .nav-rail .status-bar > *,
body.game-active:not(.room-waiting) .nav-rail .status-bar > * > * {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-height: 22px !important;
  line-height: 1.1 !important;
}
body.game-active:not(.room-waiting) .nav-rail .status-bar .xp-bar-container {
  padding: 0 4px !important;
}

.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-south {
  bottom: calc(var(--ui) * 1) !important;
}

/* ── P35. REVENIRE LA ARANJAMENTUL ORIGINAL AL SCAUNULUI DE JOS ──────────────
   Am șters tot ce am adăugat eu la aranjamentul rândului de jos: P10 (numele
   deasupra chipurilor), P13 (crestul întins pe rând), P17 (coloane `auto 1fr`
   plus medalionul cu cronometru) și P34 (blocul consolidat). Cinci încercări,
   fiecare stricând altceva.

   Motivul, pe scurt: am vrut să bag un medalion cu cronometru într-un rând care
   nu avea loc pentru el. Dock-ul cere ~180px doar pentru cele cinci butoane și
   medalion, iar crestul ~150px pentru avatar și trei chipuri. Pe un telefon de
   331px lățime asta face 330px din 324 disponibili. Fiecare variantă de
   împărțire pe care am scris-o a luat cei 6px lipsă din altă parte — de-aia
   dispărea când „BALANȚĂ", când „PUNCTE", când se muta mâna din centru.

   Aici scriu explicit valorile ORIGINALE din septica-mobile.css, ca revenirea
   să fie sigură chiar dacă a mai rămas vreo urmă de la mine:

     grila       „hand hand" / „crest dock", două coloane egale
     crestul     `width: 100%`, conținutul pe UN rând (nume lângă chipuri)
     dock-ul     în flux, fără rezervă laterală pentru medalion
     cronometrul înapoi în rândul din mijloc, lângă „Runda X/Y"

   CE RĂMÂNE din munca de până acum, fiindcă nu ține de aranjament: feltul cu
   șase straturi, relieful ramei, zoom-ul iOS, bulina de status, inițialele,
   panoul și modalele, butoanele lor, tooltip-ul, footerul cu iconițe, bugetul
   vertical care a mărit masa, și modul imersiv.

   DACĂ VREI MEDALIONUL ÎNAPOI: se poate, dar are un preț pe care acum îl știu
   măsurat — ori scoți un buton din dock, ori accepți etichetele chipurilor mai
   mici, ori dock-ul trece pe rândul lui sub 360px. Zi-mi care variantă și o fac
   pe aia, nu alta. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) .player-seat.seat-south {
  display: grid !important;
  grid-template-areas: "hand hand" "crest dock" !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  /* Rândul rămâne cel calculat la P14, NU cei 20·ui originali: bugetul vertical
     din `--u` a fost rescris acolo ca `7.2·ui + max(32px, 8·ui)`, iar dacă
     rândul revine la 20·ui, rezerva și rândul nu mai spun același lucru — apare
     gol sub crest sau masa intră în el. Singura piesă din revenire pe care NU o
     duc înapoi, tocmai ca să nu stric altceva. */
  grid-template-rows: auto calc(var(--ui) * 7.2 + max(32px, var(--ui) * 8)) !important;
  column-gap: calc(var(--ui) * 2) !important;
  row-gap: calc(var(--ui) * 1.8) !important;
  align-items: center !important;
  justify-items: stretch !important;
  padding-right: 0 !important;
}

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

.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth {
  grid-area: crest !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  align-self: center !important;
  justify-self: stretch !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: calc(var(--ui) * 1) !important;
}

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

.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .meta-item {
  padding: calc(var(--ui) * 0.3) calc(var(--ui) * 0.6) !important;
  min-width: 0 !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .meta-item::after {
  font-size: 7px !important;
}

/* Dock: în flux, pe jumătatea lui, fără rezervă pentru medalion. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 {
  grid-area: dock !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: calc(var(--ui) * 0.8) calc(var(--ui) * 1.4) !important;
  align-self: center !important;
}

/* Cronometrul înapoi în rândul din mijloc, ca înainte de medalion. */
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-timer {
  position: static !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: calc(var(--ui) * 2) !important;
  color: inherit !important;
  flex-direction: row !important;
  transform: none !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-timer .material-symbols-rounded {
  display: inline !important;
}
.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-mid {
  justify-content: space-between !important;
}


/* ── P36. BUTONUL DE TEMĂ, SCOS DIN DOCK ─────────────────────────────────────
   Dock-ul are cinci butoane (`septica-pro.js:13551-13555`):

     data-act="theme"        palette              ← scos
     data-act="chat"         chat
     data-act="leaderboard"  leaderboard
     data-act="refresh"      refresh
     data-act="felt"         format_color_fill

   Le țintesc după `data-act`, nu după poziție: `nth-child` s-ar rupe dacă
   ordinea se schimbă vreodată în JS.

   CE SE CÂȘTIGĂ, pe butoanele rămase:

     ecran 320    25.9px → 32.0px   (+6.1)   ← aici conta cel mai mult
     Galaxy S9+   29.1px → 32.0px   (+2.9)
     iPhone SE    30.3px → 32.0px   (+1.7)
     iPhone 15    31.8px → 32.0px   (+0.2)
     Pixel 8      33.0px → 33.0px   (deja la plafon)

   Pe ecranele mici butoanele urcă la 32px, adică la podeaua pe care o ceream de
   la început și pe care n-o puteam atinge cu cinci. Pe cele mari nu se schimbă
   nimic: acolo erau deja la mărimea lor ideală, iar spațiul eliberat rămâne aer
   în pilulă.

   O NOTĂ: butonul de temă comută tema închis/deschis, iar `data-act="felt"`
   (culoarea mesei) rămâne. Dacă tema se poate schimba și din Setări, n-ai
   pierdut nimic. Dacă nu, spune-mi și îl scot pe altul în locul lui —
   `refresh` e cel mai probabil candidat pe un telefon, unde tragerea în jos
   reîmprospătează oricum. */

.game-play-container:is(.game-2p,.game-3p,.game-4p) #tb-dock-live2 .td-btn[data-act="theme"] {
  display: none !important;
}


/* ── P37. CHIPURILE SE STRÂNG SUB PROPRIUL TEXT ──────────────────────────────
   În captură scrie `CĂRȚIPUNCTEBALANȚĂ` — etichetele lipite una de alta, iar
   cifrele strivite lângă ele. Asta nu e „nu încape", e altceva, și aveai
   dreptate să insiști:

   Chipurile sunt elemente flex cu `min-width: 0`. Un element flex cu
   `min-width: 0` POATE coborî sub lățimea propriului conținut — nu se taie, se
   strânge. Eticheta e un `::after`, deci iese din chipul strâns și ajunge
   lipită de următoarea. Nu e o alegere de design, e comportamentul implicit al
   lui flex când i se scoate pragul.

   De-aia se schimbă „în funcție de text": cu cât e mai lung ce trebuie să
   încapă, cu atât se strâng mai tare toate — proporțional, nu prin tăiere.
   Ștergerea butonului n-avea cum să ajute: problema nu era în dock.

   DOUĂ SCHIMBĂRI:

   1. `min-width: max-content` pe chipuri. Nu mai pot coborî sub textul lor.
      Dacă tot nu încape, se vede că nu încape — ceea ce e mult mai bine decât
      un rând de litere lipite care arată ca o eroare.

   2. Crestului îi dau 54% în loc de 50%, iar etichetele coboară la 5.5px.
      Măsurat, cu numele „CINDY" și balanța de 5 cifre:

        ecran 320    crest 166px, cere 160  →  încape, butoanele rămân 30px
        Galaxy S9+   crest 187px, cere 168  →  butoanele 34px
        iPhone SE    crest 194px, cere 172  →  butoanele 35px
        iPhone 15    crest 204px, cere 176  →  butoanele 37px
        Pixel 8      crest 214px, cere 180  →  butoanele 39px

      Butoanele CRESC față de cum sunt acum, deși dock-ul primește mai puțin —
      fiindcă are patru, nu cinci.

   Numele primește tăiere cu „…": e singurul lucru din crest a cărui lungime nu
   o pot controla, iar dacă se strânge el în loc să se taie, ne întoarcem de
   unde am plecat. */

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

.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .meta-item {
  min-width: max-content !important;
  flex: 0 0 auto !important;
  padding: calc(var(--ui) * 0.3) calc(var(--ui) * 0.55) !important;
}

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

.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .player-meta {
  flex-wrap: nowrap !important;
  gap: min(calc(var(--ui) * 1), 4px) !important;
  min-width: 0 !important;
}

/* Numele e singurul a cărui lungime nu o pot controla — el se taie. */
.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;
  flex: 0 1 auto !important;
}


/* ── P38. CRESTUL PE DOUĂ RÂNDURI, CA PE DESKTOP ─────────────────────────────
   Dacă dock-ul se strânge de la crest, atunci crestul IESE din coloana lui.
   După P37 chipurile au `min-width: max-content`, deci nu mai pot fi strânse —
   dar dacă tot nu încap, plata e că trec peste dock. Am mutat problema, n-am
   rezolvat-o.

   Cauza reală: pe un singur rând, lățimea crestului e SUMA dintre avatar, nume
   ȘI chipuri. Iar numele e singurul lucru din ecuație a cărui lungime nu o
   controlez — „CINDY" azi, alt nume mâine.

   Pe desktop numele stă DEASUPRA chipurilor (`pro:6210`: „Bootstrap: .d-flex
   .flex-column .gap-1"). Nu e o alegere estetică: pe două rânduri contează doar
   CEL MAI LAT dintre nume și chipuri, nu suma lor.

     dispozitiv    coloana    un rând cere    două rânduri cer    marjă
     ecran 320       166px          163px               141px      25px
     Galaxy S9+      187px          172px               147px      39px
     iPhone SE       194px          175px               150px      45px
     iPhone 15       204px          179px               152px      51px
     Pixel 8         214px          184px               155px      58px

   Pe un rând marja era 3px pe ecranul mic — sub eroarea mea de estimare a
   lățimii textului, de-aia calculele îmi spuneau că încape și pe ecran nu
   încăpea. Pe două rânduri marja e 25-58px, adică peste orice eroare de
   estimare.

   Înălțimea celor două rânduri (40-50px) stă sub înălțimea rândului (55-63px)
   pe toate dispozitivele, deci nu costă nimic pe verticală.

   Și pun `overflow: hidden` pe crest ca ultimă plasă: dacă vreodată tot nu
   încape, se taie în coloana lui în loc să treacă peste dock. */

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

.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: calc(var(--ui) * 0.5) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.game-play-container:is(.game-2p,.game-3p,.game-4p) #infoSouth .player-name,
.game-play-container:is(.game-2p,.game-3p,.game-4p) #nameSouth {
  max-width: 100% !important;
  text-align: left !important;
}

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