/* ==========================================================================
   КУПОНЫ (next/, 08.10.2026). Префикс kp- свой: стили в каркасе общие на все
   игры, и чужой префикс красил бы чужие экраны.

   ЗАДНИК СВОЙ: тёмный бархат цвета вина с тёплыми пятнами света, нарисован
   здесь же градиентами. Картинок других игр не берём (у каждой игры своё лицо).
   ========================================================================== */

/* ---------- главная страница купонов ---------- */

/*
 * ТРИ ВКЛАДКИ: «Отправлено · Получено · Создать» (владелец 08.10). Общий .switch
 * каркаса на три колонки. Счётчик новых висит кружком над углом вкладки, а не в
 * строке: «Отправлено 2» в треть ширины телефона не влезало.
 */
.kp-vkladki { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--s-4); }
.kp-vkladki .switch__half { position: relative; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.kp-vkladki__chislo {
  position: absolute; top: -13px; right: 0;
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--c-rose); color: var(--c-text);
  font: 700 12px/1 var(--f-sans); box-shadow: 0 0 0 2px var(--c-bg);
}

.kp-razdel { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3);
  font: 600 var(--t-label-l) var(--f-sans); color: var(--c-text); }
.kp-razdel span { color: var(--c-muted); font-weight: 500; }

/*
 * СТОПКА, как билеты в кошельке, при любом числе купонов (владелец 08.10: «мы же
 * утвердили, где они друг под дружкой»). Новый лежит ПОВЕРХ старого (владелец 09.10:
 * «чтобы новые были сверху старых, а не наоборот»; слой даёт z-index из разметки):
 * верхний билет виден целиком, каждый следующий уходит под предыдущий только верхней
 * четвертью, строкой «КУПОН · ИМЯ». Название и всё ниже видно: при нахлёсте в 44%,
 * как было, от старых оставались хвосты названий («в постель»), и владелец из трёх
 * вариантов выбрал этот. Метка стоит ВНИЗУ справа (вверху её закрыл бы сосед), тень
 * падает вниз, на билет под ним. Отступ в процентах считается от ширины, а высота
 * купона это 0.43 ширины: 0.43 × 0.245.
 */
/* Слои билетов замкнуты внутри стопки: иначе билет с z-index ложился поверх липкой
   «Создать купон» внизу экрана. */
