/* ================= WOWO — стиль ================= */
:root {
  --bg: #0a0910;
  --surface: rgba(255, 255, 255, .055);
  --surface-2: rgba(255, 255, 255, .09);
  --stroke: rgba(255, 255, 255, .09);
  --text: #f6f3ff;
  --muted: #a39dba;
  --dim: #6f6987;
  --hot: #ff3d6e;
  --orange: #ff8a3d;
  --violet: #8b5cf6;
  --green: #34d399;
  --gold: #ffcf5c;
  --silver: #d9dfea;
  --bronze: #e8a26e;
  --grad: linear-gradient(135deg, #ff3d6e 0%, #ff8a3d 100%);
  --grad-violet: linear-gradient(135deg, #8b5cf6 0%, #ff3d6e 100%);
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --safe-top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Unbounded", "Manrope", -apple-system, sans-serif;
}

/* ---------- темы: девушки / парни / мог-батл ---------- */
body[data-theme="f"] {
  --bg: #14080f; --hot: #ff3d8b; --orange: #ff8ac4; --on-accent: #fff;
  --grad: linear-gradient(135deg, #ff3d8b 0%, #ff8ac4 100%);
  --blob1: #ff3d8b; --blob2: #c026d3; --blob3: #ff8ac4;
}
body[data-theme="m"] {
  --bg: #070b16; --hot: #2f6bff; --orange: #38d0ff; --on-accent: #fff;
  --grad: linear-gradient(135deg, #2f6bff 0%, #38d0ff 100%);
  --blob1: #2f6bff; --blob2: #6366f1; --blob3: #38d0ff;
}
body[data-theme="mog"] {
  --bg: #07080a; --hot: #b6ff3b; --orange: #8b5cf6; --on-accent: #0b0d05;
  --grad: linear-gradient(135deg, #b6ff3b 0%, #6dff9a 100%);
  --blob1: #8b5cf6; --blob2: #b6ff3b; --blob3: #6d28d9;
  --lime: #b6ff3b; --violet: #8b5cf6;
}
.ring-grid {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}
body[data-theme="mog"] .ring-grid { opacity: 1; }
body[data-theme="mog"] .b2 { opacity: .16; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); transition: background-color .7s ease; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
img { display: block; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* ---------- живой фон ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 18s ease-in-out infinite alternate;
  transition: background-color .8s ease; }
.b1 { width: 360px; height: 360px; background: var(--blob1); top: -160px; left: -120px; opacity: .32; }
.b2 { width: 320px; height: 320px; background: var(--blob2); top: 30%; right: -170px; opacity: .3; animation-delay: -6s; }
.b3 { width: 300px; height: 300px; background: var(--blob3); bottom: -180px; left: 10%; opacity: .2; animation-delay: -12s; }
@keyframes drift { to { transform: translate(40px, 50px) scale(1.15); } }
.grain {
  position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- шапка ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + var(--safe-top)) 18px 6px;
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo-bolt {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad); font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--on-accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--hot) 45%, transparent);
}
.logo-text { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .06em; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 58%;
  padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--stroke);
  font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.view { padding: 8px 16px calc(104px + var(--safe-bottom)); min-height: calc(100vh - 60px); }
.screen { animation: screenIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }

h1, h2, h3 { margin: 0; }
.h1 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; }
.h1 .grad, .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- переключатели ---------- */
.seg {
  position: relative; display: flex; padding: 4px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--stroke);
}
.seg button {
  position: relative; z-index: 1; flex: 1; padding: 9px 6px; border-radius: 12px;
  font-weight: 700; font-size: 14px; color: var(--muted); transition: color .25s;
}
.seg button.on { color: var(--on-accent); }
.seg-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 12px;
  background: var(--grad); box-shadow: 0 6px 18px color-mix(in srgb, var(--hot) 35%, transparent);
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1);
}
.seg.small button { padding: 7px 4px; font-size: 13px; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--stroke); color: var(--muted); transition: all .2s;
}
.chips button.on { color: #fff; background: color-mix(in srgb, var(--hot) 16%, transparent); border-color: color-mix(in srgb, var(--hot) 55%, transparent); }

/* ---------- дуэль ---------- */
.duel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 14px 2px 16px; }
.counter {
  flex: none; text-align: center; padding: 8px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--stroke);
}
.counter b { display: block; font-family: var(--display); font-size: 18px; line-height: 1.1; }
.counter span { font-size: 11px; color: var(--muted); font-weight: 600; }

