/* ============================================================
   Shared UI used on every page: account area, modal, cookie notice, toast,
   badges, nick styles, legal footer links, generic page layout.
   ============================================================ */

/* Cyrillic-capable condensed heading face (Bebas Neue has no Cyrillic) */
:root { --font-heading-ru: 'Bebas Neue', 'Oswald', sans-serif; }

/* ---------------- header: dropdown + account ---------------- */
.nav-right { gap: 0; }

.nav-dropdown { position: relative; }

.nav-dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-dropdown-btn::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.nav-dropdown.is-open .nav-dropdown-btn::after { transform: rotate(-135deg) translate(-2px, -1px); }

.nav-dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  display: none;
  flex-direction: column;
  padding: 6px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.nav-dropdown.is-open .nav-dropdown-panel { display: flex; }

.nav-dropdown-panel a {
  padding: 11px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-radius: 2px;
}

.nav-dropdown-panel a:hover { color: var(--accent-green); background: rgba(255, 255, 255, 0.05); }

.account { position: relative; margin-left: 10px; display: flex; align-items: center; }

.account-login {
  min-height: 32px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #000;
  background: var(--accent-green);
  border: 1px solid var(--accent-green);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.account-login:hover { background: transparent; color: var(--accent-green); }
.account-login--block { width: 100%; min-height: 44px; margin-bottom: 8px; }

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 3px 12px 3px 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
}

.account-chip:hover { border-color: var(--accent-green); }
.account-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.account-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-level { font-family: var(--font-heading); font-size: 15px; line-height: 1; color: var(--accent-green); letter-spacing: 0.04em; }

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  display: none;
  flex-direction: column;
  padding: 6px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.account-menu.is-open { display: flex; }

.account-menu a,
.account-menu button {
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.account-menu a:hover,
.account-menu button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }

.account-balance {
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  font-family: var(--font-heading-ru);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--accent-green);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-account { padding: 8px var(--container-pad) 4px; }
.mobile-account-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 12px; font-size: 13px; font-weight: 600; }
.mobile-account-points { color: var(--accent-green); }
.mobile-nav-link--btn { width: 100%; text-align: left; background: none; border-top: none; border-right: none; border-bottom: none; cursor: pointer; }

/* ---------------- modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); }
body.modal-open { overflow: hidden; }

.modal-card {
  position: relative;
  width: min(480px, 100%);
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
}

.modal-close:hover { color: var(--accent-green); }
.modal-title { font-family: var(--font-heading-ru); font-size: 32px; font-weight: 400; letter-spacing: 0.04em; line-height: 1; padding-right: 36px; }
.modal-text { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.modal-error { padding: 10px 12px; font-size: 13px; color: #fff; background: rgba(227, 32, 43, 0.25); border: 1px solid var(--accent-red); border-radius: 3px; }
.modal-actions { display: flex; gap: 12px; }
.modal-actions .btn { width: 100%; justify-content: center; }
.modal-actions .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.modal-dev { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.15); }
.modal-dev .modal-text { width: 100%; }
.btn-dev { padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-primary); background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
.btn-dev:hover { background: var(--accent-green); color: #000; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent-green); cursor: pointer; }
.check a { color: var(--accent-green); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- cookie notice + toast ---------------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1500;
  width: min(760px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  background: rgba(20, 20, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}

.cookie-banner[hidden] { display: none; }
.cookie-banner p { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.cookie-banner a { color: var(--accent-green); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner .btn { flex-shrink: 0; min-height: 40px; padding: 8px 20px; }

@media (max-width: 599px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; }
}

.toast {
  position: fixed;
  left: 50%;
  top: 68px;
  z-index: 3000;
  max-width: min(480px, calc(100% - 32px));
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind='error'] { border-color: var(--accent-red); }
.toast[data-kind='success'] { border-color: var(--accent-green); }

/* ---------------- footer legal links ---------------- */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 13px; }
.footer-legal a,
.footer-legal-btn { color: var(--text-secondary); background: none; border: none; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.2); }
.footer-legal a:hover,
.footer-legal-btn:hover { color: var(--accent-green); }

