/* ============================================================
   EducaWeb — Learn-to-Read games + reading subject accent
   Additive stylesheet (loaded after app.css).
   ============================================================ */

/* Reading subject accent (page-level --accent for data-subject pages) */
body[data-subject="reading"] { --accent: #FB923C; }

/* ---- Games wrapper ---- */
.games { margin: 2.5rem 0; }
.games__heading {
  font-family: Fredoka, system-ui, sans-serif;
  font-size: 1.5rem; display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
}
.games__heading .icon { width: 1.4em; height: 1.4em; color: var(--accent, #FB923C); }

.game {
  background: var(--surface, #161D33);
  border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: var(--r-lg, 22px);
  padding: 1.25rem 1.25rem 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 0 0 0 var(--accent);
  transition: box-shadow .3s;
}
.game:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #FB923C) 50%, transparent); }
.game__title {
  font-family: Fredoka, system-ui, sans-serif; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 0 0 1rem;
}
.game__xp {
  font-size: .8rem; font-weight: 700; color: var(--accent, #FB923C);
  background: color-mix(in srgb, var(--accent, #FB923C) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #FB923C) 35%, transparent);
  padding: .15rem .55rem; border-radius: 999px; white-space: nowrap;
}
.game__done {
  margin: 1rem 0 0; text-align: center; font-weight: 600;
  color: #34D399;
}
.game__done b { color: var(--accent, #FB923C); }

/* ---- Flashcards (flip) ---- */
.flashcards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
}
.flashcard {
  position: relative; aspect-ratio: 4/3; border: 0; background: transparent;
  cursor: pointer; perspective: 800px; padding: 0; font: inherit;
}
.flashcard__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: .5rem; border-radius: var(--r, 14px);
  backface-visibility: hidden; transition: transform .5s; font-weight: 600;
  border: 2px solid var(--border, rgba(255,255,255,.12));
}
.flashcard__front {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #FB923C) 22%, var(--surface-2,#1B2440)), var(--surface-2, #1B2440));
  font-family: Fredoka, system-ui, sans-serif; font-size: 1.8rem; color: var(--text, #E7ECF5);
}
.flashcard__back {
  background: var(--surface-2, #1B2440); transform: rotateY(180deg);
  font-size: 1.05rem; color: var(--muted, #9AA6C0);
}
.flashcard.is-flipped .flashcard__front { transform: rotateY(180deg); }
.flashcard.is-flipped .flashcard__back  { transform: rotateY(360deg); }
.flashcard:hover { transform: translateY(-2px); }

/* ---- Match ---- */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }
.match__col { display: flex; flex-direction: column; gap: .6rem; }
.match__item {
  font: inherit; font-weight: 600; cursor: pointer; text-align: center;
  padding: .7rem .5rem; border-radius: var(--r, 14px);
  background: var(--surface-2, #1B2440); color: var(--text, #E7ECF5);
  border: 2px solid var(--border, rgba(255,255,255,.12)); transition: .15s;
}
.match__item:hover:not(:disabled) { border-color: var(--accent, #FB923C); }
.match__item.is-selected { border-color: var(--accent, #FB923C); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent,#FB923C) 40%, transparent); }
.match__item.is-correct { background: color-mix(in srgb, #34D399 22%, var(--surface-2,#1B2440)); border-color: #34D399; color: #fff; cursor: default; }
.match__item.is-wrong { animation: shake .35s; border-color: #F87171; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ---- Word build ---- */
.wordbuild { display: flex; flex-direction: column; gap: 1rem; }
.wordbuild__item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  background: var(--surface-2, #1B2440); border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: var(--r, 14px); padding: .75rem;
}
.wordbuild__item.is-correct { border-color: #34D399; }
.wordbuild__clue { font-size: 2rem; }
.wordbuild__answer {
  min-height: 2.4rem; display: flex; gap: .25rem; align-items: center; flex-wrap: wrap;
  font-family: Fredoka, system-ui, sans-serif; font-size: 1.4rem; letter-spacing: .1em;
  border-bottom: 2px dashed var(--border, rgba(255,255,255,.2)); color: var(--accent, #FB923C);
}
.wordbuild__item.is-correct .wordbuild__answer { color: #34D399; border-bottom-color: #34D399; }
.wordbuild__tiles { grid-column: 2 / 3; display: flex; gap: .35rem; flex-wrap: wrap; }
.tile {
  font: inherit; font-family: Fredoka, system-ui, sans-serif; font-size: 1.2rem; font-weight: 700;
  min-width: 2.2rem; height: 2.2rem; cursor: pointer; color: var(--text, #E7ECF5);
  background: var(--surface, #161D33); border: 2px solid var(--border, rgba(255,255,255,.15));
  border-radius: 10px; transition: .12s;
}
.tile:hover:not(:disabled) { border-color: var(--accent, #FB923C); transform: translateY(-2px); }
.tile.is-used { opacity: .25; cursor: default; transform: none; }
.wordbuild__reset {
  grid-column: 3 / 4; font-size: 1.2rem; line-height: 1; cursor: pointer;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--muted, #9AA6C0);
  background: var(--surface, #161D33); border: 1px solid var(--border, rgba(255,255,255,.15));
}
.wordbuild__reset:hover { color: var(--accent, #FB923C); }

@media (max-width: 560px) {
  .wordbuild__item { grid-template-columns: auto 1fr; }
  .wordbuild__reset { grid-column: 2 / 3; justify-self: end; }
  .match { gap: .6rem .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flashcard__face, .tile, .match__item { transition: none; }
  .match__item.is-wrong { animation: none; }
}