/* ── Основа ───────────────────────────────────────────────────────────── */

:root {
  --bg: #060a11;
  --panel: rgba(20, 29, 43, 0.82);
  --panel-solid: #131c29;
  --line: rgba(126, 160, 205, 0.16);
  --text: #eaf1fb;
  --muted: #8fa2bd;
  --accent: #4aa3ff;
  --gold: #ffc93c;
  --radius: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar: 60px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Атрибут hidden должен побеждать любые display из правил ниже */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(120% 70% at 50% -10%, #16283f 0%, var(--bg) 55%, #03060a 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior-y: none;
}

body { padding-bottom: calc(var(--tabbar) + var(--safe-bottom)); }

/* ── Загрузка ─────────────────────────────────────────────────────────── */

.boot {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg); transition: opacity .35s ease;
}
.boot.is-hidden { opacity: 0; pointer-events: none; }
.boot__plane { font-size: 46px; animation: fly 2.4s ease-in-out infinite; }
.boot__text { color: var(--muted); font-size: 14px; text-align: center; padding: 0 30px; line-height: 1.5; }
@keyframes fly {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
}

/* ── Шапка ────────────────────────────────────────────────────────────── */

.hdr {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(12px + var(--safe-top)) 15px 10px;
  background: linear-gradient(180deg, rgba(6, 10, 17, .96) 60%, rgba(6, 10, 17, 0));
  backdrop-filter: blur(8px);
}
.hdr__logo { display: flex; align-items: center; gap: 10px; }
.hdr__logo > span { font-size: 25px; }
.hdr__logo b {
  display: block; font-size: 18px; letter-spacing: .16em; font-weight: 800;
  background: linear-gradient(92deg, #fff, #8fc4ff 60%, #ffd76a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hdr__logo i { font-style: normal; font-size: 11px; color: var(--muted); }
.hdr__wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; }
.wallet__coins { color: var(--gold); font-weight: 700; font-size: 14px; }
.wallet__coins.is-bump { animation: coin-bump .5s cubic-bezier(.2,.9,.3,1); }
@keyframes coin-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); color: #fff2c2; }
  100% { transform: scale(1); }
}
.wallet__level { color: var(--muted); }

/* ── Экраны и нижнее меню ─────────────────────────────────────────────── */

#screens { padding: 4px 0 16px; }
.screen { display: none; padding: 0 15px; }
.screen.is-active { display: block; animation: fade .26s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; height: calc(var(--tabbar) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(9, 14, 22, .94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; color: var(--muted); font-size: 9.5px; font-family: inherit; cursor: pointer;
  transition: color .18s ease, transform .18s ease; position: relative;
}
.tab span { font-size: 19px; line-height: 1; transition: transform .25s cubic-bezier(.2,.9,.3,1); }
.tab.is-active { color: var(--accent); }
.tab.is-active span { transform: translateY(-2px) scale(1.12); }
.tab__badge {
  position: absolute; top: 2px; right: 18%;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: #ff4d6d; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: badge-in .4s cubic-bezier(.2,.9,.3,1) backwards;
}

/* ── Общие мелочи ─────────────────────────────────────────────────────── */

.sect { font-size: 14px; color: var(--muted); font-weight: 600; margin: 22px 0 10px; letter-spacing: .04em; }

.primary {
  width: 100%; padding: 14px; border: 0; border-radius: 13px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: #04101f;
  background: linear-gradient(96deg, #4aa3ff, #7ee0c0);
  box-shadow: 0 8px 24px rgba(74, 163, 255, .28);
  transition: transform .12s ease, box-shadow .2s ease;
}
.primary:active { transform: scale(.975); box-shadow: 0 4px 14px rgba(74, 163, 255, .22); }
.primary:disabled { opacity: .45; box-shadow: none; }

.ghost {
  width: 100%; padding: 10px; margin-top: 9px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line);
  transition: color .2s ease;
}
.ghost.is-active { color: var(--accent); border-color: rgba(74, 163, 255, .5); }

.round {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 17px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  transition: transform .12s ease;
}
.round:active { transform: scale(.92); }

.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 7px 12px; font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 99px;
  transition: all .18s ease;
}
.chip.is-active { color: #04101f; background: var(--accent); border-color: var(--accent); font-weight: 650; }

/* ── Прогресс коллекции ───────────────────────────────────────────────── */

.progress-card {
  margin: 4px 0 12px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.progress-card__top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.progress-card__top b { color: var(--text); }
.progress-card__bar {
  height: 8px; margin: 9px 0 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden;
}
#prog-fill, #earn-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #3da9fc, #b06cff 55%, var(--gold));
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
#earn-fill { background: linear-gradient(90deg, #4ade80, #ffc93c); }
.progress-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.progress-card__chips span {
  font-size: 11px; color: var(--muted); background: rgba(255,255,255,.05);
  border-radius: 8px; padding: 3px 8px;
}

.filters { margin-bottom: 12px; }

/* ── Сетка карточек ───────────────────────────────────────────────────── */

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 11px; grid-auto-rows: max-content;
}
.empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 46px 20px; line-height: 1.6; }
.empty__icon { font-size: 40px; margin-bottom: 10px; opacity: .5; }

/* ── Коллекционная карточка ───────────────────────────────────────────── */

.tcard {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 13px;
  transform-style: preserve-3d;
  cursor: pointer;
  will-change: transform;
  perspective: none;
}

@keyframes legendary-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 16px -4px var(--rarity-glow); }
  50% { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 26px 1px var(--rarity-glow); }
}
.tcard.is-entering { }
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: 1; transform: none; }
}

