/* ============================================================
   Bambyte Games — style.css
   Tám token màu lấy nguyên từ spec nhận diện 04.
   KHÔNG thêm giá trị màu nào khác vào file này. Có test chặn.
   ============================================================ */

/* Space Grotesk tự host, chia ba bộ ký tự như Google Fonts (bản v22). Mỗi
   file là font variable, dùng chung cho cả 500 lẫn 700. Tên file gắn 5 ký tự
   đầu MD5 của nội dung, nên Caddy cache một năm (DEPLOY.md mục 7). Đổi file
   thì đổi tên theo hash mới; tools/fonts.test.mjs báo nếu lệch. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-vietnamese.207f8.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.dea09.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.25ea4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand: #F23A1C;
  --brand-deep: #C42C11;
  --ink: #121417;
  --cream: #F2EDE6;
  --muted: #8A8F98;
  --muted-light: #6B6560;
  --track: #262A2F;
  --track-light: #DED7CC;

  /* Độ nghiêng của motif đường chéo, dùng chung cho dải section,
     khung ảnh game và đường ngăn. */
  --slant: clamp(24px, 4vw, 72px);

  /* Nhịp khoảng cách, bội số của 4px. */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px; --s10: 128px;

  --container: 1200px;
  --pad-x: clamp(20px, 5vw, 64px);
  --pad-y: clamp(80px, 12vw, 160px);
  --header-h: 72px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Cuộn mượt khi nhảy tới neo, trừ khi người dùng đã bật giảm chuyển động. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--brand-deep); }
a:hover { color: var(--ink); }

h1, h2, h3 { font-weight: 700; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.0; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 5vw, 3.75rem);  line-height: 1.0;  letter-spacing: -0.02em; }
h3 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; }

.lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.55; max-width: 52ch; }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--s4);
}

.accent { color: var(--brand-deep); }
.section--ink .accent, .section--brand .accent { color: var(--brand); }
.section--brand .accent { color: var(--cream); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

:focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 3px;
}
.section--ink :focus-visible { outline-color: var(--brand); }
.section--brand :focus-visible { outline-color: var(--ink); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--s4);
  top: calc(var(--s4) * -6);
  z-index: 200;
  padding: var(--s3) var(--s5);
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip-link:focus-visible { top: var(--s4); color: var(--cream); }

/* ---------- Logo ---------- */
:root { --logo-mark: 32px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-mark) * 0.4);   /* 40% cạnh mark */
  color: var(--brand);
  text-decoration: none;
  flex: none;
}
/* Màu đặt thẳng lên SVG chứ không để thừa hưởng từ .logo: rule .site-footer a
   có độ ưu tiên (0,1,1), cao hơn .logo (0,1,0), nên nếu để thừa hưởng thì mark
   trong footer sẽ thành màu kem. Gán trực tiếp luôn thắng giá trị thừa hưởng. */
.logo__mark {
  width: var(--logo-mark);
  height: var(--logo-mark);
  flex: none;
  color: var(--brand);
}
.logo__word {
  font-size: calc(var(--logo-mark) * 0.68);  /* 68% cạnh mark */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(1px);          /* tâm quang học, không phải tâm hình học */
}
.logo__word-b { color: var(--ink); }
.logo__word-g { color: var(--brand-deep); margin-left: 0.37em; }

/* Lockup DỌC dùng bộ tỉ lệ khác lockup ngang: spec nhận diện quy định chữ
   bằng 27% chiều cao mark (không phải 68%) và khoảng cách bằng 30%. */
.logo--stack {
  --logo-mark: 88px;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--logo-mark) * 0.3);
  /* Không có dòng này thì grid kéo giãn hộp ra hết cột rồi align-items: center
     đẩy cả lockup vào giữa, lệch khỏi mép trái của các cột bên cạnh. */
  justify-self: start;
}
.logo--stack .logo__word {
  font-size: calc(var(--logo-mark) * 0.27);
  transform: none;   /* dịch 1px chỉ dành cho lockup ngang */
}

