/* Мини-апп Football Cards в оформлении «CARDS - битва»: тёмный стадион, стеклянные
   панели с неоновой кромкой, золото для главных действий. Одна колонка под телефон:
   главные экраны помещаются целиком, листаются только списки. */

:root {
  --ink: #f2faf5;
  --muted: rgba(208, 226, 218, .64);
  --soft: #b3bcd2;
  --gold: #ffc83a;
  --gold-2: #f59e0b;
  --neon: #45f07e;
  --line: rgba(160, 255, 200, .12);
  --edge: rgba(120, 255, 175, .24);
  --glass: linear-gradient(180deg, rgba(16, 44, 32, .7), rgba(4, 16, 11, .82));
  --panel: rgba(255, 255, 255, .05);
  --side: max(8px, calc(50% - 250px));
  --top: calc(env(safe-area-inset-top) + 76px);
  --bottom: calc(env(safe-area-inset-bottom) + 80px);

  --r-base: #9aa6a0;
  --r-coach: #3ddc72;
  --r-star: #3aa3ff;
  --r-superstar: #b06cff;
  --r-prime: #ff8a3d;
  --r-shadow: #7b86ff;
  --r-limited: #e5484d;
  --r-idol: #ffc32b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; background: #020b06; }

body {
  margin: 0;
  min-height: 100%;
  font: 14px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--ink);
  padding: var(--top) 0 var(--bottom);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
/* стадион в зелёных огнях и неоновые полосы по краям — за всеми экранами */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: #020b06 url(/img/ui/bg.jpg) center 34% / cover no-repeat;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(116deg, transparent 6%, rgba(70, 255, 130, .13) 8%, transparent 11%),
    linear-gradient(116deg, transparent 87%, rgba(70, 255, 130, .12) 89.5%, transparent 92%),
    radial-gradient(70% 22% at 50% 0%, rgba(60, 255, 130, .14), transparent 75%);
}

