/* ============================================================
   CÂTE CUVINTE GĂSEȘTI? — aspectul
   ============================================================
   Același limbaj vizual ca „Mută literele, descoperă cuvinte”:
   albastru deschis, litere mari pe cartonașe albastre, butoane mari.
   ============================================================ */

:root {
  --fundal: #eaf4ff;
  --card: #ffffff;
  --cerneala: #12245a;
  --cerneala-slaba: #4a5a7a;
  --albastru: #2f6fde;
  --albastru-inchis: #1d4fb8;
  --albastru-deschis: #e3efff;
  --albastru-pal: #f2f8ff;
  --linie: #cfe0f7;
  --galben: #ffd65a;
  --galben-inchis: #e0a800;
  --verde: #23a05a;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, #f6fbff 0, transparent 40%),
    radial-gradient(circle at 90% 80%, #dcecff 0, transparent 45%),
    var(--fundal);
  color: var(--cerneala);
  font-family: 'Segoe UI', 'Nunito', Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.pagina { max-width: 1000px; margin: 0 auto; padding: 14px 16px 28px; }

.inapoi { display: inline-block; margin-bottom: 10px; color: var(--albastru-inchis); font-weight: 600; text-decoration: none; }
.inapoi:hover { text-decoration: underline; }

.card {
  padding: clamp(16px, 3vw, 32px);
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 10px 40px rgba(47, 111, 222, 0.12);
}

.titlu { margin: 0; text-align: center; font-size: clamp(1.6rem, 4.6vw, 2.8rem); font-weight: 900; line-height: 1.15; }

.instructiune {
  margin: 6px 0 18px;
  text-align: center;
  color: var(--cerneala-slaba);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  font-weight: 600;
}

/* ---------- tabla: rândul cuvântului și literele ---------- */

.tabla { padding: clamp(12px, 2.5vw, 22px); border-radius: 26px; background: var(--albastru-deschis); }

.eticheta { margin: 0 0 6px; text-align: center; color: var(--cerneala-slaba); font-weight: 700; }

.construit {
  --n: 5;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: clamp(70px, 12vw, 104px);
  margin: 0 auto 18px;
  padding: 8px;
  max-width: 640px;
  border: 3px dashed #9cc0f0;
  border-radius: 20px;
  background: var(--card);
}

.construit__gol { align-self: center; color: #8aa0c4; font-weight: 600; }

.litere {
  --n: 5;
  --spatiu: clamp(6px, 1.6vw, 14px);
  display: flex;
  justify-content: center;
  gap: var(--spatiu);
}

.litera {
  --latime: clamp(52px, calc((min(100vw, 1000px) - 140px - (var(--n) - 1) * var(--spatiu)) / var(--n)), 120px);
  display: grid;
  place-items: center;
  width: var(--latime);
  height: calc(var(--latime) * 1.08);
  padding: 0;
  border: none;
  border-radius: clamp(12px, 2vw, 20px);
  background: linear-gradient(160deg, #4f8ff0, var(--albastru) 60%, var(--albastru-inchis));
  color: #ffffff;
  font: inherit;
  font-size: calc(var(--latime) * 0.58);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 0 #1a46a3, 0 10px 18px rgba(29, 79, 184, 0.25);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s, background 0.2s;
}
.litera:active { transform: translateY(4px); box-shadow: 0 2px 0 #1a46a3; }
.litera:focus-visible { outline: 5px solid var(--galben); outline-offset: 4px; }

/* O literă folosită rămâne pe loc, estompată; atinsă, iese din cuvânt. */
.litera--folosita { opacity: 0.28; box-shadow: none; transform: translateY(6px); }

/* Literele din rândul cuvântului: ceva mai mici, cu chenar galben. */
.litera--rand {
  --latime: clamp(46px, 9vw, 84px);
  background: linear-gradient(160deg, #7fb2ff, #4f8ff0);
  box-shadow: 0 4px 0 #1a46a3;
}

.litera.se-citeste { animation: aprinde 0.5s var(--intarziere, 0s) both; }
.litera-text, .cuvant-lista__cuvant { display: inline-block; }
.litera-text.se-citeste, .cuvant-lista__cuvant.se-citeste { animation: aprinde-text 0.5s var(--intarziere, 0s) both; }

@keyframes aprinde {
  50% { background: linear-gradient(160deg, #ffe58a, var(--galben)); color: var(--cerneala); transform: translateY(-8px); }
  100% { background: linear-gradient(160deg, #3fc07a, var(--verde)); }
}
@keyframes aprinde-text {
  50% { color: var(--galben-inchis); transform: translateY(-6px); }
  100% { color: var(--verde); }
}

.unelte { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

.unealta {
  min-height: 48px;
  padding: 0 18px;
  border: 3px solid var(--albastru);
  border-radius: 14px;
  background: var(--card);
  color: var(--albastru-inchis);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
}
.unealta:disabled { opacity: 0.4; cursor: default; }
.unealta:focus-visible { outline: 4px solid var(--galben); outline-offset: 2px; }

/* ---------- rezultatul ---------- */

.rezultat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 28px);
  min-height: 110px;
  margin: 16px auto 0;
  padding: 12px clamp(14px, 3vw, 30px);
  border-radius: 22px;
  background: var(--albastru-pal);
  border: 3px solid transparent;
}
.rezultat[data-stare='nou'] { border-color: #9fd6b3; background: #eefaf2; }
.rezultat[data-stare='stiut'] { border-color: var(--linie); }

.rezultat__imagine { width: clamp(90px, 20vw, 170px); height: auto; }
.rezultat__text { text-align: center; }
.rezultat__cuvant { margin: 0; font-size: clamp(2.2rem, 8vw, 4rem); font-weight: 900; letter-spacing: 0.04em; line-height: 1.05; }
.rezultat__cuvant:empty { display: none; }
.rezultat__mesaj { margin: 4px 0 0; color: var(--cerneala-slaba); font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 700; }
.rezultat[data-stare='nou'] .rezultat__mesaj { color: var(--verde); }

.rezultat--apare { animation: apare 0.5s ease both; }
@keyframes apare {
  0% { transform: scale(0.94); opacity: 0.4; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}

.difuzor {
  flex: none;
  width: 56px;
  height: 56px;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--card);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(47, 111, 222, 0.15);
}
.difuzor--mic { width: 40px; height: 40px; font-size: 1.1rem; }
.difuzor:focus-visible { outline: 4px solid var(--galben); outline-offset: 2px; }

/* ---------- lista cuvintelor de găsit ---------- */

.cuvinte { margin-top: 20px; }
.cuvinte__titlu { margin: 0 0 10px; text-align: center; font-size: 1.1rem; color: var(--cerneala-slaba); }

.lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cuvant-lista {
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 8px;
  border-radius: 16px;
  background: var(--albastru-pal);
  border: 2px solid var(--linie);
}
.cuvant-lista--gasit { background: #eefaf2; border-color: #9fd6b3; }
.cuvant-lista img { flex: none; width: 56px; height: auto; border-radius: 8px; }
.cuvant-lista .difuzor { flex: none; }
.cuvant-lista__cuvant { font-size: 1.4rem; font-weight: 900; letter-spacing: 0.06em; }

.casute { display: flex; gap: 5px; max-width: 100%; }
.casuta {
  display: grid;
  place-items: center;
  width: 32px;
  height: 38px;
  flex: 0 1 32px;
  border-radius: 8px;
  border: 2px solid #9cc0f0;
  background: var(--card);
  color: var(--albastru-inchis);
  font-size: 1.3rem;
  font-weight: 900;
}

.fara-voce { margin: 12px auto 0; max-width: 40rem; text-align: center; color: var(--cerneala-slaba); font-size: 0.95rem; }

/* ---------- subsolul ---------- */

.subsol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--albastru-deschis);
}

.progres { display: flex; align-items: center; gap: 12px; color: var(--cerneala-slaba); font-weight: 600; }
.progres__cale { display: block; width: clamp(100px, 22vw, 260px); height: 10px; border-radius: 999px; background: var(--albastru-deschis); overflow: hidden; }
.progres__bara { display: block; height: 100%; border-radius: 999px; background: var(--albastru); transition: width 0.4s ease; }
.gasite { margin: 0; color: var(--cerneala-slaba); font-weight: 700; }

.buton {
  min-height: 56px;
  padding: 0 28px;
  border-radius: 16px;
  font: inherit;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 800;
  cursor: pointer;
}
.buton:focus-visible { outline: 4px solid var(--galben); outline-offset: 3px; }
.buton--urmator { border: none; background: var(--galben); color: var(--cerneala); box-shadow: 0 5px 0 var(--galben-inchis); }
.buton--urmator-gata { animation: pulseaza 1.4s ease-in-out infinite; }
@keyframes pulseaza { 50% { box-shadow: 0 5px 0 var(--galben-inchis), 0 0 0 8px rgba(255, 214, 90, 0.45); } }

.anunt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
  .pagina { padding: 10px 10px 20px; }
  .card { border-radius: 20px; }
  .litera { --latime: clamp(46px, calc((100vw - 76px - (var(--n) - 1) * var(--spatiu)) / var(--n)), 100px); }
  .litera--rand { --latime: clamp(40px, 13vw, 64px); }
  .unealta { flex: 1 1 140px; padding: 0 8px; font-size: 0.95rem; white-space: nowrap; }
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cuvant-lista { gap: 4px; padding: 6px 4px; }
  .cuvant-lista img { width: 36px; }
  .cuvant-lista__cuvant { font-size: 1.1rem; }
  .difuzor--mic { width: 32px; height: 32px; font-size: 0.95rem; }
  .casuta { width: 24px; height: 30px; font-size: 1rem; }
  .subsol { justify-content: center; text-align: center; }
  .buton--urmator { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .litera, .rezultat--apare, .buton--urmator-gata { animation: none; transition: none; }
  .litera.se-citeste { animation: none; background: linear-gradient(160deg, #3fc07a, var(--verde)); }
  .litera-text.se-citeste, .cuvant-lista__cuvant.se-citeste { animation: none; color: var(--verde); }
}