/* AlleyBits — alleybits.com
   Nền kem pha từ màu đá lát #FEDFAA, chữ navy, viền 2px và bóng đổ cứng.
   Hai màu chủ đạo Navy + Teal; amber chỉ dùng làm nhãn dán, tím và hồng ở lại
   trong logo. Teal nguyên bản #05B6C1 trên nền kem chỉ ~2.4:1 nên chữ và link
   dùng bản đậm #047F87. */

:root {
  color-scheme: light;

  --bg:        #FFF7EA;   /* kem, pha từ đá lát */
  --bg-2:      #FEDFAA;   /* đá lát */
  --card:      #FFFFFF;
  --ink:       #252C58;
  --ink-2:     #4B5280;
  --line:      #EBD7B3;
  --rule:      var(--ink);
  --teal:      #05B6C1;
  --teal-ink:  #047F87;
  --amber:     #FDB527;
  --on-amber:  #252C58;
  --foot:      #252C58;   /* nền chân trang */
  --logo:      url("/img/logo-horizontal.svg");
  --hero-art:  url("/img/hero.webp");
  --kerb-back: #D9C1A1;
  --kerb-top:  #E8D4B9;
  --kerb-edge: #F4E4CE;
  --kerb-face: #CDB292;
  --kerb-joint:#B99C79;

  --display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --body:    "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:   68rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Nền tối phải TỐI HƠN navy #252C58, không thì mặt hông hai tháp tan vào nền.
   Riêng mark thì đã có bản nâng navy — xem tools/gen_site_assets.py. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #1B2145;
    --bg-2:     #252C58;
    --card:     #262D5C;
    --ink:      #FFF7EA;
    --ink-2:    #C2C6E0;
    --line:     #3A4278;
    --rule:     #4A5390;
    --teal-ink: #3FD2DB;
    --foot:     #141936;
    --logo:     url("/img/logo-horizontal-dark.svg");
    --hero-art: url("/img/hero-dark.webp");
    --kerb-back: #28315A;
    --kerb-top:  #2E3862;
    --kerb-edge: #3C4880;
    --kerb-face: #232C52;
    --kerb-joint:#1A2144;
  }
}
:root[data-theme="dark"] {
  --bg:       #1B2145;
  --bg-2:     #252C58;
  --card:     #262D5C;
  --ink:      #FFF7EA;
  --ink-2:    #C2C6E0;
  --line:     #3A4278;
  --rule:     #4A5390;
  --teal-ink: #3FD2DB;
  --foot:     #141936;
  --logo:     url("/img/logo-horizontal-dark.svg");
  --hero-art: url("/img/hero-dark.webp");
  --kerb-back: #28315A;
  --kerb-top:  #2E3862;
  --kerb-edge: #3C4880;
  --kerb-face: #232C52;
  --kerb-joint:#1A2144;
}

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka-Variable-subset.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: .6rem 1rem;
  font-weight: 700;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.35rem; }
p  { max-width: 62ch; }

/* Nhãn dán nghiêng — amber và teal, không dùng tím/hồng làm màu giao diện. */
.label {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 6px;
  transform: rotate(-1.5deg);
}
.label.amber { background: var(--amber); color: var(--on-amber); }
.label.teal  { background: var(--teal);  color: #0F1330; }

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 2px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 5.25rem;
}

.brand {
  display: block;
  width: 11rem;
  height: 3rem;
  background: var(--logo) left center / contain no-repeat;
  flex: none;
}

.nav-links {
  display: flex;
  gap: 1.6rem;
  margin-inline-start: auto;
  font-weight: 700;
  font-size: .95rem;
}
.nav-links a { color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--teal-ink); }
@media (max-width: 46rem) {
  .nav-links { gap: 1.1rem; font-size: .875rem; }
  .brand { width: 9rem; height: 2.45rem; }
  .nav { min-height: 4.5rem; }
}
@media (max-width: 26rem) {
  .nav-links a[href="#work"] { display: none; }
}

.toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 2px solid var(--rule);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--rule);
  transition: transform .12s, box-shadow .12s;
}
.toggle:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rule); }
.toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Nút hiện biểu tượng của theme SẮP đổi sang, không phải theme đang bật. */
.icon-sun  { display: none; }
.icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun  { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}
:root[data-theme="dark"]  .icon-sun  { display: block; }
:root[data-theme="dark"]  .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun  { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  /* chừa chỗ cho phần chân thò xuống dưới mặt quầy */
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: end;
}
@media (max-width: 54rem) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-copy { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero h1 { margin-top: 1.1rem; }
.lead {
  margin-top: 1.1rem;
  font-size: 1.15rem;
  color: var(--ink-2);
}

/* Tranh hero. Ảnh cắt trong suốt, không có khung bao: bản sáng render cho đúng
   nền kem #FFF7EA, bản tối cho #1B2145, nên nó phải nằm thẳng trên nền trang.
   Ảnh nền chứ không phải <img> vì phải đổi theo NÚT đổi theme, mà <picture media>
   thì chỉ nghe cài đặt hệ điều hành — cùng lý do với --logo. */
.hero-art {
  /* Bó vỉa có pseudo-element định vị nên nó vẽ cùng tầng với khối này; không
     nâng z-index thì .counter đè mất khúc chân thò xuống. */
  position: relative;
  z-index: 1;
  /* nới sang phải hết phần gutter cho tranh thở, vẫn nằm trong .wrap nên
     không đẻ ra thanh cuộn ngang */
  width: calc(100% + var(--gutter));
  aspect-ratio: 1906 / 1309;
  /* Mép cắt trong ảnh nằm ở 71.81% chiều cao, nên đúng hình học thì đẩy xuống
     28.19%. Nhưng chân đồ trong tranh KHÔNG nằm trên một đường thẳng — chỗ thấp
     chỗ cao lệch nhau tới 20px nguồn — nên căn đúng 28.19% là gần một nửa số
     cột hở ra một khe nền trang 2-3px dưới đáy đồ. Đẩy thêm 1.4% cho đồ lún
     nhẹ vào mặt trên bó vỉa: 374 cột chạm đất thì chỉ còn 5 cột hở, mà 5 cột đó
     là khoảng trống thật (gầm kệ), không phải khe.
     transform không chiếm chỗ trong layout nên phần thò xuống là tràn, .hero
     chừa sẵn padding-bottom. Cắt lại ảnh là phải đo và chỉnh lại con số này. */
  transform: translateY(29.6%);
  /* transform không đụng tới layout, nên hộp của tranh vẫn chiếm đủ chiều cao
     ở CHỖ CŨ: 29.6% phía trên hộp rỗng không, đội hero cao thêm chừng ấy.
     Kéo hộp lên đúng bằng lượng đã đẩy xuống thì tranh đứng y nguyên chỗ nhìn
     thấy, chỉ có phần rỗng biến mất. Margin phần trăm tính theo BỀ NGANG của ô
     lưới, mà chiều cao = bề ngang / (1906/1309), nên 29.6% chiều cao đổi ra
     29.6% × 1309/1906 = 20.33% bề ngang. Đổi tỷ lệ ảnh là phải tính lại. */
  margin-top: -20.33%;
  background: var(--hero-art) center bottom / contain no-repeat;
}

/* Bó vỉa: khối đá chạy hết bề ngang, người trong tranh ngồi lên nó.

   Khối này nói tiếng của BỨC TRANH chứ không phải của trang: không viền navy
   2px, không màu phẳng, phân tầng bằng sắc độ. Màu lấy theo đá trong ảnh
   (#DEC7AE) chứ không theo đá lát #FEDFAA của bảng màu trang. Lúc đầu tôi làm
   nó theo ngôn ngữ phẳng của trang và nó lệch hẳn — chỗ này là đúng đường tiếp
   giáp giữa hai thứ tiếng nên mắt đổ dồn vào, sai một chút là thấy ngay.

   HÌNH KHỐI. Mặt trên là một MẶT PHẲNG NGANG nhìn xiên, không phải cái gờ:
   phải đủ dày để đọc ra mặt, tối ở mép sau và sáng dần ra mép trước, kết bằng
   một vạch bắt sáng đúng chỗ nó gãy xuống mặt đứng. Bản trước tôi để mặt trên
   mỏng .7rem rồi đổ bóng NGAY DƯỚI nó — thành ra dải ấy đọc ra một cái gờ nhô
   ra đang hắt bóng, mà đồ đạc thì đứng lửng giữa mặt gờ, sai hình học. */
.counter {
  position: relative;
  height: 3.25rem;
  background:
    /* mép dưới, khép khối bằng sắc độ chứ không bằng nét */
    linear-gradient(0deg, var(--kerb-joint) 0 2px, transparent 2px),
    var(--kerb-face);
}
/* Mặt trên. Mép sau tối hơn vì khuất, sáng dần ra tới mép trước. */
.counter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1.2rem;
  background: linear-gradient(180deg,
    var(--kerb-back) 0, var(--kerb-top) 58%, var(--kerb-edge) 100%);
}
/* Mạch đá lát, chỉ trên mặt đứng và chỉ bằng sắc độ. Thưa và mờ: dày quá thì
   thành hoa văn phẳng đè lên tranh 3D. */
.counter::after {
  content: "";
  position: absolute;
  inset: 1.2rem 0 2px;
  background: repeating-linear-gradient(90deg,
    transparent 0 7rem, var(--kerb-joint) 7rem calc(7rem + 2px));
  opacity: .5;
}

/* ---------- section chung ---------- */

