/* ============================================================================
   Lop phu rieng cho nhom tro choi. Nap SAU /assets/app.css.

   O day chi co thu ma he thong chung khong ta duoc: thanh dieu huong cua mot
   man choi, khung san choi, the "chon dap an" va dong bao ket qua. Mau, hinh
   khoi, khoang cach van lay tu bien cua app.css qua lop `app-game`.

   Rang buoc iOS 12 Safari giong app.css: khong `gap` trong flexbox, khong
   `aspect-ratio`, khong `:has()`, khong `min()`/`max()`, `clamp()` luon co mot
   dong thuong dat truoc.
   ========================================================================== */

body { padding:0 var(--s-4) var(--s-8); }

/* ---------- Thanh tren cua mot man choi ---------- */

.g-bar { display:flex; align-items:center; justify-content:space-between; padding-top:var(--s-5); }
.g-bar .k-tag { align-self:center; margin-top:0; margin-left:var(--s-3); }

/* ---------- Khung noi dung ---------- */

.g-panel {
  margin-top:var(--s-5); padding:var(--s-5); text-align:center;
  background:var(--surface); border:1px solid var(--edge);
  border-radius:var(--r-xl); box-shadow:var(--shadow);
}

.g-prompt {
  margin:0; font-family:var(--font-head); font-weight:700; line-height:var(--lh-tight);
  font-size:26px;
  font-size:clamp(26px,5vw,34px);
}
.g-hint { margin:var(--s-2) 0 0; color:var(--ink-soft); font-size:var(--fs-sm); }

.g-msg {
  margin-top:var(--s-4); min-height:2em; text-align:center; color:var(--accent-deep);
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-lg);
}

/* Hang nut ngang. Flexbox `gap` chi co tu Safari 14.1 nen dung margin. */
.g-row { display:flex; flex-wrap:wrap; justify-content:center; margin-top:var(--s-4); }
.g-row > * { margin:0 var(--s-2) var(--s-2); }

/* ---------- Luoi cua man choi ---------- */

.g-grid {
  display:grid; margin-top:var(--s-5);
  grid-gap:var(--s-3); gap:var(--s-3);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px) {
  .g-grid { grid-gap:var(--s-4); gap:var(--s-4); }
  .g-grid-3 { grid-template-columns:repeat(3,1fr); }
  .g-grid-5 { grid-template-columns:repeat(5,1fr); }
}

/* ---------- The chon dap an ---------- */
/* JavaScript cua cac trang nay tu tao the va gan san `animal-card`,
   `fruit-card`, `vehicle-card`. Khong chen them lop `g-` vao do duoc neu khong
   sua JS, nen phai goi thang ten lop cua chung o day. */

.g-pick, .animal-card, .fruit-card, .vehicle-card {
  display:block; width:100%; padding:var(--s-3); text-align:center;
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg);
  box-shadow:var(--shadow); cursor:pointer; touch-action:manipulation;
  color:inherit; text-decoration:none;
  transition:transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.g-pick:hover, .animal-card:hover, .fruit-card:hover, .vehicle-card:hover {
  border-color:var(--accent); box-shadow:var(--shadow-lift);
}
.g-pick:active, .animal-card:active, .fruit-card:active, .vehicle-card:active {
  transform:scale(.97);
}

/* ---------- O hinh cua mot mon do ---------- */
/* `card-visual.js` tra ve <img class="card-visual">; thieu anh thi no doi ngay
   tai cho thanh <span class="card-visual card-visual-emoji">. Hai the phai
   chiem dung mot o de luoi khong nhay khi anh 404.
   Chieu cao co dinh thay cho `aspect-ratio`, von khong co tren iOS 12.
   `contain` chu khong `cover`: tranh cat giay nen trong suot, cat vien la hong. */

.card-visual {
  display:block; width:100%; height:150px; object-fit:contain;
  margin-bottom:var(--s-2); border-radius:var(--r-md);
}

.card-visual-emoji {
  display:flex; align-items:center; justify-content:center;
  font-size:76px; -webkit-user-select:none; user-select:none;
}

.g-pick-name, .animal-name, .fruit-name, .vehicle-name {
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-md);
  line-height:var(--lh-tight);
}
.g-pick-note, .animal-sound { margin-top:var(--s-1); color:var(--ink-soft); font-size:var(--fs-sm); }

.g-pick.correct, .animal-card.correct, .fruit-card.correct, .vehicle-card.correct {
  border-color:var(--accent-deep); box-shadow:0 0 0 4px var(--accent-soft);
}

/* ---------- Nut loc nhom ---------- */
/* `filter-btn` va `active` la ten JS dang treo vao, giu nguyen ten. */

.filter-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s-4);
  background:var(--surface); border:2px solid var(--accent); border-radius:var(--r-pill);
  color:var(--accent-deep); font-family:var(--font-head); font-weight:700; font-size:16px;
  text-decoration:none; cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease, color var(--dur) ease;
}
.filter-btn:hover { background:var(--accent-soft); }
.filter-btn.active {
  background:var(--accent-deep); border-color:var(--accent-deep); color:var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .g-pick, .animal-card, .fruit-card, .vehicle-card, .filter-btn { transition:none; }
  .g-pick:active, .animal-card:active, .fruit-card:active, .vehicle-card:active { transform:none; }
}