/* ════════════════════════════════════════════════════════════════════════════
   REMI PE TABLĂ — DOAR ce e nou faţă de Remi Etalat (29-09-2026)
   Tot restul designului (antet, lobby, carduri, sala, chat, setări, modale, toast-uri,
   postav, stativ, piese, butoane) vine din remi-tabla-pro/-features/-mobile.css — copii 1:1 ale foilor Remi.
   Aici: centrul mesei (fără zone de etalare) şi tabla proprie (stativul cu 30 de locuri).
   Culorile vin din variabilele Remi (--remi-*), deci Dark/Light urmează tema Remi.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Centrul mesei: tava zonei de etalare Remi, întinsă peste cele 4 coloane de etalare ── */
.rt-postav #tablaCentru {
    grid-column: zone1-start / zone4-end !important;
    grid-row: zone1-start / zone4-end !important;   /* desktop: zonele stau alături; în picioare: 2×2 */
}
.rt-postav #tablaCentru .zona-mea-hint { pointer-events: none; }

/* ── Tabla proprie: stativul Remi (lemn, două rafturi), cu 2 × 15 locuri fixe ── */
.player-hand.rt-tabla {
    display: grid !important;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 4px 3px;
    align-content: center;
    position: relative;
    overflow: visible !important;
}
.rt-tabla .rt-slot {
    position: relative;
    aspect-ratio: 36 / 50;
    min-width: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.14);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    display: flex;
}
.rt-tabla .rt-slot > .tile {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    touch-action: none;
}

/* ── Finalul: tabla câştigătorului în fereastra Remi de premiere ── */
.rt-final-tabla { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 4px; }
.rt-final-grup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }   /* o combinaţie (sau piesa liberă cu eticheta ei) trece întreagă pe rândul următor */
.rt-final-libera { font-size: 11px; opacity: .75; margin-right: 2px; }
.rt-final-nota { font-size: 13px; opacity: .8; text-align: center; margin-top: 8px; }

/* ── Ascunderea elementelor Tablei: CSS-ul Remi forţează `display` pe jetoane şi pe cardurile
      de adversar (!important), deci ascunderea are nevoie de aceeaşi forţă ── */
.rt-ascuns { display: none !important; }


/* ── Stativul pe ecrane înguste: tabla are 15 locuri fixe pe rând, deci piesa Remi se micşorează
      odată cu locul (aceeaşi piesă, aceleaşi culori şi umbre — doar cifra scalată la loc) ── */
.player-hand.rt-tabla { container-type: inline-size; }
html body #app #playerHand.rt-tabla .rt-slot > .tile .tile-number { font-size: min(26px, 4.4cqi) !important; line-height: 1 !important; }
html body #app #playerHand.rt-tabla .rt-slot > .tile .tile-suit-dot { width: min(9px, 1.5cqi) !important; height: min(9px, 1.5cqi) !important; }
html body #app #playerHand.rt-tabla .rt-slot > .tile .joker-svg { width: 78% !important; height: auto !important; }
html body #app #playerHand.rt-tabla .rt-slot > .tile .joker-label { font-size: min(8px, 1.3cqi) !important; }

/* ── Bara jucătorului pe ecran îngust (≤440px) — ca regula Remi "Ce cade la strâmtoare": Remi păstrează
      acolo doar butoanele principale; la Tabla principale sunt Aruncă şi Închide (şi Refuz, când se poate),
      iar TURA/PIESE (care se văd deja în antetul zonei şi în bara de jos) le lasă locul ── */
@media (max-width: 440px) {
    html body #app #seatSouth #playerArea .player-info-bar .player-module-stats { display: none !important; }
}

/* ── Decorul stativului (muchia raftului, desenată peste piese) nu prinde degetul ── */
#playerHand.rt-tabla::before, #playerHand.rt-tabla::after { pointer-events: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   30-09-2026 — PARITATEA CU REMI ETALAT: stilurile elementelor noi ale Tablei.
   Culorile vin din variabilele temei Remi (--remi-*), deci Întunecat/Luminos merg singure.
   ════════════════════════════════════════════════════════════════════════════ */