.section { padding-block: clamp(3rem, 7vw, 5rem); }
.lede { margin-top: .9rem; color: var(--ink-2); font-size: 1.05rem; }

/* ---------- what we do ---------- */

.stalls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 46rem) {
  .stalls { grid-template-columns: 1fr; }
}

.stall {
  background: var(--card);
  border: 2px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

/* Sọc mái hiên thu nhỏ — chỗ duy nhất còn giữ mô-típ sọc. */
.stall-stripe { height: .6rem; }
.stall-stripe.teal {
  background: repeating-linear-gradient(90deg, var(--teal) 0 1.25rem, var(--card) 1.25rem 2.5rem);
}
.stall-stripe.amber {
  background: repeating-linear-gradient(90deg, var(--amber) 0 1.25rem, var(--card) 1.25rem 2.5rem);
}

/* Hai thẻ cao bằng nhau: ô trống của Games nở ra cho đầy, dòng chân của Packs
   bị đẩy xuống đáy. Để mặc thì thẻ ngắn hơn trông như bị hụt. */
.stall { display: flex; flex-direction: column; }
.stall-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem 2rem 1.5rem;
}
.stall h3 { margin-bottom: .6rem; font-size: 1.55rem; }
.stall p  { color: var(--ink-2); }

/* Gạch đầu dòng vẽ bằng CSS, KHÔNG dùng ✓ hay → — hai font đã rút gọn không có
   hai ký tự đó, viết vào là rơi về font hệ thống giữa dòng. Ô vuông nhỏ cũng
   ăn nhịp với mảnh pixel trong logo. */
.spec {
  display: grid;
  gap: .45rem;
  /* margin-top:auto của .stall-foot chỉ chia phần thừa, hết chỗ là nó dính sát
     dòng cuối — nên khoảng cách phải đặt ở đây. */
  margin: 1.1rem 0 1.6rem;
  color: var(--ink-2);
  font-size: .975rem;
}
.spec li {
  position: relative;
  padding-inline-start: 1.4rem;
}
.spec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .5rem;
  height: .5rem;
  border-radius: 2px;
  background: var(--teal);
}

/* Ô trống giữ chỗ cho game đầu tiên — nói thật là chưa có, và cho thấy chỗ nó
   sẽ nằm. Xoá khi đã có mục #games. */
.slot {
  display: grid;
  place-content: center;
  flex: 1;
  min-height: 6rem;
  margin-top: 1.1rem;
  padding: 1.5rem 1rem;
  border: 2px dashed color-mix(in srgb, var(--ink-2) 40%, transparent);
  border-radius: 12px;
  text-align: center;
  font-family: var(--display);
  color: var(--ink-2);
}

.stall-foot {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink-2);
}
.stall-foot a { color: var(--teal-ink); }

/* ---------- lưới card: dùng cho Packs, và cho Games khi có ---------- */

.tinted { background: var(--card); border-block: 2px solid var(--line); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.item {
  background: var(--bg);
  border: 2px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--rule);
}

.item-shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 2px solid var(--rule);
}

.item-body { padding: 1.5rem 1.375rem 1.5rem; }
.item-body h3 { margin: .6rem 0 .5rem; }
.item-body p  { color: var(--ink-2); font-size: .975rem; }

.item-facts {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1.1rem;
  color: var(--ink);
}
.price { font-family: var(--display); font-weight: 600; font-size: 1.35rem; }
.dot   { color: var(--line); }
.soon  { color: var(--ink-2); font-size: .9rem; }

/* ---------- footer ---------- */

/* Nền sáng: chân trang navy. Nền tối: navy đã là màu của khối Packs nên chân
   trang phải tụt xuống dưới nữa, không thì hai khối dính làm một. */
.site-foot {
  background: var(--foot);
  color: #FFF7EA;
  padding-block: clamp(2.75rem, 6vw, 4rem) 2.25rem;
  border-top: 2px solid var(--rule);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 46rem) {
  .foot-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

.site-foot h2 {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A9AECF;
  margin-bottom: .6rem;
}
.site-foot p { color: #C2C6E0; font-size: .95rem; }

.foot-brand {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: #FFF7EA;
  margin-bottom: .4rem;
}

.mail {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--amber);
  margin-bottom: .35rem;
}

.stores { display: grid; gap: .3rem; font-size: .95rem; }
/* Chưa có link thì là <span>: mờ, gạch chân đứt. Có link thì là <a>, màu amber. */
span.store { color: #A9AECF; border-bottom: 1px dashed #4A5390; }
a.store { color: #FFF7EA; text-decoration-color: #4A5390; }
a.store:hover { color: var(--amber); }
.store-note { margin-top: .6rem; font-size: .875rem; }

.fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #3A4278;
  font-size: .82rem;
  color: #A9AECF;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}