/* ============================================================
   games.css · v2 — Порции 2 + 3
   Требует токены (в style.css). Только классы g-*. Аддитивно:
   старый per-game CSS работает, пока игру не мигрировали.
   Внешних ресурсов нет. Эмодзи = иконки. Тап-таргеты ≥ 44px.
   ============================================================ */

/* ═══ ПОРЦИЯ 2 ═══════════════════════════════════════════════ */

/* ─── 1. ДОСКА + КЛЕТКА ─────────────────────────────────────
   Число колонок задаётся в игре:
   <div class="g-board tight" style="grid-template-columns:repeat(6,1fr)"> */
.g-board {
  display: grid;
  gap: var(--g-gap-tight);
  width: 100%;
  max-width: var(--g-board-max);
  margin: 0 auto;
}
.g-board.loose { gap: var(--g-gap-loose); max-width: 380px; }
.g-board.cards .g-cell { aspect-ratio: 3 / 4; }   /* v2: портретные карты (Память) */

.g-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; margin: 0; padding: 0;
  border-radius: var(--g-r-cell);
  background: var(--g-cell-bg);            /* v2: было --bg-sunken */
  color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 800;
  line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.g-board.loose .g-cell { border-radius: var(--g-r-card); font-size: 22px; }
.g-board.lined .g-cell { box-shadow: inset 0 0 0 1px var(--line); }

/* Единый словарь состояний клетки */
.g-cell.back  { background: var(--accent); color: transparent; } /* v2: рубашка карты */
.g-cell.on    { background: var(--bg-card); color: var(--ink); } /* v2: вернули цвет пипа */
.g-cell.done  { opacity: .5; cursor: default; }
.g-cell.can   { outline: 3px solid var(--g-can); outline-offset: -3px;
                background: color-mix(in srgb, var(--g-can) 14%, var(--g-cell-bg)); }
.g-cell.me    { outline: 2px solid var(--accent); outline-offset: -2px;
                background: color-mix(in srgb, var(--accent) 20%, var(--g-cell-bg)); }
.g-cell.ship  { background: var(--green); }
.g-cell.hit   { background: var(--g-hit);  color: var(--g-hit-ink);  }
.g-cell.miss  { color: var(--g-miss); }
.g-cell.dead  { background: var(--g-dead); color: var(--g-dead-ink); }
.g-cell.mine,
.g-cell.boom  { background: var(--g-boom); color: var(--g-boom-ink); }
.g-cell.water { background: repeating-linear-gradient(45deg,
                  var(--g-water-a) 0 7px, var(--g-water-b) 7px 14px); }
.g-cell:disabled { cursor: default; }

/* Цифры-соседи (сапёр): смысл несёт цифра, цвет — из токенов */
.g-n1{color:var(--p1)} .g-n2{color:var(--p3)} .g-n3{color:var(--g-hit)}
.g-n4{color:var(--p5)} .g-n5{color:var(--g-dead)} .g-n6{color:var(--p6)}
.g-n7{color:var(--ink)} .g-n8{color:var(--ink-soft)}

/* ─── 2. HUD ─────────────────────────────────────────────── */
.g-hud {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; max-width: var(--g-board-max); margin: 0 auto 10px;
  font-size: 15px; font-weight: 800; color: var(--ink);
}
.g-hud.center { justify-content: center; gap: 18px; }
.g-pill {
  font-weight: 700; font-size: 13px; color: var(--ink);
  background: var(--bg-sunken); border-radius: 8px; padding: 3px 10px;
}

/* ─── 3. ЧИП ИГРОКА ─────────────────────────────────────────
   Цвет = ЛИЧНОСТЬ: <span class="g-chip" style="--pc:var(--p1)">.
   Ход = отдельный канал (.turn). Роль — подписью, не цветом. */
.g-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-card); color: var(--ink);
  border-radius: 999px; padding: 5px 13px 5px 6px;
  box-shadow: var(--shadow); font-size: 14px; font-weight: 700;
  min-height: 40px; box-sizing: border-box;
}
.g-chip .g-av {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: var(--bg-sunken);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; box-shadow: inset 0 0 0 3px var(--pc, transparent);
}
.g-chip.turn { outline: 3px solid var(--g-turn); outline-offset: 1px; }
.g-chip.turn::after { content: "▸"; color: var(--g-turn); font-weight: 900; margin-left: 1px; }
.g-chip.out { opacity: .45; }

/* ═══ ПОРЦИЯ 3 ═══════════════════════════════════════════════ */

/* ─── 4. ИГРАЛЬНАЯ КАРТА ────────────────────────────────────
   Масть красная = токен (в тёмной светлеет). Уно: .tint + --tc. */
.g-card {
  width: 46px; height: 64px; flex: 0 0 auto;
  border-radius: var(--g-r-card); border: 2px solid var(--line);
  background: var(--bg-card); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; line-height: 1.05;
}
.g-card.lg   { width: 56px; height: 78px; font-size: 17px; }
.g-card.red  { color: var(--g-card-red); }
.g-card.win  { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.g-card.out  { opacity: .45; }
.g-card.tint { background: var(--tc); border-color: transparent; color: #fff;
               font-size: 20px; font-weight: 900; }

/* ─── 5. ПОЛОСКА (время / HP / прогресс) ────────────────────
   <div class="g-bar"><i style="width:62%"></i></div> */
.g-bar     { height: 10px; border-radius: 999px; background: var(--bg-sunken);
             overflow: hidden; width: 100%; }
.g-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.g-bar.lg  { height: 14px; }
.g-bar.hp > i { background: var(--g-hit); }
.g-bar.ok > i { background: var(--green); }

/* ─── 6. КНОПКА ВЫБОРА / ТУМБЛЕР / КЛАВИШИ ──────────────────*/
.g-opt {
  font: inherit; font-size: 16px; font-weight: 700; text-align: left;
  width: 100%; display: block; min-height: 54px; padding: 14px;
  border: 3px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card); color: var(--ink); cursor: pointer;
}
.g-opt.correct { border-color: var(--green); background: var(--green); color: #fff; }
.g-opt.wrong   { border-color: var(--g-hit); background: var(--g-hit); color: var(--g-hit-ink); }

/* сегментный тумблер (⛏/🚩 в сапёре) */
.g-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
            background: var(--bg-sunken); }
.g-toggle > button {
  font: inherit; font-size: 16px; font-weight: 800;
  min-height: 44px; min-width: 52px; padding: 0 14px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-soft); cursor: pointer;
}
.g-toggle > button.on { background: var(--accent); color: var(--accent-ink); }

/* ряд чипов/клавиш */
.g-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.g-key {
  font: inherit; font-size: 20px; font-weight: 800;
  width: 48px; height: 48px; border: 0; border-radius: 12px;
  background: var(--bg-card); color: var(--ink); box-shadow: var(--shadow); cursor: pointer;
}
.g-key.lg { width: 74px; height: 74px; font-size: 32px; border-radius: 20px; }

/* ─── 7. ИТОГОВЫЙ ЭКРАН ─────────────────────────────────────
   Композиция из уже существующих .g-huge (эмодзи), .g-status, .btn */
.g-result { text-align: center; display: flex; flex-direction: column;
            align-items: center; gap: 10px; padding: 8px; }

/* Уже есть в style.css и остаются: .g-status .g-center .g-huge .g-big-btn */