/* ============================================================
   bitUp SOFT-PAPER SKIN — for BGF Cabinet v3
   ------------------------------------------------------------
   A cozier, more dimensional pixel-art skin. The page reads like
   a sprite-shop sheet: a soft cream paper grid, white cards with
   gentle gray drop shadows, and chunky shaded pixel sprites.
   Pixel typography stays for headings/labels but in a softer ink
   (#1a1820) — never pure black, never neon glow.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

[data-skin="bitup-soft"] {
  /* ---------- Surfaces (light cream paper) ---------- */
  --bg:         #ECEAE2;     /* page paper */
  --paper:      #ECEAE2;
  --bg-2:       #E1DED4;     /* hover / panel-head stripe */
  --paper-2:    #E1DED4;
  --surface:    #FBFAF5;     /* card */
  --surface-2:  #F3F1E8;     /* nested / hover */

  /* ---------- Foreground (soft cool-charcoal, never pure #000) ---------- */
  --ink:        #1a1820;
  --ink-2:      #5A5760;
  --ink-3:      #8A8794;
  --ink-inverse:#FBFAF5;

  /* ---------- Borders & dividers ---------- */
  --border:        #C8C4B8;
  --border-strong: #A19D90;
  --border-felt:   #6B4E32;
  --border-subtle: #DDD9CC;

  /* ---------- Shadow ink (soft warm gray, not pure #000) ---------- */
  --shadow-ink: rgba(26, 24, 32, 0.18);
  --shadow-ink-strong: rgba(26, 24, 32, 0.30);

  /* ---------- Brand & semantic remap — muted, less neon ---------- */
  --accent:      #6F5BD9;     /* dusty purple */
  --accent-deep: #8F7BF3;
  --accent-tint: rgba(111, 91, 217, 0.14);

  /* Green — sage / leaf */
  --green-100: rgba(80, 162, 100, 0.18);
  --green-300: #7BC489;
  --green-500: #4FA266;
  --green-700: #347A4D;
  --green-900: #1A3A26;

  /* Purple — dusty grape */
  --purple-100: rgba(111, 91, 217, 0.16);
  --purple-300: #A89BE8;
  --purple-500: #6F5BD9;
  --purple-700: #4A3BAA;
  --purple-900: #2A2068;

  /* Red — clay terracotta */
  --red-100: rgba(204, 70, 80, 0.16);
  --red-300: #E89098;
  --red-500: #CC4650;
  --red-700: #9B2A33;

  /* Yellow — warm honey */
  --yellow-300: rgba(232, 178, 60, 0.20);
  --yellow-500: #E8B23C;
  --yellow-700: #B3801F;

  /* Hot pink → coral-rose */
  --secondary:        #E15A8F;
  --secondary-hover:  #F076A6;
  --secondary-tint:   rgba(225, 90, 143, 0.14);

  /* Status semantics */
  --success:        #4FA266;
  --success-tint:   rgba(80, 162, 100, 0.16);
  --warning:        #E8B23C;
  --warning-tint:   rgba(232, 178, 60, 0.20);
  --danger:         #CC4650;
  --danger-tint:    rgba(204, 70, 80, 0.16);

  /* ---------- Type ---------- */
  --font-body:  'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ============================================================
   Page background — paper with a faint sprite-sheet grid
   ============================================================ */
[data-skin="bitup-soft"] body,
body:has([data-skin="bitup-soft"]) {
  background: var(--bg, #ECEAE2);
}
[data-skin="bitup-soft"] {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(26,24,32,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,24,32,0.020) 1px, transparent 1px);
  background-size: 8px 8px, 32px 32px;
}

/* ============================================================
   TOP BAR — soft surface, hairline border
   ============================================================ */
