/* ═══════════════════════════════════════════════════════════════════════════
   80-in-8 · GES

   HƯỚNG THIẾT KẾ — Swiss / International, dựng như một THIẾT BỊ ĐO
   chứ không phải app đố vui.

   Ràng buộc chi phối mọi quyết định bên dưới: 6 giây một câu.
   Bất cứ thứ gì bắt mắt phải di chuyển, đọc lại, hay chờ đợi đều là ăn cắp
   thời gian của ứng viên. Nên:

     · Con số là nhân vật chính. Mọi thứ khác là nét mảnh.
     · Chọn đáp án bằng cách ĐẢO NỀN (đen↔giấy), không dùng màu — tương phản
       tuyệt đối, không phụ thuộc khả năng phân biệt màu, không cần học nghĩa màu.
     · Đúng MỘT màu sắc trong cả giao diện: đỏ tín hiệu, chỉ dùng cho phút cuối
       và cho trạng thái tụt nhịp. Màu hiếm thì mới còn là tín hiệu.
     · Lưới cố định, chiều cao đặt trước. Câu ngắn và câu dài không được làm
       các nút nhảy chỗ — nếu nhảy, mắt phải định vị lại sau mỗi câu.
     · Chuyển động duy nhất là thanh giờ đang rút. Không hiệu ứng trang trí.

   Font: dùng font hệ thống, KHÔNG tải webfont. Tải font trong một bài thi tính
   giờ nghĩa là thêm một phụ thuộc mạng và một lần layout shift ngay lúc ứng
   viên cần nhìn con số đầu tiên. `tabular-nums` lo phần chữ số đều nhau.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* Nền giấy ấm, mực gần đen — dễ nhìn lâu hơn cặp trắng tinh / đen tuyền. */
  --paper:      #f4f3ef;
  --paper-2:    #ffffff;
  --ink:        #14140f;
  --ink-2:      #55554c;
  --ink-3:      #8d8d82;
  --rule:       #d8d7cf;
  --rule-2:     #e9e8e2;
  --signal:     #cc2200;   /* màu sắc DUY NHẤT: phút cuối + tụt nhịp */
  --focus:      #14140f;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0f0f10;
    --paper-2: #17171a;
    --ink:     #f2f1ec;
    --ink-2:   #a8a79f;
    --ink-3:   #6e6e68;
    --rule:    #2c2c30;
    --rule-2:  #232327;
    --signal:  #ff5233;
    --focus:   #f2f1ec;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app { max-width: 760px; margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); }

.screen[hidden] { display: none !important; }
.screen--center { text-align: center; padding-top: 14vh; }

/* Ổ khoá focus: bài này bàn phím là chính, vòng focus KHÔNG được bỏ. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ─── chữ ────────────────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
}

.display {
  margin: 0 0 var(--sp-3);
  font-size: clamp(40px, 9vw, 68px);
  font-weight: 600; line-height: .95;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.display__sep { color: var(--ink-3); font-weight: 300; margin: 0 .06em; }

.lede    { margin: 0 0 var(--sp-6); font-size: 18px; color: var(--ink-2); }
.fineprint { margin: var(--sp-3) 0 0; font-size: 13px; color: var(--ink-3); }
.mono    { font-family: var(--mono); font-size: 12px; }
.error   { margin: var(--sp-3) 0 0; font-size: 14px; color: var(--signal); }

.masthead { border-bottom: 1px solid var(--ink); padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); }

.rubric {
  margin: 0 0 var(--sp-3);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--sp-2);
}
.block { margin-bottom: var(--sp-6); }

/* ─── bảng điểm số (hướng dẫn) ───────────────────────────────────────────── */

.specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: 0 0 var(--sp-4);
  background: var(--rule); border: 1px solid var(--rule);
}
.spec { background: var(--paper); padding: var(--sp-4); text-align: center; }
.spec dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.spec__val {
  margin: var(--sp-1) 0 0;
  font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.spec__val--warn { color: var(--signal); }
.spec__val--mute { color: var(--ink-3); }

.note--boxed {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px; color: var(--ink-2);
  border-left: 2px solid var(--ink);
}

.keylist { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.keylist li {
  display: flex; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule-2);
}
.keylist li:last-child { border-bottom: 0; }
.keylist code {
  flex: 0 0 68px;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.keylist span { color: var(--ink-2); }
.keylist--prose li::before {
  content: ""; flex: 0 0 6px; height: 1px; margin-top: .7em;
  background: var(--ink-3);
}

.keycaps { margin: 0; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.keycaps__gap { flex: 0 0 var(--sp-5); }

kbd {
  display: inline-block; min-width: 24px; padding: 2px 7px;
  font-family: var(--mono); font-size: 12px; line-height: 1.5; text-align: center;
  color: var(--ink);
  border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px;
  background: var(--paper-2);
}

/* ─── nút ────────────────────────────────────────────────────────────────── */

.btn {
  font: inherit; cursor: pointer;
  border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  transition: background 160ms ease, color 160ms ease;
}
.btn--primary {
  display: block; width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font-size: 16px; font-weight: 600;
  background: var(--ink); color: var(--paper);
}
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--primary:disabled { opacity: .45; cursor: default; }
.btn--ghost {
  display: block; margin: var(--sp-6) auto 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: 13px; color: var(--ink-2);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.launch { border-top: 1px solid var(--ink); padding-top: var(--sp-5); }
.launch__who { margin: 0 0 var(--sp-4); font-size: 14px; color: var(--ink-2); }

/* ─── đếm ngược ──────────────────────────────────────────────────────────── */

.countdown {
  font-size: clamp(96px, 26vw, 190px);
  font-weight: 600; line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
/* Ô này đặt cỡ cho MỘT chữ số. Bước cuối là một từ, nên phải hạ cỡ xuống —
   nếu không "BẮT ĐẦU" tràn kín màn hình ngay trước khi bài bắt đầu. */
.countdown.is-word {
  font-size: clamp(28px, 7vw, 54px);
  letter-spacing: .04em;
  padding: .6em 0;
}

/* ─── màn hình thi ───────────────────────────────────────────────────────── */

/* Màn thi lấp đầy khung nhìn và canh giữa theo chiều dọc: phép tính rơi đúng tầm mắt
   thay vì dồn lên đỉnh trang. An toàn vì cả .prompt lẫn .choice đều có chiều cao tối
   thiểu cố định — bố cục không xê dịch giữa các câu. */
.screen--exam {
  padding-top: var(--sp-2);
  min-height: calc(100dvh - var(--sp-7) - var(--sp-8));
  display: flex; flex-direction: column;
}
.screen--exam .stage {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 6vh;   /* nhấc khối lên trên tâm quang học một chút */
}

/* Thanh giờ rút dần, dán sát mép trên màn hình. Dùng transform (chạy trên
   compositor) thay vì width — animate width là ép layout lại mỗi khung hình. */
.drain {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  background: var(--rule-2); z-index: 10;
}
.drain__fill {
  height: 100%; width: 100%;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(1);
}
.drain__fill.is-urgent { background: var(--signal); }

.hud {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  margin-bottom: 7vh;
  border-bottom: 1px solid var(--rule);
}
.hud__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hud__cell--mid { align-items: center; }
.hud__cell--end { align-items: flex-end; }
.hud__label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
}
.hud__value {
  font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hud__value--time { font-size: 26px; }
.hud__value--time.is-urgent { color: var(--signal); }
.hud__of { color: var(--ink-3); font-weight: 400; font-size: .7em; }
.hud__value--pace { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.hud__value--pace.is-ahead  { color: var(--ink); }
.hud__value--pace.is-behind { color: var(--signal); }

.stage { text-align: center; }

/* Chiều cao ĐẶT TRƯỚC. "7 × 13" và "-73 + 51 - 15" phải chiếm đúng một chỗ,
   nếu không các nút bên dưới nhảy lên nhảy xuống giữa các câu. */
.prompt {
  margin: 0 0 6vh;
  min-height: 1.25em;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(38px, 8.5vw, 72px);
  font-weight: 500; line-height: 1.25;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }

/* Chọn = ĐẢO NỀN. Không dùng màu: tương phản tối đa, không phụ thuộc vào việc
   phân biệt màu, và không bắt ứng viên học "màu này nghĩa là gì". */
.choice {
  position: relative;
  min-height: 92px;
  padding: var(--sp-5) var(--sp-2) var(--sp-6);
  font: inherit;
  font-size: clamp(17px, 3.2vw, 24px); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 0;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.choice:hover { border-color: var(--ink); }
.choice.is-picked {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
  transition: none;              /* phản hồi tức thì: 6 giây/câu không có chỗ cho fade */
}
.choice__key {
  position: absolute; left: 0; right: 0; bottom: var(--sp-2);
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--ink-3);
}
.choice.is-picked .choice__key { color: var(--paper); opacity: .6; }

.netstate {
  position: fixed; inset: auto 0 0 0; margin: 0;
  padding: var(--sp-2) var(--sp-4);
  text-align: center; font-size: 13px; font-weight: 500;
  color: var(--paper); background: var(--signal);
}

/* ─── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  #app { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .choices { grid-template-columns: repeat(2, 1fr); }
  .hud { margin-bottom: 4vh; }
  .prompt { margin-bottom: 4vh; }
  .choice { min-height: 84px; }
  .keylist code { flex-basis: 56px; }
}

@media (max-width: 380px) {
  .specs { grid-template-columns: 1fr; }
}

/* Chuyển động duy nhất trong giao diện là thanh giờ, và nó là thông tin chứ
   không phải trang trí — nhưng ai đã tắt hiệu ứng thì tắt hết phần còn lại. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}