/* ============================================================
   bitUp DARK SKIN — overrides for BGF Create Game
   ------------------------------------------------------------
   Applies the bitUp Design System (dark surfaces, purple primary,
   hot-pink accents, neon green/amber, hard #000 shadows, Inter
   body + Press Start 2P display) on top of the existing 8-bit
   light-cream styles. Scoped to [data-skin="bitup"] so the v2
   HTML opts in and the original BGF cream theme stays untouched.
   ============================================================ */

@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"] {
  /* ---------- Surfaces (dark, cool-violet near-black) ---------- */
  --bg:         #0B0B12;
  --paper:      #0B0B12;
  --bg-2:       #1C1C28;     /* hover / raised / panel-head stripes */
  --paper-2:    #1C1C28;
  --surface:    #13131C;     /* card */
  --surface-2:  #252535;     /* nested / hover */

  /* ---------- Foreground (inverted) ---------- */
  --ink:        #E6E6F0;
  --ink-2:      #B4B4C6;
  --ink-3:      #7A7A92;
  --ink-inverse:#0B0B12;

  /* ---------- Borders & dividers ---------- */
  --border:        #3A3A4A;
  --border-strong: #52526A;
  --border-felt:   #3A3A4A;
  --border-subtle: #2A2A38;

  /* ---------- Shadow ink (kept pure #000 per bitUp) ---------- */
  --shadow-ink: #000;

  /* ---------- Brand & semantic remap ---------- */
  /* Cabinet stylesheet defines --accent = green-500. Swap to purple primary. */
  --accent:      #8B5CF6;
  --accent-deep: #A78BFA;
  --accent-tint: rgba(139, 92, 246, 0.18);

  /* Green → neon success */
  --green-100: rgba(61, 255, 138, 0.16);
  --green-300: #5DFF9F;
  --green-500: #3DFF8A;
  --green-700: #5DFF9F;
  --green-900: #07140C;

  /* Purple → bitUp primary purple */
  --purple-100: rgba(139, 92, 246, 0.22);
  --purple-300: #C4B5FD;
  --purple-500: #8B5CF6;
  --purple-700: #C4B5FD;
  --purple-900: #2E1065;

  /* Red → arcade red */
  --red-100: rgba(255, 77, 94, 0.18);
  --red-300: #FF8E98;
  --red-500: #FF4D5E;
  --red-700: #FF8E98;

  /* Yellow → arcade amber */
  --yellow-300: rgba(255, 181, 46, 0.22);
  --yellow-500: #FFB52E;
  --yellow-700: #FFD27A;

  /* Hot pink — the bitUp signature (used for focus + one-thing accents) */
  --secondary:        #FF3DA5;
  --secondary-hover:  #FF6BBC;
  --secondary-tint:   rgba(255, 61, 165, 0.18);

  /* Status semantics (referenced by component rules below) */
  --success:        #3DFF8A;
  --success-tint:   rgba(61, 255, 138, 0.16);
  --warning:        #FFB52E;
  --warning-tint:   rgba(255, 181, 46, 0.22);
  --danger:         #FF4D5E;
  --danger-tint:    rgba(255, 77, 94, 0.18);

  /* ---------- Type ---------- */
  --font-body:  'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  /* Display font (Press Start 2P) is already loaded by colors_and_type.css */

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

/* ============================================================
   Global page bg + scanline overlay (decoration, very subtle)
   ============================================================ */