.site-footer .logo__word-b { color: var(--cream); }
.site-footer .logo__word-g { color: var(--brand); }

/* Rule chung đặt link là brand-deep, nhưng brand-deep trên ink chỉ đạt
   3.26:1. Trên nền tối phải đổi sang brand (4.74:1). Nút .btn tự đặt màu
   riêng nên loại ra. */
.section--ink a:not(.btn) { color: var(--brand); }
.section--ink a:not(.btn):hover { color: var(--cream); }

/* Chuyển động của mark — chốt trong spec thiết kế, phần spec nhận diện 04
   còn để ngỏ. Hai nửa trượt khép lại thành hình vuông kín rồi tách ra.
   Đúng khoảng lệch 6 đơn vị mà spec quy định, chạy ngược chiều.
   Không đụng stroke-width nên độ bo góc giữ nguyên. */
@media (prefers-reduced-motion: no-preference) {
  .logo__half { transition: transform 180ms var(--ease); }
  .logo:hover .logo__half--tr,
  .logo:focus-visible .logo__half--tr { transform: translate(-6px, 6px); }
  .logo:hover .logo__half--bl,
  .logo:focus-visible .logo__half--bl { transform: translate(6px, -6px); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--track-light);
  box-shadow: 0 2px 20px color-mix(in srgb, var(--ink) 8%, transparent);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.nav { display: flex; gap: var(--s6); margin-left: auto; }
.nav__link {
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--brand-deep); }
.nav__link.is-active { border-bottom-color: var(--brand); }

/* ---------- Nút ngôn ngữ ---------- */
.lang { display: flex; gap: var(--s1); flex: none; }
.lang__btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: var(--s1) var(--s3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-light);
  cursor: pointer;
}
.lang__btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.site-footer .lang__btn { color: var(--muted); }
.site-footer .lang__btn[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s6);
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
/* Nền brand bắt buộc chữ ink: cream trên brand chỉ đạt 3.34:1 */
.btn--primary { background: var(--brand); color: var(--ink); }
.btn--primary:hover { background: var(--brand-deep); color: var(--cream); }

.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.section--ink .btn--ghost { border-color: var(--muted); color: var(--cream); }
.section--ink .btn--ghost:hover { background: var(--cream); color: var(--ink); }

.btn--on-brand { background: var(--cream); color: var(--ink); }
.btn--on-brand:hover { background: var(--ink); color: var(--cream); }

/* ---------- Menu mobile ---------- */
.menu-toggle { display: none; }
.mobile-menu {
  position: fixed;
  inset: 0;
  /* Dưới header (100) chứ không phải trên: nếu overlay che header thì hamburger
     biến mất và người dùng không còn nút đóng nào nhìn thấy được. */
  z-index: 90;
  background: var(--ink);
  padding: calc(var(--header-h) + var(--s7)) var(--pad-x) var(--s7);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__link {
  display: block;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-decoration: none;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--track);
}
.mobile-menu__link:hover { color: var(--brand); }
.lang--mobile { display: none; margin-top: var(--s7); }
.lang--mobile .lang__btn {
  font-size: 1rem;
  padding: var(--s3) var(--s5);
  color: var(--muted);
}
.lang--mobile .lang__btn[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--s9) var(--s7);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s8);
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--s3); }
.site-footer__col .eyebrow { color: var(--muted); margin-bottom: var(--s1); }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
/* Hai link pháp lý nằm dưới email trong cột Liên hệ, cách thêm một nhịp để
   không đọc nhầm thành một dòng liên hệ. */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s3);
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s9);
  padding-top: var(--s5);
  border-top: 1px solid var(--track);
  color: var(--muted);
  font-size: 0.875rem;
}
/* Thông tin pháp nhân TikTok yêu cầu có ở mọi trang: chữ thật, chọn và copy
   được. Cùng màu, cỡ với dòng bản quyền cũ: muted trên ink đạt 5.67:1. */
