/*
 * /game — màn chiếu "Đoán tôn giáo".
 * Chỉ bố cục riêng của trang; màu, chữ, thời lượng lấy từ tokens.css + base.css.
 * Quy ước: docs/design-brief.md §5. Mọi cỡ chữ theo --stage-u (không px cứng).
 */

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-display);
  color: var(--ink);
}

body[data-idle] { cursor: none; }

/* ---------- Khung 16:9: đầu trang | nội dung + bảng điểm ---------- */
#stage {
  --u: var(--stage-u);
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 27);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: calc(var(--u) * 2.5);
  row-gap: var(--g-gap);
  padding: calc(var(--u) * 1.6) var(--g-pad) var(--g-pad);
}

/* Phase nào hiện phần nào (body[data-phase] do game.js đặt). */
body:not([data-phase="intro"]) #intro,
body[data-phase="intro"] .g-head,
body[data-phase="intro"] .g-board,
body:not([data-phase="hint"]):not([data-phase="reveal"]) #round,
body:not([data-phase="final"]) #final,
body:not([data-phase="final"]) .g-winner,
body:not([data-phase="hint"]) .g-hints,
body:not([data-phase="reveal"]) .g-reveal {
  display: none;
}

/* ================================================================
 * Đầu trang — như phần đầu tờ giấy thi, kẻ đôi bên dưới
 * ================================================================ */
.g-head {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--g-gap);
  min-width: 0;
  padding-bottom: calc(var(--u) * 0.9);
  border-bottom: calc(var(--g-rule) * 2.5) double var(--ink);
}

.g-head__titles { flex: none; }

.g-head__game {
  font-size: var(--g-fs-label);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-muted);
}

/* Màn kết quả khi kết thúc sớm / bỏ qua vòng: " · Đã chơi X/N vòng" nhỏ, mờ cạnh tên game. */
.g-head__played { font-weight: 600; }

.g-head__round {
  font-size: var(--g-fs-h2);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: nowrap;
}

.g-head__of {
  font-size: 0.6em;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0;
}

/* Ô "Điểm" của giấy thi: nhãn một dòng | khối đỏ đặc "X điểm" chữ trắng.
 * Mảng đỏ lớn vẫn đọc được trên máy chiếu bị nhạt màu; nét chữ đỏ mảnh thì thành hồng nhạt. */
.g-points {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: 0 0 0 calc(var(--u) * 1.3);
  background: var(--surface);
  border: var(--g-rule) solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.g-points__label {
  font-size: var(--g-fs-team);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.g-points__value {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  padding-inline: calc(var(--u) * 1) calc(var(--u) * 1.1);
  color: var(--accent-ink);
  background: var(--accent);
}

.g-points__num {
  display: inline-block;
  min-width: 0.62em;
  font-size: var(--g-fs-points);
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
}

.g-points__unit {
  font-size: calc(var(--g-fs-points) * 0.45);
  font-weight: 800;
}

.g-points__answer {
  padding: calc(var(--u) * 0.2) calc(var(--u) * 1.3) calc(var(--u) * 0.2) 0;
  font-size: var(--g-fs-h2);
  font-weight: 800;
  line-height: 1.15;
  color: var(--accent);
}

/* Màn kết quả: ô gọi tên nhóm hạng nhất, cùng khung với ô Điểm. */
.g-winner {
  flex: 0 1 auto;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.2);
  min-width: 0;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.3);
  background: var(--surface);
  border: var(--g-rule) solid var(--ink);
  border-radius: var(--radius-sm);
}

.g-winner__label {
  flex: none;
  font-size: var(--g-fs-team);
  font-weight: 700;
  line-height: 1.2;
}

.g-winner__names {
  min-width: 0;
  font-size: var(--g-fs-h2);
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent);
  text-wrap: balance;
}

/* Từ 3 nhóm đồng hạng: nhãn nằm trên, tên nhóm dùng hết bề ngang ô. */
.g-winner[data-many] {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-block: calc(var(--u) * 0.3);
}
.g-winner[data-many] .g-winner__label { font-size: var(--g-fs-label); }
.g-winner[data-many] .g-winner__names { font-size: var(--g-fs-team); }

.g-points[data-mode="points"] .g-points__answer,
.g-points[data-mode="answer"] .g-points__label,
.g-points[data-mode="answer"] .g-points__value { display: none; }

body[data-phase="final"] .g-points { display: none; }

.g-points__num.is-new { animation: points-drop var(--dur) var(--ease-pop) both; }