.arena { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card {
  position: relative; margin: 0; height: clamp(250px, calc(100svh - 372px), 540px); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(110deg, #17151f 30%, #221f2d 50%, #17151f 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite, cardIn .5s cubic-bezier(.2, .9, .3, 1.2) both;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .35s, filter .35s;
  cursor: pointer;
}
.card:nth-child(3) { animation-delay: 0s, .07s; }
.card.loaded { animation: cardIn .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.card:active { transform: scale(.97); }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.card img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.card.loaded img { opacity: 1; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.shade { position: absolute; inset: auto 0 0 0; height: 48%; background: linear-gradient(transparent, rgba(8, 6, 14, .92)); }
.meta { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.meta b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta span { display: block; font-size: 12px; color: rgba(255, 255, 255, .72); font-weight: 600; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flag {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(10, 9, 16, .45); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); color: rgba(255, 255, 255, .8); z-index: 3;
}
.flag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.vs {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; display: grid; place-items: center; background: var(--bg);
  font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .02em;
  box-shadow: 0 0 0 5px var(--bg), 0 10px 30px rgba(0, 0, 0, .6); transition: transform .35s, opacity .3s;
}
.vs::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.vs span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* результат голоса */
.arena.voted .vs { transform: scale(0); opacity: 0; }
.card.win { transform: scale(1.03); z-index: 2; box-shadow: 0 0 0 3px var(--hot), 0 18px 50px color-mix(in srgb, var(--hot) 55%, transparent); }
.card.lose { transform: scale(.95); filter: grayscale(.85) brightness(.55); }
.card.out { animation: cardOut .32s ease-in forwards; }
@keyframes cardOut { to { opacity: 0; transform: translateY(-14px) scale(.95); } }
.crown {
  position: absolute; z-index: 3; top: 12px; left: 12px; font-size: 30px; opacity: 0;
  transform: translateY(8px) scale(.4) rotate(-20deg); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.card.win .crown { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }
.delta {
  position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, 0);
  padding: 6px 12px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 20px;
  opacity: 0; white-space: nowrap;
}
.card.win .delta { background: var(--grad); color: var(--on-accent); animation: floatUp .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.card.lose .delta { background: rgba(255, 255, 255, .14); color: #fff; animation: floatUp .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.6); }
  30% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
}
.meta .rt { display: none; margin-top: 4px; font-size: 12px; font-weight: 800; color: #fff; }
.voted .meta .rt { display: inline-flex; gap: 4px; align-items: center; }

.duel-foot { display: flex; justify-content: center; margin-top: 18px; }
.hint {
  display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--stroke); color: var(--muted); font-size: 13px; font-weight: 600;
}
.hint b { color: var(--text); }

/* ---------- топ ---------- */
.top-controls { display: grid; gap: 10px; margin: 12px 0 6px; }
.ends { display: flex; align-items: center; gap: 8px; margin: 14px 2px 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.ends .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }
.ends b { color: var(--text); }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 22px 0 16px; }
.pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; animation: cardIn .5s both; }
.pod:nth-child(1) { animation-delay: .08s; }
.pod:nth-child(3) { animation-delay: .16s; }
.pod-ava { position: relative; width: 74px; height: 74px; border-radius: 50%; padding: 3px; background: var(--c); }
.pod.p1 .pod-ava { width: 96px; height: 96px; box-shadow: 0 0 40px rgba(255, 207, 92, .35); }
.pod-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); background: #1a1824; }
.pod-crown { position: absolute; top: -24px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 28px; }
.pod-num {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: #1b1407; font-weight: 800; font-size: 13px;
  border: 3px solid var(--bg);
}
.pod-name { margin-top: 14px; font-weight: 800; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-city { font-size: 11px; color: var(--muted); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--c); }
.pod-base {
  width: 100%; margin-top: 10px; border-radius: 16px 16px 6px 6px; height: var(--h);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, transparent), rgba(255, 255, 255, .02));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-bottom: 0;
}
.pod.p1 { --c: var(--gold); --h: 64px; }
.pod.p2 { --c: var(--silver); --h: 44px; }
.pod.p3 { --c: var(--bronze); --h: 30px; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--stroke); animation: cardIn .4s both;
}
.row.me { background: color-mix(in srgb, var(--hot) 12%, transparent); border-color: color-mix(in srgb, var(--hot) 45%, transparent); }
.row-rank { width: 28px; text-align: center; font-family: var(--display); font-weight: 800; color: var(--muted); font-size: 14px; }
.row img { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; background: #1a1824; }
.row-main { flex: 1; min-width: 0; }
.row-main b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-score { text-align: right; }
.row-score b { display: block; font-family: var(--display); font-weight: 800; font-size: 15px; }
.row-score span { font-size: 11px; color: var(--muted); font-weight: 700; }
.you-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--grad); font-size: 10px; font-weight: 800; color: var(--on-accent); vertical-align: 2px; }

/* ---------- профиль ---------- */
.hero { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 4.6; margin-top: 10px; background: #15131d; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .shade { height: 55%; }
.hero-meta { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.hero-meta h2 { font-family: var(--display); font-weight: 800; font-size: 26px; }
.hero-meta p { margin: 2px 0 0; color: rgba(255, 255, 255, .78); font-weight: 600; }
.pill {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(10, 9, 16, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pill.wait i { background: var(--gold); }
.pill.bad i { background: var(--hot); }
.big-rating { position: absolute; top: 14px; right: 14px; text-align: right; padding: 8px 12px; border-radius: 16px; background: rgba(10, 9, 16, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.big-rating b { display: block; font-family: var(--display); font-size: 22px; line-height: 1; }
.big-rating span { font-size: 10px; color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.section-title { margin: 22px 2px 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { padding: 14px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); }
.stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.stat span { font-size: 12px; color: var(--muted); font-weight: 700; }
.stat.accent b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.place { position: relative; overflow: hidden; padding: 14px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); }
.place .ic { font-size: 18px; }
.place b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 22px; }
.place b.small { font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.3; margin-top: 8px; }
.place span { font-size: 12px; color: var(--muted); font-weight: 700; }
.place.gold { border-color: rgba(255, 207, 92, .5); background: rgba(255, 207, 92, .08); }

.premium {
  position: relative; margin-top: 22px; padding: 18px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(135deg, rgba(139, 92, 246, .22), color-mix(in srgb, var(--hot) 18%, transparent));
  border: 1px solid rgba(255, 255, 255, .14);
}
.premium::before { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px; border-radius: 50%; background: var(--grad); filter: blur(50px); opacity: .45; }
.premium h3 { position: relative; font-family: var(--display); font-size: 18px; font-weight: 800; }
.premium ul { position: relative; margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: rgba(255, 255, 255, .85); }
.soon { position: relative; display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-family: var(--font); font-size: 11px; vertical-align: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 20px; border-radius: 16px;
  font-weight: 800; font-size: 15px; background: var(--grad); color: var(--on-accent); box-shadow: 0 10px 28px color-mix(in srgb, var(--hot) 35%, transparent);
  transition: transform .15s;
}
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--surface); border: 1px solid var(--stroke); box-shadow: none; }
.btn.danger { background: transparent; color: #ff6b8f; box-shadow: none; }
.btn.wide { width: 100%; }
.actions { display: grid; gap: 8px; margin-top: 16px; }

/* ---------- пустые состояния ---------- */
.empty { text-align: center; padding: 46px 18px 20px; }
.empty-art { position: relative; width: 120px; height: 120px; margin: 0 auto 20px; display: grid; place-items: center; font-size: 52px; border-radius: 36px; background: var(--surface); border: 1px solid var(--stroke); }
.empty-art::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: var(--grad); filter: blur(40px); opacity: .25; z-index: -1; }
.empty h2 { font-family: var(--display); font-weight: 800; font-size: 22px; }
.empty p { margin: 8px auto 20px; max-width: 300px; color: var(--muted); }
.steps { display: grid; gap: 10px; text-align: left; margin: 0 0 22px; }
.step { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); font-weight: 600; }
.step i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--grad); color: var(--on-accent); }