[data-skin="bitup"] body,
body:has([data-skin="bitup"]) {
  background: var(--bg, #0B0B12);
}
[data-skin="bitup"] {
  /* Sprite-sheet grid checker — mirrors the bitup-soft pattern in
   * bgf-cabinet-v3.css so the two themes feel consistent. Lines are
   * faint white on the dark page paper. */
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 8px 8px, 32px 32px;
}

/* ============================================================
   TOP BAR
   ============================================================ */
[data-skin="bitup"] .cab-top {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
[data-skin="bitup"] .cab-top .brand .mark {
  background: var(--accent);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .cab-top .crumb { color: var(--ink-3); }
[data-skin="bitup"] .cab-top .crumb b { color: var(--ink); }
[data-skin="bitup"] .cab-top .icon-btn,
[data-skin="bitup"] .cab-top .me {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  color: var(--ink);
}
[data-skin="bitup"] .cab-top .icon-btn:hover,
[data-skin="bitup"] .cab-top .me:hover {
  border-color: var(--border-strong);
  background: var(--bg-2);
}
[data-skin="bitup"] .cab-top .icon-btn .pip {
  background: var(--secondary);
  color: #fff;
  border: 1px solid var(--ink);
}
[data-skin="bitup"] .cab-top .me .av {
  background: var(--accent);
  border: 1px solid var(--ink);
  color: var(--fg-on-primary, #fff);
}
[data-skin="bitup"] .cab-top .me .c { color: var(--ink-3); }

/* ============================================================
   CREATE HEADER
   ============================================================ */
[data-skin="bitup"] .create-header h1 {
  color: var(--ink);
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
}
[data-skin="bitup"] .create-header p { color: var(--ink-2); }
[data-skin="bitup"] .create-header .back { color: var(--ink-3); }
[data-skin="bitup"] .create-header .back:hover { color: var(--secondary); }

/* ============================================================
   FORM SECTIONS / CARDS
   ============================================================ */
[data-skin="bitup"] .form-section,
[data-skin="bitup"] .panel,
[data-skin="bitup"] .publish-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
[data-skin="bitup"] .form-section .head,
[data-skin="bitup"] .panel-head {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
[data-skin="bitup"] .form-section .head .step {
  background: var(--accent);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  color: #fff;
}
[data-skin="bitup"] .form-section.optional .head .step {
  background: var(--bg-2);
  color: var(--ink-3);
  border-color: var(--border);
}
[data-skin="bitup"] .form-section .head h2 { color: var(--ink); }
[data-skin="bitup"] .form-section .head .hint { color: var(--ink-3); }

/* ============================================================
   FIELD ATOMS
   ============================================================ */
[data-skin="bitup"] .field-label { color: var(--ink); }
[data-skin="bitup"] .field-label .req { color: var(--secondary); }
[data-skin="bitup"] .field-hint { color: var(--ink-3); }
[data-skin="bitup"] .field-hint.private { color: var(--accent-deep); }

[data-skin="bitup"] .pix-input,
[data-skin="bitup"] .pix-textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}
[data-skin="bitup"] .pix-input::placeholder,
[data-skin="bitup"] .pix-textarea::placeholder { color: var(--ink-3); }
[data-skin="bitup"] .pix-input:focus,
[data-skin="bitup"] .pix-textarea:focus {
  background: var(--bg-2);
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--secondary);
  outline: 0;
}

/* ============================================================
   CHIPS — toggle pills (genres, complexity, base-game picker)
   ============================================================ */
[data-skin="bitup"] .chip-pick {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  transition: transform var(--dur-fast, 80ms) var(--ease-step), box-shadow var(--dur-fast, 80ms) var(--ease-step), background var(--dur-base, 120ms) var(--ease-snap), color var(--dur-base, 120ms) var(--ease-snap);
}
[data-skin="bitup"] .chip-pick:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--ink);
}
[data-skin="bitup"] .chip-pick.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .chip-pick.on i { color: #fff; }
[data-skin="bitup"] .chip-pick.purple.on { background: var(--secondary); }
[data-skin="bitup"] .chip-pick.yellow.on { background: var(--warning, #FFB52E); color: #2A1A00; }
[data-skin="bitup"] .chip-pick.red.on    { background: var(--red-500); }

/* ============================================================
   SEGMENTED (тип записи)
   ============================================================ */
[data-skin="bitup"] .segmented {
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .segmented .seg {
  background: transparent;
  border-right: 1px solid var(--border);
  color: var(--ink-2);
}
[data-skin="bitup"] .segmented .seg .t { color: var(--ink); }
[data-skin="bitup"] .segmented .seg .d { color: var(--ink-3); }
[data-skin="bitup"] .segmented .seg:hover { background: var(--surface-2); }
[data-skin="bitup"] .segmented .seg.on { background: var(--accent); }
[data-skin="bitup"] .segmented .seg.on .t,
[data-skin="bitup"] .segmented .seg.on .d { color: #fff; }
[data-skin="bitup"] .segmented .seg.on.purple { background: var(--secondary); }

/* ============================================================
   STEPPER (players, duration, age)
   ============================================================ */
[data-skin="bitup"] .stepper {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .stepper button {
  background: var(--bg-2);
  color: var(--ink);
  border-right: 1px solid var(--border);
}
[data-skin="bitup"] .stepper button:last-child {
  border-left: 1px solid var(--border);
  border-right: 0;
}
[data-skin="bitup"] .stepper button:hover { background: var(--accent-tint); color: var(--accent-deep); }
[data-skin="bitup"] .stepper .val {
  background: var(--surface);
  color: var(--accent-deep);
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
}

/* ============================================================
   GALLERY SLOTS
   ============================================================ */
[data-skin="bitup"] .gallery-slot {
  background: var(--bg-2);
  border: 1px dashed var(--border-strong);
  color: var(--ink-3);
}
[data-skin="bitup"] .gallery-slot:hover {
  background: var(--surface-2);
  border-color: var(--secondary);
  color: var(--secondary);
}
[data-skin="bitup"] .gallery-slot.filled {
  background: var(--ink-inverse);
  border: 1px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .gallery-slot .badge {
  background: var(--bg-1, #13131C);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
[data-skin="bitup"] .gallery-slot .badge.primary {
  background: var(--warning, #FFB52E);
  color: #2A1A00;
  border-color: var(--ink);
}
[data-skin="bitup"] .gallery-slot .controls button {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--ink);
}
[data-skin="bitup"] .gallery-slot .controls button.danger {
  background: var(--red-500);
  color: #fff;
  border-color: var(--ink);
}
[data-skin="bitup"] .gallery-slot .controls button.star {
  background: var(--warning, #FFB52E);
  color: #2A1A00;
  border-color: var(--ink);
}

/* ============================================================
   KIND PICKER MODAL
   ============================================================ */
[data-skin="bitup"] .kind-picker { background: rgba(0, 0, 0, 0.78); }
[data-skin="bitup"] .kind-picker-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 6px 6px 0 var(--shadow-ink), 0 0 0 1px var(--border-strong) inset;
}
[data-skin="bitup"] .kind-picker-card h3 { color: var(--ink); }
[data-skin="bitup"] .kind-picker-card h3 span:last-child { color: var(--ink-3) !important; }
[data-skin="bitup"] .kind-opt {
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .kind-opt:hover {
  box-shadow: 5px 5px 0 var(--shadow-ink);
  border-color: var(--secondary);
}
[data-skin="bitup"] .kind-opt .thumb { border-bottom: 1px solid var(--border); }
[data-skin="bitup"] .kind-opt .lbl {
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--border);
}

/* ============================================================
   BUTTONS — publish, secondary, back
   ============================================================ */
[data-skin="bitup"] .publish-bar .publish-btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
[data-skin="bitup"] .publish-bar .publish-btn:hover {
  background: var(--accent-deep);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
[data-skin="bitup"] .publish-bar .publish-btn:disabled {
  background: var(--bg-2);
  color: var(--ink-3);
  border-color: var(--border);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .publish-bar .secondary-btn,
[data-skin="bitup"] .secondary-btn {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .publish-bar .secondary-btn:hover,
[data-skin="bitup"] .secondary-btn:hover {
  background: var(--bg-2);
  border-color: var(--secondary);
  color: var(--secondary);
}

/* publish-bar status rows */
[data-skin="bitup"] .publish-bar .row { color: var(--ink-2); }
[data-skin="bitup"] .publish-bar .row.ok b   { color: var(--success, #3DFF8A); }
[data-skin="bitup"] .publish-bar .row.warn b { color: var(--warning, #FFB52E); }
[data-skin="bitup"] .publish-bar .row.bad b  { color: var(--danger, #FF4D5E); }
[data-skin="bitup"] .publish-bar .row b      { color: var(--ink); }

[data-skin="bitup"] .preview-label { color: var(--ink-3); }
[data-skin="bitup"] .preview-label .live { color: var(--success, #3DFF8A); }
[data-skin="bitup"] .preview-label .live::before {
  background: var(--success, #3DFF8A);
  border: 1px solid var(--ink);
  box-shadow: 0 0 8px rgba(61, 255, 138, 0.7);
}

/* ============================================================
   TAG PILLS (used inside game preview card)
   ============================================================ */
[data-skin="bitup"] .tag-pill {
  background: var(--secondary-tint);
  color: var(--secondary);
  border: 1px solid var(--secondary);
}
[data-skin="bitup"] .tag-pill.green  { background: var(--success-tint, rgba(61,255,138,0.16)); color: var(--success, #3DFF8A); border-color: var(--success, #3DFF8A); }
[data-skin="bitup"] .tag-pill.yellow { background: var(--warning-tint, rgba(255,181,46,0.18)); color: var(--warning, #FFB52E); border-color: var(--warning, #FFB52E); }
[data-skin="bitup"] .tag-pill.red    { background: var(--danger-tint,  rgba(255,77,94,0.18));  color: var(--danger,  #FF4D5E); border-color: var(--danger,  #FF4D5E); }

/* ============================================================
   COVER COLOR SWATCHES (in cover section)
   ============================================================ */
[data-skin="bitup"] .form-section .body button[style*="background"][style*="border:"] {
  border: 1px solid var(--ink) !important;
}

/* ============================================================
   ICON COLORS — sweep
   ============================================================ */
[data-skin="bitup"] svg { color: currentColor; }
[data-skin="bitup"] i[data-lucide] { color: currentColor; }

/* ============================================================
   GAME PREVIEW CARD (right rail) — has inline styles in JSX,
   so we need targeted overrides via the wrapping selector.
   ============================================================ */
[data-skin="bitup"] .preview-card > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 4px 4px 0 var(--shadow-ink) !important;
  color: var(--ink);
}
/* The "expansion" mini badge inside preview */
[data-skin="bitup"] .preview-card > div > div:first-child[style*="purple-100"] {
  background: var(--secondary-tint) !important;
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
}
/* The cover tile */
[data-skin="bitup"] .preview-card > div > div > div:first-child[style*="boxShadow"] {
  border: 1px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--shadow-ink) !important;
}
/* mini gallery main image frame */
[data-skin="bitup"] .preview-card > div > div[style*="aspectRatio"] { border-color: var(--border) !important; }

/* Generic inline-style overrides for purple-100 backgrounds (info banner under "adds") */
[data-skin="bitup"] [style*="purple-100"] {
  background: var(--secondary-tint) !important;
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
}

/* ============================================================
   PIXEL DECORATION — top-left corner notch on heading
   (sells the bitUp arcade vibe on the page hero)
   ============================================================ */
[data-skin="bitup"] .create-header > div { position: relative; }
[data-skin="bitup"] .create-header h1::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--secondary);
  margin-right: 10px;
  vertical-align: 4px;
  box-shadow:
    -8px 0 0 var(--secondary),
    0 -8px 0 var(--secondary),
    -8px -8px 0 var(--accent);
}

/* ============================================================
   Misc — links, scrollbars
   ============================================================ */
[data-skin="bitup"] a { color: inherit; }
[data-skin="bitup"] ::selection { background: var(--secondary); color: #fff; }
[data-skin="bitup"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-skin="bitup"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-skin="bitup"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg); }
[data-skin="bitup"] ::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

/* ============================================================
   Star unicode tinting inside chip rating
   ============================================================ */
[data-skin="bitup"] .chip-pick .star,
[data-skin="bitup"] .chip-pick span { color: inherit; }
[data-skin="bitup"] .chip-pick:not(.on) span { color: var(--warning, #FFB52E); }
[data-skin="bitup"] .chip-pick.on span { color: #fff; }

/* ============================================================
   CABINET — feed cards, seat blocks, filter chips, sidebar
   ============================================================ */
[data-skin="bitup"] .feed-header h1 {
  color: var(--ink);
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}
[data-skin="bitup"] .feed-header .sub { color: var(--ink-2); }

/* filter bar + chips */
[data-skin="bitup"] .filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .chip {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
}
[data-skin="bitup"] .chip:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
[data-skin="bitup"] .chip.on {
  background: var(--accent); color: #fff; border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .chip .n {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}
[data-skin="bitup"] .chip.on .n { background: rgba(0, 0, 0, 0.35); }

/* t-card (table cards in feed) */
[data-skin="bitup"] .t-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  color: var(--ink);
}
[data-skin="bitup"] .t-card:hover {
  border-color: var(--secondary);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
[data-skin="bitup"] .t-card.yours { background: var(--surface-2); border-color: var(--accent); }
[data-skin="bitup"] .t-card.full  { background: var(--bg-2); }
[data-skin="bitup"] .t-card .row1 .id { color: var(--ink-3); }
[data-skin="bitup"] .t-card h2 { color: var(--ink); }
[data-skin="bitup"] .t-card .hosted { color: var(--ink-3); }
[data-skin="bitup"] .t-card .meta .m { color: var(--ink-2); }
[data-skin="bitup"] .t-card .meta .m i { color: var(--accent); }

/* avatar pile */
[data-skin="bitup"] .t-card .avs .av { border: 1px solid var(--ink); }
[data-skin="bitup"] .t-card .avs .av.empty {
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 4px, var(--bg) 4px 8px);
  color: var(--ink-3);
  border-style: dashed;
  border-color: var(--border);
}

/* seat block (counter) */
[data-skin="bitup"] .seat-block {
  background: var(--success-tint, rgba(61,255,138,0.16));
  border: 1px solid var(--success, #3DFF8A);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  color: var(--success, #3DFF8A);
}
[data-skin="bitup"] .seat-block .n { color: var(--success, #3DFF8A); text-shadow: 0 0 8px rgba(61, 255, 138, 0.6); }
[data-skin="bitup"] .seat-block .l { color: var(--success, #3DFF8A); }
[data-skin="bitup"] .seat-block.last  { background: var(--warning-tint, rgba(255,181,46,0.22)); border-color: var(--warning, #FFB52E); }
[data-skin="bitup"] .seat-block.last .n,
[data-skin="bitup"] .seat-block.last .l { color: var(--warning, #FFB52E); text-shadow: 0 0 8px rgba(255,181,46,0.6); }
[data-skin="bitup"] .seat-block.full  { background: var(--danger-tint, rgba(255,77,94,0.18)); border-color: var(--danger, #FF4D5E); }
[data-skin="bitup"] .seat-block.full .n,
[data-skin="bitup"] .seat-block.full .l { color: var(--danger, #FF4D5E); }
[data-skin="bitup"] .seat-block.yours { background: var(--accent); border-color: var(--ink); color: #fff; }
[data-skin="bitup"] .seat-block.yours .n,
[data-skin="bitup"] .seat-block.yours .l { color: #fff; text-shadow: none; }

/* status badges */
[data-skin="bitup"] .t-badge {
  background: var(--success-tint, rgba(61,255,138,0.16));
  color: var(--success, #3DFF8A);
  border: 1px solid var(--success, #3DFF8A);
}
[data-skin="bitup"] .t-badge.filling { background: var(--warning-tint); color: var(--warning, #FFB52E); border-color: var(--warning, #FFB52E); }
[data-skin="bitup"] .t-badge.full    { background: var(--danger-tint);  color: var(--danger,  #FF4D5E); border-color: var(--danger,  #FF4D5E); }
[data-skin="bitup"] .t-badge.yours   { background: var(--accent); color: #fff; border-color: var(--ink); }

/* JOIN button — the bitUp signature CTA */
[data-skin="bitup"] .t-card .join-btn,
[data-skin="bitup"] .vtable-foot .join-btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
[data-skin="bitup"] .t-card .join-btn:hover,
[data-skin="bitup"] .vtable-foot .join-btn:hover {
  background: var(--accent-deep);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
[data-skin="bitup"] .t-card .join-btn.joined,
[data-skin="bitup"] .vtable-foot .join-btn.joined { background: var(--secondary); }
[data-skin="bitup"] .t-card .join-btn.full,
[data-skin="bitup"] .vtable-foot .join-btn.full {
  background: var(--bg-2); color: var(--ink-3); border-color: var(--border);
}

/* Sidebar profile card */
[data-skin="bitup"] .profile-id .big-av {
  background: var(--accent);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .profile-id .who .name { color: var(--ink); }
[data-skin="bitup"] .profile-id .who .meta { color: var(--ink-2); }

[data-skin="bitup"] .stat-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink);
}
[data-skin="bitup"] .stat-tile.heat { background: var(--accent-tint); border-color: var(--accent); }
[data-skin="bitup"] .stat-tile .n { color: var(--accent-deep); text-shadow: 0 0 8px rgba(167,139,250,0.5); }
[data-skin="bitup"] .stat-tile .l { color: var(--ink-2); }

[data-skin="bitup"] .rep-row,
[data-skin="bitup"] .fav-game {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .rep-row .ln { color: var(--ink); }
[data-skin="bitup"] .rep-row .num { color: var(--ink); }
[data-skin="bitup"] .rep-row.good .num { color: var(--success, #3DFF8A); }
[data-skin="bitup"] .rep-row.warn .num { color: var(--warning, #FFB52E); }
[data-skin="bitup"] .rep-row.bad  .num { color: var(--danger,  #FF4D5E); }
[data-skin="bitup"] .fav-game .cv { border: 1px solid var(--ink); }
[data-skin="bitup"] .fav-game .name { color: var(--ink); }
[data-skin="bitup"] .fav-game .meta { color: var(--ink-3); }

/* Activity rail */
[data-skin="bitup"] .act-item {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .act-item .ai-av { border: 1px solid var(--ink); }
[data-skin="bitup"] .act-item .txt { color: var(--ink); }
[data-skin="bitup"] .act-item .t { color: var(--ink-3); }

/* Empty state */
[data-skin="bitup"] .empty-state {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  color: var(--ink-2);
}
[data-skin="bitup"] .empty-state h3 { color: var(--ink); }
[data-skin="bitup"] .empty-state p  { color: var(--ink-2); }

/* Kirov map */
[data-skin="bitup"] .kirov-map {
  background: var(--bg-2);
  border: 1px solid var(--border);
}
[data-skin="bitup"] .kirov-map .legend { color: var(--ink-3); }
[data-skin="bitup"] .kirov-map svg .pin-tip { fill: var(--ink); }

/* Visual table (vtable) */
[data-skin="bitup"] .vtable {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
[data-skin="bitup"] .vtable:hover { border-color: var(--secondary); box-shadow: 6px 6px 0 var(--shadow-ink); }
[data-skin="bitup"] .vtable.yours { background: var(--surface-2); border-color: var(--accent); }
[data-skin="bitup"] .vtable.full  { background: var(--bg-2); }
[data-skin="bitup"] .vtable .meta .m { color: var(--ink-2); }
[data-skin="bitup"] .vtable .meta .m i { color: var(--accent); }
[data-skin="bitup"] .vtable-head .id { color: var(--ink-3); }
[data-skin="bitup"] .vtable h3 { color: var(--ink); }
[data-skin="bitup"] .vtable-foot { border-top: 1px dashed var(--border); }
[data-skin="bitup"] .vtable-foot .stats .seat-pill {
  background: var(--success-tint); color: var(--success, #3DFF8A); border: 1px solid var(--success, #3DFF8A);
}
[data-skin="bitup"] .vtable.full  .vtable-foot .stats .seat-pill { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
[data-skin="bitup"] .vtable.yours .vtable-foot .stats .seat-pill { background: var(--accent); color: #fff; border-color: var(--ink); }
[data-skin="bitup"] .vtable-foot .stats .seat-pill.last { background: var(--warning-tint); color: var(--warning); border-color: var(--warning); }

/* Felt board — keep it green (it's a board game table after all) but darken slightly */
[data-skin="bitup"] .felt { border-color: #5c2d15; }
[data-skin="bitup"] .seat .nameplate {
  background: var(--bg-1, #13131C); color: var(--ink); border: 1px solid var(--border-strong);
}
[data-skin="bitup"] .seat.empty .nameplate { border-color: var(--border); color: var(--ink-3); }
[data-skin="bitup"] .seat.you .nameplate { background: var(--accent); color: #fff; border-color: var(--ink); }
[data-skin="bitup"] .seat.host .nameplate { background: var(--warning); color: #2A1A00; border-color: var(--ink); }
[data-skin="bitup"] .felt-dice { background: var(--surface); border-color: var(--ink); }
[data-skin="bitup"] .felt-dice::after { background: var(--ink); }

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

[data-skin="bitup"] .kicker { color: var(--ink-3); }
[data-skin="bitup"] .kicker span { color: var(--ink); }

/* ============================================================
   CREATE TABLE specifics
   ============================================================ */
[data-skin="bitup"] .day-chip,
[data-skin="bitup"] .time-chip {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink);
}
[data-skin="bitup"] .day-chip:hover,
[data-skin="bitup"] .time-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
[data-skin="bitup"] .day-chip.on,
[data-skin="bitup"] .time-chip.on { background: var(--accent); border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow-ink); color: #fff; }
[data-skin="bitup"] .day-chip .dow,
[data-skin="bitup"] .day-chip .num,
[data-skin="bitup"] .day-chip .mo { color: var(--ink-2); }
[data-skin="bitup"] .day-chip.on .dow,
[data-skin="bitup"] .day-chip.on .num,
[data-skin="bitup"] .day-chip.on .mo { color: #fff; }

[data-skin="bitup"] .req-toggle {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .req-toggle:hover { background: var(--surface-2); }
[data-skin="bitup"] .req-toggle.on { background: var(--accent-tint); border-color: var(--accent); }
[data-skin="bitup"] .req-toggle .lbl i { color: var(--accent); }
[data-skin="bitup"] .req-toggle .lbl .t { color: var(--ink); }
[data-skin="bitup"] .req-toggle .lbl .d { color: var(--ink-2); }
[data-skin="bitup"] .req-toggle .knob {
  background: var(--surface); border: 1px solid var(--border);
}
[data-skin="bitup"] .req-toggle .knob::after { background: var(--ink-3); }
[data-skin="bitup"] .req-toggle.on .knob { background: var(--accent); border-color: var(--ink); }
[data-skin="bitup"] .req-toggle.on .knob::after { background: #fff; }

[data-skin="bitup"] .game-tile {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .game-tile:hover {
  background: var(--surface-2); border-color: var(--border-strong);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .game-tile.on { background: var(--accent); border-color: var(--ink); box-shadow: 3px 3px 0 var(--shadow-ink); }
[data-skin="bitup"] .game-tile .cov { border: 1px solid var(--ink); }
[data-skin="bitup"] .game-tile .nm { color: var(--ink); }
[data-skin="bitup"] .game-tile.on .nm { color: #fff; }
[data-skin="bitup"] .game-tile .meta { color: var(--ink-3); }
[data-skin="bitup"] .game-tile.on .meta { color: rgba(255,255,255,0.85); }

[data-skin="bitup"] .game-search {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .game-search input { color: var(--ink); }
[data-skin="bitup"] .game-search input::placeholder { color: var(--ink-3); }

[data-skin="bitup"] .invite-link {
  background: var(--secondary-tint); border: 1px solid var(--secondary); color: var(--secondary);
}
[data-skin="bitup"] .invite-link i { color: var(--secondary); }
[data-skin="bitup"] .invite-link button {
  background: var(--secondary); color: #fff; border: 1px solid var(--ink);
}

/* ============================================================
   GAME DETAIL — hero, gallery, tabs
   ============================================================ */
[data-skin="bitup"] .game-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 5px 5px 0 var(--shadow-ink);
}
[data-skin="bitup"] .game-hero .cover {
  border: 1px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow-ink);
}
[data-skin="bitup"] .game-hero .info .crumbline { color: var(--ink-3); }
[data-skin="bitup"] .game-hero .info .crumbline .status {
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
[data-skin="bitup"] .game-hero .info .crumbline .status--approved { background: var(--success); color: #07140C; }
[data-skin="bitup"] .game-hero .info .crumbline .status--pending  { background: var(--warning); color: #1A1100; }
[data-skin="bitup"] .game-hero .info .crumbline .status--rejected { background: var(--danger);  color: #fff; }
[data-skin="bitup"] .game-hero h1 { color: var(--ink); text-shadow: 0 0 12px rgba(139,92,246,0.4); }
[data-skin="bitup"] .game-hero .sub { color: var(--ink-2); }
[data-skin="bitup"] .game-hero p.desc { color: var(--ink); }
[data-skin="bitup"] .game-hero .stat-mini {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .game-hero .stat-mini i { color: var(--accent); }
[data-skin="bitup"] .game-hero .stat-mini b { color: var(--ink); }
[data-skin="bitup"] .game-hero .cta {
  background: var(--accent); color: #fff;
  border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-ink);
}
[data-skin="bitup"] .game-hero .cta:hover { background: var(--accent-deep); box-shadow: 6px 6px 0 var(--shadow-ink); }
[data-skin="bitup"] .game-hero .cta.secondary {
  background: var(--surface); color: var(--ink); border-color: var(--border-strong);
}

[data-skin="bitup"] .hero-gallery {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .hero-gallery .main-wrap { background: var(--ink); border: 1px solid var(--border); }
[data-skin="bitup"] .hero-gallery .arr {
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 3px 3px 0 var(--shadow-ink);
  color: var(--ink);
}
[data-skin="bitup"] .hero-gallery .arr:hover { border-color: var(--secondary); color: var(--secondary); }
[data-skin="bitup"] .hero-gallery .thumb { background: var(--ink); border: 1px solid var(--border); }
[data-skin="bitup"] .hero-gallery .thumb.on { border-color: var(--secondary); box-shadow: 3px 3px 0 var(--secondary); }

[data-skin="bitup"] .game-tabs {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .game-tabs button {
  background: var(--surface); color: var(--ink-2); border-right: 1px solid var(--border);
}
[data-skin="bitup"] .game-tabs button:last-child { border-right: 0; }
[data-skin="bitup"] .game-tabs button.on { background: var(--accent); color: #fff; }
[data-skin="bitup"] .game-tabs button:hover:not(.on) { background: var(--bg-2); color: var(--ink); }

[data-skin="bitup"] .tab-pane {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 3px 3px 0 var(--shadow-ink);
  color: var(--ink);
}
[data-skin="bitup"] .tab-pane h4 { color: var(--ink); }
[data-skin="bitup"] .tab-pane p, [data-skin="bitup"] .tab-pane li { color: var(--ink-2); }

[data-skin="bitup"] .tables-mini-list .table-mini {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .tables-mini-list .table-mini:hover { background: var(--surface-2); border-color: var(--border-strong); }
[data-skin="bitup"] .tables-mini-list .table-mini .id { color: var(--ink-3); }
[data-skin="bitup"] .tables-mini-list .table-mini .seats {
  background: var(--success-tint); color: var(--success); border: 1px solid var(--success);
}

[data-skin="bitup"] .game-rail .creator-card,
[data-skin="bitup"] .similar-row {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
}
[data-skin="bitup"] .game-rail .creator-card:hover,
[data-skin="bitup"] .similar-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
[data-skin="bitup"] .game-rail .creator-card .av { border: 1px solid var(--ink); }
[data-skin="bitup"] .game-rail .creator-card .name { color: var(--ink); }
[data-skin="bitup"] .game-rail .creator-card .meta { color: var(--ink-2); }
[data-skin="bitup"] .similar-row .cv { border: 1px solid var(--ink); }
[data-skin="bitup"] .similar-row .name { color: var(--ink); }
[data-skin="bitup"] .similar-row .meta { color: var(--ink-2); }
[data-skin="bitup"] .game-rail .panel-head .added-by { color: var(--ink-3); }

[data-skin="bitup"] .rating-bars .b { color: var(--ink-2); }
[data-skin="bitup"] .rating-bars .b .bar { background: var(--bg-2); border: 1px solid var(--border); }
[data-skin="bitup"] .rating-bars .b .fill {
  background-image: repeating-linear-gradient(45deg, var(--accent) 0 6px, var(--accent-deep) 6px 12px);
}
[data-skin="bitup"] .rating-bars .b .num { color: var(--ink); }

/* ============================================================
   CHAT — threads, messages, composer
   ============================================================ */
[data-skin="bitup"] .chat-threads,
[data-skin="bitup"] .chat-main,
[data-skin="bitup"] .composer {
  background: var(--surface); border: 1px solid var(--border);
}
[data-skin="bitup"] .chat-threads { box-shadow: 3px 3px 0 var(--shadow-ink); }
[data-skin="bitup"] .chat-main    { box-shadow: 3px 3px 0 var(--shadow-ink); }
[data-skin="bitup"] .chat-threads .head { background: var(--bg-2); border-bottom: 1px solid var(--border); }
[data-skin="bitup"] .chat-threads .head h3 { color: var(--ink); }
[data-skin="bitup"] .chat-threads .head .count { color: var(--ink-3); }
[data-skin="bitup"] .thread {
  border-bottom: 1px solid var(--border-subtle);
}
[data-skin="bitup"] .thread:hover { background: var(--bg-2); }
[data-skin="bitup"] .thread.on {
  background: var(--accent-tint);
  border-left: 4px solid var(--secondary);
}
[data-skin="bitup"] .thread .cov { border: 1px solid var(--ink); }
[data-skin="bitup"] .thread .meta .name { color: var(--ink); }
[data-skin="bitup"] .thread .meta .time { color: var(--ink-3); }
[data-skin="bitup"] .thread .meta .preview { color: var(--ink-2); }
[data-skin="bitup"] .thread .meta .preview.unread { color: var(--ink); }
[data-skin="bitup"] .thread .unread-pip {
  background: var(--secondary); color: #fff; border: 1px solid var(--ink);
}

[data-skin="bitup"] .chat-main .top { background: var(--bg-2); border-bottom: 1px solid var(--border); }
[data-skin="bitup"] .chat-main .top .cov { border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow-ink); }
[data-skin="bitup"] .chat-main .top h2 { color: var(--ink); }
[data-skin="bitup"] .chat-main .top .sub { color: var(--ink-2); }
[data-skin="bitup"] .chat-main .top .sub .dot {
  background: var(--success); border: 1px solid var(--ink); box-shadow: 0 0 8px rgba(61,255,138,0.7);
}
[data-skin="bitup"] .chat-main .top-actions .ib {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 2px 2px 0 var(--shadow-ink); color: var(--ink);
}
[data-skin="bitup"] .chat-main .top-actions .ib:hover { border-color: var(--secondary); color: var(--secondary); }

[data-skin="bitup"] .pinned {
  background: var(--warning-tint, rgba(255,181,46,0.18));
  border-bottom: 1px solid var(--warning, #FFB52E);
  color: var(--warning, #FFB52E);
}
[data-skin="bitup"] .pinned i { color: var(--warning, #FFB52E); }
[data-skin="bitup"] .pinned b { color: var(--warning, #FFB52E); }

[data-skin="bitup"] .thread-body {
  background: var(--bg-0, #0B0B12);
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 16px 16px;
}

[data-skin="bitup"] .divider::before,
[data-skin="bitup"] .divider::after { background: var(--border-strong); opacity: 1; }
[data-skin="bitup"] .divider span {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--border);
}

[data-skin="bitup"] .sys-msg {
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--border);
}
[data-skin="bitup"] .sys-msg.you  { background: var(--secondary-tint); color: var(--secondary); border-color: var(--secondary); }
[data-skin="bitup"] .sys-msg.host { background: var(--warning-tint); color: var(--warning); border-color: var(--warning); }
[data-skin="bitup"] .sys-msg.leave { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }

[data-skin="bitup"] .msg-row .av { border: 1px solid var(--ink); }
[data-skin="bitup"] .msg-row .bubble {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 2px 2px 0 var(--shadow-ink); color: var(--ink);
}
[data-skin="bitup"] .msg-row .bubble .who { color: var(--ink-3); }
[data-skin="bitup"] .msg-row .bubble .time { color: var(--ink-3); }
[data-skin="bitup"] .msg-row.me .bubble {
  background: var(--accent); color: #fff; border: 1px solid var(--ink);
}
[data-skin="bitup"] .msg-row.me .bubble .who  { color: rgba(255,255,255,0.85); }
[data-skin="bitup"] .msg-row.me .bubble .time { color: rgba(255,255,255,0.7); }

[data-skin="bitup"] .typing {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 2px 2px 0 var(--shadow-ink); color: var(--ink-2);
}
[data-skin="bitup"] .typing .dots i { background: var(--ink-3); }

[data-skin="bitup"] .composer { border-top: 1px solid var(--border); }
[data-skin="bitup"] .composer .ib {
  background: var(--accent); color: #fff; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .composer .ib:hover { background: var(--accent-deep); box-shadow: 4px 4px 0 var(--shadow-ink); }
[data-skin="bitup"] .composer .ib.secondary { background: var(--surface); color: var(--ink-2); }

/* Chat right rail — mini table info + countdown */
[data-skin="bitup"] .mini-table h4 { color: var(--ink); }
[data-skin="bitup"] .mini-table .mt-meta div { color: var(--ink-2); }
[data-skin="bitup"] .mini-table .mt-meta i { color: var(--accent); }
[data-skin="bitup"] .mini-table .mt-meta b { color: var(--ink); }

[data-skin="bitup"] .countdown-card { background: var(--bg-2); border: 1px solid var(--border); }
[data-skin="bitup"] .countdown-card .lbl { color: var(--ink-3); }
[data-skin="bitup"] .countdown-card .digits .seg {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--accent-deep);
  text-shadow: 0 0 8px rgba(167,139,250,0.5);
}
[data-skin="bitup"] .countdown-card .digits .colon { color: var(--ink-3); }

/* ============================================================
   LANDING — override its own dark-mode tokens
   The landing already supports body[data-theme="dark"] (warm brown).
   When v2 + bitUp is active, replace with the bitUp palette.
   ============================================================ */
[data-skin="bitup"] {
  /* These re-assert so the landing CSS file's :root :ddark vars don't win */
}
body[data-skin="bitup"][data-theme="dark"],
body[data-theme="dark"][data-skin="bitup"] {
  --bg:          #0B0B12;
  --bg-2:        #1C1C28;
  --paper:       #0B0B12;
  --paper-2:     #1C1C28;
  --surface:     #13131C;
  --surface-2:   #252535;
  --ink:         #E6E6F0;
  --ink-2:       #B4B4C6;
  --ink-3:       #7A7A92;
  --ink-inverse: #0B0B12;
  --border-subtle: #2A2A38;
  --accent:      #8B5CF6;
  --accent-deep: #A78BFA;
  --accent-tint: rgba(139,92,246,0.18);
}

/* Landing-specific surfaces */
[data-skin="bitup"] .nav { background: rgba(11,11,18,0.85); border-bottom: 1px solid var(--border); backdrop-filter: none; }
[data-skin="bitup"] .nav-logo .mark { background: var(--accent); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow-ink); }
[data-skin="bitup"] .nav-links a { color: var(--ink-2); }
[data-skin="bitup"] .nav-links a:hover { color: var(--secondary); }
[data-skin="bitup"] .nav-cta .login-btn {
  background: var(--accent); color: #fff; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-ink);
}

[data-skin="bitup"] .hero h1 { color: var(--ink); text-shadow: 0 0 16px rgba(139,92,246,0.4); }
[data-skin="bitup"] .hero h1 .em { color: var(--secondary); text-shadow: 0 0 12px rgba(255,61,165,0.5); }
[data-skin="bitup"] .hero p.lead { color: var(--ink-2); }
[data-skin="bitup"] .hero-eyebrow { color: var(--secondary); }
[data-skin="bitup"] .hero-eyebrow .pip { background: var(--secondary); border: 1px solid var(--ink); }
[data-skin="bitup"] .hero-trust .stat .n { color: var(--accent-deep); }
[data-skin="bitup"] .hero-trust .stat .l { color: var(--ink-3); }
[data-skin="bitup"] .hero-trust .sep { color: var(--border); }

[data-skin="bitup"] .section.alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
[data-skin="bitup"] .section-eyebrow { color: var(--secondary); }
[data-skin="bitup"] .section-title { color: var(--ink); }
[data-skin="bitup"] .section-sub { color: var(--ink-2); }

[data-skin="bitup"] .step .num {
  background: var(--accent); color: #fff; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .step h3 { color: var(--ink); }
[data-skin="bitup"] .step p  { color: var(--ink-2); }

[data-skin="bitup"] .feature {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 4px 4px 0 var(--shadow-ink); color: var(--ink);
}
[data-skin="bitup"] .feature:hover { border-color: var(--secondary); box-shadow: 6px 6px 0 var(--shadow-ink); }
[data-skin="bitup"] .feature h3 { color: var(--ink); }
[data-skin="bitup"] .feature p  { color: var(--ink-2); }
[data-skin="bitup"] .feature .icon-cap { background: var(--accent); border: 1px solid var(--ink); }
[data-skin="bitup"] .feature .icon-cap.purple { background: var(--secondary); }
[data-skin="bitup"] .feature .icon-cap.red    { background: var(--danger); }
[data-skin="bitup"] .feature .icon-cap.yellow { background: var(--warning); }

[data-skin="bitup"] .preview-header { color: var(--ink); }
[data-skin="bitup"] .preview-tagline { color: var(--ink-2); }
[data-skin="bitup"] .preview-tagline .live-dot { background: var(--success); border: 1px solid var(--ink); box-shadow: 0 0 8px rgba(61,255,138,0.7); }

[data-skin="bitup"] .store-badge {
  background: var(--accent); color: #fff; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-ink);
}
[data-skin="bitup"] .store-badge:hover { background: var(--accent-deep); }

/* Page paper checker — quiet it on dark */
[data-skin="bitup"] .page::before { opacity: 0; }

/* ============================================================
   /app/* mobile shell — bitUp overrides.
   Status badges were authored with light pastel backgrounds; on
   dark they need tinted backgrounds + bright foregrounds to keep
   readable contrast.
   ============================================================ */

[data-skin="bitup"] .pixel-badge--open {
  background: rgba(61, 255, 138, 0.18);
  color: var(--green-500);
}
[data-skin="bitup"] .pixel-badge--filling {
  background: rgba(255, 181, 46, 0.18);
  color: var(--yellow-500);
}
[data-skin="bitup"] .pixel-badge--full {
  background: rgba(255, 90, 90, 0.18);
  color: var(--red-500);
}
[data-skin="bitup"] .pixel-badge--pending {
  background: rgba(139, 92, 246, 0.22);
  color: var(--purple-500);
}

/* The avatar host star uses solid yellow; on dark keep readable. */
[data-skin="bitup"] .pixel-avatar__host {
  color: var(--ink-inverse);
}

/* Bottom nav: lift over dark stripe and bump contrast. */
[data-skin="bitup"] .app-bottom-nav {
  background: var(--bg-2);
}
[data-skin="bitup"] .app-bottom-nav__item--active {
  color: var(--green-500);
}

/* "You're in" purple card stays visible on dark. */
[data-skin="bitup"] .pixel-card--yours {
  background: var(--purple-100);
}

/* ============================================================
   SHARED inline-style override sweep — any element with a hex
   background that matches the legacy cream paper / sand swaps
   to the dark bg via attribute selectors. This catches stragglers
   set via inline JSX styles (game preview card, etc.).
   ============================================================ */
[data-skin="bitup"] [style*="#FFE9A8"],
[data-skin="bitup"] [style*="#F5C966"],
[data-skin="bitup"] [style*="#FFF5D2"],
[data-skin="bitup"] [style*="#F1E7CC"] {
  /* leave intentional content (game cover swatches use these as deliberate accent colors) */
}

/* ── Chat (bitUp dark) ──────────────────────────────── */
[data-skin="bitup"] .chat-thread {
  background: var(--bg);
}

[data-skin="bitup"] .chat-msg__bubble {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
}

[data-skin="bitup"] .chat-msg__bubble--mine {
  background: var(--accent, var(--purple-500));
  color: #fff;
}

[data-skin="bitup"] .chat-sys {
  background: var(--surface);
  border-color: var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
  color: var(--ink-2);
}

[data-skin="bitup"] .chat-composer {
  background: var(--bg);
  border-top-color: var(--ink-2);
}

[data-skin="bitup"] .chat-composer__input {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
}

[data-skin="bitup"] .chat-composer__send {
  background: var(--accent, var(--purple-500));
  border-color: var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
}

[data-skin="bitup"] .chat-presence {
  background: var(--surface);
  border-bottom-color: var(--ink-2);
}

/* ---- Modal + game picker (bitUp dark overrides) ---- */
[data-skin="bitup"] .app-modal {
  background: var(--paper);
  border: 1px solid var(--ink-2);
  box-shadow: 2px 2px 0 var(--ink-2);
}

[data-skin="bitup"] .game-picker__header {
  border-bottom-color: var(--ink-2);
}

[data-skin="bitup"] .game-picker__item {
  background: var(--surface, var(--paper-2));
  border: 1px solid var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
  color: var(--ink);
}

[data-skin="bitup"] .game-picker__item:hover {
  background: var(--paper-2);
}

[data-skin="bitup"] .game-picker__item--active {
  background: var(--accent, var(--purple-500));
  color: var(--ink);
  box-shadow: 0 0 0 var(--ink-2);
}

[data-skin="bitup"] .game-picker__item-meta {
  color: var(--ink-3);
}

[data-skin="bitup"] .game-picker__actions {
  border-top-color: var(--ink-2);
}

/* ---- Profile nav (bitUp dark) ---- */
[data-skin="bitup"] .profile-nav__link {
  background: var(--surface, var(--paper-2));
  border: 1px solid var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
  color: var(--ink);
}

[data-skin="bitup"] .profile-nav__hint {
  color: var(--ink-3);
}

/* ---- Recap (bitUp dark) ---- */
[data-skin="bitup"] .recap-hero {
  background: var(--surface, var(--paper-2));
  border: 1px solid var(--ink-2);
  box-shadow: 2px 2px 0 var(--ink-2);
  color: var(--ink);
}

[data-skin="bitup"] .recap-hero--with-winner {
  background: var(--accent, var(--purple-500));
  color: var(--ink);
}

[data-skin="bitup"] .recap-hero__eyebrow,
[data-skin="bitup"] .recap-hero__title,
[data-skin="bitup"] .recap-hero__meta {
  color: var(--ink);
}

[data-skin="bitup"] .recap-hero__winner {
  background: var(--paper);
  border: 1px solid var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
}

[data-skin="bitup"] .recap-hero__crown {
  color: var(--ink-3);
}

[data-skin="bitup"] .recap-leaderboard__row {
  background: var(--surface, var(--paper-2));
  border: 1px solid var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
}

[data-skin="bitup"] .recap-cta {
  background: var(--accent, var(--purple-500));
  border: 1px solid var(--ink-2);
  box-shadow: 1px 1px 0 var(--ink-2);
  color: var(--ink);
}