/* ============================================================
   BGF PROFILE v3 — additions on top of cabinet-v3-skin.css
   ============================================================ */

/* ─── PROFILE SHELL ─── */
/* Profile uses a 2-column layout (main + rail), no sidebar.
   The shared CabinetShell always renders <CabinetSidebar> as the first
   grid child, so we hide it here under the `.profile` modifier instead of
   touching the shell component. */
[data-skin="bitup-soft"] .cab-shell.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  padding: 24px 32px;
  max-width: 1440px;
  margin: 0 auto;
  /* Profile content has many wide children (history rows, collection grid,
     long bios). Without min-width:0 on the grid items, intrinsic sizing
     blows the grid wider than the viewport on narrow screens. */
  min-width: 0;
}
[data-skin="bitup-soft"] .cab-shell.profile > * { min-width: 0; }
[data-skin="bitup-soft"] .cab-shell.profile > .cab-sidebar {
  display: none;
}
@media (max-width: 1100px) {
  [data-skin="bitup-soft"] .cab-shell.profile { grid-template-columns: 1fr; }
}

/* ─── HERO ─── */
[data-skin="bitup-soft"] .profile-hero.v3 {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "portrait meta    actions"
    "portrait info    actions";
  column-gap: 28px;
  row-gap: 10px;
  align-items: flex-start;
  padding: 28px;
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--surface) 70%);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  overflow: hidden;
}
[data-skin="bitup-soft"] .profile-hero.v3 .ph-portrait-wrap { grid-area: portrait; }
[data-skin="bitup-soft"] .profile-hero.v3 .ph-meta { grid-area: meta; min-width: 0; position: relative; z-index: 1; }
[data-skin="bitup-soft"] .profile-hero.v3 .info { grid-area: info; }
[data-skin="bitup-soft"] .profile-hero.v3 .actions { grid-area: actions; }
[data-skin="bitup-soft"] .profile-hero.v3::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(26,24,32,0.025) 3px 4px);
  pointer-events: none;
}