/* ---------- нижнее меню ---------- */
.tabs {
  position: fixed; z-index: 20; left: 14px; right: 14px; bottom: calc(12px + var(--safe-bottom));
  display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; border-radius: 24px;
  background: rgba(22, 20, 31, .72); border: 1px solid var(--stroke);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 18px; color: var(--dim); font-size: 11px; font-weight: 800; transition: all .25s; }
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: #fff; background: rgba(255, 255, 255, .07); }
.tab.active svg { stroke: var(--hot); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hot) 60%, transparent)); }

/* ---------- шторка и тост ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; padding: 10px 18px calc(18px + var(--safe-bottom));
  border-radius: 28px 28px 0 0; background: #15131d; border-top: 1px solid var(--stroke);
  transform: translateY(105%); visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1), visibility 0s .35s;
}
.sheet.open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); margin: 0 auto 14px; }
.sheet h3 { font-family: var(--display); font-size: 18px; }
.sheet p { margin: 4px 0 14px; font-size: 14px; }
.sheet-list { display: grid; gap: 8px; margin-bottom: 10px; }
.sheet-list button { text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); font-weight: 700; }
.sheet-list button:active { background: var(--surface-2); }

.toast {
  position: fixed; z-index: 50; left: 50%; top: calc(16px + var(--safe-top)); transform: translate(-50%, -150%);
  padding: 12px 18px; border-radius: 16px; background: rgba(30, 27, 41, .95); border: 1px solid var(--stroke);
  font-weight: 700; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1);
  max-width: calc(100% - 32px); text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

.loader { display: grid; place-items: center; padding: 80px 0; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--hot); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 560px) {
  .view, .topbar { max-width: 520px; margin-left: auto; margin-right: auto; }
  .tabs { max-width: 420px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =================================================================
   МОГ-БАТЛ
   ================================================================= */
.tabs { grid-template-columns: repeat(4, 1fr); }
.mog-title { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.01em; margin-top: 6px; }
.mog-title .lime { color: var(--lime, var(--hot)); text-shadow: -2px 0 rgba(255, 61, 139, .55), 2px 0 rgba(56, 208, 255, .55); }
.glitch { position: relative; display: inline-block; color: var(--lime, var(--hot)); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .7; }
.glitch::before { color: #ff3d8b; transform: translate(-3px, 0); clip-path: inset(0 0 55% 0); animation: glitch 2.6s infinite steps(1); }
.glitch::after { color: #38d0ff; transform: translate(3px, 0); clip-path: inset(50% 0 0 0); animation: glitch 2.1s infinite steps(1) reverse; }
@keyframes glitch { 0%, 88%, 100% { transform: translate(0); } 90% { transform: translate(-4px, 1px); } 94% { transform: translate(4px, -1px); } }

.panel {
  position: relative; margin-top: 14px; padding: 16px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, rgba(139, 92, 246, .16), rgba(182, 255, 59, .06));
  border: 1px solid rgba(182, 255, 59, .22);
}
.panel .chips { margin: 0 0 12px; padding: 0; }
.btn.huge { width: 100%; padding: 18px; font-size: 17px; font-family: var(--display); letter-spacing: .02em; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(182, 255, 59, .6), 0 12px 40px rgba(182, 255, 59, .28); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 1px rgba(182, 255, 59, .8), 0 12px 54px rgba(182, 255, 59, .45); } }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.btn.small { padding: 12px 14px; font-size: 14px; border-radius: 14px; }