@keyframes points-drop {
  from { opacity: 0; transform: translateY(-0.25em); }
  to { opacity: 1; transform: none; }
}

/* ================================================================
 * Phase hint — 3 hàng gợi ý cao bằng nhau, lề đỏ như vở
 * ================================================================ */
#round {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  min-height: 0;
  min-width: 0;
}

.g-hints {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.g-hint {
  display: grid;
  grid-template-columns: calc(var(--u) * 8.5) minmax(0, 1fr);
  min-height: 0;
}

.g-hint + .g-hint {
  border-top: var(--g-rule) solid color-mix(in srgb, var(--ink) 18%, var(--bg));
}

.g-hint__margin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 0.3);
  min-width: 0;
  padding-block: calc(var(--u) * 1.15);
  padding-inline-end: calc(var(--u) * 0.8);
  border-inline-end: var(--g-rule) solid var(--rule-margin);
}

.g-hint__label,
.g-hint__pts {
  font-size: var(--g-fs-label);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Bút đỏ mã hoá luật điểm: mức đang chờ khoanh tròn, mức đã qua gạch ngang, mức chưa tới mờ. */
.g-hint__pts .mark { margin-inline-start: -0.42em; }

.g-hint[data-state="past"] .g-hint__pts {
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.1em;
}

.g-hint[data-state="future"] .g-hint__label,
.g-hint[data-state="future"] .g-hint__pts { color: var(--ink-muted); }

.g-hint__body {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: calc(var(--u) * 1.15) 0 calc(var(--u) * 1.15) calc(var(--u) * 1.5);
}

.g-hint__text {
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-variant-numeric: lining-nums; /* Vollkorn mặc định số kiểu cũ (lên xuống dòng), khó đọc trên máy chiếu */
  font-size: var(--g-fs-hint);
  font-weight: 500;
  line-height: 1.26;
  text-wrap: pretty;
}

/* Ô chưa mở: trang vở ô li còn trống, không chứa chữ. */
.g-hint__blank {
  --ruled-step: calc(var(--u) * 2.2);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 max(1px, calc(var(--u) * 0.08)) var(--rule-major);
}

.g-hint__text.is-new { animation: write-in var(--dur-slow) var(--ease) both; }

@keyframes write-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ================================================================
 * Phase reveal — đáp án gạch chân bút đỏ
 * ================================================================ */
.g-reveal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--u) * 1.4);
  min-height: 0;
  min-width: 0;
}

