/* LUNADROP — ядро: токены, сброс, типографика, кнопки, иконки */

:root {
  /* поверхности */
  --bg:        #07060b;
  --bg-2:      #0b0910;
  --panel:     #121019;
  --panel-2:   #17141f;
  --panel-3:   #1d1926;
  --line:      #262131;
  --line-soft: rgba(255, 255, 255, .06);

  /* текст */
  --tx:    #efecf7;
  --tx-2:  #a49cba;
  --tx-3:  #6e6785;

  /* бренд */
  --pink:      #ff2f93;
  --pink-2:    #ff7ad1;
  --pink-deep: #a3115c;
  --moon:      #ffe9c9;
  --mint:      #35e0a1;
  --warn:      #ffb020;
  --danger:    #ff4d4d;

  /* редкости */
  --r-grey:   #8f97a8;
  --r-cyan:   #4b9fdc;
  --r-blue:   #4257ff;
  --r-purple: #8a3cff;
  --r-pink:   #e232e6;
  --r-red:    #ff3535;
  --r-gold:   #ffb114;

  /* геометрия */
  --cut: 10px;                       /* срез угла */
  --r-sm: 4px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.16, 1.2, .3, 1);

  --head: 'Unbounded', 'Rubik', system-ui, sans-serif;
  --body: 'Rubik', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* тени */
  --sh-1: 0 2px 6px rgba(0, 0, 0, .35);
  --sh-2: 0 10px 30px -14px rgba(0, 0, 0, .9);
  --sh-pink: 0 8px 24px -12px rgba(255, 47, 147, .85);
}

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

/* min-height, а не height: при height: 100% коробка body равна экрану,
   и липкая шапка отлипает, как только прокрутка выходит за первый экран */
html, body { min-height: 100%; }

/* Полоса прокрутки живёт на html: если повесить overflow на body,
   он становится контейнером прокрутки и position: sticky у шапки ломается —
   она уезжает вверх вместе со страницей. */
html { overflow-y: scroll; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  /* clip, а не hidden: он подрезает вылезающее, но контейнер прокрутки
     не создаёт, поэтому липкая шапка продолжает работать */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; letter-spacing: -.045em; margin: 0; }
::selection { background: var(--pink); color: #fff; }

/* скроллбар */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #2a2436; border: 2px solid var(--bg-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3b3350; }

/* ---------------------------------------------------------------- фон ---- */

.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-moon {
  position: absolute;
  top: -420px; left: 50%;
  width: 1000px; height: 1000px;
  margin-left: -500px;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 47, 147, .16) 0%,
    rgba(255, 47, 147, .06) 34%,
    transparent 62%);
  filter: blur(18px);
  animation: moonbreath 18s var(--ease) infinite alternate;
}
.bg-fx::before {                        /* холодное пятно слева для контраста */
  content: '';
  position: absolute; left: -260px; top: 18vh;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 120, 255, .10), transparent 64%);
  filter: blur(24px);
  animation: moonbreath 22s var(--ease) infinite alternate-reverse;
}
.bg-fx::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(4, 3, 7, .85) 100%);
}

@keyframes moonbreath {
  from { transform: scale(1) translateY(0); opacity: .85; }
  to   { transform: scale(1.12) translateY(28px); opacity: 1; }
}

.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 95% 65% at 50% 0%, #000 12%, transparent 72%);
}

.bg-noise {
  position: absolute; inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- типографика ---- */

.eyebrow {
  font: 600 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-3);
}

.num { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }

.sect-title {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 22px; letter-spacing: -.05em;
}
.sect-title > span:first-child {
  background: linear-gradient(100deg, #fff 30%, #ffc2e4 70%, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sect-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ------------------------------------------------------------- кнопки ---- */

.btn {
  --btn-bg: #191622;
  --btn-tx: var(--tx);
  --btn-bd: #2c2739;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding: 0 22px;
  background: var(--btn-bg);
  color: var(--btn-tx);
  font: 500 14px/1 var(--body);
  letter-spacing: .005em;
  border: 1px solid var(--btn-bd);
  border-radius: 12px;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .16s var(--ease), filter .2s, box-shadow .25s, background .25s, border-color .2s, color .2s;
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
}
.btn > * { position: relative; z-index: 2; }

/* блик, пробегающий по кнопке */
.btn::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease);
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); border-color: #3b3450; }
.btn:active { transform: translateY(1px) scale(.99); filter: brightness(.95); }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: .4; pointer-events: none; filter: saturate(.3);
}

.btn--primary {
  --btn-bg: linear-gradient(135deg, #ff7bc0, #f01c85 55%, #c9126b);
  --btn-tx: #fff;
  --btn-bd: transparent;
  font-weight: 600;
  box-shadow: var(--sh-pink), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--primary:hover { box-shadow: 0 12px 32px -12px rgba(255, 47, 147, 1), inset 0 1px 0 rgba(255, 255, 255, .4); }

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, .02);
  --btn-bd: #2c2739;
  color: var(--tx-2);
  box-shadow: none;
}
.btn--ghost:hover { color: var(--tx); background: rgba(255, 255, 255, .05); }

