/* КОЗЫРЬ — тёмный изумруд, золото, карты. */

:root {
  --bg: #06110d;
  --bg-2: #081a13;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-2: rgba(255, 255, 255, 0.075);
  --line: rgba(232, 216, 178, 0.12);
  --line-strong: rgba(232, 216, 178, 0.24);
  --ink: #f4efe3;
  --ink-2: #d9d3c4;
  --muted: #93a79d;
  --muted-2: #6c8178;
  --gold: #efc87f;
  --gold-2: #c99a4a;
  --gold-3: #f7e3b4;
  --gold-soft: rgba(239, 200, 127, 0.14);
  --green: #47d99a;
  --green-soft: rgba(71, 217, 154, 0.14);
  --red: #e46a5c;
  --red-soft: rgba(228, 106, 92, 0.14);
  --violet: #b18cff;
  --cream: #f7efdc;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  --tabbar: 76px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  color-scheme: dark;
}

body {
  overflow-x: hidden;
  line-height: 1.4;
  font-size: 15px;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; }
.orb-a {
  width: 420px; height: 420px; left: -140px; top: -120px;
  background: radial-gradient(circle, rgba(31, 143, 100, 0.55), transparent 68%);
  animation: orbFloat 18s ease-in-out infinite alternate;
}
.orb-b {
  width: 360px; height: 360px; right: -150px; top: 18%;
  background: radial-gradient(circle, rgba(201, 154, 74, 0.3), transparent 68%);
  animation: orbFloat 22s ease-in-out infinite alternate-reverse;
}
.orb-c {
  width: 500px; height: 500px; left: 50%; bottom: -260px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(20, 94, 67, 0.45), transparent 70%);
}
.grain {
  position: absolute; inset: 0; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(30px, 40px, 0) scale(1.12); }
}

/* ---------- каркас ---------- */

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px calc(var(--tabbar) + var(--safe-bottom) + 28px);
  min-height: 100vh;
}

.hud {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-top)) 0 12px;
  background: linear-gradient(180deg, var(--bg) 62%, rgba(6, 17, 13, 0));
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(150deg, #1d6b4c, #0c3a29);
  border: 1px solid rgba(239, 200, 127, 0.32);
  display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--gold);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.brand-text b { font-size: 15px; letter-spacing: 0.14em; }
.brand-text small { font-size: 10px; color: var(--muted-2); letter-spacing: 0.04em; margin-top: 3px; }

.hud-actions { display: flex; align-items: center; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pill svg { width: 16px; height: 16px; }
.pill b { color: var(--ink); font-size: 14px; }

.avatar {
  position: relative;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(150deg, #2a7a58, #10402e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  user-select: none;
}
.avatar span { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.avatar .avatar-emoji {
  position: relative;
  z-index: 1;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}
.avatar.is-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.22), transparent 52%);
  pointer-events: none;
}
.avatar .avatar-glyph,
.cos-swatch .avatar-glyph {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}
.avatar.tiny .avatar-emoji,
.avatar.xs .avatar-emoji { font-size: 16px; }
.avatar.sm .avatar-emoji { font-size: 18px; }
.avatar.md .avatar-emoji { font-size: 26px; }
.avatar.lg .avatar-emoji { font-size: 36px; }
.avatar.xl .avatar-emoji { font-size: 44px; }
.winner-chip .avatar-emoji,
.reel-item .avatar-emoji { font-size: 14px; }
.winner-row .avatar-emoji,
.rank-row .avatar-emoji,
.top-row .avatar-emoji,
.player-line .avatar-emoji { font-size: 18px; }
.podium-item .avatar-emoji { font-size: 28px; }
.avatar.tiny { width: 34px; height: 34px; font-size: 13px; }
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.avatar.md { width: 52px; height: 52px; font-size: 18px; }
.avatar.xs { width: 28px; height: 28px; font-size: 11px; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }
.avatar.xl { width: 84px; height: 84px; font-size: 30px; }