[data-skin="bitup-soft"] .cab-top {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 0 rgba(26,24,32,0.05);
}
[data-skin="bitup-soft"] .cab-top .brand .mark {
  background: var(--accent);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .cab-top .crumb { color: var(--ink-3); }
[data-skin="bitup-soft"] .cab-top .crumb b { color: var(--ink); }
[data-skin="bitup-soft"] .cab-top .icon-btn,
[data-skin="bitup-soft"] .cab-top .me {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  color: var(--ink);
}
[data-skin="bitup-soft"] .cab-top .icon-btn:hover,
[data-skin="bitup-soft"] .cab-top .me:hover {
  background: var(--surface-2);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  transform: translate(-1px, -1px);
}
[data-skin="bitup-soft"] .cab-top .icon-btn .pip {
  background: var(--secondary);
  color: #fff;
  border: 1.5px solid var(--ink);
}
[data-skin="bitup-soft"] .cab-top .me {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 5px;
}
[data-skin="bitup-soft"] .cab-top .me:hover .me-chev { color: var(--accent); transform: translateY(1px); }
[data-skin="bitup-soft"] .cab-top .me .av {
  position: relative;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 11px;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  /* No overflow:hidden here — the .me-status dot intentionally pokes past the
   * avatar edge (right/bottom:-2px) and must not be clipped. The photo is
   * clipped to the circle on the <img> itself via border-radius below. */
  /* portrait shading — specular top-left + shadow bottom-right */
  background-image:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,0.32) 0%, transparent 55%);
  background-blend-mode: screen, multiply;
}
[data-skin="bitup-soft"] .cab-top .me .av .av-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
[data-skin="bitup-soft"] .cab-top .me .av .me-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green-500, #2faa5a);
  border: 1.5px solid var(--ink);
  box-shadow: 0 0 0 1.5px var(--surface);
}
[data-skin="bitup-soft"] .cab-top .me .me-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
[data-skin="bitup-soft"] .cab-top .me .n {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
[data-skin="bitup-soft"] .cab-top .me .c { color: var(--ink-3); font-size: 11.5px; }
[data-skin="bitup-soft"] .cab-top .me .me-chev {
  flex-shrink: 0;
  color: var(--ink-3);
  margin-left: 2px;
  transition: transform 90ms steps(2, end), color 120ms;
}
[data-skin="bitup-soft"] .cab-top .search {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .cab-top .search input { color: var(--ink); }
[data-skin="bitup-soft"] .cab-top .search input::placeholder { color: var(--ink-3); }
[data-skin="bitup-soft"] .cab-top .search kbd {
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--border-strong);
}

/* ============================================================
   FEED HEADER
   ============================================================ */
[data-skin="bitup-soft"] .feed-header h1 {
  color: var(--ink);
  text-shadow: none;
  letter-spacing: 0.01em;
}
[data-skin="bitup-soft"] .feed-header .sub { color: var(--ink-2); }

[data-skin="bitup-soft"] .filter-bar {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .chip {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  color: var(--ink-2);
  box-shadow: 1px 1px 0 var(--shadow-ink);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms ease;
}
[data-skin="bitup-soft"] .chip:hover {
  background: var(--surface-2);
  color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .chip.on {
  background: var(--accent); color: #fff;
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .chip .n {
  background: rgba(26,24,32,0.10); color: var(--ink);
}
[data-skin="bitup-soft"] .chip.on .n { background: rgba(255,255,255,0.25); color: #fff; }

/* Filter dropdown (mobile) — bitup-soft skin (ported from cabinet-v3-skin.css) */
[data-skin="bitup-soft"] .filter-dd-trigger {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  color: var(--ink-2);
}
[data-skin="bitup-soft"] .filter-dd-trigger .fdd-label { color: var(--ink); }
[data-skin="bitup-soft"] .filter-dd-trigger .fdd-kicker { color: var(--ink-3); }
[data-skin="bitup-soft"] .filter-dd-trigger .n {
  background: rgba(26,24,32,0.10); color: var(--ink);
}
[data-skin="bitup-soft"] .filter-dd-trigger .fdd-caret { color: var(--ink-2); }
[data-skin="bitup-soft"] .filter-dd-menu {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .fdd-item {
  background: var(--surface);
  color: var(--ink-2);
  border-bottom-color: var(--border, rgba(26,24,32,0.12));
}
[data-skin="bitup-soft"] .fdd-item .fdd-item-label { color: var(--ink); }
[data-skin="bitup-soft"] .fdd-item .fdd-item-icon { color: var(--ink-2); }
[data-skin="bitup-soft"] .fdd-item .n { background: rgba(26,24,32,0.10); color: var(--ink); }
[data-skin="bitup-soft"] .fdd-item .fdd-item-check { color: var(--accent); }
[data-skin="bitup-soft"] .fdd-item:active { background: var(--surface-2); }
[data-skin="bitup-soft"] .fdd-item.on { background: var(--accent); color: #fff; }
[data-skin="bitup-soft"] .fdd-item.on .fdd-item-label,
[data-skin="bitup-soft"] .fdd-item.on .fdd-item-icon,
[data-skin="bitup-soft"] .fdd-item.on .fdd-item-check { color: #fff; }
[data-skin="bitup-soft"] .fdd-item.on .n { background: rgba(255,255,255,0.25); color: #fff; }

/* ============================================================
   PANELS / CARDS — white paper with soft drop shadow
   ============================================================ */
[data-skin="bitup-soft"] .panel,
[data-skin="bitup-soft"] .form-section,
[data-skin="bitup-soft"] .publish-bar {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .panel-head,
[data-skin="bitup-soft"] .form-section .head {
  background: var(--bg-2);
  border-bottom: 1.5px solid var(--ink);
}
[data-skin="bitup-soft"] .panel-head h3 { color: var(--ink); letter-spacing: 0.05em; }
[data-skin="bitup-soft"] .panel-head .sub { color: var(--ink-3); }

/* ============================================================
   T-CARD (list view)
   ============================================================ */
[data-skin="bitup-soft"] .t-card {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  color: var(--ink);
  border-radius: 2px;
  transition: transform 100ms steps(2, end), box-shadow 100ms steps(2, end);
}
[data-skin="bitup-soft"] .t-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .t-card.yours {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent-tint), 5px 5px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .t-card.full { background: var(--bg-2); }
[data-skin="bitup-soft"] .t-card .row1 .id { color: var(--ink-3); }
[data-skin="bitup-soft"] .t-card h2 { color: var(--ink); }
[data-skin="bitup-soft"] .t-card .hosted { color: var(--ink-2); }
[data-skin="bitup-soft"] .t-card .meta .m { color: var(--ink-2); }
[data-skin="bitup-soft"] .t-card .meta .m i { color: var(--accent); }

/* ============================================================
   LEVEL CHIP — compact, sits inline beside the OPEN badge.
   Same height as .t-badge (padding 5/8 + 1.5px border, lh 1).
   ============================================================ */
[data-skin="bitup-soft"] .lvl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
[data-skin="bitup-soft"] .lvl-chip.newbie { background: var(--green-100); color: var(--green-700); border-color: var(--green-500); }
[data-skin="bitup-soft"] .lvl-chip.mixed  { background: var(--yellow-300); color: var(--yellow-700); border-color: var(--warning); }
[data-skin="bitup-soft"] .lvl-chip.pro    { background: var(--red-100); color: var(--red-700); border-color: var(--danger); }
[data-skin="bitup-soft"] .lvl-pips {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
[data-skin="bitup-soft"] .lvl-pips .pp {
  width: 5px; height: 5px;
  border: 1px solid currentColor;
  opacity: 0.4;
}
[data-skin="bitup-soft"] .lvl-pips .pp.on {
  background: currentColor;
  opacity: 1;
}

/* ============================================================
   NEED ROW — refined requirement pills below the meta.
   Lighter than the old pixel chips: Inter type, soft surface.
   ============================================================ */
[data-skin="bitup-soft"] .need-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
[data-skin="bitup-soft"] .need-row-label {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 6.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-right: 1px;
}
[data-skin="bitup-soft"] .need-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}
[data-skin="bitup-soft"] .need-pill > i {
  width: 12px; height: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
[data-skin="bitup-soft"] .t-card .avs .av { border: 1.5px solid var(--ink); }
[data-skin="bitup-soft"] .t-card .avs .av.empty {
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 4px, var(--surface) 4px 8px);
  color: var(--ink-3);
  border: 1.5px dashed var(--border-strong);
}

/* ── Seats row: host slot + non-host avatar grid ───────────────────
 * Replaces the old overlapping ".avs" stack. Host gets a labeled box,
 * the rest sit in a non-overlapping row. Avatars are 44px (was 32) so
 * initials are legible. */
[data-skin="bitup-soft"] .t-card .row3 .seats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
[data-skin="bitup-soft"] .t-card .host-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--warning-tint);
  border: 1.5px solid var(--warning);
  border-radius: 2px;
  flex-shrink: 0;
}
[data-skin="bitup-soft"] .t-card .host-slot__label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--yellow-700);
  white-space: nowrap;
}
[data-skin="bitup-soft"] .t-card .host-slot .av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  flex-shrink: 0;
}
[data-skin="bitup-soft"] .t-card .avs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
[data-skin="bitup-soft"] .t-card .avs .av,
[data-skin="bitup-soft"] .t-card .avs .av + .av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  margin-left: 0;
  position: static;
  flex-shrink: 0;
}
[data-skin="bitup-soft"] .t-card .avs .av.empty {
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 4px, var(--surface) 4px 8px);
  color: var(--ink-3);
  border: 1.5px dashed var(--border-strong);
}

/* ============================================================
   SEAT BLOCK (counter chip)
   ============================================================ */
[data-skin="bitup-soft"] .seat-block {
  background: var(--success-tint);
  border: 1.5px solid var(--success);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  color: var(--success);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .seat-block .n { color: var(--success); text-shadow: none; }
[data-skin="bitup-soft"] .seat-block .l { color: var(--green-700); }
[data-skin="bitup-soft"] .seat-block.last  { background: var(--warning-tint); border-color: var(--warning); }
[data-skin="bitup-soft"] .seat-block.last .n,
[data-skin="bitup-soft"] .seat-block.last .l { color: var(--yellow-700); }
[data-skin="bitup-soft"] .seat-block.full  { background: var(--danger-tint); border-color: var(--danger); }
[data-skin="bitup-soft"] .seat-block.full .n,
[data-skin="bitup-soft"] .seat-block.full .l { color: var(--red-700); }
[data-skin="bitup-soft"] .seat-block.yours { background: var(--accent); border-color: var(--ink); color: #fff; }
[data-skin="bitup-soft"] .seat-block.done  { background: var(--bg-2); border-color: var(--ink-3); }
[data-skin="bitup-soft"] .seat-block.done .n,
[data-skin="bitup-soft"] .seat-block.done .l { color: var(--ink-3); }
[data-skin="bitup-soft"] .seat-block.yours .n,
[data-skin="bitup-soft"] .seat-block.yours .l { color: #fff; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
[data-skin="bitup-soft"] .t-badge {
  background: var(--success-tint);
  color: var(--green-700);
  border: 1.5px solid var(--success);
}
[data-skin="bitup-soft"] .t-badge.filling { background: var(--warning-tint); color: var(--yellow-700); border-color: var(--warning); }
[data-skin="bitup-soft"] .t-badge.full    { background: var(--danger-tint);  color: var(--red-700); border-color: var(--danger); }
[data-skin="bitup-soft"] .t-badge.yours   { background: var(--accent); color: #fff; border-color: var(--ink); }
/* Завершённый стол — нейтральный приглушённый тон (партия сыграна, остаётся чат/итоги). */
[data-skin="bitup-soft"] .t-badge.done    { background: var(--bg-2); color: var(--ink-3); border-color: var(--ink-3); }

/* ============================================================
   JOIN BUTTON
   ============================================================ */
[data-skin="bitup-soft"] .t-card .join-btn,
[data-skin="bitup-soft"] .vtable-foot .join-btn,
[data-skin="bitup-soft"] .cta-row .join-btn,
[data-skin="bitup-soft"] .empty-state .join-btn {
  background: var(--green-500, var(--success));
  color: #fff;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .t-card .join-btn:hover:not(:disabled),
[data-skin="bitup-soft"] .vtable-foot .join-btn:hover:not(:disabled),
[data-skin="bitup-soft"] .cta-row .join-btn:hover:not(:disabled),
[data-skin="bitup-soft"] .empty-state .join-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  background: var(--green-700, var(--success));
}
[data-skin="bitup-soft"] .t-card .join-btn:active,
[data-skin="bitup-soft"] .vtable-foot .join-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .t-card .join-btn.joined,
[data-skin="bitup-soft"] .vtable-foot .join-btn.joined { background: var(--secondary); }

/* «Заявка отправлена» — стол на модерации, игрок ждёт подтверждения хоста.
   Жёлтый = «заполняется / в ожидании» (семантика BGF). Мягкая пульсация даёт
   ощущение «в процессе»; на hover намекаем, что клик отменит заявку. */
[data-skin="bitup-soft"] .t-card .join-btn.requested,
[data-skin="bitup-soft"] .vtable-foot .join-btn.requested {
  background: var(--yellow-500, #f5c518);
  color: var(--ink);
  animation: join-req-pulse 1.6s steps(2, end) infinite;
}
[data-skin="bitup-soft"] .t-card .join-btn.requested:hover:not(:disabled),
[data-skin="bitup-soft"] .vtable-foot .join-btn.requested:hover:not(:disabled) {
  background: var(--red-500, #e5484d);
  color: #fff;
  animation: none;
}
[data-skin="bitup-soft"] .t-card .join-btn.requested:disabled,
[data-skin="bitup-soft"] .vtable-foot .join-btn.requested:disabled {
  animation: none; opacity: 0.7;
}
@keyframes join-req-pulse {
  0%, 100% { box-shadow: 3px 3px 0 var(--shadow-ink-strong); }
  50% { box-shadow: 3px 3px 0 var(--shadow-ink-strong), 0 0 0 3px var(--yellow-200, rgba(245,197,24,0.35)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-skin="bitup-soft"] .join-btn.requested { animation: none; }
}

/* ── Action group: equal-height seat-block + join-btn ─────────────
 * Both children get a fixed 56px height (not min-height) and reset their
 * own padding/min-height so neither can expand past the other. */
[data-skin="bitup-soft"] .t-card .action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
[data-skin="bitup-soft"] .t-card .action > .seat-block,
[data-skin="bitup-soft"] .t-card .action > .join-btn {
  height: 56px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
[data-skin="bitup-soft"] .t-card .action > .seat-block {
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  padding-right: 14px;
  min-width: 78px;
}
[data-skin="bitup-soft"] .t-card .action > .join-btn {
  padding-left: 18px;
  padding-right: 18px;
}

/* ── Unread indicator on table card ─────────────────────────────────
 * The full-width green ribbon at the top is the primary signal. Card gets
 * a subtle green border. No inset shadows / no aura — they clip the ribbon. */
[data-skin="bitup-soft"] .t-card.has-unread,
.t-card.has-unread {
  border-color: var(--green-500, #16a34a) !important;
  border-width: 2px;
}
/* Make sure the ribbon's negative top-margin doesn't get clipped by an
 * accidental overflow:hidden on the card. */
.t-card .t-card__unread-ribbon {
  position: relative;
  z-index: 1;
}
[data-skin="bitup-soft"] .t-card__unread {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--danger);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  white-space: nowrap;
  animation: t-card-unread-pulse 0.9s ease-in-out infinite;
}
[data-skin="bitup-soft"] .t-card__unread svg { color: #fff; }
@keyframes t-card-unread-pulse {
  0%, 100% { transform: scale(1); box-shadow: 2px 2px 0 var(--shadow-ink-strong); }
  50%      { transform: scale(1.08); box-shadow: 2px 2px 0 var(--shadow-ink-strong), 0 0 0 4px rgba(220, 38, 38, 0.30); }
}

/* Full-width red ribbon at the very top of the card. Impossible to miss:
 * spans the card edge-to-edge, has its own danger background, large text
 * and a pulsing left icon. Pushes the rest of the card content down. */
[data-skin="bitup-soft"] .t-card .t-card__unread-ribbon,
.t-card .t-card__unread-ribbon {
  /* Rendered as a <button> so the whole ribbon is a click target that opens
   * the table chat. Reset the native button chrome (it keeps only the
   * border-bottom below) and make it span the card edge-to-edge. */
  appearance: none;
  -webkit-appearance: none;
  width: calc(100% + 28px);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -14px -14px 12px;
  padding: 9px 14px;
  background: var(--green-500, #16a34a);
  color: #fff;
  border-bottom: 2px solid var(--ink);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-align: center;
  animation: t-card-ribbon-pulse 1.1s ease-in-out infinite;
}
.t-card .t-card__unread-ribbon:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
/* Precise unread count inside the ribbon — dark pip on the green bar so the
 * number stays legible. Mirrors the pixel-badge convention (ink border, no
 * radius, Press Start 2P). */
[data-skin="bitup-soft"] .t-card .t-card__unread-ribbon-count,
.t-card .t-card__unread-ribbon-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 2px 5px;
  background: var(--ink);
  color: #fff;
  border: 2px solid #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
}
[data-skin="bitup-soft"] .t-card .t-card__unread-ribbon svg,
.t-card .t-card__unread-ribbon svg { color: #fff; }
@keyframes t-card-ribbon-pulse {
  0%, 100% { background: var(--green-500, #16a34a); }
  50%      { background: var(--green-700, #15803d); }
}
@media (max-width: 640px) {
  [data-skin="bitup-soft"] .t-card .t-card__unread-ribbon {
    font-size: 9px;
    padding: 8px 10px;
    margin: -14px -14px 10px;
  }
}

/* ── Mobile (≤640px): stack seats on top of action; prevent overflow ──
 * The desktop .row3 is a horizontal flex (seats | action) which on phones
 * overflows the card and creates a horizontal scroll. Switch to a column
 * layout, drop avatar size a notch and let seats wrap onto multiple rows
 * without spilling out of the card. */
@media (max-width: 640px) {
  [data-skin="bitup-soft"] .t-card {
    overflow: hidden;
  }
  [data-skin="bitup-soft"] .t-card .row3 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  [data-skin="bitup-soft"] .t-card .row3 .seats {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  [data-skin="bitup-soft"] .t-card .host-slot .av,
  [data-skin="bitup-soft"] .t-card .avs .av,
  [data-skin="bitup-soft"] .t-card .avs .av + .av {
    width: 38px;
    height: 38px;
    font-size: 11px;
  }
  [data-skin="bitup-soft"] .t-card .avs {
    gap: 5px;
  }
  /* Action: full-width row with seat-block + join-btn split 50/50 so it
   * sits comfortably under the seats. */
  [data-skin="bitup-soft"] .t-card .action {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  [data-skin="bitup-soft"] .t-card .action > .seat-block,
  [data-skin="bitup-soft"] .t-card .action > .join-btn {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Title + meta should also wrap cleanly, never push the card wider. */
  [data-skin="bitup-soft"] .t-card h2 {
    word-break: break-word;
  }
  [data-skin="bitup-soft"] .t-card .meta {
    flex-wrap: wrap;
  }
}
[data-skin="bitup-soft"] .t-card .join-btn.full,
[data-skin="bitup-soft"] .vtable-foot .join-btn.full {
  background: var(--bg-2); color: var(--ink-3); border-color: var(--border-strong);
  box-shadow: 1px 1px 0 var(--shadow-ink);
}

/* ============================================================
   SIDEBAR profile / stats / rep / fav-games
   ============================================================ */
[data-skin="bitup-soft"] .profile-id .big-av {
  background: var(--accent);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  color: #fff;
}
[data-skin="bitup-soft"] .profile-id .who .name { color: var(--ink); }
[data-skin="bitup-soft"] .profile-id .who .meta { color: var(--ink-2); }

[data-skin="bitup-soft"] .stat-tile {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .stat-tile.heat { background: var(--accent-tint); border-color: var(--accent); }
[data-skin="bitup-soft"] .stat-tile .n { color: var(--accent); text-shadow: none; }
[data-skin="bitup-soft"] .stat-tile .l { color: var(--ink-2); }

[data-skin="bitup-soft"] .rep-row,
[data-skin="bitup-soft"] .fav-game {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .rep-row .ln { color: var(--ink); }
[data-skin="bitup-soft"] .rep-row .num { color: var(--ink); }
[data-skin="bitup-soft"] .rep-row.good .num { color: var(--green-700); }
[data-skin="bitup-soft"] .rep-row.warn .num { color: var(--yellow-700); }
[data-skin="bitup-soft"] .rep-row.bad  .num { color: var(--red-700); }
[data-skin="bitup-soft"] .fav-game .cv { border: 1.5px solid var(--ink); color: #fff; }
[data-skin="bitup-soft"] .fav-game .name { color: var(--ink); }
[data-skin="bitup-soft"] .fav-game .meta { color: var(--ink-3); }

/* ============================================================
   FAV-GAMES — 2-column grid of square game cards (sidebar)
   ============================================================ */
[data-skin="bitup-soft"] .fav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
[data-skin="bitup-soft"] .fav-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 9px;
  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 ease;
  min-width: 0;
}
[data-skin="bitup-soft"] .fav-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .fav-card:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .fav-card-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  overflow: hidden;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(26,24,32,0.06) 3px 4px
  );
}
[data-skin="bitup-soft"] .fav-card-cover .box-cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
[data-skin="bitup-soft"] .fav-card-cover .box-glyph {
  font-size: 22px;
  letter-spacing: 0.02em;
}
[data-skin="bitup-soft"] .fav-card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-height: 2.7em;
}

/* ============================================================
   FAV-GAME v3 — full row with proper box-cover thumbnail
   ============================================================ */
[data-skin="bitup-soft"] .fav-game.v3 {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
  color: var(--ink);
}
[data-skin="bitup-soft"] .fav-game.v3 + .fav-game.v3 { margin-top: 8px; }
[data-skin="bitup-soft"] .fav-game.v3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .fav-game.v3 .fg-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
[data-skin="bitup-soft"] .fav-game.v3 .name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
[data-skin="bitup-soft"] .fav-game.v3 .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
[data-skin="bitup-soft"] .fav-game.v3 .tags {
  display: flex; gap: 4px; margin-top: 2px;
}
[data-skin="bitup-soft"] .fav-game.v3 .tg {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 0.06em;
  padding: 3px 5px;
  background: var(--success-tint);
  color: var(--green-700);
  border: 1px solid var(--success);
  border-radius: 2px;
}

/* ============================================================
   BOX COVER — mini board-game box-front sprite placeholder
   ============================================================ */
[data-skin="bitup-soft"] .box-cover {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  image-rendering: pixelated;
  overflow: hidden;
  border-radius: 1px;
}
/* Lighter top band — fake the lit top edge of a box */
[data-skin="bitup-soft"] .box-cover .box-top-stripe {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18%;
  background: rgba(255,255,255,0.22);
  border-bottom: 1.5px solid rgba(26,24,32,0.30);
}
/* Right-side spine — fake the thickness of the box */
[data-skin="bitup-soft"] .box-cover .box-side {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 14%;
  background: rgba(0,0,0,0.20);
  border-left: 1.5px solid rgba(26,24,32,0.30);
}
/* Bottom-left highlight corner */
[data-skin="bitup-soft"] .box-cover .box-corner {
  position: absolute;
  left: 0; bottom: 0;
  width: 22%; height: 18%;
  background: rgba(255,255,255,0.10);
  border-top: 1.5px solid rgba(255,255,255,0.18);
  border-right: 1.5px solid rgba(255,255,255,0.18);
}
/* Pixel-font initials, centered */
[data-skin="bitup-soft"] .box-cover .box-glyph {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.45);
  padding-left: 0; padding-right: 14%; /* compensate for spine */
}

/* ============================================================
   FAV CTA — "ВСЕ МОИ ИГРЫ →" button at the bottom of the panel
   ============================================================ */
[data-skin="bitup-soft"] .fav-cta {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
[data-skin="bitup-soft"] .fav-cta:hover {
  background: var(--accent);
  border-color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .fav-cta .lbl { flex: 1; }
[data-skin="bitup-soft"] .fav-cta .cnt {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  letter-spacing: 0;
}
[data-skin="bitup-soft"] .fav-cta i { flex-shrink: 0; color: currentColor; }

/* ============================================================
   EXPANSION PICKER — dropdown that lists table expansions
   ============================================================ */
[data-skin="bitup-soft"] .exp-picker {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin-top: -2px;
  margin-bottom: 8px;
}
[data-skin="bitup-soft"] .exp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms ease;
}
[data-skin="bitup-soft"] .exp-trigger:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .exp-trigger.open {
  background: var(--accent);
  color: #fff;
  box-shadow: 1px 1px 0 var(--shadow-ink-strong);
  transform: translate(1px, 1px);
}
[data-skin="bitup-soft"] .exp-count {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 9px;
  padding: 4px 5px 3px;
  background: var(--secondary);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 1px 1px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .exp-trigger.open .exp-count {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.55);
}
[data-skin="bitup-soft"] .exp-dots {
  display: inline-flex; gap: 2px;
}
[data-skin="bitup-soft"] .exp-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
  box-sizing: border-box;
  padding: 0;
}
/* Inner green pip — centred via flex on the parent so it always sits dead
 * centre regardless of border-box rounding. Big enough to read at a glance. */
[data-skin="bitup-soft"] .exp-dot::after {
  content: "";
  display: block;
  width: 8px; height: 8px;
  background: var(--green-500, #16a34a);
  border: 1px solid var(--ink);
  border-radius: 1px;
}
[data-skin="bitup-soft"] .exp-trigger.open .exp-dot {
  border-color: rgba(255,255,255,0.7);
}
[data-skin="bitup-soft"] .exp-label { line-height: 1; }
[data-skin="bitup-soft"] .exp-chevron {
  transition: transform 120ms steps(3, end);
  color: currentColor;
}
[data-skin="bitup-soft"] .exp-trigger.open .exp-chevron { transform: rotate(180deg); }

[data-skin="bitup-soft"] .exp-menu {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 6px;
  min-width: 260px;
  max-width: 320px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  z-index: 30;
  padding: 8px;
}
[data-skin="bitup-soft"] .exp-menu-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 4px 8px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  border-bottom: 1px dashed var(--border-strong);
  margin-bottom: 6px;
}
[data-skin="bitup-soft"] .exp-menu-count {
  color: var(--ink);
  background: var(--bg-2);
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
}
[data-skin="bitup-soft"] .exp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12px;
  transition: background 90ms, border-color 90ms, transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
[data-skin="bitup-soft"] .exp-row + .exp-row { margin-top: 5px; }
[data-skin="bitup-soft"] .exp-row:hover {
  background: var(--surface);
  border-color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .exp-row-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 1px 1px 0 var(--shadow-ink);
  box-sizing: border-box;
  padding: 0;
  background: var(--surface);
}
/* Same inner-pip treatment as .exp-dot — keeps the "expansion present"
 * signal readable even if the expansion has no brand colour. */
[data-skin="bitup-soft"] .exp-row-dot::after {
  content: "";
  display: block;
  width: 9px; height: 9px;
  background: var(--green-500, #16a34a);
  border: 1px solid var(--ink);
  border-radius: 1px;
}
[data-skin="bitup-soft"] .exp-row-short {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink);
  padding: 3px 5px 2px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  flex-shrink: 0;
  line-height: 1;
}
[data-skin="bitup-soft"] .exp-row-name {
  flex: 1; min-width: 0;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   SEAT v3 — big portrait + tiny smooth meeple, click-only popover
   ============================================================ */
/* Layout: the seat is positioned by inline style from JSX. Inside,
   stack the portrait (primary), meeple (secondary, behind/under),
   and nameplate. */
[data-skin="bitup-soft"] .seat.v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  outline: none;
  /* keep the centering transform from the base .seat rule */
  transform: translate(-50%, -50%);
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Pedestal — soft shadow disc under the portrait */
[data-skin="bitup-soft"] .seat.v3 .seat-pedestal {
  position: absolute;
  left: 50%; top: 38px;
  transform: translateX(-50%);
  width: 38px; height: 6px;
  background: radial-gradient(ellipse at center, rgba(26,24,32,0.42) 0%, rgba(26,24,32,0.10) 60%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  transition: width 120ms ease, opacity 120ms ease;
}

/* PORTRAIT — the dominant face element */
[data-skin="bitup-soft"] .seat.v3 .seat-portrait {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.32);
  background-image:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 38%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,0.32) 0%, transparent 55%);
  background-blend-mode: screen, multiply;
  z-index: 2;
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 120ms ease;
}
[data-skin="bitup-soft"] .seat.v3 .sp-initials {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
}
/* Host crown — pixel-art star, no background/border, sits at the very
 * top-left of the 44px portrait (mascot lives in bottom-right, so the
 * star takes the opposite corner to keep both readable). Drop-shadow
 * keeps it visible against any avatar colour behind it. */
[data-skin="bitup-soft"] .seat.v3 .seat-portrait .sp-host-badge,
[data-skin="bitup-soft"] .seat.v3 .sp-host-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  right: auto;
  bottom: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  z-index: 5;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Pixel mascot — larger secondary marker, anchored to the portrait's
 * bottom-right, lifted up and pushed outward so it reads as a clear
 * companion icon next to the avatar rather than tucked behind it. */
[data-skin="bitup-soft"] .seat.v3 .seat-portrait .meeple-wrap.mini {
  position: absolute;
  bottom: -14px; right: -16px;
  width: auto; height: auto;
  z-index: 3;
  pointer-events: none;
  animation: none !important;          /* override base idle wobble */
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-skin="bitup-soft"] .seat.v3:not(.you):hover .seat-portrait .meeple-wrap.mini {
  transform: translate(2px, -3px);
}

/* Nameplate — clean sans-serif, sharp */
[data-skin="bitup-soft"] .seat.v3 .nameplate.v3-clear {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  padding: 3px 7px;
  margin-top: 6px;
  max-width: 96px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: transform 100ms steps(2, end), box-shadow 100ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .seat.v3.host .nameplate.v3-clear { background: var(--warning); color: var(--ink); }
[data-skin="bitup-soft"] .seat.v3.you  .nameplate.v3-clear { background: var(--accent); color: #fff; }

/* HOVER — clear "I am clickable" affordance: portrait floats up, gets ring */
[data-skin="bitup-soft"] .seat.v3:not(.you):hover {
  transform: translate(-50%, calc(-50% - 4px));
}
[data-skin="bitup-soft"] .seat.v3:not(.you):hover .seat-portrait {
  box-shadow: 3px 4px 0 var(--shadow-ink-strong),
              0 0 0 3px var(--surface),
              0 0 0 4.5px var(--accent);
  animation: seat-pulse 1.6s ease-in-out infinite;
}
[data-skin="bitup-soft"] .seat.v3:not(.you):hover .seat-pedestal { width: 44px; }
[data-skin="bitup-soft"] .seat.v3:not(.you):hover .nameplate.v3-clear {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .seat.v3:not(.you):focus-visible .seat-portrait {
  box-shadow: 2px 2px 0 var(--shadow-ink-strong),
              0 0 0 3px var(--surface),
              0 0 0 4.5px var(--secondary);
}
@keyframes seat-pulse {
  0%, 100% { box-shadow: 3px 4px 0 var(--shadow-ink-strong), 0 0 0 3px var(--surface), 0 0 0 4.5px var(--accent); }
  50%      { box-shadow: 3px 4px 0 var(--shadow-ink-strong), 0 0 0 4px var(--surface), 0 0 0 6px var(--accent); }
}

/* OPEN state — portrait stays elevated */
[data-skin="bitup-soft"] .seat.v3.open .seat-portrait {
  box-shadow: 3px 4px 0 var(--shadow-ink-strong),
              0 0 0 3px var(--surface),
              0 0 0 4.5px var(--secondary);
  animation: none;
}
[data-skin="bitup-soft"] .seat.v3.open .nameplate.v3-clear {
  background: var(--secondary);
  color: #fff;
}

/* Popover — click-triggered (no hover) */
[data-skin="bitup-soft"] .seat.v3 .seat-pop {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 230px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  padding: 10px;
  z-index: 60;
  transform: translateX(-50%);
  animation: seat-pop-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: left;
}
@keyframes seat-pop-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
[data-skin="bitup-soft"] .seat.v3 .seat-pop::after {
  content: "";
  position: absolute;
  bottom: -7px; left: 50%;
  width: 10px; height: 10px;
  background: var(--surface);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
[data-skin="bitup-soft"] .seat-pop-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  padding: 0;
  z-index: 2;
}
[data-skin="bitup-soft"] .seat-pop-close:hover { background: var(--danger); color: #fff; border-color: var(--ink); }
[data-skin="bitup-soft"] .seat-pop-head {
  display: flex; gap: 9px; align-items: center;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--border-strong);
  margin-bottom: 9px;
  padding-right: 24px; /* room for close button */
}
[data-skin="bitup-soft"] .seat-pop-av {
  width: 38px; height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  background-image:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 38%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,0.30) 0%, transparent 50%);
  background-blend-mode: screen, multiply;
}
[data-skin="bitup-soft"] .seat-pop-meta { min-width: 0; }
[data-skin="bitup-soft"] .seat-pop-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
[data-skin="bitup-soft"] .seat-pop-role {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 2px;
}
[data-skin="bitup-soft"] .seat.v3.host .seat-pop-role { color: var(--yellow-700); }
[data-skin="bitup-soft"] .seat-pop-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin-bottom: 9px;
}
[data-skin="bitup-soft"] .seat-pop-stats > div {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 2px;
  padding: 6px 4px;
  text-align: center;
}
[data-skin="bitup-soft"] .seat-pop-stats b {
  display: block;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 11px;
  color: var(--ink);
  line-height: 1;
}
[data-skin="bitup-soft"] .seat-pop-stats span {
  display: block;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 5.5px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  margin-top: 4px;
}
[data-skin="bitup-soft"] .seat-pop-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.10em;
  padding: 9px 8px;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  border-radius: 2px;
  text-decoration: none;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .seat-pop-cta:hover {
  background: var(--accent-deep);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
}

/* ── Mobile modal ─────────────────────────────────────────────────────
 * SeatPopover renders itself via React portal into <body> as
 * .seat-pop-overlay > .seat-pop.seat-pop--modal. These rules are
 * UNSCOPED (no [data-skin=...] prefix) — the modal must be usable
 * in every theme (bgf, bitup, bitup-soft). Otherwise on bgf the
 * overlay+modal have no styles → invisible/untappable on mobile.
 */
.seat-pop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgb(0 0 0 / 55%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: seat-pop-overlay-in 140ms ease-out;
}
@keyframes seat-pop-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Modal-variant card. Self-contained — does NOT rely on `.seat.v3 .seat-pop`
 * defaults (those are scoped to the seat tooltip and don't apply here). */
.seat-pop.seat-pop--modal {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong, var(--ink));
  border-radius: 2px;
  padding: 20px 16px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: seat-pop-modal-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes seat-pop-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.seat-pop.seat-pop--modal::after { display: none; }
.seat-pop.seat-pop--modal .seat-pop-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, var(--bg-2));
  border: 1.5px solid var(--border-strong, var(--ink));
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  padding: 0;
}
.seat-pop.seat-pop--modal .seat-pop-close:hover {
  background: var(--danger, var(--red-500));
  color: #fff;
  border-color: var(--ink);
}
/* Inner elements — needed inside the modal in every theme. */
.seat-pop.seat-pop--modal .seat-pop-head {
  display: flex; align-items: center; gap: 12px;
}
.seat-pop.seat-pop--modal .seat-pop-av {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 12px;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 2px;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 35%);
}
.seat-pop.seat-pop--modal .seat-pop-meta { min-width: 0; flex: 1; }
.seat-pop.seat-pop--modal .seat-pop-name {
  font-family: var(--font-body, 'Onest', sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.seat-pop.seat-pop--modal .seat-pop-role {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  margin-top: 4px;
}
.seat-pop.seat-pop--modal .seat-pop-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.seat-pop.seat-pop--modal .seat-pop-stats > div {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  background: var(--bg-2);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.seat-pop.seat-pop--modal .seat-pop-stats b {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 12px;
  color: var(--ink);
  font-weight: normal;
}
.seat-pop.seat-pop--modal .seat-pop-stats span {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 6px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  margin-top: 4px;
}
.seat-pop.seat-pop--modal .seat-pop-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 10px;
  letter-spacing: 0.10em;
  padding: 12px 10px;
  background: var(--accent, var(--green-500));
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink, var(--ink));
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
.seat-pop.seat-pop--modal .seat-pop-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

/* ============================================================
   INVITE-FRIENDS MODAL — opened from an empty seat (.t-p-card.empty)
   Reuses .seat-pop-overlay for the backdrop. Card frame mirrors
   .seat-pop--modal so both modals feel identical.
   ============================================================ */
.invf {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong, var(--ink));
  border-radius: 2px;
  padding: 20px 16px 12px;
  animation: seat-pop-modal-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.invf-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, var(--bg-2));
  border: 1.5px solid var(--border-strong, var(--ink));
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  padding: 0;
}
.invf-close:hover {
  background: var(--danger, var(--red-500));
  color: #fff;
  border-color: var(--ink);
}
.invf-head { margin-bottom: 12px; }
.invf-title {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.invf-sub {
  margin-top: 6px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.invf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.invf-empty {
  padding: 24px 8px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}
.invf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--surface-2, var(--bg-2));
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink, var(--ink));
  border-radius: 2px;
}
.invf-av {
  flex: none;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-pixel); font-size: 11px;
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.invf-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invf-body { flex: 1; min-width: 0; }
.invf-name {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invf-meta {
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-3);
}
.invf-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px; letter-spacing: 0.06em;
  padding: 9px 10px;
  background: var(--accent, var(--green-500));
  color: #fff;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink, var(--ink));
  border-radius: 2px;
  cursor: pointer;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
.invf-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
.invf-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   VTABLE — stick the foot to the bottom of the card
   ============================================================ */
[data-skin="bitup-soft"] .vtable {
  display: flex;
  flex-direction: column;
  /* Allow seat-popover to escape the card; .vtable in the base sheet uses
     overflow:hidden which clips the click-popover against the neighbouring
     table in the floor grid. */
  overflow: visible;
}
[data-skin="bitup-soft"] .vtable .vtable-foot {
  margin-top: auto;
}
/* Lift the card whose seat popover is open above its neighbours in the grid
   so the popover renders on top of the next .vtable. */
[data-skin="bitup-soft"] .vtable:has(.seat.v3.open) {
  z-index: 5;
}
[data-skin="bitup-soft"] .seat.v3.open {
  z-index: 6;
}

/* ============================================================
   ACTIVITY ITEM — bigger portrait avatar, stronger row
   ============================================================ */
[data-skin="bitup-soft"] .act-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  border-radius: 2px;
  color: var(--ink);
  position: relative;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .act-item:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .act-item .ai-av {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 11px;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  /* portrait shading — specular top-left + shadow bottom-right */
  background-image:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 40%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,0.32) 0%, transparent 55%);
  background-blend-mode: screen, multiply;
}
[data-skin="bitup-soft"] .act-item .txt {
  flex: 1; min-width: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
[data-skin="bitup-soft"] .act-item .txt b {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
[data-skin="bitup-soft"] .act-item .txt .act-line {
  color: var(--ink-2);
}
[data-skin="bitup-soft"] .act-item .txt .act-who {
  line-height: 1.25;
}
[data-skin="bitup-soft"] .act-item .txt .act-verb {
  color: var(--ink-2);
  line-height: 1.3;
  margin-top: 1px;
}
[data-skin="bitup-soft"] .act-item .txt .act-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
[data-skin="bitup-soft"] .act-item .txt .act-target {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
[data-skin="bitup-soft"] .act-item .txt .t {
  display: inline-block;
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 6.5px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
}
[data-skin="bitup-soft"] .act-item > i[data-lucide],
[data-skin="bitup-soft"] .act-item > svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--accent);
  flex-shrink: 0;
  padding: 5px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  box-sizing: content-box;
}

/* ============================================================
   REPUTATION PANEL — hero score, stacked bar, animated rows
   ============================================================ */
[data-skin="bitup-soft"] .rep-panel .rep-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; }

/* Hero — big % score + 5 hearts */
[data-skin="bitup-soft"] .rep-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: var(--success-tint);
  border: 1.5px solid var(--success);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
[data-skin="bitup-soft"] .rep-hero::before {
  /* faint dotted scanline backdrop */
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(26,24,32,0.04) 3px 4px);
  pointer-events: none;
}
[data-skin="bitup-soft"] .rep-hero-num {
  display: flex; flex-direction: column; gap: 2px;
}
[data-skin="bitup-soft"] .rep-hero-val {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 26px;
  line-height: 1;
  color: var(--green-700);
  text-shadow: 2px 2px 0 rgba(80,162,100,0.18);
  letter-spacing: 0.02em;
}
[data-skin="bitup-soft"] .rep-hero-val small { font-size: 14px; opacity: 0.8; margin-left: 2px; }
[data-skin="bitup-soft"] .rep-hero-lbl {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: var(--green-700);
}
[data-skin="bitup-soft"] .rep-hero-hearts {
  display: flex; gap: 4px;
  position: relative; z-index: 1;
}
[data-skin="bitup-soft"] .rh-slot {
  display: inline-block;
  animation: rep-pop 360ms steps(4, end) backwards;
  animation-delay: var(--hb-delay, 0ms);
}
[data-skin="bitup-soft"] .rh-slot.on {
  animation: rep-pop 360ms steps(4, end) backwards, rep-heartbeat 2.4s ease-in-out infinite;
  animation-delay: var(--hb-delay, 0ms), calc(700ms + var(--hb-delay, 0ms));
}
@keyframes rep-pop {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes rep-heartbeat {
  0%, 70%, 100% { transform: scale(1); }
  82%           { transform: scale(1.14); }
  90%           { transform: scale(1); }
  96%           { transform: scale(1.08); }
}

/* Stacked overview bar (good | warn | bad) */
[data-skin="bitup-soft"] .rep-bar-stack {
  display: flex;
  height: 10px;
  background: var(--bg-2);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 1px 1px 0 var(--shadow-ink);
}
[data-skin="bitup-soft"] .rb-seg {
  height: 100%;
  width: 0;
  animation: rep-grow 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--rb-delay, 0ms);
  position: relative;
}
[data-skin="bitup-soft"] .rb-seg.good { background: var(--success); }
[data-skin="bitup-soft"] .rb-seg.warn { background: var(--warning); }
[data-skin="bitup-soft"] .rb-seg.bad  { background: var(--danger); }
[data-skin="bitup-soft"] .rb-seg + .rb-seg { border-left: 1.5px solid var(--ink); }
@keyframes rep-grow { from { width: 0; } to { width: var(--final-width, currentWidth); } }
/* Above won't work — we want each seg to keep its inline width.
   So instead animate via clip-path: grow the visible portion from 0 → 100% */
[data-skin="bitup-soft"] .rb-seg {
  animation-name: rep-clip;
}
@keyframes rep-clip {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Detail rows */
[data-skin="bitup-soft"] .rep-rows { display: flex; flex-direction: column; gap: 6px; }
[data-skin="bitup-soft"] .rep-row.v3 {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
  position: relative;
  overflow: hidden;
}
[data-skin="bitup-soft"] .rep-row.v3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .rep-row.v3 .rr-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 1px 1px 0 var(--shadow-ink);
  color: #fff;
}
[data-skin="bitup-soft"] .rep-row.v3.good .rr-icon { background: var(--success); }
[data-skin="bitup-soft"] .rep-row.v3.warn .rr-icon { background: var(--warning); color: var(--ink); }
[data-skin="bitup-soft"] .rep-row.v3.bad  .rr-icon { background: var(--danger); }
[data-skin="bitup-soft"] .rep-row.v3 .rr-icon i,
[data-skin="bitup-soft"] .rep-row.v3 .rr-icon svg { color: currentColor; }

[data-skin="bitup-soft"] .rep-row.v3 .rr-body { flex: 1; min-width: 0; }
[data-skin="bitup-soft"] .rep-row.v3 .rr-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
[data-skin="bitup-soft"] .rep-row.v3 .rr-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
}
[data-skin="bitup-soft"] .rep-row.v3 .rr-num {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink);
  animation: rep-num-pop 500ms steps(5, end) backwards;
  animation-delay: var(--bar-delay, 0ms);
}
[data-skin="bitup-soft"] .rep-row.v3.good .rr-num { color: var(--green-700); }
[data-skin="bitup-soft"] .rep-row.v3.warn .rr-num { color: var(--yellow-700); }
[data-skin="bitup-soft"] .rep-row.v3.bad  .rr-num { color: var(--red-700); }
@keyframes rep-num-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* The horizontal bar */
[data-skin="bitup-soft"] .rep-row.v3 .rr-bar {
  height: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
[data-skin="bitup-soft"] .rep-row.v3 .rr-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--bar-pct, 0%);
  background: var(--ink);
  clip-path: inset(0 100% 0 0);
  animation: rep-fill 800ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--bar-delay, 0ms);
}
[data-skin="bitup-soft"] .rep-row.v3.good .rr-bar-fill { background: var(--success); }
[data-skin="bitup-soft"] .rep-row.v3.warn .rr-bar-fill { background: var(--warning); }
[data-skin="bitup-soft"] .rep-row.v3.bad  .rr-bar-fill { background: var(--danger); }
@keyframes rep-fill {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Sweep shimmer when hovering a row */
[data-skin="bitup-soft"] .rep-row.v3 .rr-bar-fill::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  opacity: 0;
}
[data-skin="bitup-soft"] .rep-row.v3:hover .rr-bar-fill::after {
  opacity: 1;
  animation: rep-sweep 1.1s linear infinite;
}
@keyframes rep-sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(440%); }
}

/* ============================================================
   PROFILE CARD v3 — meatier player ID with portrait, level, XP, streak
   ============================================================ */
[data-skin="bitup-soft"] .profile-card.v3 {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--surface) 60%);
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
/* faint scanline overlay across the whole card */
[data-skin="bitup-soft"] .profile-card.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;
}

[data-skin="bitup-soft"] .profile-card.v3 .profile-id {
  display: flex; align-items: flex-start; gap: 14px;
  position: relative; z-index: 1;
}

[data-skin="bitup-soft"] .profile-av-wrap {
  position: relative;
  flex-shrink: 0;
}
[data-skin="bitup-soft"] .profile-card.v3 .big-av.portrait {
  width: 64px; height: 64px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 18px;
  color: #fff;
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  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;
  position: relative;
}
[data-skin="bitup-soft"] .status-pip {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  background: var(--success);
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--ink);
  z-index: 2;
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
[data-skin="bitup-soft"] .lvl-badge {
  position: absolute;
  top: -6px; right: -10px;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  background: var(--warning);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--shadow-ink-strong);
  z-index: 3;
  transform: rotate(4deg);
}

[data-skin="bitup-soft"] .profile-card.v3 .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
[data-skin="bitup-soft"] .profile-card.v3 .name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
[data-skin="bitup-soft"] .profile-card.v3 .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  display: inline-flex; align-items: center;
  letter-spacing: 0.02em;
}
[data-skin="bitup-soft"] .profile-card.v3 .meta i { color: var(--accent); }

/* XP bar */
[data-skin="bitup-soft"] .xp-bar {
  position: relative;
  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"] .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"] .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.65);
  pointer-events: none;
}