/* „Animaţii" OPRITE (Setari) — fără animaţii şi tranziţii nicăieri (piese, panouri, pecete, confetti).
   La Remi Etalat clasa se punea, dar nicio regulă nu o folosea. */
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
    animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* animaţiile pieselor sunt cele din Remi (clasele .mw-draw-ghost / .mw-draw-glow / .mw-flash-piesa /
   .mw-opponent-ghost / .mw-tile-settle / .tile-collecting din remi-tabla-pro.css) — nicio regulă proprie aici */

[data-jucator] { cursor: pointer; }

/* cererile de intrare la masa privată — markup-ul Remi (.mp-joinreq-*), care la Remi Etalat n-are stiluri
   deloc (apare nestilizat, la capătul paginii); aici primeşte cutia lui, în culorile temei */
.mp-joinreq-overlay { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3200;
    width: min(460px, calc(100vw - 24px)); }
.mp-joinreq-overlay + .mp-joinreq-overlay { bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
.mp-joinreq-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
    background: var(--remi-surface-2, #1e1240); border: 1px solid rgba(var(--remi-accent-rgb, 212,165,68), .45); box-shadow: 0 12px 40px rgba(0,0,0,.5); color: var(--remi-text, #fff); }
.mp-joinreq-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(var(--remi-accent-rgb, 212,165,68), .12); }
.mp-joinreq-info { flex: 1; min-width: 0; }
.mp-joinreq-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-joinreq-sub { font-size: 11px; opacity: .8; }
.mp-joinreq-btns { display: flex; gap: 6px; }
.mp-joinreq-btn { display: inline-flex; align-items: center; gap: 4px; border-radius: 9px; padding: 7px 10px; font-weight: 700; font-size: 12px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.mp-joinreq-btn .material-symbols-rounded { font-size: 16px; }
.mp-joinreq-btn.accept { background: linear-gradient(180deg, #3fae6a, #2f8d54); color: #fff; }
.mp-joinreq-btn.refuse { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.3); }
.mp-pending-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(var(--remi-accent-rgb, 212,165,68), .25); border-top-color: var(--remi-accent, #d4a544); animation: spin 1s linear infinite; }

/* tutorial — piesele desenate din lecţii */
.rt-tut-piese { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 10px; }
.rt-tut-piese .tile.tile-sm { width: 28px !important; height: 38px !important; }

/* mărunţişuri */
.rt-bula-reactie .jo-bula-sala-text { font-size: 26px; line-height: 1.1; }
.rdm-player-badge.rt-gata { background: rgba(34,197,94,.15); color: #4ade80; }

/* ── Boţii Tablei (29-09-2026): eticheta BOT la masă şi în premiere ── */
.rt-bot-eticheta {
    display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; vertical-align: middle;
    font-size: 9px; font-weight: 800; letter-spacing: .5px; line-height: 1;
    padding: 2px 5px; border-radius: 4px;
    background: rgba(96, 165, 250, .16); color: #93c5fd;
}
.rt-bot-eticheta .material-symbols-rounded { font-size: 11px; }
[data-theme="light"] .rt-bot-eticheta { background: rgba(37, 99, 235, .1); color: #1d4ed8; }
.mp-opt-btn:disabled { opacity: .35; cursor: not-allowed; }

/* spectatorul: piesele locului 0 pe tablă, cu faţa în jos (ca mâna întoarsă de la Remi) */
.rt-tabla .rt-slot > .opponent-tile-back { width: 100% !important; height: 100% !important; margin: 0 !important; flex: 1 1 auto; }

/* ════════════════════════════════════════════════════════════════════════════
   01-10-2026 — PIESELE ORIGINALE (faţă + spate), TABLA FĂRĂ PIESE TĂIATE, „CUM S-A ÎNCHIS"
   Documentarea (piesa reală 26–27 × 38–40 mm, fildeş, spatele gol) e în NOTITE.md, 01-10-2026.
   Probat live prin injectare pe desktop, telefon drept şi telefon culcat, aprobat de ea.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── FAŢA: fildeş mat, ramă teşită, cifră mare şi îngustă sus, bulina gravată jos (stilul VIP Remi,
      desenat de noi). Jokerul rămâne cel de acum. Galbenul rămâne galbenul original al jocului.
      Cifra se socoteşte din lăţimea piesei (cqw), deci arată la fel pe stativ, la Aruncate şi în final. ── */
html body .tile:not(.color-joker), html body #app .tile:not(.color-joker) {
    container-type: inline-size !important;
    background: linear-gradient(180deg, #fbf8ee 0%, #f3eedd 100%) !important;
    border-radius: 12% / 9% !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
}
/* rama şi umbra NU se pun pe piesele cu o stare (selectată, trasă, sclipire) — acelea îşi păstrează efectul lui Remi */
html body .tile:not(.color-joker):not(.selected):not(.dragging):not(.tile-drag-ghost):not(.drag-insert-marker):not(.mw-draw-glow):not(.meld-flash):not(.playable),
html body #app .tile:not(.color-joker):not(.selected):not(.dragging):not(.tile-drag-ghost):not(.drag-insert-marker):not(.mw-draw-glow):not(.meld-flash):not(.playable) {
    border: 1px solid #cfc6ab !important;
    box-shadow: inset 0 0 0 2px #fffdf6, inset 0 0 0 3px rgba(190, 178, 145, .55), 0 2px 0 #b9ad8c, 0 3px 4px rgba(0, 0, 0, .35) !important;
}
html body .tile:not(.color-joker) .tile-number, html body #app .tile:not(.color-joker) .tile-number,
html body #app #playerHand.rt-tabla .rt-slot > .tile:not(.color-joker) .tile-number {
    font-family: Oswald, 'Arial Narrow', sans-serif !important; font-weight: 700 !important;
    font-size: 58cqw !important; line-height: 1 !important; margin-top: 11% !important; letter-spacing: 0 !important; text-shadow: none !important;
}
html body .tile:not(.color-joker) .tile-suit-dot, html body #app .tile:not(.color-joker) .tile-suit-dot,
html body #app #playerHand.rt-tabla .rt-slot > .tile:not(.color-joker) .tile-suit-dot {
    width: 34% !important; height: auto !important; aspect-ratio: 1 !important; margin-top: auto !important; margin-bottom: 14% !important; border-radius: 50% !important;
    box-shadow: 0 0 0 2px #fbf8ee, 0 0 0 3.5px #ddd4ba, inset 0 1px 2px rgba(0, 0, 0, .45), inset 0 -1px 1px rgba(255, 255, 255, .25) !important;
}
html body .tile.color-red .tile-number, html body #app .tile.color-red .tile-number { color: #e01b1b !important; }
html body .tile.color-red .tile-suit-dot, html body #app .tile.color-red .tile-suit-dot { background: #e01b1b !important; }
html body .tile.color-blue .tile-number, html body #app .tile.color-blue .tile-number { color: #1f63d6 !important; }
html body .tile.color-blue .tile-suit-dot, html body #app .tile.color-blue .tile-suit-dot { background: #1f63d6 !important; }
html body .tile.color-black .tile-number, html body #app .tile.color-black .tile-number { color: #1d1d1f !important; }
html body .tile.color-black .tile-suit-dot, html body #app .tile.color-black .tile-suit-dot { background: #1d1d1f !important; }

/* ── SPATELE, pereche cu faţa: acelaşi fildeş mat, aceeaşi ramă şi aceleaşi colţuri, uşor bombat.
      Fără desen şi fără siglă — ca piesa reală întoarsă. ── */
html body .opponent-tile-back, html body #app .opponent-tile-back, html body #app #lateralWrap .opponent-hand .opponent-tile-back,
html body #app .tile.tile-back, html body .rt-inch-dos {
    background:
        radial-gradient(ellipse 72% 58% at 50% 40%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, #f6f1e2 0%, #ece5cf 100%) !important;
    border: 1px solid #cfc6ab !important;
    border-radius: 12% / 9% !important;
    box-shadow: inset 0 0 0 2px #fffdf6, inset 0 0 0 3px rgba(190, 178, 145, .55), 0 2px 0 #b9ad8c, 0 3px 4px rgba(0, 0, 0, .35) !important;
}

/* ── TABLA — piesa = locaşul, pe orice ecran (regula de mobil Remi îi dădea min-width 32px > locaşul
      de 22px → piesele se suprapuneau în portret) ── */
html body #app #playerHand.rt-tabla .rt-slot > .tile { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; }
/* spatele pieselor la spectator = tot locaşul (pe telefon culcat o regulă de mobil le ţinea la 16×21 în locaşuri de 33×46 — verificat live 01-10) */
html body #app #seatSouth #playerHand.rt-tabla .rt-slot > .opponent-tile-back { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; flex: 1 1 auto !important; }

/* Desktop: piesele la mărimea lor (48×67); tabla mai înaltă (153 în loc de 125), ca rândul 2 să nu mai intre
   sub bara jucătorului. Locul vine din centrul mesei (rândurile zonelor), masa rămâne la fel de înaltă. */
@media (min-width: 992px) and (min-height: 501px) {
    html body #app #playerHand.rt-tabla, html body #app .hand-scroll-wrapper:has(> #playerHand.rt-tabla) { height: 153px !important; min-height: 153px !important; max-height: none !important; }
    html body #app .game-play-view.rt-postav { grid-template-rows: repeat(3, minmax(0, 1fr)) 62px 26px 213px !important; }
}

/* Telefon drept: 3 rânduri × 10 (tot 30 de locuri), piese mari (~32×45), fără derulare; trei rafturi de lemn.
   Locaşul în care cade piesa se află din poziţia reală a locaşului (slotLa + data-slot), deci aranjarea nu se strică. */
@media (orientation: portrait) and (max-width: 991px) {
    html body #app #playerHand.rt-tabla, html body #app .hand-scroll-wrapper:has(> #playerHand.rt-tabla) { height: 168px !important; min-height: 168px !important; max-height: none !important; }
    html body #app #playerHand.rt-tabla { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; gap: 3px 2px !important; align-content: stretch !important; padding: 4px 4px !important; container-type: size !important; }
    /* lăţimea = cea mai mică dintre coloană şi (înălţimea rândului × 0,72), înălţimea din proporţie — altfel locaşul
       lua toată înălţimea rândului (51px) cu lăţimea coloanei (33px) şi piesa ieşea alungită (verificat live 01-10) */
    html body #app #playerHand.rt-tabla .rt-slot { height: auto !important; max-width: 100% !important; aspect-ratio: 36 / 50 !important; justify-self: center; align-self: center;
        width: min(100%, calc((100cqh - 6px) / 3 * 36 / 50)) !important; }
    html body #app #seatSouth .hand-scroll-wrapper:has(> #playerHand.rt-tabla) {
        background:
            linear-gradient(180deg,
                transparent 0, transparent calc(33.333% - 4px), rgba(25, 10, 0, .75) calc(33.333% - 1px), rgba(15, 6, 0, .9) 33.333%, rgba(25, 10, 0, .75) calc(33.333% + 1px), transparent calc(33.333% + 4px),
                transparent calc(66.667% - 4px), rgba(25, 10, 0, .75) calc(66.667% - 1px), rgba(15, 6, 0, .9) 66.667%, rgba(25, 10, 0, .75) calc(66.667% + 1px), transparent calc(66.667% + 4px), transparent 100%),
            linear-gradient(180deg, rgba(255, 230, 170, .4) 0%, transparent 6%, transparent 33.5%, rgba(255, 225, 160, .3) 34.5%, transparent 40%, transparent 67%, rgba(255, 225, 160, .3) 68%, transparent 74%),
            repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(70, 35, 15, .18) 3px, rgba(70, 35, 15, .18) 4px, transparent 4px, transparent 9px, rgba(40, 20, 8, .12) 9px, rgba(40, 20, 8, .12) 10px, transparent 10px, transparent 16px, rgba(90, 50, 25, .08) 16px, rgba(90, 50, 25, .08) 17px),
            linear-gradient(180deg, #d89248 0%, #c57e30 45%, #b87228 55%, #a86520 100%) !important;
    }
}

/* Telefon culcat: 2 × 15 ca pe desktop (golurile dintre grupuri se văd, ambele rafturi), piesa cât încape în rând */
@media (orientation: landscape) and (max-height: 500px) {
    html body #app #playerHand.rt-tabla { display: grid !important; grid-template-columns: repeat(15, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 3px 3px !important; align-content: stretch !important; justify-content: stretch !important; flex-wrap: nowrap !important; container-type: size !important; }
    html body #app #playerHand.rt-tabla .rt-slot { aspect-ratio: 36 / 50 !important; height: auto !important; max-width: 100% !important; justify-self: center; align-self: center;
        width: min(100%, calc((100cqh - 3px) / 2 * 36 / 50)) !important; flex: none !important; }
    html body #app #playerHand.rt-tabla .rt-slot > .opponent-tile-back { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; }
}