.kp-koshelyok { display: flex; flex-direction: column; margin-bottom: var(--s-4); isolation: isolate; }
.kp-bilet {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: 2048 / 880; filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
  transition: transform var(--m-micro) ease;
}
.kp-bilet + .kp-bilet { margin-top: -10.5%; }
.kp-bilet:hover, .kp-bilet:focus-visible { transform: translateY(-6px); }
.kp-bilet__mini { width: 100%; height: 100%; display: block; }
.kp-bilet__metka {
  position: absolute; bottom: 6%; right: 3%; max-width: 60%; padding: 3px 10px;
  border-radius: var(--r-pill); border: 1px solid var(--c-border); background: rgba(12,9,11,.78);
  color: var(--c-text); font: 600 12px/1.4 var(--f-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kp-bilet__metka--novyiy { background: var(--c-rose); border-color: transparent; }
/* Погасшие (использованы или истекли) ниже живых: серые, с меткой «Использован» или «Срок вышел». */
.kp-bilet--pogas .kp-bilet__mini { filter: grayscale(.85) brightness(.65); }
.kp-bilet--pogas .kp-bilet__metka { color: var(--c-muted); }
.kp-eshchyo { display: block; margin: 0 auto var(--s-4); }

.kp-pusto { padding: var(--s-6) var(--s-4); text-align: center; color: var(--c-muted);
  border: 1px dashed var(--c-border); border-radius: var(--r-lg); margin-bottom: var(--s-4); }

.kp-besplatno { color: var(--c-muted); font: 400 var(--t-body-s) var(--f-sans); text-align: center; margin: var(--s-2) 0 var(--s-4); }
.kp-besplatno--vsyo { color: var(--c-gold); }

.kp-pechatj {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0 var(--s-5); text-align: left; cursor: pointer;
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-gold);
}
.kp-pechatj:hover { border-color: var(--c-gold); }
.kp-pechatj__tekst { display: grid; gap: 2px; flex: 1; color: var(--c-text); }
.kp-pechatj__tekst b { font: 600 var(--t-label-l) var(--f-sans); }
.kp-pechatj__tekst span { color: var(--c-muted); font: 400 var(--t-body-s) var(--f-sans); }
.kp-pechatj__shevron { color: var(--c-muted); }

.kp-para-nuzhna__zagolovok { font: 500 var(--t-title-l) var(--f-serif); margin-bottom: var(--s-2); }
.kp-para-nuzhna__tekst { color: var(--c-muted); margin-bottom: var(--s-3); }
.kp-para-nuzhna__punktyi { padding-left: 1.2em; display: grid; gap: var(--s-2); color: var(--c-text); }

/* ---------- сцена купона (конструктор и просмотр): свой задник ---------- */

.kp-stsena, .kp-vid {
  background:
    radial-gradient(18% 14% at 80% 22%, rgba(255,190,140,.16), transparent 70%),
    radial-gradient(24% 16% at 16% 78%, rgba(255,120,170,.12), transparent 70%),
    radial-gradient(120% 90% at 30% 10%, #5a1a35 0%, #2a0c1c 48%, #12050c 100%);
}
.kp-stsena {
  position: sticky; top: 0; z-index: 3;
  height: min(38vh, 300px); margin: 0 calc(-1 * var(--s-4)) var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
@media (min-width: 1024px) {
  .kp-stsena { margin: 0 0 var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--c-border); height: 340px; }
}
.kp-stsena canvas, .kp-vid__stsena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.kp-stsena__zhdyom { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* Без WebGL: плоский купон по центру, с лёгким наклоном. */
canvas.kp-ploskiy { position: absolute; inset: 0; margin: auto; width: 86% !important; height: auto !important;
  transform: perspective(900px) rotateX(6deg) rotateY(-8deg); filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); }

/* ---------- конструктор ---------- */

.kp-nazvanie { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: end; }
.kp-idei { margin-bottom: 2px; white-space: nowrap; }
.kp-pole { width: 100%; }
textarea.kp-pole { resize: none; overflow: hidden; min-height: 84px; }
.kp-imena { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: start; }
.kp-data { width: 100%; margin-top: var(--s-3); color-scheme: dark; }

/*
 * ШАГ МЕЖДУ ВОПРОСАМИ. Каркас ставит его правилом `.choice + .choice`, а у нас в
 * ряду вопросов стоят и свои обёртки (название с «Идеями», два имени в строку,
 * поле даты). Без этих строк обещание прилипало к названию, «От кого» съезжала
 * ниже «Кому», а цвет прилипал к сроку, пока поле даты спрятано (стенд 08.10).
 */
.kp-nazvanie + .choice, .kp-imena, .kp-imena + .choice, .kp-data + .choice { margin-top: var(--s-4); }
.kp-imena > .choice + .choice { margin-top: 0; }

/* Срок: пять вариантов словами в один ряд не влезали ни на одном языке
   («Без сро…», «3 меся…»), поэтому по три в строке, остаток делит вторую. */
#kpMake .choice[data-vopros="srok"] .choice__opts { flex-wrap: wrap; }
#kpMake .choice[data-vopros="srok"] .choice__opt { flex: 1 1 calc((100% - 2 * var(--s-2)) / 3); }
/* «Senza scadenza», «Geen einddatum» в треть ширины не влезали в строку: переносим, а не режем. */
#kpMake .choice[data-vopros="srok"] .choice__opt { white-space: normal; line-height: 1.15; text-align: center; }

/* Узоры образцами: кусок бумаги выбранного цвета, четыре в ряд. */
.kp-uzoryi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.kp-uzor {
  aspect-ratio: 1.4; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-alt);
}
.kp-uzor canvas { width: 100%; height: 100%; display: block; }
.kp-uzor[aria-pressed="true"] { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.28); }

