/* ==========================================================================
   Game Center — Кено: пул 1–40, отметь 10 чисел, сервер тянет 10

   Казино-грейд проход (2026-08-14): «доска лотереи» — гравированная плата
   с бегущей золотой рамкой (.marquee-frame--accent из slot.css) и метал-
   лическим бортиком (exclude-mask, приём как .machine::before), клетки
   получили объём жетона (блик + внутренняя тень), попадания эскалируют
   тир свечения по РЕАЛЬНОЙ доле совпадений (см. hitTier() в keno.js).

   ВАЖНО: ничего из добавленного НЕ увеличивает высоту .keno-grid — рамка и
   бортик рисуются через position:absolute с отрицательным inset (как у
   .marquee-frame/.machine::before в slot.css), а фон-«плата» и box-shadow
   не требуют padding (сетка красится через сам background-контейнера,
   видимый в межклеточных gap-швах). Ни grid-template-columns, ни gap, ни
   width/margin НЕ трогались — см. правило ниже про 8×5.
   ========================================================================== */

/* Раньше тут была ещё и safety-net (overflow-y:auto + justify-content:
   flex-start) на случай переполнения — но реальный фикс высоты (8×5 вместо
   5×8, см. .keno-grid ниже) сам по себе укладывается в .game__stage не хуже
   Мин, а flex-start без реального переполнения просто прижимал всё
   содержимое к верху экрана вместо привычного центрирования, как у всех
   остальных игр — визуально выглядело как отдельный баг. Убрано. */

.keno-grid {
  /* 8 колонок × 5 строк (не 5×8) — та же высота сетки, что и у Мин (5×5,
     см. mines.css), проверенно помещающаяся в .game__stage без обрезки.
     С 5 колонками (8 строк) панель под сеткой — включая кнопку «Очистить» —
     вообще не влезала на экран телефона: .game__stage не скроллится, а
     .game__panel фиксированной высоты просто выталкивался за видимую
     область. Меньше колонок = красивее ячейки, но здесь высота критичнее. */
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(4px, 1.4vw, 7px);
  width: min(92vw, 400px);
  margin: 6px auto 0;
  /* Ниже — ТОЛЬКО высоко-нейтральные добавления: border-radius/background/
     box-shadow не влияют на layout-высоту блока (padding остаётся 0px).
     Фон виден в gap-швах между клетками — эффект гравированной платы без
     единого лишнего пикселя высоты. */
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.26)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 65%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Металлический бортик платы — exclude-mask, тот же приём, что у
   .machine::before/.mines-grid::before, тоже нулевая стоимость по высоте
   (position:absolute, отрицательный inset). */
.keno-grid::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  padding: 1.5px;
  background: linear-gradient(140deg, #cfd3da, #46454e 32%, #17151c 55%, #46454e 76%, #cfd3da);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.kn-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 700;
  color: var(--muted);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.3), transparent 55%);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.12s var(--ease-back), background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.kn-cell:active:not(:disabled) {
  transform: scale(0.88);
}
.kn-cell:disabled {
  cursor: default;
}

/* Отмечено игроком, результата ещё нет */
.kn-cell--picked {
  color: #fff;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent) 45%, transparent),
    color-mix(in srgb, var(--accent) 12%, transparent)
  );
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 14px -6px var(--accent), inset 0 -3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* После розыгрыша: отметил И выпало — попадание. Базовый (тир 1) вид ниже,
   эскалация тира 2–5 — по РЕАЛЬНОЙ доле совпадений (см. hitTier() в
   keno.js): все клетки-хиты одного раунда получают ОДИН тир одновременно,
   т.к. розыгрыш происходит разом, а не по очереди, как в Минах. */
.kn-cell--hit {
  color: #fff;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--green) 50%, transparent),
    color-mix(in srgb, var(--green) 14%, transparent)
  );
  border-color: color-mix(in srgb, var(--green) 65%, transparent);
  box-shadow: 0 0 18px -6px var(--green);
  animation: kn-hit 0.35s var(--ease-back);
}
.kn-cell--hit[data-tier='2'] {
  box-shadow: 0 0 20px -5px var(--green);
}
.kn-cell--hit[data-tier='3'] {
  border-color: color-mix(in srgb, var(--gold) 30%, var(--green) 70%);
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--gold) 25%, var(--green) 75%);
}
.kn-cell--hit[data-tier='4'] {
  border-color: color-mix(in srgb, var(--gold) 60%, var(--green) 40%);
  box-shadow: 0 0 26px -3px color-mix(in srgb, var(--gold) 55%, var(--green) 45%);
}
.kn-cell--hit[data-tier='5'] {
  border-color: var(--gold);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--gold) 45%, transparent),
    color-mix(in srgb, var(--green) 20%, transparent)
  );
  box-shadow: 0 0 30px -2px var(--gold), 0 0 46px -10px var(--gold-light);
  animation: kn-hit 0.35s var(--ease-back), kn-tier5-pulse 2s ease-in-out 0.35s infinite;
}
@keyframes kn-tier5-pulse {
  50% {
    filter: brightness(1.2) saturate(1.15);
  }
}

/* После розыгрыша: отметил, но НЕ выпало — мимо */
.kn-cell--miss {
  opacity: 0.55;
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

/* После розыгрыша: выпало, но игрок не отмечал — просто показываем тираж */
.kn-cell--drawn {
  color: var(--text);
  border-color: color-mix(in srgb, #fff 30%, transparent);
  background: rgba(255, 255, 255, 0.06);
}

@keyframes kn-hit {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}

.keno-toolbar {
  /* Счётчик отмеченных чисел — в той же строке, что и кнопки (было отдельной
     строкой сверху) — экономит вертикальное место, которого тут и так впритык. */
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.keno-toolbar .chip {
  cursor: pointer;
  border: none;
  transition: transform 0.15s var(--ease-back), filter 0.2s;
}
.keno-toolbar .chip:active {
  transform: scale(0.92);
}

.keno-picks-count {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}
.keno-picks-count b {
  color: var(--text);
}