/* ============================================================
   РАЗРЫВ — дизайн-система
   Тёмная тема как единственная: вскрытие карт — это тёмный зал,
   фольга и холо читаются только на глубоком фоне.
   ============================================================ */
:root{
  --ground:#0B0E12;
  --ground-2:#06090C;
  --surface:#12171D;
  --raised:#1A2028;
  --sunken:#0D1116;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.16);
  --ink:#EDF1F5;
  --ink-2:#98A6B4;
  --ink-3:#5F6D7B;

  --gold:#FFC933;
  --gold-deep:#E8AE00;
  --gold-ink:#161000;
  /* лого: синяя обводка по жёлтой заливке.
     Кладёшь свой файл в assets/fonts — он подхватится первым по списку,
     до тех пор всё рисует Sigmar One. Если гарнитура уже наклонная,
     ставь --logo-skew:0deg, иначе наклон сложится дважды. */
  --logo-line:#2B57C4;
  --logo-face:"LogoFace","Sigmar One","Unbounded",sans-serif;
  --logo-skew:-6deg;

  --ok:#3FCF9B; --warn:#FFA23A; --bad:#FF5A52;

  --r-common:#7C8894;
  --r-uncommon:#4FC2A0;
  --r-rare:#4C8DF6;
  --r-double:#00BFD1;
  --r-ace:#FF5C8A;
  --r-ultra:#A472FF;
  --r-ir:#FF7BB0;
  --r-sir:#FF9C3D;
  --r-hyper:#FFC933;
  --r-shiny:#7FE3FF;
  --r-shinyultra:#B9F2FF;

  --rad:14px; --rad-s:10px; --rad-l:20px;
  --rail:58px;      /* ширина рельса слева */
  --railh:50px;     /* высота рельса, когда он сверху */
  --shadow:0 1px 0 rgba(255,255,255,.04), 0 20px 44px -26px rgba(0,0,0,.95);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:5px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.disp{font-family:"Unbounded","Golos Text",sans-serif;letter-spacing:-.03em}
.lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sp{flex:1}
.hide{display:none!important}

@font-face{
  font-family:"LogoFace";
  src:url("../assets/fonts/logo.woff2") format("woff2"),
      url("../assets/fonts/logo.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ============ ЛОГОТИП ============ */
/* Жёлтая заливка с толстой синей обводкой и наклоном — как на коробках
   с картами. Обводка не через paint-order (в HTML он есть не везде):
   сам элемент рисует жирный синий силуэт, а ::after кладёт сверху заливку.
   Свой шрифт кладётся в assets/fonts — правок в этом файле не нужно. */
.pkm{position:relative;display:inline-block;line-height:1;
  font-family:var(--logo-face);font-weight:400;letter-spacing:.02em;
  color:var(--logo-line);-webkit-text-stroke:.16em var(--logo-line);
  transform:skewX(var(--logo-skew));filter:drop-shadow(0 .05em 0 rgba(0,0,0,.55))}
.pkm::after{content:attr(data-t);position:absolute;left:0;top:0;
  color:var(--gold);-webkit-text-stroke:0}
/* Буква из фавикона: тот же контур, чтобы вкладка и рельс не расходились. */
.pmark{flex:none;display:block}

/* ============ ОБОЛОЧКА ============ */
.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{
  border-right:1px solid var(--line);background:var(--ground-2);
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0;
  position:sticky;top:0;height:100vh;z-index:40;
}
.mark{width:30px;height:30px;margin-bottom:10px;flex:none}
.navb{width:46px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);
  position:relative;transition:color .16s,background .16s}
.navb:hover{color:var(--ink);background:var(--surface)}
.navb[aria-current="page"]{color:var(--gold);background:var(--surface)}
.navb[aria-current="page"]::before{content:"";position:absolute;left:-6px;top:10px;bottom:10px;width:2px;
  background:var(--gold);border-radius:2px}
.navb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.navb .tip{position:absolute;left:54px;white-space:nowrap;background:var(--raised);border:1px solid var(--line);
  padding:4px 10px;border-radius:8px;font-size:12px;color:var(--ink);opacity:0;pointer-events:none;
  transition:opacity .14s;z-index:60}
.navb:hover .tip{opacity:1}

/* Кнопка переключения положения меню жмётся к дальнему краю рельса:
   вниз, когда он слева, и вправо, когда сверху. */
.rail .sp{flex:1}

/* ---- меню сверху ---- */
/* Узкие экраны отдельно: там рельс и так лежит внизу полосой, и выбор
   «слева/сверху» смысла не имеет. */
@media (min-width:701px){
  [data-rail="top"] .app{grid-template-columns:1fr}
  [data-rail="top"] .rail{
    flex-direction:row;align-items:center;justify-content:center;gap:2px;
    width:auto;height:var(--railh);padding:0 14px;top:0;
    border-right:0;border-bottom:1px solid var(--line);
  }
  /* Ряд стоит ровно по центру экрана, поэтому распорку убираем, а кнопку
     раскладки уводим из потока к правому краю — иначе она сдвигала центр. */
  [data-rail="top"] .rail .sp{display:none}
  [data-rail="top"] .railpos{position:absolute;right:10px;top:6px}
  /* Знак прячем: в шапке прямо под рельсом и так стоит слово POKEDRAW */
  [data-rail="top"] .mark{display:none}

  /* шапка липнет уже под рельсом, а не под верхом окна */
  [data-rail="top"] .topbar{top:var(--railh)}
  [data-rail="top"] .navb[aria-current="page"]::before{
    left:9px;right:9px;top:auto;bottom:-1px;width:auto;height:2px}
  /* Подсказку кладём под кнопку и равняем по её краю: по центру она
     вылезала за экран у крайних кнопок ряда. */
  [data-rail="top"] .navb .tip{left:0;top:44px}
  [data-rail="top"] .railpos .tip{left:auto;right:0}
}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  padding:0 22px;position:sticky;top:0;background:color-mix(in srgb,var(--ground) 85%,transparent);
  backdrop-filter:blur(16px);z-index:35}
/* Любой класс с display перебивает [hidden] из браузерного стиля: .chip,
   .fld и прочие — тем же весом, но ниже по каскаду. Гасим централизованно,
   иначе атрибут hidden молча не работает то тут, то там. */
[hidden]{display:none!important}
.wordmark{font-size:23px}
.tb-sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.chip b{color:var(--ink);font-weight:600}
/* задание готово — зовём тем же золотом, что и баланс, но пунктиром внимания */
.chip.quest{border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,var(--surface));color:var(--ok)}
.chip.quest b{color:var(--ok)}
.bal{border-color:color-mix(in srgb,var(--gold) 34%,transparent);background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.bal .amt{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--gold);font-size:13.5px}
.bal .amt.bump{animation:bump .45s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.22);color:#fff}100%{transform:scale(1)}}
.coin{width:13px;height:13px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gold-deep) 75%,transparent)}
.ava{width:28px;height:28px;border-radius:9px;background:var(--raised);border:1px solid var(--line);
  display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--ink-2);flex:none}

