/* Shared stylesheet for every game page (<lang>/<game>/index.html).
   Linked as ../../css/game.css BEFORE ../../css/games/<game>.css, so the
   per-game file always wins a tie and only needs to carry that game's own
   board layout, its .container max-width, and its deliberate exceptions.

   Contains: the design tokens, the page shell (body / .container / h1 /
   .screen), the setup + difficulty widgets, the shared buttons, the win
   overlay, and the top-right game switcher (.game-menu).

   The :root token block is MIRRORED in css/style.css (the hub stylesheet).
   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;
}

/* --- Base --- */
* {
  box-sizing: border-box;
}

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

/* ja pages load Noto Sans JP (Noto Sans KR lacks Japanese kana). Mirrors the
   same rule in style.css. The ja game pages also carry an inline <style>
   override that still wins on source order; this makes the shared file
   correct on its own so a new ja page works without it. */
html[lang="ja"] body {
  font-family: var(--font-body-ja);
}

/* --- Card shell ---
   max-width is per-game (board size), so it lives in games/<game>.css.
   position: relative is the positioning context for .game-menu below. */
.container {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
  text-align: center;
  position: relative;
}

.home-link {
  display: inline-block;
  color: var(--text-faint);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.home-link:hover {
  color: var(--accent);
}

h1 {
  font-size: 1.8rem;
  margin: 0 0 20px;
}

/* --- Screens (mode / difficulty / setup / game) --- */
.screen {
  display: none;
}

.screen.active {
  display: block;
}

.section-label {
  color: var(--text-mute);
  margin-bottom: 20px;
  font-weight: bold;
}

/* --- Difficulty / mode choice list --- */
.choice-list {
  display: grid;
  gap: 12px;
}

.choice-btn {
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface-alt);
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

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

/* --- Setup screen: count stepper (ladder, wheel) --- */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 24px;
}

.count-display {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text);
  min-width: 48px;
  font-variant-numeric: tabular-nums;
}

.btn-step {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-step:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

.btn-step:disabled {
  background: var(--accent-disabled);
  cursor: not-allowed;
  transform: none;
}

/* --- Setup screen: name/result entry rows (ladder, wheel) ---
   grid-template-columns differs per game, so it stays in games/<game>.css. */
.entry-list {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.entry-row {
  display: grid;
  gap: 10px;
}

.entry-row input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-btn-sm);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.entry-row input:focus {
  outline: none;
  border-color: var(--accent-border);
}

/* --- Buttons ---
   ladder/wheel deliberately use a larger primary CTA and override padding +
   font-size in their own file; gomoku uses a smaller secondary button. */
.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

.btn-primary:disabled {
  background: var(--accent-disabled);
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--line);
  color: var(--text-mid);
  border: none;
  border-radius: var(--radius-btn-sm);
  padding: 10px 18px;
  min-height: 42px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-secondary:hover {
  background: var(--line-strong);
}

.btn-secondary:disabled {
  color: #bbb;
  cursor: not-allowed;
}

/* --- Status bar above the board --- */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.timer {
  font-variant-numeric: tabular-nums;
}

/* --- Shared text blocks --- */
.hint-text {
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.5;
}

.result-text {
  min-height: 1.4em;
  margin: 12px 0;
  font-weight: bold;
  color: var(--text-body);
  line-height: 1.5;
}

/* --- Board wrapper (positioning context for .win-overlay) ---
   max-width is per-game; gomoku overrides display to inline-block. */
.board-wrap {
  position: relative;
  margin: 0 auto;
}

/* --- Button rows ---
   New games should use .game-actions; the other names are the existing
   per-game markup and are grouped here rather than duplicated six times. */
.game-actions,
.win-actions,
.review-actions,
.overlay-actions,
.ladder-actions,
.wheel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.game-actions {
  margin-top: 16px;
}

/* --- Win / game-over overlay --- */
.win-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
}

.win-overlay.hidden {
  display: none;
}

#win-text,
#overlay-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

/* --- Top-right game switcher --- */
.game-menu {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  text-align: left;
}

.game-menu summary {
  list-style: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn-sm);
  background: var(--surface-grey);
  font-size: 1.15rem;
  user-select: none;
  transition: background 0.15s ease;
}

.game-menu summary::-webkit-details-marker {
  display: none;
}

.game-menu summary:hover {
  background: var(--accent-tint-soft);
}

.game-menu[open] summary {
  background: var(--accent-tint-strong);
}

.game-menu-list {
  position: absolute;
  top: 50px;
  right: 0;
  min-width: 190px;
  background: var(--surface);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-menu-list a {
  display: block;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: bold;
  color: var(--text-body);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.game-menu-list a:hover {
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.game-menu-list a.active {
  background: var(--surface-grey);
  color: #9ba3ab;
  cursor: default;
}