/* Somali Language Centre: styles for the interactive learning games. */

/* Ensure the HTML `hidden` attribute wins over .btn's display rule. */
[hidden] { display: none !important; }

.game { max-width: 720px; margin: 0 auto; }
.game__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.game__stats { display: flex; gap: .5rem; flex-wrap: wrap; }
.game__stat {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .85rem;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--primary-dark);
}
.game__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.game__msg {
  min-height: 1.5rem; margin-top: 1rem; text-align: center;
  font-family: var(--font-head); font-weight: 600;
}
.game__msg--ok { color: #1a7f4b; }
.game__msg--err { color: #b00020; }
.game__hint { text-align: center; color: var(--muted); font-size: .92rem; margin-top: .4rem; }
.btn--sm { padding: .5rem 1rem; font-size: .92rem; }

/* ---- Flashcards ---- */
.flashcard {
  perspective: 1200px; width: 100%; max-width: 460px; height: 260px;
  margin: 0 auto; cursor: pointer; background: none; border: 0; padding: 0;
}
.flashcard__inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .5s; transform-style: preserve-3d;
}
.flashcard.is-flipped .flashcard__inner { transform: rotateY(180deg); }
.flashcard__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); padding: 1.5rem; text-align: center;
}
.flashcard__face--front { background: #fff; }
.flashcard__face--back { background: var(--primary); color: #fff; transform: rotateY(180deg); }
.flashcard__label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; opacity: .7; }
.flashcard__word { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 7vw, 2.8rem); margin: .4rem 0; }
.flashcard__sub { font-size: .95rem; opacity: .85; }
.flashcard__tip { text-align: center; color: var(--muted); font-size: .9rem; margin-top: .8rem; }

/* ---- Letter tiles (complete the word / scramble) ---- */
.tiles { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.4rem 0; }
.tile {
  width: 3rem; height: 3.4rem; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; background: var(--primary-light); color: var(--primary-dark);
  border: 1px solid var(--line);
}
.tile--blank { background: #fff; }
.tile-input {
  width: 3rem; height: 3.4rem; border-radius: 10px; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; border: 2px solid var(--accent); background: #fffdf6; color: var(--primary-dark);
}
.tile-input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(249,178,51,.25); }
.tile-input.is-ok { border-color: #1a7f4b; background: #edf9f1; }
.tile-input.is-err { border-color: #b00020; background: #fdecee; }
.clue { text-align: center; font-size: 1.1rem; }
.clue strong { color: var(--primary-dark); }

/* ---- Scramble input ---- */
.answer-row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.answer-input {
  min-width: 220px; text-align: center; text-transform: lowercase;
  font-family: var(--font-head); font-weight: 600; font-size: 1.2rem;
  padding: .7rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--line);
}
.answer-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,178,51,.2); }

