/* ============================================================
   LIMBA ROMÂNĂ, CLASA a II-a — jocurile (jocuri-tipuri.js)
   Toate clasele încep cu r2-. Întârzierile animațiilor vin din
   variabila --intarziere.
   ============================================================ */

.r2-joc { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 1000px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.r2-cerinta { margin: 0; padding: 10px 16px; border-radius: 16px; background: var(--albastru-pal); font-size: clamp(1.1rem, 2.8vw, 1.4rem); font-weight: 800; line-height: 1.35; text-align: center; }
.r2-puncte { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.r2-punct { width: 18px; height: 18px; border: 3px solid var(--linie); border-radius: 50%; background: #fff; }
.r2-punct--plin { border-color: var(--verde); background: var(--verde); animation: r2-pop 0.4s both; }
@keyframes r2-pop { 50% { transform: scale(1.6); } }

/* ---------- cartonașele ---------- */
.r2-tava { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 96px; padding: 12px; border: 3px dashed #f0c96a; border-radius: 20px; background: #fff8e6; }
.r2-piesa {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  min-height: 64px;
  padding: 8px 14px;
  border: 3px solid var(--albastru);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 var(--linie);
  color: var(--cerneala);
  text-align: center;
  cursor: pointer;
}
.r2-piesa__text { font-size: clamp(1.2rem, 3.4vw, 1.6rem); font-weight: 900; line-height: 1.2; }
.r2-piesa__img.imagine { width: 72px; height: 72px; }
.r2-piesa__img.imagine--emoji { font-size: 52px; }
.r2-piesa--cuvant { min-height: 60px; background: linear-gradient(#fff, #f2f8ff); }
.r2-ales { outline: 5px solid var(--galben); outline-offset: 3px; background: #fffbea; }
.r2-piesa--pusa { min-height: 44px; padding: 4px 10px; box-shadow: none; border-color: var(--verde); cursor: default; animation: r2-pune 0.4s ease-out both; }
.r2-piesa--pusa .r2-piesa__text { font-size: 1.05rem; }
@keyframes r2-pune { from { transform: scale(1.5); opacity: 0.3; } }

/* ---------- trenul ---------- */
.r2-sina {
  position: relative;
  width: 100%;
  min-height: 120px;
  padding: 14px 10px 22px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(transparent calc(100% - 14px), #8d6e63 calc(100% - 14px) calc(100% - 9px), transparent calc(100% - 9px)), #e8f6ff;
}
.r2-garnitura { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 8px 6px; }
.r2-garnitura--vine { animation: r2-vine 0.9s ease-out both; }
@keyframes r2-vine { from { transform: translateX(110%); } }
.r2-garnitura--pleaca { animation: r2-pleaca 1.2s ease-in both; }
@keyframes r2-pleaca { to { transform: translateX(-115%); } }
.r2-locomotiva { font-size: clamp(2.8rem, 8vw, 4rem); line-height: 1; }
.r2-vagon {
  position: relative;
  display: grid;
  place-items: center;
  min-width: clamp(76px, 15vw, 120px);
  min-height: clamp(56px, 11vw, 74px);
  padding: 0 12px 8px;
  border: 3px dashed #9cc0f0;
  border-radius: 12px 12px 6px 6px;
  background: #fff;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight: 900;
}
.r2-vagon::before, .r2-vagon::after { content: ''; position: absolute; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: #455a64; }
.r2-vagon::before { left: 12px; }
.r2-vagon::after { right: 12px; }
.r2-vagon--plin { border: 3px solid #b35e0f; background: #ffe2c2; animation: r2-pune 0.4s ease-out both; }

/* ---------- cutiile ---------- */
.r2-cutii { display: flex; gap: 12px; width: 100%; }
.r2-cutie {
  --c: var(--albastru); --cp: var(--albastru-pal);
  display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; min-height: 170px; padding: 8px;
  border: 4px solid var(--c); border-top-width: 12px; border-radius: 0 0 22px 22px; background: var(--cp);
}
.r2-cutie--1 { --c: #e0731f; --cp: #fff1e3; }
.r2-cutie--2 { --c: #8e44ad; --cp: #f6ebfb; }
.r2-cutie--3 { --c: #23a05a; --cp: #e3f7ec; }
.r2-cutie__cap { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.r2-cutie__e { font-size: 2.2rem; line-height: 1.1; }
.r2-cutie__nume { font-size: clamp(1rem, 2.6vw, 1.3rem); font-weight: 900; line-height: 1.15; color: var(--c); overflow-wrap: break-word; }
.r2-cutie__continut { display: flex; flex: 1; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 6px; padding-top: 8px; }
.r2-salt { animation: r2-salt 0.45s both; }
@keyframes r2-salt { 40% { transform: scale(1.04) translateY(-4px); } }

/* ---------- pescuitul ---------- */
.r2-lac {
  position: relative;
  width: 100%;
  height: clamp(300px, 50vh, 460px);
  overflow: hidden;
  border-radius: 24px;
  background:
    repeating-linear-gradient(170deg, transparent 0 38px, hsl(200 80% 80% / 0.35) 38px 42px),
    linear-gradient(#7cc7f2, #2f8fd0);
}
/* Peștele pornește din afara lacului, din stânga, și iese prin dreapta
   (sau invers); poziția și deplasarea se schimbă împreună. */
.r2-peste {
  position: absolute;
  left: 0;
  animation: r2-inoata var(--durata, 16s) linear var(--intarziere, 0s) infinite both;
}
.r2-peste--stanga { animation-name: r2-inoata-stanga; }
@keyframes r2-inoata { from { left: 0; transform: translateX(-100%); } to { left: 100%; transform: translateX(0); } }
@keyframes r2-inoata-stanga { from { left: 100%; transform: translateX(0); } to { left: 0; transform: translateX(-100%); } }
/* Spre dreapta: capul (emoji-ul întors) în dreapta. */
.r2-peste__corp {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2px;
  min-height: 60px;
  padding: 4px 6px 4px 16px;
  border: 3px solid #fff;
  border-radius: 40% 999px 999px 40%;
  background: #ffb347;
  color: var(--cerneala);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 hsl(30 70% 40% / 0.5);
}
.r2-peste--stanga .r2-peste__corp { flex-direction: row; padding: 4px 16px 4px 6px; border-radius: 999px 40% 40% 999px; background: #ffd65a; }
.r2-peste__e { font-size: 2.2rem; line-height: 1; transform: scaleX(-1); }
.r2-peste--stanga .r2-peste__e { transform: none; }
.r2-peste__text { font-size: clamp(1.2rem, 3.4vw, 1.6rem); font-weight: 900; white-space: nowrap; }
.r2-peste--prins { animation-play-state: paused; }
.r2-peste--prins .r2-peste__corp { animation: r2-sare 0.7s ease-in both; }
@keyframes r2-sare { 40% { transform: translateY(-40px) rotate(-15deg) scale(1.1); } to { transform: translateY(-160px) scale(0.4); opacity: 0; } }
.r2-galeata { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 6px 14px; border-radius: 18px; background: #eef7ff; }
.r2-galeata__e { font-size: 2.4rem; }
.r2-galeata__cuvant { padding: 4px 12px; border-radius: 12px; background: #ffb347; font-size: 1.2rem; font-weight: 900; }

/* ---------- perechile ---------- */
.r2-memorie { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 18vw, 170px), 1fr)); gap: clamp(8px, 1.4vw, 14px); width: 100%; }
.r2-carte { display: grid; aspect-ratio: 1; min-height: 84px; padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; perspective: 800px; }
.r2-carte__spate, .r2-carte__fata {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  backface-visibility: hidden;
  transition: transform 0.45s;
}
.r2-carte__spate { background: linear-gradient(160deg, #4f8ff0, var(--albastru-inchis)); color: #fff; font-size: 2.6rem; font-weight: 900; box-shadow: 0 4px 0 #1a46a3; }
.r2-carte__fata { padding: 6px; border: 3px solid var(--albastru); background: #fff; transform: rotateY(180deg); }
.r2-carte--intoarsa .r2-carte__spate { transform: rotateY(180deg); }
.r2-carte--intoarsa .r2-carte__fata { transform: rotateY(0); }
.r2-carte--gasita .r2-carte__fata { border-color: var(--verde); background: var(--verde-pal); animation: r2-salt 0.5s both; }
.r2-carte__continut { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.r2-carte__continut .imagine { width: clamp(56px, 12vw, 110px); height: clamp(56px, 12vw, 110px); }
.r2-carte__continut .r2-piesa__text { font-size: clamp(1rem, 3vw, 1.5rem); }
.r2-carte__continut .imagine--emoji { font-size: clamp(46px, 9vw, 80px); }

/* ---------- baloanele ---------- */
.r2-baloane { width: 100%; --latime-balon: clamp(84px, 14vw, 124px); }
.r2-baloane .balon { height: calc(var(--latime-balon) * 1.2); font-size: clamp(1.2rem, 3.6vw, 1.9rem); }
.r2-casute { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 70px; }
.r2-casuta { display: grid; place-items: center; min-width: clamp(70px, 14vw, 110px); height: 66px; padding: 0 10px; border: 3px dashed #9cc0f0; border-radius: 14px; background: #fff; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; }
.r2-casuta--plina { border-style: solid; border-color: var(--albastru); background: var(--albastru-deschis); animation: r2-pune 0.35s both; }
.r2-casute--gata .r2-casuta { border-color: var(--verde); background: var(--verde-pal); }

/* ---------- propoziția mare (completează, semnul) ---------- */
.r2-prop-mare { margin: 0; padding: 14px 18px; border-radius: 20px; background: #fffbea; border: 2px solid #f1dc8f; font-size: clamp(1.5rem, 4.4vw, 2.4rem); font-weight: 900; line-height: 1.5; text-align: center; }
.r2-prop-mare--gata { border-color: var(--verde); background: var(--verde-pal); }
.r2-gol--tinta { min-width: 3.6em; min-height: 1.3em; border: 3px dashed var(--albastru); border-radius: 12px; vertical-align: middle; line-height: 1.2; }
.r2-gol--semn.r2-gol--tinta { min-width: 1.6em; }
.r2-gol--plin.r2-gol--tinta { border-style: solid; border-color: var(--verde); background: #fff; animation: r2-pune 0.4s both; }
.r2-gol--semn-pus { font-size: 1.3em; }
.r2-semne-joc { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.r2-semn-mare {
  width: clamp(84px, 16vw, 120px);
  height: clamp(84px, 16vw, 120px);
  border: none;
  border-radius: 24px;
  background: linear-gradient(160deg, #ff8a8a, #d62828);
  color: #fff;
  font: inherit;
  font-size: clamp(3rem, 9vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 0 #8e1414;
  cursor: pointer;
}
.r2-semn-mare:nth-child(2) { background: linear-gradient(160deg, #4f8ff0, var(--albastru-inchis)); box-shadow: 0 6px 0 #1a46a3; }
.r2-semn-mare:nth-child(3) { background: linear-gradient(160deg, #3fc07a, var(--verde)); box-shadow: 0 6px 0 #17783f; }
.r2-semn-mare:active { transform: translateY(4px); }

@media (max-width: 640px) {
  .r2-semne-joc { gap: 12px; }
  .r2-semn-mare { width: 76px; height: 76px; }
  .r2-piesa__text { font-size: 1.15rem; }
  .r2-joc--cutii .r2-tava { min-height: 70px; }
  .r2-cutii { gap: 6px; }
  .r2-cutie { padding: 4px; }
  .r2-tava { padding: 8px; gap: 8px; }
  .r2-piesa { padding: 6px 10px; }
  .r2-peste__corp { min-height: 50px; }
  .r2-peste__e { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .r2-garnitura--vine, .r2-garnitura--pleaca, .r2-vagon--plin, .r2-piesa--pusa, .r2-salt, .r2-punct--plin,
  .r2-casuta--plina, .r2-gol--plin.r2-gol--tinta, .r2-carte--gasita .r2-carte__fata, .r2-peste--prins .r2-peste__corp { animation: none; }
  .r2-garnitura--pleaca { visibility: hidden; }
  .r2-peste { animation-duration: 60s; }
  .r2-carte__spate, .r2-carte__fata { transition: none; }
}