/* Piese suplimentare pentru lecțiile de clasa a II-a (agentul b):
   unitățile 3 și 4. Codul: extra-b.js. Clasele și animațiile încep cu rb-. */

/* ---------- mișcări ---------- */
.rb-din-stanga { animation: rb-din-stanga 0.6s cubic-bezier(0.3, 1.3, 0.6, 1) var(--intarziere, 0ms) both; }
.rb-din-dreapta { animation: rb-din-dreapta 0.6s cubic-bezier(0.3, 1.3, 0.6, 1) var(--intarziere, 0ms) both; }
@keyframes rb-din-stanga { from { opacity: 0; transform: translateX(-60px); } }
@keyframes rb-din-dreapta { from { opacity: 0; transform: translateX(60px); } }
.rb-mareste { animation: rb-mareste 0.5s cubic-bezier(0.3, 1.6, 0.6, 1) var(--intarziere, 0ms) both; }
@keyframes rb-mareste { from { opacity: 0; transform: scale(0.2); } }
.rb-cade-in { animation: rb-cade-in 0.55s cubic-bezier(0.3, 1.4, 0.6, 1) var(--intarziere, 0ms) both; }
@keyframes rb-cade-in { from { opacity: 0; transform: translateY(-40px); } }
.rb-intoarce { display: inline-block; animation: rb-intoarce 0.45s ease-in-out; }
@keyframes rb-intoarce { 50% { transform: scaleY(0); } }

/* Semnul care cade la locul lui. */
.rb-semn { display: inline-block; color: var(--rosu); font-weight: 900; animation: rb-semn 0.7s cubic-bezier(0.3, 1.6, 0.6, 1) var(--intarziere, 0ms) both; }
@keyframes rb-semn { from { opacity: 0; transform: translateY(-60px) scale(2.2); } }

.rb-butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- cadeSemn ---------- */
.rb-cade { display: flex; flex-direction: column; gap: 10px; width: min(100%, 760px); }
.rb-cade--grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.rb-cade__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 8px 16px; border-radius: 16px; background: var(--albastru-pal); }
.rb-cade__text { margin: 0; font-size: clamp(1.3rem, 3.8vw, 2rem); font-weight: 800; line-height: 1.4; text-align: left; }
.rb-cade__linie { display: block; }
.rb-cade__eticheta { color: var(--cerneala-slaba); font-size: 1.05rem; font-weight: 800; }
.rb-cade--grila .rb-cade__rand { justify-content: center; }

