/*
 * Design tokens của Thử Tài GPLX. Nơi duy nhất được khai báo mã màu, font, bóng.
 * Component chỉ dùng var(--...). Nguồn: BAN-GIAO mục 7.2.
 */
:root {
  /* Màu biển báo */
  --sign-blue: #1a56c4;
  --stop-red: #e0313a;
  --lane-yellow: #ffc52e;
  --ok-green: #1f8a4c;

  /* Nền, mực */
  --ink: #10151f;
  --asphalt: #23272e;
  --asphalt-2: #2c313a;
  --header: #161a20;
  --concrete: #e7eaee;
  --paper: #ffffff;
  --ink-muted: #4a5260;
  --ink-faint: #6b7486;
  --line: #c3c9d3;
  --line-faint: #c9d1dc;
  --surface-muted: #eef0f3;
  --on-dark: #f2f4f7;
  --on-dark-muted: #b8c2cf;
  --dark-panel: #10151f;
  --dark-track: #2c3139;
  --dark-fill: #3a414c;

  /* Phản hồi đúng/sai, điểm liệt */
  --ok-soft: #e3f4ea;
  --ok-ink: #14663a;
  --bad-soft: #fde8e9;
  --bad-ink: #a31d24;
  --warn-soft: #fff6d6;
  --sign-blue-soft: #d6e3fa;

  /* Bé Đèn */
  --light-red-on: #ff4d55;
  --light-red-off: #5a2a30;
  --light-yellow-on: #ffc52e;
  --light-yellow-off: #5c4a1c;
  --light-green-on: #3ddc84;
  --light-green-off: #1f4a35;

  /* Nhóm bằng (nhân vật xe, BAN-GIAO mục 3.4, 7.5) */
  --group-moto: #e8742a;
  --group-b1: #7b5cd6;
  --group-car: #1b9aaa;
  --bot-gray: #8c97a8;

  /* Khung hạng (ghi chú 3.5): gỗ, đồng, bạc, vàng, bạch kim, kim cương, lửa, huyền thoại.
     Cố ý khác bộ màu nhóm bằng (cam / tím / xanh ngọc). 0 = đang định vị. */
  --rank-0: #5b6472;
  --rank-1: #6b4a2f;
  --rank-2: #8a5a3c;
  --rank-3: #7d8896;
  --rank-4: #b8860b;
  --rank-5: #4f6d8f;
  --rank-6: #2f5fd0;
  --rank-7: #c0263d;
  --rank-8: #111111;
  --rank-ink: #ffffff;
  --rank-legend-ink: #ffd75a;
  --group-b1-dark: #4e3a99;
  --group-car-dark: #126c77;
  --vehicle-glass: #bfe9ee;
  --vehicle-glass-b1: #c9bcf2;
  --vehicle-metal: #d6dce4;
  --vehicle-chrome: #b8c2cf;
  --vehicle-visor: #ffd7b5;

  /* Bản đồ sảnh C (dẫn đường GPS), tông ngày. Tên theo vai trò trong apps/web/src/lobby/map.svg */
  --map-ground: #eef1f4;
  /* Sương ở mép bản đồ sảnh (UI-01). */
  --map-fog: #dfe4ea;
  /* Nút HUD sảnh (RUI-06, phương án A): nền trắng, viền mực, bóng cứng; tông đêm đổi xanh đậm. */
  --hud-bg: var(--paper);
  --hud-ink: var(--ink);
  --hud-line: var(--ink);
  --hud-accent: var(--sign-blue);
  --hud-flame: #e8742a;
  --hud-sign-shadow: color-mix(in srgb, var(--ink) 18%, transparent);
  --sign-pole: #8c97a8;
  /* Cảnh vật sảnh: thân cây, cần cẩu. */
  --decor-trunk: #8a6a4a;
  --decor-crane: #e0a21b;
  /* Biển tên khu: kiểu biển chỉ đường cao tốc (xanh lá), khác hẳn nút trắng. */
  --nameplate-bg: #0f6b3e;
  --nameplate-ink: #ffffff;
  --nameplate-zone: #ffd75a;
  /* Thẻ chỉ đường "Rẽ trái…": vàng nhạt, khác biển tên khu xanh lá (chủ dự án 08/10). */
  --gps-bg: #fff3c4;
  --gps-ink: #10151f;
  /* Biển lối ra Luyện tập (D-01): vàng chanh như biển khu vực trường học. */
  --exit-lime: #d4f03c;
  --exit-lime-ink: #10151f;
  /* Đăng xuất trong menu tài khoản (D-04). */
  --danger-ink: #b3232b;
  --map-hill: #e3ebdd;
  --map-hill-2: #d8e5cf;
  --map-hill-line: #d2dec9;
  --map-park: #cfe6cf;
  --map-tree: #bbdcbb;
  --map-water: #bfddf5;
  --map-water-line: #a9cfee;
  --map-water-label: #6fa6cf;
  --map-block: #e1e5ea;
  --map-block-line: #d5dae1;
  --map-bldg: #d6e2f5;
  --map-bldg-line: #b9cae6;
  --map-bldg-detail: #9db5de;
  --map-course: #dce1e8;
  --map-road: #ffffff;
  --map-road-edge: #d3d9e0;
  --map-avenue: #fce49a;
  --map-avenue-edge: #e3c46a;
  --map-pass: #f2bdbd;
  --map-gas: #ffe8a8;
  --map-gas-line: #e6c463;
  --map-stadium: #e9edf3;
  --map-stadium-shadow: #c7cfda;
  --map-stadium-line: #b9c3d0;
  --map-stadium-track: #c4d4f2;
  --map-house: #f6f8fa;
  --map-house-side: #c9d1db;
  --map-house-line: #cdd4dd;
  --map-shade: #10151f;
  --map-label-avenue: #9a7b1e;
  --map-label-street: #8a94a3;
  --map-label-park: #5c8f5c;
  --map-label-hill: #8fa486;
  --map-route: #1a56c4;
  --map-route-glow: #6e9bea;
  --map-pin: #ffc52e;

  /* Chữ */
  
  

  /* Khối */
  --shadow-hard: 0 6px 0 var(--ink);
  --shadow-hard-sm: 0 3px 0 var(--ink);
  --border-bold: 3px solid var(--ink);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--sign-blue);
}