.kp-palitryi { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s-2); }
@media (max-width: 380px) { .kp-palitryi { grid-template-columns: repeat(4, 1fr); } }
.kp-palitra {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 70% 30%, var(--c) 0 18%, transparent 19%), linear-gradient(135deg, var(--a), var(--b));
  border: 2px solid var(--c-border); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.kp-palitra[aria-pressed="true"] { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.28), inset 0 0 0 2px rgba(0,0,0,.25); }

/* Маскот в двенадцати позах: четыре в ряд крупными образцами на бумаге выбранного цвета
   (шесть в ряд мелкие фигурки на телефоне не различались). */
.kp-risunki { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.kp-risunok {
  aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-alt);
}
.kp-risunok canvas { width: 100%; height: 100%; display: block; }
.kp-risunok[aria-pressed="true"] { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.28); }

.kp-oshibka { color: var(--c-danger); font: 500 var(--t-body-s) var(--f-sans); margin-top: var(--s-2); }

.kp-spisok-idey { display: grid; gap: var(--s-2); max-height: 60vh; overflow-y: auto; }
.kp-ideya {
  display: grid; gap: 2px; text-align: left; padding: var(--s-3); cursor: pointer;
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text);
}
.kp-ideya:hover { border-color: var(--c-gold); }
.kp-ideya b { font: 600 var(--t-label-l) var(--f-sans); }
.kp-ideya span { color: var(--c-muted); font: 400 var(--t-body-s) var(--f-sans); }
.kp-gotov { display: grid; gap: var(--s-4); }
.kp-gotov p { color: var(--c-muted); }

/* ---------- один купон во весь экран ---------- */

/*
 * Экран без верхней и нижней полос (nav.js), поэтому отступ сверху свой и с
 * вырезом телефона. Отрицательного отступа сверху нет: у каркаса над экраном
 * поля нет, и стрелка уезжала к самому краю (стенд 08.10, верх стрелки на 0).
 * Высота за вычетом нижнего поля каркаса (--s-12 у страниц без полосы), чтобы
 * на обычном телефоне купон был ровно в один экран без прокрутки.
 */
.kp-vid {
  min-height: calc(100dvh - var(--s-12)); display: grid; grid-template-rows: auto 1fr auto;
  margin: 0 calc(-1 * var(--s-4));
  padding: calc(var(--s-3) + env(safe-area-inset-top, 0px)) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { .kp-vid { margin: 0; border-radius: var(--r-xl); min-height: calc(100dvh - var(--s-8)); } }
.kp-vid__verkh { display: flex; align-items: center; gap: var(--s-3); }
.kp-vid__kto { color: var(--c-muted); font: 500 var(--t-label-l) var(--f-sans); }
.kp-vid__stsena { position: relative; min-height: 46vh; }
.kp-vid__niz { display: grid; gap: var(--s-2); text-align: center; padding-bottom: var(--s-4); }
.kp-vid__obeshchanie { margin: 0 auto var(--s-2); max-width: 34em; color: var(--c-text); font: italic 400 var(--t-body-m) var(--f-serif); }
.kp-vid__svodka { color: var(--c-text); font: 600 var(--t-label-l) var(--f-sans); }
/* История отрывов под купоном: свёрнута в «Отрывов: N», по нажатию список дат и времени, свежие сверху. */
.kp-istoriya { color: var(--c-muted); font: 500 var(--t-body-s) var(--f-sans); }
.kp-istoriya summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; cursor: pointer; list-style: none;
  border: 1px solid var(--c-border); border-radius: var(--r-pill); color: var(--c-muted);
}
.kp-istoriya summary::-webkit-details-marker { display: none; }
.kp-istoriya[open] summary { color: var(--c-text); border-color: var(--c-border-strong); }
.kp-istoriya__spisok {
  display: grid; gap: 2px; max-width: 22em; max-height: 30vh; overflow-y: auto;
  margin: var(--s-2) auto 0; padding-left: 2.6em; text-align: left; color: var(--c-text);
}
.kp-vid__podskazka { color: var(--c-gold); font: 500 var(--t-body-s) var(--f-sans); }
.kp-vid__knopki { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-2); }
.kp-vid__knopki .btn { min-width: 140px; }

.kp-vestj .task__tekst { font-family: var(--f-serif); }