/* ---------- perechi ---------- */
.rb-perechi { display: flex; flex-direction: column; gap: 10px; width: min(100%, 680px); }
.rb-perechi__rand { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.rb-perechi__semn { color: var(--albastru); font-size: 1.8rem; font-weight: 900; }
.rb-carte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 60px; padding: 8px 10px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; text-align: center; }
.rb-carte__text { font-size: clamp(1.1rem, 3.2vw, 1.5rem); font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.rb-carte__img.imagine { width: clamp(56px, 12vw, 96px); height: clamp(56px, 12vw, 96px); }
.rb-carte__img.imagine--emoji { font-size: clamp(42px, 9vw, 70px); }

/* ---------- coloane ---------- */
.rb-coloane { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; width: min(100%, 760px); }
.rb-coloana { padding: 10px; border: 3px solid var(--albastru); border-radius: 18px; background: var(--albastru-pal); }
.rb-coloana--1 { border-color: #8e44ad; background: #f6ebfb; }
.rb-coloana__titlu { margin: 0 0 8px; font-size: 1.25rem; font-weight: 900; text-align: center; }
.rb-coloana__lista { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rb-coloana__el { padding: 6px 12px; border-radius: 12px; background: #fff; font-size: 1.2rem; font-weight: 700; }

/* ---------- dialogul în bule ---------- */
.rb-dialog { display: flex; flex-direction: column; gap: 12px; width: min(100%, 720px); }
.rb-dialog__rand { display: flex; flex-direction: column; gap: 2px; max-width: 86%; }
.rb-dialog__rand--stanga { align-self: flex-start; align-items: flex-start; }
.rb-dialog__rand--dreapta { align-self: flex-end; align-items: flex-end; }
.rb-dialog__nume { color: var(--cerneala-slaba); font-size: 1rem; font-weight: 900; }
.rb-bula { position: relative; margin: 0; padding: 10px 16px; border: 3px solid var(--albastru); border-radius: 20px; background: #fff; color: var(--cerneala); font: inherit; font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 700; line-height: 1.35; text-align: left; }
.rb-dialog__rand--dreapta .rb-bula { border-color: #8e44ad; background: #f6ebfb; }
.rb-bula--rau { border-color: var(--rosu); background: var(--rosu-pal); }
.rb-bula--bine { border-color: var(--verde); background: var(--verde-pal); }
.rb-politete { color: var(--verde); }

/* ---------- politețea ---------- */
.rb-politicos { display: flex; flex-direction: column; gap: 12px; width: min(100%, 720px); }
.rb-politicos__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rb-politicos__rand .rb-bula { flex: 1 1 260px; }
.rb-microfon { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- variante ---------- */
.rb-variante { display: flex; justify-content: center; width: 100%; }

/* ---------- enumerarea ---------- */
.rb-enum { margin: 0; padding: 12px 18px; border: 3px dashed var(--linie); border-radius: 18px; font-size: clamp(1.3rem, 3.8vw, 2rem); font-weight: 800; line-height: 1.5; text-align: center; }
.rb-enum__cuvant { display: inline-block; padding: 0 8px; border-radius: 10px; background: #ffe2c2; }
.rb-enum__si { display: inline-block; color: var(--albastru-inchis); }

/* ---------- schimbă cuvântul ---------- */
.rb-schimba { display: flex; flex-direction: column; gap: 10px; width: min(100%, 760px); }
.rb-schimba__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 64px; padding: 8px 16px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; color: var(--cerneala); font: inherit; text-align: left; cursor: pointer; }
.rb-schimba__text { font-size: clamp(1.25rem, 3.6vw, 1.8rem); font-weight: 800; }
.rb-schimba__cuv { display: inline-block; padding: 0 6px; border-radius: 10px; background: #ffe2c2; color: #b35e0f; }
.rb-schimba__rand--gresit .rb-schimba__cuv { background: var(--rosu-pal); color: var(--rosu); }
.rb-schimba__rand--schimbat { border-color: var(--verde); background: var(--verde-pal); }
.rb-schimba__rand--schimbat .rb-schimba__cuv { background: #fff; color: var(--verde); }
.rb-schimba__eticheta { color: var(--cerneala-slaba); font-size: 1rem; font-weight: 800; opacity: 0; transition: opacity 0.3s; }
.rb-schimba__rand--schimbat .rb-schimba__eticheta { opacity: 1; }

/* ---------- poezia ---------- */
.rb-poezie { position: relative; display: flex; flex-direction: column; gap: 10px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 4px 40px 4px 4px; }
.rb-poezie__linii { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rb-strofa { position: relative; padding: 8px 12px 8px 8px; border-radius: 16px; }
.rb-strofa--0 { background: #fff1d6; }
.rb-strofa--1 { background: #e3f1ff; }
.rb-strofa--2 { background: #e8f8ec; }
.rb-strofa--3 { background: #f6ebfb; }
.rb-strofa__eticheta { position: absolute; top: -10px; right: 10px; padding: 0 8px; border-radius: 8px; background: var(--albastru); color: #fff; font-size: 0.85rem; font-weight: 800; }
.rb-vers { display: flex; align-items: baseline; gap: 8px; font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-weight: 700; line-height: 1.5; text-align: left; }
.rb-vers__nr { flex: none; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; font-size: 0.75em; font-weight: 900; color: transparent; }
.rb-vers__nr--plin { background: var(--albastru); color: #fff; animation: rb-mareste 0.4s both; }
.rb-rima { border-radius: 8px; transition: background-color 0.3s, color 0.3s; }
.rb-rima--aratata { padding: 0 3px; font-weight: 900; animation: rb-puls 0.6s ease-in-out var(--intarziere, 0ms) 2; }
@keyframes rb-puls { 50% { transform: scale(1.15); } }
.rb-rima--0 { background: #ffd2a8; color: #a04a00; }
.rb-rima--1 { background: #c9e2ff; color: #1d4fb8; }
.rb-rima--2 { background: #c8f0d6; color: #17783f; }
.rb-rima--3 { background: #ecd2f8; color: #7a2f99; }
.rb-linie { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.rb-linie--0 { stroke: #e0731f; }
.rb-linie--1 { stroke: #2f6fde; }
.rb-linie--2 { stroke: #23a05a; }
.rb-linie--3 { stroke: #8e44ad; }

/* ---------- portretul ---------- */
.rb-portret { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; width: min(100%, 760px); }
.rb-portret__desen { flex: none; width: min(220px, 60vw); }
.rb-portret__svg { display: block; width: 100%; height: auto; }
.rb-parte { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; transition: opacity 0.5s, transform 0.6s cubic-bezier(0.3, 1.5, 0.6, 1); }
.rb-parte--vazuta { opacity: 1; transform: none; }
.rb-gura { transition: opacity 0.3s; }
.rb-gura--ascunsa { opacity: 0; }
.rb-portret__lista { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rb-portret__el { padding: 6px 12px; border-radius: 12px; background: var(--albastru-pal); font-size: 1.2rem; font-weight: 700; text-align: left; }

/* ---------- vocalele ---------- */
.rb-litera { display: inline-block; font-weight: 900; transition: color 0.3s; }
.rb-pun-vocale { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 900; }
.rb-pun-vocale__cuvant { display: inline-flex; padding: 4px 12px; border-radius: 14px; background: var(--albastru-pal); }
.rb-vocala-lipsa { display: inline-block; max-width: 0; overflow: hidden; color: var(--rosu); opacity: 0; transform: translateY(-30px); transition: max-width 0.6s, opacity 0.6s, transform 0.6s cubic-bezier(0.3, 1.5, 0.6, 1); }
.rb-pun-vocale--gata .rb-vocala-lipsa { max-width: 1.2em; opacity: 1; transform: none; }

.rb-vocale { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.rb-vocale__cuvant { display: inline-flex; padding: 4px 10px; border-radius: 14px; background: var(--albastru-pal); transition: gap 0.5s; }
.rb-vocale__silaba { display: inline-flex; border-radius: 10px; transition: padding 0.5s, background-color 0.5s; }
.rb-vocale--colorate .rb-litera--v { color: var(--rosu); animation: rb-sare 0.5s ease-out var(--intarziere, 0ms) both; }
@keyframes rb-sare { 40% { transform: translateY(-16px); } }
.rb-vocale--silabe .rb-vocale__cuvant { gap: 10px; background: none; }
.rb-vocale--silabe .rb-vocale__silaba { padding: 2px 8px; background: #fff1d6; box-shadow: inset 0 -4px 0 #f0c96a; }

.rb-schema { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.rb-schema__cuvant { display: flex; flex-direction: column; align-items: stretch; padding: 6px 12px; border-radius: 14px; background: var(--albastru-pal); }
.rb-schema__litere { display: flex; justify-content: center; }
.rb-schema__litere > span { width: 1.15em; text-align: center; }
.rb-schema__litere:first-child { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.rb-litera--vocala { color: var(--rosu); }
.rb-schema__semn { color: var(--albastru-inchis); font-size: clamp(1.2rem, 3.6vw, 1.7rem); font-weight: 900; }
.rb-schema__semn--v { color: var(--rosu); }

.rb-dale { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rb-dala { display: grid; place-items: center; width: clamp(54px, 12vw, 78px); height: clamp(54px, 12vw, 78px); border-radius: 16px; background: linear-gradient(160deg, #ff8a8a, #d62828); color: #fff; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; box-shadow: 0 4px 0 #8e1414; }

/* ---------- silabele ---------- */
.rb-silabe-anim { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rb-silabe-anim__cuvant { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0; min-height: 70px; padding: 6px 16px; border: 3px solid var(--albastru); border-radius: 18px; background: #fff; color: var(--cerneala); font: inherit; font-size: clamp(1.6rem, 4.6vw, 2.3rem); font-weight: 900; cursor: pointer; transition: gap 0.5s; }
.rb-silabe-anim__silaba { display: inline-block; border-radius: 10px; transition: padding 0.5s, background-color 0.5s; }
.rb-silabe-anim__cuvant--desp { gap: 12px; border-color: var(--verde); background: var(--verde-pal); }
.rb-silabe-anim__cuvant--desp .rb-silabe-anim__silaba { padding: 0 8px; background: #fff; animation: rb-sare 0.5s both; }
.rb-silabe-anim__nr { flex-basis: 100%; font-size: 1rem; color: var(--verde); }
.rb-silabe-anim__nr:empty { display: none; }

/* ---------- ruperea la capăt de rând ---------- */
.rb-rupe { width: 100%; overflow: hidden; padding: 8px 4px 8px 0; }
.rb-caiet {
  display: inline-block;
  padding: 6px 2px 6px 12px;
  border-right: 4px solid var(--rosu);
  background: repeating-linear-gradient(transparent 0 calc(1.7em - 2px), #9cc0f0 calc(1.7em - 2px) 1.7em) #fffef6;
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.7em;
  text-align: left;
}
.rb-caiet__rand { position: relative; min-height: 1.7em; white-space: nowrap; }
.rb-rupe__parte { display: inline; }
.rb-rupe__silaba { transition: box-shadow 0.3s; }
.rb-caiet--silabe .rb-rupe__silaba + .rb-rupe__silaba,
.rb-caiet--silabe .rb-rupe__parte--afara .rb-rupe__silaba:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.rb-rupe__parte--afara { position: absolute; left: calc(100% + 6px); top: 0; color: var(--rosu); }
.rb-rupe__cratima { display: inline-block; visibility: hidden; color: var(--rosu); font-weight: 900; }
.rb-rupe__cratima--pusa { visibility: visible; animation: rb-mareste 0.4s both; }

/* ---------- lista care devine propoziție ---------- */
.rb-lista { padding: 10px 18px; border: 2px solid #f1dc8f; border-radius: 6px 18px 18px 6px; background: #fffbea; box-shadow: 4px 4px 0 #f1dc8f; text-align: left; }
.rb-lista__titlu { margin: 0 0 4px; font-size: 1.25rem; font-weight: 900; }
.rb-lista__el { margin: 0; padding-left: 1.2em; font-size: 1.25rem; font-weight: 700; }
.rb-lista__dus { color: var(--cerneala-slaba); text-decoration: line-through; }
.rb-lista__propozitie { margin: 0; font-size: clamp(1.3rem, 3.6vw, 1.8rem); font-weight: 800; line-height: 1.5; text-align: center; }
.rb-lista__cuvant { display: inline-block; }
.rb-lista__cuvant--pus { padding: 0 4px; border-radius: 8px; background: #ffe2c2; }

/* ---------- felicitarea ---------- */
.rb-felicitare { display: flex; flex-direction: column; gap: 8px; width: min(100%, 460px); padding: 14px 18px; border: 4px double #e0731f; border-radius: 22px; background: linear-gradient(170deg, #fffaf0, #fff1e3); text-align: left; }
.rb-felicitare__imagine { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rb-felicitare__img.imagine { width: 96px; height: 96px; }
.rb-felicitare__img.imagine--emoji { font-size: 72px; }
.rb-felicitare__parte { display: flex; flex-direction: column; gap: 2px; }
.rb-felicitare__parte--sfarsit { align-items: flex-end; text-align: right; }
.rb-felicitare__parte--mijloc .rb-felicitare__text { text-indent: 1.2em; }
.rb-felicitare__eticheta { align-self: flex-start; padding: 0 8px; border-radius: 8px; background: #e0731f; color: #fff; font-size: 0.85rem; font-weight: 800; }
.rb-felicitare__parte--sfarsit .rb-felicitare__eticheta { align-self: flex-end; }
.rb-felicitare__text { margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.45rem); font-weight: 700; line-height: 1.4; }

.rb-felicitari { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; width: 100%; }
.rb-felicitare-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 4px double #e0731f; border-radius: 20px; background: #fff7ec; }
.rb-felicitare-card--1 { border-color: #2f6fde; background: #eef5ff; }
.rb-felicitare-card--2 { border-color: #8e44ad; background: #f8effc; }
.rb-felicitare-card__e { font-size: 3rem; line-height: 1; }
.rb-felicitare-card .r2-text { border: none; background: transparent; padding: 6px; }
.rb-felicitare-card .r2-text__alineat { text-indent: 0; }
.rb-felicitare-card .r2-text__alineat:last-child { text-align: right; }

/* ---------- jocurile ---------- */
/* virgulele */
.rb-virgule { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; row-gap: 6px; }
.rb-virgule__cuvant { padding: 0 2px; }
.rb-loc { width: 26px; min-height: 1.4em; margin: 0 1px; padding: 0; border: none; border-radius: 8px; background: repeating-linear-gradient(transparent 0 6px, #9cc0f0 6px 12px) center / 3px 70% no-repeat; color: var(--rosu); font: inherit; font-weight: 900; cursor: pointer; vertical-align: baseline; }
.rb-loc:hover { background-color: var(--albastru-pal); }
.rb-loc--pus { background: none; animation: rb-semn 0.5s cubic-bezier(0.3, 1.6, 0.6, 1) both; }
.rb-loc--gresit { background-color: var(--rosu-pal); }
.rb-virgula-piesa { min-width: 70px; color: var(--rosu); font-size: 2.6rem; font-weight: 900; line-height: 1; }

/* domino */
.rb-domino-sir { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: 100%; min-height: 80px; padding: 10px; border-radius: 20px; background: #e8f6ff; }
.rb-domino { display: inline-flex; border: 3px solid var(--cerneala); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--linie); }
.rb-domino__jum { display: grid; place-items: center; min-width: 76px; min-height: 52px; padding: 4px 8px; font-size: clamp(1rem, 3vw, 1.3rem); font-weight: 900; }
.rb-domino__jum + .rb-domino__jum { border-left: 3px solid var(--cerneala); }
.rb-domino-buton { padding: 0; border: none; border-radius: 12px; background: none; font: inherit; color: var(--cerneala); cursor: pointer; }

/* replicile */
.rb-replici__sus { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.rb-replici__personaj { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.rb-replici__img.imagine { width: clamp(90px, 22vw, 150px); height: clamp(90px, 22vw, 150px); border-radius: 18px; object-fit: cover; }
.rb-replici__img.imagine--emoji { font-size: clamp(70px, 16vw, 110px); }
.rb-bula--goala { min-width: 120px; color: var(--cerneala-slaba); border-style: dashed; text-align: center; }
.rb-replici__bule { display: flex; flex-direction: column; gap: 10px; width: min(100%, 680px); }
.rb-bula--alege { cursor: pointer; }
.rb-bula--alege:hover { background: var(--albastru-pal); }
.rb-bula--nu { border-color: var(--rosu); background: var(--rosu-pal); }

/* cine este? */
.rb-cine__indicii { display: flex; flex-direction: column; gap: 6px; width: min(100%, 680px); margin: 0; padding: 0 0 0 1.6em; font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 800; text-align: left; }
.rb-cine__indiciu { padding: 4px 10px; border-radius: 10px; background: var(--albastru-pal); }
.rb-cine__grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(40%, 150px), 1fr)); gap: 10px; width: min(100%, 760px); }
.rb-cine__copil { padding: 4px; border: 4px solid var(--linie); border-radius: 18px; background: #fff; cursor: pointer; }
.rb-cine__img.imagine { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.rb-cine__copil--bun { border-color: var(--verde); box-shadow: 0 0 0 4px var(--verde-pal); }

/* versurile */
.rb-versuri__cadru { display: flex; flex-direction: column; gap: 6px; width: min(100%, 560px); padding: 12px; border: 3px dashed #f0c96a; border-radius: 18px; background: #fff8e6; }
.rb-versuri__cadru--gata { border-style: solid; border-color: var(--verde); background: var(--verde-pal); }
.rb-versuri__loc { min-height: 1.8em; padding: 2px 10px; border-bottom: 3px solid var(--linie); font-size: clamp(1.1rem, 3.2vw, 1.45rem); font-weight: 800; text-align: left; }
.rb-versuri__loc--plin { border-bottom-color: transparent; animation: rb-mareste 0.35s both; }
.rb-versuri__tava { flex-direction: column; align-items: stretch; }
.rb-versuri__piesa { min-height: 54px; font: inherit; font-size: clamp(1.05rem, 3vw, 1.35rem); font-weight: 800; }

/* vocalele lipsă */
.rb-vl__cuvant { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 18px; border-radius: 20px; background: #fffbea; border: 2px solid #f1dc8f; }
.rb-vl__cuvant--gata { border-color: var(--verde); background: var(--verde-pal); }
.rb-vl__litera, .rb-vl__gol { display: grid; place-items: center; width: clamp(40px, 9vw, 64px); height: clamp(52px, 11vw, 78px); font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 900; }
.rb-vl__gol { border: 3px dashed var(--rosu); border-radius: 12px; background: #fff; color: var(--rosu); }
.rb-vl__gol--plin { border-style: solid; animation: rb-mareste 0.35s both; }
.rb-vl__vocale { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rb-vl__tasta { width: clamp(56px, 12vw, 80px); height: clamp(56px, 12vw, 80px); border: none; border-radius: 18px; background: linear-gradient(160deg, #ff8a8a, #d62828); color: #fff; font: inherit; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; box-shadow: 0 5px 0 #8e1414; cursor: pointer; }
.rb-vl__tasta:active { transform: translateY(3px); }

/* tăierea cuvântului */
.rb-taie { display: flex; flex-direction: column; width: min(100%, 760px); padding: 10px 14px; border-radius: 8px; background: repeating-linear-gradient(transparent 0 calc(3.2rem - 2px), #9cc0f0 calc(3.2rem - 2px) 3.2rem) #fffef6; }
.rb-taie__rand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 3.2rem; }
.rb-taie__inainte { font-size: clamp(1.2rem, 3.6vw, 1.7rem); font-weight: 700; }
.rb-taie__cuvant { display: inline-flex; align-items: stretch; }
.rb-taie__litera { display: grid; place-items: center; min-width: 0.7em; font-size: clamp(1.4rem, 4.4vw, 2rem); font-weight: 900; }
.rb-taie__litera--afara { color: var(--rosu); background: var(--rosu-pal); }
.rb-taie__litera--margine { box-shadow: 4px 0 0 var(--rosu); }
.rb-taie__gol { width: clamp(12px, 3vw, 22px); min-height: 48px; padding: 0; border: none; border-radius: 6px; background: repeating-linear-gradient(transparent 0 5px, #9cc0f0 5px 10px) center / 3px 80% no-repeat; cursor: pointer; }
.rb-taie__gol:hover { background-color: var(--albastru-pal); }
.rb-taie__cratima { display: grid; place-items: center; color: var(--rosu); font-size: clamp(1.4rem, 4.4vw, 2rem); font-weight: 900; }
.rb-taie__mesaj:empty { display: none; }

/* bulgării */
.rb-bulgari { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.rb-bulgare { display: grid; place-items: center; width: clamp(96px, 22vw, 130px); aspect-ratio: 1; border: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e3efff 60%, #b9d3f2); box-shadow: 0 6px 0 #9cb9dd, inset -6px -8px 0 #d1e2f7; color: var(--albastru-inchis); font: inherit; font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 900; cursor: pointer; }
.rb-bulgare:hover { transform: rotate(-6deg); }

/* semnele lipsă */
.rb-semne-text { display: flex; flex-direction: column; gap: 6px; width: min(100%, 760px); padding: 14px 18px; border: 2px solid #f1dc8f; border-radius: 20px; background: #fffbea; }
.rb-semne-text--gata { border-color: var(--verde); background: var(--verde-pal); }
.rb-semne-text__rand { margin: 0; font-size: clamp(1.25rem, 3.6vw, 1.8rem); font-weight: 800; line-height: 1.6; text-align: left; }
.rb-gol-semn { display: inline-block; min-width: 1.1em; height: 1.3em; margin: 0 3px; border: 3px dashed var(--linie); border-radius: 8px; vertical-align: middle; line-height: 1.1; text-align: center; }
.rb-gol-semn--acum { border-color: var(--albastru); background: #fff; animation: rb-clipeste 1s ease-in-out infinite; }
@keyframes rb-clipeste { 50% { box-shadow: 0 0 0 5px hsl(216 72% 53% / 0.3); } }
.rb-gol-semn--plin { border: none; color: var(--rosu); font-weight: 900; animation: rb-mareste 0.35s both; }
.rb-semne-butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rb-semn-buton { width: clamp(64px, 14vw, 90px); height: clamp(64px, 14vw, 90px); border: none; border-radius: 20px; background: linear-gradient(160deg, #4f8ff0, var(--albastru-inchis)); color: #fff; font: inherit; font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; line-height: 1; box-shadow: 0 5px 0 #1a46a3; cursor: pointer; }
.rb-semn-buton:active { transform: translateY(3px); }

/* felicitarea mea */
.rb-joc-felicitare { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.rb-felicitare-mea { flex: 1 1 280px; }
.rb-felicitare-mea__adresare { font-weight: 900; }
.rb-felicitare-mea__urare { text-indent: 1.2em; }
.rb-felicitare-mea__semnatura { text-align: right; font-style: italic; }
.rb-felicitare-mea--gata { border-color: var(--verde); }
.rb-felicitare-mea__pas { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.rb-felicitare-mea__optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rb-felicitare-mea__optiune { display: inline-flex; align-items: center; gap: 6px; min-height: 56px; text-align: left; }
.rb-felicitare-mea__img.imagine { width: 40px; height: 40px; }
.rb-felicitare-mea__img.imagine--emoji { font-size: 30px; }
.rb-semnatura { min-height: 54px; min-width: 0; flex: 1 1 180px; padding: 6px 12px; border: 3px solid var(--linie); border-radius: 14px; font: inherit; font-size: 1.3rem; font-weight: 700; }

@media print {
  body.rb-tipar * { visibility: hidden; }
  body.rb-tipar .rb-felicitare-mea, body.rb-tipar .rb-felicitare-mea * { visibility: visible; }
  body.rb-tipar .rb-felicitare-mea { position: fixed; top: 20mm; left: 20mm; width: 120mm; }
}

@media (max-width: 640px) {
  .rb-poezie { padding-right: 30px; }
  .rb-perechi__rand { gap: 6px; }
  .rb-carte { padding: 6px; }
  .rb-domino__jum { min-width: 64px; padding: 4px 6px; }
  .rb-felicitare { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-din-stanga, .rb-din-dreapta, .rb-mareste, .rb-cade-in, .rb-intoarce, .rb-semn, .rb-rima--aratata, .rb-vers__nr--plin,
  .rb-vocale--colorate .rb-litera--v, .rb-silabe-anim__cuvant--desp .rb-silabe-anim__silaba, .rb-loc--pus, .rb-versuri__loc--plin,
  .rb-vl__gol--plin, .rb-gol-semn--acum, .rb-gol-semn--plin, .rb-rupe__cratima--pusa { animation: none; }
  .rb-parte, .rb-vocala-lipsa, .rb-vocale__cuvant, .rb-silabe-anim__cuvant { transition: none; }
}

/* virgula din enumerare stă lipită de cuvânt */
.rb-enum .rb-semn { margin-left: -6px; }
.rb-virgula-piesa { font-size: 3.4rem; padding-bottom: 18px; }
.rb-poezie:not(.rb-poezie--nr) .rb-vers__nr { display: none; }
@media (max-width: 640px) {
  .rb-vers { font-size: min(1.6rem, 3.8vw); gap: 4px; white-space: nowrap; }
  .rb-poezie { padding-right: 26px; }
  .rb-strofa { padding: 6px 6px 6px 4px; }
}

/* Cartonașele care intră din lateral nu ies din foaie în timpul mișcării. */
.rb-perechi, .rb-dialog, .rb-politicos, .rb-portret, .rb-felicitare { overflow-x: clip; }