/* ============================================================
   MUTĂ LITERELE, DESCOPERĂ CUVINTE — aspectul
   ============================================================
   Albastru deschis, mult aer, litere mari și butoane mari, după
   desenul de referință. Literele încap mereu pe un singur rând: lățimea
   unui cartonaș se calculează din lățimea ecranului și numărul de
   litere (--n), între 52 și 150 de pixeli.
   ============================================================ */

: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;
  --rotunjire: 22px;
  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;
}

/* ---------- cuvântul de pornire ---------- */

.pornire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 28px);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 10px clamp(14px, 3vw, 28px);
  border-radius: var(--rotunjire);
  background: var(--albastru-pal);
}

.pornire__eticheta { margin: 0; color: var(--cerneala-slaba); font-weight: 600; }

.pornire__cuvant {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.6rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.pornire__imagine { width: clamp(90px, 22vw, 190px); height: auto; }

/* ---------- literele ---------- */

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

.litere {
  --n: 4;
  --spatiu: clamp(6px, 1.6vw, 14px);
  display: flex;
  justify-content: center;
  gap: var(--spatiu);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.litera {
  --latime: clamp(52px, calc((min(100vw, 1000px) - 140px - (var(--n) - 1) * var(--spatiu)) / var(--n)), 150px);
  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: grab;
  touch-action: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, background 0.2s;
}

.litera:focus-visible { outline: 5px solid var(--galben); outline-offset: 4px; }

/* Litera aleasă pentru mutarea cu săgețile: mai deschisă, cu chenar galben. */
.litera[aria-pressed='true'] {
  background: linear-gradient(160deg, #7fb2ff, #4f8ff0);
  box-shadow: 0 0 0 6px var(--galben), 0 6px 0 #1a46a3, 0 12px 22px rgba(29, 79, 184, 0.3);
  transform: translateY(-6px);
}

.litera--trasa {
  z-index: 2;
  cursor: grabbing;
  transition: none;
  background: linear-gradient(160deg, #7fb2ff, #4f8ff0);
  box-shadow: 0 16px 28px rgba(29, 79, 184, 0.35);
}

.litere--tragere .litera:not(.litera--trasa) { transition: transform 0.2s ease; }

/* Literele cuvântului care se aude se aprind una după alta. */
.litera.se-citeste { animation: aprinde 0.5s var(--intarziere, 0s) both; }
.litera-text { display: inline-block; }
.litera-text.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); }
}

.sageti {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.sageata {
  width: 56px;
  height: 48px;
  border: 3px solid var(--albastru);
  border-radius: 14px;
  background: var(--card);
  color: var(--albastru);
  font-size: 1.3rem;
  cursor: pointer;
}
.sageata:disabled { opacity: 0.35; cursor: default; }
.sageata:focus-visible { outline: 4px solid var(--galben); outline-offset: 2px; }

.indemn {
  margin: 0;
  min-width: 0;
  text-align: center;
  color: var(--cerneala-slaba);
  font-weight: 600;
}

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

.rezultat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 28px);
  min-height: 120px;
  margin: 16px auto 0;
  padding: 12px clamp(14px, 3vw, 30px);
  border-radius: var(--rotunjire);
  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, 22vw, 180px); height: auto; }

.rezultat__text { text-align: center; }

.rezultat__cuvant {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  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:focus-visible { outline: 4px solid var(--galben); outline-offset: 2px; }

/* ---------- butoanele ---------- */

.comenzi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.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--asculta {
  border: none;
  background: var(--albastru);
  color: #ffffff;
  box-shadow: 0 5px 0 #1a46a3;
}
.buton--asculta:active { transform: translateY(3px); box-shadow: 0 2px 0 #1a46a3; }

.buton--reia {
  border: 3px solid var(--albastru);
  background: var(--card);
  color: var(--albastru-inchis);
}

.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); }
}

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

/* ---------- subsolul: progresul și cuvintele descoperite ---------- */

.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;
}

.descoperite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--cerneala-slaba);
  font-size: 0.95rem;
}

.descoperite__cuvant {
  padding: 2px 10px;
  border-radius: 999px;
  background: #eefaf2;
  color: var(--verde);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.descoperite__cuvant--ascuns { background: var(--albastru-deschis); color: var(--cerneala-slaba); }

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

/* ---------- ecrane mici ---------- */

@media (max-width: 560px) {
  .pagina { padding: 10px 10px 20px; }
  .card { border-radius: 20px; }
  .pornire, .rezultat { gap: 10px; }
  .difuzor { width: 48px; height: 48px; font-size: 1.3rem; }
  .comenzi .buton { flex: 1 1 140px; }
  .subsol { justify-content: center; text-align: center; }
  .buton--urmator { width: 100%; }
  .litera { --latime: clamp(46px, calc((100vw - 76px - (var(--n) - 1) * var(--spatiu)) / var(--n)), 120px); }
}

@media (prefers-reduced-motion: reduce) {
  .litera, .litera.se-citeste, .litera-text.se-citeste, .rezultat--apare, .buton--urmator-gata { animation: none; transition: none; }
}

/* Fără animații, literele citite rămân doar colorate. */
@media (prefers-reduced-motion: reduce) {
  .litera.se-citeste { background: linear-gradient(160deg, #3fc07a, var(--verde)); }
  .litera-text.se-citeste { color: var(--verde); }
}