/* ═══════════════════════════════════════════════════════════════════════════
REMI — MOBIL (AMBELE ORIENTĂRI)
═══════════════════════════════════════════════════════════════════════════
Se încarcă cu `media="(max-width: 991px)"` din `includes/header.php`, deci
pentru TOT mobilul — nu doar pentru ecranul culcat.
ISTORIC AL NUMELUI: fişierul s-a chemat `remi-landscape.css` până pe
2026-09-04. A pornit ca fişier de peisaj, apoi a primit şi portret, iar numele
a rămas în urmă şi trimitea pe pistă greşită. Redenumit `remi-mobile.css`.
`includes/header.php` are o plasă: dacă găseşte fişierul nou îl foloseşte pe
el, altfel cade pe cel vechi — aşa ordinea urcării nu contează. După ce noul
fişier e sus şi verificat, cel vechi se poate şterge de pe server.
───────────────────────────────────────────────────────────────────────────
CUPRINS (caută titlurile cu grep, nu după numărul de rând — se mişcă)
PEISAJ (telefon culcat)
· GEOMETRIA MESEI ÎN PEISAJ — ACEEAŞI HARTĂ CA PE DESKTOP
· TASTATURA DESCHISĂ ÎN PEISAJ — ascunde lista de utilizatori
· TASTATURA DESCHISĂ ÎN PEISAJ (2) — doar conversaţia
· TASTATURA DESCHISĂ ÎN PEISAJ (3) — CONVERSAŢIA PRIVATĂ
· MODALUL DE PREMIERE ÎN PEISAJ — ecran plin, două coloane
PORTRET (telefon în picioare)
· PORTRET (telefon în picioare) — masa reaşezată
· PORTRET (2) — încadrări reparate după verificarea completă
· PORTRET (3) — PANOUL: sus de tot, umplut, şi cu tastatură
· banda violetă de sub modalul de premiere
· Cardul de jucător în PORTRET · Scaunul de jos în PORTRET
· Licărul „alege o piesă" · Timerul · ATU-piesă · ghidajul
AMBELE ORIENTĂRI
· MOBIL, AMBELE ORIENTĂRI (fişierul se încarcă doar ≤991px)
· MODALUL „Creează Masă" — TOT conţinutul, doar micşorat
REGULĂ DE AUR pentru cine adaugă aici: pune orientarea în interogare
(`orientation: portrait` sau `landscape`), niciodată doar lăţimea — altfel
regula scapă în cealaltă orientare şi strică ce mergea.
═══════════════════════════════════════════════════════════════════════════
DE CE UN FIȘIER SEPARAT
Remi avea deja 28 de reguli `orientation: landscape` în `remi-pro.css`, dar
toate se ocupau de chat, taburi și modale — niciuna de geometria mesei.
Pe telefon culcat masa rămânea în aranjamentul de portret și arăta ruptă.
PRINCIPIUL (cerut explicit): peisajul arată CA DESKTOPUL, comprimat.
Grila de desktop, măsurată la 1280×760:
columns: 240 240 240 240 180
areas: "zone1 zone2 zone3 zone4 opp1"
"zone1 zone2 zone3 zone4 sidebar" ← zone de etalare în LINIE
"hand-bot ×4 sidebar" ← banda NU trece sub sidebar
CE ERA STRICAT în peisaj, măsurat pe 737×357 (banc iframe):
1. `.game-play-view` primea `margin: 0 76px` + coloane FIXE (214px 214px
140px) → doar 536px din 737, decalată 100px. Regula care i-ar da
`width:100%` stă sub `@media (min-width: 768px)`, iar telefonul culcat
are 737px — SUB prag. Zonele de etalare ajungeau îngrămădite 2×2.
2. Panoul de identitate din bara de jos („Spectator | nume | puncte |
piese") era INVIZIBIL. Nu lipsea: o regulă landscape veche din
remi-pro.css dă `.seat-south { max-height: 70px }`, iar cu
`overflow: hidden` tot ce stătea sub y=291 era RETEZAT — adică exact
`.player-info-bar` (y=312…348). Pe desktop seat-south are 168px, deci
încape. Diagnostic: `elementsFromPoint` pe centrul panoului întorcea
doar stramoșii, nu panoul → clip, nu absență.
REZULTAT (măsurat, aceleași unelte):
.game-play-view 536px → 737px .seat-south 70px → 130px
.player-hand 361px → 513px panoul de identitate: VIZIBIL
⚠ SPECIFICITATE: un simplu `.game-play-view` NU învinge regulile din
remi-pro.css scrise pe `.game-play-view[data-players="…"]` — de aici
selectorii de mai jos. Verificat pe data-players="2"; la 3-4 jucători
zonele în plus intră în aceleași arii (zone3/zone4 sunt deja în grilă).
ORDINEA DE ÎNCĂRCARE: DUPĂ remi-pro.css, în includes/header.php:
Totul într-un singur @media — se scoate blocul întreg dintr-o mișcare.
═══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
/* ── 1. Grila de desktop, comprimată ─────────────────────────────────────────
Coloane elastice în loc de fixe (sidebar-ul își ține lățimea prin `auto`),
zonele de etalare în LINIE ca pe desktop, adversarii + bara în coloana
`lateral` (`#lateralWrap`), banda de jos pe 4 coloane — nu sub coloana
laterală, fidel desktopului.
(Actualizat 2026-09-03: era `opp1` deasupra `sidebar`; harta a devenit cea de
pe desktop, cu `sir` şi `jurnal` — vezi nota lungă de la mijlocul fişierului.) */
/* Selector cu clasa DUBLATĂ + varianta de imersiv: la masă jocul intră singur în
immersive-mode, iar remi-pro are acolo reguli `html body...` care băteau forma
simplă — zonele cădeau una peste alta („unde etalează fiecare"). Dublarea
clasei urcă specificitatea peste ele. Validat în banc, apoi pățit pe live. */
html body.game-active .game-play-view.game-play-view[data-players],
html body.game-active.immersive-mode .game-play-view.game-play-view[data-players] {
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
/* Coloana sidebar-ului e FIXĂ (ca pe desktop, unde are 180px), NU `auto`:
cu `auto`, la mesele de 3 jucători regulile lui `players-3` umflau
sidebar-ul, coloana înghițea 686px din 737 și zonele rămâneau la 10px.
La 2 jucători `auto` mergea din întâmplare (lățime naturală 140px). */
/* 2026-09-03 — `grid-template-columns` NU se mai scrie aici: le compune JS-ul
inline (`updateEtalareZones`), care ştie care zonă e plină şi care nu, plus
lăţimea coloanei laterale potrivită ecranului. Inline-ul are `!important`,
deci orice valoare pusă aici era oricum învinsă. */
/* Harta e ACEEAŞI ca pe desktop. Rândurile pornesc din proporţiile lui
(măsurate la 1277×697: zone 45.6% · sir 12.4% · jurnal 5.2% · stativ 36.9%),
dar DOUĂ rânduri nu se pot scala proporţional, fiindcă au conţinut de
înălţime fixă:
`jurnal` 0px — banda de activitate a URCAT ÎN HEADER (vezi
`asiguraColoanaLaterala`). Ideea userului: pe 357px
înălţime era singurul loc de unde se putea lua ceva
fără să pierzi nimic — headerul avea jumătate din
lăţime goală. Cei 22px eliberaţi au mers la stativ.
`sir` 50px — banda are nevoie de 46px (4 sus + piesă 30 + 2 jos + 10
pentru bara de derulare — bara e 10px reali, nu 3 cum
am presupus întâi; la 42 piesele se tăiau sus).
stativ 134px — două etaje de piese (76) + insula cu avatarul (52) +
aer. Stativul de Remi adevărat are două etaje, iar
acolo se joacă efectiv jocul. */
grid-template-rows:
minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 50px 0px 134px !important;
grid-template-areas:
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"sir sir sir sir lateral"
"jurnal jurnal jurnal jurnal lateral"
"hand-bot hand-bot hand-bot hand-bot lateral" !important;
}
/* Sidebar-ul stă în coloana lui, indiferent ce lățime îi dau regulile per-număr-
de-jucători din remi-pro.css. */
body.game-active .remi-sidebar {
width: 100% !important;
max-width: 140px !important;
min-width: 0 !important;
justify-self: end !important;
}
/* ── 2. Banda de jos își cuprinde conținutul ─────────────────────────────────
Anulează `max-height: 70px` din remi-pro.css: cu `overflow: hidden`,
panoul de identitate (nume/puncte/piese, la y≈312 într-un părinte care se
termina la y=291) era pur și simplu tăiat. 130px = rândul grilei; sub atât,
`.player-area` (128px) iese din ecran. */
html body.game-active .seat-south,
html body.game-active.immersive-mode .seat-south {
height: 100% !important;
max-height: none !important;
}
html body.game-active .seat-south .player-area,
html body.game-active.immersive-mode .seat-south .player-area {
height: 100% !important;
}
/* ── 3. Modalul „Creează Masă" — totul pe ecran, FĂRĂ scroll ─────────────────
Cerința userului: nimic derulat, totul încadrat. Matematica e închisă pe
înălțimi FIXE de mobilier (38+44+34+42 = 158px), iar corpul ia restul prin
flex — la 360px de ecran îi rămân ~145px, în care formularul pe 2 COLOANE
(NUME|JUCĂTORI și TIMP|MIZĂ = 2 rânduri, nu 4) are nevoie de ~141px.
Verificat în banc: conținut 141 în 145, footer y298..340 în cutie până la
341 — totul înăuntru, zero scroll.
⚠ FĂRĂ dvh! Varianta cu `calc(100dvh - 10px)` a scos butonul „Creează" sub
ecran pe telefonul REAL (barele browserului fac dvh mai mare decât zona
utilă) → „nu pot crea masă". Procentele din părinte sunt sigure. */
.mp-modal-card {
display: flex !important;
flex-direction: column !important;
height: calc(100% - 14px) !important;
max-height: calc(100% - 14px) !important;
}
.mp-modal-header {
height: 38px !important;
min-height: 0 !important;
padding: 5px 16px !important;
align-items: center !important;
}
.mp-modal-header h3 { font-size: 15px !important; }
/* (scos: ascundea continut — vezi blocul de la finalul fisierului) */
.mp-modal-icon { width: 22px !important; height: 22px !important; }
.mp-modal-icon .material-symbols-rounded { font-size: 14px !important; }
/* presetele: un rând scund, icoană+nume, fără descrieri */
.mp-preset-strip {
height: 44px !important;
min-height: 0 !important;
padding: 4px 14px !important;
gap: 8px !important;
align-items: center !important;
}
.mp-preset-card {
height: 32px !important;
min-height: 0 !important;
padding: 3px 10px !important;
flex-direction: row !important;
gap: 6px !important;
align-items: center !important;
font-size: 11px !important;
}
/* (scos: ascundea continut — vezi blocul de la finalul fisierului) */
.mp-tabs-bar {
height: 34px !important;
min-height: 0 !important;
padding: 4px 14px !important;
align-items: center !important;
}
.mp-tabs-bar button { padding: 4px 10px !important; font-size: 12px !important; }
/* corpul: 2 coloane (NUME|JUCĂTORI, TIMP|MIZĂ), fără scroll.
`flex: 1 1 0` (nu `auto`): cu auto, baza de calcul e conținutul și corpul
împingea footerul afară din cutie. */
.mp-modal-body-v2 {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 6px 16px !important;
}
.mp-modal-body-v2 .mp-col {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px 16px !important;
}
.mp-field-v2 { margin: 0 !important; padding: 0 !important; min-width: 0 !important; }
.mp-field-v2 label,
.mp-field-v2 [class*="label"] {
font-size: 10px !important;
letter-spacing: .5px !important;
margin: 0 0 3px 0 !important;
}
.mp-modal-body-v2 input[type="text"] { padding: 6px 11px !important; font-size: 13px !important; }
.mp-field-v2 button {
height: 28px !important;
min-height: 28px !important;
padding: 0 !important;
font-size: 12px !important;
}
.mp-modal-footer-v2 {
flex: 0 0 42px !important;
height: 42px !important;
min-height: 0 !important;
padding: 5px 14px !important;
align-items: center !important;
}
.mp-modal-footer-v2 button { padding: 6px 0 !important; font-size: 13px !important; }
.mp-preview-line { display: none !important; }
/* ── 4. APRONUL — bara jucătorului „ca la Șeptică" (2026-08-31) ──────────────
Element NOU (#rlApron, static în index.php), nu bara veche îndoită: bara
veche pierdea războiul specificității cu remi-pro (regulile de imersiv cu
`html body...`) la fiecare re-randare. Bara veche se ASCUNDE aici; apronul
o înlocuiește vizual, iar butoanele ei sunt mutate în apron de features.js
(și duse înapoi în portret — vezi nota de acolo).
Structura, copiată de la Șeptică și validată bucată cu bucată de user:
[avatar cu secundele PE el + inel colorat după timp] [nume auriu /
PUNCTE·PIESE·BALANȚĂ-pastilă-aurie] [butoane uniforme întunecate]
[RÂNDUL cine / RUNDA n] [ceas mare auriu].
Apronul stă ABSOLUT în .player-area, jos, ÎNTRE șinele rack-ului
(left 14 / right 20) și NU trece sub sidebar — Șeptica n-are sidebar,
Remi are (acolo stau pachetul și ARUNCATE; varianta full-width le acoperea:
„acoperi piese nu vad aruncate"). */
body.game-active .seat-south .player-area { position: relative !important; }
body.game-active .game-context-hint { display: none !important; } /* fantoma de sub apron */
html body.game-active .seat-south .player-info-bar { display: none !important; }
/* Bara de context a spectatorului (pts | R1 | ATU, în nav-rail) n-are loc la masă.
20-09-2026 — DOAR LA SPECTATOR. Userul: „şi de ce dispare becul?"
Regula era scrisă pentru spectator, dar nu făcea distincţia, aşa că se aplica şi
jucătorului — iar în `.status-bar` stă şi `.status-actions`, cu becul de indicii
(`#hintBtn`). Urmarea: la masă, în peisaj, becul era `display:flex` dar 0×0, fiindcă
părintele lui era stins. Jucătorul îşi pierdea indiciile fără niciun semn. */
body.game-active.spectator-mode .nav-rail .status-bar { display: none !important; }
/* (navigarea de jos e stilată o singură dată, pentru TOT mobilul,
în secțiunea de după acest @media — vezi „MOBIL, ambele orientări") */
/* insulă ca la Tabinet: rotunjită, ramă aurie, umbră; ține EXACT cât banda
pieselor (.hand-scroll-wrapper are șine de lemn de 35px pe fiecare parte —
„nu acoperi barele maro din margini") */
#rlApron {
display: flex !important;
position: absolute; left: 35px; right: 35px; bottom: 1px; z-index: 8;
height: 52px; box-sizing: border-box; align-items: center;
/* gap 4 (nu 6): cu piesa ATU adăugată, la 6px ceasul ieșea 17px din insulă */
gap: 4px; padding: 0 12px 0 8px;
background: linear-gradient(180deg, #221a10, #120d07);
border: 1px solid rgba(212,165,68,.55); border-radius: 16px;
box-shadow: 0 4px 16px rgba(0,0,0,.55);
}
/* avatar + timer = UN cerc: poza estompată, secundele în centru, SEC sub ele;
inelul e recolorat din features.js (verde → auriu ≤20s → roșu ≤10s) */
#raAvatar { position: relative; width: 50px; height: 50px; flex: 0 0 50px;
border-radius: 50%; border: 3px solid #3fae6a; overflow: hidden;
background: rgba(0,0,0,.5);
box-shadow: 0 0 0 2px #221a10, 0 2px 8px rgba(0,0,0,.6); }
/* Nu e rândul celui de jos → secundele dispar, inelul rămâne auriu şi gol.
Starea vine din `data-timer-state`, pus de updateTimerDisplay (remi-pro.js) după
locul ACTIV — deci merge şi la spectator, unde vechiul `.ra-liniste` (legat de
`isMyTurn`) stingea secundele permanent. (18-09-2026) */
#raAvatar[data-timer-state="idle"] #raTval { display: none !important; }
#raAvatar img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .45; }
#raTval { position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; }
/* `content` cere ghilimele; scris `SEC` fără ele, browserul arunca toată regula şi
eticheta nu s-a desenat niciodată — secundele stăteau ca un număr gol pe poză. */
#raTval::after { content: "SEC"; font-size: 6px; letter-spacing: 1px; color: #cfe8d8; font-weight: 600; }
/* numele DEASUPRA chipurilor, ca la Șeptică */
.ra-mid { display: flex; flex-direction: column; gap: 1px; }
.ra-nume { color: #e9c45a; font-weight: 800; font-size: 12px;
letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.15; }
.ra-chips { display: flex; gap: 4px; }
/* chipuri = casete cu ramă, ca la Tabinet */
.ra-chip { background: rgba(0,0,0,.45); border: 1px solid rgba(212,165,68,.35);
border-radius: 9px; padding: 4px 9px; min-width: 46px; box-sizing: border-box;
text-align: center; display: flex; flex-direction: column; line-height: 1.05; }
.ra-chip b { color: #f2e9d0; font-size: 12px; font-weight: 800; }
.ra-chip small { color: #b8a97e; font-size: 6.5px; letter-spacing: 1px; }
/* balanța: pastilă AURIE cu text închis, ca „500" la Șeptică */
.ra-gold { background: linear-gradient(180deg,#f0d075,#d4a544) !important;
border: 1px solid #8a6a1e; }
.ra-gold b { color: #3a2b10 !important; }
.ra-gold small { color: #5d4a1e !important; }
.ra-spacer { flex: 1 1 auto; }
/* butoanele mutate aici de features.js: grilă 4×2 („8 butoane pui 4 și 4"),
uniforme, mici, întunecate, icoană aurie */
#raActiuni { display: grid; grid-template-columns: repeat(4, 22px);
grid-auto-rows: 22px; gap: 3px; align-items: center; }
#raActiuni .sort-btn,
#raActiuni .action-btn-game { width: 22px !important; min-width: 22px !important;
height: 22px !important; flex: none !important; padding: 0 !important; margin: 0 !important;
overflow: visible !important; display: inline-flex !important;
align-items: center !important; justify-content: center !important;
background: rgba(0,0,0,.45) !important; border: 1px solid rgba(212,165,68,.3) !important;
border-radius: 6px !important; box-shadow: none !important; }
#raActiuni .action-btn-game .chip-label,
#raActiuni .action-btn-game .chip-shortcut { display: none !important; }
#raActiuni .action-btn-game::before,
#raActiuni .action-btn-game::after { display: none !important; } /* badge-urile se călcau */
#raActiuni .action-btn-game .material-symbols-rounded,
#raActiuni .sort-btn .material-symbols-rounded { display: inline-flex !important;
font-size: 15px !important; color: #e9c45a !important; }
#raActiuni .action-btn-game[disabled] { opacity: .35 !important; }
/* ── Ghidaj uman: ce trebuie să faci ACUM pulsează („trebuie animații să
înțelegem uman"). Butonul DEBLOCAT (aria-disabled≠true) = pasul următor. */
@keyframes raPuls {
0%, 100% { box-shadow: 0 0 0 0 rgba(233,196,90,.75); transform: scale(1); }
50% { box-shadow: 0 0 0 7px rgba(233,196,90,0); transform: scale(1.14); }
}
#raActiuni .action-btn-game:not([aria-disabled="true"]):not(#btnAtu) {
animation: raPuls 1.1s ease-in-out infinite !important;
background: rgba(233,196,90,.22) !important;
border-color: #e9c45a !important;
}
#raActiuni .action-btn-game:not([aria-disabled="true"]):not(#btnAtu) .material-symbols-rounded {
color: #ffe9a8 !important;
}
#raActiuni .action-btn-game[aria-disabled="true"] { opacity: .45 !important; }
/* faza „alege o piesă" (ai tras, nimic selectat): rama alb-aurie licărește
în jurul mâinii. #raGhidaj e creat de features.js în .hand-scroll-wrapper
(piesele se re-randează la ~2s și și-ar reseta animația; pseudo-elementele
::before/::after ale wrapperului sunt deja folosite de joc — 10×10px). */
@keyframes raLicarOpac { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
#raGhidaj { display: none; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
border-radius: 8px; pointer-events: none;
border: 3px solid #fff0b8; /* alb-auriu: auriul curat se pierdea pe lemn */
box-shadow: 0 0 14px 4px rgba(233,196,90,.9), inset 0 0 18px rgba(255,240,184,.55);
animation: raLicarOpac 1.6s ease-in-out infinite; z-index: 5; }
/* !important: bate display:none-ul INLINE pus de features.js la creare
(inline-ul e plasa de siguranță pt. portret/desktop, unde CSS-ul ăsta nu există) */
body.ra-faza-alege #raGhidaj { display: block !important; }
/* ── Statusurile per jucător („2 PIESE", „ATU", „TRAGE"…) în rândurile din
dreapta: remi-pro le strivea la punct verde 6×6 cu font 0 (regulă (0,3,1)
cu !important — de-aia html+body aici). Cu text = pastilă aurie lizibilă;
goale = rămân punct verde de prezență. */
html body.game-active.immersive-mode .opponent-area .opponent-status,
html body.mp-game-active.immersive-mode .opponent-area .opponent-status,
html body.game-active .opponent-area .opponent-status,
html body.mp-game-active .opponent-area .opponent-status {
display: inline-block !important; width: auto !important; height: auto !important;
font-size: 7.5px !important; line-height: 1 !important; font-weight: 800 !important;
letter-spacing: .5px !important; text-transform: uppercase !important;
padding: 2px 5px !important; border-radius: 5px !important;
background: linear-gradient(180deg, #eecb6b, #d4a544) !important; color: #2a1f0e !important;
}
html body.game-active .opponent-area .opponent-status:empty,
html body.mp-game-active .opponent-area .opponent-status:empty,
html body.game-active.immersive-mode .opponent-area .opponent-status:empty,
html body.mp-game-active.immersive-mode .opponent-area .opponent-status:empty {
width: 6px !important; height: 6px !important; padding: 0 !important;
border-radius: 50% !important; background: #4caf50 !important;
}
/* ATU în apron (features.js îl creează lângă RUNDA): bara de context care-l
arăta („ATU: 7") e ascunsă în peisaj. Randat ca PIESĂ de joc în miniatură
(„fă-l ca piesa de joc că nu se înțelege"): calup ivoriu, cifra + bulina
în culoarea piesei. */
#raAtu { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
#raAtuV { width: 17px; height: 24px; border-radius: 3px;
background: linear-gradient(180deg, #f7f1de, #e9dfc2);
box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1px; font-weight: 800; font-size: 11px; }
#raAtuV::after { content: ''; width: 5px; height: 5px; border-radius: 50%;
background: currentColor; }
/* dreapta: RÂNDUL cine / RUNDA n / ceas mare auriu */
.ra-dr { display: flex; align-items: center; gap: 5px; }
/* 16-09-2026 — userul: „organizează bara de jos: Etalează/Lipeşte să nu se vadă la spectator,
încadrează bara frumos stânga-dreapta". Spectatorul nu mută, deci butoanele pleacă (până azi
rămâneau vizibile, doar dezactivate); blocul cu rândul/runda/Atu/ceasul stă lipit în dreapta —
în peisaj `.ra-spacer` e ascuns şi rămâneau 89px goi în dreapta (măsurat la 844×390; după:
avatar de la L71, ceas până la R634 într-o bară L62–R647). */
html body.spectator-mode #rlApron #raActiuni { display: none !important; }
html body #rlApron > .ra-dr { margin-left: auto !important; }
.ra-2r { text-align: center; line-height: 1.15; }
.ra-2r-sus { color: #e9c45a; font-weight: 700; font-size: 8px; letter-spacing: 1px; }
.ra-2r-jos { color: #fff; font-weight: 800; font-size: 11px;
max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* RÂNDUL cu lățime mărginită: numele lungi nu mai lungesc bara („se lungește
când este text mai mare") — numele se taie cu „…", nimic nu se mișcă.
64px (nu 74): loc pentru piesa ATU fără să iasă ceasul din insulă.
18-09-2026: era `width: 64px` FIX, iar în peisaj părintele `#raRandul` are
44px cu `overflow: hidden` — deci cei 64px erau retezaţi de părinte, la
mijlocul literei, fără „…". Măsurat: „sbot_bogdan15" cerea 75px şi primea 44,
pe TOATE cele şapte mărimi de peisaj. Cu `width: 100%` numele se strânge la
cât are părintele şi se scurtează cu trei puncte, cum era gândit. */
#raRndCine { width: 100%; max-width: 64px; }
.ra-ceas { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
border: 3px solid #e9c45a; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 9px; color: #e9c45a; background: rgba(0,0,0,.5); }
/* cardul de jucator la hover/tap pe avatar — sablonul Septicii */
#raHover { display: none; position: fixed; left: 20px; bottom: 58px; z-index: 1500; width: 196px;
background: linear-gradient(180deg, rgba(16,13,8,.97), rgba(28,22,12,.97));
border: 1px solid rgba(212,165,68,.5); border-radius: 10px; padding: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,.6); }
/* !important: bate display:none-ul INLINE din index.php (plasa care ascunde
cardul în portret/desktop, unde CSS-ul ăsta nu se aplică și etichetele lui
apăreau ca text gol la fundul paginii) */
#raHover.on { display: block !important; }
.rh-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
#rhAv { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #e9c45a; object-fit: cover; }
.rh-nume { color: #e9c45a; font-weight: 800; font-size: 12px; }
.rh-bot { background: #2e6fb0; color: #fff; font-size: 8px; font-weight: 700;
padding: 1px 6px; border-radius: 4px; letter-spacing: 1px; }
.rh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rh-cel { background: rgba(0,0,0,.4); border-radius: 6px; padding: 3px 6px;
text-align: center; line-height: 1.1; }
.rh-cel b { color: #f2e9d0; font-size: 11px; display: block; }
.rh-cel small { color: #b8a97e; font-size: 6.5px; letter-spacing: 1px; }
.rh-aur { color: #e9c45a !important; }
.rh-con { margin-top: 6px; }
.rh-con-cap { display: flex; justify-content: space-between; align-items: baseline; }
.rh-con-cap span { color: #b8a97e; font-size: 7px; letter-spacing: 1px; }
.rh-con-cap b { color: #4fc47f; font-size: 11px; }
.rh-con-sina { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); margin-top: 2px; overflow: hidden; }
.rh-con-fill { height: 100%; width: 0; background: #4fc47f; border-radius: 2px; transition: width .3s; }
.rh-dc { text-align: right; color: #8a97a5; font-size: 7px; margin-top: 2px; }
.rh-ai { margin-top: 6px; text-align: center; color: #8a97a5; font-size: 8px; font-style: italic; }
}
/* ═══════════ MOBIL, AMBELE ORIENTĂRI (fișierul se încarcă doar ≤991px) ═══════════
Header + footer „din joc", audit 01-09: butoane neîncadrate, text invizibil,
suprapuneri. Aici NU suntem în @media-ul de peisaj — se aplică și în portret. */
/* FOOTER — insulă de navigare lizibilă (era text 9px gri 60% pe TRANSPARENT,
cu icoanele comentate în HTML = capsule „goale") */
#navRail {
/* culorile vin din TEMĂ, nu scrise fix — altfel bara rămânea albastră
peste orice temă (la Remi, care e maro-aurie, sărea în ochi). */
background: linear-gradient(180deg, var(--remi-surface, #212a3d), var(--remi-bg, #1a2233)) !important;
border-top: 1px solid rgba(var(--remi-accent-rgb, 91,141,239), .35) !important;
box-shadow: 0 -3px 10px rgba(0,0,0,.35) !important;
height: auto !important; max-height: none !important; min-height: 0 !important;
padding-top: 0 !important;
}
/* Înălțimea REZERVATĂ barei (din ea se calculează cât ocupă masa/lobby-ul).
În LOBBY se vede și banda de progres: 22 + 26 + padding = 52.
La MASĂ banda e ascunsă, deci rămân doar butoanele: 30.
Fără asta, conținutul (26+30+padding) depășea cei 48px moșteniți și
eticheta „MESE" era tăiată de marginea ecranului. */
:root, body { --nav-rail-h: 52px; }
body.game-active, body.mp-game-active { --nav-rail-h: 30px; }
.nav-bar-primary { display: flex !important; gap: 6px !important; padding: 2px 8px !important; }
.nav-bar-btn {
flex: 1 1 0 !important; height: 26px !important; border-radius: 9px !important;
background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important;
display: flex !important; align-items: center !important; justify-content: center !important;
position: relative !important;
}
.nav-bar-btn .nav-bar-label {
display: inline-block !important; /* era display:none — etichete invizibile */
font-size: 10px !important; font-weight: 700 !important;
letter-spacing: .3px !important; color: #d5dbe8 !important; opacity: 1 !important;
}
.nav-bar-btn.active { background: rgba(91,141,239,.18) !important; border-color: rgba(91,141,239,.55) !important; }
.nav-bar-btn.active .nav-bar-label { color: #7ea6f5 !important; }
.nav-bar-btn .chat-unread-badge,
.nav-bar-btn .nav-badge { position: absolute !important; top: -4px !important; right: 6px !important; }
/* FAB-ul Profil = buton egal în rând (stătea ridicat PESTE banda de progres) */
.nav-bar-fab {
flex: 0 0 44px !important; height: 26px !important; margin: 0 !important;
top: 0 !important; transform: none !important; border-radius: 9px !important;
background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important;
display: flex !important; align-items: center !important; justify-content: center !important;
position: relative !important; overflow: visible !important;
}
.nav-bar-fab img, .nav-fab-avatar {
width: 22px !important; height: 22px !important; border-radius: 50% !important;
margin: 0 !important; position: static !important;
}
/* banda de progres: 26px cu conținut de 18px — nimic tăiat, nimic peste MENU */
.nav-rail .status-bar {
flex: 0 0 22px !important; height: 22px !important; min-height: 22px !important;
max-height: 22px !important; box-sizing: border-box !important;
padding: 1px 8px !important; align-items: center !important; overflow: hidden !important;
}
.nav-rail .status-bar .status-item {
height: 16px !important; min-height: 0 !important; padding: 0 5px !important;
font-size: 9.5px !important; align-items: center !important;
}
.nav-rail .status-bar .material-symbols-rounded { font-size: 12px !important; }
.nav-rail .status-bar .balance-value { font-size: 10px !important; line-height: 1 !important; }
.nav-rail .status-bar .xp-bar-container { height: 14px !important; }
.nav-rail .status-actions { height: 18px !important; align-items: center !important; overflow: visible !important; }
.nav-rail .status-actions .status-btn { height: 18px !important; width: auto !important; padding: 0 4px !important; }
.nav-rail .status-actions .material-symbols-rounded { font-size: 14px !important; }
.nav-rail .status-actions .hint-count {
top: -2px !important; right: -2px !important; width: 12px !important;
height: 12px !important; font-size: 8px !important; line-height: 12px !important;
}
/* HEADER în peisaj: clusterul ♠/🎡 avea butoane de 36px într-un header de 28px */
@media (orientation: landscape) and (max-height: 500px) {
.ds-cluster { height: 24px !important; align-items: center !important; gap: 4px !important; }
.ds-cluster .ds-hbtn {
width: 22px !important; height: 22px !important; min-width: 22px !important;
font-size: 13px !important; padding: 0 !important; display: inline-flex !important;
align-items: center !important; justify-content: center !important;
}
}
/* ═══ Completări după verificarea live (01-09, seara) ═══ */
@media (orientation: landscape) and (max-height: 500px) {
/* rândul adversarului prins în coloana lui: la mesele de 2 avea lățime
fixă mai mare decât coloana → ieșea 24px din ecran, cu insignă cu tot */
html body.game-active .opponent-area,
html body.game-active.immersive-mode .opponent-area {
width: 100% !important; min-width: 0 !important; max-width: 100% !important;
box-sizing: border-box !important;
}
/* insigna de status: sus-dreapta pe rândul numelui, nu peste statistici;
features.js o scurtează la ultimul segment („2 piese"), aici doar plasa */
html body.game-active .opponent-area { position: relative !important; }
html body.game-active .opponent-area .opponent-status,
html body.mp-game-active .opponent-area .opponent-status,
html body.game-active.immersive-mode .opponent-area .opponent-status,
html body.mp-game-active.immersive-mode .opponent-area .opponent-status {
position: absolute !important; right: 2px !important; top: 2px !important;
max-width: 64px !important; overflow: hidden !important;
text-overflow: ellipsis !important; white-space: nowrap !important;
}
/* alerta „piese puține" = roșie, nu aurie */
.opponent-status.ra-alerta {
background: linear-gradient(180deg, #e0654f, #c74a35) !important;
color: #fff !important;
}
}
/* ═══ Golul masă–footer + fundalul dublu la „Mese" (01-09, noaptea) ═══ */
/* footerul era `position:fixed` cu `top` calculat pentru alt ecran (327 pe un
viewport de 357 → 18px gol deasupra și ieșit sub ecran). Ancorat de JOS. */
#navRail { top: auto !important; bottom: 0 !important; }
@media (orientation: landscape) and (max-height: 500px) {
/* main-content se calculează din variabile HARDCODATE (--nav-rail-h: 76px),
dar la masă footerul real are 30px (banda de progres e ascunsă) + header 28
→ 76−58 = exact golul de 18px dintre scaunul de jos și footer.
Corectăm VARIABILELE, nu înălțimile — calculul lor rămâne stăpân. */
body.game-active, body.mp-game-active { --top-bar-h: 28px; --nav-rail-h: 30px; }
/* „← Mese": pastila butonului stătea într-o bară cu propria pastilă
(#mpGameBar) = fundal dublu. Containerul devine transparent. */
#mpGameBar { background: transparent !important; border: none !important;
box-shadow: none !important; padding: 0 !important; }
}
/* ═══ GEOMETRIA MESEI ÎN PEISAJ — ACEEAŞI HARTĂ CA PE DESKTOP (2026-09-03) ═══
ÎNAINTE, aici erau trei blocuri (2P/3P/4P) cu harta VECHE: `opp1` + `sidebar`
şi trei rânduri. Între timp desktopul s-a schimbat: şirul de aruncate a
coborât pe masă (aria `sir`), activitatea a devenit bandă orizontală (aria
`jurnal`), iar adversarii + bara au intrat într-o coloană proprie,
`#lateralWrap` (aria `lateral`).
Pe mobil ariile alea NU existau, iar JS-ul construieşte structura nouă la
ORICE lăţime. Rezultatul măsurat pe 737×357: banda şi coloana laterală cereau
arii inexistente, browserul le făcea piste proprii, iar ACTIVITATEA ajungea
10px înălţime la y=353 şi ATU la y=355 — adică sub marginea de jos. Nu se
vedeau deloc.
Acum harta e IDENTICĂ cu desktopul. Un singur bloc pentru toate numerele de
jucători: lăţimile coloanelor nu se mai scriu aici, le scrie JS-ul inline
(`updateEtalareZones`), care ştie care zonă e plină şi care nu.
RÂNDURILE sunt calculate din PROPORŢIILE desktopului (măsurate la 1277×697,
înălţime de grilă 502px), nu alese din ochi:
zone 45.6% · sir 12.4% · jurnal 5.2% · stativ 36.9%
La 299px de grilă în peisaj rezultă ~44 / 36 / 22 / 108. Jurnalul primeşte 22
şi nu 15 cât ar da proporţia: o intrare are 18px, iar sub 22 intrările ies
din cutie şi banda rămâne goală (exact bug-ul raportat).
═══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
/* Harta şi rândurile sunt scrise O SINGURĂ DATĂ, în regula de bază de la
începutul fişierului (`html body.game-active .game-play-view…[data-players]`).
Aici doar aşezăm blocurile în ariile ei. */
/* coloana din dreapta: adversarii + bara cu ATU şi teancul */
html body #lateralWrap {
grid-area: lateral !important;
display: flex !important; flex-direction: column !important;
gap: 3px !important; min-height: 0 !important; overflow: hidden !important;
}
/* ---- ŞIRUL DE ARUNCATE: bandă sub zone, ca pe desktop (tavă cu jgheab) ----
`padding-left: 42px` face loc butonului plutitor, care în peisaj stă lipit
de marginea din stânga (pe desktop are marginea liberă a paginii). Fără el,
butonul cădea exact peste eticheta „ARUNCATE". */
html body .game-play-view > .discard-row {
grid-area: sir !important; position: relative;
display: flex !important; flex-direction: row !important;
align-items: center !important; justify-content: flex-start !important;
/* `padding-left: 8`, nu 42: eticheta stă LIPITĂ STÂNGA, iar banda câştigă
68px — 20 de piese la vedere în loc de 18. Butonul plutitor rămâne unde
era (stânga, centrat vertical, ca pe desktop) şi cade peste colţul de
jos al benzii; e translucid, deci nu deranjează — decizia userului. */
gap: 2px !important; min-height: 0 !important;
padding: 2px 8px !important;
background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .18)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .28) !important;
border-radius: 10px !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
}
html body .discard-row .sidebar-section-header {
flex: 0 0 auto !important; white-space: nowrap !important;
margin: 0 !important; padding: 0 !important; height: auto !important;
font-size: 9px !important; letter-spacing: -.2px !important; gap: 3px !important;
}
/* iconiţa „layers" scoasă: cuvântul ARUNCATE e limpede şi singur, iar cei
~16px merg în bandă, unde încape o piesă în plus. */
html body .discard-row .sidebar-section-header .material-symbols-rounded { display: none !important; }
/* Jgheabul: 45 = 4 sus + piesă 30 + 3 jos + 8 pentru bara de derulare.
Bara mănâncă din înălţimea utilă (clientHeight); fără locul ăsta,
`overflow-y: hidden` taie piesele la partea de sus. */
html body .discard-row .discard-history-strip {
flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
height: 46px !important; min-height: 46px !important; max-height: 46px !important;
display: flex !important; flex-wrap: nowrap !important;
align-items: flex-start !important; justify-content: flex-start !important;
gap: 2px !important; padding: 4px 4px 2px !important;
overflow-x: auto !important; overflow-y: hidden !important;
background: rgba(0, 0, 0, .22) !important; border-radius: 8px !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4) !important;
}
/* piesele aruncate CÂT CELE ETALATE (22×30 la scara peisajului) */
html body #discardHistoryStrip .tile {
flex: 0 0 22px !important; width: 22px !important;
min-width: 22px !important; max-width: 22px !important;
height: 30px !important; min-height: 30px !important; max-height: 30px !important;
border-radius: 3px !important; font-size: 12px !important;
}
/* ---- ACTIVITATEA MESEI: aceleaşi reguli ca pe desktop (remi-pro.css ~27843),
copiate, nu reinventate ---- */
html body .jurnal-orizontal {
grid-area: jurnal !important; display: flex !important; align-items: center !important;
justify-content: flex-start !important; min-height: 0 !important;
padding: 0 6px !important; overflow: hidden !important;
}
html body .jurnal-orizontal .activity-log {
width: 100% !important; display: flex !important; flex-direction: row !important;
align-items: center !important; gap: 8px !important;
overflow: hidden !important; min-width: 0 !important; height: auto !important;
}
html body .jurnal-orizontal .activity-log-header {
flex: 0 0 auto !important; margin: 0 !important; white-space: nowrap !important;
padding-right: 8px !important; border-right: 1px solid rgba(244, 236, 216, .14) !important;
}
html body .jurnal-orizontal .activity-log-body {
flex: 1 1 auto !important; min-width: 0 !important;
display: flex !important; flex-direction: row !important; gap: 6px !important;
align-items: center !important; width: auto !important; height: auto !important;
overflow-x: auto !important; overflow-y: hidden !important;
}
html body .jurnal-orizontal .activity-log-body > * {
flex: 0 0 auto !important; white-space: nowrap !important; margin: 0 !important;
}
/* ---- DOSUL ADVERSARULUI: mărimea ŞI aspectul pieselor etalate, ca pe
desktop; înainte era un fildeş mai cald, vizibil diferit ---- */
/* Bara laterală = CÂT CONŢINUTUL ei (teanc + ATU). Era întinsă la 95px cu
doar 60px de conţinut — 35px goi jos, exact sub teanc. Spaţiul eliberat
merge la cardurile adversarilor, care cresc de la 60 la 66px, ca rândul
mâinii să încapă fără să taie piesele. Măsurat: coloana 287px, ocupat 287,
fără depăşire. */
/* ═══ PIESELE ADVERSARILOR ERAU TĂIATE — cauza reală (2026-09-03) ═══
`#seatNorth` e mutat de JS în coloană şi, în peisaj, rămâne o CUTIE cu
`overflow: hidden` care se termină la y≈224. Tot ce trece de acolo e
decupat — la masa de 4 jucători, exact rândul ultimului adversar.
Cel mai greu de prins: `getBoundingClientRect` spune unde STĂ elementul,
nu ce se DESENEAZĂ. Piesa raporta poziţie corectă în card, dar nu era
pictată. Dovada a venit din `elementFromPoint` pe înălţimea piesei: la 15%
întorcea piesa, la 50% şi 85% întorcea fundalul.
Pe desktop nu se întâmplă fiindcă acolo `#seatNorth` are `display: contents`
— nu generează cutie, deci nu decupează (vezi nota din `remi-pro.css`,
„scaunele rămân nepoţi"). În peisaj lipsea. */
html body #lateralWrap > #seatNorth { display: contents !important; }
/* `min-height: 0` ar lăsa cardurile să fie strivite când coloana se umple,
iar cel de jos cedează primul. `flex-shrink: 0` + un minim real le ţine
egale. */
html body #lateralWrap > #remiSidebar {
flex: 0 0 auto !important; height: auto !important;
min-height: 0 !important; max-height: none !important;
}
html body #lateralWrap .opponent-area {
flex: 0 0 auto !important; flex-shrink: 0 !important;
height: auto !important; min-height: 69px !important; max-height: none !important;
}
/* Teancul stă LIPIT JOS, ca pe desktop (`#lateralWrap > #remiSidebar` are
acolo acelaşi `margin-top: auto`). Fără el rămâneau 25px goi sub teanc, iar
adversarii nu aveau unde să respire. */
html body #lateralWrap > #remiSidebar { margin-top: auto !important; }
/* CÂT ÎNCAPE, calculat: coloana are 287px, teancul 70, spaţiile 9 — rămân
208px pentru trei carduri, adică 69 fiecare. Din 69, antetul (avatar, nume,
insigne) ia 42, deci rândul mâinii primeşte 27. La 36px cum pusesem întâi,
teancul lipit jos se SUPRAPUNEA 24px peste ultimul adversar.
SELECTORUL e lung dinadins: `remi-pro.css` are, în acelaşi @media de
peisaj, `body.game-active .opponent-area .opponent-hand { height: 24px }`
cu specificitate (0,3,0). Un simplu `html body .opponent-hand` (0,1,2)
pierde — `!important` nu ajută, el departajează doar la specificitate
egală. Semnul că se întâmplă asta: padding-ul se aplica, înălţimea nu. */
html body.game-active .opponent-area .opponent-hand,
html body.mp-game-active .opponent-area .opponent-hand,
html body.game-active.immersive-mode .opponent-area .opponent-hand,
html body.mp-game-active.immersive-mode .opponent-area .opponent-hand {
height: 27px !important; min-height: 27px !important; max-height: 27px !important;
flex-wrap: nowrap !important; gap: 2px !important;
align-items: flex-start !important; padding: 1px 2px 0 !important;
overflow-x: auto !important; overflow-y: hidden !important;
}
/* 16×21, nu 22×30 ca pe desktop: în rândul de 27px (din care bara de derulare
ia câţiva) nu încape mai mult. Forma piesei rămâne aceeaşi (3:4), iar
aspectul — fildeşul şi bizoul de mai jos — e identic cu al etalatelor. */
/* DOAR mărimea. Culoarea, bordura, relieful şi luciul rămân cele ale
jocului (`remi-pro.css` ~5831: auriul cald `172deg #ead7a8 → #c8ad6a`,
plus `::before` cu luciul radial).
2026-09-03: pusesem aici fildeşul pieselor etalate — NU fusese cerut, era
o iniţiativă a mea şi am scos-o. Dacă vreodată se schimbă aspectul dosului,
se schimbă în `remi-pro.css`, într-un singur loc, nu pe orientări. */
html body .opponent-tile-back {
flex: 0 0 16px !important; width: 16px !important;
min-width: 16px !important; max-width: 16px !important;
height: 21px !important; min-height: 21px !important; max-height: 21px !important;
}
/* ---- DERULĂRI: stilul care există deja în joc (`.etalare-scroll`,
remi-pro.css ~4659) — subţiri, aurii. Nu inventăm altul. ---- */
/* Mâna adversarului NU primeşte bară vizibilă: rândul are 27px, iar bara
mânca 10 din ei — rămâneau 17 pentru o piesă de 21, adică tăiată exact pe
jumătate. Derularea rămâne funcţională (se trage cu degetul), doar bara nu
se mai desenează. Banda ARUNCATE îşi păstrează bara — acolo sunt 45px. */
html body.game-active .opponent-area .opponent-hand,
html body.mp-game-active .opponent-area .opponent-hand {
scrollbar-width: none !important;
}
html body.game-active .opponent-area .opponent-hand::-webkit-scrollbar,
html body.mp-game-active .opponent-area .opponent-hand::-webkit-scrollbar {
display: none !important; height: 0 !important;
}
html body #discardHistoryStrip,
html body .jurnal-orizontal .activity-log-body {
scrollbar-width: thin !important;
scrollbar-color: rgba(255, 215, 0, .35) transparent !important;
}
/* `.opponent-hand` NU e în lista de mai jos: bara ei e ascunsă complet (vezi
nota de mai sus). Dacă o adaugi aici, piesele se taie din nou. */
html body #discardHistoryStrip::-webkit-scrollbar,
html body .jurnal-orizontal .activity-log-body::-webkit-scrollbar { height: 4px !important; width: 4px !important; }
html body #discardHistoryStrip::-webkit-scrollbar-track,
html body .jurnal-orizontal .activity-log-body::-webkit-scrollbar-track {
background: rgba(0, 0, 0, .18) !important; border-radius: 2px !important;
}
html body #discardHistoryStrip::-webkit-scrollbar-thumb,
html body .jurnal-orizontal .activity-log-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255, 215, 0, .45), rgba(184, 134, 11, .35)) !important;
border-radius: 2px !important;
}
/* ---- BUTONUL PLUTITOR: aceeaşi poziţie ca pe desktop (stânga, centrat pe
verticală), doar mai mic. Pe desktop stă în marginea liberă a paginii;
în peisaj masa începe la 6px, deci nu există margine — de aceea banda
de aruncate primeşte `padding-left: 42px` (mai sus), ca butonul să
nu-i mai acopere eticheta. Mutarea lui jos ar fi rupt obiceiul de pe
desktop, unde utilizatorul îl caută la mijloc-stânga. ---- */
html body .immersive-toggle-float {
top: 50% !important; bottom: auto !important; left: 6px !important;
transform: translateY(-50%) !important;
width: 32px !important; height: 32px !important;
min-width: 32px !important; min-height: 32px !important;
}
html body .immersive-toggle-float .material-symbols-rounded { font-size: 17px !important; }
/* ═══ BANDA DE ACTIVITATE, ÎN HEADER ═══
Mutată acolo de `asiguraColoanaLaterala` (clasa `jurnal-in-header`).
Ocupă spaţiul gol dintre „Mese" şi iconiţele din dreapta. */
html body .top-bar { display: flex !important; align-items: center !important; }
html body .top-bar .jurnal-in-header {
position: static !important; grid-area: auto !important;
flex: 1 1 auto !important; min-width: 0 !important;
height: 26px !important; max-height: 26px !important;
margin: 0 10px !important; padding: 0 8px !important;
overflow: hidden !important;
background: rgba(0, 0, 0, .22) !important; border-radius: 8px !important;
}
/* ═══ STATIVUL PE DOUĂ ETAJE, PE TOATĂ LĂŢIMEA (11-09-2026) ═══
Numărul de piese pe rând se calculează în JS din lăţimea stativului
(`cols = (availW + gap) / (tileW + gap)`), cu piesa REALĂ (24×36) şi
column-gap 2 — vezi `masoaraPiesaStativ` din remi-pro.js. La 699px ies
26 de coloane × 2 rânduri; piesele stau LIPITE (pas 26), iar restul
stativului e loc de manevră, pe ambele etaje.
ATENŢIE: capacitatea trebuie să vină din LĂŢIME, nu din câte piese ai în
mână. Dacă ar fi derivată din mână, s-ar schimba la fiecare piesă aruncată
şi piesa lăsată pe rândul doi ar sări pe primul — bug reparat pe 02-09,
vezi comentariul „CAPACITATE FIXĂ" din `remi-pro.js`.
Istoric: stativul fusese îngustat la 260px ca să „forţeze" două etaje.
Dar JS-ul calcula atunci pasul cu piesa de pe :root (22) şi cu row-gap-ul
(12, primul număr din shorthand-ul `gap`) — pas 34 — deci 7 coloane,
capacitate 14: a 15-a piesă (cea trasă) cădea PESTE alta. Ăsta era „se
suprapun / rămân blocate / se schimbă piesa când o mut".
═══ NU REPETA: nu întinde PASUL (`--hand-cols`) ca să umpli lăţimea ═══
Încercat pe 11-09: pas 94 pentru o piesă de 22 — piesele nu mai puteau
sta lipite, şi exact asta face stativul folositor. Sloturile rămân la
distanţa unei piese; lăţimea se umple cu MAI MULTE coloane, nu cu pas
mai mare. Mecanismul `--hand-cols` din remi-pro.js e inert cât timp
proprietatea nu e setată aici.
gap 2px, nu `12px 2px`: piesele sunt position:absolute, gap-ul nu aşază
nimic — doar JS-ul îl citeşte (row-gap = distanţa dintre etaje).
2 + 36 + 2 + 36 = 76 = înălţimea stativului; cu 12 al doilea etaj ieşea. */
html body #playerHand {
width: 100% !important; max-width: none !important;
margin-left: 0 !important; margin-right: 0 !important;
gap: 2px !important;
}
/* Variabilele din stativ spun adevărul despre piesa din peisaj (32×45, cât
o fac regulile de mai jos). JS-ul măsoară piesa reală; asta e rezerva lui
când stativul e încă gol. */
html body #seatSouth {
--tile-width: 32px;
--tile-height: 45px;
}
/* 100 = două rânduri de piese (2×45) + 2 gap + 2 padding sus + 6 aer jos.
Era 94, adică EXACT cât ocupă piesele; cum `#playerHand` are
`overflow: hidden`, marginea de jos a rândului al doilea (şi umbra ei) se
tăia — „este taiata partea de jos". Cei 6px vin din insula cu butoane, care
a rămas cu loc gol după scoaterea butoanelor de sortare şi a ATU-ului.
Măsurat pe 956×440: mână T263–B363, rândul de jos se termină la 94 din 100. */
html body #seatSouth .hand-scroll-wrapper,
html body #playerHand {
height: 100px !important; min-height: 100px !important; max-height: 100px !important;
}
/* ═══ PIESELE DIN MÂNĂ, CÂT SĂ SE CITEASCĂ (13-09-2026) ═══════════════════
Cerut de user, cu două capturi de la alte site-uri de remi: acolo piesa
din stativ e mare şi limpede, la noi era 24×36 cu cifra de 13px — măsurat,
19% din înălţimea ecranului faţă de 38% la ei.
Măsurători (peisaj 844×390, banc, ca spectator):
· piesa lor ≈ 39×59, raport 0,66; a noastră era 24×36
· aleasă 32×45 (raport 0,71, între peisajul lor 0,66 şi desktopul lor 0,75)
· stativul creşte 76 → 94; cei 18px vin din spaţiul MORT dintre insula
cu butoane (se termina la 342) şi bara de jos (începe la 361).
Nu dispare nimic de pe ecran: zonele de etalare, şirul de aruncate şi
bara de jos rămân neatinse. Vezi şi regula de `#playerArea` de la
„MÂNA ERA PREA JOS", care coboară insula cu aceiaşi 18px.
Capacitatea rămâne calculată de JS din piesa REALĂ (`masoaraPiesaStativ`),
deci nu trebuie atins nimic acolo: 571px utili / 34 pas = 16 locuri pe rând,
32 pe două rânduri — destul pentru 15 piese plus loc de manevră.
CE BAT regulile astea (toate din remi-pro.css, fişier încărcat ÎNAINTEA
acestuia — vezi includes/header.php:62 vs 67):
· ~15808 `body.game-active .seat-south .player-hand .tile` → 24×36, font 13
· ~22263 `.seat-south .player-hand .tile` → 22×30
· ~20843 `body.spectator-mode .seat-south .player-hand .tile` → max 22×32
Selectorul de aici are ID (`#seatSouth`), deci trece peste toate trei fără
să le ştergem — ele rămân bune pentru celelalte locuri de la masă.
CIFRELE: aceeaşi mărime şi aceeaşi grosime pe TOATE piesele — userul a
respins varianta cu „10 11 12 13" micşorate („unele piese sunt mai groase";
linia subţiază când micşorezi corpul). 28px cu letter-spacing −2px, măsurat
cu fontul real: „13" = 27,1px, încape în cei 28px utili ai piesei; „8" = 15,6.
Grosime 600, nu 800 („sunt cifrele mai subţiri, vezi prima poză").
`margin-right: -2px` scoate spaţiul pe care letter-spacing îl pune şi după
ultima cifră, ca numărul să rămână centrat.
Culorile, bulina şi jokerul rămân ALE NOASTRE — nu se atinge nicio culoare;
doar bulina creşte (piesa e mai mare) şi jokerul umple piesa nouă. */
html body.game-active #seatSouth .player-hand .tile,
html body.mp-game-active #seatSouth .player-hand .tile,
html body #seatSouth .player-hand .tile {
width: 32px !important;
height: 45px !important;
min-width: 32px !important;
max-width: 32px !important;
max-height: 45px !important;
border-radius: 6px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding-top: 2px !important;
}
html body #seatSouth .player-hand .tile .tile-number {
position: static !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: -2px !important;
margin-right: -2px !important;
white-space: nowrap !important;
}
html body #seatSouth .player-hand .tile .tile-suit-dot {
position: static !important;
width: 10px !important;
height: 10px !important;
margin-top: 3px !important;
}
/* Jokerul nostru (SVG-ul din joc, viewBox 40×56 ≈ acelaşi raport ca piesa)
umple piesa nouă; altfel rămânea la 18px, de trei ori mai mic decât cifrele. */
html body #seatSouth .player-hand .tile .joker-svg {
width: 28px !important;
height: 41px !important;
}
/* ── PIESA ÎN TIMPUL MUTĂRII ──────────────────────────────────────────────
„La mutare se schimbă dimensiunea" (user, 13-09-2026). Cauza: cât ţii
piesa cu degetul, jocul nu o mută pe ea, ci arată o COPIE a ei — o clonă
pusă în `` (`createGhost`, remi-pro.js ~2464). Cutia copiei e bună,
că JS-ul îi scrie `width/height` din piesa reală; dar clona iese din
`#seatSouth`, deci regulile de mai sus n-o mai prind şi CIFRA sărea înapoi
la mărimea de bază. Măsurat: în mână 28px, în copie 12px; bulina 10 → 8,4.
`:not(.tile-sm)` — piesele din mână se construiesc fără `tile-sm`
(remi-pro.js:790), cele de pe masă şi din aruncate cu el. Aşa copia unei
piese de pe masă rămâne mică, cum trebuie. */
html body .tile.tile-drag-ghost:not(.tile-sm) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding-top: 2px !important;
border-radius: 6px !important;
}
html body .tile.tile-drag-ghost:not(.tile-sm) .tile-number {
position: static !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: -2px !important;
margin-right: -2px !important;
white-space: nowrap !important;
}
html body .tile.tile-drag-ghost:not(.tile-sm) .tile-suit-dot {
position: static !important;
width: 10px !important;
height: 10px !important;
margin-top: 3px !important;
}
html body .tile.tile-drag-ghost:not(.tile-sm) .joker-svg {
width: 28px !important;
height: 41px !important;
}
/* Insula cu avatarul COBOARĂ sub stativ, lipită de bază. Era `absolute` şi
începea la y=265 în timp ce stativul se termina la 276 — se suprapuneau
11px, exact peste rândul al doilea de piese. 52px, nu 38: blocul cu
avatarul are singur 50px, iar la 38 conţinutul ieşea din insulă.
13-09: 52 → 46. După ce au ieşit din scaun cele trei butoane de sortare şi
ATU-ul, insula avea loc gol; cei 6px daţi înapoi merg la stativ, unde
rândul de jos era tăiat. 46 încape şi poza (36) şi butoanele (36).
`#playerArea` rămâne 149, deci bara de jos nu se mişcă: 100 + 46 + 3. */
html body #seatSouth #rlApron {
top: auto !important; bottom: 0 !important;
height: 46px !important; min-height: 46px !important; max-height: 46px !important;
}
/* ═══ PASTILA DE ACŢIUNE ÎN ZONA STRÂNSĂ ═══
Aceeaşi reparaţie ca pe desktop (`remi-pro.css` ~28031), care stă în
`@media (min-width: 992px)` şi deci nu ajungea aici: când cineva etalează,
celelalte zone se string la 72px şi pastila („T TRAGE", „A ARUNCĂ") ieşea
tăiată — se citea „ARU".
NU ascundem textul, doar micşorăm: bulina cu litera singură nu spune nimic
cuiva care n-a învăţat convenţia — e chiar nota lăsată pe desktop.
Bulina 13px şi fontul 7.5px, fiindcă în peisaj zona e mai scundă. */
html body .etalare-zone.zona-stransa { overflow: visible !important; }
html body .etalare-zone.zona-stransa .bot-action-indicator {
left: 3px !important; right: 3px !important;
width: auto !important; max-width: none !important;
height: auto !important; min-height: 18px !important;
padding: 1px 3px 1px 1px !important; gap: 2px !important;
overflow: hidden !important; white-space: nowrap !important;
z-index: 9 !important; opacity: 1 !important; filter: none !important;
align-items: center !important; justify-content: flex-start !important;
}
html body .etalare-zone.zona-stransa .bot-action-indicator .zone-act-text { display: inline-flex !important; }
html body .etalare-zone.zona-stransa .bot-action-indicator .zone-act-name { display: none !important; }
html body .etalare-zone.zona-stransa .bot-action-indicator .zone-act-action {
font-size: 7.5px !important; letter-spacing: -.2px !important;
}
html body .etalare-zone.zona-stransa .bot-action-indicator .zone-act-icon {
width: 13px !important; height: 13px !important; min-width: 13px !important;
font-size: 8px !important; font-weight: 900 !important;
}
/* ═══ HEADERUL ═══
Ordinea: brand · Mese · ACTIVITATE (elastic) · Jocuri · Roata.
Înainte iconiţele stăteau ÎNAINTEA jurnalului şi îl împingeau la margine,
iar copiii aveau 30px într-un header de 28 şi ieşeau 2px. */
html body .top-bar { gap: 8px !important; padding: 0 8px !important;
height: 30px !important; min-height: 30px !important; }
html body .top-bar .brand-section { order: 1 !important; flex: 0 0 auto !important; height: 26px !important; }
html body .top-bar #mpGameBar { order: 2 !important; flex: 0 0 auto !important; height: 26px !important; }
html body .top-bar .sidebar-section-log { order: 3 !important; flex: 1 1 auto !important;
margin: 0 !important; height: 26px !important; }
html body .top-bar .ds-cluster { order: 4 !important; flex: 0 0 auto !important; height: 26px !important; gap: 6px !important; }
html body .top-bar .actions-section { order: 5 !important; }
/* brandul pe O linie: subtitlul „Rummy Românesc" nu are loc la 30px */
html body .top-bar .brand-section > * { line-height: 1 !important; }
html body .top-bar .brand-section small,
html body .top-bar .brand-section [class*="sub"] { display: none !important; }
/* „Jocuri" şi roata CU TEXT, nu doar iconiţe.
Textul era ascuns de `assets/css/daily-spin.css` ~214 sub 1150px lăţime,
iar butonul rămânea pătrat din `aspect-ratio: 1/1` — care îi impunea
lăţimea egală cu înălţimea şi reteza textul chiar după ce-l afişai. */
html body .top-bar .ds-cluster .ds-hbtn {
aspect-ratio: auto !important; width: auto !important;
min-width: 0 !important; max-width: none !important;
padding: 0 8px !important; gap: 4px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html body .top-bar .ds-cluster .ds-htxt {
display: inline !important; font-size: 10px !important;
white-space: nowrap !important; letter-spacing: .2px !important;
}
html body .top-bar .ds-cluster .ds-hico { font-size: 13px !important; }
/* 07-09-2026: ERA `row-reverse` (cea mai nouă la stânga, fără JS). Capcana:
cu row-reverse overflow-ul cade pe scrollLeft NEGATIV, deci
`scrollWidth == clientWidth` şi banda NU se putea derula deloc — se vedea
una din şase intrări, restul de neatins (măsurat: 2035px conţinut în 141).
Acum ordinea e normală şi JS-ul (`logAction`, remi-pro.js ~1086) derulează
la capătul din dreapta după fiecare intrare: cea mai nouă rămâne la vedere,
cele vechi se ajung derulând spre stânga. */
html body .top-bar .jurnal-in-header .activity-log-body {
flex-direction: row !important; justify-content: flex-start !important;
}
/* zonele nefolosite: JS-ul le dă 0px lăţime, dar le ascundem şi aici ca să
nu rămână chenarul gol (comportament păstrat de la varianta veche) */
html body.game-active .game-play-view[data-players="2"] #etalareZone3,
html body.game-active .game-play-view[data-players="2"] #etalareZone4,
html body.mp-game-active .game-play-view[data-players="2"] #etalareZone3,
html body.mp-game-active .game-play-view[data-players="2"] #etalareZone4,
html body.game-active.immersive-mode .game-play-view[data-players="2"] #etalareZone3,
html body.game-active.immersive-mode .game-play-view[data-players="2"] #etalareZone4,
html body.mp-game-active.immersive-mode .game-play-view[data-players="2"] #etalareZone3,
html body.mp-game-active.immersive-mode .game-play-view[data-players="2"] #etalareZone4 {
display: none !important;
}
html body.game-active .game-play-view[data-players="3"] #etalareZone4,
html body.mp-game-active .game-play-view[data-players="3"] #etalareZone4,
html body.game-active.immersive-mode .game-play-view[data-players="3"] #etalareZone4,
html body.mp-game-active.immersive-mode .game-play-view[data-players="3"] #etalareZone4 {
display: none !important;
}
/* NU adăuga aici `grid-template-areas` sau `grid-template-columns` pe
`[data-players="…"]`. Harta e scrisă O SINGURĂ DATĂ mai sus (aceeaşi
pentru 2/3/4 jucători), iar lăţimile coloanelor le scrie JS-ul inline,
cu `!important` — orice valoare pusă aici e învinsă şi doar încurcă. */
}
/* ═══ Cardul de jucător în PORTRET (aprobat 01-09) ═══
Aceleași stiluri ca în peisaj (cardul e stilat acolo doar în @media-ul
de peisaj); declanșatoarele și poziționarea vin din remi-features.js:
sud = deasupra scaunului, adversari = SUB rândul lor. */
@media (orientation: portrait) {
#raHover { position: fixed; z-index: 1500; width: 196px;
background: linear-gradient(180deg, rgba(16,13,8,.97), rgba(28,22,12,.97));
border: 1px solid rgba(212,165,68,.5); border-radius: 10px; padding: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,.6); }
#raHover.on { display: block !important; }
.rh-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
#rhAv { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #e9c45a; object-fit: cover; }
.rh-nume { color: #e9c45a; font-weight: 800; font-size: 12px; }
.rh-bot { background: #2e6fb0; color: #fff; font-size: 8px; font-weight: 700;
padding: 1px 6px; border-radius: 4px; letter-spacing: 1px; }
.rh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rh-cel { background: rgba(0,0,0,.4); border-radius: 6px; padding: 3px 6px;
text-align: center; line-height: 1.1; }
.rh-cel b { color: #f2e9d0; font-size: 12px; display: block; }
.rh-cel small { color: #b8a97e; font-size: 6.5px; letter-spacing: 1px; }
.rh-aur b { color: #e9c45a !important; }
.rh-con { margin-top: 6px; }
.rh-con-cap { display: flex; justify-content: space-between; align-items: center; }
.rh-con-cap span { color: #b8a97e; font-size: 7px; letter-spacing: 1px; }
.rh-con-cap b { color: #4fc47f; font-size: 11px; }
.rh-con-sina { height: 4px; background: rgba(255,255,255,.12); border-radius: 2px;
margin-top: 2px; overflow: hidden; }
.rh-con-fill { height: 100%; width: 0; background: #4fc47f; border-radius: 2px; transition: width .3s; }
.rh-dc { text-align: right; color: #8a97a5; font-size: 7px; margin-top: 2px; }
.rh-ai { margin-top: 6px; text-align: center; color: #8a97a5; font-size: 8px; font-style: italic; }
}
/* ═══ Scaunul de jos în PORTRET ═══
(18-09-2026: blocul de aici — 70 de linii care redesenau banda în portret cu
fundal maro, module cu ramă, balanţa ca pastilă aurie, butoane de 30px doar cu
iconiţă şi puls auriu în buclă — a fost şters. Banda are acum O SINGURĂ definiţie,
pentru toate ecranele, în secţiunea „BANDA DE JOS — marginea mesei" din
remi-pro.css. Blocul ăsta îi rupea înălţimea butoanelor şi îi întorcea balanţa
la pastila aurie: măsurat live, butonul ieşea 32px într-o bară de 30.) */
/* ═══ Licărul „alege o piesă" și în PORTRET ═══ */
@media (orientation: portrait) {
@keyframes raLicarOpacP { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
body.ra-faza-alege #raGhidaj {
display: block !important; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
width: auto; height: auto; border-radius: 8px; pointer-events: none;
border: 3px solid #fff0b8;
box-shadow: 0 0 14px 4px rgba(233,196,90,.9), inset 0 0 18px rgba(255,240,184,.55);
animation: raLicarOpacP 1.6s ease-in-out infinite; z-index: 5;
}
}
/* (18-09-2026: overlay-ul de secunde din portret, `#raTvalP`, a fost şters odată cu
perechea lui de desktop. Ceasul e acum arcul din jurul avatarului — o singură
definiţie, în secţiunea „BANDA DE JOS" din remi-pro.css, pentru toate ecranele.) */
/* ═══ Claritatea ghidajului în PORTRET: UN singur buton pulsează ═══
Etalare/Atu blocate încă rulau animațiile native (chipGoldIdlePulse etc.)
și derutau — „care-i butonul?". Doar acțiunea cerută are voie să pulseze. */
@media (orientation: portrait) {
.seat-south .player-info-bar .action-btn-game[aria-disabled="true"],
.seat-south .player-info-bar #btnAtu { animation: none !important; }
}
/* ═══ (scos 11-09-2026) ATU-piesă în scaunul de PORTRET — `#raAtuP` ═══
Fusese adăugat fiindcă banda care arăta atuul e compactată la masă. Între timp
ATU-ul stă lângă teanc şi în portret — îl aşază blocul „bara de teanc" de mai
jos, 42×40px lângă `#pileArea` — deci în scaun apărea a doua oară. Perechea
din JS a ieşit din `remi-features.js`; regulile astea rămăseseră fără obiect. */
/* ═══════════ MODALUL „Creează Masă" ÎN PEISAJ — CA PE DESKTOP (11-09-2026) ═══════════
Cele trei panouri (De bază | Avansat | Acces) stau unul lângă altul, toate
vizibile, fără taburi, fără derulare, nimic tăiat — la fel ca pe desktop,
doar la scară mai mică.
De ce nu mai e cu taburi (varianta veche, „doar panoul activ"): bara de
taburi din remi-pro.css apare doar sub 861px, iar aici ascundeam panourile
neactive. Între 861 şi 991px (ferestre mici, telefoane mari) rămânea un
corp cu coloana din dreapta GOALĂ şi Avansat/Acces de neatins — nu puteai
pune boţi, masă privată, nimic. Userul: „modalul e fără stil, cum avem pe
desktop" şi „sunt îngrămădite".
Cum încape pe orice telefon: mobilierul are înălţimi fixe (antet 34, presete
40, subsol 40), corpul ia restul, iar distanţele şi controalele CRESC cu
înălţimea ecranului (clamp pe vh): la 360 sunt strânse la minim, la 440
aerisite. Măsurat pe 740×360, 800×360, 844×390, 956×440: zero text tăiat,
zero derulare, rezervă ≥5px în fiecare zonă. `overflow: hidden auto` pe
coloane e doar plasă de siguranţă pentru ecrane sub 360px.
Două scăpări vechi reparate aici:
- `#mpCondPwd` (parola) era forţat la vedere de `display: flex !important`
deşi JS-ul îl ascunde inline când masa e publică → regula `[style*="none"]`;
- etichetele presetelor („10 pct · 2P · 45s") erau tăiate sub card → cardul
e pe UN rând: icoană, nume, detalii la dreapta. */
@media (orientation: landscape) and (max-height: 500px) {
/* — antet — (remi-pro.css îi dă margin-bottom 20px; aici nu avem de unde) */
.mp-modal-v2 .mp-modal-header { height: 34px !important; margin-bottom: 0 !important; padding: 3px 14px !important; }
.mp-modal-header h3 { font-size: 14px !important; line-height: 1.1 !important; }
.mp-modal-subtitle { display: block !important; font-size: 9px !important;
line-height: 1.1 !important; margin: 0 !important; opacity: .7 !important; }
/* — presete pe un rând — (selectorul dublu bate `min-height: 50px` din remi-pro.css) */
.mp-preset-strip { height: 40px !important; padding: 4px 12px !important; gap: 6px !important;
box-sizing: border-box !important; overflow: hidden !important; align-items: center !important; }
.mp-preset-strip .mp-preset-card {
height: 31px !important; max-height: 31px !important; min-height: 0 !important; box-sizing: border-box !important;
display: flex !important; flex-direction: row !important; align-items: center !important;
gap: 6px !important; padding: 0 10px !important;
}
.mp-preset-strip .mp-preset-card * { line-height: 1.1 !important; }
.mp-preset-strip .mp-preset-label { font-size: 11px !important; }
.mp-preset-strip .mp-preset-tag { display: inline !important; margin-left: auto !important;
font-size: 9px !important; opacity: .75 !important; white-space: nowrap !important; }
/* — corpul: trei coloane, toate vizibile — */
.mp-tabs-bar { display: none !important; }
.mp-modal-body-v2 {
display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; grid-template-rows: 1fr !important;
gap: 0 !important; padding: 5px 6px 3px !important; overflow: hidden !important;
}
.mp-modal-body-v2 .mp-col,
.mp-modal-body-v2 .mp-col.mp-panel-active {
display: flex !important; flex-direction: column !important;
gap: clamp(2px, calc((100vh - 350px) / 10), 10px) !important;
padding: clamp(2px, calc((100vh - 350px) / 8), 12px) 10px !important;
min-height: 0 !important; min-width: 0 !important; margin: 0 !important;
grid-column: auto !important; grid-row: auto !important; /* anulează aşezarea 2×2 de pe desktop */
overflow: hidden auto !important;
border: none !important; border-left: 1px solid rgba(var(--color-accent-rgb, 212, 165, 68), .12) !important;
}
.mp-modal-body-v2 .mp-col-basic { border-left: none !important; }
/* câmpurile ascunse din JS (parola la masă publică) rămân ascunse */
.mp-modal-body-v2 .mp-field-v2[style*="none"] { display: none !important; }
/* — câmpuri: eticheta deasupra opţiunilor; controale care cresc cu ecranul — */
.mp-modal-body-v2 .mp-field-v2 {
display: flex !important; flex-direction: column !important; align-items: stretch !important;
gap: clamp(2px, calc((100vh - 350px) / 25), 5px) !important; min-height: 0 !important;
}
.mp-modal-body-v2 .mp-lbl-v2 { font-size: clamp(10px, 2.5vh, 11px) !important; margin: 0 0 1px !important;
line-height: 1.1 !important; width: auto !important; text-align: left !important; }
.mp-modal-body-v2 .mp-lbl-v2 .material-symbols-rounded { font-size: 13px !important; }
.mp-modal-body-v2 .mp-opt-group { display: flex !important; gap: 4px !important;
height: clamp(21px, 5.5vh, 26px) !important; width: 100% !important; }
.mp-modal-body-v2 .mp-opt-btn {
height: clamp(21px, 5.5vh, 26px) !important; line-height: clamp(21px, 5.5vh, 26px) !important;
min-height: 0 !important; padding: 0 5px !important; font-size: clamp(10.5px, 2.7vh, 12px) !important;
flex: 1 1 0 !important; min-width: 0 !important; white-space: nowrap !important;
}
.mp-modal-body-v2 input { height: clamp(21px, 5.5vh, 26px) !important; min-height: 0 !important;
font-size: clamp(11.5px, 2.9vh, 13px) !important; padding: 0 8px !important; }
.mp-modal-body-v2 #mpTournamentHint { font-size: clamp(9.5px, 2.4vh, 10.5px) !important;
line-height: 1.15 !important; min-height: 0 !important; }
.mp-modal-body-v2 .mp-rule-pills { gap: clamp(4px, 1.4vh, 8px) !important; }
/* rândurile Da/Nu (Contorizată, Turneu, Boţi, Vizibilitate): eticheta stânga, butoanele dreapta */
.mp-modal-body-v2 .mp-field-v2.mp-field-row { flex-direction: row !important; align-items: center !important;
justify-content: space-between !important; gap: 6px !important; }
.mp-modal-body-v2 .mp-field-row .mp-lbl-v2 { margin: 0 !important; white-space: nowrap !important; }
.mp-modal-body-v2 .mp-field-row .mp-opt-group { width: auto !important; flex: 0 0 auto !important; }
.mp-modal-body-v2 .mp-field-row .mp-opt-btn { flex: 0 0 auto !important; padding: 0 7px !important; }
/* „Min rating" tot pe un rând (etichetă + glisor) — câştigă ~12px pe ecranele de 360 */
.mp-modal-body-v2 .mp-field-v2:has(> #mpMinRating) { flex-direction: row !important; align-items: center !important; gap: 8px !important; }
.mp-modal-body-v2 .mp-field-v2:has(> #mpMinRating) .mp-lbl-v2 { margin: 0 !important; white-space: nowrap !important; flex: 0 0 auto !important; }
.mp-modal-body-v2 #mpMinRating { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; height: auto !important; padding: 0 !important; }
/* — subsolul: previzualizarea ŞI butoanele pe UN rând — */
.mp-modal-footer-v2 {
flex: 0 0 40px !important; height: 40px !important; padding: 0 12px !important;
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
align-items: center !important; gap: 10px !important; justify-content: space-between !important;
}
.mp-preview-line { display: block !important; font-size: 9.5px !important; line-height: 1.2 !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; }
.mp-footer-actions { display: flex !important; flex: 0 0 auto !important; gap: 8px !important;
align-items: center !important; margin: 0 !important; padding: 0 !important; height: 28px !important; }
.mp-footer-actions button {
height: 28px !important; min-height: 0 !important; padding: 0 14px !important;
font-size: 12px !important; border-radius: 8px !important; font-weight: 700 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 6px !important; overflow: visible !important; position: relative !important;
}
/* pastila cu miza: lângă text, nu peste el */
.mp-footer-actions button .mp-cost-badge {
position: static !important; transform: none !important; margin-left: 6px !important;
padding: 1px 7px !important; border-radius: 20px !important; font-size: 10px !important;
line-height: 1.3 !important; white-space: nowrap !important;
}
}
/* ── Contorul de etalare „(Xpt/45)" — rând propriu deasupra grilei ───────────
In peisaj butoanele sunt pastile de 22px cu eticheta ascunsa, iar contorul
(singurul care spune cat ai adunat din cele 45 pentru prima etalare) nu avea
unde incapea: cadea peste „BALANTA" si nu se citea. Perechea din remi-pro.js
il pune acum ca prim rand in #raActiuni; aici ii dam forma. */
#raActiuni > .etalare-pts {
order: -1;
grid-column: 1 / -1;
justify-self: stretch;
text-align: center;
position: static !important;
margin: 0 0 1px !important;
padding: 2px 4px;
border-radius: 6px;
font-size: 9px !important;
font-weight: 800;
line-height: 1.15;
white-space: nowrap;
opacity: 1 !important;
color: #e9c45a;
background: rgba(6, 10, 6, .92);
border: 1px solid rgba(212, 165, 68, .75);
}
#raActiuni > .etalare-pts.gata {
color: #8ff0a8;
background: rgba(18, 50, 26, .92);
border-color: #5fbf7a;
}
/* ═══ TASTATURA DESCHISĂ ÎN PEISAJ — ascunde lista de utilizatori ═══════════
2026-09-04.
Măsurat pe banc 740×360: cu tastatura deschisă rămân 177px de viewport, iar
panoul cere 181px doar pe cadru (antet 37 + taburi 26 + listă utilizatori 60
+ bară de scris 58). Rezultatul: mesajele primeau 8px, iar bara de scris
ieșea 28px SUB ecran — nu vedeai nici ce scrii.
Cum detectăm tastatura fără JavaScript: `Jocuri/remi/includes/header.php`
are `interactive-widget=resizes-content`, deci deschiderea tastaturii
micșorează chiar aspectul paginii (măsurat: 357 → 177). Deci ajunge o
interogare pe înălțime. Pragul de 300px e sigur — cel mai mic telefon
culcat (iPhone SE) are 320px înălțime, deci sub 300 nu poate fi decât
tastatura.
Am ales calea asta tocmai ca să evităm `visualViewport`, care „se rupe în
feluri subtile, specifice fiecărui dispozitiv" (și care pe iOS 26 nu mai
resetează `offsetTop` la închiderea tastaturii).
Cei 60px recuperați duc mesajele de la 8px la ~41px și bagă bara de scris
înapoi în ecran. Lista revine singură la `blur`, când aspectul se destinde.
Legat de `.context-panel.active`, deci masa nu e atinsă. */
@media (orientation: landscape) and (max-height: 300px) {
.context-panel.active #chatGlobalUsers,
.context-panel.active #chatRoomUsers {
display: none !important;
}
}
/* ═══ TASTATURA DESCHISĂ ÎN PEISAJ (2) — doar conversația ══════════════════
2026-09-04, continuarea blocului de mai sus (care ascunde lista de utilizatori).
Problema rămasă: chiar cu lista ascunsă, zona de mesaje avea 35px iar un
mesaj 64px — nu încăpea niciunul întreg. Userul: „nu înțelege omu ce se
vorbește". Ținta a fost să se vadă cât mai multe mesaje, nu să încapă unul.
Rezultat măsurat pe banc 740×360, cu tastatura deschisă (177px rămași):
zona de mesaje 8 → 148px, un mesaj 64 → 23px, mesaje întregi vizibile 0 → 5.
FONTUL NU E ATINS — rămâne 11px. Tot câștigul vine din oră, nume, spații și
mobilier. (Scăderea sub 11px a fost respinsă explicit: pierdeai exact ce
voiai să câștigi — lizibilitatea.)
Din ce se compune câștigul, pe mesaj:
ora ascunsă ............................. −12px
numele pe ACELAȘI rând cu textul ........ −13px (tiparul „compact" din Slack)
spații/line-height strânse .............. −16px
plus, o singură dată: antet 37 + bară taburi 26 + rânduri de sistem, ascunse
cât ține tastatura, și învelișul chatului făcut să umple panoul — avea 163px
într-un container de 177, deci lăsa 14px de gol sub bara de scris.
Totul revine singur la închiderea tastaturii, când aspectul depășește 300px.
ATENȚIE, compromis acceptat de user: cât e tastatura deschisă nu există
antet, deci nici butonul ✕. Ieșirea e închiderea tastaturii, care readuce
tot. Dacă se cere altfel, varianta discutată era o bandă de 18px doar cu ✕,
cu prețul unui mesaj mai puțin.
Rămas de făcut separat (cere JS, nu CSS): gruparea mesajelor consecutive de
la același vorbitor — numele o singură dată pe serie, încă 1-2 mesaje. */
@media (orientation: landscape) and (max-height: 300px) {
/* 1. cât scrii, se vede doar conversația */
.context-panel.active .panel-header,
.context-panel.active .chat-tabs-bar,
.context-panel.active .cmsg-sys,
.context-panel.active .cmsg-time {
display: none !important;
}
/* 2. învelișul umple panoul (altfel rămâneau 14px de gol jos) */
.context-panel.active #panelContent { padding: 0 !important; }
.context-panel.active .remi-chat-wrapper {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 4px !important;
}
/* Toate cele cinci file, nu doar Global. `.cmsg-container` prinde Global și
Masa; Privat/Prieteni/Notificări NU au clasa asta, sunt liste, și fără
regula de aici rămâneau la 37px din 177 cu tastatura deschisă — practic
invizibile. Aveau `flex: 1 1 0`, dar le strângea un `max-height`. */
.context-panel.active .cmsg-container,
.context-panel.active #chatMessagesPrivate,
.context-panel.active #chatFriendsContent,
.context-panel.active #chatNotifsContent {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
}
/* 3. mesajul: 64px → 23px, fără să scadă fontul */
.context-panel.active .cmsg-row { gap: 4px !important; }
.context-panel.active .cmsg-content { gap: 0 !important; }
.context-panel.active .cmsg-bubble {
padding: 0 6px !important;
margin-bottom: 1px !important;
line-height: 1.1 !important;
}
.context-panel.active .cmsg-name {
display: inline !important;
float: left !important;
margin: 0 5px 0 0 !important;
line-height: inherit !important;
}
.context-panel.active .cmsg-avatar-img,
.context-panel.active .cmsg-avatar-initial {
width: 15px !important;
height: 15px !important;
}
/* 4. zona de tastare, lipită de tastatură */
.context-panel.active #chatInputBar {
flex: 0 0 auto !important;
padding: 2px 3px !important;
gap: 3px !important;
}
.context-panel.active #chatInputBar button {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.context-panel.active #chatInputBar button .material-symbols-rounded {
font-size: 14px !important;
}
/* butonul de trimitere e stilizat INLINE din JS (remi-pro.js:8528,
`padding:10px 16px`), de-aia sageata cadea in coltul de jos-dreapta
cand i se impunea inaltimea. Fortat pe cutie cu iconita centrata. */
.context-panel.active #chatSendBtn {
line-height: 1 !important;
font-size: 13px !important;
border-radius: 8px !important;
}
.context-panel.active .cmsg-input {
min-height: 22px !important;
max-height: 22px !important;
padding: 2px 8px !important;
font-size: 11px !important;
}
}
/* ═══ TASTATURA DESCHISĂ ÎN PEISAJ (3) — CONVERSAȚIA PRIVATĂ ════════════════
2026-09-04.
Blocurile (1) și (2) de mai sus NU ating conversația privată: ea e o familie
de clase complet separată. Corespondența, ca să nu se mai caute:
chat obișnuit conversație privată
───────────────── ─────────────────────
.cmsg-row .chat-bubble.mine / .chat-bubble.theirs
.cmsg-bubble .chat-text
.cmsg-name .chat-sender
.cmsg-time .chat-time
#chatInputBar .friend-chat-input-bar / #privateChatInput
— .friend-chat-view / .friend-chat-header
Cauza rădăcină: `.friend-chat-view` are `height: 300px` SCRIS FIX, deci nu se
adaptează la nimic. Într-un container de 217px ieșea 83px afară; cu tastatura
deschisă (177px) ieșea și mai rău, iar bara de scris cădea sub ecran.
Măsurat, cu tastatura deschisă: view 300 → 177 (se potrivește exact, iese 0),
antet 54 → 28, o bulă 50/65 → 17px, 4 mesaje întregi vizibile, bara de scris
30px fix pe marginea de jos.
Antetul conversației NU se ascunde, spre deosebire de antetul panoului din
blocul (2): aici stă butonul „înapoi", singura ieșire spre lista de
conversații. E doar strâns.
Bulina de stare era dimensionată pentru avatarul de 32px (10px, offset −1) și
ieșea peste avatarul micșorat la 22px — rescalată la 7px.
NEATINS, mai vechi și fără legătură cu tastatura: lista de conversații
private se auto-derulează la fund (`scrollTop: 43`), deci prima conversație e
tăiată sus — și fără tastatură, la 357px. E logică de chat aplicată pe o
listă, unde vrei începutul. */
@media (orientation: landscape) and (max-height: 300px) {
/* 1. vederea de conversație să încapă (avea height: 300px fix) */
.context-panel.active .friend-chat-view {
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
flex: 1 1 auto !important;
}
.context-panel.active .friend-chat-messages {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
}
/* 2. antetul conversației: strâns, nu ascuns (are butonul înapoi) */
.context-panel.active .friend-chat-header { padding: 2px 6px !important; gap: 5px !important; }
.context-panel.active .friend-chat-back { width: 22px !important; height: 22px !important; }
.context-panel.active .friend-chat-back .material-symbols-rounded { font-size: 15px !important; }
.context-panel.active .friend-chat-avatar-wrap,
.context-panel.active .friend-chat-avatar { width: 22px !important; height: 22px !important; }
.context-panel.active .friend-chat-dot {
width: 7px !important; height: 7px !important;
border-width: 1px !important; bottom: 0 !important; right: 0 !important;
}
.context-panel.active .friend-name { font-size: 11px !important; line-height: 1.1 !important; }
/* 3. ce nu e conversație, ascuns cât scrii */
.context-panel.active .friend-chat-status,
.context-panel.active .chat-date-separator,
.context-panel.active .chat-bubble .chat-time {
display: none !important;
}
/* 4. bulele private: 50/65px → 17px, expeditorul pe același rând (ca la global) */
.context-panel.active .chat-bubble {
padding: 1px 6px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
.context-panel.active .chat-sender {
display: inline !important;
float: left !important;
margin: 0 5px 0 0 !important;
}
/* 5. bara de scris a conversației private */
.context-panel.active .friend-chat-input-bar { padding: 2px 3px !important; gap: 3px !important; }
.context-panel.active .friend-chat-input-bar button {
width: 24px !important; height: 24px !important; padding: 0 !important;
}
.context-panel.active #privateChatInput {
min-height: 22px !important;
max-height: 22px !important;
padding: 2px 8px !important;
font-size: 11px !important;
}
}
/* ═══ MODALUL DE PREMIERE ÎN PEISAJ ═══
Blocul a fost mutat la finalul secţiunii „PREMIEREA (modalul de final)" de
mai jos (11-09-2026): regulile lui trebuie să vină DUPĂ cele din
`@media (max-width: 991px)` cu aceeaşi specificitate, altfel pierd. Un
singur loc pentru peisaj, nu două. */
/* ████ PORTRET (telefon în picioare) — masa reaşezată ████████████████████████
2026-09-04.
NOTĂ despre fişierul ăsta: numele spune „landscape", dar el se încarcă cu
`media="(max-width: 991px)"` (includes/header.php:72), adică pentru TOT
mobilul, şi conţine deja blocuri de portret. Nu-l despărţi în două fişiere
fără să muţi şi blocurile vechi — altfel regulile de portret ajung în două
locuri.
NU ATINGE desktopul şi nici peisajul: tot blocul e închis în
`(orientation: portrait) and (max-width: 991px)`.
DE CE a fost nevoie. Portretul rămăsese cu harta de desktop. Măsurat la masă,
pe 357×737:
· adversarul avea lăţime 0 şi teancul 2px — pur şi simplu NU se vedeau;
· 86px din 357 (24% din ecran) nu se foloseau deloc;
· o bandă goală de 108px pe mijloc;
· aruncatele: 3 piese într-o cutie de 96px;
· bara de jos acoperea 21px din zona proprie.
Cauza: JS-ul mută adversarul şi teancul în `#lateralWrap` la ORICE lăţime, dar
CSS-ul pentru el exista doar de la 992px în sus — în portret rămânea orfan în
grilă, cu pistă implicită de 0px.
HARTA e a autorului. Exista deja, la `remi-pro.css:14526`, cu zonele de
etalare 2×2 („zone1 zone2" / „zone3 zone4") — răspunsul corect pentru patru
jucători. Era doar înfometată: nu avea rânduri pentru `lateral` (adversarii),
`sir` (aruncatele) şi `teanc`. Le-am adăugat, atât.
REZULTAT măsurat, masă de 4 jucători: toţi cei trei adversari sus, aruncatele
pe un rând, patru zone de 165×130 (faţă de 54 cât ar da stivuirea pe o
coloană), teancul sub zone, mâna pe două rânduri. Nimic tăiat, niciun gol,
zero suprapunere cu bara de jos.
PERECHEA DIN JS, fără de care nimic din blocul ăsta nu ţine:
· `updateEtalareZones` scrie două coloane egale în portret (inline cu
`!important`, deci CSS-ul n-are cum s-o facă — verificat: o regulă CSS e
ştearsă în câteva sute de milisecunde);
· `plaseazaTeancDupaOrientare` scoate teancul din `#lateralWrap` şi îl pune
direct în grilă, altfel nicio arie nu-l poate prinde. */
/* 16-09-2026 — MEDIA-LIST: acelaşi bloc se aplică şi pe Samsung Fold CULCAT (ecran
interior aproape pătrat, ≤991 lat şi ≥600 înalt). Acolo nu prindea nici „telefon
culcat" (max-height 500), nici „în picioare", şi masa rămânea pe grila de desktop,
strivită. Predicatul e acelaşi ca `asezareInPicioare()` din remi-pro.js. Aceeaşi
listă e pusă pe toate blocurile de MASĂ din portret; cele de lobby rămân doar portret. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
/* ── 1. containerul nu mai poate fi derulat pe furiş ──────────────────────
Sertarul („Joc / Stats / History") stă parcat sub ecran cu
`translateY(478px)`, iar o transformare intră în zona derulabilă: `#app`
ajunge cu 1215px de conţinut într-un cadru de 737. `overflow: hidden`
ASCUNDE derularea, dar n-o interzice — ceva îl derula cu exact 32px şi
antetul (34px) ieşea din ecran. `overflow: clip` o interzice de tot.
Cauza e mai veche şi independentă de portret (verificat: cu blocul ăsta
dezactivat, `scrollHeight` rămâne acelaşi 1215). Dacă reapare pe desktop,
aceeaşi linie rezolvă şi acolo. */
#app.app-container { overflow: clip !important; }
/* ── 2. harta ──────────────────────────────────────────────────────────── */
/* 16-09-2026 — userul: „aruncatele în portret să le aducem jos… cât mai uşor pentru
userul de jos". Şirul de aruncate stătea SUS, sub adversari (rândul 2), departe de
stativ; omul trebuia să urce cu degetul peste zonele de etalare ca să rupă. Acum
ordinea e: adversari → zone de etalare → ARUNCATE → teanc/Atu → stativ — tot ce
atinge omul e jos, unul lângă altul. Doar ordinea zonelor s-a schimbat; nimic din
marcaj. Măsurat pe 360×740 (2 jucători): zone 106..318, aruncate 322..392, teanc
394..444, stativ 448..548. */
/* Selector DUBLAT (16-09-2026): pe Fold culcat (820px ≥ 768) regulile de desktop din
remi-pro.css `@media (min-width: 768px)` — `body.game-active .game-play-view
[data-players="2"] { grid-template-areas: … !important }` — băteau harta asta,
scrisă pe `.game-play-view` (0,1,0). Cu clasa dublată + `[data-players]` urcăm la
(0,3,2), peste (0,3,1) al lor. Acelaşi truc l-a folosit blocul de telefon culcat
(linia ~99). În portretul clasic (<768) nu schimbă nimic. */
.game-play-view,
html body .game-play-view.game-play-view[data-players],
html body.immersive-mode .game-play-view.game-play-view[data-players] {
grid-template-areas:
"lateral lateral"
"zone1 zone2"
"zone3 zone4"
"sir sir"
"teanc teanc"
"handbot handbot" !important;
/* rândul „lateral": era `auto` şi rezolva 52px, dar cardurile adversarilor
au 56 (info 24 + piese 28 + padding) → piesele tăiate 4px jos (07-09,
măsurat la masă de 4). 58 explicit; zonele de etalare dau 3px fiecare. */
grid-template-rows: 58px minmax(0, 1fr) minmax(0, 1fr) auto 50px auto !important;
/* bara de jos e `fixed` şi acoperea 21px din zona proprie */
padding-bottom: 40px !important;
/* 16-09-2026 — pe Fold în picioare (704px) masa ocupa doar 437–512px, centrată,
cu ~96px goi pe fiecare parte: regula `.game-play-view { margin: auto;
max-width: 1200px }` din remi-pro.css (@media max-width 767) într-un părinte
flex-coloană face masa cât CONŢINUTUL (shrink-to-fit). La 357px nu se vedea,
conţinutul umplea oricum ecranul. Lăţime plină, margini 0. */
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
/* la 2 jucători al doilea rând de zone e gol — îl strângem */
.game-play-view[data-players="2"],
html body .game-play-view.game-play-view[data-players="2"] {
grid-template-rows: 58px minmax(0, 1fr) 0px auto 50px auto !important;
}
/* ── PIESELE DIN MÂNĂ, CA ÎN PEISAJ (16-09-2026) ───────────────────────────
Userul: „piesele din mână nu au dimensiunea şi nu arată la fel ca în peisaj".
În portret erau 26×34 (regulile de bază din remi-pro.css); peisajul are 32×45
cu cifra de 28px (blocul „PIESELE DIN MÂNĂ, CÂT SĂ SE CITEASCĂ", 13-09, mai sus,
în @media-ul de peisaj). Aceleaşi valori, acelaşi selector cu ID (bate 24×36 /
22×30 / 22×32 din remi-pro.css). Stativul 331px lat: pas 34 → 9 locuri pe rând,
18 pe două rânduri, destul pentru 15 piese. Capacitatea o calculează JS din
piesa reală (`masoaraPiesaStativ`). */
html body #seatSouth { --tile-width: 32px; --tile-height: 45px; }
html body #seatSouth .hand-scroll-wrapper,
html body #playerHand { height: 100px !important; min-height: 100px !important; max-height: 100px !important; }
html body #playerHand { gap: 2px !important; }
html body.game-active #seatSouth .player-hand .tile,
html body.mp-game-active #seatSouth .player-hand .tile,
html body #seatSouth .player-hand .tile {
width: 32px !important; height: 45px !important;
min-width: 32px !important; max-width: 32px !important; max-height: 45px !important;
border-radius: 6px !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: flex-start !important;
padding-top: 2px !important;
}
html body #seatSouth .player-hand .tile .tile-number {
position: static !important; font-size: 28px !important; font-weight: 600 !important;
line-height: 1 !important; letter-spacing: -2px !important; margin-right: -2px !important;
white-space: nowrap !important;
}
html body #seatSouth .player-hand .tile .tile-suit-dot {
position: static !important; width: 10px !important; height: 10px !important; margin-top: 3px !important;
}
html body #seatSouth .player-hand .tile .joker-svg { width: 28px !important; height: 41px !important; }
/* ── PARITATE CU PEISAJUL (16-09-2026) ──────────────────────────────────────
Userul: „verifici peisajul să nu aibă ceva ce în portret nu avem". Comparat
element cu element, pe două bancuri (844×390 şi 360×740) la aceeaşi masă:
1. La SPECTATOR peisajul ascunde „Etalează"/„Lipeşte" (bara `#raActiuni`);
portretul le arăta ca două iconiţe de 26×32 lângă Balanţă. Ascunse şi aici.
2. Cardul adversarului: peisajul arată punctele şi cronometrul; portretul le
ascundea (remi-pro.css ~15394, „prea multă info"). Aprinse compact, în
rândul de 24px de lângă nume — doar cifra, fără iconiţa cronometrului —
DOAR LA MASA DE 2, unde cardul are 333px. La 3–4 jucători cardul are 106px
(rând util 96): măsurat, cu punctele aprinse numele ajungea la 8–17px
(„s…"), iar fără ele are loc. Numele contează mai mult decât punctele, deci
la 3–4 rămân ascunse (peisajul le încape fiindcă acolo cardul are ~200px).
Numele primeşte în toate cazurile puncte de suspensie, nu dispariţie.
3. Spatele pieselor adversarului: 16×21 în peisaj, 10×14 în portret — singurul
loc unde peisajul avea piese mai mari. Egalate; rândul de piese are 28px. */
html body.spectator-mode #seatSouth .player-info-bar .action-btn-game { display: none !important; }
html body #lateralWrap .opponent-area .opponent-name {
flex: 1 1 auto !important; min-width: 0 !important;
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
html body .game-play-view[data-players="2"] #lateralWrap .opponent-area .opponent-points,
html body .game-play-view[data-players="2"] #lateralWrap .opponent-area .player-timer {
display: inline-flex !important; align-items: center !important;
font-size: 9px !important; line-height: 1 !important; height: 14px !important;
padding: 0 4px !important; margin: 0 0 0 4px !important;
flex: 0 0 auto !important; white-space: nowrap !important;
}
html body .game-play-view[data-players="2"] #lateralWrap .opponent-area .player-timer .material-symbols-rounded { display: none !important; }
html body .game-play-view[data-players="2"] #lateralWrap .opponent-area .player-timer::after { content: "s"; }
html body #lateralWrap .opponent-area .opponent-tile-back { width: 16px !important; height: 21px !important; min-width: 16px !important; }
html body #lateralWrap .opponent-area .opponent-hand { gap: 2px !important; align-items: center !important; }
/* plasă: orice copil pe care nu-l cunosc ia un rând întreg, în loc să nască
piste implicite. Exact aşa apăruseră 5 coloane din 2 declarate. */
.game-play-view > * { grid-column: 1 / -1 !important; }
/* ── 3. toţi adversarii sus, pe un rând ─────────────────────────────────── */
.game-play-view > #lateralWrap {
grid-area: lateral !important;
width: auto !important; min-width: 0 !important;
display: flex !important; flex-direction: row !important;
gap: 6px !important; align-items: stretch !important;
}
#lateralWrap > [id^="seat"] { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
/* 16-09-2026 — pe Fold culcat (820px ≥ 768) remi-pro.css `@media (min-width: 768px)`
dă cardului adversarului `max-width: 180px; height: 75px !important` (coloana
laterală de desktop): ieşea 180×75 peste capul zonei 1. Selectorul cu ID bate
(1,3,3) > (0,3,1). Sub 768 nu schimbă nimic: cardul ia oricum rândul. */
html body:is(.game-active, .mp-game-active) .game-play-view #lateralWrap .opponent-area {
width: auto !important; max-width: none !important; min-width: 0 !important;
height: auto !important; min-height: 0 !important; max-height: none !important;
flex: 1 1 0 !important; position: relative !important;
}
/* ── 4. aruncatele pe UN rând (cerut de user) ────────────────────────────
Şirul e o GRILĂ, nu flex — de-aia `flex-wrap` n-avea niciun efect.
Trecut pe flux de coloană cu un singur rând şi derulare orizontală:
banda a scăzut de la 110px la ~70, cu toate piesele la îndemână. */
.game-play-view > #discardRow { grid-area: sir !important; min-height: 0 !important; height: auto !important; }
.game-play-view > #discardRow #discardHistoryStrip {
grid-auto-flow: column !important;
grid-template-columns: none !important;
grid-template-rows: auto !important;
grid-auto-columns: max-content !important;
min-height: 44px !important; height: auto !important; align-content: center !important;
overflow-x: auto !important; overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important;
}
/* ── 5. zonele de etalare 2×2 ───────────────────────────────────────────── */
.game-play-view > #etalareZone1 { grid-area: zone1 !important; grid-column: 1 !important; }
.game-play-view > #etalareZone2 { grid-area: zone2 !important; grid-column: 2 !important; }
.game-play-view > #etalareZone3 { grid-area: zone3 !important; grid-column: 1 !important; }
.game-play-view > #etalareZone4 { grid-area: zone4 !important; grid-column: 2 !important; }
.game-play-view > .etalare-zone {
align-self: stretch !important; justify-self: stretch !important;
width: auto !important; height: auto !important;
min-height: 0 !important; max-height: none !important;
}
/* ── 6. teancul SUB zonele de etalare, mic, cu atuul la dreapta ──────────
Cerut de user. Teancul şi atuul erau stivuite pe verticală (117px);
pe orizontală intră în 50. `transform: scale()` NU e de ajuns — micşorează
doar aspectul, cutia rămâne mare şi împinge atuul afară din ecran; de-aia
se micşorează lăţimea reală. */
.game-play-view > #remiSidebar {
grid-area: teanc !important;
display: flex !important;
width: auto !important; max-width: none !important;
height: 50px !important; min-height: 0 !important;
margin: 0 !important; overflow: hidden !important;
}
.game-play-view > #remiSidebar .sidebar-section {
width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important;
box-sizing: border-box !important;
flex-direction: row !important; flex-wrap: nowrap !important;
height: 50px !important; min-height: 0 !important;
align-items: center !important; justify-content: space-between !important;
gap: 8px !important; padding: 0 10px !important;
}
.game-play-view > #remiSidebar #pileArea {
flex: 0 1 auto !important; transform: none !important; margin: 0 !important;
width: 130px !important; max-width: 130px !important; min-width: 0 !important;
height: 40px !important; max-height: 40px !important;
overflow: hidden !important; align-items: center !important;
}
.game-play-view > #remiSidebar #atuDisplay.atu-beside-pile {
position: static !important; left: auto !important; right: auto !important; top: auto !important;
transform: none !important; margin: 0 !important; flex: 0 0 auto !important;
width: 42px !important; height: 40px !important;
}
.game-play-view > #seatSouth { grid-area: handbot !important; }
/* ── 7. antetul: activitatea cu text, sigla doar logo la masă ────────────
Pe masă textul „Remi Etalat / Rummy Românesc" nu-ţi spune nimic şi lua
84px dintr-o bară de 357. Scos DOAR la masă; în lobby rămâne. Eticheta
„Activitate Masa" lua 81 din 127px şi nu mai rămânea loc de text — scoasă
şi ea la masă, rămân intrările. */
body.game-active .top-bar > .brand-section .brand-title { display: none !important; }
body.game-active .top-bar > .brand-section { max-width: 34px !important; flex: 0 0 auto !important; }
body.game-active .jurnal-in-header .activity-log-header { display: none !important; }
.top-bar { gap: 4px !important; }
.top-bar > .ds-cluster { flex: 0 0 auto !important; }
.top-bar > .sidebar-section-log.jurnal-in-header {
flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important;
padding: 2px 6px !important; height: 26px !important; min-height: 0 !important;
display: flex !important; align-items: center !important; overflow: hidden !important;
background: rgba(0, 0, 0, .22) !important; border-radius: 8px !important;
}
.jurnal-in-header .activity-log {
display: flex !important; flex-direction: row !important; align-items: center !important;
gap: 6px !important; width: 100% !important; min-width: 0 !important;
}
/* 07-09-2026: ERA `row-reverse` (ultima activitate prima). Cu row-reverse
overflow-ul cade pe scrollLeft negativ → scrollWidth == clientWidth, banda
NU se putea derula (aceeaşi capcană ca la ~925, blocul de peisaj). Acum
ordine normală, iar `logAction` (remi-pro.js) derulează la capătul din
dreapta: ultima activitate la vedere, restul se ajung derulând spre stânga. */
.jurnal-in-header .activity-log-body {
flex: 1 1 0 !important; min-width: 0 !important;
display: flex !important; flex-direction: row !important;
justify-content: flex-start !important; gap: 8px !important; max-height: 24px !important;
overflow-x: auto !important; overflow-y: hidden !important;
white-space: nowrap !important; scrollbar-width: none !important;
}
.jurnal-in-header .activity-log-body > * {
flex: 0 0 auto !important; font-size: 9px !important; line-height: 24px !important;
}
}
/* ████ PORTRET (2) — încadrări reparate după verificarea completă ████████████
2026-09-04, după ce userul a cerut „rezolvă tot ce este de rezolvat".
Tot blocul e închis în portret mobil: NU atinge desktopul sau peisajul. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
/* ── 1. zonele de etalare inegale ────────────────────────────────────────
Zona goală era 100px lângă una plină de 127 — arăta stricat.
Cauza: `remi-pro.css:21129` dă zonelor GOALE `max-height: 100px
!important`, cu un selector de trei `:not(:has(...))`, mai specific decât
al meu. Regula aia era gândită pentru portretul VECHI, cu zonele stivuite
pe o coloană, unde o zonă goală chiar fura înălţime. În aranjarea 2×2 o
zonă goală stă LÂNGĂ una plină, deci nu costă nimic. O anulăm.
Rezultat: toate patru la 127px, egale. */
.game-play-view > .etalare-zone:empty,
.game-play-view > .etalare-zone:not(:has(.tile)):not(:has(.etalare-tile)):not(:has([class*="group"])) {
min-height: 0 !important;
max-height: none !important;
}
/* capul zonei GOALE se scria pe verticală şi lua 96px din 100 (măsurat),
adică zona goală era doar un nume întors pe o parte */
.game-play-view > .etalare-zone .zona-cap {
writing-mode: horizontal-tb !important;
flex: 0 0 auto !important;
height: auto !important;
max-height: 22px !important;
}
/* ── 2. teancul ieşea 5px din banda lui ──────────────────────────────────
`min-height: 60px` îl ţinea mai înalt decât banda de 50 şi bătea
`height`. Nu se vedea (banda taie), dar auditul îl raporta corect. */
.game-play-view > #remiSidebar #pileArea {
min-height: 0 !important;
height: 38px !important;
max-height: 38px !important;
}
/* ── 3. PANOUL ieşea 65px sub ecran ──────────────────────────────────────
Bug real, netestat până acum în portret. În `remi-pro.css`, la
`(max-width: 767px)`, sunt DOUĂ reguli care se bat: una pune
`top: 0` cu `height: 100dvh`, alta mai jos pune
`top: var(--top-bar-height)` fără să corecteze înălţimea. Rezultat:
65 + 737 = 802, deci conţinutul panoului cădea sub ecran.
Cu `top` şi `bottom` amândouă fixate, `height: auto` dă exact 672. */
.context-panel {
height: auto !important;
max-height: none !important;
bottom: 0 !important;
}
/* ── 4. modalul de premiere pe tot ecranul ───────────────────────────────
În portret rămăsese 335×628 cu 417px de derulat. Ecran plin + conţinut
strâns: derularea a scăzut la ~130 (cu 4 jucători clasamentul are patru
rânduri, deci ceva derulare rămâne — normal la 737px înălţime).
Perechea din peisaj e blocul „PREMIEREA ÎN PEISAJ — CARD CA PE DESKTOP" de mai jos. */
#gameEndModal { padding: 0 !important; }
#gameEndModal .modal-container.game-end-modal {
max-width: 100% !important; width: 100% !important;
height: 100% !important; max-height: 100% !important;
border-radius: 0 !important; margin: 0 !important;
}
#gameEndModal .modal-body { padding: 6px 10px !important; gap: 4px !important; }
#gameEndModal #resultAnimationModal { width: 38px !important; height: 38px !important; margin: 0 auto !important; }
#gameEndModal #resultTitleModal { font-size: 15px !important; line-height: 1.15 !important; }
/* un rând de clasament: 130px → 83 */
#gameEndModal .score-row { padding: 2px 6px !important; margin-bottom: 2px !important; gap: 2px !important; }
#gameEndModal .score-row * { line-height: 1.15 !important; }
#gameEndModal .result-stat { padding: 2px 6px !important; min-height: 0 !important; }
/* cele trei butoane stăteau unul sub altul (118px) fiindcă `flex-basis: auto`
le dimensiona după conţinut; pe bază zero împart rândul: 36px */
#gameEndModal .result-actions { flex-direction: row !important; flex-wrap: nowrap !important; gap: 5px !important; }
#gameEndModal .result-actions > * {
flex: 1 1 0 !important; min-width: 0 !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
font-size: 10px !important; padding: 7px 4px !important;
}
}
/* ── PORTRET (3): banda violetă de sub modalul de premiere ───────────────────
2026-09-04. Raportat de user: „are albastru jos".
Cauza, şi e o consecinţă directă a faptului că am făcut modalul ecran plin:
`.modal-container.game-end-modal` are fundal PROPRIU, un gradient violet
închis (`rgba(36, 21, 66, .98)`). Cât timp cutia se strângea pe conţinut,
violetul nu se vedea niciodată. Odată forţată la 100% înălţime, corpul maro
a rămas la 626px — fiindcă `.modal-body` are `max-height` de 85% din ecran
(737 × .85 = 626, măsurat) — iar ultimii 110px arătau fundalul brut.
Reparaţia: cutia devine coloană flexibilă, iar corpul umple ce rămâne.
Măsurat după: corp 735 din 737, gol rămas 1px, violetul dispărut. Bonus:
derularea a ajuns la 0 — tot clasamentul de 4 jucători încape acum. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
#gameEndModal .modal-container.game-end-modal {
display: flex !important;
flex-direction: column !important;
}
#gameEndModal .modal-body {
flex: 1 1 auto !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow-y: auto !important;
}
}
/* ████ PORTRET (3) — PANOUL: sus de tot, umplut, şi cu tastatură ████████████
2026-09-04. Trei scăpări prinse la testarea în picioare.
── 1. panoul nu urca până sus ──────────────────────────────────────────────
Userul: „panelul nu se vede până sus". Măsurat: panoul pornea de la y=65 iar
antetul real are 34px — un gol de 31px prin care se vedea lobby-ul.
Cauza: panoul se aşază după `--top-bar-height`, care e 65px din
`@media (max-width: 1366px)` (remi-pro.css:19779). Variabila a fost
redefinită la 32px DOAR pentru peisaj (19790); pentru portretul mobil nimeni
n-a atins-o, deşi antetul de aici e dimensionat de conţinut, nu de o regulă.
Nu reparăm variabila (o folosesc şi alte reguli, cu alte aşteptări): panoul
porneşte de la 0, exact ca în peisaj. Are antetul lui cu ✕, deci nu pierzi
nimic acoperind bara de sus.
── 2. gol de 103px sub bara de scris ───────────────────────────────────────
Învelişul chatului e `display: block` în portret (scris INLINE din JS, vezi
`getChatPanelContent`), iar zona de mesaje e plafonată la `50vh`
(remi-pro.css, `@media (max-width: 767px)`). Rezultat: mesajele se opreau la
368px şi sub bara de scris rămâneau 103px goi.
Făcut coloană flexibilă care umple panoul — acelaşi tipar ca în peisaj.
Măsurat: zona de mesaje 368 → 465px, golul 103 → 6px.
── 3. tastatura în portret ─────────────────────────────────────────────────
Compactarea exista doar pentru peisaj. Adusă şi aici.
Măsurat la 357×417 (telefon în picioare cu tastatura deschisă):
mesaje întregi vizibile 1 → 8, un mesaj 64 → 39px, bara de scris rămâne
în ecran, la 6px de margine. La închiderea tastaturii totul revine exact.
PRAGUL de 450px, ales după o capcană care merită ţinută minte: prima probă a
micşorat ecranul la 337px, iar la 357 lăţime × 337 înălţime CSS-ul consideră
ecranul PEISAJ, nu portret — regulile nu prindeau deloc şi păreau greşite.
Pe telefonul real tastatura lasă ~420px, deci rămâne portret. Un telefon în
picioare are minim ~568px înălţime, deci 450 separă curat cele două stări. */
@media (orientation: portrait) and (max-width: 991px) {
/* 1. panoul de sus de tot — nu mai depinde de `--top-bar-height` */
.context-panel { top: 0 !important; }
/* 2. învelişul umple panoul; mesajele iau ce rămâne */
.context-panel.active .remi-chat-wrapper {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 0 !important;
}
.context-panel.active .cmsg-container,
.context-panel.active #chatMessagesPrivate,
.context-panel.active #chatFriendsContent,
.context-panel.active #chatNotifsContent {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
}
.context-panel.active #chatInputBar { flex: 0 0 auto !important; }
}
/* 3. cât ţii degetul pe tastatură, în picioare */
@media (orientation: portrait) and (max-height: 450px) {
.context-panel.active #chatGlobalUsers,
.context-panel.active #chatRoomUsers,
.context-panel.active .cmsg-sys,
.context-panel.active .cmsg-time {
display: none !important;
}
.context-panel.active .panel-header { min-height: 26px !important; padding: 1px 8px !important; }
.context-panel.active .panel-back,
.context-panel.active .panel-close { width: 24px !important; height: 24px !important; }
.context-panel.active .chat-tabs-bar { padding: 1px !important; margin-bottom: 2px !important; }
.context-panel.active .ct-tab { padding: 1px 2px !important; }
.context-panel.active .ct-icon { font-size: 13px !important; }
.context-panel.active .ct-label { font-size: 8px !important; }
/* mesajul: 64 → ~39px. Fontul NU se atinge — câştigul vine din oră, nume
pe acelaşi rând cu textul (tiparul „compact" din Slack) şi spaţii. */
.context-panel.active .cmsg-row { gap: 4px !important; }
.context-panel.active .cmsg-content { gap: 0 !important; }
.context-panel.active .cmsg-bubble {
padding: 0 6px !important; margin-bottom: 1px !important; line-height: 1.1 !important;
}
.context-panel.active .cmsg-name {
display: inline !important; float: left !important;
margin: 0 5px 0 0 !important; line-height: inherit !important;
}
.context-panel.active .cmsg-avatar-img,
.context-panel.active .cmsg-avatar-initial { width: 15px !important; height: 15px !important; }
/* bara de scris, strânsă */
.context-panel.active #chatInputBar { padding: 2px 3px !important; gap: 3px !important; }
.context-panel.active #chatInputBar button {
width: 24px !important; height: 24px !important; min-width: 24px !important;
padding: 0 !important; display: inline-flex !important;
align-items: center !important; justify-content: center !important;
}
.context-panel.active #chatSendBtn {
line-height: 1 !important; font-size: 13px !important; border-radius: 8px !important;
}
.context-panel.active .cmsg-input {
min-height: 22px !important; max-height: 22px !important;
padding: 2px 8px !important; font-size: 11px !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
AUDIT MOBIL LOBBY — 07-09-2026, probat live în bancul de 360×740 / 740×360
Fişierul e legat cu media="(max-width: 991px)", deci tot ce urmează fără
@media propriu se aplică pe TOT mobilul, ambele orientări.
════════════════════════════════════════════════════════════════════════ */
/* ── Lista de mese lipită de bara de jos ──
`remi-pro.css:2488` pune `max-height: calc(100vh - 155px)` pe .lobby-view:
155px e bugetul de pe DESKTOP. Pe mobil header 34 + bara de jos 63 = 97,
deci rămâneau 58px de gol între ultima masă (sau paginare) şi footer.
Nu punem alt număr — flexboxul are deja înălţimea corectă din .game-area. */
body.game-menu .lobby-view { max-height: none !important; }
/* ── „Intră Rapid" şi „Creează Masa": două butoane egale, ambele cu text ──
Înainte: sub 420px `remi-pro.css:14448` ascundea textul la toate .lobby-btn
şi `:14450` îl scotea înapoi DOAR la .lobby-btn-create → 36px (doar ⚡) lângă
119px. În peisaj `:15813` le ascundea textul la amândouă → două pictograme.
Rândul are 328px liberi şi folosea 155. */
.lobby-header-right { flex: 1 1 auto !important; justify-content: stretch !important; gap: 8px !important; }
.lobby-header-right .lobby-btn {
flex: 1 1 0 !important; min-width: 0 !important;
justify-content: center !important; white-space: nowrap !important;
}
.lobby-header-right .lobby-btn span:not(.material-symbols-rounded) { display: inline !important; }
/* ── Selectul de sortare: „Recente" se tăia la 58px ── */
.lobby-sort-select { min-width: 92px !important; }
/* ── Lista de useri din chat: 98px / rând de 28px = 3,5 rânduri, al patrulea
rămânea retezat la jumătate. 112px = fix 4 rânduri întregi. ── */
#chatGlobalUsers { max-height: 112px !important; }
/* ── PORTRET: „Jocuri" şi „Roata" cu text, ca în peisaj ──
Textul e ascuns de `assets/css/daily-spin.css:214` sub 1150px lăţime, iar
`aspect-ratio: 1/1` ţine butonul pătrat şi retează textul chiar după ce-l
afişezi. Regula-pereche există deja mai sus (~913), dar închisă în
@media-ul de peisaj — asta e varianta ei de portret.
DOAR în lobby (`body.game-menu`): la masă bara mai ţine „← Mese" şi
jurnalul, iar textul (168px în loc de 79) lăsa jurnalul la 66px şi-l tăia.
Spaţiul îl cedează BRANDUL, prin titlu trunchiat — nu butoanele. */
@media (orientation: portrait) and (max-width: 575px) {
html body.game-menu .top-bar .ds-cluster .ds-hbtn {
aspect-ratio: auto !important; width: auto !important;
min-width: 0 !important; max-width: none !important;
padding: 0 7px !important; gap: 3px !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
}
html body.game-menu .top-bar .ds-cluster .ds-htxt {
display: inline !important; font-size: 10px !important;
white-space: nowrap !important; letter-spacing: .2px !important;
}
html body.game-menu .top-bar .ds-cluster .ds-hico { font-size: 13px !important; }
html body.game-menu .top-bar .ds-cluster .ds-hico--suit { font-size: 13px !important; }
/* lipite de marginea din dreapta */
html body.game-menu .top-bar .ds-cluster {
flex: 0 0 auto !important; margin-left: auto !important; margin-right: 0 !important;
}
html body.game-menu .top-bar .actions-section { flex: 0 0 auto !important; margin-left: 0 !important; }
/* la Remi .actions-section e goală în DOM (doar spaţii); goală, mânca gap
la marginea dreaptă şi butoanele rămâneau la 4px de margine. */
html body.game-menu .top-bar .actions-section:not(:has(button, a, input)) { display: none !important; }
html body.game-menu .top-bar .brand-section {
flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important;
}
html body.game-menu .top-bar .brand-title {
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
/* „Roata", nu „Roata zilnică" — în portret nu e loc de amândouă cuvintele.
Numai pe starea .ds-hbtn--ready: după ce spinul e consumat, acelaşi span
arată cronometrul până la următorul, iar acela trebuie lăsat în pace. */
html body.game-menu .top-bar #dsChip.ds-hbtn--ready .ds-htxt { font-size: 0 !important; }
html body.game-menu .top-bar #dsChip.ds-hbtn--ready .ds-htxt::after {
content: "Roata"; font-size: 10px; font-weight: 700; letter-spacing: .2px;
}
}
/* ════════════════════════════════════════════════════════════════════════
AUDIT MOBIL MASĂ — 07-09-2026, probat live la o masă de 3 jucători
════════════════════════════════════════════════════════════════════════ */
/* ── Numele jucătorului lipsea din zonele de etalare ──
`remi-pro.css:27330` scrie numele PE VERTICALĂ (`writing-mode: vertical-rl`)
în zona „strânsă" — a jucătorului care încă n-a etalat. Peticul de mai sus
(~1753) îndreaptă `.zona-cap` şi îi pune `max-height: 22px`, dar NU atinge
şi `.zc-nume`: numele rămânea vertical, strivit în cele 22px, deci ieşea
10×0px — invizibil. Măsurat la o masă de 3: zona jucătorului activ avea
numele (43×10), celelalte două erau doar dreptunghiuri verzi cu un număr
plutind jos, fără să ştii al cui e locul. După: 35×10 şi 41×10.
NUMAI PORTRET, ca peticul pe care îl completează (blocul de la ~1736).
În peisaj zona strânsă are 72px lăţime, iar acolo verticalul e alegerea
bună: măsurat pe „diana18" — vertical 10×37, întreg; orizontal 28×10,
tăiat (28 din 37 necesari), adică „dia…". Prima variantă a regulii ăsteia
prindea ambele orientări şi strica exact asta. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
.etalare-zone.zona-stransa .zona-cap .zc-nume {
writing-mode: horizontal-tb !important;
transform: none !important;
max-height: none !important;
text-align: center !important;
}
.etalare-zone.zona-stransa .zona-cap {
flex-direction: row !important;
justify-content: center !important;
gap: 5px !important;
}
}
/* ── Anunţul din header („X a aruncat") stătea lipit de marginea de sus ──
Două cauze, amândouă măsurate:
1. `.activity-log-body` (~1721) nu primeşte niciun `align-items`, iar
calculat ieşea `flex-start`;
2. intrarea avea `line-height: 24px` (~1729) plus `padding: 3px` = 32px
înălţime într-un jgheab de `max-height: 24px`, deci depăşea cu 7px
peste marginea de sus a barei.
După: intrarea 18px, aşezată la 7px de sus şi 9px de jos într-un header
de 34px. Fontul NU se atinge — se schimbă doar înălţimea rândului. */
@media (max-width: 991px) {
html body .top-bar .jurnal-in-header .activity-log-body,
.jurnal-in-header .activity-log-body { align-items: center !important; }
.jurnal-in-header .activity-log-body > * {
display: flex !important; align-items: center !important;
line-height: 16px !important;
padding-top: 0 !important; padding-bottom: 0 !important;
}
.jurnal-in-header .activity-log-body > * > * { line-height: 16px !important; }
}
/* ════════════════════════════════════════════════════════════════════════
AUDIT MOBIL — RUNDA 2, 07-09-2026. HEADER, ROATĂ, FOOTER, PREMIERE.
Totul probat live în bancul 360×740 / 740×360, lobby şi masă.
════════════════════════════════════════════════════════════════════════ */
/* ── HEADER: „Jocuri" şi „Roata" fără pictograme, încadrate în bară ──
Butoanele aveau 36px înălţime într-o bară de 34 (se întindeau T−1 → B35),
deci ieşeau câte 1px deasupra şi dedesubt. Pictogramele ♠ şi 🎡 nu adăugau
nimic lângă text. După: portret T5–B29 în bară de 34; peisaj T3–B27 în 30. */
@media (max-width: 991px) {
html body .top-bar .ds-cluster { align-items: center !important; }
html body .top-bar .ds-cluster .ds-hbtn {
height: 24px !important; min-height: 0 !important; max-height: 24px !important;
line-height: 24px !important; padding: 0 10px !important; gap: 0 !important;
box-sizing: border-box !important;
}
/* Pictogramele se scot NUMAI acolo unde rămâne textul, adică în lobby.
La masă bara mai ţine „← Mese" şi jurnalul, deci butoanele au loc doar
de pictogramă (`daily-spin.css:214` le ascunde textul sub 1150px).
Prima variantă a regulii ăsteia nu era legată de `body.game-menu` şi
ascundea pictogramele peste tot: la masă rămâneau două cercuri goale,
fără text şi fără simbol. */
html body.game-menu .top-bar .ds-cluster .ds-hico,
html body.game-menu .top-bar .ds-cluster .ds-hico--suit { display: none !important; }
html body:not(.game-menu) .top-bar .ds-cluster .ds-hico,
html body:not(.game-menu) .top-bar .ds-cluster .ds-hico--suit {
display: block !important; font-size: 15px !important;
}
html body:not(.game-menu) .top-bar .ds-cluster .ds-hbtn { padding: 0 8px !important; }
}
/* ── HEADER: jurnalul „ACTIVITATE" doar la masă, nu în lobby ──
După ce ieşeai dintr-o cameră rămânea în headerul lobby-ului şi, neavând loc
lângă butoane, se afişa retezat („⟲ ACTIVI"). */
@media (max-width: 991px) {
html body.game-menu .top-bar .sidebar-section-log { display: none !important; }
}
/* ── ROATA ZILNICĂ în peisaj ──
`.ds-modal` avea 585px înălţime într-un ecran de 360 şi nu derula: butonul
de închidere ajungea la −112 (invizibil deasupra ecranului) şi „ÎNVÂRTE" la
+38 sub el — nu puteai nici juca, nici închide. În peisaj există 740px
lăţime şi doar 360 înălţime, deci roata trece în stânga şi textul în dreapta.
Roata NU coboară sub ~210px: la 150px numerele de pe ea se suprapun.
După: modal 682×264, centrat 48px sus/jos, 32px stânga/dreapta, fără scroll. */
@media (orientation: landscape) and (max-height: 500px) {
html body .ds-overlay { padding: 8px !important; }
html body .ds-modal {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
align-items: center !important; column-gap: 18px !important; row-gap: 4px !important;
width: auto !important; max-width: calc(100% - 16px) !important;
max-height: calc(100% - 16px) !important; overflow: visible !important;
padding: 12px 18px !important;
}
html body .ds-modal .ds-wheel-wrap {
grid-column: 1 !important; grid-row: 1 / span 3 !important;
width: 210px !important; height: 210px !important; margin: 0 !important;
}
html body .ds-modal .ds-head { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; }
html body .ds-modal .ds-msg { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; }
html body .ds-modal .ds-actions { grid-column: 2 !important; grid-row: 3 !important; margin: 0 !important; }
html body .ds-modal .ds-foot { grid-column: 2 !important; grid-row: 4 !important; margin: 0 !important; font-size: 10px !important; }
}
/* ── Panoul „Jocuri" nu urma tema aleasă din profil ──
`assets/css/daily-spin.css:94` hardcodează un gri-albăstrui
rgba(29,34,43) → rgba(16,19,26), iar plăcuţele sunt alb-translucid.
Componenta e comună celor 8 jocuri plus site, deci NU poate avea o culoare
fixă: fiecare temă din `themes.css` (16 la număr) îşi are variabilele ei.
Le legăm de variabilele temei, cu fallback pe valorile vechi acolo unde
variabilele lipsesc. Peticul stă aici, deci reparaţia e DOAR pentru Remi,
doar pe mobil; corect ar fi în `daily-spin.css`, dar acela atinge toate
jocurile şi nu se schimbă fără acord. Măsurat cu tema „remi": panoul trece
de la rgb(29,34,43) la rgb(58,35,16), plăcuţele la rgb(74,46,22). */
@media (max-width: 991px) {
html body .ds-gpanel {
background-image: linear-gradient(172deg,
var(--bg-secondary, rgba(29, 34, 43, .97)),
var(--bg-primary, rgba(16, 19, 26, .99))) !important;
border-color: rgba(var(--primary-rgb, 232, 201, 106), .35) !important;
}
html body .ds-gpanel .ds-gp-tile {
background: var(--bg-tertiary, rgba(255, 255, 255, .028)) !important;
border-color: var(--border-color-light, rgba(255, 255, 255, .06)) !important;
}
html body .ds-gpanel .ds-gp-tile:hover {
background: rgba(var(--primary-rgb, 232, 201, 106), .12) !important;
border-color: rgba(var(--primary-rgb, 232, 201, 106), .35) !important;
}
html body .ds-gpanel .ds-gp-ico {
background: var(--bg-quaternary, rgba(255, 255, 255, .04)) !important;
border-color: var(--border-color-light, rgba(255, 255, 255, .07)) !important;
}
html body .ds-gpanel .ds-gp-name { color: var(--text-primary, #dfe5ee) !important; }
html body .ds-gpanel .ds-gp-online { color: var(--text-secondary, #8b95a3) !important; }
}
/* ════════════════════════════════════════════════════════════════════════
FOOTER, PORTRET — bara de jos se vede întreagă, pe două rânduri
════════════════════════════════════════════════════════════════════════
Bara avea ~620px de conţinut (avatar, balanţă, cronometru, rundă, ATU,
scoruri, XP, indiciu) într-un ecran de 360, iar ce nu încăpea era pur şi
simplu tăiat: în lobby se vedeau 149px din 309, la masă 308 din 455 —
scorurile, XP-ul şi butonul de indiciu lipseau cu totul.
Prima variantă ascundea XP-ul la masă ca să încapă restul. Greşit: nu se
scoate informaţie ca să încapă, se micşorează până intră. Aici nici
micşorarea nu ajungea (620 în 360 ar fi însemnat ~58% din font), aşa că
bara curge pe DOUĂ RÂNDURI şi creşte de la 22 la 41px.
Singurul element scos e ATU, la cererea explicită: apare oricum în panoul
jucătorului, sub masă.
Blocajul care a cerut selectorii lungi: `.nav-rail .status-bar` (~518) ţine
bara la `flex: 0 0 22px; height: 22px`, iar `#navRail` are `--nav-rail-h`
fix — fără să le anulăm, al doilea rând intra 13px peste tab-bar în loc să
crească bara. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
html body:is(.game-active, .mp-game-active) .status-bar #atuIndicator { display: none !important; }
html body .nav-rail,
html body #navRail {
height: auto !important; min-height: 0 !important; max-height: none !important;
--nav-rail-h: auto !important;
}
html body .nav-rail .status-bar,
html body .status-bar {
flex: 0 0 auto !important; height: auto !important;
min-height: 22px !important; max-height: none !important;
flex-wrap: wrap !important; overflow: visible !important;
row-gap: 1px !important; column-gap: 4px !important;
padding: 2px 6px !important; align-items: center !important;
}
/* cele două jumătăţi ale barei nu mai sunt containere separate, ca
elementele să poată curge liber pe al doilea rând */
html body .status-bar > div:first-child { display: contents !important; }
html body .status-bar .status-actions { display: contents !important; }
html body .status-bar .status-item { gap: 3px !important; }
/* XP-ul rămâne, dar strâns: la 110px lăţime minimă împingea butonul de
indiciu pe un al treilea rând, singur */
html body:is(.game-active, .mp-game-active) .status-bar .xp-bar-container {
display: flex !important; flex: 1 1 60px !important;
min-width: 56px !important; max-width: 120px !important;
}
/* Bulina de mesaje necitite stătea cu `top: -4px`, adică 3px deasupra
butonului CHAT — cu bara crescută, ateriza peste ea. */
html body #navBarPrimary .chat-unread-badge { top: 2px !important; right: 6px !important; }
}
/* ── Butonul plutitor de mod imersiv ──
48×48 la opacitate .9, peste conţinut peste tot: peste modalul de premiere,
peste zona de etalare, peste avatarul primului card din lobby. Poziţia
(mijloc-stânga) e deliberată şi documentată mai sus (~808) — o păstrăm, dar
îl facem discret: mai mic şi şters în repaus, plin la atingere. */
@media (max-width: 991px) {
html body #immersiveFloatBtn.immersive-toggle-float {
width: 34px !important; height: 34px !important;
opacity: .32 !important; transition: opacity .2s ease !important;
}
html body #immersiveFloatBtn.immersive-toggle-float:hover,
html body #immersiveFloatBtn.immersive-toggle-float:active,
html body #immersiveFloatBtn.immersive-toggle-float:focus-visible { opacity: 1 !important; }
}
/* ── Premiere: rândurile Rol/Timp/Ture erau cu 9px mai late de fiecare parte
decât cardurile de clasament (28..332 faţă de 37..323), deci marginea sărea
vizibil între cele două secţiuni. După: 36..324 faţă de 37..323. */
@media (max-width: 991px) {
#resultStatsModal { padding-left: 9px !important; padding-right: 9px !important; }
}
/* ── Bara de filtre: rămâne pe UN rând, dar nu se mai retează brusc ──
Se văd ~214px din 1034 de conţinut şi nimic nu arăta că mai urmează ceva.
Estomparea de la capăt o spune; lupa şi sortarea cedează 22px scrollerului.
(Varianta cu filtrele pe patru rânduri a fost probată şi respinsă.) */
@media (orientation: portrait) and (max-width: 991px) {
.lobby-filters-scroll {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%) !important;
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%) !important;
}
.lobby-search-toggle { width: 26px !important; min-width: 26px !important; }
.lobby-sort-select { min-width: 76px !important; font-size: 10px !important; padding-left: 4px !important; }
}
/* ════════════════════════════════════════════════════════════════════════
PANOURI — animaţia de deschidere şi de închidere
════════════════════════════════════════════════════════════════════════
Trei lucruri măsurate în pagina vie, la deschiderea unui panou din sertar:
1. ÎNCHIDEREA JUCA ANIMAŢIA DE INTRARE ÎNCĂ O DATĂ. La apăsarea pe ✕, clasa
`page-flip-in` rămâne pe panou, aşa că `remiPanouCortina` (intrarea) se
relua 200ms — măsurat cadru cu cadru — şi abia apoi începea ieşirea.
Intrarea are voie să ruleze doar cât panoul e `.active`.
2. LA ÎNCHIDERE PANOUL SĂREA. `.context-panel.hidden` (remi-pro.css:9537)
taie lăţimea de la 740 la 0 într-un singur cadru, iar `translateX(100%)`
— calculat pe noua lăţime — îl readucea la stânga: 655px → 1px între două
cadre, cu lobby-ul din spate reaşezându-se brusc. Tranziţia pe lăţime şi
transform face colapsul odată cu glisarea.
3. SERTARUL SE MIŞCA ÎN SPATELE PANOULUI. Panoul apare instant peste, dar
sertarul mai cobora 300ms (T109 → T360) şi se ghicea prin
`backdrop-filter: blur(20px)` ca o ceaţă care alunecă.
Plus două de aspect: antetul panoului nu era animat deloc (apărea brusc cât
restul aluneca), iar curba `cubic-bezier(.4,0,.2,1)` accelerează la început
— pentru ceva care INTRĂ în ecran convenţia e decelerare pură.
Rezultat măsurat la ieşire: o singură glisare, L0 → 90 → 431 → 634 → 740 în
~225ms, cu lăţimea păstrată tot timpul. */
@media (max-width: 991px) {
/* (4) Panoul lăsa să se ghicească lobby-ul prin el: gradient 95-98% plus
`backdrop-filter: blur(20px)`. Pe mobil e opac — nu mai e nimic de văzut
în spate. Culorile vin din temă, deci urmează ce alege userul din profil. */
html body .context-panel {
background-image: linear-gradient(var(--bg-secondary, #3a2310) 0%,
var(--bg-primary, #2a1b0e) 100%) !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Lăţimea poate tranzita mereu; TRANSFORM-ul doar când panoul nu mai e
activ, adică la ieşire. Când tranziţia pe transform era pornită tot
timpul, se bătea cu animaţia de intrare — care mişcă acelaşi transform —
şi deschiderea ieşea înainte-înapoi: măsurat L1→79→155→63→0. */
html body .context-panel {
transition: width .26s cubic-bezier(.4, 0, .2, 1),
max-width .26s cubic-bezier(.4, 0, .2, 1),
flex-basis .26s cubic-bezier(.4, 0, .2, 1) !important;
}
html body .context-panel:not(.active) {
transition: transform .24s cubic-bezier(.4, 0, 1, 1),
width .26s cubic-bezier(.4, 0, .2, 1) .1s,
max-width .26s cubic-bezier(.4, 0, .2, 1) .1s,
flex-basis .26s cubic-bezier(.4, 0, .2, 1) .1s !important;
}
html body .context-panel.hidden { overflow: hidden !important; }
/* (5) „Se închide strâns într-o parte şi după se duce în cealaltă."
`translateX(100%)` e procent din LĂŢIMEA PROPRIE: pe măsură ce panoul se
strânge, scade şi „100%", aşa că e tras înapoi spre stânga chiar în timp
ce se închide. Cu o distanţă fixă rămâne afară oricât s-ar strânge. */
html body .context-panel:not(.active),
html body .context-panel.hidden { transform: translateX(100vw) !important; }
/* (1) intrarea NU se rejoacă peste închidere, iar ieşirea o face tranziţia
de mai sus — orice animaţie aici ar fi a doua mişcare */
html body .context-panel.hidden,
html body .context-panel.hidden .panel-header,
html body .context-panel.hidden .panel-content { animation: none !important; }
/* (3) nimic nu se mai mişcă în spatele panoului */
html body:has(.context-panel.active) #drawerPanel,
html body:has(.context-panel.active) #drawerBackdrop {
transition: none !important; animation: none !important;
opacity: 0 !important; visibility: hidden !important;
}
/* (6) Cortina de la intrare nu mai are ce anima: panoul e la locul lui din
primul cadru, iar transform-ul e rezervat ieşirii. O scoatem explicit, ca
să fie intenţionat, nu accidental. Rămân fade-urile de antet şi conţinut,
antetul cu un pas înaintea conţinutului. */
html body .context-panel.page-flip-in { animation: none !important; }
html body .context-panel.page-flip-in .panel-header {
animation: remiPanouContinut .26s cubic-bezier(0, 0, .2, 1) .04s both !important;
}
html body .context-panel.page-flip-in .panel-content {
animation-timing-function: cubic-bezier(0, 0, .2, 1) !important;
animation-duration: .26s !important; animation-delay: .06s !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
PANOUL MESE
════════════════════════════════════════════════════════════════════════ */
/* ── Jocul cu botul, scos din panou ──
Panoul avea o bară cu două file, „Live" şi „AI" (remi-pro.js:8456), iar fila
AI arăta cardul „Remi 1v1 / Tu vs Bot" cu buton „▶ Joacă", care deschide
modalul de joc single. Modul cu botul nu se mai foloseşte pe live — butonul
din lobby a fost scos pe 02-09-2026 (index.php:400), dar ăsta a rămas.
ATENŢIE: e ascuns, nu şters. Blocul continuă să fie construit de JS la
fiecare deschidere a panoului (remi-pro.js:8443-8526, ~85 de linii).
Curăţenia adevărată se face acolo. */
@media (max-width: 991px) {
html body #tablesTabAI,
html body #tablesContentAI { display: none !important; }
}
/* ── „Live": din filă rămasă singură, în pastilă ──
După ce fila AI a plecat, „Live" rămăsese o filă singulară care ocupa un
rând întreg (28px) pentru un cuvânt şi o cifră — arăta ca text uitat acolo.
Devine pastilă: punct verde care pulsează (mesele chiar SUNT live),
eticheta discretă, contorul ca insignă. Verdele e singura culoare fixă,
fiindcă e semantic („online"); restul vine din temă. */
@keyframes remiLivePuls {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .45; transform: scale(.82); }
}
@media (max-width: 991px) {
html body .context-panel .mp-tabs-bar {
display: flex !important; align-items: center !important;
height: 26px !important; min-height: 0 !important;
padding: 0 !important; margin-bottom: 2px !important;
background: none !important; border: none !important;
}
html body .context-panel .mp-tabs-bar #tablesTabLive {
display: inline-flex !important; align-items: center !important; gap: 7px !important;
flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
height: 24px !important; min-height: 0 !important;
padding: 0 11px 0 9px !important;
background: rgba(var(--primary-rgb, 212, 165, 68), .07) !important;
border: 1px solid rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
border-radius: 999px !important; box-shadow: none !important; opacity: 1 !important;
font-size: 10px !important; font-weight: 700 !important; letter-spacing: .9px !important;
text-transform: uppercase !important; cursor: default !important;
color: var(--text-secondary, rgba(244, 236, 216, .62)) !important;
}
/* globul devine punct verde care pulsează */
html body .context-panel #tablesTabLive .mp-tab-icon {
width: 7px !important; height: 7px !important; font-size: 0 !important;
flex: 0 0 auto !important; background: #22c55e !important; border-radius: 50% !important;
box-shadow: 0 0 0 3px rgba(34, 197, 94, .16) !important;
animation: remiLivePuls 2s ease-in-out infinite !important;
}
/* contorul: insignă sobră, nu bulină roşie de alertă */
html body .context-panel #tablesTabLive .mp-tab-badge {
display: inline-flex !important; align-items: center !important;
min-width: 0 !important; height: 15px !important; padding: 0 6px !important;
background: rgba(var(--primary-rgb, 212, 165, 68), .16) !important;
border: none !important; border-radius: 999px !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0 !important;
}
}
/* ── „Creează masă": din bandă, în buton pe linie cu „Live" ──
Era o bandă aurie de 702px pe rând propriu — mai apăsată decât lista pentru
care deschizi panoul. `.mp-lobby-header` e coloană şi ţine şi butonul, şi
bara de filtre, deci se ridică DOAR butonul; filtrele rămân pe lăţime.
`-37px` = înălţimea rândului „Live" (26) plus decalajul măsurat (11), ca
cele două să iasă exact pe aceeaşi linie: verificat T89–B113 amândouă. */
@media (max-width: 991px) {
html body .context-panel .mp-lobby-header {
padding: 0 !important; background: none !important; border: none !important;
}
html body .context-panel #mpCreateBtn {
align-self: flex-end !important; margin-top: -37px !important;
}
html body .context-panel .mp-create-btn {
width: auto !important; min-width: 0 !important; flex: 0 0 auto !important;
height: 24px !important; min-height: 0 !important;
padding: 0 14px !important; font-size: 11px !important;
}
/* cifrele erau la 10px, cât eticheta de lângă ele */
html body .context-panel .mp-stats-bar strong { font-size: 12px !important; }
}
/* ── Cardurile de masă, strânse ──
63px fiecare într-un panou de 360 însemna 4 mese vizibile; la 53px încap 6,
fără să scadă fontul numelui — care primeşte greutatea pe care o merită,
fiindcă era la fel de apăsat ca pastilele din jurul lui. */
@media (max-width: 991px) {
html body .context-panel .mpc-card { padding: 6px 8px !important; gap: 4px !important; }
html body .context-panel .mpc-card .mpc-sub { display: none !important; }
html body .context-panel .mpc-chip { padding: 1px 5px !important; font-size: 9px !important; }
html body .context-panel .mpc-name { font-size: 13px !important; font-weight: 700 !important; }
html body .context-panel .mpc-chips { opacity: .8 !important; }
}
/* ── Avatarul gazdei în cardul din panoul Mese ──
Cardul din panou (`.mpc-card`) n-avea avatar, deşi cel din lobby
(`.lobby-card`) îl arată — aceeaşi listă, două înfăţişări. Avatarul e adăugat
în `_mpBuildRoomCard` (remi-pro.js ~13261); aici primeşte forma, copiată după
`.lobby-card-avatar` (remi-pro.css:3417), doar puţin mai mic fiindcă
rândul din panou e mai strâns. */
@media (max-width: 991px) {
html body .context-panel .mpc-avatar {
width: 26px !important; height: 26px !important;
flex: 0 0 auto !important; border-radius: 50% !important;
border: 1.5px solid rgba(255, 255, 255, .15) !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-weight: 800 !important; font-size: 12px !important; line-height: 1 !important;
color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important;
overflow: hidden !important; margin-right: 8px !important;
}
html body .context-panel .mpc-card { align-items: center !important; }
/* butonul „Priveşte" are acum text, nu doar pictogramă — îi trebuie lăţime */
html body .context-panel .mpc-action-btn.spectate {
white-space: nowrap !important; padding: 3px 10px !important; font-size: 11px !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
PEISAJ PE TELEFON REAL (769-991px) — lobby-ul cu reclamele laterale
════════════════════════════════════════════════════════════════════════
Reclamele laterale se ascund sub 768px (`remi-pro.css:3107`). Bancul de
probă folosit până acum avea 740px lăţime, adică SUB prag: tot ce s-a
verificat în peisaj a fost fără ele. Pe un telefon adevărat în peisaj
(844×390, 915×412, 932×430) reclamele APAR şi iau 320px din 844 — 38% din
ecran — iar lobby-ului îi rămân 508.
Măsurat la 844×390: antetul are 560px de conţinut cu `flex-wrap: nowrap`
într-o zonă de 508, deci „Intră Rapid" se tăia, iar „Creează Masa" ieşea la
R766 faţă de o zonă care se termină la 676 — complet în afara ecranului.
Adică NU puteai crea o masă din lobby, în peisaj, pe telefon.
Antetul curge pe două rânduri, iar butoanele trec pe rândul al doilea,
egale. Antetul era blocat la `height/min/max: 44px` cu `overflow: hidden`,
deci al doilea rând exista dar se vedea doar ca o fâşie (conţinut 74 în 44).
După: antet 74px, ambele butoane 233 şi 231px, amândouă în zonă. */
@media (orientation: landscape) and (min-width: 769px) and (max-width: 991px) {
html body .lobby-header {
flex-wrap: wrap !important; row-gap: 6px !important;
height: auto !important; min-height: 0 !important; max-height: none !important;
overflow: visible !important; flex: 0 0 auto !important;
}
html body .lobby-header-right {
flex: 1 1 100% !important; justify-content: stretch !important;
}
html body .lobby-header-right .lobby-btn {
flex: 1 1 0 !important; min-width: 0 !important;
}
}
/* ── Paginarea, ascunsă sub bara de jos ──
REGRESIE proprie: când bara de status a trecut pe două rânduri, `.nav-rail` a
crescut de la 63 la 81px, dar zona de conţinut a rămas la fel de lungă — se
termină la 688, iar bara fixă începe la 659. Ultimii 29px stăteau SUB ea, şi
exact acolo cade paginarea („1 2 3 4"), care nu se mai vedea deloc.
Lista primeşte la final spaţiu cât înălţimea barei. */
@media (orientation: portrait) and (max-width: 991px) {
html body.game-menu .lobby-view { padding-bottom: 34px !important; }
}
/* ── Panoul jucătorului, tăiat de bara de jos ──
Aceeaşi regresie ca la paginare, din aceeaşi cauză: bara a crescut la 81px,
zona de joc a rămas la fel de lungă, iar scaunul de jos ajungea la B666 cu
bara la 659 — marginea panoului jucătorului intra sub ea.
După: seat-south B648, player-area B646, player-info-bar B643.
20-09-2026 — A REVENIT, fiindcă bara a mai crescut o dată. Măsurat pe 412×968:
`#navRail` e `fixed`, 861..968, iar masa ţine până la 920 — ultimii ei 59px stau
sub bară. Cu cei 18px de aici, `#playerArea` ajungea la 876 (15px sub bară), iar
butonul ETALEAZĂ la 882 (21px sub ea). Userul: „se taie banda jos la userul de jos".
ATENŢIE dacă bara mai creşte: cifra de aici nu e un număr frumos, e „cât intră sub
bară". Se măsoară aşa — `#navRail` top faţă de `#playerArea` bottom — nu se ghiceşte.
20-09, mai târziu — COBORÂTĂ DE LA 42 LA 16. Userul: „poţi aranja un pic şi ale mele,
şi div player info bar să lipească de ale mele, că are spaţiu gol". Avea dreptate, şi
golul era chiar reparaţia de mai sus: cei 42px fuseseră puşi când butonul ETALEAZĂ avea
44px şi ieşea sub bară. Între timp toate butoanele au ajuns la 30px (vezi „UN SINGUR
LIMBAJ DE BUTOANE"), deci rezerva nu mai apăra nimic — rămăsese doar ca 29px de postav
gol între bandă şi bara de jos.
Măsurat după: banda 843..877, butonul ETALEAZĂ 847..877 întreg, bara începe la 881 —
3px între ele. Dacă butoanele se fac vreodată iar mai înalte, cifra asta trebuie
recalculată, nu lăsată aşa. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
html body:is(.game-active, .mp-game-active) .game-area { padding-bottom: 16px !important; }
}
/* ════════════════════════════════════════════════════════════════════════════════════════
UN SINGUR LIMBAJ DE BUTOANE, PE PORTRET (20-09-2026)
────────────────────────────────────────────────────────────────────────────────────────
Userul, pas cu pas: „activity log din header să scoatem… să avem butoanele header
frumoase" → „scoate icon[iţele de la] roata şi jocuri; spectator, decât icon; să se vadă
MESE" → „trebuie toate aceleaşi butoane ca roata, jocuri" → „centrează ochiul spectator"
→ „acum te duci şi la butoanele din footer, la fel" → „acum mergi la butonul etalează,
îl faci la fel" → „nu are pastila glow, trebuie să îţi repet mereu".
PASTILA ARE CINCI PĂRŢI. Ultima e cea pe care am uitat-o de trei ori azi:
1. formă — 30px înălţime, rotunjire 12px, padding 0 11px, pe RÂND (nu coloană)
2. fond — linear-gradient(rgba(212,165,68,.14), rgba(212,165,68,.05))
3. chenar — .8px solid rgba(212,165,68,.45) + umbra interioară + halo
4. literă — 11px/700, letter-spacing .08em, culoare rgb(212,165,68)
5. DUNGA — 2px jos, 10px de fiecare capăt, degrade transparent→auriu→transparent
APRINS vs STINS: ce se poate apăsa urcă fondul la .28→.12 şi chenarul la .75. Ce e
dezactivat coboară la `opacity: .45`. Un buton stins care arată aprins te pune să apeşi
degeaba — e mai rău decât unul nepotrivit.
CE NU PRIMEŞTE PASTILA: cercurile (FAB-ul de profil, „măreşte tabla", „vezi piesele").
Pe un cerc dunga de 2px arată ca o zgârietură; primesc doar auriul. Şi piesele de joc
(`.tile`) nu sunt butoane.
DOUĂ CAPCANE PLĂTITE AZI:
· `overflow: hidden` + colţuri rotunjite TAIE capetele dungii. În footer de-aia nu se
potrivea: am tras-o la 13px în loc de 10 (proporţional cu un buton de 88, nu 70).
· pe un pseudo-element (pastila „↓ TRAGE" e `::after`) nu poţi pune alt `::after`, iar la
butoanele de acţiune o altă regulă punea lăţimea pseudo-ului pe 0 şi dunga dispărea.
Soluţia, la amândouă: dunga se face STRAT DE FUNDAL, nu pseudo-element.
ÎNCADRAREA ANTETULUI, măsurată la 412px:
← MESE 79×30 · 👁 30×30 · JOCURI 70×30 · ROATA ZILNICĂ 119×30 → se termină la 390.
Sub 380px iese insigna de spectator şi se strânge paddingul: ~330 din 360.
── 20-09-2026: ŞI PE PEISAJ ────────────────────────────────────────────────────────────
Blocul ăsta era închis pe `orientation: portrait`, aşa că peisajul telefonului nu primea
nimic: „Mese" rămânea 12px/700 fără dungă, „Jocuri" şi „Roata" 24px cu 13px/400, footerul
8px/400, iar butoanele de acţiune rotunjite la 999px.
Userul, după ce am încercat să scriu un al doilea bloc: „ţi-am spus că ele există, dar
ţine ceva în media… hai să schimbăm media". Avea dreptate — nu lipsea cod, lipsea o
condiţie. Aşa că regulile sunt ACELEAŞI, într-un singur loc; s-a lărgit doar media.
Probat prin injecţie înainte de scris, la 956×440: antet 79×30 şi 70×30 cu dungă, ochiul
30×30, footer 110×30 cu eticheta 11px/700, numărul din teanc 36×21 — iar masa a rămas
382px şi bara de jos 30px, deci nu s-a furat înălţime.
`max-height: 599px` ţinteşte telefonul întors, nu tableta: peisajul de tabletă are
propriile reguli (`min-height: 600px`), iar sub 500px mai e un bloc vechi de aşezare
(~499-1096) care stabileşte ordinea din antet — pe acela nu-l atingem, doar îl îmbrăcăm.
════════════════════════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (max-width: 991px),
(orientation: landscape) and (max-width: 991px) and (max-height: 599px) {
/* ── ANTET ──────────────────────────────────────────────────────────────────────────
Jurnalul de activitate iese. NU e o copie: `asiguraColoanaLaterala` îl mută din masă
în antet pe portret, ca să câştige cei 22px ai rândului „jurnal" pentru stativ. Acolo
avea 26px înălţime şi arăta un rând ciuntit dintr-un text care curge. */
html body:is(.game-active, .mp-game-active) .top-bar .sidebar-section-log { display: none !important; }
/* „MESE" — singurul buton din antet care poartă şi iconiţă, şi cuvânt */
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarLeave {
height: 30px !important; min-height: 30px !important;
padding: 0 11px !important; border-radius: 12px !important;
display: inline-flex !important; flex-direction: row !important;
align-items: center !important; justify-content: center !important;
gap: 6px !important; position: relative !important;
}
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarLeave span:not(.material-symbols-rounded) {
display: inline !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important;
}
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarLeave .material-symbols-rounded { font-size: 15px !important; }
/* „JOCURI" şi „ROATA ZILNICĂ": iconiţele ♠/🎡 pleacă, rămân cuvintele.
Pastilele sunt ale widgetului comun (`assets/css/daily-spin.css`), care sub 1150px le
face pătrate şi le ascunde textul cu `!important`, ca să arate la fel în toate cele 8
jocuri. De-aia regula e scrisă strict pe antetul mesei de Remi. */
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-hico { display: none !important; }
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-hbtn {
height: 30px !important; min-height: 30px !important;
width: auto !important; min-width: 0 !important; aspect-ratio: auto !important;
padding: 0 11px !important; border-radius: 12px !important;
display: inline-flex !important; flex-direction: row !important;
align-items: center !important; justify-content: center !important;
gap: 6px !important; position: relative !important; overflow: visible !important;
}
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-htxt {
display: inline !important; font-size: 11px !important; font-weight: 700 !important;
letter-spacing: .08em !important; white-space: nowrap; max-width: none !important;
/* 20-09-2026 — testerul de layout, EROARE `text-fits`: „🎡 Roata zilnică" ieşea
„tăiat fără elipsă", cu 46px lipsă. Textul l-am pus eu aici; `clip` moştenit tăia
cuvântul la jumătate. Cu `ellipsis` se scurtează curat când nu încape.
Când încape (măsurat acum: cere 91px, are 91) nu se vede nicio diferenţă. */
overflow: hidden; text-overflow: ellipsis;
}
/* Insigna de spectator: aceeaşi pastilă, pătrată, doar ochiul.
CENTRAREA: `margin-inline: auto` nu ajungea — cutia lui `#mpGameBar` se opreşte cu 8px
înainte de grupul din dreapta (gap-ul barei), aşa că marginile automate centrau într-o
cutie prea scurtă şi ochiul ieşea cu 5px la stânga. `margin-right: -8px` o întinde
până la grup. Măsurat după: 14px stânga, 13px dreapta. */
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBar {
flex: 1 1 auto; display: flex; align-items: center; margin-right: -8px;
}
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarInfo {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
height: 30px !important; width: 30px !important; border-radius: 12px !important;
position: relative; margin-inline: auto !important; opacity: 1 !important;
background: linear-gradient(rgba(212, 165, 68, .14), rgba(212, 165, 68, .05)) !important;
border: .8px solid rgba(212, 165, 68, .45) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18) !important;
color: rgb(212, 165, 68) !important;
}
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarInfo .material-symbols-rounded { font-size: 15px !important; }
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarLabel { display: none !important; }
/* dunga ochiului: 7px de capete, nu 10 — e pătrat de 30, nu lung, şi la 10 rămânea un ciot */
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarInfo::before {
content: "" !important; position: absolute !important;
left: 7px !important; right: 7px !important; bottom: 0 !important; top: auto !important;
width: auto !important; height: 2px !important; border-radius: 2px !important;
pointer-events: none !important; transform: none !important; z-index: 1 !important;
background: linear-gradient(90deg, transparent, rgba(212, 165, 68, .8), transparent) !important;
}
/* ── FOOTER ─────────────────────────────────────────────────────────────────────────
Degradeul, chenarul şi dunga erau DEJA la fel ca în antet — diferea aşezarea
(iconiţa deasupra textului, pe coloană), înălţimea (34) şi litera (10px/800). */
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn,
html body:is(.game-active, .mp-game-active) #navRail #drawerToggleBtn {
height: 30px !important; min-height: 30px !important;
padding: 0 11px !important; border-radius: 12px !important;
display: inline-flex !important; flex-direction: row !important;
align-items: center !important; justify-content: center !important;
gap: 6px !important; position: relative !important;
}
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-label {
font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important;
}
/* 13px, nu 10: butonul are `overflow: hidden`, iar la 10 colţul rotunjit tăia capetele */
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn::after,
html body:is(.game-active, .mp-game-active) #navRail #drawerToggleBtn::after {
content: "" !important; position: absolute !important;
left: 13px !important; right: 13px !important; bottom: 1px !important; top: auto !important;
width: auto !important; height: 2px !important; border-radius: 2px !important;
pointer-events: none !important; transform: none !important; z-index: 1 !important;
background: linear-gradient(90deg, transparent, rgba(212, 165, 68, .8), transparent) !important;
}
/* becul de indicii: pastilă mică, aceeaşi familie */
html body:is(.game-active, .mp-game-active) #navRail #hintBtn {
height: 24px !important; min-height: 24px !important;
padding: 0 9px !important; border-radius: 12px !important;
display: inline-flex !important; align-items: center !important; gap: 5px !important;
position: relative !important; overflow: visible !important;
font-size: 10px !important; font-weight: 700 !important;
background: linear-gradient(rgba(212, 165, 68, .14), rgba(212, 165, 68, .05)) !important;
border: .8px solid rgba(212, 165, 68, .45) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18) !important;
color: rgb(212, 165, 68) !important;
}
html body:is(.game-active, .mp-game-active) #navRail #hintBtn > * { font-size: 10px !important; font-weight: 700 !important; }
html body:is(.game-active, .mp-game-active) #navRail #hintBtn .material-symbols-rounded { font-size: 13px !important; }
html body:is(.game-active, .mp-game-active) #navRail #hintBtn::after {
content: "" !important; position: absolute !important;
left: 8px !important; right: 8px !important; bottom: 0 !important; top: auto !important;
width: auto !important; height: 2px !important; border-radius: 2px !important;
pointer-events: none !important; transform: none !important; z-index: 1 !important;
background: linear-gradient(90deg, transparent, rgba(212, 165, 68, .8), transparent) !important;
}
/* Modulele din bandă se întind pe toată lăţimea, nu se îngrămădesc la stânga:
măsurat, ocupau 354px din 386 şi lăsau 33px gol în dreapta. */
html body:is(.game-active, .mp-game-active) #seatSouth #playerArea .player-info-bar {
justify-content: space-between !important;
}
/* ── BUTOANELE DE ACŢIUNE din banda jucătorului (ETALEAZĂ, LIPEŞTE, ARUNCĂ…) ────────
Erau complet rotunde (999px), cu degrade crem şi fără dungă.
DUNGA E STRAT DE FUNDAL, nu `::after`: pseudo-ul există, dar o altă regulă îi punea
lăţimea pe 0 şi dispărea. Aşa nu se mai poate bate nimeni cu ea.
── 20-09-2026: ANCORAT PE `#playerArea`, NU PE `.player-info-bar` ────────────────
După ce media s-a lărgit la peisaj, butoanele tot rămâneau cu limbajul vechi
(r=999, 10,5px/700, fără dungă). Userul: „de ce nu prinde css media?" — media
prindea, SELECTORUL nu: pe peisaj butoanele sunt mutate în `#rlApron > #raActiuni`
(vezi `sincronizeaza` din remi-features.js, „butoanele: în apron pe peisaj, ACASĂ în
portret"), deci regula căuta un părinte care acolo nu există.
`#playerArea` le cuprinde pe amândouă. Măsurat la 956×440 după schimbare:
btnEtalare şi btnLipire → r=12, 11px/700, dungă=DA.
`.chip-btn.chip-btn` — clasa scrisă de două ori, intenţionat: `LIPEŞTE` are
`chip-teal`, care îşi impune fondul cu `!important`. `.player-info-bar` ne dădea
înainte nivelul de specificitate care îl bătea; fără ea, clasa repetată îl întoarce.
Fără asta, LIPEŞTE rămâne singurul buton fără dungă. */
html body:is(.game-active, .mp-game-active) #seatSouth #playerArea .action-btn-game.chip-btn.chip-btn {
height: 30px !important; min-height: 30px !important;
padding: 0 11px !important; border-radius: 12px !important;
display: inline-flex !important; flex-direction: row !important;
align-items: center !important; justify-content: center !important;
gap: 6px !important; position: relative !important; overflow: visible !important;
background:
linear-gradient(90deg, transparent, rgba(212, 165, 68, .85), transparent)
no-repeat left calc(100% - 1px) / calc(100% - 20px) 2px,
linear-gradient(rgba(212, 165, 68, .14), rgba(212, 165, 68, .05)) !important;
border: .8px solid rgba(212, 165, 68, .45) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18) !important;
color: rgb(212, 165, 68) !important;
font-size: 11px !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
}
html body:is(.game-active, .mp-game-active) #seatSouth #playerArea .action-btn-game.chip-btn.chip-btn:not([aria-disabled="true"]):not(:disabled) {
background:
linear-gradient(90deg, transparent, rgba(212, 165, 68, .85), transparent)
no-repeat left calc(100% - 1px) / calc(100% - 20px) 2px,
linear-gradient(rgba(212, 165, 68, .28), rgba(212, 165, 68, .12)) !important;
border-color: rgba(212, 165, 68, .75) !important;
}
html body:is(.game-active, .mp-game-active) #seatSouth #playerArea .action-btn-game.chip-btn.chip-btn[aria-disabled="true"],
html body:is(.game-active, .mp-game-active) #seatSouth #playerArea .action-btn-game.chip-btn.chip-btn:disabled {
opacity: .45 !important; box-shadow: none !important;
}
/* ── NUMĂRUL DE PIESE DIN TEANC ─────────────────────────────────────────────────────
Userul: „nu se vede clar nr de cărţi în teanc, trebuie mai mare", apoi „se taie, nu
se vede tot".
Era 11px/800, alb la 70%, fără fond — peste piese albe nu se citea oricât l-ai fi
mărit. Şi era agăţat ÎN AFARA teancului (`left: 126px`, adică 141..170 pe ecran), iar
`#pileArea` are `overflow: hidden` şi se termină la 154: îi reteza 16px din dreapta.
Acum stă în colţul din dreapta-jos AL TEANCULUI, pe o pastilă închisă. Aşa nu-l mai
poate tăia nimeni, oricât ar creşte cifra, şi se citeşte peste piese.
`tabular-nums` ca să nu sară cifrele la trecerea de la 9 la 10. */
html body:is(.game-active, .mp-game-active) #pileCount {
position: absolute !important;
left: auto !important; right: 4px !important;
top: auto !important; bottom: 4px !important;
transform: none !important;
font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important;
letter-spacing: .02em !important; font-variant-numeric: tabular-nums;
color: #fff !important;
padding: 2px 7px !important; border-radius: 10px !important;
background: rgba(20, 14, 5, .82) !important;
border: .8px solid rgba(212, 165, 68, .45) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5) !important;
}
/* butonul rotund plutitor de pe masă: acelaşi auriu, forma rămâne cerc */
html body:is(.game-active, .mp-game-active) #immersiveFloatBtn {
background: linear-gradient(rgba(212, 165, 68, .14), rgba(212, 165, 68, .05)) !important;
border: .8px solid rgba(212, 165, 68, .45) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18) !important;
color: rgb(212, 165, 68) !important;
}
}
/* Supapa pentru ecrane de 360: iese insigna de spectator şi se strânge paddingul. */
@media (orientation: portrait) and (max-width: 379px) {
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarInfo { display: none !important; }
html body:is(.game-active, .mp-game-active) .top-bar #mpGameBarLeave,
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-hbtn { padding: 0 9px !important; }
}
/* ── PIESA DE ATU: doar piesa, şi se întoarce rar ────────────────────────────────────────
Userul: „atu lasă decât piesa, că înţeleg userii" şi „fă atu-ul să se rotească la o
perioadă mai lungă… în oglindă".
Cuvântul „ATU" şi chenarul au plecat — rămâne piesa, care spune singură ce e.
ROTIREA E PE `rotate`, NU PE `transform`, şi ăsta e miezul:
`.game-play-view > #remiSidebar #atuDisplay.atu-beside-pile` are `transform: none
!important`, iar în CSS o declaraţie `!important` BATE ANIMAŢIA. Prima variantă anima
`transform` — animaţia rula cinstit (prinsă la 116s, 117s, 118s, fără repornire) dar
piesa nu se clintea, fiindcă transformarea era anulată. Userul: „animaţia nu prinde".
`rotate` e proprietate separată, pe care regula aia n-o atinge.
14 secunde, din care întoarcerea ţine ~2: restul timpului stă dreaptă, ca să nu fure
ochiul din joc. Cifra e a userului, aleasă după ce a văzut-o la 3s.
NU e în media query-ul de portret: e la fel şi pe desktop. */
html body:is(.game-active, .mp-game-active) #atuDisplay {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
perspective: 320px;
transform-origin: 50% 50% !important;
will-change: rotate;
animation: joAtuOglinda 14s cubic-bezier(.45, .05, .3, 1) infinite !important;
}
html body:is(.game-active, .mp-game-active) #atuDisplay .atu-label-small { display: none !important; }
@keyframes joAtuOglinda {
0%, 86% { rotate: y 0deg; }
93% { rotate: y 180deg; }
100% { rotate: y 360deg; }
}
@media (prefers-reduced-motion: reduce) {
html body:is(.game-active, .mp-game-active) #atuDisplay { animation: none !important; }
}
/* ── PASTILA „↓ TRAGE" DE PE TEANC ───────────────────────────────────────────────────────
Era din alt limbaj: aur plin .96, text negru, rotunjire 999px, 12px/800 Inter.
Acum e pastila familiei — dar peste un fond ÎNCHIS, fiindcă stă deasupra pieselor şi un
degrade translucid singur ar face textul greu de citit.
E un pseudo-element, deci dunga nu poate fi alt `::after`: se face ca strat de fundal.
Saltul la 1,6s (`joTrageSare`) rămâne — ăla e semnalul, nu stilul.
NU e în media query-ul de portret: teancul arată la fel şi pe desktop. */
html body:is(.game-active, .mp-game-active) .draw-pile.awaiting-draw::after {
border-radius: 12px !important;
padding: 0 11px !important;
height: 26px !important;
background:
linear-gradient(90deg, transparent, rgba(212, 165, 68, .85), transparent)
no-repeat left calc(100% - 1px) / calc(100% - 20px) 2px,
linear-gradient(rgba(212, 165, 68, .28), rgba(212, 165, 68, .12)),
rgba(20, 14, 5, .88) !important;
border: .8px solid rgba(212, 165, 68, .75) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18), 0 3px 10px rgba(0, 0, 0, .5) !important;
color: rgb(212, 165, 68) !important;
font: 700 11px/26px Georgia, "Times New Roman", serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
/* ── Bara de filtre, strivită de propriul fix de paginare ──
A DOUA REGRESIE din acelaşi lanţ: `.lobby-view` e flex column, iar când i-am
dat `padding-bottom: 34px` pentru paginare, flexbox-ul a luat spaţiul de la
primul copil care avea voie să cedeze — bara de filtre, cu `flex-shrink`
implicit 1. A ajuns de la 30 la 8px înălţime, cu conţinutul ieşind din ea:
arăta ca şi cum filtrele ar fi tăiate.
Antetul şi bara de filtre nu se mai comprimă; doar grila cedează spaţiu. */
@media (orientation: portrait) and (max-width: 991px) {
html body.game-menu .lobby-view > .lobby-filter-bar,
html body.game-menu .lobby-view > .lobby-header { flex: 0 0 auto !important; }
html body.game-menu .lobby-view > .lobby-filter-bar {
height: auto !important; min-height: 30px !important; overflow: visible !important;
}
}
/* ── Cronometrul de mutare, vizibil şi pentru SPECTATOR ──
Spectatorului nu-i vine niciodată rândul, deci vechiul „mod linişte" îi stingea
secundele permanent: nu vedea nicăieri cât mai are de mutat cel la rând.
Arcul de pe avatar se hrăneşte acum din `updateTimerDisplay`, care ţine cont de
locul ACTIV, nu de „e rândul meu" — deci spectatorul îl vede din start. A rămas
doar eticheta de sub nume, pe care i-o aprindem explicit. (rescris 18-09-2026) */
@media (max-width: 991px) {
html body.spectator-mode:has(#timerPlayer.timer-active) #seatSouth .identity-status-label {
display: block !important;
}
}
/* ── Cronometrul adversarilor, ascuns la 2/3/4 jucători ──
`updateTurnTimerDisplay` (remi-pro.js ~6292) pune corect `timer-active` pe
locul care mută, dar cronometrele nord/est/vest rămâneau `display: none`.
Măsurat: `Opponent = ACTIV / display:none / 0px` — deci valoarea exista şi
se actualiza, dar nu o vedea nimeni. La mesele de 3 şi 4 nu ştiai niciodată
cât mai are cel care mută, nici ca jucător, nici ca spectator.
Verificat live după: „timer 45" → „timer 44", 42×19px, vizibil. */
@media (max-width: 991px) {
html body #timerOpponent.timer-active,
html body #timerEast.timer-active,
html body #timerWest.timer-active {
display: inline-flex !important; visibility: visible !important;
align-items: center !important; gap: 3px !important;
}
}
/* ── Cronometrele adversarilor: PESTE avatar, ca la jucătorul de jos ──
Aceeaşi informaţie avea patru înfăţişări: jos e overlay pe poză (`#raTvalP`),
iar adversarii aveau o pastilă separată lângă nume, 42×19, cu pictogramă plus
cifră („timer 45"), alt font şi alt fundal.
Acum stau PESTE avatarul lor: cerc de 24px (exact cât `.seat-avatar`), cifra
singură, fără pictogramă. `.opponent-info` e deja `position: relative`, deci
`left/top: 0` îl aşază fix peste poză — verificat: avatar L131 T45,
cronometru L131 T45. */
@media (max-width: 991px) {
html body #timerOpponent.timer-active,
html body #timerEast.timer-active,
html body #timerWest.timer-active {
display: flex !important; visibility: visible !important;
position: absolute !important; left: 0 !important; top: 0 !important;
width: 24px !important; height: 24px !important; min-width: 24px !important;
/* fără astea două cercul era 24×12: `remi-pro.css` ~16334 pune
`min/max-height: 12px !important` pe `.opponent-area .player-timer`,
iar `height` singur nu bate `max-height`. */
min-height: 24px !important; max-height: 24px !important;
align-items: center !important; justify-content: center !important;
padding: 0 !important; gap: 0 !important; margin: 0 !important;
border-radius: 50% !important; z-index: 4 !important;
background: rgba(0, 0, 0, .62) !important;
border: 1.5px solid rgba(34, 197, 94, .9) !important;
font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important;
color: #fff !important; text-shadow: 0 1px 2px #000 !important;
pointer-events: none !important;
}
html body #timerOpponent.timer-active .material-symbols-rounded,
html body #timerEast.timer-active .material-symbols-rounded,
html body #timerWest.timer-active .material-symbols-rounded { display: none !important; }
}
/* ── Ancora cronometrului la est şi vest ──
Doar `.opponent-info` de la NORD e `position: relative`; la est şi vest e
`static`. Cronometrul de deasupra e `position: absolute; left/top: 0`, deci
la est şi vest nu s-ar fi raportat la avatarul lor, ci la primul strămoş
poziţionat — ar fi aterizat în altă parte la prima lor tură. La mesele de 2
nu se vedea niciodată, pentru că est şi vest nici nu există.
Măsurat înainte: nord `relative` (timer L17 T45 = avatar L17 T45, suprapus),
est şi vest `static`. */
@media (max-width: 991px) {
html body .opponent-area .opponent-info { position: relative !important; }
}
/* ════════════════════════════════════════════════════════════════════════
MASA ÎN PORTRET — patru lucruri rămase
════════════════════════════════════════════════════════════════════════ */
/* ── 1. Butoanele de acţiune la SPECTATOR ──
`remi-pro.css` le ascunde complet: spectatorul nu poate interacţiona. Dar
rândul jucătorului rămânea pe jumătate gol, aşa că decizia a fost să se vadă
INERTE — fără clic, fără focus, fără tastatură.
18-09-2026: decizia rămâne, doar înfăţişarea s-a schimbat. Nu mai sunt cinci
pătrăţele de 26px (oricum n-au mai rămas decât două: Etalează şi Lipeşte),
ci aceleaşi jetoane ca la jucător, stinse. Golul din rând s-a rezolvat oricum
singur: jetoanele de cifre cresc acum şi umplu banda. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
html body.spectator-mode .seat-south .action-bar-v2,
html body.spectator-mode .action-bar.action-bar-v2.action-bar-merged {
display: flex !important; flex-wrap: nowrap !important; gap: 3px !important;
}
html body.spectator-mode #seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn,
html body.spectator-mode .action-bar.action-bar-v2.action-bar-merged .action-btn-game {
display: inline-flex !important;
opacity: .32 !important; filter: grayscale(.5) !important;
pointer-events: none !important; cursor: default !important;
}
/* fantomele rămân ascunse şi la spectator: o acţiune imposibilă nu se desenează */
html body.spectator-mode #seatSouth #playerArea .player-info-bar .action-btn-game.ra-fantoma {
display: none !important;
}
/* eticheta text a butonului dispare — la 26px nu încape oricum */
html body.spectator-mode .action-btn-game > span:not(.material-symbols-rounded) { display: none !important; }
/* ── 2. 39px de felt gol sub panoul jucătorului ── (după: 3px) */
html body .game-play-view .seat-south { padding-bottom: 0 !important; }
/* ── 3. Numele jucătorului se tăia ──
„daniela66" cere 74px şi primea 64. NU era o limită de suprascris: bara de
326px se împarte între modulul de identitate (160), „0 pct" (103) şi
„14 piese" (78), iar identităţii îi rămânea prea puţin — patru încercări
de a forţa `max-width` pe etichetă au eşuat tocmai de-aia. Pastilele
vecine cedează câţiva px, au aer în ele. După: nume întreg. */
html body .seat-south .player-info-bar .player-module-identity { flex: 1 1 auto !important; min-width: 0 !important; }
html body .seat-south .player-info-bar .identity-text {
flex: 1 1 auto !important; min-width: 0 !important;
width: auto !important; max-width: none !important;
}
html body .seat-south .player-info-bar .player-name-label {
width: auto !important; max-width: none !important; min-width: 0 !important;
}
html body .seat-south .player-info-bar .player-module:not(.player-module-identity) { flex: 0 1 auto !important; }
/* ── 4. Zonele de etalare goale ──
Luau 206px fiecare, adică 28% din ecran de fiecare, şi stau goale la
începutul rundei. Au `flex: 0 1 auto`, deci cresc după spaţiul liber, nu
după conţinut: când s-au eliberat 36px de sub panou, i-au înghiţit ele
(206 → 242). Când n-au nicio piesă, primesc plafon. După: 121px. */
html body .game-play-view .etalare-zone:not(:has(.tile)):not(:has(img)):not(:has([class*="tile"])) {
max-height: 118px !important; flex: 0 1 auto !important;
}
}
/* ── Butoanele de acţiune la spectator, ŞI în peisaj ──
Regula pentru portret (mai sus) nu ajuta aici: în peisaj butoanele nu stau în
`.player-info-bar` — aceea e `display: none` cu totul, 0×0 — ci în
`#raActiuni`, din rândul `#rlApron`. Acela e vizibil (585×52) şi are un
`ra-spacer` de 173px liber exact cât le trebuie, deci nu creşte nimic.
Verificat: 5 × 26px, pe un rând, inerte, rândul rămâne 52px. */
/* `max-height: 599px` (16-09-2026): blocul e pentru TELEFONUL culcat; pe Fold culcat
(≥600 înalt) masa e pe aşezarea de portret şi regulile astea s-ar bate cu ea. */
@media (orientation: landscape) and (max-width: 991px) and (max-height: 599px) {
html body.spectator-mode #raActiuni {
display: flex !important; gap: 3px !important; align-items: center !important;
}
html body.spectator-mode #raActiuni .action-btn-game {
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
flex: 0 0 auto !important;
width: 26px !important; min-width: 26px !important; height: 26px !important;
padding: 0 !important;
opacity: .3 !important; filter: grayscale(.6) !important;
pointer-events: none !important; cursor: default !important;
}
html body.spectator-mode #raActiuni .action-btn-game > span:not(.material-symbols-rounded) { display: none !important; }
}
/* ── Butoanele de spectator împingeau bara afară din rând ──
Cu ele afişate, `#raActiuni` ocupa 217px şi `ra-dr` (RÂNDUL / RUNDA / ATU /
cronometru) ieşea 35px din `#rlApron`: conţinut 620px într-un rând de 584.
Butoanele se strâng de la 26 la 20px. După: 584/584, nimic nu iese. */
@media (orientation: landscape) and (max-width: 991px) and (max-height: 599px) {
html body.spectator-mode #raActiuni {
flex: 0 1 auto !important; min-width: 0 !important; gap: 1px !important;
}
html body.spectator-mode #raActiuni .action-btn-game {
width: 20px !important; min-width: 20px !important; height: 20px !important;
}
html body.spectator-mode #raActiuni .action-btn-game .material-symbols-rounded {
font-size: 13px !important;
}
}
/* ── Ultimul rând de piese din mână, tăiat de bara jucătorului ──
Mâna nu era prea mică — era prea jos. `.hand-scroll-wrapper` are 76px (regula
de la ~850, cu nota „76 = două rânduri de piese (2×32) + spaţiu + padding" —
corectă), dar se termina la 297, iar `#rlApron` începe la 290: ultimul rând
intra 7px sub bară, iar cu 15 piese al treilea rând dispărea complet.
Deasupra era loc — banda de aruncate se termină la 210, mâna începea la 221 —
deci mâna se ridică 8px. După: mână T213–B289, bara T290, zero piese sub ea,
fără să calce banda de aruncate.
REGRESIE proprie (07-09): prima variantă urca DOAR `.hand-scroll-wrapper`.
Dar posturile de lemn cu nituri din lateralele locului sud sunt
`#playerArea::before/::after` (34px, top:0/bottom:0), iar `#playerArea`
rămânea la T220 — tava ieşea 7px deasupra posturilor, ca o treaptă.
Acum urcă tot `#playerArea` (posturile vin odată cu tava) şi primeşte +8px
înălţime, ca `#rlApron` (bottom:0 în #playerArea) să rămână la T290–B342.
Verificat: posturi T212–B342, tavă T213, bară neschimbată, 0 piese sub ea. */
@media (orientation: landscape) and (max-width: 991px) and (max-height: 599px) {
html body #seatSouth #playerArea { margin-top: -8px !important; height: 130px !important; }
html body #seatSouth .hand-scroll-wrapper { margin-top: 0 !important; }
}
/* Pe TELEFON culcat (≤500px înălţime) stativul are 94px, nu 76 — vezi „PIESELE
DIN MÂNĂ, CÂT SĂ SE CITEASCĂ". Locul creşte cu aceiaşi 18px, ca insula cu
butoane (`#rlApron`, bottom:0 în `#playerArea`) să coboare odată cu tava şi să
nu calce peste rândul al doilea de piese.
Măsurat după: tavă T213–B307, insulă T309–B361, bara de jos T361 — se ating,
nu se suprapun, şi nu mai rămâne spaţiu mort.
Bloc separat, mai jos în fişier, fiindcă regula de deasupra are aceeaşi
specificitate: la egalitate câştigă ultima. Pe tabletă culcată (înălţime peste
500px) rămâne 130, unde şi piesele rămân mici. */
@media (orientation: landscape) and (max-height: 500px) {
html body #seatSouth #playerArea { height: 149px !important; }
}
/* ── Cronometrul adversarului activ ieşea din avatar (peisaj) ──
În peisaj avatarul din `.opponent-info` are 16×16 (12px + bordură; `remi-pro.css`
~16298), nu 24 ca în portret, iar cronometrul de 24px cu `left/top: 0` (regula
de la ~2576) ieşea 8px în dreapta şi 8px în jos. Aici doar se centrează:
−4px pe ambele axe → inel de 4px de jur împrejurul pozei.
Înălţimea de 24 e reparată în regula de bază (vezi nota de acolo) — prima
variantă de aici punea `height: 24px` fără `max-height` şi rămânea 24×12.
Verificat: timer T44–B68 L690–R714, avatar T48–B64 L694–R710, centrat 0/0. */
@media (orientation: landscape) and (max-width: 991px) and (max-height: 599px) {
html body #lateralWrap .opponent-area .player-timer.timer-active {
left: -4px !important; top: -4px !important; right: auto !important; bottom: auto !important;
}
}
/* ── Gol între ultimul adversar şi teanc, în coloana din dreapta (peisaj) ──
`#lateralWrap` are 304px (T44–B348): 3 adversari × 69 + gap = 213, teancul
lipit jos la T282 → 25px goi la mijloc (la masă de 2 ar fi ~160). Cardurile
cresc să umple (69 → 74–77px); golul a scăzut la 9px. Piesele adversarilor
rămân în linie cu derulare — s-a încercat pe două rânduri şi s-a respins. */
@media (orientation: landscape) and (max-width: 991px) and (max-height: 599px) {
html body #lateralWrap .opponent-area { flex: 1 1 auto !important; }
}
/* ════════════════════════════════════════════════════════════════════════
PREMIEREA (modalul de final) — TOT vizibil, fără derulare, nimic ascuns
07-09-2026. Cerinţa userului: „să se vadă totul corect chiar şi mic, fără
scroll; fără să ascundem nimic, faci font care să ne încadrăm".
Măsurat ÎNAINTE, cazul cel mai încărcat (4 jucători cu bonusuri + balanţe,
ATU + ultima piesă, statistici, oferta de revanşă, 3 butoane):
- peisaj 844×390: 634px de conţinut în 389 → 245px de derulat. Grila pe două
coloane de la ~1509 exista, dar clasamentul singur avea 484px: un rând de
jucător = 139px (padding 10/14 + trei linii cu câte 6+6px de aer, chips-uri
rupte pe două rânduri la 365px lăţime).
- portret 360×740: 25px (jucător) / 82px (spectator) de derulat; rânduri
83–106px; clasamentul ieşea 362px lat într-un corp de 358.
Ce s-a făcut: aerul strâns (rând 139 → 56–58px), fonturi 14→12 / 11→10,
clasamentul primeşte 57% din lăţime în peisaj (chips-urile încap pe o linie),
balanţa pe un rând. Nimic nu se ascunde: `.score-breakdown` rămâne `wrap`
(dacă vin mai multe bonusuri, rândul creşte — NU se taie), butoanele au
etichetele întregi (verificat sw = cw pe toate trei, ambele orientări).
Măsurat DUPĂ: peisaj 389 în 389 → 0px (42px rezervă), portret 738 în 738
→ 0px (spectator şi jucător; conţinutul se termină la B490–597).
Bonus: oferta de revanşă (`#mpOfferInModal`) era ALBASTRĂ hardcodat
(59,130,246) într-un modal pe auriul temei — adusă pe `--color-accent`.
Comutatorul „Joacă iar automat" cădea SUB butoane în peisaj (orfan în grilă,
rând implicit) — are acum rândul „revansa", deasupra lor.
Bug găsit, NEreparat aici (e în JS): butoanele se ascund cu
`style.display='none'`, dar au clasa `d-flex` (`display:flex !important`)
care bate inline-ul — spectatorii văd „Joacă din nou", jucătorii văd „Intră
în joc". Reparaţia e în `showGameEndModal` (remi-pro.js ~7288): `d-none`
în loc de `style.display`. */
@media (max-width: 991px) {
#gameEndModal #resultTitleModal { font-size: 16px !important; line-height: 1.2 !important; }
#gameEndModal #resultAnimationModal {
width: 30px !important; height: 30px !important; font-size: 30px !important; line-height: 30px !important;
}
/* clasamentul: pe toată lăţimea corpului (o regulă îl lăţea la 362 în 358) */
#gameEndModal #resultRankingModal { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
/* un rând de jucător: 139px → 56 */
#gameEndModal .score-row { padding: 3px 8px !important; margin: 0 0 3px !important; }
#gameEndModal .score-row-main { gap: 5px !important; }
#gameEndModal .score-rank, #gameEndModal .score-name { font-size: 12px !important; line-height: 1.2 !important; }
#gameEndModal .score-detail { font-size: 10px !important; }
#gameEndModal .score-value-end { font-size: 13px !important; line-height: 1.2 !important; }
#gameEndModal .score-breakdown {
margin: 2px 0 0 !important; padding: 2px 0 0 !important; gap: 3px !important;
flex-wrap: wrap !important; overflow: visible !important; /* creşte, nu taie */
}
#gameEndModal .score-breakdown span {
font-size: 10px !important; line-height: 1.3 !important; padding: 0 4px !important; white-space: nowrap !important;
}
#gameEndModal .score-balance {
margin: 1px 0 0 !important; padding: 1px 0 0 !important; font-size: 10px !important; line-height: 1.3 !important;
flex-wrap: nowrap !important; white-space: nowrap !important; gap: 3px !important;
}
#gameEndModal .score-balance-arrow { font-size: 10px !important; }
/* rezumat (ATU / ultima piesă), statistici */
#gameEndModal .game-end-summary-tiles { margin: 0 !important; padding: 0 4px !important; gap: 8px !important; }
#gameEndModal .ges-text { font-size: 10px !important; }
#gameEndModal #resultStatsModal { padding: 0 !important; }
#gameEndModal .result-stat { padding: 3px 10px !important; font-size: 12px !important; min-height: 0 !important; }
#gameEndModal .result-stat-label, #gameEndModal .result-stat-value { font-size: 12px !important; line-height: 1.3 !important; }
/* oferta de revanşă: strânsă + pe culorile temei */
#gameEndModal #mpOfferInModal {
margin: 0 !important; padding: 5px 10px !important;
background-color: rgba(212, 165, 68, .12) !important; background-image: none !important;
border: 1px solid rgba(212, 165, 68, .4) !important;
color: var(--text-primary, #f4ecd8) !important;
}
#gameEndModal .mp-offer-title { color: var(--text-primary, #f4ecd8) !important; }
#gameEndModal .mp-offer-badge { font-size: 12px !important; gap: 6px !important; }
#gameEndModal .mp-offer-badge .material-symbols-rounded,
#gameEndModal .mp-offer-countdown strong { color: var(--color-accent, #d4a544) !important; }
#gameEndModal .mp-offer-badge .material-symbols-rounded { font-size: 16px !important; }
#gameEndModal .mp-offer-progress-bar { margin: 3px 0 !important; height: 4px !important; background: rgba(0, 0, 0, .35) !important; }
#gameEndModal .mp-offer-progress-fill { background: linear-gradient(90deg, var(--color-accent, #d4a544), #f0d075) !important; }
#gameEndModal .mp-offer-countdown { font-size: 10px !important; margin: 2px 0 0 !important; }
/* revanşa automată + butoane */
#gameEndModal .auto-rematch-toggle { margin: 0 !important; padding: 2px 0 !important; font-size: 11px !important; }
#gameEndModal .result-actions { margin: 3px 0 0 !important; gap: 6px !important; }
#gameEndModal .result-actions > * {
min-height: 30px !important; height: 30px !important; padding: 4px 12px !important; font-size: 12px !important;
}
}
/* ═══════════ PREMIEREA ÎN PEISAJ — CARD CA PE DESKTOP, DOUĂ COLOANE (11-09-2026) ═══════════
Userul: „vezi premierea cum arată pe desktop şi cum e în peisaj". Pe desktop e
un card de 380px cu ramă şi colţuri (derulează 441px la 4 jucători). În peisaj
era pe tot ecranul, lipit de margini, trofeul aruncat în colţ, coloana din
dreapta goală pe jumătate, butoanele necentrate.
Acum: card cu margine 6px, ramă şi colţuri 14px; harta pe două coloane
(57/43, ca să încapă chips-urile clasamentului pe o linie):
"titlu rezumat" trofeu + titlu peste clasament | ATU joc / ultima piesă
"clasament stats" statisticile UMPLU înălţimea (rânduri egale, flex 1)
"clasament oferta"
"revansa actiuni" comutator + numărătoare | Joacă din nou / Ieşire
Distanţele şi rândurile clasamentului cresc cu ecranul (clamp pe vh): strâns la
360, aerisit la 440. Clasamentul are `overflow: auto` doar ca plasă sub 360px.
Rândul de jos e familia butoanelor din bara de jos de pe desktop (`.nav-bar-btn`,
măsurat: gradient auriu translucid, ramă 0.8px, colţ 12px, etichetă 15px/800
uppercase, linia aurie de 2px jos prin ::after). Cerut de user: „butoanele
style ca la panel footer desktop", „vezi că au un glow jos". Comutatorul
„Joacă iar automat" nu mai e switch gri, e pastilă din aceeaşi familie —
aprins = auriu plin, ca „Joacă din nou". Numărătoarea „Joc nou în 5s" stă în
dreapta comutatorului, nu peste el (ambele erau în aceeaşi arie, se suprapuneau).
`.d-none` rămâne mai tare decât `display: inline-flex !important` de aici
(regula explicită de la final) — altfel reapărea „Intră în joc" la jucători.
Măsurat pe bancul iframe 740×360, 800×360, 844×390 şi 956×440: zero text tăiat,
zero suprapunere, zero derulare. Vine DUPĂ blocul `(max-width: 991px)` de mai
sus intenţionat — aceeaşi specificitate, câştigă ultimul. */
@media (orientation: landscape) and (max-height: 500px) {
#gameEndModal { padding: 6px !important; }
#gameEndModal .modal-container.game-end-modal {
width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important;
margin: 0 !important; border-radius: 14px !important; overflow: hidden !important;
border: 1px solid rgba(212, 165, 68, .45) !important;
box-shadow: 0 0 0 1px rgba(212, 165, 68, .12) inset, 0 20px 60px rgba(0, 0, 0, .6) !important;
}
#gameEndModal .modal-body {
display: grid !important;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) auto auto !important;
grid-template-areas:
"titlu rezumat"
"clasament stats"
"clasament oferta"
"revansa actiuni" !important;
align-content: stretch !important;
gap: clamp(3px, calc((100vh - 350px) / 12), 8px) clamp(8px, 2vw, 16px) !important;
padding: clamp(5px, calc((100vh - 350px) / 10), 12px) clamp(8px, 2vw, 16px) !important;
height: 100% !important; max-height: none !important; overflow: hidden !important;
}
/* plasa pentru orfani: orice copil necunoscut ia un rând întreg, nu naşte piste implicite */
#gameEndModal .modal-body > * { grid-column: 1 / -1; }
/* titlu + trofeu, centrate peste clasament */
#gameEndModal #resultTitleModal {
grid-area: titlu !important; align-self: center !important; justify-self: center !important;
margin: 0 !important; padding-left: 40px !important; font-size: clamp(16px, 4.2vh, 20px) !important; line-height: 1.2 !important;
}
#gameEndModal #resultAnimationModal {
grid-area: titlu !important; justify-self: start !important; align-self: center !important;
width: 34px !important; height: 34px !important; font-size: 30px !important; line-height: 34px !important; margin: 0 !important;
}
#gameEndModal #resultRankingModal {
grid-area: clasament !important; width: 100% !important; margin: 0 !important;
align-self: stretch !important; min-height: 0 !important; overflow: hidden auto !important;
}
#gameEndModal .score-row { padding: clamp(2px, calc((100vh - 340px) / 16), 5px) 10px !important; margin: 0 0 clamp(2px, calc((100vh - 340px) / 16), 5px) !important; }
#gameEndModal .score-breakdown span, #gameEndModal .score-balance { line-height: clamp(12px, 3.3vh, 14px) !important; }
#gameEndModal .score-breakdown { margin-top: clamp(1px, .5vh, 3px) !important; padding-top: clamp(1px, .5vh, 3px) !important; }
/* dreapta: rezumat sus, statisticile umplu restul */
#gameEndModal .game-end-summary-tiles { grid-area: rezumat !important; justify-content: center !important; align-self: center !important; margin: 0 !important; }
#gameEndModal #resultStatsModal {
grid-area: stats !important; align-self: stretch !important; min-height: 0 !important;
display: flex !important; flex-direction: column !important; justify-content: stretch !important;
background: rgba(255, 255, 255, .03) !important; border-radius: 10px !important; overflow: hidden !important;
}
#gameEndModal .result-stat { flex: 1 1 0 !important; min-height: 0 !important; align-items: center !important; padding: clamp(3px, 1.2vh, 8px) 12px !important; }
#gameEndModal .result-stat-label { font-size: clamp(11px, 2.8vh, 13px) !important; }
#gameEndModal .result-stat-value { font-size: clamp(12px, 3.2vh, 15px) !important; }
#gameEndModal #mpOfferInModal { grid-area: oferta !important; margin: 0 !important; }
/* rândul de jos */
#gameEndModal .result-actions {
grid-area: actiuni !important; justify-self: center !important; width: auto !important;
justify-content: center !important; align-items: center !important; gap: 8px !important; margin: 0 !important; flex-wrap: nowrap !important;
}
#gameEndModal .auto-rematch-toggle, #gameEndModal #autoRematchCountdownModal {
grid-area: revansa !important; justify-self: start !important; align-self: center !important; margin: 0 !important;
}
#gameEndModal .result-actions > button,
#gameEndModal .auto-rematch-toggle label,
#gameEndModal #autoRematchCountdownModal {
display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
height: clamp(30px, 7.5vh, 36px) !important; padding: 0 clamp(12px, 2.6vw, 22px) !important; margin: 0 !important;
border-radius: 12px !important; box-sizing: border-box !important; cursor: pointer !important;
background: linear-gradient(rgba(212, 165, 68, .14), rgba(212, 165, 68, .05)) !important;
border: 0.8px solid rgba(212, 165, 68, .45) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18) !important;
color: rgba(244, 236, 216, .6) !important;
font-size: clamp(12px, 3vh, 14px) !important; font-weight: 800 !important; letter-spacing: .4px !important;
text-transform: uppercase !important; white-space: nowrap !important; line-height: 1 !important;
position: relative !important; overflow: hidden !important;
transition: background .2s, border-color .2s, color .2s !important;
}
#gameEndModal .result-actions > button span,
#gameEndModal .auto-rematch-toggle label span:not(.rematch-switch) { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; color: inherit !important; }
#gameEndModal .result-actions > button .material-symbols-rounded,
#gameEndModal .auto-rematch-toggle label .material-symbols-rounded { font-size: 16px !important; }
/* „aprins" = butonul activ din bară */
#gameEndModal #playAgainBtnModal,
#gameEndModal #joinGameBtnModal,
#gameEndModal #autoRematchCountdownModal,
#gameEndModal .auto-rematch-toggle label:has(.rematch-switch.active) {
background: linear-gradient(rgba(212, 165, 68, .28), rgba(212, 165, 68, .12)) !important;
border-color: rgba(212, 165, 68, .75) !important; color: rgb(212, 165, 68) !important;
}
#gameEndModal .result-actions > button:hover, #gameEndModal .auto-rematch-toggle label:hover { border-color: rgba(212, 165, 68, .75) !important; color: rgb(212, 165, 68) !important; }
/* glow-ul de jos: linia aurie de 2px a butoanelor din bară */
#gameEndModal .result-actions > button::after,
#gameEndModal .auto-rematch-toggle label::after,
#gameEndModal #autoRematchCountdownModal::after {
content: '' !important; position: absolute !important; bottom: 0 !important; top: auto !important; left: 10px !important; right: 10px !important;
width: auto !important; height: 2px !important; border-radius: 2px !important; pointer-events: none !important; z-index: 1 !important; transform: none !important;
background: linear-gradient(90deg, transparent, rgba(212, 165, 68, .8), transparent) !important;
}
/* comutatorul din pastilă */
#gameEndModal .auto-rematch-toggle { padding: 0 !important; margin: 0 !important; }
#gameEndModal .auto-rematch-toggle label { padding-left: 8px !important; }
#gameEndModal .rematch-switch {
width: 32px !important; height: 17px !important; border-radius: 999px !important; flex: 0 0 auto !important;
background: rgba(0, 0, 0, .45) !important; border: 1px solid rgba(212, 165, 68, .4) !important; box-sizing: border-box !important;
}
#gameEndModal .rematch-switch::after { width: 11px !important; height: 11px !important; top: 2px !important; left: 2px !important; background: rgba(244, 236, 216, .7) !important; }
#gameEndModal .rematch-switch.active { background: linear-gradient(135deg, #d4a544, #f0d075) !important; border-color: #f0d075 !important; }
#gameEndModal .rematch-switch.active::after { background: #2a1b0e !important; transform: translateX(15px) !important; }
/* numărătoarea: la capătul din dreapta al ariei, lângă comutator */
#gameEndModal #autoRematchCountdownModal { justify-self: end !important; cursor: default !important; }
#gameEndModal #autoRematchCountdownModal[style*="none"] { display: none !important; }
/* butoanele ascunse din JS după rol (Intră în joc / Joacă din nou) rămân ascunse */
#gameEndModal .result-actions > button.d-none { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
MASA ÎN PORTRET — cardurile adversarilor + contorul teancului
07-09-2026, măsurat la 360×740, masă de 4, spectator.
1. Numele adversarului se tăia („sbot_s…"): cardul are 107px, rândul de
informaţii 97; avatar 24 + gap 4 + nume + gap 4 + contor 22 → numelui îi
rămâneau 43px pentru 62–75px de text. Acum gap 2, contor 18, font 8,5 şi
voie pe două rânduri (`word-break: break-all` — numele n-au spaţii):
12 litere pe un rând, 14 pe două. Nimic tăiat.
Selectorii poartă `body.game-active`/`body.mp-game-active` fiindcă
regulile din `remi-pro.css` (~16304-16336) sunt scrise aşa, cu
`!important`, şi (0,3,1) bate `html body .a .b` (0,2,2).
5. Cardul: padding 4 + info 24 + gap 4 + piese 28 = 60 în 56 (`overflow:
hidden`) → şirul de piese tăiat 4px. Padding 2 + gap 2 = 56, iar rândul
grilei primeşte 58 (vezi `.game-play-view` mai sus, ~1618).
4. Contorul teancului (`#pileCount`): `absolute; bottom: -16px` în
`#drawPile`, iar `#pileArea` are `overflow: hidden` → 11px pe jumătate
sub margine, practic invizibil. Acum lângă teanc, centrat pe verticală,
12px (pileArea are 20px liberi în dreapta teancului).
Verificat în PEISAJ cu regulile pornite: identic cu starea de dimineaţă
(carduri 74, gol 10, nume 8px pe un rând, contor la locul vechi). */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
html body.game-active .opponent-area,
html body.mp-game-active .opponent-area { padding: 2px 4px !important; gap: 2px !important; }
html body.game-active .opponent-area .opponent-info,
html body.mp-game-active .opponent-area .opponent-info { gap: 2px !important; }
html body.game-active .opponent-area .opponent-name,
html body.mp-game-active .opponent-area .opponent-name {
max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important;
font-size: 8.5px !important; line-height: 1.1 !important; letter-spacing: -0.3px !important;
white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
word-break: break-all !important;
}
html body.game-active .opponent-area .opponent-tiles-count,
html body.mp-game-active .opponent-area .opponent-tiles-count {
min-width: 18px !important; width: auto !important; padding: 0 3px !important;
font-size: 8px !important; flex: 0 0 auto !important;
}
/* margine 3 şi font 11, nu 6/12: teancul se termină la R134, aria la R154 —
cu 6/12 contorul ajungea la R157 şi îi tăia 3px `overflow: hidden`. */
html body #pileCount {
bottom: auto !important; top: 50% !important; left: 100% !important;
transform: translateY(-50%) !important; margin-left: 3px !important;
font-size: 11px !important; line-height: 1 !important;
}
}
/* ── Contorul teancului în PEISAJ (16-09-2026, userul: „nu se vede corect nr. de piese în teanc") ──
Regula de mai sus e doar pentru portret. În peisaj contorul rămânea sub teanc (`bottom: -16px`),
între T332 şi B348, dar `.sidebar-section-piles` (overflow: hidden) se termină la B342 → cifra
tăiată pe jumătate. În dreapta teancului nu e loc (teancul umple secţiunea, 5px liberi), dar
deasupra lui sunt 14px liberi: contorul stă acolo, în stânga (T283–B294, măsurat la 844×390). */
@media (orientation: landscape) and (max-height: 500px) {
html body #pileCount {
bottom: auto !important; top: -13px !important; left: 3px !important;
transform: none !important; font-size: 11px !important; line-height: 1 !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
ACCENTELE AURII DIN LOBBY, PE MOBIL — ambele orientări (07-09-2026)
Userul, după varianta de desktop: „ce frumos se vede, ar trebui să facem şi
mobil ambele orientări la fel". Pe desktop (remi-pro.css ~26946+) cutia
lobby-ului, paginarea şi butoanele din dock au linii aurii de 2px
(gradient transparent→auriu→transparent). Aici, aceleaşi, cu două
deosebiri dictate de structură:
- `.lobby-view` pe mobil e SCROLLER (overflow-y auto), deci liniile sus/jos
sunt `position: sticky` (absolute ar fi plecat cu derularea);
- butoanele din dock au `::before` şi `::after` deja folosite (hover/tap),
deci liniile lor sunt umbre interioare (`inset 0 1px` / `inset 0 -2px`)
+ glow discret; bordura devine aurie .45 ca pe desktop (era albastră).
Verificat la 360×740 şi 844×390: lobby before/after sticky 2px, dock
before 2px, paginare before 2px, butoane bordură aurie .45. */
@media (max-width: 991px) {
html body.game-menu .lobby-view::before,
html body.game-menu .lobby-view::after {
content: ''; position: sticky; display: block; flex: 0 0 2px; height: 2px;
width: calc(100% - 52px); margin: 0 26px; z-index: 4; pointer-events: none; border-radius: 2px;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent);
}
html body.game-menu .lobby-view::before { top: 0; }
html body.game-menu .lobby-view::after { bottom: 0; }
html body.game-menu .lobby-pagination { position: relative !important; }
html body.game-menu .lobby-pagination::before {
content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 2px; border-radius: 2px; z-index: 4; pointer-events: none;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent);
}
html body.game-menu #navRail::before {
content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; z-index: 2; pointer-events: none; border-radius: 2px;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent);
}
html body.game-menu #navRail .nav-bar-btn {
border-color: rgba(var(--primary-rgb, 212, 165, 68), .45) !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35),
inset 0 -2px 0 rgba(var(--primary-rgb, 212, 165, 68), .6),
0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
/* ca pe desktop: gradient auriu şi rază 12 (mobilul avea fundal none, rază 9) */
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .14), rgba(var(--primary-rgb, 212, 165, 68), .05)) !important;
border-radius: 12px !important;
}
/* Footerul (dock-ul) ca pe desktop — userul: „footer nu este la fel ca desktop".
Desktop (`#navRail`, remi-pro.css): plutitor, retras 12px lateral / 10px jos,
rază 20, bordură aurie .3, fundal (24,15,8)→(18,11,6), umbră mare + linie
aurie interioară. Mobilul avea bara lipită de margini, fără rază/bordură,
fundal mai maroniu (58,35,16), umbră mică. Aici: retras 8px / 6px, rază 16
(ecranul e mai mic), restul identic. Lobby-ul se termină sub bară oricum
(B684 la 740, bara T653), deci retragerea nu lasă goluri în conţinut.
Verificat 360×740 şi 844×390: nimic din bară nu iese, butoanele întregi. */
html body.game-menu #navRail {
left: 8px !important; right: 8px !important; width: auto !important; bottom: 6px !important;
border-radius: 16px !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .3) !important;
background: linear-gradient(rgb(24, 15, 8), rgb(18, 11, 6)) !important;
box-shadow: 0 -10px 34px -10px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .1) !important;
}
/* Header-ul din lobby ca pe desktop — userul: „header mobil nu este rotunjit ca
desktop, sunt mai multe diferenţe de fineţe". Desktop (`.top-bar`): plutitor
(margin 8px 12px 6px), rază 18, gradient (35,22,11)→(24,15,8), umbră
0 8px 26px -10px + linie aurie interioară, ::after = linie aurie .45 JOS
(L18/R18). Mobilul avea bara lipită, rază 0, textură cu dungi la 45°, iar
::after era o linie gălbuie SUS. Aici: margin 6px 8px 4px, rază 14 (ecran
mic), restul identic. Doar în lobby: la masă header-ul rămâne plat — acolo
fiecare pixel de înălţime contează (grila mesei e legată de 100vh).
Verificat 360×740 şi 844×390: bară 30px la T6–B36, lobby la 4px sub ea,
nimic ieşit din bară. */
html body.game-menu .top-bar {
margin: 6px 8px 4px !important; width: auto !important; border-radius: 14px !important;
background: linear-gradient(rgb(35, 22, 11) 0%, rgb(24, 15, 8) 100%) !important;
box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .1) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important; overflow: hidden !important;
}
html body.game-menu .top-bar::after {
top: auto !important; bottom: 0 !important; left: 18px !important; right: 18px !important; width: auto !important; height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .45), transparent) !important;
}
}
/* ── Reclamele din lobby, în PEISAJ: erau tăiate sus şi jos (07-09-2026) ──
Containerul (`#lobbyAdLeft/Right`) are 160×310 (T30–B340), dar cardul
(`.lobby-ad-card`, remi-pro.css ~3112) are `min-height: 480px` — desktop —
şi, centrat, ieşea 55px sus (eticheta „Promo" şi jumătate din pictogramă) şi
85px jos („Joacă acum" la T351, sub dock). Raportat de user: „reclamele
landscape nu se încadrează, sunt tăiate". Acum cardul ia înălţimea
containerului, conţinutul se strânge (pictogramă 58→40, nume 15px, slogan
10px, buton 11px) — nimic ascuns. Măsurat: card 144×286 în 310, toţi cei 5
copii înăuntru, butonul la T264–B318. Portretul nu e atins. */
@media (orientation: landscape) and (max-width: 991px) {
html body.game-menu .lobby-ad-card {
/* max-height din viewport, nu 100%: containerul (`#lobbyAdLeft`) coboară sub
dock-ul plutitor (B350 vs dock T330 la 390 înălţime, după ce header-ul
a primit margini). 118 = header 30 + margini 10 + card top 12 + dock 54 +
6 jos + 6 aer. Măsurat: card B324, dock T330. */
height: 100% !important; max-height: calc(100vh - 118px) !important; min-height: 0 !important;
margin: 0 !important; top: auto !important; transform: none !important;
display: flex !important; flex-direction: column !important; align-items: center !important;
justify-content: space-between !important; padding: 10px 8px !important; gap: 4px !important;
box-sizing: border-box !important;
}
/* containerul e coloană flex cu `justify-content: center` — centrat, cardul plafonat
cobora tot sub dock (B331 vs T330). Aliniat sus: card T52–B324, dock T330. */
html body.game-menu #lobbyAdLeft, html body.game-menu #lobbyAdRight { justify-content: flex-start !important; }
html body.game-menu .lobby-ad-card .ad-label { font-size: 8px !important; padding: 2px 6px !important; position: static !important; margin: 0 !important; }
html body.game-menu .lobby-ad-card .material-symbols-rounded {
font-size: 40px !important; width: 40px !important; height: 40px !important; line-height: 40px !important; margin: 0 !important;
}
html body.game-menu .lobby-ad-card .ad-name { font-size: 15px !important; line-height: 1.1 !important; margin: 0 !important; }
html body.game-menu .lobby-ad-card .ad-slogan { font-size: 10px !important; line-height: 1.25 !important; margin: 0 !important; }
html body.game-menu .lobby-ad-card .ad-cta {
font-size: 11px !important; padding: 8px 10px !important; min-height: 0 !important; height: auto !important; margin: 0 !important; width: 100% !important;
}
}
/* portret: 3 butoane în 338px = 108 fiecare. La font 12 „Joacă Din Nou" ieşea
„JOACA DIN NO" — regula veche de la ~1803 are `overflow: hidden` pe buton şi
TĂIA litera (măsurat pe span părea întreg; cel care taie e butonul).
La font 10 + iconiţă 14 + padding 4: 104 ≤ 108, toate literele întregi. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
#gameEndModal .result-actions > * { font-size: 10px !important; padding: 4px 4px !important; gap: 4px !important; letter-spacing: 0 !important; }
#gameEndModal .result-actions > * .material-symbols-rounded { font-size: 14px !important; }
}
/* ===== DOCK-UL DIN LOBBY CA PE DESKTOP (remi-pro.css ~26760) — ambele orientări =====
Desktop: pastile de stare (fundal .06 / bordură .22 / rază 14), în lobby DOAR
avatar + balanţă (cronometrul, runda şi scorul sunt de joc), etichete aurii
majuscule, FAB rotund cu inel auriu, logo cu inel. Verificat 07-09 pe 844×390 şi 360×740. */
@media (max-width: 991px) {
html body.game-menu .status-bar > div {
background: rgba(var(--primary-rgb, 212, 165, 68), .06) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important;
border-radius: 14px !important; padding: 3px 10px !important; gap: 8px !important;
width: auto !important; flex: 0 0 auto !important; font-size: 11px !important; height: auto !important;
}
html body.game-menu .status-bar > div:first-child > .status-item:not(.user-avatar-badge):not(.balance-badge) { display: none !important; }
html body.game-menu .nav-bar-label {
font-weight: 800 !important; letter-spacing: .4px !important; text-transform: uppercase !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
html body.game-menu .brand-logo {
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .35) !important; border-radius: 10px !important;
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 212, 165, 68), .06) !important;
}
html body.game-menu #fabBtn {
width: 44px !important; height: 44px !important; border-radius: 50% !important; position: relative !important;
top: -12px !important; flex: 0 0 auto !important; padding: 0 !important; overflow: hidden !important;
border: 2px solid rgba(var(--primary-rgb, 212, 165, 68), .95) !important;
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 212, 165, 68), .12), 0 4px 14px rgba(var(--primary-rgb, 212, 165, 68), .3) !important;
}
html body.game-menu #fabBtn .nav-fab-avatar { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; }
}
/* peisaj: un singur rând ca pe desktop — stare stânga · butoane centru · XP dreapta.
Măsurat: dock 828×54, stare L9–R142, butoane 255 centrate, XP R835, FAB 44 T321 (iese 9px deasupra). */
@media (orientation: landscape) and (max-width: 991px) {
html body.game-menu #navRail {
flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
gap: 10px !important; height: 54px !important; min-height: 54px !important; padding: 4px 12px !important;
}
html body.game-menu .status-bar { display: contents !important; }
html body.game-menu .status-bar > div:first-child { order: 1; }
html body.game-menu .nav-bar-primary {
order: 2; max-width: 520px !important; gap: 6px !important; height: 40px !important;
padding: 0 !important; margin: 0 !important; width: auto !important; flex: 0 1 auto !important;
}
html body.game-menu .status-bar > .status-actions { order: 3; }
html body.game-menu .nav-bar-btn { flex: 1 1 auto !important; width: auto !important; height: 32px !important; padding: 0 14px !important; }
html body.game-menu .nav-bar-label { font-size: 12px !important; }
}
/* portret: rândul de stare rămâne deasupra butoanelor, deci FAB-ul ridicat acoperea
„Lv.1"; aici stă în linie cu butoanele. Stare stânga, XP dreapta. */
@media (orientation: portrait) and (max-width: 991px) {
html body.game-menu #fabBtn { top: -3px !important; }
html body.game-menu .nav-bar-primary { align-items: center !important; }
html body.game-menu .status-bar { justify-content: space-between !important; padding: 0 2px !important; }
}
/* ===== AUDIT PSEUDO-ELEMENTE LOBBY, MOBIL vs DESKTOP (07-09-2026) =====
Userul: „footer butoane peisaj nu este centrat; mai sunt diferenţe pseudo-elemente;
fă audit reclame, paginare, panel". Inventar (desktop remi-pro.css 26935–27010):
1. dock peisaj: flex space-between cu laturi inegale (stare 134 vs XP 243) →
butoanele erau la 367 faţă de mijlocul barei 422 → grilă 1fr auto 1fr;
2. header: sclipirea animată `::before` era încă activă (desktop o ascunde) şi în
peisaj linia aurie de jos era stinsă de `@media (max-height:400px)` (~17617);
3. butoane dock: pe desktop linia de jos e `::after` (nu umbră) — la fel aici
(înlocuieşte în lobby expanderul tactil invizibil de la ~17684; butoanele au
oricum ≥44px prin `hover:none`);
4. reclame: încă textura radială + rama interioară → liniile aurii 2px (L16/R16,
cardul are 144px);
5. panelul Mese/Chat: ecran plin, rază 0, fără bordură/linii → aceeaşi cutie ca
header/footer (retras 6/8, rază 16, bordură .3, linii aurii L26/R26).
Verificat 844×390 şi 360×740, cu panelul deschis şi închis, paginarea are linia. */
@media (max-width: 991px) {
html body.game-menu .top-bar::before { display: none !important; }
html body.game-menu .top-bar::after { display: block !important; content: '' !important; }
html body.game-menu #navRail .nav-bar-btn {
position: relative !important; overflow: hidden !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35), 0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
}
html body.game-menu #navRail .nav-bar-btn::after {
content: '' !important; position: absolute !important; bottom: 0 !important; top: auto !important; left: 10px !important; right: 10px !important;
width: auto !important; height: 2px !important; border-radius: 2px !important; pointer-events: none !important; z-index: 1 !important; transform: none !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .8), transparent) !important;
}
html body .lobby-ad-card::before,
html body .lobby-ad-card::after {
content: '' !important; position: absolute !important; inset: auto !important; left: 16px !important; right: 16px !important;
width: auto !important; height: 2px !important; border-radius: 2px !important; z-index: 3 !important; pointer-events: none !important;
animation: none !important; transform: none !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent) !important;
}
html body .lobby-ad-card::before { top: 0 !important; bottom: auto !important; }
html body .lobby-ad-card::after { bottom: 0 !important; top: auto !important; }
html body.game-menu #contextPanel {
inset: 6px 8px 6px 8px !important; width: auto !important; height: auto !important; max-height: none !important;
border-radius: 16px !important; border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .3) !important; overflow: hidden !important;
background: linear-gradient(rgb(24, 15, 8), rgb(18, 11, 6)) !important;
box-shadow: 0 22px 54px -26px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .08) !important;
}
html body.game-menu #contextPanel::before,
html body.game-menu #contextPanel::after {
content: '' !important; position: absolute !important; left: 26px !important; right: 26px !important; height: 2px !important;
border-radius: 2px !important; z-index: 5 !important; pointer-events: none !important;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent) !important;
}
html body.game-menu #contextPanel::before { top: 0 !important; }
html body.game-menu #contextPanel::after { bottom: 0 !important; }
}
@media (orientation: landscape) and (max-width: 991px) {
html body.game-menu #navRail {
display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
align-items: center !important; column-gap: 10px !important;
}
html body.game-menu .status-bar > div:first-child { grid-column: 1; justify-self: start; }
html body.game-menu .nav-bar-primary { grid-column: 2; justify-self: center; }
html body.game-menu .status-bar > .status-actions { grid-column: 3; justify-self: end; }
}
/* ===== FINEŢE LOBBY, MOBIL = DESKTOP (07-09-2026, diferenţe măsurate automat) =====
Userul: „mai vezi diferenţe, verifică tu" + „mai sunt butoane în header să le
facem la fel". Am colectat pe desktop (1300×630) fundal/bordură/rază/umbră/
padding/font pentru fiecare piesă din lobby şi le-am comparat cu mobilul
(844×390). Rămăseseră: lobby-ul NU era cutie (fără gradient/bordură/rază/
umbră — desktop 26814), bara de filtre şi paginarea fără fundal şi colţuri
(26886/26907), carduri rază 10 nu 14 şi fără dunga inset de stare (26899),
Intră Rapid/Creează fără glow şi 800 (26840), chips 600 nu 800, butonul de
paginare dezactivat NU era estompat, balanţa 9.5px fără umbră (26772),
eticheta butonului ACTIV din dock albastră (#7ea6f5, ~497) nu aurie, FAB cu
bordură 1.6 nu 2.4, header-ul cu bordură (desktop 0) şi butoanele din header
(„Jocuri", „Roata zilnică" = `.ds-hbtn` din daily-spin.css: 36px, pictogramă
+ text) fără pictograme şi 24px (regula de la ~2098 le ascundea în lobby).
Verificat 844×390 şi 360×740: nimic ieşit din header, paginarea lipită de
marginile cutiei, portret cutie retrasă 8px ca header/footer. */
@media (max-width: 991px) {
html body.game-menu .lobby-view {
background: linear-gradient(165deg, rgba(26, 19, 11, .5), rgba(14, 12, 10, .6)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important; border-radius: 16px !important;
box-shadow: 0 22px 54px -26px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .08) !important;
}
html body.game-menu .lobby-filter-bar {
margin: 0 -8px !important; padding: 4px 8px 6px !important; border-radius: 16px 16px 0 0 !important;
background: linear-gradient(rgba(16, 13, 9, .99) 62%, rgba(16, 13, 9, .6) 85%, transparent) !important;
}
html body.game-menu .lobby-filter-bar button { font-weight: 800 !important; }
html body.game-menu .lobby-filter, html body.game-menu [class*=lobby-chip] { border-radius: 5px !important; }
html body.game-menu .lobby-pagination {
margin: auto -8px 0 !important; padding: 8px 8px 10px !important; gap: 4px !important; border-radius: 0 0 16px 16px !important;
background: linear-gradient(0deg, rgba(16, 13, 9, .99) 60%, rgba(16, 13, 9, .55) 82%, transparent) !important;
border-top: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .14) !important;
}
/* avea lăţime fixă 228px centrată → nu ajungea la marginile cutiei (L17 vs L8) */
html body.game-menu #lobbyView .lobby-pagination { align-self: stretch !important; width: auto !important; max-width: none !important; }
html body.game-menu .lobby-pagination button { border-radius: 10px !important; font-weight: 800 !important; }
html body.game-menu .lobby-pagination button:disabled { opacity: .35 !important; }
html body.game-menu .lobby-card { border-radius: 14px !important; border-color: rgba(255, 255, 255, .15) !important; }
html body.game-menu .lobby-card.lc-waiting { box-shadow: inset 3px 0 0 0 rgba(34, 197, 94, .7) !important; }
html body.game-menu .lobby-card.lc-playing { box-shadow: inset 3px 0 0 0 rgba(245, 158, 11, .7) !important; }
html body.game-menu .lobby-card.lc-full { box-shadow: inset 3px 0 0 0 rgba(107, 114, 128, .7) !important; }
html body.game-menu .lobby-card button { border-radius: 9px !important; }
html body.game-menu .lobby-btn { border-radius: 8px !important; font-weight: 800 !important; box-shadow: 0 0 13px -1px rgba(var(--primary-rgb, 212, 165, 68), .41) !important; }
html body.game-menu #balanceBadge { font-size: 11px !important; padding: 2px 7px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .15) !important; }
html body.game-menu #navRail .nav-bar-btn.active .nav-bar-label { color: rgb(var(--primary-rgb, 212, 165, 68)) !important; }
html body.game-menu #navRail #fabBtn {
border-width: 2.4px !important; background-color: transparent !important;
box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 212, 165, 68), .12), 0 4px 14px rgba(var(--primary-rgb, 212, 165, 68), .3) !important;
}
html body.game-menu .top-bar { border: 0 !important; }
html body.game-menu .brand-logo { border-radius: 12px !important; }
html body.game-menu .top-bar .ds-cluster { height: auto !important; }
html body.game-menu .top-bar .ds-cluster .ds-hbtn { height: 26px !important; max-height: 26px !important; line-height: 26px !important; padding: 0 10px 0 8px !important; gap: 5px !important; }
html body.game-menu .top-bar .ds-cluster .ds-hico { display: inline-block !important; font-size: 14px !important; }
html body.game-menu .top-bar .ds-cluster .ds-hico--suit { display: inline-block !important; font-size: 15px !important; }
html body.game-menu .top-bar .ds-cluster .ds-htxt { font-size: 11px !important; }
}
@media (orientation: portrait) and (max-width: 991px) {
/* cutia lobby-ului retrasă 8px ca header/footer (era lipită de margini, L0–R360) */
html body.game-menu .lobby-view { margin: 0 8px !important; width: auto !important; max-width: none !important; }
}
/* ===== HEADER: butoanele Jocuri / Roata zilnică = stilul butoanelor din footer (07-09-2026) =====
Userul: „butoanele din header nu sunt ca cele din footer". Erau pastilele
din daily-spin.css (Jocuri gri-albastru, Roata aur pe lemn, rază 999).
Acum exact ca `.nav-bar-btn` din lobby (~2937): gradient auriu .14→.05,
bordură aurie .45, rază 12, linie aurie sus (inset 0 1px) şi jos (inset 0 -2px)
+ glow, text auriu majuscule 800. Liniile sunt umbre interioare, NU ::after —
`.ds-hbtn--ready::after` e licărul roţii şi trebuie lăsat în pace.
Verificat 844×390 (Jocuri 79px, Roata zilnică 135px) şi 360×740 (Roata 84px), nimic ieşit. */
@media (max-width: 991px) {
html body.game-menu .top-bar .ds-cluster .ds-hbtn,
html body.game-menu .top-bar .ds-cluster .ds-hbtn--lobby,
html body.game-menu .top-bar .ds-cluster .ds-hbtn--gold {
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .14), rgba(var(--primary-rgb, 212, 165, 68), .05)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .45) !important; border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35),
inset 0 -2px 0 rgba(var(--primary-rgb, 212, 165, 68), .6),
0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
}
html body.game-menu .top-bar .ds-cluster .ds-htxt {
color: rgb(var(--primary-rgb, 212, 165, 68)) !important; font-weight: 800 !important;
letter-spacing: .4px !important; text-transform: uppercase !important; font-size: 11px !important;
}
html body.game-menu .top-bar .ds-cluster .ds-hico--suit { color: rgb(var(--primary-rgb, 212, 165, 68)) !important; }
}
/* peisaj: „Lv.1 + bara XP + becul" (243px) intrau peste MENU — coloana dreaptă a
grilei are ~220px. Containerul XP avea min-width 120 şi bara 50 → elastice.
Măsurat după: MENU R593, Lv de la L603, becul înăuntru (R814 < R823). */
@media (orientation: landscape) and (max-width: 991px) {
html body.game-menu .status-bar > .status-actions { min-width: 0 !important; max-width: 100% !important; gap: 6px !important; padding: 3px 8px !important; overflow: hidden !important; }
html body.game-menu .status-actions .xp-bar-container { min-width: 0 !important; flex: 1 1 auto !important; gap: 6px !important; }
html body.game-menu .status-actions .xp-progress-track { min-width: 24px !important; flex: 1 1 24px !important; }
html body.game-menu .status-actions #xpLabel { white-space: nowrap !important; }
}
/* ===== HEADER = FOOTER, identic, măsurat proprietate cu proprietate (07-09-2026) =====
Userul: „butoanele din header nu sunt la fel ca cele din footer; gândeşte
profesional, să nu avem diferenţe". Am comparat computed-style buton header
(`.ds-hbtn`) vs buton footer (`.nav-bar-btn` MESE): înălţime 26 vs 32,
padding 10/8 vs 14, gap 5 vs 3, text 11 vs 12, linia de jos umbră vs ::after,
şi footer-ul NU are pictogramă. Acum diff = {} (buton, text, linie):
32px, padding 0 14, gap 3, text 12/800 auriu majuscule, linia de jos ca
::before (::after e licărul roţii), fără pictograme. Header-ul creşte 30→40
ca să încapă 32 (era 26 într-o bară de 30). Suprascrie blocurile de mai sus
(26px + pictograme + umbra inset -2px) — aceeaşi specificitate, mai jos = câştigă.
Efect: tot ce e sub header coboară 10px → reclama peisaj plafonată la
calc(100vh - 128px) (era 118; B324 < dock 330) şi padding-ul de jos al
lobby-ului mărit (peisaj 40, portret 60) ca paginarea derulată la capăt să
rămână deasupra dock-ului (măsurat: peisaj B302/330, portret B633/670).
Verificat 844×390 şi 360×740, nimic ieşit din header. */
@media (max-width: 991px) {
html body.game-menu .top-bar { height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 8px !important; }
html body.game-menu .top-bar .ds-cluster .ds-hbtn,
html body.game-menu .top-bar .ds-cluster .ds-hbtn--lobby,
html body.game-menu .top-bar .ds-cluster .ds-hbtn--gold {
height: 32px !important; max-height: 32px !important; min-height: 28px !important; line-height: 12px !important;
padding: 0 14px !important; gap: 3px !important; font-size: 8px !important;
position: relative !important; overflow: hidden !important; color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35), 0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
}
html body.game-menu .top-bar .ds-cluster .ds-hbtn::before {
content: ''; position: absolute; bottom: 0; left: 10px; right: 10px; height: 2px; border-radius: 2px; pointer-events: none; z-index: 1;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .8), transparent);
}
html body.game-menu .top-bar .ds-cluster .ds-hico,
html body.game-menu .top-bar .ds-cluster .ds-hico--suit { display: none !important; }
html body.game-menu .top-bar .ds-cluster .ds-htxt { font-size: 12px !important; line-height: 12px !important; }
html body.game-menu .top-bar #dsChip.ds-hbtn--ready .ds-htxt::after {
font-size: 12px !important; font-weight: 800 !important; letter-spacing: .4px !important; text-transform: uppercase !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
}
@media (orientation: landscape) and (max-width: 991px) {
html body.game-menu .lobby-ad-card { max-height: calc(100vh - 128px) !important; }
html body.game-menu .lobby-view { padding-bottom: 40px !important; }
/* 16-09-2026 — userul: „reclamele nu se lungesc, rămâne spaţiu jos". Plafonul de mai
sus (100vh − 128) ţine cardul deasupra dock-ului plutitor — corect în lobby-ul normal
(măsurat la 956×440: card B374, dock T380). Dar în IMERSIV dock-ul şi header-ul
dispar, coloana ia tot ecranul (0..440) şi cardul rămânea tot la 312px → 116px goi
sub el. Fără dock nu mai e nimic de ocolit: cardul umple coloana, iar cei 40px de
padding rezervaţi dock-ului ies şi ei. Măsurat după: card 12..428 în coloana 0..440. */
html body.immersive-mode.game-menu .lobby-ad-card { max-height: none !important; height: 100% !important; }
html body.immersive-mode.game-menu .lobby-view { padding-bottom: 0 !important; }
}
@media (orientation: portrait) and (max-width: 991px) {
html body.game-menu .lobby-view { padding-bottom: 60px !important; }
}
/* ===== FOOTER: continuitate între orientări (07-09-2026) =====
Userul: „butoanele din footer să avem continuitate în toate orientările".
Diff computed-style peisaj vs portret arăta: etichetă 12px vs 10px, pastile de
stare 3/10 + 11px vs 1/4 + 10px, flex-direction row vs column. Acum, în ambele:
buton 32px border-box (era content-box → 34 în rect, header-ul e 32), padding
0 14, etichetă 12/12, pastile 3px 10px / 11px, XP elastic (bara se strânge) şi
în portret. Măsurat după: diff orientări = {}, header vs footer = {} (în afară
de font-size-ul elementului buton, 8 vs 9, invizibil — textul e în span).
Portret: 4 butoane + FAB încap în 318px, nimic ieşit. */
@media (max-width: 991px) {
html body.game-menu #navRail .nav-bar-btn {
flex-direction: row !important; box-sizing: border-box !important;
height: 32px !important; min-height: 32px !important; max-height: 32px !important;
padding: 0 14px !important; gap: 3px !important;
}
html body.game-menu #navRail .nav-bar-label { font-size: 12px !important; line-height: 12px !important; }
html body.game-menu #navRail #fabBtn { flex-direction: row !important; }
html body.game-menu #navRail .status-bar > div { padding: 3px 10px !important; font-size: 11px !important; min-height: 0 !important; height: auto !important; line-height: 16.5px !important; }
html body.game-menu #navRail .status-bar > .status-actions { min-width: 0 !important; max-width: 100% !important; gap: 6px !important; padding: 3px 8px !important; overflow: hidden !important; }
html body.game-menu #navRail .status-actions .xp-bar-container { min-width: 0 !important; flex: 1 1 auto !important; gap: 6px !important; }
html body.game-menu #navRail .status-actions .xp-progress-track { min-width: 24px !important; flex: 1 1 24px !important; }
}
/* ===== LA MASĂ: header + footer în aceeaşi rețetă aurie ca în lobby (07-09-2026) =====
Userul: „la masă nu mai sunt butoanele din footer la fel, ambele orientări… şi
nici header". Toate regulile de lobby de mai sus sunt legate de `body.game-menu`,
deci la masă butoanele rămâneau gri (MESE activ albastru). Aici aceeaşi rețetă
(gradient auriu .14→.05, bordură .45, rază 12, linie sus inset + linie jos
pseudo-element, glow, text auriu 800 majuscule, FAB cu inel) pe: butoanele din
dock, „← Mese", Jocuri/Roata din header. Înălţimile mesei NU se ating (dock 30
în peisaj / 81 în portret, butoane 28 / 34) — acolo fiecare pixel e al mesei.
Linia de jos e `::before` la butoanele din header (la `.ds-hbtn--ready` ::after
e licărul roţii; la „← Mese" ::before era doar un efect de hover).
Verificat spectator la masă de 3, 844×390 şi 360×740: nimic ieşit din bare. */
@media (max-width: 991px) {
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn,
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-hbtn,
html body:is(.game-active, .mp-game-active) .top-bar .mp-game-bar-leave {
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .14), rgba(var(--primary-rgb, 212, 165, 68), .05)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .45) !important; border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35), 0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
position: relative !important; overflow: hidden !important; color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn::after,
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-hbtn::before,
html body:is(.game-active, .mp-game-active) .top-bar .mp-game-bar-leave::before {
content: '' !important; position: absolute !important; bottom: 0 !important; top: auto !important; left: 10px !important; right: 10px !important;
width: auto !important; height: 2px !important; border-radius: 2px !important; pointer-events: none !important; z-index: 1 !important;
transform: none !important; opacity: 1 !important; animation: none !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .8), transparent) !important;
}
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-label,
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-htxt,
html body:is(.game-active, .mp-game-active) .top-bar .mp-game-bar-leave span:not(.material-symbols-rounded) {
color: rgb(var(--primary-rgb, 212, 165, 68)) !important; font-weight: 800 !important; letter-spacing: .4px !important; text-transform: uppercase !important;
}
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn.active {
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .28), rgba(var(--primary-rgb, 212, 165, 68), .12)) !important;
border-color: rgba(var(--primary-rgb, 212, 165, 68), .75) !important;
}
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn.active .nav-bar-label { color: rgb(var(--primary-rgb, 212, 165, 68)) !important; }
html body:is(.game-active, .mp-game-active) .top-bar .ds-cluster .ds-hico--suit,
html body:is(.game-active, .mp-game-active) .top-bar .mp-game-bar-leave .material-symbols-rounded { color: rgb(var(--primary-rgb, 212, 165, 68)) !important; }
html body:is(.game-active, .mp-game-active) #navRail #fabBtn {
border: 2px solid rgba(var(--primary-rgb, 212, 165, 68), .95) !important; border-radius: 50% !important; overflow: hidden !important; background: transparent !important;
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 212, 165, 68), .12), 0 3px 10px rgba(var(--primary-rgb, 212, 165, 68), .3) !important;
}
html body:is(.game-active, .mp-game-active) #navRail #fabBtn .nav-fab-avatar { border-radius: 50% !important; object-fit: cover !important; }
/* separatorul „|" orfan de după „REMI ETALAT" în lobby (remi-pro.css ~1150;
desktopul îl ascunde deja în lobby la ~27769) */
html body.game-menu .top-bar .brand-section::after { display: none !important; content: none !important; }
}
/* bara de stare la masă, în picioare, cu 3–4 scoruri (remi-pro.js `updateScoreDisplay`):
XP-ul avea min-width 56 şi împingea becul pe un al treilea rând; elastic ca în lobby.
Măsurat la masă de 3: 2 rânduri (41px), scoruri R200, XP L208–R322, bec R354. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
html body:is(.game-active, .mp-game-active) .status-bar .xp-bar-container { flex: 1 1 56px !important; min-width: 0 !important; max-width: 120px !important; }
html body:is(.game-active, .mp-game-active) .status-bar .xp-progress-track { min-width: 20px !important; flex: 1 1 20px !important; }
}
/* masă de 2 în PEISAJ (verificată 07-09 seara, spectator la „Masa lui Mirela"):
cardul singurului adversar se întindea pe toată coloana (133×229) cu verde gol
sub piese; acum îşi ţine înălţimea conţinutului (69px), iar teancul rămâne jos,
lângă mână (margin-top auto), unde e la îndemână. Nimic suprapus. */
@media (orientation: landscape) and (max-width: 991px) and (max-height: 599px) {
html body:is(.game-active, .mp-game-active) .game-play-view[data-players="2"] #lateralWrap .opponent-area { flex: 0 0 auto !important; }
html body:is(.game-active, .mp-game-active) .game-play-view[data-players="2"] #lateralWrap { justify-content: flex-start !important; }
}
/* ROTIREA la masă (07-09, cerut de user: „să nu se vadă elementele cum se
aranjează urât, până se aranjează corect"): `body.rotire-in-curs` e pusă de
`laRotire` (remi-pro.js, lângă `plaseazaTeancDupaOrientare`) la schimbarea
orientării şi scoasă după ce grila e reaplicată şi desenată. Stingere
instantă, revenire cu fade .28s. */
@media (max-width: 991px) {
html body:is(.game-active, .mp-game-active) .main-content { transition: opacity .28s ease; }
html body.rotire-in-curs .main-content { opacity: 0 !important; transition: none !important; }
}
/* bara de stare la masă, în picioare, cu 3–4 scoruri: „40/200 XP" se tăia din
dreapta (măsurat 07-09: scoruri 222px + XP 120 + bec 24 > 360). Numele au
scăzut la 6 litere în JS; aici XP-ul mai strâns: text 9px, bară min 16. */
@media (orientation: portrait) and (max-width: 991px), (orientation: landscape) and (max-width: 991px) and (min-height: 600px) {
html body:is(.game-active, .mp-game-active) .status-bar #xpLabel { font-size: 9px !important; white-space: nowrap !important; }
html body:is(.game-active, .mp-game-active) .status-bar #levelBadge { font-size: 9px !important; padding: 0 5px !important; }
html body:is(.game-active, .mp-game-active) .status-bar .xp-progress-track { min-width: 16px !important; flex: 1 1 16px !important; }
html body:is(.game-active, .mp-game-active) .status-bar .xp-bar-container { gap: 4px !important; flex: 1 1 40px !important; }
html body:is(.game-active, .mp-game-active) .status-bar .score-display { gap: 3px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
BARA DE ACŢIUNI ÎN PEISAJ — butoane de deget, cu text, cu loc fix (11-09-2026)
Peste blocul de la linia ~334, care le turtea la 22x22 cu iconiţă şi eticheta
ascunsă: „butonul e prea mic pentru deget", „userii nu înţeleg nimic din
butoane", „când dispare butonul se duc spre stânga ce aveam în dreapta".
Principii:
· TEMA BUTONULUI E CEA DE PE DESKTOP (remi-pro.css:22751 .chip-btn): pastilă
rază 28, ramă neagră 2px (aurie pe „sugerat"), majuscule, 800, Inter,
text alb cu umbră / închis pe auriu, degradeurile ORIGINALE. Aici se
schimbă doar mărimea. Fără iconiţe — se vedeau urât şi mâncau lăţime.
· FIECARE BUTON ARE LOCUL LUI. Ce nu se poate face acum (ra-fantoma, marcajul
jocului pentru „acţiune imposibilă", ascuns şi pe desktop la
remi-pro.css:28458) devine invizibil dar locul rămâne gol. Trage şi Aruncă
împart ultimul loc; cel imposibil iese din rând — fiind ultimul, nu mişcă
nimic din faţa lui.
· CONTRASTUL: blocul vechi făcea fondul negru-transparent dar păstra textul
închis gândit pentru auriu ⇒ scris negru pe negru. Fondurile temei rezolvă.
· SORTAREA nu e acţiune de tură: coloană verticală de 20px (pe orizontală
cerea 74px şi împingea butonul turei afară din scaun).
· CONTORUL ETALĂRII „(30pt/45)": remi-pro.js:4334 îl adaugă ca ultim copil al
lui #raActiuni; grila veche îi dădea un rând al lui, pe un singur rând
rămânea fără loc. Stă pe rândul de sus, deasupra butonului Etalează.
Bugetul scaunului la 956x440 (676px utili): poză 36 + date 132 + acţiuni
~358 (ia ce rămâne) + rând/rundă/ATU/ceas 141 + 3 goluri de 3. .ra-dr cere
44+34+19+34 + 3 goluri = 140; la 132 ieşea ceasul, la 155 ieşea butonul turei.
Verificat pe toate cele 5 faze ale turei: poziţii identice, nimic tăiat,
nimic în afara scaunului, butoanele nu calcă peste blocul din dreapta.
═══════════════════════════════════════════════════════════════════════════ */
/* puls elegant: lumină care respiră, fără să umfle butonul (raPuls îl mărea cu
scale(1.14) şi îi picta fondul peste culoarea temei) */
@keyframes raRespiro {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.45), 0 0 0 0 rgba(255,236,170,0); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.45), 0 0 16px 3px rgba(255,236,170,.42); }
}
@media (orientation: landscape) and (max-height: 500px) {
/* ── 1. scaunul: blocuri cu lăţime fixă, acţiunile iau ce rămâne ── */
#rlApron { gap: 3px !important; overflow: hidden !important; }
#rlApron > .ra-spacer { display: none !important; }
#rlApron > #raAvatar { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; }
#rlApron > .ra-mid { flex: 0 0 132px !important; width: 132px !important; gap: 1px !important; }
#rlApron > .ra-dr { flex: 0 0 141px !important; width: 141px !important; overflow: hidden !important; gap: 3px !important; }
/* „RÂNDUL " se scurtează cu „…" ca să încapă ATU-ul şi ceasul lângă el */
#rlApron .ra-dr #raRandul { flex: 0 1 44px !important; min-width: 0 !important; overflow: hidden !important; }
#rlApron #raNume, #rlApron #raRndCine { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#rlApron .ra-chips { gap: 3px !important; }
#rlApron .ra-chip { flex: 1 1 0 !important; min-width: 0 !important; padding: 2px 3px !important; font-variant-numeric: tabular-nums !important; overflow: hidden !important; }
/* ── 2. zona de acţiuni: un rând, fiecare buton cu locul lui ── */
#raActiuni { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 2px !important;
flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; grid-template-columns: none !important; overflow: visible !important; }
#rlApron #raActiuni > * { flex-shrink: 0 !important; }
#raActiuni .sort-btn { order: 1 !important; }
#raActiuni #btnEtalare { order: 2 !important; }
#raActiuni #btnLipire { order: 3 !important; }
#raActiuni #btnAtu { order: 4 !important; }
#raActiuni #btnDraw, #raActiuni #btnDiscard { order: 5 !important; }
/* sortarea: coloană verticală de 20px, locul ei e căptuşeala din stânga zonei */
#rlApron #raActiuni .sort-btn { flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: 15px !important; padding: 0 !important;
border-radius: 4px !important; opacity: .55 !important; position: absolute !important; left: 0 !important; }
#rlApron #raActiuni #sortByColor { top: 0 !important; }
#rlApron #raActiuni #sortByNumber { top: 17px !important; }
#rlApron #raActiuni #sortByMeld { top: 34px !important; }
#rlApron #raActiuni .sort-btn .material-symbols-rounded { font-size: 12px !important; }
#rlApron #raActiuni { position: relative !important; padding-left: 20px !important; align-items: flex-end !important; padding-bottom: 0 !important; align-self: stretch !important; height: auto !important; }
/* 13-09: zona de acţiuni a rămas cu două butoane (Etalează + Lipeşte), după ce
sortarea şi ATU-ul au ieşit din scaun. Măsurat: zona are 358px, butoanele
153 (84 + 69) ⇒ 205px de gol lipit în dreapta lor. Le strângem la mijloc, cu
un gol de 10 între ele, şi îi punem un plafon de 44 ca să nu umfle insula de
46. `justify-content` bate regula de la punctul 2 (flex-start) prin
specificitate — `#rlApron #raActiuni` faţă de `#raActiuni`.
`body:not(.spectator-mode)`: la spectator butoanele sunt inerte, de 20px,
cu golul strâns la 1px tocmai ca `.ra-dr` să nu iasă din rând (blocul de la
~2799); un gol de 10 acolo ar readuce bug-ul. */
body:not(.spectator-mode) #rlApron #raActiuni { justify-content: center !important; gap: 10px !important; max-height: 44px !important; }
/* contorul etalării, pe rândul de sus, deasupra butonului Etalează */
#rlApron #raActiuni .etalare-pts { position: absolute !important; left: 20px !important; top: 0 !important; margin: 0 !important; padding: 0 7px !important;
display: inline-block !important; height: 14px !important; line-height: 14px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .3px !important;
white-space: nowrap !important; opacity: 1 !important; pointer-events: none !important; font-variant-numeric: tabular-nums !important;
background: rgba(0,0,0,.78) !important; border: 1px solid rgba(233,196,90,.65) !important; border-radius: 8px !important; color: #ffe3a0 !important; text-shadow: 0 1px 2px rgba(0,0,0,.9) !important; }
/* pragul de 45 atins — verde */
#rlApron #raActiuni .etalare-pts.gata { background: rgba(6,46,26,.9) !important; border-color: #6ee7a8 !important; color: #9cffc9 !important; }
/* acţiunea imposibilă: loc gol, invizibil; Trage/Aruncă (acelaşi loc) ies din rând */
#raActiuni .action-btn-game.ra-fantoma, #raActiuni .action-btn-game[hidden] { visibility: hidden !important; }
#rlApron #raActiuni #btnDraw.ra-fantoma, #rlApron #raActiuni #btnDiscard.ra-fantoma, #rlApron #raActiuni #btnDraw[hidden], #rlApron #raActiuni #btnDiscard[hidden] { display: none !important; }
/* ── 3. mărimi de deget, doar text; fontul creşte singur pe ecrane mai late ── */
#rlApron #raActiuni .action-btn-game.chip-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; min-width: 0 !important; width: auto !important;
padding: 0 clamp(6px, .9vw, 14px) !important; gap: 0 !important; font-size: clamp(10px, 1.05vw, 12px) !important; overflow: hidden !important; }
#rlApron #raActiuni .action-btn-game .material-symbols-rounded { display: none !important; }
#rlApron #raActiuni .action-btn-game .chip-label { display: inline-block !important; white-space: nowrap !important; line-height: 1 !important; font-size: inherit !important; color: inherit !important; }
/* ── 4. tema butonului, pusă la loc (remi-pro.css:22827..22950, nemodificate) ── */
#rlApron #raActiuni .action-btn-game.chip-btn.chip-blue { background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important; }
#rlApron #raActiuni .action-btn-game.chip-btn.chip-teal { background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%) !important; }
#rlApron #raActiuni .action-btn-game.chip-btn.chip-red { background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important; }
#rlApron #raActiuni .action-btn-game.chip-btn.chip-gold { background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%) !important; color: #1a0b03 !important; text-shadow: 0 1px 0 rgba(255,255,220,.5) !important; }
#rlApron #raActiuni .action-btn-game.chip-btn.chip-atu { background: linear-gradient(135deg, #fde047 0%, #fbbf24 30%, #f59e0b 70%, #d97706 100%) !important; color: #1a0b03 !important; text-shadow: 0 1px 0 rgba(255,255,220,.5) !important; }
#rlApron #raActiuni .action-btn-game.chip-btn { border: 2px solid rgba(0,0,0,.5) !important; border-radius: 28px !important; }
/* starea „sugerat" a temei (remi-pro.css:25684) îşi păstrează rama aurie */
#rlApron #raActiuni .action-btn-game.chip-btn.btn-suggested { border-color: #ffd700 !important; }
/* ── 5. ghidaj discret: pulsează doar butonul turei, doar când chiar poate fi apăsat ── */
#rlApron #raActiuni .action-btn-game { animation: none !important; transform: none !important; }
#rlApron #raActiuni #btnDraw:not(.ra-asteapta):not([aria-disabled="true"]), #rlApron #raActiuni #btnDiscard:not(.ra-asteapta):not([aria-disabled="true"]) { animation: raRespiro 2.6s ease-in-out infinite !important; }
#rlApron #raActiuni .action-btn-game[aria-disabled="true"] { opacity: .42 !important; }
#rlApron #raActiuni .action-btn-game.ra-asteapta { opacity: .62 !important; }
}
/* 16-09-2026 — userul: „tot tăiat este bara jos conţinut; faci mai mici dacă nu se încadrează".
Cauza: `.game-play-view` are rama de lemn `border: 12px` (remi-pro.css:4071) şi `overflow:hidden`,
deci decupează conţinutul la 12px deasupra marginii ei. `#rlApron` stătea la bottom:0 în
`#playerArea` (care coboară până în ramă) ⇒ ultimii ~11px dispăreau: etichetele
PUNCTE/PIESE/BALANŢĂ, fundul butoanelor şi al ceasului. Măsurat la 844×390: bara T315–B361,
tăietura la 350. Bara urcă la 14px (la 740/667 `#playerArea` iese 2px mai jos decât la 844)
şi scade la 33px; conţinutul se micşorează ca să încapă. Verificat la 667×375, 740×360,
844×390, 915×412: nimic sub tăietură, nimic afară din bară, butoanele nu calcă peste
RÂNDUL/RUNDA, bara nu intră peste piese. */
@media (orientation: landscape) and (max-height: 500px) {
html body #seatSouth #rlApron { bottom: 14px !important; height: 33px !important; min-height: 33px !important; max-height: 33px !important; padding: 0 8px 0 4px !important; border-radius: 12px !important; }
html body #rlApron > #raAvatar { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; border-width: 2px !important; }
html body #rlApron #raTval { font-size: 11px !important; }
html body #rlApron #raTval::after { font-size: 4.5px !important; letter-spacing: .5px !important; }
html body #rlApron > .ra-mid { gap: 0 !important; }
html body #rlApron .ra-nume { font-size: 9.5px !important; line-height: 1.1 !important; letter-spacing: 1px !important; }
html body #rlApron .ra-chip { padding: 1px 3px !important; border-radius: 6px !important; line-height: 1 !important; }
html body #rlApron .ra-chip b { font-size: 10px !important; line-height: 1 !important; }
html body #rlApron .ra-chip small { font-size: 5.5px !important; line-height: 1 !important; letter-spacing: .5px !important; }
html body #rlApron #raActiuni { max-height: 32px !important; }
html body #rlApron #raActiuni .action-btn-game.chip-btn { height: 26px !important; font-size: 10px !important; }
html body #rlApron #raActiuni .sort-btn { height: 10px !important; }
html body #rlApron #raActiuni #sortByNumber { top: 11px !important; }
html body #rlApron #raActiuni #sortByMeld { top: 22px !important; }
html body #rlApron #raActiuni .sort-btn .material-symbols-rounded { font-size: 9px !important; }
html body #rlApron #raActiuni .etalare-pts { height: 11px !important; line-height: 11px !important; font-size: 9px !important; top: -1px !important; }
html body #rlApron .ra-2r-sus { font-size: 7px !important; }
html body #rlApron .ra-2r-jos { font-size: 10px !important; }
html body #rlApron #raAtuV { width: 13px !important; height: 18px !important; font-size: 9px !important; }
html body #rlApron #raAtuV::after { width: 4px !important; height: 4px !important; }
html body #rlApron .ra-ceas { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; font-size: 8px !important; }
}
/* telefoane înguste (667): Etalează + Lipeşte cereau 152px într-o zonă de 125 şi intrau peste RÂNDUL */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 780px) {
html body #rlApron > .ra-mid { flex: 0 0 112px !important; width: 112px !important; }
html body #rlApron .ra-chip b { font-size: 9.5px !important; }
html body:not(.spectator-mode) #rlApron #raActiuni { gap: 4px !important; }
html body #rlApron #raActiuni .action-btn-game.chip-btn { font-size: 9px !important; padding: 0 4px !important; }
}
/* ══════════════════════════════════════════════════════════════════════
MASA LINIŞTITĂ ŞI PE TELEFON (18-09-2026)
──────────────────────────────────────────────────────────────────────
Pe desktop am oprit podoabele care se învârteau în buclă (vezi `remi-pro.css`).
Fişierul ăsta are însă buclele LUI, pe care regula de acolo nu le atinge:
· `raPuls` / `raPulsP` — TOATE butoanele de acţiune pulsează, cu scale(1.14),
fără oprire. Pe un ecran mic asta sare cel mai tare în ochi.
· `raRespiro` — butoanele Trage şi Aruncă „respiră" continuu.
Rămâne pulsul pe butonul SUGERAT, fiindcă acela chiar îţi spune ce să apeşi.
══════════════════════════════════════════════════════════════════════ */
body.game-active #raActiuni .action-btn-game:not(.btn-suggested),
body.game-active .seat-south .player-info-bar .action-btn-game:not(.btn-suggested),
body.game-active #rlApron #raActiuni #btnDraw,
body.game-active #rlApron #raActiuni #btnDiscard {
animation: none !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
#raActiuni .action-btn-game,
.seat-south .player-info-bar .action-btn-game,
#rlApron #raActiuni #btnDraw,
#rlApron #raActiuni #btnDiscard,
#raGhidaj {
animation: none !important;
transform: none !important;
}
}
/* ================================================================================================
APRONUL DE PEISAJ — acelaşi material ca banda din portret (18-09-2026)
------------------------------------------------------------------------------------------------
Apronul (`#rlApron`) e a doua înfăţişare a benzii de jos: intră în peisaj scund, acolo unde
footerul e ascuns. Până azi era o insulă maro, fără nicio legătură cu banda din portret.
Acum poartă acelaşi material: postav cu textură, cusătură pe muchie, jetoane cu striuri —
şi ia culoarea din aceeaşi temă. Aşezarea (lăţimile fixe din blocul de mai sus, calculate pe
bugetul de 676px utili) NU se atinge: acolo totul era deja încadrat la milimetru.
================================================================================================ */
#rlApron {
--aur: var(--remi-accent, #d4a544);
--scris: var(--remi-text, #f4ecd8);
--scris-sters: var(--remi-text-dim, rgba(244, 236, 216, .6));
/* culorile vin din temă, ca la banda din portret — nimic verde inventat aici */
--postav-sus: var(--remi-surface-2, #4a2e16);
--postav-jos: var(--remi-surface, #3a2310);
--jeton: rgba(0, 0, 0, .42);
--striu: rgba(255, 255, 255, .26);
--ra-inel: var(--aur);
background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, .045) 0 3px, transparent 3px 9px),
linear-gradient(180deg, var(--postav-sus) 0%, var(--postav-jos) 100%) !important;
border: 0 !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .16),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 2px 0 rgba(0, 0, 0, .35),
0 4px 0 rgba(0, 0, 0, .5),
0 7px 2px rgba(0, 0, 0, .55),
0 14px 22px -8px rgba(0, 0, 0, .65) !important;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
#rlApron {
--postav-sus: color-mix(in srgb, var(--remi-surface-2, #4a2e16) 86%, var(--aur) 14%);
--postav-jos: color-mix(in srgb, var(--remi-surface, #3a2310) 92%, #000 8%);
}
}
/* Muchia de sus: fir de lumină, nu linie punctată. Stă pe `::before`, exact ca la banda de
desktop (`remi-pro.css`), fiindcă `::after` e muchia colorată a locului — vezi mai jos. */
#rlApron::before {
content: '';
position: absolute;
left: 6px; right: 6px; top: 0;
height: 1px;
pointer-events: none;
background:
linear-gradient(90deg, transparent, rgba(255, 245, 215, .95), transparent) no-repeat,
linear-gradient(90deg, transparent 0%, var(--aur) 18%, var(--aur) 82%, transparent 100%);
background-size: 26% 100%, auto;
background-position: -45% 0, 0 0;
opacity: .9;
}
/* lucirea trece O SINGURĂ DATĂ, la începutul turei tale — nu în buclă.
Foloseşte `bandaLucire` din remi-pro.css: aceleaşi cadre, nu o copie. */
#seatSouth #playerArea.active-turn #rlApron::before { animation: bandaLucire 1.25s cubic-bezier(.32, .72, .35, 1) 1; }
body.spectator-mode #rlApron::before {
background: linear-gradient(90deg, transparent 0%, #b23a48 18%, #b23a48 82%, transparent 100%);
}
/* Culoarea locului tău, pe muchia din stânga — ca pe desktop.
Până acum `::after` era firul de lumină de sus (1px); acum firul stă pe `::before`.
Înălţimea şi laturile sunt scrise explicit, ca să nu rămână nimic din vechea formă. */
#rlApron::after {
content: '';
position: absolute;
left: 0; right: auto; top: 0; bottom: auto;
width: 3px;
height: 100%;
border-radius: 12px 0 0 12px;
pointer-events: none;
background: var(--ra-loc, var(--aur));
opacity: .9;
}
/* Ceasul e inelul avatarului, ca în portret: `--ra-arc` vine din remi-pro.js. */
#rlApron #raAvatar {
border: 0 !important;
padding: 3px !important;
overflow: visible !important;
background: conic-gradient(from -90deg,
var(--ra-inel) 0 var(--ra-arc, 0deg),
rgba(0, 0, 0, .45) var(--ra-arc, 0deg) 360deg) !important;
box-shadow: none !important;
}
#rlApron #raAvatar[data-timer-state="normal"] { --ra-inel: #3fae6a; }
#rlApron #raAvatar[data-timer-state="warn"] { --ra-inel: #e9c45a; }
#rlApron #raAvatar[data-timer-state="critical"] { --ra-inel: #e05545; }
#rlApron #raAvatar[data-timer-state="idle"] { --ra-inel: var(--aur); }
/* Secundele stau PE poză şi fac schimb cu ea la 3 secunde, ca în portret.
Sub 10 secunde nu mai e vreme de schimb: cifra stă fixă, roşie. */
#rlApron #raAvatar img { border-radius: 50%; opacity: 1 !important; }
#rlApron #raAvatar:not([data-timer-state="idle"]) img { animation: pozaCeasApron 6s ease-in-out infinite; }
#rlApron #raTval {
inset: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
color: #fff !important;
text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .85) !important;
font-variant-numeric: tabular-nums;
opacity: 0;
}
#rlApron #raAvatar:not([data-timer-state="idle"]) #raTval { animation: cifraCeasApron 6s ease-in-out infinite; }
#rlApron #raAvatar[data-timer-state="critical"] img { animation: none; opacity: .22 !important; }
#rlApron #raAvatar[data-timer-state="critical"] #raTval { animation: none; opacity: 1; color: #ff7a6a !important; }
@keyframes pozaCeasApron { 0%, 40% { opacity: 1; } 50%, 90% { opacity: .22; } 100% { opacity: 1; } }
@keyframes cifraCeasApron { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
/* Numele şi jetoanele */
#rlApron .ra-nume {
color: var(--scris) !important;
letter-spacing: .07em !important;
}
#rlApron .ra-chip {
border: 1px solid rgba(var(--remi-accent-rgb, 212, 165, 68), .42) !important;
background-image:
repeating-linear-gradient(90deg, var(--striu) 0 5px, transparent 5px 12px),
repeating-linear-gradient(90deg, var(--striu) 0 5px, transparent 5px 12px),
linear-gradient(180deg, var(--jeton), rgba(0, 0, 0, .58)) !important;
background-size: 100% 2px, 100% 2px, auto !important;
background-position: 0 0, 0 100%, 0 0 !important;
background-repeat: no-repeat, no-repeat, repeat !important;
}
#rlApron .ra-chip b { color: var(--scris) !important; font-variant-numeric: tabular-nums; }
#rlApron .ra-chip small { color: var(--scris-sters) !important; }
/* balanţa: acelaşi jeton, dar pe un TEANC de încă două — nu o pastilă aurie plină */
#rlApron .ra-chip.ra-gold {
background-image:
repeating-linear-gradient(90deg, var(--striu) 0 5px, transparent 5px 12px),
repeating-linear-gradient(90deg, var(--striu) 0 5px, transparent 5px 12px),
linear-gradient(180deg, var(--jeton), rgba(0, 0, 0, .58)) !important;
border: 1px solid rgba(var(--remi-accent-rgb, 212, 165, 68), .7) !important;
box-shadow:
0 2px 0 -1px rgba(var(--remi-accent-rgb, 212, 165, 68), .5),
0 4px 0 -2px rgba(var(--remi-accent-rgb, 212, 165, 68), .3) !important;
}
#rlApron .ra-chip.ra-gold b { color: var(--aur) !important; }
#rlApron .ra-chip.ra-gold small { color: var(--scris-sters) !important; }
/* Blocul din dreapta + ceasul, în aceeaşi cheie */
#rlApron .ra-2r-sus { color: var(--aur) !important; }
#rlApron .ra-2r-jos { color: var(--scris) !important; font-variant-numeric: tabular-nums; }
#rlApron .ra-ceas {
border-color: var(--aur) !important;
color: var(--aur) !important;
background: var(--jeton) !important;
font-variant-numeric: tabular-nums;
}
/* Acţiunile din apron: jetoane cu text, nu pătrăţele de 22px cu iconiţă.
Fantomele (acţiuni imposibile) nu se mai desenează deloc. */
#rlApron #raActiuni .action-btn-game.ra-fantoma { display: none !important; }
#rlApron #raActiuni .action-btn-game.chip-btn {
border-radius: 999px !important;
border: 1px solid rgba(var(--remi-accent-rgb, 212, 165, 68), .42) !important;
background: rgba(0, 0, 0, .28) !important;
color: var(--scris) !important;
}
#rlApron #raActiuni .action-btn-game.chip-btn.ra-principal,
#rlApron #raActiuni .action-btn-game.chip-btn.btn-primary-action {
color: #1b1405 !important;
background: linear-gradient(180deg, rgba(255, 245, 210, .92), var(--aur)) !important;
border: 1px solid rgba(255, 245, 210, .5) !important;
}
/* ================================================================================================
APRONUL DE PEISAJ — aşezarea de pe desktop (18-09-2026, a doua trecere)
------------------------------------------------------------------------------------------------
„Nu arată cum este desktop." Cauza n-a fost lăţimea, ci INVENTARUL: banda de pe desktop are
şapte piese — poză, nume, PUNCTE, PIESE, penalizarea (`#playerHandPenalty`), paşii (`#raPasi`)
şi butonul — iar apronul avea doar patru. Cu două piese lipsă rămânea o gaură la mijloc, oricât
aş fi întins jetoanele peste ea; iar bugetul vechi ţinea `.ra-mid` la 132px ficşi, ceea ce
înghesuia numele şi jetoanele în stânga golului. Penalizarea şi paşii vin acum din
`remi-features.js` (aceeaşi mutare cu memorarea părintelui ca la butoane), iar aici li se dă
locul: avatar · nume+jetoane · gol · penalizare · paşi · butoane · rând/rundă/ATU/ceas.
Golul (`#raGol`) cedează primul, ca banda să rămână încadrată când apare butonul turei.
Balanţa nu se mai desenează: nici pe desktop nu apare, mesele sunt pe puncte acumulate.
Măsurat la 844×390, cu tura mea şi fără ea: nimic tăiat, nimic în afara scaunului.
================================================================================================ */
@media (orientation: landscape) and (max-height: 500px) {
/* Selectorii poartă `html body` fiindcă blocul de buget de mai sus (rândurile cu
„tot tăiat este bara jos") scrie tot aşa: la specificitate mai mică regulile de
aici ar fi pierdut tăcut lupta, exact ce s-a întâmplat azi pe desktop. */
/* ── aşezarea: numele şi jetoanele îşi iau lăţimea lor, golul ia restul ── */
html body #rlApron { gap: 7px !important; }
html body #rlApron > #raGol { flex: 1 1 0 !important; min-width: 0 !important; }
html body #rlApron > .ra-mid { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
flex-direction: row !important; align-items: center !important; gap: 7px !important; }
html body #rlApron > #raActiuni { flex: 0 0 auto !important; justify-content: flex-end !important; }
html body #rlApron .ra-nume { flex: 0 0 auto; max-width: 90px !important; font-size: 12.5px !important;
line-height: 1.2 !important; letter-spacing: .07em !important; }
html body #rlApron .ra-chips { gap: 4px !important; }
/* `0 1 auto`, nu `0 0 auto`: cele TREI jetoane (cu balanţa între ele) se strâng
singure când apare butonul turei, în loc să împingă ceasul afară din bandă. */
html body #rlApron .ra-chip { flex: 0 1 auto !important; min-width: 44px !important; padding: 3px 5px !important;
border-radius: 7px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .2),
0 2px 0 rgba(0, 0, 0, .45),
0 4px 6px -2px rgba(0, 0, 0, .5) !important; }
html body #rlApron .ra-chip b { font-size: 14px !important; line-height: 1.05 !important; }
html body #rlApron .ra-chip small { font-size: 7.5px !important; line-height: 1.3 !important; letter-spacing: .1em !important; }
/* BALANŢA rămâne. Pe desktop e în footer; în peisaj footerul e ascuns, deci
apronul e singurul loc unde o mai poţi vedea — de-aia fusese pusă aici.
(Am ascuns-o o dată, din capul meu, „ca pe desktop". Greşit: pe desktop
nu lipseşte, e doar în altă parte.) */
html body #rlApron .ra-chip.ra-gold { display: flex !important; }
/* becul „ai combinaţii de etalat" — există în banda de desktop, lipsea din apron */
html body #rlApron #etalareHint {
flex: 0 0 auto;
font-size: 12px;
line-height: 1;
opacity: 0;
transition: opacity .18s ease;
pointer-events: none;
}
html body #rlApron #etalareHint.visible { opacity: 1; pointer-events: auto; cursor: pointer; }
/* ── penalizarea, pastila din banda de desktop ── */
html body #rlApron #playerHandPenalty {
display: inline-flex !important;
align-items: center;
flex: 0 0 auto;
padding: 4px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
letter-spacing: .05em;
color: var(--scris);
border: 1px solid rgba(var(--remi-accent-rgb, 212, 165, 68), .45);
background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .34));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 0 rgba(0, 0, 0, .45);
}
/* ── paşii turei (trage → combină → aruncă) ── */
html body #rlApron #raPasi { display: flex !important; align-items: center; gap: 4px; flex: 0 0 auto; }
html body #rlApron #raPasi .ra-pas {
width: 15px;
height: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4);
}
html body #rlApron #raPasi .ra-pas.gata { background: rgba(var(--remi-accent-rgb, 212, 165, 68), .6); }
html body #rlApron #raPasi .ra-pas.acum { background: var(--aur); box-shadow: 0 0 8px -1px var(--aur); }
/* nu e rândul tău: paşii şi penalizarea tac, exact ca pe desktop.
(Regula de acolo cere `.player-info-bar` ca strămoş, iar în peisaj cele două
piese stau în apron — fără rândul ăsta ar rămâne aprinse tot timpul.) */
html body #seatSouth #playerArea:not(.active-turn) #rlApron #raPasi,
html body #seatSouth #playerArea:not(.active-turn) #rlApron #playerHandPenalty { opacity: .4 !important; }
/* ── butoanele groase, aceeaşi reţetă cu banda din portret ── */
html body #rlApron #raActiuni .action-btn-game.chip-btn {
height: 28px !important;
padding: 0 11px !important;
border-radius: 999px !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase;
transform: translateY(-4px);
}
html body #rlApron #raActiuni .action-btn-game.chip-btn.ra-principal,
html body #rlApron #raActiuni .action-btn-game.chip-btn.btn-primary-action {
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 1),
0 2px 0 rgba(0, 0, 0, .45),
0 4px 0 rgba(0, 0, 0, .55),
0 6px 0 rgba(0, 0, 0, .4),
0 9px 12px -3px rgba(0, 0, 0, .7) !important;
}
html body #rlApron #raActiuni .action-btn-game.chip-btn:not(.ra-principal):not(.btn-primary-action) {
background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05) 40%, rgba(0, 0, 0, .34)) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .35),
0 2px 0 rgba(0, 0, 0, .55),
0 4px 0 rgba(0, 0, 0, .45),
0 6px 0 rgba(0, 0, 0, .35),
0 9px 12px -3px rgba(0, 0, 0, .65) !important;
}
/* ── blocul din dreapta încape întreg ── */
html body #rlApron > .ra-dr { flex: 0 0 auto !important; width: auto !important; gap: 7px !important; }
html body #rlApron .ra-2r { min-width: 0 !important; }
/* ── ŞINA: aceeaşi grosime ca banda de desktop ──────────────────────────────
Reţeta e copiată cap-coadă din `remi-pro.css` („BANDA DE JOS — ŞINA"): faţa de
sus luminată, patru trepte de umbră mixate din temă, umbra pe masă, şi
înclinarea în perspectivă care o scoate din lemn. Apronul era plat fiindcă
n-avea niciuna. `overflow` trece pe `visible`: blocul vechi de buget îl ţinea
ascuns, iar cu el tăiat nu se vedea nici grosimea, nici muchia locului. */
html body #rlApron {
--umbra-1: rgba(0, 0, 0, .35);
--umbra-2: rgba(0, 0, 0, .5);
--umbra-3: rgba(0, 0, 0, .65);
overflow: visible !important;
background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, .045) 0 3px, transparent 3px 9px),
linear-gradient(180deg, var(--postav-sus) 0%, var(--postav-jos) 100%) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .18),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 2px 0 var(--umbra-1),
0 4px 0 var(--umbra-2),
0 6px 0 var(--umbra-3),
0 9px 2px rgba(0, 0, 0, .55),
0 18px 28px -8px rgba(0, 0, 0, .65) !important;
/* `!important` nu e de decor: o regulă de „masă liniştită" pune
`transform: none !important` peste apron şi înclinarea dispărea tăcut.
Verificat în browser: fără el, computed transform = matrice unitate. */
transform: perspective(760px) rotateX(2.4deg) !important;
transform-origin: 50% 100% !important;
transition: transform .18s ease, box-shadow .18s ease;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
html body #rlApron {
--umbra-1: color-mix(in srgb, var(--remi-surface, #3a2310) 72%, #000 28%);
--umbra-2: color-mix(in srgb, var(--remi-surface, #3a2310) 56%, #000 44%);
--umbra-3: color-mix(in srgb, var(--remi-surface, #3a2310) 40%, #000 60%);
}
}
/* la rândul tău şina se ridică un pic spre tine, exact ca pe desktop */
html body #seatSouth #playerArea.active-turn #rlApron {
transform: perspective(760px) rotateX(2.4deg) translateY(-2px) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .22),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 2px 0 var(--umbra-1),
0 4px 0 var(--umbra-2),
0 6px 0 var(--umbra-3),
0 8px 0 var(--umbra-3),
0 11px 2px rgba(0, 0, 0, .6),
0 24px 34px -8px rgba(0, 0, 0, .7) !important;
}
}
/* ── CE CADE LA STRÂMTOARE ───────────────────────────────────────────────────────────────────
Banda de desktop face exact asta: la 620 scoate becul şi penalizarea, la 440 al doilea
buton, la 360 balanţa. Apronul are nevoie de aceeaşi purtare, fiindcă butonul turei apare
şi dispare şi mută ~180px dintr-o parte în alta.
Scara de mai jos NU e ghicită — e măsurată în joc, la masă reală, în două stări (cu butoane
şi fără), pe şase lăţimi. Înainte de ea, conţinutul depăşea banda aşa:
667×375 +44 fără butoane, +50 cu 915×412 +82 cu butoane
844×390 +5 cu butoane 956×440 +42 cu butoane
După ea, toate şase încap exact (449/449, 481/481, 521/521, 585/585, 657/657, 697/697).
Declanşatorul e `.active-turn` — adică exact clipa în care apare butonul — nu o presupunere
pe lăţime. */
/* la rândul tău, la ORICE lăţime: butonul cere locul becului şi al paşilor
(paşii oricum îi citeşti din butonul care se aprinde) */
@media (orientation: landscape) and (max-height: 500px) {
html body #seatSouth #playerArea.active-turn #rlApron #etalareHint,
html body #seatSouth #playerArea.active-turn #rlApron #raPasi { display: none !important; }
}
/* sub 900: la rândul tău cade şi numele — pe locul tău te ştii, e piesa cea mai
puţin folositoare de acolo — iar butoanele se string */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
html body #seatSouth #playerArea.active-turn #rlApron .ra-nume { display: none !important; }
html body #seatSouth #playerArea.active-turn #rlApron #raActiuni .action-btn-game.chip-btn { padding: 0 7px !important; }
html body #rlApron > #raActiuni { gap: 5px !important; }
html body #rlApron > .ra-dr { gap: 5px !important; }
}
/* telefon îngust: becul şi paşii nu încap NICIODATĂ, nu doar în tura ta */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 779px) {
html body #rlApron #etalareHint,
html body #rlApron #raPasi { display: none !important; }
html body #seatSouth #playerArea.active-turn #rlApron #playerHandPenalty { display: none !important; }
html body #rlApron #playerHandPenalty { padding: 3px 7px; font-size: 9.5px; }
}
/* ── ÎN PEISAJ, „RÂNDUL" APARE DOAR CÂND E RÂNDUL TĂU ─────────────────────────────────────
Userul, 19-09-2026: „cu text în landscape se vede urât". Avea dreptate — când e rândul
altuia acolo încăpea doar un nume ciuntit („sbot_c…"), într-o casetă de 44px.
Nu se pierde nimic: al cui e rândul se vede deja pe masă — zona celui activ e
evidenţiată (`zone-active`), scrie „la rând" în dreptul lui, iar avatarul tău are inelul
de ceas. Verificat în pagină înainte de a scoate.
Ce RĂMÂNE e partea cerută tot de user, într-o sesiune mai veche („când scrie rândul tău
să zică ce trebuie să faci"): la rândul tău caseta arată TRAGE / ALEGE / ARUNCĂ. Scurt,
util, fără nume. Şi se câştigă ~44px într-o bandă oricum strâmtă.
───────────────────────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
html body #rlApron .ra-dr #raRandul { display: none !important; }
html body #seatSouth #playerArea.active-turn #rlApron .ra-dr #raRandul { display: block !important; }
}
/* cel mai strâmt peisaj (667×375): jetoanele se string, iar în bandă rămâne
doar butonul principal — exact ce face banda de desktop sub 440px */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
html body #rlApron > .ra-mid { flex: 0 0 auto !important; width: auto !important; gap: 7px !important; }
html body #rlApron { gap: 5px !important; }
html body #rlApron .ra-nume { max-width: 48px !important; font-size: 11px !important; }
html body #rlApron .ra-chip { min-width: 38px !important; padding: 3px 4px !important; }
html body #rlApron .ra-chip b { font-size: 12px !important; }
html body #rlApron #raActiuni .action-btn-game.chip-btn { font-size: 9.5px !important; }
html body #rlApron #raActiuni .action-btn-game.chip-btn:not(.btn-primary-action):not(.ra-principal) { display: none !important; }
}
/* fără mişcare pentru cine a cerut linişte în sistem */
@media (prefers-reduced-motion: reduce) {
html body #rlApron,
html body #seatSouth #playerArea.active-turn #rlApron { transition: none !important; }
html body #seatSouth #playerArea.active-turn #rlApron::before { animation: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════════════════════
APRONUL DE PEISAJ = BANDA DE PORTRET (20-09-2026)
────────────────────────────────────────────────────────────────────────────────────────
Userul: „banda de jos nu este la fel, sunt diferenţe", apoi „citeşte tot în portret",
apoi „fă diferenţaaaa", apoi „injectezi cod să fie ca în portret".
── CE AM GĂSIT CITIND, nu ghicind ──────────────────────────────────────────────────────
1. BANDA DE PORTRET SE DESENA PESTE APRON. Regula care trebuia s-o ascundă exista deja
(linia ~272), dar PIERDEA o bătălie de specificitate:
#seatSouth #playerArea .player-info-bar display:flex !important 2 ID-uri
html body.game-active .seat-south .player-info-bar display:none !important 3 clase
Două ID-uri bat trei clase, chiar cu `!important` la amândouă. Aşa că aceleaşi cifre
erau scrise de DOUĂ ori, suprapuse: `.stat-card` la y=368 peste `.ra-chip` la y=362.
De-aici veneau, toate deodată: jetoanele duble, „flash-ul pe ceas" (poza care se
răstoarnă la 3s şi arată secundele), secundele de sub nume, lumina care mătura banda.
2. CELE DOUĂ BENZI NU SUNT DOUĂ FEŢE ALE ACELUIAŞI LUCRU. Portretul are 15 reguli cu
animaţie pe `.player-info-bar` (din care `pozaCeas`/`cifraCeas` sunt COD MORT — acelaşi
selector, suprascris de `fataPoza`/`fataCifra` cu `!important`). Apronul avea DOUĂ:
`bandaLucire` o singură dată pe tură, şi schimbul poză/cifră prin stingere.
Blocul de mai jos aduce în apron cele 12 care contează, refolosind ACELEAŞI keyframes
din remi-pro.css — niciunul copiat.
3. APRONUL DĂDEA PE DINAFARĂ cât erau butoanele aprinse: `#raActiuni` era `flex: 0 0 auto`,
deci nu putea ceda, iar golul elastic era deja strâns la zero. Măsurat: grupul din
dreapta (ATU + ceas) ieşea 20px peste apron, şi odată cu el peste stativ. Acum e o
ordine de cedare: golul → numele+jetoanele → butoanele, iar ATU+ceasul nu cedează
niciodată. Măsurat după: −8px, adică 8px înăuntru, şi cu butoanele aprinse, şi fără.
4. „RÂNDUL" era ascuns din fişier, dar o a doua regulă cu `.active-turn` îl readucea fix
pe tura ta — de-aia „nu ieşea" când încercai să-l scoţi.
── CE NU E AICI, fiindcă cere JS ───────────────────────────────────────────────────────
· `nume-lung` se punea doar pe numele din portret → în apron numele nu se plimba niciodată
· clasa `tic` se punea doar pe `.stat-card` → în apron cifrele nu ticăiau
· culoarea piesei de ATU e bătută de `color: var(--scris) !important`
Toate trei sunt reparate în `remi-features.js`.
════════════════════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
/* ── 1. banda de portret nu se mai desenează peste apron ──────────────────────────── */
html body:is(.game-active, .mp-game-active) #seatSouth #playerArea .player-info-bar {
display: none !important;
}
/* ── 2. „RÂNDUL" şi „RUNDA" ies din apron (cerut de user).
Se bate ŞI varianta cu `.active-turn`, altfel reapar pe tura ta. ─────────────────── */
html body #seatSouth #playerArea #rlApron .ra-dr #raRandul,
html body #seatSouth #playerArea.active-turn #rlApron .ra-dr #raRandul,
html body #seatSouth #playerArea #rlApron .ra-dr .ra-2r:not(#raRandul):not(#raAtu),
html body #seatSouth #playerArea.active-turn #rlApron .ra-dr .ra-2r:not(#raRandul):not(#raAtu) {
display: none !important;
}
/* ── 3. apronul încape: cine cedează, în ce ordine ────────────────────────────────── */
html body #seatSouth #playerArea #rlApron .ra-dr { flex: 0 0 auto !important; margin-left: auto !important; }
html body #seatSouth #playerArea #rlApron .ra-mid { flex: 0 1 auto !important; min-width: 0 !important; }
html body #seatSouth #playerArea #rlApron #raActiuni { flex: 0 1 auto !important; min-width: 0 !important; }
html body #seatSouth #playerArea #rlApron .ra-nume { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #seatSouth #playerArea #rlApron .ra-chips { flex: 0 0 auto !important; }
/* ── 4. cele 12 efecte din portret, pe apron ──────────────────────────────────────── */
/* lumina de pe muchie: continuă, nu o dată pe tură */
#seatSouth #playerArea #rlApron::before {
animation: bandaLucire 4.6s cubic-bezier(.4, .1, .6, .9) infinite !important;
}
#seatSouth #playerArea.active-turn #rlApron::before { animation-duration: 2.4s !important; }
/* sclipiciul rotitor pe inelul avatarului.
Pe `::after`, NU pe `::before`: fondul lui `#raAvatar` e chiar arcul de progres al
ceasului (conic-gradient verde/galben/roşu) şi l-aş fi acoperit. */
#seatSouth #playerArea #rlApron #raAvatar { position: relative !important; overflow: visible !important; perspective: 220px; }
#seatSouth #playerArea #rlApron #raAvatar::after {
content: "" !important; position: absolute; inset: -2px; border-radius: 50%;
pointer-events: none; z-index: 3;
background: conic-gradient(from 0deg, transparent 0 80%, rgba(255, 255, 255, .75) 93%, transparent 100%);
animation: inelSclipici 2.6s linear infinite; mix-blend-mode: screen;
}
/* poza se răstoarnă ca o monedă şi arată secundele (în apron era doar stingere) */
#seatSouth #playerArea #rlApron #raAvatar:not([data-timer-state="idle"]) img {
animation: fataPoza 6s ease-in-out infinite !important; opacity: 1 !important; backface-visibility: hidden;
}
#seatSouth #playerArea #rlApron #raAvatar:not([data-timer-state="idle"]) #raTval {
animation: fataCifra 6s ease-in-out infinite !important; opacity: 1 !important; backface-visibility: hidden;
background: radial-gradient(circle at 50% 38%, #3b2a12, #14100a); border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
display: flex; align-items: center; justify-content: center;
}
/* sub 10 secunde nu mai e vreme de schimb: cifra stă fixă, roşie */
#seatSouth #playerArea #rlApron #raAvatar[data-timer-state="critical"] img { animation: none !important; transform: rotateY(180deg); }
#seatSouth #playerArea #rlApron #raAvatar[data-timer-state="critical"] #raTval { animation: none !important; transform: rotateY(0); opacity: 1 !important; color: #ff7a6a !important; }
/* sclipirea peste jetoane, ×3 decalate ca în portret */
#seatSouth #playerArea #rlApron .ra-chip { position: relative; overflow: hidden; }
#seatSouth #playerArea #rlApron .ra-chip::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .24) 50%, transparent 62%);
background-size: 260% 100%; background-position: 140% 0;
animation: jetonSclipire 5.5s ease-in-out infinite;
}
#seatSouth #playerArea #rlApron .ra-chips .ra-chip:nth-child(2)::after { animation-delay: .9s; }
#seatSouth #playerArea #rlApron .ra-chips .ra-chip:nth-child(3)::after { animation-delay: 1.8s; }
/* numele lung se plimbă (clasa o pune remi-features.js — vezi nota de sus) */
#seatSouth #playerArea #rlApron .ra-nume { white-space: nowrap; }
#seatSouth #playerArea #rlApron .ra-nume.nume-lung {
text-overflow: clip !important; animation: numeScroll 6s ease-in-out infinite alternate;
}
/* butonul principal respiră, cu haloul din spate */
#seatSouth #playerArea #rlApron #raActiuni .action-btn-game.chip-btn.ra-principal {
position: relative; overflow: visible !important;
animation: butonRespira 2.2s ease-in-out infinite !important;
}
#seatSouth #playerArea #rlApron #raActiuni .action-btn-game.chip-btn.ra-principal::after {
display: block !important; content: ''; position: absolute; inset: -9px -10px -14px;
border-radius: 999px; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--aur) 70%, transparent), transparent 70%);
animation: haloRespira 2.2s ease-in-out infinite;
}
/* pasul curent clipeşte */
#seatSouth #playerArea #rlApron #raPasi .ra-pas.acum { animation: pasClip 1.4s ease-in-out infinite; }
/* şina pulsează cât e rândul tău */
#seatSouth #playerArea.active-turn #rlApron { animation: sinaRespira 3s ease-in-out infinite; }
/* ticul jetonului şi al cifrei la schimbarea valorii (clasa o pune remi-features.js) */
#seatSouth #playerArea #rlApron .ra-chip.tic { animation: jetonTic .45s cubic-bezier(.34, 1.4, .5, 1) 1; }
#seatSouth #playerArea #rlApron .ra-chip.tic b { animation: cifraTic .45s ease-out 1; }
/* ── 5. NUMELE + SECUNDELE, ca în portret ─────────────────────────────────────────
Userul: „unde apare numele userului, în portret erau secunde dedesubt din timer",
apoi „apare nume user şi dedesubt secundele, că aşa se strânge ca dracii",
apoi „numele userului să rămână fix".
În portret rândul de sub nume e `.identity-status-label`, scris de `remi-pro.js`
~9149: secundele cât e rândul tău (clasa `e-ceas`), „online" când aştepţi. Apronul
n-avea rândul ăsta deloc.
`.ra-mid` E UN RÂND: [nume][jetoane]. Prima încercare l-a făcut coloană şi a ieşit
58px într-un apron de 33 — jetoanele se aşezau sub nume. De-aia numele şi starea
intră într-o coloană a lor (`.ra-identitate`), iar `.ra-mid` rămâne rând.
Măsurat: coloana 22px într-un apron de 33.
Numele se desenează din `--nume-curat`, nu din `textContent`: oglinda din
remi-features.js rescrie `#raNume` la fiecare tur din `playerNameLabel` (care conţine
şi „Locul N în clasament"), deci orice tăiere pusă în text s-ar pune la loc. Aşa
textul brut rămâne în spate, invizibil, iar noi desenăm doar numele.
FIX, fără plimbare: la 90px numele scurt încape, iar `numeScroll` îl clătina degeaba. */
#seatSouth #playerArea #rlApron .ra-identitate {
display: flex !important; flex-direction: column !important;
justify-content: center !important; gap: 0 !important;
min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden;
}
#seatSouth #playerArea #rlApron .ra-identitate .ra-nume {
font-size: 0 !important; line-height: 1.15 !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
animation: none !important; text-indent: 0 !important;
}
#seatSouth #playerArea #rlApron .ra-identitate .ra-nume::before {
content: var(--nume-curat, ""); font-size: 11px; font-weight: 800;
letter-spacing: .07em; color: var(--scris, #f4ecd8);
}
#seatSouth #playerArea #rlApron .ra-stare {
font-size: 8px !important; font-weight: 600 !important; letter-spacing: .07em !important;
line-height: 1.15 !important; color: rgba(244, 236, 216, .6) !important;
white-space: nowrap; font-variant-numeric: tabular-nums;
}
#seatSouth #playerArea #rlApron .ra-stare.e-ceas { color: #e9c45a !important; font-weight: 800 !important; }
/* ── 6. JETOANELE ŞI BUTOANELE = ACEEAŞI PASTILĂ ──────────────────────────────────
Userul: „hai fă-i style încadrat corect, avem spaţiu aici", apoi „să fie ca butoanele
style", apoi „şi etaleaza la fel".
Jetoanele erau „jetoane de cazinou": fond negru cu trei gradiente striate, colţ 7,
eticheta 7,5px/400. Nu semănau cu nimic altceva din joc.
SELECTORUL ARE 4 ID-uri, şi nu din lene: apronul are regulile lui de buton, cu
`!important` ŞI cu `html body #rlApron #raActiuni .action-btn-game.chip-btn.chip-teal`
— adică 2 ID-uri plus două elemente. Cu selectorul obişnuit, LIPEŞTE (care e
`chip-teal`) rămânea singurul buton fără dungă. Măsurat, înainte: dungă=nu doar la el.
DUNGA E STRAT DE FUNDAL, nu `::after`: pseudo-ul e deja folosit de `jetonSclipire`,
iar un element nu poate avea două `::after`. */
html body #seatSouth #playerArea #rlApron .ra-chips {
display: flex !important; align-items: center !important; gap: 7px !important;
height: auto !important; padding: 0 !important; overflow: visible !important;
border: 0 !important; background: none !important; box-shadow: none !important;
flex: 0 0 auto !important;
}
html body #seatSouth #playerArea #rlApron .ra-chips .ra-chip,
html body #seatSouth #playerArea #rlApron #raActiuni .action-btn-game.chip-btn {
height: 30px !important; min-height: 30px !important; padding: 0 11px !important;
border-radius: 12px !important; overflow: visible !important; position: relative !important;
background:
linear-gradient(90deg, transparent, rgba(212, 165, 68, .85), transparent)
no-repeat left calc(100% - 1px) / calc(100% - 20px) 2px,
linear-gradient(rgba(212, 165, 68, .14), rgba(212, 165, 68, .05)) !important;
border: .8px solid rgba(212, 165, 68, .45) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18) !important;
color: rgb(212, 165, 68) !important;
}
/* jetoanele: două rânduri (cifră + etichetă) */
html body #seatSouth #playerArea #rlApron .ra-chips .ra-chip {
display: inline-flex !important; flex-direction: column !important;
align-items: center !important; justify-content: center !important;
gap: 0 !important; line-height: 1.05 !important; flex: 0 0 auto !important;
}
html body #seatSouth #playerArea #rlApron .ra-chips .ra-chip b {
font-size: 13px !important; font-weight: 800 !important; color: rgb(232, 198, 106) !important;
font-variant-numeric: tabular-nums !important; line-height: 1.05 !important;
}
html body #seatSouth #playerArea #rlApron .ra-chips .ra-chip small {
font-size: 8px !important; font-weight: 700 !important; letter-spacing: .08em !important;
text-transform: uppercase !important; color: rgba(212, 165, 68, .75) !important; line-height: 1.1 !important;
}
html body #seatSouth #playerArea #rlApron .ra-chips .ra-chip:nth-child(1),
html body #seatSouth #playerArea #rlApron .ra-chips .ra-chip:nth-child(2) { min-width: 54px !important; }
html body #seatSouth #playerArea #rlApron .ra-chips .ra-chip.ra-gold { min-width: 72px !important; }
/* butoanele: un rând, majuscule */
html body #seatSouth #playerArea #rlApron #raActiuni .action-btn-game.chip-btn {
display: inline-flex !important; flex-direction: row !important;
align-items: center !important; justify-content: center !important; gap: 6px !important;
font-size: 11px !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
}
html body #seatSouth #playerArea #rlApron #raActiuni .action-btn-game.chip-btn:not([aria-disabled="true"]):not(:disabled) {
background:
linear-gradient(90deg, transparent, rgba(212, 165, 68, .85), transparent)
no-repeat left calc(100% - 1px) / calc(100% - 20px) 2px,
linear-gradient(rgba(212, 165, 68, .28), rgba(212, 165, 68, .12)) !important;
border-color: rgba(212, 165, 68, .75) !important;
}
/* ── 7. BUTONUL PRINCIPAL: pastilă simplă, fără lumină peste ──────────────────────
Userul: „etaleaza decât să joace, nu altă lumină peste". Portasem de la portret
`butonRespira` (pulsul de strălucire) şi `haloRespira` (haloul radial din spate) —
pe postavul de peisaj sar în ochi. Le stingem; pastila rămâne ca toate celelalte. */
html body #seatSouth #playerArea #rlApron #raActiuni .action-btn-game.chip-btn.ra-principal {
animation: none !important;
}
html body #seatSouth #playerArea #rlApron #raActiuni .action-btn-game.chip-btn.ra-principal::after {
content: none !important; display: none !important; animation: none !important;
}
/* ── 8. ŞIRUL DE ARUNCATE: capul şi ţinta, în acelaşi limbaj ──────────────────────
Userul: „şi aruncă, aici, acelaşi style de buton" → „există, în aruncate: «aruncă aici»".
„↑ ARUNCĂ AICI" e PSEUDO-ELEMENT (`#discardRow.awaiting-discard::after`), ca pastila
„↓ TRAGE" de pe teanc — deci dunga se face tot strat de fundal, peste un fond ÎNCHIS,
fiindcă stă deasupra pieselor şi un degrade translucid singur n-ar lăsa textul citeţ.
Era din alt limbaj: aur plin .96, text negru, colţ 999px, 9px/800. */
html body #discardRow .sidebar-section-header .section-title {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
height: 22px !important; padding: 0 11px !important; border-radius: 12px !important;
overflow: visible !important; position: relative !important;
background:
linear-gradient(90deg, transparent, rgba(212, 165, 68, .85), transparent)
no-repeat left calc(100% - 1px) / calc(100% - 20px) 2px,
linear-gradient(rgba(212, 165, 68, .14), rgba(212, 165, 68, .05)) !important;
border: .8px solid rgba(212, 165, 68, .45) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18) !important;
color: rgb(212, 165, 68) !important;
font-size: 9px !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
}
html body #discardRow.awaiting-discard::after {
height: 26px !important; padding: 0 11px !important; border-radius: 12px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
background:
linear-gradient(90deg, transparent, rgba(212, 165, 68, .85), transparent)
no-repeat left calc(100% - 1px) / calc(100% - 20px) 2px,
linear-gradient(rgba(212, 165, 68, .28), rgba(212, 165, 68, .12)),
rgba(20, 14, 5, .88) !important;
border: .8px solid rgba(212, 165, 68, .75) !important;
box-shadow: inset 0 1px 0 rgba(212, 165, 68, .35), 0 0 10px rgba(212, 165, 68, .18), 0 3px 10px rgba(0, 0, 0, .5) !important;
color: rgb(232, 198, 106) !important;
font-size: 11px !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
TEMA DESCHISĂ PE MOBIL — porţelan (2026-09-20)
──────────────────────────────────────────────────────────────────────
Fişierul ăsta are PROPRIUL set de culori scrise de mână pentru crom,
geamăn cu cel din `remi-pro.css`: antetul la :3608, bara de jos la :3593,
panoul la :3754, containerul lobby-ului la :3793 — toate maro, toate
`!important`. Ele trăiesc în `@media (max-width: 991px)`, iar reparaţia
de pe desktop stă în `@media (min-width: 992px)`, deci nu se ating.
Simptomul, exact cum arăta: fondul paginii devenea deschis, dar antetul,
bara de jos şi lobby-ul rămâneau negre. Aici sunt aduse şi ele la
porţelan, plus banda de filtre şi paginarea, care au ieşit la iveală
abia la a doua trecere.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
html[data-theme="light"] body.game-menu {
background:
radial-gradient(130% 60% at 50% -18%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 60%),
var(--jo-pag, var(--bg-primary)) !important;
}
html[data-theme="light"] body.game-menu .top-bar,
html[data-theme="light"] body:is(.game-menu, .game-active, .mp-game-active) #navRail,
html[data-theme="light"] body.game-menu #contextPanel,
html[data-theme="light"] body.game-menu .lobby-view {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 96%, #fff) 46%, color-mix(in srgb, var(--bg-secondary) 21%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .14) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(16, 24, 40, .05),
0 3px 6px rgba(16, 24, 40, .07),
0 18px 36px -16px rgba(16, 24, 40, .34) !important;
}
html[data-theme="light"] :is(#lobbyFilterBar, .lobby-filter-bar,
#lobbyPagination, .lobby-pagination) {
background: linear-gradient(180deg, var(--bg-secondary), color-mix(in srgb, var(--bg-secondary) 61%, var(--bg-primary))) !important;
border-color: rgba(16, 24, 40, .10) !important;
}
}
/* ══════════════════════════════════════════════════════════════════════════
TEMA DESCHISĂ — bara de joc şi indiciile de pe mobil (20-09-2026)
──────────────────────────────────────────────────────────────────────────
Fişierul ăsta colorează toată bara în modul joc cu
`rgb(var(--primary-rgb)) !important`, la selectorul
`html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn`.
Pe tema deschisă accentul e #8a6410 şi dă 3,73:1 pe bara albă.
Regulile de mai jos au aceeaşi formă plus atributul de temă, ca să treacă
varianta închisă a accentului — nu adaugă culori noi.
Probat la 390px portret şi 844×390 peisaj.
══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #mpGameBarLeave,
html[data-theme="light"] #mpGameBarLeave :is(span, .material-symbols-rounded),
html[data-theme="light"] body:is(.game-active, .mp-game-active)
:is(#navRail, #navBarPrimary) .nav-bar-btn,
html[data-theme="light"] body:is(.game-active, .mp-game-active)
:is(#navRail, #navBarPrimary) .nav-bar-btn :is(span, .material-symbols-rounded) {
color: var(--primary-hover) !important;
}
html[data-theme="light"] :is(#navBarPrimary, #navRail) .nav-bar-btn.active {
background-image: linear-gradient(rgba(138, 100, 16, .12), rgba(138, 100, 16, .07)) !important;
}
/* Verdele de câştig era #22c55e, iar indiciile de gest #81c784 — amândouă
prea deschise pe fundal deschis (1,79 şi 1,33). */
html[data-theme="light"] :is(.score-balance-delta, .ges-text) {
color: var(--success) !important;
}
/* Iconiţa din butonul roşu de ieşire lua culoarea textului şters, deci
ieşea gri pe roşu; pe un buton plin trebuie să moştenească. */
html[data-theme="light"] :is(.btn-control.btn-secondary, .btn-control.btn-danger)
:is(.material-symbols-rounded, span) {
color: inherit !important;
}
html[data-theme="light"] .btn-control.btn-secondary { color: #ffffff !important; }
/* ══════════════════════════════════════════════════════════════════════════
23-09-2026 — LOT DIN AUDITUL CU PARTIDE LIVE (Layout Validation Engine)
──────────────────────────────────────────────────────────────────────────
Măsurat în partide pornite efectiv, nu din citirea CSS-ului. Cifrele din
comentarii sunt reale, luate cu `scrollWidth` / `getBoundingClientRect`.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. MÂNA ADVERSARULUI LA 3 ŞI 4 JUCĂTORI ──────────────────────────────
Piesa e fixată la 16px (linia ~787) cu `gap: 2px`, deci 14 piese cer 250px.
La 4 jucători fiecare adversar primeşte o TREIME din lăţime:
412×915 → 114px are / 250px cere → 7 piese în afara ecranului
375×667 → 102px are / 250px cere → 9 piese în afara ecranului
915×412 → 123px are / 254px cere → 18 piese în afara ecranului
412×915, 3 jucători → 180px / 250px → 3 piese afară
`flex-wrap: nowrap` + `overflow-x: auto` le făcea derulabile pe o bandă de
114×28px — teoretic accesibile, practic nu. Documentul NU depăşea (părintele
taie), de aceea nici LVE nu le-a semnalat: regula lui se uită la document.
NU micşorăm piesele sub 16px (ar deveni de necitit). Le SUPRAPUNEM, ca un
pachet răsfirat: spatele lor nu poartă informaţie individuală, contează doar
câte sunt, iar marginile rămân numărabile.
`html body` e OBLIGATORIU: `remi-mobile.css` linia ~1759 are
`html body #lateralWrap .opponent-area .opponent-hand { gap: 2px !important }`,
care bate un selector simplu. Prima încercare, fără el, a dat 133px în loc
de 107 — măsurat, nu presupus.
Folosim `[data-players]`, mecanismul casei (73 de reguli îl folosesc deja). */
/* CORECTAT 23-09-2026, după măsurători pe masă MP REALĂ cu mine jucător activ
şi 3 boţi cu câte 14 piese. Varianta de mai jos e a doua; prima NU a mers, şi
merită scris exact de ce.
Scrisesem `gap: 0` pe `html body .game-play-view[data-players="4"] .opponent-area
.opponent-hand` — specificitate (0,4,2). Dar mai sus, în acelaşi fişier, există
html body #lateralWrap .opponent-area .opponent-hand { gap: 2px !important }
cu specificitate (1,2,2). UN id bate oricâte clase, deci gap-ul a rămas 2px.
Suprapunerea (`margin-left`) s-a aplicat, spaţiul dintre piese nu s-a dus — şi
exact acei 2px × 13 intervale lipseau. Măsurat cu `getComputedStyle`, nu citit.
Soluţia NU e `!important` în plus (era deja), ci `#lateralWrap` în selector, ca
specificitatea să fie egală; fiind mai jos în fişier, câştigă.
Înainte → după, masă MP 4 jucători, câte 14 piese la fiecare adversar:
320×568 84 / 94 · 2 tăiate ×3 → 84 / 84 · 0
390×844 107 / 120 · 2 tăiate ×3 → 107 / 107 · 0
412×915 114 / 120 · 1 tăiată ×3 → 114 / 114 · 0
360, 375, 430 şi 768 erau deja curate şi au rămas curate.
Piesa rămâne 16px la toate — nu micşorăm nimic. */
html body .game-play-view[data-players="4"] #lateralWrap .opponent-area .opponent-hand,
html body .game-play-view[data-players="3"] #lateralWrap .opponent-area .opponent-hand {
gap: 0 !important;
}
html body .game-play-view[data-players="4"] .opponent-area
.opponent-tile-back + .opponent-tile-back { margin-left: -10px !important; }
/* La 3 jucători pasul de 10px (16 − 6) nu ajungea la 320px: 134px disponibili,
146px ceruţi. Pas de 8px → 16 + 13×8 = 120px. Verificat la 320/360/375/390/412. */
html body .game-play-view[data-players="3"] #lateralWrap .opponent-area
.opponent-tile-back + .opponent-tile-back { margin-left: -8px !important; }
/* Sub 390px (iPhone SE, Galaxy S9+) containerul scade la 102px, iar pasul de
8px lăsa încă o piesă afară. Pas de 6px → 16 + 13×6 = 94px, încape. */
@media (max-width: 390px) {
html body .game-play-view[data-players="4"] .opponent-area
.opponent-tile-back + .opponent-tile-back { margin-left: -12px !important; }
}
/* ── 2. ŢINTE DE ATINGERE SUB PRAG ────────────────────────────────────────
REFĂCUT 23-09-2026, după măsurători pe MESE MP REALE (spectator pe mese de
boţi, nu solo). Prima variantă din acest lot NU a funcţionat deloc, şi merită
scris de ce, ca să nu se repete.
Rolul „buton" pe care îl verifică LVE e `.nav-rail button, #remiSidebar
button`. Acolo sunt exact 7 butoane, dintre care 6 erau sub 32px — şi NU
erau cele pe care le reparasem. Cauza nu era o regulă lipsă, ci una care
câştiga, din ACEST fişier, mai sus:
html body:is(.game-active, .mp-game-active) #navRail #hintBtn
{ min-height:24px !important } → DOUĂ id-uri
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn,
html body:is(.game-active, .mp-game-active) #navRail #drawerToggleBtn
{ min-height:30px !important; height:30px !important }
Prima mea variantă era `html body #hintBtn.status-btn` — UN singur id.
Pierdea la specificitate, tăcut. De aceea selectoarele de mai jos repetă
exact forma celor care câştigau.
Măsurat înainte → după, la 412×915, masă MP cu 4 jucători:
#hintBtn 32,6×24 → 32,6×32
.nav-bar-btn (×3) 88×30 → 88×32
#drawerToggleBtn 88×30 → 88×32
#pileAuditBtn 25,6×25,6 → 34×34
#fabBtn (doar peisaj) 44×28 → 44×32
`@media (max-width: 991px)` e redundant — fişierul e legat cu
`media="(max-width: 991px)"` în includes/header.php:93 — dar îl păstrăm
explicit: aşa a fost validat live şi aşa se vede din citire că blocul nu
poate atinge desktopul. Pe desktop `.nav-bar-btn` are 38px; fără această
limitare regula i-ar fi SCĂZUT la 32. (Am făcut greşeala şi am prins-o
măsurând, nu citind.) */
@media (max-width: 991px) {
html body:is(.game-active, .mp-game-active) #navRail #hintBtn {
min-width: 32px !important;
min-height: 32px !important;
height: 32px !important;
}
html body:is(.game-active, .mp-game-active) #navRail .nav-bar-btn,
html body:is(.game-active, .mp-game-active) #navRail #drawerToggleBtn {
min-height: 32px !important;
height: 32px !important;
}
}
/* `#fabBtn` — CORECTAT 23-09-2026. Regula era limitată la peisaj şi rata tocmai
cazul rupt: TABLETA ÎN PORTRET.
Vinovatul e chiar în acest fişier, mai sus, FĂRĂ media query:
.nav-bar-fab { height: 26px !important }
Sub 767px portret pierde, pentru că `remi-pro.css` pune acolo
`.nav-rail .nav-bar-fab { min-height: 34px !important }`. Între 768 şi 991
acel `min-height` nu se mai aplică, aşa că rămâne 26px.
768×1024 portret 44 × 26 → 44 × 32
Punem DOAR `min-height`, nu şi `height`: aşa portretul sub 767px rămâne la 34px
(min-height 34 > 32 câştige mai departe), iar peisajul urcă de la 28 la 32.
Desktopul (≥992px, 58×58) nu e atins — media query-ul îl exclude. */
@media (max-width: 991px) {
html body .nav-rail #fabBtn.nav-bar-fab,
html body:is(.game-active, .mp-game-active) #navRail #fabBtn.nav-bar-fab {
min-height: 32px !important;
}
}
/* `#pileAuditBtn` („Vezi toate piesele din joc") — caz aparte.
CSS-ul spunea deja 32px şi tot ieşea 25,6px randat: părintele `#drawPile`
stă într-un subarbore scalat de `remi-pro.css`:
.remi-sidebar .draw-pile, .remi-sidebar .discard-pile
@media (max-width:767px) → scale(0.55)
@media (max-width:767px) and (orientation:portrait) → scale(0.8)
@media (max-width:360px) and (orientation:portrait) → scale(0.72)
O valoare fixă în px nu poate fi corectă pe toate trei. Oglindim exact
aceleaşi praguri într-o variabilă şi împărţim la ea.
34px, nu 32: la `32 / 0.8` iese 31,8px randat — sub prag. Măsurat.
Iconiţa NU se micşorează; creşte doar cutia. */
@media (max-width: 767px) { html body .remi-sidebar { --pileScale: .55 } }
@media (max-width: 767px) and (orientation: portrait) { html body .remi-sidebar { --pileScale: .8 } }
@media (max-width: 360px) and (orientation: portrait) { html body .remi-sidebar { --pileScale: .72 } }
html body #drawPile #pileAuditBtn.pile-audit-btn {
min-width: calc(34px / var(--pileScale, 1)) !important;
min-height: calc(34px / var(--pileScale, 1)) !important;
width: calc(34px / var(--pileScale, 1)) !important;
height: calc(34px / var(--pileScale, 1)) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── 3. CONTRAST PE INSIGNA DE INDICII — MUTAT ────────────────────────────
`html body span.hint-count { color:#2b1d02 }` a stat aici o zi degeaba.
Fişierul se încarcă doar sub 991px (includes/header.php:93), deci pe desktop
cifra rămânea albă pe auriu, la 2,27:1. Regula e acum în `remi-pro.css`,
care se încarcă peste tot. NU o aduce înapoi aici. */
/* ── 4. BUTONUL PLUTITOR PESTE RECLAMĂ — NU SE REPARĂ AICI ────────────────
`#immersiveFloatBtn` („Măreşte tabla"): 48×48px la x=8, `position: fixed`,
`z-index: 300`. Bannerul `a.lobby-ad-card` e la x=20..164, pe toată
înălţimea → se suprapun pe 36×48px.
Am ÎNCERCAT să-l mut la stânga şi am dat înapoi: ca să nu mai atingă
reclama ar trebui `left: -28px`, adică butonul ar ieşi pe jumătate din
ecran. Leacul ar fi mai rău decât boala.
Un buton plutitor cu `position: fixed` şi `z-index: 300` ESTE făcut să stea
peste conţinut — e „strat peste strat", exact cazul pe care LVE îl semnalează
ca „verifică dacă e intenţionat". NU atinge masa de joc, doar reclama.
Dacă vrem totuşi să dispară, e o decizie de aşezare, nu o corectură de CSS:
ori butonul trece în dreapta, ori bannerul începe mai la dreapta de 56px. */