.view{padding:26px 30px 80px;max-width:1200px;width:100%;margin:0 auto;flex:1}
.view.bleed{max-width:none;padding:0}
.vhead{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.vhead h1{font-family:"Unbounded",sans-serif;font-weight:600;font-size:26px;letter-spacing:-.035em}
.vhead p{color:var(--ink-3);font-size:13px;max-width:56ch;margin-top:6px}

/* ============ КНОПКИ ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border-radius:11px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;font-size:13.5px;
  transition:transform .12s,background .16s,border-color .16s,opacity .16s;white-space:nowrap}
.btn:hover{background:var(--raised);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.btn.primary:hover{background:#FFD760;border-color:#FFD760}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.sm{height:32px;padding:0 13px;font-size:12.5px;border-radius:9px}
.btn.lg{height:50px;padding:0 26px;font-size:15px;border-radius:13px}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn .price{font-family:"JetBrains Mono",monospace;font-weight:700;opacity:.7}
/* Ва-банк — не «главная» кнопка и не опасная: свой цвет, чтобы риск читался
   до нажатия, а не после. */
.btn.risky{color:var(--r-sir);border-color:color-mix(in srgb,var(--r-sir) 45%,transparent);
  background:color-mix(in srgb,var(--r-sir) 10%,var(--surface))}
.btn.risky:hover{background:color-mix(in srgb,var(--r-sir) 18%,var(--surface));
  border-color:var(--r-sir)}

/* ============ ПАНЕЛИ ============ */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.panel-h h3{font-size:13px;font-weight:600}
.panel-b{padding:16px}
/* Вертикальный ритм внутри панели. Каждый блок носил свой margin, и от шапки
   до текста получалось то 16, то 18, то 28 — в зависимости от того, что
   оказалось первым. Края задаёт padding панели, а не содержимое. */
.panel-b > :first-child{margin-top:0}
.panel-b > :last-child{margin-bottom:0}
/* Пустая коробка результата не должна занимать место до первой ошибки */
.promoout:empty{display:none}
/* Столбик полей одной формы: между собой теснее, чем между блоками панели */
.stack{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
/* Ряд кнопок в конце панели: как .addrow, но без нижнего отступа — он идёт
   последним, и край всё равно задаёт padding панели */
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Счётчик ботов: минус, число, плюс — и подпись о потолке */
.stepper{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.stepper .btn{width:34px;padding:0;font-size:16px;line-height:1}
.stepval{min-width:26px;text-align:center;font-size:16px;font-weight:700;color:var(--ink)}
/* Вложенный блок тоже не должен добавлять свой отступ к нижнему краю */
.panel-b > :last-child > :last-child{margin-bottom:0}
/* Пустое состояние внутри панели — такой же блок, как остальные */
.panel-b > .cv-empty{margin-bottom:14px}
/* Подпись-заголовок группы внутри панели: она inline и своих отступов
   не имеет, из-за чего шаг вокруг неё гулял между 12 и 22 */
.panel-b > .lbl{display:block;margin:14px 0 8px}

/* ============ КАРТА (реальное изображение TCGdex) ============ */
.card{
  position:relative;width:var(--cw,150px);aspect-ratio:734/1024;border-radius:calc(var(--cw,150px)*.048);
  flex:none;background:#0A0D11;overflow:hidden;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .2s var(--ease);
}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph{position:absolute;inset:0;background:
  linear-gradient(110deg,var(--sunken) 20%,var(--raised) 38%,var(--sunken) 55%) 0/300% 100%;
  animation:shimmer 1.5s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.card .rdot{position:absolute;left:5%;top:4%;width:8%;aspect-ratio:1;border-radius:50%;
  background:var(--rc,var(--r-common));box-shadow:0 0 0 2px rgba(0,0,0,.55);z-index:3}

/* ============ ФОЛЬГА ============
   Хроматика держится на color-dodge — screen так не выжигает.
   Цена — дорогой репейнт, поэтому анимация по умолчанию на паузе:
   в биндере висят десятки холо-карт и одновременно идти они не должны.
   Крутится верхняя карта колоды (.live), просмотр и карта под курсором. */
.card.foil::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:color-dodge;opacity:.46;
  /* Полотно не тиражируется: repeating-градиент рисуется внутри коробки
     background-size, а сама коробка повторялась — на её стыке и был шов.
     Одна коробка втрое больше карты + сдвиг в пределах 0..100% гарантируют,
     что край никогда не заезжает в кадр. */
  background-repeat:no-repeat;
  background-position:0% 0%;
  animation:foilpan 7s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.card.foil::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.62) 49%,transparent 58%);
  background-size:320% 100%;
  animation:sheen 5s ease-in-out infinite;animation-play-state:paused;
}
@keyframes foilpan{to{background-position:100% 100%}}
@keyframes sheen{0%,60%{background-position:140% 0}100%{background-position:-70% 0}}
.card.foil.live::before,.card.foil.live::after,
.card.foil:hover::before,.card.foil:hover::after{animation-play-state:running}

/* --- варианты, как на настоящих картах --- */
.card.foil-rainbow::before{                /* спец-арты: полная призма */
  background:repeating-linear-gradient(var(--fa,112deg),
    rgba(255,0,140,.62) 0%, rgba(255,196,0,.62) 8%, rgba(0,255,190,.62) 16%,
    rgba(70,120,255,.62) 24%, rgba(255,0,140,.62) 32%);
  background-size:calc(320% * var(--fs,1)) 320%;
  background-repeat:no-repeat;
}
.card.foil-linear::before{                 /* ex / V / VMAX: вертикальные ленты */
  background:repeating-linear-gradient(var(--fa,96deg),
    rgba(255,255,255,.5) 0%, rgba(110,205,255,.6) 2.5%, rgba(255,255,255,.08) 5%,
    rgba(185,125,255,.55) 7.5%, rgba(255,255,255,.5) 10%);
  background-size:calc(320% * var(--fs,1)) 320%;background-repeat:no-repeat;opacity:.44;
}
.card.foil-cosmos::before{                 /* классическое холо: звёздная пыль */
  background:
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.6) 0 1.2px, transparent 1.2px 9px),
    repeating-linear-gradient(var(--fa,120deg),
      rgba(120,220,255,.5) 0%, rgba(255,160,220,.5) 12%, rgba(150,255,200,.5) 24%);
  /* 27 = 3 периода по 9px: некратная плитка резала точки на границе */
  background-size:27px 27px, calc(320% * var(--fs,1)) 320%;
  background-repeat:repeat, no-repeat;
  opacity:.42;
}
.card.foil-gold::before{                   /* секретки и золото */
  background:repeating-linear-gradient(var(--fa,104deg),
    rgba(255,214,84,.75) 0%, rgba(255,252,214,.68) 7%, rgba(206,144,16,.72) 14%,
    rgba(255,238,158,.7) 21%, rgba(255,214,84,.75) 28%);
  background-size:calc(320% * var(--fs,1)) 320%;background-repeat:no-repeat;opacity:.5;
}
.card.foil-sparkle::before{                /* шайни: мелкая искра */
  background:
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.9) 0 1.4px, transparent 1.4px 14px),
    repeating-radial-gradient(circle at 7px 9px, rgba(190,245,255,.75) 0 1.1px, transparent 1.1px 11px);
  /* 28 = 2×14, 22 = 2×11 — плитки кратны периодам, стыков не видно */
  background-size:28px 28px, 22px 22px;
  background-repeat:repeat, repeat;
  mix-blend-mode:screen;opacity:.6;
}
.card.foil-etched::before{                 /* иллюстрации и ace spec: гравировка */
  background:
    repeating-linear-gradient(var(--fa,68deg), rgba(255,255,255,.36) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(calc(var(--fa,68deg) + 96deg), rgba(160,220,255,.32) 0 1px, transparent 1px 7px);
  background-size:320% 320%, 320% 320%;background-repeat:no-repeat,no-repeat;opacity:.44;
}

/* --- блик, который ходит за курсором --- */
.card .glare{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .22s;
  mix-blend-mode:soft-light;
  background:radial-gradient(closest-side circle at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    rgba(255,255,255,.85), rgba(255,255,255,.22) 42%, transparent 72%);
}
.card.tilting .glare,.card:hover .glare{opacity:1}
.card.foil.tilting::before{
  /* При наклоне узор ведёт курсор. Именно animation:none, а не paused:
     приостановленная анимация всё равно перебивает обычное объявление
     и позиция продолжала жить своей жизнью.
     0..100% — диапазон, где увеличенное полотно ещё накрывает карту целиком. */
  animation:none;
  background-position:calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%);
}

/* --- наклон --- */
.tiltable{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .16s ease-out}
.tiltable.tilting{transition:transform .04s linear}

.card.chase{box-shadow:0 0 0 1px var(--rc), 0 10px 40px -10px var(--rc), 0 0 60px -20px var(--rc)}

.rar-pill{display:inline-flex;align-items:center;gap:5px;font-family:"JetBrains Mono",monospace;font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px;
  color:var(--rc,var(--r-common));background:color-mix(in srgb,var(--rc,var(--r-common)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--rc,var(--r-common)) 32%,transparent)}

/* ============ ПАК ============ */
.packart{width:var(--pw,158px);aspect-ratio:63/96;border-radius:10px;position:relative;overflow:hidden;flex:none;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 44px -20px rgba(0,0,0,.95)}
.packart .foilbg{position:absolute;inset:0;background:
  repeating-linear-gradient(100deg,rgba(255,255,255,.12) 0 2px,transparent 2px 9px);mix-blend-mode:overlay}
.packart .crimp{position:absolute;left:0;right:0;height:5%;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 3px,transparent 3px 6px)}
.packart .crimp.t{top:0}.packart .crimp.b{bottom:0}
.packart .pglyph{position:absolute;inset:14% 0 auto;display:grid;place-items:center}
.packart .pglyph svg{width:46%;opacity:.55}
.packart .plogo{position:absolute;left:9%;right:9%;top:50%;transform:translateY(-56%);
  width:82%;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,.55))}
.packart .psub{position:absolute;inset:auto 8px 5%;text-align:center;color:rgba(255,255,255,.6);
  font-family:"JetBrains Mono",monospace;font-size:calc(var(--pw,158px)*.048)}

/* ============ ГЛАВНАЯ ============ */
.home{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.home .col{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero{position:relative;border-radius:var(--rad-l);border:1px solid var(--line);overflow:hidden;
  background:var(--sunken);padding:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.hero .glow{position:absolute;inset:0;pointer-events:none;opacity:.5}
.hero>*{position:relative}
.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 0%,transparent)}}
.hero h2{font-family:"Unbounded",sans-serif;font-weight:600;font-size:clamp(22px,3vw,32px);letter-spacing:-.04em;line-height:1.05}
.hero .sub{color:var(--ink-2);font-size:13.5px;margin:11px 0 20px;max-width:40ch}
.hero-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.odds{display:flex;gap:22px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.odds .v{display:block;font-family:"JetBrains Mono",monospace;font-size:15px;font-weight:700;margin-top:3px}
.hero .packart{--pw:168px;transform:rotate(-3deg);transition:transform .35s var(--ease)}
.hero:hover .packart{transform:rotate(-1deg) translateY(-6px)}

.streakrow{display:flex;gap:5px;margin:12px 0 14px}
.sd{flex:1;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--sunken);
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3)}
.sd.done{background:color-mix(in srgb,var(--gold) 17%,var(--surface));
  border-color:color-mix(in srgb,var(--gold) 42%,transparent);color:var(--gold)}
.sd.today{border-color:var(--gold);border-style:dashed;color:var(--ink)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:var(--rad);
  overflow:hidden;border:1px solid var(--line)}
.stat{background:var(--surface);padding:14px}
.stat .v{font-family:"Unbounded",sans-serif;font-weight:600;font-size:20px;margin-top:5px;letter-spacing:-.03em}

/* ---- статистика и лучший хит под бесплатным паком ----
   Один ряд в две половины: слева цифры, справа карта. Панели тянутся
   до общей высоты, чтобы низ ряда был ровным. */
.homesplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;align-items:stretch}
.homesplit > .stats{align-content:stretch}
.homesplit > .panel{display:flex;flex-direction:column}
.homesplit > .panel > .panel-b{flex:1}

.besthit{display:flex;align-items:center;gap:16px}
.besthit .card{flex:none}
.bh-meta{flex:1;min-width:0}
.bh-name{font-weight:600;font-size:15px;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-id{font-size:11.5px;color:var(--ink-3);margin-bottom:9px}
.bh-val{margin-top:12px}
.bh-val .lbl{display:block;margin-bottom:3px}
.bh-val b{font-family:"JetBrains Mono",monospace;color:var(--gold);font-size:21px}
.bh-cur{font-size:11.5px;color:var(--ink-3)}
.bh-empty{font-size:12.5px;color:var(--ink-3);padding:6px 0}

.feed .fitem{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.feed .fitem:last-child{border-bottom:0}
.fdot{width:7px;height:7px;border-radius:2px;flex:none;background:var(--rc,var(--r-common))}
.feed .n{font-weight:600;font-size:12.5px}
.feed .c{color:var(--ink-2);font-size:12.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .t{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3);flex:none}

/* ============ МАГАЗИН ============ */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.pk{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s,transform .2s var(--ease)}
.pk:hover{border-color:var(--line-2);transform:translateY(-4px)}
.pk-top{padding:22px;display:grid;place-items:center;background:var(--sunken);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden}
.pk-top .glow{position:absolute;inset:0;opacity:.55}
.pk-top .packart{--pw:118px;position:relative}
.pk-b{padding:14px;display:flex;flex-direction:column;gap:3px;flex:1}
.pk-b h4{font-size:14.5px;font-weight:600}
.pk-b .code{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3)}
.pk-b .chase-line{font-size:12px;color:var(--ink-2);margin-top:8px}
.pk-f{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.pk-f .p{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:15px;color:var(--gold);flex:1}

/* ============ СЦЕНА ============ */
.stage{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(100% 80% at 50% 34%,#141B24 0%,#0A0D11 46%,#04060A 100%)}
.stage-top{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;z-index:5}
.stage-body{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;
  min-height:0;position:relative;overflow:auto;overscroll-behavior:contain}
.stage-body>*{margin:auto}
.stage-foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;
  gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:5;min-height:66px}
.xbtn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);display:grid;
  place-items:center;color:var(--ink-2)}
.xbtn:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.stage .lbl{color:var(--ink-3)}

.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translate3d(-2px,0,0)} 20%,80%{transform:translate3d(4px,0,0)}
  30%,50%,70%{transform:translate3d(-8px,0,0)} 40%,60%{transform:translate3d(8px,0,0)}
}
.shake.big{animation:shakeBig .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes shakeBig{
  10%,90%{transform:translate3d(-6px,2px,0) rotate(-.3deg)} 20%,80%{transform:translate3d(11px,-3px,0) rotate(.4deg)}
  30%,50%,70%{transform:translate3d(-18px,4px,0) rotate(-.6deg)} 40%,60%{transform:translate3d(18px,-4px,0) rotate(.6deg)}
}

/* ============ РИТУАЛ ВСКРЫТИЯ ============ */
.loadwrap{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--ink-2)}
.loadbar{width:220px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.loadbar i{display:block;height:100%;background:var(--gold);width:0;transition:width .25s linear}

.sealed{display:flex;flex-direction:column;align-items:center;gap:26px;cursor:grab;user-select:none}
.sealed:active{cursor:grabbing}
.sealed .packwrap{--pw:min(230px,52vw,44vh);animation:float 4.6s ease-in-out infinite;
  transition:transform .18s var(--ease)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-12px) rotate(1.4deg)}}
