/* Shared stylesheet for the per-language hub pages (<lang>/index.html).
   Game pages load css/game.css + css/games/<game>.css instead; the root
   language selector and 404.html keep their own inline <style>.

   The :root token block below is MIRRORED in css/game.css. The two page
   families load disjoint stylesheets, so the block exists twice on purpose —
   change one, change the other. */

:root {
  /* --- Page background ---
     Deliberately in the cool half of the wheel. The whole design rests on white
     cards floating above this gradient, and a warm/cream background sits too
     close to white in both lightness and temperature, softening the card edge.
     Staying cool also keeps the warm game boards (gomoku's wood, 2048's amber
     tiles) reading as the focal point. */
  --bg-grad-a: #ece6fb;
  --bg-grad-b: #f3ecfb;

  /* --- Accent (violet) ---
     A single value covers every use because white on --accent is 5.7:1: as a
     fill (memory cards, primary buttons, stepper) and as text on white or on
     #f3f3f3 (score / difficulty labels, 5.1:1). The earlier pink needed a
     surface-vs-action split precisely because white on #ff6b9d was 2.68:1 and
     failed WCAG AA; violet removes the need for that split. */
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-disabled: #ddd6fe;

  --accent-border: #c4b5fd;
  --accent-tint: #f5f3ff;
  --accent-tint-soft: #ede9fe;
  --accent-tint-strong: #ddd6fe;

  /* --- Text ---
     Contrast on white, and the AA-passing replacement where it fails:
       --text        #333    12.6:1  ok
       --text-body   #444     9.7:1  ok
       --text-mid    #555     7.5:1  ok
       --text-mute   #777     4.48:1 fails → #5b616b
       --text-desc   #888     3.54:1 fails → #6b7280
       --text-faint  #999     2.85:1 fails → #6b7280  */
  --text: #333;
  --text-body: #444;
  --text-mid: #555;
  --text-mute: #777;
  --text-desc: #888;
  --text-faint: #999;

  /* --- Surfaces / lines --- */
  --surface: #ffffff;
  --surface-alt: #fafafa;
  --surface-grey: #f3f3f3;
  --line: #eee;
  --line-strong: #ddd;

  /* --- Shape --- */
  --radius-card: 24px;
  --radius-btn: 14px;
  --radius-btn-sm: 12px;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.16);

  /* --- Type --- */
  --font-body: "Noto Sans KR", "Noto Sans", sans-serif;
  --font-body-ja: "Noto Sans JP", "Noto Sans", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  background: linear-gradient(135deg, var(--bg-grad-a), var(--bg-grad-b));
  padding: 40px 20px;
}

/* ja hubs load Noto Sans JP (Noto Sans KR lacks Japanese kana). */
html[lang="ja"] body {
  font-family: var(--font-body-ja);
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 8px;
  text-align: center;
}

.subtitle {
  color: var(--text-mute);
  /* Section break between the header group and the card grid. Kept at ~2.2x
     the grid's own 18px gap so the header reads as a separate block rather
     than as another grid row. 40px is also the largest value that still keeps
     the shortest hub (ko) inside one 390x844 phone screen — 44px overflows. */
  margin-bottom: 40px;
  text-align: center;
}

.game-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 880px;
  /* Cards in the same row already stretch to equal height (grid's default
     align-items: stretch); this makes every ROW equal too, so a two-line
     description in one row no longer makes that row taller than the others.
     All rows size to the tallest card in the grid. */
  grid-auto-rows: 1fr;
}

@media (max-width: 680px) {
  .game-list {
    grid-template-columns: 1fr;
    /* Single column: let each card hug its own text. Forcing every card to the
       tallest one here would only add scroll as more games are added, and the
       height difference is invisible in a stack anyway. */
    grid-auto-rows: auto;
  }
}

.game-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 20px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

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

.game-title {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--text);
}

.game-desc {
  font-size: 0.9rem;
  color: var(--text-desc);
  margin-top: 4px;
}