/* контейнер сцены и центр */
.stage{ display:grid; grid-template-columns:1fr; gap:16px; padding:16px 20px 24px; }
.stage-center{ max-width:1300px; margin-inline:auto; width:100%; }

/* рамка поля */
.board-frame{ max-width:min(1200px,100%); margin-inline:auto; }
.ratio-16x9{ position:relative; width:100%; aspect-ratio:16/9; }

.board-surface{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(6,10,30,.96), rgba(10,14,38,.94) 55%, rgba(10,14,38,.90));
  border:4px solid #0e0f2a;
  box-shadow:var(--shadow);
}

/* сетка: 5 строк, 1 колонка под категории + 5 под стоимости (6 колонок всего) */
.game-grid{
  position:absolute;
  inset:.65rem;                 /* отступ от рамки */
  /* width/height не нужны, иначе даёт погрешность */
  display:grid;
  gap:14px;
  --cat-col: minmax(160px, 1.1fr);
  grid-template-columns: var(--cat-col) repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: row;
  container-type:inline-size;
}

/* базовый вид плиток */
.game-category,.game-cell{
  display:flex; align-items:center; justify-content:center; text-align:center; user-select:none;
  border-radius:14px; background:var(--blue); box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);
  min-height:0; /* для grid, чтобы строки не росли */
}

/* категория */
.game-category{ padding:12px 10px; overflow:hidden; }
.game-category .cat-label{
  display:block; font-weight:900; line-height:1.15;
  font-size:clamp(16px,3.2cqi,22px); white-space:normal; word-break:break-word;
  overflow-wrap:anywhere; hyphens:auto;
}
@supports (-webkit-text-stroke:1px black){
  .game-category .cat-label{ -webkit-text-stroke:.3px currentColor; paint-order:stroke fill; }
}
@supports (-webkit-line-clamp:3){
  .game-category .cat-label{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  }
}

/* ячейки (стоимости/кнопки вопроса) */
.game-cell{
  color:var(--lime); font-weight:900; font-size:clamp(16px,5.2cqi,30px);
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
  cursor:pointer;
}
.game-cell:hover{ background:var(--blue-2); transform:translateY(-1px); }
.game-cell:active{ transform:scale(.98); }
.game-cell.used-cell{ opacity:.35; pointer-events:none; }

/* мигание при выборе */
@keyframes cell-blink{ 0%,100%{background:var(--blue);color:var(--lime)} 50%{background:var(--lime);color:var(--blue)} }
.game-cell.cell-blink{ animation:cell-blink .7s ease-in-out 3; }

/* адаптив сетки */
@media (min-width:1024px) and (max-width:1279.98px){
  .game-grid{ gap:12px; inset:.55rem; width:calc(100% - 1.1rem); height:calc(100% - 1.1rem); }
  .game-grid{ --cat-col:minmax(150px,1.05fr); }
}
@media (max-width:1023.98px){
  .game-grid{ gap:10px; --cat-col:minmax(140px,1fr); }
  .game-category{ border-radius:12px; padding:10px 8px; }
  .game-cell{ border-radius:12px; }
}

/* тоньше рамка на низких экранах */
@media (max-height:800px){ .board-surface{ border-width:3px; } }
@media (min-width:1920px){ .board-surface{ box-shadow:0 22px 60px rgba(0,0,0,.45); } }

/* роль single: запрещаем «клик» у неактивных режимов — в демо всё равно кликабельно */
body[data-role="single"] .game-cell[aria-disabled="true"]{
  pointer-events:none!important; cursor:default!important; transform:none!important;
}


/* ====== АНИМАЦИЯ ВХОДА БОРДА ====== */
/* Состояния: .grid-enter — старт (скрыто), .grid-animate — проигрываем вход */

.game-grid.grid-enter .game-category,
.game-grid.grid-enter .game-cell{
  opacity: 0;
  transform: translateY(8px) scale(.98);
  filter: saturate(.9) brightness(.98);
}

