/* Layout: one narrow phone column, "stadium at night" ground with a chalk-lined pitch as the play surface.
   Палитра взята из видео канала: фиолетовый стадион, зелёный газон, бирюзовый Данил и пурпурный Саша. */
/* Флаги-эмодзи на Windows показываются буквами («PT», «NL»). Шрифт Twemoji Country Flags рисует только флаги
   (unicode-range), остальной текст идёт обычными шрифтами. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('../fonts/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}

:root {
  --night: #1b1340;
  --night-2: #261b57;
  --night-3: #33266f;
  --pitch: #2e9a4c;
  --pitch-2: #35a957;
  --chalk: #eef8f0;
  --danil: #8fd8c4;
  --sasha: #c65bd8;
  --gold: #ffcf3a;
  --ink: #f4f1ff;
  --muted: #a99fd6;
  --hit: #34c46a;
  --near: #e8b62a;
  --miss: #463c78;
  --danger: #ff6b6b;
  --font-display: "Twemoji Country Flags", "Russo One", "Arial Black", Impact, sans-serif;
  --font-body: "Twemoji Country Flags", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(120% 60% at 50% -10%, #4a2f9e 0%, transparent 60%),
    var(--night);
  background-attachment: fixed;
  color: var(--ink);
  font: 15px/1.45 var(--font-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
a { color: var(--danil); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#app { max-width: 520px; margin: 0 auto; padding: 0 16px; padding-block: max(12px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px)); }
.screen { display: flex; flex-direction: column; gap: 14px; }

/* ---------- монеты и бейджи ---------- */
.coin {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c4 0 18%, var(--gold) 19% 62%, #c98f00 63%);
  box-shadow: inset 0 0 0 2px #b77f00;
}
.coins {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 999px; border: 0;
  background: var(--night-3); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.coins b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.coins.small { padding: 5px 10px 5px 6px; }
.coins.bump { animation: bump .45s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }

.tag {
  display: inline-block; padding: 5px 12px; border-radius: 8px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .06em;
  color: var(--night); box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.tag-danil { background: var(--danil); }
.tag-sasha { background: var(--sasha); color: #fff; }

/* ---------- хаб ---------- */
.hub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 8px; }
.kicker { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--muted); font-weight: 700; }
.brand-title {
  margin: 2px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 10vw, 46px); line-height: .95; text-transform: uppercase;
  text-shadow: 0 4px 0 #0e0828;
}
.versus { display: flex; align-items: center; gap: 10px; }
.vs { font-family: var(--font-display); color: var(--gold); font-size: 18px; }
.lead { margin: 0; color: var(--muted); max-width: 40ch; }

.daily {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 14px; border: 2px dashed var(--gold);
  background: rgba(255,207,58,.08); text-align: left;
}
.daily b { color: var(--gold); }

.games { display: grid; gap: 12px; }
.game-card {
  display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center;
  width: 100%; padding: 12px; border: 0; border-radius: 18px; text-align: left;
  background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 0 #120b30;
  transition: transform .12s ease;
}
.game-card:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 0 #120b30; }
.card-body { min-width: 0; }
.card-body h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.1; text-transform: uppercase; }
.card-body p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.card-meta { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .03em; }

.card-art { aspect-ratio: 1; border-radius: 12px; position: relative; overflow: hidden; max-width: 100%; }
.art-pass {
  background: repeating-linear-gradient(0deg, var(--pitch) 0 25%, var(--pitch-2) 25% 50%);
  box-shadow: inset 0 0 0 2px var(--chalk);
}
.art-pass i { position: absolute; width: 25%; height: 20%; left: calc(var(--x) * 25%); top: calc(var(--y) * 20% + 20%); }
.mini-def::after { content: ""; position: absolute; inset: 0 10%; background: url('../img/ui/dummy.webp') center / contain no-repeat; }
.mini-ball::after { content: ""; position: absolute; inset: 10%; background: url('../img/ui/ball.webp') center / contain no-repeat; }
.mini-dot::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: rgba(255,255,255,.7); }
.art-pass .mini-goal { left: 12.5%; top: 0; width: 50%; height: 22%; background: url('../img/ui/goal.webp') center bottom / contain no-repeat; }

.rank-card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; width: 100%;
  padding: 12px 14px; border: 0; border-radius: 16px; text-align: left;
  background: linear-gradient(120deg, rgba(143,216,196,.16), rgba(198,91,216,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.rank-card .rank-label { grid-row: 1; }
.rank-card .rank-name { grid-row: 1; justify-self: end; font-family: var(--font-display); font-weight: 400; font-size: 17px; text-transform: uppercase; }
.rank-card .xpbar { grid-column: 1 / -1; }
.rank-card small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.rank-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.xpbar { display: block; height: 8px; border-radius: 99px; background: var(--night-3); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--danil), var(--gold)); transition: width .6s ease; }
.muted { color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  padding: 12px; border: 0; border-radius: 16px; text-align: left; overflow: hidden;
  background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 5px 0 #120b30; transition: transform .25s cubic-bezier(.3,1.8,.5,1);
}
.tile-card:active { transform: translateY(3px) scale(.97); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 0 #120b30; }
.tile-card.wide { grid-column: 1 / -1; }
.tile-ico {
  display: grid; place-content: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 12px;
  background: linear-gradient(145deg, var(--c1, var(--danil)), var(--c2, var(--sasha)));
  font-family: var(--font-display); font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.tile-card b { font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1.1; text-transform: uppercase; }
.tile-card small { font-size: 12px; color: var(--gold); font-weight: 700; }
.tile-card.duo .tile-ico { background: linear-gradient(135deg, var(--danil) 0 50%, var(--sasha) 50% 100%); font-size: 16px; }

.section-label { margin: 6px 0 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.soon { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soon li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--night-3); color: var(--muted); font-size: 13px; }
.hub-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; font-size: 14px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); text-align: left; text-decoration: underline; }

/* ---------- верхняя панель ---------- */
.topbar { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; }
.back { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--night-3); font-size: 20px; }
.topbar-title { font-family: var(--font-display); text-transform: uppercase; font-size: 17px; line-height: 1.1; min-width: 0; }
.topbar-title small { display: block; font-family: var(--font-body); text-transform: none; font-size: 12px; color: var(--muted); font-weight: 500; }

/* ---------- уровни ---------- */
.tour { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--night-2); }
#tours { display: flex; flex-direction: column; gap: 12px; }
.tour h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 16px; }
.tour h3 small { font-family: var(--font-body); font-size: 12px; color: var(--gold); font-weight: 700; }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lvl {
  aspect-ratio: 1; max-width: 100%; border: 0; border-radius: 12px; display: grid; place-content: center; gap: 2px;
  background: var(--pitch); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 3px 0 #1c6a33;
  font-family: var(--font-display); font-size: 17px; font-variant-numeric: tabular-nums;
}
.lvl .st { font-size: 10px; letter-spacing: 1px; color: var(--gold); font-family: var(--font-body); }
.lvl.final { background: linear-gradient(160deg, var(--pitch) 0 55%, #1f7a3a 55%); box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 #1c6a33; }
.lvl.locked { background: var(--night-3); box-shadow: none; color: var(--muted); cursor: default; }
.lvl.current { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 3px var(--gold), 0 3px 0 #1c6a33; } }

/* ---------- игра «Пас в ворота» ---------- */
.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hud-cell { padding: 8px 10px; border-radius: 12px; background: var(--night-2); display: flex; flex-direction: column; }
.hud-cell span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hud-cell b { font-family: var(--font-display); font-weight: 400; font-size: 22px; font-variant-numeric: tabular-nums; }

.board-wrap { display: flex; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.board {
  position: relative; width: min(100%, calc((100dvh - 300px) * var(--w) / var(--h))); min-width: 230px; max-width: 100%;
  aspect-ratio: var(--w) / var(--h);
}
.board.shake { animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pitch-field {
  position: absolute; left: 0; right: 0; overflow: hidden; border: 3px solid var(--chalk); border-radius: 6px 6px 10px 10px;
  background: repeating-linear-gradient(180deg, var(--pitch) 0 calc(100% / var(--rows)), var(--pitch-2) calc(100% / var(--rows)) calc(200% / var(--rows)));
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.pitch-field::before { /* центральный круг у нижней кромки: своя половина поля */
  content: ""; position: absolute; left: 50%; bottom: -18%; width: 34%; aspect-ratio: 1; transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.35); border-radius: 50%;
}
.box { position: absolute; border: 2px solid rgba(255,255,255,.45); border-top: 0; border-radius: 0 0 6px 6px; pointer-events: none; }
.goal { position: absolute; z-index: 1; pointer-events: none; background: url('../img/ui/goal.webp') center bottom / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.goal.net-hit { animation: net 0.5s ease 2; }
@keyframes net { 50% { transform: scale(1.08) translateY(-3px); filter: none; } }
.piece { position: absolute; width: calc(100% / var(--w)); height: calc(100% / var(--h)); }
.def::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6%; height: 12%; border-radius: 50%; background: rgba(0,0,0,.28); }
.def::after { content: ""; position: absolute; inset: 0 4% 8%; background: url('../img/ui/dummy.webp') center bottom / contain no-repeat; filter: saturate(1.4) brightness(1.1) drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.mate::before { content: ""; position: absolute; inset: 6% 10% 2%; border-radius: 50%; border: 2px dashed rgba(70,190,255,.7); animation: matering 2.4s linear infinite; }
.mate::after { content: ""; position: absolute; inset: 0 4% 8%; background: url('../img/ui/dummy.webp') center bottom / contain no-repeat; filter: hue-rotate(200deg) saturate(1.6) brightness(1.15) ; transition: filter .3s, transform .3s; }
.mate.got::before { border: 2px solid var(--hit); animation: none; background: rgba(52,196,106,.18); }
.mate.got::after { filter: hue-rotate(200deg) saturate(.5) brightness(1.3) ; transform: scale(.92); }
@keyframes matering { to { transform: rotate(360deg); } }
.defl { display: grid; place-items: center; }
.defl::before { content: ""; position: absolute; inset: 14%; border-radius: 22%; background: rgba(20,10,50,.35); }
.defl i { position: relative; width: 118%; height: 14%; border-radius: 6px; background: linear-gradient(#fff, #cfd6ff); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 2px 3px rgba(0,0,0,.4); }
.defl.dl i { transform: rotate(-45deg) scaleX(.6); }
.defl.dr i { transform: rotate(45deg) scaleX(.6); }
.goal.locked { filter: grayscale(.8) brightness(.7) drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.goal.locked::after { content: "🔒"; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 18px; }
.mud::after { content: ""; position: absolute; inset: 12%; border-radius: 46% 54% 50% 50%; background: radial-gradient(circle at 40% 40%, #8a6a3e, #5b4022); opacity: .9; }
.marks { position: absolute; inset: 0; z-index: 2; }
.trail { position: absolute; width: calc(100% / var(--w)); height: calc(100% / var(--h)); pointer-events: none; }
.trail::after { content: ""; position: absolute; left: 44%; top: 44%; width: 12%; height: 12%; border-radius: 50%; background: rgba(255,255,255,.55); }
.mark {
  position: absolute; width: calc(100% / var(--w)); height: calc(100% / var(--h)); border: 0; padding: 0; background: none; cursor: pointer;
}
.mark::after {
  content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255,207,58,.3);
  animation: markpulse 1.4s ease-in-out infinite;
}
.mark.scores::after { inset: 22%; background: #fff; box-shadow: 0 0 0 5px rgba(52,196,106,.6); }
.mark.hinted::after { background: var(--hit); box-shadow: 0 0 0 6px rgba(52,196,106,.5); animation-duration: .6s; }
@keyframes markpulse { 50% { transform: scale(1.18); } }
.ball { z-index: 3; left: 0; top: 0; transition-property: transform; transition-timing-function: cubic-bezier(.3,.7,.4,1); pointer-events: none; }
.ball::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: url('../img/ui/ball.webp') center / contain no-repeat; filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.ball.rolling::after { animation: spin .35s linear infinite; }
.ball.scored::after { animation: scored .6s ease forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scored { 50% { transform: scale(1.3); } 100% { transform: scale(.7); } }
.hint-line { margin: 0; text-align: center; font-size: 13px; color: var(--muted); min-height: 1.4em; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.actions.three { display: grid; grid-template-columns: repeat(3, 1fr); }
.actions.three .btn { padding: 11px 6px; font-size: 14px; }
.actions.tight { justify-content: space-between; align-items: center; }
.btn {
  border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 700;
  background: var(--danil); color: var(--night); box-shadow: 0 4px 0 #4f8f7f;
}
.btn { transition: transform .22s cubic-bezier(.3,1.8,.5,1), box-shadow .12s; }
.btn:active { transition-duration: .06s; transform: translateY(2px) scale(.96); box-shadow: 0 2px 0 #4f8f7f; }
.btn.ghost { background: var(--night-3); color: var(--ink); box-shadow: 0 4px 0 #120b30; }
.btn.gold { background: var(--gold); color: var(--night); box-shadow: 0 4px 0 #a07c00; }
.btn.sasha { background: var(--sasha); color: #fff; box-shadow: 0 4px 0 #7b2b8a; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- угадай футболиста ---------- */
.scoreboard { display: flex; justify-content: center; gap: 10px; }
.scoreboard .tag { font-size: 15px; padding: 7px 14px; opacity: .55; transition: opacity .2s, transform .2s; }
.scoreboard .tag.active { opacity: 1; transform: scale(1.06); }
.turn { margin: -4px 0 0; text-align: center; font-weight: 700; }

.mystery { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--night-2); }
.mystery-face {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center;
  background: linear-gradient(135deg, var(--danil), var(--sasha));
  font-family: var(--font-display); font-size: 30px; color: var(--night);
}
.mystery-info { min-width: 0; }
.mystery-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 9px; border-radius: 999px; background: var(--hit); color: #06210f; font-size: 12px; font-weight: 700; }
.chip.dim { background: transparent; color: var(--muted); padding: 0; font-weight: 500; }

.guess-input { position: relative; }
.guess-input input {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--night-3);
  background: #fff; color: #1b1340; font: 600 16px var(--font-body);
}
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: #fff; color: #1b1340; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.suggest button {
  display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 16px; border: 0;
  background: none; text-align: left; color: inherit; border-bottom: 1px solid #ece8f7;
}
.suggest button:last-child { border-bottom: 0; }
.suggest button.sel, .suggest button:hover { background: #efe9ff; }
.suggest small { color: #6b628f; }
.attempts { font-size: 13px; color: var(--muted); }

.grid-head, .row-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.grid-head span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; }
#guess-rows { display: flex; flex-direction: column; gap: 10px; }
.g-row { display: flex; flex-direction: column; gap: 4px; }
.g-row .who { font-weight: 800; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.g-row .who .by { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; color: var(--night); }
.tile {
  min-height: 46px; padding: 4px 2px; border-radius: 9px; display: grid; place-content: center; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1.15; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.tile.flag { font-size: 22px; }
.tile.club { font-size: 10px; }
.tile.hit { background: var(--hit); color: #06210f; }
.tile.near { background: var(--near); color: #2a1d00; }
.tile.miss { background: var(--miss); color: var(--ink); }
.g-row.new .tile { animation: flip .45s ease both; }
.g-row.new .tile:nth-child(2) { animation-delay: .07s; } .g-row.new .tile:nth-child(3) { animation-delay: .14s; }
.g-row.new .tile:nth-child(4) { animation-delay: .21s; } .g-row.new .tile:nth-child(5) { animation-delay: .28s; }
.g-row.new .tile:nth-child(6) { animation-delay: .35s; }
@keyframes flip { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
/* ---------- угадай карьеру ---------- */
.career-lead { margin: 0; color: var(--muted); }
#career-path { display: flex; flex-direction: column; gap: 8px; }
.step {
  display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--night-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.step .yr { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.step .club { font-family: var(--font-display); font-weight: 400; font-size: 18px; text-transform: uppercase; line-height: 1.05; }
.step.hidden-step .club { color: var(--miss); letter-spacing: 3px; }
.step.open { animation: flip .4s ease both; }
.step.open .club { color: var(--ink); }
.step.last { box-shadow: inset 0 0 0 2px var(--gold); }
.legend { margin: 0; font-size: 12px; color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin: 0 3px 0 8px; }
.dot:first-child { margin-left: 0; }
.dot.hit { background: var(--hit); } .dot.near { background: var(--near); } .dot.miss { background: var(--miss); }

/* ---------- модалка ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8,4,24,.72); }
.modal-card {
  width: min(100%, 420px); max-height: 90dvh; overflow: auto; padding: 22px 20px; border-radius: 22px;
  background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 12px; text-align: center; animation: pop .3s ease;
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.modal-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 32px; text-transform: uppercase; line-height: 1; }
.modal-card p { margin: 0; color: var(--muted); }
.modal-card .btns { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.stars { font-size: 38px; letter-spacing: 6px; color: var(--gold); }
.stars .off { color: var(--night-3); }
.reward { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 6px 14px; border-radius: 999px; background: rgba(255,207,58,.12); color: var(--gold); font-weight: 800; }
.quote { padding: 10px 12px; border-radius: 12px; background: var(--night-3); text-align: left; font-size: 14px; }
.quote b { font-family: var(--font-display); font-weight: 400; margin-right: 4px; }
.quote.danil b { color: var(--danil); } .quote.sasha b { color: var(--sasha); }
.player-card { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, var(--night-3), var(--night)); }
.player-card .pname { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; }
.player-card .pmeta { font-size: 13px; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 12px; color: var(--muted); }
.field input { padding: 12px 14px; border-radius: 12px; border: 0; font: 600 16px var(--font-body); background: #fff; color: #1b1340; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--night); font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.4); animation: pop .2s ease;
}

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }


/* ---------- угадай клуб ---------- */
.clues { display: flex; flex-direction: column; gap: 8px; }
.clue { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--night-2); }
.clue span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.clue b { font-weight: 700; color: var(--miss); letter-spacing: 2px; }
.clue.open b { color: var(--ink); letter-spacing: 0; }
.clue.open { animation: flip .4s ease both; }
.step .club em { margin-left: 8px; font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); vertical-align: middle; }

/* ---------- трансферы ---------- */
.lives { margin: 0; text-align: center; color: var(--danger); font-size: 22px; letter-spacing: 4px; min-height: 1.2em; }
.stage { display: flex; flex-direction: column; gap: 10px; }
.tcard { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, var(--night-3), var(--night-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.tcard.known { opacity: .85; }
.tcard.ok { box-shadow: inset 0 0 0 3px var(--hit); }
.tcard.bad { box-shadow: inset 0 0 0 3px var(--danger); }
.tplayer { font-family: var(--font-display); font-size: 21px; text-transform: uppercase; line-height: 1.1; }
.troute { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.troute span { padding: 5px 10px; border-radius: 8px; background: var(--night); }
.troute span.q { background: var(--gold); color: var(--night); min-width: 44px; text-align: center; }
.troute i { font-style: normal; color: var(--gold); }
.tmeta { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-variant-numeric: tabular-nums; }
.tfee { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--gold); }
.vs-mid { text-align: center; font-family: var(--font-display); color: var(--muted); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opts .btn { min-height: 52px; }
.opt.right { background: var(--hit); color: #06210f; }
.opt.wrong { background: var(--danger); color: #fff; }

/* ---------- тики-така-тоу ---------- */
.ttt-grid { display: grid; grid-template-columns: 0.8fr repeat(3, 1fr); gap: 6px; }
.tg-corner { aspect-ratio: 1; max-width: 100%; }
.tg-head {
  display: grid; place-content: center; padding: 6px 4px; border-radius: 10px; min-height: 52px; text-align: center;
  background: var(--night-3); font-family: var(--font-display); font-size: 11px; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere;
}
.tg-cell {
  aspect-ratio: 1; max-width: 100%; display: grid; place-content: center; gap: 2px; padding: 4px; border: 0; border-radius: 12px; text-align: center;
  background: var(--pitch); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 3px 0 #1c6a33; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.1;
}
.tg-cell.sel { box-shadow: inset 0 0 0 3px var(--gold), 0 3px 0 #1c6a33; }
.tg-cell.filled { background: var(--night-2); box-shadow: inset 0 0 0 2px var(--hit); }
.tg-cell.filled.p0 b { color: var(--danil); } .tg-cell.filled.p1 b { color: var(--sasha); }
.tg-cell b { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.tg-cell .ans { color: var(--muted); font-weight: 500; }
.tg-cell:disabled { cursor: default; }
.tg-cell:not(.filled):not(:disabled)::after { content: "+"; font-family: var(--font-display); font-size: 22px; color: rgba(255,255,255,.55); }

/* ---------- профиль ---------- */
.prof-hero { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: var(--night-2); }
.prof-hero > div:last-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.prof-badge {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-content: center;
  background: conic-gradient(var(--danil), var(--gold), var(--sasha), var(--danil)); font-family: var(--font-display); font-size: 32px; color: var(--night);
}
.prof-rank { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; line-height: 1; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--night-2); }
.stat b { font-family: var(--font-display); font-weight: 400; font-size: 22px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.achs { display: grid; gap: 8px; }
.ach { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--night-2); opacity: .55; }
.ach.ok { opacity: 1; box-shadow: inset 0 0 0 1px rgba(255,207,58,.5); }
.ach i { font-style: normal; font-size: 22px; color: var(--gold); text-align: center; }
.ach b { display: block; } .ach small { color: var(--muted); }
.settings { display: grid; gap: 8px; }
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 14px; border: 0; border-radius: 12px; background: var(--night-2); text-align: left; }
.set-row b { color: var(--gold); }

/* ---------- нижнее меню ---------- */
#app { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; gap: 2px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(20,13,50,.92); backdrop-filter: blur(10px);
  box-shadow: 0 -1px 0 rgba(255,255,255,.08);
}
.tab { position: relative; flex: 1; min-width: 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; transition: color .2s, background .25s; }
.tab span { transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.tab.on span { transform: translateY(-2px) scale(1.15); }
.tab span { font-size: 20px; line-height: 1; }
.tab.on { color: var(--ink); background: var(--night-3); }


/* ---------- картинки: эмблемы и фото ---------- */
.crest { display: inline-block; object-fit: contain; vertical-align: middle; flex: none; }
.crest-xs { width: 16px; height: 20px; margin-right: 5px; }
.crest-s { width: 22px; height: 28px; margin-right: 8px; }
.crest-m { width: 34px; height: 42px; }
.crest-xl { width: 72px; height: 90px; margin: 0 auto 6px; display: block; }
.crest.blur { filter: blur(5px) grayscale(.4); }
.crest-none { display: inline-grid; place-content: center; border-radius: 50%; background: var(--night); color: var(--muted); font: 800 9px var(--font-body); }
.crest-xs.crest-none { width: 18px; height: 18px; font-size: 7px; }
.crest-m.crest-none, .crest-xl.crest-none { font-size: 13px; }
.ava {
  position: relative; display: inline-grid; place-content: center; flex: none; overflow: hidden; border-radius: 50%;
  background: linear-gradient(145deg, var(--night-3), var(--night)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
}
.ava b { font-family: var(--font-display); font-weight: 400; color: var(--ink); }
.ava-m { width: 40px; height: 40px; } .ava-m b { font-size: 15px; }
.ava-l { width: 64px; height: 64px; } .ava-l b { font-size: 22px; }
.ava-xl { width: 96px; height: 96px; margin: 0 auto 6px; } .ava-xl b { font-size: 32px; }
.tplayer { display: flex; align-items: center; gap: 10px; }
.troute span { display: inline-flex; align-items: center; }
.tile .crest-xs { display: block; margin: 0 auto 2px; }
.step .club { display: flex; align-items: center; flex-wrap: wrap; }
.clue b { display: flex; align-items: center; }
.tg-head { gap: 4px; justify-items: center; }
.tg-head .crest-m { width: 28px; height: 34px; }
.player-card { justify-items: center; }
.pcard { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 18px;
  background: linear-gradient(160deg, var(--night-3), var(--night-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.pcard.known { opacity: .9; } .pcard.ok { box-shadow: inset 0 0 0 3px var(--hit); } .pcard.bad { box-shadow: inset 0 0 0 3px var(--danger); }
.pcard-body { min-width: 0; }
.pname-s { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; line-height: 1.1; }
.pclub { display: flex; align-items: center; margin-top: 4px; font-size: 13px; color: var(--muted); }
.pval { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pval b { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--gold); line-height: 1; }
.pval.ovr b { display: grid; place-content: center; width: 52px; height: 58px; border-radius: 10px 10px 50% 50% / 10px 10px 30% 30%;
  background: linear-gradient(160deg, #f3d77b, #b8892a); color: #2a1d00; font-size: 26px; }
.pval small { font-size: 10px; color: var(--muted); margin-top: 4px; }
.field input { width: 100%; min-width: 0; }
.modal-card { overflow-x: hidden; }

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

/* ---------- лица и анимации ---------- */
.ava { background: radial-gradient(circle at 50% 30%, #4a3d93, var(--night) 75%); }
.ava b { transition: opacity .3s ease; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  opacity: 0; transform: scale(1.15); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.ava.loaded img { opacity: 1; transform: none; }
.ava.loaded b { opacity: 0; }
.ava.instant img, .ava.instant b { transition: none; }
.ava.loaded { background: radial-gradient(circle at 50% 35%, #8fd8c4 0%, #5a49b8 55%, var(--night) 100%); }

.enter { animation: cardIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.stage { transition: none; }
.stage.shifting .known { animation: cardOut .38s cubic-bezier(.5,0,.75,0) forwards; }
.stage.shifting .vs-mid { opacity: 0; transition: opacity .2s; }
.stage.shifting .known ~ .pcard, .stage.shifting .known ~ .tcard { transition: transform .38s cubic-bezier(.3,.7,.2,1); transform: translateY(calc(-100% - 46px)); }
.stage.shifting > :only-child { animation: cardSide .38s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes cardOut { to { opacity: 0; transform: translateY(-30px) scale(.94); } }
@keyframes cardSide { to { opacity: 0; transform: translateX(-40px); } }

.pcard.ok, .tcard.ok { animation: glowOk .7s ease; box-shadow: inset 0 0 0 3px var(--hit); }
.pcard.bad, .tcard.bad { animation: shakeBad .45s ease; box-shadow: inset 0 0 0 3px var(--danger); }
@keyframes glowOk { 30% { transform: scale(1.03); } }
@keyframes shakeBad { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.tfee, .troute span { display: inline-flex; }
.pop { animation: numPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes numPop { 40% { transform: scale(1.3); } }
.pval b, .tfee, .coin-count { font-variant-numeric: tabular-nums; display: inline-block; }
.reward { animation: numPop .6s cubic-bezier(.3,1.6,.5,1) .15s both; }
.stars span, .stars { display: inline-block; }
.modal-card .player-card { animation: cardIn .5s cubic-bezier(.2,.8,.2,1) .1s both; }

/* ---------- аукцион ---------- */
.auction-hero {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 14px; border: 0; border-radius: 18px; text-align: left; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #5b3fc4 0%, var(--night-2) 60%), var(--night-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 0 #120b30;
}
.auction-hero b { font-family: var(--font-display); font-weight: 400; font-size: 28px; text-transform: uppercase; line-height: 1; }
.auction-hero small { color: var(--muted); font-size: 13px; }
.ah-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ah-top .tag { font-size: 11px; }
.ah-coin { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; font-family: var(--font-display); color: #2a1d00;
  background: radial-gradient(circle at 35% 30%, #fff6c4 0 18%, var(--gold) 19% 62%, #c98f00 63%); box-shadow: inset 0 0 0 3px #b77f00; }
.ah-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ah-modes .btn { text-align: center; }

.auction-stage { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px;
  background: radial-gradient(120% 70% at 50% 0%, #5b3fc4 0%, transparent 70%), linear-gradient(180deg, var(--night-2) 55%, #1f6b3a 100%); }
.auction-lot { min-height: 168px; display: grid; place-items: center; }
.alot { display: grid; justify-items: center; gap: 4px; text-align: center; }
.alot .ava-xl { width: 110px; height: 110px; box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.2); }
.alot-name { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; line-height: 1.1; }
.alot-club { display: flex; align-items: center; font-size: 13px; color: var(--muted); }
.alot.to-left { animation: toLeft .6s cubic-bezier(.5,0,.75,0) forwards; }
.alot.to-right { animation: toRight .6s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes toLeft { to { opacity: 0; transform: translate(-40%, 90px) scale(.4); } }
@keyframes toRight { to { opacity: 0; transform: translate(40%, 90px) scale(.4); } }
.auction-price { display: flex; justify-content: center; align-items: baseline; gap: 8px; min-height: 40px; }
.abid { font-family: var(--font-display); font-weight: 400; font-size: 34px; color: var(--gold); line-height: 1; display: inline-block; text-shadow: 0 3px 0 #000; }
.auction-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ateam { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 2px; padding: 10px 6px; border-radius: 14px; }
.ateam.danil { background: var(--danil); } .ateam.sasha { background: var(--sasha); }
.aslot { grid-column: span 2; position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 50%; border: 2px dashed rgba(27,19,64,.35); margin: 0 3px; }
.aslot:nth-child(4) { grid-column: 2 / span 2; }
.aslot:nth-child(5) { grid-column: 4 / span 2; }
.aslot.filled { border: 0; }
.aslot .ava { width: 100%; height: 100%; }
.aslot.fresh { animation: numPop .6s cubic-bezier(.3,1.6,.5,1); }
.aprice { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 22px; padding: 1px 5px; border-radius: 99px;
  background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 11px; text-align: center; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.auction-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.auction-tags .tag { font-size: 15px; padding: 7px 6px; opacity: .6; transition: opacity .2s, transform .2s; }
.auction-tags .tag.active { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 3px var(--gold), 0 3px 0 rgba(0,0,0,.35); }
.auction-ctrl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.auction-ctrl .btn { font-family: var(--font-display); font-weight: 400; font-size: 18px; padding: 12px 4px; }
.ares-wrap { display: grid; gap: 8px; }
.ares { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; text-align: left; color: var(--night); }
.ares.danil { background: var(--danil); } .ares.sasha { background: var(--sasha); color: #fff; }
.ares.win { box-shadow: 0 0 0 3px var(--gold); }
.ares span { font-family: var(--font-display); text-transform: uppercase; }
.ares b { font-family: var(--font-display); font-weight: 400; font-size: 30px; grid-row: span 2; display: inline-block; }
.ares small { font-size: 12px; opacity: .8; }

/* ---------- бонус за вход ---------- */
.daily { flex-direction: column; align-items: stretch; }
.daily-top { display: flex; align-items: center; gap: 10px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.days i { display: grid; place-items: center; padding: 4px 0; border-radius: 8px; background: var(--night-3); font-style: normal; font-weight: 800; font-size: 12px; color: var(--muted); }
.days i small { font-size: 9px; font-weight: 500; }
.days i.got { background: rgba(52,196,106,.25); color: var(--hit); }
.days i.now { background: var(--gold); color: var(--night); animation: numPop 1.2s ease infinite; }

/* ---------- полка головоломок ---------- */
.pz-hud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 32px; }
.pz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--night-2); font-size: 13px; color: var(--muted); }
.pz-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pz-area { display: flex; flex-direction: column; align-items: center; gap: 12px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.pz-tile .tile-ico { font-size: 18px; }

/* ---------- иконки игр ---------- */
.tile-ico { position: relative; width: 56px; height: 56px; border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.3); }
.tile-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.28) 0 30%, transparent 55%); }
.tile-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--font-body); }
.ic-face, .ic-crest { position: absolute; object-fit: contain; }
.ic-face { width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center 20%; }
.ic-face.dim { filter: brightness(0) opacity(.45); transform: scale(1.1) translateY(6%); }
.tile-ico .ic-q { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 12px rgba(0,0,0,.35); }
.ic-crest.blur { inset: 8%; width: 84%; height: 84%; filter: blur(3px) saturate(1.3); }
.ic-slide { position: absolute; inset: 6px; border-radius: 8px; overflow: hidden; background: #fff; }
.ic-slide .ic-crest { inset: 0; width: 100%; height: 100%; }
.ic-slide i { position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(33.3% - 1px), rgba(30,20,70,.9) 0 calc(33.3% + 1px), transparent 0 calc(66.6% - 1px), rgba(30,20,70,.9) 0 calc(66.6% + 1px), transparent 0),
              linear-gradient(transparent calc(33.3% - 1px), rgba(30,20,70,.9) 0 calc(33.3% + 1px), transparent 0 calc(66.6% - 1px), rgba(30,20,70,.9) 0 calc(66.6% + 1px), transparent 0); }
.ic-slide i::after { content: ""; position: absolute; right: 0; bottom: 0; width: 33.3%; height: 33.3%; background: #2c4bb0; box-shadow: inset 2px 2px 4px rgba(0,0,0,.4); }
.ic-card { position: absolute; width: 27px; height: 36px; top: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.35); overflow: hidden; }
.ic-card.back { left: 7px; transform: rotate(-12deg); border: 2px solid #fff; background: repeating-linear-gradient(45deg, #2a1f5c 0 4px, #3a2b7a 4px 8px); }
.ic-card.front { right: 7px; transform: rotate(10deg); border: 2px solid #fff; background: #3a8f7c; }
.ic-card .ic-face { object-position: center 15%; }
.ic-2048 { position: absolute; inset: 7px; display: grid; place-content: center; border-radius: 10px; text-align: center;
  background: radial-gradient(circle at 40% 30%, #fff6c4, #ffcf3a 55%, #c98f00); box-shadow: 0 0 0 1.5px rgba(255,207,58,.7); }
.tile-ico .ic-2048 b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: #3a2600; line-height: 1; text-shadow: none; }
.ic-2048 small { font-size: 9px; color: #7a5200; }
.ic-path .ic-crest { width: 23px; height: 29px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.ic-path .c1 { left: 2px; bottom: 2px; } .ic-path .c2 { left: 16px; top: 13px; } .ic-path .c3 { right: 2px; top: 1px; }
.ic-crest.from { width: 24px; height: 31px; left: 3px; top: 12px; transform: rotate(-8deg); }
.ic-crest.to { width: 24px; height: 31px; right: 3px; top: 12px; transform: rotate(8deg); }
.tile-ico svg + .ic-crest, .ic-crest.mid { width: 15px; height: 19px; left: 21px; top: 19px; }
.ic-fut { position: absolute; left: 11px; top: 4px; width: 34px; height: 48px; border-radius: 6px 6px 14px 14px; overflow: hidden;
  background: linear-gradient(160deg, #fff3b0, #e9b928 60%, #b8860b); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.ic-fut .ic-face { inset: auto 0 0 4px; width: 34px; height: 34px; }
.tile-ico .ic-fut b { position: absolute; z-index: 1; left: 3px; top: 2px; font-family: var(--font-display); font-weight: 400; font-size: 13px; color: #3a2600; line-height: 1; }
.ic-fut small { position: absolute; z-index: 1; left: 4px; top: 15px; font-size: 6px; font-weight: 900; color: #3a2600; }
.ic-face.big { object-position: center 10%; transform: scale(1.15) translateY(8%); }
.ic-coin { position: absolute; right: 3px; bottom: 3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #3a2600;
  background: radial-gradient(circle at 35% 30%, #fff6c4 0 18%, var(--gold) 19% 62%, #c98f00 63%); box-shadow: inset 0 0 0 2px #b77f00, 0 2px 3px rgba(0,0,0,.4); }
.ic-face.l, .ic-face.r, .ic-crest.l, .ic-crest.r { width: 30px; height: 30px; top: auto; }
.ic-face.l { left: -2px; top: 0; } .ic-face.r { right: -2px; left: auto; bottom: 0; top: auto; }
.ic-crest.l { left: 3px; top: 4px; width: 24px; height: 31px; } .ic-crest.r { right: 3px; bottom: 4px; width: 24px; height: 31px; }
.tile-ico .ic-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-10deg); font-family: var(--font-display); font-weight: 400; font-size: 17px;
  color: #ffcf3a; text-shadow: 0 2px 0 #1b1240, 0 0 6px rgba(0,0,0,.6); }


/* сортировка */
.tubes { display: grid; grid-template-columns: repeat(min(var(--n), 6), 1fr); gap: 14px 10px; width: 100%; max-width: 420px; justify-items: center; padding-top: 30px; }
.tube { position: relative; width: 52px; height: 200px; padding: 6px 0; border: 0; border-radius: 6px 6px 28px 28px; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18) 30%, rgba(255,255,255,.05) 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); transition: transform .15s; }
.tube.sel { transform: translateY(-8px); box-shadow: inset 0 0 0 2px var(--gold); }
.tube.full { box-shadow: inset 0 0 0 2px var(--hit); }
.sball { width: 40px; height: 40px; border-radius: 50%; flex: none; transition: transform .2s cubic-bezier(.3,1.4,.5,1);
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.28) 0 12%, transparent 13%), radial-gradient(circle at 18% 32%, rgba(0,0,0,.2) 0 8%, transparent 9%),
    radial-gradient(circle at 82% 32%, rgba(0,0,0,.2) 0 8%, transparent 9%), radial-gradient(circle at 35% 30%, rgba(255,255,255,.65), transparent 40%), var(--c);
  box-shadow: inset -3px -4px 0 rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.3); }
.sball.up { transform: translateY(-58px); transition: transform .28s cubic-bezier(.2,1.3,.4,1); }
.tube { transition: transform .25s cubic-bezier(.2,1.3,.4,1), box-shadow .2s; }
.sball.drop { animation: drop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes drop { from { transform: translateY(-60px); } }

/* пятнашки */
.slide { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; width: min(100%, 300px); aspect-ratio: 139 / 181; padding: 3px; border-radius: 14px; background: var(--night-3); }
.sl-tile { position: relative; border: 0; border-radius: 6px; padding: 0; background-color: #f4f1ff; background-repeat: no-repeat;
  background-size: calc(var(--n) * 100%) calc(var(--n) * 100%); box-shadow: 0 2px 0 rgba(0,0,0,.3); transition: transform .12s; }
.slide { touch-action: none; }
.sl-tile { cursor: grab; will-change: transform; }
.sl-tile.held { z-index: 2; box-shadow: 0 6px 12px rgba(0,0,0,.4); filter: brightness(1.06); }
.sl-tile.nope { animation: shake .25s; }
.sl-tile small { position: absolute; left: 3px; top: 2px; font-size: 9px; font-weight: 800; color: var(--night); background: rgba(255,255,255,.75); border-radius: 4px; padding: 0 3px; }
.sl-tile.blank { background: transparent; box-shadow: none; }

/* память */
.mem { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; width: 100%; max-width: 440px; }
.mem-card { position: relative; display: block; width: 100%; border: 0; padding: 0; background: none; -webkit-tap-highlight-color: transparent; }
.mem-card::before { content: ""; display: block; padding-top: 133%; } /* высота 3:4 без aspect-ratio — для старых iPhone */
/* Лица меняются прозрачностью на середине поворота: так переворот работает даже там, где backface-visibility не срабатывает */
.mem-back, .mem-face { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .4s ease, opacity 0s linear .2s; }
.mem-back { background: repeating-linear-gradient(45deg, var(--night-3) 0 8px, var(--night-2) 8px 16px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); color: var(--gold); font-size: 22px;
  transform: perspective(600px) rotateY(0); }
.mem-face { background: linear-gradient(160deg, var(--night-3), var(--night-2)); transform: perspective(600px) rotateY(180deg); opacity: 0; align-content: center; gap: 4px; padding: 4px; }
.mem-face small { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.1; }
.mem-face .ava-l { width: 70%; height: auto; aspect-ratio: 1; }
@supports not (aspect-ratio: 1) { .mem-face .ava-l { width: 44px; height: 44px; } }
.mem-card.open .mem-back, .mem-card.done .mem-back { transform: perspective(600px) rotateY(180deg); opacity: 0; }
.mem-card.open .mem-face, .mem-card.done .mem-face { transform: perspective(600px) rotateY(0); opacity: 1; }
.mem-card.done .mem-face { box-shadow: inset 0 0 0 2px var(--hit); animation: numPop .5s ease; }

/* розыгрыш */
.pipes { display: grid; grid-template-columns: repeat(var(--w), 1fr); gap: 3px; padding: 3px; width: min(100%, calc(var(--w) * 62px)); border-radius: 14px;
  background: #1f7a3a; box-shadow: 0 0 0 3px var(--chalk), 0 12px 26px rgba(0,0,0,.35); }
.pipe { position: relative; aspect-ratio: 1; max-width: 100%; border: 0; padding: 0; border-radius: 8px; cursor: pointer; overflow: visible;
  background: radial-gradient(circle at 50% 40%, #46b85a, #34a04a); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.pipe:active { transform: scale(.93); }
.pipe-in { position: absolute; inset: 0; transform: rotate(var(--r, 0deg)); transition: transform .26s cubic-bezier(.3,1.5,.5,1); }
.pipe-in svg { width: 100%; height: 100%; overflow: visible; }
.pipe-in path { stroke: rgba(255,255,255,.62); stroke-width: 15; stroke-linecap: round; fill: none; transition: stroke .2s; }
.pipe-in circle { fill: rgba(255,255,255,.75); transition: fill .2s; }
.pipe.on .pipe-in path { stroke: var(--gold); }
.pipe.on .pipe-in circle { fill: #fff3b0; }
.pipe.on .pipe-in svg { filter: none; }
.pball { position: absolute; inset: 14%; width: 72%; height: 72%; pointer-events: none; border-radius: 50%; clip-path: circle(47%); object-fit: cover; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.pman { position: absolute; inset: 22%; border-radius: 50% 50% 40% 40%; pointer-events: none; border: 3px solid #fff;
  background: linear-gradient(90deg, var(--sasha) 50%, #9b3cc0 50%); box-shadow: 0 3px 4px rgba(0,0,0,.35); transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.pipe.on .pman { background: linear-gradient(90deg, var(--danil) 50%, #5fb8a4 50%); transform: scale(1.12); box-shadow: 0 0 0 1.5px rgba(143,216,196,.9), 0 3px 4px rgba(0,0,0,.35); }
.pipe.pass .pipe-in svg { animation: passGlow .5s ease both; animation-delay: var(--d, 0ms); }
.pipe.pass .pman { animation: passJump .5s cubic-bezier(.3,1.8,.5,1) both; animation-delay: var(--d, 0ms); }
@keyframes passGlow { 50% { filter:  brightness(1.4); } }
@keyframes passJump { 50% { transform: scale(1.35) translateY(-4px); } }
.pball { inset: 22%; background: radial-gradient(circle at 35% 30%, #fff, #ddd); box-shadow: 0 2px 4px rgba(0,0,0,.4); }

/* перекрась поле */
.flood { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 360px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px var(--chalk); }
.fl { background: var(--c); transition: background-color .25s ease; }
.fl.own { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.fl-pal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fl-btn { width: 50px; height: 50px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); background: var(--c); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.fl-btn.cur { opacity: .35; transform: scale(.9); }
.fl-btn:active { transform: translateY(2px); }

/* филворд */
.ws-theme { display: flex; align-items: center; gap: 4px; font-family: var(--font-display); text-transform: uppercase; }
.ws { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 380px); aspect-ratio: 1; gap: 2px; padding: 4px; border-radius: 12px; background: var(--night-2); touch-action: none; }
.ws-c { display: grid; place-content: center; border-radius: 6px; font-weight: 800; font-size: clamp(13px, 4vw, 18px); background: var(--night-3); transition: background .15s, transform .15s; }
.ws-c.sel { background: var(--gold); color: var(--night); transform: scale(1.08); }
.ws-c.found { background: var(--fc, var(--hit)); color: var(--night); }
.ws-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ws-w { padding: 4px 10px; border-radius: 999px; background: var(--night-2); font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.ws-w.done { background: var(--hit); color: #06210f; text-decoration: line-through; }

/* 2048 */
.g48 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 360px); aspect-ratio: 1; padding: 8px; border-radius: 14px; background: var(--night-2); touch-action: none; }
.g48-cell { border-radius: 10px; background: var(--night-3); }
.g48-layer { position: absolute; inset: 8px; pointer-events: none; }
.g48-t { position: absolute; left: 0; top: 0; width: calc((100% - 24px) / 4); height: calc((100% - 24px) / 4); display: grid; place-content: center; text-align: center;
  border-radius: 10px; line-height: 1; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
  transform: translate(calc(var(--x) * (100% + 8px)), calc(var(--y) * (100% + 8px))); transition: transform .13s cubic-bezier(.3,.7,.4,1); }
.g48-t b { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.g48-t small { font-size: 10px; font-weight: 700; margin-top: 3px; }
.g48-t.new { animation: g48new .22s cubic-bezier(.3,1.6,.5,1) both; }
.g48-t.merge { animation: g48merge .22s cubic-bezier(.3,1.6,.5,1); z-index: 2; }
@keyframes g48new { from { opacity: 0; scale: .2; } }
@keyframes g48merge { 50% { scale: 1.18; } }
.v2 { background: #3d6b4c; } .v4 { background: #2f9e4c; } .v8 { background: #5fd3f3; color: var(--night); } .v16 { background: #2f6fe4; }
.v32 { background: #8e44d6; } .v64 { background: #c65bd8; } .v128 { background: #ff6fb5; color: var(--night); } .v256 { background: #ff8a2a; color: var(--night); }
.v512 { background: #e2384d; } .v1024 { background: #ffcf3a; color: var(--night); } .v2048, .v4096 { background: radial-gradient(circle, #fff6c4, var(--gold) 60%, #b98d00); color: var(--night); box-shadow: 0 0 0 1.5px rgba(255,207,58,.7); }
.v1024 b, .v2048 b, .v4096 b { font-size: 18px; }

/* поп-ит */
.pop-name { margin: 0; font-family: var(--font-display); text-transform: uppercase; color: var(--muted); }
.pop-name { display: flex; align-items: center; gap: 8px; }
.pop-tip { margin: 0; font-size: 13px; color: var(--muted); }
.popit { display: grid; grid-template-columns: repeat(var(--cols), 1fr); width: min(100%, calc(var(--cols) * 38px), 380px); touch-action: none;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.28)) drop-shadow(0 14px 18px rgba(0,0,0,.35)); transform-style: preserve-3d; }
.popit.enter { animation: popin .45s cubic-bezier(.3,1.5,.5,1); }
.popit.flip-out { transition: transform .25s ease-in; transform: perspective(700px) rotateY(90deg) scale(.95); }
.popit.flip-in { animation: flipin .3s ease-out; }
@keyframes popin { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
@keyframes flipin { from { transform: perspective(700px) rotateY(-90deg) scale(.95); } }
.popit .gap { aspect-ratio: 1; }
/* клетка — кусок силикона, пузырёк — купол внутри */
.bub { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 0; background: var(--c); cursor: pointer;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); -webkit-tap-highlight-color: transparent; }
.bub::before { content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 7%, rgba(255,255,255,.3) 20%, transparent 42%),
              radial-gradient(circle at 50% 45%, var(--c) 50%, var(--d) 100%);
  box-shadow: 0 3px 3px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.12), inset 0 -3px 4px rgba(0,0,0,.22);
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .15s, background .15s; }
.bub.popped::before { transform: scale(.9);
  background: radial-gradient(circle at 66% 74%, rgba(255,255,255,.45) 0 6%, transparent 32%), radial-gradient(circle at 50% 40%, var(--d) 30%, var(--c) 100%);
  box-shadow: inset 0 5px 7px rgba(0,0,0,.55), inset 0 -2px 2px rgba(255,255,255,.25), 0 0 0 1px rgba(0,0,0,.18); }
.bub.press::before { animation: bubpress .24s ease-out; }
.bub::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); opacity: 0; pointer-events: none; }
.bub.press::after { animation: popring .4s ease-out; }
@keyframes bubpress { 0% { transform: scale(1.04); } 40% { transform: scale(.78); } 75% { transform: scale(.95); } 100% { transform: scale(.9); } }
@keyframes popring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.45); } }


/* ---------- монетки, колесо, 3D-игра ---------- */
.fly-coin { position: fixed; z-index: 200; width: 22px; height: 22px; pointer-events: none; }
.auction-hero:active, .rank-card:active, .daily:active, .wheel-card:active, .runner-hero:active { transform: scale(.98); }
.auction-hero, .rank-card, .daily, .wheel-card, .runner-hero { transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.wheel-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; text-align: left; color: var(--ink);
  background: linear-gradient(100deg, #3a2390, #6a2fa8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 5px 0 #120b30; }
.wheel-card b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.wheel-card small { color: var(--muted); }
.wheel-mini { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 3px solid var(--gold); animation: spinslow 6s linear infinite;
  background: conic-gradient(#8fd8c4 0 45deg, #c65bd8 0 90deg, #5b8cff 0 135deg, #ffcf3a 0 180deg, #8fd8c4 0 225deg, #c65bd8 0 270deg, #e2384d 0 315deg, #5b8cff 0); }
@keyframes spinslow { to { transform: rotate(360deg); } }
.wheel { position: relative; width: min(100%, 260px); margin: 4px auto 0; }
.wheel-svg { display: block; width: 100%; transition: transform 4.2s cubic-bezier(.12,.75,.15,1); filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.wheel-svg text { font-family: var(--font-display); font-size: 20px; fill: #1b1240; }
.wheel-pin { position: absolute; z-index: 1; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--gold); filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.runner-hero { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 14px; border-radius: 18px; overflow: hidden; color: var(--ink); text-decoration: none;
  background: radial-gradient(90% 70% at 85% 10%, rgba(255,207,58,.35), transparent 60%), linear-gradient(160deg, #1f6b3a 0%, #2a8a4a 45%, #3a2390 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 0 #120b30; }
.runner-hero::after { content: ""; position: absolute; right: -10px; bottom: -14px; width: 120px; height: 120px; opacity: .9;
  background: url('../img/ui/ball.webp') center / contain no-repeat; transform: rotate(-15deg); }
.runner-hero b { font-family: var(--font-display); font-weight: 400; font-size: 28px; text-transform: uppercase; line-height: 1; }
.runner-hero small { color: rgba(255,255,255,.8); font-size: 13px; max-width: 70%; }
.runner-hero .btn { align-self: flex-start; margin-top: 4px; background: var(--gold); box-shadow: 0 4px 0 #b77f00; }
.rh-badge { align-self: flex-start; padding: 2px 8px; border-radius: 8px; font-weight: 800; font-size: 12px; background: var(--sasha); color: #fff; }

.ic-crest.n1, .ic-crest.n2, .ic-crest.n3, .ic-crest.n4 { width: 15px; height: 19px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ic-crest.n1 { left: 10px; top: 9px; } .ic-crest.n2 { right: 10px; top: 9px; } .ic-crest.n3 { left: 10px; bottom: 9px; } .ic-crest.n4 { right: 10px; bottom: 9px; }
.ic-flag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* ---------- кнопка «?» и обучение ---------- */
.topbar:has(.help) { grid-template-columns: 44px 1fr auto auto; }
.help { width: 34px; height: 34px; border: 0; border-radius: 50%; font-family: var(--font-display); font-size: 18px; color: var(--night);
  background: var(--gold); box-shadow: 0 3px 0 #b77f00; transition: transform .2s cubic-bezier(.3,1.8,.5,1); }
.help:active { transform: scale(.9); }
.howto { display: grid; justify-items: center; text-align: center; gap: 4px; }
.howto .howto-ico { width: 72px; height: 72px; margin: 0 0 4px; animation: popin .45s cubic-bezier(.3,1.5,.5,1); }
.howto-k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.howto h2 { margin: 0 0 6px; }
.howto ol { list-style: none; counter-reset: st; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.howto li { counter-increment: st; position: relative; padding: 10px 12px 10px 46px; border-radius: 14px; background: var(--night-3); font-size: 14px; line-height: 1.35;
  animation: cardIn .4s ease both; }
.howto li:nth-child(2) { animation-delay: .08s; } .howto li:nth-child(3) { animation-delay: .16s; }
.howto li::before { content: counter(st); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; color: var(--night); background: var(--danil); }
.howto li:nth-child(2)::before { background: var(--sasha); color: #fff; } .howto li:nth-child(3)::before { background: var(--gold); }

/* ---------- угадай сборную ---------- */
.nat-pitch { position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-height: 360px; padding: 16px 8px; border-radius: 18px;
  border: 3px solid var(--chalk); background: repeating-linear-gradient(180deg, var(--pitch) 0 12.5%, var(--pitch-2) 12.5% 25%); box-shadow: 0 12px 30px rgba(0,0,0,.35); overflow: hidden; }
.nat-pitch::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.35); border-radius: 50%; }
.nat-pitch::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.35); }
.nat-row { position: relative; z-index: 1; display: flex; justify-content: space-evenly; gap: 6px; }
.nat-slot { display: grid; justify-items: center; gap: 2px; flex: 0 1 74px; min-width: 0; animation: popin .45s cubic-bezier(.3,1.5,.5,1) both; }
.nat-row:nth-child(2) .nat-slot { animation-delay: .08s; } .nat-row:nth-child(3) .nat-slot { animation-delay: .16s; } .nat-row:nth-child(4) .nat-slot { animation-delay: .24s; } .nat-row:nth-child(5) .nat-slot { animation-delay: .32s; } .nat-row:nth-child(6) .nat-slot { animation-delay: .4s; }
.nat-slot .crest-m { width: 46px; height: 56px; margin: 0; padding: 5px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 8px rgba(0,0,0,.35); object-fit: contain; }
.nat-slot .crest-m.crest-none { width: 46px; height: 46px; padding: 0; color: var(--night); }
.nat-slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.nat-name { display: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; border-radius: 6px; background: var(--night); font-size: 10px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.nat-slot.named .nat-name { display: block; animation: numPop .4s ease; }
.nat-opt { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; }
.nat-flag { font-size: 22px; }
.nat-opt.right { background: var(--hit); color: #fff; box-shadow: 0 4px 0 #1f7a3a; }
.nat-opt.wrong { background: var(--danger); color: #fff; box-shadow: 0 4px 0 #8a1f2b; }
.nat-scheme { position: absolute; top: 8px; left: 10px; z-index: 1; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.35); font: 12px var(--font-display); color: #fff; }

/* ---------- возьмёшь этого или другого ---------- */
.pick-clubs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pick-club { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border: 0; border-radius: 18px; color: var(--ink);
  background: radial-gradient(100% 80% at 50% 0%, #5b3fc4, var(--night-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 5px 0 #120b30; transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.pick-club:active { transform: scale(.96); }
.pick-club .crest-xl { width: 64px; height: 80px; margin: 0; }
.pick-club b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 15px; }
.tb { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 6px; padding: 10px; border-radius: 18px; background: #f2f2f7; color: #1b1240; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.tb-head { padding: 6px 8px; border-radius: 10px; text-align: center; font-family: var(--font-display); text-transform: uppercase; font-size: 14px; color: #fff; background: #2a2f45; }
.tb-head.danil { box-shadow: inset 0 -3px 0 var(--danil); } .tb-head.sasha { box-shadow: inset 0 -3px 0 var(--sasha); }
.tb-crest { display: grid; place-items: center; } .tb-crest .crest-xs { width: 26px; height: 32px; margin: 0; }
.tb-pos { display: grid; place-items: center; border-radius: 8px; background: #2a2f45; color: #fff; font-size: 10px; font-weight: 900; }
.tb-slot { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 6px; border-radius: 10px; background: linear-gradient(90deg, #fff, #dfe1ea); animation: cardIn .35s ease both; min-width: 0; }
.tb-slot.empty { background: rgba(42,47,69,.08); box-shadow: inset 0 0 0 1px rgba(42,47,69,.15); animation: none; }
.tb-slot > span { display: grid; min-width: 0; }
.tb-slot b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 13px; line-height: 1.05; overflow-wrap: anywhere; }
.tb-slot .ava-m { width: 38px; height: 38px; }
.tb-apps { font-style: normal; font-family: var(--font-display); font-size: 15px; color: #6a2fa8; }
.tb-apps::after { content: ' матчей'; font-family: var(--font-body); font-size: 10px; font-weight: 700; color: #6b6585; }
.pick-ask { display: grid; justify-items: center; gap: 4px; margin-top: 4px; text-align: center; }
.pick-ask small { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.pick-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.pick-or { font-family: var(--font-display); color: var(--gold); font-size: 15px; text-transform: uppercase; }
.pick-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border: 0; border-radius: 18px; color: var(--ink); min-width: 0;
  background: linear-gradient(170deg, var(--night-3), var(--night-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 5px 0 #120b30;
  transition: transform .25s cubic-bezier(.3,1.8,.5,1), box-shadow .2s; animation: cardIn .4s ease both; }
.pick-card + .pick-or + .pick-card { animation-delay: .08s; }
.pick-card:active { transform: scale(.96); }
.pick-card b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 14px; line-height: 1.1; text-align: center; }
.pick-card .ava-xl { width: 88px; height: 88px; margin: 0; }
.pick-card.chosen { transform: scale(1.05); box-shadow: inset 0 0 0 3px var(--gold), 0 5px 0 #120b30; }
.pick-card.ok { box-shadow: inset 0 0 0 3px var(--hit), 0 5px 0 #120b30; } .pick-card.bad { box-shadow: inset 0 0 0 3px var(--danger), 0 5px 0 #120b30; }
.pick-apps { font-style: normal; font-weight: 800; color: var(--gold); font-size: 13px; }
.pick-score { margin: 0; text-align: center; color: var(--muted); } .pick-score b { color: var(--gold); font-size: 20px; }
.tag-gold { background: var(--gold); color: var(--night); }
.pick-card.shown { cursor: default; }
.pick-card.hidden-card { background: repeating-linear-gradient(45deg, var(--night-3) 0 10px, var(--night-2) 10px 20px); }
.pick-mystery { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; font-family: var(--font-display); font-size: 48px; color: var(--gold);
  background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 3px rgba(255,207,58,.5); animation: markpulse 1.4s ease-in-out infinite; }
.pick-card small { color: var(--muted); font-size: 11px; }
.pick-card.flip { animation: pickflip .5s ease; }
@keyframes pickflip { 50% { transform: perspective(600px) rotateY(90deg); } }
.pick-card.missed { opacity: .55; filter: grayscale(.6); }
.pick-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 52px; }
.pick-btns .btn { font-family: var(--font-display); font-weight: 400; font-size: 18px; text-transform: uppercase; }
.pick-note { grid-column: 1 / -1; margin: 0; align-self: center; text-align: center; color: var(--muted); animation: cardIn .35s ease; }
.pick-note b { color: var(--gold); }
.alot-form { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--muted); max-width: 300px; }
.alot-form b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-family: var(--font-display); font-weight: 400; font-size: 20px;
  color: var(--night); background: linear-gradient(145deg, #b6ffcf, var(--hit)); box-shadow: 0 3px 0 #1f7a3a; }
.tg-flag { display: block; font-size: 24px; line-height: 1.1; font-weight: 400; }
.tg-head.nat span, .tg-head.cnt span, .tg-head.special span { font-size: 10px; line-height: 1.15; }
.tg-head.nat { background: linear-gradient(160deg, rgba(143,216,196,.25), transparent); }
.tg-head.cnt { background: linear-gradient(160deg, rgba(255,207,58,.22), transparent); }
.tg-head.special { background: linear-gradient(160deg, rgba(198,91,216,.25), transparent); }

/* подписи в шапке сетки: переносим только по словам, длинные названия — мельче */
.tg-head span { overflow-wrap: normal; word-break: normal; hyphens: manual; max-width: 100%; }
.tg-head.club span { font-size: 9.5px; line-height: 1.1; }

/* ---------- плавность: экраны, каскад карточек, окна ---------- */
.screen.enter { animation: screenIn .32s cubic-bezier(.2,.8,.2,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } }
.screen.enter :is(.tile-card, .game-card, .auction-hero, .runner-hero, .wheel-card, .daily, .rank-card, .stat, .ach, .tour, .pick-club) {
  animation: rise .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.modal:not([hidden]) { animation: fadeIn .2s ease; }
.modal.closing { animation: fadeOut .17s ease forwards; }
.modal.closing .modal-card { animation: popOut .17s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes popOut { to { opacity: 0; transform: scale(.94) translateY(8px); } }
.modal-card { animation: modalIn .34s cubic-bezier(.2,1.2,.3,1); }
@keyframes modalIn { from { opacity: 0; transform: scale(.9) translateY(14px); } }
.toast { animation: toastIn .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px) scale(.95); } }
/* потерянная жизнь: сердечко чуть подпрыгивает */
.lives { transition: transform .2s; }
.lives.hit { animation: shake .35s; }
/* варианты ответа появляются по очереди */
.opts > * { animation: rise .35s cubic-bezier(.2,.8,.2,1) both; }
.opts > *:nth-child(2) { animation-delay: .04s; } .opts > *:nth-child(3) { animation-delay: .08s; } .opts > *:nth-child(4) { animation-delay: .12s; } .opts > *:nth-child(5) { animation-delay: .16s; }
.opts > .btn:disabled { animation: none; }

/* ---------- 3D-игра во весь экран ---------- */
.runner-screen { position: fixed; inset: 0; z-index: 40; padding: 0; gap: 0; background: #0c0726; }
.runner-screen iframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; }
.runner-back { position: absolute; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 2; border: 2px solid #000; border-radius: 12px;
  padding: 8px 12px; font: 800 13px var(--font-body); color: #111; background: var(--gold); box-shadow: 0 3px 0 #000; }
body.in-runner { overflow: hidden; }
body.in-runner #tabbar { display: none; }
.sball.flying { position: relative; z-index: 5; }

/* ---------- игрок дня ---------- */
.dly-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 0; border-radius: 18px; text-align: left; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, #2fb35a 0%, #155c32 55%, #0d3a20 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 0 #0a2c18; }
.dly-card::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 28px, transparent 28px 56px); pointer-events: none; }
.dly-card-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; background: radial-gradient(circle at 40% 35%, #fff 0 10%, #d9f5e2 11% 60%, #9fd9b4 61%);
  box-shadow: 0 0 0 3px var(--gold), 0 6px 14px rgba(0,0,0,.35); animation: dlyGlow 2.4s ease-in-out infinite; }
.dly-card-photo i { font: 34px var(--font-display); font-style: normal; color: #155c32; }
.dly-card.done .dly-card-photo { animation: none; box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
@keyframes dlyGlow { 50% { box-shadow: 0 0 0 3px var(--gold); } }
.dly-card-body { display: grid; gap: 3px; min-width: 0; position: relative; z-index: 1; }
.dly-card-top { display: flex; align-items: center; gap: 8px; }
.dly-card-top .tag { background: var(--gold); color: #2a1d00; font-size: 11px; }
.dly-card-top b { font-family: var(--font-display); font-weight: 400; }
.dly-card-top em { font-style: normal; font-weight: 800; color: var(--gold); }
.dly-card-title { font-family: var(--font-display); font-weight: 400; font-size: 21px; text-transform: uppercase; line-height: 1.05; }
.dly-card small { color: rgba(255,255,255,.8); font-size: 13px; }

.dly-top { display: grid; justify-items: center; gap: 10px; }
.dly-photo { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: #d9e4f5; box-shadow: 0 0 0 4px var(--gold), 0 10px 24px rgba(0,0,0,.4); }
.dly-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: blur(var(--b, 20px)) saturate(.9); transition: filter .7s ease; }
.dly-photo.shake { animation: shakeBad .45s; }
.dly-tries { display: flex; gap: 6px; }
.dly-tries i { width: 26px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.14); }
.dly-tries .ev-x { background: var(--danger); } .dly-tries .ev-h { background: var(--gold); } .dly-tries .ev-w { background: var(--hit); }
.dly-tries i[class] { animation: numPop .35s ease; }
.dly-clues { display: grid; gap: 6px; margin: 14px 0; }
.dly-clue { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 13px; }
.dly-clue b { font-weight: 700; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; }
.dly-clue.open { background: var(--night-3); color: #fff; animation: rise .4s ease both; animation-delay: calc(var(--i) * 40ms); }
.dly-clue.open span { color: var(--muted); }
.dly-club { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dly-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.dly-guesses { display: grid; gap: 6px; margin-top: 12px; }
.dly-g { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 5px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 13px; animation: rise .35s ease both; }
.dly-g span { padding: 3px 7px; border-radius: 8px; font-weight: 700; font-size: 12px; text-align: center; }
.dly-g .hit { background: var(--hit); color: #06210f; } .dly-g .near { background: var(--near); color: #2a1d00; } .dly-g .miss { background: var(--miss); color: #fff; }
.dly-result { display: grid; gap: 10px; margin-top: 14px; text-align: center; animation: rise .45s ease both; }
.dly-verdict { margin: 0; font-weight: 800; font-size: 17px; }
.dly-share-row { font-size: 24px; letter-spacing: 3px; }
.dly-next { margin: 0; }
.dly-face { width: 96px; height: 96px; border-radius: 50%; background: #d9e4f5; box-shadow: 0 0 0 3px var(--hit); }
.limit-note { font-style: normal; font-size: 11px; font-weight: 800; color: var(--gold); letter-spacing: .02em; }

/* ---------- магазин ---------- */
.shop-row { display: grid; gap: 8px; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop-econ { display: grid; gap: 2px; margin: 4px 0 6px; padding: 10px 14px; border-radius: 14px; background: rgba(47,179,90,.14); box-shadow: inset 0 0 0 1px rgba(47,179,90,.35); }
.shop-econ.low { background: rgba(255,207,58,.12); box-shadow: inset 0 0 0 1px rgba(255,207,58,.35); }
.shop-econ small { opacity: .7; font-size: 12px; }
.shop-item { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 12px 10px; border-radius: 16px; background: var(--night-2); text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.shop-item.on { box-shadow: inset 0 0 0 2px var(--gold); }
.shop-item.wide { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; }
.shop-item.wide small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.shop-item b { font-size: 14px; }
.shop-item .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 14px; }
.shop-item .btn .coin { width: 16px; height: 16px; }
.shop-on { font-size: 12px; font-weight: 800; color: var(--gold); padding: 8px 0; }
.shop-ico.life { font-size: 30px; color: var(--danger); width: 44px; text-align: center; }
.shop-item .tile-ico { margin: 0; }
.shop-frame { width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; font: 24px var(--font-display); color: var(--night);
  background: conic-gradient(var(--danil), var(--gold), var(--sasha), var(--danil)); }
.shop-card { width: 100%; pointer-events: none; }
.shop-card .tile-card { width: 100%; min-height: 64px; }
.shop-balls { display: flex; gap: 6px; padding: 6px 0; pointer-events: none; }
.shop-balls .sball { width: 32px; height: 32px; }

/* рамки аватара */
.frame-host { position: relative; }
.frame-host[data-frame="gold"] { box-shadow: 0 0 0 4px #ffcf3a, 0 0 0 7px #8a6400; }
.frame-host[data-frame="fire"] { animation: frameFire 1.4s ease-in-out infinite; }
@keyframes frameFire { 0%, 100% { box-shadow: 0 0 0 4px #ff6a00; } 50% { box-shadow: 0 0 0 4px #ffb300; } }
.frame-host[data-frame="neon"] { animation: frameNeon 2.2s steps(1) infinite; box-shadow: 0 0 0 3px #2fd3e0; }
@keyframes frameNeon { 0%, 46%, 50%, 100% { box-shadow: 0 0 0 3px #2fd3e0; } 48% { box-shadow: 0 0 0 3px #1a7f9a; } }
.frame-host[data-frame="rainbow"]::before, .frame-host[data-frame="diamond"]::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1; }
.frame-host[data-frame="rainbow"]::before { background: conic-gradient(#ff4d4d, #ffcf3a, #34c46a, #2fd3e0, #5b8cff, #c65bd8, #ff4d4d); animation: spin 3s linear infinite; }
.frame-host[data-frame="diamond"] { box-shadow: 0 0 0 4px #e6f7ff, 0 0 0 7px #7fb8ff; }
.frame-host[data-frame="diamond"]::before { inset: -10px; background: radial-gradient(circle at 20% 15%, #fff 0 3px, transparent 4px), radial-gradient(circle at 85% 30%, #fff 0 2px, transparent 3px), radial-gradient(circle at 70% 90%, #fff 0 3px, transparent 4px);
  animation: sparkle 1.6s ease-in-out infinite; z-index: 1; pointer-events: none; }
@keyframes sparkle { 50% { opacity: .2; transform: rotate(20deg); } }
.prof-badge, .shop-frame { isolation: isolate; }

/* темы карточек на главной */
.shop-card[data-cards="classic"] .tile-card { background: var(--night-2); color: var(--ink); }
body[data-cards="night"] .tile-card, .shop-card[data-cards="night"] .tile-card {
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--c1) 45%, transparent), transparent 60%), #0e0a26; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 60%, transparent), 0 5px 0 #05030f; }
body[data-cards="grass"] .tile-card, .shop-card[data-cards="grass"] .tile-card {
  background: repeating-linear-gradient(90deg, #2f9a4f 0 18px, #2a8c47 18px 36px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 5px 0 #145a2a; }
body[data-cards="grass"] .tile-card small, .shop-card[data-cards="grass"] .tile-card small { color: #fff3b0; }
body[data-cards="retro"] .tile-card, .shop-card[data-cards="retro"] .tile-card {
  background: linear-gradient(90deg, var(--c1) 0 8px, transparent 8px), #f3e6c8; color: #3a2a12; box-shadow: inset 0 0 0 2px #3a2a12, 0 5px 0 #3a2a12; }
body[data-cards="retro"] .tile-card small, .shop-card[data-cards="retro"] .tile-card small { color: #9a4b12; }
body[data-cards="gold"] .tile-card, .shop-card[data-cards="gold"] .tile-card {
  background: linear-gradient(135deg, #fff1a8, #ffcf3a 40%, #c98f00); color: #2a1d00; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 5px 0 #7a5600; }
body[data-cards="gold"] .tile-card small, .shop-card[data-cards="gold"] .tile-card small { color: #5a3d00; }

/* мячи в Сортировке */
.shop-balls[data-balls="classic"] .sball { background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.28) 0 12%, transparent 13%), radial-gradient(circle at 18% 32%, rgba(0,0,0,.2) 0 8%, transparent 9%),
    radial-gradient(circle at 82% 32%, rgba(0,0,0,.2) 0 8%, transparent 9%), radial-gradient(circle at 35% 30%, rgba(255,255,255,.65), transparent 40%), var(--c); }
body[data-balls="gloss"] .sball, .shop-balls[data-balls="gloss"] .sball {
  background: radial-gradient(circle at 32% 26%, #fff 0 10%, rgba(255,255,255,.4) 11% 24%, transparent 46%), radial-gradient(circle at 70% 80%, rgba(0,0,0,.35), transparent 60%), var(--c); }
body[data-balls="ball"] .sball, .shop-balls[data-balls="ball"] .sball {
  background: url('../img/ui/ball.webp') center / 112% no-repeat, var(--c); background-blend-mode: multiply; }
body[data-balls="crests"] .sball, .shop-balls[data-balls="crests"] .sball {
  background: var(--k, none) center / 62% no-repeat, radial-gradient(circle at 35% 30%, #fff, #e9e9f2); box-shadow: inset 0 0 0 4px var(--c), 0 2px 4px rgba(0,0,0,.3); }
.pack-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 4px; }
.pack-dots button { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--night-3); font: 16px var(--font-display); color: var(--ink); }
.pack-dots button.ok { background: var(--gold); color: #2a1d00; }

/* ---------- новые игры: общее ---------- */
.shake { animation: shakeBad .45s; }
.ng-body { display: grid; gap: 10px; }
.ng-lead { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.ng-lead b { color: var(--ink); }
.ng-q { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px; text-transform: uppercase; text-align: center; display: flex; gap: 8px; justify-content: center; align-items: center; }
.ng-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ng-row .btn { flex: 1; min-width: 0; }
.ng-input { display: flex; gap: 8px; }
.ng-input input { flex: 1; min-width: 0; }
.ng-input .ng-go { flex: none; padding: 0 16px; }
.ng-clue { margin: 0; text-align: center; font-size: 13px; color: var(--gold); min-height: 1.2em; }
.ic-emo { position: absolute; inset: 0; display: grid; place-content: center; font-size: 30px; font-family: "Twemoji Country Flags", var(--font-body); }
.ic-emo.sm { inset: auto 2px 2px auto; font-size: 18px; }
.ic-big { position: absolute; inset: 0; display: grid; place-content: center; font: 24px var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.ic-big.sm { font-size: 15px; }
.ic-tag { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 1px 5px; border-radius: 6px; background: var(--gold); color: #2a1d00; font: 800 9px var(--font-body); white-space: nowrap; }
.ic-tag.red { background: var(--danger); color: #fff; }

/* состав дня */
.ng-pitch { min-height: 330px; }
.ng-slot { display: grid; justify-items: center; gap: 2px; flex: 0 1 74px; min-width: 0; padding: 0; border: 0; background: none; color: #fff; }
.ng-slot.sel .crest-m { box-shadow: 0 0 0 3px var(--gold), 0 4px 8px rgba(0,0,0,.35); }
.ng-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 1px 5px; border-radius: 6px; background: var(--night); font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #c9c2ee; white-space: nowrap; }
.ng-slot.ok .ng-name { background: var(--hit); color: #06210f; letter-spacing: 0; animation: numPop .4s ease; }
.ng-slot.miss .ng-name { background: var(--danger); color: #fff; letter-spacing: 0; }
.ng-misses { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .05em; }

/* wordle */
.wd-grid { display: grid; gap: 5px; justify-content: center; }
.wd-row { display: grid; grid-template-columns: repeat(var(--l), minmax(0, 40px)); gap: 5px; }
.wd-row i { aspect-ratio: 1; display: grid; place-content: center; border-radius: 8px; background: #202a36; border: 2px solid #748296; font: 20px var(--font-display); font-style: normal; text-transform: uppercase; }
.wd-row i.typed { border-color: #8d84c4; animation: numPop .2s; }
.wd-row i.hit, .wd-kb .hit { background: var(--hit); border-color: var(--hit); color: #06210f; }
.wd-row i.near, .wd-kb .near { background: var(--near); border-color: var(--near); color: #2a1d00; }
.wd-row i.miss, .wd-kb .miss { background: var(--miss); border-color: var(--miss); color: #a59fc9; }
.wd-row i.hit, .wd-row i.near, .wd-row i.miss { animation: flip .4s ease both; }
.wd-kb { display: grid; gap: 6px; }
.wd-kb div { display: flex; gap: 4px; justify-content: center; }
.wd-kb button { flex: 1; max-width: 34px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: var(--night-3); color: var(--ink); font-weight: 800; font-size: 14px; }
.wd-kb button.wide { max-width: 60px; flex: 1.6; font-size: 11px; }

/* требл */
.tb-cups { display: flex; justify-content: center; gap: 14px; font-size: 32px; }
.tb-cups i { font-style: normal; filter: grayscale(1) opacity(.35); transition: filter .4s, transform .4s; }
.tb-cups i.win { filter: none; transform: scale(1.15); } .tb-cups i.lose { filter: grayscale(1) opacity(.6) sepia(1) hue-rotate(-50deg); }
.tb-crest { display: grid; place-items: center; padding: 10px; }
.tb-crest .crest-xl { filter: blur(6px) grayscale(.4); animation: tbUnblur 9s ease forwards; }
@keyframes tbUnblur { to { filter: blur(1.5px) grayscale(0); } }
.tb-tr { display: grid; gap: 6px; justify-items: center; padding: 14px; border-radius: 16px; background: var(--night-2); text-align: center; }
.tb-tr b { font-size: 18px; } .tb-tr span { display: inline-flex; align-items: center; gap: 6px; } .tb-tr small { color: var(--muted); }
.ng-opt { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; }
.tb-two { grid-template-columns: 1fr 1fr; }
.tb-two .ng-opt { flex-direction: column; min-height: 130px; }
.tb-r { font: 22px var(--font-display); font-style: normal; color: var(--gold); }
.ng-opt.right { background: var(--hit); color: #06210f; } .ng-opt.wrong { background: var(--danger); color: #fff; }

/* ложная девятка */
.f9-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.f9-card { display: grid; align-content: center; gap: 4px; min-height: 104px; padding: 8px; border: 0; border-radius: 12px; background: var(--night-2); color: var(--ink); font-size: 12px; line-height: 1.25; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 0 #120b30; transition: transform .2s; }
.f9-card:active { transform: scale(.96); }
.f9-card.lie { background: #3d1730; box-shadow: inset 0 0 0 2px var(--danger); animation: flipin .4s ease; }
.f9-card.truth { background: #133a26; box-shadow: inset 0 0 0 2px var(--hit); opacity: .8; }
.f9-card small { font-size: 10px; color: var(--gold); }

/* связи */
.cn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cn-tile { min-height: 62px; padding: 6px 4px; border: 0; border-radius: 10px; background: #efe9ff; color: #1b1340; font-size: 11px; font-weight: 800; line-height: 1.15; word-break: break-word; transition: transform .15s, background .15s; }
.cn-tile.on { background: #5b4fa8; color: #fff; transform: scale(.95); }
.cn-solved { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--c); color: #1b1340; text-align: center; animation: popin .4s ease; }
.cn-solved b { text-transform: uppercase; font-size: 13px; } .cn-solved span { font-size: 12px; }

/* топ-10 */
.t10-lives { text-align: center; color: var(--danger); letter-spacing: .1em; }
.t10-list { margin: 0; padding-left: 26px; display: grid; gap: 4px; }
.t10-list li { padding: 7px 10px; border-radius: 10px; background: var(--night-2); }
.t10-list li b { display: block; font-size: 14px; } .t10-list li small { color: var(--muted); font-size: 11px; }
.t10-list li.ok { background: #133a26; animation: rise .35s ease; } .t10-list li.miss { background: #3d1730; }
.ng-q .crest-s { flex: none; }

/* тепло-холодно */
.cx-list { display: grid; gap: 5px; }
.cx-row { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--night-2); overflow: hidden; font-size: 14px; }
.cx-row i { position: absolute; inset: 0 auto 0 0; opacity: .55; transition: width .5s; }
.cx-row b, .cx-row span { position: relative; } .cx-row span { font-weight: 800; }
.cx-row.win i { background: var(--hit); } .cx-row.hot i { background: #ff5a3c; } .cx-row.warm i { background: #ff9f2a; } .cx-row.cool i { background: #3a7bd5; } .cx-row.cold i { background: #2b3a66; }
.cx-row.last { box-shadow: inset 0 0 0 2px var(--gold); }

/* кто я */
.wa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wa-mate { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: var(--night-2); font-size: 13px; animation: rise .35s ease both; }
.wa-mate small { display: block; color: var(--muted); font-size: 11px; }
.wa-mate.locked { opacity: .45; animation: none; }
.wa-tries { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .wa-no { font-size: 12px; color: var(--danger); }

/* связка */
.lu-chain { display: grid; justify-items: center; gap: 4px; }
.lu-node { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--night-2); font-size: 14px; animation: popin .35s ease; }
.lu-node.start { box-shadow: inset 0 0 0 2px var(--hit); } .lu-node.end { box-shadow: inset 0 0 0 2px var(--gold); }
.lu-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.lu-link::before { content: "↓"; color: var(--gold); font-weight: 900; margin-right: 2px; }
.lu-link.gap::before { content: ""; }

/* рейтинг */
.rk-list { display: grid; gap: 6px; }
.rk-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--night-2); color: var(--ink); text-align: left; font-size: 14px; }
.rk-item span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rk-item span small { width: 100%; color: var(--muted); font-size: 11px; }
.rk-item em { width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; background: var(--night-3); font: 16px var(--font-display); font-style: normal; }
.rk-item.on em { background: var(--gold); color: #2a1d00; animation: numPop .3s; }
.rk-item.ok { box-shadow: inset 0 0 0 2px var(--hit); } .rk-item.bad { box-shadow: inset 0 0 0 2px var(--danger); }
.rk-item b { font-size: 12px; color: var(--gold); white-space: nowrap; }

/* бинго */
.bg-card-now { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 8px; border-radius: 14px; background: var(--night-2); }
.bg-card-now b { font-size: 16px; } .bg-card-now .btn { padding: 8px 12px; font-size: 13px; }
.bg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.bg-cell { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 78px; padding: 5px 3px; border: 0; border-radius: 10px; background: #efe9ff; color: #1b1340; font-size: 10px; font-weight: 800; line-height: 1.1; }
.bg-cell .tg-flag { font-size: 20px; }
.bg-cell.on { background: var(--hit); color: #06210f; animation: popin .35s ease; }
.bg-cell:disabled:not(.on) { opacity: .7; }

/* драфт */
.dr-pitch { min-height: 360px; }
.dr-slot { display: grid; justify-items: center; gap: 2px; flex: 0 1 76px; min-width: 0; padding: 4px 2px; border: 0; border-radius: 12px; background: rgba(0,0,0,.18); color: #fff; font-size: 11px; }
.dr-slot.on { background: rgba(0,0,0,.3); } .dr-slot.sel { box-shadow: 0 0 0 2px var(--gold); }
.dr-slot b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-slot small { color: var(--gold); font-weight: 800; }
.dr-plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; border: 2px dashed rgba(255,255,255,.7); font: 22px var(--font-display); }
.dr-offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dr-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 14px; background: linear-gradient(160deg, #fff1a8, #ffcf3a 50%, #c98f00); color: #2a1d00; font-size: 11px; animation: popin .35s ease both; }
.dr-card b { font-size: 12px; line-height: 1.1; } .dr-card small { font-size: 10px; }
.dr-card em { position: absolute; top: 6px; left: 8px; font: 18px var(--font-display); font-style: normal; }

/* козыри */
.tr-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; }
.tr-table > div { display: grid; gap: 4px; } .tr-table > div > small { text-align: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.tr-card { display: grid; justify-items: center; gap: 4px; padding: 10px 8px; border-radius: 16px; background: linear-gradient(160deg, #fff1a8, #ffcf3a 50%, #c98f00); color: #2a1d00; text-align: center; animation: flipin .4s ease; }
.tr-card b { font-size: 13px; line-height: 1.1; } .tr-card > small { font-size: 10px; }
.tr-card.back { min-height: 250px; align-content: center; background: repeating-linear-gradient(45deg, #2a2160 0 10px, #1b1340 10px 20px); color: var(--gold); box-shadow: inset 0 0 0 3px var(--gold); }
.tr-card.back b { font: 40px var(--font-display); }
.tr-stats { display: grid; gap: 2px; width: 100%; }
.tr-stats span { display: flex; justify-content: space-between; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.4); font-size: 11px; }
.tr-stats span.hl { background: #1b1340; color: var(--gold); } .tr-stats i { font-style: normal; } .tr-stats em { font-style: normal; font-weight: 900; }
.tr-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tr-res { font-weight: 800; } .tr-res.win { color: var(--hit); } .tr-res.lose { color: var(--danger); }

/* VS 100 */
.vs-count { display: grid; justify-items: center; padding: 10px; border-radius: 16px; background: radial-gradient(circle at 50% 0, #6b1a2a, var(--night-2)); }
.vs-count b { font: 48px var(--font-display); line-height: 1; color: #fff; } .vs-count span { color: var(--muted); font-size: 12px; }
.vs-res { font-size: 13px; color: var(--muted); text-align: center; } .vs-res p { margin: 4px 0; } .vs-res b { color: var(--ink); }

/* дартс */
.dt-board { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle, #e2384d 0 12%, #2fb35a 12% 16%, #111 16% 34%, #f3e6c8 34% 40%, #111 40% 58%, #e2384d 58% 62%, #111 62% 100%); box-shadow: 0 0 0 6px #3a2a12, 0 10px 24px rgba(0,0,0,.4); }
.dt-board b { font: 40px var(--font-display); color: #fff; text-shadow: 0 2px 6px #000; } .dt-board span { font-size: 11px; color: #fff; text-shadow: 0 1px 3px #000; }
.dt-log { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 12px; }
.dt-log span { padding: 3px 8px; border-radius: 8px; background: var(--night-2); } .dt-log .hit { color: var(--hit); } .dt-log .bust, .dt-log .miss { color: var(--danger); }

/* ---------- полировка новых игр ---------- */
.dly-progress { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(47,179,90,.18), rgba(255,207,58,.12)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.dp-head { display: flex; justify-content: space-between; align-items: baseline; }
.dp-head b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 15px; } .dp-head span { color: var(--gold); font-weight: 800; font-size: 13px; }
.dp-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.dp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hit), var(--gold)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.dp-items { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-items span { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 11px; color: var(--muted); }
.dp-items span.ok { background: rgba(52,196,106,.22); color: #b6f5cb; }
.dp-note { color: var(--muted); font-size: 12px; }
.dp-chest { animation: chestPulse 1.4s ease-in-out infinite; }
@keyframes chestPulse { 50% { transform: scale(1.03); box-shadow: 0 0 0 1.5px rgba(255,207,58,.6); } }

.ng-res { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ng-res-ico { width: 64px; height: 64px; margin: 0; animation: popin .5s cubic-bezier(.3,1.5,.5,1) both; }
.ng-res-big { font: 46px var(--font-display); line-height: 1; color: var(--gold); text-shadow: 0 3px 0 rgba(0,0,0,.3); animation: numPop .6s ease .15s both; }
.ng-res.lose .ng-res-big { color: #c9c2ee; }
.ng-res h2 { margin: 0; }
.ng-res-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ng-res-stats span { display: grid; min-width: 70px; padding: 6px 10px; border-radius: 12px; background: var(--night-3); }
.ng-res-stats b { font: 18px var(--font-display); } .ng-res-stats small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ng-res-sq { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: 2px; }
.ng-ok { animation: ngOk .55s ease; } .ng-bad { animation: shakeBad .45s ease; }
@keyframes ngOk { 30% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--hit); } }
.lu-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(120deg, var(--night-3), var(--night-2)); }
.lu-flag { font-size: 38px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.lu-banner b { display: block; font: 20px var(--font-display); text-transform: uppercase; } .lu-banner small { color: var(--muted); font-size: 12px; }
.lu-count { margin-left: auto; font-size: 13px; color: var(--muted); } .lu-count b { font: 28px var(--font-display); color: var(--gold); }
.ng-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; max-width: 100%; }
.ng-tiles i { width: 7px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.85); color: #1b1340; font: 800 8px/10px var(--font-body); font-style: normal; text-align: center; }
.ng-tiles i.gap { width: 3px; background: none; }
.ng-slot.pop { animation: slotPop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes slotPop { 40% { transform: scale(1.25) translateY(-4px); } }
.ng-slot.sel .ng-tiles i { background: var(--gold); }
.ng-misses { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ng-misses i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.15); }
.ng-misses i.x { background: var(--danger); box-shadow: 0 0 0 1.5px rgba(226,56,77,.7); animation: numPop .3s; }
.wd-row i.flip { animation: wdFlip .5s ease both; animation-delay: var(--d); }
.wd-row i.done { animation: none; }
@keyframes wdFlip { 0% { transform: rotateX(0); background: transparent; color: var(--ink); border-color: #8d84c4; } 49% { transform: rotateX(90deg); background: transparent; color: var(--ink); border-color: #8d84c4; } 100% { transform: rotateX(0); } }
.wd-row.win i { animation: wdJump .5s ease both; animation-delay: calc(var(--d) + 600ms); }
@keyframes wdJump { 40% { transform: translateY(-12px); } }
.wd-kb button:active { transform: scale(.92); }
.tb-cups { gap: 10px; font-size: 26px; }
.tb-cups span { display: grid; justify-items: center; gap: 2px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.05); filter: grayscale(1) opacity(.4); transition: all .4s; }
.tb-cups span i { font-style: normal; } .tb-cups small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tb-cups span.now { filter: none; opacity: .75; box-shadow: inset 0 0 0 1px var(--gold); }
.tb-cups span.win { filter: none; background: rgba(255,207,58,.18); box-shadow: inset 0 0 0 2px var(--gold); animation: slotPop .6s; }
.tb-cups span.lose { filter: grayscale(1) opacity(.5); background: rgba(226,56,77,.15); }
.tb-timer { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.tb-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--danger), var(--gold), var(--hit)); transform-origin: left; animation: tbTime 15s linear forwards; }
.tb-timer.stop i { animation-play-state: paused; }
@keyframes tbTime { to { transform: scaleX(0); } }
.tb-crest.show .crest-xl { animation: none; filter: none; transition: filter .4s; }
.tb-tr { justify-items: center; }
.tb-route { display: flex !important; align-items: center; gap: 10px; }
.tb-arrow { font-style: normal; font-size: 22px; color: var(--gold); animation: tbArrow 1s ease-in-out infinite; }
@keyframes tbArrow { 50% { transform: translateX(5px); } }
.tb-q { width: 56px; height: 56px; display: grid !important; place-content: center; border-radius: 50%; border: 2px dashed rgba(255,255,255,.5); font: 26px var(--font-display); color: var(--gold); }
.tb-q.show { border: 0; animation: popin .45s cubic-bezier(.3,1.5,.5,1); }
.tb-fut { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 8px 12px; border: 0; border-radius: 18px 18px 30px 30px;
  background: linear-gradient(160deg, #fff1a8, #ffcf3a 45%, #c98f00); color: #2a1d00; box-shadow: 0 6px 0 #7a5600; transition: transform .2s; }
.tb-fut:active { transform: scale(.96); }
.tb-fut b { font-size: 13px; line-height: 1.1; text-align: center; }
.tb-fut .tb-r { position: absolute; top: 8px; left: 12px; font-size: 24px; color: #2a1d00; }
.tb-fut .tb-r.show { animation: numPop .5s; }
.tb-fut.right { box-shadow: 0 0 0 4px var(--hit), 0 6px 0 #7a5600; } .tb-fut.wrong { filter: grayscale(.7); box-shadow: 0 0 0 4px var(--danger); }
.f9-head { display: flex; justify-content: space-between; gap: 10px; }
.f9-head > div { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; background: var(--night-2); }
.f9-head small { margin-left: 4px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.f9-lies i { font-style: normal; font-size: 18px; filter: grayscale(1) opacity(.35); transition: filter .3s; } .f9-lies i.on { filter: none; animation: numPop .4s; }
.f9-lives i { font-style: normal; font-size: 18px; color: rgba(255,255,255,.2); } .f9-lives i.on { color: var(--danger); }
.f9-card { position: relative; justify-items: start; align-content: start; padding-top: 10px; }
.f9-card .ava, .f9-card .crest, .f9-q { margin-bottom: 2px; }
.f9-q { width: 28px; height: 28px; display: grid; place-content: center; border-radius: 50%; background: var(--night-3); font-weight: 900; color: var(--gold); }
.f9-card.just { animation: flipin .45s ease; }
.f9-card.lie small { color: #ffb3bd; } .f9-card.truth small { color: #b6f5cb; }
.f9-card:not(:disabled):hover { box-shadow: inset 0 0 0 2px rgba(255,207,58,.6), 0 4px 0 #120b30; }
.cn-tile { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 84px; }
.cn-tile .ava { width: 30px; height: 30px; }
.cn-tile span { font-size: 10px; }
.cn-tile.on { box-shadow: 0 0 0 2px var(--gold); }
.cn-solved { animation: cnIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cnIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.cn-faces { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.cn-faces span { display: grid; justify-items: center; gap: 1px; } .cn-faces small { font-size: 10px; font-weight: 800; }
.cn-mist { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--muted); }
.cn-mist i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.15); } .cn-mist i.on { background: var(--gold); }
.cn-sel { margin-left: 10px; }
.t10-lives { display: flex; align-items: center; justify-content: center; gap: 18px; }
.t10-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--night) 78%, transparent 80%), conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255,255,255,.12) 0); transition: background .5s; }
.t10-ring b { font: 22px var(--font-display); line-height: 1; } .t10-ring small { font-size: 10px; color: var(--muted); }
.t10-miss { display: flex; align-items: center; gap: 4px; } .t10-miss i { font-style: normal; color: rgba(255,255,255,.2); font-weight: 900; } .t10-miss i.x { color: var(--danger); }
.t10-miss small { margin-left: 4px; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.t10-list li { display: flex; align-items: center; gap: 10px; }
.t10-list li.just { animation: slotPop .55s ease; }
.t10-hole { width: 32px; height: 32px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.18); flex: none; }
.t10-flag { width: 32px; text-align: center; font-size: 24px; flex: none; }
.cx-thermo { display: grid; gap: 4px; }
.cx-bar { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #2b3a66, #3a7bd5, #ff9f2a, #ff5a3c); opacity: .35; position: relative; overflow: hidden; }
.cx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #2b3a66, #3a7bd5, #ff9f2a, #ff5a3c); background-size: 390px 100%; opacity: 1; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.cx-thermo .cx-bar { opacity: 1; background: rgba(255,255,255,.08); }
.cx-tl { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .cx-tl b { font-weight: 800; }
.cx-row { gap: 8px; justify-content: flex-start; } .cx-row span { margin-left: auto; font-size: 12px; white-space: nowrap; }
.cx-row .ava { position: relative; flex: none; }
.cx-row.last { animation: slotPop .5s ease; }
.wa-hero { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(120deg, #1d4a40, var(--night-2)); }
.wa-hero b { display: block; font: 20px var(--font-display); text-transform: uppercase; } .wa-hero small { color: var(--muted); font-size: 12px; }
.wa-mystery { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-content: center; background: #2a2160; border: 2px dashed #8fd8c4; font: 28px var(--font-display); color: #8fd8c4; animation: dlyGlow 2.4s infinite; }
.wa-pts { display: flex; align-items: center; justify-content: center; gap: 4px; } .wa-pts small { margin-right: 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.wa-pts i { font-style: normal; filter: grayscale(1) opacity(.3); transition: filter .3s; } .wa-pts i.on { filter: none; }
.wa-mate small { display: flex; align-items: center; gap: 4px; }
.rk-rounds { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rk-rounds i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; background: var(--night-3); font: 12px var(--font-display); font-style: normal; color: var(--muted); }
.rk-rounds i.now { box-shadow: 0 0 0 2px var(--gold); color: var(--ink); } .rk-rounds i.done { background: var(--hit); color: #06210f; }
.rk-rounds b { margin-left: 8px; color: var(--gold); }
.rk-item.ok b, .rk-item.bad b { animation: numPop .4s; }
.bg-deck { position: relative; height: 18px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; display: grid; place-content: center; }
.bg-deck i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8e44d6, #ff6fb5); transition: width .4s; }
.bg-deck small { position: relative; font-size: 10px; font-weight: 800; }
.bg-card-now { justify-content: space-between; }
.bg-fut { display: flex; align-items: center; gap: 10px; animation: cardIn .4s cubic-bezier(.2,.8,.2,1); }
.bg-fut small { display: block; color: var(--muted); font-size: 11px; }
.bg-cell .ava { width: 30px; height: 30px; }
.bg-cell.just { animation: popin .4s cubic-bezier(.3,1.5,.5,1); }
.bg-cell.line { background: linear-gradient(160deg, #fff1a8, #ffcf3a); color: #2a1d00; box-shadow: 0 0 0 1.5px rgba(255,207,58,.6); }
.bg-cell.bad { background: #ffd0d6; }
.dr-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dr-score span { display: grid; justify-items: center; padding: 8px; border-radius: 12px; background: var(--night-2); }
.dr-score b { font: 24px var(--font-display); line-height: 1; } .dr-score small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dr-score .fin { background: linear-gradient(160deg, #fff1a8, #ffcf3a 50%, #c98f00); color: #2a1d00; } .dr-score .fin small { color: #5a3d00; }
.dr-pitch { position: relative; }
.dr-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.dr-links line { stroke-width: 3; stroke-linecap: round; opacity: .85; animation: fadeIn .5s; }
.dr-links .l3 { stroke: #ffcf3a; } .dr-links .l2 { stroke: #34c46a; } .dr-links .l1 { stroke: #8fd8c4; stroke-dasharray: 4 5; }
.dr-slot { position: relative; z-index: 1; }
.dr-slot.just { animation: popin .45s cubic-bezier(.3,1.5,.5,1); }
.dr-rt { position: absolute; top: 0; left: 4px; font: 13px var(--font-display); font-style: normal; color: var(--gold); text-shadow: 0 1px 2px #000; }
.dr-slot:not(.on) { animation: dlyGlow 3s ease-in-out infinite; }
.modal-card .dr-offer { margin: 8px 0; }
.dr-bonus { padding: 2px 6px; border-radius: 6px; background: #1b1340; color: var(--gold); font-size: 10px; font-weight: 800; }
.tr-score { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tr-score b { font: 20px var(--font-display); color: var(--ink); }
.tr-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--danger); overflow: hidden; } .tr-bar i { display: block; height: 100%; background: var(--hit); transition: width .5s; }
.tr-bot .tr-card:not(.back) { animation: trFlip .55s ease both; }
@keyframes trFlip { 0% { transform: perspective(700px) rotateY(90deg); } 100% { transform: perspective(700px) rotateY(0); } }
.tr-table.shown.win .tr-me .tr-card { box-shadow: 0 0 0 4px var(--hit); }
.tr-table.shown.lose .tr-bot .tr-card { box-shadow: 0 0 0 4px var(--danger); }
.tr-pick .btn { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; }
.tr-pick .btn b { font: 18px var(--font-display); color: var(--gold); }
.tr-think i { font-style: normal; animation: fadeIn 1s infinite alternate; } .tr-think i:nth-child(2) { animation-delay: .3s; } .tr-think i:nth-child(3) { animation-delay: .6s; }
.vs-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; width: 100%; margin-top: 8px; }
.vs-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.08); }
.vs-dots i.on { background: #ff8a9a; box-shadow: 0 0 0 1.5px rgba(255,138,154,.6); }
.vs-dots i.out { background: #555; animation: vsOut .8s ease both; }
@keyframes vsOut { 0% { background: #ff8a9a; transform: scale(1.4); } 100% { background: #3a3358; transform: scale(.7); } }
.vs-chart { display: grid; gap: 4px; text-align: left; } .vs-chart small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.vs-b { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 6px; font-size: 12px; }
.vs-b i { height: 10px; border-radius: 5px; background: #8d84c4; animation: vsGrow .7s ease both; } .vs-b.out i { background: var(--danger); } .vs-b.me i { background: var(--gold); }
@keyframes vsGrow { from { width: 0 !important; } }
.vs-b b { text-align: right; }
.dt-board { position: relative; }
.dt-board.hit { animation: ngOk .5s ease; }
.dt-pop { position: absolute; top: -6px; right: -10px; padding: 2px 8px; border-radius: 10px; background: var(--gold); color: #2a1d00; font: 18px var(--font-display); font-style: normal; animation: dtPop 1s ease forwards; }
@keyframes dtPop { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.25); opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
.dt-darts { display: flex; justify-content: center; gap: 4px; font-size: 18px; color: var(--gold); }
.dt-darts i { font-style: normal; transform: rotate(-30deg); } .dt-darts i.used { color: rgba(255,255,255,.18); }
.tile-done { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; background: var(--hit); color: #06210f; font-style: normal; font-weight: 900; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* повтор гола */
.rp-pitch { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12); background: #1f7a3a; }
.rp-svg { display: block; width: 100%; height: auto; }
.rp-svg line { stroke-linecap: round; stroke-dasharray: var(--L); stroke-dashoffset: var(--L); animation: rpDraw linear forwards; }
.rp-svg .rp-P { stroke: #fff; stroke-width: .7; }
.rp-svg .rp-C { stroke: #ffcf3a; stroke-width: .8; stroke-dasharray: 1.4 1.1; stroke-dashoffset: 0; animation: rpFade .3s ease forwards; opacity: 0; }
.rp-svg .rp-D { stroke: #ff9fd8; stroke-width: .9; }
.rp-svg .rp-S { stroke: #ff4d4d; stroke-width: 1.1; }
@keyframes rpDraw { to { stroke-dashoffset: 0; } }
@keyframes rpFade { to { opacity: 1; } }
.rp-dot { fill: #5b8cff; stroke: #fff; stroke-width: .5; animation: rpPop .25s ease-out; transform-box: fill-box; transform-origin: center; }
.rp-shooter { fill: #ffcf3a; stroke: #1b1240; }
@keyframes rpPop { from { transform: scale(0); } }
.rp-ball { fill: #fff; stroke: #1b1240; stroke-width: .4; filter: drop-shadow(0 0 1.2px rgba(0,0,0,.6)); }
.rp-goal { position: absolute; right: 12%; top: 50%; transform: translateY(-50%); font: 26px var(--font-display); color: #ffcf3a; text-shadow: 0 3px 0 #0e0828; animation: rpGoal .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes rpGoal { from { transform: translateY(-50%) scale(.3); opacity: 0; } }
.rp-again { position: absolute; left: 8px; bottom: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(14,8,40,.55); color: #fff; font-size: 18px; cursor: pointer; }
.rp-hints { display: grid; gap: 5px; margin: 10px 0 2px; }
.rp-hints span { padding: 7px 10px; border-radius: 10px; background: var(--night-2); color: var(--muted); font-size: 13px; }
.rp-hints span.on { color: var(--ink); background: var(--night-3); animation: rpPop .25s ease-out; }
.rp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rp-opts .ng-opt { min-height: 48px; font-weight: 700; font-size: 14px; line-height: 1.15; padding: 6px 8px; }
.rp-note { text-align: center; margin-top: 4px; }

/* угадай счёт */
.sc-card { display: grid; gap: 12px; padding: 14px 12px; border-radius: 16px; background: linear-gradient(160deg, var(--night-3), var(--night-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sc-meta { text-align: center; color: var(--muted); font-size: 13px; }
.sc-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.sc-team { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 14px; line-height: 1.15; }
.sc-flag { font-family: var(--font-display); font-size: 40px; line-height: 1; }
.sc-mid { display: grid; justify-items: center; gap: 4px; text-align: center; }
.sc-mid small { color: var(--muted); font-size: 11px; }
.sc-real { font: 40px var(--font-display); color: var(--gold); animation: rpPop .3s ease-out; }
.sc-mine { color: var(--muted); font-size: 12px; }
.sc-pick { display: flex; align-items: center; gap: 6px; } .sc-pick i { font: 26px var(--font-display); font-style: normal; color: var(--muted); }
.sc-st { display: grid; justify-items: center; gap: 2px; }
.sc-st b { font: 32px var(--font-display); min-width: 34px; text-align: center; }
.sc-st button { width: 38px; height: 30px; border: 0; border-radius: 9px; background: var(--night); color: var(--ink); font-size: 18px; font-weight: 800; cursor: pointer; }
.sc-st button:active { transform: scale(.94); }
.sc-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; }
.sc-goals div { display: grid; gap: 3px; align-content: start; } .sc-goals div:last-child { text-align: right; }
.sc-hint { margin: 0; text-align: center; color: var(--gold); font-size: 13px; }
.sc-rule { text-align: center; font-size: 12px; }

/* номер в истории */
.nh-dots { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }
.nh-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--night-3); }
.nh-dots i.ok { background: var(--hit); } .nh-dots i.bad { background: var(--danger); } .nh-dots i.now { box-shadow: 0 0 0 2px var(--gold); }
.nh-card { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 4px 0 8px; }
.nh-num { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--gold); color: #2a1d00; font: 34px var(--font-display); }
.nh-q { margin: 6px 0 12px; text-align: center; font-size: 17px; font-weight: 700; line-height: 1.3; } .nh-q b { color: var(--gold); }
.nh-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nh-opts .ng-opt { justify-content: flex-start; font-size: 13px; text-align: left; line-height: 1.15; }
.nh-opts.nums .ng-opt { justify-content: center; }
.nh-big { font: 28px var(--font-display); }
.nh-fact { text-align: center; }

/* машина времени */
.tm-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 10px 0; }
.tm-card { display: grid; justify-items: center; gap: 4px; padding: 16px 8px; border: 0; border-radius: 18px; background: var(--night-2); color: var(--ink); text-align: center; cursor: pointer; transition: transform .15s, box-shadow .2s; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tm-card:active { transform: scale(.97); }
.tm-card.win { box-shadow: inset 0 0 0 3px var(--hit); } .tm-card.lose { opacity: .65; } .tm-card.picked.lose { box-shadow: inset 0 0 0 3px var(--danger); opacity: 1; }
.tm-ask { text-align: center; } .tm-hint { text-align: center; font-size: 12px; }
.tm-card b { font-size: 14px; line-height: 1.15; } .tm-year { color: var(--muted); font-size: 12px; }
.tm-elo { font: 30px var(--font-display); font-style: normal; color: var(--gold); }
.tm-vs { font: 18px var(--font-display); font-style: normal; color: var(--muted); }
.tm-btns .btn { flex: 1; } .tm-res { text-align: center; }

/* фэнтези-пятёрка */
.fp-budget { position: relative; height: 26px; border-radius: 13px; background: var(--night-2); overflow: hidden; margin-bottom: 8px; }
.fp-budget i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #00ff85, #2fd3e0); transition: width .3s; }
.fp-budget.over i { background: var(--danger); }
.fp-budget span { position: relative; display: block; text-align: center; line-height: 26px; font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.fp-slot { margin: 6px 0; } .fp-slot small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.fp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 3px; }
.fp-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 3px; border: 0; border-radius: 12px; background: var(--night-2); color: var(--ink); cursor: pointer; font-size: 11px; }
.fp-card b { font-size: 11px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-card em { font-style: normal; color: #00ff85; font-weight: 800; }
.fp-card.on { background: #38003c; box-shadow: inset 0 0 0 2px #00ff85; }
.fp-card.bot::after { content: '🤖'; position: absolute; top: 2px; left: 4px; font-size: 11px; }
.fp-pts { position: absolute; top: 2px; right: 4px; padding: 0 5px; border-radius: 8px; background: var(--gold); color: #2a1d00; font-weight: 900; font-size: 11px; }
.fp-line { margin: 4px 0; font-size: 12px; text-align: left; }

/* приветствие, лента разделов, недавние */
.hub-emo { font-family: var(--font-display); font-size: 1.1em; }
#hub-hello b { color: var(--gold); font-weight: 800; }
.cat-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; margin: 2px -16px 8px; padding: 8px 16px 10px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(var(--night) 75%, rgba(27,19,64,0)); -webkit-overflow-scrolling: touch; }
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav button { position: relative; flex: none; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--night-3); color: var(--ink); font: 700 13px var(--font-body); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .25s, color .25s, transform .25s cubic-bezier(.3,1.8,.5,1); }
.cat-nav button::after { content: attr(data-n); margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,.12); font-size: 11px; }
.cat-nav button.on { background: var(--gold); color: #2a1d00; transform: scale(1.04); box-shadow: 0 4px 14px rgba(255,207,58,.35); }
.cat-nav button.on::after { background: rgba(0,0,0,.12); }
.cat-nav button:active { transform: scale(.94); }
.games-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 4px 0 12px; padding: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(8,10,22,.7); }
.games-mode-switch button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: 800 14px var(--font-body); cursor: pointer; }
.games-mode-switch button.on { color: #14131a; background: linear-gradient(135deg, #ffe17c, #ffbf2f); box-shadow: 0 4px 14px rgba(255,191,47,.2); }
.gms-live { padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.13); font-size: 11px; }
.online-presence { display: flex; align-items: center; gap: 8px; margin: 3px 0 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.online-presence b { margin-left: auto; color: var(--ink); font: 900 20px var(--font-display); font-variant-numeric: tabular-nums; }
.online-presence button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--night-3); color: var(--ink); font-size: 21px; cursor: pointer; }
.online-pulse { width: 9px; height: 9px; border-radius: 50%; background: #30e88a; box-shadow: 0 0 0 4px rgba(48,232,138,.13), 0 0 12px rgba(48,232,138,.7); }
.online-note { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.online-game-list { display: grid; gap: 9px; }
.online-game-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: linear-gradient(115deg,var(--night-2),var(--night-3)); background: linear-gradient(115deg, color-mix(in srgb, var(--oc1) 20%, var(--night-2)), color-mix(in srgb, var(--oc2) 20%, var(--night-2))); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgba(0,0,0,.16); transition: transform .15s ease, border-color .15s ease; }
.online-game-card:active { transform: scale(.985); border-color: var(--oc1); }
.online-game-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg,var(--oc1),var(--oc2)); font-size: 23px; box-shadow: inset 0 1px rgba(255,255,255,.24); }
.online-game-card > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.online-game-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.online-game-card small { color: var(--muted); font-size: 12px; }
.online-game-card small i { color: #42ed97; font-style: normal; font-weight: 900; }
.online-game-card > em { color: var(--gold); font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; }
.cat-lead { margin: 0 2px 10px; color: var(--muted); font-size: 13px; }
.recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.recent-tile { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border: 0; border-radius: 16px; background: linear-gradient(160deg, var(--c1), var(--c2)); color: #fff; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.recent-tile .tile-ico { width: 40px; height: 40px; }
.recent-tile b { font-size: 11px; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }

/* ник */
.nick-input { width: 100%; box-sizing: border-box; margin: 8px 0 10px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--night); color: var(--ink); font: 700 18px inherit; text-align: center; box-shadow: inset 0 0 0 2px var(--night-3); }
.nick-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.nick-emoji { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 4px; }
.nick-emoji button { aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--night); font-size: 22px; cursor: pointer; }
.nick-emoji button.on { background: var(--gold); transform: scale(1.06); }
.prof-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; padding: 12px 14px; border-radius: 16px; background: var(--night-2); }
.prof-user #prof-nick { display: grid; font-size: 18px; } .prof-user small { color: var(--muted); font-size: 12px; font-weight: 400; }
.prof-user .btn { flex: none; padding: 8px 14px; }

/* донат */
.donate-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 14px 16px; border: 0; border-radius: 18px; color: #2a1d00; text-align: left; cursor: pointer;
  background: linear-gradient(120deg, #ffe27a, #ffcf3a 45%, #ffb21a); box-shadow: 0 5px 0 #b97f00; }
.donate-card b { display: block; font-size: 16px; } .donate-card small { font-size: 12px; opacity: .8; }
.don-star { font-size: 30px; animation: donPulse 1.8s ease-in-out infinite; }
@keyframes donPulse { 50% { transform: scale(1.15) rotate(10deg); } }
.don-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
.don-btn { display: grid; justify-items: center; padding: 12px 4px; border: 0; border-radius: 14px; background: var(--night); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 2px #ffcf3a55; }
.don-btn b { font: 22px var(--font-display); color: #ffcf3a; } .don-btn:active { transform: scale(.95); }
.don-only { font-size: 11px; color: #ffcf3a; }
.frame-host[data-frame="sponsor"] { box-shadow: 0 0 0 3px #ffcf3a, 0 0 0 6px #fff3c4; animation: donGlow 2.4s ease-in-out infinite; }
@keyframes donGlow { 50% { box-shadow: 0 0 0 3px #ffcf3a, 0 0 0 6px #fff3c4; } }

/* ---------- вкладки главной ---------- */
.hub-panel.slide-l { animation: panelL .34s cubic-bezier(.2,.8,.2,1); }
.hub-panel.slide-r { animation: panelR .34s cubic-bezier(.2,.8,.2,1); }
@keyframes panelL { from { opacity: 0; transform: translateX(28px); } }
@keyframes panelR { from { opacity: 0; transform: translateX(-28px); } }
:is(.hub-panel.slide-l, .hub-panel.slide-r, .cat.cat-in) :is(.tile-card, .game-card, .auction-hero, .runner-hero, .rank-card, .friends-teaser, .all-games) {
  animation: rise .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms);
}
.cat.cat-in .cat-lead { animation: fadeIn .3s ease; }
.all-games, .friends-teaser { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 14px 16px; border: 0; border-radius: 16px; color: var(--ink); text-align: left; cursor: pointer; }
.all-games { background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 0 #120b30; }
.all-games > span { font-size: 24px; }
.all-games b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
.all-games small { flex: 1; color: var(--muted); font-size: 12px; }
.all-games i { font-style: normal; font-size: 20px; color: var(--gold); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.friends-teaser { position: relative; overflow: hidden; margin: 14px 0; background: linear-gradient(120deg, #ff5f6d, #5b3cc4); box-shadow: 0 6px 0 #2a1866, 0 10px 30px rgba(91,60,196,.35); }
.friends-teaser::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.friends-teaser b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 18px; text-transform: uppercase; }
.friends-teaser small { color: #ffe9f0; font-size: 12px; }
.ft-vs { display: flex; align-items: center; gap: 4px; font-size: 28px; }
.ft-vs i { font: 400 13px var(--font-display); font-style: normal; padding: 3px 6px; border-radius: 8px; background: #fff; color: #5b3cc4; animation: vsBeat 1.2s ease-in-out infinite; }
@keyframes vsBeat { 50% { transform: scale(1.18) rotate(-6deg); } }
.ft-vs span:first-child { animation: bobL 2s ease-in-out infinite; } .ft-vs span:last-child { animation: bobR 2s ease-in-out infinite; }
@keyframes bobL { 50% { transform: translateX(3px) rotate(8deg); } }
@keyframes bobR { 50% { transform: translateX(-3px) rotate(-8deg); } }

/* живые плитки: блик при нажатии, иконка подпрыгивает */
.tile-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.28), transparent 60%); opacity: 0; transition: opacity .4s; }
.tile-card:active::after { opacity: 1; transition: none; }
.tile-card:active .tile-ico { transform: scale(.9) rotate(-4deg); }
.tile-card .tile-ico { transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
@media (hover: hover) { .tile-card:hover .tile-ico { transform: translateY(-3px) rotate(-3deg); } .tile-card:hover { transform: translateY(-2px); } }
#featured .tile-card .tile-ico { animation: icoFloat 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.7s); }
@keyframes icoFloat { 50% { transform: translateY(-3px); } }
.coins.bump .coin { animation: coinSpin .6s ease; }
@keyframes coinSpin { 50% { transform: rotateY(180deg) scale(1.2); } }
.brand-title { animation: titleIn .7s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes titleIn { from { opacity: 0; transform: translateY(-10px) scale(.96); letter-spacing: .08em; } }

/* ---------- Футбольная дуэль ---------- */
.du-hero { display: grid; justify-items: center; gap: 6px; padding: 18px 14px; border-radius: 20px; text-align: center; background: linear-gradient(140deg, #ff5f6d, #5b3cc4); box-shadow: 0 8px 30px rgba(91,60,196,.35); }
.du-hero p { margin: 0; color: #fff; font-size: 14px; }
.du-hero-vs { display: flex; align-items: center; gap: 14px; font-size: 44px; }
.du-hero-vs i { font: 400 18px var(--font-display); font-style: normal; padding: 5px 10px; border-radius: 10px; background: #fff; color: #5b3cc4; animation: vsBeat 1.2s ease-in-out infinite; }
.du-hero-vs span:first-child { animation: bobL 2s ease-in-out infinite; } .du-hero-vs span:last-child { animation: bobR 2s ease-in-out infinite; }
.du-modes { display: grid; gap: 10px; margin: 14px 0; }
.du-mode { display: flex; align-items: center; gap: 12px; padding: 14px; border: 0; border-radius: 16px; background: var(--night-2); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 5px 0 #120b30; animation: rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + 100ms); transition: transform .2s; }
.du-mode:active { transform: translateY(3px) scale(.98); }
.du-mode b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 16px; text-transform: uppercase; }
.du-mode small { color: var(--muted); font-size: 12px; }
.du-mi { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; font-size: 24px; background: var(--night-3); }
.du-mode.live .du-mi { background: linear-gradient(140deg, #ffcf3a, #ff8a2a); animation: pulseGlow 2s ease-in-out infinite; }
.du-mode.link .du-mi { background: linear-gradient(140deg, #2fd3e0, #5b8cff); }
.du-mode.hot .du-mi { background: linear-gradient(140deg, #8fd8c4, #34c46a); }
@keyframes pulseGlow { 50% { box-shadow: 0 0 0 4px rgba(255,207,58,.25); } }
.du-h { margin: 16px 2px 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.du-hist { display: grid; gap: 6px; }
.du-hrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--night-2); font-size: 13px; }
.du-hrow b { font-family: var(--font-display); font-weight: 400; }
.du-hrow i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--night-3); color: var(--muted); }
.du-hrow.win i { background: var(--hit); color: #06210f; } .du-hrow.lose i { background: #6b2a3a; color: #ffd0d8; } .du-hrow.draw i { background: var(--gold); color: #2a1d00; }

.du-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.du-pl { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--night-2); transition: box-shadow .3s, transform .3s; }
.du-pl.right { grid-template-columns: 1fr auto; text-align: right; }
.du-pl.right .du-emo { grid-column: 2; grid-row: 1 / 3; }
.du-pl.right b, .du-pl.right .du-sc { grid-column: 1; }
.du-pl.on { box-shadow: inset 0 0 0 2px var(--gold); transform: scale(1.03); }
.du-emo { grid-row: 1 / 3; font-size: 26px; }
.du-pl b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.du-sc { font: 400 20px var(--font-display); font-style: normal; color: var(--ink); }
.du-pl.du-pop .du-sc { animation: numPop .5s ease; color: var(--gold); }
.du-gain { position: absolute; top: -6px; left: 50%; font: 400 15px var(--font-display); font-style: normal; color: var(--hit); text-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; animation: gainUp 1.2s ease-out forwards; }
@keyframes gainUp { from { opacity: 0; transform: translate(-50%, 8px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } to { opacity: 0; transform: translate(-50%, -30px); } }
.du-vs { font: 400 14px var(--font-display); font-style: normal; color: var(--gold); }
.du-flag-ok { position: absolute; top: -8px; right: -4px; font-style: normal; font-size: 16px; animation: popin .4s cubic-bezier(.3,1.5,.5,1); }
.du-pl:not(.right) .du-flag-ok { right: auto; left: -4px; }

.du-q { animation: qIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes qIn { from { opacity: 0; transform: translateX(30px); } }
.du-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; }
.du-kind { padding: 2px 8px; border-radius: 99px; background: var(--night-3); color: var(--ink); }
.du-timer { height: 6px; margin: 8px 0 12px; border-radius: 99px; background: var(--night-3); overflow: hidden; }
.du-timer i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5f6d, #ffcf3a 40%, #34c46a); transform-origin: left; animation: tbTime var(--T) linear forwards; }
.du-timer.stop i { animation-play-state: paused; }
.du-media { display: grid; justify-items: center; margin-bottom: 8px; }
.du-media .ava-l { width: 76px; height: 76px; }
.du-ava { width: 128px; height: 128px; box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.2); animation: popin .5s cubic-bezier(.3,1.5,.5,1); }
.du-ava b { font-size: 46px; }
.du-card { display: grid; gap: 4px; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; text-align: center; background: linear-gradient(160deg, var(--night-3), var(--night-2)); animation: popin .45s cubic-bezier(.3,1.5,.5,1); }
.du-card small { color: var(--muted); font-size: 12px; }
.du-card b { font-size: 17px; }
.du-text { margin: 6px 0 12px; text-align: center; font-size: 17px; line-height: 1.3; }
.du-text b { color: var(--gold); }
.du-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.du-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 10px; border: 0; border-radius: 14px; background: var(--night-2); color: var(--ink);
  font: 700 14px var(--font-body); line-height: 1.2; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 0 #120b30;
  animation: optIn .35s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i) * 60ms + 120ms); transition: transform .15s, background .25s, opacity .3s; }
@keyframes optIn { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.du-opt:active:not(:disabled) { transform: translateY(3px) scale(.97); }
.du-opts.two .du-opt { flex-direction: column; min-height: 120px; }
.du-opts.two .du-opt small { display: block; color: var(--gold); font-size: 12px; }
.du-opt .crest-s { flex: none; }
.du-opt.picked { box-shadow: inset 0 0 0 3px var(--gold), 0 4px 0 #120b30; }
.du-opt.right { background: var(--hit); color: #06210f; animation: ngOk .6s ease; }
.du-opt.wrong { background: #8a2a3d; animation: shakeBad .45s ease; }
.du-opt.dim { opacity: .45; }
.du-num { font: 400 22px var(--font-display); }
.du-flag { font-size: 22px; }
.du-marks { position: absolute; top: -9px; right: -4px; display: flex; gap: 2px; }
.du-marks em { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--night); font-style: normal; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.4); animation: popin .4s cubic-bezier(.3,1.5,.5,1) both; }
.du-marks em:nth-child(2) { animation-delay: .12s; }
.du-after { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 13px; animation: fadeIn .3s ease; }
.du-waiting { display: inline-block; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.du-intro, .du-end, .du-pass { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; text-align: center; animation: rise .4s cubic-bezier(.2,.8,.2,1); }
.du-intro h3, .du-pass h3 { margin: 0; font-size: 20px; }
.du-intro h3 b, .du-pass h3 b { color: var(--gold); }
.du-intro p, .du-pass p { margin: 0; color: var(--muted); font-size: 14px; max-width: 340px; }
.du-intro .btn, .du-end .btn, .du-pass .btn { width: 100%; max-width: 340px; }
.du-big-emo { font-size: 64px; animation: popin .5s cubic-bezier(.3,1.5,.5,1), icoFloat 2.4s ease-in-out .5s infinite; }
.du-go { animation: pulseGlow 1.6s ease-in-out infinite; }
.du-name { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; padding: 6px 12px; border-radius: 14px; background: var(--night-2); }
.du-name span { font-size: 24px; }
.du-name input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: var(--ink); font: 700 17px var(--font-body); outline: none; }
.du-small { font-size: 12px !important; }
.du-join { display: flex; gap: 8px; width: 100%; max-width: 340px; }
.du-join input { flex: 1; min-width: 0; padding: 12px; border: 0; border-radius: 14px; background: var(--night-2); color: var(--ink); font: 400 20px var(--font-display); text-align: center; letter-spacing: .3em; text-transform: uppercase; box-shadow: inset 0 0 0 2px var(--night-3); outline: none; }
.du-join input:focus { box-shadow: inset 0 0 0 2px var(--gold); }
.du-join .btn { width: auto; }
.du-code { display: flex; gap: 6px; }
.du-code b { display: grid; place-items: center; width: 46px; height: 56px; border-radius: 12px; background: var(--ink); color: var(--night); font: 400 28px var(--font-display); animation: flipin .5s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i) * 90ms); }
.du-radar { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.du-radar span { position: relative; z-index: 1; font-size: 44px; }
.du-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: radar 2.4s ease-out infinite; opacity: 0; }
.du-radar i:nth-child(2) { animation-delay: .8s; } .du-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes radar { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.1); opacity: 0; } }
.du-count { display: grid; place-items: center; min-height: 320px; }
.du-count b { font: 400 120px var(--font-display); color: var(--gold); text-shadow: 0 8px 30px rgba(255,207,58,.45); animation: countPop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes countPop { from { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } }
.du-end-big { font: 400 72px var(--font-display); color: var(--gold); line-height: 1; animation: popin .5s cubic-bezier(.3,1.5,.5,1); }
.du-end > p { margin: 0; color: var(--muted); }
.du-end-txt { color: var(--ink) !important; font-size: 15px; }
.du-end .du-board { width: 100%; }
.du-res { margin: 4px 0 0; font-size: 28px; animation: countPop .6s cubic-bezier(.2,1.4,.4,1); }
.du-end.win .du-res { color: var(--gold); }
.du-end.lose .du-res { color: #ff8a9a; }
.du-re-note:empty { display: none; }
.du-re-note { color: var(--gold) !important; animation: blink 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .friends-teaser::before, .all-games i, .ft-vs *, .du-hero-vs *, #featured .tile-card .tile-ico, .du-go, .du-mode.live .du-mi, .du-big-emo { animation: none !important; }
}

/* вкладка «С другом» */
.duel-hero { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(140deg, #ff5f6d, #5b3cc4 70%); box-shadow: 0 8px 0 #2a1866, 0 14px 34px rgba(91,60,196,.35); }
.duel-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); transform: translateX(-100%); animation: shine 3.6s ease-in-out infinite; pointer-events: none; }
.dh-top { display: flex; gap: 12px; align-items: center; color: #fff; }
.dh-top b { display: block; font: 400 22px var(--font-display); text-transform: uppercase; }
.dh-top small { color: #ffe9f0; font-size: 13px; }
.dh-ico { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.18); font-size: 30px; animation: vsBeat 1.6s ease-in-out infinite; }
.dh-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dh-modes button { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border: 0; border-radius: 14px; background: rgba(20,13,50,.55); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  animation: rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 80ms + 150ms); transition: transform .2s cubic-bezier(.3,1.8,.5,1); }
.dh-modes button:active { transform: scale(.94); }
.dh-modes span { font-size: 26px; }
.dh-modes b { font: 400 14px var(--font-display); text-transform: uppercase; }
.dh-modes small { color: #d9d2ff; font-size: 11px; }
.dh-stat { color: #fff; opacity: .85; font-size: 12px; text-align: center; }
.dh-stat:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .duel-hero::before, .dh-ico { animation: none; } }

/* Машина времени: карточки выезжают с боков, победитель светится */
.tm-new ~ .tm-duel .tm-card:first-child { animation: tmL .45s cubic-bezier(.2,1.2,.4,1) both; }
.tm-new ~ .tm-duel .tm-card:last-child { animation: tmR .45s cubic-bezier(.2,1.2,.4,1) both; }
.tm-new ~ .tm-duel .tm-vs { animation: vsBeat .6s ease .3s both; }
@keyframes tmL { from { opacity: 0; transform: translateX(-40px) rotate(-4deg); } }
@keyframes tmR { from { opacity: 0; transform: translateX(40px) rotate(4deg); } }
.tm-card.win { animation: tmWin .7s ease; }
@keyframes tmWin { 30% { transform: scale(1.06); box-shadow: inset 0 0 0 3px var(--hit); } }
.tm-card.picked.lose { animation: shakeBad .45s ease; }
.tm-elo.pop { animation: numPop .5s ease; }
/* Угадай счёт: настоящий счёт раскрывается табло */
.sc-real { animation: scoreFlip .55s cubic-bezier(.2,1.3,.4,1) !important; }
@keyframes scoreFlip { from { transform: perspective(500px) rotateX(90deg); opacity: 0; } }
.sc-goals span { animation: rise .35s ease both; }
.sc-goals div span:nth-child(2) { animation-delay: .08s; } .sc-goals div span:nth-child(3) { animation-delay: .16s; } .sc-goals div span:nth-child(4) { animation-delay: .24s; } .sc-goals div span:nth-child(n+5) { animation-delay: .32s; }
.sc-st b { display: inline-block; }

/* =====================================================================
   ЕДИНЫЙ СТИЛЬ ЭКРАНОВ ИГР
   Шапка одинаковая, содержимое игры стоит по центру экрана (без пустой нижней половины),
   варианты ответа — одинаковые тёмные кнопки, верно/неверно — одним цветом во всех играх.
   ===================================================================== */
#app > .screen:not(#hub):not(#profile):not(#shop):not(#runner) { min-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - 30px); }
/* центрирование: автоматические отступы у шапки и у невидимого «хвоста» делят свободное место поровну */
#app > .screen:not(#hub):not(#profile):not(#shop):not(#runner):not(#pass-levels):not(#guess):not(#board):not(#admin) > .topbar { margin-bottom: auto; }
#app > .screen:not(#hub):not(#profile):not(#shop):not(#runner):not(#pass-levels):not(#guess):not(#board):not(#admin)::after { content: ''; margin-top: auto; }
/* игры, где список растёт по ходу, оставляем сверху, чтобы поле ввода не «уезжало» */
#ng:has(.ng-top10, .ng-context, .ng-linkup) > .topbar { margin-bottom: 0; }
#ng:has(.ng-top10, .ng-context, .ng-linkup)::after { display: none; }

/* шапка: название в две строки максимум, подзаголовок в одну */
.topbar { min-height: 48px; }
.topbar-title > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; letter-spacing: .01em; }
.topbar-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { transition: transform .2s cubic-bezier(.3,1.8,.5,1); } .back:active { transform: scale(.9); }

/* варианты ответа: один вид во всех играх */
.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 10px 12px;
  border: 0; border-radius: 14px; background: var(--night-2); color: var(--ink);
  font: 700 15px/1.2 var(--font-body); text-transform: none; letter-spacing: 0; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 4px 0 #120b30;
}
:is(.ng-opt, .nat-opt, .btn.ghost.opt):active:not(:disabled) { transform: translateY(3px) scale(.97); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 1px 0 #120b30; }
:is(.ng-opt, .nat-opt, .opt, .du-opt).right { background: var(--hit) !important; color: #06210f !important; box-shadow: 0 4px 0 #1f7a3a  !important; animation: ngOk .6s ease; opacity: 1 !important; }
:is(.ng-opt, .nat-opt, .opt, .du-opt).wrong { background: #b8324a !important; color: #fff !important; box-shadow: 0 4px 0 #6b1726  !important; animation: shakeBad .45s ease; opacity: 1 !important; }
:is(.ng-opt, .nat-opt, .opt):disabled:not(.right):not(.wrong) { opacity: .5; }
.ng-opts, .nat-opts, .tr-opts { gap: 10px !important; }

/* основная кнопка действия — во всю ширину и заметная */
.ng-row .btn.gold, .actions .btn.gold:only-child { min-height: 52px; padding-inline: 22px; font-size: 16px; }

/* заголовок вопроса — одинаковый */
.ng-q, .tm-ask, .du-text { font-size: 19px !important; line-height: 1.25; text-align: center; margin: 4px 0 6px; }
.ng-lead { text-align: center; color: var(--muted); font-size: 13px; }

/* экран итога: одинаковый у всех игр */
.ng-res-ico { width: 72px; height: 72px; border-radius: 20px; }
.ng-res .res-text { margin: 0; color: var(--muted); }
.ng-res .res-text b { color: var(--ink); }
.ng-res.win .ng-res-ico { box-shadow: 0 0 0 3px var(--gold); }
.res-record { padding: 4px 12px; border-radius: 99px; background: var(--gold); color: #2a1d00; font-weight: 800; font-size: 13px; animation: popin .5s cubic-bezier(.3,1.5,.5,1) .35s both; }
.ng-res .player-card { width: 100%; box-sizing: border-box; }
.ng-res .stars { font-size: 34px; }

/* плитки «Связей» и «Бинго» — тёмные, как остальные карточки */
.cn-tile, .bg-cell { background: var(--night-2) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 3px 0 #120b30; }
.cn-tile.on { background: #4a3d93 !important; box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 #120b30; }
.bg-cell.on { background: var(--hit) !important; color: #06210f !important; }
.cn-tile:active, .bg-cell:active:not(:disabled) { transform: scale(.95); }

/* короткие игры: главные карточки крупнее, чтобы занимать экран */
.tm-card { min-height: min(34vh, 260px); align-content: center; border-radius: 22px; }
.tm-card .crest-xl { width: 84px; height: 84px; }
.tm-card b { font-size: 16px; }
.sc-card { padding: 18px 14px !important; }
.sc-flag { font-size: 44px; }
.sc-st b { font-size: 34px; }
.sc-st button { width: 44px; height: 44px; font-size: 22px; }
#compare .player-card, #transfer .player-card { padding: 18px 14px; }
.nh-card { min-height: 160px; }

/* закрытые игры */
.tile-card.locked, .game-card.locked { filter: saturate(.25) brightness(.8); }
.tile-card.locked .tile-ico, .game-card.locked .card-art { opacity: .55; }
.tile-card.locked::before { content: '🔒'; position: absolute; top: 10px; right: 10px; font-size: 18px; }
.lock-note { display: block; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.new-badge { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 99px; background: var(--gold); color: #2a1d00; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .05em; animation: popin .5s cubic-bezier(.3,1.5,.5,1), pulseGlow 1.8s ease-in-out .5s infinite; }
.lock-big { font-size: 56px; animation: popin .5s cubic-bezier(.3,1.5,.5,1); }
.unlock-next { margin: 10px 2px 0; color: var(--muted); font-size: 13px; text-align: center; }
.unlock-next b { color: var(--ink); }
.unlock-next:empty { display: none; }

/* ---------- рейтинг ---------- */
.bd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--night-2); }
.bd-tabs button { padding: 10px 4px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 700 13px var(--font-body); transition: background .25s, color .25s; }
.bd-tabs button.on { background: var(--gold); color: #2a1d00; }
.bd-head { margin: 10px 2px 4px; color: var(--muted); font-size: 12px; text-align: center; }
.bd-you { margin: 6px 0 10px; text-align: center; font-size: 16px; }
.bd-you b { color: var(--gold); font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.bd-you.muted { color: var(--muted); font-size: 13px; }
.bd-list { display: grid; gap: 6px; }
.bd-row { display: grid; grid-template-columns: 36px 30px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--night-2);
  animation: rise .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.bd-row.top { background: linear-gradient(100deg, rgba(255,207,58,.18), var(--night-2) 60%); }
.bd-row.me { box-shadow: inset 0 0 0 2px var(--gold); }
.bd-row.pinned { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); margin-top: 10px; background: #3a2c80; box-shadow: inset 0 0 0 2px var(--gold), 0 8px 24px rgba(0,0,0,.5); }
.bd-place { font: 400 18px var(--font-display); text-align: center; color: var(--muted); }
.bd-row.top .bd-place { font-size: 24px; }
.bd-emo { font-size: 22px; text-align: center; }
.bd-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bd-row em { font-style: normal; font-weight: 800; color: var(--gold); font-size: 13px; white-space: nowrap; }
.bd-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--muted); }
.bd-empty span { font-size: 56px; animation: popin .5s cubic-bezier(.3,1.5,.5,1); }
.bd-empty h3 { margin: 0; color: var(--ink); }
.bd-empty p { margin: 0; max-width: 320px; }
.bd-spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--night-3); border-top-color: var(--gold); animation: spin 0.8s linear infinite; }
.board-teaser { width: 100%; margin-top: 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: linear-gradient(100deg, rgba(255,207,58,.22), var(--night-2) 70%); color: var(--ink); font-size: 14px; text-align: left; box-shadow: inset 0 0 0 1px rgba(255,207,58,.35); }
.board-teaser b { color: var(--gold); }

/* Тепло-холодно: градусник, подсказки, значки совпадений */
.cx-card { position: relative; display: grid; gap: 10px; padding: 18px 16px 16px; border-radius: 20px; text-align: center; background: linear-gradient(160deg, #2b3a66, var(--night-2)); transition: background .6s; overflow: hidden; }
.cx-card.cold { background: linear-gradient(160deg, #24407a, #1b2350); }
.cx-card.cool { background: linear-gradient(160deg, #2f6fe4, #1f2b66); }
.cx-card.warm { background: linear-gradient(160deg, #ff9f2a, #7a3b1a); }
.cx-card.hot { background: linear-gradient(160deg, #ff5a3c, #8a1f2b); }
.cx-card.win { background: linear-gradient(160deg, var(--hit), #1f7a3a); }
.cx-card.cx-pulse { animation: cxPulse .6s ease; }
@keyframes cxPulse { 30% { transform: scale(1.03); } }
.cx-card.cold::after, .cx-card.cool::after { content: '❄'; position: absolute; right: 12px; top: 8px; font-size: 26px; opacity: .35; animation: spinslow 8s linear infinite; }
.cx-card.hot::after, .cx-card.warm::after { content: '🔥'; position: absolute; right: 12px; top: 8px; font-size: 24px; animation: icoFloat 1.2s ease-in-out infinite; }
.cx-temp b { display: block; font: 400 56px/1 var(--font-display); color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,.35); }
.cx-temp small { display: block; margin-top: 6px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; }
.cx-scale { position: relative; height: 12px; border-radius: 6px; background: rgba(0,0,0,.25); }
.cx-scale i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #6fb6ff, #fff 45%, #ffcf3a 70%, #ff5a3c); background-size: 300px 100%; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.cx-scale em { position: absolute; top: -5px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); transition: left .7s cubic-bezier(.2,.8,.2,1); }
.cx-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cx-hints span { padding: 6px 10px; border-radius: 99px; background: var(--night-2); color: var(--muted); font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cx-hints span.on { background: #3a2c80; color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); animation: popin .4s cubic-bezier(.3,1.5,.5,1) both; }
.cx-hints b { color: var(--gold); }
.cx-row { align-items: center; padding: 8px 12px; min-height: 56px; }
.cx-row i { opacity: .35 !important; }
.cx-who { position: relative; display: grid; gap: 3px; min-width: 0; }
.cx-who b { font-size: 14px; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.cx-tags em { padding: 1px 6px; border-radius: 6px; font-style: normal; font-size: 10px; font-weight: 700; background: rgba(0,0,0,.3); color: var(--muted); }
.cx-tags em.ok { background: var(--hit); color: #06210f; }
.cx-tags em.near { background: var(--near); color: #2a1d00; }
.cx-deg { position: relative; margin-left: auto; font: 400 18px var(--font-display) !important; color: #fff; }
.cx-row > .ava { margin: 0 !important; flex: none; }

/* Козыри: карточки FC */
.tc-score { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tc-score b { font: 400 22px var(--font-display); color: var(--ink); }
.tc-pot { margin: 0; text-align: center; color: var(--gold); font-size: 12px; font-weight: 700; animation: popin .4s ease; }
.tc-table { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; perspective: 900px; }
.tc-side { display: grid; gap: 4px; }
.tc-side > small { text-align: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.tc-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 8px 10px; border-radius: 18px 18px 22px 22px; color: #2a1d00; text-align: center;
  background: linear-gradient(160deg, #fff4bf, #ffcf3a 45%, #b98300); box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.4);
  animation: tcDeal .45s cubic-bezier(.2,1.2,.4,1) both; transform-style: preserve-3d; transition: transform .35s, box-shadow .35s, opacity .35s; }
@keyframes tcDeal { from { opacity: 0; transform: translateY(-40px) rotate(-6deg) scale(.9); } }
.tc-side:last-child .tc-card { animation-name: tcDealR; }
@keyframes tcDealR { from { opacity: 0; transform: translateY(-40px) rotate(6deg) scale(.9); } }
.tc-card.silver { background: linear-gradient(160deg, #f4f6fa, #c3c9d6 45%, #7d8596); color: #1b1f2a; }
.tc-card.bronze { background: linear-gradient(160deg, #f6d2b0, #c98c58 45%, #7a4a26); color: #2a1406; }
.tc-card.icon { background: linear-gradient(160deg, #fff, #f0e2ff 30%, #b58cff 60%, #5b3cc4); color: #1b0f40; box-shadow: 0 8px 26px rgba(181,140,255,.55), inset 0 0 0 2px rgba(255,255,255,.6); }
.tc-card.icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 250% 100%; animation: tcShine 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes tcShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.tc-top { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 4px; width: 100%; }
.tc-ovr { grid-row: 1 / 3; font: 400 30px/1 var(--font-display); }
.tc-pos { font-size: 11px; font-weight: 900; text-align: left; }
.tc-flag { grid-column: 3; grid-row: 1; font-size: 16px; }
.tc-top .crest { grid-column: 3; grid-row: 2; justify-self: end; width: 20px; height: 20px; }
.tc-card .ava-l { width: 68px; height: 68px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.tc-name { font-family: var(--font-display); font-weight: 400; font-size: 14px; text-transform: uppercase; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; }
.tc-st { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 5px 2px; border: 0; border-radius: 8px; background: rgba(0,0,0,.12); color: inherit; font: inherit; }
.tc-st em { font: 400 17px var(--font-display); font-style: normal; }
.tc-st i { font-style: normal; font-size: 10px; font-weight: 800; opacity: .75; }
button.tc-st { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 2px 0 rgba(0,0,0,.25); animation: tcPick 1.6s ease-in-out infinite; }
button.tc-st:nth-child(2n) { animation-delay: .2s; } button.tc-st:nth-child(3n) { animation-delay: .4s; }
@keyframes tcPick { 50% { background: rgba(255,255,255,.45); } }
button.tc-st:active { transform: scale(.92); }
.tc-st.hl { background: #1b1340; color: var(--gold); transform: scale(1.08); box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,.4); }
.tc-card.won { box-shadow: 0 0 0 4px var(--hit); transform: translateY(-4px) scale(1.03); }
.tc-card.lost { opacity: .75; transform: scale(.96); }
.tc-card.back { min-height: 100%; align-content: center; background: repeating-linear-gradient(45deg, #2a2160 0 10px, #1b1340 10px 20px); color: var(--gold); box-shadow: inset 0 0 0 3px var(--gold), 0 8px 22px rgba(0,0,0,.4); }
.tc-logo { font-size: 46px; animation: icoFloat 2.4s ease-in-out infinite; }
.tc-card.back small { font: 400 12px var(--font-display); text-transform: uppercase; }
.tc-table.shown .tc-side:last-child .tc-card { animation: tcFlip .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tcFlip { from { transform: rotateY(90deg); } }
.tc-table.fly-me .tc-side:last-child .tc-card { transition: transform .4s ease-in, opacity .4s; transform: translateX(-110%) rotate(-12deg) scale(.6); opacity: 0; }
.tc-table.fly-bot .tc-side:first-child .tc-card { transition: transform .4s ease-in, opacity .4s; transform: translateX(110%) rotate(12deg) scale(.6); opacity: 0; }
.tc-table.fly-pot .tc-card { transition: transform .4s ease-in, opacity .4s; transform: translateY(-60px) scale(.5); opacity: 0; }
.tc-foot { display: grid; gap: 8px; justify-items: center; min-height: 92px; }
.tc-res { margin: 0; text-align: center; font-weight: 800; }
.tc-res.win { color: var(--hit); } .tc-res.lose { color: #ff8a9a; } .tc-res.draw { color: var(--gold); }
.tc-foot .btn { width: 100%; }
.tc-table { align-items: stretch; }
.tc-side { grid-template-rows: auto 1fr; }
.tc-card { min-height: 262px; align-content: start; }
.tc-card.back { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 262px; height: 100%; box-sizing: border-box; }

/* Дартс: мишень и дротики */
.dt-wrap { position: relative; width: min(64vw, 250px); margin: 0 auto; }
.dt-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.dt-score { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dt-score b { font: 400 46px/1 var(--font-display); color: #fff; text-shadow: 0 0 6px #000, 0 3px 12px #000; }
.dt-score span { font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px #000; }
.dt-wrap.hit .dt-svg { animation: dtShake .35s ease .35s; }
@keyframes dtShake { 30% { transform: rotate(1.5deg); } 70% { transform: rotate(-1deg); } }
.dt-dart.fresh { animation: dtFly .45s cubic-bezier(.3,.1,.4,1) both; }
@keyframes dtFly { from { transform: translate(calc(var(--x) + 60px), calc(var(--y) + 160px)) scale(2.4); opacity: 0; } 60% { opacity: 1; } }
.dt-n { font: 400 12px var(--font-display); fill: #ffcf3a; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.dt-dart.bad { opacity: .75; }
.dt-wrap .dt-pop { top: 4px; right: 4px; animation-delay: .35s; }

/* =====================================================================
   ГЛАВНАЯ v2: компактная шапка, короткая главная, игры списком, спокойные заголовки
   ===================================================================== */
/* шапка: аватар, ник, звание с тонкой полоской опыта и монеты */
.hub-head { position: sticky; top: 0; z-index: 25; align-items: center; margin: 0 -16px; padding: 8px 16px 10px;
  background: linear-gradient(var(--night) 80%, rgba(27,19,64,0)); }
.me-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.me-ava { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 24px;
  background: radial-gradient(circle at 40% 30%, #4a3d93, var(--night-2)); box-shadow: inset 0 0 0 2px rgba(255,207,58,.6); }
.me-txt { display: grid; gap: 2px; min-width: 0; }
.me-txt b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.me-txt small span:first-child { color: var(--gold); font-weight: 700; }
.me-txt .xpbar { width: 120px; height: 4px; }
.hub-head .coins { flex: none; }
.cat-nav { top: 62px; }

/* бонус и колесо — две маленькие плашки в ряд */
.perks { display: flex; gap: 8px; }
.perks:not(:has(.perk:not([hidden]))) { display: none; }
.perk { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 0; border-radius: 14px; color: var(--ink); text-align: left; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,207,58,.22), var(--night-2)); box-shadow: inset 0 0 0 1px rgba(255,207,58,.45); animation: rise .4s ease both; }
.perk-wheel { background: linear-gradient(135deg, rgba(198,91,216,.3), var(--night-2)); box-shadow: inset 0 0 0 1px rgba(198,91,216,.5); }
.perk:active { transform: scale(.97); }
.perk b { display: block; font-size: 14px; font-weight: 800; }
.perk small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perk-ico { font-size: 26px; animation: icoFloat 2.2s ease-in-out infinite; }
.perk .wheel-mini { width: 32px; height: 32px; border-width: 2px; }

/* «Игрок дня» и задания дня */
.dly-card-title { font-family: var(--font-body); font-weight: 800; font-size: 19px; text-transform: none; }
.dly-progress { gap: 10px; padding: 10px; }
.dp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dp-game { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 0; border-radius: 14px; background: var(--night-2); color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .2s; }
.dp-game:active { transform: scale(.95); }
.dp-game .tile-ico { width: 40px; height: 40px; margin: 0; border-radius: 11px; font-size: 16px; }
.dp-game b { font-size: 11px; font-weight: 800; line-height: 1.15; text-align: center; }
.dp-game.ok { background: rgba(52,196,106,.16); box-shadow: inset 0 0 0 1px rgba(52,196,106,.5); }
.dp-game.ok .tile-ico { opacity: .55; }
.dp-game i { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--hit); color: #06210f; font-style: normal; font-weight: 900; font-size: 11px; }
.dp-foot { display: flex; align-items: center; gap: 8px; }
.dp-foot .dp-bar { flex: 1; }
.dp-foot span { font-size: 12px; font-weight: 800; color: var(--gold); }
.dp-note { text-align: center; color: var(--muted); font-size: 12px; }

/* подборка дня — карусель */
.featured { display: flex; gap: 10px; margin: 0 -16px; padding: 2px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.featured::-webkit-scrollbar { display: none; }
.featured .tile-card { flex: 0 0 148px; scroll-snap-align: start; min-height: 150px; }

/* спокойные заголовки плиток: обычный жирный шрифт вместо капса */
.tile-card b { font-family: var(--font-body); font-weight: 800; font-size: 15px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.tile-card small { font-size: 12px; }
.section-label { margin-top: 14px; }

/* «Игры» и «С другом»: список строками — иконка, название, подпись, справа замок или стрелка */
#panel-games .cat .tiles, #panel-friends > .tiles { grid-template-columns: 1fr; gap: 8px; }
#panel-games .cat .tile-card, #panel-friends > .tiles .tile-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px;
  align-items: center; min-height: 68px; padding: 10px 12px; border-radius: 16px; }
#panel-games .cat .tile-card .tile-ico, #panel-friends > .tiles .tile-card .tile-ico { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; border-radius: 13px; }
#panel-games .cat .tile-card > b, #panel-friends > .tiles .tile-card > b { grid-column: 2; align-self: end; }
#panel-games .cat .tile-card > small, #panel-friends > .tiles .tile-card > small { grid-column: 2; align-self: start; color: var(--muted); font-weight: 600; }
#panel-games .cat .tile-card > .limit-note, #panel-friends > .tiles .tile-card > .limit-note { grid-column: 3; grid-row: 1 / 3; }
#panel-games .cat .tile-card::after, #panel-friends > .tiles .tile-card::after { inset: 0; }
#panel-games .cat .tile-card:not(.locked) > b::after { content: ''; }
#panel-games .cat .tile-card:not(.locked)::before, #panel-friends > .tiles .tile-card::before {
  content: '›'; grid-column: 3; grid-row: 1 / 3; justify-self: end; font-size: 26px; line-height: 1; color: var(--muted); position: static; }
#panel-games .cat .tile-card.locked::before { content: none; }
#panel-games .cat .tile-card .lock-note { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 5px 9px; border-radius: 99px; background: var(--night-3); color: var(--gold); font-size: 12px; white-space: nowrap; }
#panel-games .cat .tile-card .lock-note .ln-long { display: none; }
#panel-games .cat .tile-card .new-badge { position: static; grid-column: 3; grid-row: 1 / 3; }
#panel-games .cat .tile-card .tile-done { position: static; grid-column: 3; grid-row: 1 / 3; }
#panel-games .cat .tile-card.locked { filter: none; opacity: .72; }
#panel-games .cat .tile-card.locked .tile-ico { filter: grayscale(.9); }
.tile-card.locked::before { content: none; }

/* герои пониже и спокойнее */
.runner-hero { padding: 14px; }
.runner-hero b { font-size: 22px; }
.runner-hero small { max-width: 62%; }
.friends-teaser b, .all-games b { font-family: var(--font-body); font-weight: 800; text-transform: none; font-size: 16px; }
.wheel-card b { font-family: var(--font-body); font-weight: 800; text-transform: none; font-size: 16px; }
.perk b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
#panel-games .cat .tile-card > .limit-note, #panel-friends > .tiles .tile-card > .limit-note { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 2px; }
#panel-games .cat .tile-card, #panel-friends > .tiles .tile-card { grid-template-rows: auto auto auto; }
#panel-games .cat .tile-card .tile-ico, #panel-friends > .tiles .tile-card .tile-ico { grid-row: 1 / 4; }
#panel-games .cat .tile-card:not(.locked)::before, #panel-friends > .tiles .tile-card::before, #panel-games .cat .tile-card .lock-note,
#panel-games .cat .tile-card .new-badge, #panel-games .cat .tile-card .tile-done { grid-row: 1 / 4; }

/* иконки игр v2: белая фигура с золотым акцентом, мягкая тень, блик сверху */
.tile-ico { background: linear-gradient(150deg, var(--c1, #5b8cff), var(--c2, #2c4bb0)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.25); }
.tile-ico::after { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%) !important; }
.tile-ico svg { filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.28)); }
.tile-ico .ic-t { font-family: var(--font-display); font-weight: 400; }
.tile-card.duo .tile-ico { --c1: #ff5f9e; --c2: #6a3cc4; }
.tab span { display: grid; place-items: center; height: 24px; }
.tab span svg { width: 24px; height: 24px; }
.tab.on span svg { color: var(--gold); }
.dh-modes span { display: grid; place-items: center; height: 30px; color: var(--gold); }
.dh-modes span svg { width: 28px; height: 28px; }
.dh-ico.tile-ico { width: 56px; height: 56px; margin: 0; animation: none; }
.perk-ico { display: grid; place-items: center; width: 30px; height: 30px; }
.perk-ico svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
/* шапка внутри игр: название обычным жирным шрифтом, без капса */
.topbar-title, .topbar-title > span { font-family: var(--font-body); font-weight: 800; text-transform: none; letter-spacing: 0; }
.topbar-title > span { font-size: 17px; }
.ng-q, .tm-ask, .du-text, .nh-q { font-family: var(--font-body) !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: 0; }
.week-game { position: relative; display: grid; gap: 2px; width: 100%; margin-top: 12px; padding: 14px 76px 14px 16px; border: 0; border-radius: 18px; text-align: left; color: var(--ink); cursor: pointer;
  background: linear-gradient(120deg, #ffcf3a, #ff8a2a); box-shadow: 0 6px 20px rgba(255,159,42,.3); overflow: hidden; }
.week-game .wg-tag { justify-self: start; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.week-game b { color: #1b1000; font-size: 20px; font-weight: 900; }
.week-game small { color: rgba(27,16,0,.75); font-size: 12px; font-weight: 600; }
.week-game .tile-ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(8deg); width: 54px; height: 54px; margin: 0; }
.tile-card.is-soon::before { content: 'скоро'; position: absolute; top: 8px; right: 10px; padding: 1px 7px; border-radius: 99px; background: var(--gold); color: #2a1d00; font-size: 10px; font-weight: 900; }

/* Админка */
.ad-refresh { width: 44px; height: 44px; padding: 0; font-size: 20px; }
.ad-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ad-kpis div { display: grid; gap: 2px; padding: 12px 10px; border-radius: 14px; background: var(--night-2); }
.ad-kpis b { font: 400 24px var(--font-display); }
.ad-kpis small { color: var(--muted); font-size: 11px; line-height: 1.2; }
.ad-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 140px; padding: 10px; border-radius: 14px; background: var(--night-2); }
.ad-bars div { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: end; gap: 4px; }
.ad-bars i { width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--gold), #ff8a2a); }
.ad-bars em { font-style: normal; font-size: 11px; font-weight: 800; }
.ad-bars small { color: var(--muted); font-size: 11px; }
.ad-table { display: grid; gap: 2px; border-radius: 14px; overflow: hidden; }
.ad-row { display: grid; grid-template-columns: 1.8fr repeat(4, 1fr); gap: 6px; padding: 9px 10px; background: var(--night-2); font-size: 12px; align-items: center; }
.ad-row span:not(:first-child) { text-align: right; font-weight: 700; }
.ad-row.head { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.ad-note { margin: 6px 2px 0; color: var(--muted); font-size: 12px; }
.ad-list { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--night-2); font-size: 13px; }
.ad-reports { display: grid; gap: 8px; }
.ad-reports > div { padding: 10px 12px; border-radius: 14px; background: var(--night-2); }
.ad-reports p { margin: 4px 0; font-size: 14px; }
.ad-reports small { color: var(--muted); font-size: 11px; }
.rep-text { min-height: 110px; text-align: left; font-size: 15px; font-weight: 500; resize: vertical; }
.ask-ico { font-size: 48px; }

/* =====================================================================
   ДИЗАЙН v3 «под аватарку»: почти чёрный фон, графит, белый как основной цвет, золото — единственный акцент.
   Заголовки — плотный гротеск Rubik Black, логотип со «смазом» как на аватарке канала.
   ===================================================================== */
:root {
  --night: #0b0b0f; --night-2: #17171d; --night-3: #23232b; --ink: #f5f5f7; --muted: #8d8d99;
  --line: rgba(255,255,255,.08); --danil: #ffffff; --sasha: #e9e9ee;
  --font-display: "Twemoji Country Flags", "Rubik", "Arial Black", Impact, sans-serif;
}
body { background: radial-gradient(90% 40% at 50% -8%, #2a2a33 0%, transparent 70%), var(--night) !important; }
::selection { background: var(--gold); color: #000; }

/* логотип: ДЖЕКСО + смазанные «НЫ» */
.wordmark { font: 900 23px/1 "Rubik", "Arial Black", sans-serif; letter-spacing: -.035em; color: #fff; white-space: nowrap; animation: wmIn .7s cubic-bezier(.2,.9,.2,1) both; }
.wordmark span { position: relative; display: inline-block; color: rgba(255,255,255,.9); filter: blur(.5px);
  text-shadow: 2px 0 1px rgba(255,255,255,.7), 5px 0 2px rgba(255,255,255,.5), 9px 0 4px rgba(255,255,255,.32), 14px 0 6px rgba(255,255,255,.18), 20px 0 9px rgba(255,255,255,.08);
  animation: wmBlur 3.2s ease-in-out 1s infinite; }
@keyframes wmIn { from { opacity: 0; transform: translateX(-14px); filter: blur(6px); } }
@keyframes wmBlur { 0%, 100% { filter: blur(.5px); } 50% { filter: blur(1.4px); } }
.hub-head { background: linear-gradient(var(--night) 78%, rgba(11,11,15,0)) !important; }
.hh-right { display: flex; align-items: center; gap: 8px; }
.me-ava-btn { padding: 0; border: 0; background: none; cursor: pointer; }
.me-ava-btn .me-ava { width: 40px; height: 40px; font-size: 21px; background: var(--night-3); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.coins { background: var(--night-3) !important; box-shadow: inset 0 0 0 1px var(--line)  !important; color: var(--ink); }

/* кнопки: основная — белая, вторичная — графит, золото — для главного действия в игре */
.btn { background: #fff; color: #0b0b0f; box-shadow: 0 3px 0 #9b9ba6; }
.btn:active { box-shadow: 0 1px 0 #9b9ba6; }
.btn.ghost { background: var(--night-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 #050507; }
.btn.sasha { background: var(--night-3); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 3px 0 #050507; }
.btn.gold { color: #111; }

/* поверхности: графит и тонкая граница вместо фиолетовых теней */
.tile-card, .ng-opt, .nat-opt, .btn.ghost.opt, .du-opt, .du-mode, .dp-game, .bd-row, .stat, .ach, .set-row, .cx-row, .du-pl, .tm-card, .sc-card,
.ad-kpis div, .ad-bars, .ad-list, .ad-reports > div, .ad-row, .all-games, .perk, .dly-progress, .modal-card, .player-card, .du-hrow, .bd-tabs, .tc-pot {
  box-shadow: inset 0 0 0 1px var(--line)  !important; }
.tile-card, .ng-opt, .nat-opt, .du-opt, .du-mode, .dp-game { box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 #050507  !important; }
.modal-card { background: #141419 !important; }
.section-label { color: #6f6f7c; letter-spacing: .14em; font-weight: 800; }

/* иконки игр: графитовая подложка, рисунок белый с золотом, цвет игры — только тонкой рамкой */
.tile-ico { background: linear-gradient(160deg, #2a2a33, #1a1a21) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c1, #fff) 55%, transparent), 0 4px 10px rgba(0,0,0,.35)  !important; }
.tile-ico::after { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 50%) !important; }

/* заголовки — плотный гротеск, как на аватарке */
.dly-card-title, .du-res, .ng-res h2, .ng-res-big, .du-end-big, .bd-you b, .cx-temp b, .tc-ovr, .sc-real, .ad-kpis b, .week-game b, .runner-hero b, .duel-hero .dh-top b, .du-hero p ~ *, .tm-elo {
  font-family: "Rubik", "Arial Black", sans-serif !important; font-weight: 900 !important; letter-spacing: -.02em; }
.ng-res h2 { text-transform: uppercase; font-size: 24px; line-height: 1.05; }

/* карточки-герои: чёрно-белые, без радужных градиентов */
.dly-card { background: #fff !important; color: #0b0b0f !important; box-shadow: 0 6px 24px rgba(0,0,0,.45)  !important; }
.dly-card::after { display: none; }
.dly-card small, .dly-card-top b { color: rgba(11,11,15,.6) !important; }
.dly-card-top .tag { background: #0b0b0f; color: #fff; }
.dly-card-top em { color: #c98f00; }
.dly-card-photo { background: #0b0b0f !important; box-shadow: none  !important; }
.dly-card-photo i { color: #fff !important; }
.week-game { background: #fff !important; box-shadow: 0 6px 24px rgba(0,0,0,.45)  !important; }
.week-game b { color: #0b0b0f; text-transform: uppercase; }
.duel-hero, .friends-teaser { background: linear-gradient(150deg, #24242c, #141419) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.4)  !important; }
.duel-hero::before, .friends-teaser::before { background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.06) 48%, transparent 60%) !important; }
.dh-top b, .friends-teaser b { text-transform: uppercase; letter-spacing: -.01em; }
.dh-modes button { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1)  !important; }
.dh-ico.tile-ico { --c1: #ffcf3a; }
.ft-vs i { background: #fff; color: #0b0b0f; }
.auction-hero { background: linear-gradient(150deg, #24242c, #141419) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1)  !important; }
.runner-hero { filter: saturate(.75); }
.donate-card { background: linear-gradient(120deg, #2a2410, #17171d) !important; box-shadow: inset 0 0 0 1px rgba(255,207,58,.35)  !important; color: var(--ink) !important; }
.donate-card small { color: var(--muted) !important; }
.perk, .perk-wheel { background: var(--night-2) !important; }
.perk-bonus { box-shadow: inset 0 0 0 1px rgba(255,207,58,.45)  !important; }

/* нижнее меню: чёрное, активная вкладка — белая */
.tabbar { background: rgba(11,11,15,.94) !important; box-shadow: 0 -1px 0 var(--line)  !important; }
.tab.on { background: #fff !important; color: #0b0b0f !important; }
.tab.on span svg { color: #0b0b0f !important; }

/* выбор раздела, вкладки рейтинга, задания дня */
.cat-nav button.on, .bd-tabs button.on { background: #fff !important; color: #0b0b0f !important; box-shadow: none  !important; }
.dp-bar i { background: linear-gradient(90deg, #fff, var(--gold)) !important; }
.xpbar i { background: linear-gradient(90deg, #fff, var(--gold)) !important; }

/* поле ввода */
.guess-input input, .ng-input input, .nick-input { background: #fff !important; color: #0b0b0f !important; box-shadow: none  !important; }
.suggest { background: #fff !important; }
.suggest button { color: #0b0b0f !important; }
.suggest button.sel { background: #efeff3 !important; }
.suggest small { color: #6b6b78 !important; }
.dly-progress { background: var(--night-2) !important; }
.dp-row.few { grid-template-columns: 1fr; }
.dp-row.few .dp-game { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 8px 12px; text-align: left; }
.dp-row.few .dp-game b { font-size: 15px; text-align: left; }
.dp-row.few .dp-game::after { content: 'Сыграть ›'; margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.dp-row.few .dp-game.ok::after { content: 'Сыграно ✓'; color: var(--hit); }
.dp-row.few .dp-game i { display: none; }
.tag-sasha { background: #fff !important; color: #0b0b0f !important; }
.tag-danil { background: var(--gold) !important; color: #0b0b0f !important; }
.prof-badge, #prof-badge { background: #fff !important; color: #0b0b0f !important; box-shadow: 0 0 0 3px var(--gold)  !important; font-family: "Rubik", "Arial Black", sans-serif !important; font-weight: 900 !important; }
.du-hero { background: linear-gradient(150deg, #24242c, #141419) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1)  !important; }
.du-mode.live .du-mi { background: var(--gold) !important; } .du-mode.link .du-mi, .du-mode.hot .du-mi { background: #fff !important; }

/* =====================================================================
   СПОКОЙНЫЙ РЕЖИМ: без постоянного мерцания и покачиваний. Остаются отклик на нажатие и движения внутри игр.
   ===================================================================== */
.lvl.current, .days i.now, .wheel-mini, .dly-card-photo, .dp-chest, .tb-arrow, .dr-slot:not(.on), .don-star, .all-games i,
.friends-teaser::before, .ft-vs *, #featured .tile-card .tile-ico, .du-hero-vs *, .du-mode.live .du-mi, .du-waiting, .du-big-emo, .du-go,
.du-re-note, .duel-hero::before, .dh-ico, .new-badge, .cx-card::after, .tc-card.icon::after, button.tc-st, .tc-logo, .perk-ico,
.wordmark, .wordmark span, .tr-think i, .dlyGlow, .tile-card .tile-ico, .dh-modes button, .du-mode, .perk, .bd-row, .week-game, .du-marks em {
  animation: none !important; }
/* появление экранов и вкладок — короткое затухание без «прыжков» карточек */
.screen.enter { animation: fadeIn .16s ease !important; }
.screen.enter *, .hub-panel.slide-l, .hub-panel.slide-r, .hub-panel.slide-l *, .hub-panel.slide-r *, .cat.cat-in, .cat.cat-in * { animation: none !important; }
@media (hover: hover) { .tile-card:hover, .tile-card:hover .tile-ico { transform: none !important; } }
.tile-card:active .tile-ico { transform: none !important; }
.wordmark span { filter: blur(.6px); }

/* главная: игры простым списком, как во вкладке «Игры» */
.home-list { display: grid; gap: 8px; }
#featured .tile-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px;
  align-items: center; min-height: 62px; padding: 9px 12px; border-radius: 16px; flex: none; }
#featured .tile-card .tile-ico { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
#featured .tile-card > b { grid-column: 2; align-self: end; }
#featured .tile-card > small { grid-column: 2; align-self: start; color: var(--muted); font-weight: 600; }
#featured .tile-card::before { content: '›'; grid-column: 3; grid-row: 1 / 3; position: static; font-size: 24px; line-height: 1; color: var(--muted); }
#featured .tile-card .tile-done, #featured .tile-card .new-badge, #featured .tile-card .lock-note { display: none; }
.dly-progress { padding: 8px; gap: 8px; }
.dp-foot, .dp-note { display: none; }
.dp-chest { margin-top: 2px; }
.unlock-next { font-size: 12px; }
#panel-home .section-label { margin-top: 18px; }
#panel-home .section-label:first-child { margin-top: 4px; }
.ava-s { width: 36px; height: 36px; flex: none; } .ava-s b { font-size: 13px; }



/* =====================================================================
   ДИЗАЙН «ПОЛЕ»: главная — футбольное поле, каждая игра — фишка игрока, «Игрок дня» — вратарь.
   Остальные экраны — тёмно-зелёные, как стадион вечером. Акценты: жёлтый, красный (нижнее меню).
   ===================================================================== */
:root { --gy: #ffd23f; --gr: #e3262f; --gd: #0d2f1b; --gm: #1d6a3b; --glass: rgba(0,0,0,.28); --gline: rgba(255,255,255,.14);
  --night: #0d2f1b; --night-2: rgba(0,0,0,.28); --night-3: rgba(0,0,0,.36); --muted: rgba(255,255,255,.7); }
body { background: radial-gradient(120% 70% at 50% 0%, var(--gm), var(--gd) 75%) fixed !important; }
body[data-grass] { background:
  radial-gradient(70% 28% at 8% 0%, rgba(255,255,230,.28), transparent 70%), radial-gradient(70% 28% at 92% 0%, rgba(255,255,230,.28), transparent 70%),
  radial-gradient(130% 90% at 50% 55%, transparent 50%, rgba(0,0,0,.5)), repeating-linear-gradient(180deg, #2f8f4e 0 58px, #2a8548 58px 116px) fixed !important; }

/* шапка */
.hub-head { background: transparent !important; box-shadow: none  !important; }
.wordmark { font: 900 24px/1 "Rubik", sans-serif !important; letter-spacing: -.035em; color: #fff; animation: none !important; }
.wordmark span { filter: blur(.9px) !important; animation: none !important; }
.coins, .hh-streak { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px !important; clip-path: none !important;
  background: var(--glass) !important; box-shadow: inset 0 0 0 1px var(--gline)  !important; color: #fff !important; font: 800 15px "Rubik", sans-serif; }
.coins { padding-left: 6px; } .coins b { color: #fff !important; }
.topbar .coins.small { height: 32px; }

/* «Игрок дня» — плашка над полем */
#dly-card { display: flex !important; align-items: center; gap: 12px; min-height: 0 !important; padding: 10px !important; margin-bottom: 4px; border-radius: 20px !important;
  background: rgba(8,26,15,.72) !important; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--gline), 0 10px 30px rgba(0,0,0,.25)  !important; color: #fff !important; overflow: hidden; }
#dly-card::before, #dly-card::after { display: none !important; }
#dly-card .dly-card-photo { position: static !important; flex: none; width: 50px !important; height: 50px !important; border-radius: 15px !important; background: var(--gy) !important; box-shadow: none  !important; transform: none !important; display: grid; place-items: center; }
#dly-card .dly-card-photo i { font: 900 30px/1 "Rubik", sans-serif !important; color: #111 !important; text-shadow: none  !important; }
#dly-card .dly-card-body { position: static !important; display: grid; gap: 2px !important; min-width: 0; flex: 1; }
#dly-card .dly-card-top { gap: 6px !important; }
#dly-card .dly-card-top .tag { background: none !important; color: #fff !important; padding: 0 !important; font: 900 16px/1.1 "Rubik", sans-serif !important; text-transform: none; letter-spacing: 0; }
#dly-card .dly-card-top b { background: none !important; color: #fff !important; padding: 0 !important; font: 900 16px/1.1 "Rubik", sans-serif !important; }
#dly-card .dly-card-top em { background: none !important; color: var(--gy) !important; padding: 0 !important; font: 800 13px "Rubik", sans-serif !important; }
#dly-card .dly-card-title { display: none !important; }
#dly-card small, #dly-card #dly-card-state { background: none !important; padding: 0 !important; color: rgba(255,255,255,.72) !important; font: 600 12.5px/1.25 "Rubik", sans-serif !important; }
#dly-card::after { content: 'Угадать' !important; display: block !important; position: static !important; flex: none; background: var(--gy) !important; color: #111; font: 900 14px "Rubik", sans-serif; padding: 11px 15px; border-radius: 99px; inset: auto !important; }
#dly-card.done::after { content: 'Итог' !important; background: rgba(255,255,255,.18) !important; color: #fff; }
#dly-progress, #week-game, #unlock-next, #ng-daily, #panel-home > .section-label { display: none !important; }

/* поле */
.pitch-wrap { position: relative; height: max(470px, calc(var(--tg-viewport-stable-height, 100vh) - 236px)); margin: 6px 2px 0; }
.pitch-lines { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.75); border-radius: 3px; pointer-events: none; }
.pitch-lines i { position: absolute; border: 2px solid rgba(255,255,255,.75); }
.pl-half { left: -2px; right: -2px; top: 46%; height: 0; border-width: 2px 0 0 !important; }
.pl-circ { left: 50%; top: 46%; width: 112px; height: 112px; margin: -56px; border-radius: 50%; }
.pl-box { left: 50%; width: 190px; margin-left: -95px; height: 70px; }
.pl-box.t { top: -2px; border-top: 0 !important; } .pl-box.b { bottom: -2px; border-bottom: 0 !important; }
.pitch-form { position: absolute; right: 10px; top: 8px; z-index: 1; font: 700 11px "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.pitch { position: absolute; inset: 0; }
.tk { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk .tok { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--k, #ffd23f) 60%, #fff), var(--k, #ffd23f) 60%);
  box-shadow: 0 9px 0 -3px rgba(0,0,0,.18), 0 13px 14px rgba(0,0,0,.25); transition: transform .12s; }
.tk:active .tok { transform: translateY(3px) scale(.95); }
.tk .tok .tile-ico { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: none  !important; }
.tk .tok .tile-ico::after { display: none !important; }
.tk .tok .tile-ico svg { position: absolute; inset: 14%; width: 72% !important; height: 72% !important; filter: drop-shadow(0 2px 0 rgba(0,0,0,.22)); }
.tk em { position: absolute; right: -9px; top: -7px; padding: 3px 6px; border-radius: 99px; border: 2px solid #fff; background: var(--gr); color: #fff; font: 900 10.5px/1 "Rubik", sans-serif; font-style: normal; }
.tk em.ok { background: #1f9d55; } .tk em.new { background: #fff; color: var(--gr); }
.tk b { background: #fff; color: #111; font: 900 11px/1 "Rubik", sans-serif; padding: 5px 8px; border-radius: 99px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.tk.done .tok { filter: saturate(.45) brightness(.92); }
.tk.is-soon { opacity: .55; }
.tk.gk .tok { width: 88px; height: 88px; border: 4px solid var(--gy); overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a2a2a, #0b0b0f);
  box-shadow: 0 0 0 7px rgba(255,210,63,.22), 0 14px 18px rgba(0,0,0,.35); }
.tk.gk img { position: absolute; left: 50%; bottom: -4px; height: 88px; transform: translateX(-50%); filter: brightness(0) invert(1); opacity: .2; }
.tk.gk i { position: absolute; inset: 0; display: grid; place-items: center; font: 900 50px/1 "Rubik", sans-serif; font-style: normal; color: var(--gy); }
.tk.gk b { background: var(--gy); }
.tk.soon { cursor: default; }
.tk.soon .tok { background: rgba(0,0,0,.18); border: 3px dashed rgba(255,255,255,.7); box-shadow: none; }
.tk.soon .tok i { position: absolute; inset: 0; display: grid; place-items: center; font: 900 22px/1 "Rubik", sans-serif; font-style: normal; color: #fff; }
.tk.soon b { background: rgba(0,0,0,.4); color: #fff; }

/* нижнее меню */
.tabbar { background: #0b0b0f !important; box-shadow: 0 -2px 0 var(--gr)  !important; gap: 4px !important; }
.tab { color: #85858f !important; font: italic 900 10.5px/1 "Rubik", sans-serif !important; text-transform: uppercase; border-radius: 0 !important; max-width: none !important; }
.tab span { transform: none !important; } .tab span svg { width: 22px; height: 22px; }
.tab.on { background: #fff !important; color: var(--gr) !important; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tab.on span svg { color: var(--gr) !important; }

/* общие элементы остальных экранов */
.topbar { background: transparent !important; }
.topbar .back { width: 40px; height: 40px; border-radius: 50% !important; clip-path: none !important; background: var(--glass) !important; box-shadow: none  !important; color: #fff; }
.topbar-title { font: 900 18px/1.05 "Rubik", sans-serif !important; text-transform: none !important; letter-spacing: -.01em; }
.topbar-title small { font: 700 12.5px "Rubik", sans-serif !important; color: rgba(255,255,255,.72) !important; text-transform: none !important; }
.section-label { font: 900 13px "Rubik", sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase; color: rgba(255,255,255,.72) !important; }
.btn, .btn.gold { background: var(--gy) !important; color: #111 !important; border-radius: 18px !important; box-shadow: 0 5px 0 #b38f12  !important; font: 900 17px/1.1 "Rubik", sans-serif !important; clip-path: none !important; }
.btn:active, .btn.gold:active { transform: translateY(3px); box-shadow: 0 2px 0 #b38f12  !important; }
.btn.ghost, .btn.sasha { background: var(--glass) !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--gline)  !important; }
.toast { background: #fff !important; color: #111 !important; border-radius: 16px !important; font-weight: 800 !important; box-shadow: 0 10px 30px rgba(0,0,0,.3)  !important; }
.modal-card { background: #123f24 !important; border-radius: 26px !important; box-shadow: inset 0 0 0 1px var(--gline), 0 20px 50px rgba(0,0,0,.5)  !important; }
.guess-input input, .ng-input input, .nick-input { border-radius: 16px !important; }
.stat, .set-row, .cx-row, .bd-row, .ad-kpis div, .ad-list, .ad-reports > div, .ad-row, .du-hrow, .tc-pot, .perk, .player-card { background: var(--glass) !important; box-shadow: inset 0 0 0 1px var(--gline)  !important; }

/* варианты ответа в играх: белые клавиши, верно — зелёный, неверно — красный */
:is(.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt):not(.tb-fut) { background: #fff !important; color: #111 !important; border-radius: 18px !important; clip-path: none !important;
  box-shadow: 0 5px 0 rgba(0,0,0,.25)  !important; font-weight: 900 !important; }
:is(.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt):not(.tb-fut) small { color: #666 !important; }
:is(.ng-opt, .nat-opt, .opt, .du-opt).right { background: #3ee66b !important; color: #06210f !important; box-shadow: 0 5px 0 #1f9d55  !important; }
:is(.ng-opt, .nat-opt, .opt, .du-opt).wrong { background: #ff4d4d !important; color: #fff !important; box-shadow: 0 5px 0 #a32020  !important; }
.ng-res h2 { font: 900 26px/1.05 "Rubik", sans-serif !important; text-transform: none !important; background: none !important; clip-path: none !important; color: #fff !important; padding: 0 !important; }
.ng-res-big, .du-end-big { font-family: "Oswald", sans-serif !important; font-weight: 700 !important; color: var(--gy) !important; text-shadow: none; }

/* С другом */
.duel-hero { background: linear-gradient(90deg, #ff5fa2 50%, #4fc3ff 50%) !important; color: #111 !important; border-radius: 24px !important; box-shadow: 0 12px 30px rgba(0,0,0,.25)  !important; }
.duel-hero::before { display: none !important; }
.duel-hero .dh-top b, .duel-hero .dh-top small { color: #111 !important; }
.duel-hero .dh-top b { font: 900 22px/1.05 "Rubik", sans-serif !important; background: none !important; clip-path: none !important; padding: 0 !important; }
.dh-ico.tile-ico { background: #fff !important; border-radius: 50% !important; box-shadow: 0 0 0 3px #111  !important; }
.dh-modes button { background: #fff !important; color: #111 !important; border-radius: 16px !important; box-shadow: 0 4px 0 rgba(0,0,0,.25)  !important; clip-path: none !important; }
.dh-modes button * { color: #111 !important; }
#panel-friends .tile-card { display: grid !important; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; text-align: left !important;
  min-height: 0 !important; padding: 10px !important; border-radius: 20px !important; background: var(--glass) !important; box-shadow: inset 0 0 0 1px var(--gline)  !important; clip-path: none !important; }
#panel-friends .tile-card::before, #panel-friends .tile-card::after { display: none !important; }
#panel-friends .tile-card .tile-ico { grid-row: 1 / 3; width: 52px !important; height: 52px !important; margin: 0 !important; border-radius: 50% !important; border: 2px solid #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--k, #4fc3ff) 60%, #fff), var(--k, #4fc3ff) 60%) !important; box-shadow: none  !important; }
#panel-friends .tile-card > b { font: 900 16px/1.1 "Rubik", sans-serif !important; color: #fff !important; text-transform: none !important; align-self: end; }
#panel-friends .tile-card > small { color: rgba(255,255,255,.7) !important; font: 600 12.5px "Rubik", sans-serif !important; align-self: start; }
#panel-friends .tiles { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
#panel-friends .tile-card .limit-note { grid-column: 2; color: var(--gy) !important; }
#panel-friends .tile-card[hidden] { display: none !important; }

/* Таблица */
.bd-tabs { background: var(--glass) !important; border-radius: 14px !important; padding: 4px !important; box-shadow: none  !important; }
.bd-tabs button { border-radius: 10px !important; font: 900 13px "Rubik", sans-serif !important; color: rgba(255,255,255,.75) !important; background: none !important; clip-path: none !important; }
.bd-tabs button.on { background: #fff !important; color: #111 !important; }
.bd-list { background: #0b0b0f; border-radius: 20px; overflow: hidden; }
.bd-row { position: relative; border-radius: 0 !important; background: none !important; box-shadow: inset 0 1px 0 #1c1c22  !important; }
.bd-row.top::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 4px; background: #3ee66b; }
.bd-row .bd-place { font-family: "Oswald", sans-serif; }
.bd-row em { font-family: "Oswald", sans-serif; font-style: normal; font-weight: 700; }
.bd-row.me { background: var(--gy) !important; color: #111 !important; border-radius: 14px !important; }
.bd-row.me * { color: #111 !important; }
.bd-you { background: var(--glass); border-radius: 16px; padding: 12px 14px; }
.bd-you b { color: var(--gy); }

/* Профиль — карточка игрока */
#profile .stats, #profile .pf-card, #profile .pf-grid { display: none !important; }
.fut-wrap { display: flex; justify-content: center; margin: 4px 0 6px; }
.fut { position: relative; width: 210px; height: 290px; padding: 24px 20px 0; color: #3a2600;
  clip-path: polygon(50% 0, 100% 7%, 100% 89%, 50% 100%, 0 89%, 0 7%); background: linear-gradient(160deg, #fff1a8, #e9b93a 45%, #a8761a); }
.fut-ov b { display: block; font: 700 50px/1 "Oswald", sans-serif; } .fut-ov small { font: 700 14px "Oswald", sans-serif; letter-spacing: .06em; }
.fut .fut-ava { position: absolute !important; right: 18px; top: 28px; width: 104px !important; height: 104px !important; margin: 0 !important; border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important; color: #000 !important; box-shadow: none  !important; display: grid; place-items: center; font: 62px/1 sans-serif !important; }
.fut-nm { position: relative; margin-top: 50px; text-align: center; border-bottom: 1px solid rgba(58,38,0,.3); padding: 0 24px 4px; }
.fut-nm #prof-nick { font: 700 22px/1.1 "Oswald", sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fut-nm #prof-nick .hub-emo, .fut-nm #prof-nick small { display: none; }
.fut-nm #prof-nick b { font: inherit; }
.fut-nm .pf-edit { position: absolute; right: 0; top: 2px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(58,38,0,.15); color: #3a2600; font-size: 12px; }
.fut-st { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin-top: 8px; font: 700 14px "Oswald", sans-serif; }
.fut-st b { display: inline-block; min-width: 26px; }
.pf-xp { display: flex; justify-content: space-between; margin: 10px 8px 0; font: 800 12.5px "Rubik", sans-serif; }
.pf-xp #prof-rank { color: #fff !important; background: none !important; padding: 0 !important; } .pf-xp #prof-next { color: rgba(255,255,255,.75) !important; }
.pf-bar { display: block; margin: 6px 8px 0; height: 8px; border-radius: 9px; background: rgba(0,0,0,.3); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--gy) !important; border-radius: 9px; }
.pf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 12px; }
.pf-tiles button { display: grid; justify-items: start; gap: 4px; padding: 12px 10px; border: 0; border-radius: 18px; text-align: left; color: #fff; cursor: pointer;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--gline); }
.pf-tiles span { font-size: 26px; } .pf-tiles b { font: 900 14px "Rubik", sans-serif; } .pf-tiles small { font: 700 12px "Rubik", sans-serif; color: var(--gy); }
.settings { display: grid; gap: 6px; }
.set-row { border-radius: 14px !important; padding: 13px 14px !important; font-weight: 800; border-left: 0 !important; }
.set-row b { color: var(--gy) !important; }

/* Трофеи — полка */
#achievements .achs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; padding: 18px 10px; margin-top: 6px; border-radius: 24px;
  background: linear-gradient(#2a1a0e, #1a0f08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
#achievements .ach { display: block !important; position: relative; text-align: center; padding: 0 0 14px !important; background: none !important; box-shadow: none  !important; border: 0 !important; clip-path: none !important; }
#achievements .ach::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: 0; height: 8px; border-radius: 2px; background: linear-gradient(#7a4f2a, #4f3018); }
#achievements .ach i { display: block; font-size: 40px; font-style: normal; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
#achievements .ach:not(.ok) i { filter: grayscale(1) brightness(.35); }
#achievements .ach b { display: block; font: 900 12px/1.1 "Rubik", sans-serif !important; margin-top: 6px; color: #fff; text-transform: none !important; }
#achievements .ach small { display: block; font: 600 10.5px/1.2 "Rubik", sans-serif !important; color: rgba(255,255,255,.6) !important; margin-top: 3px; }
#achievements .ach:not(.ok) b { color: rgba(255,255,255,.55); }

/* табло замены (новая игра недели) */
.sub-led { width: 230px; margin: 4px auto 0; padding: 14px; border-radius: 18px; background: #0b0b0f; border: 6px solid #2a2a2a; text-align: center; }
.sub-led span { font: 700 34px "Oswald", sans-serif; color: #3ee66b; vertical-align: middle; margin-right: 10px; }
.sub-led b { font: 700 64px/1 "Oswald", sans-serif; color: #3ee66b; text-shadow: none; vertical-align: middle; }
.sub-led small { display: block; font: 700 12px "Oswald", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #888; margin-top: 6px; }
.sub-h { margin: 18px 0 0; text-align: center; font: 900 24px/1.1 "Rubik", sans-serif; }
.sub-tok { display: block; position: relative; width: 84px; height: 84px; margin: 16px auto 4px; border-radius: 50%; border: 3px solid #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--k) 60%, #fff), var(--k) 60%); }
.sub-tok .tile-ico { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; background: none !important; box-shadow: none  !important; }
.sub-tok .tile-ico::after { display: none !important; }
.ava-s { width: 36px; height: 36px; flex: none; } .ava-s b { font-size: 13px; }

.modal-card .sub-h { text-transform: none !important; font: 900 24px/1.1 "Rubik", sans-serif !important; letter-spacing: -.01em; }
/* Полноэкранный Telegram: не залезать под кнопки «Закрыть» и «⋯» и под вырез экрана */
#app { padding-top: max(12px, env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 6px), calc(var(--safe-top, 0px) + 6px)) !important; }
.tabbar { padding-bottom: max(22px, calc(8px + env(safe-area-inset-bottom, 0px)), calc(8px + var(--tg-safe-area-inset-bottom, 0px))) !important; }
.pitch-wrap { height: max(470px, calc(var(--tg-viewport-stable-height, 100vh) - 236px - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-top, 0px))); }
/* фишки-шестиугольники: как лоскуты на мяче — белая кромка, цвет игры внутри */
.tk { filter: drop-shadow(0 7px 6px rgba(0,0,0,.32)); }
.tk .tok { width: 68px; height: 76px; border: 0; border-radius: 0; box-shadow: none; background: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tk .tok::before { content: ''; position: absolute; inset: 4px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--k, #ffd23f) 55%, #fff), var(--k, #ffd23f) 62%, color-mix(in srgb, var(--k, #ffd23f) 80%, #000)); }
.tk .tok::after { content: ''; position: absolute; inset: 4px; clip-path: polygon(50% 0, 100% 25%, 100% 50%, 0 50%, 0 25%); background: linear-gradient(rgba(255,255,255,.18), transparent); }
.tk .tok .tile-ico { z-index: 1; }
.tk em { right: -4px; top: 2px; z-index: 3; }
.tk:active .tok { transform: scale(.94); }
.tk.gk .tok { width: 90px; height: 100px; background: var(--gy); border: 0; box-shadow: none; overflow: visible; }
.tk.gk .tok::before { background: radial-gradient(circle at 50% 40%, #2a2a2a, #0b0b0f); }
.tk.gk .tok::after { display: none; }
.tk.gk img, .tk.gk i { z-index: 1; }
.tk.gk img { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tk.soon { filter: none; }
.tk.soon .tok { background: rgba(255,255,255,.75); }
.tk.soon .tok::before { background: #2c8a4b; } .tk.soon .tok::after { display: none; }
.tk.soon .tok i { z-index: 1; }

/* монета: золотой мяч */
.coin, .coins i, .coin-ic { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0a0'/%3E%3Cstop offset='.45' stop-color='%23ffc928'/%3E%3Cstop offset='1' stop-color='%23ea9200'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e99a00'/%3E%3Cstop offset='1' stop-color='%23ffd23a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fffbe0'/%3E%3Cstop offset='1' stop-color='%23ffd85a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='35' r='28' fill='%239a5600'/%3E%3Ccircle cx='32' cy='31' r='28' fill='url%28%23g%29'/%3E%3Ccircle cx='32' cy='31' r='24.5' fill='none' stroke='%23b86d00' stroke-opacity='.55' stroke-width='2.2' stroke-dasharray='2.2 2.6'/%3E%3Ccircle cx='32' cy='31' r='19.5' fill='url%28%23i%29'/%3E%3Ccircle cx='32' cy='31' r='19.5' fill='none' stroke='%23fff3b8' stroke-opacity='.7' stroke-width='1.2'/%3E%3Cpath d='M32.00 19.50 L34.88 27.04 L42.94 27.45 L36.66 32.51 L38.76 40.30 L32.00 35.90 L25.24 40.30 L27.34 32.51 L21.06 27.45 L29.12 27.04Z' fill='%23b06a00' transform='translate%280 1.4%29'/%3E%3Cpath d='M32.00 19.50 L34.88 27.04 L42.94 27.45 L36.66 32.51 L38.76 40.30 L32.00 35.90 L25.24 40.30 L27.34 32.51 L21.06 27.45 L29.12 27.04Z' fill='url%28%23s%29'/%3E%3Cpath d='M13 22 A21 21 0 0 1 26 11' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important; box-shadow: none  !important; border-radius: 0 !important; }
.coins .coin { width: 24px !important; height: 24px !important; }
/* пак дня: карточки как паки в FC — тёмные с золотой фольгой, переворачиваются */
.pk-head { text-align: center; } .pk-head h2 { font: 900 26px "Rubik", sans-serif !important; text-transform: none !important; }
.pk-head p { color: rgba(255,255,255,.75); font-weight: 600; margin-top: 4px; }
.pk-row { display: flex; justify-content: center; gap: 10px; margin: 18px 0 6px; perspective: 900px; }
.pk { position: relative; width: 96px; height: 140px; padding: 0; border: 0; background: none; cursor: pointer; animation: pkIn .5s var(--d) both cubic-bezier(.2,1.3,.4,1); }
@keyframes pkIn { from { opacity: 0; transform: translateY(24px) scale(.9); } }
.pk:active:not(:disabled) { transform: translateY(3px); }
.pk-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.2,.4,1); }
.pk.flip .pk-in { transform: rotateY(180deg); }
.pk-back, .pk-front { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pk-back { display: grid; place-items: center; align-content: center; gap: 6px;
  background: radial-gradient(120% 60% at 50% 0%, #5a3cc8, transparent 60%), linear-gradient(160deg, #2a1868, #120a35);
  box-shadow: inset 0 0 0 2px #ffcf3a, inset 0 0 0 5px #120a35, inset 0 0 0 6px rgba(255,207,58,.5), 0 12px 24px rgba(0,0,0,.45); }
.pk-back::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%); transform: translateX(-30%); }
.pk-logo { width: 46px; height: 52px; display: grid; place-items: center; font: 700 26px "Oswald", sans-serif; color: #120a35;
  background: linear-gradient(160deg, #fff1a8, #ffcf3a 50%, #c98f00); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pk-t { font: 700 11px "Oswald", sans-serif; letter-spacing: .18em; color: #ffcf3a; }
.pk-stars { font-size: 9px; letter-spacing: .3em; color: rgba(255,207,58,.7); }
.pk-front { transform: rotateY(180deg); }
.pk-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 14px;
  background: linear-gradient(160deg, #f4f4f8, #c9cad6 55%, #8d8fa3); color: #1b1340; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.pk-face.gold { background: linear-gradient(160deg, #fff1a8, #e9b93a 50%, #a8761a); color: #3a2600; }
.pk-face.jack { background: linear-gradient(160deg, #ff9ad1, #e3262f 50%, #7a0f2a); color: #fff; }
.pk-face small { font: 700 9.5px "Oswald", sans-serif; letter-spacing: .16em; opacity: .75; }
.pk-face b { font: 700 34px/1 "Oswald", sans-serif; }
.pk-face .coin { width: 26px !important; height: 26px !important; margin-top: 4px; }
.pk.mine { z-index: 2; } .pk.mine .pk-in { transform: rotateY(180deg) scale(1.08); }
.pk.other { opacity: .5; filter: grayscale(.5); }
.pf-pk { width: 26px; height: 32px; border-radius: 5px; background: linear-gradient(160deg, #2a1868, #120a35); box-shadow: inset 0 0 0 2px #ffcf3a; display: block; }
/* фон всех экранов, кроме поля: графит со светом прожекторов */
body { background: radial-gradient(60% 34% at 12% 0%, rgba(255,255,230,.16), transparent 70%), radial-gradient(60% 34% at 88% 0%, rgba(255,255,230,.16), transparent 70%), #15161c fixed !important; }
:root { --glass: rgba(255,255,255,.06); --gline: rgba(255,255,255,.1); }
.modal-card { background: #1e1f27 !important; }
/* дуэль: спокойная карточка, иконка на ярком кружке — белых человечков видно */
.duel-hero { background: linear-gradient(135deg, rgba(255,95,162,.16), rgba(123,44,255,.12) 60%, rgba(255,255,255,.04)) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px var(--gline)  !important; }
.duel-hero .dh-top b { color: #fff !important; } .duel-hero .dh-top small { color: rgba(255,255,255,.72) !important; }
.dh-ico.tile-ico { background: linear-gradient(135deg, #ff5fa2, #7b2cff) !important; box-shadow: none  !important; }
.dh-modes button { background: rgba(255,255,255,.1) !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--gline)  !important; }
.dh-modes button * { color: #fff !important; }
.dh-modes button:first-child { background: var(--gy) !important; box-shadow: 0 4px 0 #b38f12  !important; }
.dh-modes button:first-child * { color: #111 !important; }

/* профиль: сезонный абонемент на «Джексоны Арену» */
.tix { position: relative; display: grid; grid-template-columns: 1fr 86px; margin: 6px 0 12px; border-radius: 18px; color: #15161c;
  background: #f4efe3; box-shadow: 0 14px 30px rgba(0,0,0,.4);
  -webkit-mask: radial-gradient(circle 11px at calc(100% - 86px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 86px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at calc(100% - 86px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 86px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tix::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,.025) 14px 15px); }
.tix-main { position: relative; padding: 0 0 14px; min-width: 0; }
.tix-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #15161c; color: #ffcf3a; border-radius: 18px 0 0 0;
  font: 700 12px "Oswald", sans-serif; letter-spacing: .16em; }
.tix-top em { margin-left: auto; font-style: normal; color: rgba(255,255,255,.6); letter-spacing: .1em; }
.tix-hex { width: 22px; height: 25px; display: grid; place-items: center; font: 700 13px "Oswald", sans-serif; color: #15161c;
  background: linear-gradient(160deg, #fff1a8, #ffcf3a 50%, #c98f00); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); letter-spacing: 0; }
.tix-who { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 6px; }
.tix .tix-ava { flex: none; width: 58px !important; height: 58px !important; margin: 0 !important; border-radius: 50% !important; display: grid; place-items: center;
  font: 32px/1 sans-serif !important; background: #15161c !important; color: #fff !important; box-shadow: 0 0 0 3px #ffcf3a  !important; }
.tix-nm { min-width: 0; display: grid; gap: 4px; }
.tix-nm #prof-nick { font: 700 24px/1 "Oswald", sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #15161c; }
.tix-nm #prof-nick .hub-emo, .tix-nm #prof-nick small { display: none; } .tix-nm #prof-nick b { font: inherit; }
.tix-rank { justify-self: start; background: #e3262f; color: #fff !important; font: 800 11px/1 "Rubik", sans-serif; padding: 4px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.tix .pf-edit { position: absolute; right: 10px; top: 12px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.07); color: #15161c; font-size: 13px; }
.tix-f { display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 14px 0; border-top: 1.5px solid rgba(0,0,0,.12); border-bottom: 1.5px solid rgba(0,0,0,.12); }
.tix-f span { padding: 7px 0 6px; } .tix-f span + span { padding-left: 10px; border-left: 1.5px solid rgba(0,0,0,.12); }
.tix-f small { display: block; font: 700 9.5px "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a8478; }
.tix-f b { font: 700 19px/1.1 "Oswald", sans-serif; }
.tix-xp { margin: 10px 14px 0; } .tix-xp .pf-bar { margin: 0; background: rgba(0,0,0,.1); height: 7px; } .tix-xp .pf-bar i { background: linear-gradient(90deg, #ffcf3a, #e3262f) !important; }
.tix-xp small { display: block; margin-top: 5px; font: 700 11px "Rubik", sans-serif; color: #6e695f !important; }
.tix-stub { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; border-left: 2px dashed rgba(0,0,0,.25); overflow: hidden;
  background: linear-gradient(180deg, transparent 0 10px, transparent) , #efe8d8; }
.tix-stub::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, #ff5fa2, #ffcf3a, #3ee6a8, #4fc3ff, #a98bff); opacity: .9; }
.tix-stub small { font: 700 9.5px "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a8478; }
.tix-stub b { font: 700 40px/1 "Oswald", sans-serif; color: #e3262f; }
.tix-bc { width: 54px; height: 22px; margin-top: 8px; background: repeating-linear-gradient(90deg, #15161c 0 2px, transparent 2px 4px, #15161c 4px 5px, transparent 5px 8px, #15161c 8px 11px, transparent 11px 13px); }
.tix-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.tix-stats span { padding: 10px 6px; border-radius: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--gline); text-align: center; font: 700 11px/1.2 "Rubik", sans-serif; color: rgba(255,255,255,.7); }
.tix-stats b { display: block; font: 700 22px/1.1 "Oswald", sans-serif; color: #fff; }
/* итог игры — табло стадиона */
.ng-res .sb { position: relative; margin: 0 0 14px; padding: 14px 12px 14px; border-radius: 20px; background: #0b0b0f; box-shadow: 0 0 0 4px #2a2b33, 0 14px 30px rgba(0,0,0,.4); text-align: center; }
.sb-k { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 12px "Oswald", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffcf3a; }
.sb-ico { width: 22px; height: 22px; display: inline-grid; } .sb-ico svg { width: 100%; height: 100%; }
.sb-led { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 2px; }
.sb-led b { font: 700 72px/1 "Oswald", sans-serif !important; color: #ffcf3a !important; text-shadow: none !important; letter-spacing: .02em; background: none !important; }
.sb-led b.bad { color: #ff4d4d !important; text-shadow: none !important; }
.sb-led b.word { font-size: 46px !important; } .ng-res.lose .sb-led b.word { color: #9a9aa6 !important; text-shadow: none  !important; }
.sb-led i { font: 700 44px "Oswald", sans-serif; font-style: normal; color: #444; }
.sb-lb { display: flex; justify-content: center; gap: 60px; font: 800 11px "Rubik", sans-serif; text-transform: uppercase; color: #888; letter-spacing: .06em; }
.ng-res .sb .res-record { display: inline-block; margin-top: 8px; background: #e3262f; color: #fff; font: 900 12px "Rubik", sans-serif; padding: 5px 11px; border-radius: 99px; transform: rotate(-3deg); }
.ng-res .sb .ng-res-stats { margin-top: 12px; }
.ng-res .sb .ng-res-stats span { background: rgba(255,255,255,.07) !important; }
.ng-res .sb .reward { display: inline-flex; margin-top: 10px; background: rgba(255,207,58,.14); color: #ffcf3a; }
.ng-res > h2 { margin-top: 2px; }
.invite-btn { width: 100%; margin: 14px 0 12px; } .bd-invite { width: 100%; margin: 8px 0 12px; }
.bd-tabs button { font-size: 12px !important; padding-left: 4px !important; padding-right: 4px !important; }
.tix-top { white-space: nowrap; letter-spacing: .1em; font-size: 11px; } .tix-top em { letter-spacing: .06em; }
/* фишки ужимаются на невысоких экранах (масштаб считает app.js), подпись схемы — в нижнем углу, где пусто */
.pitch .tk { transform: translate(-50%, -50%) scale(var(--ts, 1)); }
.pitch-form { top: auto !important; bottom: 8px; right: 10px; }

/* ===== фон всех экранов, кроме поля: ночной стадион — трибуны с огоньками, лучи прожекторов, разметка, зерно ===== */
body { background: #0d0a24 !important; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 V60 L30 52 L60 58 L95 44 L130 50 L160 38 L195 46 L230 36 L262 48 L295 40 L330 52 L360 46 L390 54 V120Z' fill='%23070516'/%3E%3Cg fill='%23ffe9a8' opacity='.55'%3E%3Ccircle cx='40' cy='70' r='1'/%3E%3Ccircle cx='72' cy='66' r='1'/%3E%3Ccircle cx='110' cy='60' r='1.2'/%3E%3Ccircle cx='150' cy='56' r='1'/%3E%3Ccircle cx='188' cy='60' r='1'/%3E%3Ccircle cx='226' cy='52' r='1.2'/%3E%3Ccircle cx='270' cy='62' r='1'/%3E%3Ccircle cx='310' cy='58' r='1'/%3E%3Ccircle cx='350' cy='64' r='1.2'/%3E%3Ccircle cx='90' cy='78' r='.8'/%3E%3Ccircle cx='205' cy='74' r='.8'/%3E%3Ccircle cx='330' cy='76' r='.8'/%3E%3C/g%3E%3C/svg%3E") top center / 100% 140px no-repeat,
    conic-gradient(from 155deg at 4% -4%, transparent 0deg, rgba(190,170,255,.13) 10deg, transparent 26deg),
    conic-gradient(from 185deg at 96% -4%, transparent 0deg, rgba(190,170,255,.13) 16deg, transparent 32deg),
    radial-gradient(40% 18% at 4% 0%, rgba(255,240,200,.45), transparent 70%), radial-gradient(40% 18% at 96% 0%, rgba(255,240,200,.45), transparent 70%),
    radial-gradient(150% 60% at 50% 120%, rgba(120,70,255,.28), transparent 60%),
    linear-gradient(180deg, #1a1146 0%, #120c33 45%, #0b0820 100%); }
body::after { content: ''; position: fixed; left: 50%; bottom: -170px; width: 340px; height: 340px; margin-left: -170px; z-index: -1; pointer-events: none;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.05); box-shadow: 0 0 0 120px rgba(255,255,255,.012); }
body[data-grass]::before, body[data-grass]::after { display: none; }
:root { --glass: rgba(255,255,255,.07); --gline: rgba(255,255,255,.12); }
.modal-card { background: linear-gradient(180deg, #241a5a, #16103a) !important; }

/* ===== абонемент: компактнее, без радуги ===== */
.tix { grid-template-columns: 1fr 70px; margin-bottom: 10px; }
.tix { -webkit-mask: radial-gradient(circle 9px at calc(100% - 70px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 70px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at calc(100% - 70px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 70px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tix-stub::before { display: none !important; }
.tix-main { padding-bottom: 10px; }
.tix-top { padding: 7px 12px; font-size: 10px !important; } .tix-hex { width: 18px; height: 20px; font-size: 11px; }
.tix-who { padding: 10px 12px 4px; gap: 10px; }
.tix .tix-ava { width: 44px !important; height: 44px !important; font-size: 24px !important; box-shadow: 0 0 0 2px #ffcf3a  !important; }
.tix-nm #prof-nick { font-size: 20px; } .tix-rank { font-size: 10px; padding: 3px 7px; }
.tix .pf-edit { top: 8px; width: 26px; height: 26px; }
.tix-f { margin: 6px 12px 0; } .tix-f span { padding: 5px 0 4px; } .tix-f b { font-size: 16px; } .tix-f small { font-size: 9px; }
.tix-xp { margin: 8px 12px 0; } .tix-xp small { font-size: 10.5px; margin-top: 4px; }
.tix-stub b { font-size: 32px; } .tix-bc { width: 44px; height: 16px; margin-top: 6px; }

/* ===== пак дня: фольгированные паки как в FC ===== */
.pk-row { gap: 12px; margin: 22px 0 8px; }
.pk { width: 98px; height: 150px; }
.pk-back { border-radius: 6px !important; overflow: hidden; display: block !important; box-shadow: 0 16px 28px rgba(0,0,0,.5)  !important;
  clip-path: polygon(0 4%, 6% 0, 12% 4%, 18% 0, 24% 4%, 30% 0, 36% 4%, 42% 0, 48% 4%, 54% 0, 60% 4%, 66% 0, 72% 4%, 78% 0, 84% 4%, 90% 0, 96% 4%, 100% 0,
    100% 100%, 96% 96%, 90% 100%, 84% 96%, 78% 100%, 72% 96%, 66% 100%, 60% 96%, 54% 100%, 48% 96%, 42% 100%, 36% 96%, 30% 100%, 24% 96%, 18% 100%, 12% 96%, 6% 100%, 0 96%);
  background: linear-gradient(115deg, #3a1c8a 0%, #6b3cff 28%, #b48cff 40%, #5a2ee0 52%, #2a1470 75%, #170a45 100%) !important; }
.pk-back::after { display: none !important; }
.pk-foil { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px),
  linear-gradient(180deg, rgba(255,255,255,.22), transparent 30%, transparent 70%, rgba(0,0,0,.35)); }
.pk-rays { position: absolute; left: 50%; top: 44%; width: 200px; height: 200px; margin: -100px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,215,90,.32) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); }
.pk-logo { position: absolute; left: 50%; top: 44%; width: 52px; height: 58px; margin: -29px 0 0 -26px; display: grid; place-items: center;
  background: linear-gradient(160deg, #fff6c4, #ffcf3a 40%, #b47800 75%, #ffe27a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.pk-logo::before { content: ''; position: absolute; inset: 4px; background: linear-gradient(160deg, #2a1470, #120a35); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pk-logo b { position: relative; font: 700 24px "Oswald", sans-serif; background: linear-gradient(180deg, #fff6c4, #ffcf3a 60%, #c98f00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-band { position: absolute; left: 0; right: 0; bottom: 14px; padding: 5px 0 4px; text-align: center; background: linear-gradient(90deg, #a87400, #ffe27a 30%, #ffcf3a 60%, #a87400);
  box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pk-band .pk-t { display: block; font: 700 11px/1 "Oswald", sans-serif; letter-spacing: .2em; color: #2a1470; }
.pk-band .pk-stars { display: block; font-size: 8px; letter-spacing: .35em; color: #2a1470; margin-top: 2px; }
.pk-sp { position: absolute; width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: .85; }
.pk-sp.s1 { left: 14px; top: 18px; } .pk-sp.s2 { right: 12px; top: 34px; width: 7px; height: 7px; } .pk-sp.s3 { left: 20px; top: 78px; width: 6px; height: 6px; }
/* открытая карточка — щит, как карточка игрока в FC */
.pk-front { border-radius: 0 !important; }
.pk-face { border-radius: 0 !important; clip-path: polygon(50% 0, 100% 7%, 100% 88%, 50% 100%, 0 88%, 0 7%); gap: 0 !important; padding-bottom: 8px; box-shadow: none  !important; }
.pk-face.silver { background: linear-gradient(160deg, #ffffff, #d4d6e2 40%, #8d8fa3 80%, #e6e7ef) !important; color: #1b1340; }
.pk-face.gold { background: linear-gradient(160deg, #fff6c4, #f2c94c 40%, #a8761a 80%, #ffe27a) !important; color: #3a2600; }
.pk-face.jack { background: linear-gradient(160deg, #ffb3dc, #ff3d6e 40%, #7a0f2a 80%, #ff8ab0) !important; color: #fff; }
.pk-fr { position: absolute; inset: 5px; clip-path: polygon(50% 0, 100% 7%, 100% 88%, 50% 100%, 0 88%, 0 7%); border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.pk-face small { font: 700 9px "Oswald", sans-serif !important; letter-spacing: .18em; margin-bottom: 6px; }
.pk-face .coin { width: 30px !important; height: 30px !important; margin: 0 0 2px !important; }
.pk-face b { font: 700 36px/1 "Oswald", sans-serif !important; }
.pk-face em { font: 700 10px "Oswald", sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.pk.mine::after { content: ''; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,215,90,.4) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 65%); mask: radial-gradient(circle, #000 15%, transparent 65%);
  animation: pkBurst .9s ease-out both; }
@keyframes pkBurst { from { opacity: 0; transform: scale(.3) rotate(-30deg); } 60% { opacity: 1; } to { opacity: .8; transform: scale(1) rotate(0); } }
.pk.other { opacity: .45; filter: grayscale(.6); }
/* поле тоже на ночном фоне стадиона */
.tk.soon .tok::before { background: #1a1146 !important; }
html, body { touch-action: manipulation; }

/* ===== Таблица в духе EA FC: стеклянные строки со скошенными углами, узкий шрифт, акценты по местам ===== */
#board-body { --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.bd-tabs { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0 !important; padding: 0 !important; background: none !important;
  border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 0 !important; }
.bd-tabs button { padding: 12px 2px 10px !important; border-radius: 0 !important; background: none !important; color: rgba(255,255,255,.55) !important;
  font: 700 13px "Oswald", sans-serif !important; letter-spacing: .08em; text-transform: uppercase; position: relative; white-space: nowrap; }
.bd-tabs button.on { background: none !important; color: #fff !important; }
.bd-tabs button.on::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; background: linear-gradient(90deg, #3ee6a8, #4fc3ff); box-shadow: 0 0 0 1.5px rgba(62,230,168,.7); }
.bd-head { font: 600 12.5px/1.4 "Rubik", sans-serif !important; color: rgba(255,255,255,.55) !important; text-align: left !important; margin: 12px 2px 10px !important; }
.bd-you { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px !important; border-radius: 0 !important; clip-path: var(--cut);
  background: linear-gradient(100deg, rgba(62,230,168,.22), rgba(79,195,255,.08) 60%, rgba(255,255,255,.04)) !important; box-shadow: none  !important;
  font: 700 13px "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.bd-you b { font: 700 34px/1 "Oswald", sans-serif; color: #3ee6a8 !important; letter-spacing: 0; text-shadow: none; }
.bd-list { display: grid; gap: 6px; margin-top: 12px; background: none !important; border-radius: 0 !important; overflow: visible !important; }
.bd-row { position: relative; display: grid !important; grid-template-columns: 38px 34px 1fr auto; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px 0 0 !important;
  border-radius: 0 !important; clip-path: var(--cut); background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.04)) !important;
  box-shadow: none  !important; backdrop-filter: blur(6px); }
.bd-row::before { display: none !important; }
.bd-row .bd-place { align-self: stretch; display: grid; place-items: center; font: 700 20px "Oswald", sans-serif !important; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06); }
.bd-row .bd-emo { font-size: 22px; text-align: center; }
.bd-row .bd-nick { font: 700 16px "Rubik", sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-row em { font: 700 19px "Oswald", sans-serif !important; color: #fff !important; font-style: normal; letter-spacing: .02em; }
.bd-row:nth-child(1) .bd-place { background: linear-gradient(160deg, #fff1a8, #e9b93a 50%, #a8761a); color: #3a2600; }
.bd-row:nth-child(2) .bd-place { background: linear-gradient(160deg, #ffffff, #c9cbd8 50%, #8d8fa3); color: #1b1340; }
.bd-row:nth-child(3) .bd-place { background: linear-gradient(160deg, #ffd7b0, #c9824a 50%, #7a4521); color: #2a1406; }
.bd-row:nth-child(1) { background: linear-gradient(90deg, rgba(233,185,58,.28), rgba(255,255,255,.05) 70%) !important; }
.bd-row:nth-child(1) em { color: #ffd34a !important; }
.bd-row.me { background: linear-gradient(90deg, rgba(62,230,168,.35), rgba(79,195,255,.12) 70%) !important; color: #fff !important; box-shadow: none  !important; }
.bd-row.me * { color: #fff !important; }
.bd-row.me::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #3ee6a8; box-shadow: 0 0 0 1.5px #3ee6a8; }
.bd-row.pinned { margin-top: 10px; }

/* скамейка запасных: игры сверх 11 — под полем, листаются вбок */
.bench { margin: 14px 2px 4px; padding: 12px 0 6px; border-radius: 20px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.bench-h { padding: 0 14px 8px; font: 700 12px "Oswald", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.bench-h span { color: #3ee6a8; margin-left: 4px; }
.bench-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px 8px; scrollbar-width: none; }
.bench-row::-webkit-scrollbar { display: none; }
.tk.bn { position: relative; transform: none; flex: none; width: 76px; }
.tk.bn .tok { width: 52px; height: 58px; }
.tk.bn b { font-size: 9.5px; padding: 4px 6px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.tk.bn em { right: 2px; top: -2px; }

/* нижнее меню: плавающая стеклянная панель, без красной линии; активная вкладка — бирюзовая */
.tabbar { left: 10px !important; right: 10px !important; bottom: max(10px, env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) !important;
  padding: 6px !important; border-radius: 22px; background: rgba(22,15,56,.78) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.45)  !important; }
.tab { border-radius: 16px !important; clip-path: none !important; padding: 8px 2px 7px !important; font: 700 10.5px/1 "Rubik", sans-serif !important; font-style: normal !important;
  text-transform: none !important; color: rgba(255,255,255,.55) !important; letter-spacing: 0; }
.tab.on { background: linear-gradient(135deg, #3ee6a8, #4fc3ff) !important; color: #0b0820 !important; clip-path: none !important; box-shadow: 0 4px 16px rgba(62,230,168,.35); }
.tab.on span svg { color: #0b0820 !important; }
.tabbar, .tab, .tk, button, .btn { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#app { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
.pitch-wrap { height: max(460px, calc(var(--tg-viewport-stable-height, 100vh) - 250px - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-top, 0px))) !important; }

/* табло итога: вместо чёрной плашки — стекло в стиле FC со скошенными углами и неоновой рамкой */
.ng-res .sb { border-radius: 0 !important; background: linear-gradient(160deg, rgba(62,230,168,.16), rgba(79,195,255,.06) 45%, rgba(255,255,255,.04)) !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: inset 0 0 0 1px rgba(62,230,168,.35)  !important; }
.ng-res.lose .sb { background: linear-gradient(160deg, rgba(255,95,162,.14), rgba(123,44,255,.06) 45%, rgba(255,255,255,.04)) !important; box-shadow: inset 0 0 0 1px rgba(255,95,162,.3)  !important; }
.sb-k { color: #3ee6a8 !important; } .ng-res.lose .sb-k { color: #ff8ab8 !important; }
.sb-led b { color: #fff !important; text-shadow: none !important; }
.sb-led b.bad { color: #ff6b8a !important; text-shadow: none !important; }
.ng-res.lose .sb-led b.word { color: rgba(255,255,255,.8) !important; text-shadow: none  !important; }
.sb-led i { color: rgba(255,255,255,.35) !important; }
.sb-lb { color: rgba(255,255,255,.6) !important; gap: 70px !important; }
.ng-res .sb .ng-res-stats span { background: rgba(255,255,255,.08) !important; border-radius: 0 !important; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.ng-res .sb .reward { background: rgba(255,207,58,.16) !important; }
.sb-led.long b { font-size: 50px !important; } .sb-led.long { gap: 8px; } .sb-led.long i { font-size: 32px; }
/* 3D-пак дня */
.pk3 { width: 100%; height: min(420px, 56vh); margin: 4px 0 8px; cursor: pointer; }
.pk3 canvas { display: block; width: 100% !important; height: 100% !important; }
.pk3 canvas { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }

/* ===== пак дня на весь экран (как старр-дропы) ===== */
.drop { position: fixed; inset: 0; z-index: 200; --rc: #3ee66b; touch-action: none; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity .25s; overflow: hidden; }
.drop.in { opacity: 1; } .drop.out { opacity: 0; }
.drop-bg { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 48%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 70%), radial-gradient(120% 90% at 50% 50%, #1a1146, #05030f 75%); transition: background .4s; }
.drop.jackson .drop-bg { background: radial-gradient(70% 50% at 50% 48%, rgba(255,59,92,.6), transparent 70%), conic-gradient(from 0deg at 50% 48%, #ff2d55, #ff9a3d, #ffe14a, #3ee66b, #4fc3ff, #b14cff, #ff2d55); animation: dropSpin 6s linear infinite; }
@keyframes dropSpin { to { filter: hue-rotate(360deg); } }
.drop-stage { position: absolute; inset: 0; }
.drop-stage canvas { display: block; }
.drop-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }
.drop-flash.go { animation: dropFlash .45s ease-out; }
@keyframes dropFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
.drop-top { position: absolute; left: 0; right: 0; top: max(56px, calc(env(safe-area-inset-top, 0px) + 50px), calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + 20px)); text-align: center; z-index: 2; pointer-events: none; }
.drop-top small { display: block; font: 700 13px "Oswald", sans-serif; letter-spacing: .3em; color: rgba(255,255,255,.75); }
.drop-rar { display: inline-block; margin-top: 6px; font: 700 44px/1 "Oswald", sans-serif; color: #fff; letter-spacing: .02em;
  text-shadow: 0 4px 0 color-mix(in srgb, var(--rc) 50%, #000); }
.drop-rar.slam { animation: dropSlam .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes dropSlam { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }
.drop.jackson .drop-rar { font-size: 58px; color: #fff; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 0 6px 0 #111; }
.drop-steps { position: absolute; left: 0; right: 0; top: calc(max(56px, calc(env(safe-area-inset-top, 0px) + 50px)) + 78px); display: flex; justify-content: center; gap: 8px; z-index: 2; pointer-events: none; }
.drop-steps i { width: 26px; height: 8px; border-radius: 9px; background: rgba(255,255,255,.18); transition: background .3s, box-shadow .3s; }
.drop-steps i.on { background: var(--c); box-shadow: 0 0 0 1.5px var(--c); }
.drop-hint { position: absolute; left: 0; right: 0; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); text-align: center; z-index: 2; pointer-events: none;
  font: 900 20px "Rubik", sans-serif; color: #fff; animation: dropHint 1.2s ease-in-out infinite; }
@keyframes dropHint { 50% { transform: scale(1.08); opacity: .7; } }
.drop-take { position: absolute !important; left: 24px; right: 24px; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); z-index: 4; font-size: 20px !important; padding: 18px !important; }
.drop-x { position: absolute; right: 16px; top: max(16px, calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + 8px)); z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; }
.drop-x[hidden] { display: none; }

/* ===== награды: путь трофеев, пропуск, задания ===== */
.hh-tro, .hh-packs { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border: 0; border-radius: 99px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--gline); color: #fff; font: 800 15px "Rubik", sans-serif; cursor: pointer; }
.hh-packs { background: linear-gradient(135deg, #3ee66b, #1f9d55); box-shadow: 0 0 0 1.5px rgba(62,230,107,.55); animation: hhPulse 1.6s ease-in-out infinite; }
@keyframes hhPulse { 50% { transform: scale(1.06); } }
.rw-pk { display: inline-block; width: 14px; height: 18px; border-radius: 3px; background: linear-gradient(160deg, var(--c, #3ee66b), color-mix(in srgb, var(--c, #3ee66b) 40%, #120a35)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); vertical-align: middle; }
.rw-pk.big { width: 34px; height: 44px; border-radius: 6px; }
.tab { position: relative; }
.rw-dot { position: absolute; top: 2px; right: 18%; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #ff3b5c; color: #fff; font: 900 10px/17px "Rubik", sans-serif; font-style: normal; text-align: center; }
.rw-dot[hidden] { display: none; }
.rw-earn { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; font: 800 13px "Rubik", sans-serif; color: #fff; }
.rw-earn span { background: rgba(255,255,255,.1); padding: 6px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; }
.rw-earn .rw-new { background: linear-gradient(135deg, #3ee66b, #1f9d55); color: #062; color: #06210f; }
#rewards-body { padding-bottom: 20px; }
.rw-tabs { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 12px; }
.rw-tabs button { position: relative; padding: 12px 2px 10px; border: 0; background: none; color: rgba(255,255,255,.55); font: 700 14px "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.rw-tabs button.on { color: #fff; } .rw-tabs button.on::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; background: linear-gradient(90deg, #ffcf3a, #ff9a3d); box-shadow: 0 0 0 1.5px rgba(255,207,58,.7); }
.rw-tabs i { margin-left: 6px; background: #ff3b5c; color: #fff; font: 900 10px/1 "Rubik"; font-style: normal; padding: 2px 6px; border-radius: 99px; vertical-align: 2px; }
.rw-packs { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 12px 14px; border: 0; border-radius: 18px; text-align: left; color: #06210f; background: linear-gradient(135deg, #3ee66b, #1f9d55); box-shadow: 0 0 0 1.5px rgba(62,230,107,.4); }
.rw-packs b { display: block; font: 900 16px "Rubik"; } .rw-packs small { font: 700 12px "Rubik"; opacity: .75; }
.rw-packs em { margin-left: auto; font: 900 14px "Rubik"; font-style: normal; background: #06210f; color: #3ee66b; padding: 9px 14px; border-radius: 99px; }
.rw-head { padding: 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,207,58,.16), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,207,58,.3); margin-bottom: 12px; }
.rw-tro { font: 700 15px "Oswald", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.rw-tro b { font: 700 30px "Oswald"; color: #ffcf3a; margin-left: 4px; }
.rw-head small { display: block; font: 600 12.5px "Rubik"; color: rgba(255,255,255,.7); margin-top: 2px; }
.rw-bar { display: block; height: 8px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 8px; }
.rw-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffcf3a, #ff9a3d); }
.rw-bar.sm { height: 6px; margin: 6px 0 4px; }
.rw-buy { width: 100%; margin-top: 12px; }
.rw-prem.on { display: inline-block; margin-top: 10px; font: 900 13px "Rubik"; color: #ffcf3a; }
.rw-road { position: relative; display: grid; gap: 8px; padding-left: 8px; }
.rw-road::before { content: ''; position: absolute; left: 30px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: rgba(255,255,255,.12); }
.rw-step { position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; }
.rw-t { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 30px; border-radius: 99px; background: #241a5a; font: 700 13px "Oswald"; color: rgba(255,255,255,.7); }
.rw-step.reach .rw-t { background: #ffcf3a; color: #3a2600; box-shadow: 0 0 0 1.5px rgba(255,207,58,.6); }
.rw-cell { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 12px; border: 0; border-radius: 14px; text-align: left; color: #fff;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font: 800 14px "Rubik"; }
.rw-cell .rw-ico { width: 32px; display: grid; place-items: center; font-size: 22px; } .rw-cell .rw-ico .coin { width: 28px !important; height: 28px !important; }
.rw-cell .rw-ico .rw-pk { width: 22px; height: 28px; }
.rw-cell.ready { background: linear-gradient(135deg, rgba(255,207,58,.35), rgba(255,154,61,.2)); box-shadow: inset 0 0 0 2px #ffcf3a; animation: hhPulse 1.4s ease-in-out infinite; cursor: pointer; }
.rw-cell.ready::after { content: 'Забрать'; margin-left: auto; background: #ffcf3a; color: #3a2600; font: 900 12px "Rubik"; padding: 6px 10px; border-radius: 99px; }
.rw-cell.got { opacity: .45; } .rw-cell.lock { opacity: .7; }
.rw-ok, .rw-lock { margin-left: auto; font-style: normal; } .rw-ok { color: #3ee66b; font-weight: 900; }
.rw-pass { display: grid; gap: 6px; }
.rw-ph, .rw-prow { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; align-items: center; }
.rw-ph b { font: 700 12px "Oswald"; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); text-align: center; } .rw-ph b.pr { color: #ffcf3a; }
.rw-lv { display: grid; place-items: center; height: 30px; border-radius: 9px; background: #241a5a; font: 700 14px "Oswald"; color: rgba(255,255,255,.7); }
.rw-prow.reach .rw-lv { background: #4fc3ff; color: #06233a; }
.rw-prow .rw-cell { min-height: 48px; padding: 6px 8px; font-size: 12.5px; gap: 6px; }
.rw-prow .rw-cell.ready::after { content: '✓'; padding: 4px 8px; }
.rw-prow .rw-cell b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.rw-q > div { flex: 1; min-width: 0; } .rw-q b { font: 800 15px "Rubik"; } .rw-q small { font: 600 12px "Rubik"; color: rgba(255,255,255,.65); }
.rw-q.done { box-shadow: inset 0 0 0 2px #3ee66b; } .rw-q.got { opacity: .5; }
.rw-q .btn { width: auto !important; padding: 10px 14px !important; font-size: 14px !important; }
.rw-note { font: 600 12.5px "Rubik"; color: rgba(255,255,255,.55); text-align: center; margin: 14px 4px 0; }
/* шапка поля: логотип + монеты + паки + трофеи помещаются на узком экране */
.hub-head .hh-right { gap: 5px; }
.hub-head .coins, .hh-tro, .hh-packs { height: 32px; padding: 0 9px; font-size: 14px !important; gap: 4px; }
.hub-head .coins { padding-left: 4px; }
.hub-head .coins .coin { width: 22px !important; height: 22px !important; }
.hub-head .wordmark { font-size: 21px !important; }
@media (max-width: 370px) { .hub-head .wordmark { font-size: 18px !important; } }

/* ошибка запуска — видна, чтобы можно было прислать скрин */
#oops { position: fixed; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 9999; padding: 10px 12px; border-radius: 12px;
  background: #3a0d16; border: 1px solid #ff4d6a; color: #fff; font: 600 13px/1.35 var(--font-body); word-break: break-word; }

/* подсказки над полем, когда поле внизу (на телефоне снизу клавиатура) */
.suggest.up { top: auto !important; bottom: calc(100% + 4px); display: flex; flex-direction: column-reverse; }
.suggest.up button:last-child { border-bottom: 1px solid #ece8f7; }

/* Вордл: «мимо» — тёмное, чтобы не путать с подсветкой */
.wd-row i.miss { background: rgba(10, 8, 24, .55); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.45); }
.wd-kb button.miss { background: rgba(10, 8, 24, .6); color: rgba(255,255,255,.28); }
.wd-kb button { background: rgba(255,255,255,.14); }

/* ===== игры в стиле ночного стадиона: без травы и белых плашек ===== */
:root { --glass: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); --glass-line: rgba(255,255,255,.14); --team-a: #ffcf3a; --team-b: #6fd3ff; }
/* Угадай сборную: ночное поле с белой разметкой */
.nat-pitch { background: radial-gradient(90% 60% at 50% 0%, rgba(140,110,255,.22), transparent 70%), linear-gradient(180deg, rgba(24,16,60,.85), rgba(14,10,38,.92)) !important;
  border: 2px solid rgba(255,255,255,.55) !important; }
.nat-pitch::before, .nat-pitch::after { border-color: rgba(255,255,255,.45) !important; }
.nat-slot .crest-m { background: rgba(255,255,255,.95); }
/* Тики-така: стеклянные клетки */
.tg-cell { background: var(--glass) !important; box-shadow: inset 0 0 0 1px var(--glass-line), 0 3px 0 rgba(0,0,0,.35)  !important; }
.tg-cell.sel { box-shadow: inset 0 0 0 2px var(--gold) !important; }
.tg-cell.filled { background: linear-gradient(180deg, rgba(62,230,107,.22), rgba(62,230,107,.08)) !important; box-shadow: inset 0 0 0 2px rgba(62,230,107,.7)  !important; }
.tg-head { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px var(--glass-line); }
/* Аукцион: команды — тёмное стекло с цветной кромкой, без зелени */
.auction-stage { background: radial-gradient(120% 70% at 50% 0%, rgba(120,90,255,.35) 0%, transparent 70%), linear-gradient(180deg, rgba(30,20,70,.85), rgba(16,11,40,.92)) !important;
  box-shadow: inset 0 0 0 1px var(--glass-line); }
.ateam.danil, .ateam.sasha { background: var(--glass) !important; }
.ateam.danil { box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 3px 0 var(--team-a); }
.ateam.sasha { box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 3px 0 var(--team-b); }
.aslot { border-color: rgba(255,255,255,.28) !important; }
.auction-tags .tag { background: rgba(255,255,255,.08) !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--glass-line); }
.auction-tags .tag:first-child { color: var(--team-a) !important; } .auction-tags .tag:last-child { color: var(--team-b) !important; }
.auction-tags .tag.active { background: rgba(255,207,58,.16) !important; box-shadow: 0 0 0 2px var(--gold)  !important; }
/* Этого или того: табло составов на тёмном стекле */
.tb { background: rgba(14,10,38,.78) !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--glass-line), 0 10px 24px rgba(0,0,0,.35)  !important; }
.tb-head, .tb-pos { background: rgba(255,255,255,.08) !important; }
.tb-head.danil { box-shadow: inset 0 -3px 0 var(--team-a)  !important; } .tb-head.sasha { box-shadow: inset 0 -3px 0 var(--team-b)  !important; }
.tb-slot { background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important; color: #fff; }
.tb-slot.empty { background: rgba(255,255,255,.04) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08)  !important; }
/* шапка игр: длинное название в одну строку */
.ng-head h1, .game-head h1, .scr-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title > span { -webkit-line-clamp: 1 !important; font-size: 16px !important; }

/* ===================== награды Б: шапка, дорога лентой, карточки H3 ===================== */
/* шапка: одна стеклянная полоса — я, трофеи, карточки, монеты */
.hub-head { display: block !important; }
.mh { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 18px; background: rgba(12,8,34,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rw-mh { margin: 4px 0 12px; }
.mh-me { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: #fff; text-align: left; }
.mh-ava { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #ffcf3a, #ff8a3a); box-shadow: 0 3px 0 #7a4300; }
.mh-who { display: grid; min-width: 0; }
.mh-nick { font: 800 15px "Rubik", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-tro { font: 800 13px "Rubik", sans-serif; color: var(--gold); }
.mh-chip { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px 0 7px !important; border-radius: 12px !important; border: 0; background: rgba(255,255,255,.08) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13)  !important; color: #fff; font: 800 15px "Rubik", sans-serif !important; flex: none; }
.mh-chip .coin { width: 22px !important; height: 22px !important; margin: 0 !important; }
.mh-cards { color: #b9f0ff; position: relative; }
.mh-ci { width: 16px; height: 21px; border-radius: 4px; background: linear-gradient(160deg, #9fdcff, #3a7bd5); box-shadow: 3px -2px 0 -1px rgba(185,240,255,.55); transform: rotate(-8deg); }
.mh-cards.fresh::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 2px #120c38; }
.hh-packs { display: flex !important; align-items: center; gap: 7px; margin: 8px 0 0 auto; height: 34px; padding: 0 12px 0 8px; border: 0; border-radius: 12px; font: 900 14px "Rubik", sans-serif; color: #04260f;
  background: linear-gradient(180deg, #3ee66b, #12893d); box-shadow: 0 3px 0 #0a5a27, 0 8px 18px rgba(62,230,107,.3); }
.hh-packs[hidden] { display: none !important; }

/* дорога трофеев лентой */
.rw-sec { margin-bottom: 12px; }
.rw-row { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 2px 6px; }
.rw-row b { font: 900 18px "Rubik", sans-serif; } .rw-row small { font: 800 13px "Rubik", sans-serif; color: var(--gold); }
.rs-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.rs-strip::-webkit-scrollbar { display: none; }
.rs { position: relative; flex: none; width: 92px; display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; border: 0; border-radius: 16px; color: #fff; scroll-snap-align: start;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.rs.ready { background: linear-gradient(180deg, rgba(255,207,58,.30), rgba(255,207,58,.07)); box-shadow: inset 0 0 0 2px var(--gold); }
.rs.got { opacity: .5; }
.rs-art { height: 64px; display: grid; place-items: center; }
.rs-name { font: 800 11px "Rubik", sans-serif; line-height: 1.1; text-align: center; min-height: 24px; display: grid; place-items: center; }
.rs.ready .rs-name { color: var(--gold); }
.rs-ok { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #3ee66b; color: #062; font: 900 12px "Rubik"; font-style: normal; display: grid; place-items: center; }
.rs-seg { width: calc(100% + 14px); height: 6px; margin: 0 -7px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.rs-seg i { display: block; height: 100%; background: linear-gradient(90deg, #ffcf3a, #ff9a3a); }
.rs-t { font: 900 12px "Rubik", sans-serif; color: rgba(255,255,255,.85); }
.rs-coins { display: flex; } .rs-coins .coin { width: 30px !important; height: 30px !important; margin-left: -13px; } .rs-coins .coin:first-child { margin-left: 0; }
.rs-heart { font-size: 34px; }
.rs-pack { --c: #3ee66b; width: 44px; height: 62px; border-radius: 8px; position: relative; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 100%, #fff 25%), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.4); }
.rs-pack::before { content: ""; position: absolute; left: 0; right: 0; top: 18%; height: 3px; background: rgba(255,255,255,.55); }
.rs-pack b { font: 900 20px "Rubik", sans-serif; color: rgba(255,255,255,.92); text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.rs-card { width: 46px; height: 62px; border-radius: 8px; display: grid; place-items: center; font: 900 22px "Rubik", sans-serif; color: rgba(255,255,255,.9); background: linear-gradient(160deg, #fff3b0, #e0a21a); box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.4); }
.rs-card.legend { background: linear-gradient(100deg, #ff9ae2, #ffe27a, #8ff0d8, #9fdcff, #d6b2ff); color: #2a0f4d; }
.rs-card.jack { background: linear-gradient(160deg, #ff4a62, #2a0610); }
.rs-card.gold { color: #5a3b00; }
.rs-card.sm { width: 20px; height: 27px; border-radius: 4px; font-size: 11px; box-shadow: none; }
.rw-sub { margin: 4px 2px 0; font: 700 12px var(--font-body); color: rgba(255,255,255,.7); }

/* карточка H3: тёмная наклейка, плашка цвета редкости */
.cc { --w: 150px; --rc: #ffcf3a; --r1: #fff3b0; --r2: #e0a21a; position: relative; width: var(--w); aspect-ratio: .72; font-size: calc(var(--w) / 10); border-radius: .9em; overflow: hidden; flex: none;
  background: #0e0a2a; box-shadow: inset 0 0 0 .12em var(--rc), 0 0 1.4em color-mix(in srgb, var(--rc) 35%, transparent), 0 .6em 1.4em rgba(0,0,0,.45); color: #fff; }
.cc.bronze { --rc: #f0b98c; --r1: #f3b98a; --r2: #8f5a32; }
.cc.silver { --rc: #dfe5ee; --r1: #ffffff; --r2: #8a94a6; }
.cc.gold { --rc: #ffcf3a; --r1: #fff3b0; --r2: #e0a21a; }
.cc.legend { --rc: #d6a6ff; }
.cc.jack { --rc: #ff5a6e; --r1: #ff4a62; --r2: #2a0610; }
.cc-ph { position: absolute; inset: 0 0 26% 0; background: radial-gradient(70% 60% at 50% 35%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%), linear-gradient(160deg, var(--k1, #3b4f8f), var(--k2, #141a3a)); }
.cc-ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 .5em, transparent .5em 1em); }
.cc-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 55%); }
.cc.legend .cc-ph::after { background: linear-gradient(115deg, rgba(255,106,213,.25), rgba(255,207,58,.2), rgba(62,230,193,.2), rgba(111,211,255,.25), rgba(185,140,255,.25)); }
.cc-face { position: absolute; bottom: 24%; left: 50%; transform: translateX(-50%); width: 88%; filter: drop-shadow(0 .3em .5em rgba(0,0,0,.45)); }
.cc-r { position: absolute; left: .55em; top: .4em; display: flex; flex-direction: column; align-items: center; font: 700 1.95em/0.9 "Oswald", sans-serif; text-shadow: 0 .08em 0 rgba(0,0,0,.4); }
.cc-r small { display: block; margin-top: .2em; font: 700 .34em/1 "Oswald", sans-serif; letter-spacing: .1em; margin-right: -.1em; }
.cc-cr { position: absolute; right: .5em; top: .5em; width: 1.5em; height: 1.5em; padding: .15em; border-radius: 50%; background: #fff; object-fit: contain; }
.cc-band { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; display: grid; place-content: center; text-align: center; padding: 0 .3em; background: linear-gradient(160deg, var(--r1), var(--r2)); color: #120c38; }
.cc.legend .cc-band { background: linear-gradient(100deg, #ff9ae2, #ffe27a, #8ff0d8, #9fdcff, #d6b2ff); }
.cc.bronze .cc-band, .cc.jack .cc-band { color: #fff; }
.cc-band b { font: 700 1.05em/1 "Oswald", sans-serif; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--w) - 1em); }
.cc-band small { margin-top: .2em; font: 700 .5em "Oswald", sans-serif; letter-spacing: .16em; opacity: .85; white-space: nowrap; }
.cc.lock { box-shadow: inset 0 0 0 .1em rgba(255,255,255,.14); }
.cc.lock .cc-ph { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.cc.lock .cc-ph::after { display: none; }
.cc-sil { position: absolute; left: 50%; bottom: 26%; width: 62%; height: 58%; transform: translateX(-50%); background: rgba(255,255,255,.09);
  clip-path: path('M50 0 C72 0 80 18 80 34 C80 50 70 62 62 66 C86 72 100 84 100 100 L0 100 C0 84 14 72 38 66 C30 62 20 50 20 34 C20 18 28 0 50 0 Z'); }
.cc.lock .cc-sil { clip-path: ellipse(32% 40% at 50% 40%); border-radius: 0; }
.cc.lock .cc-r { color: rgba(255,255,255,.3); text-shadow: none; }
.cc.lock .cc-band { background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); }
.cc.lock .cc-band small { color: var(--rc); opacity: .7; }

/* альбом */
.rw-coll { margin-top: 4px; }
.cl-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 6px; }
.cl-head b { font: 900 18px "Rubik", sans-serif; } .cl-head small { font: 900 14px "Rubik", sans-serif; color: #6fd3ff; }
.cl-bar i { background: linear-gradient(90deg, #6fd3ff, #b98cff) !important; }
.cl-chips { display: flex; gap: 6px; overflow-x: auto; margin: 10px -16px 12px; padding: 0 16px; scrollbar-width: none; }
.cl-chips::-webkit-scrollbar { display: none; }
.cl-chips button { flex: none; padding: 7px 12px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font: 800 13px "Rubik", sans-serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.cl-chips button.on { background: #fff; color: #120c38; }
.cl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; justify-items: center; }
.cl-cell { position: relative; }
.cl-cell .cc[data-card] { cursor: pointer; transition: transform .15s; } .cl-cell .cc[data-card]:active { transform: scale(.95); }
.cl-n { position: absolute; right: -4px; bottom: 34%; padding: 2px 6px; border-radius: 99px; background: #120c38; color: #fff; font: 900 11px "Rubik"; font-style: normal; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.cl-new { position: absolute; left: 50%; top: -7px; transform: translateX(-50%); padding: 2px 7px; border-radius: 99px; background: #ff3b5c; color: #fff; font: 900 10px "Rubik"; font-style: normal; letter-spacing: .06em; }
.cl-more { display: block; width: 100%; margin-top: 14px; }

/* подробно о карточке */
.cd { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cd h2 { margin-top: 8px; }
.cd-m { color: rgba(255,255,255,.75); font-weight: 600; }
.cd-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 6px; }
.cd-st span { padding: 7px 4px; border-radius: 10px; background: rgba(255,255,255,.07); font: 800 11px "Rubik", sans-serif; color: rgba(255,255,255,.75); }
.cd-st b { display: block; font: 900 20px "Rubik", sans-serif; color: #fff; }
.cd-own { font-weight: 700; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 5px; }
.cd-own .coin { width: 18px !important; height: 18px !important; }

/* раскрытие карточек из пака */
.cr-wrap { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; padding: calc(24px + var(--tg-safe-area-inset-top, 0px)) 16px calc(28px + var(--tg-safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity .25s; color: #fff; }
.cr-wrap.in { opacity: 1; } .cr-wrap.out { opacity: 0; }
.cr-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 45% at 50% 42%, var(--glow, rgba(255,207,58,.35)), transparent 70%), linear-gradient(180deg, #1b1250, #07051a); }
.cr-bg::before { content: ""; position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.06) 0 7deg, transparent 7deg 18deg); }
.cr-wrap[data-rar="bronze"] { --glow: rgba(240,185,140,.35); } .cr-wrap[data-rar="silver"] { --glow: rgba(220,230,245,.35); }
.cr-wrap[data-rar="gold"] { --glow: rgba(255,207,58,.45); } .cr-wrap[data-rar="legend"] { --glow: rgba(214,166,255,.6); } .cr-wrap[data-rar="jack"] { --glow: rgba(255,74,98,.6); }
.cr-cnt { font: 700 13px "Oswald", sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.8); }
.cr-stage { display: grid; place-items: center; align-content: center; gap: 18px; perspective: 900px; }
.cr-flip { position: relative; width: 210px; aspect-ratio: .72; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.4,.5,1); }
.cr-stage.open .cr-flip { transform: rotateY(180deg); }
.cr-back, .cr-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cr-front { transform: rotateY(180deg); }
.cr-back { border-radius: 19px; display: grid; place-items: center; background: linear-gradient(160deg, #2a1d6e, #120c38); box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), 0 14px 30px rgba(0,0,0,.5); }
.cr-back span { font: 900 90px "Rubik", sans-serif; color: var(--gold); text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.cr-tag { opacity: 0; transform: translateY(8px); transition: opacity .3s .35s, transform .3s .35s; display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; background: rgba(255,255,255,.1); font: 900 15px "Rubik", sans-serif; }
.cr-tag.new { background: #ff3b5c; }
.cr-tag .coin { width: 18px !important; height: 18px !important; }
.cr-stage.open .cr-tag { opacity: 1; transform: none; }
.cr-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; min-height: 76px; }
.cr-wrap.fin .cr-row { align-self: center; }
.cr-wrap.fin { grid-template-rows: auto auto 1fr auto auto; }
.cr-wrap.fin .cr-row .cc { --w: 96px !important; }
.cr-hint { font: 700 13px var(--font-body); color: rgba(255,255,255,.7); margin-top: 8px; }
.cr-done { margin-top: 12px; min-width: 220px; }
.mh .hh-packs { margin: 0; height: 36px; padding: 0 10px 0 8px; flex: none; }

/* галерея как в EA FC: лиги → клубы → игроки */
.gl-list { display: grid; gap: 8px; margin-top: 12px; }
.gl-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 16px; color: #fff; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.gl-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: rgba(255,255,255,.08); }
.gl-mid { flex: 1; min-width: 0; display: grid; gap: 5px; }
.gl-mid b { font: 900 16px "Rubik", sans-serif; }
.gl-mid small { font: 700 12px var(--font-body); color: rgba(255,255,255,.75); }
.gl-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.gl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6fd3ff, #b98cff); }
.gl-prize { flex: none; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.25); font: 900 12px "Rubik", sans-serif; }
.gl-prize .coin { width: 16px !important; height: 16px !important; margin: 0 !important; }
.gl-prize .rw-pk { width: 14px; height: 19px; }
.gl-got { flex: none; font: 900 12px "Rubik", sans-serif; color: #3ee66b; }
.gl-claim { flex: none; height: 34px; padding: 0 12px; font-size: 13px; animation: glPulse 1.6s ease-in-out infinite; }
@keyframes glPulse { 50% { box-shadow: 0 3px 0 #9a6b00, 0 0 0 1.5px rgba(255,207,58,.6); } }
.gl-top { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.gl-back { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; font: 800 13px "Rubik", sans-serif; }
.gl-ttl { display: flex; align-items: center; gap: 8px; font: 900 18px "Rubik", sans-serif; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-ttl img { width: 28px; height: 28px; object-fit: contain; }
.gl-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px; background: rgba(12,8,34,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.gl-sum > span:first-child { display: grid; gap: 5px; min-width: 90px; font: 900 15px "Rubik", sans-serif; }
.gl-for { flex: 1; font: 700 12px var(--font-body); color: rgba(255,255,255,.8); }
.gl-clubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gl-club { position: relative; display: grid; justify-items: center; gap: 5px; padding: 12px 8px 10px; border: 0; border-radius: 14px; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.gl-club.done { box-shadow: inset 0 0 0 2px var(--gold); }
.gl-club.got { box-shadow: inset 0 0 0 1.5px rgba(62,230,107,.7); }
.gl-club img, .gl-noc { width: 38px; height: 38px; object-fit: contain; display: grid; place-items: center; font-size: 26px; }
.gl-club b { font: 800 11px "Rubik", sans-serif; line-height: 1.1; text-align: center; min-height: 24px; display: grid; place-items: center; }
.gl-club .gl-bar { width: 100%; }
.gl-club small { font: 800 11px "Rubik", sans-serif; color: rgba(255,255,255,.75); }
.gl-dot, .gl-ok { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 11px "Rubik"; font-style: normal; }
.gl-dot { background: var(--gold); color: #1c1400; } .gl-ok { background: #3ee66b; color: #062; }

/* итог аукциона: тёмные плашки, видно имена и цифры */
.ares { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ares.danil { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 4px 0 0 var(--team-a, #ffcf3a); }
.ares.sasha { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 4px 0 0 var(--team-b, #6fd3ff); }
.ares.win { background: linear-gradient(180deg, rgba(255,207,58,.22), rgba(255,207,58,.06)) !important; box-shadow: inset 0 0 0 2px var(--gold) !important; }
.ares small { color: rgba(255,255,255,.75); opacity: 1; }
.ares b { color: #fff; }
.ares.win b { color: var(--gold); }

/* движение в играх (Motion в core.js): появляется один раз, потом класс снимается */
.mo { animation-fill-mode: both !important; animation-delay: calc(var(--mo-i, 0) * 55ms) !important; }
.mo-opt { animation: moOpt .42s cubic-bezier(.2,.9,.25,1.25) !important; }
.mo-card { animation: moCard .6s cubic-bezier(.2,.9,.25,1.15) !important; }
.mo-q { animation: moQ .45s cubic-bezier(.2,.8,.2,1) !important; }
.mo-row { animation: moRow .4s cubic-bezier(.2,.9,.3,1.2) !important; }
@keyframes moOpt { from { opacity: 0; transform: translateY(18px) scale(.94); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes moCard { from { opacity: 0; transform: perspective(700px) translateY(24px) rotateY(-28deg) scale(.88); filter: brightness(1.6); } 60% { opacity: 1; filter: brightness(1.15); } to { opacity: 1; transform: none; filter: none; } }
@keyframes moQ { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes moRow { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ответ: верный — вспышка и подпрыгивание, неверный — встряска с красной вспышкой */
:is(.ng-opt, .nat-opt, .opt, .du-opt).right { animation: moRight .55s cubic-bezier(.2,1.6,.4,1) !important; }
:is(.ng-opt, .nat-opt, .opt, .du-opt).wrong { animation: moWrong .5s ease !important; }
@keyframes moRight { 0% { transform: scale(1); } 35% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(62,230,107,.35); } 100% { transform: scale(1); } }
@keyframes moWrong { 0%, 100% { transform: none; } 15% { transform: translateX(-9px) rotate(-1deg); } 35% { transform: translateX(8px) rotate(1deg); } 55% { transform: translateX(-6px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .mo { animation: none !important; } }

/* ===================== Драфт ===================== */
#xdraft { --cw: clamp(40px, 13.4vw, 60px); }
.xd-lead { color: rgba(255,255,255,.82); font-weight: 600; margin: 6px 2px 12px; line-height: 1.4; }
.xd-opt { display: grid; gap: 6px; width: 100%; margin-bottom: 10px; padding: 16px; border: 0; border-radius: 18px; text-align: left; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.xd-opt b { font: 900 20px "Rubik", sans-serif; } .xd-opt span { font: 600 14px/1.4 var(--font-body); color: rgba(255,255,255,.85); }
.xd-opt em { font: 800 13px "Rubik", sans-serif; font-style: normal; color: var(--gold); }
.xd-opt:active, .xd-form:active { transform: scale(.98); }
.xd-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.xd-form { display: grid; gap: 8px; padding: 10px; border: 0; border-radius: 16px; color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.xd-form b { font: 900 18px "Rubik", sans-serif; }
.xd-mini { position: relative; display: block; aspect-ratio: .75; border-radius: 10px; background: linear-gradient(180deg, rgba(24,16,60,.9), rgba(14,10,38,.95)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.xd-mini i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gold); }
.xd-bar { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 6px; margin-bottom: 8px; }
.xd-bar > * { display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #fff; text-align: left; }
.xd-bar small { font: 700 11px var(--font-body); color: rgba(255,255,255,.75); }
.xd-bar b { font: 900 20px "Rubik", sans-serif; } .xd-bar b i { font-style: normal; font-size: 13px; color: rgba(255,255,255,.6); }
.xd-chem { box-shadow: inset 0 0 0 1.5px var(--gold)  !important; } .xd-chem b { color: var(--gold); }
.xd-tip { margin: 0 2px 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,207,58,.12); color: #ffe7a0; font: 700 13px var(--font-body); }
.xd-pitch { position: relative; width: 100%; aspect-ratio: .68; border-radius: 16px; overflow: visible;
  background: radial-gradient(90% 50% at 50% 0%, rgba(140,110,255,.2), transparent 70%), linear-gradient(180deg, rgba(24,16,60,.85), rgba(14,10,38,.92));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.xd-pitch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.22); }
.xd-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.22); border-radius: 50%; }
.xd-pitch.sm { aspect-ratio: .8; }
.xd-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.xd-links .ln { stroke-width: .9; vector-effect: non-scaling-stroke; stroke-width: 3; stroke-linecap: round; }
.xd-links .green { stroke: #3ee66b; } .xd-links .orange { stroke: #ffcf3a; } .xd-links .red { stroke: #ff4d6a; } .xd-links .none { stroke: rgba(255,255,255,.12); stroke-dasharray: 4 6; }
.xd-slot { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.xd-slot.sel .xc { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.06); }
.xd-slot.glow .xc { box-shadow: 0 0 0 3px #3ee66b; animation: glPulse 1.4s ease-in-out infinite; }
.xc { position: relative; width: var(--cw); aspect-ratio: .74; padding: 0; border: 0; border-radius: 9px; overflow: hidden; color: #fff; display: grid; grid-template-rows: auto 1fr auto;
  background: linear-gradient(160deg, var(--k1, #3b4f8f), var(--k2, #141a3a)); box-shadow: inset 0 0 0 1.5px var(--rc, #ffcf3a); --rc: #ffcf3a; transition: transform .15s; }
.xc.bronze { --rc: #f0b98c; } .xc.silver { --rc: #dfe5ee; } .xc.gold { --rc: #ffcf3a; }
.xc-top { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 0; position: relative; z-index: 1; }
.xc-top b { font: 900 calc(var(--cw) * .28) "Rubik", sans-serif; line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.xc-top small { font: 700 calc(var(--cw) * .17) "Oswald", sans-serif; letter-spacing: .04em; }
.xc.off .xc-top small { color: #ff8a9a; }
.xc-f { position: absolute; left: 50%; bottom: 18%; width: 86%; transform: translateX(-50%); }
.xc-sil { position: absolute; left: 50%; bottom: 20%; width: 50%; height: 48%; transform: translateX(-50%); border-radius: 50% 50% 10px 10px; background: rgba(255,255,255,.15); }
.xc-n { position: relative; z-index: 1; grid-row: 3; padding: 2px 2px 3px; background: var(--rc); color: #120c38; font: 900 calc(var(--cw) * .16) "Rubik", sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc.bronze .xc-n { color: #2b1606; }
.xc-c { position: absolute; right: 2px; top: 30%; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: #1c1400; font: 900 10px "Rubik"; font-style: normal; display: grid; place-items: center; z-index: 2; }
.xc.empty { place-content: center; justify-items: center; gap: 2px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); border: 1.5px dashed transparent; }
.xc-plus { font: 900 calc(var(--cw) * .42) "Rubik", sans-serif; color: var(--gold); line-height: 1; }
.xc.empty small { font: 700 calc(var(--cw) * .2) "Oswald", sans-serif; color: rgba(255,255,255,.85); }
.xc-ch { margin-top: 3px; cursor: pointer; }
.xc-ch.cl { min-width: 22px; padding: 1px 6px; border-radius: 99px; font: 900 12px "Rubik", sans-serif; text-align: center; background: #120c38; box-shadow: inset 0 0 0 1.5px currentColor; }
.xc-ch.cg { color: #3ee66b; } .xc-ch.cy { color: #ffcf3a; } .xc-ch.cr { color: #ff6b80; }
.xc-ch.new { display: flex; gap: 3px; padding: 3px 5px; border-radius: 99px; background: #120c38; }
.xc-ch.new i { width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; background: rgba(255,255,255,.22); }
.xc-ch.new i.on { background: #3ee6c1; box-shadow: 0 0 0 1.5px rgba(62,230,193,.6); }
.xd-bench { margin-top: 12px; }
.xd-bh { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 6px; }
.xd-bh b { font: 900 16px "Rubik", sans-serif; } .xd-bh small { font: 800 13px "Rubik", sans-serif; color: rgba(255,255,255,.75); }
.xd-brow { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.xd-brow::-webkit-scrollbar { display: none; }
.xd-slot.b { position: static; transform: none; flex: none; }
.xd-act { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 14px 0 calc(16px + var(--tg-safe-area-inset-bottom, 0px)); }
.xd-act.col { grid-template-columns: 1fr; }
.xd-act .btn:disabled { opacity: .55; }
/* экран выбора из пяти */
.xp { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto auto 1fr auto; padding: calc(12px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)) 14px calc(14px + var(--tg-safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #1b1250, #0b0824); opacity: 0; transition: opacity .2s; color: #fff; }
.xp.in { opacity: 1; } .xp.out { opacity: 0; }
.xp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.xp-top b { font: 900 19px "Rubik", sans-serif; }
.xp-x { width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; }
.xp-note { margin: 0 0 8px; font: 600 13px var(--font-body); color: #ffe7a0; }
.xp-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 10px; align-content: start; padding: 4px 2px 12px; }
@media (min-width: 420px) { .xp-grid { grid-template-columns: repeat(3, 1fr); } }
.xp-c { display: grid; justify-items: center; gap: 6px; padding: 8px 6px 10px; border: 0; border-radius: 16px; color: #fff; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.xp-c.on { background: rgba(255,207,58,.14); box-shadow: inset 0 0 0 2px var(--gold); }
.xp-c .cc { --w: min(132px, 38vw) !important; }
.xp-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.xp-meta span { padding: 2px 7px; border-radius: 8px; background: rgba(255,255,255,.08); font: 700 11px var(--font-body); color: rgba(255,255,255,.9); }
.xp-meta .xp-pos { background: rgba(255,207,58,.16); color: #ffe7a0; }
.xp-pv { display: grid; gap: 2px; font: 700 12px var(--font-body); color: rgba(255,255,255,.8); text-align: center; }
.xp-pv b { color: var(--gold); } .xp-pv i { font-style: normal; color: rgba(255,255,255,.55); }
.xp-foot .btn { width: 100%; }
.xc.big { --cw: 120px; }
/* объяснение химии */
.xd-ex { color: rgba(255,255,255,.85); font-weight: 600; line-height: 1.45; margin: 6px 0; text-align: left; }
.xd-exl, .xd-exn { display: grid; gap: 6px; margin: 8px 0; text-align: left; }
.xd-exl span { display: flex; align-items: center; gap: 8px; font: 700 13px var(--font-body); }
.xd-exl i { width: 22px; height: 4px; border-radius: 2px; flex: none; }
.xd-exl .green i { background: #3ee66b; } .xd-exl .orange i { background: #ffcf3a; } .xd-exl .red i { background: #ff4d6a; }
.xd-exn span { display: grid; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.07); }
.xd-exn small { color: rgba(255,255,255,.75); font-weight: 600; }
.xd-pr { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 8px; margin: 5px 0; text-align: left; font: 700 13px var(--font-body); }
.xd-pr > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xd-prb { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); }
.xd-prb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #3ee6c1; }
.xd-prb em { position: absolute; top: -2px; width: 2px; height: 12px; background: rgba(255,255,255,.6); }
.xd-pr b small { color: rgba(255,255,255,.65); font-weight: 600; }
/* итог */
.xd-res .sb { margin-bottom: 12px; }
.xd-rs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.xd-rs span { display: grid; justify-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.07); }
.xd-rs small { font: 700 12px var(--font-body); color: rgba(255,255,255,.75); }
.xd-rs b { font: 900 40px "Rubik", sans-serif; line-height: 1.1; } .xd-rs b i { font-size: 18px; font-style: normal; color: rgba(255,255,255,.6); }
.xd-rs em { font: 800 12px "Rubik"; font-style: normal; color: var(--gold); }
.xd-best { text-align: center; font: 700 13px var(--font-body); color: rgba(255,255,255,.85); }
/* матч */
.xm-intro { display: grid; gap: 14px; }
.xm-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.07); text-align: center; }
.xm-vs b { display: block; font: 900 16px "Rubik", sans-serif; } .xm-vs small { font: 600 12px var(--font-body); color: rgba(255,255,255,.8); }
.xm-vs i { font: 900 22px "Rubik"; font-style: normal; color: var(--gold); }
.xm { display: grid; gap: 12px; }
.xm-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 18px; background: rgba(12,8,34,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.xm-board.flash { animation: xmFlash .8s ease; }
@keyframes xmFlash { 30% { box-shadow: inset 0 0 0 2px var(--gold); } }
.xm-t { display: grid; min-width: 0; } .xm-t.r { text-align: right; }
.xm-t b { font: 900 14px "Rubik", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xm-t small { font: 700 11px var(--font-body); color: rgba(255,255,255,.7); }
.xm-sc { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 4px; text-align: center; }
.xm-sc b { font: 900 36px "Rubik", sans-serif; line-height: 1; } .xm-sc i { font: 900 24px "Rubik"; font-style: normal; color: rgba(255,255,255,.6); }
.xm-sc small { grid-column: 1 / -1; font: 800 13px "Rubik", sans-serif; color: var(--gold); }
.xm-time { display: block; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; } .xm-time i { display: block; height: 100%; background: var(--gold); transition: width .4s; }
.xm-tac { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,207,58,.5); }
.xm-tl { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.xm-tl span { font: 800 12px "Rubik", sans-serif; color: rgba(255,255,255,.7); text-transform: uppercase; }
.xm-tl b { text-align: center; font: 900 18px "Rubik", sans-serif; color: var(--gold); }
.xm-zones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.xm-zones button { height: 52px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: grid; place-items: center; }
.xm-zones button i { width: 60%; height: 8px; border-radius: 99px; }
.xm-zones .z0 i { background: #4fc3ff; } .xm-zones .z1 i { background: #8fd8ff; } .xm-zones .z2 i { background: #fff; } .xm-zones .z3 i { background: #ffb36b; } .xm-zones .z4 i { background: #ff5a6e; }
.xm-zones button.on { background: rgba(255,207,58,.2); box-shadow: inset 0 0 0 2px var(--gold); transform: translateY(-2px); }
.xm-range { width: 100%; margin: 12px 0 4px; accent-color: #ffcf3a; height: 28px; }
.xm-hint { margin: 2px 0 0; text-align: center; font: 600 13px var(--font-body); color: rgba(255,255,255,.8); }
.xm-stats { display: flex; justify-content: center; gap: 18px; font: 700 13px var(--font-body); color: rgba(255,255,255,.8); } .xm-stats b { color: #fff; }
.xm-feed { display: grid; gap: 6px; }
.xm-ev { display: grid; grid-template-columns: 34px 24px 1fr auto; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font: 700 13px var(--font-body); }
.xm-ev b { font: 900 13px "Rubik"; color: rgba(255,255,255,.8); } .xm-ev em { font-style: normal; } .xm-ev small { color: rgba(255,255,255,.65); }
.xm-ev.k-goal.us { background: rgba(62,230,107,.16); box-shadow: inset 0 0 0 1.5px rgba(62,230,107,.6); }
.xm-ev.k-goal.them { background: rgba(255,77,106,.14); box-shadow: inset 0 0 0 1.5px rgba(255,77,106,.55); }
.xm-ev:first-child { animation: moQ .4s ease; }
.xm-final { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 6px 0; font: 900 56px "Rubik", sans-serif; }
.xm-final i { font-style: normal; color: rgba(255,255,255,.5); }
.xm-final.win b:first-child, .xm-final.lose b:last-child { color: var(--gold); }
.xm-feed.all { margin-bottom: 4px; }
.xd-h { display: grid; gap: 2px; margin: 0 0 6px; font: 900 20px/1.15 "Rubik", sans-serif; text-align: left; }
.xd-h b { font: 900 15px "Rubik", sans-serif; color: var(--gold); }
.xd-act { grid-template-columns: 1.5fr 1fr; }
.xd-act .btn { font-size: 14px; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.xd-bar b { white-space: nowrap; font-size: clamp(15px, 5vw, 20px); }
@media (max-width: 360px) { .xd-act { grid-template-columns: 1fr; } }

/* ===== Драфт v2: поле, карточки, выбор ===== */
.xd-lead { font: 900 20px "Rubik", sans-serif; color: #fff; margin: 8px 2px 12px; }
.xd-opt { padding: 18px; gap: 4px; }
.xd-opt span { font: 700 13px var(--font-body); color: rgba(255,255,255,.7); }
.xd-bar { display: grid; grid-template-columns: auto 1fr 1.3fr; gap: 6px; align-items: stretch; margin-bottom: 10px; padding: 6px; border-radius: 18px; background: rgba(12,8,34,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.xd-bar > * { box-shadow: none  !important; background: none !important; padding: 4px 10px !important; }
.xd-f { display: grid; place-items: center; padding: 0 12px !important; border-radius: 12px; background: rgba(255,255,255,.08) !important; font: 900 16px "Rubik", sans-serif; white-space: nowrap; }
.xd-st { position: relative; display: grid !important; gap: 0 !important; align-content: center; border: 0; color: #fff; text-align: left; }
.xd-st small { font: 800 11px "Rubik", sans-serif !important; color: rgba(255,255,255,.6) !important; text-transform: uppercase; letter-spacing: .04em; }
.xd-st b { font: 900 26px/1 "Rubik", sans-serif !important; }
.xd-st b em { font-style: normal; font-size: 14px; color: rgba(255,255,255,.55); }
.xd-st > i { position: absolute; right: 8px; top: 6px; font: 700 10px var(--font-body); font-style: normal; color: rgba(255,255,255,.5); }
.xd-chem b { color: var(--gold) !important; }
.xd-cbar { display: block; height: 4px; margin-top: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.xd-cbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffcf3a, #3ee66b); transition: width .4s; }
/* поле с разметкой */
.xd-pitch { aspect-ratio: .7; border-radius: 18px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 10%, transparent 10% 20%), radial-gradient(90% 50% at 50% 0%, rgba(140,110,255,.22), transparent 70%), linear-gradient(180deg, #221763, #120c3a) !important; }
.xd-pitch::before, .xd-pitch::after { border-color: rgba(255,255,255,.28) !important; }
.xd-mk { position: absolute; inset: 0; pointer-events: none; }
.xd-mk i { position: absolute; left: 50%; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.28); }
.xd-mk .pa { width: 56%; height: 15%; } .xd-mk .ga { width: 26%; height: 6%; }
.xd-mk .t { top: -2px; border-top: 0; border-radius: 0 0 6px 6px; } .xd-mk .b { bottom: -2px; border-bottom: 0; border-radius: 6px 6px 0 0; }
/* карточка на поле */
#xdraft { --cw: clamp(46px, 14.6vw, 64px); }
.xc { aspect-ratio: .72 !important; border-radius: 10px !important; overflow: visible !important; box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 2px var(--rc)  !important; grid-template-rows: 1fr auto !important; }
.xc::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 5px, transparent 5px 10px); pointer-events: none; }
.xc-r { position: absolute; left: 4px; top: 3px; z-index: 2; display: grid; justify-items: center; line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.xc-r b { font: 900 calc(var(--cw) * .3) "Rubik", sans-serif; }
.xc-r small { font: 700 calc(var(--cw) * .15) "Oswald", sans-serif; letter-spacing: .04em; }
.xc.off .xc-r small { color: #ff8a9a; }
.xc-cr { position: absolute; right: 3px; top: 3px; z-index: 2; width: calc(var(--cw) * .26); height: calc(var(--cw) * .26); padding: 1px; border-radius: 50%; background: #fff; object-fit: contain; }
.xc-f { bottom: calc(var(--cw) * .3) !important; width: 80% !important; z-index: 1; border-radius: 0 0 4px 4px; }
.xc-n { grid-row: 2 !important; border-radius: 0 0 9px 9px; font-size: calc(var(--cw) * .17) !important; padding: 3px 2px !important; text-align: center; }
.xc-top { display: none; }
.xc-c { top: auto !important; bottom: calc(var(--cw) * .34) !important; right: -5px !important; width: 18px !important; height: 18px !important; box-shadow: 0 0 0 2px #120c38; }
/* химия: на краю карточки */
.xc-ch { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 3; margin: 0 !important; }
.xc-ch.cl { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; border-radius: 99px; background: #120c38 !important; box-shadow: 0 0 0 2px currentColor; font: 900 12px "Rubik", sans-serif; }
.xc-ch.new { padding: 4px 6px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.25); }
.xd-slot { padding-bottom: 6px; }
.xc.empty { box-shadow: inset 0 0 0 2px rgba(255,255,255,.3)  !important; background: rgba(255,255,255,.05) !important; grid-template-rows: auto !important; }
.xc.empty::before { display: none; }
.xc.empty small { font-size: calc(var(--cw) * .2) !important; }
.xd-pitch.swapping .xd-slot:not(.sel) .xc:not(.empty) { animation: xdWiggle 1.2s ease-in-out infinite; }
@keyframes xdWiggle { 50% { box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 2px var(--rc), 0 0 0 3px rgba(255,255,255,.35)  !important; } }
.xd-slot.sel .xc { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 3px var(--gold), 0 10px 22px rgba(255,207,58,.45)  !important; }
.xd-pitch.placing .xd-slot:not(.glow) { opacity: .45; }
.xd-brow { gap: 8px; padding: 6px 2px 14px; }
.xd-bh small { color: rgba(255,255,255,.6) !important; }
.xd-links .ln { stroke-width: 3.5; }
/* экран выбора из пяти */
.xp { grid-template-rows: auto 1fr auto !important; background: radial-gradient(80% 40% at 50% 0%, rgba(150,120,255,.35), transparent 70%), linear-gradient(180deg, #1b1250, #0b0824) !important; }
.xp-top { gap: 10px; justify-content: flex-start !important; }
.xp-top b { flex: 1; font: 900 20px "Rubik", sans-serif; }
.xp-pos { padding: 6px 10px; border-radius: 10px; background: var(--gold); color: #1c1400; font: 900 15px "Rubik", sans-serif; }
.xp-grid { display: flex !important; flex-wrap: wrap; justify-content: center; align-content: center; gap: 14px 10px !important; overflow-y: auto; }
.xp-c { --cardw: min(126px, calc((100vw - 60px) / 3)); padding: 0 !important; background: none !important; box-shadow: none  !important; gap: 8px !important; transition: transform .15s; }
.xp-c .cc { --w: var(--cardw) !important; }
.xp-c.on { transform: translateY(-6px); }
.xp-c.on .cc { box-shadow: 0 0 0 3px var(--gold), 0 14px 30px rgba(255,207,58,.35)  !important; }
.xp-grid:has(.xp-c.on) .xp-c:not(.on) { opacity: .55; }
.xp-d { padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.08); font: 800 12px "Rubik", sans-serif; color: rgba(255,255,255,.6); }
.xp-d.up { background: rgba(62,230,107,.16); color: #5dff8a; }
.xp-foot { display: grid; gap: 8px; }
.xp-sum { display: flex; justify-content: center; gap: 16px; min-height: 20px; font: 700 14px var(--font-body); color: rgba(255,255,255,.7); }
.xp-sum b { color: #fff; }
.xp-meta, .xp-pv, .xp-note { display: none !important; }

/* ===== матч v2 ===== */
.xm { position: relative; gap: 10px !important; }
.xm-board { grid-template-columns: 1fr auto 1fr !important; padding: 14px 12px !important; background: linear-gradient(180deg, rgba(30,20,80,.9), rgba(12,8,34,.9)) !important; }
.xm-t { display: grid !important; justify-items: start; gap: 6px; } .xm-t.r { justify-items: end; }
.xm-b { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 900 15px "Rubik", sans-serif; font-style: normal; }
.xm-b.us { background: linear-gradient(135deg, #ffcf3a, #ff9a3a); color: #1c1400; } .xm-b.them { background: linear-gradient(135deg, #ff5a6e, #8a1f3a); color: #fff; }
.xm-t b { font: 900 13px "Rubik", sans-serif !important; max-width: 100%; }
.xm-sc b { font-size: 44px !important; }
.xm-sc small { justify-self: center; margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: rgba(255,207,58,.16); }
.xm-field { position: relative; height: 92px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 10%, transparent 10% 20%), linear-gradient(180deg, #221763, #150e44); }
.xm-half { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255,255,255,.28); }
.xm-half::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); margin-left: -1px; border: 2px solid rgba(255,255,255,.28); border-radius: 50%; }
.xm-goal { position: absolute; top: 28%; bottom: 28%; width: 14%; border: 2px solid rgba(255,255,255,.28); }
.xm-goal.l { left: -2px; border-left: 0; } .xm-goal.r { right: -2px; border-right: 0; }
.xm-ball { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #cfd6e0); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); transition: left 1.2s cubic-bezier(.4,0,.2,1); }
.xm-flag { position: absolute; top: 6px; padding: 2px 8px; border-radius: 99px; font: 800 10px "Rubik", sans-serif; }
.xm-flag.us { left: 6px; background: rgba(255,207,58,.2); color: #ffe7a0; } .xm-flag.them { right: 6px; background: rgba(255,90,110,.2); color: #ffb3bd; }
.xm-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); transition: width .5s; }
.xm-tac { padding: 10px !important; box-shadow: inset 0 0 0 1.5px rgba(255,207,58,.45)  !important; }
.xm-zones { gap: 5px !important; }
.xm-zones button { height: 62px !important; display: grid !important; place-items: center; align-content: center; gap: 6px; color: rgba(255,255,255,.7); }
.xm-zones button span { font: 800 10px "Rubik", sans-serif; }
.xm-zones button.on { color: #fff; }
.xm-axis { display: flex; justify-content: space-between; margin: 8px 2px 0; font: 800 10px "Rubik", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.xm-feed { gap: 5px !important; }
.xm-ev { grid-template-columns: 34px 24px 1fr !important; }
.xm-goalfx { position: absolute; left: 0; right: 0; top: 18%; z-index: 5; text-align: center; font: 900 72px "Rubik", sans-serif; color: var(--gold); text-shadow: 0 6px 0 rgba(0,0,0,.35); pointer-events: none; animation: xmGoal 1.4s cubic-bezier(.2,1.4,.4,1) both; }
.xm-goalfx.them { color: #ff6b80; text-shadow: 0 6px 0 rgba(0,0,0,.35); }
@keyframes xmGoal { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.15); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05) translateY(-20px); } }
.xm-note { margin: 0; text-align: center; font: 700 13px var(--font-body); color: rgba(255,255,255,.65); }
.xc-ch { bottom: -19px !important; }
.xd-slot { padding-bottom: 12px; }
.xc-n { position: relative; z-index: 2 !important; }
.cc:not(.lock) .cc-sil { clip-path: ellipse(32% 40% at 50% 40%); }
.xm-ball { transition: left .55s cubic-bezier(.4,0,.2,1) !important; }
.xm-goalfx.hold { animation: none; opacity: 1; }

/* ===== Драфт v3: FUT-щиты, поле в перспективе, карусель выбора ===== */
#xdraft { --cw: clamp(50px, 15.5vw, 68px); }
.xd-pitch { aspect-ratio: .8 !important; border-radius: 0 !important; box-shadow: none  !important; background: none !important; overflow: visible; margin-top: 4px; }
.xd-pitch::before, .xd-pitch::after, .xd-mk { display: none !important; }
.xd-field { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xd-field polygon, .xd-field line, .xd-field ellipse { vector-effect: non-scaling-stroke; }
.xd-field .st polygon { fill: rgba(255,255,255,.035); stroke: none; }
.xd-field .mk > polygon:first-child { fill: url(#none); fill: rgba(40,28,110,.55); }
.xd-field .mk polygon, .xd-field .mk line, .xd-field .mk ellipse { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 2; }
.xd-field .mk > polygon:first-child { fill: rgba(36,24,100,.6); stroke: rgba(255,255,255,.6); }
.xd-links .ln { stroke-width: 2.5 !important; stroke-linecap: round; filter: drop-shadow(0 0 3px currentColor); }
.xd-links .green { stroke: #48f07a; color: #48f07a; } .xd-links .orange { stroke: #ffd24a; color: #ffd24a; } .xd-links .red { stroke: #ff5872; color: #ff5872; }
.xd-links .none { stroke: rgba(255,255,255,.14) !important; filter: none; stroke-dasharray: 3 6; }
.xd-slot { transform: translate(-50%, -50%) scale(var(--k, 1)) !important; display: grid; justify-items: center; padding: 0 !important; }
/* карточка-щит */
.fu { --t: #3a2700; --g1: #fff5c4; --g2: #e8c157; --g3: #a87a12; position: relative; width: var(--cw); aspect-ratio: .72; padding: 0; border: 0; color: var(--t);
  clip-path: polygon(50% 0, 88% 3%, 100% 11%, 100% 85%, 50% 100%, 0 85%, 0 11%, 12% 3%);
  background: radial-gradient(70% 40% at 70% 18%, rgba(255,255,255,.55), transparent 70%), linear-gradient(165deg, var(--g1), var(--g2) 45%, var(--g3));
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); transition: transform .18s; }
.fu.silver { --t: #1d2433; --g1: #ffffff; --g2: #c9d1dc; --g3: #7c8796; }
.fu.legend { --t: #493417; --g1: #fffef3; --g2: #ede6cd; --g3: #b79550; }
.fu.legend .fu-f { top: 6%; height: 68%; object-fit: contain; object-position: center bottom; }
.h2-sheet .games-mode-switch { margin: 0 18px 12px; flex-shrink: 0; }
.h2-sheet [data-picker-panel][hidden] { display: none !important; }
.h2-sheet .online-game-card { width: 100%; margin-bottom: 10px; }
.fu.bronze { --t: #2b1606; --g1: #ffd9b8; --g2: #c98d5c; --g3: #7d4a24; }
.fu::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px); pointer-events: none; }
.fu-l { position: absolute; left: 9%; top: 11%; z-index: 2; display: grid; justify-items: center; gap: calc(var(--cw) * .02); line-height: 1; }
.fu-l b { font: 900 calc(var(--cw) * .28) "Rubik", sans-serif; }
.fu-l small { font: 800 calc(var(--cw) * .13) "Oswald", sans-serif; letter-spacing: .03em; }
.fu-l em { font-style: normal; font-size: calc(var(--cw) * .14); line-height: 1; }
.fu-l img { width: calc(var(--cw) * .17); height: calc(var(--cw) * .17); object-fit: contain; }
.fu.off .fu-l small { color: #d1213f; }
.fu-f { position: absolute; right: 3%; top: 8%; width: 66%; z-index: 1; }
.fu-sil { position: absolute; right: 12%; top: 18%; width: 46%; height: 44%; border-radius: 50% 50% 12px 12px; background: rgba(0,0,0,.14); }
.fu-n { position: absolute; left: 8%; right: 8%; bottom: 17%; z-index: 2; padding-top: calc(var(--cw) * .03); border-top: 1px solid color-mix(in srgb, var(--t) 30%, transparent); text-align: center;
  font: 900 calc(var(--cw) * .135) "Rubik", sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-c { position: absolute; right: 9%; bottom: 30%; z-index: 3; width: calc(var(--cw) * .24); height: calc(var(--cw) * .24); border-radius: 50%; background: #1b1250; color: var(--gold); font: 900 calc(var(--cw) * .14) "Rubik"; font-style: normal; display: grid; place-items: center; }
.fu.empty { clip-path: polygon(50% 0, 88% 3%, 100% 11%, 100% 85%, 50% 100%, 0 85%, 0 11%, 12% 3%); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); filter: none; display: grid; place-content: center; justify-items: center; color: #fff; }
.fu.empty::after { display: none; }
.fu-plus { font: 900 calc(var(--cw) * .4) "Rubik", sans-serif; color: var(--gold); line-height: 1; }
.fu.empty small { font: 800 calc(var(--cw) * .17) "Oswald", sans-serif; }
.fu-ch { position: relative; z-index: 3; margin-top: -4px; cursor: pointer; }
.fu-ch.cl { min-width: 18px; height: 16px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: #120c38; box-shadow: 0 0 0 2px currentColor; font: 900 12px "Rubik", sans-serif; }
.fu-ch.cg { color: #48f07a; } .fu-ch.cy { color: #ffd24a; } .fu-ch.cr { color: #ff6b80; }
.fu-ch.new { display: flex; gap: 2px; padding: 2px 4px; border-radius: 99px; background: #120c38; }
.fu-ch.new i { width: 4.5px; height: 4.5px; transform: rotate(45deg); background: rgba(255,255,255,.22); }
.fu-ch.new i.on { background: #3ee6c1; }
.xd-slot.sel .fu { transform: translateY(-5px) scale(1.08); filter: drop-shadow(0 0 0 #000) ; }
.xd-pitch.swapping .xd-slot:not(.sel) .fu:not(.empty) { animation: fuPulse 1.2s ease-in-out infinite; }
@keyframes fuPulse { 50% { filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)) brightness(1.15); } }
.xd-slot.glow .fu { animation: fuGlow 1.2s ease-in-out infinite; }
@keyframes fuGlow { 50% { filter: none; } }
.xd-pitch.placing .xd-slot:not(.glow) { opacity: .35; }
.xd-brow .fu { --cw: 56px; }
.xd-slot.b { display: block; }
.xd-slot.b.sel .fu { transform: translateY(-4px); filter: none; }
/* карусель выбора */
.xp { grid-template-rows: auto 1fr auto auto !important; }
.xp-row { display: flex; align-items: center; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -14px;
  padding: 10px calc(50% - min(29vw, 115px)); }
.xp-row::-webkit-scrollbar { display: none; }
.xp-c { flex: none; display: grid; justify-items: center; gap: 12px; scroll-snap-align: center; transition: opacity .15s; will-change: transform; padding: 0 2px !important; background: none !important; box-shadow: none  !important; }
.xp-c .fu { --cw: min(58vw, 230px); pointer-events: none; }
.xp-dots { display: flex; justify-content: center; gap: 7px; margin: 6px 0 10px; }
.xp-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); transition: width .2s, background .2s; }
.xp-dots i.on { width: 22px; background: var(--gold); }
.xp-d { padding: 4px 12px !important; font-size: 13px !important; }
.xp-sum { font-size: 15px !important; }
.xd-brow { padding: 6px 2px 16px !important; }
.xd-brow .xd-slot.b { flex: none; }

/* ===== матч v3: трансляция ===== */
.xm-bug { display: grid; grid-template-columns: auto auto auto 1fr; align-items: stretch; justify-self: center; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.xm-tm i { display: grid; place-items: center; height: 100%; min-width: 64px; padding: 0 12px; font: 900 18px "Rubik", sans-serif; font-style: normal; }
.xm-tm.us i { background: linear-gradient(180deg, #ffd65a, #f0a51e); color: #1c1400; } .xm-tm.them i { background: linear-gradient(180deg, #ff6b80, #c2304b); color: #fff; }
.xm-s { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: #0d0a26; font: 900 30px "Rubik", sans-serif; }
.xm-s em { font-style: normal; color: rgba(255,255,255,.45); }
.xm-clock { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #1d1650; font: 900 15px "Rubik", sans-serif; color: var(--gold); }
.xm-clock .live { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 1.5px #ff3b5c; animation: glPulse 1.2s infinite; }
.xm-pitch { position: relative; aspect-ratio: 1.75; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.4);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 10%, transparent 10% 20%), linear-gradient(180deg, #2a1d78, #170f4a); }
.xm-pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xm-pitch svg rect, .xm-pitch svg line, .xm-pitch svg circle { fill: none; stroke: rgba(255,255,255,.4); stroke-width: .5; vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.xm-p { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; transition: left .6s ease, top .6s ease; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.xm-p.us { background: #ffcf3a; } .xm-p.them { background: #ff5a6e; }
.xm-pitch .xm-ball { width: 9px !important; height: 9px !important; margin: -4.5px 0 0 -4.5px !important; transition: left .55s ease, top .55s ease !important; z-index: 2; }
.xm-pitch .xm-goalfx { top: 50%; transform: translateY(-50%); font-size: 58px; }
.xm-pitch .xm-prog { z-index: 3; }
.xm-feed { min-height: 132px; }
.xm-ev { grid-template-columns: 34px 24px 1fr !important; padding: 9px 12px !important; }
.xm-ev em b { color: var(--gold); }
.xm-ev.them em b { color: #ff8a9a; }
.xm-tt { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.xm-tt span { font: 800 11px "Rubik", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.xm-tt b { font: 900 18px "Rubik", sans-serif; color: var(--gold); }
.xm-tt small { margin-left: auto; font: 700 12px var(--font-body); color: rgba(255,255,255,.55); }
.xm-bar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); height: 44px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, #3d8bff, #7fd0ff 30%, #e9e9f5 50%, #ffb36b 70%, #ff4d6a); }
.xm-bar button { border: 0; background: none; border-right: 2px solid rgba(13,10,38,.35); }
.xm-bar button:last-of-type { border-right: 0; }
.xm-knob { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #0d0a26, 0 4px 10px rgba(0,0,0,.5); transition: left .25s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.xm-zones, .xm-field, .xm-board, .xm-time { display: none !important; }
#xdraft { --cw: clamp(46px, 14vw, 62px); }
.xd-pitch { aspect-ratio: .74 !important; }
.fu-l { top: 10%; gap: 0; }
.fu-l b { font-size: calc(var(--cw) * .26); }
.fu-l small { font-size: calc(var(--cw) * .12); margin-bottom: calc(var(--cw) * .02); }
.fu-l em { font-size: calc(var(--cw) * .12); }
.fu-l img { width: calc(var(--cw) * .15); height: calc(var(--cw) * .15); margin-top: calc(var(--cw) * .02); }
.fu-n { bottom: 16%; }
.xp-c .fu { --cw: min(52vw, 210px); }
.xp-row { padding: 10px calc(50% - min(26vw, 105px)); }
.xd-slot.b { transform: none !important; position: static !important; }

/* ===== анимации драфта ===== */
.xd-pitch { perspective: 900px; }
.xd-slot .fu { transform-style: preserve-3d; backface-visibility: visible; will-change: transform; }
.fu.land { animation: fuLand .7s ease-out; }
@keyframes fuLand { 0% { filter: drop-shadow(0 0 0 rgba(255,207,58,0)) brightness(1.6); } 40% { filter:  brightness(1.25); } 100% { filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); } }
.xd-slot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; }
.xd-links line { transition: stroke .3s; }
.xp-c .fu { transform-style: preserve-3d; }
.xp-c.on .fu, .xp-c .fu { transition: filter .2s; }
/* матч */
.xm-stage { position: relative; perspective: 800px; }
.xm-pitch { transform-origin: 50% 80%; will-change: transform; }
.xm-p { transition-property: left, top; transition-timing-function: cubic-bezier(.45,.05,.35,1); will-change: left, top; }
.xm-pitch .xm-ball { transition: none !important; will-change: left, top, transform; }
.xm-stage .xm-goalfx { position: absolute; left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); margin: 0; animation: none; white-space: nowrap; z-index: 6; }
.xm-feed { perspective: 600px; }
.xm-ev { transform-origin: 50% 0; }
.xm-s b { display: inline-block; transform-style: preserve-3d; }
.xm-knob { transition: left .35s cubic-bezier(.3,1.5,.5,1) !important; }
.xm-bar button.on { box-shadow: inset 0 0 0 3px rgba(13,10,38,.5); }

/* ===== ИПК в стиле FUT: сине-бирюзовый фон, полупрозрачные панели, светлые кнопки-переливы ===== */
.rw-tabs .rw-sbc { color: #7af0c8; }
.rw-tabs .rw-sbc i { position: absolute; top: 6px; right: 10%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3b5c; color: #fff; font: 700 10px/16px var(--font-body); letter-spacing: 0; }
#sbc { --fx-panel: rgba(30, 42, 68, .82); --fx-line: rgba(255,255,255,.09); --fx-mint: #7af0c8; min-height: 100vh; padding-bottom: 96px;
  background: radial-gradient(120% 60% at 90% 30%, rgba(40,150,170,.35), transparent 60%), radial-gradient(90% 50% at 0% 85%, rgba(20,120,90,.45), transparent 65%), linear-gradient(170deg, #17264a 0%, #143a56 48%, #0d4a44 100%); background-attachment: fixed; }
#sbc .fx-top { background: rgba(14, 22, 42, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#sbc .topbar-title small { color: rgba(255,255,255,.7); }
#sbc-body { padding: 12px 12px 0; perspective: 1000px; }
.fx-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 12px; padding: 0 12px; }
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-tabs button { flex: none; padding: 10px 18px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(16, 24, 44, .7); color: rgba(255,255,255,.82); font: 600 15px var(--font-body); transition: border-color .2s, color .2s, transform .15s; }
.fx-tabs button.on { border-color: var(--fx-mint); color: #fff; font-weight: 800; box-shadow: 0 0 0 1px rgba(122,240,200,.25); }
.fx-tabs button:active { transform: scale(.96); }
.fx-club { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 4px 12px; color: #fff; font-size: 14px; }
.fx-club b { font-size: 17px; } .fx-club small { color: rgba(255,255,255,.62); font-size: 12px; text-align: right; }
.fx-list { display: grid; gap: 14px; }
.fx-card { display: block; width: 100%; text-align: left; color: #fff; padding: 16px 16px 0; border-radius: 22px; background: var(--fx-panel); border: 1px solid var(--fx-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); transform-origin: 50% 0; transition: transform .18s; }
.fx-card:active { transform: scale(.985); }
.fx-card.done { opacity: .62; }
.fx-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fx-h b { flex: 1; font: 800 21px/1.15 var(--font-body); letter-spacing: -.01em; }
.fx-ico { flex: none; display: grid; place-items: center; width: 40px; height: 44px; font: 800 18px var(--font-body); color: #ffe08a;
  background: linear-gradient(160deg, #3a3220, #14120c); clip-path: polygon(50% 0, 100% 14%, 100% 70%, 50% 100%, 0 70%, 0 14%); box-shadow: inset 0 0 0 2px #c9a24a; }
.fx-rep { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; font: 800 16px var(--font-body); }
.fx-m { display: flex; gap: 12px; align-items: center; }
.fx-l { flex: 1; min-width: 0; }
.fx-l p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.35; color: rgba(255,255,255,.92); }
.fx-req { font-size: 12.5px; color: var(--fx-mint); margin-bottom: 8px; line-height: 1.35; }
.fx-prog { margin-bottom: 10px; } .fx-prog small { display: block; margin-top: 5px; font-size: 13px; color: rgba(255,255,255,.85); font-weight: 600; }
.fx-bar { display: block; height: 14px; border-radius: 8px; background: rgba(255,255,255,.22); overflow: hidden; }
.fx-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #6fe3c1, #b8a4ff); transition: width .6s cubic-bezier(.2,.9,.3,1); }
.fx-rw small { display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px; } .fx-rw b { font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.fx-art { flex: none; width: 108px; display: grid; place-items: center; }
.fx-f { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px -16px 0; padding: 12px 16px 14px; border-top: 1px solid var(--fx-line); font-size: 13.5px; color: rgba(255,255,255,.9); }
.fx-ic { font-style: normal; color: #ffc93a; margin-right: 6px; }
.fx-ok { color: var(--fx-mint); font-weight: 800; }
/* пак в стиле FUT: фольга, логотип, диагональный блик */
  background: linear-gradient(135deg, var(--c) 0%, var(--a) 30%, var(--b) 62%, var(--a) 100%); box-shadow: 0 8px 18px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.35); transform: perspective(500px) rotateY(-12deg); }
.fx-coins { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.fx-coins .coin { position: absolute; width: 46px; height: 46px; } .fx-coins .coin:nth-child(1) { transform: translate(-16px, -12px); } .fx-coins .coin:nth-child(2) { transform: translate(14px, -18px); } .fx-coins .coin:nth-child(3) { transform: translate(0, 6px); }
.fx-coins b { position: absolute; bottom: 0; font: 800 17px var(--font-body); color: #ffe08a; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.fx-coins.sm { width: 52px; height: 52px; } .fx-coins.sm .coin { width: 26px; height: 26px; } .fx-coins.sm b { font-size: 12px; }
.fx-cc { transform: perspective(600px) rotateY(-10deg); }
/* группа «Игрок недели» */
.fx-gh { display: flex; gap: 12px; align-items: center; padding: 16px; margin-bottom: 14px; border-radius: 22px; color: #fff;
  background: radial-gradient(80% 90% at 85% 40%, rgba(255,70,100,.35), transparent 70%), var(--fx-panel); border: 1px solid var(--fx-line); }
.fx-gl { flex: 1; min-width: 0; } .fx-gl b { display: block; font: 800 22px/1.15 var(--font-body); margin-bottom: 6px; } .fx-gl p { margin: 0 0 10px; font-size: 14.5px; color: rgba(255,255,255,.9); line-height: 1.35; }
.fx-gl .fx-f { margin: 0; padding: 0; border: 0; }
.fx-gart { position: relative; flex: none; animation: fxFloat 4s ease-in-out infinite; }
.fx-gart.got { filter: saturate(.6); } .fx-gok { position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--fx-mint); color: #0b1a14; font: 900 17px/30px var(--font-body); text-align: center; font-style: normal; }
@keyframes fxFloat { 50% { transform: translateY(-6px) rotateY(8deg); } }
/* экран испытания */
.sx-head { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 18px; background: rgba(14, 22, 42, .72); border: 1px solid var(--fx-line); color: #fff; }
.sx-stat small { display: block; font-size: 12px; color: rgba(255,255,255,.7); font-weight: 600; } .sx-stat b { font: 800 22px var(--font-body); }
.sx-stat:first-child { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; } .sx-stat:first-child small { grid-column: 1 / -1; }
.sx-stars { --s: 0; position: relative; width: 74px; height: 14px; background: linear-gradient(90deg, #ffcf3a calc(var(--s) * 20%), rgba(255,255,255,.22) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 14'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7 0l2 4.6 5 .5-3.8 3.3 1.1 4.9L7 10.8 2.7 13.3l1.1-4.9L0 5.1l5-.5z'/%3E%3Cuse href='%23s' x='15'/%3E%3Cuse href='%23s' x='30'/%3E%3Cuse href='%23s' x='45'/%3E%3Cuse href='%23s' x='60'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 14'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7 0l2 4.6 5 .5-3.8 3.3 1.1 4.9L7 10.8 2.7 13.3l1.1-4.9L0 5.1l5-.5z'/%3E%3Cuse href='%23s' x='15'/%3E%3Cuse href='%23s' x='30'/%3E%3Cuse href='%23s' x='45'/%3E%3Cuse href='%23s' x='60'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100%; transition: background .4s; }
.sx-rew { margin-left: auto; }
.sx-req { list-style: none; margin: 10px 0; padding: 6px 12px; border-radius: 18px; background: rgba(14, 22, 42, .55); border: 1px solid var(--fx-line); }
.sx-req li { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: rgba(255,255,255,.88); font-size: 14px; }
.sx-req li + li { border-top: 1px solid rgba(255,255,255,.06); }
.sx-req li i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); font: 900 13px var(--font-body); font-style: normal; transition: all .25s; }
.sx-req li span { flex: 1; } .sx-req li b { font-weight: 800; color: #fff; }
.sx-req li.ok i { background: var(--fx-mint); border-color: var(--fx-mint); color: #0b1a14; } .sx-req li.ok b { color: var(--fx-mint); }
.sx-req li.bad i { background: #ff5a6e; border-color: #ff5a6e; color: #fff; }
.sx-req li.pop i { animation: sxPop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes sxPop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: none; } }
.sx-pitch { position: relative; display: grid; gap: 14px; padding: 18px 6px; border-radius: 22px; overflow: hidden; perspective: 900px;
  background: radial-gradient(70% 50% at 50% 0%, rgba(120,220,255,.18), transparent 70%), linear-gradient(180deg, #0f3b4c, #0b2e3c 60%, #0a2834); border: 1px solid var(--fx-line); }
.sx-lines { position: absolute; inset: 10px; border: 2px solid rgba(255,255,255,.08); border-radius: 12px; pointer-events: none; }
.sx-lines::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.08); }
.sx-lines::after { content: ''; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px; border: 2px solid rgba(255,255,255,.08); border-radius: 50%; }
.sx-row { position: relative; display: flex; justify-content: center; gap: 8px; }
.sx-slot { padding: 0; border: 0; background: none; width: var(--w); transform-style: preserve-3d; }
.sx-slot .cc { transform-style: preserve-3d; backface-visibility: visible; }
.sx-slot .cc.land { animation: sxLand .7s ease-out; }
@keyframes sxLand { 0% { filter: brightness(1.7); } 40% { filter: brightness(1.25) ; } 100% { filter: none; } }
.sx-empty { display: grid; place-items: center; width: var(--w); aspect-ratio: .72; border-radius: 12px; border: 2px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.05);
  clip-path: polygon(0 6%, 50% 0, 100% 6%, 100% 86%, 50% 100%, 0 86%); animation: sxBreath 2.4s ease-in-out infinite; }
.sx-empty i { font: 300 30px var(--font-body); font-style: normal; color: rgba(255,255,255,.75); }
@keyframes sxBreath { 50% { background: rgba(122,240,200,.12); } }
.sx-flash { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(122,240,200,.6) 40%, transparent 70%); animation: sxFlash 1.1s .55s ease-out both; pointer-events: none; }
@keyframes sxFlash { 0% { transform: scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(14); opacity: 0; } }
.sx-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; margin: 12px -12px 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(12,30,40,0), rgba(10,26,36,.92) 30%); }
.fx-btn { flex: 1; padding: 15px 10px; border: 0; border-radius: 12px; font: 600 18px var(--font-body); color: #0b1020; background: linear-gradient(90deg, #b8fbff 0%, #f3f0ff 50%, #dccdff 100%); box-shadow: 0 6px 18px rgba(160,200,255,.25); transition: transform .15s, opacity .2s; }
.fx-btn:active { transform: scale(.97); }
.fx-btn[disabled] { background: rgba(110,110,110,.55); color: rgba(255,255,255,.4); box-shadow: none; }
.fx-btn.ghost { background: rgba(16, 24, 44, .85); color: #fff; border: 1.5px solid rgba(255,255,255,.2); box-shadow: none; }
.fx-btn.sm { flex: none; width: 52px; }
/* шторка выбора */
.sx-sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(4,8,18,.55); animation: sxFade .25s; }
.sx-sheet-wrap.out { animation: sxFade .25s reverse forwards; }
@keyframes sxFade { from { opacity: 0; } }
.sx-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #1c2b4e, #12243a); border-top: 1px solid rgba(255,255,255,.12); color: #fff; max-width: 520px; margin: 0 auto; }
.sx-grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 2px auto 8px; }
.sx-sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sx-sh b { font: 800 19px var(--font-body); }
.sx-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; }
.sx-filt { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; flex: none; }
.sx-filt button { flex: none; padding: 8px 13px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(10,16,32,.6); color: rgba(255,255,255,.85); font: 600 13.5px var(--font-body); }
.sx-filt button.on { border-color: #7af0c8; color: #fff; }
.sx-filt .sx-sort { margin-left: auto; color: #7af0c8; }
.sx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 8px; perspective: 800px; }
.sx-pick { position: relative; padding: 0; border: 0; background: none; display: grid; place-items: center; transition: transform .15s; }
.sx-pick:active { transform: scale(.94); }
.sx-dup { position: absolute; top: -4px; right: -2px; padding: 1px 6px; border-radius: 8px; background: #7af0c8; color: #0b1a14; font: 800 11px var(--font-body); font-style: normal; }
.sx-none { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,.75); padding: 30px 10px; }
.sx-rm { flex: none; margin-top: 8px; }
.cl-n.out { background: rgba(255,255,255,.18); color: #fff; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .fpk-sh, .fx-gart, .sx-empty { animation: none; } }
.fx-btn { min-width: 0; white-space: nowrap; }
@media (max-width: 360px) { .fx-btn { font-size: 15px; padding: 14px 4px; } .fx-btn.sm { width: 44px; } .sx-bar { gap: 8px; } .fx-h b { font-size: 19px; } .fx-art { width: 92px; } .fx-art .fpk:not(.sm) { --pw: 84px; --ph: 116px; } }

/* ===== ИПК v2: 3D-модели, наклон, подсказки ===== */
/* пак — коробка: лицо с голограммой и обжимом, торец, задник */
.fpk { --a: #e9c86a; --b: #b48a2a; --c: #fff1b8; --pw: 92px; --ph: 128px; --d: 9px; position: relative; display: inline-block; width: var(--pw); height: var(--ph); perspective: 700px; flex: none; }
.fpk-b { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) - 18deg)); animation: fpkIdle 6s ease-in-out infinite; }
.tilt .fpk-b { animation: none; }
@keyframes fpkIdle { 0%, 100% { transform: rotateY(-22deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateX(-3deg) translateY(-5px); } }
.fpk-f, .fpk-s, .fpk-k { position: absolute; display: block; font-style: normal; }
.fpk-f { inset: 0; transform: translateZ(calc(var(--d) / 2)); border-radius: 4px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--c) 0%, var(--a) 28%, var(--b) 60%, var(--a) 85%, var(--c) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), inset 0 0 18px rgba(0,0,0,.25); }
/* обжим сверху и снизу — рифлёные полосы, как у настоящей фольги */
.fpk-f::before, .fpk-f::after { content: ''; position: absolute; left: 0; right: 0; height: 7%; z-index: 3;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, rgba(0,0,0,.22) 2px 4px), linear-gradient(var(--b), var(--a)); background-blend-mode: overlay; }
.fpk-f::before { top: 0; border-bottom: 1px solid rgba(0,0,0,.25); } .fpk-f::after { bottom: 0; border-top: 1px solid rgba(0,0,0,.25); }
/* голограмма: радужный перелив, сдвигается при наклоне */
.fpk-holo { position: absolute; inset: 0; z-index: 1; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(calc(115deg + var(--ry, 0deg) * 4), transparent 15%, rgba(255,80,200,.5) 32%, rgba(80,255,230,.5) 45%, rgba(255,240,90,.45) 58%, rgba(120,140,255,.5) 70%, transparent 85%);
  background-size: 220% 220%; background-position: var(--gx, 30%) var(--gy, 40%); animation: fpkHolo 7s ease-in-out infinite; }
.tilt .fpk-holo { animation: none; }
@keyframes fpkHolo { 50% { background-position: 80% 70%; } }
.fpk-sh { position: absolute; inset: -40%; z-index: 4; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%); animation: fpkShine 3.6s ease-in-out infinite; }
@keyframes fpkShine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
/* выдавленный щит-эмблема */
.fpk-crest { position: absolute; z-index: 2; left: 20%; right: 14%; top: 20%; bottom: 22%; border: 2.5px solid rgba(255,255,255,.7); border-top-width: 3px; border-radius: 3px 3px 45% 45% / 3px 3px 38% 38%;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(0,0,0,.2); background: linear-gradient(160deg, rgba(255,255,255,.25), transparent 60%); }
.fpk-f::selection { background: none; }
.fpk b { position: absolute; z-index: 2; left: 0; right: 0; top: 40%; text-align: center; font: italic 900 calc(var(--pw) * .31) / 1 "Oswald", var(--font-body); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.fpk em { position: absolute; z-index: 5; left: 0; right: 0; bottom: 9%; text-align: center; font: 800 calc(var(--pw) * .088) var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-style: normal; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* сбоку виден торец пака */
.fpk-s { top: 1%; height: 98%; width: var(--d); left: calc(100% - var(--d) / 2); transform: rotateY(90deg); background: linear-gradient(180deg, var(--c), var(--b) 40%, var(--a) 70%, var(--b)); filter: brightness(.75); border-radius: 2px; }
.fpk-k { inset: 0; transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); background: linear-gradient(135deg, var(--b), var(--a)); filter: brightness(.6); border-radius: 4px; }
.fpk::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter: blur(2px); animation: fpkShadow 6s ease-in-out infinite; }
@keyframes fpkShadow { 50% { transform: scale(.85); opacity: .7; } }
.fpk.p0 { --a: #7fe0a0; --b: #24814d; --c: #e3ffee; }
.fpk.p1 { --a: #56d4ff; --b: #3b4fc9; --c: #e6fbff; }
.fpk.p2 { --a: #b98bff; --b: #4f26a3; --c: #f4e9ff; }
.fpk.p3 { --a: #f2cb5c; --b: #9c6b14; --c: #fff6cc; }
.fpk.p4 { --a: #ff4f66; --b: #5e0a1c; --c: #ffd6dc; }
.fpk.p4 .fpk-f { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.fpk.sm { --pw: 42px; --ph: 58px; --d: 5px; } .fpk.sm em, .fpk.sm .fpk-sh, .fpk.sm::after { display: none; } .fpk.sm .fpk-crest { border-width: 1.5px; }
.fpk.xl { --pw: 150px; --ph: 208px; --d: 14px; }
/* карточка-награда и большие карточки: наклон и блик */
.fx-cardart { display: inline-block; perspective: 800px; }
.fx-cardart .cc { transform: rotateY(-10deg); animation: ccIdle 6s ease-in-out infinite; }
.tilt .fx-cardart .cc { animation: none; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@keyframes ccIdle { 50% { transform: rotateY(8deg) rotateX(3deg) translateY(-4px); } }
.cc.tilt { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.cc::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.5), rgba(255,255,255,.08) 35%, transparent 60%); mix-blend-mode: overlay; }
.tilt .cc::after, .cc.tilt::after { opacity: 1; }
/* легенды и «Джексон» переливаются всегда */
.cc.jack::before, .cc.legend::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.3) 46%, rgba(255,120,220,.22) 50%, rgba(120,255,240,.22) 54%, transparent 62%); background-size: 260% 100%; animation: ccHolo 5s ease-in-out infinite; }
@keyframes ccHolo { 0%, 30% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
/* список */
.fx-card { cursor: pointer; }
.fx-card.grp { background: radial-gradient(70% 90% at 95% 45%, rgba(255,70,100,.3), transparent 70%), var(--fx-panel); border-color: rgba(255,120,140,.25); }
.fx-card.c-day { background: radial-gradient(70% 90% at 95% 45%, rgba(90,200,255,.25), transparent 70%), var(--fx-panel); }
.fx-info { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; color: #18203a; font: italic 900 16px "Rubik", sans-serif; }
.fx-req { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.fx-req span { padding: 4px 9px; border-radius: 9px; background: rgba(122,240,200,.1); border: 1px solid rgba(122,240,200,.28); color: #a8ffe2; font-size: 12px; font-weight: 600; }
.fx-art { position: relative; min-height: 120px; }
.fx-art .fx-gok, .fx-gart .fx-gok { position: absolute; right: -2px; top: -4px; z-index: 6; }
.fx-seg { display: flex; gap: 5px; } .fx-seg i { flex: 1; height: 10px; border-radius: 6px; background: rgba(255,255,255,.2); transition: background .4s; }
.fx-seg i.on { background: linear-gradient(90deg, #6fe3c1, #b8a4ff); box-shadow: 0 0 0 1.5px rgba(122,240,200,.5); }
.fx-diff { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12.5px; color: rgba(255,255,255,.9); }
.fx-diff i { width: 6px; height: 12px; border-radius: 2px; background: rgba(255,255,255,.2); transform: skewX(-15deg); }
.fx-diff i:last-of-type { margin-right: 5px; }
.fx-diff.d1 i:nth-child(-n+1), .fx-diff.d2 i:nth-child(-n+2), .fx-diff.d3 i:nth-child(-n+3), .fx-diff.d4 i:nth-child(-n+4) { background: var(--dc); }
.fx-diff.d1 { --dc: #6fe3a0; } .fx-diff.d2 { --dc: #ffd23f; } .fx-diff.d3 { --dc: #ff9a3d; } .fx-diff.d4 { --dc: #ff4f66; }
.fx-f { align-items: center; } .fx-left { margin-left: auto; } .fx-left b { font-weight: 700; }
.fx-club { align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 14px; border-radius: 18px; background: rgba(14,22,42,.6); border: 1px solid var(--fx-line); }
.fx-club > span:nth-child(2) { flex: 1; line-height: 1.25; } .fx-club small { display: block; text-align: left; margin-top: 2px; }
.fx-cl-ico { width: 30px; height: 40px; border-radius: 5px; flex: none; background: linear-gradient(150deg, #ffe39a, #d79a1c); box-shadow: 6px -4px 0 -1px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.35); transform: rotate(-8deg); }
.fx-mini { flex: none; padding: 9px 14px; border-radius: 12px; border: 0; font: 700 14px var(--font-body); color: #0b1020; background: linear-gradient(90deg, #b8fbff, #f3f0ff, #dccdff); }
/* группа */
.fx-gh { flex-direction: column; text-align: center; padding: 22px 16px 16px; }
.fx-gh .fx-gl { width: 100%; } .fx-gh .fx-gl b { font-size: 24px; } .fx-gh .fx-f { justify-content: center; gap: 14px; margin-top: 4px; }
.fx-gh .fx-gart { animation: none; margin-bottom: 6px; position: relative; }
.fx-gh .fx-gart::before { content: ''; position: absolute; inset: -30px -40px; z-index: -1; background: radial-gradient(closest-side, rgba(255,80,110,.55), rgba(255,80,110,0)); animation: fxAura 3s ease-in-out infinite; }
@keyframes fxAura { 50% { transform: scale(1.12); opacity: .7; } }
.fx-gh .fx-prog { max-width: 260px; margin: 0 auto 10px; }
/* окно «подробнее» */
.fx-info-m { text-align: center; }
.fx-info-art { display: inline-block; margin: 6px auto 4px; }
.fx-info-m .fx-diff { margin: 2px 0 6px; }
.fx-rl, .fx-steps { text-align: left; margin: 8px 0; padding: 0; list-style: none; }
.fx-rl li { padding: 7px 0 7px 22px; position: relative; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.fx-rl li::before { content: '•'; position: absolute; left: 6px; color: #7af0c8; }
.fx-steps li { display: grid; gap: 2px; padding: 9px 10px 9px 38px; position: relative; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,.06); counter-increment: st; }
.fx-steps li::before { content: counter(st); position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.15); font: 800 12px/20px var(--font-body); text-align: center; }
.fx-steps li.ok::before { content: '✓'; background: #7af0c8; color: #0b1a14; }
.fx-steps span { font-size: 12.5px; opacity: .8; } .fx-steps em { font-style: normal; font-size: 12.5px; color: #ffd27a; font-weight: 700; }
.fx-note { font-size: 12.5px; opacity: .75; }
.fx-send-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 8px 0 10px; }
.fx-send-rw { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; text-align: left; }
.fx-send-rw small { display: block; font-size: 12px; opacity: .7; }
/* экран испытания */
.sx-rew { border: 0; background: none; padding: 4px 6px 0 0; }
.sx-rew.charge .fpk-b, .sx-rew.charge .fx-cardart, .sx-rew.charge .fx-coins { animation: sxCharge .5s ease-in-out infinite; }
@keyframes sxCharge { 50% { transform: scale(1.18) rotateY(-30deg); filter: brightness(1.5) ; } }
.sx-rew.burst { animation: sxBurst .5s ease-out forwards; }
@keyframes sxBurst { 40% { transform: scale(1.6); filter: brightness(2) ; } 100% { transform: scale(0); opacity: 0; } }
.sx-rt { transition: color .3s; } .sx-rt.ok { color: #7af0c8; }
.sx-req li b { min-width: 34px; text-align: right; }
.sx-warn { margin: -2px 0 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,154,61,.14); border: 1px solid rgba(255,154,61,.4); color: #fff; font-size: 13px; }
.sx-warn b { display: block; color: #ffc27a; margin-bottom: 2px; }
.sx-slot.bad .cc { box-shadow: 0 0 0 3px #ff5a6e; }
.sx-tip { text-align: center; margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,.7); }
.sx-bar.gone { transition: opacity .3s, transform .3s; opacity: 0; transform: translateY(30px); pointer-events: none; }
.fx-btn.go { animation: sxGo 1.6s ease-in-out infinite; }
@keyframes sxGo { 50% { box-shadow: 0 0 0 4px rgba(184,251,255,.25), 0 6px 22px rgba(160,200,255,.5); } }
.sx-wand { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; background: linear-gradient(135deg, #b8fbff, #dccdff); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
/* шторка */
.sx-legend { display: flex; gap: 14px; margin: -2px 0 8px; font-size: 12px; color: rgba(255,255,255,.7); }
.sx-legend span { display: inline-flex; align-items: center; gap: 5px; } .sx-legend b { color: #fff; }
.sx-hl { width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 2px #7af0c8; }
.sx-sh { touch-action: none; } .sx-grab { touch-action: none; padding: 6px 0; background-clip: content-box; }
.sx-pick.hlp .cc { box-shadow: 0 0 0 2.5px #7af0c8; }
.sx-pr { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; background: #0e1830; border: 1px solid rgba(255,255,255,.25); color: #fff; font: 800 11px var(--font-body); font-style: normal; white-space: nowrap; z-index: 5; }
.sx-pr.ok { border-color: #7af0c8; color: #7af0c8; } .sx-pr.low { color: #ffb3bd; }
.sx-pick { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .fpk-b, .fpk-holo, .fpk-sh, .fpk::after, .fx-cardart .cc, .cc.jack::before, .cc.legend::before, .fx-gh .fx-gart::before, .fx-btn.go { animation: none !important; } }
.fx-gl .fx-left b { display: inline; font: 700 14px var(--font-body); margin: 0; }
.fx-gl .fx-left { margin-left: 0; }
.fx-info-m .fx-info-art { min-height: 140px; display: grid; place-items: center; }
.fx-info-m h2 { font-size: 26px; }
.sx-rt.low { color: #ffb3bd; }

/* ===== значки интерфейса вместо эмодзи ===== */
.ui-ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.ui-red, .rs-heart, .shop-ico.life { color: #ff4f66; }
.ach i .ui-ic { width: 26px; height: 26px; vertical-align: middle; }
.du-mi .ui-ic { width: 24px; height: 24px; color: #fff; }
.du-big-emo .ui-ic { width: 60px; height: 60px; vertical-align: middle; color: var(--gold); }
.bd-empty span .ui-ic { width: 52px; height: 52px; color: var(--gold); }
.du-kind .ui-ic, .du-card small .ui-ic, .du-hrow .ui-ic, .du-marks .ui-ic { width: 14px; height: 14px; vertical-align: -2px; }
.fx-ico .fx-ig { display: grid; place-items: center; color: #ffe08a; } .fx-ico .ui-ic { width: 22px; height: 22px; }
.fx-ico .fx-num { font: 900 18px "Rubik", sans-serif; color: #ffe08a; }
.fx-ic .ui-ic { width: 15px; height: 15px; vertical-align: -3px; color: #ffc93a; }
.sx-wand { clip-path: none !important; background: none !important; width: auto !important; height: auto !important; color: #ffcf3a; }
.sx-wand .ui-ic { width: 17px; height: 17px; }
.rw-lock .ui-ic { width: 15px; height: 15px; color: rgba(255,255,255,.5); }
.rs-heart .ui-ic { width: 34px; height: 34px; }
.mh-tro .ui-ic { width: 14px; height: 14px; vertical-align: -2px; }
.xm-ev span .ui-ic { width: 18px; height: 18px; vertical-align: middle; }
.xm-ev.k-goal span { color: var(--gold); } .xm-ev.k-save span { color: #9fd3ff; } .xm-ev.k-miss span { color: rgba(255,255,255,.55); }
[data-ui] .ui-ic { width: 22px; height: 22px; }
.dly-clue b .ui-ic { width: 14px; height: 14px; vertical-align: -2px; }
.gl-noc .ui-ic { width: 20px; height: 20px; }
.du-mi .ui-ic { color: #0b0b0f; }
.ach i .ui-ic { width: 30px; height: 30px; }
/* ИПК: одна акцентная кнопка — золотая, как во всём приложении; без переливов и пятен света */
#sbc { background: linear-gradient(180deg, #13203c 0%, #10283a 55%, #0d2a2e 100%) !important; background-attachment: fixed; }
.fx-btn { background: #ffcf3a; color: #16120a; box-shadow: 0 3px 0 #b8901a; font-weight: 700; }
.fx-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b8901a; }
.fx-btn[disabled] { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); box-shadow: none; }
.fx-btn.go { animation: none; }
.fx-mini { background: #ffcf3a; color: #16120a; }
.fx-bar i, .fx-seg i.on { background: #6fe3c1; box-shadow: none; }
.fx-card, .fx-gh, .fx-club, .sx-head, .sx-req, .sx-pitch { border-radius: 16px; }
.fx-card.grp, .fx-card.c-day { background: var(--fx-panel); }
.fx-card.grp { border-color: rgba(255,90,110,.35); }
.fx-gh { background: var(--fx-panel); } .fx-gh .fx-gart::before { display: none; }
.fx-tabs button { border-radius: 10px; } .fx-tabs button.on { background: #fff; color: #0b1020; border-color: #fff; box-shadow: none; }
.fx-req span { border-radius: 6px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
/* лица: пока грузятся — мягкий отблеск на месте фото, без мелькания серого фона */
.cc-face, .fu-f { transition: opacity .3s ease; }
.cc-face:not(.ok), .fu-f:not(.ok) { opacity: 0; animation: faceSafe 0s 4s forwards; }
@keyframes faceSafe { to { opacity: 1; } }
.cc:has(.cc-face:not(.ok)) .cc-ph::after, .fu:has(.fu-f:not(.ok))::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 220% 100%; animation: skel 1.2s linear infinite; }
.fu:has(.fu-f:not(.ok))::after { content: ''; position: absolute; inset: 8% 3% 30% 30%; border-radius: 40%; pointer-events: none; z-index: 1; }
@keyframes skel { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .cc-ph::after, .fu::after { animation: none !important; } }
.terms { text-align: left; } .terms h2 { text-align: center; } .terms p { margin: 0 0 10px; color: rgba(255,255,255,.85); line-height: 1.45; font-size: 14px; }

/* ===== только для подписчиков канала ===== */
.gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(120% 70% at 50% 0%, #22222b 0%, #0b0b0f 70%); animation: sxFade .3s; }
.gate.out { animation: sxFade .3s reverse forwards; }
body.gated { overflow: hidden; }
.gate-card { width: min(100%, 360px); display: grid; justify-items: center; gap: 10px; text-align: center; color: #fff; }
.gate-ava { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.22), 0 14px 30px rgba(0,0,0,.5); margin-bottom: 6px; }
.gate-k { font: 800 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #ffcf3a; }
.gate h2 { margin: 0; font: 900 30px/1.05 "Rubik", sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.gate-t { margin: 0 0 8px; color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.45; }
.gate .btn { width: 100%; }
.gate-msg { min-height: 20px; margin: 2px 0 0; font-size: 13.5px; color: #ffb3bd; }
.gate[data-state="wait"] .gate-go, .gate[data-state="wait"] .gate-ok { opacity: .5; pointer-events: none; }
.gate[data-state="wait"] .gate-msg { color: rgba(255,255,255,.7); }

/* ===== открытие паков (js/packs.js): объёмный пак, выход карточки, сетка ===== */
.po { --rc: #7fe0a0; position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto; color: #fff; overflow: hidden;
  padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .3s ease; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.po.in { opacity: 1; } .po.out { opacity: 0; pointer-events: none; }
.po-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 45% at 50% 46%, color-mix(in srgb, var(--rc) 38%, #0b0b10) 0%, #08080c 72%); transition: background .5s ease; }
/* Лучи за паком и карточкой. Размер 100vmax (не 220vmax, как было до 1f7a5fa: такая текстура весила ~120 МБ на iPhone),
   но и не 110vmin с маской 60% — тогда видно лишь узкое кольцо вокруг карточки. Вращение — только transform (композитор),
   в сетке карточек лучи останавливаются и приглушаются, чтобы не мешать читать и не грузить телефон. */
.po-rays { position: absolute; left: 50%; top: 46%; width: min(100vmax, 1000px); height: min(100vmax, 1000px); margin: max(-50vmax, -500px) 0 0 max(-50vmax, -500px); opacity: .62; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--rc) 80%, #fff) 3deg 7deg, transparent 11deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, rgba(0,0,0,.75) 45%, transparent 100%); mask: radial-gradient(closest-side, #000 12%, rgba(0,0,0,.75) 45%, transparent 100%);
  animation: poSpin 36s linear infinite; will-change: transform; transition: opacity .4s ease; }
.po-rays::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 70%, #fff), transparent); opacity: .55; }
.po[data-phase="walk"] .po-rays, .po.jackson .po-rays { opacity: .85; animation-duration: 24s; }
.po[data-phase="grid"] .po-rays, .po[data-phase="done"] .po-rays { opacity: .34; animation: none; }
.po-k, .po-name, .po-hint { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
@keyframes poSpin { to { transform: rotate(360deg); } }
.po-floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 32%; background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%); }
.po-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fff, color-mix(in srgb, var(--rc) 70%, transparent) 40%, transparent 75%); opacity: 0; pointer-events: none; z-index: 5; }
.po-flash.go { animation: poFlash .45s ease-out; } .po-flash.go2 { animation: poFlash .8s ease-out; }
@keyframes poFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
/* шапка: строки в потоке — ничего не наезжает */
.po-top { display: grid; justify-items: center; gap: 8px; text-align: center; padding-top: 34px; min-height: 108px; }
.po-k { font: 700 13px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.po-name { font: 900 clamp(26px, 8.6vw, 42px)/1 "Rubik", sans-serif; letter-spacing: .01em; color: #fff; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.po-name.slam { animation: poSlam .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes poSlam { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.po.jackson .po-name { color: #ff4f66; } .po-name.long { font-size: clamp(22px, 6.6vw, 34px); } .po-hint { text-align: center; }
.po-steps { display: flex; gap: 6px; min-height: 8px; }
.po-steps i { width: 26px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.16); transition: background .3s; }
.po-steps i.on { background: var(--c); }
.po-stage { position: relative; display: grid; place-items: center; min-height: 0; perspective: 1100px; }
.po-foot { display: grid; justify-items: center; gap: 10px; min-height: 80px; align-content: end; }
.po-hint { margin: 0; min-height: 20px; font: 700 15px var(--font-body); color: rgba(255,255,255,.85); animation: poPulse 1.6s ease-in-out infinite; }
@keyframes poPulse { 50% { opacity: .45; } }
.po-sum { display: flex; gap: 14px; font: 600 14px var(--font-body); color: rgba(255,255,255,.8); } .po-sum b { color: #fff; } .po-sum .coin { width: 16px; height: 16px; vertical-align: -3px; }
.po-take { width: 100%; max-width: 420px; }
.po-x { position: absolute; right: 14px; top: max(14px, env(safe-area-inset-top)); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 17px; }
.po-x[hidden] { display: none; }
/* пак */
.fpk.xxl { --pw: min(56vw, 230px); --ph: calc(var(--pw) * 1.39); --d: 18px; }
.fpk.rs { --pw: 44px; --ph: 61px; --d: 5px; } .fpk.rs em, .fpk.rs .fpk-sh, .fpk.rs::after { display: none; } .fpk.rs .fpk-crest { border-width: 1.5px; } .fpk.rs b { font-size: 14px; }
.po-pack { position: relative; cursor: pointer; animation: poFloat 3.2s ease-in-out infinite; will-change: transform; }
@keyframes poFloat { 50% { transform: translateY(-10px); } }
.po-pack .fpk-b { transition: transform .2s; }
.po-pack.shake { animation: poShake .65s linear; }
@keyframes poShake { 0%, 100% { transform: none; } 10% { transform: translate(-6px, 2px) rotate(-3deg); } 20% { transform: translate(6px, -2px) rotate(3deg); } 30% { transform: translate(-8px, 1px) rotate(-4deg); }
  40% { transform: translate(8px, -1px) rotate(4deg); } 55% { transform: translate(-10px, 0) rotate(-5deg) scale(1.03); } 70% { transform: translate(10px, 0) rotate(5deg) scale(1.05); } 85% { transform: translate(-6px, 0) rotate(-3deg) scale(1.07); } }
.po-cap { position: absolute; left: -1px; right: -1px; top: -1px; height: 11%; z-index: 6; font-style: normal;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 2px, rgba(0,0,0,.22) 2px 4px), linear-gradient(var(--c), var(--a)); background-blend-mode: overlay; border-bottom: 2px dashed rgba(0,0,0,.35); }
.po-pack.torn .po-cap { animation: poCap .7s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes poCap { to { transform: translate(60%, -180%) rotate(28deg); opacity: 0; } }
.po-slit { position: absolute; left: 12%; right: 12%; top: 4%; height: 4px; border-radius: 4px; background: #fff; opacity: 0; box-shadow: 0 0 0 0 transparent; }
.po-pack.torn .po-slit { animation: poSlit .7s ease-out forwards; }
@keyframes poSlit { 0% { opacity: 0; transform: scaleX(.2); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: .9; transform: scaleX(1.1); } }
.po-pack.torn::before { content: ''; position: absolute; left: 50%; bottom: 92%; width: 70%; height: 60vh; transform: translateX(-50%); transform-origin: bottom;
  background: linear-gradient(to top, color-mix(in srgb, var(--rc) 70%, #fff), transparent); -webkit-mask: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
  animation: poBeam .6s ease-out both; opacity: .8; }
@keyframes poBeam { from { transform: translateX(-50%) scaleY(0); } }
/* карточки: рубашка и лицо, переворот в 3D */
.po-flip { position: relative; width: var(--w); aspect-ratio: .72; transform-style: preserve-3d; }
.po-back, .po-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.po-front { transform: rotateY(180deg); }
.po-front .cc { width: 100%; }
.po-back { display: grid; place-items: center; border-radius: calc(var(--w) * .09); background: linear-gradient(150deg, #20202a, #0c0c12); box-shadow: inset 0 0 0 3px var(--bc, #555), 0 10px 26px rgba(0,0,0,.5); }
.po-back b { font: italic 900 calc(var(--w) * .3) "Rubik", sans-serif; color: var(--bc, #888); letter-spacing: -.03em; }
.po-back.bronze { --bc: #c98a5a; } .po-back.silver { --bc: #b9c2cf; } .po-back.gold { --bc: #e8b934; } .po-back.legend { --bc: #c99bff; } .po-back.jack { --bc: #ff4f66; }
.po-walk { display: grid; justify-items: center; gap: 18px; }
.po-tag { padding: 6px 16px; border-radius: 10px; background: rgba(255,255,255,.12); font: 800 16px "Rubik", sans-serif; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.po-tag.on { opacity: 1; transform: none; } .po-tag.new { background: #ff4f66; } .po-tag .coin { width: 16px; height: 16px; vertical-align: -3px; }
.po-grid { display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); gap: 10px 8px; justify-content: center; max-height: 100%; overflow-y: auto; padding: 6px 2px 10px; -webkit-overflow-scrolling: touch; }
.po-stage:has(.po-grid) { align-items: start; overflow: hidden; }
.po-cell { position: relative; }
.po-new, .po-dup { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; font: 800 10px "Rubik", sans-serif; font-style: normal; white-space: nowrap; z-index: 2; }
.po-new { background: #ff4f66; color: #fff; } .po-dup { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.po-cell .cc { animation: none; }
.po-grid .cc::before, .po-grid .cc::after, .po-grid .cc-ph::after { animation: none !important; }
.po-grid .cc-face { filter: none; transition: none; }
@keyframes poRare { 50% { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .po-rays, .po-pack, .po-hint { animation: none !important; } }
.po-stage:has(.po-grid) { align-items: center; }
.po-grid { max-height: calc(100vh - 260px); }
.po-walk .po-tag { order: 2; }

/* ===== главный экран v2 (js/home.js): одна игра, большая кнопка, путь к открытиям ===== */
body.home2 #panel-home > :not(#home2) { display: none !important; }
body.home2 #tab-friends, body.home2 #tab-board, body.home2 #tab-games { display: none !important; }
/* фон: ночной стадион — прожекторы медленно ходят, свет падает на газон */
body.home2 #hub { position: relative; }
body.home2 #hub::after { content: ''; position: fixed; left: -30%; right: -30%; top: -10%; height: 90%; z-index: -1; pointer-events: none; opacity: .5;
  background: conic-gradient(from 160deg at 10% 0%, transparent 0deg, rgba(255,255,240,.10) 8deg, transparent 18deg), conic-gradient(from 182deg at 90% 0%, transparent 0deg, rgba(255,255,240,.10) 10deg, transparent 20deg);
  animation: h2Lights 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes h2Lights { 0% { transform: rotate(-2deg) translateX(-2%); } 100% { transform: rotate(2deg) translateX(2%); } }
/* выбор игры */
.h2-pl { overflow-y: auto; padding: 2px 2px 8px; }
.h2-pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h2-pc { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 55%, #111), color-mix(in srgb, var(--c2) 55%, #0b0b10)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); }
.h2-pc.sel { box-shadow: inset 0 0 0 3px #ffcf3a; }
.h2-pc b { font: 800 12px/1.15 "Rubik", sans-serif; text-transform: uppercase; text-align: center; }
.h2-pc small { display: inline-flex; align-items: center; gap: 3px; font: 800 11px "Rubik", sans-serif; color: #ffcf3a; } .h2-pc small .ui-ic { width: 12px; height: 12px; }
.h2-pci { width: 52px; height: 52px; display: grid; place-items: center; } .h2-pci svg { width: 100%; height: 100%; }
.h2-pc.lock { background: rgba(255,255,255,.05); } .h2-pc.lock .h2-pci, .h2-pc.lock b { opacity: .35; filter: grayscale(1); }
.h2-ph { display: flex; align-items: center; gap: 6px; margin: 16px 2px 8px; font: 800 13px "Rubik", sans-serif; text-transform: uppercase; color: rgba(255,255,255,.75); }
.h2-pn { margin: 14px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.65); } .h2-pn .ui-ic { color: #ffcf3a; }
/* праздник открытия */
.h2-un { position: fixed; inset: 0; z-index: 320; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; color: #fff; text-align: center; animation: sxFade .3s; }
.h2-un.out { animation: sxFade .3s reverse forwards; }
.h2-un-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 50% 45%, color-mix(in srgb, var(--c1) 45%, #0b0b10), #07070b 75%); overflow: hidden; }
.h2-un-bg i { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: .25; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 60%, #fff) 0 5deg, transparent 5deg 18deg); -webkit-mask: radial-gradient(closest-side, #000, transparent 60%); mask: radial-gradient(closest-side, #000, transparent 60%); animation: poSpin 30s linear infinite; }
.h2-un-k { display: inline-flex; align-items: center; gap: 6px; font: 800 13px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #ffcf3a; } .h2-un-k .ui-ic { width: 15px; height: 15px; }
.h2-un-card { perspective: 900px; }
.h2-un-flip { position: relative; width: 170px; height: 188px; transform-style: preserve-3d; }
.h2-un-back, .h2-un-front { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.h2-un-front { transform: rotateY(180deg); }
.h2-un-back { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(150deg, #2a2a36, #111118); color: rgba(255,255,255,.5); } .h2-un-back .ui-ic { width: 54px; height: 54px; }
.h2-un-t { font: 900 34px/1.05 "Rubik", sans-serif; text-transform: uppercase; }
.h2-un-s { margin: 0; max-width: 300px; color: rgba(255,255,255,.75); font-size: 15px; }
.h2-un-go { width: min(100%, 300px); }
/* дорога трофеев: открытия игр */
.rs.un .rs-art { position: relative; display: grid; place-items: center; }
.rs-hex { display: grid; place-items: center; width: 54px; height: 60px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; } .rs-hex svg { width: 34px; height: 34px; }
.rs.un.lock .rs-hex { filter: grayscale(.85) brightness(.6); }
.rs-lk { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #111; display: grid; place-items: center; font-style: normal; color: #fff; } .rs-lk .ui-ic { width: 13px; height: 13px; }
.rs.un .rs-name { color: #ffcf3a; }
.rw-soon { display: grid; justify-items: center; gap: 6px; margin: 18px 0; padding: 22px 16px; border-radius: 16px; background: rgba(255,255,255,.05); text-align: center; }
.rw-soon span .ui-ic { width: 34px; height: 34px; color: rgba(255,255,255,.5); } .rw-soon b { font: 900 22px "Rubik", sans-serif; } .rw-soon small { color: rgba(255,255,255,.7); font-size: 14px; } .rw-soon small .ui-ic { color: #ffcf3a; }
@media (prefers-reduced-motion: reduce) { body.home2 #hub::after, .h2-hex, .h2-sb.hot, .h2-play::after { animation: none !important; } }

/* ===== общий вид экранов: тёмная всплывашка над меню, один фон-стадион, спокойные плашки ===== */
.toast { background: rgba(18,18,26,.96) !important; color: #fff !important; border-radius: 14px !important; font: 700 14px/1.35 var(--font-body) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1) !important; bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; padding: 11px 16px !important; text-align: center; }
#rewards, #profile, #sbc-off { position: relative; }
.rw-packs { background: linear-gradient(135deg, #1c2b20, #142018) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(127,224,160,.45) !important; }
.rw-packs small { color: rgba(255,255,255,.7); opacity: 1; }
.rw-packs em { background: #ffcf3a !important; color: #1a1406 !important; }
.rw-pkart { flex: none; display: grid; place-items: center; width: 46px; }
#hub-packs { display: none !important; }

/* ===================================================================================================
   ЕДИНЫЙ ФОН И ШАПКИ (заменяет все прошлые слои: трибуны с огоньками, круг внизу, шум, жёсткие лучи)
   Ночной стадион без лишнего: глубокий сине-фиолетовый, мягкий свет прожекторов сверху, газон снизу.
   =================================================================================================== */
body { background: #0c0b1d !important; }
body::before { content: '' !important; position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; display: block !important;
  background:
    radial-gradient(60% 34% at 8% -6%, rgba(160,150,255,.20), transparent 70%),
    radial-gradient(60% 34% at 92% -6%, rgba(160,150,255,.20), transparent 70%),
    radial-gradient(130% 50% at 50% 118%, rgba(52,170,110,.20), transparent 66%),
    linear-gradient(180deg, #19163f 0%, #121032 42%, #0c0b1f 100%) !important; }
body::after { display: none !important; }
body[data-grass]::before { display: block !important; }
/* на главной — медленные мягкие лучи прожекторов поверх */
body.home2 #hub::after { opacity: .35; }
/* ИПК — тот же фон, без своего бирюзового */
#sbc { background: transparent !important; }
/* окна — тёмные, как плашки главной */
.modal-card { background: #16152c !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.55) !important; }
/* шапка игр — как шапка главной: тёмная плашка со стеклом */
#app > .screen > .topbar { position: sticky; top: max(6px, env(safe-area-inset-top), var(--safe-top, 0px)); z-index: 20; padding: 6px 6px 6px 6px; border-radius: 18px;
  background: rgba(16,14,40,.72) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-top: 4px; }
#app > .screen > .topbar .back { background: rgba(255,255,255,.08) !important; }
#app > .screen > .topbar .help { width: 36px !important; height: 36px !important; font-size: 17px !important; box-shadow: none !important; }
#app > .screen > .topbar .coins { background: rgba(255,255,255,.06); }

/* ===== без белых плашек: всё в тёмном стиле главной, золото — только для главного действия ===== */
:root { --plate: #211e4a; --plate-2: #2a2760; --plate-line: rgba(255,255,255,.12); }
/* варианты ответа — тёмные клавиши; верно/неверно — цвет */
:is(.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt):not(.tb-fut):not(.right):not(.wrong) { background: var(--plate) !important; color: #fff !important; border-radius: 14px !important;
  box-shadow: inset 0 0 0 1.5px var(--plate-line), 0 4px 0 #0b0a1d !important; }
:is(.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt):not(.tb-fut) small { color: rgba(255,255,255,.6) !important; }
/* поля ввода и подсказки */
.guess-input input, .ng-input input, .nick-input, .field input { background: var(--plate) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px var(--plate-line) !important; }
.guess-input input::placeholder, .ng-input input::placeholder, .nick-input::placeholder, .field input::placeholder { color: rgba(255,255,255,.45); }
.suggest { background: #1c1a40 !important; box-shadow: inset 0 0 0 1px var(--plate-line), 0 16px 34px rgba(0,0,0,.5) !important; }
.suggest :is(button, li, div, b, span) { color: #fff; } .suggest small { color: rgba(255,255,255,.6) !important; }
.suggest :is(button, li):hover, .suggest .on { background: rgba(255,255,255,.08) !important; }
/* режимы дуэли */
.dh-modes button { background: var(--plate) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px var(--plate-line), 0 4px 0 #0b0a1d !important; }
.dh-modes button * { color: #fff !important; }
.dh-ico.tile-ico { background: var(--plate-2) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.15) !important; }
/* выбранные вкладки-фишки: золотая обводка вместо белой заливки */
:is(.bd-tabs, .cl-chips, .fx-tabs, .cat-nav) button.on { background: rgba(255,207,58,.14) !important; color: #ffcf3a !important; box-shadow: inset 0 0 0 1.5px #ffcf3a !important; border-color: #ffcf3a !important; }
/* профиль: билет — тёмный, как плашки */
.tix { background: linear-gradient(160deg, #262357, #1a1840) !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--plate-line), 0 14px 30px rgba(0,0,0,.4) !important; }
.tix::before { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.03) 14px 15px) !important; }
.tix-top { background: rgba(0,0,0,.25) !important; }
.tix .pf-edit { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.tix-f { border-color: rgba(255,255,255,.12) !important; } .tix-f span + span { border-color: rgba(255,255,255,.12) !important; }
.tix-f small, .tix-stub small, .tix-xp small { color: rgba(255,255,255,.6) !important; }
.tix-xp .pf-bar { background: rgba(255,255,255,.12) !important; }
.tix-stub { background: rgba(0,0,0,.18) !important; border-left-color: rgba(255,255,255,.2) !important; }
.tix-stub b { color: #ffcf3a !important; }
.tix-bc { background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 2px, transparent 2px 4px, rgba(255,255,255,.75) 4px 5px, transparent 5px 8px) !important; }
.tix-hex { color: #15161c; }
#prof-nick, .tix-nm, .tix-who { color: #fff !important; }
.pf-pk2 { display: grid; place-items: start; height: 30px; } .pf-pk2 .fpk.rs { --pw: 22px; --ph: 30px; --d: 3px; } .pf-pk2 .fpk.rs b { font-size: 8px; } .pf-pk2 .fpk::after { display: none; }

/* ===== карточку крутят пальцем ===== */
.spin3d { --gx: 50%; perspective: 900px; touch-action: none; cursor: grab; display: inline-block; margin: 0 auto; }
.spin3d:active { cursor: grabbing; }
.spin-in { position: relative; transform-style: preserve-3d; will-change: transform; }
.spin-in > .cc { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(1px); }
.spin-in > .cc .cc-face { filter: none !important; }
.spin-in > .cc::before, .spin-in > .cc::after { mix-blend-mode: normal !important; }
.spin-in > .cc::after { opacity: .9 !important; background: linear-gradient(105deg, transparent calc(var(--gx) - 25%), rgba(255,255,255,.28) var(--gx), transparent calc(var(--gx) + 25%)) !important; }
.spin-back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 9% / 6.5%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(180deg) translateZ(1px);
  background: linear-gradient(150deg, #24223f, #0f0e1c); box-shadow: inset 0 0 0 4px var(--bc, #777), 0 14px 30px rgba(0,0,0,.5); }
.spin-back b { font: italic 900 64px "Rubik", sans-serif; color: var(--bc, #888); letter-spacing: -.03em; }
.spin-back.bronze { --bc: #c98a5a; } .spin-back.silver { --bc: #b9c2cf; } .spin-back.gold { --bc: #e8b934; } .spin-back.legend { --bc: #c99bff; } .spin-back.jack { --bc: #ff4f66; }
.cd .spin3d { margin: 4px auto 6px; }
.fx-cardart .cc { animation: none !important; }


/* ===== главный экран v3: объёмный, как в Clash Royale — всё на одном экране ===== */
:root { --ink-0: #0a0f24; --bl1: #4b86ea; --bl2: #2a55c0; --bl3: #1b3a8f;
  --bev: inset 0 2px 0 rgba(255,255,255,.38), inset 0 -4px 0 rgba(0,0,0,.22), 0 0 0 2.5px var(--ink-0), 0 5px 0 var(--ink-0), 0 10px 18px rgba(0,0,0,.4); }
.crt { color: #fff; -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
body.at-home, html:has(body.at-home) { overflow: hidden; overscroll-behavior: none; }
body.at-home #app { padding-bottom: 0 !important; }
body.home2 .hub-head { position: relative; top: auto; margin: 0; padding: 0 0 6px; background: none !important; }
/* шапка: профиль и ресурсы — толстые плашки */
#hub .mh, .rw-mh { padding: 5px; margin-top: 2px; border-radius: 16px; background: linear-gradient(180deg, #2c3f8e, #1a2560) !important; box-shadow: var(--bev) !important; backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: 4px; }
#hub .mh-ava, .rw-mh .mh-ava { border-radius: 11px; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), 0 0 0 2px var(--ink-0); }
#hub .mh-nick, .rw-mh .mh-nick { color: #fff; -webkit-text-stroke: 2.5px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
#hub .mh-chip, .rw-mh .mh-chip { background: rgba(6,10,30,.62) !important; box-shadow: inset 0 2px 3px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.14) !important; -webkit-text-stroke: 2.5px var(--ink-0); paint-order: stroke fill; }

#home2 { position: relative; display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - 190px); padding: 2px 0 0; }
/* путь трофеев сверху */
.h2-road { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border: 0; border-radius: 16px; color: #fff; text-align: left;
  background: linear-gradient(180deg, #34308a, #211d5c); box-shadow: var(--bev); transition: transform .12s; }
.h2-road:active { transform: translateY(3px); }
.h2-tro { display: inline-flex; align-items: center; gap: 4px; color: #ffcf3a; } .h2-tro .ui-ic { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 var(--ink-0)); }
.h2-tro b { font: 900 22px "Rubik", sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
.h2-bar { position: relative; height: 24px; border-radius: 12px; background: #0d0b2a; box-shadow: inset 0 3px 4px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.15); overflow: hidden; }
.h2-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 12px; background: linear-gradient(180deg, #ffe680, #ffc21f 55%, #e89a0c); box-shadow: inset 0 -3px 0 rgba(150,80,0,.35), inset 0 2px 0 rgba(255,255,255,.6); transition: width .8s cubic-bezier(.2,.9,.3,1); }
.h2-bar small { position: relative; display: block; text-align: center; font: 900 13px/24px "Rubik", sans-serif; color: #fff; -webkit-text-stroke: 2.5px var(--ink-0); paint-order: stroke fill; }
.h2-ni { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(180deg, #5b4fd0, #3a2f9a); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 2px var(--ink-0), 0 3px 0 var(--ink-0); }
.h2-ni svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.h2-ni em { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1a1446; box-shadow: 0 0 0 2px var(--ink-0); color: #ffcf3a; font-style: normal; } .h2-ni em .ui-ic { width: 11px; height: 11px; }
/* арена: выбранная игра парит над объёмным полем */
.h2-arena { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; container-type: size; }
.h2-game { --W: min(96cqw, 104cqh); position: relative; display: grid; justify-items: center; align-content: center; width: 100%; height: 100%; padding: 4cqh 0 0; border: 0; background: none; color: #fff; }
.h2-stage { position: relative; width: var(--W); height: calc(var(--W) * .74); perspective: 800px; transition: transform .12s; }
.h2-pitch { position: absolute; left: 6%; right: 6%; bottom: calc(var(--W) * -.17); height: calc(var(--W) * .64); border-radius: 26px; transform: rotateX(62deg); transform-style: preserve-3d;
  background: repeating-linear-gradient(90deg, #36ad52 0 10%, #2c9846 10% 20%); box-shadow: 0 0 0 10px #263a86, 0 0 0 13px #3d58b8, 0 0 0 16px var(--ink-0); }
.h2-pitch::before { content: ''; position: absolute; inset: -16px; border-radius: 40px; background: #121a46; transform: translateZ(-22px); }
.h2-pitch::after { content: ''; position: absolute; inset: -16px; border-radius: 40px; background: linear-gradient(90deg, #0e1538, #1f2c6c 50%, #0e1538); transform: translateZ(-11px); }
.h2-pitch i { position: absolute; inset: 8% 6%; border: 3px solid rgba(255,255,255,.78); border-radius: 4px;
  background: linear-gradient(90deg, transparent calc(50% - 1.5px), rgba(255,255,255,.78) 0 calc(50% + 1.5px), transparent 0); }
.h2-pitch i::before { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.78); border-radius: 50%; }
.h2-pitch i::after { content: ''; position: absolute; inset: 30% -3px; border: 3px solid rgba(255,255,255,.78); border-image: none; -webkit-mask: linear-gradient(90deg, #000 0 12%, transparent 12% 88%, #000 88%); mask: linear-gradient(90deg, #000 0 12%, transparent 12% 88%, #000 88%); }
.h2-shadow { position: absolute; left: 50%; bottom: calc(var(--W) * .02); width: calc(var(--W) * .34); height: calc(var(--W) * .07); margin-left: calc(var(--W) * -.17); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); animation: h2Shade 3.6s ease-in-out infinite; }
@keyframes h2Shade { 50% { transform: scale(.82); opacity: .7; } }
.h2-hex { --hs: calc(var(--W) * .44); position: absolute; left: 50%; bottom: calc(var(--W) * .1); width: var(--hs); height: calc(var(--hs) * 1.1); margin-left: calc(var(--hs) * -.5); animation: h2Float 3.6s ease-in-out infinite; }
.h2-hex::before, .h2-hex::after, .h2-hex-in { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.h2-hex::before { content: ''; position: absolute; inset: 0; transform: translateY(9px); background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 45%, #000), var(--ink-0)); }
.h2-hex::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #fff, #c9d6ff 60%, #8ea3e6); }
.h2-hex-in { position: absolute; inset: 6px; z-index: 1; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 85%, #fff), var(--c1) 35%, var(--c2)); box-shadow: inset 0 -10px 0 rgba(0,0,0,.18); }
.h2-hex-in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%); pointer-events: none; }
.h2-hex-in svg { width: 58%; height: 58%; filter: drop-shadow(0 4px 0 rgba(0,0,0,.28)); }
.h2-hex.big { --hs: 170px; position: relative; left: auto; bottom: auto; margin: 0; animation: none; }
@keyframes h2Float { 50% { transform: translateY(-10px); } }
.h2-ban { position: relative; z-index: 2; margin-top: calc(var(--W) * .08); padding: 8px 30px 9px; max-width: 94%; background: linear-gradient(180deg, #4f6fe0, #2b45a8); clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.25); }
.h2-ban b { display: block; font: 900 clamp(20px, 6.4vw, 26px)/1.05 "Rubik", sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; -webkit-text-stroke: 3.5px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
.h2-game:active .h2-stage { transform: scale(.97); }
/* боковые кнопки поверх арены */
.h2-side { position: absolute; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.h2-side.l { left: 0; } .h2-side.r { right: 0; align-items: flex-end; }
.h2-sb { position: relative; display: grid; justify-items: center; gap: 2px; width: 70px; padding: 6px 2px 6px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(180deg, var(--bl1), var(--bl2)); box-shadow: var(--bev); transition: transform .12s; }
.h2-sb:active { transform: translateY(3px) scale(.96); }
.h2-sb.done { background: linear-gradient(180deg, #4a5384, #2f365e); }
.h2-sb.hot { animation: h2Hot 2.4s ease-in-out infinite; }
.h2-sb.hot::after { content: '!'; position: absolute; right: -6px; top: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ff6b7d, #e3243f); box-shadow: 0 0 0 2px var(--ink-0), inset 0 2px 0 rgba(255,255,255,.4); font: 900 14px "Rubik", sans-serif; color: #fff; }
.h2-sb.cnt::after { display: none; }
@keyframes h2Hot { 50% { transform: translateY(-4px); } }
.h2-sb b { font: 900 10.5px/1.1 "Rubik", sans-serif; text-transform: uppercase; color: #fff; -webkit-text-stroke: 2.5px var(--ink-0); paint-order: stroke fill; }
.h2-sbi { position: relative; display: grid; place-items: center; width: 50px; height: 50px; }
.h2-sbi.dly img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; filter: brightness(.22) contrast(1.2); box-shadow: 0 0 0 2px var(--ink-0), inset 0 0 0 2px #fff; background: #10163a; }
.h2-sbi.dly i { position: absolute; font: 900 28px "Rubik", sans-serif; color: #ffcf3a; font-style: normal; -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; }
.h2-sb.done .h2-sbi.dly img { filter: none; } .h2-sb.done .h2-sbi.dly i { display: none; }
.h2-sbi > em { position: absolute; right: -10px; top: -9px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: linear-gradient(180deg, #ff6b7d, #e3243f); box-shadow: 0 0 0 2px var(--ink-0); font: 900 12px/22px "Rubik", sans-serif; font-style: normal; text-align: center; color: #fff; }
.h2-sbi .fpk.rs { --pw: 34px; --ph: 46px; --d: 4px; }
/* кнопки снизу: ИГРАТЬ и список игр */
.h2-cta { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 12px; padding: 0 2px 6px; }
.h2-play { position: relative; height: clamp(64px, 10dvh, 80px); border: 0; border-radius: 20px; overflow: hidden; color: #fff; background: linear-gradient(180deg, #ffe680, #ffc21f 48%, #f39a0e);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.65), inset 0 -7px 0 rgba(160,80,0,.45), 0 0 0 3px #3b2200, 0 7px 0 #3b2200, 0 14px 22px rgba(0,0,0,.45); transition: transform .1s, box-shadow .1s; }
.h2-play span { position: relative; z-index: 1; font: 900 clamp(30px, 9vw, 38px)/1 "Rubik", sans-serif; letter-spacing: .03em; color: #fff; -webkit-text-stroke: 5px #3b2200; paint-order: stroke fill; text-shadow: 0 3px 0 #3b2200; }
.h2-play::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.5) 50%, transparent 56%); animation: fpkShine 3.6s ease-in-out infinite; }
.h2-play:active { transform: translateY(6px); box-shadow: inset 0 3px 0 rgba(255,255,255,.65), inset 0 -4px 0 rgba(160,80,0,.45), 0 0 0 3px #3b2200, 0 1px 0 #3b2200, 0 4px 10px rgba(0,0,0,.4); }
.h2-all { display: grid; justify-items: center; align-content: center; gap: 2px; height: clamp(64px, 10dvh, 80px); border: 0; border-radius: 20px; color: #fff; background: linear-gradient(180deg, var(--bl1), var(--bl2)); box-shadow: var(--bev); transition: transform .1s; }
.h2-all:active { transform: translateY(4px); }
.h2-all span { display: grid; place-items: center; } .h2-all svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 var(--ink-0)); }
.h2-all b { font: 900 12px "Rubik", sans-serif; text-transform: uppercase; -webkit-text-stroke: 2.5px var(--ink-0); paint-order: stroke fill; }
/* нижнее меню: активная вкладка — выпуклая */
.tab.on { background: linear-gradient(180deg, #ffe07a, #ffbf1f 60%, #f0a012) !important; color: #2a1a00 !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(150,80,0,.35), 0 0 0 2px var(--ink-0), 0 3px 0 var(--ink-0) !important; }
.tab.on span svg { color: #2a1a00 !important; }
@media (max-width: 350px) { .h2-sb { width: 62px; } .h2-sbi { width: 44px; height: 44px; } .h2-sbi.dly img { width: 40px; height: 40px; } .h2-cta { grid-template-columns: minmax(0, 1fr) 68px; } }
@media (prefers-reduced-motion: reduce) { .h2-hex, .h2-shadow, .h2-sb.hot, .h2-play::after { animation: none !important; } }

/* ===== дорога трофеев v3: объёмный путь, награды по обе стороны ===== */
.rd-hero { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px 10px; padding: 12px 14px; margin: 4px 0 18px; border-radius: 20px;
  background: linear-gradient(180deg, #34308a, #211d5c); box-shadow: var(--bev); }
.rd-cup { color: #ffcf3a; } .rd-cup .ui-ic { width: 44px; height: 44px; filter: drop-shadow(0 3px 0 var(--ink-0)); }
.rd-n { font: 900 38px/1 "Rubik", sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink-0); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink-0); }
.rd-hn { display: grid; gap: 6px; min-width: 0; } .rd-hn small { font: 700 12.5px/1.25 var(--font-body); color: rgba(255,255,255,.8); } .rd-hn b { color: #ffcf3a; }
.rd-bar { position: relative; height: 16px; border-radius: 8px; background: #0d0b2a; box-shadow: inset 0 3px 4px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.15); overflow: hidden; }
.rd-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: linear-gradient(180deg, #ffe680, #ffc21f 55%, #e89a0c); box-shadow: inset 0 2px 0 rgba(255,255,255,.6); transition: width .8s cubic-bezier(.2,.9,.3,1); }
.rd-how { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-how span { padding: 6px; border-radius: 10px; background: rgba(6,10,30,.5); box-shadow: inset 0 2px 3px rgba(0,0,0,.4); text-align: center; font: 700 12.5px var(--font-body); color: rgba(255,255,255,.75); } .rd-how b { color: #fff; }
/* путь — одна непрерывная дорожка по центру; золото залито до «Ты здесь» */
.rd-path { position: relative; display: grid; gap: 16px; padding: 6px 0 30px; }
.rd-path::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 18px; margin-left: -9px; border-radius: 9px; background: #0f0c2e; box-shadow: inset 0 0 0 3px var(--ink-0), inset 5px 0 0 rgba(255,255,255,.05); }
.rd-fill { position: absolute; left: 50%; top: 0; width: 12px; margin-left: -6px; border-radius: 6px; background: linear-gradient(90deg, #ffe680, #ffc21f 45%, #e08a0a); box-shadow: inset 3px 0 0 rgba(255,255,255,.45); transition: height .6s cubic-bezier(.2,.9,.3,1); }
.rd-row, .rd-gate, .rd-here { position: relative; z-index: 1; }
/* награда: значок с трофеями на дорожке, перемычка к плитке */
.rd-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; }
.rd-row.l .rd-tile { grid-column: 1; grid-row: 1; justify-self: end; } .rd-row.r .rd-tile { grid-column: 3; grid-row: 1; justify-self: start; }
.rd-row::after { content: ''; position: absolute; top: 50%; height: 12px; margin-top: -6px; width: 46px; z-index: -1; background: #1c1848; box-shadow: inset 0 0 0 2.5px var(--ink-0); }
.rd-row.l::after { right: 50%; } .rd-row.r::after { left: 50%; }
:is(.rd-row.got, .rd-row.ready)::after { background: linear-gradient(180deg, #ffe680, #e89a0c); }
.rd-sh { grid-column: 2; grid-row: 1; justify-self: center; position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font: 900 14px "Rubik", sans-serif; color: #c9c6ff;
  background: radial-gradient(circle at 50% 30%, #4a4590, #24204f 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.3), 0 0 0 3px var(--ink-0), 0 4px 0 var(--ink-0); }
:is(.rd-row.got, .rd-row.ready) .rd-sh { color: #fff; -webkit-text-stroke: 3px #5a3300; paint-order: stroke fill; background: radial-gradient(circle at 50% 30%, #ffe680, #ffc21f 55%, #e08a0a); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(150,80,0,.35), 0 0 0 3px #3b2200, 0 4px 0 #3b2200; }
/* плитка награды */
.rd-tile { position: relative; display: grid; justify-items: center; align-content: start; width: min(100%, 148px); padding: 0; border: 0; border-radius: 18px; overflow: visible; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t1) 80%, #fff) 0%, var(--t1) 30%, var(--t2, color-mix(in srgb, var(--t1) 45%, #1a1446)) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 0 0 5px rgba(255,255,255,.1), 0 0 0 3px var(--ink-0), 0 6px 0 var(--ink-0), 0 12px 18px rgba(0,0,0,.4); transition: transform .12s; }
.rd-tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .12;
  background: repeating-linear-gradient(135deg, #fff 0 6px, transparent 6px 14px); -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.rd-art { position: relative; display: grid; place-items: center; height: 86px; width: 100%; filter: drop-shadow(0 5px 0 rgba(0,0,0,.3)); }
.rd-art .fpk { --pw: 46px; --ph: 64px; --d: 5px; } .rd-art .fpk em, .rd-art .fpk .fpk-sh, .rd-art .fpk::after { display: none; }
.rd-art .rs-coins .coin { width: 34px !important; height: 34px !important; margin-left: -15px; } .rd-art .rs-coins .coin:first-child { margin-left: 0; }
.rd-nm { display: grid; place-items: center; width: 100%; min-height: 34px; padding: 5px 6px 7px; border-radius: 0 0 16px 16px; background: rgba(6,8,30,.55); box-shadow: inset 0 2px 0 rgba(0,0,0,.25); }
.rd-nm span { font: 900 12px/1.1 "Rubik", sans-serif; text-transform: uppercase; text-align: center; color: #fff; -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
.rd-row.lock .rd-tile { background: linear-gradient(180deg, color-mix(in srgb, var(--t1) 45%, #3a3a6a), color-mix(in srgb, var(--t1) 25%, #1d1b44)); }
.rd-row.lock .rd-art { opacity: .8; filter: saturate(.6) drop-shadow(0 5px 0 rgba(0,0,0,.3)); }
.rd-row.got .rd-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(8,8,30,.5); pointer-events: none; }
.rd-ok { position: absolute; z-index: 2; left: 50%; top: 30px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-items: center; font: 900 20px "Rubik", sans-serif; font-style: normal; color: #fff;
  background: linear-gradient(180deg, #5cf08a, #22a84b); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), 0 0 0 3px var(--ink-0), 0 3px 0 var(--ink-0); }
.rd-row.ready .rd-tile { animation: rdReady 1.8s ease-in-out infinite; }
.rd-row.ready .rd-tile:active { transform: translateY(4px); animation: none; }
@keyframes rdReady { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-6px) rotate(-2deg); } 80% { transform: translateY(0) rotate(1.5deg); } 90% { transform: translateY(-3px) rotate(-1deg); } }
.rd-take { position: absolute; left: 50%; bottom: -16px; z-index: 2; transform: translateX(-50%); padding: 6px 14px 7px; border-radius: 11px; white-space: nowrap; font: 900 13px "Rubik", sans-serif; font-style: normal; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: 3px #0b3a17; paint-order: stroke fill; background: linear-gradient(180deg, #6ff59a, #22b04f); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.18), 0 0 0 3px #0b3a17, 0 4px 0 #0b3a17; }
.rd-row.ready { margin-bottom: 12px; }
/* новая игра: шестигранник прямо на дорожке и табличка под ним */
.rd-gate { display: grid; justify-items: center; margin: 4px 0; }
.rd-hex { position: relative; z-index: 2; width: 74px; height: 82px; display: grid; place-items: center; filter: drop-shadow(0 5px 0 var(--ink-0)); }
.rd-hex::before, .rd-hex > span { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.rd-hex::before { content: ''; position: absolute; inset: -3px; background: var(--ink-0); }
.rd-hex > span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #fff, #a9bbf2); }
.rd-hex > span::after { content: ''; position: absolute; inset: 5px; clip-path: inherit; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 80%, #fff), var(--c1) 35%, var(--c2)); }
.rd-hex svg { position: relative; z-index: 1; width: 58%; height: 58%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.rd-hex > i { position: absolute; z-index: 2; right: -4px; bottom: 2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1a1446; box-shadow: 0 0 0 2.5px var(--ink-0); color: #fff; font-style: normal; } .rd-hex > i .ui-ic { width: 14px; height: 14px; }
.rd-gp { position: relative; display: grid; justify-items: center; gap: 1px; margin-top: -14px; padding: 18px 26px 10px; min-width: 210px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 55%, #1a1446), color-mix(in srgb, var(--c2) 45%, #120e36)); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 3px var(--ink-0), 0 6px 0 var(--ink-0), 0 12px 18px rgba(0,0,0,.4); }
.rd-gp small { font: 800 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.rd-gp b { font: 900 21px/1.1 "Rubik", sans-serif; text-transform: uppercase; color: #fff; -webkit-text-stroke: 3.5px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
.rd-gp em { margin-top: 4px; padding: 3px 10px; border-radius: 8px; font: 900 12px "Rubik", sans-serif; font-style: normal; color: #ffcf3a; background: rgba(6,8,30,.55); } .rd-gp em .ui-ic { width: 12px; height: 12px; vertical-align: -2px; }
.rd-gate.got .rd-gp em { color: #6ff59a; }
.rd-gate.lock .rd-gp { background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 30%, #2a2858), color-mix(in srgb, var(--c2) 20%, #17143c)); }
.rd-gate.lock .rd-hex > span::after { filter: saturate(.5) brightness(.8); }
/* «Ты здесь» */
.rd-here { display: grid; justify-items: center; gap: 4px; margin: -2px 0; }
.rd-me { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 28px; background: radial-gradient(circle at 50% 30%, #ffe680, #f2a71b 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(150,80,0,.35), 0 0 0 3px var(--ink-0), 0 5px 0 var(--ink-0); animation: rdMe 1.8s ease-in-out infinite; }
@keyframes rdMe { 50% { transform: translateY(-5px); } }
.rd-here b { padding: 3px 10px; border-radius: 8px; background: var(--ink-0); font: 900 12px "Rubik", sans-serif; text-transform: uppercase; color: #ffcf3a; }
/* закрытые разделы в шапке наград */
.rw-tabs .rw-lk { display: grid; justify-items: center; gap: 1px; color: rgba(255,255,255,.4); } .rw-tabs .rw-lk .ui-ic { width: 12px; height: 12px; vertical-align: -1px; }
.rw-tabs .rw-lk small { font: 800 10px "Rubik", sans-serif; letter-spacing: 0; color: #ffcf3a; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .rd-row.ready .rd-tile, .rd-me { animation: none; } }
/* выбор игры — такие же объёмные плитки */
.h2-pc { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.22), 0 0 0 2.5px var(--ink-0), 0 5px 0 var(--ink-0) !important; margin-bottom: 4px; transition: transform .1s; }
.h2-pc:active { transform: translateY(3px); }
.h2-pc.sel { box-shadow: inset 0 0 0 3px #ffcf3a, inset 0 -4px 0 rgba(0,0,0,.22), 0 0 0 2.5px var(--ink-0), 0 5px 0 var(--ink-0) !important; }
.h2-pc b { -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; }
.h2-pc.lock { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1) !important; }
.h2-pci svg { filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }

/* стадион за ареной: трибуны с болельщиками, мачты, вспышки */
.h2-arena { isolation: isolate; }
.h2-bg { position: absolute; left: -16px; right: -16px; top: -90px; bottom: -60px; width: calc(100% + 32px); height: calc(100% + 150px); z-index: -1; object-fit: cover; object-position: 50% 100%; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%); }
.h2-road, .h2-cta { position: relative; z-index: 2; }

/* ===== профиль: карточка игрока в объёме, как в Clash Royale ===== */
#profile .topbar { display: none; }
.pc { position: relative; display: grid; gap: 12px; margin: 4px 0 14px; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, #2c3f8e, #1a2560); box-shadow: var(--bev); }
.pc-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
#prof-badge.pc-ava { display: grid !important; place-items: center; width: 74px !important; height: 74px !important; border-radius: 20px !important; font-size: 42px !important;
  background: radial-gradient(circle at 50% 30%, #ffe680, #f2a71b 70%) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -5px 0 rgba(150,80,0,.35), 0 0 0 3px var(--ink-0), 0 5px 0 var(--ink-0) !important; }
.pc-nm { display: grid; gap: 4px; min-width: 0; }
.pc-nm > b { font: 900 22px/1.05 "Rubik", sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 3.5px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
.pc-rk { justify-self: start; padding: 2px 9px; border-radius: 8px; background: rgba(6,10,30,.55); font: 900 12px "Rubik", sans-serif; text-transform: uppercase; color: #ffcf3a; }
.pc-xp .xpbar { display: block; height: 12px; border-radius: 6px; background: #0d0b2a; box-shadow: inset 0 2px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.15); overflow: hidden; margin: 0; }
.pc-xp .xpbar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(180deg, #a8f0ff, #4fb4ff 55%, #2f78e0); box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
.pc-nx { font: 600 11.5px/1.2 var(--font-body); color: rgba(255,255,255,.65); }
.pc .pf-edit { width: 42px; height: 42px; border: 0; border-radius: 13px; font-size: 18px; color: #fff; background: linear-gradient(180deg, var(--bl1), var(--bl2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.pc .pf-edit:active { transform: translateY(3px); }
.pc-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-big > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(6,10,30,.5); box-shadow: inset 0 3px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.12); }
.pc-big span { grid-row: 1 / 3; color: #ffcf3a; } .pc-big span .ui-ic { width: 34px; height: 34px; filter: drop-shadow(0 2px 0 var(--ink-0)); }
.pc-big b { font: 900 26px/1 "Rubik", sans-serif; color: #fff; -webkit-text-stroke: 3.5px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
.pc-big small { font: 700 11px var(--font-body); color: rgba(255,255,255,.65); }
.pc-meta { display: flex; justify-content: space-between; gap: 6px; font: 600 12px var(--font-body); color: rgba(255,255,255,.6); } .pc-meta b { color: #fff; }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pc-st { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 9px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, #34308a, #211d5c);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -4px 0 rgba(0,0,0,.22), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.pc-st i { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; font-style: normal; } .pc-st i svg, .pc-st i .ui-ic { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.pc-st b { font: 900 22px/1 "Rubik", sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); }
.pc-st small { font: 700 10.5px/1.15 var(--font-body); color: rgba(255,255,255,.65); }
#profile .pf-tiles { gap: 10px; margin: 0 0 16px; }
#profile .pf-tiles button { justify-items: center; text-align: center; padding: 12px 6px 10px; border-radius: 16px; background: linear-gradient(180deg, var(--bl1), var(--bl2)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.38), inset 0 -4px 0 rgba(0,0,0,.22), 0 0 0 2.5px var(--ink-0), 0 5px 0 var(--ink-0) !important; transition: transform .1s; }
#profile .pf-tiles button:active { transform: translateY(4px); }
#profile .pf-tiles b { -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; text-transform: uppercase; font-size: 13px; } #profile .pf-tiles small { color: rgba(255,255,255,.8); }
#profile .pf-tiles span .ui-ic { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 var(--ink-0)); }
#profile .settings { display: grid; gap: 10px; }
#profile .set-row { padding: 14px 16px !important; border-radius: 14px !important; color: #fff; background: linear-gradient(180deg, #2a2766, #1c1a4a) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0) !important; font: 800 15px var(--font-body); transition: transform .1s; }
#profile .set-row:active { transform: translateY(3px); }
#profile .set-row b { color: #ffcf3a !important; font: 900 14px "Rubik", sans-serif; }
/* арена: длинное название не раздвигает сетку; переносится в две строки */
.h2-game { grid-template-columns: minmax(0, 1fr); }
.h2-ban { max-width: 92%; padding: 7px 28px 8px; }
.h2-ban b { white-space: normal; text-wrap: balance; text-align: center; font-size: clamp(18px, 5.6vw, 24px); line-height: 1.02; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* полоса под кнопками Telegram: прокручиваемое не залезает под «Закрыть» и «⋯» */
.safe-cap { position: fixed; left: 0; right: 0; top: 0; height: var(--safe-top, 0px); z-index: 30; pointer-events: none; background: linear-gradient(180deg, #0c0a26 75%, rgba(12,10,38,0)); }
/* подсказки имён: тёмный список, выбранная строка — золотая, текст всегда виден */
.suggest { background: #1c1a40 !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 0 0 2.5px var(--ink-0), 0 16px 34px rgba(0,0,0,.55) !important; }
.suggest button { background: transparent !important; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; font-weight: 700; }
.suggest button.sel { background: linear-gradient(180deg, #ffe07a, #f2b21c) !important; color: #2a1a00 !important; }
.suggest button.sel small { color: rgba(42,26,0,.7) !important; }
@media (hover: hover) { .suggest button:hover:not(.sel) { background: rgba(255,255,255,.08) !important; } }
@media (hover: none) { .suggest button:hover:not(.sel) { background: transparent !important; } }
.suggest button:active { background: rgba(255,207,58,.35) !important; }
.suggest button[disabled] { color: rgba(255,255,255,.55) !important; }
.suggest button.sel :is(span, b) { color: #2a1a00 !important; }
/* поле: газон «в клетку», ворота с сеткой, угловые флажки; игра стоит на пьедестале */
.h2-pitch { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 10%, transparent 10% 20%), repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 12.5%, transparent 12.5% 25%), linear-gradient(180deg, #2f9e4a, #36b053) !important; }
.h2-goal { position: absolute; top: 38%; height: 24%; width: calc(var(--W) * .075); border: 3px solid #fff; border-left: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px 6px), rgba(255,255,255,.08); }
.h2-goal.l { left: 6%; transform-origin: 0 50%; transform: rotateY(-90deg); }
.h2-goal.r { right: 6%; transform-origin: 100% 50%; transform: rotateY(90deg); border-left: 3px solid #fff; border-right: 0; }
.h2-flag { position: absolute; width: 2px; height: calc(var(--W) * .05); background: #fff; transform-origin: 50% 100%; transform: rotateX(-90deg); text-decoration: none; }
.h2-flag::after { content: ''; position: absolute; left: 2px; top: 0; width: 8px; height: 6px; background: #ffcf3a; }
.h2-flag.a { left: 6%; top: calc(8% - var(--W) * .05); } .h2-flag.b { right: 6%; top: calc(8% - var(--W) * .05); }
.h2-flag.c { left: 6%; bottom: 8%; } .h2-flag.d { right: 6%; bottom: 8%; }
.h2-ped { position: absolute; left: 50%; bottom: calc(var(--W) * .03); width: calc(var(--W) * .36); height: calc(var(--W) * .1); margin-left: calc(var(--W) * -.18); border-radius: 0 0 50% 50% / 0 0 60% 60%;
  background: linear-gradient(90deg, #1b2a6e, #3b55c4 45%, #2a3f9a 70%, #16215a); box-shadow: 0 0 0 2.5px var(--ink-0); }
.h2-ped::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--W) * -.045); height: calc(var(--W) * .09); border-radius: 50%; background: radial-gradient(closest-side, #ffe680, #f2b21c 70%, #c98a12); box-shadow: 0 0 0 2.5px var(--ink-0), inset 0 -3px 0 rgba(150,80,0,.4); }
.h2-ped::after { content: ''; position: absolute; left: 12%; right: 12%; top: calc(var(--W) * -.03); height: calc(var(--W) * .06); border-radius: 50%; background: radial-gradient(closest-side, #2b3f9a, #1b2a6e); }
.h2-shadow { bottom: calc(var(--W) * .09); width: calc(var(--W) * .22); margin-left: calc(var(--W) * -.11); z-index: 1; }
.h2-hex { bottom: calc(var(--W) * .13); z-index: 2; filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--c2) 40%, #000)) drop-shadow(0 3px 0 color-mix(in srgb, var(--c2) 30%, #000)) drop-shadow(0 2px 0 var(--ink-0)); }
.h2-hex::before { display: none; }
.h2-game { align-content: end; padding: 0 0 1cqh; }
.h2-hex { --hs: calc(var(--W) * .36); }
/* Тики-Така: объёмные клетки, в заполненной — лицо игрока */
#ttt-grid { gap: 8px !important; }
.tg-head { border-radius: 14px !important; background: linear-gradient(180deg, #34308a, #211d5c) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0) !important; }
.tg-head span { color: #fff; font-weight: 900 !important; }
.tg-cell { position: relative; overflow: hidden; border-radius: 14px !important; background: linear-gradient(180deg, #2a2766, #1c1a4a) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0) !important; transition: transform .1s; }
.tg-cell:not(:disabled):active { transform: translateY(3px); }
.tg-cell.sel { background: linear-gradient(180deg, #4a3f12, #2a2310) !important; box-shadow: inset 0 0 0 3px #ffcf3a, 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0) !important; }
.tg-cell.sel::after { color: #ffcf3a !important; }
.tg-cell.filled { display: grid; place-items: end center; padding: 0 !important; background: linear-gradient(180deg, #3ad16a, #1b8a40) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0) !important; }
.tg-face { position: absolute; left: 50%; bottom: 22px; width: 72%; max-width: 74px; aspect-ratio: 1; transform: translateX(-50%); object-fit: cover; object-position: top; }
.tg-face.ini { display: grid; place-items: center; bottom: 30px; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.25); font: 900 18px "Rubik", sans-serif; font-style: normal; color: #fff; }
.tg-cell.filled > span { position: relative; z-index: 1; width: 100%; padding: 4px 3px 5px; background: rgba(6,20,10,.72); font: 900 10.5px/1.1 "Rubik", sans-serif !important; color: #fff !important; text-align: center; }
.tg-cell.filled.p0, .tg-cell.filled.p1 { background: linear-gradient(180deg, #4b86ea, #2a55c0) !important; }
.tg-cell.filled.p1 { background: linear-gradient(180deg, #ff6b7d, #c9223e) !important; }
.tg-cell.filled b { position: absolute; top: 4px; left: 6px; z-index: 1; color: #fff !important; -webkit-text-stroke: 2px var(--ink-0); paint-order: stroke fill; }
#ttt { justify-content: flex-start !important; }
#ttt-grid { margin-top: 14px; }
.tg-cell.filled { display: block !important; }
.tg-face { top: 5px; bottom: auto; height: calc(100% - 32px); width: auto; max-width: none; }
.tg-face.ini { top: 12px; height: 46px; width: 46px; }
.tg-cell.filled > span { position: absolute; left: 0; right: 0; bottom: 0; }
.tg-cell.filled.p0, .tg-cell.filled.p1 { background: linear-gradient(180deg, #3ad16a, #1b8a40) !important; }
.tg-cell.filled.p0:has(b) { background: linear-gradient(180deg, #4b86ea, #2a55c0) !important; }
.tg-cell.filled.p1:has(b) { background: linear-gradient(180deg, #ff6b7d, #c9223e) !important; }
#ttt > .topbar { margin-bottom: 0 !important; }

/* ===== игры: прежний тёмный стиль; только анимация ответа — верно «подпрыгивает», неверно дрожит ===== */
:is(.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt).right { animation: gmRight .5s cubic-bezier(.2,1.4,.4,1); }
:is(.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt).wrong { animation: gmWrong .42s ease-out; }
@keyframes gmRight { 0% { transform: scale(1); } 40% { transform: scale(1.06) translateY(-3px); } 100% { transform: none; } }
@keyframes gmWrong { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { :is(.ng-opt, .nat-opt, .btn.ghost.opt, .du-opt):is(.right, .wrong) { animation: none; } }

/* ===== «Мой состав» ===== */
.h2-sb.sq .h2-sbi .ui-ic { width: 38px; height: 38px; color: #fff; filter: drop-shadow(0 3px 0 var(--ink-0)); }
.sq-head { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
.sq-k, .sq-form { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(180deg, #2c3f8e, #1a2560); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.sq-form { background: linear-gradient(180deg, var(--bl1), var(--bl2)); } .sq-form:active { transform: translateY(3px); }
.sq-k small, .sq-form small { font: 800 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.sq-k b, .sq-form b { font: 900 24px/1 "Rubik", sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink-0); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink-0); } .sq-k b i { font-size: 13px; font-style: normal; color: rgba(255,255,255,.7); }
.sq-pitch { position: relative; aspect-ratio: 100 / 132; border-radius: 22px; overflow: visible; background: repeating-linear-gradient(180deg, #36ad52 0 7.14%, #2c9846 7.14% 14.28%); box-shadow: inset 0 0 0 6px #263a86, 0 0 0 3px var(--ink-0), 0 6px 0 var(--ink-0), 0 14px 22px rgba(0,0,0,.4); }
.sq-pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.55); stroke-width: .6; }
.sq-slot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #fff; }
.sq-slot:not(.on) { width: 52px; height: 66px; align-content: center; border-radius: 12px; background: rgba(6,20,10,.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.sq-plus { font: 900 26px/1 "Rubik", sans-serif; color: #fff; } .sq-slot > small { font: 900 10px "Rubik", sans-serif; color: #ffcf3a; }
.sq-slot .cc { box-shadow: 0 6px 12px rgba(0,0,0,.4); }
.sq-ch { display: flex; gap: 2px; padding: 2px 5px; border-radius: 6px; background: var(--ink-0); font: 900 9px "Rubik", sans-serif; color: #ff8a8a; }
.sq-ch i, .sq-ch u { width: 7px; height: 7px; border-radius: 2px; background: #3ee66b; text-decoration: none; } .sq-ch u { background: rgba(255,255,255,.2); }
.sq-act { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin: 18px 0 8px; }
.sq-act .btn[disabled] { filter: grayscale(.6) brightness(.8); }
.sq-note { text-align: center; color: rgba(255,255,255,.7); font-size: 13px; margin: 8px 6px; }
.sq-pl { overflow-y: auto; padding: 4px 2px 10px; }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; justify-items: center; }
.card-search { width: 100%; min-height: 40px; margin: 6px 0; padding: 8px 12px; border: 1px solid #ffffff30; border-radius: 10px; background: #ffffff0d; color: inherit; font: inherit; flex-shrink: 0; }
.card-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; flex-shrink: 0; }
.card-pages button { min-width: 44px; min-height: 40px; border: 1px solid #ffffff30; border-radius: 10px; background: #ffffff12; color: inherit; font: inherit; }
.card-pages button:disabled { opacity: .3; }
/* Small chooser cards do not need dozens of simultaneous shimmer layers. */
.sq-grid .cc::before, .sq-grid .cc::after, .sq-grid .cc .cc-ph::after,
.sx-grid .cc::before, .sx-grid .cc::after, .sx-grid .cc .cc-ph::after { animation: none !important; }
.sq-grid .cc-face, .sx-grid .cc-face { filter: none; }
.sq-pc { position: relative; display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; } .sq-pc.off .cc { filter: saturate(.4) brightness(.75); }
.sq-pc.sel .cc { box-shadow: 0 0 0 3px #ffcf3a; } .sq-pc em { font: 800 9.5px var(--font-body); font-style: normal; color: #ff8a8a; }
.sq-rm { width: 100%; margin-top: 14px; }
.sq-forms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sq-fb { padding: 16px 4px; border: 0; border-radius: 14px; font: 900 18px "Rubik", sans-serif; color: #fff; background: linear-gradient(180deg, #2a2766, #1c1a4a); box-shadow: 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.sq-fb.sel { background: linear-gradient(180deg, #ffe07a, #f2b21c); color: #2a1a00; }
#squad > .topbar { margin-bottom: 0 !important; }
.sq-sys { cursor: pointer; } .sq-sys:active { transform: translateY(3px); }
.sq-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sq-links line { stroke-width: 1.1; stroke-linecap: round; } .sq-links .green { stroke: #3ee66b; } .sq-links .orange { stroke: #ffb52e; } .sq-links .red { stroke: #ff4f66; opacity: .7; }
.sq-ch.num { min-width: 22px; justify-content: center; font: 900 12px "Rubik", sans-serif; color: #fff; }
.sq-ch.num.g { background: #1f9e48; } .sq-ch.num.o { background: #d98a0c; } .sq-ch.num.r { background: #c9223e; }
.cc.sq-mini .cc-band small { display: none; } .cc.sq-mini .cc-band b { font-size: 1.05em; }
.sq-sysl { display: grid; gap: 12px; }
.sq-sb { display: grid; gap: 4px; padding: 14px 16px; border: 0; border-radius: 16px; text-align: left; color: #fff; background: linear-gradient(180deg, #2a2766, #1c1a4a); box-shadow: 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.sq-sb b { font: 900 18px "Rubik", sans-serif; } .sq-sb small { font: 600 13px/1.3 var(--font-body); color: rgba(255,255,255,.75); }
.sq-sb.sel { box-shadow: inset 0 0 0 3px #ffcf3a, 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }

/* ===== галерея: поиск, «мои», что можно забрать, почти собранные ===== */
.gl-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0; }
.gl-q { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: var(--plate, #211e4a); box-shadow: inset 0 3px 5px rgba(0,0,0,.45), 0 0 0 2.5px var(--ink-0); color: rgba(255,255,255,.6); }
.gl-q .ui-ic { width: 18px; height: 18px; flex: none; }
.gl-q input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; color: #fff; font: 700 15px var(--font-body); outline: none; }
.gl-q input::placeholder { color: rgba(255,255,255,.45); }
.gl-mine { padding: 0 16px; border: 0; border-radius: 14px; font: 900 14px "Rubik", sans-serif; color: #fff; background: linear-gradient(180deg, var(--bl1), var(--bl2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.gl-mine.on { background: linear-gradient(180deg, #ffe07a, #f2b21c); color: #2a1a00; }
.gl-h { display: flex; align-items: center; gap: 6px; margin: 16px 2px 8px; font: 900 13px "Rubik", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.8); } .gl-h .ui-ic { width: 16px; height: 16px; color: #ffcf3a; }
.gl-ready { display: grid; gap: 10px; }
.gl-rd { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(120deg, #3b2c08, #1e1a3e 70%); box-shadow: inset 0 0 0 2px #ffcf3a, 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.gl-rd > img, .gl-rd > .gl-noc { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; display: grid; place-items: center; }
.gl-rd b { font: 900 15px "Rubik", sans-serif; color: #fff; } .gl-rd small { grid-column: 2; font: 700 12px var(--font-body); color: #ffcf3a; }
.gl-rd .gl-claim { grid-column: 3; grid-row: 1 / 3; }
.gl-almost { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gl-al { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 14px; text-align: left; color: #fff; background: linear-gradient(180deg, #2a2766, #1c1a4a); box-shadow: 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.gl-al img, .gl-al .gl-noc { width: 32px; height: 32px; object-fit: contain; }
.gl-al span { display: grid; gap: 3px; min-width: 0; } .gl-al b { font: 900 12.5px/1.1 "Rubik", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gl-al small { font: 700 11px var(--font-body); color: #ffcf3a; }
.gl-al:active { transform: translateY(3px); }
.gl-prize { opacity: .75; } .gl-prize > .ui-ic { width: 12px; height: 12px; color: rgba(255,255,255,.6); }
.gl-res:empty { display: none; }
.cl-nm { display: block; margin-top: 4px; font: 800 11px/1.2 var(--font-body); color: rgba(255,255,255,.75); text-align: center; }

/* ===== 3D-матч ===== */
.xm-stage.is3d { position: relative; height: min(58vh, 480px); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 2.5px var(--ink-0), 0 5px 0 var(--ink-0); background: #0b0f2c; }
.xm-stage.is3d .xm-pitch { display: none; }
.xm-stage canvas.a3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.xm-stage .xm-goalfx { z-index: 3; }

/* ===== турнир драфта и выбор мяча ===== */
.xt-round { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 12px; border-radius: 10px; background: linear-gradient(180deg, #ffe07a, #f2b21c); color: #2a1a00; font: 900 13px "Rubik", sans-serif; text-transform: uppercase; box-shadow: 0 0 0 2.5px var(--ink-0), 0 3px 0 var(--ink-0); } .xt-round .ui-ic { width: 15px; height: 15px; }
.xt-br { display: grid; gap: 8px; margin: 14px 0 6px; }
.xt-r { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(180deg, #2a2766, #1c1a4a); box-shadow: 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); }
.xt-r b { font: 900 15px "Rubik", sans-serif; color: #fff; } .xt-r small { grid-column: 1; font: 700 12px var(--font-body); color: rgba(255,255,255,.6); }
.xt-r span { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 900 18px "Rubik", sans-serif; color: rgba(255,255,255,.55); text-align: right; } .xt-r span em { display: block; font: 800 11px var(--font-body); font-style: normal; color: #ffcf3a; }
.xt-r.win { background: linear-gradient(180deg, #2fbf5c, #1a7f3a); } .xt-r.win span { color: #fff; }
.xt-r.lose { background: linear-gradient(180deg, #c9223e, #7a1426); } .xt-r.lose span { color: #fff; }
.xt-r.next { box-shadow: inset 0 0 0 3px #ffcf3a, 0 0 0 2.5px var(--ink-0), 0 4px 0 var(--ink-0); } .xt-r.next span { font-size: 13px; color: #ffcf3a; }
.xt-ladder { display: grid; gap: 6px; margin-bottom: 8px; }
.xt-p { display: grid; grid-template-columns: 30px auto 1fr; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(6,10,30,.45); }
.xt-p b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #2a2766; font: 900 13px "Rubik", sans-serif; color: #fff; }
.xt-p span { font: 900 12.5px "Rubik", sans-serif; color: #fff; white-space: nowrap; } .xt-p small { font: 700 11.5px/1.25 var(--font-body); color: rgba(255,255,255,.7); text-align: right; } .xt-p small .ui-ic { width: 11px; height: 11px; color: #ffcf3a; vertical-align: -1px; }
.xt-p.got { box-shadow: inset 0 0 0 2px #ffcf3a; background: rgba(255,207,58,.12); } .xt-p.got b { background: #ffcf3a; color: #2a1a00; }
.xt-pens { display: grid; gap: 4px; margin: 6px 0; font: 800 12px var(--font-body); color: rgba(255,255,255,.8); } .xt-pens span { display: flex; align-items: center; justify-content: center; gap: 4px; }
.xt-pens i { width: 12px; height: 12px; border-radius: 50%; } .xt-pens i.in { background: #3ee66b; } .xt-pens i.out { background: #ff4f66; }
.xt-note { margin: 10px 4px; text-align: center; font: 600 12.5px/1.35 var(--font-body); color: rgba(255,255,255,.65); }
.xm-balls { margin: 14px 0 6px; } .xm-balls > small { display: block; margin-bottom: 6px; font: 900 11px "Rubik", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.xm-balls > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.xm-ball3 { display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #2a2766, #1c1a4a); color: #fff; box-shadow: 0 0 0 2px var(--ink-0), 0 3px 0 var(--ink-0); }
.xm-ball3 i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), transparent 30%), radial-gradient(circle at 50% 50%, var(--b2) 0 18%, transparent 19%), radial-gradient(circle at 15% 70%, var(--b2) 0 12%, transparent 13%), radial-gradient(circle at 85% 70%, var(--b2) 0 12%, transparent 13%), radial-gradient(circle at 50% 8%, var(--b2) 0 10%, transparent 11%), var(--b1); box-shadow: inset -3px -4px 0 rgba(0,0,0,.25), 0 0 0 2px var(--ink-0); }
.xm-ball3 span { font: 800 10px/1.15 var(--font-body); text-align: center; } .xm-ball3 span .ui-ic { width: 10px; height: 10px; vertical-align: -1px; }
.xm-ball3.on { box-shadow: inset 0 0 0 2.5px #ffcf3a, 0 0 0 2px var(--ink-0), 0 3px 0 var(--ink-0); }
.xm-ball3.lock i { filter: grayscale(.6) brightness(.6); } .xm-ball3.lock span { color: rgba(255,255,255,.55); }

/* ===== главная: 3D стадион-остров ===== */
.h2-arena canvas.a3d { position: absolute; left: -16px; right: -16px; top: 30%; bottom: 0; width: calc(100% + 32px); height: 70%; z-index: 0; touch-action: pan-y; }
.h2-arena.h2-3d .h2-pitch, .h2-arena.h2-3d .h2-ped, .h2-arena.h2-3d .h2-shadow { display: none; }
.h2-arena.h2-3d .h2-game { pointer-events: none; z-index: 1; }
.h2-arena.h2-3d .h2-hex, .h2-arena.h2-3d .h2-ban { pointer-events: auto; }
.h2-arena.h2-3d .h2-hex { --hs: calc(var(--W) * .26); bottom: calc(var(--W) * .2); }

/* ===== драфт: все пять кандидатов сразу (3 + 2), выбранный — в золотой рамке ===== */
.xp-grid5 { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 14px 10px; padding: 8px 0; flex: 1; }
.xp-grid5 .xp-c { flex: 0 0 calc((100% - 20px) / 3); display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; transition: transform .15s, opacity .15s; }
.xp-grid5 .xc.big { --cw: min(108px, calc((100vw - 64px) / 3)); }
.xp-grid5 .xp-c.on { transform: translateY(-6px); }
.xp-grid5 .xp-c.on .xc { box-shadow: 0 0 0 3px var(--gold), 0 12px 26px rgba(0,0,0,.45); }
.xp-grid5:has(.xp-c.on) .xp-c:not(.on) { opacity: .6; }
/* линии химии: толще и с тёмной кромкой, чтобы читались между карточками */
.xd-links .ln:not(.none) { stroke-width: 5 !important; filter: drop-shadow(0 0 0 #0a0c22) drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.xp-grid5 .xp-c .fu { --cw: min(104px, calc((100vw - 64px) / 3)); }
.xp-grid5 .xp-c.on .fu { filter: drop-shadow(0 0 0 #ffcf3a) drop-shadow(0 0 3px #ffcf3a); }

/* ===== драфт: поле как в «Моём составе» — зелёный газон, ровные линии связей ===== */
.xd-pitch { aspect-ratio: 100 / 132 !important; border-radius: 22px !important; overflow: visible; margin-top: 8px;
  background: repeating-linear-gradient(180deg, #36ad52 0 7.14%, #2c9846 7.14% 14.28%) !important;
  box-shadow: inset 0 0 0 6px #263a86, 0 0 0 3px #0a0f24, 0 6px 0 #0a0f24, 0 14px 22px rgba(0,0,0,.4) !important; perspective: none !important; }
.xd-field .st { display: none; }
.xd-field .mk > polygon:first-child { fill: none !important; stroke: rgba(255,255,255,.55) !important; }
.xd-field .mk polygon, .xd-field .mk line, .xd-field .mk ellipse { stroke: rgba(255,255,255,.55) !important; stroke-width: 1.5 !important; }
.xd-links .ln { stroke-width: 1.1 !important; vector-effect: none !important; filter: none !important; stroke-linecap: round; stroke-dasharray: none !important; }
.xd-links .green { stroke: #3ee66b !important; } .xd-links .orange { stroke: #ffb52e !important; } .xd-links .red { stroke: #ff4f66 !important; opacity: .75; }
.xd-links .none { stroke: rgba(255,255,255,.35) !important; stroke-width: .5 !important; stroke-dasharray: 1.2 1.6 !important; }
/* шапки игр: непрозрачные — прокрученное не просвечивает и не налезает */
#app > .screen > .topbar { background: #16143a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#home2 { height: max(380px, calc(var(--tg-viewport-height, 100dvh) - var(--h2-off, 190px))) !important; }
/* значок игры крупнее, стадион-модель меньше */
.h2-arena.h2-3d .h2-hex { --hs: calc(var(--W) * .4) !important; bottom: calc(var(--W) * .2) !important; }
.h2-ban b { white-space: nowrap; -webkit-line-clamp: 1; }
.xd-pitch .xd-links .ln:not(.none) { stroke-width: 1.1 !important; filter: none !important; }

/* ===== матч: режимы просмотра и скорость ===== */
.xm-ctl { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0; }
.xm-seg { display: flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.07); }
.xm-seg button { padding: 7px 11px; border: 0; border-radius: 9px; background: none; color: rgba(255,255,255,.65); font: 800 12.5px "Rubik", sans-serif; }
.xm-seg button.on { background: #ffcf3a; color: #1a1406; }
.xm.comm .xm-stage { display: none; }
.xm.comm .xm-feed { max-height: none; }
.xm-ev.cm { opacity: .82; } .xm-ev.cm em { font-weight: 600; }
.xm.comm .xm-ev { animation: none; }
.toast { top: calc(var(--safe-top, 0px) + 12px) !important; bottom: auto !important; max-width: 300px; font-size: 13px !important; }
.a3d-tag { position: absolute; left: 0; top: 0; z-index: 2; padding: 2px 7px; border-radius: 6px; font: 800 11px "Rubik", sans-serif; white-space: nowrap; pointer-events: none; color: #fff; background: rgba(10,12,34,.8); box-shadow: inset 0 -2px 0 var(--tg, #ffcf3a); transition: transform .08s linear; }
.a3d-tag.a { --tg: #ffcf3a; } .a3d-tag.b { --tg: #ff5872; }
.h2-arena.h2-3d-wait :is(.h2-pitch, .h2-ped, .h2-shadow) { display: none; }
.h2-arena.h2-3d-wait .h2-hex { --hs: calc(var(--W) * .4) !important; bottom: calc(var(--W) * .2) !important; }
.h2-arena canvas.a3d { opacity: 0; transition: opacity .5s ease; }
.h2-arena.h2-3d-in canvas.a3d { opacity: 1; }

/* ===== поле драфта и состава: живой газон — мягкие полосы покоса, свет прожекторов, тень по краям ===== */
:is(.xd-pitch, .sq-pitch) {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,230,.16), transparent 60%),
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(0,20,10,.45) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 6.25%, rgba(0,0,0,.035) 6.25% 12.5%),
    linear-gradient(180deg, #1f7a3c, #26924a 45%, #1e7a3b) !important;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.08), 0 0 0 2px rgba(0,0,0,.35), 0 18px 34px rgba(0,0,0,.45) !important;
  border-radius: 18px !important;
}
.xd-field .mk polygon, .xd-field .mk line, .xd-field .mk ellipse, .sq-pitch svg { stroke: rgba(255,255,255,.4) !important; }
.xm-wait { display: none; }
.xm-stage.is3d.idle canvas.a3d { filter: brightness(.45) saturate(.6); transition: filter .4s; }
.xm-stage.is3d canvas.a3d { transition: filter .4s; }
.xm-stage.is3d.idle .xm-wait { display: grid; position: absolute; inset: 0; z-index: 3; place-content: center; justify-items: center; gap: 6px; color: #fff; pointer-events: none; }
.xm-wait b { font-size: 34px; } .xm-wait span { font: 800 14px "Rubik", sans-serif; padding: 6px 12px; border-radius: 10px; background: rgba(10,12,34,.75); }
.xm-stage.is3d.idle .a3d-tag { display: none; }
.xm.comm .xm-stage { display: block; }
.xm-ctl-t { align-self: center; font: 800 12px "Rubik", sans-serif; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }

/* ===== драфт в стиле FUT: выбор из пяти в ряд + большая карточка, тёмный газон как в FIFA ===== */
#xd-pick.xp { grid-template-rows: auto auto 1fr auto !important; gap: 12px; background: radial-gradient(90% 45% at 50% 30%, rgba(60,80,110,.35), transparent 70%), linear-gradient(180deg, #10151d, #07090d) !important; }
.xp-row5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; }
.xp-row5 .xp-c { display: block; padding: 4px 0 6px !important; border-radius: 10px; transition: transform .15s, opacity .15s, background .15s; }
.xp-row5 .xp-c .fu { --cw: min(66px, calc((100vw - 52px) / 5)); margin: 0 auto; pointer-events: none; }
.xp-row5 .xp-c.on { background: rgba(255,207,58,.12) !important; box-shadow: inset 0 0 0 2px #ffcf3a !important; transform: translateY(-4px); }
.xp-row5 .xp-c:not(.on) { opacity: .7; }
.xp-big { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; align-self: start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.xp-bc .fu { --cw: min(40vw, 160px); pointer-events: none; }
.xp-info { display: grid; gap: 6px; min-width: 0; }
.xp-info > b { font: 900 19px "Rubik", sans-serif; line-height: 1.1; }
.xp-info > small { font: 600 12px var(--font-body); color: rgba(255,255,255,.6); }
.xp-info .xp-pos { padding: 0; background: none; color: rgba(255,255,255,.6); font: 600 12px var(--font-body); }
.xp-st { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 10px; margin: 4px 0; }
.xp-st span { display: flex; align-items: baseline; gap: 6px; font: 700 12px "Rubik", sans-serif; color: rgba(255,255,255,.65); text-transform: uppercase; }
.xp-st b { min-width: 24px; font: 900 17px "Rubik", sans-serif; }
.xp-st b.hi { color: #4ee07a; } .xp-st b.mid { color: #f5c542; } .xp-st b.lo { color: #ff7a6a; }
.xp-info .xp-d { justify-self: start; }
/* поле */
:is(.xd-pitch, .sq-pitch) {
  background:
    radial-gradient(130% 90% at 50% 45%, transparent 50%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(180deg, #2c5a2a 0 6.25%, #264f25 6.25% 12.5%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 16px 30px rgba(0,0,0,.5) !important;
  border-radius: 10px !important;
}
.xd-field .mk polygon, .xd-field .mk line, .xd-field .mk ellipse { stroke: rgba(255,255,255,.28) !important; }
.fu-ch.cl { display: flex; align-items: stretch; height: 18px; min-width: 0; padding: 0; gap: 0; margin-top: -2px; border-radius: 3px; overflow: hidden; background: #0d1014; box-shadow: 0 2px 4px rgba(0,0,0,.5); font: 800 11px/18px "Rubik", sans-serif; }
.fu-ch.cl u { text-decoration: none; padding: 0 5px; color: #fff; background: #1c232c; }
.fu-ch.cl { padding-right: 5px; }
.fu-ch.cl u { margin-right: 5px; }
.xd-stars { --s: 0; position: relative; display: block; width: 62px; height: 12px; font-size: 12px; line-height: 12px; letter-spacing: 1px; color: rgba(255,255,255,.2); }
.xd-stars::before { content: "★★★★★"; }
.xd-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--s) * 20%); overflow: hidden; white-space: nowrap; color: #ffcf3a; }
#xdraft { background: radial-gradient(100% 40% at 50% 20%, rgba(70,90,120,.25), transparent 70%), linear-gradient(180deg, #121821, #07090d) !important; }
#app > #xdraft.screen > .topbar { background: #121821 !important; }
#xdraft .xd-bar { background: rgba(255,255,255,.04) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
#xdraft .xd-bar .xd-f { background: rgba(255,255,255,.06) !important; }
#xdraft .fu.empty { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }

/* ===== матч: живая 2D-трансляция ===== */
.xm-pitch { aspect-ratio: 1.6 !important; border-radius: 10px !important;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%), repeating-linear-gradient(90deg, #2c5a2a 0 6.25%, #264f25 6.25% 12.5%) !important; }
.xm-pitch svg rect, .xm-pitch svg line, .xm-pitch svg circle { stroke: rgba(255,255,255,.38) !important; }
.xm-p { width: 12px !important; height: 12px !important; margin: -6px 0 0 -6px !important; transition: none !important; border: 2px solid #111; box-sizing: border-box; box-shadow: 0 2px 3px rgba(0,0,0,.45) !important; z-index: 1; }
.xm-p.own { box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.5) !important; z-index: 2; }
.xm-pitch .xm-ball { width: 8px !important; height: 8px !important; margin: -4px 0 0 -4px !important; background: #fff !important; box-shadow: 0 0 0 1px rgba(0,0,0,.4) !important; z-index: 4; animation: none !important; }
.xm-bsh { position: absolute; width: 8px; height: 4px; margin: -1px 0 0 -4px; border-radius: 50%; background: rgba(0,0,0,.35); z-index: 3; }
.xm-tag { position: absolute; z-index: 5; display: none; transform: translate(-50%, 10px); padding: 1px 6px; border-radius: 4px; background: rgba(8,10,14,.82); color: #fff; font: 800 10px "Rubik", sans-serif; white-space: nowrap; pointer-events: none; }
.xm-tag.on { display: block; } .xm-tag.us { box-shadow: inset 0 -2px 0 #ffcf3a; } .xm-tag.them { box-shadow: inset 0 -2px 0 #ff5872; }

/* ===== игры на весь экран: фон — у страницы, а не у блока; шапка во всю ширину, вплотную к верху ===== */
body:not(.at-home) { background: radial-gradient(100% 40% at 50% 0%, rgba(70,90,120,.22), transparent 70%), linear-gradient(180deg, #121821, #07090d) fixed !important; }
#xdraft { background: none !important; }
#app > .screen > .topbar { position: sticky; top: var(--safe-top, 0px); z-index: 20; margin: 0 -16px; padding: 8px 16px; border-radius: 0 !important;
  background: #121821 !important; box-shadow: 0 -40px 0 #121821, 0 1px 0 rgba(255,255,255,.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#app > #xdraft.screen > .topbar { background: #121821 !important; }
.safe-cap { background: #121821 !important; }
body:not(.at-home)::before { background: radial-gradient(100% 40% at 50% 0%, rgba(70,90,120,.22), transparent 70%), linear-gradient(180deg, #121821, #07090d) !important; }
/* драфт и матч — сверху, без пустоты над выбором */
#app > #xdraft.screen > .topbar { margin-bottom: 0 !important; }
#app > #xdraft.screen::after { display: none !important; }

/* ===== главная: спокойный тёмный фон вместо фиолетовых трибун ===== */
body.at-home::before { background:
    radial-gradient(70% 38% at 50% 52%, rgba(120,150,190,.16), transparent 70%),
    radial-gradient(120% 40% at 50% 0%, rgba(70,90,120,.22), transparent 70%),
    linear-gradient(180deg, #121821 0%, #0b0f15 60%, #07090d 100%) !important; }
body.at-home { background: #0b0f15 !important; }
.h2-bg { display: none !important; }
.mh { background: rgba(255,255,255,.05) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.h2-road { background: rgba(255,255,255,.05) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important; }
.safe-cap { background: #121821 !important; }
#hub .mh, .rw-mh { background: #1a2029 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.35) !important; }
#hub .mh-chip, .rw-mh .mh-chip { background: rgba(0,0,0,.35) !important; }
.h2-road { background: #1a2029 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.35) !important; }
.tabbar { background: #151a22 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.45) !important; }
/* главная: без стадиона под игрой — только крупный значок игры */
#home2 .h2-pitch, #home2 .h2-ped { display: none !important; }
#home2 .h2-hex { --hs: calc(var(--W) * .5) !important; bottom: calc(var(--W) * .14) !important; }
#home2 .h2-shadow { opacity: .6; }

/* ===== главная: стена из карточек коллекции ===== */
#h2-wall { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0b0e14; }
body.at-home #h2-wall { display: block; }
body.at-home::before { display: none !important; }
.h2w-in { position: absolute; left: 50%; top: 50%; width: 740px; margin-left: -370px; margin-top: -760px; display: grid; grid-template-columns: repeat(8, 84px); gap: 10px; transform: rotate(-14deg); opacity: .62; will-change: transform;
  animation: h2wDrift 70s linear infinite; }
/* сдвиг ровно на 8 рядов (117 + 10) — узор повторяется, рывка нет */
@keyframes h2wDrift { from { transform: rotate(-14deg) translateY(0); } to { transform: rotate(-14deg) translateY(-1016px); } }
.h2w-in .cc { --w: 84px !important; width: 84px; height: 117px; box-shadow: none !important; }
.h2w-b { width: 84px; height: 117px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(165deg, #fff5c4, #e8c157 45%, #a87a12); }
.h2w-b.silver { background: linear-gradient(165deg, #ffffff, #c9d1dc 45%, #7c8796); }
.h2w-b.bronze { background: linear-gradient(165deg, #ffd9b8, #c98d5c 45%, #7d4a24); }
.h2w-b b { font: italic 900 30px "Rubik", sans-serif; color: rgba(0,0,0,.38); letter-spacing: -.03em; }
.h2w-dim { position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 50%, rgba(8,10,16,.1), rgba(8,10,16,.85)); }
@media (prefers-reduced-motion: reduce) { .h2w-in { animation: none; } }
/* стена — только фон: без бликов, теней и анимаций у 128 карточек (иначе телефон тратит на неё каждый кадр) */
#h2-wall .cc { animation: none !important; box-shadow: none !important; }
#h2-wall .cc::before, #h2-wall .cc::after, #h2-wall .cc-ph::before, #h2-wall .cc-ph::after { display: none !important; }
#h2-wall .cc-face { filter: none !important; }
/* открыт пак или выход игрока на весь экран — то, что под ним, не рисуем */
body.covered #h2-wall, body.covered #app > :not(.toast) { visibility: hidden; }
body.covered .h2w-in { animation-play-state: paused; }
#hub .mh, .h2-road, .tabbar { background: rgba(16,18,26,.92) !important; box-shadow: inset 0 0 0 1px rgba(255,207,58,.2), 0 6px 14px rgba(0,0,0,.35) !important; }
/* подпись игры: тонкая обводка и межбуквенный воздух — буквы не слипаются */
.h2-ban b { -webkit-text-stroke: 0 !important; letter-spacing: .03em; text-shadow: 0 2px 0 #142463, 0 3px 6px rgba(0,0,0,.35) !important; font-size: clamp(17px, 5.2vw, 22px) !important; }

/* ===== сезонный пропуск v2: шапка с уровнем, премиум с выгодами, дорожка с узлами ===== */
.ps-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.ps-lv { flex: none; display: grid; place-items: center; width: 68px; height: 74px; clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); background: linear-gradient(180deg, #ffe68a, #f0a812); color: #2b1a00; line-height: .9; }
.ps-lv small { font: 900 11px "Rubik", sans-serif; letter-spacing: .08em; } .ps-lv b { font: 900 30px "Rubik", sans-serif; }
.ps-info { display: grid; gap: 4px; flex: 1; min-width: 0; }
.ps-info > b { font: 900 18px "Rubik", sans-serif; } .ps-info > small { font: 700 12px var(--font-body); color: rgba(255,255,255,.6); }
.ps-bar { position: relative; height: 22px; margin-top: 4px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; }
.ps-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #ffcf3a, #ff9d00); }
.ps-bar em { position: relative; display: block; text-align: center; font: 800 12px/22px "Rubik", sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.ps-buy { display: grid; gap: 8px; margin-bottom: 14px; padding: 14px; border-radius: 20px; background: radial-gradient(120% 90% at 100% 0%, rgba(255,207,58,.22), transparent 60%), rgba(255,255,255,.05); box-shadow: inset 0 0 0 1.5px rgba(255,207,58,.45); }
.ps-buy > b { display: flex; align-items: center; gap: 6px; font: 900 17px "Rubik", sans-serif; color: #ffd34d; } .ps-buy > b .ui-ic { width: 18px; height: 18px; }
.ps-buy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ps-buy li { position: relative; padding-left: 20px; font: 700 13px var(--font-body); color: rgba(255,255,255,.85); }
.ps-buy li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2.5px solid #ffcf3a; border-bottom: 2.5px solid #ffcf3a; transform: rotate(-45deg); }
.ps-buy .btn { width: 100%; margin-top: 4px; }
.ps-on { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; padding: 10px; border-radius: 14px; background: rgba(255,207,58,.12); box-shadow: inset 0 0 0 1.5px rgba(255,207,58,.5); font: 900 14px "Rubik", sans-serif; color: #ffd34d; } .ps-on .ui-ic { width: 16px; height: 16px; }
/* сезонный пропуск — горизонтальная дорожка: сверху премиум, посередине уровни, снизу бесплатная линия */
.ps-cols { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font: 900 11px "Rubik", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); } .ps-cols .pr { color: #ffcf3a; }
.ps-track { position: relative; display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 -4px; padding: 6px 4px 12px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.ps-track::-webkit-scrollbar { display: none; }
.ps-row { position: relative; flex: 0 0 116px; display: grid; grid-template-rows: auto 44px auto; gap: 8px; padding: 0 5px; scroll-snap-align: center; }
/* линия прогресса проходит через все уровни; пройденные участки — золотые */
.ps-row::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 3px); height: 6px; background: rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ps-row.reach::before { background: linear-gradient(180deg, #ffe68a, #f0a812); }
.ps-row.cur::before { background: linear-gradient(90deg, #f0a812 50%, rgba(0,0,0,.45) 50%); }
.ps-row:first-child::before { left: 50%; } .ps-row:last-child::before { right: 50%; }
.ps-node { position: relative; z-index: 1; align-self: center; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; background: #262b36; box-shadow: 0 0 0 3px #0e1118, 0 3px 0 3px #0e1118; font: 900 15px "Rubik", sans-serif; color: rgba(255,255,255,.65); }
.ps-row.reach .ps-node { background: linear-gradient(180deg, #ffe68a, #f0a812); color: #2b1a00; }
.ps-row.cur .ps-node { transform: scale(1.12); box-shadow: 0 0 0 3px #0e1118, 0 0 0 6px rgba(255,207,58,.45); }
.ps-cell { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; height: 150px; padding: 12px 6px 10px; border: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(120,170,255,.22), rgba(60,90,200,.12)); box-shadow: inset 0 0 0 1.5px rgba(150,190,255,.35), 0 4px 0 rgba(0,0,0,.35); color: #fff; }
.ps-cell.prem { background: linear-gradient(180deg, rgba(255,210,90,.32), rgba(240,140,20,.14)); box-shadow: inset 0 0 0 1.5px rgba(255,207,58,.55), 0 4px 0 rgba(0,0,0,.35); }
.ps-cell b { font: 900 12.5px "Rubik", sans-serif; text-align: center; line-height: 1.15; }
.ps-art { display: grid; place-items: center; height: 86px; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.ps-art .fpk { --pw: 56px; --ph: 78px; --d: 5px; } .ps-art .fpk em, .ps-art .fpk .fpk-sh, .ps-art .fpk::after { display: none; } .ps-art .fpk b { font-size: 15px; }
.ps-art .rs-coins .coin { width: 40px !important; height: 40px !important; }
.ps-art .rs-heart .ui-ic { width: 56px; height: 56px; color: #ff4f66; }
.ps-art .rs-card { transform: scale(1.05); }
.ps-skin { display: block; width: 54px; height: 78px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px #e8c157; } .ps-skin img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; }
.ps-cell .ps-ok { position: absolute; top: 6px; right: 8px; font: 900 15px "Rubik", sans-serif; font-style: normal; color: #3ee66b; }
.ps-cell .ps-lk { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.45); } .ps-cell .ps-lk .ui-ic { width: 12px; height: 12px; }
.ps-cell .ps-take { font: 900 11px "Rubik", sans-serif; font-style: normal; padding: 3px 10px; border-radius: 99px; background: #3ee66b; color: #062a12; }
.ps-cell.got { opacity: .62; } .ps-cell.got .ps-art { filter: grayscale(.4); }
.ps-cell.lock .ps-art { opacity: .55; filter: saturate(.4); }
.ps-cell.buy .ps-art { opacity: .8; }
.ps-cell.ready { animation: psReady 1.6s ease-in-out infinite; box-shadow: inset 0 0 0 2px #3ee66b; }
@keyframes psReady { 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ps-cell.ready { animation: none; } }

/* ===== задания v2 ===== */
.qs-h { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 2px 8px; } .qs-h b { font: 900 17px "Rubik", sans-serif; } .qs-h small { font: 700 11.5px var(--font-body); color: rgba(255,255,255,.5); }
.qs { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 10px 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.qs-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(62,230,193,.14); color: #3ee6c1; } .qs-ico .ui-ic { width: 22px; height: 22px; }
.qs.w .qs-ico { background: rgba(122,170,255,.16); color: #8fb4ff; } .qs.s .qs-ico { background: rgba(255,207,58,.16); color: #ffcf3a; }
.qs-b { display: grid; gap: 6px; min-width: 0; } .qs-b b { font: 800 13.5px "Rubik", sans-serif; line-height: 1.2; }
.qs-bar { position: relative; height: 16px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; }
.qs-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #3ee6c1, #7af0c8); } .qs.w .qs-bar i { background: linear-gradient(90deg, #5b8cff, #8fb4ff); } .qs.s .qs-bar i { background: linear-gradient(90deg, #ffcf3a, #ff9d00); }
.qs-bar em { position: relative; display: block; text-align: center; font: 800 10.5px/16px "Rubik", sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.qs-xp, .qs-take { display: grid; justify-items: center; min-width: 54px; line-height: 1.05; } .qs-xp b { font: 900 15px "Rubik", sans-serif; color: #ffcf3a; } .qs-xp small { font: 700 10px var(--font-body); color: rgba(255,255,255,.5); }
.qs-take { padding: 6px 8px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #6ff59a, #22b04f); color: #062a12; box-shadow: 0 3px 0 #13702f; } .qs-take b { font: 900 15px "Rubik", sans-serif; } .qs-take small { font: 800 10px "Rubik", sans-serif; }
.qs.done { box-shadow: inset 0 0 0 1.5px #3ee66b; } .qs.got { opacity: .5; }
.qs-ok { font: 900 20px "Rubik", sans-serif; font-style: normal; color: #3ee66b; min-width: 54px; text-align: center; }
/* вкладки «Наград» прокручиваются вбок, ничего не обрезается */
.rw-tabs { display: flex !important; grid-template-columns: none !important; gap: 4px !important; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rw-tabs::-webkit-scrollbar { display: none; }
.rw-tabs > button { flex: none !important; scroll-snap-align: start; padding-left: 12px !important; padding-right: 12px !important; white-space: nowrap; }
/* «Игрок дня»: картинка не вылезает за скруглённую кнопку */
.h2-sb { padding-top: 8px !important; }
.h2-sbi.dly img { width: 42px !important; height: 42px !important; border-radius: 11px !important; }
.ad-bars.wide { grid-template-columns: repeat(14, 1fr); gap: 3px; } .ad-bars.wide em { font-size: 9px; }
/* таблица лидеров: вкладки прокручиваются, выбор игры — чипсами */
.bd-tabs { display: flex !important; overflow-x: auto; scrollbar-width: none; gap: 4px !important; } .bd-tabs::-webkit-scrollbar { display: none; }
.bd-tabs > button { flex: none !important; padding: 8px 12px !important; white-space: nowrap; }
.bd-games { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px 0 2px; padding-bottom: 2px; } .bd-games::-webkit-scrollbar { display: none; }
.bd-games button { flex: none; padding: 7px 12px; border: 0; border-radius: 99px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); font: 800 12.5px "Rubik", sans-serif; white-space: nowrap; }
.bd-games button.on { background: #ffcf3a; color: #1a1406; }
/* плашка ивента выходных на главной */
.h2-ev { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px auto 0; padding: 5px 12px; border-radius: 99px; background: linear-gradient(90deg, #ff5f6d, #ffb347); color: #fff; font: 900 12px "Rubik", sans-serif; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
/* ===== обучение новичка ===== */
.co { position: fixed; inset: 0; z-index: 9000; }
.co-hole { position: absolute; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(5,7,12,.78), 0 0 0 3px #ffcf3a; transition: all .3s cubic-bezier(.2,.9,.3,1); pointer-events: none; }
.co-tip { position: absolute; left: 16px; right: 16px; display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: #1a2029; box-shadow: inset 0 0 0 1.5px rgba(255,207,58,.5), 0 14px 30px rgba(0,0,0,.5); color: #fff; animation: coIn .3s cubic-bezier(.2,.9,.3,1.2); }
.co-tip small { font: 800 11px "Rubik", sans-serif; letter-spacing: .06em; color: #ffcf3a; text-transform: uppercase; }
.co-tip b { font: 900 19px "Rubik", sans-serif; } .co-tip p { margin: 0 0 4px; font: 600 14px/1.4 var(--font-body); color: rgba(255,255,255,.82); }
@keyframes coIn { from { opacity: 0; transform: translateY(10px); } }
/* клуб */
.cl-hero { display: grid; justify-items: center; gap: 6px; margin: 6px 0 14px; text-align: center; } .cl-hero h3 { margin: 0; font: 900 22px "Rubik", sans-serif; } .cl-hero p { margin: 0; font: 600 13.5px/1.45 var(--font-body); color: rgba(255,255,255,.7); }
.cl-emb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255,207,58,.15); color: #ffcf3a; } .cl-emb .ui-ic { width: 34px; height: 34px; }
.cl-card { display: grid; gap: 10px; margin-bottom: 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.cl-card > b { font: 900 16px "Rubik", sans-serif; } .cl-card small { font: 600 12px var(--font-body); color: rgba(255,255,255,.55); }
.cl-card input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: 12px; background: rgba(0,0,0,.35); color: #fff; font: 700 16px var(--font-body); }
.cl-emos { display: flex; flex-wrap: wrap; gap: 6px; } .cl-emos button { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255,255,255,.07); font-size: 20px; } .cl-emos button.on { box-shadow: inset 0 0 0 2px #ffcf3a; background: rgba(255,207,58,.15); }
.cl-join { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .cl-join input { text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.cl-top { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; } .cl-big { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255,207,58,.15); font-size: 34px; }
.cl-top h3 { margin: 0; font: 900 22px "Rubik", sans-serif; } .cl-top small { font: 700 12.5px var(--font-body); color: rgba(255,255,255,.6); } .cl-top small b { color: #ffcf3a; letter-spacing: .1em; }
.cl-goal { display: grid; gap: 8px; margin-bottom: 12px; padding: 14px; border-radius: 18px; background: radial-gradient(100% 90% at 100% 0%, rgba(255,207,58,.16), transparent 60%), rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,207,58,.3); }
.cl-gh { display: flex; justify-content: space-between; align-items: baseline; } .cl-gh b { font: 900 16px "Rubik", sans-serif; } .cl-gh small { font: 800 13px "Rubik", sans-serif; color: #ffcf3a; }
.cl-bar { height: 14px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; } .cl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffcf3a, #ff9d00); }
.cl-note, .cl-ok { margin: 0; font: 600 12.5px var(--font-body); color: rgba(255,255,255,.65); } .cl-ok { color: #3ee66b; }
.cl-inv { width: 100%; margin-bottom: 14px; } .cl-leave { width: 100%; margin-top: 14px; }
.cl-h { margin: 0 0 8px; font: 900 15px "Rubik", sans-serif; }
.cl-list { display: grid; gap: 6px; }
.cl-m { display: grid; grid-template-columns: 22px 28px 1fr auto auto; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.cl-m.me { box-shadow: inset 0 0 0 1.5px #ffcf3a; } .cl-m > b { font: 900 13px "Rubik", sans-serif; color: rgba(255,255,255,.5); } .cl-m > span { font-size: 20px; }
.cl-m em { font: 800 14px "Rubik", sans-serif; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-m small { font: 700 12px var(--font-body); color: rgba(255,255,255,.55); }
.cl-m strong { display: grid; justify-items: end; font: 900 15px "Rubik", sans-serif; color: #ffcf3a; line-height: 1; } .cl-m strong i { font: 700 9.5px var(--font-body); font-style: normal; color: rgba(255,255,255,.5); }
/* магазин за звёзды */
.ss-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ss-c { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border: 0; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); color: #fff; }
.ss-art { display: grid; place-items: center; height: 64px; } .ss-art .fpk { --pw: 40px; --ph: 56px; --d: 4px; } .ss-art .rs-coins .coin { width: 30px !important; height: 30px !important; }
.ss-c b { font: 900 13.5px "Rubik", sans-serif; text-align: center; } .ss-c small { font: 650 12px/1.4 var(--font-body); color: rgba(255,255,255,.78); text-align: center; }
.ss-c em { margin-top: 2px; padding: 4px 12px; border-radius: 99px; background: #ffcf3a; color: #1a1406; font: 900 13px "Rubik", sans-serif; font-style: normal; }
.ss-c.sk img { width: 100%; aspect-ratio: 390 / 520; object-fit: cover; object-position: 50% 100%; border-radius: 10px; }
.ss-c.own em { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.ss-h { margin: 14px 0 8px; font: 900 15px "Rubik", sans-serif; }
/* чип «Клуб» в верхней плашке и компактные боковые кнопки */
.mh-club { gap: 5px !important; } .mh-club .ui-ic { width: 18px; height: 18px; color: #7af0c8; } .mh-club b { font: 800 13px "Rubik", sans-serif !important; -webkit-text-stroke: 0 !important; }
.h2-side { gap: 10px !important; }
/* страница не ездит вбок: ничего не вылезает за ширину экрана */
html, body { overflow-x: clip; overscroll-behavior: none; }
#app { overflow-x: clip; }

/* ---------- перетаскивание игроков и ползунка тактики ---------- */
.fu[data-z], .sq-slot { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dg-src { z-index: 50 !important; pointer-events: none; scale: 1.12; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); transition: scale .15s, translate 0s !important; }
.dg-over { outline: 3px dashed #ffcf3a; outline-offset: 3px; border-radius: 12px; }
body.dg-on { overscroll-behavior: none; }
.xm-bar { touch-action: none; cursor: grab; }
.dg-par { z-index: 50 !important; }

/* ---------- боковая колонка иконок: таблица лидеров и награды ---------- */
.srw { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: start; }
.sr-main { min-width: 0; }
.sr-rail { position: sticky; top: calc(var(--tg-safe-top, 0px) + 74px); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.sr-b { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.6); font: 700 9.5px/1.1 "Rubik", sans-serif; text-align: center; -webkit-tap-highlight-color: transparent; }
.sr-i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.35); transition: transform .18s cubic-bezier(.3,1.5,.5,1), background .2s, box-shadow .2s; }
.sr-i svg { width: 26px; height: 26px; }
.sr-b small { font: inherit; max-width: 58px; overflow-wrap: anywhere; }
.sr-b:active .sr-i { transform: scale(.9); }
.sr-b.on { color: #ffcf3a; }
.sr-b.on .sr-i { background: linear-gradient(180deg, #ffd84d, #f0a91c); color: #2a1d00; --ic-a: #fff3c2; --ic-bg: #f0a91c; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 0 #8a5a00, 0 0 0 2px rgba(255,207,58,.35); transform: translateX(3px); }
.sr-b.go .sr-i { color: #7af0c8; }
.sr-b.lk { opacity: .55; }
.sr-n { position: absolute; top: -4px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b5c; color: #fff; font: 800 10px/18px "Rubik", sans-serif; font-style: normal; box-shadow: 0 0 0 2px #0d0a26; }
.sr-main > .bd-head:first-child, .sr-main > .bd-games:first-child { margin-top: 0; }
.srw .bd-games { flex-wrap: wrap; }

/* ---------- онлайн-лобби (драфт, козыри) ---------- */
.on-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 4px; text-align: center; }
.on-wrap h3 { margin: 4px 0 0; font: 900 22px "Rubik", sans-serif; color: #fff; }
.on-wrap p { margin: 0 0 6px; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.4; }
.on-ico { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 4px; border-radius: 24px; background: linear-gradient(180deg, #ffd84d, #f0a91c); color: #2a1d00; --ic-a: #fff3c2; box-shadow: 0 4px 0 #8a5a00; }
.on-ico svg { width: 40px; height: 40px; }
.on-wrap .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.on-wrap .btn svg { width: 20px; height: 20px; }
.on-join { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.on-join input { min-width: 0; padding: 12px 14px; border-radius: 14px; border: 0; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); color: #fff; font: 900 20px "Rubik", sans-serif; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.on-wait .du-radar { margin: 6px auto; }
/* лобби онлайна: шапка с числом игроков в сети, карточки «Случайный соперник» и «С другом» */
.on-lobby { gap: 12px; text-align: left; }
.on-head { display: grid; justify-items: center; gap: 4px; text-align: center; margin-bottom: 4px; }
.on-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.07); font: 700 13px var(--font-body); color: rgba(255,255,255,.75); }
.on-live i { width: 8px; height: 8px; border-radius: 50%; background: #3ee68a; box-shadow: 0 0 0 3px rgba(62,230,138,.2); animation: poPulse 1.6s ease-in-out infinite; }
.on-live b { color: #fff; }
.on-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: 18px; text-align: left; color: #fff;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); font: inherit; }
.on-card b { display: block; font: 900 17px "Rubik", sans-serif; }
.on-card small { display: block; margin-top: 2px; font: 600 13px/1.3 var(--font-body); color: rgba(255,255,255,.65); }
.on-card em { font: 900 26px/1 "Rubik", sans-serif; font-style: normal; opacity: .7; }
.on-ci { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); }
.on-ci svg { width: 24px; height: 24px; }
.on-card.gold { background: linear-gradient(180deg, #ffd84d, #f0a91c); color: #2a1d00; box-shadow: 0 8px 22px rgba(240,169,28,.28); }
.on-card.gold small { color: rgba(42,29,0,.7); } .on-card.gold .on-ci { background: rgba(42,29,0,.12); }
.on-card:active { transform: scale(.98); }
.on-friend .on-frow, .on-friend .on-join { grid-column: 1 / -1; }
.on-frow .btn { width: 100%; }
.on-clock { font: 800 15px var(--font-body); color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
/* соперник найден: короткая заставка перед стартом */
.on-found { min-height: 300px; justify-content: center; gap: 18px; }
.on-found small { font: 800 14px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.on-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.on-vs span { display: grid; justify-items: center; gap: 8px; animation: onIn .5s cubic-bezier(.2,1.4,.4,1) both; }
.on-vs span:last-child { animation-delay: .15s; }
.on-vs span i { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; font-size: 36px; font-style: normal; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.on-vs span b { font: 900 16px "Rubik", sans-serif; color: #fff; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.on-vs em { font: italic 900 30px "Rubik", sans-serif; color: var(--gold); font-style: italic; animation: onIn .5s .3s both; }
@keyframes onIn { from { opacity: 0; transform: scale(.6); } }
.xd-online { background: linear-gradient(180deg, #4fc3ff, #2a7fd6) !important; color: #fff !important; }
.tc-online { margin: 14px auto 0; display: flex; align-items: center; gap: 8px; }
.tc-online svg { width: 18px; height: 18px; }
.xm-ctl-t svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- клуб (как клан в Clash Royale) ---------- */
[data-act="myclub"].kb-dot { position: relative; }
[data-act="myclub"].kb-dot::after { content: ''; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 2px #0d0a26; }
.kb-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; margin: 4px 0 12px; padding: 14px; border-radius: 20px; background: radial-gradient(120% 100% at 0% 0%, rgba(255,207,58,.18), transparent 60%), rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,207,58,.35); }
.kb-emb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(180deg, #2c2650, #171331); font-size: 34px; box-shadow: inset 0 0 0 2px rgba(255,207,58,.5), 0 3px 0 rgba(0,0,0,.4); }
.kb-ht { min-width: 0; } .kb-ht h3 { margin: 0 0 2px; font: 900 21px "Rubik", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ht small { display: block; font: 700 12.5px var(--font-body); color: rgba(255,255,255,.65); } .kb-ht small b { color: #ffcf3a; } .kb-ht small b .ui-ic { width: 13px; height: 13px; vertical-align: -2px; } .kb-ht em { font-style: normal; color: #fff; letter-spacing: .12em; font-weight: 900; }
.kb-ht p { margin: 6px 0 0; font: 600 13px/1.4 var(--font-body); color: rgba(255,255,255,.82); } .kb-min { margin-top: 4px; color: #7af0c8 !important; }
.kb-gear { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; } .kb-gear .ui-ic, .kb-gear svg { width: 20px; height: 20px; }
.kb-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.kb-tabs button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 2px 7px; border: 0; border-radius: 14px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.65); font: 800 11.5px "Rubik", sans-serif; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.kb-tabs button svg, .kb-tabs button .ui-ic { width: 22px; height: 22px; }
.kb-tabs button.on { background: linear-gradient(180deg, #ffd84d, #f0a91c); color: #2a1d00; --ic-a: #fff3c2; --ic-bg: #f0a91c; box-shadow: 0 3px 0 #8a5a00; }
.kb-tabs i { position: absolute; top: -5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b5c; color: #fff; font: 800 10px/18px "Rubik", sans-serif; font-style: normal; box-shadow: 0 0 0 2px #0d0a26; }
.kb-feed { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 430px); min-height: 260px; overflow-y: auto; padding: 4px 2px 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.kb-sys { align-self: center; max-width: 90%; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.06); font: 700 11.5px var(--font-body); color: rgba(255,255,255,.6); text-align: center; }
.kb-msg { align-self: flex-start; max-width: 84%; padding: 8px 11px; border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,.09); }
.kb-msg.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: rgba(79,195,255,.22); }
.kb-msg p { margin: 0; font: 600 14px/1.35 var(--font-body); color: #fff; overflow-wrap: anywhere; }
.kb-who { display: block; margin-bottom: 3px; font: 800 12px "Rubik", sans-serif; color: #ffcf3a; } .kb-who small { font: 600 10.5px var(--font-body); color: rgba(255,255,255,.45); margin-left: 4px; }
.kb-req, .kb-bt { max-width: 92%; width: 92%; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(122,240,200,.35); }
.kb-rq { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; } .kb-rqb { display: grid; gap: 6px; } .kb-rqb > b { font: 900 13.5px "Rubik", sans-serif; } .kb-rqb small { font: 600 11.5px var(--font-body); color: rgba(255,255,255,.6); }
.kb-bar { position: relative; display: block; height: 16px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; } .kb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7af0c8, #4fc3ff); border-radius: 99px; }
.kb-bar em { position: absolute; inset: 0; display: grid; place-items: center; font: 900 11px "Rubik", sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6); } .kb-bar.big { height: 18px; margin: 10px 0 6px; } .kb-bar.big i { background: linear-gradient(90deg, #ffcf3a, #ff9d00); }
.kb-don { padding: 8px 10px !important; font-size: 13px !important; display: flex; align-items: center; justify-content: center; gap: 4px; } .kb-don .coin { width: 14px; height: 14px; }
.kb-btb { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; } .kb-btb b { display: block; font: 900 14px "Rubik", sans-serif; } .kb-btb small { font: 600 11.5px var(--font-body); color: rgba(255,255,255,.6); }
.kb-swd { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,95,109,.2); color: #ff8a95; } .kb-swd svg { width: 24px; height: 24px; } .kb-btb .btn { padding: 9px 14px; }
.kb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .kb-a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px !important; font-size: 13px !important; } .kb-a svg { width: 18px; height: 18px; flex: none; } .kb-a[disabled] { opacity: .5; }
.kb-say { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; } .kb-say input { min-width: 0; padding: 12px 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); color: #fff; font: 600 16px var(--font-body); }
.kb-say .btn { width: 52px; padding: 0 !important; display: grid; place-items: center; } .kb-say svg { width: 22px; height: 22px; }
.kb-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .kb-sum span { display: grid; justify-items: center; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.06); } .kb-sum b { font: 900 20px "Rubik", sans-serif; color: #ffcf3a; } .kb-sum small { font: 700 10.5px var(--font-body); color: rgba(255,255,255,.55); text-align: center; }
.kb-list { display: grid; gap: 6px; }
.kb-m { display: grid; grid-template-columns: 22px 30px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 9px 11px; border: 0; border-radius: 14px; background: rgba(255,255,255,.05); color: #fff; text-align: left; }
.kb-m.me { box-shadow: inset 0 0 0 1.5px #ffcf3a; } .kb-n { font: 900 13px "Rubik", sans-serif; color: rgba(255,255,255,.45); } .kb-me { font-size: 22px; }
.kb-mi { display: grid; min-width: 0; } .kb-mi em { font: 800 14.5px "Rubik", sans-serif; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-mi small { font: 800 11px var(--font-body); } .kb-mi .r0 { color: rgba(255,255,255,.55); } .kb-mi .r1 { color: #7af0c8; } .kb-mi .r2 { color: #4fc3ff; } .kb-mi .r3 { color: #ffcf3a; }
.kb-seen { font-weight: 600 !important; color: rgba(255,255,255,.45); } .kb-on { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #3ee66b; vertical-align: 1px; }
.kb-ms { display: grid; justify-items: end; } .kb-ms b { font: 900 14px "Rubik", sans-serif; display: flex; align-items: center; gap: 3px; } .kb-ms b svg { width: 14px; height: 14px; color: #ffcf3a; } .kb-ms small { font: 600 10.5px var(--font-body); color: rgba(255,255,255,.5); }
.kb-wide { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; } .kb-wide svg { width: 18px; height: 18px; }
.kb-note { margin: 10px 2px 0; font: 600 12.5px/1.4 var(--font-body); color: rgba(255,255,255,.55); }
.kb-chest, .kb-lg, .kb-prize { padding: 14px; border-radius: 18px; background: radial-gradient(100% 90% at 100% 0%, rgba(255,207,58,.16), transparent 60%), rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,207,58,.3); margin-bottom: 10px; }
.kb-ch-top, .kb-lg { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; } .kb-ch-top b, .kb-lg b { display: block; font: 900 16px "Rubik", sans-serif; } .kb-ch-top small, .kb-lg small { font: 700 12px var(--font-body); color: rgba(255,255,255,.6); }
.kb-chi { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(180deg, #ffd84d, #f0a91c); color: #2a1d00; --ic-a: #fff3c2; box-shadow: 0 3px 0 #8a5a00; } .kb-chi svg { width: 30px; height: 30px; }
.kb-tiers { display: grid; gap: 6px; }
.kb-tier { display: grid; grid-template-columns: 26px 46px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.04); opacity: .6; }
.kb-tier.open { opacity: 1; background: rgba(255,255,255,.07); } .kb-tier.got { opacity: .7; }
.kb-tn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.1); font: 900 12px "Rubik", sans-serif; } .kb-tier.open .kb-tn { background: #ffcf3a; color: #2a1d00; }
.kb-ta { display: grid; place-items: center; height: 46px; overflow: hidden; } .kb-ta > * { transform: scale(.62); }
.kb-tt { display: grid; } .kb-tt b { font: 800 13.5px "Rubik", sans-serif; } .kb-tt small { font: 600 11px var(--font-body); color: rgba(255,255,255,.55); }
.kb-tier .btn { padding: 8px 12px; font-size: 13px; } .kb-ok { font-style: normal; font-weight: 900; color: #3ee66b; } .kb-lk { color: rgba(255,255,255,.5); } .kb-lk svg { width: 16px; height: 16px; }
.kb-lgp { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(180deg, #4fc3ff, #2a7fd6); color: #fff; box-shadow: 0 3px 0 #164b86; } .kb-lgp b { font: 900 26px "Rubik", sans-serif; color: #fff !important; line-height: 1; } .kb-lgp small { color: rgba(255,255,255,.85) !important; font-size: 10px !important; }
.kb-prize { display: grid; gap: 6px; box-shadow: inset 0 0 0 2px #ffcf3a; } .kb-prize b { font: 900 15px "Rubik", sans-serif; } .kb-prize small { font: 700 12.5px var(--font-body); color: rgba(255,255,255,.7); }
.kb-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 52vh; overflow-y: auto; margin-top: 8px; justify-items: center; } .kb-pick button { padding: 0; border: 0; background: none; }
.kb-set { display: grid; gap: 10px; text-align: left; } .kb-set label { display: grid; gap: 5px; font: 800 12.5px var(--font-body); color: rgba(255,255,255,.7); }
.kb-set textarea, .kb-set input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 12px; background: rgba(0,0,0,.35); color: #fff; font: 600 15px var(--font-body); resize: none; }

/* Драфт: игроки — карточки коллекции (.cc) внутри кнопки .fu; щит и фон .fu не нужны */
.fu.cardmode { clip-path: none; background: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); color: inherit; }
.fu.cardmode::after { display: none; }
.fu.cardmode .cc { --w: var(--cw) !important; width: var(--cw); }
.fu.cardmode.off .cc-r small { color: #ff5470; }
.fu.cardmode .fu-c { right: 6%; bottom: 30%; }
.fu.empty { clip-path: none; border-radius: calc(var(--cw) * .09); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); }
.xd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ad-days .ad-row { grid-template-columns: 1fr repeat(3, 1fr); }

/* подробности награды пропуска */
.ps-info-m { display: grid; justify-items: center; gap: 6px; text-align: center; }
.ps-info-m .ps-art.big { height: 140px; } .ps-info-m .ps-art.big .fpk { --pw: 90px; --ph: 126px; } .ps-info-m .ps-art.big .rs-coins .coin { width: 60px !important; height: 60px !important; }
.ps-info-m .ps-art.big .ps-skin { width: 90px; height: 130px; }
.ps-info-m h2 { margin: 4px 0 0; } .ps-info-m p { margin: 0; } .ps-info-m p { font: 700 14px "Rubik", sans-serif; color: rgba(255,255,255,.7); } .ps-info-m .ps-st { color: #ffcf3a; font-weight: 900; }
.ps-cell.ready .ps-take { padding: 4px 12px; font-size: 12px; box-shadow: 0 0 12px rgba(62,230,107,.6); }
.ps-cell .ps-ok { top: 6px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #3ee66b; color: #062a12; font-size: 14px; }