/* Stat tiles — bigger, with click-lift */
[data-skin="bitup-soft"] .profile-card.v3 .profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  position: relative; z-index: 1;
}
[data-skin="bitup-soft"] .profile-card.v3 .stat-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  text-align: left;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}
[data-skin="bitup-soft"] .profile-card.v3 .stat-tile:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .profile-card.v3 .stat-tile.heat {
  background: var(--accent);
  color: #fff;
}
[data-skin="bitup-soft"] .profile-card.v3 .stat-tile .n {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.06);
  line-height: 1;
}
[data-skin="bitup-soft"] .profile-card.v3 .stat-tile.heat .n { color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.30); }
[data-skin="bitup-soft"] .profile-card.v3 .stat-tile .l {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  line-height: 1.25;
  text-transform: uppercase;
}
[data-skin="bitup-soft"] .profile-card.v3 .stat-tile.heat .l { color: rgba(255,255,255,0.85); }

/* Footer streak/fav strip — full-width stacked rows so long names don't overflow */
[data-skin="bitup-soft"] .profile-streak {
  display: flex; flex-direction: column; gap: 5px;
  position: relative; z-index: 1;
}
[data-skin="bitup-soft"] .ps-cell {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--shadow-ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-transform: uppercase;
  min-width: 0;
}
[data-skin="bitup-soft"] .ps-cell > svg { flex-shrink: 0; }
[data-skin="bitup-soft"] .ps-cell b {
  color: var(--ink);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 10px;
  letter-spacing: 0;
  font-weight: normal;
}
[data-skin="bitup-soft"] .ps-txt {
  flex: 1; min-width: 0;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- FAV "любимая игра" HERO CELL ---
   Wide 2-col card: square box-cover on the left + stacked label/title/meta
   on the right. Matches the rest of the cabinet palette — cream surface,
   ink border, soft drop shadow — with a small yellow caption pill as the
   only accent so it reads as "featured" without breaking the page rhythm. */
[data-skin="bitup-soft"] .ps-cell.fav {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: stretch;
  gap: 11px;
  padding: 9px;
  background: var(--green-100);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  position: relative;
  overflow: hidden;
}
/* Hairline top accent — pixel marquee in the warm yellow, but only 3px tall
   so it doesn't dominate the card */
[data-skin="bitup-soft"] .ps-cell.fav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--purple-500);
  pointer-events: none;
}
/* Square cover slot — same treatment as the fav-card thumbnails above */
[data-skin="bitup-soft"] .ps-cell.fav .ps-fav-cover {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink-strong);
  overflow: hidden;
  border-radius: 2px;
  align-self: center;
}
[data-skin="bitup-soft"] .ps-cell.fav .ps-fav-cover .box-cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
[data-skin="bitup-soft"] .ps-cell.fav .ps-fav-cover .box-glyph {
  font-size: 22px;
  letter-spacing: 0.02em;
}
/* Right-hand body — vertical stack, justify-center so short titles stay
   visually centered next to the square cover */
