/* ═══════════════════════════════════════════════════════════════════════════
   DESENELE DIN REGULAMENT — Remi pe Tablă (30-09-2026)
   Copiat 1:1 din Jocuri/remi/reguli-desene.css; nou doar rândul „tabla" (la final):
   un rând al tablei cu 15 locuri, cu piese mai mici, ca să încapă pe un rând.
   ── nota originală (Remi, 2026-09-16) ──
   Clase proprii `rd-*`, NU `.tile`: desenele arată la fel în joc, pe pagina
   publică /reguli/remi şi în pagina de probă, fără să se bată cu regulile
   mesei (stativ, etalare, imersiv) care rescriu `.tile` cu !important.

   TEME (19, una chiar luminoasă): cutia, textele, butoanele şi zonele se iau
   din variabilele temei — `--remi-*` în joc, `--color-*` pe pagina publică,
   iar la urmă o valoare de rezervă, pentru pagina de probă. Piesele rămân
   ivorii la toate temele, exact ca la masă: temele ajustează doar muchiile
   şi umbrele (remi-pro.css:25513 şi 25533), deci facem la fel.

   DERULAREA: bare subţiri, ca în restul jocului (remi-pro.css:2504, 4662) —
   4px, urmă transparentă, degetar în culoarea temei.
   ═══════════════════════════════════════════════════════════════════════════ */