/* PORTRAIT + LVL CARD */
[data-skin="bitup-soft"] .profile-hero.v3 .ph-portrait-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
[data-skin="bitup-soft"] .profile-hero.v3 .av-big.portrait {
  position: relative;
  width: 120px; height: 120px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.32);
  background-image:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,0.32) 0%, transparent 55%);
  background-blend-mode: screen, multiply;
}
[data-skin="bitup-soft"] .profile-hero.v3 .av-init {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.02em;
}
[data-skin="bitup-soft"] .profile-hero.v3 .av-pip {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 20px; height: 20px;
  background: var(--success);
  border: 2.5px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink);
  z-index: 2;
  animation: status-pulse 2s ease-in-out infinite;
}
[data-skin="bitup-soft"] .profile-hero.v3 .av-host {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  filter: drop-shadow(2px 2px 0 rgba(26,24,32,0.30));
}
/* Uploaded photo fills the circular portrait. */
[data-skin="bitup-soft"] .profile-hero.v3 .av-big.portrait .av-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Camera button — overlay on the portrait, bottom-left mirror of .av-pip. */
[data-skin="bitup-soft"] .profile-hero.v3 .av-edit {
  position: absolute;
  bottom: 4px; left: 4px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink);
  cursor: pointer;
  padding: 0;
  z-index: 4;
  transition: transform 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .profile-hero.v3 .av-edit:hover {
  background: var(--accent);
  transform: scale(1.06);
}
[data-skin="bitup-soft"] .profile-hero.v3 .av-edit svg { color: #fff; }

/* ───── Avatar upload modal ───────────────────────────────────────── */
.avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.avatar-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 32, 0.55);
}
.avatar-modal__panel {
  position: relative;
  width: min(440px, 100%);
  background: var(--surface, #fff);
  color: var(--ink, #1a1820);
  border: 2px solid var(--ink, #1a1820);
  box-shadow: 6px 6px 0 var(--shadow-ink-strong, rgba(26, 24, 32, 0.18));
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}
.avatar-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.avatar-modal__head h3 {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.avatar-modal__close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.avatar-modal__close:hover { background: var(--bg-2); }

.avatar-modal__crop {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1a1820;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
}
.avatar-modal__zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.avatar-modal__zoom input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.avatar-modal__picker {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 24px 0;
}
.avatar-modal__hint {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
}
.avatar-modal__err {
  margin: 0;
  color: var(--red-700, #b91c1c);
  font-size: 13px;
  text-align: center;
}

.avatar-modal__actions {
  display: flex;
  gap: 10px;
}
.avatar-modal__btn {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow-ink-strong, rgba(26, 24, 32, 0.18));
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
.avatar-modal__btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
}
.avatar-modal__btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-ink-strong);
}
.avatar-modal__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.avatar-modal__btn.primary {
  background: var(--accent, #2c70d6);
  color: #fff;
}
.avatar-modal__btn.secondary {
  background: var(--surface);
  color: var(--ink);
}

/* Level card under portrait */
[data-skin="bitup-soft"] .profile-hero.v3 .lvl-card {
  width: 130px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .profile-hero.v3 .lvl-num {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
[data-skin="bitup-soft"] .profile-hero.v3 .lvl-lbl {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.10em;
}
[data-skin="bitup-soft"] .profile-hero.v3 .xp-bar {
  position: relative;
  width: 100%;
  height: 14px;
  margin-top: 4px;
  background: var(--bg-2);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--shadow-ink);
  overflow: hidden;
}
[data-skin="bitup-soft"] .profile-hero.v3 .xp-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, var(--accent-deep) 4px 8px);
  border-right: 1.5px solid var(--ink);
  clip-path: inset(0 100% 0 0);
  animation: rep-fill 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 250ms;
}
[data-skin="bitup-soft"] .profile-hero.v3 .xp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 6.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  pointer-events: none;
}

/* INFO */
[data-skin="bitup-soft"] .profile-hero.v3 .info {
  min-width: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
}
[data-skin="bitup-soft"] .profile-hero.v3 .crumb-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  flex-wrap: wrap;
}
[data-skin="bitup-soft"] .profile-hero.v3 .cr-tag {
  background: var(--ink); color: var(--surface);
  padding: 4px 7px; border-radius: 2px;
  letter-spacing: 0.10em;
}
[data-skin="bitup-soft"] .profile-hero.v3 .cr-sep { color: var(--ink-3); }
[data-skin="bitup-soft"] .profile-hero.v3 .cr-status {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-3);
}
[data-skin="bitup-soft"] .profile-hero.v3 .cr-status.on { color: var(--green-700); }
[data-skin="bitup-soft"] .profile-hero.v3 .cr-dot {
  width: 8px; height: 8px;
  background: var(--ink-3);
  border-radius: 50%;
  display: inline-block;
}
[data-skin="bitup-soft"] .profile-hero.v3 .cr-status.on .cr-dot {
  background: var(--success);
  box-shadow: 0 0 6px rgba(80,162,100,0.5);
  animation: status-pulse 1.8s ease-in-out infinite;
}
[data-skin="bitup-soft"] .profile-hero.v3 h1 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
  text-shadow: none;
}
[data-skin="bitup-soft"] .profile-hero.v3 .city {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
[data-skin="bitup-soft"] .profile-hero.v3 .city i { color: var(--accent); }
[data-skin="bitup-soft"] .profile-hero.v3 .bio {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  text-wrap: pretty;
}
[data-skin="bitup-soft"] .profile-hero.v3 .tag-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
}
[data-skin="bitup-soft"] .profile-hero.v3 .ph-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 5px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--shadow-ink);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
[data-skin="bitup-soft"] .profile-hero.v3 .ph-tag.host { background: var(--warning); }
[data-skin="bitup-soft"] .profile-hero.v3 .ph-tag.gold { background: var(--warning-tint); }
[data-skin="bitup-soft"] .profile-hero.v3 .ph-tag.streak { background: var(--danger-tint); color: var(--red-700); }
[data-skin="bitup-soft"] .profile-hero.v3 .ph-tag.genre  { background: var(--success-tint); color: var(--green-700); }