.site-footer__entity { display: grid; gap: var(--s1); }
.site-footer__entity p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) { :root { --container: 100%; } }

@media (max-width: 899px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--s7); }
}

@media (max-width: 719px) {
  :root { --header-h: 64px; }
  .nav { display: none; }
  /* Logo (211px) + nút ngôn ngữ (96px) + hamburger (40px) + hai khoảng cách
     vượt quá 320px. Đẩy nút ngôn ngữ vào menu mobile để header vừa chỗ mà
     mark vẫn giữ đúng 32px, không phải đổi sang bản cỡ nhỏ. */
  .site-header .lang { display: none; }
  .lang--mobile { display: flex; }
  .site-header__inner { gap: var(--s3); }
  .menu-toggle { margin-left: auto; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    transition: transform 200ms var(--ease);
  }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--s6); }
}

/* ---------- Motif đường chéo ----------
   Mép trên và mép dưới nghiêng cùng chiều, tạo dải xiên. Phần bị cắt lộ ra
   nền cream của body. Padding phải cộng thêm --slant, nếu không dòng chữ đầu
   và cuối sẽ bị mép nghiêng cắt mất. */
.slant {
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
  padding-block: calc(var(--pad-y) + var(--slant));
}

.section { padding-block: var(--pad-y); }
.section--ink   { background: var(--ink);   color: var(--cream); }
.section--ink .eyebrow { color: var(--muted); }
.section--brand { background: var(--brand); color: var(--ink); }
.section--brand h2 { color: var(--cream); }   /* 3.34:1 — hợp lệ vì trên 24px */

[id] { scroll-margin-top: calc(var(--header-h) + var(--s4)); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(72px, 10vw, 140px) var(--pad-y); }
/* Không dùng <br> cắt dòng: bản tiếng Việt dài hơn bản tiếng Anh nên chỗ
   ngắt cứng sẽ sai. Để max-width lo việc xuống dòng cho cả hai ngôn ngữ. */
.hero__title { max-width: 18ch; }
.hero__lead { margin: var(--s6) 0 var(--s7); color: var(--muted-light); }

/* ---------- Hiện dần khi cuộn ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}


/* ---------- About ---------- */
.about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  margin-top: var(--s7);
  color: var(--muted);
  max-width: 900px;
}
.about__cols p { margin: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  margin: var(--s9) 0 0;
  padding: var(--s7) 0 0;
  list-style: none;
  border-top: 1px solid var(--track);
}
.stat { display: flex; flex-direction: column; gap: var(--s2); }
.stat__num {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand);
}
.stat__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 899px) {
  .about__cols { grid-template-columns: 1fr; gap: var(--s5); }
  .stats { gap: var(--s7) var(--s6); }
}
@media (max-width: 599px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------- Games ---------- */
.game {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: center;
  margin-top: var(--s9);
}
.game--flip .game__art { order: 2; }

.game__art { position: relative; }
/* Vạt một góc dưới, luôn ngược phía với cột chữ. */
.game__art::before,
.game__art img {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), calc(100% - var(--slant)) 100%, 0 100%);
}
.game--flip .game__art::before,
.game--flip .game__art img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--slant) 100%, 0 calc(100% - var(--slant)));
}
.game__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
}
.game__art img { position: relative; width: 100%; height: auto; }

.game__body h3 { margin-bottom: var(--s4); }
.game__body p { color: var(--muted-light); margin: 0 0 var(--s6); max-width: 46ch; }
.game__stores { display: flex; gap: var(--s3); flex-wrap: wrap; }
.btn--store { padding: var(--s3) var(--s5); font-size: 0.9375rem; }
.game__soon {
  display: inline-flex;
  align-items: center;
  /* Tên store và chữ "Coming soon" là hai phần tử flex: khoảng trắng giữa
     chúng bị bỏ, nên khoảng cách do gap lo. */
  gap: 0.3em;
  padding: var(--s3) var(--s5);
  border: 2px dashed var(--muted-light);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--muted-light);
}