.frame-classic { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.35); }
.frame-bronze { box-shadow: 0 0 0 2px #c98b5a, 0 0 16px rgba(201, 139, 90, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.frame-silver { box-shadow: 0 0 0 2px #cbd8dc, 0 0 16px rgba(203, 216, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.frame-gold { box-shadow: 0 0 0 2px #f0c878, 0 0 20px rgba(240, 200, 120, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.frame-neon { box-shadow: 0 0 0 2px #6fe6ff, 0 0 22px rgba(111, 230, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.frame-crown {
  box-shadow: 0 0 0 2px #f3d98b, 0 0 26px rgba(243, 217, 139, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: crownGlow 2.6s ease-in-out infinite;
}
@keyframes crownGlow {
  0%, 100% { box-shadow: 0 0 0 2px #f3d98b, 0 0 20px rgba(243, 217, 139, 0.45); }
  50% { box-shadow: 0 0 0 2px #fff0c2, 0 0 32px rgba(243, 217, 139, 0.8); }
}

/* ---------- экраны ---------- */

#screens { position: relative; }
.screen { display: none; }
.screen.is-active { display: block; animation: screenIn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1); }
.screen-game.is-active { display: block; animation: none; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.page-head { padding: 6px 0 16px; }
.page-head h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.02em; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 42ch; }

.challenge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 2px;
  padding: 13px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.13), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(239, 200, 127, 0.3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.challenge-card.is-win {
  border-color: rgba(239, 200, 127, 0.52);
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.2), rgba(255, 255, 255, 0.025));
}
.challenge-card.is-loss { border-color: rgba(228, 106, 92, 0.28); }
.challenge-card.is-draw { border-color: rgba(125, 232, 255, 0.24); }
.challenge-medal {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 21px;
  background: radial-gradient(circle at 35% 25%, rgba(239, 200, 127, 0.32), rgba(7, 20, 15, 0.5));
  border: 1px solid rgba(239, 200, 127, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.challenge-main { flex: 1; min-width: 0; }
.challenge-kicker {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.challenge-main b {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.2;
}
.challenge-main #challengeMeta {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted-2);
  line-height: 1.35;
}
.challenge-sub {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  color: var(--muted-2);
  line-height: 1.35;
}
.challenge-streak {
  display: none;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.35;
}
.challenge-streak.is-visible { display: block; }
.challenge-table-link {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
}
.challenge-table-link[hidden] { display: none; }
.challenge-result-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 11px;
  margin-top: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.challenge-result-row b { font-size: 12.5px; }
.challenge-result-row span { font-size: 10px; color: var(--muted-2); text-align: right; }
.challenge-result-row.is-me { border-color: rgba(239, 200, 127, 0.34); background: rgba(239, 200, 127, 0.08); }
.challenge-result-list { margin: 8px 0 4px; }
.challenge-result-hero {
  position: relative;
  margin: 2px 0 10px;
  padding: 15px 14px 13px;
  border-radius: 18px;
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(239, 200, 127, 0.2), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(239, 200, 127, 0.34);
  overflow: hidden;
}
.challenge-result-hero.is-loss {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(228, 106, 92, 0.16), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border-color: rgba(228, 106, 92, 0.28);
}
.challenge-result-hero.is-draw {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(125, 232, 255, 0.14), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border-color: rgba(125, 232, 255, 0.24);
}
.challenge-result-medal {
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 30px;
  background: radial-gradient(circle at 35% 25%, rgba(239, 200, 127, 0.35), rgba(7, 20, 15, 0.55));
  border: 1px solid rgba(239, 200, 127, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), inset 0 0 0 4px rgba(255, 255, 255, 0.035);
}
.challenge-result-kicker {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.challenge-result-hero h2 {
  margin: 4px 0 3px !important;
  padding-right: 0 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em;
  text-align: center;
}
.challenge-result-hero p {
  margin: 0;
  font-size: 11px;
  color: var(--muted-2);
}
.challenge-result-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0;
}
.challenge-result-metrics > div {
  padding: 9px 4px;
  border-radius: 11px;
  text-align: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
}
.challenge-result-metrics b {
  display: block;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.challenge-result-metrics span {
  display: block;
  margin-top: 2px;
  font-size: 8.5px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.challenge-percent-card {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(239, 200, 127, 0.06);
  border: 1px solid rgba(239, 200, 127, 0.2);
}
.challenge-percent-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--muted-2);
}
.challenge-percent-head b { font-size: 14px; color: var(--gold); }
.challenge-percent-bar {
  height: 5px;
  margin-top: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.challenge-percent-bar i {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-3));
}
.challenge-streak-note {
  margin-top: 5px;
  font-size: 9.5px;
  color: var(--muted-2);
  line-height: 1.35;
}
.challenge-best {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.11), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(239, 200, 127, 0.22);
}
.challenge-best-icon { font-size: 21px; flex: none; }
.challenge-best div { flex: 1; min-width: 0; }
.challenge-best span { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); }
.challenge-best b { display: block; margin-top: 2px; font-size: 13px; }
.challenge-best small { display: block; margin-top: 1px; font-size: 9.5px; color: var(--muted-2); }
.challenge-passed {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 2px;
  padding: 0 2px;
  font-size: 10px;
  color: var(--muted-2);
}
.challenge-passed b { color: var(--ink-2); }
.challenge-friend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  margin-top: 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
}
.challenge-friend-place {
  width: 18px; flex: none;
  color: var(--muted-2);
  font-size: 10px;
  text-align: center;
}
.challenge-friend-row b { flex: 1; min-width: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-friend-row span:last-child { font-size: 9.5px; color: var(--muted-2); }

.kot-card { margin: 14px 0 2px; cursor: pointer; position: relative; }
.challenge-main #kotSub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted-2);
  line-height: 1.35;
}
.kot-timer {
  position: absolute;
  top: 11px;
  right: 15px;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold);
  line-height: 1.2;
  white-space: nowrap;
}
.kot-prizes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin-top: 9px;
}
.kot-top-prize {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.15;
}
.kot-top-prize b {
  font-size: 15px;
  font-weight: 800;
  color: #f6dda6;
  letter-spacing: -0.01em;
}
.kot-top-prize span { font-size: 10px; color: var(--muted-2); }
.kot-more {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  color: var(--muted-2);
  line-height: 1.3;
}
.kot-prize-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.kot-prize-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
}
.kot-prize-line b { font-weight: 700; color: var(--muted-2); }
.kot-prize-line span { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-weight: 700; }
.kot-prize-line svg { width: 13px; height: 13px; }
.kot-prize-line.p1 { border-color: rgba(239, 200, 127, 0.4); background: linear-gradient(135deg, rgba(239, 200, 127, 0.12), rgba(239, 200, 127, 0.02)); }
.kot-prize-line.p1 b { color: #f0d69c; }
.kot-prize-line.p2 { border-color: rgba(207, 214, 221, 0.32); background: linear-gradient(135deg, rgba(207, 214, 221, 0.1), rgba(207, 214, 221, 0.02)); }
.kot-prize-line.p2 b { color: #e2e9ef; }
.kot-prize-line.p2 span { color: #e2e9ef; }
.kot-prize-line.p3 { border-color: rgba(201, 139, 90, 0.34); background: linear-gradient(135deg, rgba(201, 139, 90, 0.12), rgba(201, 139, 90, 0.02)); }
.kot-prize-line.p3 b { color: #e5bb99; }
.kot-prize-line.p3 span { color: #e5bb99; }
.kot-rule-list {
  margin: 9px 0 4px;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.kot-rule-list li { margin-bottom: 4px; }
.kot-rule-list b { color: var(--ink); }
.kot-table { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; }
.kot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}
.kot-row.is-me { border-color: rgba(239, 200, 127, 0.45); background: rgba(239, 200, 127, 0.09); }
.kot-row.is-win { border-color: rgba(239, 200, 127, 0.3); }
.kot-place { width: 20px; flex: none; text-align: center; font-weight: 700; color: var(--gold); }
.kot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kot-points { font-variant-numeric: tabular-nums; color: var(--muted-2); font-size: 11px; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin: 26px 0 12px;
}
.section-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.section-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted-2); }
.link-btn {
  display: inline-flex; align-items: center; gap: 1px;
  color: var(--gold); font-size: 12px; font-weight: 600;
  padding: 4px 0 4px 8px;
}
.link-btn svg { width: 15px; height: 15px; }

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

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px;
  border-radius: 15px;
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s;
  overflow: hidden;
  user-select: none;
}
.btn:active { transform: scale(0.975); }
.btn svg { width: 20px; height: 20px; }
.btn:disabled { opacity: 0.42; pointer-events: none; }

.btn-gold {
  color: #2a1c06;
  background: linear-gradient(135deg, #fbe8b8 0%, #f0c878 38%, #d8a758 72%, #c08f42 100%);
  box-shadow: 0 10px 26px rgba(201, 154, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.btn-gold::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; width: 40%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: btnShine 4.6s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 55% { left: -60%; }
  78%, 100% { left: 130%; }
}
.btn-soft {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  min-height: 42px;
}
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 12.5px; border-radius: 11px; }
.btn-lg { min-height: 56px; font-size: 17px; }

/* ---------- главная: герой ---------- */

.hero {
  position: relative;
  margin: 2px -4px 0;
  padding: 30px 18px 22px;
  border-radius: 26px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(43, 122, 88, 0.3), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(201, 154, 74, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  overflow: hidden;
}
.hero-halo {
  position: absolute; left: 50%; top: 28px; width: 280px; height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(239, 200, 127, 0.18), transparent 62%);
  filter: blur(8px);
  pointer-events: none;
}
.hero-kicker {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(239, 200, 127, 0.08);
  border: 1px solid rgba(239, 200, 127, 0.22);
}
.hero-kicker span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
.hero-title {
  position: relative;
  margin: 16px 0 8px;
  font-size: clamp(42px, 13vw, 62px);
  line-height: 0.95;
  letter-spacing: 0.14em;
  font-weight: 800;
  background: linear-gradient(180deg, #fff8e6 8%, #f3d69b 42%, #c99a4a 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(201, 154, 74, 0.25));
}
.hero-sub {
  position: relative;
  margin: 10px auto 0;
  max-width: 32ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.hero-cards {
  position: relative;
  display: flex; justify-content: center;
  height: 112px;
  margin: 6px 0 8px;
}
.hc {
  position: absolute;
  width: 62px; height: 88px;
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 7px 6px;
  font-family: Georgia, "Times New Roman", serif;
  background: linear-gradient(160deg, #fffdf6, #efe4cc);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  color: #191919;
}
.hc span { align-self: flex-start; font-weight: 700; font-size: 17px; line-height: 1; }
.hc i { font-style: normal; font-size: 27px; line-height: 1; }
.hc-1 { left: 50%; margin-left: -96px; top: 16px; transform: rotate(-16deg); color: #c0392b; animation: float1 5.2s ease-in-out infinite; }
.hc-2 { left: 50%; margin-left: -31px; top: 4px; z-index: 2; transform: rotate(-1deg); animation: float2 4.6s ease-in-out infinite; }
.hc-3 { left: 50%; margin-left: 34px; top: 16px; transform: rotate(14deg); color: #c0392b; animation: float3 5.8s ease-in-out infinite; }
@keyframes float1 { 0%, 100% { transform: rotate(-16deg) translateY(0); } 50% { transform: rotate(-18deg) translateY(-7px); } }
@keyframes float2 { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-10px); } }
@keyframes float3 { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(17deg) translateY(-6px); } }

.btn-hero {
  position: relative;
  width: 100%;
  max-width: 330px;
  min-height: 62px;
  justify-content: flex-start;
  padding: 0 18px;
  margin: 2px auto 0;
  text-align: left;
}
.btn-hero > svg { width: 26px; height: 26px; flex: none; }
.btn-hero > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; flex: 1; }
.btn-hero > span b { font-size: 19px; letter-spacing: 0.02em; }
.btn-hero > span small { font-size: 10.5px; font-weight: 600; opacity: 0.62; margin-top: 3px; }
.btn-hero::before {
  content: "→";
  font-size: 22px;
  opacity: 0.75;
  margin-left: auto;
}
.btn-friend {
  width: 100%;
  max-width: 330px;
  min-height: 44px;
  margin: 9px auto 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
}
.btn-friend svg { width: 16px; height: 16px; }
.btn-21 {
  min-height: 52px;
  flex-direction: column;
  gap: 0;
  line-height: 1.15;
}
.btn-21 > span { display: flex; flex-direction: column; align-items: center; }
.btn-21 b { font-size: 14px; letter-spacing: 0.02em; }
.btn-21 small { margin-top: 3px; font-size: 10px; font-weight: 500; color: var(--muted-2); }
.hero-foot { position: relative; margin-top: 13px; font-size: 11px; color: var(--muted-2); }

/* ---------- главная: карточка игрока ---------- */

.me-strip {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
}
.me-strip-main { flex: 1; min-width: 0; }
.me-strip-name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.me-strip-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-strip-sub { margin-top: 3px; font-size: 11px; color: var(--muted-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.me-strip-progress { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin-top: 8px; overflow: hidden; }
.me-strip-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); transition: width 0.6s ease; }
.me-strip-side { text-align: right; flex: none; }
.me-strip-side b { display: block; font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums; }
.me-strip-side span { font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; }

.rank-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px; font-weight: 700;
  background: rgba(239, 200, 127, 0.12);
  border: 1px solid rgba(239, 200, 127, 0.28);
  color: var(--gold);
  white-space: nowrap;
}

/* ---------- призы ---------- */

.prize-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prize-card {
  position: relative;
  padding: 15px 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  text-align: left;
  min-height: 142px;
  display: flex; flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s;
}
.prize-card:active { transform: scale(0.985); }
.prize-card::before {
  content: "";
  position: absolute; right: -30px; top: -40px; width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 200, 127, 0.2), transparent 70%);
}
.prize-card.weekly::before { background: radial-gradient(circle, rgba(177, 140, 255, 0.24), transparent 70%); }
.prize-card.weekly { border-color: rgba(177, 140, 255, 0.22); }
.prize-icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold);
  border: 1px solid rgba(239, 200, 127, 0.2);
  margin-bottom: 10px;
}
.prize-icon svg { width: 17px; height: 17px; }
.weekly .prize-icon { background: rgba(177, 140, 255, 0.12); color: #cdb4ff; border-color: rgba(177, 140, 255, 0.24); }
.prize-card small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.prize-card .prize-sum { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 1px; }
.prize-card .prize-note { font-size: 11px; color: var(--muted); margin-top: auto; }
.prize-card .prize-timer { margin-top: 6px; font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.prize-card .prize-timer svg { width: 12px; height: 12px; }

/* ---------- тикер победителей ---------- */

.winner-ticker {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.winner-ticker::-webkit-scrollbar { display: none; }
.winner-chip {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.winner-chip .avatar { width: 26px; height: 26px; font-size: 10px; }
.winner-chip b { color: var(--ink-2); font-weight: 600; }
.winner-chip em { font-style: normal; color: var(--gold); font-weight: 700; }

/* ---------- мини-топ ---------- */

.top-three { display: flex; flex-direction: column; gap: 6px; }
.top-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  width: 100%;
  text-align: left;
}
.top-row .place {
  width: 20px; text-align: center; font-weight: 800; font-size: 13px;
  color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.top-row.first { background: linear-gradient(135deg, rgba(239, 200, 127, 0.1), rgba(255, 255, 255, 0.02)); border-color: rgba(239, 200, 127, 0.22); }
.top-row.first .place { color: var(--gold); }
.top-row .avatar { width: 34px; height: 34px; font-size: 13px; }
.top-row-main { flex: 1; min-width: 0; }
.top-row-main b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-row-main span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted-2); margin-top: 1px; }
.top-row-rating { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.top-row-rating small { display: block; font-size: 9.5px; font-weight: 600; text-align: right; color: var(--green); }
.top-row-rating small.neg { color: var(--red); }
.top-row-rating > span { display: block; font-size: 9.5px; font-weight: 600; text-align: right; color: var(--green); }
.top-row-rating > span.neg { color: var(--red); }

/* ---------- игра: каркас ---------- */

body.in-game { overflow: hidden; }
body.in-game .hud, body.in-game .tabbar { display: none; }
body.in-game .app { max-width: none; padding: 0; }

.screen-game { display: none; }
.screen-game.is-active { display: block; }
@media (min-width: 1px) {
  .screen-game.is-active {
    position: fixed; inset: 0; z-index: 40;
    background:
      radial-gradient(120% 70% at 50% -10%, rgba(35, 110, 80, 0.3), transparent 60%),
      var(--bg);
  }
}

.game {
  display: flex; flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: calc(8px + var(--safe-top)) 12px calc(8px + var(--safe-bottom));
  overflow: hidden;
}
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: background 0.18s, transform 0.15s;
}
.icon-btn:active { transform: scale(0.94); background: var(--panel-2); }
.icon-btn svg { width: 19px; height: 19px; }
.game-title { text-align: center; line-height: 1.1; }
.game-title span { display: block; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); }
.game-title b { font-size: 14px; letter-spacing: 0.02em; }

.opp-panel { flex: none; padding: 8px 2px 0; }
.player-line { display: flex; align-items: center; gap: 9px; }
.player-line-text { flex: 1; min-width: 0; }
.player-line-text b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-line-text span { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 1px; }
.opp-count {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mini-back {
  width: 14px; height: 19px; border-radius: 2px;
  display: inline-block;
  background: linear-gradient(150deg, #1d6b4c, #0a3524);
  border: 1px solid rgba(239, 200, 127, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.opp-hand {
  display: flex; justify-content: center; align-items: flex-start;
  height: 42px; margin-top: 4px;
}
.opp-hand .mini-card {
  width: 27px; height: 39px;
  margin-left: -11px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 5px),
    linear-gradient(150deg, var(--back-a, #176247), var(--back-b, #083323));
  border: 1px solid rgba(239, 200, 127, 0.34);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  animation: dealIn 0.32s backwards;
}
.opp-hand .mini-card:first-child { margin-left: 0; }

/* стол */

.table-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  margin: 10px 0 8px;
  border-radius: 22px;
  border: 1px solid rgba(239, 200, 127, 0.14);
  display: flex;
  gap: 6px;
  padding: 14px 10px;
  overflow: hidden;
  transition: background 0.3s;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
}
.table-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.5;
  pointer-events: none;
}
.table-wrap::after {
  content: "♠";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 148px;
  line-height: 1;
  color: rgba(239, 200, 127, 0.035);
  pointer-events: none;
}
.table-wrap.is-taking .pair { transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.38s; }
.table-wrap.is-taking .pair .card { transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.38s; }
.table-wrap.is-taking .pair { transform: translateY(-26px) scale(0.85); opacity: 0; }
.game[data-felt="emerald"] .table-wrap { background: radial-gradient(120% 100% at 50% 40%, #155842, #0a2c20 72%); }
.game[data-felt="burgundy"] .table-wrap { background: radial-gradient(120% 100% at 50% 40%, #5a1f2b, #2a0c12 72%); border-color: rgba(228, 106, 92, 0.2); }
.game[data-felt="royal"] .table-wrap { background: radial-gradient(120% 100% at 50% 40%, #1d3566, #0a1530 72%); border-color: rgba(120, 160, 255, 0.2); }
.game[data-felt="obsidian"] .table-wrap { background: radial-gradient(120% 100% at 50% 40%, #2a2430, #0b090d 72%); border-color: rgba(243, 217, 139, 0.24); }

.table-side {
  position: relative; z-index: 2;
  width: 62px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 4px;
}
.deck-wrap { position: relative; width: 46px; height: 100px; flex: none; }
.trump-under {
  position: absolute;
  left: 0;
  top: 38px;
  z-index: 1;
  width: 44px;
  height: 62px;
  pointer-events: none;
}
.trump-under .trump-under-card {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 62px;
  padding: 3px 4px;
  border-radius: 6px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.32);
}
.trump-under .trump-under-card .c-corner { font-size: 11px; width: 12px; }
.trump-under .trump-under-card .c-corner i { font-size: 10px; }
.trump-under .trump-under-card .c-suit { font-size: 19px; }
.deck { position: relative; z-index: 2; width: 42px; height: 60px; flex: none; }
.deck.is-empty .deck-stack { opacity: 0.25; }
.deck-stack { position: absolute; inset: 0; transition: opacity 0.3s; }
.deck-stack i {
  position: absolute; inset: 0;
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 5px),
    linear-gradient(150deg, var(--back-a, #176247), var(--back-b, #083323));
  border: 1px solid rgba(239, 200, 127, 0.38);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.deck-stack i:nth-child(1) { transform: translate(-3px, 2px); }
.deck-stack i:nth-child(2) { transform: translate(-1px, 0); }
.deck-stack i:nth-child(3) { transform: translate(1px, -2px); }
.deck-count {
  position: absolute; right: -7px; top: -7px;
  min-width: 23px; height: 23px; padding: 0 4px;
  border-radius: 99px;
  display: grid; place-items: center;
  background: #0a1f17;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  z-index: 3;
}
.discard-pile {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted-2); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em;
}
.discard-pile b { color: var(--ink-2); font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.table-center { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.table-pairs {
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 7px 12px;
  max-width: 100%;
}
.table-empty { position: absolute; font-size: 11.5px; color: rgba(244, 239, 227, 0.28); letter-spacing: 0.06em; }

/* пара карт на столе */

.pair {
  position: relative;
  width: 48px; height: 68px;
  flex: none;
}
.pair.is-new { animation: tableIn 0.34s cubic-bezier(0.2, 0.9, 0.25, 1.1) backwards; }
@keyframes tableIn {
  from { opacity: 0; transform: translateY(48px) scale(0.72) rotate(-7deg); }
  to { opacity: 1; transform: none; }
}
.pair .card {
  position: absolute;
  width: 48px; height: 68px;
  border-radius: 6px;
  padding: 3px 4px;
}
.pair .card.is-defense {
  transform: translate(13px, 11px) rotate(5deg);
  z-index: 2;
}
.pair .card.is-defense.is-new {
  animation: defenseIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}
@keyframes defenseIn {
  from { opacity: 0; transform: translate(38px, -26px) rotate(16deg) scale(0.85); }
  to { opacity: 1; transform: translate(13px, 11px) rotate(5deg); }
}
.pair .card .c-corner { font-size: 11px; }
.pair .card .c-corner svg, .pair .card .c-corner i { width: 9px; height: 9px; font-size: 9px; }
.pair .card .c-suit { font-size: 19px; }

/* карты */

.card {
  position: relative;
  width: 56px; height: 80px;
  flex: none;
  border-radius: 7px;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(158deg, #fffef9 0%, #fbf5e7 55%, #efe3c9 100%);
  color: #181818;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  font-family: Georgia, "Times New Roman", serif;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s, opacity 0.16s;
  overflow: hidden;
  user-select: none;
}
.card.red { color: #c33a31; }
.card.black { color: #171717; }
.card.is-trump { box-shadow: 0 0 0 1px rgba(239, 200, 127, 0.85), 0 6px 16px rgba(239, 200, 127, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.card .c-corner { display: flex; flex-direction: column; align-items: center; gap: 0; font-weight: 700; font-size: 13px; line-height: 1; width: 14px; }
.card .c-corner i { font-style: normal; font-size: 11px; margin-top: 1px; }
.card .c-suit { position: absolute; inset: 0; display: grid; place-items: center; font-size: 27px; opacity: 0.92; pointer-events: none; }
.card .c-corner.bottom { align-self: flex-end; transform: rotate(180deg); }
.card .c-corner.bottom i { margin-top: 0; }

.hand .card {
  width: 56px; height: 80px;
  margin-left: -9px;
  cursor: pointer;
}
.hand .card:first-child { margin-left: 0; }
.hand .card.is-playable { transform: translateY(-9px); box-shadow: 0 0 0 2px var(--gold), 0 10px 20px rgba(0, 0, 0, 0.45), 0 0 22px rgba(239, 200, 127, 0.22); }
.hand .card.is-playable:active { transform: translateY(-13px) scale(0.97); }
.hand .card.is-dim { opacity: 0.42; filter: saturate(0.7); }
.hand .card.is-picked { transform: translateY(-16px); box-shadow: 0 0 0 2px var(--gold-3), 0 14px 26px rgba(0, 0, 0, 0.5); }
.hand .card.is-playable { animation: cardGlowIn 0.3s ease; }

@keyframes dealIn {
  from { opacity: 0; transform: translateY(-36px) scale(0.78) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}
@keyframes cardGlowIn {
  from { box-shadow: 0 0 0 0 rgba(239, 200, 127, 0.5), 0 6px 14px rgba(0, 0, 0, 0.34); }
  to { box-shadow: 0 0 0 2px var(--gold), 0 10px 20px rgba(0, 0, 0, 0.45), 0 0 22px rgba(239, 200, 127, 0.22); }
}
.hand.is-dealing .card { animation: dealIn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.hand.is-dealing .card:nth-child(1) { animation-delay: 0.02s; }
.hand.is-dealing .card:nth-child(2) { animation-delay: 0.07s; }
.hand.is-dealing .card:nth-child(3) { animation-delay: 0.12s; }
.hand.is-dealing .card:nth-child(4) { animation-delay: 0.17s; }
.hand.is-dealing .card:nth-child(5) { animation-delay: 0.22s; }
.hand.is-dealing .card:nth-child(6) { animation-delay: 0.27s; }

.card.is-shake { animation: cardShake 0.34s ease; }
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-1deg); }
  50% { transform: translateX(5px) rotate(1deg); }
  75% { transform: translateX(-3px); }
}

.my-panel { flex: none; }
.my-meta { display: flex; align-items: center; gap: 7px; padding: 0 2px 2px; }
.my-meta > b { font-size: 12.5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-meta .ticket-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-size: 11.5px; }
.my-meta .ticket-mini svg { width: 14px; height: 14px; }
.my-meta .ticket-mini b { font-variant-numeric: tabular-nums; }

.hand {
  display: flex; align-items: flex-end;
  padding: 20px 4px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-height: 110px;
}
.hand::-webkit-scrollbar { display: none; }

.game-actions { display: flex; gap: 8px; min-height: 46px; }
.game-actions .btn { flex: 1; min-height: 46px; border-radius: 14px; }

.turn-banner {
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 28px;
  height: auto;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.turn-banner b { font-weight: 600; color: var(--ink-2); }
.turn-banner .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulseDot 1.6s infinite; }
.turn-banner.is-mine b { color: var(--gold); }
.turn-clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.turn-clock:empty { display: none; }
.turn-clock.is-low {
  color: #ffb37a;
  border-color: rgba(255, 150, 80, 0.38);
  background: rgba(255, 130, 60, 0.1);
}
.turn-clock.is-over {
  color: var(--muted-2);
  font-weight: 600;
}

/* карта-рубашка */

.card.back { --back-a: #176247; --back-b: #083323; }
.mini-card {
  display: inline-block;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 5px),
    linear-gradient(150deg, var(--back-a, #176247), var(--back-b, #083323));
  border: 1px solid rgba(239, 200, 127, 0.34);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.back-emerald { --back-a: #176247; --back-b: #083323; }
.back-ruby { --back-a: #6d1f2a; --back-b: #2b0a10; }
.back-gold { --back-a: #8a6a2a; --back-b: #3a2a0a; }
.back-midnight { --back-a: #1e2f63; --back-b: #0a1130; }
.back-joker { --back-a: #45265f; --back-b: #1a0c2a; }

/* ---------- лотерея ---------- */

.seg {
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 13px;
  margin-bottom: 14px;
}
.seg button {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  padding: 0 6px;
}
.seg button.is-active {
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.2), rgba(239, 200, 127, 0.09));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(239, 200, 127, 0.28);
}
.seg-sm { margin-bottom: 12px; }
.seg-sm button { height: 34px; font-size: 11.5px; }
#cosmeticSeg { gap: 2px; }
#cosmeticSeg button { font-size: 10.5px; padding: 0 2px; }

.lottery-hero {
  position: relative;
  border-radius: 24px;
  padding: 20px 18px 18px;
  overflow: hidden;
  border: 1px solid rgba(239, 200, 127, 0.3);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(239, 200, 127, 0.28), transparent 55%),
    radial-gradient(100% 80% at 10% 100%, rgba(29, 107, 76, 0.5), transparent 65%),
    linear-gradient(150deg, #133c2c, #081b14 60%, #0c241a);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}
.lottery-hero.weekly {
  border-color: rgba(177, 140, 255, 0.34);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(177, 140, 255, 0.3), transparent 55%),
    radial-gradient(100% 80% at 10% 100%, rgba(58, 36, 104, 0.6), transparent 65%),
    linear-gradient(150deg, #2a1d47, #0d0a1a 60%, #1a1230);
}
.lottery-hero::after {
  content: "";
  position: absolute; right: -46px; bottom: -60px;
  width: 190px; height: 120px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(239, 200, 127, 0.3), rgba(239, 200, 127, 0.04));
  transform: rotate(-18deg);
  border: 1px dashed rgba(239, 200, 127, 0.28);
  pointer-events: none;
}
.lh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.lh-kicker { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.weekly .lh-kicker { color: #d9c5ff; }
.lh-kicker svg { width: 13px; height: 13px; }
.lh-ticket-count {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  color: var(--ink-2);
}
.lh-ticket-count svg { width: 13px; height: 13px; color: var(--gold); }
.lh-ticket-count b { color: var(--gold); font-variant-numeric: tabular-nums; }
.lh-prize {
  position: relative; z-index: 1;
  margin: 14px 0 0;
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: linear-gradient(180deg, #fff9e9, #f0c878 65%, #c99645);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.weekly .lh-prize { background: linear-gradient(180deg, #fff, #d9c5ff 60%, #9b7be0); -webkit-background-clip: text; background-clip: text; }
.lh-prize small { font-size: 20px; letter-spacing: 0; margin-left: 4px; -webkit-text-fill-color: var(--gold); }
.lh-sub { position: relative; z-index: 1; margin-top: 4px; font-size: 12px; color: rgba(244, 239, 227, 0.68); }
.lh-meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.lh-timer { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.lh-timer svg { width: 14px; height: 14px; color: rgba(244, 239, 227, 0.5); }
.lh-timer b { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.lh-odds-text { font-size: 11px; color: rgba(244, 239, 227, 0.55); }
.lh-odds-text b { color: var(--gold); }

.odds-card {
  margin-top: 12px;
  padding: 15px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
}
.odds-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.odds-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.odds-row span { font-size: 11px; color: var(--muted-2); }
.odds-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin: 10px 0 8px; overflow: hidden; position: relative; }
.odds-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c99a4a, var(--gold-3)); box-shadow: 0 0 10px rgba(239, 200, 127, 0.5); transition: width 0.7s ease; min-width: 2px; }
.odds-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--muted-2); }
.odds-foot b { color: var(--muted); font-weight: 600; }

.ticket-how {
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px;
  padding: 13px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(71, 217, 154, 0.08), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(71, 217, 154, 0.16);
}
.ticket-how-icon {
  width: 36px; height: 36px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(71, 217, 154, 0.12);
  color: var(--green);
}
.ticket-how-icon svg { width: 18px; height: 18px; }
.ticket-how div:nth-child(2) { flex: 1; min-width: 0; }
.ticket-how b { display: block; font-size: 12.5px; }
.ticket-how span { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 2px; line-height: 1.4; }
.ticket-how .btn { flex: none; }


.winner-list { display: flex; flex-direction: column; gap: 6px; }
.winner-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
}
.winner-row .avatar { width: 32px; height: 32px; font-size: 12px; }
.winner-row-main { flex: 1; min-width: 0; }
.winner-row-main b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-row-main span { display: block; font-size: 10px; color: var(--muted-2); margin-top: 1px; }
.winner-prize { text-align: right; flex: none; }
.winner-prize b { display: block; font-size: 13px; color: var(--gold); font-variant-numeric: tabular-nums; }
.winner-prize span { display: block; font-size: 9.5px; color: var(--muted-2); }
.winner-row.is-me { border-color: rgba(239, 200, 127, 0.32); background: linear-gradient(135deg, rgba(239, 200, 127, 0.09), rgba(255, 255, 255, 0.02)); }
.demo-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(177, 140, 255, 0.12);
  border: 1px solid rgba(177, 140, 255, 0.24);
  vertical-align: 1px;
}

.cert-list { display: flex; flex-direction: column; gap: 8px; }
.cert-card {
  position: relative;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(239, 200, 127, 0.28);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(239, 200, 127, 0.16), transparent 58%),
    linear-gradient(135deg, rgba(239, 200, 127, 0.08), rgba(255, 255, 255, 0.012));
  overflow: hidden;
}
.cert-card.is-demo { border-style: dashed; }
.winner-row[data-profile-id] { cursor: pointer; }
.winner-row[data-profile-id]:active { transform: scale(0.995); }
.cert-card.is-redeemed { border-color: var(--line); opacity: 0.86; }
.cert-status.is-redeemed {
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}
.cert-top { display: flex; align-items: center; gap: 10px; }
.cert-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(239, 200, 127, 0.14);
  color: var(--gold);
}
.cert-icon svg { width: 20px; height: 20px; }
.cert-main { flex: 1; min-width: 0; }
.cert-main b { display: block; font-size: 13px; }
.cert-main span { display: block; font-size: 10px; color: var(--muted-2); margin-top: 2px; }
.cert-status {
  flex: none;
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 99px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2a1c06;
  background: linear-gradient(135deg, #fbe8b8, #efc87f);
}
.cert-card.is-demo .cert-status {
  color: var(--violet);
  background: rgba(177, 140, 255, 0.12);
  border: 1px solid rgba(177, 140, 255, 0.24);
}
.cert-code-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--line);
}
.cert-code-row > span {
  flex: none;
  font-size: 8.5px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cert-code-row code {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--gold);
  overflow-wrap: anywhere;
}
.cert-copy {
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.cert-copy:active { transform: scale(0.94); }
.cert-copy svg { width: 14px; height: 14px; }
.cert-instruction { margin: 10px 0 0; font-size: 10px; color: var(--muted); line-height: 1.5; }
.cert-demo-note { margin: 4px 0 0; font-size: 9px; color: var(--violet); line-height: 1.45; }
.cert-admin {
  width: 100%;
  min-height: 40px;
  margin-top: 9px;
  border-radius: 11px;
  font-size: 11.5px;
}
.cert-admin svg { width: 15px; height: 15px; }
.empty-note { padding: 16px; text-align: center; font-size: 12px; color: var(--muted-2); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* ---------- задания ---------- */

.task-teaser {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(239, 200, 127, 0.2);
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.09), rgba(255, 255, 255, 0.015));
  text-align: left;
  transition: transform 0.16s, border-color 0.2s;
}
.task-teaser:active { transform: scale(0.985); }
.task-teaser-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(239, 200, 127, 0.13);
  color: var(--gold);
  font-size: 20px;
}
.task-teaser-main { flex: 1; min-width: 0; }
.task-teaser-main b { display: block; font-size: 13px; }
.task-teaser-main small { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.task-teaser-reward {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--gold); font-size: 12px; font-weight: 700;
  padding: 4px 8px; border-radius: 99px;
  background: rgba(239, 200, 127, 0.1);
}
.task-teaser-reward svg { width: 13px; height: 13px; }
.task-teaser > svg { width: 16px; height: 16px; color: var(--muted-2); flex: none; }

.task-hero {
  position: relative;
  padding: 17px;
  border-radius: 22px;
  border: 1px solid rgba(239, 200, 127, 0.26);
  background:
    radial-gradient(120% 100% at 88% 0%, rgba(239, 200, 127, 0.2), transparent 56%),
    radial-gradient(100% 90% at 0% 100%, rgba(38, 120, 86, 0.4), transparent 62%),
    linear-gradient(150deg, #123a2a, #081b14);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.task-hero::after {
  content: "🎟";
  position: absolute;
  right: -6px; bottom: -24px;
  font-size: 108px;
  opacity: 0.07;
  transform: rotate(-14deg);
  pointer-events: none;
}
.task-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.task-hero-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(239, 200, 127, 0.14);
  border: 1px solid rgba(239, 200, 127, 0.24);
  color: var(--gold);
}
.task-hero-icon svg { width: 20px; height: 20px; }
.task-hero-top > div:nth-child(2) { flex: 1; min-width: 0; }
.task-hero-top b { display: block; font-size: 13px; }
.task-hero-top span { display: block; font-size: 10px; color: var(--muted-2); margin-top: 2px; }
.task-hero-count { text-align: right; flex: none; }
.task-hero-count b { font-size: 26px; line-height: 1; color: var(--gold); letter-spacing: -0.03em; }
.task-hero-count span { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.task-hero-stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.task-hero-stats div { text-align: center; }
.task-hero-stats b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.task-hero-stats span { display: block; font-size: 8.5px; color: var(--muted-2); margin-top: 1px; }
.task-hero-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 12px;
  font-size: 9.5px; color: var(--muted-2);
}
.task-hero-foot svg { width: 12px; height: 12px; }
.task-hero-foot b { color: var(--gold); font-variant-numeric: tabular-nums; }

.task-list { display: flex; flex-direction: column; gap: 7px; }
.task-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  border-radius: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.2s, background 0.2s;
}
.task-card.is-ready {
  border-color: rgba(239, 200, 127, 0.32);
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.085), rgba(255, 255, 255, 0.015));
}
.task-card.is-done { opacity: 0.58; }
.task-icon {
  width: 39px; height: 39px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 19px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.task-card.is-ready .task-icon { background: rgba(239, 200, 127, 0.12); border-color: rgba(239, 200, 127, 0.22); }
.task-main { flex: 1; min-width: 0; }
.task-title { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; }
.task-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(177, 140, 255, 0.12);
  border: 1px solid rgba(177, 140, 255, 0.22);
}
.task-tag.ad {
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line);
}
.task-desc { margin-top: 2px; font-size: 10px; color: var(--muted-2); line-height: 1.35; }
.task-bar {
  height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 7px;
  overflow: hidden;
}
.task-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); }
.task-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 9px; color: var(--muted-2); }
.task-meta b { color: var(--gold); font-weight: 600; }
.task-remove { color: var(--muted-2); font-size: 8.5px; text-decoration: underline; text-underline-offset: 2px; padding: 0; margin-left: auto; }
.task-btn {
  flex: none;
  align-self: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.15s, opacity 0.15s, background 0.2s;
}
.task-actions { flex: none; align-self: center; display: flex; flex-direction: column; gap: 5px; }
.task-btn.is-ghost {
  min-height: 26px;
  padding: 0 8px;
  font-size: 9px;
  background: transparent;
  border-color: var(--line);
  color: var(--muted-2);
}
.task-btn:active { transform: scale(0.96); }
.task-btn.is-ready {
  color: #2a1c06;
  border-color: transparent;
  background: linear-gradient(135deg, #fbe8b8, #f0c878 42%, #d8a758);
  box-shadow: 0 6px 16px rgba(201, 154, 74, 0.22);
}
.task-btn:disabled { opacity: 0.45; }
.task-btn.is-checking { opacity: 0.7; }
.task-card.is-done .task-btn { color: var(--green); border-color: rgba(71, 217, 154, 0.18); background: rgba(71, 217, 154, 0.06); }

.partner-note {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 12px;
  margin-bottom: 9px;
  border-radius: 13px;
  background: rgba(177, 140, 255, 0.055);
  border: 1px solid rgba(177, 140, 255, 0.16);
}
.partner-note-icon { color: #cdb4ff; flex: none; font-size: 15px; line-height: 1.2; }
.partner-note div { flex: 1; min-width: 0; }
.partner-note b { display: block; font-size: 10.5px; color: var(--ink-2); }
.partner-note span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; line-height: 1.4; }

.admin-zone {
  margin-top: 26px;
  padding: 15px;
  border-radius: 16px;
  border: 1px dashed var(--line-strong);
  text-align: center;
}
.admin-zone .btn { width: 100%; }
.admin-zone p { margin: 9px 0 0; font-size: 9.5px; color: var(--muted-2); line-height: 1.5; }

/* форма добавления задания */

.field { display: block; margin-bottom: 11px; }
.field > span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink);
  font-size: 13px;
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(239, 200, 127, 0.5); }
.field textarea { min-height: 62px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); margin: 2px 0 13px; }
.check-row input { width: 16px; height: 16px; accent-color: var(--gold); }
.form-note { font-size: 10px; color: var(--muted-2); line-height: 1.45; margin: 0 0 10px; }

/* ---------- очко 21 ---------- */

.game21 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px calc(8px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.bj-dealer, .bj-player { flex: none; padding: 6px 2px; }
.bj-dealer { padding-top: 8px; }
.bj-hand {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 8px 4px 2px;
}
.bj-card {
  width: 58px;
  height: 84px;
  border-radius: 7px;
}
.bj-card .c-suit { font-size: 29px; }
.bj-card .c-corner { font-size: 13px; }
.bj-card .c-corner i { font-size: 11px; }
.bj-card.is-new { animation: bjDeal 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.1) backwards; }
@keyframes bjDeal {
  from { opacity: 0; transform: translateY(-38px) rotate(-8deg) scale(0.82); }
  to { opacity: 1; transform: none; }
}
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 5px),
    linear-gradient(150deg, var(--back-a, #176247), var(--back-b, #083323));
  border: 1px solid rgba(239, 200, 127, 0.38);
  color: var(--gold);
  justify-content: center;
  align-items: center;
}
.bj-back-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
  color: rgba(239, 200, 127, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.bj-dealer-avatar {
  background: linear-gradient(150deg, #5b4324, #1b1209);
  color: var(--gold);
  border-color: rgba(239, 200, 127, 0.28);
  font-family: Georgia, "Times New Roman", serif;
}
.bj-score {
  min-width: 42px;
  height: 34px;
  padding: 0 7px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: none;
}
.bj-score.is-bust { color: var(--red); border-color: rgba(228, 106, 92, 0.3); background: var(--red-soft); }
.bj-score.is-21 { color: var(--gold); border-color: rgba(239, 200, 127, 0.3); background: var(--gold-soft); }
.bj-table {
  position: relative;
  flex: 1 1 auto;
  min-height: 140px;
  margin: 4px 0 10px;
  border-radius: 22px;
  border: 1px solid rgba(239, 200, 127, 0.14);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
  background: radial-gradient(120% 100% at 50% 40%, #155842, #0a2c20 72%);
}
.game21[data-felt="burgundy"] .bj-table { background: radial-gradient(120% 100% at 50% 40%, #5a1f2b, #2a0c12 72%); }
.game21[data-felt="royal"] .bj-table { background: radial-gradient(120% 100% at 50% 40%, #1d3566, #0a1530 72%); }
.game21[data-felt="obsidian"] .bj-table { background: radial-gradient(120% 100% at 50% 40%, #2a2430, #0b090d 72%); }
.bj-table::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.5;
  pointer-events: none;
}
.bj-table::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 1px;
  box-shadow: 0 0 120px 70px rgba(239, 200, 127, 0.06);
  pointer-events: none;
}
.bj-shoe {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  z-index: 2;
}
.bj-shoe .mini-card { width: 30px; height: 43px; margin: 0; }
.bj-shoe b { font-size: 9.5px; color: var(--muted-2); font-weight: 600; }
.bj-table-center { position: relative; z-index: 1; text-align: center; padding: 8px 60px; }
.bj-suit-mark {
  font-family: Georgia, serif;
  font-size: 74px;
  line-height: 1;
  color: rgba(239, 200, 127, 0.07);
}
.bj-table-message { margin-top: 2px; font-size: 11px; color: rgba(244, 239, 227, 0.4); letter-spacing: 0.04em; }
.bj-bank {
  position: absolute;
  right: 16px; bottom: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: rgba(239, 200, 127, 0.16);
  letter-spacing: -0.04em;
}
.bj-bank::after { content: " очко"; font-family: inherit; font-size: 10px; letter-spacing: 0.04em; }
.bj-actions { display: flex; gap: 8px; flex: none; min-height: 46px; }
.bj-actions .btn { flex: 1; min-height: 46px; border-radius: 14px; }
.game21 .turn-banner { height: 26px; }

/* карточка 21 на главной */

.game21-teaser {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(239, 200, 127, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  text-align: left;
  transition: transform 0.16s, border-color 0.2s;
}
.game21-teaser:active { transform: scale(0.985); }
.game21-teaser-art {
  position: relative;
  width: 40px; height: 52px; flex: none;
  border-radius: 6px;
  background: linear-gradient(155deg, #fffdf6, #efe3c9);
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #171717;
  font-family: Georgia, serif;
  transform: rotate(-6deg);
}
.game21-teaser-art b { font-size: 16px; line-height: 0.95; letter-spacing: -0.04em; }
.game21-teaser-art i { font-style: normal; font-size: 13px; margin-top: 2px; }
.game21-teaser-art::after {
  content: "";
  position: absolute; right: -5px; top: 5px; bottom: 5px; width: 5px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(155deg, #f2dbac, #c99a4a);
  z-index: -1;
}
.game21-teaser-main { flex: 1; min-width: 0; }
.game21-teaser-main b { display: block; font-size: 13px; }
.game21-teaser-main small { display: block; font-size: 10px; color: var(--muted-2); margin-top: 2px; }
.game21-teaser-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--gold);
  padding: 4px 7px; border-radius: 99px;
  background: rgba(239, 200, 127, 0.09);
  border: 1px solid rgba(239, 200, 127, 0.2);
  white-space: nowrap;
}
.game21-teaser > svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; }

/* 21 в профиле */

.mini-game-card {
  display: flex; align-items: center; gap: 11px;
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.mini-game-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(239, 200, 127, 0.2), rgba(239, 200, 127, 0.04));
  border: 1px solid rgba(239, 200, 127, 0.3);
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 700;
}
.mini-game-main { flex: 1; min-width: 0; }
.mini-game-main b { display: block; font-size: 12px; }
.mini-game-main span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }
.mini-game-card .btn { flex: none; }

@media (max-width: 380px) {
  .game21 { padding-left: 10px; padding-right: 10px; }
  .bj-card { width: 52px; height: 76px; }
  .bj-hand { min-height: 88px; gap: 5px; }
  .bj-table-center { padding: 8px 48px; }
  .bj-shoe { left: 10px; }
  .bj-bank { right: 10px; }
}

@media (max-height: 720px) {
  .bj-dealer, .bj-player { padding: 2px 2px; }
  .bj-hand { min-height: 78px; padding-top: 4px; }
  .bj-card { width: 50px; height: 72px; }
  .bj-table { min-height: 96px; margin-top: 2px; margin-bottom: 6px; }
  .game21 .turn-banner { height: 22px; }
  .bj-actions .btn { min-height: 42px; }
  .bj-dealer-avatar { width: 36px; height: 36px; font-size: 14px; }
}

/* ---------- козырный клуб ---------- */

.coins-pill { color: var(--gold); }
.coins-pill svg { color: var(--gold); }

.club-teaser {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(177, 140, 255, 0.2);
  background: linear-gradient(135deg, rgba(177, 140, 255, 0.08), rgba(255, 255, 255, 0.012));
  text-align: left;
}
.club-teaser:active { transform: scale(0.985); }
.club-teaser-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(239, 200, 127, 0.12);
  border: 1px solid rgba(239, 200, 127, 0.24);
  color: var(--gold);
}
.club-teaser-icon svg { width: 19px; height: 19px; }
.club-teaser-main { flex: 1; min-width: 0; }
.club-teaser-main b { display: block; font-size: 12.5px; }
.club-teaser-main small { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }
.club-teaser-go { font-size: 9.5px; font-weight: 700; color: var(--gold); flex: none; }

.club-card {
  margin-top: 2px;
  border-radius: 18px;
  border: 1px solid rgba(239, 200, 127, 0.18);
  background: var(--panel);
  overflow: hidden;
}
.club-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px 4px;
}
.club-card-head b { display: block; font-size: 12.5px; }
.club-card-head span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 1px; }
.club-comfort {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--gold);
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.club-comfort svg { width: 13px; height: 13px; }
.club-comfort.big { font-size: 16px; }
.club-comfort.big svg { width: 17px; height: 17px; }
.club-card .club-scene { margin: 4px 10px 0; width: auto; }
.club-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 13px 11px;
  font-size: 9px; color: var(--muted-2);
}
.club-card-foot .btn { min-height: 30px; padding: 0 10px; font-size: 10px; border-radius: 9px; }

/* сцена */

.club-scene {
  position: relative;
  height: 150px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(239, 200, 127, 0.16);
  background: #0a1f16;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}
.club-scene.is-large { height: 230px; border-radius: 18px; }
.club-wall {
  position: absolute; left: 0; right: 0; top: 0; height: 72%;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(239, 200, 127, 0.09), transparent 60%),
    radial-gradient(100% 100% at 50% 45%, #15543d, #0b2a1e 80%);
}
.club-wall::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(239, 200, 127, 0.055) 18% 18.35%);
}
.club-wall::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 64%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239, 200, 127, 0.22), transparent);
}
.club-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 40%),
    repeating-linear-gradient(90deg, #3b2515 0 9%, #2a190d 9% 18%);
  border-top: 1px solid rgba(239, 200, 127, 0.16);
}
.club-rug {
  position: absolute; left: 27%; right: 27%; bottom: 3%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #5f2130, #2b0d14 75%);
  border: 1px solid rgba(239, 200, 127, 0.18);
}
.club-window {
  position: absolute; left: 7%; top: 15%;
  width: 16%; height: 31%;
  background: linear-gradient(180deg, #0d2b48, #06101e);
  border: 2px solid rgba(239, 200, 127, 0.3);
  border-radius: 3px;
  box-shadow: inset 0 0 16px rgba(120, 180, 255, 0.12);
  overflow: hidden;
}
.club-window::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(239, 200, 127, 0.22);
}
.club-window::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(239, 200, 127, 0.22);
}
.club-window i {
  position: absolute; left: 18%; top: 18%;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f5e6bd, #c99a4a 60%, transparent 65%);
  box-shadow: 0 0 10px rgba(239, 200, 127, 0.5);
}
.club-window b {
  position: absolute; right: 0; top: 0; bottom: 0; width: 24%;
  background: linear-gradient(90deg, rgba(95, 33, 48, 0.8), #3c1420);
  border-left: 1px solid rgba(239, 200, 127, 0.2);
}
.club-picture {
  position: absolute; right: 11%; top: 16%;
  width: 15%; height: 17%;
  background: linear-gradient(135deg, #9b7b3e, #2b5a3a 55%, #4b2a1a);
  border: 2px solid #8a6a3a;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.club-picture i {
  position: absolute; inset: 2px;
  background:
    radial-gradient(circle at 65% 30%, #f3d89b 0 9%, transparent 10%),
    linear-gradient(180deg, transparent 55%, #1c3b2a 56%);
}
.club-picture.lvl2 { border-color: #d8a758; transform: scale(1.1); transform-origin: top right; }
.club-picture.lvl3 { border-color: #f0c878; transform: scale(1.2); transform-origin: top right; box-shadow: 0 0 16px rgba(240, 200, 120, 0.3); }
.club-bar {
  position: absolute; left: 2.5%; bottom: 24%;
  width: 17%; height: 22%;
  display: flex; align-items: flex-end; justify-content: center; gap: 1px;
  padding: 3px 3px 4px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #5d3d21, #2a170b);
  border: 1px solid rgba(239, 200, 127, 0.18);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  z-index: 1;
}
.club-bar span { opacity: 0; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.club-bar.lvl1 span:first-child { opacity: 1; }
.club-bar.lvl2 span { opacity: 1; }
.club-bar.lvl3 { border-color: rgba(239, 200, 127, 0.42); box-shadow: 0 0 16px rgba(239, 200, 127, 0.15); transform: scale(1.05); transform-origin: bottom left; }
.club-bar.lvl3 span { font-size: 14px; }
.club-fireplace {
  position: absolute; right: 2.5%; bottom: 22%;
  width: 17%; height: 28%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  border-radius: 7px 7px 2px 2px;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(0, 0, 0, 0.16) 6px 7px),
    linear-gradient(180deg, #45322a, #1a0e0b);
  border: 1px solid rgba(239, 200, 127, 0.14);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.club-fireplace::before {
  content: "";
  position: absolute; left: 18%; right: 18%; bottom: 10%;
  height: 45%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 122, 44, 0.5), transparent 70%);
}
.club-fireplace span { position: relative; z-index: 1; font-size: 18px; filter: drop-shadow(0 0 6px rgba(255, 122, 44, 0.6)); }
.club-fireplace.lvl2 span { font-size: 22px; }
.club-fireplace.lvl3 { border-color: rgba(239, 200, 127, 0.32); transform: scale(1.06); transform-origin: bottom right; }
.club-fireplace.lvl3 span { font-size: 26px; }
.club-plant {
  position: absolute; left: 23%; bottom: 24%;
  font-size: 21px; line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
  transform-origin: bottom center;
  z-index: 1;
}
.club-plant.lvl2 { font-size: 27px; }
.club-plant.lvl3 { font-size: 34px; }
.club-lamp {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 2px; height: 18%;
  background: linear-gradient(#efc87f, #6a4a20);
  z-index: 2;
}
.club-lamp i {
  position: absolute; left: 50%; bottom: -7px;
  transform: translateX(-50%);
  width: 24px; height: 17px;
  border-radius: 50% 50% 4px 4px;
  background: linear-gradient(180deg, #f7e3b4, #a8742e);
  box-shadow: 0 0 18px rgba(240, 200, 120, 0.32);
}
.club-lamp.lvl2 { height: 21%; }
.club-lamp.lvl2 i { width: 32px; height: 21px; box-shadow: 0 0 22px rgba(240, 200, 120, 0.4); }
.club-lamp.lvl3 { height: 24%; }
.club-lamp.lvl3 i { width: 42px; height: 24px; box-shadow: 0 0 30px rgba(240, 200, 120, 0.5); }
.club-avatar {
  position: absolute; left: 50%; bottom: 29%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  z-index: 3;
}
.club-avatar .avatar {
  width: 42px; height: 42px;
  font-size: 14px;
  border: 2px solid rgba(239, 200, 127, 0.48);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}
.club-hat {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-7deg);
  font-size: 20px; line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
  z-index: 4;
}
.club-cane {
  position: absolute; right: -12px; bottom: -8px;
  font-size: 21px; line-height: 1;
  transform: rotate(12deg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  z-index: 4;
}
.club-jacket {
  position: absolute; left: -11px; bottom: -2px;
  font-size: 15px; line-height: 1;
  opacity: 0.9;
  z-index: 4;
}
.club-table {
  position: absolute; left: 50%; bottom: 10%;
  transform: translateX(-50%);
  width: 46%; height: 18%;
  border-radius: 50% / 32%;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(ellipse at 50% 35%, #237a5a, #0b3324 75%);
  border: 2px solid #8a6a3a;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.5), inset 0 0 22px rgba(0, 0, 0, 0.32);
  z-index: 4;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.club-table span {
  font-size: 9px;
  color: rgba(239, 200, 127, 0.7);
  line-height: 1;
}
.club-table span:nth-child(1) { transform: rotate(-12deg); }
.club-table span:nth-child(2) { transform: rotate(4deg) translateY(-2px); color: rgba(228, 106, 92, 0.8); }
.club-table span:nth-child(3) { transform: rotate(14deg); color: rgba(228, 106, 92, 0.8); }
.club-table b {
  position: absolute; right: 7px; bottom: 3px;
  font-family: Georgia, serif;
  font-size: 9px;
  color: rgba(239, 200, 127, 0.5);
  letter-spacing: 0.04em;
}
.club-table.lvl2 { border-color: #d8a758; transform: translateX(-50%) scale(1.04); box-shadow: 0 9px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(239, 200, 127, 0.1); }
.club-table.lvl3 { border-color: #f0c878; transform: translateX(-50%) scale(1.08); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(240, 200, 120, 0.22); }
.club-scene.is-large .club-avatar .avatar { width: 52px; height: 52px; font-size: 18px; }
.club-scene.is-large .club-avatar { width: 62px; height: 62px; bottom: 28%; }
.club-scene.is-large .club-hat { font-size: 24px; top: -16px; }
.club-scene.is-large .club-cane { font-size: 25px; }
.club-scene.is-large .club-jacket { font-size: 18px; }
.club-scene.is-large .club-table { width: 50%; height: 20%; bottom: 8%; }
.club-scene.is-large .club-lamp i { width: 30px; height: 20px; }
.club-scene.is-large .club-lamp.lvl2 i { width: 38px; height: 24px; }
.club-scene.is-large .club-lamp.lvl3 i { width: 50px; height: 28px; }
.club-scene.is-large .club-plant { font-size: 25px; }
.club-scene.is-large .club-plant.lvl2 { font-size: 32px; }
.club-scene.is-large .club-plant.lvl3 { font-size: 40px; }

/* экран клуба */

.club-screen {
  position: fixed; inset: 0;
  z-index: 58;
  display: flex; justify-content: center;
  padding: 0;
  background: rgba(3, 8, 6, 0.78);
  backdrop-filter: blur(9px);
  animation: fadeIn 0.22s;
}
.club-panel {
  width: 100%; max-width: 560px;
  height: 100dvh;
  overflow-y: auto;
  padding: calc(10px + var(--safe-top)) 16px calc(22px + var(--safe-bottom));
  background:
    radial-gradient(100% 50% at 50% 0%, rgba(30, 100, 72, 0.2), transparent 65%),
    #07130f;
  scrollbar-width: none;
}
.club-panel::-webkit-scrollbar { display: none; }
.club-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 0 10px;
  background: linear-gradient(180deg, #07130f 70%, rgba(7, 19, 15, 0));
}
.club-coins-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(239, 200, 127, 0.1);
  border: 1px solid rgba(239, 200, 127, 0.24);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.club-coins-pill svg { width: 14px; height: 14px; }
.club-hero {
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.club-hero .club-scene { border-radius: 14px; }
.club-hero-info { padding: 11px 3px 2px; }
.club-hero-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.club-hero-title b { display: block; font-size: 14px; }
.club-hero-title span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }
.club-progress { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin-top: 10px; overflow: hidden; }
.club-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); box-shadow: 0 0 10px rgba(239, 200, 127, 0.4); transition: width 0.5s; }
.club-level-hint { font-size: 9px; color: var(--muted-2); margin-top: 5px; }
.club-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  margin: 14px 0 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}
.club-tabs button {
  flex: 1; height: 36px;
  border-radius: 9px;
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
}
.club-tabs button.is-active {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.2), rgba(239, 200, 127, 0.08));
  box-shadow: inset 0 0 0 1px rgba(239, 200, 127, 0.28);
}
.club-items { display: flex; flex-direction: column; gap: 7px; }
.club-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.club-item.is-max { opacity: 0.78; }
.club-item-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.club-item-main { flex: 1; min-width: 0; }
.club-item-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.club-item-title b { font-size: 12px; }
.club-item-title span { font-size: 9px; color: var(--gold); flex: none; }
.club-item-desc { font-size: 9.5px; color: var(--muted-2); margin-top: 1px; line-height: 1.3; }
.club-level-dots { display: flex; gap: 3px; margin-top: 6px; }
.club-level-dots i { width: 18px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.club-level-dots i.is-on { background: var(--gold); box-shadow: 0 0 6px rgba(239, 200, 127, 0.35); }
.club-upgrade {
  flex: none;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap;
}
.club-upgrade svg { width: 12px; height: 12px; }
.club-upgrade.is-ready {
  color: #2a1c06;
  border-color: transparent;
  background: linear-gradient(135deg, #fbe8b8, #efc87f);
  box-shadow: 0 5px 12px rgba(201, 154, 74, 0.2);
}
.club-upgrade:disabled { opacity: 0.5; }
.club-max { font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); flex: none; }
.club-note { margin: 16px 4px 0; font-size: 9px; line-height: 1.5; color: var(--muted-2); text-align: center; }

.reward-coins {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(239, 200, 127, 0.1);
  border: 1px solid rgba(239, 200, 127, 0.28);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
}
.reward-coins svg { width: 15px; height: 15px; }

@media (max-width: 380px) {
  .club-item-icon { width: 34px; height: 34px; font-size: 17px; }
  .club-item { padding: 9px; gap: 8px; }
  .club-upgrade { font-size: 8px; padding: 0 6px; }
  .club-scene { height: 138px; }
  .club-scene.is-large { height: 200px; }
  .club-teaser-go { display: none; }
}

@media (max-width: 360px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand-text small { display: none; }
  .brand-text b { font-size: 13px; letter-spacing: 0.08em; }
  .hud-actions { gap: 4px; }
  .hud-actions .pill { height: 31px; padding: 0 7px; font-size: 12px; }
  .hud-actions .pill svg { width: 14px; height: 14px; }
  .avatar.tiny { width: 30px; height: 30px; font-size: 11px; }
  .club-upgrade { font-size: 7.5px; padding: 0 5px; }
}

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

.podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1fr); align-items: end; gap: 8px; margin: 8px 0 16px; }
.rating-loading {
  grid-column: 1 / -1;
  padding: 46px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
}
.rating-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 34px 18px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.rating-empty b { font-size: 14px; }
.rating-empty span { max-width: 290px; font-size: 11.5px; line-height: 1.5; color: var(--muted-2); }
.rating-empty .btn { margin-top: 4px; }
.pvp-find { width: 100%; margin: 10px 0 2px; min-height: 42px; }
.pvp-find svg { width: 16px; height: 16px; }
.podium-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 6px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  text-align: center;
  min-height: 162px;
  justify-content: flex-end;
}
.podium-item > * { flex-shrink: 0; }
.podium-item.first {
  min-height: 192px;
  border-color: rgba(239, 200, 127, 0.34);
  background: linear-gradient(180deg, rgba(239, 200, 127, 0.15), rgba(255, 255, 255, 0.02));
  box-shadow: 0 14px 30px rgba(201, 154, 74, 0.14);
}
.podium-item .avatar { width: 44px; height: 44px; font-size: 16px; margin-bottom: 6px; }
.podium-item.first .avatar { width: 60px; height: 60px; font-size: 22px; margin-bottom: 8px; }
.podium-crown { position: absolute; top: -14px; color: var(--gold); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.podium-crown svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.podium-item b { font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-item.first b { font-size: 12.5px; }
.podium-item .podium-title { font-size: 9px; color: var(--muted-2); margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.podium-item .rank-chip { font-size: 9px; padding: 1px 4px; gap: 1px; vertical-align: middle; }
.podium-item .podium-score { font-size: 16px; font-weight: 800; margin-top: 5px; color: var(--gold); font-variant-numeric: tabular-nums; }
.podium-item .score-icon { width: 12px; height: 12px; margin-right: 4px; opacity: 0.9; }
.podium-item:nth-child(1) { grid-column: 1; }
.podium-item:nth-child(2) { grid-column: 2; }
.podium-item:nth-child(3) { grid-column: 3; }

.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-align: left;
  width: 100%;
}
.rank-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.rank-row.is-me { border-color: rgba(239, 200, 127, 0.3); background: linear-gradient(135deg, rgba(239, 200, 127, 0.1), rgba(255, 255, 255, 0.02)); }
.rank-row[data-profile-player], .top-row[data-profile-player], .podium-item[data-profile-player] { cursor: pointer; }
.rank-row[data-profile-player]:active, .top-row[data-profile-player]:active, .podium-item[data-profile-player]:active { transform: scale(0.995); }
.rank-row .place { width: 24px; flex: none; text-align: right; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.rank-row .avatar { width: 34px; height: 34px; font-size: 13px; }
.rank-row-main { flex: 1; min-width: 0; }
.rank-row-main b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row-main > span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted-2); margin-top: 1px; flex-wrap: wrap; }
.rank-row-score { text-align: right; flex: none; }
.rank-row-score b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.rank-row-score span { display: block; font-size: 9.5px; color: var(--green); }
.rank-row-score span.neg { color: var(--red); }
.score-icon { width: 10px; height: 10px; fill: currentColor; stroke: none; vertical-align: -1px; margin-right: 3px; opacity: 0.8; }
.rank-row-score .score-icon { color: var(--gold); opacity: 0.85; }
.rank-open {
  width: 12px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--muted-2);
}
.rank-open svg { width: 13px; height: 13px; }

.online-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
  margin-right: 4px;
  vertical-align: 1px;
  flex: none;
}
.rank-row-main b .online-dot { display: inline-block; margin-top: 0; }
.friend-menu {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-2);
  font-size: 14px; line-height: 1;
}
.friend-menu:active { transform: scale(0.95); }
.blocked-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.blocked-row .avatar { width: 30px; height: 30px; font-size: 12px; }
.blocked-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.blocked-row .btn { flex: none; }
.online-dot.on { background: var(--green); box-shadow: 0 0 6px rgba(71, 217, 154, 0.7); }
.challenge-link {
  color: var(--gold);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(239, 200, 127, 0.1);
  border: 1px solid rgba(239, 200, 127, 0.22);
  margin-left: 2px;
}
.challenge-link:active { opacity: 0.65; transform: scale(0.97); }
.podium-challenge {
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(239, 200, 127, 0.12);
  border: 1px solid rgba(239, 200, 127, 0.26);
  color: var(--gold);
  font-size: 8.5px;
  font-weight: 700;
}
.podium-challenge:active { transform: scale(0.96); }

/* вызов и комната */

.challenge-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.challenge-head .avatar { width: 48px; height: 48px; font-size: 17px; }
.challenge-head-main { flex: 1; min-width: 0; }
.challenge-head-main b { display: block; font-size: 16px; }
.challenge-head-main span { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 3px; }
.bot-message {
  display: flex; gap: 10px;
  padding: 11px;
  border-radius: 13px;
  background: rgba(239, 200, 127, 0.075);
  border: 1px solid rgba(239, 200, 127, 0.2);
  margin: 10px 0;
}
.bot-message-icon {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #1d6b4c, #0c3a29);
  border: 1px solid rgba(239, 200, 127, 0.3);
  color: var(--gold);
  font-size: 17px;
}
.bot-message b { display: block; font-size: 11.5px; }
.bot-message span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.room-code {
  text-align: center;
  padding: 14px 10px;
  margin: 10px 0 8px;
  border-radius: 12px;
  border: 1px dashed rgba(239, 200, 127, 0.34);
  background: rgba(0, 0, 0, 0.24);
  color: var(--gold);
  font-family: "Consolas", "SF Mono", monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.room-link {
  text-align: center;
  font-size: 9.5px;
  color: var(--muted-2);
  word-break: break-all;
  margin-bottom: 11px;
}
.room-actions { display: flex; flex-direction: column; gap: 8px; }
.room-actions .btn { width: 100%; }
.room-actions-secondary { flex-direction: row; margin-top: 8px; }
.room-actions-secondary .btn { width: auto; flex: 1; }
.room-wait { text-align: center; font-size: 10px; color: var(--muted-2); margin-top: 10px; }
.room-steps {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0 10px;
}
.room-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.room-step > span {
  width: 23px; height: 23px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(239, 200, 127, 0.12);
  border: 1px solid rgba(239, 200, 127, 0.3);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
}
.room-step b { display: block; font-size: 12px; line-height: 1.2; }
.room-step small { display: block; margin-top: 2px; font-size: 9.5px; color: var(--muted-2); line-height: 1.35; }
.room-status {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(82, 201, 138, 0.07);
  border: 1px solid rgba(82, 201, 138, 0.22);
}
.room-status-dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(82, 201, 138, 0.45);
  animation: roomPulse 1.8s infinite;
}
@keyframes roomPulse {
  0% { box-shadow: 0 0 0 0 rgba(82, 201, 138, 0.4); }
  70% { box-shadow: 0 0 0 7px rgba(82, 201, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(82, 201, 138, 0); }
}
.room-status b { display: block; font-size: 12.5px; }
.room-status span { display: block; margin-top: 2px; font-size: 9.5px; color: var(--muted-2); }
.room-status span b { display: inline; font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }

.my-rank {
  position: sticky;
  bottom: calc(var(--tabbar) + 22px + var(--safe-bottom));
  z-index: 5;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(9, 28, 21, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(239, 200, 127, 0.32);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- профиль ---------- */

.profile-hero {
  position: relative;
  padding: 20px 18px 18px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(38, 120, 86, 0.4), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  text-align: center;
}
.profile-hero .avatar { margin: 0 auto 10px; }

.profile-summary {
  position: relative;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(38, 120, 86, 0.28), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  overflow: hidden;
}
.profile-summary-top { display: flex; align-items: center; gap: 12px; text-align: left; }
.profile-avatar { width: 58px; height: 58px; font-size: 22px; flex: none; }
.profile-summary-main { flex: 1; min-width: 0; }
.profile-summary .profile-name { display: block; font-size: 19px; text-align: left; }
.profile-sub {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 3px; font-size: 10.5px; color: var(--muted-2);
}
.profile-sub .rank-chip { font-size: 9px; padding: 1px 5px; }
.profile-edit-btn { flex: none; min-height: 34px; padding: 0 12px; font-size: 11px; }
.profile-rating { display: flex; align-items: flex-end; gap: 14px; margin-top: 16px; }
.profile-rating-value { flex: none; text-align: left; }
.profile-rating-value b { display: block; font-size: 28px; font-weight: 800; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.profile-rating-value span { display: block; margin-top: 2px; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.profile-rating .profile-progress { flex: 1; min-width: 0; margin: 0 0 2px; }
.profile-progress-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 9.5px; color: var(--muted-2); }
.profile-stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.profile-stats-row div {
  padding: 10px 4px; border-radius: 12px; text-align: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.profile-stats-row b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.profile-stats-row span { display: block; margin-top: 1px; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.profile-invite { width: 100%; margin-top: 12px; }
@media (max-width: 340px) {
  .profile-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ach-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ach-card.is-mini { min-height: 96px; padding: 10px 6px 9px; }
.ach-card.is-mini .ach-icon { font-size: 20px; }
.ach-card.is-mini b { font-size: 9.5px; margin-top: 5px; }
.ach-card.is-mini span { display: none; }
.ach-grid-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.look-group { margin-top: 16px; text-align: left; }
.look-group h3 {
  margin: 0 0 8px; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2);
}
.look-list { display: flex; flex-direction: column; gap: 6px; }
.look-list .cos-card { width: 100%; }
.profile-name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.profile-title { margin-top: 4px; font-size: 11.5px; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 5px; }
.profile-title svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.profile-avatar-btn {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted-2);
  text-decoration: underline;
  text-decoration-color: rgba(239, 200, 127, 0.25);
  text-underline-offset: 3px;
}
.profile-avatar-btn:active { color: var(--gold); }

/* бейджи и витрина */

.profile-avatar-wrap {
  position: relative;
  width: 96px;
  margin: 0 auto 58px;
  padding-bottom: 0;
}
.profile-avatar-wrap .avatar { margin: 0 auto; }
.profile-rank-crest {
  position: absolute;
  left: -38px; top: 4px;
  min-width: 29px; height: 29px;
  padding: 0 4px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: #0a1f17;
  border: 1px solid rgba(239, 200, 127, 0.35);
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.profile-trophy-count {
  position: absolute;
  right: -38px; top: 2px;
  height: 28px;
  padding: 0 6px;
  border-radius: 99px;
  display: flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.2), rgba(239, 200, 127, 0.06));
  border: 1px solid rgba(239, 200, 127, 0.35);
  color: var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
.profile-trophy-count svg { width: 12px; height: 12px; }
.profile-trophy-count b { color: var(--ink); font-size: 10px; }
.profile-badge-row {
  position: absolute;
  left: 50%; top: calc(100% + 8px); bottom: auto;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px;
  border-radius: 99px;
  background: rgba(7, 19, 15, 0.92);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.badge-medal {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), transparent 48%),
    linear-gradient(150deg, var(--badge-color, #efc87f), #0b1511 88%);
  border: 1px solid var(--badge-color, #efc87f);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.42);
  transition: transform 0.16s, box-shadow 0.2s;
}
.badge-medal.is-earned { animation: badgePop 0.4s cubic-bezier(0.2, 1.2, 0.3, 1) backwards; }
.badge-medal.is-earned:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.badge-medal.is-locked { filter: grayscale(1); opacity: 0.52; }
.badge-medal-icon { font-size: 15px; line-height: 1; }
.badge-medal-lock {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #0a1712;
  border: 1px solid var(--line-strong);
  color: var(--muted-2);
}
.badge-medal-lock svg { width: 8px; height: 8px; }
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: none; }
}

.badge-showcase {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
}
.badge-showcase-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.badge-showcase-head b { font-size: 12.5px; }
.badge-showcase-head span { font-size: 9.5px; color: var(--muted-2); }
.badge-showcase-side { display: flex; align-items: center; gap: 6px; }
.badge-showcase-all {
  display: inline-flex; align-items: center; gap: 1px;
  color: var(--gold); font-size: 10.5px; font-weight: 700;
  padding: 2px 0 2px 6px;
}
.badge-showcase-all svg { width: 12px; height: 12px; }
.badge-showcase-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.badge-showcase-item {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  text-align: left;
}
.badge-showcase-item:active { transform: scale(0.98); }
.badge-showcase-medal {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px;
  background: linear-gradient(150deg, var(--badge-color, #efc87f), #0b1511 90%);
  border: 1px solid var(--badge-color, #efc87f);
}
.badge-showcase-main { min-width: 0; }
.badge-showcase-main b {
  display: block;
  font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge-showcase-main small { display: block; font-size: 8.5px; color: var(--muted-2); margin-top: 1px; }
.badge-showcase.is-empty .badge-showcase-head { margin-bottom: 6px; }
.badge-showcase-empty {
  display: flex; align-items: center; gap: 9px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed var(--line-strong);
}
.badge-showcase-empty-icon { font-size: 24px; filter: grayscale(0.5); }
.badge-showcase-empty b { display: block; font-size: 11px; }
.badge-showcase-empty span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 1px; line-height: 1.35; }

/* публичный профиль */

.player-profile {
  position: fixed; inset: 0;
  z-index: 55;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(3, 8, 6, 0.76);
  backdrop-filter: blur(9px);
  animation: fadeIn 0.22s;
}
.player-profile-card {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 90dvh;
  overflow-y: auto;
  border-radius: 26px;
  background: #081510;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
  animation: popIn 0.35s cubic-bezier(0.2, 1.1, 0.3, 1);
  scrollbar-width: none;
}
.player-profile-card::-webkit-scrollbar { display: none; }
.pp-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 5;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.14);
}
.pp-cover {
  position: relative;
  padding: 22px 18px 16px;
  text-align: center;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
}
.pp-online {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 10px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.pp-online .online-dot { margin-right: 0; }
.pp-cover .profile-avatar-wrap { margin-bottom: 58px; }
.pp-name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.pp-title {
  margin-top: 3px;
  font-size: 11px;
  color: var(--gold);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.pp-title svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.pp-rating { margin-top: 9px; font-size: 11px; color: var(--muted-2); }
.pp-rating b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-rating .rank-chip { margin-left: 4px; }
.pp-simple-cover {
  padding: 22px 18px 16px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(38, 120, 86, 0.32), transparent 66%);
}
.pp-simple-cover .pp-online-pill { margin-bottom: 12px; }
.pp-simple-cover .avatar { width: 64px; height: 64px; margin: 0 auto 10px; font-size: 24px; }
.pp-simple-cover .pp-rating {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 7px; flex-wrap: wrap;
}
.pp-body { padding: 0 16px 18px; }
.pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pp-stat {
  padding: 9px 4px;
  border-radius: 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
}
.pp-stat b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.pp-stat span { display: block; font-size: 8px; color: var(--muted-2); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.pp-section { margin-top: 16px; }
.pp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.pp-section-head b { font-size: 13px; }
.pp-section-head span { font-size: 9.5px; color: var(--muted-2); }
.pp-form { display: flex; gap: 5px; }
.pp-form-pill {
  width: 30px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.pp-form-pill.win { color: var(--green); background: rgba(71, 217, 154, 0.1); border-color: rgba(71, 217, 154, 0.24); }
.pp-form-pill.loss { color: var(--red); background: rgba(228, 106, 92, 0.08); border-color: rgba(228, 106, 92, 0.2); }
.pp-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.pp-actions .btn { width: 100%; }
.pp-note { margin: 9px 0 0; text-align: center; font-size: 9px; color: var(--muted-2); line-height: 1.4; }

.badge-detail { text-align: center; padding: 4px 0 2px; }
.badge-detail .badge-medal { margin: 0 auto 12px; }
.badge-medal-lg { width: 72px; height: 72px !important; }
.badge-medal-lg .badge-medal-icon { font-size: 34px !important; }
.badge-detail h2 { margin: 0 0 4px; }
.badge-detail p { margin: 0 auto 10px; max-width: 34ch; }
.badge-detail-status {
  display: inline-block;
  margin: 2px 0 12px;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
}
.badge-detail-status.is-earned {
  color: var(--gold);
  border-color: rgba(239, 200, 127, 0.3);
  background: rgba(239, 200, 127, 0.09);
}
.profile-rank-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.profile-rank-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(239, 200, 127, 0.24);
  font-size: 11.5px;
}
.profile-rank-badge b { color: var(--gold); font-size: 14px; }
.profile-progress { margin-top: 14px; }
.profile-progress-head { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-2); margin-bottom: 6px; }
.profile-progress-head b { color: var(--gold); font-variant-numeric: tabular-nums; }
.profile-progress-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.profile-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); box-shadow: 0 0 10px rgba(239, 200, 127, 0.4); transition: width 0.7s ease; }
.profile-mini-stats { display: flex; justify-content: center; gap: 22px; margin-top: 14px; }
.profile-mini-stats div { text-align: center; }
.profile-mini-stats b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.profile-mini-stats span { display: block; font-size: 9.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat-card {
  padding: 12px 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
}
.stat-card b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.stat-card span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; letter-spacing: 0.03em; }
.stat-card.gold b { color: var(--gold); }

.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ach-card {
  position: relative;
  padding: 12px 8px 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
  min-height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s;
}
.ach-card:active { transform: scale(0.98); }
.ach-card .ach-icon { font-size: 24px; line-height: 1; filter: grayscale(1); opacity: 0.4; }
.ach-card b { font-size: 10.5px; margin-top: 7px; line-height: 1.2; }
.ach-card span { font-size: 9px; color: var(--muted-2); margin-top: 3px; line-height: 1.3; }
.ach-card.is-done { border-color: rgba(239, 200, 127, 0.26); background: linear-gradient(160deg, rgba(239, 200, 127, 0.1), rgba(255, 255, 255, 0.015)); }
.ach-card.is-done .ach-icon { filter: none; opacity: 1; }
.ach-card .ach-progress { margin-top: auto; padding-top: 6px; font-size: 8.5px; color: var(--gold); }
.ach-card .ach-progress-bar { width: 100%; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin-top: 4px; overflow: hidden; }
.ach-card .ach-progress-bar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }

.cos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cos-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.cos-card:active { transform: scale(0.985); }
.cos-card.is-equipped { border-color: rgba(239, 200, 127, 0.4); background: linear-gradient(135deg, rgba(239, 200, 127, 0.11), rgba(255, 255, 255, 0.02)); }
.cos-card.is-locked { opacity: 0.58; }
.cos-swatch {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-2);
  overflow: hidden;
}
.cos-swatch.avatar-preview { border-radius: 50%; font-size: 14px; color: #fff; }
.cos-swatch.avatar-preview .avatar-emoji { font-size: 22px; }
.cos-swatch .mini-card { width: 22px; height: 31px; border-radius: 3px; margin: 0; }
.cos-swatch.frame-preview { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, #2a7a58, #10402e); }
.cos-swatch.felt-preview { border-radius: 8px; }
.cos-swatch.title-preview { color: var(--gold); font-size: 13px; }
.cos-main { flex: 1; min-width: 0; }
.cos-main b { display: block; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-main span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; line-height: 1.3; }
.cos-check { color: var(--gold); flex: none; }
.cos-check svg { width: 16px; height: 16px; }
.cos-lock { color: var(--muted-2); flex: none; }
.cos-lock svg { width: 14px; height: 14px; }

.settings-card { margin-top: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 14px 15px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row b { font-size: 12.5px; color: var(--gold); font-weight: 600; }
.setting-row svg { width: 17px; height: 17px; color: var(--muted-2); }
.setting-row.danger { color: var(--red); }

.demo-note { margin: 22px 2px 0; font-size: 10.5px; line-height: 1.5; color: var(--muted-2); text-align: center; }

/* ---------- таббар ---------- */

.tabbar {
  position: fixed;
  left: 50%; bottom: calc(10px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 30;
  width: min(528px, calc(100% - 24px));
  height: var(--tabbar);
  border-radius: 22px;
  background: rgba(8, 24, 18, 0.9);
  border: 1px solid rgba(232, 216, 178, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 0 6px;
}
.tabbar button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 100%;
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.tabbar button svg { width: 21px; height: 21px; transition: transform 0.2s, color 0.2s; }
.tabbar button.is-active { color: var(--gold); }
.tabbar button.is-active svg { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 0 8px rgba(239, 200, 127, 0.35)); }
.tabbar button.is-active::after {
  content: ""; position: absolute; bottom: 9px; width: 16px; height: 2px; border-radius: 99px;
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
.tab-badge {
  position: absolute; top: 8px; left: 50%; margin-left: 6px;
  min-width: 8px; height: 8px; border-radius: 99px;
  background: var(--red); box-shadow: 0 0 0 2px #081812;
}

/* ---------- результат партии ---------- */

.result {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(3, 8, 6, 0.72);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.25s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.result-card {
  position: relative;
  width: 100%; max-width: 360px;
  border-radius: 26px;
  padding: 30px 22px 22px;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(43, 122, 88, 0.35), transparent 62%),
    linear-gradient(180deg, #102b20, #081711);
  border: 1px solid rgba(239, 200, 127, 0.24);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: popIn 0.4s cubic-bezier(0.2, 1.1, 0.3, 1);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.86) translateY(16px); }
  to { opacity: 1; transform: none; }
}
.result.is-loss .result-card { border-color: rgba(228, 106, 92, 0.22); background: radial-gradient(120% 80% at 50% 0%, rgba(122, 42, 42, 0.3), transparent 62%), linear-gradient(180deg, #241414, #0d0808); }
.result.is-draw .result-card { border-color: var(--line-strong); }
.result-rays {
  position: absolute; left: 50%; top: 42%;
  width: 420px; height: 420px; margin: -210px 0 0 -210px;
  background: conic-gradient(from 0deg, transparent 0 10deg, rgba(239, 200, 127, 0.08) 10deg 16deg, transparent 16deg 30deg);
  animation: raysSpin 18s linear infinite;
  pointer-events: none;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }
.result-emblem {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 30px;
  color: var(--gold);
  background: radial-gradient(circle at 35% 30%, rgba(239, 200, 127, 0.28), rgba(239, 200, 127, 0.06));
  border: 1px solid rgba(239, 200, 127, 0.36);
  box-shadow: 0 0 30px rgba(239, 200, 127, 0.2);
}
.result.is-loss .result-emblem { color: var(--red); border-color: rgba(228, 106, 92, 0.36); background: rgba(228, 106, 92, 0.08); box-shadow: none; }
.result-kicker { position: relative; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.result.is-loss .result-kicker { color: var(--red); }
.result.is-draw .result-kicker { color: var(--muted); }
.result-card h2 { position: relative; margin: 6px 0 4px; font-size: 26px; letter-spacing: -0.02em; }
.result-card p { position: relative; margin: 0; font-size: 12px; color: var(--muted); }
.result-stats { position: relative; display: flex; justify-content: center; gap: 16px; margin: 18px 0 0; }
.result-stat { text-align: center; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); min-width: 74px; }
.result-stat b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.result-stat span { display: block; font-size: 9px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }
.result-stat.gold b { color: var(--gold); }
.result-stat.green b { color: var(--green); }
.result-stat.red b { color: var(--red); }
.result-reward { position: relative; margin: 14px 0 16px; }
.result-note { font-size: 11.5px; color: var(--muted-2); padding: 6px 4px; }
.result-unlock {
  margin-top: 8px;
  font-size: 11px;
  color: var(--gold);
  background: rgba(239, 200, 127, 0.07);
  border: 1px dashed rgba(239, 200, 127, 0.24);
  border-radius: 9px;
  padding: 7px 9px;
}
.reward-ticket {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.2), rgba(239, 200, 127, 0.07));
  border: 1px solid rgba(239, 200, 127, 0.35);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
  animation: rewardPulse 2s ease-in-out infinite;
}
@keyframes rewardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 200, 127, 0.25); }
  50% { box-shadow: 0 0 0 7px rgba(239, 200, 127, 0); }
}
.reward-ticket svg { width: 17px; height: 17px; }
.result-card .btn { width: 100%; }
.result-actions { display: flex; gap: 8px; margin-top: 8px; }
.result-actions .btn { flex: 1; }
.result-actions svg { width: 16px; height: 16px; }

/* ---------- розыгрыш ---------- */

.draw {
  position: fixed; inset: 0; z-index: 65;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(3, 8, 6, 0.82);
  backdrop-filter: blur(12px);
  animation: fadeIn 0.25s;
}
.draw-card {
  position: relative;
  width: 100%; max-width: 400px;
  padding: 26px 20px 22px;
  border-radius: 26px;
  text-align: center;
  border: 1px solid rgba(239, 200, 127, 0.3);
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(201, 154, 74, 0.25), transparent 60%),
    linear-gradient(180deg, #132c21, #081510);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  animation: popIn 0.4s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.draw-card.weekly { border-color: rgba(177, 140, 255, 0.32); background: radial-gradient(100% 70% at 50% 0%, rgba(177, 140, 255, 0.22), transparent 60%), linear-gradient(180deg, #1c1433, #0a0714); }
.draw-card.is-win {
  border-color: rgba(239, 200, 127, 0.6);
  box-shadow: 0 0 0 1px rgba(239, 200, 127, 0.18), 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(239, 200, 127, 0.16);
}
.draw-kicker { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.weekly .draw-kicker { color: #d9c5ff; }
.draw-card h2 { margin: 6px 0 0; font-size: 40px; letter-spacing: -0.03em; background: linear-gradient(180deg, #fff9e9, #f0c878 60%, #c99645); -webkit-background-clip: text; background-clip: text; color: transparent; }
.draw-card.weekly h2 { background: linear-gradient(180deg, #fff, #d9c5ff 60%, #9b7be0); -webkit-background-clip: text; background-clip: text; }
.draw-card > p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }

.reel {
  position: relative;
  height: 180px;
  margin: 18px 0 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.reel-strip { position: absolute; left: 0; right: 0; top: 58px; will-change: transform; }
.reel-item {
  height: 64px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
.reel-item b { color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.reel-item .avatar { width: 26px; height: 26px; font-size: 10px; }
.reel-item.is-winner { color: var(--gold); }
.reel-item.is-winner b { color: var(--gold-3); }
.reel-marker {
  position: absolute; left: 8px; right: 8px; top: 58px; height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(239, 200, 127, 0.45);
  background: linear-gradient(90deg, rgba(239, 200, 127, 0.13), rgba(239, 200, 127, 0.04));
  box-shadow: 0 0 22px rgba(239, 200, 127, 0.12) inset;
  pointer-events: none;
}
.weekly .reel-marker { border-color: rgba(177, 140, 255, 0.45); background: linear-gradient(90deg, rgba(177, 140, 255, 0.14), rgba(177, 140, 255, 0.04)); }
.reel-marker::before, .reel-marker::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px;
  border-top: 2px solid var(--gold); border-right: 2px solid var(--gold);
}
.reel-marker::before { left: -1px; transform: translateY(-50%) rotate(-135deg); }
.reel-marker::after { right: -1px; transform: translateY(-50%) rotate(45deg); }
.draw-count { font-size: 10.5px; color: var(--muted-2); }
.draw-card .btn { width: 100%; margin-top: 14px; }
.draw-result { margin-top: 12px; font-size: 12px; color: var(--muted); }
.draw-result b { color: var(--gold); }
.draw-result .win-name { font-size: 15px; color: var(--ink); font-weight: 700; display: block; margin-top: 2px; }

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

.sheet-layer {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  background: rgba(3, 8, 6, 0.74);
  animation: fadeIn 0.2s;
}
@media (min-width: 620px) {
  .sheet-layer {
    background: rgba(3, 8, 6, 0.6);
    backdrop-filter: blur(6px);
  }
}
@media (max-width: 619px) {
  .player-profile {
    background: rgba(3, 8, 6, 0.88);
    backdrop-filter: none;
  }
  .sheet { box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.45); }
}
.sheet-layer.is-instant,
.sheet-layer.is-instant .sheet { animation: none; }
.sheet {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 86dvh;
  border-radius: 24px 24px 0 0;
  background: #0a1d16;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
  animation: sheetUp 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
  padding-bottom: calc(18px + var(--safe-bottom));
  overflow: hidden;
}
.sheet-backdrop { position: absolute; inset: 0; }
.sheet-close {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--muted);
}
.sheet-close svg { width: 16px; height: 16px; }
.sheet-close:active { transform: scale(0.94); background: var(--panel-2); }
.sheet-close ~ .sheet-body h2 { padding-right: 30px; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); margin: 10px auto 0; }
.sheet-body { padding: 14px 20px 4px; overflow-y: auto; max-height: calc(86dvh - 40px); }
.sheet-body h2 { margin: 0 0 8px; font-size: 20px; }
.sheet-body h3 { margin: 18px 0 6px; font-size: 14px; color: var(--gold); }
.sheet-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.sheet-body ul { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.sheet-body li { margin-bottom: 6px; }
.sheet-body li b { color: var(--ink-2); }
.sheet-body .btn { margin-top: 4px; }
.sheet-action { width: 100%; margin-top: 10px; }

/* ---------- тост и эффекты ---------- */

.toast {
  position: fixed;
  left: 50%; top: calc(10px + var(--safe-top));
  transform: translate(-50%, -16px);
  z-index: 90;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(12, 36, 27, 0.96);
  border: 1px solid rgba(239, 200, 127, 0.3);
  color: var(--ink);
  font-size: 12.5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { border-color: rgba(228, 106, 92, 0.4); }

.fx { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.flash { position: fixed; inset: 0; z-index: 84; pointer-events: none; background: #fff; opacity: 0; }
.flash.on { animation: flashAnim 0.45s ease-out; }
@keyframes flashAnim { 0% { opacity: 0.28; } 100% { opacity: 0; } }

/* ---------- «взял» / «бито» ---------- */

.table-flash {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: tableFlash 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
.table-flash.take { color: var(--red); }
@keyframes tableFlash {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* ---------- адаптив ---------- */

@media (max-width: 380px) {
  .app { padding-left: 12px; padding-right: 12px; }
  .hero { padding-left: 12px; padding-right: 12px; }
  .prize-grid { gap: 8px; }
  .prize-card { padding: 12px; min-height: 134px; }
  .prize-card .prize-sum { font-size: 22px; }
  .tabbar { width: calc(100% - 16px); }
  .game { padding-left: 8px; padding-right: 8px; }
  .card { width: 51px; height: 74px; }
  .hand .card { margin-left: -11px; }
  .pair { width: 44px; height: 63px; }
  .pair .card { width: 44px; height: 63px; }
  .pair .card.is-defense { transform: translate(11px, 10px) rotate(5deg); }
  .table-wrap { padding: 10px 7px; }
  .lh-prize { font-size: 42px; }
  .podium { gap: 4px; }
  .podium-item { padding: 10px 4px 8px; min-height: 158px; }
  .podium-item.first { min-height: 188px; }
  .podium-item .avatar { width: 40px; height: 40px; font-size: 14px; }
  .podium-item.first .avatar { width: 52px; height: 52px; font-size: 19px; }
}

@media (max-height: 730px) {
  .table-wrap { min-height: 170px; margin: 6px 0; }
  .opp-hand { height: 34px; }
  .opp-hand .mini-card { width: 23px; height: 33px; }
  .hand { min-height: 96px; padding-top: 16px; }
  .card { width: 50px; height: 72px; }
  .turn-banner { height: 24px; }
  .game-actions .btn { min-height: 42px; }
}

@media (min-width: 620px) {
  .screen-game.is-active { display: flex; align-items: center; justify-content: center; }
  .game { height: min(920px, 100dvh); }
}

@media (max-height: 560px) {
  .game {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .opp-hand { display: none; }
  .table-wrap { min-height: 120px; margin: 4px 0; padding: 8px 7px; }
  .turn-banner { height: 22px; }
  .hand { min-height: 78px; padding-top: 10px; }
  .game-actions .btn { min-height: 40px; }
}

/* ---------- режим без анимаций ---------- */

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

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

/* ============================================================
   КОЗЫРНЫЙ КЛУБ — ЯРКИЙ ИГРОВОЙ РЕДИЗАЙН
   ============================================================ */

.coins-pill {
  color: #ffe27a;
  background: linear-gradient(135deg, rgba(255, 191, 40, 0.18), rgba(255, 61, 154, 0.12));
  border-color: rgba(255, 213, 90, 0.4);
}
.coins-pill svg { color: #ffe27a; }

.club-teaser {
  border-color: rgba(255, 213, 90, 0.3);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(255, 231, 106, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(162, 44, 255, 0.34), rgba(255, 61, 154, 0.2) 58%, rgba(255, 138, 61, 0.18));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.club-teaser-icon {
  background: linear-gradient(135deg, #fff3bd, #ffbf28);
  border-color: #fff7d6;
  color: #3a1d00;
  box-shadow: 0 0 16px rgba(255, 191, 40, 0.45);
}
.club-teaser-main b { color: #fff; }
.club-teaser-main small { color: rgba(255, 255, 255, 0.65); }
.club-teaser-go { color: #ffe27a; }

.club-card {
  border-color: rgba(255, 213, 90, 0.3);
  background: #150a2b;
}
.club-card .club-scene { margin: 6px 10px 0; }

/* сцена */

.club-scene {
  position: relative;
  height: 162px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 122, 0.45);
  background: #3b1180;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -24px 46px rgba(40, 4, 90, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.34);
  isolation: isolate;
}
.club-scene.is-large { height: 244px; border-radius: 20px; }

.profile-hero-scene .club-scene {
  height: 252px;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pp-scene .club-scene {
  height: 218px;
  border: 0;
  border-radius: 25px 25px 0 0;
  box-shadow: none;
}

.club-wall {
  position: absolute; left: 0; right: 0; top: 0; height: 73%;
  background:
    radial-gradient(78% 92% at 50% 4%, rgba(255, 243, 168, 0.55), transparent 63%),
    linear-gradient(180deg, #5b28ee 0%, #9b2cff 44%, #ff3f9c 100%);
}
.club-wall::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-conic-gradient(from -7deg at 50% 44%, rgba(255, 255, 255, 0.24) 0deg 6deg, transparent 6deg 18deg);
  opacity: 0.55;
  mix-blend-mode: soft-light;
}
.club-wall::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #ffe16a 18%, #fffbe0 50%, #ffe16a 82%, transparent);
  box-shadow: 0 0 18px #ffdc4d;
}

.club-glow {
  position: absolute; left: 50%; top: 4%;
  width: 64%; height: 68%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 246, 184, 0.42), rgba(255, 210, 90, 0.12) 44%, transparent 68%);
  pointer-events: none;
  z-index: 1;
}

.club-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.club-sparkles i {
  position: absolute;
  font-style: normal;
  color: #fff7c2;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 0 8px #ffe16a, 0 0 16px rgba(255, 225, 106, 0.7);
  animation: clubTwinkle 2.8s ease-in-out infinite;
}
.club-sparkles i:nth-child(1) { left: 9%; top: 22%; }
.club-sparkles i:nth-child(2) { left: 24%; top: 8%; animation-delay: 0.5s; font-size: 7px; }
.club-sparkles i:nth-child(3) { right: 20%; top: 12%; animation-delay: 1.1s; }
.club-sparkles i:nth-child(4) { right: 7%; top: 48%; animation-delay: 1.6s; font-size: 8px; }
.club-sparkles i:nth-child(5) { left: 44%; top: 4%; animation-delay: 2.1s; font-size: 7px; }
@keyframes clubTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.25) rotate(20deg); }
}

.club-suits { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.club-suits i {
  position: absolute;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  opacity: 0.9;
  animation: clubDrift 4.4s ease-in-out infinite;
}
.club-suits i:nth-child(1) { left: 33%; top: 33%; color: #fff; text-shadow: 0 0 8px #fff, 0 0 16px rgba(255, 255, 255, 0.8); }
.club-suits i:nth-child(2) { right: 32%; top: 39%; color: #ff8ab5; text-shadow: 0 0 9px #ff3d9a, 0 0 18px rgba(255, 61, 154, 0.8); animation-delay: 0.7s; }
.club-suits i:nth-child(3) { left: 37%; top: 56%; color: #ffb45c; text-shadow: 0 0 9px #ff7a1f, 0 0 18px rgba(255, 122, 31, 0.75); animation-delay: 1.4s; }
.club-suits i:nth-child(4) { right: 37%; top: 62%; color: #d8b6ff; text-shadow: 0 0 9px #a25cff, 0 0 18px rgba(162, 92, 255, 0.75); animation-delay: 2.1s; }
@keyframes clubDrift {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.55; }
  50% { transform: translateY(-6px) rotate(6deg); opacity: 1; }
}

.club-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 24%),
    linear-gradient(180deg, #ff9b3d 0%, #ff5c8a 100%);
  border-top: 2px solid rgba(255, 255, 255, 0.55);
}
.club-floor::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 11%);
}

.club-rug {
  position: absolute; left: 31%; right: 31%; bottom: 5%;
  height: 11%;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(ellipse at 50% 45%, #7dffff 0%, #2a8bff 46%, rgba(42, 139, 255, 0) 73%);
  box-shadow: 0 0 28px rgba(125, 255, 255, 0.8);
  z-index: 2;
}

.club-window {
  position: absolute; left: 6%; top: 11%;
  width: 18%; height: 32%;
  overflow: hidden;
  border-radius: 8px;
  border: 3px solid #ffd95e;
  background: linear-gradient(180deg, #1436a1, #050b2c);
  box-shadow: 0 0 20px rgba(255, 217, 94, 0.55), inset 0 0 24px rgba(80, 150, 255, 0.6);
  z-index: 2;
}
.club-window::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px;
  background: rgba(255, 225, 120, 0.6);
}
.club-window::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: rgba(255, 225, 120, 0.6);
}
.club-window i {
  position: absolute; left: 16%; top: 14%;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fffbe0, #ffd84f 58%, transparent 66%);
  box-shadow: 0 0 12px rgba(255, 232, 130, 0.9);
}
.club-window b {
  position: absolute; right: 0; top: 0; bottom: 0; width: 26%;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(120, 190, 255, 0.22) 5px 6px),
    linear-gradient(90deg, rgba(95, 33, 120, 0.9), #1b0a3a);
  border-left: 1px solid rgba(255, 225, 120, 0.4);
}

.club-picture {
  position: absolute; right: 9%; top: 11%;
  width: 17%; height: 19%;
  border-radius: 7px;
  border: 3px solid #ffe27a;
  background: linear-gradient(140deg, #ffe66d 0%, #ff8a3d 38%, #ff3d9a 68%, #8f2bff 100%);
  box-shadow: 0 0 18px rgba(255, 138, 61, 0.5), 0 6px 14px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.club-picture i {
  position: absolute; inset: 3px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 44%, #fff 0 10%, rgba(255, 255, 255, 0.35) 11% 16%, transparent 17%),
    linear-gradient(180deg, transparent 58%, rgba(90, 20, 120, 0.55) 59%);
}
.club-picture.lvl2 { border-color: #fff3bd; transform: scale(1.08); transform-origin: top right; box-shadow: 0 0 24px rgba(255, 220, 90, 0.5); }
.club-picture.lvl3 { border-color: #fffbe0; transform: scale(1.16); transform-origin: top right; box-shadow: 0 0 30px rgba(255, 240, 170, 0.7); }

.club-bar {
  position: absolute; left: 2%; bottom: 24%;
  width: 19%; height: 24%;
  display: flex; align-items: flex-end; justify-content: center; gap: 1px;
  padding: 3px 3px 5px;
  border-radius: 8px 8px 4px 4px;
  border: 2px solid #ffe27a;
  background: linear-gradient(180deg, #ff8a3d, #a22bff);
  box-shadow: 0 0 18px rgba(255, 138, 61, 0.5), 0 6px 14px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  z-index: 2;
}
.club-bar span { opacity: 0; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.club-bar.lvl1 span:first-child { opacity: 1; }
.club-bar.lvl2 span { opacity: 1; }
.club-bar.lvl3 { border-color: #fffbe0; box-shadow: 0 0 24px rgba(255, 225, 120, 0.55), 0 6px 14px rgba(0, 0, 0, 0.3); transform: scale(1.05); transform-origin: bottom left; }
.club-bar.lvl3 span { font-size: 16px; }

.club-fireplace {
  position: absolute; right: 2%; bottom: 22%;
  width: 19%; height: 29%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 5px;
  border-radius: 11px 11px 5px 5px;
  border: 2px solid #ffe27a;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, 0.1) 7px 8px),
    linear-gradient(180deg, #ff4f8b, #7b2cff);
  box-shadow: 0 0 24px rgba(255, 79, 139, 0.55), 0 6px 16px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.club-fireplace::before {
  content: "";
  position: absolute; left: 14%; right: 14%; bottom: 8%;
  height: 52%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 246, 170, 0.95), rgba(255, 122, 44, 0.8) 42%, transparent 72%);
  filter: blur(1px);
}
.club-fireplace span { position: relative; z-index: 1; font-size: 20px; filter: drop-shadow(0 0 9px rgba(255, 210, 90, 0.9)); }
.club-fireplace.lvl2 span { font-size: 24px; }
.club-fireplace.lvl3 { border-color: #fffbe0; transform: scale(1.05); transform-origin: bottom right; box-shadow: 0 0 30px rgba(255, 225, 120, 0.6); }
.club-fireplace.lvl3 span { font-size: 28px; }

.club-plant {
  position: absolute; left: 24%; bottom: 23%;
  font-size: 24px; line-height: 1;
  filter: drop-shadow(0 0 10px rgba(90, 255, 160, 0.7)) drop-shadow(0 5px 6px rgba(0, 0, 0, 0.3));
  transform-origin: bottom center;
  z-index: 2;
}
.club-plant.lvl2 { font-size: 30px; filter: drop-shadow(0 0 14px rgba(120, 255, 140, 0.75)) drop-shadow(0 5px 6px rgba(0, 0, 0, 0.3)); }
.club-plant.lvl3 { font-size: 37px; filter: drop-shadow(0 0 18px rgba(160, 255, 120, 0.85)) drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3)); }

.club-lamp {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 3px; height: 17%;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffe16a, #a12cff);
  z-index: 2;
}
.club-lamp i {
  position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%);
  width: 32px; height: 20px;
  border-radius: 50% 50% 6px 6px;
  background: linear-gradient(180deg, #fffbe0, #ffcb2e);
  box-shadow: 0 0 24px rgba(255, 220, 90, 0.9), 0 0 52px rgba(255, 220, 90, 0.5);
}
.club-lamp::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 42px solid transparent;
  border-right: 42px solid transparent;
  border-top: 72px solid rgba(255, 240, 160, 0.16);
  filter: blur(2px);
}
.club-lamp.lvl2 { height: 20%; }
.club-lamp.lvl2 i { width: 40px; height: 24px; box-shadow: 0 0 30px rgba(255, 225, 110, 0.95), 0 0 64px rgba(255, 225, 110, 0.55); }
.club-lamp.lvl3 { height: 23%; }
.club-lamp.lvl3 i { width: 50px; height: 28px; box-shadow: 0 0 38px rgba(255, 235, 140, 1), 0 0 80px rgba(255, 225, 110, 0.6); }

.club-avatar {
  position: absolute; left: 50%; bottom: 27%;
  transform: translateX(-50%);
  width: 68px; height: 68px;
  display: grid; place-items: center;
  z-index: 4;
  animation: clubFloat 3.6s ease-in-out infinite;
}
@keyframes clubFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
.club-avatar::before {
  content: "";
  position: absolute; inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 184, 0.55), transparent 66%);
  pointer-events: none;
}
.club-avatar::after {
  content: "";
  position: absolute; left: 50%; bottom: -17px;
  width: 46px; height: 25px;
  transform: translateX(-50%);
  border-radius: 50% 50% 44% 44%;
  border: 2px solid #fff3bd;
  background: linear-gradient(180deg, #ffe27a, #ff7a3d);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 210, 80, 0.45);
  z-index: -1;
}
.club-scene .avatar { margin: 0; }
.club-avatar .avatar {
  width: 58px; height: 58px;
  font-size: 20px;
  border: 3px solid #ffe27a;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 0 26px rgba(255, 210, 80, 0.65),
    0 8px 18px rgba(0, 0, 0, 0.35);
  filter: saturate(1.2);
  z-index: 1;
}
.club-avatar .avatar .avatar-emoji { font-size: 36px; }
.club-hat {
  position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-7deg);
  font-size: 24px; line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  z-index: 5;
}
.club-cane {
  position: absolute; right: -14px; bottom: -10px;
  font-size: 26px; line-height: 1;
  transform: rotate(12deg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
  z-index: 5;
}
.club-jacket {
  position: absolute; left: -13px; bottom: -2px;
  font-size: 18px; line-height: 1;
  opacity: 0.95;
  z-index: 5;
}

.club-table {
  position: absolute; left: 50%; bottom: 7%;
  transform: translateX(-50%);
  width: 50%; height: 20%;
  border-radius: 50% / 34%;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  border: 3px solid #ffd95e;
  background: radial-gradient(ellipse at 50% 28%, #36f1a0, #0a9a63 72%);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(54, 241, 160, 0.45),
    inset 0 0 22px rgba(0, 80, 50, 0.32);
  z-index: 5;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.club-table span {
  font-size: 10px;
  line-height: 1;
  color: #fff6c9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.club-table span:nth-child(1) { transform: rotate(-12deg); }
.club-table span:nth-child(2) { transform: rotate(4deg) translateY(-2px); color: #ff9ec4; }
.club-table span:nth-child(3) { transform: rotate(14deg); color: #ff9ec4; }
.club-table b {
  position: absolute; right: 9px; bottom: 3px;
  font-family: Georgia, serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.04em;
}
.club-table.lvl2 {
  border-color: #ffe98f;
  transform: translateX(-50%) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 28px rgba(255, 225, 120, 0.35), inset 0 0 22px rgba(0, 80, 50, 0.3);
}
.club-table.lvl3 {
  border-color: #fffbe0;
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 36px rgba(255, 240, 170, 0.55), inset 0 0 22px rgba(0, 80, 50, 0.3);
}

.club-scene.is-large .club-avatar { width: 106px; height: 106px; bottom: 28%; }
.club-scene.is-large .club-avatar .avatar { width: 94px; height: 94px; font-size: 28px; }
.club-scene.is-large .club-avatar .avatar .avatar-emoji { font-size: 64px; }
.club-scene.is-large .club-avatar::after {
  width: 74px;
  height: 46px;
  bottom: -24px;
  border-color: #ffe27a;
  background: linear-gradient(180deg, #6f2cff, #2a0a66);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), 0 0 18px rgba(162, 92, 255, 0.45);
}
.club-scene.is-large .club-avatar::before { inset: -28px; }
.club-scene.is-large .club-hat { font-size: 36px; top: -27px; }
.club-scene.is-large .club-cane { font-size: 32px; }
.club-scene.is-large .club-jacket { font-size: 22px; }
.club-scene.is-large .club-table { width: 52%; height: 19%; bottom: 6%; }
.club-scene.is-large .club-lamp i { width: 40px; height: 25px; }
.club-scene.is-large .club-lamp.lvl2 i { width: 48px; height: 29px; }
.club-scene.is-large .club-lamp.lvl3 i { width: 58px; height: 33px; }
.club-scene.is-large .club-plant { font-size: 29px; }
.club-scene.is-large .club-plant.lvl2 { font-size: 35px; }
.club-scene.is-large .club-plant.lvl3 { font-size: 43px; }
.club-scene.is-large .club-window { width: 19%; height: 33%; }
.club-scene.is-large .club-picture { width: 18%; height: 20%; }
.club-scene.is-large .club-bar { width: 20%; height: 25%; }
.club-scene.is-large .club-fireplace { width: 20%; height: 30%; }

.club-bar::after {
  content: "";
  position: absolute; left: 4%; right: 4%; bottom: 40%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffe27a 20%, #fffbe0 50%, #ffe27a 80%, transparent);
  box-shadow: 0 0 8px rgba(255, 226, 122, 0.7);
}
.club-bar span { font-size: 16px; }
.club-bar.lvl3 span { font-size: 19px; }

.club-fireplace::before {
  left: 17%; right: 17%; bottom: 8%;
  height: 57%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, #30093f 0 58%, #14021f 100%);
  box-shadow: inset 0 0 18px rgba(255, 122, 44, 0.45);
  filter: none;
}
.club-fireplace::after {
  content: "";
  position: absolute; left: 27%; right: 27%; bottom: 11%;
  height: 32%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, #fff6aa, #ff7a2c 52%, transparent 80%);
  filter: blur(2px);
}
.club-fireplace span { margin-bottom: 3px; }

/* экран клуба */

.club-panel {
  background:
    radial-gradient(100% 56% at 50% 0%, rgba(162, 44, 255, 0.38), transparent 64%),
    radial-gradient(80% 46% at 50% 95%, rgba(255, 61, 154, 0.16), transparent 70%),
    #0a0718;
}
.club-top { background: linear-gradient(180deg, #0a0718 72%, rgba(10, 7, 24, 0)); }
.club-coins-pill {
  background: linear-gradient(135deg, rgba(255, 233, 143, 0.24), rgba(255, 191, 40, 0.12));
  border-color: rgba(255, 233, 143, 0.5);
  color: #ffe27a;
  box-shadow: 0 0 18px rgba(255, 191, 40, 0.15);
}
.club-hero {
  border-color: rgba(255, 213, 90, 0.3);
  background:
    linear-gradient(180deg, rgba(162, 44, 255, 0.2), rgba(255, 61, 154, 0.06)),
    #130a26;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.club-hero-title b { color: #fff; }
.club-hero-title span { color: rgba(255, 255, 255, 0.62); }
.club-progress { background: rgba(0, 0, 0, 0.45); }
.club-progress i { background: linear-gradient(90deg, #ffe16a, #ff7a3d 55%, #ff3d9a); box-shadow: 0 0 12px rgba(255, 168, 60, 0.65); }
.club-level-hint { color: rgba(255, 255, 255, 0.55); }
.club-tabs {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 213, 90, 0.18);
}
.club-tabs button.is-active {
  color: #2a1600;
  background: linear-gradient(135deg, #fff3bd, #ffbf28);
  box-shadow: 0 5px 14px rgba(255, 191, 40, 0.24);
}
.club-item {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    #140b26;
}
.club-item-icon {
  background: linear-gradient(135deg, rgba(255, 233, 143, 0.22), rgba(255, 61, 154, 0.16));
  border-color: rgba(255, 213, 90, 0.26);
  box-shadow: 0 0 14px rgba(255, 191, 40, 0.12);
}
.club-item-title span { color: #ffdb6e; }
.club-level-dots i.is-on { background: linear-gradient(90deg, #ffe16a, #ff8a3d); box-shadow: 0 0 8px rgba(255, 191, 40, 0.5); }
.club-upgrade.is-ready {
  background: linear-gradient(135deg, #fff3bd, #ffbf28);
  box-shadow: 0 5px 14px rgba(255, 191, 40, 0.28);
}
.club-note { color: rgba(255, 255, 255, 0.48); }

/* профиль — клуб сверху вместо аватарки */

.profile-hero.club-profile-hero {
  padding: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 213, 90, 0.38);
  background: #130a26;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.profile-hero-scene { position: relative; }
.profile-scene-tags {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  z-index: 6;
  pointer-events: none;
}
.pst-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(18, 4, 40, 0.58);
  border: 1px solid rgba(255, 224, 130, 0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.pst-pill.is-gold {
  color: #2a1600;
  background: linear-gradient(135deg, #fff3bd, #ffbf28);
  border-color: #fff7d6;
  text-shadow: none;
  box-shadow: 0 4px 14px rgba(255, 168, 40, 0.35);
}
.pst-pill svg { width: 13px; height: 13px; }
.pst-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6dffb0;
  box-shadow: 0 0 8px #6dffb0;
  animation: onlinePulse 1.8s infinite;
}
.profile-hero-body {
  padding: 0 16px 17px;
  text-align: left;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(162, 44, 255, 0.18), transparent 68%),
    radial-gradient(90% 60% at 50% 0%, rgba(255, 150, 60, 0.08), transparent 60%),
    linear-gradient(180deg, #1b1324, #0b1511);
}
.profile-identity {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-top: 14px;
}
.profile-identity-main { min-width: 0; }
.profile-identity .profile-name {
  font-size: 22px;
  text-align: left;
  color: #fff;
  line-height: 1.08;
}
.profile-identity .profile-title { justify-content: flex-start; color: #ffdb6e; }
.profile-avatar-btn {
  flex: none;
  margin: 3px 0 0;
  padding: 6px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 213, 90, 0.28);
  color: #ffe7a3;
  font-size: 8.5px;
  font-weight: 700;
  text-decoration: none;
}
.profile-avatar-btn:active { color: #2a1600; background: #ffe27a; }

.profile-badge-row.is-inline {
  position: static;
  transform: none;
  width: max-content;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 213, 90, 0.22);
  box-shadow: none;
}
.pp-identity .profile-badge-row.is-inline { margin: 10px auto 0; }

.club-strip {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 213, 90, 0.24);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(255, 233, 143, 0.16), transparent 55%),
    linear-gradient(135deg, rgba(162, 44, 255, 0.32), rgba(255, 61, 154, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.club-strip-main { flex: 1; min-width: 0; }
.club-strip-top { display: flex; align-items: baseline; gap: 7px; }
.club-strip-top b { font-size: 12px; color: #fff; }
.club-strip-top span { font-size: 8.5px; font-weight: 700; color: #ffdb6e; white-space: nowrap; }
.club-strip-bar {
  height: 5px;
  margin-top: 6px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.38);
  overflow: hidden;
}
.club-strip-bar i {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe16a, #ff7a3d 55%, #ff3d9a);
  box-shadow: 0 0 10px rgba(255, 225, 106, 0.6);
  transition: width 0.5s;
}
.club-strip-hint { margin-top: 5px; font-size: 8.5px; color: rgba(255, 255, 255, 0.58); }
.club-strip-cta {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, #fff3bd, #ffbf28);
  color: #2a1600;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(255, 191, 40, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.club-strip-cta:active { transform: scale(0.97); }

.profile-identity + .profile-badge-row.is-inline + .club-strip + .profile-rank-row { margin-top: 12px; }
.profile-hero-body .profile-rank-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 213, 90, 0.22);
}
.profile-hero-body .profile-progress-head { color: rgba(255, 255, 255, 0.55); }
.profile-hero-body .profile-mini-stats span { color: rgba(255, 255, 255, 0.5); }

/* публичный профиль — клуб сверху */

.pp-cover.pp-club-cover {
  padding: 0 0 15px;
  background: linear-gradient(180deg, #1a0b32, #0b1511 70%);
  text-align: center;
}
.pp-scene { position: relative; }
.pp-scene-tags {
  position: absolute; top: 10px; left: 10px; right: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  z-index: 6;
  pointer-events: none;
}
.pp-online-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(18, 4, 40, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.pp-identity { padding: 13px 18px 0; }
.pp-club-line {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 213, 90, 0.22);
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
}
.pp-club-line b { color: #ffdb6e; font-size: 9.5px; letter-spacing: 0.03em; }
.pp-cover.pp-club-cover .pp-name { margin-top: 2px; }
.pp-cover.pp-club-cover .pp-online { margin: 0; }

.reward-coins {
  background: linear-gradient(135deg, rgba(255, 233, 143, 0.18), rgba(255, 191, 40, 0.1));
  border-color: rgba(255, 213, 90, 0.36);
  color: #ffe27a;
}

@media (max-width: 380px) {
  .club-scene { height: 148px; }
  .club-scene.is-large { height: 218px; }
  .profile-hero-scene .club-scene { height: 224px; }
  .pp-scene .club-scene { height: 196px; }
  .club-item-icon { width: 34px; height: 34px; font-size: 17px; }
  .club-item { padding: 9px; gap: 8px; }
  .club-upgrade { font-size: 8px; padding: 0 6px; }
  .club-teaser-go { display: none; }
  .profile-identity { gap: 7px; }
  .profile-identity .profile-name { font-size: 20px; }
  .club-strip { gap: 8px; padding: 9px; }
  .club-strip-cta { padding: 0 10px; font-size: 9px; }
}

@media (max-width: 360px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand-text small { display: none; }
  .brand-text b { font-size: 13px; letter-spacing: 0.08em; }
  .hud-actions { gap: 4px; }
  .hud-actions .pill { height: 31px; padding: 0 7px; font-size: 12px; }
  .hud-actions .pill svg { width: 14px; height: 14px; }
  .avatar.tiny { width: 30px; height: 30px; font-size: 11px; }
  .club-upgrade { font-size: 7.5px; padding: 0 5px; }
  .profile-hero-scene .club-scene { height: 206px; }
  .club-avatar { width: 60px; height: 60px; }
  .club-avatar .avatar { width: 52px; height: 52px; }
  .club-avatar .avatar .avatar-emoji { font-size: 32px; }
}

/* ============================================================
   ПЕРСОНАЖ — ПОЛНОРОСТНАЯ ФИГУРА ВМЕСТО КОМНАТЫ
   ============================================================ */

.char-stage {
  position: relative;
  height: 330px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 226, 122, 0.32);
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 177, 84, 0.24), transparent 44%),
    radial-gradient(circle at 50% 108%, rgba(255, 61, 154, 0.16), transparent 54%),
    linear-gradient(160deg, #2b2b38 0%, #15151e 56%, #08080d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -40px 70px rgba(0, 0, 0, 0.38),
    0 14px 34px rgba(0, 0, 0, 0.4);
  isolation: isolate;
}
.char-stage.is-large { height: 340px; }

.profile-hero-scene .char-stage {
  height: 340px;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pp-scene .char-stage {
  height: 300px;
  border: 0;
  border-radius: 25px 25px 0 0;
  box-shadow: none;
}
.club-hero .char-stage {
  height: 330px;
  border-radius: 14px;
}

.char-rays {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 156%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from -10deg, rgba(255, 210, 150, 0.16) 0deg 6deg, transparent 6deg 20deg);
  opacity: 0.35;
  mix-blend-mode: soft-light;
  animation: charSpin 52s linear infinite;
}
@keyframes charSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.char-aura {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 74%;
  height: 74%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 183, 94, 0.32), rgba(255, 120, 40, 0.12) 42%, transparent 68%);
  pointer-events: none;
}

.char-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  border-top: 1px solid rgba(255, 190, 120, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 177, 84, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.52));
}
.char-floor::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 82%;
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 177, 84, 0.24), transparent 68%);
}

.char-podium {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  width: 64%;
  height: 13%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 183, 94, 0.34) 0%, rgba(255, 122, 61, 0.14) 46%, transparent 72%);
  box-shadow: none;
  filter: blur(6px);
  z-index: 1;
}

.char-figure {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  height: 95%;
  transform: translateX(-50%);
  z-index: 3;
  filter: drop-shadow(0 0 22px rgba(255, 158, 64, 0.16)) drop-shadow(0 20px 24px rgba(0, 0, 0, 0.5));
  animation: charBob 4.2s ease-in-out infinite;
}
.char-art {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}
@keyframes charBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}
.char-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: charBlink 5.4s infinite;
}
@keyframes charBlink {
  0%, 91%, 100% { transform: scaleY(1); }
  93%, 96% { transform: scaleY(0.08); }
}

.char-sparkles,
.char-suits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.char-sparkles i {
  position: absolute;
  font-style: normal;
  color: #fff7c2;
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 0 8px #ffe16a, 0 0 18px rgba(255, 225, 106, 0.8);
  animation: clubTwinkle 2.8s ease-in-out infinite;
}
.char-sparkles i:nth-child(1) { left: 9%; top: 24%; }
.char-sparkles i:nth-child(2) { left: 20%; top: 10%; animation-delay: 0.5s; font-size: 7px; }
.char-sparkles i:nth-child(3) { right: 18%; top: 15%; animation-delay: 1.1s; }
.char-sparkles i:nth-child(4) { right: 8%; top: 48%; animation-delay: 1.6s; font-size: 8px; }
.char-sparkles i:nth-child(5) { left: 42%; top: 5%; animation-delay: 2.1s; font-size: 7px; }

.char-suits i {
  position: absolute;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  opacity: 0.85;
  animation: charSuitFloat 4.6s ease-in-out infinite;
}
.char-suits i:nth-child(1) { left: 12%; top: 40%; color: #fff; text-shadow: 0 0 9px #fff, 0 0 20px rgba(255, 255, 255, 0.8); }
.char-suits i:nth-child(2) { right: 12%; top: 47%; color: #ff8ab5; text-shadow: 0 0 10px #ff3d9a, 0 0 22px rgba(255, 61, 154, 0.85); animation-delay: 0.9s; }
.char-suits i:nth-child(3) { left: 19%; top: 70%; color: #ffb45c; text-shadow: 0 0 10px #ff7a1f, 0 0 22px rgba(255, 122, 31, 0.8); animation-delay: 1.8s; }
.char-suits i:nth-child(4) { right: 18%; top: 72%; color: #e2c7ff; text-shadow: 0 0 10px #a25cff, 0 0 22px rgba(162, 92, 255, 0.85); animation-delay: 2.6s; }
.char-stage .char-suits { opacity: 0.55; }
@keyframes charSuitFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.5; }
  50% { transform: translateY(-8px) rotate(8deg); opacity: 1; }
}

.club-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 15px 4px 8px;
}
.club-section-head b { font-size: 13px; color: #fff; }
.club-section-head span { font-size: 9.5px; color: rgba(255, 255, 255, 0.55); }

@media (max-width: 380px) {
  .char-stage,
  .char-stage.is-large,
  .club-hero .char-stage { height: 292px; }
  .profile-hero-scene .char-stage { height: 306px; }
  .pp-scene .char-stage { height: 264px; }
  .char-suits i { font-size: 14px; }
}

@media (max-width: 360px) {
  .profile-hero-scene .char-stage { height: 286px; }
  .pp-scene .char-stage { height: 248px; }
}

/* ============================================================
   КОЗЫРНАЯ КАРТА ИГРОКА
   ============================================================ */

.profile-card-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 190, 80, 0.16), transparent 46%),
    radial-gradient(circle at 50% 112%, rgba(255, 61, 154, 0.14), transparent 56%),
    linear-gradient(160deg, #24242f, #0a0a10 72%);
}
.profile-card-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from -10deg, rgba(255, 210, 150, 0.15) 0deg 6deg, transparent 6deg 20deg);
  opacity: 0.28;
  mix-blend-mode: soft-light;
  animation: charSpin 60s linear infinite;
  pointer-events: none;
}
.profile-card-stage::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6%;
  width: 72%; height: 16%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 190, 80, 0.2), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.profile-card-aura {
  position: absolute;
  left: 50%; top: 50%;
  width: 82%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 80, 0.18), transparent 62%);
  filter: blur(14px);
  pointer-events: none;
}
.profile-card-stage .player-card {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(94%, 300px);
  animation: cardFloat 5.5s ease-in-out infinite;
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-7px) rotate(0.5deg); }
}

.player-card {
  --frame-a: #6b3f1d;
  --frame-b: #b9783b;
  --frame-c: #f2c37f;
  --frame-glow: rgba(185, 120, 59, 0.38);
  --card-accent: #ffd28a;
  --dna-accent: #ffd95e;
  --dna-glow: rgba(255, 215, 90, 0.22);
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 5 / 7;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--frame-a) 0%, var(--frame-b) 22%, var(--frame-c) 47%, var(--frame-b) 72%, var(--frame-a) 100%);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.55),
    0 0 3px rgba(255, 255, 255, 0.35),
    0 0 34px var(--frame-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  isolation: isolate;
}
.player-card::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 6;
}
.pc-frame-glow {
  position: absolute;
  inset: -18px;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 50%, var(--frame-glow), transparent 68%);
  filter: blur(12px);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}
.pc-dna-glow {
  position: absolute;
  inset: -24px;
  border-radius: 36px;
  background: radial-gradient(ellipse at 50% 58%, var(--dna-glow), transparent 66%);
  filter: blur(16px);
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
}

.card-frame-1 { --frame-a: #6b3f1d; --frame-b: #b9783b; --frame-c: #f2c37f; --frame-glow: rgba(185, 120, 59, 0.38); }
.card-frame-2 { --frame-a: #5b6470; --frame-b: #aab6c2; --frame-c: #f2f6fa; --frame-glow: rgba(200, 215, 230, 0.38); }
.card-frame-3 { --frame-a: #8a5c05; --frame-b: #d8a62a; --frame-c: #fff0a8; --frame-glow: rgba(255, 210, 80, 0.45); }
.card-frame-4 { --frame-a: #0c5566; --frame-b: #45c7e8; --frame-c: #e6ffff; --frame-glow: rgba(90, 230, 255, 0.48); }
.card-frame-5 { --frame-a: #1a1230; --frame-b: #7b4b12; --frame-c: #ffd95e; --frame-glow: rgba(255, 200, 60, 0.6); }

.card-bg-1 { --card-bg: radial-gradient(circle at 50% 28%, #1d5a44, #07150f 72%); --card-accent: #7dffc0; }
.card-bg-2 { --card-bg: radial-gradient(circle at 50% 28%, #542070, #0d0618 72%); --card-accent: #d6a4ff; }
.card-bg-3 { --card-bg: radial-gradient(circle at 50% 28%, #7a1d4e, #170512 72%); --card-accent: #ffa4cf; }
.card-bg-4 { --card-bg: radial-gradient(circle at 50% 28%, #174a8a, #040817 72%); --card-accent: #7de8ff; }
.card-bg-5 { --card-bg: radial-gradient(circle at 50% 28%, #3a1a6a, #08040f 72%); --card-accent: #ffe27a; }

/* цветовые палитры — игрок выбирает сам */
.card-palette-gold {
  --frame-a: #6b4705;
  --frame-b: #c9971a;
  --frame-c: #fff0a8;
  --frame-glow: rgba(255, 210, 80, 0.58);
  --card-bg: radial-gradient(circle at 50% 28%, #5a4308, #120c02 72%);
  --card-accent: #ffe27a;
}
.card-palette-emerald {
  --frame-a: #0d4f3c;
  --frame-b: #2fb985;
  --frame-c: #a6ffd9;
  --frame-glow: rgba(90, 255, 180, 0.4);
  --card-bg: radial-gradient(circle at 50% 28%, #0f5a42, #04110c 72%);
  --card-accent: #7dffc0;
}
.card-palette-ruby {
  --frame-a: #5a0f24;
  --frame-b: #c22d55;
  --frame-c: #ffb4c8;
  --frame-glow: rgba(255, 90, 130, 0.42);
  --card-bg: radial-gradient(circle at 50% 28%, #6b102c, #12040a 72%);
  --card-accent: #ff9ab8;
}
.card-palette-sapphire {
  --frame-a: #0c3a6b;
  --frame-b: #2b8ed8;
  --frame-c: #c9f2ff;
  --frame-glow: rgba(90, 190, 255, 0.44);
  --card-bg: radial-gradient(circle at 50% 28%, #0d4a86, #030a16 72%);
  --card-accent: #7de8ff;
}
.card-palette-neon {
  --frame-a: #2a0a4d;
  --frame-b: #ff3f9c;
  --frame-c: #7dffff;
  --frame-glow: rgba(255, 63, 156, 0.5);
  --card-bg: radial-gradient(circle at 50% 28%, #45118a, #080312 72%);
  --card-accent: #7dffff;
}
.card-palette-royal {
  --frame-a: #2a0f4d;
  --frame-b: #7b4b12;
  --frame-c: #ffe27a;
  --frame-glow: rgba(255, 200, 60, 0.58);
  --card-bg: radial-gradient(circle at 50% 28%, #3a1a6a, #07030f 72%);
  --card-accent: #ffe27a;
}
.card-palette-mono {
  --frame-a: #252a32;
  --frame-b: #8b95a3;
  --frame-c: #eef2f7;
  --frame-glow: rgba(210, 225, 240, 0.35);
  --card-bg: radial-gradient(circle at 50% 28%, #343943, #0b0d11 72%);
  --card-accent: #eef2f7;
}
.card-palette-gold .pc-holo,
.card-palette-royal .pc-holo {
  background: linear-gradient(115deg, rgba(255, 230, 140, 0.52), rgba(255, 255, 255, 0.2), rgba(255, 170, 40, 0.48));
}
.card-palette-emerald .pc-holo {
  background: linear-gradient(115deg, rgba(120, 255, 190, 0.45), rgba(220, 255, 245, 0.2), rgba(20, 180, 110, 0.42));
}
.card-palette-ruby .pc-holo {
  background: linear-gradient(115deg, rgba(255, 120, 160, 0.48), rgba(255, 235, 240, 0.2), rgba(190, 20, 70, 0.44));
}
.card-palette-sapphire .pc-holo {
  background: linear-gradient(115deg, rgba(120, 220, 255, 0.48), rgba(235, 250, 255, 0.2), rgba(30, 110, 220, 0.44));
}
.card-palette-neon .pc-holo {
  background: linear-gradient(115deg, rgba(255, 80, 190, 0.5), rgba(125, 255, 255, 0.42), rgba(150, 60, 255, 0.46));
}
.card-palette-mono .pc-holo {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(190, 205, 220, 0.2), rgba(255, 255, 255, 0.32));
}
.card-pattern-none .pc-dna-pattern { display: none; }

.pc-inner {
  position: relative;
  height: 100%;
  padding: 12px 13px 10px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--card-bg, radial-gradient(circle at 50% 28%, #1d5a44, #07150f 72%));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 44px rgba(0, 0, 0, 0.55);
}
.pc-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 44%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px);
  pointer-events: none;
  z-index: 0;
}
.pc-inner > :not(.pc-watermark):not(.pc-holo):not(.pc-shine) {
  position: relative;
  z-index: 1;
}
.pc-watermark {
  position: absolute;
  right: -26px;
  top: 31%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 150px;
  line-height: 1;
  color: var(--card-accent);
  opacity: 0.07;
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: 0;
}
.pc-dna-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
}
.card-bg-1 .pc-dna-pattern { opacity: 0.1; }
.card-bg-2 .pc-dna-pattern { opacity: 0.14; }
.card-bg-3 .pc-dna-pattern { opacity: 0.18; }
.card-bg-4 .pc-dna-pattern { opacity: 0.22; }
.card-bg-5 .pc-dna-pattern { opacity: 0.26; }
.card-pattern-lines .pc-dna-pattern {
  background: repeating-linear-gradient(118deg, transparent 0 16px, var(--dna-accent) 16px 17px);
}
.card-pattern-hex .pc-dna-pattern {
  background:
    repeating-linear-gradient(60deg, var(--dna-accent) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-60deg, var(--dna-accent) 0 1px, transparent 1px 18px);
}
.card-pattern-dots .pc-dna-pattern {
  background-image: radial-gradient(circle, var(--dna-accent) 0 1.2px, transparent 1.5px);
  background-size: 20px 20px;
}
.card-pattern-waves .pc-dna-pattern {
  background: repeating-radial-gradient(circle at 50% 118%, transparent 0 16px, var(--dna-accent) 16px 17px);
}
.card-pattern-stars .pc-dna-pattern {
  background-image:
    radial-gradient(circle, var(--dna-accent) 0 1.5px, transparent 1.8px),
    radial-gradient(circle, var(--dna-accent) 0 1px, transparent 1.3px);
  background-size: 34px 34px, 19px 19px;
  background-position: 0 0, 9px 9px;
}
.card-pattern-chevron .pc-dna-pattern {
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, var(--dna-accent) 13px 15px),
    repeating-linear-gradient(45deg, transparent 0 13px, var(--dna-accent) 13px 15px);
}

.pc-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.pc-brand {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #fff;
}
.pc-brand[hidden] { display: none; }
.pc-top.is-brandless { justify-content: flex-end; }
.pc-rarity {
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--frame-c);
  background: rgba(0, 0, 0, 0.3);
  color: var(--frame-c);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.pc-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--dna-accent);
  background: rgba(0, 0, 0, 0.32);
  color: var(--dna-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.pc-sigil.is-red { color: #ff8aa8; border-color: rgba(255, 138, 168, 0.72); }

.pc-emblem {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 6px 0 2px;
  display: grid;
  place-items: center;
}
.pc-avatar-wrap {
  width: 80px;
  height: 80px;
  padding: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--frame-b), var(--frame-c));
  box-shadow: 0 0 24px var(--frame-glow);
}
.pc-ava {
  width: 74px !important;
  height: 74px !important;
  border: 0 !important;
  font-size: 28px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.pc-ava .avatar-emoji { font-size: 44px; }
.pc-emblem-ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px dashed var(--dna-accent);
  opacity: 0.55;
  pointer-events: none;
}
.pc-emblem-mark {
  position: absolute;
  top: -14px;
  right: -2px;
  z-index: 2;
  font-size: 22px;
  line-height: 1;
  color: var(--frame-c);
  text-shadow: 0 0 14px var(--frame-glow);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.pc-emblem-2 { font-size: 24px; }
.pc-emblem-3 { font-size: 25px; }

.pc-name {
  margin-top: 2px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.player-card.has-long-name .pc-name {
  flex: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.14;
  max-height: 2.35em;
}
.player-card.has-long-name .pc-stats { margin-top: 6px; padding-top: 6px; padding-bottom: 6px; }
.player-card.has-long-name .pc-badges { margin-top: 5px; min-height: 24px; }
@media (max-width: 340px) {
  .player-card.has-long-name .pc-name {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.pc-title {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  color: var(--dna-accent, var(--card-accent));
}
.pc-title svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.pc-rank {
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.72);
}
.pc-rank span { color: var(--frame-c); font-weight: 700; }

.pc-stats {
  width: 100%;
  margin-top: 9px;
  padding: 7px 4px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
}
.pc-stats b {
  display: block;
  font-size: 13px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pc-stats span {
  display: block;
  margin-top: 1px;
  font-size: 6.5px;
  color: rgba(255, 255, 255, 0.48);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pc-badges {
  min-height: 28px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pc-badges .badge-medal { width: 26px; height: 26px; }
.pc-badges .badge-medal-icon { font-size: 13px; }
.pc-badges .badge-medal-lock { display: none; }
.pc-no-badges {
  font-size: 7.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
}
.pc-foot {
  width: 100%;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 7px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}
.pc-number { color: var(--dna-accent, var(--frame-c)); opacity: 0.9; }
.pc-place { color: rgba(255, 255, 255, 0.55); }

.pc-records {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 7px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.pc-record {
  padding: 6px 3px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
}
.pc-record > span:first-child {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  line-height: 1;
}
.pc-record b {
  display: block;
  font-size: 13px;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pc-record > span:last-child {
  display: block;
  margin-top: 1px;
  font-size: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.pc-records-label {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  font-size: 6px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.38);
}

.pc-holo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, rgba(255, 0, 128, 0.45), rgba(0, 255, 255, 0.4), rgba(255, 255, 0, 0.38), rgba(128, 0, 255, 0.45));
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  animation: pcHolo 9s ease-in-out infinite;
  transition: opacity 0.3s;
}
.card-holo-1 .pc-holo { opacity: 0.12; }
.card-holo-2 .pc-holo { opacity: 0.22; }
.card-holo-3 .pc-holo { opacity: 0.34; }
@keyframes pcHolo {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.pc-shine {
  position: absolute;
  top: -60%;
  left: -80%;
  width: 60%;
  height: 220%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(24deg);
  animation: pcShine 7s ease-in-out infinite;
  opacity: 0.55;
}
@keyframes pcShine {
  0%, 55% { left: -80%; }
  75%, 100% { left: 135%; }
}
.card-holo-3 .pc-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.6px);
  background-size: 38px 38px;
  opacity: 0.16;
  animation: pcStars 16s linear infinite;
}
@keyframes pcStars {
  to { background-position: 76px 76px; }
}
.card-frame-5 .pc-inner { border-color: rgba(255, 220, 120, 0.45); }

.club-teaser-icon.card-mini {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--frame-c);
  background: linear-gradient(145deg, var(--frame-a), var(--frame-b) 42%, var(--frame-c));
  color: #2a1600;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  box-shadow: 0 0 16px var(--frame-glow);
}
.card-mini span { display: block; transform: rotate(-8deg); }

.card-workshop {
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 213, 90, 0.3);
  background:
    linear-gradient(180deg, rgba(162, 44, 255, 0.18), rgba(255, 61, 154, 0.06)),
    #130a26;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.card-preview-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 12px 26px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 190, 80, 0.16), transparent 48%),
    linear-gradient(160deg, #24242f, #0a0a10);
}
.card-preview-stage .player-card {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(92%, 280px);
}
.card-workshop .club-hero-info { padding: 12px 4px 2px; }
.card-dna-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.62);
}
.card-dna-row .pc-sigil { flex: none; }
.card-dna-serial {
  margin-left: auto;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--dna-accent, #ffd95e);
  white-space: nowrap;
}

.card-style { margin-top: 4px; }
.style-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.style-preset {
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 213, 90, 0.22);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 700;
}
.style-preset.is-active {
  border-color: #fff3bd;
  background: linear-gradient(135deg, #fff3bd, #ffbf28);
  color: #2a1600;
  box-shadow: 0 5px 14px rgba(255, 191, 40, 0.24);
}
.style-row { margin-top: 10px; }
.style-brand-row { margin-top: 12px; }
.style-brand-edit { display: flex; align-items: center; gap: 6px; }
.style-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.style-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.style-input:focus {
  outline: none;
  border-color: rgba(255, 213, 90, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 213, 90, 0.12);
}
.style-clear {
  flex: none;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
  font-weight: 700;
}
.style-clear:active { color: #2a1600; background: #ffe27a; }
.style-label {
  display: block;
  margin-bottom: 6px;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.style-options { display: flex; flex-wrap: wrap; gap: 6px; }
.style-palette {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.68);
  font-size: 8.5px;
}
.style-palette i {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--pc1), var(--pc2));
}
.style-palette.is-active,
.style-chip.is-active {
  border-color: #ffd95e;
  background: rgba(255, 213, 90, 0.16);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 213, 90, 0.14);
}
.style-chip {
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.68);
  font-size: 8.5px;
}
.style-accent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  font-size: 8px;
}
.style-accent i {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: var(--pc);
}
.style-accent.is-active {
  border-color: #ffd95e;
  color: #fff;
  background: rgba(255, 213, 90, 0.12);
}

.pp-cover.pp-card-cover {
  padding: 0;
  background: linear-gradient(180deg, #17101f, #0b1511 72%);
  text-align: center;
}
.pp-card-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 46px 18px 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 190, 80, 0.15), transparent 48%),
    linear-gradient(160deg, #24242f, #0a0a10);
}
.pp-card-stage .player-card { position: relative; z-index: 1; flex: none; width: min(94%, 270px); }
.pp-card-stage .pp-online-pill {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 6;
}

.profile-hero-body > .profile-avatar-btn {
  display: flex;
  margin: 12px auto 0;
}

.card-sticky {
  position: sticky;
  top: 54px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 213, 90, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(19, 10, 38, 0.98), rgba(19, 10, 38, 0.92));
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.mini-card {
  width: 40px;
  height: 56px;
  flex: none;
  padding: 2px;
  border-radius: 6px;
  position: relative;
  background: linear-gradient(145deg, var(--frame-a), var(--frame-b) 30%, var(--frame-c) 55%, var(--frame-b) 76%, var(--frame-a));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 12px var(--frame-glow);
}
.mini-card-inner {
  position: relative;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--card-bg);
}
.mini-card .pc-dna-pattern { z-index: 0; }
.mini-card .pc-holo { z-index: 1; }
.mini-card-avatar { position: relative; z-index: 2; width: 22px; height: 22px; }
.mini-card-avatar .avatar {
  width: 22px !important;
  height: 22px !important;
  font-size: 7px !important;
  border: 1px solid var(--frame-c) !important;
  box-shadow: none !important;
}
.mini-card-avatar .avatar-emoji { font-size: 13px !important; }
.mini-card-name {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding: 0 2px;
  font-size: 4px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-card-rarity {
  position: relative;
  z-index: 2;
  font-size: 3.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dna-accent);
}
.card-sticky-info { flex: 1; min-width: 0; text-align: left; }
.card-sticky-info b { display: block; font-size: 12px; color: #fff; }
.card-sticky-info span { display: block; margin-top: 2px; font-size: 8.5px; color: rgba(255, 255, 255, 0.55); }
.card-sticky-up {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255, 213, 90, 0.28);
  background: rgba(255, 255, 255, 0.05);
  color: #ffd95e;
  font-size: 14px;
}

.rank-card-sigil {
  width: 15px;
  height: 21px;
  flex: none;
  padding: 2px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  position: relative;
  background: linear-gradient(145deg, var(--frame-a), var(--frame-b) 32%, var(--frame-c) 56%, var(--frame-b) 78%, var(--frame-a));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 8px var(--frame-glow);
}
.rank-card-sigil::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  background: var(--card-bg);
}
.rank-card-sigil::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 6px;
  color: var(--dna-accent);
}
.rank-row .rank-card-sigil,
.player-line .rank-card-sigil,
.my-meta .rank-card-sigil { margin-right: 2px; }

.style-reset {
  width: 100%;
  height: 32px;
  margin-top: 8px;
  border-radius: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  font-weight: 700;
}
.style-reset:active { color: #2a1600; background: #ffe27a; border-style: solid; }
.style-palette.is-locked,
.style-preset.is-locked {
  opacity: 0.42;
  filter: grayscale(0.6);
}
.style-palette.is-locked::after,
.style-preset.is-locked::after {
  content: "🔒";
  margin-left: 2px;
  font-size: 8px;
}
.card-pins { margin-top: 4px; }
.card-pin-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  font-size: 8.5px;
}
.pin-badge-icon { font-size: 12px; line-height: 1; }
.pin-badge.is-active {
  border-color: #ffd95e;
  background: rgba(255, 213, 90, 0.16);
  color: #fff;
}
.pin-badge i { font-style: normal; font-size: 9px; color: #ffd95e; }
.card-pins-reset { margin-top: 8px; }

.live-board-head { margin-top: 16px; }
.training-head { margin-top: 18px; }
.live-empty {
  margin: 4px 0 0;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.025);
  font-size: 10px;
  line-height: 1.45;
  color: var(--muted-2);
  text-align: center;
}
.live-row .live-games {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 500;
  color: var(--muted-2);
}

@media (max-width: 430px) {
  .profile-card-stage { padding: 14px 8px 20px; }
  .profile-card-stage .player-card { width: min(96%, 284px); }
  .pp-card-stage { padding: 42px 8px 16px; }
  .pp-card-stage .player-card { width: min(96%, 270px); }
  .card-preview-stage .player-card { width: min(94%, 264px); }
  .pc-emblem { width: 82px; height: 82px; margin: 3px 0 0; }
  .pc-avatar-wrap { width: 68px; height: 68px; }
  .pc-ava { width: 62px !important; height: 62px !important; }
  .pc-ava .avatar-emoji { font-size: 36px; }
  .pc-name { font-size: 18px; }
  .pc-title { margin-top: 2px; font-size: 8px; }
  .pc-rank { margin-top: 4px; padding: 2px 7px; font-size: 8px; }
  .pc-stats { margin-top: 6px; padding: 6px 3px; }
  .pc-stats b { font-size: 12px; }
  .pc-stats span { font-size: 6px; }
  .pc-badges { min-height: 23px; margin-top: 5px; }
  .pc-badges .badge-medal { width: 23px; height: 23px; }
  .pc-badges .badge-medal-icon { font-size: 11px; }
  .pc-records { margin-top: 5px; gap: 4px; }
  .pc-record { padding: 5px 2px 4px; }
  .pc-record b { font-size: 12px; }
  .pc-record > span:first-child { font-size: 11px; }
  .pc-records-label { margin-top: 4px; font-size: 5.5px; }
  .pc-foot { padding-top: 5px; font-size: 6.5px; }
}

/* ---------- ������� ---------- */

body.admin-open { overflow: hidden; }
.admin-screen { position: fixed; inset: 0; z-index: 62; background: var(--bg); display: flex; justify-content: center; }
.admin-inner {
  width: 100%; max-width: 640px; height: 100dvh;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 50% 0%, rgba(35, 110, 80, 0.22), transparent 60%), var(--bg);
}
.admin-top { display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-top)) 14px 8px; flex: none; }
.admin-top .game-title { flex: 1; }
.admin-tabs { display: flex; gap: 4px; padding: 2px 12px 10px; overflow-x: auto; flex: none; }
.admin-tabs button {
  flex: 1; min-width: 78px; padding: 8px 6px;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03); color: var(--muted);
  font-size: 10.5px; font-weight: 700;
}
.admin-tabs button.is-active {
  color: var(--gold); border-color: rgba(239, 200, 127, 0.35);
  background: rgba(239, 200, 127, 0.1);
}
.admin-body { flex: 1; overflow-y: auto; padding: 4px 14px calc(40px + var(--safe-bottom)); }
.admin-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-card { padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.admin-card b { display: block; font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums; }
.admin-card span { display: block; margin-top: 2px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); }
.admin-updated { margin-top: 14px; text-align: center; font-size: 9.5px; color: var(--muted-2); }
.admin-user-list, .admin-cert-list, .admin-draw-list, .admin-winner-list { display: flex; flex-direction: column; gap: 6px; }
.admin-user {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px; border-radius: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
}
.admin-user-main { flex: 1; min-width: 0; }
.admin-user-main b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-main small, .admin-user-meta small { display: block; font-size: 9px; color: var(--muted-2); margin-top: 1px; }
.admin-user-meta { flex: none; text-align: right; }
.admin-user-meta b { display: block; font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.admin-banned { color: var(--red); font-size: 9px; font-weight: 700; }
.admin-search { display: flex; gap: 6px; margin-bottom: 10px; }
.admin-input {
  flex: 1; width: 100%; min-width: 0;
  padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-size: 13px;
}
.admin-label { display: block; margin: 10px 0 4px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.admin-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-cert-issue { display: flex; gap: 6px; margin-top: 12px; }
.admin-cert-issue .admin-input { max-width: 110px; }
.admin-cert { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.admin-cert-main { flex: 1; min-width: 0; }
.admin-cert-main code { display: block; font-size: 11px; color: var(--gold); }
.admin-cert-main small { display: block; margin-top: 1px; font-size: 8.5px; color: var(--muted-2); }
.admin-status { flex: none; font-size: 9px; font-weight: 700; }
.admin-status.is-ok { color: var(--green); }
.admin-status.is-muted { color: var(--muted-2); }
.admin-draw-actions { display: flex; gap: 6px; margin-bottom: 12px; }
.admin-draw-actions .btn { flex: 1; }
.admin-draw, .admin-winner { padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.admin-draw b, .admin-winner b { display: block; font-size: 12px; }
.admin-draw span, .admin-winner span { display: block; margin-top: 2px; font-size: 9px; color: var(--muted-2); }
.admin-loading, .admin-empty { padding: 40px 10px; text-align: center; font-size: 12px; color: var(--muted-2); }
.admin-entry {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 12px; padding: 12px; border-radius: 16px; text-align: left;
  border: 1px solid rgba(239, 200, 127, 0.3);
  background: linear-gradient(135deg, rgba(239, 200, 127, 0.12), rgba(255, 255, 255, 0.02));
}
.admin-entry-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--gold); background: rgba(239, 200, 127, 0.14); }
.admin-entry-icon svg { width: 18px; height: 18px; }
.admin-entry-main { flex: 1; min-width: 0; }
.admin-entry-main b { display: block; font-size: 13px; color: var(--gold); }
.admin-entry-main small { display: block; margin-top: 2px; font-size: 9.5px; line-height: 1.3; color: var(--muted-2); }
.admin-entry-chev { width: 16px; height: 16px; flex: none; color: var(--muted-2); }