:root {
  --bg: #faf8ef;
  --fg: #776e65;
  --card-bg: #ffffff;
  --card-border: #e6ddd2;
  --accent: #edc22e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --fg: #d8cfc6;
    --card-bg: #262120;
    --card-border: #3a322c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  display: flex;
  justify-content: center;
  padding: clamp(24px, 8vmin, 72px) clamp(16px, 5vmin, 32px);
}

.hub {
  width: min(100%, 640px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 6vmin, 44px);
}

h1 {
  margin: 0;
  font-size: clamp(32px, 8vmin, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.tagline {
  margin: 6px 0 0;
  opacity: 0.65;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 고르개는 게임 페이지가 아니라 여기 한 곳에만 둔다 — 고른 값은 저장돼 모든
   페이지가 같이 읽는다. 항목 이름은 그 언어 스스로의 표기라 번역하지 않는다. */
.lang {
  flex: none;
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  font: inherit;
  /* 사파리는 16px보다 작은 글자의 입력에 초점이 가면 화면을 당겨 확대한다.
     확대는 막아 두었지만 당겨지는 것 자체가 남아 값을 내리지 않는다. */
  font-size: 16px;
  line-height: 1.2;
}

/* 한 줄에 하나씩 늘어놓던 것을 격자로 바꿨다. 게임이 여덟 개가 되면서 한 줄
   목록은 화면 하나에 다 들어오지 않았고, 다 들어오지 않는 목록은 훑는 것이
   아니라 스크롤하는 것이 된다. */
.games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 좁은 화면에서는 폭이 되는 만큼 채운다 — 360pt에서 두 줄이 되도록 150px이다. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* 줄마다 높이를 맞춘다. 그러지 않으면 이름이 라틴 문자인 카드(2048)와 한글인
     카드의 줄 높이가 몇 픽셀씩 달라 격자가 어긋나 보인다. */
  grid-auto-rows: 1fr;
  gap: 12px;
}

/* 넓은 화면에서는 열 수를 못 박는다. 폭이 되는 만큼 채우게 두면 640px에 네 열이
   들어가는데, 그 폭에서는 "한붓그리기"가 아이콘 옆에 다 서지 못하고 접힌다. */
@media (min-width: 560px) {
  .games { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  color: inherit;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* 카드 아이콘은 글자가 아니라 도형이다. 이모지는 글꼴이 그리는 그림이라 기기마다
   모양과 크기가 달랐고 제 색을 들고 왔다 — 여러 장이 나란히 선 목록에서 그것이
   가장 잘 보인다. `currentColor`로 그리므로 밝은 테마와 어두운 테마를 함께 탄다. */
.card-icon {
  width: 26px;
  height: 26px;
  flex: none;
}

/* 아이콘과 이름은 한 줄에, 설명은 그 아래 한 줄에 둔다. 설명까지 이름 옆에
   세우면 좁은 카드에서 글자가 들어갈 폭이 반으로 줄어 두 줄로 접힌다. */
.card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* 아직 다듬는 중인 게임에 붙인다. 목록에서 바로 보여야 하므로 카드 안이 아니라
   이름 옆에 둔다. 다 만들어지면 이 표시만 떼면 된다. */
.badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--accent);
  opacity: 0.9;
}

/* 카드가 좁아진 만큼 설명도 줄였다. 여기서 알아야 하는 것은 "무슨 게임인가"
   하나뿐이고, 규칙은 게임 안의 도움말이 맡는다. */
.card-desc {
  font-size: 12.5px;
  opacity: 0.6;
}

/* 아직 다듬는 중인 게임은 목록 맨 아래에 따로 모은다. 완성된 것들 사이에 섞어
   두면 처음 열어 본 사람이 하필 그것부터 눌러 보고 게임 전체를 그 인상으로
   판단한다. **딱지는 카드에도 그대로 둔다** — 여기까지 내려오지 않고 링크로 바로
   들어오는 사람도 있다. 다 만들어지면 카드를 위 목록으로 옮기고 딱지만 떼면 된다. */
.wip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--card-border);
  padding-top: clamp(18px, 4vmin, 28px);
}

.wip h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0.75;
}

.wip-note {
  margin: -6px 0 2px;
  font-size: 12.5px;
  opacity: 0.55;
}

footer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  opacity: 0.6;
}

footer a { color: inherit; }

/* 지금 보고 있는 것이 어느 배포인지. 손으로 올리는 값이라 눈에 띌 필요는 없고,
   고쳤는데 그대로면 아직 안 닿았다는 것만 알면 된다. */
.deploy {
  margin-inline-start: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}