/* Hai lớp trượt lệch đúng khoảng 6/140 của logomark, chạy ngược chiều nhau. */
@media (prefers-reduced-motion: no-preference) {
  .game__art::before, .game__art img { transition: transform 260ms var(--ease); }
  .game:hover .game__art::before { transform: translate(-6px, 6px); }
  .game:hover .game__art img     { transform: translate(6px, -6px); }
}

@media (max-width: 899px) {
  .game { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s8); }
  .game--flip .game__art { order: 0; }
}

/* ---------- CTA tuyển dụng, dải nền brand ---------- */
.join h2 { max-width: 18ch; }
.join__perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4) var(--s8);
  margin: var(--s7) 0;
  padding: 0;
  list-style: none;
  max-width: 800px;
}
/* Chữ nhỏ trên nền brand bắt buộc dùng ink: cream chỉ đạt 3.34:1 */
.join__perk {
  color: var(--ink);
  font-weight: 700;
  padding-left: var(--s5);
  position: relative;
}
.join__perk::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 0 100%);   /* nửa tam giác, nhắc lại motif */
}

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

/* ---------- Trang Jobs ---------- */
.jobs-hero { padding-block: clamp(80px, 12vw, 140px) 0; }
.jobs-hero h1 { max-width: 14ch; }
.jobs-hero .lead { margin-top: var(--s6); color: var(--muted-light); }

.jobs-group { margin-top: var(--s9); }
.jobs-group__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-light);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
}

/* Mỗi vị trí là một hàng, cả hàng là link sang trang riêng trong jobs/. */
.jobs-list { list-style: none; margin: 0; padding: 0; }
.job { border-bottom: 1px solid var(--track-light); }
.job__link {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s6) 0;
  color: var(--ink);
  text-decoration: none;
}
.job__title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; }
.job__meta { margin-left: auto; color: var(--muted-light); font-size: 0.9375rem; white-space: nowrap; }
.job__arrow {
  flex: none;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  transform: rotate(45deg);
}
.job__link:hover .job__title { color: var(--brand-deep); }

.jobs-perks { margin-top: var(--s9); padding-top: var(--s7); border-top: 2px solid var(--ink); }
.jobs-perks ul { margin: var(--s4) 0 0; padding-left: var(--s5); color: var(--muted-light); max-width: 62ch; }
.jobs-perks li { margin-bottom: var(--s2); }

/* Mũi tên trượt đúng 6px, khoảng lệch hai nửa của logomark. */
@media (prefers-reduced-motion: no-preference) {
  .job__arrow { transition: transform 180ms var(--ease); }
  .job__link:hover .job__arrow { transform: translateX(6px) rotate(45deg); }
}

/* Dòng meta giờ có cả mức lương nên dài hơn trước. Nếu đợi tới 600px mới
   xuống dòng thì trong khoảng 600–900px nó tràn ngang, nhất là bản tiếng Việt. */
@media (max-width: 899px) {
  .job__link { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .job__meta { margin-left: 0; width: 100%; order: 3; white-space: normal; }
  .job__arrow { margin-left: auto; }
}

/* ---------- Trang từng vị trí ---------- */
.job-hero { padding-block: clamp(48px, 7vw, 96px) var(--s8); }
.job-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s7);
  font-size: 0.9375rem;
  color: var(--muted-light);
  text-decoration: none;
}
/* Mũi tên vẽ bằng viền như ở danh sách: ký tự ← không có trong bộ chữ
   Space Grotesk nạp từ Google Fonts, sẽ rơi sang font hệ thống. */
.job-hero__back::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.job-hero__back:hover { color: var(--brand-deep); }
.job-hero__meta {
  margin: var(--s5) 0 var(--s6);
  color: var(--muted-light);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
}

/* Mỗi mục một hàng: nhãn bên trái, nội dung bên phải, kẻ ngang giữa các
   hàng giống danh sách ở jobs.html. */