[data-skin="bitup-soft"] .ps-cell.fav .ps-fav-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding-top: 0;
}
/* Caption: tiny warm-honey pill */
[data-skin="bitup-soft"] .ps-cell.fav .ps-fav-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 7px 3px 5px;
  background: var(--green-500);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .ps-cell.fav .ps-fav-caption > svg { color: var(--ink); }
/* Meta row — partis / win rate, muted body type */
[data-skin="bitup-soft"] .ps-cell.fav .ps-fav-meta {
  display: block;
  margin-top: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-transform: uppercase;
}

/* ============================================================
   CREATE-CTA — substantial "СОЗДАТЬ СТОЛ" button in feed header
   ============================================================ */
[data-skin="bitup-soft"] .create-cta {
  display: inline-flex; align-items: stretch;
  background: var(--secondary);
  color: #fff;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink-strong);
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  overflow: hidden;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
  cursor: pointer;
}
[data-skin="bitup-soft"] .create-cta:hover {
  background: var(--secondary-hover);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .create-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .create-cta .cc-plus {
  display: flex; align-items: center; justify-content: center;
  width: 40px;
  background: var(--ink);
  color: #fff;
  border-right: 1.5px solid var(--ink);
  position: relative;
}
[data-skin="bitup-soft"] .create-cta .cc-plus::after {
  /* tiny scanline */
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.06) 3px 4px);
  pointer-events: none;
}
[data-skin="bitup-soft"] .create-cta:hover .cc-plus i { animation: cc-spin 600ms steps(8, end); }
@keyframes cc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }
}
[data-skin="bitup-soft"] .create-cta .cc-text {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px 14px 8px 10px;
  line-height: 1;
}
[data-skin="bitup-soft"] .create-cta .cc-lbl {
  font-size: 10px;
  letter-spacing: 0.10em;
  line-height: 1.4;
  color: #fff;
}
[data-skin="bitup-soft"] .create-cta .cc-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255,255,255,0.78);
  text-transform: lowercase;
}