@keyframes cat-enter {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cell-enter {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Проигрывание анимации */
.game-grid.grid-animate .game-category{
  animation: cat-enter .32s ease-out both;
  /* ступенчато: 1..6 колонок категорий */
}
.game-grid.grid-animate .game-cell{
  animation: cell-enter .34s ease-out both;
  /* задержку задаём переменной (можем проставить JS’ом) */
  animation-delay: var(--enter-delay, 0ms);
}

/* CSS-только ступенчатая задержка без JS (по индексу DOM) */
.game-grid.grid-animate .game-category:nth-child(1){ animation-delay: 20ms; }
.game-grid.grid-animate .game-category:nth-child(2){ animation-delay: 60ms; }
.game-grid.grid-animate .game-category:nth-child(3){ animation-delay:100ms; }
.game-grid.grid-animate .game-category:nth-child(4){ animation-delay:140ms; }
.game-grid.grid-animate .game-category:nth-child(5){ animation-delay:180ms; }
.game-grid.grid-animate .game-category:nth-child(6){ animation-delay:220ms; }

/* Ячейки идут после 6 категорий: делаем волной по строкам */
.game-grid.grid-animate .game-cell{
  /* базовая ступень: каждые 6 элементов немного позже */
}
.game-grid.grid-animate .game-cell:nth-of-type(6n+1){ animation-delay:  40ms; }
.game-grid.grid-animate .game-cell:nth-of-type(6n+2){ animation-delay:  80ms; }
.game-grid.grid-animate .game-cell:nth-of-type(6n+3){ animation-delay: 120ms; }
.game-grid.grid-animate .game-cell:nth-of-type(6n+4){ animation-delay: 160ms; }
.game-grid.grid-animate .game-cell:nth-of-type(6n+5){ animation-delay: 200ms; }
.game-grid.grid-animate .game-cell:nth-of-type(6n+6){ animation-delay: 240ms; }

/* Уважение reduce-motion */
@media (prefers-reduced-motion: reduce){
  .game-grid.grid-enter .game-category,
  .game-grid.grid-enter .game-cell{ opacity:1; transform:none; filter:none; }
  .game-grid.grid-animate .game-category,
  .game-grid.grid-animate .game-cell{ animation:none; }
}

/* Анимация появления ячеек */
.game-cell,
.game-category {
  opacity: 0;
  transform: translateY(12px);
}

.cell-enter {
  animation: cellFadeIn .45s ease forwards;
}

@keyframes cellFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==== MOBILE FIX: чтобы сетка не обрезалась по краям ==== */
@media (max-width: 900px) {
  /* контейнер доски */
  #game-board,
  .board-frame,
  .board-box,
  .board-surface {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* сетка: НЕ трогаем width/height, только слегка поджимаем inset */
  .game-grid {
    inset: .55rem;              /* было .65rem в десктопе */
    gap: 10px;
    --cat-col: minmax(140px, 1fr);
  }

  /* ячейки не должны вылезать за пределы, пусть ужимаются */
  .game-grid * {
    min-width: 0;
  }
}

/* ==== Сетка на очень узких экранах (iPhone вертикально) ==== */
@media (max-width: 600px) {
  .game-grid {
    /* ещё меньше внутренний отступ */
    inset: .4rem;

    /* меньше зазоры между клетками */
    gap: 6px;

    /* ужимаем колонку с категориями */
    --cat-col: minmax(110px, 0.9fr);
    grid-template-columns: var(--cat-col) repeat(5, minmax(0, 1fr));
  }

  .game-category {
    padding: 8px 6px;
    border-radius: 10px;
  }

  .game-category .cat-label {
    font-size: clamp(12px, 3cqi, 16px);
  }

  .game-cell {
    border-radius: 10px;
    font-size: clamp(12px, 4cqi, 18px);
  }
}