.banner {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(182, 255, 59, .1); border: 1px solid rgba(182, 255, 59, .45); cursor: pointer; animation: cardIn .4s both;
}
.banner .pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime, var(--hot)); box-shadow: 0 0 0 0 rgba(182, 255, 59, .6); animation: pulseLime 1.6s infinite; }
@keyframes pulseLime { 70% { box-shadow: 0 0 0 10px rgba(182, 255, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(182, 255, 59, 0); } }
.banner b { display: block; font-weight: 800; }
.banner span { font-size: 12px; color: var(--muted); font-weight: 600; }
.banner .go { margin-left: auto; font-weight: 800; color: var(--lime, var(--hot)); white-space: nowrap; }
.banner.wait { background: rgba(139, 92, 246, .12); border-color: rgba(139, 92, 246, .5); }
.banner.wait .pulse { background: var(--violet, #8b5cf6); }

.lobby-tools { display: grid; gap: 10px; margin: 16px 0 10px; }
.lobby-tools .row2 { display: flex; gap: 8px; align-items: center; }
.lobby-tools .row2 .seg { flex: 1; }
.random-btn { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px;
  background: var(--surface); border: 1px solid var(--stroke); }

.rooms { display: grid; gap: 10px; }
.room-card {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--stroke); cursor: pointer; animation: cardIn .4s both; transition: transform .15s;
}
.room-card:active { transform: scale(.98); }
.room-card.mine { border-color: rgba(182, 255, 59, .6); background: rgba(182, 255, 59, .08); }
.room-card.hot { border-color: rgba(255, 120, 60, .5); }
.duo { position: relative; flex: none; width: 92px; height: 58px; }
.duo img { position: absolute; top: 0; width: 58px; height: 58px; border-radius: 16px; object-fit: cover; border: 2px solid var(--bg); background: #1a1824; }
.duo img:first-child { left: 0; transform: rotate(-6deg); }
.duo img:last-child { right: 0; transform: rotate(6deg); }
.duo i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; font-style: normal; font-family: var(--display);
  font-weight: 800; font-size: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--lime, var(--hot)); border: 1.5px solid var(--lime, var(--hot)); }
.room-main { flex: 1; min-width: 0; }
.room-main b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-main .sub2 { display: block; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-meta { display: flex; gap: 10px; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--text); }
.room-meta .t { color: var(--lime, var(--hot)); font-variant-numeric: tabular-nums; }
.tag { position: absolute; top: -7px; right: 10px; padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.tag.hot { background: linear-gradient(135deg, #ff8a3d, #ff3d6e); color: #fff; }
.tag.mine { background: var(--lime, var(--hot)); color: #0b0d05; }
.tag.done { background: rgba(255, 255, 255, .14); color: var(--text); }

/* поиск соперника */
.radar { position: relative; width: 240px; height: 240px; margin: 36px auto 22px; display: grid; place-items: center; }
.radar::before, .radar::after, .radar .r3 { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(182, 255, 59, .5); animation: ripple 2.4s ease-out infinite; }
.radar::after { animation-delay: .8s; }
.radar .r3 { animation-delay: 1.6s; }
@keyframes ripple { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.radar .sweep { position: absolute; inset: 10px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(182, 255, 59, .35), transparent 30%); animation: spin 2s linear infinite; }
.radar img { position: relative; z-index: 2; width: 116px; height: 116px; border-radius: 50%; object-fit: cover; border: 4px solid var(--lime, var(--hot)); box-shadow: 0 0 40px rgba(182, 255, 59, .45); }
.radar .q { position: absolute; z-index: 3; right: 18px; bottom: 26px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #15131d; border: 2px dashed rgba(255, 255, 255, .35); font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--muted); animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.center { text-align: center; }
.big-clock { font-family: var(--display); font-weight: 800; font-size: 34px; font-variant-numeric: tabular-nums; }

/* комната */
.room-top { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.back { flex: none; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--stroke); font-weight: 800; font-size: 13px; }
.timer { flex: 1; }
.timer b { display: block; text-align: center; font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; color: var(--lime, var(--hot)); }
.timer .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); margin-top: 4px; overflow: hidden; }
.timer .bar i { display: block; height: 100%; background: var(--grad); transition: width 1s linear; }
.viewers { flex: none; height: 38px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--stroke); font-weight: 800; font-size: 13px; }
.viewers i { width: 7px; height: 7px; border-radius: 50%; background: #ff3d6e; animation: pulse 1.6s infinite; }

.arena.mog .card { height: clamp(220px, calc(100svh - 520px), 420px); }
.arena.mog .card.win { box-shadow: 0 0 0 3px var(--lime, var(--hot)), 0 18px 50px rgba(182, 255, 59, .4); }
.score { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.score > div { text-align: center; }
.score b { font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; transition: color .3s; }
.score .lead b { color: var(--lime, var(--hot)); }
.score .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 4px; }
.score .bar i { display: block; height: 100%; background: var(--grad); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.room-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--stroke); font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.room-note b { color: var(--text); }
.room-note button { padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-weight: 800; font-size: 12px; color: var(--text); }

.reacts { display: flex; justify-content: space-between; gap: 6px; margin-top: 12px; }
.reacts button { flex: 1; height: 44px; border-radius: 14px; font-size: 22px; background: var(--surface); border: 1px solid var(--stroke); transition: transform .12s; }
.reacts button:active { transform: scale(.88); }
.fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.fly { position: absolute; bottom: 160px; font-size: 30px; animation: flyUp 2.4s ease-out forwards; }
@keyframes flyUp {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  12% { transform: translate(var(--dx1), -40px) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--dx2), -420px) scale(.9); opacity: 0; }
}

.chat { margin-top: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); overflow: hidden; }
.chat-list { height: 170px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.msg { font-size: 14px; line-height: 1.35; animation: msgIn .25s ease-out; word-wrap: break-word; cursor: pointer; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } }
.msg b { font-weight: 800; margin-right: 6px; color: var(--lime, var(--hot)); }
.msg.mine b { color: var(--violet, #8b5cf6); }
.chat-empty { margin: auto; font-size: 13px; color: var(--dim); font-weight: 600; }
.chat-form { display: flex; gap: 8px; padding: 8px; border-top: 1px solid var(--stroke); }
.chat-form input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, .3);
  color: var(--text); font: inherit; font-size: 14px; outline: none; user-select: text; -webkit-user-select: text; }
.chat-form input:focus { border-color: rgba(182, 255, 59, .6); }
.chat-form button { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: var(--on-accent); font-size: 18px; font-weight: 800; }
.chat-locked { padding: 12px; text-align: center; font-size: 12px; color: var(--dim); font-weight: 600; border-top: 1px solid var(--stroke); }

/* итог батла */
.result { text-align: center; padding-top: 6px; }
.result-title { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1; margin: 6px 0 4px; letter-spacing: -.01em; animation: slam .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes slam { from { transform: scale(2.4); opacity: 0; filter: blur(8px); } }
.result-sub { color: var(--muted); font-weight: 700; margin-bottom: 16px; }
.result-sub b { color: var(--text); }
.res-arena { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.res-p { position: relative; animation: cardIn .6s .2s both; }
.res-p img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; display: block; background: #15131d; }
.res-p.win img { box-shadow: 0 0 0 3px var(--lime, var(--hot)), 0 0 46px rgba(182, 255, 59, .5); }
.res-p.lose img { filter: grayscale(1) brightness(.5); transform: scale(.92); }
.res-p .crown2 { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 36px; animation: pop .5s .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.res-p .pct { font-family: var(--display); font-weight: 800; font-size: 30px; margin-top: 8px; }
.res-p.win .pct { color: var(--lime, var(--hot)); }
.res-p.lose .pct { color: var(--dim); }
.res-p .nm { font-weight: 800; }
.res-p .dl { font-size: 12px; font-weight: 800; color: var(--muted); }
.res-actions { display: grid; gap: 8px; margin-top: 18px; }

/* мог-топ и мог-статистика */
.mog-card {
  position: relative; margin-top: 22px; padding: 16px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(150deg, rgba(139, 92, 246, .22), rgba(182, 255, 59, .1)); border: 1px solid rgba(182, 255, 59, .28);
}
.mog-card h3 { font-family: var(--display); font-size: 18px; margin-bottom: 12px; }
.mog-card h3 em { font-style: normal; color: #b6ff3b; }
.mog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mog-stats div { padding: 12px 10px; border-radius: 14px; background: rgba(0, 0, 0, .25); }
.mog-stats b { display: block; font-family: var(--display); font-size: 20px; }
.mog-stats span { font-size: 11px; color: var(--muted); font-weight: 700; }
.mog-stats .lime b { color: #b6ff3b; }
.best { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); font-size: 13px; font-weight: 700; color: var(--muted); }
.best b { color: var(--text); }
.hist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); font-size: 13px; font-weight: 700; }
.hist img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.hist .res { margin-left: auto; text-align: right; white-space: nowrap; }
.hist .w { color: #b6ff3b; }
.hist .l { color: #ff6b8f; }
.hist .d { color: var(--muted); }

/* галерея */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gtile { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #15131d; border: 1px solid var(--stroke); cursor: pointer; animation: cardIn .35s both; }
.gtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gtile.pending img, .gtile.rejected img, .gtile.hidden img { filter: brightness(.5) saturate(.6); }
.gtile .badge { position: absolute; left: 6px; top: 6px; padding: 3px 7px; border-radius: 8px; font-size: 10px; font-weight: 800; background: rgba(10, 9, 16, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gtile .badge.main { background: var(--grad); color: var(--on-accent); }
.gtile .rt { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; font-size: 11px; font-weight: 800; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.gtile.add { display: grid; place-items: center; border: 2px dashed rgba(255, 255, 255, .2); background: transparent; color: var(--muted); font-weight: 800; font-size: 12px; text-align: center; }
.gtile.add span { display: block; font-size: 30px; line-height: 1; margin-bottom: 4px; color: var(--hot); }
.gtile.pick.sel { outline: 3px solid var(--hot); outline-offset: -3px; }

/* обрезка фото */
.crop-frame { position: relative; width: min(300px, 76vw); aspect-ratio: 3 / 4; margin: 6px auto 14px; border-radius: 22px; overflow: hidden; background: #000; touch-action: none; cursor: grab; }
.crop-frame img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 33.33% 33.33%; }
.zoom { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; color: var(--muted); font-weight: 800; }
.zoom input { flex: 1; accent-color: var(--hot); }
.sheet { max-height: 92vh; overflow-y: auto; }
.sheet-photo { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 18px; background: #000; margin-bottom: 12px; }
.sheet-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.sheet-stats div { flex: 1; padding: 10px; border-radius: 12px; background: var(--surface); text-align: center; }
.sheet-stats b { display: block; font-family: var(--display); font-size: 18px; }
.sheet-stats span { font-size: 11px; color: var(--muted); font-weight: 700; }
.reason { padding: 10px 12px; border-radius: 12px; background: rgba(255, 61, 110, .12); color: #ff8fa9; font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.invite-card { text-align: center; }
.invite-card img { width: 150px; height: 200px; object-fit: cover; border-radius: 22px; margin: 6px auto 14px; display: block; box-shadow: 0 0 0 3px var(--lime, var(--hot)), 0 0 40px rgba(182, 255, 59, .35); }
.code-box { margin: 10px 0; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .35); font-family: var(--display); font-size: 14px; word-break: break-all; user-select: text; -webkit-user-select: text; }

/* --- правки --- */
.row-main .you-tag, .pod-name .you-tag { display: inline-block; width: auto; color: var(--on-accent); font-size: 10px; }
.btn.ghost { color: var(--text); }
.rooms { grid-template-columns: minmax(0, 1fr); }
.arena.mog .delta { display: none; }
.room-note > span { flex: 1; }
.glitch::before, .glitch::after { opacity: .45; }
.gtile .ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; background: rgba(255, 255, 255, .04); }
.sheet .muted { margin: 4px 0 14px; }

/* =================================================================
   ЗОЛОТАЯ ТЕМА «ТОП», МЕТАЛЛ ДЛЯ ТОП-3, ПРОГРЕСС, ТУРНИР, МАГАЗИН
   ================================================================= */
body[data-theme="gold"] {
  --bg: #0d0a05; --hot: #ffc83d; --orange: #ff9f1c; --on-accent: #241500;
  --grad: linear-gradient(135deg, #ffd96a 0%, #ffb21d 55%, #ff8f1c 100%);
  --blob1: #ffb21d; --blob2: #a16207; --blob3: #ff8f1c;
}
body[data-theme="gold"] .b1 { opacity: .26; }

.metal-gold { --m1: #fff3b0; --m2: #ffc83d; --m3: #b8860b; }
.metal-silver { --m1: #ffffff; --m2: #c9d1e0; --m3: #7d8798; }
.metal-bronze { --m1: #ffd2a8; --m2: #e0915a; --m3: #8a4b22; }
.pod.p1 { --c: #ffc83d; --m1: #fff3b0; --m2: #ffc83d; --m3: #b8860b; }
.pod.p2 { --c: #d9dfea; --m1: #ffffff; --m2: #c9d1e0; --m3: #7d8798; }
.pod.p3 { --c: #e8a26e; --m1: #ffd2a8; --m2: #e0915a; --m3: #8a4b22; }
.pod-ava { background: linear-gradient(135deg, var(--m1), var(--m2) 45%, var(--m3) 70%, var(--m1)); overflow: visible; }
.pod-ava::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) -200% 0 / 300% 100% no-repeat;
  mask: radial-gradient(circle, transparent 62%, #000 64%); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  animation: shine 3.2s ease-in-out infinite; }
.pod.p2 .pod-ava::after { animation-delay: 1s; }
.pod.p3 .pod-ava::after { animation-delay: 2s; }
@keyframes shine { 0%, 60% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pod.p1 .pod-ava { animation: goldPulse 2.4s ease-in-out infinite; }
@keyframes goldPulse { 50% { box-shadow: 0 0 60px rgba(255, 200, 61, .55); } }
.pod-num { background: linear-gradient(135deg, var(--m1), var(--m2), var(--m3)); }
.pod-base { background: linear-gradient(180deg, var(--m2), var(--m3) 60%, rgba(0,0,0,.3)) !important; opacity: .9;
  border: 0 !important; position: relative; overflow: hidden; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 22px; color: rgba(0,0,0,.35); }
.pod-base::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%) -200% 0 / 300% 100% no-repeat; animation: shine 3.6s ease-in-out infinite; }
.pod-score { color: var(--m2) !important; }
.row.m1, .row.m2, .row.m3 { border-color: color-mix(in srgb, var(--m2) 60%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--m2) 16%, transparent), var(--surface)); }
.row.m1 .row-rank, .row.m2 .row-rank, .row.m3 .row-rank { font-size: 20px; }
.lv { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; background: rgba(255,255,255,.1); color: var(--muted); vertical-align: 2px; }
.badge-e { margin-left: 4px; font-size: 13px; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

/* подвкладки */
.subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 0; padding: 0 16px; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { flex: none; padding: 9px 14px; border-radius: 12px; font-weight: 800; font-size: 13px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--stroke); transition: all .2s; }
.subtabs button.on { background: var(--grad); color: var(--on-accent); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--hot) 35%, transparent); }

.grow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); animation: cardIn .4s both; }
.grow.me { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 12%, transparent); }
.grow .ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(255,255,255,.06); }
.grow .rk { flex: none; width: 26px; text-align: center; font-family: var(--display); font-weight: 800; color: var(--muted); }
.grow .mid { flex: 1; min-width: 0; }
.grow .mid b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow .mid span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.grow .pts { text-align: right; }
.grow .pts b { display: block; font-family: var(--display); font-size: 16px; color: var(--hot); }
.grow .pts span { font-size: 11px; color: var(--muted); font-weight: 700; }
.note { margin: 12px 2px; font-size: 12px; color: var(--dim); font-weight: 600; }

/* зал славы */
.hall-card { margin-top: 12px; padding: 14px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,200,61,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,200,61,.25); animation: cardIn .4s both; }
.hall-card h4 { margin: 0 0 12px; font-family: var(--display); font-size: 15px; }
.hall-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hall-top div { text-align: center; }
.hall-top img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--m2, #ffc83d); background: #1a1824; }
.hall-top b { display: block; font-size: 13px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hall-top span { font-size: 11px; color: var(--muted); font-weight: 700; }
.hall-city { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.25); font-size: 13px; font-weight: 700; }
.hall-city img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }

/* рамки уровней в дуэлях */
.card.lv3::before, .card.lv15::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card.lv3::before { background: linear-gradient(135deg, #8b5cf6, #38d0ff); }
.card.lv15::before { background: conic-gradient(from var(--ang, 0deg), #ff3d8b, #ffc83d, #b6ff3b, #38d0ff, #8b5cf6, #ff3d8b); animation: rot 3s linear infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rot { to { --ang: 360deg; } }
.meta .lvl { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; background: rgba(0,0,0,.45); color: #fff; }
.uname { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 800;
  background: rgba(56, 208, 255, .25); color: #bff1ff; position: relative; z-index: 4; }

/* прогресс в профиле */
.lvl-card { margin-top: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.lvl-head { display: flex; align-items: center; gap: 12px; }
.lvl-num { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); font-family: var(--display); font-weight: 800; font-size: 22px; box-shadow: 0 8px 24px color-mix(in srgb, var(--hot) 40%, transparent); }
.lvl-head b { display: block; font-weight: 800; }
.lvl-head span { font-size: 12px; color: var(--muted); font-weight: 700; }
.lvl-head .chips2 { margin-left: auto; display: flex; gap: 6px; }
.pill2 { padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.07); white-space: nowrap; }
.pill2.plus { background: linear-gradient(135deg, #8b5cf6, #ff3d8b); color: #fff; }
.xpbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: 12px 0 6px; }
.xpbar i { display: block; height: 100%; background: var(--grad); border-radius: 4px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.lvl-next { font-size: 12px; color: var(--muted); font-weight: 600; }
.lvl-next b { color: var(--text); }
.tasks { display: grid; gap: 8px; }
.task { padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); }
.task.done { border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .08); }
.task-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 14px; }
.task-top span { color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.task .xpbar { margin: 8px 0 0; height: 6px; }
.task.done .xpbar i { background: #34d399; }
.tasks-hint { margin-top: 8px; font-size: 12px; color: var(--dim); font-weight: 600; }
.achs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ach { text-align: center; padding: 10px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); cursor: pointer; }
.ach .e { font-size: 26px; display: block; }
.ach b { display: block; font-size: 10px; margin-top: 4px; line-height: 1.2; font-weight: 800; }
.ach.off { opacity: .35; filter: grayscale(1); }
.plus-card { position: relative; margin-top: 22px; padding: 18px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(255, 61, 139, .2)); border: 1px solid rgba(255,255,255,.16); }
.plus-card::before { content: ""; position: absolute; width: 200px; height: 200px; right: -70px; top: -80px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #ff3d8b); filter: blur(55px); opacity: .5; }
.plus-card > * { position: relative; }
.plus-card h3 { font-family: var(--display); font-size: 20px; }
.plus-card ul { margin: 10px 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.btn.stars { background: linear-gradient(135deg, #ffd96a, #ffb21d); color: #241500; box-shadow: 0 10px 28px rgba(255, 178, 29, .35); }
.setting { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); margin-bottom: 8px; cursor: pointer; }
.setting .mid { flex: 1; min-width: 0; }
.setting b { display: block; font-weight: 800; }
.setting span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.switch { flex: none; width: 48px; height: 28px; border-radius: 14px; background: rgba(255,255,255,.15); position: relative; transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s; }
.switch.on { background: var(--hot); }
.switch.on::after { transform: translateX(20px); }
.ref-box { display: flex; gap: 8px; align-items: center; }
.ref-box .code-box { flex: 1; margin: 0; font-size: 12px; }
.uni-search { width: 100%; height: 44px; padding: 0 14px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(0,0,0,.3); color: var(--text); font: inherit; outline: none; user-select: text; -webkit-user-select: text; }
.chart { width: 100%; height: 180px; }

/* турнир */
.tour-hero { margin-top: 14px; padding: 18px; border-radius: var(--r-lg); text-align: center; background: linear-gradient(160deg, rgba(255,200,61,.18), rgba(182,255,59,.08)); border: 1px solid rgba(255,200,61,.35); }
.tour-hero .cup { font-size: 46px; }
.tour-hero h3 { font-family: var(--display); font-size: 22px; margin: 4px 0; }
.tour-hero p { margin: 6px 0 14px; color: var(--muted); font-weight: 600; font-size: 14px; }
.tour-count { font-family: var(--display); font-size: 28px; color: #ffc83d; font-variant-numeric: tabular-nums; }
.bracket { display: flex; gap: 12px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 6px; scrollbar-width: none; }
.bracket::-webkit-scrollbar { display: none; }
.bcol { flex: none; width: 170px; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.bcol h5 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); text-align: center; }
.match { border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); overflow: hidden; cursor: pointer; }
.match.live { border-color: rgba(182,255,59,.6); box-shadow: 0 0 20px rgba(182,255,59,.15); }
.mp { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 13px; font-weight: 700; }
.mp + .mp { border-top: 1px solid var(--stroke); }
.mp img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; }
.mp b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.mp span { font-size: 12px; color: var(--muted); }
.mp.w { background: rgba(182,255,59,.1); }
.mp.w span { color: #b6ff3b; }
.mp.l { opacity: .5; }
.match .live-tag { padding: 3px 8px; font-size: 10px; font-weight: 800; color: #0b0d05; background: #b6ff3b; text-align: center; }
.tag.tour { background: linear-gradient(135deg, #ffd96a, #ffb21d); color: #241500; }
.row-main .lv, .row-main .badge-e { display: inline-block; width: auto; }
.grow .mid .you-tag { display: inline-block; width: auto; font-size: 10px; }
.list, #groups { grid-template-columns: minmax(0, 1fr); }
#groups { display: grid; gap: 8px; }

/* ---------- король / королева дня ---------- */
.king-bar { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 8px 12px 8px 8px; border-radius: 18px; border: 1px solid rgba(255,207,92,.45); background: linear-gradient(120deg, rgba(255,207,92,.20), rgba(255,255,255,.04)); color: var(--text); text-align: left; cursor: pointer; font: inherit; animation: cardIn .4s both; }
.king-bar img { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; border: 2px solid var(--gold); flex: none; }
.king-bar span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.king-bar small { font-size: 11px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.king-bar b { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.king-bar em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.king-bar i { font-style: normal; color: var(--gold); font-size: 22px; }

/* ---------- топ: дни в топе, призы ---------- */
.days-tag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; background: rgba(255,207,92,.16); color: var(--gold); }
.row-main b .days-tag.sm, .days-tag.sm { display: inline-block; margin: 0 0 0 6px; padding: 1px 6px; font-size: 10px; vertical-align: middle; }
.prize-bar { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,207,92,.4); background: linear-gradient(120deg, rgba(255,207,92,.18), rgba(139,92,246,.10)); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.prize-bar > span { font-size: 24px; }
.prize-bar div { flex: 1; min-width: 0; }
.prize-bar b { display: block; font-weight: 800; font-size: 14px; }
.prize-bar small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.prize-bar i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.rules-text { font-size: 14px; line-height: 1.5; color: var(--text); }
.rules-text b { font-family: var(--display); }
.linkish { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; margin-top: 10px; cursor: pointer; }

/* ---------- битва вузов ---------- */
.ub-card { margin-top: 14px; padding: 14px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(139,92,246,.20), rgba(255,207,92,.08)); border: 1px solid rgba(139,92,246,.4); animation: cardIn .4s both; }
.ub-title { font-family: var(--display); font-size: 15px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ub-left { font-family: var(--font); font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.ub-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; text-align: center; }
.ub-vs > span { font-family: var(--display); font-weight: 900; color: var(--gold); }
.ub-side b { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; min-height: 32px; }
.ub-side em { display: block; font-style: normal; font-family: var(--display); font-size: 28px; font-weight: 900; }
.ub-side.mine em { color: var(--gold); }
.ub-bar { height: 8px; margin-top: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.ub-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffcf5c, #ff8a3d); border-radius: 6px; transition: width .6s; }
.ub-me { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.ub-me b { color: var(--text); }
.ub-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ub-teams ul { list-style: none; margin: 0; padding: 0; }
.ub-teams li { display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.ub-teams li:nth-child(odd) { background: rgba(255,255,255,.05); }
.ub-teams li.me { background: rgba(255,207,92,.18); }
.ub-teams li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-city { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--muted); font-weight: 700; }
.ub-city b { color: var(--text); }
.ub-last { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--stroke); font-size: 12px; color: var(--muted); font-weight: 700; }

/* ---------- зал славы: дольше всех в топе ---------- */
.hall-card.long { background: linear-gradient(160deg, rgba(139,92,246,.16), rgba(255,255,255,.03)); border-color: rgba(139,92,246,.35); }
.hall-card h5 { margin: 10px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.long-list { list-style: none; margin: 0; padding: 0; }
.long-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.long-list .rk { width: 26px; text-align: center; font-weight: 800; }
.long-list img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.long-list .mid { flex: 1; min-width: 0; }
.long-list .mid b { display: block; font-size: 14px; font-weight: 800; }
.long-list .mid span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.long-list em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--gold); white-space: nowrap; }

/* ---------- профиль: сторис и призы ---------- */
.story-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; border-radius: var(--r-md); cursor: pointer; background: linear-gradient(120deg, rgba(255,61,139,.22), rgba(139,92,246,.22)); border: 1px solid rgba(255,138,196,.35); }
.story-card .sc-ic { font-size: 30px; }
.story-card .mid { flex: 1; min-width: 0; }
.story-card b { display: block; font-weight: 800; }
.story-card .mid > span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.4; }
.story-card .mid > span b { display: inline; color: var(--text); }
.story-card .go { font-size: 22px; color: var(--muted); }
.prize-list { display: flex; flex-direction: column; gap: 8px; }
.prize-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); }
.prize-row > span { font-size: 22px; }
.prize-row .mid { flex: 1; min-width: 0; }
.prize-row b { display: block; font-weight: 800; font-size: 14px; }
.prize-row .mid span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.prize-row em { font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--muted); }
.prize-row em.st-sent { color: var(--green); }

/* ---------- турниры: виды ---------- */
.tkinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tkind { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; border: 1px solid var(--stroke); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s, border-color .2s, background .2s; }
.tkind:active { transform: scale(.97); }
.tkind.on { border-color: rgba(255,207,92,.7); background: linear-gradient(160deg, rgba(255,200,61,.22), rgba(182,255,59,.06)); }
.tkind .te { font-size: 22px; }
.tkind b { font-size: 12px; font-weight: 800; text-align: center; line-height: 1.15; }
.tkind small { font-size: 11px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.tkind em { font-style: normal; font-size: 10px; color: var(--dim); font-weight: 800; }
.tkind.on em { color: var(--gold); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff3d3d; animation: blinkDot 1.2s infinite; }
@keyframes blinkDot { 50% { opacity: .25; } }
.t-prizes { list-style: none; margin: 8px 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.25); text-align: left; }
.t-prizes li { font-size: 13px; font-weight: 700; padding: 3px 0; }
.t-cond { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 800; background: rgba(255,138,61,.16); color: #ffb37a; }
.t-cond.ok { background: rgba(52,211,153,.16); color: var(--green); }