/* =====================================================================
   ChessMondo v8.9.1 — Global Light / Dark Theme + Contrast Hotfix
   Frontend-only theme layer loaded after all legacy styles.
   ===================================================================== */

:root {
  --cm-light-bg-main: #f4f6f8;
  --cm-light-bg-surface: #ffffff;
  --cm-light-bg-elevated: #eef2f6;
  --cm-light-bg-hover: #e6ebf1;
  --cm-light-metal-1: #dfe5ec;
  --cm-light-metal-2: #c7d0da;
  --cm-light-border: #d0d8e2;
  --cm-light-border-strong: #b9c4d0;
  --cm-light-text: #111827;
  --cm-light-text-2: #334155;
  --cm-light-muted: #667085;
  --cm-light-shadow: 0 18px 48px rgba(71, 85, 105, .14);
  --cm-light-shadow-soft: 0 8px 24px rgba(71, 85, 105, .10);
}

/* ---------- Header theme toggle ---------- */
.top-theme-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  color: transparent !important;
  font-size: 0 !important;
}
.top-theme-btn:hover,
.top-theme-btn:focus-visible {
  background: rgba(255,255,255,.045) !important;
  border-color: var(--cm-line) !important;
  outline: none !important;
}
.top-theme-btn::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  background: #98a7ba;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  /* Sun means: switch from dark to light. */
  -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 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0-16h1v3h-2V2h1Zm0 17h1v3h-2v-3h1ZM2 11h3v2H2v-2Zm17 0h3v2h-3v-2ZM4.93 3.51 7.05 5.64 5.64 7.05 3.51 4.93l1.42-1.42Zm12.02 12.02 2.12 2.12-1.42 1.42-2.12-2.12 1.42-1.42Zm2.12-10.6-2.12 2.12-1.42-1.41 2.12-2.13 1.42 1.42ZM7.05 16.95l-2.12 2.12-1.42-1.42 2.13-2.12 1.41 1.42Z'/%3E%3C/svg%3E");
  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 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0-16h1v3h-2V2h1Zm0 17h1v3h-2v-3h1ZM2 11h3v2H2v-2Zm17 0h3v2h-3v-2ZM4.93 3.51 7.05 5.64 5.64 7.05 3.51 4.93l1.42-1.42Zm12.02 12.02 2.12 2.12-1.42 1.42-2.12-2.12 1.42-1.42Zm2.12-10.6-2.12 2.12-1.42-1.41 2.12-2.13 1.42 1.42ZM7.05 16.95l-2.12 2.12-1.42-1.42 2.13-2.12 1.41 1.42Z'/%3E%3C/svg%3E");
  transition: background-color .18s ease, transform .18s ease;
}
.top-theme-btn:hover::before { transform: rotate(10deg) scale(1.06); background:#b9c8dc; }

@media (max-width:640px) {
  .top-theme-btn { width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; }
  .top-theme-btn::before { width:16px; height:16px; }
}

/* =====================================================================
   LIGHT MODE
   ===================================================================== */
html[data-ui-theme="light"] {
  color-scheme: light;
  background: var(--cm-light-bg-main) !important;
  --bg: #f4f6f8;
  --card: #ffffff;
  --card-2: #eef2f6;
  --border: #d0d8e2;
  --text: #111827;
  --muted: #667085;
  --cm-bg-0: #eef2f6;
  --cm-bg-1: #f4f6f8;
  --cm-bg-2: #ffffff;
  --cm-surface: rgba(255,255,255,.94);
  --cm-surface-2: rgba(246,248,251,.96);
  --cm-surface-3: rgba(238,242,246,.96);
  --cm-line: rgba(101,116,139,.18);
  --cm-line-strong: rgba(100,116,139,.30);
  --cm-text: #111827;
  --cm-text-2: #334155;
  --cm-muted: #667085;
  --cm-shadow: 0 20px 56px rgba(71,85,105,.14);
  --cm-shadow-soft: 0 10px 28px rgba(71,85,105,.10);
}

html[data-ui-theme="light"] body {
  background:
    radial-gradient(circle at 14% -8%, rgba(76,162,255,.12), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(158,120,255,.07), transparent 24%),
    linear-gradient(135deg, #f9fafb 0%, #f3f6f9 48%, #eef2f6 100%) !important;
  color: var(--cm-light-text) !important;
}
html[data-ui-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(100,116,139,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,116,139,.045) 1px, transparent 1px) !important;
  opacity: .45 !important;
}
html[data-ui-theme="light"] ::selection { background: rgba(47,128,237,.22) !important; color:#0f172a !important; }
html[data-ui-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(100,116,139,.32) !important; }
html[data-ui-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(71,85,105,.46) !important; }

/* Header / navigation */
html[data-ui-theme="light"] .top-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,245,248,.94)) !important;
  border-bottom-color: #d5dde6 !important;
  box-shadow: 0 8px 24px rgba(71,85,105,.10), inset 0 -1px 0 rgba(255,255,255,.75) !important;
}
html[data-ui-theme="light"] .top-brand-text { color:#1f2937 !important; }
html[data-ui-theme="light"] .top-brand-logo { filter: drop-shadow(0 2px 5px rgba(47,128,237,.16)) !important; }
html[data-ui-theme="light"] .top-notifications-btn:hover,
html[data-ui-theme="light"] .top-language-btn:hover,
html[data-ui-theme="light"] .top-theme-btn:hover,
html[data-ui-theme="light"] .top-settings-btn:hover {
  background: linear-gradient(180deg,#ffffff,#e9eef4) !important;
  border-color:#ccd5df !important;
  box-shadow:0 4px 12px rgba(71,85,105,.10) !important;
}
html[data-ui-theme="light"] .top-notifications-btn::before,
html[data-ui-theme="light"] .top-language-btn::before,
html[data-ui-theme="light"] .top-settings-btn::before { background:#607086 !important; }
html[data-ui-theme="light"] .top-theme-btn::before {
  background:#607086 !important;
  /* Moon means: switch from light to dark. */
  -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='M20.4 15.6A8.5 8.5 0 0 1 8.4 3.6 9 9 0 1 0 20.4 15.6Z'/%3E%3C/svg%3E");
  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='M20.4 15.6A8.5 8.5 0 0 1 8.4 3.6 9 9 0 1 0 20.4 15.6Z'/%3E%3C/svg%3E");
}
html[data-ui-theme="light"] .top-profile {
  background: linear-gradient(180deg,rgba(255,255,255,.97),rgba(238,242,246,.95)) !important;
  border-color:#cbd5e1 !important;
  color:#1e293b !important;
  box-shadow:0 6px 18px rgba(71,85,105,.10), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .tp-caret { color:#64748b !important; }

/* Main app canvas */
html[data-ui-theme="light"] #gameScreen.screen,
html[data-ui-theme="light"] #authScreen.screen,
html[data-ui-theme="light"] .screen {
  background-color:#f3f6f9 !important;
  background-image:
    radial-gradient(circle at 14% 6%, rgba(47,128,237,.095), transparent 31%),
    radial-gradient(circle at 86% 8%, rgba(124,92,252,.055), transparent 28%),
    linear-gradient(135deg,#f9fafb,#eef2f6) !important;
  color:#111827 !important;
}
html[data-ui-theme="light"] #gameArea { color:#111827 !important; }

/* Global readable text */
html[data-ui-theme="light"] :where(h1,h2,h3,h4,h5,h6,strong,.modal-header,.arena-title,.public-game-title,.pd-name,.club-chat-title-wrap,.premium-head,.menu-feature-card strong) {
  color:#111827 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] :where(p,small,.muted,.auth-desc,.field-note,.settings-label,.menu-feature-detail,.pd-email,.public-game-meta,.public-game-players,.friends-loading,.global-presence,.premium-field-note,.posts-section-note,.settings-reward-note) {
  color:#667085 !important;
}

/* Common white / metallic surfaces */
html[data-ui-theme="light"] :where(
  .auth-card,.modal-card,.game-menu-card,.lobby-card,.feature-panel,.left-panel,.right-panel,
  .settings-panel,.profile-dropdown,.friends-modal-card,.notification-center-card,.language-selector-panel,
  .public-profile-card,.friend-profile-card,.friends-leaderboard-card,.delete-account-card,.blocked-users-card,
  .game-loading-card,.game-result-card,.rematch-card,.remove-friend-card,.game-exit-confirm-card,
  .club-create-card,.club-leave-confirm-card,.club-profile-editor,.clan-battle-setup-card,
  .premium-current-card,.premium-page-shell,.post-create-card,.safety-action-card,.arena-help-card,.arena-status-card,
  .missed-invites-box,.follow-network-card,.drunk-countdown-card,.drunk-rules-modal
) {
  background: linear-gradient(155deg,#ffffff 0%,#f2f5f8 100%) !important;
  border-color:#d0d8e2 !important;
  color:#111827 !important;
  box-shadow: var(--cm-light-shadow-soft), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* Dropdowns, list rows, subcards and utility surfaces */
html[data-ui-theme="light"] :where(
  .pd-stats,.pd-custom-section,.pd-row-between,.pd-toggle-row,.pd-username-row,.pd-actions,
  .settings-section,.settings-toggle-row,.friends-add-section,.friends-link-row,.friends-panel,
  .friend-profile-body,.friends-profile-strip,.friend-chat-tools-row,.friends-search-row,
  .global-my-card,.global-section-row,.global-top-list,.global-users-list,.global-profile-meta-grid div,
  .public-room-action-card,.public-room-create-settings,.public-game-card,.arena-actions-row,.arena-leaderboard,
  .club-chat-box,.club-chat-head,.club-chat-input-row,.clubs-app-shell,.clubs-hub-intro,.clubs-hub-section,
  .clubs-chat-list-panel,.clubs-conversation-panel,.clubs-search-row,.posts-app-shell,.posts-head,.posts-tabs,
  .post-create-options,.post-access-notes,.premium-plan-tabs,.premium-plan-view,.premium-section-row,
  .premium-avatar-section,.premium-extra-features,.notification-toolbar,.notification-dnd-row,
  .reward-card,.reward-item,.achievement-item,.customization-item,.claim-history-item
) {
  background: linear-gradient(180deg,#fbfcfd,#eef2f6) !important;
  border-color:#d6dde6 !important;
  color:#1f2937 !important;
}

/* Inputs / selects */
html[data-ui-theme="light"] :where(input,textarea,select,.global-search,.public-room-search) {
  background:#ffffff !important;
  color:#111827 !important;
  border-color:#cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(71,85,105,.06) !important;
}
html[data-ui-theme="light"] :where(input,textarea,select)::placeholder { color:#94a3b8 !important; }
html[data-ui-theme="light"] :where(input,textarea,select):focus {
  border-color:#5aa2ee !important;
  box-shadow:0 0 0 3px rgba(47,128,237,.12) !important;
}

/* Secondary / ghost / neutral buttons */
html[data-ui-theme="light"] :where(
  .ghost-btn,.back-btn,.global-refresh-btn,.public-refresh-btn,.notification-clear-btn,.settings-close,
  .modal-close,.language-selector-close,.friends-btn,.theme-btn,.posts-tab,.friends-tab,.clubs-hub-tabs button,
  .public-action-btn,.club-manage-btn,.club-chat-back,.club-chat-emoji-btn
) {
  background: linear-gradient(180deg,#ffffff,#e9eef4) !important;
  border-color:#ccd5df !important;
  color:#334155 !important;
  box-shadow:0 3px 10px rgba(71,85,105,.08), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] :where(
  .ghost-btn,.back-btn,.global-refresh-btn,.public-refresh-btn,.notification-clear-btn,.theme-btn,.posts-tab,.friends-tab
):hover {
  background:linear-gradient(180deg,#ffffff,#dfe6ed) !important;
  border-color:#aebac7 !important;
  color:#111827 !important;
}

/* Overlays */
html[data-ui-theme="light"] :where(.modal-overlay,.settings-overlay,.game-loading-overlay,.game-result-overlay,.language-selector-overlay) {
  background:rgba(34,47,62,.28) !important;
  backdrop-filter:blur(10px) saturate(115%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(115%) !important;
}

/* Language selector */
html[data-ui-theme="light"] .language-selector-panel {
  background:
    radial-gradient(circle at 12% 0%,rgba(47,128,237,.08),transparent 36%),
    linear-gradient(180deg,#ffffff,#edf2f7) !important;
  border-color:#aebdcd !important;
  color:#111827 !important;
  box-shadow:0 28px 80px rgba(71,85,105,.24),0 0 0 1px rgba(255,255,255,.82) inset !important;
}
html[data-ui-theme="light"] .language-selector-head h2,
html[data-ui-theme="light"] .language-option-native { color:#111827 !important; }
html[data-ui-theme="light"] .language-selector-head p,
html[data-ui-theme="light"] .language-option-english { color:#64748b !important; }
html[data-ui-theme="light"] .language-option {
  background:linear-gradient(180deg,#ffffff,#edf2f6) !important;
  border-color:#cbd5df !important;
  color:#1f2937 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .language-option:hover { background:linear-gradient(180deg,#ffffff,#e4ebf2) !important; border-color:#91bce7 !important; }
html[data-ui-theme="light"] .language-option.selected {
  background:linear-gradient(180deg,#f4f9ff,#e2effc) !important;
  border-color:#2f80ed !important;
  box-shadow:inset 0 0 0 1px rgba(47,128,237,.18),0 8px 20px rgba(47,128,237,.10) !important;
}
html[data-ui-theme="light"] .language-option-flag { background:#fff !important; box-shadow:0 4px 12px rgba(71,85,105,.13) !important; }

/* Main menu dashboard — metallic-gray light concept */
html[data-ui-theme="light"] #menuCard.menu-dashboard-card {
  background:
    linear-gradient(155deg,rgba(255,255,255,.98),rgba(235,240,245,.97)) !important;
  border-color:#c9d3de !important;
  box-shadow:0 24px 60px rgba(71,85,105,.15), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #menuCard.menu-dashboard-card::before {
  opacity:.18 !important;
  filter:saturate(.65) contrast(.85) !important;
}
html[data-ui-theme="light"] #menuCard.menu-dashboard-card::after {
  background:
    radial-gradient(circle at 18% 18%,rgba(47,128,237,.075),transparent 34%),
    linear-gradient(110deg,rgba(255,255,255,.72),transparent 46%,rgba(148,163,184,.08) 67%,transparent) !important;
}
html[data-ui-theme="light"] .menu-dashboard-head {
  border-bottom-color:#d5dde6 !important;
}
html[data-ui-theme="light"] .menu-dashboard-head h2 { color:#0f172a !important; }
html[data-ui-theme="light"] .menu-dashboard-eyebrow { color:#6b7b8f !important; }
html[data-ui-theme="light"] .menu-dashboard-actions .daily-rewards-btn,
html[data-ui-theme="light"] .menu-dashboard-actions .global-refresh-btn {
  background:linear-gradient(180deg,#ffffff,#e9eef4) !important;
  border-color:#c9d3de !important;
  color:#334155 !important;
  box-shadow:0 5px 14px rgba(71,85,105,.09), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .menu-dashboard-actions .daily-rewards-btn:hover,
html[data-ui-theme="light"] .menu-dashboard-actions .global-refresh-btn:hover {
  background:linear-gradient(180deg,#ffffff,#dfe6ed) !important;
  border-color:#afbcc9 !important;
}

html[data-ui-theme="light"] .menu-feature-card {
  background:
    linear-gradient(115deg,rgba(var(--mode-rgb),.08),transparent 44%),
    linear-gradient(155deg,#ffffff 0%,#edf2f6 100%) !important;
  border-color:rgba(var(--mode-rgb),.32) !important;
  box-shadow:
    inset 3px 0 0 rgba(var(--mode-rgb),.48),
    inset 0 1px 0 #fff,
    0 8px 20px rgba(71,85,105,.08) !important;
}
html[data-ui-theme="light"] .menu-feature-card::before {
  opacity:.62 !important; /* brighter decorative background figure / pattern */
  filter:saturate(.9) contrast(.92) brightness(1.08) !important;
}
html[data-ui-theme="light"] .menu-feature-card:hover,
html[data-ui-theme="light"] .menu-feature-card:focus-visible {
  background:
    linear-gradient(115deg,rgba(var(--mode-rgb),.13),transparent 48%),
    linear-gradient(155deg,#ffffff,#e6edf3) !important;
  border-color:rgba(var(--mode-rgb),.56) !important;
  box-shadow:0 12px 28px rgba(71,85,105,.13), inset 3px 0 0 rgba(var(--mode-rgb),.72), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .menu-feature-card strong { color:#111827 !important; }
html[data-ui-theme="light"] .menu-feature-detail { color:#64748b !important; }
html[data-ui-theme="light"] .menu-feature-icon {
  background:linear-gradient(145deg,#ffffff,#e6ecf2) !important;
  border-color:rgba(var(--mode-rgb),.34) !important;
  box-shadow:0 5px 14px rgba(71,85,105,.08), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .menu-feature-card::after {
  background:linear-gradient(180deg,#ffffff,#e5ebf1) !important;
  border-color:rgba(var(--mode-rgb),.28) !important;
  box-shadow:0 3px 9px rgba(71,85,105,.08) !important;
}
html[data-ui-theme="light"] .menu-feature-tag {
  background:rgba(var(--mode-rgb),.10) !important;
  border-color:rgba(var(--mode-rgb),.32) !important;
  color:rgb(var(--mode-rgb)) !important;
}

/* Premium / ranked preserve gold identity */
html[data-ui-theme="light"] .menu-feature-card.premium,
html[data-ui-theme="light"] .premium-current-card,
html[data-ui-theme="light"] .premium-plan-view {
  background:linear-gradient(135deg,rgba(255,249,232,.92),#ffffff 55%,#edf2f6) !important;
}
html[data-ui-theme="light"] .menu-feature-card.drunk { background:linear-gradient(135deg,rgba(246,241,255,.96),#fff 55%,#edf2f6) !important; }

/* Profile dropdown */
html[data-ui-theme="light"] .profile-dropdown {
  background:linear-gradient(180deg,#f9fbfc,#e9eef3) !important;
  border-color:#c7d0da !important;
  box-shadow:0 20px 56px rgba(71,85,105,.22), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .profile-dropdown :where(.pd-header,.pd-stats,.pd-custom-section,.pd-actions) { border-color:#d6dde5 !important; }
html[data-ui-theme="light"] .pd-action-btn {
  background:linear-gradient(180deg,#ffffff,#e9eef3) !important;
  border-color:#d2dae3 !important;
  color:#263445 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .pd-action-btn:hover { background:linear-gradient(180deg,#fff,#dde5ed) !important; border-color:#b7c4d0 !important; }

/* Friends / notifications / cards */
html[data-ui-theme="light"] :where(.friends-list > *, .notification-center-list > *, .global-users-list > *, .global-top-list > *, .public-games-list > *, .posts-feed > *) {
  background:linear-gradient(180deg,#ffffff,#eef2f6) !important;
  border-color:#d1dae3 !important;
  color:#1f2937 !important;
}

/* Daily rewards / mystery box / achievements / customization */
html[data-ui-theme="light"] :where(.reward-stat,.reward-tab,.reward-panel,.achievement-card,.customization-card,.claim-history-card) {
  background:linear-gradient(180deg,#ffffff,#e9eef4) !important;
  border-color:#cfd8e2 !important;
  color:#1f2937 !important;
}

/* Legal/footer and separators */
html[data-ui-theme="light"] :where(hr,.divider,.friends-divider) { border-color:#d7dee7 !important; background:#d7dee7 !important; }
html[data-ui-theme="light"] :where(.menu-footer,.legal-footer,footer) { color:#64748b !important; border-color:#d7dee7 !important; }
html[data-ui-theme="light"] :where(.menu-footer a,.legal-footer a,footer a) { color:#526071 !important; }

/* Keep board themes and chess pieces untouched. Theme controls only app chrome. */
html[data-ui-theme="light"] #board,
html[data-ui-theme="light"] #analysisBoard,
html[data-ui-theme="light"] .chess-board,
html[data-ui-theme="light"] .square,
html[data-ui-theme="light"] .piece {
  color-scheme: normal;
}

/* Mobile polish */
@media (max-width:768px) {
  html[data-ui-theme="light"] .top-bar {
    background:rgba(247,249,251,.97) !important;
    box-shadow:0 5px 18px rgba(71,85,105,.11) !important;
  }
  html[data-ui-theme="light"] #menuCard.menu-dashboard-card {
    background:linear-gradient(160deg,#ffffff,#ebf0f5) !important;
  }
}

/* =====================================================================
   ChessMondo v8.9.1 — Light theme contrast, surface and watermark hotfix
   Dark remains the default product theme. These rules only affect light mode.
   Target: readable app chrome with cool metallic surfaces and WCAG-friendly text.
   ===================================================================== */
html[data-ui-theme="light"] {
  --cm-light-text: #0f172a;
  --cm-light-text-2: #334155;
  --cm-light-muted: #64748b;
  --cm-light-label: #475569;
  --cm-light-disabled: #7b8797;
  --cm-light-panel: #ffffff;
  --cm-light-panel-2: #f3f6f9;
  --cm-light-panel-3: #e9eef4;
}

/* Header: never let non-premium usernames disappear on a white header. */
html[data-ui-theme="light"] .top-profile:not(.premium-profile-button) #topUsername,
html[data-ui-theme="light"] .top-profile:not(.premium-profile-button) > span:not(.tp-premium-badge):not(.tp-caret) {
  color: #1e293b !important;
  text-shadow: none !important;
}
html[data-ui-theme="light"] .top-profile:not(.premium-profile-button) {
  background: linear-gradient(180deg,#ffffff,#edf2f6) !important;
  border-color: #cbd5e1 !important;
}
html[data-ui-theme="light"] .top-profile:not(.premium-profile-button):hover {
  background: linear-gradient(180deg,#ffffff,#e2e8f0) !important;
}
/* Premium profile buttons intentionally keep their own dark/gold visual identity. */
html[data-ui-theme="light"] .top-profile.premium-profile-button #topUsername {
  color: #f8fafc !important;
}

/* Main-menu identity strip must participate in light mode instead of staying black. */
@media (min-width:861px) {
  html[data-ui-theme="light"] #menuCard .menu-chess-stage {
    background:
      radial-gradient(circle at 78% 50%, rgba(47,128,237,.10), transparent 32%),
      radial-gradient(circle at 8% 14%, rgba(201,151,39,.09), transparent 34%),
      linear-gradient(108deg,#ffffff 0%,#eef2f6 58%,#e5ebf1 100%) !important;
    border-color: #cbd5e1 !important;
    border-left-color: rgba(201,151,39,.78) !important;
    box-shadow: 0 8px 24px rgba(71,85,105,.10), inset 0 1px 0 #fff !important;
  }
  html[data-ui-theme="light"] #menuCard .menu-stage-copy strong { color:#172033 !important; }
  html[data-ui-theme="light"] #menuCard .menu-stage-kicker { color:#a87518 !important; }
  html[data-ui-theme="light"] #menuCard .menu-stage-status {
    background:#eef8f3 !important;
    border-color:#b9dfcc !important;
    color:#476457 !important;
  }
  html[data-ui-theme="light"] #menuCard .menu-stage-board {
    background-color:#f5f7fa !important;
    background-image:conic-gradient(from 90deg,rgba(100,116,139,.075) 25%,transparent 0 50%,rgba(100,116,139,.075) 0 75%,transparent 0) !important;
    border-color:#cbd5e1 !important;
    box-shadow:inset 0 0 18px rgba(100,116,139,.10),0 5px 15px rgba(71,85,105,.08) !important;
  }
  html[data-ui-theme="light"] #menuCard .menu-stage-board > span {
    color:rgba(71,85,105,.72) !important;
    filter:drop-shadow(0 2px 3px rgba(71,85,105,.15)) !important;
  }
  html[data-ui-theme="light"] #menuCard .menu-stage-board > .stage-royal { color:#b7851f !important; }
  html[data-ui-theme="light"] #menuCard .menu-card-watermark {
    color:rgba(var(--mode-rgb), .24) !important;
    opacity:1 !important;
    filter:drop-shadow(0 4px 10px rgba(var(--mode-rgb),.18)) saturate(1.08) !important;
  }
  html[data-ui-theme="light"] #menuCard .menu-feature-card:hover .menu-card-watermark,
  html[data-ui-theme="light"] #menuCard .menu-feature-card:focus-visible .menu-card-watermark {
    color:rgba(var(--mode-rgb), .36) !important;
    filter:drop-shadow(0 5px 14px rgba(var(--mode-rgb),.26)) saturate(1.15) !important;
  }
}

/* Profile drawer: convert every legacy dark sub-card into a readable light surface. */
html[data-ui-theme="light"] #profileDropdown.profile-dropdown {
  color:#0f172a !important;
}
html[data-ui-theme="light"] #profileDropdown :where(.pd-name,.pd-rating,.pd-stat span,.pd-stat-small span,.rank-card-head,.rating-graph-meta b) {
  color:#172033 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #profileDropdown :where(.pd-email,.pd-edit-label,.pd-mini-label,.pd-stat label,.pd-stat-small label,.rank-progress-note,.rating-graph-meta,.premium-field-note,.pd-username-msg,#aboutCounter,.flag-preview-row small) {
  color:#64748b !important;
}
html[data-ui-theme="light"] #profileDropdown :where(.pd-stat,.pd-stat-small,.pd-showcase-block,.pd-graph-block,.pd-custom-section,.pd-username-edit) {
  background:linear-gradient(180deg,#ffffff,#f0f4f8) !important;
  border-color:#d4dde7 !important;
}
html[data-ui-theme="light"] #profileDropdown .pd-stats,
html[data-ui-theme="light"] #profileDropdown .pd-stat-row {
  background:#f8fafc !important;
  border-color:#d6dee8 !important;
}
html[data-ui-theme="light"] #profileDropdown .pd-stat + .pd-stat,
html[data-ui-theme="light"] #profileDropdown .pd-stat-small + .pd-stat-small {
  border-color:#d6dee8 !important;
}
html[data-ui-theme="light"] #profileDropdown .rank-card {
  background:linear-gradient(135deg,#ffffff,#edf2f7) !important;
  border-color:#cbd5e1 !important;
  box-shadow:inset 0 1px 0 #fff,0 5px 14px rgba(71,85,105,.08) !important;
}
html[data-ui-theme="light"] #profileDropdown .rank-progress-track {
  background:#dce4ed !important;
  border-color:#cbd5e1 !important;
}
html[data-ui-theme="light"] #profileDropdown .showcase-badge {
  background:linear-gradient(145deg,#ffffff,#e9eef4) !important;
  border-color:#cbd5e1 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #profileDropdown .showcase-badge.unlocked {
  border-color:rgba(184,134,32,.45) !important;
  background:linear-gradient(145deg,#fffdf6,#eef2f6) !important;
}
html[data-ui-theme="light"] #profileDropdown .showcase-badge.locked {
  opacity:.72 !important;
  filter:grayscale(.35) !important;
}
html[data-ui-theme="light"] #profileDropdown .showcase-badge small { color:#475569 !important; }
html[data-ui-theme="light"] #profileDropdown .rating-graph-card {
  background:radial-gradient(circle at top left,rgba(47,129,247,.10),transparent 46%),linear-gradient(180deg,#ffffff,#edf2f7) !important;
  border-color:#cbd5e1 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #profileDropdown .rating-graph-card circle { fill:#ffffff !important; stroke:#2f80ed !important; }

/* Profile actions: the original pseudo-labels had a hard-coded pale text color. */
html[data-ui-theme="light"] #profileDropdown .pd-actions .pd-action-btn,
html[data-ui-theme="light"] #profileDropdown .pd-actions .friends-btn {
  background-color:#f8fafc !important;
  background-image:radial-gradient(circle at 23px 50%,rgba(var(--pd-accent-rgb),.11),transparent 35px) !important;
  border-color:#cbd5e1 !important;
  color:#334155 !important;
}
html[data-ui-theme="light"] #profileDropdown .pd-actions .pd-action-btn::after,
html[data-ui-theme="light"] #profileDropdown .pd-actions .friends-btn::after {
  color:#334155 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #profileDropdown .pd-actions .pd-action-btn:hover,
html[data-ui-theme="light"] #profileDropdown .pd-actions .friends-btn:hover {
  background-color:rgba(var(--pd-accent-rgb),.10) !important;
  border-color:rgba(var(--pd-accent-rgb),.38) !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #profileDropdown .pd-actions .pd-action-btn:hover::after,
html[data-ui-theme="light"] #profileDropdown .pd-actions .friends-btn:hover::after { color:#172033 !important; }

/* Keep destructive controls readable, not washed-out pink on white. */
html[data-ui-theme="light"] #profileDropdown .logout-btn {
  background:#ffffff !important;
  color:#dc3f46 !important;
  border-color:#f0b0b3 !important;
}
html[data-ui-theme="light"] #profileDropdown .delete-account-btn {
  background:#fff1f2 !important;
  color:#c92f38 !important;
  border-color:#ef9ca1 !important;
}

/* The mobile profile header is sticky and had an explicit dark gradient. */
@media (max-width:720px) {
  html[data-ui-theme="light"] #profileDropdown.profile-dropdown:not(.hidden) .pd-header {
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,244,248,.96)) !important;
    border-bottom-color:#d6dee8 !important;
  }
  html[data-ui-theme="light"] #profileDropdown.profile-dropdown:not(.hidden) {
    box-shadow:0 0 0 9999px rgba(30,41,59,.24),0 22px 70px rgba(71,85,105,.24),inset 0 1px 0 #fff !important;
  }
}

/* Friends modal: names and action controls must remain visible in light mode. */
html[data-ui-theme="light"] #friendsModal .friends-modal-card {
  background:linear-gradient(180deg,#ffffff,#edf2f6) !important;
  color:#0f172a !important;
}
html[data-ui-theme="light"] #friendsModal .modal-header,
html[data-ui-theme="light"] #friendsModal .friends-tabs {
  background:#f8fafc !important;
  border-color:#cbd5e1 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab { color:#526071 !important; }
html[data-ui-theme="light"] #friendsModal .friends-tab.active {
  color:#172033 !important;
  border-bottom-color:#2f80ed !important;
}
html[data-ui-theme="light"] #friendsModal .friend-item {
  background:linear-gradient(180deg,#ffffff,#edf2f6) !important;
  border-color:#cbd5e1 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #friendsModal .friend-item:hover { border-color:#8fb7df !important; }
html[data-ui-theme="light"] #friendsModal .friend-name { color:#1e293b !important; text-shadow:none !important; }
html[data-ui-theme="light"] #friendsModal .friend-meta { color:#64748b !important; }
html[data-ui-theme="light"] #friendsModal .friend-status-online { color:#16884f !important; }
html[data-ui-theme="light"] #friendsModal .friend-status-offline { color:#64748b !important; }
html[data-ui-theme="light"] #friendsModal .friend-action-btn {
  background:#f8fafc !important;
  border-color:#cbd5e1 !important;
  color:#475569 !important;
}
html[data-ui-theme="light"] #friendsModal .friend-action-btn:hover {
  background:#e7edf4 !important;
  color:#172033 !important;
  border-color:#aebdcd !important;
}
html[data-ui-theme="light"] #friendsModal .friend-action-btn.accept {
  background:#ecf9f1 !important;
  border-color:#a8dfbd !important;
  color:#167548 !important;
}
html[data-ui-theme="light"] #friendsModal .friend-action-btn.danger,
html[data-ui-theme="light"] #friendsModal .friend-image-delete-btn {
  background:#fff1f2 !important;
  border-color:#ef9ca1 !important;
  color:#b82f38 !important;
}
html[data-ui-theme="light"] #friendsModal .friend-image-edit-btn {
  background:#eef2f6 !important;
  border-color:#cbd5e1 !important;
  color:#334155 !important;
}
html[data-ui-theme="light"] #friendsModal .friends-add-label { color:#64748b !important; }
html[data-ui-theme="light"] #friendsModal .friend-avatar { background:#e2e8f0 !important; color:#172033 !important; }
html[data-ui-theme="light"] #friendsModal .friend-online-dot { border-color:#ffffff !important; }

/* Common app text that legacy dark rules hard-code to white. */
html[data-ui-theme="light"] :where(
  .friend-name,.global-player-name,.public-room-name,.public-player-name,.post-author-name,
  .club-name,.club-member-name,.notification-title,.achievement-name,.customization-name,
  .reward-item-title,.claim-history-title,.premium-plan-name,.premium-feature-name
) {
  color:#1e293b !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] :where(
  .friend-meta,.global-player-meta,.public-room-meta,.post-meta,.club-meta,.notification-meta,
  .achievement-desc,.customization-desc,.reward-item-desc,.claim-history-meta,.premium-feature-desc
) {
  color:#64748b !important;
}

/* Neutral legacy buttons across modals should not stay near-black in light mode. */
html[data-ui-theme="light"] :where(
  .friend-action-btn,.friend-image-edit-btn,.modal-action-btn,.secondary-btn,.neutral-btn,
  .history-filter-btn,.achievement-filter-btn,.customization-filter-btn
):not(.danger):not(.primary):not(.accept) {
  background:linear-gradient(180deg,#ffffff,#e9eef4) !important;
  color:#334155 !important;
  border-color:#cbd5e1 !important;
}

/* Explicitly protect form labels and help text against inherited white. */
html[data-ui-theme="light"] :where(label,.form-label,.input-label,.section-label,.field-label) { color:#475569 !important; }
html[data-ui-theme="light"] :where(.help-text,.hint-text,.subtext,.description) { color:#64748b !important; }

/* Dark game/chess surfaces are intentionally excluded: board themes, actual pieces,
   chat wallpaper art and premium profile chrome keep their own theme identities. */

/* ---------- v8.9.1 deep legacy-style audit ----------
   Older components predate theme tokens and hard-code dark colors. Keep their
   semantic accents, but convert neutral surfaces/text when light mode is active. */
html[data-ui-theme="light"] :where(
  .friends-search-row input,.friends-link-row input,.friend-chat-compose textarea,.arena-chat-input
) {
  background:#ffffff !important;
  color:#172033 !important;
  border-color:#cbd5e1 !important;
}
html[data-ui-theme="light"] :where(
  .friends-link-row button,.friends-search-row button,.btn-analysis,.menu-back-btn,
  .arena-match-actions button,.chat-mini-btn,.chat-tools button,.friend-chat-tools-row button,
  .chat-msg-actions button,.friend-chat-actions button,.club-actions button,.club-lb-row button,
  .club-chat-input-row button,.club-chat-back,.circle-tool-btn,.clubs-filter-pills button,
  .reward-tabs button,.follow-tabs button,.premium-tier-tab-top
):not(.primary-btn):not(.danger-main-btn):not(.accept):not(.active) {
  background:linear-gradient(180deg,#ffffff,#e9eef4) !important;
  border-color:#cbd5e1 !important;
  color:#334155 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] :where(
  .friends-link-row button,.friends-search-row button,.btn-analysis,.menu-back-btn,
  .arena-match-actions button,.chat-mini-btn,.chat-tools button,.friend-chat-tools-row button,
  .club-actions button,.club-lb-row button,.club-chat-input-row button,.club-chat-back
):hover {
  background:#e2e8f0 !important;
  color:#0f172a !important;
  border-color:#aebdcd !important;
}

/* Chat and communication chrome. Bubble identity stays clear but no black slabs. */
html[data-ui-theme="light"] :where(.friend-chat-panel,.friend-chat-screen,.mp-chat) {
  background:linear-gradient(180deg,#ffffff,#edf2f6) !important;
  border-color:#cbd5e1 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] :where(.friend-chat-header,.mp-chat-header,.friend-chat-tools-row,.mp-chat-tools,.friend-chat-compose,.mp-chat-input-row) {
  background:#f8fafc !important;
  border-color:#d6dee8 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] :where(.friend-chat-title,.friend-invite-title,.arena-chat-text,.post-text,.global-profile-meta-grid b) {
  color:#1e293b !important;
}
html[data-ui-theme="light"] .friend-chat-bubble,
html[data-ui-theme="light"] .chat-msg.theirs {
  background:#ffffff !important;
  border-color:#cbd5e1 !important;
  color:#1e293b !important;
}
html[data-ui-theme="light"] .friend-chat-msg.mine .friend-chat-bubble,
html[data-ui-theme="light"] .chat-msg.mine {
  background:#eaf3ff !important;
  border-color:#b9d7f7 !important;
  color:#17365d !important;
}

/* Clubs / posts / rewards list rows inherited several fixed dark blocks. */
html[data-ui-theme="light"] :where(.club-lb-chat-row,.club-chat-row,.post-card,.reward-item,.claim-history-item,.achievement-item,.customization-item) {
  background:linear-gradient(180deg,#ffffff,#edf2f6) !important;
  border-color:#cbd5e1 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] :where(.clubs-filter-pills button.active,.posts-tab.active,.reward-tabs button.active,.follow-tabs button.active) {
  background:#eaf3ff !important;
  color:#1d4f86 !important;
  border-color:#9ec5ef !important;
}

/* Public/profile/avatar utility labels. */
html[data-ui-theme="light"] :where(.public-game-title,.friend-invite-title,.friend-chat-title,.premium-head h3,.premium-plan-top b,.premium-price,.premium-extra-features h4,.premium-avatar-section h4,.premium-avatar-tier-head,.premium-friend-banner-picker h4) {
  color:#172033 !important;
}
html[data-ui-theme="light"] :where(.friend-invite-sub,.public-game-meta,.premium-plan-meta,.premium-feature-note) {
  color:#64748b !important;
}

/* ChessMondo 8.9.2 — Arena light-mode readability */
html[data-ui-theme="light"] #panelArena .global-section-title {
  color:#334155 !important;
}
html[data-ui-theme="light"] #panelArena .arena-row {
  background:#ffffff !important;
  border-color:#d5dde6 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #panelArena .arena-row:hover {
  background:#f5f7fa !important;
  border-color:#b8c5d4 !important;
}
html[data-ui-theme="light"] #panelArena .arena-player,
html[data-ui-theme="light"] #panelArena .arena-player-name {
  color:#172033 !important;
}
html[data-ui-theme="light"] #panelArena .arena-record {
  color:#64748b !important;
}
html[data-ui-theme="light"] #panelArena .arena-chat-removed-note {
  color:#64748b !important;
  background:#f5f7fa !important;
  border-color:#d5dde6 !important;
}

/* =====================================================================
   ChessMondo 8.9.3 — Light Mode Interaction & Game Controls Hotfix
   Scope: Arena back navigation, Public Games hover/settings, AI game HUD.
   ===================================================================== */

/* Arena: restore the compact left-aligned back button. It must sit above the
   panel as its own control, never stretch across the viewport or disappear
   beneath the Arena panel on hover. */
body.arena-section-open-body #menuSectionViews > .menu-back-btn {
  width:max-content !important;
  min-width:0 !important;
  max-width:max-content !important;
  align-self:flex-start !important;
  position:relative !important;
  z-index:8 !important;
  overflow:visible !important;
  margin:0 0 8px 0 !important;
  padding:0 13px !important;
  transform:none !important;
  transition:transform .16s ease, background-color .16s ease, border-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:9 !important;
}
html[data-ui-theme="light"] body.arena-section-open-body #menuSectionViews > .menu-back-btn {
  background:linear-gradient(180deg,#ffffff,#edf3f8) !important;
  color:#334155 !important;
  border-color:#c5d2df !important;
  box-shadow:0 5px 14px rgba(71,85,105,.10),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] body.arena-section-open-body #menuSectionViews > .menu-back-btn:hover,
html[data-ui-theme="light"] body.arena-section-open-body #menuSectionViews > .menu-back-btn:focus-visible {
  background:linear-gradient(180deg,#ffffff,#e2edf7) !important;
  border-color:#8fb7df !important;
  color:#172033 !important;
  box-shadow:0 9px 20px rgba(47,128,237,.13),inset 0 1px 0 #fff !important;
}

/* Public Games: light mode room cards use a soft ChessMondo blue hover instead
   of falling back to the legacy near-black hover surface. */
html[data-ui-theme="light"] #panelPublic .public-game-card {
  background:linear-gradient(180deg,#ffffff,#f3f7fb) !important;
  border-color:#d3dde7 !important;
  color:#172033 !important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease !important;
}
html[data-ui-theme="light"] #panelPublic .public-game-card:hover,
html[data-ui-theme="light"] #panelPublic .public-game-card:focus-within {
  background:linear-gradient(180deg,#eef7ff,#e2f0fd) !important;
  border-color:#7eb6ec !important;
  box-shadow:0 7px 18px rgba(47,128,237,.12) !important;
  transform:translateY(-1px) !important;
}
html[data-ui-theme="light"] #panelPublic .public-game-title,
html[data-ui-theme="light"] #panelPublic .public-game-players { color:#1e293b !important; }
html[data-ui-theme="light"] #panelPublic .public-game-meta { color:#64748b !important; }

/* Public Games side/clock controls: white metallic selectors with dark readable
   text, while keeping blue focus feedback. */
html[data-ui-theme="light"] #panelPublic .public-room-create-settings select {
  background:linear-gradient(180deg,#ffffff,#eef3f8) !important;
  color:#172033 !important;
  border-color:#bfcddd !important;
  box-shadow:inset 0 1px 0 #fff,0 2px 7px rgba(71,85,105,.07) !important;
}
html[data-ui-theme="light"] #panelPublic .public-room-create-settings select:hover {
  border-color:#8fb7df !important;
  background:linear-gradient(180deg,#ffffff,#e8f2fb) !important;
}
html[data-ui-theme="light"] #panelPublic .public-room-create-settings select:focus {
  border-color:#5aa2ee !important;
  box-shadow:0 0 0 3px rgba(47,128,237,.12),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelPublic .public-room-create-settings select option {
  background:#ffffff !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #panelPublic .public-room-create-settings label > span {
  color:#64748b !important;
}

/* AI / local game HUD: remove legacy black slabs in Light Mode. */
html[data-ui-theme="light"] #gameBoard .captured-bar {
  background:linear-gradient(180deg,#eef6fd,#ddebf8) !important;
  color:#334155 !important;
  border:1px solid #bfd4e8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-ui-theme="light"] #gameBoard .captured-bar .captured-empty,
html[data-ui-theme="light"] #gameBoard .captured-empty { color:#475569 !important; }
html[data-ui-theme="light"] #gameBoard .game-timer {
  background:linear-gradient(180deg,#dceeff,#c7e2fa) !important;
  border:1px solid #8ebce8 !important;
  color:#0f2742 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-ui-theme="light"] #gameBoard .game-timer .timer-icon,
html[data-ui-theme="light"] #gameBoard .game-timer .timer-value,
html[data-ui-theme="light"] #gameBoard #gameTimerValue {
  color:#10243d !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #gameBoard #status {
  background:linear-gradient(180deg,#d8ebfc,#c5def5) !important;
  border:1px solid #91b9df !important;
  color:#142a43 !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* AI controls: visible blue controls with dark/navy labels in Light Mode. */
html[data-ui-theme="light"] #gameBoard #aiControls.controls button {
  background:linear-gradient(180deg,#dceeff,#b9dafa) !important;
  color:#17324f !important;
  border:1px solid #8eb9e3 !important;
  box-shadow:0 3px 9px rgba(47,128,237,.10),inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-ui-theme="light"] #gameBoard #aiControls.controls button:hover,
html[data-ui-theme="light"] #gameBoard #aiControls.controls button:focus-visible {
  background:linear-gradient(180deg,#cde6ff,#9fcaf4) !important;
  color:#0f2742 !important;
  border-color:#5f9fdb !important;
  transform:translateY(-1px) !important;
  box-shadow:0 6px 15px rgba(47,128,237,.16),inset 0 1px 0 rgba(255,255,255,.88) !important;
}

@media (max-width:768px) {
  body.arena-section-open-body #menuSectionViews > .menu-back-btn {
    width:max-content !important;
    max-width:max-content !important;
    align-self:flex-start !important;
    margin:0 0 6px 0 !important;
  }
}


/* =====================================================================
   ChessMondo 8.9.4 — Global Light Game History Palette
   Applies to AI, Drunk Chess, Public/Friend/Arena and other board modes that
   share the standard Move History panel. Removes legacy black/gray table
   slabs in Light Mode and replaces them with a coherent blue hierarchy.
   ===================================================================== */
html[data-ui-theme="light"] body.chess-game-active #gameBoard .right-panel,
html[data-ui-theme="light"] #gameBoard:not(.hidden) .right-panel {
  background:linear-gradient(180deg,#fafdff 0%,#eef6fd 100%) !important;
  border-color:#b9d1e8 !important;
  box-shadow:0 14px 34px rgba(38,83,126,.10),inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard .right-panel h2,
html[data-ui-theme="light"] #gameBoard:not(.hidden) .right-panel h2 {
  background:linear-gradient(180deg,#eef7ff,#deedfa) !important;
  color:#17365d !important;
  border-bottom-color:#b8d0e6 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory,
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory {
  background:#f8fbff !important;
  color:#172033 !important;
  scrollbar-color:#7facd7 #e7f0f8 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory table,
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory table {
  background:#f8fbff !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory thead th,
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory thead th {
  background:linear-gradient(180deg,#3d6d99,#315d86) !important;
  color:#f8fbff !important;
  border-bottom-color:#244c73 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory tbody tr:nth-child(odd),
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory tbody tr:nth-child(odd) {
  background:#dcecfb !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory tbody tr:nth-child(even),
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory tbody tr:nth-child(even) {
  background:#f5f9fd !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory tbody tr:hover,
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory tbody tr:hover {
  background:#c9e1f6 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory tbody td,
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory tbody td {
  color:#172033 !important;
  border-color:#c5d8e9 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory tbody td:first-child,
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory tbody td:first-child {
  color:#47759f !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #moveHistory .empty-history,
html[data-ui-theme="light"] #gameBoard:not(.hidden) #moveHistory .empty-history {
  background:linear-gradient(180deg,#f8fbff,#eaf3fb) !important;
  color:#64748b !important;
}

/* =====================================================================
   ChessMondo 8.9.5 — Light Multiplayer / Lobby / Result UI Standardization
   Scope: standard Main Menu controls, fixed waiting-room viewport, live
   multiplayer surfaces, chat, clocks, and post-game result cards.
   Dark Mode is intentionally unchanged.
   ===================================================================== */

/* One visual language for every Main Menu / Menu return control in Light Mode.
   Top-level section buttons and in-game Menu buttons share the same 40px scale,
   radius, blue-metallic surface, readable navy text and hover lift. */
html[data-ui-theme="light"] :where(
  .menu-back-btn,
  #aiControls.controls > button:first-child,
  #mpControls #mpMenuBtn,
  .game-result-actions > .btn-secondary:first-child,
  button[onclick*="showMainMenuHub"],
  button[onclick*="backToMenu"]
) {
  min-height:40px !important;
  height:40px !important;
  padding:0 16px !important;
  border-radius:11px !important;
  border:1px solid #8eb9e3 !important;
  background:linear-gradient(180deg,#dceeff 0%,#b9dafa 100%) !important;
  color:#17324f !important;
  font-weight:750 !important;
  line-height:1 !important;
  text-shadow:none !important;
  box-shadow:0 3px 9px rgba(47,128,237,.10),inset 0 1px 0 rgba(255,255,255,.92) !important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease !important;
}
html[data-ui-theme="light"] :where(
  .menu-back-btn,
  #aiControls.controls > button:first-child,
  #mpControls #mpMenuBtn,
  .game-result-actions > .btn-secondary:first-child,
  button[onclick*="showMainMenuHub"],
  button[onclick*="backToMenu"]
):hover,
html[data-ui-theme="light"] :where(
  .menu-back-btn,
  #aiControls.controls > button:first-child,
  #mpControls #mpMenuBtn,
  .game-result-actions > .btn-secondary:first-child,
  button[onclick*="showMainMenuHub"],
  button[onclick*="backToMenu"]
):focus-visible {
  background:linear-gradient(180deg,#cde6ff 0%,#9fcaf4 100%) !important;
  border-color:#5f9fdb !important;
  color:#0f2742 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 7px 17px rgba(47,128,237,.16),inset 0 1px 0 rgba(255,255,255,.94) !important;
}
/* Section-level Main Menu controls stay compact rather than stretching. */
html[data-ui-theme="light"] .menu-section-views > .menu-back-btn {
  width:max-content !important;
  min-width:0 !important;
  max-width:max-content !important;
  flex:0 0 40px !important;
  align-self:flex-start !important;
}

/* Waiting-room page: never allow the whole document to scroll. Only the lobby
   card may internally scroll on unusually short screens. */
html.multiplayer-lobby-active-root,
body.multiplayer-lobby-active {
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.multiplayer-lobby-active #gameScreen.screen,
body.multiplayer-lobby-active #gameArea.game-area {
  min-height:0 !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.multiplayer-lobby-active #lobbyScreen.visible {
  box-sizing:border-box !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  justify-content:center !important;
  padding:clamp(8px,1.8vh,18px) 16px !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.multiplayer-lobby-active #lobbyScreen.visible .lobby-card {
  max-height:calc(100dvh - 86px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
}

/* Waiting room — replace inherited black slabs with the same pale blue / white
   material system used elsewhere in Light Mode. */
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-card {
  background:linear-gradient(160deg,#ffffff 0%,#eef5fb 100%) !important;
  border-color:#bdd2e6 !important;
  box-shadow:0 20px 54px rgba(42,84,124,.13),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-title {
  color:#17324f !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-subtitle,
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-player-color,
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-waiting {
  color:#64748b !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-knight-animation {
  background:radial-gradient(circle at 50% 18%,rgba(76,162,255,.30),rgba(217,234,249,.78) 48%,#edf5fb 100%) !important;
  border-color:#b7d2e9 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-knight-piece {
  color:#4193e6 !important;
  text-shadow:0 0 22px rgba(65,147,230,.34) !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-knight-animation small {
  color:#52677e !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .room-code-display {
  background:linear-gradient(180deg,#e8f3fd,#d7e9f8) !important;
  border-color:#8eb9e3 !important;
  color:#172033 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .room-code-label { color:#60748b !important; }
html[data-ui-theme="light"] #lobbyScreen.visible .room-code-value {
  color:#176bc1 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .copy-link-btn {
  background:linear-gradient(180deg,#dceeff,#bfdcf7) !important;
  color:#17324f !important;
  border-color:#8eb9e3 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(47,128,237,.10) !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .copy-link-btn:hover {
  background:linear-gradient(180deg,#cfe8ff,#a9d1f5) !important;
  color:#0f2742 !important;
  border-color:#5f9fdb !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-player-slot {
  background:linear-gradient(180deg,#ffffff,#eaf3fb) !important;
  border-color:#c0d4e7 !important;
  color:#172033 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-player-slot.occupied {
  border-color:#5aa2ee !important;
  box-shadow:0 0 0 2px rgba(47,128,237,.08),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-player-name { color:#172033 !important; }
html[data-ui-theme="light"] #lobbyScreen.visible .lp-black-avatar {
  background:linear-gradient(145deg,#dfe8f2,#aebdcb) !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible .lobby-status {
  background:linear-gradient(180deg,#edf6fe,#dcecf9) !important;
  border:1px solid #c0d6e9 !important;
  color:#52677e !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible > .lobby-card > .mp-ctrl-btn.danger {
  background:linear-gradient(180deg,#fff7f7,#fce8e8) !important;
  color:#b4232c !important;
  border-color:#efb2b6 !important;
}
html[data-ui-theme="light"] #lobbyScreen.visible > .lobby-card > .mp-ctrl-btn.danger:hover {
  background:linear-gradient(180deg,#fff1f1,#f8d6d8) !important;
  color:#8f1821 !important;
  border-color:#e47f87 !important;
}

/* Live public/friend/arena game shell in Light Mode. */
html[data-ui-theme="light"] body.chess-game-active #gameBoard .mp-player-bar {
  background:linear-gradient(180deg,#f7fbff,#e5f0fa) !important;
  border-color:#bfd3e6 !important;
  color:#172033 !important;
  opacity:1 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard .mp-player-bar.active-turn {
  background:linear-gradient(180deg,#edf7ff,#d7eafa) !important;
  border-color:#5aa2ee !important;
  box-shadow:0 0 0 2px rgba(47,128,237,.08),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard :where(.mp-player-bar-name,.mp-player-bar-color) {
  color:#172033 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard .mp-player-bar-color { color:#64748b !important; }
html[data-ui-theme="light"] body.chess-game-active #gameBoard .mp-turn-indicator { color:#176bc1 !important; }

html[data-ui-theme="light"] body.chess-game-active #gameBoard .chess-clocks {
  background:transparent !important;
  border:0 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard .player-clock {
  background:linear-gradient(180deg,#f9fcff,#e5f0fa) !important;
  border-color:#b9cee2 !important;
  color:#172033 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard .player-clock.active {
  background:linear-gradient(180deg,#dceeff,#b9dafa) !important;
  border-color:#5f9fdb !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard .player-clock :where(.clock-label,.clock-time) {
  color:#142a43 !important;
  text-shadow:none !important;
}

/* Standard multiplayer control row. Main Menu matches the AI Menu button;
   secondary game actions use a quieter blue-white treatment. */
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpControls {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpControls .mp-ctrl-btn:not(.danger) {
  min-height:40px !important;
  height:40px !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#edf6fe,#d6e9f9) !important;
  border-color:#a9c8e5 !important;
  color:#24405f !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpControls .mp-ctrl-btn:not(.danger):hover {
  background:linear-gradient(180deg,#dceeff,#b9dafa) !important;
  border-color:#6aa5dc !important;
  color:#102a45 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpControls .mp-ctrl-btn.danger {
  min-height:40px !important;
  height:40px !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#fff7f7,#fce8e8) !important;
  border-color:#efb2b6 !important;
  color:#b4232c !important;
}

/* Game chat: eliminate the black legacy panel/background in Light Mode. */
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel.mp-chat {
  background:linear-gradient(180deg,#f9fcff,#edf5fb) !important;
  border-color:#b9d1e8 !important;
  box-shadow:inset 0 1px 0 #fff,0 10px 26px rgba(42,84,124,.08) !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .mp-chat-header {
  background:linear-gradient(180deg,#e8f3fd,#d7e9f8) !important;
  border-color:#bad1e7 !important;
  color:#17365d !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel :where(.mp-chat-tools,.mp-chat-picker-zone) {
  background:#f2f7fb !important;
  border-color:#c7d9e9 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .mp-chat-tools button {
  background:linear-gradient(180deg,#ffffff,#e7f0f8) !important;
  color:#24405f !important;
  border-color:#bfd1e2 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages,
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages[class*="bg-"] {
  background:linear-gradient(160deg,#f8fbfe,#e8f2fa) !important;
  color:#334155 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .chat-msg.system {
  color:#607086 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .chat-msg.theirs {
  background:#ffffff !important;
  color:#172033 !important;
  border:1px solid #c7d8e8 !important;
  box-shadow:0 5px 14px rgba(42,84,124,.08) !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .chat-msg.mine {
  background:linear-gradient(180deg,#3f8fe5,#2f78c8) !important;
  color:#ffffff !important;
  box-shadow:0 5px 14px rgba(47,128,237,.16) !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .mp-chat-input-row {
  background:#f7fbff !important;
  border-color:#bfd3e5 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .mp-chat-input {
  background:#ffffff !important;
  color:#172033 !important;
  border-color:#c7d6e5 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .mp-chat-send {
  background:linear-gradient(180deg,#dceeff,#b9dafa) !important;
  color:#176bc1 !important;
  border-color:#8eb9e3 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .chat-picker {
  background:#eef5fb !important;
  border-color:#c6d8e8 !important;
}
html[data-ui-theme="light"] body.chess-game-active #gameBoard #mpChatPanel .chat-picker button {
  background:#ffffff !important;
  color:#24405f !important;
  border-color:#c0d2e3 !important;
}

/* Post-game results: Light Mode must be a genuine light result surface, not a
   recoloured dark card. Result semantics stay green/red/gold via accents. */
html[data-ui-theme="light"] .game-result-overlay .game-result-card,
html[data-ui-theme="light"] .game-result-overlay.result-win .game-result-card,
html[data-ui-theme="light"] .game-result-overlay.result-loss .game-result-card,
html[data-ui-theme="light"] .game-result-overlay.result-draw .game-result-card,
html[data-ui-theme="light"] .game-result-overlay.result-spectator .game-result-card {
  background:linear-gradient(165deg,#ffffff 0%,#edf4fa 100%) !important;
  border-color:#b9cfe3 !important;
  color:#172033 !important;
  box-shadow:0 28px 75px rgba(42,65,91,.24),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .game-result-overlay.result-win .game-result-card { box-shadow:0 28px 75px rgba(42,65,91,.22),inset 0 3px 0 #5fbd78 !important; }
html[data-ui-theme="light"] .game-result-overlay.result-loss .game-result-card { box-shadow:0 28px 75px rgba(42,65,91,.22),inset 0 3px 0 #e47b82 !important; }
html[data-ui-theme="light"] .game-result-overlay.result-draw .game-result-card { box-shadow:0 28px 75px rgba(42,65,91,.22),inset 0 3px 0 #d9a83d !important; }
html[data-ui-theme="light"] .game-result-overlay .game-result-card::before {
  opacity:.22 !important;
  filter:saturate(.8) !important;
}
html[data-ui-theme="light"] .game-result-overlay .game-result-title {
  color:#172033 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] .game-result-overlay.result-win .game-result-title { color:#237a42 !important; }
html[data-ui-theme="light"] .game-result-overlay.result-loss .game-result-title { color:#b4232c !important; }
html[data-ui-theme="light"] .game-result-overlay.result-draw .game-result-title { color:#8a6113 !important; }
html[data-ui-theme="light"] .game-result-overlay .game-result-sub { color:#64748b !important; }
html[data-ui-theme="light"] .game-result-overlay .game-result-player {
  background:linear-gradient(180deg,#f4f9fe,#e3eff9) !important;
  border-color:#bfd3e6 !important;
}
html[data-ui-theme="light"] .game-result-overlay .result-player-info small { color:#607086 !important; }
html[data-ui-theme="light"] .game-result-overlay .result-player-info strong { color:#172033 !important; }
html[data-ui-theme="light"] .game-result-overlay .result-stat {
  background:linear-gradient(180deg,#ffffff,#e9f2fa) !important;
  border-color:#c3d5e5 !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .game-result-overlay .result-stat b { color:#172033 !important; }
html[data-ui-theme="light"] .game-result-overlay .result-stat span { color:#64748b !important; }
html[data-ui-theme="light"] .game-result-overlay .result-stat.gain b { color:#237a42 !important; }
html[data-ui-theme="light"] .game-result-overlay .result-stat.drop b { color:#b4232c !important; }
html[data-ui-theme="light"] .game-result-overlay .result-stat.same b { color:#8a6113 !important; }
html[data-ui-theme="light"] .game-result-overlay .btn-analysis {
  background:linear-gradient(180deg,#ffffff,#e5eff8) !important;
  color:#24405f !important;
  border-color:#b9cee2 !important;
}
html[data-ui-theme="light"] .game-result-overlay .btn-analysis:hover {
  background:linear-gradient(180deg,#edf7ff,#d4e9fa) !important;
  color:#176bc1 !important;
  border-color:#6ea8dc !important;
}
html[data-ui-theme="light"] .game-result-overlay .btn-primary,
html[data-ui-theme="light"] .game-result-overlay .btn-rematch {
  background:linear-gradient(180deg,#4fbd67,#36a951) !important;
  color:#ffffff !important;
  border-color:#2f9947 !important;
}

/* Draw/rematch micro surfaces also follow the light game palette. */
html[data-ui-theme="light"] :where(.draw-toast,.rematch-card,.rematch-inline-panel) {
  background:linear-gradient(160deg,#ffffff,#edf5fb) !important;
  color:#172033 !important;
  border-color:#bdd2e5 !important;
  box-shadow:0 18px 48px rgba(42,84,124,.14),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] :where(.draw-toast,.rematch-card,.rematch-inline-panel) :where(p,small) { color:#64748b !important; }

@media (max-width:768px) {
  body.multiplayer-lobby-active #lobbyScreen.visible {
    padding:6px 8px max(6px,env(safe-area-inset-bottom)) !important;
  }
  body.multiplayer-lobby-active #lobbyScreen.visible .lobby-card {
    width:100% !important;
    max-width:480px !important;
    max-height:calc(100dvh - 72px) !important;
    padding:16px !important;
  }
  html[data-ui-theme="light"] .menu-section-views > .menu-back-btn {
    min-height:38px !important;
    height:38px !important;
    flex-basis:38px !important;
    padding:0 13px !important;
  }
}


/* =====================================================================
   ChessMondo 8.9.6 — Invite, viewport and Arena/Public light-mode polish
   Final override layer. Dark mode remains unchanged unless noted.
   ===================================================================== */

/* Active game/lobby pages use an app viewport, never the document itself.
   Desktop live games fit one screen; mobile uses only the inner app scroller
   so history/chat remain reachable without page/body bounce. */
html.chess-game-active-root,
html.multiplayer-lobby-active-root,
body.chess-game-active,
body.multiplayer-lobby-active {
  height:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.chess-game-active #gameScreen.screen,
body.multiplayer-lobby-active #gameScreen.screen {
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}
body.chess-game-active #gameArea.game-area,
body.multiplayer-lobby-active #gameArea.game-area {
  position:fixed !important;
  top:64px !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
  overflow-x:hidden !important;
  overscroll-behavior:none !important;
}
@media (min-width:901px) {
  body.chess-game-active #gameArea.game-area { overflow-y:hidden !important; }
  body.chess-game-active #gameBoard.game-board-wrap {
    margin-top:0 !important;
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  body.chess-game-active #gameBoard .game-layout {
    max-height:100% !important;
    margin-block:auto !important;
  }
}
@media (max-width:900px) {
  body.chess-game-active #gameArea.game-area {
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:max(14px, env(safe-area-inset-bottom)) !important;
  }
  body.chess-game-active #gameBoard.game-board-wrap { margin-top:0 !important; }
  body.chess-game-active #gameBoard .right-panel {
    overflow:visible !important;
  }
  body.chess-game-active #gameBoard #moveHistory {
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
}
body.multiplayer-lobby-active #gameArea.game-area {
  overflow:hidden !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.multiplayer-lobby-active #lobbyScreen.visible {
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  padding:8px 12px !important;
}
body.multiplayer-lobby-active #lobbyScreen.visible .lobby-card {
  max-height:100% !important;
}

/* When a live board is active, subsection shells are always gone. This is
   intentionally repeated after Arena rules so no empty rounded menu bar can
   reappear above an Arena match. */
body.chess-game-active #menuCard,
body.chess-game-active #menuSectionViews,
body.chess-game-active #menuHub,
body.chess-game-active .legal-mini-links {
  display:none !important;
}

/* Public Games creation copy must be genuinely dark on a light surface. */
html[data-ui-theme="light"] #panelPublic .public-room-action-card {
  background:linear-gradient(180deg,#fbfdff,#eef5fb) !important;
  border-color:#c6d9ea !important;
  box-shadow:inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelPublic .public-room-action-copy b {
  color:#0f172a !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #panelPublic .public-room-action-copy span {
  color:#475569 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #panelPublic .public-room-create-settings label > span {
  color:#475569 !important;
}
html[data-ui-theme="light"] #panelPublic .public-create-btn {
  background:linear-gradient(180deg,#dceeff,#bfdcf7) !important;
  border-color:#75afe5 !important;
  color:#16395f !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #panelPublic .public-create-btn::before { background:#176bc1 !important; }
html[data-ui-theme="light"] #panelPublic .public-create-btn:hover {
  background:linear-gradient(180deg,#cce7ff,#a8d2f7) !important;
  color:#0f2742 !important;
}
html[data-ui-theme="light"] #panelPublic .public-refresh-btn {
  color:#334155 !important;
}

/* Arena game-found prompt: blue light surface, semantic green/red actions. */
html[data-ui-theme="light"] .arena-match-popup .arena-match-card {
  background:linear-gradient(160deg,#eaf5ff 0%,#cfe6fa 100%) !important;
  border-color:#6da9df !important;
  box-shadow:0 18px 48px rgba(39,88,133,.20),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .arena-match-popup .arena-match-icon {
  background:linear-gradient(180deg,#fff8df,#f6e4a6) !important;
  border-color:#d8aa39 !important;
}
html[data-ui-theme="light"] .arena-match-popup .arena-match-title { color:#102a45 !important; }
html[data-ui-theme="light"] .arena-match-popup .arena-match-sub { color:#53677d !important; }
html[data-ui-theme="light"] .arena-match-popup .arena-match-progress { background:#b8c9d9 !important; }
html[data-ui-theme="light"] .arena-match-popup .arena-accept {
  background:linear-gradient(180deg,#42bd62,#2fa24b) !important;
  border:1px solid #278c3f !important;
  color:#ffffff !important;
}
html[data-ui-theme="light"] .arena-match-popup .arena-decline {
  background:linear-gradient(180deg,#ef6a6a,#d94747) !important;
  border:1px solid #c23737 !important;
  color:#ffffff !important;
}

/* Post-game actions have one fixed physical scale. Main Menu may never wrap
   into a taller two-line button in Light Mode. */
.game-result-overlay .game-result-actions {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}
.game-result-overlay .game-result-actions > button {
  width:100% !important;
  min-width:0 !important;
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;
  padding:0 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  line-height:1 !important;
  border-radius:10px !important;
}
html[data-ui-theme="light"] .game-result-overlay .game-result-actions > .btn-secondary:first-child {
  background:linear-gradient(180deg,#dceeff,#b9dafa) !important;
  border-color:#8eb9e3 !important;
  color:#17324f !important;
}
@media (max-width:420px) {
  .game-result-overlay .game-result-actions > button {
    font-size:13px !important;
    padding-inline:5px !important;
  }
}

/* =====================================================================
   ChessMondo 8.9.7 — Arena capture visibility + universal section hover
   Arena matches have one extra chess-clock row compared with untimed room
   games. Compact only the Arena live-board stack so both captured-piece bars
   remain visible without altering the shared multiplayer layout.
   ===================================================================== */

/* A consistent Light Mode back-to-main-menu interaction for every section:
   AI, Drunk Chess, Friend Match, Join Room, Public Games, Global Players,
   Arena, Posts, Premium and Chess Clubs. Normal is metallic white; hover/focus
   gets the same soft ChessMondo-blue lift that Arena already used. */
html[data-ui-theme="light"] body .menu-section-views:not(.hidden) > .menu-back-btn {
  background:linear-gradient(180deg,#ffffff 0%,#edf3f8 100%) !important;
  color:#334155 !important;
  border:1px solid #c5d2df !important;
  box-shadow:0 5px 14px rgba(71,85,105,.10),inset 0 1px 0 #ffffff !important;
  transform:translateY(0) !important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease !important;
}
html[data-ui-theme="light"] body .menu-section-views:not(.hidden) > .menu-back-btn:hover,
html[data-ui-theme="light"] body .menu-section-views:not(.hidden) > .menu-back-btn:focus-visible {
  background:linear-gradient(180deg,#e7f4ff 0%,#c9e4fb 100%) !important;
  color:#102a45 !important;
  border-color:#72abe0 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 9px 20px rgba(47,128,237,.17),inset 0 1px 0 #ffffff !important;
}

/* Desktop Arena match: reserve vertical space for both capture rails. */
@media (min-width:901px) {
  body.arena-live-game-active #gameBoard .left-panel {
    padding:6px 10px 7px !important;
  }
  body.arena-live-game-active #gameBoard #board,
  body.arena-live-game-active #gameBoard #status,
  body.arena-live-game-active #gameBoard .chess-clocks,
  body.arena-live-game-active #gameBoard .game-timer,
  body.arena-live-game-active #gameBoard .captured-bar,
  body.arena-live-game-active #gameBoard .controls,
  body.arena-live-game-active #gameBoard .mp-controls,
  body.arena-live-game-active #gameBoard #mpTopPlayer,
  body.arena-live-game-active #gameBoard #mpBottomPlayer,
  body.arena-live-game-active #gameBoard #disconnectBanner {
    width:min(445px, calc(100dvh - 465px), 100%) !important;
  }
  body.arena-live-game-active #gameBoard #board {
    min-width:350px !important;
  }
  body.arena-live-game-active #gameBoard #capturedByBlack.captured-bar,
  body.arena-live-game-active #gameBoard #capturedByWhite.captured-bar {
    min-height:22px !important;
    height:auto !important;
    padding:2px 8px !important;
    margin-top:0 !important;
    margin-bottom:4px !important;
    line-height:1 !important;
  }
  body.arena-live-game-active #gameBoard #capturedByWhite.captured-bar {
    margin-top:4px !important;
    margin-bottom:0 !important;
  }
  body.arena-live-game-active #gameBoard .mp-player-bar {
    min-height:38px !important;
    padding:3px 8px !important;
  }
  body.arena-live-game-active #gameBoard #mpTopPlayer {
    margin-bottom:4px !important;
  }
  body.arena-live-game-active #gameBoard #mpBottomPlayer {
    margin-top:5px !important;
    margin-bottom:0 !important;
  }
  body.arena-live-game-active #gameBoard .chess-clocks {
    min-height:34px !important;
    margin:0 0 4px !important;
    gap:6px !important;
  }
  body.arena-live-game-active #gameBoard .player-clock {
    min-height:34px !important;
    padding:4px 8px !important;
  }
  body.arena-live-game-active #gameBoard .clock-time { font-size:18px !important; }
  body.arena-live-game-active #gameBoard .clock-label { font-size:15px !important; }
  body.arena-live-game-active #gameBoard .game-timer {
    min-height:28px !important;
    padding:3px 8px !important;
    margin:0 0 4px !important;
  }
  body.arena-live-game-active #gameBoard #status {
    min-height:34px !important;
    padding:5px 9px !important;
    margin:0 0 4px !important;
  }
  body.arena-live-game-active #gameBoard #mpControls {
    margin-top:5px !important;
    margin-bottom:0 !important;
    gap:6px !important;
  }
  body.arena-live-game-active #gameBoard #mpControls button {
    min-height:34px !important;
    height:34px !important;
    padding:5px 9px !important;
  }
}

/* Arena on phones/tablets keeps the same ordering as every other board but
   trims only the extra clock/status spacing, so the lower captured rail is
   reached sooner in the existing inner app scroller. */
@media (max-width:900px) {
  body.arena-live-game-active #gameBoard #capturedByBlack.captured-bar,
  body.arena-live-game-active #gameBoard #capturedByWhite.captured-bar {
    min-height:21px !important;
    padding:2px 7px !important;
  }
  body.arena-live-game-active #gameBoard .chess-clocks {
    margin-bottom:3px !important;
  }
  body.arena-live-game-active #gameBoard .player-clock {
    padding:5px 7px !important;
  }
  body.arena-live-game-active #gameBoard .game-timer { margin-bottom:3px !important; }
  body.arena-live-game-active #gameBoard #status { margin-bottom:4px !important; }
  body.arena-live-game-active #gameBoard #mpBottomPlayer { margin-top:5px !important; }
  body.arena-live-game-active #gameBoard #mpControls { margin-top:5px !important; }
  body.arena-live-game-active #gameBoard #capturedByWhite { margin-top:4px !important; }
}


/* =====================================================================
   ChessMondo 8.9.8 — Arena sizing + Global light-mode readability +
   mobile live-game scroll recovery.
   ===================================================================== */

/* Arena desktop: 8.9.7 solved capture-rail clipping, but compressed the
   board too aggressively. Reclaim unused viewport height while preserving
   both capture rails and the complete live-game HUD. */
@media (min-width:901px) {
  body.arena-live-game-active #gameBoard .game-layout {
    max-width:min(1080px, calc(100vw - 28px)) !important;
    grid-template-columns:minmax(0,1fr) minmax(300px,330px) !important;
    gap:14px !important;
    align-items:center !important;
  }
  body.arena-live-game-active #gameBoard .left-panel {
    padding:7px 11px 8px !important;
  }
  body.arena-live-game-active #gameBoard #board,
  body.arena-live-game-active #gameBoard #status,
  body.arena-live-game-active #gameBoard .chess-clocks,
  body.arena-live-game-active #gameBoard .game-timer,
  body.arena-live-game-active #gameBoard .captured-bar,
  body.arena-live-game-active #gameBoard .controls,
  body.arena-live-game-active #gameBoard .mp-controls,
  body.arena-live-game-active #gameBoard #mpTopPlayer,
  body.arena-live-game-active #gameBoard #mpBottomPlayer,
  body.arena-live-game-active #gameBoard #disconnectBanner {
    width:min(500px, calc(100dvh - 330px), calc(100vw - 390px)) !important;
  }
  body.arena-live-game-active #gameBoard #board {
    min-width:400px !important;
  }
  body.arena-live-game-active #gameBoard #capturedByBlack.captured-bar,
  body.arena-live-game-active #gameBoard #capturedByWhite.captured-bar {
    min-height:24px !important;
    padding:3px 9px !important;
  }
  body.arena-live-game-active #gameBoard .mp-player-bar {
    min-height:40px !important;
    padding:4px 9px !important;
  }
  body.arena-live-game-active #gameBoard .chess-clocks {
    min-height:36px !important;
  }
  body.arena-live-game-active #gameBoard .player-clock {
    min-height:36px !important;
    padding:5px 9px !important;
  }
  body.arena-live-game-active #gameBoard .game-timer {
    min-height:29px !important;
  }
  body.arena-live-game-active #gameBoard #status {
    min-height:36px !important;
  }
}

/* Short desktop windows still scale gracefully rather than forcing the old
   ultra-small 350px Arena board. */
@media (min-width:901px) and (max-height:760px) {
  body.arena-live-game-active #gameBoard #board,
  body.arena-live-game-active #gameBoard #status,
  body.arena-live-game-active #gameBoard .chess-clocks,
  body.arena-live-game-active #gameBoard .game-timer,
  body.arena-live-game-active #gameBoard .captured-bar,
  body.arena-live-game-active #gameBoard .controls,
  body.arena-live-game-active #gameBoard .mp-controls,
  body.arena-live-game-active #gameBoard #mpTopPlayer,
  body.arena-live-game-active #gameBoard #mpBottomPlayer,
  body.arena-live-game-active #gameBoard #disconnectBanner {
    width:min(455px, calc(100dvh - 300px), calc(100vw - 370px)) !important;
  }
  body.arena-live-game-active #gameBoard #board { min-width:365px !important; }
}

/* Global Players — native Light Mode. Legacy leaderboard rules hard-code
   white text and dark premium cards, which creates near-invisible names and
   metadata. Make every informational text dark while keeping semantic accent
   colours and stronger subscription identity. */
html[data-ui-theme="light"] #panelGlobal,
html[data-ui-theme="light"] #panelGlobal .feature-panel,
html[data-ui-theme="light"] #panelGlobal .global-panel-head {
  color:#0f172a !important;
}
html[data-ui-theme="light"] #panelGlobal :where(
  .global-panel-head h3,.global-my-name,.global-section-title,
  .global-top-name,.global-user-name,.global-loading,.global-empty
) {
  color:#0f172a !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #panelGlobal :where(
  .global-panel-head p,.global-my-meta,.global-top-meta,.global-user-meta,
  .global-presence.offline,.global-top-score label,.global-user-rating label
) {
  color:#475569 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #panelGlobal :where(.global-top-rank,.global-user-rank) {
  color:#4b6077 !important;
}
html[data-ui-theme="light"] #panelGlobal .global-my-meta strong {
  color:#155fae !important;
}
html[data-ui-theme="light"] #panelGlobal .global-meta-break { color:#94a3b8 !important; }
html[data-ui-theme="light"] #panelGlobal .global-activity-chip {
  color:#334155 !important;
  background:#eef3f8 !important;
  border-color:#c7d4e2 !important;
}
html[data-ui-theme="light"] #panelGlobal .global-presence.online { color:#13834f !important; }

html[data-ui-theme="light"] #panelGlobal .global-my-card {
  background:linear-gradient(135deg,#f8fbff 0%,#e8f3ff 52%,#f4f8fc 100%) !important;
  border-color:#a8c9e9 !important;
  box-shadow:0 12px 28px rgba(35,93,149,.10), inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelGlobal :where(.global-top-card,.global-user-row) {
  background:linear-gradient(180deg,#ffffff 0%,#eef4f9 100%) !important;
  border-color:#c5d3e1 !important;
  color:#0f172a !important;
  box-shadow:0 6px 18px rgba(30,64,98,.06) !important;
}
html[data-ui-theme="light"] #panelGlobal :where(.global-top-card,.global-user-row):hover {
  background:linear-gradient(180deg,#f3f9ff 0%,#dceeff 100%) !important;
  border-color:#78afe2 !important;
  box-shadow:0 10px 24px rgba(47,128,237,.14) !important;
}
html[data-ui-theme="light"] #panelGlobal .global-top-card.rank-1:not(.global-premium-card) {
  background:linear-gradient(135deg,#fffaf0,#f7f2e5) !important;
  border-color:#d9b45a !important;
}
html[data-ui-theme="light"] #panelGlobal .global-top-card.rank-2:not(.global-premium-card) {
  background:linear-gradient(135deg,#fbfdff,#edf2f7) !important;
  border-color:#b8c4d1 !important;
}
html[data-ui-theme="light"] #panelGlobal .global-top-card.rank-3:not(.global-premium-card) {
  background:linear-gradient(135deg,#fff9f5,#f4ece6) !important;
  border-color:#c99a73 !important;
}

/* Subscription cards keep the iridescent identity in Light Mode, but use
   brighter colour separation rather than falling back to dark slabs. */
html[data-ui-theme="light"] #panelGlobal .global-premium-card::before {
  opacity:.88 !important;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.86) 22%,transparent 39%,rgba(82,157,255,.18) 58%,rgba(172,114,255,.15) 70%,transparent 86%) !important;
}
html[data-ui-theme="light"] #panelGlobal .global-premium-card.tier-1 {
  background:radial-gradient(circle at 4% 0%,rgba(255,204,86,.30),transparent 38%),linear-gradient(135deg,#fffdf6,#fff4cf 55%,#f8fbff) !important;
  border-color:#d6aa35 !important;
  box-shadow:0 10px 28px rgba(187,135,26,.14),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelGlobal .global-premium-card.tier-2 {
  background:radial-gradient(circle at 5% 0%,rgba(71,151,255,.28),transparent 42%),linear-gradient(135deg,#f7fbff,#dcecff 55%,#eef7ff) !important;
  border-color:#4d96df !important;
  box-shadow:0 10px 30px rgba(47,128,237,.18),0 0 0 1px rgba(47,128,237,.06) !important;
}
html[data-ui-theme="light"] #panelGlobal .global-premium-card.tier-3 {
  background:radial-gradient(circle at 5% 0%,rgba(255,200,67,.27),transparent 34%),radial-gradient(circle at 80% 0%,rgba(145,83,255,.24),transparent 42%),linear-gradient(135deg,#fffdf8,#f2e9ff 58%,#e9f4ff) !important;
  border-color:#8c62d9 !important;
  box-shadow:0 12px 32px rgba(119,78,189,.18),0 0 0 1px rgba(223,172,52,.12) !important;
}
html[data-ui-theme="light"] #panelGlobal .premium-name.premium-tier-1 {
  color:#8a5a00 !important;
  text-shadow:0 0 12px rgba(214,170,53,.16) !important;
}
html[data-ui-theme="light"] #panelGlobal .premium-name.premium-tier-2 {
  color:#115fae !important;
  text-shadow:0 0 13px rgba(47,128,237,.18) !important;
}
html[data-ui-theme="light"] #panelGlobal .premium-name.premium-tier-3 {
  color:#6d35b5 !important;
  text-shadow:0 0 10px rgba(137,87,214,.18),0 0 16px rgba(47,128,237,.10) !important;
}
html[data-ui-theme="light"] #panelGlobal .vip-tier-1 { color:#7a5200 !important; background:#fff3c8 !important; border-color:#d5aa3a !important; }
html[data-ui-theme="light"] #panelGlobal .vip-tier-2 { color:#125ba4 !important; background:#e3f0ff !important; border-color:#65a3e1 !important; }
html[data-ui-theme="light"] #panelGlobal .vip-tier-3 { color:#6934a9 !important; background:linear-gradient(135deg,#fff1c7,#efe2ff) !important; border-color:#a374dc !important; }

/* Global season countdown becomes a first-class Light Mode status chip. */
html[data-ui-theme="light"] #panelGlobal .global-season-countdown {
  background:linear-gradient(135deg,#f7fbff 0%,#e3f0ff 55%,#edf4ff 100%) !important;
  border:1px solid #8db8e3 !important;
  color:#334155 !important;
  box-shadow:0 7px 18px rgba(47,128,237,.10),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelGlobal .global-season-countdown span {
  color:#334155 !important;
  font-weight:800 !important;
}
html[data-ui-theme="light"] #panelGlobal .global-season-countdown strong {
  color:#1268c4 !important;
  background:#ffffff !important;
  border:1px solid #b6d3ef !important;
  border-radius:8px !important;
  padding:3px 7px !important;
  box-shadow:0 2px 8px rgba(47,128,237,.08) !important;
}
html[data-ui-theme="light"] #panelGlobal .global-season-countdown small {
  color:#5a6c80 !important;
}

/* MOBILE LIVE GAMES — one reliable internal page scroller for every board mode.
   The app shell/header stays fixed, but the board stack is allowed to become
   taller than the viewport. This makes Move History and Game Chat reachable in
   AI, Drunk Chess, Friend/Public rooms, Public bot rooms and Arena. */
@media (max-width:900px) {
  html.chess-game-active-root,
  body.chess-game-active {
    height:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
  }
  body.chess-game-active #gameScreen.screen {
    position:fixed !important;
    inset:0 !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  body.chess-game-active #gameArea.game-area {
    position:fixed !important;
    top:64px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:scroll !important;
    overscroll-behavior-x:none !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    scrollbar-width:auto !important;
    padding-top:8px !important;
    padding-bottom:max(42px,env(safe-area-inset-bottom)) !important;
  }
  body.chess-game-active #gameArea.game-area::-webkit-scrollbar {
    width:5px !important;
    display:block !important;
  }
  body.chess-game-active #gameArea.game-area::-webkit-scrollbar-thumb {
    background:rgba(88,166,255,.42) !important;
    border-radius:999px !important;
  }
  body.chess-game-active #gameBoard.game-board-wrap {
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:max-content !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 auto !important;
    padding-bottom:max(28px,env(safe-area-inset-bottom)) !important;
  }
  body.chess-game-active #gameBoard .game-layout {
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    height:auto !important;
    min-height:max-content !important;
    max-height:none !important;
    overflow:visible !important;
    gap:12px !important;
    align-items:start !important;
    justify-items:center !important;
    padding-bottom:16px !important;
  }
  body.chess-game-active #gameBoard .left-panel,
  body.chess-game-active #gameBoard .right-panel {
    position:relative !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.chess-game-active #gameBoard .right-panel {
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    padding-bottom:8px !important;
  }
  body.chess-game-active #gameBoard #moveHistory {
    flex:0 0 auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel.mp-chat {
    flex:0 0 auto !important;
    height:320px !important;
    min-height:280px !important;
    max-height:340px !important;
    margin-top:0 !important;
    overflow:hidden !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages {
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }
}

/* Mobile app/WebView top bars can be slightly taller because of safe-area
   insets. Keep the live scroller below the real header on narrow phones. */
@media (max-width:640px) {
  body.chess-game-active #gameArea.game-area {
    top:calc(62px + env(safe-area-inset-top)) !important;
  }
}

/* =====================================================================
   ChessMondo 8.9.9 — Mobile Scroll Reliability + Light UI Polish
   Scope: one mobile live-game scroller, Friend Match, Drunk Chess,
   Posts comments, Premium Plans and Chess Clubs light-mode consistency.
   ===================================================================== */

/* ---------------------------------------------------------------------
   MOBILE LIVE GAMES — use ONE vertical scroller.
   Previous nested scroll areas (outer game area + Move History + Chat)
   could fight for touch ownership on iOS/WebView and intermittently freeze.
   The gameArea is now the only vertical page scroller; history and chat flow
   naturally inside it so every mode can reach Move History and Game Chat.
   --------------------------------------------------------------------- */
@media (max-width:900px) {
  html.chess-game-active-root,
  body.chess-game-active {
    height:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }
  body.chess-game-active #gameScreen.screen {
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  body.chess-game-active #gameArea.game-area {
    position:absolute !important;
    top:calc(62px + env(safe-area-inset-top)) !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    scroll-behavior:auto !important;
    transform:none !important;
    contain:none !important;
    padding:8px max(8px,env(safe-area-inset-right)) max(56px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important;
  }
  body.chess-game-active #gameBoard.game-board-wrap,
  body.chess-game-active #gameBoard .game-layout,
  body.chess-game-active #gameBoard .left-panel,
  body.chess-game-active #gameBoard .right-panel {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.chess-game-active #gameBoard .right-panel {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    padding-bottom:24px !important;
  }
  body.chess-game-active #gameBoard #moveHistory {
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    touch-action:auto !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel.mp-chat {
    flex:0 0 auto !important;
    height:auto !important;
    min-height:330px !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
    touch-action:auto !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages {
    flex:0 0 auto !important;
    min-height:210px !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:auto !important;
    touch-action:auto !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-input-row {
    position:relative !important;
    bottom:auto !important;
    flex:0 0 auto !important;
  }
}

/* ---------------------------------------------------------------------
   FRIEND MATCH — Light Mode Create Room should belong to the same blue-
   metallic system as the rest of ChessMondo rather than a dark legacy slab.
   --------------------------------------------------------------------- */
html[data-ui-theme="light"] #panelFriend .mp-big-btn {
  background:linear-gradient(135deg,#eaf5ff 0%,#cfe7ff 55%,#e9f4ff 100%) !important;
  color:#15324f !important;
  border:1px solid #8dbce8 !important;
  box-shadow:0 9px 22px rgba(47,128,237,.12),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-ui-theme="light"] #panelFriend .mp-big-btn :where(div,span) { color:#15324f !important; }
html[data-ui-theme="light"] #panelFriend .mp-big-btn .mp-btn-icon { color:#267bc8 !important; filter:none !important; }
html[data-ui-theme="light"] #panelFriend .mp-big-btn:hover:not(:disabled) {
  background:linear-gradient(135deg,#d9eeff 0%,#b7dbff 58%,#dfeeff 100%) !important;
  border-color:#5c9fdf !important;
  box-shadow:0 12px 26px rgba(47,128,237,.18),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelFriend .menu-check-row,
html[data-ui-theme="light"] #panelFriend .menu-check-row span { color:#334155 !important; }

/* ---------------------------------------------------------------------
   DRUNK CHESS — calm glass-lavender light palette with readable dark text.
   --------------------------------------------------------------------- */
html[data-ui-theme="light"] #panelDrunk .drunk-menu-note {
  background:
    radial-gradient(circle at 8% 0%,rgba(151,94,255,.14),transparent 38%),
    linear-gradient(135deg,rgba(246,241,255,.94),rgba(229,241,255,.94)) !important;
  border:1px solid #c9b6ef !important;
  box-shadow:0 10px 26px rgba(111,66,193,.09),inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter:blur(12px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(125%) !important;
  color:#263548 !important;
}
html[data-ui-theme="light"] #panelDrunk .drunk-menu-note b { color:#6f42c1 !important; }
html[data-ui-theme="light"] #panelDrunk .drunk-menu-note span { color:#475569 !important; }

html[data-ui-theme="light"] .drunk-rules-modal {
  background:
    radial-gradient(circle at 5% 0%,rgba(138,92,246,.13),transparent 38%),
    linear-gradient(155deg,rgba(255,255,255,.98),rgba(234,242,252,.98)) !important;
  border:1px solid #bba6e6 !important;
  box-shadow:0 26px 72px rgba(61,77,101,.22),0 0 0 1px rgba(255,255,255,.9) inset !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] .drunk-rules-modal-head h3 { color:#172033 !important; }
html[data-ui-theme="light"] .drunk-rules-modal .drunk-kicker { color:#7652a9 !important; }
html[data-ui-theme="light"] .drunk-rules-close {
  background:linear-gradient(180deg,#ffffff,#e7edf5) !important;
  border-color:#c6d1df !important;
  color:#334155 !important;
}
html[data-ui-theme="light"] .drunk-rules-modal-status {
  background:linear-gradient(135deg,#edf7ff,#e8e4fb) !important;
  border:1px solid #c4d6ec !important;
  color:#475569 !important;
}
html[data-ui-theme="light"] .drunk-rules-modal-status strong { color:#172033 !important; }
html[data-ui-theme="light"] .drunk-rules-modal-note { color:#475569 !important; }
html[data-ui-theme="light"] .drunk-rules-modal .drunk-rules div {
  background:linear-gradient(135deg,rgba(239,246,255,.94),rgba(241,237,252,.94)) !important;
  border:1px solid #cbd8e7 !important;
  color:#1f2937 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-ui-theme="light"] .drunk-rules-modal .drunk-rules span { color:#5b6777 !important; }
html[data-ui-theme="light"] .drunk-rules-modal .drunk-rules b { color:#172033 !important; }
html[data-ui-theme="light"] .drunk-rules-modal .drunk-phase-pill.is-normal {
  color:#146c43 !important;
  background:#e5f7ee !important;
  border-color:#8bd2ad !important;
}
html[data-ui-theme="light"] .drunk-rules-modal .drunk-phase-pill.is-drunk {
  color:#6536a4 !important;
  background:#efe7ff !important;
  border-color:#ba9ce9 !important;
}

/* ---------------------------------------------------------------------
   POSTS — comments use a bluish glass surface with black/navy copy.
   --------------------------------------------------------------------- */
html[data-ui-theme="light"] #panelPosts .post-comments { gap:7px !important; }
html[data-ui-theme="light"] #panelPosts .post-comment {
  background:linear-gradient(135deg,rgba(225,240,255,.90),rgba(238,247,255,.78)) !important;
  border:1px solid rgba(122,173,220,.55) !important;
  color:#111827 !important;
  box-shadow:0 5px 14px rgba(47,128,237,.07),inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter:blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(130%) !important;
}
html[data-ui-theme="light"] #panelPosts .post-comment b { color:#1976c9 !important; }
html[data-ui-theme="light"] #panelPosts .post-comment span,
html[data-ui-theme="light"] #panelPosts .post-comment span * { color:#172033 !important; }
html[data-ui-theme="light"] #panelPosts .post-load-comments {
  background:linear-gradient(180deg,#dceeff,#c7e2fb) !important;
  border:1px solid #94bfe8 !important;
  color:#183b61 !important;
}
html[data-ui-theme="light"] #panelPosts .post-comment-row input {
  background:rgba(255,255,255,.95) !important;
  color:#111827 !important;
  border-color:#b9cee3 !important;
}

/* ---------------------------------------------------------------------
   PREMIUM PLANS — native Light Mode cards instead of dark plan slabs.
   --------------------------------------------------------------------- */
html[data-ui-theme="light"] #panelPremium .premium-page-shell {
  background:linear-gradient(155deg,#ffffff,#eef4fa) !important;
  border:1px solid #ced9e4 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #panelPremium .premium-head {
  background:linear-gradient(135deg,#f8fbff,#e7f0fa) !important;
  border:1px solid #c8d7e6 !important;
  color:#172033 !important;
  box-shadow:0 10px 26px rgba(43,77,112,.08),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelPremium .premium-kicker { color:#9a6c13 !important; }
html[data-ui-theme="light"] #panelPremium .premium-head h3 { color:#172033 !important; }
html[data-ui-theme="light"] #panelPremium .premium-current-card {
  background:linear-gradient(135deg,#ffffff,#edf4fb) !important;
  border:1px solid #c5d4e3 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #panelPremium .premium-current-card b { color:#172033 !important; }
html[data-ui-theme="light"] #panelPremium .premium-current-card span { color:#64748b !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-tabs { background:transparent !important; border:0 !important; }
html[data-ui-theme="light"] #panelPremium .premium-tier-tab {
  background:linear-gradient(180deg,#ffffff,#edf3f8) !important;
  border-color:#cbd6e2 !important;
  color:#172033 !important;
  box-shadow:0 6px 16px rgba(31,61,92,.07) !important;
}
html[data-ui-theme="light"] #panelPremium .premium-tier-tab.pawn { border-color:#d8b65e !important; background:linear-gradient(135deg,#fffdf7,#fff3d4) !important; }
html[data-ui-theme="light"] #panelPremium .premium-tier-tab.knight { border-color:#79aee0 !important; background:linear-gradient(135deg,#f8fbff,#e5f1ff) !important; }
html[data-ui-theme="light"] #panelPremium .premium-tier-tab.king { border-color:#a987df !important; background:linear-gradient(135deg,#fffdf6,#f0e8ff 65%,#eaf4ff) !important; }
html[data-ui-theme="light"] #panelPremium .premium-tier-tab-top,
html[data-ui-theme="light"] #panelPremium .premium-tier-tab-bottom { color:#263548 !important; }
html[data-ui-theme="light"] #panelPremium .premium-tier-tab-state { color:#7a5a12 !important; background:rgba(255,244,201,.9) !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-view { background:transparent !important; border:0 !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-card {
  color:#172033 !important;
  border:1px solid #cbd6e2 !important;
  box-shadow:0 16px 38px rgba(45,73,101,.11),inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] #panelPremium .premium-plan-card.pawn { background:linear-gradient(135deg,#fffdf8,#fff2cf 62%,#edf5ff) !important; border-color:#d8b55a !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-card.knight { background:linear-gradient(135deg,#fbfdff,#dcecff 64%,#edf7ff) !important; border-color:#6fa9df !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-card.king { background:linear-gradient(135deg,#fffdf8,#efe6ff 58%,#e7f3ff) !important; border-color:#9470d4 !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-card :where(b,li,.premium-price,.premium-price span) { color:#172033 !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-top small { color:#64748b !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-state { color:#735414 !important; }
html[data-ui-theme="light"] #panelPremium .premium-plan-icon {
  background:linear-gradient(135deg,#e7f2ff,#fff1bf) !important;
  color:#9a6b12 !important;
  border:1px solid #c9d6e3 !important;
}
html[data-ui-theme="light"] #panelPremium :where(.premium-extra-features,.premium-avatar-section,.premium-section-row,.premium-avatar-tier-group) {
  background:linear-gradient(180deg,#fbfdff,#eef4fa) !important;
  border-color:#d2dce7 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] #panelPremium .premium-feature-tags span {
  background:#e8f3ff !important;
  border-color:#b9d5f0 !important;
  color:#284b70 !important;
}

/* ---------------------------------------------------------------------
   CHESS CLUBS — complete Light Mode surface pass.
   --------------------------------------------------------------------- */
html[data-ui-theme="light"] body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub],
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal {
  background:linear-gradient(155deg,#ffffff,#edf3f8) !important;
  border-color:#cbd7e4 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] :where(.clubs-app-shell,.clubs-chat-list-panel,.clubs-conversation-panel) {
  background:linear-gradient(180deg,#ffffff,#eef4f9) !important;
  border-color:#cbd7e3 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-app-head {
  background:linear-gradient(135deg,#f8fbff,#e5eff9) !important;
  border-color:#c8d8e7 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-app-head h3 { color:#172033 !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-page-mark {
  background:#f0ecff !important;
  border-color:#c5b5ea !important;
  color:#7448b8 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .circle-tool-btn {
  background:linear-gradient(180deg,#ffffff,#e8eef5) !important;
  border-color:#c5d1df !important;
  color:#334155 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .circle-tool-btn.create {
  background:linear-gradient(180deg,#e3f1ff,#cce5ff) !important;
  border-color:#86b7e6 !important;
  color:#1d65a8 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-tabs {
  background:#f7fafe !important;
  border-color:#d2dde8 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-tabs button {
  background:linear-gradient(180deg,#ffffff,#e9eff5) !important;
  color:#334155 !important;
  border-color:#c9d5e1 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-tabs button[aria-selected="true"] {
  background:linear-gradient(180deg,#4b9cf0,#2f7fd7) !important;
  color:#ffffff !important;
  border-color:#2f80d8 !important;
  box-shadow:0 0 0 2px rgba(47,128,237,.14),inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-section,
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-intro {
  background:transparent !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-intro :where(h3,.clubs-hub-eyebrow) { color:#21354b !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-intro p { color:#64748b !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-search-row {
  background:#ffffff !important;
  border-color:#c5d4e3 !important;
  color:#64748b !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-search-row input {
  background:transparent !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-row {
  background:linear-gradient(180deg,#ffffff,#edf4fa) !important;
  border-color:#cbd7e3 !important;
  color:#172033 !important;
  box-shadow:0 7px 18px rgba(41,70,100,.07) !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-row:hover {
  background:linear-gradient(180deg,#f6fbff,#dfefff) !important;
  border-color:#8cb8e1 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-row.is-owner {
  background:linear-gradient(135deg,#fffdf8,#fff5d8 45%,#eaf4ff) !important;
  border-color:#d5b454 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-row-title h4,
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-row-main > p,
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-row-meta,
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-joined-meta,
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-top-meta { color:#334155 !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-row-title h4 { color:#172033 !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-row-main > p.muted { color:#64748b !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-owner-name { color:#9a6b12 !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-owner-chip {
  color:#7a560e !important;
  background:#fff2c2 !important;
  border-color:#d6ae3d !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-empty,
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-note {
  background:#f4f9ff !important;
  border-color:#afcce8 !important;
  color:#536579 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-challenge,
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] #clubBattleChallenge > * {
  background:linear-gradient(135deg,#f5faff,#e7f1fa) !important;
  border-color:#b8cde2 !important;
  color:#172033 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-challenge :where(label,small,b,p) { color:#475569 !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .clubs-hub-challenge :where(input,select) {
  background:#ffffff !important;
  color:#172033 !important;
  border-color:#b8c9da !important;
}

/* Club editor / Manage — including the mobile portal instance. */
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-editor,
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-editor {
  background:linear-gradient(155deg,#ffffff,#edf4fa) !important;
  border-color:#bfcfdf !important;
  color:#172033 !important;
  box-shadow:0 22px 60px rgba(38,63,91,.18) !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-editor-head,
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-editor-head {
  border-color:#d2dce6 !important;
  background:linear-gradient(135deg,#f8fbff,#e7f1fa) !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-editor-head b,
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-editor-head b { color:#1e6fbd !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-editor-head span,
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-editor-head span { color:#64748b !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-logo-pick,
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-logo-pick {
  background:linear-gradient(180deg,#f6fbff,#eaf3fb) !important;
  border-color:#8db8df !important;
  color:#475569 !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-fields label,
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-fields label { color:#536579 !important; }
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-fields :where(input,textarea),
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-fields :where(input,textarea) {
  background:#ffffff !important;
  color:#172033 !important;
  border-color:#bdccdc !important;
}
html[data-ui-theme="light"] body #panelClubs[data-clubs-hub] .club-profile-editor-actions .ghost-btn,
html[data-ui-theme="light"] body > #panelClubs.club-mobile-portal .club-profile-editor-actions .ghost-btn {
  background:linear-gradient(180deg,#ffffff,#e8eff6) !important;
  color:#334155 !important;
  border-color:#c5d2df !important;
}

/* Mobile My Clubs: actions get their own row so Open Chat / Manage never sit
   on top of description/member/rating copy. */
@media (max-width:600px) {
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row {
    grid-template-columns:42px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:start !important;
    gap:8px 10px !important;
    min-height:0 !important;
    padding:10px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row > .clubs-hub-avatar {
    grid-column:1 !important;
    grid-row:1 !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row > .clubs-row-main {
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-directory-row > .clubs-row-action-cell {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:2px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-actions-inline {
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
    gap:8px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-actions-inline .clubs-hub-action {
    flex:0 1 46% !important;
    min-width:0 !important;
    min-height:38px !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-main > p {
    display:block !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.25 !important;
  }
  body #panelClubs.feature-panel.menu-section-panel[data-clubs-hub] .clubs-row-meta {
    white-space:normal !important;
    flex-wrap:wrap !important;
    line-height:1.25 !important;
  }
}


/* =====================================================================
   ChessMondo 8.9.12 — Mobile Move History + Game Chat bounded scrolling
   Scope: every live game mode that exposes Move History / Game Chat.
   Five full-move rows remain visible; later rows scroll inside history.
   Chat keeps an approximately three-message viewport; older messages scroll.
   ===================================================================== */
@media (max-width:900px) {
  /* Keep the game document itself reachable, but restore dedicated bounded
     scrollers for the two long-running data areas. This replaces the 8.9.9
     mobile rule that let history and chat grow without limit. */
  body.chess-game-active #gameBoard .right-panel {
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    gap:10px !important;
  }

  body.chess-game-active #gameBoard #moveHistory {
    --cm-mobile-history-head-h:44px;
    --cm-mobile-history-row-h:46px;
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    height:calc(var(--cm-mobile-history-head-h) + (var(--cm-mobile-history-row-h) * 5)) !important;
    min-height:calc(var(--cm-mobile-history-head-h) + (var(--cm-mobile-history-row-h) * 5)) !important;
    max-height:calc(var(--cm-mobile-history-head-h) + (var(--cm-mobile-history-row-h) * 5)) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    scroll-behavior:auto !important;
    scrollbar-width:thin !important;
    scrollbar-color:#5f9ed8 rgba(90,130,170,.12) !important;
  }
  body.chess-game-active #gameBoard #moveHistory::-webkit-scrollbar {
    width:5px !important;
  }
  body.chess-game-active #gameBoard #moveHistory::-webkit-scrollbar-track {
    background:rgba(90,130,170,.10) !important;
  }
  body.chess-game-active #gameBoard #moveHistory::-webkit-scrollbar-thumb {
    background:#5f9ed8 !important;
    border-radius:999px !important;
  }
  body.chess-game-active #gameBoard #moveHistory table {
    width:100% !important;
    table-layout:fixed !important;
    border-collapse:collapse !important;
  }
  body.chess-game-active #gameBoard #moveHistory thead th {
    position:sticky !important;
    top:0 !important;
    z-index:6 !important;
    box-sizing:border-box !important;
    height:var(--cm-mobile-history-head-h) !important;
    min-height:var(--cm-mobile-history-head-h) !important;
    padding:8px 10px !important;
  }
  body.chess-game-active #gameBoard #moveHistory tbody tr,
  body.chess-game-active #gameBoard #moveHistory tbody td {
    box-sizing:border-box !important;
    height:var(--cm-mobile-history-row-h) !important;
    min-height:var(--cm-mobile-history-row-h) !important;
  }
  body.chess-game-active #gameBoard #moveHistory tbody td {
    padding:7px 10px !important;
    line-height:1.12 !important;
  }
  body.chess-game-active #gameBoard #moveHistory .empty-history {
    min-height:calc(var(--cm-mobile-history-row-h) * 5) !important;
    height:calc(var(--cm-mobile-history-row-h) * 5) !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    padding:12px !important;
  }

  /* Game Chat: the header/tools/input remain fixed within the card while only
     the messages area scrolls. The viewport is sized for roughly three normal
     message bubbles, preventing chat from stretching the full phone page. */
  body.chess-game-active #gameBoard #mpChatPanel.mp-chat {
    display:flex !important;
    flex-direction:column !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
    touch-action:auto !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages {
    box-sizing:border-box !important;
    flex:0 0 300px !important;
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    scroll-behavior:auto !important;
    scrollbar-width:thin !important;
    scrollbar-color:#5f9ed8 rgba(90,130,170,.12) !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages::-webkit-scrollbar {
    width:5px !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages::-webkit-scrollbar-track {
    background:rgba(90,130,170,.10) !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages::-webkit-scrollbar-thumb {
    background:#5f9ed8 !important;
    border-radius:999px !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel :where(.mp-chat-header,.mp-chat-picker-zone,.mp-chat-input-row,.chat-reply-preview) {
    flex:0 0 auto !important;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-input-row {
    position:relative !important;
    inset:auto !important;
  }

  /* Public-bot rooms share the same game-side components but may carry their
     own layout class. Keep them on exactly the same five-row / chat cap. */
  #gameBoard.public-bot-room-layout #moveHistory {
    --cm-bot-history-head-h:44px;
    --cm-bot-history-row-h:46px;
    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;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }
  #gameBoard.public-bot-room-layout #mpChatPanel .mp-chat-messages {
    flex:0 0 300px !important;
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }
}

@media (max-width:480px) {
  body.chess-game-active #gameBoard #moveHistory,
  #gameBoard.public-bot-room-layout #moveHistory {
    --cm-mobile-history-head-h:42px;
    --cm-mobile-history-row-h:44px;
    --cm-bot-history-head-h:42px;
    --cm-bot-history-row-h:44px;
  }
  body.chess-game-active #gameBoard #mpChatPanel .mp-chat-messages,
  #gameBoard.public-bot-room-layout #mpChatPanel .mp-chat-messages {
    flex-basis:280px !important;
    height:280px !important;
    min-height:280px !important;
    max-height:280px !important;
  }
}

/* =====================================================================
   ChessMondo v8.9.14 — Light Profile & Social Visual Consistency Hotfix
   Scope: header profile identity, Public Profile banner, Settings title,
   Friends / Followers / Leaderboard / Blocked Players light-mode geometry.
   Dark mode remains unchanged.
   ===================================================================== */

/* Header profile identity: username is ALWAYS dark in Light Mode,
   regardless of Free / Pawn+ / Knight+ / King+ status. Premium identity
   stays in the border, glow, avatar ring and badge instead of white text. */
html[data-ui-theme="light"] .top-profile #topUsername,
html[data-ui-theme="light"] .top-profile .top-username,
html[data-ui-theme="light"] .top-profile .premium-name,
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:#0b1728 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 14px rgba(255,255,255,.72) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button {
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,246,255,.98)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--premium-a) 28%,transparent),
    0 8px 24px rgba(73,105,142,.14),
    0 0 24px color-mix(in srgb,var(--premium-a) 30%,transparent),
    inset 0 1px 0 #fff !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button::before {
  opacity:.90 !important;
  filter:saturate(1.55) brightness(1.10) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button::after {
  background:
    radial-gradient(circle at 16% 50%,color-mix(in srgb,var(--premium-a) 18%,transparent),transparent 43%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(232,243,255,.94)) !important;
}
html[data-ui-theme="light"] .top-profile.premium-profile-button:hover {
  background:linear-gradient(180deg,#ffffff,#e9f4ff) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--premium-a) 42%,transparent),
    0 10px 30px rgba(73,105,142,.16),
    0 0 30px color-mix(in srgb,var(--premium-a) 42%,transparent),
    inset 0 1px 0 #fff !important;
}

/* Settings title must not inherit the dark-mode accent/white rules. */
html[data-ui-theme="light"] .settings-header,
html[data-ui-theme="light"] .settings-header > span {
  color:#0f172a !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] .settings-header {
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  border-bottom-color:#cbdceb !important;
}

/* Public Profile: always show the selected/uploaded invite/chat image in
   Light Mode. Keep it clearly visible, while a glass panel protects text. */
html[data-ui-theme="light"] #publicProfileModal .public-profile-hero.has-public-profile-banner {
  background:#edf5fd !important;
  border-color:#aac9e6 !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media {
  opacity:1 !important;
  display:block !important;
  visibility:visible !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media img {
  opacity:.82 !important;
  filter:saturate(1.18) contrast(1.06) brightness(1.03) !important;
  transform:scale(1.02) !important;
}
html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media::after {
  background:
    linear-gradient(90deg,rgba(255,255,255,.50) 0%,rgba(248,252,255,.34) 45%,rgba(239,247,255,.22) 100%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(235,245,255,.26)) !important;
}
html[data-ui-theme="light"] #publicProfileModal .has-public-profile-banner .public-profile-main {
  padding:8px 10px !important;
  border:1px solid rgba(255,255,255,.76) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.70) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.08) !important;
  backdrop-filter:blur(7px) saturate(1.08) !important;
  box-shadow:0 7px 20px rgba(59,95,135,.12) !important;
}
html[data-ui-theme="light"] #publicProfileModal .has-public-profile-banner .public-profile-main h3,
html[data-ui-theme="light"] #publicProfileModal .has-public-profile-banner .public-profile-main h3 .premium-name,
html[data-ui-theme="light"] #publicProfileModal .has-public-profile-banner .public-profile-main p {
  color:#0d1f34 !important;
  text-shadow:none !important;
}
html[data-ui-theme="light"] #publicProfileModal .has-public-profile-banner .public-profile-main p {
  color:#405c78 !important;
}

/* Shared social windows: retain the premium rounded geometry used by Dark
   Mode instead of becoming flat/basic rectangles in Light Mode. */
html[data-ui-theme="light"] #publicProfileModal .modal-card,
html[data-ui-theme="light"] #friendsModal .friends-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 {
  border-radius:20px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#ffffff 0%,#f3f8fd 100%) !important;
  border:1px solid #bcd1e6 !important;
  box-shadow:0 22px 62px rgba(67,101,140,.22),inset 0 1px 0 #fff !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 {
  border-radius:19px 19px 0 0 !important;
}

/* Friends: rounded tab rail + rounded cards/actions like the dark version. */
html[data-ui-theme="light"] #friendsModal .friends-tabs {
  margin:10px 12px 0 !important;
  padding:4px !important;
  gap:5px !important;
  border:1px solid #c8d9eb !important;
  border-radius:13px !important;
  background:linear-gradient(180deg,#f7fbff,#edf5fd) !important;
  overflow:hidden !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab {
  min-height:37px !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
  color:#36536f !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab.active {
  background:linear-gradient(180deg,#e8f4ff,#d8ebff) !important;
  border-color:#94bce2 !important;
  color:#123a62 !important;
  box-shadow:0 4px 12px rgba(57,125,197,.12) !important;
}
html[data-ui-theme="light"] #friendsModal .friends-tab:hover:not(.active) {
  background:#f4f9ff !important;
  border-color:#d0dfed !important;
}
html[data-ui-theme="light"] #friendsModal .friends-panel {
  margin:10px 12px 12px !important;
  padding:12px !important;
  border:1px solid #d2e0ed !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#fbfdff,#f3f8fd) !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 {
  border-radius:13px !important;
  overflow:hidden !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 .friend-image-delete-btn,
html[data-ui-theme="light"] #friendsModal .friends-link-row button,
html[data-ui-theme="light"] #friendsModal .friends-search-row button {
  border-radius:9px !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 {
  border-radius:10px !important;
}

/* Followers / Following keeps the same rounded visual system. */
html[data-ui-theme="light"] #followNetworkModal .follow-tabs {
  margin:10px 12px 0 !important;
  padding:4px !important;
  gap:6px !important;
  border:1px solid #c8d9eb !important;
  border-radius:13px !important;
  background:linear-gradient(180deg,#f7fbff,#edf5fd) !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-tabs button {
  border-radius:9px !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-network-body {
  margin:10px 12px 12px !important;
  border:1px solid #d2e0ed !important;
  border-radius:14px !important;
  overflow:auto !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-network-row,
html[data-ui-theme="light"] #followNetworkModal .follow-empty-card,
html[data-ui-theme="light"] #followNetworkModal .global-empty {
  border-radius:13px !important;
}
html[data-ui-theme="light"] #followNetworkModal .follow-row-action {
  border-radius:9px !important;
}

/* Leaderboard / Blocked Players: rounded rows and body frame. */
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-leaderboard-body,
html[data-ui-theme="light"] #blockedUsersModal .blocked-users-body {
  margin:10px 12px 12px !important;
  padding:10px !important;
  border:1px solid #d2e0ed !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#fbfdff,#f3f8fd) !important;
}
html[data-ui-theme="light"] #friendsLeaderboardModal .friends-lb-row,
html[data-ui-theme="light"] #blockedUsersModal .blocked-user-row,
html[data-ui-theme="light"] #blockedUsersModal .global-empty {
  border-radius:13px !important;
}
html[data-ui-theme="light"] #blockedUsersModal .blocked-user-row button {
  border-radius:9px !important;
}

/* Preserve mobile safe-area behavior while keeping visible rounded corners. */
@media (max-width:640px) {
  html[data-ui-theme="light"] #publicProfileModal .modal-card,
  html[data-ui-theme="light"] #friendsModal .friends-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 {
    border-radius:17px !important;
  }
  html[data-ui-theme="light"] #friendsModal .friends-tabs,
  html[data-ui-theme="light"] #followNetworkModal .follow-tabs {
    margin-left:8px !important;
    margin-right:8px !important;
  }
  html[data-ui-theme="light"] #friendsModal .friends-panel,
  html[data-ui-theme="light"] #followNetworkModal .follow-network-body,
  html[data-ui-theme="light"] #friendsLeaderboardModal .friends-leaderboard-body,
  html[data-ui-theme="light"] #blockedUsersModal .blocked-users-body {
    margin-left:8px !important;
    margin-right:8px !important;
  }
}

/* =====================================================================
   ChessMondo v8.9.15 — Public Banner Natural Visibility Hotfix
   ===================================================================== */
html[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 {
  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 .has-public-profile-banner .public-profile-main {
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter:blur(5px) saturate(1.08) !important;
  backdrop-filter:blur(5px) saturate(1.08) !important;
  box-shadow:0 8px 22px rgba(66,99,139,.12) !important;
}
@media (max-width:640px) {
  html[data-ui-theme="light"] #publicProfileModal .public-profile-banner-media img {
    opacity:.82 !important;
    filter:saturate(1.08) contrast(1.04) brightness(1.035) !important;
  }
}

/* ChessMondo 8.10.1 — language selector scrolling in Light Mode */
html[data-ui-theme="light"] .language-selector-grid {
  scrollbar-color: rgba(47,128,237,.52) rgba(203,213,225,.42);
}
html[data-ui-theme="light"] .language-selector-grid::-webkit-scrollbar-track {
  background: rgba(203,213,225,.38);
}
html[data-ui-theme="light"] .language-selector-grid::-webkit-scrollbar-thumb {
  background: rgba(47,128,237,.46);
  background-clip: padding-box;
}