.sealed.dragging .packwrap{animation:none}
.sealed:hover .packwrap{animation-play-state:paused;transform:translateY(-7px) scale(1.02)}
.ripping .packwrap{animation:none!important;transform:none!important}
.sealed .hint{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:9px}
.tearline{position:absolute;left:5%;right:5%;top:15%;height:0;pointer-events:none;
  border-top:2px dashed rgba(255,255,255,.4);opacity:.8;transition:opacity .2s}
.packwrap{position:relative;width:var(--pw,230px);aspect-ratio:63/96}
.packwrap .half{position:absolute;inset:0}
/* --pw наследуется от .packwrap в пикселях — на нём завязаны кегли надписей,
   поэтому переопределяем только габариты */
.packwrap .half .packart{width:100%;height:100%;aspect-ratio:auto}
.packwrap .glint{position:absolute;left:0;right:0;top:15%;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,#fff,transparent);filter:blur(1px)}

.ripping .tearline{opacity:0}
.ripping .glint{animation:glint .34s ease-out}

/* Половинки уводит JS-переход из точки, где отпустили. Здесь только
   мелочи, которые делают отрыв похожим на настоящий: обёртка вздрагивает,
   по срезу проходит вспышка, снизу поднимается облачко. */
.packwrap{transform-origin:50% 18%}
.ripping .packwrap{animation:ripJolt .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes ripJolt{
  0%{transform:none}
  12%{transform:translate(-3px,2px) rotate(-.8deg)}
  26%{transform:translate(4px,-2px) rotate(1deg)}
  44%{transform:translate(-2px,1px) rotate(-.4deg)}
  100%{transform:none}
}
.packwrap .flash{position:absolute;left:-6%;right:-6%;top:15%;height:3px;opacity:0;
  background:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);
  filter:blur(2px);pointer-events:none}
.ripping .flash{animation:ripFlash .42s ease-out}
@keyframes ripFlash{
  0%{opacity:0;transform:scaleX(.3)}
  30%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1.05)}
}
.packwrap .puff{position:absolute;left:50%;top:16%;width:4px;height:4px;opacity:0;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%)}
.ripping .puff{animation:ripPuff .6s .06s ease-out}
@keyframes ripPuff{
  0%{opacity:.8;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-26px) scale(26)}
}

.deckIn{animation:deckIn .5s .2s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes deckIn{from{opacity:0;transform:translateY(26px) scale(.82)}to{opacity:1;transform:none}}

kbd{font-family:"JetBrains Mono",monospace;font-size:11px;border:1px solid rgba(255,255,255,.16);
  border-bottom-width:2px;border-radius:6px;padding:2px 7px;color:var(--ink)}

/* колода вскрытия */
.deck{position:relative;width:min(320px,74vw,42vh);aspect-ratio:734/1024;perspective:1400px;
  transform-style:preserve-3d;touch-action:none;cursor:grab}
.deck:active{cursor:grabbing}
.rcard{position:absolute;inset:0;transform-style:preserve-3d;cursor:pointer;
  transition:transform .42s var(--ease),opacity .42s var(--ease)}
/* Улетающая карта: уходит дальше и гаснет раньше, чем долетает.
   visibility выключается ровно по концу движения — без этого окна
   браузер успевал мигнуть карту уже после анимации. */
.rcard.gone{
  transition:transform .4s cubic-bezier(.3,0,.2,1),
             opacity .26s ease-in,
             visibility 0s linear .4s;
  visibility:hidden;
  will-change:transform,opacity;
}
.rcard .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .46s var(--ease)}
.rcard.flipped .inner{transform:rotateY(180deg)}
.rcard{box-shadow:0 10px 26px -16px rgba(0,0,0,.9)}
.rcard .face{position:absolute;inset:0;border-radius:4.6%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 2px 0 rgba(0,0,0,.5);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:flat;
  transform:rotateY(0deg);background:#0A0D11}
.rcard .front{transform:rotateY(180deg)}
.rcard .front img{width:100%;height:100%;object-fit:cover}
.rcard.gone{transform:translate(-190%,-22%) rotate(-26deg) scale(.82)!important;
  opacity:0;pointer-events:none}
/* Пока верхняя карта перевёрнута, стопку под ней прячем: её рубашка
   торчала из-за краёв и читалась как «чёрная карта с покеболлом».
   Именно visibility, а не opacity: с прозрачностью следующая карта
   потом плавно проявлялась из нуля прямо на месте предыдущей. */
.deck.revealed .rcard:not(.flipped){visibility:hidden}

/* рубашка рисуется самой гранью — вложенный слой пробивался сквозь лицевую сторону */
.cardback{border:1px solid rgba(255,255,255,.13);
  background:radial-gradient(72% 56% at 50% 42%,#2E56A8 0%,#16346E 55%,#0B1C42 100%);
  display:grid;place-items:center}
.cardback::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 7px)}
.cardback svg{width:52%;position:relative;z-index:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}

.flare{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);
  pointer-events:none;opacity:0;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,var(--fc,#fff) 0%,transparent 62%)}
.flare.on{animation:flarePop .9s var(--ease)}
@keyframes flarePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  22%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.rays{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);
  pointer-events:none;opacity:0;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 6deg,var(--fc,#fff) 6deg 8deg,transparent 8deg 22deg);
  mask-image:radial-gradient(circle,transparent 26%,#000 42%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle,transparent 26%,#000 42%,transparent 74%)}
.rays.on{animation:raySpin 1.15s var(--ease)}
@keyframes raySpin{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.5)}
  25%{opacity:.55}100%{opacity:0;transform:translate(-50%,-50%) rotate(60deg) scale(1.25)}}

.pips{display:flex;gap:6px;justify-content:center}
.pip{width:20px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s,box-shadow .3s}
.pip.on{background:var(--pc,#fff);box-shadow:0 0 10px -1px var(--pc,#fff)}
.nameplate{text-align:center;min-height:56px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.nameplate .nm{font-family:"Unbounded",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.03em}
.nameplate.in{animation:npIn .4s var(--ease)}
@keyframes npIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.chasebanner{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20;opacity:0}
.chasebanner.on{animation:cb 1.6s var(--ease)}
.chasebanner .txt{font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(34px,9vw,84px);
  letter-spacing:.06em;color:#fff;text-shadow:0 0 40px var(--fc,#fff),0 0 90px var(--fc,#fff)}
@keyframes cb{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1)}
  70%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.3)}}

.summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:820px;width:100%}
.summary-grid .card{--cw:100%;width:100%;animation:sgIn .45s var(--ease) backwards}
@keyframes sgIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.sumline{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center}
.sumline .tot{font-family:"Unbounded",sans-serif;font-weight:600;font-size:22px;letter-spacing:-.03em}

