/* Premint · «Карточка подарка»: экран говорит языком карточки NFT-подарка Telegram.
   Фон в зачёт (Electric Indigo) заливает страницу; белый текст, второй цвет текста — родной цвет текста этого фона в Telegram;
   цифры и заголовки системным шрифтом Telegram (SF на айфоне, Roboto на андроиде); плитки, ленты, пилюли и списки как в самом Telegram. */
:root {
  --top: #4744c6;
  --ink: #2c2394;
  --center: #a980f3;
  --edge: #5b62d8;
  --tx: #fff;
  /* второй цвет текста светлее родного #d8d8ff: на заливках у верха окна он держит 4,5:1 */
  --tx2: #e6e6ff;
  --fill: rgba(255, 255, 255, .08);
  --fill2: rgba(255, 255, 255, .12);
  --line: rgba(230, 230, 255, .14);
  --btn-ink: #3b2fc9;
  --warn: #ffd27a;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
  --out: cubic-bezier(.22, 1, .36, 1);
  --safe-top: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --g: 16px;
}
* { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; scrollbar-color: rgba(216, 216, 255, .35) var(--ink); }
body { margin: 0; min-height: 100vh; color: var(--tx); font: 500 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(255, 255, 255, .3); color: #fff; }
h1, h2, h3, p, figure { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
.ic { flex: none; display: block; }
img.fi { opacity: 0; transition: opacity .35s ease; }
img.fi.ld { opacity: 1; }

/* фон страницы: заливка фоном в зачёт, сверху светлее, к низу темнее; слой стоит на месте, прокручивается только содержимое */
#bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--top) 0%, #3d35b8 42%, var(--ink) 100%); }

/* заставка */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--top); transition: opacity .35s ease; }
#splash .sp-mark { width: 72px; height: 72px; animation: sp 1.3s ease-in-out infinite; }
@keyframes sp { 50% { opacity: .6; } }
#splash.off { opacity: 0; pointer-events: none; }
body.splash .rise, body.splash .pm-bar { animation-play-state: paused; }

