/* 시작 페이지 (MGW-DEV-007 → DEV-028 → MGW-HFX-004, 다솜): 게임 목록 · 시작 · 랭킹 보기
   MGW-HFX-004(사용자 결정 11-02): 시작 페이지만 세로 스크롤 허용(게임 화면은 스크롤 0 그대로).
   - 머리줄(.tb)은 위에 붙어 있음(sticky) — 카드가 그 밑으로 지나가며 머리줄 단추를 덮지 않는다.
   - 카드 = 한 가지 꼴(세로 카드), 크기 일정: [그림] [이름] [Best] [재료 칩] [▶ 트로피].
   - 열 수 = 화면 폭 따라 자동: repeat(auto-fill, minmax(카드 최소 폭, 1fr)). 게임 수를 CSS 에 박지 않는다(칸이 늘어도 줄만 늘어남).
     카드 최소 폭 clamp(136px, 20vw, 168px) → 폰 320~390 2열 · 가로 폰 667 4열 · 태블릿 768 4열 · 1024 이상 5열(묶음 폭 980 상한).
   카드 링크(a.card)는 display: contents 라 안의 그림·이름·Best·▶ 가 카드 격자에 바로 놓인다(재료 칩·트로피는 링크 밖 버튼). */
* { box-sizing: border-box; }
html, body { margin: 0; }
body.home {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--cf-bg);
  color: var(--cf-ink);
  font-family: var(--cf-font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* 머리줄: 위에 붙임. 바탕은 ::before 그림자로 화면 폭 끝까지 칠한다(그림자는 가로 스크롤을 만들지 않음).
   ::before 에만 clip-path(아래 끝 자름) — 소리 메뉴 같은 펼침은 머리줄 밖으로 그대로 나온다 */
body.home > .tb {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  margin-top: env(safe-area-inset-top, 0px);
}
body.home > .tb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cf-bg);
  box-shadow: 0 0 0 100vmax var(--cf-bg);
  clip-path: inset(-100vmax -100vmax 0 -100vmax);
  pointer-events: none;
}
.home-main { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 16px; }

/* 탑바 칸 보이기·모양은 common/top.css(MGW-DEV-030: 시작 페이지·3게임 공통 세트) */