/* ── CUM S-A ÎNCHIS — în centrul mesei, pentru toţi (jucători şi spectatori), de la închidere până la
      împărţirea următoare (remi-tabla-pro.js: arataInchiderea / ascundeInchiderea). Tabla câştigătorului
      pe grupuri, piesa liberă, categoria × multiplul. Piesele urmează mărimea centrului (cq). ── */
#rtInchidere {
    position: absolute; inset: 0; z-index: 5; container-type: size; pointer-events: none; border-radius: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px;
    background: radial-gradient(ellipse at 50% 40%, rgba(var(--remi-accent-rgb, 212, 165, 68), .10), transparent 70%);
}
#rtInchidere .rt-inch-carte { width: min(36px, 8.5cqw, calc((100cqh - 56px) * .72)); }
#tablaCentru.rt-are-inchidere > :not(#rtInchidere) { visibility: hidden; }
#rtInchidere .ri-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; color: var(--remi-text, #f3e6c4); font-weight: 600; font-size: 12px; text-align: center;
    opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; }
#rtInchidere.on .ri-cap { opacity: 1; transform: none; }
#rtInchidere .ri-nume { font: 700 clamp(14px, 4.2cqw, 20px)/1.1 Oswald, 'Arial Narrow', sans-serif; letter-spacing: .6px; color: #ffe39a; text-transform: uppercase; }
#rtInchidere .ri-cat { padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #e9c766, #b98a2a); color: #2a1a05; font-weight: 700; font-size: 12px; box-shadow: 0 2px 0 #6e4f12, 0 4px 10px rgba(0, 0, 0, .35); }
#rtInchidere .ri-extra { font-size: 11px; opacity: .85; }
#rtInchidere .ri-rand { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px 12px; max-width: 100%; }
#rtInchidere .ri-tabla { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px 10px; padding: 7px 10px 5px; border-radius: 8px;
    background: linear-gradient(180deg, #c48a4a 0%, #a86c32 45%, #8a5524 100%); box-shadow: inset 0 2px 0 rgba(255, 220, 170, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 6px 16px rgba(0, 0, 0, .45); }
#rtInchidere .ri-grup { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#rtInchidere .ri-piese { display: flex; gap: 3px; }
#rtInchidere .ri-tip { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #3b2208; opacity: .75; border-top: 2px solid rgba(59, 34, 8, .45); padding-top: 2px; width: 100%; text-align: center; white-space: nowrap; }
#rtInchidere .ri-libera { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#rtInchidere .ri-libera .ri-tip { color: #ffe39a; border-color: rgba(255, 227, 154, .5); }
#rtInchidere .ri-libera .rt-inch-carte { transform: rotate(8deg); }
#rtInchidere .ri-libera .rt-inch-in > .tile { box-shadow: 0 0 0 2px #ffd66e, 0 0 14px 3px rgba(255, 214, 110, .7) !important; }
.rt-inch-carte { aspect-ratio: 36 / 50; perspective: 400px; flex: none; }
.rt-inch-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .7, .3, 1); transform: rotateY(180deg); }
.rt-inch-carte.fata .rt-inch-in { transform: rotateY(0); }
html body .rt-inch-in > .tile, html body .rt-inch-in > .rt-inch-dos { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rt-inch-in > .rt-inch-dos { transform: rotateY(180deg); }
html body .rt-inch-in > .tile .joker-svg { width: 70% !important; height: auto !important; }
html body .rt-inch-in > .tile .joker-label { font-size: 6px !important; }
/* grupurile din închidere se rup pe mai multe rânduri când centrul e îngust (telefon drept) — Mozaicul are 14 piese */
#rtInchidere .ri-piese { flex-wrap: wrap; justify-content: center; }
/* Mozaicul (14 piese) stă pe un rând cât încape; pe telefonul drept se rupe singur în două (testat 01-10: forţat pe
   2 rânduri de câte 7 nu mai încăpea în centrul de 109px al telefonului culcat) */
body.no-animations .rt-inch-in { transition: none !important; }

/* ── GRUPAREA (remi-tabla-pro.js: marcheazaGrupuri) — contorul din centru şi piesa liberă sugerată.
      Contorul e buton: îl atingi şi tabla se aşază pe grupuri. Benzile „SUITĂ/FORMAŢIE" folosesc stilul Remi
      (.jo-grup-banda din remi-tabla-pro.css). La închidere centrul se ascunde (rt-are-inchidere), contorul cu el. ── */
#rtContor {
    position: absolute; right: 10px; bottom: 8px; z-index: 4;
    display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 20px);
    padding: 4px 12px; border-radius: 999px; cursor: pointer;
    font: 600 12px/1.3 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(20, 12, 6, .85); color: #f3e6c4; border: 1px solid rgba(212, 165, 68, .55);
}
#rtContor b { font-weight: 800; }
#rtContor.rt-poate { background: linear-gradient(180deg, #3fbf6b, #238a4a); color: #fff; border-color: #145c30; box-shadow: 0 2px 0 #145c30, 0 0 12px rgba(63, 191, 107, .6); }
@media (max-width: 991px) { #rtContor { right: 6px; bottom: 6px; padding: 3px 9px; font-size: 11px; } }
html body #app #playerHand.rt-tabla .tile.rt-libera-sug { outline: 3px solid #3fbf6b; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .rt-inch-in, #rtInchidere .ri-cap { transition: none !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   01-10-2026 (seara) — AUDITUL COMPLET „tot ce apare" (lista în NOTITE.md, „AUDIT COMPLET").
   Fiecare regulă e măsurată în pagină (sonda locală) înainte şi după.
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop lat: locaşul creştea cu lăţimea (1fr), tabla stătea la 153px → de la ~1650px rândurile se tăiau
   (live: 1920×1080 tăiat 29/27px, 2560 tăiat 88px). Coloana are acum cel mult 52px (piesa 52×72, două rânduri
   = 148px, încap în 153); pe ecranele mai înguste nu se schimbă nimic (acolo coloana e oricum sub 52). */
@media (min-width: 992px) and (min-height: 501px) {
    html body #app #playerHand.rt-tabla { grid-template-columns: repeat(15, minmax(0, 52px)) !important; justify-content: center !important; }
}

/* Tableta culcată 1024×768 (şi până la 1279): cele două reclame laterale (160px fiecare) + coloana din dreapta
   (230) lăsau tablei 315px → piese de 14px, butoanele ARUNCĂ/ÎNCHIDE tăiate. La masă reclamele laterale pleacă
   (în lobby rămân) — măsurat la 1024: tabla 638px, piese 35×49, butoanele întregi. */
@media (min-width: 992px) and (max-width: 1279px) {
    html body:is(.game-active, .mp-game-active) #lobbyAdLeft, html body:is(.game-active, .mp-game-active) #lobbyAdRight { display: none !important; }
}

/* Sala: romburile ◆◇◆ stăteau pe un pătrat bej — clasa `.mark` a ornamentului e şi clasa Bootstrap de
   „text evidenţiat" (fundal galben-pal). Fără fundalul Bootstrap. */
.mw-lx-ornament .mark { background: none !important; padding: 0 !important; }

/* Telefon culcat: cifrele adversarului (puncte, piese, ceas) aveau 7px — greu de citit. 9px încap în cardul
   de 133px (măsurat la 667, 844, 956). */
@media (orientation: landscape) and (max-height: 500px) {
    html body:is(.game-active, .mp-game-active) :is(#pointsNorth, #tilesNorth, #timerOpponentValue, #pointsEast, #tilesEast, #timerEastValue, #pointsWest, #tilesWest, #timerWestValue) { font-size: 9px !important; }
}

/* Lobby: pe tabletă şi pe telefonul culcat numele gazdei şi al mesei luau tot rândul, iar eticheta („Deschisă")
   şi MIZA dispăreau în „…". Acum se taie doar numele; eticheta şi miza rămân întregi. */
.lobby-card-name, .lobby-card-room { display: flex !important; align-items: center; gap: 6px; min-width: 0; }
.lobby-card-name .lc-gazda, .lobby-card-room .lc-nume { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-card-name .lc-badge, .lobby-card-room .lc-pts { flex: none; }

/* Telefon culcat: sub avatar scrie „43 sec" la rândul celui de jos şi „online" în rest — lăţimea textului se
   schimba la fiecare tură şi împingea toate jetoanele (TURA/PIESE/BALANŢĂ) cu 3px. Coloana are lăţime fixă,
   cifrele au aceeaşi lăţime. */
@media (orientation: landscape) and (max-height: 500px) {
    html body #seatSouth #playerArea #rlApron .ra-identitate { min-width: 34px !important; flex: none !important; }
    html body #seatSouth #playerArea #rlApron :is(.ra-stare, #raTval) { font-variant-numeric: tabular-nums; }
}

/* Lobby 992–1279 (tabletă culcată): grila de 632px ţinea 3 cartonaşe de 201px; la o masă plină cu „Priveşte"
   numele mesei rămânea cu 50px şi miza ieşea din cartonaş. Două coloane mai late (măsurat la 1024). */
@media (min-width: 992px) and (max-width: 1279px) {
    html body #lobbyGrid.lobby-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }
}

/* Bara de jos la 992–1279: zona XP (190px) intra 24px peste butonul MENU. Bara de progres mai scurtă —
   nivelul, progresul şi „160/200 XP" rămân toate (măsurat la 1024: XP începe la 757, MENU se termină la 741). */
@media (min-width: 992px) and (max-width: 1279px) {
    html body #navRail .status-actions .xp-bar-container { max-width: 150px !important; min-width: 0 !important; flex: 0 1 150px !important; }
    html body #navRail .status-actions .xp-progress-track { min-width: 24px !important; }
}

/* Emblema pe telefonul culcat: textul de sub pecete („SE PREGĂTEŞTE JOCUL URMĂTOR / rămâi pe loc") ieşea sub masă.
   Textul rămâne ÎN emblemă (în lăţimea ei, cum cere ea: „textul la emblemă nu trebuie scos în afară"): litera mai
   mică în peisaj (era 19px, se rupea pe 4–5 rânduri), iar pecetea lasă loc celor două rânduri (remi-tabla-features.js, asazaPecetea). */
@media (orientation: landscape) and (max-height: 500px) {
    #masaEmblema #embSubsol .es-sus { font-size: 13px !important; letter-spacing: .1em !important; }
    #masaEmblema #embSubsol :is(.es-jos, .es-avert) { font-size: 11px !important; }
}

/* Spectatorul pe desktop vedea CULORI / NUMERE / ARUNCĂ / ÎNCHIDE (stinse) sub tabla celui privit şi „Tu: 0 • Adv: 0"
   în bara de jos — nu sunt ale lui. Ca pe telefon (remi-tabla-mobile.css: butoanele ascunse la spectator), pe orice ecran. */
html body.spectator-mode #seatSouth .player-info-bar .action-btn-game { display: none !important; }
html body.spectator-mode .status-bar .score-display { display: none !important; }