b { font-weight: 700; }
i, em { font-style: normal; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
img { display: block; -webkit-user-drag: none; user-select: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }

.ico { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; fill: currentColor; }
.chev { width: 14px; height: 14px; flex: none; color: rgba(226, 238, 232, .78); }
.flag {
  display: inline-block; width: 1.3em; height: .98em; border-radius: 2px; object-fit: cover;
  vertical-align: -.14em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

/* ---------- шапка ---------- */

#bar {
  position: fixed; z-index: 20;
  top: calc(env(safe-area-inset-top) + 6px); left: var(--side); right: var(--side); height: 62px;
  padding: 0 5px 0 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(14, 38, 30, .93), rgba(4, 14, 11, .94));
  border: 1px solid rgba(120, 255, 175, .2);
  box-shadow: inset 0 1px 0 rgba(170, 255, 210, .12), 0 10px 26px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#bar::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #6dff9c 28%, #c4ff7a 50%, #6dff9c 72%, transparent);
  box-shadow: 0 0 12px 1px rgba(90, 255, 150, .5);
}
.who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; cursor: pointer; }
.ava {
  position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0, 60, 20, .6);
  background: radial-gradient(circle at 35% 28%, #9dffae, #2cc25a 48%, #0f7a33 100%);
  box-shadow: 0 0 0 2px rgba(190, 255, 205, .5), 0 0 14px rgba(60, 255, 120, .4), inset 0 -4px 8px rgba(0, 60, 20, .35);
}
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.who-txt { min-width: 0; display: grid; gap: 0; }
.who-txt > b { font-size: 14px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-txt i { display: flex; align-items: flex-start; gap: 2px; min-width: 0; color: var(--muted); }
.who-txt i .ico { width: 10px; height: 10px; margin-top: 1px; color: #98a7bf; }
.who-txt i.pts .ico { fill: url(#g-gold); }
.who-txt i span { display: grid; min-width: 0; }
.who-txt em { font-size: 10.5px; line-height: 11px; font-weight: 600; color: #e3ece7; white-space: nowrap; }
.who-txt i.pts em { font-weight: 800; color: #fff; }
.who-txt small { font-size: 8px; line-height: 8px; color: var(--muted); }

.wallet { display: flex; align-items: center; gap: 3px; flex: none; }
.coin {
  display: flex; align-items: center; gap: 2px; height: 31px;
  padding: 0 3px 0 2px; border-radius: 999px; font-size: 13px;
  background: linear-gradient(180deg, rgba(2, 12, 8, .88), rgba(6, 22, 15, .88));
  border: 1px solid rgba(90, 255, 150, .4);
  box-shadow: inset 0 0 10px rgba(60, 255, 130, .12), 0 0 8px rgba(60, 255, 130, .12);
}
.coin b { min-width: 9px; padding: 0 1px; text-align: center; font-variant-numeric: tabular-nums; }
.coin .ico { width: 21px; height: 21px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.coin .plus {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 15px; line-height: 1;
  color: #03230f;
  background: radial-gradient(circle at 35% 30%, #8dffa6, #22c55a 60%, #128a3c);
  box-shadow: 0 0 8px rgba(60, 255, 120, .55), inset 0 -2px 3px rgba(0, 60, 20, .35);
}
.coin.energy { padding: 0 7px 0 4px; gap: 1px; border-color: rgba(255, 200, 60, .5); box-shadow: inset 0 0 10px rgba(255, 190, 40, .12), 0 0 8px rgba(255, 190, 40, .14); }
.coin.energy .ico { width: 17px; height: 17px; fill: url(#g-bolt); filter: drop-shadow(0 0 4px rgba(255, 200, 40, .7)); }
.coin.energy.low b { color: #ff8a8a; }

.bell {
  position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(58, 40, 0, .85), rgba(8, 10, 4, .92));
  border: 1.5px solid rgba(255, 196, 60, .78);
  box-shadow: 0 0 10px rgba(255, 190, 40, .3), inset 0 0 8px rgba(255, 190, 40, .2);
}
.bell .ico { width: 19px; height: 19px; fill: url(#g-gold); }
.badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; font-weight: 900; font-style: normal; color: #fff;
  background: #e5484d; box-shadow: 0 0 0 2px #041a0d, 0 0 8px rgba(229, 72, 77, .6);
}

@media (max-width: 374px) {
  .coin .plus { display: none; }
  .coin { padding-right: 8px; }
  .ava { width: 38px; height: 38px; font-size: 18px; }
}

/* ---------- нижнее меню ---------- */

#tabs {
  position: fixed; z-index: 20; left: max(6px, calc(50% - 252px)); right: max(6px, calc(50% - 252px));
  bottom: calc(env(safe-area-inset-bottom) + 6px); height: 64px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(12, 30, 26, .95), rgba(3, 12, 9, .97));
  border: 1px solid rgba(130, 255, 190, .16);
  box-shadow: inset 0 1px 0 rgba(170, 255, 210, .1), 0 -6px 24px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#tabs button {
  --acc: #8cff6a; --acc-2: #2fd35a;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--soft); font-size: 12px; font-weight: 500;
}
#tabs button + button { background: linear-gradient(180deg, transparent 22%, rgba(255, 255, 255, .08) 50%, transparent 78%) 0 0 / 1px 100% no-repeat; }
#tabs [data-tab="cards"], #tabs [data-tab="rating"] { --acc: #ffd23f; --acc-2: #f59e0b; }
#tabs .ico { width: 27px; height: 27px; fill: url(#g-nav); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
#tabs button.on { color: var(--acc); font-weight: 600; }
#tabs button.on .ico { fill: url(#g-green); filter: drop-shadow(0 0 7px var(--acc)); }
#tabs [data-tab="cards"].on .ico, #tabs [data-tab="rating"].on .ico { fill: url(#g-gold); }
#tabs button.on::before {
  content: ""; position: absolute; top: -1px; left: 27%; right: 27%; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--acc); box-shadow: 0 0 12px 1px var(--acc);
}
#tabs button.on::after {
  content: ""; position: absolute; bottom: 5px; left: 20%; right: 20%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--acc-2), var(--acc), var(--acc-2)); box-shadow: 0 0 8px var(--acc);
}
#tabs .badge { top: 5px; right: calc(50% - 24px); }

/* ---------- общее ---------- */

#screen { max-width: 520px; margin: 0 auto; padding: 0 10px 12px; }
#screen.full {
  min-height: calc(100vh - var(--top) - var(--bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.loading { padding: 40px; text-align: center; color: var(--muted); }

.panel {
  background: var(--glass); border: 1px solid var(--edge); border-radius: 18px; padding: 12px; margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .25);
}
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h3 { margin: 0 0 4px; font-size: 15px; }
.sub { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.tag {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, rgba(20, 42, 34, .9), rgba(6, 16, 12, .9)); border: 1px solid rgba(160, 255, 200, .2);
}
.tag.on {
  color: #fff; border-color: #8dffb0;
  background: linear-gradient(180deg, #3fe07a, #148a42);
  box-shadow: 0 0 12px rgba(70, 255, 130, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.big {
  position: relative; display: block; width: 100%; padding: 12px; border-radius: 18px;
  font-size: 16px; font-weight: 900; color: #1c1300; text-align: center; letter-spacing: .3px;
  background: linear-gradient(180deg, #fff39a 0%, #ffd83d 34%, #ffb81c 72%, #ff9d0a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(170, 80, 0, .3),
    0 0 0 1px rgba(255, 240, 150, .9), 0 0 16px rgba(255, 205, 50, .35), 0 4px 0 #b86400, 0 10px 20px rgba(0, 0, 0, .4);
}
.big small { display: block; font-size: 11.5px; font-weight: 700; opacity: .85; letter-spacing: 0; }
.big:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(255, 240, 150, .9), 0 1px 0 #b86400; }
.big[disabled] { filter: grayscale(.75) brightness(.8); box-shadow: none; }
.ghost {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 10px 8px; border-radius: 14px; font-weight: 700; font-size: 13px; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, rgba(22, 50, 38, .8), rgba(7, 22, 15, .86));
  border: 1px solid rgba(130, 255, 180, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ghost:active { transform: translateY(1px); }
.ghost[disabled] { opacity: .45; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* строка-ссылка со светящейся кромкой слева: рейтинг, игры, сквады */
.lrow {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 72px; padding: 10px 14px 10px 16px; margin-bottom: 10px; text-align: left; border-radius: 18px; overflow: hidden;
  background: linear-gradient(90deg, rgba(22, 66, 42, .74), rgba(6, 24, 17, .86) 42%, rgba(4, 16, 12, .88));
  border: 1px solid rgba(120, 255, 170, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px rgba(0, 0, 0, .3);
}
.lrow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #b0ff6a, #22c55a); box-shadow: 0 0 14px 2px rgba(70, 255, 120, .7);
}
.lrow:active { transform: translateY(1px); }
.lr-ico {
  position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #0f3d22, #04160b);
  border: 2px solid rgba(90, 255, 140, .72);
  box-shadow: 0 0 12px rgba(60, 255, 120, .35), inset 0 0 10px rgba(60, 255, 120, .25);
}
.lr-ico .ico { width: 24px; height: 24px; fill: url(#g-green); color: #6dff8a; filter: drop-shadow(0 0 4px rgba(90, 255, 130, .5)); }
.lrow .lr-txt { min-width: 0; }
.lrow .lr-txt > b { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .lr-txt > small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .lr-txt > b em { color: #58f08a; font-size: 25px; font-weight: 900; line-height: 1; vertical-align: -2px; text-shadow: 0 0 12px rgba(80, 255, 130, .5); }
.lrow .chev { width: 17px; height: 17px; }
.lrow.slim { min-height: 56px; grid-template-columns: 36px minmax(0, 1fr) auto; }
.lrow.slim .lr-txt > b { font-size: 14px; font-weight: 600; }
.lrow.slim > .ico { width: 34px; height: 34px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); }
.lr-go {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #3fe07a, #148a42); border: 1px solid #8dffb0; box-shadow: 0 0 10px rgba(70, 255, 130, .4);
}
.lr-go.off { color: var(--ink); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.lrow > .badge { top: 9px; right: 38px; }

/* ---------- главная ---------- */

.hero {
  position: relative; flex: 1; min-height: 250px; border-radius: 24px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px;
  background: #0a2438;
  box-shadow: 0 0 22px rgba(60, 200, 255, .16), 0 10px 30px rgba(0, 0, 0, .45);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover; object-position: 50% 30%;
  transform-origin: 46% 72%; animation: herozoom 16s ease-in-out infinite alternate;
}
@keyframes herozoom { to { transform: scale(1.045); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 26% at 0% 100%, rgba(60, 255, 130, .3), transparent 70%),
    radial-gradient(40% 22% at 100% 88%, rgba(60, 255, 150, .18), transparent 70%),
    linear-gradient(180deg, rgba(2, 10, 20, .12), transparent 26%, transparent 70%, rgba(2, 14, 6, .5));
}
/* светящаяся рамка: голубая сверху, зелёная снизу */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(180deg, rgba(150, 230, 255, .8), rgba(80, 255, 170, .2) 45%, rgba(70, 255, 140, .75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.hero .side { position: absolute; right: 9px; top: 9px; width: 45%; display: grid; gap: 6px; z-index: 1; }
.tile {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; align-items: center; gap: 8px;
  padding: 9px 8px 9px 9px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, rgba(8, 30, 26, .84), rgba(3, 14, 12, .8));
  border: 1px solid rgba(120, 255, 200, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .35);
}
.tile:active { transform: translateY(1px); }
.tile > .ico { width: 30px; height: 30px; fill: url(#g-gold); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.tile b { display: block; font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .chev { width: 12px; height: 12px; }

.play {
  position: relative; z-index: 2; overflow: hidden;
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 6px;
  width: 100%; min-height: 66px; padding: 6px 16px 8px 12px; border-radius: 22px; color: #1c1300; text-align: center;
  background: linear-gradient(180deg, #fff39a 0%, #ffd83d 34%, #ffb81c 72%, #ff9d0a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(170, 80, 0, .35),
    0 0 0 1.5px rgba(255, 240, 150, .95), 0 0 22px rgba(255, 205, 50, .5),
    0 5px 0 #b86400, 0 12px 26px rgba(0, 0, 0, .5);
}
.play::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
  transform: translateX(-120%); animation: dropshine 4.2s ease-in-out infinite;
}
.play > .ico { width: 40px; height: 40px; filter: drop-shadow(0 2px 3px rgba(120, 60, 0, .45)); animation: roll 7s linear infinite; }
@keyframes roll { to { transform: rotate(1turn); } }
.play b { display: block; font-size: 25px; font-weight: 900; line-height: 1.05; letter-spacing: .6px; }
.play small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play .chev { width: 18px; height: 18px; color: #1c1300; }
.play:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), 0 0 0 1.5px rgba(255, 240, 150, .95), 0 2px 0 #b86400; }
.play[disabled] { filter: grayscale(.7) brightness(.8); }

.drop {
  position: relative; overflow: hidden; width: 100%;
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  min-height: 70px; padding: 6px 16px 6px 10px; border-radius: 18px; text-align: left;
  background:
    linear-gradient(118deg, transparent 52%, rgba(190, 150, 255, .22) 56%, transparent 61%),
    linear-gradient(118deg, transparent 66%, rgba(190, 150, 255, .15) 69%, transparent 73%),
    radial-gradient(90% 150% at 0% 50%, rgba(70, 100, 255, .5), transparent 60%),
    linear-gradient(100deg, #16167a 0%, #291f9e 40%, #4a22b8 75%, #381994 100%);
  border: 1px solid rgba(160, 140, 255, .7);
  box-shadow: 0 0 0 1px rgba(70, 120, 255, .25), 0 0 20px rgba(110, 80, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.drop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
  transform: translateX(-120%); animation: dropshine 3.2s ease-in-out infinite;
}
@keyframes dropshine { 60%, 100% { transform: translateX(120%); } }
.drop:active { transform: translateY(2px); }
.drop-card { width: 54px; height: 58px; filter: drop-shadow(0 0 5px rgba(140, 90, 255, .9)) drop-shadow(0 0 2px rgba(255, 80, 220, .7)); animation: bob 2.6s ease-in-out infinite; }
.drop-txt { min-width: 0; }
.drop-txt b { display: block; font-size: 21px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-txt small { display: block; margin-top: 2px; font-size: 14px; color: #bab5ff; }
.drop .chev { width: 18px; height: 18px; color: #fff; }
.drop.off { filter: saturate(.5) brightness(.82); }

.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.slot {
  position: relative; min-width: 0; border-radius: 16px; padding: 8px 3px; text-align: center;
  background: linear-gradient(180deg, rgba(14, 38, 36, .88), rgba(4, 16, 15, .92));
  border: 1px solid rgba(120, 230, 210, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 14px rgba(0, 0, 0, .3);
}
.slot:active { transform: translateY(2px); }
.chest { display: block; width: 62px; height: 48px; margin: 0 auto 3px; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .5)); }
.slot .name { font-size: 11.5px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .when { margin-top: 1px; font-size: 12px; color: #a9c0e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.ready {
  border-color: rgba(200, 255, 100, .95);
  box-shadow: 0 0 0 1px rgba(170, 255, 80, .35), 0 0 16px rgba(150, 255, 70, .45), inset 0 0 16px rgba(150, 255, 70, .16);
}
.slot.ready .when { color: #74ff8c; font-weight: 700; }
.slot .lock { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; color: rgba(225, 232, 240, .85); }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-5px) rotate(1.2deg); }
}

/* живая заставка поверх фото стадиона: вспышки камер и прожекторы */
.stadium { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stadium .flashes i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, .9); opacity: 0; animation: camflash 4s infinite;
}
@keyframes camflash { 0%, 90%, 100% { opacity: 0; } 93% { opacity: 1; } }
.stadium .beam {
  position: absolute; top: -14%; width: 34%; height: 80%; transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(200, 235, 255, .26), transparent 70%); filter: blur(6px);
}
.stadium .beam.l { left: 4%; animation: sweepl 7s ease-in-out infinite alternate; }
.stadium .beam.r { right: 4%; animation: sweepr 8s ease-in-out infinite alternate; }
@keyframes sweepl { from { transform: rotate(-26deg); opacity: .4; } to { transform: rotate(-8deg); opacity: .8; } }
@keyframes sweepr { from { transform: rotate(24deg); opacity: .8; } to { transform: rotate(8deg); opacity: .4; } }

/* ---------- карточки в рамках ---------- */

/* пропорция карточки подобрана так, чтобы окно рамки стало квадратным под фото:
   рамка чуть растягивается, а фото помещается целиком, без обрезки */
.r-base { --ar: .757; --win: 19% 15.5% 28% 14.5%; --c: var(--r-base); --cg: rgba(154, 166, 160, .16); }
.r-coach { --ar: .833; --win: 18.5% 15.8% 24.5% 15.8%; --c: var(--r-coach); --cg: rgba(61, 220, 114, .22); }
.r-star { --ar: .826; --win: 21% 17% 24.5% 17%; --c: var(--r-star); --cg: rgba(58, 163, 255, .22); }
.r-superstar, .r-prime { --ar: .823; --win: 21.5% 17.2% 24.5% 17.2%; }
.r-superstar { --c: var(--r-superstar); --cg: rgba(176, 108, 255, .24); }
.r-prime { --c: var(--r-prime); --cg: rgba(255, 138, 61, .22); }
.r-limited, .r-shadow { --ar: .891; --win: 21.5% 18% 21.5% 18%; }
.r-limited { --c: var(--r-limited); --cg: rgba(229, 72, 77, .26); }
.r-shadow { --c: var(--r-shadow); --cg: rgba(123, 134, 255, .24); }
.r-idol { --ar: .912; --win: 19.7% 18.5% 23% 18.7%; --c: var(--r-idol); --cg: rgba(255, 195, 43, .26); }

.face {
  position: relative; width: 100%; aspect-ratio: var(--ar, .8);
  background: #07210f center / 100% 100% no-repeat; border-radius: 6%;
}
.face .win {
  position: absolute; inset: var(--win, 20% 16% 25% 16%); overflow: hidden; border-radius: 3px;
  background: #0b1f14;
}
.face .win img { width: 100%; height: 100%; object-fit: cover; }
.face.flip { animation: reveal .75s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes reveal {
  0% { transform: perspective(700px) rotateY(180deg) scale(.86); filter: brightness(.4); }
  55% { transform: perspective(700px) rotateY(24deg) scale(1.04); filter: brightness(1.5); }
  100% { transform: none; filter: none; }
}

/* вращение карточки пальцем: лицо и оборот с логотипом */
.c3d { position: relative; width: 100%; perspective: 1100px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.c3d:active { cursor: grabbing; }
.c3d img { pointer-events: none; }
.c3d-in { position: relative; width: 100%; transform-style: preserve-3d; will-change: transform; }
.c3d-front, .c3d-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.c3d-front { transform: translateZ(3px); }
.c3d-back {
  position: absolute; inset: 0; transform: rotateY(180deg) translateZ(3px); border-radius: 6%;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 45%, var(--cg), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #0b3a1f, #041109);
  box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 7px rgba(0, 0, 0, .5), inset 0 0 0 8px rgba(255, 195, 43, .45);
}
.c3d-back svg { width: 62%; height: 62%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.c3d-glare {
  position: absolute; inset: 0; border-radius: 6%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(calc(110deg + var(--glare, 0deg)), transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateZ(3.5px);
}

/* ---------- коллекция ---------- */

.prog {
  position: relative; padding: 11px 12px 10px; margin-bottom: 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 58, 34, .74), rgba(5, 20, 12, .86));
  border: 1.5px solid rgba(110, 255, 150, .45);
  box-shadow: 0 0 16px rgba(70, 255, 130, .2), inset 0 0 20px rgba(70, 255, 130, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.prog-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.prog-head .ico { width: 26px; height: 26px; fill: url(#g-green); filter: drop-shadow(0 0 6px rgba(80, 255, 130, .5)); }
.prog-head b { font-size: 17px; }
.prog-head .muted { font-size: 15px; }
.prog-head #prog-arrow { margin-left: auto; font-size: 11px; color: var(--ink); }
.bar-wrap { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.bar-wrap span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2fd35a, #a5ff5c); box-shadow: 0 0 10px rgba(90, 255, 120, .8); }
.dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-top: 8px; }
.dot { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.dot em { width: 8px; height: 8px; border-radius: 50%; display: block; opacity: .95; box-shadow: 0 0 6px currentColor; }
.dot.full em { box-shadow: 0 0 10px 2px currentColor; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chips .tag {
  height: 28px; padding: 0 10px; font-size: 12px; font-weight: 600;
  color: var(--c, #dfe6ea); border: 1.5px solid var(--cb, rgba(255, 255, 255, .22));
  background: rgba(3, 12, 8, .66); box-shadow: inset 0 0 10px var(--cg, transparent);
}
.chips .tag .ico { width: 17px; height: 13px; }
.chips .tag.on {
  color: #fff; border-color: #9dffb8;
  background: linear-gradient(180deg, #3fe07a, #148a42);
  box-shadow: 0 0 12px rgba(70, 255, 130, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.chips .tag.on.rar-chip { background: var(--c); color: #0a1a10; border-color: rgba(255, 255, 255, .7); box-shadow: 0 0 14px var(--c); }

.rar { display: flex; align-items: center; gap: 9px; margin: 16px 2px 10px; font-weight: 800; font-size: 20px; color: var(--c); text-shadow: 0 0 16px var(--cg); }
.grid + .rar { padding-top: 14px; border-top: 1px solid rgba(160, 255, 200, .09); }
.rar .rar-crown { width: 34px; height: 26px; filter: drop-shadow(0 0 8px rgba(255, 200, 60, .55)); }
.rar .rar-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 8%, var(--c) 42%, rgba(0, 0, 0, .55) 100%);
  box-shadow: 0 0 12px var(--c);
}
.rar .num { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 17px; text-shadow: none; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.tile3 {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-width: 0;
  padding: 6px 6px 8px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(12, 36, 22, .8), rgba(3, 12, 8, .92));
  border: 1.5px solid rgba(100, 240, 160, .38);
  box-shadow: inset 0 0 18px var(--cg, transparent), 0 4px 12px rgba(0, 0, 0, .35);
}
.tile3:active { transform: translateY(1px); }
.tile3 .face { filter: drop-shadow(0 0 6px var(--cg)); }
.tile3.miss { border-color: rgba(100, 240, 160, .2); }
.tile3.miss .face { filter: brightness(.78) saturate(.8); }
.tile3.miss .win img { filter: grayscale(1) brightness(.75); }
.tile3.pick { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(255, 200, 60, .5); }
.tile3 .under {
  min-height: 27px; font-size: 11px; line-height: 1.2; font-weight: 700;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.tile3 .under .flag { width: 1.25em; height: .9em; margin-right: 1px; }
.tile3 .pts {
  align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 200, 60, .38);
}
.tile3 .pts .ico { width: 17px; height: 17px; }
.tile3 .count {
  position: absolute; top: 3%; left: 6%; padding: 1px 5px; border-radius: 999px; z-index: 2;
  font-size: 10px; font-weight: 900; background: rgba(0, 0, 0, .75); border: 1px solid var(--line);
}
.tile3 .wrap { position: relative; }

/* ---------- просмотр карточки: без прокрутки, всё в экране ---------- */

.cv {
  position: fixed; inset: 0; z-index: 58; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  background: #020a05;
  animation: pk-in .22s ease-out;
}
.cv > * { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }

/* живой фон в стиле карточки: размытая рамка её редкости, свечение, лучи и искры её цвета */
.cv > .cv-fx { position: absolute; inset: 0; max-width: none; margin: 0; overflow: hidden; pointer-events: none; background: var(--bg); animation: fx-in .45s ease both; }
@keyframes fx-in { from { opacity: 0; } }
.cv-art {
  position: absolute; inset: -14%;
  background: var(--art) center / cover no-repeat;
  filter: blur(26px) saturate(1.35) brightness(.5);
  animation: artdrift 14s ease-in-out infinite alternate;
}
@keyframes artdrift {
  from { transform: scale(1.04) translate(-2%, -1%); }
  to { transform: scale(1.16) translate(2%, 2%); }
}
.cv-fx::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 70%);
  animation: cvpulse 3.2s ease-in-out infinite alternate;
}
@keyframes cvpulse {
  from { opacity: .2; transform: scale(.9); }
  to { opacity: .48; transform: scale(1.08); }
}
.cv-fx::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 28%, transparent 60%, rgba(0, 0, 0, .62));
}
.cv-beam {
  position: absolute; top: -22%; width: 30%; height: 95%; transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, var(--c), transparent 75%); filter: blur(16px); opacity: 0;
}
.cv-beam.l { left: 10%; animation: beaml 6s ease-in-out infinite alternate; }
.cv-beam.r { right: 10%; animation: beamr 7.5s ease-in-out infinite alternate; }
@keyframes beaml { from { transform: rotate(-18deg); opacity: .1; } to { transform: rotate(-6deg); opacity: .34; } }
@keyframes beamr { from { transform: rotate(16deg); opacity: .32; } to { transform: rotate(5deg); opacity: .1; } }
.cv-sparks { position: absolute; inset: 0; width: 100%; height: 100%; }

.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.cv-title { font-size: 19px; font-weight: 900; text-shadow: 0 0 16px var(--c), 0 2px 8px #000; }
.cv-title small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-shadow: none; }
.cv-x, .pk-close {
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px; flex: none; color: var(--ink);
  background: rgba(2, 12, 8, .6); border: 1px solid rgba(160, 255, 200, .28); box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.cv-body {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 8px; align-items: center; min-height: 0;
  margin: 0 auto;
}
.cv-card { display: grid; place-items: center; min-height: 0; height: 100%; }
.cv-card .c3d { width: min(100%, calc((100vh - 230px) * var(--ar, .8))); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.cv-info { display: grid; gap: 6px; align-content: center; min-width: 0; }
.cv-info .nm { font-size: clamp(13px, 4.1vw, 17px); font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; text-shadow: 0 2px 8px #000; }
.cv-info .ct { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cv-info .ct .flag { width: 22px; height: 16px; }
.cv-chip {
  justify-self: start; max-width: 100%; padding: 4px 9px; border-radius: 999px; font-size: clamp(9px, 2.5vw, 11px); font-weight: 900;
  letter-spacing: .2px; text-transform: uppercase; color: #06180d; background: var(--c); box-shadow: 0 0 12px var(--cg);
  white-space: normal; overflow-wrap: anywhere; line-height: 1.15;
}
.cv-stat { padding: 7px 9px; border-radius: 12px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(160, 255, 200, .16); backdrop-filter: blur(4px); }
.cv-stat small { display: block; font-size: 10px; color: var(--muted); }
.cv-stat b { font-size: 15px; }
.cv-stat b.gold { color: var(--gold); }
.cv-foot { display: grid; gap: 8px; }
.cv-nav { display: flex; justify-content: space-between; gap: 6px; }
.cv-nav button { flex: 1; }

/* ---------- шторка ---------- */

#modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(1, 8, 4, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  border-radius: 26px 26px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  background:
    radial-gradient(80% 30% at 50% 0%, rgba(60, 255, 130, .12), transparent 70%),
    linear-gradient(180deg, #0b2418, #04110a 60%);
  border: 1px solid rgba(120, 255, 175, .26); border-bottom: 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(170, 255, 210, .16);
  animation: up .22s ease-out;
}
.sheet::before {
  content: ""; position: sticky; display: block; top: -16px; margin: -16px auto 12px; width: 44px; height: 4px; border-radius: 4px;
  background: rgba(200, 255, 220, .28);
}
@keyframes up { from { transform: translateY(26px); opacity: .4; } }
.sheet h2 { margin: 0 0 6px; font-size: 19px; padding-right: 34px; }
.sheet .close {
  position: absolute; right: 12px; top: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; line-height: 1; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(160, 255, 200, .16);
}
.list .li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.list .li:last-child { border-bottom: 0; }

/* ---------- магазин ---------- */

.shop-sec { margin-bottom: 16px; }
.shop-sec > h3 { display: flex; align-items: center; gap: 7px; font-size: 18px; margin: 4px 2px 2px; }
.shop-sec > h3 .ico { width: 22px; height: 22px; fill: url(#g-gold); }
.shop-sec > .sub { margin: 0 2px 10px; }
.cases, .goods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.case, .good {
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0;
  border-radius: 18px; padding: 12px 8px 11px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 38, 36, .88), rgba(4, 16, 15, .92));
  border: 1px solid rgba(120, 230, 210, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px rgba(0, 0, 0, .3);
}
.case::before, .good::before {
  content: ""; position: absolute; inset: -30% -30% auto; height: 90%; opacity: .4; pointer-events: none;
  background: radial-gradient(closest-side, var(--cc, var(--c, #3aa3ff)), transparent);
}
.case > *, .good > * { position: relative; }
.case .chest { width: 88px; height: 68px; }
.case .name, .good .name { font-weight: 800; margin-top: 4px; font-size: 15px; line-height: 1.2; }
.case .about, .good .about { display: block; font-size: 11.5px; color: var(--muted); min-height: 30px; margin: 2px 0 8px; }
.case .price, .good .buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: auto;
  min-width: 96px; padding: 7px 14px; border-radius: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #3fe07a, #148a42); border: 1px solid #8dffb0;
  box-shadow: 0 0 12px rgba(70, 255, 130, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.case .price .ico, .good .buy .ico { width: 17px; height: 17px; }
.case .price.off, .good .buy.off { background: rgba(255, 255, 255, .08); color: var(--ink); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.case.free { --cc: #ffc32b; } .case.cool { --cc: #cfd8e3; } .case.champ { --cc: #b06cff; } .case.vip { --cc: #3aa3ff; }

/* товар — мини-карточка в рамке: чем дороже, тем «выше» рамка, внутри — что получишь */
.good { box-shadow: inset 0 0 24px var(--cg, transparent), 0 6px 16px rgba(0, 0, 0, .3); }
.good .face { width: 64%; max-width: 116px; filter: drop-shadow(0 0 12px var(--cg)) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.good .face .win {
  display: grid; place-items: center; align-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .14), rgba(0, 0, 0, .88) 72%);
}
.good .win b { font-size: clamp(20px, 6.4vw, 30px); font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 0 14px var(--c); }
.good .win small { font-size: clamp(8px, 2.4vw, 10px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c); }
.good .win .ico { width: 48%; height: 48%; fill: url(#g-bolt); filter: drop-shadow(0 0 8px var(--c)); }
.good .perks { list-style: none; margin: -2px 0 8px; padding: 0; display: grid; gap: 2px; font-size: 11px; text-align: left; }
.good .perks li::before { content: "✓ "; color: #6dff8a; font-weight: 900; }

/* ---------- пак: свайп → разрыв → карточка ---------- */

#confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

#pack {
  /* ширина сцены: на высоком телефоне чуть шире экрана (края сцены — только фон), на ПК — по высоте */
  --sw: min(max(100vw, calc((100vh - var(--bottom) - 8px) * .62)), 620px, calc((100vh - var(--bottom) - 8px - env(safe-area-inset-top)) * 1024 / 1160));
  position: fixed; inset: 0; z-index: 56; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(8px + env(safe-area-inset-top)) 0 var(--bottom);
  background: #020a06;
  animation: pk-in .25s ease-out;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
body.pk-open #tabs { z-index: 57; }
/* за сценой — тот же фон, размытый во весь экран: по краям нет пустых полос */
#pack::before {
  content: ""; position: absolute; inset: -40px; pointer-events: none;
  background: url(/img/ui/pack-bg.jpg) center / cover no-repeat;
  filter: blur(22px) brightness(.8) saturate(1.2);
}
@keyframes pk-in { from { opacity: 0; } }
.pk-close { position: absolute; right: 12px; top: calc(10px + env(safe-area-inset-top)); z-index: 5; }

/* сцена в пропорциях макета: фон — сам макет без пака, живой пак ложится ровно на своё место */
.pk-scene {
  position: relative; z-index: 1; flex: none;
  width: var(--sw);
  aspect-ratio: 1024 / 1160;
  background: url(/img/ui/pack-bg.jpg) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.pk-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle at 50% 44%, var(--c, #45f07e), transparent 58%);
  transition: opacity .6s ease;
}
#pack.burst .pk-scene::after { opacity: .6; }

.pk-glow {
  position: absolute; left: 18%; right: 18%; top: 16%; bottom: 20%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(90, 255, 120, .42), transparent 75%);
  filter: blur(12px); animation: glowpulse 2.8s ease-in-out infinite alternate;
}
@keyframes glowpulse { from { opacity: .4; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.pk-sparks { position: absolute; left: 0; right: 0; top: 8%; bottom: 14%; z-index: 3; pointer-events: none; overflow: hidden; }
.pk-sparks i {
  position: absolute; bottom: 0; border-radius: 50%; opacity: 0;
  background: #c6ffac; box-shadow: 0 0 8px 2px rgba(110, 255, 140, .85);
  animation: sparkup linear infinite;
}
@keyframes sparkup {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: .95; }
  80% { opacity: .6; }
  100% { transform: translateY(-340px) scale(1); opacity: 0; }
}

/* место и масштаб пака сняты сопоставлением closed.jpg с макетом (tools/ui_assets.py) */
.pk-wrap {
  position: absolute; z-index: 2; left: 21.57%; top: 7.44%; width: 57.47%; aspect-ratio: 2 / 3;
  transform: rotate(-.76deg);
  animation: packbob 3s ease-in-out infinite;
}
@keyframes packbob {
  0%, 100% { transform: rotate(-.76deg) translateY(0); }
  50% { transform: rotate(-.76deg) translateY(-6px); }
}
/* от closed.jpg остаётся сам пак: его собственный фон растворяется в фоне макета */
.pk-img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 9%, #000 14%, #000 86%, transparent 91%), linear-gradient(180deg, transparent 7%, #000 11.5%, #000 91%, transparent 95%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 9%, #000 14%, #000 86%, transparent 91%), linear-gradient(180deg, transparent 7%, #000 11.5%, #000 91%, transparent 95%);
  mask-composite: intersect;
}
.pk-top {
  position: absolute; z-index: 2; inset: 0 0 auto 0; height: 19%; opacity: 0;
  background: url(/img/pack/closed.jpg) top center / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 9%, #000 14%, #000 86%, transparent 91%), linear-gradient(180deg, transparent 37%, #000 60%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 9%, #000 14%, #000 86%, transparent 91%), linear-gradient(180deg, transparent 37%, #000 60%);
  mask-composite: intersect;
}
.pk-cut {
  --p: 0;
  position: absolute; z-index: 4; left: 12%; top: 19%; height: 3px; width: calc(var(--p) * 76%); border-radius: 3px;
  background: linear-gradient(90deg, #fff, var(--c, #7dff8a)); box-shadow: 0 0 12px 3px var(--c, #45f07e);
}

/* подсказка лежит под сценой и заходит на её низ — как на макете, но край сцены её не режет */
.pk-hint {
  position: relative; z-index: 3; width: min(100%, 420px); margin-top: calc(var(--sw) * -.21);
  display: grid; justify-items: center; gap: 2px; text-align: center;
  font-size: clamp(12px, 3.7vw, 15px); font-weight: 500; line-height: 1.3; color: rgba(232, 242, 236, .92); text-shadow: 0 2px 10px #000;
}
.pk-hand { width: clamp(34px, 11vw, 48px); height: clamp(34px, 11vw, 48px); color: #4dff88; filter: drop-shadow(0 0 6px rgba(70, 255, 130, .7)); animation: handswipe 1.8s ease-in-out infinite; }
@keyframes handswipe { 0%, 100% { transform: translateX(12px); } 50% { transform: translateX(-12px); } }
.touching .pk-hand { animation-play-state: paused; }
#pack.torn .pk-hint { visibility: hidden; }
#pack.torn .pk-wrap { animation: none; }
#pack.torn .pk-img { clip-path: inset(19% 0 0 0); }
#pack.torn .pk-top { opacity: 1; animation: flyoff .7s cubic-bezier(.3, .7, .4, 1) forwards; }
@keyframes flyoff { to { transform: translate(40%, -170%) rotate(26deg); opacity: 0; } }
#pack.torn .pk-cut { width: 76%; }
#pack.burst .pk-img { clip-path: none; animation: inside .9s ease-out forwards; }
@keyframes inside {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.06); filter: brightness(1.9); }
  100% { transform: scale(1.12); filter: brightness(1.15); }
}
#pack.burst::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #fff 0, var(--c, #45f07e) 18%, transparent 55%);
  animation: flash .8s ease-out forwards;
}
@keyframes flash {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); }
}

/* ---------- битва ---------- */

.bt {
  position: relative; flex: 1; border-radius: 24px; overflow: hidden; padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
  background:
    radial-gradient(70% 36% at 50% 0%, rgba(90, 255, 150, .18), transparent 70%),
    linear-gradient(180deg, rgba(10, 44, 26, .82), rgba(3, 14, 8, .92));
  border: 1px solid rgba(120, 255, 175, .3);
  box-shadow: 0 0 20px rgba(60, 255, 130, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.bt-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.bt-p {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px; border-radius: 14px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(160, 255, 200, .18);
}
.bt-p.rival { flex-direction: row-reverse; text-align: right; }
.bt-p .av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(circle at 35% 28%, #9dffae, #2cc25a 48%, #0f7a33); border: 2px solid rgba(190, 255, 205, .55);
}
.bt-p.rival .av { background: radial-gradient(circle at 35% 28%, #ff9d9d, #c23a3a 50%, #6b1414); }
.bt-p .av img { width: 100%; height: 100%; object-fit: cover; }
.bt-p b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-p small { display: block; font-size: 10px; color: rgba(255, 255, 255, .75); }
.bt-vs { font-size: 24px; font-weight: 900; font-style: italic; color: var(--gold); text-shadow: 0 0 14px rgba(255, 200, 60, .6), 0 2px 10px rgba(0, 0, 0, .6); }
.bt-stats { display: grid; gap: 4px; }
.bt-stats .st { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 6px; font-size: 11px; }
.bt-stats .mid { display: block; text-align: center; color: rgba(255, 255, 255, .82); font-size: 10px; }
.bt-stats .bar { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 6px; }
.bt-stats .bar i { display: block; height: 100%; border-radius: 999px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.bt-stats .bar i span { display: block; height: 100%; }
.bt-stats .bar i:first-child span { margin-left: auto; background: linear-gradient(90deg, #3ddc72, #a5f36b); }
.bt-stats .bar i:last-child span { background: linear-gradient(90deg, #ffd75e, #e5484d); }
.bt-stakes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.bt-stake {
  display: grid; place-items: center; align-self: stretch; min-height: 0; border-radius: 16px; padding: 6px;
  border: 1.5px dashed rgba(160, 255, 200, .35); background: rgba(0, 0, 0, .25); font-size: 12px; color: var(--muted); text-align: center;
}
.bt-stake .face { width: min(100%, calc((100vh - 480px) * var(--ar, .8))); }
.bt-stake.set { border-style: solid; border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 200, 60, .3); }
.bt-stake .plus { font-size: 30px; line-height: 1; color: var(--gold); }
.bt-mid { font-size: 20px; }
.bt-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

/* ---------- рейтинг ---------- */

.seg {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(10, 30, 22, .82), rgba(3, 12, 8, .88));
  border: 1px solid rgba(130, 255, 190, .14);
}
.seg button {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0;
  height: 36px; padding: 0 8px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #d6dde8;
  background: linear-gradient(180deg, rgba(22, 40, 34, .92), rgba(6, 16, 12, .92));
  border: 1px solid rgba(255, 255, 255, .08);
}
.seg .ico { width: 17px; height: 17px; color: #aab3c6; fill: url(#g-nav); }
.seg button.on {
  color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #2fbf5c, #0e7433);
  border-color: #7dffa0;
  box-shadow: 0 0 14px rgba(70, 255, 130, .55), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 6px rgba(0, 60, 20, .4);
}
.seg button.on .ico { color: #fff; fill: #fff; }
@media (max-width: 380px) {
  .seg button { font-size: 11.5px; padding: 0 5px; gap: 3px; }
  .seg .ico { width: 14px; height: 14px; }
}

/* пьедестал: первое место в центре на светящейся платформе, второе и третье по бокам */
.podium { position: relative; height: 270px; margin: 0 0 12px; }
.podium::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: -10px; bottom: 0; pointer-events: none;
  background: radial-gradient(48% 50% at 50% 60%, rgba(80, 255, 140, .22), transparent 72%);
}
.pd-stage {
  position: absolute; left: 7%; right: 7%; bottom: 14px; height: 48px; border-radius: 50%;
  background: radial-gradient(60% 70% at 50% 35%, #2a8a4a, #0c4122 60%, #062812);
  border: 2px solid rgba(170, 255, 185, .9);
  box-shadow:
    0 0 16px rgba(80, 255, 140, .6), inset 0 0 18px rgba(120, 255, 160, .35),
    0 11px 0 -1px #052410, 0 11px 0 1px rgba(110, 255, 150, .6), 0 18px 34px rgba(60, 255, 120, .35);
}
.pd-card {
  position: absolute; bottom: 36px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
  border-radius: 20px;
}
.pd-main {
  left: 50%; transform: translateX(-50%); z-index: 3; width: 47%; max-width: 196px; padding: 16px 8px 10px;
  background: linear-gradient(180deg, rgba(36, 108, 60, .82), rgba(6, 36, 18, .92));
  border: 1.5px solid rgba(255, 222, 120, .88);
  box-shadow: 0 0 22px rgba(255, 205, 70, .35), inset 0 0 26px rgba(120, 255, 150, .16), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pd-ava { position: relative; display: block; width: 116px; height: 96px; margin: -4px auto 0; }
.pd-ava .wreath { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pd-crown { position: absolute; left: 50%; top: -30px; width: 46px; height: 34px; transform: translateX(-50%); filter: drop-shadow(0 2px 8px rgba(255, 190, 40, .65)); }
.pd-card .pav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%); }
.pd-main .pav {
  width: 70px; height: 70px; border: 3px solid #ffcf4a;
  background: radial-gradient(circle at 35% 28%, #9dffae, #2cc25a 48%, #0f7a33);
  box-shadow: 0 0 0 2px rgba(120, 70, 0, .55), 0 0 16px rgba(255, 200, 60, .5);
}
.pd-main .pav i { font-size: 32px; text-shadow: 0 2px 4px rgba(0, 60, 20, .6); }
.pd-main .pav.on::after { width: 15px; height: 15px; right: 0; bottom: 2px; box-shadow: 0 0 0 2px #06200f, 0 0 8px #3ddc72; }
.pd-card .pav.crest { background: #000; border-color: #ffcf4a; }
.pd-name { display: block; max-width: 100%; margin-top: 2px; font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-score { display: inline-flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 600; color: #e6efe9; }
.pd-score .ico { width: 17px; height: 17px; fill: url(#g-gold); color: #cfd9e3; }
.pd-score .ico.grey { fill: #b9c3d0; }
.pd-extra {
  display: block; align-self: stretch; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 222, 120, .3);
  font-size: 15px; font-weight: 700; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-pill {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 800; color: var(--gold); white-space: nowrap;
  background: linear-gradient(180deg, rgba(90, 60, 0, .7), rgba(40, 24, 0, .8)); border: 1px solid rgba(255, 200, 60, .7);
}
.pd-pill .ico { width: 18px; height: 14px; }

.pd-side {
  --half: min(23.5%, 98px);
  z-index: 2; width: min(170px, calc(50% - var(--half) + 20px)); padding: 12px 8px 10px;
  background: linear-gradient(180deg, rgba(34, 76, 50, .6), rgba(6, 26, 14, .8));
  border: 1px solid rgba(220, 235, 230, .4);
  box-shadow: inset 0 0 20px rgba(120, 255, 150, .1), 0 8px 18px rgba(0, 0, 0, .35);
}
.pd-side.l { right: calc(50% + var(--half) - 28px); padding-right: 34px; }
.pd-side.r { left: calc(50% + var(--half) - 28px); padding-left: 34px; }
.pd-side.p3 { border-color: rgba(230, 160, 90, .55); }
.pd-side .pd-ava { width: 60px; height: 60px; margin: 0 auto 4px; }
.pd-side .pav { width: 52px; height: 52px; border: 2px solid rgba(220, 230, 240, .8); }
.pd-side.p3 .pav { border-color: #e6a05c; }
.pd-side .medal {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #1a1a1a;
  background: linear-gradient(180deg, #ffffff, #aeb8c4); box-shadow: 0 0 8px rgba(255, 255, 255, .5);
}
.pd-side.p3 .medal { background: linear-gradient(180deg, #ffd0a0, #c4783a); }
.pd-side .pd-name { font-size: 13px; }
.pd-side .pd-score { font-size: 13px; }
.pd-side .pd-score .ico { width: 13px; height: 13px; }
.pd-side .pd-extra { margin-top: 3px; padding-top: 3px; font-size: 11px; }
.pd-side .pd-pill { font-size: 11px; padding: 2px 7px; }
.pd-side.empty { width: 92px; height: 150px; padding: 0; opacity: .8; border-color: rgba(200, 255, 210, .32); }
.pd-side.empty.l { right: calc(50% + var(--half) - 62px); }
.pd-side.empty.r { left: calc(50% + var(--half) - 62px); }

.tbl { display: grid; gap: 7px; }
.rk {
  display: grid; grid-template-columns: 26px 38px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px 9px 10px; text-align: left; border-radius: 16px;
  background: linear-gradient(90deg, rgba(18, 52, 36, .7), rgba(5, 18, 13, .86));
  border: 1px solid rgba(120, 255, 170, .18);
}
.rk:active { transform: translateY(1px); }
.rk.me { border-color: rgba(255, 200, 60, .65); background: linear-gradient(90deg, rgba(90, 70, 10, .55), rgba(20, 16, 4, .8)); box-shadow: 0 0 12px rgba(255, 200, 60, .2); }
.rk .pl { font-weight: 900; color: var(--muted); text-align: center; }
.rk .nm { min-width: 0; }
.rk .nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rk .nm small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk .rt { text-align: right; }
.rk .rt b { display: block; font-size: 14px; }
.rk .rt small { display: block; font-size: 10.5px; color: var(--gold); font-weight: 800; }

/* ---------- игроки, аватары, профиль ---------- */

.pav {
  position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: visible;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 28%, #7fe89a, #22a64b 55%, #0f6b2c);
  border: 1.5px solid rgba(190, 255, 205, .45);
}
.pav i { font-weight: 900; font-size: 15px; }
.pav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pav.on::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: #3ddc72; box-shadow: 0 0 0 2px #06200f;
}
.pav.big { width: 60px; height: 60px; }
.pav.big i { font-size: 25px; }
.pav.big.on::after { width: 13px; height: 13px; }
.st-on { color: #6ee79b; font-weight: 700; }
.st-off { color: var(--muted); }

.ps-head { display: flex; align-items: center; gap: 12px; margin: 2px 34px 12px 0; }
.ps-name b { display: block; font-size: 19px; }
.ps-name small { display: block; font-size: 12px; margin-top: 2px; }
.ps-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.ps-stats div { padding: 8px 4px; border-radius: 12px; text-align: center; background: rgba(0, 0, 0, .32); border: 1px solid rgba(160, 255, 200, .16); }
.ps-stats small { display: block; font-size: 10px; color: var(--muted); }
.ps-stats b { font-size: 15px; }
.ps-best { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 12px; }
.ps-best button { padding: 0; }
.ps-act { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 8px; align-items: center; }
.ps-act .ghost { height: 100%; font-size: 20px; }

.df-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 6px 0 10px; }
.df-vs > div { text-align: center; }
.df-vs .face { max-width: 150px; margin: 0 auto; }
.df-vs small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.df-vs > b { font-size: 24px; }

.ib-sec { margin-bottom: 12px; }
.ib-sec h3 { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 6px; }
.ib-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 8px 9px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(160, 255, 200, .16); margin-bottom: 6px;
}
.ib-row.focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 12px rgba(255, 200, 60, .25); }
.ib-mid { min-width: 0; }
.ib-mid b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-mid small { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-act { display: flex; align-items: center; gap: 5px; }
.cd { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 12px; color: var(--gold); }
.cd.gone { color: var(--muted); text-decoration: line-through; }
.res { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.res.win { color: #6ee79b; }
.res.lose { color: #ff7b7f; }
.res.draw { color: var(--gold); }

/* ---------- подсказка ---------- */

#toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 80;
  bottom: calc(var(--bottom) + 8px);
  max-width: 86vw; padding: 10px 16px; border-radius: 14px; font-size: 13px; text-align: center;
  background: linear-gradient(180deg, rgba(14, 40, 28, .97), rgba(3, 14, 9, .97));
  border: 1px solid rgba(120, 255, 175, .35);
  box-shadow: 0 0 16px rgba(60, 255, 130, .18), 0 10px 26px rgba(0, 0, 0, .5);
}

/* ---------- энергия и навыки ---------- */

.en-note {
  margin: 4px 0 10px; padding: 9px 11px; border-radius: 14px; font-size: 13px; font-weight: 700;
  background: rgba(229, 72, 77, .18); border: 1px solid rgba(229, 72, 77, .45);
}
.en-top { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.en-big { display: flex; align-items: baseline; gap: 4px; flex: none; }
.en-big b { font-size: 42px; line-height: 1; color: var(--gold); text-shadow: 0 0 18px rgba(255, 195, 43, .5); }
.en-big span { color: var(--muted); font-weight: 700; }
.en-info { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 12px; }
.en-bar { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); }
.en-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc32b, #ffe27a); box-shadow: 0 0 8px rgba(255, 200, 60, .6); }
.en-bar.xp i, .xpbar i { background: linear-gradient(90deg, #2fd35a, #a5ff5c); box-shadow: 0 0 8px rgba(90, 255, 120, .6); }
.en-costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.en-costs span {
  padding: 7px 4px; border-radius: 12px; font-size: 11px; text-align: center;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(160, 255, 200, .14);
}
.en-costs b { display: block; font-size: 13px; }

.sk-list { display: grid; gap: 6px; }
.sk {
  display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 14px;
  background: rgba(0, 0, 0, .26); border: 1px solid rgba(160, 255, 200, .14);
}
.sk-ico { font-size: 22px; flex: none; }
.sk-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sk-txt b { font-size: 13px; }
.sk-txt small { font-size: 11px; color: var(--muted); }
.sk-dots { display: flex; gap: 3px; margin-top: 2px; }
.sk-dots i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.sk-dots i.on { background: var(--gold); box-shadow: 0 0 5px rgba(255, 200, 60, .6); }
.sk-up {
  flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; font-weight: 900; line-height: 1;
  color: #03230f; background: radial-gradient(circle at 35% 30%, #8dffa6, #22c55a 60%, #128a3c); box-shadow: 0 0 10px rgba(60, 255, 120, .45);
}
.sk-up[disabled] { filter: grayscale(1); opacity: .35; box-shadow: none; }
.xpbar { display: block; margin-top: 6px; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .4); }
.xpbar i { display: block; height: 100%; }

/* ---------- игры ---------- */

.hero.hero-sm { flex: none; height: 236px; min-height: 0; margin-bottom: 10px; }
.hero-sm .hero-bg { object-position: 50% 24%; }
.arcade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.arc {
  display: grid; justify-items: center; gap: 2px; padding: 9px 2px 7px; border-radius: 14px; text-align: center; min-width: 0;
  background: linear-gradient(180deg, rgba(14, 38, 36, .88), rgba(4, 16, 15, .92)); border: 1px solid rgba(120, 230, 210, .2);
}
.arc.ready { border-color: rgba(200, 255, 100, .85); box-shadow: 0 0 12px rgba(150, 255, 70, .35), inset 0 0 12px rgba(150, 255, 70, .12); }
.arc-ico { font-size: 25px; line-height: 1; }
.arc.ready .arc-ico { animation: bob 2.4s ease-in-out infinite; }
.arc b { font-size: 10px; }
.arc small { font-size: 9px; color: var(--muted); line-height: 1.1; overflow-wrap: anywhere; }
.arc.ready small { color: #74ff8c; font-weight: 700; }
.arc-stage {
  position: relative; height: 230px; margin: 6px 0 8px; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 30%, #1d5a35, #06200f); border: 1px solid rgba(120, 255, 175, .24);
}
.arc-score { min-height: 26px; margin-bottom: 8px; text-align: center; font-size: 14px; }
.arc-score i { display: inline-block; width: 12px; height: 12px; margin: 0 2px; border-radius: 50%; vertical-align: -1px; }
.arc-score i.ok { background: #3ddc72; box-shadow: 0 0 6px #3ddc72; }
.arc-score i.no { background: #e5484d; }
.arc-prize { margin-top: 6px; font-size: 18px; font-weight: 900; color: var(--gold); }

.board-wrap { position: relative; width: 190px; height: 190px; }
.board { width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.dart {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; transform: scale(2.4);
  box-shadow: 0 0 0 2px #0b3a20, 0 0 12px #fff;
  transition: left .5s cubic-bezier(.2, .8, .3, 1), top .5s cubic-bezier(.2, .8, .3, 1), transform .5s;
}
.dart.stuck { transform: scale(1); }

.lane {
  position: relative; width: 150px; height: 210px; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #d9a760 0 14px, #c8914b 14px 15px); box-shadow: inset 0 0 0 5px #6b4a22;
}
.pins { position: absolute; top: 12px; left: 0; right: 0; display: grid; gap: 5px; justify-items: center; }
.prow { display: flex; gap: 10px; }
.pin {
  width: 12px; height: 20px; border-radius: 50% 50% 40% 40%; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  background: linear-gradient(#fff 55%, #e5484d 55% 66%, #fff 66%); transition: transform .35s, opacity .35s;
}
.pin.down { transform: rotate(80deg) translateY(-6px); opacity: .25; }
.bball {
  position: absolute; left: 50%; bottom: 8px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7f8cff, #2a2f8f 70%); box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
}
.bball.roll { animation: bowlroll .75s cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes bowlroll { to { transform: translate(var(--x, 0), -170px) scale(.6); } }

.fpitch { position: relative; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, #1c8b45 0 22px, #178040 22px 44px); }
.fnet {
  position: absolute; left: 50%; top: 22px; width: 190px; height: 82px; transform: translateX(-50%);
  border: 4px solid #fff; border-bottom: 0; display: grid; place-items: end center;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 10px);
}
.fnet.shake { animation: netshake .4s; }
@keyframes netshake { 30% { transform: translateX(-50%) scaleY(1.07); } 60% { transform: translateX(-50%) scaleY(.97); } }
.fkeeper { font-size: 30px; margin-bottom: -4px; transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
.fball { position: absolute; left: 50%; bottom: 18px; font-size: 30px; transform: translate(-50%, 0); }
.ftext {
  position: absolute; left: 0; right: 0; top: 112px; text-align: center; font-size: 26px; font-weight: 900; font-style: italic;
  color: #fff; text-shadow: 0 3px 12px rgba(0, 0, 0, .6);
}

.die { font-size: 110px; line-height: 1; color: #fff; text-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.die.rolling { animation: dieshake .14s linear infinite; }
@keyframes dieshake { 50% { transform: rotate(14deg) scale(1.06); } }

.mgrid { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; }
.cell {
  width: 36px; height: 36px; border-radius: 9px; font-weight: 900; color: var(--muted); transition: transform .2s;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid var(--line);
}
.cell:not([disabled]):active { transform: scale(.9); }
.cell.picked { box-shadow: 0 0 0 2px var(--gold); }
.cell.gem { color: #fff; background: linear-gradient(180deg, rgba(58, 163, 255, .45), rgba(58, 163, 255, .15)); }
.cell.empty { opacity: .45; }

/* ---------- сквады ---------- */

.sq-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; }
.sq-top h2 { margin: 0; font-size: 22px; }
.sq-back { color: var(--muted); font-size: 13px; font-weight: 700; padding: 2px 0 10px; }
.sq-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.sq-cover {
  position: relative; flex: none; width: 94px; height: 94px; border-radius: 24px; overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(145deg, #1f7a44, #0b3a20);
  border: 2px solid rgba(255, 200, 60, .65); box-shadow: 0 0 18px rgba(255, 200, 60, .25), inset 0 0 18px rgba(255, 195, 43, .15);
}
.sq-cover i { font-style: normal; font-size: 40px; font-weight: 900; color: var(--gold); }
.sq-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sq-cam {
  position: absolute; right: 4px; bottom: 4px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; background: rgba(0, 0, 0, .6); border: 1px solid var(--line);
}
.sq-title { min-width: 0; }
.sq-title h2 { margin: 0; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.sq-title small { color: var(--muted); font-size: 12px; }
.sq-title p { margin: 6px 0 0; font-size: 12px; line-height: 1.35; opacity: .9; overflow-wrap: anywhere; }
.sq-actions { display: grid; gap: 8px; margin: 10px 0 4px; }
.sq-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 15px; }
.sq-h .badge { position: static; box-shadow: none; }
.sq-req {
  display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--edge);
}
.sq-req .nm { flex: 1; min-width: 0; display: grid; }
.sq-req .nm small { font-size: 11px; color: var(--muted); }
.sq-kick { color: #ff9a9a; font-weight: 700; text-decoration: underline; }
.sq-text {
  display: block; width: 100%; margin: 6px 0 12px; padding: 11px 12px; border-radius: 14px; font: inherit; font-size: 14px;
  color: inherit; background: rgba(0, 0, 0, .35); border: 1px solid rgba(160, 255, 200, .2); resize: vertical;
}

.wars { display: grid; gap: 7px; }
.war {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 9px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--edge);
}
.war.win { border-color: rgba(61, 220, 114, .6); box-shadow: inset 0 0 16px rgba(61, 220, 114, .14); }
.war.lose { border-color: rgba(229, 72, 77, .5); }
.war.pending, .war.accepted { border-style: dashed; }
.war-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.war-side.r { flex-direction: row-reverse; text-align: right; }
.war-side span { min-width: 0; display: grid; }
.war-side b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-side small { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-side.won b { color: var(--gold); }
.war-mid { display: grid; justify-items: center; gap: 3px; text-align: center; }
.war-mid > b { font-size: 18px; letter-spacing: .04em; }
.war-mid small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.war-mid i { font-style: normal; font-weight: 800; }
.war-mid i.up { color: #3ddc72; }
.war-mid i.down { color: #ff8a8a; }

/* ---------- чат сквада и уведомления ---------- */

#squads, #sq-mine, #sq-chat, .fd-btn { position: relative; }
.ghost.danger { color: #ff9a9a; border-color: rgba(229, 72, 77, .45); }
.sq-menu { display: grid; gap: 7px; }

.feed { display: grid; gap: 7px; }
.fd {
  display: grid; gap: 3px; width: 100%; padding: 10px 11px; border-radius: 14px; text-align: left; font-size: 13px; line-height: 1.35;
  background: var(--glass); border: 1px solid var(--edge);
}
.fd.new { border-color: rgba(255, 195, 43, .55); background: rgba(255, 195, 43, .08); }
.fd small { color: var(--muted); font-size: 11px; }
.fd-btn .badge { position: static; display: inline-grid; margin-left: 4px; box-shadow: none; }

#screen.chat-screen {
  position: fixed; left: var(--side); right: var(--side); z-index: 5; padding: 0; overflow: hidden;
  top: var(--top); bottom: var(--bottom);
  display: flex; flex-direction: column;
  border-radius: 20px; background: rgba(2, 10, 6, .72); border: 1px solid rgba(120, 255, 175, .16);
}
.ch-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line);
  background: rgba(8, 30, 20, .85);
}
.ch-head .sq-back { padding: 0 6px 0 0; font-size: 24px; line-height: 1; }
.ch-head .pav { width: 30px; height: 30px; }
.ch-head b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-head small { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.ch-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.ch-sys {
  align-self: center; max-width: 90%; padding: 4px 10px; border-radius: 999px; font-size: 11px; text-align: center;
  color: var(--muted); background: rgba(0, 0, 0, .3);
}
.ch-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 86%; }
.ch-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.ch-msg .pav { width: 28px; height: 28px; flex: none; }
.ch-bubble {
  display: grid; gap: 3px; padding: 7px 10px; border-radius: 16px 16px 16px 4px; font-size: 14px; line-height: 1.35;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line); overflow-wrap: anywhere;
}
.ch-msg.mine .ch-bubble {
  border-radius: 16px 16px 4px 16px; border-color: rgba(61, 220, 114, .4);
  background: linear-gradient(180deg, rgba(61, 220, 114, .3), rgba(23, 164, 75, .22));
}
.ch-bubble b { font-size: 12px; color: var(--gold); }
.ch-bubble small { justify-self: end; font-size: 10px; color: var(--muted); }
.ch-msg.gone .ch-bubble { opacity: .55; font-size: 12px; }
.ch-cardview { display: block; width: 110px; }
.ch-bar {
  display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line);
  background: rgba(6, 24, 16, .95);
}
.ch-bar textarea {
  flex: 1; min-width: 0; min-height: 38px; max-height: 96px; padding: 9px 12px; border-radius: 19px; resize: none;
  font: inherit; font-size: 14px; color: inherit; background: rgba(0, 0, 0, .4); border: 1px solid rgba(160, 255, 200, .2);
}
.ch-card, .ch-send { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; }
.ch-card { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.ch-send { color: #03230f; font-weight: 900; background: radial-gradient(circle at 35% 30%, #8dffa6, #22c55a 60%, #128a3c); box-shadow: 0 0 10px rgba(60, 255, 120, .4); }
.ch-muted { flex: 1; padding: 10px; text-align: center; font-size: 13px; color: #ff9a9a; }

/* ---------- низкое окно (ПК, маленький телефон): главная влезает без прокрутки ---------- */

@media (max-height: 720px) {
  .hero .side { top: 8px; gap: 6px; }
  .tile { padding: 6px 8px; grid-template-columns: 24px minmax(0, 1fr) 12px; }
  .tile > .ico { width: 24px; height: 24px; }
  .tile b { font-size: 14px; }
  .tile small { font-size: 11.5px; }
  .play { min-height: 56px; }
  .play > .ico { width: 34px; height: 34px; }
  .play b { font-size: 22px; }
  .drop { min-height: 58px; }
  .drop-card { width: 44px; height: 48px; }
  .drop-txt b { font-size: 18px; }
  .drop-txt small { font-size: 12.5px; }
  .slot { padding: 6px 3px; }
  .chest { width: 50px; height: 38px; }
}

/* ---------- «Играть»: выбор режима ---------- */

.pm-list { display: grid; gap: 8px; }
.pm-row { width: 100%; text-align: left; }
.pm-row .lr-txt > small { white-space: normal; line-height: 1.3; }
.pm-row.locked { opacity: .62; }
.pm-row.locked .chev { width: 16px; height: 16px; fill: var(--muted); }
.pm-live { width: 100%; margin-bottom: 10px; }

/* ---------- дуэль: кого вызвать ---------- */

.dm-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 4px 0 10px;
  border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line);
}
.dm-tabs button { padding: 8px 4px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dm-tabs button.on { color: #1c1300; background: linear-gradient(180deg, #ffe07a, #ffb82e); box-shadow: 0 0 10px rgba(255, 200, 60, .35); }
.dm-q {
  width: 100%; margin-bottom: 8px; padding: 11px 14px; border-radius: 14px; font: inherit; font-size: 14px;
  color: inherit; background: rgba(0, 0, 0, .4); border: 1px solid rgba(160, 255, 200, .22); outline: none;
}
.dm-q:focus { border-color: var(--gold); }
.dm-list { display: grid; gap: 6px; min-height: 60px; max-height: 42vh; overflow-y: auto; }
.dm-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.dm-row .nm { min-width: 0; }
.dm-row .nm b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row .nm small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row .nm .on { color: var(--neon); font-weight: 700; }
.dm-invite { width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.dm-invite .ico { width: 18px; height: 18px; }

/* ---------- подбор соперника и ожидание ответа ---------- */

.mm {
  position: fixed; inset: 0; z-index: 58; display: grid; place-items: center; padding: 16px;
  background: rgba(1, 8, 4, .78); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.mm-box {
  width: min(380px, 100%); max-height: 92vh; overflow-y: auto; padding: 18px 16px 16px; border-radius: 24px;
  display: grid; justify-items: center; gap: 8px; text-align: center;
  background: radial-gradient(90% 40% at 50% 0%, rgba(60, 255, 130, .16), transparent 70%), linear-gradient(180deg, #0b2418, #04110a 70%);
  border: 1px solid rgba(120, 255, 175, .3); box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  animation: up .25s ease-out;
}
.mm-box .two { width: 100%; }
.mm-radar { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin: 2px 0 4px; }
.mm-radar i {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(80, 255, 140, .5);
  animation: mm-ping 2.1s ease-out infinite;
}
.mm-radar i:nth-child(2) { animation-delay: .7s; }
.mm-radar i:nth-child(3) { animation-delay: 1.4s; }
.mm-radar.small { width: 70px; height: 70px; margin: 10px auto; }
@keyframes mm-ping { from { transform: scale(.45); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.mm-me, .mm-ava {
  position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  font-size: 26px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 28%, #9dffae, #2cc25a 50%, #0f7a33);
  box-shadow: 0 0 0 3px rgba(190, 255, 205, .5), 0 0 22px rgba(60, 255, 120, .45);
}
.mm-me .pav { width: 64px; height: 64px; }
.mm-me img, .mm-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-title { font-size: 20px; font-weight: 900; }
.mm-title.found { color: var(--gold); font-size: 22px; text-shadow: 0 0 16px rgba(255, 200, 60, .5); }
.mm-sub { font-size: 12.5px; color: var(--muted); }
.mm-time { font-size: 30px; font-weight: 900; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.mm-stake { width: 96px; display: grid; gap: 4px; }
.mm-stake small { font-size: 11px; color: var(--muted); }
.mm-vs { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 4px 0; }
.mm-vs > em { font-size: 26px; font-weight: 900; font-style: italic; color: var(--gold); text-shadow: 0 0 14px rgba(255, 200, 60, .6); }
.mm-p { min-width: 0; display: grid; justify-items: center; gap: 4px; animation: pop-in .45s cubic-bezier(.2, 1.4, .4, 1); }
.mm-p b { max-width: 100%; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-p small { max-width: 100%; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-p.rival .mm-ava { background: radial-gradient(circle at 35% 28%, #ffb3a6, #e0533f 50%, #7a1a12); box-shadow: 0 0 0 3px rgba(255, 190, 180, .5), 0 0 22px rgba(255, 90, 70, .45); }
.mm-ava i { font-weight: 900; }
.mm-tag { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--neon); background: rgba(69, 240, 126, .1); border: 1px solid rgba(69, 240, 126, .35); }
.mm-go { font-size: 13px; font-weight: 800; color: var(--gold); animation: mm-blink 1s ease-in-out infinite alternate; }
@keyframes mm-blink { from { opacity: .45; } to { opacity: 1; } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
.mm .df-vs { width: 100%; }
.mm .df-vs .face { max-width: 110px; }

/* ---------- рейтинговый бой: как идёт подбор ---------- */

.bt-rules { display: grid; gap: 6px; }
.bt-rules > div {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 12px; background: rgba(0, 0, 0, .32); border: 1px solid var(--line);
}
.bt-rules .ico { width: 22px; height: 22px; fill: url(#g-gold); }
.bt-rules b { display: block; font-size: 12.5px; }
.bt-rules small { display: block; font-size: 11px; color: var(--muted); }

/* ---------- идёт матч: вернуться в бой ---------- */

.live-banner {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 55; top: calc(var(--top) + 4px);
  width: min(420px, calc(100% - 20px)); display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 16px; text-align: left; color: #1c1300;
  background: linear-gradient(180deg, #ffe07a, #ffb82e); box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 200, 60, .45);
}
.live-banner > i { width: 12px; height: 12px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .3); animation: mm-blink .8s ease-in-out infinite alternate; }
.live-banner b { display: block; font-size: 14px; font-weight: 900; }
.live-banner small { display: block; font-size: 11.5px; font-weight: 700; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-banner em { font-weight: 900; font-size: 14px; }

/* ---------- партнёрка ---------- */

.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 10px; }
.ref-stats > div { padding: 9px 4px; border-radius: 14px; text-align: center; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.ref-stats b { display: block; font-size: 22px; font-weight: 900; color: var(--gold); }
.ref-stats small { display: block; font-size: 10.5px; color: var(--muted); }
.ref-link { margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px dashed rgba(255, 200, 60, .45); overflow-wrap: anywhere; }
.ref-link code { font-size: 12px; color: #ffe39a; }
.ref-swap { width: 100%; margin-top: 8px; }

/* ---------- уведомления: режим тишины ---------- */

.fd-set { width: 100%; margin-bottom: 8px; }
.ns-list { display: grid; gap: 6px; margin-bottom: 10px; }
.ns-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); cursor: pointer;
}
.ns-row b { display: block; font-size: 14px; }
.ns-row small { display: block; font-size: 11px; color: var(--muted); }
.ns-row input { position: absolute; opacity: 0; pointer-events: none; }
.ns-row .sw { position: relative; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .2s; }
.ns-row .sw::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: transform .2s;
}
.ns-row input:checked + .sw { background: linear-gradient(180deg, #4ff08a, #1fae52); }
.ns-row input:checked + .sw::after { transform: translateX(20px); }

/* ---------- пополнение через ЮMoney ---------- */

.pay-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pay-pack {
  display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 38, 36, .88), rgba(4, 16, 15, .92)); border: 1px solid rgba(255, 200, 60, .35);
}
.pay-pack b { display: flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 900; }
.pay-pack b .ico { width: 20px; height: 20px; }
.pay-pack small { font-size: 11px; color: var(--muted); }
.pay-pack em { margin-top: 6px; padding: 5px 14px; border-radius: 999px; font-weight: 900; color: #1c1300; background: linear-gradient(180deg, #ffe07a, #ffb82e); }
.pay-pack[disabled] { opacity: .6; }
.pay-own { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; margin-top: 10px; }
.pay-own input {
  min-width: 0; padding: 11px 14px; border-radius: 14px; font: inherit; font-size: 15px; color: inherit;
  background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 200, 60, .35); outline: none;
}
.pay-own input:focus { border-color: var(--gold); }
.pay-own .big { padding-left: 16px; padding-right: 16px; }

/* ---------- главная: быстрый доступ в четыре одинаковые плитки ---------- */

.hero .side .tile { min-height: 48px; padding-top: 7px; padding-bottom: 7px; }
.hero .side .tile { position: relative; }
.hero .side .tile > .badge { position: absolute; top: -4px; right: -4px; }
@media (max-height: 640px) {
  .hero .side .tile small { display: none; }
  .hero .side .tile { min-height: 38px; }
}
.ico-in { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* ---------- сквад: одинаковые кнопки ---------- */

.sq-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sq-tools .ghost {
  flex-direction: column; gap: 4px; min-height: 60px; padding: 8px 4px;
  font-size: 12.5px; line-height: 1.15; white-space: nowrap;
}
.sq-tools .ghost > i { font-size: 18px; line-height: 1; }

/* ---------- карточка: объём, светящийся край, плавное листание ---------- */

.c3d-edge { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
/* кромка — только ободок по краю: объём виден сбоку, а оборот с логотипом ничего не перекрывает */
.c3d-edge i {
  position: absolute; inset: 0; border-radius: 6%; background: none;
  border: 2.5px solid var(--c, #9aa6a0); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.c3d-edge i:nth-child(1) { transform: translateZ(2.5px); }
.c3d-edge i:nth-child(2) { transform: translateZ(1.5px); }
.c3d-edge i:nth-child(3) { transform: translateZ(.5px); }
.c3d-edge i:nth-child(4) { transform: translateZ(-.5px); }
.c3d-edge i:nth-child(5) { transform: translateZ(-1.5px); }
.c3d-edge i:nth-child(6) { transform: translateZ(-2.5px); }
.cv-card .c3d-front .face {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5), 0 0 0 3px var(--c), 0 0 26px var(--cg), 0 0 60px var(--cg);
}
.cv-card .c3d-back { box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 7px rgba(0, 0, 0, .5), inset 0 0 0 8px rgba(255, 195, 43, .45), 0 0 26px var(--cg); }

.cv-side { display: grid; min-width: 0; align-self: center; }
.cv-title .cv-name { display: block; }
.cv-card, .cv-side { transition: opacity .2s ease, transform .2s ease; }
.cv.swap-out .cv-card { opacity: 0; transform: translateX(calc(var(--dir, 1) * -48px)) scale(.9); }
.cv.swap-out .cv-side { opacity: 0; transform: translateY(8px); }
.cv.swap-in .cv-card { opacity: 0; transform: translateX(calc(var(--dir, 1) * 48px)) scale(.9); transition: none; }
.cv.swap-in .cv-side { opacity: 0; transform: translateY(-8px); transition: none; }
.cv-stat b { font-size: clamp(13px, 3.8vw, 15px); overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .cv-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .cv-stat { padding: 6px 7px; }
}

/* ---------- кейс по центру: сундук подпрыгивает и пытается открыться ---------- */

.case-pop {
  position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; padding: 16px;
  background: rgba(1, 8, 4, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: pk-in .2s ease-out;
}
.cp-box {
  position: relative; width: min(360px, 100%); padding: 20px 16px 16px; border-radius: 26px;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  background: radial-gradient(90% 50% at 50% 28%, var(--cg), transparent 70%), linear-gradient(180deg, #0b2418, #04110a 75%);
  border: 1px solid var(--cb); box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 34px var(--cg);
  animation: cp-pop .38s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes cp-pop { from { transform: scale(.82); opacity: 0; } }
.cp-x { position: absolute; right: 10px; top: 10px; }
.cp-stage { position: relative; width: 220px; height: 180px; display: grid; place-items: center; margin-top: 6px; }
.case-pop .cp-stage .chest {
  position: relative; z-index: 2; width: 180px; height: 150px; margin: 0; object-fit: contain;
  transform-origin: 50% 92%; animation: cp-hop 2.6s ease-in-out infinite;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55));
}
.cp-glow {
  position: absolute; inset: 6% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--cg), transparent 72%); filter: blur(8px);
  animation: glowpulse 2.6s ease-in-out infinite alternate;
}
.cp-shadow {
  position: absolute; bottom: 6px; left: 50%; width: 120px; height: 18px; margin-left: -60px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); animation: cp-shadow 2.6s ease-in-out infinite;
}
/* подпрыгнул, крышка будто дёрнулась — и снова ждёт */
@keyframes cp-hop {
  0%, 52%, 100% { transform: translateY(0) rotate(0) scale(1); }
  58% { transform: translateY(0) scale(1.06, .93); }
  66% { transform: translateY(-18px) rotate(-3deg) scale(.97, 1.05); }
  74% { transform: translateY(0) rotate(2.5deg) scale(1.05, .94); }
  80% { transform: translateY(-6px) rotate(-1.5deg); }
  86% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes cp-shadow {
  0%, 52%, 100% { transform: scale(1); opacity: 1; }
  66% { transform: scale(.7); opacity: .45; }
  74% { transform: scale(1.06); opacity: 1; }
}
.case-pop.locked .cp-stage .chest { animation: cp-locked 3.2s ease-in-out infinite; filter: grayscale(.4) brightness(.8) drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); }
@keyframes cp-locked {
  0%, 78%, 100% { transform: rotate(0); }
  82% { transform: rotate(-5deg); }
  86% { transform: rotate(5deg); }
  90% { transform: rotate(-3deg); }
  94% { transform: rotate(1.5deg); }
}
.case-pop.opening .cp-stage .chest { animation: cp-shake .42s ease-in-out infinite; }
@keyframes cp-shake {
  0%, 100% { transform: translateY(-8px) rotate(0) scale(1.05); }
  25% { transform: translateY(-14px) rotate(-7deg) scale(1.09); }
  75% { transform: translateY(-14px) rotate(7deg) scale(1.09); }
}
.case-pop.opening .cp-glow { animation: cp-charge 1.25s ease-in forwards; }
@keyframes cp-charge { to { transform: scale(1.7); opacity: 1; filter: blur(4px); } }
.case-pop.burst .cp-stage .chest { animation: cp-burst .65s ease-out forwards; }
@keyframes cp-burst { 0% { transform: scale(1.1); filter: brightness(2); } 100% { transform: scale(1.7); opacity: 0; filter: brightness(3); } }
.case-pop.burst .cp-stage::after {
  content: ""; position: absolute; inset: -70%; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(closest-side, #fff, var(--c) 38%, transparent 70%);
  animation: cp-flash .65s ease-out forwards;
}
@keyframes cp-flash { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.cp-title { font-size: 22px; font-weight: 900; text-shadow: 0 0 16px var(--cg), 0 2px 8px #000; }
.cp-about { font-size: 12.5px; color: var(--muted); max-width: 290px; }
.cp-note { min-height: 16px; font-size: 12.5px; color: #ffb4b4; }
.cp-actions { width: 100%; display: grid; gap: 8px; margin-top: 2px; }

/* ---------- подбор: время на ответ ---------- */

.mm-bar { width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.mm-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #45f07e, #ffd23f); }
.mm-answer { width: 100%; }

/* ---------- главная: плитки между верхом поля и кнопкой «Играть» ---------- */

.hero .side { grid-template-rows: repeat(4, minmax(0, 54px)); align-content: start; }
.hero .side .tile { min-height: 0; overflow: hidden; }
.hero .side.compact .tile { padding-top: 3px; padding-bottom: 3px; }
.hero .side.compact .tile small { display: none; }

/* ---------- кейс: что может выпасть ---------- */

.cp-stage { height: 150px; }
.case-pop .cp-stage .chest { width: 160px; height: 128px; }
.cp-pool { width: 100%; display: grid; gap: 6px; margin: 2px 0; }
.cp-pool-h { font-size: 11px; color: var(--muted); text-align: left; }
.cp-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 6px 8px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cp-strip::-webkit-scrollbar { display: none; }
.cp-strip .loading { padding: 14px; color: var(--muted); }
.cp-card { flex: none; width: 72px; scroll-snap-align: start; }
.cp-card .face { box-shadow: 0 0 0 1px var(--c), 0 0 10px rgba(0, 0, 0, .5); }
.cp-odds { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cp-odds span { padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #06180d; background: var(--c); }

/* ---------- личный кабинет ---------- */

.me-hero {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px; margin-bottom: 10px; border-radius: 22px;
  background: radial-gradient(90% 90% at 0% 0%, rgba(60, 255, 130, .18), transparent 60%), var(--glass);
  border: 1px solid var(--edge); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.me-ava {
  position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #9dffae, #2cc25a 50%, #0f7a33);
  box-shadow: 0 0 0 3px rgba(255, 200, 60, .7), 0 0 22px rgba(255, 200, 60, .35);
}
.me-ava > i { font-size: 32px; font-weight: 900; }
.me-ava img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.me-lvl {
  position: absolute; right: -4px; bottom: -4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #1c1300;
  background: linear-gradient(180deg, #ffe07a, #ffb82e); box-shadow: 0 0 0 2px #04110a;
}
.me-id { min-width: 0; display: grid; gap: 3px; }
.me-id b { font-size: 20px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-id small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-vip { justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 900; color: #1c1300; background: linear-gradient(180deg, #ffe07a, #ffb82e); }
.me-place { display: grid; justify-items: center; padding: 8px 12px; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 200, 60, .4); }
.me-place b { font-size: 24px; font-weight: 900; line-height: 1; color: var(--gold); }
.me-place small { font-size: 10.5px; color: var(--muted); }
.me-stats, .me-wallet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.me-stats > div, .me-wallet > button {
  display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 9px 4px; border-radius: 14px; text-align: center;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line);
}
.me-stats b, .me-wallet b { max-width: 100%; font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-stats small, .me-wallet small { font-size: 10.5px; color: var(--muted); }
.me-wallet .ico { width: 20px; height: 20px; }
.me-top { margin-bottom: 6px; }
.me-count { margin-left: 6px; font-size: 13px; color: var(--gold); }

.ach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ach {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 10px 6px 9px; border-radius: 16px;
  text-align: center; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); filter: grayscale(.85); opacity: .72;
}
.ach.got {
  filter: none; opacity: 1; border-color: rgba(255, 200, 60, .45);
  background: radial-gradient(80% 60% at 50% 0%, rgba(255, 200, 60, .18), transparent 70%), rgba(0, 0, 0, .35);
}
.ach-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.ach-ico .ico { width: 24px; height: 24px; fill: url(#g-gold); }
.ach b { font-size: 11.5px; line-height: 1.15; }
.ach small { font-size: 9.5px; line-height: 1.2; color: var(--muted); }
.ach-ok { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 900; color: var(--neon); }
.ach-bar { width: 80%; height: 4px; margin-top: 2px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.ach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #45f07e, #ffd23f); }

.me-coll { display: grid; gap: 6px; }
.me-rar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 54px; align-items: center; gap: 8px; font-size: 11.5px; }
.me-rar span { font-weight: 800; color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-rar > i { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .45); }
.me-rar > i > i { display: block; height: 100%; border-radius: inherit; }
.me-rar b { text-align: right; }
.me-best { display: flex; gap: 6px; padding: 6px 2px; overflow-x: auto; scrollbar-width: none; }
.me-best::-webkit-scrollbar { display: none; }
.me-best button { flex: none; width: 64px; }

.hist { display: grid; gap: 6px; }
.hist-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 34px auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-left: 3px solid rgba(255, 255, 255, .2);
}
.hist-row.win { border-left-color: var(--neon); }
.hist-row.lose { border-left-color: #ff6b6b; }
.hist-row.draw { border-left-color: var(--gold); }
.hist-row .nm { min-width: 0; }
.hist-row .nm b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-row .nm small { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-res { display: grid; justify-items: end; }
.hist-res b { font-size: 15px; font-weight: 900; }
.hist-res small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.hist-row.win .hist-res small { color: var(--neon); }
.hist-row.lose .hist-res small { color: #ff8d8d; }
.hist-card { width: 34px; }
.me-menu .lrow { margin-bottom: 6px; }
.promo-in {
  width: 100%; margin: 6px 0 10px; padding: 12px 14px; border-radius: 14px; font: inherit; font-size: 16px; letter-spacing: 1px;
  text-transform: uppercase; color: inherit; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 200, 60, .35); outline: none;
}
@media (max-width: 380px) {
  .hist-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
  .hist-card { display: none; }
}

/* ---------- рейтинг: пьедестал и дальше весь список ---------- */

.rk-h { margin-top: 8px; }
.rk-more { width: 100%; margin: 6px 0 10px; }
.rk-empty { margin-bottom: 10px; }

/* реванш: тот же соперник, новая ставка */
.rm-rival { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.rm-rival .pav { width: 46px; height: 46px; flex: none; }
.rm-rival span { display: grid; min-width: 0; }
.rm-rival small { color: var(--muted); }
.rm-vs .rm-slot { display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 120px; border: 2px dashed var(--edge); border-radius: 12px; color: var(--muted); }
.rm-vs .rm-slot span { font-size: 30px; line-height: 1; color: var(--gold); }
.mm .rm-no { display: block; margin: 2px auto 10px; width: max-content; filter: grayscale(.55); }
.mm #rm-close { margin-top: 8px; width: 100%; }

/* вход в панель управления — только у сотрудников */
.me-menu .adm-entry { border-color: rgba(255, 200, 58, .5); background: linear-gradient(180deg, rgba(64, 46, 8, .6), rgba(22, 15, 2, .78)); }
.me-menu .adm-entry .ico { fill: url(#g-gold); }
.me-menu .adm-entry small { display: block; color: var(--gold); font-size: 11.5px; font-weight: 700; }

/* обязательная подписка на канал: заслонка поверх всего приложения */
.subgate {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(80% 60% at 50% 30%, rgba(30, 110, 60, .55), rgba(2, 11, 6, .96) 70%), rgba(2, 11, 6, .94);
  backdrop-filter: blur(6px);
}
.subgate-box {
  width: min(100%, 380px); display: grid; justify-items: center; gap: 10px; padding: 24px 18px 18px; border-radius: 24px;
  text-align: center; background: var(--glass); border: 1px solid var(--edge); box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}
.subgate-logo { width: 96px; height: 125px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); }
.subgate-title { font-size: 22px; font-weight: 900; }
.subgate-box p { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.45; }
.subgate-ch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 200, 58, .1); border: 1px solid rgba(255, 200, 58, .35); color: var(--gold); font-weight: 800; }
.subgate-ch .ico { width: 18px; height: 18px; fill: url(#g-gold); }
.subgate-box .big, .subgate-box .ghost { width: 100%; }
.subgate-note { min-height: 16px; color: var(--muted); font-size: 12.5px; }

/* ---------- «Во что играем?»: карточки режимов ----------
   Большая карточка сверху (битва драфтов или рейтинговый бой), остальные — сеткой по две.
   Анимации только transform/opacity; при «уменьшить движение» всё стоит. */

.pm2 { display: grid; gap: 10px; margin-top: 8px; }
.pm2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.pm2-card {
  --rim: rgba(120, 255, 175, .5); --glow: rgba(70, 255, 130, .32);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; min-width: 0; min-height: 182px; padding: 11px; border-radius: 20px; text-align: left;
  background: linear-gradient(160deg, #1b5d38, #04160c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px rgba(0, 0, 0, .45), 0 0 16px var(--glow);
  -webkit-user-select: none; user-select: none;
  transition: transform .14s ease-out;
  animation: pm2-rise .56s cubic-bezier(.2, .85, .25, 1.12) backwards;
  animation-delay: calc(70ms + var(--i, 0) * 70ms);
}
/* светящаяся кромка: светлая сверху, в цвет режима ниже */
.pm2-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), var(--rim) 38%, rgba(255, 255, 255, .06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.pm2-card:active { transform: scale(.965); }
@keyframes pm2-rise { from { opacity: 0; transform: translateY(24px) scale(.94); } }

.pm2-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* затемнение снизу — под текст */
.pm2-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(2, 9, 6, .5) 60%, rgba(2, 9, 6, .9));
}
.pm2-art i { position: absolute; display: block; }
.pm2-glow {
  top: -26px; right: -26px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 68%);
}
.pm2-emb {
  position: absolute; top: 8px; right: 7px; width: 64px; height: 64px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
  transform: rotate(8deg);
  animation: pm2-pop .6s cubic-bezier(.2, .9, .3, 1.35) backwards;
  animation-delay: calc(220ms + var(--i, 0) * 70ms);
}
@keyframes pm2-pop { from { opacity: 0; transform: scale(.4) rotate(-24deg); } }

/* текст без позиционирования: значок режима встаёт в угол самой карточки, а не текстового блока */
.pm2-txt { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.pm2-title {
  max-width: 100%; font-size: 18px; line-height: 1.05; font-weight: 900; letter-spacing: .1px; color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
}
.pm2-hook { max-width: 100%; font-size: 12px; line-height: 1.25; color: rgba(236, 246, 240, .84); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.pm2-foot { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 5px; min-width: 0; }
.pm2-chip {
  flex: none; display: inline-flex; align-items: center; gap: 2px; height: 23px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; color: #fff;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .2);
}
.pm2-chip .ico { width: 13px; height: 13px; fill: url(#g-bolt); filter: drop-shadow(0 0 3px rgba(255, 200, 40, .7)); }
.pm2-chip.low { color: #ffb3b3; border-color: rgba(255, 110, 110, .55); }
.pm2-go {
  flex: none; margin-left: auto; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; color: #1c1300;
  background: linear-gradient(180deg, #fff39a, #ffd23d 45%, #f59e0b);
  box-shadow: 0 0 10px rgba(255, 200, 50, .45), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(170, 80, 0, .3);
}
.pm2-go .chev { width: 12px; height: 12px; color: #1c1300; }
.pm2-go .ico { width: 13px; height: 13px; fill: #d7e0db; }

.pm2-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2; overflow: hidden;
  padding: 3px 8px; border-radius: 999px; font-size: 10.5px; line-height: 1.2; font-weight: 900; letter-spacing: .5px; color: #fff; white-space: nowrap;
}
.pm2-hot { background: linear-gradient(180deg, #ff8a3d, #e5322d); box-shadow: 0 0 12px rgba(255, 90, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pm2-free { letter-spacing: 0; background: linear-gradient(180deg, #3fe07a, #148a42); box-shadow: 0 0 10px rgba(70, 255, 130, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pm2-place {
  display: inline-flex; align-items: center; gap: 3px; letter-spacing: .2px; color: var(--gold);
  background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(255, 214, 100, .55);
}
.pm2-place .ico { width: 11px; height: 11px; fill: url(#g-gold); }
.pm2-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.pm2-new {
  color: #1c1300; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff39a, #ffd23d 55%, #f59e0b);
  box-shadow: 0 0 14px rgba(255, 200, 50, .65), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.pm2-new::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .95) 50%, transparent 72%);
  transform: translateX(-130%); animation: pm2-shine 2.6s ease-in-out 1s infinite;
}
@keyframes pm2-shine { 55%, 100% { transform: translateX(130%); } }

/* ---- большая карточка ---- */
.pm2-hero { min-height: 184px; padding: 14px; justify-content: center; }
.pm2-hero .pm2-txt { max-width: 54%; gap: 5px; }
.pm2-hero .pm2-badge, .pm2-wide .pm2-badge { position: relative; top: 0; left: 0; }
.pm2-hero .pm2-title { font-size: clamp(22px, 6.6vw, 28px); line-height: 1; }
.pm2-hero .pm2-hook { font-size: 13px; }
.pm2-time { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-weight: 800; color: #ffe08a; }
.pm2-time .ico { width: 13px; height: 13px; color: #ffd23d; }
.pm2-hero .pm2-foot { margin-top: 6px; }
.pm2-hero .pm2-go { margin-left: 0; }
.pm2-go-txt {
  width: auto; height: 31px; padding: 0 9px 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 14px; font-weight: 900; letter-spacing: .3px;
}
/* блик пробегает по большой карточке */
.pm2-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%);
  transform: translateX(-120%); animation: pm2-sheen 5s ease-in-out 1.4s infinite;
}
@keyframes pm2-sheen { 45%, 100% { transform: translateX(120%); } }

/* битва драфтов: фиолетовая глубина, золотые лучи и веер карточек */
.pm2-draft {
  --rim: rgba(200, 170, 255, .8); --glow: rgba(140, 90, 255, .5);
  background:
    radial-gradient(70% 110% at 78% 55%, rgba(255, 80, 220, .32), transparent 62%),
    radial-gradient(70% 90% at 0% 0%, rgba(70, 120, 255, .45), transparent 70%),
    linear-gradient(118deg, #16106a 0%, #2a1896 45%, #4a1fb0 78%, #2b137a 100%);
}
.pm2-draft .pm2-art::after { background: linear-gradient(90deg, rgba(10, 6, 40, .72), rgba(10, 6, 40, .25) 50%, transparent 70%); }
.pm2-rays {
  right: calc(22% - 150px); top: 50%; width: 300px; height: 300px; margin-top: -150px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 220, 140, .16) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%);
  mask: radial-gradient(circle, #000 12%, transparent 66%);
  animation: pm2-spin 48s linear infinite;
}
@keyframes pm2-spin { to { transform: rotate(1turn); } }
.pm2-draft .pm2-glow {
  top: 50%; right: calc(22% - 90px); width: 180px; height: 180px; margin-top: -90px;
  background: radial-gradient(circle, rgba(255, 205, 90, .55), rgba(190, 100, 255, .28) 42%, transparent 70%);
  animation: pm2-pulse 2.8s ease-in-out infinite alternate;
}
@keyframes pm2-pulse { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }
.pm2-fan { position: absolute; top: 50%; right: calc(22% - 75px); width: 150px; height: 132px; margin-top: -60px; }
.pm2-fc {
  --k: 0; position: absolute; left: 50%; bottom: 4px; width: 68px; margin-left: -34px; transform-origin: 50% 115%;
  animation: pm2-deal .7s cubic-bezier(.2, .9, .25, 1.2) backwards;
  animation-delay: calc(300ms + var(--k) * 90ms);
}
.pm2-fc0 { transform: translateX(-38px) rotate(-17deg) scale(.92); }
.pm2-fc1 { --k: 1; z-index: 2; width: 80px; margin-left: -40px; bottom: 14px; }
.pm2-fc2 { --k: 2; transform: translateX(38px) rotate(17deg) scale(.92); }
@keyframes pm2-deal { from { opacity: 0; transform: translateY(26px) rotate(0) scale(.6); } }
.pm2-fl { display: block; animation: pm2-float 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -1.1s); }
@keyframes pm2-float { from { transform: translateY(3px); } to { transform: translateY(-5px); } }
.pm2-fc .face { box-shadow: 0 10px 18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12); }
.pm2-fc1 .face { box-shadow: 0 12px 22px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 200, 80, .45); }

/* рейтинговый бой: стадион в синих огнях и золотой кубок */
.pm2-ranked { --rim: rgba(150, 215, 255, .7); --glow: rgba(255, 196, 60, .38); background: linear-gradient(160deg, #0d2a55, #03101f); }
.pm2-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.pm2-tint { inset: 0; background: linear-gradient(165deg, rgba(8, 30, 90, .55), rgba(4, 14, 40, .25) 55%, rgba(255, 170, 30, .1)); }
.pm2-ranked .pm2-emb { width: 58px; height: 58px; top: 8px; right: 9px; }
.pm2-ranked .pm2-art::after { background: linear-gradient(180deg, transparent 20%, rgba(2, 10, 26, .62) 50%, rgba(2, 10, 26, .95)); }
.pm2-hero.pm2-ranked .pm2-photo { left: 30%; width: 84%; object-position: 50% 20%; -webkit-mask: linear-gradient(90deg, transparent, #000 38%); mask: linear-gradient(90deg, transparent, #000 38%); }
.pm2-hero.pm2-ranked .pm2-art::after { background: linear-gradient(90deg, rgba(2, 10, 26, .8), rgba(2, 10, 26, .3) 55%, transparent 75%); }
.pm2-hero.pm2-ranked .pm2-emb { top: auto; bottom: 12px; right: 12px; width: 58px; height: 58px; }
.pm2-hero.pm2-ranked .pm2-glow { top: auto; bottom: -40px; right: -30px; width: 160px; height: 160px; }

/* дуэль: красный против синего, по шву — вспышка */
.pm2-duel {
  --rim: rgba(255, 150, 150, .7); --glow: rgba(255, 80, 80, .28);
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(135deg, #c3162f 0%, #6a0b1f 47%, #0d1c66 53%, #2358e0 100%);
}
.pm2-seam {
  left: 50%; top: -25%; width: 3px; height: 150%; margin-left: -1.5px;
  background: linear-gradient(180deg, transparent 8%, #fff 30%, rgba(255, 255, 255, .8) 42%, transparent 62%);
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, .55);
  transform: rotate(45deg); opacity: .75;
}
.pm2-duel .pm2-glow { --glow: rgba(255, 230, 150, .35); }

/* битва сквадов: изумруд, диагональные полосы и золотой герб */
.pm2-squad {
  --rim: rgba(255, 214, 100, .7); --glow: rgba(60, 255, 140, .3);
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(60, 255, 140, .32), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #0f5a36, #03170d);
}
.pm2-locked { --rim: rgba(200, 210, 205, .4); --glow: rgba(0, 0, 0, 0); }
.pm2-locked .pm2-emb { filter: grayscale(1) brightness(.62); }
.pm2-locked .pm2-art { filter: saturate(.35) brightness(.8); }
.pm2-locked .pm2-hook { color: rgba(236, 246, 240, .7); }
.pm2-locked .pm2-go { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pm2-lockd {
  position: absolute; top: 30px; right: 23px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #26352e, #07100c); border: 1.5px solid rgba(255, 255, 255, .4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
}
.pm2-lockd .ico { width: 17px; height: 17px; fill: #e8efe9; }
.pm2-card.pm2-shake { animation: pm2-shake .42s ease-in-out; }
@keyframes pm2-shake {
  20% { transform: translateX(-7px) rotate(-1.2deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* тренировка: газон полосами, разметка и мяч */
.pm2-train {
  --rim: rgba(190, 255, 130, .7); --glow: rgba(200, 255, 120, .3);
  background:
    url(/img/modes/pitch.svg) center / cover no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, #2f9a3f, #0b4719);
}
.pm2-train .pm2-emb { width: 60px; height: 60px; top: 18px; right: 12px; }
/* без драфта тренировка идёт широкой строкой под парой карточек */
.pm2-wide { grid-column: 1 / -1; min-height: 104px; justify-content: center; }
.pm2-wide .pm2-txt { max-width: 68%; }
.pm2-wide .pm2-foot { width: auto; }
.pm2-wide .pm2-go { margin-left: 4px; }
.pm2-wide .pm2-emb { top: 50%; margin-top: -30px; right: 22px; }
.pm2-wide .pm2-glow { top: 50%; right: -10px; margin-top: -65px; }
.pm2-wide .pm2-art::after { background: linear-gradient(90deg, rgba(2, 9, 6, .82), rgba(2, 9, 6, .35) 62%, transparent); }
.pm2-wide.pm2-train { background-position: 50% 0, 0 0, 0 0; }

@media (max-width: 374px) {
  .pm2-grid, .pm2 { gap: 8px; }
  .pm2-card { padding: 10px; }
  .pm2-title { font-size: 17px; }
  .pm2-hook { font-size: 11.5px; }
  .pm2-chip { padding: 0 6px; font-size: 11px; }
  .pm2-emb { width: 60px; height: 60px; }
  .pm2-go:not(.pm2-go-txt) { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm2 *, .pm2 *::before, .pm2 *::after { animation: none !important; transition: none !important; }
}

/* ---------- живые счётчики, таймеры и анимации ---------- */
/* Один таймер в app.js ведёт все счётчики: попытки, бесплатный кейс, «Награда», точку в меню.
   Анимации — только transform и opacity; при «уменьшить движение» всё стоит. */

/* прокрутка там, где без неё никак, — без полос прокрутки */
html, body, .sheet, .dm-list, .ch-list, .mm-box, .cp-strip, .me-best { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

/* ---- нажатие: всё, что нажимается, чуть проседает ---- */
.tile, .slot, .lrow, .rk, .tag, .ghost, .tile3, .case .price, .good .buy, .arc, .drop, .me-wallet > button, .pay-pack,
.seg button, .dm-tabs button, .fd, .sk-up, .coin, .bell, .cv-x, .pk-close, .sheet .close, .me-place, #tabs button .ico {
  transition: transform .16s cubic-bezier(.3, .7, .4, 1.5), filter .16s ease-out;
}
.tile:active, .slot:active, .lrow:active, .rk:active, .tag:active, .ghost:active, .tile3:active, .case .price:active,
.good .buy:active, .arc:active, .me-wallet > button:active, .pay-pack:active, .seg button:active, .dm-tabs button:active,
.fd:active, .sk-up:active, .coin:active, .bell:active, .cv-x:active, .pk-close:active, .sheet .close:active, .me-place:active {
  transform: scale(.95); filter: brightness(1.14); transition-duration: .06s;
}
.drop:active { transform: scale(.98); filter: brightness(1.1); transition-duration: .06s; }
#tabs button:active .ico { transform: scale(.8); transition-duration: .06s; }
#tabs button.on .ico { animation: tab-pop .42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tab-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.18) translateY(-2px); } }

/* ---- экраны и списки ---- */
#screen.scr-in { animation: scr-in .32s cubic-bezier(.2, .8, .3, 1); }
@keyframes scr-in { from { opacity: 0; transform: translate3d(var(--dx, 0px), 10px, 0); } }
.st-in { animation: st-rise .44s cubic-bezier(.2, .8, .3, 1.1) backwards; animation-delay: calc(50ms + var(--k, 0) * 34ms); }
@keyframes st-rise { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.tile3.st-in, .good.st-in { animation-name: st-flip; animation-duration: .52s; }
@keyframes st-flip { from { opacity: 0; transform: perspective(700px) rotateY(-70deg) translateY(8px); } }

/* ---- шторка: выезжает с пружинкой, закрывается уезжая вниз ---- */
#modal:not(.hidden) { animation: pk-in .18s ease-out; }
.sheet { max-height: min(90vh, calc(100vh - env(safe-area-inset-top) - 12px)); animation: sheet-up .34s cubic-bezier(.2, .9, .3, 1.06); }
@keyframes sheet-up { from { transform: translateY(70px); opacity: .2; } }
.modal-ghost {
  position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
  background: rgba(1, 8, 4, .72); animation: ghost-fade .24s ease-in forwards;
}
.modal-ghost .sheet { animation: ghost-down .24s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes ghost-fade { to { opacity: 0; } }
@keyframes ghost-down { to { transform: translateY(45%); opacity: 0; } }

/* ---- шапка: прибавка прилетает, цифры подпрыгивают ---- */
.fly-ico { position: fixed; z-index: 95; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; will-change: transform, opacity; }
.fly-ico .ico { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 214, 80, .85)); }
.spark {
  position: fixed; z-index: 95; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 8px 2px rgba(255, 222, 100, .7); will-change: transform, opacity;
}
[data-live="attempts"] { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- «Открыть карточку»: попытки или таймер до новых ---- */
.drop-sub em { font-weight: 800; color: #fff; }
.drop.cooldown .drop-sub { color: #d9d4ff; font-variant-numeric: tabular-nums; }
.drop.cooldown .drop-card { animation: none; filter: grayscale(.7) brightness(.75); }
.drop.cooldown::after { animation: none; opacity: 0; }

/* ---- «Награда» на главной: готово — золото дышит, подарок прыгает; ждёт — таймер ---- */
.tile.rw::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 216, 90, .95), inset 0 0 18px rgba(255, 196, 50, .38);
}
.tile.rw.is-ready { border-color: rgba(255, 214, 90, .7); background: linear-gradient(180deg, rgba(58, 44, 8, .86), rgba(14, 12, 3, .84)); }
.tile.rw.is-ready::after { animation: glow-breathe 1.5s ease-in-out infinite alternate; }
@keyframes glow-breathe { from { opacity: .3; } to { opacity: 1; } }
.tile.rw.is-ready > .ico { transform-origin: 50% 90%; animation: gift-hop 1.9s cubic-bezier(.3, .7, .4, 1) infinite; }
@keyframes gift-hop {
  0%, 52%, 100% { transform: none; }
  60% { transform: scale(1.14, .86); }
  70% { transform: translateY(-6px) rotate(-9deg) scale(.94, 1.07); }
  80% { transform: rotate(6deg) scale(1.06, .95); }
  90% { transform: rotate(-2deg); }
}
.tile.rw.is-ready small { color: #ffd84a; font-weight: 800; }
.tile.rw.cooldown > .ico { filter: grayscale(.85) brightness(.72) drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.tile.rw.cooldown small { color: #d6e6de; font-variant-numeric: tabular-nums; }
.tile.rw .rw-clock { width: 12px; height: 12px; margin: -2px 3px 0 0; color: #ffd84a; }
.tile.rw.is-ready .rw-clock { display: none; }
.hero .side.compact .tile.rw small { display: block; }
.hero .side.compact .tile.rw b { display: none; }
@media (max-height: 640px) {
  .hero .side .tile.rw small { display: block; }
  .hero .side .tile.rw b { display: none; }
}

/* ---- сундуки на главной ---- */
.slot:not(.locked) .lock { display: none; }
.slot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px rgba(210, 255, 110, .95), inset 0 0 20px rgba(150, 255, 70, .35);
}
.slot.ready::after { animation: glow-breathe 1.3s ease-in-out infinite alternate; }
.slot.ready .chest, .case.is-ready .chest { transform-origin: 50% 92%; animation: chest-wiggle 2.6s ease-in-out infinite; }
@keyframes chest-wiggle {
  0%, 60%, 100% { transform: none; }
  66% { transform: translateY(-5px) rotate(-6deg) scale(1.05); }
  73% { transform: rotate(5deg); }
  80% { transform: translateY(-2px) rotate(-3deg); }
  87% { transform: rotate(1deg); }
}
.slot.cooldown { border-color: rgba(150, 170, 180, .2); }
.slot.cooldown .chest { filter: grayscale(.75) brightness(.7) drop-shadow(0 5px 6px rgba(0, 0, 0, .5)); }
.slot.cooldown .when { font-size: 11px; font-weight: 700; color: #aebfca; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }

/* ---- магазин: бесплатный кейс — золотая кнопка или таймер ---- */
.case .price.ready { color: #1c1300; border-color: #fff1a0; background: linear-gradient(180deg, #fff39a, #ffd23d 50%, #f59e0b); box-shadow: 0 0 12px rgba(255, 200, 50, .5), inset 0 1px 0 rgba(255, 255, 255, .7); }
.case .price.ready::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 16px 3px rgba(255, 210, 60, .75); animation: glow-breathe 1.3s ease-in-out infinite alternate;
}
.case.free .price.off { flex-direction: column; gap: 0; padding: 5px 12px; line-height: 1.15; color: #cfdcd5; }
.case .price .pr-l { display: block; font-size: 10.5px; font-weight: 700; opacity: .75; white-space: nowrap; }
.case .price .pr-t { display: block; font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- точка на «Главной»: награда ждёт ---- */
#tabs .nav-dot {
  position: absolute; top: 8px; right: calc(50% - 21px); width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc32b 60%, #e08a00);
  box-shadow: 0 0 0 2px #041a0d, 0 0 10px rgba(255, 195, 43, .9); animation: dot-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes dot-pulse { from { transform: scale(.8); } to { transform: scale(1.18); } }

/* ---- окно кейса и «попытки закончились»: живой таймер ---- */
.cp-note .cp-timer {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #ffe39a; background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 200, 60, .38);
}
.cp-timer .ico { width: 16px; height: 16px; color: var(--gold); }
.cp-timer b { color: #fff; font-variant-numeric: tabular-nums; }
.case-pop.ready .cp-go { animation: go-nudge 2.4s ease-in-out 1s infinite; }
@keyframes go-nudge { 0%, 80%, 100% { transform: none; } 85% { transform: scale(1.04) rotate(-1deg); } 90% { transform: scale(1.04) rotate(1deg); } 95% { transform: scale(1.02); } }
.lk-timer {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 11px 13px; border-radius: 16px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 200, 60, .38);
}
.lk-timer .ico { width: 26px; height: 26px; flex: none; color: var(--gold); animation: clock-sway 2s ease-in-out infinite; }
@keyframes clock-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.lk-timer b { font-size: 16px; font-variant-numeric: tabular-nums; }
.lk-open { margin-bottom: 8px; }

/* ---- выпавшая карточка: кольцо света, характеристики въезжают ---- */
.cv-reveal .cv-card { position: relative; }
.cv-reveal .cv-card::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(74%, 46vh); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 3px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c);
  transform: translate(-50%, -50%) scale(.3); opacity: 0; animation: cv-ring .95s .3s ease-out;
}
@keyframes cv-ring { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } }
.cv-reveal .cv-info > * { animation: cv-slide .46s cubic-bezier(.2, .8, .3, 1.1) backwards; }
.cv-reveal .cv-info > :nth-child(1) { animation-delay: .38s; }
.cv-reveal .cv-info > :nth-child(2) { animation-delay: .44s; }
.cv-reveal .cv-info > :nth-child(3) { animation-delay: .5s; }
.cv-reveal .cv-info > :nth-child(4) { animation-delay: .56s; }
.cv-reveal .cv-info > :nth-child(5) { animation-delay: .62s; }
.cv-reveal .cv-info > :nth-child(6) { animation-delay: .68s; }
@keyframes cv-slide { from { opacity: 0; transform: translateX(22px); } }
.cv-reveal .cv-foot { animation: cv-rise .46s .6s cubic-bezier(.2, .8, .3, 1.1) backwards; }
@keyframes cv-rise { from { opacity: 0; transform: translateY(18px); } }

/* ---- «Во что играем?»: всё в экране без прокрутки, на низком телефоне — компактные карточки ---- */
.sheet.pm-sheet { max-height: calc(100vh - env(safe-area-inset-top) - 8px); }
.pm-sheet h2 { margin-bottom: 0; }
.pm-sheet .pm-live { margin-bottom: 4px; padding: 9px; }
.pm-sheet .pm2 { gap: clamp(6px, 1.2vh, 10px); margin-top: clamp(4px, 1vh, 8px); }
.pm-sheet .pm2-grid { gap: clamp(6px, 1.2vh, 10px); }
.pm-sheet .pm2-hero { min-height: 0; height: clamp(118px, 23vh, 196px); }
.pm-sheet .pm2-grid > .pm2-card { min-height: 0; height: clamp(100px, 21vh, 182px); }
.pm-sheet .pm2-grid > .pm2-wide { height: clamp(76px, 12.5vh, 104px); }

@media (max-height: 780px) {
  .pm-sheet .pm2-card { padding: 9px 10px; }
  .pm-sheet .pm2-grid .pm2-hook { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-sheet .pm2-grid .pm2-card:not(.pm2-wide) .pm2-emb { top: 6px; right: 6px; width: clamp(32px, 5.2vh, 58px); height: clamp(32px, 5.2vh, 58px); }
  .pm-sheet .pm2-grid .pm2-card:not(.pm2-wide) .pm2-title { font-size: clamp(15.5px, 2.6vh, 18px); }
  .pm-sheet .pm2-grid > .pm2-wide { height: clamp(100px, 15.5vh, 110px); padding-block: 7px; }
  .pm-sheet .pm2-wide .pm2-txt { gap: 2px; }
  .pm-sheet .pm2-wide .pm2-emb { width: 48px; height: 48px; margin-top: -24px; }
  .pm-sheet .pm2-badge { top: 8px; left: 8px; padding: 2px 7px; font-size: 10px; }
  .pm-sheet .pm2-hero .pm2-badge, .pm-sheet .pm2-wide .pm2-badge { top: 0; left: 0; }
  .pm-sheet .pm2-chip { height: 21px; }
  .pm-sheet .pm2-go:not(.pm2-go-txt) { width: 25px; height: 25px; }
  .pm-sheet .pm2-foot { margin-top: 3px; }
  .pm-sheet .pm2-hero { padding: 9px 14px; }
  .pm-sheet .pm2-hero .pm2-txt { gap: 3px; }
  .pm-sheet .pm2-hero.pm2-ranked .pm2-txt { max-width: 66%; }
  .pm-sheet .pm2-hero .pm2-title { font-size: clamp(19px, 3.4vh, 26px); }
  .pm-sheet .pm2-hero .pm2-hook { font-size: 12px; }
  .pm-sheet .pm2-hero .pm2-foot { margin-top: 3px; }
  .pm-sheet .pm2-go-txt { height: 27px; font-size: 13px; }
  .pm-sheet .pm2-fan { transform: scale(.8); transform-origin: 62% 55%; }
  .pm-sheet .pm2-hero.pm2-ranked .pm2-emb { width: 48px; height: 48px; bottom: 8px; right: 10px; }
  .pm-sheet .pm2-lockd { top: 14px; right: 14px; width: 30px; height: 30px; }
  .pm-sheet .pm2-lockd .ico { width: 14px; height: 14px; }
}
@media (max-height: 600px) {
  .pm-sheet .pm2-grid .pm2-hook, .pm-sheet .pm2-time { display: none; }
}

/* низкий экран: шторки плотнее, чтобы влезали без прокрутки */
@media (max-height: 700px) {
  .sheet h2 { font-size: 17.5px; }
  .sheet .sub { font-size: 12px; margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-in, #screen.scr-in, #tabs button.on .ico, #modal:not(.hidden), .sheet, .modal-ghost, .modal-ghost .sheet,
  .tile.rw.is-ready::after, .tile.rw.is-ready > .ico, .slot.ready::after, .slot.ready .chest, .case.is-ready .chest,
  .case .price.ready::after, #tabs .nav-dot, .case-pop.ready .cp-go, .lk-timer .ico,
  .cv-reveal .cv-card::before, .cv-reveal .cv-info > *, .cv-reveal .cv-foot { animation: none !important; }
  .tile, .slot, .lrow, .rk, .tag, .ghost, .tile3, .case .price, .good .buy, .arc, .drop, .coin, #tabs button .ico { transition: none !important; }
}

/* ---------- уведомления в боте: движуха, тихие часы, группы по одной ---------- */
.nf-sub { margin-bottom: 8px; }
.nf-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 7px;
  padding: 6px 6px 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.nf-lbl { display: grid; min-width: 0; }
.nf-lbl b { font-size: 13.5px; }
.nf-lbl small { font-size: 10.5px; color: var(--muted); }
.nf-seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .38); border: 1px solid var(--line); }
.nf-seg button {
  padding: 6px 9px; border-radius: 9px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap;
  transition: transform .16s cubic-bezier(.3, .7, .4, 1.5), color .16s ease-out;
}
.nf-seg button:active { transform: scale(.9); transition-duration: .06s; }
.nf-seg button.on {
  color: #1c1300; background: linear-gradient(180deg, #ffe07a, #ffb82e);
  box-shadow: 0 0 10px rgba(255, 200, 60, .4), inset 0 1px 0 rgba(255, 255, 255, .6); animation: nf-pick .32s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes nf-pick { from { transform: scale(.8); } }
.nf-quiet button { padding: 6px 7px; font-variant-numeric: tabular-nums; }
.nf-groups { display: grid; gap: 6px; margin: 2px 0 10px; }
.nf-grp { border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s, background-color .2s; }
.nf-grp.open { border-color: rgba(120, 255, 175, .32); background: rgba(22, 70, 44, .28); }
.nf-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; width: 100%; padding: 8px 12px 8px 10px; text-align: left; }
.nf-head:active .nf-emo { transform: scale(.85); }
.nf-emo { font-size: 19px; line-height: 1; text-align: center; transition: transform .16s cubic-bezier(.3, .7, .4, 1.5); }
.nf-t { display: grid; min-width: 0; }
.nf-t b { font-size: 14px; }
.nf-t small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-count {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--neon); background: rgba(69, 240, 126, .1); border: 1px solid rgba(69, 240, 126, .32);
}
.nf-head .chev { transition: transform .24s cubic-bezier(.3, .7, .4, 1.3); }
.nf-grp.open .nf-head .chev { transform: rotate(90deg); }
.nf-body { display: none; gap: 5px; padding: 0 8px 8px; }
.nf-grp.open .nf-body { display: grid; }
.nf-row { padding: 7px 10px 7px 12px; }
.nf-row b { font-size: 13px; font-weight: 600; }
.nf-grp.dim .nf-count { color: #ffb3b3; background: rgba(229, 72, 77, .12); border-color: rgba(229, 72, 77, .42); }
.nf-grp.dim .nf-body { opacity: .55; }
.nf-all .ghost { padding: 9px 6px; font-size: 12.5px; }
@media (max-width: 374px) {
  .nf-seg button { padding: 6px 7px; font-size: 11.5px; }
  .nf-quiet button { padding: 6px 5px; }
  .nf-line { padding-left: 10px; }
}
@media (max-height: 700px) {
  .nf-sub { display: none; }
  .nf-head { padding-top: 6px; padding-bottom: 6px; }
  .nf-row { padding-top: 5px; padding-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-seg button.on { animation: none !important; }
  .nf-seg button, .nf-grp, .nf-emo, .nf-head .chev { transition: none !important; }
}

/* ================= турниры: вкладка и экран ================= */
#tabs { grid-template-columns: repeat(6, 1fr); }
#tabs button { font-size: 11px; }
#tabs .ico { width: 25px; height: 25px; }
#tabs [data-tab="tourney"] { --acc: #ffd23f; --acc-2: #f59e0b; }
#tabs [data-tab="tourney"].on .ico { fill: url(#g-gold); }
@media (max-width: 380px) {
  #tabs button { font-size: 10px; gap: 1px; }
  #tabs .ico { width: 23px; height: 23px; }
}

.tr-card {
  position: relative; margin-bottom: 12px; padding: 14px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 200, 60, .16), transparent 70%), var(--card, rgba(10, 22, 18, .92));
  border: 1px solid rgba(255, 210, 90, .32); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.tr-card.done { border-color: rgba(255, 255, 255, .14); background: rgba(10, 18, 16, .9); }
.tr-head { display: flex; align-items: flex-start; gap: 10px; }
.tr-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tr-name b { font-size: 17px; line-height: 1.2; }
.tr-name small { font-size: 11.5px; color: var(--muted); }
.tr-state {
  flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap;
  color: #0c2412; background: linear-gradient(180deg, #9dffb4, #3ad86a);
}
.tr-state.soon { color: #08202c; background: linear-gradient(180deg, #a8e8ff, #35b7e8); }
.tr-state.done { color: #e6ecf5; background: rgba(255, 255, 255, .12); }
.tr-about { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.35; color: #cfe3d8; }
.tr-prizes { display: grid; gap: 6px; margin-bottom: 12px; }
.tr-prize {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 210, 90, .22);
}
.tr-prize i { font-style: normal; font-size: 16px; }
.tr-steps { display: grid; gap: 8px; margin-bottom: 12px; }
.tr-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; }
.tr-step > i {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 13px;
  font-weight: 900; color: #cfe3d8; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.tr-step.done > i { color: #06240f; background: linear-gradient(180deg, #9dffb4, #2fd46a); border-color: transparent; }
.tr-step span { display: grid; gap: 2px; min-width: 0; }
.tr-step b { font-size: 13px; }
.tr-step small { font-size: 11px; color: var(--muted); }
.tr-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tr-bar u { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffd23f, #f59e0b); }
.tr-me {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; padding: 9px 12px;
  border-radius: 14px; font-size: 12.5px; background: rgba(255, 210, 90, .1); border: 1px solid rgba(255, 210, 90, .3);
}
.tr-me b { font-size: 15px; color: #ffd23f; }
.tr-h { margin: 14px 0 8px; font-size: 13px; color: var(--muted); }
.tr-card .rk.me { background: rgba(255, 210, 90, .12); border-color: rgba(255, 210, 90, .35); }
.tr-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--muted); }

/* ================= турнир: подиум фонда, компактная шапка ================= */
.tr-card { padding: 12px; }
.tr-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.tr-emblem {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px;
  background: radial-gradient(circle at 35% 30%, #fff1a8, #f5b30b 55%, #9a5a00); box-shadow: 0 0 16px rgba(255, 196, 40, .45);
}
.tr-emblem .ico { width: 24px; height: 24px; fill: #2a1600; }
.tr-name b { font-size: 16px; }
.tr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.tr-kpis div {
  display: grid; justify-items: center; gap: 1px; padding: 7px 4px; border-radius: 12px; text-align: center; min-width: 0;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.tr-kpis b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tr-kpis small { font-size: 10px; color: var(--muted); }
.tr-kpis .fund { background: linear-gradient(180deg, rgba(255, 210, 90, .22), rgba(255, 170, 30, .08)); border-color: rgba(255, 210, 90, .45); }
.tr-kpis .fund b { color: #ffd23f; text-shadow: 0 0 10px rgba(255, 196, 40, .5); }
.tr-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; margin: 4px 0 8px; }
.pd {
  position: relative; display: grid; justify-items: center; align-content: end; gap: 2px; padding: 10px 4px 9px;
  border-radius: 14px 14px 10px 10px; text-align: center; min-width: 0; overflow: hidden;
}
.pd i { font-style: normal; font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.pd b { font-size: 15px; font-weight: 900; white-space: nowrap; }
.pd small { font-size: 10.5px; font-weight: 700; opacity: .85; }
.pd.p1 {
  min-height: 108px; color: #2a1600;
  background: linear-gradient(180deg, #fff3b0, #ffd23f 45%, #e79a0c); box-shadow: 0 0 22px rgba(255, 196, 40, .55), inset 0 1px 0 #fff;
}
.pd.p1 i { font-size: 26px; }
.pd.p1 b { font-size: 18px; }
.pd.p2 { min-height: 86px; color: #1b222c; background: linear-gradient(180deg, #f4f7fb, #c7d0db 55%, #8e99a8); box-shadow: inset 0 1px 0 #fff; }
.pd.p3 { min-height: 74px; color: #2a1406; background: linear-gradient(180deg, #ffd9b8, #e0955a 55%, #a45a26); box-shadow: inset 0 1px 0 #ffe9d6; }
.pd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: pd-shine 4.5s ease-in-out infinite;
}
.pd.p2::after { animation-delay: .6s; }
.pd.p3::after { animation-delay: 1.2s; }
@keyframes pd-shine { 0%, 60% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .pd::after { animation: none; } }
.tr-more { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tr-more span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 210, 90, .25);
}
.tr-more em { font-style: normal; color: #ffd23f; }
.tr-about { margin: 4px 0 6px; font-size: 12px; line-height: 1.35; color: #bcd3c6; }
.tr-h { margin: 10px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.tr-steps { gap: 5px; margin-bottom: 10px; }
.tr-step {
  grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 7px 9px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.tr-step > i { width: 22px; height: 22px; font-size: 12px; }
.tr-step span { gap: 4px; }
.tr-step b { font-size: 12.5px; line-height: 1.2; }
.tr-step small { font-size: 11px; font-weight: 800; white-space: nowrap; color: #cfe3d8; }
.tr-step.done small { color: #7dffa6; }
.tr-bar { height: 4px; }
.tr-go { width: 100%; }
.tr-mine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tr-mine div {
  display: grid; justify-items: center; padding: 7px 4px; border-radius: 12px; text-align: center; min-width: 0;
  background: rgba(255, 210, 90, .09); border: 1px solid rgba(255, 210, 90, .28);
}
.tr-mine b { font-size: 16px; color: #ffd23f; }
.tr-mine small { font-size: 10px; color: var(--muted); }
@media (min-width: 700px) {
  .tr-card { padding: 16px; }
  .pd.p1 { min-height: 124px; }
  .pd.p2 { min-height: 100px; }
  .pd.p3 { min-height: 86px; }
}

/* ================= турнир: очки турнира, закрытая запись, турнирный бой ================= */
.tr-how { display: grid; gap: 5px; margin-bottom: 4px; }
.tr-hw {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px 9px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.tr-hw > i {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px;
  font-weight: 900; color: #2a1600; background: linear-gradient(180deg, #fff1a8, #ffc933);
}
.tr-hw.done > i { color: #06240f; background: linear-gradient(180deg, #9dffb4, #2fd46a); }
.tr-hw > span { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.tr-hw b { font-size: 12.5px; line-height: 1.2; }
.tr-hw small { font-size: 11px; line-height: 1.3; color: var(--muted); }
.tr-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 5px 0 2px; font-style: normal; }
.tr-rules u {
  display: grid; justify-items: center; gap: 1px; padding: 5px 2px; border-radius: 10px; min-width: 0; text-decoration: none;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08);
}
.tr-rules b { font-size: 17px; font-weight: 900; line-height: 1.1; }
.tr-rules small { font-size: 10px; white-space: nowrap; }
.tr-rules .win { border-color: rgba(125, 255, 166, .35); }
.tr-rules .win b { color: #7dffa6; }
.tr-rules .draw { border-color: rgba(255, 210, 63, .35); }
.tr-rules .draw b { color: #ffd23f; }
.tr-rules .lose { border-color: rgba(255, 120, 110, .4); }
.tr-rules .lose b { color: #ff8a80; }
.tr-note { margin: 10px 0 2px; text-align: center; }
.tr-go { margin-top: 10px; }
.tr-go .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.tr-locked { filter: grayscale(.85) brightness(.75); box-shadow: none; }
.tr-fight { animation: tr-pulse 2.4s ease-in-out infinite; }
@keyframes tr-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 196, 40, 0); } 50% { box-shadow: 0 0 18px rgba(255, 196, 40, .55); } }
@media (prefers-reduced-motion: reduce) { .tr-fight { animation: none; } }
.tr-side { display: flex; align-items: center; gap: 6px; }
.tr-invite {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font: inherit; font-size: 11px;
  font-weight: 800; color: #2a1600; background: linear-gradient(180deg, #fff1a8, #ffc933); border: 0; cursor: pointer; white-space: nowrap;
}
.tr-invite .ico { width: 12px; height: 12px; fill: currentColor; }
.tr-step .tr-hint { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: normal; }
.tr-pts { display: grid; justify-items: end; margin-left: auto; padding-left: 6px; }
.tr-pts b { font-size: 16px; font-weight: 900; color: #ffd23f; line-height: 1.1; }
.tr-pts small { font-size: 9.5px; color: var(--muted); }
@media (max-width: 360px) {
  .tr-step { grid-template-columns: 22px minmax(0, 1fr); }
  .tr-side { grid-column: 2; justify-content: space-between; }
}

/* турнир: регистрация и обратный отсчёт */
.tr-reg { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0; padding: 10px 12px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(90, 170, 255, .2), rgba(60, 220, 160, .12));
  border: 1px solid rgba(120, 200, 255, .45); }
.tr-reg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-reg-t b { font-size: 14px; }
.tr-reg-t small, .tr-reg-c small { font-size: 11px; color: var(--muted); }
.tr-reg-c { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.tr-reg-c b { font-size: 18px; color: #8fe3ff; text-shadow: 0 0 10px rgba(120, 210, 255, .5); }
.tr-cd { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.tr-h .tr-shown { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--muted); }