/* ---- Match the pairs ---- */
.match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
@media (max-width: 560px) { .match-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; } }
.match-card {
  position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; cursor: pointer;
  background: none; perspective: 800px;
}
.match-card__inner {
  position: relative; width: 100%; height: 100%; transition: transform .4s; transform-style: preserve-3d;
}
.match-card.is-flipped .match-card__inner, .match-card.is-matched .match-card__inner { transform: rotateY(180deg); }
.match-card__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: grid; place-items: center; border-radius: 12px; padding: .4rem; text-align: center;
  font-family: var(--font-head); font-weight: 600;
}
.match-card__face--front {
  background: var(--primary); color: var(--accent); font-size: 1.6rem;
}
.match-card__face--back {
  background: #fff; border: 1px solid var(--line); color: var(--primary-dark);
  transform: rotateY(180deg); font-size: clamp(.85rem, 2.5vw, 1.05rem); word-break: break-word;
}
.match-card.is-matched .match-card__face--back { background: #edf9f1; border-color: #bfe6cd; color: #1a7f4b; }
.match-card:disabled { cursor: default; }

/* ---- Phrase match ---- */
.pm { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 640px; margin: 0 auto; }
.pm__head {
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .6rem; text-align: center;
}
.pm__col { display: grid; gap: .6rem; align-content: start; }
.pm__item {
  text-align: left; padding: .8rem 1rem; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--primary-dark);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pm__col--so .pm__item { color: var(--primary); }
.pm__item:hover:not(:disabled):not(.is-matched) { border-color: var(--primary); }
.pm__item.is-selected { border-color: var(--accent); background: #fffdf6; }
.pm__item.is-matched { border-color: #1a7f4b; background: #edf9f1; color: #1a7f4b; cursor: default; }
.pm__item.is-wrong { border-color: #b00020; background: #fdecee; color: #b00020; }

/* ---- Quiz ---- */
.quiz__q { text-align: center; margin-bottom: 1.4rem; }
.quiz__prompt { color: var(--muted); font-size: .95rem; }
.quiz__word { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.5rem); color: var(--primary-dark); margin: .3rem 0; }
.quiz__options { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 520px) { .quiz__options { grid-template-columns: 1fr; } }
.opt {
  text-align: left; padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--primary-dark);
  transition: border-color .12s ease, background .12s ease;
}
.opt:hover:not(:disabled) { border-color: var(--primary); }
.opt:disabled { cursor: default; }
.opt.is-correct { border-color: #1a7f4b; background: #edf9f1; color: #1a7f4b; }
.opt.is-wrong { border-color: #b00020; background: #fdecee; color: #b00020; }
.quiz__result { text-align: center; }
.quiz__score { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--primary-dark); }

/* ---- Word search ---- */
.ws { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 720px) { .ws { grid-template-columns: 1fr; } }
.ws__scroll { overflow-x: auto; }
.ws__grid { display: grid; gap: 3px; width: max-content; }
.ws__cell {
  width: 2rem; height: 2rem; border: 0; border-radius: 6px; background: var(--bg-soft);
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--primary-dark);
  cursor: pointer; text-transform: uppercase; padding: 0;
}
.ws__cell:hover { background: var(--primary-light); }
.ws__cell.is-sel { background: var(--accent); color: #3a2a00; }
.ws__cell.is-found { background: #cde7d8; color: #1a7f4b; }
.ws__words { display: grid; gap: .6rem; align-content: start; }
.ws__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.2rem; }
.ws__word { font-family: var(--font-head); font-weight: 600; color: var(--primary-dark); padding: .2rem 0; break-inside: avoid; text-transform: capitalize; }
.ws__word.is-done { color: var(--muted); text-decoration: line-through; }
.ws__word small { display: block; color: var(--muted); font-weight: 500; text-transform: none; }

/* ---- Somali Town Run (Game Boy runner) ---- */
.dino { max-width: 440px; margin: 0 auto; }
.dino__screen {
  position: relative; border: 8px solid #0f380f; border-radius: 10px 10px 22px 10px;
  background: #0f380f; box-shadow: var(--shadow-md); overflow: hidden;
}
.dino canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; background: #9bbc0f; }
.dino__hud {
  position: absolute; top: 6px; left: 10px; right: 10px; display: flex; justify-content: space-between;
  align-items: center; font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  color: #0f380f; text-transform: uppercase; letter-spacing: .02em; pointer-events: none;
}
.dino__hud .hearts { letter-spacing: 1px; }
.dino__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: .6rem; overflow-y: auto; }
.dino__panel {
  background: #9bbc0f; border: 4px solid #0f380f; border-radius: 6px; padding: 1rem 1.1rem;
  max-width: 92%; margin: auto; text-align: center; color: #0f380f; box-shadow: 0 6px 0 #0f380f;
}
@media (max-width: 480px) {
  .dino__panel { padding: .7rem .8rem; }
  .dino__panel h3 { font-size: 1.05rem; }
  .dino__panel p { font-size: .85rem; margin: .15rem 0 .55rem; }
  .dino__chars { margin: .4rem 0 .6rem; }
}
.dino__panel h3 { color: #0f380f; font-size: 1.2rem; margin-bottom: .3rem; }
.dino__panel p { color: #14320f; margin: .2rem 0 .7rem; font-size: .95rem; }
.dino__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #306230; }
.dino__opts { display: grid; gap: .5rem; }
.dino__opt {
  font-family: var(--font-head); font-weight: 600; background: #8bac0f; border: 3px solid #0f380f;
  border-radius: 4px; padding: .5rem .8rem; color: #0f380f; cursor: pointer;
}
.dino__opt:hover:not(:disabled) { background: #0f380f; color: #9bbc0f; }
.dino__opt.is-correct { background: #0f380f; color: #9bbc0f; }
.dino__opt.is-wrong { background: #306230; color: #9bbc0f; border-style: dashed; }
.dino__opt:disabled { cursor: default; }
.dino__fb { font-family: var(--font-head); font-weight: 700; color: #0f380f; }
.dino__chars { display: flex; gap: .5rem; justify-content: center; margin: .5rem 0 .8rem; flex-wrap: wrap; }
.dino__char {
  background: #8bac0f; border: 3px solid #0f380f; border-radius: 4px; padding: .4rem .8rem;
  font-family: var(--font-head); font-weight: 600; color: #0f380f; cursor: pointer;
}
.dino__char.is-sel { background: #0f380f; color: #9bbc0f; }
.dino__btn {
  font-family: var(--font-head); font-weight: 700; background: #0f380f; color: #9bbc0f; border: 0;
  border-radius: 4px; padding: .55rem 1.2rem; cursor: pointer;
}
.dino__hint { text-align: center; color: var(--muted); font-size: .88rem; margin-top: .9rem; }

/* ---- Listening quiz ---- */
.lq { text-align: center; margin-bottom: 1.4rem; }
.lq__play { display: inline-flex; align-items: center; gap: .5rem; }
.lq__play svg { width: 18px; height: 18px; }
.lq__word { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; color: var(--primary-dark); margin-top: 1rem; text-transform: capitalize; }
.lq__note { color: var(--muted); font-size: .9rem; margin-top: .5rem; }

/* ---- Crossword ---- */
.xw { display: grid; gap: 1.6rem; grid-template-columns: auto 1fr; align-items: start; }
@media (max-width: 720px) { .xw { grid-template-columns: 1fr; } }
.xw__scroll { overflow-x: auto; }
.xw__grid { display: grid; gap: 2px; background: var(--line); border: 2px solid var(--primary-dark); width: max-content; }
.xw__cell { position: relative; width: 2.2rem; height: 2.2rem; background: #fff; }
.xw__cell--block { background: var(--primary-dark); }
.xw__num { position: absolute; top: 1px; left: 2px; font-size: .55rem; font-weight: 600; color: var(--muted); pointer-events: none; }
.xw__input {
  width: 100%; height: 100%; border: 0; text-align: center; text-transform: uppercase;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--primary-dark);
  background: transparent; padding: 0;
}
.xw__input:focus { outline: none; background: #fff6dc; }
.xw__cell.is-ok .xw__input { color: #1a7f4b; }
.xw__cell.is-err .xw__input { color: #b00020; }
.xw__clues { display: grid; gap: 1.2rem; }
.xw__clues h3 { margin-bottom: .5rem; }
.xw__clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xw__clues li { font-size: .95rem; color: var(--body); }
.xw__clues li b { color: var(--primary-dark); margin-right: .3rem; }