.tg-riddles {
  --tgr-gap: clamp(5px, 1vw, 10px);
  --tgr-pad-y: clamp(5px, .9vh, 10px);
  --tgr-pad-x: clamp(8px, 1.2vw, 14px);
  --tgr-card-min: 44px;
  --tgr-border: 2px;
  /* Core 1.11: отступ общей карточки — рамка + отступ постоянны, как прежде */
  --tg-card-pad-y: calc(var(--tgr-pad-y) + var(--tgr-border));
  --tg-card-pad-x: calc(var(--tgr-pad-x) + var(--tgr-border));
  --tgr-board-max: 880px;
  --tgr-left: 1.5fr;
  /* доли ширины поля под столбцами — для кегля, см. .tg-riddles__card */
  --tgr-share-a: .6;
  --tgr-share-b: .4;
  --tgr-line: 1.16;
  --tgr-rows: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--tgr-gap);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.tg-riddles,
.tg-riddles *,
.tg-riddles *::before,
.tg-riddles *::after {
  box-sizing: border-box;
}

.tg-riddles__heads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tgr-gap);
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--tgr-board-max);
  margin-inline: auto;
}

.tg-riddles__caption {
  margin: 0;
  padding: 0 var(--tgr-pad-x);
  color: var(--tg-muted, #695e54);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tg-riddles__board {
  display: grid;
  grid-template-columns: minmax(0, var(--tgr-left, 1.5fr)) minmax(0, 1fr);
  gap: var(--tgr-gap);
  /* Поле не сжимается: при общих строках сжатие режет текст карточек, а
     без них прятало перелив под строкой отгаданного. Если не влезает —
     это видно в матрице как прокрутка, а не маскируется. */
  flex: 0 0 auto;
  width: 100%;

  max-width: var(--tgr-board-max);
  margin-inline: auto;
  min-width: 0;
  min-height: 0;

  /* Контейнер — всё поле, а не столбец: сдерживание раскладки у столбца
     отключает общие строки (subgrid). Доли шрифта ниже пересчитаны от
     ширины поля за вычетом зазора: доли столбцов лежат в --tgr-share-a/b
     и меняются вместе с --tgr-left. Кегль выходит тот же, что считался
     от ширины столбца. */
  container-type: inline-size;
}

.tg-riddles__col {
  display: grid;
  grid-auto-rows: minmax(var(--tgr-card-min), auto);
  gap: var(--tgr-gap);
  align-content: start;
  min-width: 0;
}

@supports (grid-template-rows: subgrid) {
  .tg-riddles__board {
    /* Строки обоих столбцов — общие. Столбцы разной ширины, и шрифт в них
       разный: без общих строк на узком телефоне карточки справа были ниже
       соседей слева, и к низу поля столбцы расходились на полторы сотни
       точек. Число строк поле объявляет в data-cards. */
    grid-template-rows: repeat(var(--tgr-n, 5), minmax(var(--tgr-card-min), auto));
  }

  .tg-riddles__board[data-cards="6"] {
    --tgr-n: 3;
  }

  .tg-riddles__board[data-cards="8"] {
    --tgr-n: 4;
  }

  .tg-riddles__board[data-cards="10"] {
    --tgr-n: 5;
  }

  .tg-riddles__col {
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }
}

.tg-riddles__card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;

  min-height: max(
    var(--tgr-card-min),
    calc(
      var(--tgr-rows) * var(--tgr-line) * 1em
      + 2 * var(--tgr-pad-y)
      + 2 * var(--tgr-border)
    )
  );
  margin: 0;
  /* Core 1.11: рамку, заливку, состояния (data-tg-state), наведение и фокус
     рисует ядро — общая карточка семьи игр, как в «Странах и столицах». */

  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tg-riddles__text {
  display: block;
  width: 100%;
  min-width: 0;
  line-height: var(--tgr-line);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}

.tg-riddles__board[data-maxlen="s"] .tg-riddles__card {
  font-size: clamp(15px, 5.0vw, 22px);
  font-size: clamp(15px, min(calc((100cqw - var(--tgr-gap)) * var(--tgr-share-a) * 0.17), 5.2vh), 22px);
}

.tg-riddles__board[data-maxlen="m"] .tg-riddles__card {
  font-size: clamp(14px, 4.6vw, 21px);
  font-size: clamp(14px, min(calc((100cqw - var(--tgr-gap)) * var(--tgr-share-a) * 0.135), 4.6vh), 21px);
}

.tg-riddles__board[data-maxlen="l"] .tg-riddles__card {
  font-size: clamp(13px, 3.8vw, 20px);
  font-size: clamp(13px, min(calc((100cqw - var(--tgr-gap)) * var(--tgr-share-a) * 0.087), 3.8vh), 20px);
}

.tg-riddles__board[data-maxlen="s"] .tg-riddles__card[data-side="b"] {
  /* Отгадка — одно слово, и при общем размере она выглядела крупнее
     фразы слева, хотя читать надо загадку. Правый столбец получает свой
     потолок на ступень ниже; пределы для телефона те же, что слева. */
  font-size: clamp(15px, min(calc((100cqw - var(--tgr-gap)) * var(--tgr-share-b) * 0.17), 5.2vh), 20px);
}

.tg-riddles__board[data-maxlen="m"] .tg-riddles__card[data-side="b"] {
  font-size: clamp(14px, min(calc((100cqw - var(--tgr-gap)) * var(--tgr-share-b) * 0.135), 4.6vh), 20px);
}

.tg-riddles__board[data-maxlen="l"] .tg-riddles__card[data-side="b"] {
  font-size: clamp(13px, min(calc((100cqw - var(--tgr-gap)) * var(--tgr-share-b) * 0.092), 3.8vh), 19px);
}

.tg-riddles__card[disabled] {
  cursor: default;
}

.tg-riddles__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tg-riddles__found {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(22px, 3.2vh, 34px);
  padding: 0 var(--tgr-pad-x);
  color: var(--tg-muted, #695e54);
  font-size: clamp(12px, 1.5vw, 18px);
  text-align: center;
}

.tg-riddles__found[data-empty="1"] {
  color: transparent;
}

.tg-riddles__shop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: var(--tgr-board-max);
  margin-inline: auto;
  padding: 0 0 var(--tgr-gap);
}

.tg-riddles__shop[data-open="0"] {
  display: none;
}

.tg-riddles__shop[hidden] {
  display: none;
}

.tg-riddles__shopNote {
  margin: 0;
  color: var(--tg-muted, #695e54);
  font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1.35;
  text-align: center;
}

.tg-riddles__shopRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tg-riddles__buy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px;
  min-height: var(--tgr-card-min);
  border: var(--tgr-border) solid var(--tg-result-dark, #2b463b);
  border-radius: var(--tg-radius-control, 14px);
  background: var(--tg-result, #3f5f52);
  color: var(--tg-surface-strong, #fffdf8);
  font: inherit;
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 16px);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tg-riddles__buyPrice {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tg-result-dark, #2b463b);
  color: var(--tg-surface-strong, #fffdf8);
  font-size: .88em;
  font-weight: 700;
}

.tg-riddles__buy:focus-visible {
  outline: 3px solid var(--tg-focus, #f0b24a);
  outline-offset: 2px;
}

.tg-riddles__buy[disabled] {
  opacity: .45;
  cursor: default;
}

.tg-riddles__card[data-fresh] {
  transition: none;
}

@media (max-width: 420px) {
  .tg-riddles {
    /* Узкий телефон: при десяти карточках и самом длинном допустимом тексте
       поле выходило за экран на двенадцать точек. Отыграны они здесь — на
       зазорах и строке отгадки, — а не урезанием словаря. Замерено на 360x640. */
    --tgr-gap: 4px;
    --tgr-pad-y: 5px;
    --tgr-pad-x: 8px;
  }

  .tg-riddles__found {
    min-height: 18px;
    font-size: 12px;
  }
}

@media (max-height: 560px) {
  .tg-riddles {
    --tgr-gap: 4px;
    --tgr-pad-y: 3px;
    --tgr-pad-x: 10px;
    --tgr-rows: 1;
    --tgr-board-max: 620px;
    --tgr-left: 1.7fr;
    --tgr-share-a: .63;
    --tgr-share-b: .37;
  }

  .tg-riddles__heads,
  .tg-riddles__found {
    display: none;
  }

  .tg-riddles__shop {
    gap: 5px;
    padding-bottom: 4px;
  }

  .tg-riddles__shopNote {
    display: none;
  }

  .tg-riddles__buy {
    min-height: 38px;
    padding: 6px 11px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tg-riddles__card {
    transition: none;
  }
}

.tg-riddles__probeTitle {
  margin: 0 0 6px;
  color: var(--tg-ink, #382d25);
  font-size: 15px;
  font-weight: 700;
}

.tg-riddles__probe {
  margin: 0 0 2px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--tg-surface, #fff8eb);
  color: var(--tg-muted, #695e54);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}