/* =====================================================================
   ChessMondo v8.0.0 — Professional Visual System
   STYLE-ONLY LAYER. No auth, backend, game logic, API, Render or MongoDB.
   ===================================================================== */

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

:root {
  --cm-bg-0: #070a0f;
  --cm-bg-1: #0a0f16;
  --cm-bg-2: #0e151e;
  --cm-surface: rgba(15, 22, 31, .92);
  --cm-surface-2: rgba(19, 27, 38, .92);
  --cm-surface-3: rgba(24, 34, 47, .88);
  --cm-line: rgba(159, 180, 204, .14);
  --cm-line-strong: rgba(159, 180, 204, .24);
  --cm-text: #f2f6fb;
  --cm-text-2: #c6d0dd;
  --cm-muted: #7f8b9b;
  --cm-blue: #4ca2ff;
  --cm-blue-2: #247ee8;
  --cm-cyan: #4dd7e6;
  --cm-gold: #d9b25f;
  --cm-purple: #9e78ff;
  --cm-green: #4dcf8b;
  --cm-red: #ef6a6a;
  --cm-orange: #eaa75a;
  --cm-radius-xl: 22px;
  --cm-radius-lg: 17px;
  --cm-radius-md: 13px;
  --cm-shadow: 0 22px 60px rgba(0,0,0,.32);
  --cm-shadow-soft: 0 12px 34px rgba(0,0,0,.22);
}

/* ---------- Global visual language ---------- */
html { background: var(--cm-bg-0) !important; }
body {
  background:
    radial-gradient(circle at 15% -10%, rgba(76,162,255,.13), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(158,120,255,.08), transparent 22%),
    linear-gradient(180deg, var(--cm-bg-1) 0%, var(--cm-bg-0) 58%, #06090d 100%) !important;
  color: var(--cm-text) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(120,150,180,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,180,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 76%);
}

h1,h2,h3,h4,h5,h6,
.menu-feature-card strong,
.top-brand-text,
.modal-header,
.game-result-title,
.public-game-title,
.arena-title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
}

button,
input,
textarea,
select { font-family: 'Inter', system-ui, sans-serif !important; }

::selection { background: rgba(76,162,255,.28); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(130,151,176,.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(130,151,176,.4); }

/* ---------- Top navigation ---------- */
.top-bar {
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 22px !important;
  gap: 9px !important;
  background: rgba(7,10,15,.82) !important;
  border-bottom: 1px solid var(--cm-line) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

.top-brand { gap: 10px !important; }
.top-brand-logo { height: 28px !important; filter: drop-shadow(0 0 12px rgba(76,162,255,.2)) !important; }
.top-brand-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  color: #dce8f7 !important;
  text-transform: uppercase;
}

.top-notifications-btn,
.top-settings-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}
.top-notifications-btn:hover,
.top-settings-btn:hover {
  background: rgba(255,255,255,.045) !important;
  border-color: var(--cm-line) !important;
}
.top-notifications-btn::before,
.top-settings-btn::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  margin: auto;
  background: #98a7ba;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.top-notifications-btn::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.35-1.65h-4.7A2.5 2.5 0 0 0 12 22Zm7-5.5-1.6-1.8V10a5.4 5.4 0 0 0-4.4-5.3V4a1 1 0 1 0-2 0v.7A5.4 5.4 0 0 0 6.6 10v4.7L5 16.5V18h14v-1.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.35-1.65h-4.7A2.5 2.5 0 0 0 12 22Zm7-5.5-1.6-1.8V10a5.4 5.4 0 0 0-4.4-5.3V4a1 1 0 1 0-2 0v.7A5.4 5.4 0 0 0 6.6 10v4.7L5 16.5V18h14v-1.5Z'/%3E%3C/svg%3E");
}
.top-settings-btn::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13a7.6 7.6 0 0 0 .05-1 7.6 7.6 0 0 0-.05-1l2.1-1.64-2-3.46-2.56 1.03a7.75 7.75 0 0 0-1.72-1L14.83 3h-4l-.39 2.93a7.75 7.75 0 0 0-1.72 1L6.16 5.9l-2 3.46L6.26 11a7.6 7.6 0 0 0-.05 1c0 .34.02.67.05 1l-2.1 1.64 2 3.46 2.56-1.03c.53.41 1.1.75 1.72 1l.39 2.93h4l.39-2.93a7.75 7.75 0 0 0 1.72-1l2.56 1.03 2-3.46L19.4 13ZM12.83 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13a7.6 7.6 0 0 0 .05-1 7.6 7.6 0 0 0-.05-1l2.1-1.64-2-3.46-2.56 1.03a7.75 7.75 0 0 0-1.72-1L14.83 3h-4l-.39 2.93a7.75 7.75 0 0 0-1.72 1L6.16 5.9l-2 3.46L6.26 11a7.6 7.6 0 0 0-.05 1c0 .34.02.67.05 1l-2.1 1.64 2 3.46 2.56-1.03c.53.41 1.1.75 1.72 1l.39 2.93h4l.39-2.93a7.75 7.75 0 0 0 1.72-1l2.56 1.03 2-3.46L19.4 13ZM12.83 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E");
}
.notification-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #e85d5d !important;
  border: 2px solid #080c12 !important;
  box-shadow: none !important;
}

.top-profile {
  min-height: 42px !important;
  padding: 4px 10px 4px 5px !important;
  gap: 8px !important;
  border-radius: 14px !important;
  border: 1px solid var(--cm-line) !important;
  background: rgba(17,24,34,.72) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}
.top-profile:hover { border-color: rgba(76,162,255,.34) !important; background: rgba(21,30,42,.92) !important; }
#topUsername { font-size: 13px !important; font-weight: 600 !important; color: #e8eef7 !important; }
.tp-caret { color: #6f7d8e !important; font-size: 10px !important; }

/* ---------- Main page / dashboard shell ---------- */
.game-area {
  max-width: 1240px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

#menuCard.menu-dashboard-card {
  max-width: 1180px !important;
  margin: 34px auto 34px !important;
  padding: 26px !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(14,20,29,.9), rgba(9,14,21,.94)) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.28) !important;
}
.menu-dashboard-card::before,
.menu-dashboard-card::after { content: '' !important; animation: none !important; display: none !important; }

.menu-dashboard-head {
  min-height: 58px !important;
  align-items: center !important;
  padding: 0 0 20px !important;
  margin: 0 0 20px !important;
  border-bottom: 1px solid var(--cm-line) !important;
}
.menu-dashboard-head h2 {
  margin: 0 !important;
  color: #eaf1fa !important;
  font-size: clamp(20px,2vw,27px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}
.menu-dashboard-head h2::after {
  content: '  /  PLAY';
  color: #536377;
  font-family: 'Inter',sans-serif;
  font-weight: 600;
  font-size: .45em;
  letter-spacing: .1em;
  vertical-align: middle;
  margin-left: 8px;
}

.menu-dashboard-actions { gap: 8px !important; }
.global-refresh-btn,
.daily-rewards-btn {
  min-height: 38px !important;
  padding: 0 13px !important;
  border-radius: 11px !important;
  border: 1px solid var(--cm-line) !important;
  background: rgba(255,255,255,.035) !important;
  color: #aebaca !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.global-refresh-btn:hover,
.daily-rewards-btn:hover { transform: none !important; border-color: var(--cm-line-strong) !important; background: rgba(255,255,255,.06) !important; color: #fff !important; }
.daily-rewards-btn { font-size: 0 !important; display:inline-flex !important; align-items:center; gap:8px; }
.daily-rewards-btn::before {
  content:'';
  width:15px;height:15px;background:var(--cm-gold);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 7h-2.18A3 3 0 0 0 12 5.5 3 3 0 0 0 6.18 7H4a2 2 0 0 0-2 2v3h9V7h2v5h9V9a2 2 0 0 0-2-2ZM9 7H8a1 1 0 1 1 1-1v1Zm7 0h-1V6a1 1 0 1 1 1 1ZM2 14h9v8H4a2 2 0 0 1-2-2v-6Zm11 0h9v6a2 2 0 0 1-2 2h-7v-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 7h-2.18A3 3 0 0 0 12 5.5 3 3 0 0 0 6.18 7H4a2 2 0 0 0-2 2v3h9V7h2v5h9V9a2 2 0 0 0-2-2ZM9 7H8a1 1 0 1 1 1-1v1Zm7 0h-1V6a1 1 0 1 1 1 1ZM2 14h9v8H4a2 2 0 0 1-2-2v-6Zm11 0h9v6a2 2 0 0 1-2 2h-7v-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.daily-rewards-btn::after { content:'Daily Rewards'; font-size:12px; color:#c8d1dc; }

/* ---------- Premium icon system (no emoji on main navigation) ---------- */
.menu-feature-icon,
.feature-panel-head .feature-icon {
  position: relative !important;
  flex: 0 0 auto !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
}
.menu-feature-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--cm-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.menu-feature-icon::before,
.feature-panel-head .feature-icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
  background: currentColor;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
}

.menu-feature-card.ai .menu-feature-icon,
#panelAI .feature-icon { color: #65b5ff !important; }
.menu-feature-card.drunk .menu-feature-icon,
#panelDrunk .feature-icon { color: #b18cff !important; }
.menu-feature-card.friend .menu-feature-icon,
#panelFriend .feature-icon { color: #66d6a1 !important; }
.menu-feature-card.public .menu-feature-icon,
#panelPublic .feature-icon { color: #6fc5e8 !important; }
.menu-feature-card.arena .menu-feature-icon,
#panelArena .feature-icon { color: #e8b66a !important; }
.menu-feature-card.join .menu-feature-icon,
#panelJoin .feature-icon { color: #8caaff !important; }
.menu-feature-card.global .menu-feature-icon,
#panelGlobal .feature-icon { color: #68c9d1 !important; }
.menu-feature-card.posts .menu-feature-icon,
#panelPosts .feature-icon { color: #9faec0 !important; }
.menu-feature-card.premium .menu-feature-icon,
#panelPremium .feature-icon { color: #e2c477 !important; }
.menu-feature-card.clubs .menu-feature-icon,
#panelClubs .feature-icon { color: #bba0ff !important; }

/* bot */
.menu-feature-card.ai .menu-feature-icon::before,
#panelAI .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v3h2a4 4 0 0 1 4 4v8a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9a4 4 0 0 1 4-4h2V2Zm-2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM8 16v2h8v-2H8Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v3h2a4 4 0 0 1 4 4v8a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9a4 4 0 0 1 4-4h2V2Zm-2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM8 16v2h8v-2H8Z'/%3E%3C/svg%3E");
}
/* wine */
.menu-feature-card.drunk .menu-feature-icon::before,
#panelDrunk .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h12l-1.2 7.2A5 5 0 0 1 13 13.3V20h4v2H7v-2h4v-6.7a5 5 0 0 1-3.8-4.1L6 2Zm2.36 2 .58 3.5h6.12l.58-3.5H8.36Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h12l-1.2 7.2A5 5 0 0 1 13 13.3V20h4v2H7v-2h4v-6.7a5 5 0 0 1-3.8-4.1L6 2Zm2.36 2 .58 3.5h6.12l.58-3.5H8.36Z'/%3E%3C/svg%3E");
}
/* users */
.menu-feature-card.friend .menu-feature-icon::before,
#panelFriend .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.5 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2 20v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2H2Zm14.5-7c3.04 0 5.5 2.46 5.5 5.5V20h-4v-2a7 7 0 0 0-1.92-4.82c.14-.08.28-.14.42-.18Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.5 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2 20v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2H2Zm14.5-7c3.04 0 5.5 2.46 5.5 5.5V20h-4v-2a7 7 0 0 0-1.92-4.82c.14-.08.28-.14.42-.18Z'/%3E%3C/svg%3E");
}
/* eye */
.menu-feature-card.public .menu-feature-icon::before,
#panelPublic .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5C6.5 5 2.1 8.3.5 12c1.6 3.7 6 7 11.5 7s9.9-3.3 11.5-7C21.9 8.3 17.5 5 12 5Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5C6.5 5 2.1 8.3.5 12c1.6 3.7 6 7 11.5 7s9.9-3.3 11.5-7C21.9 8.3 17.5 5 12 5Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
}
/* arena */
.menu-feature-card.arena .menu-feature-icon::before,
#panelArena .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h3v2a6 6 0 0 1-5 5.92A5 5 0 0 1 13 16v2h4v3H7v-3h4v-2a5 5 0 0 1-2-2.08A6 6 0 0 1 4 8V6h3V3Zm10 5V8h1a4 4 0 0 1-2.54 3.72C16.04 10.62 16.5 9.36 17 8ZM6 8v.01a4 4 0 0 0 2.54 3.71A9.6 9.6 0 0 1 7 8H6Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h3v2a6 6 0 0 1-5 5.92A5 5 0 0 1 13 16v2h4v3H7v-3h4v-2a5 5 0 0 1-2-2.08A6 6 0 0 1 4 8V6h3V3Zm10 5V8h1a4 4 0 0 1-2.54 3.72C16.04 10.62 16.5 9.36 17 8ZM6 8v.01a4 4 0 0 0 2.54 3.71A9.6 9.6 0 0 1 7 8H6Z'/%3E%3C/svg%3E");
}
/* key */
.menu-feature-card.join .menu-feature-icon::before,
#panelJoin .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3a6.5 6.5 0 0 0-5.92 9.18L2 18.76V22h3.24l1.5-1.5 1.5 1.5 2.26-2.26-1.5-1.5 1.5-1.5 1.5 1.5 3.82-3.82A6.5 6.5 0 1 0 14.5 3Zm2.5 5.5A1.5 1.5 0 1 1 17 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3a6.5 6.5 0 0 0-5.92 9.18L2 18.76V22h3.24l1.5-1.5 1.5 1.5 2.26-2.26-1.5-1.5 1.5-1.5 1.5 1.5 3.82-3.82A6.5 6.5 0 1 0 14.5 3Zm2.5 5.5A1.5 1.5 0 1 1 17 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}
/* globe */
.menu-feature-card.global .menu-feature-icon::before,
#panelGlobal .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 6h-3.05a15.7 15.7 0 0 0-1.4-3.35A8.08 8.08 0 0 1 18.92 8ZM12 4c.85 1.03 1.54 2.38 1.93 4h-3.86C10.46 6.38 11.15 5.03 12 4ZM4.26 14a8.09 8.09 0 0 1 0-4h3.4a16.9 16.9 0 0 0 0 4h-3.4Zm.82 2h3.05c.3 1.22.77 2.36 1.4 3.35A8.08 8.08 0 0 1 5.08 16ZM8.13 8H5.08a8.08 8.08 0 0 1 4.45-3.35A15.7 15.7 0 0 0 8.13 8ZM12 20c-.85-1.03-1.54-2.38-1.93-4h3.86c-.39 1.62-1.08 2.97-1.93 4Zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4Zm.17 5.35c.63-.99 1.1-2.13 1.4-3.35h3.05a8.08 8.08 0 0 1-4.45 3.35ZM16.34 14a16.9 16.9 0 0 0 0-4h3.4a8.09 8.09 0 0 1 0 4h-3.4Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 6h-3.05a15.7 15.7 0 0 0-1.4-3.35A8.08 8.08 0 0 1 18.92 8ZM12 4c.85 1.03 1.54 2.38 1.93 4h-3.86C10.46 6.38 11.15 5.03 12 4ZM4.26 14a8.09 8.09 0 0 1 0-4h3.4a16.9 16.9 0 0 0 0 4h-3.4Zm.82 2h3.05c.3 1.22.77 2.36 1.4 3.35A8.08 8.08 0 0 1 5.08 16ZM8.13 8H5.08a8.08 8.08 0 0 1 4.45-3.35A15.7 15.7 0 0 0 8.13 8ZM12 20c-.85-1.03-1.54-2.38-1.93-4h3.86c-.39 1.62-1.08 2.97-1.93 4Zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4Zm.17 5.35c.63-.99 1.1-2.13 1.4-3.35h3.05a8.08 8.08 0 0 1-4.45 3.35ZM16.34 14a16.9 16.9 0 0 0 0-4h3.4a8.09 8.09 0 0 1 0 4h-3.4Z'/%3E%3C/svg%3E");
}
/* document */
.menu-feature-card.posts .menu-feature-icon::before,
#panelPosts .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 2h10l4 4v16H5V2Zm9 1.5V7h3.5L14 3.5ZM8 11v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 2h10l4 4v16H5V2Zm9 1.5V7h3.5L14 3.5ZM8 11v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E");
}
/* crown */
.menu-feature-card.premium .menu-feature-icon::before,
#panelPremium .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 7 4.2 3L12 4l4.8 6L21 7l-2 11H5L3 7Zm2.5 13h13v2h-13v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 7 4.2 3L12 4l4.8 6L21 7l-2 11H5L3 7Zm2.5 13h13v2h-13v-2Z'/%3E%3C/svg%3E");
}
/* shield */
.menu-feature-card.clubs .menu-feature-icon::before,
#panelClubs .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5.2-3.3 9.7-8 11-4.7-1.3-8-5.8-8-11V5l8-3Zm0 4.2L8 7.7v3.1c0 3.2 1.6 6 4 7.2 2.4-1.2 4-4 4-7.2V7.7l-4-1.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5.2-3.3 9.7-8 11-4.7-1.3-8-5.8-8-11V5l8-3Zm0 4.2L8 7.7v3.1c0 3.2 1.6 6 4 7.2 2.4-1.2 4-4 4-7.2V7.7l-4-1.5Z'/%3E%3C/svg%3E");
}

/* ---------- Main feature cards ---------- */
.menu-card-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 12px !important;
}
.menu-feature-card {
  position: relative !important;
  min-height: 138px !important;
  padding: 16px !important;
  gap: 8px !important;
  border-radius: 18px !important;
  border: 1px solid var(--cm-line) !important;
  background: linear-gradient(155deg, rgba(18,26,36,.88), rgba(10,15,22,.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow: hidden !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.menu-feature-card::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.025) 100%);
}
.menu-feature-card::after {
  content:'›';
  position:absolute;
  right:15px;
  top:15px;
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:8px;
  border:1px solid transparent;
  color:#526174;
  font: 500 20px/1 'Inter',sans-serif;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.menu-feature-card:hover,
.menu-feature-card:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(107,139,175,.34) !important;
  background: linear-gradient(155deg, rgba(23,33,46,.96), rgba(12,18,26,.98)) !important;
  box-shadow: 0 15px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.menu-feature-card:hover::after { color:#a9bbd0; border-color:var(--cm-line); background:rgba(255,255,255,.025); transform:translateX(2px); }
.menu-feature-card:hover .menu-feature-icon { transform:none !important; }

.menu-feature-card strong {
  font-size: 17px !important;
  line-height: 1.08 !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: #eef4fb !important;
  margin-top: 3px !important;
}
.menu-feature-card small {
  max-width: 90% !important;
  color: #7d8998 !important;
  font-size: 11.5px !important;
  line-height: 1.38 !important;
  font-weight: 450 !important;
}

.menu-feature-card.drunk { border-color: rgba(158,120,255,.24) !important; }
.menu-feature-card.drunk::before { background: radial-gradient(circle at 0 0, rgba(158,120,255,.09), transparent 48%) !important; }
.menu-feature-card.premium { border-color: rgba(217,178,95,.27) !important; }
.menu-feature-card.premium::before { background: radial-gradient(circle at 0 0, rgba(217,178,95,.09), transparent 48%) !important; }
.menu-feature-card.arena::before { background: radial-gradient(circle at 0 0, rgba(234,167,90,.06), transparent 46%) !important; }

/* ---------- Section pages ---------- */
.menu-section-views { animation: cmFadeIn .18s ease both; }
@keyframes cmFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.menu-back-btn {
  min-height: 38px !important;
  padding: 0 13px !important;
  margin-bottom: 13px !important;
  border-radius: 11px !important;
  border: 1px solid var(--cm-line) !important;
  background: rgba(255,255,255,.025) !important;
  color: #9ba9b9 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.menu-back-btn:hover { background:rgba(255,255,255,.05) !important; border-color:var(--cm-line-strong) !important; color:#fff !important; }

.feature-panel,
.menu-section-panel {
  border: 1px solid var(--cm-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(16,23,32,.94), rgba(10,15,22,.96)) !important;
  box-shadow: var(--cm-shadow-soft) !important;
}
.feature-panel:hover,
.feature-panel.menu-focus { transform:none !important; box-shadow:var(--cm-shadow-soft) !important; }
.feature-panel-head {
  align-items:center !important;
  padding-bottom: 15px !important;
  margin-bottom: 15px !important;
  border-bottom: 1px solid var(--cm-line) !important;
}
.feature-panel-head .feature-icon {
  width: 40px !important;
  height: 40px !important;
  display:grid !important;
  place-items:center !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.035) !important;
  border:1px solid var(--cm-line) !important;
}
.feature-panel h3 {
  color:#edf3fa !important;
  font-size:18px !important;
  font-weight:650 !important;
  letter-spacing:-.02em !important;
}
.feature-panel p { color:#788596 !important; font-size:12px !important; }
.feature-panel label:not(.menu-check-row) {
  color:#7d8998 !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
  font-weight:650 !important;
}

select,
input[type='text'], input[type='email'], input[type='password'],
textarea {
  border:1px solid var(--cm-line) !important;
  background:rgba(7,11,17,.72) !important;
  color:#e5edf7 !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}
select:focus,
input:focus,
textarea:focus {
  border-color:rgba(76,162,255,.48) !important;
  box-shadow:0 0 0 3px rgba(76,162,255,.08) !important;
  outline:none !important;
}

.primary-btn,
.mp-big-btn,
.public-game-actions button,
.club-row-action,
.pd-small-save {
  border-radius:12px !important;
  box-shadow:none !important;
}
.primary-btn {
  background:linear-gradient(180deg,#438fe7,#2d76cf) !important;
  border:1px solid rgba(113,180,255,.34) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
.primary-btn:hover:not(:disabled) { transform:translateY(-1px) !important; filter:brightness(1.06); }
.ghost-btn {
  border:1px solid var(--cm-line) !important;
  background:rgba(255,255,255,.025) !important;
  color:#9eabba !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
.ghost-btn:hover { background:rgba(255,255,255,.05) !important; color:#fff !important; border-color:var(--cm-line-strong) !important; }

/* Home icon inside create-room button */
.mp-btn-icon { font-size:0 !important; width:20px !important; height:20px !important; background:#79b7f4 !important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 11 9-8 9 8v10h-6v-6H9v6H3V11Z'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 11 9-8 9 8v10h-6v-6H9v6H3V11Z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Lists / cards across Public, Arena, Global, Posts, Clubs ---------- */
.public-game-card,
.arena-row,
.club-card,
.club-lb-row,
.friends-lb-row,
.notification-item,
.post-card {
  border-color: var(--cm-line) !important;
  background: rgba(12,18,26,.72) !important;
  box-shadow: none !important;
}
.public-game-card:hover,
.arena-row:hover,
.club-card:hover,
.club-lb-row:hover,
.friends-lb-row:hover,
.notification-item:hover {
  border-color: var(--cm-line-strong) !important;
  background: rgba(17,25,35,.88) !important;
}
.public-game-title,
.club-name { color:#e7eef7 !important; }
.public-game-meta,
.public-game-players,
.arena-record { color:#7d8998 !important; }

.post-card {
  border-radius:18px !important;
  overflow:hidden !important;
}
.post-card-head { border-bottom-color:var(--cm-line) !important; }
.posts-app-shell,
.club-shell { color:var(--cm-text-2) !important; }

/* ---------- Game screen ---------- */
.left-panel,
.right-panel {
  background: linear-gradient(180deg,rgba(15,22,31,.94),rgba(9,14,20,.96)) !important;
  border:1px solid var(--cm-line) !important;
  border-radius:20px !important;
  box-shadow:var(--cm-shadow-soft) !important;
}
.right-panel h2 {
  color:#8491a0 !important;
  border-bottom-color:var(--cm-line) !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-size:13px !important;
  font-weight:650 !important;
  letter-spacing:.08em !important;
}
#status,
.captured-bar,
.chess-clocks,
.mp-player-bar,
.mp-controls {
  border-color:var(--cm-line) !important;
  background:rgba(8,12,18,.72) !important;
}
.controls button,
.mp-ctrl-btn {
  border-color:var(--cm-line) !important;
  background:rgba(255,255,255,.035) !important;
  color:#aab5c3 !important;
  border-radius:11px !important;
  box-shadow:none !important;
}
.controls button:hover,
.mp-ctrl-btn:hover { background:rgba(255,255,255,.065) !important; color:#fff !important; border-color:var(--cm-line-strong) !important; }

/* Game chat keeps emoji/stickers by request; only container styling changes. */
.mp-chat,
.friend-chat-panel,
.friend-chat-screen {
  border-color:var(--cm-line) !important;
  background:rgba(8,13,19,.94) !important;
  box-shadow:none !important;
}
.mp-chat-header,
.friend-chat-header {
  background:rgba(14,21,30,.96) !important;
  border-color:var(--cm-line) !important;
}
.mp-chat-tools,
.friend-chat-tools-row { background:rgba(10,15,22,.92) !important; border-color:var(--cm-line) !important; }
.mp-chat-input-row,
.friend-chat-compose { background:rgba(14,20,29,.96) !important; border-color:var(--cm-line) !important; }

/* ---------- Profile dropdown ---------- */
.profile-dropdown {
  border:1px solid var(--cm-line) !important;
  border-radius:18px !important;
  background:rgba(10,15,22,.97) !important;
  box-shadow:0 24px 65px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(20px) !important;
}
.pd-header { border-bottom-color:var(--cm-line) !important; }
.pd-name { font-family:'Space Grotesk',sans-serif !important; color:#edf3fa !important; }
.pd-email,.pd-edit-label,.pd-mini-label { color:#748193 !important; }
.pd-stat,.pd-stat-small,.pd-graph-block,.pd-showcase-block,.pd-custom-section,.pd-username-edit {
  border-color:var(--cm-line) !important;
  background:rgba(255,255,255,.018) !important;
}

/* Replace profile action emoji row with clean monochrome navigation. */
.pd-actions { gap:5px !important; }
.pd-actions .pd-action-btn {
  position:relative !important;
  min-height:39px !important;
  padding:0 10px 0 38px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#aeb9c7 !important;
  text-align:left !important;
  font-size:0 !important;
  box-shadow:none !important;
}
.pd-actions .pd-action-btn:hover { background:rgba(255,255,255,.04) !important; border-color:var(--cm-line) !important; color:#fff !important; }
.pd-actions .pd-action-btn::before {
  content:'';
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;background:#75869a;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-7 18v-2a7 7 0 0 1 14 0v2H5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-7 18v-2a7 7 0 0 1 14 0v2H5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pd-actions .pd-action-btn::after { font:600 12px/1 'Inter',sans-serif; color:inherit; }
.pd-actions .pd-action-btn:nth-child(1)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(2)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(3)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(4)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(5)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(6)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(7)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(8)::after { content:attr(data-i18n-profile-label); }
.pd-actions .pd-action-btn:nth-child(9)::after { content:attr(data-i18n-profile-label); }
.pd-actions .friend-badge { font-size:9px !important; position:absolute !important; right:10px !important; }
.logout-btn,
.delete-account-btn { border-radius:11px !important; font-family:'Inter',sans-serif !important; letter-spacing:0 !important; text-transform:none !important; }

/* ---------- Modals / settings ---------- */
.modal-card,
.friends-modal-card,
.notification-center-card,
.settings-panel,
.game-result-card,
.rematch-card,
.drunk-rules-modal {
  border:1px solid var(--cm-line) !important;
  background:linear-gradient(180deg,rgba(15,22,31,.98),rgba(8,13,19,.99)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.5) !important;
  border-radius:20px !important;
}
.modal-header,
.settings-header {
  border-bottom-color:var(--cm-line) !important;
  color:#edf3fa !important;
}
.modal-close,
.settings-close,
.friend-chat-close-screen {
  background:rgba(255,255,255,.035) !important;
  border:1px solid var(--cm-line) !important;
  color:#98a5b5 !important;
  border-radius:10px !important;
}
.modal-close:hover,.settings-close:hover,.friend-chat-close-screen:hover { background:rgba(255,255,255,.07) !important; color:#fff !important; }

.theme-btn {
  border-color:var(--cm-line) !important;
  background:rgba(255,255,255,.025) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
.theme-btn:hover,.theme-btn.active { border-color:rgba(76,162,255,.38) !important; background:rgba(76,162,255,.07) !important; }

/* ---------- Auth screen visual polish only ---------- */
.auth-card {
  border:1px solid var(--cm-line) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(15,22,31,.96),rgba(9,14,20,.98)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.4) !important;
}
.auth-brand h1 { font-family:'Space Grotesk',sans-serif !important; letter-spacing:-.03em !important; text-transform:none !important; color:#e9f1fb !important; }
.brand-sub { font-family:'Inter',sans-serif !important; letter-spacing:.08em !important; font-size:10px !important; }
.auth-card h2 { font-family:'Space Grotesk',sans-serif !important; letter-spacing:-.02em !important; }

/* ---------- Focus / accessibility ---------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:2px solid rgba(76,162,255,.6) !important;
  outline-offset:2px !important;
}

/* ---------- Desktop refinement ---------- */
@media (min-width: 981px) {
  .menu-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .menu-feature-card { min-height:136px !important; }
  #menuCard.menu-dashboard-card { padding:26px !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .menu-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #menuCard.menu-dashboard-card { padding:18px !important; border-radius:22px !important; }
  .menu-feature-card { min-height:126px !important; }
}

/* ---------- Mobile app language ---------- */
@media (max-width: 640px) {
  body::before { background-size:32px 32px; opacity:.65; }
  .top-bar {
    min-height:calc(62px + env(safe-area-inset-top)) !important;
    height:auto !important;
    padding-top:calc(7px + env(safe-area-inset-top)) !important;
    padding-left:max(12px,env(safe-area-inset-left)) !important;
    padding-right:max(12px,env(safe-area-inset-right)) !important;
    padding-bottom:7px !important;
    gap:6px !important;
  }
  .top-brand-text { display:none !important; }
  .top-brand-logo { height:25px !important; }
  .top-notifications-btn,.top-settings-btn { width:36px !important;min-width:36px !important;height:36px !important; }
  .top-profile { min-height:40px !important; max-width:178px !important; border-radius:13px !important; }
  #topUsername { max-width:82px !important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

  .game-area {
    padding-left:10px !important;
    padding-right:10px !important;
  }
  #menuCard.menu-dashboard-card {
    max-width:calc(100vw - 20px) !important;
    margin-top:16px !important;
    padding:13px !important;
    border-radius:20px !important;
    box-shadow:0 16px 42px rgba(0,0,0,.2) !important;
  }
  .menu-dashboard-head {
    min-height:46px !important;
    padding-bottom:12px !important;
    margin-bottom:12px !important;
    flex-direction:row !important;
    gap:8px !important;
  }
  .menu-dashboard-head h2 { font-size:18px !important; }
  .menu-dashboard-head h2::after { display:none; }
  .menu-dashboard-actions { width:auto !important; flex-wrap:nowrap !important; gap:5px !important; }
  .global-refresh-btn,.daily-rewards-btn { min-height:34px !important; padding:0 9px !important; font-size:10px !important; }
  .daily-rewards-btn::after { font-size:10px; }
  .daily-rewards-btn::before { width:13px;height:13px; }

  .menu-card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  .menu-feature-card {
    min-height:116px !important;
    padding:12px !important;
    border-radius:15px !important;
  }
  .menu-feature-icon { width:36px !important;height:36px !important;border-radius:10px !important; }
  .menu-feature-icon::before { width:17px !important;height:17px !important; }
  .menu-feature-card::after { right:10px;top:10px;width:20px;height:20px;font-size:17px; }
  .menu-feature-card strong { font-size:14px !important; margin-top:2px !important; }
  .menu-feature-card small { font-size:10px !important; line-height:1.28 !important; max-width:100% !important; display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

  .menu-section-panel { border-radius:17px !important; }
  .feature-panel-head .feature-icon { width:36px !important;height:36px !important;border-radius:10px !important; }
  .feature-panel h3 { font-size:16px !important; }
  .feature-panel p { font-size:11px !important; }

  .left-panel,.right-panel { border-radius:17px !important; }
  .profile-dropdown { border-radius:16px !important; }
  .modal-card,.friends-modal-card,.notification-center-card,.game-result-card,.rematch-card,.drunk-rules-modal { border-radius:18px !important; }
}

@media (max-width: 360px) {
  .menu-card-grid { grid-template-columns:1fr !important; }
  .menu-feature-card { min-height:104px !important; }
  .menu-dashboard-actions .global-refresh-btn { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.001ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v8.0.1 — Profile Navigation Clarity
   Distinct semantic icons + restrained accent colors.
   Style-only override; no functional selectors or JS changes.
═══════════════════════════════════════════════════════════════ */

.pd-actions {
  gap: 7px !important;
}

.pd-actions .pd-action-btn {
  --pd-accent: #7f92a8;
  --pd-accent-rgb: 127,146,168;
  min-height: 45px !important;
  padding: 0 10px 0 48px !important;
  border: 1px solid rgba(255,255,255,.045) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.016) !important;
  color: #d7e0ea !important;
  overflow: hidden !important;
  transition: background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease !important;
}

.pd-actions .pd-action-btn::before {
  left: 9px !important;
  width: 29px !important;
  height: 29px !important;
  border-radius: 9px !important;
  background-color: var(--pd-accent) !important;
  /* icon mask is supplied per item below */
  filter: drop-shadow(0 0 7px rgba(var(--pd-accent-rgb),.12));
}

/* A subtle colored icon plate behind the mask. */
.pd-actions .pd-action-btn {
  background-image:
    radial-gradient(circle at 23px 50%, rgba(var(--pd-accent-rgb),.09), transparent 34px) !important;
}

.pd-actions .pd-action-btn::after {
  font: 650 12.5px/1.15 'Inter',sans-serif !important;
  color: #d7e0ea !important;
  letter-spacing: -.01em !important;
}

.pd-actions .pd-action-btn:hover {
  background-color: rgba(var(--pd-accent-rgb),.075) !important;
  border-color: rgba(var(--pd-accent-rgb),.28) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.pd-actions .pd-action-btn:hover::after { color:#fff !important; }
.pd-actions .pd-action-btn:active { transform:translateY(0) scale(.985) !important; }

/* 1 — Public profile: cyan identity card */
.pd-actions .pd-action-btn:nth-child(1) {
  --pd-accent:#54b9ff; --pd-accent-rgb:84,185,255;
}
.pd-actions .pd-action-btn:nth-child(1)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2.3'/%3E%3Cpath d='M5.8 16c.7-2 2-3 3.2-3s2.5 1 3.2 3M15 9h3M15 13h3'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2.3'/%3E%3Cpath d='M5.8 16c.7-2 2-3 3.2-3s2.5 1 3.2 3M15 9h3M15 13h3'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 2 — Followers / Following: violet user network */
.pd-actions .pd-action-btn:nth-child(2) {
  --pd-accent:#9b8cff; --pd-accent-rgb:155,140,255;
}
.pd-actions .pd-action-btn:nth-child(2)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.5'/%3E%3Cpath d='M2.8 19c.6-3.3 2.6-5 5.2-5s4.6 1.7 5.2 5M13.5 18c.5-2.1 1.8-3.3 3.7-3.3 2 0 3.3 1.2 3.8 3.3'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.5'/%3E%3Cpath d='M2.8 19c.6-3.3 2.6-5 5.2-5s4.6 1.7 5.2 5M13.5 18c.5-2.1 1.8-3.3 3.7-3.3 2 0 3.3 1.2 3.8 3.3'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 3 — Friends leaderboard: amber podium */
.pd-actions .pd-action-btn:nth-child(3) {
  --pd-accent:#f2b84b; --pd-accent-rgb:242,184,75;
}
.pd-actions .pd-action-btn:nth-child(3)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20v-6h4v6M10 20V9h4v11M15 20v-8h4v8'/%3E%3Cpath d='m12 3 .8 1.7 1.9.3-1.4 1.3.3 1.9L12 7.3l-1.6.9.3-1.9L9.3 5l1.9-.3L12 3Z'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20v-6h4v6M10 20V9h4v11M15 20v-8h4v8'/%3E%3Cpath d='m12 3 .8 1.7 1.9.3-1.4 1.3.3 1.9L12 7.3l-1.6.9.3-1.9L9.3 5l1.9-.3L12 3Z'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 4 — Game history: blue clock */
.pd-actions .pd-action-btn:nth-child(4) {
  --pd-accent:#5e8cff; --pd-accent-rgb:94,140,255;
}
.pd-actions .pd-action-btn:nth-child(4)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2M4.2 6.3 2.8 8M19.8 6.3 21.2 8'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2M4.2 6.3 2.8 8M19.8 6.3 21.2 8'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 5 — Achievements: green medal */
.pd-actions .pd-action-btn:nth-child(5) {
  --pd-accent:#49c88d; --pd-accent-rgb:73,200,141;
}
.pd-actions .pd-action-btn:nth-child(5)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 3h4l1 5-4 2-1-7ZM17 3h-4l-1 5 4 2 1-7Z'/%3E%3Ccircle cx='12' cy='15' r='5'/%3E%3Cpath d='m12 12.5.8 1.5 1.7.2-1.2 1.2.3 1.7-1.6-.8-1.6.8.3-1.7-1.2-1.2 1.7-.2.8-1.5Z'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 3h4l1 5-4 2-1-7ZM17 3h-4l-1 5 4 2 1-7Z'/%3E%3Ccircle cx='12' cy='15' r='5'/%3E%3Cpath d='m12 12.5.8 1.5 1.7.2-1.2 1.2.3 1.7-1.6-.8-1.6.8.3-1.7-1.2-1.2 1.7-.2.8-1.5Z'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 6 — Premium: gold crown */
.pd-actions .pd-action-btn:nth-child(6) {
  --pd-accent:#f4c85a; --pd-accent-rgb:244,200,90;
}
.pd-actions .pd-action-btn:nth-child(6)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8 4 4 4-7 4 7 4-4-2 10H6L4 8Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8 4 4 4-7 4 7 4-4-2 10H6L4 8Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 7 — Customization: magenta palette */
.pd-actions .pd-action-btn:nth-child(7) {
  --pd-accent:#e477d7; --pd-accent-rgb:228,119,215;
}
.pd-actions .pd-action-btn:nth-child(7)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18h1.5a2 2 0 0 0 1.1-3.7c-.7-.5-.6-1.7.3-2h2.5A3.6 3.6 0 0 0 21 11.7 8.7 8.7 0 0 0 12 3Z'/%3E%3Ccircle cx='7.5' cy='10' r='.8' fill='black'/%3E%3Ccircle cx='10' cy='6.8' r='.8' fill='black'/%3E%3Ccircle cx='14' cy='6.8' r='.8' fill='black'/%3E%3Ccircle cx='17' cy='10' r='.8' fill='black'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18h1.5a2 2 0 0 0 1.1-3.7c-.7-.5-.6-1.7.3-2h2.5A3.6 3.6 0 0 0 21 11.7 8.7 8.7 0 0 0 12 3Z'/%3E%3Ccircle cx='7.5' cy='10' r='.8' fill='black'/%3E%3Ccircle cx='10' cy='6.8' r='.8' fill='black'/%3E%3Ccircle cx='14' cy='6.8' r='.8' fill='black'/%3E%3Ccircle cx='17' cy='10' r='.8' fill='black'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 8 — Friends: teal handshake/network */
.pd-actions .pd-action-btn:nth-child(8) {
  --pd-accent:#45c6c8; --pd-accent-rgb:69,198,200;
}
.pd-actions .pd-action-btn:nth-child(8)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='2.8'/%3E%3Ccircle cx='16' cy='8' r='2.8'/%3E%3Cpath d='M3.5 18c.6-3 2.1-4.6 4.5-4.6 1.5 0 2.7.6 3.5 1.7M20.5 18c-.6-3-2.1-4.6-4.5-4.6-1.5 0-2.7.6-3.5 1.7M9.4 17.5l2.6 2 2.6-2'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='2.8'/%3E%3Ccircle cx='16' cy='8' r='2.8'/%3E%3Cpath d='M3.5 18c.6-3 2.1-4.6 4.5-4.6 1.5 0 2.7.6 3.5 1.7M20.5 18c-.6-3-2.1-4.6-4.5-4.6-1.5 0-2.7.6-3.5 1.7M9.4 17.5l2.6 2 2.6-2'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* 9 — Blocked players: restrained red shield */
.pd-actions .pd-action-btn:nth-child(9) {
  --pd-accent:#ef6c72; --pd-accent-rgb:239,108,114;
}
.pd-actions .pd-action-btn:nth-child(9)::before {
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v5c0 5-3.2 8.3-8 10-4.8-1.7-8-5-8-10V6l8-3Z'/%3E%3Cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v5c0 5-3.2 8.3-8 10-4.8-1.7-8-5-8-10V6l8-3Z'/%3E%3Cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7'/%3E%3C/g%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

/* Keep the two-column layout, but improve legibility on narrow profile panels. */
@media (max-width: 520px) {
  .pd-actions .pd-action-btn {
    min-height: 44px !important;
    padding-left: 45px !important;
  }
  .pd-actions .pd-action-btn::before {
    width: 27px !important;
    height: 27px !important;
  }
  .pd-actions .pd-action-btn::after {
    font-size: 11.5px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   v8.0.2 — Mobile profile dropdown compact polish
   Only tightens the profile/settings dropdown on phones.
═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .profile-dropdown {
    width: auto !important;
    max-width: none !important;
    top: 58px !important;
    left: 10px !important;
    right: 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .pd-header {
    gap: 10px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }
  .pd-avatar-wrap,
  .pd-avatar-wrap img,
  .pd-avatar-fallback {
    width: 48px !important;
    height: 48px !important;
  }
  .pd-avatar-fallback { font-size: 18px !important; }
  .pd-upload-label {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }
  .pd-delete-avatar-btn {
    width: 19px !important;
    height: 19px !important;
    font-size: 10px !important;
  }
  .pd-name {
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }
  .pd-email {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .pd-stats {
    margin-bottom: 8px !important;
  }
  .pd-stat,
  .pd-stat-small {
    padding: 8px 6px !important;
    min-height: 54px !important;
  }
  .pd-stat span,
  .pd-stat-small span {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .pd-stat label,
  .pd-stat-small label {
    font-size: 9px !important;
    letter-spacing: .08em !important;
    margin-top: 4px !important;
  }
  .pd-stat-row {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .pd-rating {
    font-size: 12px !important;
    margin-bottom: 9px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
  .pd-rank-title {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  #pdRankProgress { margin-bottom: 8px !important; }

  .pd-showcase-block,
  .pd-graph-block,
  .pd-username-edit,
  .pd-custom-section {
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .pd-edit-label {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 7px !important;
  }
  .pd-mini-label {
    font-size: 9px !important;
    margin: 7px 0 4px !important;
  }
  .pd-custom-section select,
  .pd-custom-section textarea,
  .pd-username-row input {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .pd-custom-section textarea {
    min-height: 52px !important;
    max-height: 86px !important;
  }
  .pd-username-row {
    gap: 8px !important;
  }
  .pd-username-row button,
  .pd-small-save {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .pd-row-between {
    margin-top: 6px !important;
    align-items: center !important;
  }
  #aboutCounter,
  .pd-username-msg,
  #profileExtraMsg,
  .premium-field-note,
  .flag-preview-row,
  .flag-preview-row small {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  .pd-toggle-row {
    gap: 8px !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    align-items: flex-start !important;
  }
  .pd-toggle-row input {
    margin-top: 2px !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  .pd-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  .pd-actions .pd-action-btn,
  .pd-actions .friends-btn {
    min-height: 52px !important;
    padding: 10px 10px 10px 42px !important;
    border-radius: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    background-size: auto !important;
  }
  .pd-actions .friends-btn {
    grid-column: auto !important;
    order: 0 !important;
  }
  .pd-actions .pd-action-btn::before {
    left: 10px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }
  .pd-actions .pd-action-btn::after {
    font-size: 11px !important;
    line-height: 1.18 !important;
    display: block !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .pd-actions .friend-badge {
    right: 8px !important;
    top: 8px !important;
    transform: none !important;
  }

  .logout-btn,
  .delete-account-btn {
    min-height: 44px !important;
    margin-top: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 420px) {
  .profile-dropdown {
    left: 8px !important;
    right: 8px !important;
    padding: 11px !important;
  }
  .pd-actions {
    gap: 7px !important;
  }
  .pd-actions .pd-action-btn,
  .pd-actions .friends-btn {
    min-height: 50px !important;
    padding-left: 40px !important;
  }
  .pd-actions .pd-action-btn::before {
    width: 22px !important;
    height: 22px !important;
  }
  .pd-actions .pd-action-btn::after {
    font-size: 10.5px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   v8.0.3 — Mobile profile actions layout like reference
   Friends full-width on top, other actions in 2-column grid.
═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .pd-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
  }

  .pd-actions .friends-btn {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    min-height: 50px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 14px 12px 44px !important;
  }

  .pd-actions .pd-action-btn {
    min-height: 46px !important;
    padding: 10px 10px 10px 42px !important;
    border-radius: 12px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: center !important;
  }

  .pd-actions .pd-action-btn::before {
    left: 12px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 8px !important;
  }

  .pd-actions .pd-action-btn::after {
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .pd-actions .friends-btn::after {
    text-align: center !important;
    width: 100% !important;
  }

  .logout-btn,
  .delete-account-btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 420px) {
  .pd-actions {
    gap: 7px !important;
  }

  .pd-actions .friends-btn {
    min-height: 48px !important;
  }

  .pd-actions .pd-action-btn {
    min-height: 44px !important;
    padding: 9px 8px 9px 38px !important;
  }

  .pd-actions .pd-action-btn::before {
    left: 10px !important;
    width: 20px !important;
    height: 20px !important;
  }

  .pd-actions .pd-action-btn::after {
    font-size: 10.5px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   v8.0.4 — Mobile profile drawer z-layer fix
   Keeps the opened profile panel above the page, below the top bar,
   and scrollable inside its own drawer.
═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  #profileDropdown.profile-dropdown:not(.hidden) {
    position: fixed !important;
    z-index: 2147483000 !important;
    top: calc(70px + env(safe-area-inset-top)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    box-shadow:
      0 0 0 9999px rgba(0,0,0,.34),
      0 22px 70px rgba(0,0,0,.62),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  #profileDropdown.profile-dropdown:not(.hidden) * {
    pointer-events: auto !important;
  }

  .top-bar {
    z-index: 2147483001 !important;
  }

  #profileDropdown.profile-dropdown:not(.hidden) .pd-header {
    position: sticky !important;
    top: -12px !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, rgba(8,13,20,.98), rgba(8,13,20,.92)) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 10px 12px 9px !important;
    border-bottom: 1px solid rgba(120,160,200,.16) !important;
  }

  #profileDropdown.profile-dropdown:not(.hidden) .delete-account-btn {
    margin-bottom: 4px !important;
  }
}

@media (max-width: 420px) {
  #profileDropdown.profile-dropdown:not(.hidden) {
    top: calc(68px + env(safe-area-inset-top)) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   v8.0.5 — MOBILE UI REPAIR
   Profile scroll, Daily Rewards compactness, Chess Clubs/Chat rescue.
═══════════════════════════════════════════════════════ */

/* Daily Rewards: one icon + one label, always. */
.daily-rewards-btn {
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}
.daily-rewards-btn::after { content: none !important; display:none !important; }
.daily-rewards-btn::before {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
}

/* Rewards modal: considerably smaller on desktop too. */
.rewards-card,
.rewards-card-wide {
  width: min(760px, 94vw) !important;
  max-height: min(82vh, 700px) !important;
  padding: 18px !important;
  border-radius: 20px !important;
}
.rewards-head { margin-bottom: 12px !important; gap: 10px !important; }
.rewards-kicker { font-size: 10px !important; letter-spacing: 1.4px !important; }
.rewards-head h2 { font-size: 22px !important; line-height:1.08 !important; }
.rewards-grid { gap:8px !important; margin-bottom:12px !important; }
.reward-stat { padding:10px !important; border-radius:13px !important; }
.reward-stat b { font-size:22px !important; }
.reward-stat span { font-size:10px !important; }
.reward-tabs { margin:8px 0 12px !important; padding:4px !important; gap:5px !important; border-radius:14px !important; }
.reward-tabs button { padding:9px 8px !important; border-radius:10px !important; font-size:12px !important; }
.mystery-box-zone { grid-template-columns:82px minmax(0,1fr) !important; gap:12px !important; padding:12px !important; border-radius:16px !important; }
.mystery-box-art { width:76px !important; height:76px !important; font-size:42px !important; border-radius:18px !important; }
.mystery-box-zone h3 { font-size:17px !important; }
.mystery-box-zone p { font-size:12px !important; margin-bottom:9px !important; }
.mystery-result { margin:6px 0 10px !important; min-height:20px !important; }

/* Mobile profile header must scroll with everything else, like older versions. */
@media (max-width: 720px) {
  #profileDropdown.profile-dropdown:not(.hidden) .pd-header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(120,160,200,.13) !important;
  }

  .menu-dashboard-actions {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .menu-dashboard-actions button,
  .daily-rewards-btn,
  .global-refresh-btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    line-height:1 !important;
    white-space: nowrap !important;
  }
  .daily-rewards-btn::before { width:12px !important; height:12px !important; }

  .rewards-modal-overlay {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) !important;
    align-items:center !important;
  }
  .rewards-card,
  .rewards-card-wide {
    width: min(94vw, 520px) !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }
  .rewards-head { margin-bottom:9px !important; align-items:center !important; }
  .rewards-kicker { font-size:8px !important; letter-spacing:1.2px !important; }
  .rewards-head h2 { font-size:18px !important; max-width:260px !important; }
  .rewards-head .settings-close { width:34px !important; height:34px !important; min-width:34px !important; }
  .daily-claim-card { padding:9px 10px !important; margin-bottom:9px !important; border-radius:12px !important; }
  .daily-claim-card b { font-size:13px !important; }
  .daily-claim-card span { font-size:11px !important; }
  .rewards-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:5px !important; margin-bottom:9px !important; }
  .reward-stat { padding:8px 4px !important; border-radius:11px !important; }
  .reward-stat b { font-size:18px !important; }
  .reward-stat span { font-size:8px !important; line-height:1.1 !important; display:block !important; }
  .reward-tabs { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:4px !important; margin:6px 0 9px !important; padding:3px !important; }
  .reward-tabs button { padding:8px 4px !important; font-size:10px !important; }
  .mystery-box-zone,
  .mystery-box-zone.upgraded {
    grid-template-columns:66px minmax(0,1fr) !important;
    text-align:left !important;
    gap:9px !important;
    padding:10px !important;
    margin-bottom:8px !important;
  }
  .mystery-box-art { width:60px !important; height:60px !important; font-size:34px !important; margin:0 !important; border-radius:15px !important; }
  .mystery-box-zone h3 { font-size:14px !important; }
  .mystery-box-zone p { font-size:10.5px !important; line-height:1.25 !important; margin-bottom:7px !important; }
  .mystery-box-zone .primary-btn { min-height:34px !important; padding:7px 10px !important; font-size:11px !important; }
  .reward-prize.big { padding:10px !important; gap:9px !important; }
  .reward-prize-icon { width:42px !important; height:42px !important; font-size:24px !important; border-radius:12px !important; }
}

/* ── Chess Clubs: mobile-first WhatsApp-like shell ── */
@media (max-width: 860px) {
  #panelClubs {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
  }
  #panelClubs *,
  .clubs-app-shell *,
  .clubs-conversation-panel * { box-sizing:border-box !important; }

  .clubs-app-shell {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:#0b141a !important;
  }
  .clubs-chat-list-panel {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    border:0 !important;
    background:#0b141a !important;
    overflow:visible !important;
  }
  .clubs-app-head {
    min-height:58px !important;
    padding:10px 12px !important;
    gap:8px !important;
    background:#111b21 !important;
    border-bottom:1px solid rgba(134,150,160,.14) !important;
  }
  .clubs-app-head h3 { font-size:17px !important; letter-spacing:.03em !important; text-transform:none !important; color:#f0f2f5 !important; }
  .clubs-app-head p { display:none !important; }
  .clubs-head-actions { gap:6px !important; }
  .circle-tool-btn { width:34px !important; height:34px !important; min-width:34px !important; font-size:16px !important; }
  .clubs-search-row {
    min-height:38px !important;
    margin:8px 10px !important;
    padding:0 11px !important;
    gap:8px !important;
    background:#202c33 !important;
    border:0 !important;
  }
  .clubs-search-row input { font-size:13px !important; font-weight:600 !important; }
  .clubs-search-row span { font-size:15px !important; }
  .clubs-filter-pills { padding:0 10px 8px !important; gap:6px !important; }
  .clubs-filter-pills button { padding:6px 10px !important; font-size:11px !important; }
  .global-section-title.compact { padding:0 12px !important; margin:9px 0 5px !important; font-size:10px !important; }
  .club-list-whatsapp,
  .club-list-mini { padding:0 6px 7px !important; overflow:visible !important; }
  .club-chat-row {
    grid-template-columns:44px minmax(0,1fr) auto !important;
    gap:9px !important;
    min-height:62px !important;
    padding:8px 8px !important;
    border-radius:8px !important;
  }
  .club-chat-row .club-avatar,
  .club-lb-chat-row .club-avatar { width:42px !important; height:42px !important; min-width:42px !important; border-radius:50% !important; }
  .club-row-top b { font-size:14px !important; }
  .club-row-preview { font-size:11px !important; margin-top:2px !important; }
  .club-row-meta { font-size:9.5px !important; }
  .club-row-action,.club-lb-action { padding:5px 8px !important; font-size:10px !important; }
  .club-lb-chat-row { grid-template-columns:26px 38px minmax(0,1fr) auto !important; padding:7px 8px !important; gap:7px !important; }
  .club-lb-main b { font-size:12px !important; }
  .club-lb-main em { font-size:9px !important; }

  .club-create-profile {
    margin:6px 10px 10px !important;
    padding:10px !important;
    border-radius:14px !important;
  }
  .club-create-title-row { gap:8px !important; }
  .club-create-title-row b { font-size:14px !important; }
  .club-create-title-row span { font-size:10px !important; }
  .club-profile-edit-preview { grid-template-columns:78px minmax(0,1fr) !important; gap:10px !important; margin-top:9px !important; }
  .club-profile-logo-pick { min-height:78px !important; border-radius:14px !important; padding:6px !important; }
  .club-profile-logo-pick span { width:48px !important; height:48px !important; border-radius:12px !important; font-size:22px !important; }
  .club-profile-logo-pick em { font-size:8px !important; }
  .club-profile-fields { gap:4px !important; }
  .club-profile-fields label { font-size:9px !important; }
  .club-profile-fields input,.club-profile-fields textarea { padding:8px 9px !important; border-radius:9px !important; font-size:12px !important; }
  .club-profile-fields textarea { min-height:54px !important; }
  .club-create-submit { min-height:38px !important; margin-top:8px !important; font-size:12px !important; }

  /* When chat is open, make it a real full-screen app view below the top bar. */
  #panelClubs.club-chat-open {
    position:fixed !important;
    z-index:2147482000 !important;
    top:calc(62px + env(safe-area-inset-top)) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:auto !important;
    max-width:none !important;
    border:0 !important;
    border-radius:0 !important;
    background:#0b141a !important;
    overflow:hidden !important;
  }
  #panelClubs.club-chat-open .clubs-app-shell,
  #panelClubs.club-chat-open .clubs-conversation-panel,
  #panelClubs.club-chat-open .club-chat-box {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #panelClubs.club-chat-open .clubs-chat-list-panel { display:none !important; }
  #panelClubs.club-chat-open .clubs-conversation-panel { display:flex !important; position:relative !important; background:#0b141a !important; }
  #panelClubs.club-chat-open .club-chat-box { display:flex !important; position:relative !important; flex-direction:column !important; overflow:hidden !important; }
  .club-chat-head {
    flex:0 0 58px !important;
    min-height:58px !important;
    height:58px !important;
    padding:7px 9px !important;
    gap:8px !important;
    background:#111b21 !important;
    border-bottom:1px solid rgba(134,150,160,.14) !important;
    backdrop-filter:none !important;
  }
  .club-chat-back { display:grid !important; width:34px !important; height:34px !important; min-width:34px !important; font-size:24px !important; border:0 !important; background:transparent !important; }
  .club-avatar-large { width:38px !important; height:38px !important; min-width:38px !important; border-radius:50% !important; font-size:17px !important; }
  .club-chat-title-wrap b { font-size:15px !important; }
  .club-chat-title-wrap span { font-size:10px !important; margin-top:0 !important; }
  .club-manage-btn { padding:6px 9px !important; font-size:10px !important; min-height:30px !important; }
  .club-chat-head > .modal-close { display:none !important; }

  .club-chat-messages {
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:12px 9px 16px !important;
    gap:7px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    background:
      radial-gradient(circle at 18px 18px,rgba(255,255,255,.025) 0 1px,transparent 1.3px),
      #0b141a !important;
    background-size:36px 36px,auto !important;
  }
  .club-chat-msg-row { max-width:82% !important; gap:6px !important; }
  .club-msg-avatar { width:30px !important; height:30px !important; min-width:30px !important; }
  .club-chat-msg { padding:7px 9px !important; border-radius:10px !important; max-width:100% !important; }
  .club-chat-msg b { font-size:10px !important; }
  .club-chat-msg span { font-size:13px !important; line-height:1.3 !important; }
  .club-chat-msg small { font-size:8.5px !important; }

  .club-chat-input-row {
    position:relative !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    grid-template-columns:36px minmax(0,1fr) 40px !important;
    gap:6px !important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    background:#111b21 !important;
    border-top:1px solid rgba(134,150,160,.14) !important;
  }
  .club-chat-input-row input {
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 12px !important;
    border-radius:19px !important;
    font-size:13px !important;
    background:#202c33 !important;
  }
  .club-chat-emoji-btn,
  .club-chat-send-btn,
  .club-chat-input-row button {
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    font-size:16px !important;
  }
  .club-chat-send-btn { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; }

  /* Club emoji picker: compact and fully contained; never side-shifted. */
  #clubEmojiPicker.chat-picker.club-picker {
    position:absolute !important;
    z-index:50 !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(54px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:190px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:5px !important;
    padding:8px !important;
    margin:0 !important;
    border-radius:14px !important;
    background:#182229 !important;
    border:1px solid rgba(134,150,160,.18) !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.35) !important;
  }
  #clubEmojiPicker.chat-picker.club-picker.hidden { display:none !important; }
  #clubEmojiPicker.chat-picker.club-picker button {
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:10px !important;
    font-size:22px !important;
    background:#202c33 !important;
    border:1px solid rgba(134,150,160,.12) !important;
  }

  /* Owner controls as usable bottom drawer. */
  .club-profile-editor {
    position:fixed !important;
    z-index:2147482500 !important;
    top:auto !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(76dvh,620px) !important;
    overflow-y:auto !important;
    padding:12px !important;
    border-radius:18px !important;
    background:#111b21 !important;
    border:1px solid rgba(134,150,160,.20) !important;
    box-shadow:0 0 0 9999px rgba(0,0,0,.48),0 -16px 50px rgba(0,0,0,.45) !important;
  }
  .club-profile-editor-head { padding-bottom:9px !important; }
  .club-profile-editor-head b { font-size:15px !important; text-transform:none !important; letter-spacing:.02em !important; }
  .club-profile-editor-head span { font-size:10px !important; }
  .club-profile-editor-body { grid-template-columns:78px minmax(0,1fr) !important; gap:10px !important; margin-top:10px !important; }
  .club-profile-editor .club-profile-logo-pick { min-height:78px !important; }
  .club-profile-editor-actions { grid-template-columns:1fr 1fr !important; gap:7px !important; margin-top:10px !important; }
  .club-profile-editor-actions .primary-btn { grid-column:1 / -1 !important; }
  .club-profile-editor-actions .danger-main-btn { grid-column:1 / -1 !important; }
  .club-profile-editor-actions button { min-height:38px !important; font-size:11px !important; border-radius:10px !important; }

  /* Legal footer belongs to normal pages, not inside full-screen club chat. */
  body.club-chat-open-body .legal-mini-links { display:none !important; }
}

@media (max-width: 420px) {
  #clubEmojiPicker.chat-picker.club-picker { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  .club-profile-editor-body { grid-template-columns:68px minmax(0,1fr) !important; }
  .club-profile-editor .club-profile-logo-pick { min-height:68px !important; }
}

/* ========================================================================== 
   ChessMondo 8.0.6 — Chess Clubs viewport + Telegram-quality chat repair
   This final layer intentionally wins over legacy club rules above.
   ========================================================================== */
#panelClubs .clubs-app-shell,
#panelClubs .clubs-conversation-panel,
#panelClubs .club-chat-box,
#panelClubs .club-chat-head,
#panelClubs .club-chat-messages,
#panelClubs .club-chat-input-row,
#panelClubs #clubEmojiPicker {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#panelClubs .club-chat-box { position: relative !important; overflow: hidden !important; }
#panelClubs .club-chat-messages {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
#panelClubs .club-chat-msg-row {
  flex: 0 0 auto !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(78%, 720px) !important;
}
#panelClubs .club-chat-msg-row.mine { align-self: flex-end !important; margin-left: auto !important; }
#panelClubs .club-chat-msg-row.theirs { align-self: flex-start !important; margin-right: auto !important; }
#panelClubs .club-chat-msg { min-width: 0 !important; overflow: hidden !important; }
#panelClubs .club-chat-msg span {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
#panelClubs .club-chat-input-row { width: 100% !important; }
#panelClubs .club-chat-input-row input { width: 100% !important; min-width: 0 !important; }

@media (min-width: 861px) {
  #panelClubs #clubEmojiPicker.chat-picker.club-picker {
    position: absolute !important;
    z-index: 60 !important;
    left: 18px !important;
    right: auto !important;
    top: auto !important;
    bottom: 78px !important;
    width: min(380px, calc(100% - 36px)) !important;
    max-height: 230px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    padding: 12px !important;
    border: 1px solid rgba(134,150,160,.24) !important;
    border-radius: 18px !important;
    background: #172229 !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.48) !important;
  }
  #panelClubs .club-profile-editor {
    top: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    left: auto !important;
    width: min(440px, calc(100% - 32px)) !important;
    max-height: none !important;
  }
}

html.club-chat-open-root,
html.club-chat-open-root body,
body.club-chat-open-body {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.club-chat-open-body { touch-action: auto !important; }
body.club-chat-open-body .menu-section-views {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 860px) {
  body > #panelClubs.club-mobile-portal.club-chat-open {
    position: fixed !important;
    z-index: 2147482000 !important;
    top: calc(62px + env(safe-area-inset-top)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    translate: none !important;
    contain: layout paint;
    background: #0b141a !important;
  }

  body > #panelClubs.club-mobile-portal .clubs-app-shell,
  body > #panelClubs.club-mobile-portal .clubs-conversation-panel,
  body > #panelClubs.club-mobile-portal .club-chat-box {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body > #panelClubs.club-mobile-portal .clubs-chat-list-panel,
  body > #panelClubs.club-mobile-portal .club-empty-state { display: none !important; }

  body > #panelClubs.club-mobile-portal .club-chat-head {
    flex: 0 0 58px !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 7px max(9px, env(safe-area-inset-right)) 7px max(9px, env(safe-area-inset-left)) !important;
    gap: 7px !important;
    background: #111b21 !important;
    border-bottom: 1px solid rgba(134,150,160,.18) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.18) !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-back {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    font-size: 27px !important;
  }
  body > #panelClubs.club-mobile-portal .club-avatar-large {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap { flex: 1 1 auto !important; min-width: 0 !important; }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap b { font-size: 15px !important; line-height: 1.12 !important; }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap span { margin-top: 1px !important; font-size: 10px !important; }
  body > #panelClubs.club-mobile-portal .club-manage-btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 31px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-head > .modal-close { display: none !important; }

  body > #panelClubs.club-mobile-portal .club-chat-messages {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px max(10px, env(safe-area-inset-right)) 16px max(10px, env(safe-area-inset-left)) !important;
    gap: 7px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
    background:
      linear-gradient(rgba(11,20,26,.88), rgba(11,20,26,.88)),
      radial-gradient(circle at 18px 18px, rgba(255,255,255,.055) 0 1px, transparent 1.4px),
      #0b141a !important;
    background-size: auto, 38px 38px, auto !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-msg-row {
    width: fit-content !important;
    max-width: min(86%, 640px) !important;
    gap: 6px !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-msg-row.mine { margin-inline-start: auto !important; margin-inline-end: 0 !important; }
  body > #panelClubs.club-mobile-portal .club-chat-msg-row.theirs { margin-inline-start: 0 !important; margin-inline-end: auto !important; }
  body > #panelClubs.club-mobile-portal .club-msg-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-msg {
    max-width: 100% !important;
    padding: 7px 9px 6px !important;
    border-radius: 12px 12px 12px 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.22) !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-msg.mine { border-radius: 12px 12px 4px 12px !important; background: #2b5278 !important; }
  body > #panelClubs.club-mobile-portal .club-chat-msg b { font-size: 10px !important; }
  body > #panelClubs.club-mobile-portal .club-chat-msg span { font-size: 13px !important; line-height: 1.32 !important; }
  body > #panelClubs.club-mobile-portal .club-chat-msg small { margin-top: 3px !important; font-size: 8.5px !important; }

  body > #panelClubs.club-mobile-portal .club-chat-input-row {
    position: relative !important;
    z-index: 4 !important;
    order: 2;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    padding: 7px max(8px, env(safe-area-inset-right)) 7px max(8px, env(safe-area-inset-left)) !important;
    margin: 0 !important;
    border-top: 1px solid rgba(134,150,160,.15) !important;
    background: #111b21 !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-box:not(.club-emoji-open) .club-chat-input-row {
    padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-input-row input {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(134,150,160,.14) !important;
    background: #202c33 !important;
    color: #eef4f7 !important;
    font-size: 14px !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-emoji-btn,
  body > #panelClubs.club-mobile-portal .club-chat-send-btn {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    font-size: 17px !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-send-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    background: #3390ec !important;
    font-size: 21px !important;
  }

  body > #panelClubs.club-mobile-portal #clubEmojiPicker.chat-picker.club-picker {
    position: relative !important;
    z-index: 3 !important;
    order: 3;
    flex: 0 0 auto !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(252px, 34dvh) !important;
    gap: 5px !important;
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(134,150,160,.15) !important;
    border-radius: 0 !important;
    background: #172229 !important;
    box-shadow: none !important;
  }
  body > #panelClubs.club-mobile-portal #clubEmojiPicker.chat-picker.club-picker.hidden { display: none !important; }
  body > #panelClubs.club-mobile-portal #clubEmojiPicker.chat-picker.club-picker::before {
    content: 'Emoji';
    grid-column: 1 / -1;
    padding: 1px 4px 4px;
    color: #8fa2b3;
    font: 700 10px/1.2 'Rajdhani', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  body > #panelClubs.club-mobile-portal #clubEmojiPicker.chat-picker.club-picker button {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(32,44,51,.76) !important;
    font-size: 22px !important;
  }

  /* A contained settings screen replaces the broken fixed bottom sheet. */
  body > #panelClubs.club-mobile-portal .club-profile-editor {
    position: absolute !important;
    z-index: 90 !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 14px calc(14px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b141a !important;
    box-shadow: none !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor.hidden { display: none !important; }
  body > #panelClubs.club-mobile-portal .club-profile-editor-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 62px !important;
    margin: 0 -14px 14px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(134,150,160,.18) !important;
    background: rgba(17,27,33,.98) !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor-head b {
    color: #f3f7fa !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor-head span { margin-top: 2px !important; font-size: 10px !important; }
  body > #panelClubs.club-mobile-portal .club-profile-editor-head .modal-close {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #202c33 !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor-body {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor .club-profile-logo-pick {
    width: 92px !important;
    min-width: 92px !important;
    min-height: 112px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor .club-profile-logo-pick span {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-fields { min-width: 0 !important; gap: 6px !important; }
  body > #panelClubs.club-mobile-portal .club-profile-fields label { font-size: 9px !important; }
  body > #panelClubs.club-mobile-portal .club-profile-fields input,
  body > #panelClubs.club-mobile-portal .club-profile-fields textarea {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 11px !important;
    border-radius: 11px !important;
    background: #172229 !important;
    font-size: 13px !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-fields textarea { min-height: 88px !important; resize: vertical !important; }
  body > #panelClubs.club-mobile-portal .club-profile-editor-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 16px 0 0 !important;
    padding: 12px 0 2px !important;
    background: linear-gradient(180deg, transparent, #0b141a 18%, #0b141a) !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor-actions .primary-btn {
    grid-column: auto !important;
    background: #3390ec !important;
  }
  body > #panelClubs.club-mobile-portal .club-profile-editor-actions .danger-main-btn { grid-column: 1 / -1 !important; }
  body > #panelClubs.club-mobile-portal .club-profile-editor-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 360px) {
  body > #panelClubs.club-mobile-portal .club-chat-head { gap: 5px !important; }
  body > #panelClubs.club-mobile-portal .club-manage-btn { padding-inline: 7px !important; }
  body > #panelClubs.club-mobile-portal .club-profile-editor-body { grid-template-columns: 1fr !important; }
  body > #panelClubs.club-mobile-portal .club-profile-editor .club-profile-logo-pick {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 108px !important;
  }
}

/* ── Daily Login & Mystery Box: compact collection/history ── */
.rewards-modal-overlay {
  z-index: 5200 !important;
}

.rewards-card.rewards-card-wide {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#rewardTabBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.reward-customize-panel {
  gap: 9px !important;
}

.reward-customize-head {
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 11px !important;
  border-radius: 14px !important;
}

.reward-customize-head b {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.reward-customize-head span {
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.reward-disable-actions {
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.reward-disable-actions button,
.reward-equip-btn {
  min-height: 31px !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.reward-customize-panel h4 {
  margin: 2px 0 -2px !important;
  font-size: 11px !important;
  letter-spacing: .07em !important;
}

.reward-item-grid {
  gap: 8px !important;
}

.reward-item-card {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  min-height: 58px !important;
  padding: 8px !important;
  border-radius: 13px !important;
}

.reward-item-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  font-size: 23px !important;
}

.reward-item-body b {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.reward-item-body span {
  display: block !important;
  margin-top: 2px !important;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}

.reward-equip-btn {
  min-width: 54px !important;
}

.reward-history-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.reward-history-row {
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  min-height: 58px !important;
  padding: 8px 9px !important;
  border-radius: 13px !important;
}

.reward-history-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  font-size: 21px !important;
}

.reward-history-row b {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.reward-history-row span {
  margin-top: 2px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.reward-history-row small {
  font-size: 9px !important;
}

@media (max-width: 720px) {
  .rewards-modal-overlay {
    align-items: flex-start !important;
    padding: max(5px, env(safe-area-inset-top)) 6px max(5px, env(safe-area-inset-bottom)) !important;
  }

  .rewards-card.rewards-card-wide {
    width: min(97vw, 520px) !important;
    height: calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .rewards-head {
    flex: 0 0 auto !important;
    margin-bottom: 7px !important;
  }

  .rewards-head h2 {
    font-size: 16px !important;
  }

  .rewards-head .settings-close {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .rewards-grid,
  .reward-tabs {
    flex: 0 0 auto !important;
  }

  .reward-customize-panel {
    gap: 7px !important;
  }

  .reward-customize-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .reward-customize-head b {
    font-size: 13px !important;
  }

  .reward-customize-head span {
    font-size: 9.5px !important;
  }

  .reward-disable-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 5px !important;
  }

  .reward-disable-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 29px !important;
    padding: 4px 3px !important;
    font-size: 9px !important;
  }

  .reward-customize-panel h4 {
    font-size: 10px !important;
  }

  .reward-item-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .reward-item-card {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 52px !important;
    padding: 6px 7px !important;
    border-radius: 11px !important;
  }

  .reward-item-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 21px !important;
  }

  .reward-item-body b {
    font-size: 12px !important;
  }

  .reward-item-body span {
    font-size: 8.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .reward-item-card .reward-equip-btn {
    grid-column: auto !important;
    width: auto !important;
    min-width: 50px !important;
    min-height: 29px !important;
    padding: 4px 7px !important;
    border-radius: 9px !important;
    font-size: 9.5px !important;
  }

  .reward-history-list {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .reward-history-row {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 54px !important;
    padding: 7px 8px !important;
    border-radius: 11px !important;
  }

  .reward-history-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 19px !important;
  }

  .reward-history-row b {
    font-size: 12px !important;
  }

  .reward-history-row span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .reward-history-row small {
    grid-column: 2 !important;
    margin-top: -3px !important;
    font-size: 8.5px !important;
  }
}

@media (max-width: 360px) {
  .reward-disable-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .reward-disable-actions button:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v8.0.8 — Rewards mobile navigation + visible header/stats
   Keep fixed app top bar clear; only reward tab content scrolls.
═══════════════════════════════════════════════════════════════ */
.rewards-head-copy { min-width: 0; flex: 1 1 auto; }
.rewards-mobile-back { display: none; }

@media (max-width: 720px) {
  /* The app header is fixed above this modal. Start the rewards layer below it. */
  .rewards-modal-overlay {
    position: fixed !important;
    inset: calc(62px + env(safe-area-inset-top)) 0 0 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 6px 6px max(6px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    z-index: 5200 !important;
  }

  .rewards-card.rewards-card-wide {
    width: min(97vw, 520px) !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 9px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Always-visible navigation/header. */
  .rewards-head {
    position: relative !important;
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    margin: 0 0 7px !important;
    padding: 0 0 7px !important;
    background: inherit !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }

  .rewards-mobile-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 54px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    border-radius: 9px !important;
    background: rgba(15,23,42,.72) !important;
    color: #cbd5e1 !important;
    font: 700 10px/1 'Inter', sans-serif !important;
  }

  .rewards-head-copy {
    min-width: 0 !important;
    text-align: left !important;
  }
  .rewards-kicker {
    display: block !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .rewards-head h2 {
    margin-top: 3px !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .rewards-head .settings-close.rewards-close-btn {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  /* Streak / coins / boxes and tabs stay visible; only body scrolls. */
  .daily-claim-card,
  .rewards-grid,
  .reward-tabs {
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
  }

  .rewards-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 5px !important;
    margin: 0 0 7px !important;
  }
  .reward-stat {
    min-width: 0 !important;
    min-height: 49px !important;
    padding: 6px 3px !important;
    border-radius: 10px !important;
  }
  .reward-stat b {
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .reward-stat span {
    margin-top: 5px !important;
    font-size: 6.7px !important;
    line-height: 1.05 !important;
    letter-spacing: .03em !important;
    white-space: normal !important;
  }

  .reward-tabs {
    min-height: 34px !important;
    margin-bottom: 7px !important;
    padding: 2px !important;
    gap: 2px !important;
  }
  .reward-tabs button {
    min-height: 29px !important;
    padding: 5px 3px !important;
    font-size: 8.8px !important;
    line-height: 1.05 !important;
  }

  #rewardTabBody {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px 10px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 380px) {
  .rewards-modal-overlay {
    inset: calc(60px + env(safe-area-inset-top)) 0 0 0 !important;
    padding-inline: 4px !important;
  }
  .rewards-card.rewards-card-wide { padding: 7px !important; }
  .rewards-mobile-back {
    min-width: 48px !important;
    padding-inline: 6px !important;
    font-size: 9px !important;
  }
  .rewards-head h2 { font-size: 12px !important; }
  .reward-stat b { font-size: 15px !important; }
  .reward-stat span { font-size: 6px !important; }
  .reward-tabs button { font-size: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v8.0.9 — Rewards mobile close-button alignment fix
   Pin X to the real top-right corner with a larger touch target.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .rewards-card.rewards-card-wide {
    position: relative !important;
  }

  .rewards-head {
    position: relative !important;
    padding-right: 46px !important;
  }

  .rewards-head .settings-close.rewards-close-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #d8e2ef !important;
    background: rgba(24, 34, 48, .96) !important;
    border: 1px solid rgba(148,163,184,.34) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 30 !important;
    overflow: hidden !important;
  }

  .rewards-head .settings-close.rewards-close-btn::before {
    content: '×' !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: #d8e2ef !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 29px !important;
    font-weight: 300 !important;
    line-height: 37px !important;
    text-align: center !important;
    transform: translateY(-1px) !important;
  }

  .rewards-head .settings-close.rewards-close-btn:hover,
  .rewards-head .settings-close.rewards-close-btn:active {
    color: #ffffff !important;
    background: rgba(42, 56, 75, .98) !important;
    border-color: rgba(148,190,235,.50) !important;
  }

  .rewards-head-copy {
    padding-right: 2px !important;
  }
}

@media (max-width: 380px) {
  .rewards-head {
    padding-right: 43px !important;
  }
  .rewards-head .settings-close.rewards-close-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    right: 0 !important;
  }
  .rewards-head .settings-close.rewards-close-btn::before {
    font-size: 27px !important;
    line-height: 35px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   v8.2.3 — Brand Typography + Compact Main Menu
   UI-only: match the ChessMondo splash brand font and remove
   explanatory menu copy. No game/network/subscription logic.
═══════════════════════════════════════════════════════════════ */

/* Keep the ChessMondo identity consistent with the splash screen. */
.auth-brand h1 {
  font-family:'Orbitron','Rajdhani',system-ui,sans-serif !important;
  font-size:28px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:none !important;
}

.menu-dashboard-head h2 {
  font-family:'Orbitron','Rajdhani',system-ui,sans-serif !important;
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:.35px !important;
  line-height:1.15 !important;
  text-transform:none !important;
}
.menu-dashboard-head h2::after { display:none !important; content:none !important; }

/* Main menu now behaves like compact app navigation: icon + title + chevron. */
.menu-card-grid {
  gap:10px !important;
}
.menu-feature-card {
  min-height:76px !important;
  padding:12px 44px 12px 12px !important;
  gap:11px !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border-radius:15px !important;
}
.menu-feature-card strong {
  display:block !important;
  margin:0 !important;
  min-width:0 !important;
  font-family:'Orbitron','Rajdhani',system-ui,sans-serif !important;
  font-size:13px !important;
  line-height:1.22 !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.menu-feature-card small { display:none !important; }
.menu-feature-icon {
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  flex:0 0 38px !important;
  border-radius:11px !important;
}
.menu-feature-icon::before {
  width:18px !important;
  height:18px !important;
}
.menu-feature-card::after {
  right:12px !important;
  top:50% !important;
  width:20px !important;
  height:20px !important;
  transform:translateY(-50%) !important;
  font-size:17px !important;
}
.menu-feature-card:hover::after {
  transform:translate(2px,-50%) !important;
}

@media (min-width:981px) {
  .menu-feature-card { min-height:76px !important; }
  #menuCard.menu-dashboard-card { padding:22px !important; }
}

@media (max-width:980px) {
  .menu-feature-card { min-height:70px !important; }
}

@media (max-width:640px) {
  .menu-dashboard-head h2 {
    font-size:14px !important;
    letter-spacing:.15px !important;
    line-height:1.2 !important;
  }
  .menu-card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .menu-feature-card {
    min-height:58px !important;
    padding:8px 29px 8px 8px !important;
    gap:7px !important;
    border-radius:13px !important;
  }
  .menu-feature-icon {
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    flex-basis:30px !important;
    border-radius:9px !important;
  }
  .menu-feature-icon::before {
    width:14px !important;
    height:14px !important;
  }
  .menu-feature-card strong {
    font-size:10.5px !important;
    line-height:1.18 !important;
    letter-spacing:0 !important;
  }
  .menu-feature-card::after {
    right:6px !important;
    width:17px !important;
    height:17px !important;
    font-size:14px !important;
  }
}

@media (max-width:360px) {
  .menu-card-grid { grid-template-columns:1fr !important; }
  .menu-feature-card {
    min-height:54px !important;
    padding-right:34px !important;
  }
  .menu-feature-card strong { font-size:11px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   v8.2.4 — Premium Real-App Main Menu
   UI-only. Restrained cyber identity: clean duotone SVG icons,
   faint circuit language, compact metadata chips, subtle motion.
═══════════════════════════════════════════════════════════════ */

/* Logo-inspired electronic lines stay faint: atmosphere, not poster art. */
#gameScreen.screen {
  background-color:#080d13 !important;
  background-image:
    radial-gradient(circle at 14% 8%, rgba(48,120,196,.075), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(108,78,180,.045), transparent 28%),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgNDIwIDIyMCIgZmlsbD0ibm9uZSI+PGcgc3Ryb2tlPSIjM2E4YmQ4IiBzdHJva2Utb3BhY2l0eT0iLjEzIiBzdHJva2Utd2lkdGg9IjEiPjxwYXRoIGQ9Ik0wIDM4aDcwbDE4IDE4aDU4bDE4LTE4aDc4bDE4IDE4aDgwIi8+PHBhdGggZD0iTTAgMTcwaDUybDI0LTI0aDcybDE4IDE4aDU0bDIyLTIyaDE3OCIvPjxwYXRoIGQ9Ik0zMTUgMHY0MmwtMTYgMTZ2NDJsMTggMTh2NDUiLz48cGF0aCBkPSJNMTEyIDIyMHYtNDJsMTgtMTh2LTQ4bC0xNS0xNVY2MiIvPjxwYXRoIGQ9Ik0yMzAgOTRoNzJsMjAtMjBoOTgiLz48cGF0aCBkPSJNMCAxMDRoNDhsMTggMThoNjYiLz48L2c+PGcgZmlsbD0iIzRjYTJmZiIgZmlsbC1vcGFjaXR5PSIuMTgiPjxjaXJjbGUgY3g9IjcwIiBjeT0iMzgiIHI9IjIiLz48Y2lyY2xlIGN4PSIxNDYiIGN5PSI1NiIgcj0iMiIvPjxjaXJjbGUgY3g9IjI2MCIgY3k9IjU2IiByPSIyIi8+PGNpcmNsZSBjeD0iNTIiIGN5PSIxNzAiIHI9IjIiLz48Y2lyY2xlIGN4PSIxNDgiIGN5PSIxNDYiIHI9IjIiLz48Y2lyY2xlIGN4PSIyNDIiIGN5PSIxNDIiIHI9IjIiLz48Y2lyY2xlIGN4PSIzMTUiIGN5PSI0MiIgcj0iMiIvPjxjaXJjbGUgY3g9IjExMiIgY3k9IjE3OCIgcj0iMiIvPjxjaXJjbGUgY3g9IjMwMiIgY3k9Ijk0IiByPSIyIi8+PC9nPjwvc3ZnPg==") !important;
  background-size:auto, auto, 520px 272px !important;
  background-repeat:no-repeat,no-repeat,repeat !important;
  background-position:top left,top right,center top !important;
}

#menuCard.menu-dashboard-card {
  position:relative !important;
  isolation:isolate !important;
  background:linear-gradient(180deg,rgba(12,18,26,.93),rgba(8,13,20,.96)) !important;
  border-color:rgba(118,151,190,.19) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
#menuCard.menu-dashboard-card::before {
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  opacity:.38 !important;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgNDIwIDIyMCIgZmlsbD0ibm9uZSI+PGcgc3Ryb2tlPSIjM2E4YmQ4IiBzdHJva2Utb3BhY2l0eT0iLjEzIiBzdHJva2Utd2lkdGg9IjEiPjxwYXRoIGQ9Ik0wIDM4aDcwbDE4IDE4aDU4bDE4LTE4aDc4bDE4IDE4aDgwIi8+PHBhdGggZD0iTTAgMTcwaDUybDI0LTI0aDcybDE4IDE4aDU0bDIyLTIyaDE3OCIvPjxwYXRoIGQ9Ik0zMTUgMHY0MmwtMTYgMTZ2NDJsMTggMTh2NDUiLz48cGF0aCBkPSJNMTEyIDIyMHYtNDJsMTgtMTh2LTQ4bC0xNS0xNVY2MiIvPjxwYXRoIGQ9Ik0yMzAgOTRoNzJsMjAtMjBoOTgiLz48cGF0aCBkPSJNMCAxMDRoNDhsMTggMThoNjYiLz48L2c+PGcgZmlsbD0iIzRjYTJmZiIgZmlsbC1vcGFjaXR5PSIuMTgiPjxjaXJjbGUgY3g9IjcwIiBjeT0iMzgiIHI9IjIiLz48Y2lyY2xlIGN4PSIxNDYiIGN5PSI1NiIgcj0iMiIvPjxjaXJjbGUgY3g9IjI2MCIgY3k9IjU2IiByPSIyIi8+PGNpcmNsZSBjeD0iNTIiIGN5PSIxNzAiIHI9IjIiLz48Y2lyY2xlIGN4PSIxNDgiIGN5PSIxNDYiIHI9IjIiLz48Y2lyY2xlIGN4PSIyNDIiIGN5PSIxNDIiIHI9IjIiLz48Y2lyY2xlIGN4PSIzMTUiIGN5PSI0MiIgcj0iMiIvPjxjaXJjbGUgY3g9IjExMiIgY3k9IjE3OCIgcj0iMiIvPjxjaXJjbGUgY3g9IjMwMiIgY3k9Ijk0IiByPSIyIi8+PC9nPjwvc3ZnPg==") !important;
  background-size:520px 272px !important;
  background-position:center 18px !important;
  background-repeat:repeat !important;
  animation:none !important;
  filter:none !important;
}
#menuCard.menu-dashboard-card::after {
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    radial-gradient(circle at 18% 18%,rgba(76,162,255,.055),transparent 34%),
    linear-gradient(90deg,transparent,rgba(76,162,255,.018) 48%,transparent) !important;
  animation:none !important;
}
.menu-dashboard-head,.menu-card-grid,.menu-section-views { position:relative !important; z-index:1 !important; }

.menu-dashboard-titleblock { min-width:0; display:flex; flex-direction:column; gap:5px; }
.menu-dashboard-eyebrow {
  color:#617287 !important;
  font-family:'Rajdhani',system-ui,sans-serif !important;
  font-size:9px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.18em !important;
  white-space:nowrap;
}
.menu-dashboard-head h2 {
  font-size:20px !important;
  letter-spacing:.25px !important;
  text-shadow:0 0 16px rgba(76,162,255,.045) !important;
}

/* More intentional controls, still flat and implementation-realistic. */
.menu-dashboard-actions .daily-rewards-btn,
.menu-dashboard-actions .global-refresh-btn {
  border-color:rgba(121,151,184,.22) !important;
  background:rgba(15,23,33,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.menu-dashboard-actions .daily-rewards-btn:hover,
.menu-dashboard-actions .global-refresh-btn:hover {
  border-color:rgba(95,167,238,.35) !important;
  background:rgba(20,30,43,.92) !important;
}
.global-refresh-btn::before {
  content:'' !important;
  width:14px !important;height:14px !important;
  display:inline-block !important;
  margin-right:7px !important;
  vertical-align:-2px !important;
  background:#7ca7cf !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.75 10h-2.1A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.75 10h-2.1A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Each mode has one restrained accent. */
.menu-feature-card.ai      { --mode-rgb:76,162,255; }
.menu-feature-card.drunk   { --mode-rgb:169,133,255; }
.menu-feature-card.friend  { --mode-rgb:106,217,165; }
.menu-feature-card.public  { --mode-rgb:107,200,238; }
.menu-feature-card.arena   { --mode-rgb:233,180,95; }
.menu-feature-card.join    { --mode-rgb:142,169,255; }
.menu-feature-card.global  { --mode-rgb:105,206,213; }
.menu-feature-card.posts   { --mode-rgb:157,172,189; }
.menu-feature-card.premium { --mode-rgb:228,189,98; }
.menu-feature-card.clubs   { --mode-rgb:185,156,255; }

.menu-card-grid { gap:11px !important; }
.menu-feature-card {
  min-height:92px !important;
  padding:13px 42px 13px 13px !important;
  gap:12px !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border-radius:16px !important;
  border:1px solid rgba(var(--mode-rgb),.18) !important;
  background:
    linear-gradient(115deg,rgba(var(--mode-rgb),.055),transparent 43%),
    linear-gradient(155deg,rgba(17,25,35,.94),rgba(9,14,21,.97)) !important;
  box-shadow:
    inset 2px 0 0 rgba(var(--mode-rgb),.26),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow:hidden !important;
}
.menu-feature-card::before {
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:.40 !important;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgNDIwIDIyMCIgZmlsbD0ibm9uZSI+PGcgc3Ryb2tlPSIjM2E4YmQ4IiBzdHJva2Utb3BhY2l0eT0iLjEzIiBzdHJva2Utd2lkdGg9IjEiPjxwYXRoIGQ9Ik0wIDM4aDcwbDE4IDE4aDU4bDE4LTE4aDc4bDE4IDE4aDgwIi8+PHBhdGggZD0iTTAgMTcwaDUybDI0LTI0aDcybDE4IDE4aDU0bDIyLTIyaDE3OCIvPjxwYXRoIGQ9Ik0zMTUgMHY0MmwtMTYgMTZ2NDJsMTggMTh2NDUiLz48cGF0aCBkPSJNMTEyIDIyMHYtNDJsMTgtMTh2LTQ4bC0xNS0xNVY2MiIvPjxwYXRoIGQ9Ik0yMzAgOTRoNzJsMjAtMjBoOTgiLz48cGF0aCBkPSJNMCAxMDRoNDhsMTggMThoNjYiLz48L2c+PGcgZmlsbD0iIzRjYTJmZiIgZmlsbC1vcGFjaXR5PSIuMTgiPjxjaXJjbGUgY3g9IjcwIiBjeT0iMzgiIHI9IjIiLz48Y2lyY2xlIGN4PSIxNDYiIGN5PSI1NiIgcj0iMiIvPjxjaXJjbGUgY3g9IjI2MCIgY3k9IjU2IiByPSIyIi8+PGNpcmNsZSBjeD0iNTIiIGN5PSIxNzAiIHI9IjIiLz48Y2lyY2xlIGN4PSIxNDgiIGN5PSIxNDYiIHI9IjIiLz48Y2lyY2xlIGN4PSIyNDIiIGN5PSIxNDIiIHI9IjIiLz48Y2lyY2xlIGN4PSIzMTUiIGN5PSI0MiIgcj0iMiIvPjxjaXJjbGUgY3g9IjExMiIgY3k9IjE3OCIgcj0iMiIvPjxjaXJjbGUgY3g9IjMwMiIgY3k9Ijk0IiByPSIyIi8+PC9nPjwvc3ZnPg==") !important;
  background-size:260px 136px !important;
  background-position:right -54px center !important;
  background-repeat:no-repeat !important;
  filter:none !important;
}
.menu-feature-card::after {
  content:'›' !important;
  right:12px !important;
  top:50% !important;
  width:22px !important;height:22px !important;
  transform:translateY(-50%) !important;
  color:rgba(var(--mode-rgb),.72) !important;
  border:1px solid rgba(var(--mode-rgb),.12) !important;
  background:rgba(var(--mode-rgb),.035) !important;
  border-radius:8px !important;
  font-size:18px !important;
}
.menu-feature-card:hover,
.menu-feature-card:focus-visible {
  transform:translateY(-1px) !important;
  border-color:rgba(var(--mode-rgb),.38) !important;
  background:
    linear-gradient(115deg,rgba(var(--mode-rgb),.085),transparent 46%),
    linear-gradient(155deg,rgba(20,30,42,.97),rgba(10,16,24,.99)) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    inset 2px 0 0 rgba(var(--mode-rgb),.50),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.menu-feature-card:hover::after { transform:translate(2px,-50%) !important; color:rgb(var(--mode-rgb)) !important; }
.menu-feature-card:active { transform:scale(.985) !important; }

.menu-feature-copy {
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
}
.menu-feature-card strong {
  margin:0 !important;
  color:#edf4fb !important;
  font-size:13px !important;
  line-height:1.15 !important;
  letter-spacing:.08px !important;
}
.menu-feature-tag {
  display:inline-flex !important;
  align-items:center !important;
  min-height:17px !important;
  padding:2px 6px !important;
  border-radius:999px !important;
  border:1px solid rgba(var(--mode-rgb),.20) !important;
  background:rgba(var(--mode-rgb),.055) !important;
  color:rgba(var(--mode-rgb),.88) !important;
  font-family:'Rajdhani',system-ui,sans-serif !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.11em !important;
}

/* Clean duotone SVG icons: richer than generic glyphs, still real app UI. */
.menu-feature-icon {
  width:44px !important;height:44px !important;
  min-width:44px !important;flex:0 0 44px !important;
  border-radius:13px !important;
  border:1px solid rgba(var(--mode-rgb),.22) !important;
  background:
    radial-gradient(circle at 28% 20%,rgba(var(--mode-rgb),.15),transparent 56%),
    rgba(10,17,25,.86) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow:visible !important;
}
.menu-feature-icon::before {
  content:'' !important;
  width:26px !important;height:26px !important;
  margin:0 !important;
  position:absolute !important;
  inset:50% auto auto 50% !important;
  transform:translate(-50%,-50%) !important;
  background-color:transparent !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  mask:none !important;-webkit-mask:none !important;
}
.menu-feature-icon::after {
  content:'' !important;
  position:absolute !important;
  right:5px !important;bottom:5px !important;
  width:4px !important;height:4px !important;
  border-radius:50% !important;
  background:rgba(var(--mode-rgb),.85) !important;
  box-shadow:0 0 7px rgba(var(--mode-rgb),.34) !important;
}
.menu-feature-card.ai .menu-feature-icon::before      { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTggMjZoMTdNMTAgMjNoMTNsLTEtNGMtMS4xLTMuNy0zLjYtNS40LTcuMS02LjdsMy4zLTYuNy0zLjggMS44LTIuNi0yLjEtMSA1LjEtMyAzLjIgMi43IDIuMiA0LjItLjgiIHN0cm9rZT0iI2RjZWNmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTcgOS40bDMgMS44TTE4LjYgMTMuMWwzIDEuOE0yMCAxNi44bDIuMyAxLjQiIHN0cm9rZT0iIzRjYTJmZiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjE5LjgiIGN5PSIxMS4xIiByPSIxIiBmaWxsPSIjNGNhMmZmIi8+PGNpcmNsZSBjeD0iMjEuOCIgY3k9IjE0LjgiIHI9IjEiIGZpbGw9IiM0Y2EyZmYiLz48L3N2Zz4=") !important; }
.menu-feature-card.drunk .menu-feature-icon::before   { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTggNWgxNmwtMS42IDguMUE2LjYgNi42IDAgMCAxIDE3IDE4LjRWMjVoNXYySDEwdi0yaDV2LTYuNmE2LjYgNi42IDAgMCAxLTUuNC01LjNMOCA1WiIgc3Ryb2tlPSIjZTVkY2ZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTAgMTFjMy40LTEuNCA2LjggMS41IDEyLS42IiBzdHJva2U9IiNhOTg1ZmYiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSIxOC44IiBjeT0iOC40IiByPSIxLjEiIGZpbGw9IiNhOTg1ZmYiLz48Y2lyY2xlIGN4PSIyMS44IiBjeT0iNi44IiByPSIuOCIgZmlsbD0iI2E5ODVmZiIvPjwvc3ZnPg==") !important; }
.menu-feature-card.friend .menu-feature-icon::before  { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iNCIgc3Ryb2tlPSIjZGZmOGVlIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIyMiIgY3k9IjEwIiByPSI0IiBzdHJva2U9IiM2YWQ5YTUiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0zLjUgMjVjLjctNSAzLjMtNy41IDYuNS03LjVzNS44IDIuNSA2LjUgNy41TTE1LjUgMjVjLjctNSAzLjMtNy41IDYuNS03LjVzNS44IDIuNSA2LjUgNy41IiBzdHJva2U9IiNkZmY4ZWUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTE2IDE2LjVsMiAxLjQtMiAxLjQtMi0xLjQgMi0xLjRaIiBmaWxsPSIjNmFkOWE1Ii8+PC9zdmc+") !important; }
.menu-feature-card.public .menu-feature-icon::before  { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTMgMTZzNC41LTcgMTMtNyAxMyA3IDEzIDctNC41IDctMTMgN1MzIDE2IDMgMTZaIiBzdHJva2U9IiNkZmY2ZmYiIHN0cm9rZS13aWR0aD0iMiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjQuNSIgc3Ryb2tlPSIjNmJjOGVlIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTYgMTMuN3Y0LjZNMTMuNyAxNmg0LjYiIHN0cm9rZT0iIzZiYzhlZSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==") !important; }
.menu-feature-card.arena .menu-feature-icon::before   { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEwIDVoMTJ2NGMwIDUtMi42IDguMy02IDkuNEMxMi42IDE3LjMgMTAgMTQgMTAgOVY1WiIgc3Ryb2tlPSIjZmZmMGQ3IiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTAgOEg2djJjMCA0IDIuNCA2IDUuMSA2TTIyIDhoNHYyYzAgNC0yLjQgNi01LjEgNk0xNiAxOC41VjI0TTExIDI3aDEwTTEzIDI0aDYiIHN0cm9rZT0iI2U5YjQ1ZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJtMTYgOCAxLjMgMi42IDIuOS40LTIuMSAyIC41IDIuOC0yLjYtMS4zLTIuNiAxLjMuNS0yLjgtMi4xLTIgMi45LS40TDE2IDhaIiBmaWxsPSIjZTliNDVmIi8+PC9zdmc+") !important; }
.menu-feature-card.join .menu-feature-icon::before    { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTcgNGgxN3YyNEg3VjRaIiBzdHJva2U9IiNlNGVhZmYiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0xMiA4aDh2MTZoLTgiIHN0cm9rZT0iIzhlYTlmZiIgc3Ryb2tlLXdpZHRoPSIxLjgiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE2IiByPSIxLjQiIGZpbGw9IiM4ZWE5ZmYiLz48cGF0aCBkPSJNMyAxNmg4TTcuNSAxMi41IDExIDE2bC0zLjUgMy41IiBzdHJva2U9IiM4ZWE5ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; }
.menu-feature-card.global .menu-feature-icon::before  { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTEiIHN0cm9rZT0iI2UwZmJmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTUgMTZoMjJNMTYgNWMzLjIgMyA1IDYuOCA1IDExcy0xLjggOC01IDExYy0zLjItMy01LTYuOC01LTExczEuOC04IDUtMTFaIiBzdHJva2U9IiM2OWNlZDUiIHN0cm9rZS13aWR0aD0iMS43Ii8+PGNpcmNsZSBjeD0iMjUuNSIgY3k9IjkiIHI9IjEuNSIgZmlsbD0iIzY5Y2VkNSIvPjxjaXJjbGUgY3g9IjciIGN5PSIyMyIgcj0iMS41IiBmaWxsPSIjNjljZWQ1Ii8+PC9zdmc+") !important; }
.menu-feature-card.posts .menu-feature-icon::before   { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTcgNGgxNGw0IDR2MjBIN1Y0WiIgc3Ryb2tlPSIjZTVlZGY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjEgNHY1aDRNMTEgMTRoOU0xMSAxOGg3TTExIDIyaDUiIHN0cm9rZT0iIzlkYWNiZCIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Im0xOS41IDIzLjUgNi4yLTYuMiAyIDItNi4yIDYuMi0zIC45IDEtMi45WiIgZmlsbD0iIzlkYWNiZCIvPjwvc3ZnPg==") !important; }
.menu-feature-card.premium .menu-feature-icon::before { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0ibTUgMTAgNiA0IDUtOCA1IDggNi00LTIuNSAxM2gtMTdMNSAxMFoiIHN0cm9rZT0iI2ZmZjJjOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTkgMjZoMTRNMTEgMTloMTAiIHN0cm9rZT0iI2U0YmQ2MiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjEwIiByPSIxLjQiIGZpbGw9IiNlNGJkNjIiLz48L3N2Zz4=") !important; }
.menu-feature-card.clubs .menu-feature-icon::before   { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE2IDMgMjYgN3Y3YzAgNi40LTQuMSAxMS44LTEwIDE0LTUuOS0yLjItMTAtNy42LTEwLTE0VjdsMTAtNFoiIHN0cm9rZT0iI2VlZTdmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTExIDIxaDEwTTEyLjUgMThoN2wtLjgtMy4zYy0uNy0yLjQtMi4zLTMuNi00LjUtNC41bDItMy41LTIuNyAxLjEtMS43LTEuMy0uNyAzLjMtMiAyLjIgMS44IDEuNSAyLjYtLjYiIHN0cm9rZT0iI2I5OWNmZiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") !important; }

/* Highlight special modes without the fake 3D/AI-poster look. */
.menu-feature-card.drunk {
  border-color:rgba(169,133,255,.27) !important;
  box-shadow:inset 2px 0 0 rgba(169,133,255,.44),inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.menu-feature-card.premium {
  border-color:rgba(228,189,98,.29) !important;
  box-shadow:inset 2px 0 0 rgba(228,189,98,.48),inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Use the last desktop row as a community strip instead of leaving a dead column. */
@media (min-width:981px) {
  .menu-feature-card.clubs { grid-column:1 / -1 !important; min-height:84px !important; }
  .menu-feature-card.clubs::before { background-size:360px 188px !important; background-position:right -12px center !important; opacity:.55 !important; }
}

@media (max-width:980px) {
  .menu-feature-card.clubs { grid-column:auto !important; }
}

@media (max-width:640px) {
  #menuCard.menu-dashboard-card { padding:12px !important; }
  .menu-dashboard-head {
    min-height:52px !important;
    padding-bottom:11px !important;
    margin-bottom:11px !important;
    gap:7px !important;
  }
  .menu-dashboard-titleblock { gap:4px !important; }
  .menu-dashboard-head h2 { font-size:15px !important; line-height:1.18 !important; }
  .menu-dashboard-eyebrow { font-size:7px !important; letter-spacing:.13em !important; }
  .menu-dashboard-actions { gap:5px !important; }
  .menu-dashboard-actions .daily-rewards-btn,
  .menu-dashboard-actions .global-refresh-btn { min-height:33px !important; padding:0 8px !important; font-size:9px !important; }
  .daily-rewards-btn::after { font-size:9px !important; }
  .global-refresh-btn::before,.daily-rewards-btn::before { width:12px !important;height:12px !important;margin-right:5px !important; }

  .menu-card-grid { gap:8px !important; }
  .menu-feature-card {
    min-height:78px !important;
    padding:10px 29px 10px 9px !important;
    gap:8px !important;
    border-radius:14px !important;
  }
  .menu-feature-card::before { background-size:190px 100px !important; background-position:right -55px center !important; opacity:.34 !important; }
  .menu-feature-card::after { right:6px !important; width:17px !important;height:17px !important;font-size:14px !important;border-radius:6px !important; }
  .menu-feature-icon {
    width:36px !important;height:36px !important;
    min-width:36px !important;flex-basis:36px !important;
    border-radius:10px !important;
  }
  .menu-feature-icon::before { width:22px !important;height:22px !important; }
  .menu-feature-icon::after { right:4px !important;bottom:4px !important;width:3px !important;height:3px !important; }
  .menu-feature-copy { gap:4px !important; }
  .menu-feature-card strong { font-size:10px !important; line-height:1.12 !important; }
  .menu-feature-tag { min-height:14px !important;padding:1px 5px !important;font-size:6.5px !important;letter-spacing:.08em !important; }
}

@media (max-width:390px) {
  .menu-feature-card { min-height:74px !important; }
  .menu-dashboard-head { align-items:flex-start !important; }
  .menu-dashboard-actions .global-refresh-btn { font-size:0 !important; width:34px !important; padding:0 !important; display:grid !important; place-items:center !important; }
  .menu-dashboard-actions .global-refresh-btn::before { margin:0 !important; width:14px !important;height:14px !important; }
}

@media (prefers-reduced-motion:reduce) {
  .menu-feature-card,.menu-feature-card::after { transition:none !important; }
}


/* =====================================================================
   ChessMondo 8.2.5 — Menu + Clubs cleanup final override
   User feedback pass: bigger real-app cards, no line BG, no menu dots,
   better AI/Clubs icons, wider Clubs web layout, stronger sizing.
   ===================================================================== */

/* Remove global line/grid backgrounds. Keep the dark gradient only. */
body::before,
body::after,
.game-area::before,
.game-area::after,
.menu-dashboard-card::before,
.menu-dashboard-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.game-area {
  max-width: 1320px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

#menuCard.menu-dashboard-card {
  max-width: 1240px !important;
  margin: 28px auto !important;
  padding: 28px !important;
  background: linear-gradient(180deg, rgba(13,19,28,.96), rgba(7,11,17,.98)) !important;
}

.menu-dashboard-head {
  align-items: flex-start !important;
  gap: 16px !important;
}
.menu-dashboard-head h2 {
  font-size: clamp(28px, 2.25vw, 36px) !important;
  line-height: 1.05 !important;
}
.menu-dashboard-head h2::after {
  content: '' !important;
  display: none !important;
}
.menu-dashboard-eyebrow {
  display: inline-block !important;
  margin-top: 10px !important;
  color: #95a5b8 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

.menu-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.menu-feature-card {
  min-height: 158px !important;
  padding: 20px !important;
  gap: 14px !important;
  border-radius: 20px !important;
  align-items: center !important;
  background: linear-gradient(155deg, rgba(19,28,39,.97), rgba(10,15,22,.99)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 32px rgba(0,0,0,.16) !important;
}
.menu-feature-card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg, transparent 48%, rgba(255,255,255,.02) 100%) !important;
  background-image: none !important;
  opacity: 1 !important;
}
.menu-feature-card::after {
  content: '›' !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  font-size: 20px !important;
  color: rgba(164, 183, 206, .72) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.menu-feature-card:hover::after {
  transform: translate(3px, -50%) !important;
}
.menu-feature-copy {
  gap: 8px !important;
}
.menu-feature-card strong {
  font-size: 18px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.menu-feature-tag {
  min-height: 20px !important;
  padding: 3px 8px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

/* Larger, cleaner icons with no weird dot badge. */
.menu-feature-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 16px !important;
  border-width: 1px !important;
  background: linear-gradient(180deg, rgba(17,24,35,.98), rgba(10,15,22,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.menu-feature-icon::before,
.feature-panel-head .feature-icon::before {
  width: 28px !important;
  height: 28px !important;
  background-color: currentColor !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
}
.menu-feature-icon::after {
  content: none !important;
  display: none !important;
}

/* Re-assert all 10 menu / panel icons so every icon is consistent. */
.menu-feature-card.ai .menu-feature-icon::before,
#panelAI .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 2h6v2h-1v1h1a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h1V4H9V2Zm1 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm4 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM9 15v2h6v-2H9Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 2h6v2h-1v1h1a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h1V4H9V2Zm1 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm4 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM9 15v2h6v-2H9Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.drunk .menu-feature-icon::before,
#panelDrunk .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10l-1 6a5 5 0 0 1-3 3.76V19h4v2H7v-2h4v-7.24A5 5 0 0 1 8 8L7 2Zm2.2 2 .5 3h4.6l.5-3H9.2Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10l-1 6a5 5 0 0 1-3 3.76V19h4v2H7v-2h4v-7.24A5 5 0 0 1 8 8L7 2Zm2.2 2 .5 3h4.6l.5-3H9.2Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.friend .menu-feature-icon::before,
#panelFriend .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.5 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2 20v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2H2Zm14.5-7c3.04 0 5.5 2.46 5.5 5.5V20h-4v-2a7 7 0 0 0-1.92-4.82c.14-.08.28-.14.42-.18Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.5 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2 20v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2H2Zm14.5-7c3.04 0 5.5 2.46 5.5 5.5V20h-4v-2a7 7 0 0 0-1.92-4.82c.14-.08.28-.14.42-.18Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.public .menu-feature-icon::before,
#panelPublic .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5C6.5 5 2.1 8.3.5 12c1.6 3.7 6 7 11.5 7s9.9-3.3 11.5-7C21.9 8.3 17.5 5 12 5Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5C6.5 5 2.1 8.3.5 12c1.6 3.7 6 7 11.5 7s9.9-3.3 11.5-7C21.9 8.3 17.5 5 12 5Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.arena .menu-feature-icon::before,
#panelArena .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h3v2a6 6 0 0 1-5 5.92A5 5 0 0 1 13 16v2h4v3H7v-3h4v-2a5 5 0 0 1-2-2.08A6 6 0 0 1 4 8V6h3V3Zm10 5V8h1a4 4 0 0 1-2.54 3.72C16.04 10.62 16.5 9.36 17 8ZM6 8v.01a4 4 0 0 0 2.54 3.71A9.6 9.6 0 0 1 7 8H6Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h3v2a6 6 0 0 1-5 5.92A5 5 0 0 1 13 16v2h4v3H7v-3h4v-2a5 5 0 0 1-2-2.08A6 6 0 0 1 4 8V6h3V3Zm10 5V8h1a4 4 0 0 1-2.54 3.72C16.04 10.62 16.5 9.36 17 8ZM6 8v.01a4 4 0 0 0 2.54 3.71A9.6 9.6 0 0 1 7 8H6Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.join .menu-feature-icon::before,
#panelJoin .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3a6.5 6.5 0 0 0-5.92 9.18L2 18.76V22h3.24l1.5-1.5 1.5 1.5 2.26-2.26-1.5-1.5 1.5-1.5 1.5 1.5 3.82-3.82A6.5 6.5 0 1 0 14.5 3Zm2.5 5.5A1.5 1.5 0 1 1 17 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3a6.5 6.5 0 0 0-5.92 9.18L2 18.76V22h3.24l1.5-1.5 1.5 1.5 2.26-2.26-1.5-1.5 1.5-1.5 1.5 1.5 3.82-3.82A6.5 6.5 0 1 0 14.5 3Zm2.5 5.5A1.5 1.5 0 1 1 17 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.global .menu-feature-icon::before,
#panelGlobal .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 6h-3.05a15.7 15.7 0 0 0-1.4-3.35A8.08 8.08 0 0 1 18.92 8ZM12 4c.85 1.03 1.54 2.38 1.93 4h-3.86C10.46 6.38 11.15 5.03 12 4ZM4.26 14a8.09 8.09 0 0 1 0-4h3.4a16.9 16.9 0 0 0 0 4h-3.4Zm.82 2h3.05c.3 1.22.77 2.36 1.4 3.35A8.08 8.08 0 0 1 5.08 16ZM8.13 8H5.08a8.08 8.08 0 0 1 4.45-3.35A15.7 15.7 0 0 0 8.13 8ZM12 20c-.85-1.03-1.54-2.38-1.93-4h3.86c-.39 1.62-1.08 2.97-1.93 4Zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4Zm.17 5.35c.63-.99 1.1-2.13 1.4-3.35h3.05a8.08 8.08 0 0 1-4.45 3.35ZM16.34 14a16.9 16.9 0 0 0 0-4h3.4a8.09 8.09 0 0 1 0 4h-3.4Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 6h-3.05a15.7 15.7 0 0 0-1.4-3.35A8.08 8.08 0 0 1 18.92 8ZM12 4c.85 1.03 1.54 2.38 1.93 4h-3.86C10.46 6.38 11.15 5.03 12 4ZM4.26 14a8.09 8.09 0 0 1 0-4h3.4a16.9 16.9 0 0 0 0 4h-3.4Zm.82 2h3.05c.3 1.22.77 2.36 1.4 3.35A8.08 8.08 0 0 1 5.08 16ZM8.13 8H5.08a8.08 8.08 0 0 1 4.45-3.35A15.7 15.7 0 0 0 8.13 8ZM12 20c-.85-1.03-1.54-2.38-1.93-4h3.86c-.39 1.62-1.08 2.97-1.93 4Zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4Zm.17 5.35c.63-.99 1.1-2.13 1.4-3.35h3.05a8.08 8.08 0 0 1-4.45 3.35ZM16.34 14a16.9 16.9 0 0 0 0-4h3.4a8.09 8.09 0 0 1 0 4h-3.4Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.posts .menu-feature-icon::before,
#panelPosts .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 2h10l4 4v16H5V2Zm9 1.5V7h3.5L14 3.5ZM8 11v2h8v-2H8Zm0 4v2h8v-2H8Zm0 4v2h5v-2H8Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 2h10l4 4v16H5V2Zm9 1.5V7h3.5L14 3.5ZM8 11v2h8v-2H8Zm0 4v2h8v-2H8Zm0 4v2h5v-2H8Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.premium .menu-feature-icon::before,
#panelPremium .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 7 4.2 3L12 4l4.8 6L21 7l-2 11H5L3 7Zm2.5 13h13v2h-13v-2Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 7 4.2 3L12 4l4.8 6L21 7l-2 11H5L3 7Zm2.5 13h13v2h-13v-2Z'/%3E%3C/svg%3E") !important;
}
.menu-feature-card.clubs .menu-feature-icon::before,
#panelClubs .feature-icon::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 6a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm8 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM4 19a4.5 4.5 0 0 1 4.5-4.5h1A4.5 4.5 0 0 1 14 19v1H4v-1Zm11 1v-1a5.8 5.8 0 0 0-1.04-3.33 4.2 4.2 0 0 1 1.54-.29h1A3.5 3.5 0 0 1 20 18.88V20h-5Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 6a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm8 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM4 19a4.5 4.5 0 0 1 4.5-4.5h1A4.5 4.5 0 0 1 14 19v1H4v-1Zm11 1v-1a5.8 5.8 0 0 0-1.04-3.33 4.2 4.2 0 0 1 1.54-.29h1A3.5 3.5 0 0 1 20 18.88V20h-5Z'/%3E%3C/svg%3E") !important;
}

/* Main section panels: cleaner headers, less clutter, same icon language. */
.feature-panel-head {
  gap: 14px !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
}
.feature-panel-head .feature-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17,24,35,.98), rgba(10,15,22,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  font-size: 0 !important;
}
.feature-panel-head h3 {
  font-size: 26px !important;
  line-height: 1.08 !important;
}
.feature-panel-head p {
  display: none !important;
}

/* Clubs web page: full usable width, no tiny shell, no broken page scroll. */
#panelClubs.menu-section-panel {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: calc(100dvh - 160px) !important;
  height: calc(100dvh - 160px) !important;
  overflow: hidden !important;
}
#panelClubs .clubs-app-shell {
  display: grid !important;
  grid-template-columns: minmax(420px, 470px) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(10,15,22,.98), rgba(7,11,17,.99)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.26) !important;
}
#panelClubs .clubs-chat-list-panel,
#panelClubs .clubs-conversation-panel {
  height: 100% !important;
  min-height: 0 !important;
}
#panelClubs .clubs-chat-list-panel {
  overflow-y: auto !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}
#panelClubs .clubs-conversation-panel {
  display: flex !important;
  overflow: hidden !important;
}
#panelClubs .club-chat-box {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
#panelClubs .club-chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
#panelClubs .club-list-whatsapp,
#panelClubs .club-list-mini {
  overflow: visible !important;
}
#panelClubs .clubs-app-head h3,
#panelClubs .club-chat-title-wrap b {
  letter-spacing: -.02em !important;
  text-transform: none !important;
}
#panelClubs .clubs-app-head p,
#panelClubs .club-empty-state p { display: none !important; }

/* Desktop and tablet scaling */
@media (max-width: 1180px) {
  #panelClubs.menu-section-panel {
    max-width: 100% !important;
    min-height: calc(100dvh - 150px) !important;
    height: calc(100dvh - 150px) !important;
  }
  #panelClubs .clubs-app-shell {
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
  }
  .menu-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  .menu-dashboard-head {
    align-items: stretch !important;
  }
  .menu-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .menu-feature-card {
    min-height: 138px !important;
    padding: 16px !important;
  }
  .menu-feature-card strong {
    font-size: 16px !important;
  }
}
@media (max-width: 560px) {
  .menu-card-grid {
    grid-template-columns: 1fr !important;
  }
  .menu-dashboard-head h2 {
    font-size: 26px !important;
  }
  .menu-dashboard-eyebrow {
    font-size: 12px !important;
  }
}


/* =====================================================================
   ChessMondo 8.2.5 — definitive web menu + one-screen Clubs layout
   This block intentionally uses the real component IDs to outrank the
   retired 8.2.4 circuit/icon experiment above it.
   ===================================================================== */

/* Keep atmosphere, remove every circuit/line texture from the page. */
#gameScreen.screen {
  background-color: #080d13 !important;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(48,120,196,.08), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(110,79,180,.055), transparent 28%) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: top left, top right !important;
}
#gameScreen.screen::before,
#gameScreen.screen::after,
#gameArea.game-area::before,
#gameArea.game-area::after,
#menuCard.menu-dashboard-card::before,
#menuCard.menu-dashboard-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
#menuCard .menu-feature-card::before {
  background: linear-gradient(120deg, rgba(var(--mode-rgb),.055), transparent 46%) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* One icon language for every main card and every section heading. */
.menu-feature-card.ai,
#panelAI { --mode-rgb: 76,162,255; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='3'/%3E%3Cpath d='M9 12h.01M15 12h.01M8 16h8M2 12h2M20 12h2M12 7V3M9 3h6'/%3E%3C/svg%3E"); }
.menu-feature-card.drunk,
#panelDrunk { --mode-rgb: 169,133,255; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10l-1 6a4 4 0 0 1-8 0L7 3ZM8 8h8M12 13v8M8 21h8'/%3E%3C/svg%3E"); }
.menu-feature-card.friend,
#panelFriend { --mode-rgb: 106,217,165; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1M16 5.2a3 3 0 0 1 0 5.6M17 14a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
.menu-feature-card.public,
#panelPublic { --mode-rgb: 107,200,238; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.menu-feature-card.arena,
#panelArena { --mode-rgb: 233,180,95; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v4a4 4 0 0 1-8 0V4ZM8 6H4v1a4 4 0 0 0 5 4M16 6h4v1a4 4 0 0 1-5 4M12 12v5M8 21h8M9 17h6'/%3E%3C/svg%3E"); }
.menu-feature-card.join,
#panelJoin { --mode-rgb: 142,169,255; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H5v14h5M13 8l4 4-4 4M17 12H8'/%3E%3C/svg%3E"); }
.menu-feature-card.global,
#panelGlobal { --mode-rgb: 105,206,213; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.menu-feature-card.posts,
#panelPosts { --mode-rgb: 157,172,189; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v16H5zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.menu-feature-card.premium,
#panelPremium { --mode-rgb: 228,189,98; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 4 3 5-6 5 6 4-3-2 10H5L3 7ZM6 21h12'/%3E%3C/svg%3E"); }
.menu-feature-card.clubs,
#panelClubs { --mode-rgb: 185,156,255; --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6M8 11h.01M12 11h.01M16 11h.01'/%3E%3C/svg%3E"); }

#menuCard .menu-feature-card .menu-feature-icon::before,
#menuCard .menu-section-panel .feature-icon::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 29px !important;
  height: 29px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  background: rgb(var(--mode-rgb)) !important;
  background-image: none !important;
  -webkit-mask-image: var(--cm-section-icon) !important;
  mask-image: var(--cm-section-icon) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
#menuCard .menu-feature-card .menu-feature-icon::after,
#menuCard .menu-section-panel .feature-icon::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}

.section-heading-with-icon {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 14px !important;
}
.section-heading-with-icon > div { min-width: 0 !important; }
#menuCard .section-heading-with-icon .feature-icon {
  position: relative !important;
  display: block !important;
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  border: 1px solid rgba(var(--mode-rgb),.25) !important;
  border-radius: 15px !important;
  color: rgb(var(--mode-rgb)) !important;
  background: rgba(var(--mode-rgb),.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Web main menu: larger cards, labels and controls without fake bulk. */
@media (min-width: 861px) {
  #gameArea.game-area {
    max-width: 1560px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #menuCard.menu-dashboard-card {
    width: 100% !important;
    max-width: 1420px !important;
    margin: 26px auto 30px !important;
    padding: 30px !important;
  }
  #menuCard .menu-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  #menuCard .menu-feature-card,
  #menuCard .menu-feature-card.clubs {
    grid-column: auto !important;
    min-height: 146px !important;
    padding: 20px 52px 20px 20px !important;
    gap: 15px !important;
    border-radius: 19px !important;
  }
  #menuCard .menu-feature-icon {
    position: relative !important;
    flex: 0 0 60px !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
  }
  #menuCard .menu-feature-card strong {
    font-size: 18px !important;
    line-height: 1.14 !important;
  }
  #menuCard .menu-feature-tag {
    min-height: 21px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
  }
  #menuCard .menu-feature-card::after {
    right: 16px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: 20px !important;
  }
  #menuCard .menu-dashboard-actions > button,
  #menuCard .menu-back-btn,
  #menuCard .feature-action-row button,
  #menuCard .public-room-action-buttons button,
  #menuCard .menu-section-panel > button {
    min-height: 44px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 13px !important;
  }
  #menuCard .feature-panel-head .feature-icon {
    position: relative !important;
    display: block !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    border: 1px solid rgba(var(--mode-rgb),.25) !important;
    border-radius: 17px !important;
    color: rgb(var(--mode-rgb)) !important;
    background: rgba(var(--mode-rgb),.075) !important;
  }
  #menuCard .feature-panel-head h3,
  #menuCard .global-panel-head h3,
  #menuCard .posts-head h3,
  #menuCard .premium-head h3,
  #menuCard .clubs-app-head h3 {
    font-size: 25px !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
  }
  #menuCard .feature-panel-head p {
    display: block !important;
    margin-top: 5px !important;
    color: #8c9bad !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 861px) and (max-width: 1199px) {
  #menuCard .menu-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Chess Clubs owns the desktop viewport. Only its two inner columns scroll. */
@media (min-width: 861px) {
  html.club-section-open-root,
  body.club-section-open-body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  body.club-section-open-body #gameScreen.screen {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  body.club-section-open-body #gameArea.game-area {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: 76px 18px 14px !important;
    overflow: hidden !important;
  }
  body.club-section-open-body #menuCard.menu-dashboard-card {
    box-sizing: border-box !important;
    width: min(1480px, 100%) !important;
    max-width: 1480px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    display: grid !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    align-self: stretch !important;
    justify-self: start !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }
  body.club-section-open-body #panelClubs.menu-section-panel {
    box-sizing: border-box !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-shell {
    box-sizing: border-box !important;
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }
  body.club-section-open-body #panelClubs .clubs-chat-list-panel {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  body.club-section-open-body #panelClubs .clubs-conversation-panel,
  body.club-section-open-body #panelClubs .club-chat-box,
  body.club-section-open-body #panelClubs .club-empty-state {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body.club-section-open-body #panelClubs .club-chat-messages {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  body.club-section-open-body #panelClubs .club-chat-input-row,
  body.club-section-open-body #panelClubs .club-chat-head {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head .feature-icon {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head .feature-icon::before {
    width: 25px !important;
    height: 25px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head h3 {
    font-size: 20px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head p {
    display: block !important;
    max-width: 245px !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  body.club-section-open-body .legal-mini-links {
    display: none !important;
  }
}

@media (min-width: 861px) and (max-width: 1179px) {
  body.club-section-open-body #panelClubs .clubs-app-shell {
    grid-template-columns: minmax(320px, 40%) minmax(0, 1fr) !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head {
    padding: 13px 13px 10px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head p {
    display: none !important;
  }
}

/* The supplied app artwork is used only in the installed mobile shell. */
html.chessmondo-mobile-app img[data-mobile-brand] {
  object-fit: contain !important;
}
html.chessmondo-mobile-app .top-brand-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  filter: drop-shadow(0 0 11px rgba(76,162,255,.24)) !important;
}
html.chessmondo-mobile-app .auth-brand .cvex-logo {
  width: 88px !important;
  height: 88px !important;
  border-radius: 22px !important;
}

/* =====================================================================
   ChessMondo 8.2.6 — viewport scroll repair + premium chess motion
   The document stays fixed; real overflow remains usable inside the app.
   ===================================================================== */

html,
body {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#authScreen.screen {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
#authScreen .auth-wrapper { margin-block: auto !important; }

#gameScreen.screen {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#gameArea.game-area {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  padding-top: 64px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#gameArea.game-area::-webkit-scrollbar,
#authScreen.screen::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
#authScreen.screen { scrollbar-width: none; }

/* Keep the normal web menu inside one desktop viewport. */
#menuCard.menu-dashboard-card {
  margin: 18px auto !important;
  padding: 24px !important;
}
#menuCard .menu-dashboard-head {
  min-height: 54px !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
}

/* Compact chess vignette: it adds identity without becoming another button. */
.menu-chess-stage,
.menu-card-watermark,
.menu-card-sparks { display: none; }

@media (min-width: 861px) {
  #menuCard .menu-chess-stage {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto 138px !important;
    align-items: center !important;
    min-height: 76px !important;
    margin: 0 0 16px !important;
    padding: 10px 14px 10px 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(107, 139, 175, .20) !important;
    border-left-color: rgba(228, 189, 98, .72) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 78% 50%, rgba(76, 162, 255, .11), transparent 31%),
      radial-gradient(circle at 6% 10%, rgba(228, 189, 98, .08), transparent 34%),
      linear-gradient(105deg, rgba(18, 27, 39, .98), rgba(8, 13, 20, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.14) !important;
  }
  #menuCard .menu-stage-copy {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  #menuCard .menu-stage-kicker {
    color: rgba(228, 189, 98, .82) !important;
    font-family: 'Rajdhani', system-ui, sans-serif !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
  }
  #menuCard .menu-stage-copy strong {
    color: #edf4fb !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -.015em !important;
  }
  #menuCard .menu-stage-status {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 28px !important;
    margin-right: 18px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(106, 217, 165, .18) !important;
    border-radius: 999px !important;
    background: rgba(106, 217, 165, .045) !important;
    color: #9fb0c1 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  #menuCard .menu-stage-status i {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #6ad9a5 !important;
    box-shadow: 0 0 0 0 rgba(106,217,165,.30) !important;
    animation: cmStagePulse 2.4s ease-out infinite !important;
  }
  #menuCard .menu-stage-board {
    position: relative !important;
    z-index: 2 !important;
    justify-self: end !important;
    width: 132px !important;
    height: 54px !important;
    overflow: hidden !important;
    border: 1px solid rgba(119, 150, 184, .22) !important;
    border-radius: 11px !important;
    background-color: rgba(12, 20, 29, .94) !important;
    background-image: conic-gradient(from 90deg, rgba(76,162,255,.075) 25%, transparent 0 50%, rgba(76,162,255,.075) 0 75%, transparent 0) !important;
    background-size: 26px 26px !important;
    box-shadow: inset 0 0 22px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.18) !important;
  }
  #menuCard .menu-stage-board > span {
    position: absolute !important;
    bottom: 8px !important;
    color: rgba(210, 224, 239, .38) !important;
    font-family: 'Times New Roman', serif !important;
    font-size: 25px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.42)) !important;
  }
  #menuCard .menu-stage-rook { left: 9px !important; }
  #menuCard .menu-stage-queen { right: 9px !important; color: rgba(228,189,98,.50) !important; }
  #menuCard .menu-stage-knight {
    left: 38px !important;
    z-index: 2 !important;
    color: #74b9ff !important;
    text-shadow: 0 0 14px rgba(76,162,255,.38) !important;
    animation: cmKnightMove 5.6s cubic-bezier(.45,0,.22,1) infinite !important;
  }
  #menuCard .menu-stage-sparks {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  #menuCard .menu-stage-sparks i {
    position: absolute !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: rgba(119, 185, 255, .68) !important;
    box-shadow: 0 0 8px rgba(76,162,255,.55) !important;
    opacity: 0 !important;
    animation: cmStageSpark 4.6s ease-in-out infinite !important;
  }
  #menuCard .menu-stage-sparks i:nth-child(1) { left: 52%; top: 27%; animation-delay: .2s !important; }
  #menuCard .menu-stage-sparks i:nth-child(2) { left: 61%; top: 68%; animation-delay: 1.4s !important; }
  #menuCard .menu-stage-sparks i:nth-child(3) { left: 72%; top: 31%; animation-delay: 2.3s !important; }
  #menuCard .menu-stage-sparks i:nth-child(4) { left: 80%; top: 72%; animation-delay: 3.2s !important; background:#e4bd62 !important; }
  #menuCard .menu-stage-sparks i:nth-child(5) { left: 89%; top: 20%; animation-delay: 1.9s !important; background:#e4bd62 !important; }
  #menuCard .menu-stage-sparks i:nth-child(6) { left: 95%; top: 60%; animation-delay: 3.9s !important; }

  #menuCard .menu-card-grid {
    gap: 14px !important;
  }
  #menuCard .menu-feature-card,
  #menuCard .menu-feature-card.clubs {
    position: relative !important;
    grid-column: auto !important;
    min-height: 148px !important;
    padding: 18px 44px 18px 17px !important;
    gap: 13px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    animation: cmMenuCardReveal .42s cubic-bezier(.2,.72,.2,1) both !important;
  }
  #menuCard .menu-feature-card:nth-child(2) { animation-delay: 35ms !important; }
  #menuCard .menu-feature-card:nth-child(3) { animation-delay: 70ms !important; }
  #menuCard .menu-feature-card:nth-child(4) { animation-delay: 105ms !important; }
  #menuCard .menu-feature-card:nth-child(5) { animation-delay: 140ms !important; }
  #menuCard .menu-feature-card:nth-child(6) { animation-delay: 175ms !important; }
  #menuCard .menu-feature-card:nth-child(7) { animation-delay: 210ms !important; }
  #menuCard .menu-feature-card:nth-child(8) { animation-delay: 245ms !important; }
  #menuCard .menu-feature-card:nth-child(9) { animation-delay: 280ms !important; }
  #menuCard .menu-feature-card:nth-child(10) { animation-delay: 315ms !important; }
  #menuCard .menu-feature-card .menu-feature-icon,
  #menuCard .menu-feature-card .menu-feature-copy {
    position: relative !important;
    z-index: 3 !important;
  }
  #menuCard .menu-feature-card .menu-feature-copy { gap: 5px !important; }
  #menuCard .menu-feature-detail {
    display: block !important;
    width: 100% !important;
    max-width: 170px !important;
    overflow: hidden !important;
    color: #8291a3 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  #menuCard .menu-feature-tag { margin-top: 2px !important; }
  #menuCard .menu-card-watermark {
    position: absolute !important;
    right: 30px !important;
    bottom: -31px !important;
    z-index: 1 !important;
    display: block !important;
    color: rgba(var(--mode-rgb), .055) !important;
    font-family: 'Times New Roman', serif !important;
    font-size: 88px !important;
    line-height: 1 !important;
    transform: rotate(-8deg) !important;
    transform-origin: 50% 70% !important;
    filter: drop-shadow(0 0 15px rgba(var(--mode-rgb),.07)) !important;
    transition: color .28s ease, transform .32s cubic-bezier(.2,.8,.2,1), filter .28s ease !important;
    pointer-events: none !important;
  }
  #menuCard .menu-card-sparks {
    position: absolute !important;
    top: 25px !important;
    right: 45px !important;
    z-index: 2 !important;
    display: block !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: rgb(var(--mode-rgb)) !important;
    box-shadow: 18px 18px 0 -1px rgba(var(--mode-rgb),.72), -13px 31px 0 -1px rgba(var(--mode-rgb),.62) !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(.7) !important;
    transition: opacity .25s ease, transform .42s cubic-bezier(.2,.75,.2,1) !important;
    pointer-events: none !important;
  }
  #menuCard .menu-feature-card:hover,
  #menuCard .menu-feature-card:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(var(--mode-rgb), .42) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.25), inset 2px 0 0 rgba(var(--mode-rgb),.58), inset 0 1px 0 rgba(255,255,255,.055) !important;
  }
  #menuCard .menu-feature-card:hover .menu-feature-icon,
  #menuCard .menu-feature-card:focus-visible .menu-feature-icon {
    transform: translateY(-2px) rotate(-3deg) scale(1.045) !important;
    border-color: rgba(var(--mode-rgb), .42) !important;
    box-shadow: 0 9px 24px rgba(var(--mode-rgb),.13), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  #menuCard .menu-feature-card:nth-child(even):hover .menu-feature-icon,
  #menuCard .menu-feature-card:nth-child(even):focus-visible .menu-feature-icon {
    transform: translateY(-2px) rotate(3deg) scale(1.045) !important;
  }
  #menuCard .menu-feature-card:hover .menu-card-watermark,
  #menuCard .menu-feature-card:focus-visible .menu-card-watermark {
    color: rgba(var(--mode-rgb), .105) !important;
    transform: translate(-5px, -7px) rotate(-2deg) scale(1.04) !important;
    filter: drop-shadow(0 0 20px rgba(var(--mode-rgb),.15)) !important;
  }
  #menuCard .menu-feature-card:hover .menu-card-sparks,
  #menuCard .menu-feature-card:focus-visible .menu-card-sparks {
    opacity: .68 !important;
    transform: translateY(-5px) scale(1) !important;
  }
}

@media (min-width: 861px) and (max-width: 1199px) {
  #menuCard .menu-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #menuCard .menu-stage-status { display: none !important; }
  #menuCard .menu-chess-stage { grid-template-columns: minmax(220px, 1fr) 138px !important; }
}
@media (min-width: 1200px) and (max-width: 1449px) {
  #menuCard .menu-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1450px) {
  #menuCard .menu-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Short desktop screens keep every main-menu mode visible without page scroll. */
@media (min-width: 1200px) and (max-height: 820px) {
  #menuCard.menu-dashboard-card { margin: 10px auto !important; padding: 18px !important; }
  #menuCard .menu-dashboard-head {
    min-height: 44px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
  }
  #menuCard .menu-dashboard-head h2 { font-size: 27px !important; }
  #menuCard .menu-dashboard-eyebrow { margin-top: 5px !important; font-size: 11px !important; }
  #menuCard .menu-chess-stage {
    min-height: 58px !important;
    margin-bottom: 12px !important;
    padding-block: 6px !important;
  }
  #menuCard .menu-stage-board { height: 44px !important; }
  #menuCard .menu-stage-board > span { bottom: 5px !important; font-size: 22px !important; }
  #menuCard .menu-card-grid { gap: 11px !important; }
  #menuCard .menu-feature-card,
  #menuCard .menu-feature-card.clubs {
    min-height: 112px !important;
    padding-block: 13px !important;
  }
  #menuCard .menu-feature-icon {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }
}

@media (min-width: 861px) and (max-width: 1199px) and (max-height: 820px) {
  #menuCard.menu-dashboard-card { margin: 9px auto !important; padding: 17px !important; }
  #menuCard .menu-dashboard-head {
    min-height: 42px !important;
    margin-bottom: 10px !important;
    padding-bottom: 9px !important;
  }
  #menuCard .menu-dashboard-head h2 { font-size: 25px !important; }
  #menuCard .menu-dashboard-eyebrow { margin-top: 4px !important; font-size: 10px !important; }
  #menuCard .menu-chess-stage { display: none !important; }
  #menuCard .menu-card-grid { gap: 10px !important; }
  #menuCard .menu-feature-card,
  #menuCard .menu-feature-card.clubs {
    min-height: 104px !important;
    padding: 12px 39px 12px 14px !important;
  }
  #menuCard .menu-feature-icon {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  #menuCard .menu-feature-card strong { font-size: 16px !important; }
}

@media (max-width: 860px) {
  #gameArea.game-area {
    padding-top: calc(72px + env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  #menuCard .menu-feature-detail,
  #menuCard .menu-card-watermark,
  #menuCard .menu-card-sparks { display: none !important; }
}

@keyframes cmMenuCardReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cmKnightMove {
  0%, 14%, 100% { transform: translate3d(0,0,0) rotate(-5deg); }
  42%, 58% { transform: translate3d(34px,-11px,0) rotate(5deg); }
  84% { transform: translate3d(57px,0,0) rotate(-2deg); }
}
@keyframes cmStageSpark {
  0%, 22%, 100% { opacity: 0; transform: translate3d(0,5px,0) scale(.45); }
  42%, 58% { opacity: .72; transform: translate3d(2px,-3px,0) scale(1); }
  78% { opacity: 0; transform: translate3d(5px,-8px,0) scale(.65); }
}
@keyframes cmStagePulse {
  0% { box-shadow: 0 0 0 0 rgba(106,217,165,.30); }
  72%, 100% { box-shadow: 0 0 0 7px rgba(106,217,165,0); }
}

@media (prefers-reduced-motion: reduce) {
  #menuCard .menu-feature-card,
  #menuCard .menu-feature-card .menu-feature-icon,
  #menuCard .menu-card-watermark,
  #menuCard .menu-card-sparks,
  #menuCard .menu-stage-knight,
  #menuCard .menu-stage-status i,
  #menuCard .menu-stage-sparks i {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   ChessMondo 8.3.0 — bandwidth-friendly history controls
   ===================================================================== */
.chat-load-older {
  display:block;
  width:max-content;
  max-width:calc(100% - 24px);
  margin:10px auto 14px;
  padding:7px 12px;
  border:1px solid rgba(139,148,158,.22);
  border-radius:999px;
  background:rgba(22,27,34,.78);
  color:#aebaca;
  font:700 11px/1.2 'Inter',system-ui,sans-serif;
  cursor:pointer;
}
.chat-load-older:hover {
  border-color:rgba(88,166,255,.45);
  color:#fff;
  background:rgba(47,129,247,.12);
}


/* =====================================================================
   ChessMondo 8.3.4 — mobile layout restoration + live piece stage
   Frontend-only polish. Preserves the current card visual language while
   restoring the older, ordered 2-column mobile placement.
   ===================================================================== */

/* Desktop identity strip: all chess piece types, no notification pill. */
@media (min-width: 861px) {
  #menuCard .menu-chess-stage {
    grid-template-columns: minmax(230px, 1fr) minmax(430px, 48%) !important;
    min-height: 82px !important;
    padding: 10px 14px 10px 18px !important;
  }
  #menuCard .menu-stage-status { display: none !important; }
  #menuCard .menu-stage-piece-showcase {
    justify-self: end !important;
    width: min(100%, 520px) !important;
    height: 58px !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 1px !important;
    padding: 7px 10px 6px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid rgba(119,150,184,.20) !important;
    background:
      linear-gradient(90deg, transparent 0 49.8%, rgba(95,157,225,.055) 50%, transparent 50.2%),
      linear-gradient(180deg, rgba(19,29,41,.92), rgba(8,13,20,.96)) !important;
    box-shadow: inset 0 0 26px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.16) !important;
  }
  #menuCard .menu-stage-piece-showcase::before {
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    background-image:
      linear-gradient(rgba(108,155,205,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(108,155,205,.045) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    opacity:.55 !important;
  }
  #menuCard .menu-stage-piece-showcase > .stage-piece {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    display:block !important;
    min-width:0 !important;
    text-align:center !important;
    color: rgba(181,199,220,.62) !important;
    font-family:'Times New Roman',serif !important;
    font-size: 27px !important;
    line-height:1 !important;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.42)) !important;
    transform-origin:50% 100% !important;
    animation: cmPieceWave 5.8s cubic-bezier(.45,0,.24,1) infinite !important;
    animation-delay: calc(var(--piece-i) * -0.22s) !important;
  }
  #menuCard .menu-stage-piece-showcase > .stage-white {
    color: rgba(232,239,247,.78) !important;
  }
  #menuCard .menu-stage-piece-showcase > .stage-royal {
    color: rgba(228,189,98,.88) !important;
    text-shadow: 0 0 13px rgba(228,189,98,.18) !important;
  }
  #menuCard .stage-scan-line {
    position:absolute !important;
    z-index:1 !important;
    left:-18% !important;
    top:4px !important;
    bottom:4px !important;
    width:54px !important;
    border-radius:50% !important;
    background:linear-gradient(90deg,transparent,rgba(76,162,255,.14),transparent) !important;
    filter:blur(2px) !important;
    animation:cmBoardScan 5.2s ease-in-out infinite !important;
    pointer-events:none !important;
  }
}
@keyframes cmPieceWave {
  0%, 70%, 100% { transform:translateY(0) scale(1); filter:drop-shadow(0 4px 5px rgba(0,0,0,.42)); }
  78% { transform:translateY(-6px) scale(1.06); filter:drop-shadow(0 7px 8px rgba(0,0,0,.50)); }
  86% { transform:translateY(0) scale(1); }
}
@keyframes cmBoardScan {
  0%, 12% { transform:translateX(0); opacity:0; }
  22% { opacity:.7; }
  72% { opacity:.55; }
  86%,100% { transform:translateX(590px); opacity:0; }
}

/* Current inner-card design + the older ordered 2-column mobile placement. */
@media (max-width: 640px) {
  #gameArea.game-area {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #menuCard.menu-dashboard-card {
    width:100% !important;
    max-width:calc(100vw - 16px) !important;
    margin: 8px auto 14px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }
  #menuCard .menu-dashboard-head {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    min-height:0 !important;
    margin-bottom:12px !important;
    padding-bottom:12px !important;
  }
  #menuCard .menu-dashboard-titleblock { min-width:0 !important; }
  #menuCard .menu-dashboard-head h2 {
    margin:0 !important;
    font-size: clamp(19px, 5.3vw, 22px) !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    letter-spacing:-.035em !important;
  }
  #menuCard .menu-dashboard-eyebrow {
    margin-top:6px !important;
    font-size:10.5px !important;
  }
  #menuCard .menu-dashboard-actions {
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  #menuCard .daily-rewards-btn,
  #menuCard .global-refresh-btn {
    width:100% !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:0 8px !important;
    justify-content:center !important;
    font-size:10px !important;
    border-radius:10px !important;
  }
  #menuCard .menu-card-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #menuCard .menu-feature-card,
  #menuCard .menu-feature-card.clubs {
    min-width:0 !important;
    min-height:112px !important;
    padding:11px 28px 11px 10px !important;
    gap:8px !important;
    border-radius:14px !important;
    align-items:center !important;
    animation-duration:.28s !important;
  }
  #menuCard .menu-feature-icon {
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
    border-radius:11px !important;
  }
  #menuCard .menu-feature-icon::before {
    width:21px !important;
    height:21px !important;
  }
  #menuCard .menu-feature-copy {
    min-width:0 !important;
    gap:4px !important;
  }
  #menuCard .menu-feature-card strong {
    max-width:100% !important;
    font-size:12.5px !important;
    line-height:1.08 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
  }
  #menuCard .menu-feature-tag {
    min-height:16px !important;
    padding:2px 5px !important;
    font-size:7px !important;
    letter-spacing:.09em !important;
  }
  #menuCard .menu-feature-card::after {
    right:7px !important;
    width:20px !important;
    height:20px !important;
    border-radius:7px !important;
    font-size:16px !important;
  }
  #menuCard .menu-feature-detail,
  #menuCard .menu-card-watermark,
  #menuCard .menu-card-sparks,
  #menuCard .menu-chess-stage { display:none !important; }

  /* Mobile game stack: old compact placement, current controls. */
  #gameBoard.game-board-wrap { margin-top:6px !important; }
  #gameBoard .game-layout { gap:8px !important; }
  #gameBoard .left-panel {
    padding:7px 7px 10px !important;
    border-radius:16px !important;
    align-items:center !important;
  }
  #gameBoard #capturedByBlack.captured-bar {
    order:1 !important;
    min-height:22px !important;
    height:22px !important;
    margin:0 0 4px !important;
    padding:3px 8px !important;
    align-self:stretch !important;
  }
  #gameBoard #capturedByBlack.captured-bar span {
    font-size:9px !important;
    line-height:1 !important;
  }
  #gameBoard #mpTopPlayer { order:2 !important; margin:0 0 4px !important; }
  #gameBoard #chessClocks { order:3 !important; margin:0 0 4px !important; }
  #gameBoard #gameTimer {
    order:4 !important;
    min-height:30px !important;
    margin:0 0 4px !important;
    padding:4px 8px !important;
    border-radius:9px !important;
  }
  #gameBoard #status {
    order:5 !important;
    min-height:36px !important;
    margin:0 0 5px !important;
    padding:7px 9px !important;
    border-radius:10px !important;
    font-size:14px !important;
  }
  #gameBoard #drunkHud {
    order:6 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 0 5px !important;
  }
  #gameBoard #board { order:7 !important; }
  #gameBoard #mpBottomPlayer { order:8 !important; }
  #gameBoard #aiControls { order:9 !important; }
  #gameBoard #mpControls { order:10 !important; }
  #gameBoard #capturedByWhite { order:11 !important; }
  #gameBoard #disconnectBanner { order:12 !important; }

  .drunk-rules-toggle {
    min-height:36px !important;
    padding:5px 8px 5px 9px !important;
    gap:7px !important;
    border-radius:11px !important;
  }
  .drunk-rules-toggle-main { gap:6px !important; }
  .drunk-rules-title {
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    font-size:11px !important;
  }
  .drunk-rules-title::before {
    content:'' !important;
    width:13px !important;
    height:13px !important;
    flex:0 0 13px !important;
    background:currentColor !important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10l-1 6a5 5 0 0 1-3 3.76V19h4v2H7v-2h4v-7.24A5 5 0 0 1 8 8L7 2Zm2.2 2 .5 3h4.6l.5-3H9.2Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10l-1 6a5 5 0 0 1-3 3.76V19h4v2H7v-2h4v-7.24A5 5 0 0 1 8 8L7 2Zm2.2 2 .5 3h4.6l.5-3H9.2Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
  .drunk-rules-toggle .drunk-phase-pill {
    padding:3px 5px !important;
    font-size:7.5px !important;
  }
  .drunk-rules-toggle-sub strong { font-size:13px !important; }
}

@media (max-width: 350px) {
  #menuCard .menu-card-grid { grid-template-columns:1fr !important; }
  #menuCard .menu-feature-card,
  #menuCard .menu-feature-card.clubs { min-height:92px !important; }
}

/* Desktop Drunk Chess: align the compact HUD tightly with the board stack. */
@media (min-width: 641px) {
  #gameBoard .left-panel { padding-top:14px !important; }
  #gameBoard #capturedByBlack.captured-bar {
    margin-top:0 !important;
    margin-bottom:5px !important;
    min-height:24px !important;
  }
  #gameBoard #gameTimer { margin-top:0 !important; margin-bottom:5px !important; }
  #gameBoard #status { margin-top:0 !important; margin-bottom:6px !important; }
  #gameBoard .drunk-hud.drunk-hud-compact {
    width:min(430px,82%) !important;
    margin:0 auto 6px !important;
  }
  #gameBoard .drunk-rules-toggle {
    min-height:38px !important;
    padding:6px 9px 6px 11px !important;
    border-radius:12px !important;
  }
  #gameBoard .drunk-rules-title {
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    font-size:12px !important;
  }
  #gameBoard .drunk-rules-title::before {
    content:'' !important;
    width:14px !important;
    height:14px !important;
    background:currentColor !important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10l-1 6a5 5 0 0 1-3 3.76V19h4v2H7v-2h4v-7.24A5 5 0 0 1 8 8L7 2Zm2.2 2 .5 3h4.6l.5-3H9.2Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10l-1 6a5 5 0 0 1-3 3.76V19h4v2H7v-2h4v-7.24A5 5 0 0 1 8 8L7 2Zm2.2 2 .5 3h4.6l.5-3H9.2Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
}

/* If the brand image ever fails in a mobile WebView, show the wordmark instead
   of a broken-image glyph. */
@media (max-width:640px) {
  .top-brand.brand-logo-missing .top-brand-text {
    display:inline-flex !important;
    font-size:12px !important;
    letter-spacing:.12em !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Clan Battles v2 — live timed competition + mobile polish
═══════════════════════════════════════════════════════ */
#clubBattleList.club-battle-list {
  display:grid !important;
  gap:8px !important;
  max-height:260px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 6px 8px !important;
  margin-bottom:8px !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin;
}
#clubBattleList .club-battle-card {
  padding:10px !important;
  border-radius:14px !important;
  background:rgba(13,20,27,.92) !important;
  border:1px solid rgba(134,150,160,.16) !important;
}
#clubBattleList .club-battle-card.status-active {
  border-color:rgba(47,129,247,.46) !important;
  background:linear-gradient(135deg,rgba(47,129,247,.13),rgba(13,20,27,.96)) !important;
}
#clubBattleList .club-battle-card.status-scheduled {
  border-color:rgba(210,153,34,.38) !important;
  background:linear-gradient(135deg,rgba(210,153,34,.10),rgba(13,20,27,.96)) !important;
}
#clubBattleList .club-battle-live-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) !important;
  gap:7px !important;
  align-items:center !important;
}
#clubBattleList .club-battle-side {
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) auto !important;
  gap:7px !important;
  align-items:center !important;
  min-width:0 !important;
}
#clubBattleList .club-battle-side b {
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#f0f6fc !important;
  font-size:12px !important;
}
#clubBattleList .club-battle-side strong {
  min-width:24px !important;
  text-align:center !important;
  font-size:18px !important;
  line-height:1 !important;
  color:#79c0ff !important;
}
#clubBattleList .club-battle-side.opponent strong { color:#f2cc60 !important; }
#clubBattleList .club-battle-center { display:grid !important; justify-items:center !important; gap:1px !important; }
#clubBattleList .club-battle-center em { color:#ff7b72 !important; font-style:normal !important; font-weight:950 !important; font-size:13px !important; }
#clubBattleList .club-battle-center small { color:#8b949e !important; font-size:7.5px !important; font-weight:900 !important; letter-spacing:.08em !important; }
#clubBattleList .club-avatar.small {
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:50% !important;
  font-size:11px !important;
}
#clubBattleList .club-battle-meta-row {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px 8px !important;
  align-items:center !important;
  margin-top:7px !important;
  color:#8b949e !important;
  font-size:9px !important;
  font-weight:700 !important;
}
#clubBattleList .club-battle-countdown {
  color:#f2cc60 !important;
  font-family:'Share Tech Mono',monospace !important;
  font-weight:900 !important;
}
#clubBattleList .club-battle-countdown.active { color:#79c0ff !important; }
#clubBattleList .club-battle-actions { margin-top:7px !important; }
#clubBattleList .club-battle-actions button { min-height:30px !important; padding:5px 10px !important; font-size:10px !important; }
.club-row-action.battle.disabled { opacity:.42 !important; cursor:not-allowed !important; filter:saturate(.45) !important; }

.club-leader-marker {
  display:inline-flex !important;
  align-items:center !important;
  margin-left:5px !important;
  padding:2px 5px !important;
  border:1px solid rgba(242,204,96,.42) !important;
  border-radius:999px !important;
  color:#f2cc60 !important;
  background:rgba(210,153,34,.12) !important;
  font-size:8px !important;
  line-height:1 !important;
  font-style:normal !important;
  font-weight:950 !important;
  letter-spacing:.08em !important;
  vertical-align:middle !important;
}

.clan-battle-setup-card { width:min(92vw,480px) !important; }
.clan-battle-setup-body { display:grid !important; gap:10px !important; padding:16px !important; }
.clan-battle-setup-vs {
  padding:12px !important;
  border-radius:14px !important;
  background:rgba(47,129,247,.10) !important;
  border:1px solid rgba(47,129,247,.25) !important;
  color:#f0f6fc !important;
  font-weight:950 !important;
  text-align:center !important;
}
.clan-battle-setup-body label { color:#c9d1d9 !important; font-size:12px !important; font-weight:900 !important; }
.clan-battle-setup-body label small { color:#8b949e !important; font-weight:700 !important; }
.clan-battle-setup-body select,
.clan-battle-setup-body input {
  width:100% !important;
  min-height:42px !important;
  padding:9px 11px !important;
  border:1px solid rgba(134,150,160,.22) !important;
  border-radius:12px !important;
  background:#111b21 !important;
  color:#f0f6fc !important;
  font:800 13px 'Rajdhani',sans-serif !important;
  color-scheme:dark;
}
.clan-battle-reward-preview {
  padding:9px 11px !important;
  border-radius:12px !important;
  color:#f2cc60 !important;
  background:rgba(210,153,34,.10) !important;
  border:1px solid rgba(210,153,34,.22) !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.clan-battle-rules-note { color:#8b949e !important; font-size:10.5px !important; line-height:1.35 !important; }
.clan-battle-setup-actions { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }

/* Friend/online matches have extra player bars and controls. Compact only the
   desktop multiplayer layout so the full game stays visible like AI mode. */
@media (min-width:901px) {
  body.multiplayer-game-active #gameBoard .game-layout {
    max-width:980px !important;
    grid-template-columns:minmax(0,1fr) minmax(320px,360px) !important;
    gap:14px !important;
  }
  body.multiplayer-game-active #gameBoard .left-panel { padding:10px 12px 12px !important; }
  body.multiplayer-game-active #gameBoard .right-panel {
    width:min(360px,31vw) !important;
    min-width:320px !important;
    max-width:360px !important;
  }
  body.multiplayer-game-active #gameBoard #board,
  body.multiplayer-game-active #gameBoard #status,
  body.multiplayer-game-active #gameBoard .chess-clocks,
  body.multiplayer-game-active #gameBoard .game-timer,
  body.multiplayer-game-active #gameBoard .captured-bar,
  body.multiplayer-game-active #gameBoard .controls,
  body.multiplayer-game-active #gameBoard .mp-controls,
  body.multiplayer-game-active #gameBoard #mpTopPlayer,
  body.multiplayer-game-active #gameBoard #mpBottomPlayer,
  body.multiplayer-game-active #gameBoard #disconnectBanner {
    width:min(500px, calc(100dvh - 430px), 100%) !important;
  }
  body.multiplayer-game-active #gameBoard #board { min-width:390px !important; }
  body.multiplayer-game-active #gameBoard .captured-bar { min-height:25px !important; padding:4px 9px !important; }
  body.multiplayer-game-active #gameBoard .mp-player-bar { min-height:44px !important; padding:5px 9px !important; }
  body.multiplayer-game-active #gameBoard .game-timer { min-height:32px !important; padding:4px 9px !important; }
  body.multiplayer-game-active #gameBoard #status { min-height:38px !important; padding:6px 10px !important; }
  body.multiplayer-game-active #gameBoard .mp-controls { margin-top:6px !important; gap:6px !important; }
  body.multiplayer-game-active #gameBoard .mp-controls button { min-height:36px !important; padding:7px 10px !important; }
  body.multiplayer-game-active .mp-chat { height:clamp(360px,52vh,560px) !important; min-height:360px !important; }
}

@media (max-width:860px) {
  #clubBattleList.club-battle-list { max-height:220px !important; padding:0 5px 7px !important; }
  #clubBattleList .club-battle-card { padding:8px !important; border-radius:12px !important; }
  #clubBattleList .club-battle-live-grid { grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) !important; gap:4px !important; }
  #clubBattleList .club-battle-side { grid-template-columns:26px minmax(0,1fr) !important; gap:5px !important; }
  #clubBattleList .club-battle-side strong { grid-column:1 / -1 !important; justify-self:center !important; font-size:15px !important; }
  #clubBattleList .club-battle-side b { font-size:10.5px !important; }
  #clubBattleList .club-avatar.small { width:26px !important; height:26px !important; min-width:26px !important; }
  #clubBattleList .club-battle-center em { font-size:11px !important; }
  #clubBattleList .club-battle-center small { font-size:6.5px !important; }
  #clubBattleList .club-battle-meta-row { font-size:8px !important; gap:4px 6px !important; }

  /* Smaller club avatars on phones: more information fits without giant cards. */
  #panelClubs .club-chat-row { grid-template-columns:36px minmax(0,1fr) auto !important; min-height:56px !important; padding:7px 7px !important; gap:7px !important; }
  #panelClubs .club-chat-row .club-avatar { width:34px !important; height:34px !important; min-width:34px !important; }
  #panelClubs .club-lb-chat-row { grid-template-columns:24px 34px minmax(0,1fr) auto !important; }
  #panelClubs .club-lb-chat-row .club-avatar { width:34px !important; height:34px !important; min-width:34px !important; }
  #panelClubs .club-row-top b { font-size:12.5px !important; }
  #panelClubs .club-row-preview { font-size:10px !important; }
  #panelClubs .club-row-meta { font-size:8.5px !important; }
  .clan-battle-setup-card { width:min(94vw,430px) !important; }
  .clan-battle-setup-body { padding:12px !important; gap:8px !important; }
}

@media (min-width:901px) and (max-height:760px) {
  body.multiplayer-game-active #gameBoard #board,
  body.multiplayer-game-active #gameBoard #status,
  body.multiplayer-game-active #gameBoard .chess-clocks,
  body.multiplayer-game-active #gameBoard .game-timer,
  body.multiplayer-game-active #gameBoard .captured-bar,
  body.multiplayer-game-active #gameBoard .controls,
  body.multiplayer-game-active #gameBoard .mp-controls,
  body.multiplayer-game-active #gameBoard #mpTopPlayer,
  body.multiplayer-game-active #gameBoard #mpBottomPlayer,
  body.multiplayer-game-active #gameBoard #disconnectBanner {
    width:min(420px, calc(100dvh - 335px), 100%) !important;
  }
  body.multiplayer-game-active #gameBoard #board { min-width:330px !important; }
}

/* ═══════════════════════════════════════════════════════
   v8.3.8 — Multiplayer exit, history cap & mobile modal stability
   Final override layer: keeps live-game controls and mobile close/back actions accessible.
═══════════════════════════════════════════════════════ */

/* In-app leave/resign confirmation — replaces browser confirm(). */
.game-exit-confirm-card {
  width:min(92vw,430px) !important;
  max-height:min(520px,86dvh) !important;
}
.game-exit-confirm-body {
  display:grid !important;
  gap:14px !important;
  padding:20px !important;
  text-align:center !important;
}
.game-exit-confirm-icon {
  width:44px !important;
  height:44px !important;
  margin:0 auto !important;
  display:grid !important;
  place-items:center !important;
  border-radius:14px !important;
  border:1px solid rgba(248,81,73,.30) !important;
  background:rgba(248,81,73,.10) !important;
  color:#ff8d86 !important;
  font-size:22px !important;
  font-weight:950 !important;
}
.game-exit-confirm-body p {
  margin:0 !important;
  color:#c9d1d9 !important;
  font-size:13px !important;
  line-height:1.5 !important;
}
.game-exit-confirm-actions {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:9px !important;
}
.game-exit-confirm-actions button {
  min-height:42px !important;
  margin:0 !important;
}

/* Move history is always a five-row viewport in live games. More moves scroll
   inside the history box, so chat and game controls never get pushed down. */
body.multiplayer-game-active #gameBoard .right-panel {
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
body.multiplayer-game-active #gameBoard #moveHistory {
  --cm-history-head-h: 36px;
  --cm-history-row-h: 36px;
  height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
  min-height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
  max-height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  flex:0 0 auto !important;
}
body.multiplayer-game-active #gameBoard #moveHistory table {
  table-layout:fixed !important;
}
body.multiplayer-game-active #gameBoard #moveHistory thead th {
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  height:var(--cm-history-head-h) !important;
  padding:7px 10px !important;
  background:#111820 !important;
  box-shadow:0 1px 0 rgba(139,148,158,.18) !important;
}
body.multiplayer-game-active #gameBoard #moveHistory tbody tr {
  height:var(--cm-history-row-h) !important;
}
body.multiplayer-game-active #gameBoard #moveHistory tbody td {
  height:var(--cm-history-row-h) !important;
  padding:6px 10px !important;
  line-height:1.1 !important;
}
body.multiplayer-game-active #gameBoard #moveHistory .empty-history {
  min-height:calc(var(--cm-history-row-h) * 5) !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:12px !important;
}
body.multiplayer-game-active #gameBoard #mpChatPanel.mp-chat {
  min-height:260px !important;
  height:auto !important;
  flex:1 1 0 !important;
  margin-top:10px !important;
  overflow:hidden !important;
}
body.multiplayer-game-active #gameBoard #mpChatPanel .mp-chat-messages {
  min-height:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}

@media (min-width:901px) {
  body.multiplayer-game-active #gameBoard .right-panel {
    height:min(720px, calc(100dvh - 105px)) !important;
    max-height:min(720px, calc(100dvh - 105px)) !important;
  }
  body.multiplayer-game-active #gameBoard #mpChatPanel.mp-chat {
    min-height:300px !important;
  }
}

/* Mobile / WebView: keep every modal header and close/back control inside the
   visible viewport. Scroll content inside cards, never the overlay itself. */
@media (max-width:640px) {
  .modal-overlay {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    box-sizing:border-box !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left)) !important;
  }

  .modal-overlay > .modal-card,
  .modal-overlay > .friends-modal-card,
  .modal-overlay > .notification-center-card,
  .modal-overlay > .follow-network-card,
  .modal-overlay > .blocked-users-card,
  .modal-overlay > .public-profile-card,
  .modal-overlay > .clan-battle-setup-card,
  .modal-overlay > .game-exit-confirm-card {
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
    margin:0 auto !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    border-radius:16px !important;
  }

  .modal-header {
    position:sticky !important;
    top:0 !important;
    z-index:60 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:50px !important;
    flex:0 0 auto !important;
    padding:9px 10px 9px 12px !important;
    background:linear-gradient(180deg,#101720,#0d141d) !important;
    border-bottom:1px solid rgba(139,148,158,.18) !important;
  }
  .modal-header > span {
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:12px !important;
    letter-spacing:.08em !important;
  }
  .modal-close,
  .settings-close,
  .friend-chat-close-screen,
  .friend-chat-back,
  .club-chat-back {
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    margin:0 !important;
    position:relative !important;
    z-index:80 !important;
  }

  /* Generic and feature-specific scroll bodies. */
  .modal-body,
  .friends-panel,
  .public-profile-body,
  .follow-network-body,
  .blocked-users-body,
  .analysis-moves,
  .clan-battle-setup-body,
  .game-exit-confirm-body {
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  /* Notification center previously allowed its whole card/overlay to scroll,
     which could move the title and X above the phone viewport. */
  .notification-center-card {
    height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  }
  .notification-center-card .notification-toolbar {
    flex:0 0 auto !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    padding:9px 10px !important;
  }
  .notification-center-card .notification-dnd-row {
    grid-column:1 / -1 !important;
    min-height:34px !important;
  }
  .notification-center-card .notification-clear-btn {
    width:100% !important;
    min-width:0 !important;
    padding:7px 8px !important;
    font-size:10px !important;
  }
  .notification-center-card .missed-invites-box {
    flex:0 0 auto !important;
    max-height:28dvh !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }
  .notification-center-card .notification-center-list {
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    padding-bottom:max(12px, env(safe-area-inset-bottom)) !important;
  }

  .friends-modal-card,
  .follow-network-card,
  .blocked-users-card,
  #achievementsModal .modal-card,
  #historyModal .modal-card,
  #publicProfileModal .modal-card {
    height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  }

  /* Settings uses a separate overlay/panel, so give it the same safe sticky header. */
  .settings-overlay {
    width:100vw !important;
    height:100dvh !important;
    overflow:hidden !important;
  }
  .settings-panel {
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    padding-top:env(safe-area-inset-top) !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
    box-sizing:border-box !important;
  }
  .settings-header {
    position:sticky !important;
    top:0 !important;
    z-index:70 !important;
    min-height:50px !important;
    flex:0 0 auto !important;
    padding:9px 10px 9px 12px !important;
    background:linear-gradient(180deg,#101720,#0d141d) !important;
  }
  .settings-body {
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
  }

  /* Full-screen social/chat headers must stay reachable while their content scrolls. */
  .friend-chat-screen-header,
  .club-chat-head {
    position:sticky !important;
    top:0 !important;
    z-index:70 !important;
    flex:0 0 auto !important;
  }

  /* Multiplayer mobile: exactly five history rows, then an independent chat box. */
  body.multiplayer-game-active #gameBoard .right-panel {
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.multiplayer-game-active #gameBoard #moveHistory {
    --cm-history-head-h: 34px;
    --cm-history-row-h: 34px;
    height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
    min-height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
    max-height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
  }
  body.multiplayer-game-active #gameBoard #mpChatPanel.mp-chat {
    flex:0 0 auto !important;
    height:300px !important;
    min-height:260px !important;
    max-height:320px !important;
    margin-top:8px !important;
  }

  .game-exit-confirm-card {
    width:min(100%,430px) !important;
    height:auto !important;
    max-height:min(440px, calc(100dvh - 24px)) !important;
    align-self:center !important;
    margin-top:min(14vh,90px) !important;
  }
  .game-exit-confirm-body { padding:16px !important; }
}


/* ═══════════════════════════════════════════════════════
   v8.3.9 — MOBILE-ONLY modal/header recovery
   Desktop/web layout is intentionally untouched.
   The mobile top bar uses a very high z-index, so modal overlays must begin
   below it instead of letting their headers/X controls sit underneath it.
═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root {
    --cm-mobile-topbar-h: calc(70px + env(safe-area-inset-top));
  }

  /* Keep the normal ChessMondo top bar visible, but place every modal directly
     below it. This restores the missing X / back-area on phone WebViews. */
  .modal-overlay {
    position: fixed !important;
    top: var(--cm-mobile-topbar-h) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: var(--cm-mobile-topbar-h) 0 0 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 2147483000 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 8px max(7px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    overscroll-behavior: none !important;
  }

  /* Main navigation/social modals use the available area under the top bar.
     Their content scrolls internally; the header never leaves the screen. */
  #notificationCenterModal > .modal-card,
  #friendsModal > .modal-card,
  #friendsLeaderboardModal > .modal-card,
  #publicProfileModal > .modal-card,
  #followNetworkModal > .modal-card,
  #historyModal > .modal-card,
  #achievementsModal > .modal-card,
  #blockedUsersModal > .modal-card,
  #friendProfileModal > .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  /* Force the title + X row to remain rendered. It is intentionally NOT the
     scrolling element; each feature body below it owns its own scroll. */
  .modal-header {
    position: relative !important;
    top: auto !important;
    z-index: 90 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 10px 9px 12px !important;
    background: linear-gradient(180deg,#101720,#0d141d) !important;
    border-bottom: 1px solid rgba(139,148,158,.18) !important;
  }
  .modal-header > span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .modal-header .modal-close,
  .modal-close {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    place-items: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
  }

  /* Scroll only feature content, never the card/header itself. */
  #friendsModal .friends-panel,
  #friendsLeaderboardModal .friends-leaderboard-body,
  #publicProfileModal .public-profile-body,
  #followNetworkModal .follow-network-body,
  #historyModal .modal-body,
  #achievementsModal .modal-body,
  #blockedUsersModal .blocked-users-body,
  #friendProfileModal .friend-profile-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* Notifications have several fixed sections; keep the list as the flexible
     scrolling area while the header and controls remain reachable. */
  #notificationCenterModal .notification-center-card {
    display: flex !important;
    flex-direction: column !important;
  }
  #notificationCenterModal .notification-toolbar {
    flex: 0 0 auto !important;
  }
  #notificationCenterModal .missed-invites-box {
    flex: 0 0 auto !important;
    max-height: 30dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  #notificationCenterModal .notification-center-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Friends: restore the phone card language. Avatar/banner + identity stay on
     the first row; Profile / Invite / Chat / Remove are a full row underneath. */
  #friendsModal .friend-item {
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar info"
      "actions actions" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  #friendsModal .friend-profile-tap {
    grid-area: avatar !important;
    width: 66px !important;
    min-width: 66px !important;
    justify-self: start !important;
  }
  #friendsModal .friend-card-list-avatar {
    width: 66px !important;
    height: 46px !important;
    max-width: 66px !important;
    border-radius: 9px !important;
  }
  #friendsModal .friend-info {
    grid-area: info !important;
    min-width: 0 !important;
    align-self: center !important;
  }
  #friendsModal .friend-name {
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  #friendsModal .friend-meta {
    display: block !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  #friendsModal .friend-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }
  #friendsModal .friend-action-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 3px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Own friend-image strip also stays compact instead of stealing vertical room. */
  #friendsModal .friends-profile-strip {
    grid-template-columns: 72px minmax(0,1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  #friendsModal .friend-own-avatar {
    width: 72px !important;
    height: 48px !important;
  }
  #friendsModal .friend-image-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
  }

  /* Follow / leaderboard / blocked rows must never widen the modal off-screen. */
  #followNetworkModal .follow-network-row,
  #friendsLeaderboardModal .friends-leaderboard-row,
  #blockedUsersModal .blocked-user-row {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  #friendsModal .friend-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ChessMondo final navigation / owner identity polish. */
#panelClubs .club-owner-name,
.clubs-conversation-panel .club-owner-name,
.club-chat-msg .club-owner-name {
  color:#f2cc60 !important;
  font-weight:950 !important;
  text-shadow:0 0 12px rgba(242,204,96,.16) !important;
}

@media (max-width: 768px) {
  /* X is the only modal navigation control on mobile; remove the old white back box. */
  .mobile-modal-back,
  .rewards-mobile-back { display:none !important; }
}


/* ===== ChessMondo club persistence / leave / mobile header stability ===== */
.club-leave-btn {
  border:1px solid rgba(239,68,68,.55) !important;
  background:rgba(127,29,29,.18) !important;
  color:#ff8d8d !important;
  border-radius:11px !important;
  padding:8px 12px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}
.club-leave-btn:hover { background:rgba(127,29,29,.30) !important; }
.club-leave-confirm-card { width:min(92vw,420px) !important; height:auto !important; }
.club-leave-confirm-body { padding:18px !important; }
.club-leave-confirm-body p { margin:0 0 16px !important; color:#d9e1eb !important; line-height:1.45 !important; }
.club-leave-confirm-actions { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.club-leave-confirm-actions button { min-height:42px !important; }

/* The owner identity comes from the backend `isLeader` flag. */
.club-msg-head > b.club-owner-name,
.club-chat-msg b.club-owner-name {
  color:#f2cc60 !important;
  font-weight:950 !important;
}
.club-msg-head .club-leader-marker {
  display:inline-flex !important;
  margin-left:5px !important;
  padding:1px 5px !important;
  border:1px solid rgba(242,204,96,.42) !important;
  border-radius:999px !important;
  color:#f2cc60 !important;
  background:rgba(242,204,96,.08) !important;
  font-size:8px !important;
  font-style:normal !important;
  letter-spacing:.05em !important;
  vertical-align:middle !important;
}

/* Do not let title/subtitle text slide underneath Manage/Leave/X controls. */
#panelClubs .club-chat-head {
  display:grid !important;
  grid-template-columns:auto auto minmax(0,1fr) auto auto auto !important;
  align-items:center !important;
  gap:8px !important;
}
#panelClubs .club-chat-title-wrap {
  min-width:0 !important;
  overflow:hidden !important;
}
#panelClubs .club-chat-title-wrap b,
#panelClubs .club-chat-title-wrap span {
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#panelClubs .club-manage-btn,
#panelClubs .club-leave-btn,
#panelClubs .club-chat-head > .modal-close {
  position:relative !important;
  inset:auto !important;
  flex:none !important;
  z-index:2 !important;
}

@media (max-width: 860px) {
  body > #panelClubs.club-mobile-portal .club-chat-head {
    display:grid !important;
    grid-template-columns:36px 38px minmax(0,1fr) auto !important;
    grid-template-areas:
      "back avatar title close"
      "back avatar actions actions" !important;
    column-gap:7px !important;
    row-gap:5px !important;
    min-height:72px !important;
    padding:8px 10px !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-back { grid-area:back !important; align-self:center !important; }
  body > #panelClubs.club-mobile-portal #clubChatAvatar { grid-area:avatar !important; align-self:center !important; }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap { grid-area:title !important; align-self:center !important; }
  body > #panelClubs.club-mobile-portal .club-chat-head > .modal-close { grid-area:close !important; display:grid !important; }
  body > #panelClubs.club-mobile-portal #clubManageBtn,
  body > #panelClubs.club-mobile-portal #clubLeaveBtn {
    grid-area:actions !important;
    justify-self:end !important;
    min-height:28px !important;
    padding:5px 10px !important;
    font-size:10px !important;
  }
  body > #panelClubs.club-mobile-portal #clubManageBtn:not(.hidden) + #clubLeaveBtn:not(.hidden) { margin-left:6px !important; }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap b { font-size:14px !important; }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap span { font-size:9.5px !important; }

  .club-leave-confirm-card {
    width:calc(100vw - 24px) !important;
    max-width:430px !important;
    max-height:calc(100dvh - 24px) !important;
  }
}

/* Club message identity must never sit under the Report action on narrow phones. */
#panelClubs .club-msg-head {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:6px !important;
}
#panelClubs .club-msg-head > b {
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#panelClubs .club-msg-head .club-report {
  flex:0 0 auto !important;
  white-space:nowrap !important;
  position:relative !important;
  z-index:2 !important;
}


/* ===== ChessMondo All Clubs density + reliable Leave Club UX ===== */
/* Keep the All Clubs cards/table dimensions, but make only their logos compact. */
#clubList.club-list-whatsapp {
  overflow-y:auto !important;
  overflow-x:hidden !important;
  max-height:460px !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  -webkit-overflow-scrolling:touch !important;
}
#clubList .club-chat-row {
  grid-template-columns:40px minmax(0,1fr) auto !important;
  min-height:68px !important;
}
#clubList .club-list-avatar {
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  border-radius:50% !important;
  justify-self:center !important;
  align-self:center !important;
}

/* Club chat is a very high-z-index mobile portal; the leave confirmation must sit above it. */
#clubLeaveConfirmModal.modal-overlay {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483600 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px !important;
  background:rgba(3,7,12,.78) !important;
  backdrop-filter:blur(6px) !important;
}
#clubLeaveConfirmModal.modal-overlay.hidden { display:none !important; }

@media (max-width:860px) {
  /* All Clubs stays a full-size section and becomes independently scrollable only when needed. */
  #clubList.club-list-whatsapp {
    max-height:min(50dvh,540px) !important;
    padding-right:5px !important;
  }
  #clubList .club-chat-row {
    grid-template-columns:34px minmax(0,1fr) auto !important;
    min-height:66px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }
  #clubList .club-list-avatar {
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }

  /* One clean header row: Back | logo | title | Leave/Manage | X. */
  body > #panelClubs.club-mobile-portal .club-chat-head {
    grid-template-columns:34px 40px minmax(0,1fr) auto 38px !important;
    grid-template-areas:"back avatar title actions close" !important;
    align-items:center !important;
    column-gap:7px !important;
    row-gap:0 !important;
    min-height:66px !important;
    padding:8px 10px !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-back { grid-area:back !important; align-self:center !important; }
  body > #panelClubs.club-mobile-portal #clubChatAvatar { grid-area:avatar !important; align-self:center !important; }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap { grid-area:title !important; align-self:center !important; }
  body > #panelClubs.club-mobile-portal .club-chat-head > .modal-close { grid-area:close !important; align-self:center !important; display:grid !important; }
  body > #panelClubs.club-mobile-portal #clubManageBtn,
  body > #panelClubs.club-mobile-portal #clubLeaveBtn {
    grid-area:actions !important;
    justify-self:end !important;
    align-self:center !important;
    width:auto !important;
    min-width:54px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:6px 9px !important;
    border-radius:10px !important;
    font-size:10px !important;
    line-height:1 !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap b {
    font-size:14px !important;
    line-height:1.1 !important;
  }
  body > #panelClubs.club-mobile-portal .club-chat-title-wrap span {
    font-size:9px !important;
    line-height:1.15 !important;
  }

  #clubLeaveConfirmModal .club-leave-confirm-card {
    width:min(92vw,410px) !important;
    max-height:calc(100dvh - 24px) !important;
  }
}


/* ===== ChessMondo club directory refresh polish ===== */
/* Keep the All Clubs card/table dimensions unchanged; only shrink the logo. */
#clubList .club-list-avatar {
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  border-radius:50% !important;
}

/* Leave confirmation uses ChessMondo styling instead of the browser-like white button. */
#clubLeaveConfirmModal .club-leave-confirm-actions .danger-btn {
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(255,86,86,.72) !important;
  background:linear-gradient(180deg,rgba(115,24,29,.96),rgba(74,16,21,.98)) !important;
  color:#ffb0b0 !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 18px rgba(255,77,77,.08),0 8px 22px rgba(0,0,0,.24) !important;
  font:850 13px/1 'Rajdhani',sans-serif !important;
  letter-spacing:.025em !important;
  cursor:pointer !important;
}
#clubLeaveConfirmModal .club-leave-confirm-actions .danger-btn:hover {
  background:linear-gradient(180deg,rgba(139,30,36,.98),rgba(86,18,24,.99)) !important;
  border-color:rgba(255,112,112,.88) !important;
  color:#fff !important;
}
#clubLeaveConfirmModal .club-leave-confirm-actions .ghost-btn {
  border-radius:12px !important;
  background:rgba(18,25,34,.94) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  color:#b9c3d1 !important;
}

/* The decorative empty-state piece is unnecessary after leaving a club. */
#clubsConversationPanel .club-empty-state .club-empty-illustration {
  display:none !important;
}

@media (max-width: 768px) {
  /* Mobile friend image strip: the label caused the action buttons to overlap it. */
  #friendsModal .friends-profile-strip .friends-profile-info {
    display:none !important;
  }
  #friendsModal .friends-profile-strip {
    grid-template-columns:72px minmax(0,1fr) !important;
    align-items:center !important;
  }
  #friendsModal .friend-image-actions {
    grid-column:2 !important;
    grid-row:1 !important;
    grid-template-columns:1fr !important;
    align-self:center !important;
    gap:6px !important;
  }
  #friendsModal .friend-image-actions .friend-image-edit-btn,
  #friendsModal .friend-image-actions .friend-image-delete-btn {
    width:100% !important;
    min-height:34px !important;
    padding:7px 8px !important;
    font-size:10px !important;
    line-height:1 !important;
    text-align:center !important;
  }

  /* Mobile All Clubs logo: smaller image, same card/table footprint. */
  #clubList .club-list-avatar {
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    max-width:22px !important;
  }
}

/* =====================================================================
   ChessMondo — mobile Clubs single-screen viewport + compact directory
   Frontend-only. The Clubs page itself never document-scrolls on phones;
   long All Clubs content scrolls only inside its own list viewport.
   ===================================================================== */

/* Terms / Privacy belong to the Main Menu only, not feature sub-pages. */
body.menu-subsection-open-body .legal-mini-links {
  display:none !important;
}

@media (max-width: 860px) {
  html.club-section-open-root,
  body.club-section-open-body {
    width:100% !important;
    height:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body.club-section-open-body #gameScreen.screen {
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }

  body.club-section-open-body #gameArea.game-area {
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
    padding:
      calc(68px + env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left)) !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body.club-section-open-body #menuCard.menu-dashboard-card {
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:100% !important;
    margin:0 !important;
    padding:5px !important;
    overflow:hidden !important;
    border-radius:16px !important;
  }

  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-rows:34px minmax(0,1fr) !important;
    gap:5px !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    justify-self:start !important;
    align-self:center !important;
    min-height:32px !important;
    height:32px !important;
    margin:0 !important;
    padding:0 10px !important;
    font-size:10.5px !important;
    border-radius:10px !important;
  }

  body.club-section-open-body #panelClubs.menu-section-panel {
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:14px !important;
  }

  body.club-section-open-body #panelClubs .clubs-app-shell,
  body.club-section-open-body #panelClubs .clubs-chat-list-panel {
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
  }

  body.club-section-open-body #panelClubs .clubs-chat-list-panel {
    display:flex !important;
    flex-direction:column !important;
  }

  /* Compact fixed controls leave the lower part of the phone to All Clubs. */
  body.club-section-open-body #panelClubs .clubs-app-head {
    flex:0 0 48px !important;
    min-height:48px !important;
    padding:5px 9px !important;
    gap:7px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head .feature-icon {
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
    border-radius:11px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head .feature-icon::before {
    width:22px !important;
    height:22px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head h3 {
    font-size:17px !important;
    line-height:1 !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head p {
    display:none !important;
  }
  body.club-section-open-body #panelClubs .clubs-head-actions {
    gap:5px !important;
  }
  body.club-section-open-body #panelClubs .circle-tool-btn {
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
  }

  body.club-section-open-body #panelClubs .clubs-search-row {
    flex:0 0 34px !important;
    min-height:34px !important;
    height:34px !important;
    margin:5px 8px !important;
    padding:0 10px !important;
  }
  body.club-section-open-body #panelClubs .clubs-search-row input {
    font-size:12px !important;
  }

  body.club-section-open-body #panelClubs .clubs-filter-pills {
    flex:0 0 30px !important;
    min-height:30px !important;
    padding:0 8px 4px !important;
    gap:5px !important;
  }
  body.club-section-open-body #panelClubs .clubs-filter-pills button {
    min-height:26px !important;
    padding:4px 9px !important;
    font-size:10.5px !important;
  }

  body.club-section-open-body #panelClubs .global-section-title.compact {
    flex:0 0 19px !important;
    min-height:19px !important;
    margin:2px 0 1px !important;
    padding:0 9px !important;
    display:flex !important;
    align-items:center !important;
    font-size:9.5px !important;
    line-height:1 !important;
  }

  /* Top five can grow in data count, so keep it bounded inside the one-screen shell. */
  body.club-section-open-body #panelClubs #clubLeaderboard.club-list-mini {
    flex:0 0 auto !important;
    max-height:96px !important;
    min-height:0 !important;
    padding:0 5px 2px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
  }
  body.club-section-open-body #panelClubs .club-lb-chat-row {
    grid-template-columns:21px 28px minmax(0,1fr) auto !important;
    min-height:42px !important;
    padding:4px 6px !important;
    gap:5px !important;
  }
  body.club-section-open-body #panelClubs .club-lb-chat-row .club-avatar {
    width:27px !important;
    min-width:27px !important;
    height:27px !important;
  }
  body.club-section-open-body #panelClubs .club-lb-main b {
    font-size:11.5px !important;
  }
  body.club-section-open-body #panelClubs .club-lb-main em {
    font-size:8.5px !important;
  }
  body.club-section-open-body #panelClubs .club-rank {
    font-size:11px !important;
  }

  body.club-section-open-body #panelClubs #clubBattleList.club-battle-list {
    flex:0 0 auto !important;
    min-height:0 !important;
    max-height:92px !important;
    margin:0 !important;
    padding:0 5px 2px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
  }
  body.club-section-open-body #panelClubs #clubBattleList > .global-empty,
  body.club-section-open-body #panelClubs #clubBattleList > .global-loading {
    min-height:48px !important;
    padding:9px !important;
    margin:0 !important;
    font-size:11px !important;
  }

  /* All Clubs owns the remaining vertical space and is the main scroll box. */
  body.club-section-open-body #panelClubs #clubList.club-list-whatsapp {
    flex:1 1 auto !important;
    min-height:105px !important;
    max-height:none !important;
    height:auto !important;
    margin:0 !important;
    padding:0 5px 4px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-gutter:stable !important;
  }

  /* Compact club cards: smaller section footprint, not only a smaller image. */
  body.club-section-open-body #panelClubs #clubList .club-chat-row {
    grid-template-columns:28px minmax(0,1fr) 70px !important;
    gap:6px !important;
    width:100% !important;
    min-height:64px !important;
    padding:5px 6px !important;
    margin:0 !important;
    border-radius:9px !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-list-avatar,
  body.club-section-open-body #panelClubs #clubList .club-avatar {
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    max-width:24px !important;
    border-radius:50% !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-top {
    gap:4px !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-top b {
    font-size:11.5px !important;
    line-height:1.05 !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-owner-tag {
    padding:1px 4px !important;
    font-size:7px !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-preview {
    margin-top:1px !important;
    font-size:8.5px !important;
    line-height:1.05 !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-meta {
    margin-top:1px !important;
    font-size:7.8px !important;
    line-height:1.05 !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-side {
    gap:4px !important;
    min-width:70px !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-side small {
    font-size:7.5px !important;
    line-height:1 !important;
  }

  /* Bigger touch targets for Open / Join / Battle while cards remain compact. */
  body.club-section-open-body #panelClubs #clubList .club-row-action,
  body.club-section-open-body #panelClubs .club-lb-action {
    min-width:66px !important;
    min-height:34px !important;
    padding:6px 9px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:11px !important;
    line-height:1 !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-action.battle {
    margin-top:0 !important;
  }
}

/* Extra-tight phones still stay a single screen; only inner data panes scroll. */
@media (max-width: 860px) and (max-height: 760px) {
  body.club-section-open-body #gameArea.game-area {
    padding-top:calc(65px + env(safe-area-inset-top)) !important;
    padding-bottom:max(3px, env(safe-area-inset-bottom)) !important;
  }
  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    grid-template-rows:30px minmax(0,1fr) !important;
    gap:3px !important;
  }
  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    height:29px !important;
    min-height:29px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head {
    flex-basis:43px !important;
    min-height:43px !important;
  }
  body.club-section-open-body #panelClubs .clubs-app-head .feature-icon {
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
  body.club-section-open-body #panelClubs .clubs-search-row {
    flex-basis:30px !important;
    height:30px !important;
    min-height:30px !important;
    margin:3px 7px !important;
  }
  body.club-section-open-body #panelClubs .clubs-filter-pills {
    flex-basis:27px !important;
    min-height:27px !important;
    padding-bottom:2px !important;
  }
  body.club-section-open-body #panelClubs .global-section-title.compact {
    flex-basis:17px !important;
    min-height:17px !important;
    font-size:8.5px !important;
  }
  body.club-section-open-body #panelClubs #clubLeaderboard.club-list-mini {
    max-height:82px !important;
  }
  body.club-section-open-body #panelClubs #clubBattleList.club-battle-list {
    max-height:72px !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-chat-row {
    min-height:60px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
  }
  body.club-section-open-body #panelClubs #clubList .club-row-action,
  body.club-section-open-body #panelClubs .club-lb-action {
    min-height:32px !important;
  }
}

/* Chess Clubs hub — isolated feature redesign. All new rules target this panel. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
  position:fixed !important; inset:auto !important;
  top:var(--clubs-hub-top,76px) !important; left:var(--clubs-hub-left,8px) !important;
  width:var(--clubs-hub-width,calc(100vw - 16px)) !important;
  height:var(--clubs-hub-height,calc(100dvh - 84px)) !important;
  max-width:none !important; max-height:none !important; min-height:0 !important;
  display:flex !important; flex-direction:column !important; padding:0 !important; margin:0 !important;
  transform:none !important; animation:none !important; overflow:hidden !important; z-index:900 !important;
  border:1px solid #293646 !important; border-radius:20px !important;
  background:#0c141e !important; box-shadow:0 18px 64px #0006 !important;
  color:#e9eff7; isolation:isolate;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].hidden { display:none !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] *, body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] *::before, body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] *::after { box-sizing:border-box; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .hidden { display:none !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-toolbar { display:flex; justify-content:space-between; align-items:center; flex:0 0 auto; min-height:54px; padding:5px 16px; border-bottom:1px solid #263342; gap:12px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-toolbar > span { color:#94a6bc; font-size:13px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-back { min-height:44px; padding:0 14px; border:1px solid #344456; background:#172331; color:#e8eff7; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-shell { display:grid !important; grid-template-columns:minmax(0,1fr) !important; flex:1 1 0 !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow:hidden !important; background:transparent !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-app-shell { grid-template-columns:minmax(380px,.95fr) minmax(360px,1.05fr) !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-chat-list-panel { display:flex !important; flex-direction:column !important; position:relative !important; width:100% !important; height:100% !important; min-height:0 !important; overflow:hidden !important; background:#0e1722 !important; border-right:1px solid #263342; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head { display:flex !important; flex:0 0 auto !important; min-height:76px !important; padding:14px 20px !important; gap:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3 { font-size:22px !important; letter-spacing:-.025em !important; text-transform:none !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head .feature-icon { width:44px !important; height:44px !important; min-width:44px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn { width:44px !important; height:44px !important; min-width:44px !important; font-size:24px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row { display:flex !important; flex:0 0 auto !important; height:46px !important; min-height:46px !important; margin:0 20px 12px !important; border-radius:12px !important; padding:0 12px !important; background:#0a111b !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input { width:100% !important; min-width:0 !important; height:44px !important; margin:0 !important; padding:0 10px !important; font-size:16px !important; border:0 !important; background:transparent !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs { display:flex; flex:0 0 auto; gap:6px; padding:0 20px 12px; overflow-x:auto; scrollbar-width:thin; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button { flex:1 0 auto; min-height:44px; padding:8px 12px; border:1px solid #304158; border-radius:11px; background:#142130; color:#aabacf; font-size:14px; font-weight:650; cursor:pointer; white-space:nowrap; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button[aria-selected="true"] { color:#fff; background:#285fba; border-color:#6ca7ff; box-shadow:inset 0 1px 0 #ffffff21; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-sections { flex:1 1 0; min-height:0; overflow:hidden; border-top:1px solid #263342; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-section { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:auto; scrollbar-color:#52657d #0c141e; padding:20px; -webkit-overflow-scrolling:touch; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro { margin-bottom:20px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-eyebrow { color:#90b8fc; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro h3 { font-size:24px; color:#eef3fc; margin:6px 0; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro p { color:#a4b3c7; font-size:14px; line-height:1.55; margin:0; max-width:680px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-cards { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)) !important; gap:14px !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; padding:0 !important; margin:0 !important; align-content:start !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card { min-width:0; padding:18px; border:1px solid #2c3c51; border-radius:16px; background:linear-gradient(140deg,#182738,#111c29); display:flex; flex-direction:column; gap:12px; align-self:start; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card.is-owner { border-color:#8f7945; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card-head { display:flex; gap:12px; align-items:center; min-width:0; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar { width:54px; height:54px; flex:0 0 54px; border-radius:14px; overflow:hidden; display:grid; place-items:center; background:#284668; color:#eef4ff; font-size:24px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar img { width:100%; height:100%; object-fit:cover; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-identity { min-width:0; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-identity h4 { font-size:17px; margin:0 0 4px; line-height:1.35; overflow-wrap:anywhere; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-identity > span { color:#adc0d8; font-size:12px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-description { color:#a9b9ce; font-size:14px; line-height:1.5; margin:0; overflow-wrap:anywhere; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-stats { display:flex; flex-wrap:wrap; gap:10px 18px; color:#a9b9ce; font-size:13px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-stats b { color:#e7effb; font-size:16px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-owner { font-size:12px; color:#94a8c2; overflow-wrap:anywhere; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action { min-height:44px; padding:10px 16px; border-radius:11px; border:1px solid #5b94eb; background:#2b69c9; color:#fff; font-size:14px; font-weight:650; cursor:pointer; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-actions .clubs-hub-action { flex:1; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.secondary { background:#1d3047; border-color:#425b79; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] button:disabled { opacity:.5; cursor:wait; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] button:focus-visible, body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] input:focus-visible, body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] select:focus-visible { outline:2px solid #9ac6ff; outline-offset:2px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-rank { color:#ebc975; font-size:20px; font-weight:750; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-empty { grid-column:1/-1; display:grid; justify-items:start; gap:12px; padding:28px 20px; color:#acbdd1; border:1px dashed #42516a; border-radius:14px; line-height:1.6; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-note { padding:16px; background:#19283b; border:1px solid #354a63; border-radius:12px; color:#adbed5; font-size:14px; line-height:1.5; margin:0 0 18px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:20px; padding:16px; background:#19283b; border-radius:12px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge label { display:grid; gap:6px; flex:1 1 150px; min-width:0; color:#b2c4dc; font-size:13px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge select { width:100%; min-width:0; min-height:44px; font-size:16px; padding:8px; background:#0c1828; color:#edf3fa; border:1px solid #47607e; border-radius:8px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-card { padding:18px !important; border-radius:16px !important; margin:0 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-side b { font-size:15px !important; overflow-wrap:anywhere; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-side strong { font-size:24px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-meta-row { display:flex !important; flex-wrap:wrap !important; gap:8px !important; font-size:13px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-actions button { min-height:44px !important; padding:10px 18px !important; font-size:14px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-conversation-panel { display:none !important; position:relative !important; inset:auto !important; min-width:0 !important; width:100% !important; height:100% !important; min-height:0 !important; overflow:hidden !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-conversation-panel { display:flex !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-box:not(.hidden) { display:flex !important; position:relative !important; inset:auto !important; width:100% !important; height:100% !important; min-height:0 !important; flex-direction:column !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head { display:flex !important; flex:0 0 auto !important; flex-wrap:wrap !important; padding:12px !important; gap:8px !important; min-height:72px !important; height:auto !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .club-chat-title-wrap { flex:1 1 80px; min-width:0; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .club-chat-title-wrap b { font-size:16px !important; white-space:normal !important; overflow-wrap:anywhere; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head button { display:grid; place-items:center; min-height:44px !important; min-width:44px !important; position:static !important; font-size:14px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .club-chat-back { display:grid !important; font-size:28px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .modal-close { display:none !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubChatAvatar { width:44px !important; height:44px !important; flex:0 0 44px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-messages { flex:1 1 0 !important; min-height:0 !important; height:auto !important; overflow-y:auto !important; overflow-x:hidden !important; padding:16px !important; overscroll-behavior:contain; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row { display:flex !important; position:relative !important; inset:auto !important; flex:0 0 auto !important; padding:10px !important; gap:8px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row input { width:0 !important; flex:1 1 0 !important; min-width:0 !important; font-size:16px !important; height:46px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row button { width:44px !important; height:44px !important; flex:0 0 44px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-create-card { position:absolute !important; inset:0 !important; z-index:20 !important; width:100% !important; max-height:100% !important; margin:0 !important; padding:20px !important; overflow-y:auto !important; background:#142131 !important; border-radius:0 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-create-title-row { position:sticky; top:-20px; background:#142131; z-index:1; padding:12px 0; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-create-title-row button { min-height:44px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor { position:absolute !important; inset:0 !important; z-index:25 !important; width:100% !important; height:100% !important; max-height:100% !important; overflow:auto !important; margin:0 !important; background:#142131 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head { position:sticky !important; top:0 !important; z-index:1; background:#142131 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head button { position:static !important; min-width:44px !important; min-height:44px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions { display:flex !important; flex-wrap:wrap !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions button { min-height:44px !important; }
@media (hover:hover) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action:hover { filter:brightness(1.15); }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card:hover { border-color:#6189b4; }
}
@media (max-width:1000px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-app-shell { grid-template-columns:minmax(0,1fr) !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-chat-list-panel { display:none !important; }
}
@media (max-width:600px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] { border-radius:14px !important; padding-bottom:env(safe-area-inset-bottom) !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-toolbar { padding:4px 10px; min-height:48px; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-toolbar > span { display:none; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head { padding:10px 12px !important; min-height:64px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3 { font-size:19px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row { margin:0 12px 10px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; padding:0 12px 10px; overflow:visible; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button { grid-column:span 2; padding:8px 4px; font-size:13px; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button:nth-child(n+4) { grid-column:span 3; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-section { padding:14px 12px; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro { margin-bottom:14px; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro h3 { font-size:21px; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card { padding:14px; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-edit-preview { display:flex !important; flex-direction:column !important; }
}
@media (max-height:540px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head { min-height:52px !important; padding:4px 12px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs { display:flex; overflow-x:auto; padding-bottom:6px; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button { flex:1 0 auto; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro p { display:none; }
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-status { flex:0 0 auto; padding:10px 20px; background:#462e20; color:#ffdab4; font-size:13px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields label { font-size:13px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields input,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields textarea { font-size:16px !important; min-height:44px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap span { font-size:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-msg span { font-size:15px !important; line-height:1.5 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-msg small { font-size:11px !important; }
/* These two dialogs belong exclusively to Chess Clubs. */
#clanBattleSetupModal.modal-overlay { z-index:2147483600 !important; }
#clanBattleSetupModal .clan-battle-setup-card { max-height:calc(100dvh - 24px) !important; overflow-y:auto !important; }
#clanBattleSetupModal .modal-header { position:sticky !important; top:0 !important; background:#111c29; flex-shrink:0 !important; z-index:1; }
#clanBattleSetupModal button, #clanBattleSetupModal select, #clanBattleSetupModal input { min-height:44px !important; }

/* Short landscape windows and the software keyboard must not collapse the list to zero. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub][data-clubs-tight] .clubs-chat-list-panel { overflow-y:auto !important; overscroll-behavior:contain; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub][data-clubs-tight] .clubs-hub-sections { flex:0 0 auto; overflow:visible; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub][data-clubs-tight] .clubs-hub-section { height:auto; min-height:80px; overflow:visible; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub][data-clubs-tight] .clubs-hub-tabs { display:flex; overflow-x:auto; }

/* Clubs compact page update: use the existing menu page, not a floating portal. */
body.club-section-open-body { overflow:hidden !important; }
body.club-section-open-body #gameArea.game-area {
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  width:100% !important; height:var(--clubs-page-height,100dvh) !important;
  min-height:0 !important; max-height:none !important; box-sizing:border-box !important;
  margin:0 !important; padding:var(--clubs-page-top,76px) 20px 12px !important; overflow:hidden !important;
}
body.club-section-open-body #menuCard.menu-dashboard-card {
  display:flex !important; flex-direction:column !important; flex:1 1 0 !important;
  width:100% !important; max-width:1440px !important; min-height:0 !important; height:100% !important;
  padding:0 !important; margin:0 auto !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; overflow:hidden !important;
}
body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
  display:grid !important; grid-template-rows:36px minmax(0,1fr) !important; gap:8px !important;
  width:100% !important; height:100% !important; min-height:0 !important; overflow:hidden !important;
}
body.club-section-open-body #menuSectionViews > .menu-back-btn {
  justify-self:start !important; align-self:center !important; min-height:34px !important;
  height:34px !important; padding:0 10px !important; margin:0 !important;
  border-radius:7px !important; font-size:12px !important; background:transparent !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
  position:relative !important; inset:auto !important; width:100% !important; height:100% !important;
  z-index:auto !important; isolation:auto !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-shell {
  border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-chat-list-panel {
  background:transparent !important; border:0 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark {
  width:30px; height:30px; flex:0 0 30px; color:#b29bf4; display:grid; place-items:center;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark svg { display:block; width:26px; height:26px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head {
  min-height:52px !important; padding:4px 0 10px !important; border:0 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3 { font-size:20px !important; font-weight:650 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-head-actions { gap:8px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn {
  width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important;
  border-radius:8px !important; font-size:21px !important; box-shadow:none !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn.create { background:#24466d !important; border:1px solid #45648b !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row {
  height:38px !important; min-height:38px !important; margin:0 0 8px !important; padding:0 8px !important; border-radius:8px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input { height:36px !important; min-height:0 !important; font-size:14px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs {
  display:flex !important; padding:0 !important; gap:14px !important; overflow-x:auto !important;
  border-bottom:1px solid #2c3948; scrollbar-width:thin;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button {
  flex:0 0 auto !important; min-height:38px !important; padding:7px 4px !important;
  font-size:13px !important; font-weight:600 !important; border:0 !important;
  border-bottom:2px solid transparent !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; color:#9caabd !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button[aria-selected="true"] { color:#d9e8ff !important; border-bottom-color:#75a9ed !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-sections { border:0 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-section { padding:14px 2px 12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro { margin-bottom:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-eyebrow { display:none !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro h3 { font-size:17px !important; margin:0 0 4px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro p { font-size:12px !important; line-height:1.4 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-cards { grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)) !important; gap:10px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card { padding:12px !important; gap:8px !important; border-radius:10px !important; background:#111c28 !important; border-color:#2d3949 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card.is-owner { border-color:#55503d !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-card-head { gap:10px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar { width:38px !important; height:38px !important; flex-basis:38px !important; font-size:19px !important; border-radius:9px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-identity h4 { font-size:15px !important; margin-bottom:2px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-identity > span { font-size:11px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-description { font-size:12px !important; line-height:1.4 !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-stats { font-size:12px !important; gap:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-stats b { font-size:13px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-owner { font-size:11px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-actions { padding-top:2px !important; gap:6px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-actions .clubs-hub-action { flex:0 1 auto !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action {
  min-height:34px !important; padding:6px 12px !important; font-size:12px !important;
  border-radius:7px !important; background:#23476f !important; border-color:#426c9d !important; font-weight:600 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.secondary { background:#182838 !important; border-color:#35485e !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-rank { font-size:17px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-empty { padding:16px !important; font-size:13px !important; border-radius:9px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-note { padding:12px !important; font-size:12px !important; margin-bottom:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge { padding:12px !important; gap:12px !important; margin-bottom:12px !important; border-radius:10px !important; background:#132130 !important; align-items:start !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge > label { flex:1 1 180px !important; font-size:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field { display:grid; flex:2 1 240px; gap:6px; min-width:0; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field label { font-size:12px; color:#b2c4dc; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field small { font-size:11px; color:#a5b6cb; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field small:empty { display:none; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge input,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge select {
  width:100%; min-width:0; height:36px !important; min-height:36px !important; margin:0 !important;
  padding:6px 9px !important; font-size:14px !important; border:1px solid #3d5068; border-radius:7px; background:#0b1623; color:#e4edf8;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge > button { margin-top:20px; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-card { padding:12px !important; border-radius:10px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-side b { font-size:13px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-side strong { font-size:20px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-meta-row { font-size:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-battle-actions button { min-height:34px !important; font-size:12px !important; padding:6px 10px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head { min-height:56px !important; padding:8px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head button { min-height:36px !important; min-width:36px !important; font-size:12px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .club-chat-title-wrap b { font-size:14px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubChatAvatar { width:36px !important; height:36px !important; flex-basis:36px !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-msg span { font-size:14px !important; }
@media (max-width:600px) {
  body.club-section-open-body #gameArea.game-area { padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)) !important; padding-bottom:max(6px,env(safe-area-inset-bottom)) !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] { border-radius:0 !important; padding-bottom:0 !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3 { font-size:18px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs { gap:8px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button { font-size:12px !important; min-height:36px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge input,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge select { font-size:16px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge { flex-direction:column !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge > label,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field { flex:0 0 auto !important; width:100%; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge > button { margin-top:0; }
}

/* =====================================================================
   Chess Clubs Professional UI alignment — isolated to #panelClubs only
   Matches the visual scale of Arena / Global while keeping Clubs internal
   scrolling, compact directory rows, Telegram-style Joined list and a
   larger desktop conversation workspace.
   ===================================================================== */

/* Main Menu control uses the same physical scale as the other feature pages. */
body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
  grid-template-rows: 46px minmax(0, 1fr) !important;
  gap: 12px !important;
}
body.club-section-open-body #menuSectionViews > .menu-back-btn {
  align-self: stretch !important;
  justify-self: start !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border: 1px solid #30363d !important;
  border-radius: 14px !important;
  background: #161b22 !important;
  color: #c9d1d9 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
body.club-section-open-body #menuSectionViews > .menu-back-btn:hover {
  border-color: #58a6ff !important;
  color: #fff !important;
  background: #1b2430 !important;
}

/* Desktop Clubs now reads like the other centered feature panels. */
@media (min-width: 861px) {
  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    border: 1px solid #263545 !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #0e1722 0%, #0a1119 100%) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
  }
  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open {
    width: min(1380px, 100%) !important;
    max-width: 1380px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-shell {
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-app-shell {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-chat-list-panel {
    background: rgba(12,20,30,.94) !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-chat-list-panel {
    border-right: 1px solid #263545 !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-conversation-panel {
    background: linear-gradient(180deg, rgba(5,21,27,.96), rgba(8,18,27,.98)) !important;
  }
}

/* Header scale mirrors Global/Arena instead of the previous mini Clubs header. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head {
  min-height: 72px !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid rgba(48,61,78,.72) !important;
  background: rgba(13,22,33,.72) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border: 1px solid rgba(185,156,255,.25) !important;
  border-radius: 14px !important;
  background: rgba(185,156,255,.075) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark svg {
  width: 27px !important;
  height: 27px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3 {
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-head-actions {
  gap: 8px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  font-size: 23px !important;
}

/* Tabs are real controls, not text links. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-bottom: 1px solid #283545 !important;
  background: rgba(8,14,22,.55) !important;
  scrollbar-width: thin !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button {
  flex: 1 0 auto !important;
  min-height: 42px !important;
  padding: 9px 14px !important;
  border: 1px solid #344559 !important;
  border-radius: 11px !important;
  background: #151f2b !important;
  color: #aebbc9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button:hover {
  color: #eef5ff !important;
  border-color: #4d6785 !important;
  background: #1b2939 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button[aria-selected="true"] {
  color: #fff !important;
  border-color: #5c9ef5 !important;
  background: linear-gradient(180deg, #2b72cc, #245ead) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(73,139,228,.08) !important;
}

/* Each tab owns its scroll. The search bar is moved into the active tab by JS. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-sections {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-section {
  height: 100% !important;
  min-height: 0 !important;
  padding: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-color: #4d6075 #0c141e !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro {
  margin: 0 0 12px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro h3 {
  margin: 0 0 4px !important;
  color: #f0f6fc !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro p {
  margin: 0 !important;
  color: #8f9fb2 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row {
  display: flex !important;
  position: relative !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 0 14px !important;
  padding: 0 11px !important;
  border: 1px solid #303d4d !important;
  border-radius: 11px !important;
  background: #0b121b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row:focus-within {
  border-color: #4f8fdf !important;
  box-shadow: 0 0 0 2px rgba(79,143,223,.10) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input {
  height: 42px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #eaf2fc !important;
  font-size: 14px !important;
}

/* Discover / My Clubs / Top switch from oversized cards to professional rows. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-cards,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 76px !important;
  padding: 10px 12px !important;
  border: 1px solid #303b49 !important;
  border-radius: 13px !important;
  background: rgba(13,18,25,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row:hover {
  border-color: #4d6987 !important;
  background: rgba(22,29,38,.95) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row.is-owner {
  border-color: rgba(211,171,67,.42) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex-basis: 46px !important;
  border: 1px solid rgba(88,166,255,.34) !important;
  border-radius: 12px !important;
  background: #122235 !important;
  color: #f0f6fc !important;
  font-size: 21px !important;
  overflow: hidden !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main {
  min-width: 0 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-title h4 {
  min-width: 0 !important;
  margin: 0 !important;
  color: #f0f6fc !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p {
  display: block !important;
  max-width: 100% !important;
  margin: 3px 0 4px !important;
  color: #8f9aa9 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p.muted {
  color: #717d8c !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-meta,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px 9px !important;
  color: #8997a8 !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta > span + span::before {
  content: '•' !important;
  margin-right: 9px !important;
  color: #596777 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-owner-chip {
  flex: 0 0 auto !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(222,180,61,.45) !important;
  border-radius: 999px !important;
  background: rgba(210,153,34,.10) !important;
  color: #f2cc60 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-action-cell,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-actions-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action {
  min-height: 40px !important;
  padding: 8px 13px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.join-action {
  border-color: #287d4b !important;
  background: linear-gradient(180deg,#25874f,#1e6f42) !important;
  color: #f1fff7 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.chat-action {
  border-color: #4c94eb !important;
  background: linear-gradient(180deg,#2f81e8,#276dc7) !important;
  color: #fff !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.mine-action,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.manage-action {
  border-color: #806b2b !important;
  background: #2b281a !important;
  color: #f2cc60 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.joined-action {
  border-color: #7654d4 !important;
  background: #332268 !important;
  color: #d9caff !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.compact {
  min-height: 32px !important;
  padding: 6px 9px !important;
  font-size: 10.5px !important;
}

/* Joined is intentionally Telegram-like: logo + name + members/rating only. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-row {
  grid-template-columns: 48px minmax(0,1fr) 20px !important;
  min-height: 68px !important;
  padding: 9px 12px !important;
  cursor: pointer !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-row:hover,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-row:focus-visible {
  background: #172536 !important;
  border-color: #4d7cae !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-meta i {
  color: #657385 !important;
  font-style: normal !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-chevron {
  color: #708196 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Top clubs mirrors Global Players: rank, identity and large rating value. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-row {
  grid-template-columns: 44px 48px minmax(0,1fr) 92px auto !important;
  min-height: 78px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-row.rank-1 {
  border-color: rgba(210,153,34,.62) !important;
  background: linear-gradient(135deg,rgba(210,153,34,.11),rgba(13,18,25,.93)) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-row.rank-2 { border-color: rgba(201,209,217,.42) !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-row.rank-3 { border-color: rgba(188,140,95,.48) !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-rank {
  color: #8b949e !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 14px !important;
  text-align: center !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score {
  min-width: 80px !important;
  text-align: right !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score strong {
  display: block !important;
  color: #58a6ff !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score small {
  display: block !important;
  margin-top: 4px !important;
  color: #707d8d !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-load-more-wrap {
  display: flex !important;
  justify-content: center !important;
  padding: 12px 0 2px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.load-more-action {
  min-width: 220px !important;
  border-color: #3a526d !important;
  background: #172332 !important;
  color: #bdd2eb !important;
}

/* Clan Battles: preserve the VS card while bringing the surrounding controls into ChessMondo styling. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubSection-battles .clubs-hub-intro {
  padding: 12px 14px !important;
  border: 1px solid rgba(88,166,255,.20) !important;
  border-left: 3px solid #58a6ff !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg,rgba(47,129,247,.08),rgba(13,18,25,.35)) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge {
  display: grid !important;
  grid-template-columns: minmax(180px,.85fr) minmax(300px,1.8fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 14px !important;
  border: 1px solid #2f435a !important;
  border-radius: 13px !important;
  background: linear-gradient(140deg,#132236,#101923) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge input,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge select {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 9px !important;
  background: #0a121c !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge > button {
  min-height: 42px !important;
  margin: 0 !important;
  padding-inline: 16px !important;
  border-color: #4d83c5 !important;
  background: linear-gradient(180deg,#326db0,#285c96) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)) !important;
  gap: 10px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList .club-battle-card {
  border: 1px solid #31547d !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg,#102238,#0c1725) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList .club-battle-card.status-active {
  border-color: rgba(71,156,255,.72) !important;
  box-shadow: 0 0 0 1px rgba(61,132,219,.08), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* Conversation gets the majority of web width and keeps its own scroll. */
@media (min-width: 1001px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-conversation-panel {
    min-width: 0 !important;
    width: 100% !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head {
    min-height: 64px !important;
    padding: 10px 12px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-messages {
    padding: 18px 20px !important;
  }
}

/* Mobile: one-screen Clubs page with internal scrolling and touch-safe controls. */
@media (max-width: 860px) {
  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    grid-template-rows: 44px minmax(0,1fr) !important;
    gap: 8px !important;
  }
  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head {
    min-height: 58px !important;
    padding: 7px 10px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark svg {
    width: 23px !important;
    height: 23px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3 {
    font-size: 19px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs {
    gap: 7px !important;
    padding: 8px 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 8px 13px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    scroll-snap-align: start !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-section {
    padding: 11px 10px 12px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro {
    margin-bottom: 9px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro h3 {
    font-size: 17px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro p {
    font-size: 11px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row {
    height: 42px !important;
    min-height: 42px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input {
    height: 40px !important;
    font-size: 16px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row {
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    gap: 9px !important;
    min-height: 70px !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
    border-radius: 10px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-title h4 {
    font-size: 14px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p {
    font-size: 10.5px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-meta,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-meta {
    font-size: 9.8px !important;
    gap: 2px 7px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta > span + span::before {
    margin-right: 7px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action {
    min-height: 40px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-actions-inline {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-actions-inline .clubs-hub-action {
    min-width: 78px !important;
    min-height: 34px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-row {
    grid-template-columns: 42px minmax(0,1fr) 16px !important;
    min-height: 62px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-row {
    grid-template-columns: 30px 40px minmax(0,1fr) 62px !important;
    min-height: 72px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-action {
    grid-column: 3 / -1 !important;
    justify-self: end !important;
    margin-top: -3px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score {
    min-width: 58px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score strong {
    font-size: 17px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score small {
    font-size: 6.5px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
    padding: 11px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge > label,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p {
    display: none !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row {
    min-height: 64px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-owner-chip {
    display: none !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action {
    padding-inline: 9px !important;
  }
}


/* =====================================================================
   Chess Clubs shell + chat viewport final polish
   - same outer feature-page frame as the other sections
   - centered Clubs panel on desktop
   - one-screen mobile Clubs/chat viewport
   - no horizontal-scroll navigation or chat controls
   ===================================================================== */
body.club-section-open-body #gameArea.game-area {
  box-sizing:border-box !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  width:100% !important;
  height:var(--clubs-page-height,100dvh) !important;
  min-height:0 !important;
  max-height:var(--clubs-page-height,100dvh) !important;
  margin:0 !important;
  padding:var(--clubs-page-top,76px) clamp(12px,2vw,26px) 16px !important;
  overflow:hidden !important;
}
body.club-section-open-body #menuCard.menu-dashboard-card {
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  width:min(1320px,100%) !important;
  max-width:1320px !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:20px !important;
  overflow:hidden !important;
  border:1px solid var(--cm-line) !important;
  border-radius:26px !important;
  background:linear-gradient(180deg,rgba(14,20,29,.92),rgba(9,14,21,.96)) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.28) !important;
}
body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
  display:grid !important;
  grid-template-rows:40px minmax(0,1fr) !important;
  gap:14px !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}
body.club-section-open-body #menuSectionViews > .menu-back-btn {
  justify-self:start !important;
  align-self:start !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 13px !important;
  margin:0 !important;
  border:1px solid var(--cm-line) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.025) !important;
  color:#9ba9b9 !important;
  font-size:12px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
  justify-self:center !important;
  align-self:stretch !important;
  width:min(1120px,100%) !important;
  max-width:1120px !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  overflow:hidden !important;
  border:1px solid #263545 !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,#0e1722 0%,#0a1119 100%) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.22) !important;
}
body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open {
  width:min(1240px,100%) !important;
  max-width:1240px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-shell,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-chat-list-panel,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-conversation-panel,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-box {
  min-height:0 !important;
  overflow:hidden !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head {
  display:grid !important;
  grid-template-columns:40px 40px minmax(0,1fr) auto !important;
  align-items:center !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  min-height:62px !important;
  height:auto !important;
  padding:9px 10px !important;
  overflow:hidden !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .club-chat-back {
  grid-column:1 !important;
  display:grid !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
  place-items:center !important;
  font-size:25px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubChatAvatar {
  grid-column:2 !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  flex-basis:38px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap {
  grid-column:3 !important;
  min-width:0 !important;
  overflow:hidden !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap b,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap span {
  display:block !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head #clubManageBtn,
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head #clubLeaveBtn {
  grid-column:4 !important;
  width:auto !important;
  min-width:64px !important;
  max-width:104px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 12px !important;
  margin:0 !important;
  white-space:nowrap !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .modal-close { display:none !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-messages {
  flex:1 1 0 !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row {
  flex:0 0 auto !important;
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}
@media (max-width:860px) {
  body.club-section-open-body #gameArea.game-area {
    padding:var(--clubs-page-top,64px) 8px max(8px,env(safe-area-inset-bottom)) !important;
  }
  body.club-section-open-body #menuCard.menu-dashboard-card {
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    padding:9px !important;
    border-radius:18px !important;
  }
  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    grid-template-rows:42px minmax(0,1fr) !important;
    gap:8px !important;
  }
  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    height:40px !important;
    min-height:40px !important;
    padding:0 12px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }
  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub],
  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open {
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    border-radius:15px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs {
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:8px 9px !important;
    overflow:visible !important;
    scrollbar-width:none !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs::-webkit-scrollbar { display:none !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button {
    grid-column:span 2 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 4px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button:nth-child(4),
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button:nth-child(5) { grid-column:span 3 !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head {
    min-height:54px !important;
    padding:6px 9px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head {
    grid-template-columns:38px 36px minmax(0,1fr) auto !important;
    gap:6px !important;
    min-height:56px !important;
    padding:7px 8px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head .club-chat-back {
    width:38px !important; min-width:38px !important; height:38px !important; min-height:38px !important; font-size:23px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubChatAvatar {
    width:34px !important; min-width:34px !important; height:34px !important; flex-basis:34px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap b { font-size:13px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap span { font-size:10px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head #clubManageBtn,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head #clubLeaveBtn {
    min-width:56px !important; max-width:80px !important; height:36px !important; min-height:36px !important; padding:0 9px !important; font-size:10.5px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row { padding:7px !important; gap:6px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row input { height:40px !important; min-height:40px !important; font-size:16px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row button { width:40px !important; min-width:40px !important; height:40px !important; }
}
@media (max-width:420px) {
  body.club-section-open-body #menuCard.menu-dashboard-card { padding:7px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs { gap:5px !important; padding-inline:7px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button { font-size:10.5px !important; padding-inline:2px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head { grid-template-columns:36px 32px minmax(0,1fr) auto !important; gap:5px !important; padding-inline:6px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubChatAvatar { width:32px !important; min-width:32px !important; height:32px !important; flex-basis:32px !important; }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head #clubManageBtn,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head #clubLeaveBtn { min-width:52px !important; padding-inline:7px !important; }
}

/* ═══════════════════════════════════════════════════════════
   Chess Clubs — desktop-only centering + chat tab structure fix
   Scope: web/desktop only. Mobile/tablet layouts are untouched.
═══════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  /* Match the centered page shell used by Arena / Global / other menu views. */
  body.club-section-open-body #gameArea.game-area {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.club-section-open-body #menuCard.menu-dashboard-card {
    width: 100% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  /* Chat can use more of the centered shell without becoming left-anchored. */
  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open {
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  /* When chat narrows the club list, keep every navigation button visible.
     Same 3 + 2 structure as the mobile layout, but desktop-only. */
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-hub-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 10px 10px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-hub-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-hub-tabs button {
    grid-column: span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 5px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-hub-tabs button:nth-child(4),
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-hub-tabs button:nth-child(5) {
    grid-column: span 3 !important;
  }

  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-chat-list-panel {
    overflow-x: hidden !important;
  }
}

/* =====================================================================
   Clan Battle Super Fix 8.3.8
   Scope: Clan Battle live notifications + desktop Clubs top spacing only.
   No other game/profile UI is changed here.
   ===================================================================== */
.clan-battle-toast-container {
  position: fixed;
  z-index: 10050;
  top: calc(72px + env(safe-area-inset-top));
  right: 18px;
  width: min(390px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.clan-battle-live-toast,
.clan-reward-live-toast,
.clan-cancel-request-toast {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(111, 155, 204, .38);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(14, 22, 32, .985), rgba(8, 14, 22, .985));
  box-shadow: 0 18px 52px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.035);
  color: #eef5ff;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  animation: clanBattleToastIn .24s ease-out both;
}
.clan-battle-live-toast.closing,
.clan-reward-live-toast.closing,
.clan-cancel-request-toast.closing {
  animation: clanBattleToastOut .24s ease-in both;
}
.clan-battle-live-toast {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
}
.clan-battle-live-toast.clan-battle-challenge { border-color: rgba(86, 157, 255, .55); }
.clan-battle-live-toast.clan-battle-victory { border-color: rgba(225, 185, 74, .58); }
.clan-battle-toast-kicker {
  color: #8ea2ba;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.clan-battle-toast-vs {
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
}
.clan-battle-toast-vs > strong {
  color: #efc760;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
}
.clan-battle-toast-club {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.clan-battle-toast-club:last-child { justify-content: flex-end; }
.clan-battle-toast-club em {
  min-width: 0;
  overflow: hidden;
  color: #f3f7fc;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-battle-toast-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(118, 164, 215, .38);
  border-radius: 11px;
  background: #111c2a;
  color: #cfe3ff;
  font-size: 13px;
  font-weight: 900;
}
.clan-battle-toast-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.clan-battle-toast-text {
  overflow: hidden;
  color: #94a5b9;
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-reward-live-toast {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-color: rgba(226, 187, 79, .48);
}
.clan-reward-live-toast > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.clan-reward-live-toast b {
  color: #eef4fc;
  font-size: 11px;
  font-weight: 750;
}
.clan-reward-live-toast strong {
  color: #f1ca67;
  font-size: 16px;
  font-weight: 900;
}
.clan-reward-live-toast small {
  color: #8b9aad;
  font-size: 9px;
}
.clan-reward-coin {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(237, 193, 72, .62);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7d97b, #b87816 72%);
  box-shadow: 0 0 22px rgba(218, 166, 51, .18);
  color: #17202a;
  font-size: 17px;
  font-weight: 950;
}


.clan-cancel-request-toast {
  display: grid;
  gap: 9px;
  padding: 11px 12px 12px;
  border-color: rgba(248, 113, 113, .48);
  cursor: default;
}
.clan-cancel-request-main {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.clan-cancel-request-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
}
.clan-cancel-request-actions > button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(110, 139, 174, .38);
  border-radius: 10px;
  background: rgba(20, 31, 45, .94);
  color: #dce8f6;
  font: inherit;
  font-size: 10.5px;
  font-weight: 850;
  cursor: pointer;
}
.clan-cancel-request-actions > button.accept {
  border-color: rgba(255, 103, 103, .52);
  background: rgba(91, 29, 35, .72);
  color: #ffd8dc;
}
.clan-cancel-request-actions > button.decline {
  border-color: rgba(78, 159, 255, .42);
  background: rgba(26, 55, 88, .72);
  color: #d9ebff;
}
.clan-cancel-request-actions > button:disabled {
  opacity: .58;
  cursor: default;
}

/* Mini Club-logo VS Club-logo visual inside the existing notification center. */
.notification-clan-vs {
  width: 34px;
  height: 30px;
  display: grid;
  grid-template-columns: 13px 8px 13px;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.notification-clan-vs > b {
  color: #e8bf58;
  font-size: 6px;
  font-weight: 950;
  text-align: center;
}
.notification-club-logo {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(132, 178, 231, .42);
  border-radius: 4px;
  background: #101b29;
  color: #dcecff;
  font-size: 6px;
  font-weight: 900;
}
.notification-club-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@keyframes clanBattleToastIn {
  from { opacity: 0; transform: translate3d(16px,-6px,0) scale(.985); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes clanBattleToastOut {
  from { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  to { opacity: 0; transform: translate3d(12px,-4px,0) scale(.985); }
}

/* Web/Desktop only: restore the same breathing room under the global top bar
   that the other menu screens get from their normal card margin. */
@media (min-width: 861px) {
  body.club-section-open-body #gameArea.game-area {
    padding-top: calc(var(--clubs-page-top, 76px) + 18px) !important;
  }
}

@media (max-width: 640px) {
  .clan-battle-toast-container {
    top: calc(62px + env(safe-area-inset-top));
    right: 10px;
    left: 10px;
    width: auto;
  }
  .clan-battle-live-toast { padding: 10px 11px; gap: 6px; border-radius: 14px; }
  .clan-battle-toast-vs { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); gap: 6px; }
  .clan-battle-toast-logo { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
  .clan-battle-toast-club { gap: 6px; }
  .clan-battle-toast-club em { font-size: 11px; }
  .clan-battle-toast-text { font-size: 9.5px; }
  .clan-reward-live-toast { padding: 10px 11px; border-radius: 14px; }
  .clan-cancel-request-toast { padding: 10px 11px 11px; border-radius: 14px; }
  .clan-cancel-request-actions > button { min-height: 36px; font-size: 10px; }
}

/* =====================================================================
   Chess Clubs / Native Mobile notification hotfix 8.3.9
   Scope: desktop Clubs back-button stacking + native APK friend chat only.
   ===================================================================== */
@media (min-width: 861px) {
  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    position: relative !important;
    isolation: isolate !important;
  }
  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    position: relative !important;
    z-index: 40 !important;
    transform: none !important;
    isolation: isolate !important;
  }
  body.club-section-open-body #menuSectionViews > .menu-back-btn:hover,
  body.club-section-open-body #menuSectionViews > .menu-back-btn:focus-visible {
    position: relative !important;
    z-index: 41 !important;
    transform: none !important;
  }
  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* APK mobile friend chat must be a true full-screen foreground surface, not a
   panel hidden behind the Friends modal/top shell. Mobile browsers are untouched. */
@media (max-width: 860px) {
  body.native-friend-chat-open #friendChatScreen.friend-chat-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 2147483550 !important;
    background: #0b141a !important;
    backdrop-filter: none !important;
  }
  body.native-friend-chat-open #friendChatScreen .friend-chat-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  body.native-friend-chat-open #friendChatScreen .friend-chat-screen-header {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    z-index: 4 !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }
  body.native-friend-chat-open #friendChatScreen .friend-chat-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.native-friend-chat-open #friendChatScreen .friend-chat-compose {
    flex: 0 0 auto !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}


/* =====================================================================
   Clan Battle cancel request mobile UI + action color fix 8.4.1
   Scope: Clan Battle notification/action UI only.
   ===================================================================== */
#clubBattleList .club-battle-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
#clubBattleList .club-battle-actions > button:only-child {
  grid-column: 1 / -1 !important;
}
#clubBattleList .club-battle-actions .clan-action-accept {
  border: 1px solid rgba(67, 201, 128, .66) !important;
  background: linear-gradient(180deg, rgba(32, 139, 83, .96), rgba(22, 111, 65, .96)) !important;
  color: #effff5 !important;
}
#clubBattleList .club-battle-actions .clan-action-decline {
  border: 1px solid rgba(244, 91, 105, .62) !important;
  background: linear-gradient(180deg, rgba(111, 35, 45, .96), rgba(78, 24, 33, .96)) !important;
  color: #ffe8eb !important;
}
#clubBattleList .club-battle-actions .clan-action-cancel-accept {
  border: 1px solid rgba(255, 91, 104, .72) !important;
  background: linear-gradient(180deg, rgba(148, 36, 49, .98), rgba(105, 26, 37, .98)) !important;
  color: #fff0f2 !important;
}
#clubBattleList .club-battle-actions .clan-action-cancel-decline {
  border: 1px solid rgba(80, 161, 255, .68) !important;
  background: linear-gradient(180deg, rgba(35, 92, 153, .98), rgba(25, 66, 111, .98)) !important;
  color: #edf6ff !important;
}
#clubBattleList .club-battle-actions .clan-action-request-cancel {
  border: 1px solid rgba(227, 177, 74, .58) !important;
  background: rgba(92, 68, 24, .72) !important;
  color: #ffe7a2 !important;
}
#clubBattleList .club-battle-actions .clan-action-pending {
  border: 1px solid rgba(119, 135, 154, .36) !important;
  background: rgba(33, 42, 54, .78) !important;
  color: #8796a8 !important;
}
#clubBattleList .club-battle-actions > button:not(:disabled):hover {
  filter: brightness(1.10) !important;
}

@media (max-width: 860px) {
  /* Native/full-screen mobile layers use very high stacking contexts. Keep the
     actionable cancel request above them instead of behind the Clubs surface. */
  .clan-battle-toast-container {
    z-index: 2147483646 !important;
    top: calc(58px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    pointer-events: none !important;
  }
  .clan-cancel-request-toast {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1;
  }
  .clan-cancel-request-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .clan-cancel-request-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    font-size: 11px !important;
  }
  #clubBattleList .club-battle-actions {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #clubBattleList .club-battle-actions > button {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =====================================================================
   8.4.2 — Public Games controls + five-row history + game-shell cleanup
   Scope: Public Games / live game layout only. Other menu/profile UIs untouched.
   ===================================================================== */

/* Public room creation now exposes the same side/clock choices used elsewhere. */
#panelPublic .public-room-create-settings {
  display:grid !important;
  grid-template-columns:minmax(120px,.8fr) minmax(190px,1.25fr) !important;
  gap:10px !important;
  align-items:end !important;
  flex:1 1 360px !important;
  min-width:300px !important;
}
#panelPublic .public-room-create-settings label {
  display:grid !important;
  gap:6px !important;
  margin:0 !important;
  min-width:0 !important;
}
#panelPublic .public-room-create-settings label > span {
  color:#8b98a8 !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
#panelPublic .public-room-create-settings select {
  width:100% !important;
  min-height:40px !important;
  padding:0 34px 0 11px !important;
  border:1px solid rgba(121,151,184,.24) !important;
  border-radius:11px !important;
  background:#0d151f !important;
  color:#e7eef7 !important;
  font:700 12px 'Rajdhani',sans-serif !important;
  outline:none !important;
}
#panelPublic .public-room-create-settings select:focus {
  border-color:rgba(76,162,255,.62) !important;
  box-shadow:0 0 0 2px rgba(76,162,255,.10) !important;
}

/* Create and Refresh must not look like the same action. */
#panelPublic .public-create-btn {
  border-color:rgba(76,162,255,.42) !important;
  background:linear-gradient(180deg,rgba(47,129,247,.24),rgba(47,129,247,.13)) !important;
  color:#dcecff !important;
}
#panelPublic .public-create-btn:hover {
  border-color:rgba(88,166,255,.72) !important;
  background:linear-gradient(180deg,rgba(47,129,247,.34),rgba(47,129,247,.19)) !important;
}
#panelPublic .public-create-btn::before {
  content:'' !important;
  width:14px !important;
  height:14px !important;
  display:inline-block !important;
  margin-right:7px !important;
  vertical-align:-2px !important;
  background:#8ec5ff !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
#panelPublic .public-refresh-btn::before {
  background:#8b98a8 !important;
}

/* Strong cleanup: once a game is visible, the hidden menu shell must never
   leak into the live-game flow as an empty wide rounded panel. */
body.chess-game-active #menuCard,
body.chess-game-active #menuCard.menu-dashboard-card,
body.chess-game-active #menuSectionViews,
body.chess-game-active #menuHub {
  display:none !important;
}
body.chess-game-active #lobbyScreen:not(.visible) {
  display:none !important;
}

/* Five full move rows maximum in every visible board mode (AI, public bot,
   real Public Game, Friend/Arena). More moves scroll inside this box. */
body.chess-game-active #gameBoard #moveHistory {
  --cm-history-head-h:36px;
  --cm-history-row-h:36px;
  height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
  min-height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
  max-height:calc(var(--cm-history-head-h) + (var(--cm-history-row-h) * 5)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
}
body.chess-game-active #gameBoard #moveHistory table {
  width:100% !important;
  table-layout:fixed !important;
}
body.chess-game-active #gameBoard #moveHistory thead th {
  position:sticky !important;
  top:0 !important;
  z-index:4 !important;
  height:var(--cm-history-head-h) !important;
  padding:7px 10px !important;
  background:#111820 !important;
  box-shadow:0 1px 0 rgba(139,148,158,.18) !important;
}
body.chess-game-active #gameBoard #moveHistory tbody tr {
  height:var(--cm-history-row-h) !important;
}
body.chess-game-active #gameBoard #moveHistory tbody td {
  height:var(--cm-history-row-h) !important;
  padding:6px 10px !important;
  line-height:1.1 !important;
}
body.chess-game-active #gameBoard #moveHistory .empty-history {
  min-height:calc(var(--cm-history-row-h) * 5) !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:12px !important;
}

/* Public AI-style rooms were not using multiplayer-game-active, so their chat
   could grow the whole page. Give them the same bounded desktop right column. */
@media (min-width:901px) {
  body.public-bot-game-active #gameBoard .game-layout {
    max-width:980px !important;
    grid-template-columns:minmax(0,1fr) minmax(320px,360px) !important;
    gap:14px !important;
  }
  body.public-bot-game-active #gameBoard .right-panel,
  body.multiplayer-game-active #gameBoard .right-panel {
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    height:min(720px, calc(100dvh - 105px)) !important;
    max-height:min(720px, calc(100dvh - 105px)) !important;
    overflow:hidden !important;
  }
  body.public-bot-game-active #gameBoard #mpChatPanel.mp-chat,
  body.multiplayer-game-active #gameBoard #mpChatPanel.mp-chat {
    flex:1 1 0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    margin-top:10px !important;
    overflow:hidden !important;
  }
  body.public-bot-game-active #gameBoard #mpChatPanel .mp-chat-messages,
  body.multiplayer-game-active #gameBoard #mpChatPanel .mp-chat-messages {
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }
}

@media (max-width:768px) {
  #panelPublic .public-room-create-settings {
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) !important;
    width:100% !important;
    min-width:0 !important;
    gap:7px !important;
  }
  #panelPublic .public-room-create-settings select {
    min-height:40px !important;
    height:40px !important;
    font-size:12px !important;
  }
  body.chess-game-active #gameBoard #moveHistory {
    --cm-history-head-h:34px;
    --cm-history-row-h:34px;
  }
}


/* v8.4.3 — Public AI room side panel hard lock.
   Bot public rooms use a separate runtime path from normal multiplayer rooms.
   Keep exactly five move rows visible and make both Move History and Game Chat
   scroll internally so the page itself never grows with moves/messages. */
#gameBoard.public-bot-room-layout #moveHistory {
  --cm-bot-history-head-h:36px;
  --cm-bot-history-row-h:36px;
  box-sizing:border-box !important;
  height:calc(var(--cm-bot-history-head-h) + (var(--cm-bot-history-row-h) * 5)) !important;
  min-height:calc(var(--cm-bot-history-head-h) + (var(--cm-bot-history-row-h) * 5)) !important;
  max-height:calc(var(--cm-bot-history-head-h) + (var(--cm-bot-history-row-h) * 5)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  flex:0 0 auto !important;
}
#gameBoard.public-bot-room-layout #moveHistory table {
  width:100% !important;
  table-layout:fixed !important;
}
#gameBoard.public-bot-room-layout #moveHistory thead th {
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  height:var(--cm-bot-history-head-h) !important;
  padding:7px 10px !important;
  background:#111820 !important;
}
#gameBoard.public-bot-room-layout #moveHistory tbody tr,
#gameBoard.public-bot-room-layout #moveHistory tbody td {
  height:var(--cm-bot-history-row-h) !important;
}
#gameBoard.public-bot-room-layout #moveHistory tbody td {
  padding:6px 10px !important;
  line-height:1.1 !important;
}
#gameBoard.public-bot-room-layout #mpChatPanel.mp-chat {
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
#gameBoard.public-bot-room-layout #mpChatPanel .mp-chat-messages {
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

@media (min-width:901px) {
  #gameBoard.public-bot-room-layout .right-panel {
    display:grid !important;
    grid-template-rows:auto auto minmax(0,1fr) !important;
    min-height:0 !important;
    height:min(700px, calc(100dvh - 110px)) !important;
    max-height:min(700px, calc(100dvh - 110px)) !important;
    overflow:hidden !important;
  }
  #gameBoard.public-bot-room-layout #mpChatPanel.mp-chat {
    height:auto !important;
    max-height:none !important;
    margin-top:10px !important;
  }
}

@media (max-width:900px) {
  #gameBoard.public-bot-room-layout #moveHistory {
    --cm-bot-history-head-h:34px;
    --cm-bot-history-row-h:34px;
  }
  #gameBoard.public-bot-room-layout #mpChatPanel.mp-chat {
    height:min(62dvh,520px) !important;
    min-height:320px !important;
    max-height:520px !important;
  }
}


/* =====================================================================
   8.4.4 — micro UI polish: mobile friend-chat close + Clubs back button
   Scope only: friend chat mobile header + Chess Clubs Main Menu control.
   ===================================================================== */

/* Web/Desktop: keep the Clubs Main Menu control above the panel while restoring
   the same tiny lift animation used by the other section back buttons. */
@media (min-width: 861px) {
  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    position: relative !important;
    z-index: 40 !important;
    transform: translateY(0) !important;
    transition:
      transform .16s ease,
      background-color .16s ease,
      border-color .16s ease,
      color .16s ease !important;
    will-change: transform;
  }

  body.club-section-open-body #menuSectionViews > .menu-back-btn:hover,
  body.club-section-open-body #menuSectionViews > .menu-back-btn:focus-visible {
    z-index: 41 !important;
    transform: translateY(-2px) !important;
  }
}

/* Mobile Clubs: reserve real space below the global top bar so the Main Menu
   control never visually slips under the header divider. */
@media (max-width: 860px) {
  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    box-sizing: border-box !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-top: 6px !important;
  }

  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    align-self: start !important;
    margin-top: 2px !important;
    transform: none !important;
    z-index: 80 !important;
  }

  /* Native/APK friend chat: the title block must consume the free width, while
     the X stays pinned to the far right edge of the screen header. */
  body.native-friend-chat-open #friendChatScreen .friend-chat-screen-header {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  body.native-friend-chat-open #friendChatScreen .friend-chat-head-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.native-friend-chat-open #friendChatScreen .friend-chat-close-screen {
    flex: 0 0 38px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
    right: 0 !important;
  }
}


/* =====================================================================
   8.4.5 — Desktop Chess Clubs Main Menu hover clipping/stacking hard fix
   Scope: Web/Desktop Chess Clubs back button only.
   ===================================================================== */
@media (min-width: 861px) {
  /* The Clubs shell used overflow:hidden on both ancestors. That can clip the
     translated back button even when the button itself has a high z-index. */
  body.club-section-open-body #menuCard.menu-dashboard-card {
    overflow: visible !important;
    isolation: isolate !important;
  }

  body.club-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    overflow: visible !important;
    position: relative !important;
    isolation: isolate !important;
  }

  /* Keep the actual Clubs panel self-contained, so only the back button is
     allowed to paint outside its grid row. */
  body.club-section-open-body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body.club-section-open-body #menuSectionViews > .menu-back-btn {
    position: relative !important;
    z-index: 1000 !important;
    transform: translate3d(0,0,0) !important;
    transition:
      transform .16s ease,
      background-color .16s ease,
      border-color .16s ease,
      color .16s ease,
      box-shadow .16s ease !important;
    will-change: transform;
  }

  body.club-section-open-body #menuSectionViews > .menu-back-btn:hover,
  body.club-section-open-body #menuSectionViews > .menu-back-btn:focus-visible {
    z-index: 1001 !important;
    transform: translate3d(0,-2px,0) !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.24) !important;
  }
}

/* 8.5.22 — Public bot room desktop alignment only.
   Match the compact geometry already used by normal multiplayer rooms so
   joining an AI-hosted Public Game does not make the board/UI grow downward. */
@media (min-width:901px) {
  body.public-bot-game-active #gameBoard .left-panel {
    padding:10px 12px 12px !important;
  }
  body.public-bot-game-active #gameBoard .right-panel {
    width:min(360px,31vw) !important;
    min-width:320px !important;
    max-width:360px !important;
  }
  body.public-bot-game-active #gameBoard #board,
  body.public-bot-game-active #gameBoard #status,
  body.public-bot-game-active #gameBoard .chess-clocks,
  body.public-bot-game-active #gameBoard .game-timer,
  body.public-bot-game-active #gameBoard .captured-bar,
  body.public-bot-game-active #gameBoard .controls,
  body.public-bot-game-active #gameBoard .mp-controls,
  body.public-bot-game-active #gameBoard #mpTopPlayer,
  body.public-bot-game-active #gameBoard #mpBottomPlayer,
  body.public-bot-game-active #gameBoard #disconnectBanner {
    width:min(500px, calc(100dvh - 430px), 100%) !important;
  }
  body.public-bot-game-active #gameBoard #board {
    min-width:390px !important;
  }
  body.public-bot-game-active #gameBoard .captured-bar {
    min-height:25px !important;
    padding:4px 9px !important;
  }
  body.public-bot-game-active #gameBoard .mp-player-bar {
    min-height:44px !important;
    padding:5px 9px !important;
  }
  body.public-bot-game-active #gameBoard .game-timer {
    min-height:32px !important;
    padding:4px 9px !important;
  }
  body.public-bot-game-active #gameBoard #status {
    min-height:38px !important;
    padding:6px 10px !important;
  }
  body.public-bot-game-active #gameBoard .mp-controls {
    margin-top:6px !important;
    gap:6px !important;
  }
  body.public-bot-game-active #gameBoard .mp-controls button {
    min-height:36px !important;
    padding:7px 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   ChessMondo Language Selector — 8.7.10
   Isolated feature styles: do not alter existing dashboard UI.
═══════════════════════════════════════════════════════ */
.top-language-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  cursor: pointer !important;
}
.top-language-btn:hover,
.top-language-btn[aria-expanded="true"] {
  background: rgba(255,255,255,.045) !important;
  border-color: var(--cm-line) !important;
}
.top-language-btn::before {
  content: '';
  width: 17px;
  height: 17px;
  display: block;
  margin: auto;
  background: #98a7ba;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 6h-3.03a15.8 15.8 0 0 0-1.41-3.25A8.05 8.05 0 0 1 18.92 8ZM12 4c.83 1.01 1.51 2.36 1.88 4h-3.76C10.49 6.36 11.17 5.01 12 4ZM4.26 14a8.1 8.1 0 0 1 0-4h3.39a17.1 17.1 0 0 0 0 4H4.26Zm.82 2h3.03c.3 1.16.78 2.27 1.41 3.25A8.05 8.05 0 0 1 5.08 16Zm3.03-8H5.08a8.05 8.05 0 0 1 4.44-3.25A15.8 15.8 0 0 0 8.11 8ZM12 20c-.83-1.01-1.51-2.36-1.88-4h3.76c-.37 1.64-1.05 2.99-1.88 4Zm2.23-6H9.77a15.1 15.1 0 0 1 0-4h4.46a15.1 15.1 0 0 1 0 4Zm.25 5.25A15.8 15.8 0 0 0 15.89 16h3.03a8.05 8.05 0 0 1-4.44 3.25ZM16.35 14a17.1 17.1 0 0 0 0-4h3.39a8.1 8.1 0 0 1 0 4h-3.39Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 6h-3.03a15.8 15.8 0 0 0-1.41-3.25A8.05 8.05 0 0 1 18.92 8ZM12 4c.83 1.01 1.51 2.36 1.88 4h-3.76C10.49 6.36 11.17 5.01 12 4ZM4.26 14a8.1 8.1 0 0 1 0-4h3.39a17.1 17.1 0 0 0 0 4H4.26Zm.82 2h3.03c.3 1.16.78 2.27 1.41 3.25A8.05 8.05 0 0 1 5.08 16Zm3.03-8H5.08a8.05 8.05 0 0 1 4.44-3.25A15.8 15.8 0 0 0 8.11 8ZM12 20c-.83-1.01-1.51-2.36-1.88-4h3.76c-.37 1.64-1.05 2.99-1.88 4Zm2.23-6H9.77a15.1 15.1 0 0 1 0-4h4.46a15.1 15.1 0 0 1 0 4Zm.25 5.25A15.8 15.8 0 0 0 15.89 16h3.03a8.05 8.05 0 0 1-4.44 3.25ZM16.35 14a17.1 17.1 0 0 0 0-4h3.39a8.1 8.1 0 0 1 0 4h-3.39Z'/%3E%3C/svg%3E");
}

.language-selector-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(2, 6, 11, .76);
  backdrop-filter: blur(7px) saturate(108%);
  -webkit-backdrop-filter: blur(7px) saturate(108%);
}
.language-selector-overlay.hidden { display: none !important; }

.language-selector-panel {
  width: min(720px, calc(100vw - 44px));
  max-height: min(720px, calc(100dvh - 44px));
  overflow: hidden;
  border: 1px solid rgba(76, 162, 255, .48);
  border-radius: 19px;
  background:
    radial-gradient(circle at 12% 0%, rgba(51, 132, 255, .09), transparent 36%),
    linear-gradient(180deg, rgba(15, 25, 37, .98), rgba(9, 16, 25, .985));
  box-shadow: 0 30px 90px rgba(0,0,0,.68), 0 0 28px rgba(54, 143, 255, .08);
  color: #eef5ff;
  animation: languageSelectorIn .18s ease-out;
}
@keyframes languageSelectorIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.language-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 14px;
}
.language-selector-head h2 {
  margin: 0;
  color: #f3f7fd;
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .01em;
}
.language-selector-head p {
  margin: 6px 0 0;
  color: #8190a3;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.language-selector-close {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #8f9eb0;
  font-size: 17px;
  cursor: pointer;
  transition: .15s ease;
}
.language-selector-close:hover {
  color: #e9f2ff;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}

.language-selector-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 20px 20px;
  overflow-y: auto;
  max-height: calc(100dvh - 155px);
}
.language-option {
  position: relative;
  min-width: 0;
  min-height: 96px;
  padding: 9px 7px 8px;
  border: 1px solid rgba(111, 137, 169, .25);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 29, 42, .9), rgba(12, 21, 31, .9));
  color: #dce6f3;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.language-option:hover {
  transform: translateY(-1px);
  border-color: rgba(76, 162, 255, .43);
  background: linear-gradient(180deg, rgba(23, 37, 53, .96), rgba(13, 24, 36, .96));
}
.language-option.selected {
  border-color: #469fff;
  background: linear-gradient(180deg, rgba(25, 48, 74, .96), rgba(13, 29, 48, .96));
  box-shadow: inset 0 0 0 1px rgba(91, 174, 255, .22), 0 0 20px rgba(45, 138, 255, .14);
}
.language-option-flag {
  width: 32px;
  height: 32px;
  margin-bottom: 3px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255,255,255,.045);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
  font-size: 23px;
  line-height: 1;
}
.language-option-native {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f2f6fb;
  font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}
.language-option-english {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #91a2b6;
  font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
}
.language-option-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: #3197ff;
  color: #06111d;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(49, 151, 255, .28);
}
.language-option.selected .language-option-check { display: inline-flex; }

@media (max-width: 820px) {
  .language-selector-panel { width: min(590px, calc(100vw - 28px)); }
  .language-selector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 16px; padding-right: 16px; }
  .language-selector-head { padding-left: 17px; padding-right: 17px; }
}
@media (max-width: 640px) {
  .top-language-btn { width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
  .top-language-btn::before { width:16px; height:16px; }
  .language-selector-overlay { padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); }
  .language-selector-panel { width: min(520px, calc(100vw - 20px)); max-height: calc(100dvh - 24px); border-radius: 17px; }
  .language-selector-head { padding: 17px 15px 10px; }
  .language-selector-head h2 { font-size: 22px; }
  .language-selector-head p { font-size: 12px; }
  .language-selector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 14px 16px; max-height: calc(100dvh - 122px); }
  .language-option { min-height: 88px; padding: 8px 6px 7px; border-radius: 12px; }
  .language-option-flag { width: 30px; height: 30px; font-size: 21px; }
  .language-option-native { font-size: 14px; }
  .language-option-english { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════
   ChessMondo 8.8 — Global translation + mobile menu lock
   Frontend only. Keeps existing dashboard styling intact.
═══════════════════════════════════════════════════════ */
.language-option-flag svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

@media (max-width: 768px) {
  html.main-menu-hub-fixed,
  body.main-menu-hub-fixed {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.main-menu-hub-fixed #gameScreen.screen:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.main-menu-hub-fixed #gameArea.game-area {
    position: fixed !important;
    z-index: 1 !important;
    top: var(--cm-mobile-topbar-bottom, calc(62px + env(safe-area-inset-top))) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    padding-top: 9px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  body.main-menu-hub-fixed #menuCard.menu-dashboard-card {
    width: calc(100% - 20px) !important;
    height: calc(100% - 4px) !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.main-menu-hub-fixed #menuHub {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.main-menu-hub-fixed #menuHub .menu-dashboard-head,
  body.main-menu-hub-fixed #menuHub .menu-chess-stage {
    flex: 0 0 auto !important;
  }

  body.main-menu-hub-fixed #menuHub .menu-card-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    align-content: stretch !important;
  }

  body.main-menu-hub-fixed #menuHub .menu-feature-card {
    min-height: 0 !important;
    height: 100% !important;
  }
}

/* ChessMondo 8.8 global translation: preserve app geometry across all languages. */
html[data-chessmondo-language="ar"] .language-selector-panel, html[data-chessmondo-language="ar"] .modal-card, html[data-chessmondo-language="ar"] .game-menu-card { unicode-bidi: plaintext; }

/* =====================================================================
   ChessMondo 8.9.2 — Arena single-viewport + real web flags
   The document never scrolls while Arena is open. Only the leaderboard
   owns vertical overflow on desktop and mobile.
   ===================================================================== */
html.arena-section-open-root,
body.arena-section-open-body {
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.arena-section-open-body #gameScreen.screen,
body.arena-section-open-body #gameArea.game-area {
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.arena-section-open-body #menuCard.menu-dashboard-card {
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  width:min(1280px, calc(100% - 24px)) !important;
  height:calc(100% - 16px) !important;
  min-height:0 !important;
  max-height:calc(100% - 16px) !important;
  margin:8px auto !important;
  padding:12px 14px !important;
  overflow:hidden !important;
}

body.arena-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  width:100% !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

body.arena-section-open-body #menuSectionViews > .menu-back-btn {
  flex:0 0 auto !important;
  min-height:34px !important;
  height:34px !important;
  margin:0 0 6px !important;
  padding:0 12px !important;
}

body.arena-section-open-body #panelArena.menu-section-panel {
  box-sizing:border-box !important;
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  padding:12px 14px !important;
  overflow:hidden !important;
}

body.arena-section-open-body #panelArena .feature-panel-head {
  flex:0 0 auto !important;
  margin-bottom:7px !important;
  padding-bottom:7px !important;
}
body.arena-section-open-body #panelArena .arena-status-card {
  flex:0 0 auto !important;
  margin-bottom:6px !important;
  padding:8px 10px !important;
}
body.arena-section-open-body #panelArena .arena-help-card {
  flex:0 0 auto !important;
  margin:5px 0 !important;
  padding:7px 10px !important;
}
body.arena-section-open-body #panelArena .arena-actions-row {
  flex:0 0 auto !important;
  margin:5px 0 5px !important;
}
body.arena-section-open-body #panelArena #arenaStatus {
  flex:0 0 auto !important;
  margin:0 !important;
  min-height:0 !important;
}
body.arena-section-open-body #panelArena .global-section-title {
  flex:0 0 auto !important;
  margin:3px 0 5px !important;
  padding:0 !important;
  line-height:1.1 !important;
}
body.arena-section-open-body #panelArena .arena-leaderboard {
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  padding-right:5px !important;
}
body.arena-section-open-body #panelArena .arena-chat-removed-note {
  flex:0 0 auto !important;
  margin-top:5px !important;
  padding:6px 9px !important;
  line-height:1.2 !important;
}

#panelArena .arena-player {
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
}
#panelArena .arena-player .cvx-flag {
  width:25px !important;
  height:18px !important;
  margin-right:7px !important;
  border-radius:4px !important;
  transform:none !important;
  box-shadow:0 2px 6px rgba(0,0,0,.18) !important;
}
#panelArena .arena-player .cvx-real-flag .flag-emoji-fallback {
  line-height:18px !important;
  font-size:15px !important;
}
#panelArena .arena-player-name {
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width: 768px) {
  body.arena-section-open-body #menuCard.menu-dashboard-card {
    width:calc(100% - 12px) !important;
    height:calc(100% - 6px) !important;
    max-height:calc(100% - 6px) !important;
    margin:3px auto !important;
    padding:6px !important;
    border-radius:14px !important;
  }
  body.arena-section-open-body #menuSectionViews > .menu-back-btn {
    min-height:30px !important;
    height:30px !important;
    margin-bottom:4px !important;
    font-size:11px !important;
  }
  body.arena-section-open-body #panelArena.menu-section-panel {
    padding:8px !important;
    border-radius:13px !important;
  }
  body.arena-section-open-body #panelArena .feature-panel-head {
    margin-bottom:5px !important;
    padding-bottom:5px !important;
  }
  body.arena-section-open-body #panelArena .arena-status-card {
    margin-bottom:4px !important;
    padding:6px 8px !important;
  }
  body.arena-section-open-body #panelArena .arena-help-card {
    margin:3px 0 !important;
    padding:5px 8px !important;
    font-size:10px !important;
  }
  body.arena-section-open-body #panelArena .arena-actions-row {
    margin:3px 0 !important;
  }
  body.arena-section-open-body #panelArena .arena-actions-row .primary-btn,
  body.arena-section-open-body #panelArena .arena-actions-row .danger-main-btn {
    min-height:35px !important;
    height:35px !important;
  }
  body.arena-section-open-body #panelArena .global-section-title {
    margin:2px 0 4px !important;
    font-size:12px !important;
  }
  body.arena-section-open-body #panelArena .arena-leaderboard {
    gap:5px !important;
    max-height:none !important;
  }
  body.arena-section-open-body #panelArena .arena-row {
    padding:7px 8px !important;
  }
  body.arena-section-open-body #panelArena .arena-chat-removed-note {
    margin-top:3px !important;
    padding:4px 7px !important;
    font-size:9px !important;
  }
  #panelArena .arena-player .cvx-flag {
    width:22px !important;
    height:16px !important;
    margin-right:5px !important;
  }
}


/* =====================================================================
   ChessMondo 8.9.4 — Arena Back Button Geometry Hotfix
   Restores the normal section-navigation scale and keeps the control clear
   of the Arena panel/header divider on desktop and mobile.
   ===================================================================== */
body.arena-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
  box-sizing:border-box !important;
  padding-top:8px !important;
}
body.arena-section-open-body #menuSectionViews > .menu-back-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 40px !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:max-content !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 14px !important;
  margin:0 0 10px 0 !important;
  border-radius:12px !important;
  line-height:1 !important;
  position:relative !important;
  z-index:30 !important;
  overflow:visible !important;
  transform:translateY(0) !important;
  will-change:transform;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}
body.arena-section-open-body #menuSectionViews > .menu-back-btn:hover,
body.arena-section-open-body #menuSectionViews > .menu-back-btn:focus-visible {
  transform:translateY(-2px) !important;
  z-index:31 !important;
}
@media (max-width:768px) {
  body.arena-section-open-body #menuSectionViews.menu-section-views:not(.hidden) {
    padding-top:6px !important;
  }
  body.arena-section-open-body #menuSectionViews > .menu-back-btn {
    flex-basis:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 12px !important;
    margin-bottom:7px !important;
    font-size:11.5px !important;
    border-radius:11px !important;
  }
}


/* =====================================================================
   ChessMondo 8.9.6 — live-game shell hardening
   Keeps Arena menu chrome out of the active board and guarantees the mobile
   history/chat path remains reachable inside the app scroller.
   ===================================================================== */
body.chess-game-active #menuCard.menu-dashboard-card,
body.chess-game-active #menuSectionViews.menu-section-views,
body.chess-game-active #menuHub,
body.chess-game-active #lobbyScreen:not(.visible) {
  display:none !important;
}
@media (min-width:901px) {
  body.chess-game-active #gameBoard .game-layout {
    max-height:calc(100dvh - 80px) !important;
  }
}
@media (max-width:900px) {
  body.chess-game-active #gameBoard .game-layout {
    padding-bottom:max(8px,env(safe-area-inset-bottom)) !important;
  }
  body.chess-game-active #gameBoard .right-panel {
    flex:0 0 auto !important;
    height:auto !important;
    max-height:none !important;
  }
}


/* =====================================================================
   ChessMondo 8.9.10 — Light mode fixes for Drunk Chess + Chess Clubs
   - readable bluish Drunk Rules HUD/overlay in light theme
   - bluish/white Clubs UI with dark readable text in light theme
   - mobile My Clubs action buttons no longer overlap club info
   ===================================================================== */

html[data-ui-theme="light"] .menu-back-btn,
body[data-ui-theme="light"] .menu-back-btn {
  background:linear-gradient(180deg,#fafdff,#e6f2ff) !important;
  border-color:#b5cfe9 !important;
  color:#113255 !important;
  box-shadow:0 8px 20px rgba(108,146,188,.14) !important;
}
html[data-ui-theme="light"] .menu-back-btn:hover,
body[data-ui-theme="light"] .menu-back-btn:hover,
html[data-ui-theme="light"] body.club-section-open-body #menuSectionViews > .menu-back-btn:hover,
body[data-ui-theme="light"] body.club-section-open-body #menuSectionViews > .menu-back-btn:hover {
  background:linear-gradient(180deg,#eef7ff,#d7ebff) !important;
  border-color:#7fb1e3 !important;
  color:#0d2a47 !important;
}

/* ----- Drunk Chess light mode ----- */
html[data-ui-theme="light"] #gameBoard .drunk-hud.drunk-hud-compact,
body[data-ui-theme="light"] #gameBoard .drunk-hud.drunk-hud-compact {
  background:transparent !important;
}
html[data-ui-theme="light"] #gameBoard .drunk-rules-toggle,
body[data-ui-theme="light"] #gameBoard .drunk-rules-toggle,
html[data-ui-theme="light"] .drunk-rules-toggle,
body[data-ui-theme="light"] .drunk-rules-toggle {
  border:1px solid #8fb8e4 !important;
  background:linear-gradient(135deg,#f8fcff 0%,#e9f4ff 48%,#dcecff 100%) !important;
  box-shadow:0 10px 24px rgba(113,157,205,.20), inset 0 1px 0 rgba(255,255,255,.9) !important;
  color:#14385d !important;
}
html[data-ui-theme="light"] .drunk-rules-toggle.is-drunk,
body[data-ui-theme="light"] .drunk-rules-toggle.is-drunk {
  border-color:#8daae8 !important;
  background:linear-gradient(135deg,#eef2ff 0%,#e6efff 48%,#d8e6ff 100%) !important;
  color:#273a73 !important;
}
html[data-ui-theme="light"] .drunk-rules-title,
html[data-ui-theme="light"] .drunk-rules-title::before,
html[data-ui-theme="light"] .drunk-rules-toggle-sub,
html[data-ui-theme="light"] .drunk-rules-toggle-sub strong,
html[data-ui-theme="light"] #drunkWarning,
body[data-ui-theme="light"] .drunk-rules-title,
body[data-ui-theme="light"] .drunk-rules-title::before,
body[data-ui-theme="light"] .drunk-rules-toggle-sub,
body[data-ui-theme="light"] .drunk-rules-toggle-sub strong,
body[data-ui-theme="light"] #drunkWarning {
  color:#14385d !important;
}
html[data-ui-theme="light"] .drunk-rules-toggle .drunk-phase-pill,
body[data-ui-theme="light"] .drunk-rules-toggle .drunk-phase-pill {
  border:1px solid #9fc2e8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
}
html[data-ui-theme="light"] .drunk-rules-toggle .drunk-phase-pill.is-normal,
body[data-ui-theme="light"] .drunk-rules-toggle .drunk-phase-pill.is-normal {
  background:linear-gradient(180deg,#eaf8ef,#d8f2e3) !important;
  color:#1f6a45 !important;
  border-color:#9ed0b2 !important;
}
html[data-ui-theme="light"] .drunk-rules-toggle .drunk-phase-pill.is-drunk,
body[data-ui-theme="light"] .drunk-rules-toggle .drunk-phase-pill.is-drunk {
  background:linear-gradient(180deg,#f0ebff,#e0d8ff) !important;
  color:#5b46a7 !important;
  border-color:#b5aae9 !important;
}
html[data-ui-theme="light"] #drunkRulesOverlay,
body[data-ui-theme="light"] #drunkRulesOverlay {
  background:rgba(17,37,61,.18) !important;
  backdrop-filter:blur(6px) !important;
}
html[data-ui-theme="light"] .drunk-rules-modal,
body[data-ui-theme="light"] .drunk-rules-modal {
  border:1px solid #a5c3e2 !important;
  background:linear-gradient(180deg,#fbfdff 0%,#eff6ff 100%) !important;
  box-shadow:0 26px 70px rgba(66,100,137,.22) !important;
  color:#102d49 !important;
}
html[data-ui-theme="light"] .drunk-rules-modal .modal-header,
html[data-ui-theme="light"] .drunk-rules-modal h3,
html[data-ui-theme="light"] .drunk-rules-modal p,
html[data-ui-theme="light"] .drunk-rules-modal small,
html[data-ui-theme="light"] #drunkOverlayWarning,
html[data-ui-theme="light"] #drunkOverlayPhaseTimer,
body[data-ui-theme="light"] .drunk-rules-modal .modal-header,
body[data-ui-theme="light"] .drunk-rules-modal h3,
body[data-ui-theme="light"] .drunk-rules-modal p,
body[data-ui-theme="light"] .drunk-rules-modal small,
body[data-ui-theme="light"] #drunkOverlayWarning,
body[data-ui-theme="light"] #drunkOverlayPhaseTimer {
  color:#102d49 !important;
}
html[data-ui-theme="light"] .drunk-rules-modal .modal-close,
body[data-ui-theme="light"] .drunk-rules-modal .modal-close {
  background:rgba(255,255,255,.82) !important;
  border-color:#bfd6eb !important;
  color:#2c4d72 !important;
}
html[data-ui-theme="light"] #drunkRulesPanel,
body[data-ui-theme="light"] #drunkRulesPanel {
  display:grid !important;
  gap:10px !important;
}
html[data-ui-theme="light"] #drunkRulesPanel > div,
body[data-ui-theme="light"] #drunkRulesPanel > div {
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
  padding:11px 13px !important;
  border:1px solid #c1d8ee !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#ffffff,#f3f8ff) !important;
  box-shadow:0 4px 12px rgba(114,149,193,.10) !important;
}
html[data-ui-theme="light"] #drunkRulesPanel > div span,
body[data-ui-theme="light"] #drunkRulesPanel > div span {
  color:#173a5d !important;
  font-weight:700 !important;
}
html[data-ui-theme="light"] #drunkRulesPanel > div b,
body[data-ui-theme="light"] #drunkRulesPanel > div b {
  color:#0b5eca !important;
}

/* ----- Clubs light mode ----- */
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub],
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] {
  border-color:#bed1e4 !important;
  background:linear-gradient(180deg,#f9fbff 0%,#eef4fb 100%) !important;
  box-shadow:0 18px 64px rgba(103,132,170,.18) !important;
  color:#132b47 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-shell,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-shell {
  background:transparent !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-chat-list-panel,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-chat-list-panel {
  background:linear-gradient(180deg,#f9fbff 0%,#f0f6fd 100%) !important;
  border-right:1px solid #c6d6e6 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-conversation-panel,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-conversation-panel,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-box,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-state,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-create-card,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub].club-chat-open .clubs-conversation-panel,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-conversation-panel,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-box,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-state,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-create-card {
  background:linear-gradient(180deg,#fdfefe 0%,#f2f7fd 100%) !important;
  color:#142a45 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head {
  color:#122c49 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro h3,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-state h3,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro h3,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-state h3 {
  color:#122c49 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro p,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-state p,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-eyebrow,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-intro p,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-state p,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-eyebrow {
  color:#47647f !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-page-mark {
  background:linear-gradient(180deg,#f3f7ff,#e5efff) !important;
  border-color:#c4d7ef !important;
  color:#5a59d6 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn {
  background:linear-gradient(180deg,#ffffff,#edf5ff) !important;
  border-color:#bbd3ea !important;
  color:#22466c !important;
  box-shadow:0 6px 16px rgba(114,149,193,.16) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn.create,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .circle-tool-btn.create {
  background:linear-gradient(180deg,#eef6ff,#dcecff) !important;
  border-color:#8db8e4 !important;
  color:#1b4a79 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row {
  background:#ffffff !important;
  border:1px solid #c8dbef !important;
  box-shadow:0 6px 18px rgba(112,149,193,.08) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row span,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row span,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input {
  color:#183555 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input::placeholder,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-search-row input::placeholder {
  color:#6f88a3 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs {
  border-color:transparent !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button {
  border-color:#bfd3ea !important;
  background:linear-gradient(180deg,#ffffff,#eef5ff) !important;
  color:#183554 !important;
  box-shadow:0 6px 16px rgba(112,149,193,.10) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button[aria-selected="true"],
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button[aria-selected="true"] {
  background:linear-gradient(180deg,#dff0ff,#c8e4ff) !important;
  border-color:#79aee4 !important;
  color:#0d2e51 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-sections,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-sections {
  border-top:1px solid #d8e4ef !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row {
  border-color:#c8daee !important;
  background:linear-gradient(180deg,#ffffff,#f4f8fd) !important;
  box-shadow:0 8px 18px rgba(112,149,193,.10) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row:hover,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-row:focus-visible,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row:hover,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-row:focus-visible {
  border-color:#96bce0 !important;
  background:linear-gradient(180deg,#fafdff,#ebf5ff) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row.is-owner,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-row.is-owner {
  border-color:#dbc996 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-avatar {
  border-color:#aac8e7 !important;
  background:linear-gradient(180deg,#eef5ff,#daeaff) !important;
  color:#1e4c7a !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-title h4,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score strong,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-title h4,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score strong {
  color:#122d4b !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p.muted,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-meta,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-meta,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score small,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p.muted,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-joined-meta,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-meta,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-top-score small {
  color:#5c7288 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta > span + span::before,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta > span + span::before {
  color:#8ea5bb !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-owner-chip,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-owner-chip {
  border-color:#dbc67f !important;
  background:linear-gradient(180deg,#fff8dd,#f4e6b8) !important;
  color:#6c5215 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-manage-btn,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-leave-btn,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-manage-btn,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-leave-btn {
  border:1px solid #9cc1e6 !important;
  background:linear-gradient(180deg,#ffffff,#eaf4ff) !important;
  color:#112d4a !important;
  box-shadow:0 5px 12px rgba(112,149,193,.10) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.chat-action,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.chat-action {
  border-color:#7fb0e0 !important;
  background:linear-gradient(180deg,#ebf6ff,#dcecff) !important;
  color:#12314f !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.manage-action,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.mine-action,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.joined-action,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.load-more-action,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.manage-action,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.mine-action,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.joined-action,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.load-more-action {
  border-color:#b7cae3 !important;
  background:linear-gradient(180deg,#ffffff,#eef5ff) !important;
  color:#112d4a !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.join-action,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-action.join-action {
  border-color:#9cc1e6 !important;
  background:linear-gradient(180deg,#f8fcff,#eaf4ff) !important;
  color:#112d4a !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-empty,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-note,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubSection-battles .clubs-hub-intro,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-empty,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-note,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubSection-battles .clubs-hub-intro {
  border-color:#c8d9eb !important;
  background:linear-gradient(180deg,#ffffff,#f2f8ff) !important;
  color:#4f6780 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge {
  border-color:#c6d9ec !important;
  background:linear-gradient(180deg,#ffffff,#f2f7fd) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge label,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field label,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field small,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge label,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field label,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-opponent-field small {
  color:#4c6780 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge input,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge select,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge input,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-challenge select {
  background:#ffffff !important;
  border:1px solid #c4d8ec !important;
  color:#132c47 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList .club-battle-card,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList .club-battle-card {
  border-color:#c7d9ec !important;
  background:linear-gradient(180deg,#ffffff,#f2f8ff) !important;
  box-shadow:0 8px 18px rgba(112,149,193,.10) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList .club-battle-card.status-active,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] #clubBattleList .club-battle-card.status-active {
  border-color:#89b5e3 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-illustration,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-empty-illustration {
  color:#5d86b0 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-head {
  background:linear-gradient(180deg,#fdfefe,#eef6ff) !important;
  border-bottom:1px solid #d3e1ef !important;
  color:#122d4b !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap b,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap span,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap b,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-title-wrap span {
  color:#16304e !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-messages,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-messages {
  background:linear-gradient(180deg,#f9fcff,#f2f8ff) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-msg,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-msg {
  background:#ffffff !important;
  border:1px solid #d3e1ef !important;
  color:#13304f !important;
  box-shadow:0 5px 12px rgba(112,149,193,.08) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-msg.mine,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-msg.mine {
  background:linear-gradient(180deg,#eaf4ff,#dbeeff) !important;
  border-color:#a9c8e9 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row {
  background:linear-gradient(180deg,#fdfefe,#eef6ff) !important;
  border-top:1px solid #d3e1ef !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row input,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-input-row input {
  background:#ffffff !important;
  border:1px solid #c8dbef !important;
  color:#153151 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-emoji-btn,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-send-btn,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-back,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-emoji-btn,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-send-btn,
body[data-ui-theme="light"] #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-chat-back {
  border:1px solid #b9d1e9 !important;
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  color:#20496f !important;
}

/* Mobile/compact layout fix: My Clubs text no longer slides under Open Chat / Manage. */
@media (max-width: 640px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row.is-owner {
    grid-template-columns: 42px minmax(0,1fr) !important;
    align-items: start !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row.is-owner .clubs-row-action-cell,
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row.is-owner .clubs-row-actions-inline {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 5px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row.is-owner .clubs-row-main > p {
    display:block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row.is-owner .clubs-row-meta {
    gap: 3px 8px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row.is-owner .clubs-hub-action {
    min-height: 32px !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
}

/* =====================================================================
   ChessMondo 8.9.11 — Chess Clubs Light Mode Layout & Profile Polish
   ===================================================================== */
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs {
  background:linear-gradient(180deg,#f7fbff 0%,#eaf3fc 100%) !important;
  border-color:#c9dbea !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head {
  box-shadow:inset 0 -1px 0 rgba(114,151,190,.10) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-app-head h3 {
  color:#132f4c !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button:hover {
  color:#102f50 !important;
  border-color:#8fb8df !important;
  background:linear-gradient(180deg,#f8fcff,#dceeff) !important;
  transform:translateY(-1px) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-hub-tabs button[aria-selected="true"] {
  color:#0b2c4f !important;
  border-color:#6fa8df !important;
  background:linear-gradient(180deg,#dcebff,#c4e0fb) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(95,145,198,.14) !important;
}

/* My Clubs: keep identity/details independent from top-right actions. */
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-row {
  grid-template-columns:48px minmax(0,1fr) auto !important;
  grid-template-areas:
    "avatar title actions"
    "avatar details details" !important;
  align-items:start !important;
  row-gap:5px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-row > .clubs-hub-avatar { grid-area:avatar !important; align-self:center !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-title { grid-area:title !important; align-self:center !important; }
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-actions {
  grid-area:actions !important;
  align-self:start !important;
  justify-self:end !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details {
  grid-area:details !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:4px 10px !important;
  padding-right:2px !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details > p {
  margin:0 !important;
  min-width:0 !important;
  color:#8f9aa9 !important;
  font-size:11px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details .clubs-row-meta {
  margin:0 !important;
  flex:0 0 auto !important;
}
body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-actions .clubs-hub-action {
  min-width:0 !important;
  min-height:32px !important;
  height:32px !important;
  padding:0 10px !important;
  border-radius:9px !important;
  font-size:10.5px !important;
  line-height:1 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details > p,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details .clubs-row-meta {
  color:#506a83 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-actions .clubs-hub-action.chat-action {
  color:#123452 !important;
  border-color:#89b5e1 !important;
  background:linear-gradient(180deg,#f7fcff,#ddecfb) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-actions .clubs-hub-action.manage-action {
  color:#163654 !important;
  border-color:#b7cde2 !important;
  background:linear-gradient(180deg,#ffffff,#edf5fd) !important;
}

@media (max-width:640px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-row {
    grid-template-columns:42px minmax(0,1fr) auto !important;
    grid-template-areas:
      "avatar title actions"
      "avatar details details" !important;
    gap:6px 8px !important;
    min-height:82px !important;
    padding:9px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-row .clubs-owner-chip {
    display:inline-flex !important;
    padding:2px 6px !important;
    font-size:7.5px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-actions {
    grid-column:auto !important;
    margin:0 !important;
    gap:5px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-actions .clubs-hub-action {
    min-height:30px !important;
    height:30px !important;
    padding:0 8px !important;
    font-size:9.7px !important;
    border-radius:8px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details {
    display:block !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details > p {
    display:block !important;
    margin:0 0 3px !important;
    font-size:10px !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-details .clubs-row-meta {
    display:flex !important;
    gap:2px 7px !important;
    font-size:9.6px !important;
  }
}
@media (max-width:390px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-row {
    grid-template-columns:40px minmax(0,1fr) !important;
    grid-template-areas:
      "avatar title"
      "avatar details"
      "avatar actions" !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-mine-actions {
    justify-self:start !important;
  }
}

/* Club Profile / Manage: native light card instead of a dark header pasted on a white form. */
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor {
  padding:20px !important;
  background:linear-gradient(180deg,#eef5fc 0%,#f8fbff 100%) !important;
  color:#132d4a !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-body,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions {
  width:min(760px,100%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head {
  position:sticky !important;
  top:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  min-height:76px !important;
  padding:14px 16px !important;
  border:1px solid #bfd5e9 !important;
  border-bottom-color:#d0e0ee !important;
  border-radius:16px 16px 0 0 !important;
  background:linear-gradient(180deg,#fafdff,#e8f3fe) !important;
  box-shadow:0 10px 28px rgba(93,132,173,.12) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head b {
  display:block !important;
  color:#174a7a !important;
  font-size:20px !important;
  font-weight:850 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head span {
  display:block !important;
  margin-top:3px !important;
  color:#607991 !important;
  font-size:11px !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head .modal-close {
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  border:1px solid #b8cfe5 !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#ffffff,#edf5fc) !important;
  color:#315270 !important;
  box-shadow:0 5px 14px rgba(100,136,176,.11) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-body {
  display:grid !important;
  grid-template-columns:108px minmax(0,1fr) !important;
  gap:18px !important;
  padding:20px 18px !important;
  margin-top:0 !important;
  border-left:1px solid #d1e0ed !important;
  border-right:1px solid #d1e0ed !important;
  background:#ffffff !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-logo-pick.large {
  width:108px !important;
  min-width:108px !important;
  min-height:122px !important;
  padding:10px !important;
  border:1px dashed #84b6e4 !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#f8fcff,#eaf4ff) !important;
  color:#365a7c !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-logo-pick.large span {
  width:68px !important;
  height:68px !important;
  border-radius:14px !important;
  background:#08131f !important;
  overflow:hidden !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-logo-pick.large em {
  color:#4c6781 !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.07em !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields {
  display:grid !important;
  gap:8px !important;
  align-content:start !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields label {
  color:#4b6680 !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields input,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields textarea {
  border:1px solid #bfd4e8 !important;
  background:#fdfefe !important;
  color:#122c48 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields input:focus,
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-fields textarea:focus {
  border-color:#6fa8df !important;
  box-shadow:0 0 0 3px rgba(70,144,219,.11) !important;
  outline:none !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:9px !important;
  padding:0 18px 18px !important;
  margin-top:0 !important;
  border:1px solid #d1e0ed !important;
  border-top:0 !important;
  border-radius:0 0 16px 16px !important;
  background:#ffffff !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions .primary-btn {
  grid-column:1 / -1 !important;
  min-height:44px !important;
  background:linear-gradient(180deg,#4b9aef,#2f7fd5) !important;
  border-color:#337fd0 !important;
  color:#ffffff !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions .ghost-btn {
  min-height:42px !important;
  border:1px solid #bcd2e7 !important;
  background:linear-gradient(180deg,#ffffff,#eef5fc) !important;
  color:#244462 !important;
}
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions .danger-main-btn {
  min-height:42px !important;
  grid-column:auto !important;
  border-color:#e36b72 !important;
  background:linear-gradient(180deg,#fff4f4,#ffe5e6) !important;
  color:#b5262e !important;
}

@media (max-width:640px) {
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor {
    padding:10px !important;
  }
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head {
    min-height:64px !important;
    padding:10px 12px !important;
  }
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-head b { font-size:17px !important; }
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-body {
    grid-template-columns:82px minmax(0,1fr) !important;
    gap:11px !important;
    padding:14px 12px !important;
  }
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-logo-pick.large {
    width:82px !important;
    min-width:82px !important;
    min-height:104px !important;
    padding:7px !important;
  }
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-logo-pick.large span {
    width:56px !important;
    height:56px !important;
  }
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions {
    grid-template-columns:1fr !important;
    padding:0 12px 14px !important;
  }
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions .primary-btn,
  html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .club-profile-editor-actions .danger-main-btn { grid-column:1 !important; }
}

/* =====================================================================
   ChessMondo v8.9.13 — Light Social/Profile UI polish
   Public Profile + Friends/Invite/Chat + Follow Network + Leaderboard
   + Blocked Players + premium header identity.
   Dark mode remains unchanged.
   ===================================================================== */

/* Premium top-profile button: keep tier identity but make the light theme native. */
html[data-ui-theme="light"] .top-profile.premium-profile-button {
  background: linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%) !important;
  border: 1px solid color-mix(in srgb, var(--premium-a) 52%, #b9cce1) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--premium-a) 18%, transparent),
    0 10px 28px var(--premium-glow),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button::before {
  opacity: .72 !important;
  filter: saturate(1.32) brightness(1.08) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button::after {
  background:
    radial-gradient(circle at 18% 45%, var(--premium-soft), transparent 43%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,244,255,.96)) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button:hover {
  transform: translateY(-1px) !important;
  border-color: var(--premium-a) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--premium-a) 28%,transparent),
    0 12px 34px var(--premium-glow),
    0 0 22px color-mix(in srgb,var(--premium-a) 20%,transparent),
    inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button #topUsername,
html[data-ui-theme="light"] .top-profile.premium-profile-button .top-username,
html[data-ui-theme="light"] .top-profile.premium-profile-button .premium-name {
  color:#10243d !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 12px var(--premium-glow) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button .tp-premium-badge {
  background:rgba(255,255,255,.86) !important;
  color:#24364f !important;
  border-color:var(--premium-a) !important;
  box-shadow:0 0 14px var(--premium-glow) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button #topAvatar {
  box-shadow:0 0 18px var(--premium-glow),0 0 0 4px rgba(255,255,255,.82) !important;
}
/* A little extra tier clarity in dark mode too, without changing its base design. */
.top-profile.premium-profile-button:hover::before { opacity:.96; }

/* ---------- Shared social modal frame in Light Mode ---------- */
html[data-ui-theme="light"] #publicProfileModal .modal-card,
html[data-ui-theme="light"] #friendsModal .modal-card,
html[data-ui-theme="light"] #followNetworkModal .modal-card,
html[data-ui-theme="light"] #friendsLeaderboardModal .modal-card,
html[data-ui-theme="light"] #blockedUsersModal .modal-card {
  background:linear-gradient(180deg,#ffffff 0%,#f3f8fd 100%) !important;
  border:1px solid #bfd2e6 !important;
  box-shadow:0 24px 70px rgba(70,104,142,.22) !important;
  color:#10243c !important;
}
html[data-ui-theme="light"] #publicProfileModal .modal-header,
html[data-ui-theme="light"] #friendsModal .modal-header,
html[data-ui-theme="light"] #followNetworkModal .modal-header,
html[data-ui-theme="light"] #friendsLeaderboardModal .modal-header,
html[data-ui-theme="light"] #blockedUsersModal .modal-header {
  background:linear-gradient(180deg,#fbfdff,#eef6ff) !important;
  border-bottom:1px solid #d3e1ef !important;
  color:#172d48 !important;
}
html[data-ui-theme="light"] #publicProfileModal .modal-header span,
html[data-ui-theme="light"] #friendsModal .modal-header span,
html[data-ui-theme="light"] #followNetworkModal .modal-header span,
html[data-ui-theme="light"] #friendsLeaderboardModal .modal-header span,
html[data-ui-theme="light"] #blockedUsersModal .modal-header span {
  color:#172d48 !important;
}
html[data-ui-theme="light"] #publicProfileModal .modal-close,
html[data-ui-theme="light"] #friendsModal .modal-close,
html[data-ui-theme="light"] #followNetworkModal .modal-close,
html[data-ui-theme="light"] #friendsLeaderboardModal .modal-close,
html[data-ui-theme="light"] #blockedUsersModal .modal-close {
  background:linear-gradient(180deg,#ffffff,#edf5ff) !important;
  border:1px solid #c2d6e9 !important;
  color:#38526f !important;
  box-shadow:0 5px 14px rgba(90,126,166,.12) !important;
}
html[data-ui-theme="light"] #publicProfileModal .modal-close:hover,
html[data-ui-theme="light"] #friendsModal .modal-close:hover,
html[data-ui-theme="light"] #followNetworkModal .modal-close:hover,
html[data-ui-theme="light"] #friendsLeaderboardModal .modal-close:hover,
html[data-ui-theme="light"] #blockedUsersModal .modal-close:hover {
  background:#dceeff !important;
  color:#173b62 !important;
}

/* ---------- Public Profile ---------- */
html[data-ui-theme="light"] #publicProfileModal .public-profile-body {
  background:linear-gradient(180deg,#fbfdff,#f4f8fd) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-hero {
  border-color:#b8cee4 !important;
  background:
    radial-gradient(circle at 90% 15%,rgba(82,154,233,.16),transparent 36%),
    linear-gradient(135deg,#ffffff 0%,#eef6ff 62%,#e7f1fb 100%) !important;
  box-shadow:0 12px 28px rgba(90,127,168,.16),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-theme-gold {
  background:linear-gradient(135deg,#fffdf7,#fff5da 62%,#f4f8ff) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-theme-red {
  background:linear-gradient(135deg,#fffafb,#ffebee 62%,#eef6ff) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-theme-purple {
  background:linear-gradient(135deg,#fdfbff,#f3eaff 62%,#edf6ff) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media img {
  opacity:.34 !important;
  filter:saturate(1.12) contrast(.96) brightness(1.12) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media::after {
  background:
    linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(246,250,255,.82) 42%,rgba(236,246,255,.76) 100%),
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(233,243,255,.70)) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-main h3,
html[data-ui-theme="light"] #publicProfileModal .public-profile-main h3 .premium-name,
html[data-ui-theme="light"] #publicProfileModal .public-profile-main p {
  color:#10243c !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-main p { color:#526a84 !important; }
html[data-ui-theme="light"] #publicProfileModal .public-premium-profile {
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--public-tier-a) 36%,transparent),
    0 15px 36px rgba(71,108,148,.18),
    0 0 30px var(--public-tier-glow),
    inset 0 0 24px color-mix(in srgb,var(--public-tier-a) 14%,transparent) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-premium-orbit {
  opacity:.30 !important;
  mix-blend-mode:multiply !important;
  filter:blur(1px) saturate(1.35) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-premium-plan-chip {
  background:rgba(255,255,255,.84) !important;
  color:#16304c !important;
  box-shadow:0 0 16px var(--public-tier-glow),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-stats div {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border-color:#c6d9ec !important;
  box-shadow:0 5px 14px rgba(108,145,186,.08) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-stats b { color:#2f80ed !important; }
html[data-ui-theme="light"] #publicProfileModal .public-profile-stats span { color:#667b91 !important; }
html[data-ui-theme="light"] #publicProfileModal .public-profile-record,
html[data-ui-theme="light"] #publicProfileModal .public-profile-theme-note {
  background:linear-gradient(180deg,#edf6ff,#e3f0fc) !important;
  border:1px solid #bed5eb !important;
  color:#3f5873 !important;
}
html[data-ui-theme="light"] #publicProfileModal .profile-social-btn {
  background:linear-gradient(180deg,#ffffff,#edf5ff) !important;
  border-color:#c1d7ec !important;
  color:#183653 !important;
  box-shadow:0 6px 16px rgba(101,139,181,.09) !important;
}
html[data-ui-theme="light"] #publicProfileModal .profile-social-btn.follow.active {
  background:linear-gradient(180deg,#e8f4ff,#d8ebff) !important;
  color:#15518b !important;
}
html[data-ui-theme="light"] #publicProfileModal .profile-social-btn.like.active {
  background:linear-gradient(180deg,#fff1f3,#ffe5e8) !important;
  color:#a83a48 !important;
}
html[data-ui-theme="light"] #publicProfileModal .profile-social-btn small { color:#6e8195 !important; }
html[data-ui-theme="light"] #publicProfileModal .public-profile-extra-title { color:#5a7088 !important; }
html[data-ui-theme="light"] #publicProfileModal .showcase-badge {
  background:linear-gradient(180deg,#ffffff,#edf5ff) !important;
  border-color:#c5d8eb !important;
  box-shadow:0 6px 16px rgba(108,145,186,.08) !important;
}
html[data-ui-theme="light"] #publicProfileModal .showcase-badge.unlocked {
  border-color:#d9bc69 !important;
  background:linear-gradient(180deg,#fffdf7,#fff7df) !important;
  box-shadow:0 0 18px rgba(210,153,34,.12),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #publicProfileModal .showcase-badge small { color:#425a72 !important; }
html[data-ui-theme="light"] #publicProfileModal .rank-card {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border-color:#c4d8ec !important;
  box-shadow:0 7px 18px rgba(108,145,186,.09) !important;
}
html[data-ui-theme="light"] #publicProfileModal .rank-card-head { color:#17314e !important; }
html[data-ui-theme="light"] #publicProfileModal .rank-progress-track {
  background:#dfe9f3 !important;
  border-color:#c8d7e7 !important;
}
html[data-ui-theme="light"] #publicProfileModal .rank-progress-note { color:#687e94 !important; }
html[data-ui-theme="light"] #publicProfileModal .rating-graph-card {
  background:
    radial-gradient(circle at top left,rgba(47,129,247,.10),transparent 48%),
    linear-gradient(180deg,#ffffff,#eef5fc) !important;
  border-color:#c6d9eb !important;
}
html[data-ui-theme="light"] #publicProfileModal .rating-graph-meta { color:#657b91 !important; }
html[data-ui-theme="light"] #publicProfileModal .rating-graph-meta b { color:#18344f !important; }
html[data-ui-theme="light"] #publicProfileModal .public-profile-safety-actions .profile-safety-link { color:#5f7287 !important; }

/* ---------- Friends modal / invite panel ---------- */
html[data-ui-theme="light"] #friendsModal .friends-tabs {
  background:linear-gradient(180deg,#f8fbff,#eef6ff) !important;
  border-bottom-color:#d0dfed !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab { color:#536b84 !important; }
html[data-ui-theme="light"] #friendsModal .friends-tab.active {
  color:#15395f !important;
  border-bottom-color:#3688df !important;
  background:rgba(47,128,237,.08) !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab:hover:not(.active) { color:#174a79 !important; }
html[data-ui-theme="light"] #friendsModal .friends-panel { background:#f8fbff !important; }
html[data-ui-theme="light"] #friendsModal .friend-item,
html[data-ui-theme="light"] #friendsModal .friends-profile-strip,
html[data-ui-theme="light"] #friendsModal .friend-invite-setup {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border-color:#c4d9ed !important;
  box-shadow:0 6px 16px rgba(98,137,181,.08) !important;
}
html[data-ui-theme="light"] #friendsModal .friend-name,
html[data-ui-theme="light"] #friendsModal .friend-invite-title,
html[data-ui-theme="light"] #friendsModal .friends-add-label { color:#18344f !important; }
html[data-ui-theme="light"] #friendsModal .friend-meta,
html[data-ui-theme="light"] #friendsModal .friends-profile-info p,
html[data-ui-theme="light"] #friendsModal .friend-invite-grid label,
html[data-ui-theme="light"] #friendsModal .friends-loading,
html[data-ui-theme="light"] #friendsModal .friends-empty { color:#667c92 !important; }
html[data-ui-theme="light"] #friendsModal .friend-action-btn,
html[data-ui-theme="light"] #friendsModal .friend-image-edit-btn,
html[data-ui-theme="light"] #friendsModal .friends-link-row button,
html[data-ui-theme="light"] #friendsModal .friends-search-row button {
  background:linear-gradient(180deg,#ffffff,#eaf4ff) !important;
  border-color:#bdd5eb !important;
  color:#1a3b5c !important;
}
html[data-ui-theme="light"] #friendsModal .friend-action-btn.accept {
  background:linear-gradient(180deg,#effbf4,#e3f5eb) !important;
  border-color:#9ed2b4 !important;
  color:#1e6a43 !important;
}
html[data-ui-theme="light"] #friendsModal .friends-search-row input,
html[data-ui-theme="light"] #friendsModal .friends-link-row input,
html[data-ui-theme="light"] #friendsModal .friend-invite-grid select {
  background:#ffffff !important;
  border-color:#bfd5ea !important;
  color:#17324f !important;
}
html[data-ui-theme="light"] #friendsModal .friends-search-row input::placeholder,
html[data-ui-theme="light"] #friendsModal .friends-link-row input::placeholder { color:#7890a7 !important; }

/* ---------- Full friend chat ---------- */
html[data-ui-theme="light"] #friendChatScreen.friend-chat-screen {
  background:radial-gradient(circle at top left,rgba(75,151,234,.14),transparent 38%),rgba(233,241,249,.93) !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-shell {
  background:linear-gradient(180deg,#ffffff,#eef6fd) !important;
  border-color:#aec9e3 !important;
  box-shadow:0 26px 70px rgba(66,101,141,.22),inset 0 0 34px rgba(88,166,255,.05) !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-screen-header,
html[data-ui-theme="light"] #friendChatScreen .friend-chat-picker-zone,
html[data-ui-theme="light"] #friendChatScreen .friend-chat-compose {
  background:linear-gradient(180deg,#fbfdff,#edf6ff) !important;
  border-color:#d1e0ef !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-title { color:#152f4b !important; }
html[data-ui-theme="light"] #friendChatScreen .friend-chat-subtitle { color:#657b91 !important; }
html[data-ui-theme="light"] #friendChatScreen .friend-chat-subtitle.online { color:#1d8b4f !important; }
html[data-ui-theme="light"] #friendChatScreen .friend-chat-back,
html[data-ui-theme="light"] #friendChatScreen .friend-chat-close-screen,
html[data-ui-theme="light"] #friendChatScreen .friend-chat-tools-row button {
  background:linear-gradient(180deg,#ffffff,#ebf4ff) !important;
  border:1px solid #c0d6eb !important;
  color:#173754 !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-messages {
  background:
    linear-gradient(rgba(240,247,253,.92),rgba(240,247,253,.92)),
    radial-gradient(circle at 20% 20%,rgba(88,166,255,.12),transparent 26%),
    radial-gradient(circle at 80% 80%,rgba(46,160,67,.07),transparent 28%) !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-bubble {
  background:#ffffff !important;
  border-color:#cbdced !important;
  color:#17314d !important;
  box-shadow:0 7px 16px rgba(88,124,166,.10) !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-msg.mine .friend-chat-bubble {
  background:linear-gradient(135deg,#d8efff,#c5e3ff) !important;
  border-color:#94bee7 !important;
  color:#11355a !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-time { color:#6c8298 !important; }
html[data-ui-theme="light"] #friendChatScreen .friend-chat-compose textarea {
  background:#ffffff !important;
  border-color:#b8d2e9 !important;
  color:#183451 !important;
}
html[data-ui-theme="light"] #friendChatScreen .friend-chat-compose textarea::placeholder { color:#8298ad !important; }
html[data-ui-theme="light"] #friendChatScreen .friend-chat-bottom { color:#6c8197 !important; }
html[data-ui-theme="light"] #friendChatScreen .friend-chat-bottom button {
  background:linear-gradient(180deg,#3e9bec,#287ed0) !important;
  color:#ffffff !important;
  box-shadow:0 7px 18px rgba(47,128,237,.22) !important;
}

/* ---------- Followers & Following ---------- */
html[data-ui-theme="light"] #followNetworkModal .follow-tabs {
  background:linear-gradient(180deg,#f8fbff,#edf6ff) !important;
  border-bottom-color:#d0e0ef !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-tabs button {
  background:linear-gradient(180deg,#ffffff,#eef5ff) !important;
  border-color:#c0d6eb !important;
  color:#29445f !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-tabs button.active {
  background:linear-gradient(180deg,#dceeff,#c8e3ff) !important;
  border-color:#79ade0 !important;
  color:#164a7b !important;
  box-shadow:0 7px 18px rgba(47,129,247,.12) !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-network-body { background:#f8fbff !important; }
html[data-ui-theme="light"] #followNetworkModal .follow-network-row {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border-color:#c4d9ec !important;
  box-shadow:0 6px 16px rgba(93,132,176,.08) !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-network-row:hover {
  border-color:#8fb8df !important;
  background:linear-gradient(180deg,#fafdff,#e4f1ff) !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-network-info b { color:#17324f !important; }
html[data-ui-theme="light"] #followNetworkModal .follow-network-info span { color:#667c92 !important; }
html[data-ui-theme="light"] #followNetworkModal .follow-row-action {
  background:linear-gradient(180deg,#eff7ff,#dfefff) !important;
  border-color:#9fc3e5 !important;
  color:#174f83 !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-row-action.unfollow {
  background:linear-gradient(180deg,#fff4f5,#ffe7e9) !important;
  border-color:#e6a6ad !important;
  color:#9d3541 !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-empty-card,
html[data-ui-theme="light"] #followNetworkModal .global-empty {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border:1px dashed #b7cee4 !important;
  color:#617990 !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-empty-card b { color:#17324f !important; }
html[data-ui-theme="light"] #followNetworkModal .follow-empty-card span { color:#72879c !important; }

/* ---------- Friends Leaderboard ---------- */
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-leaderboard-body { background:#f8fbff !important; }
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-row {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border-color:#c4d9ec !important;
  box-shadow:0 6px 16px rgba(94,133,177,.08) !important;
}
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-row:hover {
  background:linear-gradient(180deg,#fafdff,#e2f0ff) !important;
  border-color:#8cb7df !important;
}
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-row.me {
  border-color:#72a9df !important;
  background:linear-gradient(180deg,#edf7ff,#dceeff) !important;
  box-shadow:0 0 22px rgba(47,129,247,.13) !important;
}
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-info b,
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-info b .premium-name { color:#17324f !important; text-shadow:none !important; }
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-info span { color:#687e94 !important; }
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-score { color:#b47e0c !important; }
html[data-ui-theme="light"] #friendsLeaderboardModal .you-chip { color:#1d67a9 !important; background:#e3f1ff !important; }

/* ---------- Blocked Players ---------- */
html[data-ui-theme="light"] #blockedUsersModal .blocked-users-body { background:#f8fbff !important; }
html[data-ui-theme="light"] #blockedUsersModal .blocked-user-row {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border-color:#c4d8eb !important;
  box-shadow:0 6px 16px rgba(94,133,177,.08) !important;
}
html[data-ui-theme="light"] #blockedUsersModal .blocked-user-row b { color:#17324f !important; }
html[data-ui-theme="light"] #blockedUsersModal .blocked-user-row small { color:#687e94 !important; }
html[data-ui-theme="light"] #blockedUsersModal .blocked-user-row button {
  background:linear-gradient(180deg,#ffffff,#e8f3ff) !important;
  border-color:#a8c7e5 !important;
  color:#173b61 !important;
}
html[data-ui-theme="light"] #blockedUsersModal .blocked-user-row button:hover {
  background:#dcedff !important;
  border-color:#72a8d9 !important;
}
html[data-ui-theme="light"] #blockedUsersModal .global-empty {
  background:linear-gradient(180deg,#ffffff,#edf6ff) !important;
  border:1px dashed #b8cee4 !important;
  color:#617990 !important;
  border-radius:14px !important;
}

@media (max-width:640px) {
  html[data-ui-theme="light"] #friendChatScreen .friend-chat-shell { height:100dvh !important; }
  html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-row {
    grid-template-columns:34px 44px minmax(0,1fr) auto !important;
    gap:8px !important;
    padding:9px !important;
  }
  html[data-ui-theme="light"] #publicProfileModal .public-profile-hero {
    background:linear-gradient(180deg,#ffffff,#eaf4ff) !important;
  }
}


/* =====================================================================
   ChessMondo v8.9.15 — Public Profile Banner + Friends Tabs + Rewards
   ===================================================================== */

/* Public Profile banners in Light Mode: keep uploaded invite/chat image natural and visible. */
html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media img,
body[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media img {
  opacity:.78 !important;
  filter:saturate(1.10) contrast(1.05) brightness(1.035) !important;
  transform:scale(1.01) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media::after,
body[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media::after {
  background:
    linear-gradient(90deg,rgba(255,255,255,.28) 0%,rgba(248,251,255,.18) 42%,rgba(236,246,255,.12) 100%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(232,243,255,.16)) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-hero.has-public-profile-banner,
body[data-ui-theme="light"] #publicProfileModal .public-profile-hero.has-public-profile-banner {
  box-shadow:0 13px 30px rgba(78,116,158,.18),inset 0 1px 0 rgba(255,255,255,.94) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-hero.has-public-profile-banner .public-profile-main,
body[data-ui-theme="light"] #publicProfileModal .public-profile-hero.has-public-profile-banner .public-profile-main {
  background:rgba(255,255,255,.70) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 8px 22px rgba(66,99,139,.12) !important;
  backdrop-filter:blur(5px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(5px) saturate(1.08) !important;
}

/* Friends tabs: same rounded geometry in Dark and Light modes. */
#friendsModal .friends-tabs {
  margin:7px 7px 0 !important;
  padding:4px !important;
  gap:5px !important;
  border:1px solid #263a50 !important;
  border-radius:15px !important;
  overflow:hidden !important;
  background:#0d1723 !important;
}
#friendsModal .friends-tab {
  min-height:39px !important;
  padding:8px 7px !important;
  border:1px solid transparent !important;
  border-radius:11px !important;
  color:#9aa9b8 !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease !important;
}
#friendsModal .friends-tab.active {
  color:#f4f8fc !important;
  background:linear-gradient(180deg,#192a3c,#142335) !important;
  border-color:#3c84c9 !important;
  box-shadow:inset 0 0 0 1px rgba(78,153,230,.12) !important;
}
#friendsModal .friends-tab:hover:not(.active) {
  color:#e8f1fa !important;
  background:#142131 !important;
  border-color:#2c435b !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tabs,
body[data-ui-theme="light"] #friendsModal .friends-tabs {
  background:linear-gradient(180deg,#f8fbff,#edf5fd) !important;
  border-color:#c4d8eb !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab,
body[data-ui-theme="light"] #friendsModal .friends-tab {
  color:#38536f !important;
  background:linear-gradient(180deg,#ffffff,#f4f8fc) !important;
  border-color:#e2ebf4 !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab.active,
body[data-ui-theme="light"] #friendsModal .friends-tab.active {
  color:#164b7c !important;
  background:linear-gradient(180deg,#e5f2ff,#d4eaff) !important;
  border-color:#7fb2e4 !important;
  box-shadow:0 5px 14px rgba(47,128,237,.10),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab:hover:not(.active),
body[data-ui-theme="light"] #friendsModal .friends-tab:hover:not(.active) {
  color:#16476f !important;
  background:linear-gradient(180deg,#fafdff,#eaf4ff) !important;
  border-color:#b8d1e8 !important;
}

/* Daily Rewards launcher — Light Mode. */
html[data-ui-theme="light"] .daily-rewards-btn,
body[data-ui-theme="light"] .daily-rewards-btn {
  background:linear-gradient(180deg,#ffffff,#edf5ff) !important;
  border:1px solid #bfd4e9 !important;
  color:#193958 !important;
  box-shadow:0 7px 18px rgba(91,130,173,.11),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .daily-rewards-btn::after,
body[data-ui-theme="light"] .daily-rewards-btn::after { color:#193958 !important; }
html[data-ui-theme="light"] .daily-rewards-btn:hover,
body[data-ui-theme="light"] .daily-rewards-btn:hover {
  background:linear-gradient(180deg,#f8fcff,#dceeff) !important;
  border-color:#83b2df !important;
  color:#123e68 !important;
  box-shadow:0 9px 22px rgba(47,128,237,.14),inset 0 1px 0 #fff !important;
}

/* Daily Login & Mystery Box — complete Light Mode refresh. */
html[data-ui-theme="light"] .rewards-modal-overlay,
body[data-ui-theme="light"] .rewards-modal-overlay {
  background:rgba(76,96,120,.28) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
html[data-ui-theme="light"] .rewards-card,
html[data-ui-theme="light"] .rewards-card.rewards-card-wide,
body[data-ui-theme="light"] .rewards-card,
body[data-ui-theme="light"] .rewards-card.rewards-card-wide {
  border:1px solid #b8cee4 !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(251,191,36,.12),transparent 31%),
    radial-gradient(circle at 88% 9%,rgba(47,129,247,.12),transparent 33%),
    linear-gradient(180deg,#ffffff 0%,#f3f8fd 100%) !important;
  color:#132b46 !important;
  box-shadow:0 30px 90px rgba(62,88,119,.30),0 0 0 1px rgba(255,255,255,.75) inset !important;
}
html[data-ui-theme="light"] .rewards-kicker,
body[data-ui-theme="light"] .rewards-kicker { color:#b37b05 !important; }
html[data-ui-theme="light"] .rewards-head h2,
body[data-ui-theme="light"] .rewards-head h2 { color:#122a45 !important; }
html[data-ui-theme="light"] .rewards-head .settings-close,
body[data-ui-theme="light"] .rewards-head .settings-close {
  background:linear-gradient(180deg,#ffffff,#edf5ff) !important;
  border:1px solid #bfd4e8 !important;
  color:#38536f !important;
  box-shadow:0 5px 14px rgba(90,126,166,.12) !important;
}
html[data-ui-theme="light"] .rewards-head .settings-close:hover,
body[data-ui-theme="light"] .rewards-head .settings-close:hover {
  background:#deefff !important;
  border-color:#8cb8df !important;
  color:#153f68 !important;
}
html[data-ui-theme="light"] .daily-claim-card,
body[data-ui-theme="light"] .daily-claim-card {
  border-color:#9ed3b4 !important;
  background:linear-gradient(135deg,#effbf4,#e4f6ec) !important;
  box-shadow:0 5px 14px rgba(41,135,79,.08) !important;
}
html[data-ui-theme="light"] .daily-claim-card b,
body[data-ui-theme="light"] .daily-claim-card b { color:#196f42 !important; }
html[data-ui-theme="light"] .daily-claim-card span,
body[data-ui-theme="light"] .daily-claim-card span { color:#4f6e5e !important; }
html[data-ui-theme="light"] .reward-stat,
body[data-ui-theme="light"] .reward-stat {
  border:1px solid #c3d7ea !important;
  background:linear-gradient(180deg,#ffffff,#edf5fd) !important;
  box-shadow:0 6px 16px rgba(95,133,176,.08),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .reward-stat b,
body[data-ui-theme="light"] .reward-stat b { color:#398bf0 !important; }
html[data-ui-theme="light"] .reward-stat.mystery b,
body[data-ui-theme="light"] .reward-stat.mystery b { color:#e1a400 !important; }
html[data-ui-theme="light"] .reward-stat span,
body[data-ui-theme="light"] .reward-stat span { color:#6b7f94 !important; }
html[data-ui-theme="light"] .reward-tabs,
body[data-ui-theme="light"] .reward-tabs {
  border:1px solid #bdd3e8 !important;
  background:linear-gradient(180deg,#eaf4ff,#ddeeff) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-ui-theme="light"] .reward-tabs button,
body[data-ui-theme="light"] .reward-tabs button {
  border:1px solid #c8daec !important;
  background:linear-gradient(180deg,#ffffff,#f2f7fc) !important;
  color:#344d67 !important;
  box-shadow:0 4px 10px rgba(94,132,175,.06) !important;
}
html[data-ui-theme="light"] .reward-tabs button:hover,
body[data-ui-theme="light"] .reward-tabs button:hover {
  background:linear-gradient(180deg,#f8fcff,#e7f2ff) !important;
  border-color:#9dc0e2 !important;
  color:#174a79 !important;
}
html[data-ui-theme="light"] .reward-tabs button.active,
body[data-ui-theme="light"] .reward-tabs button.active {
  background:linear-gradient(180deg,#dfefff,#cbe5ff) !important;
  border-color:#74a9dc !important;
  color:#15518a !important;
  box-shadow:0 7px 18px rgba(47,129,247,.13),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #rewardTabBody,
body[data-ui-theme="light"] #rewardTabBody {
  color:#17314e !important;
  scrollbar-color:#88afd5 #e7f0f9 !important;
}
html[data-ui-theme="light"] .mystery-box-zone,
html[data-ui-theme="light"] .mystery-box-zone.upgraded,
body[data-ui-theme="light"] .mystery-box-zone,
body[data-ui-theme="light"] .mystery-box-zone.upgraded {
  border:1px solid #bfd6eb !important;
  background:
    radial-gradient(circle at 9% 50%,rgba(251,191,36,.10),transparent 28%),
    linear-gradient(135deg,#ffffff,#edf6ff) !important;
  box-shadow:0 10px 25px rgba(88,125,168,.10) !important;
}
html[data-ui-theme="light"] .mystery-box-art,
body[data-ui-theme="light"] .mystery-box-art {
  background:radial-gradient(circle,#fff2bd 0%,#f7e3ff 50%,#deefff 100%) !important;
  box-shadow:inset 0 0 22px rgba(255,255,255,.8),0 8px 22px rgba(180,134,31,.14) !important;
}
html[data-ui-theme="light"] .mystery-box-zone h3,
body[data-ui-theme="light"] .mystery-box-zone h3 { color:#17324e !important; }
html[data-ui-theme="light"] .mystery-box-zone p,
body[data-ui-theme="light"] .mystery-box-zone p { color:#60778e !important; }
html[data-ui-theme="light"] .mystery-box-zone .primary-btn,
body[data-ui-theme="light"] .mystery-box-zone .primary-btn {
  background:linear-gradient(180deg,#3d91e5,#2f7dca) !important;
  border:1px solid #2c72b8 !important;
  color:#ffffff !important;
  box-shadow:0 8px 20px rgba(47,128,237,.18) !important;
}
html[data-ui-theme="light"] .mystery-box-zone .primary-btn:disabled,
body[data-ui-theme="light"] .mystery-box-zone .primary-btn:disabled {
  background:linear-gradient(180deg,#d8e5f1,#cbd9e7) !important;
  border-color:#bacbdd !important;
  color:#788ba0 !important;
  box-shadow:none !important;
}
html[data-ui-theme="light"] .reward-customize-head,
body[data-ui-theme="light"] .reward-customize-head {
  border:1px solid #bcd4ea !important;
  background:linear-gradient(180deg,#eef7ff,#e1effc) !important;
  box-shadow:0 6px 16px rgba(94,133,176,.08) !important;
}
html[data-ui-theme="light"] .reward-customize-head b,
body[data-ui-theme="light"] .reward-customize-head b { color:#17314d !important; }
html[data-ui-theme="light"] .reward-customize-head span,
body[data-ui-theme="light"] .reward-customize-head span { color:#667d93 !important; }
html[data-ui-theme="light"] .reward-disable-actions button,
html[data-ui-theme="light"] .reward-equip-btn,
body[data-ui-theme="light"] .reward-disable-actions button,
body[data-ui-theme="light"] .reward-equip-btn {
  border:1px solid #bcd3e9 !important;
  background:linear-gradient(180deg,#ffffff,#edf5fd) !important;
  color:#25415d !important;
  box-shadow:0 4px 11px rgba(94,133,176,.06) !important;
}
html[data-ui-theme="light"] .reward-disable-actions button:hover,
html[data-ui-theme="light"] .reward-equip-btn:hover,
body[data-ui-theme="light"] .reward-disable-actions button:hover,
body[data-ui-theme="light"] .reward-equip-btn:hover {
  border-color:#83b0dd !important;
  background:linear-gradient(180deg,#f8fcff,#e0efff) !important;
  color:#154d7d !important;
}
html[data-ui-theme="light"] .reward-customize-panel h4,
body[data-ui-theme="light"] .reward-customize-panel h4 { color:#9b6a05 !important; }
html[data-ui-theme="light"] .reward-item-card,
body[data-ui-theme="light"] .reward-item-card {
  border:1px solid #c7d9ea !important;
  background:linear-gradient(180deg,#ffffff,#f1f6fb) !important;
  box-shadow:0 6px 16px rgba(91,129,173,.07) !important;
}
html[data-ui-theme="light"] .reward-item-card.rarity-rare,
body[data-ui-theme="light"] .reward-item-card.rarity-rare {
  background:linear-gradient(135deg,#eaf4ff,#f8fbff) !important;
  border-color:#b8d2ee !important;
}
html[data-ui-theme="light"] .reward-item-card.rarity-epic,
body[data-ui-theme="light"] .reward-item-card.rarity-epic {
  background:linear-gradient(135deg,#f4edff,#f9fbff) !important;
  border-color:#d5c1ef !important;
}
html[data-ui-theme="light"] .reward-item-card.rarity-legendary,
body[data-ui-theme="light"] .reward-item-card.rarity-legendary {
  background:linear-gradient(135deg,#fff8df,#f8fbff) !important;
  border-color:#e7d193 !important;
}
html[data-ui-theme="light"] .reward-item-card.active,
body[data-ui-theme="light"] .reward-item-card.active {
  border-color:#72c591 !important;
  box-shadow:0 0 0 1px rgba(56,178,103,.10),0 7px 20px rgba(46,160,67,.10) !important;
}
html[data-ui-theme="light"] .reward-item-icon,
body[data-ui-theme="light"] .reward-item-icon {
  background:linear-gradient(180deg,#edf4fb,#e1edf8) !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .reward-item-body b,
body[data-ui-theme="light"] .reward-item-body b { color:#172f4a !important; }
html[data-ui-theme="light"] .reward-item-body span,
body[data-ui-theme="light"] .reward-item-body span { color:#637a90 !important; }
html[data-ui-theme="light"] .reward-equip-btn.active,
body[data-ui-theme="light"] .reward-equip-btn.active {
  background:linear-gradient(180deg,#6ee68a,#55d677) !important;
  border-color:#46be68 !important;
  color:#123920 !important;
}
html[data-ui-theme="light"] .reward-empty,
body[data-ui-theme="light"] .reward-empty {
  border-color:#bdcee0 !important;
  background:linear-gradient(180deg,#ffffff,#f0f6fc) !important;
  color:#637b92 !important;
}
html[data-ui-theme="light"] .reward-history-row,
body[data-ui-theme="light"] .reward-history-row {
  border:1px solid #c7d9ea !important;
  background:linear-gradient(180deg,#ffffff,#f1f6fb) !important;
  box-shadow:0 6px 16px rgba(91,129,173,.07) !important;
}
html[data-ui-theme="light"] .reward-history-row.rarity-daily,
body[data-ui-theme="light"] .reward-history-row.rarity-daily {
  border-color:#9ed0b2 !important;
  background:linear-gradient(180deg,#f3fcf6,#e9f8ef) !important;
}
html[data-ui-theme="light"] .reward-history-row.rarity-legendary,
body[data-ui-theme="light"] .reward-history-row.rarity-legendary {
  border-color:#e2c978 !important;
  background:linear-gradient(180deg,#fffaf0,#fff4d6) !important;
}
html[data-ui-theme="light"] .reward-history-icon,
body[data-ui-theme="light"] .reward-history-icon {
  background:linear-gradient(180deg,#edf5fc,#e1edf8) !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .reward-history-row b,
body[data-ui-theme="light"] .reward-history-row b { color:#17304b !important; }
html[data-ui-theme="light"] .reward-history-row span,
body[data-ui-theme="light"] .reward-history-row span { color:#62798f !important; }
html[data-ui-theme="light"] .reward-history-row small,
body[data-ui-theme="light"] .reward-history-row small { color:#72869a !important; }
html[data-ui-theme="light"] .reward-prize,
body[data-ui-theme="light"] .reward-prize {
  border-color:#b7d0e8 !important;
  background:linear-gradient(135deg,#edf6ff,#fff6df) !important;
  color:#17324f !important;
}
html[data-ui-theme="light"] .reward-prize-icon,
body[data-ui-theme="light"] .reward-prize-icon {
  background:linear-gradient(180deg,#ffffff,#eaf2fa) !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .reward-prize.big small,
body[data-ui-theme="light"] .reward-prize.big small { color:#657b91 !important; }
html[data-ui-theme="light"] .reward-opening,
body[data-ui-theme="light"] .reward-opening { color:#a96f00 !important; }
html[data-ui-theme="light"] .reward-error,
body[data-ui-theme="light"] .reward-error { color:#b73c46 !important; }

@media (max-width:640px) {
  html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media img,
  body[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media img {
    opacity:.82 !important;
    filter:saturate(1.08) contrast(1.04) brightness(1.035) !important;
  }
  #friendsModal .friends-tabs { margin:6px !important; padding:3px !important; gap:4px !important; border-radius:14px !important; }
  #friendsModal .friends-tab { min-height:37px !important; border-radius:10px !important; font-size:12px !important; }
}

/* =====================================================================
   ChessMondo 8.10.3 — Global Language Update / Groups 1 + 2 + 3
   40-language selector: five columns on web, internal scroll on mobile.
   ===================================================================== */
.language-selector-panel {
  width: min(900px, calc(100vw - 44px));
  max-height: min(760px, calc(100dvh - 44px));
}
.language-selector-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 22px 22px;
  max-height: calc(100dvh - 158px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(87,164,255,.56) rgba(12,22,33,.36);
  touch-action: pan-y;
}
.language-selector-grid::-webkit-scrollbar { width: 8px; }
.language-selector-grid::-webkit-scrollbar-track {
  background: rgba(12,22,33,.34);
  border-radius: 999px;
}
.language-selector-grid::-webkit-scrollbar-thumb {
  background: rgba(87,164,255,.48);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.language-selector-grid::-webkit-scrollbar-thumb:hover { background: rgba(87,164,255,.68); background-clip: padding-box; }
.language-option-native {
  direction: auto;
  unicode-bidi: plaintext;
}
.language-option-english {
  direction: ltr;
  unicode-bidi: plaintext;
}

@media (max-width: 820px) {
  .language-selector-panel { width: min(650px, calc(100vw - 28px)); }
  .language-selector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 640px) {
  .language-selector-overlay {
    align-items: center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }
  .language-selector-panel {
    width: min(520px, calc(100vw - 20px));
    height: min(720px, calc(100dvh - 20px));
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .language-selector-head {
    flex: 0 0 auto;
    padding: 17px 15px 10px;
  }
  .language-selector-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
  }
  .language-option {
    min-height: 88px;
    scroll-margin-block: 10px;
  }
}

/* Persian and Hebrew join Arabic as RTL-script languages without mirroring app geometry. */
html[data-chessmondo-language="fa"] .language-selector-panel,
html[data-chessmondo-language="fa"] .modal-card,
html[data-chessmondo-language="fa"] .game-menu-card,
html[data-chessmondo-language="he"] .language-selector-panel,
html[data-chessmondo-language="he"] .modal-card,
html[data-chessmondo-language="he"] .game-menu-card,
html[data-chessmondo-language="ur"] .language-selector-panel,
html[data-chessmondo-language="ur"] .modal-card,
html[data-chessmondo-language="ur"] .game-menu-card {
  unicode-bidi: plaintext;
}

/* =====================================================================
   ChessMondo 8.10.3 — Square 40-language selector cards
   Keeps the 5-column desktop / 2-column mobile layout while switching
   the language buttons from rectangles to clean 1:1 square cards.
   ===================================================================== */
@media (min-width: 821px) {
  .language-selector-panel {
    width: min(900px, calc(100vw - 44px));
  }
  .language-selector-head {
    padding: 17px 22px 11px;
  }
  .language-selector-grid {
    gap: 8px;
    padding: 8px 22px 18px;
  }
  .language-option {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 12px 8px;
    border-radius: 14px;
    gap: 4px;
    justify-content: center;
  }
  .language-option-flag {
    width: 27px;
    height: 27px;
    margin-bottom: 1px;
    font-size: 19px;
  }
  .language-option-native {
    font-size: 14px;
    line-height: 1.08;
  }
  .language-option-english {
    font-size: 10.5px;
    line-height: 1.05;
  }
  .language-option-check {
    top: 6px;
    right: 6px;
    width: 17px;
    height: 17px;
    font-size: 10px;
  }
}

@media (max-width: 640px) {
  .language-option {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 10px 6px;
    gap: 4px;
    justify-content: center;
  }
  .language-option-flag {
    width: 27px;
    height: 27px;
    margin-bottom: 1px;
    font-size: 19px;
  }
  .language-option-native { font-size: 13.5px; line-height: 1.08; }
  .language-option-english { font-size: 10.5px; line-height: 1.05; }
  .language-option-check {
    top: 6px;
    right: 6px;
    width: 17px;
    height: 17px;
    font-size: 10px;
  }
}


/* =====================================================================
   ChessMondo 8.10.3 — HARD 1:1 LANGUAGE CARD GEOMETRY
   Final cascade guard: every language card is a true square at every
   breakpoint (desktop, tablet and mobile). No rectangular cards.
   ===================================================================== */
.language-selector-grid .language-option {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
}


/* =====================================================================
   ChessMondo 8.10.5 — Group 3 Full Language Integration + Compact 1:1 Cards
   The old compact rectangle was roughly 2:1. Instead of doubling its
   height to make a square, this update halves the horizontal footprint:
   compact ~80px 1:1 cards on desktop, with flag + native name + English
   name always visible. Final cascade guard for all 40 languages.
   ===================================================================== */
.language-selector-panel {
  width: min(940px, calc(100vw - 36px)) !important;
  height: auto !important;
  max-height: min(760px, calc(100dvh - 36px)) !important;
}
.language-selector-head {
  padding: 15px 22px 9px !important;
}
.language-selector-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 7px 22px 18px !important;
  max-height: calc(100dvh - 128px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
}
.language-selector-grid .language-option {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: 7px 4px 6px !important;
  gap: 1px !important;
  border-radius: 11px !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.language-selector-grid .language-option-flag {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 0 2px !important;
  font-size: 17px !important;
  flex: 0 0 24px !important;
}
.language-selector-grid .language-option-native {
  display: block !important;
  width: 100% !important;
  min-height: 13px !important;
  font-size: 11.5px !important;
  line-height: 1.04 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.language-selector-grid .language-option-english {
  display: block !important;
  width: 100% !important;
  min-height: 10px !important;
  font-size: 9px !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.language-selector-grid .language-option-check {
  top: 4px !important;
  right: 4px !important;
  width: 15px !important;
  height: 15px !important;
  font-size: 9px !important;
}

@media (max-width: 820px) {
  .language-selector-panel {
    width: min(680px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
  }
  .language-selector-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 7px 14px 16px !important;
    max-height: calc(100dvh - 122px) !important;
  }
}

@media (max-width: 640px) {
  .language-selector-panel {
    width: min(520px, calc(100vw - 16px)) !important;
    height: min(760px, calc(100dvh - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .language-selector-head {
    padding: 13px 12px 8px !important;
  }
  .language-selector-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px 10px calc(14px + env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
  .language-selector-grid .language-option {
    padding: 6px 3px 5px !important;
    border-radius: 10px !important;
  }
  .language-selector-grid .language-option-flag {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-basis: 22px !important;
  }
  .language-selector-grid .language-option-native { font-size: 10.8px !important; }
  .language-selector-grid .language-option-english { font-size: 8.5px !important; }
}

@media (max-width: 360px) {
  .language-selector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 8.10.4 text-fit guard — keep all three card elements visible. */
.language-selector-grid .language-option-native,
.language-selector-grid .language-option-english {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center !important;
}
.language-selector-grid .language-option-native {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  max-height: 23px !important;
}
.language-selector-grid .language-option-english {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  max-height: 19px !important;
}


/* =====================================================================
   ChessMondo 8.10.7 — MOBILE-ONLY LANGUAGE SELECTOR FIT FIX
   Scope is intentionally limited to the language selector below 640px.
   Desktop/tablet language UI and every non-language UI component are untouched.
   ===================================================================== */
@media (max-width: 640px) {
  .language-selector-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: max-content !important;
    column-gap: 5px !important;
    row-gap: 5px !important;
    padding: 6px 8px calc(12px + env(safe-area-inset-bottom)) !important;
    align-items: start !important;
    align-content: start !important;
  }

  .language-selector-grid .language-option {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
    justify-self: stretch !important;
    padding: 4px 2px 3px !important;
    gap: 1px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  .language-selector-grid .language-option-flag {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    flex: 0 0 19px !important;
    margin: 0 0 1px !important;
    font-size: 15px !important;
  }

  .language-selector-grid .language-option-native {
    min-height: 10px !important;
    max-height: 20px !important;
    font-size: 9.5px !important;
    line-height: 1.0 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  .language-selector-grid .language-option-english {
    min-height: 8px !important;
    max-height: 15px !important;
    font-size: 7.5px !important;
    line-height: 1.0 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  .language-selector-grid .language-option-check {
    top: 3px !important;
    right: 3px !important;
    width: 13px !important;
    height: 13px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 360px) {
  .language-selector-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 4px !important;
    row-gap: 4px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  .language-selector-grid .language-option {
    padding: 3px 1px 2px !important;
    border-radius: 8px !important;
  }
  .language-selector-grid .language-option-flag {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex: 0 0 16px !important;
  }
  .language-selector-grid .language-option-native {
    min-height: 9px !important;
    max-height: 17px !important;
    font-size: 8.5px !important;
  }
  .language-selector-grid .language-option-english {
    min-height: 7px !important;
    max-height: 13px !important;
    font-size: 6.8px !important;
  }
  .language-selector-grid .language-option-check {
    width: 11px !important;
    height: 11px !important;
    font-size: 7px !important;
  }
}


/* =====================================================================
   ChessMondo v9.0 — Game Modes Foundation
   Scope: replacement main-menu card + dedicated full-screen Game Modes hub.
   Dark and Light modes are implemented together. No other UI is changed.
   ===================================================================== */
.menu-feature-card.modes {
  --mode-rgb: 42, 211, 183;
  --cm-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5h10a4.5 4.5 0 0 1 4.1 6.35l-1.2 2.7a2.25 2.25 0 0 1-3.55.75L14 16h-4l-2.35 2.3a2.25 2.25 0 0 1-3.55-.75l-1.2-2.7A4.5 4.5 0 0 1 7 8.5Z'/%3E%3Cpath d='M8 11.5v4M6 13.5h4M16.5 12.3h.01M18.3 14.1h.01'/%3E%3C/svg%3E");
  border-color: rgba(42,211,183,.34) !important;
  background:
    linear-gradient(112deg,rgba(42,211,183,.10),rgba(64,99,255,.035) 48%,transparent 72%),
    linear-gradient(155deg,rgba(16,31,39,.98),rgba(8,15,22,.995)) !important;
  box-shadow: inset 2px 0 0 rgba(42,211,183,.62), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.menu-feature-card.modes:hover,
.menu-feature-card.modes:focus-visible {
  border-color: rgba(42,211,183,.56) !important;
  background:
    linear-gradient(112deg,rgba(42,211,183,.16),rgba(64,99,255,.055) 50%,transparent 74%),
    linear-gradient(155deg,rgba(18,36,43,.99),rgba(8,16,23,.995)) !important;
}
#menuCard .menu-feature-card.modes .menu-feature-icon::before {
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:50% auto auto 50% !important;
  width:29px !important;
  height:29px !important;
  transform:translate(-50%,-50%) !important;
  background:rgb(42,211,183) !important;
  background-image:none !important;
  -webkit-mask-image:var(--cm-section-icon) !important;
  mask-image:var(--cm-section-icon) !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}

body.game-modes-page-open { overflow:hidden !important; }
.game-modes-page {
  position:fixed;
  inset:0;
  z-index:1200;
  overflow-y:auto;
  overflow-x:hidden;
  color:#eef7f6;
  background:
    radial-gradient(circle at 14% -5%,rgba(42,211,183,.12),transparent 31%),
    radial-gradient(circle at 96% 7%,rgba(80,104,255,.10),transparent 27%),
    linear-gradient(180deg,#080e14 0%,#070b10 60%,#05090d 100%);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.game-modes-page.hidden { display:none !important; }
.game-modes-shell {
  width:min(1180px,100%);
  min-height:100%;
  margin:0 auto;
  padding:max(18px,env(safe-area-inset-top)) clamp(20px,4vw,56px) max(28px,env(safe-area-inset-bottom));
}
.game-modes-topbar {
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(157,191,203,.14);
}
.game-modes-back {
  border:0;
  padding:9px 0;
  background:transparent;
  color:#a8bac5;
  font:700 13px/1 'Rajdhani',system-ui,sans-serif;
  letter-spacing:.05em;
  cursor:pointer;
}
.game-modes-back span { color:#2ad3b7; font-size:23px; vertical-align:-2px; margin-right:5px; }
.game-modes-back:hover,.game-modes-back:focus-visible { color:#fff; outline:none; }
.game-modes-brand {
  display:flex;
  align-items:center;
  gap:8px;
  color:#b9c9d0;
  font:700 12px/1 'Orbitron',system-ui,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.game-modes-controller {
  width:23px;
  height:23px;
  display:block;
  background:#2ad3b7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5h10a4.5 4.5 0 0 1 4.1 6.35l-1.2 2.7a2.25 2.25 0 0 1-3.55.75L14 16h-4l-2.35 2.3a2.25 2.25 0 0 1-3.55-.75l-1.2-2.7A4.5 4.5 0 0 1 7 8.5Z'/%3E%3Cpath d='M8 11.5v4M6 13.5h4M16.5 12.3h.01M18.3 14.1h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5h10a4.5 4.5 0 0 1 4.1 6.35l-1.2 2.7a2.25 2.25 0 0 1-3.55.75L14 16h-4l-2.35 2.3a2.25 2.25 0 0 1-3.55-.75l-1.2-2.7A4.5 4.5 0 0 1 7 8.5Z'/%3E%3Cpath d='M8 11.5v4M6 13.5h4M16.5 12.3h.01M18.3 14.1h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.game-modes-intro { padding:clamp(38px,7vh,78px) 0 clamp(24px,4vh,42px); max-width:760px; }
.game-modes-kicker {
  display:block;
  margin-bottom:10px;
  color:#2ad3b7;
  font:700 11px/1 'Share Tech Mono',monospace;
  letter-spacing:.18em;
}
.game-modes-intro h1 {
  margin:0;
  color:#f5fbfb;
  font:900 clamp(38px,6vw,72px)/.98 'Orbitron',system-ui,sans-serif;
  letter-spacing:-.045em;
}
.game-modes-intro p {
  max-width:670px;
  margin:18px 0 0;
  color:#879aa6;
  font:500 clamp(14px,1.6vw,17px)/1.55 'Rajdhani',system-ui,sans-serif;
}
.game-modes-list { border-top:1px solid rgba(157,191,203,.16); }
.game-mode-row {
  width:100%;
  min-height:98px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto 22px;
  align-items:center;
  gap:18px;
  padding:18px 4px;
  border:0;
  border-bottom:1px solid rgba(157,191,203,.14);
  border-radius:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .18s ease,padding-left .18s ease;
}
.game-mode-row:hover,.game-mode-row:focus-visible {
  padding-left:10px;
  background:linear-gradient(90deg,rgba(169,133,255,.08),transparent 65%);
  outline:none;
}
.game-mode-row-icon { font-size:32px; line-height:1; filter:saturate(.9); }
.game-mode-row-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.game-mode-row-copy strong { color:#eef4ff; font:700 21px/1.1 'Rajdhani',system-ui,sans-serif; }
.game-mode-row-copy small { color:#8293a0; font:500 13px/1.35 'Rajdhani',system-ui,sans-serif; white-space:normal; }
.game-mode-row-status {
  color:#a98cff;
  font:700 10px/1 'Share Tech Mono',monospace;
  letter-spacing:.12em;
}
.game-mode-row-arrow { color:#6f8290; font-size:24px; text-align:right; }
.game-mode-row:hover .game-mode-row-arrow { color:#a98cff; }

html[data-ui-theme="light"] .menu-feature-card.modes,
body[data-ui-theme="light"] .menu-feature-card.modes {
  border-color:rgba(18,156,137,.32) !important;
  background:linear-gradient(112deg,rgba(21,183,159,.10),rgba(75,97,224,.025) 52%,transparent 74%),#f8fbfd !important;
  box-shadow:inset 2px 0 0 rgba(18,156,137,.58),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-ui-theme="light"] .game-modes-page,
body[data-ui-theme="light"] .game-modes-page {
  color:#183040;
  background:
    radial-gradient(circle at 14% -5%,rgba(20,185,159,.10),transparent 31%),
    radial-gradient(circle at 96% 7%,rgba(83,105,230,.07),transparent 27%),
    linear-gradient(180deg,#f8fbfd 0%,#f2f7fa 100%);
}
html[data-ui-theme="light"] .game-modes-topbar,
body[data-ui-theme="light"] .game-modes-topbar,
html[data-ui-theme="light"] .game-modes-list,
body[data-ui-theme="light"] .game-modes-list { border-color:rgba(48,84,105,.16); }
html[data-ui-theme="light"] .game-mode-row,
body[data-ui-theme="light"] .game-mode-row { border-bottom-color:rgba(48,84,105,.14); }
html[data-ui-theme="light"] .game-modes-back,
body[data-ui-theme="light"] .game-modes-back,
html[data-ui-theme="light"] .game-modes-brand,
body[data-ui-theme="light"] .game-modes-brand { color:#586f7d; }
html[data-ui-theme="light"] .game-modes-intro h1,
body[data-ui-theme="light"] .game-modes-intro h1,
html[data-ui-theme="light"] .game-mode-row-copy strong,
body[data-ui-theme="light"] .game-mode-row-copy strong { color:#173044; }
html[data-ui-theme="light"] .game-modes-intro p,
body[data-ui-theme="light"] .game-modes-intro p,
html[data-ui-theme="light"] .game-mode-row-copy small,
body[data-ui-theme="light"] .game-mode-row-copy small { color:#647c8b; }
html[data-ui-theme="light"] .game-mode-row:hover,
body[data-ui-theme="light"] .game-mode-row:hover,
html[data-ui-theme="light"] .game-mode-row:focus-visible,
body[data-ui-theme="light"] .game-mode-row:focus-visible { background:linear-gradient(90deg,rgba(128,91,219,.07),transparent 65%); }

@media (max-width:640px) {
  .game-modes-shell { padding-left:18px; padding-right:18px; }
  .game-modes-topbar { min-height:52px; }
  .game-modes-brand { font-size:10px; }
  .game-modes-intro { padding:38px 0 22px; }
  .game-modes-intro h1 { font-size:38px; }
  .game-modes-intro p { font-size:14px; margin-top:14px; }
  .game-mode-row {
    min-height:86px;
    grid-template-columns:42px minmax(0,1fr) 18px;
    gap:12px;
    padding:15px 2px;
  }
  .game-mode-row-status { display:none; }
  .game-mode-row-icon { font-size:27px; }
  .game-mode-row-copy strong { font-size:18px; }
  .game-mode-row-copy small { font-size:11.5px; }
}


/* =====================================================================
   ChessMondo v9.0.1 — Game Modes Header / Navigation UI refinement
   Scope: Game Modes page only. Reuses the real ChessMondo top navigation,
   adds a section context label, compact title area and Main Menu card.
   ===================================================================== */
.top-brand-section-context {
  display:none;
  align-items:center;
  gap:8px;
  color:#2ad3b7;
  font:700 11px/1 'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.top-brand-section-context::before {
  content:'';
  width:1px;
  height:19px;
  background:rgba(148,168,184,.28);
  margin:0 3px 0 1px;
}
.top-brand-section-context::after {
  content:'';
  order:-1;
  width:17px;
  height:17px;
  background:#2ad3b7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5h10a4.5 4.5 0 0 1 4.1 6.35l-1.2 2.7a2.25 2.25 0 0 1-3.55.75L14 16h-4l-2.35 2.3a2.25 2.25 0 0 1-3.55-.75l-1.2-2.7A4.5 4.5 0 0 1 7 8.5Z'/%3E%3Cpath d='M8 11.5v4M6 13.5h4M16.5 12.3h.01M18.3 14.1h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5h10a4.5 4.5 0 0 1 4.1 6.35l-1.2 2.7a2.25 2.25 0 0 1-3.55.75L14 16h-4l-2.35 2.3a2.25 2.25 0 0 1-3.55-.75l-1.2-2.7A4.5 4.5 0 0 1 7 8.5Z'/%3E%3Cpath d='M8 11.5v4M6 13.5h4M16.5 12.3h.01M18.3 14.1h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.game-modes-page-open .top-bar {
  z-index:1305 !important;
  border-bottom-color:rgba(42,211,183,.22) !important;
}
body.game-modes-page-open .top-brand-section-context { display:inline-flex; }
body.game-modes-page-open #profileDropdown { z-index:1315 !important; }
body.game-modes-page-open #settingsOverlay,
body.game-modes-page-open #notificationCenterModal { z-index:2147483500 !important; }

.game-modes-page {
  top:64px !important;
}
.game-modes-shell {
  min-height:calc(100dvh - 64px);
  padding-top:clamp(24px,4vh,42px);
}
.game-modes-page-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  align-items:end;
  gap:clamp(22px,4vw,48px);
  padding:0 0 clamp(24px,4vh,38px);
  border-bottom:1px solid rgba(157,191,203,.14);
}
.game-modes-intro {
  max-width:760px;
  padding:0 !important;
}
.game-modes-kicker { margin-bottom:8px; }
.game-modes-intro h1 {
  font-size:clamp(32px,4vw,48px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
}
.game-modes-intro p {
  max-width:650px;
  margin-top:13px;
}
.game-modes-main-menu {
  width:100%;
  min-height:78px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(76,162,255,.22);
  border-radius:15px;
  background:
    linear-gradient(112deg,rgba(76,162,255,.08),rgba(42,211,183,.035) 58%,transparent),
    rgba(10,16,23,.74);
  box-shadow:inset 2px 0 0 rgba(76,162,255,.42),inset 0 1px 0 rgba(255,255,255,.025);
  color:#edf4fb;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.game-modes-main-menu:hover,.game-modes-main-menu:focus-visible {
  border-color:rgba(76,162,255,.44);
  background:
    linear-gradient(112deg,rgba(76,162,255,.13),rgba(42,211,183,.055) 60%,transparent),
    rgba(12,19,27,.9);
  transform:translateY(-1px);
  outline:none;
}
.game-modes-main-menu-icon {
  width:38px;
  height:38px;
  border-radius:11px;
  background:rgba(76,162,255,.10);
  border:1px solid rgba(76,162,255,.18);
  position:relative;
}
.game-modes-main-menu-icon::before {
  content:'';
  position:absolute;
  inset:10px;
  background:#69adff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2.5 10.8l1.3 1.6L5 11.4V21h5v-6h4v6h5v-9.6l1.2 1 1.3-1.6L12 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2.5 10.8l1.3 1.6L5 11.4V21h5v-6h4v6h5v-9.6l1.2 1 1.3-1.6L12 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.game-modes-main-menu-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.game-modes-main-menu-copy strong { color:#f3f7fb; font:700 15px/1.05 'Space Grotesk','Inter',sans-serif; }
.game-modes-main-menu-copy small { color:#7d91a0; font:500 11px/1.2 'Inter',sans-serif; }
.game-modes-main-menu-arrow { color:#6e8798; font-size:22px; text-align:right; }
.game-modes-main-menu:hover .game-modes-main-menu-arrow { color:#69adff; }

.game-modes-list {
  display:grid;
  gap:12px;
  padding-top:18px;
  border-top:0 !important;
}
.game-mode-row {
  padding:17px 16px !important;
  border:1px solid rgba(157,191,203,.14) !important;
  border-radius:15px !important;
  background:rgba(10,16,23,.46) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.game-mode-row:hover,.game-mode-row:focus-visible {
  padding-left:20px !important;
  border-color:rgba(169,140,255,.30) !important;
  background:linear-gradient(90deg,rgba(169,133,255,.08),rgba(10,16,23,.55) 62%) !important;
}

html[data-ui-theme="light"] .top-brand-section-context,
body[data-ui-theme="light"] .top-brand-section-context { color:#118a79; }
html[data-ui-theme="light"] .top-brand-section-context::after,
body[data-ui-theme="light"] .top-brand-section-context::after { background:#159d88; }
html[data-ui-theme="light"] .game-modes-page-head,
body[data-ui-theme="light"] .game-modes-page-head { border-bottom-color:rgba(48,84,105,.15); }
html[data-ui-theme="light"] .game-modes-main-menu,
body[data-ui-theme="light"] .game-modes-main-menu {
  color:#173044;
  border-color:rgba(52,103,145,.18);
  background:linear-gradient(112deg,rgba(55,130,205,.07),rgba(20,185,159,.035) 60%,transparent),rgba(255,255,255,.72);
  box-shadow:inset 2px 0 0 rgba(55,130,205,.34),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-ui-theme="light"] .game-modes-main-menu-copy strong,
body[data-ui-theme="light"] .game-modes-main-menu-copy strong { color:#173044; }
html[data-ui-theme="light"] .game-modes-main-menu-copy small,
body[data-ui-theme="light"] .game-modes-main-menu-copy small { color:#718797; }
html[data-ui-theme="light"] .game-mode-row,
body[data-ui-theme="light"] .game-mode-row {
  background:rgba(255,255,255,.64) !important;
  border-color:rgba(48,84,105,.14) !important;
}

@media (max-width:760px) {
  .game-modes-page-head { grid-template-columns:1fr; align-items:stretch; gap:18px; }
  .game-modes-main-menu { max-width:100%; min-height:68px; }
}
@media (max-width:640px) {
  .game-modes-page { top:calc(62px + env(safe-area-inset-top)) !important; }
  .game-modes-shell {
    min-height:calc(100dvh - 62px - env(safe-area-inset-top));
    padding-top:24px !important;
  }
  body.game-modes-page-open .top-brand-section-context {
    display:inline-flex;
    font-size:9px;
    letter-spacing:.055em;
    gap:5px;
  }
  body.game-modes-page-open .top-brand-section-context::before { display:none; }
  body.game-modes-page-open .top-brand-section-context::after { width:14px; height:14px; }
  .game-modes-intro h1 { font-size:32px !important; }
  .game-modes-intro p { font-size:13px !important; line-height:1.45; }
  .game-modes-main-menu {
    grid-template-columns:38px minmax(0,1fr) 16px;
    padding:11px 12px;
    border-radius:13px;
  }
  .game-modes-main-menu-icon { width:34px; height:34px; border-radius:10px; }
  .game-modes-list { padding-top:14px; gap:9px; }
  .game-mode-row { padding:13px 11px !important; border-radius:13px !important; }
  .game-mode-row:hover,.game-mode-row:focus-visible { padding-left:14px !important; }
}


/* =====================================================================
   ChessMondo v9.0.3 — Game Modes Main Menu card identity
   Scope only: Game Modes hub Main Menu control. Dark + Light together.
   ===================================================================== */
.game-modes-main-menu {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(39,216,187,.34) !important;
  border-radius:18px !important;
  background:
    linear-gradient(115deg,rgba(30,205,179,.13),rgba(45,133,255,.10) 52%,rgba(10,16,23,.78) 82%),
    rgba(8,15,22,.90) !important;
  box-shadow:
    inset 3px 0 0 rgba(42,211,183,.72),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 28px rgba(0,0,0,.16) !important;
}
.game-modes-main-menu::before {
  content:'';
  position:absolute;
  z-index:0;
  inset:0 auto 0 0;
  width:38%;
  background:linear-gradient(100deg,rgba(42,211,183,.095),transparent 78%);
  pointer-events:none;
}
.game-modes-main-menu::after {
  content:'';
  position:absolute;
  z-index:0;
  width:124px;
  height:124px;
  right:-46px;
  top:-52px;
  border:1px solid rgba(83,171,255,.16);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(42,211,183,.025),0 0 0 38px rgba(83,171,255,.018);
  pointer-events:none;
}
.game-modes-main-menu > * { position:relative; z-index:1; }
.game-modes-main-menu-icon {
  border-radius:13px !important;
  border-color:rgba(42,211,183,.30) !important;
  background:linear-gradient(145deg,rgba(42,211,183,.18),rgba(76,162,255,.13)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 18px rgba(42,211,183,.055);
}
.game-modes-main-menu-icon::before { background:#55e1c7 !important; }
.game-modes-main-menu-copy strong {
  letter-spacing:.015em;
}
.game-modes-main-menu-arrow {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  justify-self:end;
  border:1px solid rgba(91,174,255,.18);
  border-radius:9px;
  background:rgba(77,151,238,.07);
  transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease;
}
.game-modes-main-menu:hover,.game-modes-main-menu:focus-visible {
  border-color:rgba(42,211,183,.58) !important;
  background:
    linear-gradient(115deg,rgba(30,205,179,.18),rgba(45,133,255,.14) 54%,rgba(12,20,29,.92) 84%),
    rgba(8,15,22,.96) !important;
  box-shadow:
    inset 3px 0 0 rgba(42,211,183,.88),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 13px 34px rgba(0,0,0,.19) !important;
}
.game-modes-main-menu:hover .game-modes-main-menu-arrow,
.game-modes-main-menu:focus-visible .game-modes-main-menu-arrow {
  color:#61e5cd;
  border-color:rgba(42,211,183,.34);
  background:rgba(42,211,183,.09);
  transform:translateX(2px);
}

html[data-ui-theme="light"] .game-modes-main-menu,
body[data-ui-theme="light"] .game-modes-main-menu {
  border-color:rgba(18,151,132,.25) !important;
  background:
    linear-gradient(115deg,rgba(21,176,151,.10),rgba(55,130,205,.07) 54%,rgba(255,255,255,.84) 84%),
    rgba(255,255,255,.90) !important;
  box-shadow:
    inset 3px 0 0 rgba(18,151,132,.50),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 9px 24px rgba(45,76,97,.08) !important;
}
html[data-ui-theme="light"] .game-modes-main-menu-icon,
body[data-ui-theme="light"] .game-modes-main-menu-icon {
  border-color:rgba(18,151,132,.22) !important;
  background:linear-gradient(145deg,rgba(20,171,146,.12),rgba(55,130,205,.09)) !important;
}
html[data-ui-theme="light"] .game-modes-main-menu-icon::before,
body[data-ui-theme="light"] .game-modes-main-menu-icon::before { background:#118f7b !important; }
html[data-ui-theme="light"] .game-modes-main-menu-arrow,
body[data-ui-theme="light"] .game-modes-main-menu-arrow {
  color:#4f7892;
  border-color:rgba(54,104,139,.15);
  background:rgba(60,126,171,.045);
}
html[data-ui-theme="light"] .game-modes-main-menu:hover,
html[data-ui-theme="light"] .game-modes-main-menu:focus-visible,
body[data-ui-theme="light"] .game-modes-main-menu:hover,
body[data-ui-theme="light"] .game-modes-main-menu:focus-visible {
  border-color:rgba(18,151,132,.42) !important;
  background:
    linear-gradient(115deg,rgba(21,176,151,.14),rgba(55,130,205,.09) 54%,rgba(255,255,255,.94) 84%),
    #fff !important;
}

@media (max-width:640px) {
  .game-modes-main-menu { border-radius:15px !important; }
  .game-modes-main-menu::after { width:96px; height:96px; right:-38px; top:-40px; }
  .game-modes-main-menu-arrow { width:25px; height:25px; border-radius:8px; }
}


/* ChessMondo v9.1.2 — 2 VS 2 Team Chess UI */
.game-mode-row-team2v2 .game-mode-row-icon {
  color:#72d7ff;
  border-color:rgba(74,173,255,.24);
  background:linear-gradient(145deg,rgba(55,139,230,.13),rgba(42,211,183,.07));
}
.team2v2-order-preview,
.team2v2-turn-order {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.team2v2-order-preview { margin:14px 0 18px; }
.team2v2-turn-order {
  margin:8px 0 10px;
  padding:7px;
  border:1px solid rgba(120,151,182,.16);
  border-radius:13px;
  background:rgba(8,14,22,.48);
}
.team2v2-turn-order.hidden { display:none !important; }
.team2v2-seat {
  min-width:0;
  padding:9px 7px;
  border:1px solid rgba(120,151,182,.15);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  text-align:center;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.team2v2-seat strong,
.team2v2-seat span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team2v2-seat strong { font-size:11px; color:#dce6f2; letter-spacing:.02em; }
.team2v2-seat span { margin-top:3px; font-size:10px; color:#7f91a6; }
.team2v2-seat.white-seat { box-shadow:inset 0 2px 0 rgba(225,235,245,.16); }
.team2v2-seat.black-seat { box-shadow:inset 0 2px 0 rgba(82,112,143,.22); }
.team2v2-seat.human-seat {
  border-color:rgba(42,211,183,.34);
  background:rgba(42,211,183,.055);
}
.team2v2-seat.human-seat span { color:#55dfc6; font-weight:700; }
.team2v2-seat.active-seat {
  border-color:rgba(80,178,255,.58);
  background:rgba(58,151,237,.10);
  box-shadow:0 0 0 1px rgba(80,178,255,.10),0 0 18px rgba(57,151,235,.10);
  transform:translateY(-1px);
}
.team2v2-seat.active-seat strong { color:#fff; }
html[data-ui-theme="light"] .game-mode-row-team2v2 .game-mode-row-icon,
body[data-ui-theme="light"] .game-mode-row-team2v2 .game-mode-row-icon {
  color:#267fb8;
  border-color:rgba(38,127,184,.20);
  background:linear-gradient(145deg,rgba(58,139,199,.10),rgba(18,151,132,.06));
}
html[data-ui-theme="light"] .team2v2-turn-order,
body[data-ui-theme="light"] .team2v2-turn-order {
  border-color:rgba(70,105,132,.14);
  background:rgba(242,247,251,.78);
}
html[data-ui-theme="light"] .team2v2-seat,
body[data-ui-theme="light"] .team2v2-seat {
  border-color:rgba(70,105,132,.14);
  background:rgba(255,255,255,.78);
}
html[data-ui-theme="light"] .team2v2-seat strong,
body[data-ui-theme="light"] .team2v2-seat strong { color:#203241; }
html[data-ui-theme="light"] .team2v2-seat span,
body[data-ui-theme="light"] .team2v2-seat span { color:#687d8d; }
html[data-ui-theme="light"] .team2v2-seat.human-seat,
body[data-ui-theme="light"] .team2v2-seat.human-seat {
  border-color:rgba(18,151,132,.30);
  background:rgba(18,151,132,.07);
}
html[data-ui-theme="light"] .team2v2-seat.human-seat span,
body[data-ui-theme="light"] .team2v2-seat.human-seat span { color:#0b806f; }
html[data-ui-theme="light"] .team2v2-seat.active-seat,
body[data-ui-theme="light"] .team2v2-seat.active-seat {
  border-color:rgba(38,127,184,.38);
  background:rgba(49,137,196,.09);
}
@media (max-width:640px) {
  .team2v2-order-preview,.team2v2-turn-order { gap:5px; }
  .team2v2-seat { padding:8px 4px; border-radius:9px; }
  .team2v2-seat strong { font-size:9.5px; }
  .team2v2-seat span { font-size:9px; }
}


/* =====================================================================
   ChessMondo v9.1.2 — 2 VS 2 Team Chess compact UI repair
   Scope only: 2 VS 2 mode list/setup/live-game/result presentation.
   ===================================================================== */
.game-mode-row-team2v2 .game-mode-row-icon,
#panelTeam2v2 .team2v2-feature-icon {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  color:#d9f6ff !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
}
#panelTeam2v2 .team2v2-feature-icon::before { display:none !important; }
.team2v2-vs-mark {
  width:50px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:0;
  background:none;
  box-shadow:none;
  font-family:'Share Tech Mono',monospace;
  line-height:1;
}
.team2v2-vs-mark b {
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(190,218,238,.26);
  background:rgba(220,237,249,.07);
  color:#eef8ff;
  font-size:11px;
  font-weight:800;
}
.team2v2-vs-mark b:last-child {
  border-color:rgba(82,156,218,.28);
  background:rgba(55,132,202,.10);
  color:#8ed7ff;
}
.team2v2-vs-mark i { font-size:7px; color:#59dcca; font-style:normal; font-weight:800; letter-spacing:.04em; }
#panelTeam2v2 .team2v2-feature-icon .team2v2-vs-mark { width:52px; height:32px; }

/* Keep the four-seat information visible without adding a tall extra panel. */
body.team2v2-game-active #gameBoard .team2v2-turn-order {
  order:5 !important;
  width:min(560px,100%) !important;
  min-height:30px !important;
  margin:0 auto 5px !important;
  padding:3px !important;
  gap:3px !important;
  border-radius:9px !important;
  background:rgba(8,14,22,.38) !important;
}
body.team2v2-game-active #gameBoard .team2v2-seat {
  min-height:22px !important;
  padding:3px 3px !important;
  border-radius:7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}
body.team2v2-game-active #gameBoard .team2v2-seat strong,
body.team2v2-game-active #gameBoard .team2v2-seat span {
  display:inline !important;
  margin:0 !important;
  line-height:1 !important;
}
body.team2v2-game-active #gameBoard .team2v2-seat strong { font-size:9.5px !important; }
body.team2v2-game-active #gameBoard .team2v2-seat span { font-size:8.5px !important; }

/* 2 VS 2 reuses the normal AI board. Compact only the surrounding HUD so
   capture rails and controls never disappear below the viewport. */
body.team2v2-game-active #gameBoard .left-panel {
  padding-top:10px !important;
  padding-bottom:10px !important;
}
body.team2v2-game-active #gameBoard #capturedByBlack,
body.team2v2-game-active #gameBoard #capturedByWhite {
  order:1 !important;
  width:min(560px,100%) !important;
  min-height:20px !important;
  height:20px !important;
  margin:0 auto 3px !important;
  padding:2px 7px !important;
  flex-wrap:nowrap !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:15px !important;
  line-height:1 !important;
}
body.team2v2-game-active #gameBoard #capturedByWhite { order:2 !important; }
body.team2v2-game-active #gameBoard #gameTimer {
  order:3 !important;
  min-height:30px !important;
  height:30px !important;
  margin:0 auto 4px !important;
  padding:4px 8px !important;
}
body.team2v2-game-active #gameBoard #status {
  order:4 !important;
  min-height:34px !important;
  margin:0 auto 4px !important;
  padding:6px 9px !important;
  font-size:15px !important;
}
body.team2v2-game-active #gameBoard #board { order:6 !important; }
body.team2v2-game-active #gameBoard #aiControls {
  order:7 !important;
  margin-top:6px !important;
  margin-bottom:0 !important;
}
body.team2v2-game-active #gameBoard #mpTopPlayer,
body.team2v2-game-active #gameBoard #mpBottomPlayer,
body.team2v2-game-active #gameBoard #chessClocks,
body.team2v2-game-active #gameBoard #drunkHud,
body.team2v2-game-active #gameBoard #mpControls,
body.team2v2-game-active #gameBoard #disconnectBanner { order:8 !important; }

html[data-ui-theme="light"] .team2v2-vs-mark b,
body[data-ui-theme="light"] .team2v2-vs-mark b {
  color:#24465c;
  border-color:rgba(60,104,135,.20);
  background:rgba(39,83,112,.055);
}
html[data-ui-theme="light"] .team2v2-vs-mark b:last-child,
body[data-ui-theme="light"] .team2v2-vs-mark b:last-child {
  color:#267fb8;
  border-color:rgba(38,127,184,.20);
  background:rgba(38,127,184,.06);
}
html[data-ui-theme="light"] .team2v2-vs-mark i,
body[data-ui-theme="light"] .team2v2-vs-mark i { color:#0b8876; }

@media (min-width:641px) and (max-height:820px) {
  body.team2v2-game-active #gameBoard .left-panel { padding-top:7px !important; padding-bottom:7px !important; }
  body.team2v2-game-active #gameBoard #board { width:min(520px,100%) !important; }
  body.team2v2-game-active #gameBoard #capturedByBlack,
  body.team2v2-game-active #gameBoard #capturedByWhite,
  body.team2v2-game-active #gameBoard #gameTimer,
  body.team2v2-game-active #gameBoard #status,
  body.team2v2-game-active #gameBoard .team2v2-turn-order,
  body.team2v2-game-active #gameBoard #aiControls { width:min(520px,100%) !important; }
}

@media (max-width:640px) {
  .team2v2-vs-mark { width:44px; height:28px; }
  .team2v2-vs-mark b { width:18px; height:18px; font-size:10px; }
  .team2v2-vs-mark i { font-size:6px; }
  body.team2v2-game-active #gameBoard .team2v2-turn-order { width:min(100%,calc(100vw - 26px)) !important; }
  body.team2v2-game-active #gameBoard .team2v2-seat strong { font-size:8.5px !important; }
  body.team2v2-game-active #gameBoard .team2v2-seat span { font-size:7.5px !important; }
}


/* =====================================================================
   ChessMondo v9.1.3 — 2 VS 2 player-position UI + standard AI-board feel
   Scope only: 2 VS 2 setup/live game. No other ChessMondo UI is changed.
   ===================================================================== */
#panelTeam2v2 .team2v2-order-preview { margin:8px 0 18px !important; gap:8px !important; }
#panelTeam2v2 .team2v2-seat {
  appearance:none; font:inherit; cursor:pointer; min-height:54px !important; padding:7px 8px !important;
  display:grid !important; grid-template-columns:auto 1fr !important; grid-template-rows:auto auto !important;
  column-gap:7px !important; align-items:center !important; text-align:left !important;
  background:rgba(255,255,255,.025) !important;
}
#panelTeam2v2 .team2v2-seat em {
  grid-row:1 / span 2; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  font-size:9px; font-style:normal; font-weight:800; color:#7f91a6;
  border:1px solid rgba(120,151,182,.16); background:rgba(255,255,255,.025);
}
#panelTeam2v2 .team2v2-seat strong { font-size:11px !important; }
#panelTeam2v2 .team2v2-seat span { margin:0 !important; font-size:9.5px !important; }
#panelTeam2v2 .team2v2-seat:hover,#panelTeam2v2 .team2v2-seat:focus-visible {
  border-color:rgba(80,178,255,.34) !important; background:rgba(58,151,237,.06) !important; outline:none;
}
#panelTeam2v2 .team2v2-seat.human-seat {
  border-color:rgba(42,211,183,.55) !important; background:rgba(42,211,183,.08) !important;
  box-shadow:0 0 0 1px rgba(42,211,183,.08), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#panelTeam2v2 .team2v2-seat.human-seat em { color:#9af5e3; border-color:rgba(42,211,183,.32); background:rgba(42,211,183,.10); }

.team2v2-board-stage { display:contents; }
.team2v2-corner-seat { display:none; }
body.team2v2-game-active #gameBoard .team2v2-turn-order { display:none !important; }
body.team2v2-game-active #gameBoard .left-panel { padding:16px 18px 14px !important; overflow:visible !important; }
body.team2v2-game-active #gameBoard #capturedByBlack,
body.team2v2-game-active #gameBoard #capturedByWhite {
  width:min(560px,100%) !important; height:20px !important; min-height:20px !important; margin:0 auto 4px !important;
  padding:2px 7px !important; overflow:hidden !important; white-space:nowrap !important; flex-wrap:nowrap !important;
  font-size:15px !important;
}
body.team2v2-game-active #gameBoard .captured-empty { display:none !important; }
body.team2v2-game-active #gameBoard #gameTimer,
body.team2v2-game-active #gameBoard #status,
body.team2v2-game-active #gameBoard #aiControls { width:min(560px,100%) !important; }
body.team2v2-game-active #gameBoard #gameTimer { margin-bottom:5px !important; }
body.team2v2-game-active #gameBoard #status { margin-bottom:6px !important; }
body.team2v2-game-active #gameBoard .team2v2-board-stage {
  display:block; position:relative; order:6 !important; width:min(560px,calc(100% - 104px));
  margin:28px auto 30px; overflow:visible;
}
body.team2v2-game-active #gameBoard .team2v2-board-stage #board {
  width:100% !important; height:auto !important; aspect-ratio:1 / 1; margin:0 !important;
}
body.team2v2-game-active #gameBoard .team2v2-corner-seat {
  position:absolute; z-index:12; width:92px; min-height:38px; display:flex; align-items:center; gap:7px; padding:5px 7px;
  border:1px solid rgba(111,139,168,.24); border-radius:11px; background:rgba(8,14,22,.92);
  box-shadow:0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter:blur(8px);
  pointer-events:none; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}
body.team2v2-game-active #gameBoard .team2v2-corner-seat-2 { left:-49px; top:-22px; }
body.team2v2-game-active #gameBoard .team2v2-corner-seat-3 { right:-49px; top:-22px; }
body.team2v2-game-active #gameBoard .team2v2-corner-seat-1 { left:-49px; bottom:-22px; }
body.team2v2-game-active #gameBoard .team2v2-corner-seat-0 { right:-49px; bottom:-22px; }
body.team2v2-game-active #gameBoard .team2v2-corner-order {
  width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border-radius:7px;
  font-size:9px; font-weight:850; color:#92a6ba; border:1px solid rgba(130,157,183,.18); background:rgba(255,255,255,.035);
}
body.team2v2-game-active #gameBoard .team2v2-corner-copy { min-width:0; display:block; }
body.team2v2-game-active #gameBoard .team2v2-corner-copy strong,
body.team2v2-game-active #gameBoard .team2v2-corner-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.05; }
body.team2v2-game-active #gameBoard .team2v2-corner-copy strong { color:#dfe9f4; font-size:9.5px; }
body.team2v2-game-active #gameBoard .team2v2-corner-copy small { margin-top:3px; color:#788da2; font-size:8.5px; }
body.team2v2-game-active #gameBoard .team2v2-corner-seat.white-seat { box-shadow:0 6px 18px rgba(0,0,0,.18), inset 2px 0 0 rgba(227,238,249,.24); }
body.team2v2-game-active #gameBoard .team2v2-corner-seat.black-seat { box-shadow:0 6px 18px rgba(0,0,0,.18), inset 2px 0 0 rgba(74,135,190,.34); }
body.team2v2-game-active #gameBoard .team2v2-corner-seat.human-seat {
  border-color:rgba(42,211,183,.58); background:rgba(11,38,39,.94);
  box-shadow:0 0 0 1px rgba(42,211,183,.10),0 7px 22px rgba(0,0,0,.22),inset 2px 0 0 rgba(42,211,183,.70);
}
body.team2v2-game-active #gameBoard .team2v2-corner-seat.human-seat .team2v2-corner-copy small { color:#62e4ce; font-weight:750; }
body.team2v2-game-active #gameBoard .team2v2-corner-seat.active-seat {
  border-color:rgba(84,178,255,.86); background:rgba(14,34,54,.96);
  box-shadow:0 0 0 1px rgba(84,178,255,.15),0 0 20px rgba(55,143,223,.18),inset 2px 0 0 rgba(84,178,255,.84);
  transform:translateY(-1px);
}
body.team2v2-game-active #gameBoard #aiControls { order:7 !important; margin:2px auto 0 !important; }
body.team2v2-game-active #gameBoard #undoBtn,
body.team2v2-game-active #gameBoard #hintBtn { display:inline-flex !important; }

html[data-ui-theme="light"] #panelTeam2v2 .team2v2-seat,
body[data-ui-theme="light"] #panelTeam2v2 .team2v2-seat { background:rgba(255,255,255,.80) !important; }
html[data-ui-theme="light"] #panelTeam2v2 .team2v2-seat.human-seat,
body[data-ui-theme="light"] #panelTeam2v2 .team2v2-seat.human-seat { background:rgba(18,151,132,.08) !important; }
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-corner-seat,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-corner-seat { background:rgba(255,255,255,.95); border-color:rgba(66,101,128,.22); }
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-corner-copy strong,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-corner-copy strong { color:#1e3241; }
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-corner-copy small,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-corner-copy small { color:#687e8f; }
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-corner-seat.human-seat,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-corner-seat.human-seat { background:#eefbf7; }
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-corner-seat.active-seat,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-corner-seat.active-seat { background:#edf7ff; }

@media (max-width:720px) {
  #panelTeam2v2 .team2v2-order-preview { gap:5px !important; }
  #panelTeam2v2 .team2v2-seat { min-height:48px !important; padding:5px !important; column-gap:4px !important; }
  #panelTeam2v2 .team2v2-seat em { width:20px; height:20px; font-size:8px; }
  #panelTeam2v2 .team2v2-seat strong { font-size:9px !important; }
  #panelTeam2v2 .team2v2-seat span { font-size:8px !important; }
  body.team2v2-game-active #gameBoard .left-panel { padding:10px 8px 12px !important; }
  body.team2v2-game-active #gameBoard .team2v2-board-stage { width:min(calc(100vw - 34px),560px); margin:23px auto 25px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat { width:72px; min-height:32px; padding:4px 5px; gap:4px; border-radius:9px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat-2 { left:4px; top:-18px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat-3 { right:4px; top:-18px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat-1 { left:4px; bottom:-18px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat-0 { right:4px; bottom:-18px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-order { width:17px; height:17px; flex-basis:17px; font-size:7.5px; border-radius:6px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-copy strong { font-size:8px; }
  body.team2v2-game-active #gameBoard .team2v2-corner-copy small { font-size:7.5px; }
}


/* =====================================================================
   ChessMondo v9.1.4 — 2 VS 2 board identity + clock repair
   Scope only: 2 VS 2 setup/live game. Undo remains available elsewhere.
   ===================================================================== */
#panelTeam2v2 .team2v2-order-preview {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}
#panelTeam2v2 .team2v2-seat { min-height:58px !important; }
#panelTeam2v2 .team2v2-seat em { width:25px; height:25px; }

body.team2v2-game-active #gameBoard #undoBtn { display:none !important; }
body.team2v2-game-active #gameBoard #hintBtn { display:inline-flex !important; }
body.team2v2-game-active #gameBoard #chessClocks {
  order:3 !important;
  width:min(520px,100%) !important;
  margin:0 auto 5px !important;
}
body.team2v2-game-active #gameBoard #gameTimer { order:4 !important; }
body.team2v2-game-active #gameBoard #status { order:5 !important; }

/* Player identity cards sit OUTSIDE the board instead of overlapping squares. */
body.team2v2-game-active #gameBoard .team2v2-board-stage {
  display:grid !important;
  grid-template-columns:72px minmax(0,500px) 72px !important;
  grid-template-rows:1fr 1fr !important;
  grid-template-areas:"tl board tr" "bl board br" !important;
  column-gap:9px !important;
  row-gap:8px !important;
  align-items:stretch !important;
  justify-content:center !important;
  order:6 !important;
  width:min(662px,100%) !important;
  margin:4px auto 8px !important;
  overflow:visible !important;
}
body.team2v2-game-active #gameBoard .team2v2-board-stage #board {
  grid-area:board !important;
  align-self:center !important;
  justify-self:center !important;
  width:min(500px,100%) !important;
  max-width:500px !important;
  aspect-ratio:1 / 1 !important;
  margin:0 !important;
}
body.team2v2-game-active #gameBoard .team2v2-corner-seat {
  position:relative !important;
  inset:auto !important;
  z-index:4 !important;
  width:72px !important;
  height:72px !important;
  min-height:72px !important;
  padding:7px 5px !important;
  border-radius:13px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  text-align:center !important;
  overflow:hidden !important;
  transform:none !important;
}
body.team2v2-game-active #gameBoard .team2v2-seat-pos-tl { grid-area:tl !important; align-self:start !important; }
body.team2v2-game-active #gameBoard .team2v2-seat-pos-tr { grid-area:tr !important; align-self:start !important; }
body.team2v2-game-active #gameBoard .team2v2-seat-pos-bl { grid-area:bl !important; align-self:end !important; }
body.team2v2-game-active #gameBoard .team2v2-seat-pos-br { grid-area:br !important; align-self:end !important; }
body.team2v2-game-active #gameBoard .team2v2-corner-order {
  width:24px !important; height:24px !important; flex:0 0 24px !important;
  border-radius:8px !important; font-size:8.5px !important;
}
body.team2v2-game-active #gameBoard .team2v2-corner-copy { width:100% !important; min-width:0 !important; }
body.team2v2-game-active #gameBoard .team2v2-corner-copy strong {
  font-size:9px !important; line-height:1.05 !important;
}
body.team2v2-game-active #gameBoard .team2v2-corner-copy small {
  margin-top:3px !important; font-size:7.6px !important; line-height:1.05 !important;
}
body.team2v2-game-active #gameBoard .team2v2-corner-seat.active-seat { transform:none !important; }
body.team2v2-game-active #gameBoard #aiControls { order:7 !important; margin:4px auto 0 !important; }

@media (min-width:641px) and (max-height:840px) {
  body.team2v2-game-active #gameBoard .left-panel { padding-top:6px !important; padding-bottom:6px !important; }
  body.team2v2-game-active #gameBoard .team2v2-board-stage {
    grid-template-columns:64px minmax(0,460px) 64px !important;
    width:min(606px,100%) !important;
    column-gap:9px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-board-stage #board { width:min(460px,100%) !important; max-width:460px !important; }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat { width:64px !important; height:64px !important; min-height:64px !important; padding:5px 4px !important; }
  body.team2v2-game-active #gameBoard .team2v2-corner-order { width:20px !important; height:20px !important; flex-basis:20px !important; }
  body.team2v2-game-active #gameBoard .team2v2-corner-copy strong { font-size:8px !important; }
  body.team2v2-game-active #gameBoard .team2v2-corner-copy small { font-size:6.8px !important; }
  body.team2v2-game-active #gameBoard #chessClocks,
  body.team2v2-game-active #gameBoard #gameTimer,
  body.team2v2-game-active #gameBoard #status,
  body.team2v2-game-active #gameBoard #aiControls { width:min(500px,100%) !important; }
}

@media (max-width:640px) {
  #panelTeam2v2 .team2v2-order-preview { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.team2v2-game-active #gameBoard .team2v2-board-stage {
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto auto !important;
    grid-template-areas:"tl tr" "board board" "bl br" !important;
    width:min(100%,520px) !important;
    gap:6px 8px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-board-stage #board { width:100% !important; max-width:500px !important; }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat {
    width:82px !important; height:48px !important; min-height:48px !important;
    flex-direction:row !important; justify-self:start !important; padding:4px 6px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-seat-pos-tr,
  body.team2v2-game-active #gameBoard .team2v2-seat-pos-br { justify-self:end !important; }
  body.team2v2-game-active #gameBoard .team2v2-corner-order { width:18px !important; height:18px !important; flex-basis:18px !important; }
  body.team2v2-game-active #gameBoard .team2v2-corner-copy { text-align:left !important; }
}


/* =====================================================================
   ChessMondo v9.1.5 — 2 VS 2 board scale + desktop placement alignment
   Scope only: 2 VS 2 live game on desktop. Match the normal Play vs AI
   board footprint more closely without changing gameplay logic.
   ===================================================================== */
@media (min-width:901px) {
  body.team2v2-game-active #gameBoard.game-board-wrap {
    margin-top:0 !important;
  }
  body.team2v2-game-active #gameBoard .left-panel {
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-board-stage {
    display:grid !important;
    grid-template-columns:62px minmax(0,560px) 62px !important;
    grid-template-rows:1fr 1fr !important;
    grid-template-areas:"tl board tr" "bl board br" !important;
    column-gap:8px !important;
    row-gap:8px !important;
    align-items:stretch !important;
    justify-content:center !important;
    width:min(700px,100%) !important;
    margin:4px auto 8px !important;
    overflow:visible !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-board-stage #board {
    grid-area:board !important;
    align-self:center !important;
    justify-self:center !important;
    width:min(560px,100%) !important;
    max-width:560px !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat {
    position:relative !important;
    inset:auto !important;
    width:62px !important;
    height:62px !important;
    min-height:62px !important;
    padding:5px 4px !important;
    border-radius:11px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-seat-pos-tl { grid-area:tl !important; align-self:start !important; }
  body.team2v2-game-active #gameBoard .team2v2-seat-pos-tr { grid-area:tr !important; align-self:start !important; }
  body.team2v2-game-active #gameBoard .team2v2-seat-pos-bl { grid-area:bl !important; align-self:end !important; }
  body.team2v2-game-active #gameBoard .team2v2-seat-pos-br { grid-area:br !important; align-self:end !important; }
  body.team2v2-game-active #gameBoard #chessClocks,
  body.team2v2-game-active #gameBoard #gameTimer,
  body.team2v2-game-active #gameBoard #status,
  body.team2v2-game-active #gameBoard #aiControls,
  body.team2v2-game-active #gameBoard #capturedByBlack,
  body.team2v2-game-active #gameBoard #capturedByWhite {
    width:min(560px,100%) !important;
  }
}

@media (min-width:901px) and (max-width:1180px) {
  body.team2v2-game-active #gameBoard .team2v2-board-stage {
    grid-template-columns:56px minmax(0,520px) 56px !important;
    width:min(648px,100%) !important;
    column-gap:8px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-board-stage #board {
    width:min(520px,100%) !important;
    max-width:520px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-corner-seat {
    width:56px !important;
    height:56px !important;
    min-height:56px !important;
  }
  body.team2v2-game-active #gameBoard #chessClocks,
  body.team2v2-game-active #gameBoard #gameTimer,
  body.team2v2-game-active #gameBoard #status,
  body.team2v2-game-active #gameBoard #aiControls,
  body.team2v2-game-active #gameBoard #capturedByBlack,
  body.team2v2-game-active #gameBoard #capturedByWhite {
    width:min(520px,100%) !important;
  }
}

/* =====================================================================
   ChessMondo v9.1.6 — 2 VS 2 persistent capture rails + HUD balance
   Scope only: 2 VS 2 live game. Keep both capture counters visible from
   move zero so the game panel has the same complete HUD feel as Play vs AI.
   ===================================================================== */
body.team2v2-game-active #gameBoard #capturedByBlack,
body.team2v2-game-active #gameBoard #capturedByWhite {
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:24px !important;
  height:24px !important;
  padding:3px 8px !important;
  border:1px solid rgba(120,151,182,.14) !important;
  border-radius:7px !important;
  background:rgba(5,10,16,.64) !important;
  color:#d9e3ed !important;
  overflow:hidden !important;
}
body.team2v2-game-active #gameBoard .captured-empty {
  display:inline-block !important;
  color:#718297 !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}
body.team2v2-game-active #gameBoard .team2v2-capture-label {
  flex:0 0 auto;
  color:#8fa1b5;
  font-size:9px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
body.team2v2-game-active #gameBoard .team2v2-capture-count {
  flex:0 0 auto;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid rgba(112,151,190,.18);
  background:rgba(255,255,255,.035);
  color:#cbd7e3;
  font-size:9px;
  font-weight:850;
  line-height:1;
}
body.team2v2-game-active #gameBoard .team2v2-capture-pieces {
  min-width:0;
  overflow:hidden;
  text-overflow:clip;
  white-space:nowrap;
  color:#e6edf5;
  font-size:14px;
  line-height:1;
}
body.team2v2-game-active #gameBoard #capturedByBlack {
  box-shadow:inset 2px 0 0 rgba(85,139,194,.28) !important;
}
body.team2v2-game-active #gameBoard #capturedByWhite {
  box-shadow:inset 2px 0 0 rgba(231,238,245,.22) !important;
}
body.team2v2-game-active #gameBoard .left-panel {
  gap:0 !important;
}
body.team2v2-game-active #gameBoard #gameTimer {
  margin-top:1px !important;
}
body.team2v2-game-active #gameBoard #status {
  margin-bottom:5px !important;
}
body.team2v2-game-active #gameBoard .coord {
  opacity:.92;
}
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard #capturedByBlack,
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard #capturedByWhite,
body[data-ui-theme="light"].team2v2-game-active #gameBoard #capturedByBlack,
body[data-ui-theme="light"].team2v2-game-active #gameBoard #capturedByWhite {
  background:rgba(247,250,252,.88) !important;
  border-color:rgba(63,94,117,.16) !important;
  color:#243746 !important;
}
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-capture-label,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-capture-label { color:#617789; }
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-capture-count,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-capture-count {
  color:#2b4253; background:rgba(38,82,113,.055); border-color:rgba(38,82,113,.14);
}
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .captured-empty,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .captured-empty { color:#7b8c99 !important; }
html[data-ui-theme="light"] body.team2v2-game-active #gameBoard .team2v2-capture-pieces,
body[data-ui-theme="light"].team2v2-game-active #gameBoard .team2v2-capture-pieces { color:#223746; }

@media (max-width:640px) {
  body.team2v2-game-active #gameBoard #capturedByBlack,
  body.team2v2-game-active #gameBoard #capturedByWhite {
    min-height:22px !important;
    height:22px !important;
    gap:5px !important;
    padding:2px 6px !important;
  }
  body.team2v2-game-active #gameBoard .team2v2-capture-label { font-size:7.5px; }
  body.team2v2-game-active #gameBoard .team2v2-capture-count { min-width:16px; height:16px; font-size:8px; }
  body.team2v2-game-active #gameBoard .captured-empty { font-size:9px !important; }
  body.team2v2-game-active #gameBoard .team2v2-capture-pieces { font-size:12px; }
}

/* =====================================================================
   ChessMondo v9.1.7 — Game Modes row visual identity
   Scope only: Game Modes hub rows. Pure CSS effects; no image assets.
   ===================================================================== */
.game-modes-list .game-mode-row {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  grid-template-columns:54px minmax(0,1fr) clamp(118px,17vw,188px) 34px !important;
  min-height:108px;
  padding:17px 14px !important;
  border:1px solid rgba(128,160,181,.17) !important;
  border-radius:16px !important;
  background:
    linear-gradient(105deg,rgba(255,255,255,.017),transparent 42%),
    rgba(8,14,21,.62) !important;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease !important;
}
.game-modes-list .game-mode-row::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.32;
  background:linear-gradient(90deg,transparent 0 54%,rgba(64,190,210,.035) 72%,transparent 100%);
}
.game-modes-list .game-mode-row:hover,
.game-modes-list .game-mode-row:focus-visible {
  padding-left:14px !important;
  transform:translateY(-1px);
  border-color:rgba(80,184,202,.30) !important;
  background:
    linear-gradient(105deg,rgba(255,255,255,.024),transparent 42%),
    rgba(9,16,24,.78) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.025);
}
.game-modes-list .game-mode-row + .game-mode-row { margin-top:12px; }
.game-modes-list .game-mode-row-icon,
.game-modes-list .game-mode-row-copy,
.game-modes-list .game-mode-row-fx,
.game-modes-list .game-mode-row-arrow { position:relative; z-index:2; }

/* One identical navigation control for every mode row. */
.game-modes-list .game-mode-row-arrow {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  justify-self:end;
  border:1px solid rgba(111,148,171,.20);
  border-radius:9px;
  background:rgba(89,132,160,.055);
  color:#718796;
  font:500 22px/1 'Rajdhani',system-ui,sans-serif;
  text-align:center;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.game-modes-list .game-mode-row:hover .game-mode-row-arrow,
.game-modes-list .game-mode-row:focus-visible .game-mode-row-arrow {
  color:#53dfc7;
  border-color:rgba(42,211,183,.32);
  background:rgba(42,211,183,.075);
  transform:translateX(2px);
}

/* Shared no-image visual stage. */
.game-mode-row-fx {
  width:100%;
  height:68px;
  align-self:center;
  justify-self:stretch;
  overflow:hidden;
  border-radius:13px;
  border:1px solid rgba(113,149,173,.10);
  background:linear-gradient(180deg,rgba(4,10,16,.12),rgba(4,10,16,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  pointer-events:none;
}
.game-mode-row-fx::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,14,21,.82),transparent 24%,transparent 76%,rgba(8,14,21,.54));
}

/* Drunk Chess: a board physically sways while a liquid-light wave crosses it. */
.game-mode-row-fx-drunk {
  background:
    radial-gradient(circle at 78% 32%,rgba(182,102,255,.12),transparent 30%),
    linear-gradient(180deg,rgba(30,15,39,.12),rgba(8,13,21,.32));
}
.gmfx-drunk-board {
  position:absolute;
  width:118px;
  height:56px;
  left:50%;
  top:7px;
  transform:translateX(-50%) perspective(190px) rotateX(58deg) rotateZ(-3deg);
  transform-origin:50% 60%;
  border:1px solid rgba(197,166,225,.17);
  border-radius:7px;
  opacity:.68;
  background-color:#111927;
  background-image:
    linear-gradient(45deg,rgba(171,118,211,.16) 25%,transparent 25%,transparent 75%,rgba(171,118,211,.16) 75%),
    linear-gradient(45deg,rgba(171,118,211,.16) 25%,transparent 25%,transparent 75%,rgba(171,118,211,.16) 75%);
  background-size:22px 22px;
  background-position:0 0,11px 11px;
  box-shadow:0 10px 24px rgba(88,45,121,.12);
  animation:cmDrunkBoardSway 3.6s ease-in-out infinite;
}
.gmfx-drunk-wave {
  position:absolute;
  left:12%;
  right:8%;
  bottom:-24px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(42,211,183,.04),rgba(178,83,232,.32),rgba(255,91,139,.18),rgba(42,211,183,.04));
  filter:blur(1px);
  opacity:.8;
  animation:cmDrunkWave 3.2s ease-in-out infinite;
}
.gmfx-drunk-pieces::before,
.gmfx-drunk-pieces::after {
  position:absolute;
  top:20px;
  color:rgba(235,227,247,.62);
  font:400 29px/1 Georgia,serif;
  text-shadow:0 0 14px rgba(179,106,239,.20);
  animation:cmDrunkPiece 3.6s ease-in-out infinite;
}
.gmfx-drunk-pieces::before { content:'♞'; left:31%; }
.gmfx-drunk-pieces::after { content:'♜'; right:29%; animation-delay:-1.8s; }

/* 2 VS 2: four seats, two teams, crossed turn paths and travelling pulses. */
.game-mode-row-fx-team2v2 {
  background:
    radial-gradient(circle at 22% 28%,rgba(65,183,255,.11),transparent 28%),
    radial-gradient(circle at 78% 72%,rgba(42,211,183,.10),transparent 28%),
    linear-gradient(180deg,rgba(8,18,28,.18),rgba(7,13,20,.36));
}
.gmfx-team-board {
  position:absolute;
  width:92px;
  height:54px;
  left:50%;
  top:7px;
  transform:translateX(-50%) perspective(210px) rotateX(60deg);
  border:1px solid rgba(104,179,216,.16);
  border-radius:7px;
  opacity:.62;
  background-color:#101b27;
  background-image:
    linear-gradient(45deg,rgba(62,164,198,.13) 25%,transparent 25%,transparent 75%,rgba(62,164,198,.13) 75%),
    linear-gradient(45deg,rgba(62,164,198,.13) 25%,transparent 25%,transparent 75%,rgba(62,164,198,.13) 75%);
  background-size:18px 18px;
  background-position:0 0,9px 9px;
}
.gmfx-team-lines::before,
.gmfx-team-lines::after {
  content:'';
  position:absolute;
  left:25%;
  top:33px;
  width:50%;
  height:1px;
  transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(79,188,255,.56),rgba(42,211,183,.52),transparent);
  box-shadow:0 0 8px rgba(66,183,224,.16);
}
.gmfx-team-lines::before { transform:rotate(19deg); }
.gmfx-team-lines::after { transform:rotate(-19deg); }
.gmfx-team-nodes::before,
.gmfx-team-nodes::after {
  content:'';
  position:absolute;
  inset:12px 24px;
  border-radius:10px;
  background:
    radial-gradient(circle at 5% 12%,#85cfff 0 3px,rgba(133,207,255,.18) 4px 7px,transparent 8px),
    radial-gradient(circle at 95% 12%,#61e2ca 0 3px,rgba(97,226,202,.18) 4px 7px,transparent 8px),
    radial-gradient(circle at 5% 88%,#61e2ca 0 3px,rgba(97,226,202,.18) 4px 7px,transparent 8px),
    radial-gradient(circle at 95% 88%,#85cfff 0 3px,rgba(133,207,255,.18) 4px 7px,transparent 8px);
  animation:cmTeamNodes 2.4s ease-in-out infinite;
}
.gmfx-team-nodes::after {
  inset:auto;
  width:7px;
  height:7px;
  left:25%;
  top:17px;
  border-radius:50%;
  background:#b8f7ec;
  box-shadow:0 0 10px rgba(87,225,201,.70);
  animation:cmTeamTurnPulse 3.6s linear infinite;
}

@keyframes cmDrunkBoardSway {
  0%,100% { transform:translateX(-50%) perspective(190px) rotateX(58deg) rotateZ(-3deg) translateY(0); }
  35% { transform:translateX(-50%) perspective(190px) rotateX(58deg) rotateZ(3.5deg) translateY(1px); }
  70% { transform:translateX(-50%) perspective(190px) rotateX(58deg) rotateZ(-1deg) translateY(-1px); }
}
@keyframes cmDrunkWave {
  0%,100% { transform:translateX(-8%) rotate(-2deg); opacity:.48; }
  50% { transform:translateX(10%) rotate(2deg); opacity:.92; }
}
@keyframes cmDrunkPiece {
  0%,100% { transform:translateY(1px) rotate(-4deg); opacity:.48; }
  50% { transform:translateY(-4px) rotate(5deg); opacity:.86; }
}
@keyframes cmTeamNodes {
  0%,100% { opacity:.56; filter:brightness(.92); }
  50% { opacity:1; filter:brightness(1.16); }
}
@keyframes cmTeamTurnPulse {
  0% { left:25%; top:17px; }
  25% { left:72%; top:17px; }
  50% { left:72%; top:45px; }
  75% { left:25%; top:45px; }
  100% { left:25%; top:17px; }
}

html[data-ui-theme="light"] .game-modes-list .game-mode-row,
body[data-ui-theme="light"] .game-modes-list .game-mode-row {
  border-color:rgba(57,94,116,.14) !important;
  background:rgba(255,255,255,.66) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}
html[data-ui-theme="light"] .game-modes-list .game-mode-row:hover,
html[data-ui-theme="light"] .game-modes-list .game-mode-row:focus-visible,
body[data-ui-theme="light"] .game-modes-list .game-mode-row:hover,
body[data-ui-theme="light"] .game-modes-list .game-mode-row:focus-visible {
  border-color:rgba(18,151,132,.25) !important;
  background:#fff !important;
  box-shadow:0 9px 20px rgba(54,82,100,.07),inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-ui-theme="light"] .game-mode-row-fx,
body[data-ui-theme="light"] .game-mode-row-fx {
  border-color:rgba(57,94,116,.10);
  background:linear-gradient(180deg,rgba(235,244,249,.72),rgba(228,238,244,.46));
}
html[data-ui-theme="light"] .game-mode-row-fx::after,
body[data-ui-theme="light"] .game-mode-row-fx::after {
  background:linear-gradient(90deg,rgba(255,255,255,.74),transparent 24%,transparent 76%,rgba(255,255,255,.50));
}
html[data-ui-theme="light"] .game-modes-list .game-mode-row-arrow,
body[data-ui-theme="light"] .game-modes-list .game-mode-row-arrow {
  color:#5c7585;
  border-color:rgba(57,94,116,.15);
  background:rgba(57,94,116,.045);
}

@media (max-width:760px) {
  .game-modes-list .game-mode-row {
    grid-template-columns:42px minmax(0,1fr) 76px 28px !important;
    min-height:92px;
    gap:10px !important;
    padding:13px 10px !important;
    border-radius:14px !important;
  }
  .game-modes-list .game-mode-row:hover,
  .game-modes-list .game-mode-row:focus-visible { padding-left:10px !important; }
  .game-mode-row-fx { height:54px; border-radius:10px; }
  .gmfx-drunk-board { width:76px; height:42px; top:6px; background-size:16px 16px; background-position:0 0,8px 8px; }
  .gmfx-drunk-pieces::before,.gmfx-drunk-pieces::after { top:17px; font-size:21px; }
  .gmfx-drunk-pieces::before { left:27%; }.gmfx-drunk-pieces::after { right:25%; }
  .gmfx-team-board { width:62px; height:40px; top:7px; background-size:14px 14px; background-position:0 0,7px 7px; }
  .gmfx-team-nodes::before { inset:9px 14px; }
  .gmfx-team-lines::before,.gmfx-team-lines::after { left:23%; width:54%; top:27px; }
  .game-modes-list .game-mode-row-arrow { width:27px; height:27px; border-radius:8px; font-size:20px; }
}

@media (max-width:520px) {
  .game-modes-list .game-mode-row {
    grid-template-columns:38px minmax(0,1fr) 28px !important;
  }
  .game-mode-row-fx { display:none; }
  .game-modes-list .game-mode-row-copy small { max-width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .gmfx-drunk-board,.gmfx-drunk-wave,.gmfx-drunk-pieces::before,.gmfx-drunk-pieces::after,
  .gmfx-team-nodes::before,.gmfx-team-nodes::after { animation:none !important; }
}

/* v9.1.7: Game Modes no longer exposes availability status text in any language. */
.game-modes-list .game-mode-row-status{display:none !important;}


/* =====================================================================
   ChessMondo v9.1.8 — Game Modes atmosphere / Light Mode contrast pass
   Scope: Game Modes hub only. Dark + Light together. No gameplay changes.
   ===================================================================== */

/* Keep the content above the atmospheric background layers. */
.game-modes-page { isolation:isolate; }
.game-modes-shell { position:relative; z-index:2; }
.game-modes-page::before,
.game-modes-page::after {
  content:'';
  position:fixed;
  z-index:0;
  inset:64px 0 0;
  pointer-events:none;
  background-repeat:repeat;
  will-change:background-position,opacity;
}
.game-modes-page::before {
  opacity:.12;
  background-size:230px 240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='240' viewBox='0 0 230 240'%3E%3Cg fill='%23bcefe6' fill-opacity='.55' font-family='Georgia,serif'%3E%3Ctext x='20' y='36' font-size='17'%3E%E2%99%9F%3C/text%3E%3Ctext x='126' y='72' font-size='13'%3E%E2%99%9E%3C/text%3E%3Ctext x='192' y='126' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='72' y='162' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='154' y='218' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
  animation:cmGameModesPieceRain 18s linear infinite;
}
.game-modes-page::after {
  opacity:.065;
  background-size:320px 300px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='300' viewBox='0 0 320 300'%3E%3Cg fill='%2389a7ff' fill-opacity='.52' font-family='Georgia,serif'%3E%3Ctext x='44' y='58' font-size='12'%3E%E2%99%9C%3C/text%3E%3Ctext x='246' y='92' font-size='20'%3E%E2%99%9E%3C/text%3E%3Ctext x='128' y='154' font-size='13'%3E%E2%99%9F%3C/text%3E%3Ctext x='276' y='228' font-size='11'%3E%E2%99%9D%3C/text%3E%3Ctext x='72' y='272' font-size='17'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
  animation:cmGameModesPieceRainSlow 29s linear infinite;
}

/* A little more product depth in Dark Mode without changing the layout. */
.game-modes-list .game-mode-row {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(105,154,181,.22) !important;
  background:
    linear-gradient(115deg,rgba(255,255,255,.024),transparent 35%,rgba(48,116,151,.035)),
    rgba(8,15,23,.82) !important;
  box-shadow:
    0 15px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 -1px 0 rgba(39,83,107,.10) !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease,padding .18s ease !important;
}
.game-modes-list .game-mode-row:hover,
.game-modes-list .game-mode-row:focus-visible {
  transform:translateY(-2px);
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(42,211,183,.10) !important;
}

/* Whole-card Drunk Chess atmosphere: liquid colour drift + warped board bands. */
.game-mode-row-drunk::before {
  content:'';
  position:absolute;
  z-index:0;
  inset:-80% -22%;
  pointer-events:none;
  opacity:.34;
  background:
    radial-gradient(ellipse at 18% 44%,rgba(176,77,230,.24),transparent 29%),
    radial-gradient(ellipse at 64% 62%,rgba(255,83,146,.15),transparent 24%),
    radial-gradient(ellipse at 90% 24%,rgba(42,211,183,.13),transparent 20%);
  filter:blur(18px);
  animation:cmDrunkRowLiquid 9s ease-in-out infinite alternate;
}
.game-mode-row-drunk::after {
  content:'';
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background:
    repeating-linear-gradient(105deg,transparent 0 42px,rgba(184,117,235,.10) 43px 44px,transparent 45px 84px),
    linear-gradient(100deg,transparent 0 24%,rgba(185,103,240,.10) 44%,rgba(255,104,157,.07) 56%,transparent 78%);
  background-size:170% 100%,160% 100%;
  animation:cmDrunkRowBand 8s ease-in-out infinite;
}

/* Whole-card 2 VS 2 atmosphere: tactical team paths and moving turn pulse. */
.game-mode-row-team2v2::before {
  content:'';
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background:
    radial-gradient(circle at 10% 20%,rgba(69,177,255,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 90% 20%,rgba(55,221,190,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 10% 80%,rgba(55,221,190,.20) 0 2px,transparent 3px),
    radial-gradient(circle at 90% 80%,rgba(69,177,255,.20) 0 2px,transparent 3px),
    linear-gradient(18deg,transparent 48.8%,rgba(69,177,255,.12) 49.4%,rgba(69,177,255,.12) 50.2%,transparent 50.8%),
    linear-gradient(-18deg,transparent 48.8%,rgba(55,221,190,.11) 49.4%,rgba(55,221,190,.11) 50.2%,transparent 50.8%);
  background-size:100% 100%;
  animation:cmTeamRowBreath 4.8s ease-in-out infinite;
}
.game-mode-row-team2v2::after {
  content:'';
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  width:22%;
  left:-24%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(96,210,255,.035),rgba(86,239,207,.13),rgba(96,210,255,.035),transparent);
  animation:cmTeamRowSweep 7.2s cubic-bezier(.45,.02,.35,.98) infinite;
}

/* Keep all real row content above the full-row atmosphere. */
.game-modes-list .game-mode-row > * { position:relative; z-index:3; }
.game-modes-list .game-mode-row-fx { z-index:4; }
.game-modes-list .game-mode-row-arrow { z-index:5; }

/* LIGHT MODE: use a deliberate complementary violet accent instead of pale teal. */
html[data-ui-theme="light"] body.game-modes-page-open .top-brand-section-context,
body[data-ui-theme="light"].game-modes-page-open .top-brand-section-context,
html[data-ui-theme="light"] .game-modes-kicker,
body[data-ui-theme="light"] .game-modes-kicker {
  color:#6845c6 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] body.game-modes-page-open .top-brand-section-context::after,
body[data-ui-theme="light"].game-modes-page-open .top-brand-section-context::after {
  background:#6845c6 !important;
}
html[data-ui-theme="light"] body.game-modes-page-open .top-bar,
body[data-ui-theme="light"].game-modes-page-open .top-bar {
  border-bottom-color:rgba(104,69,198,.20) !important;
}
html[data-ui-theme="light"] .game-modes-main-menu,
body[data-ui-theme="light"] .game-modes-main-menu {
  border-color:rgba(104,69,198,.26) !important;
  background:
    linear-gradient(115deg,rgba(104,69,198,.10),rgba(74,139,207,.055) 53%,rgba(255,255,255,.90) 84%),
    rgba(255,255,255,.92) !important;
  box-shadow:
    inset 3px 0 0 rgba(104,69,198,.68),
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 28px rgba(52,68,86,.09) !important;
}
html[data-ui-theme="light"] .game-modes-main-menu-icon,
body[data-ui-theme="light"] .game-modes-main-menu-icon {
  border-color:rgba(104,69,198,.28) !important;
  background:linear-gradient(145deg,rgba(104,69,198,.11),rgba(77,157,219,.08)) !important;
}
html[data-ui-theme="light"] .game-modes-main-menu-icon::before,
body[data-ui-theme="light"] .game-modes-main-menu-icon::before { background:#6845c6 !important; }
html[data-ui-theme="light"] .game-modes-main-menu-arrow,
body[data-ui-theme="light"] .game-modes-main-menu-arrow {
  color:#6845c6 !important;
  border-color:rgba(104,69,198,.20) !important;
  background:rgba(104,69,198,.055) !important;
}

html[data-ui-theme="light"] .game-modes-list .game-mode-row,
body[data-ui-theme="light"] .game-modes-list .game-mode-row {
  border-color:rgba(80,77,129,.22) !important;
  background:
    linear-gradient(118deg,rgba(108,78,193,.055),rgba(255,255,255,.94) 36%,rgba(72,154,199,.045) 100%) !important;
  box-shadow:
    0 15px 34px rgba(48,66,82,.10),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(73,87,137,.08) !important;
}
html[data-ui-theme="light"] .game-modes-list .game-mode-row:hover,
html[data-ui-theme="light"] .game-modes-list .game-mode-row:focus-visible,
body[data-ui-theme="light"] .game-modes-list .game-mode-row:hover,
body[data-ui-theme="light"] .game-modes-list .game-mode-row:focus-visible {
  border-color:rgba(104,69,198,.40) !important;
  background:
    linear-gradient(118deg,rgba(104,69,198,.085),#fff 38%,rgba(59,146,197,.065) 100%) !important;
  box-shadow:
    0 18px 42px rgba(56,70,91,.14),
    inset 0 1px 0 #fff,
    inset 3px 0 0 rgba(104,69,198,.34) !important;
}
html[data-ui-theme="light"] .game-modes-list .game-mode-row-arrow,
body[data-ui-theme="light"] .game-modes-list .game-mode-row-arrow {
  color:#6648b9 !important;
  border-color:rgba(104,69,198,.20) !important;
  background:rgba(104,69,198,.055) !important;
}
html[data-ui-theme="light"] .game-modes-list .game-mode-row:hover .game-mode-row-arrow,
html[data-ui-theme="light"] .game-modes-list .game-mode-row:focus-visible .game-mode-row-arrow,
body[data-ui-theme="light"] .game-modes-list .game-mode-row:hover .game-mode-row-arrow,
body[data-ui-theme="light"] .game-modes-list .game-mode-row:focus-visible .game-mode-row-arrow {
  color:#5936bd !important;
  border-color:rgba(104,69,198,.36) !important;
  background:rgba(104,69,198,.095) !important;
}
html[data-ui-theme="light"] .game-mode-row-fx,
body[data-ui-theme="light"] .game-mode-row-fx {
  border-color:rgba(83,79,133,.17) !important;
  background:
    radial-gradient(circle at 48% 40%,rgba(104,69,198,.05),transparent 52%),
    linear-gradient(180deg,rgba(247,246,252,.96),rgba(232,239,247,.82)) !important;
  box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(54,73,92,.045) !important;
}
html[data-ui-theme="light"] .game-mode-row-fx::after,
body[data-ui-theme="light"] .game-mode-row-fx::after {
  background:linear-gradient(90deg,rgba(247,247,251,.90),transparent 24%,transparent 76%,rgba(247,247,251,.72)) !important;
}
html[data-ui-theme="light"] .game-mode-row-drunk::before,
body[data-ui-theme="light"] .game-mode-row-drunk::before { opacity:.22; }
html[data-ui-theme="light"] .game-mode-row-team2v2::before,
body[data-ui-theme="light"] .game-mode-row-team2v2::before { opacity:.24; }
html[data-ui-theme="light"] .game-mode-row-team2v2::after,
body[data-ui-theme="light"] .game-mode-row-team2v2::after {
  background:linear-gradient(90deg,transparent,rgba(75,142,202,.02),rgba(104,69,198,.10),rgba(75,142,202,.02),transparent);
}
html[data-ui-theme="light"] .game-modes-page::before,
body[data-ui-theme="light"] .game-modes-page::before {
  opacity:.105;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='240' viewBox='0 0 230 240'%3E%3Cg fill='%235a477f' fill-opacity='.62' font-family='Georgia,serif'%3E%3Ctext x='20' y='36' font-size='17'%3E%E2%99%9F%3C/text%3E%3Ctext x='126' y='72' font-size='13'%3E%E2%99%9E%3C/text%3E%3Ctext x='192' y='126' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='72' y='162' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='154' y='218' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
}
html[data-ui-theme="light"] .game-modes-page::after,
body[data-ui-theme="light"] .game-modes-page::after {
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='300' viewBox='0 0 320 300'%3E%3Cg fill='%23527895' fill-opacity='.58' font-family='Georgia,serif'%3E%3Ctext x='44' y='58' font-size='12'%3E%E2%99%9C%3C/text%3E%3Ctext x='246' y='92' font-size='20'%3E%E2%99%9E%3C/text%3E%3Ctext x='128' y='154' font-size='13'%3E%E2%99%9F%3C/text%3E%3Ctext x='276' y='228' font-size='11'%3E%E2%99%9D%3C/text%3E%3Ctext x='72' y='272' font-size='17'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
}

@keyframes cmGameModesPieceRain {
  from { background-position:0 -240px; }
  to   { background-position:0 0; }
}
@keyframes cmGameModesPieceRainSlow {
  from { background-position:70px -300px; }
  to   { background-position:70px 0; }
}
@keyframes cmDrunkRowLiquid {
  0%   { transform:translate3d(-5%,4%,0) rotate(-1deg) scale(1); }
  50%  { transform:translate3d(5%,-3%,0) rotate(1.5deg) scale(1.05); }
  100% { transform:translate3d(1%,5%,0) rotate(-.5deg) scale(1.02); }
}
@keyframes cmDrunkRowBand {
  0%,100% { background-position:-30% 0,-35% 0; opacity:.14; }
  50%     { background-position:70% 0,65% 0; opacity:.28; }
}
@keyframes cmTeamRowBreath {
  0%,100% { filter:brightness(.90); opacity:.25; }
  50%     { filter:brightness(1.18); opacity:.44; }
}
@keyframes cmTeamRowSweep {
  0%,12% { left:-24%; opacity:0; }
  20%    { opacity:1; }
  74%    { opacity:.78; }
  86%,100% { left:112%; opacity:0; }
}

@media (prefers-reduced-motion:reduce) {
  .game-modes-page::before,.game-modes-page::after,
  .game-mode-row-drunk::before,.game-mode-row-drunk::after,
  .game-mode-row-team2v2::before,.game-mode-row-team2v2::after {
    animation:none !important;
  }
}

/* =====================================================================
   ChessMondo v9.1.10 — Mobile topbar + atmospheric layering polish
   Scope: Game Modes + Main Menu UI only. Frontend-only visual refinement.
   ===================================================================== */

/* Mobile Game Modes top bar: keep the normal main-menu brand area clean. */
@media (max-width: 640px) {
  body.game-modes-page-open .top-brand-section-context {
    display: none !important;
  }
}

/* Keep atmospheric rain behind panels and make the panel surfaces feel more real. */
.game-modes-main-menu,
.game-modes-list .game-mode-row {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
}
html[data-ui-theme="light"] .game-modes-main-menu,
body[data-ui-theme="light"] .game-modes-main-menu {
  background:
    linear-gradient(115deg, rgba(104,69,198,.14), rgba(79,146,213,.07) 52%, rgba(255,255,255,.95) 84%),
    rgba(255,255,255,.90) !important;
  box-shadow:
    inset 3px 0 0 rgba(104,69,198,.72),
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 28px rgba(52,68,86,.10) !important;
}
html[data-ui-theme="light"] .game-modes-list .game-mode-row,
body[data-ui-theme="light"] .game-modes-list .game-mode-row {
  background:
    linear-gradient(118deg, rgba(108,78,193,.075), rgba(255,255,255,.955) 38%, rgba(72,154,199,.06) 100%) !important;
  box-shadow:
    0 15px 34px rgba(48,66,82,.11),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(73,87,137,.08) !important;
}

/* White mode: darker falling pieces so they stay readable, but still clearly background. */
html[data-ui-theme="light"] .game-modes-page::before,
body[data-ui-theme="light"] .game-modes-page::before {
  opacity: .22 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='240' viewBox='0 0 230 240'%3E%3Cg fill='%233a315a' fill-opacity='.90' font-family='Georgia,serif'%3E%3Ctext x='20' y='36' font-size='17'%3E%E2%99%9F%3C/text%3E%3Ctext x='126' y='72' font-size='13'%3E%E2%99%9E%3C/text%3E%3Ctext x='192' y='126' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='72' y='162' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='154' y='218' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
}
html[data-ui-theme="light"] .game-modes-page::after,
body[data-ui-theme="light"] .game-modes-page::after {
  opacity: .12 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='300' viewBox='0 0 320 300'%3E%3Cg fill='%23405b73' fill-opacity='.84' font-family='Georgia,serif'%3E%3Ctext x='44' y='58' font-size='12'%3E%E2%99%9C%3C/text%3E%3Ctext x='246' y='92' font-size='20'%3E%E2%99%9E%3C/text%3E%3Ctext x='128' y='154' font-size='13'%3E%E2%99%9F%3C/text%3E%3Ctext x='276' y='228' font-size='11'%3E%E2%99%9D%3C/text%3E%3Ctext x='72' y='272' font-size='17'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Stronger, quicker card atmospheres in both themes. */
.game-mode-row-drunk::before {
  opacity: .48 !important;
  filter: blur(16px) saturate(1.18);
  animation: cmDrunkRowLiquid 5.8s ease-in-out infinite alternate !important;
}
.game-mode-row-drunk::after {
  opacity: .34 !important;
  animation: cmDrunkRowBand 4.8s ease-in-out infinite !important;
}
.game-mode-row-team2v2::before {
  opacity: .46 !important;
  filter: brightness(1.2) saturate(1.15);
  animation: cmTeamRowBreath 2.9s ease-in-out infinite !important;
}
.game-mode-row-team2v2::after {
  width: 32% !important;
  background: linear-gradient(90deg, transparent, rgba(96,210,255,.08), rgba(86,239,207,.24), rgba(96,210,255,.08), transparent) !important;
  animation: cmTeamRowSweep 4.2s cubic-bezier(.45,.02,.35,.98) infinite !important;
}
.game-mode-row-fx {
  filter: saturate(1.16) brightness(1.08);
}
.gmfx-drunk-board {
  opacity: .98 !important;
  box-shadow: 0 14px 28px rgba(118,62,161,.24), 0 0 20px rgba(191,111,255,.16) !important;
  animation: cmDrunkBoardSway 2.15s ease-in-out infinite !important;
}
.gmfx-drunk-wave {
  opacity: 1 !important;
  filter: blur(.9px) saturate(1.2);
  animation: cmDrunkWave 1.72s ease-in-out infinite !important;
}
.gmfx-drunk-pieces::before,
.gmfx-drunk-pieces::after {
  text-shadow: 0 0 22px rgba(179,106,239,.44), 0 0 9px rgba(255,255,255,.12) !important;
  animation: cmDrunkPiece 2.1s ease-in-out infinite !important;
}
.gmfx-team-board {
  opacity: .92 !important;
  box-shadow: 0 12px 22px rgba(61,130,184,.14), 0 0 16px rgba(89,224,202,.11) !important;
}
.gmfx-team-lines::before,
.gmfx-team-lines::after {
  box-shadow: 0 0 16px rgba(66,183,224,.38) !important;
}
.gmfx-team-nodes::before {
  filter: brightness(1.18) saturate(1.12);
  animation: cmTeamNodes 1.45s ease-in-out infinite !important;
}
.gmfx-team-nodes::after {
  width: 9px !important;
  height: 9px !important;
  box-shadow: 0 0 18px rgba(87,225,201,.98) !important;
  animation: cmTeamTurnPulse 2s linear infinite !important;
}

/* Main Menu ambient falling pieces behind the interface, including gold accents. */
#menuHub {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#menuHub::before,
#menuHub::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  will-change: background-position, opacity;
}
#menuHub::before {
  opacity: .10;
  background-size: 250px 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='260' viewBox='0 0 250 260'%3E%3Cg fill='%237bc8ff' fill-opacity='.44' font-family='Georgia,serif'%3E%3Ctext x='26' y='44' font-size='16'%3E%E2%99%9F%3C/text%3E%3Ctext x='150' y='86' font-size='14'%3E%E2%99%9E%3C/text%3E%3Ctext x='194' y='148' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='82' y='194' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='168' y='236' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
  animation: cmMenuPieceRain 19s linear infinite;
}
#menuHub::after {
  opacity: .09;
  background-size: 320px 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23e4bd62' fill-opacity='.50' font-family='Georgia,serif'%3E%3Ctext x='56' y='64' font-size='13'%3E%E2%99%95%3C/text%3E%3Ctext x='244' y='114' font-size='17'%3E%E2%99%94%3C/text%3E%3Ctext x='118' y='182' font-size='15'%3E%E2%99%9B%3C/text%3E%3Ctext x='258' y='252' font-size='14'%3E%E2%99%9C%3C/text%3E%3Ctext x='78' y='286' font-size='16'%3E%E2%99%9A%3C/text%3E%3C/g%3E%3C/svg%3E");
  animation: cmMenuPieceRainSlow 30s linear infinite;
}
#menuHub > * {
  position: relative;
  z-index: 1;
}
html[data-ui-theme="light"] #menuHub::before,
body[data-ui-theme="light"] #menuHub::before {
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='260' viewBox='0 0 250 260'%3E%3Cg fill='%23415468' fill-opacity='.82' font-family='Georgia,serif'%3E%3Ctext x='26' y='44' font-size='16'%3E%E2%99%9F%3C/text%3E%3Ctext x='150' y='86' font-size='14'%3E%E2%99%9E%3C/text%3E%3Ctext x='194' y='148' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='82' y='194' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='168' y='236' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
}
html[data-ui-theme="light"] #menuHub::after,
body[data-ui-theme="light"] #menuHub::after {
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23c8952b' fill-opacity='.66' font-family='Georgia,serif'%3E%3Ctext x='56' y='64' font-size='13'%3E%E2%99%95%3C/text%3E%3Ctext x='244' y='114' font-size='17'%3E%E2%99%94%3C/text%3E%3Ctext x='118' y='182' font-size='15'%3E%E2%99%9B%3C/text%3E%3Ctext x='258' y='252' font-size='14'%3E%E2%99%9C%3C/text%3E%3Ctext x='78' y='286' font-size='16'%3E%E2%99%9A%3C/text%3E%3C/g%3E%3C/svg%3E");
}

@keyframes cmMenuPieceRain {
  from { background-position: 0 -260px; }
  to   { background-position: 0 0; }
}
@keyframes cmMenuPieceRainSlow {
  from { background-position: 90px -320px; }
  to   { background-position: 90px 0; }
}

@media (prefers-reduced-motion: reduce) {
  #menuHub::before,
  #menuHub::after {
    animation: none !important;
  }
}

/* =====================================================================
   ChessMondo v9.1.11 — Game Modes mobile header + menu rain refinement
   - Mobile Game Modes header now matches the normal main-menu header.
   - Falling pieces stay clearly behind Game Modes panels in light mode.
   - Main Menu gets clearer white + gold falling-piece atmosphere.
   ===================================================================== */

/* Keep all Game Modes content above the atmospheric rain layers. */
.game-modes-page { isolation:isolate; }
.game-modes-shell,
.game-modes-page-head,
.game-modes-intro,
.game-modes-main-menu,
.game-modes-list,
.game-mode-row {
  position: relative;
  z-index: 2;
}
.game-modes-main-menu,
.game-mode-row {
  overflow: hidden;
}

/* Mobile: do NOT inject the Game Modes controller/context into the top bar.
   Keep the header identical to the normal main menu header on phones/tablets. */
@media (max-width: 860px) {
  body.game-modes-page-open .top-brand-section-context {
    display: none !important;
  }
  body.game-modes-page-open .top-brand {
    min-width: 0;
    gap: 10px;
  }
}

/* White mode: darker falling pieces so they read better, but remain background. */
html[data-ui-theme="light"] .game-modes-page::before,
body[data-ui-theme="light"] .game-modes-page::before {
  opacity: .28 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='240' viewBox='0 0 230 240'%3E%3Cg fill='%23483f67' fill-opacity='.96' font-family='Georgia,serif'%3E%3Ctext x='20' y='36' font-size='17'%3E%E2%99%9F%3C/text%3E%3Ctext x='126' y='72' font-size='13'%3E%E2%99%9E%3C/text%3E%3Ctext x='192' y='126' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='72' y='162' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='154' y='218' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
}
html[data-ui-theme="light"] .game-modes-page::after,
body[data-ui-theme="light"] .game-modes-page::after {
  opacity: .16 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='300' viewBox='0 0 320 300'%3E%3Cg fill='%2349657b' fill-opacity='.92' font-family='Georgia,serif'%3E%3Ctext x='44' y='58' font-size='12'%3E%E2%99%9C%3C/text%3E%3Ctext x='246' y='92' font-size='20'%3E%E2%99%9E%3C/text%3E%3Ctext x='128' y='154' font-size='13'%3E%E2%99%9F%3C/text%3E%3Ctext x='276' y='228' font-size='11'%3E%E2%99%9D%3C/text%3E%3Ctext x='72' y='272' font-size='17'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Make sure the glass panels stay visually in front of the page rain. */
html[data-ui-theme="light"] .game-modes-main-menu,
body[data-ui-theme="light"] .game-modes-main-menu {
  background:
    linear-gradient(115deg, rgba(104,69,198,.12), rgba(74,139,207,.065) 53%, rgba(255,255,255,.94) 84%),
    rgba(255,255,255,.95) !important;
}
html[data-ui-theme="light"] .game-modes-list .game-mode-row,
body[data-ui-theme="light"] .game-modes-list .game-mode-row {
  background:
    linear-gradient(118deg, rgba(108,78,193,.07), rgba(255,255,255,.965) 36%, rgba(72,154,199,.055) 100%) !important;
}

/* Main Menu ambient falling pieces (white + gold) behind the menu interface. */
#menuHub {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#menuHub::before,
#menuHub::after {
  pointer-events: none;
  z-index: 0;
}
#menuHub::before {
  opacity: .13 !important;
}
#menuHub::after {
  opacity: .11 !important;
}
#menuHub > * {
  position: relative;
  z-index: 1;
}
html[data-ui-theme="light"] #menuHub::before,
body[data-ui-theme="light"] #menuHub::before {
  opacity: .19 !important;
}
html[data-ui-theme="light"] #menuHub::after,
body[data-ui-theme="light"] #menuHub::after {
  opacity: .15 !important;
}


/* =====================================================================
   ChessMondo v9.1.11 — mobile Game Modes header parity + stronger main-menu rain
   Fix intent:
   - On mobile, Game Modes must keep the exact same top header as the main menu.
   - Hide the injected Game Modes context text + controller icon beside the logo.
   - Add/strengthen main-menu falling-piece atmosphere with white + gold pieces.
   ===================================================================== */

/* Strong mobile guarantee: never show the extra Game Modes context in the top bar on phones/tablets. */
@media (max-width: 1024px) {
  body.game-modes-page-open .top-brand-section-context,
  body.game-modes-page-open .top-brand-section-context::before,
  body.game-modes-page-open .top-brand-section-context::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Keep Game Modes rain behind panels in all themes. */
.game-modes-page::before,
.game-modes-page::after {
  z-index: 0 !important;
  pointer-events: none !important;
}
.game-modes-shell,
.game-modes-page-head,
.game-modes-intro,
.game-modes-main-menu,
.game-modes-list,
.game-mode-row {
  position: relative;
  z-index: 2;
}

/* Main Menu: clearer white + gold falling chess pieces behind the dashboard. */
#menuHub {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#menuHub::before,
#menuHub::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  background-position: 0 0;
  will-change: background-position, opacity;
}
#menuHub::before {
  opacity: .16;
  background-size: 250px 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='260' viewBox='0 0 250 260'%3E%3Cg fill='%23dce9fb' fill-opacity='.52' font-family='Georgia,serif'%3E%3Ctext x='26' y='44' font-size='16'%3E%E2%99%9F%3C/text%3E%3Ctext x='150' y='86' font-size='14'%3E%E2%99%9E%3C/text%3E%3Ctext x='194' y='148' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='82' y='194' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='168' y='236' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
  animation: cmMenuPieceRain 17s linear infinite;
}
#menuHub::after {
  opacity: .14;
  background-size: 320px 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23d9ad46' fill-opacity='.58' font-family='Georgia,serif'%3E%3Ctext x='56' y='64' font-size='13'%3E%E2%99%95%3C/text%3E%3Ctext x='244' y='114' font-size='17'%3E%E2%99%94%3C/text%3E%3Ctext x='118' y='182' font-size='15'%3E%E2%99%9B%3C/text%3E%3Ctext x='258' y='252' font-size='14'%3E%E2%99%9C%3C/text%3E%3Ctext x='78' y='286' font-size='16'%3E%E2%99%9A%3C/text%3E%3C/g%3E%3C/svg%3E");
  animation: cmMenuPieceRainSlow 28s linear infinite;
}
#menuHub > * {
  position: relative;
  z-index: 1;
}
html[data-ui-theme="light"] #menuHub::before,
body[data-ui-theme="light"] #menuHub::before {
  opacity: .21;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='260' viewBox='0 0 250 260'%3E%3Cg fill='%234e6077' fill-opacity='.82' font-family='Georgia,serif'%3E%3Ctext x='26' y='44' font-size='16'%3E%E2%99%9F%3C/text%3E%3Ctext x='150' y='86' font-size='14'%3E%E2%99%9E%3C/text%3E%3Ctext x='194' y='148' font-size='18'%3E%E2%99%9C%3C/text%3E%3Ctext x='82' y='194' font-size='14'%3E%E2%99%9D%3C/text%3E%3Ctext x='168' y='236' font-size='12'%3E%E2%99%9B%3C/text%3E%3C/g%3E%3C/svg%3E");
}
html[data-ui-theme="light"] #menuHub::after,
body[data-ui-theme="light"] #menuHub::after {
  opacity: .17;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23c88b1a' fill-opacity='.70' font-family='Georgia,serif'%3E%3Ctext x='56' y='64' font-size='13'%3E%E2%99%95%3C/text%3E%3Ctext x='244' y='114' font-size='17'%3E%E2%99%94%3C/text%3E%3Ctext x='118' y='182' font-size='15'%3E%E2%99%9B%3C/text%3E%3Ctext x='258' y='252' font-size='14'%3E%E2%99%9C%3C/text%3E%3Ctext x='78' y='286' font-size='16'%3E%E2%99%9A%3C/text%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  #menuHub::before,
  #menuHub::after { animation: none !important; }
}

/* =====================================================================
   ChessMondo v9.1.12 — VERIFIED main menu falling chess-piece atmosphere
   and mobile-only topbar context removal. Frontend only.
   ===================================================================== */

/* Structural fallback; the JS also detaches the node on mobile, so even
   competing CSS specificity cannot make it visible. */
@media (max-width:1024px) {
  body.game-modes-page-open .top-bar .top-brand .top-brand-section-context {
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    max-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.game-modes-page-open .top-bar .top-brand .top-brand-section-context::before,
  body.game-modes-page-open .top-bar .top-brand .top-brand-section-context::after {
    display:none !important;
    content:none !important;
  }
}

/* The ambient layer is a sibling of the dashboard, not a child of it.  This
   makes it fill the ENTIRE Main Menu background outside the central panel. */
#gameArea.game-area { position:relative; isolation:isolate; }
#gameArea > #menuCard:not(.hidden) { position:relative !important; z-index:2 !important; }
#gameArea > .menu-ambient-rain {
  display:none;
  position:fixed;
  inset:var(--cm-menu-rain-top, 58px) 0 0 0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
  background:none;
}
#gameArea > #menuCard:not(.hidden) + .menu-ambient-rain { display:block; }
#gameArea > .menu-ambient-rain > span {
  display:block;
  position:absolute;
  inset:0;
  background-repeat:repeat;
  pointer-events:none;
  will-change:background-position;
}
#gameArea > .menu-ambient-rain > .menu-rain-white {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22290%22%20viewBox%3D%220%200%20280%20290%22%3E%3Cg%20fill%3D%22%23eef3ff%22%20fill-opacity%3D%22.82%22%20font-family%3D%22Georgia%2Cserif%22%3E%3Ctext%20x%3D%2221%22%20y%3D%2237%22%20font-size%3D%2217%22%3E%E2%99%99%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%2265%22%20font-size%3D%2219%22%3E%E2%99%98%3C%2Ftext%3E%3Ctext%20x%3D%22230%22%20y%3D%22120%22%20font-size%3D%2217%22%3E%E2%99%96%3C%2Ftext%3E%3Ctext%20x%3D%2266%22%20y%3D%22205%22%20font-size%3D%2218%22%3E%E2%99%97%3C%2Ftext%3E%3Ctext%20x%3D%22189%22%20y%3D%22245%22%20font-size%3D%2214%22%3E%E2%99%95%3C%2Ftext%3E%3Ctext%20x%3D%22252%22%20y%3D%22265%22%20font-size%3D%2211%22%3E%E2%99%99%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:280px 290px;
  opacity:.24;
  animation:cmMainMenuRainWhite9112 17s linear infinite;
}
#gameArea > .menu-ambient-rain > .menu-rain-gold {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22350%22%20height%3D%22320%22%20viewBox%3D%220%200%20350%20320%22%3E%3Cg%20fill%3D%22%23f1c75d%22%20fill-opacity%3D%22.90%22%20font-family%3D%22Georgia%2Cserif%22%3E%3Ctext%20x%3D%2267%22%20y%3D%2260%22%20font-size%3D%2216%22%3E%E2%99%95%3C%2Ftext%3E%3Ctext%20x%3D%22260%22%20y%3D%2299%22%20font-size%3D%2220%22%3E%E2%99%94%3C%2Ftext%3E%3Ctext%20x%3D%22180%22%20y%3D%22184%22%20font-size%3D%2213%22%3E%E2%99%9B%3C%2Ftext%3E%3Ctext%20x%3D%2224%22%20y%3D%22261%22%20font-size%3D%2216%22%3E%E2%99%9C%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%22289%22%20font-size%3D%2215%22%3E%E2%99%98%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:350px 320px;
  opacity:.21;
  animation:cmMainMenuRainGold9112 27s linear infinite;
}
html[data-ui-theme="light"] #gameArea > .menu-ambient-rain > .menu-rain-white,
body[data-ui-theme="light"] #gameArea > .menu-ambient-rain > .menu-rain-white {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22290%22%20viewBox%3D%220%200%20280%20290%22%3E%3Cg%20fill%3D%22%2350647a%22%20fill-opacity%3D%22.83%22%20font-family%3D%22Georgia%2Cserif%22%3E%3Ctext%20x%3D%2221%22%20y%3D%2237%22%20font-size%3D%2217%22%3E%E2%99%99%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%2265%22%20font-size%3D%2219%22%3E%E2%99%98%3C%2Ftext%3E%3Ctext%20x%3D%22230%22%20y%3D%22120%22%20font-size%3D%2217%22%3E%E2%99%96%3C%2Ftext%3E%3Ctext%20x%3D%2266%22%20y%3D%22205%22%20font-size%3D%2218%22%3E%E2%99%97%3C%2Ftext%3E%3Ctext%20x%3D%22189%22%20y%3D%22245%22%20font-size%3D%2214%22%3E%E2%99%95%3C%2Ftext%3E%3Ctext%20x%3D%22252%22%20y%3D%22265%22%20font-size%3D%2211%22%3E%E2%99%99%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  opacity:.23;
}
html[data-ui-theme="light"] #gameArea > .menu-ambient-rain > .menu-rain-gold,
body[data-ui-theme="light"] #gameArea > .menu-ambient-rain > .menu-rain-gold {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22350%22%20height%3D%22320%22%20viewBox%3D%220%200%20350%20320%22%3E%3Cg%20fill%3D%22%23b88118%22%20fill-opacity%3D%22.85%22%20font-family%3D%22Georgia%2Cserif%22%3E%3Ctext%20x%3D%2267%22%20y%3D%2260%22%20font-size%3D%2216%22%3E%E2%99%95%3C%2Ftext%3E%3Ctext%20x%3D%22260%22%20y%3D%2299%22%20font-size%3D%2220%22%3E%E2%99%94%3C%2Ftext%3E%3Ctext%20x%3D%22180%22%20y%3D%22184%22%20font-size%3D%2213%22%3E%E2%99%9B%3C%2Ftext%3E%3Ctext%20x%3D%2224%22%20y%3D%22261%22%20font-size%3D%2216%22%3E%E2%99%9C%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%22289%22%20font-size%3D%2215%22%3E%E2%99%98%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  opacity:.21;
}
@keyframes cmMainMenuRainWhite9112 {
  from { background-position: 0 -290px; }
  to { background-position: 0 0; }
}
@keyframes cmMainMenuRainGold9112 {
  from { background-position: 90px -320px; }
  to { background-position: 90px 0; }
}
/* Make the dashboard an opaque-enough foreground, while the full-page rain
   stays behind all click targets. No layout size or card geometry changes. */
#gameArea > #menuCard:not(.hidden) { pointer-events:auto; }
@media (max-width:1024px) {
  #gameArea > .menu-ambient-rain { inset:calc(62px + env(safe-area-inset-top)) 0 0 0; }
}
@media (prefers-reduced-motion:reduce) {
  #gameArea > .menu-ambient-rain > span { animation:none !important; }
}


/* v9.1.13 — match the normal Main Menu mobile header exactly. */
/* The existing Main Menu breakpoint hides the ChessMondo wordmark on narrow
   screens. Do not override that display rule when Game Modes opens. */
@media (max-width: 720px) {
  body.game-modes-page-open .top-bar .top-brand .top-brand-text {
    display: none !important;
  }
}
/* The Game Modes-only label/controller remain desktop-only. */
@media (max-width: 1024px) {
  body.game-modes-page-open .top-bar .top-brand .top-brand-section-context {
    display: none !important;
  }
}

/* ChessMondo v9.1.14 — one shared, pixel-stable mobile header.
   Main Menu and Game Modes use the same single top-bar DOM. The only
   mobile-mode-specific behavior is hiding the desktop context suffix. */
@media (max-width:1024px) {
  body.game-modes-page-open .top-bar {
    border-bottom-color: var(--cm-line) !important;
  }
  html[data-ui-theme="light"] body.game-modes-page-open .top-bar,
  body[data-ui-theme="light"].game-modes-page-open .top-bar {
    border-bottom-color: #d5dde6 !important;
  }
  body.game-modes-page-open .top-bar .top-brand {
    gap:10px !important;
  }
  body.game-modes-page-open .top-bar .top-brand .top-brand-section-context {
    display:none !important;
  }
}