.g-answer {
  max-width: 100%;
  font-size: var(--g-fs-answer);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.g-answer.is-long { font-size: calc(var(--g-fs-answer) * 0.78); }

/* Hộp chữ Be Vietnam Pro cao hơn dòng 1.1em: đệm dưới 0.1em để phần chân chữ nằm trong hộp
 * (không đổi khoảng cách dòng, hết scrollHeight > clientHeight); gạch chân bớt lề tương ứng. */
.g-answer__text { display: block; padding-bottom: 0.1em; }

/* Gạch chân bút đỏ: dài bằng dòng chữ dài nhất, cách xa dấu nặng. */
.g-answer::after {
  content: "";
  display: block;
  width: min(100%, var(--rule-w, 100%));
  height: max(4px, calc(var(--u) * 0.35));
  margin-top: 0.1em;
  background: var(--accent);
  border-radius: 999px;
  transform: rotate(-0.6deg);
  transform-origin: left center;
}

.g-explain {
  max-width: 34em;
  font-family: var(--font-body);
  font-variant-numeric: lining-nums;
  font-size: calc(var(--g-fs-hint) * 0.94);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}

.g-sources {
  max-width: 100%;
  font-size: var(--g-fs-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.g-scored {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--u) * 1.4);
  row-gap: calc(var(--u) * 0.6);
}

.g-scored__label {
  font-size: var(--g-fs-label);
  font-weight: 700;
  color: var(--ink-muted);
}

.g-scored__list {
  display: contents;
}

.g-scored__item {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  font-size: var(--g-fs-team);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.g-scored__item .team-chip { font-size: 0.8em; }
.g-scored__item .mark { margin-inline-start: 0.1em; }

.g-scored__none {
  font-size: var(--g-fs-team);
  font-weight: 600;
  color: var(--ink-muted);
}

/* Công bố: chữ "viết" ra, gạch chân kéo theo, phần còn lại hiện sau. */
.g-reveal.is-entering .g-answer__text { animation: write-in var(--dur-slow) var(--ease) both; }
.g-reveal.is-entering .g-answer::after {
  animation: underline-draw var(--dur-slow) var(--ease) 300ms both;
}
.g-reveal.is-entering :is(.g-explain, .g-sources, .g-scored) {
  animation: fade-in var(--dur) var(--ease) 450ms both;
}
.g-scored__item.is-new { animation: fade-in var(--dur) var(--ease) both; }

@keyframes underline-draw {
  from { transform: rotate(-0.6deg) scaleX(0); }
  to { transform: rotate(-0.6deg) scaleX(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ================================================================
 * Bảng điểm (cột phải 16:9, dải đáy 4:3)
 * ================================================================ */
.g-board {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.g-board__title {
  padding-block: calc(var(--u) * 1.15) calc(var(--u) * 0.6);
  font-size: var(--g-fs-label);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.g-board__list {
  flex: 1;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}

.g-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.3em auto minmax(0, 1fr) auto auto;
  grid-template-areas: "rank chip name flash score";
  align-items: center;
  column-gap: calc(var(--u) * 0.8);
  min-height: 0;
  min-width: 0;
  padding-inline: calc(var(--u) * 0.9) 0; /* chừa chỗ cho vạch "đã ghi điểm" 0.4u ở mép trái */
  border-top: max(1px, calc(var(--u) * 0.08)) solid color-mix(in srgb, var(--ink) 16%, var(--bg));
  background-color: var(--bg); /* nền đặc: khi FLIP trượt qua nhau không lộ chữ hàng bên dưới */
  font-size: var(--g-fs-team);
}

.g-row__rank {
  grid-area: rank;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--ink-muted);
}

.g-row .team-chip {
  grid-area: chip;
  font-size: 0.8em;
}

.g-row__name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.g-row__flash {
  grid-area: flash;
  display: flex;
  justify-content: flex-end;
  font-size: 0.86em;
}

.g-row__score {
  grid-area: score;
  min-width: 1.3em;
  font-size: var(--g-fs-score);
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}

/* Nhóm đã ghi điểm vòng này: vạch đặc màu nhóm ở mép trái + dấu "+p" giữ đến hết vòng;
 * nền nhuốm màu chỉ là tín hiệu phụ (gần như mất trên máy chiếu nhạt). */
.g-row.is-scored {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--team) 22%, transparent), transparent 70%);
  box-shadow: inset calc(var(--u) * 0.4) 0 0 var(--team);
}

/* Đang nháy "+X"/"−X" thì ẩn dấu tĩnh cùng ô. */
.g-row__flash:has(.g-flash) .g-row__got { display: none; }

/* Nháy nền khi vừa được cộng điểm */
.g-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--team) 28%, transparent);
  opacity: 0;
  pointer-events: none;
}
.g-row.is-flash::before { animation: row-flash var(--dur-flash) var(--ease) both; }

@keyframes row-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

/* ================================================================
 * Phase final — bục vinh danh
 * ================================================================ */
#final {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  min-height: 0;
  min-width: 0;
}

.g-podium {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  align-items: stretch;
  column-gap: calc(var(--u) * 1.4);
  min-height: 0;
  padding-top: calc(var(--u) * 1.2);
  border-bottom: calc(var(--g-rule) * 2) solid var(--ink);
}

.g-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  min-height: 0;
  text-align: center;
}

.g-step__name {
  display: flex;
  align-items: center;
  gap: 0.3em;
  max-width: 100%;
  font-size: var(--g-fs-h2);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.g-step__name .team-chip { font-size: 0.62em; }

.g-step__score {
  margin-bottom: calc(var(--u) * 0.8);
  font-size: var(--g-fs-team);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-muted);
}

.g-step__block {
  flex: none;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 100%;
  height: 32%;
  padding-top: calc(var(--u) * 0.6);
  font-size: var(--g-fs-answer);
  font-weight: 800;
  line-height: 1.1;
  color: var(--team-ink);
  background: var(--team);
  border: var(--g-rule) solid var(--ink);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transform-origin: bottom center;
}

.g-step[data-rank="1"] .g-step__block { height: 64%; }
.g-step[data-rank="2"] .g-step__block { height: 46%; }

/* Nhiều hơn 3 nhóm trên bục (đồng hạng): chữ nhỏ lại cho vừa cột */
.g-podium[data-wide] .g-step__name { font-size: var(--g-fs-team); }
.g-podium[data-wide] .g-step__score { font-size: var(--g-fs-label); }
.g-podium[data-wide] .g-step__block { font-size: var(--g-fs-h1); }