/* ============================================================
   ACTIVITY RAIL
   ============================================================ */
[data-skin="bitup-soft"] .act-item {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .act-item .ai-av { border: 1.5px solid var(--ink); color: #fff; }
[data-skin="bitup-soft"] .act-item .txt { color: var(--ink); }
[data-skin="bitup-soft"] .act-item .t { color: var(--ink-3); }

/* ============================================================
   VISUAL TABLE
   ============================================================ */
[data-skin="bitup-soft"] .vtable {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  border-radius: 2px;
  overflow: visible;  /* allow expansion dropdown to escape */
}
[data-skin="bitup-soft"] .vtable:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .vtable.yours { border-color: var(--accent); }
[data-skin="bitup-soft"] .vtable.full  { background: var(--bg-2); }
[data-skin="bitup-soft"] .vtable .meta .m { color: var(--ink-2); }
[data-skin="bitup-soft"] .vtable .meta .m i { color: var(--accent); }
[data-skin="bitup-soft"] .vtable-head .id { color: var(--ink-3); }
[data-skin="bitup-soft"] .vtable h3 { color: var(--ink); }
[data-skin="bitup-soft"] .vtable-foot {
  border-top: 1px dashed var(--border-strong);
  align-items: stretch;
}
[data-skin="bitup-soft"] .vtable-foot .stats { align-items: stretch; }
[data-skin="bitup-soft"] .vtable-foot .stats .seat-pill,
[data-skin="bitup-soft"] .vtable-foot .join-btn {
  min-height: 40px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
[data-skin="bitup-soft"] .vtable-foot .stats .seat-pill {
  background: var(--success-tint); color: var(--green-700);
  border: 1.5px solid var(--success); border-radius: 2px;
}
[data-skin="bitup-soft"] .vtable.full  .vtable-foot .stats .seat-pill { background: var(--danger-tint);  color: var(--red-700);    border-color: var(--danger); }
[data-skin="bitup-soft"] .vtable.yours .vtable-foot .stats .seat-pill { background: var(--accent);       color: #fff;              border-color: var(--ink); }
[data-skin="bitup-soft"] .vtable-foot .stats .seat-pill.last         { background: var(--warning-tint); color: var(--yellow-700); border-color: var(--warning); }
[data-skin="bitup-soft"] .vtable-foot .stats .seat-pill .seat-pill-check { display: none; }
@media (max-width: 640px) {
  [data-skin="bitup-soft"] .vtable-foot .stats .seat-pill .seat-pill-check { display: inline-flex; }
  [data-skin="bitup-soft"] .vtable-foot .stats .seat-pill .seat-pill-label { display: none; }
}

/* FELT — the green table baize stays */
[data-skin="bitup-soft"] .felt { border-color: var(--border-felt); }

/* ============================================================
   FELT NEEDS — requirement chips laid on the table (floor view).
   Sit as little place-cards straddling the felt's bottom edge,
   fanned slightly so they read as physical tokens on the baize.
   ============================================================ */
[data-skin="bitup-soft"] .felt-needs {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 5px;
  z-index: 6;
  pointer-events: none;
  max-width: 150%;
}
[data-skin="bitup-soft"] .felt-need {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 7px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 1px;
  box-shadow: 2px 2.5px 0 var(--shadow-ink-strong);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  /* fan: rotate around the bottom so the row arcs like dealt cards */
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 5deg));
  transform-origin: bottom center;
}
[data-skin="bitup-soft"] .felt-need > i {
  width: 13px; height: 13px;
  color: var(--accent);
  flex-shrink: 0;
}

/* SEAT NAMEPLATES */
[data-skin="bitup-soft"] .seat .nameplate {
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 1px 1px 0 var(--shadow-ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .seat.empty .nameplate { border-color: var(--border-strong); border-style: dashed; color: var(--ink-3); background: var(--bg-2); }
[data-skin="bitup-soft"] .seat.you .nameplate { background: var(--accent); color: #fff; border-color: var(--ink); }
[data-skin="bitup-soft"] .seat.host .nameplate { background: var(--warning); color: #2A1A00; border-color: var(--ink); }
[data-skin="bitup-soft"] .felt-dice { background: var(--surface); border-color: var(--ink); }
[data-skin="bitup-soft"] .felt-dice::after { background: var(--ink); }

/* The star marker that sits over the host meeple's head */
[data-skin="bitup-soft"] .seat.host .star { display: none; }   /* we'll render a Pixel sprite via JSX instead */

/* ============================================================
   VIEW TOGGLE
   ============================================================ */
[data-skin="bitup-soft"] .view-toggle {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .view-toggle button {
  background: var(--surface); color: var(--ink-2);
  border-right: 1.5px solid var(--ink);
}
[data-skin="bitup-soft"] .view-toggle button:last-child { border-right: 0; }
[data-skin="bitup-soft"] .view-toggle button.on { background: var(--accent); color: #fff; }
[data-skin="bitup-soft"] .view-toggle button:hover:not(.on) { background: var(--bg-2); color: var(--ink); }

/* ============================================================
   DICE LOADER — pixel d6 trio for loading states
   Selectors are skin-agnostic so the loader works under any theme.
   ============================================================ */
.dice-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 16px;
  text-align: center;
}
.dice-loader h3 {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--ink);
}
.dice-loader p {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ink-3);
  margin: 0;
}
.dice-loader__dice {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.dice-loader__die {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  /* Six dots painted via radial-gradient — kept pixel-flat (no blur). */
  background-image:
    radial-gradient(circle at 25% 25%, var(--ink) 2.5px, transparent 3px),
    radial-gradient(circle at 75% 25%, var(--ink) 2.5px, transparent 3px),
    radial-gradient(circle at 25% 75%, var(--ink) 2.5px, transparent 3px),
    radial-gradient(circle at 75% 75%, var(--ink) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 50%, var(--ink) 2.5px, transparent 3px);
  background-repeat: no-repeat;
  animation: dice-roll 1.2s cubic-bezier(0.36, 0, 0.66, 1) infinite;
}
.dice-loader__die--1 { animation-delay: 0s;    background-color: var(--green-300, #cce8c4); }
.dice-loader__die--2 { animation-delay: 0.18s; background-color: var(--purple-100, #e6dcfa); }
.dice-loader__die--3 { animation-delay: 0.36s; background-color: var(--yellow-300, #fde88f); }

@keyframes dice-roll {
  0%   { transform: translateY(0)    rotate(0deg);   }
  25%  { transform: translateY(-14px) rotate(90deg);  }
  50%  { transform: translateY(0)     rotate(180deg); }
  75%  { transform: translateY(-8px)  rotate(270deg); }
  100% { transform: translateY(0)     rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dice-loader__die { animation: none; }
}

/* ============================================================
   KIROV MAP
   ============================================================ */
[data-skin="bitup-soft"] .kirov-map {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .kirov-map .legend { color: var(--ink-3); }
[data-skin="bitup-soft"] .kirov-map svg .pin-tip { fill: var(--ink); }

/* ============================================================
   EMPTY STATE & KICKER
   ============================================================ */
[data-skin="bitup-soft"] .empty-state {
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  color: var(--ink-2);
  border-radius: 2px;
}
[data-skin="bitup-soft"] .empty-state h3 { color: var(--ink); }
[data-skin="bitup-soft"] .empty-state p  { color: var(--ink-2); }
[data-skin="bitup-soft"] .kicker { color: var(--ink-3); }
[data-skin="bitup-soft"] .kicker span { color: var(--ink); }

/* ============================================================
   ICONS — kill the harsh "drop-shadow(2px 2px 0 var(--ink))"
   that some inline styles still apply
   ============================================================ */
[data-skin="bitup-soft"] svg { color: currentColor; }
[data-skin="bitup-soft"] i[data-lucide] { color: currentColor; }

/* ============================================================
   Scrollbars + selection
   ============================================================ */
[data-skin="bitup-soft"] ::selection { background: var(--accent); color: #fff; }
[data-skin="bitup-soft"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-skin="bitup-soft"] ::-webkit-scrollbar-track { background: var(--bg-2); }
[data-skin="bitup-soft"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg-2); }
[data-skin="bitup-soft"] ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ============================================================
   Create table — game picker default list
   Desktop renders 6 recent tiles; mobile (≤880px) clamps to 4.
   In search mode (.game-pick-list without .is-default) we keep
   the original auto-fill grid and show every match.
   ============================================================ */
@media (max-width: 880px) {
  .game-pick-list.is-default .game-tile:nth-child(n+5) { display: none; }
}

/* ============================================================
   JOIN REQUIREMENTS MODAL
   Shown when sitting at a table that has requirements. Player
   ticks what they'll cover (all optional).
   ============================================================ */
[data-skin="bitup-soft"] .req-modal-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 24, 32, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: rm-fade 120ms steps(3, end);
}
@keyframes rm-fade { from { opacity: 0; } to { opacity: 1; } }
[data-skin="bitup-soft"] .req-modal {
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--shadow-ink-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rm-pop 120ms steps(3, end);
}
@keyframes rm-pop { from { transform: translate(2px, 2px); } to { transform: translate(0, 0); } }
[data-skin="bitup-soft"] .req-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--accent);
  border-bottom: 2px solid var(--ink);
}
[data-skin="bitup-soft"] .req-modal-head .rm-title { display: flex; flex-direction: column; gap: 6px; }
[data-skin="bitup-soft"] .req-modal-head h3 {
  margin: 0;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(0,0,0,0.28);
}
[data-skin="bitup-soft"] .req-modal-head .rm-sub {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}
[data-skin="bitup-soft"] .req-modal-head .rm-close {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid #fff;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  transition: background 120ms, transform 90ms steps(2, end);
}
[data-skin="bitup-soft"] .req-modal-head .rm-close:hover { background: rgba(255,255,255,0.28); transform: translate(-1px,-1px); }

[data-skin="bitup-soft"] .req-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
[data-skin="bitup-soft"] .req-modal-body .rm-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
[data-skin="bitup-soft"] .req-list { display: flex; flex-direction: column; gap: 10px; }
[data-skin="bitup-soft"] .req-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  cursor: pointer;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), border-color 120ms, background 120ms;
}
[data-skin="bitup-soft"] .req-opt:hover {
  border-color: var(--ink);
  background: var(--surface-2);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .req-opt.on {
  border-color: var(--ink);
  background: var(--accent-tint, var(--surface-2));
}
[data-skin="bitup-soft"] .req-opt .req-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  color: #fff;
}
[data-skin="bitup-soft"] .req-opt.on .req-check { background: var(--accent); }
[data-skin="bitup-soft"] .req-opt .req-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 2px;
  color: var(--ink-2);
}
[data-skin="bitup-soft"] .req-opt.on .req-icon { border-color: var(--accent); color: var(--accent); }
[data-skin="bitup-soft"] .req-opt .req-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-skin="bitup-soft"] .req-opt .req-lbl {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8.5px;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--ink);
}
[data-skin="bitup-soft"] .req-opt .req-short {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-3);
}

[data-skin="bitup-soft"] .req-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1.5px solid var(--ink);
  background: var(--surface);
}
[data-skin="bitup-soft"] .req-modal-foot .rm-count {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--ink-3);
}
[data-skin="bitup-soft"] .req-modal-foot .rm-actions { display: flex; gap: 10px; }
[data-skin="bitup-soft"] .req-modal-foot .rm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end), background 120ms;
}
[data-skin="bitup-soft"] .req-modal-foot .rm-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
  background: var(--surface-2);
}
[data-skin="bitup-soft"] .req-modal-foot .rm-btn.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 3px 3px 0 var(--shadow-ink-strong);
}
[data-skin="bitup-soft"] .req-modal-foot .rm-btn.primary:hover { background: var(--accent-deep); }

@media (max-width: 560px) {
  [data-skin="bitup-soft"] .req-modal-back { padding: 0; align-items: flex-end; }
  [data-skin="bitup-soft"] .req-modal { max-width: none; border-radius: 2px 2px 0 0; box-shadow: none; }
  [data-skin="bitup-soft"] .req-modal-foot { flex-direction: column-reverse; align-items: stretch; }
  [data-skin="bitup-soft"] .req-modal-foot .rm-actions { justify-content: stretch; }
  [data-skin="bitup-soft"] .req-modal-foot .rm-btn { flex: 1; justify-content: center; }
  [data-skin="bitup-soft"] .req-modal-foot .rm-count { text-align: center; }
}