/* ============ КОЛЛЕКЦИЯ ============ */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.fchip{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.fchip:hover{border-color:var(--line-2);color:var(--ink)}
.fchip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.fchip .ct{font-family:"JetBrains Mono",monospace;font-size:11px;opacity:.6}
.binder{background:var(--sunken);border:1px solid var(--line);border-radius:var(--rad);padding:18px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.binder .holder{position:relative}
.binder .card{--cw:100%;width:100%;cursor:zoom-in}
.binder .card:hover{transform:translateY(-5px)}
.qty{position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--ground);
  font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;z-index:4}
.empty-state{text-align:center;padding:52px 20px;color:var(--ink-3);display:flex;flex-direction:column;
  align-items:center;gap:8px}

.lightbox{position:fixed;inset:0;z-index:260;background:rgba(4,6,10,.88);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lightbox .card{--cw:min(400px,80vw)}
.lightbox .card.foil::before,.lightbox .card.foil::after,
.cardview .card.foil::before,.cardview .card.foil::after{animation-play-state:running}

/* ============ БАРАХОЛКА ============ */
.mkt{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.listing{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .14s}
.listing:hover{background:var(--raised)}
.listing.sel{background:var(--raised);box-shadow:inset 2px 0 0 var(--gold)}
.listing:last-child{border-bottom:0}
.listing .mini{width:52px;aspect-ratio:63/96;border-radius:6px;border:1px solid rgba(255,255,255,.12);
  position:relative;overflow:hidden}
.listing .ttl{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.listing .meta{color:var(--ink-3);font-size:12px;margin-top:4px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.listing .pr{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:15px;color:var(--gold);text-align:right}
.listing .off{font-size:11px;color:var(--ok);text-align:right;margin-top:2px}
.badge{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:2px 6px;
  border-radius:5px;border:1px solid var(--line-2);color:var(--ink-2)}
.badge.seal{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.risk{display:flex;align-items:center;gap:7px}
.riskbar{width:52px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.riskbar i{display:block;height:100%;border-radius:2px}
.risk .rl{font-size:11px;font-weight:600}
.r-low i{width:22%;background:var(--ok)}.r-low .rl{color:var(--ok)}
.r-mid i{width:58%;background:var(--warn)}.r-mid .rl{color:var(--warn)}
.r-high i{width:88%;background:var(--bad)}.r-high .rl{color:var(--bad)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin:14px 0}
.kv>div{background:var(--surface);padding:11px}
.kv .n{font-family:"JetBrains Mono",monospace;font-size:17px;font-weight:700;margin-top:3px}
.verify{border:1px solid var(--line);border-radius:var(--rad-s);background:var(--sunken);padding:14px;margin-top:14px}
.vres{padding:12px;border-radius:var(--rad-s);font-size:13px;font-weight:600;display:flex;gap:9px;align-items:flex-start}
.vres.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.vres.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.vres span{font-weight:400;color:var(--ink-2);display:block;margin-top:4px;font-size:12px;line-height:1.45}

/* ============ ПАК-БАТТЛ: ЛОББИ ============ */
.lobby{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}
.seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.seat{border:1px solid var(--line);border-radius:var(--rad-s);background:var(--sunken);padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;min-height:134px;justify-content:center;text-align:center}
.seat.filled{background:var(--surface);border-color:var(--line-2)}
.seat .ava{width:40px;height:40px;border-radius:12px;font-size:15px}
.seat .nm{font-weight:600;font-size:13px}
.seat .rk{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3)}
.tag{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:5px;padding:1px 5px}
.code-row{display:flex;gap:8px;align-items:center;margin-top:16px}
.code-row .code{flex:1;font-family:"JetBrains Mono",monospace;font-size:16px;font-weight:700;letter-spacing:.18em;
  background:var(--sunken);border:1px dashed var(--line-2);border-radius:9px;padding:9px 12px;text-align:center}
.paytable{display:grid;gap:0;font-size:12px;color:var(--ink-2)}
.paytable div{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.paytable div:last-child{border-bottom:0}
.paytable b{font-family:"JetBrains Mono",monospace;color:var(--ink)}
/* клавиша в справке по горячим клавишам */
.paytable b.hk{background:var(--sunken);border:1px solid var(--line-2);border-radius:6px;
  padding:2px 8px;font-size:11.5px;color:var(--gold)}

/* ============ ПАК-БАТТЛ: АРЕНА ============ */
.arena{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1120px}
.fighters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fighter{border:1px solid rgba(255,255,255,.09);border-radius:var(--rad);background:rgba(255,255,255,.025);
  padding:12px;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;
  transition:border-color .3s,background .3s,opacity .4s,filter .4s}
.fighter .fh{display:flex;align-items:center;gap:9px;min-width:0}
.fighter .nm{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fighter.me{border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  background:color-mix(in srgb,var(--gold) 6%,transparent)}
.fighter.hit{animation:fhit .4s var(--ease)}
@keyframes fhit{0%{transform:none}25%{transform:translateX(-7px) scale(.98);filter:brightness(1.6)}
  60%{transform:translateX(4px)}100%{transform:none}}
.fighter.ko{opacity:.34;filter:grayscale(1)}
.fighter .kostamp{position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Unbounded",sans-serif;font-weight:800;font-size:30px;letter-spacing:.1em;color:var(--bad);
  text-shadow:0 0 24px color-mix(in srgb,var(--bad) 70%,transparent);transform:rotate(-11deg);
  background:rgba(6,9,12,.5)}
.fighter.win{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);
  box-shadow:0 0 34px -8px color-mix(in srgb,var(--gold) 55%,transparent)}

.hpwrap{position:relative;height:9px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden}
.hpwrap .ghost{position:absolute;inset:0;width:100%;background:var(--bad);opacity:.5;
  transition:width .85s .28s cubic-bezier(.4,0,.2,1)}
.hpwrap .real{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#2FBE8C,#5BE0AE);
  transition:width .3s var(--ease)}
.fighter.low .hpwrap .real{background:linear-gradient(90deg,#E09020,#FFB84D)}
.fighter.crit .hpwrap .real{background:linear-gradient(90deg,#D63A32,#FF6A62)}
.hpn{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3)}
.hpn b{color:var(--ink)}
.slotrow{display:flex;gap:4px;min-height:44px;align-items:center;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.slotrow::-webkit-scrollbar{display:none}
.slotrow .card{--cw:28px;border-radius:3px;box-shadow:none}
.pulled{display:grid;place-items:center;min-height:158px}
.pulled .card{--cw:112px;animation:pIn .3s var(--ease) backwards}
@keyframes pIn{from{opacity:0;transform:translateY(10px) scale(.9) rotateY(32deg)}to{opacity:1;transform:none}}
.dmgpop{position:absolute;left:50%;top:34%;transform:translateX(-50%);font-family:"Unbounded",sans-serif;
  font-weight:800;font-size:26px;color:var(--bad);text-shadow:0 2px 14px rgba(0,0,0,.9);pointer-events:none;
  animation:dpop 1.1s var(--ease) forwards;z-index:12}
@keyframes dpop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.6)}
  20%{opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.15)}
  40%{transform:translateX(-50%) translateY(-6px) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-42px) scale(.95)}}
.roundbar{display:flex;align-items:center;gap:12px;justify-content:center}
.rpips{display:flex;gap:4px}
.rpip{width:15px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.rpip.on{background:var(--gold)}
.clog{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--ink-2);height:19px;text-align:center;
  overflow:hidden}
.clog b{color:var(--ink)}

/* ============ АРКАДА ============ */
.arcade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.nodonate{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--rad-s);
  border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent);
  font-size:12.5px;color:var(--ink-2);margin-bottom:20px}
.nodonate b{color:var(--ok)}

/* самолётик */
.sky{position:relative;height:290px;border-radius:var(--rad);overflow:hidden;background:#080B10;
  border:1px solid var(--line)}
.sky canvas{position:absolute;inset:0;width:100%;height:100%}
.skyhud{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center}
.mult{font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(38px,7vw,60px);letter-spacing:-.045em;
  text-shadow:0 4px 40px rgba(0,0,0,.7);line-height:1}
.mult.crash{color:var(--bad)}
.skystate{font-size:12px;color:var(--ink-2);margin-top:8px;letter-spacing:.04em}
.countdown{font-family:"Unbounded",sans-serif;font-weight:600;font-size:40px;letter-spacing:-.03em}
.cdbar{width:min(240px,60%);height:3px;border-radius:2px;background:rgba(255,255,255,.12);margin:12px auto 0;overflow:hidden}
.cdbar i{display:block;height:100%;background:var(--gold);width:100%}
.betrow{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.inp{height:40px;border-radius:11px;background:var(--sunken);border:1px solid var(--line);padding:0 12px;
  font-family:"JetBrains Mono",monospace;font-weight:600;font-size:14px;width:104px}
.inp:focus{border-color:var(--line-2);outline:none}
.qbet{display:flex;gap:6px}
.qbet button{height:40px;padding:0 11px;border-radius:10px;border:1px solid var(--line);background:var(--sunken);
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-2)}
.qbet button:hover{color:var(--ink);border-color:var(--line-2)}
.hist{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.hx{font-family:"JetBrains Mono",monospace;font-size:11px;padding:3px 8px;border-radius:7px;
  border:1px solid var(--line);color:var(--ink-2)}
.hx.g{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.hx.r{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.hx.new{animation:hxIn .4s var(--ease)}
@keyframes hxIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.bets{max-height:196px;overflow-y:auto}
.brow{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
.brow:last-child{border-bottom:0}
.brow .bn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .bs{font-family:"JetBrains Mono",monospace;color:var(--ink-3);font-size:11.5px}
.brow .bx{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:12px}
.brow.out .bx{color:var(--ok)}
.brow.lost{opacity:.42}
.brow.lost .bx{color:var(--bad)}
.brow.mine{background:color-mix(in srgb,var(--gold) 8%,transparent);box-shadow:inset 2px 0 0 var(--gold)}

/* слоты */
.machine{background:var(--sunken);border:1px solid var(--line);border-radius:var(--rad);padding:14px;position:relative;overflow:hidden}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative}
.reel{height:198px;border-radius:var(--rad-s);background:#090C11;border:1px solid var(--line);overflow:hidden;position:relative}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.sym{height:66px;display:grid;place-items:center}
.sym svg{width:38px;height:38px}
.payline{position:absolute;left:0;right:0;top:66px;height:66px;border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);pointer-events:none;z-index:3}
.payline::before,.payline::after{content:"";position:absolute;top:50%;width:7px;height:7px;
  transform:translateY(-50%) rotate(45deg);background:var(--gold);opacity:.5}
.payline::before{left:-4px}.payline::after{right:-4px}
.reel.win{box-shadow:0 0 0 1px var(--gold),0 0 26px -6px var(--gold)}
.reel.win .sym.mid{animation:symWin .6s var(--ease) 2}
@keyframes symWin{50%{transform:scale(1.25)}}
/* ---- раскопки ---- */
.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--rad);padding:10px}
.mcell{aspect-ratio:1;border-radius:9px;border:1px solid var(--line-2);background:var(--raised);
  display:grid;place-items:center;font-size:15px;line-height:1;
  transition:background .14s,border-color .14s,transform .12s}
.mcell:hover:not(:disabled){background:#222A34;border-color:var(--ink-3)}
.mcell:active{transform:scale(.94)}
/* открытая пустая клетка: подтверждение, что шаг прошёл */
.mcell.safe{background:color-mix(in srgb,var(--ok) 20%,var(--sunken));
  border-color:color-mix(in srgb,var(--ok) 45%,transparent);animation:mpop .22s var(--ease)}
.mcell.safe::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.mcell.trap{background:color-mix(in srgb,var(--bad) 14%,var(--sunken));
  border-color:color-mix(in srgb,var(--bad) 32%,transparent);color:var(--bad);opacity:.65}
.mcell.boom{background:color-mix(in srgb,var(--bad) 34%,var(--sunken));
  border-color:var(--bad);color:#fff;animation:mshake .34s}
@keyframes mpop{from{transform:scale(.8);opacity:.4}to{transform:none;opacity:1}}
@keyframes mshake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.trapsel button.on{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  background:color-mix(in srgb,var(--gold) 12%,var(--sunken))}

/* ---- больше-меньше ---- */
.hlstage{position:relative;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--rad);height:168px;display:grid;place-items:center;overflow:hidden}
.hlcard{width:104px;height:140px;border-radius:12px;border:1px solid var(--line-2);
  background:linear-gradient(160deg,var(--raised),var(--sunken));
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-weight:700;
  font-size:46px;color:var(--ink);box-shadow:0 16px 30px -20px #000;
  transition:border-color .2s,color .2s}
.hlcard.good{border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok)}
.hlcard.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}
/* следующий ранг выезжает сбоку и подменяет текущий */
.hlcard.ghost{position:absolute;opacity:0;transform:translateX(96px) scale(.9);pointer-events:none}
.hlcard.ghost.show{opacity:1;transform:translateX(0) scale(1);transition:all .42s var(--ease)}
.hlpicks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.hlb{height:44px}
.hlb b{font-family:"JetBrains Mono",monospace;color:var(--gold);font-weight:700}
.hlb:disabled{opacity:.4}
.hlb:disabled b{color:var(--ink-3)}

.winbanner{text-align:center;font-family:"Unbounded",sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-.02em;min-height:26px;margin-top:12px}
.winbanner.on{animation:npIn .35s var(--ease)}

/* ============ ЛИДЕРБОРД ============ */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.pod{border:1px solid var(--line);border-radius:var(--rad);background:var(--surface);padding:18px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.pod.p1{border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 11%,var(--surface)),var(--surface))}
.pod .rank{font-family:"Unbounded",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.04em}
.pod.p1 .rank{color:var(--gold)}
.pod .ava{width:46px;height:46px;border-radius:14px;font-size:17px}
.tscroll{overflow-x:auto;border-radius:var(--rad)}
table.lb{width:100%;min-width:560px;border-collapse:collapse;font-size:13px}
table.lb th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line)}
table.lb td{padding:11px 14px;border-bottom:1px solid var(--line)}
table.lb tr:last-child td{border-bottom:0}
table.lb tr.me{background:color-mix(in srgb,var(--gold) 8%,transparent)}
table.lb tr.me td:first-child{box-shadow:inset 2px 0 0 var(--gold)}
table.lb .n{font-family:"JetBrains Mono",monospace;color:var(--ink-3)}
table.lb .val{font-family:"JetBrains Mono",monospace;text-align:right;font-weight:500}

/* ============ ВХОД ============ */
/* Первый экран для всех, кто пришёл по ссылке: он и форма, и витрина.
   Слева — что это вообще такое, справа — ник с паролем. На узком экране
   витрина уходит, форма остаётся одна. */
.login{position:fixed;inset:0;z-index:300;overflow-y:auto;background:var(--ground-2);
  display:grid;place-items:center;padding:clamp(18px,4vw,44px);
  padding-bottom:calc(clamp(18px,4vw,44px) + env(safe-area-inset-bottom))}
/* Свет как в зале вскрытия: тёплое золото сверху и холодный отблеск снизу. */
.login::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 42% at 22% 8%, rgba(255,201,51,.13), transparent 70%),
    radial-gradient(46% 46% at 88% 92%, rgba(76,141,246,.12), transparent 72%),
    radial-gradient(85% 70% at 50% 40%, #141B24, #0A0D11 62%, #04060A)}
.loginwrap{position:relative;width:100%;max-width:940px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,392px);gap:clamp(28px,5vw,64px);align-items:center;
  animation:loginIn .5s var(--ease) both}