.g-podium.is-entering .g-step__block { animation: rise var(--dur-slow) var(--ease) both; }
.g-podium.is-entering :is(.g-step__name, .g-step__score) { animation: fade-in var(--dur) var(--ease) both; }
.g-podium.is-entering .g-step[data-rank="3"] .g-step__block { animation-delay: 0ms; }
.g-podium.is-entering .g-step[data-rank="2"] .g-step__block { animation-delay: 250ms; }
.g-podium.is-entering .g-step[data-rank="1"] .g-step__block { animation-delay: 500ms; }
.g-podium.is-entering .g-step[data-rank="3"] :is(.g-step__name, .g-step__score) { animation-delay: 300ms; }
.g-podium.is-entering .g-step[data-rank="2"] :is(.g-step__name, .g-step__score) { animation-delay: 550ms; }
.g-podium.is-entering .g-step[data-rank="1"] :is(.g-step__name, .g-step__score) { animation-delay: 800ms; }

@keyframes rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.g-final__empty {
  align-self: center;
  font-size: var(--g-fs-h2);
  font-weight: 700;
  color: var(--ink-muted);
}

/* ================================================================
 * Overlay #board — bảng xếp hạng toàn màn hình
 * ================================================================ */
.g-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--g-pad);
  /* Gần đặc: điểm ở cột bảng điểm phía sau không còn đọc được, không tranh với bảng xếp hạng. */
  background: color-mix(in srgb, var(--c-ink) 92%, transparent);
}

.g-sheet {
  width: min(100%, calc(var(--u) * 70));
  max-height: 100%;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3) calc(var(--u) * 2.6);
  background: var(--bg);
  border: var(--g-rule) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}

.g-sheet.is-entering { animation: sheet-in var(--dur) var(--ease) both; }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(4%); }
  to { opacity: 1; transform: none; }
}

.g-sheet__title {
  padding-bottom: calc(var(--u) * 0.7);
  font-size: var(--g-fs-h1);
  font-weight: 800;
  line-height: 1.12;
  border-bottom: calc(var(--g-rule) * 2.5) double var(--ink);
}

.g-table {
  width: 100%;
  margin-top: calc(var(--u) * 0.8);
}

.g-table th {
  padding: 0 0 calc(var(--u) * 0.4);
  font-size: var(--g-fs-small);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--ink-muted);
}

.g-table__row { position: relative; }

.g-table td {
  background-color: var(--bg);
  padding-block: calc(var(--u) * 0.35);
  font-size: var(--g-fs-h2);
  font-weight: 700;
  line-height: 1.2;
  border-top: max(1px, calc(var(--u) * 0.08)) solid color-mix(in srgb, var(--ink) 16%, var(--bg));
}

.g-table .g-table__rank { width: calc(var(--u) * 7); }
.g-table td.g-table__rank { color: var(--ink-muted); }
.g-table .g-table__num {
  padding-inline-start: calc(var(--u) * 2);
  text-align: right;
  white-space: nowrap;
}
.g-table td.g-table__num:last-child { font-weight: 800; }
.g-table td.g-table__correct { color: var(--ink-muted); }

.g-table__who {
  display: flex;
  align-items: center;
  gap: 0.36em;
  white-space: nowrap;
}
.g-table__who .team-chip { font-size: 0.72em; }
.g-table__who .g-flash {
  margin-inline-start: auto;
  font-size: 0.62em;
}

.g-table__row.is-flash td { animation: cell-flash var(--dur-flash) var(--ease) both; }

@keyframes cell-flash {
  0% { background-color: var(--bg); }
  12% { background-color: color-mix(in srgb, var(--team) 28%, var(--bg)); }
  100% { background-color: var(--bg); }
}

/* ================================================================
 * Phase intro
 * ================================================================ */
#intro {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 34);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: calc(var(--u) * 4);
  align-items: end;
  min-height: 0;
}

.g-intro__text {
  align-self: center;
  min-width: 0;
}

.g-intro__course {
  font-size: var(--g-fs-label);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-muted);
}