.games {
  --card-min: clamp(136px, 20vw, 168px);
  list-style: none;
  width: min(100vw - 24px, 980px);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  grid-auto-rows: auto;
  gap: 12px;
}
/* 세로 카드: [그림] [이름] [Best] [재료 칩] [▶ 트로피] — 모든 카드가 같은 줄 구조라 높이가 같다 */
.game {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "icon icon"
    "name name"
    "best best"
    "mat  mat"
    "play rank";
  justify-items: center;
  align-items: center;
  column-gap: 8px;
  padding: 14px 8px 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(29, 37, 64, 0.08);
}
.card { display: contents; color: inherit; text-decoration: none; }
.game:has(.card:focus-visible) { outline: 3px solid var(--cf-accent); outline-offset: 2px; }
.card-icon { grid-area: icon; margin: 0 0 8px; }
.card-name { grid-area: name; min-width: 0; justify-self: center; font-size: 16px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card-best { grid-area: best; justify-self: center; margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--cf-muted); white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 기록 없음: 자리만 남겨 카드끼리 높이·줄을 맞춘다 */
.card-best.none { visibility: hidden; }
/* 재료 칩: 보이는 높이 26, 누르는 칸은 ::before 로 위아래 9px 넓혀 44 */
.mat {
  grid-area: mat; justify-self: center; position: relative; margin-top: 6px; max-width: 100%;
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 4px; border: 0; border-radius: 13px;
  background: #eef1f8; color: var(--cf-ink); font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer;
}
.mat::before { content: ""; position: absolute; inset: -9px 0; }
.mat img { display: block; flex: none; width: 18px; height: 18px; }
.mat small { margin-left: 3px; font-size: 10px; font-weight: 700; color: var(--cf-muted); }
.mat:hover { background: #e2e7f3; }
.mat:focus-visible, .rank-btn:focus-visible, .newhere:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 2px; }
.play-ic { grid-area: play; justify-self: end; margin-top: 12px; }
.rank-btn { grid-area: rank; justify-self: start; margin-top: 12px; }
.play-ic, .rank-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.play-ic { background: var(--cf-accent); color: #fff; box-shadow: 0 4px 12px rgba(63, 111, 224, 0.35); }
.play-ic svg { width: 26px; height: 26px; }
.rank-btn { padding: 0; border: 0; background: #eef1f8; color: var(--cf-ink); cursor: pointer; }
.rank-btn svg { width: 24px; height: 24px; }
a.card:hover .play-ic { filter: brightness(1.08); }
.rank-btn:hover { background: #e2e7f3; }

/* 처음 온 사람 줄 → /help/. 로그인 뒤·한 번 누른 뒤는 숨김(자리는 남겨 카드가 움직이지 않게) */
.newhere {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; height: 44px; margin-top: 4px; padding: 0 14px; border-radius: 22px;
  font-size: 14px; font-weight: 700; color: var(--cf-muted); white-space: nowrap; text-decoration: none;
}
.newhere b { color: var(--cf-accent-ink); }
.newhere svg { width: 16px; height: 16px; color: var(--cf-accent-ink); }
.newhere.off { visibility: hidden; }

/* 카드 그림 (그림 파일 없이 CSS로, 64px 기준 좌표를 zoom으로 키운다) */
.card-icon { --z: 1; flex: none; width: 64px; height: 64px; border-radius: 14px; position: relative; overflow: hidden; zoom: var(--z); }
.icon-2048 { background: #1f2638; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; }
.icon-2048 i { border-radius: 6px; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 13px; }
.icon-2048 i:nth-child(1) { background: #e6f0f4; color: #24304a; }
.icon-2048 i:nth-child(2) { background: #6fd0c2; color: #10332f; }
.icon-2048 i:nth-child(3) { background: #5a5fe0; color: #fff; }
.icon-2048 i:nth-child(4) { background: linear-gradient(135deg, #ff7a6b, #f5b041); color: #1d2540; font-size: 9px; }
.icon-snake { background: #1f2638; }
.icon-snake i { position: absolute; width: 12px; height: 12px; border-radius: 4px; background: #3fc1ae; }
.icon-snake i:nth-child(1) { left: 12px; top: 40px; background: #1f8f86; }
.icon-snake i:nth-child(2) { left: 25px; top: 40px; }
.icon-snake i:nth-child(3) { left: 25px; top: 27px; }
.icon-snake i:nth-child(4) { left: 38px; top: 27px; background: #8ef0dc; }
.icon-snake b { position: absolute; left: 42px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #ff7a6b; }
.icon-planet { background: #1f2638; }
.icon-planet b { position: absolute; left: 8px; right: 8px; top: 14px; bottom: 6px; border: 2px solid #4a5a8a; border-top: 0; border-radius: 0 0 18px 18px; background: #283252; }
.icon-planet i { position: absolute; z-index: 1; border-radius: 50%; }
.icon-planet i:nth-child(1) { width: 14px; height: 14px; left: 13px; bottom: 10px; background: radial-gradient(circle at 35% 32%, #ffd9cf 0 12%, #e2563f 38%, #b23a28); }
.icon-planet i:nth-child(2) { width: 22px; height: 22px; left: 28px; bottom: 9px; background: radial-gradient(circle at 35% 32%, #5cc46a 0 12%, #3d8de8 38%, #2a6cc0); }
.icon-planet i:nth-child(3) { width: 12px; height: 12px; left: 26px; top: 6px; background: radial-gradient(circle at 35% 32%, #fffbea 0 12%, #efe7c6 38%, #cfc39a); }
/* MGW-DEV-031: Bricks 카드 그림(다솜 DSN-005 2.9 card-bricks.svg 인라인) */
.icon-bricks svg { display: block; width: 64px; height: 64px; }

/* 큰 카드 단계(폭 600 이상 + 높이 500 이상 = 태블릿·넓은 화면): 그림 96, ▶·트로피 52. 열 수 규칙은 같다 */
@media (min-width: 600px) and (min-height: 500px) {
  .games { gap: 14px; }
  .game { padding: 18px 8px 18px; }
  .card-icon { --z: 1.5; margin-bottom: 10px; }
  .card-name { font-size: 17px; }
  .play-ic, .rank-btn { width: 52px; height: 52px; }
  .play-ic, .rank-btn { margin-top: 14px; }
}

/* 404 페이지(home.css 공유): 한 화면 가운데 홈 단추 */
.nf { justify-content: center; }
.nf a { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--cf-accent); color: #fff; }
.nf svg { width: 32px; height: 32px; }

/* (선택, PM 결정) 새 게임 점: 카드 왼쪽 위 8px 점, 글자 없음 */
.game.is-new { position: relative; }
.game.is-new::after { content: ""; position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--cf-accent); box-shadow: 0 0 0 2px #fff; pointer-events: none; }