.tcard__face {
  position: absolute; inset: 0;
  border-radius: 13px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* ── Лицевая сторона ──────────────────────────────────────────────────── */

.tcard__face--front {
  display: flex; flex-direction: column; gap: 4px; padding: 7px;
  background: linear-gradient(168deg, #1d2836, #0c121b 70%);
  border: 1px solid var(--rarity, #3a4a60);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 22px -12px var(--rarity-glow, transparent);
}
.tcard__face--front::after {
  content: ""; position: absolute; inset: 3px; z-index: 5; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px;
}

.tcard__top {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  font-size: 9px; letter-spacing: .04em; text-transform: uppercase; flex: 0 0 auto;
}
.tcard__rarity {
  padding: 2px 6px; border-radius: 5px; font-weight: 800; color: #06111f;
  background: var(--rarity, #9aa7b4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcard__year { color: var(--muted); font-size: 9.5px; }

/* Фото показывается целиком, без обрезки */
.tcard__photo {
  position: relative; flex: 1 1 auto; min-height: 44px;
  border-radius: 8px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #33465a 0%, #101822 74%);
  display: flex; align-items: center; justify-content: center;
}
.tcard__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tcard__photo--empty { display: flex; align-items: center; justify-content: center; }
.tcard__placeholder { font-size: 30px; opacity: .5; }
.tcard__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 18px -6px rgba(0, 0, 0, .8);
}
/* Подпись варианта: у борта может быть несколько снимков */
.tcard__variant {
  position: absolute; left: 5px; bottom: 5px; z-index: 3; max-width: 82%;
  padding: 2px 7px; border-radius: 6px; font-size: 8.5px; font-weight: 650;
  color: #eaf1fb; background: rgba(6, 10, 17, .72);
  border: 1px solid rgba(255,255,255,.14);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}
.tcard__varcount {
  position: absolute; right: 5px; bottom: 5px; z-index: 3;
  padding: 2px 6px; border-radius: 6px; font-size: 8.5px; font-weight: 700;
  color: #dbe6f4; background: rgba(6, 10, 17, .72); border: 1px solid rgba(255,255,255,.14);
}

.tcard__name {
  font-size: 11.5px; font-weight: 700; line-height: 1.22; margin: 0; flex: 0 0 auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard__maker {
  font-size: 9px; color: var(--muted); margin: 0; flex: 0 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tcard__stats {
  margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 7px;
  font-size: 9.5px; color: var(--muted); flex: 0 0 auto;
}
.tcard__stats b { color: var(--text); font-weight: 650; }
.tcard__stats span { opacity: .75; }

.tcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  font-size: 9px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 4px;
  flex: 0 0 auto;
}
.tcard__livery { font-size: 12px; }

.tcard__badge {
  position: absolute; top: 7px; right: 7px; z-index: 6;
  font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 5px;
  color: #04101f; background: #4ade80; letter-spacing: .04em;
}
.tcard__badge--dupe { background: #ffc93c; }
@keyframes badge-in { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

.tcard__locked {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: rgba(6, 10, 17, .35);
}
.tcard.is-locked .tcard__photo img { filter: grayscale(1) brightness(.5); }
.tcard.is-locked { opacity: .75; }

/* ── Серебряная рубашка ───────────────────────────────────────────────── */

.tcard__face--back {
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center;
  color: #2b3644; text-align: center;
  background: linear-gradient(135deg,
    #f7fafd 0%, #c6d0dc 18%, #93a0b1 38%, #eef3f9 52%, #a7b3c2 70%, #e2e9f1 100%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 26px -8px rgba(255, 255, 255, .95);
}
.tcard__face--back::before {
  content: ""; position: absolute; inset: -30% -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%);
}
@keyframes silver-sweep { from { transform: translateX(-45%) } to { transform: translateX(45%) } }
.tcard__face--back .tcard__shine { mix-blend-mode: soft-light; opacity: 1; }

.tcard__back-frame {
  position: absolute; inset: 7px; border-radius: 9px;
  border: 1px solid rgba(88, 102, 122, .4);
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.28) 0 5px, rgba(255,255,255,0) 5px 10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 8px;
}
.tcard__back-logo { font-size: 1.7em; filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); }
.tcard__back-name {
  font-size: .92em; font-weight: 800; letter-spacing: .26em; text-indent: .26em;
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 -1px 1px rgba(74, 88, 108, .45);
}
.tcard__back-sub { font-size: .58em; letter-spacing: .12em; color: #5d6b7e; }
.tcard__back-mark { font-size: 1em; opacity: .3; margin-top: 2px; }

/* ── Блик и фольга ────────────────────────────────────────────────────── */

.tcard__shine, .tcard__holo {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
}
.tcard__shine {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.45), rgba(255,255,255,0) 42%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .25s ease;
}
.tcard.is-tilting .tcard__shine { opacity: 1; }
.tcard__holo {
  background: linear-gradient(115deg,
    transparent 26%, rgba(255,210,120,.42) 40%, rgba(120,255,220,.32) 50%,
    rgba(255,120,220,.30) 60%, transparent 74%);
  background-size: 260% 260%; background-position: var(--hx, 0%) var(--hy, 0%);
  mix-blend-mode: color-dodge; opacity: 0; transition: opacity .3s ease;
}
.tcard--epic .tcard__holo { opacity: .55; }
.tcard--legendary .tcard__holo { opacity: .85; }
.tcard--rare .tcard__holo { opacity: .25; }
.tcard--ultra .tcard__holo { opacity: .55; }
.tcard--mythic .tcard__holo { opacity: .6; }

/* Сверхредкие и мифические светятся по-своему */
.tcard--ultra {
  border-color: #00e5ff;
}
@keyframes ultra-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 18px -2px #00e5ff; }
  50% { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 34px 3px #8ef4ff; }
}
.tcard--mythic {
  border-color: #ff4d6d;
}
@keyframes mythic-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 20px 0 #ff4d6d; }
  50% { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 40px 6px #ff9db0; }
}
.tcard--mythic .tcard__face--front {
  background: linear-gradient(168deg, #2c1620, #12070c 70%);
}
.tcard--ultra .tcard__face--front {
  background: linear-gradient(168deg, #102a33, #060f14 70%);
}

/* ── Экран карточки ───────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: radial-gradient(100% 60% at 50% 0%, #16283f 0%, var(--bg) 60%, #03060a 100%);
  animation: fade .2s ease;
}
#card-modal { z-index: 130; }
/* Окно обмена открывается поверх профиля игрока */
#trade-modal { z-index: 140; }
/* Продажа открывается поверх карточки */
#sell-modal { z-index: 150; }
.modal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(8px + var(--safe-top)) 14px 2px;
}
.modal__nav { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.modal__nav span { min-width: 50px; text-align: center; }

/* Карточка занимает ровно столько места, сколько осталось над статистикой */
.stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 1100px; padding: 6px 14px 24px;
  position: relative; touch-action: none;
}
.stage__card {
  width: min(76vw, 300px, 32dvh);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  animation: float 6.5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
}
.stage__card .tcard { width: 100%; height: 100%; aspect-ratio: auto; cursor: grab; }
.stage__card .tcard__name { font-size: 15px; }
.stage__card .tcard__maker { font-size: 11.5px; }
.stage__card .tcard__stats { font-size: 12px; gap: 5px 10px; }
.stage__card .tcard__foot { font-size: 11.5px; padding-top: 6px; }
.stage__card .tcard__rarity, .stage__card .tcard__year { font-size: 10.5px; }
.stage__card .tcard__livery { font-size: 15px; }
.stage__card .tcard:active { cursor: grabbing; }

.stage__hint {
  position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
  font-size: 10.5px; color: var(--muted); opacity: .75;
}

.sheet { flex: 0 0 auto; max-height: 38dvh; overflow-y: auto; padding: 4px 15px calc(16px + var(--safe-bottom)); }
.livery-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 10px; }
.livery {
  padding: 7px 11px; font: inherit; font-size: 12px; cursor: pointer; border-radius: 10px;
  color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line);
  transition: all .18s ease;
}
.livery.is-active { color: #06111f; font-weight: 700; }
.livery.is-owned::after { content: " ✓"; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; }
.stat {
  background: rgba(255,255,255,.05); border-radius: 11px; padding: 10px 12px;
  animation: fade .35s ease backwards;
}
.stat__label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat__value { font-size: 16px; font-weight: 700; margin-top: 3px; }

.desc { font-size: 13px; line-height: 1.55; color: #b9c8dc; margin: 14px 0 0; }
.credit { font-size: 10.5px; color: #64758f; margin: 10px 0 0; line-height: 1.5; }
.credit a { color: #7fa8d8; }

/* ── Паки ─────────────────────────────────────────────────────────────── */

.daily {
  margin-top: 6px; padding: 14px; border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255,201,60,.14), rgba(20,29,43,.9));
  border: 1px solid rgba(255,201,60,.32);
}
.daily__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.daily__title { font-size: 15px; font-weight: 700; }
.daily__sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.daily .primary { margin-top: 12px; }
.daily .primary.is-waiting { background: rgba(255,255,255,.09); color: var(--muted); box-shadow: none; }

.promo {
  margin-top: 14px; padding: 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.promo__title { font-size: 13.5px; font-weight: 650; margin-bottom: 9px; }
.promo__row { display: flex; gap: 8px; }
.promo__row .search { flex: 1; }
.promo__button { width: auto; padding: 12px 16px; font-size: 13.5px; white-space: nowrap; }
.promo__hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.promo__hint.is-ok { color: #6ee7a8; }
.promo__hint.is-error { color: #ff8f8f; }

.search {
  width: 100%; padding: 11px 14px; font-size: 14px; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px;
  outline: none; font-family: inherit;
}
.search::placeholder { color: #63758f; }
.search:focus { border-color: rgba(89, 167, 255, .55); }

.pack-list { display: flex; flex-direction: column; gap: 10px; }
.pack-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  transition: transform .12s ease, border-color .2s ease;
}
.pack-card:active { transform: scale(.985); }
.pack-card__emoji { font-size: 26px; }
.pack-card__body { flex: 1; min-width: 0; }
.pack-card__name { display: block; font-size: 14px; font-weight: 650; }
.pack-card__desc { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pack-card__price { font-size: 13px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.pack-card:disabled { opacity: .5; }

.odds { margin-top: 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.odds__row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 3px 0; }
.odds__row b { color: var(--text); }
.odds h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ── Заработок: мини-игра ─────────────────────────────────────────────── */

.earn-head {
  margin-top: 6px; padding: 14px; border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(74,222,128,.12), rgba(20,29,43,.9));
  border: 1px solid rgba(74,222,128,.28);
}
.earn-head__top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.earn-head__top b { color: #6ee7a8; }
.earn-head__hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.quiz { margin-top: 14px; }
.quiz__start, .quiz__limit {
  padding: 22px 18px; text-align: center; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.quiz__icon { font-size: 44px; animation: fly 3s ease-in-out infinite; }
.quiz__start h2, .quiz__limit h2 { font-size: 17px; margin: 12px 0 8px; }
.quiz__start p, .quiz__limit p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.quiz__limit b { color: var(--gold); }

.quiz__play { animation: fade .3s ease; }
.quiz__top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.quiz__streak { color: #ffb36b; font-weight: 650; }
.quiz__timer { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.quiz__timer.is-low { color: #ff8f8f; animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.18) } }
.quiz__reward { color: var(--gold); font-weight: 650; }

.quiz__bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 12px; }
#quiz-bar { height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #4ade80, #ffc93c); }
#quiz-bar.is-running { animation: bar-drain linear forwards; }
@keyframes bar-drain { from { width: 100%; } to { width: 0%; } }

.quiz__photo {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 45%, #26343f, #0d141d 78%);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  animation: quiz-photo-in .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes quiz-photo-in { from { opacity: 0; transform: scale(1.04) } to { opacity: 1; transform: none } }
.quiz__photo img { width: 100%; height: 100%; object-fit: contain; }
.quiz__ask { text-align: center; font-size: 13px; color: var(--muted); margin: 12px 0 10px; }

.quiz__options { display: grid; grid-template-columns: 1fr; gap: 9px; }

/* ── Выбор мини-игры ──────────────────────────────────────────────────── */

.games { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.game {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 12px 13px; border-radius: 13px; cursor: pointer; font: inherit;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  transition: transform .12s ease, border-color .2s ease;
}
.game:active { transform: scale(.98); }
.game span { font-size: 22px; }
.game b { display: block; font-size: 13.5px; font-weight: 650; }
.game i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.game:disabled { opacity: .45; }

.quiz__game {
  text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}

/* Дуэль: два борта рядом */
.quiz__photo.is-duel { aspect-ratio: auto; padding: 8px; }
.quiz__duel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.quiz__duelitem {
  border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.quiz__duelitem img { width: 100%; height: 118px; object-fit: contain; background: #0d141d; display: block; }
.quiz__duelitem figcaption {
  font-size: 10.5px; padding: 6px 7px; line-height: 1.25; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Покупка монет за звёзды ──────────────────────────────────────────── */

.stars { display: flex; flex-direction: column; gap: 9px; }
.stars__item {
  display: flex; align-items: center; gap: 12px; padding: 13px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}
.stars__icon { font-size: 26px; }
.stars__body { flex: 1; min-width: 0; display: block; }
.stars__title { display: block; font-size: 14px; font-weight: 650; }
.stars__hint { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.stars__price {
  border: 0; border-radius: 11px; padding: 10px 14px; font: inherit; font-size: 13px;
  font-weight: 650; color: #06121f; background: linear-gradient(180deg, #ffd764, #f0b32c);
  cursor: pointer;
}
.stars__price:disabled { opacity: .5; }

.option {
  padding: 13px 14px; border-radius: 13px; cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--panel); border: 1px solid var(--line);
  text-align: left; line-height: 1.3;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.option:active { transform: scale(.985); }
.option.is-right {
  border-color: #4ade80; background: rgba(74,222,128,.16);
  animation: option-right .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes option-right { 0% { transform: scale(1) } 45% { transform: scale(1.07) } 100% { transform: scale(1) } }
.option.is-wrong {
  border-color: #ff6b6b; background: rgba(255,107,107,.14);
  animation: shake .45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(5px); }
  50% { transform: translateX(-6px); }
}
.option:disabled { opacity: .7; }

.quiz__result {
  margin-top: 14px; padding: 18px; border-radius: var(--radius); text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  animation: result-in .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes result-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.quiz__verdict { font-size: 20px; font-weight: 800; }
.quiz__result.is-right .quiz__verdict { color: #6ee7a8; }
.quiz__result.is-wrong .quiz__verdict { color: #ff8f8f; }
.quiz__answer { font-size: 13px; color: var(--muted); margin: 8px 0 4px; line-height: 1.5; }
.quiz__answer b { color: var(--text); }
.quiz__money { font-size: 16px; font-weight: 700; color: var(--gold); margin-bottom: 14px; min-height: 20px; }

/* ── Профиль ──────────────────────────────────────────────────────────── */

.pcard {
  position: relative; margin-top: 6px; padding: 16px; border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(150deg, rgba(74,163,255,.15), rgba(20,29,43,.92));
  border: 1px solid rgba(74,163,255,.28);
}
.pcard__top { display: flex; align-items: center; gap: 14px; }
.pcard__body { flex: 1; min-width: 0; }
.pcard__name { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__rank { font-size: 12px; color: var(--gold); margin-top: 2px; }
.pcard__line { font-size: 12px; color: var(--muted); margin-top: 4px; }

.avatar {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: #04101f;
  background: linear-gradient(140deg, #4aa3ff, #7ee0c0);
  border: 2px solid rgba(255, 255, 255, .25);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pcard__bar { height: 8px; margin: 12px 0 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.pcard__bar div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4aa3ff, #7ee0c0); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.pcard__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pcard__meta div { flex: 1 1 44%; background: rgba(255,255,255,.05); border-radius: 11px; padding: 9px 11px; }
.pcard__meta span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pcard__meta b { font-size: 15px; }

.ach { display: flex; flex-wrap: wrap; gap: 8px; }
.ach__item {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); font-size: 12px;
}
.ach__item span { font-size: 17px; }
.ach__item.is-locked { opacity: .38; filter: grayscale(.7); }

.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; }

.player-scroll { flex: 1; overflow-y: auto; padding: 0 15px calc(24px + var(--safe-bottom)); }

.stat-list { display: flex; flex-direction: column; gap: 7px; }
.stat-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.stat-row__label { flex: 0 0 128px; color: var(--muted); }
.stat-row__bar { flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.stat-row__bar div { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.stat-row__value { flex: 0 0 52px; text-align: right; font-variant-numeric: tabular-nums; }

.board { display: flex; flex-direction: column; gap: 7px; }
.board__row {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 9px 12px;
  background: var(--panel); border: 1px solid transparent; border-radius: 11px; cursor: pointer;
  transition: transform .12s ease, border-color .2s ease;
}
.board__row:active { transform: scale(.985); }
.board__row.is-me { border-color: rgba(74,163,255,.45); }
.board__row::after { content: "›"; color: var(--muted); font-size: 16px; }
.board__place { flex: 0 0 26px; color: var(--muted); }
.board__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__value { color: var(--muted); }

/* ── Вскрытие пака ────────────────────────────────────────────────────── */

.opening {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
  background: radial-gradient(90% 60% at 50% 40%, #172b45 0%, #060a11 65%, #02040a 100%);
  overflow: hidden;
}
.opening__sky {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(circle at 50% 45%, var(--flash, transparent) 0%, transparent 55%);
  transition: background .5s ease;
}

.pack {
  position: relative; z-index: 2; width: min(62vw, 210px); aspect-ratio: 5 / 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 18px; cursor: pointer; font: inherit; color: var(--text);
  background: linear-gradient(160deg, #2a3d55, #101a26 65%);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 40px -18px rgba(120,190,255,.8);
  overflow: hidden;
  animation: pack-in .45s cubic-bezier(.2,.9,.3,1);
}
@keyframes pack-in { from { opacity: 0; transform: scale(.86) translateY(18px) } to { opacity: 1; transform: none } }
.pack::before {
  content: ""; position: absolute; inset: -40% -60%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  animation: sweep 3.4s linear infinite;
}
@keyframes sweep { from { transform: translateX(-60%) } to { transform: translateX(60%) } }
.pack__emoji { font-size: 52px; }
.pack__name { font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.pack__hint { font-size: 11.5px; color: var(--muted); }
.pack.is-shaking { animation: pack-shake .5s cubic-bezier(.36,.07,.19,.97) infinite; }
@keyframes pack-shake {
  10%, 90% { transform: translateX(-3px) rotate(-1deg) scale(1.02); }
  30%, 70% { transform: translateX(5px) rotate(1.5deg) scale(1.04); }
  50% { transform: translateX(-6px) rotate(-2deg) scale(1.05); }
}
.pack.is-bursting { animation: burst .45s ease forwards; }
@keyframes burst {
  0% { transform: scale(1.05); opacity: 1; }
  60% { transform: scale(1.22); opacity: .9; }
  100% { transform: scale(.2) rotate(12deg); opacity: 0; }
}

.reveal { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.reveal__counter { font-size: 12px; color: var(--muted); letter-spacing: .1em; }

.reveal__rays {
  position: absolute; top: 46%; left: 50%; width: 150vw; height: 150vw;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    var(--ray, #8ab4ff) 0deg 4deg, transparent 4deg 16deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.9) 12%, transparent 62%);
  mask-image: radial-gradient(circle, rgba(0,0,0,.9) 12%, transparent 62%);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-burst .reveal__rays { opacity: .45; transform: translate(-50%, -50%) scale(1); }
.reveal.is-burst .reveal__rays { animation: rays-spin 26s linear infinite; }
@keyframes rays-spin { to { transform: translate(-50%, -50%) scale(1) rotate(360deg); } }

.flip {
  width: min(66vw, 260px, 30dvh); aspect-ratio: 5 / 7;
  perspective: 1400px; cursor: pointer;
  animation: flip-in .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes flip-in { from { opacity: 0; transform: translateY(30px) scale(.9) } to { opacity: 1; transform: none } }
.flip__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .62s cubic-bezier(.3,.9,.3,1);
}
.flip__inner.is-flipped { transform: rotateY(180deg); }
.flip__back, .flip__front {
  position: absolute; inset: 0; border-radius: 14px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.flip__back {
  flex-direction: column; gap: 8px;
  background: linear-gradient(160deg, #24384f, #0d151f 70%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 30px -14px rgba(120,190,255,.9);
}
.flip__back span { font-size: 44px; }
.flip__back i { font-style: normal; font-size: 12px; letter-spacing: .3em; color: var(--muted); }
.flip__front { transform: rotateY(180deg); }
.flip__front .tcard { width: 100%; height: 100%; aspect-ratio: auto; }
.flip__front .tcard__name { font-size: 15px; }
.flip__front .tcard__maker { font-size: 11.5px; }
.flip__front .tcard__stats { font-size: 12px; gap: 5px 10px; }
.flip__front .tcard__foot { font-size: 11.5px; padding-top: 6px; }
.flip__front .tcard__rarity, .flip__front .tcard__year { font-size: 10.5px; }

.reveal.is-legendary .flip { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.86) } 60% { transform: scale(1.04) } 100% { transform: scale(1) } }

.summary { position: relative; z-index: 3; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.summary h2 { margin: 0; font-size: 18px; text-align: center; animation: fade .4s ease; }
.summary__list { display: flex; flex-direction: column; gap: 7px; max-height: 46dvh; overflow-y: auto; }
.summary__row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; font-size: 12.5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  animation: result-in .35s cubic-bezier(.2,.9,.3,1) backwards;
}
.summary__row b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__tag { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: rgba(74,222,128,.18); color: #6ee7a8; }
.summary__tag--dupe { background: rgba(255,201,60,.16); color: var(--gold); }

.sparks { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.spark {
  position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: 0;
  animation: spark-fly 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes spark-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3) rotate(var(--rot)); }
}

/* ── Особое появление легендарки и выше ───────────────────────────────── */

.opening__flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0%, var(--flash, #fff) 35%, transparent 72%);
}
.opening.is-drop .opening__flash { animation: drop-flash 1.5s ease-out forwards; }
@keyframes drop-flash {
  0% { opacity: 0; transform: scale(.4); }
  18% { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

.opening__ring {
  position: absolute; top: 44%; left: 50%; width: 12px; height: 12px; z-index: 4;
  border-radius: 50%; border: 3px solid var(--flash, #ffc93c); opacity: 0;
  transform: translate(-50%, -50%); pointer-events: none;
}
.opening.is-drop .opening__ring { animation: drop-ring 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes drop-ring {
  0% { opacity: .95; width: 20px; height: 20px; border-width: 8px; }
  100% { opacity: 0; width: 140vmin; height: 140vmin; border-width: 1px; }
}

.opening__title {
  position: absolute; left: 0; right: 0; top: 12%; z-index: 6;
  text-align: center; font-size: 20px; font-weight: 800; letter-spacing: .18em;
  color: var(--flash, #ffc93c); text-shadow: 0 0 24px var(--flash, #ffc93c);
  opacity: 0; pointer-events: none;
}
.opening.is-drop .opening__title { animation: drop-title 2.1s ease-out forwards; }
@keyframes drop-title {
  0% { opacity: 0; transform: scale(.7); }
  20% { opacity: 1; transform: scale(1.05); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* ── Обмен ────────────────────────────────────────────────────────────── */

.trade-head {
  margin-top: 6px; padding: 14px; border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(74,163,255,.13), rgba(20,29,43,.9));
  border: 1px solid rgba(74,163,255,.26);
}
.trade-head__title { font-size: 15px; font-weight: 700; }
.trade-head__hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

.trade-list { display: flex; flex-direction: column; gap: 10px; }
.trade-card {
  padding: 12px 13px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  animation: result-in .35s cubic-bezier(.2,.9,.3,1) backwards;
}
.trade-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trade-card__name { font-size: 13.5px; font-weight: 650; cursor: pointer; }
.trade-card__name::after { content: " ›"; color: var(--muted); }
.trade-card__when { font-size: 11px; color: var(--muted); }
.trade-card__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.trade-card__label { font-size: 11px; color: var(--muted); width: 100%; }
.trade-chip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.trade-chip b { color: var(--gold); }
.trade-card__actions { display: flex; gap: 8px; margin-top: 11px; }
.trade-card__actions .primary { padding: 10px; font-size: 13.5px; }
.trade-card__actions .ghost { margin-top: 0; }

.trade-side { margin-bottom: 16px; }

.trade-found { display: flex; flex-direction: column; gap: 9px; }
.trade-found__item {
  display: flex; flex-direction: column; gap: 11px; padding: 13px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}
.trade-found__top { display: flex; align-items: center; gap: 11px; }
.trade-found__body { flex: 1; min-width: 0; }
.trade-found__name { display: block; font-size: 14px; font-weight: 650; }
.trade-found__meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.trade-found__actions { display: flex; gap: 8px; }
.trade-found__actions .primary,
.trade-found__actions .ghost { flex: 1; padding: 11px; font-size: 13.5px; margin-top: 0; }
.trade-link {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  border-radius: 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  background: rgba(74,163,255,.12); border: 1px solid rgba(74,163,255,.35); color: var(--text);
}
.trade-side__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.trade-side__head b { color: var(--text); }
.trade-picker { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.trade-picker::-webkit-scrollbar { display: none; }
.trade-pick {
  flex: 0 0 auto; width: 96px; border-radius: 11px; overflow: hidden; cursor: pointer;
  background: var(--panel); border: 2px solid var(--line); padding: 0; font: inherit; color: var(--text);
  transition: border-color .18s ease, transform .12s ease;
}
.trade-pick:active { transform: scale(.96); }
.trade-pick.is-selected { border-color: #4ade80; box-shadow: 0 0 14px -2px #4ade80; }
.trade-pick img { width: 100%; height: 62px; object-fit: contain; display: block; background: #0d141d; }
.trade-pick__name {
  font-size: 10px; padding: 5px 6px; line-height: 1.25; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.trade-pick__rarity { font-size: 9px; padding: 0 6px 5px; color: var(--muted); }
/* Множитель ливреи: видно, почему карточка дороже стандартной */
.trade-pick__livery { font-size: 9px; padding: 0 6px 6px; color: var(--gold); white-space: nowrap; }
.trade-pick__dup {
  position: absolute; margin: -70px 0 0 4px; font-size: 9px; padding: 1px 5px;
  border-radius: 5px; background: rgba(74,222,128,.85); color: #04101f; font-weight: 700;
}
.trade-emptypick { font-size: 12px; color: var(--muted); padding: 10px 0; }

.trade-coins {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 12.5px; color: var(--muted);
}
.trade-coins input { flex: 1; max-width: 160px; padding: 9px 12px; font-size: 13px; }

/* ── Уведомление ──────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar) + 18px + var(--safe-bottom));
  transform: translateX(-50%); z-index: 300; max-width: 88vw;
  padding: 10px 18px; font-size: 13px; border-radius: 99px; text-align: center;
  background: rgba(16, 24, 36, .96); border: 1px solid var(--line); color: var(--text);
  animation: toast-in .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px) } to { opacity: 1; transform: translate(-50%, 0) } }

@media (min-width: 520px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ── Переключатель «Обмены / Продажа» ─────────────────────────────────── */

.segmented {
  display: flex; gap: 6px; margin: 12px 0 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
}
.seg {
  flex: 1; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 13px; padding: 10px; border-radius: 10px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.seg.is-active { background: rgba(74,163,255,.16); color: var(--text); font-weight: 650; }

/* ── Рынок карточек ───────────────────────────────────────────────────── */

.market-sort { display: flex; gap: 6px; margin-bottom: 10px; }
.market-sort .seg { padding: 9px 10px; font-size: 12px; }

.market-list { display: flex; flex-direction: column; gap: 10px; }
.market-item {
  display: grid; gap: 11px; padding: 12px;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rarity, var(--line));
}
.market-item__photo {
  width: 74px; height: 56px; border-radius: 10px;
  object-fit: contain; background: #0d141d; display: block;
}
.market-item__body { min-width: 0; }
.market-item__name {
  display: block; font-size: 13.5px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.market-item__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.market-item__tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 6px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--muted);
}
.market-item__seller { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.market-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.market-item__price { font-size: 15px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.market-item__hint { font-size: 10.5px; color: var(--muted); }
.market-item button { padding: 9px 14px; font-size: 12.5px; border-radius: 10px; white-space: nowrap; }
.market-item.is-mine { border-left-color: rgba(74,163,255,.6); }

.sell-button {
  width: 100%; margin-top: 6px; padding: 12px; border-radius: 12px;
  font: inherit; font-size: 13.5px; cursor: pointer; color: var(--text);
  background: rgba(255,201,60,.12); border: 1px solid rgba(255,201,60,.4);
}
.sell-card { margin-bottom: 14px; }

/* Платная смена ливреи */
.reroll {
  padding: 10px 14px; border-radius: 11px; font: inherit; font-size: 12.5px;
  cursor: pointer; color: var(--text);
  background: rgba(255,201,60,.12); border: 1px solid rgba(255,201,60,.4);
}
.reroll:disabled { opacity: .5; }
.livery-row[hidden] { display: none !important; }

/* Продажа прямо из вкладки: выбор карточки */
.wide { width: 100%; }
.modal__title { margin: 0 0 12px; font-size: 16px; }

.pick-list {
  display: flex; flex-direction: column; gap: 7px;
  max-height: 52vh; overflow-y: auto; margin: 12px 0; padding-right: 3px;
}
.pick-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; cursor: pointer; text-align: left; font: inherit;
  color: var(--text); border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--rarity, var(--line));
}
.pick-item img {
  width: 54px; height: 40px; border-radius: 8px; flex: 0 0 auto;
  object-fit: contain; background: #0d141d;
}
.pick-item__icon {
  width: 54px; height: 40px; flex: 0 0 auto; display: flex;
  align-items: center; justify-content: center; font-size: 20px;
  border-radius: 8px; background: #0d141d;
}
.pick-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pick-item__body b {
  font-size: 13px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-item__body small { font-size: 11px; color: var(--muted); }

/* Профиль: раздельный прогресс коллекции */
.split {
  margin-top: 12px; padding: 13px 14px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}
.split__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12.5px; margin-bottom: 6px;
}
.split__row + .split__bar { margin-bottom: 13px; }
.split__row:last-of-type { margin-bottom: 6px; }
.split__row b { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.split__bar {
  height: 6px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.07);
}
.split__bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #4aa3ff, #7ad0ff);
  transition: width .5s ease;
}
.split__bar--air i { background: linear-gradient(90deg, #5fd6ad, #9ff0cd); }

/* ── Драгоценные ливреи ───────────────────────────────────────────────── */
.livery.bronze { background: linear-gradient(135deg, #e0ab74, #a4682f); color: #2b1405; }
.livery.silver { background: linear-gradient(135deg, #eef4f9, #b9c6d2); color: #10202e; }
.livery.gold { background: linear-gradient(135deg, #ffe08a, #e5ab1f); color: #3a2600; }
.livery.anniversary { background: linear-gradient(135deg, #d9b3ff, #7b2ff7); color: #fff; }
.livery.special { background: linear-gradient(135deg, #b8f7d4, #34c98a); color: #06271a; }
.livery.diamond {
  background: linear-gradient(135deg, #d8f6ff, #6fd8ff, #ffffff, #a8e8ff, #6fd8ff);
  background-size: 300% 100%;
  color: #04293d;
  animation: diamond-shine 3.4s linear infinite;
}
@keyframes diamond-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Двойное свечение у всех карточек: внутри цвет редкости, снаружи цвет класса */
.tcard {
  box-shadow: 0 6px 18px rgba(0,0,0,.45),
              0 0 16px -6px var(--rarity-glow, var(--rarity)),
              0 0 26px -8px var(--cls, transparent);
}

/* Отдельная подсветка карточки для особых ливрей:
   внутреннее свечение — цвет редкости, внешнее — цвет класса борта */
.tcard[data-livery="bronze"] {
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 14px -4px var(--rarity-glow), 0 0 26px -2px var(--cls);
}
.tcard[data-livery="silver"] {
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 16px -4px var(--rarity-glow), 0 0 30px -2px var(--cls);
}
.tcard[data-livery="gold"] {
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 18px -3px var(--rarity-glow), 0 0 34px 0 var(--cls);
}
.tcard[data-livery="anniversary"] {
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 18px -3px var(--rarity-glow), 0 0 36px 0 var(--cls);
}
.tcard[data-livery="special"] {
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 22px -2px var(--rarity-glow), 0 0 44px 2px var(--cls);
}
.tcard[data-livery="diamond"] {
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 26px 0 var(--rarity-glow), 0 0 54px 6px var(--cls);
}

/* Пульсация только на голограмме. Раньше она висела на самой карточке
   через filter — а filter «сплющивает» 3D-сцену, и серебряная спинка
   переставала рисоваться. */
@keyframes livery-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}



/* Подписка в витрине звёзд */
.stars__item--sub {
  grid-column: 1 / -1;
  border-color: rgba(255,201,60,.55);
  background: linear-gradient(135deg, rgba(255,201,60,.14), rgba(255,201,60,.04));
}
.stars__item--sub.is-active { border-color: rgba(95,214,173,.6); }
.stars__bonus {
  font-style: normal; font-size: 10.5px; padding: 2px 6px; border-radius: 6px;
  margin-left: 6px; color: #0d141d; background: var(--gold); font-weight: 700;
}
.stars__item--sub .stars__hint { white-space: normal; line-height: 1.45; }

/* Отметка подписки в профиле */
.sub-badge {
  margin-top: 10px; padding: 11px 14px; border-radius: 13px;
  font-size: 12.5px; font-weight: 600; color: var(--gold);
  background: rgba(255,201,60,.12); border: 1px solid rgba(255,201,60,.42);
}

/* Экран техперерыва */
.maint {
  position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: var(--bg, #0b1118);
}
.maint__box {
  max-width: 420px; text-align: center; padding: 30px 24px;
  border-radius: 20px; background: var(--panel, #131c26);
  border: 1px solid var(--line, #22303d);
}
.maint__icon { font-size: 46px; }
.maint__title { margin: 12px 0 8px; font-size: 21px; }
.maint__text { margin: 0 0 16px; color: var(--muted, #93a4b5); line-height: 1.5; font-size: 14px; }
.maint__timer {
  font-size: 30px; font-weight: 700; color: var(--gold, #ffc93c);
  font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
.maint__hint { margin: 0; font-size: 12px; color: var(--muted, #93a4b5); }

/* Кнопка мгновенной продажи */
.reroll--sell {
  background: rgba(255,107,107,.12);
  border-color: rgba(255,107,107,.42);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Доработка визуала: прямоугольные паки с надписью «АНГАР», серебряная
   рубашка при вскрытии, карточка-«в руках» и сцена раскрытия раунда.
   Блок только дополняет прежние правила, ничего не отменяя.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Пак: прямоугольник с почти прямыми углами и фирменной надписью ──── */

/* Список паков на экране «Паки» — те же прямые углы, что и у пака */
.pack-card { border-radius: 3px; box-shadow: 0 3px 12px -8px rgba(0, 0, 0, .9); }
.pack-card__emoji { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

/* Сам пак при вскрытии: прямоугольник, металлическая кромка, надпись */
.pack {
  border-radius: 3px;
  border: 1px solid rgba(150, 200, 255, .45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10) 0 24%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(160deg, #2a3d55, #101a26 65%);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .65),
    inset 0 0 0 4px rgba(7, 12, 20, .55),
    inset 0 0 44px -18px rgba(120, 190, 255, .85);
}
/* Фирменная полоса у верхней кромки пакета */
.pack::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 22px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(150, 200, 255, .55) 22% 78%, transparent);
  pointer-events: none;
}
.pack__brand {
  position: absolute; top: 34px; left: 0; right: 0;
  font-size: 21px; font-weight: 800; letter-spacing: .3em; text-indent: .3em;
  color: #eaf3ff;
  text-shadow: 0 0 20px rgba(140, 195, 255, .75), 0 2px 0 rgba(0, 0, 0, .55);
  pointer-events: none;
}
.pack__hint {
  position: absolute; left: 0; right: 0; bottom: 18px;
  letter-spacing: .05em;
}

/* ── 2. Серебряная рубашка карточки при вскрытии ────────────────────────── */

/* Верхний слой сцены — серебристая спинка, нижний — лицо карточки.
   Оба лежат в 3D-сцене, поэтому в любой момент видна ровно одна сторона. */
.flip__inner .flip__back,
.flip__inner .flip__front { z-index: 1; }
.flip__inner .flip__back {
  transform: rotateY(180deg) translateZ(1px);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .9);
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .30) 0 5px, rgba(255, 255, 255, 0) 5px 10px),
    repeating-linear-gradient(-45deg,
      rgba(110, 126, 148, .16) 0 5px, rgba(110, 126, 148, 0) 5px 10px),
    linear-gradient(135deg,
      #fdfefe 0%, #cfd8e3 16%, #96a3b4 34%, #f2f6fa 50%, #a9b5c4 68%, #e6ecf3 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, .45),
    inset 0 0 34px -6px rgba(255, 255, 255, .95),
    0 20px 44px rgba(0, 0, 0, .55);
}
.flip__inner .flip__front {
  transform: rotateY(0deg) translateZ(1px);
  border-radius: 3px;
}
/* Рубашка, которую отдаёт сама карточка: та же серебристая рамка */
.flip__back .tcard__face--back {
  position: absolute; inset: 0;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .72);
}
.tcard__back-frame {
  border-radius: 2px;
  border: 1px solid rgba(88, 102, 122, .45);
  background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .30) 0 5px, rgba(255, 255, 255, 0) 5px 10px);
}
.tcard__back-name {
  font-size: 1.08em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 1px rgba(74, 88, 108, .45),
    0 0 16px rgba(255, 255, 255, .8);
}

/* Сцена вскрытия: карточку можно двигать, поэтому никаких выделений */
.flip, .flip__inner, .flip__back, .flip__front, .flipable { touch-action: none; }
.flip__inner { will-change: transform; }
.flipable { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flipable .tcard,
.flipable .tcard__face { border-radius: 13px; }
.flipable .tcard__face--back { cursor: grab; }
.flipable.is-flipped { transform: rotateY(180deg); }

/* ── 3. Карточку можно «подержать в руках» ──────────────────────────────── */

.flip.is-holding .flip__inner {
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6));
  cursor: grabbing;
}
.flip.is-holding .tcard__shine { opacity: 1; }

/* ── 4. Сцена раскрытия раунда в «Состязании» ───────────────────────────── */

.ct-reveal { animation: ct-reveal-in .22s ease backwards; }
@keyframes ct-reveal-in { from { opacity: 0; } to { opacity: 1; } }
.ct-reveal.is-closing { animation: ct-reveal-out .28s ease forwards; }
@keyframes ct-reveal-out { to { opacity: 0; transform: scale(.97); } }

.ct-reveal__cat {
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255, 201, 60, .12); border: 1px solid rgba(255, 201, 60, .34);
}

.ct-reveal__cards { align-items: stretch; gap: 8px; }
.ct-reveal__side {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 0 1 40%; max-width: 186px;
}
.ct-reveal__side--mine { animation: ct-card-left .55s cubic-bezier(.2, .9, .3, 1) backwards; }
.ct-reveal__side--rival { animation: ct-card-right .55s cubic-bezier(.2, .9, .3, 1) backwards; }
@keyframes ct-card-left {
  from { opacity: 0; transform: translateX(-84%) rotate(-7deg); }
  to { opacity: 1; transform: none; }
}
@keyframes ct-card-right {
  from { opacity: 0; transform: translateX(84%) rotate(7deg); }
  to { opacity: 1; transform: none; }
}
.ct-reveal__side .tcard {
  width: 100%; aspect-ratio: 5 / 7;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
}
.ct-reveal__side .tcard__name { font-size: 10.5px; }
.ct-reveal__side .tcard__maker { font-size: 8.5px; }
.ct-reveal__side .tcard__stats { font-size: 8.5px; gap: 2px 6px; }
.ct-reveal__side .tcard__foot { font-size: 8.5px; padding-top: 4px; }
.ct-reveal__side .tcard__rarity,
.ct-reveal__side .tcard__year { font-size: 8.5px; }
.ct-reveal__side .tcard__photo { min-height: 34px; }

.ct-reveal__side.is-winner .tcard {
  outline: 2px solid #4ade80; outline-offset: 1px;
}
@keyframes ct-winner-glow {
  0%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 16px -2px #4ade80; }
  50% { box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 32px 2px #4ade80; }
}
.ct-reveal__side.is-loser .tcard { outline: 2px solid rgba(255, 107, 107, .85); outline-offset: 1px; }
.ct-reveal__side.is-loser .tcard__face--front { filter: saturate(.45) brightness(.68); }
.ct-reveal__side.is-loser .ct-reveal__who { color: #ff9aa2; }
.ct-reveal__side.is-draw .tcard { outline: 2px solid var(--gold); outline-offset: 1px; }
.ct-reveal__side.is-draw .ct-reveal__who { color: var(--gold); }
.ct-reveal__side.is-winner .ct-reveal__who { color: #6ee7a8; }

.ct-reveal__who { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.ct-reveal__value {
  display: block; width: 100%; padding: 6px 8px; border-radius: 9px;
  font-size: 14px; font-weight: 800; color: var(--gold);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.ct-reveal__side.is-winner .ct-reveal__value {
  color: #04160c; background: #4ade80; border-color: #4ade80;
}
.ct-reveal__side.is-loser .ct-reveal__value {
  color: #ffe3e3; background: rgba(255, 107, 107, .3); border-color: rgba(255, 107, 107, .6);
}
.ct-reveal__side.is-draw .ct-reveal__value {
  color: #1c1405; background: var(--gold); border-color: var(--gold);
}
.ct-reveal__vs { align-self: center; padding: 4px 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }

/* Плашка «Раунд ваш / Раунд соперника / Ничья» появляется после выезда карточек */
.ct-reveal__plate {
  padding: 9px 20px; border-radius: 99px;
  font-size: 19px; font-weight: 800;
  border: 1px solid var(--line);
  animation: ct-plate-in .5s cubic-bezier(.2, .9, .3, 1) .55s backwards;
}
@keyframes ct-plate-in {
  from { opacity: 0; transform: translateY(12px) scale(.82); }
  to { opacity: 1; transform: none; }
}
.ct-reveal__plate.is-win {
  color: #04160c; background: linear-gradient(160deg, #7ef0b4, #35c97c);
  border-color: #4ade80; box-shadow: 0 0 26px -4px #4ade80;
}
.ct-reveal__plate.is-loss {
  color: #fff2f2; background: linear-gradient(160deg, #ff8f8f, #d94b4b);
  border-color: #ff6b6b; box-shadow: 0 0 26px -4px #ff6b6b;
}
.ct-reveal__plate.is-draw {
  color: #1c1405; background: linear-gradient(160deg, #ffe08a, #ffc93c);
  border-color: var(--gold); box-shadow: 0 0 26px -4px var(--gold);
}


/* ── ВОЗВРАТ РАБОЧЕГО ПЕРЕВОРОТА ──────────────────────────────────────────
   Крутиться должен только .flip__inner (базовое правило выше). Слой
   .flipable в повороте не участвует: иначе 180° складывались с 180° и
   карточка была видна лицом ещё до нажатия «Открыть».                    */
.flipable,
.flipable.is-flipped { transform: none !important; }

/* Рубашка смотрит на зрителя, лицо ждёт своей очереди за ней */
.flip__inner .flip__back { transform: none; }
.flip__inner .flip__front { transform: rotateY(180deg); }

/* Скругление рубашки — как у карточки, а не квадрат */
.flip__inner .flip__back,
.flip__back .tcard__face--back { border-radius: 13px; }
.tcard__back-frame { border-radius: 11px; }


/* Жёстко закрепляем стороны: рубашка смотрит на зрителя, лицо развёрнуто
   на 180° и появляется только после поворота .flip__inner. */
.flip__inner .flip__back { transform: none !important; }
.flip__inner .flip__front { transform: rotateY(180deg) !important; }
.flip__inner .flip__back,
.flip__inner .flip__front {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}


/* Окно характеристик должно перекрывать сцену вскрытия пака */
#card-modal { z-index: 900; }

/* ── Уровни подписки: значки у ника и переливание ─────────────────────── */
/* 📌 — базовая и Plus, 📌 + 👑 — Pro. Ник переливается серебром у Plus
   и золотом у Pro; у базовой свечения нет. */

.sub-name {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; vertical-align: middle;
}
.sub-badge-icon {
  font-style: normal; font-size: 12px; line-height: 1;
  cursor: help; -webkit-user-select: none; user-select: none;
}
.sub-name.is-silver {
  background: linear-gradient(100deg, #dfe7ee 8%, #ffffff 28%, #8698a8 46%, #f2f7fb 66%, #c9d6df 88%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sub-silver 4.5s linear infinite;
}
.sub-name.is-gold {
  background: linear-gradient(100deg, #ffd75e 8%, #fff6cf 28%, #d99b2b 46%, #ffe89a 66%, #ffc93c 88%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sub-gold 3.6s linear infinite;
}
.sub-name.is-silver .sub-badge-icon,
.sub-name.is-gold .sub-badge-icon {
  -webkit-text-fill-color: initial;
  background: none;
  animation: none;
}
@keyframes sub-silver { from { background-position: 0% 50%; } to { background-position: 260% 50%; } }
@keyframes sub-gold   { from { background-position: 0% 50%; } to { background-position: 260% 50%; } }

/* Метка подписки в профиле: цвет рамки зависит от уровня */
.sub-badge { cursor: help; }
.sub-badge[title*="Plus"] {
  color: #dfe7ee; background: rgba(223,231,238,.10); border-color: rgba(223,231,238,.42);
}
.sub-badge[title*="Pro"] {
  color: #ffd75e; background: rgba(255,215,94,.13); border-color: rgba(255,215,94,.5);
}

/* Метка уровня в витрине звёзд */
.stars__tier {
  font-style: normal; font-size: 10.5px; padding: 2px 6px; border-radius: 6px;
  margin-left: 6px; color: var(--text); border: 1px solid var(--line);
  background: rgba(255,255,255,.06); font-weight: 700; vertical-align: middle;
}

/* ── Подарки от админа в магазине ─────────────────────────────────────── */

.gifts { margin-top: 6px; }
.gifts__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.gifts__title { font-size: 14px; font-weight: 700; }
.gifts__hint { font-size: 11px; color: var(--muted); text-align: right; }
.gifts__list { display: flex; flex-direction: column; gap: 9px; }

.gift {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  border-radius: 14px; border: 1px solid rgba(74,163,255,.34);
  background: linear-gradient(150deg, rgba(74,163,255,.14), rgba(20,29,43,.92));
}
.gift--coins {
  border-color: rgba(255,201,60,.36);
  background: linear-gradient(150deg, rgba(255,201,60,.13), rgba(20,29,43,.92));
}
.gift__emoji { font-size: 26px; }
.gift__body { flex: 1; min-width: 0; display: block; }
.gift__title { display: block; font-size: 14px; font-weight: 650; }
.gift__caption {
  display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4;
}
.gift__side { display: flex; align-items: center; }
.gift__go {
  width: auto; margin: 0; padding: 10px 14px; font-size: 13px; white-space: nowrap;
}
.gift__go:disabled { opacity: .5; }

/* Подарок-подписка: рамка и фон зависят от уровня */
.gift--sub {
  border-color: rgba(176,108,255,.38);
  background: linear-gradient(150deg, rgba(176,108,255,.15), rgba(20,29,43,.92));
}
.gift--sub.tier-plus {
  border-color: rgba(223,231,238,.42);
  background: linear-gradient(150deg, rgba(223,231,238,.14), rgba(20,29,43,.92));
}
.gift--sub.tier-pro {
  border-color: rgba(255,215,94,.5);
  background: linear-gradient(150deg, rgba(255,215,94,.15), rgba(20,29,43,.92));
}
/* ── Публичный ID игрока, друзья и сравнение карточек ─────────────────── */

.pid {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(126,231,168,.16), rgba(20,29,43,.92));
  border: 1px solid rgba(126,231,168,.34);
}
.pid__label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pid__value {
  font-size: 24px; font-weight: 800; letter-spacing: .14em;
  font-variant-numeric: tabular-nums; color: #b6ffd8;
  text-shadow: 0 0 18px rgba(126,231,168,.35);
}
.pid__hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.pcard__id { display: block; font-size: 11.5px; color: #9fe9c4; margin-top: 3px; letter-spacing: .04em; }

.friend-list { display: flex; flex-direction: column; gap: 9px; }
.friend {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 13px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
}
.friend__top { display: flex; align-items: center; gap: 11px; }
.friend__body { flex: 1; min-width: 0; }
.friend__name { display: block; font-size: 14px; font-weight: 650; }
.friend__meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.friend__meta b { color: #9fe9c4; letter-spacing: .06em; }
.friend__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.friend__actions button { flex: 1 1 40%; margin-top: 0; padding: 10px 12px; font-size: 13px; }
.ghost--danger { color: #ff9f9f; border-color: rgba(255,143,143,.4); }

.friend-relation-bar { display: flex; width: 100%; }
.friend-relation-bar button { width: 100%; margin-top: 4px; }
.friend-relation {
  display: block; width: 100%; padding: 10px 12px; border-radius: 12px; font-size: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted);
}
.friend-relation b { color: #9fe9c4; letter-spacing: .06em; }

/* Кнопки «Сравнить», «Обмен» и «Выкупить» под карточкой друга */
.grid-cell { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cell-compare {
  width: 100%; margin: 0; padding: 8px 10px; font: inherit; font-size: 12px; cursor: pointer;
  color: var(--text); border-radius: 10px;
  background: rgba(74,163,255,.16); border: 1px solid rgba(74,163,255,.4);
}
.cell-compare:active { transform: scale(.98); }

/* Экран сравнения */
.cmp-picks { display: flex; gap: 10px; margin-top: 12px; }
.cmp-picks__side { flex: 1; min-width: 0; }
.cmp-picks__label {
  display: block; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.cmp-picks__list {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.cmp-pick {
  flex: 0 0 auto; width: 92px; padding: 6px; cursor: pointer; font: inherit; text-align: center;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  transition: border-color .18s ease, transform .12s ease;
}
.cmp-pick img { width: 100%; height: 52px; object-fit: cover; border-radius: 8px; display: block; }
.cmp-pick__icon { font-size: 26px; height: 52px; display: flex; align-items: center; }
.cmp-pick__name { font-size: 10.5px; line-height: 1.25; color: var(--text); }
.cmp-pick.is-active { border-color: var(--rarity, #4aa3ff); box-shadow: 0 0 14px -4px var(--rarity, #4aa3ff); }
.cmp-pick:active { transform: scale(.97); }

.cmp { margin-top: 16px; }
.cmp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  font-size: 12px;
}
.cmp-head__side { flex: 1; min-width: 0; font-weight: 650; text-align: center; }
.cmp-head__vs { font-size: 10.5px; color: var(--muted); text-transform: uppercase; }

.cmp-table { margin-top: 10px; }
.cmp-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: center;
  padding: 7px 4px; border-bottom: 1px solid rgba(126,160,205,.12); font-size: 12px;
}
.cmp-row__label { color: var(--muted); font-size: 11.5px; }
.cmp-row__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.cmp-row__value.is-better { color: #6ee7a8; }
.cmp-row__value.is-worse { color: #ff8f8f; }
.cmp-row__value.is-equal { color: var(--text); }

.cmp-total {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 700;
  background: linear-gradient(150deg, rgba(74,163,255,.16), rgba(20,29,43,.92));
  border: 1px solid rgba(74,163,255,.34);
}

/* Ценность карточки в её карточке */
.value-block { margin-top: 10px; }
.value {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(255,201,60,.14), rgba(20,29,43,.9));
  border: 1px solid rgba(255,201,60,.32);
}
.value__label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.value__number { font-size: 18px; font-weight: 800; color: var(--gold); }
.value__hint { font-size: 10.5px; color: #64758f; margin: 6px 0 0; line-height: 1.5; }


/* ── Ливрея красит саму карточку ──────────────────────────────────────────
   По умолчанию карточка чёрная; с ливреей она принимает её цвет.
   Тонировка сделана внутренней тенью: она ложится на фон, но не
   перекрывает ни фотографию, ни текст.                                  */
.tcard[data-livery="bronze"] .tcard__face {
  box-shadow: inset 0 0 0 200px rgba(196, 122, 58, .22);
}
.tcard[data-livery="silver"] .tcard__face {
  box-shadow: inset 0 0 0 200px rgba(196, 208, 222, .24);
}
.tcard[data-livery="gold"] .tcard__face {
  box-shadow: inset 0 0 0 200px rgba(228, 183, 64, .24);
}
.tcard[data-livery="anniversary"] .tcard__face {
  box-shadow: inset 0 0 0 200px rgba(212, 96, 128, .22);
}
.tcard[data-livery="special"] .tcard__face {
  box-shadow: inset 0 0 0 200px rgba(74, 210, 170, .22);
}
.tcard[data-livery="diamond"] .tcard__face {
  box-shadow: inset 0 0 0 200px rgba(120, 216, 255, .26);
}
/* Тонкая рамка в цвет ливреи, чтобы карточка читалась как «металлическая» */
.tcard[data-livery="bronze"] { border-color: rgba(196, 122, 58, .75); }
.tcard[data-livery="silver"] { border-color: rgba(196, 208, 222, .8); }
.tcard[data-livery="gold"] { border-color: rgba(228, 183, 64, .85); }
.tcard[data-livery="anniversary"] { border-color: rgba(212, 96, 128, .75); }
.tcard[data-livery="special"] { border-color: rgba(74, 210, 170, .75); }
.tcard[data-livery="diamond"] { border-color: rgba(120, 216, 255, .85); }


/* ── Витрина паков: плитка 2 в ряд, как сами упаковки ───────────────────── */
#pack-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 10px 12px;
  text-align: center;
  border-radius: 3px;           /* прямоугольник, как сам пак */
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(150, 200, 255, .38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08) 0 18%, rgba(255, 255, 255, 0) 18%),
    linear-gradient(160deg, #26374b, #101a26 70%);
}

.pack-card:disabled { opacity: .5; }

.pack-card__emoji {
  font-size: 32px;
  line-height: 1.1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

.pack-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pack-card__name { font-size: 12.5px; font-weight: 650; line-height: 1.25; }
.pack-card__desc {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pack-card__price {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

/* ── Кнопки на карточке чужого профиля: сравнить, обмен, выкуп ────────────
   Раньше под карточкой была одна кнопка «Сравнить». Теперь их три, и они
   ужимаются в столбик, чтобы название борта не пострадало.                */
.cell-actions { display: flex; flex-direction: column; gap: 5px; }
.cell-action {
  width: 100%; margin: 0; padding: 7px 8px; font: inherit; font-size: 11.5px; cursor: pointer;
  color: var(--text); border-radius: 10px; white-space: nowrap;
  background: rgba(74,163,255,.16); border: 1px solid rgba(74,163,255,.4);
}
.cell-action:active { transform: scale(.98); }
.cell-action--trade { background: rgba(126,231,168,.14); border-color: rgba(126,231,168,.4); }
.cell-action--buy { background: rgba(255,201,60,.14); border-color: rgba(255,201,60,.4); }
.cell-action:disabled { opacity: .5; }

/* ── Выкуп карточки за монеты ──────────────────────────────────────────── */
.buyout-card {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 13px;
  margin-bottom: 14px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,201,60,.12), rgba(20,29,43,.92));
  border: 1px solid rgba(255,201,60,.3);
}
.buyout-card__top { display: flex; align-items: center; gap: 11px; }
.buyout-card__shot { width: 64px; height: 44px; object-fit: cover; border-radius: 9px; }
.buyout-card__icon { font-size: 26px; }
.buyout-card__name { display: block; font-size: 14px; font-weight: 650; }
.buyout-card__meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.buyout-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.buyout-quick .ghost { flex: 1 1 30%; margin-top: 0; padding: 9px 8px; font-size: 12px; }

/* Предложения выкупа в списке обмена: цена в чипе, статус вместо кнопок */
.trade-card--buyout { border-color: rgba(255,201,60,.34); }
.trade-card--buyout.is-closed { opacity: .72; }
.trade-chip--status { color: var(--muted); }

/* ── Друзья в своём профиле ────────────────────────────────────────────── */
#my-friend-tabs { margin: 14px 0 4px; }
#my-profile-pane-friends .sect { margin-top: 18px; }

/* ── Профиль: один вертикальный поток одинаковых блоков ───────────────────
   Свой профиль и профиль другого игрока собираются одним кодом, поэтому
   стили общие. Блоки тянутся на всю ширину, отступы ровные, ничего не
   обрезается на узком экране (360–430 px).                              */

.profile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-block {
  position: relative;
  padding: 14px 14px 15px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.profile-block--head {
  background: linear-gradient(155deg, rgba(74, 163, 255, .13), rgba(20, 29, 43, .94));
  border-color: rgba(74, 163, 255, .3);
}

.profile-block__title {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-sub {
  margin: 16px 0 8px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
}

/* Шапка: аватар, имя со значком подписки, звание */
.profile-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
}
.profile-head__body { flex: 1; min-width: 0; }
.profile-head__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.profile-head__rank {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.profile-head__friend { margin-top: 12px; }

/* Персональный ID: крупно, но с переносом — длинный код не вылезет за экран */
.profile-block .pid { padding: 11px 13px; }
.profile-block .pid__value { font-size: 21px; letter-spacing: .1em; overflow-wrap: anywhere; }
.pid--other { background: linear-gradient(150deg, rgba(74, 163, 255, .14), rgba(20, 29, 43, .92)); border-color: rgba(74, 163, 255, .3); }
.pid--other .pid__value { color: #bcdcff; text-shadow: 0 0 18px rgba(74, 163, 255, .3); }

/* Уровень, монеты, серия и паки — плиткой, чтобы влезало на 360 px */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.profile-stats__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  min-width: 0;
}
.profile-stats__cell span { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.profile-stats__cell b { font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* Полоса прогресса с подписью и процентами */
.profile-bar { margin-top: 10px; }
.profile-bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 5px;
}
.profile-bar__top b { color: var(--text); font-variant-numeric: tabular-nums; }
.profile-bar__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.profile-bar__track i { display: block; height: 100%; border-radius: 999px; background: #4aa3ff; }

.profile-note {
  margin-top: 11px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.profile-note b { color: var(--text); }

/* Витрина: самые ценные карточки и их цена в монетах */
.profile-showcase { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-showcase__cell {
  position: relative;
  flex: 1 1 128px;
  max-width: calc(50% - 5px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.profile-showcase__value {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Кнопка дружбы в шапке чужого профиля */
.profile-head__friend .primary,
.profile-head__friend .ghost { width: 100%; margin-top: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   Улучшение карточек за дубликаты и новые уровни подписки.
   Блок только дополняет прежние правила, ничего не отменяя.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Зелёное свечение ника у базовой подписки ─────────────────────────── */
/* 🟢 у базовой, «+» у Plus и «+👑» у Pro: ник переливается зелёным,
   серебром и золотом — по цене уровня. */
.sub-name.is-green {
  background: linear-gradient(100deg, #86efac 8%, #f1fff6 28%, #22c55e 46%, #d7fbe6 66%, #4ade80 88%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sub-green 4.5s linear infinite;
}
.sub-name.is-green .sub-badge-icon {
  -webkit-text-fill-color: initial;
  background: none;
  animation: none;
}
@keyframes sub-green { from { background-position: 0% 50%; } to { background-position: 260% 50%; } }

/* Метка подписки в профиле: у базовой зелёная рамка */
.sub-badge[title*="Базовая"] {
  color: #86efac; background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.45);
}

/* ── 2. Звёзды улучшения на обороте карточки ─────────────────────────────── */
/* Свечение редкости и ливреи остаётся, поверх него ложится золотое:
   чем больше звёзд, тем плотнее. Ноль звёзд — классов и слоёв нет. */
.tcard--stars .tcard__face--back {
  box-shadow:
    inset 0 0 26px -8px rgba(255,255,255,.95),
    inset 0 0 30px -6px rgba(255,201,60,.55),
    0 0 24px calc(var(--stars, 1) * 1.6px) rgba(255,201,60,.5);
}
.tcard__goldglow {
  position: absolute; inset: -12%; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,229,150,.6) 0%, rgba(255,201,60,.3) 42%, rgba(255,201,60,0) 74%);
  mix-blend-mode: screen;
  opacity: calc(.32 + var(--stars, 1) * .12);
  animation: star-glow 2.8s ease-in-out infinite;
}
@keyframes star-glow {
  0%, 100% { transform: scale(1); opacity: calc(.3 + var(--stars, 1) * .11); }
  50% { transform: scale(1.05); opacity: calc(.48 + var(--stars, 1) * .1); }
}
.tcard__stars {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 4;
  text-align: center; font-size: .8em; letter-spacing: .14em; text-indent: .14em;
  color: #ffcf4d; pointer-events: none;
  text-shadow: 0 0 6px rgba(255,201,60,.95), 0 0 14px rgba(255,167,38,.75),
               0 1px 0 rgba(120,70,0,.4);
}

/* ── 3. Блок улучшения в окне карточки ───────────────────────────────────── */
.upgrade {
  margin-top: 10px; padding: 12px 14px; border-radius: 13px;
  background: linear-gradient(150deg, rgba(255,201,60,.13), rgba(20,29,43,.9));
  border: 1px solid rgba(255,201,60,.3);
}
.upgrade__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.upgrade__label {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}
.upgrade__stars {
  font-size: 15px; letter-spacing: 2px; color: var(--gold);
  text-shadow: 0 0 10px rgba(255,201,60,.6);
}
.upgrade__bar {
  height: 8px; border-radius: 999px; margin-top: 9px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.upgrade__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffb830, #ffd75e, #fff3c4);
  box-shadow: 0 0 12px rgba(255,201,60,.6);
  transition: width .3s ease;
}
.upgrade__hint { font-size: 10.5px; line-height: 1.5; color: var(--muted); margin: 7px 0 0; }
.upgrade__hint b { color: var(--text); }
.upgrade__button { margin-top: 10px; }

/* ── Серия входов: полноэкранная награда за ежедневный вход ───────────── */

/* Сцена стоит ниже вскрытия пака (150) и выше обычных модальных окон:
   награда-пак открывается поверх неё своими силами. */
.streak {
  position: fixed; inset: 0; z-index: 145;
  display: flex; align-items: center; justify-content: center;
  padding: calc(18px + var(--safe-top)) 16px calc(18px + var(--safe-bottom));
  overflow-y: auto;
  background: radial-gradient(120% 80% at 50% 0%, #1d2a42 0%, #0a1220 45%, #04070d 100%);
  animation: streak-in .35s ease-out;
}
.streak__sky {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 12%, rgba(255, 146, 60, .18), transparent 70%),
    radial-gradient(50% 40% at 85% 20%, rgba(74, 163, 255, .16), transparent 70%);
}
.streak__box {
  position: relative;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(32, 45, 68, .96), rgba(12, 19, 31, .96));
  border: 1px solid rgba(255, 176, 74, .28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.streak__head { text-align: center; }
.streak__fire { font-size: 40px; line-height: 1; animation: streak-fire 1.8s ease-in-out infinite; }
.streak__title {
  margin: 8px 0 0; font-size: 23px; letter-spacing: .4px;
  background: linear-gradient(90deg, #ffd75e, #ff9a3c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.streak__day { margin-top: 6px; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.streak__best { margin-top: 4px; font-size: 11.5px; color: var(--muted); }

/* Полоса из семи ячеек: полученные закрыты, сегодняшняя выделена,
   будущие приглушены */
.streak__track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.streak__cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  opacity: .45;
}
.streak__cell.is-done {
  opacity: 1;
  background: linear-gradient(180deg, rgba(126, 231, 168, .18), rgba(20, 29, 43, .85));
  border-color: rgba(126, 231, 168, .45);
}
.streak__cell.is-today {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255, 201, 60, .22), rgba(20, 29, 43, .9));
  border-color: rgba(255, 201, 60, .6);
  animation: streak-today 2.2s ease-in-out infinite;
}
.streak__cell-day { font-size: 10px; color: var(--muted); }
.streak__cell-icon { font-size: 17px; line-height: 1; }
.streak__cell-note { font-size: 9px; line-height: 1; color: var(--muted); min-height: 9px; }
.streak__cell.is-done .streak__cell-note { color: #7ee7a8; }
.streak__cell.is-today .streak__cell-note { color: var(--gold); }

/* Сегодняшняя награда — крупно */
.streak__reward {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 201, 60, .16), rgba(20, 29, 43, .9));
  border: 1px solid rgba(255, 201, 60, .3);
}
.streak__reward-icon { font-size: 34px; line-height: 1; }
.streak__reward-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.streak__reward-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.streak__reward-title { font-size: 18px; font-weight: 800; }
.streak__reward-desc { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.streak__claim { width: 100%; }
.streak__hint { font-size: 11px; line-height: 1.5; color: var(--muted); text-align: center; }

@keyframes streak-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes streak-fire {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.06); }
}
@keyframes streak-today {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 201, 60, .18), 0 0 14px rgba(255, 201, 60, .16); }
  50% { box-shadow: 0 0 0 2px rgba(255, 201, 60, .34), 0 0 24px rgba(255, 201, 60, .34); }
}

/* Бессрочная блокировка: тот же экран, но без отсчёта времени */
.maint--lock .maint__box { border-color: rgba(255, 107, 107, .42); }
.maint--lock .maint__icon { animation: maint-works 2.4s ease-in-out infinite; }
@keyframes maint-works {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Покупка нескольких паков: меню открывается удержанием на паке */
.pack-card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pack-card.is-holding {
  border-color: rgba(74, 163, 255, .55);
  box-shadow: 0 0 0 1px rgba(74, 163, 255, .35);
}
.pack-count {
  z-index: 160; justify-content: safe center; align-items: center;
  overflow-y: auto; padding: calc(18px + var(--safe-top)) 14px 18px;
}
.pack-count__box { width: min(92vw, 420px); padding: 18px 16px; }
.pack-count__list { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.pack-count__row {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 11px 13px; cursor: pointer; text-align: left; font: inherit;
  color: var(--text); border-radius: 13px; background: var(--panel);
  border: 1px solid var(--line);
}
.pack-count__row:active { transform: scale(.985); }
.pack-count__row:disabled { opacity: .45; cursor: default; }
.pack-count__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.pack-count__head b { font-size: 14px; font-weight: 700; }
.pack-count__sum { font-size: 13px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.pack-count__hint { font-size: 11px; color: var(--muted); }
.pack-count__balance { margin: 0 0 12px; }
.summary__row--spent { border-color: rgba(255, 107, 107, .35); }