@keyframes loginIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- витрина слева ---- */
.loginpitch{display:flex;flex-direction:column;gap:20px;min-width:0}
.brandrow{display:flex;align-items:center;gap:12px}
.brandmark{width:40px;height:40px;flex:none}
.brandrow .pkm{font-size:29px}
.loginpitch h1{font-family:"Unbounded",sans-serif;font-weight:600;letter-spacing:-.04em;
  font-size:clamp(27px,3.4vw,38px);line-height:1.1;max-width:15ch}
.loginpitch h1 em{font-style:normal;color:var(--gold)}
.loginpitch>p{color:var(--ink-2);font-size:14px;max-width:42ch}

/* Веер карт: три силуэта редкостей — обещание того, что внутри пака. */
.fan{position:relative;height:132px;margin-top:2px}
.fan i{position:absolute;bottom:0;left:26px;width:88px;height:122px;border-radius:9px;transform-origin:50% 100%;
  border:1px solid color-mix(in srgb,var(--fc) 42%,transparent);
  background:linear-gradient(158deg,color-mix(in srgb,var(--fc) 30%,var(--surface)),var(--sunken) 72%);
  box-shadow:0 18px 30px -20px #000}
.fan i::after{content:"";position:absolute;inset:7px 7px auto;height:52px;border-radius:5px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--fc) 34%,transparent),transparent 68%)}
.fan i:nth-child(1){--fc:var(--r-rare);transform:rotate(-15deg) translateX(2px)}
.fan i:nth-child(2){--fc:var(--r-ultra);transform:rotate(-1deg) translateX(58px)}
.fan i:nth-child(3){--fc:var(--gold);transform:rotate(13deg) translateX(112px)}

/* ---- карточка формы ---- */
.loginbox{width:100%;background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line);border-radius:var(--rad-l);padding:26px 24px 22px;
  display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -40px rgba(0,0,0,.9)}
.loginbox h2{font-family:"Unbounded",sans-serif;font-weight:600;font-size:21px;letter-spacing:-.03em}
.loginbox .sub{color:var(--ink-2);font-size:12.5px;line-height:1.5;margin-top:5px}
.loginhead{margin-bottom:2px}
/* На широком экране логотип уже слева, в карточке он лишний. */
.loginhead .brandrow{display:none;margin-bottom:16px}

.fld{display:flex;flex-direction:column;gap:6px}
.fld-l{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.fld-b{position:relative;display:flex;align-items:center;height:46px;border-radius:12px;
  background:var(--sunken);border:1px solid var(--line-2);
  transition:border-color .16s,background .16s,box-shadow .16s}
.fld-b:focus-within{border-color:var(--gold);background:var(--ground-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 15%,transparent)}
.fld-b.bad{border-color:var(--bad)}
.fld-i{flex:1;min-width:0;height:100%;background:none;border:0;padding:0 14px;font-size:15px;font-weight:600;
  outline:none}
.fld-i::placeholder{color:var(--ink-3);font-weight:400}
.fld-i:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 40px var(--sunken) inset}
/* Пароль восстановить нечем — дать его увидеть важнее привычной звёздочки. */
.eye{width:40px;height:100%;display:grid;place-items:center;color:var(--ink-3);flex:none;
  transition:color .16s}
.eye:hover{color:var(--ink)}
.eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Статус ника: занят / свободен / проверяем — прямо в поле, без прыжков вёрстки. */
.fld-st{width:34px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
.fld-st svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fld-st.ok{color:var(--ok)}
.fld-st.info{color:var(--ink-2)}
.fld-st.warn{color:var(--warn)}
.fld-st .spinner{width:14px;height:14px;border-width:2px}

.loginhint{font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.loginhint:empty{display:none}
.loginhint.warn{color:var(--warn)}
.loginhint.ok{color:var(--ok)}
.loginhint b{color:var(--gold)}
.loginerr{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--bad);
  background:color-mix(in srgb,var(--bad) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 32%,transparent);
  border-radius:10px;padding:9px 12px}
.loginerr:empty{display:none}
.loginerr::before{content:"!";font-weight:800;font-size:11px;width:16px;height:16px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--bad);color:var(--ground)}
/* Крепость пароля — три деления: длина, регистр, не-буквы. */
.pwbar{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3)}
.pwbar i{height:3px;flex:1;border-radius:2px;background:var(--line-2);transition:background .2s}
.pwbar.s1 i:nth-child(-n+1),.pwbar.s2 i:nth-child(-n+2){background:var(--warn)}
.pwbar.s3 i{background:var(--ok)}
.pwbar span{flex:none;min-width:7ch;text-align:right}
.loginbox .btn.lg{width:100%;margin-top:2px}

.gift{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--ink-2);
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,transparent);
  border-radius:11px;padding:11px 13px;text-align:left}
.loginfoot{border-top:1px solid var(--line);padding-top:13px;margin-top:2px;
  display:flex;flex-direction:column;gap:7px}
.loginnote,.loginlegal{font-size:11px;line-height:1.5;color:var(--ink-3)}
.loginlegal button{color:var(--ink-2);font-size:11px;font-weight:500;
  border-bottom:1px solid var(--line-2)}
.loginlegal button:hover{color:var(--ink)}

@media (max-width:820px){
  .loginwrap{grid-template-columns:minmax(0,392px);justify-content:center;gap:0}
  .loginpitch{display:none}
  .loginhead .brandrow{display:flex}
  .loginbox{padding:24px 20px 20px}
}
@media (prefers-reduced-motion:reduce){ .loginwrap{animation:none} }

/* ============ ЗАДАНИЯ ДНЯ ============ */
.qskel{font-size:12.5px;color:var(--ink-3);padding:4px 0}
.qrow{padding:12px 0;border-bottom:1px solid var(--line)}
.qrow:first-child{padding-top:0}
.qrow:last-child{border-bottom:0;padding-bottom:0}
.qhead{display:flex;align-items:baseline;gap:10px}
.qhead .qt{flex:1;font-size:13px;font-weight:600;color:var(--ink)}
.qhead b{color:var(--gold);font-size:12.5px;flex:none}
.qnote{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.qprog{display:flex;align-items:center;gap:9px;margin-top:9px}
.qprog span{font-size:11px;color:var(--ink-3);flex:none}
.qbar{flex:1;height:5px;border-radius:3px;background:var(--sunken);
  border:1px solid var(--line);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--gold);border-radius:3px;
  transition:width .35s var(--ease)}
/* выполнено, но не забрано — подсвечиваем, иначе награду не замечают */
.qrow.done .qbar i{background:var(--ok)}
.qrow.done .qt{color:var(--ok)}
.qrow .btn.sm{margin-top:10px}
/* обмен — второстепенное действие: не должен спорить с «Забрать награду» */
.qswap{width:100%;font-size:12px;color:var(--ink-3)}
.qswap:hover:not(:disabled){color:var(--ink-2)}
.qrow.got{opacity:.5}
.qrow.got .qbar i{background:var(--ink-3)}
.qdone{margin-top:9px;font-size:11.5px;color:var(--ok)}

/* ============ ПРОЧЕЕ ============ */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--ink);color:var(--ground);padding:11px 18px;border-radius:11px;font-weight:600;font-size:13px;
  z-index:400;transition:transform .32s var(--ease);box-shadow:0 16px 34px -16px rgba(0,0,0,.7);max-width:88vw}