/* ACTIONS */
[data-skin="bitup-soft"] .profile-hero.v3 .actions {
  display: flex; flex-direction: column; gap: 8px;
  align-self: flex-start;
  position: relative; z-index: 1;
}
[data-skin="bitup-soft"] .ph-cta {
  display: inline-flex; align-items: stretch;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
/* Desktop-only min-width — on narrow screens .actions becomes row-wrap and
   any min-width >viewport would push the CTAs wider than the screen. The
   mobile @media block (≤880px) re-sets flex-basis instead. */
@media (min-width: 881px) {
  [data-skin="bitup-soft"] .ph-cta { min-width: 200px; }
}
[data-skin="bitup-soft"] .ph-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .ph-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .ph-cta.primary:hover { background: var(--accent-deep); }
[data-skin="bitup-soft"] .ph-cta.secondary {
  background: var(--surface);
  color: var(--ink);
}
[data-skin="bitup-soft"] .ph-cta.secondary:hover {
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .ph-cta .ph-cta-ic {
  display: flex; align-items: center; justify-content: center;
  width: 44px;
  background: var(--ink); color: #fff;
  border-right: 1.5px solid var(--ink);
}
[data-skin="bitup-soft"] .ph-cta.secondary .ph-cta-ic { background: var(--accent); }
[data-skin="bitup-soft"] .ph-cta .ph-cta-text {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px 14px 8px 12px;
  line-height: 1;
  text-align: left;
}
[data-skin="bitup-soft"] .ph-cta .t {
  font-size: 10px;
  letter-spacing: 0.10em;
}
[data-skin="bitup-soft"] .ph-cta .s {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
  color: rgba(255,255,255,0.78);
}
[data-skin="bitup-soft"] .ph-cta.secondary .s { color: var(--ink-3); }

/* ─── PROFILE TABS ─── */
[data-skin="bitup-soft"] .profile-sections {
  display: flex; flex-direction: column; gap: 20px; margin-top: 20px;
}
[data-skin="bitup-soft"] .profile-tabs.v3 {
  display: flex; gap: 0;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  border-radius: 2px;
  overflow-x: auto;
}
[data-skin="bitup-soft"] .profile-tabs.v3 button {
  background: var(--surface);
  border: 0;
  padding: 14px 22px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  border-right: 1.5px solid var(--ink);
  transition: background 90ms steps(2, end), color 90ms;
  white-space: nowrap;
}
[data-skin="bitup-soft"] .profile-tabs.v3 button:last-child { border-right: 0; }
[data-skin="bitup-soft"] .profile-tabs.v3 button.on { background: var(--accent); color: #fff; }
[data-skin="bitup-soft"] .profile-tabs.v3 button:hover:not(.on) { background: var(--bg-2); color: var(--ink); }
[data-skin="bitup-soft"] .profile-tabs.v3 button .n {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 9px;
  background: rgba(26,24,32,0.10); color: var(--ink);
  padding: 3px 6px; border-radius: 2px;
}
[data-skin="bitup-soft"] .profile-tabs.v3 button.on .n { background: rgba(255,255,255,0.25); color: #fff; }

/* Tabs → 2-column grid on narrow screens so all tabs fit without horizontal scroll */
@media (max-width: 620px) {
  [data-skin="bitup-soft"] .profile-tabs.v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
  }
  [data-skin="bitup-soft"] .profile-tabs.v3 button {
    justify-content: center;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
  }
  [data-skin="bitup-soft"] .profile-tabs.v3 button:nth-child(2n) { border-right: 0; }
  /* Drop the bottom border on the last row only. The last tab is always there;
     its left neighbour shares the last row only when the count is even (full 2×2). */
  [data-skin="bitup-soft"] .profile-tabs.v3 button:last-child,
  [data-skin="bitup-soft"] .profile-tabs.v3 button:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  /* A lone trailing tab (odd count, e.g. 5th "НАСТРОЙКИ") spans the full row
     instead of sitting in a single column with dead space beside it. */
  [data-skin="bitup-soft"] .profile-tabs.v3 button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
  }
}

/* ─── STATS GRID ─── */
[data-skin="bitup-soft"] .stat-grid.v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { [data-skin="bitup-soft"] .stat-grid.v3 { grid-template-columns: repeat(2, 1fr); } }
[data-skin="bitup-soft"] .stat-block.v3 {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  border-radius: 2px;
  transition: transform 100ms steps(2, end), box-shadow 100ms steps(2, end);
}
[data-skin="bitup-soft"] .stat-block.v3:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .stat-block.v3 .ic {
  width: 56px; height: 56px;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--accent-clr, var(--accent)) 12%, var(--surface));
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
[data-skin="bitup-soft"] .stat-block.v3 .body {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
[data-skin="bitup-soft"] .stat-block.v3 .v {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 26px;
  color: var(--accent-clr, var(--accent));
  line-height: 1;
}
[data-skin="bitup-soft"] .stat-block.v3 .l {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  text-transform: uppercase;
  line-height: 1.2;
}

/* ─── COLLECTION GRID ─── */
[data-skin="bitup-soft"] .collection-grid.v3 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
[data-skin="bitup-soft"] .coll-tile.v3 {
  display: flex; align-items: stretch; gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  border-radius: 2px;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
  color: var(--ink);
}
[data-skin="bitup-soft"] .coll-tile.v3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}

/* ─── COLLECTION GRID — cover-only tiles (Могу принести) ─── */
[data-skin="bitup-soft"] .collection-grid.v3:has(.coll-tile.v3.cover-only) {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
[data-skin="bitup-soft"] .coll-tile.v3.cover-only {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
  text-decoration: none;
}
[data-skin="bitup-soft"] .coll-tile.v3.cover-only:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}
[data-skin="bitup-soft"] .coll-tile.v3.cover-only .cover-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--surface);
  border-radius: 2px;
  padding: 10px;
}
[data-skin="bitup-soft"] .coll-tile.v3.cover-only .cover-slot .box-cover {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: 1 / 1;
}
[data-skin="bitup-soft"] .coll-tile.v3.cover-only .name {
  display: block;
  margin-top: -1.5px;
  padding: 6px 8px;
  background: var(--surface-2, var(--surface));
  border: 1.5px solid var(--ink);
  border-radius: 0 0 2px 2px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin="bitup-soft"] .coll-tile.v3 .body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