.job-detail { padding-bottom: var(--pad-y); }
.job-detail__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: baseline;
  gap: var(--s8);
  padding-block: var(--s7);
  border-top: 1px solid var(--track-light);
}
.job-detail__row:first-child { border-top: 2px solid var(--ink); }
.job-detail__row .eyebrow { margin: 0; }
.job-detail__body { max-width: 62ch; color: var(--muted-light); }
.job-detail__body ul { margin: 0; padding-left: var(--s5); }
.job-detail__body li + li { margin-top: var(--s2); }

.job-fit h2 { margin-bottom: var(--s6); }

@media (max-width: 899px) {
  .job-detail__row { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ---------- Một game duy nhất ----------
   Không có gì để đảo trái-phải, và ảnh là icon vuông chứ không phải key art
   ngang, nên giới hạn cột ảnh lại để icon không phình ra quá khổ. */
.game--solo {
  grid-template-columns: minmax(0, 420px) 1fr;
  margin-top: var(--s8);
}

@media (max-width: 899px) {
  .game--solo { grid-template-columns: 1fr; }
  .game--solo .game__art { max-width: 320px; }
}

/* ---------- Trang pháp lý: Terms of Use, Privacy Policy ----------
   Văn bản dài để đọc chứ không để lướt: chữ ink cỡ thân bài chứ không phải
   muted-light như mô tả vị trí, một cột rộng tối đa 68ch. Cùng khung hai cột
   1fr/2fr với trang từng vị trí, cột trái là mục lục. */
.legal-hero { padding-block: clamp(48px, 7vw, 96px) var(--s8); }
.legal-hero__meta { margin: var(--s5) 0 0; color: var(--muted-light); }

.legal { padding-bottom: var(--pad-y); }
.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;   /* không có dòng này thì mục lục giãn hết cột, sticky vô tác dụng */
  gap: var(--s8);
  padding-top: var(--s7);
  border-top: 2px solid var(--ink);
}

/* Mục lục dài hơn chiều cao màn hình laptop thấp nên tự cuộn được. Padding bù
   bằng margin âm để viền focus 3px không bị mép vùng cuộn cắt mất. */
.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s5));
  max-height: calc(100vh - var(--header-h) - var(--s7));
  overflow-y: auto;
  padding: var(--s2);
  margin: calc(var(--s2) * -1);
}
.legal__toc ol {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.legal__toc a { color: var(--muted-light); text-decoration: none; }
.legal__toc a:hover { color: var(--brand-deep); }

.legal__body { max-width: 68ch; }
.legal__body h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: var(--s8) 0 var(--s4);
}
.legal__body h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin: var(--s6) 0 var(--s3);
}
.legal__body p,
.legal__body ul,
.legal__body ol,
.legal__body address { margin: 0 0 var(--s4); }
.legal__body ul,
.legal__body ol { padding-left: var(--s5); }
.legal__body li + li { margin-top: var(--s2); }
.legal__body address { font-style: normal; }

.legal__intro { font-size: clamp(1.125rem, 1.6vw, 1.25rem); line-height: 1.55; }

.legal__summary {
  margin-top: var(--s7);
  padding: var(--s5);
  border: 2px solid var(--ink);
}
.legal__summary h2 { margin-top: 0; }
.legal__summary ul { margin-bottom: 0; }

/* Cơ sở pháp lý của từng mục đích: dòng chữ phụ ngay bên dưới chứ không in
   nghiêng, vì Space Grotesk không có bản nghiêng, trình duyệt sẽ tự bẻ xiên. */
.legal__basis {
  display: block;
  margin-top: var(--s1);
  color: var(--muted-light);
  font-size: 0.9375rem;
}

@media (max-width: 899px) {
  .legal__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .legal__toc { position: static; max-height: none; overflow: visible; }
}

/* ---------- Trang game ----------
   Khung game là thứ nổi bật nhất. Trên điện thoại, dòng pháp nhân và khung
   vừa khít một màn dưới header khi cuộn tới; trên máy tính chia hai cột, chữ
   bên trái, khung bên phải. Thứ tự trong HTML không đổi theo bố cục, nên Tab
   và trình đọc màn hình luôn đi tên → mô tả → pháp nhân → khung → nút. */