.toast.on{transform:translateX(-50%) translateY(0)}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--gold);
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:1000px){
  .home,.mkt,.lobby,.arcade{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero .packart{justify-self:start}
  .fighters{grid-template-columns:repeat(2,1fr)}
  .summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:760px){ .homesplit{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;bottom:0;top:auto;left:0;right:0;height:58px;width:100%;flex-direction:row;
    justify-content:space-around;border-right:0;border-top:1px solid var(--line);padding:0 4px;
    height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .mark,.navb .tip,.rail .sp,.railpos{display:none}
  .navb[aria-current="page"]::before{left:14px;right:14px;top:auto;bottom:3px;width:auto;height:2px}
  .view{padding:18px 15px 92px}
  .topbar{padding:0 14px;gap:8px}
  .wordmark{font-size:18px}
  .streak{display:none}
  .summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .podium{grid-template-columns:1fr;gap:8px}
  .pod{flex-direction:row;text-align:left;padding:12px 14px;gap:12px}
  .pod .ava{width:34px;height:34px;border-radius:10px;font-size:13px}
  .pod .rank{font-size:18px;width:22px;flex:none}
  .pod>*{min-width:0}
  .pod>span:nth-child(3){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pod>span:nth-child(4){display:none}
  .code-row{flex-wrap:wrap}
  .code-row .code{flex:1 0 100%}
  .stage-body{padding:10px}
  .fighter .kostamp{font-size:22px}
  .pulled .card{--cw:80px}
  .pulled{min-height:118px}
  .fighter{padding:10px;gap:7px}
  .slotrow .card{--cw:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============ ПРОСМОТР КАРТЫ ============ */
.cardview{position:fixed;inset:0;z-index:280;background:rgba(4,6,10,.9);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:24px;overflow:auto}
.cv-close{position:fixed;top:18px;right:18px;width:36px;height:36px;border-radius:11px;
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);background:var(--surface);z-index:2}
.cv-close:hover{color:var(--ink);background:var(--raised)}
.cv-sheet{display:grid;grid-template-columns:auto minmax(0,380px);gap:28px;align-items:start;
  max-width:840px;width:100%;margin:auto}
.cv-stage{display:grid;place-items:center;perspective:1100px}
.cv-meta{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);
  padding:20px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.cv-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.cv-name{font-family:"Unbounded",sans-serif;font-weight:600;font-size:22px;letter-spacing:-.035em;line-height:1.1}
.cv-sub{font-size:12px;color:var(--ink-3);margin-top:5px}
.cv-body{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.cv-load{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3)}
.cv-empty{font-size:12.5px;color:var(--ink-3)}
.cv-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hpbig{font-size:19px;font-weight:700}
.tchip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;color:var(--tc);
  background:color-mix(in srgb,var(--tc) 15%,transparent);border:1px solid color-mix(in srgb,var(--tc) 34%,transparent)}
.cv-line{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:var(--ink-2)}
.cv-line .lbl{flex:none;width:74px}
.cv-ability,.cv-attack{border-top:1px solid var(--line);padding-top:11px}
.cv-atk-h{display:flex;align-items:center;gap:8px;font-size:13.5px}
.cv-atk-h b{font-weight:600}
.cv-atk-h .sp{flex:1}
.cv-atk-h .dmg{font-weight:700;font-size:15px}
.abadge{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:2px 6px;
  border-radius:5px;color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent)}
.ecost{width:13px;height:13px;border-radius:50%;background:var(--tc);display:inline-block;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);margin-right:2px}
.costs{display:inline-flex;flex:none}
.cv-ability p,.cv-attack p{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.cv-def{display:grid;gap:5px;border-top:1px solid var(--line);padding-top:11px;font-size:12.5px}
.cv-def>div{display:flex;gap:10px;align-items:baseline}
.cv-def .lbl{flex:none;width:118px}
.cv-flavor{font-size:12.5px;color:var(--ink-3);font-style:italic;border-left:2px solid var(--line-2);
  padding-left:11px;line-height:1.5}
.cv-tail{font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:11px}
.cv-foot{display:flex;gap:26px;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}

/* ============ МАГАЗИН: поиск ============ */
.searchin{height:36px;border-radius:10px;background:var(--sunken);border:1px solid var(--line);
  padding:0 13px;font-size:13px;min-width:min(280px,100%);flex:1}
.searchin:focus{border-color:var(--line-2);outline:none}
.searchin::placeholder{color:var(--ink-3)}
.selin{height:32px;border-radius:9px;background:var(--surface);border:1px solid var(--line);
  padding:0 9px;font-size:12.5px;color:var(--ink-2);max-width:230px}
.morewrap{display:flex;justify-content:center;margin-top:20px}
.pkstate{margin-top:6px;opacity:.7}
.listing .mini img{width:100%;height:100%;object-fit:contain;padding:6px}

/* ============ БАТТЛ: подпись вытащенного ============ */
.pullmeta{display:flex;align-items:center;gap:7px;min-height:22px;font-size:12px}
.pullmeta .pmname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.pullmeta .pmdmg{font-weight:700;color:var(--bad);flex:none}
.slotcard{box-shadow:inset 0 0 0 1px var(--rc)!important}
.pulled .card{cursor:zoom-in}

/* ============ ВСКРЫТИЕ: обёртки ============ */
.deckcol{display:flex;flex-direction:column;align-items:center;gap:18px}
.sumwrap{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.npmeta{display:flex;gap:8px;align-items:center;justify-content:center}
.rcard .front .card{position:absolute;inset:0;width:auto;border-radius:inherit;box-shadow:none;background:none}
.sealed .packwrap .half{transition:transform .12s ease-out}
.sealed.dragging .packwrap .half{transition:none}

@media (max-width:820px){
  .cv-sheet{grid-template-columns:minmax(0,1fr);gap:18px}
  .cv-stage{order:-1}
}

/* ============ КНОПКА-ДУБЛЁР ПРОБЕЛА ============ */
.spacebtn kbd{border-color:rgba(0,0,0,.25);color:inherit;opacity:.7;margin-left:2px}

/* ============ АПГРЕЙДЕР ============ */
.upg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px) minmax(0,1fr);gap:18px;align-items:start}
.stake{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.stake .card{flex:none;perspective:800px}
.stakemeta{min-width:0}
.pickitem{position:relative;flex:none;border-radius:8px;padding:3px;border:1px solid transparent;
  cursor:pointer;transition:border-color .15s,transform .15s}
.pickitem:hover{transform:translateY(-3px)}
.pickitem.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.pickitem .qty{top:-2px;right:-2px}

.wheelbox{display:flex;flex-direction:column;align-items:center;gap:16px}
.wheel{position:relative;width:min(240px,62vw);aspect-ratio:1}
.wheel svg{width:100%;height:100%;transform:rotate(0deg)}
.wtrack{stroke:rgba(255,255,255,.07)}
.wwin{stroke:var(--gold);stroke-dasharray:0 999;transition:stroke-dasharray .35s var(--ease)}
.needle{position:absolute;inset:0;display:grid;place-items:start center;padding-top:2px;
  transform:rotate(0deg);transform-origin:50% 50%}
.needle i{display:block;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:16px solid var(--ink);filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
/* Проценты и кратность стоят одним блоком в центре кольца. Раньше здесь был
   grid c двумя авто-строками: строки растягивались на всю высоту круга, и
   подпись уезжала к нижнему краю, будто она отдельно от числа. */
.wcenter{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;text-align:center;pointer-events:none}
.wpct{font-family:"Unbounded",sans-serif;font-weight:700;font-size:30px;letter-spacing:-.04em;line-height:1}
.wmul{margin-top:0}
.wresult{min-height:44px;text-align:center}
.upres{padding:11px 14px;border-radius:var(--rad-s);font-size:13.5px;font-weight:600}
.upres span{display:block;font-weight:400;font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.upres.win{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.upres.lose{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}

.targets{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:430px;overflow-y:auto}
.tgt{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:7px 9px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .14s,border-color .14s}
.tgt:hover{background:var(--raised)}
.tgt.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.tgtmeta{min-width:0}
.tgt .tn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgt .tm{font-size:11px;color:var(--ink-3);margin-top:2px}
.tgtch{font-size:13.5px;font-weight:700;color:var(--gold)}

/* ============ ШАНСЫ ============ */
.vsub{margin:28px 0 16px}
.vsub h2{font-family:"Unbounded",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.03em}
.oddsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;
  align-items:stretch}
.oddsgrid > .panel{display:flex;flex-direction:column}
.oddsgrid > .panel > .panel-b{flex:1;display:flex;flex-direction:column}
.oddsgrid > .panel .note{margin-top:auto;padding-top:14px}
.oddsgrid .paytable{margin-top:0}
/* Секция игр: панели разной длины по своей природе, и растяжка до самой высокой
   оставляла внутри коротких дыру в две сотни пикселей. Здесь берём натуральную
   высоту — пустота уходит между карточками, а не внутрь них. Верхняя секция
   остаётся растянутой: там панели близки по высоте и ровный низ им идёт. */
.oddsgrid.natural{align-items:start}
.oddsgrid.natural > .panel .note{margin-top:14px}
/* Компактная таблица шансов: колонки вместо стопки одинаковых таблиц.
   Число колонок задаётся на месте — сетка одна, содержимое разное. */
.oddstab{display:grid;font-size:12px;color:var(--ink-2);align-items:center}
.oddstab > *{padding:6px 0;border-bottom:1px solid var(--line)}
.oddstab > .last{border-bottom:0}
.oddstab .h{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.oddstab b{font-family:"JetBrains Mono",monospace;color:var(--ink);font-weight:500;
  text-align:right;font-size:11.5px}
.oddstab b .c{color:var(--ink-3);font-size:10.5px}
.oddstab .k{color:var(--ink-2)}
.oddstab .gapcol{border-bottom:0}

.bigodds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bigodds .v{font-family:"Unbounded",sans-serif;font-weight:600;font-size:21px;letter-spacing:-.035em;margin-top:6px}
.bigodds .sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.note{font-size:12px;color:var(--ink-3);line-height:1.55;margin:14px 0}
.note code{font-family:"JetBrains Mono",monospace;font-size:11px;background:var(--sunken);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink-2)}
/* шапка таблицы рангов: подписи столбцов, а не строка данных */
.paytable .hlhead span,.paytable .hlhead b{font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;font-family:inherit}
.formula{background:var(--sunken);border:1px solid var(--line);border-radius:var(--rad-s);
  padding:12px 14px;font-size:12.5px;color:var(--ink);text-align:center}
.slotlist{display:flex;flex-direction:column;gap:7px}
.slotrow2{display:grid;grid-template-columns:26px minmax(0,1fr) 92px;gap:11px;align-items:center}
.snum{font-size:11px;color:var(--ink-3)}
.sbars{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--sunken)}
.sbar{height:100%;min-width:1px}
.slab{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-2);text-align:right}

@media (max-width:1100px){ .upg{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .bigodds{grid-template-columns:1fr;gap:10px}
  .slotrow2{grid-template-columns:22px minmax(0,1fr) 76px}
}
/* девять пунктов в мобильной панели — даём прокрутку, чтобы не сплющивались */
@media (max-width:700px){
  .rail{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:0}
  .rail::-webkit-scrollbar{display:none}
  .navb{flex:1 0 auto;min-width:44px;width:44px}
}

/* ============ ПРОФИЛЬ ============ */
.profhead{display:flex;align-items:center;gap:18px;padding:22px;border-radius:var(--rad-l);
  border:1px solid var(--line);background:var(--sunken);margin-bottom:18px;flex-wrap:wrap}
.bigava{width:72px;height:72px;border-radius:22px;background:var(--raised);border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:"Unbounded",sans-serif;font-weight:800;font-size:28px;
  color:var(--ink-2);flex:none}
.pinfo{min-width:0;flex:1}
.pinfo h1{font-family:"Unbounded",sans-serif;font-weight:600;font-size:26px;letter-spacing:-.035em;
  overflow:hidden;text-overflow:ellipsis}
.psub{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.pacts{display:flex;gap:8px;flex-wrap:wrap}
.stats4{grid-template-columns:repeat(4,1fr)}
@media (max-width:640px){ .stats4{grid-template-columns:1fr 1fr} }
.pstats{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
.profgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:18px;align-items:start}
/* журнал занимает вкладку целиком — спутника рядом нет */
.profgrid.one{grid-template-columns:minmax(0,1fr)}
/* вкладки профиля: тот же чип, что у фильтров, но с воздухом сверху и снизу */
.proftabs{margin:18px 0}
.showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.showcase .card{--cw:100%;width:100%}
.showcase .card:hover{transform:translateY(-5px)}

.addrow{display:flex;gap:8px;margin-bottom:14px}
.addrow .searchin{flex:1;min-width:0;height:36px}
.friendlist{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.friend{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
.friend:last-child{border-bottom:0}
.friend .fn{flex:1;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend .fst{font-size:11.5px;color:var(--ink-3)}
.xbtn.small{width:26px;height:26px;border-radius:8px;flex:none}

.seat.fr{border-color:color-mix(in srgb,var(--ok) 42%,transparent);
  background:color-mix(in srgb,var(--ok) 7%,var(--surface))}
.seat.meseat{border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  background:color-mix(in srgb,var(--gold) 7%,var(--surface))}
.seatacts{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap;justify-content:center}
.seatacts .btn{height:26px;padding:0 9px;font-size:11.5px;border-radius:7px}

tr.clickable,.pod.clickable{cursor:pointer}
tr.clickable:hover{background:var(--raised)}
.pod.clickable:hover{border-color:var(--line-2)}

@media (max-width:1000px){ .profgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .pstats{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bigava{width:56px;height:56px;border-radius:18px;font-size:22px}
  .pinfo h1{font-size:21px}
}

/* ============ API НЕДОСТУПЕН ============ */
.apidown{max-width:460px;margin:80px auto;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:30px 24px;border-radius:var(--rad-l);
  border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  background:color-mix(in srgb,var(--warn) 6%,var(--sunken))}
.adtitle{font-family:"Unbounded",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.03em;
  color:var(--warn)}
.adtext{font-size:13px;color:var(--ink-2);line-height:1.55;max-width:44ch}
.adhint{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.adrow{display:flex;align-items:center;gap:14px;margin-top:8px}
.adauto{color:var(--ink-3)}
.apiwarn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 9%,var(--surface));color:var(--warn)}
.dot-warn{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}

/* ============ ОБУЧЕНИЕ ============ */
.tut{position:fixed;inset:0;z-index:320;pointer-events:auto}
/* Затемняет ТОЛЬКО прожектор: его огромная тень и есть фон, а вырезанное
   отверстие остаётся чётким. Отдельный слой поверх плюс backdrop-filter
   гасили и размывали в том числе то, на что показывают. */
.tut-spot{position:absolute;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,6,10,.76);
  transition:left .34s var(--ease), top .34s var(--ease),
             width .34s var(--ease), height .34s var(--ease)}
.tut-spot.on{box-shadow:0 0 0 9999px rgba(4,6,10,.76),
  0 0 0 2px var(--gold), 0 0 44px -2px var(--gold)}
.tut-box{position:absolute;width:min(360px,calc(100vw - 32px));background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--rad);padding:18px;z-index:2;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.85);animation:npIn .3s var(--ease)}
.tut-box.centered{left:50%!important;top:50%!important;transform:translate(-50%,-50%)}
.tut-art{font-size:34px;line-height:1;margin-bottom:12px}
.tut-step{margin-bottom:8px}
.tut-box h3{font-family:"Unbounded",sans-serif;font-weight:600;font-size:18px;letter-spacing:-.03em}
.tut-box p{font-size:13px;color:var(--ink-2);line-height:1.6;margin-top:9px}
.tut-box p b{color:var(--ink)}
.tut-dots{display:flex;gap:5px;margin-top:16px}
.tut-dots i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.15)}
.tut-dots i.done{background:rgba(255,255,255,.35)}
.tut-dots i.on{background:var(--gold);width:22px}
.tut-row{display:flex;align-items:center;gap:8px;margin-top:16px}
.tut-row .sp{flex:1}

/* ============ ПРОМО И РЕФЕРАЛКА ============ */
.promoout{min-height:0;margin-top:12px;font-size:13px;border-radius:var(--rad-s);line-height:1.5}
.promoout:not(:empty){padding:11px 13px}
.promoout.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.promoout.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.promoout span{display:block;font-weight:400;color:var(--ink-2);font-size:12px;margin-top:3px}
.promohist{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.prow{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 0;
  border-bottom:1px solid var(--line);color:var(--ink-2)}
.prow:last-child{border-bottom:0}
.reflink{margin-top:10px;font-size:11px;color:var(--ink-3);background:var(--sunken);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;overflow-x:auto;white-space:nowrap}
.adtext code{font-family:"JetBrains Mono",monospace;font-size:11.5px;background:var(--sunken);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px}

/* ============ ПАТИ ============ */
.partyrow{grid-template-columns:auto minmax(0,1fr) auto}
.pcode{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--gold);
  border:1px dashed color-mix(in srgb,var(--gold) 40%,transparent);border-radius:8px;padding:6px 10px}
.seat.botseat{border-style:dashed;border-color:color-mix(in srgb,var(--ink-3) 45%,transparent);
  background:var(--sunken)}
.seat.botseat .ava{font-size:18px;background:transparent;border-color:transparent}
.seat.empty .ava{font-size:16px;color:var(--ink-3)}
.tag.bot{color:var(--ink-3);border-color:var(--line-2)}
.fighter.isbot{border-style:dashed}
.fighter.isbot .nm{color:var(--ink-2)}

/* ============ ПАК ДНЯ ============ */
.freebie{display:flex;flex-direction:column;gap:14px}
.freeready,.freewait{display:flex;align-items:center;gap:14px}
.fr-art{font-size:30px;line-height:1}
.fr-art.dim{opacity:.35;filter:grayscale(1)}
.fr-t{font-weight:600;font-size:14px}
.fr-s{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.freeready{padding:2px 0}

/* ============ ПРОДАЖА ============ */
.sellbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sellinfo{font-size:12.5px;color:var(--ink-3);margin-left:4px}
.sellinfo b{color:var(--ink)}
.binder .holder .sellprice{position:absolute;left:6px;bottom:6px;font-size:10.5px;font-weight:700;
  color:var(--gold);background:rgba(6,9,12,.82);border-radius:6px;padding:2px 6px;z-index:4;
  opacity:0;transition:opacity .15s}
.binder .holder:hover .sellprice,.binder.selling .holder .sellprice{opacity:1}
.binder.selling .holder{cursor:pointer}
.binder.selling .card{transition:transform .16s,filter .16s}
.binder.selling .holder:not(.picked) .card{filter:grayscale(.45) brightness(.75)}
.binder .holder.picked .card{outline:2px solid var(--gold);outline-offset:2px;transform:translateY(-4px)}
.pickmark{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:6px;z-index:5;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--gold);color:var(--gold-ink)}
.binder .holder:not(.picked) .pickmark{background:rgba(6,9,12,.7);color:transparent;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.cv-sell{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-left:auto}

/* ============ ФИЛЬТРЫ ============ */
.toolrow{gap:8px;align-items:center;margin-bottom:12px}
.toolrow .searchin{flex:1;min-width:min(240px,100%)}
.resline{margin:0 0 12px;color:var(--ink-3)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 38%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:var(--bad)}

/* ============ АПГРЕЙДЕР: ВЫБОР СТАВКИ ============ */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;
  max-height:340px;overflow-y:auto;padding:10px 2px 4px}
.pickgrid .pickitem{position:relative;border-radius:9px;padding:3px;border:1px solid transparent;
  cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.pickgrid .pickitem:hover{transform:translateY(-3px);background:var(--raised)}
.pickgrid .pickitem.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.pickgrid .card{--cw:100%;width:100%}
.pickgrid .qty{top:-2px;right:-2px}
.pickval{display:block;text-align:center;font-size:10.5px;color:var(--gold);margin-top:3px}
.stakeqty{font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.45}
.stakeqty b{color:var(--ink)}

/* ---------- полка нераспечатанных паков ---------- */
.shelf{margin-bottom:18px}
.shelf-row{display:flex;gap:14px;padding:16px;overflow-x:auto;scrollbar-width:thin}
.shelf-item{flex:none;width:118px;display:flex;flex-direction:column;align-items:center;gap:9px}
.shelf-item .packart{cursor:default}
.shelf-meta{text-align:center;min-width:0;width:100%}
.shelf-meta .nm{font-size:12px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelf-meta .sub{font-size:10.5px;color:var(--ink-3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf-item .btn{width:100%}

/* карта, скана которой у TCGdex нет */
.card .ph.noscan{display:grid;place-content:center;gap:3px;text-align:center;
  background:linear-gradient(158deg,#232c3b,#141922);color:var(--ink-2);animation:none}
.card .ph.noscan b{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--ink)}
.card .ph.noscan i{font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}

/* ============ ПОДВАЛ ============ */
.appfoot{border-top:1px solid var(--line);padding:18px 30px 22px;display:flex;
  align-items:center;gap:14px 20px;flex-wrap:wrap;background:var(--ground-2)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.footlink{font-size:12.5px;color:var(--ink-2);font-weight:500;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.footlink:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.footlink[aria-current="page"]{color:var(--gold)}
.foot-note{font-size:11.5px;color:var(--ink-3);line-height:1.5;max-width:62ch;margin-left:auto}
.foot-note a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.foot-note a:hover{color:var(--ink)}

/* ============ ПРАВОВЫЕ СТРАНИЦЫ ============ */
.legalwrap{max-width:760px}
.legalwrap .vhead{margin-bottom:10px}
.legal-upd{display:block;margin-bottom:20px}
.legal-tldr{margin-bottom:26px}
.legal-tldr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.legal-tldr li{position:relative;padding-left:20px;font-size:13px;color:var(--ink-2);line-height:1.5}
.legal-tldr li::before{content:"";position:absolute;left:4px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.legal{display:flex;flex-direction:column;gap:26px}
.legal-sec h3{display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:600;
  letter-spacing:-.01em;margin-bottom:9px}
.legal-sec h3 .num{font-size:11px;color:var(--ink-3);font-weight:700}
.legal-b{padding-left:26px;border-left:1px solid var(--line)}
.legal-b p{font-size:13px;color:var(--ink-2);line-height:1.62;margin-bottom:9px}
.legal-b p:last-child{margin-bottom:0}
.legal-b b{color:var(--ink);font-weight:600}
.legal-b ul{list-style:none;margin:0 0 9px;padding:0;display:grid;gap:8px}
.legal-b li{position:relative;padding-left:15px;font-size:13px;color:var(--ink-2);line-height:1.55}
.legal-b li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--ink-3)}
.legal-b a{color:var(--gold);border-bottom:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.legal-b a:hover{border-bottom-color:var(--gold)}
.legal-b code{font-family:"JetBrains Mono",monospace;font-size:11.5px;background:var(--sunken);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink)}
.legal-foot{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:18px;
  border-top:1px solid var(--line);flex-wrap:wrap}

/* документ поверх экрана входа */
.legalov{position:fixed;inset:0;z-index:400;overflow-y:auto;padding:60px 24px 48px;
  background:rgba(4,6,10,.92);backdrop-filter:blur(8px)}
.legalov-box{max-width:760px;margin:0 auto}
.legalov .legalwrap{max-width:none}

/* на телефоне рельс становится нижней панелью — подвал не должен под ней прятаться */
@media (max-width:700px){
  .appfoot{padding:16px 15px calc(76px + env(safe-area-inset-bottom));gap:10px}
  .foot-note{margin-left:0}
  .legal-b{padding-left:16px}
}

/* ============ ПАК-БАТТЛ: РАУНД ============ */
/* Раунд забирает сильнейшее вскрытие — это и подсвечиваем, иначе четыре
   одновременные карты читаются как ничья. */
.fighter{transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.fighter .fh .sp{flex:1}
.fighter .crown{color:var(--gold);font-size:13px;line-height:1}
.fighter .streak{font-size:10.5px;font-weight:700;color:var(--warn);white-space:nowrap}
.fighter .hpn{display:flex;align-items:baseline;gap:5px}
.fighter .hpn .won{margin-left:auto;letter-spacing:.06em}
.pulled{position:relative}
.pulled .takes{position:absolute;left:50%;top:-9px;transform:translate(-50%,-4px);z-index:4;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:3px 9px;border-radius:20px;background:var(--rc,var(--gold));color:#0B0E12;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.fighter.takeswin{border-color:var(--rc,var(--gold));
  background:color-mix(in srgb,var(--rc,var(--gold)) 10%,transparent);transform:translateY(-3px)}
.fighter.takeswin .pulled .takes{visibility:visible;opacity:1;transform:translate(-50%,0)}
.fighter.takeswin .pulled .card{box-shadow:0 0 0 1px var(--rc), 0 14px 34px -12px var(--rc)}
.pullmeta{transition:opacity .2s}
.pullmeta.dim{opacity:.4}
.fighter.leadflash{animation:leadf .7s var(--ease)}
@keyframes leadf{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent)}
  100%{box-shadow:0 0 0 14px transparent}
}
.dmgpop.answer{font-size:15px;color:var(--warn);opacity:.9;top:52%}
.rpip.live{background:var(--ink);animation:rpipl .6s var(--ease) infinite alternate}
@keyframes rpipl{to{opacity:.45}}
.arena.done .fighters{opacity:.72;transition:opacity .4s}

/* разбор после боя */
.bsum{width:100%;margin-top:4px;display:flex;flex-direction:column;gap:2px;
  animation:pIn .35s var(--ease) backwards}
.bsum-row{display:grid;grid-template-columns:minmax(90px,1.1fr) 78px 82px 82px minmax(120px,1.6fr);
  gap:14px;align-items:center;padding:9px 12px;border-radius:var(--rad-s);font-size:12.5px;
  background:rgba(255,255,255,.025)}
.bsum-row.head{background:none;padding-top:0;padding-bottom:4px}
.bsum-row.win{background:color-mix(in srgb,var(--gold) 11%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 34%,transparent)}
.bsum-row.me .bn{color:var(--gold)}
.bsum-row .bn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsum-row .bw{font-weight:700}
.bsum-row .bd{color:var(--ok)}
.bsum-row .bt{color:var(--bad)}
.bsum-row .bbest{display:flex;flex-direction:column;gap:2px;min-width:0}
.bsum-row .bb{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:700px){
  .bsum-row{grid-template-columns:minmax(70px,1fr) 42px 60px 60px;font-size:11.5px;gap:7px;padding:8px 9px}
  .bsum-row .bbest{display:none}
}
.fighter.laststand{border-color:var(--gold);animation:leadf .9s var(--ease)}
.fighter.laststand .hpwrap .real{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}

/* ============ ЖУРНАЛ ОПЕРАЦИЙ ============ */
.ledger{display:flex;flex-direction:column;margin:14px 0}
.ledgerfoot{display:flex;align-items:center;gap:10px;margin-top:16px}
.lrow{display:grid;grid-template-columns:1fr auto 84px;align-items:center;gap:10px;
  padding:9px 2px;border-bottom:1px solid var(--line);font-size:12.5px}
.lrow:last-child{border-bottom:0}
.lwhat{color:var(--ink-2);min-width:0}
.lnote{color:var(--ink-3);font-size:11.5px}
.lwhen{white-space:nowrap;font-size:11px}
.ldelta{text-align:right;font-weight:700;color:var(--ink-3)}
.lrow.plus  .ldelta{color:var(--ok)}
.lrow.minus .ldelta{color:var(--bad)}

/* ============ ДОСТИЖЕНИЯ ============ */
.chip.ach{cursor:pointer;transition:border-color .15s,color .15s}
.chip.ach:hover{border-color:var(--line-2);color:var(--ink)}
.chip.ach[aria-current="page"]{border-color:color-mix(in srgb,var(--gold) 40%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.achgrouph{display:flex;align-items:center;gap:10px;margin:20px 0 10px}
.achgrouph .lbl:first-child{color:var(--ink-2)}
.achgrouph .lbl:last-child{margin-left:auto}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.achcard{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--rad-s);
  background:var(--sunken);border:1px solid var(--line)}
.achcard.on{border-color:color-mix(in srgb,var(--gold) 30%,transparent);
  background:color-mix(in srgb,var(--gold) 7%,var(--sunken))}
/* в узкой колонке профиля карточки плотнее; рамку гасим только у незакрытых,
   иначе это правило стоит ниже .achcard.on и съедает его золотую обводку */
.achcard.hard{border-style:dashed}
.achcard.hard.on{border-style:solid}
.achhard{margin-left:7px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 5px;border-radius:5px;vertical-align:1px;
  color:var(--r-sir);background:color-mix(in srgb,var(--r-sir) 14%,transparent)}
.achlist .achcard{padding:9px 8px}
.achlist .achcard:not(.on){border-color:transparent}

.achbar{height:6px;border-radius:3px;background:var(--sunken);overflow:hidden;
  border:1px solid var(--line);margin:0 0 14px}
.achbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width .4s var(--ease)}
.achlist{display:flex;flex-direction:column;gap:6px;margin:8px 0 14px}
.achmark{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--raised);color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line)}
.achcard.on .achmark{background:var(--gold);color:var(--gold-ink);box-shadow:none}
.achtxt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.achtxt b{font-size:13px;font-weight:650}
.achcard:not(.on) .achtxt b{color:var(--ink-2)}
.achprog{height:4px;border-radius:2px;background:var(--raised);overflow:hidden;margin-top:3px}
.achprog i{display:block;height:100%;background:var(--ink-3)}
.achnum,.achdate{font-size:10.5px}
.achbadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.achbadge{font-size:11px;padding:4px 9px;border-radius:8px;cursor:default;
  background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 28%,transparent)}

/* ============ ПРОГРЕСС ПО СЕТУ ============ */
.setprog{margin-bottom:18px}
.setprog .sumline{margin-bottom:14px}
.sprar{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.sprow{display:grid;grid-template-columns:44px minmax(0,1fr) 120px 58px;align-items:center;gap:10px;
  font-size:12px;color:var(--ink-2)}
.sprname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprbar{height:5px;border-radius:3px;background:var(--sunken);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.sprbar i{display:block;height:100%;transition:width .35s var(--ease)}
.sprnum{text-align:right;font-size:11.5px;color:var(--ink-3)}
.sprow.full .sprnum{color:var(--ok)}
.binder.missing{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:14px}
.binder.missing .holder.gap .card{filter:grayscale(1) brightness(.5);cursor:zoom-in}
.binder.missing .holder.gap:hover .card{filter:grayscale(.2) brightness(.9)}
.binder.missing .sellprice{opacity:.7}


/* ============ ОХОТА ============ */
.panel-b.hunt{display:flex;flex-direction:column;gap:10px}
.hunt-top{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.hunt-bank{font-family:"Unbounded",sans-serif;font-weight:600;font-size:30px;letter-spacing:-.04em;
  color:var(--gold);line-height:1.1;margin-top:3px}
.hunt-goal{margin-left:auto;text-align:right}
.hunt-rar{font-family:"Unbounded",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.03em;
  margin-top:3px}
.hunt-rule{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.hunt-last{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:9px}
.hunt-last b{color:var(--gold)}

/* Выигрыш банка в итогах вскрытия: он крупнее любой карты в паке,
   поэтому и подан крупнее всего остального на экране. */
.huntwin{border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:var(--rad-l);
  background:color-mix(in srgb,var(--gold) 12%,var(--sunken));padding:14px 16px;margin-bottom:14px;
  text-align:center}
.huntwin .hw-t{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:700}
.huntwin .hw-r{font-size:13px;color:var(--ink-2);margin-top:4px}
.huntwin .hw-b{font-family:"Unbounded",sans-serif;font-weight:800;font-size:32px;color:var(--gold);
  letter-spacing:-.04em;margin:2px 0 4px}

@media (max-width:700px){
  .hunt-bank{font-size:25px}
  .hunt-goal{margin-left:0;text-align:left}
}

.riskodds{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.riskodds .ro-h{font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.riskodds .ro-h b{color:var(--r-sir)}
.riskodds .note{margin-top:10px}