.rd {
    /* culorile temei, cu rezerve în lanţ */
    --rd-accent:      var(--remi-accent, var(--color-accent, #d4a544));
    --rd-accent-rgb:  var(--remi-accent-rgb, var(--color-accent-rgb, 212, 165, 68));
    --rd-aur:         var(--remi-gold, #d4a017);
    --rd-text:        var(--remi-text, var(--color-text-primary, #eee6d4));
    --rd-text-sters:  var(--remi-text-dim, var(--color-text-secondary, rgba(238, 230, 212, .6)));
    --rd-fundal:      var(--remi-surface, var(--color-surface, #16241b));
    --rd-fundal-2:    var(--remi-surface-2, var(--color-surface-2, #1d2f23));
    --rd-rama:        rgba(var(--rd-accent-rgb), .28);
    --rd-rama-tare:   rgba(var(--rd-accent-rgb), .5);
    --rd-strat:       rgba(var(--rd-accent-rgb), .07);
    /* verde/roşu = înţeles, nu temă (valid/invalid); rămân la fel peste tot */
    --rd-da: #16a34a;
    --rd-nu: #dc2626;

    --rd-l: 46px;              /* lăţimea piesei */
    --rd-h: 62px;
    --rd-font: 22px;

    margin: 14px 0 18px;
    border: 1px solid var(--rd-rama);
    border-radius: 14px;
    background: var(--rd-fundal);
    padding: 12px 12px 10px;
    color: var(--rd-text);
}
@media (max-width: 560px) { .rd { --rd-l: 36px; --rd-h: 49px; --rd-font: 17px; padding: 10px 8px 8px; } }

.rd:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 3px; }

.rd-cap {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-weight: 800; letter-spacing: .5px; color: var(--rd-accent);
    font-size: 14px; margin-bottom: 8px;
}
.rd-cap .rd-pasi-contor { margin-left: auto; font-size: 11px; color: var(--rd-text-sters); font-weight: 700; }

.rd-pas { display: none; }
.rd-pas.rd-activ { display: block; }
.rd-pas-nr {
    display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--rd-text-sters); margin-bottom: 3px;
}
.rd-pas-text { font-size: 13px; line-height: 1.45; margin: 0 0 10px; color: var(--rd-text); }
.rd-pas-text b { color: var(--rd-accent); }

/* „Toţi paşii": toate cadrele unul sub altul, pentru citit dintr-o bucată sau tipărit */
.rd.rd-desfasurat .rd-pas { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rd-rama); }
.rd.rd-desfasurat .rd-pas:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.rd.rd-desfasurat .rd-inainte,
.rd.rd-desfasurat .rd-inapoi,
.rd.rd-desfasurat .rd-buline,
.rd.rd-desfasurat .rd-pasi-contor { display: none; }

/* un rând de desen: etichetă la stânga, piese, verdict la dreapta */
.rd-rand {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px; border-radius: 10px; margin-bottom: 8px;
    background: var(--rd-strat);
}
.rd-rand:last-child { margin-bottom: 0; }
.rd-rand.rd-masa { background: rgba(22, 163, 74, .12); border: 1px solid rgba(22, 163, 74, .28); }
.rd-rand.rd-mana { background: rgba(var(--rd-accent-rgb), .12); border: 1px solid var(--rd-rama); }
.rd-rand.rd-sir  { background: var(--rd-strat); border: 1px dashed var(--rd-rama-tare); }
.rd-eticheta {
    flex: 0 0 auto; min-width: 62px; font-size: 10px; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase; color: var(--rd-text-sters);
}
.rd-piese { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }
.rd-nota { flex: 1 1 120px; font-size: 11.5px; line-height: 1.35; color: var(--rd-text-sters); }
.rd-nota b { color: var(--rd-text); }

/* verdictul rândului */
.rd-marcaj { flex: 0 0 auto; font-size: 16px; font-weight: 900; line-height: 1; }
.rd-marcaj.rd-ok { color: var(--rd-da); }
.rd-marcaj.rd-nu { color: var(--rd-nu); }

/* ── piesa: ivorie la TOATE temele, ca la masă ─────────────────────────── */
.rd-piesa-cut { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.rd-sub { font-size: 9px; font-weight: 700; letter-spacing: .3px; color: var(--rd-text-sters); white-space: nowrap; }
.rd-sub.rd-sub-aur { color: var(--rd-accent); }

.rd-piesa {
    position: relative; width: var(--rd-l); height: var(--rd-h);
    border-radius: 6px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--rd-font); line-height: 1;
    background: linear-gradient(172deg, #ead7a8 0%, #dcc58a 55%, #c8ad6a 100%);
    box-shadow: inset 0 1px 0 rgba(255,245,210,.9), inset 0 -1px 0 rgba(70,45,15,.65),
                0 0 0 1px rgba(70,45,15,.7), 0 2px 3px rgba(0,0,0,.5);
    font-family: inherit;
}
.rd-piesa .rd-nr { line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.1); }
.rd-piesa .rd-bulina {
    width: calc(var(--rd-font) * .7); height: calc(var(--rd-font) * .7);
    border-radius: 50%; margin-top: 2px; border: 1px solid rgba(0,0,0,.28);
    box-shadow: inset 0 1px 1.5px rgba(255,255,255,.42), 0 1px 1.5px rgba(0,0,0,.22);
}

/* tema luminoasă: acelaşi ivoriu mai deschis şi muchii mai apăsate ca la masă */
[data-theme="light"] .rd-piesa:not(.rd-joker):not(.rd-intors):not(.rd-spate):not(.rd-gol) {
    background: linear-gradient(160deg, #fff 0%, #faf5e8 22%, #efe3c4 55%, #ddc89e 88%, #c7ae7a 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 0 rgba(140,100,55,.38),
                0 0 0 1px rgba(110,75,30,.45), 0 3px 5px rgba(0,0,0,.18);
}

.rd-piesa.rd-red    { color: #b91c1c; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.rd-piesa.rd-blue   { color: #1e40af; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.rd-piesa.rd-yellow { color: #facc15; text-shadow: 0 0 1px #7c5e00, -1px 0 0 #7c5e00, 1px 0 0 #7c5e00, 0 -1px 0 #7c5e00, 0 1px 0 rgba(0,0,0,.35); }
.rd-piesa.rd-black  { color: #111; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

.rd-piesa.rd-red    .rd-bulina { background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%); border-color: #7f1d1d; }
.rd-piesa.rd-blue   .rd-bulina { background: radial-gradient(circle at 35% 30%, #3b82f6 0%, #1e40af 60%, #1e3a8a 100%); border-color: #1e3a8a; }
.rd-piesa.rd-yellow .rd-bulina { background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 55%, #a16207 100%); border-color: #854d0e; }
.rd-piesa.rd-black  .rd-bulina { background: radial-gradient(circle at 35% 30%, #4b5563 0%, #111 60%, #000 100%); border-color: #000; }

/* Jokerul: ivoriu cu ramă aurie şi steluţă (ca la masă) */
.rd-piesa.rd-joker {
    color: #b8860b;
    box-shadow: inset 0 1px 0 rgba(255,245,210,.9), 0 0 0 2px #d4a017, 0 2px 4px rgba(0,0,0,.5);
}
.rd-piesa.rd-joker .rd-nr { font-size: calc(var(--rd-font) * 1.1); }

/* Jokerul ÎNTORS prin înlocuire: alb, gol, fără nimic pe el */
.rd-piesa.rd-intors {
    background: linear-gradient(170deg, #fff, #f8f7f3 60%, #edebe4);
    color: transparent;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(120,110,90,.55), 0 2px 3px rgba(0,0,0,.45);
}

/* Piesa cu ROL de Joker: contur auriu + semnul J */
.rd-piesa.rd-rol { box-shadow: inset 0 1px 0 rgba(255,245,210,.9), 0 0 0 2px #d4a017, 0 2px 4px rgba(0,0,0,.55); }
.rd-piesa.rd-rol::after {
    content: 'J'; position: absolute; left: 2px; bottom: 1px;
    font-size: 10px; font-weight: 900; color: #7a5a00;
    background: linear-gradient(180deg, #f0d075, #d4a544);
    border-radius: 4px; padding: 0 3px; line-height: 12px;
}

/* spatele piesei (teanc) */
.rd-piesa.rd-spate {
    background: linear-gradient(160deg, #7b1d1d, #4a0f0f);
    color: rgba(255, 220, 160, .55);
    font-size: calc(var(--rd-font) * .6);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.4);
}

/* loc gol / piesă care lipseşte */
.rd-piesa.rd-gol {
    background: rgba(var(--rd-accent-rgb), .06); box-shadow: none;
    border: 2px dashed var(--rd-rama-tare); color: var(--rd-text-sters);
    font-size: calc(var(--rd-font) * .8);
}

/* piesa despre care e vorba în pasul curent */
.rd-piesa.rd-evid { outline: 3px solid var(--rd-accent); outline-offset: 2px; }
.rd-piesa.rd-taiat { opacity: .55; }
.rd-piesa.rd-taiat::before {
    content: ''; position: absolute; inset: -2px;
    background: linear-gradient(to bottom right, transparent 45%, var(--rd-nu) 45%, var(--rd-nu) 55%, transparent 55%);
}

/* săgeata dintre grupuri */
.rd-sageata { font-size: 18px; color: var(--rd-accent); padding: 0 2px; align-self: center; }

/* ── bucăţi de interfaţă în desene: buton, zonă de pe masă, iconiţă ─────── */
.rd-buton, .rd-zona, .rd-icon {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; white-space: nowrap; box-sizing: border-box;
}
.rd-buton {
    height: 30px; padding: 0 12px; border-radius: 22px; font-size: 11.5px;
    background: linear-gradient(180deg, #f0d075, #d4a544); color: #2a1f0e;
    border: 2px solid rgba(0, 0, 0, .45); text-shadow: 0 1px 0 rgba(255, 255, 220, .45);
}
.rd-zona {
    min-height: 34px; padding: 6px 12px; border-radius: 9px; font-size: 10.5px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--rd-text-sters);
    background: var(--rd-fundal-2); border: 1px dashed var(--rd-rama-tare);
}
.rd-icon {
    width: 30px; height: 30px; border-radius: 50%; font-size: 15px;
    color: var(--rd-text);
    background: var(--rd-fundal-2); border: 1px solid var(--rd-rama);
}
/* „asta se apasă acum" — acelaşi puls ca la masă, dar liniştit */
.rd-aprins { box-shadow: 0 0 0 2px var(--rd-accent), 0 0 14px rgba(var(--rd-accent-rgb), .55); }
.rd-zona.rd-aprins { border-style: solid; border-color: var(--rd-accent); color: var(--rd-accent); }
@media (prefers-reduced-motion: no-preference) {
    .rd-activ .rd-aprins { animation: rdRespiro 2.4s ease-in-out infinite; }
}
@keyframes rdRespiro {
    0%, 100% { box-shadow: 0 0 0 2px var(--rd-accent), 0 0 8px rgba(var(--rd-accent-rgb), .35); }
    50%      { box-shadow: 0 0 0 2px var(--rd-accent), 0 0 18px rgba(var(--rd-accent-rgb), .75); }
}

/* ── butoanele de pas ──────────────────────────────────────────────────── */
.rd-bara { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rd-btn {
    border: 1px solid var(--rd-rama-tare); border-radius: 20px;
    background: var(--rd-fundal-2); color: var(--rd-text);
    font: 700 12px/1 inherit; padding: 8px 14px; cursor: pointer;
    font-family: inherit;
}
.rd-btn:hover:not(:disabled) { background: rgba(var(--rd-accent-rgb), .18); }
.rd-btn:disabled { opacity: .35; cursor: default; }
.rd-btn.rd-btn-main,
.rd-btn.rd-tot[aria-pressed="true"] {
    background: linear-gradient(180deg, #f0d075, #d4a544); color: #2a1f0e; border-color: #8a6a1e;
}
.rd-buline { display: flex; gap: 5px; margin-left: auto; }
.rd-bulinapas { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--rd-accent-rgb), .3); }
.rd-bulinapas.rd-activ { background: var(--rd-accent); }

/* ── tabel (punctaj) + derularea lui, stilizată ca în joc ──────────────── */
.rd-tabel-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--rd-accent-rgb), .3) transparent;
    -webkit-overflow-scrolling: touch;
}
.rd-tabel-wrap::-webkit-scrollbar { height: 4px; width: 4px; }
.rd-tabel-wrap::-webkit-scrollbar-track { background: transparent; }
.rd-tabel-wrap::-webkit-scrollbar-thumb { background: rgba(var(--rd-accent-rgb), .3); border-radius: 4px; }
.rd-tabel-wrap::-webkit-scrollbar-thumb:hover { background: rgba(var(--rd-accent-rgb), .5); }

.rd-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.rd-tabel th, .rd-tabel td { padding: 5px 7px; border-bottom: 1px solid var(--rd-rama); text-align: left; }
.rd-tabel th { color: var(--rd-accent); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; }
.rd-tabel td { color: var(--rd-text); font-variant-numeric: tabular-nums; }
.rd-tabel tr:last-child td { border-bottom: none; }
.rd-tabel .rd-plus { color: var(--rd-da); }
.rd-tabel .rd-minus { color: var(--rd-nu); }

/* tipărire: toţi paşii, fără butoane, pe alb */
@media print {
    .rd { background: #fff; color: #111; border-color: #999; break-inside: avoid; }
    .rd .rd-pas { display: block !important; }
    .rd-bara { display: none; }
    .rd-cap, .rd-pas-text b, .rd-tabel th { color: #6b4a00; }
    .rd-nota, .rd-eticheta, .rd-sub, .rd-pas-nr { color: #444; }
    .rd-rand { background: #f4f2ec; border-color: #ccc; }
}

/* ── Remi pe Tablă: rândul tablei (15 locuri) — piese mici, pe un singur rând ── */
.rd-rand.rd-tabla {
    --rd-l: 22px; --rd-h: 30px; --rd-font: 11px;
    background: rgba(120, 72, 28, .16); border: 1px solid rgba(160, 110, 50, .38);
}
.rd-rand.rd-tabla .rd-piese { flex-wrap: nowrap; gap: 2px; overflow-x: auto; max-width: 100%; }
.rd-rand.rd-tabla .rd-piesa { border-radius: 4px; flex: 0 0 auto; }
.rd-rand.rd-tabla .rd-piesa .rd-bulina { margin-top: 1px; border-width: .5px; }
.rd-rand.rd-tabla .rd-piesa.rd-gol { border-width: 1px; }
.rd-rand.rd-tabla .rd-sub { font-size: 8px; }
@media (max-width: 560px) { .rd-rand.rd-tabla { --rd-l: 17px; --rd-h: 24px; --rd-font: 9px; } }