.g-intro__title {
  margin-top: calc(var(--u) * 0.4);
  font-size: var(--g-fs-title);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.g-intro__lede {
  max-width: 22em;
  margin-top: calc(var(--u) * 1.6);
  font-family: var(--font-body);
  font-variant-numeric: lining-nums;
  font-size: var(--g-fs-h2);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: pretty;
}

/* Thẻ luật: bảng thật nên đánh số gợi ý */
.g-rules {
  align-self: center;
  min-width: 0;
  background: var(--surface);
  border: var(--g-rule) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.g-rules__table {
  width: 100%;
  font-size: var(--g-fs-team);
}

.g-rules__caption {
  caption-side: top;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6) calc(var(--u) * 0.7) calc(var(--u) * 6.6);
  font-size: var(--g-fs-label);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  color: var(--ink-muted);
}

.g-rules tr { border-top: max(1px, calc(var(--u) * 0.08)) solid color-mix(in srgb, var(--ink) 16%, var(--surface)); }

.g-rules th,
.g-rules td {
  padding-block: calc(var(--u) * 0.9);
  line-height: 1.2;
}

.g-rules__n {
  width: calc(var(--u) * 5);
  font-weight: 700;
  text-align: center;
  border-inline-end: var(--g-rule) solid var(--rule-margin);
}

.g-rules__hint {
  padding-inline-start: calc(var(--u) * 1.6);
  font-weight: 700;
}

.g-rules__pts {
  padding-inline-end: calc(var(--u) * 1.6);
  text-align: right;
}

.g-intro__foot {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-top: calc(var(--u) * 1.6);
  border-top: calc(var(--g-rule) * 2.5) double var(--ink);
}

.g-intro__teams {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(var(--u) * 2.2);
  row-gap: calc(var(--u) * 0.8);
}

.g-intro__team {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--g-fs-team);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.g-intro__team .team-chip { font-size: 0.85em; }

.g-intro__note {
  margin-top: calc(var(--u) * 1.2);
  font-size: var(--g-fs-label);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-muted);
}

/* ================================================================
 * Màn 4:3 / 5:4 nằm ngang — bảng điểm xuống đáy
 * ================================================================ */
@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
  #stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .g-board {
    grid-column: 1;
    grid-row: 3;
  }

  .g-board__title { display: none; }

  .g-board__list {
    grid-auto-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: calc(var(--u) * 0.8);
  }

  .g-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rank chip name name"
      "score score score flash";
    column-gap: calc(var(--u) * 0.45);
    padding: calc(var(--u) * 0.6) 0 0;
    border-top: var(--g-rule) solid var(--ink);
  }

  /* Vạch "đã ghi điểm" nằm ngang dưới kẻ trên (mép trái là số hạng). */
  .g-row.is-scored { box-shadow: inset 0 calc(var(--u) * 0.4) 0 var(--team); }

  .g-row__rank { font-size: 0.72em; }
  .g-row .team-chip { font-size: 0.72em; }

  .g-row__score {
    font-size: var(--g-fs-h2);
    line-height: 1.15;
    text-align: left;
  }

  .g-hint { grid-template-columns: calc(var(--u) * 8) minmax(0, 1fr); }
  /* Màn 4:3 thấp hơn: bớt đệm trên/dưới để gợi ý 3 dòng vừa ô. */
  .g-hint__margin { padding-block: calc(var(--u) * 0.85); }
  .g-hint__body { padding-block: calc(var(--u) * 0.85); }

  /* Intro: tên game trải hết chiều ngang, lời dẫn | thẻ luật ở hàng dưới */
  #intro {
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 30);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      ". ."
      "course course"
      "title title"
      "lede rules"
      ". ."
      "foot foot";
    column-gap: calc(var(--u) * 3);
    align-items: start;
  }
  .g-intro__text { display: contents; }
  .g-intro__course { grid-area: course; }
  .g-intro__title { grid-area: title; }
  .g-intro__lede { grid-area: lede; align-self: center; }
  .g-rules { grid-area: rules; margin-top: calc(var(--u) * 1.6); }
  .g-intro__foot { grid-area: foot; }
  .g-intro__teams { column-gap: calc(var(--u) * 1.6); }
}

/* Màn dọc (ai đó mở trên điện thoại): xếp chồng, cho cuộn, chỉ cần đọc được. */
@media (orientation: portrait) {
  html,
  body {
    height: auto;
    overflow: auto;
  }

  #stage {
    --u: max(var(--stage-u), 3.6px);
    height: auto;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  .g-head,
  #round,
  #final,
  .g-board,
  #intro {
    grid-column: 1;
    grid-row: auto;
  }

  .g-head { flex-wrap: wrap; }
  .g-hints { grid-template-rows: none; }
  .g-hint { grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr); }
  .g-hint__body { min-height: 5em; }
  .g-board__list { grid-auto-rows: auto; }
  .g-row { padding-block: var(--space-2); }
  .g-podium { min-height: 60vh; }

  #intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--space-6);
  }
  .g-intro__foot { grid-row: auto; }
}