/* ===================================================================
   3babees — skins via html[data-skin]
   cinema | arena | classic | night | rose | sand | neon | mist
   Strong surface overrides so skins actually change the UI.
   =================================================================== */

:root {
  --bb-ink: #120e0a;
  --bb-glass: rgba(42, 28, 16, 0.62);
  --bb-glass-2: rgba(36, 24, 14, 0.88);
  --bb-line: rgba(255, 196, 110, 0.18);
  --bb-line-lit: rgba(255, 186, 72, 0.55);
  --bb-text: #fff6e8;
  --bb-dim: #d4c0a4;
  --bb-blue: #e8a54b;
  --bb-violet: #c9832e;
  --bb-cyan: #f0c674;
  --bb-a: #e85d4c;
  --bb-b: #d4a017;
  --bb-ok: #6bcf8e;
  --bb-bad: #ff6b6b;
  --bb-gold: #ffc857;
  --bb-accent: #ffb347;
  --bb-glow: rgba(255, 179, 71, 0.35);
  --bb-brand-grad: linear-gradient(135deg, #ffe4a8, #ffb347 45%, #e08a2a);
  --bb-cta-grad: linear-gradient(135deg, #f0b14a, #c87820);
  --bb-cta-fg: #1a1006;
  --bb-mark-grad: linear-gradient(145deg, #ffb347, #e08a2a 55%, #c87820);
  --bb-chip-grad: linear-gradient(135deg, rgba(240, 177, 74, 0.32), rgba(200, 120, 32, 0.2));
  --bb-topbar-bg: linear-gradient(180deg, rgba(42, 28, 16, 0.94), rgba(24, 16, 10, 0.92));
  --bb-atmosphere:
    radial-gradient(ellipse 90% 55% at 15% -10%, rgba(255, 170, 60, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 45% at 95% 5%, rgba(180, 80, 30, 0.22), transparent 50%),
    linear-gradient(180deg, #1a120a 0%, #120e0a 55%, #0a0704 100%);
}

/* ---- Shared hooks (use tokens; never clip brand-mark) ---- */
html[data-skin] .babees-hero-brand-name {
  background: var(--bb-brand-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 10px 24px var(--bb-glow)) !important;
}
html[data-skin] .babees-brand-mark {
  background: var(--bb-mark-grad) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 20px var(--bb-glow) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #fff !important;
  filter: none !important;
}
html[data-skin] .babees-brand-mark .bb-i { color: #fff !important; }
html[data-skin] .babees-btn-primary,
html[data-skin] .babees-cta-primary,
html[data-skin] .babees-start-btn,
html[data-skin] #babees-start,
html[data-skin] #babees-create-room,
html[data-skin] #babees-pay-go,
html[data-skin] #babees-profile-save,
html[data-skin] #place_order {
  background: var(--bb-cta-grad) !important;
  color: var(--bb-cta-fg) !important;
  border-color: color-mix(in srgb, var(--bb-accent) 45%, transparent) !important;
}
html[data-skin] .babees-tab.is-active {
  background: var(--bb-cta-grad) !important;
  color: var(--bb-cta-fg) !important;
  box-shadow: 0 10px 24px var(--bb-glow) !important;
}
html[data-skin] .babees-topbar {
  background: var(--bb-topbar-bg) !important;
  border-color: var(--bb-line) !important;
}
html[data-skin] .babees-wallet-chip {
  border-color: color-mix(in srgb, var(--bb-accent) 45%, transparent) !important;
  background: var(--bb-chip-grad) !important;
}
html[data-skin] .babees-hero-kicker { color: var(--bb-cyan) !important; }
html[data-skin] .babees-hero-lead,
html[data-skin] .babees-brand-sub { color: color-mix(in srgb, var(--bb-dim) 88%, transparent) !important; }
html[data-skin] .babees-panel,
html[data-skin] .babees-player-slim,
html[data-skin] .babees-mode-card,
html[data-skin] .babees-lobby-more,
html[data-skin] .babees-player-card,
html[data-skin] .babees-wallet-summary,
html[data-skin] .babees-join-panel {
  background: var(--bb-glass) !important;
  border-color: var(--bb-line) !important;
}
html[data-skin] .babees-canvas-body,
html[data-skin] body.babees-canvas-body {
  background: var(--bb-ink) !important;
}
html[data-skin] .babees-install {
  background: var(--bb-cta-grad) !important;
  color: var(--bb-cta-fg) !important;
}

html[data-skin] .babees-atmosphere {
  background: var(--bb-atmosphere, var(--bb-ink)) !important;
}

/* ---- cinema ---- */
html[data-skin="cinema"] {
  --bb-ink: #120e0a;
  --bb-glass: rgba(42, 28, 16, 0.62);
  --bb-glass-2: rgba(36, 24, 14, 0.88);
  --bb-line: rgba(255, 196, 110, 0.22);
  --bb-line-lit: rgba(255, 186, 72, 0.55);
  --bb-text: #fff6e8;
  --bb-dim: #d4c0a4;
  --bb-blue: #e8a54b;
  --bb-violet: #c9832e;
  --bb-cyan: #f0c674;
  --bb-a: #e85d4c;
  --bb-b: #d4a017;
  --bb-accent: #ffb347;
  --bb-glow: rgba(255, 179, 71, 0.35);
  --bb-brand-grad: linear-gradient(135deg, #ffe4a8, #ffb347 45%, #e08a2a);
  --bb-cta-grad: linear-gradient(135deg, #f0b14a, #c87820);
  --bb-cta-fg: #1a1006;
  --bb-mark-grad: linear-gradient(145deg, #ffb347, #e08a2a 55%, #c87820);
  --bb-chip-grad: linear-gradient(135deg, rgba(240, 177, 74, 0.32), rgba(200, 120, 32, 0.2));
  --bb-topbar-bg: linear-gradient(180deg, rgba(42, 28, 16, 0.94), rgba(24, 16, 10, 0.92));
  --bb-atmosphere:
    radial-gradient(ellipse 90% 55% at 15% -10%, rgba(255, 170, 60, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 45% at 95% 5%, rgba(180, 80, 30, 0.22), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(90, 40, 10, 0.4), transparent 60%),
    linear-gradient(180deg, #1a120a 0%, #120e0a 55%, #0a0704 100%);
}
html[data-skin="cinema"] .babees-atmosphere {
  background: var(--bb-atmosphere) !important;
}

/* ---- arena ---- */
html[data-skin="arena"] {
  --bb-ink: #041016;
  --bb-glass: rgba(8, 36, 40, 0.65);
  --bb-glass-2: rgba(6, 28, 32, 0.9);
  --bb-line: rgba(50, 230, 200, 0.22);
  --bb-line-lit: rgba(40, 240, 180, 0.55);
  --bb-text: #e8fffb;
  --bb-dim: #8ecfc4;
  --bb-blue: #2ee6c5;
  --bb-violet: #1ec8ff;
  --bb-cyan: #5ef0d0;
  --bb-a: #ff5a7a;
  --bb-b: #2ee6c5;
  --bb-accent: #2ee6c5;
  --bb-glow: rgba(46, 230, 197, 0.35);
  --bb-brand-grad: linear-gradient(135deg, #b8fff0, #2ee6c5 50%, #1ec8ff);
  --bb-cta-grad: linear-gradient(135deg, #2ee6c5, #1499c4);
  --bb-cta-fg: #021014;
  --bb-mark-grad: linear-gradient(145deg, #2ee6c5, #1ec8ff 55%, #0ea5c9);
  --bb-chip-grad: linear-gradient(135deg, rgba(46, 230, 197, 0.3), rgba(30, 200, 255, 0.18));
  --bb-topbar-bg: linear-gradient(180deg, rgba(8, 36, 40, 0.94), rgba(4, 20, 24, 0.92));
}
html[data-skin="arena"] .babees-atmosphere {
  background:
    radial-gradient(ellipse 85% 50% at 10% -8%, rgba(46, 230, 197, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 45% at 95% 8%, rgba(30, 200, 255, 0.22), transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 105%, rgba(10, 80, 90, 0.35), transparent 60%),
    linear-gradient(180deg, #061820 0%, #041016 55%, #020a0e 100%) !important;
}

/* ---- classic ---- */
html[data-skin="classic"] {
  --bb-ink: #070914;
  --bb-glass: rgba(18, 22, 40, 0.78);
  --bb-glass-2: rgba(14, 18, 34, 0.94);
  --bb-line: rgba(140, 160, 220, 0.22);
  --bb-line-lit: rgba(150, 140, 230, 0.5);
  --bb-text: #f4f6ff;
  --bb-dim: #a8b0d0;
  --bb-blue: #6b8cff;
  --bb-violet: #8b6cf0;
  --bb-cyan: #4ec4f0;
  --bb-a: #ff3b5c;
  --bb-b: #3b82ff;
  --bb-accent: #8b6cf0;
  --bb-glow: rgba(107, 140, 255, 0.32);
  --bb-brand-grad: linear-gradient(115deg, #ffffff 8%, #c4b5fd 48%, #7dd3fc 90%);
  --bb-cta-grad: linear-gradient(135deg, #6b8cff, #8b6cf0);
  --bb-cta-fg: #f8faff;
  --bb-mark-grad: linear-gradient(145deg, #5b8cff, #38bdf8 55%, #8b6cf0);
  --bb-chip-grad: linear-gradient(135deg, rgba(91, 140, 255, 0.3), rgba(139, 108, 240, 0.2));
  --bb-topbar-bg: linear-gradient(180deg, rgba(16, 22, 42, 0.94), rgba(10, 14, 28, 0.9));
}
html[data-skin="classic"] .babees-atmosphere {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(91, 140, 255, 0.26), transparent 55%),
    radial-gradient(ellipse 70% 45% at 90% 10%, rgba(168, 85, 247, 0.22), transparent 50%),
    radial-gradient(ellipse 80% 55% at 50% 108%, rgba(56, 189, 248, 0.14), transparent 62%),
    linear-gradient(180deg, #080b1c 0%, #05060f 58%, #03040c 100%) !important;
}
html[data-skin="classic"] .babees-grain { opacity: 0.3; }

/* ---- night ---- */
html[data-skin="night"] {
  --bb-ink: #02060f;
  --bb-glass: rgba(10, 18, 40, 0.72);
  --bb-glass-2: rgba(8, 14, 32, 0.94);
  --bb-line: rgba(100, 140, 255, 0.2);
  --bb-line-lit: rgba(120, 160, 255, 0.45);
  --bb-text: #e8eefc;
  --bb-dim: #8a9bc0;
  --bb-blue: #4d7cff;
  --bb-violet: #6a7cff;
  --bb-cyan: #6ec8ff;
  --bb-a: #ff5a7a;
  --bb-b: #4d7cff;
  --bb-accent: #4d7cff;
  --bb-glow: rgba(77, 124, 255, 0.35);
  --bb-brand-grad: linear-gradient(135deg, #dbe7ff, #4d7cff 50%, #203a8f);
  --bb-cta-grad: linear-gradient(135deg, #4d7cff, #203a8f);
  --bb-cta-fg: #f0f5ff;
  --bb-mark-grad: linear-gradient(145deg, #4d7cff, #6ec8ff 55%, #203a8f);
  --bb-chip-grad: linear-gradient(135deg, rgba(77, 124, 255, 0.32), rgba(32, 58, 143, 0.22));
  --bb-topbar-bg: linear-gradient(180deg, rgba(10, 18, 40, 0.95), rgba(4, 10, 24, 0.92));
}
html[data-skin="night"] .babees-atmosphere {
  background:
    radial-gradient(ellipse 80% 50% at 15% -5%, rgba(77, 124, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(30, 58, 140, 0.3), transparent 50%),
    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(10, 20, 50, 0.5), transparent 60%),
    linear-gradient(180deg, #050a18 0%, #02060f 60%, #01030a 100%) !important;
}

/* ---- rose ---- */
html[data-skin="rose"] {
  --bb-ink: #16080f;
  --bb-glass: rgba(48, 18, 32, 0.7);
  --bb-glass-2: rgba(40, 14, 28, 0.92);
  --bb-line: rgba(255, 122, 168, 0.22);
  --bb-line-lit: rgba(255, 122, 168, 0.5);
  --bb-text: #ffe8f1;
  --bb-dim: #d4a0b4;
  --bb-blue: #ff7aa8;
  --bb-violet: #be185d;
  --bb-cyan: #fda4c8;
  --bb-a: #fb7185;
  --bb-b: #c084fc;
  --bb-accent: #ff7aa8;
  --bb-glow: rgba(255, 122, 168, 0.35);
  --bb-brand-grad: linear-gradient(135deg, #ffe4ef, #ff7aa8 48%, #be185d);
  --bb-cta-grad: linear-gradient(135deg, #ff7aa8, #be185d);
  --bb-cta-fg: #2a0614;
  --bb-mark-grad: linear-gradient(145deg, #ff7aa8, #fda4c8 45%, #be185d);
  --bb-chip-grad: linear-gradient(135deg, rgba(255, 122, 168, 0.32), rgba(190, 24, 93, 0.2));
  --bb-topbar-bg: linear-gradient(180deg, rgba(48, 18, 32, 0.95), rgba(28, 10, 20, 0.92));
}
html[data-skin="rose"] .babees-atmosphere {
  background:
    radial-gradient(ellipse 85% 50% at 20% -8%, rgba(255, 122, 168, 0.28), transparent 55%),
    radial-gradient(ellipse 65% 42% at 95% 5%, rgba(190, 24, 93, 0.25), transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 105%, rgba(80, 20, 40, 0.4), transparent 60%),
    linear-gradient(180deg, #1c0a12 0%, #16080f 55%, #0e0509 100%) !important;
}

/* ---- sand ---- */
html[data-skin="sand"] {
  --bb-ink: #1a140c;
  --bb-glass: rgba(48, 36, 22, 0.7);
  --bb-glass-2: rgba(40, 30, 18, 0.92);
  --bb-line: rgba(212, 165, 116, 0.28);
  --bb-line-lit: rgba(232, 196, 140, 0.55);
  --bb-text: #fff4e4;
  --bb-dim: #c4b090;
  --bb-blue: #d4a574;
  --bb-violet: #b8956c;
  --bb-cyan: #e8c48c;
  --bb-a: #d97757;
  --bb-b: #c9a227;
  --bb-accent: #d4a574;
  --bb-glow: rgba(212, 165, 116, 0.35);
  --bb-brand-grad: linear-gradient(135deg, #fff0d4, #d4a574 48%, #8b6914);
  --bb-cta-grad: linear-gradient(135deg, #d4a574, #8b6914);
  --bb-cta-fg: #1a1208;
  --bb-mark-grad: linear-gradient(145deg, #e8c48c, #d4a574 50%, #8b6914);
  --bb-chip-grad: linear-gradient(135deg, rgba(212, 165, 116, 0.34), rgba(139, 105, 20, 0.2));
  --bb-topbar-bg: linear-gradient(180deg, rgba(48, 36, 22, 0.95), rgba(28, 22, 12, 0.92));
}
html[data-skin="sand"] .babees-atmosphere {
  background:
    radial-gradient(ellipse 85% 50% at 18% -8%, rgba(232, 196, 140, 0.26), transparent 55%),
    radial-gradient(ellipse 65% 42% at 92% 8%, rgba(139, 105, 20, 0.22), transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 105%, rgba(70, 50, 20, 0.4), transparent 60%),
    linear-gradient(180deg, #221a10 0%, #1a140c 55%, #100c08 100%) !important;
}

/* ---- neon ---- */
html[data-skin="neon"] {
  --bb-ink: #050510;
  --bb-glass: rgba(16, 12, 36, 0.72);
  --bb-glass-2: rgba(12, 8, 28, 0.94);
  --bb-line: rgba(0, 245, 212, 0.28);
  --bb-line-lit: rgba(199, 125, 255, 0.55);
  --bb-text: #f2f7ff;
  --bb-dim: #a8b0d8;
  --bb-blue: #00f5d4;
  --bb-violet: #c77dff;
  --bb-cyan: #00f5d4;
  --bb-a: #ff2d95;
  --bb-b: #00f5d4;
  --bb-accent: #00f5d4;
  --bb-glow: rgba(0, 245, 212, 0.35);
  --bb-brand-grad: linear-gradient(135deg, #b8fff4, #00f5d4 40%, #c77dff);
  --bb-cta-grad: linear-gradient(135deg, #00f5d4, #c77dff);
  --bb-cta-fg: #050510;
  --bb-mark-grad: linear-gradient(145deg, #00f5d4, #c77dff 55%, #7b2ff7);
  --bb-chip-grad: linear-gradient(135deg, rgba(0, 245, 212, 0.28), rgba(199, 125, 255, 0.22));
  --bb-topbar-bg: linear-gradient(180deg, rgba(16, 12, 36, 0.95), rgba(8, 6, 20, 0.92));
}
html[data-skin="neon"] .babees-atmosphere {
  background:
    radial-gradient(ellipse 80% 48% at 12% -5%, rgba(0, 245, 212, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 45% at 95% 5%, rgba(199, 125, 255, 0.26), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 105%, rgba(120, 40, 180, 0.28), transparent 60%),
    linear-gradient(180deg, #0a0818 0%, #050510 55%, #030308 100%) !important;
}

/* ---- mist ---- */
html[data-skin="mist"] {
  --bb-ink: #0e141c;
  --bb-glass: rgba(28, 36, 48, 0.72);
  --bb-glass-2: rgba(22, 30, 40, 0.94);
  --bb-line: rgba(160, 180, 200, 0.22);
  --bb-line-lit: rgba(180, 200, 220, 0.45);
  --bb-text: #eef3f8;
  --bb-dim: #9aabbc;
  --bb-blue: #8aa4bc;
  --bb-violet: #6a8098;
  --bb-cyan: #a8c0d4;
  --bb-a: #e07a6a;
  --bb-b: #6a9bc8;
  --bb-accent: #8aa4bc;
  --bb-glow: rgba(160, 180, 200, 0.28);
  --bb-brand-grad: linear-gradient(135deg, #f0f5fa, #c8d4e0 45%, #6a8098);
  --bb-cta-grad: linear-gradient(135deg, #a8c0d4, #6a8098);
  --bb-cta-fg: #0e141c;
  --bb-mark-grad: linear-gradient(145deg, #c8d4e0, #8aa4bc 55%, #6a8098);
  --bb-chip-grad: linear-gradient(135deg, rgba(168, 192, 212, 0.28), rgba(106, 128, 152, 0.2));
  --bb-topbar-bg: linear-gradient(180deg, rgba(28, 36, 48, 0.95), rgba(16, 22, 30, 0.92));
}
html[data-skin="mist"] .babees-atmosphere {
  background:
    radial-gradient(ellipse 85% 50% at 20% -5%, rgba(180, 200, 220, 0.18), transparent 55%),
    radial-gradient(ellipse 65% 42% at 90% 8%, rgba(106, 128, 152, 0.2), transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 105%, rgba(40, 50, 60, 0.35), transparent 60%),
    linear-gradient(180deg, #141c26 0%, #0e141c 55%, #0a1016 100%) !important;
}

/* ---- Skin picker (fixed sheet — never blocked by tabs) ---- */
.babees-skin-wrap { position: relative; z-index: 40; }
.babees-skin-open {
  min-width: 44px;
  min-height: 44px;
  gap: 6px;
  padding-inline: 10px;
  font-size: 12px;
  font-weight: 700;
}
.babees-skin-open .babees-skin-open-lbl {
  max-width: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 460px) {
  .babees-skin-open .babees-skin-open-lbl { display: none; }
}

.babees-skin-sheet {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
}
.babees-skin-sheet[hidden] { display: none !important; }
.babees-skin-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(2, 4, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.babees-skin-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(78vh, 640px);
  margin: 0;
  padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--bb-line);
  border-bottom: 0;
  background: var(--bb-glass-2, rgba(14, 18, 34, 0.96));
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.babees-skin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.babees-skin-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--bb-text, #fff);
}
.babees-skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.babees-skin-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--bb-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bb-glass, rgba(255,255,255,0.06)) 80%, transparent);
  color: var(--bb-text, #fff);
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: start;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.babees-skin-opt:hover,
.babees-skin-opt:focus-visible {
  border-color: var(--bb-line-lit);
  background: color-mix(in srgb, var(--bb-accent) 18%, transparent);
  outline: none;
}
.babees-skin-opt:active {
  transform: scale(0.98);
}
.babees-skin-opt.is-active {
  border-color: var(--bb-line-lit);
  background: color-mix(in srgb, var(--bb-accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--bb-line-lit);
}
.babees-skin-opt-lbl { flex: 1; }
.babees-skin-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.babees-skin-swatch[data-sw="cinema"] { background: linear-gradient(135deg, #ffb347, #c87820); }
.babees-skin-swatch[data-sw="arena"] { background: linear-gradient(135deg, #2ee6c5, #1ec8ff); }
.babees-skin-swatch[data-sw="classic"] { background: linear-gradient(135deg, #6b8cff, #8b6cf0); }
.babees-skin-swatch[data-sw="night"] { background: linear-gradient(135deg, #4d7cff, #203a8f); }
.babees-skin-swatch[data-sw="rose"] { background: linear-gradient(135deg, #ff7aa8, #be185d); }
.babees-skin-swatch[data-sw="sand"] { background: linear-gradient(135deg, #e8c48c, #8b6914); }
.babees-skin-swatch[data-sw="neon"] { background: linear-gradient(135deg, #00f5d4, #c77dff); }
.babees-skin-swatch[data-sw="mist"] { background: linear-gradient(135deg, #c8d4e0, #6a8098); }

body.babees-skin-open { overflow: hidden !important; }

@media (min-width: 720px) {
  .babees-skin-sheet { align-items: center; padding: 24px; }
  .babees-skin-panel {
    border-radius: 22px;
    border-bottom: 1px solid var(--bb-line);
    max-height: min(70vh, 560px);
  }
}

/* Compact topbar: wallet only (account lives in wallet tab) */
.babees-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.babees-wallet-chip {
  max-width: none;
  padding: 6px 10px;
}
.babees-wallet-chip .babees-chip-money-wrap,
.babees-wallet-chip .babees-chip-sep,
.babees-wallet-chip .babees-chip-unit {
  display: none !important;
}

.babees-player-slim {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border-radius: 14px;
  border: 1px solid var(--bb-line);
  background: var(--bb-glass);
}
.babees-player-slim .babees-player-name-field {
  flex: 1;
  margin: 0;
}
.babees-player-slim .babees-player-name-field > span {
  font-size: 11px;
  opacity: 0.75;
}

.babees-wallet-account { margin-bottom: 16px; }

.babees-lobby-more {
  border: 1px solid var(--bb-line);
  border-radius: 16px;
  background: var(--bb-glass);
  margin: 12px 0;
  overflow: hidden;
}
.babees-lobby-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 14px;
  color: var(--bb-text);
}
.babees-lobby-more > summary::-webkit-details-marker { display: none; }
.babees-lobby-more > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--bb-dim);
  border-bottom: 2px solid var(--bb-dim);
  transform: rotate(45deg);
  flex: none;
}
.babees-lobby-more[open] > summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}
.babees-lobby-more-body { padding: 0 14px 14px; }

@media (max-width: 720px) {
  .babees-hero-lobby { padding: 12px 4px 8px; text-align: center; }
  .babees-team-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (min-width: 721px) {
  .babees-lobby-more.is-mobile-only {
    border: 0;
    background: transparent;
    margin: 0;
  }
  .babees-lobby-more.is-mobile-only > summary { display: none; }
  .babees-lobby-more.is-mobile-only > .babees-lobby-more-body { padding: 0; }
}