/* Тренажёры видения доски (views/vision_hub.ejs, views/vision_game.ejs). Основа - стили
   «Шахов и взятий» (checks_captures.css: страница, детский экран запуска, доска, итоги),
   здесь - кнопки ответа, числа, панель фигур, одноцветная доска, общая страница. */

.cc-kids .vg-pills-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vg-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px dashed var(--kid-border);
  border-radius: 16px;
  background: var(--kid-card);
  color: var(--kid-ink);
  font-weight: 800;
  text-align: center;
}

.cc-kids select.vg-select-pink {
  border-color: #ec4899;
}

.cc-kids .cc-num:disabled {
  opacity: 0.5;
}

/* ---------- доска ---------- */
.vg-board-shell {
  position: relative;
}

/* одноцветная доска: цвет поля не видно (картинка доски - на .cg-board-wrap, в том числе
   из выбора «Доска и фигуры», public/css/board_themes.css) */
/* однородный серый с сеткой по границам полей, как в Chess-Vision-Trainer: поле видно, цвет - нет */
.vg-page .vg-mono .cg-board-wrap {
  background-color: #d0d0d0 !important;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 1px, transparent 1px) !important;
  background-size: 12.5% 12.5% !important;
  background-position: 0 0 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

/* без доски: только название поля на месте доски */
.vg-coord {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 3px solid #c9b6ff;
  border-radius: 24px;
  background: linear-gradient(160deg, #fff6e0 0%, #e8f6ff 48%, #f2e7ff 100%);
  color: #3b2a6b;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: clamp(4rem, 22vw, 10rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  opacity: 0.25;
  transition: opacity 0.15s ease;
}

.vg-coord.is-shown {
  opacity: 1;
}

.vg-coord[hidden] {
  display: none;
}

html[data-theme='dark'] .vg-coord {
  border-color: #5b47a8;
  background: linear-gradient(160deg, #221a46 0%, #142844 50%, #2b1840 100%);
  color: #f1ecff;
}

/* ---------- ответы ---------- */
.vg-answers {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.vg-answers-1 {
  grid-template-columns: minmax(0, 1fr);
}

.vg-answers-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vg-answers-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vg-ans {
  --ans: #8b5cf6;
  --ans-dark: #6d28d9;
  --ans-ink: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 10px 8px;
  border: 2px solid var(--ans-dark);
  border-radius: 16px;
  background: var(--ans);
  color: var(--ans-ink);
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 4px 0 var(--ans-dark);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

.vg-ans:hover:not(:disabled) {
  filter: brightness(1.05);
}

.vg-ans:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ans-dark);
}

.vg-ans:focus-visible,
.vg-num:focus-visible,
.vg-pal-btn:focus-visible,
.vg-hub-card:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

.vg-ans:disabled {
  opacity: 0.55;
  cursor: default;
}

.vg-ans[hidden] {
  display: none;
}

.vg-ans-light {
  --ans: #ffffff;
  --ans-dark: #9ca3af;
  --ans-ink: #1f2937;
}

.vg-ans-dark {
  --ans: #374151;
  --ans-dark: #111827;
  --ans-ink: #fff;
}

.vg-ans-eq {
  --ans: #8b5cf6;
  --ans-dark: #6d28d9;
}

.vg-ans-go {
  --ans: #22c55e;
  --ans-dark: #15803d;
}

.vg-ans-stop {
  --ans: #ef4444;
  --ans-dark: #b91c1c;
}

.vg-ans-next {
  --ans: #0ea5e9;
  --ans-dark: #0369a1;
}

/* выбранная сторона в «Материальном перевесе» */
.vg-ans.is-active {
  outline: 4px solid #f59e0b;
  outline-offset: 2px;
}

html[data-theme='dark'] .vg-ans-light {
  --ans: #e5e7eb;
  --ans-dark: #6b7280;
}

html[data-theme='dark'] .vg-ans-dark {
  --ans: #1f2937;
  --ans-dark: #000;
  border-color: #4b5563;
}

.vg-keys {
  margin-top: 6px;
  text-align: center;
}

@media (hover: none) {
  .vg-keys {
    display: none;
  }
}

.vg-ask {
  margin-top: 8px;
  font-weight: 800;
  text-align: center;
}

/* числа 1-9 */
.vg-nums-wrap {
  margin-top: 12px;
}

.vg-nums-wrap[hidden] {
  display: none;
}

.vg-nums-label {
  margin-bottom: 6px;
  text-align: center;
}

.vg-nums {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}

.vg-num {
  min-height: 44px;
  padding: 0;
  border: 2px solid #f59e0b;
  border-radius: 12px;
  background: var(--surface-1, #fff);
  color: var(--text-1, #212529);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 0 3px 0 #b45309;
  cursor: pointer;
}

.vg-num:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b45309;
}

.vg-num:disabled {
  opacity: 0.5;
  cursor: default;
}

.vg-breakdown {
  margin-top: 10px;
  min-height: 1.4em;
  color: var(--text-2, #6c757d);
  font-size: 0.92rem;
  text-align: center;
}

.vg-breakdown:empty {
  display: none;
}

/* счёт */
.vg-score {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 14px 0 4px;
  color: var(--text-2, #6c757d);
  font-size: 0.95rem;
}

.vg-score b {
  color: var(--text-1, #212529);
  font-variant-numeric: tabular-nums;
}

/* ---------- запоминание: панель фигур ---------- */
.vg-palette {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border, #dee2e6);
  border-radius: 12px;
  background: var(--surface-1, #fff);
}

.vg-palette.vg-palette-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.vg-palette[hidden] {
  display: none;
}

.vg-pal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 4px;
  border: 2px solid var(--border, #dee2e6);
  border-radius: 10px;
  background: #e9eef1;
  cursor: pointer;
}

/* в тёмной теме фон светлее, чтобы чёрные фигуры не терялись */
html[data-theme='dark'] .vg-pal-btn {
  background: #8a9ba4;
  border-color: #5b6b73;
}

.vg-pal-btn.is-selected {
  border: 3px solid #16a34a;
  background: #bbf7d0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.45);
}

html[data-theme='dark'] .vg-pal-btn.is-selected {
  background: #166534;
}

.vg-pal-eraser {
  color: #b91c1c;
  font-size: 1.4rem;
  font-weight: 900;
}

/* фигура панели - те же классы, что на доске (.merida .cg-board piece.X.Y и выбор набора
   в «Доска и фигуры»), но без расстановки по клеткам */
.vg-palette .vg-pc {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  cursor: inherit;
}

.vg-palette .vg-pc piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.vg-place-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.vg-place-actions[hidden],
.vg-place-hint[hidden] {
  display: none;
}

.vg-place-hint {
  margin-top: 8px;
  text-align: center;
}

/* ---------- общая страница ---------- */
.vg-hub {
  display: grid;
  /* по две карточки в ряд (их 4), на телефоне - по одной */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.vg-hub-card {
  --hub: #8b5cf6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 3px solid var(--hub);
  border-radius: 22px;
  background: linear-gradient(160deg, #fff6e0 0%, #e8f6ff 55%, #f2e7ff 100%);
  color: #3b2a6b;
  text-decoration: none;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--hub) 70%, #000);
  transition: transform 0.1s ease;
}

.vg-hub-card:hover {
  color: #3b2a6b;
  text-decoration: none;
  transform: translateY(-2px);
}

html[data-theme='dark'] .vg-hub-card,
html[data-theme='dark'] .vg-hub-card:hover {
  background: linear-gradient(160deg, #221a46 0%, #142844 55%, #2b1840 100%);
  color: #f1ecff;
}

.vg-hub-card-0 { --hub: #ec4899; }
.vg-hub-card-1 { --hub: #64748b; }
.vg-hub-card-2 { --hub: #f59e0b; }
.vg-hub-card-3 { --hub: #8b5cf6; }
.vg-hub-card-4 { --hub: #22c55e; }

.vg-hub-ico {
  line-height: 0;
}

.vg-hub-title {
  font-size: 1.25rem;
  font-weight: 900;
}

.vg-hub-text {
  flex: 1;
  font-size: 0.95rem;
  opacity: 0.85;
}

.vg-hub-play {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 12px;
  background: var(--hub);
  color: #fff;
  font-weight: 900;
}

@media (max-width: 520px) {
  /* три кнопки в ряд («Одноцветная», «Без доски») - без значков, с переносом */
  .cc-kids .vg-pills-3 .cc-pill {
    padding: 10px 4px;
    font-size: 0.9rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }

  .cc-kids .vg-pills-3 .cc-ico {
    display: none;
  }

  .vg-nums {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .vg-answers-3 .vg-ans {
    font-size: 0.98rem;
  }
}