[data-skin="bitup-soft"] .coll-tile.v3 .name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
[data-skin="bitup-soft"] .coll-tile.v3 .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
[data-skin="bitup-soft"] .coll-tile.v3 .coll-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  padding: 3px 6px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 0.06em;
  background: var(--danger-tint);
  color: var(--red-700);
  border: 1px solid var(--danger);
  border-radius: 2px;
  align-self: flex-start;
}

/* ─── HISTORY ─── */
[data-skin="bitup-soft"] .history-list.v3 {
  display: flex; flex-direction: column; gap: 8px;
}
[data-skin="bitup-soft"] .history-row.v3 {
  display: flex; align-items: center; gap: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  border-radius: 2px;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
[data-skin="bitup-soft"] .history-row.v3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3 {
  width: 60px; height: 60px;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.20);
  position: relative;
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3 .place-num {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3 .place-lbl {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 6px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3.gold {
  background: linear-gradient(180deg, #FFE08C 0%, #E8B23C 100%);
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3.silver {
  background: linear-gradient(180deg, #F0EDE3 0%, #C4BFB0 100%);
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3.bronze {
  background: linear-gradient(180deg, #E0A86A 0%, #B07A3A 100%);
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3.dnf {
  background: var(--bg-2);
  color: var(--ink-3);
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3.dnf .dnf-mark {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 22px;
  color: var(--ink-3);
}
[data-skin="bitup-soft"] .history-row.v3 .place.v3 .place-lbl,
[data-skin="bitup-soft"] .history-row.v3 .place.v3.bronze .place-num,
[data-skin="bitup-soft"] .history-row.v3 .place.v3.bronze .place-lbl { color: #2a1605; }
[data-skin="bitup-soft"] .history-row.v3 .place.v3.bronze { color: #fff; }
[data-skin="bitup-soft"] .history-row.v3 .place.v3.bronze .place-num { color: #fff; }
[data-skin="bitup-soft"] .history-row.v3 .place.v3.bronze .place-lbl { color: rgba(255,255,255,0.78); }

[data-skin="bitup-soft"] .history-row.v3 .info { flex: 1; min-width: 0; }
[data-skin="bitup-soft"] .history-row.v3 .game {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
[data-skin="bitup-soft"] .history-row.v3 .meta {
  display: inline-flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-2);
}
[data-skin="bitup-soft"] .history-row.v3 .meta span { display: inline-flex; align-items: center; gap: 4px; }
[data-skin="bitup-soft"] .history-row.v3 .meta i { color: var(--accent); }
[data-skin="bitup-soft"] .history-row.v3 .winner.v3 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  background: var(--warning);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--shadow-ink);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.10em;
}
[data-skin="bitup-soft"] .history-row.v3 .winner.v3.muted {
  background: var(--bg-2); color: var(--ink-3);
  border-color: var(--border-strong); box-shadow: none;
}

/* ─── BADGES ─── */
[data-skin="bitup-soft"] .badges.v3 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
[data-skin="bitup-soft"] .badge-card.v3 {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 12px 12px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  border-radius: 2px;
  transition: transform 100ms steps(2, end), box-shadow 100ms steps(2, end), background 120ms;
  text-align: center;
  position: relative;
  overflow: hidden;
}
[data-skin="bitup-soft"] .badge-card.v3::before {
  /* faint scanline backdrop */
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(26,24,32,0.02) 3px 4px);
  pointer-events: none;
}
[data-skin="bitup-soft"] .badge-card.v3:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .badge-card.v3:hover .bc-sprite { animation: badge-wobble 600ms steps(4, end); }
@keyframes badge-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(-8deg) scale(1.08); }
  50%      { transform: rotate(0deg) scale(1.12); }
  75%      { transform: rotate(8deg) scale(1.08); }
}
[data-skin="bitup-soft"] .badge-card.v3 .bc-sprite {
  position: relative; z-index: 1;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
[data-skin="bitup-soft"] .badge-card.v3 .bc-label {
  position: relative; z-index: 1;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--ink);
}
[data-skin="bitup-soft"] .badge-card.v3.gold   { background: linear-gradient(180deg, #FFE9B6 0%, var(--warning-tint) 100%); }
[data-skin="bitup-soft"] .badge-card.v3.red    { background: linear-gradient(180deg, #FFD5D9 0%, var(--danger-tint) 100%); }
[data-skin="bitup-soft"] .badge-card.v3.green  { background: linear-gradient(180deg, #D1F0DA 0%, var(--success-tint) 100%); }
[data-skin="bitup-soft"] .badge-card.v3.purple { background: linear-gradient(180deg, #DFD8FA 0%, var(--accent-tint) 100%); }
[data-skin="bitup-soft"] .badge-card.v3.locked {
  background: var(--bg-2);
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  opacity: 0.7;
}
[data-skin="bitup-soft"] .badge-card.v3.locked .bc-label { color: var(--ink-3); }

/* ─── RAIL ─── */
[data-skin="bitup-soft"] .profile-rail.v3 {
  display: flex; flex-direction: column; gap: 16px;
}
[data-skin="bitup-soft"] .rep-total {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  text-align: right;
  padding-top: 4px;
  border-top: 1px dashed var(--border-strong);
  margin-top: 2px;
}

/* Upcoming row */
[data-skin="bitup-soft"] .upcoming-row.v3 {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  color: var(--ink);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .upcoming-row.v3 + .upcoming-row.v3 { margin-top: 8px; }
[data-skin="bitup-soft"] .upcoming-row.v3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .upcoming-row.v3 .up-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
[data-skin="bitup-soft"] .upcoming-row.v3 .game {
  font-family: var(--font-body); font-weight: 800; font-size: 13px;
  color: var(--ink); letter-spacing: -0.01em;
}
[data-skin="bitup-soft"] .upcoming-row.v3 .when {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
}
[data-skin="bitup-soft"] .upcoming-row.v3 .up-role {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  padding: 3px 6px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .upcoming-row.v3 .up-role.host {
  background: var(--warning); color: var(--ink);
}
[data-skin="bitup-soft"] .upcoming-row.v3 .up-role.player {
  background: var(--bg-2); color: var(--ink-2);
}

/* Action buttons */
[data-skin="bitup-soft"] .action-btn.v3 {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .action-btn.v3 + .action-btn.v3 { margin-top: 8px; }
[data-skin="bitup-soft"] .action-btn.v3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .action-btn.v3 .ab-ic {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--accent-tint);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
  color: var(--accent);
}
[data-skin="bitup-soft"] .action-btn.v3.danger:hover { background: var(--danger-tint); color: var(--red-700); }
[data-skin="bitup-soft"] .action-btn.v3.danger .ab-ic {
  background: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger);
}

/* ─── Friend requests panel ─── */
[data-skin="bitup-soft"] .friend-req-panel { /* inherits .panel */ }
[data-skin="bitup-soft"] .friend-req-row.v3 {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  color: var(--ink);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .friend-req-row.v3 + .friend-req-row.v3 { margin-top: 8px; }
[data-skin="bitup-soft"] .friend-req-row.v3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-av {
  position: relative;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-av img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-init {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 9px; letter-spacing: 0.04em;
  color: var(--ink);
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-name {
  font-family: var(--font-body); font-weight: 800; font-size: 13px;
  color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink); border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  cursor: pointer;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-btn.accept {
  background: var(--green-500, #6BE08F); color: var(--ink);
}
[data-skin="bitup-soft"] .friend-req-row.v3 .fr-btn.decline {
  background: var(--red-500, #FF6B6B); color: #fff;
}

/* ============================================================
   MOBILE — proper phone layout (mirrors profile-v3-additions.css §MOBILE)

   Top-bar rules are scoped under .cabinet-root:has(.cab-shell.profile)
   so they only apply on /app/profile. Other cabinet pages already have
   their own mobile top-bar treatments (chat) or rely on the default.
   ============================================================ */

/* Hard safeguard against horizontal scroll on /app/profile at any width.
   Profile has many intrinsically-wide children (collection grid, history
   rows with long titles, bios) that can blow the grid wider than the
   viewport before our @media rules kick in. Clip at the shell level. */
[data-skin="bitup-soft"] .cab-shell.profile { overflow-x: clip; }
[data-skin="bitup-soft"] .cab-shell.profile .cab-main { min-width: 0; }
[data-skin="bitup-soft"] .profile-hero.v3,
[data-skin="bitup-soft"] .profile-hero.v3 > * { min-width: 0; }
[data-skin="bitup-soft"] .profile-hero.v3 .info { min-width: 0; }
[data-skin="bitup-soft"] .profile-hero.v3 .info h1 { overflow-wrap: anywhere; }

/* ─── Tablet (≤880px) ─── */
@media (max-width: 880px) {
  /* Top bar — shrink the breadcrumb only. No per-page height override: the bar
   * keeps the shared base height so it doesn't jump in size when navigating to
   * the profile. The brand logo is tied to the bar height in cabinet-shell.css. */
  .cabinet-root:has(.cab-shell.profile) .cab-top { gap: 10px; padding: 0 12px; }
  .cabinet-root:has(.cab-shell.profile) .cab-top .crumb { font-size: 8px; gap: 6px; min-width: 0; overflow: hidden; }
  /* Hide all crumb links + separators; keep only the emphasis <b> (current page). */
  .cabinet-root:has(.cab-shell.profile) .cab-top .crumb a,
  .cabinet-root:has(.cab-shell.profile) .cab-top .crumb .sep { display: none; }
  .cabinet-root:has(.cab-shell.profile) .cab-top .crumb b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  /* top-actions / .me / .icon-btn sizing is intentionally NOT overridden here —
   * the shared mobile rules in cabinet-shell.css handle them, so the right-hand
   * action cluster is identical on every page and the bar doesn't appear to
   * "jump" when navigating to the profile. Only crumb spacing differs above. */
  .cabinet-root:has(.cab-shell.profile) .cab-top .top-actions { flex-shrink: 0; }

  /* Shell padding */
  [data-skin="bitup-soft"] .cab-shell.profile { padding: 16px; gap: 16px; }

  /* Hero — single even column, full-width blocks */
  [data-skin="bitup-soft"] .profile-hero.v3 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "portrait"
      "meta"
      "info"
      "actions";
    column-gap: 0;
    row-gap: 18px;
    padding: 20px 18px;
  }
  /* Avatar + level card share one balanced, full-width top row */
  [data-skin="bitup-soft"] .profile-hero.v3 .ph-portrait-wrap {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  [data-skin="bitup-soft"] .profile-hero.v3 .av-big.portrait { flex-shrink: 0; }
  [data-skin="bitup-soft"] .profile-hero.v3 .lvl-card {
    flex: 1;
    width: auto;
    max-width: none;
    align-items: stretch;
  }
  [data-skin="bitup-soft"] .profile-hero.v3 .lvl-num,
  [data-skin="bitup-soft"] .profile-hero.v3 .lvl-lbl { align-self: flex-start; }
  /* Meta is one clean inline line spanning the width */
  [data-skin="bitup-soft"] .profile-hero.v3 .ph-meta { align-self: stretch; }
  [data-skin="bitup-soft"] .profile-hero.v3 .ph-meta .crumb-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  [data-skin="bitup-soft"] .profile-hero.v3 .ph-meta .cr-since { color: var(--ink-2); }
  [data-skin="bitup-soft"] .profile-hero.v3 h1 { font-size: 28px; overflow-wrap: anywhere; }
  [data-skin="bitup-soft"] .profile-hero.v3 .info { align-items: flex-start; text-align: left; }
  [data-skin="bitup-soft"] .profile-hero.v3 .crumb-row,
  [data-skin="bitup-soft"] .profile-hero.v3 .tag-row { justify-content: flex-start; }
  [data-skin="bitup-soft"] .profile-hero.v3 .bio { text-align: left; max-width: 100%; overflow-wrap: anywhere; }
  [data-skin="bitup-soft"] .profile-hero.v3 .actions {
    flex-direction: row; flex-wrap: wrap;
    width: auto; justify-content: flex-start;
    align-self: stretch;
    padding: 0;
  }
  [data-skin="bitup-soft"] .ph-cta { flex: 1 1 220px; min-width: 0; }
  [data-skin="bitup-soft"] .ph-cta .ph-cta-text { min-width: 0; }
  [data-skin="bitup-soft"] .ph-cta .t,
  [data-skin="bitup-soft"] .ph-cta .s { overflow-wrap: anywhere; }

  /* Friend requests — на мобиле сжимаем гэп между именем и кнопками,
     чтобы длинное имя не выталкивало кнопки за край. */
  [data-skin="bitup-soft"] .friend-req-row.v3 { gap: 10px; padding: 10px; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-av { width: 36px; height: 36px; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-name { font-size: 13px; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-meta { font-size: 10px; }
}

/* ─── Phone (≤560px) ─── */
@media (max-width: 560px) {
  /* Top bar */
  .cabinet-root:has(.cab-shell.profile) .cab-top { padding: 0 10px; }
  .cabinet-root:has(.cab-shell.profile) .cab-top .crumb { display: none; }
  .cabinet-root:has(.cab-shell.profile) .cab-top .spacer { display: none; }
  .cabinet-root:has(.cab-shell.profile) .cab-top .top-actions { margin-left: auto; }

  /* Shell padding */
  [data-skin="bitup-soft"] .cab-shell.profile { padding: 12px; gap: 14px; }

  /* Hero — compact */
  [data-skin="bitup-soft"] .profile-hero.v3 { padding: 18px 20px 22px; gap: 16px; }
  [data-skin="bitup-soft"] .profile-hero.v3 h1 { font-size: 24px; line-height: 1.1; }
  [data-skin="bitup-soft"] .profile-hero.v3 .av-big.portrait { width: 96px; height: 96px; }
  [data-skin="bitup-soft"] .profile-hero.v3 .av-init { font-size: 28px; }
  [data-skin="bitup-soft"] .profile-hero.v3 .av-host { top: -10px; }
  [data-skin="bitup-soft"] .profile-hero.v3 .lvl-card { flex: 1; width: auto; max-width: none; }
  [data-skin="bitup-soft"] .profile-hero.v3 .bio { font-size: 13px; }
  [data-skin="bitup-soft"] .profile-hero.v3 .city { font-size: 13px; }
  [data-skin="bitup-soft"] .profile-hero.v3 .ph-tag { font-size: 7px; padding: 5px 8px 4px; }
  [data-skin="bitup-soft"] .ph-cta { flex: 1 1 100%; }
  [data-skin="bitup-soft"] .ph-cta .ph-cta-ic { width: 40px; }
  [data-skin="bitup-soft"] .ph-cta .t { font-size: 9px; }

  /* Tabs — denser, scrollable */
  [data-skin="bitup-soft"] .profile-tabs.v3 button {
    padding: 12px 14px;
    font-size: 9px;
    gap: 6px;
  }
  [data-skin="bitup-soft"] .profile-tabs.v3 button .n { font-size: 8px; padding: 2px 5px; }
  [data-skin="bitup-soft"] .profile-sections { gap: 14px; margin-top: 14px; }

  /* Stats — full single column for big numbers */
  [data-skin="bitup-soft"] .stat-grid.v3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  [data-skin="bitup-soft"] .stat-block.v3 { padding: 12px; gap: 10px; }
  [data-skin="bitup-soft"] .stat-block.v3 .ic { width: 44px; height: 44px; }
  [data-skin="bitup-soft"] .stat-block.v3 .ic svg { width: 26px; height: 26px; }
  [data-skin="bitup-soft"] .stat-block.v3 .v { font-size: 20px; }
  [data-skin="bitup-soft"] .stat-block.v3 .l { font-size: 9px; }

  /* Collection grid — make sure tiles fit nicely on phones */
  [data-skin="bitup-soft"] .collection-grid.v3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  [data-skin="bitup-soft"] .coll-tile.v3 .name { font-size: 13px; -webkit-line-clamp: 1; }

  /* cover-only collection — keep a 2-column grid on phones */
  [data-skin="bitup-soft"] .collection-grid.v3:has(.coll-tile.v3.cover-only) {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  [data-skin="bitup-soft"] .coll-tile.v3.cover-only { padding: 0; gap: 0; }
  [data-skin="bitup-soft"] .coll-tile.v3.cover-only .name {
    font-size: 12px;
    padding: 5px 6px;
  }

  /* Panels */
  [data-skin="bitup-soft"] .panel-body { padding: 12px; }
  [data-skin="bitup-soft"] .panel-body.tight { padding: 10px; }
  [data-skin="bitup-soft"] .panel-head { padding: 12px 14px; }

  /* History rows — stack place + winner above info */
  [data-skin="bitup-soft"] .history-row.v3 {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "place info"
      "place badge";
    gap: 6px 12px;
    padding: 10px;
    align-items: start;
  }
  [data-skin="bitup-soft"] .history-row.v3 .place.v3 {
    grid-area: place;
    width: 52px; height: 52px;
    align-self: center;
  }
  [data-skin="bitup-soft"] .history-row.v3 .place.v3 .place-num { font-size: 18px; }
  [data-skin="bitup-soft"] .history-row.v3 .place.v3 .place-lbl { font-size: 5px; margin-top: 3px; }
  [data-skin="bitup-soft"] .history-row.v3 .info { grid-area: info; }
  [data-skin="bitup-soft"] .history-row.v3 .badge-col { grid-area: badge; }
  [data-skin="bitup-soft"] .history-row.v3 .meta { font-size: 11px; gap: 8px 10px; }
  [data-skin="bitup-soft"] .history-row.v3 .game { font-size: 13px; margin-bottom: 4px; }

  /* Badges grid */
  [data-skin="bitup-soft"] .badges.v3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  [data-skin="bitup-soft"] .badge-card.v3 { padding: 14px 10px 10px; }
  [data-skin="bitup-soft"] .badge-card.v3 .bc-label { font-size: 7px; }

  /* Rail upcoming */
  [data-skin="bitup-soft"] .upcoming-row.v3 .game { font-size: 12px; }
  [data-skin="bitup-soft"] .upcoming-row.v3 .when { font-size: 10px; }

  /* Friend requests — phone: убираем meta-строку чтобы не переносилось,
     уменьшаем кнопки. Имя получает всё доступное место. */
  [data-skin="bitup-soft"] .friend-req-row.v3 { gap: 8px; padding: 9px 10px; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-av { width: 32px; height: 32px; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-init { font-size: 8px; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-meta { display: none; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-btn { width: 32px; height: 32px; }
  [data-skin="bitup-soft"] .friend-req-row.v3 .fr-actions { gap: 5px; }
}

/* ─── Tiny phone (≤380px) ─── */
@media (max-width: 380px) {
  [data-skin="bitup-soft"] .profile-hero.v3 h1 { font-size: 22px; }
  [data-skin="bitup-soft"] .stat-grid.v3 { grid-template-columns: 1fr; }
  [data-skin="bitup-soft"] .badges.v3 { grid-template-columns: 1fr 1fr; }
  [data-skin="bitup-soft"] .profile-hero.v3 .ph-tag .s,
  [data-skin="bitup-soft"] .profile-hero.v3 .tag-row { gap: 6px; }
}