.rise { animation: rise .7s var(--out) both; animation-delay: calc(var(--i, 0) * 70ms + 20ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.pm { max-width: 520px; margin: 0 auto; padding: calc(var(--safe-top) + 4px) 0 calc(var(--safe-bottom) + 112px); }

/* шапка */
.pm-top { display: flex; align-items: center; gap: 10px; padding: 12px var(--g) 0; }
.mk { display: block; flex: none; }
.mk svg { display: block; width: 100%; height: 100%; }
.pm-top .mk { width: 30px; height: 30px; }
.pm-top b { font: 700 21px/1 var(--display); letter-spacing: -.015em; }
.round { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill2); color: #fff; transition: transform .15s var(--out); }
.round:active { transform: scale(.92); }

/* время до открытия: крупно, как цена в карточке подарка */
.pm-clock { padding: 22px var(--g) 0; text-align: center; }
.pm-clock .tv { display: flex; justify-content: center; align-items: baseline; gap: clamp(9px, 3.4vw, 16px); }
.pm-clock .g { display: inline-flex; align-items: baseline; gap: 2px; }
.pm-clock .d { font: 800 clamp(40px, 12.6vw, 54px)/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pm-clock .g i { font: 700 clamp(17px, 5.2vw, 22px)/1 var(--display); font-style: normal; color: var(--tx2); }
.pm-clock .cap { margin-top: 10px; font-size: 15px; color: var(--tx2); }
.pm-clock .lb::after { content: ' · '; }
.pm-clock.live .tv { display: none; }
.pm-clock.live .lb { display: block; font: 800 34px/1.1 var(--display); color: #fff; }
.pm-clock.live .lb::after { content: none; }
.pm-clock.live .dt { display: block; margin-top: 8px; }

/* живой лот как шапка листа подарка в Telegram: фон в зачёт на всю ширину, модель крупно по центру,
   имя и номер лота прямо на фоне, без рамки */
.pm-lot { --sh: clamp(270px, 76vw, 330px); position: relative; padding: 10px var(--g) 0; }
/* свечение фона: радиальный переход Electric Indigo с центром в модели растворяется в поле страницы.
   z-index -1 без своего контекста наложения: свечение ложится под шапку и таймер, но над слоем #bg */
.pm-lot::before { content: ''; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: calc(10px + var(--sh) / 2 - 420px); height: 840px; pointer-events: none;
  background: radial-gradient(ellipse 360px 320px at 50% 50%, var(--center) 0%, rgba(150, 124, 240, .9) 22%, rgba(116, 108, 228, .62) 48%, rgba(91, 98, 216, .26) 74%, rgba(91, 98, 216, 0) 100%); }
.lt-stage { position: relative; height: var(--sh); margin: 0 calc(50% - 50vw); overflow: hidden; }
.lt-art { position: absolute; left: 50%; top: 50%; width: min(62vw, calc(var(--sh) * .78), 260px); aspect-ratio: 1; translate: -50% -50%; object-fit: contain; }
/* «Продано»: белая лента наискось через всю сцену, въезжает вдоль себя, как лента на подарке */
.lt-sash { position: absolute; left: -10%; right: -10%; top: calc(50% + 34px); height: 48px; display: grid; place-items: center; background: #fff; color: var(--btn-ink); rotate: -7deg; opacity: 0; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4); pointer-events: none; }
.lt-sash span { font: 800 19px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lt-name { margin-top: 2px; text-align: center; font: 800 29px/1.1 var(--display); letter-spacing: -.025em; }
.lt-sub { margin-top: 6px; text-align: center; font-size: 15.5px; color: var(--tx2); font-variant-numeric: tabular-nums; }
/* табло ставок вместо таблицы: цена крупно, кто ведёт, дорожка «отсчёт · Раз · Два · Продано» с бегунком */
.lt-tag { position: absolute; left: max(16px, calc(50% - 244px)); top: 6px; padding: 7px 11px; border-radius: 11px; background: rgba(36, 22, 132, .42); font: 700 13.5px/1 var(--font); color: #fff; }
.lt-price { margin-top: 20px; display: flex; justify-content: center; align-items: baseline; gap: 7px; }
.lt-num { display: inline-block; font: 800 clamp(40px, 12vw, 48px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lt-price small { font: 700 18px/1 var(--display); color: var(--tx2); }
.lt-by { margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 26px; }
.lt-pad { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--btn-ink); font: 800 12px/1 var(--font); font-variant-numeric: tabular-nums; }
.lt-pad:empty { display: none; }
.lt-who { font: 600 16px/1 var(--font); }
.lt-by.idle .lt-who { font-weight: 500; color: var(--tx2); }
/* дорожка молотка: четыре шага, белый бегунок переезжает со шага на шаг; на «Раз» и «Два» он янтарный */
.lt-call { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; padding: 4px; border-radius: 16px; background: var(--fill); }
.lt-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 12px; background: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); transform: translateX(calc(var(--step, 0) * 100%)); transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .25s; }
.lt-seg { position: relative; height: 40px; display: grid; place-items: center; font: 700 clamp(13px, 3.9vw, 15px)/1 var(--font); color: var(--tx2); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .25s; }
.lt-seg.on { color: var(--btn-ink); }
.pm-lot.call .lt-thumb { background: var(--warn); }
.pm-lot.call .lt-seg.on { color: #2a1a00; }

.pm-about { padding: 26px var(--g) 0; font-size: 16.5px; line-height: 1.5; color: var(--tx2); }

/* разделы */
.pm-sec { padding: 44px var(--g) 0; }
.pm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pm-h h2 { font: 800 27px/1.1 var(--display); letter-spacing: -.025em; }
.pm-h .aside { font-size: 14.5px; color: var(--tx2); white-space: nowrap; }
.pm-sub { margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--tx2); }
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin-top: 10px; padding: 0 16px; border-radius: 16px; background: var(--fill); font: 600 16.5px/1 var(--font); text-align: left; transition: background .2s; }
.pm-row:active { background: var(--fill2); }
.pm-row .ic { color: var(--tx2); }

/* стена: NFT на фонах в зачёт сеткой, как подарки в профиле */
.pm-wallbox { margin-top: 16px; }
.pm-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pl { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: radial-gradient(circle closest-side at 50% 50%, var(--c), var(--e)); }
.pl > .pt { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl > .md { position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; object-fit: contain; }
.pm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--fill); }
.sw { display: block; width: 22px; height: 22px; border-radius: 7px; background: radial-gradient(circle at 50% 42%, var(--c), var(--e)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pill b { font: 600 15.5px/1 var(--font); }
.pill small { font-size: 14px; color: var(--tx2); }

/* правило конкурса */
.pm-lead { padding: 52px var(--g) 0; }
.pm-lead h2 { font: 800 clamp(33px, 10vw, 42px)/1.03 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.pm-lead p { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--tx2); }

/* призы: витрина, как магазин подарков в Telegram */
.pm-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.pz, .pz-main { position: relative; overflow: hidden; border-radius: 18px; }
.pz { display: grid; justify-items: center; padding: 10px 8px 12px; background: var(--fill); }
.pz-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.pz-art img { width: 80%; aspect-ratio: 1; object-fit: contain; }
.pz figcaption { margin-top: 2px; }
.pz-pill { display: inline-block; padding: 6px 10px; border-radius: 11px; background: var(--fill2); font: 700 13px/1 var(--font); white-space: nowrap; }
.pz-t { display: none; }
.pz-main { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 176px; background: radial-gradient(circle closest-side at 26% 50%, var(--center), var(--edge) 175%); }
.pz-main .pz-art { aspect-ratio: auto; height: 100%; }
.pz-main .pz-art img { width: 84%; }
.pz-main figcaption { display: grid; justify-items: start; padding: 18px 18px 18px 0; }
.pz-big { font: 800 68px/.86 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pz-word { margin-top: 4px; font: 700 19px/1 var(--display); color: #fff; }
.pz-main b { margin-top: 12px; font: 700 19px/1.15 var(--display); letter-spacing: -.01em; }
.ribbon { position: absolute; top: 20px; right: -36px; width: 150px; padding: 6px 0; background: #fff; color: var(--btn-ink); text-align: center; font: 800 12px/1.1 var(--font); transform: rotate(45deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .3); }

/* мои NFT: плитки с лентой «в зачёте» */
.pm-mine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pm-g { position: relative; overflow: hidden; border-radius: 18px; transition: transform .15s var(--out); }
.pm-g:active { transform: scale(.96); }
.ribbon.sm { top: 16px; right: -38px; width: 140px; padding: 5px 0; font-size: 12px; }
.pm-g.off .pl > .md { opacity: .5; }
.pm-g.off .ribbon { background: rgba(26, 16, 100, .86); color: var(--tx2); box-shadow: none; }

/* места: список, как в Telegram */
.pm-list { margin-top: 14px; overflow: hidden; border-radius: 18px; background: var(--fill); }
.pm-list li { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 62px; padding: 8px 16px 8px 12px; }
.pm-list li + li { border-top: 1px solid var(--line); }
.pm-list .p { font: 800 17px/1 var(--display); text-align: center; font-variant-numeric: tabular-nums; }
.pm-list .av { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--fill2); }
.pm-list .av img { width: 76%; height: 76%; object-fit: contain; }
.pm-list .nm { display: grid; gap: 3px; min-width: 0; }
.pm-list .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.2 var(--font); }
.pm-list .nm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--tx2); }
.pm-list .n { display: flex; align-items: baseline; gap: 3px; }
.pm-list .n b { font: 800 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.pm-list .n small { font: 700 13px/1 var(--font); color: var(--tx2); }
/* своя строка: белая обводка вместо светлой заливки, чтобы текст в ней не терял контраст */
.pm-list li.you { border-radius: 18px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.pm-list li.you, .pm-list li.you + li { border-top-color: transparent; }
.pm-list li.you .nm small { overflow: visible; white-space: normal; line-height: 1.3; color: #fff; font-weight: 600; }
.pm-more { margin-top: 8px; }
.pm-list .leaving { opacity: 0; transition: opacity .28s; }

/* нижняя полоса: моё место и главная кнопка */
.pm-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 22px var(--g) calc(var(--safe-bottom) + 12px); background: linear-gradient(180deg, rgba(44, 35, 148, 0), var(--ink) 36%); pointer-events: none; animation: bar .7s var(--out) .3s both; }
@keyframes bar { from { transform: translateY(100%); } }
.pm-bar .in { display: flex; gap: 8px; max-width: 508px; margin: 0 auto; pointer-events: auto; }
.seat { flex: none; display: grid; place-content: center; justify-items: center; min-width: 66px; height: 54px; padding: 0 10px; border-radius: 16px; background: var(--fill2); }
.seat b { font: 800 22px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.seat small { margin-top: 3px; font: 700 12px/1 var(--font); color: var(--tx2); }
.btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; max-width: 508px; height: 54px; margin: 0 auto; padding: 0 16px; border-radius: 16px; background: #fff; color: var(--btn-ink); font: 700 17px/1 var(--font); letter-spacing: -.01em; transition: transform .15s var(--out), background .2s; }
.btn:active:not(:disabled) { transform: scale(.98); background: #ebe8ff; }
.btn:disabled { opacity: .55; }
.btn.sm { flex: none; width: auto; height: 44px; padding: 0 18px; font-size: 15px; }

/* листы снизу */
#sheets { position: relative; z-index: 40; }
.backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(14, 8, 52, .55); opacity: 0; transition: opacity .3s; }
.backdrop.on { opacity: 1; }
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 41; display: flex; flex-direction: column; width: min(100%, 540px); max-height: 90vh; padding-bottom: var(--safe-bottom); border-radius: 26px 26px 0 0; background: #2d2596; box-shadow: 0 -18px 40px rgba(0, 0, 0, .3); transform: translate(-50%, 100%); transition: transform .42s var(--out); }
.sheet.on { transform: translate(-50%, 0); }
.grab { flex: none; display: grid; place-items: center; height: 22px; cursor: grab; }
.grab i { width: 38px; height: 5px; border-radius: 3px; background: rgba(216, 216, 255, .3); }
.sh { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 18px 10px; }
.sh h2 { font: 700 21px/1.2 var(--display); letter-spacing: -.015em; }
.sh .x { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill2); color: #fff; }
.sheet .body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 22px; }
.sheet .foot { flex: none; padding: 10px 18px 14px; }
.grp { overflow: hidden; border-radius: 16px; background: var(--fill); }
.dep-bds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dep-bds .bd { position: relative; }
.dep-bds .pl { border-radius: 20px; }
.dep-bds figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(26, 16, 100, .55); font: 700 14px/1 var(--font); }
.dep-only { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--tx2); }
.dep-only b { color: #fff; font-weight: 600; }
.dep .grp { margin-top: 14px; }
.vault { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; }
.vault .mk { width: 42px; height: 42px; padding: 7px; border-radius: 13px; background: var(--top); }
.vault .main { flex: 1; display: grid; gap: 3px; min-width: 0; }
.vault b { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--font); }
.vault small { font-size: 14px; color: var(--tx2); }
.vault .round { margin-left: 0; }
.demo { padding: 3px 7px; border-radius: 7px; background: #fff; color: var(--btn-ink); font: 800 11px/1.2 var(--font); }
.steps { display: grid; gap: 14px; margin-top: 20px; }
.steps.rules { margin-top: 6px; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--btn-ink); font: 800 14px/1 var(--font); font-style: normal; }
.steps b { display: block; font: 600 16px/1.3 var(--font); }
.steps p { margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--tx2); }
.notes { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.notes p { font-size: 14px; line-height: 1.45; color: var(--tx2); }
.demo-note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: 14.5px; line-height: 1.45; }
.gsheet .pl.big { width: 184px; margin: 4px auto 0; border-radius: 32px; }
.gsheet .grp { margin-top: 18px; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 48px; padding: 13px 16px; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv span { font-size: 15px; color: var(--tx2); white-space: nowrap; }
.kv b { font: 600 15.5px/1.3 var(--font); text-align: right; }
.kv b.warn { color: var(--warn); }

/* тост */
#toast { position: fixed; left: 50%; top: calc(var(--safe-top) + 12px); z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 14px 10px 10px; border-radius: 16px; background: #1e176e; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4); font: 600 15px/1.3 var(--font); opacity: 0; visibility: hidden; transform: translate(-50%, -140%); transition: transform .35s var(--out), opacity .2s, visibility 0s .35s; }
#toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: transform .45s var(--out), opacity .2s, visibility 0s; }
#toast .tic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--btn-ink); }
#toast.err .tic, #toast.warn .tic { background: var(--warn); color: #2a1a00; }

.pm-fail { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 0 var(--g); text-align: center; color: var(--tx2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}