/* svh là chiều cao màn nhỏ nhất, khi thanh địa chỉ trên điện thoại đang hiện.
   Phải qua @supports: biến CSS không có cơ chế dự phòng khi giá trị sai. */
:root { --screen-h: 100vh; }
@supports (height: 100svh) { :root { --screen-h: 100svh; } }

.play { padding-block: var(--s7); }

.play__grid {
  /* Dòng pháp nhân luôn đúng hai dòng chữ, line-height cố định: nhãn 0.9375rem,
     tên 1.0625rem. Nhờ vậy biết trước chiều cao để trừ vào khung game. */
  --credit-h: calc(0.9375rem * 1.4 + 1.0625rem * 1.4);
  /* Máy tính: khung cao bằng màn trừ header và khoảng đệm trên dưới, nhưng
     không rộng quá 40% màn để cột chữ còn chỗ ở màn 900–1000px. */
  --frame-w: min(calc((var(--screen-h) - var(--header-h) - 2 * var(--s7)) * 9 / 16), 40vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--frame-w);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "title  frame"
    "desc   frame"
    "credit frame"
    "button frame";
  column-gap: var(--s8);
  align-items: start;
}

.play__title { grid-area: title; font-size: clamp(2.25rem, 5vw, 4rem); }
.play__desc { grid-area: desc; margin: var(--s4) 0 0; max-width: 46ch; color: var(--muted-light); }

.game-credit { grid-area: credit; display: block; margin-top: var(--s5); text-decoration: none; }
.game-credit__label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--muted-light);
}
/* Mũi tên chỉ xuống vẽ bằng viền: Space Grotesk không có ký tự mũi tên. */
.game-credit__label::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
/* Cỡ thân bài. Space Grotesk 700 ở 17px: tên rộng 297px, vừa 320px chiều
   rộng chữ của màn 360px. */
.game-credit__name {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
}
.game-credit:hover .game-credit__name { color: var(--brand-deep); }

.game-frame { grid-area: frame; width: 100%; aspect-ratio: 9 / 16; background: var(--ink); }
.game-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.play__fullscreen { grid-area: button; justify-self: start; margin-top: var(--s6); }

/* Khối thông tin phát hành: bảng chữ thật, cỡ thân bài, nhãn và giá trị đều
   màu ink. Cùng khung 1fr/2fr và cùng kiểu kẻ với trang vị trí tuyển dụng. */
.release { padding-block: var(--s8) var(--pad-y); }
.release h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: var(--s6); }
.release dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  margin: 0;
}
.release dt,
.release dd {
  margin: 0;
  padding-block: var(--s4);
  border-top: 1px solid var(--track-light);
}
/* Đường kẻ chạy liền qua nhãn và giá trị, nên khoảng cách giữa hai cột là
   đệm phải của nhãn chứ không phải column-gap. */
.release dt { font-weight: 700; padding-right: var(--s6); }
.release dt:first-of-type,
.release dd:first-of-type { border-top: 2px solid var(--ink); }

@media (max-width: 899px) {
  .play { padding-block: var(--s5) var(--s7); }
  .play__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "title" "desc" "credit" "frame" "button";
  }
  /* Điện thoại: dòng pháp nhân, khoảng cách --s4 và khung vừa một màn dưới
     header, chừa thêm --s4 phía dưới. */
  .game-frame {
    width: min(100%, calc((var(--screen-h) - var(--header-h) - var(--credit-h) - 2 * var(--s4)) * 9 / 16));
    justify-self: center;
    margin-top: var(--s4);
  }
  .play__fullscreen { justify-self: center; }

  .release dl { grid-template-columns: minmax(0, 1fr); }
  .release dt { padding-bottom: var(--s1); }
  .release dd,
  .release dd:first-of-type { padding-top: 0; border-top: 0; }
}