.btn--pay {
  --btn-bg: linear-gradient(180deg, #221c2e, #171320);
  --btn-bd: #3a3350;
  font-weight: 700;
}
.btn--pay .ic { color: var(--pink); transition: color .2s; }
.btn--pay:hover { --btn-bd: var(--pink); box-shadow: 0 8px 26px -14px var(--pink), inset 0 1px 0 rgba(255, 255, 255, .08); }

.btn--danger {
  --btn-bg: rgba(255, 77, 77, .08);
  --btn-bd: rgba(255, 77, 77, .3);
  color: #ff8080;
  box-shadow: none;
}
.btn--danger:hover { --btn-bg: rgba(255, 77, 77, .16); color: #ffb3b3; }

.btn--lg { height: 56px; padding: 0 36px; font-size: 16px; border-radius: 14px; }
.btn--sm { height: 36px; padding: 0 15px; font-size: 12.5px; border-radius: 9px; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------- иконки ---- */

.ic {
  width: 16px; height: 16px;
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.ic-case  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M2 13h20M10 13v3h4v-3'/%3E%3C/svg%3E"); }
.ic-up    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M6 11l6-6 6 6'/%3E%3Cpath d='M4 20h16' opacity='.5'/%3E%3C/svg%3E"); }
.ic-bag   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.2 11.2A2 2 0 0 1 16.8 21H7.2a2 2 0 0 1-2-1.8L4 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
.ic-gift  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1.5'/%3E%3Cpath d='M3 13h18M12 9v12M12 9S9.5 3.5 7 5s2 4 5 4zM12 9s2.5-5.5 5-4-2 4-5 4z'/%3E%3C/svg%3E"); }
.ic-plus  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ic-sell  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.2c-.6-.9-1.7-1.4-3-1.4-1.7 0-3 .8-3 2.1 0 2.8 6 1.3 6 4.2 0 1.4-1.3 2.2-3 2.2-1.4 0-2.5-.5-3.1-1.5M12 6v12'/%3E%3C/svg%3E"); }
.ic-out   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 7l4-4 4 4'/%3E%3Cpath d='M5 14v4a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-4'/%3E%3C/svg%3E"); }
.ic-close { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5L20 6.5'/%3E%3C/svg%3E"); }
.ic-search{ --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E"); }
.ic-back  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 19l-7-7 7-7'/%3E%3C/svg%3E"); }
.ic-tg    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E"); }
.ic-fast  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 2L4.5 13.5H11L10 22l8.5-11.5H12L13 2z'/%3E%3C/svg%3E"); }
.ic-copy  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E"); }
.ic-info  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.2'/%3E%3C/svg%3E"); }
.ic-gear  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 9 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 9a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.ic-fire  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13.5 2c.6 3.2-1.2 4.6-2.7 6C9 9.6 7.5 11 7.5 14a6 6 0 0 0 12 .3c0-3.7-2.4-5.4-3.6-8.1-.4 1-1 1.6-1.8 2 .5-2.4-.2-4.7-.6-6.2z'/%3E%3C/svg%3E"); }

.ic-steam { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.98 2C6.5 2 2.02 6.2 1.6 11.56l5.55 2.3a3.1 3.1 0 0 1 1.76-.55l2.47-3.58v-.05a4.15 4.15 0 1 1 4.15 4.15h-.1l-3.53 2.52v.15a3.11 3.11 0 0 1-6.16.63L1.77 15.5A10.42 10.42 0 1 0 11.98 2zm-4.6 15.78l-1.27-.53a2.33 2.33 0 0 0 4.32-1.27 2.33 2.33 0 0 0-3.2-2.16l1.32.55a1.72 1.72 0 1 1-1.32 3.17zm11.9-8.1a2.77 2.77 0 1 0-5.53 0 2.77 2.77 0 0 0 5.54 0zm-4.84-.01a2.08 2.08 0 1 1 4.16 0 2.08 2.08 0 0 1-4.16 0z'/%3E%3C/svg%3E"); }
.ic-logout{ --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 17l5-5-5-5M20 12H9M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5'/%3E%3C/svg%3E"); }
.ic-warn  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 1.8 20.5h20.4L12 3.5z'/%3E%3Cpath d='M12 10v4.2M12 17.6v.2'/%3E%3C/svg%3E"); }
.ic-spin  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9' /%3E%3C/svg%3E"); }
.ic-chat  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.6 9.6 0 0 1-3.2-.5L3 21l1.7-5a8.2 8.2 0 0 1-.7-3.4A8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------- утилиты ---- */

.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }
.dim { color: var(--tx-2); }
.hidden { display: none !important; }

.skel {
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-3) 50%, var(--panel) 70%);
  background-size: 220% 100%;
  animation: skel 1.1s linear infinite;
}
@keyframes skel { to { background-position: -120% 0; } }

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

/* --------------------------------------------------- лунная монета ---- */

/* Класс .mn стоит там, где печатается сумма: вместо ₽ / $ / € рядом
   с числом рисуется полумесяц — один значок на все языки и валюты. */
.mn::after {
  content: '';
  display: inline-block;
  width: .82em; height: .82em;
  margin-left: .32em;
  vertical-align: -.07em;
  background: center / contain no-repeat url('../assets/moon.png');
  filter: drop-shadow(0 0 5px rgba(255, 47, 147, .45));
}
/* В кошельке монета уже нарисована слева, второй раз не нужна */
.wallet__sum .mn::after { display: none; }