/* Tông đêm của sảnh: bật khi bấm "Tìm trận" (BAN-GIAO mục 7.1), nối liền với màn trận nền nhựa đường. */
[data-tone="night"] {
  --map-ground: #1b2029;
  --map-fog: #12161c;
  --hud-bg: #1c3a78;
  --hud-ink: var(--paper);
  --hud-line: #0b1a3c;
  --hud-accent: #9fc1ff;
  --map-hill: #1e2a24;
  --map-hill-2: #22302a;
  --map-hill-line: #2a3a31;
  --map-park: #1f3326;
  --map-tree: #27412f;
  --map-water: #1c2f45;
  --map-water-line: #24405e;
  --map-water-label: #5e86ad;
  --map-block: #232933;
  --map-block-line: #2c333e;
  --map-bldg: #26324a;
  --map-bldg-line: #33446a;
  --map-bldg-detail: #4b6496;
  --map-course: #2a303a;
  --map-road: #3a414c;
  --map-road-edge: #2c313a;
  --map-avenue: #5c4a1c;
  --map-avenue-edge: #7a6324;
  --map-pass: #4a2a30;
  --map-gas: #4d4220;
  --map-gas-line: #7a6324;
  --map-stadium: #2c3139;
  --map-stadium-shadow: #161a20;
  --map-stadium-line: #3a414c;
  --map-stadium-track: #2f3d5a;
  --map-house: #2f3640;
  --map-house-side: #20252d;
  --map-house-line: #3a414c;
  --map-shade: #000000;
  --map-label-avenue: #c9a64a;
  --map-label-street: #8c97a8;
  --map-label-park: #7fae7f;
  --map-label-hill: #8fa486;
  --map-route: #ffc52e;
  --map-route-glow: #ffe08a;
  --map-pin: #ffc52e;
}

:root { --font-display: system-ui, sans-serif; --font-body: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--concrete); color: var(--ink); font-family: var(--font-body);
  font-size: 17px; line-height: 1.55; }
a { color: var(--sign-blue); }
.top { background: var(--header); padding: 10px 16px; }
.brand { color: var(--on-dark); font-weight: 800; font-size: 20px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.crumbs { max-width: 760px; margin: 0 auto; padding: 10px 16px 0; font-size: 14px; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); }
.page { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; }
h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; margin: 8px 0 12px; }
h2 { font-size: 20px; margin: 20px 0 8px; }
.lead { font-size: 18px; }
.muted, .hint, .chapter { color: var(--ink-muted); }
.hint { margin: 12px 0 6px; font-size: 15px; }
.tag-critical { display: inline-block; vertical-align: middle; font-size: 14px; font-weight: 700;
  background: var(--bad-soft); color: var(--bad-ink); border-radius: 6px; padding: 2px 8px; }
.q-img { display: block; max-width: 100%; max-height: min(320px, 38vh); width: auto; height: auto;
  margin: 8px auto; border-radius: 8px; object-fit: contain; }
.q-text { font-size: 20px; font-weight: 700; margin: 12px 0; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  min-height: 52px; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--paper);
  border: var(--border-bold); border-radius: 12px; cursor: pointer; }
.opt .key { flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-weight: 700;
  border: 2px solid var(--ink); border-radius: 8px; }
.opt[data-state="correct"] { background: var(--ok-soft); border-color: var(--ok-green); }
.opt[data-state="wrong"] { background: var(--bad-soft); border-color: var(--stop-red); }
.opt:disabled { cursor: default; }
.result { margin-top: 14px; padding: 12px 16px; background: var(--paper); border: var(--border-bold);
  border-radius: 12px; }
.result p { margin: 4px 0; }
.verdict { font-weight: 800; font-size: 19px; }
.verdict[data-ok="true"] { color: var(--ok-ink); }
.verdict[data-ok="false"] { color: var(--bad-ink); }
.why h2 { margin: 10px 0 4px; font-size: 17px; }
details { margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 18px; font: inherit; font-weight: 700; color: var(--ink); background: var(--paper);
  border: var(--border-bold); border-radius: 12px; text-decoration: none; cursor: pointer; }
.btn-main { background: var(--lane-yellow); box-shadow: var(--shadow-hard-sm); }
.pager { display: flex; justify-content: space-between; gap: 12px; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; }
.qlist { padding-left: 0; list-style: none; }
.qlist li a { display: flex; gap: 10px; min-height: 44px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line-faint); color: var(--ink); text-decoration: none; }
.qlist .num { flex: none; min-width: 40px; font-weight: 700; color: var(--sign-blue); }
.links { padding-left: 0; list-style: none; }
.links li a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.links--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.facts { border-collapse: collapse; width: 100%; background: var(--paper); border: var(--border-bold);
  border-radius: 12px; overflow: hidden; }
.facts th, .facts td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-faint); }
.facts th { font-weight: 600; width: 55%; }
.foot { max-width: 760px; margin: 0 auto; padding: 16px; font-size: 14px; color: var(--ink-muted); }
.foot p { margin: 4px 0; }
.foot a { color: var(--ink-muted); display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 560px) { .actions .btn { flex: 1 1 100%; } }