/* GIFTbase — Тайный Санта в браузере (/santa/, /ru/santa/, закрытый тест с 07.10.2026).
   Основа — styles.css сайта (шрифт Montserrat, плашка снизу .gb-snack и конфетти celebrate.js).
   Здесь — ночная тема игры по макету «Тайный Санта GIFTbase»: фон #08070F, фиолетовое сияние
   сверху, снег, Unbounded в заголовках. Акценты: фиолетовый #6F00FF, золото #F4C95D (сезон,
   ключ, печать), мята #8EE3B1 (готово), коралл — только «не дарить». Плашки заливкой, без обводок.
   Всё движение выключается при prefers-reduced-motion. Ширина — телефон: колонка до 480 px. */

@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

html.santa-html { background: #08070F; scrollbar-gutter: stable; }
html.sn-locked { overflow: hidden; }
body.santa {
  --bg: #08070F;
  --card: #202433;     /* плашки и карточки — surfaceVariant тёмной темы приложения (19.10.2026, выбор Андрея) */
  --card-2: #2B3044;   /* вложенное в плашку: поля, строки выбора, плитки кода */
  --card-3: #363C55;   /* нейтральные чипы и приглушённые плашки-статусы */
  --ink: #F4F2FA;
  --ink-2: #C9C3DD;
  --ink-3: #A39DBA;
  --ink-4: #7D7796;
  --violet: #6F00FF;
  --violet-2: #8B5CF6;
  --lilac: #C4B5FD;
  --gold: #F4C95D;
  --mint: #8EE3B1;
  --coral: #FF6B8A;
  --line: rgba(255, 255, 255, .08);
  --glow: 0 12px 32px rgba(111, 0, 255, .35);
  --spring: cubic-bezier(.2, 1.4, .4, 1);
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.5;
  position: relative; overflow-x: hidden; overflow-x: clip;   /* clip: hidden ломал бы закреплённую шапку */
  -webkit-font-smoothing: antialiased;
}
:where(body.santa) a { color: var(--lilac); }
:where(body.santa) a:hover { color: #E4DCFF; }
:where(body.santa) button { font: inherit; color: inherit; }
.santa .u, .sn-h1, .sn-h2, .sn-h3, .sn-brand, .sn-btn, .sn-cta, .sn-num { font-family: 'Unbounded', 'Montserrat', sans-serif; }

/* ---------- небо и снег ---------- */
.sn-sky {
  position: absolute; inset: 0 0 auto 0; height: 640px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 45% at 15% 0%, rgba(111, 0, 255, .55), transparent 70%),
    radial-gradient(55% 40% at 95% 12%, rgba(70, 130, 255, .32), transparent 70%);
}
.sn-snow { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sn-snow i {
  position: absolute; top: -12px; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, .6); animation: sn-fall linear infinite; will-change: transform;
}
@keyframes sn-fall { from { transform: translate3d(0, -20px, 0); } to { transform: translate3d(var(--dx, 0px), 110vh, 0); } }

/* ---------- шапка, колонка, подвал ---------- */
.sn-head, .sn-main, .sn-foot { position: relative; z-index: 1; width: 100%; max-width: 480px; margin: 0 auto; }
.sn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 20px; }
.sn-brand { font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink) !important; text-decoration: none; }
.sn-head-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sn-head-r a, .sn-head-r button.lnk { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 6px 4px; cursor: pointer; }
.sn-lang { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--ink) !important; text-decoration: none; }
/* выбор языка как на сайте (styles.css .lang-*, разметка langMenuHtml): правило ссылок шапки выше его не трогает */
.sn-head-r .lang-wrap a.lang-pill { width: 34px; height: 34px; padding: 0; color: var(--ink-2); }
.sn-head-r .lang-wrap.open a.lang-pill, .sn-head-r .lang-wrap a.lang-pill:hover { color: #fff; }
.sn-head-r .lang-menu a.lang-opt { padding: 9px 12px 9px 9px; font-size: 14.5px; font-weight: 600; color: #d1d5db; }
.sn-head-r .lang-menu a.lang-opt:hover { color: #fff; }
#rm-host:empty { display: none; }
.sn-role { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(244, 201, 93, .14); color: var(--gold); font-size: 13px; font-weight: 700; white-space: nowrap; }
.sn-role svg { width: 15px; height: 15px; }
.sn-main { flex: 1; padding: 6px 20px 40px; }
.sn-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 18px 20px 28px; font-size: 12px; color: var(--ink-4); }
.sn-foot a { color: var(--ink-4) !important; text-decoration: none; }
.sn-foot a:hover { color: var(--ink-2) !important; }
.sn-noscript { text-align: center; padding: 40px 20px; }

.sn-stack { --g: 28px; display: flex; flex-direction: column; gap: var(--g); }
.sn-stack.tight { --g: 16px; }
/* колонки для широкого экрана; на телефоне их нет — блоки идут подряд в общем стеке */
.sn-cols, .sn-col, .sn-tail, .sn-hero { display: contents; }
.sn-desk { display: none; }
.santa [hidden] { display: none !important; }
.sn-gap-s { display: flex; flex-direction: column; gap: 12px; }
.sn-gap-xs { display: flex; flex-direction: column; gap: 8px; }

/* ---------- текст ---------- */
.sn-h1 { margin: 0; font-weight: 700; font-size: 34px; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.sn-h1.long { font-size: 26px; line-height: 1.15; }
.sn-h2 { margin: 0; font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.sn-h3 { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sn-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.sn-p { margin: 0; color: var(--ink-2); }
.sn-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); text-align: center; text-wrap: pretty; }
.sn-eyebrow { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: rgba(244, 201, 93, .14); color: var(--gold); }
.sn-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sn-center { text-align: center; align-items: center; }
.sn-muted { color: var(--ink-3); }
.sn-err-t { color: #FF9DB2; font-size: 13px; font-weight: 600; margin: 0; }
.sn-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sn-sec-h a, .sn-sec-h button { font-size: 13px; font-weight: 700; color: var(--lilac); background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.sn-label { font-size: 13px; font-weight: 600; color: var(--ink-3); padding-left: 4px; }

/* ---------- кнопки ---------- */
.sn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; text-decoration: none !important;
  transition: transform .12s ease, opacity .2s ease, background-color .2s ease;
  -webkit-user-select: none; user-select: none;
}
.sn-btn:active { transform: scale(.97); }
.sn-btn[disabled], .sn-btn.busy { opacity: .55; pointer-events: none; }
.sn-btn.w { background: #FFFFFF; color: #14111F !important; box-shadow: var(--glow); }
.sn-btn.v { background: var(--violet); color: #FFFFFF !important; }
.sn-btn.d { background: var(--card-2); color: var(--ink) !important; }
.sn-btn.g { background: rgba(244, 201, 93, .16); color: var(--gold) !important; }
.sn-btn.r { background: rgba(255, 107, 138, .14); color: #FF9DB2 !important; }
.sn-btn.sm { min-height: 46px; padding: 0 18px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; border-radius: 16px; }
.sn-btn.block { width: 100%; }
.sn-btn svg { width: 20px; height: 20px; flex: none; }
.sn-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sn-btns .sn-btn.sm { padding: 0 10px; white-space: nowrap; font-size: 13.5px; }
.sn-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  height: 60px; padding: 0 8px 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: #FFFFFF; color: #14111F !important; text-decoration: none !important;
  font-weight: 600; font-size: 16px; box-shadow: var(--glow); transition: transform .12s ease;
}
.sn-cta:active { transform: scale(.98); }
.sn-cta i { width: 44px; height: 44px; border-radius: 50%; background: var(--violet); display: flex; align-items: center; justify-content: center; flex: none; }
.sn-cta svg { width: 20px; height: 20px; color: #FFFFFF; }
.sn-back { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; color: var(--ink); }
.sn-back svg { width: 18px; height: 18px; }
.sn-topbar { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.sn-topbar .t { display: flex; flex-direction: column; min-width: 0; }
.sn-topbar .t b { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.2; }
.sn-topbar .t small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-txt-btn { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--lilac); font-size: 13px; font-weight: 700; }
.sn-txt-btn.mute { color: var(--ink-3); font-weight: 600; }
.sn-txt-btn.red { color: #FF9DB2; }

/* ---------- поля ---------- */
.sn-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sn-in, .sn-ta, .sn-sel {
  width: 100%; min-width: 0; border: 0; outline: 0; border-radius: 16px; background: var(--card); color: var(--ink);
  font: 500 16px/1.4 'Montserrat', sans-serif; transition: box-shadow .15s ease, background-color .15s ease;
}
.sn-in, .sn-sel { height: 52px; padding: 0 16px; }
.sn-ta { min-height: 96px; padding: 14px 16px; resize: vertical; display: block; }
.sn-in:focus, .sn-ta:focus, .sn-sel:focus { box-shadow: 0 0 0 2px var(--violet-2); background: #18142A; }
.sn-in::placeholder, .sn-ta::placeholder { color: #6F6888; }
.sn-in.err, .sn-ta.err { box-shadow: 0 0 0 2px var(--coral); }
.sn-code-in { font-family: 'Unbounded', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sn-code-in::placeholder { letter-spacing: .12em; }
.sn-inrow { display: flex; gap: 8px; }
.sn-inrow .sn-in { flex: 1; }
.sn-inrow .sn-btn.sm { min-height: 52px; }
.sn-count { align-self: flex-end; font-size: 11.5px; color: var(--ink-4); margin-top: -4px; }
input[type="date"].sn-in { -webkit-appearance: none; appearance: none; color-scheme: dark; }

/* ---------- плашки и строки ---------- */
.sn-card { background: var(--card); border-radius: 22px; padding: 16px 18px; }
.sn-card.pad-l { padding: 20px; }
.sn-card.soft { background: rgba(255, 255, 255, .04); }
.sn-card .sn-in, .sn-card .sn-ta, .sn-card .sn-sel { background: var(--card-2); }
.sn-card .sn-in:focus, .sn-card .sn-ta:focus { background: #221D38; }
.sn-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 20px;
  background: var(--card); color: var(--ink) !important; text-align: left; text-decoration: none !important; cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
}
button.sn-row:active, a.sn-row:active { transform: scale(.985); }
button.sn-row:hover, a.sn-row:hover { background: #191526; }
.sn-row > img, .sn-row .ic { width: 44px; height: 44px; object-fit: contain; flex: none; }
.sn-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-row .tx b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.sn-row .tx small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.sn-row .end { flex: none; font-size: 13px; font-weight: 700; color: var(--lilac); }
.sn-row .chev { width: 18px; height: 18px; color: var(--ink-4); flex: none; }
.sn-rows { display: flex; flex-direction: column; gap: 8px; }
.sn-steps { display: flex; flex-direction: column; gap: 12px; }
.sn-step { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 22px; background: var(--card); }
.sn-step img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.sn-step b { font-size: 15px; display: block; margin-bottom: 4px; line-height: 1.3; }
.sn-step span { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.sn-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sn-grid2 > div { padding: 14px; border-radius: 18px; background: var(--card); font-size: 14px; font-weight: 600; line-height: 1.35; }

/* переключатель */
.sn-sw { position: relative; width: 52px; height: 30px; flex: none; }
.sn-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sn-sw i { position: absolute; inset: 0; border-radius: 999px; background: #2E2845; transition: background-color .2s ease; }
.sn-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .25s var(--spring); }
.sn-sw input:checked + i { background: var(--violet); }
.sn-sw input:checked + i::after { transform: translateX(22px); }
.sn-sw input:focus-visible + i { box-shadow: 0 0 0 2px var(--lilac); }
.sn-sw.mint input:checked + i { background: #2FA36B; }
.sn-toggle { display: flex; align-items: center; gap: 14px; padding: 4px 2px; cursor: pointer; }
.sn-toggle .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-toggle .tx b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.sn-toggle .tx small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

/* ---------- чипы ---------- */
.sn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(111, 0, 255, .2); color: #E9E1FF; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background-color .15s ease, transform .12s ease, color .15s ease; max-width: 100%;
}
.sn-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sn-chips .sn-chip { max-width: 100%; }
.sn-chip:active { transform: scale(.96); }
.sn-chip.off { background: var(--card-2); color: var(--ink-2); }
.sn-chip.on { background: var(--violet); color: #FFFFFF; }
.sn-chip.avoid { background: rgba(255, 107, 138, .14); color: #FF9DB2; }
.sn-chip.avoid.on { background: rgba(255, 107, 138, .28); color: #FFD2DC; }
.sn-chip.gold { background: rgba(244, 201, 93, .14); color: var(--gold); }
.sn-chip.mint { background: rgba(142, 227, 177, .14); color: var(--mint); }
.sn-chip.add { background: transparent; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .35); color: var(--lilac); }
.sn-chip.static { cursor: default; white-space: normal; overflow-wrap: anywhere; height: auto; padding-top: 7px; padding-bottom: 7px; text-align: left; }
.sn-chip.static:active { transform: none; }
.sn-chip svg { width: 14px; height: 14px; flex: none; }
a.sn-chip { text-decoration: none; }
.sn-seg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sn-seg4 .sn-chip { justify-content: center; padding: 0 6px; }
.sn-chip .x { opacity: .7; font-weight: 700; margin-left: 2px; }
.sn-tagin { display: flex; gap: 8px; }
.sn-tagin .sn-in { height: 44px; border-radius: 14px; font-size: 15px; }
.sn-tagin .sn-btn.sm { min-height: 44px; border-radius: 14px; }
.sn-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-meta span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 700; }
.sn-meta button.code { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .08); font: 700 13px 'Unbounded', sans-serif; letter-spacing: .06em; cursor: pointer; color: var(--ink); }

/* ---------- аватарка «висит отдельно» (§7 контракта) ----------
   Без подложки, низ скруглён в круг: маска — верхняя половина прямоугольником ∪ круг на всю
   ширину, голова может выходить за круг. Тень — на обёртке: маска срезала бы её у самой картинки */
.ava { position: relative; display: inline-block; flex: none; width: 56px; height: 56px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
.ava img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  /* верх целиком (волосы над кругом), низ — по кругу и мягко растворяется на последних 14 % радиуса,
     как ячейка выбора аватарки в приложении (AvatarPickerCell) */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 50% no-repeat, radial-gradient(closest-side circle, #000 86%, transparent 100%);
  mask: linear-gradient(#000 0 0) top / 100% 50% no-repeat, radial-gradient(closest-side circle, #000 86%, transparent 100%);
}
.ava.ring::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; box-shadow: 0 0 0 2px var(--mint); }
.ava.s24 { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.ava.s28 { width: 28px; height: 28px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
.ava.s32 { width: 32px; height: 32px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.ava.s40 { width: 40px; height: 40px; }
.ava.s44 { width: 44px; height: 44px; }
.ava.s64 { width: 64px; height: 64px; }
.ava.s70 { width: 70px; height: 70px; }
.ava.s84 { width: 84px; height: 84px; }
.avas { display: flex; align-items: center; }
.avas .ava { margin-left: -8px; }
.avas .ava:first-child { margin-left: 0; }
.avas .more { margin-left: 4px; height: 28px; min-width: 28px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- сцена: аватарки по кругу ---------- */
.sn-circle { --d: min(300px, calc(100vw - 40px)); position: relative; width: var(--d); height: var(--d); align-self: center; margin: 0 auto; }
.sn-circle::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed rgba(196, 181, 253, .28); }
.sn-circle .c { position: absolute; left: 33%; top: 29%; width: 34%; height: 34%; object-fit: contain; animation: sn-floaty 4s ease-in-out infinite; }
.sn-circle .cnt { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font: 600 14px 'Unbounded', sans-serif; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.sn-circle .i { position: absolute; width: 23%; height: 23%; margin: -11.5% 0 0 -11.5%; animation: sn-pop .6s var(--spring) both; }
.sn-circle .i .ava { width: 100%; height: 100%; }
/* своя аватарка: мягкое фиолетовое свечение за ней и плашка «Вы»; у организатора — золотая «Организатор» */
.sn-circle .i.me::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, .55), rgba(124, 58, 237, 0)); }
/* «Вы» и «Организатор» — на самой аватарке, у нижнего края (как в приложении: BottomCenter, 2 dp) */
.sn-circle .i .tags { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* у организатора-себя две плашки друг под другом: «Вы» на аватарке, «Организатор» ниже её края, не обрезаясь */
.sn-circle .i .tags.two { bottom: -20px; }
.sn-circle .i .tags { animation: sn-tagin .26s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--ad, 0s) + .36s); }
@keyframes sn-tagin { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.sn-circle .i .tag { padding: 2px 7px; border-radius: 999px; font: 700 9px/1.3 'Montserrat', sans-serif; white-space: nowrap; letter-spacing: .01em; }
.sn-circle .i .tag.me { background: var(--violet); color: #fff; }
.sn-circle .i .tag.host { background: #3D3016; color: var(--gold); }
/* «позвать»: сплошной primary с человечком и плюсом (ic_add_person приложения) */
.sn-circle .plus { position: absolute; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--violet); box-shadow: 0 8px 22px rgba(111, 0, 255, .5); cursor: pointer; padding: 0; transition: transform .25s var(--spring), box-shadow .25s ease; }
.sn-circle .plus svg { width: 36%; height: 36%; }
@media (hover: hover) { .sn-circle .plus:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(111, 0, 255, .65); } }
.sn-circle .plus:active { transform: scale(.94); }
/* плавно раскрывающийся блок (строка ссылки после «позвать») */
.sn-collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s cubic-bezier(.2, .9, .25, 1), opacity .25s ease, margin .32s ease; margin-top: -14px; }
.sn-collapse > div { overflow: hidden; min-height: 0; }
.sn-collapse.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .sn-collapse { transition: none; } }
.sn-circle.small { --d: min(240px, calc(100vw - 80px)); }
@keyframes sn-pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sn-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.sn-live { align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; background: rgba(142, 227, 177, .12); color: var(--mint); font-size: 13px; font-weight: 700; animation: sn-pop .5s var(--spring) both; max-width: 100%; }
.sn-live span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- обратный отсчёт ---------- */
.sn-cd { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 22px; background: var(--card); }
.sn-cd .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sn-cd b { font-size: 15px; line-height: 1.3; }
.sn-cd > small { font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.sn-cd .n { display: flex; gap: 6px; flex: none; }
.sn-cd .n span { min-width: 54px; height: 40px; padding: 0 8px; border-radius: 12px; background: var(--card-2); display: inline-flex; align-items: center; justify-content: center; font: 600 15px 'Unbounded', sans-serif; font-variant-numeric: tabular-nums; }
.sn-cd .n small { font: 600 11px 'Montserrat', sans-serif; color: var(--ink-3); margin-left: 3px; }

/* ---------- код и ключ, как на табло ---------- */
.sn-codebox { display: flex; flex-direction: column; gap: 14px; }
.sn-codebox .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sn-codebox .top b { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.sn-codebox .top b svg { width: 18px; height: 18px; color: var(--gold); }
.sn-flip { display: flex; align-items: center; justify-content: center; gap: 6px; perspective: 600px; }
.sn-flip i { position: relative; width: 40px; height: 54px; border-radius: 10px; background: #0D0B16; display: inline-flex; align-items: center; justify-content: center; font: 700 26px 'Unbounded', sans-serif; font-style: normal; color: #FFFFFF; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .04); }
.sn-flip i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.sn-flip i.tick { animation: sn-flipdown .09s ease-in both; }
.sn-flip i.land { animation: sn-flipland .35s var(--spring) both; }
.sn-flip .dash { width: 12px; height: 3px; border-radius: 2px; background: var(--ink-4); }
.sn-flip.key i { color: var(--gold); }
@keyframes sn-flipdown { from { transform: rotateX(70deg); opacity: .4; } to { transform: rotateX(0); opacity: 1; } }
@keyframes sn-flipland { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.sn-url { text-align: center; font-size: 13px; color: var(--ink-3); word-break: break-all; }
.sn-keycard { background: linear-gradient(180deg, #1C1730, #15111F); }

/* ---------- плашка с вырезом под бюст (§7 контракта, как PersonScreen) ---------- */
.sn-notch { position: relative; padding-top: var(--head, 64px); }
.sn-notch .bust { position: absolute; left: 50%; top: 0; z-index: 0; pointer-events: none; transform: translateX(-50%); }
.sn-notch .bust img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sn-notch .bust.spring { animation: sn-bust .62s cubic-bezier(.22, 1, .36, 1) .05s both; }
.sn-notch .plate { position: relative; z-index: 1; background: var(--card); border-radius: 24px; padding: 16px 18px 18px; }
@keyframes sn-bust { from { transform: translate(-50%, 46%); } to { transform: translate(-50%, 0); } }

/* ---------- конверт ---------- */
.sn-env { --w: min(280px, calc(100vw - 80px)); position: relative; width: var(--w); height: calc(var(--w) * .96); margin: 0 auto; }
.sn-env .glow { position: absolute; top: -18%; bottom: 0; left: 50%; width: min(148%, 100vw); transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 55%, rgba(111, 0, 255, .45), transparent 70%); pointer-events: none; }
.sn-env .back { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: 0 0 22px 22px; background: #4A12C4; }
.sn-env .flap { position: absolute; left: 0; right: 0; bottom: 62%; height: 38%; transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1) .25s; z-index: 1; }
.sn-env .flap::before { content: ''; position: absolute; inset: 0; background: #5B1FD6; clip-path: polygon(0 100%, 50% 0, 100% 100%); border-radius: 0; }
.sn-env.closed .flap { transform: rotateX(180deg); z-index: 4; filter: drop-shadow(0 -6px 8px rgba(20, 0, 60, .45)); }
.sn-env.closed .flap::before { background: linear-gradient(0deg, #5316C9, #6A2BEA); }
.sn-env .letter { position: absolute; left: 9%; right: 9%; bottom: 8%; height: 78%; border-radius: 18px; background: #FBF9FF; color: #14111F; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 14px; overflow: hidden; transition: transform .75s var(--spring) .7s; }
.sn-env.closed .letter { transform: translateY(32%); transition: none; }
.sn-env.open .letter { transform: translateY(-10%); }
.sn-env .letter .sn-kicker { color: var(--violet); font-size: 11px; }
/* угол кармана — 17,9 % высоты письма над его низом: срез аватарки на 10 px ниже, фото — кругом целиком выше */
.sn-env .letter .ava { position: absolute; left: 50%; bottom: calc(17.9% - 10px); width: 66%; height: auto; aspect-ratio: 1; margin: 0; transform: translateX(-50%); filter: none; }
.sn-env .letter .ava.photo { width: 50%; bottom: calc(17.9% + 8px); }
.sn-env .front { position: absolute; left: 0; right: 0; bottom: -1px; height: calc(62% + 1px); z-index: 3; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #7B2FF7, #5A16D8); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
.sn-env .seal { position: absolute; left: 50%; top: 38%; z-index: 5; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF9DB2, var(--coral) 55%, #D94A6B); box-shadow: 0 0 0 3px var(--gold), 0 6px 14px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; transition: transform .3s ease, opacity .3s ease; }
.sn-env .seal svg { width: 22px; height: 22px; color: #7A1631; }
.sn-env.open .seal { transform: scale(1.35) rotate(18deg); opacity: 0; }
.sn-env .bits { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.sn-env .bits i { position: absolute; width: 10px; height: 5px; border-radius: 2px; background: var(--gold); opacity: .9; }
/* закрытый конверт покачивается, пока его не откроют (14.10.2026); тряска при открытии — правилом ниже */
.sn-env.closed { animation: sn-floaty 2.6s ease-in-out infinite; }
.sn-env.shake { animation: sn-shake .5s ease 2; }
@keyframes sn-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .sn-env.closed { animation: none; } }

.sn-who { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.sn-who .sn-h1 { font-size: 40px; }
.sn-who p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* ---------- пожелания получателя ---------- */
.sn-wishes { display: flex; flex-direction: column; gap: 12px; }
.sn-wishes q { display: block; quotes: '«' '»' '“' '”'; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.sn-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-3); }
.sn-facts b { color: var(--ink); font-weight: 700; }
.sn-empty { padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .04); color: var(--ink-3); font-size: 14px; text-align: center; line-height: 1.5; }

/* ---------- идеи и вишлист ---------- */
.sn-ideas { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; }
.sn-ideas::-webkit-scrollbar { display: none; }
.sn-ideas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }

/* ---------- плашка «10 идей бесплатно» ---------- */
.sn-promo { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 24px; background: linear-gradient(135deg, #3B0FA8 0%, #6F00FF 55%, #8B5CF6 100%); }
.sn-promo .hd { display: flex; gap: 14px; align-items: center; }
.sn-promo .hd img { width: 58px; height: 58px; object-fit: contain; flex: none; }
.sn-promo .hd b { font: 600 16px/1.3 'Unbounded', sans-serif; }
.sn-promo p { margin: 0; font-size: 14px; line-height: 1.5; color: #EDE7FF; }
.sn-promo p b { color: #FFFFFF; }

/* ---------- участники в комнате ---------- */
.sn-ex { display: flex; align-items: center; gap: 12px; }
.sn-ex .ic { width: 22px; height: 22px; color: var(--lilac); flex: none; }
.sn-ex .tx { flex: 1; min-width: 0; }
.sn-ex .tx b { display: block; font-size: 15px; }
.sn-ex .tx small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.sn-pairs { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.sn-pair { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.sn-pair .x { margin-left: auto; background: none; border: 0; color: var(--ink-4); cursor: pointer; padding: 4px 6px; font-size: 13px; }

/* ---------- анонимные вопросы ---------- */
.sn-chat { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 190px); }
.sn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); }
.sn-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0 10px; min-width: 0; transition: background-color .2s ease, color .2s ease; }
.sn-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-tabs button.on { background: var(--violet); color: #FFFFFF; }
.sn-tabs .bdg { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #14111F; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sn-lock { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--ink-3); font-size: 12px; font-weight: 600; text-align: center; }
.sn-lock svg { width: 12px; height: 12px; flex: none; }
.sn-msgs { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sn-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.sn-msg p { margin: 0; padding: 12px 14px; border-radius: 20px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sn-msg.me { align-self: flex-end; }
.sn-msg.me p { background: var(--violet); color: #FFFFFF; border-bottom-right-radius: 6px; }
.sn-msg.them { align-self: flex-start; }
.sn-msg.them p { background: var(--card-2); border-bottom-left-radius: 6px; }
.sn-msg.thanks p { background: linear-gradient(135deg, rgba(244, 201, 93, .22), rgba(244, 201, 93, .08)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(244, 201, 93, .25); }
.sn-msg.pending p { opacity: .6; }
.sn-msg time { display: block; font-size: 11px; color: var(--ink-4); margin: 0 6px 2px; white-space: nowrap; }
.sn-msg.me time { text-align: right; }
.sn-day { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 2px; }
.sn-suggest { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.sn-suggest::-webkit-scrollbar { display: none; }
.sn-suggest .sn-chip { flex: none; max-width: none; white-space: nowrap; background: var(--card-2); color: var(--ink-2); }
.sn-compose { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(8, 7, 15, 0), var(--bg) 24%); }
.sn-compose textarea { flex: 1; min-height: 52px; max-height: 140px; padding: 14px 18px; border-radius: 26px; resize: none; }
.sn-compose .send { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--violet); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: transform .12s ease, opacity .2s ease; }
.sn-compose .send:active { transform: scale(.94); }
.sn-compose .send[disabled] { opacity: .4; }
.sn-compose .send svg { width: 20px; height: 20px; }

/* ---------- выбор аватарки ---------- */

/* ---------- шторка и окно ---------- */
/* Шторка: шапка (заголовок и ✕) закреплена, листается только содержимое; под шапкой и над кнопками
   содержимое растворяется, когда есть куда листать. Высота — до 90 % свободной. Все правила привязаны
   к структуре шторки (> .bg, .panel > .hd …): общие классы внутри содержимого (svg .bg у плашки имени,
   ✕ у своих чипов, .hd у календаря) их не подхватывают (08.10.2026) */
.sn-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sn-sheet > .bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); opacity: 0; transition: opacity .25s ease; }
.sn-sheet { bottom: var(--kb, 0px); }
.sn-sheet > .panel { position: relative; width: 100%; max-width: 520px; max-height: calc(var(--vvh, 100dvh) * .9); margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(to bottom left, rgba(32, 36, 51, .97), rgba(40, 20, 97, .985)); border-radius: 32px 32px 0 0; padding: 10px 0 0; transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .25, 1); }
.sn-sheet > .panel::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .03));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sn-sheet.on > .bg { opacity: 1; }
.sn-sheet.cont:not(.closing) > .bg { transition: none; opacity: 1; }
.sn-sheet.on > .panel { transform: translateY(0); }
.sn-sheet > .panel > .grab { flex: none; width: 40px; height: 4px; border-radius: 2px; background: #2E2845; margin: 0 auto 14px; }
.sn-sheet > .panel > .hd { flex: none; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 12px; }
.sn-sheet > .panel > .hd b { font: 600 18px/1.3 'Unbounded', sans-serif; }

.sn-sheet > .panel > .hd > .x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--card-2); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sn-sheet > .panel > .hd > .x svg { width: 14px; height: 14px; }
.sn-sheet > .panel > .bd { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px 20px 22px;
  --sn-ft: 0px; --sn-fb: 0px; transition: --sn-ft .2s ease, --sn-fb .2s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sn-ft), #000 calc(100% - var(--sn-fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sn-ft), #000 calc(100% - var(--sn-fb)), transparent 100%); }
.sn-sheet > .panel.scrolled > .bd { --sn-ft: 24px; }
.sn-sheet > .panel.more > .bd { --sn-fb: 24px; }
.sn-sheet > .panel > .bd::-webkit-scrollbar { display: none; }
.sn-sheet > .panel > .bd:not(:last-child) { padding-bottom: 10px; }
.sn-sheet > .panel > .ft { flex: none; position: relative; z-index: 2; padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); }
.sn-sheet > .panel > .bd:last-child { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .sn-sheet { align-items: center; } .sn-sheet > .panel { margin: 0 auto; border-radius: 32px; max-height: calc(var(--vvh, 100dvh) * .9); transform: translateY(24px); opacity: 0; transition: transform .28s ease, opacity .2s ease; } .sn-sheet.on > .panel { transform: none; opacity: 1; } .sn-sheet > .panel > .bd:not(:last-child) { padding-bottom: 10px; } .sn-sheet > .panel > .bd:last-child { padding-bottom: 22px; } .sn-sheet > .panel > .ft { padding-bottom: 18px; } }
.sn-modal > .panel { padding-top: 22px; }
.sn-modal p { margin: 0 0 18px; color: var(--ink-2); }
.sn-opts { display: flex; flex-direction: column; gap: 8px; }
.sn-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--card); color: var(--ink); cursor: pointer; text-align: left; font-size: 15px; font-weight: 600; }
.sn-opt.on { box-shadow: inset 0 0 0 2px var(--violet-2); }
.sn-opt small { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.sn-opt .tx { flex: 1; min-width: 0; }
.sn-opt.red { color: #FF9DB2; }

/* ---------- игры на лендинге ---------- */
.sn-games { display: flex; flex-direction: column; gap: 8px; }
.sn-game { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--card); color: var(--ink) !important; text-decoration: none !important; }
.sn-game .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-game .tx b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-game .tx small { font-size: 12.5px; color: var(--ink-3); }
.sn-game .st { flex: none; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--ink-2); }
.sn-game .st.drawn { background: rgba(111, 0, 255, .22); color: #E9E1FF; }
.sn-game .st.revealed { background: rgba(244, 201, 93, .14); color: var(--gold); }

/* ---------- пароль, ошибки, загрузка ---------- */
.sn-gate { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 40px 0 20px; }
.sn-gate img { width: 84px; height: 84px; border-radius: 22px; }
.sn-gate form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; margin-top: 6px; }
.sn-state { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 30px 0; }
.sn-state img { width: 96px; height: 96px; object-fit: contain; }
.sk { display: block; border-radius: 14px; background: linear-gradient(90deg, #15121F 0%, #1E1A2E 40%, #15121F 80%); background-size: 200% 100%; animation: sn-sk 1.3s linear infinite; }
@keyframes sn-sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sn-boot { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
/* Лендинг приходит в HTML (его читают поисковики). На адресе игры, внутреннем экране и за паролем
   ранний скрипт ставит html.sn-app: лендинг скрыт, вместо него скелет, пока santa.js рисует экран */
.sn-boot.sn-first { display: none; }
html.sn-app .sn-static { display: none; }
html.sn-app .sn-boot.sn-first { display: flex; }
.sn-faq { display: flex; flex-direction: column; gap: 8px; }
.sn-faq details { background: var(--card); border-radius: 18px; padding: 0 16px; }
.sn-faq summary { position: relative; cursor: pointer; list-style: none; padding: 14px 30px 14px 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.sn-faq summary::-webkit-details-marker { display: none; }
.sn-faq summary::after { content: '+'; position: absolute; right: 0; top: 11px; font-size: 22px; font-weight: 500; color: var(--lilac); transition: transform .2s ease; }
.sn-faq details[open] summary::after { transform: rotate(45deg); }
.sn-faq details p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sk-h1 { height: 76px; width: 82%; }
.sk-p { height: 18px; width: 100%; }
.sk-p.short { width: 64%; }
.sk-scene { height: 300px; width: 300px; max-width: 100%; border-radius: 50%; align-self: center; margin-top: 16px; }
.sk-card { height: 120px; width: 100%; border-radius: 22px; }
.sk-row { height: 64px; width: 100%; border-radius: 18px; }

.sn-sep { height: 1px; background: var(--line); margin: 4px 0; }
.sn-inline { display: inline-flex; align-items: center; gap: 6px; }
.sn-hidden { display: none !important; }
.sn-fade { animation: sn-fadein .35s ease both; }
@keyframes sn-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* узкие телефоны: 360 px */
@media (max-width: 380px) {
  .sn-head { padding: 0 16px; }
  .sn-main { padding-left: 16px; padding-right: 16px; }
  .sn-h1 { font-size: 30px; }
  .sn-h1.long { font-size: 23px; }
  .sn-who .sn-h1 { font-size: 34px; }
  .sn-ideas, .sn-suggest { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
  .sn-flip i { width: 34px; height: 48px; font-size: 22px; }
  .sn-flip { gap: 4px; }
  .sn-cd .n span { min-width: 46px; font-size: 14px; }
  .sn-btns { gap: 8px; }
}

/* всё движение — только если человек не просил его убрать */
@media (prefers-reduced-motion: reduce) {
  .sn-snow { display: none; }
  body.santa *, body.santa *::before, body.santa *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- ошибки полей, лимиты, согласие (08.10.2026) ---------- */
.sn-field > .sn-err-t[data-ferr], .sn-err-t[data-ferr] { margin: 2px 2px 0; }
.sn-row.err { box-shadow: inset 0 0 0 1.5px var(--coral); }
.sn-limit { margin: 4px 2px 0; font-size: 12.5px; font-weight: 600; color: var(--coral); transition: opacity .25s ease; }
.sn-limit.off { opacity: 0; }
.sn-legal { margin: -2px 8px 0; text-align: center; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.sn-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
/* заметный заголовок пожеланий при вступлении */
.sn-wh { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.sn-wh img { width: 44px; height: 44px; flex: none; }
.sn-wh .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sn-wh b { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.25; color: #fff; }
.sn-wh small { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
/* правило круга — сверху окна настроек */
.sn-rule { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(124, 58, 237, .14); }
.sn-rule img { width: 40px; height: 40px; flex: none; }
.sn-rule .tx { display: flex; flex-direction: column; gap: 2px; }
.sn-rule b { font-size: 14.5px; line-height: 1.35; }
.sn-rule small { font-size: 12.5px; color: var(--ink-2); }
/* экран ожидания создания и вступления */
.sn-busy { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(8, 7, 15, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .22s ease; }
.sn-busy.on { opacity: 1; }
.sn-busy .box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; transform: translateY(8px) scale(.97); transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
.sn-busy.on .box { transform: none; }
.sn-busy .hop { width: 132px; height: 132px; animation: sn-busy-hop 1.2s ease-in-out infinite; filter: drop-shadow(0 16px 28px rgba(111, 0, 255, .5)); }
.sn-busy .hop img { width: 100%; height: 100%; object-fit: contain; }
.sn-busy b { margin-top: 8px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 19px; }
.sn-busy small { font-size: 14px; color: var(--ink-2); }
.sn-busy .dots { display: inline-flex; gap: 6px; margin-top: 8px; }
.sn-busy .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--lilac); animation: sn-busy-dot 1s ease-in-out infinite; }
.sn-busy .dots i:nth-child(2) { animation-delay: .15s; }
.sn-busy .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sn-busy-hop { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes sn-busy-dot { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sn-busy .hop, .sn-busy .dots i { animation: none; } .sn-busy .box { transition: none; } }

/* ---------- аватарка и имя: карточка с вырезом (ProfileNameCard приложения) ---------- */
.sn-pcard { position: relative; width: 100%; }
.sn-pcard { margin-top: 14px; }
.sn-pcard .av { position: absolute; left: 0; right: 0; top: 0; bottom: 0; clip-path: inset(-60px 0 0 0); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.sn-pcard .av .bust { position: absolute; left: 50%; display: block; object-fit: contain; will-change: transform; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); transition: scale .25s var(--spring); }
@media (hover: hover) { .sn-pcard .av:hover .bust { scale: 1.04; } }
.sn-pcard .av:focus-visible .bust { scale: 1.04; }
.sn-pcard .edit { position: absolute; top: 58px; left: calc(50% + 34px); z-index: 3; width: 30px; height: 30px; margin-top: -30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card-3); color: var(--lilac); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); cursor: pointer; }
.sn-pcard .edit svg { width: 15px; height: 15px; }
.sn-pcard .plate { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.sn-pcard .plate .bg { position: absolute; left: 0; top: 0; overflow: visible; }
.sn-pcard .plate .bg path { fill: var(--violet); pointer-events: visiblePainted; cursor: text; transition: fill .22s ease; }
.sn-pcard .plate:not(.empty) .bg path { fill: var(--card-2); }
.sn-pcard .plate.err .bg path { fill: #4A1628; }
.sn-pcard .plate.err { animation: sn-errshake .36s ease; }
.sn-pcard .plate .in { position: absolute; left: 20px; right: 20px; bottom: 0; height: 56px; padding: 0; border: 0; background: transparent; outline: none; pointer-events: auto;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; text-align: center; color: #fff; caret-color: #fff; }
.sn-pcard .plate .in::placeholder { color: #fff; opacity: 1; transition: opacity .15s ease; }
.sn-pcard .plate .in:focus::placeholder { opacity: .55; }
.sn-pcard .plate .cnt { position: absolute; right: 16px; bottom: 6px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .5); }
@keyframes sn-errshake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .sn-pcard .plate.err { animation: none; } .sn-pcard .av .bust { transition: none; } }

/* ---------- выбор аватарки (AvatarPickerDialog приложения) ---------- */
@property --sn-ft { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sn-fb { syntax: '<length>'; inherits: false; initial-value: 0px; }
.sn-avpick { max-height: min(64dvh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -20px; padding: 4px 20px 24px;
  --sn-ft: 0px; --sn-fb: 0px; transition: --sn-ft .2s ease, --sn-fb .2s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sn-ft), #000 calc(100% - var(--sn-fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sn-ft), #000 calc(100% - var(--sn-fb)), transparent 100%); }
.sn-avpick::-webkit-scrollbar { display: none; }
.sn-avpick.ft { --sn-ft: 40px; }
.sn-avpick.fb { --sn-fb: 40px; }
.sn-avpick .h { margin: 14px 4px 10px; font-size: 13px; font-weight: 600; color: rgba(244, 242, 250, .6); }
.sn-avpick .h:first-child { margin-top: 0; }
.sn-avpick .g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 560px) { .sn-avpick .g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sn-avpick .cell { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 50%; transition: transform .2s var(--spring); }
.sn-avpick .cell:active { transform: scale(.9); }
.sn-avpick .cell .ava { width: 100%; height: 100%; filter: none; }
.sn-avpick .cell.on::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, .55), rgba(124, 58, 237, 0)); }
.sn-avpick .cell .chk { position: absolute; top: 0; right: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; display: flex; align-items: center; justify-content: center; }
.sn-avpick .cell .chk svg { width: 12px; height: 12px; }

/* ---------- календарь (вместо системного выбора даты) ---------- */
.sn-cal { display: flex; flex-direction: column; gap: 10px; user-select: none; -webkit-user-select: none; }
.sn-cal .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sn-cal .hd b { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 17px; }
.sn-cal .cnav { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--ink); cursor: pointer; transition: background .2s ease, opacity .2s ease, transform .2s var(--spring); }
.sn-cal .cnav svg { width: 18px; height: 18px; }
.sn-cal .cnav:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .sn-cal .cnav:not(:disabled):hover { background: var(--card-3); } }
.sn-cal .cnav:not(:disabled):active { transform: scale(.92); }
.sn-cal .wd, .sn-cal .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sn-cal .wd span { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: capitalize; padding: 2px 0 4px; }
.sn-cal .wd span.we { color: var(--coral); opacity: .85; }
.sn-cal .vp { position: relative; overflow: hidden; touch-action: pan-y; }
.sn-cal .days.ghost { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.sn-cal .days { row-gap: 4px; }
.sn-cal .d { position: relative; height: 44px; margin: 0 auto; width: 44px; max-width: 100%; border: 0; padding: 0; border-radius: 14px; background: transparent; color: var(--ink); font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease, transform .2s var(--spring); }
.sn-cal .d.out { cursor: default; }
.sn-cal .d.we { color: #FFB3C3; }
.sn-cal .d.today { box-shadow: inset 0 0 0 1.5px var(--lilac); }
@media (hover: hover) { .sn-cal .d:not(.out):not(:disabled):not(.on):hover { background: var(--card-2); } }
.sn-cal .d:focus-visible { outline: 2px solid var(--lilac); outline-offset: 1px; }
.sn-cal .d:disabled { color: var(--ink-4); opacity: .45; cursor: default; }
.sn-cal .d.on { background: var(--violet); color: #fff; box-shadow: 0 6px 16px rgba(111, 0, 255, .45); }
.sn-cal .d.pop { animation: sn-daypop .32s var(--spring); }
@keyframes sn-daypop { 0% { transform: scale(.78); } 100% { transform: none; } }
.sn-datef { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; color: var(--ink); font: inherit; font-weight: 600; }
.sn-datef svg { width: 18px; height: 18px; color: var(--lilac); flex: none; }
@media (prefers-reduced-motion: reduce) { .sn-cal .d.pop { animation: none; } }

/* ---------- широкий экран (08.10.2026): полноценная вёрстка для ПК ---------- */
@media (min-width: 960px) {
  .sn-head, .sn-main, .sn-foot { max-width: 1180px; }
  .sn-head { height: 76px; padding: 0 40px; }
  .sn-main { padding: 16px 40px 72px; }
  .sn-main > .sn-stack, .sn-main > .sn-boot, .sn-main > .sn-gate { width: 100%; max-width: 560px; margin: 0 auto; }
  .sn-main > .sn-stack.wide { max-width: none; }
  .sn-main > .sn-stack.chatw { max-width: 760px; }
  .sn-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .sn-cols.a-narrow { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; }
  .sn-col { display: flex; flex-direction: column; gap: var(--g); min-width: 0; }
  .sn-col.sticky { position: sticky; top: 20px; }
  .sn-tail { display: flex; flex-direction: column; gap: var(--g); width: 100%; max-width: 560px; margin: 0 auto; }
  .sn-desk { display: block; margin-top: 8px; }
  .sn-desk .sn-circle { --d: min(380px, 30vw); }
  .sn-topbar { max-width: none; }
  /* экран Санты: пока конверт закрыт — одна колонка по центру */
  .sn-cols.sv { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; }
  .sn-cols.sv.solo { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .sn-env { --w: 420px; }
  .sn-env .seal { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .sn-env .seal svg { width: 26px; height: 26px; }
  .sn-env .letter { padding-top: 18px; }
  .sn-env .letter .sn-kicker { font-size: 13px; }
  .sn-revealv { min-height: calc(100svh - 100px); }
  .sn-who .sn-h1 { font-size: 44px; }
  .sn-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 16px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  /* комната: крупный круг слева */
  #rm-circle .sn-circle { --d: min(440px, 34vw); }
  .sn-codebox { height: 100%; }
  .sn-cols > .sn-col > .sn-codebox { flex: 1; }
  /* лендинг: главный экран в две колонки, шаги в ряд, вопросы в две колонки */
  .sn-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text art" "cta art"; column-gap: 64px; row-gap: 28px; align-items: center; padding: 24px 0 8px; }
  .sn-hero .sn-hero-text { grid-area: text; align-self: end; }
  .sn-hero .sn-hero-cta { grid-area: cta; align-self: start; max-width: 460px; }
  .sn-hero .sn-circle { grid-area: art; --d: min(500px, 40vw); }
  .sn-static .sn-h1 { font-size: 60px; }
  .sn-static .sn-lede { font-size: 18px; max-width: 520px; }
  .sn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .sn-step { flex-direction: column; align-items: flex-start; padding: 22px; gap: 16px; }
  .sn-step img { width: 72px; height: 72px; }
  .sn-step b { font-size: 17px; }
  .sn-step span { font-size: 14px; }
  .sn-grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .sn-grid2 > div { padding: 18px; font-size: 15px; }
  .sn-promo { padding: 28px; }
  .sn-faq { display: block; columns: 2; column-gap: 16px; }
  .sn-faq details { break-inside: avoid; margin-bottom: 10px; }
  .sn-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #sn-my:empty { display: none; }
}
@media (min-width: 1240px) {
  .sn-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- шапка, недоступная жеребьёвка, шестерёнка (08.10.2026) ---------- */
.sn-head { position: sticky; top: 0; z-index: 30; }
.sn-head::before { content: ''; position: absolute; top: 0; bottom: -18px; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: linear-gradient(to bottom, rgba(8, 7, 15, .92) 0, rgba(8, 7, 15, .78) 60%, rgba(8, 7, 15, 0) 100%); }
.sn-head.scrolled::before { opacity: 1; }
.sn-btn.is-off { opacity: .5; }
.sn-note.warn { color: var(--gold); }
/* шапка комнаты закреплена (215bf3d, SantaPinnedHeader): в комнате верхняя полоса сайта уезжает, а «Комната
   игры», название, строка про бюджет и дату и шестерёнка остаются. Затемнение (18.10.2026) проявляется, только
   когда шапка упёрлась в верх экрана, за ~2 см прокрутки (--scrim из roomScrim() в santa.js): почти непрозрачный
   фон на всю шапку и мягкое растворение на 56 px ниже её края */
html.sn-roomv .sn-head { position: relative; }
html.sn-roomv .sn-head::before { display: none; }
.sn-roomhead { position: sticky; top: 0; z-index: 20; padding: 10px 0 6px; }
.sn-roomhead::before { content: ''; position: absolute; top: 0; bottom: -56px; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; opacity: var(--scrim, 0);
  background: linear-gradient(to bottom, rgba(8, 7, 15, .97) 0, rgba(8, 7, 15, .95) calc(100% - 60px), rgba(8, 7, 15, .9) calc(100% - 52px), rgba(8, 7, 15, .78) calc(100% - 44px), rgba(8, 7, 15, .6) calc(100% - 35px), rgba(8, 7, 15, .4) calc(100% - 26px), rgba(8, 7, 15, .22) calc(100% - 17px), rgba(8, 7, 15, .09) calc(100% - 9px), rgba(8, 7, 15, .02) calc(100% - 3px), rgba(8, 7, 15, 0) 100%); }
.sn-roomhead .sn-gear { top: 12px; }
.sn-gear { position: absolute; top: 2px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--ink); cursor: pointer; transition: transform .25s var(--spring), background .2s ease; }
.sn-gear svg { width: 21px; height: 21px; }
@media (hover: hover) { .sn-gear:hover { background: var(--card-3); transform: rotate(30deg); } }
.sn-roomhead .sn-h1 { padding-right: 52px; }

/* ---------- автозаполнение браузера без серого прямоугольника (08.10.2026) ---------- */
.sn-in:-webkit-autofill, .sn-in:-webkit-autofill:hover, .sn-in:-webkit-autofill:focus, .sn-ta:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--card) inset; transition: background-color 600000s 0s, color 600000s 0s; }
.sn-pcard .plate .in:-webkit-autofill, .sn-pcard .plate .in:-webkit-autofill:hover, .sn-pcard .plate .in:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px transparent inset; transition: background-color 600000s 0s, color 600000s 0s; }
.sn-pcard .plate .in:autofill { background: transparent; }
/* «позвать» — объёмная иконка на primary-кружке */
.sn-circle .plus img { width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
/* анонимные вопросы в настройках — выделены как фишка */
.sn-toggle.featured { padding: 14px; border-radius: 18px; background: rgba(111, 0, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(139, 92, 246, .75), 0 8px 24px rgba(111, 0, 255, .18); gap: 12px; }
.sn-toggle.featured .ic { width: 44px; height: 44px; flex: none; object-fit: contain; }
/* «Добавить свой вишлист» — путь в приложение из комнаты */
.sn-row.app { background: linear-gradient(135deg, rgba(111, 0, 255, .3), rgba(59, 15, 168, .22)); box-shadow: inset 0 0 0 1.5px rgba(139, 92, 246, .6); }
.sn-row.app .chev { color: var(--lilac); }
.sn-keypair { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sn-keypair > span, .sn-keypair > button { padding: 12px 14px; border: 0; border-radius: 16px; background: var(--card-2); display: flex; flex-direction: column; gap: 4px; text-align: left; color: inherit; font: inherit; }
.sn-keypair > button { cursor: pointer; transition: transform .12s ease, background-color .15s ease; }
.sn-keypair > button:active { transform: scale(.97); }
.sn-keypair small { font-size: 12px; color: var(--ink-3); }
.sn-keypair b { font: 600 19px/1.2 'Unbounded', sans-serif; letter-spacing: .04em; color: #fff; }

/* поделиться: Telegram и WhatsApp круглыми знаками 48 px и широкая «Поделиться ссылкой» (как в приложении) */
.sn-share { display: flex; gap: 10px; align-items: center; container-type: inline-size; }
.sn-share > a { width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, filter .15s ease; }
.sn-share > a:hover { filter: brightness(1.08); }
.sn-share > a:active { transform: scale(.92); }
.sn-share .tg { background: linear-gradient(180deg, #2AABEE, #229ED9); }
.sn-share .wa { background: #25D366; }
.sn-share > a svg { width: 26px; height: 26px; }
.sn-share .tg svg { margin-left: -2px; }
.sn-share .sh { flex: 1; min-width: 0; min-height: 48px; background: var(--card-3); color: var(--ink) !important; gap: 8px; padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
.sn-share .sh .short { display: none; }
@container (max-width: 325px) { .sn-share .sh .full { display: none; } .sn-share .sh .short { display: inline; } }
.sn-share .sh svg { width: 18px; height: 18px; flex: none; }
.sn-share .sh span { overflow: hidden; text-overflow: ellipsis; }
#rm-invite .sn-share { padding-top: 2px; }
/* копирование кода и ключа: ответ на самой кнопке мятным */
.sn-copy { align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--card-3); color: var(--ink); font: 700 13.5px/1 'Montserrat', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease, background-color .2s ease, transform .15s ease; }
.sn-copy svg { width: 16px; height: 16px; flex: none; }
.sn-copy:active { transform: scale(.96); }
.sn-copy.done { color: var(--mint); background: rgba(142, 227, 177, .12); }

/* своё фото: строка в выборе аватарки, кадрирование кругом, фото в карточке имени */
.sn-avphoto { width: 100%; margin-bottom: 14px; text-align: left; }
.sn-avphoto .cam { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sn-avphoto .cam svg { width: 22px; height: 22px; }
.sn-crop { display: flex; flex-direction: column; gap: 14px; }
.sn-crop .stage { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #0B0914; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.sn-crop .stage:active { cursor: grabbing; }
.sn-crop .stage img { position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.sn-crop .mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, transparent calc(100% - 1px), rgba(8, 7, 15, .66) 100%); }
.sn-crop .mask::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.sn-crop .zoom { width: min(100%, 320px); height: 28px; margin: 0 auto; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sn-crop .zoom::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--card-3); }
.sn-crop .zoom::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.sn-crop .zoom::-moz-range-track { height: 6px; border-radius: 3px; background: var(--card-3); }
.sn-crop .zoom::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; }
.sn-crop .zoom:focus { outline: none; }
.sn-crop .zoom:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; border-radius: 6px; }
.ava.photo img { -webkit-mask: none; mask: none; border-radius: 50%; object-fit: cover; }
.sn-crop .sn-note { margin: 0; }
.sn-pcard .bust.photo { border-radius: 50%; object-fit: cover; background: var(--card-2); }
.sn-pcard.busy .av::after { content: ''; position: absolute; left: 50%; top: -4px; width: 104px; height: 104px; margin-left: -52px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: #fff; animation: sn-pcspin .8s linear infinite; pointer-events: none; }
@keyframes sn-pcspin { to { transform: rotate(360deg); } }

/* экран кода: зачем этот код — первой строкой карточки */
.sn-codebox .sn-why { margin: -4px 0 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

/* статус игры в комнате («Жеребьёвка прошла», «Санты раскрыты»): когда строке тесно, кнопка уходит
   под текст на всю ширину, иначе длинная «Мой получатель» сжимает текст в три строки (08.10.2026) */

/* страница не сдвигается вбок, даже если что-то вылезло за край (свечение конверта, конфетти) */
html.santa-html { overflow-x: clip; }
/* «В комнату» справа в шапке экранов получателя и раскрытия */
.sn-hback, .sn-head-r .sn-hback { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 13px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--ink) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.sn-hback svg { width: 16px; height: 16px; flex: none; }
.sn-hback:active { transform: scale(.96); }
/* пустые пожелания: белая «Добавить» вместо «Изменить» */
.sn-row .sn-addbtn { flex: none; min-height: 40px; padding: 0 18px; pointer-events: none; box-shadow: none; }
/* на узкой строке белая «Добавить» уходит под текст на всю ширину — большая кнопка, как в приложении */
.sn-row.has-add { flex-wrap: wrap; container-type: inline-size; }
.sn-row.has-add > .tx { flex: 1 1 0; min-width: 0; }
@container (max-width: 480px) { .sn-row.has-add > .sn-addbtn { flex: 1 1 100%; min-height: 46px; } }
/* снекбар как в приложении: внизу, фиолетовая заливка, белый текст по центру, скругление 24 */
body.santa .gb-snack { background: var(--violet); color: #fff; border-radius: 24px; justify-content: center; text-align: center; padding: 12px 18px; box-shadow: 0 14px 36px rgba(111, 0, 255, .45); }
body.santa .gb-snack-ico { display: none; }
body.santa .gb-snack-tx { align-items: center; padding-right: 0; }
body.santa .gb-snack-tx small { color: rgba(255, 255, 255, .82); }
body.santa .gb-snack-act { background: rgba(255, 255, 255, .18); }

/* ---------- экран получателя (08.10.2026, порядок и вид как в приложении 592e767) ---------- */
.sn-who p { font-size: 15px; }
.sn-glass { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.sn-glass span { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.sn-ask { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 18px; border-radius: 27px; background: var(--violet); color: #fff !important; font: 600 15px/1.2 'Unbounded', sans-serif; text-decoration: none !important; }
.sn-ask img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.sn-ask:active { transform: scale(.98); }
.sn-wplate { padding: 0; overflow: hidden; }
.sn-wplate .hd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.sn-wplate .hd .ic { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sn-wplate .hd span { flex: 1; }
.sn-wplate .hd .chev { width: 18px; height: 18px; color: var(--ink-4); transition: transform .3s var(--spring); }
.sn-wplate.open .hd .chev { transform: rotate(90deg); }
.sn-wplate .sn-collapse { margin-top: 0; }
.sn-wplate .bd { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.sn-wplate q { display: block; quotes: '«' '»' '“' '”'; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
/* «Мой подарок» */
.sn-plan-empty { margin: 0; font-size: 14px; color: var(--ink-3); }
.sn-crop .mask.sq { background: none; }
.sn-crop .mask.sq::after { border-radius: 22px; }
.sn-sheet-full > .panel { height: calc(var(--vvh, 100dvh) * .9); }
/* рельс подборок: плитки с затемнением книзу и названием внутри, у бюджетных — плашка «Идеи до N ₽» */
.sn-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; }
.sn-rail::-webkit-scrollbar { display: none; }
.sn-tile { position: relative; flex: none; width: 148px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--card-2); scroll-snap-align: start; color: #fff !important; text-decoration: none !important; }
.sn-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-tile .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 15, 0) 22%, rgba(8, 7, 15, .45) 52%, rgba(8, 7, 15, .9) 100%); }
.sn-tile .t { position: absolute; left: 10px; right: 10px; bottom: 10px; font: 500 12px/1.3 'Montserrat', sans-serif; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.sn-tile .pill { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 999px; background: rgba(20, 17, 31, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 12px/1.25 'Montserrat', sans-serif; text-align: center; color: #fff; }
@media (min-width: 960px) { .sn-rail, .sn-ideas { margin: 0; padding-left: 0; padding-right: 0; } }

/* бюсты Санты: «Мои игры» и «Игры здесь больше нет» */
.sn-game > .ava { flex: none; }
.ava.s110 { width: 110px; height: 110px; }
.sn-gone-ava { display: flex; justify-content: center; margin-bottom: -4px; }

/* ================= 09.10.2026: комната и экран получателя как в приложении (527c372) ================= */
.sn-stack > :empty, .sn-col > :empty { display: none; }
.spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sn-pcspin .8s linear infinite; flex: none; vertical-align: -3px; }
/* занятая кнопка — со спиннером перед подписью («Сохраняем…»), не бледнеет до нечитаемого */
.sn-btn.busy { opacity: .78; }
.sn-btn.busy::before, .sn-btn.wait::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sn-pcspin .8s linear infinite; flex: none; }
.sn-btn.quiet { background: var(--card); color: var(--ink) !important; }
.sn-btn.red { color: var(--coral) !important; }
.sn-btn.glass { background: rgba(255, 255, 255, .14); color: #fff !important; position: relative; }
.sn-btn .dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
/* плашки статуса, как SantaStatusPill: мята, золото, приглушённая, фиолетовая, коралл */
.sn-pill { display: inline-flex; align-items: center; flex: none; max-width: 100%; padding: 5px 10px; border-radius: 12px; font: 700 11px/1.25 'Montserrat', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-pill.mint { background: #173A2B; color: var(--mint); }
.sn-pill.gold { background: #3D3016; color: var(--gold); }
.sn-pill.muted { background: var(--card-3); color: var(--ink-2); }   /* на --card-3 мелкий текст — Ink2 (~6:1), как в приложении */
.sn-pill.violet { background: #3B1C80; color: var(--lilac); }
.sn-pill.coral { background: #4A1C2A; color: var(--coral); }
/* заголовок раздела, как SantaSectionHeader: Montserrat 18, справа действие, ниже подпись */
.sn-sec .t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sn-sec .sn-h2 { font: 700 18px/1.3 'Montserrat', sans-serif; letter-spacing: 0; }
.sn-sec .t button { flex: none; padding: 2px 4px; border: 0; border-radius: 8px; background: none; color: var(--lilac); font: 700 14px 'Montserrat', sans-serif; cursor: pointer; }
/* подписи разделов — полностью белые, как в приложении (53d9326) */
.sn-sec p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: #fff; }
.sn-note.l { text-align: left; }
.sn-eyebrow2 { display: block; margin-bottom: 4px; font: 700 11px/1.3 'Montserrat', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lilac); }
.sn-eyebrow2.c { text-align: center; }
.sn-sub { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.sn-livebox { display: flex; justify-content: center; }

/* плашка с вырезом: «Вы Тайный Санта для…» в комнате (фиолетовая) и шапка получателя */
.sn-notch[data-plate-go] { cursor: pointer; }
.sn-notch .bust.photo img { border-radius: 50%; object-fit: cover; background: var(--card-2); }
.sn-notch.sn-hplate .plate { border-radius: 26px; background: linear-gradient(135deg, #3A11B5 0%, #2A0F7A 55%, #1B0B52 100%); display: flex; flex-direction: column; align-items: center; text-align: center; padding-left: 18px; padding-right: 18px; }
.sn-notch.sn-hplate .nm { margin-top: 6px; font: 700 28px/1.15 'Unbounded', sans-serif; overflow-wrap: anywhere; }
.sn-notch.sn-hplate .nm.sm { font-size: 22px; }
.sn-notch.sn-hplate small { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.sn-notch.sn-hplate .acts { display: flex; gap: 8px; width: 100%; margin-top: 16px; }
/* «Подарок готов» — внутри плашки получателя, под кнопками, без своей подложки (215bf3d) */
.sn-notch.sn-hplate.has-rdy .plate { padding-bottom: 6px; }
.sn-notch.sn-hplate .rdy { width: 100%; margin-top: 4px; text-align: left; }
.sn-notch.sn-hplate .rdy:empty { display: none; }
.sn-notch.sn-hplate .rdy .sn-row { padding: 12px 2px; background: none; border-radius: 0; }
.sn-notch.sn-hplate .rdy .sn-row:hover { background: none; }
.sn-notch.sn-hplate .rdy .sn-row .tx small { color: var(--ink-2); }
.sn-notch.sn-hplate .acts .sn-btn { position: relative; flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 10px; border-radius: 24px; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-rechead { position: relative; }
.sn-rechead .left { position: absolute; right: 0; top: 6px; z-index: 3; }
/* «В комнату» — на одном уровне с «обмен через N дней», слева (18.10.2026) */
.sn-rechead > .sn-hback { position: absolute; left: 0; top: 1px; z-index: 3; }
/* шапка получателя — тот же фиолетовый, что у плашки получателя в комнате (HeroBrush приложения) */
.sn-notch.rec .plate { border-radius: 32px; text-align: center; padding-bottom: 18px; background: linear-gradient(135deg, #3A11B5 0%, #2A0F7A 55%, #1B0B52 100%); }
.sn-notch.rec .nm { margin: 2px 0 0; font: 700 30px/1.15 'Unbounded', sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.sn-notch.rec .sn-glass { margin-top: 12px; }
.sn-glass span { font-size: 12px; font-weight: 500; padding: 8px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .09)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* «Подарок готов» без значка, как SantaToggleRow; пока сервер отвечает — спиннер рядом с названием */
.sn-row.tog { cursor: pointer; }
.sn-row.busy { pointer-events: none; }
.sn-row.tog.busy .tx b::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; border: 2px solid var(--lilac); border-right-color: transparent; animation: sn-pcspin .8s linear infinite; vertical-align: -1px; }
.sn-row.tog.busy .sn-sw { opacity: .6; }
.sn-row > .ava { flex: none; }
/* «Информация для моего Санты» */
.sn-info { display: flex; flex-direction: column; gap: 14px; }
.sn-info .wz { display: flex; flex-direction: column; gap: 12px; }
.sn-info .wz.tap { cursor: pointer; }
.sn-info .dv { display: block; height: 1px; background: var(--line); }
.sn-info .wlr { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sn-info .wlr .hd { width: 100%; }
.sn-thumbs { display: flex; gap: 6px; }
.sn-thumbs .th { position: relative; width: 46px; height: 46px; flex: none; border-radius: 12px; overflow: hidden; background: var(--card-2); }
.sn-thumbs .th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-thumbs .th.ph img { object-fit: contain; padding: 4px; box-sizing: border-box; }
.sn-thumbs .th.more { display: flex; align-items: center; justify-content: center; font: 700 13px 'Montserrat', sans-serif; color: var(--ink-2); }
.sn-info .hd { display: flex; align-items: center; gap: 12px; }
.sn-info .hd .ic { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sn-info .hd .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-info .hd b { font-size: 15px; }
.sn-info .hd small { font-size: 12px; color: var(--ink-3); }
.sn-info .hd .end { flex: none; font-size: 13px; font-weight: 700; color: var(--lilac); }
.sn-revcard { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #3A11B5 0%, #2A0F7A 55%, #1B0B52 100%); color: var(--ink) !important; text-decoration: none !important; }
.sn-revcard img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.sn-revcard .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-revcard b { font-size: 16px; }
.sn-revcard small { font-size: 13px; color: var(--ink-2); }
/* списки одной карточкой с разделителями: участники, мои участники без телефона, пары */
.sn-list { padding: 4px 16px; }
.sn-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
div.sn-li { cursor: default; }
.sn-li + .sn-li { border-top: 1px solid var(--line); }
.sn-li .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-li .tx b { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-li .tx small { font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.sn-li .ar { flex: none; color: var(--gold); font-weight: 700; }
.sn-li .nm { font-size: 14px; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-more { display: block; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--lilac); font: 700 13px 'Montserrat', sans-serif; text-align: center; cursor: pointer; }
.sn-ex .sn-pill { margin-left: 4px; }
/* код игры в комнате */
.sn-codecard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sn-codecard .top b { font-size: 14px; color: var(--ink-2); flex: none; }
.sn-codecard .lnk { min-width: 0; padding: 4px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font: 12px 'Montserrat', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sn-codecard .lnk.done { color: var(--mint); }
.sn-codecard .late { margin: 4px 0 0; font-size: 12px; color: var(--gold); }
.sn-codecard .sn-flip { margin: 14px 0; }
/* полоска «подарки готовы у 5 из 8» */
.sn-prog .bar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sn-prog .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--mint), #5FD39A); transition: width .4s ease; }
.sn-prog small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
/* «Провести жеребьёвку» — белая внизу экрана */
#rm-dock { display: contents; }
.sn-dock { position: sticky; bottom: 0; z-index: 6; padding: 22px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(8, 7, 15, 0), rgba(8, 7, 15, .9) 38%, var(--bg)); }
.sn-dock .sn-btn { display: flex; max-width: 480px; margin: 0 auto; }
/* выбор в шторках: идёт запрос — спиннер у выбранного, остальное не нажимается */
.sn-opts.busy { pointer-events: none; }
.sn-opt.busy::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lilac); border-right-color: transparent; animation: sn-pcspin .8s linear infinite; flex: none; }
.sn-opt > svg { width: 18px; height: 18px; color: var(--lilac); flex: none; }
/* шапка шторки участника: аватарка, имя, пара или откуда играет */
.sn-sheet > .panel > .hd > .hx { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sn-sheet > .panel > .hd > .hx .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-sheet > .panel > .hd > .hx .who b { font: 700 20px/1.2 'Unbounded', sans-serif; overflow-wrap: anywhere; }
.sn-sheet > .panel > .hd > .hx .who small { font-size: 13px; color: var(--ink-3); }
.ava.s46 { width: 46px; height: 46px; }

/* конверт: открывается сам, имя и «Что подарить?» — под ним */
.sn-revealv { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; min-height: calc(100svh - 54px); padding: 48px 0 16px; box-sizing: border-box; }
/* конверт по центру экрана (18.10.2026), «В комнату» — слева сверху */
.sn-revealv > .sn-hback { position: absolute; left: 0; top: 0; }
.sn-revealv > .sn-kicker { letter-spacing: 1.2px; }
.sn-revealv .sn-env { cursor: pointer; }
.sn-revealv .sn-next { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 420px; }
.sn-revealv .sn-next .sn-txt-btn { font-size: 14px; padding: 10px 16px; text-decoration: none; }

/* пожелания: значок с мигающей точкой, группы с подписями */
.sn-wplate .hd .ic { width: 36px; height: 36px; }
.sn-wplate .hd .arw { position: relative; flex: none; display: flex; }
.sn-wplate .hd .arw .dot { position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); animation: sn-wdot .8s ease-in-out infinite alternate; }
@keyframes sn-wdot { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: none; } }
.sn-wplate .hd span { font-size: 16px; }
.sn-wgroups { display: flex; flex-direction: column; gap: 14px; }
.sn-wg .sn-lbl { display: block; margin-bottom: 8px; font: 700 12px/1.3 'Montserrat', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
.sn-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sn-sizes span { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--card-2); }
.sn-sizes small { font-size: 11px; color: var(--ink-3); }
.sn-sizes b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-allergy { margin: 0; padding: 12px; border-radius: 14px; background: rgba(255, 107, 138, .12); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.sn-wnote { margin: 0; padding: 12px; border-radius: 14px; background: var(--card-2); font-size: 14px; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.sn-answers { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--card-2); }
.sn-answers img { width: 28px; height: 28px; flex: none; object-fit: contain; }
.sn-answers p { margin: 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }

/* «Мой подарок»: карточки как в вишлистах приложения */
.sn-gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.sn-gcard { position: relative; display: flex; flex-direction: column; min-width: 0; padding-bottom: 8px; border-radius: 16px; cursor: pointer; outline: none; transition: transform .2s var(--spring); -webkit-tap-highlight-color: transparent; }
.sn-gcard:active { transform: scale(.95); }
.sn-gcard:focus-visible .im { box-shadow: 0 0 0 2px var(--lilac); }
.sn-gcard .im { position: relative; display: block; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--card-2); }
.sn-gcard .im > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-gcard .im > img.ph { object-fit: contain; padding: 24px; box-sizing: border-box; }
.sn-gcard .nm { margin: 8px 0 0; font: 700 14px/1.3 'Montserrat', sans-serif; color: #E5E7EB; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-gcard .pr { margin: 3px 0 0; font-size: 14px; color: #9CA3AF; }
.sn-gcard .nt { margin: 1px 0 0; font-size: 12.5px; line-height: 1.45; color: #9CA3AF; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-gcard { padding-bottom: 0; }
/* «Ссылка на магазин» в углу фото, как .wl-store-link сайта */
.sn-gcard .store, .sn-wsheet .store { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; color: #fff !important; text-decoration: none !important; font-weight: 600; line-height: 1; transition: background-color .2s ease, transform .1s ease; }
.sn-gcard .store { position: absolute; right: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px); padding: 6px 10px; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); font-size: 10px; }
.sn-gcard .store span, .sn-wsheet .store span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-gcard .store svg { width: 13px; height: 13px; flex: none; }
.sn-gcard .store:active, .sn-wsheet .store:active { transform: scale(.97); }
.sn-gcard .giving { position: absolute; left: 6px; top: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 46px); height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 700 11px/1 'Montserrat', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .15s var(--spring); }
.sn-gcard .giving.on { background: var(--violet); color: #fff; }
.sn-gcard .giving .spin { width: 11px; height: 11px; border-width: 1.5px; }
.sn-gcard .giving:active, .sn-gcard .more:active { transform: scale(.92); }
.sn-gcard .more { position: absolute; top: 4px; right: 4px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; background: rgba(20, 17, 31, .6); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transition: opacity .2s ease, transform .15s var(--spring); }
.sn-gcard .more svg { width: 18px; height: 18px; }
.sn-gcard.menu-on .more { opacity: 0; }
.sn-gcard .menu { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 12px; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: sn-gmenu .32s cubic-bezier(.2, .9, .25, 1) both; cursor: default; }
@keyframes sn-gmenu { from { clip-path: circle(0 at calc(100% - 19px) 19px); } to { clip-path: circle(150% at calc(100% - 19px) 19px); } }
.sn-gcard .menu .mx { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .85); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sn-gcard .menu .mx svg { width: 16px; height: 16px; }
.sn-gcard .menu .del { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: #FF6B6B; font: 600 13px/1.25 'Montserrat', sans-serif; cursor: pointer; animation: sn-fadein .2s ease .22s both; }
.sn-gcard .menu .del svg { width: 14px; height: 14px; flex: none; }
.sn-gcard.del { pointer-events: none; }
.sn-gcard .shim { position: absolute; inset: 0; z-index: 4; border-radius: 20px; background: linear-gradient(90deg, #15121F 0%, #1E1A2E 40%, #15121F 80%); background-size: 200% 100%; animation: sn-sk 1.3s linear infinite; opacity: .94; }
.sk.gsk { aspect-ratio: 1; border-radius: 20px; }

/* личный подбор — плашка primary с белым текстом, как в приложении (19.10.2026); он в приложении — нажатие объясняет, как перенести игру */
.sn-ten { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; border-radius: 22px; background: var(--violet); color: #fff; text-align: left; font: inherit; cursor: pointer; transition: transform .15s var(--spring); }
.sn-ten:active { transform: scale(.98); }
.sn-ten > img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.sn-ten .tx { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sn-ten b { font: 600 16px/1.3 'Unbounded', sans-serif; color: #fff; }
.sn-ten small { font-size: 12px; line-height: 1.4; color: #fff; }
.sn-ten .sn-pill { margin-top: 8px; }

/* карточка идеи, как в ленте «Идеи»: квадрат со скруглением 16, угол вырезан под «+» (скруглённый квадрат 32) */
.sn-idea { position: relative; flex: none; width: 148px; display: flex; flex-direction: column; cursor: pointer; scroll-snap-align: start; outline: none; -webkit-tap-highlight-color: transparent; }
.sn-idea .box { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.sn-idea .im { position: absolute; inset: 0; display: block; border-radius: 16px; overflow: hidden; background: var(--card-2); }
.sn-idea .im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-idea .im img.ph { object-fit: contain; padding: 24px; box-sizing: border-box; }
.sn-idea:focus-visible .im { box-shadow: 0 0 0 2px var(--lilac); }
/* вырез угла (GiftCutoutShape: 36 px, скругления 16) — три слоя маски: верх, левый край и угол 52×52 */
.sn-idea.cut .im {
  -webkit-mask: linear-gradient(#000 0 0) left top / 100% calc(100% - 51px) no-repeat, linear-gradient(#000 0 0) left top / calc(100% - 51px) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M0 0H52A16 16 0 0 1 36 16H32A16 16 0 0 0 16 32V36A16 16 0 0 1 0 52Z'/%3E%3C/svg%3E") right bottom / 52px 52px no-repeat;
  mask: linear-gradient(#000 0 0) left top / 100% calc(100% - 51px) no-repeat, linear-gradient(#000 0 0) left top / calc(100% - 51px) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M0 0H52A16 16 0 0 1 36 16H32A16 16 0 0 0 16 32V36A16 16 0 0 1 0 52Z'/%3E%3C/svg%3E") right bottom / 52px 52px no-repeat; }
.sn-plus { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 14px; background: var(--violet); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s var(--spring), background-color .2s ease, color .2s ease; }
.sn-plus svg { width: 15px; height: 15px; }
.sn-plus:active { transform: scale(.88); }
.sn-plus.done { background: var(--mint); color: #0B2A16; cursor: default; }
.sn-plus.busy { cursor: default; }
.sn-plus .spin { width: 14px; height: 14px; }
.sn-idea > b { margin: 10px 4px 0; font: 400 14px/1.35 'Montserrat', sans-serif; letter-spacing: .5px; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sn-idea > .pr { margin: 4px 4px 0; font: 400 14px 'Montserrat', sans-serif; color: rgba(255, 255, 255, .7); }
.sn-idea.sk-i { cursor: default; }
.sn-idea.sk-i .im { position: static; aspect-ratio: 1; border-radius: 16px; }
.sn-idea.sk-i .l1 { height: 12px; width: 110px; margin-top: 10px; border-radius: 6px; }
.sn-idea.sk-i .l2 { height: 12px; width: 60px; margin-top: 6px; border-radius: 6px; }
.sn-ideas-grid .sn-idea { width: auto; }
@media (min-width: 960px) { .sn-ideas .sn-idea { width: auto; } }
/* вишлист получателя, как WishlistCard приложения */
.sn-wlc .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sn-wlc .hd b { font: 700 17px/1.3 'Montserrat', sans-serif; }
.sn-wlc .hd small { flex: none; font-size: 12px; color: var(--ink-3); }
.sn-wlr { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.sn-wlr + .sn-wlr { border-top: 1px solid var(--line); }
.sn-wlr .im { width: 56px; height: 56px; flex: none; border-radius: 14px; overflow: hidden; background: var(--card-2); display: flex; align-items: center; justify-content: center; }
.sn-wlr .im img { width: 100%; height: 100%; object-fit: cover; }
.sn-wlr .im img.ph { width: 34px; height: 34px; object-fit: contain; }
.sn-wlr .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink) !important; text-decoration: none !important; }
.sn-wlr .tx b { font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-wlr .tx small { font-size: 12px; color: var(--ink-3); }
.sn-wlr .tx small.over { color: var(--gold); }
.sn-wlr .bk { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 19px; background: #3B1C80; color: #fff; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; transition: transform .15s var(--spring); }
.sn-wlr .bk:active { transform: scale(.96); }
.sn-wlr .bk.me { background: #173A2B; color: var(--mint); }
.sn-wlr .bk[disabled] { opacity: .7; cursor: default; }
.sn-wlr .bk .spin { width: 13px; height: 13px; }
.sn-wlc .note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.sk.sk-wl { height: 56px; margin: 8px 0; border-radius: 14px; }
/* «Свой подарок», как AddGiftUnifiedScreen: стеклянная карточка, фото квадратом, ссылка и «Найти по ссылке» */
.sn-gform { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 26px; background: linear-gradient(180deg, rgba(28, 28, 28, .95), rgba(16, 16, 16, .97)); }
.sn-gform::before { content: ''; position: absolute; inset: 0; border-radius: 26px; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.sn-gform .top { display: flex; gap: 12px; height: 108px; }
.sn-gform .ph { position: relative; flex: none; width: 108px; height: 108px; padding: 0; border: 0; border-radius: 16px; background: var(--card-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font: 400 11px/1.2 'Montserrat', sans-serif; text-align: center; cursor: pointer; overflow: hidden; }
.sn-gform .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-gform .ph > img.i3 { position: static; width: 34px; height: 34px; object-fit: contain; }
.sn-gform .ph .ed { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: var(--card-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); display: flex; align-items: center; justify-content: center; }
.sn-gform .ph .ed svg { width: 14px; height: 14px; }
.sn-gform .ph.busy::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.sn-gform .ph .spin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #fff; }
.sn-gform .lk { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.sn-gform .lk .sn-of { height: 62px; }
.sn-gform .lk .sn-of input { font-size: 12px; }
.sn-gform .find { height: 38px; padding: 0 8px; border: 0; border-radius: 16px; background: var(--card-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 13px 'Montserrat', sans-serif; white-space: nowrap; cursor: pointer; }
.sn-gform .find img { width: 20px; height: 20px; object-fit: contain; }
.sn-gform .find .spin { width: 14px; height: 14px; }
.sn-gform .find[disabled] { cursor: default; }
/* поле в рамке с подписью: пустое — подпись внутри, в фокусе или с текстом — на рамке */
.sn-of { position: relative; display: block; height: 64px; }
.sn-of input { width: 100%; height: 100%; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 16px; outline: 0; background: transparent; color: #fff; caret-color: var(--lilac); font: 400 14px 'Montserrat', sans-serif; transition: border-color .15s ease; }
.sn-of input:focus { border-color: var(--violet); }
.sn-of input::placeholder { color: transparent; }
.sn-of input:focus::placeholder { color: #8A8A8A; }
.sn-of > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); padding: 0 4px; color: #fff; font: 400 14px/1.2 'Montserrat', sans-serif; pointer-events: none; transition: top .15s ease, font-size .15s ease, color .15s ease; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.sn-of input:focus + span, .sn-of input:not(:placeholder-shown) + span { top: 0; font-size: 12px; background: #171717; }
.sn-of input:focus + span { color: var(--lilac); }
.sn-gf-del { display: block; margin: 10px auto 0; padding: 8px 12px; font-size: 14px; }
/* настройки: «Сохранить настройки» выезжает снизу, когда что-то поменялось */
.sn-settings > .panel > .ft { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 22px; transform: translateY(130%); transition: transform .32s cubic-bezier(.2, .9, .25, 1); }
.sn-settings.dirty > .panel > .ft { transform: none; }
.sn-settings.dirty > .panel > .bd { padding-bottom: 110px; --sn-fb: 96px; }
@media (min-width: 960px) {
  .sn-cols.rm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sn-cols.sv { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; }
}
@media (prefers-reduced-motion: reduce) { .sn-gcard .menu, .sn-wplate .hd .arw .dot { animation: none; } }

/* ================= 09.10.2026 (2): правки приложения 6e4e109 ================= */
/* чужие пожелания — только Санте этого участника */
.sn-lockline { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.sn-lockline svg { width: 16px; height: 16px; flex: none; }
/* карточка игры в «Моих играх» (SantaGameCard): вырез слева, бюст 76, текст рядом и ниже */
.sn-notch.game { padding-top: var(--head); }
.sn-notch.game .plate { align-items: stretch; text-align: left; padding: 12px 16px 16px; border-radius: 24px; gap: 0; }
.sn-notch.game .ttl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-height: 44px; padding-left: 98px; text-align: right; }
.sn-notch.game .ttl b { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-notch.game .ttl small { font-size: 12px; color: var(--ink-2); }
.sn-notch.game .who { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sn-notch.game .who .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sn-notch.game .who small { font-size: 12px; color: var(--lilac); }
.sn-notch.game .who b { font: 700 18px/1.25 'Unbounded', sans-serif; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-notch.game .who b.sm { font-size: 16px; }
.sn-notch.game .who .sn-btn { flex: none; min-height: 40px; padding: 0 16px; border-radius: 20px; box-shadow: none; }
.sn-notch.game .msg { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(244, 201, 93, .16); color: var(--gold) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.sn-notch.game .msg i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.sn-notch.game .msg span { flex: 1; min-width: 0; }
.sn-notch.game .msg svg { width: 16px; height: 16px; flex: none; }
.sn-notch.game .sn-prog { margin-top: 14px; }
.sn-notch.game .foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sn-notch.game .foot small { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); }
.sn-notch.game .foot b { flex: none; font-size: 12px; color: var(--gold); }
.sn-notch.game > .plate > .sn-btn.block { margin-top: 12px; min-height: 44px; border-radius: 22px; }

/* ================= 09.10.2026 (3): правки приложения 02bc0ae ================= */
/* диалог по центру поверх экрана (GiftDetailCard): подарок из каталога, сохранённая идея, своя идея */
.sn-sheet.sn-dlg { align-items: center; padding: 16px; }
.sn-sheet.sn-dlg > .panel { max-width: 440px; margin: 0 auto; border-radius: 32px; max-height: calc(var(--vvh, 100dvh) - 32px); padding-top: 14px; opacity: 0; transform: translateY(16px) scale(.97); transition: transform .28s cubic-bezier(.2, .9, .25, 1), opacity .2s ease; }
.sn-sheet.sn-dlg.on > .panel { opacity: 1; transform: none; }
.sn-sheet.sn-dlg > .panel > .bd:last-child { padding-bottom: 22px; }
.sn-sheet.sn-dlg > .panel > .ft { padding-bottom: 18px; }
/* своя идея в диалоге: подписи над полями (как форма подарка на /app/), без своей стеклянной подложки */
.sn-gdlg .sn-gform { padding: 0; background: none; gap: 14px; }
.sn-gdlg .sn-gform::before { display: none; }
.sn-gdlg .sn-gform .top { height: auto; align-items: flex-end; }
.sn-gdlg .sn-gform .ph { width: 96px; height: 96px; background: rgba(255, 255, 255, .07); }
.sn-gdlg .sn-gform .lk { gap: 8px; justify-content: flex-end; }
.sn-gdlg .sn-gform .lk .sn-of { height: auto; }
.sn-gdlg .sn-gform .find { background: rgba(255, 255, 255, .07); }
.sn-gdlg .sn-of { display: flex; flex-direction: column-reverse; gap: 6px; height: auto; }
.sn-gdlg .sn-of > span { position: static; transform: none; padding: 0 0 0 6px; font-size: 12px; color: var(--ink-3); background: none; max-width: none; }
.sn-gdlg .sn-of input:focus + span, .sn-gdlg .sn-of input:not(:placeholder-shown) + span, .sn-gdlg .sn-of textarea + span { top: auto; font-size: 12px; background: none; }
.sn-gdlg .sn-of input:focus + span, .sn-gdlg .sn-of textarea:focus + span { color: var(--lilac); }
.sn-gdlg .sn-of input, .sn-gdlg .sn-of select, .sn-gdlg .sn-of textarea { height: 50px; border-radius: 16px; background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.sn-gdlg .sn-of input::placeholder, .sn-gdlg .sn-of textarea::placeholder { color: #8A85A3; }
.sn-gdlg .sn-gform .lk .sn-of input { height: 46px; }
.sn-gdlg .pr2 { display: flex; gap: 10px; }
.sn-gdlg .pr2 .sn-of:first-child { flex: 1 1 auto; min-width: 0; }
.sn-gdlg .sn-of.sel { flex: 0 0 96px; }
.sn-of select { width: 100%; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .3); outline: 0; color: #fff; font: 600 15px 'Montserrat', sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4B5FD' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.sn-of select option { color: #14111F; }
.sn-of textarea { width: 100%; box-sizing: border-box; min-height: 72px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .3); outline: 0; color: #fff; font: 400 14px/1.45 'Montserrat', sans-serif; resize: none; }
.sn-gdlg .sn-of textarea { height: auto; }
.sn-gdlg .sn-of select:focus, .sn-gdlg .sn-of textarea:focus { border-color: var(--violet); }
.sn-gdlg .sn-gf-err { margin: 12px 6px 0; }
.sn-gdlg .sn-btns .sn-btn { min-height: 50px; border-radius: 25px; font: 700 15px 'Montserrat', sans-serif; }
/* значки вместо текстовых ✕ и →, одного размера (SantaGlyph): в чипе 9–11 px, в кружке 34 — 12 px */
.sn-chip .x { display: inline-flex; margin-left: 4px; opacity: .75; }
.sn-chip .x svg { width: 9px; height: 9px; }
.sn-li .ar { display: inline-flex; }
.sn-li .ar svg { width: 14px; height: 14px; color: var(--gold); }
.sn-xcirc { width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255, 107, 138, .16); color: var(--coral); display: inline-flex; align-items: center; justify-content: center; }
.sn-xcirc svg { width: 12px; height: 12px; }
.sn-pair .x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; }
.sn-pair .x svg { width: 10px; height: 10px; }
/* разделы шторок: заголовок 15 и подпись 12 с отступом 6, под ними одна полупрозрачная плашка; между разделами 18 */
.sn-sform { display: flex; flex-direction: column; gap: 18px; }
.sn-ssec .sh { display: flex; flex-direction: column; gap: 2px; padding-left: 6px; margin-bottom: 8px; }
.sn-ssec .sh b { font: 700 15px/1.3 'Montserrat', sans-serif; color: var(--ink); }
.sn-ssec .sh small { font-size: 12px; line-height: 1.4; color: #fff; }
/* разделы пожеланий без подложек — заголовок и сразу содержимое; поля со своей заливкой (215bf3d) */
.sn-ssec .sb { display: flex; flex-direction: column; gap: 10px; }
.sn-sform .sn-chips:empty { display: none; }
.sn-sform .sn-in, .sn-sform .sn-ta { background: rgba(255, 255, 255, .07); }
.sn-sform .sn-in:focus, .sn-sform .sn-ta:focus { background: rgba(255, 255, 255, .1); }
.sn-sform .sn-chip.off { background: rgba(255, 255, 255, .08); }
.sn-sform .sn-ta { min-height: 84px; resize: none; }
/* «Ещё» во всю ширину: нажатие без подсветки, лёгкое сжатие, плавно раскрывается вниз и сворачивается обратно */
.sn-wmore { border-radius: 20px; background: rgba(255, 255, 255, .06); transition: transform .22s var(--spring); }
.sn-wmore:has(> .wh:active) { transform: scale(.98); }
.sn-wmore > .wh { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--ink); font: 700 15px/1.2 'Montserrat', sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sn-wmore > .wh > svg:first-child { width: 14px; height: 14px; flex: none; }
.sn-wmore > .wh > span { flex: 1; min-width: 0; }
.sn-wmore > .wh .ar { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .28s ease; }
.sn-wmore.open > .wh .ar { transform: rotate(90deg); }
.sn-wmore > .wb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1); }
.sn-wmore.open > .wb { grid-template-rows: 1fr; }
.sn-wmore > .wb > .box { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 0 12px; opacity: 0; transition: opacity .18s ease, padding .32s ease; }
.sn-wmore.open > .wb > .box { padding-bottom: 12px; opacity: 1; transition: opacity .26s ease .06s, padding .32s ease; }
@media (prefers-reduced-motion: reduce) { .sn-wmore, .sn-wmore > .wb, .sn-wmore > .wb > .box, .sn-wmore > .wh .ar { transition: none; } }
.sn-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ================= 09.10.2026 (4): правки Андрея и приложения bed71f2 ================= */
/* клавиатура открыта — шторка кончается над ней со скруглёнными нижними углами */
html.sn-kb .sn-sheet > .panel { border-radius: 32px; }
/* официальные плашки сторов, как на всём сайте (.badge-link) */
.sn-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.sn-badges a { display: inline-flex; align-items: center; height: 48px; box-sizing: border-box; background: #000; border: 1px solid #A6A6A6; border-radius: 10px; overflow: hidden; transition: transform .15s ease; }
.sn-badges img { height: 100%; width: auto; display: block; }
.sn-badges a:active { transform: scale(.96); }
@media (hover: hover) { .sn-badges a:hover { transform: scale(1.04); } }
.sn-app-t { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
/* подарок целиком — как шторка подарка на странице вишлиста: фото во всю ширину, «цена — Ссылка на магазин», большая кнопка */
.sn-sheet.sn-wl-sheet > .panel { background: #0B0B0B; border-radius: 26px 26px 0 0; padding-top: 0; }
html.sn-kb .sn-sheet.sn-wl-sheet > .panel { border-radius: 26px; }
.sn-sheet.sn-wl-sheet > .panel::after { display: none; }
.sn-sheet.sn-wl-sheet > .panel > .hd { position: absolute; top: 10px; right: 10px; z-index: 4; padding: 0; }
.sn-sheet.sn-wl-sheet > .panel > .hd > .hx { display: none; }
.sn-sheet.sn-wl-sheet > .panel > .hd > .x { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.sn-sheet.sn-wl-sheet > .panel > .bd { padding: 0 20px calc(20px + env(safe-area-inset-bottom)); -webkit-mask-image: none; mask-image: none; }
@media (min-width: 640px) { .sn-sheet.sn-wl-sheet > .panel { border-radius: 26px; } .sn-sheet.sn-wl-sheet > .panel > .bd { padding-bottom: 20px; } }
.sn-wsheet .media { width: calc(100% + 40px); margin: 0 -20px 20px; aspect-ratio: 1; overflow: hidden; border-radius: 26px; background: #121212; }
.sn-wsheet .media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-wsheet .media.brand img { object-fit: contain; padding: 26%; box-sizing: border-box; }
.sn-wsheet h2 { margin: 0 0 20px; font: 700 17px/1.35 'Montserrat', sans-serif; color: #E5E7EB; overflow-wrap: anywhere; }
.sn-wsheet .why { margin: -10px 0 18px; font-size: 14px; line-height: 1.55; color: #9CA3AF; white-space: pre-line; overflow-wrap: anywhere; }
.sn-wsheet .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding: 6px 6px 6px 18px; border-radius: 999px; background: #121212; min-height: 52px; box-sizing: border-box; }
.sn-wsheet .pr { margin: 0; font-size: 16px; color: #E5E7EB; }
.sn-wsheet .store { max-width: 62%; padding: 12px 18px; background: #4D00C4; font-size: 13px; }
.sn-wsheet .store svg { width: 13px; height: 13px; flex: none; }
@media (hover: hover) { .sn-wsheet .store:hover { background: #6F00FF; } }
.sn-wsheet .acts > span { display: flex; flex-direction: column; gap: 12px; }
.sn-wbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 15px 14px; border: 0; border-radius: 999px; background: #4D00C4; color: #fff; font: 700 15px/1.2 'Montserrat', sans-serif; cursor: pointer; transition: background-color .2s ease, transform .1s ease; }
.sn-wbtn:active { transform: scale(.98); }
@media (hover: hover) { .sn-wbtn:not([disabled]):hover { background: #6F00FF; } }
.sn-wbtn svg { width: 18px; height: 18px; flex: none; }
.sn-wbtn .spin { width: 16px; height: 16px; }
.sn-wbtn.busy { opacity: .85; cursor: default; }
.sn-wbtn.done { background: #173A2B; color: var(--mint); cursor: default; }
.sn-wbtn.on { background: var(--violet); color: #fff; }
@media (hover: hover) { .sn-wbtn.soft:not([disabled]):hover { background: #262626; } }
.sn-wbtn.soft { background: #1C1C1C; color: #E5E7EB; }

/* ================= 09.10.2026 (5): безопасность переписки (сервер a61db1e) ================= */
/* «⋮» в шапке переписки — как шестерёнка комнаты: 42 px, белый 10 % */
.sn-topbar .sn-qmenu { position: static; flex: none; margin-left: auto; background: rgba(255, 255, 255, .1); }
.sn-topbar .sn-qmenu svg { width: 20px; height: 20px; }
@media (hover: hover) { .sn-topbar .sn-qmenu:hover { transform: none; background: rgba(255, 255, 255, .16); } }
/* отказ сервера: текст остаётся в поле, подсказка — над ним */
.sn-qhint { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 107, 138, .12); color: #FF9DB2; font-size: 13px; font-weight: 600; line-height: 1.4; }
/* закрытая переписка — вместо поля строка с замком */
.sn-qclosed { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(8, 7, 15, 0), var(--bg) 30%); color: var(--ink-3); font-size: 13.5px; font-weight: 600; text-align: center; }
.sn-qclosed > svg { width: 14px; height: 14px; flex: none; }
.sn-qclosed .sn-txt-btn { font-size: 13.5px; padding: 0; }
.sn-compose .send.busy { opacity: 1; }
.sn-compose .send .spin { width: 18px; height: 18px; }
/* жалоба: удержание сообщения собеседника, на ПК — кнопка «⋯» при наведении */
.sn-msg[data-mid] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; position: relative; }
.sn-msg.held > div > p { transform: scale(.97); transition: transform .15s ease; }
.sn-msg .act { align-self: center; width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.sn-msg .act svg { width: 16px; height: 16px; }
.sn-msg:hover .act, .sn-msg .act:focus-visible { opacity: 1; }
/* шторка «Переписка»: правила и как пожаловаться — строки со значками в кружках 28 */
.sn-chatrules { display: flex; flex-direction: column; gap: 12px; }
.sn-chatrules .r { display: flex; align-items: flex-start; gap: 12px; }
.sn-chatrules .ic { width: 28px; height: 28px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--lilac); display: inline-flex; align-items: center; justify-content: center; }
.sn-chatrules .ic svg { width: 14px; height: 14px; }
.sn-chatrules p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.sn-chatnote { margin-top: 16px; }
.sn-btn.sn-closechat { background: rgba(255, 255, 255, .08); color: var(--coral) !important; box-shadow: none; }
.sn-chatby { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.sn-chatby svg { width: 14px; height: 14px; }
/* жалоба: цитата сообщения (3 строки, белый 6 %), причины чипами */
.sn-quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); quotes: '«' '»' '“' '”'; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* ================= 14.10.2026: как в приложении (giftbaseKMP 8b98722, d5aebb0, dd5749a) ================= */
/* Пожелания — раскрывающиеся плашки (WishSectionPlate): шапка со стрелкой, у свёрнутой — что выбрано строкой,
   у раскрытой — поле «через запятую» и подсказки. Высота и содержимое меняются одним движением, 280 мс */
.sn-wplates { display: flex; flex-direction: column; gap: 10px; }
.sn-wplate { border-radius: 20px; background: rgba(255, 255, 255, .06); transition: transform .22s var(--spring); }
.sn-wplate:has(> .wh:active) { transform: scale(.98); }
.sn-wplate > .wh { display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px 16px; border: 0; background: none; color: var(--ink); font: 700 15px/1.25 'Montserrat', sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sn-wplate > .wh > span { flex: 1; min-width: 0; }
.sn-wplate > .wh .ar { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.sn-wplate.open > .wh .ar { transform: rotate(90deg); }
.sn-wplate > .wv, .sn-wplate > .wb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.2, .8, .2, 1); }
.sn-wplate > .wv > .box, .sn-wplate > .wb > .box { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .14s ease; }
.sn-wplate.has-sum:not(.open) > .wv, .sn-wplate.open > .wb { grid-template-rows: 1fr; }
.sn-wplate.has-sum:not(.open) > .wv > .box, .sn-wplate.open > .wb > .box { opacity: 1; transition: opacity .28s ease; }
.sn-wplate .sum { margin: 0; padding: 0 16px 14px; font-size: 13px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sn-wplate .in { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
.sn-wplate .in > .sn-grid3 + .sn-in { margin-top: -4px; }
.sn-sform .sn-ta.wt { min-height: 52px; resize: none; overflow: hidden; padding: 14px 16px; font-size: 15px; line-height: 1.45; }
/* чипы-подсказки как в диалоге интересов: пилюля, невыбранный — полупрозрачный, выбранный — основной фиолетовый */
.sn-wchip { display: inline-flex; align-items: center; min-height: 32px; max-width: 100%; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .3); color: #E0E0E0; font: 600 13px/1.2 'Montserrat', sans-serif; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.sn-wchip.on { background: var(--violet); color: #FFFFFF; }
.sn-wchip:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .sn-wplate, .sn-wplate > .wv, .sn-wplate > .wb, .sn-wplate .box, .sn-wplate > .wh .ar, .sn-wchip { transition: none; } }
/* заголовок пожеланий прямо на шторке (участник без телефона) */
.sn-wtitle { margin: 10px 0 0 6px; font: 600 19px/1.3 'Unbounded', 'Montserrat', sans-serif; color: #FFFFFF; }

/* «Участник без телефона»: аватарка 72 с 3D-карандашом и имя одной строкой прямо на шторке, без подложки и тени */
.ava.s72 { width: 72px; height: 72px; filter: none; }
.sn-phrow { display: flex; align-items: center; gap: 14px; padding-left: 2px; }
.sn-phrow .av { position: relative; flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .2s var(--spring); -webkit-tap-highlight-color: transparent; }
.sn-phrow .av:active { transform: scale(.95); }
.sn-phrow .av:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.sn-phrow .av .pen { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; pointer-events: none; }
.sn-phrow .sn-in { flex: 1; min-width: 0; background: rgba(255, 255, 255, .07); }
.sn-phrow .sn-in:focus { background: rgba(255, 255, 255, .1); }

/* 3D-карандаш вместо «Изменить» (SantaEditPencil, 30 dp) */
.sn-pencil { width: 30px; height: 30px; flex: none; display: block; object-fit: contain; }
.sn-row .sn-pencil { margin-left: 2px; }
.sn-row .end.pen { display: flex; }

/* «Код игры | Мой ключ» — переключатель в заголовке плашки кода (CodeKeySwitch); ключ — тёплые золотые плитки */
.sn-seg2 { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--card-2); }
.sn-seg2 button { padding: 5px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font: 700 12px/1.2 'Montserrat', sans-serif; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.sn-seg2 button.on { background: var(--violet); color: #FFFFFF; }
.sn-codecard .top:has(.sn-seg2) { gap: 8px; }
.sn-codecard.is-key .lnk { padding: 4px 2px; }
.sn-codecard.is-key .sn-flip { margin: 14px 0 6px; }
.sn-codecard.is-key .sn-flip i { background: #3D3016; color: var(--gold); }
.sn-codecard.is-key .sn-flip i::after { background: rgba(0, 0, 0, .35); }

/* «Анонимные вопросы» в настройках — обычная строка с иконкой слева, без рамки и подложки (8b98722) */
.sn-toggle.featured { padding: 4px 2px; border-radius: 0; background: none; box-shadow: none; }

/* подтверждение шторкой (SantaConfirmSheet): крупный заголовок, действие во всю ширину, под ним «Отмена»; крестика нет */
.sn-confirm > .panel { padding-top: 26px; }
.sn-confirm > .panel > .hd > .x { display: none; }
.sn-confirm > .panel > .hd b { font-size: 22px; line-height: 1.25; }
.sn-confirm p { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sn-confirm .sn-btn.red { background: var(--coral); color: #FFFFFF !important; }
/* шторка поверх шторки: своё затемнение лёгкое — общее уже лежит под ними */
.sn-sheet.stacked > .bg { background: rgba(0, 0, 0, .45); }

/* заголовки разделов — с отступом 8 от края карточек под ними (SantaSectionHeader, dd5749a) */
.sn-sec .sn-h2, .sn-sec > p { padding-left: 8px; }

/* «Сразу из каталога»: восемь идей и последней плиткой «Показать ещё» с числом */
.sn-more-tile { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; }
.sn-more-tile .box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 20px; background: var(--card-2); transition: background-color .15s ease, transform .12s ease; }
.sn-more-tile b { font: 700 15px/1.25 'Montserrat', sans-serif; color: var(--ink); }
.sn-more-tile small { font-size: 12px; color: var(--ink-3); }
.sn-more-tile:active .box { transform: scale(.97); }
@media (hover: hover) { .sn-more-tile:hover .box { background: var(--card-3); } }

/* шторки выбора вишлиста: варианты прямо на шторке, полупрозрачными плашками; выбранный — заливка primary, текст белый */
.sn-wlpick .sn-opt { background: rgba(255, 255, 255, .06); border-radius: 18px; }
.sn-wlpick .sn-opt.on { background: var(--violet); color: #fff; box-shadow: none; }
.sn-wlpick .sn-opt.on small { color: rgba(255, 255, 255, .78); }
.sn-wlpick .sn-opt.on > svg { color: #fff; }

/* главная кнопка с меняющейся подписью: прежняя уезжает вверх, новая приходит снизу */
.sn-btn.swap { position: relative; overflow: hidden; }
.sn-btn.swap .lbl.out { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* ---------- комната: колонки «комната | я» (17.10.2026) ----------
   На компьютере слева комната, справа получатель и «Для моего Санты». На телефоне колонок нет (display:
   contents), блоки — элементы одной ленты в прежнем порядке (до 17.10 он был порядком разметки): пустые
   блоки не видны, поэтому до жеребьёвки сверху приглашение и отсчёт, после — получатель и переписка */
@media (max-width: 959.98px) {
  #rm-plate { order: 1; } #rm-forsanta { order: 2; } #rm-revealed { order: 3; } #rm-managed { order: 4; }
  #rm-pairs { order: 5; } #rm-code { order: 6; } #rm-cd { order: 7; } #rm-live { order: 8; } #rm-circle { order: 9; }
  #rm-prog { order: 10; } #rm-tg { order: 11; } #rm-members { order: 12; } #rm-ex { order: 13; } #rm-info { order: 14; }
  #rm-late { order: 15; } #rm-actions { order: 16; }
  /* #rm-dock — display: contents, порядок задаётся самой нижней панели (до 18.10 кнопка жеребьёвки вставала под плашку организатора) */
  #rm-dock > .sn-dock { order: 99; }
}

/* ---------- создание игры и поля (17.10.2026) ---------- */
/* снятие выделения у чипа — сразу, без перехода цвета: плавное гашение изредка моргало на Mac */
.sn-chip.off { transition: transform .12s ease; }
/* календарь жеребьёвки: дни с обмена и позже выглядят недоступными, а по нажатию объясняют почему */
.sn-cal .d.late { color: var(--ink-4); opacity: .45; cursor: pointer; }
@media (hover: hover) { .sn-cal .d.late:hover { background: transparent; } }
/* строка даты: календарь с карандашом */
.sn-pencil.sn-caledit { width: 38px; height: 38px; }
/* свой выбор валюты: своя стрелка вместо системной (у системной в Chrome на Mac съезжала) */
.sn-sel { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  --sel-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C4B5FD' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-image: var(--sel-chev); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; }
.sn-card .sn-sel, .sn-sel:focus { background-image: var(--sel-chev); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; }
/* согласие с условиями: круглая галочка, без неё игру не создать — подсветка и встряска */
.sn-agree { display: flex; align-items: flex-start; gap: 10px; margin: 2px 4px 0; padding: 8px 10px; border-radius: 14px; cursor: pointer; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); transition: box-shadow .2s ease, background-color .2s ease; }
.sn-agree input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sn-agree .box { flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(196, 181, 253, .55); display: flex; align-items: center; justify-content: center; color: transparent; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.sn-agree .box svg { width: 13px; height: 13px; }
.sn-agree input:checked + .box { background: var(--violet); box-shadow: none; color: #FFFFFF; }
.sn-agree input:focus-visible + .box { box-shadow: inset 0 0 0 1.5px rgba(196, 181, 253, .55), 0 0 0 3px rgba(111, 0, 255, .45); }
.sn-agree a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.sn-agree.err { background: rgba(255, 107, 138, .1); box-shadow: inset 0 0 0 1.5px var(--coral); animation: sn-errshake .36s ease; }
.sn-agree.err .box { box-shadow: inset 0 0 0 1.5px var(--coral); }
.sn-agree + .sn-err-t { margin: -2px 14px 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .sn-agree.err { animation: none; } }

/* ---------- окно «Пожелания для Санты» (17.10.2026) ----------
   поля — как «Где обмен» в настройках игры: тёмное поле и фиолетовое кольцо при фокусе; кольцо не
   обрезается рамкой раскрывающейся плашки (у .box overflow: hidden ради анимации) */
.sn-sform .sn-in, .sn-sform .sn-ta { background: var(--card); }
.sn-sform .sn-in:focus, .sn-sform .sn-ta:focus { background: #18142A; }
.sn-wplate .in { padding-top: 3px; }
.sn-sform .sn-in.wt { font-size: 15px; }

/* ---------- анонимные вопросы (17.10.2026) ----------
   на компьютере подсказки-вопросы переносятся на вторую строку: колесом мыши ряд не листается */
@media (hover: hover) and (pointer: fine) { .sn-suggest { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }

/* ---------- правки 18.10.2026 ---------- */
/* экраны получателя и переписки — без верхней полосы сайта: она плавно уходит вверх (noBar() в santa.js) */
.sn-head { transition: height .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
html.sn-nobar .sn-head { height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.sn-main { transition: padding-top .32s cubic-bezier(.2, .8, .2, 1); }
html.sn-nobar .sn-main { padding-top: 14px; }
@media (min-width: 960px) { html.sn-nobar .sn-main { padding-top: 28px; } }
/* пожелания получателя — цвет карточек Санты; была полупрозрачная серая плашка формы пожеланий */
.sn-card.sn-wplate { background: var(--card); border-radius: 22px; }
.sn-card.sn-wplate .hd:focus { outline: none; }
.sn-card.sn-wplate .hd:focus-visible { outline: 2px solid var(--lilac); outline-offset: -2px; border-radius: 22px; }
.sn-card.sn-wplate.fixed .hd { cursor: default; }
/* «Мои игры»: «подарки готовы у N из M» и день обмена — каждое в одну строку; рядом не влезают — день обмена
   уходит на следующую строку целиком и прижимается вправо */
.sn-notch.game .foot { flex-wrap: wrap; row-gap: 4px; }
.sn-notch.game .foot small { flex: 0 1 auto; white-space: nowrap; }
.sn-notch.game .foot b { margin-left: auto; white-space: nowrap; }
.sn-notch.game .foot b:empty { display: none; }
@media (min-width: 960px) {
  /* на компьютере все карточки — плашки с вырезом одной высоты в ряду, «Открыть комнату игры» внизу */
  .sn-games > .sn-notch.game { display: flex; flex-direction: column; }
  .sn-games > .sn-notch.game > .plate { flex: 1; }
  .sn-games > .sn-notch.game .foot { margin-bottom: 12px; }
  .sn-games > .sn-notch.game > .plate > .sn-btn.block { margin-top: auto; }
}
/* переписка — как экран приложения: без подвала сайта, поле ввода у самого низа окна; при открытой
   клавиатуре (iOS: html.sn-kb) — без отступа под полосу жестов, поле сразу над клавиатурой */
html.sn-qv .sn-foot { display: none; }
html.sn-qv .sn-main { padding-bottom: 0; }
html.sn-qv.sn-kb .sn-compose { padding-bottom: 8px; }

/* ---------- 18.10.2026, вечер ---------- */
/* вкладки переписки: снятие выделения — сразу, без перехода цвета (старая вкладка изредка моргала дважды,
   как чипы «Кто играет» до 17.10); новая проявляется плавно */
.sn-tabs button { transition: none; }
.sn-tabs button.on { transition: background-color .18s ease, color .18s ease; }
/* готовые названия под полем названия: 5 сразу, «…» открывает ещё 10 */
.sn-namesug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sn-namesug:empty { display: none; }
.sn-namesug .sn-chip { height: 32px; padding: 0 11px; font-size: 12.5px; }
.sn-namesug .sn-chip.more { min-width: 44px; justify-content: center; letter-spacing: 1px; }
/* ---------- атмосферы игры (18.10.2026): фон из картинки на экранах игры, затемнён, снег поверх ---------- */
.sn-theme { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #08070F center bottom / cover no-repeat; opacity: 0; transition: opacity .6s ease; transform: translateZ(0); will-change: opacity; }
.sn-theme::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 15, .62) 0%, rgba(8, 7, 15, .4) 32%, rgba(8, 7, 15, .42) 62%, rgba(8, 7, 15, .74) 100%); }
@media (min-width: 960px) {
  .sn-theme::after { background: linear-gradient(90deg, rgba(8, 7, 15, .12) 0%, rgba(8, 7, 15, .5) 24%, rgba(8, 7, 15, .58) 50%, rgba(8, 7, 15, .5) 76%, rgba(8, 7, 15, .12) 100%), linear-gradient(180deg, rgba(8, 7, 15, .45) 0%, rgba(8, 7, 15, 0) 30%, rgba(8, 7, 15, .1) 70%, rgba(8, 7, 15, .55) 100%); }
}
/* на картинке шапка комнаты и подписи читаются за лёгкой тенью; нижняя панель с кнопкой — затемнение во всю ширину */
html[data-sn-theme] .sn-roomhead .sn-h1, html[data-sn-theme] .sn-roomhead p, html[data-sn-theme] .sn-roomhead .sn-eyebrow2 { text-shadow: 0 1px 14px rgba(8, 7, 15, .75); }
html[data-sn-theme] .sn-dock { background: none; }
html[data-sn-theme] .sn-dock::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; background: linear-gradient(rgba(8, 7, 15, 0), rgba(8, 7, 15, .82) 45%, rgba(8, 7, 15, .94)); transition: opacity .35s ease; }
html.sn-dock-free .sn-dock::before { opacity: 0; }
html[data-sn-theme] .sn-theme { opacity: 1; }
html[data-sn-theme] .sn-sky { opacity: 0; }
/* картинки тем (18.10.2026): вертикальная 1440×2560 — телефон; широкая 2560×1440 — компьютер; 4K 3840×2160 — большие
   и плотные экраны (Grok + Real-ESRGAN). Грузится только картинка выбранной темы */
html[data-sn-theme="winter"] .sn-theme { background-image: url(/santa/img/theme/winter-tall.webp?v=2); }
html[data-sn-theme="city"] .sn-theme { background-image: url(/santa/img/theme/city-tall.webp?v=2); }
html[data-sn-theme="halloween"] .sn-theme { background-image: url(/santa/img/theme/halloween-tall.webp?v=2); }
html[data-sn-theme="cozy"] .sn-theme { background-image: url(/santa/img/theme/cozy-tall.webp?v=2); }
html[data-sn-theme="aurora"] .sn-theme { background-image: url(/santa/img/theme/aurora-tall.webp?v=2); }
html[data-sn-theme="gingerbread"] .sn-theme { background-image: url(/santa/img/theme/gingerbread-tall.webp?v=2); }
html[data-sn-theme="pixel"] .sn-theme { background-image: url(/santa/img/theme/pixel-tall.webp?v=2); }
html[data-sn-theme="ice"] .sn-theme { background-image: url(/santa/img/theme/ice-tall.webp?v=2); }
html[data-sn-theme="sakura"] .sn-theme { background-image: url(/santa/img/theme/sakura-tall.webp?v=2); }
@media (min-aspect-ratio: 4/5) {
  html[data-sn-theme="winter"] .sn-theme { background-image: url(/santa/img/theme/winter-wide.webp?v=2); }
  html[data-sn-theme="city"] .sn-theme { background-image: url(/santa/img/theme/city-wide.webp?v=2); }
  html[data-sn-theme="halloween"] .sn-theme { background-image: url(/santa/img/theme/halloween-wide.webp?v=2); }
  html[data-sn-theme="cozy"] .sn-theme { background-image: url(/santa/img/theme/cozy-wide.webp?v=2); }
  html[data-sn-theme="aurora"] .sn-theme { background-image: url(/santa/img/theme/aurora-wide.webp?v=2); }
  html[data-sn-theme="gingerbread"] .sn-theme { background-image: url(/santa/img/theme/gingerbread-wide.webp?v=2); }
  html[data-sn-theme="pixel"] .sn-theme { background-image: url(/santa/img/theme/pixel-wide.webp?v=2); }
  html[data-sn-theme="ice"] .sn-theme { background-image: url(/santa/img/theme/ice-wide.webp?v=2); }
  html[data-sn-theme="sakura"] .sn-theme { background-image: url(/santa/img/theme/sakura-wide.webp?v=2); }
}
@media (min-aspect-ratio: 4/5) and (min-width: 2200px), (min-aspect-ratio: 4/5) and (min-width: 1100px) and (min-resolution: 1.5dppx) {
  html[data-sn-theme="winter"] .sn-theme { background-image: url(/santa/img/theme/winter-4k.webp?v=2); }
  html[data-sn-theme="city"] .sn-theme { background-image: url(/santa/img/theme/city-4k.webp?v=2); }
  html[data-sn-theme="halloween"] .sn-theme { background-image: url(/santa/img/theme/halloween-4k.webp?v=2); }
  html[data-sn-theme="cozy"] .sn-theme { background-image: url(/santa/img/theme/cozy-4k.webp?v=2); }
  html[data-sn-theme="aurora"] .sn-theme { background-image: url(/santa/img/theme/aurora-4k.webp?v=2); }
  html[data-sn-theme="gingerbread"] .sn-theme { background-image: url(/santa/img/theme/gingerbread-4k.webp?v=2); }
  html[data-sn-theme="pixel"] .sn-theme { background-image: url(/santa/img/theme/pixel-4k.webp?v=2); }
  html[data-sn-theme="ice"] .sn-theme { background-image: url(/santa/img/theme/ice-4k.webp?v=2); }
  html[data-sn-theme="sakura"] .sn-theme { background-image: url(/santa/img/theme/sakura-4k.webp?v=2); }
}
@media (prefers-reduced-motion: reduce) { .sn-theme { transition: none; } }
/* выбор атмосферы (18.10.2026, Андрей): две в ряд и на телефоне, и на компьютере; картинка без подложки, название
   под ней прямо на фоне; у тем «в приложении» на картинке плашка «замок + В приложении», замок белый */
.sn-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.sn-tcard { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 0; border: 0; background: none; color: #FFFFFF; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sn-tcard .im { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0E0B1C; box-shadow: 0 8px 22px rgba(8, 7, 15, .45); transition: box-shadow .2s ease, transform .15s ease; }
.sn-tcard:active .im { transform: scale(.98); }
.sn-tcard.on .im { box-shadow: 0 0 0 3px var(--violet-2), 0 10px 28px rgba(111, 0, 255, .4); }
.sn-tcard .im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-tcard .im.t-base { background: radial-gradient(70% 70% at 15% 0%, rgba(111, 0, 255, .65), transparent 70%), radial-gradient(60% 60% at 95% 10%, rgba(70, 130, 255, .38), transparent 70%), #08070F; }
.sn-tcard.locked .im img { filter: saturate(.85) brightness(.8); }
.sn-tcard .lk { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: rgba(8, 7, 15, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; font: 700 12px/1 'Montserrat', sans-serif; white-space: nowrap; overflow: hidden; }
.sn-tcard .lk svg { width: 13px; height: 13px; flex: none; color: #FFFFFF; }
.sn-tcard .ck { position: absolute; top: 8px; right: 8px; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet); color: #FFFFFF; box-shadow: 0 4px 12px rgba(111, 0, 255, .5); }
.sn-tcard.on .ck { display: flex; }
.sn-tcard .ck svg { width: 15px; height: 15px; }
.sn-tcard .nm { padding: 0 2px; font-size: 15px; font-weight: 700; line-height: 1.25; color: #FFFFFF; overflow-wrap: anywhere; }
html[data-sn-theme] .sn-tcard .nm { text-shadow: 0 1px 10px rgba(8, 7, 15, .85); }
@media (min-width: 960px) { .sn-themes { gap: 22px 18px; } .sn-tcard .nm { font-size: 16px; } }
/* способ обмена: вариант с иконкой и кружком-переключателем справа */
.sn-exopts .sn-opt { padding: 12px 14px 12px 12px; }
.sn-exopts .sn-opt .ic { width: 40px; height: 40px; flex: none; object-fit: contain; }
.sn-exopts .sn-opt .rd { width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-4); transition: box-shadow .15s ease, background-color .15s ease; }
.sn-exopts .sn-opt.on .rd { background: #FFFFFF; box-shadow: inset 0 0 0 6px var(--violet); }
.sn-exopts.err { border-radius: 18px; box-shadow: 0 0 0 2px rgba(255, 107, 138, .7); }
/* адрес для посылки: у Санты — строки с копированием по нажатию */
.sn-dlv { display: flex; flex-direction: column; gap: 10px; }
.sn-dlv .hd { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; }
.sn-dlv .hd .ic { width: 36px; height: 36px; object-fit: contain; flex: none; }
.sn-dlv .sub { font-size: 12.5px; color: var(--ink-3); }
.sn-dlv .lines { display: flex; flex-direction: column; gap: 6px; }
.sn-dlv .ln { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--card-2); color: var(--ink); font: 600 14px/1.35 'Montserrat', sans-serif; text-align: left; overflow-wrap: anywhere; cursor: copy; }
.sn-dlv .sn-btn { align-self: flex-start; }
.sn-li .tx small.sn-ok { color: var(--mint); }
.sn-li .tx small.sn-warn { color: var(--gold); }
.sn-joinex { text-align: center; }
/* Плашка игры в «Моих играх» в атмосфере игры (18.10.2026, как SantaGameCard приложения): картинка темы 4:3
   по центру с обрезкой, сверху затемнение слева направо #0B0716 85 → 45 %; у base — прежний градиент */
.sn-notch.sn-hplate.themed .plate { background: linear-gradient(90deg, rgba(11, 7, 22, .85), rgba(11, 7, 22, .45)), var(--room) center / cover no-repeat, #0B0716; }
.sn-notch.sn-hplate.themed .ttl, .sn-notch.sn-hplate.themed .foot { text-shadow: 0 1px 10px rgba(11, 7, 22, .6); }

/* ---- Контраст текста (18.10.2026, Андрей: «серые шрифты на голых фонах — белыми, чтобы всё читалось»).
   Подписи прямо на фоне страницы белые везде; на фоне атмосферы у них мягкая тень, а серые оттенки внутри
   плашек светлее — фото за ними бывает ярким. Плашка «Вы организатор» плотнее, её текст белый. */
.sn-sub, .sn-label, .sn-prog small, .sn-topbar .t small { color: rgba(255, 255, 255, .92); }
.sn-note { color: rgba(255, 255, 255, .86); }
.sn-day, .sn-msg time { color: rgba(255, 255, 255, .78); }
.sn-foot, .sn-foot a { color: rgba(255, 255, 255, .72) !important; }
.sn-foot a:hover { color: #FFFFFF !important; }
.sn-row.app .tx small { color: rgba(255, 255, 255, .9); }
html[data-sn-theme] body.santa { --ink-2: #EEEBF8; --ink-3: #D8D2E8; --ink-4: #BAB3D0; }
html[data-sn-theme] :is(.sn-sub, .sn-label, .sn-note, .sn-prog small, .sn-day, .sn-msg time, .sn-foot, .sn-sec, .sn-topbar .t, .sn-kicker, .sn-eyebrow2, .sn-h1, .sn-revealv .sn-p) { text-shadow: 0 1px 12px rgba(8, 7, 15, .9), 0 0 2px rgba(8, 7, 15, .5); }
html[data-sn-theme] .sn-eyebrow2 { color: #E4DCFF; }
html[data-sn-theme] .sn-row.app { background: linear-gradient(135deg, rgba(84, 28, 214, .94), rgba(46, 14, 138, .94)); box-shadow: inset 0 0 0 1.5px rgba(167, 139, 250, .7), 0 10px 28px rgba(8, 7, 15, .45); }
html[data-sn-theme] :is(.sn-stack, .sn-col, .sn-gap-s, .sn-gap-xs) > :is(.sn-card:not(.err), .sn-row:not(.app):not(.err)) { box-shadow: 0 10px 28px rgba(8, 7, 15, .35); }
html[data-sn-theme] .sn-msg.them p { background: #221C38; }

/* ---- Создание игры по шагам (18.10.2026, Андрей). Одна страница: экраны по очереди, «Дальше» под содержимым
   (на телефоне по центру, на компьютере справа). Последний шаг — проверка: все блоки сразу, заголовки компактные,
   «Все настройки», согласие и «Создать». На компьютере шаги крупные: слева заголовок с иконкой, справа поля */
.sn-pill:empty { display: none; }
.sn-wiz { display: flex; flex-direction: column; gap: 20px; }
.sn-wtop .t b { font-size: 18px; }
.sn-wbar { display: flex; gap: 6px; margin-top: -6px; }
.sn-wbar button { flex: 1; min-width: 0; height: 18px; padding: 7px 0; border: 0; background: none; cursor: default; }
.sn-wbar button i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); transition: background-color .25s ease; }
.sn-wbar button.done { cursor: pointer; }
.sn-wbar button.done i { background: var(--violet-2); }
.sn-wbar button.cur i { background: #FFFFFF; }
.sn-wstep, .sn-wrev, .sn-wfinal { display: none; }
.sn-wstep.cur { display: flex; flex-direction: column; gap: 22px; }
.sn-wh { display: flex; align-items: flex-start; gap: 14px; }
.sn-wh .ic { order: 2; flex: none; width: 64px; height: 64px; margin-left: auto; object-fit: contain; }
.sn-wh .tx { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sn-wh .n { display: none; }
.sn-wh h2 { margin: 0; font: 700 26px/1.15 'Unbounded', sans-serif; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.sn-wh p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); text-wrap: pretty; }
.sn-wbody { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sn-exlater { margin: 2px 0 4px; }
.sn-wnav { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.sn-wnav .sn-btn { min-height: 56px; }
.sn-wnav #wz-next { flex: 1; max-width: 360px; }
.sn-wnav #wz-prev { display: none; }
html[data-sn-theme] :is(.sn-wh, .sn-wtop) { text-shadow: 0 1px 12px rgba(8, 7, 15, .9), 0 0 2px rgba(8, 7, 15, .5); }
/* проверка: всё сразу */
.sn-wiz[data-step="6"] .sn-wrev { display: block; }
.sn-wiz[data-step="6"] .sn-wstep { display: flex; flex-direction: column; gap: 12px; }
.sn-wiz[data-step="6"] .sn-wstep .sn-wh :is(.ic, .n, p) { display: none; }
.sn-wiz[data-step="6"] .sn-wstep .sn-wh h2 { font: 700 18px/1.3 'Montserrat', sans-serif; letter-spacing: 0; }
.sn-wiz[data-step="6"] .sn-wfinal { display: flex; flex-direction: column; gap: 14px; }
.sn-wiz[data-step="6"] .sn-wnav { display: none; }
@media (min-width: 960px) {
  .sn-wiz { gap: 26px; }
  .sn-wiz:not([data-step="6"]) .sn-cols.wz { display: block; }
  .sn-wiz:not([data-step="6"]) .sn-cols.wz > .sn-col { display: contents; }
  .sn-wiz:not([data-step="6"]) .sn-wstep.cur { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; min-height: 52vh; padding-top: 28px; }
  .sn-wiz:not([data-step="6"]) .sn-wh { flex-direction: column; gap: 22px; position: sticky; top: 24px; }
  .sn-wiz:not([data-step="6"]) .sn-wh .ic { order: 0; width: 128px; height: 128px; margin-left: 0; }
  .sn-wiz:not([data-step="6"]) .sn-wh .tx { gap: 14px; }
  .sn-wiz:not([data-step="6"]) .sn-wh h2 { font-size: 46px; line-height: 1.06; }
  .sn-wiz:not([data-step="6"]) .sn-wh p { font-size: 18px; max-width: 440px; }
  /* крупные поля и кнопки на шагах — одинаковые на всех экранах */
  .sn-wiz:not([data-step="6"]) .sn-wbody { gap: 26px; }
  .sn-wiz:not([data-step="6"]) .sn-label { font-size: 15px; }
  .sn-wiz:not([data-step="6"]) :is(.sn-in, .sn-sel) { height: 64px; padding: 0 20px; font-size: 18px; border-radius: 18px; }
  .sn-wiz:not([data-step="6"]) .sn-chip { height: 48px; padding: 0 20px; font-size: 16px; border-radius: 24px; }
  .sn-wiz:not([data-step="6"]) .sn-seg4 { gap: 10px; }
  .sn-wiz:not([data-step="6"]) .sn-row { padding: 18px 22px; border-radius: 24px; }
  .sn-wiz:not([data-step="6"]) .sn-row .ic { width: 56px; height: 56px; }
  .sn-wiz:not([data-step="6"]) .sn-row .tx b { font-size: 18px; }
  .sn-wiz:not([data-step="6"]) .sn-row .tx small { font-size: 14.5px; }
  .sn-wiz:not([data-step="6"]) .sn-opt { padding: 18px 22px 18px 18px; font-size: 18px; border-radius: 22px; gap: 16px; }
  .sn-wiz:not([data-step="6"]) .sn-opt small { font-size: 14.5px; }
  .sn-wiz:not([data-step="6"]) .sn-exopts .sn-opt .ic { width: 52px; height: 52px; }
  .sn-wiz:not([data-step="6"]) .sn-toggle .tx b { font-size: 17px; }
  .sn-wiz:not([data-step="6"]) .sn-toggle .tx small { font-size: 14.5px; }
  .sn-wiz:not([data-step="6"]) .sn-card { padding: 22px 24px; border-radius: 26px; }
  .sn-wiz:not([data-step="6"]) .sn-tcard .nm { font-size: 17px; }
  .sn-wiz:not([data-step="6"]) .sn-note { font-size: 14px; text-align: left; }
  .sn-wnav { justify-content: flex-end; gap: 12px; margin-top: 8px; }
  .sn-wnav .sn-btn { min-height: 60px; padding: 0 32px; font-size: 17px; }
  .sn-wnav #wz-prev { display: inline-flex; }
  .sn-wnav #wz-prev[hidden] { display: none; }
  .sn-wnav #wz-next { flex: none; min-width: 240px; }
  .sn-wiz[data-step="6"] .sn-wrev .sn-wh .ic { width: 72px; height: 72px; }
  .sn-wiz[data-step="6"] .sn-wrev .sn-wh h2 { font-size: 34px; }
}

/* на фоне атмосферы под закреплённой шапкой текст страницы не просвечивает */
html[data-sn-theme] .sn-head::before { bottom: -28px; background: linear-gradient(rgba(8, 7, 15, .96), rgba(8, 7, 15, .9) 62%, rgba(8, 7, 15, 0)); }
#sv-tap { color: #FFFFFF; }
/* полупрозрачные строки и поля на фоне атмосферы — плотнее, чтобы фото не спорило с текстом */
html[data-sn-theme] .sn-wmore { background: rgba(32, 36, 51, .9); box-shadow: 0 8px 22px rgba(8, 7, 15, .3); }
html[data-sn-theme] :is(.sn-stack, .sn-col, .sn-wbody, .sn-sb, .sb) > .sn-field > :is(.sn-in, .sn-ta) { background: rgba(32, 36, 51, .92); }
/* «Игра удалится через N дней» (19.10.2026): золотая плашка под шапкой комнаты, кнопка «Оставить игру» */
.sn-row.sn-purge { flex-wrap: wrap; cursor: default; background: linear-gradient(135deg, rgba(244, 201, 93, .2), rgba(244, 201, 93, .07)), var(--card); box-shadow: inset 0 0 0 1.5px rgba(244, 201, 93, .5); }
.sn-row.sn-purge:hover { background: linear-gradient(135deg, rgba(244, 201, 93, .2), rgba(244, 201, 93, .07)), var(--card); }
.sn-purge .tx { flex: 1 1 160px; }
.sn-purge .tx b { color: var(--gold); }
.sn-purge .tx small { color: rgba(255, 255, 255, .9); }
.sn-purge .sn-btn { flex: none; margin-left: auto; min-height: 40px; box-shadow: none; }


/* Пожелания (18.10.2026): «Что люблю», «Что не дарить», «Размеры и аллергии» и заметка — сплошной заливкой,
   как плашка имени (--card-2). Полупрозрачные терялись на фоне атмосферы */
.sn-wform .sn-wplate { background: var(--card-2); }
.sn-wform .sn-ssec .sn-ta { background: var(--card-2); }
.sn-wform .sn-ssec .sn-ta:focus { background: #221D38; }
html[data-sn-theme] .sn-wform :is(.sn-wplate, .sn-ssec .sn-ta) { box-shadow: 0 8px 22px rgba(8, 7, 15, .3); }
html[data-sn-theme] .sn-wform .sn-ssec .sn-ta:focus { box-shadow: 0 0 0 2px var(--violet-2), 0 8px 22px rgba(8, 7, 15, .3); }

/* «Мои идеи подарков» (18.10.2026, Андрей): пустая подсказка — с тем же отступом слева, что заголовок секции,
   белым и с тенью, как остальной текст на фоне атмосферы */
.sn-plan-empty { padding-left: 8px; color: rgba(255, 255, 255, .9); }
html[data-sn-theme] .sn-plan-empty { color: #FFFFFF; text-shadow: 0 1px 12px rgba(8, 7, 15, .9), 0 0 2px rgba(8, 7, 15, .5); }

/* Переписка (18.10.2026, Андрей): экран не листается, листается только лента сообщений. Экран закреплён по видимой
   части окна (--vvh и --vvt из visualViewport): на iPhone клавиатура сдвигает видимую часть, и экран едет за ней,
   поле ввода остаётся прямо над клавиатурой. Под полем ввода и строкой «переписка закрыта» — без затемнения */
html.sn-qv, html.sn-qv body { overflow: hidden; overscroll-behavior: none; }
html.sn-qv .sn-chat { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: var(--vvh, 100dvh); min-height: 0; max-width: 480px; margin: 0 auto; padding: 14px 20px 0; gap: 12px; transform: translateY(var(--vvt, 0px)); }
@media (min-width: 960px) { html.sn-qv .sn-chat { max-width: 760px; padding-top: 28px; } }
html.sn-qv .sn-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 4px 20px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.sn-qv .sn-compose, html.sn-qv .sn-qclosed { position: static; background: none; }
.sn-msg.pending p { opacity: .72; transition: opacity .2s ease; }
/* появление экрана (.sn-fade) двигает ленту transform-ом, а он делает её точкой отсчёта для fixed — экран
   переписки встал бы со сдвигом. Здесь лента не анимируется, экран переписки проявляется сам, только прозрачностью */
html.sn-qv .sn-main > .sn-stack.chatw { animation: none; transform: none; }
html.sn-qv .sn-chat { animation: sn-qfade .28s ease both; }
@keyframes sn-qfade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.sn-qv .sn-chat { animation: none; } }

/* Лендинг (18.10.2026): «Что умеет игра» — карточки со скриншотами (на телефоне лента вбок, на компьютере по три
   в ряд), «Для любой компании» — ссылки на страницы кластера, «В браузере и в приложении» — снимок комнаты в окне */
.sn-lfeats { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; }
.sn-lfeats::-webkit-scrollbar { display: none; }
.sn-lfeat { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 24px; background: var(--card); overflow: hidden; }
.sn-lfeat .sh { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: flex; justify-content: center; padding-top: 18px; background: radial-gradient(120% 90% at 50% 0%, rgba(111, 0, 255, .55), rgba(20, 17, 31, 0) 70%), #120D24; }
.sn-lfeat .sh img { width: 60%; height: auto; flex: none; align-self: flex-start; border-radius: 20px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); transform: translateY(var(--shift, 0%)); }
.sn-lfeat .tx { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.sn-lfeat .tx b { font: 700 16px/1.3 'Montserrat', sans-serif; color: var(--ink); }
.sn-lfeat .tx p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 960px) {
  .sn-lfeats { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; margin: 0; padding: 0; }
}
.sn-lfmts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .sn-lfmts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sn-lfmt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--card); color: var(--ink) !important; text-decoration: none !important; transition: background .2s ease; }
.sn-lfmt:hover { background: var(--card-2); }
.sn-lfmt img { width: 52px; height: 52px; flex: none; object-fit: contain; }
.sn-lfmt span { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sn-lfmt b { font: 700 15px/1.3 'Montserrat', sans-serif; }
.sn-lfmt small { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.sn-lfmt i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--card-2); display: flex; align-items: center; justify-content: center; color: var(--lilac); }
.sn-lfmt i svg { width: 16px; height: 16px; }
.sn-lweb { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: 28px; background: linear-gradient(135deg, rgba(111, 0, 255, .26), rgba(20, 17, 31, 0) 70%), var(--card); }
@media (min-width: 960px) { .sn-lweb { grid-template-columns: 1.3fr 1fr; gap: 32px; padding: 28px; } }
.sn-lweb-shot { margin: 0; border-radius: 16px; overflow: hidden; background: #0B0716; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.sn-lweb-shot .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #17132A; }
.sn-lweb-shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A3355; }
.sn-lweb-shot .bar span { flex: 1; margin-left: 8px; padding: 4px 10px; border-radius: 8px; background: #0F0B1F; font-size: 11px; color: var(--ink-3); text-align: center; }
.sn-lweb-shot img { display: block; width: 100%; height: auto; }
.sn-lweb .sn-p { color: var(--ink-2); }
.sn-lweb-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sn-lweb-cta .sn-btn { flex: 1 1 160px; }

/* 18.10.2026, Андрей: на шаге «Проверьте настройки» правая колонка («О вас», «Все настройки», «Создать») на компьютере
   стоит на месте и листается вместе со страницей; атмосферы чуть темнее — текст без подложек читается на ярких
   картинках; в шторке «Игра в приложении» — один личный ключ, крупнее */
@media (min-width: 960px) { .sn-wiz[data-step="6"] .sn-col.sticky, .sn-wiz .sn-col.sticky:has(.sn-wfinal) { position: static; } }
.sn-theme::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(8, 7, 15, .22); }
.sn-keypair.one > button { align-items: center; text-align: center; padding: 14px 16px; }
.sn-keypair.one b { font-size: 24px; letter-spacing: .14em; }
/* Пара кнопок «Создать в приложении» / «Создать на сайте»: приложение — белая (чуть ярче), сайт — фиолетовая */
.sn-cta2 { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sn-cta2 .sn-cta { justify-content: center; gap: 10px; padding: 0 22px; }
.sn-cta2 .sn-cta svg { width: 20px; height: 20px; flex: none; color: currentColor; }
.sn-cta2 .sn-cta.app { color: #14111F !important; }
.sn-cta2 .sn-cta.web { background: var(--violet); color: #FFFFFF !important; box-shadow: none; }
@media (min-width: 560px) { .sn-cta2 { flex-direction: row; } .sn-cta2 .sn-cta { flex: 1 1 0; } }
.sn-lweb .sn-cta2 { margin-top: 6px; }
/* в шапке лендинга кнопки друг под другом: в узкой колонке рядом подписи переносились на две строки */
.sn-hero-cta .sn-cta2 { flex-direction: column; }
.sn-hero-cta .sn-cta2 .sn-cta { flex: none; }