/* ---------------- role badges ---------------- */
.nick-wrap { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
.badge { display: inline-flex; flex-shrink: 0; line-height: 0; }
.badge svg, .badge img { display: block; }
.badge img { width: 18px; height: 18px; object-fit: contain; }

/* ---------------- nick styles (ported from the 141tv profile system) ---------------- */
.nick { color: var(--nick-color, inherit); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.nick:hover { text-decoration: underline; text-underline-offset: 3px; }

.nick-rainbow, .nick-glitter, .nick-fire, .nick-toxic, .nick-owner-seal,
.account-name.nick-rainbow, .account-name.nick-glitter, .account-name.nick-fire { -webkit-background-clip: text; background-clip: text; color: transparent; }

.nick-rainbow { background-image: linear-gradient(90deg, #ff0040, #ff8c00, #ffe600, #22e06a, #22b8ff, #a259ff, #ff0040); background-size: 300% auto; animation: nick-rainbow-move 3s linear infinite; }
@keyframes nick-rainbow-move { to { background-position: -300% center; } }

.nick-glitter { background-image: linear-gradient(90deg, #fff 0%, #ffd700 25%, #fff 50%, #ffd700 75%, #fff 100%); background-size: 200% auto; animation: nick-glitter-move 2.5s linear infinite; }
@keyframes nick-glitter-move { to { background-position: -200% center; } }

.nick-pulse { animation: nick-pulse-anim 1.4s ease-in-out infinite; }
@keyframes nick-pulse-anim { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.04); } }

.nick-shake { display: inline-block; animation: nick-shake-anim 0.35s ease-in-out infinite; }
@keyframes nick-shake-anim { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-1.5px) rotate(-1deg); } 75% { transform: translateX(1.5px) rotate(1deg); } }

.nick-fire { background-image: linear-gradient(180deg, #ffe066, #ff8c00, #ff3300); background-size: 100% 200%; animation: nick-fire-move 1.6s ease-in-out infinite; }
@keyframes nick-fire-move { 0%, 100% { background-position: 0 0%; } 50% { background-position: 0 100%; } }

.nick-toxic { background-image: linear-gradient(90deg, #aaff00, #00ff88, #aaff00); background-size: 200% auto; animation: nick-pulse-anim 1.6s ease-in-out infinite, nick-glitter-move 2.4s linear infinite; }
.nick-owner-seal { background-image: linear-gradient(90deg, #e53935, #ff8a80, #ffd700, #ff8a80, #e53935); background-size: 250% auto; font-weight: 800; animation: nick-glitter-move 2.2s linear infinite; }
.nick-glitch { animation: nick-glitch-anim 2.2s infinite steps(1); }
@keyframes nick-glitch-anim {
  0%, 92%, 100% { text-shadow: none; transform: none; }
  93% { text-shadow: -2px 0 #ff004c, 2px 0 #00fff9; transform: translateX(-1px); }
  95% { text-shadow: 2px 0 #ff004c, -2px 0 #00fff9; transform: translateX(1px); }
  97% { text-shadow: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [class*='nick-'] { animation: none !important; }
}

/* ---------------- generic page layout ---------------- */
.page { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--container-pad) var(--section-py); min-height: 70vh; }
.page--narrow { max-width: 820px; }
.page-title { font-family: var(--font-heading-ru); font-weight: 400; font-size: clamp(26px, 4.4vw, 56px); letter-spacing: 0.03em; line-height: 1; text-align: center; margin-bottom: 8px; overflow-wrap: anywhere; text-shadow: 0 0 12px rgba(255, 255, 255, 0.4); }
.page-lead { max-width: 62ch; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

.panel { padding: clamp(18px, 2.4vw, 28px); background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; }
.panel-title { font-family: var(--font-name); font-weight: 400; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: 0.02em; line-height: 1.1; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--accent-green); }
.muted { color: var(--text-secondary); }
.small { font-size: 13px; line-height: 1.5; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.input, .textarea, .select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 3px rgba(255, 46, 156, 0.2); }
.input--code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 22px; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; }

.btn { cursor: pointer; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--ghost { color: var(--text-primary); background: transparent; border-color: rgba(255, 255, 255, 0.25); }
.btn--ghost:hover { color: var(--accent-green); border-color: var(--accent-green); background: transparent; transform: none; }
.btn--small { min-height: 36px; padding: 6px 16px; font-size: 11px; }
.btn--danger { background: transparent; color: #ff6b73; border-color: var(--accent-red); }
.btn--danger:hover { background: var(--accent-red); color: #fff; box-shadow: none; transform: none; }

.notice { padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid var(--accent-green); border-radius: 3px; }
.notice--error { border-left-color: var(--accent-red); color: #ffb3b8; }
.empty { padding: 32px 16px; text-align: center; color: var(--text-secondary); font-size: 14px; }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #2a2a2a; flex-shrink: 0; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: top; }

/* ============================================================
   Shared list pieces: leaders, period tabs
   ============================================================ */
.link-pink { color: var(--accent-green); text-decoration: underline; text-underline-offset: 3px; }
.link-pink:hover { color: #fff; }

.leaders { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.leader {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 12px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.leader--empty { display: block; text-align: center; color: var(--text-secondary); font-size: 14px; }
.leader-rank { font-family: var(--font-heading-ru); font-size: 22px; line-height: 1; text-align: center; color: var(--text-secondary); }
.leader--1 .leader-rank { color: #ffd54a; text-shadow: 0 0 12px rgba(255, 213, 74, 0.5); }
.leader--2 .leader-rank { color: #d7dce2; }
.leader--3 .leader-rank { color: #d99a63; }
.leader-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.leader-value--2 { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.leader-value--2 strong { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.leader-value--2 small { font-size: 11px; color: var(--text-secondary); }
.leader-who > .nick-wrap { min-width: 0; flex: 0 1 auto; }
.leader-who .nick { min-width: 0; }
.leader-value { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.leaders .live-dot { margin-left: 2px; }

.period-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #141414; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; }
.period-tab { min-height: 40px; padding: 8px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); background: none; border: none; border-radius: 3px; cursor: pointer; }
.period-tab:hover { color: var(--text-primary); }
.period-tab[aria-selected='true'] { background: var(--accent-green); color: #000; }
.period-tab:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }

/* ============================================================
   Shop
   ============================================================ */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.shop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.shop-head .panel-title { flex: 1; }
.shop-balance { text-align: right; padding-top: 2px; }
.shop-balance strong { display: block; font-family: var(--font-heading-ru); font-size: 30px; line-height: 1; letter-spacing: 0.04em; color: var(--accent-green); }

.lots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.lot { display: flex; flex-direction: column; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; }
.lot:hover { border-color: rgba(255, 46, 156, 0.55); transform: translateY(-2px); }
.lot-art { aspect-ratio: 16 / 9; background: #101010; overflow: hidden; }
.lot-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lot-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px; }
.lot-title { font-family: var(--font-heading-ru); font-weight: 400; font-size: 26px; letter-spacing: 0.04em; line-height: 1.05; }
.lot-desc { font-size: 13px; line-height: 1.5; color: var(--text-secondary); flex: 1; }
.lot-line { display: block; }
.lot-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lot-price { font-family: var(--font-heading-ru); font-size: 22px; letter-spacing: 0.04em; color: var(--accent-green); }
.lot-stock { font-size: 12px; color: var(--text-secondary); }
.lot .btn { width: 100%; justify-content: center; }

.leader-hint { margin: -6px 0 14px; }

@media (max-width: 1023px) { .shop-layout { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Hall of fame
   ============================================================ */
.page--wide { max-width: 1440px; }
.top-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.top-col { display: flex; flex-direction: column; gap: 16px; padding: clamp(16px, 2vw, 24px); background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; min-width: 0; }
.top-heading { font-family: var(--font-name); font-weight: 400; font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.02em; line-height: 1.1; padding-bottom: 14px; border-bottom: 2px solid var(--accent-green); }
.top-desc { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.top-block { display: flex; flex-direction: column; gap: 8px; }
.top-sub { font-family: var(--font-heading-ru); font-weight: 400; font-size: 24px; letter-spacing: 0.04em; line-height: 1; }
.top-sub-desc { font-size: 12px; color: var(--text-secondary); margin-top: -4px; }

/* Oligarchs: gold column */
.top-col--gold { border-color: rgba(255, 200, 70, 0.35); background: linear-gradient(180deg, rgba(255, 200, 70, 0.07), #1a1a1a 38%); box-shadow: 0 0 40px rgba(255, 190, 40, 0.08), inset 0 1px 0 rgba(255, 220, 120, 0.15); }
.top-heading--gold {
  border-bottom-color: #ffc83c;
  background: linear-gradient(100deg, #fff3b0 0%, #ffc83c 28%, #fff7d0 50%, #ffb300 72%, #ffe27a 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 190, 40, 0.55));
  animation: gold-shine 4s linear infinite;
}
@keyframes gold-shine { to { background-position: -250% center; } }
.leaders--gold .leader { background: rgba(255, 200, 70, 0.06); border-color: rgba(255, 200, 70, 0.18); }
.leaders--scroll { max-height: 560px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.leader--guest .nick { color: #8a8a8a; font-weight: 600; transition: color 0.15s ease; }
.leader--guest:hover .nick, .leader--guest:focus-within .nick { color: #fff; }
.guest-mark { align-self: flex-start; margin: -2px 0 0 -4px; padding: 0 3px; font-size: 15px; font-weight: 700; line-height: 1; color: #8a8a8a; cursor: help; transition: color 0.15s ease; }
.guest-mark:hover, .guest-mark:focus-visible { color: #fff; outline: none; }
.level--hint { cursor: help; outline: none; }
.level--hint:focus-visible .level-badge { box-shadow: 0 0 0 2px #fff; }
.float-tip { white-space: pre-line; position: fixed; left: 0; top: 0; z-index: 100; width: max-content; max-width: min(260px, calc(100vw - 16px)); padding: 6px 10px; font-size: 12px; font-weight: 600; line-height: 1.35; color: #fff; background: #000; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; }
.float-tip.is-visible { opacity: 1; }
.leader-unit { display: inline-block; width: auto; height: 20px; margin-left: 6px; vertical-align: -5px; filter: grayscale(1) brightness(0.8); opacity: 0.85; }
.leaders--gold .leader-value { color: #ffd76a; font-weight: 600; }
.leaders--gold .leader--1 { border-color: rgba(255, 213, 74, 0.6); box-shadow: 0 0 22px rgba(255, 200, 70, 0.22); }
.leaders--gold .leader-who { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .top-heading--gold { animation: none; } }

@media (max-width: 1099px) { .top-layout { grid-template-columns: minmax(0, 1fr); } }
/* Levels column: exactly as tall as the tallest column (АКТИВ АУДИТОРИИ); the list scrolls inside */
@media (min-width: 1100px) {
  .top-col--levels { align-self: stretch; }
  .top-col--levels .top-block { flex: 1 1 0; min-height: 0; }
  .top-col--levels .leaders--scroll { flex: 1 1 0; min-height: 0; max-height: none; }
}

/* ============================================================
   Profiles (/me, /u/:login)
   ============================================================ */
.page--profile { max-width: 980px; }
.gate { padding-top: 6vh; }
.text-pink { color: var(--accent-green); }
.sub-title { font-family: var(--font-heading-ru); font-weight: 400; font-size: 22px; letter-spacing: 0.04em; margin: 22px 0 10px; }

.profile-card { --profile-accent: var(--accent-green); position: relative; margin-bottom: 24px; }

/* Animated glow border (same idea as 141tv): staff pick the colour, moderators are always green, others have none */
@property --glow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.profile-glow { isolation: isolate; }
.profile-glow::before { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 3px; filter: blur(2px); animation: glow-card-spin 3s linear infinite;
  background: conic-gradient(from var(--glow-angle), transparent 0%, var(--profile-accent) 15%, transparent 35%, transparent 65%, var(--profile-accent) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.profile-glow::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 26px 4px color-mix(in srgb, var(--profile-accent) 50%, transparent); animation: glow-card-pulse 2.2s ease-in-out infinite; }
.profile-glow--mod { --profile-accent: #00e676; }
@keyframes glow-card-spin { to { --glow-angle: 360deg; } }
@keyframes glow-card-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .profile-glow::before, .profile-glow::after { animation: none; } }

.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 24px 32px; align-items: center; }
.profile-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.profile-block .sub-title { margin: 0 0 10px; }
.profile-top { display: flex; align-items: center; gap: 20px; }

.profile-side { display: flex; flex-direction: column; gap: 16px; --big-num: clamp(40px, 5vw, 56px); }
.profile-balance { display: flex; flex-direction: column; gap: 2px; }
.profile-balance-value { font-family: var(--font-heading-ru); font-weight: 400; font-size: var(--big-num); line-height: 1; letter-spacing: 0.02em; color: var(--accent-green); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(255, 46, 156, 0.35); }
.profile-balance-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.profile-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--profile-accent); background: #2a2a2a; }
.profile-avatar--empty { display: block; }
.profile-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.profile-nick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.15; }
.profile-nick .nick { font-size: inherit; }
.profile-nick .badge svg, .profile-nick .badge img { width: 28px; height: 28px; }
.role-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.role-pill { padding: 4px 8px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; color: var(--pill); background: color-mix(in srgb, var(--pill) 15%, transparent); border-radius: 4px; }
.profile-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.profile-bio { font-size: 15px; line-height: 1.65; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-card > .btn { margin-top: 20px; }
.social-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-secondary); background: #101010; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 3px; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.social-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.social-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: #1a1a1a; }

.level { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.level-badge { flex-shrink: 0; padding: 0 14px; font-family: var(--font-heading-ru); font-size: var(--big-num, 48px); line-height: 1; letter-spacing: 0.04em; color: #000; background: var(--accent-green); border-radius: 3px; }
.level-body { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.level-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; }
.level-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-green), #ff7ac6); border-radius: 4px; }
.level-text { font-size: 12px; color: var(--text-secondary); }

.games-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.game-capsule { position: relative; width: 75px; border-radius: 3px; overflow: hidden; background: #101010; border: 1px solid rgba(255, 255, 255, 0.08); }
.game-capsule img { width: 100%; height: auto; display: block; }
.game-name { display: block; padding: 3px 4px; font-size: 9px; font-weight: 600; line-height: 1.3; color: var(--text-secondary); }
.game-capsule--text { padding-top: 8px; }
.game-capsule:not(.game-capsule--text) .game-name { display: none; }

.stats-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 8px; }
.stats-head .panel-title { margin-bottom: 14px; flex: 1; min-width: 200px; }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.pstat { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: #141414; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; }
.pstat-value { font-family: var(--font-heading-ru); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pstat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.pstat-hint { font-size: 11px; color: rgba(255, 255, 255, 0.45); }

.me-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.me-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.balance-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.balance-big { display: block; font-family: var(--font-heading-ru); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: 0.02em; color: var(--accent-green); font-variant-numeric: tabular-nums; }
.redeem-form { display: flex; flex-direction: column; gap: 12px; }
.redeem-form .btn { justify-content: center; }

.history { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; background: #141414; border-radius: 3px; font-size: 13px; }
.history-title { font-weight: 600; overflow-wrap: anywhere; }
.history-delta { font-family: var(--font-heading-ru); font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.history-delta.is-plus { color: #5fe08a; }
.history-delta.is-minus { color: #ff8a92; }
.history-time { grid-column: 1 / -1; font-size: 11px; color: rgba(255, 255, 255, 0.45); }
.history-note { grid-column: 1 / -1; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.order-status { font-size: 12px; font-weight: 600; text-align: right; }
.order-status--pending { color: #ffd54a; }
.order-status--fulfilled { color: #5fe08a; }
.order-status--refunded { color: var(--text-secondary); }

.form-stack { display: flex; flex-direction: column; gap: 20px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.preview { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #141414; border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 4px; }
.preview-nick { font-size: 22px; min-height: 30px; display: flex; align-items: center; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatch { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease; }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed='true'] { border-color: #fff; transform: scale(1.1); }
.swatch--custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; }
.swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.styles { display: flex; flex-wrap: wrap; gap: 8px; }
.style-opt { min-height: 40px; padding: 8px 14px; font-size: 15px; color: var(--text-primary); background: #141414; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; cursor: pointer; }
.style-opt:hover:not(:disabled) { border-color: var(--accent-green); }
.style-opt[aria-pressed='true'] { border-color: var(--accent-green); background: rgba(255, 46, 156, 0.12); }
.style-opt:disabled { opacity: 0.35; cursor: not-allowed; }

.badge-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-primary); background: #141414; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; cursor: pointer; }
.badge-opt[aria-pressed='true'] { border-color: var(--accent-green); background: rgba(255, 46, 156, 0.12); }

.accent-row { display: flex; align-items: center; gap: 12px; }
.accent-row input[type='color'] { width: 48px; height: 40px; padding: 2px; background: #121212; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 3px; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
.chip-x { width: 22px; height: 22px; font-size: 16px; line-height: 1; color: var(--text-secondary); background: rgba(255, 255, 255, 0.08); border: none; border-radius: 50%; cursor: pointer; }
.chip-x:hover { background: var(--accent-red); color: #fff; }
.search-box { position: relative; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; list-style: none; max-height: 260px; overflow-y: auto; background: #141414; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 3px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.search-results li { padding: 0; }
.search-results li.muted { padding: 12px 14px; }
.search-results button { width: 100%; padding: 11px 14px; font-size: 14px; text-align: left; color: var(--text-primary); background: none; border: none; cursor: pointer; }
.search-results button:hover { background: rgba(255, 46, 156, 0.15); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin-bottom: 16px; font-size: 14px; }
.kv dt { color: var(--text-secondary); }
.kv dd { font-weight: 600; overflow-wrap: anywhere; }
.danger-zone { margin-top: 24px; padding-top: 8px; border-top: 1px solid rgba(227, 32, 43, 0.4); }

@media (max-width: 1023px) {
  .me-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-body { display: flex; flex-direction: column; align-items: stretch; }
  .profile-main { display: contents; }
  .profile-main > * { order: 3; }
  .profile-main > .profile-top { order: 1; }
  .profile-side { order: 2; }
}
@media (max-width: 479px) {
  .profile-top { flex-direction: column; align-items: flex-start; }
  .balance-big { font-size: 40px; }
}

/* ============================================================
   Admin
   ============================================================ */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 20px 0 24px; padding: 4px; background: #141414; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; }
.admin-tabs button { min-height: 42px; padding: 8px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); background: none; border: none; border-radius: 3px; cursor: pointer; }
.admin-tabs button:hover { color: var(--text-primary); }
.admin-tabs button[aria-selected='true'] { background: var(--accent-green); color: #000; }
.admin-section { display: flex; flex-direction: column; gap: 20px; }
.admin-section[hidden] { display: none; }
.pstats--wide { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pstat.is-ok .pstat-value { color: #5fe08a; }
.pstat.is-bad .pstat-value { color: #ff6b73; }
.pstat.is-warn .pstat-value { color: #ffd54a; }
.code-result { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.code-list { padding: 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 18px; letter-spacing: 0.12em; line-height: 1.8; color: var(--accent-green); background: #101010; border: 1px dashed var(--accent-green); border-radius: 3px; overflow-x: auto; user-select: all; }
.lots-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lot-admin { display: flex; flex-direction: column; gap: 10px; }
.lot-admin.is-off { opacity: 0.55; }
.lot-admin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lot-admin-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #101010; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.olig-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px auto auto auto; gap: 8px; align-items: center; }
.olig-n { font-family: var(--font-heading-ru); font-size: 20px; text-align: center; color: var(--text-secondary); }
@media (max-width: 599px) { .olig-row { grid-template-columns: 24px minmax(0, 1fr) 100px; } .olig-row .btn { grid-column: auto; } }

/* ============================================================
   Legal pages
   ============================================================ */
.legal section { margin-bottom: 36px; }
.legal h2 { font-family: var(--font-name); font-weight: 400; font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.02em; line-height: 1.25; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 46, 156, 0.5); }
.legal h3 { font-size: 15px; font-weight: 800; margin: 18px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal strong { color: var(--text-primary); }
.legal a { color: var(--accent-green); text-decoration: underline; text-underline-offset: 3px; }
.legal code { padding: 2px 6px; font-size: 13px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
.legal-table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.legal-table th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); }
@media (max-width: 599px) { .legal-table { table-layout: fixed; } .legal-table th, .legal-table td { padding: 8px 6px; font-size: 13px; overflow-wrap: anywhere; } }
.admin-section > .btn, .admin-section > .field { align-self: flex-start; }
.admin-section > .field { min-width: min(100%, 280px); }
.legal code, .legal td { overflow-wrap: anywhere; word-break: break-word; }